/* ==========================================================================
   LANCIO Q4 2026 — Opt-in + thank you
   Foglio di stile unico, mobile-first.

   PRINCIPI
   · Nessuna altezza fissa sui blocchi di testo: il copy cambierà.
   · Ogni sezione è un modulo indipendente (.section + variante di sfondo):
     si possono spostare, duplicare o eliminare senza toccare il CSS.
   · Colori, raggi e spaziature stanno tutti nei token (01): per cambiare
     l'identità basta intervenire lì.

   INDICE
   01. Token
   02. Reset e base
   03. Layout: wrap, sezioni, varianti di sfondo
   04. Tipografia di sezione
   05. Top bar
   06. Hero
   07. VSL
   08. Bottoni e blocco CTA
   09. Form opt-in
   10. Componenti narrativi (alert, check, timeline, chips, versus…)
   11. Slot immagine (media-slot)
   12. Testimonianze
   13. FAQ
   14. Bio
   15. Footer
   16. Modale
   17. Sticky CTA mobile
   18. Microanimazioni
   19. Override intl-tel-input
   20. Thank you page
   21. Breakpoint
   22. HUD chiaro (sezioni sotto la hero) + fondale generativo chiaro
   ========================================================================== */


/* ── 01. TOKEN ─────────────────────────────────────────────────────────── */
:root {
    /* Base scura (grafite, come la hero) */
    --dark-0: #08090A;
    --dark-1: #0E1110;
    --dark-2: #141816;
    --dark-line: rgba(255, 255, 255, .1);
    --on-dark: #F2F7F5;
    --on-dark-muted: #9AA59F;

    /* Base chiara */
    --white: #FFFFFF;
    --soft: #F4F7F5;
    --soft-2: #EAF0ED;
    --line: #DFE7E3;
    --ink: #0B1210;
    --body: #2B3733;
    --muted: #5F6D68;

    /* Accento verde: stessa famiglia del neon della hero. Su fondo chiaro
       --accent / --accent-deep per linee e testi (contrasto), il neon
       pieno (--grad-accent) solo come riempimento con testo scuro sopra. */
    --accent: #22B84A;
    --accent-2: #1A9F3F;
    --accent-deep: #0E7A2E;
    --accent-ink: #041A08;
    --accent-soft: #EDFBEC;
    --accent-line: #BDEFC3;
    --accent-rgb: 34, 184, 74;
    --grad-accent: linear-gradient(135deg, #B4FDB2 0%, #8DFB8B 50%, #5FDA5D 100%);
    --grad-btn: linear-gradient(180deg, #B4FDB2 0%, #8DFB8B 45%, #5FDA5D 100%);

    /* Segnali (solo per contrasti "prima/dopo") */
    --neg: #F0616A;
    --neg-soft: #FDEEEF;
    --neg-line: #F7C9CC;
    --warn: #FFC043;
    --warn-soft: #FFF6E0;
    --warn-ink: #5B3F00;

    /* HUD (top bar + hero): grafite e verde neon, dal reference "control center" */
    --hud-0: #08090A;
    --hud-1: #0C0E0D;
    --hud-panel: rgba(16, 19, 18, .74);
    --hud-line: rgba(255, 255, 255, .11);
    --hud-text: #E3E9E6;
    --hud-dim: #9AA59F;
    --neon: #8DFB8B;
    --neon-rgb: 141, 251, 139;

    /* Raggi */
    /* Angoli squadrati, come i pannelli HUD della hero */
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 5px;
    --r-xl: 6px;
    --r-pill: 9999px;

    /* Ombre */
    --sh-1: 0 2px 10px rgba(7, 11, 10, .05);
    --sh-2: 0 10px 30px rgba(7, 11, 10, .08);
    --sh-3: 0 20px 50px rgba(7, 11, 10, .16);
    --sh-accent: 0 12px 30px rgba(var(--neon-rgb), .38);

    /* Layout */
    --w: 760px;
    --w-wide: 1120px;
    --pad-x: 18px;
    --sec-y: clamp(56px, 9vw, 104px);
    --gap: clamp(18px, 3vw, 26px);

    /* Tipografia */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Saira', 'Plus Jakarta Sans', system-ui, sans-serif;
    /* Su mobile corpo e card crescono con la larghezza dello schermo
       (≈22px e ≈21px a 390px, come la landing q3-2026-vinted); da 760px
       il corpo torna a 18px (sezione 21). */
    --fs-body: clamp(1.25rem, 5.65vw, 1.4rem);
    --fs-card: clamp(1.2rem, 5.35vw, 1.375rem);
    --fs-h2: clamp(1.65rem, 5.6vw, 2.6rem);

    /* Transizioni */
    --t-fast: .15s cubic-bezier(.4, 0, .2, 1);
    --t: .3s cubic-bezier(.4, 0, .2, 1);
}


/* ── 02. RESET E BASE ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Parole o URL più lunghi della riga vanno a capo invece di sforare:
       il copy definitivo potrebbe contenere termini lunghi. */
    overflow-wrap: break-word;
}

h1,
h2,
h3,
.btn__label,
.faq__q {
    overflow-wrap: anywhere;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

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

a {
    color: inherit;
}

strong,
b {
    font-weight: 800;
    color: var(--ink);
}

button,
input {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Testo letto dagli screen reader ma non mostrato */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.hl {
    background: linear-gradient(transparent 8%, rgba(var(--accent-rgb), .22) 8%, rgba(var(--accent-rgb), .22) 92%, transparent 92%);
    color: var(--accent);
    padding: 0 .12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* ── 03. LAYOUT ────────────────────────────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: calc(var(--w) + var(--pad-x) * 2);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

.wrap--wide {
    max-width: calc(var(--w-wide) + var(--pad-x) * 2);
}

.section {
    position: relative;
    padding: var(--sec-y) 0;
}

/* Ogni figlio diretto del wrap è distanziato dal precedente: nessun
   margine da ricordare sui singoli componenti. */
.section .wrap > * + * {
    margin-top: var(--gap);
}

.section--white {
    background: var(--white);
}

.section--light {
    background: var(--soft);
}

.section--tint {
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(var(--accent-rgb), .08), transparent 70%),
        var(--soft);
}

.section--dark {
    background: var(--dark-0);
    color: var(--on-dark-muted);
}

.section--dark strong,
.section--dark b {
    color: var(--on-dark);
}

/* Bagliore verde controllato + griglia tecnica sfumata */
.section--glow {
    background:
        radial-gradient(700px 380px at 50% -8%, rgba(var(--accent-rgb), .16), transparent 70%),
        var(--dark-0);
    isolation: isolate;
}

.section--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}

/* Stile HUD della hero (grafite, filo di luce neon in alto, matrice di
   punti sfumata) per le sezioni scure che "riprendono" la hero.
   Da abbinare alla classe .hud per avere anche il form HUD (09b). */
.section--hud {
    background:
        radial-gradient(ellipse 70% 30% at 50% 100%, rgba(var(--neon-rgb), .07), transparent 70%),
        linear-gradient(180deg, var(--hud-0) 0%, var(--hud-1) 100%);
    color: var(--hud-dim);
    isolation: isolate;
}

.section--hud strong,
.section--hud b {
    color: #fff;
}

.section--hud::before,
.section--hud::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

/* Filo luminoso + alone che scende dall'alto, come .hero::before */
.section--hud::before {
    top: 0;
    left: 0;
    right: 0;
    height: clamp(280px, 40vw, 480px);
    background:
        linear-gradient(90deg, transparent 8%, rgba(var(--neon-rgb), .85) 50%, transparent 92%) top / 100% 1px no-repeat,
        radial-gradient(40% 80px at 50% 0%, rgba(var(--neon-rgb), .34), transparent 100%),
        radial-gradient(60% 100% at 50% 0%, rgba(var(--neon-rgb), .17) 0%, rgba(var(--neon-rgb), .05) 50%, transparent 100%);
}

/* Matrice di punti, come il terreno della hero, sfumata verso il basso */
.section--hud::after {
    inset: 0;
    background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 80%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 80%);
}

.section--accent {
    background:
        radial-gradient(700px 360px at 0% 0%, rgba(255, 255, 255, .12), transparent 70%),
        linear-gradient(160deg, #0B3B28 0%, #06281B 100%);
    color: #CFE9DC;
}

.section--accent strong,
.section--accent b {
    color: #fff;
}


/* ── 04. TIPOGRAFIA DI SEZIONE ─────────────────────────────────────────── */
.section-head {
    text-align: center;
}

.section-head > * + * {
    margin-top: 12px;
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: balance;
}

.section-title strong {
    font-weight: inherit;
}

.section--dark .section-title,
.section--accent .section-title {
    color: #fff;
}

.section-kicker {
    font-size: clamp(1.05rem, 3.6vw, 1.25rem);
    line-height: 1.45;
    color: var(--muted);
    text-wrap: balance;
}

.section--dark .section-kicker {
    color: var(--on-dark-muted);
}

/* Testo narrativo a righe brevi: spazio tra le frasi, niente muro di testo */
.prose > * + * {
    margin-top: .8em;
}

.prose p {
    text-wrap: pretty;
}

.prose--emph p {
    font-size: 1.15em;
    color: var(--ink);
}

.quote-line {
    font-size: 1.15em;
    font-weight: 700;
    font-style: italic;
    color: var(--ink);
    padding-left: 14px;
    border-left: 3px solid var(--accent);
}

.shout {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 12vw, 4.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sign {
    font-weight: 800;
    font-size: 1.2em;
    color: #fff;
}


/* ── 05. TOP BAR ───────────────────────────────────────────────────────── */
/* Striscia HUD: etichette maiuscole spaziate, divisore verticale al posto
   del trattino (resta nel testo per gli screen reader). */
.top-bar {
    background: var(--hud-0);
    border-bottom: 1px solid var(--hud-line);
    color: var(--hud-text);
    padding: 11px var(--pad-x);
    text-align: center;
    font-family: var(--font-display);
}

.top-bar__line {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .9em;
    white-space: nowrap;
    /* Sempre su una riga: il testo scala con la viewport fino a .84rem */
    font-size: clamp(.6rem, 3vw, .84rem);
    font-weight: 500;
    font-stretch: 90%;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.top-bar__line strong {
    color: var(--neon);
    font-weight: 700;
    letter-spacing: .12em;
}

.top-bar__main {
    display: inline-flex;
    align-items: center;
    gap: .7em;
}

.top-bar__sep {
    width: 1px;
    height: 1.3em;
    background: rgba(255, 255, 255, .22);
    font-size: 0;
}

@media (max-width: 419px) {
    .top-bar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .top-bar__line {
        gap: .7em;
        letter-spacing: .06em;
    }
}

.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6);
    animation: live 1.8s ease-out infinite;
    flex-shrink: 0;
}

.top-bar .live-dot,
.hud .live-dot {
    --accent-rgb: var(--neon-rgb);
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--neon);
}

@keyframes live {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6);
    }

    70%,
    100% {
        box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0);
    }
}


