/* ==========================================================================
   HORNOI — HOME «CRESCITA»

   Solo i componenti che questa home introduce. Tutto il resto — bottoni,
   card, piani, accordion, galleria, firma — arriva da core / blocks / pages
   / home, che restano intoccati: la home attuale continua a funzionare
   esattamente com'era anche con questo foglio caricato.

   Prefisso .gs- per non incrociare mai nulla di esistente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   Deve stare in una schermata sola, header compreso: chi arriva da un
   annuncio decide lì se restare, e una promessa tagliata a metà dal bordo
   dello schermo è una promessa che non ha fatto il suo lavoro.

   Il modo per ottenerlo non è comprimere: è misurare tutto in vh e lasciare
   che la pagina si adatti allo schermo invece del contrario. Qui sotto sono
   in vh il riempimento, il salto fra i blocchi e il corpo del titolo.

   svh e non vh: su mobile la barra del browser che compare e scompare
   cambia vh a metà scroll, e il contenuto ballerebbe.
   -------------------------------------------------------------------------- */
.gs-hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    /* svh sovrascrive vh dove il browser lo conosce: su mobile la barra che
       compare e scompare cambia vh a metà scroll, e la cover ballerebbe.
       Chi non conosce svh resta su 100vh, che è il comportamento chiesto. */
    min-height: 100svh;
    padding-top: clamp(94px, 12vh, 146px);
    padding-bottom: clamp(28px, 6vh, 76px);
    overflow: hidden;
}

.gs-hero > .wrap { width: 100%; }

/* La foto sul palco come fondo. Stessa logica della home attuale: una
   velatura orizzontale tiene nera la colonna del testo, una verticale
   riattacca il fondo all'header sopra e alla sezione dopo. */
.gs-hero__ph {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.gs-hero__ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 30%;
    /* Nella foto sto poco oltre la metà, cioè dove cade la colonna destra.
       Lo scarto mi riporta nel varco fra testo e ritratto; lo scale copre il
       vuoto che lo spostamento lascerebbe sul bordo. */
    transform: translateX(calc(118px - 11.25vw)) scale(1.16);
    filter: grayscale(.44) contrast(1.04);
}

@media (max-width: 1300px) {
    .gs-hero__ph img { transform: translateX(-3.6vw) scale(1.16); }
}

.gs-hero__ph::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg,
            var(--ink) 0%,
            rgba(10, 10, 10, .96) 26%,
            rgba(10, 10, 10, .72) 46%,
            rgba(10, 10, 10, .58) 100%),
        linear-gradient(180deg,
            rgba(10, 10, 10, .9) 0%,
            transparent 18%,
            transparent 70%,
            var(--ink) 100%);
}

.gs-hero__glow {
    top: -26%;
    right: -12%;
    width: 58vw;
}

/* Le due colonne quasi in pari: a sinistra ci stanno anche le credenziali,
   a destra la cornice deve poter arrivare a 480px senza essere strozzata. */
.gs-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: clamp(40px, 5vw, 76px);
}

/* Il ritmo verticale della colonna sta tutto qui: un gap solo, uguale per
   tutti i blocchi, invece di un margine per elemento. min-width: 0 resta —
   senza, una parola lunga nel titolo allarga la colonna e schiaccia il
   ritratto invece di andare a capo. */
.gs-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Il corpo del titolo è limitato anche dall'altezza, non solo dalla
   larghezza: su un portatile basso e largo è l'altezza a mancare, ed è lì
   che un display tarato in soli vw sborda. */
.gs-hero__t {
    margin: 0;
    font-size: clamp(1.85rem, min(3.6vw, 5.2vh), 3.15rem);
    line-height: 1.08;
    letter-spacing: -.032em;
    text-wrap: balance;
}

/* 56ch e non 48: il lead elenca tre benefici e a misura stretta cadeva su
   quattro righe, spingendo bottoni e badge fuori dalla prima schermata. La
   colonna ne regge circa 620px, quindi la riga più lunga resta dentro senza
   toccare il varco in cui cade il palco della foto. */
.gs-hero__lead {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(1rem, min(1.1vw, 2.1vh), 1.14rem);
    line-height: 1.6;
}

