/* =========================================================================
   Alessandro Montibelli — Consulente IT per PMI
   style.css — foglio di stile unico, nessuna dipendenza esterna.

   Indice
   1. Reset
   2. Token (colori, tipografia, spazio, motion)
   3. Font
   4. Base ed elementi
   5. Layout (contenitore, sezioni, griglie)
   6. Componenti
   7. Pagine
   8. Utility
   9. Media query
   ========================================================================= */


/* =========================================================================
   1. RESET
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* compensa l'header sticky sugli anchor */
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================================
   2. TOKEN
   ========================================================================= */

:root {

  /* --- Colore -----------------------------------------------------------
     Un solo accento. Il verde e' riservato allo stato "disponibile" e non
     compare da nessun'altra parte. Tutti i rapporti di contrasto testo/fondo
     sono verificati >= 4.5:1 (WCAG AA su testo normale).                  */

  --bg:          #060B14;
  --surface:     #0C1523;
  --surface-2:   #121C2E;
  --surface-3:   #18243A;   /* hover delle celle */

  --border:      rgba(255, 255, 255, .08);
  --border-hi:   rgba(255, 255, 255, .16);
  --border-loud: rgba(255, 255, 255, .24);

  --text:        #E9EEF6;
  --text-muted:  #8695AC;
  --text-dim:    #64748B;   /* solo decorativo, mai testo informativo */

  --accent:      #4C9AFF;
  --accent-hi:   #6AACFF;
  --accent-dim:  rgba(76, 154, 255, .14);
  --on-accent:   #060B14;

  --signal:      #34D399;
  --danger:      #F87171;

  /* --- Tipografia ------------------------------------------------------- */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
               Consolas, 'Liberation Mono', monospace;

  /* Scala modulare, quarta giusta (1.333) a partire da 17px. */
  --fs-xs:   0.75rem;    /* 12px — label mono */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1.0625rem;  /* 17px — corpo */
  --fs-md:   1.1875rem;  /* 19px — occhiello/lede */
  --fs-lg:   1.4375rem;  /* 23px — h3 */
  --fs-xl:   clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);     /* h2 */
  --fs-2xl:  clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);      /* h1 hero */

  --lh-tight: 1.05;
  --lh-title: 1.18;
  --lh-body:  1.65;

  /* L'unita' ch vale la larghezza dello zero, piu' larga della lettera media:
     con Inter 52ch sullo schermo fanno circa 68 caratteri reali, che e' la
     misura buona per il corpo del testo. Non scrivere qui 68ch. */
  --measure: 52ch;
  --measure-narrow: 42ch;

  /* --- Spazio (scala 4px) ----------------------------------------------- */

  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  --section-y: clamp(72px, 9vw, 128px);

  /* --- Forma e movimento ------------------------------------------------- */

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 220ms var(--ease);

  --container: 1200px;
  --header-h: 68px;
}


/* =========================================================================
   3. FONT
   Inter variabile 400-700 e JetBrains Mono, self-hosted: nessuna richiesta
   a domini terzi, nessun consenso da raccogliere per i font.
   Solo i subset latin e latin-ext.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-400700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-400700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================================
   4. BASE ED ELEMENTI
   ========================================================================= */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: var(--lh-title);
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -0.038em; }
h2 { font-size: var(--fs-xl);  letter-spacing: -0.03em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent-hi); text-decoration-color: currentColor; }

strong { font-weight: 600; color: var(--text); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-12) 0;
}

::selection { background: var(--accent-dim); color: var(--text); }

/* Focus unico e visibile su tutto il sito. */
:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }


/* =========================================================================
   5. LAYOUT
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.section { padding-block: var(--section-y); }

/* Variante su fondo leggermente piu' chiaro, delimitata da hairline. */
.section--raised {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-12);
}

/* Label di sezione in monospace minuscolo: registro da documentazione
   tecnica, non da eyebrow maiuscolo. */
.section__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section__label::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--border-loud);
  flex: none;
}

.section__lede {
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: var(--measure);
}

.stack > * + * { margin-top: var(--sp-4); }

/* Gli elementi di griglia e flex partono da min-width:auto, quindi una
   traccia non puo' restringersi sotto la larghezza intrinseca di cio' che
   contiene. Con dentro <select> e <input> — che quella larghezza se la
   portano dietro dalle option e dall'attributo size — significa una pagina
   piu' larga dello schermo. Azzerarla e' la condizione perche' il layout
   possa davvero scendere a 375px. */