/* ── 06. HERO ──────────────────────────────────────────────────────────── */
/* Stile HUD / control center: grafite, verde neon, font Saira.
   Lo sfondo animato è in js/hero-bg.js; il gradiente qui sotto è il
   fallback senza JS e il colore di base sotto il canvas. */
.hero {
    padding-top: clamp(20px, 3.5vw, 36px);
    padding-bottom: clamp(72px, 11vw, 128px);
    background:
        radial-gradient(ellipse 70% 32% at 50% 86%, rgba(var(--neon-rgb), .09), transparent 70%),
        linear-gradient(180deg, var(--hud-0) 0%, var(--hud-1) 100%);
    color: var(--hud-dim);
    font-family: var(--font-display);
    isolation: isolate;
    text-align: center;
}

/* Luce verde dall'alto: filo luminoso sotto la top bar + alone che scende
   dietro al primo pannello. Sta sopra al canvas e alla velatura (z-index 0),
   sotto ai contenuti (.wrap z-index 1). */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: clamp(280px, 40vw, 480px);
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 8%, rgba(var(--neon-rgb), .85) 50%, transparent 92%) top / 100% 1px no-repeat,
        radial-gradient(40% 80px at 50% 0%, rgba(var(--neon-rgb), .34), transparent 100%),
        radial-gradient(60% 100% at 50% 0%, rgba(var(--neon-rgb), .17) 0%, rgba(var(--neon-rgb), .05) 50%, transparent 100%);
}

.hero > .wrap {
    position: relative;
    z-index: 1;
}

/* Mobile: meno vuoto nel passaggio hero → prima sezione (sotto al form
   scuro e sopra al box ATTENZIONE) */
@media (max-width: 559px) {
    .hero {
        padding-bottom: 32px;
    }

    .hero + .section {
        padding-top: 32px;
    }
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* Il paesaggio sfuma verso i bordi alto e basso della sezione */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.hero__bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero__bg.is-ready .hero__bg-layer {
    opacity: 1;
}

/* Velatura dietro al testo: il paesaggio non disturba la lettura.
   Posizione e misure arrivano da js/hero-bg.js (riquadro del testo). */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(var(--veil-rx, 60%) var(--veil-ry, 30%) at 50% var(--veil-y, 25%),
            rgba(8, 9, 10, var(--veil-a, .88)) 0%,
            rgba(8, 9, 10, calc(var(--veil-a, .88) * .72)) 55%,
            transparent 100%),
        /* seconda velatura: testo sotto la VSL (.hero__desc) */
        radial-gradient(var(--veil2-rx, 1px) var(--veil2-ry, 1px) at 50% var(--veil2-y, -10px),
            rgba(8, 9, 10, var(--veil2-a, .85)) 0%,
            rgba(8, 9, 10, calc(var(--veil2-a, .85) * .72)) 55%,
            transparent 100%);
}

.hero .wrap > * + * {
    margin-top: 22px;
}

.hero strong,
.hero b {
    color: #fff;
}

/* Angoli a staffa verdi dei pannelli HUD */
.hero__pre::before,
.hero .vsl::before,
.ty-step .vsl::before,
.ty-step__n::before,
.hud .signup::before,
.bio__list li::before,
.btn--cta::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    --c: var(--neon);
    --l: 12px;
    --t: 2px;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
    background-repeat: no-repeat;
}

.hero__pre {
    position: relative;
    display: inline-block;
    padding: 10px 18px;
    font-size: clamp(.74rem, 2.9vw, .88rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hud-dim);
    text-wrap: balance;
    background: var(--hud-panel);
    border: 1px solid var(--hud-line);
    border-radius: 3px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hero__pre::before,
.ty-step__n::before {
    --l: 9px;
    --t: 1.5px;
}

.hero__pre strong {
    font-weight: 700;
}

.hero__title {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 30px !important;
    font-family: var(--font-display);
    text-transform: uppercase;
    color: #fff;
}

.hero__title-lead {
    font-size: clamp(.98rem, 3.9vw, 1.45rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .14em;
    color: var(--hud-text);
    text-wrap: balance;
}

/* Titolo a tutta larghezza, sempre su 2 righe. Il font-size esatto lo
   imposta js/main.js (initFitTitle) misurando la riga più lunga; il valore
   in cqi qui sotto è la stessa proporzione calcolata per Saira, così il
   primo render è già quasi identico (e resta valido senza JS). */
.hero__title-main {
    align-self: stretch;
    font-size: clamp(2.15rem, 10.6vw, 5.4rem);
    font-size: 13.7cqi;
    font-weight: 700;
    font-stretch: 92%;
    line-height: .96;
    letter-spacing: .005em;
    color: #fff;
    text-shadow: 0 0 44px rgba(var(--neon-rgb), .16);
}

.hero__title-line {
    display: block;
    width: max-content;
    max-width: none;
    margin: 0 auto;
    white-space: nowrap;
}

.hero__title-num {
    color: var(--neon);
    text-shadow: 0 0 22px rgba(var(--neon-rgb), .55), 0 0 70px rgba(var(--neon-rgb), .3);
}

.hero__sub {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(.94rem, 3.5vw, 1.18rem);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .05em;
    color: var(--hud-text);
    text-wrap: balance;
}

/* Evidenziatore = etichetta di stato HUD ("OPERATIONAL" nel reference) */
.hero .hl {
    color: var(--neon);
    background: rgba(var(--neon-rgb), .1);
    box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), .38);
    padding: .05em .4em;
    border-radius: 2px;
    text-shadow: 0 0 14px rgba(var(--neon-rgb), .45);
}

.hero__desc {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1rem, 3.7vw, 1.16rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--hud-dim);
    text-wrap: pretty;
}

.hero__desc strong {
    font-weight: 600;
}


/* ── 07. VSL ───────────────────────────────────────────────────────────── */
.vsl__frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .28), 0 24px 60px rgba(0, 0, 0, .55), 0 0 80px rgba(var(--accent-rgb), .12);
}

/* Solo il placeholder ha un rapporto proprio: lo snippet Vidalytics porta
   già il suo 16:9 (padding-top 56.25%). */
.vsl__placeholder {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .18), transparent 60%),
        linear-gradient(160deg, #111C18, #070B0A);
    color: var(--on-dark-muted);
}

.vsl__play {
    width: clamp(58px, 14vw, 84px);
    height: clamp(58px, 14vw, 84px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad-accent);
    color: var(--accent-ink);
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    box-shadow: var(--sh-accent);
}

.vsl__play svg {
    margin-left: 4px;
}

/* Poster facoltativo (asset VSL-01 / VSL-02) sotto al bottone play */
.vsl__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vsl__play {
    position: relative;
    z-index: 1;
}

/* VSL della hero: monitor HUD che "galleggia" sul nucleo dello sfondo */
.hero .vsl {
    position: relative;
    margin-top: clamp(32px, 5vw, 46px);
    padding: 8px;
    background: rgba(12, 15, 14, .8);
    border: 1px solid var(--hud-line);
    border-radius: 4px;
    box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .85);
}

.hero .vsl__frame,
.ty-step .vsl__frame {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(var(--neon-rgb), .2);
}

.hero .vsl__placeholder,
.ty-step .vsl__placeholder {
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--neon-rgb), .12), transparent 58%),
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 14px 14px,
        linear-gradient(160deg, #141816, #090B0A);
}

.hero .vsl__play,
.ty-step .vsl__play {
    background: rgba(var(--neon-rgb), .1);
    border: 1.5px solid var(--neon);
    color: var(--neon);
    box-shadow: 0 0 28px rgba(var(--neon-rgb), .35), inset 0 0 18px rgba(var(--neon-rgb), .18);
}

.hero .vsl__play::before,
.hero .vsl__play::after,
.ty-step .vsl__play::before,
.ty-step .vsl__play::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border: 1px solid rgba(var(--neon-rgb), .6);
    border-radius: 50%;
    animation: hud-ring 2.6s ease-out infinite;
}

.hero .vsl__play::after,
.ty-step .vsl__play::after {
    animation-delay: 1.3s;
}

/* Schermi stretti: la VSL occupa tutta la larghezza, quindi lo sfondo
   ha bisogno di due "finestre" per vedersi (js/hero-bg.js le misura e ci
   compone la scena): sopra al video l'orizzonte con le pale eoliche,
   sotto al video il nucleo con i cobot. */
@media (max-width: 1023px) {
    .hero .vsl {
        margin-top: clamp(68px, 18.5vw, 110px);
    }

    .hero .vsl + * {
        margin-top: clamp(72px, 19vw, 112px) !important;
    }
}

