/*
 * senzamani.com · il foglio di stile, tutto qui.
 * Dal 2026-10-01 il sito e' statico e la verita' e' questo file.
 * Sezioni numerate, una per blocco.
 */

/* ==========================================================================
   1 · TOKEN
   ========================================================================== */
:root{
  --nero:      #04060C;
  --nero-2:    #070B14;
  --blu:       #2D7BFF;
  --blu-scuro: #0B3C8F;
  --azzurro:   #55C8FF;
  --azzurro-2: #9BE2FF;
  --testo:     #FFFFFF;
  --soft:      #94A6C4;
  --soft-2:    #C6D3E8;
  --tenue:     #6B7C99;

  /* Solo per le candele dei grafici e del logo, mai per bottoni o testi. */
  --candela-su:  #22C55E;
  --candela-giu: #EF4444;

  --linea:  1px solid rgba(120,175,255,.14);
  --vetro:  rgba(140,185,255,.045);
  --vetro2: rgba(140,185,255,.075);

  --r:   18px;
  --r-s: 12px;
  --max: 1140px;

  --font: 'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--testo);
  background:var(--nero);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

p,h1,h2,h3,h4,ul,ol,li,figure,dl,dd,blockquote{margin:0;padding:0}
ul{list-style:none}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{text-decoration:none;color:inherit}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;text-align:left}
::selection{background:rgba(85,200,255,.3);color:#fff}

:focus-visible{outline:2px solid var(--azzurro);outline-offset:3px;border-radius:4px}

.sa-salta{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;background:var(--azzurro);color:#02101F;border-radius:0 0 10px 0;font-weight:600;
}
.sa-salta:focus{left:0}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ==========================================================================
   2b · IL FONT, DENTRO IL TEMA
   --------------------------------------------------------------------------
   Onest e' un font variabile: un solo file copre tutti i pesi da 300 a 800,
   percio' "font-weight:300 800" e non una faccia per peso. Sta nel tema e non
   su Google: toglie due collegamenti esterni e una richiesta che blocca il
   disegno della pagina, e non manda l'indirizzo IP di chi visita a un terzo.
   Il sottoinsieme e' quello latino, che copre l'italiano accenti compresi.
   ========================================================================== */
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('font/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   3 · TELA TECH
   ========================================================================== */
.sa-tela{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}

.sa-tela__griglia{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(110,175,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,175,255,.075) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 8%,rgba(0,0,0,.5) 46%,transparent 84%);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 8%,rgba(0,0,0,.5) 46%,transparent 84%);
}
.sa-tela__griglia::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(110,175,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,175,255,.05) 1px,transparent 1px);
  background-size:290px 290px;
}

.sa-tela__alone{
  position:absolute;inset:-25%;
  background:
    radial-gradient(42% 34% at 50% 2%,  rgba(45,123,255,.40) 0%,transparent 62%),
    radial-gradient(34% 30% at 10% 32%, rgba(85,200,255,.18) 0%,transparent 64%),
    radial-gradient(38% 30% at 92% 58%, rgba(45,123,255,.18) 0%,transparent 64%),
    radial-gradient(46% 34% at 50% 98%, rgba(85,200,255,.12) 0%,transparent 66%);
  filter:blur(34px);
  animation:sa-aurora 26s ease-in-out infinite alternate;
}
@keyframes sa-aurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-2.5%,1.8%,0) scale(1.07)}
  100%{transform:translate3d(2.5%,-1.8%,0) scale(1.03)}
}

/**
 * La scia di luce che attraversa la pagina.
 *
 * Va spostata con "transform", non con "left": lo skew inclina la banda, e su un
 * elemento alto il 180% dello schermo la punta si sposta di lato quasi mezzo
 * schermo. Con "left:-45%" il parcheggio restava in vista su un telefono stretto:
 * si vedeva una banda ferma in mezzo alla pagina, e al giro dopo saltava di colpo.
 * Le distanze sono in vw apposta: cosi' sta fuori schermo a tutte le larghezze,
 * anche tenendo conto dell'inclinazione. La stessa posizione e' anche quella di
 * partenza, perche' con "riduci le animazioni" l'animazione non parte affatto.
 */
.sa-tela__scia{
  position:absolute;top:-40%;left:0;width:60%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(85,200,255,.07),transparent);
  transform:translateX(-170vw) skewX(-14deg);
  animation:sa-scia 16s linear infinite;
  will-change:transform;
}
@keyframes sa-scia{
  0%,58%{transform:translateX(-170vw) skewX(-14deg)}
  100%  {transform:translateX(170vw)  skewX(-14deg)}
}

.sa-tela__grana{
  position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:3px 3px;
}

/* ==========================================================================
   4 · IMPALCATURA
   ========================================================================== */
.sa-sito{position:relative;z-index:1}
.sa-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sa-wrap--stretto{max-width:860px}
.sa-sec{position:relative;padding:96px 0}
.sa-sec--top{padding-top:32px;padding-bottom:64px}
.sa-sec--fitta{padding:64px 0}

@media(max-width:820px){
  .sa-sec{padding:58px 0}
  .sa-sec--fitta{padding:44px 0}
  .sa-sec--top{padding-top:18px;padding-bottom:40px}
  .sa-wrap{padding:0 18px}
}

/* ==========================================================================
   5 · TIPOGRAFIA
   ========================================================================== */
.sa-h1{
  font-size:clamp(40px,6.6vw,74px);
  font-weight:500;line-height:1.02;letter-spacing:-.035em;
  margin-bottom:18px;text-wrap:balance;
}
/* Sotto i 441px di schermo la riga lunga del titolo non ci sta a 40px e va a capo
   da sola: il titolo diventa di tre righe invece di due. Qui il corpo segue la
   larghezza dello schermo, tarato sulla riga piu' lunga misurata sul sito vero. */
@media(max-width:560px){
  .sa-h1{font-size:clamp(22px,calc(9.7vw - 3.4px),40px)}
}
.sa-h2{
  font-size:clamp(28px,4.4vw,50px);
  font-weight:500;line-height:1.06;letter-spacing:-.032em;
  margin-bottom:16px;text-wrap:balance;
}
.sa-h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.28}

/* Discendente di .sa-sito apposta: deve battere le regole locali tipo .sa-qual b. */
.sa-sito .sa-blu{color:var(--azzurro);font-weight:600}
.sa-h1 .sa-blu,.sa-h2 .sa-blu{font-weight:500}

.sa-grad{
  background:linear-gradient(100deg,#9BE2FF 0%,#55C8FF 34%,#2D7BFF 68%,#9BE2FF 100%);
  background-size:250% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sa-flusso 8s linear infinite;display:inline-block;
}
@keyframes sa-flusso{to{background-position:250% center}}

.sa-occhiello{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--azzurro);margin-bottom:14px;
}
.sa-occhiello::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--azzurro);box-shadow:0 0 0 4px rgba(85,200,255,.16);
  animation:sa-battito 2.4s ease-in-out infinite;
}
@keyframes sa-battito{
  0%,100%{box-shadow:0 0 0 4px rgba(85,200,255,.16)}
  50%    {box-shadow:0 0 0 9px rgba(85,200,255,0)}
}

.sa-testa{max-width:760px;margin-bottom:52px}
.sa-testa--c{margin-left:auto;margin-right:auto;text-align:center}
.sa-testa--c .sa-occhiello{justify-content:center}
.sa-testa p{color:var(--soft);font-size:17.5px;text-wrap:pretty}
.sa-testa p b{color:var(--soft-2);font-weight:600}

@media(max-width:820px){ .sa-testa{margin-bottom:34px} .sa-testa p{font-size:16px} }

/* ==========================================================================
   6 · BOTTONI
   ========================================================================== */
.sa-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;
  font-weight:600;font-size:16px;letter-spacing:-.01em;text-align:center;
  color:#02101F;
  background:linear-gradient(135deg,#9BE2FF 0%,#55C8FF 42%,#2D7BFF 100%);
  background-size:180% 100%;
  box-shadow:0 10px 30px rgba(45,123,255,.32),inset 0 1px 0 rgba(255,255,255,.45);
  overflow:hidden;white-space:nowrap;
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s ease,background-position .55s ease;
  will-change:transform;
}
.sa-btn:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(45,123,255,.46),inset 0 1px 0 rgba(255,255,255,.5);background-position:100% 0}
.sa-btn:active{transform:translateY(0)}
.sa-btn svg{width:19px;height:19px;flex:0 0 auto}
.sa-btn::after{
  content:'';position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:sa-lucido 4.2s ease-in-out infinite;
}
@keyframes sa-lucido{0%,70%{left:-60%}100%{left:135%}}

.sa-btn--g{padding:18px 38px;font-size:17.5px}
/* La barra fissa: maiuscolo e grassetto pieno. Le maiuscole hanno bisogno di
   respiro, con il tracking negativo del bottone normale si impastano. */
.sa-btn--caps{letter-spacing:.05em;font-weight:800}
.sa-btn--caps.sa-btn--g{padding:18px 34px}
.sa-btn--sm{padding:11px 20px;font-size:14.5px}
.sa-btn--sm svg{width:17px;height:17px}

.sa-btn--pulsa{animation:sa-pulsa 3s ease-in-out infinite}
@keyframes sa-pulsa{
  0%,100%{box-shadow:0 10px 30px rgba(45,123,255,.32),0 0 0 0 rgba(85,200,255,.40),inset 0 1px 0 rgba(255,255,255,.45)}
  50%    {box-shadow:0 14px 38px rgba(45,123,255,.40),0 0 0 15px rgba(85,200,255,0),inset 0 1px 0 rgba(255,255,255,.45)}
}

.sa-btn--fantasma{
  background:var(--vetro);color:var(--testo);border:var(--linea);
  box-shadow:none;font-weight:500;
}
.sa-btn--fantasma::after{display:none}
.sa-btn--fantasma:hover{background:var(--vetro2);border-color:rgba(85,200,255,.4);box-shadow:none}

/* ==========================================================================
   7 · NAV
   ========================================================================== */
.sa-nav{
  position:sticky;top:0;z-index:70;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:rgba(4,6,12,.72);
  border-bottom:1px solid rgba(120,175,255,.10);
}
.sa-nav__in{
  max-width:var(--max);margin:0 auto;padding:0 24px;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.sa-marca{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.02em;font-size:15.5px}
.sa-marca img{height:44px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.sa-marca span{letter-spacing:.04em;font-weight:700;font-size:15px}
@media(max-width:560px){ .sa-marca img{height:38px} }
.sa-menu{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500;color:var(--soft)}
.sa-menu ul,.sa-menu li{display:contents}
.sa-menu a{transition:color .2s ease}
.sa-menu a:hover{color:var(--testo)}
@media(max-width:1000px){ .sa-menu{display:none} }
@media(max-width:560px){ .sa-nav__in{padding:0 18px;height:60px} .sa-marca span{display:none} }

/* ==========================================================================
   8 · HERO
   ========================================================================== */
.sa-hero{text-align:center}

.sa-qual{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 8px;border-radius:999px;
  background:var(--vetro);border:var(--linea);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:14px;font-weight:500;color:var(--soft-2);
  margin-bottom:22px;line-height:1.35;text-align:left;
}
.sa-qual b{color:var(--testo);font-weight:600}
/* Classe sua e non ".sa-qual span": quel selettore prenderebbe anche l'etichetta
   PER CHI e la batterebbe, perche' e' piu' specifico di ".sa-qual__tag". */
.sa-qual__t{text-wrap:balance}
.sa-qual__tag{
  flex:0 0 auto;padding:4px 11px;border-radius:999px;
  background:rgba(45,123,255,.18);border:1px solid rgba(85,200,255,.32);
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--azzurro-2);
}
/* Sul telefono l'etichetta restava su una riga sua e il testo ne prendeva altre
   due: tre righe in tutto. Tenendola in linea sta in due, etichetta compresa. */
@media(max-width:820px){
  .sa-qual{
    align-items:center;text-align:left;gap:10px;
    padding:9px 15px 9px 9px;
    font-size:13.5px;line-height:1.32;margin-bottom:22px;
  }
  .sa-qual__tag{font-size:10.5px;padding:4px 9px}
  /* Il claim va a capo, e la seconda riga corta allineata a sinistra lasciava un
     vuoto a destra: sembrava storto. Centrato, lo strappo sta da tutte e due le
     parti e il blocco torna in asse con l'etichetta. */
  /* La colonna del testo prendeva tutto lo spazio rimasto (291px) mentre le righe
     ne occupavano 204: il testo si centrava dentro l'avanzo e l'etichetta restava
     staccata di 53px invece di 10. Con il tetto la colonna si stringe sulle righe,
     la pillola si accorcia e il gruppo etichetta piu' testo si centra compatto.
     In em e non in px cosi' segue il corpo del carattere. */
  .sa-qual__t{text-align:center;max-width:15.5em}
}

.sa-sotto{
  font-size:clamp(17px,2.2vw,21px);color:var(--soft-2);
  max-width:640px;margin:0 auto 16px;text-wrap:balance;
}
.sa-sotto b{color:var(--testo);font-weight:600}

.sa-intro{
  max-width:640px;margin:0 auto;
  font-size:16px;color:var(--soft);text-wrap:pretty;
}
.sa-intro b{color:var(--azzurro);font-weight:600}

/* Le pillole stanno sopra il video: preparano a guardarlo. */
.sa-chip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.sa-chip li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:var(--vetro);border:var(--linea);
  font-size:13.5px;font-weight:500;color:var(--soft-2);
}
.sa-chip__i{display:inline-flex;flex:0 0 auto}
.sa-chip svg{width:15px;height:15px;stroke:var(--azzurro);fill:none;stroke-width:2.4;flex:0 0 auto}

/* Sul telefono, sopra il video, le pillole andavano a capo una per riga e
   spingevano il video sotto la piega. Qui la prima schermata diventa una colonna
   e le pillole scendono sotto il bottone (order), in una griglia due a due con
   l'icona sopra al testo, ognuna col suo piccolo galleggiare. */
@media(max-width:820px){
  .sa-hero{display:flex;flex-direction:column;align-items:center}
  .sa-hero > .sa-video,.sa-hero > .sa-dopo{width:100%}
  .sa-chip{
    order:10;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px;
  }
  .sa-chip li{
    flex-direction:column;justify-content:flex-start;gap:9px;
    padding:16px 10px 14px;border-radius:16px;text-align:center;
    font-size:13px;line-height:1.3;
  }
  .sa-chip__i{
    align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
    background:rgba(45,123,255,.14);border:1px solid rgba(85,200,255,.34);
  }
  .sa-chip svg{width:18px;height:18px}
  .sa-chip__t{text-wrap:balance}
  .is-vivo .sa-chip__i{animation:sa-galleggia 3.2s ease-in-out calc(var(--k) * .4s) infinite}
  .sa-mazzo{order:11}
}

/* Sul telefono si stringe anche il resto, cosi' il video sta tutto in schermo. */
@media(max-width:560px){
  .sa-sotto{font-size:16.5px}
  .sa-intro{font-size:15px}
  .sa-video{margin-top:20px}
}

/* ==========================================================================
   9 · VIDEO
   ========================================================================== */