.gs-hero__cta { gap: 14px; }

/* riga di rassicurazione sotto ai bottoni: toglie l'attrito del click */
.gs-hero__rea {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: .82rem;
    color: var(--fg-muted);
}
.gs-hero__rea svg { width: 15px; height: 15px; flex: none; opacity: .8; }

/* La cornice non prende tutta la colonna, e non è una svista: fra la fine
   del testo e il suo bordo sinistro deve restare il varco in cui cade il
   palco della foto di fondo. Con 440px il varco è largo circa 110px su ogni
   schermo, e il palco ci sta esattamente in mezzo — vedi il gradiente e la
   traslazione di .gs-hero__ph, che sono tarati sulla stessa misura.
   Allargare la cornice significa coprire il palco: se la tocchi, ricontrolla
   anche quelli. */
.gs-hero .hp { max-width: min(440px, 48vh); }

/* --------------------------------------------------------------------------
   2. BADGE DI AUTOREVOLEZZA
   Due colonne in fondo alla colonna di sinistra, staccate dai bottoni da una
   linea: non fanno parte della chiamata all'azione, sono la ragione per cui
   uno dovrebbe cliccarla.
   -------------------------------------------------------------------------- */
.gs-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 560px;
    margin: 0;
    /* la spaziatura sopra la linea la dà il gap della colonna; questo padding
       è l'aria sotto la linea, che è un'altra cosa e resta */
    padding: clamp(20px, 2.6vh, 30px) 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.gs-badge {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .05);
}

.gs-badge__i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    color: var(--orange);
    background: rgba(255, 90, 31, .13);
}
.gs-badge__i svg { width: 16px; height: 16px; }

.gs-badge__t { display: grid; gap: 3px; min-width: 0; }
.gs-badge__t b {
    font-family: var(--f-display);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.012em;
}
.gs-badge__t small { font-size: .7rem; color: var(--fg-muted); line-height: 1.3; }

@media (max-width: 520px) {
    .gs-badges { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
    /* A una colonna la stessa altezza deve reggere testo e ritratto invece
       che uno solo dei due: si stringe tutto — riempimento, salto fra i
       blocchi e cornice — altrimenti su un tablet in verticale la cover
       sborda di quel poco che basta a far comparire la barra di scorrimento. */
    .gs-hero { padding-top: clamp(88px, 10vh, 120px); padding-bottom: clamp(24px, 4vh, 56px); }
    .gs-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vh, 34px); }
    .gs-hero__side { max-width: 420px; width: 100%; margin-inline: auto; }
    .gs-hero .hp { max-width: min(290px, 23vh); }
    /* impilato il lead ha tutta la larghezza della pagina: allargarlo ancora
       gli fa risparmiare una riga proprio dove lo spazio verticale è meno */
    .gs-hero__lead { max-width: 60ch; }

    /* Impilate, le due colonne si sommano invece di affiancarsi: il ritmo
       della sinistra si stringe, altrimenti su un tablet in verticale la
       somma supera lo schermo. Un valore solo, ora che la spaziatura è il
       gap della colonna e non un margine per elemento. */
    .gs-hero__copy { gap: clamp(14px, 2vh, 20px); }
    .gs-badges {
        max-width: none;
        padding-top: clamp(16px, 2vh, 24px);
    }
    .gs-hero__ph img { object-position: 58% 26%; transform: none; }
    .gs-hero__ph::after {
        background:
            linear-gradient(180deg,
                rgba(10, 10, 10, .92) 0%,
                rgba(10, 10, 10, .8) 30%,
                rgba(10, 10, 10, .86) 70%,
                var(--ink) 100%);
    }
}

/* Sotto i 480px di larghezza, o su schermi molto bassi, la cover smette di
   essere obbligata a stare in una schermata: comprimere ancora vorrebbe dire
   testo illeggibile, e a quel punto è meglio far scorrere di un dito. */
@media (max-width: 480px), (max-height: 620px) {
    .gs-hero { min-height: 0; }
}

/* --------------------------------------------------------------------------
   4. IL PROBLEMA
   -------------------------------------------------------------------------- */