@keyframes hud-ring {
    from {
        transform: scale(1);
        opacity: .8;
    }

    to {
        transform: scale(1.9);
        opacity: 0;
    }
}


/* ── 08. BOTTONI E BLOCCO CTA ──────────────────────────────────────────── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 26px;
    border: 0;
    border-radius: var(--r-md);
    font-size: clamp(1.02rem, 4vw, 1.18rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* CTA principale: "tasto di comando" neon HUD, identico in tutta la pagina
   (hero, blocchi CTA, form, modale, barra fissa, thank you).
   · corpo neon con un riflesso che lo attraversa ogni pochi secondi
     (primo livello del background, animato con cta-shine);
   · freccia dentro un riquadro scuro, allineato a destra;
   · angoli a staffa esterni (::before, regola condivisa in 06) e alone
     neon che "respira" dietro al bottone (::after).
   Colore degli angoli: --cta-frame (neon sul fondo scuro, verde pieno
   sul fondo chiaro). Su mobile è volutamente grande. */
.btn--cta {
    --cta-frame: var(--neon);
    min-height: 96px;
    gap: 14px;
    padding: 20px 12px 20px 22px;
    border-radius: 6px;
    background:
        linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%) -150% 0 / 45% 100% no-repeat,
        linear-gradient(180deg, #C9FFC7 0%, #8DFB8B 42%, #55DA53 100%);
    color: #041A08;
    font-family: var(--font-display);
    /* Il font segue la larghezza del contenitore (cqi, vedi sotto): così
       "POSTO ALLA SERATA" sta su una riga anche nel form più stretto e
       l'etichetta resta su 2 righe al massimo. Prima riga = fallback per i
       browser senza container query. */
    font-size: clamp(1.15rem, 5.7vw, 1.6rem);
    font-size: clamp(1.05rem, calc(8.4cqi - 4px), 1.6rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.06;
    letter-spacing: .035em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        inset 0 -4px 0 rgba(12, 90, 24, .2),
        0 0 0 1px rgba(20, 110, 32, .55),
        0 18px 40px -12px rgba(var(--neon-rgb), .65);
    animation: cta-shine 4.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

.btn--cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        inset 0 -4px 0 rgba(12, 90, 24, .2),
        0 0 0 1px rgba(20, 110, 32, .7),
        0 22px 50px -12px rgba(var(--neon-rgb), .85);
}

.btn--cta:active {
    transform: translateY(1px);
    filter: brightness(.98);
}

.btn--cta::before {
    inset: -7px;
    --c: var(--cta-frame);
    --l: 14px;
}

.btn--cta::after {
    content: "";
    position: absolute;
    inset: 12px 8%;
    z-index: -1;
    border-radius: inherit;
    background: rgba(var(--neon-rgb), .6);
    filter: blur(24px);
    opacity: .35;
    pointer-events: none;
    animation: cta-glow 2.2s ease-in-out infinite alternate;
}

.btn--cta .btn__label {
    flex: 1;
}

/* Contenitori della CTA: danno la larghezza di riferimento ai cqi */
.optin-form,
.cta-block,
.sticky-cta,
.ty-cta {
    container-type: inline-size;
}

/* Riquadri di freccia e icona: tasti scuri con simbolo neon */
.btn--cta .btn__arrow,
.btn--cta .btn__ico,
.btn--wa .btn__arrow,
.btn--wa .btn__ico {
    width: 2.05em;
    height: 2.05em;
    padding: .5em;
    border-radius: 4px;
    background: #062410;
    color: var(--neon);
    font-size: 1em;
    box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), .3), 0 3px 10px rgba(4, 40, 12, .35);
}

.btn--cta:hover .btn__arrow,
.btn--wa:hover .btn__arrow {
    transform: none;
}

.btn--cta .btn__arrow use,
.btn--wa .btn__arrow use {
    transition: transform var(--t-fast);
}

.btn--cta:hover .btn__arrow use,
.btn--wa:hover .btn__arrow use {
    transform: translateX(3px);
}

/* Fondi chiari (sezioni, modale, card della thank you): angoli verde
   pieno, il neon sul bianco non si vede */
.section--light .btn--cta,
.section--white .btn--cta,
.section--tint .btn--cta,
.signup--modal .btn--cta,
.ty-cta .btn--cta {
    --cta-frame: var(--accent-2);
}

@keyframes cta-shine {
    0%,
    55% {
        background-position: -150% 0, 0 0;
    }

    85%,
    100% {
        background-position: 250% 0, 0 0;
    }
}

@keyframes cta-glow {
    to {
        opacity: .75;
        transform: scaleX(1.05);
    }
}

.btn__label {
    text-wrap: balance;
}

.btn__arrow {
    font-size: 1.15em;
    transition: transform var(--t-fast);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

.btn__ico {
    font-size: 1.3em;
}

/* Bottone non ancora configurato (thank you): visibile ma inerte */
.btn.is-disabled {
    opacity: .45;
    filter: grayscale(.35);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    animation: none;
}

.btn.is-disabled::before,
.btn.is-disabled::after {
    display: none;
}

/* Blocco CTA ripetuto: bottone + sottotitolo + nota posti limitati */
.cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-top: calc(var(--gap) * 1.6) !important;
}

/* margin-bottom: spazio per gli angoli a staffa sotto al bottone */
.cta-block .btn {
    width: 100%;
    max-width: 600px;
    margin-bottom: 8px;
}

.cta-sub {
    font-size: .95rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

.cta-note {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    text-align: center;
    opacity: .85;
}

.section--dark .cta-sub,
.section--dark .cta-note,
.section--accent .cta-sub,
.section--accent .cta-note {
    color: var(--on-dark-muted);
}


/* ── 09. FORM OPT-IN ───────────────────────────────────────────────────── */
.signup {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(22px, 5vw, 36px);
    box-shadow: var(--sh-3);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    color: var(--body);
    text-align: left;
}

/* Il pannello è sempre bianco: i testi sotto il bottone restano scuri
   anche quando il form sta in una sezione scura (hero, #gabriele). */
.signup .cta-sub,
.signup .cta-note {
    color: var(--muted);
}

/* Bordo superiore verde: firma visiva di tutti i pannelli form */
.signup::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--grad-accent);
}

.signup--inline {
    margin-top: calc(var(--gap) * 1.8) !important;
}

.signup--hero {
    margin-top: 30px !important;
}

.signup__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.signup__title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.01em;
}

.optin-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.field__box {
    position: relative;
}

.field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.15rem;
    display: flex;
    pointer-events: none;
}

.field input {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px 14px 44px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
    color: var(--ink);
    font-size: 1rem;           /* ≥16px: evita lo zoom automatico su iOS */
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.field--phone input {
    padding-left: 16px;
}

.field input::placeholder {
    color: #8A9792;
}

/* Placeholder lunghi ("Cellulare per ricevere bonus esclusivi..."): su
   mobile il testo suggerito è più piccolo e, se non ci sta, finisce con
   "…"; il testo digitato resta a 16px (niente zoom automatico su iOS). */
@media (max-width: 479px) {
    .field input {
        padding-right: 10px;
        text-overflow: ellipsis;
    }

    .field input::placeholder {
        font-size: .78rem;
    }
}

.field input:focus {
    outline: none;
    border-color: var(--accent-2);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18);
}

.field.has-error input {
    border-color: var(--neg);
    background: var(--neg-soft);
}

.field__error {
    font-size: .84rem;
    font-weight: 600;
    color: #C62E38;
    margin-top: 6px;
}

.field__error:empty {
    display: none;
}

.form-status {
    font-size: .9rem;
    font-weight: 600;
    color: #C62E38;
    background: var(--neg-soft);
    border: 1px solid var(--neg-line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    text-align: center;
}

/* Margini: spazio per gli angoli a staffa della CTA */
.optin-form .btn {
    margin-top: 10px;
    margin-bottom: 6px;
}

/* Stato di invio: etichetta attenuata, spinner al posto della freccia */
.btn__spinner {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(3, 38, 26, .25);
    border-top-color: var(--accent-ink);
    animation: spin .8s linear infinite;
}

.optin-form.is-submitting .btn {
    cursor: progress;
    filter: saturate(.8);
    transform: none;
    animation: none;
}

.optin-form.is-submitting .btn__label {
    opacity: .7;
}

.optin-form.is-submitting .btn__arrow {
    display: none;
}

.optin-form.is-submitting .btn__spinner {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.form-success {
    text-align: center;
    padding: 12px 0;
}

.form-success:focus {
    outline: none;
}

.form-success__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 1.6rem;
}

.form-success__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
}


/* ── 09b. FORM HUD (hero + #gabriele) ──────────────────────────────────── */
/* Stesso linguaggio di badge e VSL: pannello grafite traslucido, angoli a
   staffa verdi, etichette Saira maiuscole, campi scuri con focus neon.
   Si attiva con la classe .hud sulla sezione; il form della modale resta
   bianco. */
.hud .signup {
    max-width: 600px;
    padding: clamp(22px, 5vw, 36px) clamp(18px, 4.5vw, 34px);
    background: var(--hud-panel);
    border: 1px solid var(--hud-line);
    border-radius: 4px;
    box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .85);
    color: var(--hud-dim);
    font-family: var(--font);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Al posto della barra verde in alto: angoli a staffa (regola HUD sopra) */
.hud .signup::before {
    height: auto;
    border-radius: 0;
}

.hud .signup__head {
    margin-bottom: clamp(20px, 4vw, 28px);
}

.signup__title--big {
    font-size: clamp(1.55rem, 6.8vw, 2.3rem);
    font-weight: 800;
    font-stretch: 92%;
    line-height: 1.08;
    letter-spacing: .005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.hud .signup__title {
    color: #fff;
}

.hud .field label {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hud-dim);
}

.hud .field input {
    min-height: 56px;
    border: 1px solid var(--hud-line);
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    color: var(--hud-text);
}