.cta > *,
.band > *,
.about > *,
.contact-grid > *,
.service > *,
.step > *,
.problem > *,
.matrix__cell,
.form,
.form__row,
.field { min-width: 0; }


/* =========================================================================
   6. COMPONENTI
   ========================================================================= */

/* --- Skip link ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); color: var(--on-accent); }


/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background var(--t-base);
}
/* Il bordo compare solo quando la pagina e' scrollata (classe da main.js). */
.site-header.is-stuck {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand__surname { color: var(--text-muted); font-weight: 400; }

.nav { display: flex; align-items: center; gap: var(--sp-1); }

.nav__link {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); }

/* Selettore lingua: due voci, quella attiva non e' un link. */
.lang-switch {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-switch a, .lang-switch span {
  padding: 5px var(--sp-2);
  text-decoration: none;
  line-height: 1.4;
}
.lang-switch a { color: var(--text-muted); transition: color var(--t-fast), background var(--t-fast); }
.lang-switch a:hover { color: var(--text); background: var(--surface-2); }
.lang-switch [aria-current="true"] { color: var(--text); background: var(--surface-2); }


/* --- Menu mobile -------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: calc(var(--sp-3) * -1);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.nav-toggle:hover { background: var(--surface-2); }

.nav-toggle__bars { display: block; width: 20px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base), top var(--t-base);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--bg);
  padding: var(--sp-8) var(--sp-6) var(--sp-12);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.mobile-menu__link {
  display: block;
  padding: var(--sp-4) 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__link[aria-current="page"] { color: var(--accent); }

.mobile-menu__foot {
  margin-top: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

body.is-locked { overflow: hidden; }


/* --- Bottoni ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast), background var(--t-fast),
              border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
}
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-accent); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-hi);
}
.btn--ghost:hover { color: var(--text); border-color: var(--border-loud); background: var(--surface-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }


/* --- Badge disponibilita' ----------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
  flex: none;
}


/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(64px, 11vw, 148px) clamp(64px, 9vw, 112px);
  overflow: hidden;
}

/* Unico gradiente del sito: radiale, appena percettibile, dietro il titolo. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center,
              rgba(76, 154, 255, .11) 0%,
              rgba(76, 154, 255, .04) 38%,
              transparent 68%);
  pointer-events: none;
}

.hero > .container { position: relative; }

/* Larghezza tarata sulla riga piu' lunga dell'headline: le tre affermazioni
   devono stare ognuna su una riga sola finche' lo schermo lo consente. */
.hero__title { max-width: min(100%, 1040px); margin-top: var(--sp-8); }

/* Le tre affermazioni dell'headline vanno a capo su desktop: il ritmo
   ternario e' il senso della frase, non un vezzo tipografico. */
.hero__title span { display: block; }
.hero__title span:nth-child(2),
.hero__title span:nth-child(3) { color: var(--text-muted); }

.hero__lede {
  margin-top: var(--sp-8);
  max-width: 50ch;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.hero__actions { margin-top: var(--sp-10); }

/* Il solo ammiccamento tecnico del sito. */
.hero__terminal {
  margin-top: var(--sp-16);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  user-select: none;
}
.hero__terminal .prompt { color: var(--border-loud); margin-right: var(--sp-2); }
.hero__cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__cursor { animation: none; opacity: .6; }
}


/* --- Elenco dei problemi ------------------------------------------------ */
/* Voci del cliente: righe separate da hairline, non card.                  */

.problems { border-top: 1px solid var(--border); }

.problem {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--border);
}

.problem__quote {
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: 34ch;
  color: var(--text);
}

.problem__answer {
  font-size: var(--fs-base);
  color: var(--text-muted);
  max-width: 46ch;
  padding-top: var(--sp-1);
}


/* --- Matrice aree di intervento ----------------------------------------- */
/* Griglia a bordi condivisi: un blocco unico, non sei schede che fluttuano. */

.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--border);
  gap: 1px;
}

.matrix__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  min-height: 180px;
  transition: background var(--t-base);
}
.matrix__cell:hover { background: var(--surface-3); color: inherit; }
.matrix__cell:hover .matrix__title { color: var(--accent); }

.matrix__icon { color: var(--text-muted); transition: color var(--t-base); }
.matrix__cell:hover .matrix__icon { color: var(--accent); }

.matrix__title {
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--t-base);
}

.matrix__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}


/* --- Metodo (sequenza numerata) ----------------------------------------- */

.steps { display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 72px 1fr 200px;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--border); }

.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding-top: 6px;
}

.step__title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.step__text { color: var(--text-muted); max-width: 52ch; }

