/* Le misure che comandano la rottura delle card si dichiarano come numeri
   veri. Senza dichiarazione una variabile CSS e' solo testo, e un calcolo che
   la usa non e' garantito ovunque. Vanno in cima e fuori da ogni @media:
   dentro a un blocco condizionale queste dichiarazioni non valgono. */
/* --p NON si eredita, ed e' la cosa piu' importante di questo foglio per la
   fluidita' della rottura. Se si ereditasse, scriverla sulla card
   costringerebbe il browser a rivedere lo stile di tutte le copie che ci
   stanno dentro — migliaia di elementi a ogni fotogramma. Cosi' invece la
   scrive il codice su ogni singolo pezzo, e ogni scrittura tocca un elemento
   e basta. Misurato: da 17 a oltre 40 fotogrammi al secondo. */
@property --p   { syntax: "<number>"; initial-value: 0; inherits: false; }

/* L'entrata di lato dei tre blocchi del metodo. Il valore di riposo e' UNO,
   cioe' arrivato: se il codice non gira — niente JavaScript, browser vecchio,
   movimento ridotto — i blocchi stanno dove devono stare invece di restare
   invisibili fuori campo. */
@property --e   { syntax: "<number>"; initial-value: 1; inherits: false; }
@property --verso { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --rit { syntax: "<number>"; initial-value: 0; inherits: false; }

/* ==========================================================================
   VSAT — Il colonnato
   Palette e caratteri dal design package. Testi dal sito attuale, invariati.
   ========================================================================== */

:root{
  --canvas:#000000;
  --panel:#000000;
  --panel-2:#000000;
  --accent:#FFFFFF;
  --accent-muted:rgba(255,255,255,.18);
  --accent-line:rgba(255,255,255,.30);
  --text-primary:#FFFFFF;
  --text-secondary:#FFFFFF;
  --text-dim:#FFFFFF;
  --hair:rgba(255,255,255,.14);
  --hair-strong:rgba(255,255,255,.34);

  --font-display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Scala di spaziatura verticale. Il vuoto fra due sezioni e' la somma del
     riempimento in fondo alla prima e di quello in cima alla seconda: con questi
     tre gradini resta fra 48 e 72px sul telefono e fra 72 e 112px sul computer. */
  --sez-y:clamp(1.9rem, 4.4vw, 3.1rem);
  --sez-y-larga:clamp(2.3rem, 5.4vw, 3.6rem);
  --sez-y-stretta:clamp(1.6rem, 3.6vw, 2.5rem);
  /* fra il titolo di una sezione e il blocco che introduce */
  --blocco-y:clamp(1.5rem, 3.4vw, 3rem);

  --wrap:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  /* altezza della barra in cima: la usano anche il menu del telefono
     e chi deve sapere quanto spazio la barra copre */
  --barra:72px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur:.6s;

  --tshadow:0 1px 2px rgba(0,0,0,.95),0 3px 12px rgba(0,0,0,.78),0 10px 44px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}

html{-webkit-text-size-adjust:100%}

/* La barra di scorrimento sparisce alla vista ma lo scorrimento resta intero:
   rotellina, trackpad, dito, tastiera e lettori di schermo funzionano come prima.
   Nessun overflow:hidden globale, che bloccherebbe la pagina. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
/* anche i contenitori che scorrono al loro interno */
*::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,video,svg{max-width:100%;display:block}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

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

/* Segnaposto della testata: invisibile, non si tocca, non occupa spazio. */
#sentinella-testata{position:absolute;top:40px;left:0;width:1px;height:1px;pointer-events:none}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#000000;padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

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

/* --------------------------------------------------------------------------
   L'ambiente: un solo strato fisso dietro tutta la pagina, ciclo 80s
   -------------------------------------------------------------------------- */
/* Gli aloni bianchi al 5-7% tenevano il fondo su un grigio scuro. Col nero al
   100% lo strato resta in pagina ma non dipinge piu' nulla. Per riaccenderlo:
   rimettere i due radial-gradient al posto di background:none e ridare al
   ::before il suo contenuto. */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:none;
}
.ambient::before{content:none}
@keyframes drift{
  from{transform:translate3d(-8%,-6%,0) scale(1)}
  to  {transform:translate3d(8%,6%,0) scale(1.15)}
}

/* --------------------------------------------------------------------------
   Le colonne: elemento firma. Righe verticali che si disegnano da sole.
   -------------------------------------------------------------------------- */
.colonnade{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.colonnade span{
  position:absolute;top:0;width:1px;height:100%;
  background:linear-gradient(to bottom, transparent, var(--accent-muted) 12%, var(--accent-muted) 78%, transparent);
  transform-origin:top center;
  transition:transform 1.5s var(--ease);
}
.in .colonnade span{transform:scaleY(1)}
.in .colonnade span:nth-child(1){transition-delay:.05s}
.in .colonnade span:nth-child(2){transition-delay:.18s}
.in .colonnade span:nth-child(3){transition-delay:.31s}
.in .colonnade span:nth-child(4){transition-delay:.44s}
.in .colonnade span:nth-child(5){transition-delay:.57s}

/* --------------------------------------------------------------------------
   Tipografia comune
   -------------------------------------------------------------------------- */
.tag{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;
}
.tag::before{content:"";width:26px;height:1px;background:var(--accent-line)}

.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0;line-height:1.05;letter-spacing:-.01em}

.big{font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02}
.big i{font-style:italic;color:var(--accent)}

.lede{color:var(--text-secondary);font-size:clamp(1rem,1.5vw,1.12rem);max-width:62ch;margin:0}

/* Bottoni */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:2px;border:1px solid transparent;
  font-family:var(--font-body);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  text-shadow:none;
}
.btn .arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:#000000}
/* il passaggio del mouse sui bottoni sta in fondo al foglio, con l argento */
.btn-outline{border-color:var(--hair-strong);color:var(--text-primary)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{width:100%}
@media (pointer:coarse){.btn{min-height:44px}}

/* Entrate: nulla scatta */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.08s}
.in .rise:nth-child(3){transition-delay:.16s}
.in .rise:nth-child(4){transition-delay:.24s}
.in .rise:nth-child(5){transition-delay:.32s}
.entrance-done .rise{transition-delay:0s !important}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease),transform .32s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.stuck{background:rgba(0,0,0,.82);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
/* Scendendo la barra si ritira, risalendo torna. Prima restava sempre li' e
   copriva stabilmente i primi 72 pixel di qualunque cosa le passasse sotto:
   la striscia dei broker, che e' alta 36, si vedeva tagliata a meta'.
   Ritirandola non si perde niente e non si aggiunge spazio vuoto da nessuna
   parte, che era l'alternativa. */
.site-header{transform:translateY(0);will-change:transform}
.site-header.ritirata{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .site-header.ritirata{transform:none}
}
/* Tre colonne invece di una fila: le due laterali si spartiscono lo spazio
   in parti uguali, quindi la navigazione sta al centro dello schermo davvero
   e non a meta' dello spazio che avanza fra marchio e pulsante — che avendo
   larghezze diverse la manderebbero fuori asse. */
/* Le ancore atterravano sotto la barra fissa in cima, quindi il titolo della
   sezione restava coperto: mancava questa riga in tutto il foglio. Il margine
   di scorrimento tiene conto dell'altezza della barra piu' un po' d'aria. */
main > section[id],.pc-tappa[id]{scroll-margin-top:calc(var(--barra) + 14px)}

.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.5rem;height:var(--barra)}
.header-inner > .brand{justify-self:start}
.header-inner > .header-cta{justify-self:end}
.brand{display:inline-flex;align-items:center;gap:.62em;font-family:var(--font-display);
  font-size:1.5rem;letter-spacing:.14em;color:var(--text-primary)}
/* Il marchio e' un'immagine, non piu' un disegno inline: `height:auto` con
   il rapporto dichiarato nell'attributo evita che la testata si muova mentre
   il file arriva. */
.brand-mark{width:.92em;height:auto;color:var(--accent);flex:0 0 auto;
  transition:opacity var(--dur) var(--ease)}
.brand:hover .brand-mark{opacity:.78}
.brand-word{line-height:1}
.main-nav{display:flex;gap:1.8rem;white-space:nowrap}
.main-nav a,.main-nav .nav-attesa{font-size:.86rem;color:var(--text-secondary);
  display:flex;align-items:baseline;gap:.4rem;transition:color var(--dur) var(--ease)}
.main-nav a:hover{color:var(--text-primary)}
/* La voce la cui pagina non e' ancora pronta: si legge, non si clicca, e si
   vede che e' spenta. */
.nav-attesa{color:var(--text-dim);cursor:default}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1px;background:var(--text-primary);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{
  position:fixed;inset:var(--barra) 0 auto;background:rgba(0,0,0,.97);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hair);padding:1.5rem var(--gutter) 2rem;
  display:flex;flex-direction:column;gap:1.1rem;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mobile-nav.open{transform:none;opacity:1;pointer-events:auto}
.mobile-nav a,.mobile-nav .nav-attesa{font-size:1.05rem;color:var(--text-secondary);
  display:flex;gap:.6rem;align-items:baseline}
.mobile-nav .nav-attesa{color:var(--text-dim)}

@media (max-width:900px){
  .main-nav,.header-cta{display:none}
  .burger{display:flex}
  /* Nascosti navigazione e pulsante, nella griglia restano due elementi: se
     si lasciassero le tre colonne del desktop l'hamburger cadrebbe in quella
     centrale e resterebbe in mezzo alla barra. Due colonne, e si ancora a
     destra. */
  .header-inner{grid-template-columns:1fr auto}
  .header-inner > .burger{justify-self:end}
  /* in barra restano solo marchio e pulsante: 72px erano troppi */
  :root{--barra:58px}
}

