/* Landing Elio v3, hero «Dal buio alla luce» (porto del prototipo «Hero v9»
   del 15 set 2026, con la direzione nuova: racconto GUIDATO DALLO SCROLL).
   Caricato SOLO dalla home, dopo v3.css. Sostituisce hero3.css (la hero
   «Luce, poi griglia» del 13 set, che resta in git a d07fe4d).

   Cinque quadri legati alla posizione di scorrimento, tutti reversibili:
   0 «arrivo»  in cima, nessuno scroll: nero, il nav al suo posto, e si legge
               SOLO il titolo «I turni … con un click.»: le parole che mancano
               le scrive un'INSEGNA AL NEON che si guasta (.hero9-neon, piu'
               sotto). In basso, da subito, l'invito a scorrere: il sole di
               Elio acceso, «Scorri» e un filo di luce che scende (.hero9-cue).
   1 «buio»    al primo pixel di scroll: l'insegna va in corto e salta, il
               titolo sparisce e appare NETTA la frase «Non il solito tool
               di creazione turni»; un attimo dopo la chiude «che lascia le
               persone al buio.» e su «al buio» la luce si spegne (dal 26
               set, vedi «Il gancio»). L'invito resta: la luce nostra c'e'
               gia'.
   2 «luce»    continuando: le caselle del mese si accendono a onda
               dall'orizzonte verso chi guarda (--w) e la loro luce rischiara
               il cielo: l'alba (--alba).
   3 «schede»  a scena illuminata, dopo un respiro sul pavimento appena
               acceso, entrano le tre schede del prodotto, una per schermo di
               scroll, in flusso sopra il palco fermo; il cielo fa giorno
               (--giorno).
   4 «payoff»  fine della corsa, tutta a scroll: arriva la luce piena
               (--chiaro: cielo chiaro, testo d'inchiostro) mentre l'ultima
               scheda esce; a scena sgombra torna il titolo dell'inizio
               (--q) con l'insegna spenta INTERA, «I turni ALLA VELOCITÀ
               DELLA LUCE con un click.»; dopo un respiro il sole scrive
               «alla luce del sole,» da sinistra a destra sopra l'insegna,
               in poco piu' di uno schermo di scroll (--f, il fronte), e
               «luce» brilla; salgono lead e CTA (--sale) e il palco resta
               fermo ancora poco meno di mezzo schermo, poi lascia la pagina.
               Dal 26 set la sola scrittura prende 1,1 schermi di scroll
               (prima tutto il payoff ne prendeva .42) e la riga del titolo
               non si muove mai (vedi .hero9-neon).

   Il MARKUP e' allo stato finale («pronto»): il palco e' un blocco normale
   alto uno schermo col payoff completo, la luce piena e il pavimento
   acceso; sotto, le schede in flusso sullo stesso chiaro. E' il rendering
   no-JS / ?ridotto / reduced-motion. SOLO il JS mette .js-hero9 sulla
   sezione: da li' il palco e' sticky, il flusso gli scorre sopra
   (margin-top negativo), i distanziatori (.hero9-arrivo/-corsa/-coda)
   prendono altezza e lo stato viaggia in data-fase sulla sezione, piu'
   nove numeri scritti sugli elementi che li usano (--w onda e --scorri
   nastro sulle file, --alba, --giorno e --chiaro sui fondali, --q titolo,
   --f fronte e --sale lead e CTA sul blocco del titolo, --gancio sul
   gancio), due misure del titolo (--eccesso e --anticipo, una volta per
   layout) e due per scheda (--e entrata, --t posizione nel viewport).
   Dal 16 set (sera) quei numeri INSEGUONO lo scroll (hero9.js, costante di
   tempo 100 ms) invece di copiarlo al pixel: niente scatti da rotella o da
   flick. E il palco e' alto 100vh secchi, non dvh: sul telefono la barra del
   browser che si ritrae non cambia piu' nessuna misura a meta' gesto
   (l'invito sta sopra la barra grazie a 100vh - 100svh).

   ECCEZIONE DICHIARATA al contratto di v3.css (come hero3.css prima): le
   regole [data-fase=...] e .js-hero9 nascondono e spostano cose, ma quei
   valori li scrivono solo lo snippet inline dopo la sezione e hero9.js. Il
   gancio «Non il solito tool…», l'insegna al neon e l'invito «Scorri» sono
   chrome del JS (hidden o display:none nel markup; l'invito e' un bottone
   vero, gancio e insegna aria-hidden). Il pavimento (26 righe x 31 caselle) lo
   genera hero9.js SEMPRE, anche con ?ridotto: e' decorazione ferma. Senza
   JS il cielo resta senza caselle.

   Micro-tipografia del pavimento e delle schede in px/clamp verbatim dal
   prototipo; il testo in flusso usa la ladder di v3.css (72/48/36). */

/* I numeri della scena sono NON ereditati e ognuno sta sull'elemento che
   lo usa (li' lo dichiara il CSS allo stato finale e li' lo scrive
   hero9.js). Il motivo e' misurato: una custom property ereditata che
   cambia a ogni frame di scroll ricalcola lo stile di TUTTI i discendenti
   della sezione, 806 caselle comprese (13 ms a frame in headless, la meta'
   del costo della hero); non ereditata e scritta sul consumatore, il
   ricalcolo tocca una decina di nodi. --q resta ereditata perche' la
   leggono i figli del blocco del titolo (una quarantina di nodi), e
   --e/--t le leggono i figli della scheda. Dove @property manca restano
   variabili normali: stesso risultato, solo piu' ricalcoli. */