.step__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.7;
  padding-top: 4px;
}
.step__meta dt { color: var(--text-dim); }
.step__meta dd { margin: 0 0 var(--sp-3); }


/* --- Perche' io --------------------------------------------------------- */

.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-10) var(--sp-16);
}

.reason { border-top: 1px solid var(--border-hi); padding-top: var(--sp-5); }
.reason h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.reason p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }


/* --- Banda progetto ----------------------------------------------------- */

.band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.band__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.band h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.band p { color: var(--text-muted); font-size: var(--fs-sm); }
.band__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.band__fact { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-4); }
.band__fact dt { color: var(--text-dim); }
.band__fact dd { margin: 0; color: var(--text); }


/* --- CTA finale --------------------------------------------------------- */

.cta {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.cta__title { max-width: 14ch; }
.cta__text { margin-top: var(--sp-5); color: var(--text-muted); max-width: 44ch; }

.contact-lines { display: flex; flex-direction: column; gap: 0; }
.contact-line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-base);
}
.contact-line:last-child { border-bottom: 1px solid var(--border); }
.contact-line dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
/* info@alessandromontibelli.com e' una stringa lunga e senza spazi: senza
   questo, su schermo stretto allarga la colonna e con lei tutta la pagina. */
.contact-line dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contact-line a { text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }


/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-16) var(--sp-10);
  margin-top: var(--section-y);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
}
.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
  margin-bottom: var(--sp-5);
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a { color: var(--text-muted); text-decoration: none; }
.footer__col a:hover { color: var(--text); }

.footer__blurb { max-width: 38ch; margin-top: var(--sp-4); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.footer__bottom a { color: var(--text-dim); text-decoration: none; }
.footer__bottom a:hover { color: var(--text-muted); }


/* --- Icone -------------------------------------------------------------- */

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}
.icon--sm { width: 18px; height: 18px; }


/* --- Form --------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-5); }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.field .req { color: var(--accent); }

.field .hint { font-size: var(--fs-xs); color: var(--text-dim); }

.input, .select, .textarea {
  width: 100%;
  min-width: 0;   /* vedi la nota sui min-width nella sezione layout */
  min-height: 46px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-loud); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238695AC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}
.select option { background: var(--surface-2); color: var(--text); }

/* Stato di errore: bordo piu' messaggio, mai solo colore. */
.field .error {
  display: none;
  font-size: var(--fs-sm);
  color: var(--danger);
}
.field.has-error .error { display: block; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); }

.form__status {
  font-size: var(--fs-sm);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hi);
  background: var(--surface);
}
.form__status:empty { display: none; }
.form__status.is-ok { border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.form__status.is-error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.form__consent { font-size: var(--fs-sm); color: var(--text-muted); }


/* --- Testo lungo (privacy, chi sono) ------------------------------------ */

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-lg); margin-top: var(--sp-12); margin-bottom: var(--sp-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-base); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose p { color: var(--text-muted); margin-bottom: var(--sp-4); }
.prose ul, .prose ol { color: var(--text-muted); margin: 0 0 var(--sp-4) var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--text-dim); }


/* --- Cookie banner ------------------------------------------------------ */

.cookie-bar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 150;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.cookie-bar[hidden] { display: none !important; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.cookie-bar .btn { min-height: 40px; padding: var(--sp-2) var(--sp-5); }


/* =========================================================================
   7. PAGINE
   ========================================================================= */

/* --- Intestazione di pagina interna ------------------------------------- */

.page-head {
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--border);
}
.page-head h1 { max-width: 18ch; }
.page-head__lede {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: var(--measure);
}


/* --- Servizi ------------------------------------------------------------ */

.family { padding-block: var(--section-y); border-bottom: 1px solid var(--border); }
.family:last-of-type { border-bottom: 0; }

.family__head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
  align-items: start;
}
.family__head h2 { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
.family__intro { color: var(--text-muted); max-width: var(--measure); }

.service {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-12);
  padding-block: var(--sp-10);
  border-top: 1px solid var(--border);
}

.service__aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.service__aside .icon { color: var(--accent); }
.service__aside h3 { font-size: var(--fs-lg); }

.service__for {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.7;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.service__problem {
  font-size: var(--fs-md);
  color: var(--text);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}

.service__list { list-style: none; display: grid; gap: var(--sp-3); max-width: 56ch; }
.service__list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 1px;
  background: var(--border-loud);
}

/* Sezione "quando non sono la persona giusta" */
.honest {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-12);
}
.honest__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); margin-top: var(--sp-10); }
.honest__item h3 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.honest__item p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }


