/* =========================================================
   Tecnica ZERO — Design System
   Palette: fondali blu (#132496) / carta / accento rosso (#C41010)
   ========================================================= */

/* ---------- Font self-hosted (niente richieste a Google) ----------
   Variabili: un solo file copre i pesi 400-700.
   I percorsi sono relativi a questo foglio di stile, quindi validi da ogni pagina. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-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;
}
/* Solo per il logotipo: peso 700, sottoinsieme latino (la stringa e' "Tecnica ZERO" + ™) */
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-condensed-700-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: "Commissioner";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/commissioner-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: "Commissioner";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/commissioner-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;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #12141C;
  --ink-2:      #1E2130;
  --ink-soft:   #4D5265;
  --ink-mute:   #868CA0;

  --paper:      #FBFBFD;
  --paper-2:    #F1F2F8;
  --paper-3:    #E4E6F1;

  /* fondali scuri */
  --surface:    #132496;
  --surface-2:  #0E1B73;
  /* Grigio del footer: freddo come il resto dei neutri, chiude la pagina senza
     ripetere il blu di testata e banda webinar. */
  --footer:     #23262F;

  /* verde della card in evidenza: freddo, per stare col blu senza scaldare la pagina */
  --green:      #13B810;   /* accenti vivi: occhiello sul blu (4,6:1), bordi in hover */
  --green-deep: #0C7A0A;   /* testo e segni su fondo chiaro: 5,0:1 sulla tinta */
  --green-tint: #E9F8E8;

  /* accento: rosso (bottoni e dettagli) */
  --brand:       #C41010;
  --brand-hi:    #E11B1B;
  --brand-deep:  #8A0B0B;
  --brand-tint:  #FBEDEC;
  --brand-soft:  #FF9E9E;   /* rosso chiaro per testo piccolo su blu: 6,2:1 */
  --brand-vivid: #FF3B3B;   /* rosso pieno, solo per il titolo dell'hero: 3,5:1, sopra
                               la soglia 3:1 del testo grande (qui 34-72px in neretto) */

  --line:       rgba(18, 20, 28, .12);
  --line-soft:  rgba(18, 20, 28, .07);
  --line-dark:  rgba(255, 255, 255, .14);

  --font-display: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 800px;

  --r-btn: 10px;   /* bottoni: rettangolari con angolo arrotondato */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(18,20,28,.05), 0 4px 14px rgba(18,20,28,.05);
  --shadow-md: 0 2px 6px rgba(18,20,28,.06), 0 18px 44px rgba(18,20,28,.09);
  --shadow-lg: 0 4px 10px rgba(18,20,28,.07), 0 34px 80px rgba(18,20,28,.14);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 92px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.16; letter-spacing: -.012em; }
/* Titoli di sezione in blu: vale per l'elemento h2, non per la classe .h2, perche'
   alcuni titoli (la banda newsletter, per esempio) non la portano. Gli h3 restano
   in nero: sono i titoli delle card, e se diventassero blu anche loro la pagina
   perderebbe la gerarchia fra sezione e scheda. */
h2 { color: var(--surface); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .5em; }
strong, b { font-weight: 650; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--surface); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 44px, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 640px) { .wrap, .wrap-narrow { width: calc(100% - 34px); } }

