/*
 * HOME (Pages/Home.razor) — solo le parti PROPRIE della home: hero a scene, manifesto,
 * sezione agganciata "il negozio prende vita", tour delle funzioni, Nemi, nastro dei
 * settori (card), come si inizia, prezzo, CTA finale con gli oggetti che si sparpagliano.
 * Tutto il resto (token --v2-*, contenitori, titoli, bottoni, rivelazioni, numeri, FAQ,
 * nastro) e' nel sistema comune css/site-v2.css (guida: docs/STYLE-V2.md).
 * Caricato solo da Pages/Home.razor, versionato con ?v= (aumentarlo a ogni modifica).
 *
 * Regole del movimento (come Planitude): entrate con --v2-ease-out, spostamenti con
 * --v2-ease-io, durate 500-900 ms, stagger 60-90 ms; lo stato "fermo" e' lo stato finale
 * (senza JS = html senza .v2-js, o con prefers-reduced-motion la pagina e' completa e ferma).
 * Le parti guidate dallo scroll leggono custom property scritte da js/home-nuova.js
 * (--hp hero, --sp manifesto, --p CTA finale).
 */

/* ===================================================================== */
/* 1. HERO                                                                */
/* ===================================================================== */

.hn-hero {
    --hp: 0;
    position: relative;
    height: calc(100svh + 42svh);
}
.hn-hero-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-top: var(--v2-header-h);
}
.hn-hero-media {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #1c0f0d;
    color: #fff;
    transform: scale(calc(1 - var(--hp) * 0.08));
    clip-path: inset(0 round calc(var(--hp) * 28px));
}
.hn-hero-scenes,
.hn-hero-scene,
.hn-hero-photo,
.hn-hero-video,
.hn-hero-scrim {
    position: absolute;
    inset: 0;
}
/* Una scena = poster (primo fotogramma) + video sopra, in dissolvenza incrociata. */
.hn-hero-scene {
    opacity: 0;
    transform: scale(1.07);
    transition:
        opacity 1.2s var(--v2-ease-io),
        transform 0s linear 1.2s;
}
/* Ken Burns: la scena attiva si assesta da 1.07 a 1 (1.04 col video) per tutta la sua durata. */
.hn-hero-scene[data-on] {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 1.2s var(--v2-ease-io),
        transform var(--kb, 8s) cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hn-hero-scene:has(> .hn-hero-video[data-ready]) {
    transform: scale(1.04);
}
.hn-hero-scene[data-on]:has(> .hn-hero-video[data-ready]) {
    transform: scale(1);
}
.hn-hero-photo,
.hn-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
}
/* Il video compare solo quando ha il primo fotogramma: niente lampi neri sul poster. */
.hn-hero-video {
    opacity: 0;
    transition: opacity 0.5s var(--v2-ease-io);
}
.hn-hero-video[data-ready] {
    opacity: 1;
}
/* Velatura: testo bianco leggibile anche sulle foto chiare (piu' scura al centro e in basso). */
.hn-hero-scrim {
    background:
        radial-gradient(70% 60% at 50% 52%, rgb(18 6 4 / 0.52) 0%, rgb(18 6 4 / 0.2) 70%, transparent 100%),
        linear-gradient(to bottom, rgb(18 6 4 / 0.5) 0%, rgb(18 6 4 / 0.22) 28%, rgb(18 6 4 / 0.28) 62%, rgb(18 6 4 / 0.74) 100%);
}

.hn-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    padding: 24px 20px 96px;
    text-align: center;
    text-shadow:
        0 1px 2px rgb(0 0 0 / 0.25),
        0 6px 28px rgb(0 0 0 / 0.35);
    opacity: calc(1 - var(--hp) * 1.7);
    transform: translateY(calc(var(--hp) * -56px));
}
.hn-hero-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 88px;
    aspect-ratio: 1;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, #f6f1f0 100%);
    box-shadow:
        0 14px 34px -8px rgb(0 0 0 / 0.45),
        inset 0 -1px 0 rgb(0 0 0 / 0.06);
    animation: hn-pop 1s var(--v2-ease-spring) 0.1s both;
}
/* Blocco iniziale: icona, sovratitolo, titolo e badge degli store, centrati in colonna. */
.hn-hero-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hn-hero-icon img {
    width: 44px;
    height: 44px;
}
@keyframes hn-pop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.8);
    }
}
.hn-hero-what {
    flex-shrink: 0;
    margin-top: 20px;
    max-width: 42em;
    color: rgb(255 255 255 / 0.92);
    font-size: var(--v2-lead);
    line-height: var(--v2-lead-lh);
    font-weight: 500;
    text-wrap: balance;
    animation: hn-rise 0.9s var(--v2-ease-out) 0.25s both;
}
.hn-hero-swap {
    display: grid;
    width: 100%;
    justify-items: center;
    align-items: start;
    transition: height 0.9s var(--v2-ease-out);
}
.hn-hero-swap > * {
    grid-area: 1 / 1;
}
.hn-hero-intro,
.hn-hero-phrase {
    transition:
        opacity 0.8s var(--v2-ease-out),
        transform 0.9s var(--v2-ease-out),
        filter 0.8s var(--v2-ease-out);
}
.hn-hero[data-phrase] .hn-hero-intro {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(8px);
}
.hn-hero-phrase {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
}
.hn-hero[data-phrase] .hn-hero-phrase {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: 0.25s;
}
.hn-hero-title {
    margin: 20px auto 0;
    max-width: 20ch;
    color: #fff;
    font-size: var(--v2-display);
    line-height: var(--v2-display-lh);
    letter-spacing: var(--v2-ls-heading);
    font-weight: 500;
    text-wrap: balance;
    animation: hn-rise 1s var(--v2-ease-out) 0.35s both;
}
.hn-hero-title > span {
    display: block;
}
.hn-hero-title-2 {
    color: rgb(255 255 255 / 0.78);
}
/* Badge degli store (stesse proporzioni di .px2-stores: il PNG di Google Play ha margini trasparenti). */
.hn-hero-stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    animation: hn-rise 1s var(--v2-ease-out) 0.48s both;
}
.hn-hero-stores a {
    display: inline-flex;
    border-radius: 9px;
    transition: transform 0.3s var(--v2-ease-out);
}
.hn-hero-stores a:hover {
    transform: translateY(-2px);
}
.hn-hero-stores img {
    display: block;
    width: auto;
    height: 44px;
}
.hn-hero-stores img.hn-store-gp {
    height: 64px;
    margin: -10px -8px;
}
@keyframes hn-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }
}

