/* ==========================================================================
   OVIX AI Solutions — stile del sito

   PALETTE (rifatta il 27/09/2026 sul sito eu.mozaracing.com, indicato
   dall'utente come riferimento): quasi monocromatica. Due neutri — off-white
   e grafite — piu' UN oro (champagne #C9AF89) e UN blu d'azione (#8F6B34).
   Prima c'erano quattro colori vivi che ruotavano di sezione in sezione:
   quell'impostazione e' stata abbandonata, non va reintrodotta per pezzi.

   FONDO: chiaro all'inizio e alla fine, SCURO in una fascia centrale che si
   attiva scorrendo (vedi la sezione in fondo al file, body.is-dark).

   CARATTERE: Open Sans, lo stesso del riferimento, dove TUTTE le famiglie
   (testi, titoli, menu, schede, pulsanti) puntano a quell'unica famiglia.
   Ospitato dentro il sito in quattro pesi, licenza OFL: nessuna richiesta a
   server di terze parti. Outfit 800 resta solo per le cifre del listino,
   perche' l'utente aveva chiesto un carattere piu' spesso sui prezzi.
   ========================================================================== */

/* OPEN SANS, aggiunto il 27/09/2026: e' il carattere del sito preso a
   riferimento dall'utente. Verificato nel loro codice, dove TUTTE le famiglie
   puntano alla stessa:
       --font-body-family:       "Open Sans", sans-serif
       --font-heading-family:    "Open Sans", sans-serif
       --font-navigation-family: var(--font-heading-family)
       --font-product-family:    var(--font-heading-family)
   Il loro tema dichiara anche AlibabaSans, ma NON e' agganciato a nessun
   elemento: e' residuo. Bene cosi', perche' e' un font proprietario di
   Alibaba e ospitarlo sarebbe stato un problema di licenza. Open Sans invece
   e' OFL (licenza in assets/fonts/OFL-OpenSans.txt) e sta dentro il sito:
   nessuna richiesta a Google, come tutti gli altri.
   I quattro pesi sono file distinti, verificato con le impronte: 4 su 4. */
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Outfit 800: serve solo per le cifre del listino, dove Space Grotesk anche
   in grassetto resta troppo leggero. Licenza OFL in assets/fonts/OFL-Outfit.txt. */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* La riserva nominava "Space Grotesk", che dal 27/09/2026 non viene piu'
     caricato: indicava un carattere inesistente. Ora ricade su Open Sans. */
  --font-cifre: "Outfit", "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
  /* ------------------------------------------------------------------------
     PALETTE RIFATTA IL 27/09/2026 sul sito indicato dall'utente
     (eu.mozaracing.com), estraendo i colori dal suo codice e contandoli:
       #303030  127 volte  -> grafite, il loro colore di testo
       #FFFFFF   73        -> bianco
       #C9AF89   45        -> champagne, l'accento premium
       #616161   20        -> grigio medio
       #FBFBFB   15        -> off-white del fondo
       #8F6B34   15        -> blu elettrico, UNICO colore d'azione
       #F3F3F3   14        -> grigio chiaro
       #108474   12        -> verde-teal, unico altro colore usato

     QUEL SITO NON HA UN ARCOBALENO: due neutri, un oro, un blu. Prima qui
     c'erano quattro colori vivi (ciano, viola, verde acido, ambra) che
     giravano di sezione in sezione. I NOMI delle variabili sono rimasti
     invariati di proposito: sono usati 48 volte nel foglio di stile, piu'
     dalle classi .hl-* dei titoli e dalle regole [data-c] delle schede, che
     cosi' si ripingono da sole senza toccare una riga delle pagine.
     ------------------------------------------------------------------------ */

  /* Fondo e testo: i neutri del riferimento */
  --paper: #FBFBFB;
  --paper-2: #FFFFFF;
  --paper-3: #F3F3F3;
  /* #303030 e' esattamente il colore di testo del riferimento, dove ricorre
     127 volte: e' il valore piu' usato di tutto il loro sito. Prima qui c'era
     #1A1A1A, piu' scuro: uno scostamento mio, corretto il 27/09/2026 per
     usare il loro valore vero. */
  --ink: #303030;
  --ink-soft: #3D3D3D;
  --muted: #616161;
  --line: #E2E2E2;
  --shadow: 12px 12px 40px rgba(48, 48, 48, 0.08);

  /* Versioni vive, per le forme 3D e i dettagli decorativi */
  --cyan-vivid: #C9AF89;    /* blu schiarito, per il fondo scuro */
  --violet-vivid: #616161;  /* grigio medio: era viola */
  --lime-vivid: #1AB89E;
  /* Il giallo del logo. Nasce per fondo scuro: sulle carte chiare non si leggerebbe,
     quindi si usa SOLO dentro le carte scure del listino. Dal 15/10/2026 e' lui il
     colore dei soldi, al posto del verde acqua: cosi' il prezzo richiama il marchio. */
  --oro-prezzo: #FFD400;    /* teal schiarito: era verde acido */
  --amber-vivid: #C9AF89;   /* champagne: era ambra */
  --champagne-vivid: #C9AF89;

  /* Versioni leggibili su fondo chiaro, per testi e bordi */
  --cyan: #8F6B34;          /* il blu elettrico del riferimento */
  --violet: #303030;        /* grafite: era viola */
  --lime: #108474;          /* il verde-teal del riferimento */
  --amber: #8F6B34;         /* champagne scurito, leggibile */
  --champagne: #8F6B34;
  --accent: var(--cyan);

  /* Il carattere del riferimento. La riserva e' la stessa che usano loro
     ("sans-serif") allungata coi caratteri di sistema, cosi' se il file non
     arriva la pagina resta leggibile invece di cadere su un serif. */
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(15.5px, 1vw, 16.5px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper-2); padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Sfondo: il video della sfera ----------------------------------------
   Sostituisce la scena 3D calcolata col WebGL, ritirata il 29/09/2026 insieme
   alla libreria three.js da 1,3 MB. Il video pesa 60 KB: venti volte meno, e
   senza il calcolo continuo che consumava batteria.

   Sta DIETRO tutto e molto attenuato: e' atmosfera, non contenuto. Se si
   vedesse troppo, i testi sopra diventerebbero faticosi da leggere. */
#sfondo-sfera {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Nero che sfuma verso l'oro, non nero piatto. L'oro e' quello del sito di
     riferimento, rgba(235, 205, 162), l'unico che usa nelle sue sfumature.
     Tre sorgenti a intensita' diversa: una calda in alto a destra dove sta la
     sfera, una piu' tenue in basso a sinistra per non lasciare un angolo
     morto, e il nero sotto a tenere insieme il tutto. Le percentuali sono
     basse di proposito: l'oro deve essere un riverbero, non una macchia. */
  background:
    radial-gradient(58% 48% at 78% 22%, rgba(235, 205, 162, 0.20), transparent 68%),
    radial-gradient(52% 44% at 16% 76%, rgba(201, 175, 137, 0.12), transparent 70%),
    radial-gradient(90% 70% at 50% 50%, #0A0906 0%, #000000 72%);
}
/* Quanto il video viene attenuato. E' una variabile e non un numero fisso
   perche' i due video si scambiano il posto in dissolvenza: se il valore
   fosse scritto due volte, la regola della fascia scura piu' sotto ne
   sovrascriverebbe una sola e durante lo scambio si vedrebbe un lampo. */
#sfondo-sfera { --velo: 0.85; }
body.is-dark #sfondo-sfera { --velo: 0.6; }

/* --- L'orbita disegnata, al posto del video ------------------------------
   Sta in alto a destra, dove la sfumatura dello sfondo e' gia' piu' calda: cosi'
   l'animazione sembra nascere dalla luce invece di esserci appoggiata sopra.
   Tutto in oro trasparente: e' atmosfera, il testo deve restare la cosa leggibile. */
#orbita {
  position: absolute;
  top: -12vh; right: -14vw;
  width: min(118vh, 92vw); height: min(118vh, 92vw);
  opacity: 0.62;
}
.orb-anello { fill: none; stroke: rgba(235, 205, 162, 0.22); stroke-width: 1; }
.orb-anello--medio { stroke: rgba(235, 205, 162, 0.3); }
.orb-anello--piccolo { stroke: rgba(235, 205, 162, 0.38); }

/* Gli archi tratteggiati: sono gli stessi cerchi, ma spezzati e in rotazione.
   Sono loro a dare il senso del movimento ordinato — una rotazione costante,
   non un'animazione che pulsa a caso. */
.orb-arco {
  fill: none; stroke: rgba(235, 205, 162, 0.5); stroke-width: 1.4;
  stroke-linecap: round; transform-origin: 300px 300px;
}
.orb-arco--lento { stroke-dasharray: 90 1300; animation: orb-ruota 54s linear infinite; }
.orb-arco--veloce { stroke-dasharray: 54 880; animation: orb-ruota 33s linear infinite reverse; }

