/* ============================================================
   TripsBack — Home (design "Executive")
   Solo regole SPECIFICHE della home. I token --tb-* e i componenti
   .tb-* vivono in executive.css (caricato DOPO): qui non si ridefiniscono.
   Prefisso .hm-* per non collidere con i componenti condivisi.
   ============================================================ */

.page-home {
    background: var(--tb-bg);
    color: var(--tb-ink);
}

/* L'accento verde per le superfici scure ora e' un token del design system
   (--tb-emerald-bright, in executive.css): lo stesso verde dell'hero e dello
   .tb-slab del portafoglio. Qui resta solo l'alias, per non riscrivere 20 regole. */
.page-home {
    --hm-emerald-bright: var(--tb-emerald-bright);
}

/* --- Scaffolding sezioni ---------------------------------------------- */

.hm-section { padding: clamp(56px, 8vw, 100px) 0; }
.hm-section-panel { background: var(--tb-panel); }
.hm-section-cta { padding-top: 0; }

.hm-sec-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); }
.hm-sec-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; margin: 0; }
.hm-sec-head p { margin: 14px 0 0; font-size: 1.06rem; color: var(--tb-ink-soft); }
.hm-sec-head-tight { margin-bottom: 8px; }

/* Badge "Esempio" ------------------------------------------------------ */
.hm-badge {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--tb-ink-soft); background: var(--tb-panel);
    border: 1px solid var(--tb-line); border-radius: var(--tb-r-pill);
    padding: 3px 9px; white-space: nowrap;
}

/* Bottoni: varianti locali (specificità > executive .tb-btn) ------------ */
.page-home .hm-btn-lg { padding: 13px 22px; font-size: 0.95rem; }
.page-home .hm-btn-lg svg { width: 18px; height: 18px; }
.page-home .hm-btn-onink {
    background: transparent; color: #fff; border-color: rgb(255 255 255 / 32%);
}
.page-home .hm-btn-onink:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 50%); color: #fff; }

/* ============================ HERO ============================ */

.hm-hero { padding: clamp(36px, 6vw, 64px) 0 clamp(44px, 7vw, 76px); }
.hm-hero-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 64px); align-items: center;
}

.hm-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--tb-emerald-ink); background: var(--tb-emerald-soft);
    padding: 6px 12px; border-radius: var(--tb-r-pill); margin-bottom: 20px;
}
.hm-eyebrow svg { width: 15px; height: 15px; flex: none; }