.hud .field input::placeholder {
    color: #6E7A74;
}

/* Su mobile il pannello della hero usa parte del margine laterale (resta a
   10px dal bordo): più spazio per i placeholder lunghi. Il form finale no:
   resta allineato alle card della bio. */
@media (max-width: 479px) {
    .hero .signup {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.hud .field__icon {
    color: var(--hud-dim);
}

.hud .field input:hover {
    border-color: rgba(255, 255, 255, .2);
}

.hud .field input:focus {
    border-color: var(--neon);
    background: rgba(var(--neon-rgb), .05);
    box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .16), 0 0 22px rgba(var(--neon-rgb), .12);
}

/* Autocompletamento del browser: niente riquadro giallo/bianco sul campo scuro */
.hud .field input:-webkit-autofill,
.hud .field input:-webkit-autofill:hover,
.hud .field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hud-text);
    caret-color: var(--hud-text);
    box-shadow: inset 0 0 0 100px #151A18;
    transition: background-color 9999s;
}

.hud .field.has-error input {
    border-color: #FF6B75;
    background: rgba(240, 97, 106, .1);
}

.hud .field__error {
    color: #FF8A92;
}

.hud .form-status {
    color: #FFB3B8;
    background: rgba(240, 97, 106, .12);
    border-color: rgba(240, 97, 106, .4);
}

.hud .field--phone .iti__selected-dial-code {
    color: var(--hud-text);
}

.hud .field--phone .iti__arrow {
    border-top-color: var(--hud-dim);
}

.hud .field--phone .iti__arrow--up {
    border-top-color: transparent;
    border-bottom-color: var(--hud-dim);
}

.hud .field--phone .iti__selected-flag:hover,
.hud .field--phone .iti__selected-flag:focus {
    background-color: rgba(255, 255, 255, .05);
}

/* Il bottone è la CTA standard (08): qui solo lo spinner */
.hud .signup .btn__spinner {
    border-color: rgba(4, 26, 8, .25);
    border-top-color: #041A08;
}

.hud .signup .cta-sub {
    font-family: var(--font-display);
    color: var(--hud-dim);
}

.hud .signup .cta-note {
    font-family: var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6E7A74;
}

.hud .form-success__icon {
    background: rgba(var(--neon-rgb), .12);
    color: var(--neon);
}

.hud .form-success__title {
    color: #fff;
}


/* ── 10. COMPONENTI NARRATIVI ──────────────────────────────────────────── */

/* Box ATTENZIONE */
.alert-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--warn-soft);
    border: 1px solid #F5DD9E;
    border-left: 5px solid var(--warn);
    border-radius: var(--r-lg);
    padding: clamp(18px, 4vw, 26px);
    color: #3E3108;
    box-shadow: var(--sh-1);
}

.alert-box strong {
    color: #1F1702;
}

.alert-box__body {
    flex: 1;
    min-width: 0;
}

.alert-box__body > * + * {
    margin-top: 10px;
}

.alert-box__icon {
    font-size: 1.5rem;
    color: #D08A00;
    margin-top: 2px;
    display: flex;
}

/* Elenco "In questa serata scoprirai" */
.check-list {
    display: grid;
    gap: 12px;
}

.check-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--sh-1);
}

.check-card__ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--grad-accent);
    color: var(--accent-ink);
    font-size: 1rem;
}

/* Testi delle card: un gradino sopra al corpo, come nella landing vinted */
.check-card,
.alert-box__body,
.callout,
.versus__card,
.duo__item,
.signal,
.path,
.testimonial__body,
.faq__a {
    font-size: var(--fs-card);
}

/* Timeline delle rivoluzioni */
.timeline {
    position: relative;
    display: grid;
    gap: 12px;
}

/* Ogni rivoluzione: immagine in alto (colonna del testo), poi numero + frase.
   Il filo tra i numeri è disegnato a tratti dentro ogni voce (::before
   accanto all'immagine, ::after accanto a numero e frase), così resta
   continuo qualunque sia l'altezza dell'immagine. */
.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    row-gap: 14px;
    padding: 12px 16px 12px 0;
}

.timeline__item::before,
.timeline__item::after {
    content: "";
    grid-column: 1;
    justify-self: center;
    width: 2px;
    background: var(--accent);
}

/* accanto all'immagine: dal numero precedente (padding + gap della lista) */
.timeline__item::before {
    grid-row: 1;
    align-self: stretch;
    margin: -24px 0 -14px;
}

/* accanto a numero e frase: fino al fondo della voce */
.timeline__item::after {
    grid-row: 2;
    align-self: stretch;
    margin-bottom: -12px;
}

/* il filo parte dal primo numero e finisce sull'ultimo */
.timeline__item:first-child::before {
    content: none;
}

.timeline__item:first-child::after {
    align-self: end;
    height: calc(50% + 12px);
}

.timeline__item:last-child::after {
    align-self: start;
    height: 50%;
    margin-bottom: 0;
}

.timeline__n {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dark-0);
    color: var(--accent);
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line);
}

.timeline__item p {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--ink);
}

/* Immagine sopra a ogni rivoluzione (asset S-01…S-04) */
.timeline__media {
    grid-column: 2;
    grid-row: 1;
    border-radius: var(--r-md);
}

.timeline__n {
    grid-column: 1;
    grid-row: 2;
}

.timeline__item p {
    grid-column: 2;
    grid-row: 2;
}

/* Chips (elenchi brevi del copy: persone, spese) */
.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.chips li {
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent-deep);
    font-weight: 700;
}

.chips--cost li {
    background: var(--neg-soft);
    border-color: var(--neg-line);
    color: #A3232C;
}

/* Riquadro accento */
.callout {
    border-radius: var(--r-lg);
    padding: clamp(20px, 5vw, 30px);
}

.callout > * + * {
    margin-top: 10px;
}

.callout--accent {
    background: var(--dark-0);
    color: var(--on-dark-muted);
    background-image: radial-gradient(400px 200px at 0% 0%, rgba(var(--accent-rgb), .22), transparent 70%);
}

.callout__big {
    font-size: clamp(1.25rem, 4.6vw, 1.55rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

/* Testo + immagine affiancati (da tablet in su) */
.split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: center;
}

/* Se lo slot immagine è vuoto (nascosto) il testo occupa tutta la riga */
.split > * {
    flex: 1 1 300px;
    min-width: 0;
}

/* Due opzioni a confronto */
.versus {
    display: grid;
    gap: 12px;
}

.versus__card {
    position: relative;
    border-radius: var(--r-lg);
    padding: 20px 20px 20px 64px;
    border: 1px solid var(--dark-line);
    background: var(--dark-2);
    color: var(--on-dark);
    font-weight: 600;
}

.versus__card > * + * {
    margin-top: 8px;
}

.versus__ico {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 1.15rem;
}

.versus__card--up {
    border-color: rgba(var(--accent-rgb), .35);
    background: linear-gradient(160deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .03));
}

.versus__card--up .versus__ico {
    background: var(--grad-accent);
    color: var(--accent-ink);
}

.versus__card--down .versus__ico {
    background: rgba(240, 97, 106, .16);
    color: var(--neg);
}

.versus--light .versus__card {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--sh-1);
    font-weight: 500;
}

.versus--light .versus__card--up {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.versus--light .versus__card--down {
    background: var(--white);
    border-color: var(--neg-line);
}

/* Card con immagine al posto dell'icona: foto in alto a tutta larghezza */
.versus__card--media {
    padding: 20px;
}

.versus__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-md);
    box-shadow: 0 0 0 1px var(--lab-line);
}

.versus__media + p {
    margin-top: 14px;
}

/* Campanello d'allarme */
.alarm {
    border-radius: var(--r-lg);
    padding: clamp(20px, 5vw, 28px);
    border: 1px solid rgba(255, 192, 67, .35);
    background: rgba(255, 192, 67, .07);
    color: var(--on-dark);
}

.alarm > * + * {
    margin-top: 6px;
}

.alarm__lead {
    font-weight: 800;
    color: var(--warn);
    font-size: 1.1em;
}

/* Positivo / negativo */
.duo {
    display: grid;
    gap: 10px;
}

.duo__item {
    padding: 14px 18px;
    border-radius: var(--r-md);
    font-weight: 700;
    color: #fff;
}

.duo__item--pos {
    background: rgba(var(--accent-rgb), .14);
    border-left: 4px solid var(--accent);
}

.duo__item--neg {
    background: rgba(240, 97, 106, .12);
    border-left: 4px solid var(--neg);
}

/* Dichiarazione finale in citazione */
.statement {
    text-align: center;
    padding: clamp(24px, 6vw, 36px) clamp(18px, 5vw, 32px);
    border-radius: var(--r-xl);
    border: 1px solid var(--dark-line);
    background: var(--dark-1);
    color: var(--on-dark-muted);
    font-size: 1.08em;
}

.statement > * + * {
    margin-top: 6px;
}

.statement__strong {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--accent);
    padding: 6px 0;
}

/* Segnali quotidiani (costi) */
.signals {
    display: grid;
    gap: 12px;
}

.signal {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--neg);
    border-radius: var(--r-md);
    padding: 16px 18px;
    color: var(--ink);
    font-weight: 700;
    box-shadow: var(--sh-1);
}

.signal > * + * {
    margin-top: 4px;
    font-weight: 500;
    color: var(--body);
}

/* Segnale con immagine in alto (screenshot di un articolo: niente ritaglio) */
.signal__media {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 1px var(--lab-line);
}

.signal .signal__media + p {
    margin-top: 12px;
    font-weight: 700;
    color: var(--ink);
}

/* Domanda centrale */
.question {
    text-align: center;
    padding: clamp(24px, 6vw, 36px) 20px;
    border-radius: var(--r-xl);
    background: var(--dark-0);
    background-image: radial-gradient(420px 200px at 50% 0%, rgba(var(--accent-rgb), .22), transparent 70%);
    color: var(--on-dark-muted);
}