/* Le due righe verticali decorative stanno all'8% dai bordi: su schermo largo
   cadono nel margine, su un telefono cadono a 31px e 358px, cioe' dentro al
   testo, che comincia a 20. Su schermo stretto quindi non si disegnano: erano
   un ornamento, non un contenuto. */
@media (max-width:900px){
  .colonnade{display:none}
}

/* ==========================================================================
   HERO SCORREVOLE
   ========================================================================== */
/* piu' corto di prima: con l'avanzamento automatico non serve una corsa lunga,
   bastano tre fermate. Se il codice non partisse, resta comunque un hero scorrevole. */
.hero{position:relative;height:300vh;z-index:1}
/* svh invece di vh: sul telefono la barra dell'indirizzo che compare e scompare
   cambierebbe l'altezza della vista e farebbe saltare lo scorrimento del video */
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

.hero-media{position:absolute;inset:0}
.hero-poster{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.video-failed #hero-video{display:none}

/* 1. scrim di base, sempre attivo.
   Il testo dell'hero ora sta al centro dello schermo, quindi lo scurimento e' un
   vignettaggio centrale piu' una striscia in alto che tiene leggibile l'intestazione. */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.80) 0%,rgba(0,0,0,.34) 11%,rgba(0,0,0,0) 22%),
    radial-gradient(ellipse 124% 98% at 50% 50%,rgba(0,0,0,0) 34%,rgba(0,0,0,.56) 100%)}

/* anello di caricamento */
.ring-wrap{position:absolute;left:50%;bottom:3.2rem;transform:translateX(-50%);z-index:5;color:var(--accent)}
.ring{width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .18s linear}
.hero-stage.video-ready .ring-wrap{opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.chev{width:22px;height:34px;border:1px solid var(--accent-line);border-radius:12px;position:relative}
.chev::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:6px;border-radius:2px;background:var(--accent);transform:translateX(-50%);animation:chev 2.2s var(--ease-soft) infinite}
@keyframes chev{0%,100%{transform:translate(-50%,0);opacity:1}50%{transform:translate(-50%,10px);opacity:.3}}

/* L'attraversamento. Fissa allo schermo e sopra tutto, cosi' copre anche
   l'intestazione: la luce invade la vista, la pagina scorre sotto senza che
   si veda, poi la luce si dirada e il sito e' gia' al suo posto.
   Nessuno strato scuro: quello lasciava una pausa nera fra luce e contenuto. */
.hero-flash{position:fixed;inset:0;z-index:100;pointer-events:none;
  background:radial-gradient(ellipse 76% 92% at 50% 46%,#fff 0%,#fff 58%,rgba(255,255,255,.90) 100%);
  opacity:var(--lampo,0)}

/* la camera fa l'ultimo passo dentro la porta */
.hero-media{transform:scale(var(--avanti,1));transform-origin:50% 48%;will-change:transform}

/* le bande di testo */
.bands{position:absolute;inset:0;z-index:4}
/* Il testo sta al centro dello schermo, in verticale e in orizzontale. */
.band{
  position:absolute;inset:0;
  padding:76px var(--gutter) clamp(2.5rem,8vh,5rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:0;pointer-events:none;text-shadow:var(--tshadow);
}
.band.live{pointer-events:auto}
/* 2. scrim per banda: si approfondisce solo mentre quella banda e' accesa.
   Centrato sul testo, spento entro il 78% per non appiattire gli angoli. Piu' profondo
   di prima perche' al centro il testo cade sopra le colonne di luce. */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 84% 38% at 50% 50%,rgba(0,0,0,.70) 0%,rgba(0,0,0,.44) 46%,rgba(0,0,0,0) 76%);
}
.band .btn{text-shadow:none}

/* l'occhiello contiene un indirizzo web: in maiuscolo diventava illeggibile */

/* misura piu' larga: a 18ch il titolo lasciava il trattino e la e commerciale appesi a fine riga */
.band h1{font-size:clamp(2.4rem,7vw,5.4rem);line-height:1.02;max-width:24ch;text-wrap:balance}
.band h1 i{font-style:italic;color:var(--accent)}


.band-invite{font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.18;margin:0 0 1.4rem}
/* anche l'etichetta del bottone, per non spezzare il tono */
.b3 .band-cta{font-family:var(--font-display);font-size:1.15rem;font-weight:400;letter-spacing:.02em;padding:.7rem 1.7rem}
.b3{padding-top:clamp(5rem,10vh,7rem)}

/* split del testo */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.split{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (g) avvicinamento dalla profondita' — banda 1, eco della camera che avanza */
.b1 .split-line{display:block;transform:scale(calc(.84 + .16*var(--k,0)));opacity:var(--k,0);transition:none}
.b1 .soft{position:absolute;left:0;right:0;filter:blur(9px);opacity:calc(1 - var(--k,0));pointer-events:none}


/* (e) salita in due arrivi — banda 3, eco dell'arrivo al riposo */
.b3 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}
.b3 .band-cta{--kb:clamp(0,(var(--k,0) - .55)*3,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* hero fermo */
.static-hero{display:none;position:relative;min-height:100svh;align-items:flex-end;overflow:hidden}
.static-hero .hero-poster{position:absolute;inset:0}
/* qui il testo vive in basso, non in alto: lo scurimento va ribaltato,
   altrimenti le parole finiscono sopra le colonne di luce e non si leggono */
.static-hero .scrim{
  background:linear-gradient(to top,
    rgba(0,0,0,.95) 0%,rgba(0,0,0,.90) 24%,rgba(0,0,0,.68) 44%,
    rgba(0,0,0,.30) 64%,rgba(0,0,0,.06) 82%,rgba(0,0,0,0) 94%)}
.static-hero .inner{position:relative;z-index:2;padding-block:clamp(3rem,10vh,6rem);width:100%}
.static-hero h1{font-size:clamp(2.2rem,8vw,3.6rem);max-width:16ch;margin:0 0 1.4rem;text-shadow:var(--tshadow)}
.static-hero h1 i{font-style:italic;color:var(--accent)}
.static-hero .lede{margin-bottom:2rem;text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* L'hero fermo resta solo per chi chiede meno movimento e per il telefono
   girato di lato, dove non c'e' altezza per il viaggio. Su tutto il resto,
   telefoni verticali compresi, il video scorre. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:480px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}

@media (max-height:480px){.ring-wrap{display:none}}

/* --------------------------------------------------------------------------
   VERTICALE: il video e' tagliato 9:16, l'azione riempie il fotogramma
   -------------------------------------------------------------------------- */
@media (orientation:portrait){
  /* due passate di dito: la corsa utile vale due schermi, non due e mezzo */
  .hero{height:300svh}

  .scrim{
    background:
      linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.36) 10%,rgba(0,0,0,0) 20%),
      radial-gradient(ellipse 150% 74% at 50% 50%,rgba(0,0,0,0) 24%,rgba(0,0,0,.66) 100%)}

  .band{padding:80px var(--gutter) clamp(2rem,7svh,4rem)}
  /* in verticale l'ellisse e' piu' alta e piu' stretta, perche' il testo occupa
     una fascia centrale piu' profonda su uno schermo lungo */
  .band::before{
    background:radial-gradient(ellipse 108% 29% at 50% 50%,rgba(0,0,0,.76) 0%,rgba(0,0,0,.50) 48%,rgba(0,0,0,0) 78%)}

  .band h1{font-size:clamp(2rem,8.4vw,3rem);max-width:15ch}
  .band-invite{font-size:clamp(1.5rem,6.6vw,2.1rem)}
  .b3 .band-cta{font-size:1.05rem}
}

/* ==========================================================================
   STRISCIA ESECUZIONE
   ========================================================================== */
.exec{position:relative;z-index:1;background:var(--canvas);border-block:1px solid var(--hair);padding:1.6rem 0}
.exec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.exec-head span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:.5rem}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
.dot.live{animation:pulse 2.6s var(--ease-soft) -.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--accent-muted);z-index:2}
.marquee::before{left:6%}
.marquee::after{right:6%}
.marquee-track{display:flex;gap:3.5rem;width:max-content;animation:slide 42s linear infinite}
.marquee-item{font-family:var(--font-display);font-size:1.35rem;color:var(--text-secondary);white-space:nowrap}
.marquee-item em{font-family:var(--font-mono);font-style:normal;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-left:.4rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   SNAPSHOT — il porticato di numeri
   ========================================================================== */
.snapshot{position:relative;z-index:1;padding:var(--sez-y-larga) 0}
/* niente fondo sul contenitore: sopra le card piu' basse si vedeva come un blocco grigio */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:var(--blocco-y);align-items:end}
.bcard{background:var(--canvas);border:1px solid var(--hair);padding:2rem 1.6rem;position:relative;display:flex;flex-direction:column;gap:.55rem;min-height:var(--h,300px)}
.bcard::before{content:"";position:absolute;top:-1px;left:1.6rem;right:1.6rem;height:1px;background:var(--accent);
  transform-origin:left;transition:transform 1.2s var(--ease)}
