/* ============================================================
   STANDING BABA — sito, novembre 2026
   Ibrido: testi e contenuti del sito pubblicato, chiarezza da Apple.
   Una sezione, un messaggio: titolo grande e centrato, una frase sotto, la prova.
   Marchio versione A (Brand Identity/Manuale del Marchio.html): Hanken Grotesk, midnight, bianco, pietra, arancio.
   ============================================================ */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --midnight: #0e0f12;
  --superficie: #1a1c21;
  --bianco: #ffffff;
  --pietra: #f2f1ee;
  --carta: #f4f1ea;
  --arancio: #ff7a1a;
  /* L'arancio sul chiaro: il #FF7A1A sta a 2,6:1, troppo poco per le parole. Due toni, ancora arancio (non marrone):
     testo piccolo #C2410C (5,2:1 sul bianco, 4,6:1 sulla pietra), testo grande dai 24px in su #EA580C (3,6:1 e 3,2:1). */
  --arancio-testo: #c2410c;
  --arancio-grande: #ea580c;
  --testo: #0e0f12;
  --secondario: #55585f;       /* 7,1:1 sul bianco */
  --secondario-scuro: #a9abb0; /* 8,3:1 su midnight */

  --f: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-mega: clamp(64px, 9vw, 132px);
  --t-titolo: clamp(36px, 4.6vw, 64px);
  --t-sotto: clamp(21px, 2vw, 28px);
  --t-testo: 19px;
  --t-nota: 15px;

  --larg: 1120px;
  --pad: clamp(20px, 4vw, 48px);
  --sez: clamp(64px, 7vw, 100px);
  --stacco: clamp(36px, 3.6vw, 52px);   /* fra il titolo di una sezione e il suo contenuto: uguale ovunque */
  --raggio: 28px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* la pagina non scorre mai di lato, anche se qualcosa sborda */
body { font-family: var(--f); font-size: var(--t-testo); line-height: 1.55; color: var(--testo); background: var(--bianco); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--arancio); color: var(--midnight); }

/* ---------- Il nome: la "i" di Standing è una persona in piedi ---------- */
.nome { font-weight: 500; letter-spacing: -0.045em; white-space: nowrap; }
.nome .i { position: relative; display: inline-block; line-height: 1; }
/* il punto della "i": con l'altezza della riga fissata a 1 la linea di base di Hanken Grotesk sta a 0,8485 em dall'alto;
   il centro della testa è 0,638 em sopra la base e sull'asse del tratto (metà della lettera). Vale a ogni dimensione. */
