/* Vanteo — sito. Valori presi dal design «Vanteo Landing.dc.html» (11/10/2026).
   Solo nero, blu #3D93EA, bianco e grigi neutri. Nessuna risorsa esterna:
   i caratteri sono serviti dal sito stesso (fonts/). */

@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Variable.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --nero:#090A0C;        /* sezioni scure */
  --inchiostro:#111318;  /* testo su chiaro */
  --bianco:#FFFFFF;
  --grigio-chiaro:#F5F6F8;
  --testo-chiaro:#F4F6F8;   /* titoli su nero */
  --testo-spento:#9CA4AE;   /* corpo su nero: 7,86:1 */
  --testo-medio:#5F6772;    /* corpo su chiaro: 5,29:1 anche su #F5F6F8 */
  --blu:#3D93EA;
  --blu-chiaro:#6BAEF0;
  --blu-scuro:#1F5FA3;      /* testo blu su chiaro: 6,4:1 su bianco */
  --linea-chiara:rgba(17,19,24,.1);
  --linea-scura:rgba(255,255,255,.1);
  --titoli:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --testo:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --numeri:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  --molla:cubic-bezier(.2,.8,.2,1.05);
  /* spaziature: 8 · 14 · 20 · 28 · 56 · 120 */
  --s1:8px;--s2:14px;--s3:20px;--s4:28px;--s5:56px;--s6:120px;
  --gutter:16px;
  /* profondità: base → rialzato → sospeso */
  --ombra-rialzo:0 1px 2px rgba(17,19,24,.06),0 8px 24px -8px rgba(31,95,163,.14);
  --ombra-sospeso:0 30px 80px -20px rgba(61,147,234,.22),0 20px 50px -20px rgba(0,0,0,.55);
}
@media (min-width:768px){:root{--gutter:24px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--nero);color:var(--testo-chiaro);font-family:var(--testo);font-size:16px;line-height:1.7;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(61,147,234,.3)}
img,video{max-width:100%;display:block;height:auto}
h1,h2,h3{font-family:var(--titoli);letter-spacing:-0.03em;margin:0;text-wrap:balance}
p,dd{text-wrap:pretty}
p{margin:0}

/* link e focus */
a{color:var(--blu);text-decoration:none;transition:color .2s var(--molla)}
a:hover{color:var(--blu-chiaro)}
a:active{opacity:.75}
a:focus-visible,.bottone:focus-visible,video:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:6px}
.chiaro a:not(.bottone){color:var(--inchiostro);text-decoration:underline;text-decoration-color:var(--blu);text-underline-offset:3px;text-decoration-thickness:2px}
.chiaro a:not(.bottone):hover{color:#000;text-decoration-color:var(--inchiostro)}
.chiaro a:not(.bottone):focus-visible{outline-color:var(--blu-scuro)}
.scuro a:not(.bottone):not(.marchio){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.salta{position:absolute;left:-999px;top:8px;background:var(--blu);color:var(--nero);padding:8px 14px;border-radius:8px;font-weight:700;z-index:30}
.salta:focus{left:8px}

/* pulsante unico */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blu);color:var(--nero);font-family:var(--testo);font-weight:700;font-size:15px;line-height:1.3;padding:13px 22px;border-radius:9px;min-height:48px;text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -10px rgba(61,147,234,.55),0 2px 6px rgba(61,147,234,.18);
  transition:transform .25s var(--molla),opacity .2s ease}
.bottone:hover{color:var(--nero);transform:translateY(-2px)}
.bottone:active{transform:translateY(0) scale(.98);opacity:.9}
.chiaro .bottone:focus-visible{outline-color:var(--blu-scuro)}
.bottone .solo-pc{display:none}
.bottone .solo-tel{display:inline}
@media (min-width:768px){
  .bottone{font-size:17px;padding:16px 30px;border-radius:10px}
  .bottone .solo-pc{display:inline}
  .bottone .solo-tel{display:none}
}
.nota-cta{font-size:14px;color:var(--testo-spento)}