.in .bcard::before{transform:scaleX(1)}
.in .bcard:nth-child(2)::before{transition-delay:.12s}
.in .bcard:nth-child(3)::before{transition-delay:.24s}
.in .bcard:nth-child(4)::before{transition-delay:.36s}
.bcard:nth-child(1){--h:340px}
.bcard:nth-child(2){--h:290px}
.bcard:nth-child(3){--h:380px}
.bcard:nth-child(4){--h:260px}
.blabel{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:.45rem;margin-bottom:auto}
.bnum{font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;color:var(--text-primary)}
.bnum.accent{color:var(--accent)}
.bsub{font-size:.85rem;color:var(--text-secondary);line-height:1.45}
.btrend{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--accent)}
.btrend em{font-style:normal;color:var(--text-dim)}
.bcard p{font-size:.85rem;color:var(--text-secondary);margin:.2rem 0 0;line-height:1.5}
.spark{width:100%;height:44px;margin-top:.5rem}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:400;transition:stroke-dashoffset 2s var(--ease) .3s}
.in .spark polyline{stroke-dashoffset:0}
.bars{display:flex;align-items:flex-end;gap:5px;height:60px;margin-top:.6rem}
.bars span{flex:1;background:linear-gradient(to top,var(--accent-muted),var(--accent));height:var(--bh,40%);
  transform-origin:bottom;transition:transform .9s var(--ease)}
.in .bars span{transform:scaleY(1)}
.in .bars span:nth-child(1){transition-delay:.05s}.in .bars span:nth-child(2){transition-delay:.11s}
.in .bars span:nth-child(3){transition-delay:.17s}.in .bars span:nth-child(4){transition-delay:.23s}
.in .bars span:nth-child(5){transition-delay:.29s}.in .bars span:nth-child(6){transition-delay:.35s}
.in .bars span:nth-child(7){transition-delay:.41s}.in .bars span:nth-child(8){transition-delay:.47s}
.ring-dots{display:flex;gap:4px;margin-top:.6rem;align-items:center}
.ring-dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--accent-line);display:block}
.ring-dots b{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--accent);margin-left:.4rem}

@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bcard{--h:260px !important}}
@media (max-width:560px){.bento{grid-template-columns:1fr}}

/* ==========================================================================
   BANDE CTA
   ========================================================================== */
.cta-band{position:relative;z-index:1;padding:var(--sez-y-stretta) 0;border-block:1px solid var(--hair);overflow:hidden}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band p{font-family:var(--font-display);font-size:clamp(1.4rem,2.8vw,2.1rem);margin:0;max-width:26ch;line-height:1.15}
.cta-band .colonnade span:nth-child(1){left:8%}
.cta-band .colonnade span:nth-child(2){right:8%;left:auto}

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto{position:relative;z-index:1;padding:var(--sez-y-larga) 0}
/* Il titolo a sinistra, la firma a destra, allineati sulla stessa base: e'
   la stessa impaginazione delle altre sezioni del sito. */
.man-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.quote-mark{font-family:var(--font-display);font-size:6rem;line-height:.6;color:var(--accent);opacity:.28;display:block}
.man-heading{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.1;margin:1rem 0 0}
.man-heading span{display:block}
.man-heading i{font-style:italic;position:relative;color:var(--text-primary)}
.man-heading i::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;background:var(--accent);
  transform-origin:left;transition:transform 1.1s var(--ease) .4s}
.in .man-heading i::after{transform:scaleX(1)}
.divider{display:flex;align-items:center;gap:1rem;margin:2rem 0;color:var(--accent)}
.divider span:first-child,.divider span:last-child{flex:1;height:1px;background:var(--hair)}
.sig-row p{color:var(--text-secondary);max-width:54ch;margin:0 0 1.4rem}
.sig{display:flex;flex-direction:column;gap:.15rem}
.sig em{font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--text-primary)}

/* --------------------------------------------------------------------------
   LA COLONNA CHE SI SPEZZA IN TRE
   Il filmato (Higgsfield) fa da fondo al blocco: la colonna vive nella meta'
   sinistra dell'inquadratura, i tre principi si posano nella sala scura di
   destra, uno per blocco di pietra. Il fotogramma d'arrivo sta sotto al
   filmato: se il video non arriva la scena resta comunque quella giusta, con
   i tre blocchi gia' separati.
   I principi partono leggibili e vengono attenuati solo quando il codice
   prende il comando (classe .js): senza JavaScript restano tutti e tre a
   piena leggibilita'.
   -------------------------------------------------------------------------- */
.colonna{margin-top:var(--blocco-y)}
.colonna-stage{position:relative;overflow:hidden;border:1px solid var(--hair);
  background:#000000;min-height:clamp(340px,32vw,470px)}
.colonna-media{position:absolute;inset:0;pointer-events:none}
.colonna-poster,.colonna-video{position:absolute;inset:0;width:100%;height:100%;
  /* la colonna sta a un terzo dell'inquadratura: il taglio parte da li',
     cosi' non la si perde mai, nemmeno sulle proporzioni piu' strette.
     Sulla tela il taglio lo fa il codice, con lo stesso sbilanciamento. */
  object-fit:cover;object-position:38% center}
.colonna-poster{background-size:cover;background-position:38% center;
  transition:opacity .7s var(--ease)}
.colonna-video{opacity:0;transition:opacity .7s var(--ease)}
.colonna-stage.video-pronto .colonna-video{opacity:1}
.colonna-stage.video-pronto .colonna-poster{opacity:0}
/* la sala di destra viene scurita: e' li' che si appoggia il testo */
.colonna-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(0,0,0,0) 30%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.90) 64%)}

.principi{position:absolute;inset:0 0 0 auto;z-index:2;
  width:min(52%,520px);list-style:none;margin:0;
  padding:clamp(1rem,2.4vw,1.9rem) clamp(1.1rem,2.6vw,2.1rem);
  display:grid;grid-template-rows:repeat(3,1fr);align-content:center}
.principio{align-self:center;border-left:1px solid var(--hair);padding-left:1.05rem;
  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s var(--ease)}
/* attenuati solo quando c'e' il codice a riaccenderli */
.js .principio{opacity:.22;transform:translateX(-10px)}
.js .principio.acceso{opacity:1;transform:none;border-left-color:var(--accent)}
.principio .n{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.3rem}
.principio h4{font-family:var(--font-body);font-weight:600;font-size:1rem;
  margin:0 0 .25rem;letter-spacing:0}
.principio p{margin:0;font-size:.9rem;color:var(--text-secondary)}


@media (max-width:860px){
  .man-head{grid-template-columns:1fr;gap:1.5rem}
  /* niente testo sopra al filmato: la colonna sta in alto e i principi sotto,
     cosi' non si comprime nulla e non serve scurire l'immagine */
  .colonna-stage{min-height:0;display:flex;flex-direction:column}
  .colonna-media{position:relative;inset:auto;width:100%;aspect-ratio:4/3}
  .colonna-stage::after{display:none}
  .principi{position:relative;inset:auto;width:100%;
    grid-template-rows:none;gap:1.1rem;padding:1.3rem}
}

/* ==========================================================================
   PERCORSI + CONFRONTO
   ========================================================================== */
.percorsi{position:relative;z-index:1;padding:var(--sez-y) 0 0}
.perc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.hint{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

.confronto{position:relative;z-index:1;padding:var(--sez-y) 0}
/* stessa altezza per le tre card: Edith sale sopra le altre invece di sfalsarle a caso */
/* ==========================================================================
   LE TRE CARD 3D
   Entrano dal basso su una traiettoria in profondita', ruotano, convergono
   e si fermano. Dopo l'assestamento restano immobili e leggibili: il tilt
   al passaggio del mouse e' minimo e non disturba la lettura.
   ========================================================================== */
.pc-scena{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  align-items:stretch;
  perspective:1600px;perspective-origin:50% 38%;
}
.pc{position:relative;z-index:1;transform-style:preserve-3d;will-change:transform,opacity;opacity:1}

/* Il vortice: le stesse tre lastre da cui nascono le card, riprese in
   Higgsfield. Entra col blocco, si posa quando le lastre si fermano e da li'
   in poi resta un fondale appena percettibile, perche' a dover dominare e' il
   testo delle card. Il codice lo accende solo su schermo largo. */
/* --------------------------------------------------------------------------
   LA TAPPA E IL PALCO
   La tappa e' alta piu' di uno schermo; il palco dentro ci resta appiccicato.
   Il risultato: il fondale entra, si ferma pieno davanti a chi guarda, e solo
   da li' in poi lo scorrimento fa salire le pietre e comparire le card.
   Non e' una cattura dello scorrimento: la pagina scorre come sempre, e' il
   palco che sta fermo mentre la tappa gli passa intorno.
   -------------------------------------------------------------------------- */
.pc-tappa{position:relative;margin-top:var(--blocco-y);margin-bottom:var(--blocco-y)}
.pc-fondale{position:absolute;inset:0;z-index:0;pointer-events:none}
.pc-vortice{position:sticky;top:0;height:100svh;overflow:hidden;
  opacity:var(--vo,0)}
.pc-vortice canvas{width:100%;height:100%;display:block}
.pc-palco{position:relative;z-index:1}

/* Su schermo largo la tappa dura due schermi e mezzo: il primo mezzo serve a
   entrare nella scena e vederla intera prima che succeda qualcosa. */
/* La tappa e' a tutta larghezza; sono le card a riprendersi la misura del
   testo, cosi' restano allineate al resto della pagina. */
.pc-palco > .pc-scena{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter)}

@media (min-width:901px){
  .pc-tappa{height:250svh}
  .pc-palco{position:sticky;top:0;height:100svh;display:grid;align-items:center}
}
/* Se lo schermo e' troppo basso per tenere le card dentro a un'altezza sola,
   il palco smette di stare fermo e tutto torna a scorrere normalmente: meglio
   scorrere che vedere le card tagliate. */