.question__big {
    font-size: clamp(1.7rem, 7vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 8px;
}

/* Due percorsi (prospera / resta fermo) */
.paths {
    display: grid;
    gap: 14px;
}

.path {
    border-radius: var(--r-xl);
    padding: clamp(20px, 5vw, 30px);
    border: 1px solid var(--line);
}

.path > * + * {
    margin-top: 10px;
}

.path__lead {
    font-size: 1.12em;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink);
}

.path__list {
    display: grid;
    gap: 8px;
}

.path__list li {
    position: relative;
    padding-left: 26px;
    font-weight: 600;
    color: var(--ink);
}

.path__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.path--up {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.path--up .path__list li::before {
    background: var(--accent-2);
}

.path--down {
    background: var(--soft);
}

.path--down .path__list li::before {
    background: var(--neg);
}

/* Badge "100% gratuito" */
.free-badge {
    text-align: center;
    padding: clamp(22px, 6vw, 34px) 20px;
    border-radius: var(--r-xl);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
}

.free-badge__big {
    font-size: clamp(1.6rem, 6.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 6px;
}

.free-badge--inline .free-badge__big {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ── 11. SLOT IMMAGINE ─────────────────────────────────────────────────── */
/* <figure class="media-slot media-slot--RATIO media-slot--optional|required">
   · VUOTO + optional  → nascosto: il blocco non è indispensabile.
   · VUOTO + required  → riquadro neutro, senza testi, stesso ingombro
                         dell'immagine vera (aspect-ratio): niente salti di
                         layout quando arriva l'asset.
   · CON <img>         → l'immagine riempie lo slot (object-fit: cover).
   · <img> che non si carica → js/main.js aggiunge .is-broken e lo slot
                         torna nello stato "vuoto".
   Mappa completa degli asset: assets/images/README.md */
.media-slot {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(var(--accent-rgb), .10), transparent 60%),
        linear-gradient(150deg, #EEF3F0 0%, #E2EAE6 100%);
}

.media-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Per loghi, grafici o screenshot da non ritagliare */
.media-slot--contain img {
    object-fit: contain;
}

.media-slot--16x9 { aspect-ratio: 16 / 9; }
.media-slot--4x3  { aspect-ratio: 4 / 3; }
.media-slot--1x1  { aspect-ratio: 1 / 1; }
.media-slot--4x5  { aspect-ratio: 4 / 5; }

.media-slot--optional:not(:has(img)),
.media-slot--optional.is-broken {
    display: none;
}

.media-slot.is-broken img {
    display: none;
}

/* Sagoma neutra negli slot "persona" ancora vuoti */
.media-slot--person:not(:has(img))::after,
.media-slot--person.is-broken::after {
    content: "";
    position: absolute;
    inset: 22% 22% 0;
    background: no-repeat center bottom / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='34' r='20' fill='%230B1210' fill-opacity='.10'/%3E%3Cpath d='M10 100c0-24 18-40 40-40s40 16 40 40z' fill='%230B1210' fill-opacity='.10'/%3E%3C/svg%3E");
}

.section--dark .media-slot {
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(var(--accent-rgb), .14), transparent 60%),
        linear-gradient(150deg, #16221E 0%, #0E1714 100%);
    box-shadow: 0 0 0 1px var(--dark-line);
}

.section--dark .media-slot--person:not(:has(img))::after,
.section--dark .media-slot--person.is-broken::after {
    filter: invert(1);
}

/* Carosello foto testimonianza: scroll orizzontale su mobile */
.shots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-left: calc(var(--pad-x) * -1);
    margin-right: calc(var(--pad-x) * -1);
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    scroll-padding-left: var(--pad-x);
    scrollbar-width: thin;
}

.shots > * {
    scroll-snap-align: start;
}


/* ── 12. TESTIMONIANZE ─────────────────────────────────────────────────── */
.testimonials {
    display: grid;
    gap: 14px;
}

.testimonial {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--sh-1);
}

.testimonial__photo {
    width: 72px;
    flex-shrink: 0;
    border-radius: 50%;
}

.testimonial__body {
    flex: 1;
    min-width: 0;
}

.testimonial__body > * + * {
    margin-top: 6px;
}

.testimonial__result {
    font-weight: 800;
    color: var(--accent-deep);
}

.testimonial__name {
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
}

/* Card in attesa della testimonianza reale: righe neutre, nessun testo */
.testimonial--empty {
    box-shadow: none;
}

.testimonial--empty .testimonial__body {
    padding-top: 6px;
}

.skeleton {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: var(--soft-2);
}

.skeleton + .skeleton {
    margin-top: 10px;
}

.skeleton--strong {
    width: 55%;
    height: 14px;
    background: var(--accent-soft);
}

.skeleton--short {
    width: 40%;
}


/* ── 13. FAQ ───────────────────────────────────────────────────────────── */
.faq {
    display: grid;
    gap: 10px;
}

.faq__item {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.faq__item[open] {
    border-color: var(--accent-line);
    box-shadow: var(--sh-2);
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__q {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}

.faq__toggle {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    transition: transform var(--t), background var(--t);
}

.faq__item[open] .faq__toggle {
    transform: rotate(45deg);
    background: var(--grad-accent);
    color: var(--accent-ink);
}

.faq__a {
    padding: 0 20px 20px;
}


/* ── 14. BIO ───────────────────────────────────────────────────────────── */
/* Stesso linguaggio della hero (sezione .section--hud .hud): il collage
   "galleggia" su una pedana olografica, titolo Saira come quello della
   hero, card = pannelli HUD con angoli a staffa (regola in 06). */
.bio {
    display: grid;
    gap: var(--gap);
    align-items: start;
}

/* Collage trasparente (B-01): intero, al suo rapporto naturale, sopra al testo */
.bio__photo {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: clamp(14px, 3.5vw, 26px);
}

.bio__photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Pedana: terreno a punti in prospettiva con gli anelli del nucleo della
   hero (cerchi sul piano inclinato = ellissi), sfumata ai bordi */
.bio__photo::before,
.bio__photo::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.bio__photo::before {
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(var(--neon-rgb), .5) 34px 35.5px),
        radial-gradient(rgba(var(--neon-rgb), .55) 1px, transparent 1.6px) 50% 50% / 16px 16px;
    transform: perspective(520px) rotateX(64deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}

/* Alone neon sotto al collage */
.bio__photo::after {
    left: 12%;
    right: 12%;
    bottom: 2%;
    height: 34%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--neon-rgb), .2), transparent);
    filter: blur(6px);
}

.bio__body > * + * {
    margin-top: clamp(22px, 4vw, 30px);
}

/* Titolo come .hero__title: riga introduttiva spaziata + nome grande */
.bio__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.bio__title-lead {
    font-size: clamp(.98rem, 3.9vw, 1.45rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .14em;
    color: var(--hud-text);
}

.bio__title-main {
    font-size: clamp(2rem, 9.4vw, 4rem);
    font-weight: 700;
    font-stretch: 92%;
    line-height: .96;
    letter-spacing: .005em;
    color: #fff;
    text-shadow: 0 0 44px rgba(var(--neon-rgb), .16);
}

.bio__title-hl {
    color: var(--neon);
    text-shadow: 0 0 22px rgba(var(--neon-rgb), .55), 0 0 70px rgba(var(--neon-rgb), .3);
}

.bio__list {
    display: grid;
    gap: 12px;
}

.bio__list li {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 18px 18px 16px;
    background: var(--hud-panel);
    border: 1px solid var(--hud-line);
    border-radius: 3px;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .85);
    color: var(--hud-dim);
    font-family: var(--font-display);
    font-size: var(--fs-card);
    line-height: 1.55;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bio__list li::before {
    --l: 10px;
    --t: 1.5px;
}

/* Spunta = tasto HUD neon (come il play della VSL) */
.bio__ico {
    width: 28px;
    height: 28px;
    margin-top: 1px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--neon);
    border-radius: 3px;
    background: rgba(var(--neon-rgb), .1);
    color: var(--neon);
    font-size: .95rem;
    box-shadow: 0 0 16px rgba(var(--neon-rgb), .3), inset 0 0 10px rgba(var(--neon-rgb), .15);
}

/* Frase chiave di ogni card: bianca, in grassetto, con evidenziatore neon */
.bio__list strong {
    font-weight: 700;
    color: #fff;
    background: linear-gradient(transparent 58%, rgba(var(--neon-rgb), .22) 58%, rgba(var(--neon-rgb), .22) 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Stessa larghezza delle card della bio, a ogni breakpoint (doppia classe:
   deve battere il max-width di .hud .signup) */
.signup.signup--final {
    max-width: none;
    margin-top: calc(var(--gap) * 2.2) !important;
}


/* ── 15. FOOTER ────────────────────────────────────────────────────────── */
.footer {
    background: var(--dark-0);
    border-top: 1px solid var(--dark-line);
    color: var(--on-dark-muted);
    padding: 34px 0;
    text-align: center;
    font-size: .88rem;
}

.footer a {
    color: var(--on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
}

/* Il separatore compare solo davanti ai link effettivamente mostrati */
.footer__link::before {
    content: "·";
    display: inline-block;
    margin-right: 8px;
    color: var(--on-dark-muted);
    text-decoration: none;
}


/* ── 16. MODALE ────────────────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal[hidden] {
    display: none;
}

.modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 10, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fade-in .2s ease both;
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    margin: auto;
    animation: modal-in .28s cubic-bezier(.2, .8, .3, 1) both;
}

.modal__dialog .signup {
    max-width: none;
    margin: 0;
    padding-top: 30px;
}

.modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}

.modal__close:hover {
    background: var(--soft-2);
    transform: rotate(90deg);
}

body.modal-open {
    overflow: hidden;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* ── 17. STICKY CTA MOBILE ─────────────────────────────────────────────── */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 11, 10, .82);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-top: 1px solid var(--dark-line);
    transform: translateY(110%);
    transition: transform var(--t);
}

.sticky-cta[hidden] {
    display: none;
}

.sticky-cta.is-visible {
    transform: none;
}

/* Barra fissa: stessa CTA, più compatta per non coprire la pagina */
.sticky-cta .btn {
    min-height: 68px;
    padding: 12px 10px 12px 18px;
    font-size: clamp(1.08rem, 4.7vw, 1.22rem);
}

.sticky-cta .btn::before {
    inset: -5px;
    --l: 10px;
}

body.has-sticky-cta .footer {
    padding-bottom: calc(34px + 96px);
}


/* ── 18. MICROANIMAZIONI ───────────────────────────────────────────────── */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}