/* barra in alto */
.barra{position:sticky;top:0;z-index:20;background:rgba(9,10,12,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea-scura)}
.barra-dentro{max-width:1240px;margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.marchio{display:inline-flex;align-items:center;gap:10px;color:var(--testo-chiaro);font-family:var(--titoli);font-weight:750;font-size:19px;letter-spacing:-0.02em;min-height:44px}
.marchio:hover{color:var(--bianco)}
.marchio:active{opacity:.8}
.marchio img{width:24px;height:24px}
.barra nav{display:flex;align-items:center;gap:var(--s3)}
.barra nav a.voce{color:var(--testo-spento);font-size:15px;padding:10px 2px;min-height:44px;display:none;text-decoration:none}
.barra nav a.voce:hover{color:var(--testo-chiaro)}
.barra nav a.voce:active{opacity:.7}
.barra .bottone{min-height:40px;padding:9px 16px;font-size:14px}
@media (min-width:768px){.barra nav a.voce{display:inline-flex;align-items:center}}
.barra nav a.voce[aria-current="page"]{color:var(--testo-chiaro);box-shadow:inset 0 -2px 0 var(--blu)}
@media (min-width:768px) and (max-width:1023px){.barra nav{gap:14px}.barra nav a.voce{font-size:14px}}
/* menu su telefono: seconda riga di voci, va a capo (niente scorrimento orizzontale) */
.barra .menu-tel{display:flex;flex-wrap:wrap;gap:0 12px;justify-content:center;padding:0 12px 4px;max-width:1240px;margin:0 auto}
.menu-tel a{color:var(--testo-spento);font-size:13.5px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none}
.menu-tel a:hover{color:var(--testo-chiaro)}
.menu-tel a:active{opacity:.7}
.menu-tel a[aria-current="page"]{color:var(--testo-chiaro);box-shadow:inset 0 -2px 0 var(--blu)}
@media (min-width:768px){.barra .menu-tel{display:none}}
/* cambio lingua: visibile anche su telefono */
.barra nav a.lingua{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:44px;padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:8px;color:var(--testo-chiaro);font-family:var(--numeri);font-size:13px;font-weight:500;letter-spacing:.04em;text-decoration:none;transition:transform .2s var(--molla),opacity .2s ease}
.barra nav a.lingua:hover{color:var(--bianco);border-color:var(--blu)}
.barra nav a.lingua:active{transform:scale(.96);opacity:.8}
@media (max-width:767px){.barra nav .bottone{display:none}}

/* sezioni: ritmo del design (nero / bianco / grigio), mai due nere di fila */
section{padding:var(--s5) var(--gutter)}
@media (min-width:1024px){section{padding:var(--s6) 100px}}
.scuro{background:var(--nero);color:var(--testo-chiaro)}
.bianco{background:var(--bianco);color:var(--inchiostro)}
.grigio{background:var(--grigio-chiaro);color:var(--inchiostro)}
.centro{display:flex;flex-direction:column;align-items:center;text-align:center}
.dentro{max-width:1160px;margin:0 auto;width:100%}

h2{font-weight:700;font-size:26px;line-height:1.2}
@media (min-width:768px){h2{font-size:36px}}
h3{font-weight:700;font-size:20px;line-height:1.25}
@media (min-width:768px){h3{font-size:22px}}
.corpo{font-size:16px;line-height:1.7;max-width:600px}
@media (min-width:768px){.corpo{font-size:18px}}
.scuro .corpo{color:var(--testo-spento)}
.chiaro .corpo,.chiaro .testo-p{color:var(--testo-medio)}
.testa{display:flex;flex-direction:column;gap:var(--s2);align-items:center;text-align:center;margin:0 auto var(--s4);max-width:680px}
@media (min-width:1024px){.testa{margin-bottom:var(--s5)}}

/* stato: in arrivo / in prova */
.stato{display:inline-flex;align-items:center;font-family:var(--testo);font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1;padding:6px 10px;border-radius:100px;white-space:nowrap;vertical-align:middle}
.chiaro .stato{background:rgba(61,147,234,.12);color:var(--blu-scuro);border:1px solid rgba(31,95,163,.35)}
.scuro .stato{background:rgba(61,147,234,.14);color:var(--blu-chiaro);border:1px solid rgba(61,147,234,.35)}

/* schermate vere dell'app */
.schermata{margin:0;display:flex;flex-direction:column;gap:10px}
.schermata picture{display:block}
.schermata.finestra{max-width:560px;width:100%;justify-self:center}
.schermata img{border-radius:12px;border:1px solid rgba(255,255,255,.08);background:var(--nero)}
.chiaro .schermata img{box-shadow:0 24px 60px -18px rgba(17,19,24,.35),0 4px 14px rgba(17,19,24,.08)}
.schermata figcaption{font-size:13px;font-style:italic;color:var(--testo-medio)}
.scuro .schermata figcaption{color:var(--testo-spento)}
.foglio img{border:1px solid var(--linea-chiara);background:var(--bianco);border-radius:8px}

/* 1 · apertura */
.apertura{padding:48px var(--gutter) 48px;gap:18px;
  background:radial-gradient(60% 50% at 80% 0%,rgba(61,147,234,.16),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(61,147,234,.07),transparent 70%),var(--nero)}
@media (min-width:1024px){.apertura{padding:120px 100px 110px;gap:22px}}
.apertura h1{max-width:900px;font-weight:750;font-size:34px;line-height:1.12;color:var(--testo-chiaro)}
@media (min-width:768px){.apertura h1{font-size:60px;line-height:1.08}}
.apertura .corpo{max-width:680px}
.motto{font-family:var(--titoli);font-weight:650;font-size:18px;color:var(--testo-chiaro);letter-spacing:-0.01em}
@media (min-width:768px){.motto{font-size:21px}}
.apertura .bottone{margin-top:6px;width:100%}
@media (min-width:768px){.apertura .bottone{width:auto;margin-top:8px}}
.apertura .schermata{margin-top:24px;max-width:975px;width:100%}
.apertura .schermata img{box-shadow:var(--ombra-sospeso)}
@media (min-width:1024px){.apertura .schermata{margin-top:40px}}

/* entrata dell'apertura: solo opacity e transform, testo leggibile anche senza animazione */
@keyframes sale{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.apertura>*{animation:sale .7s var(--molla) both}
.apertura>*:nth-child(2){animation-delay:.06s}
.apertura>*:nth-child(3){animation-delay:.12s}
.apertura>*:nth-child(4){animation-delay:.18s}
.apertura>*:nth-child(5){animation-delay:.24s}
.apertura>*:nth-child(6){animation-delay:.3s}

/* schede (per chi, dati, in arrivo) */
.coppia{display:grid;gap:var(--s3)}
@media (min-width:860px){.coppia{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.scheda{background:var(--bianco);border:1px solid var(--linea-chiara);border-radius:14px;padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:10px;text-align:left;box-shadow:var(--ombra-rialzo)}
@media (min-width:768px){.scheda{padding:32px}}
.bianco .scheda{background:var(--grigio-chiaro);box-shadow:none}
.scheda .chi{font-family:var(--numeri);font-size:13px;font-weight:500;color:var(--testo-medio);text-transform:uppercase;letter-spacing:.06em}
.scheda p{color:var(--testo-medio)}
.scheda .titolo-riga{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* 2 · cosa risolve: dolori, oggi / in arrivo */
.dolori{gap:8px}
.dolori .gruppo{font-family:var(--numeri);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--blu-scuro);margin-top:10px}
.dolori .gruppo+.lista-dolori{margin-top:2px}
.lista-dolori{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lista-dolori li{position:relative;padding-left:26px;color:var(--inchiostro);font-size:16px;line-height:1.5}
.lista-dolori li::before{content:"";position:absolute;left:2px;top:5px;width:15px;height:15px;border-radius:50%;background:var(--blu)}
.lista-dolori li::after{content:"";position:absolute;left:7.5px;top:7.5px;width:4px;height:7.5px;border:solid var(--nero);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lista-dolori.arrivo li{color:var(--testo-medio)}
.lista-dolori.arrivo li::before{background:none;border:1.5px dashed var(--blu-scuro)}
.lista-dolori.arrivo li::after{display:none}
@media (min-width:768px){.lista-dolori li{font-size:17px}}

/* 2 · per chi */
.profilo{display:grid;gap:var(--s3);align-items:center;margin-top:var(--s4)}
@media (min-width:860px){.profilo{grid-template-columns:1fr 1.1fr;gap:var(--s5);margin-top:var(--s5)}}
.profilo .testo-p{font-size:17px;max-width:460px}
.profilo .schermata{max-width:560px;width:100%;justify-self:center}

/* 3 · funzioni: testo + schermata, alternate */
.riga{display:grid;gap:var(--s3);align-items:center}
.riga+.riga{margin-top:var(--s5)}
@media (min-width:1024px){
  .riga{grid-template-columns:.8fr 1.2fr;gap:64px}
  .riga.giro{grid-template-columns:1.2fr .8fr}
  .riga.giro .testo{order:2}
  .riga+.riga{margin-top:var(--s6)}
}
.riga .testo{display:flex;flex-direction:column;gap:var(--s2)}
.riga .testo p{color:var(--testo-medio);font-size:16px}
@media (min-width:768px){.riga .testo p{font-size:17px}}
.forte{font-weight:600;color:var(--inchiostro)}

/* 4 · video */
.video{gap:var(--s3)}
.video-cornice{width:100%;max-width:1040px;margin-top:var(--s2);border-radius:14px;overflow:hidden;border:1px solid var(--linea-scura);box-shadow:var(--ombra-sospeso);background:#000;aspect-ratio:16/9}
.video-cornice video{width:100%;height:100%;object-fit:cover}
.video-nota{font-size:14px;color:var(--testo-spento);max-width:600px}

/* 6 · in arrivo e in prova */
.fogli{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.fogli figcaption{font-size:13px;font-style:normal;color:var(--testo-medio)}
.icona-foto{max-width:300px;width:100%;margin-top:6px}
.icona-foto img{border-radius:14px}
.nota{font-size:13px;font-style:italic;color:var(--testo-medio)}

/* 7 · dati */
.dati{gap:var(--s2)}
@media (min-width:1024px){.dati{gap:var(--s3)}}
.lucchetto{width:42px;height:42px;border-radius:11px;background:rgba(61,147,234,.14);display:flex;align-items:center;justify-content:center}
@media (min-width:1024px){.lucchetto{width:48px;height:48px;border-radius:12px}}
.piccolo{font-size:15px}

/* 7b · storia del fondatore */
.storia{gap:var(--s4)}
.racconto{margin:0;max-width:680px;width:100%;text-align:left;background:var(--bianco);border:1px solid var(--linea-chiara);border-left:3px solid var(--blu);border-radius:14px;padding:var(--s4) var(--s3);box-shadow:var(--ombra-rialzo);display:flex;flex-direction:column;gap:var(--s2)}
@media (min-width:768px){.racconto{padding:36px 40px}}
.racconto p{color:var(--testo-medio);font-size:16px;line-height:1.7}
@media (min-width:768px){.racconto p{font-size:17px}}
.racconto .forte{color:var(--inchiostro);font-weight:600;font-size:17px}
@media (min-width:768px){.racconto .forte{font-size:19px}}
.firma{display:flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--titoli);font-weight:650;font-size:15px;color:var(--inchiostro);letter-spacing:-0.01em}
.firma img{width:20px;height:20px}

/* 8 · prezzo */
.prezzo{gap:16px}
@media (min-width:1024px){.prezzo{gap:24px}}
.cifra{font-family:var(--numeri);font-weight:500;font-size:32px;line-height:1.1}
@media (min-width:768px){.cifra{font-size:42px}}
.cifra small{display:block;font-family:var(--testo);font-weight:500;font-size:15px;color:var(--testo-medio);margin-top:8px;letter-spacing:0}
.prezzo .corpo{font-size:15px;max-width:480px}
@media (min-width:768px){.prezzo .corpo{font-size:16px}}
.prezzo .bottone{width:100%}
@media (min-width:768px){.prezzo .bottone{width:auto}}

/* 9 · domande */
.domande{gap:var(--s4)}
@media (min-width:1024px){.domande{gap:48px}}
.elenco{width:100%;max-width:760px;margin:0;padding:0}
.elenco>div{padding:18px 0;border-bottom:1px solid var(--linea-chiara);display:flex;flex-direction:column;gap:5px;text-align:left}
.elenco>div:last-child{border-bottom:0}
@media (min-width:1024px){.elenco>div{padding:22px 0;gap:6px}}
.elenco dt{font-family:var(--testo);font-weight:600;font-size:15.5px;color:var(--inchiostro);line-height:1.5}
.elenco dd{margin:0;font-size:15px;color:var(--testo-medio);line-height:1.65}
@media (min-width:768px){.elenco dt{font-size:17px}.elenco dd{font-size:16px}}

/* chiusura e piè di pagina */
.chiusura{padding:64px var(--gutter) 32px;gap:20px}
@media (min-width:1024px){.chiusura{padding:130px 100px 90px;gap:var(--s4)}}
.chiusura h2{max-width:760px;font-weight:750;font-size:26px;line-height:1.25}
@media (min-width:768px){.chiusura h2{font-size:40px;line-height:1.2}}
.chiusura .bottone{width:100%}
@media (min-width:768px){.chiusura .bottone{width:auto}}
.piede{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;font-size:13px;color:var(--testo-spento)}
@media (min-width:1024px){.piede{margin-top:48px}}
.piede a{color:var(--testo-spento)!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(156,164,174,.45);padding:6px 0}
.piede a:hover{color:var(--testo-chiaro)!important;text-decoration-color:var(--blu)}
.piede a:active{opacity:.7}
.segnaposto{font-family:var(--numeri);font-size:12px;color:var(--testo-chiaro);background:rgba(61,147,234,.16);border:1px dashed var(--blu);border-radius:5px;padding:1px 6px}

/* barra fissa in basso, solo telefono */
.barra-basso{position:sticky;bottom:0;z-index:20;background:rgba(9,10,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--linea-scura);padding:12px var(--gutter)}
.barra-basso .bottone{width:100%}
@media (min-width:768px){.barra-basso{display:none}}

/* apertura delle pagine interne (funzioni, commercialisti, storia, guide) */
.intro{padding:48px var(--gutter) 44px;gap:16px;background:radial-gradient(60% 60% at 85% 0%,rgba(61,147,234,.14),transparent 70%),var(--nero)}
@media (min-width:1024px){.intro{padding:96px 100px 80px;gap:20px}}
.intro h1{max-width:860px;font-weight:750;font-size:32px;line-height:1.12}
@media (min-width:768px){.intro h1{font-size:52px;line-height:1.08}}
.occhiello{font-family:var(--numeri);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--blu-chiaro)}
.indice-pagina{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin-top:6px;max-width:860px}
.indice-pagina a{font-size:14px;color:var(--testo-chiaro)!important;text-decoration:none!important;border:1px solid var(--linea-scura);border-radius:100px;padding:8px 14px;min-height:40px;display:inline-flex;align-items:center;transition:transform .2s var(--molla),opacity .2s ease}
.indice-pagina a:hover{border-color:var(--blu)}
.indice-pagina a:active{transform:scale(.97);opacity:.8}

/* funzione: problema → cosa fa → schermata → stato */
.funzione .problema{font-family:var(--numeri);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--testo-medio)}
.funzione .titolo-riga{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.funzione ul{margin:0;padding-left:20px;color:var(--testo-medio)}
.funzione li+li{margin-top:4px}
.chiaro .stato.oggi{background:rgba(17,19,24,.06);color:var(--inchiostro);border-color:rgba(17,19,24,.25)}
.fonte{font-size:13px;color:var(--testo-medio)}
.fonte a{word-break:break-word}

/* numeri con fonte (commercialisti) */
.dati-fonte{display:grid;gap:var(--s3)}
/* 14/10/2026: niente piu' 3 colonne fisse. Con 2 riquadri la terza restava vuota e il
   blocco stava a sinistra sotto un titolo centrato. Ora i riquadri vanno a capo e
   restano centrati, anche nell'ultima riga; sotto 860px resta una colonna sola. */
@media (min-width:860px){.dati-fonte{display:flex;flex-wrap:wrap;justify-content:center}.dati-fonte>.dato{flex:1 1 260px;max-width:360px}}
.dato{background:var(--bianco);border:1px solid var(--linea-chiara);border-radius:14px;padding:var(--s3);box-shadow:var(--ombra-rialzo);display:flex;flex-direction:column;gap:8px;text-align:left}
.bianco .dato{background:var(--grigio-chiaro);box-shadow:none}
.dato .numero{font-family:var(--titoli);font-weight:700;font-size:42px;line-height:1.1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--inchiostro)}
.dato p{color:var(--testo-medio);font-size:15.5px}

/* rimandi alle pagine (dalla home) */
.rimandi{display:grid;gap:var(--s3)}
@media (min-width:860px){.rimandi{grid-template-columns:repeat(3,1fr)}}
.rimando{display:flex;flex-direction:column;gap:8px;background:var(--bianco);border:1px solid var(--linea-chiara);border-radius:14px;padding:var(--s4) var(--s3);text-align:left;color:var(--inchiostro)!important;text-decoration:none!important;box-shadow:var(--ombra-rialzo);transition:transform .25s var(--molla),opacity .2s ease}
.rimando:hover{transform:translateY(-3px)}
.rimando:active{transform:translateY(0) scale(.99);opacity:.9}
.rimando:focus-visible{outline:2px solid var(--blu-scuro);outline-offset:3px}
.rimando p{color:var(--testo-medio)}
.rimando .vai{font-weight:600;color:var(--blu-scuro)}

/* guide */
.articolo{background:var(--bianco);color:var(--inchiostro);padding:48px var(--gutter) 72px}
@media (min-width:1024px){.articolo{padding:80px 100px 110px}}
.articolo .dentro{max-width:720px}
.articolo h2{font-size:24px;margin:40px 0 12px}
@media (min-width:768px){.articolo h2{font-size:28px}}
.articolo h3{font-size:19px;margin:28px 0 8px}
.articolo p,.articolo li{color:#3D434C;font-size:17px;line-height:1.75}
.articolo p+p{margin-top:14px}
.articolo ul,.articolo ol{padding-left:22px;margin:12px 0}
.articolo li+li{margin-top:6px}
.articolo table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px;display:block;overflow-x:auto}
.articolo th,.articolo td{border:1px solid var(--linea-chiara);padding:8px 10px;text-align:left;color:#3D434C}
.articolo th{background:var(--grigio-chiaro);color:var(--inchiostro)}
.riquadro{background:var(--grigio-chiaro);border-left:3px solid var(--blu);border-radius:10px;padding:16px 18px;margin:24px 0}
.riquadro p{font-size:16px}
.meta-guida{font-size:14px;color:var(--testo-medio)}
.fonti-guida{margin-top:40px;border-top:1px solid var(--linea-chiara);padding-top:20px}
.fonti-guida li,.fonti-guida p{font-size:14.5px}
.elenco-guide{display:grid;gap:var(--s3)}
@media (min-width:860px){.elenco-guide{grid-template-columns:repeat(2,1fr)}}

/* pagine di testo (privacy, termini, 404) */
.pagina{background:var(--bianco);color:var(--inchiostro);padding:48px var(--gutter) 80px}
@media (min-width:1024px){.pagina{padding:96px 100px 120px}}
.pagina .dentro{max-width:760px}
.pagina h1{font-weight:750;font-size:30px;line-height:1.2;margin-bottom:var(--s3)}
@media (min-width:768px){.pagina h1{font-size:44px}}
.pagina h2{font-size:22px;margin:40px 0 10px}
@media (min-width:768px){.pagina h2{font-size:26px}}
.pagina p,.pagina li{color:#3D434C;font-size:16px;line-height:1.7}
.pagina p+p{margin-top:12px}
.pagina ul{padding-left:20px;margin:10px 0}
.pagina li+li{margin-top:6px}
.avviso-provvisorio{border:2px dashed var(--inchiostro);border-radius:10px;padding:14px 18px;margin:0 0 var(--s4);font-weight:600;color:var(--inchiostro)!important;background:var(--grigio-chiaro)}
.pagina .segnaposto{color:var(--inchiostro);background:rgba(61,147,234,.14)}
.aggiornata{font-size:14px;color:var(--testo-medio)}
.errore{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:var(--s3)}
.errore .codice{font-family:var(--numeri);font-weight:500;color:var(--testo-spento);font-size:15px}
.errore h1{font-family:var(--titoli);font-weight:750;font-size:32px;line-height:1.15;color:var(--testo-chiaro)}
@media (min-width:768px){.errore h1{font-size:52px}}
.errore .bottone{align-self:flex-start}
.piede-semplice{background:var(--nero);padding:28px var(--gutter)}

/* ============================================================
   TOCCO MOBILE (solo ≤767px) — 14/10/2026
   Rifinitura fine per telefono. Nessun colore o font nuovo,
   nessuna risorsa esterna, nessun JS. Solo transform e opacity.
   Il desktop resta identico: tutto è dentro @media (max-width:767px).
   Rispetta prefers-reduced-motion: chi riduce le animazioni non
   riceve nemmeno lo stato iniziale (niente opacity:0).
   ============================================================ */
@media (max-width:767px){

  /* 1 · CTA comoda col pollice: la barra fissa in basso rispetta la
        tacca/indicatore dell'iPhone e sfuma il contenuto sotto di sé
        invece di tagliarlo di netto. Resta un mailto, non la tocco. */
  .barra-basso{
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -20px 44px -26px rgba(61,147,234,.5);
  }
  .barra-basso::before{
    content:"";position:absolute;left:0;right:0;top:-22px;height:22px;
    background:linear-gradient(to top,rgba(9,10,12,.9),rgba(9,10,12,0));
    pointer-events:none;
  }

  /* 2 · profondità: schermate dell'app con ombra tinta di blu a bassa
        opacità (base → sospeso), coerente col resto del tema. */
  .chiaro .schermata img{
    box-shadow:0 18px 44px -20px rgba(31,95,163,.3),0 4px 14px rgba(17,19,24,.1);
  }

  /* 3 · micro-reveal morbido e discreto all'ingresso delle sezioni allo
        scroll. Usa la scroll-timeline nativa del browser: nessun JS e
        nessuna richiesta. Dove non è supportata, il contenuto resta
        visibile e fermo. Hero (.apertura/.intro) esclusi: hanno già
        la loro entrata. */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      main>section:not(.apertura):not(.intro),
      article.articolo,
      footer.chiusura{
        opacity:.001;
        animation:tocco-entra .7s var(--molla) both;
        animation-timeline:view();
        animation-range:entry 4% cover 20%;
      }
    }
  }
}
@keyframes tocco-entra{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ============================================================
   VIDEO DELLE FUNZIONI + CHIEDI A VANTEO — 14/10/2026
   Clip girate sull'app vera (azienda inventata, mute).
   Telefono: versione 9:16 (scelta da <source media> nell'HTML).
   ============================================================ */
/* tour in home: 16:9 su desktop, 9:16 su telefono */
@media (max-width:767px){.video-cornice.tour{aspect-ratio:9/16;max-width:420px}}
.video-nota a{white-space:nowrap}

/* clip accanto alle funzioni: stessa cornice delle schermate */
.clip-cornice{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--nero)}
.chiaro .clip-cornice{box-shadow:0 24px 60px -18px rgba(17,19,24,.35),0 4px 14px rgba(17,19,24,.08)}
.clip-cornice video{width:100%;height:100%;object-fit:cover}
.schermata.clip{width:100%}
.clip-due{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media (min-width:860px){.clip-due{grid-template-columns:1fr 1fr;margin-top:var(--s5)}}
.clip-due .schermata figcaption{font-style:normal}
@media (max-width:767px){
  .clip-cornice{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
  .schermata.clip figcaption{text-align:center}
  .chiaro .clip-cornice{box-shadow:0 18px 44px -20px rgba(31,95,163,.3),0 4px 14px rgba(17,19,24,.1)}
}

/* chiedi a Vanteo: domande vere, come le scrivi nell'app */
.chiedi .testa{max-width:720px}
.domande-chat{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
@media (min-width:768px){.domande-chat{grid-template-columns:1fr 1fr;gap:var(--s3)}}
@media (min-width:1024px){.domande-chat{grid-template-columns:repeat(3,1fr)}}
.domande-chat li{background:var(--bianco);border:1px solid var(--linea-chiara);border-radius:14px;padding:var(--s3);display:flex;flex-direction:column;gap:10px;box-shadow:var(--ombra-rialzo)}
.domande-chat .tipo{font-family:var(--numeri);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--blu-scuro)}
.domande-chat .domanda{align-self:flex-start;background:var(--nero);color:var(--testo-chiaro);font-family:var(--titoli);font-weight:600;font-size:16px;line-height:1.4;letter-spacing:-0.01em;padding:10px 14px;border-radius:12px 12px 12px 4px}
.domande-chat .risposta{color:var(--testo-medio);font-size:15.5px;line-height:1.6}
.chiedi .onesto{margin:var(--s4) auto 0;text-align:center;max-width:720px;color:var(--inchiostro);font-size:16px}
@media (min-width:768px){.chiedi .onesto{font-size:17px}}