.hm-hero-title { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.hm-hero-sub { margin: 20px 0 0; font-size: 1.1rem; color: var(--tb-ink-soft); max-width: 44ch; }

/* ==================== LA BARRA E IL SUO AGGANCIO ====================

   NON si stacca e riappare: si TRASFORMA.

   Tutto e' guidato da una sola variabile, --p, che il JS porta da 0 a 1 sui
   140px di scroll che precedono l'aggancio. Ogni misura della barra e' scritta
   come un'interpolazione su --p: larghezza, imbottiture, corpo del testo, raggi,
   ombra. Quando --p arriva a 1 la barra e' gia' esattamente della misura e nel
   punto in cui starebbe da agganciata, e il passaggio da flusso a `fixed` non si
   vede. Prima invece si staccava di colpo: spariva e ricompariva in cima.

   Il peso. Il design system dice: "piatto di default, l'ombra e' riservata a
   cio' che sta DAVVERO sopra al piano (dropdown, slab, sticky, BARRA DI
   RICERCA)... il senso di premium nasce dal contrasto fra piatto e sollevato".
   Il punto e' proprio quello: la barra era bianca su bianco, e non aveva NIENTE
   da cui sollevarsi. Adesso l'hero ha una sua superficie (una velatura fredda
   che sale dall'alto) e la barra ci galleggia sopra con un'ombra a piu' strati.
   ==================================================================== */

/* La superficie da cui la barra si solleva. Senza, il bianco su bianco rendeva
   l'ombra invisibile e la barra sembrava un campo di un modulo. */
/* NIENTE `position: relative` qui, e non e' una dimenticanza. L'hero e la sezione
   sotto si SOVRAPPONGONO di proposito (la barra ci sta a cavallo, vedi sotto), e
   un elemento posizionato dipinge in una fase successiva rispetto agli sfondi dei
   blocchi in flusso: con `position: relative` il bianco dell'hero copriva il
   grigio della sezione seguente proprio nella striscia che dovevano condividere,
   e lo scavalco non si vedeva. Da statico, l'ordine del DOM decide, e il grigio
   arriva dove deve. La barra passa sopra a entrambi perche' lei, quella, e'
   posizionata. */
.hm-hero {
    padding-bottom: 0;                 /* il confine se lo prende la barra */
    background:
        radial-gradient(140% 100% at 50% 0%, #EAF0FA 0%, rgb(234 240 250 / 0) 62%),
        var(--tb-bg);
}

/* LA BARRA SCAVALCA IL CONFINE: meta' sull'hero chiaro, meta' sulla sezione
   grigia sotto. Non e' un vezzo. Prima galleggiava in un vuoto bianco e sotto di
   lei arrivava uno stacco netto di colore: era un campo di un modulo appoggiato
   in fondo a una sezione. A cavallo della linea diventa l'oggetto che tiene
   insieme i due piani — ed e' l'unico punto della pagina in cui l'ombra ha
   qualcosa di piu' scuro su cui cadere, quindi finalmente si vede.

   z-index: sta SOPRA lo sfondo della sezione che scavalca. */
.hm-dock {
    --p: 0;
    position: relative; z-index: 2;
    margin-top: clamp(28px, 4vw, 40px);
    margin-bottom: clamp(-58px, -4.2vw, -44px);
}

/* La fascia. In flusso e' un contenitore e basta; agganciata diventa il piano
   fisso sotto l'header. L'imbottitura verticale c'e' SEMPRE, uguale: se
   comparisse solo da agganciata, la barra scatterebbe di 10px nell'istante
   dello scambio, e sarebbe l'unico punto in cui si vedrebbe il trucco. */
.hm-dock-band { position: relative; padding: 10px 24px; }

/* La superficie della fascia sfuma insieme a --p, quindi arriva mentre la barra
   sta ancora salendo: quando si posa, il piano sotto di lei c'e' gia'. */
.hm-dock-band::before {
    content: ''; position: absolute; inset: 0;
    background: var(--tb-bg);
    border-bottom: 1px solid var(--tb-line);
    box-shadow: 0 8px 20px -14px rgb(14 26 51 / 35%);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    opacity: var(--p);
}
.hm-dock-inner {
    position: relative; z-index: 1;   /* sopra la superficie della fascia */
    max-width: calc(920px - 160px * var(--p));   /* 920 -> 760 */
    margin: 0 auto;
}

/* --- La barra ----------------------------------------------------------
   DOPPIA CLASSE, e non e' pedanteria: `_head.php` carica il CSS di pagina PRIMA
   di executive.css, quindi a parita' di specificita' vince il design system. Da
   quando la barra porta anche la primitiva `.tb-search-form` (le serve, per lo
   spotlight e i pannelli), le sue regole hanno iniziato ad applicarsi e tutto
   cio' che scrivevo qui veniva zittito: la barra era in realta' una PILLOLA da
   999px, larga 720 e incollata a sinistra. (0,2,0) vince. */
.tb-search-form.hm-searchbar {
    display: flex; align-items: stretch;
    max-width: none; width: 100%;
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    /* A PILLOLA, come la barra dell'header nella lista hotel: e' la stessa
       barra, e due raggi diversi per lo stesso componente sono due componenti.
       (Il raggio pieno sulla barra e' pattern di settore. Cio' che NON si puo'
       fare e' il bottone a CERCHIO: quello e' il tratto riconoscibile di un
       concorrente diretto. Il nostro resta una pillola CON l'etichetta.) */
    border-radius: var(--tb-r-pill);
    padding: calc(8px - 3px * var(--p));

    /* Quattro strati, non uno. Un'ombra sola e' una macchia; quattro raggi che
       si allargano sono un oggetto che sta sopra a un piano. Si sgonfia mentre
       la barra si aggancia: da agganciata poggia sulla fascia, e un oggetto
       poggiato non ha bisogno di sembrare in volo. */
    box-shadow:
        0 1px 1px  rgb(14 26 51 / calc(4%  * (1 - var(--p)) + 2% * var(--p))),
        0 4px 8px -2px  rgb(14 26 51 / calc(7%  * (1 - var(--p)))),
        0 16px 32px -8px  rgb(14 26 51 / calc(10% * (1 - var(--p)))),
        0 34px 60px -28px rgb(14 26 51 / calc(20% * (1 - var(--p))));

    transition: box-shadow var(--tb-dur) var(--tb-ease),
                border-color var(--tb-dur) var(--tb-ease),
                background var(--tb-dur) var(--tb-ease);
}

/* Il hover dice che la barra e' viva prima ancora che la tocchi. */
.tb-search-form.hm-searchbar:hover {
    border-color: color-mix(in srgb, var(--tb-ink) 14%, var(--tb-line));
}

/* Aperta, si solleva ancora: da sotto di lei sta uscendo il pannello, e il
   rilievo lo racconta un istante prima che il pannello arrivi. */
.tb-search-form.hm-searchbar[data-open] {
    box-shadow:
        0 1px 1px  rgb(14 26 51 / 5%),
        0 6px 12px -2px  rgb(14 26 51 / 8%),
        0 22px 40px -10px rgb(14 26 51 / 13%),
        0 44px 72px -30px rgb(14 26 51 / 24%);
}

.hm-searchbar .tb-search-segment {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: calc(15px - 8px * var(--p)) calc(26px - 8px * var(--p));
    /* Anche i segmenti sono pillole: quando uno si solleva nello spotlight, la
       forma che si stacca dalla guida deve essere la stessa forma della guida. */
    border-radius: var(--tb-r-pill);
    flex: 1 1 0; min-width: 0; position: relative;
}
/* "Dove" e' il campo in cui si SCRIVE: gli serve piu' respiro degli altri due,
   che si premono e basta. */
.hm-searchbar .tb-search-where { flex: 1.4 1 0; }

.hm-searchbar .tb-search-label {
    font-size: calc(0.72rem - 0.09rem * var(--p));
    font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--tb-ink-soft);
}
.hm-searchbar .tb-text-input,
.hm-searchbar .tb-field-button {
    font-size: calc(1.05rem - 0.15rem * var(--p));
    font-weight: 600; color: var(--tb-ink);
}
/* #94A0B8 su bianco sta a 3.4:1 e il placeholder e' testo: non regge l'AA.
   --tb-ink-soft (#566079) sta a 6.4:1 e resta chiaramente un suggerimento. */
.hm-searchbar .tb-text-input::placeholder { color: var(--tb-ink-soft); font-weight: 500; }

.hm-searchbar .tb-search-submit {
    flex: none; align-self: stretch; margin-left: calc(6px - 2px * var(--p));
    border-radius: var(--tb-r-pill);
    padding: calc(15px - 7px * var(--p)) calc(28px - 9px * var(--p));
    font-size: calc(1rem - 0.1rem * var(--p));
}
.hm-searchbar .tb-search-submit svg {
    width: calc(19px - 3px * var(--p));
    height: calc(19px - 3px * var(--p));
}

/* Agganciata: sotto l'header (sticky, z-index 100), sopra la pagina, sotto il
   pannello (120). L'ordine di sovrapposizione e' una scala, non una gara. */
.hm-dock.is-docked .hm-dock-band {
    position: fixed; top: var(--tb-header-h); left: 0; right: 0; z-index: 95;
}

/* Riga fiducia */
.hm-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hm-trust li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: var(--tb-ink); }
.hm-trust svg { width: 17px; height: 17px; color: var(--tb-emerald-ink); flex: none; }