.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--surface); color: #EDEFFA; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
/* fondali scuri fuori da .section--ink: banda webinar, moduli sull'hero blu */
.cta-band h2, .hero h2, .form-card--dark h2, .form-card--dark h3 { color: #fff; }

.hr-fine { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Typography scale ---------- */
.display   {
  font-size: clamp(2.1rem, 5.4vw, 4.5rem);
  line-height: 1.02;              /* righe impilate: serrate, non spaziate */
  letter-spacing: -.022em;
  text-wrap: balance;             /* se una riga deve andare a capo, la bilancia */
}
.h1        { font-size: clamp(1.95rem, 4.4vw, 3.4rem); letter-spacing: -.018em; }
.h2        { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.015em; }
/* variante blu del titolo di sezione */
.h3        { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.h4        { font-size: clamp(1.12rem, 1.6vw, 1.32rem); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.eyebrow--center { justify-content: center; }
/* #13B810 sul blu misura 4,6:1: sopra la soglia AA per il testo normale. */
.section--ink .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow { color: var(--green); }

.lead { font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.6; color: var(--ink-soft); }
.section--ink .lead,
.cta-band .lead { color: rgba(255,255,255,.82); }
/* la banda non e' .section--ink: senza questa riga il lead restava #4D5265 sul blu,
   cioe' 1,58:1 di contrasto. Ora 8,56:1. */
.cta-band .lead { margin-top: 20px; }
.center { text-align: center; }
.measure { max-width: 68ch; }
.measure-tight { max-width: 56ch; }
.center.measure, .center .measure { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .2s, color .2s, border-color .2s;
  box-shadow: 0 2px 6px rgba(196,16,16,.18), 0 12px 28px rgba(196,16,16,.16);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(196,16,16,.2), 0 20px 42px rgba(196,16,16,.24); background: var(--brand-hi); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .28s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line); box-shadow: none;
}
.btn--ghost:hover { background: var(--surface); color: #fff; border-color: var(--surface); box-shadow: var(--shadow-md); }
.section--ink .btn--ghost, .btn--ghost-light { background: transparent; color: #fff; border-color: var(--line-dark); box-shadow: none; }
.section--ink .btn--ghost:hover, .btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Premuto: verde, per ogni variante. La regola sta dopo quelle di hover perche'
   .btn--ghost:hover ha la stessa specificita' e vincerebbe per ordine.
   Verde scuro e non acceso: il bianco sul verde acceso starebbe a 2,66:1, qui 5,5:1. */
.btn:active,
.btn--ghost:active,
.btn--ghost-light:active,
.section--ink .btn--ghost:active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
  box-shadow: 0 2px 6px rgba(12,122,10,.26), 0 8px 20px rgba(12,122,10,.22);
}
.btn--sm { padding: 11px 20px; font-size: .87rem; border-radius: var(--r-sm); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--brand); border-bottom: 1px solid rgba(196,16,16,.3);
  padding-bottom: 2px; transition: gap .25s var(--ease), border-color .25s;
}
.link-arrow:hover { gap: 13px; border-color: var(--brand); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height .3s var(--ease), background .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* allo scroll diventa blu pieno */
.site-header.is-stuck {
  height: 84px;
  background: var(--surface);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 40px rgba(9,16,66,.35);
}
/* col menu mobile aperto il fondo serve comunque */
body.nav-open .site-header { background: var(--surface); }

/* niente padding sul body: gli hero passano sotto l'header trasparente */
#main { scroll-margin-top: var(--header-h); }

.header-inner {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 36px);
  width: 100%; padding-inline: clamp(17px, 2.6vw, 56px);
}
/* Logotipo: la parola e' testo vero in Fira Sans Condensed (nitido a ogni densita',
   selezionabile, nessuna immagine da servire), il marchio e' l'SVG sovrapposto alla O finale. */
/* z-index 0 su .brand crea il contesto di impilamento: il gomitolo rosso puo' cosi'
   stare dietro a tutte le lettere bianche senza finire dietro allo sfondo di header
   o footer, che sono elementi diversi. */
.brand { flex: none; display: flex; align-items: center; text-decoration: none; position: relative; z-index: 0; }
.brand-word {
  display: inline-flex; align-items: baseline;
  font-family: "Fira Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.005em;
  color: #fff;
  white-space: nowrap;
  /* stesso allineamento ottico delle voci di menu: le maiuscole di Fira Sans
     Condensed cadono 2,5px sopra il centro della barra (.081em di corpo). */
  position: relative; top: .081em;
  transition: font-size .3s var(--ease);
}
.site-header.is-stuck .brand-word { font-size: 28px; }
.brand-o { position: relative; display: inline-block; }
/* Proporzioni misurate sul logo originale: diametro = 1,93 volte l'altezza delle
   maiuscole, centro quasi sulla O (+0,085 cap a destra), verticale sul centro delle
   maiuscole. z-index -1: il rosso passa dietro al bianco. */
.brand-mark {
  position: absolute; left: 60%; top: 45%; z-index: -1;
  width: 1.37em; height: 1.37em; max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Il ™ sta in alto a destra del cerchio, in rosso come nell'originale. Gli scostamenti
   sono in em del logotipo, non del proprio corpo, cosi' resta agganciato al marchio. */
.brand-tm { position: absolute; left: 100%; top: -.06em; margin-left: .46em; }

/* Inglese: "ZERO Technique". Il gomitolo esce dalla O di circa mezzo quadratone e
   in italiano quello spazio e' vuoto, qui invece c'e' subito "Technique": senza il
   margine il disegno finirebbe addosso alla T. Il simbolo di marchio passa in fondo
   al nome, dove va: e' agganciato a .brand-word, che e' gia' posizionata. */
.brand-word--en .brand-o { margin-right: .42em; }
.brand-word--en .brand-tm { left: 100%; margin-left: .05em; }
.brand-tm i { font-style: normal; font-size: .17em; color: var(--brand); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a, .nav .nav-toggle-link {
  display: inline-flex; align-items: center; gap: 7px;
  /* padding asimmetrico: sposta le lettere senza muovere la pillola dell'hover,
     che resta centrata nella barra. .277em = i 3,9px misurati, in scala col corpo. */
  padding: calc(10px + .277em) clamp(8px, .85vw, 15px) calc(10px - .277em);
  border-radius: var(--r-sm);
  font-size: clamp(.88rem, .70rem + .32vw, 1.06rem);
  font-weight: 500; color: #fff;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav a:hover, .nav .has-sub:hover > .nav-toggle-link { color: #fff; background: rgba(255,255,255,.14); }
.nav a.is-active { color: #fff; }
.nav > ul > li > a.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--brand-hi); border-radius: 2px;
}
.nav > li { position: relative; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: clamp(0px, .4vw, 8px); }
.nav > ul > li { position: relative; }

.has-sub > .nav-toggle-link { cursor: pointer; background: none; border: 0; }
.caret { width: 9px; height: 9px; opacity: .7; transition: transform .25s var(--ease); }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }

.subnav {
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translate(-50%, 8px);
  /* 214px invece di 248: le tre voci sono corte e il pannello sembrava un rettangolo
     vuoto attorno al testo. */
  min-width: 222px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(4, 8, 40, .5), inset 0 1px 0 rgba(255,255,255,.09);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* Ponte invisibile fra bottone e pannello: senza, il menu si chiude passandoci sopra.
   Sta sulla voce di menu, non sul pannello, perche' li' servono tutti e due gli
   pseudo-elementi per disegnare il becco. */
.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
/* Becco verso il bottone, in due triangoli sovrapposti: quello dietro fa il filo
   chiaro, quello davanti riempie e copre il bordo del pannello. Un quadrato ruotato
   lasciava passare la riga del bordo sotto la punta, e si leggeva come un rombo. */
.subnav::before, .subnav::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0; margin-left: -8px;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.subnav::before { top: -8px; border-bottom: 8px solid rgba(255,255,255,.20); }
.subnav::after { top: -7px; border-bottom: 8px solid var(--surface-2); }
.has-sub:hover .subnav, .has-sub:focus-within .subnav {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.subnav a {
  position: relative; display: block;
  padding: 10px 14px; border-radius: 9px;
  font-size: .93rem; font-weight: 500; color: rgba(255,255,255,.84);
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
/* piu' specifico di .nav a:hover, che qui dipingeva un blocco chiaro da bordo a bordo */
/* .nav ul azzera il padding di tutte le liste del menu e, avendo piu' peso di
   .subnav, azzerava anche quello del pannello: le voci finivano attaccate alla
   cornice. Dichiarato qui con la stessa forza, il respiro resta. */
.nav .subnav { padding: 11px; }
/* le voci ereditavano il margine di base delle liste: 6px in piu' fra una e l'altra
   e sotto l'ultima, che sballavano il respiro rispetto al bordo superiore */
.subnav li { margin: 0; }
.subnav li + li { margin-top: 3px; }
.nav .subnav a:hover {
  background: rgba(255,255,255,.10); color: #fff; padding-left: 18px;
}
/* voce corrente: un punto verde a destra, non la barretta rossa del primo livello */
.nav .subnav a.is-active { color: #fff; background: rgba(255,255,255,.06); }
.nav .subnav a.is-active::after {
  content: ""; position: absolute; right: 13px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

.nav-cta { margin-left: clamp(4px, .8vw, 14px); }
.nav-cta .btn {
  /* stessa correzione ottica: la scritta del bottone cadeva 0,8px sopra il centro */
  padding: calc(13px + .057em) clamp(18px, 1.6vw, 28px) calc(13px - .057em);
  font-size: clamp(.88rem, .72rem + .28vw, 1rem);
}

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-btn);
  background: transparent; cursor: pointer; position: relative;
}
.burger span { position: absolute; left: 13px; width: 18px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Con una voce in meno la barra sta in molta meno larghezza: l'hamburger scatta
   a 1080px invece che a 1260, cosi' i portatili da 1152 e 1280 vedono il menu esteso. */
@media (max-width: 1079px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--surface); color: #fff;
  padding: 26px 0 60px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; font-size: 1.06rem; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.85);
}
.drawer a.is-active { color: #fff; }
.drawer a.is-active::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-hi); flex: none; }
.drawer .btn { margin-top: 26px; }
body.nav-open { overflow: hidden; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  background: var(--surface); color: #fff;
  padding: calc(var(--header-h) + clamp(56px, 8vw, 104px)) 0 clamp(76px, 10vw, 128px);
  isolation: isolate;
}
/* Alone: il riquadro coincide con l'hero e i due gradienti si spengono del tutto
   prima del bordo inferiore (il primo entro il 58%, il secondo entro l'87%).
   Prima il riquadro finiva al 90% dell'altezza con il gradiente ancora opaco:
   il taglio si vedeva come una fascia orizzontale piu' scura. */
.hero::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background:
    radial-gradient(72% 58% at 78% 16%, rgba(104,132,255,.44) 0%, rgba(104,132,255,0) 72%),
    radial-gradient(58% 44% at 10% 58%, rgba(104,132,255,.20) 0%, rgba(104,132,255,0) 66%);
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .68fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-visual { margin-inline: auto; }
  .hero .lead { max-width: none; }
}


.hero h1 { color: #fff; }
.hero h1 .nowrap-line { display: block; }
/* la riga d'accento non si spezza mai a meta' */
.hero h1 em { white-space: nowrap; }
/* Sotto i 500px la seconda riga non ci sta: invece di lasciarla spezzare dove capita
   ("non nasce / solo nel muscolo"), il taglio viene imposto prima dell'accento. */
@media (max-width: 500px) {
  .hero h1 .brk { display: block; }
}
.hero h1 em { font-style: normal; color: var(--brand-vivid); }
.hero .lead { color: rgba(255,255,255,.8); max-width: 40ch; margin-top: 30px; text-wrap: pretty; }
.hero .lead strong { color: #fff; font-weight: 600; }
/* Il sottotitolo e' costruito su tre battute: una riga ciascuna, come il tocco che
   descrive. Se una battuta non ci sta in larghezza va a capo per conto suo. */
.lead--beats { max-width: none; }
.lead--beats span, .lead--beats strong { display: block; text-wrap: balance; }
.lead--beats strong { margin-top: .12em; }
.hero .btn-row { margin-top: 40px; }

.hero-meta { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.13); display: flex; flex-wrap: wrap; gap: 30px 48px; }
.hero-meta div { min-width: 110px; }
.hero-meta .k { font-family: var(--font-display); font-size: 1.9rem; color: #fff; line-height: 1; }
.hero-meta .v { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 8px; }

/* Campo di punti deformato da un'onda (canvas 2D, vedi assets/js/main.js).
   Il campo copre tutta l'area blu: nessuna velatura laterale, solo una striscia in alto
   che tiene staccato il menu. La leggibilita' del testo e' affidata all'ombra morbida. */
.hero-wave {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
}
/* il contenuto sta sempre sopra glow, canvas e velatura */
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 2; }
/* Il titolo sta su due righe: la seconda, "non nasce solo nel muscolo", misura 842px
   alla dimensione massima (72px). Qui ne ha 900, con ~60px di margine.
   Il sottotitolo resta stretto per conto suo (max-width: 40ch), quindi la misura larga
   la usa solo il titolo. */
.hero--wave .hero-inner { max-width: min(100%, 900px); }
.hero--wave { min-height: min(84vh, 720px); display: flex; align-items: center; }
.hero--wave::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(19,36,150,.78) 0%, rgba(19,36,150,.3) 8%, rgba(19,36,150,0) 19%);
}
.hero--wave h1,
.hero--wave .eyebrow { text-shadow: 0 2px 22px rgba(7,14,58,.5); }
.hero--wave .lead { color: rgba(255,255,255,.88); text-shadow: 0 1px 14px rgba(7,14,58,.65); }
@media (max-width: 940px) {
  .hero--wave { min-height: auto; }
}

/* Page hero (interior pages) */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--surface); color: #fff;
  padding: calc(var(--header-h) + clamp(38px, 4.5vw, 62px)) 0 clamp(58px, 7vw, 92px);
}
.page-hero::before {
  content: ""; position: absolute; inset: -50% -20% auto -20%; height: 160%;
  background: radial-gradient(50% 46% at 74% 22%, rgba(104,132,255,.46) 0%, rgba(104,132,255,0) 62%);
}
.page-hero > * { position: relative; }
.page-hero h1 { color: #fff; }
.page-hero .lead { max-width: 62ch; margin-top: 22px; color: rgba(255,255,255,.78); }
.breadcrumb { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.58); margin-bottom: 20px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 8px; opacity: .5; }

/* --- Telefono: gli hero di atterraggio e la banda webinar vanno al centro ---
   Su colonna stretta il testo centrato compone meglio, e i bottoni smettono di
   galleggiare a sinistra sotto un blocco che occupa tutta la larghezza.
   Il modulo resta allineato a sinistra: etichette e campi centrati sarebbero
   solo piu' difficili da compilare. */
@media (max-width: 640px) {
  .hero > .wrap,
  .cta-band > .wrap { text-align: center; }

  /* L'occhiello va al centro senza il trattino: centrato, il trattino resterebbe
     spaiato a sinistra. Senza, "PRESENTAZIONE LIVE GRATUITA" sta su una riga sola. */
  .hero .eyebrow,
  .cta-band .eyebrow { justify-content: center; font-size: .82rem; letter-spacing: .15em; }
  .hero .eyebrow::before,
  .cta-band .eyebrow::before { display: none; }

  .hero .lead,
  .cta-band .lead { margin-inline: auto; }

  .hero .btn-row,
  .cta-band .btn-row { justify-content: center; }

  .hero .form-card { text-align: left; }
  .hero .form-card .consent { text-align: left; }
}

/* =========================================================
   Content blocks
   ========================================================= */
.statement { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
@media (max-width: 880px) { .statement { grid-template-columns: 1fr; gap: 26px; } }
.statement h2 { position: sticky; top: calc(var(--header-h) + 30px); }
@media (max-width: 880px) { .statement h2 { position: static; } }
/* Due misure sole in tutto il blocco, stabili a ogni larghezza: 17px per i paragrafi
   (gli stessi del resto del sito) e 18,4px per la card conclusiva. Prima ce n'erano tre
   (20,5 / 17 / 19,2px) e la frase piu' importante del ragionamento era la piu' piccola. */
.statement .body p {
  /* nessuna misura propria: i paragrafi restano ai 17px del corpo del sito, uguali a
     quelli di ogni altra sezione. Il clamp precedente non arrivava mai al massimo
     sotto i 1600px, quindi aggiungeva una regola senza cambiare nulla. */
  line-height: 1.66;
  color: var(--ink-soft);
  margin-bottom: 1.15em;
}
.statement .body p strong { color: var(--ink); }
.statement .body p:last-child { margin-bottom: 0; }
.statement .body .accent {
  margin-top: 32px; padding: 24px 28px;
  background: var(--green-tint); border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}
.statement .body .accent p { margin: 0; color: inherit; font-size: inherit; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 34px 30px 32px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(19,184,16,.45); }
/* Il numero e' un riferimento, non un titolo: Commissioner nel peso leggero e appena
   accennato sul bianco. Si scurisce un poco al passaggio del mouse, senza mai competere
   con il titolo del passo. */
.step .num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 3.1rem; line-height: 1;
  color: rgba(18, 20, 28, .10);
  transition: color .3s;
}
.step:hover .num { color: rgba(19, 184, 16, .26); }
.step .tag {
  display: inline-block; margin: 16px 0 12px; padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--green-tint); color: var(--green-deep);
  font-size: .705rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--ink-soft); margin: 0; font-size: .975rem; }

