/* =====================================================================
   CONSENTIO — Apple-plus: evoluzione distintiva dello stile Apple
   Caricato DOPO landing.css. Rollback: togliere il <link> in head.php.
   - Titoli display "Bricolage Grotesque" (identità tipografica propria)
   - Sezione Funzionalità a bento grid (tile accento + tile dark)
   - Icone feature unificate (via i 6 gradienti diversi)
   ===================================================================== */

/* ============ TIPOGRAFIA DISPLAY ============ */
h1, h2, .hero-title, .section-title {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif !important;
    letter-spacing: -0.03em !important;
    font-weight: 700;
}

.stat-number {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-size: 2.4rem !important;
    line-height: 1.1;
}

/* ============ FUNZIONALITÀ — BENTO GRID ============ */
.features-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 3rem;
}

.features-bento .feature-card {
    grid-column: span 2;
    border-radius: 24px;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--ap-line, rgba(0, 0, 0, 0.08));
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.features-bento .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -20px rgba(20, 20, 40, 0.18);
}

/* tile grande d'accento (feature di punta) — screenshot dashboard come sfondo (2026-07-02) */
.features-bento .f-hero {
    grid-column: span 3;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 440px;
    background:
        linear-gradient(to top, rgba(14, 14, 18, 0.86) 0%, rgba(14, 14, 18, 0.62) 26%, rgba(14, 14, 18, 0.08) 56%, rgba(14, 14, 18, 0.14) 100%),
        url('../img/dashboard-bento.jpg') left top / cover no-repeat #1d1d1f;
    border: none;
    color: #fff;
}
.features-bento .f-hero h3 {
    color: #fff;
    font-size: 1.75rem;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}
.features-bento .f-hero p { color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; max-width: 34ch; }

/* la seconda card in alto affianca la hero */
.features-bento .feature-card:nth-child(2),
.features-bento .feature-card:nth-child(3) { grid-column: span 3; }

/* tile scura di chiusura */
.features-bento .f-dark {
    background: #1d1d1f;
    border: none;
}
.features-bento .f-dark h3 { color: #fff; }
.features-bento .f-dark p { color: rgba(255, 255, 255, 0.72); }

/* icone unificate: tinta brand su vetro, stessa per tutte */
.features-bento .feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(227, 81, 24, 0.1);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(227, 81, 24, 0.18);
    margin-bottom: 1.25rem;
}
.features-bento .f-hero .feature-icon,
.features-bento .f-dark .feature-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
}

/* ============ SVG ANIMATI NELLE TILE ============ */
.f-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.f-top .feature-icon { margin-bottom: 0; }
.f-top .f-visual { flex-shrink: 0; }
.f-top .f-visual svg { display: block; height: 76px; width: auto; }

/* tile hero: l'illustrazione occupa lo spazio libero in alto */
.features-bento .f-hero .f-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    min-height: 0;
}
.features-bento .f-hero .f-visual svg { width: min(250px, 62%); height: auto; }

/* orbita domini (tile hero) */
.av-spin {
    animation: avSpin 28s linear infinite;
    transform-origin: 110px 110px;
}
@keyframes avSpin { to { transform: rotate(360deg); } }
.av-pulse {
    animation: avPulse 3.2s ease-in-out infinite;
    transform-origin: 110px 110px;
}
@keyframes avPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.16); opacity: 0.35; }
}