@media (min-width:901px) and (max-height:620px){
  .pc-tappa{height:auto}
  .pc-palco{position:static;height:auto;display:block}
  .pc-vortice{height:100%;position:absolute;inset:0}
}

/* Lo scorrimento comanda, come per la colonna che si spezza in tre.
   L'animazione delle card e' quella di sempre, fotogramma per fotogramma: qui
   viene solo applicata gia' in pausa, e a farla avanzare (o tornare indietro,
   risalendo) e' la posizione della pagina, scritta da JS in animation-delay.
   Prima partiva una volta sola e non tornava piu' indietro. */
.pc-scena.pc-scrub .pc-active  {animation:pc-sx  1.65s cubic-bezier(.16,.84,.32,1) both paused}
.pc-scena.pc-scrub .pc-private {animation:pc-cen 1.80s cubic-bezier(.16,.84,.32,1) both paused}
.pc-scena.pc-scrub .pc-personal{animation:pc-dx  1.65s cubic-bezier(.16,.84,.32,1) both paused}
/* Arrivata in fondo l'animazione si toglie di mezzo: un'animazione, anche
   ferma sull'ultimo fotogramma, batte le regole normali e coprirebbe il tilt
   al passaggio del mouse. L'ultimo fotogramma e' transform:none, quindi la
   card resta esattamente dov'era. Ogni card si fissa per conto suo, perche'
   sul telefono non finiscono insieme. */
.pc-scena.pc-scrub .pc.pc-fissa{animation:none}

/* stato di partenza: fuori scena, in profondita' e ruotate */
.js .reveal:not(.in) .pc-active  {opacity:0;transform:translate3d(-190px,240px,-900px) rotateX(38deg) rotateY(46deg) rotateZ(-14deg)}
.js .reveal:not(.in) .pc-private {opacity:0;transform:translate3d(0,300px,-1100px) rotateX(46deg) rotateY(0deg) rotateZ(8deg)}
.js .reveal:not(.in) .pc-personal{opacity:0;transform:translate3d(190px,240px,-900px) rotateX(38deg) rotateY(-46deg) rotateZ(14deg)}

.in .pc-active  {animation:pc-sx 1.65s cubic-bezier(.16,.84,.32,1) both}
.in .pc-private {animation:pc-cen 1.8s cubic-bezier(.16,.84,.32,1) .1s both}
.in .pc-personal{animation:pc-dx 1.65s cubic-bezier(.16,.84,.32,1) .2s both}

@keyframes pc-sx{
  0%  {opacity:0;transform:translate3d(-190px,240px,-900px) rotateX(38deg) rotateY(46deg) rotateZ(-14deg)}
  40% {opacity:1;transform:translate3d(-70px,70px,-330px) rotateX(15deg) rotateY(-24deg) rotateZ(7deg)}
  72% {opacity:1;transform:translate3d(14px,-16px,-60px) rotateX(-6deg) rotateY(9deg) rotateZ(-3deg)}
  88% {transform:translate3d(-3px,4px,-8px) rotateX(2deg) rotateY(-3deg) rotateZ(1deg)}
  100%{opacity:1;transform:none}
}
@keyframes pc-cen{
  0%  {opacity:0;transform:translate3d(0,300px,-1100px) rotateX(46deg) rotateY(0deg) rotateZ(8deg)}
  40% {opacity:1;transform:translate3d(0,84px,-380px) rotateX(18deg) rotateY(26deg) rotateZ(-6deg)}
  72% {opacity:1;transform:translate3d(0,-20px,-64px) rotateX(-7deg) rotateY(-10deg) rotateZ(2deg)}
  88% {transform:translate3d(0,5px,-9px) rotateX(2deg) rotateY(3deg) rotateZ(-1deg)}
  100%{opacity:1;transform:none}
}
@keyframes pc-dx{
  0%  {opacity:0;transform:translate3d(190px,240px,-900px) rotateX(38deg) rotateY(-46deg) rotateZ(14deg)}
  40% {opacity:1;transform:translate3d(70px,70px,-330px) rotateX(15deg) rotateY(24deg) rotateZ(-7deg)}
  72% {opacity:1;transform:translate3d(-14px,-16px,-60px) rotateX(-6deg) rotateY(-9deg) rotateZ(3deg)}
  88% {transform:translate3d(3px,4px,-8px) rotateX(2deg) rotateY(3deg) rotateZ(-1deg)}
  100%{opacity:1;transform:none}
}

/* la faccia della card */
.pc-faccia{
  position:relative;height:100%;
  background:var(--panel);border:1px solid var(--hair);
  padding:2rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;gap:.75rem;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pc-faccia::before,.pc-faccia::after{content:"";position:absolute;left:1.6rem;right:1.6rem;height:1px;background:var(--accent-line)}
.pc-faccia::before{top:-1px}
.pc-faccia::after{bottom:-1px;opacity:.4}
.pc-top .pc-faccia{background:var(--panel-2);border-color:var(--accent-line)}
.pc-ferma:hover .pc-faccia{border-color:var(--hair-strong)}

/* il tilt dopo l'assestamento: leggero, e solo con un puntatore fine */
@media (hover:hover) and (pointer:fine){
  .pc-ferma{transition:transform .5s var(--ease)}
  .pc-ferma:hover{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(18px)}
}

.pc-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--accent);color:#000000;font-size:.64rem;font-weight:700;letter-spacing:.06em;
  padding:.3rem .8rem;white-space:nowrap;z-index:2}
.pc-num{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--accent)}
.pc h3{font-size:1.85rem;line-height:1.05}
.chip-tech{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);padding:.15rem .4rem;vertical-align:middle;margin-left:.4rem}
.pc-rischio{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--text-dim)}
.pc-rischio.alto,.pc-rischio.medio{color:#FFFFFF}
.pc-rischio.basso{color:var(--accent)}
.pc-desc{font-size:.9rem;color:var(--text-secondary);margin:0}

/* i dati della vecchia tabella, ora dentro la card */
.pc-dati{margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;flex:1;
  border-top:1px solid var(--hair)}
.pc-riga{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.52rem 0;border-bottom:1px solid var(--hair)}
.pc-riga dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.pc-riga dd{margin:0;font-size:.86rem;color:var(--text-primary);text-align:right}
.pc-cta{margin-top:1.2rem}

@media (max-width:900px){
  /* impilate, mai un carosello orizzontale obbligato */
  .pc-scena{grid-template-columns:1fr;gap:1.1rem;perspective:none}

  /* Sul telefono le tre card stanno ferme: niente animazione, niente scena
     dietro. Le card impilate sono piu' alte dello schermo, quindi non si
     vedono mai insieme e la coreografia non si leggeva; e la scena a tutto
     schermo costringeva a scorrere quasi un display prima di arrivare alla
     prima card. Qui contano i dati, e si vedono subito. */
  .pc-tappa{height:auto}
  .pc-fondale{display:none}
  .pc-palco{position:relative;padding-block:0}
  .js .reveal:not(.in) .pc-active,
  .js .reveal:not(.in) .pc-private,
  .js .reveal:not(.in) .pc-personal{opacity:1;transform:none}
  .pc-active,.pc-private,.pc-personal{animation:none !important;opacity:1;transform:none}

  /* ---- LA CARD SI ROMPE E SI RICOMPONE ----------------------------------
     Non c'e' niente sopra alla card: a rompersi e' la card stessa. Otto
     pezzi, ognuno un ritaglio della card vera — con il suo testo, i suoi
     filetti, il suo bordo — che al loro posto ricompongono esattamente il
     pannello, senza fessure e senza sovrapposizioni.

     Il taglio e' quello di un colpo secco: le crepe partono da un punto e
     arrivano ai bordi, come su una lastra di pietra colpita. Ogni pezzo ruota
     attorno a se stesso, non attorno al centro della card, perche' un
     frammento scagliato via gira su di se.

     Lo sfondo resta nero: qui non si aggiunge materia, si toglie e si
     rimette quella della card.
     -------------------------------------------------------------------- */
  .pc{position:relative}
  /* La profondita' serve: senza, i pezzi scivolano sul piano come figurine.
     Con la prospettiva tornano ruotando nello spazio, come pezzi veri. */
  .pc-rottura{position:absolute;inset:0;z-index:3;pointer-events:none;
    perspective:1100px;perspective-origin:46% 38%}
  /* Il riquadro di ogni pezzo e' quello del pezzo, non quello della card:
     misure e posizione arrivano dal codice. Prima ogni copia era grande
     quanto la card intera e il ritaglio nascondeva il resto — quarantotto
     rettangoli interi da tenere in memoria e ricomporre a ogni fotogramma.
     Cosi' invece la somma delle superfici e' poco piu' di una card. */
  .pc-pezzo{
    position:absolute;
    clip-path:var(--forma);
    /* il pezzo e' un mondo chiuso: quello che gli succede dentro non fa
       ricalcolare niente fuori, e viceversa */
    contain:layout paint;
    /* Ogni pezzo diventa un livello suo: senza, il browser ridisegnava il
       testo di ventiquattro copie a ogni fotogramma e si scendeva a trenta
       fotogrammi al secondo invece di sessanta. */
    will-change:transform;
    backface-visibility:hidden;
    /* LO SPESSORE. E' questo che separa la pietra dal vetro: una scheggia di
       vetro non ha spessore, un pezzo di lastra si', e il suo bordo prende la
       luce che viene dall'alto e resta scuro sotto. Le due ombre seguono il
       taglio del pezzo, quindi disegnano proprio il profilo della rottura. */
    filter:
      drop-shadow(0 -1px 0 rgba(255,255,255,.34))
      drop-shadow(0 2px 4px rgba(0,0,0,.95));
    transform-origin:var(--perno);
    /* I pezzi lontani rientrano per ultimi. Il valore si taglia fra zero e
       uno qui, e non dentro a una variabile: una variabile che contiene una
       funzione va sostituita come testo, e non tutti i browser la digeriscono
       poi dentro a un altro calcolo. */
    --pp:clamp(0, calc((var(--p) - var(--rit)) / (0.9 - var(--rit))), 1);
    transform:
      translate3d(calc(var(--dx) * (1 - var(--pp))),
                  calc(var(--dy) * (1 - var(--pp))),
                  calc(var(--dz) * (1 - var(--pp))))
      rotateX(calc(var(--rx) * (1 - var(--pp))))
      rotateY(calc(var(--ry) * (1 - var(--pp))))
      rotate(calc(var(--rot) * (1 - var(--pp))));
    /* Un pezzo lontano e' fuori dalla luce: si intravede appena, e diventa
       pieno mentre torna al suo posto. Non e' un vezzo — cosi' i pezzi della
       card che deve ancora arrivare non si stampano sopra a quella gia'
       composta piu' su, che era il difetto vero. */
    /* Un pezzo lontano resta pietra, non diventa un'ombra: sotto una certa
       soglia non scende. Prima calava a tre decimi e sul nero spariva. */
    opacity:calc(clamp(0.58, calc(var(--pp) * 1.6), 1) * clamp(0, calc(var(--p) * 14), 1));
  }
  /* La card dentro al pezzo resta grande quanto la card vera e viene tirata
     indietro di quanto il pezzo e' spostato: cosi' il testo di ogni frammento
     cade esattamente dove cadrebbe sulla tavola intera. Misure e scarto li
     mette il codice, pezzo per pezzo. */
  .pc-pezzo > .pc-faccia{position:absolute}

  /* LA SUPERFICIE. Finche' e' rotta, sopra alla card sta la grana della
     pietra: leggera, perche' sotto ci deve restare leggibile il testo inciso.
     Se ne va man mano che il pezzo torna al suo posto, cosi' a tavola
     ricomposta resta la card e basta. */
  .pc-pezzo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:url('img/grana.webp') 0 0/150px 150px;
    opacity:calc(0.42 * (1 - var(--pp)));
  }

  /* La card vera resta nascosta finche' i pezzi non l'hanno ricomposta, poi
     torna lei e i pezzi si spengono: a riposo non si guarda un mosaico di
     dieci copie ma la card, nitida, e non si paga piu' niente. Appena si
     risale i pezzi tornano, perche' l'animazione deve rifarsi ogni volta. */
  .pc-rotta > .pc-faccia{opacity:0}
  .pc-composta > .pc-faccia{opacity:1}
  .pc-composta > .pc-rottura{display:none}
  .pc-faccia{padding:1.7rem 1.3rem 1.5rem}
  .pc-riga dd{font-size:.84rem}
}