.gs-dim { color: var(--fg-muted); }

.gs-neg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 900px) { .gs-neg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gs-neg { grid-template-columns: minmax(0, 1fr); } }

.gs-neg__i {
    position: relative;
    padding: clamp(22px, 2.3vw, 30px);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.gs-neg__i:hover {
    border-color: var(--fg-faint);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* L'icona è dentro un cerchio grigio, non arancione: qui l'arancione è il
   colore di quello che funziona, e questa è la sezione di quello che non va. */
.gs-neg__x {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--fg-muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.gs-neg__x svg { width: 19px; height: 19px; }

.gs-neg__i h3 {
    margin: 18px 0 8px;
    font-family: var(--f-display);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -.018em;
}
.gs-neg__i p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   4b. LA CHIAMATA A METÀ PAGINA
   Una fascia sottile dopo i casi. Su una pagina lunga la convinzione non
   arriva tutta in fondo: chi è già pronto deve poter agire lì, senza
   scorrere altre otto sezioni per trovare un pulsante.
   -------------------------------------------------------------------------- */
.gs-mid { overflow: hidden; }

.gs-mid__b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.6vw, 36px);
}

.gs-mid__t {
    flex: 1 1 30ch;
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.024em;
    color: var(--fg-soft);
    text-wrap: balance;
}
.gs-mid__t strong { display: block; color: var(--fg); font-weight: 650; }

.gs-mid__b .btn-row { flex: none; margin: 0; }

/* la nota sta sotto al bottone e occupa tutta la riga: è una postilla,
   non deve competere con la frase */
.gs-mid__n {
    flex: 1 0 100%;
    font-size: .8rem;
    color: var(--fg-muted);
    text-align: right;
}

@media (max-width: 720px) {
    .gs-mid__b { flex-direction: column; align-items: flex-start; }
    .gs-mid__n { text-align: left; }
}

/* --------------------------------------------------------------------------
   5. IL FUTURO
   Sei blocchi grandi, poco testo, molto respiro. Il titolo di ognuno è già
   il beneficio: la riga sotto serve solo a renderlo credibile.
   -------------------------------------------------------------------------- */
.gs-fut { overflow: hidden; }

.gs-gain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
}
@media (max-width: 900px) { .gs-gain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gs-gain { grid-template-columns: minmax(0, 1fr); } }

.gs-gain__i {
    background: var(--bg);
    padding: clamp(28px, 3.2vw, 44px);
    transition: background var(--t);
}
.gs-gain__i:hover { background: var(--surface); }

.gs-gain__i h3 {
    margin: 0 0 12px;
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.032em;
}
.gs-gain__i p { margin: 0; font-size: .94rem; line-height: 1.62; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   6. CASE STUDY — problema, strategia, risultato
   -------------------------------------------------------------------------- */
.gs-cases { display: grid; gap: clamp(28px, 3.4vw, 52px); }

.gs-case {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(28px, 3.8vw, 60px);
    padding: clamp(22px, 2.6vw, 36px);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: var(--surface);
}

/* a righe alterne l'immagine passa a destra: senza, tre schede identiche
   in fila diventano un elenco e si smette di guardarle */
.gs-case:nth-child(even) .gs-case__viz { order: 2; }

@media (max-width: 900px) {
    .gs-case { grid-template-columns: minmax(0, 1fr); }
    .gs-case:nth-child(even) .gs-case__viz { order: 0; }
}

.gs-case__viz {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
    aspect-ratio: 3 / 2;
}
.gs-case__viz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .8s var(--ease);
}
.gs-case:hover .gs-case__viz img { transform: scale(1.03); }

.gs-case__b .d3 { margin: 12px 0 0; text-wrap: balance; }

/* i tre tempi, con la linea che li collega */
.gs-flow {
    display: grid;
    gap: 0;
    margin: clamp(20px, 2.2vw, 28px) 0 0;
    padding: 0;
    list-style: none;
}

.gs-flow__i {
    position: relative;
    padding: 0 0 18px 26px;
}
.gs-flow__i:last-child { padding-bottom: 0; }