@property --w { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --alba { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --giorno { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --chiaro { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --scorri { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --gancio { syntax: '<number>'; inherits: false; initial-value: 0; }

.hero9 {
  --anello: var(--azzurro);
  /* Altezza di una fila del pavimento: la usano le file e la geometria
     della maschera dell'onda (.hero9-righe). */
  --fila-h: clamp(24px, 4.2vh, 42px);
  /* Stato FINALE (markup, no-JS) delle schede: entrate, a meta' schermo. */
  --e: 1; --t: .5;
  position: relative;
  color: #fff;
  /* Il cielo della luce piena sotto tutta la sezione: nello stato statico
     e' il fondo del payoff (il primo schermo, per questo le fermate sono in
     vh) e poi quello delle schede, che finisce nel colore della sezione
     dopo; col JS lo si vede solo quando il palco si stacca, in coda. */
  background: linear-gradient(180deg, #CFE2F4 0, #E4EEF8 36vh, #F6F9FC 56vh, #EAF2F9 100vh);
}

/* ---- Il palco: uno schermo, fermo mentre il flusso gli scorre sopra ---- */
.hero9-palco {
  position: relative;
  /* 100vh secchi (sul telefono la viewport GRANDE), non dvh: con dvh la
     barra del browser che si ritrae cambiava a meta' del primo gesto
     l'altezza di palco, flusso e arrivo, e tutti i numeri saltavano. Il
     prezzo: al primo paint sul telefono il fondo del palco sta sotto la
     barra; l'invito a scorrere ne tiene conto (.hero9-cue). */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.js-hero9 .hero9-palco {
  position: sticky;
  top: 0;
  z-index: 0;
  background: #000;
}
/* flow-root: nella pagina statica la coda e' alta zero e il margine sotto
   la didascalia uscirebbe dalla sezione, lasciando una fascia del colore
   del body prima della sezione dopo. */
.hero9-flusso { position: relative; z-index: 1; display: flow-root; overflow-x: clip; }
.js-hero9 .hero9-flusso { margin-top: -100vh; }
/* Il flusso sta SOPRA il palco (z 1 contro 0) per tutta la sezione, anche
   dove e' solo un distanziatore vuoto: un blocco senza sfondo prende
   comunque i tocchi, quindi senza questo il palco non ne riceveva nessuno
   (ne' l'invito «Scorri», ne' le CTA del payoff: trovato il 16 set sera,
   c'era dal 15). I contenuti veri del flusso se li riprendono. */
.js-hero9 .hero9-flusso { pointer-events: none; }
.js-hero9 :is(.hero9-schede, .hero9-dida) { pointer-events: auto; }
/* Distanziatori: esistono solo col racconto. */
.hero9-arrivo, .hero9-corsa, .hero9-coda { height: 0; pointer-events: none; }
.js-hero9 .hero9-arrivo { height: 100vh; }
.js-hero9 .hero9-corsa { height: 165vh; }
/* La coda: il payoff corre mentre la sua cima sale dal 46% dello schermo
   (hero9.js, «Il payoff, tutto a scroll»: luce, titolo, un respiro sul
   prima, la scrittura in 1,1 schermi, lead e CTA, 1,75 schermi in tutto),
   poi il palco tiene fermo il payoff completo altri .4 schermi (sotto i
   900 px, con 260vh, .3) e lascia la pagina. Fino al 26 set era 140vh e il
   payoff intero stava in .42 schermi. */
.js-hero9 .hero9-coda { height: 270vh; }

/* ---- Fondali (solo col JS: nello statico il cielo e' quello della sezione) ---- */
.hero9-fondo, .hero9-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero9:not(.js-hero9) :is(.hero9-fondo, .hero9-velo) { display: none; }
/* L'alba: la luce delle caselle sale dall'orizzonte. */
.hero9-fondo--alba {
  --alba: 1;
  opacity: var(--alba);
  background:
    radial-gradient(64% 42% at 50% 60%, rgba(242, 185, 92, .55) 0%, rgba(242, 185, 92, .18) 34%, rgba(242, 185, 92, 0) 66%),
    linear-gradient(180deg, #05080F 0%, #0B1626 48%, #1F3A57 100%);
}
/* Il giorno: i colori del marchio, navy in alto e cielo chiaro all'orizzonte. */
.hero9-fondo--giorno {
  --giorno: 1;
  opacity: var(--giorno);
  background: linear-gradient(180deg, #1F3A57 0%, var(--navy) 36%, #5D8BBE 68%, #A9CDEB 100%);
}
/* La luce piena: arriva col payoff (--chiaro, piena a 0,4 della sua corsa,
   prima delle parole) ed e' il cielo su cui si legge la frase. Fino al 16
   set sera il payoff stava sul cielo del giorno, blu, con un velo navy
   dietro il testo per tenerlo leggibile: leggibile si', ma la fine del
   racconto «dal buio alla luce» era una nuvola scura dietro la parola
   luce. Ora la luce c'e' davvero: cielo chiaro, un chiarore caldo
   sull'orizzonte dove sorge il sole, testo d'inchiostro. */
.hero9-fondo--chiaro {
  --chiaro: 1;
  opacity: var(--chiaro);
  background:
    radial-gradient(62% 48% at 50% 56%, rgba(255, 246, 226, .9) 0%, rgba(255, 246, 226, .35) 45%, rgba(255, 246, 226, 0) 76%),
    linear-gradient(180deg, #CFE2F4 0%, #E4EEF8 36%, #F6F9FC 56%, #EAF2F9 100%);
}
/* Velo in alto per il gancio sull'alba; se ne va col giorno. */
.hero9-velo {
  --giorno: 1;
  inset: 0 0 auto 0;
  height: 58%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: calc((1 - var(--giorno)) * .8);
}

/* ---- Il pavimento: il mese in prospettiva, dall'orizzonte a chi guarda ----
   L'onda e' --w sulla sezione (0..1) ed e' una MASCHERA sulle file
   (.hero9-righe): un'ellisse centrata sulla prima fila visibile, larga
   mezzo piano e alta 14 file, che si allarga con --w e ha un fronte sfumato
   di un quinto del raggio. E' lo stesso disegno di prima, quando ogni
   casella aveva la sua soglia e la sua opacita', ma cosi' a ogni frame di
   scroll si ridisegna UN gradiente e non 806 caselle: la differenza fra
   uno scroll che scatta e uno che scorre. La maschera sta sulle file e non
   sul piano, cosi' viaggia con loro (--scorri) come facevano le soglie.
   Colori delle sigle dalle classi .sg-* di v3.css. */
/* La luce dell'alba raccolta sull'orizzonte. Fino al 16 set sera qui c'era
   un filo di 1px pieno (rgba oro .55) con un alone: da bordo a bordo
   disegnava una RIGA gialla netta fra il cielo scuro e le caselle accese,
   e siccome dipendeva solo da --alba restava accesa anche a giorno fatto,
   dove tagliava in due il testo del payoff. Ora e' un'ellisse senza nessun
   bordo (si spegne prima di arrivare ai lati, quindi niente linea) e se ne
   va col giorno: la sorgente di luce si sente, la cucitura no. */
.hero9-orizzonte {
  --alba: 1;
  --giorno: 1;
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(1500px, 92vw);
  height: 110px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 185, 92, .40) 0%, rgba(242, 185, 92, .14) 42%, rgba(242, 185, 92, 0) 74%);
  opacity: calc(var(--alba) * (1 - var(--giorno) * .9));
  pointer-events: none;
}
.hero9-pav {
  --giorno: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  bottom: 0;
  perspective: 760px;
  perspective-origin: 50% 0%;
  pointer-events: none;
  opacity: calc(1 - var(--giorno) * .18);
}
.hero9-piano {
  position: absolute;
  left: 50%;
  top: 0;
  width: 150%;
  height: 170%;
  overflow: hidden;
  transform: translateX(-50%) rotateX(57deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
}
.hero9-righe {
  --w: 1;
  --scorri: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(calc(-36% + var(--scorri) * 30%));
  will-change: transform;
  /* Il fronte dell'onda in % del raggio: la casella a distanza d (ellittica,
     0 al centro e 1 al bordo) si accendeva a w = .03 + d x .56, in un nono
     di onda. Centro: colonna 15 (meta' larghezza) e fila 9 (la prima
     visibile a --scorri 0: 9 passi di fila piu' mezza fila); raggi: 15
     colonne su 31 (col gap, il 48,4% della larghezza) e 14 passi di fila. */
  --fronte: calc((var(--w) - .03) / .56 * 100%);
  -webkit-mask-image: radial-gradient(48.4% calc(14 * (var(--fila-h) + 5px)) at 50% calc(9.5 * var(--fila-h) + 45px), #000 calc(var(--fronte) - 20%), transparent var(--fronte));
  mask-image: radial-gradient(48.4% calc(14 * (var(--fila-h) + 5px)) at 50% calc(9.5 * var(--fila-h) + 45px), #000 calc(var(--fronte) - 20%), transparent var(--fronte));
}
.hero9-fila { display: flex; gap: 5px; height: var(--fila-h); }
.hero9-cella {
  flex: 1;
  min-width: 0;
  border-radius: 6px;
}
/* Il bagliore delle caselle sul cielo, sopra l'orizzonte. */
.hero9-bagliore {
  --alba: 1;
  --giorno: 1;
  position: absolute;
  left: 50%;
  top: 56%;
  width: 120vw;
  height: 46vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 185, 92, .34) 0%, rgba(242, 185, 92, .1) 45%, rgba(242, 185, 92, 0) 75%);
  opacity: calc(var(--alba) * (1 - var(--giorno) * .6));
  pointer-events: none;
}

/* ---- Il gancio: netto, sul nero, in due tempi. Chrome del JS. ----
   Dal 26 set la frase e' intera: «Non il solito tool di creazione turni /
   che lascia le persone / al buio.». E' la tesi della hero detta al buio:
   la velocita' promessa dall'insegna (appena saltata) lascia le persone al
   buio, e la luce che arriva dopo, dal pavimento del mese, e' la nostra. Per
   darle il peso che ha: (1) due TEMPI, la prima meta' netta come prima e la
   seconda (.hero9-hook-b) un secondo dopo, il tempo di leggere la prima;
   (2) «al buio.» su una riga sua, l'ultima, corta, dove l'occhio si ferma;
   (3) su quelle due parole la luce SI SPEGNE: un guizzo e restano accese a
   meta' (.hero9-hook-buio, hero9-buio-si-spegne), come l'insegna di
   qualcun altro poco prima. Si leggono ancora (bianco a .42: quasi 4 di
   contrasto sul nero e sopra il 3 anche sull'alba che sale, soglia del
   testo grande), ma sono al buio. I tempi sono
   CSS, a tempo e non a scroll: chi si ferma sul nero vede la frase
   completarsi da sola. Una regola sola per buio e luce, cosi' il passaggio
   fra le due fasi non riparte le animazioni a meta'. */
.hero9-hook {
  --gancio: 0;
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 3;
  width: min(100% - 48px, 20ch);
  margin: 0;
  transform: translate(-50%, -50%) translateY(calc((1 - var(--gancio)) * -10px));
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .5);
  text-wrap: balance;
  opacity: var(--gancio);
  pointer-events: none;
  transition: opacity .22s ease;
}
.hero9-hook[hidden] { display: none; }
/* Al buio il gancio aspetta che l'insegna sia saltata (vedi .hero9-neon). */
.hero9[data-fase="buio"] .hero9-hook { transition-delay: .34s; }
.hero9-hook-a, .hero9-hook-b, .hero9-hook-buio { display: block; }
.hero9-hook-b { opacity: 0; transition: opacity .3s ease; }
.hero9:is([data-fase="buio"], [data-fase="luce"]) .hero9-hook-b { opacity: 1; transition: opacity .7s ease 1.2s; }
.hero9:is([data-fase="buio"], [data-fase="luce"]) .hero9-hook-buio { animation: hero9-buio-si-spegne 1s steps(1, end) 2.6s both; }

/* ---- Il titolo e il payoff (contenuto accessibile) ----
   Stesso blocco all'arrivo (bianco sul nero, con l'insegna al posto delle
   parole che mancano) e alla fine (inchiostro sulla luce piena, completo):
   il titolo non si muove; l'insegna si spegne e le parole vere la coprono.
   I colori scritti qui sono quelli della fine (e della pagina statica); il
   bianco dell'arrivo sta nelle regole [data-fase] e cambia solo mentre il
   blocco e' invisibile. */
.hero9-copy {
  --q: 1; --f: 1; --sale: 1;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1080px;
  padding: 0 var(--sp-24);
  transform: translateY(-4vh);
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.hero9:is([data-fase="buio"], [data-fase="luce"], [data-fase="schede"]) .hero9-copy { opacity: 0; visibility: hidden; }
/* Al buio il titolo se ne va DOPO il corto dell'insegna (.hero9-neon). */
.hero9[data-fase="buio"] .hero9-copy { transition: opacity .16s ease .08s, visibility 0s linear .24s; }
/* Il titolo torna DIETRO la luce (--q, scritto da hero9.js: comincia
   quando la luce piena e' a otto decimi e l'ultima scheda e' fuori), con
   l'insegna spenta intera: il sole comincia a scrivere solo dopo un
   respiro di scroll sul «prima». Fino al 26 set il titolo tornava con la
   scrittura gia' partita, coi primi 95 px dell'insegna cancellati: non
   c'era mai un prima, e la sostituzione non si vedeva. */
.hero9[data-fase="payoff"] .hero9-copy { opacity: var(--q); transition: opacity .2s ease; }
.hero9-eyebrow { margin-bottom: 0; color: var(--navy); letter-spacing: .16em; }
/* 72 px della ladder, ma fra 901 e 1040 px di larghezza un po' meno (fino
   a 63 px): nel payoff l'insegna spenta sborda a destra della riga
   (.hero9-neon) e a 72 px, sotto i 1040, uscirebbe dalla colonna.
   .0738 = 72 / 976, la misura in px a 72 px di «I turni » + le parole
   vere + due volte l'eccesso dell'insegna. */
.hero9-h1 {
  margin-top: var(--sp-12);
  font-family: var(--font-display);
  font-weight: 640;
  font-size: min(72px, calc((100vw - 48px) * .0738));
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--notte);
}
/* All'arrivo e al buio il titolo sta sul nero. */
.hero9:is([data-fase="arrivo"], [data-fase="buio"]) .hero9-h1 { color: #fff; text-shadow: 0 6px 40px rgba(7, 15, 28, .5); }
.hero9-h1 .hero9-riga { display: block; }
/* «luce» in un oro che si legge sul chiaro: l'oro del sole (#F2B95C) sul
   cielo chiaro sta sotto il 2 di contrasto, questo ambra sopra il 3 su
   tutto il cielo dietro la parola (misurato a 1280x800 e 390x844, anche
   nella pagina statica). Attorno l'alone caldo del sole, leggero, che
   cresce col fronte della scrittura (--f), e a scrittura finita (is-pieno,
   hero9.js) un brillio. Niente ombre scure, che il ritaglio della
   scrittura (.hero9-pieno) tagliava a rettangolo dietro le parole. */
.hero9-h1 .oro {
  color: #B97A14;
  text-shadow: 0 0 32px rgb(242 185 92 / calc(var(--f) * .45));
}
.hero9.is-pieno .hero9-h1 .oro { animation: hero9-brilla 1.1s ease-out; }
/* Le parole vere e l'insegna: due strati nella stessa casella. Nel payoff
   la casella e' larga quanto le parole vere, cioe' la riga e' gia' quella
   finale, e --f, il fronte, le scambia da sinistra a destra (vedi sotto). */
.hero9-vuoto {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}
.hero9-pieno {
  display: inline-block;
  /* Il fronte della scrittura, in px dall'inizio di «alla», e' UNO per i
     due strati: parte dall'inizio dell'insegna (--anticipo, zero o
     negativo) e ne percorre tutta la larghezza (le parole, 100%, piu'
     --eccesso). Le parole si scoprono fin dove e' arrivato; l'insegna si
     cancella da li' (.hero9-neon). Le parole finiscono prima dell'insegna:
     l'ultimo tratto del fronte cancella solo la coda dell'insegna, oltre
     «sole,». Senza JS le due misure mancano e --f vale 1: parole intere.
     Un em di margine sopra e sotto: l'alone di «luce» ci sta dentro intero
     (con .3em il ritaglio lo tagliava dritto). */
  clip-path: inset(-1em calc(100% - var(--anticipo, 0px) - var(--f) * (100% + var(--eccesso, 0px))) -1em 0);
}
/* Dove l'insegna non sta sulla riga di «I turni» (hero9.js, misura), da
   luce in poi la casella va a capo, centrata: le tre righe del telefono. */
.hero9:not([data-fase="arrivo"]):not([data-fase="buio"]) .hero9-copy.is-a-capo .hero9-vuoto { display: block; width: fit-content; margin-inline: auto; }

/* ---- L'insegna: «ALLA VELOCITÀ DELLA LUCE» al neon, che si guasta ----
   Al posto delle parole che mancano c'e' la promessa di qualcun altro,
   «alla velocita' della luce», scritta da un'insegna al neon che ci prova
   e non ce la fa; alla fine il sole scrive le parole vere, «alla luce del
   sole,». (Fino al 17 set l'insegna diceva le stesse parole del payoff.)
   Tre livelli, tutti CSS: --acceso (0..1,5) e' la corrente di TUTTA l'insegna,
   animata a scatti su .hero9-copy nell'arrivo (hero9-neon-ciclo, 9,3 s:
   accensione a stento, quattro secondi di luce con qualche calo,
   instabilita', un colpo di luce e il corto, due tentativi a vuoto, da
   capo); --lume (0..1) e' la salute della singola lettera (tre pattern a
   durate incommensurabili, fase sfalsata da --i, piu' la «O» di VELOCITA' che
   ronza e la sua «C» mezza spenta); il prodotto --on da' il colore del tubo
   (vetro spento --vetro -> bianco caldo) e i quattro aloni, tutti a zero da
   spenta. Dietro le lettere, la loro luce sul muro (::before). Niente
   oscillazione in 3D: c'era fino al 17 set (rotateY/rotateX con la
   perspective sulla casella) e faceva sembrare che le lettere cambiassero
   misura, e con la casella larga quanto l'insegna portava la «A» sulla
   «i» di «turni»; ora l'insegna sta ferma e il difetto e' solo la luce.
   Font: Inter maiuscolo a tratto uniforme (la forma di un tubo), NON
   Fraunces: e' l'insegna di qualcun altro dentro la nostra frase; la
   font-size e' UNA, .55em del titolo, in ogni fase e a ogni breakpoint
   (mai un'insegna che cambia misura fra arrivo e payoff). Al buio l'insegna
   salta (hero9-neon-morte: un colpo di luce e via) prima che il titolo
   sparisca; nel payoff resta il vetro spento, che le parole d'oro coprono
   da sinistra a destra. Le @property servono solo a interpolare se un
   giorno le curve smettono di essere a scatti: con steps() il risultato e'
   identico anche dove non sono supportate. */
@property --acceso { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --lume { syntax: '<number>'; inherits: false; initial-value: 1; }
.hero9-copy { --acceso: 0; }
.hero9[data-fase="arrivo"] .hero9-copy { animation: hero9-neon-ciclo 9.3s steps(1, end) infinite; }
.hero9-neon {
  --neon: 158 213 255;
  --vetro: .16;
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  gap: .42em;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 460;
  font-size: .55em;
  letter-spacing: .07em;
  line-height: 1;
  /* Le maiuscole sulla linea di base del serif (la casella le centra). */
  translate: 0 .22em;
  pointer-events: none;
}
.js-hero9 .hero9-neon { display: flex; }
/* Dal 17 set l'insegna ha 21 lettere: a .55em e' piu' larga delle parole
   vere (a 1280 ~140 px in piu', sul telefono ~50). All'arrivo e al buio
   sta IN FLUSSO e detta la misura della casella (.hero9-vuoto; in flusso
   niente traslazione, le maiuscole poggiano gia' sulla linea di base) e
   le parole vere, invisibili a --f 0, le stanno sopra in assoluto. Da
   luce in poi e' il contrario: parole vere in flusso, cioe' la casella e
   la riga sono gia' quelle FINALI e nel payoff non si muovono mai, e
   insegna assoluta, larga quanto le sue lettere (non quanto la casella:
   sborda), messa da --anticipo (hero9.js, misura): con «I turni» sulla
   stessa riga parte con «alla» e sborda tutta a destra, sulla riga sua le
   sta centrata sopra. Lo scambio di strato avviene in luce e schede,
   quando .hero9-copy e' invisibile: nessun salto si vede. Storia: fino al
   26 set l'insegna era centrata sulla casella e il ritaglio le tagliava a
   sinistra la «AL» iniziale (a destra sborda nel vuoto, a sinistra
   coprirebbe «turni»); lo stesso giorno, per un giro, la casella e' stata
   larga quanto l'insegna e si stringeva a scrittura finita, e la riga
   scivolava: bocciata («l'effetto rimbalzo»). Chi rimette l'insegna
   assoluta all'arrivo la fa sforare sulla riga; chi la rimpicciolisce nel
   payoff per farla stare nella casella rifa' la prima versione del 17 set,
   bocciata perche' cambiava misura. */
.hero9:is([data-fase="arrivo"], [data-fase="buio"]) .hero9-neon { position: relative; inset: auto; translate: 0; }
.hero9:is([data-fase="arrivo"], [data-fase="buio"]) .hero9-pieno { position: absolute; inset: 0; display: block; text-align: center; }
.hero9:not([data-fase="arrivo"]):not([data-fase="buio"]) .hero9-neon { inset: 0 auto 0 var(--anticipo, 0px); width: max-content; }
.hero9[data-fase="buio"] .hero9-neon { animation: hero9-neon-morte .4s steps(1, end) forwards; }
/* Il ritaglio dell'insegna nel payoff, in percentuale della sua larghezza:
   comincia dove comincia lei, quindi il suo fronte e quello dell'oro
   (.hero9-pieno) sono lo stesso punto, e a --f 1 non resta niente. */
.hero9[data-fase="payoff"] .hero9-neon { clip-path: inset(-2em 0 -2em calc(var(--f) * 100%)); }
/* Nel payoff l'insegna spenta e' vetro grigio sulla luce (il bianco li'
   sparirebbe): le parole d'oro la coprono da sinistra a destra. Fino al 26
   set era a .18 di alfa e si vedeva a stento: il «prima» non si
   registrava. A .36 si legge come un'insegna spenta, sotto l'inchiostro
   del titolo. */
.hero9[data-fase="payoff"] .hero9-tubo { color: rgb(20 36 58 / .36); text-shadow: none; }
/* Le lettere si animano solo finche' l'insegna si vede (arrivo e buio):
   dopo, ventuno animazioni a scatti che ticchettano per niente sono solo
   ricalcoli di stile a ogni frame e batteria. */
.hero9:not([data-fase="arrivo"]):not([data-fase="buio"]) .hero9-tubo { animation: none; }
.hero9-neon::before {
  content: '';
  position: absolute;
  inset: -1.6em -1em;
  border-radius: 50%;
  background: radial-gradient(55% 65% at 50% 50%, rgb(var(--neon) / .3), rgb(var(--neon) / .1) 45%, rgb(var(--neon) / 0) 72%);
  opacity: calc(var(--acceso) * .9);
}
.hero9-parola { display: flex; }
.hero9-tubo {
  --lume: 1;
  --on: calc(var(--acceso) * var(--lume));
  color: rgb(255 255 255 / calc(var(--vetro) + (1 - var(--vetro)) * var(--on)));
  text-shadow:
    0 0 calc(var(--on) * 2px) rgb(255 255 255 / calc(var(--on) * .9)),
    0 0 calc(var(--on) * 10px) rgb(var(--neon) / calc(var(--on) * .9)),
    0 0 calc(var(--on) * 26px) rgb(var(--neon) / calc(var(--on) * .55)),
    0 0 calc(var(--on) * 60px) rgb(var(--neon) / calc(var(--on) * .35));
  animation: hero9-tubo-a 5.7s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * -.53s);
}
.hero9-tubo:nth-child(3n+2) { animation-name: hero9-tubo-b; animation-duration: 7.3s; }
.hero9-tubo:nth-child(3n) { animation-name: hero9-tubo-c; animation-duration: 6.1s; }
.hero9-tubo.hero9-tubo--ronza { animation-name: hero9-tubo-ronza; animation-duration: 1.9s; }
.hero9-tubo.hero9-tubo--stanco { animation-name: hero9-tubo-stanco; animation-duration: 4.4s; }
/* La luce che scrive: una scia chiara sul fronte (lo stesso punto dei due
   ritagli, vedi .hero9-pieno), viva solo a meta' corsa. */
.hero9-vuoto::after {
  content: '';
  position: absolute;
  top: -.25em;
  bottom: -.2em;
  left: calc(var(--anticipo, 0px) + var(--f) * (100% + var(--eccesso, 0px)));
  width: 1.1em;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 238, 196, 1), rgba(242, 185, 92, .8) 45%, rgba(242, 185, 92, 0) 100%);
  filter: blur(2px);
  opacity: calc(var(--f) * (1 - var(--f)) * 4);
  pointer-events: none;
}
.hero9-lead {
  margin-top: var(--sp-16);
  max-width: 62ch;
  font-size: 16px;
  line-height: 24px;
  color: #3F4B61;
  text-wrap: pretty;
}
.hero9-cta {
  margin-top: var(--sp-24);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-12);
}
/* Sulla luce: il primario e' il bottone blu del marchio, il secondario un
   vetro chiaro col bordo del blu. */
.hero9-cta .btn2:not(.btn2--fantasma) { box-shadow: 0 10px 24px rgba(45, 80, 117, .22); }
.hero9-cta .btn2--fantasma {
  border-color: rgba(45, 80, 117, .3);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.hero9-cta .btn2--fantasma:hover { background: #fff; border-color: var(--navy); }
/* All'arrivo si legge solo il titolo: il resto e' invisibile ma tiene il
   posto, cosi' il titolo sta allo stesso punto anche alla fine. Anche al
   buio, altrimenti riappare per un attimo mentre il blocco si dissolve. */
.hero9:is([data-fase="arrivo"], [data-fase="buio"]) :is(.hero9-eyebrow, .hero9-lead, .hero9-cta) { opacity: 0; visibility: hidden; }
/* Alla fine lead e CTA salgono (--sale, scritto da hero9.js sul blocco
   del titolo: .3 schermi di scroll, dalla fine della scrittura, mentre il
   sole cancella l'ultima coda dell'insegna). */
.hero9[data-fase="payoff"] :is(.hero9-eyebrow, .hero9-lead, .hero9-cta) {
  opacity: var(--sale, 1);
  transform: translateY(calc((1 - var(--sale, 1)) * 14px));
}
/* Ingresso alla prima vista: le due righe salgono. Una volta sola (.is-nato
   lo mette hero9.js dopo il primo respiro): tornando in cima non si ripete. */
.js-hero9:not(.is-nato)[data-fase="arrivo"] .hero9-h1 .hero9-riga { animation: hero9-sale .9s cubic-bezier(.2, .7, .2, 1) both; }
.js-hero9:not(.is-nato)[data-fase="arrivo"] .hero9-h1 .hero9-riga:nth-child(2) { animation-delay: .14s; }

/* ---- L'invito a scorrere: il sole di Elio acceso, «Scorri», un filo di luce ----
   Chrome del JS, ma un bottone vero (un tocco porta alla prima luce, vedi
   hero9.js). Visibile SUBITO all'arrivo e per tutto il buio: mentre
   l'insegna di qualcun altro si guasta, la luce nostra c'e' gia', in basso,
   e il filo che scende dice da che parte arriva. Se ne va quando le caselle
   cominciano ad accendersi. Il sole e' il marchio VERO e basta (.sole2 di
   v3.css: maschera sul png del logo + currentColor) in oro: fino al 16 set
   sera aveva anche un cuore di luce che respirava al centro, ma il centro
   del marchio e' vuoto per disegno e riempirlo lo rifaceva. Quello che lo
   accende e' l'alone, che respira lui (drop-shadow sul GENITORE, che segue
   la forma mascherata: sul figlio la maschera lo taglierebbe). Il filo e'
   un gradiente con una goccia di luce che scende. Sotto i 720 px prima era
   spento: adesso e' proprio li' che serve. */
.hero9-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 28px);
  /* Sopra la barra del browser del telefono: il palco e' 100vh (la viewport
     grande) e 100vh - 100svh e' l'altezza della barra. A barra ritratta
     l'invito resta un po' piu' su: va bene. */
  bottom: calc(100vh - 100svh + clamp(14px, 3vh, 28px));
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  padding: var(--sp-8) var(--sp-16);
  border: 0;
  border-radius: var(--r-24);
  background: none;
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.hero9-cue[hidden] { display: none; }
.hero9:is([data-fase="arrivo"], [data-fase="buio"]) .hero9-cue { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
/* Alla prima vista entra con un respiro corto, insieme al titolo. */
.hero9[data-fase="arrivo"] .hero9-cue { animation: hero9-appare .6s ease .15s both; }
.hero9-cue:hover, .hero9-cue:focus-visible { color: #fff; }
.hero9-cue:focus-visible { outline: 2px solid var(--oro-sole); outline-offset: 2px; }
.hero9-cue-sole {
  position: relative;
  width: 30px;
  height: 30px;
  color: var(--oro-sole);
  /* Fermo (o a movimento ridotto) l'alone resta, solo non respira. */
  filter: drop-shadow(0 0 6px rgba(242, 185, 92, .7)) drop-shadow(0 0 18px rgba(242, 185, 92, .38));
  animation: hero9-cue-respira 2.8s ease-in-out infinite alternate;
}
.hero9-cue-sole .sole2 { display: block; width: 100%; height: 100%; }
.hero9-cue-luce {
  position: relative;
  width: 2px;
  height: 30px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(242, 185, 92, .5), rgba(242, 185, 92, .05));
}
.hero9-cue-luce::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 246, 220, 0), #FFF6DC);
  box-shadow: 0 0 6px 1px rgba(242, 185, 92, .8);
  animation: hero9-cue-scende 1.8s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* ---- Le tre schede: in flusso sopra il palco, entrano dai lati ----
   --e (0 -> 1) e' l'entrata, --t (0 -> 1) la posizione nel viewport: li
   scrive hero9.js per scheda; nello statico valgono 1 e .5 dalla sezione.
   --lato e' -1 (da sinistra) o 1 (da destra). */
.hero9-schede {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 8vh, 96px);
  padding: clamp(24px, 6vh, 64px) 0 clamp(24px, 4vh, 40px);
}
/* Col racconto le schede vogliono PIU' distanza di tre carte in una pagina
   normale, perche' qui sono l'unica cosa che si muove: il palco dietro e'
   fermo, quindi per un'ora e mezza di schermi non si e' tradotto niente e
   appena arrivano loro la pagina sembra partire di scatto. Con le distanze
   dello statico una scheda durava 0,65 schermi di scroll, di cui mezzo di
   sola entrata: restava ferma 120 px e gia' spingeva la successiva. Qui:
   un respiro sul pavimento acceso prima della prima (il quadro «luce» ha il
   tempo di finire e di farsi guardare), e un passo di circa uno schermo fra
   una scheda e l'altra, cosi' ognuna entra, si ferma un momento e poi lascia
   il posto. Nello statico (?ridotto, no-JS) le distanze restano quelle
   normali: li' non c'e' nessuno scroll da raccontare. */
.js-hero9 .hero9-schede {
  gap: clamp(96px, 34vh, 320px);
  padding-top: clamp(96px, 26vh, 260px);
}
.hero9-scheda {
  --lato: -1;
  position: relative;
  align-self: flex-start;
  margin-left: clamp(16px, 5vw, 96px);
  width: min(100% - 32px, 1120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-24);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 18, 34, .74);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 40px 100px rgba(7, 15, 28, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  color: #fff;
  transform: perspective(1600px)
             translate3d(calc((1 - var(--e)) * var(--lato) * 180px), 0, 0)
             rotateY(calc((1 - var(--e)) * var(--lato) * 9deg))
             scale(calc(.94 + .06 * var(--e)));
  opacity: var(--e);
  will-change: transform, opacity;
}
.hero9-scheda--dx { --lato: 1; align-self: flex-end; margin-left: 0; margin-right: clamp(16px, 5vw, 96px); }
/* Nella pagina statica le schede stanno sul chiaro, dove il vetro scuro
   trasparente diventa grigio: li' sono piene, del blu della notte. */
.hero9:not(.js-hero9) .hero9-scheda { background: #13233A; }
/* Nessun bordo che si accende al passaggio: fino al 16 set sera qui il
   contorno diventava oro sotto il dito o il cursore, e si leggeva come una
   riga gialla attorno alla carta. Il segnale resta il bottone della carta,
   che si schiarisce (il suo ::after copre tutta la carta), e l'anello di
   fuoco da tastiera sul link. */
.hero9-scheda-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  padding: clamp(28px, 4vw, 52px);
}
.hero9-scheda .card2-eti { margin-bottom: 0; color: var(--azzurro); letter-spacing: .16em; }
.hero9-scheda-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* La 01 ha un titolo di due frasi (62 caratteri): a 48 px farebbe quattro
   righe nella colonna di testo. */
.hero9-scheda-h2--lungo { font-size: 40px; }
/* Fra 900 e 1040 px la colonna di testo e' stretta: a 40 px il titolo
   farebbe quattro righe. */
@media (max-width: 1040px) { .hero9-scheda-h2--lungo { font-size: 36px; } }
.hero9-scheda-p { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .82); max-width: 46ch; text-wrap: pretty; }
.hero9-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
}
.hero9-chip svg { flex: none; }
/* La CTA e' il link vero della scheda; il suo ::after la allarga a tutta la
   carta (nome accessibile corto, carta intera cliccabile). */
.hero9-scheda-cta {
  margin-top: var(--sp-8);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 48px;
  padding: var(--sp-12) var(--sp-24);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--notte);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s ease;
}
.hero9-scheda-cta:hover { background: var(--chiarore); }
.hero9-scheda-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.hero9-scheda-visual {
  position: relative;
  min-height: clamp(280px, 42vh, 440px);
  overflow: hidden;
  background: radial-gradient(70% 60% at 65% 70%, rgba(242, 185, 92, .16), rgba(242, 185, 92, 0) 70%);
}
.hero9-scheda--dx .hero9-scheda-visual { background: radial-gradient(70% 60% at 35% 70%, rgba(186, 222, 250, .14), rgba(186, 222, 250, 0) 70%); }
/* Parallasse dei mockup dentro la scheda: --pa sale mentre la scheda
   attraversa lo schermo, --pb scende. */
.hero9-pa { --y: calc((.5 - var(--t)) * 56px); }
.hero9-pb { --y: calc((var(--t) - .5) * 44px); }
.hero9-badge {
  position: absolute;
  left: 7%;
  top: 9%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) 14px;
  border-radius: var(--r-full);
  background: rgba(9, 18, 34, .82);
  border: 1px solid rgba(242, 185, 92, .5);
  color: var(--oro-sole);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(7, 15, 28, .5);
  transform: translateY(var(--y));
  will-change: transform;
}
.hero9-cornice {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px rgba(7, 15, 28, .55);
  will-change: transform;
}
.hero9-cornice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.hero9-cornice-bar .frame2-dots i { background: var(--linea-forte); }
.hero9-cornice img { width: 100%; }
.hero9-cornice--calcolo {
  left: 12%;
  top: 16%;
  width: 118%;
  transform: perspective(1400px) rotateY(-16deg) rotateX(5deg) rotate(1.5deg) translateY(var(--y));
  transform-origin: 0 0;
}
.hero9-cornice--quadro {
  left: -8%;
  top: 12%;
  width: 104%;
  transform: perspective(1400px) rotateY(14deg) rotateX(4deg) translateY(var(--y));
  transform-origin: 100% 0;
}
.hero9-telefono {
  position: absolute;
  width: clamp(140px, 36%, 200px);
  border-radius: 30px;
  border: 7px solid #0B1626;
  background: #0B1626;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(7, 15, 28, .6);
  will-change: transform;
}
.hero9-telefono img { width: 100%; border-radius: 22px; }
.hero9-telefono--home { right: 6%; bottom: -12%; transform: rotate(-6deg) translateY(var(--y)); }
/* Scheda 03: la protagonista e' la scheda personale coi punteggi di
   weekend, domeniche e festivi (il telefono, grande, che sale), i conti da
   gennaio le fanno da nota accanto (piccoli, che scendono). Fino al 16 set
   sera era il contrario, e i punteggi stavano in un telefono di 200 px
   tagliato nell'angolo. */
.hero9-telefono--scheda {
  left: 6%;
  top: 9%;
  width: clamp(220px, 54%, 310px);
  transform: rotate(-3deg) translateY(var(--y));
}
.hero9-conti {
  position: absolute;
  right: 4%;
  bottom: 12%;
  z-index: 1;
  width: clamp(168px, 36%, 208px);
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--inchiostro);
  box-shadow: 0 24px 56px rgba(7, 15, 28, .5);
  transform: rotate(4deg) translateY(var(--y));
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.hero9-conti-eti { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.hero9-conto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4) var(--sp-12);
  align-items: baseline;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
}
.hero9-conto b { font-size: 16px; line-height: 16px; font-variant-numeric: tabular-nums; }
.hero9-conto i {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--navy-soft);
  overflow: hidden;
}
.hero9-conto i::after { content: ''; display: block; width: var(--barra); height: 100%; background: var(--navy); }
/* Scheda 01: il pannello «Il solito tool / Elio», tre righe per meccanismo
   (dal 17 set). E' la risposta a «cosa cambia?» per chi non legge: stessa
   fattura dei conti (bianco, ruotato, scende con --pb), due colonne, la
   colonna di Elio in navy. Categorie e meccanismi, mai un nome (deroga
   alla regola 13 della carta, nel README). */