/* ── 19. OVERRIDE intl-tel-input ───────────────────────────────────────── */
/* La libreria arriva da CDN: se non è disponibile il campo resta un input
   tel semplice e il form continua a funzionare. */
.field--phone .iti {
    width: 100%;
    display: block;
}

.field--phone .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
    border-radius: var(--r-md) 0 0 var(--r-md);
    padding-left: 14px;
}

@media (max-width: 479px) {
    .field--phone .iti--separate-dial-code .iti__selected-flag {
        padding-left: 10px;
    }
}

.field--phone .iti__selected-dial-code {
    font-weight: 700;
    color: var(--ink);
}

.field--phone .iti__country-list {
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    box-shadow: var(--sh-3);
    max-width: calc(100vw - 48px);
    white-space: normal;
    z-index: 130;
}

.field--phone .iti__country.iti__highlight {
    background-color: var(--accent-soft);
}


/* ── 20. THANK YOU PAGE ────────────────────────────────────────────────── */
/* Stesso linguaggio della opt-in: testata grafite con filo neon (come la
   hero), card squadrate con angoli a staffa, titoli Saira maiuscoli,
   numeri su tasto grafite con cifre neon, VSL nel "monitor" HUD. */
.ty-alert {
    position: relative;
    padding: clamp(44px, 9vw, 80px) 0 clamp(52px, 10vw, 88px);
    text-align: center;
    color: var(--hud-dim);
}

.ty-alert .wrap > * + * {
    margin-top: 18px;
}

.ty-alert__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 7vw, 2.7rem);
    font-weight: 800;
    font-stretch: 90%;
    line-height: 1.06;
    letter-spacing: .005em;
    text-transform: uppercase;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 0 44px rgba(var(--neon-rgb), .16);
}

.ty-alert__kw {
    color: var(--warn);
    text-shadow: 0 0 22px rgba(255, 192, 67, .45);
}

.ty-alert__sub {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    color: var(--hud-text);
    text-wrap: balance;
}

.ty-alert__sub strong {
    color: var(--warn);
}

.ty-main {
    background:
        linear-gradient(var(--lab-grid) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, var(--lab-grid) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--soft);
    padding: clamp(28px, 6vw, 56px) 0 var(--sec-y);
}

.ty-steps {
    --ty-gap: 30px;
    --ty-pad: clamp(20px, 5vw, 32px);
    --ty-n: clamp(58px, 15vw, 70px);
    display: grid;
    gap: var(--ty-gap);
}

.ty-step {
    position: relative;
    background:
        linear-gradient(90deg, transparent 6%, rgba(var(--accent-rgb), .7) 50%, transparent 94%) top / 100% 1px no-repeat,
        radial-gradient(60% 90px at 50% 0%, rgba(var(--neon-rgb), .16), transparent 100%),
        linear-gradient(180deg, #FFFFFF 0%, #FAFCFB 100%);
    border: 1px solid var(--lab-line);
    border-radius: 3px;
    padding: var(--ty-pad);
    box-shadow: var(--lab-shadow);
}

.ty-step > * + * {
    margin-top: 20px;
}

/* Filo tratteggiato che collega il numero di una card alla precedente */
.ty-step + .ty-step::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: calc(var(--ty-pad) + var(--ty-n) / 2 - 1px);
    width: 2px;
    height: calc(var(--ty-gap) + 2px);
    background: repeating-linear-gradient(180deg, rgba(var(--accent-rgb), .75) 0 5px, transparent 5px 10px);
}

.ty-step--video {
    margin-top: calc(clamp(28px, 6vw, 56px) * -1 - 24px);
    z-index: 1;
}

/* Titolo: numero + "PASSO N" grande sulla prima riga, consegna sotto */
.ty-step__head {
    display: grid;
    grid-template-columns: var(--ty-n) 1fr;
    align-items: center;
    column-gap: clamp(14px, 4vw, 20px);
    row-gap: 16px;
}

.ty-step__n {
    position: relative;
    width: var(--ty-n);
    height: var(--ty-n);
    display: grid;
    place-items: center;
    border-radius: 3px;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--neon-rgb), .22), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 8px 8px,
        var(--hud-0);
    color: var(--neon);
    font-family: var(--font-display);
    font-size: calc(var(--ty-n) * .6);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1;
    text-shadow: 0 0 12px rgba(var(--neon-rgb), .8), 0 0 30px rgba(var(--neon-rgb), .45);
    box-shadow:
        0 0 0 1px rgba(var(--neon-rgb), .3),
        0 12px 24px -12px rgba(4, 40, 12, .7),
        0 0 24px rgba(var(--neon-rgb), .35);
}

.ty-step__kicker {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 9.6vw, 3rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #1A9F3F 0%, #12893A 55%, #0B6A29 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ty-step__title {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    font-weight: 700;
    font-stretch: 94%;
    line-height: 1.18;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--ink);
    text-wrap: balance;
}

/* VSL della thank you: stesso monitor HUD della hero */
.ty-step .vsl {
    position: relative;
    padding: 6px;
    background: var(--hud-1);
    border: 1px solid var(--hud-line);
    border-radius: 4px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75);
}

/* Passo 4: "L'appuntamento è il" + date come fogli di calendario */
.ty-when > * + * {
    margin-top: 14px;
}

.ty-cal {
    display: flex;
    gap: clamp(8px, 2.6vw, 14px);
}

.ty-cal__day {
    flex: 1 1 0;
    min-width: 0;
    max-width: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 12px;
    border: 1px solid var(--lab-line);
    border-radius: 3px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F6FAF8 100%);
    box-shadow: var(--lab-shadow);
    overflow: hidden;
    font-family: var(--font-display);
    text-transform: uppercase;
}