.result-line {
  margin-top: 30px; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem); color: var(--ink);
  padding: 26px 28px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: #fff;
}
.result-line b { color: var(--brand); font-weight: 600; }

/* Two-up cards */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(28px, 3.2vw, 40px); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  /* Badge pieno in verde scuro: il glifo bianco sul verde acceso starebbe a 2,66:1,
     sotto la soglia 3:1 dei segni grafici. Sullo scuro sale a 5,5:1. */
  background: var(--green-deep); color: #fff; margin-bottom: 22px;
}
.card .icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 14px; }
.card > p { color: var(--ink-soft); }
.section--paper2 .card { background: #fff; }

/* Check list */
.checklist { list-style: none; padding: 0; margin: 20px 0 0; }
.checklist li { position: relative; padding-left: 33px; margin-bottom: 13px; color: var(--ink-soft); }
/* Spunte: quadrato con angolo arrotondato, verde. La regola e' unica, quindi vale
   ovunque compaia un .checklist (home, pagine corso, cicatrici, card prezzo). */
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .44em;
  width: 17px; height: 17px; border-radius: 5px;
  background: var(--green-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C7A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
}
.section--ink .checklist li { color: rgba(255,255,255,.78); }

/* Feature list (long content pages) */
.feature-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
.feature-list > li {
  position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 24px 28px 24px 74px; margin: 0; box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.feature-list > li:hover { transform: translateX(4px); border-color: rgba(19,184,16,.42); box-shadow: var(--shadow-md); }
.feature-list > li::before {
  counter-increment: fl; content: counter(fl, decimal-leading-zero);
  position: absolute; left: 24px; top: 23px;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-deep);
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.feature-list { counter-reset: fl; }
.feature-list b, .feature-list strong { color: var(--ink); font-weight: 650; display: inline; }
.feature-list ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.feature-list ul li { position: relative; padding-left: 20px; font-size: .96rem; }
.feature-list ul li::before {
  content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 1px; background: var(--brand); opacity: .7;
}

/* Plain bullet list styling inside prose */
.prose { max-width: 74ch; }
.prose h2 { margin: 52px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose h3, .prose h4 { margin: 34px 0 14px; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose ul { list-style: none; padding: 0; }
.prose ul:not(.checklist):not(.feature-list) > li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.prose ul:not(.checklist):not(.feature-list) > li::before {
  content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand); opacity: .55;
}
.prose .note {
  margin: 34px 0; padding: 24px 28px; background: var(--paper-2);
  border-radius: var(--r-md); border: 1px solid var(--line-soft); font-size: .95rem;
}
.prose .note p:last-child { margin-bottom: 0; }

.pull-quote {
  margin: 46px 0; padding: 34px 36px;
  background: var(--surface); color: #fff; border-radius: var(--r-lg);
  font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45;
  position: relative; overflow: hidden;
}
.pull-quote::before {
  content: ""; position: absolute; inset: auto -10% -60% 40%; height: 160%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(104,132,255,.55), transparent 70%);
}
.pull-quote p { position: relative; margin: 0; color: #fff; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band { position: relative; overflow: hidden; background: var(--surface); color: #fff; }
.cta-band::before {
  content: ""; position: absolute; inset: -60% -20% auto 30%; height: 200%;
  background: radial-gradient(44% 40% at 50% 50%, rgba(104,132,255,.46), transparent 66%);
}
.cta-band .wrap { position: relative; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; } }
/* Data e bottone incolonnati e centrati fra loro, a ogni larghezza: il bottone e' piu'
   stretto della card, allineati a sinistra sembravano due blocchi scollegati. */
.cta-side { display: flex; flex-direction: column; align-items: center; }
.cta-side .cta-date { text-align: center; }

/* La data e' l'informazione da non perdere: card piena su fondo blu, non piu' un
   riquadro traslucido che il fondo si mangiava. Il rosso resta al bottone sotto,
   che e' l'azione: qui bianco e inchiostro, cosi' i due pesi non competono. */
.cta-date {
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: 22px 30px; border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 3px 10px rgba(6, 12, 50, .18), 0 20px 46px rgba(6, 12, 50, .30);
}
.cta-date .d {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.16;
  letter-spacing: -.015em; color: var(--ink);
}
.cta-date .t { font-size: .95rem; font-weight: 600; color: var(--brand); }

/* =========================================================
   Pricing
   ========================================================= */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; margin-top: 46px; }
.price-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 32px 32px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price-card--feature { border-color: rgba(196,16,16,.3); box-shadow: 0 24px 60px rgba(196,16,16,.1); }
.price-card .pc-name {
  font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 18px;
}
/* L'importo era gia' in Commissioner ma a peso 400: accanto ai titoli a 700 sembrava
   un altro carattere. Allineato al peso dei titoli. */
.price-card .pc-price { display: flex; align-items: flex-start; gap: 2px; font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1; }
.price-card .pc-price .cur { font-size: 1.5rem; margin-top: .22em; }
.price-card .pc-price .int { font-size: 3.4rem; letter-spacing: -.02em; }
.price-card .pc-price .dec { font-size: 1.2rem; margin-top: .3em; color: var(--ink-mute); }
.price-card .checklist { flex: 1; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.price-card .checklist li { font-size: .95rem; }
.price-card .btn { margin-top: 26px; }

/* =========================================================
   Calendar
   ========================================================= */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.cal-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 32px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cal-card h2, .cal-card h3 { font-size: 1.32rem; margin-bottom: 16px; }
.cal-card p { color: var(--ink-soft); font-size: .98rem; }
.cal-card .btn { margin-top: auto; align-self: flex-start; }
.cal-status {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 7px 14px; border-radius: var(--r-sm); background: var(--green-tint);
  font-size: .82rem; font-weight: 600; color: var(--green-deep); margin-bottom: 18px;
}
.cal-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.date-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.date-list li {
  display: flex; align-items: baseline; gap: 16px; margin: 0;
  padding: 16px 18px; background: var(--green-tint); border-radius: var(--r-md);
  border-left: 3px solid var(--green);
}
.date-list .city { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); flex: none; min-width: 74px; }
.date-list .when { font-size: .93rem; color: var(--ink-soft); }
.date-list .when b { display: block; color: var(--ink); font-weight: 600; }

/* =========================================================
   Operatori
   ========================================================= */
.region { margin-top: 54px; }
.region:first-of-type { margin-top: 0; }
.region-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.region-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); flex: none; }
.region-head::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.op-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.op-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 30px 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.op-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.op-card .op-name { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 4px; }
.op-card .op-role { font-size: .9rem; color: var(--brand); font-weight: 600; margin-bottom: 16px; }
.op-card .op-body { font-size: .93rem; color: var(--ink-soft); margin-bottom: 18px; }
.op-card .op-body p { margin-bottom: .7em; }
.op-meta { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; font-size: .9rem; }
.op-meta li { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--ink-soft); }
.op-meta svg { width: 15px; height: 15px; flex: none; margin-top: .28em; color: var(--brand); }
.op-meta .ml { color: var(--ink-mute); }
.op-meta a { border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.op-meta a:hover { color: var(--brand); border-color: rgba(196,16,16,.4); }

.disclaimer {
  margin-top: 56px; padding: 28px 30px; background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  font-size: .9rem; color: var(--ink-soft);
}
.disclaimer h3 { font-size: 1rem; margin-bottom: 10px; font-family: var(--font-sans); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.disclaimer p:last-child { margin-bottom: 0; }

/* =========================================================
   About
   ========================================================= */
.about-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
/* Chi sono: colonna del ritratto piu' stretta della griglia condivisa con Informazioni,
   dove invece la prima colonna porta testo e va tenuta larga. */
.about-grid--portrait { grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); }
@media (max-width: 880px) { .about-grid--portrait { grid-template-columns: 1fr; } }
.portrait { position: relative; }
.portrait-frame {
  position: sticky; top: calc(var(--header-h) + 34px);
  /* centrato nella sua colonna: la didascalia sotto e' centrata sulla colonna, e con
     il ritratto piu' piccolo i due centri altrimenti non coincidono. */
  border-radius: 50%; overflow: hidden; max-width: 230px; margin-inline: auto;
  background: radial-gradient(circle at 50% 22%, var(--paper-2), var(--paper-3));
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-lg);
}
@media (max-width: 880px) { .portrait-frame { position: static; max-width: 200px; margin-inline: auto; } }
.portrait-frame img { width: 100%; height: auto; }
.portrait-caption { margin-top: 20px; text-align: center; }
.portrait-caption .n { font-family: var(--font-display); font-size: 1.25rem; }
.portrait-caption .r { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-top: 6px; }