/* I punti che scorrono sugli anelli: ciascuno e' un cerchietto dentro un gruppo
   che ruota. Velocita' diverse e sfasate, cosi' non si allineano mai. */
.orb-punti circle { fill: rgba(245, 222, 179, 0.9); }
.orb-giro { transform-origin: 300px 300px; animation: orb-ruota linear infinite; }
.orb-giro--1 { animation-duration: 46s; }
.orb-giro--2 { animation-duration: 31s; animation-direction: reverse; }
.orb-giro--3 { animation-duration: 23s; animation-delay: -7s; }
.orb-giro--4 { animation-duration: 17s; animation-direction: reverse; animation-delay: -4s; }

/* Il nucleo respira: lentissimo, quasi impercettibile. E' il battito della pagina. */
.orb-nucleo { fill: rgba(255, 212, 0, 0.5); animation: orb-respiro 7s ease-in-out infinite; }
.orb-nucleo-bordo { fill: none; stroke: rgba(255, 212, 0, 0.3); stroke-width: 1;
  animation: orb-alone 7s ease-in-out infinite; }

@keyframes orb-ruota { to { transform: rotate(360deg); } }
@keyframes orb-respiro { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
@keyframes orb-alone { 0%, 100% { opacity: 0.25; r: 40; } 50% { opacity: 0.5; r: 48; } }

/* Sul telefono resta l'essenziale: anello centrale e nucleo. Il resto non viene
   nemmeno disegnato — e' il modo di avere un'animazione ricca sul computer senza
   farla pagare a chi arriva da una tacca di rete. */
@media (max-width: 900px) {
  #orbita { top: -6vh; right: -30vw; width: 92vh; height: 92vh; opacity: 0.5; }
  .orb-anello--grande, .orb-anello--medio, .orb-arco--lento, .orb-giro--1, .orb-giro--2 { display: none; }
}

/* Chi ha chiesto meno movimento la vede ferma, non assente: resta il disegno. */
@media (prefers-reduced-motion: reduce) {
  .orb-arco, .orb-giro, .orb-nucleo, .orb-nucleo-bordo { animation: none; }
}

/* --- Intestazione --------------------------------------------------------- */
/* Barra in alto: piena, con una linea sottile sotto. Prima era una sfumatura
   traslucida che svaniva: si leggeva male sopra la scena 3D e sopra le foto.
   Usa var(--paper-2) e var(--line), quindi si CAPOVOLGE da sola quando la
   pagina passa al fondo scuro: senza quello resterebbe una barra bianca
   appiccicata sopra una pagina nera, ed e' la prima cosa che si noterebbe. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-block: 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 14px rgba(11, 11, 18, 0.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* Marchio: un chip (processore) invece della vecchia sfumatura arcobaleno.
   Disegnato in CSS, senza immagini: si cambia qui e cambia in tutte e 9 le pagine,
   nell'intestazione e nel piede. I piedini sporgono ai lati, quindi c'e' un margine
   orizzontale che evita che tocchino la scritta. */

/* --- Il marchio nell'intestazione -----------------------------------------
   Dal 14/10/2026 il chip disegnato in CSS e la scritta sono sostituiti dal logo
   vero, in formato vettoriale: nitido a ogni dimensione e sotto i 4 KB.
   Ce ne sono DUE perche' il sito si capovolge: su fondo chiaro serve la scritta
   scura, su fondo scuro quella bianca. Si scambiano qui, senza JavaScript. */
/* Il pulsante WhatsApp, nella tavolozza del sito: il verde del marchio su questa
   sabbia e bruno urlava, e un pallino verde isolato sembrava un difetto. Resta il
   colore d'accento del sito, e a farlo riconoscere basta la parola. */
.btn-wa { background: var(--accent); color: var(--paper-2); border: 0; font-weight: 700;
  box-shadow: 0 10px 30px rgba(143, 107, 52, 0.22); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(143, 107, 52, 0.3); }
body.is-dark .btn-wa { color: #1b1b1b; }

.brand-logo { display: block; height: 26px; width: auto; }
.brand-logo--scuro { display: none; }
body.is-dark .brand-logo--chiaro { display: none; }
body.is-dark .brand-logo--scuro { display: block; }
@media (max-width: 560px) { .brand-logo { height: 22px; } }

/* Nel piede il logo sta un filo piu' grande che nella barra in alto. */
.footer-brand { display: flex; align-items: center; }
.footer-brand .brand-logo { height: 30px; }
/* Il nome per esteso resta scritto accanto al logo: il logo e' la forma breve,
   ma la ragione sociale deve restare leggibile, non solo per i lettori di schermo. */
.footer-brand { gap: 12px; }
.footer-nome { font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 560px) { .footer-brand { flex-wrap: wrap; } }

.brand-mark {
  position: relative;
  width: 20px; height: 20px;
  margin: 0 4px;
  border-radius: 5px;
  background: linear-gradient(145deg, var(--violet-vivid), var(--cyan-vivid));
  box-shadow: 0 6px 18px rgba(48, 48, 48, 0.22);
  flex: 0 0 auto;
}
/* I piedini del chip, a sinistra e a destra. */
.brand-mark::before {
  content: "";
  position: absolute; top: 3px; bottom: 3px; left: -3px; right: -3px;
  background:
    repeating-linear-gradient(180deg, var(--violet) 0 2px, transparent 2px 5px) left center / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--violet) 0 2px, transparent 2px 5px) right center / 3px 100% no-repeat;
}
/* Il quadrato interno: il "nucleo" del processore. */
.brand-mark::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1.5px solid var(--paper-2);
  border-radius: 2px;
}
/* Nome completo: spaziatura ridotta, altrimenti su schermo piccolo
   "OVIX AI Solutions" finisce sopra il pulsante del menu. */
.brand-name { font-weight: 700; letter-spacing: 0.04em; font-size: 1rem; white-space: nowrap; }
@media (max-width: 420px) {
  .brand-name { font-size: 0.88rem; letter-spacing: 0.02em; }
}

.nav-list {
  list-style: none; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 24px);
  margin: 0; padding: 0;
}
/* Menu come il riferimento: --font-navigation-weight 400,
   --font-navigation-text-transform uppercase, e il loro stesso corpo
   variabile. Il maiuscoletto e' la cosa che si riconosce subito guardando
   la loro barra in alto. */
