/* ═══════════════════════════════════════════════════════════════════════
   FUNNEL EVERGREEN · TEMA BLU ISTITUZIONALE — "Bank blue console"
   Variante di css/light.css per index-blue.html.

   Si carica DOPO style.css e light.css e non li tocca: stessi
   selettori, stessa specificità, vince l'ultimo. Il tema chiaro resta
   la base — è lui che ha già ribaltato il canvas da nero a carta — e
   questo foglio fa l'unica cosa che manca: togliere l'arcobaleno.

   Perché: l'aurora a 5 tinte (pesca → rosa → viola → menta → cielo) è
   il colore di una pagina "creator". Qui l'offerta è una seconda
   entrata, e il colore deve dire banca: una sola famiglia, il blu, in
   scala tonale. Il riferimento è bancamediolanum.it — navy + azzurro
   su carta bianca, superfici azzurrissime, pill piene, zero rilievo.

   La palette, misurata dal loro foglio di stile:
   · #192d6e  navy           — il colore della casa, titoli e barre
   · #1b4a9c  royal          — il gradino intermedio
   · #0054be  blu di lavoro  — fuoco, selezione, link, accenti
   · #1e96d7  azzurro        — l'accento chiaro, solo chrome e aloni
   · #e9f5fb / #f4fafd       — le superfici azzurre delle bande
   · #d1d5e2 / #e8eaf1       — i fili
   · #e63241 rosso, #00a046 verde — gli unici due colori di STATO

   Le quattro cose che non sono una semplice ritinta:

   1 · LE 5 FERMATE DIVENTANO UNA SCALA. Il sistema usa le fermate
       dell'aurora come identità delle voci (serata 1-4, FAQ a
       rotazione, piastre bonus): quella struttura resta, ma invece di
       girare sulla ruota dei colori scende sulla scala del blu. Tutte
       e 5 passano il contrasto 4.5:1 sul bianco, perché lì dentro sono
       TESTO.
   2 · I TITOLI SI APPIATTISCONO. L'estrusione a 7 gradini è la firma
       del tema scuro; su una pagina istituzionale è un titolo di
       cartone animato. Qui la lettera è navy pieno, senza fianco e
       senza ombra: il peso lo porta il corpo, non il rilievo.
   3 · LA PILL SMETTE DI ESSERE UN OGGETTO. Niente spessore, niente
       rimbalzo: faccia blu piena, testo bianco, un'ombra portata
       morbida. Si capisce che è un bottone perché è l'unica cosa blu
       piena della pagina, non perché salta.
   4 · IL FILO DELLA FAQ SI FERMA. L'arcobaleno che camminava sotto la
       domanda aperta diventa una riga navy → azzurro, ferma.

   L'inchiostro sull'aurora (--color-nav-ink) si ribalta: le facce
   piene qui sono blu scuro, quindi sopra ci va il BIANCO. Tutti i
   posti dove il tema chiaro aveva messo inchiostro su pastello vanno
   riletti con questo in mente (vedi .check-card__ico).

   Struttura: stessa numerazione di style.css e light.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 01 · TOKEN ══════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ─── Testo ───────────────────────────────────────────────────────
       Il nero puro del tema chiaro va a inchiostro navy: su una pagina
       tutta blu un #111 legge come una macchia estranea. Il corpo resta
       scuro (la pagina è lunga e si legge davvero), il grigio dei fili
       prende la stessa nota fredda. */
    --color-bone-white: #0f1b3d;
    --color-off-white: #3a4559;
    --color-mute-gray: #7b869b;
    --color-wire-gray: #dde3ee;
    --color-smoke: #c6cedd;
    --color-ash: #aab4c7;

    /* L'inchiostro sulle facce piene: le facce ora sono blu scuro */
    --color-nav-ink: #ffffff;

    /* Restano bianchi: sono i token del "testo sopra una superficie
       piena" ereditati dal tema chiaro */
    --color-recess-black: #ffffff;
    --color-void-ink: #f4f7fb;
    --color-true-black: #ffffff;
    --color-console-charcoal: #ffffff;

    /* ─── Le 5 fermate, da ruota a scala ──────────────────────────────
       Stessi ruoli, stessa posizione nell'ordine: 1 è la fermata della
       prima serata e della prima FAQ, 3 è quella di lavoro (fuoco,
       selezione, bordi attivi), 5 chiude il giro. Tutte leggibili come
       testo sul bianco. */
    --color-aurora-peach: #192d6e;
    /* navy        11.0:1 */
    --color-aurora-pink: #1b4a9c;
    /* royal        6.8:1 */
    --color-aurora-violet: #0054be;
    /* blu lavoro   5.6:1 */
    --color-aurora-mint: #0f6f9e;
    /* petrolio     4.9:1 */
    --color-aurora-sky: #3a5a8c;
    /* acciaio      5.9:1 */

    /* Lo spettro — il chrome del sistema: fili fra le sezioni, barre
       delle card, bordi in gradiente, toggle. Qui non ci va testo
       sopra, quindi può arrivare fino all'azzurro pieno. */
    --gradient-aurora-spectrum: linear-gradient(to right, #192d6e 0%, #1b4a9c 28%, #0a5cb8 56%, #1483cf 80%, #1e96d7 100%);

    /* La faccia della pill primaria. Volutamente NON lo spettro: lì
       l'ultima fermata è #1e96d7 e sotto un'etichetta bianca sta a
       2.9:1. Questa rampa resta tutta sotto il 5:1, così il testo
       bianco regge su tutta la larghezza del bottone. */
    --gradient-cta-blue: linear-gradient(104deg, #15296a 0%, #10307d 26%, #0a4aa6 62%, #0f63bd 100%);

    /* Le frasi in evidenza sono TESTO alla scala del display: la rampa
       parte navy e arriva all'azzurro solo sull'ultima lettera. */
    --gradient-aurora-headline: linear-gradient(100deg,
            #13275f 0%,
            #17408a 22%,
            #0a53ae 48%,
            #0c6cc2 74%,
            #1a8ccd 100%);

    /* ─── Superfici ───────────────────────────────────────────────────
       La gerarchia del tema chiaro, spostata sul blu: il canvas è una
       carta appena azzurrata, le bande (striscia, footer, barra fissa,
       piastre bonus) sono azzurro pieno chiaro, le card restano BIANCHE
       e per questo si staccano da sole, senza bordi accesi. È il
       rapporto bianco-su-azzurro del sito di riferimento. */
    --surface-page-void: #f4f7fb;
    --surface-nav-ink: #eaf2fa;
    --surface-recess-black: #ffffff;
    --surface-console-charcoal: #ffffff;
    --surface-true-black: #ffffff;

    /* I bordi in gradiente vanno ridichiarati con le superfici nuove:
       il var() dentro una custom property si risolve dove la property
       è dichiarata. */
    --border-aurora-recess: linear-gradient(var(--surface-recess-black), var(--surface-recess-black)) padding-box, var(--gradient-aurora-spectrum) border-box;
    --border-aurora-charcoal: linear-gradient(var(--surface-console-charcoal), var(--surface-console-charcoal)) padding-box, var(--gradient-aurora-spectrum) border-box;
    --border-aurora-ink: linear-gradient(var(--surface-nav-ink), var(--surface-nav-ink)) padding-box, var(--gradient-aurora-spectrum) border-box;

    /* Raggio delle card: 10px, la misura del riferimento. La pill
       resta a 100px, che lì sono 600px — oltre il mezzo cerchio non
       cambia niente. */
    --radius-xl: 10px;

    /* ─── Rilievo: spento ─────────────────────────────────────────────
       La pill non ha più spessore (vedi §07) e i titoli non hanno più
       fianco (§02). I token restano dichiarati, in blu, perché
       qualunque regola dei fogli sotto li legga non trovi un viola. */
    --btn-edge-1: #2b4f9e;
    --btn-edge-2: #1f3f85;
    --btn-edge-3: #16306b;
    --btn-edge-4: #0f2250;
    --title-edge-1: #d6e0f0;
    --title-edge-2: #d6e0f0;
    --title-edge-3: #d6e0f0;
    --title-edge-4: #d6e0f0;
    --title-edge-5: #d6e0f0;
    --title-edge-6: #d6e0f0;
    --title-edge-7: #d6e0f0;
    /* Un filtro che non fa niente, non "none": nei fogli sotto il token
       sta dentro una lista di filter (`var(--title-extrude)
       drop-shadow(…)`), e un `none` in mezzo a una lista la rende
       invalida. Così quelle regole restano valide e sono i `filter:
       none` qui sotto a spegnerle, nel modo esplicito. */
    --title-extrude: drop-shadow(0 0 0 transparent);

    /* L'unica ombra del sistema, con la nota fredda del blu */
    --shadow-subtle: rgba(16, 32, 70, 0.08) 0px 1px 3px 0px, rgba(16, 32, 70, 0.06) 0px 1px 2px -1px;
}


/* ═══ 02 · RESET E BASE ═══════════════════════════════════════════════ */

/* La faccia dei titoli "pieni": navy. Resta una curva verticale
   minima — appena un grado di luce in cima — perché un titolo da 72px
   in flat assoluto legge stampato; ma è una variazione di luminosità,
   non un rilievo. */
.hero__title-lead,
.hero__title-mid,
.hero__title-big,
.section-title,
.signup__title,
.ty-alert__title,
.ty-step__title,
.title-line {
    background-image: linear-gradient(to bottom,
            #22397d 0%,
            #1b2f6c 48%,
            #15255a 100%);
}

/* Le frasi in evidenza tornano in gradiente. Come in light.css questo
   gruppo deve stare DOPO la rampa dei titoli pieni, o .title-em e
   .hero__title-big--em uscirebbero navy come le altre righe. */
.aurora-text,
.title-em,
.hero__title-big--em,
.hero__sub-big,
.ty-alert__kw,
.ty-cal__num {
    background-image: var(--gradient-aurora-headline);
}

/* ─── I titoli si appiattiscono ───────────────────────────────────────
   Via l'estrusione a 7 gradini, via il contatto a terra, via l'alone.
   Qui il titolo è inchiostro su carta: tutto il peso lo porta il corpo
   del carattere. È la differenza fra una landing e una pagina di
   banca, ed è una riga di CSS. */
.hero__title-lead,
.hero__title-mid,
.hero__title-big,
.section-title,
.signup__title,
.ty-alert__title,
.ty-step__title,
.aurora-text,
.hero__sub-big,
.ty-cal__num,
.title-line,
.title-em,
.hero__title-big--em {
    filter: none;
}

/* La selezione: blu di lavoro pieno, testo bianco */
::selection {
    background: var(--color-aurora-violet);
    color: #ffffff;
}

/* Il fuoco da tastiera: lo stesso blu, ma spesso 2px e staccato — su
   un modulo bancario il fuoco deve essere il segnale più forte della
   pagina dopo la CTA. */
:focus-visible {
    outline: 2px solid var(--color-aurora-violet);
    outline-offset: 2px;
}


/* ═══ 03 · LAYOUT E DIVISORI ══════════════════════════════════════════ */

/* Il filo fra le sezioni: resta lo spettro — è il legame fra tutte le
   bande del sistema — ma scende al peso di una riga di separazione.
   Al 75% del tema chiaro, in blu pieno, diventava un bordo colorato. */
.section+.section::before,
.ty-main::before,
.footer::before {
    opacity: 0.3;
}


/* ═══ 04 · DECORAZIONI ════════════════════════════════════════════════ */

/* La griglia blueprint prende la nota navy: resta texture, non diventa
   carta millimetrata. */
.grid-bg {
    background-image:
        linear-gradient(to right, rgba(25, 45, 110, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(25, 45, 110, 0.05) 1px, transparent 1px);
}

/* "La macchina per guadagnare" (js/hero-bg.js) ha la sua palette
   scritta nel JS, nelle 5 fermate pastello del tema scuro. Il JS è
   condiviso con index.html e index-light.html, quindi non si tocca: il
   canvas viene portato in blu in composizione.

   La catena, nell'ordine: invert(1) porta le hairline chiare su fondo
   trasparente a hairline scure (l'alpha di ogni tratto non si muove);
   grayscale(1) azzera le 5 tinte, che qui non servono più; sepia(1)
   ridà una tinta sola, calda; hue-rotate(186deg) la gira dal bruno al
   blu; saturate(3.2) la riporta a colore pieno — il sepia da solo è
   una velatura — e brightness(0.52) la porta al livello dell'inchio-
   stro della pagina. Esce un disegno tecnico navy monocromo, che è
   esattamente quello che deve essere: lo sfondo, non un soggetto.

   In coda un drop-shadow a offset e sfocatura zero, in royal: non è
   un'ombra, è una copia piena della sagoma messa esattamente dietro di
   sé. Serve perché il canvas disegna fra il 10% e il 30% di alpha, e a
   quell'alpha qualunque tinta, sul bianco, legge grigia — la macchina
   usciva color matita invece che blu. La copia porta l'opacità
   composita dove il blu si vede. Una sola, non due o tre: oltre la
   prima, l'alone radiale dietro agli ingranaggi si impasta e diventa
   una nuvola grigia in mezzo alla hero. */
.hero-machine {
    filter: invert(1) grayscale(1) sepia(1) hue-rotate(176deg) saturate(3.2) brightness(0.52) drop-shadow(0 0 0 #1b4a9c);
    opacity: 0.95;
}

@media (max-width: 767px) {
    .hero-machine {
        opacity: 0.3;
    }
}

/* Il velo sotto la colonna del testo, al colore del canvas nuovo */
.hero::after {
    background: linear-gradient(to right, rgba(244, 247, 251, 0.82) 0%, rgba(244, 247, 251, 0.5) 45%, rgba(244, 247, 251, 0) 80%);
}

/* ─── Aurora flottante, in una sola famiglia ──────────────────────────
   Gli aloni restano cinque e restano in movimento, ma sono cinque
   gradini di blu invece di cinque tinte, e a un terzo dell'intensità
   del tema chiaro. Il loro lavoro qui non è tingere la pagina: è
   togliere al bianco la piattezza dello foglio di Word. */
.page-aurora__orb--peach {
    --orb-rgb: 25, 45, 110;
    --orb-core: 0.1;
}

.page-aurora__orb--pink {
    --orb-rgb: 27, 74, 156;
    --orb-core: 0.1;
}

.page-aurora__orb--violet {
    --orb-rgb: 0, 84, 190;
    --orb-core: 0.09;
}

.page-aurora__orb--mint {
    --orb-rgb: 30, 150, 215;
    --orb-core: 0.13;
}

.page-aurora__orb--sky {
    --orb-rgb: 90, 130, 190;
    --orb-core: 0.1;
}


/* ═══ 05 · TOP BAR ════════════════════════════════════════════════════ */

/* La banda è azzurra sul canvas quasi bianco: lo stacco ce l'ha già,
   l'ombra torna a essere un filo. */
.top-bar {
    box-shadow: 0 1px 2px rgba(16, 32, 70, 0.05);
}

.top-bar::after {
    opacity: 0.45;
}

/* ─── Il pallino "in diretta" ─────────────────────────────────────────
   L'UNICA eccezione alla famiglia blu di questa pagina, insieme al
   check verde di conferma (§15). "In diretta" è uno stato, non una
   decorazione, e un pallino blu che pulsa in mezzo a una pagina blu non
   dice niente. Il rosso è quello della loro palette (#e63241), non un
   rosso qualunque, e sta su 6px: un segnale, non un accento. */
.live-dot {
    background: #e63241;
    box-shadow: 0 0 0 3px rgba(230, 50, 65, 0.16);
}


/* ═══ 06 · HERO + VSL ═════════════════════════════════════════════════ */

/* Il riquadro del video: l'ombra portata di una lastra sul foglio,
   con la nota blu dell'ambiente. */
.vsl__frame {
    box-shadow:
        0 1px 2px rgba(16, 32, 70, 0.06),
        0 24px 56px -28px rgba(16, 40, 100, 0.3);
}

/* Il tasto play prende la faccia della CTA, non lo spettro: è un
   bottone, e l'icona sopra è bianca. */
.vsl__play {
    background: var(--gradient-cta-blue);
    color: #ffffff;
    box-shadow: 0 10px 28px -10px rgba(10, 74, 166, 0.5);
}


/* ═══ 07 · BOTTONI E BLOCCHI CTA ══════════════════════════════════════ */

/* ─── La pill, da oggetto a superficie ────────────────────────────────
   Il tema scuro costruiva la CTA come un oggetto solido: faccia
   bombata, quattro gradini di fianco estruso, contatto a terra, alone,
   e un rimbalzo periodico (§18). Funziona, ed è esattamente ciò che una
   pagina istituzionale non fa.

   Qui la pill è una superficie blu piena con il raggio pieno, testo
   bianco semibold, e una sola ombra portata — morbida e azzurra, come
   se il bottone fosse appena sollevato dalla carta. Lo spessore va a
   zero (--btn-depth-base: 0) e con lui sparisce l'affondamento al
   click; il rimbalzo si spegne in §18. Resta la mano: al hover il
   gradiente scorre (background-position, già nel sistema), l'ombra si
   allunga e la freccia avanza di 4px. */
.btn--cta {
    --btn-depth-base: 0px;
    --btn-depth: 0px;
    --bounce-lift: 0px;
    background: var(--gradient-cta-blue);
    background-size: 160% 100%;
    background-position: 0% 50%;
    color: #ffffff;
    box-shadow:
        0 1px 2px rgba(16, 32, 70, 0.14),
        0 12px 28px -14px rgba(10, 60, 160, 0.55);
}

/* La lama di luce resta, ma come riflesso di una superficie opaca:
   il 42% del tema scuro su una faccia blu scura fa un velo lattiginoso
   in cima al bottone. */
.btn--cta::after {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.05) 34%,
            rgba(255, 255, 255, 0) 60%);
}

.btn--cta:hover,
.btn--cta:focus-visible {
    --btn-depth: 0px;
    background-position: 100% 50%;
    transform: translate3d(0, -2px, 0);
    box-shadow:
        0 2px 4px rgba(16, 32, 70, 0.16),
        0 20px 40px -16px rgba(10, 60, 160, 0.6);
}

/* Premuto: il bottone appoggia. Niente affondamento di 7px — non c'è
   più niente da affondare — ma la pressione si sente. */
.btn--cta:active {
    --btn-depth: 0px;
    transform: translate3d(0, 1px, 0);
    transition-duration: 0.06s;
    box-shadow:
        inset 0 2px 6px rgba(8, 24, 60, 0.3),
        0 1px 2px rgba(16, 32, 70, 0.14);
}

/* L'azione secondaria: filo blu su carta bianca, testo navy */
.btn--ghost {
    background: #ffffff;
    border: 1px solid var(--color-aurora-violet);
    color: var(--color-aurora-violet);
}

.btn--ghost:hover {
    background: #f1f7fd;
    box-shadow: 0 0 0 3px rgba(0, 84, 190, 0.12);
}

/* L'alone dietro al blocco CTA: una sola sorgente azzurra, tenuta
   bassa. Le tre macchie di colore del tema chiaro, in blu, diventavano
   una nuvola sotto al bottone. */
.cta-block::before {
    background: radial-gradient(50% 60% at 50% 42%, rgba(30, 150, 215, 0.16), transparent 72%);
}

/* L'evidenziazione inline (.hl): non è nel markup di questa pagina, ma
   è un componente del sistema. Prende la faccia della CTA invece dello
   spettro: sull'ultima fermata dello spettro (#1e96d7) il testo bianco
   a corpo di lettura starebbe a 2.9:1. */
.hl {
    background: var(--gradient-cta-blue);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}


/* ═══ 10 · CHECK LIST ═════════════════════════════════════════════════ */

/* L'alone dietro la scena attiva: lo spettro blu pieno pesa più dei
   pastelli, e di questo layer si vede solo quello che sborda. */
.check-card--media.is-active::before {
    opacity: 0.3;
}

.check-card__media {
    box-shadow: 0 1px 2px rgba(16, 32, 70, 0.06), 0 16px 32px -26px rgba(16, 32, 70, 0.4);
}

/* Il cerchio del check: il tema chiaro ci metteva inchiostro scuro con
   il segno bianco, leggendo --color-nav-ink come "scuro". Qui nav-ink è
   diventato BIANCO (§01): senza questa regola sarebbe un disco bianco
   con un segno bianco. Disco navy, segno bianco. */
.check-card__ico {
    background: var(--color-aurora-peach);
    color: #ffffff;
}


/* ═══ 11 · SERATE ═════════════════════════════════════════════════════ */

/* Le piastre: carta bianca sul canvas azzurro, barra di stato blu sul
   fianco (arriva dalle fermate, §01), filo chiaro e ombra portata.
   Qui si riscrivono solo alone e velatura, che erano tarati su tinte
   diverse per ogni serata: ora sono quattro gradini dello stesso blu. */
.night {
    --n-glow: rgba(25, 45, 110, 0.26);
    --n-tint: rgba(25, 45, 110, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(16, 32, 70, 0.04),
        inset 12px 0 22px -18px var(--n-glow),
        0 1px 2px rgba(16, 32, 70, 0.05),
        0 20px 44px -34px rgba(16, 32, 70, 0.45);
}

.night::before {
    background-image:
        linear-gradient(to right, rgba(25, 45, 110, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(25, 45, 110, 0.05) 1px, transparent 1px);
}

.night:not(.night--star):hover {
    border-color: var(--color-ash);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(16, 32, 70, 0.04),
        inset 16px 0 28px -18px var(--n-glow),
        0 2px 4px rgba(16, 32, 70, 0.06),
        0 28px 56px -34px rgba(16, 32, 70, 0.5),
        0 0 42px -22px var(--n-glow);
}

.night:nth-child(2) {
    --n-glow: rgba(27, 74, 156, 0.26);
    --n-tint: rgba(27, 74, 156, 0.05);
}

.night:nth-child(3) {
    --n-glow: rgba(0, 84, 190, 0.26);
    --n-tint: rgba(0, 84, 190, 0.05);
}

.night:nth-child(4) {
    --n-glow: rgba(15, 111, 158, 0.26);
    --n-tint: rgba(15, 111, 158, 0.05);
}

/* ─── Gli oggetti 3D delle serate ─────────────────────────────────────
   I quattro PNG (cervello, ospiti, stampa-soldi, domande) sono
   renderizzati nei pastelli dell'aurora: lasciati così, in mezzo al blu
   leggono come residui di un altro tema — ed erano l'ultima cosa
   colorata rimasta nella pagina. Non si rifanno, si portano in famiglia
   con la stessa catena del canvas della hero (§04): grayscale toglie le
   cinque tinte, sepia ne rimette una sola, hue-rotate la gira sul blu,
   saturate le ridà corpo. Volume, luci e riflessi del render restano
   intatti: cambia la tinta, non la forma. Il drop-shadow deve stare
   nella stessa catena, o la sagoma perderebbe l'appoggio. */
.night__ico img {
    filter: grayscale(1) sepia(1) hue-rotate(176deg) saturate(2.6) brightness(0.95) drop-shadow(0 14px 16px rgba(16, 32, 70, 0.18));
}

.night:hover .night__ico img {
    filter: grayscale(1) sepia(1) hue-rotate(176deg) saturate(2.6) brightness(0.95) drop-shadow(0 22px 24px rgba(16, 32, 70, 0.22));
}

.night__ico::before {
    opacity: 0.3;
}

.night:hover .night__ico::before {
    opacity: 0.55;
}

/* La serata chiave (l'estrazione): il bordo in gradiente blu resta il
   segnale, l'alone passa all'azzurro. */
.night--star {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 44px -6px rgba(30, 150, 215, 0.18),
        0 1px 2px rgba(16, 32, 70, 0.05),
        0 20px 44px -34px rgba(16, 32, 70, 0.45);
}

.night--star:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 64px -4px rgba(30, 150, 215, 0.26),
        0 1px 2px rgba(16, 32, 70, 0.06),
        0 28px 56px -34px rgba(16, 32, 70, 0.5);
}


/* ═══ 12 · BONUS ══════════════════════════════════════════════════════ */

/* Le piastre bonus restano un gradino sotto le serate: lì carta
   bianca, qui la superficie azzurra delle bande (#eaf2fa), con la
   barra blu in testa invece che sul fianco. */
.bonus-card {
    --b-glow: rgba(30, 150, 215, 0.26);
    --b-tint: rgba(30, 150, 215, 0.06);
    box-shadow:
        inset 0 -1px 0 rgba(16, 32, 70, 0.04),
        inset 0 16px 28px -24px var(--b-glow),
        0 1px 2px rgba(16, 32, 70, 0.04),
        0 20px 44px -34px rgba(16, 32, 70, 0.45);
}

.bonus-card::before {
    background-image:
        linear-gradient(to right, rgba(25, 45, 110, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(25, 45, 110, 0.05) 1px, transparent 1px);
}

.bonus-card:hover {
    border-color: var(--color-ash);
    box-shadow:
        inset 0 -1px 0 rgba(16, 32, 70, 0.04),
        inset 0 22px 34px -24px var(--b-glow),
        0 2px 4px rgba(16, 32, 70, 0.05),
        0 28px 56px -34px rgba(16, 32, 70, 0.5),
        0 0 42px -22px var(--b-glow);
}

.bonus-card:nth-child(2) {
    --b-glow: rgba(0, 84, 190, 0.24);
    --b-tint: rgba(0, 84, 190, 0.05);
}

/* Il medaglione: disco bianco col filo blu, sulla piastra azzurra */
.bonus-card__medal {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(145deg, var(--b-1), var(--b-2)) border-box;
    box-shadow:
        0 0 20px -8px var(--b-glow),
        0 8px 16px -12px rgba(16, 32, 70, 0.35);
}

.bonus-card:hover .bonus-card__medal {
    box-shadow:
        0 0 28px -6px var(--b-glow),
        0 12px 20px -12px rgba(16, 32, 70, 0.4);
}


/* ═══ 13 · FAQ ════════════════════════════════════════════════════════ */

/* Il filo sopra la domanda aperta: nel tema scuro è un arcobaleno che
   cammina da sinistra a destra. Una pagina che parla di soldi non ha
   niente che cammina: resta una riga navy → azzurro, ferma, che dice
   solo "questa è aperta". */
.faq__item::before {
    background-image: linear-gradient(90deg, #192d6e 0%, #0a5cb8 55%, #1e96d7 100%);
}

.faq__item[open]::before {
    animation: none;
    opacity: 0.9;
}

/* Il toggle "+" aperto è una pastiglia piena: faccia della CTA e segno
   bianco, come il tasto play. */
.faq__item[open] .faq__toggle {
    background: var(--gradient-cta-blue);
    color: #ffffff;
}


/* ═══ 14 · FOOTER ═════════════════════════════════════════════════════ */

/* Il footer è una banda azzurra come la striscia in testa: la pagina si
   chiude dove si era aperta. Lo porta --surface-nav-ink (§01), qui
   resta solo il filo d'ombra che la stacca dal contenuto. */
.footer {
    box-shadow: inset 0 1px 0 rgba(16, 32, 70, 0.04);
}


/* ═══ 15 · MODALE + FORM ══════════════════════════════════════════════ */

/* Il fondo della modale torna scuro — navy, non nero. Sulla pagina
   chiara il velo bianco del tema chiaro non isolava il form: si vedeva
   la pagina attraverso, e il modulo galleggiava. Un velo navy sfocato
   spegne la pagina e lascia davanti una cosa sola. */
.modal__backdrop {
    background:
        radial-gradient(130% 90% at 50% -10%, rgba(30, 150, 215, 0.2), transparent 62%),
        rgba(10, 22, 52, 0.52);
}

/* La lastra: bianca, piena, con una velatura azzurra agli angoli e
   un'ombra profonda. Niente vetro fumé, niente cristallo: un pannello.
   È il modulo di una banca, e si legge. */
.modal__dialog {
    background:
        radial-gradient(120% 70% at 12% 0%, rgba(30, 150, 215, 0.1), transparent 58%),
        radial-gradient(100% 60% at 92% 104%, rgba(0, 84, 190, 0.07), transparent 60%),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 32px 70px -22px rgba(8, 20, 50, 0.4),
        0 0 0 1px rgba(16, 32, 70, 0.06);
}

/* Il bordo in gradiente resta, al peso di un filo */
.modal__dialog::before {
    opacity: 0.45;
}

/* Sulla lastra bianca piena la lama di luce non ha niente da fare */
.modal__dialog::after {
    background: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal__backdrop {
        background: rgba(10, 22, 52, 0.78);
    }

    .modal__dialog {
        background: #ffffff;
    }
}

.signup--modal {
    scrollbar-color: rgba(16, 32, 70, 0.22) transparent;
}

.signup--modal::-webkit-scrollbar-thumb {
    background: rgba(16, 32, 70, 0.22);
}

/* La pastiglia di chiusura: azzurro chiaro, segno navy */
.modal__close {
    background: #eef4fb;
    border: 1px solid rgba(16, 32, 70, 0.1);
    color: var(--color-aurora-peach);
    box-shadow: none;
}

.modal__close:hover {
    background: rgba(0, 84, 190, 0.1);
    border-color: var(--color-aurora-violet);
    color: var(--color-aurora-violet);
}

/* ─── I campi ─────────────────────────────────────────────────────────
   Incavo bianco in un filo chiaro; al fuoco il bordo diventa blu e
   intorno compare l'anello. Su un modulo è l'unica animazione che
   serve: dire dove sta il cursore. */
.field__box {
    background: #ffffff;
    border-color: var(--color-wire-gray);
}

.field__box:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 84, 190, 0.14);
}

.signup--modal .field__box {
    background: #ffffff;
    border-color: #d1d8e6;
    box-shadow: none;
}

.signup--modal .field__box:focus-within {
    background: #ffffff;
    border-color: var(--color-aurora-violet);
    box-shadow:
        0 0 0 3px rgba(0, 84, 190, 0.16),
        inset 0 1px 2px rgba(16, 32, 70, 0.04);
}

/* Il check di conferma: verde, l'altro colore di stato della palette
   (#00a046). Un check blu in mezzo a una pagina blu non dice "fatto". */
.form-success__icon {
    background: #00a046;
    color: #ffffff;
}

/* intl-tel-input: la tendina dei paesi è una superficie del sistema */
.iti__country.iti__highlight {
    background: #eef4fb;
}

.iti__country-list {
    box-shadow: 0 18px 40px -24px rgba(16, 32, 70, 0.35);
}


/* ═══ 16 · STICKY CTA (mobile) ════════════════════════════════════════ */

.sticky-cta {
    box-shadow: 0 -10px 28px -18px rgba(16, 32, 70, 0.35);
}

/* Nella barra fissa style.css riabbassa lo spessore a 5px con un
   selettore più specifico (.sticky-cta .btn--block): qui lo spessore
   non esiste più, e va azzerato anche lì. */
.sticky-cta .btn--block {
    --btn-depth-base: 0px;
    --btn-depth: 0px;
    --bounce-lift: 0px;
}


/* ═══ 17 · PAGINA GRAZIE ══════════════════════════════════════════════ */

/* Vale solo se il tema blu arriva anche su grazie.html. I numeri dei
   passi sono pastiglie piene nelle fermate: in blu ci vuole il bianco
   sopra (lo porta già light.css, qui si conferma col nuovo nav-ink). */
.ty-step__n {
    color: #ffffff;
}

/* WhatsApp resta verde: è il colore del servizio, non del tema. Si
   usa il verde della palette di riferimento (#00a046), lo stesso del
   check di conferma. */
.btn--wa {
    background: #00a046;
    color: #ffffff;
    box-shadow: var(--shadow-subtle), 0 10px 28px -12px rgba(0, 160, 70, 0.4);
}

.btn--wa:hover {
    background: #008a3c;
    box-shadow: var(--shadow-subtle), 0 14px 34px -12px rgba(0, 160, 70, 0.5);
}

.ty-media {
    box-shadow: 0 1px 2px rgba(16, 32, 70, 0.06), 0 16px 32px -26px rgba(16, 32, 70, 0.4);
}


/* ═══ 18 · MICRO-ANIMAZIONI ═══════════════════════════════════════════ */

/* ─── Il rimbalzo si ferma ────────────────────────────────────────────
   Il salto periodico della CTA (squash & stretch, §18 di style.css) è
   la cosa più lontana da una pagina istituzionale che ci sia in questo
   sistema: va spento alla radice, non nascosto. Il richiamo, qui, lo fa
   il contrasto — l'unica superficie blu piena della pagina — e la
   ripetizione del blocco quattro volte lungo lo scroll. */
.cta-block .btn--cta,
.sticky-cta .btn--cta {
    animation: none;
}