/* --- Portafoglio (illustrativo / in arrivo) --------------------------- */
.hm-wallet {
    background: var(--tb-ink); color: #fff;
    border-radius: 16px; padding: 24px; box-shadow: var(--tb-shadow);
    border: 1px solid rgb(255 255 255 / 8%);
    width: 100%; max-width: 380px; margin-inline: auto;
}
.hm-wallet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-wallet-label { font-size: 0.82rem; font-weight: 600; color: #C7D0E2; }
.hm-wallet-chip { width: 34px; height: 34px; border-radius: 9px; background: rgb(255 255 255 / 8%); display: grid; place-items: center; flex: none; }
.hm-wallet-chip svg { width: 18px; height: 18px; color: var(--hm-emerald-bright); }
/* Il saldo puo' essere "$ 80,00 + € 20,00": due valute non si sommano, si
   affiancano. A 2.6rem quella stringa sfonda la card, e body ha overflow-x:hidden,
   quindi non scorrerebbe: sparirebbe. Va lasciata andare a capo. */
.hm-wallet-balance {
    margin-top: 14px; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em;
    color: var(--hm-emerald-bright); line-height: 1.05; font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.hm-wallet-balance.is-multi { font-size: 1.7rem; }
.hm-wallet-sub { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 0.85rem; color: #D5DBE7; }
.hm-wallet-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-emerald-bright); flex: none; }
.hm-wallet-entries { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid rgb(255 255 255 / 10%); }
.hm-wallet-entries li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.86rem; }
.hm-wallet-entries .nm { color: #DBE1EE; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-wallet-entries .amt { color: var(--hm-emerald-bright); font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
/* Il prezzo pieno non e' un guadagno: non va colorato di verde-cashback. */
.hm-wallet-entries .amt.neutro { color: #DBE1EE; font-weight: 600; }
.hm-wallet-note {
    margin-top: 12px; display: flex; align-items: center; gap: 8px;
    background: rgb(49 217 146 / 12%); border: 1px solid rgb(49 217 146 / 28%);
    border-radius: 9px; padding: 8px 11px; font-size: 0.82rem; font-weight: 600; color: #CFF7E5;
}
.hm-wallet-note svg { width: 15px; height: 15px; color: var(--hm-emerald-bright); flex: none; }
.hm-wallet-cta.tb-btn { display: flex; justify-content: center; width: 100%; margin-top: 14px; }

/* Portafoglio vuoto (loggato, nessun movimento a registro): si dice, non si finge */
.hm-wallet-soon { display: block; }
.hm-soon-icon { width: 46px; height: 46px; border-radius: 12px; background: rgb(49 217 146 / 14%); display: grid; place-items: center; margin: 22px 0 16px; }
.hm-soon-icon svg { width: 24px; height: 24px; color: var(--hm-emerald-bright); }
.hm-soon-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.hm-soon-text { margin: 10px 0 0; font-size: 0.95rem; color: #D5DBE7; }

/* ===================== PAGHI TU / TE LA RIMBORSANO ===================== */

.hm-aud-radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }

.hm-aud-switch {
    display: inline-flex; background: var(--tb-bg); border: 1px solid var(--tb-line);
    border-radius: 12px; padding: 5px; gap: 4px;
}
.hm-aud-switch label {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 9px;
    font-weight: 600; font-size: 0.95rem; color: var(--tb-ink-soft); cursor: pointer;
    transition: color .16s ease-out, background-color .16s ease-out;
}
.hm-aud-switch label svg { width: 16px; height: 16px; flex: none; }
.hm-aud-switch label:hover { color: var(--tb-ink); }
#hm-aud-paghi:checked ~ .hm-aud-switch label[for="hm-aud-paghi"],
#hm-aud-rimb:checked ~ .hm-aud-switch label[for="hm-aud-rimb"] { background: var(--tb-ink); color: #fff; }
#hm-aud-paghi:focus-visible ~ .hm-aud-switch label[for="hm-aud-paghi"],
#hm-aud-rimb:focus-visible ~ .hm-aud-switch label[for="hm-aud-rimb"] { outline: 2px solid var(--tb-blue); outline-offset: 2px; }

.hm-aud-panels { margin-top: 28px; }
.hm-aud-panel { display: none; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
#hm-aud-paghi:checked ~ .hm-aud-panels .hm-aud-panel-paghi { display: grid; }
#hm-aud-rimb:checked ~ .hm-aud-panels .hm-aud-panel-rimb { display: grid; }

.hm-aud-copy h3 { font-size: 1.6rem; margin: 0 0 14px; }
.hm-aud-copy p { color: var(--tb-ink-soft); font-size: 1.04rem; max-width: 46ch; margin: 0; }
.hm-aud-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hm-aud-list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.hm-aud-list .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--tb-blue-soft); display: grid; place-items: center; flex: none; }
.hm-aud-list .ic svg { width: 18px; height: 18px; color: var(--tb-blue-deep); }
.hm-aud-list .ic.em { background: var(--tb-emerald-soft); }
.hm-aud-list .ic.em svg { color: var(--tb-emerald-ink); }
.hm-aud-list b { display: block; font-weight: 700; }
.hm-aud-list small { color: var(--tb-ink-soft); font-weight: 500; font-size: 0.9rem; }

.hm-mini { background: var(--tb-bg); border: 1px solid var(--tb-line); border-radius: var(--tb-r-card); padding: 24px; }
.hm-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hm-mini-head > span:first-child { font-size: 0.85rem; font-weight: 600; color: var(--tb-ink-soft); }
.hm-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tb-line); font-size: 0.92rem; }
.hm-mini-row:first-of-type { border-top: 0; }
.hm-mini-row .k { color: var(--tb-ink-soft); }
.hm-mini-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-mini-row .v.cash { color: var(--tb-emerald-ink); }
.hm-mini-total { margin-top: 8px; padding-top: 14px; border-top: 2px solid var(--tb-ink); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-mini-total strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

.hm-aud-reassure { margin: 26px 0 0; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tb-ink-soft); font-size: 0.98rem; }
.hm-aud-reassure svg { width: 19px; height: 19px; color: var(--tb-emerald-ink); flex: none; }