/* toggle consensi */
.av-tg .tg-track { fill: #D9D9DE; transition: fill 0.3s; }
.av-tg .tg-knob { transform: translateX(0); }
.av-tg-on .tg-track { fill: #E35118; }
.av-tg-on .tg-knob { transform: translateX(24px); }
.av-tg-a .tg-track { animation: avTrack 5s ease-in-out infinite; }
.av-tg-a .tg-knob { animation: avKnob 5s ease-in-out infinite; }
.av-tg-b .tg-track { animation: avTrack 5s ease-in-out infinite 2.5s; }
.av-tg-b .tg-knob { animation: avKnob 5s ease-in-out infinite 2.5s; }
@keyframes avKnob {
    0%, 35% { transform: translateX(0); }
    45%, 90% { transform: translateX(24px); }
    100% { transform: translateX(0); }
}
@keyframes avTrack {
    0%, 35% { fill: #D9D9DE; }
    45%, 90% { fill: #E35118; }
    100% { fill: #D9D9DE; }
}

/* radar scansione */
.av-sweep {
    animation: avSpin 4s linear infinite;
    transform-origin: 60px 60px;
}
.av-blip { animation: avBlip 4s ease-out infinite; opacity: 0; }
.av-blip-2 { animation-delay: 1.4s; }
.av-blip-3 { animation-delay: 2.6s; }
@keyframes avBlip {
    0%, 8% { opacity: 0; }
    12% { opacity: 1; }
    55%, 100% { opacity: 0; }
}

/* spunta archivio: si disegna, resta, riparte */
.av-check {
    stroke-dasharray: 23;
    stroke-dashoffset: 23;
    animation: avCheck 3.6s ease-in-out infinite;
}
@keyframes avCheck {
    0%, 15% { stroke-dashoffset: 23; }
    35%, 80% { stroke-dashoffset: 0; }
    95%, 100% { stroke-dashoffset: 23; }
}

/* barre clienti: respirano */
.av-bar {
    transform-origin: center 78px;
    animation: avBar 3s ease-in-out infinite alternate;
}
.av-bar-2 { animation-delay: 0.4s; }
.av-bar-3 { animation-delay: 0.8s; }
.av-bar-4 { animation-delay: 1.2s; }
@keyframes avBar {
    from { transform: scaleY(0.72); }
    to { transform: scaleY(1); }
}

/* codice che si digita (tile dark) */
.av-type {
    transform-origin: 34px 49px;
    animation: avType 4.5s steps(14) infinite;
}
@keyframes avType {
    0%, 10% { transform: scaleX(0); }
    55%, 92% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}
.av-caret { animation: avCaret 1s steps(1) infinite; }
@keyframes avCaret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ============ HERO — COSTELLAZIONE FLOTTANTE ============ */
.cx-hv.cx-cloud {
    position: relative;
    min-height: 540px;
    transform-style: preserve-3d;
}

/* orbite di sfondo + puntini che le percorrono */
.cx-orbits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cx-orb-dot { display: none; }
@supports (offset-distance: 0%) {
    .cx-orb-dot { display: block; }
    .cx-orb-dot-1 {
        offset-path: ellipse(256px 204px at 300px 270px);
        animation: cxOrbit 30s linear infinite;
    }
    .cx-orb-dot-2 {
        offset-path: ellipse(170px 132px at 300px 270px);
        animation: cxOrbit 20s linear infinite reverse;
    }
}
@keyframes cxOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* nucleo: scudo Consentio */
.cx-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 98px;
    height: 98px;
    border-radius: 28px;
    background: linear-gradient(150deg, #F06A35, #E35118);
    box-shadow: 0 24px 55px -18px rgba(227, 81, 24, 0.55);
    display: grid;
    place-items: center;
    color: #fff;
}
.cx-core .material-symbols-outlined { font-size: 46px; }
.cx-core-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid rgba(227, 81, 24, 0.55);
    animation: cxRing 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes cxRing {
    0% { transform: scale(1); opacity: 0.8; }
    70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* card flottanti: fluttuazione + profondità (parallasse col tilt) */
@keyframes cxFloatZ {
    0%, 100% { transform: translateZ(var(--z, 0px)) translateY(0); }
    50% { transform: translateZ(var(--z, 0px)) translateY(-9px); }
}
.cx-fcard {
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    box-shadow: 0 24px 50px -24px rgba(20, 20, 40, 0.28);
    padding: 14px 16px;
    --z: 40px;
    animation: cxFloatZ 7s ease-in-out infinite;
}

/* KPI consensi con sparkline */
.cx-fcard-kpi { left: 0; top: 5%; width: 178px; --z: 55px; }
.cx-fcard-kpi .v {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    line-height: 1;
}
.cx-fcard-kpi .v small { color: #0c8a4f; font-size: 11px; margin-left: 4px; }
.cx-fcard-kpi .k { font-size: 11px; color: var(--gray-500); margin-top: 3px; }
.cx-fcard-kpi svg { display: block; width: 100%; height: 34px; margin-top: 8px; }
.cx-spark {
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    animation: cxDraw 1.6s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes cxDraw { to { stroke-dashoffset: 0; } }

/* domini attivi */
.cx-fcard-domains { right: -3%; top: 26%; width: 262px; --z: 35px; padding: 8px 10px; animation-delay: 0.9s; }
.cx-fcard-domains .cx-st { white-space: nowrap; }
.cx-frow { display: flex; align-items: center; gap: 9px; padding: 9px 6px; }
.cx-frow + .cx-frow { border-top: 1px solid rgba(0, 0, 0, 0.05); }
.cx-frow .material-symbols-outlined {
    font-size: 15px;
    color: var(--gray-500);
    background: var(--gray-50);
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
}
.cx-frow .dn { flex: 1; font-size: 12px; font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* lingue del banner */
.cx-langs {
    position: absolute;
    right: 5%;
    bottom: 5%;
    display: flex;
    gap: 6px;
    --z: 30px;
    animation: cxFloatZ 8s ease-in-out infinite 1.4s;
}
.cx-langs img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 0 0 2px #fff, 0 10px 24px -12px rgba(20, 20, 40, 0.4);
}

/* X di chiusura simulata sul banner cookie */
.cx-hv-float .fx {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 16px;
    color: var(--gray-400);
}

/* banner cookie e chip white-label: riposizionati sulla costellazione */
.cx-cloud .cx-hv-float {
    left: -2%;
    bottom: 12%;
    --z: 70px;
    animation: cxFloatZ 6s ease-in-out infinite 0.4s;
}
.cx-cloud .cx-hv-chip {
    right: 2%;
    top: 4%;
    --z: 50px;
    animation: cxFloatZ 7.5s ease-in-out infinite 2s;
}

/* responsive costellazione */
@media (max-width: 991.98px) {
    .cx-hv.cx-cloud { min-height: 500px; margin-top: 1rem; }
}
@media (max-width: 575.98px) {
    .cx-hv.cx-cloud { min-height: 470px; }
    .cx-core { width: 74px; height: 74px; border-radius: 21px; }
    .cx-core .material-symbols-outlined { font-size: 34px; }
    .cx-fcard-kpi { width: 146px; top: 0; }
    .cx-fcard-domains { width: 226px; right: 0; top: 6%; padding: 4px 8px; }
    .cx-frow { gap: 7px; padding: 8px 4px; }
    .cx-frow .dn { font-size: 11px; }
    .cx-frow .material-symbols-outlined { width: 20px; height: 20px; font-size: 13px; }
    .cx-fcard-domains .cx-st { font-size: 9px; padding: 3px 6px; }
    .cx-cloud .cx-hv-chip { display: none; }
    .cx-langs { display: none; }
    .cx-cloud .cx-hv-float { position: absolute; left: 0; bottom: 0; width: 250px; }
}

@media (prefers-reduced-motion: reduce) {
    .f-visual svg, .f-visual svg * { animation: none !important; }
    .av-check { stroke-dashoffset: 0; }
    .av-type { transform: scaleX(1); }
    .cx-spark { animation: none; stroke-dashoffset: 0; }
    .cx-orb-dot { display: none !important; }
    .cx-core-ring { animation: none; opacity: 0; }
    .cx-fcard, .cx-langs, .cx-cloud .cx-hv-float, .cx-cloud .cx-hv-chip { animation: none !important; }
}

@media (max-width: 991.98px) {
    .features-bento { grid-template-columns: repeat(2, 1fr); }
    .features-bento .feature-card,
    .features-bento .f-hero,
    .features-bento .feature-card:nth-child(2),
    .features-bento .feature-card:nth-child(3) { grid-column: span 2; grid-row: auto; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .features-bento .feature-card { grid-column: span 1; }
    .features-bento .f-hero { grid-column: span 2; }
}

/* ============ HERO SVG ILLUSTRATION (2026-07-02) ============
   Scena unica: banner cookie + privacy policy + T&C + registro consensi.
   Ciclo narrativo 8s: toggle on -> click "Accetta" -> impulso -> +1 nel registro.
   Hero precedente (costellazione cx-cloud): _backup-hero-svg-20260702/ */
.cx-hv.cx-heroart { position: relative; }
.cx-hero-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    animation: hsvgIn 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hsvgIn {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}
.cx-hero-svg text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* fluttuazione dei gruppi */
@keyframes hsvgFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.hsvg-float-a { animation: hsvgFloat 8s ease-in-out infinite; }
.hsvg-float-b { animation: hsvgFloat 7s ease-in-out infinite 0.4s; }
.hsvg-float-c { animation: hsvgFloat 7.5s ease-in-out infinite 0.9s; }
.hsvg-float-d { animation: hsvgFloat 8.5s ease-in-out infinite 1.4s; }
.hsvg-float-e { animation: hsvgFloat 7s ease-in-out infinite 1.9s; }
.hsvg-float-f { animation: hsvgFloat 6.5s ease-in-out infinite 2.3s; }

/* connettori tratteggiati che "scorrono" */
.hsvg-dash {
    stroke-dasharray: 3 7;
    stroke-linecap: round;
    animation: hsvgDashFlow 1.4s linear infinite;
}
@keyframes hsvgDashFlow { to { stroke-dashoffset: -20; } }

/* anello pulsante sul logo del banner */
.hsvg-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: hsvgRing 2.8s ease-out infinite;
}
@keyframes hsvgRing {
    0% { transform: scale(1); opacity: 0.8; }
    70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* toggle "Statistiche" che si attiva (ciclo 8s) */
.hsvg-toggle2 { fill: #d8d8de; animation: hsvgTog 8s ease-in-out infinite; }
@keyframes hsvgTog {
    0%, 14% { fill: #d8d8de; }
    20%, 100% { fill: #E35118; }
}
.hsvg-knob { animation: hsvgKnob 8s ease-in-out infinite; }
@keyframes hsvgKnob {
    0%, 14% { transform: translateX(0); }
    20%, 100% { transform: translateX(16px); }
}

/* cursore che clicca "Accetta" */
.hsvg-cursor { animation: hsvgCursor 8s ease-in-out infinite; }
@keyframes hsvgCursor {
    0%, 26% { transform: translate(64px, 64px); opacity: 0; }
    32% { opacity: 1; }
    44%, 60% { transform: translate(0, 0); opacity: 1; }
    66%, 100% { transform: translate(28px, 40px); opacity: 0; }
}
.hsvg-clickring {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: hsvgClick 8s ease-out infinite;
}
@keyframes hsvgClick {
    0%, 49% { transform: scale(0.3); opacity: 0; }
    52% { transform: scale(0.5); opacity: 0.85; }
    62%, 100% { transform: scale(2); opacity: 0; }
}
.hsvg-btnaccept {
    transform-box: fill-box;
    transform-origin: center;
    animation: hsvgBtn 8s ease-in-out infinite;
}
@keyframes hsvgBtn {
    0%, 48%, 56%, 100% { transform: scale(1); }
    51% { transform: scale(0.955); }
}

/* badge verde "consenso registrato" sul banner */
.hsvg-chipok {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: hsvgChip 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes hsvgChip {
    0%, 53% { transform: scale(0); opacity: 0; }
    58% { transform: scale(1.15); opacity: 1; }
    62% { transform: scale(1); }
    86% { transform: scale(1); opacity: 1; }
    92%, 100% { transform: scale(0.6); opacity: 0; }
}

/* registro: evidenziazione riga + chip "+1" quando arriva l'impulso */
.hsvg-flash { opacity: 0; animation: hsvgFlash 8s ease-in-out infinite; }
@keyframes hsvgFlash {
    0%, 70% { opacity: 0; }
    74% { opacity: 1; }
    86%, 100% { opacity: 0; }
}
.hsvg-plusone {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: hsvgPlus 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes hsvgPlus {
    0%, 70% { transform: translateY(8px) scale(0.4); opacity: 0; }
    75% { transform: translateY(0) scale(1.1); opacity: 1; }
    79% { transform: translateY(0) scale(1); }
    88% { transform: translateY(-6px) scale(1); opacity: 1; }
    94%, 100% { transform: translateY(-12px) scale(1); opacity: 0; }
}

/* ingresso righe del registro (una tantum) */
.hsvg-row { opacity: 0; animation: hsvgRow 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hsvg-row1 { animation-delay: 0.5s; }
.hsvg-row2 { animation-delay: 0.7s; }
.hsvg-row3 { animation-delay: 0.9s; }
@keyframes hsvgRow {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* firma e sigillo T&C disegnati al caricamento */
.hsvg-sign {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: hsvgDraw 1s 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hsvg-sealcheck {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: hsvgDraw 0.6s 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes hsvgDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .cx-hero-svg, .cx-hero-svg * { animation: none !important; }
    .cx-hero-svg { opacity: 1; transform: none; }
    .hsvg-orbdot, .hsvg-pulse, .hsvg-cursor, .hsvg-clickring, .hsvg-plusone { display: none; }
    .hsvg-chipok { opacity: 1; }
    .hsvg-toggle2 { fill: #E35118; }
    .hsvg-knob { transform: translateX(16px); }
    .hsvg-row { opacity: 1; }
    .hsvg-flash { opacity: 0; }
    .hsvg-sign, .hsvg-sealcheck { stroke-dashoffset: 0; }
}