/* =========================================================
   Forms
   ========================================================= */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 3.6vw, 44px); box-shadow: var(--shadow-md);
}
.section--ink .form-card, .form-card--dark {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none;
  backdrop-filter: blur(8px);
}
.form-card h3, .form-card h4 { margin-bottom: 8px; }
.form-card .form-note { font-size: .92rem; color: var(--ink-soft); margin-bottom: 24px; }
/* Il modulo Deftform sta in un iframe: da fuori non se ne governa lo stile,
   ma lo stacco dal titolo della card si', ed e' quello che mancava. */
.form-card .deftform { margin-top: 22px; }
/* senza titolo sopra, lo stacco lo fa gia' il bordo della card */
.form-card .deftform:first-child { margin-top: 0; }
.form-card--dark .form-note, .section--ink .form-card .form-note { color: rgba(255,255,255,.66); }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.form-card--dark .field label, .section--ink .field label { color: rgba(255,255,255,.55); }
.field input, .field textarea {
  width: 100%; padding: 14px 17px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .2s, box-shadow .2s, background .2s;
  font-size: .98rem;
}
.form-card--dark .field input, .form-card--dark .field textarea,
.section--ink .field input, .section--ink .field textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff;
}
.form-card--dark .field input::placeholder, .section--ink .field input::placeholder,
.form-card--dark .field textarea::placeholder, .section--ink .field textarea::placeholder { color: rgba(255,255,255,.38); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(196,16,16,.14); background: #fff;
}
.form-card--dark .field input:focus, .section--ink .field input:focus,
.form-card--dark .field textarea:focus, .section--ink .field textarea:focus { background: rgba(255,255,255,.1); }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.consent { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 22px; font-size: .875rem; color: var(--ink-soft); }
.form-card--dark .consent, .section--ink .consent, .site-footer .consent { color: rgba(255,255,255,.66); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: .18em; accent-color: var(--brand); cursor: pointer; }
.consent a { color: var(--brand); border-bottom: 1px solid rgba(196,16,16,.35); }
.form-card--dark .consent a, .section--ink .consent a, .site-footer .consent a { color: var(--brand-soft); border-color: rgba(255,158,158,.45); }