/* pallino + tratto verticale: il percorso si legge anche senza leggere */
.gs-flow__i::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fg-faint);
}
.gs-flow__i::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 16px;
    bottom: 2px;
    width: 1px;
    background: var(--line);
}
.gs-flow__i:last-child::after { display: none; }

.gs-flow__i--bad::before { background: var(--fg-muted); }
.gs-flow__i--good::before {
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 90, 31, .16);
}

.gs-flow__k {
    display: block;
    margin-bottom: 5px;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-faint);
}
.gs-flow__i--good .gs-flow__k { color: var(--orange); }

.gs-flow p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--fg-soft); }
.gs-flow__i--good p { color: var(--fg); font-weight: 500; }

/* il numero, quando c'è: resta muto finché non c'è un dato vero da mostrare */
.gs-case__m {
    margin: clamp(18px, 2vw, 24px) 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--orange);
}

/* --------------------------------------------------------------------------
   7. L'ECOSISTEMA
   La sezione deve sembrare grande: dodici tessere, spigoli morbidi, un velo
   di vetro. Non c'è nulla da leggere tutto d'un fiato — serve la sensazione
   di quantità, e poi il dettaglio per chi si ferma.
   -------------------------------------------------------------------------- */
.gs-kit-sec { overflow: hidden; }
.gs-kit-sec__glow { bottom: -30%; left: -10%; width: 56vw; }

.gs-kit {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}
@media (max-width: 1040px) { .gs-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .gs-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .gs-kit { grid-template-columns: minmax(0, 1fr); } }

.gs-kit__i {
    position: relative;
    padding: clamp(20px, 2vw, 26px);
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(150deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
    transition: border-color var(--t), transform var(--t), background var(--t);
}
.gs-kit__i:hover {
    border-color: rgba(255, 255, 255, .24);
    background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
    transform: translateY(-3px);
}

.gs-kit__i-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--orange);
    background: rgba(255, 90, 31, .14);
}
.gs-kit__i-ico svg { width: 19px; height: 19px; }

.gs-kit__i h3 {
    margin: 16px 0 7px;
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.016em;
}
.gs-kit__i p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--fg-muted); }

/* la spunta in alto a destra: è il segnale «incluso», ripetuto dodici volte */
.gs-kit__i-ok {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--orange);
    opacity: .34;
    transition: opacity var(--t);
}
.gs-kit__i-ok svg { width: 17px; height: 17px; }
.gs-kit__i:hover .gs-kit__i-ok { opacity: 1; }

.gs-kit__foot {
    text-align: center;
    font-size: .92rem;
    color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   8. GARANZIA
   -------------------------------------------------------------------------- */
.gs-guar { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.gs-guar__i {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: clamp(16px, 1.8vw, 22px);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
}

.gs-guar__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    color: var(--orange);
    background: rgba(255, 90, 31, .1);
}
.gs-guar__ico svg { width: 19px; height: 19px; }

.gs-guar__i > span { font-size: .92rem; line-height: 1.58; color: var(--fg-muted); }
.gs-guar__i b {
    display: block;
    margin-bottom: 3px;
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.016em;
    color: var(--fg);
}

/* Il gradino d'ingresso, col prezzo in evidenza. È un link alla scheda
   completa del Checkup più sotto: chi legge «il rischio non deve essere tuo»
   deve poter arrivare in un clic alla cosa che quel rischio lo toglie. */
.gs-risk {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: clamp(18px, 2vw, 24px);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface-2);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.gs-risk:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* la freccia dentro il titolo scivola in avanti al passaggio del mouse */
.gs-risk .arw {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 4px;
    color: var(--orange);
    transition: transform var(--t);
}
.gs-risk:hover .arw { transform: translateX(4px); }

.gs-risk__p {
    flex: none;
    font-family: var(--f-display);
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--orange);
}
.gs-risk__t { font-size: .88rem; line-height: 1.55; color: var(--fg-muted); }
.gs-risk__t b { display: block; color: var(--fg); font-size: .96rem; }

@media (max-width: 460px) {
    .gs-risk { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* La chiusura (ex .gs-final) vive ora in chrome.css: è la CTA del footer. */