@media (prefers-reduced-motion:reduce){
  .reveal:not(.in) .pc-active,
  .reveal:not(.in) .pc-private,
  .reveal:not(.in) .pc-personal{opacity:1;transform:none}
  .in .pc-active,.in .pc-private,.in .pc-personal{animation:none}
  .pc-ferma:hover{transform:none}
}
body.pinned .pc-active,body.pinned .pc-private,body.pinned .pc-personal{opacity:1;transform:none;animation:none}

.foot-note{font-size:.82rem;color:var(--text-dim);margin-top:1.5rem}
.foot-note a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}

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

/* ==========================================================================
   NETWORK
   ========================================================================== */
.network{position:relative;z-index:1;padding:var(--sez-y) 0}
.offices{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:var(--blocco-y)}
.office{background:var(--canvas);padding:1.8rem 1.4rem;position:relative;display:flex;flex-direction:column;gap:.3rem}
.office::before{content:"";position:absolute;left:1.4rem;top:0;width:1px;height:38px;background:var(--accent-line);transition:height 1s var(--ease)}
.in .office::before{height:38px}
.in .office:nth-child(2)::before{transition-delay:.1s}
.in .office:nth-child(3)::before{transition-delay:.2s}
.in .office:nth-child(4)::before{transition-delay:.3s}
.office strong{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-top:1.6rem}
.office span{font-size:.8rem;color:var(--text-secondary)}
.office .clock{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--accent);margin-top:.6rem}
.stat-num{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--accent)}
.stat-lab{font-size:.82rem;color:var(--text-secondary);margin-top:.3rem}
@media (max-width:900px){.offices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  /* uffici piu' compatti in colonna singola */
  .offices{grid-template-columns:1fr}
  .office{padding:1.25rem 1.2rem}
  .office strong{margin-top:1.05rem;font-size:1.35rem}
  .office::before,.in .office::before,body.pinned .office::before{height:26px}
}

/* ==========================================================================
   IL METODO
   ========================================================================== */
.metodo{position:relative;z-index:1;padding:var(--sez-y) 0}
.met-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:end;margin-bottom:2.4rem}
/* I blocchi entrano da fuori margine, e il contenitore li taglia: si vedono
   arrivare da sotto il bordo del testo invece di comparire dal nulla. Serve
   anche a non far mai sbordare la pagina di lato. */
.values{display:flex;flex-direction:column;overflow:hidden}

/* --verso vale -1 per chi arriva da sinistra e +1 per chi arriva da destra;
   --e va da zero (fuori) a uno (arrivato). A riposo valgono 0 e 1, quindi
   senza codice che le scriva il blocco e' semplicemente al suo posto. */
.vlato{
  will-change:transform;
  transform:translate3d(calc(var(--verso) * clamp(80px, 15vw, 180px) * (1 - var(--e))), 0, 0);
  opacity:clamp(0, calc(var(--e) * 1.8), 1);
}
.vrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding:1.9rem 0;border-top:1px solid var(--hair)}
.vrow:last-child{border-bottom:1px solid var(--hair)}
.vnum{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--accent);padding-top:.4rem}
.vtag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:.6rem}
.vrow h3{font-size:clamp(1.3rem,2.4vw,1.85rem);margin-bottom:.7rem}
.vrow p{color:var(--text-secondary);margin:0 0 1rem;max-width:58ch}
.vrow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.vrow li{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--text-secondary);border:1px solid var(--hair);padding:.3rem .65rem}
.vproof{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.3rem;min-width:150px}
.vproof svg{width:38px;height:38px;color:var(--accent);margin-bottom:.4rem}
.vproof .stat-num{font-size:2.2rem}
.vproof span:last-child{font-size:.76rem;color:var(--text-dim);max-width:16ch}
@media (max-width:900px){
  .met-head{grid-template-columns:1fr}
  /* Una colonna sola. Prima il numero teneva una colonna sua e spingeva
     titolo, testo, elenco e cifra 41 pixel dentro: erano gli unici testi
     della pagina a non cominciare al margine, e si vedeva. */
  .vrow{grid-template-columns:1fr;gap:.2rem}
  .vnum{padding-top:0;margin-bottom:.5rem}
  .vproof{grid-column:auto;align-items:flex-start;text-align:left;margin-top:1.4rem}
  .vproof span:last-child{max-width:none}
}

/* ==========================================================================
   VOCI
   ========================================================================== */
.voci{position:relative;z-index:1;padding:var(--sez-y) 0}
.tp-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent-line);padding:.55rem 1rem;margin-top:1.6rem;transition:background var(--dur) var(--ease)}
.tp-badge:hover{background:rgba(255,255,255,.08)}
.tp-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:1.2rem;margin-top:var(--blocco-y)}
.tp{background:var(--panel);border:1px solid var(--hair);padding:1.8rem;display:flex;flex-direction:column;gap:.9rem;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tp:hover{border-color:var(--hair-strong);transform:translateY(-3px)}
.tp.lead{grid-row:span 2;justify-content:center}
.tp.lead p{font-family:var(--font-display);font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.12;color:var(--text-primary)}
.tp-top{display:flex;align-items:center;gap:.8rem}
.tp-av{width:38px;height:38px;border-radius:50%;border:1px solid var(--accent-line);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.7rem;color:var(--accent);flex-shrink:0}
.tp-name{display:block;font-weight:600;font-size:.92rem}
.tp-meta{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--text-dim)}
.tp-stars{color:var(--accent);letter-spacing:.12em;font-size:.9rem}
.tp p{margin:0;color:var(--text-secondary);font-size:.95rem;line-height:1.6}
.tp-src{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-top:auto}
@media (max-width:860px){.tp-grid{grid-template-columns:1fr}.tp.lead{grid-row:auto}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{position:relative;z-index:1;padding:var(--sez-y) 0}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq-meta{display:flex;flex-direction:column;gap:.55rem;margin-top:2rem}
.faq-meta span{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.acc{border-top:1px solid var(--hair)}
.acc-item{border-bottom:1px solid var(--hair);position:relative}
.acc-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.acc-item.open::before{transform:scaleY(1)}
.acc-trigger{width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;padding:1.4rem 1.2rem;
  transition:background var(--dur) var(--ease)}
.acc-trigger:hover{background:rgba(255,255,255,.035)}
.acc-n{font-family:var(--font-mono);font-size:.66rem;color:var(--accent)}
.acc-q{font-size:1rem;font-weight:500}
.acc-tags{display:flex;gap:.4rem}
.acc-cat,.acc-top{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border:1px solid var(--hair);color:var(--text-dim)}
.acc-top{border-color:var(--accent-line);color:var(--accent)}
.acc-plus{font-family:var(--font-mono);font-size:1.1rem;color:var(--accent);transition:transform var(--dur) var(--ease)}
.acc-item.open .acc-plus{transform:rotate(45deg)}
.acc-panel{overflow:hidden;height:0;transition:height .5s var(--ease)}
.acc-inner{padding:0 1.2rem 1.6rem 3.3rem}
.acc-lead{font-family:var(--font-display);font-size:1.2rem;color:var(--text-primary);margin:0 0 .6rem}
.acc-inner p{color:var(--text-secondary);margin:0 0 .9rem;font-size:.94rem}
.acc-inner ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.acc-inner li{font-size:.88rem;color:var(--text-secondary);padding-left:1.1rem;position:relative}
.acc-inner li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--accent)}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
  .acc-trigger{grid-template-columns:auto 1fr auto}
  .acc-tags{display:none}
  .acc-inner{padding-left:1.2rem}
}