.form-success {
  display: none; text-align: center; padding: 30px 24px;
  background: var(--brand-tint); border-radius: var(--r-lg); border: 1px solid rgba(196,16,16,.18);
}
.form-card--dark .form-success, .section--ink .form-success, .site-footer .form-success {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
}
.form-success.is-visible { display: block; animation: fadeUp .5s var(--ease); }
.form-success .tick {
  /* verde scuro: il bianco sul verde acceso starebbe a 2,66:1, qui 5,5:1 */
  width: 46px; height: 46px; border-radius: 50%; background: var(--green-deep); color: #fff;
  display: grid; place-items: center; margin: 0 auto 16px;
}
.form-success h4 { margin-bottom: 8px; }
.form-success p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.form-card--dark .form-success p, .section--ink .form-success p, .site-footer .form-success p { color: rgba(255,255,255,.72); }
form.is-hidden { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite;
}
.btn { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Contact info tiles */
.contact-tiles { display: grid; gap: 14px; margin-top: 30px; }
.contact-tile {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* icone in verde: sulla tinta chiara serve la variante scura, il verde acceso
   si fermerebbe a 2,4:1 e su un segno di 19px non basta */
.contact-tile .ci { width: 42px; height: 42px; border-radius: 12px; background: var(--green-tint); color: var(--green-deep); display: grid; place-items: center; flex: none; }
.contact-tile .ci svg { width: 19px; height: 19px; }
.contact-tile .cl { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.contact-tile .cv { font-weight: 600; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--footer); color: rgba(255,255,255,.74); padding: clamp(56px, 7vw, 84px) 0 0; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 52px); padding-bottom: 52px; }
@media (max-width: 1000px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand-word { font-size: 30px; }
.footer-brand p { margin-top: 20px; font-size: .92rem; max-width: 30ch; color: rgba(255,255,255,.66); }
.footer-nav .footer-title { font-family: var(--font-sans); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 11px; }
.footer-nav a { font-size: .94rem; color: rgba(255,255,255,.82); transition: color .2s, padding-left .25s var(--ease); }
.footer-nav a:hover { color: #fff; padding-left: 5px; }
/* Newsletter: fascia autonoma fra contenuto e footer, contenuto in una card bianca
   con filo sottile. Card e fascia sono quasi dello stesso bianco, quindi la forma la
   disegna il bordo; l'ombra leggera la stacca appena dal fondo. */
.newsletter { background: var(--paper); }
/* Card su una riga: a sinistra l'invito, a destra il modulo. Sotto gli 860px si
   impilano e vanno al centro, perche' in colonna stretta due blocchi allineati a
   sinistra con larghezze diverse sembrano disallineati. */
.newsletter-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px); align-items: center;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px);
}
@media (max-width: 860px) {
  .newsletter-inner { grid-template-columns: 1fr; text-align: center; }
  .newsletter .consent { justify-content: center; }
}
.newsletter h2 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: 10px; }
.newsletter-text p { color: var(--ink-soft); margin: 0; }
/* Bottone dentro al campo: il campo tiene lo spazio a destra col padding, il bottone
   ci si appoggia sopra in assoluto. Cosi' l'insieme e' una sola barra alta 48px. */