.nav-list a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: clamp(0.75rem, 0.748rem + 0.3174vw, 0.875rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Con cinque voci piu' il nome completo la barra si affolla: fra 760 e
   1200 px stringo spaziatura e corpo, invece di far andare a capo il menu. */
@media (min-width: 761px) and (max-width: 1200px) {
  .nav-list { gap: 12px; }
  .nav-list a { font-size: 0.84rem; }
  .nav-cta { padding: 8px 14px; }
}
.nav-list a:hover { color: var(--ink); }
.nav-cta {
  color: var(--ink) !important;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 9px 18px; border-radius: 999px;
}
.nav-cta:hover { border-color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav-toggle {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--paper-2); border: 1px solid var(--line);
    color: var(--ink);
  }
  .nav-toggle span[aria-hidden] {
    width: 16px; height: 2px; background: currentColor; border-radius: 2px;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .nav-list {
    position: absolute; right: var(--gutter); top: 72px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: 16px; padding: 12px; min-width: 200px;
    box-shadow: var(--shadow);
  }
  .nav-list:not(.open) { display: none; }
  .nav-list a { display: block; padding: 10px 12px; border-radius: 10px; }
  .nav-cta { text-align: center; margin-top: 4px; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; align-items: center;
  /* Compattato: con i tre punti in piu' deve stare tutto in una schermata
     senza scorrere, anche su portatili con schermo basso. */
  padding-block: 104px 56px;
}
.hero-inner { max-width: 820px; }

/* --- I tre motivi sotto il titolo ---------------------------------------- */
.hero-punti {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 60ch;
}
.hero-punti li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.hero-punti strong { color: var(--ink); font-weight: 700; }
/* Icone disegnate con l'AI il 30/09/2026, al posto delle emoji: quelle
   cambiavano aspetto da un sistema all'altro e stonavano con la palette.
   Queste sono a linea sottile champagne su fondo trasparente, cosi'
   funzionano sia sul fondo scuro sia su quello chiaro. */
.hero-punto-icona {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  object-fit: contain;
  display: block;
}

/* Su schermi bassi si stringe ancora, per non far scorrere la prima schermata. */
@media (max-height: 760px) {
  .hero { padding-block: 92px 40px; }
  /* Questo valore deve restare SOTTO quello della regola principale: il suo
     scopo e' far stare la prima schermata dentro uno schermo basso senza
     scorrere. Il 27/09/2026 ci era finito dentro per errore il valore della
     regola principale (4rem), che ne annullava la funzione e ingrandiva il
     titolo invece di ridurlo. */
  /* Carattere: Outfit, lo stesso delle cifre del listino. Scelto il 30/09/2026
   fra tre opzioni perche' e' gia' nel sito - nessun file da scaricare,
   nessuna licenza nuova da dichiarare - e lega il titolone ai prezzi.
   Disponibile solo nel peso 800: piu' marcato del 600 di Open Sans, quindi
   la spaziatura scende leggermente sotto lo zero per compensare, altrimenti
   a quel peso le lettere si toccano. */
.hero-title {
  margin: 0 0 26px;
  font-family: var(--font-cifre);
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
  .hero-sub { margin-bottom: 18px; font-size: 1rem; }
  .hero-punti { gap: 7px; margin-bottom: 20px; }
  .hero-punti li { font-size: 0.86rem; }
}

.eyebrow {
  margin: 0 0 22px;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.78rem; color: var(--accent);
}


.hl { position: relative; white-space: nowrap; }
.hl-cyan { color: var(--cyan); }

.hero-sub {
  margin: 0 0 36px;
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
}
.hero-sub strong { color: var(--ink); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-block; text-decoration: none;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary {
  background: var(--ink); color: var(--paper-2);
  box-shadow: 0 10px 30px rgba(11, 11, 18, 0.18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(11, 11, 18, 0.24); }
.btn-ghost { border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }

/* --- Pillola "Provami" sopra il titolo dell'hero -------------------------
   Sta in alto perché deve vedersi appena si apre il sito, senza scorrere. */
.try-pill {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px;
  padding: 8px 16px 8px 13px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(11, 11, 18, 0.08);
  font: inherit; font-size: 0.86rem; color: var(--ink-soft);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.try-pill:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(11, 11, 18, 0.12);
}
.try-pill strong { color: var(--ink); font-weight: 700; }
.try-pill-text { color: var(--muted); }

@media (max-width: 520px) {
  .try-pill-text { display: none; }
}

/* --- Banner "Provami" che apre la chat ----------------------------------- */
.try-banner {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 26px;
  padding: 12px 18px 12px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(11, 11, 18, 0.08);
  font: inherit; text-align: left; cursor: pointer;
  max-width: 480px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.try-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 11, 18, 0.13);
  border-color: var(--accent);
}
.try-banner-dot {
  width: 10px; height: 10px; border-radius: 999px; flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: pulsa 1.8s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.try-banner-text { display: block; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.35; }
.try-banner-text strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 1px; }
.try-banner-go { color: var(--accent); font-weight: 700; font-size: 1.1rem; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .try-banner-dot { animation: none; }
}

/* L'invito a scorrere (pastiglia con il trattino, in fondo al centro) e'
   stato RIMOSSO il 20/09/2026: dopo aver compattato la prima schermata
   finiva sopra i pulsanti, in particolare sopra "Contattaci".
   Non e' stato sostituito: era decorativo e nessuno ha bisogno che gli si
   spieghi come si scorre una pagina. */

/* --- Frasi che compaiono attorno alla scena 3D --------------------------- */

/* Su schermi piccoli la scena sta in alto: le frasi non devono coprire il testo. */

/* --- Dimostrazione: la sezione resta ferma e il contenuto si monta --------
   L'altezza decide QUANTO si deve scorrere per passare al messaggio dopo:
   più bassa = avanza più in fretta. 240svh = circa mezza schermata per passo. */
.demo { position: relative; z-index: 2; height: 240svh; }

.demo-sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; align-items: center;
  background:
    radial-gradient(64% 56% at 50% 0%, rgba(201, 175, 137, 0.16), transparent 70%),
    var(--paper);
  border-top: 1px solid var(--line);
  transition: background 0.5s ease;
}
.demo[data-accent="violet"] .demo-sticky { background: radial-gradient(64% 56% at 50% 0%, rgba(48, 48, 48, 0.18), transparent 70%), var(--paper); }
.demo[data-accent="lime"] .demo-sticky { background: radial-gradient(64% 56% at 50% 0%, rgba(16, 132, 116, 0.26), transparent 70%), var(--paper); }
.demo[data-accent="amber"] .demo-sticky { background: radial-gradient(64% 56% at 50% 0%, rgba(201, 175, 137, 0.34), transparent 70%), var(--paper); }

.demo-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: 120px;
}

.kicker {
  margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.78rem; color: var(--accent);
}
/* Filetto champagne sotto l'occhiello di sezione. E' il dettaglio che sul
   sito preso a riferimento fa sembrare ogni sezione "curata": un segno
   piccolo, sempre nello stesso posto, ripetuto in tutta la pagina.
   Il TESTO resta del colore della sezione, non champagne: su fondo bianco
   quel colore non avrebbe contrasto sufficiente per essere letto. Qui fa
   solo da segno grafico, e per questo e' decorativo e non informativo. */
.kicker::after {
  content: "";
  display: block;
  width: 28px; height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--champagne-vivid);
}
.demo-title {
  margin: 0 0 18px;
  font-weight: 600;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.02; letter-spacing: 0;
}
.demo-lead { margin: 0 0 32px; max-width: 46ch; color: var(--ink-soft); }

.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demo-steps li {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 0.98rem;
  transition: color 0.3s ease;
}
.demo-steps li span {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--line);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  flex: none;
}
.demo-steps li.on { color: var(--ink); }
.demo-steps li.on span {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: scale(1.25);
}

/* Telefono */
.phone {
  justify-self: center;
  width: 100%; max-width: 380px;
  border-radius: 34px;
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(11, 11, 18, 0.12);
}
.phone-screen {
  background: var(--paper-3);
  border-radius: 24px;
  padding: 18px;
  display: grid; gap: 14px;
  min-height: 460px;
  align-content: start;
}

.chat {
  margin: 0;
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow: 0 6px 18px rgba(11, 11, 18, 0.05);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat.on { opacity: 1; transform: none; }

.chat-meta { margin: 0 0 7px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chat-body { margin: 0; font-size: 1.02rem; }
.chat-note { margin: 9px 0 0; font-size: 0.82rem; color: var(--muted); }

.chat-guest { border-left: 3px solid var(--cyan); }
.chat-bot { border-left: 3px solid var(--violet); }
.chat-owner { border-left: 3px solid var(--lime); }
.chat-result { border-left: 3px solid var(--amber); }

.result-figure {
  margin: 4px 0 0;
  font-weight: 600; font-size: clamp(1.875rem, 4.6vw, 2.75rem);
  line-height: 1; letter-spacing: 0; color: var(--amber);
}
.result-figure span { font-size: 0.9rem; letter-spacing: 0.04em; color: var(--muted); }

@media (max-width: 900px) {
  .demo { height: 220svh; }
  .demo-grid { grid-template-columns: 1fr; padding-block: 100px; }
  .demo-text { order: 2; }
  .phone { order: 1; }
  .phone-screen { min-height: 0; }
}

/* --- Prova interattiva ---------------------------------------------------- */
.try-head { max-width: 62ch; margin-bottom: 30px; }
.try-head h2 {
  margin: 0 0 16px;
  font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.04; letter-spacing: 0;
}

.try-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip {
  font: inherit; font-weight: 700;
  padding: 11px 20px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-soft);
  border: 1px solid var(--line); cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.chip:hover { transform: translateY(-2px); color: var(--ink); }
.chip.is-on { color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

.try-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow);
  max-width: 720px;
}
.try-chat { display: grid; gap: 12px; min-height: 260px; align-content: start; }

.try-msg {
  margin: 0;
  border-radius: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  background: var(--paper-3);
  opacity: 0;
  transform: translateY(12px);
  animation: msgIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  max-width: 88%;
}
.try-msg.is-guest { justify-self: start; border-left: 3px solid var(--cyan); }
.try-msg.is-bot { justify-self: end; background: var(--paper-2); border-left: 3px solid var(--violet); }
.try-msg .who {
  display: block; margin-bottom: 6px;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.try-msg .what { display: block; font-size: 1rem; }
.try-msg .trad { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); }

@keyframes msgIn { to { opacity: 1; transform: none; } }

.try-typing { display: inline-flex; gap: 4px; align-items: center; }
.try-typing i {
  width: 6px; height: 6px; border-radius: 999px; background: var(--muted);
  animation: blink 1.1s infinite;
}
.try-typing i:nth-child(2) { animation-delay: 0.18s; }
.try-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.try-disclaimer { margin: 18px 0 0; font-size: 0.84rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .try-msg { opacity: 1; transform: none; animation: none; }
  .try-typing i { animation: none; }
}

/* --- Contatti ------------------------------------------------------------- */
.contact { border-top: 1px solid var(--line); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px); align-items: start;
}
.contact h2 {
  margin: 0 0 16px;
  font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.04; letter-spacing: 0;
}
.contact-direct { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-soft); }
.contact-direct a { color: var(--accent); }