/* Frase rotante "Puntify / [icona] azione / contesto", sovrapposte nella stessa cella. */
.hn-hero-phrase {
    display: grid;
    justify-items: center;
    align-items: center;
    color: #fff;
    font-size: var(--v2-h2xl);
    line-height: var(--v2-h2xl-lh);
    letter-spacing: var(--v2-ls-heading);
    font-weight: 500;
}
.hn-hero-phrase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.35);
}
/* "Puntify" fisso e sempre leggibile: non partecipa alla rotazione. */
.hn-rot-lead {
    display: block;
    color: #fff;
}
.hn-rot-stack {
    display: grid;
    justify-items: center;
}
.hn-rot {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.hn-rot[data-on] {
    pointer-events: auto;
}
/* Ogni riga e' una finestra che taglia: il testo entra dal basso ed esce in alto (slot). */
.hn-rot-a,
.hn-rot-b {
    display: block;
    overflow: hidden;
    padding-block: 0.06em; /* niente discendenti tagliati (g, p, q) */
    max-width: min(18em, 100%);
}
.hn-rot-in {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28em;
    text-wrap: balance;
    transform: translateY(-110%);
    opacity: 0;
    transition:
        transform 0.55s cubic-bezier(0.55, 0, 0.75, 0),
        opacity 0.4s ease;
}
.hn-rot-b .hn-rot-in {
    transition-delay: 0.06s;
}
.hn-rot[data-on] .hn-rot-in {
    transform: none;
    opacity: 1;
    transition: none;
    animation: hn-slot-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
.hn-rot[data-on] .hn-rot-b .hn-rot-in {
    animation-delay: 0.44s;
}
@keyframes hn-slot-in {
    from {
        transform: translateY(110%);
        opacity: 0;
    }
}
/* Prima scena al caricamento: compare senza attesa dopo l'intro (gestita da hn-rise). */
.hn-rot-icon {
    width: 0.78em;
    height: 0.78em;
    flex-shrink: 0;
    stroke-width: 2;
    color: #fff;
    filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.35));
}
@media (prefers-reduced-motion: reduce) {
    .hn-rot-in,
    .hn-rot[data-on] .hn-rot-in {
        animation: none;
        transition: opacity 0.3s ease;
        transform: none;
    }
}
.hn-hero-cta {
    margin-top: 36px;
    animation: hn-rise 1s var(--v2-ease-out) 0.6s both;
}
.hn-hero .v2-btn-primary {
    text-shadow: none;
    box-shadow: 0 12px 32px -8px rgb(184 0 0 / 0.75);
}

.hn-hero-controls {
    position: absolute;
    bottom: 20px;
    inset-inline-end: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: calc(1 - var(--hp) * 2);
}
.hn-hero-controls[hidden] {
    display: none;
}
.hn-hero-dots {
    display: flex;
    gap: 6px;
}
.hn-hero-dots > i {
    position: relative;
    width: 22px;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.3);
}
.hn-hero-dots > i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform-origin: left;
    transform: scaleX(0);
}
.hn[dir="rtl"] .hn-hero-dots > i::after {
    transform-origin: right;
}
.hn-hero-dots > i[data-on]::after {
    animation: hn-fill var(--d, 7s) linear both;
    animation-play-state: paused;
}
.hn-hero-dots > i[data-on][data-run]::after {
    animation-play-state: running;
}
@keyframes hn-fill {
    to {
        transform: scaleX(1);
    }
}
.hn-hero-pause {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.3s var(--v2-ease-out);
}
.hn-hero-pause:hover {
    background: rgb(255 255 255 / 0.26);
}
.hn-hero-pause:active {
    transform: scale(0.94);
}
.hn-hero-pause .hn-i-play,
.hn-hero-pause[data-paused] .hn-i-pause {
    display: none;
}
.hn-hero-pause[data-paused] .hn-i-play {
    display: block;
}

@media (max-width: 639px) {
    .hn-hero-photo,
    .hn-hero-video {
        object-position: var(--pos-m, var(--pos, 50% 50%));
    }
    .hn-hero-content {
        padding: 16px 18px 84px;
    }
    .hn-hero-icon {
        width: 64px;
        border-radius: 16px;
    }
    .hn-hero-icon img {
        width: 32px;
        height: 32px;
    }
    .hn-hero-what {
        margin-top: 16px;
        max-width: 22em;
        font-size: 16px;
        line-height: 23px;
    }
    .hn-hero-title {
        margin-top: 14px;
    }
    .hn-hero-stores {
        margin-top: 22px;
    }
    .hn-hero-stores img {
        height: 40px;
    }
    .hn-hero-stores img.hn-store-gp {
        height: 58px;
        margin: -9px -7px;
    }
    .hn-hero-cta {
        margin-top: 28px;
    }
    /* Su telefono le righe vanno a capo: niente icona, testo centrato. */
    .hn-rot-a,
    .hn-rot-b {
        max-width: 12em;
        text-align: center;
    }
    .hn-rot-in {
        display: inline-block;
        white-space: normal;
        text-wrap: balance;
    }
    .hn-rot-icon {
        display: none;
    }
    .hn-hero-controls {
        bottom: 14px;
        inset-inline-end: 14px;
    }
}
/* Schermi bassi: via l'icona (ripete il logo dell'header), tutto piu' compatto. */
@media (max-width: 639px) and (max-height: 740px) {
    .hn-hero-icon {
        display: none;
    }
    .hn-hero-what {
        margin-top: 0;
    }
    .hn-hero-title,
    .hn-hero-phrase {
        font-size: 30px;
        line-height: 38px;
    }
    .hn-hero-stores {
        margin-top: 18px;
    }
    .hn-hero-cta {
        margin-top: 22px;
    }
}
@media (min-width: 640px) and (max-height: 760px) {
    .hn-hero-icon {
        display: none;
    }
}

/* Il foglio chiaro che sale sopra l'hero. */
.hn-sheet {
    position: relative;
    z-index: 1;
    margin-top: -42svh;
    background: var(--v2-surface);
}

/* ===================================================================== */
/* 2. MANIFESTO                                                           */
/* ===================================================================== */

.hn-statement {
    padding-block: calc(var(--v2-section-y) * 1.5) var(--v2-section-y);
}
.hn-st-text {
    --sp: 1;
    max-width: 1000px;
    margin-inline: auto;
    font-size: var(--v2-h2);
    line-height: var(--v2-h2-lh);
    letter-spacing: var(--v2-ls-heading);
    font-weight: 500;
    color: var(--v2-fg);
    text-wrap: pretty;
}
.hn-st-w {
    opacity: clamp(0.14, calc((var(--sp) - 0.14) * 2.6 * var(--n) - var(--i)), 1);
}
@media (prefers-reduced-motion: reduce) {
    .hn-st-w {
        opacity: 1;
    }
}

/* ===================================================================== */
/* 3. IL NEGOZIO PRENDE VITA (agganciata allo scroll)                     */
/* ===================================================================== */