.newsletter .nl-row { position: relative; }
.newsletter .nl-row input {
  width: 100%; padding: 16px 112px 16px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink); font-size: .95rem; line-height: 1.3;
}
.newsletter .nl-row input::placeholder { color: var(--ink-mute); }
.newsletter .nl-row input:focus {
  outline: none; border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(12,122,10,.14);
}
.newsletter .nl-row .btn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  padding: 12px 22px; font-size: .9rem; line-height: 1;
  /* blu e non rosso: la newsletter non e' la chiamata all'azione principale del sito,
     il rosso resta ai bottoni che portano all'iscrizione ai corsi e al webinar */
  background: var(--surface); border-color: var(--surface);
  box-shadow: none;
}
.newsletter .nl-row .btn:hover {
  transform: translateY(-50%); background: #1B33C8; border-color: #1B33C8; box-shadow: none;
}
/* lo stato premuto verde va ridichiarato: qui il fondo blu ha specificita' maggiore
   della regola generale .btn:active e la scavalcherebbe */
.newsletter .nl-row .btn:active {
  transform: translateY(-50%);
  background: var(--green-deep); border-color: var(--green-deep);
}
.newsletter .consent { margin: 16px 0 0; color: var(--ink-soft); }
.newsletter .consent a { color: var(--green-deep); border-color: rgba(12,122,10,.4); }
.newsletter .form-success { background: var(--green-tint); border-color: rgba(12,122,10,.18); }
.newsletter .form-success p { color: var(--ink-soft); }
@media (max-width: 420px) {
  .newsletter .nl-row input { padding-right: 100px; }
  .newsletter .nl-row .btn { padding: 12px 17px; }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0 30px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.58);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { transition: color .2s; }
