/* ---------- palette estratta dal logo Eldorado ---------- */
  :root{
    --amber:#F3AB1B;  --teal:#63BDBD;  --purple:#7563AB;
    --pink:#E16399;   --navy:#1B3F87;  --cyan:#2DBDF3;
    --ink:#1A1A1A;    --ink-2:#424242; --ink-3:#8A8A8E;
    --paper:#F1F2F4;  --paper-2:#FAFAFB; --line:rgba(26,26,26,.11);
    /* fondo dell'hero "due mani": un grigio chiaro, piu' saturo del
       --paper delle sezioni cosi' il blocco si stacca senza scurirsi */
    --grigio-mani:#D2D7DC;
    --gutter:clamp(18px,3.4vw,54px);
    /* Font copiati dal sito precedente (Wix), che l'utente vuole mantenere
       nel resto del sito nuovo (2026-09-03): misurati sul vivo con Playwright
       su ogni testo renderizzato, non indovinati — sono gli stessi due usati
       li', nello stesso ruolo. "Wix Madefor Display" per il corpo del testo
       (h3 in giu', paragrafi, bottoni, etichette — dove il vecchio sito usava
       madefor-display); "Familjen Grotesk" SOLO per i titoli grandi h1/h2
       (dove il vecchio usava familjen-grotesk, peso 700). Entrambi su Google
       Fonts, caricati nell'head di ogni pagina. Il vecchio fallback
       Helvetica Neue resta in coda, per il testo che compare prima che il
       font scarichi o se il caricamento fallisce. */
    --sans:"Wix Madefor Display","Helvetica Neue",Helvetica,-apple-system,"Segoe UI",Arial,sans-serif;
    --display:"Familjen Grotesk","Wix Madefor Display","Helvetica Neue",Helvetica,-apple-system,"Segoe UI",Arial,sans-serif;
  }
  /* Il sito è dichiaratamente CHIARO: nessun blocco per il tema scuro.
     Scelta del cliente — il fondo bianco è parte della direzione grafica, non una
     preferenza di sistema da assecondare. `color-scheme:light` impedisce al browser
     di ridipingere controlli e barre di scorrimento in scuro. */
  :root{ color-scheme:light }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0; font-family:var(--sans); color:var(--ink);
    background:var(--paper); overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--amber); color:#1A1A1A }
  a{ color:inherit }
  /* nasconde visivamente senza nascondere a chi legge con uno screen reader
     (implementazione standard, la stessa ovunque) — usata la prima volta
     dalla parola a rotazione "flip" della sezione WEB3: l'animazione ha
     aria-hidden perche' cambia da sola, il contenuto vero (tutte e tre le
     tecnologie insieme) sta qui, sempre disponibile. */
  .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;
  }

  /* ================= NAV — pillola centrale, tutto il sito (2026-08-31) =================
     Rifatta sul modello di y-vision.co.kr, su richiesta esplicita dell'utente:
     una pillola che galleggia al centro in alto, con il marchio AL CENTRO,
     il comando menu a sinistra e la CTA a destra. Il menu non e' piu' un
     pannello a tendina separato: e' la pillola STESSA che si apre in
     verticale (overflow nascosto + altezza animata), e le voci entrano
     sfalsate una dopo l'altra.

     Differenza voluta dal riferimento: li' la pagina e' nera e la pillola
     bianca; qui la pagina resta chiara (richiesta dell'utente: "voglio
     mantenere lo sfondo bianco e i colori tipici di Eldorado"), quindi la
     pillola resta chiara con un filo di bordo e un'ombra che la stacca, e
     dentro conserva lo stesso rapporto del riferimento — fondo chiaro con
     la CTA scura. E' su TUTTE le pagine, non solo sulla home: un header che
     cambia faccia navigando e' esattamente il difetto gia' segnalato prima. */
  .topbar{ position:sticky; top:0; z-index:70; height:80px; }
  /* La larghezza CHIUSA resta la regola CSS qui sotto; quella APERTA la
     scrive menu-bar.js in px diretti sullo style, non qui — vedi il
     commento in quel file per il perche' (un valore calcolato in JS, letto
     PRIMA che la larghezza sia effettivamente cambiata, darebbe un'altezza
     sbagliata: il contenuto andrebbe a capo in piu' righe di quante gliene
     servano davvero alla larghezza finale). */
  .bar{
    position:absolute; left:50%; top:14px; translate:-50% 0; z-index:80;
    width:min(560px, calc(100% - 2rem));
    height:64px; overflow:hidden;
    background:var(--paper-2); color:var(--ink);
    border:1px solid var(--line); border-radius:32px;
    box-shadow:0 18px 40px -18px rgba(18,22,38,.28);
    transition:height .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1);
  }
  /* Misurato sul riferimento (y-vision.co.kr, 2026-09-01): la sua pillola
     chiusa tiene il bottone CTA a 16px dal proprio bordo destro e il
     comando menu a 24px da quello sinistro (pl-6/pr-4 del suo CSS). La mia
     era a 8px/20px — troppo stretta sulla CTA, segnalato dall'utente
     confrontando i due bordi. Quando si apre, il riferimento allarga questo
     margine (arriva a 40px, md:px-10): una pillola stretta di 520px e una
     larga 1440px non possono avere lo stesso margine e sembrare entrambe
     equilibrate. */
  .bar-top{
    position:relative; display:flex; align-items:center; justify-content:space-between;
    height:64px; padding:0 16px 0 24px;
    transition:padding .42s cubic-bezier(.4,0,.2,1);
  }
  .bar.open .bar-top{ padding:0 clamp(16px,3vw,40px) 0 clamp(20px,3.2vw,40px); }
  /* "MENU" a 13.5px: misurato sul riferimento, il suo equivalente sta a
     13.66px — il mio era 10.5px, un quarto piu' piccolo, ed e' esattamente
     quello che l'utente ha notato confrontando i due ("lo hai fatto più
     piccolo"). Stessa cosa per bar-cta poco sotto. */
  .bar-menu{
    appearance:none; border:0; background:none; cursor:pointer; padding:0;
    display:flex; align-items:center; gap:9px; font-family:inherit;
    font-size:13.5px; letter-spacing:.1em; text-transform:uppercase;
    font-weight:700; color:var(--ink); -webkit-tap-highlight-color:transparent;
  }
  /* Le "3 linee non uguali" segnalate dall'utente erano vere, anche se le tre
     erano larghe esattamente uguale in CSS (17px): il motivo era che, essendo
     tre <div> separati impilati con `gap`, ognuno finiva su un pixel FISICO
     frazionario diverso (misurato: y=40.61 / 46.20 / 51.80 — tre resti
     diversi), quindi ognuna delle tre veniva sfumata dall'antialiasing in
     modo diverso e sembrava un'altra lunghezza. Un unico <svg> con tre
     <path> risolve alla radice: tutte e tre nascono nello stesso spazio
     vettoriale e vengono rasterizzate insieme, come fa gia' il riferimento
     (anche li' e' un singolo svg a 3 path, verificato sul suo DOM). */
  .bar-burger{ display:flex; flex:none; width:20px; height:20px; }
  .bar-burger svg{ display:block; width:20px; height:20px; overflow:visible; }
  .bar-burger path{
    transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s;
    transform-box:fill-box; transform-origin:center;
  }
  .bar.open .bar-burger .l1{ transform:translateY(6px) rotate(45deg) }
  .bar.open .bar-burger .l2{ opacity:0 }
  .bar.open .bar-burger .l3{ transform:translateY(-6px) rotate(-45deg) }
  /* il marchio e' centrato sulla pillola in assoluto, non dal flex: cosi'
     resta esattamente a meta' anche se il comando a sinistra e la CTA a
     destra hanno larghezze diverse (e ce l'hanno). */
  .bar-brand{
    position:absolute; left:50%; top:50%; translate:-50% -50%;
    display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit;
  }
  /* marchio ingrandito su richiesta dell'utente (era 30px). La scritta e'
     dimensionata in altezza dal rapporto reale dell'icona (518x351), come
     gia' altrove nel foglio, cosi' le due parti restano alte uguali. */
  .bar-brand .brand-icon{ width:40px; height:auto; display:block; }
  .bar-brand .brand-word{ height:calc(40px * 351 / 518); width:auto; display:block; }
  .bar-cta{
    display:inline-flex; align-items:center; padding:10px 20px; border-radius:99px;
    background:var(--ink); color:var(--paper); text-decoration:none; white-space:nowrap;
    font-size:13.5px; letter-spacing:.02em; text-transform:uppercase; font-weight:700;
    transition:opacity .18s;
  }
  .bar-cta:hover{ opacity:.82 }

  /* ---- pannello aperto: griglia grande, come il riferimento ----
     Prima le voci erano un elenco stretto, maiuscolo, a 11.5px: la richiesta
     era che si "prendano lo spazio" del pannello, che ora si allarga (vedi
     menu-bar.js) invece di restare stretto e crescere solo in altezza. Il
     numero davanti a ogni voce e' lo stesso vezzo del riferimento (li' "01
     세일즈 마케팅" ecc.) — qui e' generato da un contatore CSS, non scritto a
     mano: aggiungere o togliere una voce di menu non richiede rinumerare
     nulla. */
  /* Menu a due gruppi (2026-09-03): prima era un elenco piatto di sei voci,
     ora e' diviso in "Service" (cosa vendiamo) ed "Explore" (i prodotti), con
     sotto una riga di dati aziendali — struttura presa dal riferimento
     y-vision.co.kr indicato dall'utente. "Home" e "Contatti" sono stati tolti
     di proposito: alla home ci si va dal marchio al centro della pillola, ai
     contatti dal bottone nero sempre visibile a destra, quindi erano due voci
     che ripetevano comandi gia' presenti a un dito di distanza. */
  /* `align-items:stretch` e `text-transform:none` qui sotto NON sono
     ridondanti: piu' in alto in questo stesso foglio ci sono due regole
     generiche sull'ELEMENTO — `nav{ display:flex; align-items:center }` e
     `nav a{ text-transform:uppercase; letter-spacing:.15em }` — pensate per
     la vecchia barra orizzontale. Una regola di classe vince solo sulle
     proprieta' che dichiara: quelle che non nomina restano quelle
     dell'elemento. Senza queste due righe i gruppi finivano centrati in
     mezzo alla pillola invece che allineati a sinistra, e le voci uscivano
     tutte in maiuscolo spaziato. */
  .bar-nav{
    display:flex; flex-direction:column; align-items:stretch;
    gap:clamp(16px,2.2vw,28px);
    padding:8px clamp(16px,3vw,40px) 26px;
  }
  .bar-nav a{ text-transform:none; }
  .nav-eti{
    margin:0 0 clamp(8px,1vw,14px);
    font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-3);
    opacity:0; translate:0 -6px; transition:opacity .3s, translate .3s;
  }
  .nav-voci{ display:grid; gap:2px clamp(20px,3vw,48px); }
  /* Service tiene le colonne allineate come nel riferimento; Explore no: li'
     le voci sono poche e vanno in fila, non incolonnate. */
  .nav-gruppo--service .nav-voci{ counter-reset:navidx; grid-template-columns:repeat(3,1fr); }
  .nav-gruppo--explore .nav-voci{ display:flex; flex-wrap:wrap; gap:2px clamp(24px,3.4vw,54px); }
  .nav-voce{
    display:block; margin:0 -14px; padding:13px 14px 12px; border-radius:12px;
    text-decoration:none; color:var(--ink); white-space:normal;
    font-size:clamp(19px,1.7vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.15;
    opacity:0; translate:0 -6px;
    transition:opacity .3s, translate .3s, background .18s, color .18s;
  }
  /* Il numerino sta SOLO su Service, come nel riferimento. NON mettere
     counter-increment anche su .nav-voce: un elemento e il suo pseudo-elemento
     condividono il contatore e avanzerebbe due volte per voce (02, 04, 06). */
  .nav-gruppo--service .nav-voce::before{
    counter-increment:navidx; content:counter(navidx,decimal-leading-zero);
    display:block; margin-bottom:6px;
    font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }
  /* Tag colorati (@AI, @Web3, …) sopra al nome della voce. Vanno ACCANTO al
     numerino, nello spazio che era vuoto, non su una riga propria: cosi' non
     allungano il menu di una terza riga per voce. Serve la griglia perche' il
     numerino e' uno pseudo-elemento e non puo' stare dentro un contenitore
     insieme ai tag; qui ::before, .nav-tags e .nav-nome sono tre celle. */
  .nav-gruppo--service .nav-voce{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:10px; row-gap:6px; align-items:center;
  }
  .nav-gruppo--service .nav-voce::before{ margin-bottom:0; }   /* lo spazio lo da' row-gap */
  .nav-nome{ grid-column:1 / -1; }
  .nav-tags{ display:flex; flex-wrap:wrap; gap:4px; }
  .nav-tag{
    font-size:9px; font-weight:700; letter-spacing:.05em; line-height:1.5;
    padding:2px 7px; border-radius:99px; white-space:nowrap;
    /* il fondo resta la tinta pura, molto diluita; il testo invece va
       impastato con l'inchiostro, altrimenti i colori chiari della palette
       (ambra, teal, ciano) su fondo chiaro si leggono male */
    color:color-mix(in srgb, var(--t) 72%, var(--ink));
    background:color-mix(in srgb, var(--t) 15%, transparent);
  }
  .nav-voce:hover,.nav-voce:focus-visible{ background:var(--paper) }
  .nav-voce[aria-current]{ color:var(--teal) }
  /* entrata sfalsata: le voci arrivano una dopo l'altra mentre la pillola si apre */
  .bar.open .nav-eti,.bar.open .nav-voce,.bar.open .nav-piede{ opacity:1; translate:0 0 }
  .bar.open .nav-gruppo--service .nav-voce:nth-child(1){ transition-delay:.08s }
  .bar.open .nav-gruppo--service .nav-voce:nth-child(2){ transition-delay:.12s }
  .bar.open .nav-gruppo--service .nav-voce:nth-child(3){ transition-delay:.16s }
  .bar.open .nav-gruppo--explore .nav-eti{ transition-delay:.18s }
  .bar.open .nav-gruppo--explore .nav-voce:nth-child(1){ transition-delay:.22s }
  .bar.open .nav-gruppo--explore .nav-voce:nth-child(2){ transition-delay:.26s }
  .bar.open .nav-piede{ transition-delay:.30s }

  /* riga sotto la linea: dati dell'azienda a sinistra, "Chi siamo" ben
     staccato, e il cambio lingua spinto tutto a destra da margin-left:auto */
  .nav-piede{
    border-top:1px solid var(--line); padding-top:clamp(15px,1.7vw,21px);
    display:flex; align-items:center; gap:clamp(14px,2.6vw,36px); flex-wrap:wrap;
    opacity:0; translate:0 -6px; transition:opacity .3s, translate .3s;
  }
  .nav-dati{
    display:flex; flex-direction:column; gap:2px;
    font-size:12px; line-height:1.55; color:var(--ink-3); font-weight:400;
  }
  .nav-dati b{ color:var(--ink); font-weight:700; letter-spacing:-.01em; font-size:12.5px; }
  .nav-dati a{ color:var(--ink-2); text-decoration:none; font-size:12px; letter-spacing:normal; }
  .nav-dati a:hover{ color:var(--ink); text-decoration:underline; }
  /* .nav-chisiamo -> .nav-pill (2026-09-07): stesso identico stile, solo
     rinominata perche' ora la usano due link diversi in coda al menu
     ("I nostri eventi" + "Chi Siamo") — tenerla legata al nome "chisiamo"
     sarebbe stato fuorviante per chi legge il markup dell'altro link. */
  .nav-pill{
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    padding:10px 18px; border-radius:99px; border:1px solid var(--ink);
    text-decoration:none; color:var(--ink);
    font-size:13.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
    transition:background .18s, color .18s;
  }
  .nav-pill:hover,.nav-pill:focus-visible{ background:var(--ink); color:var(--paper); }
  .nav-pill span{ transition:translate .18s }
  .nav-pill:hover span{ translate:3px 0 }
  .nav-piede .lang{ margin-left:auto; }

  @media (max-width:760px){
    .nav-gruppo--service .nav-voci{ grid-template-columns:repeat(2,1fr) }
  }
  @media (max-width:560px){
    .nav-gruppo--service .nav-voci{ grid-template-columns:1fr }
    .nav-piede{ align-items:flex-start; gap:14px }
    .nav-piede .lang{ margin-left:0 }
  }
  @media (max-width:520px){
    .bar-menu-label{ display:none }
    .bar-top{ padding-left:16px }
    .bar-cta{ padding:9px 15px; font-size:12px }
    .bar-brand .brand-icon{ width:36px }
    .bar-brand .brand-word{ height:calc(36px * 351 / 518) }
  }
  /* Sotto i 400px (iPhone SE e simili) il marchio ingrandito arrivava a
     toccare la CTA: essendo centrato in assoluto, cresce verso destra e
     nessun flex lo ferma. Qui rientra insieme alla CTA. Soglia alzata da
     380 a 400 quando "MENU"/CTA sono cresciuti (richiesta dell'utente,
     2026-09-01): a 390px arrivavano a toccarsi esattamente. */
  @media (max-width:400px){
    .bar-brand .brand-icon{ width:30px }
    .bar-brand .brand-word{ height:calc(30px * 351 / 518) }
    .bar-cta{ padding:8px 13px; font-size:11px; letter-spacing:.02em }
  }
  /* Sugli schermi piu' stretti in circolazione (320px) marchio e CTA
     arrivavano comunque a combaciare: li' resta il solo simbolo, che e' la
     parte riconoscibile del marchio. */
  @media (max-width:340px){ .bar-brand .brand-word{ display:none } }
  html.movimento-ridotto .bar{ transition:none }
  html.movimento-ridotto .bar-nav > a{ transition:none }
  html.movimento-ridotto .bar-burger path{ transition:none }

  .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
  /* icona nera, 38px * 1.4 = "40% più grande" richiesto. La scritta deve
     avere la stessa ALTEZZA REALE dell'icona — ma l'icona è dimensionata
     per larghezza (height:auto la ricava dalla sua proporzione, 518:351px,
     quindi renderizza più bassa dei 53px nominali). Riusare lo stesso
     calc(38px*1.4) anche per l'altezza della scritta le avrebbe dato
     un'altezza diversa da quella vera dell'icona — corretto moltiplicando
     per il rapporto altezza/larghezza dell'icona (351/518). */
  .brand-icon{ width:calc(38px * 1.4); height:auto; display:block; }
  .brand-word{ height:calc(38px * 1.4 * 351 / 518); width:auto; display:block; }
  nav{ display:flex; align-items:center; gap:clamp(12px,1.9vw,28px); }
  nav a{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
         font-weight:600; color:var(--ink-2); text-decoration:none; white-space:nowrap;
         transition:color .18s; }
  nav a:hover,nav a:focus-visible{ color:var(--ink) }
  .lang{ display:flex; gap:2px; font-size:10.5px; font-weight:700;
         border:1px solid var(--line); border-radius:99px; padding:4px 5px; }
  .lang a{ padding:2px 7px; border-radius:99px; letter-spacing:.08em; }
  .lang a[aria-current]{ background:var(--ink); color:var(--paper); }
  @media (max-width:880px){ nav .hide-s{display:none} }

  /* menu mobile: <details> — niente JS necessario per aprire/chiudere */
  .burger{ display:none; position:relative; }
  /* Soglia allineata a `mqMobile` di nastro.js, non solo alla larghezza: un
     telefono in orizzontale è largo 844px — sopra i vecchi 680px, quindi ci
     stava ancora la nav desktop intera. Non ci stava DAVVERO (6 voci + selettore
     lingua), e l'intestazione traboccava. Su mobile quel trabocco non è solo
     estetico: Chrome reagisce allargando l'innerWidth "logico" della pagina
     oltre lo schermo reale, e ogni elemento `position:fixed; right:Npx` del
     resto del sito — i puntini di rotta compresi — finisce spostato fuori dallo
     schermo vero. Scoperto isolando il bug dei puntini del 2026-08-24: capitava
     anche su pagine senza pellicola né sezione contatto, quindi la causa era
     qui, nell'header condiviso da tutto il sito, non in quella scena. */
  @media (max-width:680px), (pointer:coarse) and (max-width:1100px){
    .nav-desktop{display:none} .burger{display:block}
  }
  .burger summary{
    list-style:none; cursor:pointer; width:36px; height:36px; border-radius:10px;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    border:1px solid var(--line);
  }
  .burger summary::-webkit-details-marker{ display:none }
  .burger summary span{ width:16px; height:1.5px; background:var(--ink); border-radius:2px;
                         transition:transform .2s, opacity .2s; }
  .burger[open] summary span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
  .burger[open] summary span:nth-child(2){ opacity:0 }
  .burger[open] summary span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }
  .burger-panel{
    position:absolute; top:calc(100% + 10px); right:0; z-index:31; min-width:220px;
    background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
    padding:8px; display:grid; gap:1px; box-shadow:0 22px 46px -18px rgba(18,22,38,.32);
  }
  .burger-panel a{ padding:11px 13px; border-radius:9px; font-size:11.5px; letter-spacing:.1em;
                    text-transform:uppercase; font-weight:600; color:var(--ink-2);
                    text-decoration:none; }
  .burger-panel a:hover{ background:var(--paper); color:var(--ink) }
  .burger-panel .lang{ margin:6px 5px 2px; align-self:start; width:max-content; }

  /* ================= HERO — palco 3D agganciato (sticky), non infinito =================
     Un solo elemento sticky (.hero-pin) resta agganciato mentre .hero (340vh) scorre
     sotto. .stage e .hero-copy sono suoi figli assoluti, impilati per z-index — non
     due sticky fratelli: quel trucco si libera dallo scroll in punti diversi (un
     margin-top negativo sposta la posizione statica usata per calcolare il rilascio)
     e lascia il titolo dell'hero "fantasma" sopra le sezioni reali. */
  /* z-index:0 (non "auto") è ciò che conta: rende .hero un proprio stacking
     context, così .hero-pin resta scoperto SOLO al suo interno e non compete
     mai direttamente con lo z-index di main — altrimenti, per lo scroll residuo
     in cui lo sticky si sta staccando (occupa comunque il pieno 100vh finché non
     è scorso via), il titolo dell'hero dipinge sopra le sezioni reali sottostanti. */
  .hero{ position:relative; z-index:0; height:340vh; }
  .hero-pin{ position:sticky; top:0; height:100vh; overflow:hidden; z-index:1; }
  .stage{
    position:absolute; inset:0; overflow:hidden; z-index:1;
    background:
      radial-gradient(90% 70% at 12% 8%, color-mix(in srgb,var(--purple) 8%, transparent) 0%, transparent 58%),
      linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 58%);
  }
  /* fondale generato con Higgsfield (gpt_image_2, 1 credito): la raggiera del logo
     sfocata come campo luminoso. Centro pallido, colore ai bordi. */
  .stage::before{
    content:""; position:absolute; inset:-8%; pointer-events:none;
    background:url(../img/brand/fondale.webp) center/cover no-repeat;
    filter:blur(26px) saturate(1.15);
    opacity:.55; mix-blend-mode:multiply;
  }
  .stage::after{
    content:""; position:absolute; inset:auto 0 0 0; height:30%; pointer-events:none;
    background:linear-gradient(180deg, transparent 0%,
      color-mix(in srgb,var(--paper) 42%, transparent) 55%,
      color-mix(in srgb,var(--paper) 92%, transparent) 100%);
  }
  .world{ position:absolute; inset:0; perspective:1700px; perspective-origin:50% 44%; }

  .frame{
    position:absolute; top:50%; left:50%; margin:0;
    will-change:transform,opacity; backface-visibility:hidden;
    border-radius:5px; overflow:hidden; background:var(--paper-2);
    box-shadow:0 24px 58px -18px rgba(18,22,38,.46), 0 1px 4px rgba(18,22,38,.14);
    outline:1px solid var(--line); outline-offset:-1px;
  }
  .frame img{ display:block; width:100%; height:100%; object-fit:cover; }
  /* video al posto della foto (aggiunto 2026-08-29): stesso riquadro 3:2, stesso
     object-fit — nascosto di default, nastro.js lo mostra/nasconde per fotogramma
     a seconda che quella slide sia una foto o un video (vedi paintScene). */
  .frame video{ display:none; width:100%; height:100%; object-fit:cover; }
  .frame figcaption{
    position:absolute; left:8px; right:8px; bottom:6px; margin:0;
    font-size:9px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
    color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.72); pointer-events:none;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Il marchio è una clip scrubbata dallo scroll, non una ricostruzione di sprite.
     z-index:0 contro l'1 di .world: la pellicola gli passa davanti.
     mix-blend-mode:multiply scarta il fondo chiaro del clip sulla carta chiara della
     pagina e lascia solo i segni colorati — nessun rettangolo video visibile. */
  .marchio-clip{
    position:absolute; z-index:0; pointer-events:none;
    left:1%; top:46%; translate:0 -50%;
    width:min(46vw, 660px); height:auto;
    mix-blend-mode:multiply;
    /* Il clip è stato renderizzato sul fondale chiaro, non su bianco puro: in
       multiply quel fondo lascia un rettangolo lavanda visibile. La maschera
       radiale ne dissolve i bordi, così resta il marchio e il residuo di fondo
       legge come un alone morbido — coerente col fondale già presente in pagina. */
    -webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 48%, #000 42%, transparent 76%);
            mask-image:radial-gradient(ellipse 58% 58% at 50% 48%, #000 42%, transparent 76%);
  }
  /* Su mobile il marchio si sposta in alto a destra, nella fascia di carta libera
     sopra la pellicola, e passa DAVANTI ai fotogrammi (z-index sopra .world, che
     resta ad auto). Nella posizione da schermo pieno, sul telefono, finiva sepolto
     sotto il nastro e non si vedeva affatto — mentre è l'unico pezzo d'animazione
     che si può guardare senza toccare niente. Y_LOCK in nastro.js abbassa apposta
     le slide per lasciargli questa fascia.
     `modo-mobile` è scritta su <html> da nastro.js: la soglia è definita una volta
     sola lì e da lì arriva anche qui, così CSS e motore non possono divergere.
     Attenzione al raggio d'azione: la classe esiste solo dove gira nastro.js, cioè
     sulle due home (IT ed EN). Le quattro pagine dedicate non ce l'hanno e usano i
     loro @media — va benissimo finché nessuna regola `.modo-mobile` deve valere
     anche lì; se un giorno servisse, la classe va messa anche in pagine.js. */
  /* right:0, non -3%: stessa causa e stesso rimedio delle mani in contatto.css —
     `right` è una proprietà di LAYOUT, e -3% del viewport basta a far sì che
     Chrome, su telefono in orizzontale, allarghi l'innerWidth "logico" della
     pagina oltre lo schermo reale, spostando fuori posto ogni elemento
     `position:fixed; right:Npx` — i puntini di rotta compresi. Lo sporgere resta
     lo stesso, ma via `translate` (paint-only, non conta per quel calcolo). */
  .modo-mobile .marchio-clip{
    left:auto; right:0; top:7%; translate:3vw 0;
    width:64vw; z-index:4;
  }

  .hero-copy{
    position:absolute; inset:0; z-index:5;
    pointer-events:none; display:grid; grid-template-rows:1fr auto;
  }
  .hero-copy a{ pointer-events:auto }
  .hero-foot{ padding:var(--gutter); display:grid; gap:clamp(20px,3vw,64px);
          grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; }
  @media (max-width:820px){ .hero-foot{grid-template-columns:1fr} }
  .kicker{ font-size:10px; letter-spacing:.2em; text-transform:uppercase;
           color:var(--ink-3); font-weight:700; margin:0 0 14px; }
  h1{ margin:0; font-weight:700; letter-spacing:-.035em; line-height:.97;
      font-size:clamp(30px,5.6vw,74px); text-wrap:balance; font-family:var(--display); }
  h1 em{ font-style:normal; position:relative; white-space:nowrap; }
  h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:.1em; height:.09em;
                background:linear-gradient(90deg,var(--amber),var(--teal)); border-radius:2px; }
  .lede{ margin:0; color:var(--ink-2); font-size:clamp(15px,1.35vw,18px);
         line-height:1.62; max-width:46ch; }
  .lede + .lede{ margin-top:11px }
  .tags{ margin:16px 0 0; display:flex; flex-wrap:wrap; gap:7px; padding:0; list-style:none; }
  .tags li{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
            padding:5px 10px; border-radius:99px; border:1px solid var(--line); color:var(--ink-2); }

  .cue{ position:absolute; left:50%; bottom:14px; translate:-50% 0; z-index:6;
        font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
        color:var(--ink-3); display:flex; align-items:center; gap:9px;
        transition:opacity .4s; pointer-events:none; }
  .cue::before,.cue::after{ content:""; width:26px; height:1px; background:var(--line) }
  .cue.gone{ opacity:0 }

  html.movimento-ridotto .frammento{opacity:.5!important} html.movimento-ridotto{scroll-behavior:auto}

  /* ================= CORPO DEL SITO — sezioni con contenuti reali ================= */
  main{ position:relative; z-index:2; background:var(--paper); }
  .section{ padding:clamp(64px,9vw,124px) var(--gutter); scroll-margin-top:70px; }
  .section-in{ max-width:1360px; margin:0 auto; }
  .section + .section{ border-top:1px solid var(--line); }
  .sec-head{ margin-bottom:clamp(30px,4.4vw,58px); max-width:74ch; }
  h2{ margin:8px 0 0; font-weight:700; letter-spacing:-.032em; line-height:1.04;
      font-size:clamp(25px,3.4vw,44px); text-wrap:balance; font-family:var(--display); }
  .sec-head .lede{ margin-top:15px; max-width:58ch; font-size:clamp(15.5px,1.4vw,18.5px); }

  /* card generica: stessa grammatica visiva della pellicola, ferma invece che 3D */
  .card{
    border-radius:14px; overflow:hidden; background:var(--paper-2);
    box-shadow:0 18px 40px -22px rgba(18,22,38,.24), 0 1px 4px rgba(18,22,38,.07);
    outline:1px solid var(--line); outline-offset:-1px;
  }

  /* reel: video/immagine di lavoro reale */
  .reel{ position:relative; aspect-ratio:4/3; }
  .reel.wide{ aspect-ratio:16/10 }
  .reel.tall{ aspect-ratio:3/4 }
  .reel video,.reel img{ position:absolute; inset:0; width:100%; height:100%;
                          object-fit:cover; display:block; background:#0002; }
  .reel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#0002; }

  /* Facciata al posto dell'iframe di YouTube (vedi video-facciata.js): finche'
     non si preme, verso Google non parte nessuna richiesta. Occupa esattamente
     lo spazio dell'iframe che la sostituira', cosi' al caricamento del video la
     pagina non si sposta di un pixel. */
  .video-facciata{
    position:absolute; inset:0; width:100%; height:100%;
    padding:0; border:0; background:#0b0d14; display:block; cursor:pointer;
    overflow:hidden; font:inherit; color:#fff;
  }
  .video-facciata img{ transition:transform .5s cubic-bezier(.4,0,.2,1), filter .3s; }
  .video-facciata:hover img{ transform:scale(1.03); filter:brightness(.82); }
  .video-play{
    position:absolute; left:50%; top:50%; translate:-50% -50%;
    width:74px; height:74px; border-radius:99px;
    background:rgba(12,14,22,.62); backdrop-filter:blur(3px);
    border:1.5px solid rgba(255,255,255,.75);
    display:grid; place-items:center; pointer-events:none;
    transition:background .22s, scale .22s;
  }
  .video-facciata:hover .video-play{ background:rgba(12,14,22,.8); scale:1.07; }
  .video-play svg{ width:30px; height:30px; margin-left:4px; }
  .video-nota{
    position:absolute; left:0; right:0; bottom:0; margin:0;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(8,10,16,.85), transparent);
    font-size:11px; letter-spacing:.01em; text-align:center;
    pointer-events:none; line-height:1.4;
  }
  .video-facciata:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){
    .video-facciata img, .video-play{ transition:none }
    .video-facciata:hover img{ transform:none }
  }

  .reel .cap{ position:absolute; left:14px; right:14px; bottom:12px; margin:0;
              color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); pointer-events:none; }
  .reel .cap b{ display:block; font-size:14px; letter-spacing:-.008em; font-weight:600; }
  .reel .cap span{ display:block; font-size:9.5px; letter-spacing:.11em;
                    text-transform:uppercase; opacity:.88; margin-top:2px; }

  .grid{ display:grid; gap:clamp(12px,1.6vw,22px); }
  .g-3{ grid-template-columns:repeat(3,1fr) }
  .g-4{ grid-template-columns:repeat(4,1fr) }
  .g-2{ grid-template-columns:repeat(2,1fr) }
  @media (max-width:920px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr) } }
  @media (max-width:600px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr } }

  /* statistica grande — dimensione calibrata sul sito live (misurato: 78.75px
     a 1440px di viewport), non un raddoppio a caso: il minimo mobile resta
     invariato (30px, mai stato il problema segnalato), sale solo quanto scala
     con vw e il tetto massimo. */
  .stat{ padding:6px 4px 22px; }
  .stat b{ display:block; font-size:clamp(30px,7.5vw,80px); font-weight:700;
           letter-spacing:-.03em; line-height:1; }
  .stat span{ display:block; margin-top:8px; font-size:14px; color:var(--ink-2);
              line-height:1.5; max-width:32ch; }
  /* Niente padding-top qui: la riga grigia sopra (bordo della section) porta già
     lo spazio di rispetto standard del sito. Un secondo padding-top identico
     sommato sopra creava un vuoto quasi doppio rispetto a quello fra il telefono
     e la riga sopra — segnalato dall'utente con screenshot. */
  .stat-row{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,72px);
             padding:0 0 clamp(20px,3vw,34px); margin:0 0 clamp(24px,3.4vw,40px); }

  /* pillar: tecnologia/tratto + descrizione */
  .pillar{ padding:20px 2px; }
  .pillar .dot{ width:9px; height:9px; border-radius:99px; display:block; margin-bottom:14px; }
  .pillar b{ display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; }
  .pillar p{ margin:8px 0 0; font-size:15.5px; color:var(--ink-2); line-height:1.56; }

  /* case study: card grande con reel + testo */
  .case{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(18px,2.6vw,40px);
         align-items:center; padding:clamp(20px,2.6vw,30px) 0; }
  .case:not(:last-child){ border-bottom:1px solid var(--line); }
  .case.rev{ direction:rtl } .case.rev > *{ direction:ltr }
  @media (max-width:860px){ .case,.case.rev{ grid-template-columns:1fr; direction:ltr } }
  .case h3{ margin:0; font-size:clamp(20px,2.1vw,27px); font-weight:700; letter-spacing:-.015em; }
  .case p{ margin:13px 0 0; font-size:15.5px; color:var(--ink-2); line-height:1.66; max-width:52ch; }
  .case .reel-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .case .reel-pair .reel{ aspect-ratio:3/4 }

  /* timeline eventi */
  .tl{ list-style:none; margin:0; padding:0; }
  .tl li{ display:grid; grid-template-columns:110px 1fr; gap:18px;
          padding:20px 0; border-top:1px solid var(--line); }
  .tl li:first-child{ border-top:1px solid var(--line); }
  @media (max-width:640px){ .tl li{ grid-template-columns:1fr } }
  .tl time{ font-size:11px; letter-spacing:.1em; text-transform:uppercase;
            color:var(--ink-3); font-weight:700; }
  .tl h4{ margin:0 0 7px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
  .tl p{ margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.6; max-width:64ch; }

  /* team: nome e cognome diretti, niente iniziali — card ferma come .card,
     icone social/email in fondo. b va su due righe (nome, poi cognome) per
     lo stesso ritmo tipografico del riferimento fornito dall'utente. */
  .member{ text-align:left; padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,26px); }
  .member b{ display:block; font-size:21px; font-weight:700; line-height:1.18; }
  .member span{ display:block; font-size:13.5px; color:var(--ink-3); margin-top:8px;
                letter-spacing:.02em; }
  .member-social{ display:flex; gap:8px; margin-top:18px; }
  .member-social a{
    width:30px; height:30px; border-radius:99px; background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center; flex:none;
    transition:opacity .18s;
  }
  .member-social a:hover{ opacity:.76 }
  .member-social svg{ width:15px; height:15px; display:block; }
  /* LinkedIn e X portano il proprio cerchio colorato dentro l'SVG (stessa
     tecnica di .foot-social piu' sotto) — lo sfondo scuro di ".member-social
     a" qui sopra e' pensato per un'icona a tratto SENZA sfondo proprio (vedi
     l'email), e con un logo che ha gia' il suo cerchio crea un anello nero
     visibile intorno (segnalato dall'utente su una card del Team Board,
     2026-09-11): il logo vero e' piccolo (15px) dentro un box piu' grande
     (30px). Tolto lo sfondo/box fisso per questi due, l'SVG cresce per
     restare leggibile senza bisogno della cornice. L'email non ha un
     proprio sfondo: resta com'era, le serve il cerchio scuro per leggersi
     come un bottone. */
  .member-social a.ms-brand{ background:none; width:auto; height:auto; }
  .member-social a.ms-brand svg{ width:26px; height:26px; }

  /* Pupazzo: il personaggio a figura intera in piedi sul bordo inferiore
     della scheda, che sborda un po' fuori. E' uno sprite sheet WebP con
     trasparenza mosso da pupazzo.js: qui sta solo la geometria, i numeri
     della griglia arrivano dai data-* del markup. --ar e' il rapporto del
     singolo frame, cosi' il CSS non ha misure cablate e vale per chiunque
     altro del team riceva lo stesso trattamento. */
  .membro-vivo{
    position:relative; overflow:visible; z-index:2;
    padding-right:132px;
  }
  /* due classi, non una: .member span (classe + elemento) e' piu' specifico
     di .pupazzo da solo e gli imporrebbe il margin-top delle qualifiche,
     spostando di 8px un elemento posizionato in assoluto. */
  .membro-vivo .pupazzo{
    position:absolute; right:6px; bottom:-18px; margin:0;
    height:var(--pupazzo-h,240px); aspect-ratio:var(--ar,1/2);
    background-repeat:no-repeat; background-size:100% 100%;
    pointer-events:none; user-select:none;
    /* l'ombra a terra lo "appoggia" invece di lasciarlo galleggiare */
    filter:drop-shadow(0 10px 9px rgba(18,22,38,.17));
  }
  @media (max-width:600px){
    /* a scheda singola c'e' piu' larghezza: il personaggio cresce, ma la
       scheda cresce con lui — se no sborda in alto e tocca quella sopra */
    .membro-vivo{ padding-right:150px; }
    /* a colonna singola lo spazio fra schede scende a 12px: se sborda di
       piu' finisce dentro la scheda sotto */
    .membro-vivo .pupazzo{ --pupazzo-h:248px; bottom:-6px; }
  }
  html.movimento-ridotto .membro-vivo .pupazzo{ filter:none; }
  /* "avatar": task in pausa (2026-09-11) — l'utente ha chiesto di non
     mostrare per ora il personaggio animato sulle card del team (le due
     righe min-height sopra, pensate apposta per fargli spazio, sono state
     tolte cosi' le card tornano alla misura naturale). Tutto il resto —
     queste regole, pupazzo.js, gli sprite sheet in assets/img/pagine/ — e'
     lasciato intatto: si riprende in una prossima richiesta, da qui. */

  /* contatti aziendali: sostituisce il vecchio box CTA con un blocco centrato
     e leggibile — nome legale, indirizzo, email generica — come da riferimento
     dell'utente (netaddiction.it/contatti). */
  .contatti-azienda{ text-align:center; max-width:56ch; margin:0 auto; }
  .ca-nome{ margin:0; font-weight:700; letter-spacing:-.02em;
            font-size:clamp(19px,2.2vw,26px); }
  .ca-riga{ margin:11px 0 0; font-size:16.5px; color:var(--ink-2); line-height:1.6; }
  .ca-riga a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
  .ca-riga a:hover{ border-color:var(--ink); }

  /* CTA contatti (rimasta in uso altrove) */
  .cta-box{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
            gap:24px; padding:clamp(28px,4vw,44px); }
  .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
        border-radius:99px; background:var(--ink); color:var(--paper); text-decoration:none;
        font-size:12.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
        transition:opacity .18s; }
  .btn:hover{ opacity:.82 }
  .contact-meta{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,40px); margin-top:clamp(24px,3vw,36px); }
  .contact-meta div b{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
                        color:var(--ink-3); margin-bottom:6px; font-weight:700; }
  .contact-meta div span,.contact-meta div a{ font-size:16px; color:var(--ink); text-decoration:none; }
  .contact-meta div a:hover{ text-decoration:underline }

  /* ================= FOOTER ================= */
  .site-footer{ padding:clamp(40px,5vw,64px) var(--gutter) clamp(24px,3vw,36px);
                border-top:1px solid var(--line);
                /* Chiusura a schermo pieno: il palco fisso si spegne e il footer
                   occupa l'intera ultima schermata, così non resta una banda vuota.
                   grid + align-content (non flex): con flex i figli si comprimono e
                   la griglia del footer perde le sue colonne. */
                min-height:100vh; display:grid; align-content:center;
                position:relative; z-index:3; background:var(--paper); }
  /* La quarta colonna ospita il modulo di contatto, che ci atterra alla fine
     della scena del globo (vedi contatto.css). E' la piu' larga: dentro ci sono
     tre campi e un bottone, non un elenco di link. */
  .foot-grid{ width:100%; max-width:1360px; margin:0 auto; display:grid; gap:clamp(24px,4vw,50px);
              grid-template-columns:1fr .7fr .7fr 1.25fr; align-items:start; }
  @media (max-width:1080px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }
  .foot-grid h5{ margin:0 0 14px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
                 color:var(--ink-3); font-weight:700; }
  .foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .foot-grid a{ text-decoration:none; font-size:14.5px; color:var(--ink-2); }
  .foot-grid a:hover{ color:var(--ink); text-decoration:underline }
  /* L'indirizzo era un <span>, non un <a>: la regola sopra non lo toccava e
     restava alla misura di default (piu' grande dei link vicini, segnalato
     dall'utente). Stessa misura e colore dei link, non l'anello di parentela. */
  .foot-grid li span{ font-size:14.5px; color:var(--ink-2); }

  /* riuso .member-social (icona rotonda) anche qui: stesso linguaggio visivo
     dei recapiti social della squadra, invece di un elenco di testo — LinkedIn,
     WhatsApp e telefono diventano bottoni con logo. .foot-social azzera il
     margin-top pensato per stare sotto nome+ruolo di una persona: qui sta
     subito sotto il titolo "Social & contatti", che ha già il suo spazio. */
  /* un po' piu' grandi delle icone standard di .member-social (30px) — qui
     sono i loghi social ufficiali (LinkedIn/WhatsApp gia' col loro colore
     vero, disegnato dentro l'SVG stesso: il background di .member-social a
     resta sotto ma sparisce, coperto dal cerchio colorato del logo). */
  .foot-social{ margin-top:0; margin-bottom:14px; }
  /* Ogni logo si porta dietro il proprio sfondo dentro l'SVG (tondo blu per
     LinkedIn, tondo scuro per il telefono, la BOLLA verde per WhatsApp — che
     non e' un cerchio e quindi lascerebbe spuntare il tondo scuro di
     .member-social a tutt'intorno). Qui lo sfondo del contenitore si spegne:
     il colore e' quello vero del marchio, non quello del tema. */
  .foot-social a{ width:38px; height:38px; background:none; }
  .foot-social svg{ width:38px; height:38px; }
  .foot-contatti-lista{ margin-top:0; }

  .foot-bottom{ width:100%; max-width:1360px; margin:clamp(30px,4vw,48px) auto 0; padding-top:18px;
                border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
                gap:10px 20px; justify-content:space-between; font-size:11px; color:var(--ink-3); }
  /* Dati societari obbligatori per legge (ragione sociale, sede, P.IVA/CF, REA,
     registro imprese, capitale sociale): riga propria a piena larghezza, cosi'
     non si mescola nella distribuzione space-between del resto della barra. */
  .foot-legale{ flex-basis:100%; display:flex; flex-direction:column; gap:4px; }
  .foot-policy{ display:flex; flex-wrap:wrap; gap:6px 16px; }
  .foot-policy a{ color:var(--ink-3); text-decoration:underline; text-decoration-color:var(--line); }
  .foot-policy a:hover{ color:var(--ink-2); }
  /* dicitura "contenuti generati con AI" (2026-09-17, AI Act art. 50):
     stesso trattamento dei link di policy qui sopra (e' concettualmente
     uno di loro, una quarta voce nella stessa riga), con in piu' l'icona
     ufficiale del pacchetto reso disponibile dalla Commissione Europea —
     file SVG originali, non ridisegnati: eu-badge-ai-nero.svg per le
     pagine chiare (tutto il sito tranne Holo), eu-badge-ai-bianco.svg
     scelto a mano nell'HTML della pagina Holo, che ha sfondo scuro. */
  .foot-ai-badge{ display:inline-flex; align-items:center; gap:7px; }
  /* 17px -> 24px (+41%) il 18/09/2026: l'etichetta ufficiale della Commissione
     contiene la scritta "AI GENERATED" dentro l'immagine, e a 17px non si
     leggeva. Una dicitura di trasparenza illeggibile non assolve l'obbligo. */
  .foot-ai-badge img{ height:24px; width:auto; flex:none; }
  /* interruttore delle animazioni (2026-09-16, vedi movimento.js): stesso
     peso visivo dei link di policy qui sopra, e' un altro link di utilita'
     nello stesso angolo di pagina, non un controllo che deve saltare
     all'occhio. aria-pressed="true" (attivato davvero) lo scurisce un po':
     serve solo a confermare lo stato a chi lo ha appena premuto, non a
     richiamare attenzione da solo. */
  .foot-movimento{
    appearance:none; background:none; border:none; padding:0; font:inherit;
    font-size:11px; color:var(--ink-3); text-decoration:underline; text-decoration-color:var(--line);
    cursor:pointer;
  }
  .foot-movimento:hover{ color:var(--ink-2); }
  .foot-movimento[aria-pressed="true"]{ color:var(--ink); font-weight:700; text-decoration-color:var(--ink-3); }

  /* ================= PAGINE LEGALI (privacy/cookie/termini) =================
     Solo testo, niente scene: prosa leggibile, non il linguaggio visivo delle
     pagine di vendita. Larghezza di lettura fissa (non .section-in intera),
     spaziatura generosa fra i blocchi. */
  .doc-legale{ max-width:74ch; }
  .doc-legale .agg{ margin:0 0 40px; font-size:12.5px; color:var(--ink-3); }
  .doc-legale h2{ margin:44px 0 14px; font-size:clamp(20px,2.2vw,26px); }
  .doc-legale h2:first-of-type{ margin-top:0; }
  .doc-legale h3{ margin:28px 0 10px; font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
  .doc-legale p{ margin:0 0 15px; font-size:15px; line-height:1.7; color:var(--ink-2); }
  .doc-legale ul,.doc-legale ol{ margin:0 0 15px; padding-left:22px; font-size:15px; line-height:1.7; color:var(--ink-2); }
  .doc-legale li{ margin-bottom:6px; }
  .doc-legale li p{ margin:0; }
  .doc-legale li li{ margin-top:6px; }
  .doc-legale strong{ color:var(--ink); }
  .doc-legale a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); }
  .doc-legale a:hover{ text-decoration-color:var(--ink); }

  /* ================= AVVISO COOKIE ================= */
  /* Fascia bassa, non un modale sopra la pagina: e' un avviso informativo
     (solo cookie tecnici, vedi cookie-notice.js), non un gate da attraversare
     per usare il sito. */
  /* La barra e' fissa, quindi non occupa spazio: senza questo padding il fondo
     della pagina resta sotto la barra e non lo si scopre nemmeno scorrendo
     fino in fondo. L'altezza vera la misura cookie-notice.js e la scrive in
     --avviso-h; quando si chiude l'avviso la classe sparisce e il padding con
     lei. */
  html.con-avviso body{ padding-bottom:calc(var(--avviso-h, 0px) + 28px); }

  .cookie-notice{
    position:fixed; left:16px; right:16px; z-index:60;
    /* env(): su iPhone la barra gesti di iOS Safari si mangia il fondo dello
       schermo, e senza questo l'avviso ci finisce sotto. */
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    max-width:640px; margin:0 auto;
    display:flex; flex-wrap:wrap; align-items:center; gap:14px;
    padding:14px 18px; border-radius:14px;
    background:var(--ink); color:var(--paper);
    box-shadow:0 18px 40px -14px rgba(18,22,38,.4);
    translate:0 24px; opacity:0; pointer-events:none;
    transition:translate .32s ease, opacity .32s ease;
  }
  .cookie-notice.is-visibile{ translate:0 0; opacity:1; pointer-events:auto; }
  .cookie-notice p{ margin:0; flex:1 1 260px; font-size:12.5px; line-height:1.5; text-wrap:pretty; color:color-mix(in srgb, var(--paper) 88%, transparent); }
  .cookie-notice a{ color:var(--paper); text-decoration:underline; }
  .cookie-notice .btn{
    flex:none; background:var(--paper); color:var(--ink); border:none;
    font:inherit; cursor:pointer; padding:9px 18px; font-size:12.5px;
  }
  html.movimento-ridotto .cookie-notice{ transition:opacity .01s; }
  @media (max-width:520px){
    /* flex-direction passa a column: lo stesso "260px" di flex-basis del
       paragrafo, pensato per l'ampiezza in riga, verrebbe letto come ALTEZZA
       minima in colonna e gonfiava il banner di uno spazio vuoto enorme
       (misurato: 260px di paragrafo per due righe di testo). */
    .cookie-notice{ flex-direction:column; align-items:stretch; text-align:left; }
    .cookie-notice p{ flex:auto; }
    .cookie-notice .btn{ width:100%; text-align:center; justify-content:center; }
  }

  /* ================================================================
     SCENE — motore nastro.js (architettura sections di scroll-world)
     Il palco resta fisso per tutta la pagina; la copy cambia per scena.
     ================================================================ */
  .stage-fixed{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
  .runway{ position:relative; z-index:2; }

  /* tracce da circuito stampato: SVG a pieno viewport sopra la pellicola */
  .traces{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

  .frame.swap img, .frame.swap video{ opacity:.15 }
  .frame img, .frame video{ transition:opacity .22s ease }
  /* Il fotogramma che emerge durante la sosta: bordo nel colore della scena, come una
     piazzola saldata, e un'ombra più profonda perché sta davanti al nastro.
     La transizione riguarda solo ombra e contorno — la posizione è guidata dallo
     scroll fotogramma per fotogramma e una transizione lì la farebbe strascicare. */
  .frame{ transition:box-shadow .3s ease, outline-color .3s ease }
  .frame.focus{ outline:2px solid var(--accent, var(--amber)); outline-offset:-2px;
                box-shadow:0 40px 90px -20px rgba(18,22,38,.55),
                           0 0 0 6px color-mix(in srgb, var(--accent, var(--amber)) 20%, transparent); }

  /* ---- layer della copy: tutte le scene impilate, visibile solo l'attiva ---- */
  .copy-layer{
    position:fixed; left:0; right:0; bottom:0; z-index:6;
    padding:0 var(--gutter) clamp(30px,5vh,64px);
    pointer-events:none;
  }
  .sc-copy{
    position:absolute; left:var(--gutter); bottom:clamp(30px,5vh,64px);
    width:min(48ch, 46vw); margin:0;
    --accent:var(--amber);
    will-change:opacity;
  }
  @media (max-width:820px){ .sc-copy{ width:min(94vw, 46ch) } }
  .sc-num{ display:block; font-size:9.5px; letter-spacing:.2em; font-weight:700;
           color:var(--ink-3); font-variant-numeric:tabular-nums; margin-bottom:10px; }
  .sc-eyebrow{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
               font-weight:700; color:var(--accent); margin-bottom:12px; }
  .sc-title{ margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.02;
             font-size:clamp(25px,3.3vw,46px); text-wrap:balance; }
  .sc-title em{ font-style:normal; position:relative; white-space:nowrap; }
  .sc-title em::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.08em;
                       background:var(--accent); border-radius:2px; }
  .sc-body{ margin:15px 0 0; color:var(--ink-2); font-size:clamp(15px,1.35vw,18px);
            line-height:1.62; }
  .sc-stats{ display:flex; gap:clamp(20px,3vw,44px); margin:18px 0 0; }
  .sc-stats b{ display:block; font-size:clamp(24px,2.9vw,38px); font-weight:700;
               letter-spacing:-.03em; line-height:1; }
  .sc-stats span{ display:block; margin-top:6px; font-size:12.5px; color:var(--ink-2);
                  line-height:1.45; max-width:24ch; }
  .sc-tags{ margin:16px 0 0; display:flex; flex-wrap:wrap; gap:7px; padding:0; list-style:none; }
  .sc-tags li{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
               padding:5px 10px; border-radius:99px; border:1px solid var(--line);
               color:var(--ink-2); }
  .sc-cta{ margin-top:20px }
  .sc-cta .btn{ pointer-events:auto }

  /* ---- rotta a puntini colorati: uno per scena + uno finale d'uscita ----
     Terzo giro sulla navigazione laterale nella stessa giornata (2026-08-28):
     puntini monocromi tolti → orologio automatico mobile con puntini → barra a
     trascinamento (funzionava, resta salvata in
     `pipeline/backup_barra_scrub_20260828/`) → solo scroll → di nuovo puntini,
     ma stavolta SU DESKTOP E MOBILE insieme (prima erano un affare solo
     mobile) e COLORATI: ogni puntino prende l'accento della propria scena
     (`--accent`, lo stesso già usato per titolo/traccia/fotogramma in fuoco —
     non un sistema di colori a parte). Lo scroll resta il modo primario di
     scorrere le scene: i puntini sono un acceleratore per saltare diretti,
     non l'unico comando come nei due tentativi precedenti. */
  .route{
    position:fixed; right:calc(var(--gutter) * .4); top:50%; translate:0 -50%;
    z-index:7; display:grid; gap:4px; justify-items:end;
  }
  .sc-dot{
    --accent:var(--ink-3);
    appearance:none; border:0; background:none; cursor:pointer;
    display:flex; align-items:center; gap:9px; color:var(--accent);
    padding:9px 4px; -webkit-tap-highlight-color:transparent;
  }
  .sc-dot i{
    width:15px; height:15px; border-radius:99px; flex:none;
    background:currentColor; opacity:.62;
    transition:opacity .2s, transform .2s;
  }
  .sc-dot span{
    font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
    opacity:0; translate:6px 0; transition:opacity .2s, translate .2s; white-space:nowrap;
    background:var(--paper); border:1px solid var(--line); padding:3px 7px; border-radius:99px;
  }
  .sc-dot:hover i, .sc-dot:focus-visible i{ opacity:.8; transform:scale(1.2) }
  .sc-dot:hover span, .sc-dot:focus-visible span{ opacity:1; translate:0 0 }
  .sc-dot.on i{ opacity:1; transform:scale(1.4) }
  .sc-dot.on span{ opacity:1; translate:0 0 }

  /* Il puntino finale: stesso componente, ciano — l'unico dei sei colori del
     logo non già assegnato a una scena, così si legge a colpo d'occhio come
     "diverso" — con uno stacco sopra per separarlo dai puntini-scena. Porta a
     "Restiamo in contatto", non a una scena: salta il resto della pellicola. */
  .sc-dot--esci{ --accent:var(--cyan); margin-top:10px; }

  /* Telefono in orizzontale: 11 puntini (10 scene + uscita) impilati non ci
     stanno alla taglia piena — stessa cura già misurata per i vecchi puntini. */
  @media (max-height:430px){
    .route{ gap:2px }
    .sc-dot{ padding-top:4px; padding-bottom:4px }
    .sc-dot--esci{ margin-top:6px }
  }

  /* Ombre più semplici su mobile: la stessa ombra da 58px di sfocatura su una
     quindicina di elementi trasformati in 3D è lavoro di composizione che il
     telefono ripaga a ogni frame, e a quella dimensione la differenza non si vede. */
  .modo-mobile .frame{ box-shadow:0 10px 22px -10px rgba(18,22,38,.42) }
  .modo-mobile .frame.focus{
    box-shadow:0 16px 34px -12px rgba(18,22,38,.5),
               0 0 0 5px color-mix(in srgb, var(--accent, var(--amber)) 20%, transparent);
  }

  /* nav dell'header quando guida le scene */
  #scene-nav{ display:flex; align-items:center; gap:clamp(12px,1.9vw,28px) }
  #scene-nav button, #scene-nav a{
    appearance:none; border:0; background:none; padding:0; cursor:pointer;
    font-family:inherit; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
    font-weight:600; color:var(--ink-2); white-space:nowrap; transition:color .18s;
    text-decoration:none;
  }
  #scene-nav button:hover, #scene-nav button.on,
  #scene-nav a:hover, #scene-nav a.on{ color:var(--ink) }
  /* La voce "Contatti" e' statica e sta per prima nel markup (perche' nastro.js
     numera le voci con l'indice DOM vivo), ma a schermo va in fondo: `order` lo
     risolve senza toccare l'ordine reale dei nodi. */
  #scene-nav .nav-coda{ order:99 }
  @media (max-width:680px){ #scene-nav{ display:none } }

  /* ---- il marchio ricomposto nel footer: riga tutta sua, nessuna sovrapposizione ----
     È un blocco a sé nel flusso del footer, sopra la griglia dei link: non può
     accavallarsi ai testi perché non condivide con loro né cella né posizionamento. */
  .foot-mark{
    width:100%; max-width:1360px; margin:0 auto clamp(30px,5vw,58px);
    display:flex; justify-content:flex-start; align-items:center; gap:14px;
  }
  .foot-mark .brand-icon{ width:clamp(46px,4.6vw,64px); height:auto; }
  .foot-mark .brand-word{ height:calc(clamp(46px,4.6vw,64px) * 351 / 518); width:auto; }
  @media (max-width:760px){ .foot-mark{ justify-content:center } }

  .foot-mark img{ display:block }

  /* ================================================================
     HERO A VENTAGLIO — home IT (2026-08-31)
     Sostituisce la pellicola scroll-scrubbed SOLO su questa pagina: 5
     progetti fissi, ispirati a y-vision.co.kr (ventaglio di card sempre
     etichettate + bottone di scroll verso "Restiamo in contatto"), fondo
     bianco e colori Eldorado invariati — presa solo la logica di layout.
     La EN mantiene ancora .stage/.frame/.route più sopra in questo file.
     ================================================================ */
  /* Il margine negativo fa risalire l'hero FIN SOTTO l'header, che e' alto
     80px: la pillola ci galleggia sopra invece di stare su una striscia di
     fondo diverso. Senza, il fondo dell'hero partiva 80px piu' in basso e si
     vedeva una banda netta di colore diverso dietro l'header. Il padding
     superiore riassorbe quegli 80px, cosi' il testo non ci finisce sotto. */
  .hero-fan{
    margin-top:-80px;
    padding:calc(80px + clamp(44px,7vw,92px)) var(--gutter) clamp(40px,6vw,72px);
    text-align:center;
    background:
      radial-gradient(90% 70% at 50% 0%, color-mix(in srgb,var(--purple) 7%, transparent) 0%, transparent 60%),
      var(--paper);
  }
  .hero-fan .kicker{ text-align:center }
  .hero-fan-in{ max-width:1500px; margin:0 auto; }
  /* Titolo calibrato sul riferimento: li' misura 69px su un viewport da
     1728px, cioe' ~4vw, con interlinea 1.3 e crenatura -0.025em. Prima era
     5.4vw ma con un tetto a 64px, quindi su schermi larghi restava PIU'
     PICCOLO del riferimento — l'utente ha segnalato proprio questo
     ("anche il font è più piccolo"). */
  .hero-fan-title{
    margin:0 auto; font-weight:700; letter-spacing:-.028em; line-height:1.02;
    font-size:clamp(37px,4.5vw,78px); text-wrap:balance; max-width:22ch;
  }
  /* Il titolo hero va a capo in punti diversi su desktop e mobile, ma il TESTO
     resta uno solo nel DOM: a cambiare sono i soli <br>. Prima c'erano due
     copie complete della frase (.t-desk e .t-mob, una nascosta via CSS) e chi
     legge il testo grezzo — estrattori SEO, anteprime social, lettori di
     schermo — trovava il titolo scritto due volte di fila. */
  .br-desk{ display:inline } .br-mob{ display:none }
  @media (max-width:1100px){ .br-desk{ display:none } .br-mob{ display:inline } }
  .hero-fan-title em{ font-style:normal; position:relative; white-space:nowrap; }
  .hero-fan-title em::after{
    content:""; position:absolute; left:0; right:0; bottom:.08em; height:.09em;
    background:linear-gradient(90deg,var(--amber),var(--teal)); border-radius:2px;
  }

  /* ---- ventaglio desktop: geometria PRESA DAL RIFERIMENTO, non stimata ----
     Misurata sul vivo da y-vision.co.kr a 1728px di viewport (2026-08-31),
     dopo che il primo tentativo "a occhio" era venuto ad arco — difetto
     segnalato dall'utente. I numeri veri del riferimento:
       card 300px, rapporto 4/3, contenitore alto 252px (= 0.84 * larghezza)
       rotazioni  -14  -8  -3  +3  +8  +14 gradi
       spostam. X -450 -270 -90 +90 +270 +450 px  (= ±1.5w ±0.9w ±0.3w)
       spostam. Y  -10  -2  +8  +8  -2  -10 px    (quasi piatto: 18px in tutto)
       z-index      0   1   2   3   4    5        (ognuna sopra quella a sinistra)
     Il punto che avevo sbagliato e' la Y: nel riferimento le card CENTRALI
     stanno piu' in BASSO di quelle esterne (avvallamento appena accennato),
     mentre io le avevo alzate al centro e abbassate ai lati — cioe' un arco.
     Tutto e' espresso in frazioni di --fan-w cosi' scala senza deformarsi.

     Meccanismo: griglia con tutte le card nella STESSA cella (grid-area 1/1
     + place-items:center), poi ognuna spostata dalla sua translate. E' come
     fa il riferimento, ed e' il motivo per cui restano allineate: non c'e'
     un flusso che le impila, c'e' un centro comune. */
  .fan{
    --fan-w:clamp(200px, 17.4vw, 330px);
    position:relative; display:grid; place-items:center;
    height:calc(var(--fan-w) * .84);
    /* Attenzione: questo margine NON e' il distacco che si vede. Le card
       ruotate sono piu' alte del contenitore e ne sporgono sopra (~0.065w),
       e i fumetti stanno ancora piu' su: il vuoto reale fra titolo e slide e'
       una trentina di px contro i ~70 di margine. Tarato misurando il
       risultato a schermo, non il valore qui. */
    margin:clamp(38px,4.42vw,65px) auto 0;
  }
  .fan-card{
    grid-area:1/1; position:relative; margin:0;
    width:var(--fan-w); aspect-ratio:4/3;
    transform:translate(var(--tx), var(--ty)) rotate(var(--rot));
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
  }
  /* Posizione per CLASSE, non per nth-child: dentro `.fan` non ci sono solo
     le card, ci sono anche i tre fumetti, e contando i figli le ultime due
     card restavano senza regola (quindi senza trasformazione, ammucchiate al
     centro). La classe la assegna hero-fan.js dall'indice della slide. */
  .fan-card--1{ --tx:calc(var(--fan-w) * -1.5); --ty:calc(var(--fan-w) * -.033); --rot:-14deg; z-index:0 }
  .fan-card--2{ --tx:calc(var(--fan-w) * -.9);  --ty:calc(var(--fan-w) * -.007); --rot:-8deg;  z-index:1 }
  .fan-card--3{ --tx:calc(var(--fan-w) * -.3);  --ty:calc(var(--fan-w) *  .027); --rot:-3deg;  z-index:2 }
  .fan-card--4{ --tx:calc(var(--fan-w) *  .3);  --ty:calc(var(--fan-w) *  .027); --rot:3deg;   z-index:3 }
  .fan-card--5{ --tx:calc(var(--fan-w) *  .9);  --ty:calc(var(--fan-w) * -.007); --rot:8deg;   z-index:4 }
  .fan-card--6{ --tx:calc(var(--fan-w) *  1.5); --ty:calc(var(--fan-w) * -.033); --rot:14deg;  z-index:5 }
  /* passandoci sopra col mouse la card si raddrizza e sale un po' */
  .fan-card:hover{
    transform:translate(var(--tx), calc(var(--ty) - 14px)) rotate(0deg) scale(1.06);
    z-index:9;
  }

  /* la superficie della card: e' QUESTA ad avere gli angoli tondi e a
     ritagliare, non .fan-card — l'etichetta a fumetto sporge fuori dai bordi
     e da dentro un contenitore con overflow:hidden verrebbe tagliata via.
     Raggio e ombra sono quelli misurati sul riferimento (18px, 0 18px 40px). */
  .fan-photo{
    position:relative; display:block; width:100%; height:100%;
    border-radius:18px; overflow:hidden; background:var(--paper-2);
    box-shadow:0 18px 40px -12px rgba(18,22,38,.35);
    outline:1px solid var(--line); outline-offset:-1px;
  }
  .fan-photo img,.fan-photo video{ display:block; width:100%; height:100%; object-fit:cover; }
  /* slide con un indirizzo impostato dal pannello: diventa un <a> vero,
     quindi cursore a manina, contorno visibile da tastiera e nessuna
     sottolineatura ereditata dallo stile dei link */
  .fan-photo.is-link,.fan-mob-card.is-link{ cursor:pointer; text-decoration:none; }
  .fan-photo.is-link:focus-visible,.fan-mob-card.is-link:focus-visible{
    outline:3px solid var(--cyan); outline-offset:3px;
  }

  /* ---- etichette a fumetto, con la codina ----
     Solo TRE e nelle posizioni esatte del riferimento: la prima in alto a
     sinistra, quella centrale in basso, l'ultima in alto a destra. Vivono nel
     contenitore .fan e NON dentro le card: le card sono ruotate, e da li'
     dentro l'etichetta erediterebbe la rotazione e verrebbe storta. */
  .fan-tag{
    position:absolute; z-index:20; display:inline-flex; align-items:center; gap:1px;
    /* il riferimento tiene il fumetto a 16px con card da 300px: qui la misura
       segue la card, cosi' su una finestra stretta non diventa largo quanto
       la foto che sta etichettando */
    font-size:clamp(12px, calc(var(--fan-w,300px) * .052), 16px);
    letter-spacing:.005em; font-weight:700; white-space:nowrap;
    padding:.55em 1em; border-radius:99px;
    background:var(--paper-2); border:1px solid var(--line);
    box-shadow:0 10px 24px -10px rgba(18,22,38,.4);
  }
  /* la codina: un quadratino ruotato di 45° con lo stesso fondo del fumetto,
     bordato solo sui due lati esterni — cosi' si salda al fumetto senza
     lasciare una riga di bordo che lo attraversa. */
  .fan-tag::after{
    content:""; position:absolute; width:11px; height:11px; rotate:45deg;
    background:var(--paper-2); border:1px solid var(--line);
  }
  /* Gli scostamenti orizzontali sono agganciati a --fan-w, cioe' alle CARD,
     non ai bordi del contenitore: cosi' i fumetti restano sopra la loro card
     a qualunque larghezza di finestra. I valori vengono dal riferimento —
     misurati a 1728px: fumetto sinistro con centro a x=350, centrale a 775,
     destro a 1375, contro un centro pagina di 864 e card da 300px:
       (350-864)/300 = -1.71w    (775-864)/300 = -0.30w    (1375-864)/300 = +1.70w
     Il fumetto centrale cade quindi esattamente sulla terza card (-0.3w), non
     al centro esatto della pagina. */
  /* In verticale i due fumetti in alto stanno A CAVALLO del bordo superiore
     della card, non dentro: nel riferimento sporgono ~12px sopra e la codina
     entra nella foto. Le card ruotate sono piu' alte del contenitore (0.97w
     contro 0.84w), quindi il loro bordo superiore cade circa 0.1w SOPRA il
     contenitore: da li' il -0.135w. */
  .fan-tag{ left:50% }

  /* Orizzontale (2026-09-03, riscritto): dipende dal POSTO nel ventaglio
     (0-5), non dalla slide che ci sta sopra o da dove sta l'etichetta —
     riordinando le foto il colore e l'ascissa restano quelli del posto.
     Verticale e orizzontale sono ora due assi indipendenti: il pannello
     lascia scegliere sopra/sotto per ogni etichetta (classe .fan-tag--top /
     .fan-tag--bottom sotto), cosa che prima non era possibile perche' ogni
     posto aveva un solo verticale cablato in CSS. */
  .fan-tag--h0{ translate:calc(-50% - var(--fan-w) * 1.7) 0; color:var(--amber) }
  .fan-tag--h1{ translate:calc(-50% - var(--fan-w) * .9) 0; color:var(--cyan) }
  .fan-tag--h2{ translate:calc(-50% - var(--fan-w) * .3) 0; color:var(--purple) }
  .fan-tag--h3{ translate:calc(-50% + var(--fan-w) * .3) 0; color:var(--navy) }
  .fan-tag--h4{ translate:calc(-50% + var(--fan-w) * .9) 0; color:var(--teal) }
  .fan-tag--h5{ translate:calc(-50% + var(--fan-w) * 1.7) 0; color:var(--pink) }

  .fan-tag--top{ top:calc(var(--fan-w) * -.135) }
  .fan-tag--top::after{ bottom:-6.5px; left:50%; margin-left:-5.5px; border-top:0; border-left:0; }
  .fan-tag--bottom{ bottom:calc(var(--fan-w) * -.145) }
  .fan-tag--bottom::after{ top:-6.5px; left:50%; margin-left:-5.5px; border-bottom:0; border-right:0; }
  /* Ai due posti estremi (h0/h5), quando l'etichetta sta sopra, la codina non
     e' al centro: e' il valore misurato sul riferimento — li' l'etichetta e'
     spostata molto oltre la propria card (1.7w contro la card a 1.5w) e una
     codina centrata punterebbe a vuoto invece che sul bordo della foto. Vale
     solo per --top perche' e' l'unica combinazione che esisteva gia' quando
     e' stata misurata; h0/h5--bottom sono nuove (nessuna foto ci stava prima)
     e usano la codina centrata di default, che e' la scelta ragionevole in
     assenza di un riferimento da copiare. */
  .fan-tag--h0.fan-tag--top::after{ left:26px; margin-left:0 }
  .fan-tag--h5.fan-tag--top::after{ left:auto; right:26px; margin-left:0 }

  /* ---- riga mobile: markup PROPRIO, non il ventaglio rimpicciolito ----
     Il riferimento fa esattamente cosi' (sotto il breakpoint xl il ventaglio
     e' display:none e sotto c'e' un blocco a scorrimento tutto suo) ed e' il
     motivo per cui li' sul telefono le card sono dritte e intere. Il primo
     tentativo riusava le stesse card ruotate del desktop: venivano storte e
     tagliate — segnalato dall'utente. Qui sono perfettamente allineate in
     orizzontale, dritte, senza rotazione e senza ritaglio. */
  .fan-mob{ display:none }
  .fan-mob-item{ position:relative; flex:none; width:min(78vw,300px); }
  /* margin:0 NON e' decorativo: .fan-mob-card e' un <figure>, e il foglio di
     stile predefinito del browser gli da' `margin:1em 40px`. Con quello
     attivo fra una slide e l'altra restavano 40+40+16 = 96px invece di 16 —
     e' il "sono troppo distanti" segnalato dall'utente. */
  .fan-mob-card{
    display:block; margin:0; width:100%; aspect-ratio:4/3;
    border-radius:16px; overflow:hidden; background:var(--paper-2);
    box-shadow:0 16px 34px -14px rgba(18,22,38,.34);
    outline:1px solid var(--line); outline-offset:-1px;
  }
  .fan-mob-card img,.fan-mob-card video{ display:block; width:100%; height:100%; object-fit:cover; }
  /* i fumetti anche sul telefono, centrati sulla loro slide e 12px sopra o
     sotto — come nel riferimento, che li tiene su entrambe le versioni */
  .fan-tag--mu,.fan-tag--md{ left:50%; translate:-50% 0; }
  .fan-tag--mu{ bottom:calc(100% + 12px) }
  .fan-tag--mu::after{ bottom:-6.5px; left:50%; margin-left:-5.5px; border-top:0; border-left:0; }
  .fan-tag--md{ top:calc(100% + 12px) }
  .fan-tag--md::after{ top:-6.5px; left:50%; margin-left:-5.5px; border-bottom:0; border-right:0; }
  /* Il colore segue il POSTO nella riga, non la slide: e' la stessa regola del
     ventaglio desktop (posto 1 ambra, 2 ciano, 3 viola...), cosi' riordinando
     dal pannello la sequenza dei colori resta quella pensata. */
  .fan-mob-item:nth-child(1) .fan-tag{ color:var(--amber) }
  .fan-mob-item:nth-child(2) .fan-tag{ color:var(--cyan) }
  .fan-mob-item:nth-child(3) .fan-tag{ color:var(--purple) }
  .fan-mob-item:nth-child(4) .fan-tag{ color:var(--navy) }
  .fan-mob-item:nth-child(5) .fan-tag{ color:var(--teal) }
  .fan-mob-item:nth-child(6) .fan-tag{ color:var(--pink) }

  /* Corpo +50% e staccato di piu' dal ventaglio (2026-09-03, richiesta
     dell'utente): i tre valori del font sono i precedenti moltiplicati per
     1,5 (14/1.25/17 -> 21/1.88/25.5), il margine superiore passa da
     30/3.6/55 a 48/5.6/86. Il limite di riga resta in "ch", quindi conta i
     caratteri e non i pixel: la riga resta lunga uguale in lettura, solo
     scritta piu' grande. */
  .hero-fan-lede{ margin:clamp(48px,5.6vw,86px) auto 0; max-width:60ch; text-align:center;
                  font-size:clamp(21px,1.88vw,25.5px); }

  /* bottone di scroll verso "Restiamo in contatto": cerchio + freccia che
     rimbalza, come il riferimento. */
  .scroll-cue{
    appearance:none; border:0; background:none; cursor:pointer;
    margin:clamp(34px,4.6vw,52px) auto 0; display:grid; justify-items:center; gap:10px;
    font-family:inherit; color:var(--ink-2); transition:color .18s;
  }
  .scroll-cue:hover{ color:var(--ink) }
  .scroll-cue-ring{
    width:52px; height:52px; border-radius:99px; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .scroll-cue-ring svg{ width:18px; height:18px; animation:scroll-cue-bob 1.6s ease-in-out infinite; }
  .scroll-cue-label{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; }
  @keyframes scroll-cue-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }
  html.movimento-ridotto .scroll-cue-ring svg{ animation:none }

  /* Sotto i 1100px il ventaglio esce di scena e subentra la riga: e' la
     stessa soglia scelta dal riferimento (li' e' `xl:`), e ha una ragione
     concreta — il ventaglio e' largo 4 volte una card, sotto quella misura
     non ci starebbe piu' senza schiacciare tutto. */
  @media (max-width:1100px){
    .fan{ display:none }
    /* gap 16px: e' la misura del riferimento (`gap-4`), verificata sul suo DOM */
    .fan-mob{
      display:flex; flex-wrap:nowrap; gap:16px;
      overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
      /* come sul desktop, il vuoto visibile non e' questo margine: sopra e
         sotto la riga ci sono i 48/52px di padding che ospitano i fumetti */
      margin:clamp(20px,3.2vw,34px) calc(var(--gutter) * -1) 0;
      /* il padding verticale fa spazio ai fumetti sopra e sotto: `overflow-x:auto`
         rende automatico anche l'asse Y, quindi senza questo verrebbero tagliati */
      padding:48px var(--gutter) 52px;
    }
    .fan-mob::-webkit-scrollbar{ display:none }
    /* Titolo e descrizione tarati sul riferimento (misurato a 390px: 3 righe,
       descrizione ~19px), poi ingranditi e stretti d'interlinea su richiesta. */
    .hero-fan-title{ font-size:clamp(32px,10.9vw,48px); line-height:1.18; }
    .hero-fan-lede{ font-size:clamp(24px,7.35vw,28.5px); margin-top:clamp(26px,4.4vw,40px); }
    .fan-tag{ font-size:16px; padding:7px 15px; }
  }

  /* ================================================================
     SEZIONE WEB3 — secondo scroll della home IT (2026-09-01)
     Ispirata alla sezione "WHY" di y-vision.co.kr: titolo enorme con un
     riflesso che ondeggia come acqua sotto di lui (filtro SVG vero, non
     un'animazione finta — vedi il commento sul <filter> in index.html).
     Numeri e proporzioni (dimensione del titolo, altezza/sfumatura del
     riflesso, misura del bottone) presi dal riferimento con lo stesso
     metodo delle sezioni precedenti: misurati sul suo DOM dal vivo, non
     stimati. Qui restano il fondo bianco e l'inchiostro di Eldorado al
     posto del nero del riferimento — stessa scelta gia' fatta per il
     ventaglio e per il menu. ================================================================ */
  .web3{
    --web3-size:clamp(4.5rem, 2.9rem + 7.6vw, 15rem);
    background:var(--paper); text-align:center; overflow:hidden;
    padding:clamp(64px,9vw,140px) var(--gutter);
  }
  .web3-in{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
  /* .web3-title e .web3-reflect stanno impilati normalmente (il riflesso
     segue il titolo nel flusso, con un margine negativo che li avvicina) —
     .web3-stage esiste solo per dare a .web3-water-surface un riferimento
     su cui posizionarsi SENZA calcoli in px: vedi sotto. */
  .web3-stage{ position:relative; }
  .web3-title{
    position:relative; z-index:1; margin:0; padding-top:.08em;
    font-weight:900; letter-spacing:-.04em; line-height:.82;
    font-size:var(--web3-size); color:var(--ink);
    /* NIENTE overflow:hidden qui (a differenza del riferimento, che lo usa
       per nascondere un'animazione di ingresso che qui non replico): con
       letter-spacing negativo il browser calcola la larghezza dal passo di
       avanzamento dei caratteri, non dall'ingombro visivo del glyph — per
       lettere come "3" in un peso black il tratto destro sporge oltre
       quella misura, e overflow:hidden lo tagliava. Segnalato dall'utente. */
  }
  /* Il riflesso: un secondo "WEB3" capovolto (scaleY(-1)) sotto al vero,
     al 50% di opacita', con una sfumatura che lo dissolve verso il basso
     (mask-image) e il filtro dell'acqua che lo deforma nel tempo. Qui
     l'overflow:hidden serve davvero (contiene l'altezza del riflesso), quindi
     non si toglie — invece si allarga la scatola di un pelo con
     padding-right, cosi' il bordo destro della "3" ha lo spazio per non
     essere tagliato via, stesso motivo di sopra. */
  /* Il taglio sulla "3" segnalato dall'utente non era il vecchio problema di
     letter-spacing (quello e' risolto): il filtro dell'acqua sposta i pixel
     DAVVERO, frame per frame — feDisplacementMap con scale="22" vuol dire
     fino a ±11px di spostamento reale in ogni direzione (scale/2, per
     definizione del filtro SVG) — e il buffer di prima (.04em, ~6-8px)
     copriva solo lo sbordo statico delle lettere, non questo movimento
     dinamico molto piu' ampio. A certi fotogrammi il bordo destro della
     "3" veniva spinto oltre il buffer e l'overflow:hidden lo tagliava via:
     confermato confrontando piu' screenshot nel tempo, non capitava sempre.
     20px fissi (non em: lo spostamento del filtro e' in pixel assoluti, non
     scala col testo) coprono il caso peggiore con margine. Simmetrico sui
     due lati, non solo a destra, per restare centrato. */
  .web3-reflect{
    position:relative; z-index:1;
    width:fit-content; overflow:hidden; padding:0 20px;
    /* Misurato sul riferimento: li' il distacco e' -0.03 (il riflesso sale
       leggermente SOTTO la base delle lettere) — qui il valore combaciava
       gia', ma l'utente lo vede ancora troppo attaccato: probabilmente
       perche' prima il bordo era sporco per il taglio della "3" appena
       corretto sopra, e un bordo pulito ma vicino leggeva come "incollato".
       Portato a un distacco vero e positivo, scostandosi di proposito dal
       riferimento su richiesta esplicita. */
    height:calc(var(--web3-size) * .85);
    margin-top:calc(var(--web3-size) * .04);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 20%, transparent 92%);
            mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 20%, transparent 92%);
  }
  .web3-reflect-txt{
    display:block; font-weight:900; letter-spacing:-.04em; line-height:.82;
    font-family:var(--display); font-size:var(--web3-size); color:var(--ink); opacity:.5;
    transform:scaleY(-1);
    filter:url(#web3-water);
  }
  /* La curva separata sul confine (.web3-wave) e' stata tolta su richiesta
     esplicita dell'utente ("non va bene, toglila e basta") — il riflesso
     resta con solo il filtro dell'acqua sul testo, come prima. */
  /* La "base" segnalata dall'utente: sul riferimento c'e' un div a piena
     larghezza (non solo sotto al testo) con un gradiente grigio molto
     tenue, dietro al riflesso — misurato sul suo DOM: e' un elemento vero,
     non un effetto ottico. Senza restava tutto bianco piatto. Si posiziona
     senza un solo calcolo in px: sfrutta il fatto che sul riferimento (e
     anche qui) titolo e riflesso hanno quasi la STESSA altezza — line-height
     .82 contro .85 di altezza riflesso — quindi il confine fra i due cade
     sempre molto vicino al 50% dell'altezza di .web3-stage, a qualunque
     dimensione del testo. `top:50%` la aggancia li' senza JS. */
  .web3-water-surface{
    position:absolute; z-index:0; pointer-events:none;
    top:50%; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    background:linear-gradient(
      color-mix(in srgb, var(--ink) 7%, transparent),
      color-mix(in srgb, var(--ink) 3%, transparent) 45%,
      transparent 88%);
  }
  .web3-lede{
    margin:clamp(30px,3.4vw,54px) auto 0; max-width:64ch;
    font-size:clamp(17px,1.7vw,27px); font-weight:600; line-height:1.55; color:var(--ink);
  }
  /* sottolineature colorate sulle 3 tecnologie citate, stessa grammatica
     visiva del "Web2" nel titolo dell'hero (barra sotto la parola, non
     sfondo pieno) — qui pero' un colore diverso per ciascuna invece del
     gradiente unico, cosi' si leggono come 3 elementi distinti. */
  .web3-lede em{ font-style:normal; position:relative; white-space:nowrap; }
  .web3-lede em::after{
    content:""; position:absolute; left:0; right:0; bottom:.04em; height:.07em;
    border-radius:2px; background:var(--hl, var(--amber));
  }
  .web3-lede em.hl-amber{ --hl:var(--amber) }
  .web3-lede em.hl-teal{ --hl:var(--teal) }
  .web3-lede em.hl-purple{ --hl:var(--purple) }
  /* Parola a rotazione "flip" (2026-09-17), motore in flip-parole.js: perno
     al centro (transform-origin:50% 50%), la parola in uscita ruota su se
     stessa fino a scomparire di taglio (rotateX(-90deg), stesso istante in
     cui il testo cambia e l'opacita' arriva a 0 — a 90 esatti un piano
     visto di taglio non ha area, sparisce da solo, non serve
     backface-visibility per nascondere un "retro" che non si vede mai).
     Il salto a +90deg per la parola nuova (nessuna transizione, subito
     corretta col reflow forzato in JS) e' quello che la fa entrare dal
     lato OPPOSTO invece di limitarsi a tornare indietro sulla stessa
     rotazione — e' li' che si vede il "flip", non un rimbalzo. */
  .web3-tech{
    margin:14px auto 0; max-width:64ch; text-align:center; perspective:500px;
    font-size:clamp(20px,2.6vw,34px); font-weight:700; letter-spacing:-.01em;
    font-family:var(--display);
  }
  .web3-tech-parola{
    display:inline-block; color:var(--hl, var(--amber));
    transform:rotateX(0deg); opacity:1; transform-origin:50% 50%;
    transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .42s cubic-bezier(.4,0,.2,1);
  }
  .web3-tech-parola.hl-amber{ --hl:var(--amber) }
  .web3-tech-parola.hl-teal{ --hl:var(--teal) }
  .web3-tech-parola.hl-purple{ --hl:var(--purple) }
  .web3-cta{
    margin-top:clamp(30px,3.4vw,54px);
    display:inline-flex; align-items:center; gap:.6em;
    border:1px solid var(--ink); border-radius:99px; background:var(--paper);
    padding:.85em 1.6em; font-size:clamp(15px,1.35vw,20px); font-weight:600; color:var(--ink);
    text-decoration:none; transition:background .3s, color .3s;
  }
  .web3-cta:hover,.web3-cta:focus-visible{ background:var(--ink); color:var(--paper); }
  .web3-cta-arrow{ display:inline-block; transition:transform .3s; }
  .web3-cta:hover .web3-cta-arrow,.web3-cta:focus-visible .web3-cta-arrow{ transform:translateX(4px); }
  html.movimento-ridotto .web3-reflect-txt{ filter:none } /* l'animazione SMIL del filtro non si puo' fermare via CSS: si toglie il filtro stesso */
  html.movimento-ridotto .web3-cta,html.movimento-ridotto .web3-cta-arrow{ transition:none }

  /* ================================================================
     SEZIONE CLIENTI — terzo scroll della home IT (2026-09-02)
     Prima tentata come sfera di puntini + loghi in orbita (ispirata a
     "Company Information" di y-vision.co.kr) — tolta su richiesta esplicita
     dell'utente ("non mi convince la sfera"). Ora: una griglia ordinata di
     loghi nudi, senza riquadro, che appaiono con una dissolvenza quando la
     sezione entra nello scroll (vedi clients-logos.js) — non un'animazione
     continua, un ingresso che succede una volta sola. Sfondo bianco e
     colori Eldorado, stessa scelta di tutte le sezioni precedenti. ================================================================ */
  .clients{ background:var(--paper); padding:clamp(64px,9vw,140px) var(--gutter); }
  .clients-in{
    max-width:1360px; margin:0 auto;
    display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4vw,80px);
    align-items:center;
  }
  @media (max-width:980px){ .clients-in{ grid-template-columns:1fr; } }

  /* la griglia dei loghi: --cols e' letta da clients-logos.js per calcolare
     da che lato ogni logo deve entrare — cambiarla qui basta, il JS segue
     da solo senza bisogno di toccarlo. */
  /* Flex invece di grid (2026-09-18): i loghi sono passati da 12 a 7, cioe' a
     un numero DISPARI, e con grid l'ultima riga restava incollata a sinistra
     con un buco a destra. Con flex-wrap + justify-content:center l'ultima
     riga si centra da sola (7 loghi = 3 + 3 + 1, con l'ultimo al centro),
     qualunque sia il numero: se domani ne aggiungi o togli uno dal pannello,
     resta ordinato senza dover ritoccare il CSS.
     Tre colonne e non quattro: con 7 loghi larghi il limite non e' l'altezza
     ma la LARGHEZZA della cella, quindi togliere una colonna e' l'unico modo
     per farli davvero piu' grandi. Misurato a 1500px: il blocco passa da 280px
     a 496px di altezza e riempie la colonna di sinistra invece di lasciarla
     mezza vuota accanto al testo.
     --cols resta la fonte unica del numero di colonne: la usa il calcolo
     della larghezza qui sotto E la legge clients-logos.js per decidere da che
     lato ogni logo entra in scena. --gap-x e' una variabile perche' serve in
     due posti, nel gap e nel calcolo. */
  .clients-logos{
    --cols:3;
    --gap-x:clamp(20px,3vw,40px);
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:clamp(30px,4.4vw,56px) var(--gap-x);
    align-items:center;
  }
  /* Ogni logo e' un contenitore INVISIBILE (nessun fondo, nessun bordo —
     e' proprio il "riquadro" che l'utente non voleva) che serve solo a dare
     alla griglia una riga di altezza uniforme, qualunque sia la forma del
     logo dentro — un wordmark molto largo altrimenti avrebbe un peso
     visivo diverso da un badge compatto. `--dx` e il ritardo li scrive
     clients-logos.js per ognuno, in base alla colonna: entra dalla propria
     fetta di griglia, non da un lato a caso.
     `min-width:0` e' il punto chiave del bug segnalato dall'utente ("i
     loghi spostati verso destra"): senza, una colonna di grid con `1fr` non
     puo' MAI restringersi sotto il min-content del suo contenuto — e per un
     wordmark molto largo (Fandango Club, ora tolto) il min-content era
     grande abbastanza da allargare la SUA colonna oltre 1/4 dello spazio,
     spingendo tutte le colonne a destra fuori sesto. Con min-width:0 ogni
     colonna resta esattamente 1/4, qualunque logo ci finisca dentro. */
  .clients-logo{
    min-width:0;
    /* la cella vale esattamente 1/--cols dello spazio, gap scontati */
    flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    /* Alzata da clamp(38px,5.4vw,72px) il 18/09/2026: con 7 loghi invece di
       12 la colonna restava mezza vuota e i marchi sembravano francobolli. */
    height:clamp(58px,8vw,112px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateX(var(--dx,-20px));
    transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
  }
  /* max-width:100% (invece che un valore piu' stretto) lasciava i loghi
     molto larghi — NH Hotel Group, Samsung — riempire la cella da un bordo
     all'altro senza il minimo margine, mentre quelli piu' compatti restavano
     con parecchio spazio intorno: risultato, la griglia sembrava
     disallineata (segnalato dall'utente su mobile, ma il difetto è lo
     stesso a ogni larghezza). 86% garantisce un margine visibile a TUTTI,
     non solo a quelli gia' stretti di loro. */
  /* 86% lasciava troppo scarto fra un logo largo (NH Hotel Group, vicino
     al tetto) e uno stretto (l'icona triangolare Giometti) — misurato: il
     bordo sinistro dei loghi nella colonna varia anche di 39px da riga a
     riga, e quello e' cio' che l'occhio legge come "non centrato", non
     la cella (che e' gia' simmetrica). Stringere il tetto non elimina la
     variazione — loghi diversi restano forme diverse — ma la riduce. */
  /* Con meno loghi in griglia serve che ognuno occupi davvero la sua cella,
     quindi la larghezza e' salita da 72% a 100%. L'altezza invece e' SCESA da
     100% a 76%, che sembra un controsenso ma e' il punto: chi limita un logo
     e' il suo lato lungo, quindi un marchio quadrato (Titano, Giometti)
     riempiva tutti i 112px di cella e rendeva un'area quattro volte quella di
     un wordmark larghissimo come V Media (misurato: 12.500 px² contro 3.000).
     Era quella disparita', non la disposizione, a far sembrare la griglia
     disordinata. Abbassando il tetto verticale i quadrati rientrano e
     l'insieme si legge con pesi simili. */
  .clients-logo img{
    max-width:100%; max-height:76%; width:auto; height:auto;
    object-fit:contain; display:block;
  }
  /* Inversione per i loghi consegnati in bianco (Yobee), che su fondo chiaro
     sarebbero invisibili. La regola gemella per le altre griglie sta in
     pagine.css, ma la home NON carica pagine.css: deve stare qui, ed e'
     esattamente l'errore fatto al primo tentativo. */
  .clients-logo img.invert-logo{ filter:invert(1) grayscale(1); }
  .clients-logo.in-view{ opacity:1; transform:translateX(0); }
  /* Sotto i 980px .clients-in diventa a colonna unica e i loghi passano
     SOPRA il testo, a tutta pagina: li' lo spazio in orizzontale abbonda e
     una colonna in piu' evita un blocco altissimo da scorrere. */
  @media (max-width:980px){ .clients-logos{ --cols:4; } }
  @media (max-width:760px){ .clients-logos{ --cols:3; } }
  /* Il tentativo precedente allineava le due colonne ai bordi esterni
     (sinistra a sinistra, destra a destra) per dare una riga dritta vera —
     ma il risultato era due colonne incollate ai margini con un vuoto enorme
     in mezzo, non una griglia: sbagliato, tolto su indicazione esplicita
     dell'utente. Ogni logo torna centrato nella propria cella — la lettura
     standard e corretta di una griglia di loghi, quella che ci si aspetta. */
  @media (max-width:480px){
    .clients-logos{ --cols:2; }
  }
  html.movimento-ridotto .clients-logo{ transition:none; opacity:1; transform:none; }

  /* Spostato un po' verso destra su richiesta dell'utente: partiva esattamente
     al bordo della colonna, subito dopo il gap dai loghi, e le sembrava
     troppo a sinistra. Non centrato (la griglia di numeri legge meglio
     allineata a sinistra con se stessa, come il resto del sito fa per i
     blocchi titolo+testo) — solo un rientro, coerente con l'impaginazione
     generale invece che uno spostamento drastico ("ma non così"). */
  .clients-info{ padding-left:clamp(0px,4vw,56px); }
  /* Sotto i 980px i loghi passano da colonna affiancata a blocco impilato
     SOPRA il testo (vedi .clients-in), e qui il rientro l'avevo azzerato
     — sbagliato, l'utente lo vuole anche li': il blocco di testo restava
     "sempre nello stesso punto di prima" perche' l'avevo tolto invece di
     ricalcolarlo. Il logo medio, dentro la sua cella, comincia visivamente
     a circa 45-55px dal bordo (misurato: varia da riquadro a riquadro per
     via della forma di ciascun logo, ma si addensa li') — un rientro fisso
     in quella zona allinea il testo con l'insieme dei loghi sopra, non con
     un riquadro invisibile. */
  @media (max-width:980px){ .clients-info{ padding-left:clamp(20px,12vw,52px); } }
  /* "I nostri partner"/"Our partners": il doppio delle altre etichette
     kicker del sito (10px -> 20px), su richiesta esplicita — solo qui, le
     altre restano alla misura base perche' .kicker e' condiviso da tutte
     le pagine. */
  .clients-info .kicker{ font-size:20px; margin-bottom:12px; }
  .clients-title{
    margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.05;
    font-size:clamp(30px,3.6vw,52px); color:var(--ink);
  }
  .clients-stats{
    margin-top:clamp(32px,4vw,56px);
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
  }
  .clients-stat{
    padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,28px) clamp(20px,2.6vw,30px) 0;
    border-bottom:1px solid var(--line);
  }
  /* linea verticale fra le due colonne, solo dove ce n'e' davvero bisogno
     (non sull'ultimo elemento di ogni riga, che tocca il bordo destro) */
  .clients-stat:nth-child(odd){ border-right:1px solid var(--line); padding-right:clamp(16px,2vw,28px); }
  .clients-stat:nth-child(even){ padding-left:clamp(16px,2vw,28px); }
  .clients-stat b{
    display:block; font-size:clamp(30px,3.6vw,52px); font-weight:700;
    letter-spacing:-.02em; line-height:1; color:var(--ink);
  }
  .clients-stat span{
    display:block; margin-top:10px; font-size:13px; color:var(--ink-2); line-height:1.5;
  }
  /* +40% su richiesta esplicita dell'utente: 34px * 1.4 = 47.6, arrotondato */
  /* 48px -> 63px (+31%) il 18/09/2026, su richiesta: il badge NVIDIA
     Inception era troppo piccolo accanto al numero enorme del 2022. */
  .clients-stat--logo img{ height:63px; width:auto; max-width:100%; object-fit:contain; display:block; }
  /* ".clients-stat--testo" (2026-09-17): rimpiazza un logo non ancora
     autorizzato (ASI, in attesa di risposta) o mai avuto (ANICA, richiesto
     di togliere il logo e tenere solo il testo) con un riquadro bordato che
     dia comunque peso visivo al blocco, invece di un paragrafo nudo perso
     accanto a un numero enorme o a un altro logo — "un riquadro cerchiato",
     richiesta letterale dell'utente. I nomi dei marchi restano in grassetto
     dentro la frase, non spostati in un elemento separato: e' testo vero,
     non un logo travestito da testo. */
  .cs-riquadro{
    margin:0; padding:16px 18px; border-radius:14px;
    border:1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
    font-size:13.5px; line-height:1.55; color:var(--ink-2);
  }
  /* "display:inline" e "font-size" espliciti, non solo "color"/"font-weight":
     ".clients-stat b" qui sopra (pensata per il numero enorme "2022") si
     applica a QUALUNQUE <b> dentro ".clients-stat", questo incluso — senza
     riscriverle apposta, "display:block" e il font-size a clamp(30-52px)
     restavano attivi e ogni marchio in grassetto diventava una riga enorme
     a se stante (bug trovato via screenshot, stessa famiglia vista piu'
     volte oggi sulla pagina Formazione). */
  .cs-riquadro b{ display:inline; font-size:inherit; color:var(--ink); font-weight:700; }
  @media (max-width:560px){
    .clients-stats{ grid-template-columns:1fr; }
    .clients-stat:nth-child(odd){ border-right:0; padding-right:0; }
    .clients-stat:nth-child(even){ padding-left:0; }
  }