/* Agganciata solo con JS e movimento consentito: senza, e' una sezione normale
   (primo passo e telefono fermi), niente schermate vuote da scorrere. */
.hn-build {
    --ph-scale: 1;
    position: relative;
}
.hn-build-sticky {
    display: flex;
    align-items: center;
    padding-block: var(--v2-section-y);
    overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
    .v2-js .hn-build {
        height: calc(100svh + var(--steps, 5) * 58svh);
    }
    .v2-js .hn-build-sticky {
        position: sticky;
        top: var(--v2-header-h);
        height: calc(100svh - var(--v2-header-h));
        padding-block: 0;
    }
}
.hn-build-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.hn-build-title {
    margin-top: var(--v2-head-gap);
    font-size: var(--v2-h2xl);
    line-height: var(--v2-h2xl-lh);
    letter-spacing: var(--v2-ls-heading);
    text-wrap: balance;
}
.hn-build-steps {
    display: grid;
    margin-top: 32px;
}
.hn-build-step {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    transition:
        opacity 0.5s var(--v2-ease-io),
        transform 0.7s var(--v2-ease-out),
        filter 0.5s var(--v2-ease-io);
}
.hn-build-step[data-on] {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: 0.12s;
}
.hn-build-num {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--v2-accent);
    font-variant-numeric: tabular-nums;
}
.hn-build-step-title {
    margin-top: 6px;
    font-size: var(--v2-h3);
    line-height: var(--v2-h3-lh);
    letter-spacing: var(--v2-ls-heading);
}
.hn-build-step-body {
    margin-top: 8px;
    max-width: 42ch;
    font-size: var(--v2-body);
    line-height: 1.55;
    color: var(--v2-fg-muted);
}
.hn-build-rail {
    display: flex;
    gap: 2px;
    margin-top: 22px;
    margin-inline-start: -8px;
}
.hn-build-dot {
    padding: 12px 8px;
    border: 0;
    background: none;
    cursor: pointer;
}
.hn-build-dot > i {
    position: relative;
    display: block;
    width: 30px;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--v2-border);
    transition: background-color 0.3s ease;
}
.hn-build-dot:hover > i {
    background: #d4d4da;
}
.hn-build-dot > i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--v2-accent);
    transform: scaleX(var(--fill, 0));
    transform-origin: left;
}
.hn[dir="rtl"] .hn-build-dot > i::after {
    transform-origin: right;
}

.hn-build-visual {
    position: relative;
    display: grid;
    place-items: center;
}
.hn-build-halo {
    position: absolute;
    inset: -10% -6%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(50% 50% at 50% 50%, rgb(184 0 0 / 0.14) 0%, transparent 70%),
        radial-gradient(40% 40% at 70% 30%, rgb(255 168 140 / 0.35) 0%, transparent 70%);
    filter: blur(8px);
}

/* --- telefono (300x610, scalato da --ph-scale per stare nello schermo) --- */
.hn-phone {
    position: relative;
    width: calc(300px * var(--ph-scale));
    height: calc(610px * var(--ph-scale));
}
.hn-phone > .hn-phone-island,
.hn-phone > .hn-phone-screen {
    position: absolute;
}
.hn-phone::before {
    /* cornice */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 610px;
    border-radius: 50px;
    background: linear-gradient(145deg, #2a2a2e, #0e0e10 60%, #26262a);
    box-shadow:
        0 50px 90px -40px rgb(var(--v2-shadow-rgb) / 0.55),
        0 0 0 1px rgb(0 0 0 / 0.4),
        inset 0 0 0 2px rgb(255 255 255 / 0.08);
    transform: scale(var(--ph-scale));
    transform-origin: 0 0;
}
.hn-phone-screen {
    top: 0;
    left: 0;
    width: 280px;
    height: 590px;
    overflow: hidden;
    border-radius: 40px;
    background: #f6f6f8;
    color: var(--v2-fg);
    transform: translate(calc(10px * var(--ph-scale)), calc(10px * var(--ph-scale))) scale(var(--ph-scale));
    transform-origin: 0 0;
    direction: inherit;
    text-shadow: none;
}
.hn-phone-island {
    z-index: 3;
    top: calc(22px * var(--ph-scale));
    left: 50%;
    width: calc(86px * var(--ph-scale));
    height: calc(24px * var(--ph-scale));
    margin-left: calc(-43px * var(--ph-scale));
    border-radius: 999px;
    background: #0b0b0c;
}

.hn-scr {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 58px 18px 20px;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(6px);
    transition:
        opacity 0.45s var(--v2-ease-io),
        transform 0.6s var(--v2-ease-out),
        filter 0.45s var(--v2-ease-io);
    pointer-events: none;
}
.hn-scr[data-on] {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: 0.08s;
}
.hn-scr-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hn-scr-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--v2-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.hn-scr-avatar-soft {
    background: var(--v2-accent-bg);
    color: var(--v2-accent);
}
.hn-scr-shop {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hn-scr-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v2-fg-subtle);
}
.hn-scr-btn {
    display: grid;
    place-items: center;
    height: 46px;
    margin-top: auto;
    border-radius: 14px;
    background: var(--v2-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.hn-toast {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #17171a;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 16px 30px -12px rgb(0 0 0 / 0.5);
}
.hn-toast-ok svg {
    flex-shrink: 0;
    color: #6ee7a0;
}

/* fidelizzazione */
.hn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 16px 14px;
    border-radius: 20px;
    background:
        radial-gradient(90% 80% at 100% 0%, rgb(255 255 255 / 0.22), transparent 60%),
        linear-gradient(140deg, #d11c12 0%, #b80000 55%, #8f0000 100%);
    color: #fff;
    box-shadow: 0 16px 30px -16px rgb(184 0 0 / 0.7);
}
.hn-card-label {
    font-size: 12px;
    opacity: 0.85;
}
.hn-card-points {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.hn-card-bar {
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: rgb(255 255 255 / 0.25);
}
.hn-card-bar > i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transform-origin: left;
}
.hn[dir="rtl"] .hn-card-bar > i {
    transform-origin: right;
}
.hn-card-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    opacity: 0.95;
}
.hn-card-reward b {
    margin-inline-start: auto;
    font-weight: 700;
}
.hn-card-plus {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--v2-accent);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
}
.hn-qr {
    position: relative;
    display: grid;
    place-items: center;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    overflow: hidden;
}
.hn-qr-grid {
    display: grid;
    grid-template-columns: repeat(7, 14px);
    gap: 3px;
}
.hn-qr-grid > i {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #f0f0f3;
}
.hn-qr-grid > i.on {
    background: #1a1a1d;
}
.hn-qr-scan {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 12%;
    height: 2px;
    border-radius: 2px;
    background: var(--v2-accent);
    box-shadow: 0 0 14px 2px rgb(184 0 0 / 0.55);
    opacity: 0;
}