.footer-legal a:hover { color: #fff; }

/* =========================================================
   Moduli collegati a MailerLite
   ========================================================= */
/* Nessuna regola imposta "display": cosi' l'attributo [hidden] continua a
   nascondere davvero errore e reCAPTCHA finche' non servono. */
.form-error {
  margin: 12px 0 0;
  font-size: .9rem; font-weight: 600; line-height: 1.4;
  color: var(--brand-deep);   /* 9,9:1 sul bianco della card newsletter */
}
.section--ink .form-error,
.form-card--dark .form-error { color: var(--brand-soft); }

.ml-captcha { margin-top: 14px; }
/* Il riquadro di Google e' largo 304px fissi, misura che sul telefono non entra
   nella card: si rimpicciolisce il figlio disegnato da grecaptcha e si dichiara al
   posto suo un box piu' stretto. Una scala da sola non basterebbe: non cambia lo
   spazio occupato, e il riquadro continuerebbe a mangiarsi il margine della card. */
@media (max-width: 430px) {
  .ml-captcha { width: 274px; height: 70px; }
  .ml-captcha > div:first-child { transform: scale(.9); transform-origin: left top; }
}
@media (max-width: 360px) {
  .ml-captcha { width: 243px; height: 62px; }
  .ml-captcha > div:first-child { transform: scale(.8); }
}
/* grecaptcha scrive width e height in stile inline sul contenitore: per centrarlo
   nella banda newsletter bastano i margini automatici. */
@media (max-width: 860px) {
  .newsletter .ml-captcha { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   Pagina Grazie
   ========================================================= */
/* Hero piu' basso: qui non c'e' niente da leggere sotto, e la pagina finirebbe
   per essere quasi tutta blu. */
.hero--short { padding: calc(var(--header-h) + clamp(40px, 5vw, 64px)) 0 clamp(52px, 6vw, 78px); }
.thanks-tick {
  width: 62px; height: 62px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green);   /* 4,6:1 sul blu dell'hero: il segno bianco resta netto */
  color: #fff;
  box-shadow: 0 10px 30px rgba(6, 12, 50, .35);
}
.thanks-tick svg { width: 30px; height: 30px; }
/* Testo centrato: larghezza contenuta e righe bilanciate. Senza, la prima riga
   arrivava quasi al bordo del contenitore e la seconda restava mozza. */
.hero--short .lead {
  max-width: 44ch; margin-inline: auto;
  text-wrap: balance;
}

/* =========================================================
   Registrazioni (pagina di visione)
   ========================================================= */
.rec-list { display: grid; gap: clamp(34px, 4.5vw, 60px); }
.rec-video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2);   /* fondo scuro finche' il player non ha caricato */
  box-shadow: var(--shadow-md);
}
.rec-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rec-meta {
  margin: 16px 0 0; color: var(--ink-soft); font-size: .95rem;
}
.rec-meta strong { color: var(--ink); font-weight: 650; }
.rec-meta span { color: var(--green-deep); margin: 0 4px; }