/* ==========================================================================
   CHIUSURA E MODULO
   ========================================================================== */
.chiusura{position:relative;z-index:1;padding:var(--sez-y-larga) 0;overflow:hidden}
.chiusura-bg{position:absolute;inset:0;z-index:0}
.chiusura-bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.chiusura-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--canvas) 0%,rgba(0,0,0,.72) 40%,var(--canvas) 100%)}
.chiusura .wrap{position:relative;z-index:2}
.chiusura .big{margin-bottom:1.4rem}
.small-note{font-size:.88rem;color:var(--text-dim);margin:.7rem 0 0;max-width:62ch}
.form{max-width:760px;margin-top:var(--blocco-y);position:relative;padding:2.5rem clamp(1.2rem,4vw,3rem);background:rgba(0,0,0,.62);backdrop-filter:blur(10px);border:1px solid var(--hair)}
.form::before,.form::after{content:"";position:absolute;top:12%;bottom:12%;width:1px;
  background:linear-gradient(to bottom,transparent,var(--accent-line),transparent);
  transform-origin:center;transition:transform 1.2s var(--ease)}
.form::before{left:0}
.form::after{right:0}
.in .form::before,.in .form::after{transform:scaleY(1)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.form label{display:flex;flex-direction:column;gap:.45rem;font-size:.82rem;color:var(--text-secondary)}
/* la parola "opzionale" finiva su una riga sua e sfalsava l'altezza dei campi accanto */
.form .lbl{display:flex;align-items:baseline;gap:.4rem}
.form label .opt{color:var(--text-dim);font-size:.74rem}
.form input,.form select,.form textarea{
  background:rgba(0,0,0,.6);border:1px solid var(--hair);border-radius:2px;padding:.8rem .9rem;
  color:var(--text-primary);font-size:.94rem;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);outline:none;background:rgba(0,0,0,.85)}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.32)}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.form select option{background:var(--panel);color:var(--text-primary)}
.full{margin-bottom:1.2rem}
.check{flex-direction:row;align-items:flex-start;gap:.7rem;margin:1.4rem 0;font-size:.82rem;line-height:1.5}
.check input{width:17px;height:17px;flex-shrink:0;margin-top:.15rem;accent-color:var(--accent)}
.form-note{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-align:center;margin:1rem 0 0}
.form-ok{display:none;text-align:center;padding:1.2rem 0}
.form-ok h3{font-size:1.5rem;color:var(--accent);margin-bottom:.5rem}
.form-ok p{color:var(--text-secondary);margin:0;font-size:.92rem}
.form.sent .form-body{display:none}
.form.sent .form-ok{display:block}
@media (max-width:640px){.frow{grid-template-columns:1fr}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--hair);padding-top:var(--sez-y);overflow:hidden}
.f-top{display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(2rem,5vw,4rem)}
.f-brand .brand{font-size:1.6rem;display:inline-flex;margin-bottom:1rem;margin-right:0}
.f-tag{color:var(--text-secondary);font-size:.92rem;max-width:34ch;margin:0 0 1.8rem}
.f-nl-label{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.6rem}
.nl{display:flex;border:1px solid var(--hair);max-width:340px}
.nl input{flex:1;background:none;border:0;padding:.75rem .9rem;font-size:.88rem}
.nl input:focus{outline:none}
.nl button{background:var(--accent);color:#000000;border:0;width:46px;cursor:pointer;font-size:1rem;transition:background var(--dur) var(--ease)}

.nl.ok{border-color:var(--accent)}
.f-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.f-cols h4{font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.f-cols a{display:block;font-size:.86rem;color:var(--text-secondary);padding:.28rem 0;transition:color var(--dur) var(--ease)}
.f-cols a:hover{color:var(--text-primary)}
.watermark{display:flex;justify-content:center;pointer-events:none;margin-top:var(--blocco-y);
  opacity:0;transition:opacity 1.6s var(--ease)}
.watermark img{width:auto;height:clamp(56px,9vw,86px)}
.in .watermark{opacity:.12}
.f-bottom{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.3rem 0 1.6rem;border-top:1px solid var(--hair);margin-top:1.2rem}
.f-bottom p{margin:0;font-size:.78rem;color:var(--text-dim)}
.f-bottom .disc{max-width:64ch}
.f-bottom a{color:var(--accent)}
@media (max-width:860px){.f-top{grid-template-columns:1fr}.f-cols{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   WHATSAPP
   ========================================================================== */
.wa{position:fixed;right:1.3rem;bottom:1.3rem;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.wa-menu{background:rgba(0,0,0,.96);backdrop-filter:blur(14px);border:1px solid var(--hair);padding:1rem;
  display:flex;flex-direction:column;gap:.6rem;min-width:250px;
  opacity:0;transform:translateY(8px) scale(.97);transform-origin:bottom right;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.wa-menu.open{opacity:1;transform:none;pointer-events:auto}
.wa-menu strong{font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.wa-menu a{font-size:.85rem;color:var(--text-secondary);padding:.35rem 0;transition:color var(--dur) var(--ease)}
.wa-menu a:hover{color:var(--accent)}
.wa-btn{width:54px;height:54px;border-radius:50%;border:1px solid var(--accent-line);background:rgba(0,0,0,.9);backdrop-filter:blur(10px);
  color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.wa-btn:hover{transform:scale(1.06);background:rgba(255,255,255,.14)}


/* --------------------------------------------------------------------------
   IL MODULO: ERRORI, ATTESA, TRAPPOLA
   L'errore compare accanto al campo che lo riguarda, non tutto in cima:
   chi compila vede subito dove intervenire. Il pulsante, mentre invia, lo
   dice a parole invece di restare immobile.
   -------------------------------------------------------------------------- */

/* Il campo trappola: fuori dalla vista e fuori dal percorso del tabulatore,
   ma non display:none, che alcuni programmi automatici riconoscono. */
.esca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.err{
  margin:.42rem 0 0;font-size:.8rem;line-height:1.4;color:var(--text-primary);
  display:flex;align-items:flex-start;gap:.45rem;
}
/* Senza questa riga l'attributo hidden non basterebbe: display:flex, scritto
   qui sopra, batte quello che il browser fa da solo, e il segno di errore
   resterebbe visibile anche quando non c'e' nessun errore. */
.err[hidden]{display:none}
.err::before{content:"!";font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  flex:0 0 auto;width:1.1em;height:1.1em;margin-top:.14em;
  background:var(--accent);color:var(--canvas);
  border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.err-generale{margin-top:.9rem;font-size:.86rem}
.err-generale a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}

/* Il campo sbagliato si riconosce senza leggere e senza colore: bordo pieno
   invece del filo sottile, come una sottolineatura fatta a mano. */
.form [aria-invalid="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.form [aria-invalid="true"]:focus{outline:2px solid var(--accent);outline-offset:1px}

/* mentre invia */
.form.in-invio{opacity:.86}
.form.in-invio .form-body{pointer-events:none}
#form-invia[disabled]{cursor:progress;opacity:.8}
#form-invia[disabled] .arrow{animation:invio-punto 1.1s ease-in-out infinite}
@keyframes invio-punto{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}

.booking-diretto a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}
/* Il pulsante WhatsApp della conferma: e' l'azione principale del pannello,
   quindi sta sopra al collegamento del calendario e ha il peso di un
   pulsante, non di un rimando. */
.ok-wa{margin-top:1.3rem}
.ok-wa .btn{display:inline-flex}

.ok-booking{margin-top:1.1rem}
.ok-booking a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}

@media (prefers-reduced-motion:reduce){
  #form-invia[disabled] .arrow{animation:none;opacity:.6}
}


/* --------------------------------------------------------------------------
   CONTROLLO SULLE SEI LARGHEZZE
   Quanto emerso provando il sito a 320, 375, 390, 768, 1024 e 1440 pixel.
   Tre cose: le aree da toccare, la misura del testo nei campi, e le
   etichette piu' piccole del foglio.
   -------------------------------------------------------------------------- */

/* --- 1. aree da toccare: 44px e' la misura consigliata da Apple e Google,
       ed e' circa il polpastrello di un adulto. --- */
.burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center;margin-right:-.4rem}
.brand{padding-block:.6rem}
.main-nav a{padding-block:.7rem}
.mobile-nav a{padding-block:.55rem}
.f-cols a{display:flex;align-items:center;min-height:44px}
.wa-menu a{display:flex;align-items:center;min-height:44px}
.check{align-items:center;padding-block:.2rem}
.check input{width:20px;height:20px;margin-top:0}

/* --- 2. i campi: sotto 16px iOS ingrandisce da solo appena si tocca il
       campo, e la pagina resta ingrandita. Sedici e' il minimo. --- */
.form input,.form select,.form textarea,.nl input{font-size:16px}

/* --- 3. le etichette che erano scese sotto i dieci pixel --- */
.chip-tech{font-size:.64rem}
.pc-riga dt{font-size:.66rem}
.principio .n{font-size:.66rem}
.vtag{font-size:.66rem}
.tp-meta{font-size:.66rem}
.tp-src{font-size:.66rem}
.acc-cat,.acc-top{font-size:.64rem}
.wa-menu strong{font-size:.66rem}
.pc-badge{font-size:.66rem}

/* Sul telefono e sul tablet le stesse etichette guadagnano ancora un poco:
   li' si legge con il sole addosso e il dispositivo in mano. */
@media (max-width:900px){
  .pc-riga dt,.principio .n,.vtag,.tp-meta,.tp-src,.wa-menu strong{font-size:.7rem}
  .chip-tech,.acc-cat,.acc-top{font-size:.66rem}
  .blabel,.f-nl-label,.f-cols h4{font-size:.68rem}
}

/* ==========================================================================
   MOVIMENTO RIDOTTO — stati finali mostrati, motori fermi
   ========================================================================== */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
  }
  .rise{opacity:1;transform:none}
  .vlato{opacity:1;transform:none;will-change:auto}
  .colonnade span{transform:scaleY(1)}
  .bcard::before{transform:scaleX(1)}
  .spark polyline{stroke-dashoffset:0}
  .bars span{transform:scaleY(1)}
  .man-heading i::after{transform:scaleX(1)}
  .office::before{height:38px}
  .form::before,.form::after{transform:scaleY(1)}
  .watermark{opacity:.12}
  .principio{opacity:1 !important;transform:none !important;border-left-color:var(--accent)}
  .pc-vortice{display:none}
  /* Senza animazione la tappa non ha niente da raccontare: si richiude, se no
     resterebbero due schermi e mezzo di vuoto. */
  .pc-rottura{display:none}
  .pc-rotta > .pc-faccia{opacity:1}
  .pc-tappa{height:auto !important}
  .pc-palco{position:static !important;height:auto !important;padding-block:0 !important}
}

/* stessi stati, ma applicati dal JS quando il movimento ridotto si attiva a pagina aperta */
body.pinned .rise{opacity:1;transform:none}
body.pinned .vlato{opacity:1;transform:none}
body.pinned .colonnade span{transform:scaleY(1)}
body.pinned .bcard::before{transform:scaleX(1)}
body.pinned .spark polyline{stroke-dashoffset:0}
body.pinned .bars span{transform:scaleY(1)}
body.pinned .man-heading i::after{transform:scaleX(1)}
body.pinned .office::before{height:38px}
body.pinned .form::before,body.pinned .form::after{transform:scaleY(1)}
body.pinned .watermark{opacity:.12}
body.pinned .principio{opacity:1;transform:none;border-left-color:var(--accent)}
body.pinned .pc-vortice{display:none}
body.pinned .pc-tappa{height:auto}
body.pinned .pc-palco{position:static;height:auto;padding-block:0}

/* ==========================================================================
   PAGINE LEGALI — stesso mondo, testo invariato
   ========================================================================== */
.legal-page{background:var(--canvas)}
.legal-main{position:relative;z-index:1;padding:calc(72px + clamp(2.5rem,6vw,4.5rem)) 0 clamp(3rem,7vw,5rem)}
.legal-back{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:2.5rem;
  transition:opacity var(--dur) var(--ease)}
.legal-back:hover{opacity:.7}
.legal-header{max-width:70ch;margin-bottom:2.5rem;position:relative;padding-left:1.5rem}
.legal-header::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;background:var(--accent-line)}
.legal-header .section-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .8rem}
.legal-header h1{font-size:clamp(1.9rem,4.5vw,3.1rem);line-height:1.08;margin:0 0 .9rem}
.legal-meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-dim);margin:0}