/* prenotazioni */
.hn-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.hn-slot {
    display: grid;
    place-items: center;
    height: 40px;
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hn-slot.taken {
    border-color: transparent;
    background: #ececf0;
    color: #b0b2ba;
    text-decoration: line-through;
}
.hn-slot.pick {
    border-color: var(--v2-accent);
    background: var(--v2-accent);
    color: #fff;
}

/* ordini */
.hn-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hn-items li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.hn-item-thumb {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
}
.hn-item-thumb-0 {
    background: radial-gradient(circle at 50% 45%, #f5e6d3 0 35%, #8a5a3b 36% 52%, #e9dccb 53%);
}
.hn-item-thumb-1 {
    background: linear-gradient(140deg, #f3c27a, #d58b3a);
}
.hn-item-thumb-2 {
    background: radial-gradient(circle at 50% 50%, #ffb347 0 45%, #ff8c1a 46% 60%, #fff1dc 61%);
}
.hn-item-name {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}
.hn-item-name small {
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-fg-subtle);
}
.hn-item-qty {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--v2-accent-bg);
    color: var(--v2-accent);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.hn-item-qty > i {
    display: block;
    height: 30px;
    font-style: normal;
    line-height: 30px;
    transform: translateY(-100%);
}
.hn-total {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px;
    font-size: 14px;
    color: var(--v2-fg-muted);
}
.hn-total b {
    color: var(--v2-fg);
}

/* elimina code */
.hn-scr-queue {
    align-items: center;
    text-align: center;
    padding-top: 74px;
}
.hn-ticket {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 132px;
    margin-bottom: 8px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / 0.35);
    -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.hn-ticket span {
    font-size: 54px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--v2-accent);
    font-variant-numeric: tabular-nums;
}
.hn-countdown {
    height: 64px;
    overflow: hidden;
}
.hn-countdown-track {
    display: flex;
    flex-direction: column;
    transform: translateY(-192px);
}
.hn-countdown-track > i {
    display: block;
    height: 64px;
    font-size: 52px;
    font-style: normal;
    font-weight: 500;
    line-height: 64px;
    font-variant-numeric: tabular-nums;
}
.hn-turn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--v2-success-bg);
    color: var(--v2-success);
    font-size: 15px;
    font-weight: 700;
}

/* Nemi */
.hn-call,
.hn-nemi-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hn-call {
    padding: 10px 12px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.hn-call img,
.hn-nemi-bar img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
}
.hn-call-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.hn-call-who b {
    font-size: 15px;
    font-weight: 600;
}
.hn-call-who small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--v2-success);
}
.hn-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
}
.hn-wave > i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--v2-accent);
    transform: scaleY(0.35);
}
.hn-bubbles {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.hn-bubble {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.42;
}
.hn-bubble-user {
    align-self: flex-end;
    border-end-end-radius: 6px;
    background: var(--v2-accent);
    color: #fff;
}
.hn-bubble-ai {
    align-self: flex-start;
    border-end-start-radius: 6px;
    background: #fff;
    color: var(--v2-fg);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.hn-bubble-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--v2-success-bg);
    color: var(--v2-success);
    font-size: 12.5px;
    font-weight: 600;
}

/* decorazioni intorno al telefono */
.hn-float {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    color: var(--v2-accent);
    box-shadow: 0 18px 36px -16px rgb(var(--v2-shadow-rgb) / 0.45);
    animation: hn-float 6s ease-in-out infinite alternate;
}
.hn-float-a {
    top: 14%;
    left: calc(50% - 230px);
}
.hn-float-b {
    bottom: 18%;
    right: calc(50% - 230px);
    animation-delay: -2.5s;
}
@keyframes hn-float {
    from {
        transform: translate3d(0, -8px, 0) rotate(-4deg);
    }
    to {
        transform: translate3d(0, 8px, 0) rotate(4deg);
    }
}

/* --- animazioni delle schermate: partono a ogni attivazione ([data-on]) --- */
@media (prefers-reduced-motion: no-preference) {
    .v2-js .hn-scr-loyalty[data-on] .hn-card-bar > i {
        animation: hn-bar 1s var(--v2-ease-out) 0.55s both;
    }
    .v2-js .hn-scr-loyalty[data-on] .hn-card-plus {
        animation: hn-plus 1.6s var(--v2-ease-out) 0.35s both;
    }
    .v2-js .hn-scr-loyalty[data-on] .hn-qr-scan {
        animation: hn-scan 1.1s var(--v2-ease-io) 0s 1 both;
    }
    .v2-js .hn-scr[data-on] .hn-toast {
        animation: hn-toast 0.6s var(--v2-ease-spring) var(--toast, 1.7s) both;
    }
    .v2-js .hn-scr-booking {
        --toast: 1.75s;
    }
    .v2-js .hn-scr-order {
        --toast: 2.2s;
    }
    .v2-js .hn-scr-booking[data-on] .hn-slot.pick {
        animation: hn-pick 0.6s var(--v2-ease-out) 0.55s both;
    }
    .v2-js .hn-scr-booking[data-on] .hn-scr-btn,
    .v2-js .hn-scr-order[data-on] .hn-scr-btn {
        animation: hn-press 0.45s ease var(--press, 1.3s) both;
    }
    .v2-js .hn-scr-order {
        --press: 1.85s;
    }
    .v2-js .hn-scr-order[data-on] .hn-item-qty > i {
        animation: hn-qty 0.45s var(--v2-ease-out) calc(0.4s + var(--k) * 0.38s) both;
    }
    .v2-js .hn-scr-order[data-on] .hn-items li {
        animation: hn-row 0.6s var(--v2-ease-out) calc(0.4s + var(--k) * 0.38s) both;
    }
    .v2-js .hn-scr-queue[data-on] .hn-ticket {
        animation: hn-ticket 0.8s var(--v2-ease-spring) 0.1s backwards;
    }
    .v2-js .hn-scr-queue[data-on] .hn-countdown-track {
        animation: hn-count 2.6s steps(1, end) 0.5s both;
    }
    .v2-js .hn-scr-queue[data-on] .hn-turn {
        animation: hn-turn 0.7s var(--v2-ease-spring) 3.1s backwards;
    }
    .v2-js .hn-scr-queue[data-on] .hn-ticket span {
        animation: hn-ticket-go 0.6s ease 3.1s both;
    }
    .v2-js .hn-scr-nemi[data-on] .hn-bubble {
        animation: hn-bubble 0.55s var(--v2-ease-out) calc(0.35s + var(--k) * 0.85s) backwards;
    }
    .v2-js .hn-wave > i {
        animation: hn-wave 1.1s ease-in-out infinite;
    }
    .v2-js .hn-wave > i:nth-child(2) {
        animation-delay: -0.2s;
    }
    .v2-js .hn-wave > i:nth-child(3) {
        animation-delay: -0.45s;
    }
    .v2-js .hn-wave > i:nth-child(4) {
        animation-delay: -0.7s;
    }
    .v2-js .hn-wave > i:nth-child(5) {
        animation-delay: -0.9s;
    }
}
/* Senza JS / reduced-motion resta lo stato finale (premio sbloccato, ordine inviato,
   conto alla rovescia a zero): toast visibili, "+30" nascosto, quantita' a 1. */