/* =========================================================
   Lingua
   ========================================================= */
/* Cambio lingua nella testata: deve leggersi ma non competere col bottone rosso,
   che resta l'unica azione in evidenza della barra. */
.lang-switch {
  display: inline-flex; align-items: center;
  margin-right: clamp(6px, .8vw, 12px);
  border-radius: var(--r-sm);
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.22);
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
}

/* Testata: voci di menu, selettore di lingua e bottone hanno la stessa altezza e
   il testo centrato nel proprio riquadro. Prima le lettere stavano 3,6px sotto il
   centro: era la correzione ottica che serviva ad allinearle al logo, e con dei
   riquadri visibili attorno (pillola dell'hover, cornice della lingua, bottone
   rosso) si leggeva come testo scentrato. Adesso la correzione la fa la barra
   intera, spostata sotto di 2,3px qui sotto: le lettere restano sulla riga del
   logo e i riquadri stanno centrati attorno alle lettere. */
/* .nav .nav-toggle-link va nominato per forza: pesa (0,2,0) e batte il selettore
   per discendenza diretta (0,1,3), percio' "Programma" restava con il vecchio
   spaziamento asimmetrico e scendeva sotto le altre voci. */
.nav > ul > li > a,
.nav .nav-toggle-link,
.nav .lang-switch,
.nav-cta .btn--sm {
  height: 46px; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0;
}
/* 2,3px: la differenza misurata fra il centro delle maiuscole del logo e quello
   delle voci di menu una volta centrate nel riquadro. */
.nav { transform: translateY(2.3px); }
.nav .lang-switch { padding-left: 13px; padding-right: 13px; }
/* Le voci ereditavano il margine di base delle liste (li { margin-bottom: .5em }):
   otto pixel invisibili sotto ogni voce che spingevano l'intera fila quattro pixel
   piu' in alto del selettore di lingua e del bottone. */
.nav > ul > li { margin: 0; }
.lang-switch:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.drawer-lang { margin-top: 18px; text-align: center; }
.drawer-lang .lang-switch { margin-right: 0; }

/* Avvertenze sulla lingua: i corsi e le dirette sono in italiano, e le pagine
   inglesi lo dicono invece di lasciarlo scoprire dopo l'iscrizione. */
.nl-note {
  margin: 10px 0 0; font-size: .86rem; color: var(--ink-mute);
}
.nota-lingua {
  margin-top: 14px; font-size: .86rem; font-style: italic; color: var(--ink-mute);
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 34px; }
.mt-l { margin-top: 52px; }
.upper { text-transform: uppercase; }
.nowrap { white-space: nowrap; }