.hero9-versus {
  position: absolute;
  right: 4%;
  bottom: 8%;
  z-index: 1;
  width: clamp(236px, 52%, 300px);
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--inchiostro);
  box-shadow: 0 24px 56px rgba(7, 15, 28, .5);
  transform: rotate(3deg) translateY(var(--y));
  will-change: transform;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 14px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-wrap: pretty;
}
.hero9-versus-testa, .hero9-versus-riga { display: contents; }
.hero9-versus-testa span {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--linea);
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero9-versus-testa span:last-child { color: var(--navy); }
.hero9-versus-riga span { color: var(--muted); }
.hero9-versus-riga b { color: var(--navy); font-weight: 700; }
/* La didascalia attraversa due cieli (il giorno blu delle schede, poi la
   luce piena del payoff, e nella pagina statica solo il chiaro): un vetro
   chiaro come il nav la tiene leggibile su tutti e due, senza cambiare
   colore a meta' strada. */
.hero9-dida {
  width: fit-content;
  max-width: min(60ch, 100% - 32px);
  margin: 0 auto clamp(48px, 10vh, 96px);
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--muted);
  text-wrap: pretty;
}
/* Nel payoff la didascalia se ne va, insieme all'arrivo della luce: parla
   delle schede, e il «prima» del titolo vuole la scena sgombra (fino al 26
   set le stava sotto, a meta' dissolvenza). Tornando alle schede torna. */