@keyframes hn-bar {
    from {
        transform: scaleX(0.88);
    }
    to {
        transform: scaleX(1);
    }
}
@keyframes hn-plus {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.7);
    }
    20%,
    70% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}
@keyframes hn-scan {
    0% {
        opacity: 0;
        top: 12%;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 86%;
    }
}
@keyframes hn-toast {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes hn-pick {
    from {
        border-color: var(--v2-border);
        background: #fff;
        color: var(--v2-fg);
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}
@keyframes hn-press {
    50% {
        transform: scale(0.95);
        filter: brightness(0.9);
    }
}
@keyframes hn-qty {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes hn-row {
    40% {
        box-shadow: 0 0 0 2px rgb(184 0 0 / 0.35);
    }
}
@keyframes hn-ticket {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
}
@keyframes hn-count {
    0% {
        transform: translateY(0);
    }
    33% {
        transform: translateY(-64px);
    }
    66% {
        transform: translateY(-128px);
    }
    100% {
        transform: translateY(-192px);
    }
}
@keyframes hn-turn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.9);
    }
}
@keyframes hn-ticket-go {
    to {
        color: var(--v2-success);
    }
}
@keyframes hn-bubble {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
}
@keyframes hn-wave {
    0%,
    100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

@media (max-width: 1023px) {
    .hn-build {
        --ph-scale: 0.72;
    }
    .hn-build-sticky {
        align-items: flex-start;
    }
    .hn-build-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .hn-build-title {
        font-size: var(--v2-h2);
        line-height: var(--v2-h2-lh);
    }
    .hn-build-steps {
        margin-top: 14px;
    }
    .hn-build-step-title {
        font-size: 20px;
        line-height: 26px;
    }
    .hn-build-step-body {
        font-size: 15px;
        line-height: 1.5;
    }
    .hn-build-rail {
        margin-top: 6px;
    }
    .hn-float {
        display: none;
    }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    .v2-js .hn-build {
        height: calc(100svh + var(--steps, 5) * 62svh);
    }
    .v2-js .hn-build-sticky {
        padding-top: 20px;
    }
}

/* ===================================================================== */
/* 4. FUNZIONALITA' (accordion + foto)                                    */
/* ===================================================================== */

.hn-tour-section {
    background: var(--v2-canvas);
}
.hn-tour {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr);
    gap: calc(var(--v2-grid-gap) * 2);
    align-items: start;
    margin-top: var(--v2-head-to-content);
}
.hn-tour-item {
    position: relative;
    border-bottom: 1px solid var(--v2-border);
}
.hn-tour-head {
    margin: 0;
    font: inherit;
}
.hn-tour-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 22px 0;
    border: 0;
    background: none;
    color: var(--v2-fg-muted);
    font: inherit;
    font-size: var(--v2-feature);
    line-height: var(--v2-feature-lh);
    font-weight: 400;
    text-align: start;
    cursor: pointer;
    transition: color 0.3s ease;
}
.hn-tour-item[data-open] .hn-tour-trigger {
    color: var(--v2-fg);
}
@media (hover: hover) {
    .hn-tour-trigger:hover {
        color: var(--v2-fg);
    }
}
.hn-tour-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--v2-surface);
    color: var(--v2-fg-subtle);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}
.hn-tour-item[data-open] .hn-tour-ico {
    background: var(--v2-accent);
    color: #fff;
}
.hn-tour-name {
    flex: 1;
}
.hn-tour-sign {
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.hn-tour-sign::before,
.hn-tour-sign::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
        transform 0.5s var(--v2-ease-out),
        opacity 0.3s ease;
}
.hn-tour-sign::after {
    transform: rotate(90deg);
}
.hn-tour-item[data-open] .hn-tour-sign::after {
    transform: rotate(0deg);
    opacity: 0;
}
.hn-tour-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.6s var(--v2-ease-out);
}
.v2-js .hn-tour-item:not([data-open]) .hn-tour-panel {
    grid-template-rows: 0fr;
}
.hn-tour-panel-inner {
    min-height: 0;
    overflow: hidden;
    padding-inline-start: 54px;
}
.hn-tour-body,
.hn-tour-bullets,
.hn-tour-panel-inner > .v2-link {
    transition:
        opacity 0.4s ease,
        transform 0.6s var(--v2-ease-out);
}
.v2-js .hn-tour-item:not([data-open]) :is(.hn-tour-body, .hn-tour-bullets, .v2-link) {
    opacity: 0;
    transform: translateY(6px);
}
.hn-tour-item[data-open] :is(.hn-tour-body, .hn-tour-bullets, .v2-link) {
    transition-delay: 0.15s;
}
.hn-tour-body {
    max-width: 46ch;
    color: var(--v2-fg-muted);
}
.hn-tour-bullets {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.hn-tour-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
}
.hn-tour-bullets svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--v2-accent);
    stroke-width: 2.4;
}
.hn-tour-panel-inner > .v2-link {
    margin: 16px 0 24px;
    font-size: 15px;
}
.hn-tour-mimg {
    display: none;
}
.hn-tour-progress {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    overflow: hidden;
}
.hn-tour-progress > i {
    display: block;
    height: 100%;
    background: var(--v2-accent);
    transform-origin: left;
    transform: scaleX(0);
}
.hn[dir="rtl"] .hn-tour-progress > i {
    transform-origin: right;
}
.hn-tour-item[data-run] .hn-tour-progress > i {
    animation: hn-fill var(--d, 6s) linear both;
}
.hn-tour-item[data-open]:not([data-run]) .hn-tour-progress > i {
    transform: scaleX(1);
}

