/* Fandex — foglio unico. Regia: la luce attraversa il sito. Il colore sta solo sulla luce
   (raggi, frange, riflessi del vetro), mai sul testo. Si animano solo transform e opacity,
   con una sola curva; ogni movimento parte, arriva e si ferma. */
@font-face{font-family:"Manrope";src:url(/assets/font/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Caxo";src:url(/assets/font/Caxo.woff2) format("woff2");font-display:swap}
/* riserva calibrata: quando Manrope arriva il testo non si sposta */
@font-face{font-family:"Manrope-fb";src:local("Arial");size-adjust:104%;ascent-override:98%;descent-override:28%;line-gap-override:0%}

:root{
  --fondo:#050e13;--fondo-2:#08161d;--testo:#eaf3f4;--testo-2:#9aaeb5;--linea:#26383f;--campo:#607079;
  --via-web:#20dbe1;--via-mail:#168dde;--via-tel:#55d88a;--via-social:#f56297;--via-studio:#eeda76;
  --frangia:linear-gradient(90deg,transparent,#7b5cff66 30%,#fff 50%,#ffb13a66 70%,transparent);
  --arrivo:cubic-bezier(.2,0,0,1);--pad:clamp(20px,5vw,80px);--hd:68px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--fondo);color:var(--testo);font:400 17px/1.6 "Manrope","Manrope-fb",Arial,sans-serif;font-variant-numeric:lining-nums}
@media (min-width:901px){body{font-size:18px}}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:750;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,1.6rem + 4.2vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
h2{font-size:clamp(30px,1.2rem + 2.6vw,56px)}
h3{font-size:clamp(21px,1rem + .6vw,28px);font-weight:700;line-height:1.2}
p{text-wrap:pretty}
.lead{font-size:clamp(19px,1rem + .35vw,22px);line-height:1.45;color:var(--testo);font-weight:450}
.muto{color:var(--testo-2)}
.eti{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2)}
.eti b{color:var(--testo);margin-right:10px;font-weight:700}
.cifra{font-size:clamp(44px,2rem + 2vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.n{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.fonte{font-size:13px;color:var(--testo-2)}
.fonte a{color:var(--testo-2)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.misura{max-width:68ch}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--testo);color:var(--fondo);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--via-web);outline-offset:4px}

/* ── header ─────────────────────────────────────────────── */
.hd{position:fixed;inset:0 0 auto;z-index:40;height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--pad);color:var(--testo);transition:color .3s}
.hd::before{content:"";position:absolute;inset:0;background:var(--fondo);border-bottom:1px solid var(--linea);opacity:0;z-index:-1}
.interna .hd::before{opacity:.96}
@supports (animation-timeline:scroll()){.interna .hd::before{opacity:0;animation:vela linear both;animation-timeline:scroll(root);animation-range:0 160px}}
@keyframes vela{to{opacity:.96}}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none}
.marchio .wm{font:22px/1 "Caxo",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.lente-mark{width:26px;height:26px;view-transition-name:lente;color:var(--testo)}
.nav{display:flex;gap:28px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--testo-2);padding:8px 0;position:relative;transition:color .3s}
.nav a:hover,.nav a[aria-current=page]{color:var(--testo)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .18s var(--arrivo)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid var(--via-web);border-radius:40px;color:var(--via-web);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:background .18s,color .18s,border-color .3s}
.cta:hover{background:var(--via-web);color:var(--fondo)}
.cta:active{transform:scale(.98)}
.progress{position:fixed;left:0;right:0;top:var(--hd);height:2px;z-index:41;background:var(--testo);transform-origin:left;transform:scaleX(0);display:none}
@supports (animation-timeline:scroll()){.interna .progress{display:block;animation:avanza linear both;animation-timeline:scroll(root)}}
@keyframes avanza{to{transform:scaleX(1)}}
/* quando la schermata in vista è quella chiara, header e indicatore passano all'inchiostro */
.su-chiaro .hd,.su-chiaro .passo{--testo:#08161c;--testo-2:#3f545c;--linea:#b9c7cb}
.su-chiaro .hd .cta{color:#08161c;border-color:#08161c}
.su-chiaro .hd .cta:hover{background:#08161c;color:#e8f0f1}

/* ── barra in basso e menu (telefono) ───────────────────── */
.bbar,.menu{display:none}
@media (max-width:900px){
  :root{--hd:60px}
  .nav,.hd .cta{display:none}
  .bbar{display:flex;position:fixed;inset:auto 0 0;z-index:45;justify-content:space-between;align-items:center;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));background:#070f14f2;border-top:1px solid var(--linea)}
  .bbar button{min-height:44px;min-width:88px;background:none;border:0;color:var(--testo);font:700 12px/1 inherit;font-family:inherit;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:0}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .menu{display:block;position:fixed;inset:0;z-index:44;background:var(--fondo);padding:calc(var(--hd) + 28px) var(--pad) 120px;transform:translateX(-100%);visibility:hidden;transition:transform .36s var(--arrivo),visibility 0s .36s}
  .menu.aperto{transform:none;visibility:visible;transition:transform .36s var(--arrivo)}
  .menu::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--testo);box-shadow:0 0 8px #fff}
  .menu a{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;text-decoration:none;padding:10px 0}
  .menu a.acc{color:var(--via-web)}
}

/* ── pulsanti e link ────────────────────────────────────── */
.link{display:inline-flex;gap:10px;align-items:center;font-weight:700;text-decoration:none;border-bottom:1px solid var(--campo);padding:6px 0;min-height:44px}
.link span{transition:transform .18s var(--arrivo)}
.link:hover span{transform:translateX(3px)}
.link:hover{border-color:var(--testo)}

/* ── gli arrivi: un sistema solo ─────────────────────────────
   .rv sale e compare in ordine (--d); i titoli .righe salgono riga per riga da una fessura;
   il taglio di luce (frangia) passa una volta sul blocco. Scatta quando il blocco è in vista. */
.righe .r{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.righe .r>span{display:block}
.js .scr .rv,.js .arriva>*{opacity:0;transform:translateY(22px)}
.js .scr .righe .r>span{transform:translateY(106%)}
.js :is(.scr.vista,.blocco.vista) .rv,.js .arriva.dentro>*{opacity:1;transform:none;transition:opacity .5s var(--arrivo),transform .8s var(--arrivo);transition-delay:calc(var(--d,0) * 90ms + 180ms)}
.js :is(.scr.vista,.blocco.vista) .righe .r>span{transform:none;transition:transform .9s var(--arrivo);transition-delay:calc(var(--l,0) * 90ms + 60ms)}
.arriva{position:relative}
/* la testata di una pagina interna c'è subito (è il contenuto principale): passa solo la luce */
.js .arriva.subito>*{opacity:1;transform:none}
.js .arriva::before{content:"";position:absolute;top:-12px;bottom:-12px;left:0;width:90px;z-index:4;pointer-events:none;background:var(--frangia);opacity:0;transform:translateX(-100px)}
.js .arriva.dentro::before{animation:passa .7s var(--arrivo) both}
@keyframes passa{0%{opacity:0;transform:translateX(-100px)}20%{opacity:.7}100%{opacity:0;transform:translateX(min(1100px,92vw))}}
/* rete di sicurezza: se lo script non arriva, dopo 2,5 s si vede tutto */
.js:not(.js-ok) .scr .rv,.js:not(.js-ok) .arriva>*{animation:mostra .01s 2.5s forwards}
.js:not(.js-ok) .scr .righe .r>span,.js:not(.js-ok) .hero-copy>*{animation:mostra .01s 2.5s forwards}
@keyframes mostra{to{opacity:1;transform:none}}

/* ── home: materia e luce delle schermate ─────────────────── */
.scr{position:relative;padding:calc(var(--hd) + 40px) var(--pad) 72px;isolation:isolate}
.scr .in{position:relative;z-index:2;max-width:1180px;margin-inline:auto;width:100%}
.luce{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.luce>*{position:absolute}
.luce .pozza{inset:-20%;background:radial-gradient(ellipse 50% 45% at var(--x,70%) var(--y,40%),var(--c,#20dbe11c),transparent 70%)}
/* il taglio di luce sul bordo: lo attraversi passando da una schermata all'altra */
.scr+.scr::before{content:"";position:absolute;z-index:3;pointer-events:none;left:0;top:0;height:1px;width:100%;background:var(--frangia);opacity:.55}
.due{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
@media (min-width:901px){.due{grid-template-columns:1.05fr .95fr}}
.home .scr h2{margin:14px 0 22px;font-size:clamp(36px,1rem + 3vw,66px);letter-spacing:-.035em;line-height:1.02}
.nobr{white-space:nowrap}
.scr p+p{margin-top:16px}
.fermo{font-size:clamp(21px,1rem + .8vw,30px);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--testo)}

/* hero: la sequenza si posa sul fotogramma 4K */
.hero{min-height:100svh;padding:0;display:grid;align-items:end;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.vetro{position:absolute;inset:0}
.hero-media img,.hero-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-media canvas{display:none}
/* la tela copre l'immagine 4K già caricata sotto; a fine sequenza la tela si dissolve */
.seq .hero-media canvas{display:block;background:var(--fondo);transition:opacity .45s var(--arrivo)}
.seq .hero.posata .hero-media canvas{opacity:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#050e1399 82%,var(--fondo));pointer-events:none;z-index:1}
.hero-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(84px,11vh,120px)}
.wm-grande{font:clamp(60px,min(10.5vw,17svh),184px)/.9 "Caxo",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.regolo{width:64px;height:1px;background:linear-gradient(90deg,var(--testo),transparent);margin:20px 0 14px}
.claim{font-size:clamp(20px,1rem + .9vw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.25;max-width:28ch}
.servizi{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2)}
.scorri{margin-top:20px;display:inline-flex;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2)}
@media (min-width:901px){.home .hero .scorri{display:none}}
.js .hero-copy>*:not(h1){opacity:0;transform:translateY(14px)}
/* la frase principale c'è subito (sul telefono è il contenuto più grande: l'LCP), si muove soltanto */
.js .hero-copy>.claim{opacity:1}
.js .hero.vista .hero-copy>*{opacity:1;transform:none;transition:opacity .5s var(--arrivo),transform .8s var(--arrivo);transition-delay:calc(var(--d,0) * 90ms + 900ms)}

/* 02 · lo stampo e la mano. Gli undici siti banali vengono stampati: compaiono di colpo, in serie,
   tutti uguali. Quello di Fandex no: l'anello della lente diventa la sua cornice (cerchio → rettangolo),
   dentro si disegna tratto per tratto, poi si stacca dalla griglia e gli altri si spengono.
   I tempi contano da quando la schermata entra (.vista). */
.stampi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
.stampo{position:relative;aspect-ratio:16/11;border:1px solid #ffffff24;padding:10%;display:grid;grid-template-rows:auto 1fr auto auto auto;gap:8%}
.stampo b{height:1px;background:#ffffff4d;width:42%}
.stampo u{border:1px solid #ffffff1a;display:block}
.stampo s{height:1px;background:#ffffff33;display:block}
.stampo s:last-child{width:60%}
.js .scr .stampo:not(.vero){opacity:0;transform:scale(1.05)}
.js :is(.scr.vista,.blocco.vista) .stampo:not(.vero){opacity:1;transform:none;border-color:#ffffff1c;transition:opacity 0s linear calc(var(--k) * 55ms + 380ms),transform .18s var(--arrivo) calc(var(--k) * 55ms + 380ms),border-color .5s var(--arrivo) 1.95s}
.js :is(.scr.vista,.blocco.vista) .stampo:not(.vero)>*{opacity:.6;transition:opacity .5s var(--arrivo) 1.95s}
.stampo.vero{display:block;border:0;padding:0;z-index:3}
.cornice{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);border:1.5px solid var(--testo);border-radius:3px}
.js .scr .cornice{opacity:0;width:var(--diam,150px);height:var(--diam,150px);border-radius:50%}
.js :is(.scr.vista,.blocco.vista) .cornice{opacity:1;width:100%;height:100%;border-radius:3px;transition:opacity .25s linear .8s,width .55s var(--arrivo) 1.05s,height .55s var(--arrivo) 1.05s,border-radius .55s var(--arrivo) 1.05s}
.mano{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--testo);stroke-linecap:round;stroke-linejoin:round}
.mano .sottile{stroke-width:1.4;opacity:.75}.mano .titolo{stroke-width:6.5}.mano .linea{stroke-width:1.5}.mano .accento{stroke:var(--via-web);stroke-width:1.5}
.mano path{stroke-dasharray:1;stroke-dashoffset:0}
.js .scr .mano path{stroke-dashoffset:1}
.js :is(.scr.vista,.blocco.vista) .mano path{animation:traccia .42s var(--arrivo) forwards;animation-delay:calc(var(--t) * 80ms + 1.3s)}
.stampo.vero::before{content:"";position:absolute;inset:-70%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#9fe6ee1f,transparent)}
.js .scr .stampo.vero::before{opacity:0}
.js :is(.scr.vista,.blocco.vista) .stampo.vero::before{opacity:1;transition:opacity .6s var(--arrivo) 1.95s}
.js :is(.scr.vista,.blocco.vista) .stampo.vero{transform:scale(1.22);transition:transform .5s var(--arrivo) 1.95s}

/* i dieci secondi: quadrante a filo come gli anelli della lente; la lancetta corre fino al 10 con il
   numero che conta (stessa curva, stessa durata), poi le parole scorrono fuori da dietro il numero */
.dieci{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,3.4vw,44px)}
.quadrante{width:clamp(72px,6.6vw,100px);height:auto;overflow:visible}
.tacca{stroke:#ffffff59;stroke-width:1}.tacca.lunga{stroke:#ffffffbf;stroke-width:1.6}
.spicchio{fill:none;stroke:#ffffff3d;stroke-width:55;stroke-dasharray:10 60;stroke-dashoffset:0}
.lancetta{stroke:var(--testo);stroke-width:1.8;stroke-linecap:round;transform-origin:60px 60px;transform:rotate(60deg);filter:drop-shadow(0 0 3px #ffffffaa)}
.perno{fill:var(--testo)}
.js .scr .spicchio{stroke-dashoffset:10}
.js .scr .lancetta{transform:none}
.js :is(.scr.vista,.blocco.vista) .spicchio{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--arrivo) calc(var(--d) * 90ms + 380ms)}
.js :is(.scr.vista,.blocco.vista) .lancetta{transform:rotate(60deg);transition:transform 1.1s var(--arrivo) calc(var(--d) * 90ms + 380ms)}
.dieci-n{font-size:clamp(64px,2.4rem + 3.4vw,112px);font-weight:800;letter-spacing:-.055em;line-height:.8;font-variant-numeric:tabular-nums}
.dieci-t{overflow:hidden;padding-left:2px}
.dieci-t>*{display:block}
.dieci-t .eti{color:var(--testo)}
.dieci-t p{margin-top:6px;font-size:15px;line-height:1.4;max-width:30ch;color:var(--testo)}
.dieci-t small{margin-top:6px;font-size:12px;color:var(--testo-2)}
.js .scr .dieci-t>*{transform:translateX(-105%)}
.js :is(.scr.vista,.blocco.vista) .dieci-t>*{transform:none;transition:transform .7s var(--arrivo) calc(var(--d) * 90ms + 1.45s)}
.js :is(.scr.vista,.blocco.vista) .dieci-t>:nth-child(2){transition-delay:calc(var(--d) * 90ms + 1.55s)}
.js :is(.scr.vista,.blocco.vista) .dieci-t>:nth-child(3){transition-delay:calc(var(--d) * 90ms + 1.65s)}

/* la parola chiave: sotto le si accende un filo di luce */
.chiave{position:relative;display:inline-block}
.chiave::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:3px;border-radius:2px;background:linear-gradient(90deg,#7b5cff,#fff 30%,#fff 70%,#ffb13a);box-shadow:0 0 12px #ffffffaa;transform-origin:left}
.chiaro .chiave::after{background:linear-gradient(90deg,var(--via-mail),var(--via-tel),var(--via-social),var(--via-studio));box-shadow:none}
.js .scr .chiave::after{transform:scaleX(0)}
.js :is(.scr.vista,.blocco.vista) .chiave::after{transform:none;transition:transform .7s var(--arrivo) 1.05s}

/* 03 · la presenza digitale: il sito è la lente al centro, gli altri tasselli ci portano la gente */
.figura.blocco{display:grid;justify-items:center}
.orbita{position:relative;width:min(100%,440px);aspect-ratio:1;justify-self:center}
.orbite{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anello{fill:none;stroke:var(--linea);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.flusso{stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .scr .anello,.js .scr .flusso{stroke-dashoffset:1}
.js :is(.scr.vista,.blocco.vista) .anello{animation:traccia .9s var(--arrivo) forwards;animation-delay:calc(var(--k) * 140ms + 500ms)}
.js :is(.scr.vista,.blocco.vista) .flusso{animation:traccia .6s var(--arrivo) forwards;animation-delay:calc(var(--k) * 260ms + 1500ms)}
.centro-o{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--testo);background:#fff;display:grid;place-content:center;justify-items:center;text-align:center;gap:3px;padding:10%}
.centro-o::after{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,#ffffffee 30%,#ffffff00 68%);z-index:-1}
.js .scr .centro-o::after{opacity:0}
.js :is(.scr.vista,.blocco.vista) .centro-o::after{opacity:1;transition:opacity .8s var(--arrivo) 2.35s}
.centro-o b{font-size:clamp(16px,1.5vw,20px);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.centro-o span{font-size:12.5px;color:var(--testo-2);line-height:1.35}
.ico-o{width:28px;height:28px;fill:none;stroke:var(--testo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nodo{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:12px;transform:translate(-26px,-50%)}
.nodo i{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--c);box-shadow:0 0 0 5px #e8f0f1,0 0 18px var(--c);transition:transform .45s var(--arrivo)}
.nodo .ico-o{width:24px;height:24px}
.nodo p{margin:0;font-size:13px;line-height:1.3;width:max-content;max-width:150px}
.nodo b{display:block;font-size:15px}
.nodo span{color:var(--testo-2)}
.nodo.sx,.nodo.dx{flex-direction:column;align-items:flex-start;gap:8px;transform:translate(-26px,-26px)}
.nodo.dx{align-items:flex-end;text-align:right;transform:translate(calc(-100% + 26px),-26px)}
.nodo:hover i{transform:scale(1.08)}
.js .scr .nodo{opacity:0}
.js .scr .nodo i{transform:scale(.6)}
.js :is(.scr.vista,.blocco.vista) .nodo{opacity:1;transition:opacity .4s var(--arrivo);transition-delay:calc(var(--k) * 260ms + 1.1s)}
.js :is(.scr.vista,.blocco.vista) .nodo i{transform:none;transition-delay:calc(var(--k) * 260ms + 1.1s)}
.stat-o{margin-top:26px;border-top:1.5px solid var(--testo);padding-top:12px;max-width:36ch}
.stat-o .cifra{font-size:clamp(52px,2rem + 3.2vw,96px)}
.stat-o p{margin-top:8px;color:var(--testo-2)}

/* 04 · le garanzie: le quattro paure, una alla volta */
.garanzie{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2vw,26px) clamp(20px,3vw,40px)}
@media (min-width:640px){.garanzie{grid-template-columns:1fr 1fr}}
.garanzie li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding-top:16px;border-top:1px solid var(--linea)}
.garanzie li::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:1px;background:var(--frangia)}
.garanzie b{display:block;font-size:clamp(20px,1rem + .6vw,26px);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.garanzie p{margin-top:6px;font-size:15px;color:var(--testo-2);line-height:1.5}

/* 05 · la firma: il volto accanto al pulsante (monogramma finché non c'è la foto) */
.firma-volto{display:flex;align-items:center;gap:14px}
.volto{width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;object-fit:cover;font:22px/1 "Caxo",sans-serif;border:1.5px solid var(--testo);box-shadow:0 0 0 4px var(--fondo),0 0 22px #ffffff33}
.fila-cta{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:22px}
.ritratto{position:relative;aspect-ratio:4/5;max-width:360px;border:1px solid var(--linea);display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#0f2630,var(--fondo-2))}
.ritratto::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--frangia)}
.ritratto span{font:72px/1 "Caxo",sans-serif}

.pila{display:flex;gap:2px;height:20px;font-size:11.5px;font-weight:700}
.pila span{display:grid;place-items:center;flex:var(--n);transform-origin:left}
.pila .p{background:var(--testo);color:var(--fondo)}.pila .a{background:#56676d;color:#fff}.pila .i{background:#a9b6b9;color:var(--fondo)}.pila .o{border:1px dashed var(--campo);color:var(--testo-2)}
.leg{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-2)}
.leg i{display:inline-block;width:12px;height:8px;margin-right:6px;vertical-align:0}

/* la schermata chiara: la luce piena */
.scr.chiaro{--testo:#08161c;--testo-2:#3f545c;--linea:#b9c7cb;--campo:#7d8e94;background:#e8f0f1;color:var(--testo)}
.scr.chiaro .luce .pozza{background:radial-gradient(ellipse 45% 60% at 0% 50%,#ffffff,transparent 70%),radial-gradient(ellipse 30% 40% at 100% 0%,#f5629714,transparent 70%),radial-gradient(ellipse 35% 45% at 100% 100%,#168dde14,transparent 70%)}
.coppia{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:640px){.coppia{grid-template-columns:1fr 1fr}}
.stat p{margin-top:12px;color:var(--testo-2)}
.stat .cifra{font-size:clamp(52px,2rem + 3.6vw,104px)}

/* le icone si disegnano */
.ico{width:32px;height:32px;fill:none;stroke:var(--testo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico path{stroke-dasharray:1;stroke-dashoffset:0}
.js .scr .ico path{stroke-dashoffset:1}
.js :is(.scr.vista,.blocco.vista) .ico path{animation:traccia .9s var(--arrivo) forwards;animation-delay:calc(var(--k) * 180ms + 600ms)}

/* 09 · le carte con il riflesso del vetro */
.carte{display:grid;gap:20px}
@media (min-width:640px){.carte{grid-template-columns:1fr 1fr}}
.carta{text-decoration:none;display:block;position:relative}
.carta picture{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--fondo-2);position:relative}
.carta img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--arrivo)}
.carta:hover img{transform:scale(1.03)}
.carta picture{outline:1px solid var(--linea);outline-offset:-1px;transition:outline-color .18s}
.carta:hover picture{outline-color:var(--testo)}
.carta h3{margin-top:14px}
.carta p{color:var(--testo-2);font-size:15px;margin-top:4px}


/* desktop: la home è un palco. Le schermate stanno una sopra l'altra, ne è in scena una per volta;
   la lente (l'immagine della hero) resta sul palco e cambia ruolo da una schermata all'altra.
   Le schermate non fanno contesto di impilamento: la lente (z 1) passa sopra le luci (z 0)
   di tutte e sotto i testi (z 2) di tutte. */
@media (min-width:901px){
  body.home{overflow:hidden}
  .home .track{position:relative;height:100svh;overflow:hidden}
  .home .scr{position:absolute;inset:0;height:100svh;isolation:auto;display:grid;align-content:center;visibility:hidden}
  /* chi esce resta in scena finché la sua luce non è sfumata */
  .home .scr{transition:visibility 0s .6s}
  .home .scr.attiva,.home .hero{visibility:visible;transition:visibility 0s}
  .home .hero{align-content:end}
  .home .scr+.scr::before{display:none}
  /* la trasformazione sta sulla lente, il ritaglio sul vetro dentro: animati sullo stesso elemento, Chrome li disegna fuori posto */
  .home .hero-media{z-index:1;transform-origin:var(--lx,0) var(--ly,0);will-change:transform}
  .home .scr .in,.home .footer-mini,.home .hero-copy,.home .hero::after{transition:opacity .28s var(--arrivo)}
  .home .scr.fuori .in,.home .scr.fuori .footer-mini,.home .hero.fuori .hero-copy,.home .hero.fuori::after{opacity:0;pointer-events:none}
  .home .scr:not(.hero) .luce{opacity:0;transition:opacity .6s var(--arrivo)}
  .home .scr.attiva .luce{opacity:1}
  .home .scr.chiaro{background:none}
  .home .scr.chiaro .luce{background:#e8f0f1;transition:none}
  /* l'onda: la luce del sito Fandex invade la pagina e diventa lo sfondo della 03 (la dipinge lo script) */
  .home .onda{position:absolute;inset:0;z-index:0;pointer-events:none}
  /* 04 · il punto e i fili: la luce rimasta dal «tuo sito» tende un filo per ogni garanzia */
  .home .fili{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;filter:drop-shadow(0 0 3px #ffffffb3);transition:opacity .8s var(--arrivo)}
  .home .punto{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px #ffffff99;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s var(--arrivo)}
  /* ogni garanzia arriva quando il suo filo la tocca, non a tempo */
  .palco :is(.scr.vista,.blocco.vista) .garanzie li.rv{opacity:0;transform:translateY(10px);transition:opacity .22s var(--arrivo),transform .3s var(--arrivo);transition-delay:calc((3 - var(--k)) * 60ms)}
  .palco :is(.scr.vista,.blocco.vista) .garanzie li.rv.toccata{opacity:1;transform:none;transition:opacity .45s var(--arrivo),transform .6s var(--arrivo)}
  .palco .scr .garanzie .ico path{animation:none!important;stroke-dashoffset:1;transition:stroke-dashoffset .25s var(--arrivo)}
  .palco :is(.scr.vista,.blocco.vista) .garanzie li.toccata .ico path{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--arrivo) .15s}
  /* 05 · la lente dei contatti nasce dove atterra il punto; ogni canale si accende quando il suo raggio arriva */
  .palco .canali svg>:not(.raggio){opacity:0;transition:opacity .2s var(--arrivo) .45s}
  .palco .canali.dentro svg>:not(.raggio){opacity:1;transition:opacity .25s var(--arrivo)}
  .palco .canale>div{opacity:0;transition:opacity .2s var(--arrivo) calc((3 - var(--i,0)) * 50ms)}
  .palco .canali.dentro .canale>div{opacity:1;transition:opacity .4s var(--arrivo) calc(.45s + var(--i,0) * 60ms)}
  .home .ft{display:none}
  .home .footer-mini{position:absolute;left:var(--pad);right:var(--pad);bottom:72px}
}
@media (max-width:900px){
  .home .hero-copy{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .home .hero .regolo{margin:12px 0 10px}
  .home .hero .scorri{margin-top:12px}
  .home .scr{overflow:clip}
  .home .scr .luce{inset:-10% 0}
  .home .scr:not(.hero){padding-block:56px 48px}
  .home .scr h2{margin:10px 0 16px}
  .home .due{gap:28px}
  .stampi{grid-template-columns:repeat(3,1fr)}
  .stampo:nth-child(n+7){display:none}
  .dieci{gap:14px}
  .dieci-t p{font-size:14px}
  .orbita{width:min(100%,360px)}
  .nodo p{max-width:120px;font-size:12px}
  .nodo b{font-size:13.5px}
  .centro-o span{font-size:11px}
  /* in home i contatti sono appena passati (schermata 05): il footer tiene solo i collegamenti */
  .home .ft .cols>div:first-child,.home .ft .cols>div:last-child{display:none}
  .home .ft{padding-top:32px}
}
.passo{display:none}
@media (min-width:901px){
  .passo{display:flex;position:fixed;left:var(--pad);right:var(--pad);bottom:22px;z-index:30;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2);pointer-events:none;transition:color .3s}
  .passo>*{pointer-events:auto}
  .punti{display:flex;gap:4px;align-items:center}
  .punti a{width:20px;height:28px;display:grid;place-items:center}
  .punti a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--campo);transition:transform .2s,background .2s}
  .punti a[aria-current=step]::before{background:var(--via-web);transform:scale(1.6)}
  .su-chiaro .punti a[aria-current=step]::before{background:#08161c}
  .passo button{background:none;border:1px solid var(--linea);color:var(--testo);width:40px;height:36px;font:inherit;cursor:pointer;transition:border-color .3s,color .3s}
  .passo button:hover{border-color:var(--testo)}
  .contatore{min-width:210px;text-align:right;font-variant-numeric:tabular-nums}
}

/* ── contatti: i raggi atterrano sui canali (M7) ─────────── */
.canali{position:relative;display:grid;grid-template-columns:minmax(80px,28%) 1fr;align-items:stretch}
.canali svg{grid-column:1;width:100%;height:100%;overflow:visible}
.canali ul{grid-column:2;list-style:none;margin:0;padding:0}
.canale{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px;padding:18px 0;border-top:1px solid var(--linea);min-height:64px}
.canale:first-child{border-top:0}
.canale .filetto{height:2px;border-radius:2px;background:var(--c);box-shadow:0 0 8px var(--c)}
.canale a,.canale span.v{font-size:clamp(20px,1rem + .8vw,28px);font-weight:700;text-decoration:none;letter-spacing:-.01em}
.canale small{display:block;color:var(--testo-2);font-size:13px;font-weight:500;letter-spacing:0}
.canale a:hover{text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:6px}
.raggio{fill:none;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px currentColor)}
.js .raggio{stroke-dasharray:1;stroke-dashoffset:1}
.js .canali.dentro .raggio{animation:traccia .6s var(--arrivo) forwards;animation-delay:calc(var(--i) * 60ms)}
@keyframes traccia{to{stroke-dashoffset:0}}
.js .canale .filetto{transform:scaleX(0);transform-origin:left}
.js .canali.dentro .canale .filetto{transform:none;transition:transform .3s var(--arrivo) calc(.45s + var(--i) * 60ms)}

/* ── pagine interne ─────────────────────────────────────── */
.interna main{padding-top:var(--hd)}
.testata{position:relative;padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px);overflow:hidden;isolation:isolate}
.testata::before{content:"";position:absolute;inset:-30% -10% -10% 30%;z-index:-1;background:radial-gradient(ellipse 50% 50% at 70% 30%,#20dbe114,transparent 70%),radial-gradient(ellipse 30% 25% at 90% 20%,#168dde12,transparent 70%)}
.testata .fascio-t{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#fff 30%,#fff 70%,transparent);opacity:.5}
.testata h1{margin:16px 0 22px;max-width:18ch}
.testata .lead{max-width:62ch}
.firma{margin-top:22px;font-size:14px;color:var(--testo-2)}
.sez{padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--linea)}
.sez h2{margin-bottom:18px;max-width:22ch}
.sez p+p,.sez p+ul,.sez ul+p{margin-top:14px}
.sez ul,.sez ol{padding-left:20px}
.sez li{margin:6px 0}
.griglia-2{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:901px){.griglia-2{grid-template-columns:1fr 1fr}.con-indice{display:grid;grid-template-columns:220px 1fr;gap:56px}}
.indice{display:none}
@media (min-width:901px){.indice{display:block;position:sticky;top:calc(var(--hd) + 32px);align-self:start;font-size:14px}
  .indice a{display:block;padding:6px 0;color:var(--testo-2);text-decoration:none;border-left:1px solid var(--linea);padding-left:14px}
  .indice a:hover{color:var(--testo);border-color:var(--testo)}}
.indice-m{margin:0 0 8px;border:1px solid var(--linea)}
.indice-m summary{padding:14px 16px;font-weight:700;cursor:pointer;min-height:44px}
.indice-m a{display:block;padding:10px 16px;border-top:1px solid var(--linea);text-decoration:none}
@media (min-width:901px){.indice-m{display:none}}
.nota{border-left:2px solid var(--testo);padding:4px 0 4px 18px;margin:22px 0}
.dopo{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--linea);position:relative;overflow:hidden;isolation:isolate}
.dopo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 40% 60% at 0% 100%,#20dbe10f,transparent 70%)}
.dopo .fila{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;margin-top:22px}
.stat{border-top:1.5px solid var(--testo);padding-top:14px}

/* barre (M5): Italia piena, UE contorno, valore sempre scritto */
.barre{display:grid;gap:16px;margin:22px 0}
.barra .et{font-size:15px;margin-bottom:6px}
.barra .t{display:grid;gap:4px}
.b{height:10px;border-radius:0 3px 3px 0;transform-origin:left;display:flex;align-items:center;position:relative;width:calc(var(--v) * 1%)}
.b.it{background:var(--testo)}
.b.ue{background:transparent;border:1px solid var(--campo)}
.b em{position:absolute;left:calc(100% + 8px);font-style:normal;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.b.ue em{color:var(--testo-2);font-weight:600}
@supports (animation-timeline:view()){.b{animation:cresce linear both;animation-timeline:view();animation-range:entry 10% entry 60%}}
@keyframes cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .arriva .pila span{transform:scaleX(0)}
.js .arriva.dentro .pila span{transform:none;transition:transform .5s var(--arrivo);transition-delay:calc(var(--r,0) * 60ms + var(--k,0) * 90ms + 200ms)}
.tab-r{width:100%;border-collapse:collapse;font-size:15px}
.tab-r td,.tab-r th{padding:10px 8px 10px 0;border-top:1px solid var(--linea);text-align:left;vertical-align:middle}
.tab-r th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-2);font-weight:700}

/* test e calcolatore */
.domande{list-style:none;padding:0;margin:0}
.domande li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--linea)}
.sino{display:flex;gap:6px}
.sino label{position:relative}
.sino input{position:absolute;opacity:0}
.sino span{display:grid;place-items:center;min-width:56px;min-height:44px;border:1px solid var(--campo);font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,color .15s}
.sino input:checked+span{background:var(--testo);color:var(--fondo);border-color:var(--testo)}
.sino input:focus-visible+span{outline:2px solid var(--via-web);outline-offset:2px}
.esito{position:relative;margin-top:28px;border:1px solid var(--testo);padding:24px}
.esito::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--frangia)}
.esito .cifra{margin:6px 0 10px}
.scelte{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.scelte label{position:relative}
.scelte input{position:absolute;opacity:0}
.scelte span{display:grid;place-items:center;min-height:44px;padding:0 16px;border:1px solid var(--campo);border-radius:30px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,color .15s}
.scelte input:checked+span{background:var(--testo);color:var(--fondo);border-color:var(--testo)}
.scelte input:focus-visible+span{outline:2px solid var(--via-web);outline-offset:2px}
fieldset{border:0;padding:18px 0;margin:0;border-top:1px solid var(--linea)}
legend{font-weight:700;padding:0}
.segnaposto{border:1px dashed var(--campo);padding:2px 8px;color:var(--testo-2);font-size:14px}

/* modulo */
.modulo{display:grid;gap:18px;max-width:560px}
.campo{display:grid;gap:6px;font-size:14px;font-weight:600}
.campo input,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--testo);background:transparent;border:0;border-bottom:1px solid var(--campo);padding:12px 0;border-radius:0}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--via-web)}
.campo textarea{min-height:140px;resize:vertical}
.trappola{position:absolute;left:-9999px}
.invia{justify-self:start;background:transparent;cursor:pointer;font-family:inherit}
.risposta{font-size:15px}

/* footer */
.ft{border-top:1px solid var(--linea);padding:48px var(--pad) 32px;font-size:14px;color:var(--testo-2)}
.ft .cols{display:grid;gap:32px;max-width:1180px;margin:0 auto}
@media (min-width:901px){.ft .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ft h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-2);margin-bottom:12px;font-weight:700}
.ft a{display:block;text-decoration:none;padding:4px 0;color:var(--testo)}
.ft a:hover{text-decoration:underline}
.ft .wm{font:22px "Caxo",sans-serif;text-transform:uppercase;color:var(--testo);letter-spacing:.04em}
.ft .legale{max-width:1180px;margin:32px auto 0;padding-top:20px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px}
@media (max-width:900px){.footer-mini{display:none}.home .hd::before{opacity:.96}
  @supports (animation-timeline:scroll()){.home .hd::before{opacity:0;animation:vela linear both;animation-timeline:scroll(root);animation-range:40vh 90vh}}}

/* ── M6 · cambio pagina: la lente resta, la pagina scorre ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:esce .2s var(--arrivo) both}
::view-transition-new(root){animation:entra .28s var(--arrivo) both}
@keyframes esce{to{opacity:0;transform:translateX(-6%)}}
@keyframes entra{from{opacity:0;transform:translateX(6%)}}
html:active-view-transition-type(indietro)::view-transition-old(root){animation-name:esce-i}
html:active-view-transition-type(indietro)::view-transition-new(root){animation-name:entra-i}
@keyframes esce-i{to{opacity:0;transform:translateX(6%)}}
@keyframes entra-i{from{opacity:0;transform:translateX(-6%)}}

/* ── movimento ridotto: a livelli, non spento ──────────────
   via gli spostamenti e il parallasse; restano dissolvenze brevi e i valori finali. */
@media (prefers-reduced-motion:reduce){
  .js .scr .rv,.js .arriva>*,.js .hero-copy>*:not(h1){transform:none!important}
  .js :is(.scr.vista,.blocco.vista) .rv,.js .arriva.dentro>*,.js .hero.vista .hero-copy>*{transition:opacity .15s linear!important;transition-delay:0s!important}
  .js .scr .righe .r>span{transform:none!important;transition:none!important}
  .js .arriva::before{display:none}
  .js .stampo,.js .arriva .pila span,.js .scr .chiave::after,.js .scr .nodo i{transform:none!important;opacity:1!important;transition:none!important}
  .js .scr .nodo{opacity:1!important;transition:none!important}
  .js .scr .centro-o::after{opacity:1!important;transition:none!important}
  .js .scr .cornice,.js .scr .stampo,.js .scr .stampo>*,.js .scr .stampo.vero::before,.js .scr .dieci-t>*,.js .scr .spicchio,.js .scr .lancetta{transition:none!important}
  .js :is(.scr.vista,.blocco.vista) .lancetta{transform:rotate(60deg)!important}.js :is(.scr.vista,.blocco.vista) .spicchio{stroke-dashoffset:0!important}
  .vista .stampo,.vista .stampo>*{transition-delay:0s!important}
  .js .scr .ico path,.js .scr .mano path,.js .raggio,.js .scr .anello,.js .scr .flusso{stroke-dashoffset:0!important;animation:none!important}
  .js .canale .filetto{transform:none}
  .b{animation:none!important}
  .menu{transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:svanisce .15s linear both}
  ::view-transition-new(root){animation-direction:reverse}
  .carta img,.link span{transition:none}
}
@keyframes svanisce{to{opacity:0}}

/* ── all'indietro (desktop): la schermata che si lascia si scompone, cioè il suo arrivo al contrario ──
   Gli stati «non in vista» portano le transizioni d'uscita: l'ultimo elemento arrivato esce per primo.
   In avanti non si vedono (la schermata è già sfumata); all'indietro sono il movimento. */
.palco .scr:not(.vista) .rv{transition:opacity .22s var(--arrivo),transform .3s var(--arrivo);transition-delay:max(0ms,calc((8 - var(--d,0)) * 30ms))}
.palco .scr:not(.vista) .righe .r>span{transition:transform .32s cubic-bezier(.5,0,.75,0);transition-delay:calc((3 - var(--l,0)) * 40ms + 60ms)}
.palco .scr:not(.vista) .chiave::after{transition:transform .2s var(--arrivo)}
/* 02: il sito Fandex torna nella griglia, si cancella tratto per tratto, la cornice torna cerchio; i siti banali si «stampano via» */
.palco .scr:not(.vista) .stampo:not(.vero){transition:opacity 0s linear calc((11 - var(--k)) * 28ms + 120ms),transform 0s,border-color 0s}
.palco .scr:not(.vista) .stampo>*{transition:opacity .2s var(--arrivo)}
.palco .scr:not(.vista) .stampo.vero{transition:transform .3s var(--arrivo)}
.palco .scr:not(.vista) .stampo.vero::before{transition:opacity .25s var(--arrivo)}
.palco .scr .mano path{animation:none!important}
.palco :is(.scr.vista,.blocco.vista) .mano path{stroke-dashoffset:0;transition:stroke-dashoffset .42s var(--arrivo) calc(var(--t) * 80ms + 1.3s)}
.palco .scr:not(.vista) .mano path{transition:stroke-dashoffset .3s var(--arrivo) calc((6 - var(--t)) * 30ms)}
.palco .scr:not(.vista) .cornice{transition:width .35s var(--arrivo) .2s,height .35s var(--arrivo) .2s,border-radius .35s var(--arrivo) .2s,opacity .2s linear .62s}
.palco .scr:not(.vista) .dieci.rv{transition-delay:.35s}
.palco .scr:not(.vista) .spicchio{transition:stroke-dashoffset .4s var(--arrivo)}
.palco .scr:not(.vista) .lancetta{transition:transform .4s var(--arrivo)}
.palco .scr:not(.vista) .dieci-t>*{transition:transform .3s cubic-bezier(.5,0,.75,0)}
/* 03: si spengono i nodi, rientrano i collegamenti, si riavvolgono le orbite; poi sparisce il disegno */
.palco .scr .anello,.palco .scr .flusso{animation:none!important}
.palco :is(.scr.vista,.blocco.vista) .anello{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--arrivo) calc(var(--k) * 140ms + 500ms)}
.palco :is(.scr.vista,.blocco.vista) .flusso{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--arrivo) calc(var(--k) * 260ms + 1500ms)}
.palco .scr:not(.vista) .anello{transition:stroke-dashoffset .4s var(--arrivo) calc((2 - var(--k)) * 60ms + 150ms)}
.palco .scr:not(.vista) .flusso{transition:stroke-dashoffset .3s var(--arrivo) calc((2 - var(--k)) * 60ms)}
.palco .scr:not(.vista) .nodo{transition:opacity .2s var(--arrivo) calc((2 - var(--k)) * 60ms)}
.palco .scr:not(.vista) .nodo i{transition:transform .2s var(--arrivo)}
.palco .scr:not(.vista) .centro-o::after{transition:opacity .2s var(--arrivo)}
.palco .scr:not(.vista) .orbita.rv{transition-delay:.5s}
/* 05: i canali si spengono, i raggi rientrano nella lente */
.palco .canali .raggio{animation:none!important;transition:stroke-dashoffset .4s var(--arrivo) calc((3 - var(--i)) * 60ms + 100ms)}
.palco .canali.dentro .raggio{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--arrivo) calc(var(--i) * 60ms)}
.palco .canale .filetto{transition:transform .25s var(--arrivo) calc((3 - var(--i,0)) * 60ms)}
/* chi rientra all'indietro ricompare com'era: già composto, con la sola dissolvenza del contenitore */
.palco .scr.gia .in *:not(.garanzie li):not(.garanzie li *),.palco .scr.gia .in *::before,.palco .scr.gia .in *::after,.palco .hero.gia .hero-copy>*{transition-duration:0s!important;transition-delay:0s!important}

/* i livelli della regia non occupano spazio nel flusso (senza questa riga, sul telefono il disegno vuoto
   dei fili lasciava 150 px scuri in fondo alla home). Non sul palco: lì misure zero spengono punto e fili */
:where(html:not(.palco)) .home .track>.fili,:where(html:not(.palco)) .home .track>.punto{position:absolute;left:0;top:0;width:0;height:0;overflow:visible}
/* ── il telefono: il pollice è il tempo ─────────────────────────────────────
   Lo scroll resta nativo. Ogni gruppo animato è un blocco con il suo spazio, e parte solo quando è intero
   nella zona di lettura (fra l'header e la barra in basso). I ponti fra le sezioni seguono lo scroll:
   tornando su si riavvolgono da soli. La figura viene prima delle parole. */
@media (max-width:900px){
  .verticale .home .track{position:relative}
  .verticale .home .scr:not(.hero){padding-block:64px 56px}
  .verticale .home .due{gap:44px}
  /* 02: prima la griglia, poi le parole, poi i dieci secondi (si riferiscono alla frase «decide in pochi secondi») */
  .verticale #s2 .figura{display:contents}
  .verticale #s2 .figura>.blocco:first-child{order:-1}
  .verticale #s2 .figura>.blocco:last-child{order:1}
  .verticale #s3 .figura{order:-1}
  /* sul telefono il quadrante parte appena è intero sullo schermo, non dopo la regia del desktop */
  .verticale .dieci.rv{--d:1!important}
  .verticale .stampi{gap:12px}
  .verticale .stampo:first-child{order:-2}
  .verticale .stampo.vero{order:-1}
  .verticale .dieci{margin-top:0}
  .verticale .orbita{width:min(100%,340px)}
  .verticale .garanzie{gap:26px}
  .verticale .garanzie li{padding-top:18px}
}
/* la regia (senza movimento ridotto) */
@media (max-width:900px){
  /* 01 → 02: la lente resta sullo schermo mentre la pagina sale; il sito Fandex le arriva sotto */
  .regia-m .home .hero-media{position:fixed;inset:0;z-index:0;transform-origin:var(--lx,50%) var(--ly,50%);will-change:transform}
  .regia-m .home .hero-copy{opacity:var(--via,1)}
  .regia-m .home .hero::after{opacity:var(--velo,1)}
  /* niente linee fra le sezioni: ogni confine è un ponte */
  .regia-m .home .scr+.scr::before{display:none}
  .regia-m .home #s2{padding-top:12vh}
  .js.regia-m .home .scr .stampo.vero .cornice{transition:none;opacity:clamp(0,calc(var(--q,0) * 20),1);width:calc(var(--diam,150px) * (1 - var(--q,0)) + 100% * var(--q,0));height:calc(var(--diam,150px) * (1 - var(--q,0)) + 100% * var(--q,0));border-radius:calc(50% * (1 - var(--q,0)) + 3px * var(--q,0))}
  .js.regia-m .home .scr .stampo.vero .mano path{animation:none;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--arrivo) calc((6 - var(--t)) * 30ms)}
  .js.regia-m .home .scr .stampi.a-fuoco .stampo.vero .mano path{stroke-dashoffset:0;transition:stroke-dashoffset .42s var(--arrivo) calc(var(--t) * 80ms + 60ms)}
  .js.regia-m .home .scr .stampi .stampo.vero{transform:none;transition:transform .3s var(--arrivo)}
  .js.regia-m .home .scr .stampi.a-fuoco .stampo.vero{transform:scale(1.14);transition:transform .5s var(--arrivo) .6s}
  .js.regia-m .home .scr .stampi .stampo.vero::before{opacity:0;transition:opacity .3s var(--arrivo)}
  .js.regia-m .home .scr .stampi.a-fuoco .stampo.vero::before{opacity:1;transition:opacity .6s var(--arrivo) .6s}
  .js.regia-m .home .scr .stampi .stampo:not(.vero)>*{opacity:1;transition:opacity .3s var(--arrivo)}
  .js.regia-m .home .scr .stampi.a-fuoco .stampo:not(.vero)>*{opacity:.55;transition:opacity .5s var(--arrivo) .6s}
  /* 02 → 03: la luce nasce dal «tuo sito» e si allarga; prima c'è spazio vuoto perché si veda crescere */
  /* la coda della 03: quando l'ultima riga esce sotto l'header, la luce si condensa nel punto che sale dal fondo */
  .regia-m .home #s3{background:none;overflow:visible;padding-top:34vh;padding-bottom:110vh}
  .regia-m .home #s3 .luce{inset:-40vh 0 0;z-index:0;background:radial-gradient(circle at var(--ox,50%) var(--oy,50%),#e8f0f1 var(--r,0px),#ffffffd9 calc(var(--r,0px) + 1px),#ffffff00 calc(var(--r,0px) + 56px))}
  .regia-m .home #s3 .luce .pozza{display:none}
  /* 03 → 04 → 05: il filo scende nel margine sinistro; ogni garanzia si accende quando la raggiunge */
  .regia-m .home .fili{position:absolute;left:0;top:0;width:100%;z-index:3;pointer-events:none;overflow:visible;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;filter:drop-shadow(0 0 3px #ffffffb3)}
  .regia-m .home .fili .ramo{transition:stroke-dashoffset .45s var(--arrivo)}
  .regia-m .home .punto{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px #ffffff99;z-index:3;pointer-events:none;opacity:0}
  .js.regia-m .home .garanzie li.rv{opacity:0;transform:translateY(10px);transition:opacity .3s var(--arrivo),transform .4s var(--arrivo)}
  .js.regia-m .home .garanzie li.rv.toccata{opacity:1;transform:none;transition:opacity .45s var(--arrivo) .12s,transform .6s var(--arrivo) .12s}
  .js.regia-m .home .garanzie .ico path{animation:none;stroke-dashoffset:1;transition:stroke-dashoffset .25s var(--arrivo)}
  .js.regia-m .home .garanzie li.toccata .ico path{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--arrivo) .3s}
  .regia-m .home .canali svg>line:first-child{display:none}
  .regia-m .home .canali svg>:not(.raggio){opacity:0;transition:opacity .2s var(--arrivo)}
  .regia-m .home .canali.dentro svg>:not(.raggio){opacity:1}
  .regia-m .home .canali .raggio{animation:none;transition:stroke-dashoffset .35s var(--arrivo) calc((3 - var(--i)) * 50ms)}
  .regia-m .home .canali.dentro .raggio{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--arrivo) calc(var(--i) * 60ms + 80ms)}
  .regia-m .home .canale>div{opacity:.45;transition:opacity .25s var(--arrivo)}
  .regia-m .home .canali.dentro .canale>div{opacity:1;transition:opacity .4s var(--arrivo) calc(.5s + var(--i,0) * 60ms)}
}