.sa-video{
  position:relative;max-width:940px;margin:26px auto 0;
  border-radius:var(--r);padding:3px;
  background:linear-gradient(150deg,rgba(85,200,255,.6),rgba(45,123,255,.22) 45%,rgba(155,226,255,.5));
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 70px rgba(45,123,255,.14);
  animation:sa-alone 6s ease-in-out infinite alternate;
}
@keyframes sa-alone{
  from{box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 40px rgba(45,123,255,.10)}
  to  {box-shadow:0 40px 110px rgba(0,0,0,.7), 0 0 90px rgba(85,200,255,.22)}
}
.sa-video__in{border-radius:calc(var(--r) - 3px);overflow:hidden;background:#000}
.sa-video__in iframe{border-radius:calc(var(--r) - 3px)}
/* Didascalia, non un paragrafo: deve stare sotto al video senza pesare. */
.sa-nota{display:block;text-align:center;color:#7E90B0;font-size:13px;margin-top:16px;line-height:1.5;text-wrap:balance}
@media(max-width:560px){ .sa-nota{font-size:10.5px;margin-top:11px;line-height:1.45;opacity:.9} }

/* --- Il player del sito (al posto di VTurb) --- */
.sa-pl{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;isolation:isolate}
.sa-pl__v{width:100%;height:100%;object-fit:contain;display:block;background:#000;cursor:pointer}

/* Velo iniziale: il video parte muto e questo invita ad accendere l'audio. */
.sa-pl__su{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(70% 70% at 50% 50%,rgba(4,6,12,.42),rgba(4,6,12,.82));
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  text-align:center;color:var(--testo);
  transition:opacity .35s ease,visibility .35s ease;
}
.sa-pl.is-audio .sa-pl__su{opacity:0;visibility:hidden;pointer-events:none}
.sa-pl__su-i{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(135deg,#9BE2FF,#55C8FF 45%,#2D7BFF);
  color:#02101F;
  box-shadow:0 14px 44px rgba(45,123,255,.45);
  animation:sa-pulsa-tondo 2.6s ease-in-out infinite;
}
.sa-pl__su-i svg{width:32px;height:32px}
@keyframes sa-pulsa-tondo{
  0%,100%{box-shadow:0 14px 44px rgba(45,123,255,.45),0 0 0 0 rgba(85,200,255,.45)}
  50%    {box-shadow:0 14px 44px rgba(45,123,255,.45),0 0 0 22px rgba(85,200,255,0)}
}
.sa-pl__su-t b{display:block;font-size:clamp(17px,2.4vw,22px);font-weight:600;letter-spacing:-.02em}
.sa-pl__su-t i{display:block;margin-top:5px;font-style:normal;font-size:14.5px;color:var(--soft-2)}

/* Comandi. Niente barra trascinabile: il video non si salta avanti. */
.sa-pl__cmd{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:26px 16px 12px;
  background:linear-gradient(180deg,rgba(4,6,12,0),rgba(4,6,12,.86));
  opacity:0;transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease;
}
.sa-pl.is-audio .sa-pl__cmd{opacity:1;transform:none}
.sa-pl.is-audio.is-quieta .sa-pl__cmd{opacity:0;transform:translateY(6px)}
.sa-pl__cmd button{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;color:var(--testo);
  transition:background .2s ease,color .2s ease;
}
.sa-pl__cmd button:hover{background:rgba(255,255,255,.10);color:var(--azzurro-2)}
.sa-pl__cmd svg{width:17px;height:17px}
.sa-pl__barra{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.sa-pl__barra i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#2D7BFF,#55C8FF 60%,#9BE2FF);
  transition:width .25s linear;
}
.sa-pl__ico-play,.sa-pl.is-pausa .sa-pl__ico-pausa{display:none}
.sa-pl.is-pausa .sa-pl__ico-play{display:block}
.sa-pl__ico-off,.sa-pl.is-muto .sa-pl__ico-on{display:none}
.sa-pl.is-muto .sa-pl__ico-off{display:block}

@media(max-width:560px){
  .sa-pl__su-i{width:62px;height:62px}
  .sa-pl__su-i svg{width:27px;height:27px}
  .sa-pl__cmd{gap:9px;padding:22px 12px 10px}
}

/* CTA sotto il video: puo' comparire dopo N secondi di visione. */
.sa-dopo{margin-top:30px}
.sa-dopo__riga{
  display:block;margin-top:14px;
  font-size:14.5px;color:var(--soft);
}
/* --- Il mazzo: schermate impilate come carte in mano, porta ai risultati --- */
.sa-mazzo{
  display:inline-flex;align-items:center;gap:20px;
  margin-top:44px;padding:16px 24px 16px 22px;
  border-radius:999px;background:var(--vetro);border:var(--linea);
  text-align:left;
  transition:background .28s ease,border-color .28s ease,transform .28s cubic-bezier(.2,.8,.3,1);
}
.sa-mazzo:hover{background:var(--vetro2);border-color:rgba(85,200,255,.42);transform:translateY(-3px)}

.sa-mazzo__carte{
  position:relative;flex:0 0 auto;
  width:150px;height:86px;
}
.sa-carta{
  position:absolute;top:0;left:50%;
  width:54px;height:74px;
  border-radius:8px;overflow:hidden;
  background:var(--nero-2);border:1px solid rgba(120,175,255,.28);
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  /* --i va da 0 a 4: le carte si aprono a ventaglio dal centro.
     Apertura e inclinazione sono variabili perche' sul telefono il ventaglio
     va stretto, altrimenti non ci sta il testo accanto. */
  --scarto:calc(var(--i) - 2);
  --apertura:15px;
  --inclina:7deg;
  transform:translateX(-50%) translateX(calc(var(--scarto) * var(--apertura))) rotate(calc(var(--scarto) * var(--inclina)));
  transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;
  z-index:calc(5 - var(--i));
}
/* Non il bordo alto, ma la fascia dove sta la curva: e quella che si riconosce. */
.sa-carta img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.sa-mazzo:hover .sa-carta{
  transform:translateX(-50%) translateX(calc(var(--scarto) * (var(--apertura) + 2px))) rotate(calc(var(--scarto) * (var(--inclina) + .5deg)));
  box-shadow:0 12px 26px rgba(0,0,0,.62);
}

.sa-mazzo__testo b{
  display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--testo);
}
.sa-mazzo__testo i{
  display:block;margin-top:3px;font-style:normal;font-size:13.5px;color:var(--soft);
}
.sa-mazzo__freccia{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(45,123,255,.18);border:1px solid rgba(85,200,255,.35);color:var(--azzurro);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.sa-mazzo:hover .sa-mazzo__freccia{transform:translateX(4px)}
.sa-mazzo__freccia svg{width:16px;height:16px}

@media(max-width:560px){
  .sa-mazzo{gap:11px;padding:12px 12px 12px 20px;margin-top:32px;width:100%;justify-content:center}
  /* Ventaglio stretto e carte piu' piccole: e' l'unico modo per tenere insieme
     il mazzo, il titolo su una riga, il sottotitolo su due e la freccia, anche
     sui 360px che e' la larghezza piu' comune fra gli Android. */
  .sa-mazzo__carte{width:102px;height:60px}
  .sa-carta{width:36px;height:50px;--apertura:11px;--inclina:6deg}
  .sa-mazzo__freccia{width:26px;height:26px}
  .sa-mazzo__freccia svg{width:14px;height:14px}
  .sa-mazzo__testo b{font-size:15px}
  .sa-mazzo__testo i{font-size:12px;text-wrap:balance}
}
@media(max-width:400px){
  .sa-mazzo__carte{width:82px}
  .sa-mazzo__testo b{font-size:14.5px}
}

@media(prefers-reduced-motion:reduce){
  .sa-mazzo:hover{transform:none}
  .sa-mazzo:hover .sa-carta{transform:translateX(-50%) translateX(calc(var(--scarto) * var(--apertura))) rotate(calc(var(--scarto) * var(--inclina)))}
}
.sa-dopo.is-attesa{
  opacity:0;visibility:hidden;max-height:0;margin-top:0;overflow:hidden;
  transition:opacity .5s ease,max-height .5s ease,margin-top .5s ease,visibility .5s ease;
}
.sa-dopo.is-attesa.is-ora{opacity:1;visibility:visible;max-height:260px;margin-top:30px}

/* ==========================================================================
   10 · ANIMAZIONI A SCHERMO
   --------------------------------------------------------------------------
   Le due classi le mette main.js (avviaVivo) sui blocchi .sa-anima:
   - is-visto: il blocco e' passato almeno una volta a schermo. Per le
     entrate, che si fanno una volta sola.
   - is-vivo: il blocco e' a schermo adesso. Per i giri continui, che cosi'
     si fermano appena escono e non consumano batteria sul telefono.

   Regola di tutte le scene: lo stato di riposo e' la scena gia' completa, e
   il fotogramma iniziale nascosto sta solo nelle animazioni. Il "prima
   dell'entrata" nascosto vale solo sotto .sa-js, che lo script in cima alla pagina mette solo
   se le animazioni sono permesse. Senza JavaScript, o con "riduci le
   animazioni" (regola globale in fondo), si vede tutto fermo e finito, mai
   un riquadro vuoto.
   ========================================================================== */
.sa-live{
  display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--azzurro);box-shadow:0 0 0 0 rgba(85,200,255,.55);
}
.is-vivo .sa-live{animation:sa-live 1.8s ease-out infinite}
@keyframes sa-live{
  0%  {box-shadow:0 0 0 0 rgba(85,200,255,.55)}
  100%{box-shadow:0 0 0 9px rgba(85,200,255,0)}
}

@keyframes sa-su{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sa-galleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Alone che segue il mouse sulle schede (main.js avviaAlone). Solo col mouse. */
.sa-luce{position:relative}
.sa-luce::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(85,200,255,.14),transparent 70%);
}
.sa-luce:hover::before{opacity:1}

/* ==========================================================================
   11 · NUMERI
   Tre riquadri in fila, anche sul telefono: tre e' un numero pari di righe
   (una sola), e affiancati si leggono come una cosa unica.
   ========================================================================== */
.sa-numeri{position:relative;padding:0 0 4px}
.sa-numeri__in{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.sa-numero{
  position:relative;overflow:hidden;text-align:center;
  padding:30px 16px 26px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(45,123,255,.13),rgba(4,6,12,0) 85%),var(--vetro);
  border:var(--linea);
}
/* Un riflesso che attraversa il riquadro una volta, quando entra. */
.sa-numero::after{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(155,226,255,.16),transparent);
  transform:skewX(-16deg);
}
.is-visto .sa-numero::after{animation:sa-riflesso 1.4s cubic-bezier(.3,.7,.3,1) calc(var(--k,0) * .18s + .3s) both}
@keyframes sa-riflesso{from{left:-70%}to{left:130%}}
.sa-numero b{
  display:block;font-size:clamp(38px,5.2vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(160deg,#FFFFFF,#9BE2FF 55%,#2D7BFF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.sa-numero span{
  display:block;margin-top:10px;font-size:13.5px;font-weight:500;color:var(--soft);
  text-wrap:balance;line-height:1.4;
}
@media(max-width:820px){
  .sa-numeri__in{padding:0 18px;gap:10px}
  .sa-numero{padding:20px 6px 18px;border-radius:14px}
  .sa-numero b{font-size:34px}
  .sa-numero span{font-size:11.5px;margin-top:7px}
}

/* ==========================================================================
   12 · LA DIVISIONE DEI COMPITI
   Due riquadri: "Tu" con le tre spunte, "Il sistema" con la console.
   Fra i due, un bottoncino con la freccia: a destra sullo schermo grande,
   in giu' sul telefono, dove i riquadri stanno uno sopra l'altro.
   ========================================================================== */
.sa-div{display:grid;gap:14px;align-items:stretch}
@media(min-width:900px){ .sa-div{grid-template-columns:1fr 56px 1fr;gap:0} }

.sa-div__box{
  position:relative;overflow:hidden;
  padding:30px 28px 26px;border-radius:24px;
  background:var(--vetro);border:var(--linea);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sa-div__box--sis{
  background:radial-gradient(120% 90% at 100% 0%,rgba(45,123,255,.24),rgba(4,6,12,0) 62%),var(--vetro);
  border-color:rgba(85,200,255,.32);
}
.sa-div__capo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.sa-div__chi{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.sa-div__quando{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:5px 11px;border-radius:999px;
  color:var(--azzurro-2);background:rgba(45,123,255,.14);border:1px solid rgba(85,200,255,.3);
}
.sa-div__box--tu .sa-div__quando{color:var(--soft-2);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}

.sa-div__lista{display:grid;gap:10px}
.sa-div__lista li{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;
  padding:14px 16px;border-radius:14px;text-align:left;
  background:rgba(140,185,255,.035);border:var(--linea);
}
.sa-spunta{
  grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(45,123,255,.22);border:1.5px solid rgba(85,200,255,.55);
}
.sa-spunta svg{
  width:16px;height:16px;fill:none;stroke:var(--azzurro-2);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0;
}
.sa-div__lista b{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.sa-div__lista i{font-style:normal;font-size:13.5px;color:var(--soft);line-height:1.35;text-wrap:balance}
.sa-div__fine{margin-top:18px;font-size:14.5px;color:var(--soft);text-align:center;text-wrap:balance}

/* Le tre spunte si disegnano una dopo l'altra, la prima volta che si vedono. */
.sa-js .sa-div__box--tu:not(.is-visto) .sa-spunta{background:transparent;border-color:rgba(120,175,255,.25)}
.sa-js .sa-div__box--tu:not(.is-visto) .sa-spunta svg{stroke-dashoffset:20}
.sa-div__box--tu.is-visto .sa-spunta{animation:sa-spunta-c .5s ease calc(var(--k) * .45s + .35s) both}
.sa-div__box--tu.is-visto .sa-spunta svg{animation:sa-spunta-s .4s ease calc(var(--k) * .45s + .55s) both}
@keyframes sa-spunta-c{
  from{background:transparent;border-color:rgba(120,175,255,.25);transform:scale(.8)}
  60% {transform:scale(1.12)}
  to  {transform:scale(1)}
}
@keyframes sa-spunta-s{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}

/* Il ponte fra i due riquadri: alto zero, il tondo sta in mezzo e scavalca. */
.sa-div__ponte{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.sa-div__ponte span{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--nero-2);border:1px solid rgba(85,200,255,.45);
  box-shadow:0 0 0 6px rgba(4,6,12,.7),0 0 26px rgba(45,123,255,.38);
}
.sa-div__ponte svg{
  width:20px;height:20px;fill:none;stroke:var(--azzurro);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
}
.is-vivo .sa-div__ponte svg{animation:sa-spinta 2.4s ease-in-out infinite}
@keyframes sa-spinta{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
@media(max-width:899px){
  .sa-div__ponte{height:0}
  .sa-div__ponte span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .sa-div__ponte svg{rotate:90deg}
}

/* La console del sistema. */
.sa-console{
  padding:14px;border-radius:16px;overflow:hidden;
  background:rgba(2,6,14,.55);border:1px solid rgba(85,200,255,.18);
}
.sa-console__onda{
  position:relative;height:104px;margin-bottom:12px;border-radius:10px;overflow:hidden;
  background:
    linear-gradient(rgba(110,175,255,.07) 1px,transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg,rgba(110,175,255,.05) 1px,transparent 1px) 0 0 / 52px 100%;
}
.sa-console__onda svg{width:100%;height:100%;display:block;overflow:hidden}
/* Sul telefono il disegno e' largo una volta e mezza il riquadro: si vedono
   una quindicina di candele invece di ventidue, e restano grandi. Il giro
   non cambia, quindi lo scorrimento resta senza scatti. */
@media(max-width:620px){ .sa-console__onda svg{width:150%} }
/* Le candele: il verde e il rosso del trading, solo qui e nel logo. Fuori dai
   grafici il sito resta azzurro e blu (CLAUDE.md, regola 4). */
.sa-cdl line{stroke-width:1.5;vector-effect:non-scaling-stroke}
.sa-cdl--su line{stroke:var(--candela-su)}
.sa-cdl--su rect{fill:var(--candela-su)}
.sa-cdl--giu line{stroke:var(--candela-giu)}
.sa-cdl--giu rect{fill:var(--candela-giu)}
.sa-cdl .sa-cdl__vol{opacity:.28}
.sa-console__media{
  fill:none;stroke:var(--azzurro-2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.8;
  vector-effect:non-scaling-stroke;
}
/* Un giro intero (330 unita', 22 candele): il secondo prende il posto del
   primo e il grafico scorre senza scatti. */
.is-vivo .sa-console__traccia{animation:sa-mercato 18s linear infinite}
@keyframes sa-mercato{to{transform:translateX(-330px)}}
.sa-console__punto{
  position:absolute;top:0;bottom:0;right:16%;width:2px;
  background:linear-gradient(180deg,transparent,rgba(155,226,255,.9),transparent);
  box-shadow:0 0 10px rgba(85,200,255,.8);
}
.sa-console__righe{display:grid;gap:6px}
.sa-console__righe li{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--soft-2);
  background:rgba(140,185,255,.03);border:1px solid transparent;
}
.sa-console__righe li i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#33445f}
/* Una riga accesa per volta, due secondi a testa, in giro continuo. */
.is-vivo .sa-console__righe li{animation:sa-turno 8s linear calc(var(--k) * 2s) infinite}
.is-vivo .sa-console__righe li i{animation:sa-turno-i 8s linear calc(var(--k) * 2s) infinite}
@keyframes sa-turno{
  0%,26%,100%{color:var(--soft-2);background:rgba(140,185,255,.03);border-color:transparent}
  3%,23%     {color:#fff;background:rgba(45,123,255,.16);border-color:rgba(85,200,255,.32)}
}
@keyframes sa-turno-i{
  0%,26%,100%{background:#33445f;box-shadow:none}
  3%,23%     {background:var(--azzurro);box-shadow:0 0 10px rgba(85,200,255,.9)}
}
.sa-console__stato{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;
  font-size:13px;font-weight:600;color:var(--azzurro-2);letter-spacing:.02em;
}

@media(max-width:820px){
  .sa-div__box{padding:22px 16px 20px;border-radius:20px}
  .sa-div__capo{flex-direction:column;gap:8px;margin-bottom:16px}
  .sa-div__chi{font-size:22px}
  .sa-div__lista li{padding:12px 14px}
  .sa-div__lista b{font-size:15.5px}
  .sa-div__lista i{font-size:13px}
  .sa-console{padding:12px}
  .sa-console__righe li{font-size:14px;padding:8px 11px}
}

/* ==========================================================================
   13 · COME FUNZIONA (il meccanismo)
   Tre nodi collegati da un filo su cui viaggiano dei punti: le operazioni
   che passano dal sistema alla piattaforma e da li' al conto.
   ========================================================================== */
.sa-flusso{display:grid;align-items:stretch}
@media(min-width:900px){ .sa-flusso{grid-template-columns:1fr 84px 1fr 84px 1fr} }

.sa-nodo{
  position:relative;text-align:center;
  padding:32px 22px 26px;border-radius:var(--r);
  background:var(--vetro);border:var(--linea);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sa-nodo--tuo{
  background:radial-gradient(110% 90% at 50% 0%,rgba(45,123,255,.22),rgba(4,6,12,0) 64%),var(--vetro);
  border-color:rgba(85,200,255,.34);
}
.sa-nodo__n{
  position:absolute;top:14px;left:16px;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--tenue);font-variant-numeric:tabular-nums;
}
.sa-nodo__i{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:18px;margin-bottom:16px;
  background:rgba(45,123,255,.15);border:1px solid rgba(85,200,255,.38);
}
.sa-nodo__i svg{width:28px;height:28px;fill:none;stroke:var(--azzurro);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sa-nodo__i::after{
  content:'';position:absolute;inset:-7px;border-radius:22px;border:1px solid rgba(85,200,255,.35);opacity:0;
}
.is-vivo .sa-nodo__i::after{animation:sa-eco 2.4s ease-out calc(var(--k) * .8s) infinite both}
@keyframes sa-eco{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.sa-nodo h3{margin-bottom:8px}
.sa-nodo p{color:var(--soft);font-size:15px;text-wrap:balance}

.sa-nodo__op{display:grid;gap:6px;margin-top:16px}
.sa-nodo__op li{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:10px;
  font-size:13px;font-weight:500;color:var(--soft-2);
  background:rgba(2,6,14,.5);border:1px solid rgba(85,200,255,.16);
}
.sa-nodo__op svg{width:14px;height:14px;fill:none;stroke:var(--azzurro);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.is-vivo .sa-nodo__op li{animation:sa-esegue 6s ease calc(var(--k) * .9s) infinite both}
@keyframes sa-esegue{
  0%      {opacity:0;transform:translateY(8px)}
  8%,78%  {opacity:1;transform:none}
  90%,100%{opacity:0;transform:translateY(-4px)}
}

/* Il sistema: l'operazione nuova. */
.sa-nodo__nuova{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:9px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--azzurro-2);
  background:rgba(45,123,255,.14);border:1px solid rgba(85,200,255,.32);
}
/* La piattaforma: tre conti che ricevono l'operazione, uno dopo l'altro. */
.sa-nodo__conti{display:flex;justify-content:center;gap:10px;margin-top:16px}
.sa-nodo__conti span{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:rgba(2,6,14,.5);border:1px solid rgba(85,200,255,.22);
}
.sa-nodo__conti svg{width:19px;height:19px;fill:none;stroke:var(--azzurro);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-vivo .sa-nodo__conti span{animation:sa-ricevi 2.4s ease calc(var(--k) * .3s + .4s) infinite both}
@keyframes sa-ricevi{
  0%,100%{background:rgba(2,6,14,.5);border-color:rgba(85,200,255,.22);box-shadow:none}
  18%,40%{background:rgba(45,123,255,.24);border-color:rgba(85,200,255,.7);box-shadow:0 0 14px rgba(85,200,255,.45)}
}

/* Il filo. In orizzontale fra i nodi sullo schermo grande. */
.sa-filo{position:relative;min-height:20px}
.sa-filo::before{
  content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(85,200,255,.45) 0 6px,transparent 6px 12px);
}
.sa-filo i{
  position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--azzurro-2);box-shadow:0 0 10px rgba(85,200,255,.95);opacity:0;
}
.is-vivo .sa-filo i{animation:sa-viaggio-x 2.4s cubic-bezier(.45,0,.55,1) infinite both}
.is-vivo .sa-filo i:nth-child(2){animation-delay:.8s}
.is-vivo .sa-filo i:nth-child(3){animation-delay:1.6s}
@keyframes sa-viaggio-x{
  0%  {left:0;opacity:0}
  15% {opacity:1}
  85% {opacity:1}
  100%{left:calc(100% - 8px);opacity:0}
}
/* In verticale sul telefono, dove i nodi stanno uno sotto l'altro. */
@media(max-width:899px){
  .sa-filo{height:56px}
  .sa-filo::before{
    left:50%;right:auto;top:4px;bottom:4px;width:2px;height:auto;transform:translateX(-50%);
    background:repeating-linear-gradient(180deg,rgba(85,200,255,.45) 0 6px,transparent 6px 12px);
  }
  .sa-filo i{left:50%;top:0;margin:0 0 0 -4px}
  .is-vivo .sa-filo i{animation-name:sa-viaggio-y}
}
@keyframes sa-viaggio-y{
  0%  {top:0;opacity:0}
  15% {opacity:1}
  85% {opacity:1}
  100%{top:calc(100% - 8px);opacity:0}
}

.sa-flusso__nota{
  max-width:620px;margin:28px auto 0;text-align:center;
  font-size:15px;color:var(--soft);text-wrap:balance;
}

@media(max-width:820px){
  .sa-nodo{padding:26px 18px 22px}
  .sa-nodo__i{width:54px;height:54px;border-radius:16px;margin-bottom:12px}
  .sa-nodo__i svg{width:25px;height:25px}
  .sa-nodo p{font-size:14.5px}
  .sa-flusso__nota{font-size:14px;margin-top:22px}
}

/* ==========================================================================
   14 · MARQUEE
   ========================================================================== */
.sa-scorre{
  overflow:hidden;padding:15px 0;
  border-top:1px solid rgba(120,175,255,.10);
  border-bottom:1px solid rgba(120,175,255,.10);
  background:rgba(140,185,255,.022);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.sa-scorre__pista{display:flex;width:max-content;animation:sa-corri 38s linear infinite}
.sa-scorre__pista li{
  display:flex;align-items:center;gap:20px;padding-right:20px;
  font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6D7F9E;
  white-space:nowrap;
}
.sa-scorre__pista li::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--azzurro);opacity:.75}
@keyframes sa-corri{to{transform:translateX(-50%)}}
.sa-scorre:hover .sa-scorre__pista{animation-play-state:paused}

/* ==========================================================================
   15 · UNA GIORNATA QUALSIASI
   Sullo schermo grande: "Tu" a sinistra, l'ora sul binario in mezzo, "Il
   sistema" a destra. Sul telefono ogni ora e' una scheda, con l'ora appesa
   sul bordo alto e "Tu" e "Il sistema" affiancati dentro, meta' per uno.
   Il binario si riempie scorrendo (--p, main.js avviaBinario); senza
   JavaScript vale 1, cioe' pieno.
   ========================================================================== */
.sa-gio{position:relative;max-width:920px;margin:0 auto;--p:1}
.sa-gio__linea{
  position:absolute;left:50%;top:10px;bottom:10px;width:2px;transform:translateX(-50%);
  border-radius:2px;background:rgba(120,175,255,.14);
}
.sa-gio__linea i{
  position:absolute;left:0;top:0;width:100%;height:calc(var(--p) * 100%);border-radius:2px;
  background:linear-gradient(180deg,#9BE2FF,#55C8FF 50%,#2D7BFF);
  box-shadow:0 0 14px rgba(85,200,255,.65);
}
.sa-gio__ora{
  position:relative;display:grid;grid-template-columns:1fr 132px 1fr;align-items:center;
  padding:14px 0;
}
.sa-gio__t{
  grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--nero-2);border:1px solid rgba(85,200,255,.4);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--testo);
  box-shadow:0 0 0 6px var(--nero);
}
.sa-gio__t svg{width:16px;height:16px;fill:none;stroke:var(--azzurro-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sa-gio__tu,.sa-gio__sis{padding:16px 20px;border-radius:16px;background:var(--vetro);border:var(--linea)}
.sa-gio__tu{grid-column:1;grid-row:1;text-align:right}
.sa-gio__sis{
  grid-column:3;grid-row:1;
  background:linear-gradient(135deg,rgba(45,123,255,.16),rgba(4,6,12,0) 70%),var(--vetro);
  border-color:rgba(85,200,255,.28);
}
.sa-gio__ora small{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:4px;
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
}
.sa-gio__sis small{color:var(--azzurro-2)}
.sa-gio__ora p{font-size:16px;font-weight:500;color:var(--soft-2);line-height:1.35}
.sa-gio__sis p{color:var(--testo)}

/* Le ore che la linea non ha ancora raggiunto restano spente. Si spengono i
   figli e non la scheda: la scheda ha gia' la sua comparsa (.sa-rev), e due
   regole sull'opacita' dello stesso elemento si pesterebbero i piedi. */
.sa-js .sa-gio__ora > *{transition:opacity .5s ease,border-color .5s ease,box-shadow .5s ease}
.sa-js .sa-gio__ora:not(.is-acceso) > *{opacity:.4}
.sa-gio__ora.is-acceso .sa-gio__t{border-color:var(--azzurro);box-shadow:0 0 0 6px var(--nero),0 0 18px rgba(85,200,255,.45)}

.sa-gio__fine{margin-top:22px;text-align:center;font-size:15px;color:var(--soft)}

@media(max-width:820px){
  .sa-gio__linea{top:0;bottom:0}
  .sa-gio__ora{
    grid-template-columns:1fr 1fr;align-items:start;
    margin-bottom:34px;padding:30px 0 14px;border-radius:18px;
    background:rgba(7,11,20,.94);border:var(--linea);text-align:center;
  }
  .sa-gio__ora:last-child{margin-bottom:0}
  .sa-gio__t{
    position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
    grid-column:auto;grid-row:auto;font-size:13.5px;padding:7px 13px;
  }
  .sa-gio__tu,.sa-gio__sis{grid-row:1;padding:2px 12px;border:0;border-radius:0;background:none;text-align:center}
  .sa-gio__tu{grid-column:1;border-right:1px solid rgba(120,175,255,.12)}
  .sa-gio__sis{grid-column:2}
  .sa-gio__ora small{justify-content:center;font-size:10.5px;margin-bottom:5px}
  .sa-gio__ora p{font-size:14.5px;line-height:1.35;text-wrap:balance}
  .sa-gio__fine{font-size:14px;margin-top:20px}
}

/* ==========================================================================
   16 · IL CONTROLLO RESTA TUO
   Quattro schede: quattro in fila sullo schermo grande, due a due sotto i
   1000px. Ogni scheda ha la sua scena, disegnata in CSS.
   ========================================================================== */
.sa-ctrl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){ .sa-ctrl{grid-template-columns:repeat(2,1fr)} }

.sa-cc{
  overflow:hidden;text-align:center;
  padding:28px 20px 26px;border-radius:var(--r);
  background:var(--vetro);border:var(--linea);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s ease,background .35s ease;
}
/* Le schede sono anche .sa-rev: la comparsa (sezione 24) viene dopo e a pari peso
   vincerebbe su transform e transition. Qui serve un selettore piu' pesante. */
.sa-cc.sa-rev{transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s ease,background .35s ease}
.sa-cc.sa-rev:hover{transform:translateY(-4px);border-color:rgba(85,200,255,.4);background:var(--vetro2)}
.sa-cc__scena{height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sa-cc__t{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-bottom:7px;text-wrap:balance}
.sa-cc p{font-size:14.5px;color:var(--soft);line-height:1.5;text-wrap:balance}

/* --- Scena 1: lo scudo si disegna, poi respira. --- */
.sa-scudo{width:64px;height:64px;overflow:visible}
.sa-scudo__forma{
  fill:rgba(45,123,255,.16);stroke:var(--azzurro);stroke-width:2.2;stroke-linejoin:round;
  stroke-dasharray:160;stroke-dashoffset:0;
}
.sa-scudo__spunta{
  fill:none;stroke:var(--azzurro-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:0;
}
.sa-js .sa-ctrl:not(.is-visto) .sa-scudo__forma{stroke-dashoffset:160;fill:rgba(45,123,255,0)}
.sa-js .sa-ctrl:not(.is-visto) .sa-scudo__spunta{stroke-dashoffset:30}
.sa-ctrl.is-visto .sa-scudo__forma{animation:sa-scudo-f 1.1s ease .35s both}
.sa-ctrl.is-visto .sa-scudo__spunta{animation:sa-scudo-s .45s ease 1.25s both}
@keyframes sa-scudo-f{from{stroke-dashoffset:160;fill:rgba(45,123,255,0)}70%{fill:rgba(45,123,255,0)}to{stroke-dashoffset:0;fill:rgba(45,123,255,.16)}}
@keyframes sa-scudo-s{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
.is-vivo .sa-scudo{animation:sa-respiro 3.2s ease-in-out 1.8s infinite}
@keyframes sa-respiro{0%,100%{filter:drop-shadow(0 0 0 rgba(85,200,255,0))}50%{filter:drop-shadow(0 0 10px rgba(85,200,255,.65))}}

/* --- Scena 2: l'interruttore si accende e si spegne da solo. --- */
.sa-int{
  position:relative;display:block;width:64px;height:34px;border-radius:999px;
  background:rgba(45,123,255,.35);border:1px solid rgba(85,200,255,.55);
  box-shadow:inset 0 0 12px rgba(85,200,255,.25);
}
.sa-int i{
  position:absolute;top:3px;left:33px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#FFFFFF,#9BE2FF);box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.is-vivo .sa-int{animation:sa-int-p 4.4s ease-in-out infinite}
.is-vivo .sa-int i{animation:sa-int-i 4.4s ease-in-out infinite}
@keyframes sa-int-i{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(-30px)}100%{transform:translateX(0)}}
@keyframes sa-int-p{
  0%,40%,100%{background:rgba(45,123,255,.35);border-color:rgba(85,200,255,.55)}
  50%,90%    {background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
}

/* --- Scena 3: il telefono con le operazioni che arrivano. --- */
.sa-tel{
  position:relative;display:block;width:42px;height:70px;padding:10px 7px;border-radius:10px;
  border:2px solid var(--azzurro);background:rgba(2,6,14,.6);
  box-shadow:0 0 16px rgba(45,123,255,.3);
}
.sa-tel__riga{display:block;height:6px;margin-bottom:6px;border-radius:3px;background:rgba(85,200,255,.6)}
.sa-tel__riga:nth-child(2){width:72%}
.sa-tel__riga:nth-child(3){width:88%}
.sa-tel__tasto{position:absolute;bottom:5px;left:50%;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:rgba(155,226,255,.6)}
.is-vivo .sa-tel__riga{animation:sa-riga 3.6s ease infinite both}
.is-vivo .sa-tel__riga:nth-child(2){animation-delay:.35s}
.is-vivo .sa-tel__riga:nth-child(3){animation-delay:.7s}
@keyframes sa-riga{
  0%      {opacity:0;transform:translateX(-6px)}
  12%,80% {opacity:1;transform:none}
  92%,100%{opacity:0;transform:none}
}

/* --- Scena 4: la leva va da tranquillo a deciso e torna. --- */
.sa-leva{display:flex;flex-direction:column;align-items:center;gap:10px;width:86px}
.sa-leva__barre{display:flex;align-items:flex-end;gap:5px;height:34px}
.sa-leva__barre i{width:8px;border-radius:3px;background:rgba(85,200,255,.65)}
.sa-leva__barre i:nth-child(1){height:30%}
.sa-leva__barre i:nth-child(2){height:46%}
.sa-leva__barre i:nth-child(3){height:62%}
.sa-leva__barre i:nth-child(4){height:78%}
.sa-leva__barre i:nth-child(5){height:94%}
.sa-leva__pista{position:relative;display:block;width:80px;height:6px;border-radius:999px;background:rgba(255,255,255,.1)}
.sa-leva__pista i{
  position:absolute;top:50%;left:30%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:linear-gradient(135deg,#FFFFFF,#9BE2FF);box-shadow:0 0 0 4px rgba(45,123,255,.3);
}
.is-vivo .sa-leva__pista i{animation:sa-leva 5s ease-in-out infinite}
.is-vivo .sa-leva__barre i:nth-child(n+4){animation:sa-barre 5s ease-in-out infinite}
@keyframes sa-leva{0%,35%{transform:translateX(0)}50%,85%{transform:translateX(34px)}100%{transform:translateX(0)}}
@keyframes sa-barre{0%,35%{opacity:.22}50%,85%{opacity:1}100%{opacity:.22}}

@media(max-width:820px){
  .sa-ctrl{gap:12px}
  .sa-cc{padding:20px 12px 18px;border-radius:16px}
  .sa-cc__scena{height:62px;margin-bottom:12px}
  .sa-cc__scena > *{transform:scale(.82)}
  .sa-cc__t{font-size:15px}
  .sa-cc p{font-size:13px;line-height:1.45}
}

/* ==========================================================================
   17 · PATTO
   ========================================================================== */
.sa-patto{
  position:relative;text-align:center;overflow:hidden;
  border-radius:24px;padding:clamp(40px,6vw,76px) clamp(20px,5vw,60px);
  background:
    radial-gradient(110% 130% at 50% 0%,rgba(45,123,255,.24),rgba(4,6,12,0) 62%),
    var(--vetro);
  border:var(--linea);
}
.sa-patto::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(110,175,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,175,255,.06) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 72%);
}
.sa-patto__q{
  position:relative;
  font-size:clamp(28px,5vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.035em;
  text-wrap:balance;
}
.sa-patto__k{
  position:relative;display:block;margin-top:20px;
  font-size:clamp(15px,2.2vw,18px);font-weight:500;color:var(--azzurro);
}
/* I due esiti affiancati, anche sul telefono: sono la stessa frase in due. */
.sa-patto__casi{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px;margin:32px auto 0}
.sa-caso{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 18px;border-radius:16px;text-align:center;
  background:rgba(2,6,14,.45);border:var(--linea);
}
.sa-caso p{font-size:15.5px;font-weight:500;color:var(--soft-2);line-height:1.45;text-wrap:balance}
.sa-caso__spia{width:14px;height:14px;border-radius:50%}
.sa-caso--si{border-color:rgba(85,200,255,.34)}
.sa-caso--si .sa-caso__spia{background:var(--azzurro);box-shadow:0 0 14px rgba(85,200,255,.9)}
.sa-caso--no .sa-caso__spia{background:#2A3850;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.is-vivo .sa-caso--si .sa-caso__spia{animation:sa-spia 2.2s ease-in-out infinite}
@keyframes sa-spia{
  0%,100%{box-shadow:0 0 6px rgba(85,200,255,.6)}
  50%    {box-shadow:0 0 18px rgba(85,200,255,1),0 0 0 6px rgba(85,200,255,.12)}
}
@media(max-width:560px){
  .sa-patto__casi{gap:10px;margin-top:24px}
  .sa-caso{padding:16px 12px;gap:10px}
  .sa-caso p{font-size:13.5px}
}

/* ==========================================================================
   18 · FA PER TE / NON FA PER TE
   Titoli centrati sul telefono, voci a sinistra: sono testi da leggere.
   ========================================================================== */
.sa-pc{display:grid;gap:18px}
@media(min-width:880px){ .sa-pc{grid-template-columns:1fr 1fr;gap:22px} }

.sa-col{padding:32px 28px;border-radius:var(--r);background:var(--vetro);border:var(--linea)}
.sa-col--si{
  background:linear-gradient(170deg,rgba(45,123,255,.16),rgba(4,6,12,0) 62%),var(--vetro);
  border-color:rgba(85,200,255,.30);
}
.sa-col__t{
  display:flex;align-items:center;gap:11px;
  font-size:17.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px;
}
.sa-col__t i{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;font-style:normal;
}
.sa-col--si .sa-col__t i{background:rgba(45,123,255,.22);border:1px solid rgba(85,200,255,.45)}
.sa-col--no .sa-col__t i{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.sa-col__t svg{width:16px;height:16px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sa-col--si .sa-col__t svg{stroke:var(--azzurro)}
.sa-col--no .sa-col__t svg{stroke:#7E90B0}

.sa-col ul{display:grid;gap:13px}
.sa-col li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--soft-2);line-height:1.5;text-wrap:pretty}
.sa-col li::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-top:9px}
.sa-col--si li::before{background:var(--azzurro);box-shadow:0 0 8px rgba(85,200,255,.7)}
.sa-col--no li::before{background:#4A5872}
.sa-col--no li{color:var(--soft)}
/* Le voci entrano una dopo l'altra. */
.sa-js .sa-col:not(.is-visto) li{opacity:0}
.sa-col.is-visto li{animation:sa-su .55s cubic-bezier(.2,.8,.3,1) calc(var(--k) * .12s + .25s) both}
@media(max-width:820px){
  .sa-col{padding:24px 18px}
  .sa-col__t{justify-content:center}
  .sa-col li{font-size:15px}
}

/* ==========================================================================
   19 · CHI
   ========================================================================== */
.sa-chi{
  display:grid;gap:32px;align-items:center;
  padding:clamp(28px,5vw,56px);border-radius:24px;
  background:radial-gradient(80% 120% at 0% 0%,rgba(45,123,255,.20),rgba(4,6,12,0) 60%),var(--vetro);
  border:var(--linea);
}
@media(min-width:900px){ .sa-chi{grid-template-columns:240px 1fr;gap:52px} }
.sa-chi__foto{
  position:relative;width:196px;height:196px;margin:0 auto;border-radius:50%;
  background:linear-gradient(150deg,var(--azzurro-2),var(--blu) 60%,var(--azzurro));
  padding:3px;
}
.sa-chi__foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--nero-2)}
.sa-chi__foto::after{
  content:'';position:absolute;inset:-11px;border-radius:50%;
  border:1px dashed rgba(85,200,255,.35);animation:sa-gira 20s linear infinite;
}
@keyframes sa-gira{to{transform:rotate(360deg)}}
.sa-chi h2{font-size:clamp(26px,4vw,40px);font-weight:500;letter-spacing:-.032em;margin-bottom:16px}
.sa-chi p{color:var(--soft-2);font-size:16.5px;margin-bottom:14px;text-wrap:pretty}
.sa-chi p:last-child{margin-bottom:0}
.sa-chi p b{color:var(--testo);font-weight:600}
.sa-firma{color:var(--azzurro);font-weight:600}
@media(max-width:900px){ .sa-chi{text-align:center} .sa-chi .sa-occhiello{justify-content:center} .sa-chi p{text-align:left} }
@media(max-width:560px){ .sa-chi__foto{width:160px;height:160px} .sa-chi p{font-size:15.5px} }

/* ==========================================================================
   20 · FAQ
   Domande a sinistra anche sul telefono: sono testi lunghi.
   ========================================================================== */
.sa-faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.sa-q{
  border-radius:var(--r-s);border:var(--linea);background:var(--vetro);
  overflow:hidden;transition:border-color .3s ease,background .3s ease;
}
.sa-q.is-ap{border-color:rgba(85,200,255,.36);background:var(--vetro2)}
.sa-q__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;font-size:16.5px;font-weight:500;letter-spacing:-.015em;line-height:1.4;
}
.sa-q__b:hover{color:var(--azzurro-2)}
.sa-q__i{flex:0 0 auto;position:relative;width:20px;height:20px}
.sa-q__i::before,.sa-q__i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--azzurro);
  transform:translate(-50%,-50%);border-radius:2px;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.sa-q__i::before{width:14px;height:2px}
.sa-q__i::after{width:2px;height:14px}
.sa-q.is-ap .sa-q__i::after{transform:translate(-50%,-50%) rotate(90deg)}
.sa-q__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.3,1)}
.sa-q.is-ap .sa-q__r{grid-template-rows:1fr}
.sa-q__r>div{overflow:hidden}
.sa-q__r p{padding:0 22px 22px;font-size:15.5px;color:var(--soft);line-height:1.6;text-wrap:pretty}
.sa-q__r p b{color:var(--soft-2);font-weight:600}
@media(max-width:560px){ .sa-q__b{padding:18px 18px;font-size:15.5px} .sa-q__r p{padding:0 18px 20px;font-size:15px} }

/* ==========================================================================
   21 · CHIUSURA
   Sullo schermo grande: testo e bottone a sinistra, la chat a destra.
   Sul telefono, tutto centrato: titolo, chat, i tre tempi, bottone.
   ========================================================================== */
.sa-cta{text-align:center}
.sa-cta__box{
  position:relative;overflow:hidden;
  padding:clamp(34px,6vw,72px) clamp(18px,5vw,56px);border-radius:24px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(45,123,255,.28),rgba(4,6,12,.15) 58%),var(--vetro);
  border:1px solid rgba(85,200,255,.26);
}
.sa-cta__box::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(110,175,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,175,255,.06) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 80% 75% at 50% 0%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 0%,#000,transparent 74%);
}
.sa-cta__grid{position:relative;display:grid;gap:26px;align-items:center}
.sa-cta__testo .sa-h2{margin-bottom:14px}
.sa-cta__testo>p{color:var(--soft);max-width:540px;margin:0 auto;font-size:17px;text-wrap:pretty}
@media(min-width:900px){
  .sa-cta__grid{
    grid-template-columns:1.1fr .9fr;grid-template-areas:"testo chat" "azione chat";
    column-gap:56px;row-gap:28px;text-align:left;
  }
  .sa-cta__testo{grid-area:testo;align-self:end}
  .sa-chat{grid-area:chat}
  .sa-cta__azione{grid-area:azione;align-self:start}
  .sa-cta__testo>p{margin:0}
  .sa-consenso{margin-left:0;margin-right:0}
}

/* I tre tempi dopo il clic. */
.sa-tempi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.sa-tempi li{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:13px 8px;border-radius:14px;text-align:center;
  font-size:13.5px;font-weight:500;color:var(--soft-2);line-height:1.3;
  background:rgba(2,6,14,.42);border:var(--linea);
}
.sa-tempi span{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  font-size:13px;font-weight:700;color:#02101F;
  background:linear-gradient(135deg,#9BE2FF,#55C8FF 45%,#2D7BFF);
}

/* La chat disegnata. */
.sa-chat{
  width:100%;max-width:340px;margin:0 auto;overflow:hidden;text-align:left;
  border-radius:24px;background:#0B1220;border:1px solid rgba(85,200,255,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(45,123,255,.18);
}
.sa-chat__capo{
  display:flex;align-items:center;gap:11px;padding:12px 14px;
  background:rgba(140,185,255,.06);border-bottom:1px solid rgba(120,175,255,.12);
}
.sa-chat__capo img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.sa-chat__capo b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.sa-chat__capo i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:12px;color:var(--azzurro-2)}
.sa-chat__capo .sa-live{width:7px;height:7px}
/* Anello piu' corto del solito: quello normale arrivava a toccare la foto. */
.is-vivo .sa-chat__capo .sa-live{animation:sa-live-p 1.8s ease-out infinite}
@keyframes sa-live-p{0%{box-shadow:0 0 0 0 rgba(85,200,255,.6)}100%{box-shadow:0 0 0 4px rgba(85,200,255,0)}}
.sa-chat__corpo{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:16px 14px 18px;min-height:236px;
  background:radial-gradient(90% 70% at 50% 100%,rgba(45,123,255,.10),transparent 70%);
}
.sa-bolla{
  max-width:88%;padding:10px 13px;border-radius:16px 16px 16px 5px;text-wrap:pretty;
  background:#17233A;border:1px solid rgba(120,175,255,.12);
  font-size:14px;line-height:1.45;color:var(--soft-2);
}
.sa-bolla--file{display:flex;align-items:center;gap:10px}
.sa-bolla__doc{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#55C8FF,#2D7BFF);
}
.sa-bolla__doc svg{width:20px;height:20px;fill:none;stroke:#02101F;stroke-width:2;stroke-linejoin:round}
.sa-bolla--file b{display:block;font-size:14px;color:var(--testo)}
.sa-bolla--file small{display:block;font-size:11.5px;color:var(--soft)}
/* Il bottone sotto il benvenuto e le due risposte: i tasti di Telegram. */
.sa-chat__tasto,.sa-chat__scelte span{
  display:block;padding:9px 12px;border-radius:12px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--azzurro-2);
  background:rgba(85,200,255,.12);border:1px solid rgba(85,200,255,.28);
}
.sa-chat__tasto{width:78%;margin-top:-2px}
.sa-chat__scelte{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.sa-chat__scelte span{display:flex;align-items:center;justify-content:center;padding:8px 6px;font-size:12.5px;line-height:1.3;text-wrap:balance}
/* Arrivano una cosa alla volta, la prima volta che la chat si vede. */
.sa-js .sa-chat:not(.is-visto) .sa-bolla,
.sa-js .sa-chat:not(.is-visto) .sa-chat__tasto,
.sa-js .sa-chat:not(.is-visto) .sa-chat__scelte{opacity:0}
.sa-chat.is-visto .sa-bolla,
.sa-chat.is-visto .sa-chat__tasto,
.sa-chat.is-visto .sa-chat__scelte{animation:sa-bolla .5s cubic-bezier(.2,.8,.3,1) calc(var(--k) * .8s + .4s) both}
/* Il tasto della guida pulsa piano finche' la chat e' a schermo. */
.is-vivo .sa-chat__tasto{box-shadow:0 0 0 0 rgba(85,200,255,.4)}
.sa-chat.is-vivo.is-visto .sa-chat__tasto{animation:sa-bolla .5s cubic-bezier(.2,.8,.3,1) 1.2s both,sa-richiamo 2.4s ease-out 2s infinite}
@keyframes sa-richiamo{0%{box-shadow:0 0 0 0 rgba(85,200,255,.4)}100%{box-shadow:0 0 0 8px rgba(85,200,255,0)}}
@keyframes sa-bolla{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

.sa-consenso{display:block;margin:18px auto 0;font-size:11px;line-height:1.5;color:var(--tenue);max-width:420px}
.sa-consenso a{color:#93A6C4;text-decoration:underline}
@media(max-width:899px){
  .sa-cta__azione .sa-btn{width:100%}
}
@media(max-width:560px){
  .sa-cta__testo>p{font-size:15.5px}
  .sa-tempi{gap:8px;margin-bottom:20px}
  .sa-tempi li{font-size:12px;padding:11px 6px}
  .sa-chat{max-width:300px}
  .sa-chat__corpo{min-height:214px}
  .sa-bolla{font-size:13.5px}
  .sa-consenso{font-size:10.5px;margin-top:15px}
}

/* ==========================================================================
   22 · DISCLAIMER + FOOTER
   ========================================================================== */
/* Il disclaimer sta in fondo al footer, sotto ogni altra cosa: e' scritta
   piccola di servizio, non un blocco che si mangia una schermata. */
.sa-disc{
  max-width:840px;margin:32px auto 0;padding-top:26px;
  border-top:1px solid rgba(120,175,255,.10);
  text-align:center;font-size:12.4px;line-height:1.7;color:var(--tenue);
}

.sa-foot{
  background:rgba(2,4,9,.6);padding:52px 0 44px;text-align:center;
  border-top:1px solid rgba(120,175,255,.08);
}
.sa-foot__marchio{
  display:inline-block;margin:0 auto 24px;position:relative;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.sa-foot__marchio:hover{transform:translateY(-3px)}
.sa-foot__logo{height:auto;width:120px;opacity:.98;display:block}
@media(max-width:820px){ .sa-foot__logo{width:96px} .sa-foot__marchio{margin-bottom:20px} }
.sa-social{display:flex;justify-content:center;gap:11px;margin-bottom:24px;flex-wrap:wrap}
.sa-social a{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--vetro);border:var(--linea);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),background .25s ease,border-color .25s ease;
}
.sa-social a:hover{transform:translateY(-3px);background:rgba(45,123,255,.16);border-color:rgba(85,200,255,.45)}
.sa-social svg{width:19px;height:19px;fill:#A6B7D4}
.sa-social a:hover svg{fill:#fff}
.sa-foot p{font-size:13px;color:var(--tenue);margin-bottom:7px}
.sa-foot nav{display:flex;justify-content:center;gap:9px;font-size:12.5px;color:#5A6B87;margin-top:12px}
.sa-foot nav a{color:#8195B4}
.sa-foot nav a:hover{color:#fff}

/* ==========================================================================
   22-bis · IL LOGO SI TOCCA
   Riporta in cima, e quando lo premi lo fa vedere: una schiacciata con rimbalzo
   piu' un anello azzurro che si allarga e svanisce.
   ========================================================================== */
.sa-tocca{cursor:pointer;-webkit-tap-highlight-color:transparent}
.sa-tocca:active{transform:scale(.94)}

.sa-tocca.is-toc{animation:sa-tocco .46s cubic-bezier(.2,.8,.3,1)}
@keyframes sa-tocco{
  0%  {transform:scale(1)    rotate(0)}
  26% {transform:scale(.86)  rotate(-5deg)}
  58% {transform:scale(1.09) rotate(4deg)}
  80% {transform:scale(.98)  rotate(-1deg)}
  100%{transform:scale(1)    rotate(0)}
}

/* L'anello. Vive solo mentre l'animazione e' in corso. */
.sa-tocca::after{content:none}
.sa-tocca.is-toc::after{
  content:'';position:absolute;left:50%;top:50%;
  width:60%;padding-bottom:60%;transform:translate(-50%,-50%) scale(.4);
  border-radius:50%;border:2px solid var(--azzurro);
  opacity:.85;pointer-events:none;
  animation:sa-anello .62s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes sa-anello{
  to{transform:translate(-50%,-50%) scale(1.9);opacity:0;border-width:1px}
}

.sa-marca{position:relative}

@media(prefers-reduced-motion:reduce){
  .sa-tocca.is-toc,.sa-tocca.is-toc::after{animation:none}
  .sa-tocca.is-toc::after{content:none}
}

/* ==========================================================================
   23 · BARRA FISSA MOBILE
   ========================================================================== */
.sa-fissa{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,6,12,0),rgba(4,6,12,.94) 34%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transform:translateY(130%);transition:transform .4s cubic-bezier(.2,.8,.3,1);
  display:none;
}
.sa-fissa .sa-btn{width:100%}
.sa-fissa.is-on{transform:translateY(0)}
@media(max-width:820px){ .sa-fissa{display:block} }
/* Spazio sotto il footer per la barra fissa: senza, copriva le ultime righe
   del disclaimer, che e' proprio la cosa che non si deve nascondere. */
@media(max-width:820px){ .home .sa-foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))} }

/* ==========================================================================
   23b · AVVISO SUI COOKIE
   --------------------------------------------------------------------------
   Piccolo e in basso, sale da sotto. I due tasti sono della stessa misura di
   proposito: il rifiuto non e' un link grigio in un angolo, perche' una scelta
   finta vale meno di nessuna scelta.

   Sul telefono si mette SOPRA la barra fissa della CTA, che sta a z-index 80 e
   occupa il fondo: se stessero tutti e due in basso si coprirebbero.
   ========================================================================== */
.sa-ck{
  position:fixed;z-index:95;
  left:50%;bottom:16px;transform:translateX(-50%) translateY(160%);
  width:min(92vw,680px);
  display:flex;align-items:center;gap:16px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(7,11,20,.93);
  border:1px solid rgba(85,200,255,.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transition:transform .42s cubic-bezier(.32,.72,.24,1);
}
.sa-ck.is-su{transform:translateX(-50%) translateY(0)}
.sa-ck[hidden]{display:none}

.sa-ck__t{
  margin:0;flex:1 1 auto;
  font-size:13px;line-height:1.5;color:var(--soft);
}
.sa-ck__t a{color:var(--azzurro);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.sa-ck__b{flex:0 0 auto;display:flex;gap:8px}
.sa-ck__ok,.sa-ck__no{
  font:inherit;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:999px;
  cursor:pointer;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.sa-ck__ok{background:var(--azzurro);color:#02101F;border:1px solid var(--azzurro)}
.sa-ck__ok:hover{background:var(--azzurro-2);border-color:var(--azzurro-2);transform:translateY(-1px)}
.sa-ck__no{background:transparent;color:var(--soft-2);border:1px solid rgba(120,175,255,.26)}
.sa-ck__no:hover{background:var(--vetro);border-color:rgba(85,200,255,.4)}

@media(max-width:820px){
  /* In basso, e sopra la barra fissa solo quando la barra c'e' (classe
     sa-barra-on sul body, la mette main.js avviaBarra). Prima stava sempre
     84px piu' su, anche al primo arrivo quando la barra non c'e' ancora: copriva
     il bottone della prima schermata e lasciava un vuoto sotto. */
  .sa-ck{
    bottom:calc(12px + env(safe-area-inset-bottom));
    transition:transform .42s cubic-bezier(.32,.72,.24,1),bottom .35s ease;
  }
  .sa-barra-on .sa-ck{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .sa-ck{flex-wrap:wrap;gap:10px;padding:12px 13px;width:94vw}
  .sa-ck__t{flex:1 1 100%;font-size:12px;line-height:1.45}
  .sa-ck__b{flex:1 1 100%}
  .sa-ck__ok,.sa-ck__no{flex:1 1 0;text-align:center;padding:9px 12px}
}

/* ==========================================================================
   24 · REVEAL
   ========================================================================== */
.sa-js .sa-rev{opacity:0;transform:translateY(22px)}
.sa-rev{transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.sa-rev.is-in{opacity:1;transform:none}

/* ==========================================================================
   25 · PAGINE INTERNE (privacy, termini, 404, articoli)
   ========================================================================== */
.sa-pagina{padding:64px 0 96px}
.sa-pagina__testa{margin-bottom:40px}
.sa-pagina__testa h1{
  font-size:clamp(32px,5vw,54px);font-weight:500;letter-spacing:-.032em;line-height:1.05;
}
.sa-prosa{
  max-width:760px;color:var(--soft-2);font-size:16.5px;line-height:1.75;
}
.sa-prosa > * + *{margin-top:20px}
.sa-prosa h2{font-size:clamp(22px,3vw,32px);font-weight:500;letter-spacing:-.025em;margin-top:44px;line-height:1.2}
.sa-prosa h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:32px}
.sa-prosa h2:first-child,.sa-prosa h3:first-child{margin-top:0}
.sa-prosa a{color:var(--azzurro);text-decoration:underline;text-underline-offset:3px}
.sa-prosa a:hover{color:var(--azzurro-2)}
.sa-prosa strong,.sa-prosa b{color:var(--testo);font-weight:600}
.sa-prosa ul,.sa-prosa ol{padding-left:22px;display:grid;gap:10px}
.sa-prosa ul{list-style:disc}
.sa-prosa ol{list-style:decimal}
.sa-prosa li::marker{color:var(--azzurro)}
.sa-prosa blockquote{
  border-left:2px solid var(--azzurro);padding:4px 0 4px 20px;color:var(--soft);font-style:italic;
}
.sa-prosa code{
  background:var(--vetro2);border:var(--linea);border-radius:6px;padding:2px 7px;font-size:14px;
}
.sa-prosa pre{background:var(--nero-2);border:var(--linea);border-radius:var(--r-s);padding:20px;overflow-x:auto}
.sa-prosa pre code{background:none;border:0;padding:0}
/* Documenti legali: riquadro del titolare, data, tabelle che scorrono da sole. */
.sa-prosa .sa-data{
  display:inline-block;font-size:13.5px;color:var(--tenue);
  padding:6px 14px;border-radius:999px;background:var(--vetro);border:var(--linea);
}
.sa-prosa .sa-box{
  padding:24px 26px;border-radius:var(--r);
  background:linear-gradient(170deg,rgba(45,123,255,.14),rgba(4,6,12,0) 70%),var(--vetro);
  border:1px solid rgba(85,200,255,.28);
  font-size:15.5px;line-height:1.6;
}
.sa-prosa .sa-box > * + *{margin-top:8px}
.sa-prosa .sa-box b{display:block;font-size:17px;letter-spacing:-.015em}
.sa-prosa .sa-tab{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-s)}
.sa-prosa .sa-tab table{margin:0;min-width:520px}
.sa-prosa table{width:100%;border-collapse:collapse;font-size:15px}
.sa-prosa th,.sa-prosa td{border:var(--linea);padding:10px 14px;text-align:left}
.sa-prosa th{background:var(--vetro);font-weight:600;color:var(--testo)}
.sa-prosa img{border-radius:var(--r-s);margin-left:auto;margin-right:auto}
.sa-prosa hr{border:0;border-top:var(--linea);margin:36px 0}

.sa-404{text-align:center;padding:110px 0 120px}
.sa-404 .sa-h1{font-size:clamp(64px,14vw,150px);margin-bottom:8px}
.sa-404 p{color:var(--soft);font-size:17.5px;max-width:520px;margin:0 auto 32px}

/* ==========================================================================
   26 · LA PRIMA SCHERMATA DI SENZA MANI
   --------------------------------------------------------------------------
   L'ordine e' quello delle VSL: chi e' per, titolo, descrizione, il video,
   il bottone. Sullo sfondo candele doji che salgono piano. Il telefono che
   lavora da solo sta nella sezione dopo il nastro.
   Stessa regola del resto: lo stato di riposo e' la scena completa, il
   nascosto iniziale vale solo sotto .sa-js.
   ========================================================================== */
.sh{position:relative;overflow:hidden;padding:0 0 54px}

/* Le doji dello sfondo: una riga verticale e il corpo corto in mezzo. */
.sh__fondo{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  mask-image:linear-gradient(180deg,#000 55%,transparent 98%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);
}
.sh__fondo i{
  position:absolute;left:var(--x);bottom:-70px;
  width:2px;height:calc(34px * var(--z));border-radius:2px;
  background:rgba(85,200,255,.42);opacity:0;
}
.sh__fondo i::after{
  content:'';position:absolute;left:50%;top:var(--c,50%);
  width:calc(13px * var(--z));height:3px;border-radius:2px;
  transform:translate(-50%,-50%);background:rgba(155,226,255,.8);
}
.sa-js .sh__fondo i{animation:sh-sale var(--t) linear var(--r) infinite}
@keyframes sh-sale{
  0%  {opacity:0;transform:translateY(0) rotate(0deg)}
  12% {opacity:.85}
  80% {opacity:.5}
  100%{opacity:0;transform:translateY(-1150px) rotate(24deg)}
}

/* Una colonna sola, centrata, come vuole Zago (2026-10-01): premessa,
   titolo con la descrizione, il video, il bottone. Niente logo qui sopra. */
.sh__in{position:relative}
.sh__testo{max-width:900px;margin:0 auto;text-align:center}

/* La premessa: una fascia da bordo a bordo con una frase sola, ferma, al
   centro, e ai due lati due file di candele verdi e rosse che salgono e
   scendono come un grafico vivo (Zago, 2026-10-01). Esce dalla colonna con il
   margine negativo; .sh taglia il di piu'. Le candele verso i bordi sfumano. */
.sh__fascia{
  position:relative;display:flex;align-items:center;gap:20px;
  width:100vw;margin:0 0 30px calc(50% - 50vw);overflow:hidden;padding:14px 0;
  border-top:1px solid rgba(85,200,255,.3);border-bottom:1px solid rgba(85,200,255,.3);
  background:linear-gradient(90deg,rgba(45,123,255,.06),rgba(45,123,255,.24) 50%,rgba(45,123,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 40px rgba(45,123,255,.12);
}
.sh__fascia::after{
  content:'';position:absolute;top:0;bottom:0;left:-35%;width:30%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(155,226,255,.16),transparent);transform:skewX(-20deg);
}
.sa-js .sh.is-vivo .sh__fascia::after{animation:sh-fascia 6s ease-in-out 1.4s infinite}
@keyframes sh-fascia{0%{left:-35%}55%,100%{left:135%}}
.sh__f-frase{
  flex:0 1 auto;max-width:min(760px,72vw);margin:0;
  font-size:19px;font-weight:800;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;text-align:center;text-wrap:balance;
}
.sh__f-frase b{color:var(--azzurro);font-weight:800}
.sh__f-lato{flex:1 1 0;min-width:0;height:44px;display:flex;align-items:center;gap:12px;overflow:hidden}
.sh__f-lato--sx{justify-content:flex-end;-webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%)}
.sh__f-lato--dx{justify-content:flex-start;-webkit-mask-image:linear-gradient(270deg,transparent,#000 75%);mask-image:linear-gradient(270deg,transparent,#000 75%)}
/* una candela: l'ombra (::before) e il corpo (::after), del suo colore */
.sh__fc{
  position:relative;flex:0 0 auto;width:8px;height:44px;transform:translateY(var(--y));
  color:var(--candela-su);filter:drop-shadow(0 0 4px rgba(34,197,94,.6));
}
.sh__fc--giu{color:var(--candela-giu);filter:drop-shadow(0 0 3px rgba(239,68,68,.55))}
.sh__fc::before{content:'';position:absolute;left:50%;top:50%;width:1.5px;height:var(--w);transform:translate(-50%,-50%);border-radius:1px;background:currentColor}
.sh__fc::after{content:'';position:absolute;left:0;right:0;top:50%;height:var(--h);transform:translateY(-50%);border-radius:1.5px;background:currentColor}
.sa-js .sh.is-vivo .sh__fc{animation:sh-fc 2.6s ease-in-out var(--r) infinite alternate}
@keyframes sh-fc{from{transform:translateY(var(--y)) scaleY(.78)}to{transform:translateY(calc(var(--y) * -1)) scaleY(1.16)}}
@media(max-width:820px){
  .sh__fascia{gap:12px;padding:11px 0;margin-bottom:24px}
  .sh__f-frase{font-size:14.5px;letter-spacing:.04em;max-width:76vw}
  .sh__f-lato{gap:7px;height:38px}
}

/* Il titolo: maiuscolo, pieno, su una riga sola da 600 pixel in su; sotto,
   su due righe, che su una verrebbe troppo piccolo. Le due meta' salgono una
   dopo l'altra. */
.sh__h1{
  font-size:clamp(30px,7.1vw,68px);font-weight:800;line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;white-space:nowrap;margin:0 0 22px;
}
.sh__riga{display:inline-block}
.sh__h1 .sa-grad{padding-bottom:.06em}
.sa-js .sh__riga{animation:sh-riga .9s cubic-bezier(.2,.8,.2,1) .15s both}
.sa-js .sh__riga + .sh__riga{animation-delay:.32s}
@keyframes sh-riga{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:599px){
  .sh__h1{white-space:normal;font-size:clamp(36px,11.2vw,54px);line-height:1.02}
  .sh__riga{display:block}
}

/* Il sottotitolo, su una riga: "Il sistema lavora mentre tu" e la parola
   che cambia. La cella della parola si allarga e si stringe sulla parola di
   turno (main.js, avviaParole), cosi' la frase resta sempre centrata: prima
   la cella era larga quanto la parola piu' lunga e la spingeva di lato.
   Senza JavaScript, o con "riduci le animazioni", resta la prima, ferma. */
.sh__ruota{
  margin:0 0 18px;white-space:nowrap;line-height:1.3;
  font-size:clamp(16px,4.7vw,30px);font-weight:600;letter-spacing:-.01em;color:var(--soft-2);
}
.sh__parole{
  display:inline-grid;vertical-align:top;overflow:hidden;
  height:1.3em;line-height:1.3;font-weight:800;color:var(--azzurro);
  text-shadow:0 0 24px rgba(85,200,255,.4);
  transition:width .45s cubic-bezier(.3,.7,.2,1);
}
.sh__parole span{grid-area:1 / 1;justify-self:start;white-space:nowrap}
.sh__parole span + span{display:none}
.sh__parole.is-js span{display:block;opacity:0;transform:translateY(85%);transition:opacity .35s ease,transform .45s cubic-bezier(.3,.7,.2,1)}
.sh__parole.is-js span.is-ora{opacity:1;transform:none}
.sh__parole.is-js span.is-via{opacity:0;transform:translateY(-85%)}

.sh__sotto{
  font-size:clamp(16px,1.8vw,19px);color:var(--soft);line-height:1.55;
  max-width:600px;margin:0 auto;text-wrap:balance;
}
.sh .sa-video{margin-top:24px}
/* Sul computer il video sta tutto nella prima schermata (1366x768): largo
   640, con titolo e descrizione un po' piu' compatti. */
@media(min-width:960px){
  .sh{padding-top:0}
  .sh__fascia{margin-bottom:20px}
  .sh__h1{margin-bottom:14px}
  .sh__ruota{margin-bottom:12px}
  .sh__sotto{max-width:760px}
  .sh .sa-video{max-width:640px}
}
.sh__nota{margin-top:14px}
.sh__dopo{margin-top:24px}
.sa-js .sh__testo > .sh__fascia,
.sa-js .sh__testo > .sh__ruota,
.sa-js .sh__testo > .sh__sotto,
.sa-js .sh__testo > .sa-video,
.sa-js .sh__testo > .sh__nota,
.sa-js .sh__testo > .sh__dopo{animation:sa-su .8s cubic-bezier(.2,.8,.3,1) both}
.sa-js .sh__testo > .sh__fascia{animation-delay:.05s}
.sa-js .sh__testo > .sh__ruota{animation-delay:.45s}
.sa-js .sh__testo > .sh__sotto{animation-delay:.55s}
.sa-js .sh__testo > .sa-video{animation:sa-su .8s cubic-bezier(.2,.8,.3,1) .65s both,sa-alone 6s ease-in-out 1.5s infinite alternate}
.sa-js .sh__testo > .sh__nota{animation-delay:.8s}
.sa-js .sh__testo > .sh__dopo{animation-delay:.9s}

/* Il video: la luce che fa il giro della cornice (la cornice e il player
   sono quelli della sezione 9). */
@property --sv-giro{syntax:'<angle>';inherits:false;initial-value:0deg}
.sh .sa-video::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--sv-giro),transparent 0deg,rgba(155,226,255,.95) 50deg,rgba(45,123,255,0) 130deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.sa-js .sh .sa-video::before{animation:sv-giro 5s linear infinite}
@keyframes sv-giro{to{--sv-giro:360deg}}

/* ==========================================================================
   27 · IL SISTEMA AL LAVORO (il telefono, i tre numeri, il mazzo)
   Subito sotto il nastro. Sul computer il telefono a sinistra e i numeri a
   destra; sul telefono uno sotto l'altro.
   ========================================================================== */
.sp{position:relative;padding:10px 0 50px}
.sp__in{display:grid;gap:26px;align-items:center}
@media(min-width:960px){ .sp__in{grid-template-columns:.95fr 1.05fr;gap:48px} }
.sp__testa{margin-bottom:6px;text-align:center}
@media(min-width:960px){ .sp__testa{text-align:left} }
.sp__lato{display:flex;flex-direction:column;gap:18px}
@media(min-width:960px){ .sp__lato .sn-mazzo{justify-content:flex-start} }

/* --- La scena: il telefono che lavora da solo --- */
.sh__scena{--tel:min(300px,80vw);position:relative;display:flex;justify-content:center;padding:6px 0 18px}
@media(min-width:960px){ .sh__scena{--tel:330px} }
.sh__tel{
  position:relative;width:var(--tel);padding:14px 14px 16px;border-radius:36px;
  background:linear-gradient(180deg,#0E1A30,#060B16);
  border:1px solid rgba(85,200,255,.34);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 90px rgba(45,123,255,.22),inset 0 1px 0 rgba(255,255,255,.07);
  transform:rotate(-2deg);
}
.sa-js .sh__tel{animation:sh-tel 1.1s cubic-bezier(.2,.8,.3,1) .45s both,sh-tel-galla 6s ease-in-out 1.6s infinite}
@keyframes sh-tel{from{opacity:0;transform:translateY(46px) rotate(-7deg) scale(.94)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes sh-tel-galla{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-.8deg) translateY(-9px)}}
.sh__tel-notch{width:88px;height:18px;margin:0 auto 12px;border-radius:999px;background:#03060D}
.sh__tel-capo{
  display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;
  background:rgba(45,123,255,.14);border:1px solid rgba(85,200,255,.3);
  font-size:12.5px;font-weight:500;color:var(--soft-2);
}
.sh__tel-capo b{margin-left:auto;padding:3px 8px;border-radius:999px;font-size:10.5px;letter-spacing:.08em;color:#02101F;background:var(--azzurro)}
/* La riga dell'intelligenza artificiale: cosa sta guardando adesso, a giro.
   Ogni parola ha un terzo del giro; entra mentre l'altra esce. */
.sh__ai{
  display:flex;align-items:center;gap:7px;margin-top:8px;padding:7px 10px;border-radius:10px;
  font-size:11.5px;font-weight:500;line-height:1.4;color:var(--soft);white-space:nowrap;
  background:rgba(2,6,14,.5);border:1px dashed rgba(85,200,255,.3);
}
.sh__ai-i{display:flex;flex:0 0 auto}
.sh__ai-i svg{width:16px;height:16px;fill:none;stroke:var(--azzurro);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-vivo .sh__ai-i svg{animation:sa-respiro 2.4s ease-in-out infinite}
.sh__ai-parole{display:grid;overflow:hidden;height:1.4em;line-height:1.4;color:var(--azzurro-2);font-weight:600}
.sh__ai-parole span{grid-area:1 / 1}
.sh__ai-parole span + span{opacity:0}
.sa-js .sh__ai-parole span{opacity:0;animation:sh-ai 7.5s cubic-bezier(.7,0,.3,1) infinite both}
.sa-js .sh__ai-parole span:nth-child(2){animation-delay:2.5s}
.sa-js .sh__ai-parole span:nth-child(3){animation-delay:5s}
@keyframes sh-ai{0%{opacity:0;transform:translateY(80%)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-80%)}}
.sh__conto{display:flex;justify-content:space-between;align-items:baseline;margin:14px 4px 8px}
.sh__conto small{font-size:12px;color:var(--soft)}
.sh__conto strong{font-size:15px;font-weight:600;color:#fff}

.sh__grafico{
  position:relative;height:96px;margin-bottom:12px;border-radius:12px;overflow:hidden;
  background:linear-gradient(rgba(110,175,255,.06) 1px,transparent 1px) 0 0 / 100% 24px,rgba(2,6,14,.62);
  border:1px solid rgba(85,200,255,.14);
}
.sh__grafico svg{display:block;width:100%;height:100%}
.sh__c{transform-box:fill-box;transform-origin:50% 50%}
.sa-js .sh__scena:not(.is-visto) .sh__c{opacity:0}
.sh__scena.is-visto .sh__c{animation:sh-candela .45s cubic-bezier(.2,.8,.3,1) calc(var(--k) * .07s + .9s) both}
@keyframes sh-candela{from{opacity:0;transform:scaleY(.1)}to{opacity:1;transform:none}}
.sh__scan{
  position:absolute;top:0;bottom:0;left:0;width:2px;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(155,226,255,.95),transparent);
  box-shadow:0 0 10px rgba(85,200,255,.8);
}
.is-vivo .sh__scan{animation:sh-scan 4.5s ease-in-out 2s infinite}
@keyframes sh-scan{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}

.sh__feed{display:grid;gap:7px}
.sh__feed li{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;
  font-size:13px;font-weight:500;color:var(--soft-2);
  background:rgba(140,185,255,.05);border:1px solid rgba(120,175,255,.12);
}
.sh__feed time{margin-left:auto;font-size:11.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.sh__ok{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:rgba(45,123,255,.22);border:1px solid rgba(85,200,255,.5);
}
.sh__ok svg,.sh__bolla svg{width:12px;height:12px;fill:none;stroke:var(--azzurro-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Le tre operazioni entrano una volta sola e restano: un telefono che si
   svuota a giro sembra rotto. Poi una luce passa su una riga alla volta,
   come la notifica dell'ultima operazione. */
.sh__feed li{position:relative}
.sh__feed li::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  border:1px solid rgba(85,200,255,.55);background:rgba(45,123,255,.13);
}
.sa-js .sh__scena:not(.is-visto) .sh__feed li{opacity:0}
.sh__scena.is-visto .sh__feed li{animation:sh-arriva .6s cubic-bezier(.2,.8,.3,1) calc(var(--k) * .35s + 1.6s) both}
@keyframes sh-arriva{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.is-vivo .sh__feed li::before{animation:sh-nuova 6s ease calc(var(--k) * 2s + 2.8s) infinite}
@keyframes sh-nuova{0%,26%,100%{opacity:0}4%,20%{opacity:1}}

.sh__mani{
  display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(45,123,255,.22),rgba(4,6,12,0));border:1px solid rgba(85,200,255,.3);
}
.sh__mani b{display:block;font-size:13.5px;color:#fff}
.sh__mani small{display:block;font-size:11.5px;color:var(--soft)}
.sh__mani-i{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:rgba(2,6,14,.6);border:1px solid rgba(85,200,255,.3);
}
.sh__mani-i svg{width:20px;height:20px}
.is-vivo .sh__mani-i svg{animation:sh-doji 3s ease-in-out infinite}
@keyframes sh-doji{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Le due bolle che galleggiano sopra i bordi del telefono. */
.sh__bolla{
  position:absolute;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--testo);
  background:rgba(7,11,20,.92);border:1px solid rgba(85,200,255,.42);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
/* A cavallo del bordo del telefono: entrano di 12 pixel, meno del margine
   interno dello schermo, cosi' non coprono mai una scritta. */
.sh__bolla--a{top:30%;right:calc(50% + var(--tel) / 2 - 12px)}
.sh__bolla--b{bottom:24%;left:calc(50% + var(--tel) / 2 - 12px)}
.sa-js .sh__bolla{animation:sa-su .7s cubic-bezier(.2,.8,.3,1) 1.4s both,sh-galla 4.5s ease-in-out 2.1s infinite}
.sa-js .sh__bolla--b{animation-delay:1.7s,2.6s}

/* Dove ai lati del telefono non c'e' posto per le bolle (telefoni, e schermi
   fra 960 e 1240 dove la colonna e' stretta) stanno a cavallo del bordo, in
   alto a sinistra e in basso a destra: fuori dal contenuto dello schermo e
   dentro la pagina. Altrove escono di lato. */
@media(max-width:560px){
  .sh{padding:0 0 40px}
  .sh__in{gap:30px}
  .sh__bolla{font-size:12px;padding:8px 12px}
}
@media(max-width:620px),(min-width:960px) and (max-width:1239px){
  .sh__scena{padding:16px 0 26px}
  .sh__bolla--a{top:0;left:4px;right:auto}
  .sh__bolla--b{bottom:4px;right:4px;left:auto}
}

/* Il telefono sta sotto la piega e si vede scorrendo: le sue entrate
   partono quasi subito, non dopo una sequenza d'apertura. */
.sh__scena.is-visto .sh__c{animation-delay:calc(var(--k) * .04s + .15s)}
.sh__scena.is-visto .sh__feed li{animation-delay:calc(var(--k) * .25s + .45s)}

/* Fuori schermo i giri continui si fermano: avviaVivo toglie is-vivo, e il
   telefono non lavora per scene che nessuno sta guardando. */
.sa-js .sh:not(.is-vivo) .sh__fondo i,
.sa-js .sh:not(.is-vivo) .sa-video::before,
.sa-js .sh__scena:not(.is-vivo) :is(.sh__tel,.sh__bolla,.sh__ai-parole span),
.sa-js .sm-nastro:not(.is-vivo) .sm-nastro__pista,
.sa-js .sa-foot__marchio:not(.is-vivo) :is(.sl,.sl__pezzo,.sl__luce,.sl__alone){animation-play-state:paused}

/* ==========================================================================
   28 · IL NASTRO CHE SCORRE (le quattro pillole)
   Non si ferma mai, nemmeno col mouse sopra: e' un nastro, non un menu.
   Le pillole sono ripetute quattro volte, cosi' anche su uno schermo largo
   la fila non resta mai a meta'; la pista scorre di meta' e ricomincia.
   ========================================================================== */
.sm-nastro{
  position:relative;overflow:hidden;padding:2px 0 30px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.sm-nastro__pista{display:flex;gap:12px;width:max-content;animation:sm-nastro 30s linear infinite}
.sm-nastro__pista li{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;
  padding:10px 18px 10px 10px;border-radius:999px;
  background:var(--vetro);border:var(--linea);
  font-size:14.5px;font-weight:500;color:var(--soft-2);
}
.sm-nastro__pista .sa-chip__i{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:rgba(45,123,255,.16);border:1px solid rgba(85,200,255,.36);
}
.sm-nastro__pista svg{width:16px;height:16px;stroke:var(--azzurro);fill:none;stroke-width:2.4}
@keyframes sm-nastro{to{transform:translateX(calc(-50% - 6px))}}
@media(max-width:560px){ .sm-nastro__pista li{font-size:13.5px;padding:8px 15px 8px 8px} .sm-nastro__pista .sa-chip__i{width:28px;height:28px} }

/* ==========================================================================
   29 · I DUE NUMERI
   Erano tre riquadri; dal 2026-10-01 sono due numeri senza riquadro, in fondo
   alla sezione. Le scene: l'orologio che fa il giro (10 minuti),
   il grafico che si cancella (0 grafici). Lo scudo del terzo, "1 conto a
   nome tuo", e' uscito: lo dicono gia' la bolla del telefono e il nastro.
   Sotto, il mazzo che porta al canale.
   ========================================================================== */
.sn-fascia{position:relative;padding:4px 0 10px}
.sn-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sn{
  position:relative;overflow:hidden;text-align:center;
  padding:24px 14px 22px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(45,123,255,.13),rgba(4,6,12,0) 85%),var(--vetro);
  border:var(--linea);
}
.sn__scena{height:58px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.sn__scena svg{width:58px;height:58px;overflow:visible}
.sn b{
  display:block;font-size:clamp(38px,5vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(160deg,#FFFFFF,#9BE2FF 55%,#2D7BFF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.sn span{display:block;margin-top:9px;font-size:13.5px;font-weight:500;color:var(--soft);line-height:1.38}

/* 10: il giro dell'orologio si chiude, la lancetta continua a girare */
.sn__pista{fill:none;stroke:rgba(120,175,255,.18);stroke-width:5}
.sn__giro{
  fill:none;stroke:var(--azzurro);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:163.4;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:32px 32px;
}
.sa-js .sn-fascia:not(.is-visto) .sn__giro{stroke-dashoffset:163.4}
.sn-fascia.is-visto .sn__giro{animation:sn-giro 1.6s cubic-bezier(.3,.7,.3,1) .3s both}
@keyframes sn-giro{from{stroke-dashoffset:163.4}to{stroke-dashoffset:0}}
.sn__lancetta{stroke:#fff;stroke-width:3;stroke-linecap:round;transform-origin:32px 32px}
.is-vivo .sn__lancetta{animation:sn-lancetta 4s linear infinite}
@keyframes sn-lancetta{to{transform:rotate(360deg)}}

/* 0: un grafico che tremola, e una riga che lo cancella */
.sn__linea{fill:none;stroke:var(--azzurro);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.45}
.is-vivo .sn__linea{animation:sn-linea 2.6s ease-in-out infinite}
@keyframes sn-linea{0%,100%{opacity:.2}50%{opacity:.55}}
.sn__barra{stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:57;stroke-dashoffset:0}
.sa-js .sn-fascia:not(.is-visto) .sn__barra{stroke-dashoffset:57}
.sn-fascia.is-visto .sn__barra{animation:sn-barra .55s ease 1.2s both}
@keyframes sn-barra{from{stroke-dashoffset:57}to{stroke-dashoffset:0}}

/* 1: lo scudo col tuo nome, che respira */
.sn__scudo{fill:rgba(45,123,255,.16);stroke:var(--azzurro);stroke-width:2.6;stroke-linejoin:round}
.sn__persona{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.is-vivo .sn--uno svg{animation:sa-respiro 3.2s ease-in-out infinite}

.sn-mazzo{display:flex;justify-content:center;margin-top:26px}
.sn-mazzo .sa-mazzo{margin-top:0}

@media(max-width:820px){
  .sn-griglia{gap:10px}
  .sn{padding:16px 6px 15px;border-radius:14px}
  .sn__scena{height:40px;margin-bottom:8px}
  .sn__scena svg{width:40px;height:40px}
  .sn b{font-size:32px}
  .sn span{font-size:11.5px;margin-top:6px}
}

/* Due numeri e senza riquadri (Zago, 2026-10-01): stanno sul fondo, divisi
   da una riga di luce che pulsa. Il numero conta (main.js, avviaContatori),
   l'icona fa la sua scena, sotto si riempie una riga e il numero si accende
   piano a giro. Fermo, si legge tutto. */
.sn-griglia{grid-template-columns:repeat(2,1fr);gap:0;max-width:560px;margin:0 auto}
.sn{background:none;border:0;border-radius:0;padding:8px 10px 6px;overflow:visible}
.sn + .sn::before{
  content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(85,200,255,.6),transparent);
}
.sn-fascia.is-vivo .sn + .sn::before{animation:sn-divide 3s ease-in-out infinite}
@keyframes sn-divide{0%,100%{opacity:.3}50%{opacity:1}}
.sn__scena{height:64px;margin-bottom:12px}
.sn__scena svg{width:64px;height:64px;filter:drop-shadow(0 0 12px rgba(85,200,255,.35))}
.sn b{font-size:clamp(56px,7vw,76px)}
.sn-fascia.is-vivo .sn b{animation:sn-accende 3.6s ease-in-out infinite}
.sn-fascia.is-vivo .sn + .sn b{animation-delay:1.8s}
@keyframes sn-accende{0%,100%{filter:drop-shadow(0 0 0 rgba(85,200,255,0))}50%{filter:drop-shadow(0 0 16px rgba(85,200,255,.6))}}
.sn span{font-size:15px;margin-top:10px}
.sn span::after{
  content:'';display:block;width:48px;height:2px;margin:12px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--blu),var(--azzurro));transform-origin:left center;
}
.sa-js .sn-fascia:not(.is-visto) .sn span::after{transform:scaleX(0)}
.sn-fascia.is-visto .sn span::after{animation:sn-traccia .7s cubic-bezier(.2,.8,.3,1) 1.1s both}
.sn-fascia.is-visto .sn + .sn span::after{animation-delay:1.35s}
@keyframes sn-traccia{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:820px){
  .sn{padding:6px 6px 4px}
  .sn__scena{height:48px;margin-bottom:10px}
  .sn__scena svg{width:48px;height:48px}
  .sn b{font-size:46px}
  .sn span{font-size:13px;margin-top:8px}
}

/* 10 minuti: una clessidra bella piena, con le bolle tonde (Zago, 2026-10-01). La sabbia scende, il filo
   cade, poi si capovolge e ricomincia: girata di 180 gradi e' uguale a prima,
   quindi il giro non si vede. Ferma, e' a meta'. */
.sn__vetro{fill:rgba(85,200,255,.08);stroke:#fff;stroke-width:2.8;stroke-linejoin:round}
.sn__tappo{fill:none;stroke:var(--azzurro-2);stroke-width:4;stroke-linecap:round}
.sn__sabbia{fill:var(--azzurro)}
.sn__sabbia-su{transform-origin:32px 32px;transform:scaleY(.55)}
.sn__sabbia-giu{transform-origin:32px 52px;transform:scaleY(.45)}
.sn__filo{stroke:var(--azzurro);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 3;opacity:0}
.sn__clessidra{transform-origin:32px 32px}
.sn-fascia.is-vivo .sn__clessidra{animation:sn-capovolge 4.5s cubic-bezier(.6,0,.4,1) infinite}
.sn-fascia.is-vivo .sn__sabbia-su{animation:sn-svuota 4.5s linear infinite}
.sn-fascia.is-vivo .sn__sabbia-giu{animation:sn-riempie 4.5s linear infinite}
.sn-fascia.is-vivo .sn__filo{animation:sn-cade .35s linear infinite,sn-filo 4.5s linear infinite}
@keyframes sn-capovolge{0%,80%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@keyframes sn-svuota{0%{transform:scaleY(1)}78%,100%{transform:scaleY(0)}}
@keyframes sn-riempie{0%{transform:scaleY(0)}78%,100%{transform:scaleY(1)}}
@keyframes sn-cade{to{stroke-dashoffset:-5}}
@keyframes sn-filo{0%,74%{opacity:1}78%,100%{opacity:0}}

/* 0 grafici: lo schermo di un computer col grafico che sale, e la sbarra sullo
   zero, che si disegna quando la sezione entra a schermo (Zago, 2026-10-01). */
.sn__schermo{fill:rgba(85,200,255,.06);stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.sn__piede{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.sn__curva{fill:none;stroke:var(--azzurro);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
.sn__punta{fill:var(--azzurro-2)}
.sn-fascia.is-vivo .sn__curva{animation:sn-curva 3.2s ease-in-out infinite}
.sn-fascia.is-vivo .sn__punta{animation:sn-punta 3.2s ease-in-out infinite}
@keyframes sn-curva{0%{stroke-dashoffset:60}50%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
@keyframes sn-punta{0%,46%{opacity:0}54%,82%{opacity:1}100%{opacity:0}}
.sn b.sn__nullo{position:relative}
.sn b.sn__nullo::after{
  content:'';position:absolute;left:50%;top:52%;width:.95em;height:.085em;border-radius:.05em;
  background:linear-gradient(90deg,#fff,var(--azzurro-2));box-shadow:0 0 10px rgba(85,200,255,.8);
  transform:translate(-50%,-50%) rotate(-50deg);
}
.sa-js .sn-fascia:not(.is-visto) .sn__nullo::after{transform:translate(-50%,-50%) rotate(-50deg) scaleX(0)}
.sn-fascia.is-visto .sn__nullo::after{animation:sn-sbarra .6s cubic-bezier(.2,.8,.3,1) 1.2s both}
@keyframes sn-sbarra{from{transform:translate(-50%,-50%) rotate(-50deg) scaleX(0)}to{transform:translate(-50%,-50%) rotate(-50deg) scaleX(1)}}

/* ==========================================================================
   30 · L'INTELLIGENZA ARTIFICIALE
   Il riquadro animato: tre fonti (dati, notizie, indicatori) mandano gocce
   di luce verso il nucleo; dentro il nucleo una rete di nodi si accende a
   ondate e alcuni legami si fanno piu' forti col tempo, come chi impara.
   Sotto, il diario che si scrive da solo (main.js, avviaDiario), il giro
   decide, opera, impara, e il controllo umano del trader.
   Le cose che girano partono solo con is-vivo; fermo e' tutto leggibile.
   ========================================================================== */
.sai__scena{
  position:relative;max-width:900px;margin:34px auto 0;padding:26px 14px 22px;border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;isolation:isolate;
  background:
    radial-gradient(ellipse 60% 42% at 50% 36%,rgba(45,123,255,.22),transparent 70%),
    linear-gradient(180deg,rgba(14,26,48,.78),rgba(5,9,18,.6));
  border:1px solid rgba(85,200,255,.24);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
/* La griglia dietro, come uno schermo che scorre piano. */
.sai__scena::before{
  content:'';position:absolute;inset:-40px 0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(110,175,255,.06) 1px,transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg,rgba(110,175,255,.045) 1px,transparent 1px) 0 0 / 28px 100%;
}
.sai__scena.is-vivo::before{animation:sai-griglia 10s linear infinite}
@keyframes sai-griglia{to{transform:translateY(28px)}}

/* --- le tre fonti --- */
.sai__fonti{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,640px)}
.sai__fonti li{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:12px 5px 11px;border-radius:14px;
  background:rgba(140,185,255,.05);border:1px solid rgba(120,175,255,.16);
}
.sai__fonti b{font-size:13px;font-weight:600;line-height:1.2;color:#fff}
.sai__fonti i{font-style:normal;font-size:11px;line-height:1.3;color:var(--soft);text-wrap:balance}
.sai__i{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:5px;border-radius:12px;
  background:rgba(45,123,255,.16);border:1px solid rgba(85,200,255,.34);
}
.sai__i svg,.sai__c-i svg,.sai__u-i svg{width:20px;height:20px;fill:none;stroke:var(--azzurro);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* La fonte che sta mandando si accende: una per volta, a giro. */
.sai__scena.is-vivo .sai__fonti li{animation:sai-fonte 4.5s ease-in-out calc(var(--k) * 1.5s) infinite}
@keyframes sai-fonte{
  0%,40%,100%{border-color:rgba(120,175,255,.16);background:rgba(140,185,255,.05);box-shadow:none}
  10%,26%    {border-color:rgba(85,200,255,.62);background:rgba(45,123,255,.17);box-shadow:0 0 24px rgba(85,200,255,.26)}
}
.sai__scena.is-vivo .sai__fonti li .sai__i{animation:sai-icona 4.5s ease-in-out calc(var(--k) * 1.5s) infinite}
@keyframes sai-icona{0%,40%,100%{transform:none}14%{transform:translateY(-3px) scale(1.08)}}

/* --- i fili verso il nucleo, con la goccia di luce che scende --- */
.sai__fili{display:block;width:min(100%,640px);height:auto;aspect-ratio:300 / 70;overflow:visible}
.sai__filo{fill:none;stroke:rgba(85,200,255,.24);stroke-width:1.6;stroke-dasharray:3 5}
.sai__goccia{
  fill:none;stroke:var(--azzurro-2);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:9 200;stroke-dashoffset:9;opacity:0;
}
.sai__scena.is-vivo .sai__goccia{animation:sai-goccia 4.5s cubic-bezier(.5,0,.8,.6) calc(var(--k) * 1.5s + .35s) infinite}
@keyframes sai-goccia{
  0%     {stroke-dashoffset:9;opacity:1}
  22%    {stroke-dashoffset:-100;opacity:1}
  24%,100%{stroke-dashoffset:-100;opacity:0}
}

/* --- il nucleo --- */
.sai__nucleo{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:170px;height:170px;margin:4px 0 6px;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,rgba(45,123,255,.38),rgba(9,18,40,.96) 64%);
  border:1px solid rgba(85,200,255,.46);
  box-shadow:0 0 50px rgba(45,123,255,.34),inset 0 0 30px rgba(85,200,255,.18);
}
.sai__anello{position:absolute;inset:-12px;border-radius:50%;border:1.5px dashed rgba(85,200,255,.45);pointer-events:none}
.sai__anello--2{inset:-27px;border-style:dotted;border-color:rgba(155,226,255,.3)}
.sai__scena.is-vivo .sai__anello{animation:sai-gira 18s linear infinite}
.sai__scena.is-vivo .sai__anello--2{animation:sai-gira 28s linear infinite reverse}
@keyframes sai-gira{to{transform:rotate(360deg)}}
/* l'onda quando arriva una goccia: ogni volta che una fonte ha mandato */
.sai__onda{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(85,200,255,.6);opacity:0;pointer-events:none}
.sai__scena.is-vivo .sai__onda{animation:sai-onda 1.5s ease-out 1.35s infinite}
@keyframes sai-onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.42);opacity:0}}
.sai__rete{position:relative;width:74%;height:74%;overflow:visible}
.sai__l{stroke:rgba(155,226,255,.16);stroke-width:1.1}
.sai__n{fill:#0E1E3E;stroke:var(--azzurro);stroke-width:1.6}
.sai__scena.is-vivo .sai__l{animation:sai-segnale 2.4s ease-in-out calc(var(--d) * 1s) infinite}
.sai__scena.is-vivo .sai__n{animation:sai-nodo 2.4s ease-in-out calc(var(--d) * 1s) infinite}
@keyframes sai-segnale{
  0%,32%,100%{stroke:rgba(155,226,255,.16);stroke-width:1.1}
  12%        {stroke:rgba(155,226,255,.95);stroke-width:2}
}
@keyframes sai-nodo{0%,36%,100%{fill:#0E1E3E}14%{fill:#55C8FF}}
/* I legami che imparano: in un giro lungo si fanno via via piu' netti, poi
   si ricomincia. Non e' un grafico che sale: e' una rete che si allena. */
.sai__scena.is-vivo .sai__l--forte{animation:sai-segnale 2.4s ease-in-out calc(var(--d) * 1s) infinite,sai-impara 14s ease-in-out infinite}
@keyframes sai-impara{0%,100%{stroke-opacity:.45}80%{stroke-opacity:1}}
.sai__sigla{
  position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.16em;
  color:#02101F;background:linear-gradient(135deg,#9BE2FF,#55C8FF);
  box-shadow:0 6px 18px rgba(85,200,255,.4);
}

/* --- sotto il nucleo: il diario e il giro --- */
.sai__fondo{display:grid;gap:12px;width:100%;margin-top:30px}
@media(min-width:760px){ .sai__fondo{grid-template-columns:1.12fr .88fr;gap:16px} }

.sai__diario{
  text-align:left;padding:12px 14px 12px;border-radius:14px;
  background:rgba(2,6,14,.72);border:1px solid rgba(85,200,255,.2);
}
.sai__diario-capo{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azzurro-2);
}
.sai__righe{
  display:grid;align-content:start;gap:3px;min-height:calc(4 * 1.6em + 9px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--soft-2);
}
.sai__righe li{display:flex;align-items:center;gap:8px;line-height:1.6;white-space:nowrap;overflow:hidden}
.sai__righe li::before{content:'›';flex:0 0 auto;color:var(--azzurro);font-weight:700}
/* la spunta a fine riga, disegnata col bordo: niente simboli che il
   telefono potrebbe non avere */
.sai__righe li::after{
  content:'';flex:0 0 auto;width:8px;height:4px;margin-left:auto;margin-right:2px;
  border-left:2px solid var(--azzurro);border-bottom:2px solid var(--azzurro);
  transform:translateY(-2px) rotate(-45deg);
}
.sai__righe.is-js li{display:none}
.sai__righe.is-js li.is-su{display:flex;animation:sai-riga .32s ease both}
.sai__righe.is-js li::after{opacity:0}
.sai__righe.is-js li.is-fatta::after{opacity:1;transition:opacity .2s}
.sai__righe.is-js li.is-scrive::after{
  opacity:1;width:7px;height:13px;margin-left:1px;border:0;transform:none;
  background:var(--azzurro-2);animation:sai-cursore .8s steps(2) infinite;
}
@keyframes sai-riga{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sai-cursore{50%{opacity:0}}

.sai__giro{
  display:flex;flex-direction:column;justify-content:center;padding:14px 10px 12px;border-radius:14px;
  background:rgba(140,185,255,.05);border:1px solid rgba(120,175,255,.16);
}
.sai__ciclo{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* il binario fra i tre passi, con i trattini che scorrono */
.sai__ciclo::before{
  content:'';position:absolute;top:21px;left:17%;right:17%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(85,200,255,.55) 0 6px,transparent 6px 12px);
}
.sai__scena.is-vivo .sai__ciclo::before{animation:sai-binario .9s linear infinite}
@keyframes sai-binario{to{background-position:12px 0}}
.sai__ciclo li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--soft-2)}
.sai__c-i{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:#0C1934;border:1px solid rgba(85,200,255,.36);
}
.sai__scena.is-vivo .sai__c-i{animation:sai-passo 3.6s ease-in-out calc(var(--k) * 1.2s) infinite}
@keyframes sai-passo{
  0%,40%,100%{background:#0C1934;box-shadow:none;transform:none}
  12%,28%    {background:#123A6E;box-shadow:0 0 18px rgba(85,200,255,.55);transform:scale(1.08)}
}
.sai__scena.is-vivo .sai__c-i--gira svg{animation:sai-gira 3.6s linear infinite}
.sai__ciclo-nota{margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--soft);text-align:center;text-wrap:balance}
.sai__ciclo-nota b{color:#fff;font-weight:600}

/* --- il controllo umano --- */
.sai__umano{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding:11px 18px 11px 11px;border-radius:999px;text-align:left;
  background:linear-gradient(135deg,rgba(45,123,255,.24),rgba(4,6,12,.2));border:1px solid rgba(85,200,255,.36);
}
.sai__u-i{
  position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:rgba(2,6,14,.7);border:1px solid rgba(85,200,255,.4);
}
.sai__u-i::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(85,200,255,.5);opacity:0}
.sai__scena.is-vivo .sai__u-i::after{animation:sai-onda 2.6s ease-out infinite}
.sai__umano b{display:block;font-size:14px;color:#fff}
.sai__umano i{display:block;font-style:normal;font-size:12px;line-height:1.35;color:var(--soft)}

@media(max-width:560px){
  .sai__scena{margin-top:26px;border-radius:22px}
  .sai__umano{border-radius:18px;padding-right:14px}
}
@media(min-width:760px){
  .sai__scena{padding:34px 30px 28px}
  .sai__fonti{gap:14px}
  .sai__fonti li{padding:16px 10px 14px}
  .sai__fonti b{font-size:15px}
  .sai__fonti i{font-size:12.5px}
  .sai__nucleo{width:220px;height:220px}
  .sai__righe{font-size:13.5px}
}

/* ==========================================================================
   31 · LA CONSOLE CHE FA UN'OPERAZIONE (sezione "Il sistema")
   Il grafico della console fa un'operazione intera, a tempo con le quattro
   righe (main.js, avviaConsole): le candele compaiono una alla volta con la
   loro ombra, il pallino segna l'entrata con lo stop loss sotto e il take
   profit sopra, lo stop
   loss sale a break even, poi i pallini spariscono ed esce la conferma
   verde con i "+" che salgono. Niente cifre. Il verde della conferma e'
   un'eccezione decisa da Zago (2026-10-01), come le candele.
   Senza JavaScript: il grafico intero e fermo, senza pallini.
   ========================================================================== */
.cc{height:auto;aspect-ratio:240 / 100;overflow:visible}
.cc .cc__svg{display:block;width:100%;height:100%;overflow:visible}
/* l'ombra delle candele, del loro colore */
.cc .sa-cdl--su{filter:drop-shadow(0 0 3px rgba(34,197,94,.55))}
.cc .sa-cdl--giu{filter:drop-shadow(0 0 3px rgba(239,68,68,.5))}
.cc__c{transform-box:fill-box;transform-origin:50% 50%}
.cc.is-js .cc__c{opacity:0;transform:translateY(5px) scaleY(.3)}
.cc.is-js .cc__c.is-su{opacity:1;transform:none;transition:opacity .25s ease,transform .38s cubic-bezier(.2,.8,.3,1)}
/* l'ultima candela e' quella che si sta formando: il corpo respira */
.cc__c.is-ultima rect{transform-box:fill-box;transform-origin:50% 50%;animation:cc-forma .55s ease-in-out infinite alternate}
@keyframes cc-forma{from{transform:scaleY(.82)}to{transform:scaleY(1.12)}}
.cc.is-fine .cc__c{opacity:0;transition:opacity .5s ease}

/* entrata, stop loss, pallini: si vedono solo durante l'operazione */
.cc__in,.cc__sl,.cc__tp,.cc__pin{opacity:0;transition:opacity .4s ease}
.cc.is-entrata .cc__in,.cc.is-entrata .cc__sl,.cc.is-entrata .cc__tp,.cc.is-entrata .cc__pin--in,.cc.is-uscita .cc__pin--out{opacity:1}
.cc.is-chiusa .cc__in,.cc.is-chiusa .cc__sl,.cc.is-chiusa .cc__tp,.cc.is-chiusa .cc__pin{opacity:0}
/* il take profit, verde: quando il prezzo lo tocca si accende */
.cc__tp-l{stroke:var(--candela-su);stroke-width:1.3;stroke-dasharray:4 3;transition:stroke-width .3s ease}
.cc.is-uscita .cc__tp-l{stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(34,197,94,.85))}
.cc__tag--tp{fill:var(--candela-su)}
.cc__in-l{stroke:var(--azzurro);stroke-width:1.2;stroke-dasharray:3 3}
.cc__sl{transition:opacity .4s ease,transform .9s cubic-bezier(.3,.7,.2,1)}
.cc.is-be .cc__sl{transform:translateY(var(--be))}
.cc__sl-l{stroke:var(--candela-giu);stroke-width:1.3;stroke-dasharray:4 3;transition:stroke .6s ease}
.cc.is-be .cc__sl-l{stroke:var(--azzurro-2)}
.cc__tag{font-size:9px;font-weight:700;letter-spacing:.02em;transition:opacity .4s ease}
.cc__tag--in{fill:var(--azzurro)}
.cc__tag--sl{fill:var(--candela-giu)}
.cc__tag--be{fill:var(--azzurro-2);opacity:0}
.cc.is-be .cc__tag--sl,.cc.is-be .cc__tag--in{opacity:0}
.cc.is-be .cc__tag--be{opacity:1}
.cc__punto{fill:#fff;stroke:var(--azzurro);stroke-width:1.6}
.cc__pin--out .cc__punto{stroke:var(--candela-su)}
.cc__onda{fill:none;stroke:var(--azzurro);stroke-width:1.2;transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.cc__pin--out .cc__onda{stroke:var(--candela-su)}
.cc.is-entrata .cc__pin--in .cc__onda,.cc.is-uscita .cc__pin--out .cc__onda{animation:cc-onda 1.3s ease-out infinite}
@keyframes cc-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* la conferma verde, con i "+" che salgono come stelline */
.cc__ok{
  position:absolute;left:38%;top:58%;z-index:2;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 14px 7px 8px;border-radius:999px;
  font-size:13px;font-weight:700;color:#BBF7D0;
  background:rgba(8,32,20,.92);border:1px solid rgba(34,197,94,.65);
  box-shadow:0 0 26px rgba(34,197,94,.4),0 10px 24px rgba(0,0,0,.45);
  opacity:0;transform:translate(-50%,-50%) scale(.7);pointer-events:none;
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.4,.4,1);
}
.cc.is-chiusa .cc__ok{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cc.is-fine .cc__ok{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.cc__ok-i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--candela-su)}
.cc__ok-i svg{width:13px;height:13px;fill:none;stroke:#052E16;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cc__ok i{
  position:absolute;left:var(--x);bottom:70%;font-style:normal;font-weight:800;font-size:var(--s);line-height:1;
  color:#4ADE80;text-shadow:0 0 8px rgba(74,222,128,.8);opacity:0;
}
.cc.is-chiusa .cc__ok i{animation:cc-piu 1.5s ease-out calc(var(--k) * .11s + .1s) both}
@keyframes cc-piu{
  0%  {opacity:0;transform:translateY(6px) scale(.5) rotate(0deg)}
  20% {opacity:1}
  100%{opacity:0;transform:translateY(-38px) scale(1.15) rotate(var(--r))}
}

/* Il riquadro "Il sistema" adesso contiene anche quello che stava nel
   telefono della prima schermata (Zago, 2026-10-01): lo stato del sistema,
   la riga dell'AI, gli orari delle operazioni, "Mani libere", e le due bolle
   sugli angoli. Il riquadro non taglia piu' quello che sporge, per le bolle. */
.sa-div__box--sis{overflow:visible}
.sa-console .sh__tel-capo{margin-bottom:8px}
.sa-console .sh__ai{margin:0 0 12px}
.sa-console .sh__mani{margin-top:12px}
.sa-div__box--sis .sh__bolla{z-index:3}
.sa-div__box--sis .sh__bolla--a{top:-15px;left:16px;right:auto;bottom:auto}
.sa-div__box--sis .sh__bolla--b{bottom:-15px;right:16px;left:auto;top:auto}
.sa-console__ora{
  margin-left:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--tenue);opacity:.45;transition:opacity .3s ease,color .3s ease;
}
.sa-console__righe li.is-ora .sa-console__ora,.sa-console__righe li.is-fatta .sa-console__ora{opacity:1;color:var(--azzurro-2)}
.sa-console__righe li.is-fatta{color:var(--soft-2)}
.sa-console__righe li.is-fatta i{background:rgba(85,200,255,.55)}

/* le righe accanto: la accende avviaConsole, a tempo col grafico */
.sa-console.is-js .sa-console__righe li,.sa-console.is-js .sa-console__righe li i{animation:none}
.sa-console__righe li{transition:color .3s ease,background .3s ease,border-color .3s ease}
.sa-console__righe li i{transition:background .3s ease,box-shadow .3s ease}
.sa-console__righe li.is-ora{color:#fff;background:rgba(45,123,255,.16);border-color:rgba(85,200,255,.32)}
.sa-console__righe li.is-ora i{background:var(--azzurro);box-shadow:0 0 10px rgba(85,200,255,.9)}

/* ==========================================================================
   32 · IL LOGO CHE SI MUOVE
   Nel piede della pagina il logo e' in cinque pezzi (marchio/sorgenti/
   livelli.py): la base con la scritta e le doji, le due manine, le due scie.
   Le manine salutano a giro, le scie tremano con loro, una luce passa sulla
   scritta, e dietro le due candele respira un alone verde e uno rosso.
   Fermo, e' il logo intero. Nelle pagine interne in alto resta il segno delle doji.
   ========================================================================== */
.sl{position:relative;display:block;aspect-ratio:875 / 775;isolation:isolate}
.sl img{display:block;height:auto;max-width:none}
.sl__base{position:relative;width:100%}
.sl__pezzo{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform-origin:var(--ox,50%) var(--oy,50%)}
.sa-js .sl__mano--s{animation:sl-saluta 5.4s ease-in-out 1.3s infinite}
.sa-js .sl__mano--d{animation:sl-saluta-d 5.4s ease-in-out 1.55s infinite}
@keyframes sl-saluta{
  0%,48%,100%{transform:rotate(0)}
  8% {transform:rotate(-12deg)}
  17%{transform:rotate(8deg)}
  26%{transform:rotate(-9deg)}
  35%{transform:rotate(6deg)}
  42%{transform:rotate(-2deg)}
}
@keyframes sl-saluta-d{
  0%,48%,100%{transform:rotate(0)}
  8% {transform:rotate(12deg)}
  17%{transform:rotate(-8deg)}
  26%{transform:rotate(9deg)}
  35%{transform:rotate(-6deg)}
  42%{transform:rotate(2deg)}
}
.sa-js .sl__scia--s{animation:sl-scia 5.4s ease-in-out 1.3s infinite}
.sa-js .sl__scia--d{animation:sl-scia 5.4s ease-in-out 1.55s infinite}
@keyframes sl-scia{
  0%,48%,100%{opacity:1;transform:none}
  8%,26%     {opacity:.3;transform:scale(.92)}
  17%,35%    {opacity:1;transform:scale(1.06)}
}
/* La luce che passa sulla scritta: una banda chiara ritagliata sulla forma del logo. */
.sl__luce{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;
  -webkit-mask:url(/assets/logo/base.png?v=5e796fae) 0 0 / 100% 100% no-repeat;
  mask:url(/assets/logo/base.png?v=5e796fae) 0 0 / 100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 42%,rgba(210,240,255,.95) 50%,transparent 58%) 0 0 / 300% 100% no-repeat;
}
.sa-js .sl__luce{animation:sl-luce 6.5s ease-in-out 2.2s infinite both}
@keyframes sl-luce{0%{background-position:0 0}32%,100%{background-position:100% 0}}
/* Gli aloni dietro le due doji, uno verde e uno rosso, che respirano a turno. */
.sl__alone{position:absolute;z-index:-1;border-radius:50%;filter:blur(12px);opacity:.4;pointer-events:none}
.sl__alone--su{left:69%;top:60%;width:17%;height:34%;background:var(--candela-su)}
.sl__alone--giu{left:80%;top:62%;width:17%;height:32%;background:var(--candela-giu)}
.sa-js .sl__alone--su{animation:sl-alone 3.2s ease-in-out infinite alternate}
.sa-js .sl__alone--giu{animation:sl-alone 3.2s ease-in-out 1.6s infinite alternate}
@keyframes sl-alone{from{opacity:.12}to{opacity:.62}}


/* ==========================================================================
   Ritocchi dopo la revisione del 2026-10-01
   ========================================================================== */
/* Il diario sul telefono: le righe vanno a capo invece di perdere la fine. */
@media(max-width:560px){
  .sai__righe{font-size:12px;min-height:calc(6 * 1.5em + 15px)}
  .sai__righe li{white-space:normal;align-items:flex-start;line-height:1.5}
  .sai__righe li::after{margin-top:.55em}
  .sai__righe.is-js li.is-scrive::after{margin-top:.15em}
}

/* Il velo del video quando il browser non lo fa partire da solo: invece di
   "e' gia' partito" dice di toccarlo. I comandi, finche' l'audio non c'e',
   non si vedono e non prendono nemmeno il tasto Tab. */
.sa-pl__su-t .sa-pl__su-fermo{display:none}
.sa-pl.is-pausa:not(.is-audio) .sa-pl__su-t > :not(.sa-pl__su-fermo){display:none}
.sa-pl.is-pausa:not(.is-audio) .sa-pl__su-t > .sa-pl__su-fermo{display:block}
.sa-pl:not(.is-audio) .sa-pl__cmd{visibility:hidden}

/* Il banner dei cookie. Sul telefono sta in alto: copre il logo per un
   attimo e lascia libero il bottone della prima schermata. Sul computer sta
   in basso a destra, sopra il telefono disegnato, lontano dalla colonna del
   testo e dal suo bottone. */
@media(max-width:820px){
  .sa-ck{top:calc(10px + env(safe-area-inset-top));bottom:auto;transform:translateX(-50%) translateY(-170%)}
  .sa-ck.is-su{transform:translateX(-50%) translateY(0)}
  .sa-barra-on .sa-ck{bottom:auto}
}
@media(min-width:821px){
  .sa-ck{left:auto;right:16px;width:min(46vw,600px);transform:translateY(170%)}
  .sa-ck.is-su{transform:none}
}

/* "Preferenze cookie" in fondo alla pagina, e il bottone nella Privacy: si
   leggono come link, ma sono bottoni, perche' aprono il banner. */
.sa-foot nav{flex-wrap:wrap;row-gap:4px}
.sa-foot nav .sa-foot__ck{font:inherit;color:#8195B4;background:none;border:0;padding:0;cursor:pointer}
.sa-foot nav .sa-foot__ck:hover{color:#fff}
.sa-prosa .sa-prosa__ck{font:inherit;color:var(--azzurro);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Il logo animato nel piede, al posto dell'immagine ferma (Zago, 2026-10-01). */
.sa-foot__marchio .sl{width:140px}
@media(max-width:820px){ .sa-foot__marchio .sl{width:112px} }
/* Sui telefoni stretti "Preferenze cookie" va su una riga sua, senza il
   separatore appeso in fondo alla riga di sopra. */
@media(max-width:400px){
  .sa-foot nav > span:last-of-type{display:none}
  .sa-foot nav .sa-foot__ck{flex-basis:100%;text-align:center}
}

/* Immagini e video non si trascinano e non si salvano col dito o col tasto
   destro (Zago, 2026-10-01). Scoraggia, non impedisce: uno screenshot resta
   sempre possibile. Il resto lo fa main.js, avviaImmagini. */
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Il bottone della barra fissa chiama l'attenzione ogni sei secondi, oltre al
   riflesso che ha gia': un salto con un piccolo rimbalzo, l'aereo che parte e
   torna, un'onda di luce che si allarga attorno (Zago, 2026-10-01). L'onda e'
   un'ombra e non un ::after: il bottone taglia quello che sporge. */
.sa-fissa .sa-btn{animation:sa-richiamo 6s cubic-bezier(.3,.7,.3,1) 2.5s infinite}
@keyframes sa-richiamo{
  0%,76%,100%{transform:none;box-shadow:0 10px 30px rgba(45,123,255,.32),0 0 0 0 rgba(85,200,255,.6),inset 0 1px 0 rgba(255,255,255,.45)}
  80%{transform:translateY(-8px) scale(1.035)}
  84%{transform:translateY(0) scale(.98)}
  87%{transform:translateY(-3px) scale(1.01)}
  90%{transform:none}
  94%{box-shadow:0 10px 30px rgba(45,123,255,.32),0 0 0 16px rgba(85,200,255,0),inset 0 1px 0 rgba(255,255,255,.45)}
}
.sa-fissa .sa-btn svg{animation:sa-decolla 6s ease-in-out 2.5s infinite}
@keyframes sa-decolla{
  0%,78%,100%{transform:none;opacity:1}
  83%{transform:translate(12px,-10px) rotate(-10deg);opacity:0}
  84%{transform:translate(-12px,10px);opacity:0}
  90%{transform:none;opacity:1}
}

/* Il bottone della prima schermata, un po' piu' largo. */
.sh__dopo .sa-btn{width:min(100%,330px)}
@media(min-width:960px){ .sh__dopo .sa-btn{width:400px} }

/* ==========================================================================
   33 · MOTION RIDOTTO
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sa-js .sa-rev{opacity:1;transform:none}
  /* il nastro fermo diventa una fila che va a capo, senza i doppioni */
  .sm-nastro{mask-image:none;-webkit-mask-image:none;padding-left:16px;padding-right:16px}
  .sm-nastro__pista{flex-wrap:wrap;justify-content:center;width:auto}
  .sm-nastro__pista [aria-hidden="true"]{display:none}
  .sh__fondo{display:none}
}