.hn-tour-stage {
    --mx: 0;
    --my: 0;
    position: sticky;
    top: calc(var(--v2-header-h) + 32px);
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: var(--v2-r-media);
    isolation: isolate;
}
.hn-tour-stage-bg {
    position: absolute;
    inset: -6%;
    background:
        radial-gradient(70% 60% at 8% 6%, rgb(184 0 0 / 0.16) 0%, transparent 70%),
        radial-gradient(70% 60% at 96% 96%, rgb(255 150 110 / 0.3) 0%, transparent 70%),
        linear-gradient(145deg, var(--v2-soft-a), var(--v2-soft-b) 60%, var(--v2-soft-c));
    transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -14px), 0);
    transition: transform 0.8s var(--v2-ease-out);
}
.hn-tour-shot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 36px 70px -28px rgb(var(--v2-shadow-rgb) / 0.5),
        0 0 0 1px rgb(var(--v2-shadow-rgb) / 0.08);
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(calc(var(--mx) * 12px), calc(var(--my) * 10px), 0) scale(0.95);
    filter: blur(10px);
    transition:
        opacity 0.7s var(--v2-ease-io),
        transform 0.9s var(--v2-ease-out),
        filter 0.7s var(--v2-ease-io);
}
.hn-tour-shot[data-state="before"] {
    transform: translate(-50%, -50%) scale(1.04);
}
.hn-tour-shot[data-state="on"] {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(calc(var(--mx) * 12px), calc(var(--my) * 10px), 0);
    filter: none;
    transition-delay: 0.08s;
}
.hn-tour-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
    .hn-tour-shot[data-state="on"] img {
        animation: hn-kb 7s var(--v2-ease-out) both;
    }
}
@keyframes hn-kb {
    from {
        transform: scale(1.06);
    }
}

@media (max-width: 1023px) {
    .hn-tour {
        grid-template-columns: minmax(0, 1fr);
    }
    .hn-tour-stage {
        display: none;
    }
    .hn-tour-panel-inner {
        padding-inline-start: 0;
    }
    .hn-tour-mimg {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        margin-bottom: 22px;
        object-fit: cover;
        border-radius: 18px;
    }
    .hn-tour-panel-inner > .v2-link {
        display: inline-flex;
        margin-bottom: 16px;
    }
}

/* ===================================================================== */
/* 6. NEMI                                                                */
/* ===================================================================== */

.hn-nemi-section {
    background: var(--v2-surface);
}
.hn-nemi {
    --mx: 0;
    --my: 0;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 640px;
    margin-top: var(--v2-head-to-content);
    padding: 96px 24px;
    overflow: hidden;
    border-radius: var(--v2-r-banner);
    background:
        radial-gradient(70% 60% at 12% 8%, #e8513b 0%, transparent 60%),
        radial-gradient(60% 60% at 92% 92%, #f59a6b 0%, transparent 60%),
        linear-gradient(135deg, #6e0000 0%, #b80000 52%, #d63b26 100%);
    isolation: isolate;
    perspective: 1400px;
}
.hn-nemi-glow {
    position: absolute;
    inset: -30%;
    z-index: -1;
    background: radial-gradient(30% 30% at 50% 50%, rgb(255 255 255 / 0.2), transparent 70%);
    transform: translate3d(calc(var(--mx) * 30%), calc(var(--my) * 30%), 0);
    transition: transform 1s var(--v2-ease-out);
}
.hn-nemi-window {
    position: relative;
    z-index: 2;
    width: min(460px, 100%);
    overflow: hidden;
    border-radius: var(--v2-r-media);
    background: #f6f6f8;
    box-shadow:
        0 50px 100px -40px rgb(40 0 0 / 0.8),
        0 0 0 1px rgb(255 255 255 / 0.18);
    transform: rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 7deg));
    transition: transform 0.8s var(--v2-ease-out);
}
.hn-nemi-bar {
    padding: 14px 16px;
    border-bottom: 1px solid var(--v2-border);
    background: #fff;
}
.hn-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6);
    animation: hn-ping 2.4s ease-out infinite;
}
@keyframes hn-ping {
    70%,
    100% {
        box-shadow: 0 0 0 8px rgb(34 197 94 / 0);
    }
}
.hn-nemi .hn-bubbles {
    padding: 22px 18px 26px;
}
.hn-nemi .hn-bubble {
    font-size: 15px;
    padding: 11px 15px;
}
.hn-typing-b {
    display: none;
}
.hn-typing-b > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b5b7bf;
    animation: hn-dot 1s ease-in-out infinite;
}
.hn-typing-b > i:nth-child(2) {
    animation-delay: 0.15s;
}
.hn-typing-b > i:nth-child(3) {
    animation-delay: 0.3s;
}
@keyframes hn-dot {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
}
.hn-nemi-orbit {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.hn-nemi-item {
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%) translate3d(calc(var(--mx) * var(--z) * 40px), calc(var(--my) * var(--z) * 34px), 0);
    transition: transform 0.7s var(--v2-ease-out);
}
.hn-nemi-tile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 7px;
    border-radius: 16px;
    background: #fff;
    color: var(--v2-fg);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: auto;
    box-shadow:
        0 18px 40px -14px rgb(40 0 0 / 0.55),
        0 0 0 1px rgb(0 0 0 / 0.04);
    animation: hn-bob var(--float, 6s) ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.8s);
}
.hn[dir="rtl"] .hn-nemi-tile {
    padding: 7px 7px 7px 16px;
}
.hn-nemi-tile-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--v2-accent-bg);
    color: var(--v2-accent);
}
@keyframes hn-bob {
    from {
        transform: translateY(-7px);
    }
    to {
        transform: translateY(7px);
    }
}
@media (prefers-reduced-motion: no-preference) {
    .v2-js .hn-nemi:not([data-v2-shown]) :is(.hn-bubble, .hn-bubble-chip, .hn-nemi-item) {
        opacity: 0;
    }
    .v2-js .hn-nemi[data-v2-shown] .hn-nemi-item {
        animation: hn-orbit-in 0.9s var(--v2-ease-out) backwards;
        animation-delay: calc(200ms + var(--i) * 90ms);
    }
    /* scaletta: bolla k a 0.4s + k*1.2s; la risposta di Nemi arriva dopo 0.9s di puntini */
    .v2-js .hn-nemi[data-v2-shown] :is(.hn-bubble, .hn-bubble-chip) {
        animation: hn-bubble 0.6s var(--v2-ease-out) backwards;
        animation-delay: calc(0.4s + var(--k) * 1.2s);
    }
    .v2-js .hn-nemi[data-v2-shown] .hn-bubble-ai {
        animation-delay: calc(1.3s + var(--k) * 1.2s);
    }
    .v2-js .hn-nemi .hn-typing-b {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: 4px;
        max-height: 0;
        margin-bottom: -9px;
        padding: 0 15px;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        opacity: 0;
    }
    .v2-js .hn-nemi[data-v2-shown] .hn-typing-b {
        animation: hn-typing-b 0.9s ease both;
        animation-delay: calc(0.4s + var(--k) * 1.2s);
    }
}
@keyframes hn-orbit-in {
    from {
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.6);
    }
}
@keyframes hn-typing-b {
    0%,
    100% {
        opacity: 0;
        max-height: 0;
        padding-block: 0;
        margin-bottom: -9px;
    }
    20%,
    80% {
        opacity: 1;
        max-height: 44px;
        padding-block: 13px;
        margin-bottom: 0;
    }
}
@media (max-width: 899px) {
    .hn-nemi {
        display: flex;
        flex-direction: column;
        gap: 28px;
        min-height: 0;
        padding: 40px 16px;
        border-radius: var(--v2-r-card);
    }
    .hn-nemi-orbit {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .hn-nemi-item {
        position: static;
        transform: none;
    }
    .hn-nemi-tile {
        font-size: 13.5px;
        animation: none;
    }
    .v2-js .hn-nemi[data-v2-shown] .hn-nemi-item {
        animation-name: hn-rise;
    }
}

/* ===================================================================== */
/* 7. SETTORI (nastro)                                                    */
/* ===================================================================== */

.hn-sectors {
    overflow: hidden;
}
.hn-mq-card {
    position: relative;
    display: block;
    width: 260px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--v2-r-media);
    background: var(--v2-canvas);
    text-decoration: none;
    isolation: isolate;
}
.hn-mq-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--v2-ease-out);
}
.hn-mq-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.72) 100%);
}
.hn-mq-card:hover img {
    transform: scale(1.06);
}
.hn-mq-name {
    position: absolute;
    inset-inline: 18px;
    bottom: 16px;
    z-index: 1;
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    text-align: start;
    unicode-bidi: plaintext;
    text-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}
