/* Reset e Base */
@font-face {
    font-family: 'Maximum Voltage';
    src: url('../fonts/MaximumVoltage.otf') format('opentype'),
         url('../fonts/MaximumVoltage.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    /* Nuova identita': nero e viola fluo, ispirata a theoryholding.com. */
    --navy-1: #050007;
    --navy-2: #1a0433;
    --accent: #b026ff;
    --accent-2: #7b2ff7;
    --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}
/* Rete di sicurezza anti-scroll-orizzontale: qualunque elemento sfori
   per errore la larghezza del viewport, la pagina non deve comunque
   poter scorrere lateralmente su mobile. */
/* overflow-x:hidden su html/body forzerebbe overflow-y a calcolare
   "auto" (regola CSS su assi misti), il che rompe position:sticky in
   profondita' nella pagina (l'ancestor scorrevole piu' vicino diventa
   body invece del viewport). "clip" ottiene lo stesso risultato voluto
   (niente scrollbar orizzontale da elementi che sforano) senza quel
   problema. */
html, body { max-width: 100%; overflow-x: clip; }
body { font-family: 'Inter', sans-serif; background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 100%); color: #eef1f7; line-height: 1.6; position: relative; }

/* Atmosfera cromatica continua: due bagliori fissi che restano dietro tutta
   la pagina mentre si scorre, cosi' il colore non e' legato a singole sezioni
   ma scorre in modo continuo dall'inizio alla fine. */
body::before,
body::after {
    content: '';
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}
body::before {
    width: 620px;
    height: 620px;
    top: -260px;
    left: -220px;
    background: radial-gradient(circle, rgba(176,38,255,0.16) 0%, transparent 70%);
}
body::after {
    width: 680px;
    height: 680px;
    bottom: -280px;
    right: -220px;
    background: radial-gradient(circle, rgba(123,47,247,0.14) 0%, transparent 70%);
}

a { color: inherit; }

/* Titoli principali: stesso font geometrico del logo, su tutte le pagine */
h1, h2 { font-family: 'Playfair Display', serif; letter-spacing: 0.01em; text-transform: uppercase; }

/* Animazioni di entrata allo scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Entrata laterale per i blocchi "vetro" (card servizi, step, faq):
   scivolano uno da sinistra, uno da destra, in sequenza. */
.reveal-x { opacity: 0; transform: translateX(-70px); transition: opacity 1.8s cubic-bezier(0.2,0.7,0.2,1), transform 1.8s cubic-bezier(0.2,0.7,0.2,1); }
.reveal-x.is-visible { opacity: 1; transform: translateX(0); }
.reveal-x-alt { opacity: 0; transform: translateX(70px); transition: opacity 1.8s cubic-bezier(0.2,0.7,0.2,1), transform 1.8s cubic-bezier(0.2,0.7,0.2,1); }
.reveal-x-alt.is-visible { opacity: 1; transform: translateX(0); }

/* Entrata "a inserimento carta": corsa lunga e molto lenta, il movimento
   deve essere chiaramente visibile, non un semplice dissolvenza. */
.reveal-card-in { opacity: 0; transform: translateX(220px); transition: opacity 2.4s cubic-bezier(0.16,0.6,0.2,1), transform 3.2s cubic-bezier(0.16,0.6,0.2,1); }
.reveal-card-in.is-visible { opacity: 1; transform: translateX(0); }

/* Navbar */
/* Non piu' sticky: scorre via con la pagina come il resto del
   contenuto invece di restare fissa in alto. */
.navbar { display: flex; justify-content: space-between; padding: 2rem 5%; align-items: center; position: relative; z-index: 1000; background: rgba(8,17,32,0.72); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Logo aggiornato sul modello del nuovo marchio VERTO-AI: font serif
   alto e condensato (schiacciato in orizzontale via transform, non
   esiste un vero "condensed" per un serif su Google Fonts) piu' i due
   pallini arancio/pesca impilati, fatti in puro CSS con due box-shadow
   cosi' non serve toccare l'HTML di ogni pagina. */
.logo {
    font-family: 'Playfair Display', 'Orbitron', serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #eef1f7;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
/* scaleX(0.8) restringe il testo solo visivamente: il suo "ingombro"
   di layout (quello che conta per il gap del flex) resta quello
   originale, piu' largo, lasciando un vuoto fantasma prima dei
   pallini. Il margine negativo lo elimina, cosi' i pallini restano
   davvero attaccati alla "I". */
.logo-mark { display: inline-block; transform: scaleX(0.8); transform-origin: left center; margin-right: -17px; }
.logo::after {
    /* I due pallini insieme (altezza + spazio tra loro) devono pesare
       quanto le lettere maiuscole del logo: 9px ciascuno + 2px di
       distanza = ~20px, vicino all'altezza reale delle lettere a
       1.7rem. Molto vicini alla "I" finale (gap sopra ridotto a 1px). */
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 11px 0 0 #d9a6ff;
    margin-top: -9px;
}
.navbar ul { display: flex; list-style: none; align-items: center; }
.navbar ul li { margin-left: 2rem; }
.navbar ul li a { font-family: 'Playfair Display', serif; color: #eef1f7; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.01em; transition: 0.3s; }
.navbar ul li a:hover, .navbar ul li a.active { color: #d199ff; }
.btn-cta { background: var(--gradient-accent); padding: 0.6rem 1.3rem; border-radius: 999px; color: #fff !important; font-weight: 700; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(176,38,255,0.25); }
.btn-cta:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(90,80,255,0.3); }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    position: relative;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: #eef1f7; transition: transform 0.25s ease, opacity 0.2s ease; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero (home, with video) */
.hero {
    min-height: 92vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 0 5%;
    color: #fff;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 1rem; color: #fff; }
.hero h1 span { color: #ff7d1a; text-shadow: 0 0 22px rgba(255,125,26,0.55), 0 0 5px rgba(255,125,26,0.45); }
.hero p { color: #f0f0f0; max-width: 640px; margin: 0 auto; }
.btn-hero { display: inline-block; margin-top: 2rem; padding: 1rem 2.2rem; background: var(--gradient-accent); color: #fff; text-decoration: none; font-weight: bold; border-radius: 999px; box-shadow: 0 8px 24px rgba(176,38,255,0.35); transition: transform 0.2s, box-shadow 0.2s; }
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(90,80,255,0.4); }

/* Stile "Theory Holding": badge a pillola sopra al titolo, titolo
   enorme con una parola "cancellata" a effetto (non-X-ma-Y), bottone
   a pillola con freccia che scivola in hover. Stessa struttura del
   riferimento, colori del nostro brand (arancio al posto del lime). */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(176,38,255,0.12);
    border: 1px solid rgba(176,38,255,0.4);
    color: #c9a0ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    margin-bottom: 1.8rem;
}
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Selettore h1.hero-v2-title (non solo .hero-v2-title): deve pesare
   quanto ".hero h1" per vincere sul font-size di 4rem definito li'. */
h1.hero-v2-title {
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    line-height: 1.08;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #fff;
}
.hero-strike {
    position: relative;
    color: #9aa5bd;
    display: inline-block;
}
.hero-strike::after {
    content: '';
    position: absolute;
    left: -3%;
    right: -3%;
    top: 52%;
    height: 3px;
    background: linear-gradient(90deg, #b026ff, #7b2ff7);
    transform: rotate(-3deg);
}

.btn-pill-arrow { display: inline-flex; align-items: center; gap: 10px; }
.hero-arrow { display: inline-block; transition: transform 0.25s ease; }
.btn-pill-arrow:hover .hero-arrow { transform: translate(3px, -3px); }

/* Barra "ponte": aggancia visivamente l'hero alla sezione successiva,
   sovrapponendosi al video invece di lasciare un taglio netto. Tre card
   separate con icona, non piu' un'unica barra con divisori. */
.trust-bar {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: -48px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
/* Le tre "vetrine" (trust-bar) avevano tutte lo stesso identico blu —
   monotono. Ognuna ha ora il proprio colore (blu / arancio / verde
   acqua), un filo colorato in alto che la firma, e uno sfondo con un
   velo tenue di quel colore, cosi' si distinguono a colpo d'occhio
   invece di sembrare la stessa card ripetuta tre volte. */
.trust-item {
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 1.6rem 1.6rem 1.5rem;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    --vt-a: #b026ff;
    --vt-b: #7b2ff7;
    --vt-glow: rgba(176,38,255,0.55);
}
.trust-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vt-a), var(--vt-b));
}
.trust-item::after {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 65%;
    height: 180%;
    background: radial-gradient(circle, var(--vt-glow) 0%, transparent 70%);
    opacity: 0.16;
    pointer-events: none;
}
.trust-item:nth-child(2) { --vt-a: #7b2ff7; --vt-b: #4d1fb8; --vt-glow: rgba(123,47,247,0.6); }
.trust-item:nth-child(3) { --vt-a: #ff2ee6; --vt-b: #b026ff; --vt-glow: rgba(255,46,230,0.55); }
.trust-item:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--vt-a) 55%, transparent);
    box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in srgb, var(--vt-a) 20%, transparent);
}
.trust-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--vt-a), var(--vt-b));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 24px -8px var(--vt-glow);
}
.trust-icon svg { display: block; width: 24px; height: 24px; }
.trust-item strong {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.08rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
    letter-spacing: 0.01em;
}
.trust-item span { position: relative; z-index: 1; display: block; color: #aab6cc; font-size: 0.82rem; line-height: 1.4; }

/* Page hero (inner pages, no video) */
.page-hero {
    padding: 7rem 5% 4rem;
    text-align: center;
}
.page-hero .eyebrow,
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #d199ff;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 1rem;
}
.page-hero .eyebrow::before,
.page-hero .eyebrow::after,
.kicker::before,
.kicker::after {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
    flex-shrink: 0;
}
.page-hero h1 { font-size: 2.6rem; margin-bottom: 1rem; color: #fff; }
.page-hero p { color: #aab6cc; max-width: 600px; margin: 0 auto; }

/* Servizi */
.servizi { padding: 5rem 10%; }
.servizi h2, .portfolio h2, .contatti h2 { font-size: 2.2rem; text-align: center; color: #fff; }
.section-intro { color: #aab6cc; max-width: 600px; margin-top: 0.8rem; }
.servizi .section-intro, .portfolio .section-intro, .contatti .section-intro { margin-left: auto; margin-right: auto; text-align: center; }
.servizi > .kicker, .portfolio > .kicker, .contatti > .kicker { display: flex; justify-content: center; }
.grid-servizi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }

.card { background: rgba(255,255,255,0.035); padding: 2rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); transition: 0.4s; }
.card:hover { transform: translateY(-10px); border-color: rgba(124,144,255,0.45); background: rgba(255,255,255,0.06); box-shadow: 0 16px 32px rgba(0,0,0,0.3); }
.card h3 { margin-bottom: 0.8rem; color: #fff; }
.card p { color: #9aa8c2; font-size: 0.95rem; }
.card .card-link { display: inline-block; margin-top: 1rem; color: #d199ff; text-decoration: none; font-weight: 700; font-size: 0.9rem; }

/* Servizi: card semplici, senza foto di sfondo (tolte su richiesta —
   restano solo le info essenziali). Il titolo resta in un arancione
   vivo per dare comunque un accento di colore alla card. Il bottone
   "Guarda come funziona" ora apre una vera demo navigabile (vedi
   js/demo-lightbox.js -> openDemo), non piu' un video. */
.grid-servizi .card h3 {
    background: linear-gradient(135deg, #b026ff 0%, #7b2ff7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.2rem;
    font-weight: 800;
}
/* === HOME sul modello theoryholding.com ===
   1) RISULTATI: grafici a colonne 3D isometriche di tipo "analisi".
   Le colonne (SVG) crescono in altezza quando la .chart entra in vista.
   Desktop: le due viste affiancate. Mobile: una vista + toggle. */
.risultati { max-width: 1240px; margin: 0 auto; padding: 6rem 6% 4rem; }
.risultati-head { text-align: center; margin-bottom: 3.5rem; }
.risultati-head h2 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.5rem 0 1rem; }
.risultati-head p { color: #cbbde6; max-width: 620px; margin: 0 auto; font-size: 1.02rem; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.charts-single { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
.chart {
    border: 1px solid rgba(176,38,255,0.28);
    border-radius: 18px;
    padding: 2rem 1.6rem 1.6rem;
    background: rgba(176,38,255,0.04);
}
.chart figcaption {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

/* Grafico SVG isometrico */
.chart3d { width: 100%; }
.chart3d-svg { width: 100%; height: auto; overflow: visible; display: block; }
.c3d-floor { fill: rgba(176,38,255,0.07); }
.c3d-wall  { fill: rgba(176,38,255,0.05); }
.c3d-grid  { stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.c3d-grid-depth { stroke: rgba(255,255,255,0.055); }
.c3d-ytick { fill: #9d8bbf; font-size: 11px; text-anchor: end; font-family: 'Inter', sans-serif; }
.c3d-xtick { fill: #d7c9ef; font-size: 12.5px; text-anchor: middle; font-family: 'Inter', sans-serif; font-weight: 600; }
.c3d-face { stroke: rgba(0,0,0,0.18); stroke-width: 0.5; }
.c3d-bar { transition: opacity .18s ease; cursor: pointer; }
.c3d-bar:hover { opacity: 0.82; }

.chart-legend {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.4rem;
}
.chart-legend li {
    display: flex; align-items: center; gap: 0.5rem;
    color: #cbbde6; font-size: 0.82rem;
    cursor: pointer; transition: opacity .18s ease, color .18s ease;
}
.chart-legend li:hover { color: #fff; }
.chart-legend li.lg-on { color: #fff; font-weight: 600; }
.lg-sw { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 8px rgba(176,38,255,0.4); }
.chart-hint { margin: 1.6rem auto 0; max-width: 620px; text-align: center; color: #9d8bbf; font-size: 0.85rem; }

@media (max-width: 780px) {
    .charts { grid-template-columns: 1fr; gap: 0; }
    .chart figcaption { text-align: center; }
}

/* 2) LA NOSTRA STORIA: titolo su una riga + catena di frecce ai due
   testi, sfalsati in diagonale per coprire tutta la larghezza. */
/* riga divisoria SOPRA il riquadro "LA NOSTRA STORIA" */
.nostra-storia { padding: 6rem 6% 3rem; border-top: 1px solid rgba(176,38,255,0.15); }
.nostra-storia-inner { max-width: 1240px; margin: 0 auto; text-align: center; }
.nostra-storia-cta { margin-top: 1.8rem; }
/* dopo l'intestazione "Chi siamo" niente riga: fluisce nel punto 01 */
.nostra-storia + .punto-section { border-top: none; }
.nostra-storia-title {
    font-size: clamp(1.7rem, 8vw, 4.2rem);
    line-height: 1.05;
    margin: 0.7rem 0 0;
}
@media (min-width: 620px) {
    .nostra-storia-title { white-space: nowrap; }
}
.storia-chain { position: relative; margin-top: 3.5rem; }
.storia-block { display: flex; align-items: flex-start; gap: 1.8rem; max-width: 780px; }
.storia-block p {
    color: #ece0ff;
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    line-height: 1.7;
    margin: 0;
}
.storia-arrow {
    flex-shrink: 0;
    width: clamp(92px, 15vw, 190px);
    height: auto;
    margin-top: 0.1rem;
    filter: drop-shadow(0 2px 10px rgba(176,38,255,0.55));
}
.storia-block-2 { margin-top: 3rem; }
@media (min-width: 900px) {
    .storia-block-1 { margin-left: 0; }
    .storia-block-2 { margin-left: auto; margin-top: 0; padding-top: 6rem; }
}
@media (max-width: 560px) {
    .storia-block { gap: 0.9rem; }
    .storia-arrow { width: 70px; }
    .storia-block p { font-size: clamp(1.12rem, 4.6vw, 1.4rem); }
}

/* "TI RICONOSCI?": sezione a "livelli" guidata dallo scroll — stessa
   tecnica della sezione "viaggio a livelli" di Partner.html (stage
   sticky + spacer che allunga lo scroll, un passaggio alla volta),
   qui adattata al testo invece che a foto/video. Attiva anche su
   mobile (solo "riduci animazioni" disattiva lo scroll-pin, .is-plain:
   niente sticky, i passaggi scorrono tutti in sequenza). Ogni beat ha
   un proprio bagliore di colore sullo sfondo (via ::before), cosi'
   il colore cambia insieme al testo invece di restare fisso viola. */
.stallo-journey {
    position: relative;
    background: var(--navy-1);
}
.stallo-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
}
.stallo-badge { position: absolute; top: clamp(20px, 5vh, 48px); left: 50%; transform: translateX(-50%); z-index: 5; }
.stallo-progress {
    position: absolute;
    bottom: clamp(20px, 5vh, 44px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
}
.stallo-dot { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.22); transition: background 0.3s ease; }
.stallo-dot.is-current { background: #fff; }
.stallo-journey.is-plain .stallo-progress { display: none; }
@media (max-width: 560px) {
    .stallo-dot { width: 16px; }
}
.stallo-beat {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(80px, 14vh, 130px) 6% 3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    text-transform: uppercase;
}
.stallo-beat.is-live { opacity: 1; visibility: visible; }
.stallo-beat::before {
    content: '';
    position: absolute;
    inset: -15%;
    z-index: -1;
    filter: blur(70px);
    background: radial-gradient(ellipse at 50% 50%, rgba(176,38,255,0.24) 0%, transparent 65%);
}
.stallo-beat[data-beat="1"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(45,212,255,0.32) 0%, transparent 65%); }
.stallo-beat[data-beat="2"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(255,45,158,0.28) 0%, transparent 65%); }
.stallo-beat[data-beat="3"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(176,38,255,0.26) 0%, transparent 65%); }
.stallo-beat[data-beat="4"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(176,38,255,0.24) 0%, transparent 65%); }
.stallo-beat[data-beat="5"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(198,255,61,0.22) 0%, transparent 65%); }
.stallo-beat[data-beat="6"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(176,38,255,0.2) 0%, transparent 65%); }
.stallo-beat[data-beat="7"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(255,125,26,0.3) 0%, transparent 65%); }

/* Beat 0: frammenti del "monologo del rimandare" sparsi per lo schermo,
   dimensioni e inclinazioni diverse. */
.stallo-scatter { display: block; text-transform: uppercase; }
.frag {
    position: absolute;
    margin: 0;
    color: #8b98b8;
    font-weight: 700;
    line-height: 1.15;
    max-width: 42vw;
    transform: translate(-50%, -50%);
}
.frag-1 { top: 24%; left: 24%; font-size: clamp(1.3rem, 3vw, 2.1rem); }
.frag-2 { top: 18%; left: 76%; font-size: clamp(1rem, 2.1vw, 1.4rem); font-style: italic; }
.frag-3 { top: 52%; left: 50%; font-size: clamp(2rem, 5vw, 3.4rem); font-style: italic; color: #e7ecf7; font-weight: 800; transform: translate(-50%, -50%) rotate(-4deg); }
.frag-4 { top: 78%; left: 22%; font-size: clamp(1rem, 2.1vw, 1.4rem); font-style: italic; }
.frag-5 { top: 82%; left: 76%; font-size: clamp(1.2rem, 2.6vw, 1.8rem); }

.stallo-stamp {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(3rem, 8.5vw, 5.6rem);
    line-height: 1.05;
    margin: 0;
}
.stallo-tone-a { color: #2dd4ff !important; text-shadow: 0 0 34px rgba(45,212,255,0.65), 0 0 10px rgba(45,212,255,0.5); }
.stallo-tone-b { color: #ff2d9e !important; text-shadow: 0 0 34px rgba(255,45,158,0.6), 0 0 10px rgba(255,45,158,0.45); }
.stallo-tone-c { color: #c6ff3d !important; text-shadow: 0 0 34px rgba(198,255,61,0.55), 0 0 10px rgba(198,255,61,0.4); }
.stallo-tone-d { color: #ff7d1a !important; text-shadow: 0 0 34px rgba(255,125,26,0.6), 0 0 10px rgba(255,125,26,0.45); }

.stallo-big {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 7.5vw, 5rem);
    line-height: 1.16;
    color: #fff;
    max-width: 920px;
    margin: 0;
}
.stallo-hint { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.4em; color: #c9a0ff; margin-top: 0.8rem; text-transform: none; }
.stallo-lead { color: #ece0ff; font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.5; max-width: 780px; margin: 0; }
.stallo-punch {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: clamp(3.2rem, 9vw, 6rem);
    margin: 0;
}
.stallo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 1.3rem;
    text-align: left;
}
.stallo-list li {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    padding-left: 2.4rem;
    position: relative;
}
.stallo-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.stallo-spacer { height: 0; }

.stallo-journey.is-plain .stallo-stage {
    position: static;
    height: auto;
    overflow: visible;
}
.stallo-journey.is-plain .stallo-badge { position: static; transform: none; display: block; margin: 0 auto 2.4rem; width: max-content; }
.stallo-journey.is-plain .stallo-beat {
    position: static;
    opacity: 1;
    visibility: visible;
    padding: 2.4rem 6%;
}
.stallo-journey.is-plain .stallo-beat::before { display: none; }
.stallo-journey.is-plain .stallo-scatter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}
.stallo-journey.is-plain .frag { position: static; transform: none; max-width: 90vw; }
.stallo-journey.is-plain .frag-3 { transform: rotate(-3deg); }
.stallo-journey.is-plain .stallo-spacer { display: none; }

/* Sotto i 560px lo scatter libero rischia di sovrapporsi: torna a una
   colonna semplice anche quando lo scroll-pin resta attivo. */
@media (max-width: 560px) {
    .frag { position: static; transform: none; max-width: 88vw; margin: 0 0 1rem; }
    .frag-3 { transform: rotate(-3deg); }
    .stallo-scatter { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
    /* Su telefono il floor fisso di .stallo-list li andava a capo su
       "NUMERO DI TELEFONO": qui la dimensione segue solo la larghezza
       dello schermo (vw), cosi' resta sempre su una riga sola. */
    .stallo-list { gap: 0.9rem; }
    .stallo-list li {
        font-size: clamp(0.85rem, 5vw, 1.35rem);
        padding-left: 1.6rem;
        white-space: nowrap;
    }
}

/* 2-bis) SEZIONI "PERCHE'..." : stesso stile catena-di-frecce, testi
   impilati (nessuno sfalsamento diagonale). */
.perche { padding: 6rem 6%; border-top: 1px solid rgba(176,38,255,0.15); }
.perche-inner { max-width: 1240px; margin: 0 auto; }
/* "Perché lavorare con Verto?": 3 punti "a scala" che degradano verso
   il basso-destra; CTA centrato in fondo alla sezione. */
.perche-cta-center { text-align: center; margin-top: 3.2rem; }
/* intestazione (riquadro + titolo) centrata; il resto resta a sinistra */
.perche-head-center .perche-inner { text-align: center; }
.perche-head-center .storia-chain,
.perche-head-center .perche-lead { text-align: left; }
/* piu' aria tra il titolo e i testi, cosi' il titolo "respira"
   (doppia classe per battere `.perche .storia-chain`) */
.perche.perche-head-center .storia-chain { margin-top: clamp(3.2rem, 6vw, 5.2rem); }
@media (min-width: 760px) {
    .storia-stairs .storia-block { max-width: 620px; }
    .storia-stairs .storia-step-2 { margin-left: 16%; }
    .storia-stairs .storia-step-3 { margin-left: 32%; }
}
.perche-title { font-size: clamp(1.8rem, 5.5vw, 3.4rem); line-height: 1.12; margin: 0.7rem 0 0; }
.perche-lead {
    color: #ece0ff;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.6;
    margin: 1.6rem 0 0;
    max-width: 820px;
}
.perche .storia-chain { margin-top: 2.6rem; }
.perche .storia-block { max-width: 900px; }
.perche .storia-block + .storia-block { margin-top: 2rem; }
.storia-block p strong { color: #fff; font-weight: 700; }

/* "Perché siamo diversi": manifesto breve e centrato, parola in arancio
   fluo (stessa idea della "Mucca Viola": non "bravi", ma notevoli),
   poi 3 card che spiegano concretamente in cosa lo siamo davvero. */
.perche.diversi .perche-inner { text-align: center; }
.perche.diversi .perche-lead { margin-left: auto; margin-right: auto; }
.diversi-word {
    color: #ff7d1a;
    font-weight: 800;
    text-shadow: 0 0 22px rgba(255,125,26,0.55), 0 0 6px rgba(255,125,26,0.4);
}
.diversi-points {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
}
.diversi-point {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(176,38,255,0.18);
    border-radius: 16px;
    padding: 1.8rem 1.6rem;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.diversi-point:hover {
    transform: translateY(-6px);
    border-color: rgba(255,125,26,0.4);
    background: rgba(255,255,255,0.05);
}
.diversi-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 0.8rem;
}
.diversi-point p { color: #ece0ff; font-size: 1rem; line-height: 1.6; margin: 0; }
@media (max-width: 760px) {
    .diversi-points { grid-template-columns: 1fr; }
}

/* "Perché aumentare la tua presenza online": freccia grande -> PAROLA
   arancione -> freccia piccola -> testo dentro una card arrotondata. */
.pres-chain { margin-top: 2.8rem; display: flex; flex-direction: column; gap: clamp(2.6rem, 6vw, 4.5rem); }
.pres-row { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; }
.pres-row .storia-arrow { width: clamp(78px, 12vw, 150px); flex-shrink: 0; }
.pres-keyword {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    font-size: clamp(2.6rem, 9vw, 5.4rem);
    color: #ff7d1a;
    text-shadow: 0 0 26px rgba(255,125,26,0.55), 0 0 6px rgba(255,125,26,0.4);
}
/* Freccia curva (stesso stile di quelle grandi, ma rivolta verso l'alto)
   a sinistra della card, che ci punta dentro. Solo desktop. Lo
   scostamento a sinistra della .pres-target è impostato da JS
   (js/script.js) allineando l'inizio della freccia alla lettera
   indicata da <span class="pres-hinge">. */
.pres-target {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.4rem, 1.2vw, 1rem);
    margin-top: clamp(0.6rem, 2vw, 1.4rem);   /* la freccia parte vicino alla parola */
    max-width: 720px;
}
.pres-hinge { color: inherit; }
.pres-arrow-sm {
    flex-shrink: 0;
    width: clamp(58px, 8vw, 104px);
    margin-top: -0.4rem;                       /* coda della freccia a ridosso della parola */
    filter: drop-shadow(0 2px 8px rgba(176,38,255,0.5));
}
.pres-card {
    position: relative;
    flex: 1 1 auto;
    min-width: 260px;
    border: 1px solid rgba(176,38,255,0.3);
    border-radius: 18px;
    background: rgba(176,38,255,0.06);
    padding: clamp(1.4rem, 3.2vw, 2.2rem);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* riflesso che scorre sulla card al passaggio del mouse */
.pres-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,125,26,0.12) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}
.pres-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,125,26,0.55);
    box-shadow: 0 22px 46px -14px rgba(176,38,255,0.4), 0 0 26px rgba(255,125,26,0.14);
}
.pres-card:hover::after { transform: translateX(120%); }
.pres-card p {
    margin: 0;
    color: #ece0ff;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    line-height: 1.65;
}

/* --- Effetti (progressive enhancement: senza animazioni la sezione
       resta comunque completamente visibile) --- */
.pres-arrow-sm path { stroke-dasharray: 200; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes presDraw     { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
    @keyframes presCardIn   { from { opacity: .001; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
    @keyframes presArrowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes presKwGlow {
        0%, 100% { text-shadow: 0 0 22px rgba(255,125,26,0.45), 0 0 6px rgba(255,125,26,0.35); }
        50%      { text-shadow: 0 0 38px rgba(255,125,26,0.8),  0 0 10px rgba(255,125,26,0.5); }
    }
    .pres-block.is-visible .pres-arrow-sm path { animation: presDraw 1s ease .15s both; }
    .pres-block.is-visible .pres-arrow-sm { animation: presArrowSpin 1.1s ease-in-out 1.15s 1; transform-origin: 50% 50%; }
    .pres-block.is-visible .pres-card { animation: presCardIn .6s ease .3s both; }
    .pres-keyword { animation: presKwGlow 3.6s ease-in-out infinite; }
}

@media (max-width: 760px) {
    .pres-arrow-sm { display: none; }          /* frecce ai testi: solo desktop */
}
@media (max-width: 640px) {
    .pres-target { margin-left: 0; }
}

/* --- STACK TECNOLOGICO: due file di card che scorrono in loop,
       in fondo alla home. --- */
.stack .perche-inner { text-align: center; }
.stack-marquee {
    margin-top: 3.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.stack-track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
}
.stack-card {
    flex-shrink: 0;
    width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(176,38,255,0.18);
    border-radius: 16px;
    padding: 1.3rem 1.2rem;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.stack-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,125,26,0.4);
    background: rgba(255,255,255,0.06);
}
.stack-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid transparent;
}
.stack-name { font-weight: 700; color: #fff; font-size: 1rem; line-height: 1.2; }
.stack-role { color: #9c8bb8; font-size: 0.82rem; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes stackScrollLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
    @keyframes stackScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
    .stack-track-a { animation: stackScrollLeft 32s linear infinite; }
    .stack-track-b { animation: stackScrollRight 32s linear infinite; }
    .stack-marquee:hover .stack-track { animation-play-state: paused; }
}

@media (max-width: 640px) {
    .stack-card { width: 156px; padding: 1.1rem 1rem; }
    .stack-icon { width: 44px; height: 44px; }
}

/* Freccia ↗ nei bottoni: forza la resa "testo" (su iOS diventa emoji). */
.hero-arrow { font-variant-emoji: text; }
.perche-cta { margin-top: 2.6rem; }

/* Link testuale con freccia (non bottone) */
.link-inline-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d9c4ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(176,38,255,0.45);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}
.link-inline-arrow:hover { color: #fff; border-color: #fff; }
.link-inline-arrow:hover .hero-arrow { transform: translate(3px, -3px); }

/* 2-ter) I NOSTRI SERVIZI: blocchi "a scacchi" (riuso .punto-section) ma
   compatti, con parola-visual al posto del numero. */
/* riga divisoria SOPRA il riquadro "COSA FACCIAMO" (non sotto il titolo) */
.servizi-home { padding-top: 5rem; border-top: 1px solid rgba(176,38,255,0.15); }
.servizi-home-head { text-align: center; max-width: 1240px; margin: 0 auto; padding: 0 6%; }
.servizi-home-head h2 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 0.5rem; }
/* blocchi servizi: nessuna riga tra loro né sotto il titolo (selettore
   piu' specifico di .punto-section per vincere sull'ordine di cascata) */
.servizi-home .punto-section { min-height: 0; padding: 4.5rem 5%; border-top: none; }
.punto-word {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    /* parole Vetrina / Shop / Restyling / Locale in arancione fluorescente */
    -webkit-text-stroke: 2px #ff7d1a;
    text-shadow: 0 0 26px rgba(255,125,26,0.45);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 0 1rem;
}

/* 3) I 5 PUNTI: ogni punto occupa una schermata intera; testo grande e
   largo, pannello visuale spinto verso il bordo, lati alternati. */
.punto-section {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
    align-items: center;
    padding: 6vh 5%;
    min-height: 100vh;
}
.punto-visual {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 640px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 25%, rgba(176,38,255,0.4), transparent 60%),
        linear-gradient(160deg, #1a0433 0%, #0a0116 100%);
    border: 1px solid rgba(176,38,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    justify-self: end;
}
.punto-num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(6rem, 20vw, 15rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(176,38,255,0.85);
}
.punto-text { max-width: 640px; }
.punto-text h3 { font-size: clamp(2rem, 5.5vw, 3.6rem); margin-bottom: 1.4rem; color: #fff; line-height: 1.08; }
.punto-text p { color: #d7c9ef; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.75; }
.punto-text .btn-hero { margin-top: 1.8rem; }
/* .punto-flip: visual a sinistra (spinto verso il bordo sinistro) */
.punto-flip .punto-visual { order: 2; justify-self: start; }
@media (max-width: 860px) {
    .punto-section { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding: 4rem 8%; }
    .punto-flip .punto-visual { order: 0; }
    .punto-visual { aspect-ratio: 16 / 10; justify-self: stretch; max-width: none; }
}

/* 4) CONTATTI: al posto del riquadro video, il bottone preventivo +
   i punti di fiducia + la firma "Verto-AI" + il link Instagram. */
.contatti-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.contatti-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }
.contatti-trust li { display: flex; align-items: flex-start; gap: 0.65rem; color: #cbbde6; font-size: 0.98rem; line-height: 1.5; }
.contatti-trust li .ct-arrow { flex-shrink: 0; color: var(--accent); font-weight: 700; line-height: 1.5; }
.sign-block { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.5rem; border-top: 1px solid rgba(176,38,255,0.2); width: 100%; }
.sign-name {
    font-family: 'Caveat', cursive;
    font-size: clamp(2.8rem, 7vw, 4.2rem);
    font-weight: 700;
    line-height: 0.9;
    color: #e7d6ff;
}
.sign-role { color: #9d8bbf; font-size: 0.9rem; }
.ig-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1.3rem;
    border-radius: 999px;
    border: 1.5px solid rgba(176,38,255,0.45);
    background: rgba(176,38,255,0.06);
    color: #d9c4ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}
.ig-link:hover { background: linear-gradient(135deg, #b026ff, #7b2ff7); color: #fff; border-color: transparent; transform: translateY(-2px); }
.ig-link strong { font-weight: 800; }
.ig-link-sm { margin-top: 1rem; padding: 0.5rem 1rem; font-size: 0.82rem; }
.card-features { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.3rem; }
.card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dbe3f2;
    font-size: 0.88rem;
    font-weight: 600;
    list-style: none;
}
.feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #b026ff 0%, #7b2ff7 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -3px rgba(123,47,247,0.55);
}
.feat-icon svg { display: block; }
.feat-lens {
    margin-left: auto;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(176,38,255,0.5);
    background: rgba(176,38,255,0.1);
    color: #ffb066;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}
.feat-lens:hover { transform: scale(1.12); background: rgba(176,38,255,0.25); }
.feat-lens[disabled] {
    cursor: not-allowed;
    opacity: 0.35;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
    color: #8a94a8;
}
.feat-lens[disabled]:hover { transform: none; background: rgba(255,255,255,0.04); }

/* Lightbox della demo interattiva */
.demo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4,8,16,0.84);
    backdrop-filter: blur(6px);
    padding: 4vh 4vw;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.demo-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.demo-lightbox-inner {
    position: relative;
    width: min(960px, 100%);
    height: min(660px, 88vh);
    background: var(--navy-1);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 40px 100px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    transform: scale(0.97);
    transition: transform 0.15s ease;
}
.demo-lightbox.open .demo-lightbox-inner { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
    .demo-lightbox, .demo-lightbox-inner { transition: none; }
}
.demo-lightbox-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: var(--navy-1);
}
.demo-lightbox-loading::after {
    content: '';
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--accent);
    animation: demoLightboxSpin 0.7s linear infinite;
}
@keyframes demoLightboxSpin { to { transform: rotate(360deg); } }
.demo-lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    color: #cfe0f5;
    flex-shrink: 0;
}
.demo-lightbox-close {
    background: none;
    border: none;
    color: #cfe0f5;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
}
.demo-lightbox-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.demo-lightbox-frame-wrap { flex: 1; position: relative; }
.demo-lightbox-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.demo-lightbox-imgwrap {
    position: absolute;
    inset: 0;
    background: #fff;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
}
.demo-lightbox-imgwrap img { max-width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.demo-lightbox-caption { color: #6b7280; font-size: 0.82rem; margin-top: 1rem; text-align: center; }
.demo-lightbox-videowrap { position: absolute; inset: 0; display: flex; }
.demo-lightbox-video { width: 100%; height: 100%; object-fit: contain; background: #05070c; display: block; cursor: pointer; }
.demo-lightbox-playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}
.demo-lightbox-playbtn:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(123,47,247,0.85); }
.demo-lightbox-playbtn svg { margin-left: 4px; }
/* Bug reale: iframe/imgwrap/video qui sopra fissano tutti un display
   proprio, quindi l'attributo "hidden" (che di norma vale display:none
   da solo) veniva scavalcato — risultato, video/immagine/iframe
   restavano incollati uno sopra l'altro invece di alternarsi. Questa
   regola vince sempre, come deve fare "hidden". */
.demo-lightbox-frame-wrap [hidden] { display: none !important; }

/* Pulsante "Guarda come funziona": un solo invito per card, al posto
   della fila di piccole lenti — apre il video della funzionalita' */
.card-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.4rem;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    border: 1.5px solid rgba(176,38,255,0.5);
    background: rgba(176,38,255,0.1);
    color: #ffb066;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.card-demo-btn:hover { background: linear-gradient(135deg, #b026ff, #7b2ff7); color: #241505; transform: translateY(-2px); }
.card-demo-btn .play-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #b026ff, #7b2ff7);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-demo-btn:hover .play-dot { background: rgba(0,0,0,0.25); }
.card-demo-btn .play-dot svg { width: 9px; height: 9px; }
@media (max-width: 600px) {
    .demo-lightbox { padding: 0; }
    .demo-lightbox-inner { width: 100%; height: 100%; border-radius: 0; }
}

/* Portfolio */
.portfolio {
    position: relative;
    padding: 5rem 10%;
}
.portfolio h2 { color: #fff; position: relative; z-index: 1; }
.portfolio .section-intro { color: #aab6cc; position: relative; z-index: 1; }
.grid-progetti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.progetto-frame {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.progetto-frame:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(90,120,255,0.28);
}

.progetto-frame iframe {
    width: 200%;
    height: 200%;
    border: none;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
}

.progetto-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
    padding: 30px 16px 12px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.progetto-label span {
    display: block;
    font-weight: 400;
    color: #ddd;
    font-size: 0.8rem;
    margin-top: 2px;
}

.overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
    transition: none;
}

.progetto-frame:hover .overlay-link {
    opacity: 1;
    background: rgba(176,38,255,0.6);
}

/* Contatti */
.contatti {
    position: relative;
    padding: 5rem 10%;
    overflow: hidden;
    text-align: center;
}
.contatti::before {
    content: '';
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1000px, 150%);
    height: 560px;
    background: radial-gradient(ellipse at center, rgba(123,47,247,0.22) 0%, rgba(176,38,255,0.13) 45%, transparent 72%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}
.contatti > * { position: relative; z-index: 1; }
.contatti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; align-items: start; }

/* Sezione "Lavoriamo insieme" della home: testo/form a sinistra, video a destra */
.contatti-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.contatti-copy { text-align: left; }
.contatti-copy .kicker { justify-content: flex-start; }
.contatti-copy h2 { text-align: left; }
.contatti-copy .section-intro { text-align: left; margin-left: 0; margin-right: 0; }
.contatti-copy form { max-width: 480px; margin-top: 1.6rem !important; }
.contatti-media {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.contatti-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
form { max-width: 600px; display: flex; flex-direction: column; }
input, textarea, select { padding: 1rem; margin-bottom: 1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #eef1f7; border-radius: 5px; font-family: inherit; font-size: 0.95rem; }
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%237fc0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
select option { background: #10203c; color: #eef1f7; }
input::placeholder, textarea::placeholder { color: #6b7284; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.08); }
button { padding: 1rem; background: var(--gradient-accent); color: white; border: none; cursor: pointer; border-radius: 8px; font-weight: bold; transition: transform 0.15s, box-shadow 0.15s; }
button:hover { box-shadow: 0 6px 16px rgba(176,38,255,0.25); }
.form-note { color: #8a94a8; font-size: 0.8rem; margin-top: -0.5rem; margin-bottom: 1rem; }

.contatti-altre { text-align: left; }
.contatti-altre h3 { margin-bottom: 1.6rem; }
.contact-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-info-list li { display: flex; align-items: center; gap: 14px; color: #cbbde6; }
.contact-info-list .ci-ico {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(176,38,255,0.12);
    border: 1px solid rgba(176,38,255,0.4);
    color: var(--accent);
}
.contact-info-list .ci-ico svg { width: 20px; height: 20px; }
.contact-info-list .ci-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info-list .ci-label {
    font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: #9d8bbf;
}
.contact-info-list .ci-body a,
.contact-info-list .ci-body .ci-val {
    color: #eae0ff; font-size: 1rem; font-weight: 600; text-decoration: none; word-break: break-word;
}
.contact-info-list .ci-body a:hover { color: var(--accent); }

/* Chi Siamo / process */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 5rem 10%; }
.about-grid h2 { color: #fff; }
.about-grid p { color: #9aa8c2; margin-bottom: 1rem; }
.about-media { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; height: 340px; display: flex; align-items: center; justify-content: center; font-size: 4rem; overflow: hidden; padding: 0; }
.about-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- PROMO VIDEO (animazione CSS al posto di un video reale) --- */
/* Mockup di editor/browser: resta scuro di proposito, come un vero editor di codice */
.promo-video {
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, #10182a 0%, #05070c 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: hidden;
}

.promo-grid {
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(rgba(176,38,255,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(176,38,255,0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    animation: gridDrift 10s linear infinite;
    -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 75%);
    mask-image: radial-gradient(circle at center, black 35%, transparent 75%);
}

@keyframes gridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 26px 26px, 26px 26px; }
}

.promo-glow {
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(176,38,255,0.4), transparent 70%);
    filter: blur(10px);
    animation: glowMove 9s ease-in-out infinite alternate;
}

.promo-glow2 {
    position: absolute;
    width: 46%;
    height: 46%;
    background: radial-gradient(circle, rgba(214,41,118,0.32), transparent 70%);
    filter: blur(14px);
    animation: glowMove2 11s ease-in-out infinite alternate;
}

@keyframes glowMove {
    0% { transform: translate(-20%, -10%); }
    100% { transform: translate(20%, 15%); }
}

@keyframes glowMove2 {
    0% { transform: translate(20%, 15%); }
    100% { transform: translate(-15%, -18%); }
}

.promo-chip {
    position: absolute;
    padding: 5px 11px;
    background: rgba(13,17,23,0.75);
    border: 1px solid rgba(176,38,255,0.5);
    color: #9cdcfe;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    opacity: 0;
    white-space: nowrap;
    z-index: 2;
    animation: chipFloat 8s ease-in-out infinite;
}

.chip-1 { top: 10%; left: 4%; animation-delay: 0.2s; }
.chip-2 { top: 12%; right: 5%; animation-delay: 2.3s; }
.chip-3 { bottom: 10%; left: 6%; animation-delay: 4.4s; }
.chip-4 { bottom: 13%; right: 4%; animation-delay: 6.4s; }

@keyframes chipFloat {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(0.95); }
    12% { opacity: 1; transform: translateY(0) scale(1); }
    40% { opacity: 1; transform: translateY(-5px) scale(1); }
    55%, 100% { opacity: 0; transform: translateY(-12px) scale(0.95); }
}

.browser-mock {
    position: relative;
    width: 88%;
    height: 78%;
    background: #12151c;
    border-radius: 10px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 40px rgba(176,38,255,0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #232733;
    transform-style: preserve-3d;
    animation: floatTilt 7s ease-in-out infinite;
    z-index: 1;
}

@keyframes floatTilt {
    0%, 100% { transform: rotateY(-5deg) rotateX(2deg) translateY(0); }
    50% { transform: rotateY(5deg) rotateX(-2deg) translateY(-8px); }
}

.browser-topbar {
    height: 26px;
    background: #1a1e29;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    flex-shrink: 0;
}

.browser-topbar .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }

.browser-url {
    margin-left: 10px;
    background: #0d0f16;
    color: #667;
    font-size: 0.62rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: monospace;
}

.browser-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.code-pane {
    width: 50%;
    background: #0d1117;
    padding: 14px 16px;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-right: 1px solid #1e2330;
}

.code-line {
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    color: #d4d4d4;
    animation: revealHold 8s ease-in-out infinite;
}

.code-line .tok-tag { color: #569cd6; }
.code-line .tok-key { color: #9cdcfe; }
.code-line .tok-str { color: #ce9178; }

.code-line.l1 { animation-delay: 0s; }
.code-line.l2 { animation-delay: 0.5s; }
.code-line.l3 { animation-delay: 1s; }
.code-line.l4 { animation-delay: 1.5s; }
.code-line.l5 { animation-delay: 1.9s; }

@keyframes revealHold {
    0% { width: 0; }
    6% { width: var(--w); }
    82% { width: var(--w); }
    92%, 100% { width: 0; }
}

.blink-cursor {
    animation: blink 0.9s steps(1) infinite;
    color: #d4d4d4;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.preview-pane {
    width: 50%;
    background: #f4f6f9;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-pane > * {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideIn 8s ease-in-out infinite;
}

.mock-nav {
    height: 10px;
    width: 40%;
    background: #0a0a0a;
    border-radius: 3px;
    animation-delay: 2.2s;
}

.mock-hero-line {
    height: 10px;
    background: #d7dde6;
    border-radius: 3px;
}
.mock-hero-line.w1 { width: 85%; animation-delay: 2.6s; }
.mock-hero-line.w2 { width: 60%; animation-delay: 2.9s; }

.mock-btn {
    position: relative;
    margin-top: 6px;
    align-self: flex-start;
    background: #007bff;
    color: #fff;
    font-size: 0.62rem;
    font-weight: bold;
    padding: 7px 14px;
    border-radius: 5px;
    animation: fadeSlideIn 8s ease-in-out infinite, clickPulse 8s ease-in-out infinite;
    animation-delay: 3.2s, 3.2s;
}

@keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateY(10px); }
    6% { opacity: 1; transform: translateY(0); }
    82% { opacity: 1; transform: translateY(0); }
    92%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes clickPulse {
    0%, 58% { box-shadow: 0 0 0 0 rgba(176,38,255,0); }
    64% { transform: scale(0.92); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(176,38,255,0.25); }
    78%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(176,38,255,0); }
}

.burst-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #7ec2ff;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) translateX(0);
    animation: burstOut 8s ease-out infinite;
    animation-delay: 3.2s;
}

@keyframes burstOut {
    0%, 63% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) translateX(0); }
    68% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) translateX(8px); }
    80%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) translateX(32px); }
}
.stats-row { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.stat strong { display: block; font-size: 2rem; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: #8a94a8; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }

.process { padding: 0 10% 5rem; }
.process h2 { text-align: center; color: #fff; }
.process > .kicker { display: flex; justify-content: center; }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-top: 3rem; }
.process-step { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 1.8rem; position: relative; }
.process-step .step-num { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2rem; font-weight: 900; margin-bottom: 0.6rem; display: block; }
.process-step h3 { margin-bottom: 0.6rem; font-size: 1.05rem; color: #fff; }
.process-step p { color: #9aa8c2; font-size: 0.9rem; }

/* FAQ */
.faq-list { max-width: 760px; margin: 3rem auto 0; }
.faq-item { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.faq-question { width: 100%; text-align: left; background: none; border: none; color: #eef1f7; padding: 1.2rem 1.5rem; font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question::after { content: "+"; color: #d199ff; font-size: 1.4rem; transition: transform 0.2s ease; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 1.5rem; }
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 1.4rem; }
.faq-answer p { color: #9aa8c2; font-size: 0.95rem; }

/* Legal pages */
.legal-content { padding: 3rem 10% 6rem; max-width: 860px; margin: 0 auto; }
.legal-disclaimer { background: rgba(255,255,255,0.04); border-left: 3px solid var(--accent); padding: 1rem 1.4rem; border-radius: 6px; font-size: 0.88rem; color: #c3ccdc; margin-bottom: 2.5rem; }
.legal-content h2 { margin-top: 2.2rem; margin-bottom: 0.8rem; font-size: 1.3rem; color: #fff; }
.legal-content p, .legal-content li { color: #9aa8c2; font-size: 0.95rem; margin-bottom: 0.8rem; }
.legal-content ul { padding-left: 1.2rem; }
.legal-updated { color: #8a94a8; font-size: 0.82rem; margin-bottom: 2rem; }

/* Footer: dopo la rimozione della newsletter restavano solo le 3
   colonne di link, sparse su tutta la larghezza (space-between) e su
   schermo largo sembrava vuoto. Ora a sinistra c'e' il blocco brand
   (logo + riga di presentazione) a bilanciare, e le colonne di link
   stanno compatte a destra invece di stirarsi. */
.footer { background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 100%); color: #fff; padding: 60px 5% 30px 5%; font-size: 0.85rem; }
.footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.footer-brand { max-width: 280px; }
.footer-brand .logo { margin-bottom: 0.9rem; }
.footer-brand p { color: #a9b6c9; line-height: 1.6; }
/* firma "Verto-AI" nel footer, come nella sezione "Lavoriamo insieme" */
.footer-sign {
    display: block;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(2.3rem, 5vw, 3rem);
    line-height: 0.9;
    color: #e7d6ff;
    margin: 1rem 0 1.1rem;
}
.newsletter-box { flex: 1; min-width: 300px; }
.newsletter-box h3 { font-size: 1.1rem; text-transform: uppercase; margin-top: 0; letter-spacing: 1px; }
.newsletter-box > p { color: #a9b6c9; margin-top: 0.5rem; }
.newsletter-form-minimal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 500px;
    margin-top: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 4px 4px 4px 16px;
    transition: border-color 0.2s;
}
.newsletter-form-minimal:focus-within { border-color: rgba(124,144,255,0.5); }
.ws-email-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.newsletter-form-minimal input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    padding: 9px 0;
    outline: none;
    font-size: 0.9rem;
    margin: 0;
}
.newsletter-form-minimal input::placeholder { color: transparent; }

/* Segnaposto animato: una lucina "scrive" il testo lettera per lettera,
   poi salta via lasciando la scritta completa, in loop continuo. */
.ws-fake-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: #8194ad;
    font-size: 0.9rem;
    white-space: nowrap;
}
.ws-fake-placeholder .ws-typed { display: inline-block; }
.ws-fake-placeholder .ws-lamp {
    width: 8px;
    height: 8px;
    margin-left: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #d199ff 55%, transparent 75%);
    box-shadow: 0 0 8px 2px rgba(124,196,255,0.65);
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.45s ease;
}
.ws-fake-placeholder .ws-lamp.hop {
    transform: translate(6px, -16px) scale(0.4);
    opacity: 0;
}
.ws-email-field.hide-placeholder .ws-fake-placeholder { display: none; }
.newsletter-form-minimal button {
    flex-shrink: 0;
    background: var(--gradient-accent);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.links-grid { display: flex; gap: 60px; flex-wrap: wrap; }
.link-col { display: flex; flex-direction: column; gap: 10px; }
.link-col h4 { margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; color: #fff; }
.link-col a { color: #a9b6c9; text-decoration: none; transition: color 0.2s; }
.link-col a:hover { color: #7cc4ff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-bottom p { margin: 0; color: #8194ad; }
.socials { display: flex; gap: 20px; align-items: center; }
.socials a { color: #8194ad; text-decoration: none; transition: color 0.2s; }
.socials a:hover { color: #7cc4ff; }
.ig-link { display: inline-flex; align-items: center; transition: transform 0.2s ease; }
.ig-link:hover { transform: scale(1.12); }
.contact-info-list .ig-link { display: inline-flex; margin-left: 8px; vertical-align: middle; }

/* --- OTTIMIZZAZIONE MOBILE --- */
@media (max-width: 768px) {
    .navbar { flex-direction: row; padding: 1rem 5%; gap: 10px; }
    .logo { font-size: 1.05rem; }
    /* Logo piu' piccolo -> pallini ridimensionati in proporzione (come
       su desktop): piu' piccoli, leggermente piu' distanziati e col
       margine fantasma dello scaleX ricalcolato sulla nuova dimensione. */
    .logo-mark { margin-right: -11px; }
    .logo::after {
        width: 6px;
        height: 6px;
        box-shadow: 0 8px 0 0 #d9a6ff;
        margin-top: -6px;
    }
    .menu-toggle { display: flex; flex-shrink: 0; }
    .navbar ul {
        position: fixed;
        top: 0;
        right: -320px;
        height: 100vh;
        width: min(78vw, 320px);
        margin-top: 0;
        padding: 90px 32px 32px;
        background: rgba(10, 20, 38, 0.98);
        backdrop-filter: blur(6px);
        box-shadow: -6px 0 24px rgba(0,0,0,0.35);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 28px;
        transition: right 0.3s ease;
        z-index: 1050;
        visibility: hidden;
    }
    .navbar ul.open { right: 0 !important; visibility: visible; }
    .navbar ul li { margin-left: 0; }
    .navbar ul li a { font-size: 1.05rem; }
    .btn-cta { display: inline-block; }

    /* h1.hero-v2-title usa clamp() e si adatta da solo: niente override
       qui, altrimenti vince lui su questa per pari specificita'. */
    .hero p { font-size: 0.9rem; padding: 0 1rem; }
    .trust-bar { grid-template-columns: 1fr; margin: -32px 5% 0; gap: 0.7rem; }
    .trust-item { padding: 1rem 1.1rem; }
    .page-hero h1 { font-size: 1.9rem; }

    .servizi, .portfolio, .contatti, .process, .about-grid { padding: 3rem 5%; }
    .about-grid { grid-template-columns: 1fr; }
    .contatti-grid { grid-template-columns: 1fr; }
    .contatti-split { grid-template-columns: 1fr; gap: 2rem; }
    .contatti-media { aspect-ratio: 16 / 10; order: -1; }
    .contatti-copy, .contatti-copy .kicker, .contatti-copy h2, .contatti-copy .section-intro { text-align: center; justify-content: center; }
    .contatti-copy form { margin-left: auto; margin-right: auto; }

    .grid-progetti { grid-template-columns: 1fr; gap: 2rem; }
    .progetto-frame { height: 220px; }

    .footer-container { flex-direction: column; gap: 30px; }
    .links-grid { flex-direction: column; gap: 20px; }
    .newsletter-box { min-width: 100%; }

    form { width: 100%; }
}

@media (max-width: 420px) {
    .chat-input-row { padding: 12px; gap: 6px; }
    .chat-input-row button[type="submit"] { padding: 0 14px; font-size: 0.85rem; }
    .icon-btn { width: 40px; height: 44px; }
}

/* --- ASSISTENTE IA (chat) --- */
.assistente-stage {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
    isolation: isolate;
    background-image: linear-gradient(180deg, rgba(8,14,26,0.45) 0%, rgba(8,14,26,0.66) 100%), url('../images/sezioni/marte.jpg');
    background-size: cover;
    background-position: center;
}

.assistente-stage::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 130%);
    height: 480px;
    background: radial-gradient(ellipse at center, rgba(176,38,255,0.16) 0%, rgba(123,47,247,0.10) 45%, transparent 72%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}

.chat-shell {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(180deg, #101a30 0%, #0a1424 100%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 580px;
    box-shadow: 0 20px 60px rgba(10,20,40,0.35), 0 0 0 1px rgba(123,47,247,0.18);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}

.chat-header-info { display: flex; flex-direction: column; gap: 2px; }
.chat-header-info strong { color: #fff; font-size: 0.95rem; }
.chat-header-status { display: flex; align-items: center; gap: 6px; color: #8fd6a3; font-size: 0.78rem; }
.chat-header-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 0 0 rgba(40,200,64,0.5);
    animation: ws-pulse-dot 2s infinite;
}

@keyframes ws-pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(40,200,64,0.45); }
    70% { box-shadow: 0 0 0 6px rgba(40,200,64,0); }
    100% { box-shadow: 0 0 0 0 rgba(40,200,64,0); }
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chat-bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.chat-bubble.assistant {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #eef0f4;
}

.chat-bubble.user {
    align-self: flex-end;
    background: var(--gradient-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(176,38,255,0.25);
}

.chat-bubble.typing {
    color: #8b93a3;
    font-style: italic;
}

/* --- Bolla messaggio vocale (stile WhatsApp) --- */
.chat-bubble.voice-message {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.voice-play-btn {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.chat-bubble.assistant .voice-play-btn { background: rgba(0, 0, 0, 0.07); }

.voice-play-btn svg { display: block; }
.voice-play-btn .icon-pause { display: none; }
.voice-play-btn.is-playing .icon-play { display: none; }
.voice-play-btn.is-playing .icon-pause { display: block; }

.voice-waveform {
    position: relative;
    flex: 1;
    height: 28px;
}

.voice-waveform-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.voice-waveform-bars span {
    flex: 1;
    min-width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
}

.chat-bubble.assistant .voice-waveform-bars span { background: rgba(0, 0, 0, 0.18); }

.voice-waveform-progress {
    position: absolute;
    inset: 0;
    width: 0%;
    overflow: hidden;
}

.voice-waveform-progress .voice-waveform-bars span { background: #fff; }

.voice-duration {
    flex: none;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

.chat-bubble.assistant .voice-duration { color: rgba(238, 240, 244, 0.7); }

.voice-transcript {
    max-width: 78%;
    margin-top: -6px;
    font-size: 0.74rem;
    font-style: italic;
    color: #8b93a3;
}

.voice-transcript.align-end { align-self: flex-end; text-align: right; }
.voice-transcript.align-start { align-self: flex-start; }

/* --- Barra di registrazione vocale (stile WhatsApp) --- */
.recording-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.recording-bar[hidden],
.chat-input-row[hidden] {
    display: none;
}

.recording-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4747;
    animation: recording-dot-pulse 1s ease-in-out infinite;
}

@keyframes recording-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.recording-timer {
    flex: none;
    font-size: 0.85rem;
    color: #eef0f4;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}

.recording-wave {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.recording-wave span {
    flex: none;
    width: 3px;
    height: 30%;
    border-radius: 2px;
    background: #007bff;
    animation: recording-wave-bounce 1s ease-in-out infinite;
}

.recording-wave span:nth-child(1) { animation-delay: 0s; }
.recording-wave span:nth-child(2) { animation-delay: 0.1s; }
.recording-wave span:nth-child(3) { animation-delay: 0.2s; }
.recording-wave span:nth-child(4) { animation-delay: 0.3s; }
.recording-wave span:nth-child(5) { animation-delay: 0.4s; }
.recording-wave span:nth-child(6) { animation-delay: 0.3s; }
.recording-wave span:nth-child(7) { animation-delay: 0.2s; }
.recording-wave span:nth-child(8) { animation-delay: 0.1s; }

@keyframes recording-wave-bounce {
    0%, 100% { height: 20%; }
    50% { height: 90%; }
}

.recording-bar .icon-btn {
    background: transparent;
    border: none;
}

.recording-bar .cancel-recording-btn { color: #8b93a3; }
.recording-bar .cancel-recording-btn:hover { color: #ff4747; }
.recording-bar .send-recording-btn { color: #fff; background: var(--gradient-accent); border-radius: 50%; }
.recording-bar .send-recording-btn:hover { filter: brightness(1.08); }

.chat-input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: none;
    width: 100%;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.chat-input-row input {
    flex: 1;
    min-width: 0;
    margin: 0;
    height: 46px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #eef0f4;
}

.chat-input-row input::placeholder { color: #6b7284; }

.chat-input-row button {
    width: auto;
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
}

.chat-status {
    min-height: 20px;
    padding: 0 16px;
    font-size: 0.78rem;
    color: #7cc4ff;
    font-style: italic;
}

.icon-btn {
    flex: none;
    width: 44px;
    height: 46px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    cursor: pointer;
    color: #eef0f4;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.icon-btn svg { display: block; }

.icon-btn:hover {
    border-color: var(--accent);
}

.mic-btn.is-listening {
    background: var(--gradient-accent);
    border-color: transparent;
    color: #fff;
    animation: mic-pulse 1.2s ease-in-out infinite;
}

.voice-output-btn.is-active {
    background: var(--gradient-accent);
    border-color: transparent;
    color: #fff;
}

.voice-output-btn .icon-speaker-on { display: none; }
.voice-output-btn.is-active .icon-speaker-on { display: block; }
.voice-output-btn.is-active .icon-speaker-off { display: none; }

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(0, 123, 255, 0); }
}

.chat-note {
    max-width: 720px;
    margin: 16px auto 0;
    color: #8a94a8;
    font-size: 0.8rem;
    text-align: center;
}

.contact-alt {
    max-width: 720px;
    margin: 56px auto 0;
    text-align: center;
    padding: 36px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
}

.contact-alt h3 {
    margin-top: 0;
    color: #fff;
}

.contact-alt p {
    color: #9aa8c2;
    max-width: 480px;
    margin: 0 auto 22px;
}

/* Area riservata: login + dashboard */

.auth-shell {
    max-width: 380px;
    width: calc(100% - 40px);
    margin: 80px auto;
    padding: 40px 32px;
    background: #ffffff;
    border: 1px solid #e2e5ea;
    box-shadow: 0 2px 14px rgba(20,20,30,0.05);
    border-radius: 14px;
}

.auth-shell h1 {
    font-size: 1.5rem;
    margin-bottom: 6px;
    color: #1c1e21;
}

.auth-shell p {
    color: #565a61;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.auth-shell form {
    display: flex;
    flex-direction: column;
}

.auth-shell label {
    font-size: 0.85rem;
    color: #33363b;
    margin-bottom: 6px;
}

.auth-error {
    color: #e03131;
    font-size: 0.85rem;
    margin: -6px 0 14px;
    min-height: 1.2em;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 0 5%;
}

.dashboard-header h1 {
    font-size: 1.6rem;
    margin: 0;
}

.dashboard-header .whoami {
    color: #565a61;
    font-size: 0.85rem;
}

.btn-logout {
    background: transparent;
    border: 1px solid #d8dbe0;
    color: #33363b;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.btn-logout:hover {
    border-color: #007bff;
    color: #007bff;
}

.leads-table-wrap {
    width: calc(100% - 40px);
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 20px 24px;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e2e5ea;
    border-radius: 14px;
}

.leads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.leads-table th {
    text-align: left;
    color: #6b7076;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e5ea;
    white-space: nowrap;
}

.leads-table td {
    padding: 14px;
    border-bottom: 1px solid #eceef1;
    vertical-align: top;
    color: #26282b;
}

.leads-table tr:hover td {
    background: #f7f8fa;
}

.leads-table .descrizione-cell {
    max-width: 320px;
    white-space: pre-wrap;
}

.leads-table select {
    background: #ffffff;
    color: #1c1e21;
    border: 1px solid #d8dbe0;
    border-radius: 5px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

.stato-nuovo { color: #1c7ed6; }
.stato-in_lavorazione { color: #d9a300; }
.stato-chiuso { color: #2f9e44; }

.dashboard-empty {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5% 60px;
    color: #6b7076;
}

/* dentro una card (.leads-table-wrap) il gutter di pagina non serve:
   lo spazio lo da' gia' il padding della card stessa */
.leads-table-wrap .dashboard-empty {
    max-width: none;
    margin: 0;
    padding: 0;
}

.dashboard-tabs {
    max-width: 1100px;
    margin: 0 auto 28px;
    padding: 0 5%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-btn {
    background: #ffffff;
    border: 1px solid #d8dbe0;
    color: #33363b;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
}

.tab-btn.active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

.tab-btn.tab-alert {
    position: relative;
}

.tab-btn.tab-alert::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    animation: tab-alert-pulse 1.2s ease-in-out infinite;
}

@keyframes tab-alert-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.dashboard-section {
    display: none;
}

.dashboard-section.active {
    display: block;
}

.calendar-wrap {
    max-width: 1100px;
    margin: 0 auto 20px;
    padding: 0 5%;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 420px;
    margin-bottom: 14px;
}

.calendar-nav button {
    background: #ffffff;
    border: 1px solid #d8dbe0;
    color: #1c1e21;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

.calendar-nav span {
    font-weight: 700;
    text-transform: capitalize;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    max-width: 420px;
}

.calendar-grid .weekday {
    text-align: center;
    color: #8a8f98;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding-bottom: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f5f6f8;
    color: #33363b;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
}

.calendar-day.other-month {
    opacity: 0.4;
    cursor: default;
}

.calendar-day.has-appt::after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #007bff;
}

.calendar-day.selected {
    border-color: #007bff;
    color: #0b63c9;
    background: #eaf3ff;
}

.gravita-bassa { color: #2f9e44; }
.gravita-media { color: #d9a300; }
.gravita-alta { color: #e03131; }

/* --- Area riservata: form e righe generiche (ex stili inline), con
   versione a colonna singola sotto i 640px. --- */
.admin-block { margin-bottom: 30px; }
.admin-h3 { margin: 0 0 12px; font-size: 1rem; color: #1c1e21; }
.admin-subtext { color: #6b7076; font-size: 0.85rem; margin: 0 0 16px; }

.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-span-2 { grid-column: 1 / -1; }

.admin-field {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: #f5f6f8;
    border: 1px solid #d8dbe0;
    border-radius: 6px;
    color: #1c1e21;
    font: inherit;
}

.admin-flex-form { display: flex; gap: 10px; margin-bottom: 18px; }
.admin-flex-form .admin-field { flex: 1; }

.admin-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e5ea;
}
.admin-row-text { flex: 1; min-width: 160px; color: #26282b; }

@media (max-width: 640px) {
    .admin-grid-2 { grid-template-columns: 1fr; }
    .admin-flex-form { flex-direction: column; }
}

/* --- Pagina progetto VertoIA (in arrivo) --- */
.nav-soon {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--gradient-accent);
    color: #fff;
    border-radius: 999px;
    vertical-align: middle;
}
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    margin-bottom: 1.4rem;
    background: rgba(123,47,247,0.12);
    border: 1px solid rgba(123,47,247,0.4);
    border-radius: 999px;
    color: #b9a6ff;
    font-family: 'Playfair Display', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.coming-soon-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7c5cff;
    box-shadow: 0 0 0 0 rgba(123,47,247,0.6);
    animation: ws-pulse-dot 2s infinite;
}
.vertoia-hero { padding-top: 6rem; }

/* Sezione 01: box con l'esperienza personale dietro l'idea */
.founder-story {
    position: relative;
    max-width: 720px;
    margin: 3.5rem auto 0;
    padding: 2.4rem 2.6rem;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid #7c5cff;
    border-radius: 16px;
    z-index: 1;
}
.founder-story-mark {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.2rem;
}
.founder-story p {
    color: #dbe3f2;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.75;
    margin-bottom: 1.2rem;
}
.founder-story-tag {
    display: block;
    color: #d199ff;
    font-family: 'Playfair Display', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    .founder-story { padding: 1.8rem 1.6rem; }
}

/* Ciclo di apprendimento e Livelli di autonomia: ogni passaggio occupa
   praticamente una sua sezione intera, righe alternate sinistra/destra,
   con una piccola scena animata (piattaforma + oggetto fluttuante) al
   posto dell'icona statica. */
.zigzag-list {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.zigzag-row {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-direction: row-reverse; /* punto dispari: testo a destra, scena a sinistra */
    min-height: 100vh;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.zigzag-list .zigzag-row:last-child { border-bottom: none; }
.zigzag-row.reverse {
    flex-direction: row; /* punto pari: testo a sinistra, scena a destra */
}
.zigzag-text {
    flex: 1 1 0;
    min-width: 0;
}
.zigzag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 8px 24px -6px rgba(123,47,247,0.55);
}
.zigzag-text h3 { color: #fff; font-size: 2.3rem; margin-bottom: 1.6rem; letter-spacing: 0.01em; }

/* Blocchi problema / soluzione sotto il titolo */
.ps-block {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-width: 480px;
}
.zigzag-row.reverse .ps-block { margin-left: auto; }
.ps-item p { color: #b7c1d6; font-size: 1.02rem; line-height: 1.7; margin: 0; }
.ps-label {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
    padding: 3px 10px;
    border-radius: 999px;
}
.ps-problem .ps-label { color: #ffb27a; background: rgba(255,138,92,0.12); border: 1px solid rgba(255,138,92,0.3); }
.ps-solution .ps-label { color: #9fd6ff; background: rgba(176,38,255,0.14); border: 1px solid rgba(123,47,247,0.35); }
.ps-solution p { color: #dbe6f7; }

/* Scena: piattaforma isometrica con glow, un oggetto centrale che
   fluttua (bob), un anello che ruota e piccoli elementi satellite. */
.zigzag-visual {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.step-scene {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.scene-glow {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 58%, rgba(123,47,247,0.3) 0%, rgba(176,38,255,0.1) 45%, transparent 72%);
    filter: blur(6px);
    pointer-events: none;
}
.scene-platform {
    position: absolute;
    bottom: 26px;
    left: 50%;
    width: 230px;
    height: 74px;
    transform: translateX(-50%) rotateX(62deg);
    background: linear-gradient(145deg, rgba(123,47,247,0.22), rgba(176,38,255,0.07));
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    box-shadow: 0 30px 55px -18px rgba(0,0,0,0.6);
}
.scene-platform::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.16);
}
.scene-ring {
    position: absolute;
    bottom: 96px;
    width: 194px;
    height: 194px;
    border: 1px solid rgba(123,47,247,0.3);
    border-radius: 50%;
    animation: scene-spin 16s linear infinite;
}
.scene-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--gradient-accent);
    box-shadow: 0 0 10px rgba(123,47,247,0.85);
}
.scene-core {
    position: relative;
    width: 130px;
    height: 130px;
    margin-bottom: 96px;
    border-radius: 30px;
    background: linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 26px 50px -16px rgba(0,0,0,0.65), 0 0 44px rgba(123,47,247,0.22);
    animation: scene-float 5s ease-in-out infinite;
}
.scene-core svg {
    width: 60px;
    height: 60px;
    color: #ffffff;
    filter: drop-shadow(0 0 14px rgba(123,47,247,0.75)) drop-shadow(0 0 30px rgba(176,38,255,0.4));
}
.scene-satellite {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,0.6);
    animation: scene-float 4.5s ease-in-out infinite;
}
.scene-satellite svg {
    width: 20px;
    height: 20px;
    color: #6fe3ff;
    filter: drop-shadow(0 0 8px rgba(111,227,255,0.6));
}
.sat-a { top: 34px; left: 6%; animation-delay: 0.3s; }
.sat-b { top: 66px; right: 4%; animation-delay: 1.1s; }
.sat-c { bottom: 118px; right: 20%; width: 32px; height: 32px; animation-delay: 0.7s; }
.sat-c svg { width: 15px; height: 15px; }

@keyframes scene-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}
@keyframes scene-spin {
    to { transform: rotate(360deg); }
}

/* Widget: il "device" al centro di ogni scena, diverso e animato per
   ogni concetto (non solo un'icona statica). Occupa lo stesso spazio
   di .scene-core, con la stessa base (piattaforma + glow + anello). */
.scene-widget {
    position: relative;
    width: 168px;
    height: 168px;
    margin-bottom: 88px;
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 26px 50px -16px rgba(0,0,0,0.65), 0 0 44px rgba(123,47,247,0.22);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scene-float 5s ease-in-out infinite;
}
.widget-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}
.widget-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.widget-dots span.on { background: var(--gradient-accent); box-shadow: 0 0 8px rgba(123,47,247,0.75); }

/* 1/7 — Inbox che scorre: centinaia di email che si susseguono, con
   una riga di scansione che le "osserva" (Osservazione / Osservatore). */
.widget-inbox { align-items: stretch; justify-content: flex-start; }
.inbox-topbar { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: rgba(255,255,255,0.06); display: flex; align-items: center; gap: 5px; padding: 0 10px; z-index: 2; }
.inbox-topbar span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.inbox-viewport { position: absolute; inset: 22px 0 0; overflow: hidden; }
.inbox-list { display: flex; flex-direction: column; gap: 9px; padding: 12px; animation: inbox-scroll 7s linear infinite; }
.inbox-row { height: 12px; border-radius: 4px; background: linear-gradient(90deg, rgba(111,227,255,0.4), rgba(123,47,247,0.14)); flex-shrink: 0; }
/* Larghezze esplicite e ripetute identiche due volte (10 righe totali,
   5+5) cosi' il loop a -50% e' perfettamente senza scatti. */
.inbox-row.ir-1 { width: 92%; }
.inbox-row.ir-2 { width: 68%; }
.inbox-row.ir-3 { width: 84%; }
.inbox-row.ir-4 { width: 55%; }
.inbox-row.ir-5 { width: 76%; }
@keyframes inbox-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}
.inbox-scanline {
    position: absolute;
    left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #6fe3ff, transparent);
    box-shadow: 0 0 12px rgba(111,227,255,0.85);
    z-index: 2;
    animation: inbox-scan 3.2s ease-in-out infinite;
}
@keyframes inbox-scan {
    0% { top: 24px; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* 7 — Osservatore: un occhio che sbatte le palpebre di tanto in tanto,
   con un anello che si espande come un radar passivo (non agisce,
   guarda soltanto) — widget diverso dalla casella email. */
.widget-eye { flex-direction: column; gap: 16px; }
.eye-shape { width: 104px; height: 62px; overflow: visible; }
.eye-group { transform-origin: 50px 30px; animation: eye-blink 4.5s ease-in-out infinite; }
.eye-outline { fill: none; stroke: #ffffff; stroke-width: 2.4; filter: drop-shadow(0 0 10px rgba(123,47,247,0.6)); }
.eye-pupil { fill: #6fe3ff; filter: drop-shadow(0 0 8px rgba(111,227,255,0.85)); }
@keyframes eye-blink {
    0%, 86%, 100% { transform: scaleY(1); }
    91% { transform: scaleY(0.08); }
    96% { transform: scaleY(1); }
}
.eye-pulse {
    position: absolute;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(111,227,255,0.4);
    border-radius: 50%;
    animation: eye-pulse-ring 3.6s ease-out infinite;
}
@keyframes eye-pulse-ring {
    0% { transform: scale(0.55); opacity: 0.85; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* 2 — Classificazione: l'email diventa etichette che compaiono a turno
   (Comprensione). */
.widget-tags svg.tags-mail { width: 54px; height: 54px; color: #ffffff; filter: drop-shadow(0 0 12px rgba(123,47,247,0.6)); }
.tag-pill {
    position: absolute;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(111,227,255,0.14);
    border: 1px solid rgba(111,227,255,0.45);
    color: #9fe8ff;
    font-family: 'Playfair Display', serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.7);
    animation: tag-cycle 6s ease-in-out infinite;
}
.tp-1 { top: 18px; left: 12px; animation-delay: 0s; }
.tp-2 { bottom: 40px; right: 8px; animation-delay: 2s; }
.tp-3 { bottom: 16px; left: 24px; animation-delay: 4s; }
@keyframes tag-cycle {
    0%, 6% { opacity: 0; transform: scale(0.7); }
    14%, 32% { opacity: 1; transform: scale(1); }
    40%, 100% { opacity: 0; transform: scale(0.7); }
}

/* 3 — Percorso a bivio con un punto che "cade" lungo il ramo scelto
   (Deduzione). */
.widget-branch svg.branch-lines { width: 128px; height: 128px; }
.branch-lines path { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 2; }
.branch-end { fill: rgba(255,255,255,0.25); }
.branch-end-active { fill: #6fe3ff; filter: drop-shadow(0 0 6px rgba(111,227,255,0.8)); }
.branch-dot {
    position: absolute;
    left: 50%;
    top: 22px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: #6fe3ff;
    box-shadow: 0 0 10px rgba(111,227,255,0.9);
    animation: branch-drop 2.6s ease-in infinite;
}
@keyframes branch-drop {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    72% { transform: translateY(74px); opacity: 1; }
    100% { transform: translateY(78px); opacity: 0; }
}

/* 4/8 — Timbro di conferma che appare sopra il messaggio (Verifica /
   Assistente). Riutilizzata anche per la bozza che si scrive da sola. */
.widget-stamp svg.stamp-bubble { width: 58px; height: 58px; color: #ffffff; filter: drop-shadow(0 0 12px rgba(123,47,247,0.6)); }
.stamp-badge {
    position: absolute;
    bottom: 20px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(123,47,247,0.75);
    transform: scale(0);
    animation: stamp-pop 3.4s ease-in-out infinite;
}
.stamp-badge svg { width: 19px; height: 19px; color: #fff; }
@keyframes stamp-pop {
    0%, 48% { transform: scale(0) rotate(-22deg); opacity: 0; }
    60% { transform: scale(1.18) rotate(0deg); opacity: 1; }
    70% { transform: scale(0.94) rotate(0deg); }
    82%, 92% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

/* 5 — Memorizzazione: una regola alla volta si "archivia" e resta
   impilata, come schede di conoscenza che si accumulano — piu'
   leggibile di un semplice caveau astratto. */
.widget-memory { flex-direction: column; justify-content: flex-end; padding-bottom: 18px; }
.memory-icon { width: 40px; height: 40px; color: #ffffff; filter: drop-shadow(0 0 10px rgba(123,47,247,0.6)); margin-bottom: 14px; }
.memory-shelf { position: absolute; bottom: 16px; left: 22px; right: 22px; height: 2px; background: rgba(255,255,255,0.22); border-radius: 2px; }
.memory-stack { position: relative; width: 100%; height: 84px; }
.memory-card {
    position: absolute;
    left: 50%;
    width: 78px;
    height: 12px;
    margin-left: -39px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(111,227,255,0.5), rgba(123,47,247,0.25));
    border: 1px solid rgba(255,255,255,0.25);
    opacity: 0;
    transform: translateY(18px) scale(0.8);
    animation: memory-card-in 5s ease-in-out infinite;
}
.memory-card::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: #6fe3ff;
}
.mc-1 { bottom: 0px; animation-delay: 0s; }
.mc-2 { bottom: 15px; animation-delay: 0.6s; }
.mc-3 { bottom: 30px; animation-delay: 1.2s; }
.mc-4 { bottom: 45px; animation-delay: 1.8s; }
.mc-5 { bottom: 60px; animation-delay: 2.4s; }
@keyframes memory-card-in {
    0% { opacity: 0; transform: translateY(18px) scale(0.8); }
    10% { opacity: 1; transform: translateY(0) scale(1); }
    82% { opacity: 1; transform: translateY(0) scale(1); }
    94%, 100% { opacity: 0; transform: translateY(-4px) scale(0.85); }
}

/* 5bis — Memorizzazione: un cervello che assorbe dati di continuo da
   ogni lato (le "particelle" che vi confluiscono, senza fine) e che
   periodicamente viene sigillato da un lucchetto con spunta di
   conferma — la conoscenza accumulata resta protetta. */
.widget-brain { position: relative; perspective: 340px; }
.brain-icon {
    width: 76px;
    height: 64px;
    filter: drop-shadow(0 0 14px rgba(123,47,247,0.55)) drop-shadow(0 10px 10px rgba(0,0,0,0.4));
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    animation: brain-spin-3d 7s linear infinite;
}
.brain-fill, .brain-stem { filter: saturate(1.05); }
.brain-lobe-line { opacity: 0.5; }
.brain-folds-shadow { opacity: 0.85; }
.brain-folds-light { opacity: 0.8; }
.brain-highlight { filter: blur(1.2px); }
.brain-highlight-2, .brain-highlight-3 { filter: blur(0.8px); }
@keyframes brain-spin-3d {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
/* Frammenti di dati: piccoli cristalli esagonali luminosi con una
   scia, molto piu' "avanzati" di semplici pallini. */
.brain-mote {
    position: absolute;
    width: 13px;
    height: 13px;
    opacity: 0;
    animation: brain-absorb 3s ease-in infinite;
}
.mote-trail {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(111,227,255,0.55), transparent 70%);
    filter: blur(3px);
}
.mote-core {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, #8ff0ff, #7c5cff);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 8px rgba(111,227,255,0.9);
    animation: mote-spin 1.4s linear infinite;
}
@keyframes mote-spin {
    to { transform: rotate(360deg); }
}
.bm-1 { top: 20px; left: 20px; --dx: 34px; --dy: 22px; animation-delay: 0s; }
.bm-2 { top: 20px; right: 20px; --dx: -34px; --dy: 22px; animation-delay: 0.7s; }
.bm-3 { bottom: 30px; left: 20px; --dx: 34px; --dy: -18px; animation-delay: 1.4s; }
.bm-4 { bottom: 30px; right: 20px; --dx: -34px; --dy: -18px; animation-delay: 2.1s; }
@keyframes brain-absorb {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    15% { opacity: 1; }
    85% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(0.4); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
.brain-lock {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    z-index: 3;
}
.brain-lock > svg { width: 100%; height: 100%; color: #ffffff; opacity: 0.85; }
.brain-lock-check {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(123,47,247,0.7);
    transform: scale(0);
    animation: stamp-pop 6s ease-in-out infinite;
}
.brain-lock-check svg { width: 15px; height: 15px; color: #fff; }

/* 6 — Aeroplanini che partono da soli verso l'esterno (Applicazione). */
.launch-base svg { width: 48px; height: 48px; color: #ffffff; filter: drop-shadow(0 0 12px rgba(123,47,247,0.6)); }
.launch-plane {
    position: absolute;
    width: 24px;
    height: 24px;
    color: #6fe3ff;
    filter: drop-shadow(0 0 8px rgba(111,227,255,0.85));
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    animation: launch-fly 3.4s ease-in infinite;
}
@keyframes launch-fly {
    0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 0; }
    14% { opacity: 1; transform: translate(-50%, -50%) scale(0.9) rotate(0deg); }
    85% { transform: translate(46px, -96px) scale(1.05) rotate(-8deg); opacity: 1; }
    100% { transform: translate(64px, -122px) scale(1.05) rotate(-8deg); opacity: 0; }
}

/* 9 — Autonomia: un satellite che orbita liberamente attorno a un
   nucleo centrale, collegato da un tether luminoso — si muove da
   solo, ma resta sempre visibilmente agganciato al controllo
   ("autonomo", ma "controllato"). */
.widget-orbit { position: relative; }
.orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 122px;
    height: 122px;
    margin: -61px 0 0 -61px;
    border: 1px dashed rgba(111,227,255,0.25);
    border-radius: 50%;
}
.orbit-hub {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(123,47,247,0.75);
    z-index: 2;
}
.orbit-hub svg { width: 21px; height: 21px; color: #fff; }
.orbit-arm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    animation: orbit-spin 7s linear infinite;
}
.orbit-tether {
    position: absolute;
    top: 0;
    left: 0;
    width: 61px;
    height: 1px;
    background: linear-gradient(90deg, rgba(111,227,255,0.7), rgba(111,227,255,0.05));
    transform-origin: 0 0;
}
.orbit-satellite {
    position: absolute;
    top: -6px;
    left: 55px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #6fe3ff;
    box-shadow: 0 0 12px rgba(111,227,255,0.95);
}
@keyframes orbit-spin {
    to { transform: rotate(360deg); }
}

/* --- CSS ereditata (non piu' usata da nessun widget, lasciata per
   sicurezza): vecchio radar/lancetta sostituito da .widget-orbit. --- */
.widget-gauge { flex-direction: column; gap: 20px; padding-top: 30px; }
.gauge-needle-wrap { width: 74px; height: 37px; overflow: hidden; position: relative; }
.gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 3px;
    height: 36px;
    background: linear-gradient(to top, #6fe3ff, transparent);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: rotate(-50deg);
    animation: gauge-sweep 3.6s ease-in-out infinite;
}
@keyframes gauge-sweep {
    0%, 100% { transform: rotate(-50deg); }
    50% { transform: rotate(50deg); }
}

/* 10 — Rete di nodi che pulsano attorno a un hub centrale (Agente
   aziendale, piena autonomia). */
.widget-network { position: relative; }
.net-hub {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(123,47,247,0.75);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.net-hub svg { width: 21px; height: 21px; color: #fff; }
.net-line { position: absolute; height: 1px; background: rgba(255,255,255,0.2); top: 50%; left: 50%; transform-origin: 0 0; z-index: 1; }
.nl-1 { width: 78px; transform: rotate(225deg); }
.nl-2 { width: 78px; transform: rotate(-45deg); }
.nl-3 { width: 36px; transform: rotate(90deg); }
.net-node {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: net-pulse 3s ease-in-out infinite;
}
.net-node svg { width: 14px; height: 14px; color: #6fe3ff; }
.nn-1 { top: 14px; left: 14px; animation-delay: 0s; }
.nn-2 { top: 14px; right: 14px; animation-delay: 1s; }
.nn-3 { bottom: 40px; left: 50%; margin-left: -15px; animation-delay: 2s; }
@keyframes net-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(111,227,255,0); }
    50% { transform: scale(1.14); box-shadow: 0 0 14px rgba(111,227,255,0.65); }
}

/* Sezione Sicurezza: testo + lucchetto che si chiude e resta sigillato,
   seguito dalle card con gli impegni concreti. */
.security-hero {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    margin: 2.5rem 0 3.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.security-hero-text { flex: 1 1 340px; }
.security-hero-text p { color: #b7c1d6; font-size: 1.05rem; line-height: 1.75; }
.security-hero-visual { flex: 0 0 auto; display: flex; justify-content: center; margin: 0 auto; }
.widget-lock { }
/* Lucchetto come UNICA icona (archetto + corpo nello stesso viewBox
   24x24): cosi' la posizione "agganciata" (translate 0,0) coincide
   esattamente con le coordinate originali del disegno, dove i due
   piedini dell'archetto (fino a y=10) toccano il bordo del corpo
   (che inizia a y=10) — un aggancio geometrico reale, non stimato.
   Lo shackle parte spostato e ruotato, si allinea esattamente sopra,
   poi scende e si salda: a quell'istante scatta l'effetto scintille. */
.lock-combo {
    width: 84px;
    height: 84px;
    color: #ffffff;
    filter: drop-shadow(0 0 12px rgba(123,47,247,0.6));
    position: relative;
    z-index: 1;
}
.lock-shackle-anim {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: lock-dock 5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lock-dock {
    0% { transform: translate(7px, -6px) rotate(-18deg); }
    28% { transform: translate(0, -2.2px) rotate(0deg); }   /* allineato esattamente sopra */
    40% { transform: translate(0, 0) rotate(0deg); }         /* sceso e agganciato al corpo */
    86% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(7px, -6px) rotate(-18deg); }
}
/* Scintille azzurro/verde-acqua nel punto di saldatura, sincronizzate
   con l'aggancio dello shackle (~40% del ciclo). */
.lock-spark {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 3;
}
.spark-flash {
    position: absolute;
    top: -11px;
    left: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #d4fff4 0%, #4ee2c4 45%, transparent 75%);
    opacity: 0;
    animation: spark-flash 5s cubic-bezier(.4,0,.2,1) infinite;
}
.spark-bit {
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #7ff5df;
    box-shadow: 0 0 7px rgba(127,245,223,0.95);
    opacity: 0;
    animation: spark-bit 5s cubic-bezier(.4,0,.2,1) infinite;
}
.sb-1 { --sx: -16px; --sy: -9px; }
.sb-2 { --sx: 15px; --sy: -10px; }
.sb-3 { --sx: -9px; --sy: 9px; }
.sb-4 { --sx: 11px; --sy: 8px; }
.sb-5 { --sx: 0px; --sy: -14px; }
@keyframes spark-flash {
    0%, 38% { opacity: 0; transform: scale(0.3); }
    40% { opacity: 1; transform: scale(1.3); }
    50% { opacity: 0; transform: scale(1.9); }
    100% { opacity: 0; }
}
@keyframes spark-bit {
    0%, 38% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    40% { opacity: 1; transform: translate(0, 0) scale(1); }
    54% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.3); }
    100% { opacity: 0; }
}
.lock-check {
    position: absolute;
    bottom: 38px;
    right: 40px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(123,47,247,0.7);
    transform: scale(0);
    z-index: 3;
    animation: lock-check-pop 5s cubic-bezier(.4,0,.2,1) infinite;
}
.lock-check svg { width: 15px; height: 15px; color: #fff; }
@keyframes lock-check-pop {
    0%, 46% { transform: scale(0); opacity: 0; }
    56% { transform: scale(1.15); opacity: 1; }
    64% { transform: scale(0.95); opacity: 1; }
    82% { transform: scale(1); opacity: 1; }
    96%, 100% { transform: scale(0); opacity: 0; }
}

@media (max-width: 900px) {
    .security-hero { flex-direction: column; text-align: center; gap: 2rem; }
    .zigzag-row, .zigzag-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        min-height: 0;
        padding: 2.4rem 0;
    }
    .ps-block, .zigzag-row.reverse .ps-block { margin-left: auto; margin-right: auto; }
    .zigzag-num { margin-left: auto; margin-right: auto; }
    .step-scene { max-width: 280px; height: 260px; }
    .vertoia-hero-scene { max-width: 340px; height: 380px; }
}

/* --- Pagina VertoIA "in arrivo" (versione minimale): scena grande
   in evidenza, stessa famiglia visiva delle scene per singolo passo
   ma scalata come protagonista della pagina. --- */
.vertoia-hero-scene {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 480px;
    margin: 3.5rem auto 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.vhs-glow {
    position: absolute;
    inset: -8%;
    background: radial-gradient(circle at 50% 60%, rgba(123,47,247,0.32) 0%, rgba(176,38,255,0.12) 45%, transparent 72%);
    filter: blur(8px);
    pointer-events: none;
}
.vhs-platform {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 340px;
    height: 110px;
    transform: translateX(-50%) rotateX(62deg);
    background: linear-gradient(145deg, rgba(123,47,247,0.24), rgba(176,38,255,0.08));
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    box-shadow: 0 40px 70px -18px rgba(0,0,0,0.6);
}
.vhs-platform::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.18);
}
.vhs-ring {
    position: absolute;
    bottom: 128px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(123,47,247,0.35);
    border-radius: 50%;
    animation: scene-spin 20s linear infinite;
}
.vhs-ring::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--gradient-accent);
    box-shadow: 0 0 14px rgba(123,47,247,0.9);
}
.vhs-ring-2 {
    position: absolute;
    bottom: 158px;
    width: 240px;
    height: 240px;
    border: 1px dashed rgba(111,227,255,0.25);
    border-radius: 50%;
    animation: scene-spin 14s linear infinite reverse;
}
.vhs-core {
    position: relative;
    width: 190px;
    height: 190px;
    margin-bottom: 178px;
    border-radius: 40px;
    background: linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 34px 60px -16px rgba(0,0,0,0.65), 0 0 60px rgba(123,47,247,0.28);
    animation: scene-float 6s ease-in-out infinite;
}
.vhs-core .brain-icon { width: 92px; height: 78px; }
.vhs-mote {
    position: absolute;
    width: 15px;
    height: 15px;
    opacity: 0;
    animation: vhs-orbit-in 4s ease-in infinite;
}
.vhs-mote .mote-core {
    animation: mote-spin 1.4s linear infinite;
}
.vhs-m1 { top: 40px; left: 60px; --dx: 130px; --dy: 100px; animation-delay: 0s; }
.vhs-m2 { top: 40px; right: 60px; --dx: -130px; --dy: 100px; animation-delay: 1s; }
.vhs-m3 { bottom: 130px; left: 30px; --dx: 150px; --dy: -40px; animation-delay: 2s; }
.vhs-m4 { bottom: 130px; right: 30px; --dx: -150px; --dy: -40px; animation-delay: 3s; }
@keyframes vhs-orbit-in {
    0% { opacity: 0; transform: translate(0,0) scale(0.6); }
    15% { opacity: 1; }
    88% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(0.35); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
.vhs-badge {
    position: absolute;
    bottom: 224px;
    right: 92px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(123,47,247,0.75);
    animation: stamp-pop 6s ease-in-out infinite;
}
.vhs-badge svg { width: 22px; height: 22px; color: #fff; }

/* --- Area riservata: cornice scura come il resto del sito (navbar e
   sfondo navy), ma le card/tabelle di lavoro restano chiare per la
   leggibilita' dei dati -- pattern "chrome scuro, contenuti chiari". --- */
body.admin-light {
    background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 100%);
    color: #eef1f7;
}
body.admin-light .navbar {
    background: rgba(10,26,48,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.admin-light .logo {
    color: #eef1f7;
}
body.admin-light .navbar ul li a {
    color: #eef1f7;
}
body.admin-light input,
body.admin-light textarea {
    background: #f5f6f8;
    border: 1px solid #d8dbe0;
    color: #1c1e21;
}
body.admin-light input::placeholder,
body.admin-light textarea::placeholder {
    color: #8a8f98;
}
body.admin-light input:focus,
body.admin-light textarea:focus {
    background: #ffffff;
    border-color: var(--accent);
}

/* --- Sezione "Il nostro approccio" v4: lunga, LINEARE a colonna
   singola in stile long-form (struttura studiata su theory-agency.it:
   affermazione → confronto promessa/realtà → svolta → dettaglio
   numerato → community → CTA candidature → passi → esempio → prova →
   chiusura), palette dedicata oro/corallo — sfondo navy invariato,
   solo gli accenti cambiano. Regola ferma: nessun titolo o frase ha
   un tratto di testo di un colore diverso dal resto sulla stessa
   riga — il gradiente e' riservato a numeri, badge e pulsanti, mai
   incollato dentro una frase. Le classi reveal-x/reveal-x-alt/reveal
   riusano l'observer gia' presente in js/script.js, cosi' il tutto si
   anima entrando nello scroll. Le stesse classi sono riusate in
   lavora-con-noi.html per un linguaggio visivo identico. --- */
.approccio-v2 {
    padding: 5rem 8% 6rem;
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: clip;
    /* Palette dedicata a questa sezione: oro/corallo vivido, diversa
       dal blu/viola del resto del sito — disciplinata su un solo
       accento cromatico (oro→corallo) invece di piu' colori sparsi. */
    --app-amber: #ffcb2e;
    --app-coral: #ff4c29;
    --app-ink: #241505;
    --app-gradient: linear-gradient(135deg, var(--app-amber) 0%, var(--app-coral) 100%);
}
.approccio-v2::before,
.approccio-v2::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.approccio-v2::before {
    top: -140px; left: -180px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(255,203,46,0.18) 0%, transparent 70%);
}
.approccio-v2::after {
    bottom: -200px; right: -200px;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(255,76,41,0.15) 0%, transparent 70%);
}
.approccio-v2 > * { position: relative; z-index: 1; }
.approccio-v2 > .kicker { display: flex; justify-content: center; color: var(--app-amber); font-size: 0.85rem; }
.approccio-v2 > h2 {
    text-align: center;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    line-height: 1.18;
    letter-spacing: 0.005em;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.approccio-v2 > .section-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05rem;
    max-width: 680px;
}

/* Etichetta di apertura di ogni capitolo — deliberatamente grande,
   cosi' che scendendo si capisca subito "e' iniziato un capitolo
   nuovo" invece di confondersi con quello appena letto. Un solo
   colore, sempre su riga propria, mai dentro una frase; due trattini
   decorativi ai lati come gli "eyebrow" gia' usati altrove nel sito. */
.chapter-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-coral);
    margin-bottom: 1.4rem;
}
.chapter-label::before,
.chapter-label::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--app-gradient);
    flex-shrink: 0;
}

/* Manifesto d'apertura — un'unica frase, un solo colore */
.approccio-manifesto {
    max-width: 800px;
    margin: 3.2rem auto 0;
    text-align: center;
}
.approccio-manifesto p { color: #eef1f7; font-weight: 600; font-size: clamp(1.1rem, 2.3vw, 1.4rem); line-height: 1.65; }

/* CTA intermedia, ripresa dal ritmo "a pannelli" delle long-form —
   spezza il testo ogni due o tre capitoli, come in theory-agency.it */
.approccio-cta-mid { text-align: center; margin: 3.4rem 0 0; }
.approccio-cta-mid .btn-hero { display: inline-block; }

/* Riquadro numerato per paragrafo — riusato in ogni capitolo scritto
   (il solito copione, la svolta, il nostro progetto, la community):
   troppo testo di fila e' pesante da leggere, quindi ogni paragrafo
   ha il suo riquadro con un numero, come le liste .approccio-values */
.chapter-boxes { display: flex; flex-direction: column; gap: 1.1rem; max-width: 720px; margin: 2.4rem auto 0; }
.para-box {
    position: relative;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2.2rem 2rem 1.8rem;
    text-align: center;
}
/* Numero grande, agganciato all'angolo del riquadro invece che dentro
   il flusso del testo, con un piccolo "colpo" d'ingresso quando entra
   nello scroll (l'observer di js/script.js aggiunge .is-visible alla
   .para-box quando ha la classe reveal). Di default nell'angolo in
   alto a sinistra; .num-right lo sposta in alto a destra — alternati
   a scacchiera tra un riquadro e l'altro dello stesso capitolo. */
.para-box-num {
    position: absolute;
    top: -22px;
    left: -18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--app-ink);
    background: var(--app-gradient);
    box-shadow: 0 0 0 5px var(--navy-1), 0 12px 26px -8px rgba(255,76,41,0.55);
    z-index: 2;
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
}
.para-box-num.num-right { left: auto; right: -18px; }
.para-box.reveal.is-visible .para-box-num,
.para-box.is-visible .para-box-num {
    transform: scale(1);
    opacity: 1;
}
.para-box p { color: #c3cee3; font-size: 1.02rem; line-height: 1.75; margin: 0; }

/* Capitolo "il solito copione": sequenza verticale promessa → realtà,
   ogni beat nel suo riquadro numerato, sempre centrale */
.approccio-beats { max-width: 720px; margin: 5.5rem auto 0; }
.approccio-beats .para-box .beat-quote { color: #aab6cc; font-size: 1.06rem; font-style: italic; line-height: 1.6; margin: 0 0 0.9rem; }
.beat-tag {
    display: block;
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.approccio-beats .para-box .beat-reveal { color: #eef1f7; font-size: 1.06rem; font-weight: 600; line-height: 1.6; margin: 0; }

/* Affermazione singola, in risalto, tra un capitolo e l'altro */
.approccio-statement {
    max-width: 700px;
    margin: 4.5rem auto 0;
    text-align: center;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    line-height: 1.5;
}

/* Capitolo "la svolta": perche' siamo diversi — titolo centrale,
   un riquadro numerato per paragrafo sotto */
.approccio-turn { max-width: 720px; margin: 6rem auto 0; text-align: center; }
.approccio-turn h3 {
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.35;
    margin: 0 0 1.7rem;
}
/* Link verso un'altra pagina, ma dentro un vero riquadro cliccabile —
   come il bottone "Candidati ora": deve leggersi a colpo d'occhio
   come un pulsante, non come testo sottolineato in mezzo al resto */
.btn-chapter-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.8rem;
    padding: 0.9rem 1.9rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255,203,46,0.5);
    background: rgba(255,255,255,0.04);
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-chapter-link:hover {
    background: var(--app-gradient);
    color: var(--app-ink);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -14px rgba(255,76,41,0.55);
}

/* Capitolo "il nostro progetto": la parte piu' importante, quindi il
   trattamento visivo piu' curato — bordo sfumato come la CTA
   candidature, e dentro un riquadro numerato per ogni paragrafo */
.approccio-mission {
    max-width: 840px;
    margin: 6.5rem auto 0;
    padding: 3px;
    border-radius: 24px;
    background: var(--app-gradient);
    box-shadow: 0 30px 70px -30px rgba(255,76,41,0.4);
}
.mission-inner {
    background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 100%);
    border-radius: 21px;
    padding: 3.4rem 3rem;
    text-align: center;
}
.mission-inner h3 {
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
    line-height: 1.35;
    margin: 0 0 1.7rem;
}
.mission-inner .chapter-boxes { margin-top: 0; }
.mission-inner .para-box { background: rgba(255,255,255,0.05); }

/* Cosa significa lavorare con noi / i passi: lista numerata in stile
   long-form, riusata anche per la sezione "come lavoriamo nel tempo"
   e in lavora-con-noi.html per lo stesso identico linguaggio visivo */
.approccio-values { max-width: 920px; margin: 6.5rem auto 0; }
.approccio-values-title {
    text-align: center;
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 3.2vw, 2rem);
    line-height: 1.35;
    max-width: 700px;
    margin: 0 auto 3.2rem;
}
.values-list { display: flex; flex-direction: column; }
.value-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.6rem;
    padding: 1.9rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.values-list .value-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.value-num {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
    background: var(--app-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.value-tag {
    display: block;
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.value-item h4 { color: var(--app-amber); font-size: 1.12rem; margin: 0 0 0.5rem; }
.value-item p { color: #9aa8c2; font-size: 0.96rem; line-height: 1.65; margin: 0; }

/* Capitolo community: narrativo a colonna singola + fila di tag */
.approccio-story { max-width: 720px; margin: 6.5rem auto 0; text-align: center; }
.approccio-story h3 {
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    line-height: 1.35;
    margin: 0 0 1.5rem;
}
.approccio-story .chapter-boxes { margin-top: 1.7rem; }
.story-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.8rem; }
.story-tags span {
    font-size: 0.82rem;
    color: #dbe3f2;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
}
/* Nota "community pubblica in arrivo" dentro il capitolo community —
   stesso linguaggio del badge "Presto" gia' usato per VertoIA */
.story-soon {
    margin-top: 2.4rem;
    padding-top: 2.2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.story-soon-badge {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-ink);
    background: var(--app-gradient);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.story-soon p { max-width: 560px; margin: 0 auto 1.2rem; }

/* Esempio concreto */
.approccio-example {
    position: relative;
    max-width: 800px;
    margin: 6.5rem auto 0;
    padding: 2.6rem 3rem;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--app-coral);
    border-radius: 16px;
    text-align: center;
}
.example-mark {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.6rem;
    line-height: 1;
    background: var(--app-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.3rem;
}
.approccio-example p { color: #dbe3f2; font-size: 1.06rem; font-style: italic; line-height: 1.7; margin-bottom: 1rem; }
.example-tag {
    display: block;
    color: var(--app-amber);
    font-family: 'Playfair Display', serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Prova numerica */
.approccio-proof {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 6.5rem auto 0;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.approccio-stat { text-align: center; }
.approccio-stat strong {
    display: block;
    font-size: 2.3rem;
    font-family: 'Playfair Display', serif;
    background: var(--app-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.approccio-stat span { color: #8a94a8; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* CTA "lavora con noi": pannello con bordo sfumato, distinto dal
   resto per parlare direttamente ai candidati */
.approccio-recruit {
    max-width: 920px;
    margin: 6rem auto 0;
    padding: 3px;
    border-radius: 24px;
    background: var(--app-gradient);
    box-shadow: 0 30px 70px -30px rgba(255,76,41,0.45);
}
.recruit-inner {
    background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 100%);
    border-radius: 21px;
    padding: 3.4rem 3rem;
    text-align: center;
}
.recruit-badge {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-ink);
    background: var(--app-gradient);
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}
.approccio-recruit h3 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3.4vw, 2.1rem);
    line-height: 1.3;
    margin-bottom: 1.1rem;
}
.approccio-recruit p { color: #c3cee3; font-size: 1.02rem; line-height: 1.7; max-width: 640px; margin: 0 auto 2rem; }
.recruit-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 2rem; }
.recruit-tags span {
    font-size: 0.8rem;
    color: #dbe3f2;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}
.btn-recruit {
    display: inline-block;
    background: var(--app-gradient);
    color: var(--app-ink);
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    font-size: 0.94rem;
    padding: 1rem 2.4rem;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 15px 40px -15px rgba(255,76,41,0.6);
}
.btn-recruit:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -12px rgba(255,76,41,0.7); }

/* Chiusura */
.approccio-closing { text-align: center; padding-top: 4.5rem; }
.approccio-lead {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin-bottom: 0.8rem;
}
.approccio-closing p:not(.approccio-lead) { color: #9aa8c2; font-size: 1.05rem; line-height: 1.7; max-width: 580px; margin: 0 auto 2rem; }

@media (max-width: 768px) {
    .approccio-v2 { padding: 3.5rem 6% 4rem; }
    .approccio-manifesto p { font-size: 1.05rem; }
    .para-box { padding: 1.5rem 1.4rem; }
    .para-box p, .approccio-beats .para-box .beat-quote, .approccio-beats .para-box .beat-reveal { font-size: 1rem; }
    .value-item { grid-template-columns: 44px 1fr; gap: 1.1rem; }
    .value-num { font-size: 1.4rem; }
    .approccio-story h3 { font-size: 1.3rem; }
    .approccio-example { padding: 2.2rem 1.6rem; }
    .approccio-proof { gap: 2rem; }
    .recruit-inner { padding: 2.6rem 1.6rem; }
    .mission-inner { padding: 2.6rem 1.6rem; }
}

/* ============================================================
   PAGINA ASSISTENTE IA — sezione guida "Come funziona"
   ============================================================ */
.assistente-guida { max-width: 1080px; margin: 0 auto; padding: 4rem 6% 5rem; }
.assistente-guida h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 0.7rem 0 0; }
.assistente-guida .ag-lead {
    color: #cbbde6;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.7;
    max-width: 780px;
    margin: 1.1rem 0 0;
}
.assistente-guida .ag-h3 {
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: #fff;
    margin: 3rem 0 1.4rem;
}
.ag-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ag-card {
    border: 1px solid rgba(176,38,255,0.22);
    border-radius: 14px;
    padding: 1.5rem;
    background: rgba(176,38,255,0.04);
}
.ag-card .ag-ico { font-size: 1.6rem; }
.ag-card h4 { margin: 0.7rem 0 0.4rem; font-size: 1.02rem; color: #fff; }
.ag-card p { margin: 0; color: #b9a9d6; font-size: 0.9rem; line-height: 1.55; }

.ag-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; max-width: 780px; }
.ag-steps li { display: flex; gap: 1rem; align-items: flex-start; color: #d7c9ef; line-height: 1.65; }
.ag-steps li strong { color: #fff; }
.ag-step-n {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: 0.9rem;
    background: var(--gradient-accent); color: #fff;
}

.ag-ask { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.6rem; max-width: 900px; }
.ag-ask li { color: #cbbde6; padding-left: 1.5rem; position: relative; font-size: 0.95rem; line-height: 1.5; }
.ag-ask li::before { content: '“'; position: absolute; left: 0; top: 0.1rem; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.ag-foot { color: #9d8bbf; font-size: 0.85rem; margin-top: 2.4rem; }

@media (max-width: 860px) { .ag-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ag-cards { grid-template-columns: 1fr; } .ag-ask { grid-template-columns: 1fr; } }

/* --- Iubenda: rete di sicurezza CSS, nel caso alcune impostazioni non
       arrivino dal pannello Iubenda. Stesso stile della card viola/navy
       del resto del sito, "!important" perche' Iubenda applica i suoi
       stili con priorita' alta. --- */
#iubenda-cs-banner, .iubenda-cs-container {
    font-family: 'Inter', sans-serif !important;
}
#iubenda-cs-banner .iubenda-cs-rationale,
#iubenda-cs-banner .iubenda-cs-content {
    background: #160726 !important;
    color: #ece0ff !important;
    border-top: 1px solid rgba(176,38,255,0.3) !important;
}
#iubenda-cs-banner a { color: #c9a0ff !important; }
#iubenda-cs-banner .iubenda-cs-close-btn { color: #ece0ff !important; }
#iubenda-cs-banner button[class*="accept"] {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
#iubenda-cs-banner button[class*="reject"],
#iubenda-cs-banner button[class*="customize"] {
    background: #2a1440 !important;
    border-color: rgba(176,38,255,0.4) !important;
    color: #ece0ff !important;
}

/* Banner cookie: nascosto del tutto (richiesta esplicita) — resta solo
   il pallino per riaprire le preferenze quando serve. */
#iubenda-cs-banner { display: none !important; }

/* La posizione del pallino "preferenze cookie" si imposta dal pannello
   Iubenda (Widget privacy → Scegli una posizione → "Anchored center
   left"), non da qui: quel widget scrive la posizione direttamente
   sull'elemento via JavaScript, quindi un CSS nostro può solo entrare
   in conflitto invece di aiutare. */

/* "Cosa possiamo fare per te" (servizi.html): le 4 card demo passano
   da 3+1 a una griglia 2x2, più grandi (più spazio, testi più grandi). */
.grid-servizi-plain {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6rem;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.grid-servizi-plain .card { padding: 3rem 2.6rem; }
.grid-servizi-plain .card h3 { font-size: 1.7rem; margin-bottom: 1.1rem; }
.grid-servizi-plain .card p { font-size: 1.1rem; line-height: 1.7; }
.grid-servizi-plain .card-demo-btn {
    margin-top: 1.8rem;
    padding: 0.95rem 1.7rem;
    font-size: 0.98rem;
}
.grid-servizi-plain .card-demo-btn .play-dot { width: 26px; height: 26px; }
.grid-servizi-plain .card-demo-btn .play-dot svg { width: 11px; height: 11px; }
@media (max-width: 760px) {
    .grid-servizi-plain { grid-template-columns: 1fr; }
    .grid-servizi-plain .card { padding: 2.2rem 1.8rem; }
}