/* ===================== COME FUNZIONA (explainer) ===================== */

.hm-ex-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hm-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.hm-steps li { display: flex; gap: 14px; align-items: flex-start; }
.hm-steps .n { width: 30px; height: 30px; border-radius: 8px; background: var(--tb-ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; flex: none; }
.hm-steps b { display: block; font-weight: 700; }
.hm-steps p { color: var(--tb-ink-soft); font-size: 0.95rem; margin: 2px 0 0; }

.hm-receipt { background: var(--tb-bg); border: 1px solid var(--tb-line); border-radius: 16px; padding: 26px; max-width: 420px; width: 100%; }
.hm-rc-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; padding-bottom: 18px; border-bottom: 1px solid var(--tb-line); }
.hm-rc-head svg { width: 20px; height: 20px; color: var(--tb-blue-deep); flex: none; }
.hm-rc-head .hm-badge { margin-left: auto; }
.hm-rc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 1rem; }
.hm-rc-row .k { color: var(--tb-ink-soft); }
.hm-rc-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-rc-row.cash .k { color: var(--tb-emerald-ink); font-weight: 600; }
.hm-rc-row.cash .v { color: var(--tb-emerald-ink); }
.hm-rc-total { margin-top: 4px; padding-top: 18px; border-top: 2px dashed var(--tb-line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-rc-total .k { font-weight: 600; }
.hm-rc-total .v { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-rc-foot { margin: 16px 0 0; font-size: 0.85rem; color: var(--tb-ink-soft); }

/* ===================== CERCA HOTEL (CTA) ===================== */

.hm-cerca {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--tb-bg); border: 1px solid var(--tb-line);
    border-radius: var(--tb-r-card); padding: clamp(24px, 4vw, 40px);
}
.hm-cerca-copy { max-width: 52ch; }
.hm-cerca-copy h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.hm-cerca-copy p { margin: 12px 0 0; color: var(--tb-ink-soft); font-size: 1.05rem; }

/* ===================== BENEFICI ===================== */

.hm-benefits { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--tb-line); border-radius: var(--tb-r-card); overflow: hidden; background: var(--tb-bg); }
.hm-benefit { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.hm-benefit + .hm-benefit { box-shadow: -1px 0 0 var(--tb-line); }
.hm-benefit .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--tb-blue-soft); display: grid; place-items: center; }
.hm-benefit .ic svg { width: 22px; height: 22px; color: var(--tb-blue-deep); }
.hm-benefit h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.hm-benefit p { font-size: 0.92rem; color: var(--tb-ink-soft); margin: 0; }