.contact-form {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 24px; padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow);
  display: grid; gap: 16px;
}
.hp-field { position: absolute; left: -9999px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.85rem; font-weight: 700; }
.field input[type="text"], .field input[type="email"], .field textarea {
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 0.88rem; color: var(--ink-soft); }
.field-check input { margin-top: 3px; flex: none; }
.field-check em { color: var(--amber); font-style: normal; }
.contact-form .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* --- Sezione di chiusura -------------------------------------------------- */
.section { position: relative; z-index: 2; padding-block: clamp(90px, 14vh, 160px); background: var(--paper); }

/* --- Dove c'e' la sfera, le sezioni non la coprono -------------------------
   Ogni .section dipinge un fondo pieno a tutta larghezza sopra la sfera, che
   sta piu' indietro: il video si vedeva solo nella prima schermata, dove
   .hero non ha fondo proprio. Nelle pagine con la sfera le sezioni diventano
   trasparenti e il fondo lo dipinge il body, una volta sola.
   Le sezioni CHIARE restano piene: li' il fondo deve davvero schiarire. */
body:has(#sfondo-sfera) .section:not([data-chiara]) { background: transparent; }
body:has(#sfondo-sfera) .section-soft:not([data-chiara]) { background: transparent; }
body:has(#sfondo-sfera) .stats-band:not([data-chiara]) { background: transparent; }
.next-up { border-top: 1px solid var(--line); }
.next-up h2 {
  margin: 0 0 18px;
  font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.04; letter-spacing: 0;
}
.section-lead { margin: 0; max-width: 60ch; color: var(--ink-soft); }

/* ==========================================================================
   PAGINE INTERNE (come-funziona, servizi, siti-web)
   ========================================================================== */

/* Sulle pagine interne non c'è la scena 3D: serve spazio sotto l'intestazione. */
.page .page-head { padding-block: 150px 40px; position: relative; z-index: 2; }
.page-head h1 {
  margin: 0 0 18px;
  font-weight: 600;
  font-size: clamp(1.875rem, 5vw, 3.375rem);
  line-height: 1.02; letter-spacing: 0;
}
.hl-violet { color: var(--violet); }
.hl-amber { color: var(--amber); }

.section-soft { background: var(--paper-3); }

.nav-list a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* La dimostrazione a scelta di canale (.walk-*, .behind-*, .chips) e' stata
   rimossa il 24/09/2026 insieme al suo codice in js/main.js: la pagina
   "come funziona" usa ora la stessa scena animata della home. */

/* --- Schede piccole ------------------------------------------------------- */
.cards-3 {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 26px;
}
.mini-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 20px rgba(11, 11, 18, 0.04);
}
.mini-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.mini-card p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

/* --- Servizi -------------------------------------------------------------- */
.services {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.service {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--cyan);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 8px 26px rgba(11, 11, 18, 0.05);
}
.service[data-c="violet"] { border-top-color: var(--violet); }
.service[data-c="amber"] { border-top-color: var(--amber); }
.service[data-c="lime"] { border-top-color: var(--lime); }
.service-quiet { background: var(--paper-3); border-top-color: var(--line); }
/* I numeri 01/02/03 delle schede: erano grigi e si perdevano nel fondo.
   In champagne e in Outfit 800 diventano il dettaglio "premium" della scheda,
   che e' il ruolo che quel colore ha sul sito preso a riferimento.
   var(--champagne) vale #8F6B34 su fondo chiaro e #C9AF89 su fondo scuro:
   una variabile sola, leggibile in entrambi gli stati della pagina. */
.service-n {
  margin: 0 0 10px;
  font-family: var(--font-cifre); font-weight: 800;
  color: var(--champagne);
  font-size: 1.05rem; letter-spacing: 0.12em;
}
.service h2 { margin: 0 0 12px; font-size: clamp(1.125rem, 1.8vw, 1.375rem); letter-spacing: 0; }
.service p { color: var(--ink-soft); }
.service-gain { color: var(--ink) !important; font-weight: 700; font-size: 0.92rem; }
.link-arrow { color: var(--accent); font-weight: 700; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* --- Quattro passaggi ----------------------------------------------------- */
.steps-4 {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: none;
}
.steps-4 li { background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.steps-4 h3 { margin: 10px 0 8px; font-size: 1.05rem; }
.steps-4 p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.step-n {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--ink); color: var(--paper-2);
  font-family: var(--font-cifre); font-weight: 800; font-size: 0.95rem;
  /* Anello champagne attorno al numero del passaggio. Fatto con box-shadow e
     non con border di proposito: un bordo avrebbe cambiato le dimensioni del
     cerchio e spostato il numero dal centro. I due strati servono a staccare
     l'anello dal fondo della scheda con un filo di spazio. */
  box-shadow:
    0 0 0 2px var(--paper-2),
    0 0 0 3.5px var(--champagne-vivid);
}

/* --- Fasce di prezzo ------------------------------------------------------
   Rifatte il 24/09/2026. Prima erano due schede bianche come tutte le altre
   della pagina, e per questo non si notavano. Ora sono due CARTE SCURE - una
   viola profondo, una quasi nera - con le cifre in Outfit 800, molto piu'
   spesso di Space Grotesk. Il ragionamento: tutta la pagina e' chiara, quindi
   basta invertire il listino perche' diventi la prima cosa che l'occhio
   trova, senza aggiungere altri colori al resto del sito. Il verde acido e'
   riservato ai soldi (prezzo e risparmio), l'azzurro agli accenti della carta
   completa. */
.tiers {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 32px;
}
/* Carte del listino: il viola e' stato sostituito il 27/09/2026 con la
   grafite del sito di riferimento, che non usa viola in nessun punto. Il
   bordo champagne al posto del verde acido e' l'accento premium della
   palette nuova. Questi valori sono scritti a mano e non passano dalle
   variabili, quindi vanno cambiati qui: le carte restano scure sempre, anche
   quando la pagina attorno e' chiara, e non devono capovolgersi. */
.tier {
  background: linear-gradient(165deg, #3A3A3A 0%, #1F1F1F 100%);
  border: 1px solid rgba(201, 175, 137, 0.28);
  border-radius: 26px;
  padding: 30px 28px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.3);
  color: #F0F0F0;
  display: flex; flex-direction: column; gap: 12px;
}
/* La fascia completa e' quasi nera: si distingue dalla viola senza urlare,
   e l'azzurro sul nero e' la combinazione piu' leggibile che abbiamo. */
.tier-mark {
  background: linear-gradient(165deg, #171B31 0%, #0B0B12 100%);
  border-color: rgba(201, 175, 137, 0.45);
  box-shadow: 0 22px 54px rgba(11, 11, 18, 0.36);
}
.tier-badge {
  align-self: start; margin: 0;
  background: var(--cyan-vivid); color: #0B0B12;
  font-family: var(--font-cifre); font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.tier h3 {
  margin: 0;
  font-family: var(--font-cifre); font-weight: 800;
  font-size: 1.4rem; letter-spacing: -0.01em;
  color: #FFFFFF;
}
/* La cifra e' il protagonista: corpo grande, carattere spesso, verde acido. */
.tier-price {
  margin: 0;
  font-family: var(--font-cifre); font-weight: 800;
  font-size: clamp(2.5rem, 6.5vw, 3.1rem);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--oro-prezzo);
}
.tier-for { margin: 0; color: #C5CADD; font-size: 0.92rem; }
.tier ul {
  margin: 6px 0 0; padding-left: 20px;
  color: #DCE0EE; font-size: 0.92rem;
  display: grid; gap: 8px;
}
.tier ul strong { color: #FFFFFF; font-weight: 700; }
.tier ul::marker, .tier li::marker { color: rgba(201, 175, 137, 0.75); }
/* I riquadri sotto ai prezzi. Erano gialli su fondo bianco, cioe' di un'altra
   famiglia rispetto alle carte scure appena sopra: sembravano appartenere a
   un'altra pagina. Ora sono scuri come le carte, ma volutamente piu' piatti -
   nessuna sfumatura, angoli meno arrotondati, una barra verde a sinistra -
   perche' devono leggersi come spiegazioni del listino, non competere con i
   prezzi. Il titolo di ogni riquadro e' in Outfit 800, come le cifre. */
.tier-note {
  margin: 16px 0 0;
  padding: 18px 22px;
  background: #141829;
  border: 1px solid rgba(201, 175, 137, 0.18);
  border-left: 4px solid var(--oro-prezzo);
  border-radius: 4px 16px 16px 4px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #DCE0EE;
}
.tiers + .tier-note { margin-top: 26px; }
/* La prima parola in grassetto e' il titolo del riquadro: va staccata. */
.tier-note strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-cifre); font-weight: 800;
  font-size: 1.02rem; letter-spacing: -0.01em;
  color: var(--oro-prezzo);
}
.tier-note strong { color: #FFFFFF; font-weight: 700; }

.hl-lime { color: var(--lime); }

/* ==========================================================================
   PAROLE CHIAVE
   Prima versione (fasce colorate tipo evidenziatore) BOCCIATA dall'utente:
   "orribili". Il difetto era soprattutto la rotazione di quattro colori
   dentro lo stesso paragrafo, che faceva effetto circo.
   Versione attuale, sobria: grassetto + colore scuro della sezione +
   sottolineatura sottile staccata dal testo. Si nota subito, non urla.
   ========================================================================== */
.hero-sub strong,
.section-lead strong,
.mini-card p strong,
.example-card p strong,
.service p strong,
.stat-label strong,
.steps-4 p strong {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Nell'hero le parole chiave restano scure: sopra c'e' gia' il titolo
   colorato, e due colori vicini si disturberebbero. */
.hero-sub strong {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent);
}

/* Sul pannello scuro il colore della sezione non si leggerebbe. */

/* ==========================================================================
   SCENA ANIMATA DELLA HOME
   Una persona disegnata (illustrazione originale in SVG) che scrive, e
   accanto il telefono della struttura dove l'assistente risponde da solo.
   Sostituisce la vecchia dimostrazione a scorrimento e la prova per mestieri.
   ========================================================================== */


/* --- La persona --------------------------------------------------------- */

/* Il braccio e il telefonino si muovono appena: sembra che stia scrivendo. */



/* --- Il telefono della struttura ---------------------------------------- */


@keyframes scenaEntra {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.da-cliente {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.da-bot {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper-2);
  border-bottom-right-radius: 5px;
}
.da-avviso {
  align-self: center;
  max-width: 96%;
  background: color-mix(in srgb, var(--lime-vivid) 22%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  font-size: 0.82rem;
  text-align: center;
}

@keyframes scenaPunto {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}




/* --- Numeri che salgono --------------------------------------------------- */
.stats-band { background: var(--paper-3); border-block: 1px solid var(--line); }
.stats-band h2 {
  margin: 0 0 8px;
  font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.06; letter-spacing: 0;
}
.stats {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 34px;
}
.stat {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 22px;
  border-top: 4px solid var(--accent);
}
.stat:nth-child(2) { border-top-color: var(--violet); }
.stat:nth-child(3) { border-top-color: var(--lime); }
.stat:nth-child(4) { border-top-color: var(--amber); }

.stat-num {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.375rem);
  line-height: 0.95;
  letter-spacing: 0;
  /* Le cifre hanno tutte la stessa larghezza: il numero non "salta"
     mentre sale, altrimenti l'animazione sembra un difetto. */
  font-variant-numeric: tabular-nums;
}
.stat-label { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.4; }
.stat-note { margin: 26px 0 0; color: var(--muted); font-size: 0.86rem; max-width: 60ch; }

/* --- Riga di collegamenti alle pagine ------------------------------------ */
.next-links {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  margin-top: 24px;
}

/* --- Schede "prima / dopo" (automazioni) --------------------------------- */
.example-pair {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 26px;
}
.example-card {
  border-radius: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow: 0 8px 26px rgba(11, 11, 18, 0.05);
}
.example-card p { margin: 0 0 10px; color: var(--ink-soft); }
.example-card p:last-child { margin-bottom: 0; }
.example-tag {
  font-size: 0.7rem !important; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted) !important;
}
.example-meta { font-size: 0.82rem !important; color: var(--muted) !important; }
.example-card.is-before { border-left: 3px solid var(--muted); background: var(--paper-3); }
.example-card.is-after { border-left: 3px solid var(--lime); }

/* --- Fascia con richiamo all'azione -------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 {
  margin: 0 0 14px;
  font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.06; letter-spacing: 0;
}
.cta-band .section-lead { margin-inline: auto; margin-bottom: 26px; }

/* --- Piede ---------------------------------------------------------------- */
.site-footer { position: relative; z-index: 2; background: var(--paper-3); padding-block: 60px; border-top: 1px solid var(--line); }
.footer-inner { display: grid; gap: 10px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.footer-note { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* --- Comparse allo scorrimento ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .chat, .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .scroll-hint span { animation: none; }
  .demo { height: auto; }
  .demo-sticky { position: static; min-height: 0; }
  .phone-screen { min-height: 0; }
}

/* ==========================================================================
   PAGINE LEGALI (privacy, cookie policy, note legali)
   Sono pagine lunghe da leggere, non da guardare: misura di riga contenuta,
   titoli che si distinguono senza urlare, e riquadri per le avvertenze.
   .plain-list era usata in privacy.html senza esistere nel CSS: ora c'e'.
   ========================================================================== */
.legal { max-width: 720px; }
.legal h2 {
  margin: 44px 0 14px; font-size: 1.35rem; letter-spacing: 0;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.legal h3 { margin: 26px 0 10px; font-size: 1.05rem; color: var(--ink); }
.legal p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.75; }
.legal ul { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 9px; color: var(--ink-soft); line-height: 1.65; }
.legal li > strong { color: var(--ink); }
.legal a { color: var(--cyan); text-underline-offset: 3px; }

.plain-list { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 9px; color: var(--ink-soft); line-height: 1.65; }

.legal-date { font-size: 0.85rem; color: var(--muted); margin-bottom: 30px; }
.legal-note { color: var(--muted); font-size: 0.88rem; font-style: italic; }

/* Avvertenza "e' una bozza": deve vedersi subito, in cima alla pagina. */
.legal-flag {
  margin: 0 0 26px; padding: 16px 18px;
  background: color-mix(in srgb, var(--amber-vivid) 16%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-left-width: 4px; border-radius: 14px;
  font-size: 0.9rem; color: var(--ink-soft);
}
.legal-flag strong { color: var(--amber); }

/* Avvertenza per il futuro (es. "se aggiungi le statistiche serve il banner"). */
.legal-warn {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--cyan-vivid) 10%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  border-left-width: 4px; border-radius: 14px;
  font-size: 0.92rem;
}

/* La tabella dei cookie: sul telefono scorre da sola invece di sfondare la pagina. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.9rem; }
.legal-table th, .legal-table td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.legal-table th { color: var(--ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.legal-table td { color: var(--ink-soft); }

/* Collegamenti legali nel piede di ogni pagina: obbligatori, quindi sempre visibili. */
.footer-legal { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.footer-legal a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--cyan); }

@media (max-width: 520px) {
  .legal h2 { font-size: 1.18rem; }
  .legal-table { min-width: 460px; }
}

/* --- Modulo di contatto: nota sulla privacy ed esito dell'invio ----------- */
.field-opt { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.form-nota {
  margin: 0 0 4px; font-size: 0.84rem; color: var(--muted); line-height: 1.55;
}
.form-esito {
  margin: 12px 0 0; padding: 0; font-size: 0.92rem; font-weight: 600; min-height: 1.2em;
}
.form-esito:empty { display: none; }
.form-esito.is-attesa { color: var(--muted); font-weight: 400; }
.form-esito.is-ok { color: var(--lime); }
.form-esito.is-ko { color: #B3261E; }

/* Suffisso del prezzo ("/mese", "/ora", "+ 59 €/mese"): deve stare accanto alla cifra
   senza rubarle la scena, altrimenti il numero che conta non si legge piu'. */
/* Compare solo dentro le carte scure del listino, quindi il colore e' chiaro
   di suo: prima c'era il grigio scuro var(--ink-soft) piu' una seconda regola
   che lo correggeva, due righe per ottenere una cosa sola. */
.tier-plus {
  font-family: var(--font);
  font-size: 0.6em; font-weight: 600; color: #B9C0D6;
  letter-spacing: 0; margin-left: 4px; white-space: nowrap;
}

/* Prezzo scritto a parole ("Su preventivo") invece che in cifre: con il
   corpo delle cifre riempirebbe mezza carta, quindi scende di misura.
   Resta in Outfit 800 perche' deve leggersi come un prezzo, non come testo. */
.tier-price-testo { font-size: clamp(1.7rem, 4vw, 2.1rem); letter-spacing: -0.02em; }

/* Riga sotto la cifra, per quello che NON e' compreso nel prezzo una tantum
   (il canone dell'assistente). Accanto alla cifra si leggeva come se il
   canone fosse parte del prezzo del sito: sotto, e piu' piccolo, si capisce
   che sono due cose separate. */
.tier-plus-riga {
  display: block;
  margin-top: 8px;
  font-family: var(--font); font-weight: 600;
  font-size: 0.8rem; line-height: 1.4;
  letter-spacing: 0;
  color: #C5CADD;
}

/* Sottotitolo del nome della fascia: "Premium tutti i canali". Il nome deve
   restare il protagonista, la spiegazione sta sotto, piu' piccola e chiara. */
.tier-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font); font-weight: 500;
  font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--cyan-vivid);
  text-transform: lowercase;
}

/* Quantita' compresa nel canone, accanto a ogni piattaforma nel listino.
   Deve leggersi come un'etichetta, non come testo: se avesse lo stesso corpo
   della riga, il punto elenco sembrerebbe spezzato in due frasi. */
.tier-qty {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(201, 175, 137, 0.16);
  border: 1px solid rgba(201, 175, 137, 0.5);
  color: #BFF3FF;
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
}
@media (max-width: 520px) {
  .tier-qty { display: block; margin: 4px 0 0; width: fit-content; }
}

/* Pagamento annuale sotto al prezzo mensile: mostra il conto invece di dire
   "due mesi in omaggio". Il prezzo barrato e il risparmio in evidenza fanno
   capire lo sconto senza doverlo calcolare. */
.tier-anno {
  margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px;
  background: rgba(201, 175, 137, 0.10);
  border: 1px solid rgba(201, 175, 137, 0.35);
  border-radius: 14px;
}
.tier-anno-top { font-size: 0.95rem; color: #DCE0EE; }
.tier-anno-top strong {
  font-family: var(--font-cifre); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.02em;
  color: var(--oro-prezzo);
}
.tier-anno-calc { font-size: 0.8rem; color: #ADB4CB; }
.tier-anno-calc s { text-decoration-thickness: 1px; }
.tier-anno-calc strong { color: #FFFFFF; font-weight: 700; }
.tier-anno-save {
  font-family: var(--font-cifre); font-weight: 800;
  font-size: 0.88rem; color: var(--oro-prezzo);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Riga finale del riquadro annuale: chiarisce che l'attivazione resta fuori
   dallo sconto. Prima l'informazione stava solo nella riga sotto al riquadro
   e si poteva leggere come "compresa nel prezzo annuale". */
/* ERRORE CORRETTO il 24/09/2026: questa riga era rimasta col grigio scuro
   var(--muted), pensato per la scheda bianca di prima. Su carta scura era
   praticamente invisibile. Ora chiara, un filo piu' grande, e la linea di
   separazione in verde acido invece che nel verde scuro dei testi. */
.tier-anno-nota {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(201, 175, 137, 0.3);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #D2D7E6;
}
.tier-anno-nota strong { color: #FFFFFF; font-weight: 700; }

/* ==========================================================================
   FONDO CHE PASSA DA CHIARO A SCURO MENTRE SI SCORRE
   Aggiunto il 27/09/2026, su richiesta dell'utente, prendendo a riferimento
   eu.mozaracing.com.

   COME LO FA QUEL SITO, verificato nel suo codice: NON usa le animazioni CSS
   legate allo scorrimento (animation-timeline, scroll(), view(): tutte
   assenti). Usa una classe che si attiva piu' una transizione lunga:
       transition: background-color 1.2s cubic-bezier(0, 0, 0.2, 1),
                   color            1.2s cubic-bezier(0, 0, 0.2, 1)
   Qui si riproduce la stessa durata e la stessa curva. 1,2 secondi sono
   volutamente lenti: e' quello che rende il passaggio morbido invece di uno
   scatto.

   PERCHE' BASTA UN BLOCCO SOLO: tutti i fondi chiari del sito passano dalle
   variabili (--paper 7 volte, --paper-2 32, --paper-3 8, --line 32) e non
   esiste un solo bianco scritto a mano. Ridefinendo quei valori si capovolge
   l'intera pagina - intestazione, schede, passaggi, piede - in un punto solo.
   Le carte dei prezzi non vanno toccate: sono gia' scure per scelta.
   ========================================================================== */

body.is-dark {
  /* Neutri scuri coerenti col riferimento: grafite e nero, non blu-viola.
     Dal 17/10/2026 il fondo NON e' piu' nero pieno: #000 assoluto appiattisce
     tutto e fa sembrare il sito spento. Un grafite molto scuro lascia posto
     alle luci (vedi .luce-oro piu' sotto) e le fa leggere come luci. */
  --paper: #16161A;
  --paper-2: #212126;
  --paper-3: #2A2A30;
  /* Contrasto alto di proposito: su fondo scuro i grigi medi sparirebbero. */
  --ink: #F7F7F7;
  --ink-soft: #DEDEDE;
  --muted: #AFAFAF;
  --line: #333333;
  --shadow: 12px 12px 44px rgba(0, 0, 0, 0.5);
  /* Gli accenti "leggibili su bianco" sono scuri: su fondo scuro si passa
     alle varianti schiarite, uniche leggibili qui. --accent segue da solo,
     perche' e' definito come var(--cyan). */
  --cyan: #D8C4A2;      /* il blu elettrico, schiarito per il nero */
  --violet: #C4C4C4;    /* grigio chiaro: era viola */
  --lime: #2FD3B6;      /* il teal, schiarito */
  --amber: #C9AF89;     /* champagne, che su nero e' gia' leggibile */
  --champagne: #C9AF89;
}

/* La transizione va sugli elementi che dipingono un fondo, non solo su body:
   altrimenti la pagina scurisce e le schede scattano un istante dopo. */
body,
.site-header,
.section,
.section-soft,
.site-footer,
.mini-card,
.service,
.steps-4 li,
.stats-band,
.example-card,
.btn-ghost,
.nav-cta,
.nav-toggle,
.nav-list {
  transition:
    background-color 1.2s cubic-bezier(0, 0, 0.2, 1),
    border-color     1.2s cubic-bezier(0, 0, 0.2, 1),
    color            1.2s cubic-bezier(0, 0, 0.2, 1);
}

/* Chi ha chiesto meno movimento riceve il cambio istantaneo, non nessun
   cambio: la leggibilita' non e' un effetto, deve restare. */
@media (prefers-reduced-motion: reduce) {
  body, .site-header, .section, .section-soft, .site-footer, .mini-card,
  .service, .steps-4 li, .stats-band, .example-card, .btn-ghost,
  .nav-cta, .nav-toggle, .nav-list { transition: none; }
}

/* ==========================================================================
   VIDEO GENERATI CON L'AI
   Aggiunti il 29/09/2026. Tre clip prodotte con higgsfield, compresse da 4,7 MB
   a circa 300 KB in tutto (WebM come prima scelta, H.264 di riserva).

   REGOLA FISSA: i video sono OSPITATI DENTRO IL SITO, mai richiamati dal
   server del fornitore. Un video incorporato da fuori trasmette l'indirizzo IP
   del visitatore a un terzo appena la pagina si apre, e trasformerebbe un sito
   senza banner in un sito che ne ha bisogno, contraddicendo la cookie policy.
   ========================================================================== */

/* --- Il telefono con la chat sovrapposta ---------------------------------- */
/* Lo schermo nel video e' VUOTO di proposito: la chat e' HTML appoggiato sopra,
   cosi' il testo resta nitido a ogni dimensione, si traduce in 7 lingue senza
   rigenerare il video, e il filmato non rappresenta nulla di reale - quindi non
   ricade nell'obbligo di etichettatura dell'art. 50 dell'AI Act.

   Il palco ha una misura LOGICA di 1344x752 e viene scalato con una variabile:
   dentro, tutte le coordinate restano fisse, compresa la matrice che appoggia
   la chat sul vetro. E' l'unico modo perche' l'allineamento non si rompa al
   cambiare della larghezza. La matrice e' calibrata su QUESTO video: se il
   video cambia, va ritarata. */
.scena-video { margin: 0; }
/* Il palco riempie la sezione: prima stava in una colonna di 380 px e il
   telefono era illeggibile. */
.scena-palco-video { margin-top: clamp(18px, 3vw, 34px); }
.tel-palco {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  aspect-ratio: 1344 / 752;
  overflow: hidden;
  border-radius: 20px;
  background: #111111;
}
/* Contenitore di scala: dentro tutto ha coordinate FISSE sulla misura logica
   1344x752, compresa la matrice che appoggia la chat sul vetro. Il
   JavaScript scala questo, non i figli: cosi' l'allineamento non si rompe. */
.tel-scala {
  position: absolute; left: 0; top: 0;
  width: 1344px; height: 752px;
  transform-origin: 0 0;
}
.tel-video {
  position: absolute; left: 0; top: 0;
  width: 1344px; height: 752px;
  object-fit: cover;
  display: block;
}

/* Lo schermo logico: 300x679, posato sul vetro dalla matrice. Sta dentro un
   contenitore scalato, cosi' la matrice lavora sempre sulle stesse coordinate. */
.tel-scala {
  position: absolute; left: 0; top: 0;
  width: 1344px; height: 752px;
  transform-origin: 0 0;
}
.tel-schermo {
  position: absolute; left: 0; top: 0;
  width: 300px; height: 679px;
  transform-origin: 0 0;
  transform: matrix(0.7567, 0.2067, -0.2386, 0.7467, 758, 39);
  border-radius: 34px;
  overflow: hidden;
}
/* Solo la META' ALTA dello schermo: sotto ci sono i pollici, e il testo li'
   finirebbe coperto dalle dita. */
.tel-chat {
  position: absolute; left: 0; top: 0; right: 0;
  height: 410px;
  display: flex; flex-direction: column;
  background: #FBFBFB;
}
.tel-testata {
  padding: 30px 16px 10px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #ECECEC;
}
.tel-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: #303030; color: var(--champagne-vivid);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; flex: none;
}
.tel-nome { display: block; font-size: 14px; font-weight: 700; line-height: 1.1; color: #303030; }
.tel-ruolo { display: block; font-size: 11px; color: #8A8A8A; line-height: 1.2; }

.tel-msgs {
  position: relative; flex: 1; overflow: hidden;
  /* I messaggi sfumano in alto invece di tagliarsi di netto. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.tel-lista {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px 8px;
  display: flex; flex-direction: column; gap: 7px;
}
.tel-b {
  max-width: 82%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 15px;
  font-size: 12.5px; line-height: 1.35;
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: none;
}
.tel-b.c-mostra { display: block; }
.tel-b.c-entra { opacity: 1; transform: none; }
.tel-u { align-self: flex-end; background: var(--cyan); color: #FFFFFF; border-bottom-right-radius: 5px; }
.tel-a { align-self: flex-start; background: #EFEFF1; color: #303030; border-bottom-left-radius: 5px; }
/* L'assistente si dichiara automatico: e' un obbligo (art. 50 AI Act), non un
   dettaglio grafico. Non va togliere per fare spazio. */
.tel-chi {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: #A8895F; margin-bottom: 2px;
}
.tel-scrive {
  align-self: flex-start; margin: 0;
  background: #EFEFF1; border-radius: 15px; border-bottom-left-radius: 5px;
  padding: 10px 12px; gap: 4px; display: none;
}
.tel-scrive.c-mostra { display: flex; }
.tel-scrive i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9A9A9A; animation: telPunti 1s infinite;
}
.tel-scrive i:nth-child(2) { animation-delay: 0.15s; }
.tel-scrive i:nth-child(3) { animation-delay: 0.3s; }
@keyframes telPunti {
  0%, 60%, 100% { opacity: 0.3; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- Video di sfondo di una sezione --------------------------------------- */
/* Usato per la clip del locale chiuso di notte, nella fascia scura. Sta DIETRO
   il testo, quindi va tenuto scuro e poco contrastato: il contenuto deve
   restare leggibile, il video e' atmosfera. */
/* Velo sopra il video: senza, il testo su un'immagine in movimento e'
   faticoso da leggere, e la leggibilita' non si baratta con un effetto. */

/* --- Video di prodotto, dentro una scheda -------------------------------- */
.video-prodotto {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.video-prodotto video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Chi ha chiesto meno movimento ---------------------------------------- */
/* I video restano fermi sul loro poster. La chat compare comunque, tutta
   insieme e senza animazione: l'informazione non si perde, si perde solo
   l'effetto. */
@media (prefers-reduced-motion: reduce) {
  .tel-video, .video-grande video, .video-prodotto video, #sfondo-sfera video { display: none; }
  .tel-palco { background: #1C1C1C center / cover no-repeat; }
  .tel-b, .tel-b.c-mostra { display: block !important; opacity: 1 !important; transform: none !important; transition: none; }
  .tel-scrive { display: none !important; }
  .tel-scrive i { animation: none; }
}

@media (max-width: 860px) {
  /* RIATTIVATA IL 27/10/2026. Prima qui la chat sovrapposta al telefono veniva
     nascosta sotto gli 860 px, con la motivazione che a quella misura i
     messaggi non si sarebbero letti. Provato il sito da un telefono vero,
     l'utente ha giudicato che si leggono: la scelta era prudente ma sbagliata.
     Se dovesse rivelarsi illeggibile su schermi ancora piu' stretti, la riga
     da rimettere e' questa:  .tel-schermo { display: none; }  */
  .tel-palco { border-radius: 14px; }
}

/* --- Video affiancato al testo, non sotto ---------------------------------
   Il video del locale chiuso di notte era lo sfondo della sezione "Come
   lavoriamo", dietro titolo, testo e quattro riquadri e sotto un velo all'82%:
   non si vedeva, e non poteva vedersi. Dal 30/09/2026 sta accanto al testo.
   Niente velo: se il video non e' sotto le scritte, non serve smorzarlo. */
.metodo-con-video {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  margin-top: clamp(20px, 3vw, 36px);
}
.video-grande { margin: 0; }
.video-grande video {
  width: 100%;
  height: auto;
  max-height: 68vh;
  display: block;
  border-radius: 20px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111111;
}
.video-grande figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--muted);
  font-style: normal;
}
/* I quattro passaggi, accanto al video, diventano una colonna sola: in due
   colonne dentro meta' sezione sarebbero troppo stretti per leggersi. */
/* Il video sta sopra e occupa tutta la larghezza, quindi i quattro passaggi
   tornano affiancati: sotto un video largo, una colonna sola lascerebbe una
   striscia vuota a destra. */
.metodo-con-video .steps-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 0;
}

@media (max-width: 900px) {
  /* Sotto i 900 px il video va sopra e i passaggi sotto: affiancati
     sarebbero entrambi troppo stretti. */
  .metodo-con-video { grid-template-columns: 1fr; }
}

/* --- Rivedere l'animazione ------------------------------------------------
   A formazione finita il cervello continua a pulsare da solo: non serve piu'
   nessun pulsante per rassicurare che la pagina non si e' inceppata. Il
   contenitore resta cliccabile per chi vuole rivedere la formazione. */
#sfondo-sfera { pointer-events: auto; cursor: pointer; }
/* I contenuti della pagina restano cliccabili: lo sfondo sta sotto tutto. */
#sfondo-sfera video { pointer-events: none; }



/* --- Testata a due colonne: testo a sinistra, video a destra ---------------
   Usata nella pagina dell'assistente. Il video non e' decorazione staccata:
   sta accanto a quello che il testo racconta, cosi' si guardano insieme.
   Su schermo stretto le due colonne diventano una sola e il video va SOTTO il
   testo: chi arriva deve leggere prima di cosa si parla, non vedere un filmato
   e chiedersi cos'e'. */
.testa-due-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* La larghezza di lettura: un paragrafo largo quanto lo schermo stanca l'occhio,
   che perde la riga quando torna a capo. Sessantacinque caratteri e' la misura. */
.testa-testo .section-lead { max-width: 62ch; }

/* IL CERVELLO PIU' GRANDE — 27/10/2026.
   Il filmato e' 1280x720, ma il cervello dentro occupa meno della meta' della
   larghezza: il resto e' nero vuoto a destra e a sinistra. Ingrandirlo non
   vuol dire quindi un file piu' pesante, vuol dire TAGLIARE I LATI.
   Si da' al contenitore una forma piu' stretta e si lascia che il video la
   riempia con object-fit: cover. Il browser scala e ritaglia da solo, in
   orizzontale, lasciando il centro: nessun byte in piu' da scaricare e
   nessuna perdita di nitidezza, perche' si usa comunque il filmato intero.

   I conti, per non andare a occhio:
     sorgente 16:9 = 1,778 di rapporto
     su schermo grande 4:3 = 1,333  ->  resta il 75% centrale, cervello +33%
     su telefono      1:1 = 1,000  ->  resta il 56% centrale, cervello +78%
   Il cervello nel fotogramma va da circa il 26% al 75% della larghezza:
   con entrambi i ritagli ci sta dentro per intero, con un margine attorno. */
.testa-video {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0A0906;
  box-shadow: 0 24px 60px rgba(10, 9, 6, 0.4);
  aspect-ratio: 4 / 3;
}
.testa-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .testa-due-colonne { grid-template-columns: 1fr; }
  .testa-testo { order: 1; }
  /* Sul telefono il ritaglio si stringe fino al quadrato: la larghezza e' poca
     e il cervello deve prendersela tutta. Il file scaricato resta il piu'
     leggero dei due (220 KB), perche' la scelta della sorgente dipende dalla
     larghezza dello schermo e non da quanto lo mostriamo grande. */
  .testa-video {
    order: 2;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   LUCE SUL FONDO SCURO                                  aggiunto il 17/10/2026
   --------------------------------------------------------------------------
   Il sito era interamente scuro e piatto: nessuna sezione chiara, nero pieno,
   nessun punto di luce. Qui si aggiungono tre cose, tutte decorative e tutte
   dietro al testo, cosi' non toccano la leggibilita':
     1. pozze di luce calda (oro) e fredda (bianca) in cima alle sezioni;
     2. filetti d'oro sottilissimi come separatori;
     3. un bordo superiore che "prende luce" sulle schede.
   Tutto vive solo dentro body.is-dark: sulle sezioni chiare sparisce da solo.
   Se non piace, si cancella questo blocco e il sito torna come prima.
   ========================================================================== */

:root {
  --oro-luce: 255, 212, 0;      /* il giallo del logo, in componenti */
  --bianco-luce: 255, 252, 245; /* bianco appena caldo, non clinico */
}

/* Il fondo non e' piu' una tinta piatta: due pozze di luce molto larghe e
   molto deboli, una calda in alto a destra e una fredda in basso a sinistra.
   fixed cosi' la luce resta ferma mentre la pagina scorre: da' profondita'
   senza "viaggiare" con il contenuto. */
body.is-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Piu' passaggi invece di un taglio secco: con un solo "transparent 60%"
     l'occhio vede il bordo del cerchio, e la pagina sembra passare dal nero
     all'oro di colpo. Con quattro passaggi la luce si spegne gradualmente.
     In piu' una velatura chiarissima su tutta la pagina, che alza la
     luminosita' di fondo invece di concentrarla in un punto. */
  background:
    radial-gradient(95% 60% at 82% -8%,
      rgba(var(--oro-luce), 0.26) 0%,
      rgba(var(--oro-luce), 0.17) 22%,
      rgba(var(--oro-luce), 0.08) 45%,
      rgba(var(--oro-luce), 0.03) 65%,
      transparent 85%),
    radial-gradient(85% 55% at 8% 105%,
      rgba(var(--bianco-luce), 0.14) 0%,
      rgba(var(--bianco-luce), 0.07) 30%,
      rgba(var(--bianco-luce), 0.025) 55%,
      transparent 80%),
    linear-gradient(180deg,
      rgba(var(--bianco-luce), 0.05),
      rgba(var(--bianco-luce), 0.02) 45%,
      rgba(var(--bianco-luce), 0.045));
  transition: opacity 0.6s ease;
}
/* Il contenuto sta sopra la luce, mai sotto. */
body > * { position: relative; z-index: 1; }

/* Pozza di luce in cima a una sezione: si aggiunge la classe dove serve,
   non su tutte, altrimenti l'effetto si annulla da solo. */
.is-dark .luce-oro,
.is-dark .luce-bianca { position: relative; }
.is-dark .luce-oro::before,
.is-dark .luce-bianca::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(1500px, 150%);
  height: 680px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(var(--oro-luce), 0.22) 0%,
    rgba(var(--oro-luce), 0.13) 25%,
    rgba(var(--oro-luce), 0.06) 48%,
    rgba(var(--oro-luce), 0.02) 68%,
    transparent 88%);
}
.is-dark .luce-bianca::before {
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(var(--bianco-luce), 0.14) 0%,
    rgba(var(--bianco-luce), 0.08) 28%,
    rgba(var(--bianco-luce), 0.035) 52%,
    transparent 85%);
}

/* Filetto d'oro: un separatore che non e' una riga grigia ma un raggio che
   si spegne ai due lati. Sostituisce il bordo piatto fra una sezione e l'altra. */
.is-dark .filo-oro {
  border-top: 0;
  position: relative;
}
.is-dark .filo-oro::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--oro-luce), 0.45) 35%, rgba(var(--oro-luce), 0.65) 50%,
    rgba(var(--oro-luce), 0.45) 65%, transparent);
}

/* Le schede prendono luce dall'alto, come un oggetto illuminato da sopra:
   un filo chiaro sul bordo superiore e un fondo appena in pendenza. */
.is-dark .mini-card,
.is-dark .service,
.is-dark .step,
.is-dark .stat {
  background: linear-gradient(180deg, rgba(var(--bianco-luce), 0.11), rgba(var(--bianco-luce), 0) 42%), var(--paper-2);
  border-color: rgba(var(--bianco-luce), 0.10);
  position: relative;
}
.is-dark .mini-card::before,
.is-dark .service::before,
.is-dark .step::before,
.is-dark .stat::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--oro-luce), 0.75), transparent);
}