.js-hero9 .hero9-dida { transition: opacity .35s ease; }
.js-hero9[data-fase="payoff"] .hero9-dida { opacity: 0; }

/* Stato d'ingresso in un colpo solo: transizioni spente finche' hero9.js non
   ha misurato la posizione (ricarichi a meta' pagina, ancore). Unico
   !important del file. */
.hero9.is-salto, .hero9.is-salto * { transition: none !important; }

@keyframes hero9-sale { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero9-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero9-cue-respira {
  from { filter: drop-shadow(0 0 5px rgba(242, 185, 92, .5)) drop-shadow(0 0 13px rgba(242, 185, 92, .26)); }
  to { filter: drop-shadow(0 0 8px rgba(242, 185, 92, .9)) drop-shadow(0 0 24px rgba(242, 185, 92, .5)); }
}
@keyframes hero9-cue-scende { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
/* L'insegna (vedi .hero9-neon). ciclo = corrente di tutta l'insegna, 9,3 s a
   scatti: buio .9 s (il titolo sta salendo), accensione a stento, luce con
   qualche calo, instabilita', un colpo a 1,45 e il corto, un guizzo, due
   tentativi a vuoto, buio. tubo-a/b/c = salute delle lettere (durate
   incommensurabili fra loro e col ciclo: il disegno non si ripete mai
   uguale); ronza = la O di VELOCITA'; stanco = la sua C, mezza spenta. */
@keyframes hero9-neon-ciclo {
  0% { --acceso: 0; }
  9.68% { --acceso: 0.45; }
  10.54% { --acceso: 0; }
  11.83% { --acceso: 0.7; }
  12.47% { --acceso: 0.15; }
  13.76% { --acceso: 0.9; }
  14.41% { --acceso: 0.4; }
  15.27% { --acceso: 1; }
  31.18% { --acceso: 0.82; }
  31.83% { --acceso: 1; }
  39.78% { --acceso: 0.6; }
  40.32% { --acceso: 1; }
  40.86% { --acceso: 0.85; }
  41.51% { --acceso: 1; }
  52.69% { --acceso: 0.9; }
  53.23% { --acceso: 1; }
  60.22% { --acceso: 0.5; }
  60.86% { --acceso: 1; }
  62.15% { --acceso: 0.3; }
  62.69% { --acceso: 0.95; }
  63.98% { --acceso: 0.55; }
  64.73% { --acceso: 1; }
  65.59% { --acceso: 0.2; }
  66.13% { --acceso: 0.9; }
  67.1% { --acceso: 0.45; }
  67.74% { --acceso: 1.45; }
  68.49% { --acceso: 0; }
  78.49% { --acceso: 0.12; }
  78.92% { --acceso: 0; }
  84.95% { --acceso: 0.4; }
  85.59% { --acceso: 0; }
  86.88% { --acceso: 0.55; }
  87.53% { --acceso: 0.1; }
  88.17% { --acceso: 0; }
  100% { --acceso: 0; }
}
@keyframes hero9-tubo-a {
  0% { --lume: 1; }
  31% { --lume: 0.55; }
  32% { --lume: 1; }
  64% { --lume: 0.3; }
  64.6% { --lume: 1; }
  65.2% { --lume: 0.8; }
  65.8% { --lume: 1; }
  100% { --lume: 1; }
}
@keyframes hero9-tubo-b {
  0% { --lume: 1; }
  17% { --lume: 0.7; }
  17.6% { --lume: 1; }
  52% { --lume: 0.45; }
  52.5% { --lume: 1; }
  83% { --lume: 0.6; }
  83.4% { --lume: 1; }
  84% { --lume: 0.9; }
  84.6% { --lume: 1; }
  100% { --lume: 1; }
}
@keyframes hero9-tubo-c {
  0% { --lume: 1; }
  44% { --lume: 0.5; }
  44.7% { --lume: 1; }
  78% { --lume: 0.75; }
  78.5% { --lume: 1; }
  100% { --lume: 1; }
}
@keyframes hero9-tubo-ronza {
  0% { --lume: 1; }
  6% { --lume: 0.35; }
  9% { --lume: 1; }
  13% { --lume: 0.5; }
  16% { --lume: 1; }
  40% { --lume: 1; }
  43% { --lume: 0.2; }
  46% { --lume: 0.9; }
  49% { --lume: 0.4; }
  52% { --lume: 1; }
  70% { --lume: 1; }
  72% { --lume: 0.6; }
  75% { --lume: 1; }
  100% { --lume: 1; }
}
@keyframes hero9-tubo-stanco {
  0% { --lume: 0.28; }
  21% { --lume: 0.6; }
  22% { --lume: 0.28; }
  55% { --lume: 0.15; }
  60% { --lume: 0.28; }
  80% { --lume: 0.55; }
  81% { --lume: 0.28; }
  100% { --lume: 0.28; }
}
@keyframes hero9-neon-morte { 0% { --acceso: 1.5; } 18% { --acceso: 0; } 100% { --acceso: 0; } }
/* «al buio» nel gancio (vedi .hero9-hook-buio): accese come il resto della
   frase, poi la luce cede a scatti, un guizzo, e resta a meta'. */
@keyframes hero9-buio-si-spegne {
  0% { color: #fff; }
  10% { color: rgb(255 255 255 / .45); }
  17% { color: #fff; }
  32% { color: rgb(255 255 255 / .6); }
  39% { color: rgb(255 255 255 / .9); }
  55% { color: rgb(255 255 255 / .42); }
  100% { color: rgb(255 255 255 / .42); }
}
@keyframes hero9-brilla {
  0% { text-shadow: 0 0 32px rgba(242, 185, 92, .45); }
  35% { text-shadow: 0 0 52px rgba(242, 185, 92, .95), 0 0 16px rgba(255, 226, 160, .8); }
  100% { text-shadow: 0 0 32px rgba(242, 185, 92, .45); }
}

/* ---- Responsive (riassegnazione, come in v3.css) ---- */
@media (max-width: 900px) {
  .hero9-h1 { font-size: 48px; }
  .hero9-hook { font-size: 36px; line-height: 40px; }
  .hero9-scheda-h2 { font-size: 36px; line-height: 40px; }
  .hero9-scheda-p { font-size: 16px; line-height: 24px; }
  .js-hero9 .hero9-corsa { height: 140vh; }
  .js-hero9 .hero9-coda { height: 260vh; }
  /* Una colonna; le schede entrano dal basso (di lato sborderebbero) e
     senza vetro sfocato, che su tre carte grandi costa. */
  .hero9-scheda {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 560px);
    margin-inline: auto;
    align-self: center;
    background: rgba(9, 18, 34, .9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translate3d(0, calc((1 - var(--e)) * 72px), 0) scale(calc(.96 + .04 * var(--e)));
  }
  /* Qui le carte sono alte quasi quanto lo schermo: il passo di uno schermo
     lo fanno quasi da sole, e le distanze del desktop lo farebbero lunghissimo. */
  .js-hero9 .hero9-schede {
    gap: clamp(72px, 18vh, 168px);
    padding-top: clamp(72px, 18vh, 168px);
  }
  .hero9-scheda-visual { min-height: 280px; }
  .hero9-dida { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Scheda 03 in colonna: il telefono coi punteggi prende quasi tutta la
     larghezza e i conti gli stanno nell'angolo in basso, sopra la parte
     che conta meno (la nota sotto i tre punteggi). Serve piu' altezza,
     altrimenti i conti coprirebbero i festivi. */
  .hero9-scheda-visual.hero9-scheda-visual--conti { min-height: 360px; }
  .hero9-telefono--scheda { left: 5%; top: 5%; width: 64%; transform: rotate(-2deg) translateY(var(--y)); }
  .hero9-conti { right: 4%; bottom: 3%; width: 168px; transform-origin: 100% 100%; transform: rotate(4deg) translateY(var(--y)) scale(.84); }
  /* Scheda 01 in colonna: come i conti, il pannello del confronto sta
     nell'angolo in basso, un po' piu' piccolo, e il visual e' piu' alto. */
  .hero9-scheda-h2--lungo { font-size: 32px; line-height: 36px; }
  .hero9-scheda-visual.hero9-scheda-visual--versus { min-height: 360px; }
  .hero9-versus { right: 4%; bottom: 3%; width: 236px; transform-origin: 100% 100%; transform: rotate(3deg) translateY(var(--y)) scale(.84); }
}
@media (max-width: 720px) {
  .hero9-h1 { font-size: 36px; }
  .hero9-hook { font-size: 30px; line-height: 36px; }
  .hero9-lead { font-size: 14px; line-height: 20px; }
  .hero9-cta { width: 100%; }
  .hero9-cta .btn2 { width: 100%; }
  .hero9-scheda-testo { padding: var(--sp-24); }
  .hero9-scheda-visual { min-height: 240px; }
  .hero9 { --fila-h: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Solo transizioni e animazioni: gli stati li governa data-fase, che
     senza JS (e hero9.js esce subito con reduced-motion) resta «pronto». */
  .hero9-hook, .hero9-hook-b, .hero9-copy, .hero9-cue, .hero9-scheda-cta, .hero9-dida { transition: none; }
  .hero9-cue, .hero9-cue-sole, .hero9-cue-luce::after, .hero9-h1 .hero9-riga,
  .hero9-h1 .oro, .hero9-copy, .hero9-neon, .hero9-tubo, .hero9-hook-buio { animation: none; }
}
@media print {
  .hero9 { background: none; color: var(--inchiostro); }
  .hero9-palco { height: auto; }
  .hero9-pav, .hero9-orizzonte, .hero9-bagliore, .hero9-hook, .hero9-cue, .hero9-neon { display: none; }
  .hero9-h1, .hero9-scheda, .hero9-dida { color: var(--inchiostro); text-shadow: none; }
}