/* ===================== CTA FINALE ===================== */

.hm-cta {
    background: var(--tb-ink); border-radius: 20px; padding: clamp(32px, 5vw, 56px); color: #fff;
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 4vw, 48px);
    align-items: center; position: relative; overflow: hidden;
}
.hm-cta::after {
    content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgb(36 85 255 / 35%), transparent 70%); pointer-events: none;
}
.hm-cta-copy { position: relative; }
.hm-cta-copy h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: 0; }
.hm-cta-copy p { margin: 16px 0 0; color: #D5DBE7; font-size: 1.05rem; max-width: 46ch; }
.hm-cta-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.hm-cta-wallet { background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 16px; padding: 22px; }
.hm-cta-wallet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-cta-wallet .lbl { font-size: 0.82rem; color: #C7D0E2; font-weight: 600; }
.hm-cta-wallet .big {
    font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em;
    color: var(--hm-emerald-bright); margin-top: 10px; line-height: 1.05;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.hm-cta-wallet .big.is-multi { font-size: 1.6rem; }
.hm-cta-wallet .meta { margin-top: 10px; font-size: 0.82rem; color: #D5DBE7; display: flex; justify-content: space-between; gap: 8px; }

.hm-cta-soon { background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 16px; padding: 24px; }
.hm-cta-soon .lbl { font-size: 1.05rem; font-weight: 700; color: #fff; }
.hm-cta-soon p { margin: 8px 0 0; font-size: 0.9rem; color: #D5DBE7; }
.hm-cta-soon .hm-soon-icon { margin: 0 0 14px; }

/* ===================== RESPONSIVE ===================== */

@media (max-width: 960px) {
    .hm-hero-grid { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 64px); }
    .hm-hero-sub { max-width: 56ch; }
    .hm-wallet, .hm-wallet-soon { max-width: 440px; }
    .hm-ex-grid { grid-template-columns: 1fr; gap: 36px; }
    .hm-receipt { max-width: none; }
    .hm-aud-panel { grid-template-columns: 1fr; }
    /* Tre card su due colonne: la terza occupa la riga intera, cosi' la striscia
       non resta con mezza cella vuota. */
    .hm-benefits { grid-template-columns: repeat(2, 1fr); }
    .hm-benefit:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--tb-line); box-shadow: none; }
    .hm-cta { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
    .hm-searchbar { flex-direction: column; }
    /* Impilata, il filetto verticale non ha piu' senso: i segmenti stanno uno
       SOPRA l'altro. Diventa una riga orizzontale. E resta anche a barra accesa,
       perche' qui, senza, il segmento sollevato non si distinguerebbe dal vicino. */
    .hm-searchbar .tb-search-segment + .tb-search-segment::before { content: none; }
    .hm-searchbar .tb-search-segment + .tb-search-segment {
        border-top: 1px solid var(--tb-line);
    }
    .hm-searchbar[data-open] .tb-search-segment.is-open {
        box-shadow: 0 1px 2px rgb(14 26 51 / 6%), 0 8px 20px -10px rgb(14 26 51 / 28%);
    }
    .hm-searchbar .tb-search-submit { margin: 6px 0 0; width: 100%; padding-block: 14px; }
    .hm-benefits { grid-template-columns: 1fr; }
    .hm-benefit + .hm-benefit { box-shadow: none; border-top: 1px solid var(--tb-line); }
    .hm-benefit:nth-child(3) { box-shadow: none; }
    .hm-aud-switch { display: flex; width: 100%; }
    .hm-aud-switch label { flex: 1; justify-content: center; padding-inline: 12px; }
    .hm-aud-copy h3 { font-size: 1.4rem; }
    .hm-cerca { flex-direction: column; align-items: flex-start; }
    .hm-cta-actions { width: 100%; }
    .hm-cta-actions .tb-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 400px) {
    .hm-hero-title { font-size: 2rem; }
    .hm-wallet-balance { font-size: 2.2rem; }
    .hm-aud-switch label { padding: 10px 8px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-aud-switch label { transition: none; }
}