@media (max-width: 767px) {
    .hn-mq-card {
        width: 200px;
    }
    .hn-mq-name {
        font-size: 17px;
        line-height: 22px;
    }
}

/* ===================================================================== */
/* 8. COME SI INIZIA                                                      */
/* ===================================================================== */

.hn-setup {
    background: var(--v2-canvas);
}
.hn-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--v2-grid-gap) * 2);
    align-items: center;
}
.hn-steps {
    display: grid;
    margin-top: 32px;
    border-top: 1px solid var(--v2-border);
}
.hn-steps > li {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--v2-border);
}
.hn-step-num {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.hn-step-num svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}
.hn-step-num circle {
    fill: var(--v2-surface);
    stroke: var(--v2-accent);
    stroke-width: 1.6;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}
.hn-step-num b {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-accent);
}
@media (prefers-reduced-motion: no-preference) {
    .v2-js .hn-steps > li .hn-step-num circle {
        transition: stroke-dashoffset 0.8s ease;
        transition-delay: calc(var(--i, 0) * 90ms + 0.25s);
    }
    .v2-js .hn-steps > li:not([data-v2-shown]) .hn-step-num circle {
        stroke-dashoffset: 1;
    }
}
.hn-step-title {
    font-size: 19px;
    line-height: 26px;
    font-weight: 600;
}
.hn-step-body {
    margin-top: 4px;
    color: var(--v2-fg-muted);
}
.hn-setup-cta {
    margin-top: 32px;
}

.hn-setup-visual {
    position: relative;
}
.hn-win {
    overflow: hidden;
    border-radius: var(--v2-r-media);
    background: #fff;
    box-shadow:
        0 40px 80px -36px rgb(var(--v2-shadow-rgb) / 0.4),
        0 0 0 1px rgb(0 0 0 / 0.05);
}
.hn-win-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--v2-border-subtle);
    background: var(--v2-subtle);
}
.hn-win-bar > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e2e7;
}
.hn-win-bar > span {
    margin-inline: auto;
    padding: 3px 14px;
    border-radius: 8px;
    background: #fff;
    color: var(--v2-fg-subtle);
    font-size: 12px;
    direction: ltr;
}
.hn-win-body {
    position: relative;
    padding: 26px 28px 30px;
}
.hn-win-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v2-fg-subtle);
}
.hn-win-input {
    display: flex;
    align-items: center;
    height: 46px;
    margin-bottom: 22px;
    padding-inline: 14px;
    border: 1.5px solid var(--v2-accent);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgb(184 0 0 / 0.08);
    font-size: 16px;
    font-weight: 500;
}
.hn-caret {
    width: 2px;
    height: 20px;
    margin-inline-start: 1px;
    background: var(--v2-accent);
    animation: hn-caret 1s steps(1) infinite;
}
@keyframes hn-caret {
    50% {
        opacity: 0;
    }
}
.hn-toggles {
    display: grid;
    gap: 8px;
}
.hn-toggles > li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--v2-border-subtle);
    border-radius: 14px;
}
.hn-toggle-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--v2-accent-bg);
    color: var(--v2-accent);
}
.hn-toggle-name {
    flex: 1;
    font-size: 14.5px;
    font-weight: 500;
}
/* toggle iOS (come .cfg-toggle dell'app): acceso di default = stato finale */
.hn-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #34c759;
    transition: background-color 0.3s ease;
}
.hn-toggle > i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
    transform: translateX(18px);
    transition: transform 0.35s var(--v2-ease-spring);
}
.hn-setup-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 14px;
    background: var(--v2-success-bg);
    color: var(--v2-success);
    font-size: 15px;
    font-weight: 700;
}
.hn-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hn-confetti > i {
    position: absolute;
    bottom: 70px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
}
.hn-confetti > i:nth-child(odd) {
    background: var(--v2-accent);
}
.hn-confetti > i:nth-child(even) {
    background: #f59a6b;
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .v2-js .hn-setup-visual:not([data-run]) .hn-toggle {
        background: #e4e4e9;
    }
    .v2-js .hn-setup-visual:not([data-run]) .hn-toggle > i {
        transform: none;
    }
    .v2-js .hn-setup-visual[data-run] .hn-toggle {
        transition-delay: calc(1.3s + var(--k) * 0.32s);
    }
    .v2-js .hn-setup-visual[data-run] .hn-toggle > i {
        transition-delay: calc(1.3s + var(--k) * 0.32s);
    }
    .v2-js .hn-setup-visual:not([data-run]) .hn-setup-done {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    .v2-js .hn-setup-visual[data-run] .hn-setup-done {
        animation: hn-toast 0.6s var(--v2-ease-spring) 3.1s both;
    }
    .v2-js .hn-setup-visual[data-run] .hn-confetti > i {
        animation: hn-confetti 1.3s var(--v2-ease-out) 3.15s both;
    }
}
.hn-confetti > i:nth-child(1) { --cx: -150px; --cy: -120px; --cr: 200deg; }
.hn-confetti > i:nth-child(2) { --cx: -90px; --cy: -170px; --cr: -120deg; }
.hn-confetti > i:nth-child(3) { --cx: -30px; --cy: -150px; --cr: 90deg; }
.hn-confetti > i:nth-child(4) { --cx: 40px; --cy: -180px; --cr: -200deg; }
.hn-confetti > i:nth-child(5) { --cx: 100px; --cy: -140px; --cr: 160deg; }
.hn-confetti > i:nth-child(6) { --cx: 160px; --cy: -110px; --cr: -90deg; }
.hn-confetti > i:nth-child(7) { --cx: -180px; --cy: -60px; --cr: 120deg; }
.hn-confetti > i:nth-child(8) { --cx: 190px; --cy: -50px; --cr: -160deg; }
@keyframes hn-confetti {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0);
    }
    8% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--cx), var(--cy)) rotate(var(--cr));
    }
}
@media (max-width: 1023px) {
    .hn-setup-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 479px) {
    .hn-win-body {
        padding: 20px 16px 22px;
    }
}