/* --- Chi sono ----------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.portrait {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
}
.portrait__frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait__placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-align: center;
  padding: var(--sp-6);
}
.portrait__caption {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.7;
}

.principles { display: grid; gap: 0; margin-top: var(--sp-8); }
.principle {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
}
.principle:last-child { border-bottom: 1px solid var(--border); }
.principle h3 { font-size: var(--fs-base); }
.principle p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* Elenco tecnologie */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}


/* --- Progetti ----------------------------------------------------------- */

.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }

.project {
  display: flex;
  flex-direction: column;
  padding: var(--sp-10);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-base), transform var(--t-base);
}
.project:hover { border-color: var(--border-hi); transform: translateY(-2px); }

.project__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}
.project h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.project p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.project__links { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: auto; padding-top: var(--sp-6); font-size: var(--fs-sm); }

.project--wide { grid-column: 1 / -1; }

.transparency {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-block: var(--sp-8);
}
.transparency__item {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.transparency__item h3 {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: var(--sp-3);
}
.transparency__item p { font-size: var(--fs-sm); margin: 0; }


/* --- Contatti ----------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.contact-aside { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
.contact-aside h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-6); }


/* --- 404 ---------------------------------------------------------------- */

.error-page {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-24);
}
.error-page .code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: var(--sp-5);
}


/* =========================================================================
   8. UTILITY
   ========================================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }

/* Ingresso delle sezioni. Senza JS resta tutto visibile: la classe
   .js-reveal viene aggiunta solo se lo script e' attivo. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}


/* =========================================================================
   9. MEDIA QUERY
   Progettato a 375px e allargato da li'.
   ========================================================================= */

@media (max-width: 1024px) {
  .cta, .band, .about, .contact-grid { grid-template-columns: 1fr; gap: var(--sp-12); }
  .portrait, .contact-aside, .family__head h2 { position: static; }
  .family__head, .service { grid-template-columns: 1fr; gap: var(--sp-6); }
  .service__aside { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
  .service__for { border-top: 0; padding-top: 0; flex-basis: 100%; }
  .matrix { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .honest__list { grid-template-columns: 1fr; gap: var(--sp-8); }
  .about { gap: var(--sp-10); }
  .portrait { max-width: 300px; }
}

@media (max-width: 860px) {
  /* Nell'header restano solo il nome e il tasto del menu: la CTA e il
     selettore lingua vivono dentro il pannello mobile, e lasciarli qui
     spingerebbe la riga oltre la larghezza dello schermo. */
  .nav,
  .header__actions .lang-switch,
  .header__actions > .btn { display: none; }
  .nav-toggle { display: inline-flex; margin-right: calc(var(--sp-2) * -1); }
  .step { grid-template-columns: 48px 1fr; }
  .step__meta { grid-column: 2; padding-top: var(--sp-4); }
  .projects { grid-template-columns: 1fr; }
  .problem { grid-template-columns: 1fr; gap: var(--sp-4); }
  .problem__answer { max-width: none; }
  .principle { grid-template-columns: 1fr; gap: var(--sp-2); }
}

@media (max-width: 640px) {
  :root { --section-y: 64px; }
  .container { padding-inline: var(--sp-5); }
  .matrix { grid-template-columns: 1fr; }
  .matrix__cell { min-height: 0; padding: var(--sp-6); }
  .reasons { grid-template-columns: 1fr; gap: var(--sp-8); }
  .form__row { grid-template-columns: 1fr; }
  .transparency { grid-template-columns: 1fr; }
  .band, .honest { padding: var(--sp-8) var(--sp-6); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__title { max-width: none; }

  /* Etichetta sopra il dato: a questa larghezza una colonna fissa da 92px
     toglie spazio proprio alle righe piu' lunghe (email e indirizzo). */
  .contact-line { grid-template-columns: 1fr; gap: var(--sp-1); }
  .band__fact { grid-template-columns: 1fr; gap: var(--sp-1); }

  /* A tutta larghezza solo i bottoni in colonna: la regola deve restare
     dentro .btn-row, altrimenti colpisce anche la CTA dell'header e i
     tasti del banner cookie. */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }

  .cookie-bar { padding: var(--sp-5); }
  .cookie-bar__actions { flex-direction: column; }
  .cookie-bar__actions .btn { width: 100%; }

  /* La riga da terminale non deve mai allargare la pagina. */
  .hero__terminal { font-size: var(--fs-xs); overflow-wrap: anywhere; }
}