/* Componenti comuni del sito: pulsanti, card, etichette, icone, linee, campi, filtri.
   Caricato su tutte le pagine da data/assets.json, dopo output.css (a parità di specificità vince questo).
   Gli effetti al passaggio stanno sugli pseudo-elementi: sugli elementi con data-aos
   AOS impone transition-property (opacity, transform) e sovrascriverebbe le nostre.
   La luce che segue il mouse (--mx, --my) la imposta inc/ui.js.php. */

/* ---------- Pulsanti: .btn + .btn-p (principale) | .btn-v (viola) | .btn-g (secondario); .btn-s piccolo ---------- */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, background-position 0.6s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .btn { font-size: 1rem; } }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid #69B4E4; outline-offset: 3px; }
.btn-ar { display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

.btn-s { padding: 0.55rem 1.25rem; font-size: 0.8125rem; font-weight: 600; }
@media (min-width: 768px) { .btn-s { font-size: 0.875rem; } }

.btn-p {
    color: #0A0A0A;
    background: #fff;
    box-shadow: 0 10px 30px -10px rgba(162, 122, 186, 0.55);
}
.btn-p::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 25%, rgba(162, 122, 186, 0.35) 45%, rgba(105, 180, 228, 0.35) 55%, transparent 75%);
    transform: translateX(-110%);
    transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-v {
    color: #fff;
    background: linear-gradient(115deg, #A27ABA 0%, #8F72D0 50%, #69B4E4 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    box-shadow: 0 10px 30px -10px rgba(162, 122, 186, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-g {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-g::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(115deg, #A27ABA, #69B4E4);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: scale(0.97); }
    .btn:hover .btn-ar { transform: translateX(3px); }
    .btn:hover .btn-ar.is-dn { transform: translateY(3px); }
    .btn-p:hover { box-shadow: 0 16px 40px -12px rgba(162, 122, 186, 0.9), 0 0 32px -8px rgba(105, 180, 228, 0.7); }
    .btn-p:hover::before { transform: translateX(110%); }
    .btn-v:hover { background-position: 100% 0; box-shadow: 0 16px 40px -12px rgba(105, 180, 228, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    .btn-g:hover { box-shadow: 0 0 28px -8px rgba(162, 122, 186, 0.8); }
    .btn-g:hover::after { opacity: 1; }
}

/* ---------- Card: .cx superficie in vetro scuro; .cxr solo bordo e luce (card con immagine o video) ---------- */
.cx, .cxr {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
}
.cx {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.cx::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(162, 122, 186, 0.13), transparent 60%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}
.cx::after, .cxr::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), rgba(105, 180, 228, 0.9), rgba(162, 122, 186, 0.5) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}
@media (hover: hover) {
    .cx:hover::before, .cx:hover::after, .cxr:hover::after { opacity: 1; }
}

/* ---------- Etichetta sopra i titoli ---------- */
.eyb {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #D6CBEA;
}
.eyb::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: #69B4E4;
    box-shadow: 0 0 0.6rem #69B4E4;
    animation: eybP 2.6s ease-in-out infinite;
}
@keyframes eybP { 50% { opacity: 0.35; box-shadow: 0 0 0.2rem #69B4E4; } }

/* ---------- Capsula delle icone (il colore lo dà l'svg) ---------- */
.ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 1.75rem -0.6rem rgba(162, 122, 186, 0.55);
}
.ico-sm { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }

/* ---------- Linea di luce fra le sezioni (posizionata da chi la usa) ---------- */
.sline {
    height: 1px;
    overflow: hidden;
    background: linear-gradient(90deg, transparent, rgba(162, 122, 186, 0.45) 30%, rgba(105, 180, 228, 0.45) 70%, transparent);
    pointer-events: none;
}
.sline::after {
    content: "";
    display: block;
    width: 18%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: slineR 7s linear infinite;
}
@keyframes slineR { from { transform: translateX(-100%); } to { transform: translateX(560%); } }

/* ---------- Campi dei form ---------- */
.fld {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.fld:focus {
    border-color: rgba(162, 122, 186, 0.85);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(162, 122, 186, 0.18), 0 0 1.5rem -0.4rem rgba(105, 180, 228, 0.5);
}

/* ---------- Filtri a pillola: .chip, attivo .is-on ---------- */
.chip {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.chip.is-on {
    border-color: transparent;
    background: linear-gradient(115deg, #A27ABA, #69B4E4);
    box-shadow: 0 6px 20px -8px rgba(162, 122, 186, 0.9);
}
@media (hover: hover) {
    .chip:not(.is-on):hover { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); }
}

/* ---------- CTA finale sopra il footer: orizzonte luminoso (home, ai-websites.php) ----------
   Sfuma verso il nero del footer (bg-black) e, nelle pagine che la usano, il footer perde la riga:
   la curva scende nel footer senza stacco. */
.cta-hz { padding: 5rem 0 9rem; background: linear-gradient(#0A0A0A 55%, #000); }
body:has(.cta-hz) footer.bg-black { border-top-color: transparent; }
.cta-hz::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60rem;
    height: 22rem;
    margin-left: -30rem;
    background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(162, 122, 186, 0.35), rgba(105, 180, 228, 0.12) 50%, transparent 75%);
    pointer-events: none;
}
/* La maschera sta sul contenitore e non sulla curva: sulla curva taglierebbe anche l'alone che esce dal suo riquadro */
.cta-hz-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 55% 130% at 50% 100%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 55% 130% at 50% 100%, #000 55%, transparent 100%);
}
.cta-hz-arc {
    position: absolute;
    top: 76%;
    left: 50%;
    width: 220vw;
    height: 220vw;
    margin-left: -110vw;
    border-radius: 50%;
    background: linear-gradient(#0A0A0A, #000 8rem);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5), 0 -6px 30px rgba(105, 180, 228, 0.55), 0 -30px 120px rgba(162, 122, 186, 0.45);
}

/* ---------- Menu (inc/header.php + inc/nav.js.php) ----------
   Da 1024px .nv-d: in cima barra trasparente; dopo lo scroll .is-isl = isola centrata in vetro, dove il logo apre
   il gruppo "brand" e la sua voce sparisce. Pannelli (.is-open): in cima galleggiano sotto la barra, nell'isola
   la allungano. Sotto i 1024px resta il menu a schermo intero .nv-mo. */
@property --nvA { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --gx { syntax: '<length>'; initial-value: 0px; inherits: true; }
.nv-d { display: none; }
@media (min-width: 1024px) {
    .nv-d { display: block; position: relative; z-index: 10; padding: 0.75rem 1.5rem 0; }
    .nv-mo { display: none; }
}
.nv-isl {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.35rem 0;
    border: 1px solid transparent;
    border-radius: 1.6rem;
    transition: max-width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Bordo di luce dell'isola: fermo, ruota piano mentre un pannello è aperto */
/* Raggio = quello dell'isola + 1px (il bordo sta 1px fuori): angoli concentrici, nessuna doppia linea. I tratti fra
   i due colori non scendono sotto 0.14 di bianco: acceso, il bordo e' continuo e non "a pezzi". */
.nv-isl::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(1.6rem + 1px);
    padding: 1px;
    background: conic-gradient(from var(--nvA), rgba(162, 122, 186, 0.9), rgba(255, 255, 255, 0.22) 25%, rgba(105, 180, 228, 0.9) 50%, rgba(255, 255, 255, 0.22) 75%, rgba(162, 122, 186, 0.9));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.nv-d.is-isl .nv-isl {
    max-width: 54rem;
    padding: 0.35rem 1.1rem;
    /* Fondo un filo piu' chiaro della velatura nera che lo circonda: l'isola si stacca dallo sfondo */
    background-color: rgba(17, 17, 25, 0.88);
    /* Il bordo lo disegna solo la luce (::before): niente secondo bordo ne' riflesso interno sovrapposti */
    border-color: transparent;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.95), 0 0 50px -22px rgba(162, 122, 186, 0.55);
}
/* Pannello aperto: fondo quasi pieno, cosi' quello che scorre sotto (e la fine della velatura) non traspare a strisce */
.nv-d.is-isl.is-open .nv-isl { background-color: rgba(17, 17, 25, 0.96); }
/* Velatura dietro l'isola: il contenuto che scorre sotto si scurisce verso l'alto */
.nv-d::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 9.5rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.66) 40%, rgba(0, 0, 0, 0.28) 72%, transparent);
    opacity: 0;
    transition: opacity 0.5s ease, height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.nv-d.is-isl::after { opacity: 1; }
/* Con un pannello aperto l'isola e' piu' alta: la velatura scende oltre il suo fondo, senza salto ai lati */
.nv-d.is-isl.is-open::after { height: 19rem; }
.nv-d.is-isl .nv-isl::before { opacity: 0.8; }
.nv-d.is-isl.is-open .nv-isl::before { opacity: 1; animation: nvRing 7s linear infinite; }
@keyframes nvRing { to { --nvA: 360deg; } }

.nv-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 2.75rem; }
.nv-d.is-isl .nv-bar { gap: 1rem; }

/* Logo (link alla home) e logo-comando (apre il gruppo "brand" nell'isola): si scambiano di posto */
.nv-brand { position: relative; display: flex; align-items: center; flex: none; }
.nv-logo, .nv-bt {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #fff;
    transition: opacity 0.35s ease 0.1s, visibility 0s;
}
.nv-logo svg, .nv-bt > svg:first-child { transition: color 0.3s ease, filter 0.3s ease; }
/* Nell'isola resta solo il simbolo: la scritta si chiude dentro il logo (il link ha aria-label con il nome) */
.nv-logo { transition: opacity 0.35s ease 0.1s, visibility 0s, gap 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nv-wm { display: inline-block; max-width: 12rem; overflow: hidden; transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease 0.1s; }
.nv-d.is-isl .nv-logo { gap: 0; }
.nv-d.is-isl .nv-wm { max-width: 0; opacity: 0; transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; }
/* il logo si nasconde nell'isola solo se c'è il logo-comando (.has-bt = gruppo "brand" in nav.json) */
.nv-bt, .nv-d.is-isl .has-bt .nv-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.nv-d.is-isl .nv-bt { position: static; transform: none; opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.1s, visibility 0s; animation: nvMerge 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards; }
/* Il logo-comando "accoglie" la voce AI Agency: arriva da destra, sfocato, e si accende un attimo */
@keyframes nvMerge {
    0% { opacity: 0; transform: translateX(0.75rem) scale(0.96); filter: blur(4px); }
    55% { opacity: 1; filter: blur(0) drop-shadow(0 0 0.75rem rgba(162, 122, 186, 0.95)); }
    100% { opacity: 1; transform: none; filter: none; }
}
.nv-bt { padding: 0.3rem 0.5rem 0.3rem 0; border-radius: 999px; }

/* Voci, con la capsula luminosa che scivola sotto quella indicata */
.nv-mn { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.nv-hl {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 22px -6px rgba(162, 122, 186, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
.nv-it {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.25s ease;
}
.nv-it.is-on, .nv-bt.is-on { color: #fff; }
.nv-cv { opacity: 0.7; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-on > .nv-cv { transform: rotate(180deg); }
/* "AI Agency" in cima; nell'isola si chiude e il suo pannello si apre dal logo */
.nv-ag {
    max-width: 12rem;
    overflow: hidden;
    transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease 0.1s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease, visibility 0s;
}
/* Nell'isola scivola verso il logo mentre si chiude */
.nv-d.is-isl .nv-ag {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    transform: translateX(-1.25rem);
    visibility: hidden;
    transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease, visibility 0s linear 0.5s;
}

.nv-act { display: flex; align-items: center; gap: 1rem; flex: none; }
/* Accedi: a riposo solo l'icona della persona; al passaggio del mouse o al focus la scritta compare alla sua destra,
   senza contenitore (la dashboard sceglie da sola fra accesso e registrazione). La scritta occupa sempre il suo
   spazio (invisibile a riposo): cosi' comparendo non sposta il pulsante accanto ne' le voci al centro della barra.
   aria-label sul link per gli screen reader. */
.nv-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.3s ease-in-out;
}
.nv-lg svg { flex: none; transition: filter 0.3s ease-in-out; }
.nv-tip {
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.nv-lg:focus-visible .nv-tip { opacity: 1; transform: none; }
.nv-lng { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; }

/* Contenitore dei pannelli: l'altezza la imposta lo script; --gx = centro della voce aperta (bagliore) */
.nv-drop {
    position: relative;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, --gx 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nv-d.is-open .nv-drop { opacity: 1; }
.nv-drop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(24rem 11rem at var(--gx) 0%, rgba(162, 122, 186, 0.2), rgba(105, 180, 228, 0.07) 45%, transparent 75%);
    /* Il bagliore cresce dal bordo alto invece di partire pieno: nessuna linea netta sotto la barra */
    -webkit-mask-image: linear-gradient(transparent, #000 2.5rem);
    mask-image: linear-gradient(transparent, #000 2.5rem);
    pointer-events: none;
}
.nv-d:not(.is-isl) .nv-drop {
    max-width: 60rem;
    margin: 0.5rem auto 0;
    border-radius: 1.4rem;
    background-color: rgba(12, 12, 18, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 70px -28px rgba(0, 0, 0, 0.95), 0 0 50px -22px rgba(162, 122, 186, 0.55);
}

.nv-pn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.85rem 0.1rem 0.55rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.nv-d:not(.is-isl) .nv-pn { padding: 0.6rem; }
.nv-pn::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    left: 0.25rem;
    right: 0.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(162, 122, 186, 0.3), rgba(105, 180, 228, 0.3), transparent);
}
.nv-d:not(.is-isl) .nv-pn::before { display: none; }
.nv-pn.is-on { opacity: 1; visibility: visible; transition: opacity 0.25s ease 0.05s, visibility 0s; }
/* Entrata a cascata delle voci */
.nv-pn.is-on > * { animation: nvIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.nv-pn.is-on > :nth-child(2) { animation-delay: 0.04s; }
.nv-pn.is-on > :nth-child(3) { animation-delay: 0.08s; }
.nv-pn.is-on > :nth-child(4) { animation-delay: 0.12s; }
.nv-pn.is-on > :nth-child(5) { animation-delay: 0.16s; }
.nv-pn.is-on > :nth-child(6) { animation-delay: 0.2s; }
@keyframes nvIn { from { opacity: 0; transform: translateY(10px); } }

/* Voce del pannello */
.nv-ln {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.nv-ln .ico, .nv-ft .ico { color: #C9B3DD; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.nv-lt { display: flex; align-items: center; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: #fff; }
.nv-ld { display: block; margin-top: 0.2rem; font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.nv-go { margin-left: 0.35rem; color: #69B4E4; opacity: 0; transform: translateX(-4px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Scheda in evidenza (featured): griglia luminosa, riflesso al passaggio, prezzo */
.nv-pf { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.nv-ft {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Alta quanto le voci accanto (--r dal pannello, inc/header.php) */
    grid-row: span var(--r, 2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(162, 122, 186, 0.3), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(105, 180, 228, 0.22), transparent 55%),
        rgba(255, 255, 255, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nv-ft::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000, transparent 70%);
    pointer-events: none;
}
.nv-ft::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.nv-ft .nv-ld { margin-top: 0; }
.nv-pc {
    margin-top: auto;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.35);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
.nv-allw { grid-column: 1 / -1; flex: 0 0 100%; display: flex; justify-content: flex-end; }
.nv-all { margin: 0.1rem 0.5rem 0; padding: 0.35rem 0.5rem; border-radius: 0.6rem; font-size: 0.8125rem; font-weight: 600; color: #69B4E4; transition: color 0.25s ease; }

/* Pannello delle risorse: ultime N schede e pulsante "Tutte le risorse" */
.nv-rs { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.5rem; }
.nv-rc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 8.25rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.nv-rn { position: absolute; top: 0.9rem; right: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.3); }
.nv-rt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #69B4E4; }
.nv-rh {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}
.nv-rm { margin-top: auto; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.nv-rb { grid-column: 1 / -1; justify-self: end; margin-top: 0.15rem; }
/* Voci dei pannelli: a riposo solo icona e titolo; al passaggio del mouse (o al focus da tastiera) il sottotitolo
   compare sotto il titolo con una dissolvenza, fuori dal flusso (regole .nv-pr / .nv-pf qui sotto), e il titolo sale
   con transform. contain: inline-size = il sottotitolo non allarga la voce: va a capo nella larghezza che la voce ha. */
.nv-ln { align-items: center; }
.nv-tx { flex: 1 1 0; min-width: 0; }
.nv-tx .nv-lt { white-space: nowrap; }
.nv-tx .nv-ld {
    min-height: 0;
    overflow: hidden;
    contain: inline-size;
    margin-top: 0;
    padding-top: 0.2rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.4s ease-in-out, transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.nv-ln:focus-visible .nv-ld { opacity: 1; transform: none; transition-delay: 0.12s; }
/* Pannelli senza scheda in evidenza (Portfolio, Agenzia): voci in fila, a riposo larghe uguali e senza contenitore
   visibile. Con il mouse su una voce (:has) le altre scendono a flex-grow 0.3 e quella indicata, a 1,
   prende circa la metà dello spazio libero (con 4-5 voci): il sottotitolo sta in due righe senza lasciare vuoto.
   Transizioni in ease-in-out (0.55s), morbide ma non lente. Icona piu' piccola e
   freccia nascosta = voci a riposo piu' strette, piu' spazio per quella indicata.
   Niente saltelli verticali: la voce ha altezza fissa e il sottotitolo e' fuori dal flusso (absolute, sotto il
   titolo), quindi mentre la voce si allarga e il sottotitolo cambia numero di righe nessuna altezza cambia; il
   titolo sale solo con una traslazione (transform), che non ricalcola il layout. */
.nv-pr { display: flex; flex-wrap: wrap; }
.nv-pr .nv-ln {
    flex: 1 1 0;
    gap: 0.6rem;
    height: 5.2rem;
    overflow: hidden;
    /* Con overflow hidden la larghezza minima automatica delle voci flex sarebbe 0 e il titolo verrebbe tagliato:
       min-content = icona + titolo intero (il sottotitolo e' absolute e non conta). */
    min-width: min-content;
    padding: 0.75rem 0.7rem;
    transition: flex-grow 0.55s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
.nv-pr .ico-sm { width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; flex: none; }
/* Capsule delle icone nei pannelli: bordo sottile e fondo piatto, senza riflesso interno ne' bagliore fisso, che a
   questa misura rendevano il contorno sfocato; la luce arriva solo al passaggio del mouse */
.nv-ln .ico { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.035); box-shadow: none; }
.nv-pr .nv-go { display: none; }
/* Stesso principio nelle voci impilate di Servizi (.nv-pf): il sottotitolo non cambia l'altezza della voce, quindi
   il pannello e la scheda in evidenza accanto non si ridimensionano; li' il sottotitolo sta in una riga (c'e' spazio
   in larghezza, non in altezza). */
.nv-pr .nv-tx, .nv-pf .nv-tx {
    display: block;
    position: relative;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.nv-pf .nv-ln { overflow: hidden; }
.nv-pr .nv-tx .nv-ld, .nv-pf .nv-tx .nv-ld {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transform: none;
    transition: opacity 0.25s ease-in-out;
}
.nv-pf .nv-tx .nv-ld { -webkit-line-clamp: 1; }
.nv-pf .nv-ln:focus-visible .nv-tx { transform: translateY(-0.7rem); }
.nv-pf .nv-ln:focus-visible .nv-ld { transition: opacity 0.4s ease-in-out 0.12s; }
.nv-pr:has(> .nv-ln:focus-visible) > .nv-ln { flex-grow: 0.3; }
.nv-pr:has(> .nv-ln:focus-visible) > .nv-ln:focus-visible { flex-grow: 1; background-color: rgba(255, 255, 255, 0.05); border-color: rgba(162, 122, 186, 0.3); }
.nv-pr .nv-ln:focus-visible .nv-tx { transform: translateY(-1.15rem); }
.nv-pr .nv-ln:focus-visible .nv-ld { transition: opacity 0.4s ease-in-out 0.2s; }

.nv-it:focus-visible, .nv-bt:focus-visible, .nv-ln:focus-visible, .nv-ft:focus-visible, .nv-rc:focus-visible, .nv-all:focus-visible, .nv-lg:focus-visible, .nv-logo:focus-visible { outline: 2px solid #69B4E4; outline-offset: 2px; }
@media (hover: hover) {
    .nv-logo:hover svg, .nv-bt:hover > svg:first-child, .nv-bt.is-on > svg:first-child { color: #A27ABA; filter: drop-shadow(0 0 8px rgba(162, 122, 186, 0.7)); }
    .nv-it:hover, .nv-bt:hover, .nv-lg:hover, .nv-all:hover { color: #fff; }
    .nv-lg:hover svg { filter: drop-shadow(0 0 6px rgba(162, 122, 186, 0.8)); }
    .nv-lg:hover .nv-tip { opacity: 1; transform: none; }
    .nv-ln:hover { background-color: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.08); }
    .nv-ln:hover .ico, .nv-ft:hover .ico {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.22);
        background: linear-gradient(135deg, rgba(162, 122, 186, 0.6), rgba(105, 180, 228, 0.45));
        box-shadow: 0 0 22px -4px rgba(162, 122, 186, 0.8);
    }
    .nv-ln:hover .nv-go, .nv-ft:hover .nv-go { opacity: 1; transform: none; }
    .nv-ln:hover .nv-ld { opacity: 1; transform: none; transition-delay: 0.12s; }
    .nv-pr:has(> .nv-ln:hover) > .nv-ln { flex-grow: 0.3; }
    .nv-pr:has(> .nv-ln:hover) > .nv-ln:hover { flex-grow: 1; background-color: rgba(255, 255, 255, 0.05); border-color: rgba(162, 122, 186, 0.3); }
    .nv-pr .nv-ln:hover .nv-tx { transform: translateY(-1.15rem); }
    .nv-pr .nv-ln:hover .nv-ld { transition: opacity 0.4s ease-in-out 0.2s; }
    .nv-pf .nv-ln:hover .nv-tx { transform: translateY(-0.7rem); }
    .nv-pf .nv-ln:hover .nv-ld { transition: opacity 0.4s ease-in-out 0.12s; }
    .nv-ft:hover { border-color: rgba(162, 122, 186, 0.5); box-shadow: 0 0 30px -12px rgba(162, 122, 186, 0.8); }
    .nv-ft:hover::after { transform: translateX(100%); }
    .nv-rc:hover { border-color: rgba(162, 122, 186, 0.45); background-color: rgba(162, 122, 186, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 26px -12px rgba(162, 122, 186, 0.8); }
}

/* Menu a schermo intero, sotto i 1024px: elenco unico di soli nomi, centrati, in una card in vetro (voci "mobile" di nav.json);
   sotto, Accedi, lingua e social. Il blocco .nv-mw sta al centro dello schermo (margin auto: se non c'e' spazio scorre) */
.nv-ov {
    overflow-y: auto;
    padding: 5rem 2rem 2rem;
    background:
        radial-gradient(120% 55% at 50% 0%, rgba(162, 122, 186, 0.18), transparent 60%),
        radial-gradient(90% 40% at 100% 100%, rgba(105, 180, 228, 0.1), transparent 60%),
        rgba(10, 10, 10, 0.97);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}
.nv-mw { width: 100%; max-width: 22rem; margin: auto; }
.nv-ma { padding: 0 1.1rem; }
/* Voce: solo il nome, centrato; separatore che sfuma ai lati; entrata a cascata a ogni apertura del menu.
   Spazi in clamp con vh: crescono con l'altezza dello schermo (entro un minimo e un massimo), il blocco resta centrato. */
.nv-mb {
    --mp: clamp(0.95rem, 2.4vh, 1.45rem);
    position: relative;
    display: block;
    padding: var(--mp) 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.25s ease;
    animation: nvIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.nv-mb:nth-child(2) { animation-delay: 0.05s; }
.nv-mb:nth-child(3) { animation-delay: 0.1s; }
.nv-mb:nth-child(4) { animation-delay: 0.15s; }
.nv-mb:nth-child(5) { animation-delay: 0.2s; }
.nv-mb:nth-child(6) { animation-delay: 0.25s; }
.nv-mb + .nv-mb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
.nv-mb:active { color: #fff; }
/* Pagina corrente: nome bianco e linea luminosa sotto */
.nv-mb.is-cur { color: #fff; }
.nv-mb.is-cur::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--mp) - 0.55rem);
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #A27ABA, #69B4E4);
    box-shadow: 0 0 0.6rem rgba(162, 122, 186, 0.9);
}
/* Contatti: nome in gradiente */
.nv-mb.is-cta > span {
    background: linear-gradient(90deg, #C9A6E0, #A27ABA 45%, #69B4E4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Sotto l'elenco, uno per riga e ben distanziati: Accedi (capsula leggera), lingua, social */
/* Riga di link piccoli sotto l'elenco (voci "more" di nav.json) */
.nv-mmore { display: flex; flex-wrap: wrap; justify-content: center; padding-top: clamp(1.25rem, 3.5vh, 2.25rem); animation: nvIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s backwards; }
.nv-mmore a { padding: 0.3rem 0.9rem; font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); transition: color 0.25s ease; }
.nv-mmore a + a { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.nv-mmore a.is-cur { color: #fff; }
.nv-mmore a:active { color: #fff; }
@media (hover: hover) { .nv-mmore a:hover { color: #fff; } }
.nv-mf { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 3.5vh, 2.25rem); padding-top: clamp(2.25rem, 6.5vh, 4rem); animation: nvIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; }
.nv-mlg {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.85);
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.nv-mlg:active { border-color: rgba(162, 122, 186, 0.6); background-color: rgba(162, 122, 186, 0.1); color: #fff; }
.nv-mrow { display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vh, 1.75rem); }
.nv-mso { display: flex; align-items: center; gap: 1.6rem; }
.nv-mso a { color: rgba(255, 255, 255, 0.6); }
@media (hover: hover) {
    .nv-mb:hover, .nv-mso a:hover { color: #fff; }
    .nv-mlg:hover { border-color: rgba(162, 122, 186, 0.6); background-color: rgba(162, 122, 186, 0.1); color: #fff; }
}



@media (prefers-reduced-motion: reduce) {
    .btn, .btn-ar, .btn-p::before, .btn-g::after, .cx::before, .cx::after, .cxr::after, .fld, .chip { transition: none; }
    .eyb::before, .sline::after { animation: none; }
    .nv-isl, .nv-isl::before, .nv-logo, .nv-bt, .nv-hl, .nv-ag, .nv-drop, .nv-pn, .nv-pn.is-on, .nv-cv, .nv-go, .nv-ft::after, .nv-tx, .nv-tx .nv-ld, .nv-pr .nv-ln, .nv-lg, .nv-tip { transition: none; }
    .nv-pr .nv-tx, .nv-pr .nv-tx .nv-ld, .nv-pr .nv-ln:hover .nv-ld, .nv-pr .nv-ln:focus-visible .nv-ld,
    .nv-pf .nv-tx, .nv-pf .nv-tx .nv-ld, .nv-pf .nv-ln:hover .nv-ld, .nv-pf .nv-ln:focus-visible .nv-ld { transition: none; }
    .nv-d.is-isl.is-open .nv-isl::before, .nv-pn.is-on > *, .nv-d.is-isl .nv-bt { animation: none; }
    .nv-mb { transition: none; }
    .nv-mb, .nv-mf, .nv-mmore { animation: none; }
}