.nome .testa { position: absolute; left: 50%; top: 0.1505em; width: 0.12em; height: 0.12em; margin-left: -0.06em; border-radius: 50%; background: var(--arancio); }
/* Il nome si legge "Standing Baba" anche per lettori di schermo e motori di ricerca: il disegno con la ı è nascosto a loro */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Barra di navigazione ---------- */
.barra { position: sticky; top: 0; z-index: 50; background: #ffffff; transition: box-shadow 300ms ease, background-color 300ms ease; }
.barra.giu { box-shadow: 0 1px 0 rgba(14, 15, 18, 0.08); }
/* scorrendo la barra diventa semitrasparente e sfoca quello che passa sotto, come su apple.com */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .barra.giu { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.barra__dentro { max-width: var(--larg); margin: 0 auto; padding: 0 var(--pad); height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.barra__marchio { font-size: 22px; display: flex; align-items: center; min-height: 44px; }
.barra__voci { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.barra__voci a:not(.pulsante) { color: var(--secondario); transition: color 200ms ease; }
.barra__voci a:not(.pulsante):hover { color: var(--testo); }
.barra .pulsante { min-height: 36px; padding: 0 18px; font-size: 15px; }
.barra__menu { display: none; }

/* ---------- Pulsanti e link ---------- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: 999px;
  background: var(--arancio); color: var(--midnight); font-weight: 500; font-size: 17px;
  transition: transform 160ms var(--ease), background-color 200ms ease;
}
.pulsante:active { transform: scale(0.97); }
.pulsante--scuro { background: var(--midnight); color: var(--bianco); }
.link { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; font-weight: 500; font-size: 17px; color: var(--arancio-testo); }
.link span { transition: transform 200ms var(--ease); }
.scuro .link { color: var(--arancio); }
@media (hover: hover) and (pointer: fine) {
  .pulsante:hover { background-color: #ff8f3f; }
  .pulsante--scuro:hover { background-color: #2a2d33; }
  .link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .link:hover span { transform: translateX(3px); }
}
.azioni { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ---------- Sezioni: fondo, larghezza, intestazione centrata ---------- */
.sez { padding: var(--sez) var(--pad); }
.sez--pietra { background: var(--pietra); }
.sez--scura, .scuro { background: var(--midnight); color: var(--carta); }
.sez--arancio { background: var(--arancio); color: var(--midnight); }
.dentro { max-width: var(--larg); margin: 0 auto; }
.testa-sez { text-align: center; max-width: 860px; margin: 0 auto; }
.testa-sez h2 { font-size: var(--t-titolo); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
/* titolo su due righe decise: la prima non va mai a capo (sul telefono si spezza solo fra le due frasi) */
#problema .testa-sez { max-width: 1120px; }
#problema .testa-sez .sotto { max-width: 860px; margin-left: auto; margin-right: auto; }
.riga-unica { white-space: nowrap; }
.riga-unica .frase { display: inline-block; }
@media (max-width: 700px) { .riga-unica { white-space: normal; } }
.testa-sez .sotto { margin-top: 20px; font-size: var(--t-sotto); line-height: 1.35; color: var(--secondario); letter-spacing: -0.01em; text-wrap: balance; }
.scuro .testa-sez .sotto, .sez--scura .testa-sez .sotto { color: var(--secondario-scuro); }
.sez--arancio .testa-sez .sotto { color: #2a1405; }
.punto { color: var(--arancio); }
.chiusa { margin: 40px auto 0; max-width: 760px; text-align: center; font-size: var(--t-sotto); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.chiusa em { font-style: normal; color: var(--arancio); }
.scuro .chiusa em { color: var(--arancio); }

/* ---------- 1. Apertura ---------- */
.apertura { padding: clamp(72px, 8vw, 120px) var(--pad) clamp(64px, 7vw, 100px); text-align: center; }
.apertura h1 { font-size: var(--t-mega); line-height: 0.95; }
.apertura .h1-nota { display: block; margin-top: 18px; font-size: var(--t-sotto); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--testo); white-space: normal; }
.apertura .link { color: var(--testo); }             /* "Come lavoriamo" in apertura: nero, il colore resta al pulsante */
.apertura .sotto { margin: 18px auto 0; max-width: 640px; font-size: var(--t-sotto); line-height: 1.35; color: var(--secondario); text-wrap: balance; }
/* da 900 px in su la frase sta su un rigo: il corpo scende quanto serve perché ci stia (la frase misura circa 46,4 em) */
@media (min-width: 900px) { .apertura .sotto { max-width: none; white-space: nowrap; font-size: min(var(--t-sotto), calc((100vw - 2 * var(--pad)) / 48)); } }
/* la frase si scrive da sola: la parte scritta è un solo blocco con l'evidenziatore arancio pieno, il resto è invisibile */
.apertura .sotto .frase__scritto { position: relative; color: var(--testo); background: var(--arancio); padding: 0.06em 0; }
.apertura .sotto .frase__resto { visibility: hidden; }
.apertura .sotto .sfuma { opacity: 0; transition: opacity 550ms ease; }
/* il cursore è agganciato alla fine dell'ultima riga scritta (destra e fondo dell'ultimo pezzo), così non va mai a capo da solo */
.apertura .sotto .frase__scritto::after { content: ""; position: absolute; right: -3px; bottom: 0.08em; width: 2px; height: 1.05em; background: var(--testo); animation: lampeggia 900ms steps(1) infinite; }   /* scuro: arancio sull'arancio non si vedrebbe */
.apertura figure { max-width: var(--larg); margin: clamp(56px, 7vw, 88px) auto 0; border-radius: var(--raggio); overflow: hidden; }
.apertura figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 30% 55%; }
.js .apertura .testa { animation: posati 760ms var(--ease) 380ms both; }
@keyframes posati { from { opacity: 0; transform: translateY(-1.1em); } }

/* ---------- "soluzioni": un pezzo solido che gira sull'asse orizzontale, si ferma, rigira ---------- */
.solido--vivo { display: inline-block; perspective: 700px; color: var(--arancio-grande); }
.solido__corpo { display: inline-grid; transform-style: preserve-3d; animation: giraSolido 3.8s infinite; }
.solido__corpo > span { grid-area: 1 / 1; transform: translateZ(calc(var(--z) * -1.1px)); backface-visibility: visible; }
.solido__strato { color: #F08A4B; animation: fianchi 3.8s infinite; }   /* i fianchi, chiari: si vedono solo mentre gira */
.solido__faccia { color: var(--arancio-grande); }
@keyframes giraSolido {
  0% { transform: rotateX(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  32% { transform: rotateX(-360deg); }
  100% { transform: rotateX(-360deg); }
}
@keyframes fianchi { 0% { opacity: 0; } 4% { opacity: 1; } 28% { opacity: 1; } 32% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2. Cosa facciamo: riquadri ampi ---------- */
.riquadri { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.riquadro { background: var(--bianco); border-radius: var(--raggio); padding: clamp(32px, 4vw, 52px); min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.riquadro h3 { font-size: clamp(30px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.riquadro p { color: var(--secondario); max-width: 40ch; }
.riquadro--scuro { background: var(--midnight); color: var(--carta); }
.riquadro--scuro p { color: var(--secondario-scuro); }
.riquadro--scuro h3 .punto { color: var(--arancio); }

/* ---------- 2b. Le quattro aree: un palcoscenico che resta fermo mentre si scorre ----------
   Senza script, o con il movimento ridotto, le aree sono una sotto l'altra: tutto resta leggibile. */
/* L'intestazione "Una regia sola…" sta su fondo nero: si stacca dal palcoscenico chiaro delle quattro aree */
.sez--testa { padding-top: clamp(48px, 5vw, 68px); padding-bottom: clamp(48px, 5vw, 68px); }
.sez--coda { padding-top: clamp(40px, 5vw, 64px); }
.sez--coda .chiusa { margin-top: 0; }
.scena { background: var(--pietra); }
.scena__palco { display: grid; gap: 0; padding: 0 var(--pad); }
.scena__voce { text-align: center; padding: clamp(56px, 8vw, 96px) 0; }
.scena__voce h3 { font-size: var(--dim, 15vw); font-weight: 500; letter-spacing: -0.055em; line-height: 0.88; }
.scena__voce p { margin: clamp(24px, 3vw, 40px) auto 0; max-width: 44ch; font-size: var(--t-sotto); line-height: 1.35; letter-spacing: -0.01em; color: var(--secondario); text-wrap: balance; }
.scena__voce--scura { background: var(--midnight); color: var(--carta); margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }
.scena__voce--scura p { color: var(--secondario-scuro); }
.scena__avanzamento { display: none; }

.scena-viva .scena { height: 400svh; }
.scena-viva .scena__palco {
  position: sticky; top: 60px; height: calc(100svh - 60px); overflow: hidden; padding: 0;
  place-items: center; background: var(--pietra); transition: background-color 380ms ease;
}
.scena-viva .scena__palco.buio { background: var(--midnight); }
.scena-viva .scena__voce {
  grid-area: 1 / 1; padding: 0 var(--pad); margin: 0; background: none;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.scena-viva .scena__voce.attiva { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
/* la parola si scrive mentre si scorre: lettere invisibili finché non tocca a loro, cursore arancio davanti */
.scena-viva .scena__voce .c { visibility: hidden; }
.scena-viva .scena__voce .c.v { visibility: visible; }
.scena-viva .scena__voce .c.cur { position: relative; }
.scena-viva .scena__voce.attiva .c.cur::after { content: ""; position: absolute; top: 0.06em; right: -0.09em; width: 0.055em; height: 0.84em; background: var(--arancio); animation: lampeggia 900ms steps(1) infinite; }
.scena-viva .scena__voce p { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms var(--ease); }
.scena-viva .scena__voce.completa p { opacity: 1; transform: none; }
/* L'area scura entra quando il fondo è già nero: il testo chiaro non compare mai sul grigio */
.scena-viva .scena__voce--scura.attiva { transition-delay: 360ms, 360ms, 0s; }
.scena-viva .scena__voce--scura { color: var(--testo); }
.scena-viva .scena__voce--scura p { color: var(--secondario); }
.scena-viva .buio .scena__voce--scura { color: var(--carta); }
.scena-viva .buio .scena__voce--scura p { color: var(--secondario-scuro); }
.scena-viva .scena__avanzamento { display: flex; position: absolute; left: 50%; bottom: clamp(24px, 4vh, 44px); transform: translateX(-50%); gap: 6px; }
.scena__avanzamento i { width: 28px; height: 4px; border-radius: 2px; background: rgba(14, 15, 18, 0.16); transition: background-color 300ms ease; }
.scena__avanzamento i.on { background: var(--arancio); }
.buio .scena__avanzamento i { background: rgba(244, 241, 234, 0.22); }
.buio .scena__avanzamento i.on { background: var(--arancio); }

/* ---------- 3. Come lavoriamo: il confronto ---------- */
.confronto { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.modo { background: var(--pietra); border-radius: var(--raggio); padding: clamp(36px, 4.5vw, 56px); text-align: center; }
.modo__tag { margin-top: 10px; font-size: var(--t-nota); color: var(--secondario); }
.modo h3 { font-size: clamp(40px, 4.6vw, 60px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.settimana { margin: 32px auto 0; display: flex; justify-content: center; gap: 8px; }
.giorno { display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--secondario); }
.giorno i { width: 34px; height: 34px; border-radius: 9px; background: var(--bianco); box-shadow: inset 0 0 0 1.5px #d9d4c8; }
.giorno i { transition: background-color 350ms ease, box-shadow 350ms ease, transform 350ms var(--ease); }
/* i giorni si accendono uno dopo l'altro quando il riquadro entra nello schermo */
.js .modo .giorno.on i { background: var(--bianco); box-shadow: inset 0 0 0 1.5px #d9d4c8; }
.js .modo.in .giorno.on i, html:not(.js) .giorno.on i { background: var(--midnight); box-shadow: none; transition-delay: calc(300ms + var(--k, 0) * 140ms); }
.js .modo.in .giorno.on i { animation: accendi 450ms var(--ease) both; animation-delay: calc(300ms + var(--k, 0) * 140ms); }
@keyframes accendi { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }
/* in Fractional, finita l'accensione, i due giorni scorrono lungo la settimana: la presenza è flessibile */
.settimana--scorre.mobile .giorno i { transition-delay: 0ms !important; animation: none !important; }

/* la durata: lunga e sottile per Fractional, corta e piena per Temporary */
.durata { margin: 26px auto 0; max-width: 260px; }
.durata__binario { height: 16px; display: flex; align-items: center; border-radius: 8px; background: rgba(14, 15, 18, 0.06); padding: 0 0; overflow: hidden; }
.durata__barra { display: block; width: var(--w); height: var(--h); border-radius: 8px; background: var(--arancio); transform-origin: left center; transform: scaleX(0); transition: transform 1300ms var(--ease) 1000ms; }
.modo.in .durata__barra, html:not(.js) .durata__barra { transform: scaleX(1); }
.durata__nota { margin-top: 10px; font-size: var(--t-nota); color: var(--secondario); }
.durata__nota span { font-weight: 500; color: var(--testo); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .durata__barra, .giorno i { transition: none !important; animation: none !important; } }
.settimana__nota { margin-top: 12px; font-size: var(--t-nota); color: var(--secondario); }
.modo .desc { margin-top: 28px; font-size: var(--t-sotto); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.modo .dett { margin: 14px auto 0; max-width: 34ch; color: var(--secondario); }

/* ---------- Tre colonne essenziali (problema, metodo, vantaggio) ---------- */
.colonne { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.colonna h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.colonna .forte { margin-top: 10px; font-weight: 500; color: var(--arancio); }
.scuro .colonna .forte, .sez--scura .colonna .forte { color: var(--arancio); }
.colonna p { margin-top: 10px; color: var(--secondario); max-width: 40ch; }
.sez--scura .colonna p { color: var(--secondario-scuro); }

/* ---------- 4. Il problema: tre schede in rilievo, poi la risposta ----------
   Ogni scheda ha uno schema disegnato che mostra il problema; la fascia chiara mostra la risposta. */
.problemi { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.problema { background: var(--superficie); border-radius: var(--raggio); padding: clamp(28px, 3vw, 40px); transition: transform 300ms var(--ease), background-color 300ms ease; }
@media (hover: hover) and (pointer: fine) { .problema:hover { transform: translateY(-4px); background-color: #20232a; } }
.problema h3 { margin-top: 28px; font-size: clamp(22px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.problema .forte { margin-top: 8px; font-weight: 500; color: var(--arancio); }
.problema p:not(.forte) { margin-top: 8px; color: var(--secondario-scuro); }
.schema { display: block; width: 100%; height: auto; max-height: 140px; }
.schema .tratto { fill: none; stroke: rgba(244, 241, 234, 0.35); stroke-width: 2; }
.schema .tratto-scuro { fill: none; stroke: rgba(14, 15, 18, 0.55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.problema .schema .tratto-scuro { stroke: var(--midnight); }
.schema .tratto-arancio { fill: none; stroke: var(--arancio); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.schema .pieno { fill: rgba(244, 241, 234, 0.85); }
.schema .vuoto { fill: none; stroke: rgba(244, 241, 234, 0.3); stroke-width: 2; }
.schema .acceso { fill: var(--arancio); }
.schema .mancante { fill: none; stroke: var(--arancio); stroke-width: 2.5; stroke-dasharray: 5 5; }
.schema .punto-domanda { fill: var(--arancio); font: 600 18px var(--f); text-anchor: middle; }
.schema .perimetro { fill: none; stroke: rgba(244, 241, 234, 0.3); stroke-width: 2; stroke-dasharray: 6 6; }
.schema .perimetro-scuro { fill: var(--bianco); stroke: rgba(14, 15, 18, 0.18); stroke-width: 2; }
.schema .figura { fill: var(--midnight); }
.schema .testa-arancio { fill: var(--arancio); }
.schema .doc { fill: #E6E3DC; stroke: var(--superficie); stroke-width: 2; }
.schema .doc-piega { fill: rgba(14, 15, 18, 0.12); stroke: none; }
.schema .doc-riga { fill: none; stroke: rgba(14, 15, 18, 0.3); stroke-width: 2; stroke-linecap: round; }
/* i colori dei tre tipi di file: servono a riconoscerli al volo (documento, foglio di calcolo, presentazione) */
.schema .file { stroke: var(--superficie); stroke-width: 2; }
.schema .file--doc { fill: #2B579A; }
.schema .file--fogli { fill: #1D6F42; }
.schema .file--slide { fill: #C43E1C; }
.schema .file__lettera { fill: #fff; font: 700 11px var(--f); text-anchor: middle; }

/* la risposta: un riquadro bianco che si stacca dal fondo nero. La profondità sta nel testo: la domanda grande,
   la risposta in quattro righe con le parole chiave in evidenza, che entrano una dopo l'altra */
.risposta {
  margin-top: 20px; background: var(--bianco); color: var(--midnight); border-radius: var(--raggio);
  padding: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 72px); align-items: center; text-align: left;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 18px 36px -18px rgba(0, 0, 0, 0.5);
}
.risposta h3 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; }
.risposta h3 .punto { color: var(--arancio); }
.risposta__righe { display: grid; gap: 2px; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -0.025em; font-weight: 400; color: #6b6e75; }
.risposta__righe span { display: block; }
.risposta__righe em { font-style: normal; font-weight: 600; color: var(--midnight); }
.risposta__righe span:nth-child(3) em { color: var(--arancio); }
/* La chat: la domanda si scrive, poi i tre puntini di chi sta scrivendo, poi la risposta riga per riga */
.risposta { position: relative; }
.risposta h3, .risposta__righe { transition: opacity 400ms ease; }
.risposta.svuota h3, .risposta.svuota .risposta__righe { opacity: 0; }
.risposta .cursore::after { content: ""; display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.04em; vertical-align: -0.08em; background: var(--arancio); animation: lampeggia 900ms steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }
.risposta__scrive { display: none; }
.risposta.digita .risposta__scrive { display: inline-flex; gap: 6px; align-items: center; position: absolute; padding: 14px 18px; border-radius: 20px; background: var(--pietra); }
.risposta__scrive i { width: 8px; height: 8px; border-radius: 50%; background: #8d9097; animation: puntini 1.1s ease-in-out infinite; }
.risposta__scrive i:nth-child(2) { animation-delay: 0.15s; } .risposta__scrive i:nth-child(3) { animation-delay: 0.3s; }
@keyframes puntini { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.schema--grande { max-height: 220px; }

/* ---------- 5b. Il mercato: un grafico per ogni numero, che si anima all'ingresso ---------- */
.dati { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dato { background: var(--pietra); border-radius: var(--raggio); padding: clamp(28px, 3vw, 40px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.dato__visivo { height: 170px; width: 100%; display: grid; place-items: center; }
.dato b { margin-top: 24px; display: block; font-size: clamp(56px, 6vw, 88px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.dato p { margin-top: 12px; max-width: 30ch; color: var(--secondario); }
.dato .legenda { margin-top: 16px; font-size: 14px; display: flex; gap: 6px 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.legenda .voce { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ch--prima { background: var(--midnight); } .ch--ora { background: var(--arancio); } .ch--grigio { background: #cfcbc3; }

.griglia100 { display: grid; grid-template-columns: repeat(10, 12px); gap: 4px; }
.griglia100 i { width: 12px; height: 12px; border-radius: 3px; background: #e2ded6; transition: background-color 300ms ease; transition-delay: calc(400ms + var(--k, 0) * 70ms); }
.griglia100 i.prima { background: var(--midnight); transition-delay: 0ms; }
.dato.in .griglia100 i.ora, html:not(.js) .griglia100 i.ora { background: var(--arancio); }

.regola { width: 100%; max-width: 260px; }
.regola__barra { display: flex; gap: 3px; height: 36px; }
.regola__barra i { display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; color: var(--midnight); border-radius: 6px; transform-origin: left center; transform: scaleX(0); transition: transform 700ms var(--ease); }
.regola__barra i::after { content: attr(data-v); }
.regola__barra .r10 { width: 10%; background: #cfcbc3; transition-delay: 300ms; }
.regola__barra .r20 { width: 20%; background: #b9b5ad; transition-delay: 600ms; }
.regola__barra .r70 { width: 70%; background: var(--arancio); transition-delay: 900ms; transition-duration: 1100ms; }
.dato.in .regola__barra i, html:not(.js) .regola__barra i { transform: scaleX(1); }

.anello { width: 150px; height: 150px; transform: rotate(-90deg); }
.anello circle { fill: none; stroke-width: 14; }
.anello__fondo { stroke: #e2ded6; }
.anello__pieno { stroke: var(--arancio); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset 1600ms var(--ease) 400ms; }
.dato.in .anello__pieno, html:not(.js) .anello__pieno { stroke-dashoffset: 123.7; }
@media (prefers-reduced-motion: reduce) {
  .griglia100 i, .regola__barra i, .anello__pieno { transition: none; }
}

/* ---------- 6. Il metodo: un percorso che si riempie scorrendo ----------
   La linea si riempie di arancio e ogni tappa si accende quando la linea la raggiunge.
   Senza script o con il movimento ridotto la linea è piena e le tappe sono tutte accese. */
.tappe { list-style: none; margin-top: var(--stacco); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); position: relative; }
.tappe__linea { position: absolute; top: 9px; left: 16.66%; right: 16.66%; height: 2px; background: rgba(14, 15, 18, 0.14); }
.tappe__riempimento { position: absolute; inset: 0; background: var(--arancio); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.tappa { text-align: center; position: relative; }
.tappa__nodo { display: block; width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; background: var(--pietra); box-shadow: inset 0 0 0 2px rgba(14, 15, 18, 0.3); transition: background-color 400ms ease, box-shadow 400ms ease, transform 400ms var(--ease); }
.tappa__schema { display: block; width: 100%; max-width: 220px; height: auto; margin: 28px auto 0; }
.tappa__schema .pieno, .tappa__schema .figura { fill: var(--midnight); }
.tappa__schema .base { fill: none; stroke: rgba(14, 15, 18, 0.45); stroke-width: 2.5; stroke-linejoin: round; }
.tappa__schema .barra { fill: rgba(14, 15, 18, 0.16); }
.tappa__schema .acc { fill: none; stroke: #c9c5bc; stroke-width: 3; stroke-linecap: round; transition: stroke 500ms ease; }
.tappa__schema .acc.spesso { stroke-width: 6; }
.tappa__schema .acc-pieno { fill: #c9c5bc; transition: fill 500ms ease; }
.tappa h3 { margin-top: 24px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.tappa .forte { margin-top: 10px; font-weight: 500; color: var(--arancio); }
.tappa p:not(.forte) { margin: 10px auto 0; max-width: 34ch; color: var(--secondario); }
.tappa:not(.accesa) h3, .tappa:not(.accesa) p { opacity: 0.45; }
.tappa h3, .tappa p { transition: opacity 500ms ease; }
/* le tre icone del metodo, in loop */
.tappa__schema .acc.onda { animation: onda 1.8s ease-in-out infinite; }
.tappa__schema .acc.onda:nth-of-type(2) { animation-delay: 0.25s; }
.tappa__schema .acc.onda:nth-of-type(3) { animation-delay: 0.5s; }
@keyframes onda { 0%, 100% { opacity: 0.2; } 35% { opacity: 1; } 70% { opacity: 0.2; } }
.tappa__schema .voce { transform-box: fill-box; transform-origin: center; animation: voce 1.8s ease-in-out infinite; }
@keyframes voce { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } }
.tappa__schema .lente-fondo { fill: var(--pietra); }
.tappa__schema .barra-lente { fill: rgba(14, 15, 18, 0.32); }
.tappa.accesa .tappa__schema .barra-lente { fill: var(--arancio); }
.tappa__schema .salitore { animation: sali 4.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes sali {
  0% { transform: translate(56px, 104px); opacity: 0; }
  6%, 20% { transform: translate(56px, 104px); opacity: 1; }
  27% { transform: translate(76px, 76px); }
  34%, 46% { transform: translate(96px, 80px); }
  53% { transform: translate(116px, 52px); }
  60%, 86% { transform: translate(136px, 56px); opacity: 1; }
  94%, 100% { transform: translate(136px, 56px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tappa__schema .acc.onda, .tappa__schema .voce, .tappa__schema .salitore { animation: none; }
  .tappa__schema .salitore { transform: translate(136px, 56px); }
}
.tappa.accesa .tappa__nodo { background: var(--arancio); box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.18); transform: scale(1.1); }
.tappa.accesa .acc { stroke: var(--arancio); }
.tappa.accesa .acc-pieno { fill: var(--arancio); }
/* Senza script: tutto acceso */
html:not(.tappe-vive) .tappa h3, html:not(.tappe-vive) .tappa p { opacity: 1; }
html:not(.tappe-vive) .tappa__nodo { background: var(--arancio); box-shadow: none; }
html:not(.tappe-vive) .tappa .acc { stroke: var(--arancio); }
html:not(.tappe-vive) .tappa .acc-pieno { fill: var(--arancio); }

/* ---------- 5. Il mercato: i numeri ---------- */
.numeri { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; }
.numero b { display: block; font-size: clamp(64px, 8vw, 112px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.numero p { margin: 16px auto 0; max-width: 28ch; color: var(--secondario); }
.fonti { margin-top: 40px; text-align: center; font-size: var(--t-nota); color: var(--secondario); }

/* Foto larga sotto un'intestazione */
.foto-larga { margin-top: var(--stacco); border-radius: var(--raggio); overflow: hidden; }
.foto-larga img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 700px) { .foto-larga img { aspect-ratio: 4 / 3; } }

/* ---------- 6b. Una consulenza che resta: presenza nel tempo + mosaico ----------
   Le barre si allungano quando la scheda entra nello schermo: quella arancio va oltre la consegna del piano. */
.presenza { margin: var(--stacco) 0 0; background: var(--pietra); border-radius: var(--raggio); padding: clamp(28px, 4vw, 52px); display: grid; gap: 28px; }
.presenza__riga { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; }
.presenza__nome { font-weight: 500; color: var(--secondario); }
.presenza__nome--nostro { color: var(--testo); }
.presenza__binario { position: relative; height: 18px; border-radius: 9px; background: rgba(14, 15, 18, 0.06); }
.presenza__barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; transform-origin: left center; transform: scaleX(0); }
.presenza__barra--classica { width: 34%; background: #b9b5ad; transition: transform 900ms var(--ease) 200ms; }
.presenza__barra--nostra { width: 100%; background: var(--arancio); transition: transform 1800ms var(--ease) 500ms; }
.presenza.in .presenza__barra, html:not(.js) .presenza__barra { transform: scaleX(1); }
.presenza__fine { position: absolute; top: 26px; transform: translateX(-100%); white-space: nowrap; font-size: var(--t-nota); color: var(--secondario); opacity: 0; transition: opacity 400ms ease 1100ms; }
.presenza__fine--nostra { color: var(--testo); font-weight: 500; transition-delay: 2200ms; }
.presenza.in .presenza__fine, html:not(.js) .presenza__fine { opacity: 1; }
.presenza__asse { margin-left: 214px; margin-top: 14px; display: flex; justify-content: space-between; font-size: 13px; color: var(--secondario); }

.mosaico { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.tessera { background: var(--pietra); border-radius: var(--raggio); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .tessera:hover { transform: translateY(-4px); } }
.tessera h3 { margin-top: 28px; font-size: clamp(22px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.tessera .forte { margin-top: 8px; font-weight: 500; color: var(--arancio); }
.tessera p:not(.forte) { margin-top: 8px; color: var(--secondario); }
.tessera--grande { background: var(--midnight); color: var(--carta); flex-direction: row; align-items: flex-end; gap: 28px; }
.tessera--grande h3 { margin-top: 0; font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.03em; }
.tessera--grande p:not(.forte) { color: var(--secondario-scuro); }
.tessera__segno { flex: none; width: 34px; height: auto; align-self: flex-start; }
.tessera__segno rect { fill: var(--carta); }
.tessera__segno circle { fill: var(--arancio); }
.tessera__visivo { display: flex; gap: 6px; align-items: center; }
.tessera__visivo .g { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #d9d4c8; background: var(--bianco); }
.tessera__visivo .g.on { background: var(--midnight); box-shadow: none; }
.tessera__visivo--step { gap: 0; }
.tessera__visivo--step .s { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--secondario); box-shadow: inset 0 0 0 1.5px #c9c5bc; }
.tessera__visivo--step .s.ok { background: var(--arancio); color: var(--midnight); box-shadow: none; }
.tessera__visivo--step i { width: 28px; height: 2px; background: #c9c5bc; }

/* ---------- 7. Il Cruscotto: il prodotto al centro ---------- */
.prodotto { max-width: 980px; margin: var(--stacco) auto 0; border-radius: 20px; overflow: hidden; }
.prodotto img { width: 100%; }
.prodotto + .fonti { color: #3a2102; }
.sez--arancio .azioni { margin-top: 40px; }

/* ---------- 7b. Gli strumenti: Cruscotto Gestionale e second brain, in anteprima viva ---------- */
.sez--soluzioni { background: var(--pietra); padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px); }
/* "Una consulenza che resta" chiude più corta: il cambio di fondo fa da stacco, non serve altro bianco */
#vantaggio { padding-bottom: clamp(56px, 6vw, 84px); }
.sez--soluzioni .azioni { margin-top: 32px; }
.strumenti { margin-top: var(--stacco); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
/* le due schede hanno la stessa altezza: testo in alto, anteprima in basso, allineate alla stessa linea */
.strumento { min-width: 0; background: var(--midnight); color: var(--carta); border-radius: var(--raggio); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; text-align: left; }
.strumento h3 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.strumento__testo > p { margin-top: 14px; color: var(--secondario-scuro); max-width: 46ch; }
.strumento__testo { min-height: 0; }
.esempio { margin-top: 18px !important; color: var(--carta) !important; font-size: 17px; }
.ruota { display: block; margin-top: 4px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; color: var(--arancio); transition: opacity 350ms ease, transform 450ms var(--ease); }
.ruota.esce { opacity: 0; transform: translateY(-10px); }
.ruota.entra { opacity: 0; transform: translateY(10px); transition: none; }
.strumento .schermo, .brain-visivo { margin-top: auto; }
.brain-visivo { height: 340px; display: flex; flex-direction: column; gap: 12px; }
.brain-visivo .cervello { flex: 1; min-height: 0; height: auto; }
.feed { --p-viola: #a78bfa; background: #1d2025; border-radius: 16px; padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; min-height: 76px; }
.feed .agente__luce { margin-top: 7px; flex: none; background: var(--p-viola); animation-name: pulsa-viola; }
@keyframes pulsa-viola { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(167, 139, 250, 0); } }
.feed__testo { display: grid; gap: 2px; transition: opacity 400ms ease, transform 400ms var(--ease); }
.feed__testo.esce { opacity: 0; transform: translateY(6px); }
.feed__chi { font-weight: 500; }
.feed__msg { color: var(--secondario-scuro); font-size: 15px; line-height: 1.4; }
.punto-scuro { color: var(--midnight); }

/* lo schermo del Cruscotto: la pagina scorre piano, si ferma, riparte */
.schermo { --p-blu: #5b8cff; --p-menta: #34d399; --p-corallo: #ff6b6b; position: relative; height: 340px; border-radius: 16px; overflow: hidden; background: #15171b; border: 1px solid #26292f; }
.schermo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(transparent, #15171b); pointer-events: none; }
.schermo__pagina { padding: 22px; font-size: 13px; line-height: 1.45; color: var(--carta); animation: scorre 20s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes scorre { 0%, 14% { transform: none; } 36%, 50% { transform: translateY(-240px); } 72%, 86% { transform: translateY(-480px); } 100% { transform: none; } }
.ui-intest { color: #8d9097; font-size: 12px; }
.ui-saluto { margin-top: 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.ui-sintesi { margin-top: 8px; color: #c9c6bf; }
.ui-sintesi b { color: var(--carta); font-weight: 600; }
.ui-kpi4 { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-kpi4 div { background: #1d2025; border-radius: 10px; padding: 12px 14px; }
.ui-kpi4 small { color: #8d9097; display: block; }
.ui-kpi4 b { display: block; margin-top: 2px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-kpi4 em, .ui-dec em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
em.ok { background: rgba(52, 211, 153, 0.16); color: var(--p-menta); }
em.att { background: rgba(255, 107, 107, 0.16); color: var(--p-corallo); }
.ui-blocco { margin-top: 12px; background: #1d2025; border-radius: 10px; padding: 14px; }
.ui-tit { font-weight: 600; margin-bottom: 10px; }
.ui-mesi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 110px; }
.ui-mese { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; gap: 4px; }
.ui-mese i { align-self: end; height: var(--h); background: var(--p-blu); border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(0); transition: transform 700ms var(--ease); transition-delay: calc(var(--k) * 60ms); }
.ui-mese.prev i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(91, 140, 255, 0.7); }
.ui-mese small { font-size: 10px; color: #8d9097; }
.strumento.in .ui-mese i, html:not(.js) .ui-mese i { transform: scaleY(1); }
.ui-leg { margin-top: 8px; font-size: 11px; color: #8d9097; display: flex; gap: 6px; align-items: center; }
.ui-leg span { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ui-leg .pieno { background: var(--p-blu); } .ui-leg .vuoto { box-shadow: inset 0 0 0 1.5px rgba(91, 140, 255, 0.7); margin-left: 8px; }
.ui-scen { display: grid; grid-template-columns: 76px minmax(0, 1fr) 72px; gap: 10px; align-items: center; margin-top: 8px; }
.ui-scen i { height: 6px; border-radius: 3px; background: #2a2d33; position: relative; overflow: hidden; }
.ui-scen i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: #6b6e75; border-radius: 3px; }
.ui-scen.atteso i::after { background: var(--p-menta); }
.ui-scen b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-dec { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.ui-dec em { margin-top: 0; flex: none; min-width: 84px; text-align: center; }

/* la luce degli agenti */
.agente__luce { width: 8px; height: 8px; border-radius: 50%; background: var(--arancio); box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.5); animation: pulsa 2.4s ease-out infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 122, 26, 0); } }
@media (prefers-reduced-motion: reduce) { .schermo__pagina, .agente__luce { animation: none; } .ui-mese i { transition: none; } }
@media (max-width: 980px) {
  .strumenti { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, …): la colonna non si allarga oltre lo schermo per seguire la schermata del Cruscotto */
  .strumento__testo { min-height: 0; }
  .brain-visivo { height: 360px; }
}
@media (max-width: 520px) { .ui-kpi4 b { font-size: 16px; } .schermo__pagina { padding: 16px; } }

/* ---------- 8. Chi siamo ---------- */
.chi { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
/* la foto è alta quanto tutto il testo, da "Chi siamo" all'icona di LinkedIn; scorrendo sale piano e si assesta */
.chi__foto { position: relative; margin: 0; min-height: 520px; }
.chi__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transform: translateY(var(--sale, 0px)) scale(var(--scala, 1)); transform-origin: center bottom; will-change: transform; }
/* il nome a tutta larghezza, in trasparenza, che scivola piano di lato mentre si scorre */
#chisiamo { overflow: hidden; padding-top: clamp(16px, 2vw, 28px); } /* poco nero sopra il nome: la sezione parte quasi subito */
/* il nome sta più in basso, sullo sfondo: "Chi siamo" gli si sovrappone in parte */
.nome-grande { position: relative; z-index: 0; margin: 0 0 calc(-0.42 * (100vw - var(--pad) * 2) / 6.25); padding: 0 var(--pad); font-size: calc((100vw - var(--pad) * 2) / 6.25); text-align: center; line-height: 0.9; color: rgba(244, 241, 234, 0.1); white-space: nowrap; will-change: transform; }
.nome-grande .nome { letter-spacing: -0.045em; }
.linkedin { margin-top: 32px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #1d2025; color: var(--carta); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease); }
.linkedin svg { width: 22px; height: 22px; fill: currentColor; }
.linkedin:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .linkedin:hover { background: #0a66c2; color: #fff; } }
.chi h2 { font-size: var(--t-titolo); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.chi .ruolo { margin-top: 14px; font-size: var(--t-sotto); color: var(--secondario-scuro); letter-spacing: -0.01em; line-height: 1.3; }
.chi .bio { margin-top: 28px; color: var(--carta); max-width: 62ch; }
.chi .bio + .bio { margin-top: 16px; }
.chi blockquote { margin-top: 32px; font-size: var(--t-sotto); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; }
.percorso { margin-top: 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.percorso b { display: block; font-weight: 500; }
.percorso span { display: block; margin-top: 4px; color: var(--secondario-scuro); font-size: 16px; }

/* ---------- 9. Domande ---------- */
.domande { max-width: 860px; margin: var(--stacco) auto 0; }
.domande { display: grid; gap: 8px; }
.domande details { background: var(--pietra); border-radius: 18px; padding: 0 28px; }
.domande summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; min-height: 44px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; flex: none; font-size: 28px; font-weight: 400; color: var(--arancio-grande); transition: transform 240ms var(--ease); }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details p { padding: 0 0 28px; max-width: 68ch; color: var(--secondario); }

/* ---------- 9b. Le domande come una chat ----------
   Con gli script: la finestra di chat e le domande sotto come pulsanti. Senza: l'elenco classico, che resta anche per Google. */
html:not(.js) .chat, html:not(.js) .chat__scelte { display: none; }
.js #faqElenco { display: none; }
.chat { margin: var(--stacco) 0 0; border-radius: var(--raggio); overflow: hidden; background: var(--pietra); display: flex; flex-direction: column; height: clamp(440px, 58vh, 560px); }
.chat__testa { display: flex; gap: 12px; align-items: center; padding: 16px 22px; background: var(--midnight); color: var(--carta); }
.chat__testa b { display: block; font-weight: 500; line-height: 1.2; }
.chat__testa small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--secondario-scuro); }
.chat__online { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.chat__avatar { width: 38px; height: 38px; border-radius: 50%; background: #1d2025; display: grid; place-items: center; flex: none; }
.chat__avatar svg { width: 22px; height: 22px; }
.chat__avatar rect { fill: var(--carta); } .chat__avatar circle { fill: var(--arancio); }
.chat__corpo { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.5; animation: msg-entra 300ms var(--ease) both; }
@keyframes msg-entra { from { opacity: 0; transform: translateY(8px); } }
.msg--noi { align-self: flex-start; background: var(--bianco); color: var(--testo); border-bottom-left-radius: 6px; }
.msg--tu { align-self: flex-end; background: var(--midnight); color: var(--carta); border-bottom-right-radius: 6px; }
.msg--scrive { display: inline-flex; gap: 5px; align-items: center; padding: 15px 18px; }
.msg--scrive i { width: 7px; height: 7px; border-radius: 50%; background: #8d9097; animation: puntini 1.1s ease-in-out infinite; }
.msg--scrive i:nth-child(2) { animation-delay: 0.15s; } .msg--scrive i:nth-child(3) { animation-delay: 0.3s; }
.msg .cursore-chat { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--arancio); animation: lampeggia 900ms steps(1) infinite; }
/* le nove domande su due righe: cinque sopra, quattro sotto */
.chat__scelte { margin: 12px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.chat__scelte button { min-height: 60px; padding: 10px 16px; border: 0; border-radius: 16px; background: var(--pietra); color: var(--testo); font: 500 15px var(--f); line-height: 1.3; cursor: pointer; text-align: left; transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, transform 160ms var(--ease); }
.chat__scelte button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chat__scelte button:hover { background: var(--midnight); color: var(--carta); } }
.chat__scelte button.fatta { opacity: 0.55; }
.chat__scelte[aria-busy="true"] button { cursor: wait; }
@media (max-width: 980px) { .chat__scelte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* sul telefono le domande scorrono in orizzontale su una riga, sotto la chat */
@media (max-width: 700px) { .chat { height: 460px; } .msg { max-width: 90%; font-size: 15px; }
  .chat__scelte { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 0 var(--pad) 6px; }
  .chat__scelte button { flex: 0 0 72%; scroll-snap-align: start; } }

/* ---------- 10. Il test ---------- */
.test { max-width: 720px; margin: var(--stacco) auto 0; background: var(--bianco); border-radius: var(--raggio); padding: clamp(32px, 5vw, 56px); text-align: center; }
.test__punti { display: flex; justify-content: center; gap: 6px; }
.test__punto { width: 28px; height: 4px; border-radius: 2px; background: #e2dccf; transition: background-color 300ms ease; }
.test__punto.on { background: var(--arancio); }
.test__conta { margin-top: 14px; font-size: var(--t-nota); color: var(--secondario); }
.test__domanda { margin-top: 20px; font-size: var(--t-sotto); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; min-height: 3.9em; }
.test__risposte { margin-top: 28px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.test__risposte button { min-height: 48px; min-width: 104px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--pietra); color: var(--testo); font: 500 17px var(--f); cursor: pointer; transition: background-color 200ms ease, transform 160ms var(--ease); }
.test__risposte button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .test__risposte button:hover { background: #e7e5df; } }
.test__verdetto { font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.test__verdetto .amber { color: var(--arancio-grande); }
.test__msg { margin-top: 14px; color: var(--secondario); }
.test__cta { margin-top: 28px; }
.test__rifai { margin-top: 16px; min-height: 44px; border: 0; background: none; font: 500 15px var(--f); color: var(--secondario); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 11. Contatto e piede ---------- */
.contatto { text-align: center; }
.contatto .indirizzi { margin-top: 28px; font-size: var(--t-nota); color: var(--secondario-scuro); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.contatto .indirizzi a:hover { color: var(--carta); }
.piede { background: var(--pietra); padding: 48px var(--pad); font-size: 13px; color: var(--secondario); }
.piede .dentro { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.piede .nome { font-size: 20px; color: var(--testo); }
.piede nav { display: flex; gap: 20px; flex-wrap: wrap; }
.piede a { min-height: 44px; display: inline-flex; align-items: center; }
.piede a:hover { color: var(--testo); }
.piede__firma { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--secondario); }
.piede__firma .cuore { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin: 0 0.1em; fill: var(--arancio); }

/* ---------- Entrate allo scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--rd, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
/* ---------- L'approccio: al posto delle icone, tre animazioni (feed di un'agenzia, foglio di calcolo, cedolino) ---------- */
/* contenitore comune: prende il posto dell'icona */
.moto { position: relative; height: 180px; min-width: 0; border-radius: 14px; overflow: hidden; background: #121418; }
.problema p.moto-p, .problema .moto p { margin: 0; color: inherit; }

/* 1. Agenzia: un feed Instagram che scorre; interfaccia dell'app, carattere di sistema, nessun richiamo al marchio */
.moto--feed { background: #121418; color: #0c0c0d; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: 11px; }
/* il feed occupa tutto il riquadro, senza sfumature */
.ig-schermo { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.ig-feed { animation: igfeed 16s linear infinite; }
@keyframes igfeed { to { transform: translateY(-50%); } }
.ig-post { padding-bottom: 10px; }
.ig-post__testa { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ig-post__avatar { width: 24px; height: 24px; border-radius: 50%; padding: 2px; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-post__avatar i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: #1b1b1f; }
.ig-post__nome { font-weight: 600; }
.ig-post__nome small { display: block; font-weight: 400; font-size: 9.5px; color: #737373; }
.ig-post__piu { margin-left: auto; letter-spacing: 1px; font-weight: 700; color: #262626; }
.ig-post__img { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; font-weight: 800; text-align: center; }
.ig-post__img--1 { background: linear-gradient(135deg, #ff3d7f, #7b2ff7); color: #fff; }
.ig-post__img--1 b { font-size: 44px; letter-spacing: -0.03em; line-height: 0.9; }
.ig-post__img--1 small { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; }
.ig-post__img--2 { background: #ffd60a; color: #111; }
.ig-post__img--2 b { font-size: 64px; letter-spacing: -0.05em; }
.ig-post__img--2::before { content: ""; position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; border: 10px solid #111; right: -14%; top: -12%; }
.ig-post__img--3 { background: radial-gradient(circle at 30% 30%, #4dd4ff, #1f3bff 70%); color: #fff; }
.ig-post__img--3 b { font-size: 30px; line-height: 1; }
.ig-post__img--3 small { display: block; margin-top: 6px; font-size: 10px; font-weight: 600; opacity: 0.85; }
.ig-post__azioni { display: flex; gap: 12px; padding: 8px 10px 4px; }
.ig-post__azioni svg { width: 19px; height: 19px; fill: none; stroke: #262626; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ig-post__azioni svg:last-child { margin-left: auto; }
.ig-post__azioni svg.pieno { fill: #ff3040; stroke: #ff3040; }
.ig-post__like { padding: 0 10px; font-weight: 600; }
.ig-post__dida { padding: 2px 10px 0; line-height: 1.35; }
.ig-post__dida b { font-weight: 600; }
.ig-post__dida span { color: #00376b; }

/* 2. Consulente: il foglio di calcolo che si compila, poi scorre e mostra il grafico */
.moto--foglio { background: #f4f3ef; color: #1b1d21; font-size: 10px; font-variant-numeric: tabular-nums; }
.xl__barra { position: absolute; inset: 0 0 auto 0; height: 22px; z-index: 2; background: #1D6F42; color: #fff; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-weight: 600; font-size: 10px; }
.xl__barra b { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; background: #fff; color: #1D6F42; font-size: 9px; }
.xl__corpo { position: absolute; left: 0; right: 0; top: 22px; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.xl__corpo.giu { transform: translateY(var(--corsa, -90px)); }
.xl table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.xl th, .xl td { height: 17px; padding: 0 6px; border: 1px solid #dcdad3; text-align: right; white-space: nowrap; overflow: hidden; }
.xl th { background: #e8e6df; color: #6b6e75; font-weight: 500; text-align: center; }
.xl th:first-child, .xl td:first-child { width: 20px; text-align: center; background: #e8e6df; color: #6b6e75; padding: 0; }
.xl td.etichetta { text-align: left; color: #44474d; }
.xl td.attiva { outline: 2px solid #1D6F42; outline-offset: -2px; background: #fff; }
.xl td.xl-forte { font-weight: 700; }
.xl__grafico { height: 104px; margin: 10px 12px 12px; display: flex; align-items: flex-end; gap: 7px; border-bottom: 1px solid #c9c6be; padding: 0 4px; }
.xl__grafico i { flex: 1; height: var(--h); background: #2E8B57; border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--k) * 90ms); }
.xl__grafico i:last-child { background: var(--arancio); }
.xl__grafico.su i { transform: scaleY(1); }

/* 3. Manager assunto: un cedolino com'è davvero (caselle, voci con codice, totali, imponibili), che scorre;
   in fondo un'etichetta arancio, fuori dal documento, con il costo annuo per l'azienda */
.moto--busta { background: #fff; }
.cedolino { position: absolute; left: 0; right: 0; top: 0; background: #fff; color: #1a1a1a; padding: 10px 12px 12px;   /* da bordo a bordo, come le altre due animazioni */
  font-family: Arial, "Helvetica Neue", sans-serif; font-size: 8.4px; line-height: 1.25; font-variant-numeric: tabular-nums;
  animation: cedolino 12s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.ced__titolo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ced__titolo b { font-size: 10px; letter-spacing: 0.06em; }
.ced__griglia { display: grid; gap: 0; border: 1px solid #7b8a80; }
.ced__griglia--2 { grid-template-columns: 1.6fr 1fr; }
.ced__griglia--4 { grid-template-columns: repeat(4, 1fr); border-top: 0; }
.ced__casella { padding: 2px 4px 3px; border-right: 1px solid #b9c6bd; border-bottom: 1px solid #b9c6bd; min-width: 0; }
.ced__casella:last-child { border-right: 0; }
.ced__casella small { display: block; font-size: 6.6px; letter-spacing: 0.05em; text-transform: uppercase; color: #4e6355; }
.ced__casella span { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ced__voci { width: 100%; margin-top: 5px; border-collapse: collapse; table-layout: fixed; }
.ced__voci th { background: #dfeae2; color: #2f4a39; font-size: 6px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 4px; border: 1px solid #b9c6bd; text-align: left; font-size: 6.6px; }
.ced__voci td { padding: 2.5px 4px; border-left: 1px solid #b9c6bd; border-right: 1px solid #b9c6bd; white-space: nowrap; overflow: hidden; }
.ced__voci tr:last-child td { border-bottom: 1px solid #b9c6bd; }
.ced__voci th:nth-child(1), .ced__voci td:nth-child(1) { width: 12%; }
.ced__voci th:nth-child(2), .ced__voci td:nth-child(2) { width: 34%; }
.ced__voci th:nth-child(n+3) { width: 18%; font-size: 6px; letter-spacing: 0; padding: 3px 3px; }
.ced__voci td:nth-child(n+3), .ced__voci th:nth-child(n+3) { text-align: right; }
/* sul tablet il riquadro è stretto (200 px): si nascondono le colonne "Cod." e "Base", e descrizioni e importi stanno per intero */
@media (min-width: 701px) and (max-width: 980px) {
  .ced__voci th:nth-child(1), .ced__voci td:nth-child(1), .ced__voci th:nth-child(3), .ced__voci td:nth-child(3) { display: none; }
  .ced__voci th:nth-child(2), .ced__voci td:nth-child(2) { width: 50%; }
  .ced__voci th:nth-child(n+4), .ced__voci td:nth-child(n+4) { width: 25%; }
  .ced__voci td { font-size: 7.6px; text-overflow: ellipsis; }
  .ced__voci th:nth-child(n+4) { font-size: 5.4px; padding: 3px 2px; }
  .ced__titolo span { display: none; }
  .ced__griglia--2 { grid-template-columns: 1fr; }
  .ced__griglia--4 { grid-template-columns: 1fr 1fr; }
  .ced__casella small { font-size: 5.8px; letter-spacing: 0.02em; }
}
.ced__totali { display: grid; grid-template-columns: 1fr 1fr 1.1fr; margin-top: 5px; border: 1px solid #7b8a80; }
.ced__totali .ced__casella span { text-align: right; }
.ced__netto { background: #dfeae2; }
.ced__netto span { font-size: 10.5px; }
.ced__piede { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 5px; border: 1px solid #7b8a80; }
.ced__piede .ced__casella span { text-align: right; font-weight: 400; }
.ced__firma { margin-top: 5px; display: flex; justify-content: space-between; color: #6a7a70; font-size: 6.6px; }
@keyframes cedolino { 0%, 10% { transform: translateY(0); } 50%, 85% { transform: translateY(var(--corsa, -150px)); } 100% { transform: translateY(0); } }
.ced__costo { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 7px 10px; border-radius: 8px; background: #D92D20; color: #fff;   /* rosso: è un costo, non un colore del marchio */
  text-align: right; line-height: 1.15; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(8px) scale(0.96);
  animation: costo 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.ced__costo small { display: block; font-size: 9px; font-weight: 600; }
.ced__costo b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
@keyframes costo { 0%, 50% { opacity: 0; transform: translateY(8px) scale(0.96); } 56%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(8px) scale(0.96); } }

@media (prefers-reduced-motion: reduce) { .ig-feed, .cedolino { animation: none; } .ced__costo { animation: none; opacity: 1; transform: none; } .xl__corpo { transition: none; } }

.problema { min-width: 0; }
/* ferme quando il riquadro non è a schermo */
.moto.fermo, .moto.fermo * { animation-play-state: paused !important; }

/* le tre alternative si spengono quando arriva "Perché Standing Baba?": la luce resta solo sulla risposta */
.js .problemi .problema.reveal { transition: opacity 700ms var(--ease) var(--rd, 0s), transform 700ms var(--ease) var(--rd, 0s), filter 700ms ease, background-color 300ms ease; }
.problemi.spenti .problema { filter: grayscale(1) brightness(0.45); }
@media (hover: hover) and (pointer: fine) { .problemi.spenti .problema:hover { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 300ms ease; }
  .js .apertura .testa { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .barra__voci a:not(.pulsante) { display: none; }
  .colonne, .percorso { grid-template-columns: 1fr 1fr; }
  .problemi { grid-template-columns: minmax(0, 1fr); }
  .dati { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .mosaico { grid-template-columns: 1fr 1fr; }
  .tessera--grande { grid-column: 1 / -1; }
  .problema { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .problema .schema, .problema .moto { grid-row: 1 / 4; }
  .problema h3 { margin-top: 0; }
  .chi { grid-template-columns: minmax(0, 1fr); }
  .chi__foto { max-width: 460px; min-height: 480px; }
  .test__verdetto .amber { color: var(--arancio-testo); } /* sotto i 24px serve il tono più scuro */
}

/* ---------- Telefono ---------- */
@media (max-width: 700px) {
  :root { --t-testo: 17px; --t-titolo: 29px; --t-sotto: 20px; }
  .domande details { padding: 0 20px; }
  .barra__voci { display: none; }
  .barra__menu { display: block; position: relative; }
  .barra__menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; font-size: 16px; }
  .barra__menu summary::-webkit-details-marker { display: none; }
  .barra__menu nav { position: absolute; right: 0; top: 52px; background: var(--bianco); border-radius: 18px; box-shadow: 0 20px 50px rgba(14, 15, 18, 0.16); padding: 10px 22px; display: grid; min-width: 220px; }
  .barra__menu nav a { min-height: 48px; display: flex; align-items: center; }
  .apertura h1 { font-size: 14.6vw; }
  .nome-grande { font-size: calc((100vw - var(--pad) * 2) / 6.6); margin-bottom: calc(-0.3 * (100vw - var(--pad) * 2) / 6.6); }
  .scena__voce h3 { font-size: calc(var(--dim, 15vw) * 1.15); }
  .scena__voce p { font-size: 18px; } /* le spiegazioni delle aree stanno al massimo su 3 righe */
  .test__verdetto .amber { color: var(--arancio-testo); } /* sotto i 24px serve il tono più scuro */
  .apertura figure img { aspect-ratio: 4 / 3; }
  .riquadri, .confronto, .colonne, .numeri, .percorso, .problemi, .risposta { grid-template-columns: minmax(0, 1fr); }
  .tappe { grid-template-columns: 1fr; gap: 48px; padding-left: 44px; }
  .mosaico { grid-template-columns: minmax(0, 1fr); }
  .tessera--grande { flex-direction: column; align-items: flex-start; }
  .presenza__riga { grid-template-columns: 1fr; gap: 10px; }
  .presenza__asse { margin-left: 0; font-size: 12px; }
  .presenza__fine { font-size: 13px; }
  .tappe__linea { top: 10px; bottom: 10px; left: 9px; right: auto; width: 2px; height: auto; }
  .tappe__riempimento { transform-origin: center top; transform: scaleY(var(--p, 1)); }
  .tappa { text-align: left; }
  .tappa__nodo { position: absolute; left: -44px; top: 0; margin: 0; }
  .tappa__schema { margin: 0; max-width: 170px; }
  .tappa h3 { margin-top: 12px; }
  .tappa p:not(.forte) { margin-left: 0; }
  .problema { display: block; }
  .problema h3 { margin-top: 24px; }
  .riquadro { min-height: 0; }
  .numeri { gap: 48px; }
  .azioni { gap: 18px; }
}
/* telefoni stretti (sotto i 380 px): un punto in meno perché le spiegazioni delle aree restino su 3 righe */
@media (max-width: 380px) { .scena__voce p { font-size: 17px; } }