/* ===================================================================== */
/* 9. PREZZO                                                              */
/* ===================================================================== */

.hn-price {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    max-width: 1080px;
    margin: var(--v2-head-to-content) auto 0;
    overflow: hidden;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-card);
    background: #fff;
    box-shadow: 0 30px 60px -40px rgb(var(--v2-shadow-rgb) / 0.35);
}
.hn-price-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px;
    background:
        radial-gradient(70% 60% at 0% 0%, rgb(184 0 0 / 0.1) 0%, transparent 70%),
        linear-gradient(160deg, var(--v2-soft-a), var(--v2-soft-b));
}
.hn-price-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: clamp(64px, 8vw, 96px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
.hn-price-cur {
    font-size: 0.45em;
    letter-spacing: 0;
    color: var(--v2-fg-muted);
}
.hn-price-unit {
    margin-top: 10px;
    font-size: var(--v2-lead);
    font-weight: 500;
}
.hn-price-year {
    margin-top: 6px;
    color: var(--v2-fg-muted);
}
.hn-price-main .v2-btn {
    margin-top: 28px;
}
.hn-price-vat {
    margin-top: 14px;
    font-size: 13px;
    color: var(--v2-fg-subtle);
}
.hn-price-list {
    display: grid;
    align-content: center;
    gap: 16px;
    padding: 48px;
}
.hn-price-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 24px;
}
.hn-price-check {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--v2-success-bg);
}
.hn-price-check svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--v2-success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 1;
}
@media (prefers-reduced-motion: no-preference) {
    .v2-js .hn-price .hn-price-list li {
        transition:
            opacity 0.6s ease,
            transform 0.7s var(--v2-ease-out);
        transition-delay: calc(0.3s + var(--k) * 0.09s);
    }
    .v2-js .hn-price:not([data-v2-shown]) .hn-price-list li {
        opacity: 0;
        transform: translateX(12px);
    }
    .v2-js .hn-price .hn-price-check svg {
        transition: stroke-dashoffset 0.5s ease;
        transition-delay: calc(0.55s + var(--k) * 0.09s);
    }
    .v2-js .hn-price:not([data-v2-shown]) .hn-price-check svg {
        stroke-dashoffset: 1;
    }
}
@media (max-width: 899px) {
    .hn-price {
        grid-template-columns: minmax(0, 1fr);
    }
    .hn-price-main,
    .hn-price-list {
        padding: 32px 24px;
    }
}

/* ===================================================================== */
/* 11. CTA FINALE                                                         */
/* ===================================================================== */

.hn-cta-section {
    padding-top: 0;
    background: var(--v2-canvas);
}
.hn-cta {
    --p: 1;
}
.hn-cta-card {
    --rx: min(46cqw, 520px);
    --ry: 300px;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 700px;
    padding: 150px 24px;
    overflow: hidden;
    border-radius: var(--v2-r-banner);
    background:
        radial-gradient(55% 55% at 50% 45%, #fff 0%, transparent 72%),
        linear-gradient(150deg, var(--v2-soft-a) 0%, var(--v2-soft-b) 50%, var(--v2-soft-c) 100%);
    container-type: inline-size;
    isolation: isolate;
}
.hn-cta-sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40% 40% at 15% 20%, rgb(184 0 0 / 0.14), transparent 70%),
        radial-gradient(40% 40% at 85% 80%, rgb(245 154 107 / 0.25), transparent 70%);
}
.hn-cta-items {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hn-cta-item {
    --px: var(--x);
    --py: var(--y);
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(80px * var(--s));
    aspect-ratio: 1;
    opacity: clamp(0, calc(var(--p) * 3 - var(--k) * 0.35), 1);
    transform: translate(-50%, -50%) translate(calc(var(--px) * var(--rx) * var(--p)), calc(var(--py) * var(--ry) * var(--p)))
        rotate(calc(var(--r) * (1 - var(--p)))) scale(calc(0.5 + 0.5 * var(--p)));
}
.hn-cta-tile {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 24%;
    background: linear-gradient(160deg, #fff 0%, #fff4f1 100%);
    color: var(--v2-accent);
    box-shadow:
        0 22px 44px -18px rgb(var(--v2-shadow-rgb) / 0.45),
        inset 0 1px 0 rgb(255 255 255 / 0.9),
        inset 0 -3px 8px rgb(184 0 0 / 0.07);
    animation: hn-float var(--float, 6s) ease-in-out infinite alternate;
    animation-delay: var(--fd, 0s);
}
.hn-cta-tile svg {
    width: 44%;
    height: 44%;
}
.hn-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 620px;
    text-align: center;
}
.hn-cta-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px -14px rgb(var(--v2-shadow-rgb) / 0.5);
}
.hn-cta-eyebrow {
    margin-top: 24px;
    font-size: var(--v2-small);
    line-height: var(--v2-small-lh);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v2-accent);
}
.hn-cta-title {
    margin-top: var(--v2-head-gap);
    font-size: var(--v2-h2xl);
    line-height: var(--v2-h2xl-lh);
    letter-spacing: var(--v2-ls-heading);
    text-wrap: balance;
}
.hn-cta-body {
    margin-top: 16px;
    max-width: 46ch;
    font-size: var(--v2-lead);
    line-height: var(--v2-lead-lh);
    color: var(--v2-fg-muted);
}
.hn-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}
.hn-cta-note {
    margin-top: 18px;
    font-size: 13px;
    color: var(--v2-fg-subtle);
}
@media (max-width: 767px) {
    .hn-cta-card {
        --rx: 40cqw;
        --ry: 330px;
        min-height: 800px;
        padding: 200px 20px;
        border-radius: var(--v2-r-card);
    }
    .hn-cta-item {
        --px: var(--xm);
        --py: var(--ym);
        width: calc(58px * var(--s));
    }
    .hn-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    .hn-cta-buttons .v2-btn {
        width: 100%;
    }
}

/* ===================================================================== */
/* movimento ridotto: tutto fermo, stato finale                           */
/* ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hn *,
    .hn *::before,
    .hn *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
    .hn-hero {
        height: auto;
    }
    .hn-hero-sticky {
        position: relative;
        height: 100svh;
    }
    .hn-sheet {
        margin-top: 0;
    }
}