/* Niente luci per chi ha chiesto meno animazioni: restano, ma ferme. */
@media (prefers-reduced-motion: reduce) {
  body.is-dark::before { transition: none; }
}

/* ==========================================================================
   MOVIMENTO ALLO SCORRIMENTO — aggiunto il 26/10/2026

   Scritto con le animazioni guidate dallo scorrimento del CSS
   (animation-timeline), NON con JavaScript agganciato all'evento scroll.
   La ragione e' la stessa di sempre su questo sito: un gestore di "scroll"
   in JavaScript gira a ogni pixel sul filo principale e fa scattare la
   pagina proprio sui telefoni, dove c'e' gia' la scena 3D e tre video.
   Queste invece le muove il compositore del browser: costano quasi nulla.

   TRE PROTEZIONI, tutte necessarie:
   1. @supports — dove animation-timeline non c'e', non succede niente e la
      pagina resta esattamente come prima. Non e' un ripiego: le comparse
      allo scorrimento che c'erano gia' (.reveal, in main.js) continuano a
      funzionare da sole.
   2. prefers-reduced-motion: no-preference — chi ha chiesto meno movimento
      nelle impostazioni del telefono non ne riceve nessuno.
   3. Si toccano SOLO elementi che non hanno la classe .reveal. Un'animazione
      e una transizione sulla stessa proprieta' si combattono, e vincerebbe
      l'animazione: le comparse si romperebbero. Per questo .stat e
      .video-grande sono buoni bersagli (non sono nella lista di main.js) e
      i titoli no.
   ========================================================================== */