/* Mese: striscia grafite con testo neon, come i tasti HUD */
.ty-cal__month {
    align-self: stretch;
    padding: 6px 0 5px;
    background: var(--hud-0);
    color: var(--neon);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-align: center;
    text-indent: .22em;
    text-shadow: 0 0 10px rgba(var(--neon-rgb), .6);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.ty-cal__num {
    margin-top: 6px;
    font-size: clamp(2.4rem, 11vw, 3rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1;
    color: var(--ink);
}

.ty-cal__wd {
    margin-top: 4px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-indent: .16em;
    color: var(--accent-deep);
}

.ty-cta > * + * {
    margin-top: 10px;
}

.btn--wa {
    background: linear-gradient(180deg, #5EEA94 0%, #25D366 45%, #1BB457 100%);
    color: #04200F;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 -4px 0 rgba(4, 60, 24, .2),
        0 0 0 1px rgba(10, 110, 50, .5),
        0 16px 34px -12px rgba(37, 211, 102, .6);
}

.btn--wa:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.btn--wa .btn__arrow,
.btn--wa .btn__ico {
    background: #04200F;
    color: #25D366;
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .35), 0 3px 10px rgba(4, 40, 12, .35);
}

/* CTA della thank you: stessa forma della CTA neon (08), font calibrato
   sulle etichette più lunghe ("AGGIUNGI LE DATE AL TUO GOOGLE CALENDAR!") */
.ty-cta .btn {
    min-height: 88px;
    gap: 12px;
    padding: 16px 12px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: clamp(1rem, 5vw, 1.35rem);
    font-size: clamp(1rem, calc(6.2cqi - 3px), 1.35rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.06;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.ty-cta .btn__label {
    flex: 1;
}

/* Schermi stretti: due riquadri (icona + freccia) mandano l'etichetta
   WhatsApp su 3 righe; resta solo l'icona */
@container (max-width: 300px) {
    .btn--wa .btn__arrow {
        display: none;
    }
}

/* ── 21. BREAKPOINT ────────────────────────────────────────────────────── */
@media (min-width: 560px) {
    .shots {
        grid-auto-columns: 40%;
    }

    .versus,
    .duo {
        grid-template-columns: 1fr 1fr;
    }

    .signals {
        grid-template-columns: 1fr 1fr;
    }

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

    .testimonials {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 760px) {
    :root {
        --fs-body: 1.125rem;
        --pad-x: 24px;
    }

    .paths {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media (min-width: 900px) {
    .shots {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-columns: auto;
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .testimonials {
        grid-template-columns: repeat(3, 1fr);
    }

    .sticky-cta {
        display: none;
    }

    body.has-sticky-cta .footer {
        padding-bottom: 34px;
    }
}

@media (max-width: 359px) {
    :root {
        --pad-x: 14px;
    }

    .btn {
        padding: 16px 18px;
    }

    .btn--cta {
        padding: 18px 10px 18px 16px;
    }
}


/* ── 22. HUD CHIARO (sezioni sotto la hero) ────────────────────────────── */
/* Lo stesso linguaggio della hero portato su fondo chiaro: griglia tecnica,
   filo di luce neon in alto, titoli Saira maiuscoli con marcatore, card
   squadrate con angoli a staffa, icone e tag neon, bottoni neon.
   Le regole sovrascrivono i componenti delle sezioni 03–15 senza toccarne
   il layout (colonne e breakpoint restano quelli della sezione 21). */
:root {
    --lab-line: #D5E0DA;
    --lab-grid: rgba(18, 52, 34, .055);
    --lab-dots: rgba(18, 52, 34, .1);
    --lab-shadow: 0 1px 0 rgba(18, 52, 34, .04), 0 16px 32px -24px rgba(18, 52, 34, .4);
}

/* Sfondi: griglia (light/tint) o matrice di punti (white) + filo luminoso
   e alone verde che scendono dall'alto, come .hero::before */
.section--light,
.section--white,
.section--tint {
    isolation: isolate;
}

.section--light::before,
.section--white::before,
.section--tint::before,
.section--light::after,
.section--white::after,
.section--tint::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.section--light::before,
.section--tint::before {
    inset: 0;
    background:
        linear-gradient(var(--lab-grid) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, var(--lab-grid) 1px, transparent 1px) 0 0 / 44px 44px;
}

.section--white::before {
    inset: 0;
    background: radial-gradient(var(--lab-dots) 1px, transparent 1.5px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 50%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 50%, #000 100%);
}

.section--light::after,
.section--white::after,
.section--tint::after {
    top: 0;
    left: 0;
    right: 0;
    height: clamp(220px, 30vw, 360px);
    background:
        linear-gradient(90deg, transparent 8%, rgba(var(--accent-rgb), .7) 50%, transparent 92%) top / 100% 1px no-repeat,
        radial-gradient(38% 70px at 50% 0%, rgba(var(--neon-rgb), .42), transparent 100%),
        radial-gradient(60% 100% at 50% 0%, rgba(var(--neon-rgb), .2) 0%, rgba(var(--neon-rgb), .05) 50%, transparent 100%);
}

.section--tint::after {
    background:
        linear-gradient(90deg, transparent 8%, rgba(var(--accent-rgb), .7) 50%, transparent 92%) top / 100% 1px no-repeat,
        radial-gradient(45% 100% at 100% 0%, rgba(var(--neon-rgb), .24), transparent 100%),
        radial-gradient(60% 100% at 50% 0%, rgba(var(--neon-rgb), .14) 0%, transparent 100%);
}

/* Variante senza griglia né punti: fondo bianco pieno (es. #schema) */
.section--plain {
    background: var(--white);
}

.section--plain::before {
    display: none;
}

/* Titoli: Saira maiuscolo come la hero, con marcatore HUD sopra */
.section-title {
    font-size: clamp(1.5rem, 5.3vw, 2.4rem);
    font-weight: 800;
    font-stretch: 92%;
    line-height: 1.08;
    letter-spacing: .005em;
    text-transform: uppercase;
}

.section--light .section-title::before,
.section--white .section-title::before,
.section--tint .section-title::before {
    content: "";
    display: block;
    width: 92px;
    height: 8px;
    margin: 0 auto 18px;
    background:
        linear-gradient(var(--accent), var(--accent)) center / 8px 8px no-repeat,
        linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .8)) left center / 38px 1px no-repeat,
        linear-gradient(270deg, transparent, rgba(var(--accent-rgb), .8)) right center / 38px 1px no-repeat;
    filter: drop-shadow(0 0 5px rgba(var(--neon-rgb), .9));
}

/* Titolo allineato a sinistra (es. "In queste 3 serate scoprirai"):
   quadratino a sinistra, linea che sfuma verso destra */
.section .wrap > .section-title::before {
    width: 120px;
    margin-left: 0;
    background:
        linear-gradient(var(--accent), var(--accent)) left center / 8px 8px no-repeat,
        linear-gradient(90deg, rgba(var(--accent-rgb), .8), transparent) 16px center / 104px 1px no-repeat;
}

/* Titoli a due scale: le frasi chiave in <span class="title-em"> vanno su
   righe proprie, grandi e in gradiente verde; il resto del titolo si
   rimpicciolisce e fa da raccordo. Per cambiare l'enfasi basta spostare
   lo span nel copy. Su fondo chiaro il verde è scuro (contrasto ≥ 3:1),
   su fondo scuro è il neon della hero. */
.section-title:has(.title-em) {
    font-size: clamp(1.2rem, 5.2vw, 1.85rem);
    line-height: 1.14;
}

.signup__title--big:has(.title-em) {
    align-self: stretch;
    font-size: clamp(1.05rem, 4.7vw, 1.4rem);
    line-height: 1.16;
}

/* Raccordi tra le frasi chiave: blocchi propri (li crea js/main.js,
   initFitHeadlines, che su mobile ne calcola anche il font-size) */
.title-sub {
    display: block;
    text-wrap: balance;
}

.title-em {
    display: block;
    padding: .06em 0;
    font-size: clamp(1.8rem, 7.9vw, 3.05rem);
    font-stretch: 88%;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
    background: linear-gradient(180deg, #1A9F3F 0%, #12893A 55%, #0B6A29 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.signup__title .title-em {
    font-size: clamp(1.5rem, 7.6vw, 2.6rem);
}

.section--dark .title-em,
.section--hud .title-em,
.hud .title-em {
    background-image: linear-gradient(180deg, #D4FFD2 0%, var(--neon) 50%, #52CF50 100%);
    filter: drop-shadow(0 0 16px rgba(var(--neon-rgb), .32));
}

/* Date e orari nei titoli: mai spezzati ("5 - 6 - 7 Ottobre") */
.section-title [data-event],
.signup__title [data-event] {
    white-space: nowrap;
}

/* Sottotitoli: frase chiave colorata, stessa dimensione */
.kicker-hl {
    color: var(--accent-deep);
}

.section--dark .kicker-hl {
    color: var(--neon);
}

.kicker-hl--neg,
.section--dark .kicker-hl--neg {
    color: var(--neg);
}

.section-kicker {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.quote-line {
    border-left-color: var(--accent);
    padding-top: 4px;
    padding-bottom: 4px;
    background: linear-gradient(90deg, rgba(var(--neon-rgb), .18), transparent 70%);
}

/* Bottoni: la CTA neon è definita una sola volta, in 08 */
.btn__spinner {
    border-color: rgba(4, 26, 8, .25);
    border-top-color: var(--accent-ink);
}

.cta-sub {
    font-family: var(--font-display);
}

.cta-note {
    font-family: var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Angoli a staffa (come i pannelli HUD della hero). Colore: --bracket */
.check-card::after,
.ty-step::after,
.versus__card::after,
.path::after,
.testimonial::after,
.callout--accent::after,
.question::after,
.statement::after,
.free-badge::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    --c: var(--bracket, var(--accent));
    --l: 10px;
    --t: 1.5px;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
    background-repeat: no-repeat;
}

/* Box ATTENZIONE: come il badge di annuncio della hero (.hero__pre) ma in
   giallo e su pannello bianco: angoli a staffa, filo luminoso in alto,
   testo Saira; "ATTENZIONE:" è un'etichetta di stato HUD (come .hero .hl).
   Sul bianco il giallo puro non si legge: angoli e testi usano toni ambra. */
.alert-box {
    --warn-rgb: 255, 192, 67;
    --warn-line: #F0A500;
    --warn-text: #8F5E00;
    position: relative;
    gap: 16px;
    padding: clamp(20px, 4.5vw, 28px) clamp(18px, 4.5vw, 28px);
    background:
        linear-gradient(90deg, transparent 6%, var(--warn-line) 50%, transparent 94%) top / 100% 1px no-repeat,
        radial-gradient(70% 110px at 50% 0%, rgba(var(--warn-rgb), .2), transparent 100%),
        linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%);
    border: 1px solid rgba(214, 150, 0, .28);
    border-radius: 3px;
    color: var(--body);
    font-family: var(--font-display);
    box-shadow: 0 1px 0 rgba(90, 60, 0, .04), 0 22px 44px -28px rgba(90, 60, 0, .45);
}

.alert-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    --c: var(--warn-line);
    --l: 12px;
    --t: 2px;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
        linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
    background-repeat: no-repeat;
}

.alert-box strong {
    color: var(--ink);
}

/* Icona: tasto HUD giallo con bagliore che pulsa */
.alert-box__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    margin-top: 0;
    border: 1.5px solid var(--warn-line);
    border-radius: 3px;
    background: rgba(var(--warn-rgb), .16);
    color: #B37400;
    font-size: 1.15rem;
    box-shadow: 0 0 14px rgba(var(--warn-rgb), .4), inset 0 0 8px rgba(var(--warn-rgb), .2);
    animation: warn-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes warn-pulse {
    to {
        box-shadow: 0 0 24px rgba(var(--warn-rgb), .75), inset 0 0 12px rgba(var(--warn-rgb), .35);
    }
}

/* Icona + "ATTENZIONE:" sulla stessa riga, paragrafi a tutta larghezza
   sotto (il corpo "sparisce" dalla griglia con display: contents) */
.alert-box {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
}

.alert-box__body {
    display: contents;
}

.alert-box__body > p:not(:first-child) {
    grid-column: 1 / -1;
}

.alert-box__body > p:nth-child(2) {
    margin-top: 18px;
}

/* "ATTENZIONE:" = etichetta di stato HUD */
.alert-box__body > p:first-child {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.alert-box__body > p:first-child strong {
    padding: .2em .55em .2em .7em;
    border-radius: 2px;
    background: rgba(var(--warn-rgb), .18);
    box-shadow: inset 0 0 0 1px rgba(214, 150, 0, .55);
    color: var(--warn-text);
    font-size: .88em;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Elenco "In queste 3 serate scoprirai": card numerate */
.check-list {
    counter-reset: check;
}

.check-card {
    position: relative;
    counter-increment: check;
    border-color: var(--lab-line);
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFB 100%);
    box-shadow: var(--lab-shadow);
}

.check-card:hover {
    border-color: rgba(var(--accent-rgb), .5);
    box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .2), var(--lab-shadow);
}

/* Numero di sequenza decorativo (nascosto agli screen reader) */
.check-card::before {
    content: counter(check, decimal-leading-zero) / "";
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(var(--accent-rgb), .75);
}

.check-card > p {
    padding-right: 18px;
}

/* Card con immagine: la foto occupa tutta la riga sopra a icona + testo,
   con un margine in alto per lasciare spazio al numero di sequenza */
.check-card--media {
    flex-wrap: wrap;
}

.check-card__media {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-top: 10px;
    border-radius: var(--r-md);
    box-shadow: 0 0 0 1px var(--lab-line);
}

.check-card--media > p {
    flex: 1;
}

.check-card__ico,
.bio__ico {
    border-radius: var(--r-sm);
    background: var(--grad-accent);
    color: var(--accent-ink);
    box-shadow: 0 0 0 1px rgba(26, 140, 52, .3), 0 0 14px rgba(var(--neon-rgb), .6);
}

/* Timeline: numeri su chip grafite con cifre neon, filo tratteggiato */
.timeline__item::before,
.timeline__item::after {
    background: repeating-linear-gradient(180deg, rgba(var(--accent-rgb), .75) 0 6px, transparent 6px 12px);
}

.timeline__n {
    border-radius: var(--r-md);
    background: var(--dark-0);
    color: var(--neon);
    font-family: var(--font-display);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(var(--neon-rgb), .7);
    box-shadow: 0 0 0 4px var(--soft), 0 0 0 5px var(--lab-line), 0 0 22px rgba(var(--neon-rgb), .45);
}

/* Tag (persone, spese): etichette di stato come nella hero */
.chips li {
    border-radius: var(--r-sm);
    padding: 9px 16px;
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(var(--neon-rgb), .22);
    border-color: rgba(var(--accent-rgb), .55);
    color: var(--accent-deep);
}

.chips--cost li {
    background: #FFF0F1;
    border-color: rgba(240, 97, 106, .55);
    color: #A3232C;
}

/* Confronto "prima/dopo" */
.versus__ico {
    border-radius: var(--r-sm);
}

.versus__card--up .versus__ico {
    box-shadow: 0 0 0 1px rgba(26, 140, 52, .3), 0 0 14px rgba(var(--neon-rgb), .55);
}

.versus__card--down {
    --bracket: var(--neg);
}

.versus--light .versus__card {
    border-color: var(--lab-line);
    box-shadow: var(--lab-shadow);
}

.versus--light .versus__card--up {
    background: linear-gradient(165deg, #EFFFEE 0%, #FFFFFF 75%);
    border-color: rgba(var(--accent-rgb), .45);
}

.versus--light .versus__card--down {
    background: linear-gradient(165deg, #FFF5F5 0%, #FFFFFF 75%);
    border-color: var(--neg-line);
}

/* Segnali (costi): barra rossa + leggero riflesso */
.signal {
    position: relative;
    border-color: var(--lab-line);
    border-left-color: var(--neg);
    background: linear-gradient(90deg, #FFF6F6 0%, #FFFFFF 45%);
    box-shadow: var(--lab-shadow);
}

/* Pannelli scuri dentro alle sezioni chiare: grafite HUD con griglia */
.callout--accent,
.question {
    position: relative;
    background:
        radial-gradient(420px 200px at 50% 0%, rgba(var(--neon-rgb), .16), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--hud-0);
    border: 1px solid var(--hud-line);
    box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .7);
    --bracket: var(--neon);
}

.callout--accent strong,
.question strong {
    color: #fff;
}

.callout__big,
.question__big {
    font-family: var(--font-display);
    font-stretch: 92%;
    letter-spacing: .005em;
    text-transform: uppercase;
}

.question__big {
    text-shadow: 0 0 30px rgba(var(--neon-rgb), .25);
}

/* Due percorsi */
.path {
    position: relative;
    box-shadow: var(--lab-shadow);
}

.path--up {
    background: linear-gradient(170deg, #EEFFEE 0%, #FFFFFF 70%);
    border-color: rgba(var(--accent-rgb), .45);
}

.path--down {
    background: linear-gradient(170deg, #F4F7F5 0%, #FFFFFF 70%);
    border-color: var(--lab-line);
    --bracket: var(--neg);
}

.path__lead {
    font-family: var(--font-display);
    font-size: 1.06em;
    font-stretch: 94%;
    line-height: 1.25;
    text-transform: uppercase;
}

.path__list li::before {
    border-radius: 2px;
}

.path--up .path__list li::before {
    background: var(--neon);
    box-shadow: 0 0 0 1px rgba(26, 140, 52, .4), 0 0 8px rgba(var(--neon-rgb), .7);
}

/* Testimonianze */
.testimonial {
    position: relative;
    border-color: var(--lab-line);
    box-shadow: var(--lab-shadow);
}

.testimonial__photo {
    border-radius: var(--r-md);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(var(--accent-rgb), .5);
}

.testimonial__result {
    font-family: var(--font-display);
    letter-spacing: .02em;
}

/* Slot immagine: matrice di punti al posto della sfumatura */
.media-slot {
    background:
        radial-gradient(rgba(18, 52, 34, .12) 1px, transparent 1.5px) 0 0 / 14px 14px,
        radial-gradient(120% 90% at 85% 10%, rgba(var(--neon-rgb), .18), transparent 60%),
        linear-gradient(150deg, #EEF3F0 0%, #E2EAE6 100%);
    box-shadow: inset 0 0 0 1px var(--lab-line);
}

/* FAQ */
.faq__item {
    border-color: var(--lab-line);
    box-shadow: var(--lab-shadow);
}

.faq__item[open] {
    border-color: rgba(var(--accent-rgb), .5);
    box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .18), var(--lab-shadow);
}

.faq__q {
    font-family: var(--font-display);
    font-size: 1.06em;
    letter-spacing: .01em;
}

.faq__toggle {
    border-radius: var(--r-sm);
    background: var(--dark-0);
    color: var(--neon);
}

.faq__item[open] .faq__toggle {
    box-shadow: 0 0 12px rgba(var(--neon-rgb), .6);
}

/* Sezioni scure già presenti (#rivoluzione, #gratis): pannelli interni */
.statement,
.free-badge {
    position: relative;
    --bracket: var(--neon);
}

.statement__strong,
.free-badge__big {
    font-family: var(--font-display);
    font-stretch: 92%;
    text-transform: uppercase;
}

.statement__strong {
    color: var(--neon);
    text-shadow: 0 0 22px rgba(var(--neon-rgb), .4);
}

.shout {
    font-stretch: 92%;
    letter-spacing: 0;
    filter: drop-shadow(0 0 24px rgba(var(--neon-rgb), .35));
}

.alarm {
    border-left: 0;
    padding-left: calc(clamp(20px, 5vw, 28px) + 8px);
    background:
        repeating-linear-gradient(-45deg, #FFC043 0 7px, #231C06 7px 14px) left top / 8px 100% no-repeat,
        rgba(255, 192, 67, .07);
}

.alarm__lead {
    font-family: var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.duo__item {
    font-family: var(--font-display);
    letter-spacing: .02em;
}

.duo__item--pos {
    border-left-color: var(--neon);
    background: rgba(var(--neon-rgb), .1);
}

/* Footer */
.footer {
    background:
        linear-gradient(90deg, transparent 8%, rgba(var(--neon-rgb), .6) 50%, transparent 92%) top / 100% 1px no-repeat,
        var(--hud-0);
    border-top: 0;
    font-family: var(--font-display);
    letter-spacing: .04em;
}

/* Fondale generativo chiaro (#scoprirai): stesso motore della hero */
.section--scene {
    isolation: isolate;
}

.scene-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 24px), transparent 100%);
}

.scene-bg__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.scene-bg.is-ready .scene-bg__layer {
    opacity: 1;
}

/* Velatura chiara dietro ai testi (misure da js/hero-bg.js) */
.scene-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(var(--veil-rx, 1px) var(--veil-ry, 1px) at 50% var(--veil-y, -10px),
            rgba(244, 247, 245, var(--veil-a, .9)) 0%,
            rgba(244, 247, 245, calc(var(--veil-a, .9) * .72)) 55%,
            transparent 100%),
        radial-gradient(var(--veil2-rx, 1px) var(--veil2-ry, 1px) at 50% var(--veil2-y, -10px),
            rgba(244, 247, 245, var(--veil2-a, .85)) 0%,
            rgba(244, 247, 245, calc(var(--veil2-a, .85) * .72)) 55%,
            transparent 100%);
}

/* Mobile/tablet: l'elenco occupa tutta la larghezza, quindi la scena si
   mostra in due fasce (come nella hero): pale eoliche tra titolo ed
   elenco, nucleo e cobot sotto l'ultima card. */
@media (max-width: 1023px) {
    #scoprirai .check-list {
        margin-top: clamp(64px, 17vw, 100px);
    }

    #scoprirai {
        padding-bottom: clamp(120px, 32vw, 160px);
    }
}

/* Mobile: il testo delle card usa tutta la larghezza. L'icona non ha più
   una colonna sua ma flotta a sinistra: le prime righe le girano intorno,
   le successive vanno da bordo a bordo (come nella landing vinted). */
@media (max-width: 559px) {
    .check-card,
    .bio__list li {
        display: flow-root;
    }

    .versus__card {
        display: flow-root;
        padding: 20px;
    }

    /* Margine inferiore negativo: l'icona "occupa" solo la prima riga,
       così già dalla seconda il testo parte da bordo card */
    .check-card__ico,
    .bio__ico,
    .versus__ico {
        position: static;
        float: left;
        margin: 3px 12px -10px 0;
    }

    .check-card > p {
        padding-right: 0;
    }

    /* niente gap del flex: spazio tra foto e icona */
    .check-card__media {
        margin-bottom: 14px;
    }
}