.legal-callout{max-width:78ch;background:var(--panel);border:1px solid var(--hair);border-left:2px solid var(--accent);
  padding:1.4rem 1.6rem;margin-bottom:3rem;font-size:.92rem;line-height:1.7;color:var(--text-secondary)}
.legal-callout strong{color:var(--text-primary);font-weight:600}
.legal-callout a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}

.legal-body{max-width:74ch}
.legal-body h2{font-size:clamp(1.25rem,2.4vw,1.7rem);margin:2.6rem 0 .9rem;line-height:1.2}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:var(--font-body);font-weight:600;font-size:1.02rem;margin:1.8rem 0 .6rem;letter-spacing:0}
.legal-body p{color:var(--text-secondary);margin:0 0 1.1rem;line-height:1.75}
.legal-body a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}
.legal-body ul,.legal-body ol{color:var(--text-secondary);padding-left:1.2rem;margin:0 0 1.2rem;line-height:1.75}
.legal-body li{margin-bottom:.45rem}
.legal-body table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.9rem}
.legal-body th,.legal-body td{border:1px solid var(--hair);padding:.7rem .85rem;text-align:left;color:var(--text-secondary)}
.legal-body th{background:var(--panel);color:var(--text-primary);font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.legal-quote{font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.35;
  color:var(--text-primary);border-left:2px solid var(--accent);padding-left:1.3rem;margin:0 0 1.4rem}

.legal-contact{max-width:74ch;margin-top:3rem;padding:1.2rem 1.5rem;border:1px solid var(--hair);
  font-size:.9rem;color:var(--text-secondary)}
.legal-contact a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}

.legal-nav-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hair)}
.legal-nav-list a{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--text-secondary);
  border:1px solid var(--hair);padding:.5rem .9rem;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.legal-nav-list a:hover{border-color:var(--accent);color:var(--accent)}
.legal-nav-list a[aria-current="page"]{border-color:var(--accent-line);color:var(--accent);background:rgba(255,255,255,.06)}

/* ==========================================================================
   STATI DI PARTENZA DELLE ANIMAZIONI
   Valgono solo quando il codice c'e'. Senza JavaScript nulla viene nascosto:
   il sito resta leggibile per intero, card dei servizi comprese.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  :where(.js) .colonnade span{transform:scaleY(0)}
  :where(.js) .bcard::before{transform:scaleX(0)}
  :where(.js) .spark polyline{stroke-dashoffset:400}
  :where(.js) .bars span{transform:scaleY(0)}
  :where(.js) .man-heading i::after{transform:scaleX(0)}
  :where(.js) .office::before{height:0}
  :where(.js) .form::before,:where(.js) .form::after{transform:scaleY(0)}
  :where(.js) .watermark{opacity:0}
}

/* Senza codice l'hero a scorrimento non puo' funzionare (il filmato lo carica
   il codice): si mostra invece l'hero fermo, con la sua immagine da CSS. */
html:not(.js) .hero{display:none}
html:not(.js) .static-hero{display:flex}
html:not(.js) #static-poster{background-image:url('img/hero-ending.jpg');background-size:cover;background-position:center}

/* ==========================================================================
   L'ARGENTO CHE SCOPRE IL BIANCO
   Il bianco resta bianco finche' non ci passi sopra: allora la lastra
   d'argento lucido (img/argento-lastra.svg) prende la scritta **tutta
   insieme**. L'andata dura 120ms — il cursore atterra e la parola e' gia'
   argento, non c'e' un'onda da guardare; il ritorno al bianco e' lento,
   cosi' il passaggio lascia una traccia anche quando il cursore e' gia' via.
   Vale solo sulle cose importanti — titoli, numeri, bottoni — non su tutto
   cio' che e' bianco: il testo corrente, i filetti e la barra restano com'erano.
   La scia che segue il cursore ovunque sta in fondo a questo blocco.
   ========================================================================== */
:root{
  /* La scala del metallo. Dal 2026-09-27 la lastra non e' piu' una foto di
     foglia graffiata ma un gradiente disegnato: superficie liscia, grigio
     deciso da noi, e il lucido affidato a due stacchi netti invece che alla
     texture (il perche' sta dentro argento-lastra.svg).
     Il primo valore e' l'unico usato dal foglio — bordo del bottone
     contornato, sottolineatura del Manifesto, link dell'indice in Strategie.
     Gli altri due sono gli estremi della lastra, e servono a ritoccare il
     colore restando in scala. */
  --argento:#A8B2C0;
  --argento-chiaro:#E9EDF4;
  --argento-scuro:#6D7887;
  --lastra:url('img/argento-lastra.svg');
  --argento-in:.12s;   /* andata: praticamente subito */
  --argento-dur:.45s;  /* ritorno al bianco */
}

/* Due strati di sfondo: l'argento sopra, il bianco sotto. La lastra e' larga tre
   volte l'elemento e il suo terzo destro e' trasparente: a riposo e' quello a
   stare sopra il testo, quindi si vede il bianco di sotto. Portando lo sfondo
   a 0% la lastra scorre e il bordo sfumato attraversa le lettere.
   background-clip:text dipinge tutto questo solo dentro i glifi. */