@keyframes ovix-avanzamento {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Deriva: l'elemento sale piano mentre attraversa lo schermo. Solo transform,
   nessuna proprieta' che costringa il browser a ricalcolare il disegno. */
@keyframes ovix-deriva {
  from { transform: translateY(26px); }
  to   { transform: translateY(-26px); }
}

/* Le cifre dei numeri si assestano: arrivano da sotto e si fermano. */
@keyframes ovix-assesta {
  from { transform: translateY(30px); opacity: 0.25; }
  to   { transform: translateY(0);    opacity: 1; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* --- Filo di avanzamento in cima alla pagina ------------------------
       Dice quanto manca alla fine: su una pagina lunga come la home e' un
       riferimento, non un ornamento. Due pixel, color champagne, sopra
       l'intestazione (che sta a z-index 20) ma sotto la chat. */
    body::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      z-index: 30;
      pointer-events: none;
      background: linear-gradient(90deg, var(--champagne), #FFFFFF);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: ovix-avanzamento linear both;
      animation-timeline: scroll(root block);
    }

    /* --- Il video grande deriva rispetto ai quattro passaggi accanto ----
       Si muove la FIGURA intera, non il video dentro: cosi' non si aprono
       fessure sopra e sotto e non serve tagliare niente. */
    .video-grande {
      animation: ovix-deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    /* --- Le quattro cifre si assestano una per una ----------------------
       Lo sfasamento viene dall'intervallo diverso su ciascuna: la prima
       finisce prima. Nessun timer, nessun JavaScript. */
    .stat {
      animation: ovix-assesta linear both;
      animation-timeline: view();
      will-change: transform, opacity;
    }
    .stat:nth-child(1) { animation-range: entry 5%  entry 70%; }
    .stat:nth-child(2) { animation-range: entry 10% entry 78%; }
    .stat:nth-child(3) { animation-range: entry 15% entry 86%; }
    .stat:nth-child(4) { animation-range: entry 20% entry 94%; }
  }
}

/* Su schermo piccolo la deriva del video si riduce: la stessa distanza su
   400 px di larghezza si legge come un salto, non come un movimento. */
@media (max-width: 860px) {
  @keyframes ovix-deriva {
    from { transform: translateY(12px); }
    to   { transform: translateY(-12px); }
  }
}

/* Pulsante in fondo a una sezione, centrato e staccato dal testo.
   Aggiunto il 27/10/2026 con la sezione del controllo gratuito. */
.section-cta {
  margin-top: clamp(22px, 3vw, 34px);
  text-align: center;
}


/* Il nome sopra ai dati di legge, e NON accanto al logo: scelta dell'utente
   del 27/10/2026. Il logo parla da solo, il nome scritto introduce il blocco
   dei dati societari. */
.footer-marchio {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

/* LA FIRMA SUL CERVELLO — 27/10/2026
   Testo sovrapposto al video, non dentro al filmato: resta nitido a qualsiasi
   dimensione e si corregge senza rigenerare niente.
   Sta in basso perche' il cervello occupa la parte alta dell'inquadratura, e
   ha un alone scuro dietro: sopra ai filamenti dorati, un testo senza alone
   diventa illeggibile appena la luce pulsa. */
.testa-video { position: relative; }
.testa-video-firma {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 4%, 30px);
  text-align: center;
  pointer-events: none;
  display: grid;
  gap: 2px;
}
.tvf-nome {
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #FFF4DC;
  text-shadow: 0 2px 18px rgba(10, 9, 6, 0.95), 0 0 42px rgba(201, 175, 137, 0.6);
}
.tvf-sotto {
  font-size: clamp(0.68rem, 1.7vw, 0.84rem);
  letter-spacing: 0.06em;
  color: var(--champagne);
  text-shadow: 0 2px 14px rgba(10, 9, 6, 0.95);
}