.big,
.man-heading,
.bnum,
.bnum.accent,
.stat-num,
.pc-num,
.btn-outline{
  background-image:var(--lastra),linear-gradient(#FFFFFF,#FFFFFF);
  background-repeat:no-repeat,no-repeat;
  background-size:300% 100%,100% 100%;
  background-position:100% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:background-position var(--argento-dur) var(--ease);
}

/* I figli devono lasciar passare lo sfondo del genitore. Senza questa riga il
   corsivo dei titoli resterebbe bianco mentre il resto diventa argento, perche'
   .big i e .man-heading i dichiarano un colore loro. */
.big i,.big span,.man-heading i,.man-heading span,.btn-outline span{color:inherit}

/* Il tocco non ha un "passaggio del mouse": senza questa guardia sui telefoni
   l'argento resterebbe acceso dopo un tocco, che e' peggio di non averlo. */
@media (hover:hover){
  .big:hover,
  .man-heading:hover,
  .bnum:hover,
  .stat-num:hover,
  .pc-num:hover,
  .btn-outline:hover,
  /* i numeri sono piccoli: si accendono anche prendendo la card che li contiene */
  .bcard:hover .bnum,
  .vproof:hover .stat-num,
  .pc:hover .pc-num{
    background-position:0 0,0 0;
    transition-duration:var(--argento-in);
    animation:argento-vivo 3s var(--ease-soft) var(--argento-in) infinite;
  }

  .btn-outline:hover{border-color:var(--argento)}
  /* la sottolineatura del Manifesto e' bianca: segue il titolo */
  .man-heading:hover i::after{background:var(--argento)}

  /* Sui bottoni pieni l'argento non sta sulle lettere ma sul fondo bianco, e
     il testo resta nero. E' questo il vincolo che fissa il punto piu' scuro
     della lastra: il nero ci tiene 4,69:1, appena sopra il 4,5:1 di soglia.
     Scurire il metallo per farlo "vedere di piu'" si paga qui. */
  .btn-primary,
  .nl button{
    background-color:#FFFFFF;
    background-image:var(--lastra);
    background-repeat:no-repeat;
    background-size:300% 100%;
    background-position:100% 0;
    transition:background-position var(--argento-dur) var(--ease);
  }
  .btn-primary:hover,
  .nl button:hover{
    background-position:0 0;
    transition-duration:var(--argento-in);
    animation:argento-vivo 3s var(--ease-soft) var(--argento-in) infinite;
  }
}

/* ==========================================================================
   I GRAFFI DEL CURSORE
   Una tela fissa sopra tutta la pagina, che non intercetta nessun clic. Sta
   sotto il velo bianco dell'attraversamento (z-index 100): dentro la luce i
   graffi spariscono, ed e' giusto cosi'. Li disegna assets/graffi.js, che si
   installa solo dove esiste un cursore vero; chi chiede meno movimento non li
   vede. Dal 2026-09-27 al posto della cometa d'argento.
   ========================================================================== */
.graffi{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  width:100%;height:100%;
}

/* Il respiro del metallo: parte quando la lastra ha finito di scorrere.
   Sull'oro la pulsazione era brightness+saturate; l'argento e' quasi
   acromatico e saturarlo lo farebbe virare all'azzurro invece che brillare,
   quindi il respiro e' brightness+contrast: i riflessi salgono, le ombre
   scendono appena, ed e' esattamente cosi' che si legge un metallo lucido. */
@keyframes argento-vivo{
  0%,100%{filter:none}
  50%    {filter:brightness(1.14) contrast(1.07)}
}

/* Chi chiede meno movimento l'argento lo vede lo stesso, ma senza la corsa. */
@media (prefers-reduced-motion:reduce){
  .big,.man-heading,.bnum,.stat-num,.pc-num,.btn-outline,.btn-primary,.nl button{transition:none}
  .big:hover,.man-heading:hover,.bnum:hover,.stat-num:hover,.pc-num:hover,
  .btn-outline:hover,.btn-primary:hover,.nl button:hover,
  .bcard:hover .bnum,.vproof:hover .stat-num,.pc:hover .pc-num{animation:none}
}

/* ==========================================================================
   LA PAGINA DELLE STRATEGIE
   Una pagina da leggere, non da guardare: misura di riga stretta, gerarchia
   affidata allo spazio e non ai riquadri. Riusa i mattoni che esistono gia'
   (.big per i titoli, .bnum per i numeri, i bottoni) cosi' l'argento al passaggio
   del mouse funziona qui senza aggiungere una riga.
   ========================================================================== */
.st-main{position:relative;z-index:1;padding:calc(var(--barra) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(3rem,7vw,5rem)}

.st-intro{max-width:64ch;margin-bottom:clamp(2.5rem,6vw,4rem)}
.st-intro h1{font-size:clamp(2.1rem,5.4vw,3.8rem);line-height:1.04;margin:.6rem 0 1.2rem}
.st-intro h1 i{font-style:italic;color:var(--accent)}
.st-intro .lede{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--text-secondary);line-height:1.7;margin:0}

/* L'indice: tre righe, non tre scatole. Le scatole le ha gia' la home. */
.st-indice{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.8rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.st-indice a{color:var(--text-dim);border-bottom:1px solid var(--accent-muted);padding-bottom:.15rem;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
@media (hover:hover){.st-indice a:hover{color:var(--argento);border-bottom-color:var(--argento)}}

/* Un servizio per blocco, separati da un filetto: il respiro fa la gerarchia */
.st-serv{border-top:1px solid var(--hair);padding-block:clamp(2.4rem,5.5vw,4rem)}
.st-testa{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;align-items:baseline;margin-bottom:1.4rem}
.st-testa .bnum{grid-row:span 2}
.st-nome{font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;margin:0}
.st-claim{grid-column:2;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);margin:0}

.st-corpo{max-width:72ch}
.st-corpo h3{font-family:var(--font-body);font-weight:600;font-size:1.02rem;letter-spacing:0;
  margin:2rem 0 .7rem}
.st-corpo p{color:var(--text-secondary);line-height:1.75;margin:0 0 1.1rem}
.st-corpo strong{color:var(--text-primary);font-weight:600}
.st-corpo a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}

/* I passi: numerati a mano, perche' il numero deve avere il peso del mono e
   restare allineato anche quando il testo va a capo */
.st-passi{list-style:none;counter-reset:passo;padding:0;margin:0 0 1.4rem}
.st-passi li{counter-increment:passo;position:relative;padding-left:2.6rem;margin-bottom:.9rem;
  color:var(--text-secondary);line-height:1.7}
.st-passi li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:.12em;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--accent)}

/* I fattori che muovono il risultato: elenco asciutto, senza riquadro. Il
   trattino fa da segno, quindi il pallino va tolto — se restano tutti e due
   si legge "• — voce", che e' esattamente come veniva al primo colpo. */
.st-fattori{list-style:none;padding:0;margin:0 0 1.4rem}
.st-fattori li{color:var(--text-secondary);line-height:1.7;margin-bottom:.55rem;
  padding-left:1.1rem;position:relative}
.st-fattori li::before{content:"—";position:absolute;left:0;color:var(--text-dim)}

/* Due colonne asciutte: chi fa cosa. Su schermo stretto diventano una. */
.st-due{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin:1.4rem 0 1.6rem}
.st-due > div{border-left:1px solid var(--accent-line);padding-left:1.1rem}
.st-due h4{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin:0 0 .6rem;font-weight:400}
.st-due ul{list-style:none;padding:0;margin:0}
.st-due li{color:var(--text-secondary);line-height:1.6;margin-bottom:.45rem;font-size:.92rem}

/* La scheda dei dati: le stesse voci delle card in home, in riga. Le misure
   sono strette apposta: le voci sono cinque e devono stare su una riga sola,
   altrimenti la quinta va a capo e lascia mezza riga di vuoto nero. */
.st-scheda{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:1.8rem 0}
.st-scheda > div{background:var(--canvas);padding:.9rem 1rem}
.st-scheda dt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:.3rem}
.st-scheda dd{margin:0;font-size:.92rem;color:var(--text-primary)}

/* Dove il meccanismo si ferma. Bordo pieno e non filetto: deve pesare quanto
   il resto, altrimenti diventa la solita riga in fondo che nessuno legge. */
.st-limiti{border:1px solid var(--hair);border-left:2px solid var(--accent);
  padding:1.2rem 1.4rem;margin:1.8rem 0 0}
.st-limiti h4{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .7rem;font-weight:400}
.st-limiti ul{list-style:none;padding:0;margin:0}
.st-limiti li{color:var(--text-secondary);line-height:1.65;margin-bottom:.6rem;font-size:.92rem;
  padding-left:1rem;position:relative}
.st-limiti li::before{content:"—";position:absolute;left:0;color:var(--text-dim)}
.st-limiti li:last-child{margin-bottom:0}

/* La chiusura */
.st-chiusura{border-top:1px solid var(--hair);padding-top:clamp(2.4rem,5.5vw,3.6rem);max-width:72ch}
.st-chiusura p{color:var(--text-secondary);line-height:1.75;margin:0 0 1.4rem}
.st-azioni{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

@media (max-width:760px){
  .st-due{grid-template-columns:1fr;gap:1.1rem}
  .st-testa{grid-template-columns:1fr;gap:.2rem}
  .st-testa .bnum{grid-row:auto}
  .st-claim{grid-column:1}
}

/* Le pagine interne (strategie e legali) non hanno l'hamburger: sotto i 900px
   la regola generale nasconde la navigazione e li' resterebbe la sola
   intestazione con il marchio. Si tiene visibile la voce Home, che e' quella
   che serve davvero quando si e' dentro una pagina. */
@media (max-width:900px){
  .site-header .nav-interna{display:flex;gap:1rem}
  .nav-interna a:not(.nav-home){display:none}
}