/* Archivo di Omnibus-Type, SIL Open Font License 1.1. Carattere ufficiale del marchio MobileWatt. */
  @font-face{
    font-family:"Archivo";
    font-style:normal;
    font-display:swap;
    font-weight:100 900;
    font-stretch:62% 125%;
    src:url(/assets/archivo.woff2) format("woff2-variations");
  }
  :root{
    color-scheme:light;
    --ground:#FFFFFF;
    --surface:#F3F6FA;
    --surface-2:#E9EEF5;
    --ink:#14181B;
    --ink-soft:#4A545C;
    --muted:#8B959B;
    --accent:#1750C8;
    --accent-soft:#5E96FF;
    --rule:#DFE5EC;
    --deep:#14181B;
    --deep-2:#1B2126;
    --deep-ink:#FFFFFF;
    --deep-muted:#9AA5AC;
    --deep-accent:#5E96FF;
    --deep-rule:#2A3238;
    --logo-ink:#14181B;
    --logo-accent:#1750C8;
    --shadow:0 1px 2px rgba(20,24,27,.05), 0 12px 32px -20px rgba(20,24,27,.28);
    --maxw:1180px;
    --step:clamp(1rem,.9rem + .5vw,1.125rem);
  }
  /* ⚠️ Il sito NON segue il tema di sistema, dal 12/09 per scelta di Tommaso: parte
     chiaro per tutti, e lo scuro si sceglie col bottone in alto (la scelta resta in
     localStorage, chiave mw-theme). L'attributo data-theme c'e' SEMPRE: lo mette uno
     script in testa a ogni pagina prima del primo disegno, cosi' chi ha scelto lo
     scuro non vede il lampo bianco. Il blocco qui sotto e' l'unico posto in cui vive
     la tavolozza scura. */
  :root[data-theme="dark"]{
    color-scheme:dark;
    --ground:#0E1113;
    --surface:#14181B;
    --surface-2:#1B2126;
    --ink:#F2F5F7;
    --ink-soft:#C2CBD1;
    --muted:#8B959B;
    --accent:#5E96FF;
    --accent-soft:#8FB6FF;
    --rule:#242B31;
    --deep:#080A0B;
    --deep-2:#101416;
    --deep-ink:#F2F5F7;
    --deep-muted:#8B959B;
    --deep-accent:#5E96FF;
    --deep-rule:#20272C;
    --logo-ink:#F2F5F7;
    --logo-accent:#5E96FF;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.9);
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
    font-size:var(--step);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}

  /* ---------- tipografia ---------- */
  .disp{font-stretch:125%;font-weight:600;letter-spacing:-.015em;line-height:1.08;text-wrap:balance;margin:0}
  h1.disp{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.7rem)}
  h2.disp{font-size:clamp(1.55rem,1.15rem + 1.8vw,2.5rem)}
  .acc{color:var(--accent)}
  h3{font-stretch:112%;font-weight:600;font-size:1.06rem;line-height:1.3;margin:0;letter-spacing:-.005em}
  p{margin:0}
  .lede{font-size:clamp(1.02rem,.96rem + .45vw,1.22rem);line-height:1.55;color:var(--ink-soft);max-width:56ch}
  .body-copy{color:var(--ink-soft);max-width:62ch}
  .eyebrow{
    display:inline-flex;align-items:center;gap:.55em;
    font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    color:var(--muted);margin:0;
  }
  .eyebrow::before{content:"";width:18px;height:3px;background:var(--accent);border-radius:1px;flex:none}
  a{color:inherit}

  /* ---------- animazioni d'ingresso ---------- */
  /* Ingresso a scaglioni: la traslazione e' piu' ampia di prima (28px invece di 16)
     e il ritardo fra un elemento e il successivo lo mette il JS, elemento per
     elemento in ordine di altezza sullo schermo. Modello taalas.com, 80ms di passo. */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  /* Variante senza traslazione: per gli elementi che usano gia' transform per conto
     loro (le schede sticky della pila), dove una seconda traslazione darebbe noia. */
  .reveal-static{transform:none}
  @media (prefers-reduced-motion: reduce){.reveal,.reveal-static{opacity:1;transform:none;transition:none}}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb,var(--ground) 88%,transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--rule);
  }
  .navbar{display:flex;align-items:center;gap:24px;height:68px}
  .brand{display:flex;align-items:center;text-decoration:none;flex:none}
  .brand svg{display:block;width:158px;height:auto}
  nav.links{display:flex;gap:26px;margin-left:auto;align-items:center}
  nav.links a{
    text-decoration:none;font-size:.9rem;font-weight:500;color:var(--ink-soft);
    padding:6px 0;border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s;
  }
  nav.links a:hover{color:var(--ink);border-bottom-color:var(--accent)}
  .lang{display:flex;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:2px;flex:none}
  .lang button{
    font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.06em;
    background:none;border:0;color:var(--muted);padding:4px 10px;border-radius:999px;cursor:pointer;
    transition:background .18s,color .18s;
  }
  .lang button[aria-pressed="true"]{background:var(--accent);color:#fff}
  /* Il bottone chiaro/scuro: un sole nel tema chiaro (premilo e va scuro), una luna
     nel tema scuro. Sta dopo la lingua, cosi' sul telefono finiscono tutti e due a
     destra senza regole in piu'. */
  .tema{
    width:34px;height:34px;border-radius:50%;flex:none;margin-left:10px;
    border:1px solid var(--rule);background:none;color:var(--muted);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;padding:0;
    transition:color .18s,border-color .18s;
  }
  .tema:hover{color:var(--ink);border-color:var(--ink-soft)}
  .tema svg{width:16px;height:16px;display:block}
  .tema .luna{display:none}
  :root[data-theme="dark"] .tema .sole{display:none}
  :root[data-theme="dark"] .tema .luna{display:block}
  /* Il monitor del gestionale segue il tema: due immagini, se ne vede una sola.
     Quella nascosta e' lazy, quindi il browser non la scarica finche' non serve. */
  /* Le tre regole hanno :root davanti apposta: la specificita' deve battere
     «.manifesto-media img», altrimenti nel tema chiaro comparivano tutti e due. */
  :root:not([data-theme="dark"]) .solo-scuro{display:none}
  :root[data-theme="dark"] .solo-chiaro{display:none}
  :root[data-theme="dark"] .solo-scuro{display:block}

  /* ---------- bottoni ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.5em;
    font-size:.92rem;font-weight:600;text-decoration:none;
    padding:12px 20px;border-radius:6px;border:1px solid transparent;
    transition:background .18s,border-color .18s,color .18s,transform .18s;
  }
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{background:color-mix(in srgb,var(--accent) 82%,#000);transform:translateY(-1px)}
  .btn-ghost{border-color:var(--rule);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  /* Dal 22/10 alcuni bottoni sono <button> (aprono il modulo): senza queste due righe
     prenderebbero il carattere e il fondo grigio del sistema. */
  button.btn{font-family:inherit;cursor:pointer}
  button.btn-ghost{background:transparent}
  /* La parte in blu del titolo della hero va a capo da sola: «Distribuzione energetica»
     sopra, «di ultimo miglio.» sotto, invece di cominciare a meta' riga. */
  .hero h1 .acc{display:block}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

  /* ---------- hero ---------- */
  .hero{padding:clamp(44px,7vw,92px) 0 clamp(36px,5vw,60px)}
  /* Il fondo di particelle: dietro TUTTA la pagina, visibile ma mai protagonista.
     Voluto da Tommaso il 10/09: deve capirsi che e' fatto apposta. */
  #particelle-fondo{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
  main,footer{position:relative;z-index:1}
  @media (prefers-reduced-motion:reduce){#particelle-fondo{display:none}}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
  .hero h1{margin-top:16px}
  .hero .lede{margin-top:20px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .hero-media{position:relative;justify-self:end;width:min(100%,360px)}
  .hero-media video,.hero-media img{
    display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
    border-radius:16px;border:1px solid var(--rule);box-shadow:var(--shadow);
  }
  .media-chip{
    position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);
    display:inline-flex;align-items:center;gap:.5em;
    background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(8px);
    border:1px solid var(--rule);border-radius:999px;padding:7px 14px;
    font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.35;
  }
  .media-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#2FA36B;flex:none}

  /* ---------- sezioni ---------- */
  section{padding:clamp(52px,7vw,96px) 0}
  .sec-head{display:grid;gap:14px;max-width:70ch}
  .sec-head h2{margin-top:2px}

  /* ---------- cosa facciamo ---------- */
  .servizi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;align-items:stretch}
  .card{
    position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
    padding:0;display:flex;flex-direction:column;overflow:hidden;
    transition:border-color .2s,transform .2s,box-shadow .2s;
    transform-style:preserve-3d;will-change:transform;
  }
  .card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));box-shadow:var(--shadow)}
  /* Il riflesso che segue il puntatore (effetto «comet card»); il tilt lo fa il JS in coda */
  .card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%);
    opacity:0;transition:opacity .25s;
  }
  .card:hover::after{opacity:1}
  @media (prefers-reduced-motion:reduce){ .card::after{display:none} }
  .card-media{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
  .card-media img{width:100%;height:100%;object-fit:cover;display:block}
  .card-media.contiene img{object-fit:contain;padding:16px}
  .card-corpo{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
  .card .idx{font-size:.78rem;font-weight:600;letter-spacing:.13em;color:var(--accent);text-transform:uppercase}
  .card h3{font-size:1.14rem;line-height:1.25}
  .card p{font-size:.93rem;color:var(--ink-soft)}
  .card-link{margin-top:auto;padding-top:4px;font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none}
  /* Link esteso: il ::after copre tutta la card (l'antenato posizionato), che diventa cliccabile */
  .card-link::after{content:"";position:absolute;inset:0}
  /* Sul telefono l'hover non esiste: quando la card entra in vista fa un breve saluto 3D */
  @keyframes card-saluto{0%,100%{transform:none}35%{transform:perspective(900px) rotateX(2.5deg) rotateY(-4deg)}70%{transform:perspective(900px) rotateX(-1.5deg) rotateY(3deg)}}
  @keyframes card-riflesso{0%{opacity:1;transform:translateX(-130%)}100%{opacity:0;transform:translateX(130%)}}
  .card.saluta{animation:card-saluto 1.1s ease}
  .card.saluta::after{background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,var(--accent) 16%,transparent) 48%,transparent 64%);animation:card-riflesso 1.1s ease forwards}
  @media (prefers-reduced-motion:reduce){.card.saluta,.card.saluta::after{animation:none}}
  .pagina-servizio .marchio-mr{background:var(--deep);border-color:var(--deep-rule);max-width:440px;margin-top:clamp(24px,4vw,36px)}
  .pagina-servizio h1.disp{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem)}
  .pagina-servizio .pannello{margin-top:clamp(28px,4vw,44px)}
  .pagina-servizio .hero-cta{margin-top:clamp(32px,5vw,48px)}
  /* La card Powerbank: la stazione stilizzata, stessa lingua di diagramma e telefono-regia */
  /* ⚠️ Questa e' l'unica card che NON e' blu Mobile Watt: e' il verde Massimo
     Ricarica #03FF9D, lo stesso del marchio. Scelta di Tommaso del 12/09, e il
     motivo e' che deve saltare all'occhio, perche' e' la card che porta fuori, sul
     sito del marchio. Il disegno della stazione resta quello di prima; cambiano
     solo puntinato e anello, che erano bianchi e su un verde chiaro sparirebbero. */
  .card-media.stazione-schema{
    position:relative;background:#03FF9D;
    background-image:radial-gradient(rgba(0,40,26,.14) 1px,transparent 1px);
    background-size:26px 26px;
    display:flex;align-items:center;justify-content:center;
  }
  .stazione-schema::before{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    height:92%;aspect-ratio:1;border-radius:50%;
    border:2px solid rgba(0,60,40,.28);animation:respiro 3s ease-in-out infinite;
  }
  /* Il segno che la card non apre una pagina del sito ma ne porta un'altra */
  .segno-fuori{
    position:absolute;top:14px;right:16px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.92);color:#0B3A2A;
    font-size:1rem;font-weight:700;line-height:1;
  }
  .stazione-schema .frontale{
    position:relative;height:86%;aspect-ratio:5/6;background:#fff;border-radius:22px;
    box-shadow:0 14px 34px rgba(10,20,40,.32);
    display:flex;flex-direction:column;gap:5%;padding:4.5%;
  }
  .stazione-schema .banda{
    flex:0 0 21%;background:#1750C8;border-radius:12px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 7%;
  }
  .stazione-schema .righe{display:flex;flex-direction:column;gap:6px;width:52%}
  .stazione-schema .riga{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.92)}
  .stazione-schema .riga.r2{width:66%;height:5px;background:rgba(255,255,255,.55)}
  .stazione-schema .qr{width:26%;max-width:44px;height:auto;border-radius:6px}
  .stazione-schema .sportelli{
    flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:7% 6%;
  }
  .stazione-schema .slot{
    position:relative;border-radius:999px;background:#20262B;
    animation:carica 5.5s ease-in-out infinite;
  }
  .stazione-schema .slot::after{
    content:"";position:absolute;right:5%;top:14%;height:72%;aspect-ratio:1;
    border-radius:50%;background:rgba(255,255,255,.4);
  }
  .stazione-schema .slot:nth-child(1){animation-delay:0s}
  .stazione-schema .slot:nth-child(2){animation-delay:.3s}
  .stazione-schema .slot:nth-child(3){animation-delay:.6s}
  .stazione-schema .slot:nth-child(4){animation-delay:.9s}
  .stazione-schema .slot:nth-child(5){animation-delay:1.2s}
  .stazione-schema .slot:nth-child(6){animation-delay:1.5s}
  .stazione-schema .slot:nth-child(7){animation-delay:1.8s}
  .stazione-schema .slot:nth-child(8){animation-delay:2.1s}
  .stazione-schema .slot:nth-child(9){animation-delay:2.4s}
  .stazione-schema .slot:nth-child(10){animation-delay:2.7s}
  @keyframes carica{0%,60%,100%{background:#20262B}18%,42%{background:#1750C8}}
  @media (prefers-reduced-motion:reduce){
    .stazione-schema .slot{animation:none}
    .stazione-schema .slot:nth-child(-n+4){background:#1750C8}
    .stazione-schema::before{animation:none}
  }

  /* La card Hardware (22/10): lo schema di un impianto. L'accumulo al centro, caricato
     dal fotovoltaico e dal generatore, che alimenta un edificio e una colonnina di
     ricarica; l'energia scorre sui cavi come le striscette della card Software. La
     prima versione (un armadio a moduli) sembrava di nuovo una stazione powerbank e
     Tommaso l'ha bocciata. E' un disegno e non una foto: di impianti non abbiamo
     materiale vero, e un prodotto inventato non si mostra. */
  .card-media.impianto{
    position:relative;background:#1750C8; /* blu MW fisso: superficie di marca */
    background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
    background-size:26px 26px;
  }
  .impianto svg{position:absolute;inset:0;width:100%;height:100%}
  .impianto .tessera{fill:#fff;filter:url(#ombra-tessera)}
  .impianto .cavo{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2}
  .impianto .flusso{
    fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
    stroke-dasharray:28 180;animation:flusso 2.8s linear infinite;
  }
  @keyframes flusso{from{stroke-dashoffset:208}to{stroke-dashoffset:0}}
  .impianto .f2{animation-delay:-1.4s}
  .impianto .f3{animation-delay:-.7s}
  .impianto .f4{animation-delay:-2.1s}
  .impianto .livello{fill:#1750C8;animation:livello 4.8s ease-in-out infinite}
  @keyframes livello{0%,8%{opacity:.16}22%,82%{opacity:1}100%{opacity:.16}}
  .impianto .l2{animation-delay:.5s}
  .impianto .l3{animation-delay:1s}
  .impianto .l4{animation-delay:1.5s}
  @media (prefers-reduced-motion:reduce){
    .impianto .flusso{animation:none;stroke-dasharray:none;opacity:.6}
    .impianto .livello{animation:none}
  }
  /* La card Software: il diagramma delle integrazioni (blu MW, striscette bianche) */
  .card-media.integrazioni{
    position:relative;background:#1750C8; /* blu MW fisso: superficie di marca, non segue il tema */
    background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
    background-size:26px 26px;
  }
  .integrazioni .linee{position:absolute;inset:0;width:100%;height:100%}
  .integrazioni .linea{stroke:rgba(255,255,255,.3);stroke-width:1}
  .integrazioni .striscia{
    stroke:#fff;stroke-width:2;stroke-linecap:round;
    stroke-dasharray:34 220;animation:striscia 3.6s linear infinite;
  }
  .integrazioni .s2{animation-delay:.7s}
  .integrazioni .s3{animation-delay:1.3s}
  .integrazioni .s4{animation-delay:.4s}
  .integrazioni .s5{animation-delay:1.8s}
  .integrazioni .s6{animation-delay:1s}
  @keyframes striscia{from{stroke-dashoffset:254}to{stroke-dashoffset:-254}}
  .chip-logo{
    position:absolute;transform:translate(-50%,-50%);
    width:clamp(40px,12%,54px);aspect-ratio:1;background:#fff;border-radius:12px;
    box-shadow:0 6px 18px rgba(10,20,40,.22);
    display:flex;align-items:center;justify-content:center;
  }
  .chip-logo img{width:58%;height:58%;object-fit:contain}
  .chip-logo svg{width:56%;height:56%}
  .chip-logo.largo{width:clamp(64px,19%,88px);aspect-ratio:auto;height:clamp(32px,9.5%,42px);border-radius:999px}
  .chip-logo.largo img{width:72%;height:60%}
  .chip-logo.centro{
    left:50%;top:49.9%;width:clamp(50px,15%,66px);border-radius:14px;
    box-shadow:0 10px 26px rgba(10,20,40,.3);
  }
  .chip-logo.centro::after{
    content:"";position:absolute;inset:-6px;border-radius:18px;
    border:2px solid rgba(255,255,255,.5);animation:respiro 3s ease-in-out infinite;
  }
  @keyframes respiro{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:0}}
  @media (prefers-reduced-motion:reduce){
    .integrazioni .striscia,.chip-logo.centro::after{animation:none}
    .integrazioni .striscia{display:none}
  }
  .marchio-mr{
    position:relative;z-index:2;
    margin-top:auto;display:flex;align-items:center;gap:14px;
    padding:14px 16px;border:1px solid var(--deep-rule);border-radius:8px;
    background:var(--deep); /* il marchio MR vive su fondo scuro, ovunque stia la card */
    text-decoration:none;transition:border-color .2s,background .2s;
  }
  .marchio-mr:hover{border-color:var(--deep-accent);background:rgba(94,150,255,.06)}
  .marchio-mr img{width:64px;height:auto;display:block;flex:none}
  .marchio-nota{font-size:.82rem;line-height:1.45;color:var(--deep-muted)}
  .marchio-mr:hover .marchio-nota{color:var(--deep-ink)}

  /* ---------- come lavoriamo (tab) ---------- */
  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
  .tab{
    font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
    padding:10px 18px;border-radius:999px;border:1px solid var(--rule);
    background:none;color:var(--ink-soft);transition:background .18s,color .18s,border-color .18s;
  }
  .tab:hover{border-color:var(--accent);color:var(--accent)}
  .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
  .pannello{
    display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
    margin-top:26px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;
    padding:clamp(22px,3.5vw,40px);
  }
  .pannello[hidden]{display:none}
  .pannello h3{font-size:1.2rem}
  .spunte{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
  .spunte li{
    display:flex;gap:12px;align-items:flex-start;
    background:var(--ground);border:1px solid var(--rule);border-radius:8px;
    padding:12px 15px;font-size:.92rem;line-height:1.5;color:var(--ink-soft);
  }
  .spunte li::before{
    content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
    background:color-mix(in srgb,var(--accent) 14%,transparent);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231750C8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
    background-size:11px;background-position:center;background-repeat:no-repeat;
  }
  :root[data-theme="dark"] .spunte li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E96FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")}
  .pannello-media img.portatile{object-fit:contain;height:auto;max-height:none;border:0;border-radius:0;background:transparent}
  .pannello-media img.schermo-3d{object-fit:contain;height:auto;max-height:520px;border:0;border-radius:0;background:transparent}
  .nota-onesta{font-size:.78rem;line-height:1.5;color:var(--muted);margin-top:10px}
  .spunte .forte{font-weight:600;color:var(--ink)}
  /* L'iPhone della demo: lo stesso mockup del sito Massimo Ricarica, in CSS puro */
  .demo-iphone{position:relative;width:min(100%,350px);margin-inline:auto;padding-inline:40px}
  .demo-iphone .corpo{
    position:relative;border-radius:48px;background:#14181B;padding:10px;
    box-shadow:0 24px 60px -30px rgba(10,20,30,.5);touch-action:pan-y;
  }
  .demo-iphone .tasto{position:absolute;width:3px;background:#2a3238}
  .demo-iphone .t1{left:-2px;top:22%;height:9%;border-radius:2px 0 0 2px}
  .demo-iphone .t2{left:-2px;top:34%;height:9%;border-radius:2px 0 0 2px}
  .demo-iphone .t3{right:-2px;top:27%;height:13%;border-radius:0 2px 2px 0}
  .demo-iphone .vetro{border-radius:38px;overflow:hidden;background:#fff}
  .demo-iphone .barra-stato{
    position:relative;height:32px;background:#fff;
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  }
  .demo-iphone .isola{width:80px;height:18px;border-radius:999px;background:#14181B}
  .demo-iphone .batteria{position:absolute;right:16px;bottom:9px;display:flex;align-items:center;gap:2px}
  .demo-iphone .batteria svg{width:8px;height:8px;color:var(--accent);animation:respiro-batteria 2s ease-in-out infinite}
  @keyframes respiro-batteria{0%,100%{opacity:1}50%{opacity:.35}}
  .demo-iphone .pila{display:inline-block;width:17px;height:9px;border:1px solid rgba(20,24,27,.7);border-radius:2.5px;padding:1px}
  .demo-iphone .pila i{display:block;width:100%;height:100%;background:var(--accent);border-radius:1.5px}
  .demo-iphone .schermata{
    width:100%;height:auto;display:none;border:0;border-radius:0;
    max-height:none;object-fit:contain;background:#fff;box-shadow:none;
  }
  .demo-iphone .schermata.attiva{display:block}
  .demo-iphone .freccia{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:0;background:transparent;color:var(--ink);cursor:pointer;
    transition:color .2s,transform .1s;
  }
  .demo-iphone .freccia:hover{color:var(--accent)}
  .demo-iphone .freccia:active{transform:translateY(-50%) scale(.88)}
  .demo-iphone .freccia svg{width:30px;height:30px}
  .demo-iphone .freccia.sx{left:0}
  .demo-iphone .freccia.dx{right:0}
  .demo-iphone .didascalia{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
  .demo-iphone .nome-schermata{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
  .demo-iphone .puntini{display:flex;gap:6px}
  .demo-iphone .puntini button{
    width:6px;height:6px;border-radius:999px;border:0;padding:0;cursor:pointer;
    background:color-mix(in srgb,var(--ink) 25%,transparent);
    transition:width .25s,background .25s;
  }
  .demo-iphone .puntini button.attivo{width:20px;background:var(--accent)}
  @media (prefers-reduced-motion:reduce){.demo-iphone .batteria svg{animation:none}}
  .pannello-media img.schermo-telefono{object-fit:contain;width:auto;max-height:460px;margin-inline:auto;border-radius:22px}
  .pannello-media img{
    display:block;width:100%;max-height:440px;object-fit:cover;border-radius:10px;
    border:1px solid var(--rule);background:var(--surface-2);
  }

  /* ---------- tecnologie (sezione scura) ---------- */
  .tech{background:var(--deep);color:var(--deep-ink)}
  .tech .eyebrow{color:var(--deep-muted)}
  .tech .eyebrow::before{background:var(--deep-accent)}
  .tech .lede{color:var(--deep-muted)}
  /* Dal 12/09 i sei riquadri numerati (categoria + elenco) sono diventati una riga
     sola di nomi: Tommaso li voleva molto piu' corti. I nomi non si traducono, sono
     nomi propri, quindi niente data-it/data-en qui dentro. */
  .tech-nomi{
    list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px;
  }
  .tech-nomi li{
    border:1px solid var(--deep-rule);border-radius:999px;
    padding:8px 16px;font-size:.92rem;font-weight:500;color:var(--deep-ink);
    background:color-mix(in srgb,var(--deep-2) 70%,transparent);
  }

  /* ---------- referenze (loghi partner) ----------
     13/09: nuova sezione fra «Cosa facciamo» e le tecnologie, richiesta da
     Tommaso, mentre «Le fondamenta» e' stata tolta (vedi il commento in
     index.html). Regole precise: SOLO il logo, niente cornice/sfondo/scritta
     sotto ad ognuno, "super clean".
     ⚠️ Lo sfondo di questa sezione e' bianco FISSO, non var(--ground): gli otto
     loghi ufficiali sono ink scuro pensato per stare su bianco (nessuno ha una
     variante chiara per un fondo scuro, tranne Vinòforum che ce l'ha ma qui non
     la usiamo per coerenza con gli altri sette). Ridisegnarli in chiaro per il
     tema scuro vorrebbe dire alterare il marchio di qualcun altro, la stessa
     regola per cui i NOSTRI marchi non si ridisegnano vale a maggior ragione
     per i loro. Quindi: sezione sempre chiara, testo della testata fissato di
     conseguenza (altrimenti nel tema scuro sparirebbe sul fondo bianco), e un
     confine sottile fisso perche' l'incontro col resto della pagina nel tema
     scuro sia voluto e non un errore di resa. */
  .referenze{background:#FFFFFF;color:#14181B;border-block:1px solid rgba(20,24,27,.1)}
  .referenze .eyebrow::before{background:#1750C8}
  .referenze h2{color:#14181B}
  .loghi-partner{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:clamp(30px,5vw,58px);margin-top:clamp(30px,4vw,46px);
  }
  .loghi-partner img{height:34px;width:auto;max-width:170px;object-fit:contain;display:block}
  /* I marchi col nome su piu' righe: alla stessa altezza degli altri il nome non si
     leggerebbe. Aventino (nome piccolo sotto lo stemma) prende 62 px; i due forum di EFI,
     pieni e scuri, 48, se no pesano piu' di tutti gli altri (22/10). */
  .loghi-partner img.logo-alto{height:62px;max-width:160px}
  .loghi-partner img.logo-medio{height:48px;max-width:150px}

  /* ---------- azienda ----------
     I tre riquadri .principle sono stati tolti il 12/09: i loro contenuti sono
     diventati tre delle sei regole della pila, e tenerli sarebbe stato ripeterli.
     .two-col resta perche' la usa il manifesto. */
  .two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start}

  /* ---------- contatti ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
  .contact-list{display:grid;gap:18px;margin-top:8px}
  .cline{display:grid;gap:3px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
  .cline:last-child{border-bottom:0;padding-bottom:0}
  .cline dt{font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .cline dd{margin:0;font-size:1rem}
  .cline a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
  .cline a:hover{border-bottom-color:var(--accent)}

  footer{border-top:1px solid var(--rule);padding:34px 0 44px}
  .foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
  .foot small{color:var(--muted);font-size:.8rem;line-height:1.6}
  .foot svg{display:block;width:118px;height:auto;opacity:.9}

  /* ============ Restyle 12/09: le tre meccaniche prese da taalas.com ============
     Riferimento scelto da Tommaso. Rifatte in CSS puro perche' il sito non ha build.
       1) .ticker    le scritte vuote, di solo contorno, che scorrono
       2) .manifesto la sezione subito dopo la hero: titolo grande, testo, immagine
       3) .pila      i punti numerati che si impilano mentre si scorre
     Quello che NON abbiamo preso: il video a tutto schermo della loro hero (niente
     video sul sito, scelta di Tommaso del 04/09) e il titolo in sfumatura. */

  /* ---------- 1. le scritte vuote che scorrono ----------
     Due paragrafi identici affiancati che traslano insieme di -100% della propria
     larghezza: quando il primo esce, il secondo e' gia' al suo posto e il giro
     riparte senza salti. La frase e' ripetuta dentro il testo, cosi' copre sempre
     lo schermo senza una riga di JS. Il secondo paragrafo e' aria-hidden: e' la
     stessa frase, chi legge con la sintesi vocale non la deve sentire due volte.
     ⚠️ Il contorno e' il blu di marca #1750C8 nel tema chiaro. Nel tema scuro
     diventa il neutro chiaro: il blu MW su fondo scuro affonda, e schiarirlo darebbe
     l'azzurrino che Tommaso ha bocciato il 10/09. Anche taalas.com sul fondo scuro
     usa un colore chiaro, non il proprio blu. */
  .ticker{
    --ticker-ink:#1750C8;
    overflow:hidden;white-space:nowrap;line-height:1;font-size:0;
    padding-block:clamp(14px,2.6vw,34px);
    user-select:none;-webkit-user-select:none;pointer-events:none;
  }
  /* ⚠️ La frase e' ripetuta DUE volte per paragrafo, non di piu'. Con quattro il
     paragrafo animato era largo 12.941 px, che su un display Retina fanno 25.882
     pixel: oltre il limite di texture della GPU (16.384). Safari allora non riesce
     a dipingere il livello in tempo, la scritta sparisce a tratti e quando
     ricompare sembra ripartire da sinistra. Riprodotto il 12/09 con WebKit a
     finestra, non in headless. Due ripetizioni bastano: ogni paragrafo resta piu'
     largo di qualunque schermo e il livello sta sotto il limite anche a 2x. */
  .ticker p{
    display:inline-block;margin:0;padding-right:.35em;will-change:transform;
    font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.005em;
    font-size:clamp(2.1rem,6.4vw,6.6rem);
    color:color-mix(in srgb,var(--ticker-ink) 24%,transparent);
    animation:scorri 40s linear infinite; /* meta' del paragrafo, meta' del tempo: stessa velocita' di prima */
  }
  @supports (-webkit-text-stroke:1px red){
    .ticker p{color:transparent;-webkit-text-stroke:1.6px var(--ticker-ink)}
  }
  .ticker.al-contrario p{animation-direction:reverse}
  @keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-100%)}}
  :root[data-theme="dark"] .ticker{--ticker-ink:var(--ink-soft)}
  @media (prefers-reduced-motion:reduce){.ticker p{animation:none}}

  /* ---------- 2. il manifesto ----------
     Riusa .two-col: a sinistra il testo, a destra l'immagine. E' la sezione che a
     taalas.com apre il racconto subito dopo la hero. */
  .manifesto{padding-bottom:clamp(30px,4vw,56px)}
  /* Niente cornice: l'immagine e' un ritaglio su fondo trasparente (il monitor del
     gestionale), un bordo rettangolare attorno lo sciuperebbe. */
  .manifesto-media img{display:block;width:100%;height:auto}

  /* ---------- 3. la pila dei punti ----------
     Ogni scheda e' sticky con un top via via piu' basso: quella che arriva copre la
     precedente lasciandone scoperta una striscia, e nessuna si stacca finche' il
     blocco che le contiene non e' finito. E' il meccanismo di taalas.com, con i
     numeri adattati alle nostre misure. Il ::after finale e' il respiro che tiene
     la pila ferma un momento prima che scorra via. */
  /* --passo e' anche l'altezza della testata della scheda: la striscia che resta
     scoperta quando la scheda dopo la copre mostra cosi' numero e titolo per
     intero, e scorrendo si costruisce un elenco leggibile invece di una pila di
     numeri tagliati a meta'. */
  /* Dal secondo giro del 12/09 le regole sono SOLO TITOLI, per scelta di Tommaso:
     si devono leggere di corsa. Ogni scheda e' quindi una riga sola, e --passo vale
     quanto --riga: cosi' la scheda che arriva si posa esattamente sotto la
     precedente e le sei costruiscono un elenco, invece di accavallarsi. */
  .pila{--riga:92px;--vuoto:clamp(30px,4.5vh,52px);--coda:38vh;--top:calc(var(--barra-h,72px) + 20px)}
  .pila-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(28px,5vw,64px);align-items:start}
  .pila-intro{margin-bottom:clamp(20px,3vw,34px)}
  /* ⚠️ Le sei schede si impilano incollandosi, ed e' il pezzo che Tommaso tiene di
     piu'. Il come NON e' ovvio: nel primo tentativo, in uscita, le schede si
     mangiavano a vicenda e ne sparivano tre. Ecco perche' e' scritto cosi'.

     Il problema. Una scheda incollata non puo' uscire dal contenitore: quando la
     sezione finisce, il contenitore la spinge su. La spinta arriva quando
     "fondo del contenitore meno altezza del riquadro" scende sotto la posizione a
     cui la scheda si incolla. Se ogni scheda si incolla a un'altezza diversa, la
     spinta le raggiunge a una per volta, dall'ultima: e siccome qui la scheda e'
     alta quanto il passo, una scheda spinta copre del tutto quella prima.
     Non lo risolvono ne' il margine negativo di taalas.com ne' le aree di griglia
     fino in fondo: provati tutti e due, misurati, non cambia niente.

     La cura. Tutte e sei si incollano alla STESSA altezza (--top) e hanno riquadri
     della STESSA altezza (6 x --riga): la spinta le raggiunge quindi nello stesso
     istante e se ne vanno insieme, tenendo le distanze. La scala che si vede e'
     fatta col padding-top dentro il riquadro: la scheda n. 3 ha due righe di
     imbottitura sopra, e la sua targhetta cade due righe piu' in basso. Il margine
     negativo, uguale per tutte, riporta il passo del flusso a --passo, altrimenti
     in arrivo le schede sarebbero lontanissime.

     Se cambi --riga o il numero delle schede, la tabella qui sotto va rifatta:
     imbottitura sopra (n-1) + una riga + imbottitura sotto (6-n) deve fare sempre
     sei righe. E --coda non puo' scendere sotto 5 x --riga, o il riquadro della
     sesta scheda non ci sta e la spinta parte subito. */
  .regole{position:relative}
  .regole::after{content:"";display:block;height:var(--coda)}
  /* ⚠️ Due cose qui NON sono un capriccio, e sono il frutto di tre tentativi.
     1) Ogni scheda si incolla un gradino piu' in basso della precedente, e il
        riquadro con margine e' uguale per tutte (--riga + --vuoto). Cosi' quando la
        sezione finisce e il contenitore le spinge su, la spinta arriva quando il
        fondo del contenitore e' gia' sotto l'ultima scheda: la sezione dopo non
        arriva mai addosso alla pila. Provata anche la strada dei riquadri tutti
        uguali con la scala fatta dentro: risolve il collasso ma fa arrivare il
        ticker sopra le schede, che e' peggio.
     2) L'ordine di disegno e' ROVESCIATO (la prima scheda sta sopra). In uscita le
        schede si accavallano comunque, perche' la spinta le raggiunge una per
        volta dall'ultima: con l'ordine naturale l'ultima copriva le altre e
        sembrava un errore, con l'ordine rovesciato scivolano SOTTO a quelle prima
        e la pila si richiude su se stessa. Durante il montaggio non cambia niente,
        perche' li' le schede sono affiancate e non si sovrappongono. */
  .regola{position:sticky;top:var(--top);padding-bottom:var(--vuoto);pointer-events:none}
  .regola:nth-child(1){z-index:6}
  .regola:nth-child(2){top:calc(var(--top) + 1 * var(--riga));z-index:5}
  .regola:nth-child(3){top:calc(var(--top) + 2 * var(--riga));z-index:4}
  .regola:nth-child(4){top:calc(var(--top) + 3 * var(--riga));z-index:3}
  .regola:nth-child(5){top:calc(var(--top) + 4 * var(--riga));z-index:2}
  .regola:nth-child(6){top:calc(var(--top) + 5 * var(--riga));z-index:1}
  .regola-corpo{
    pointer-events:auto;
    display:flex;align-items:center;gap:16px;min-height:var(--riga);padding:0 24px;
    background:var(--surface);border:1px solid var(--rule);border-radius:14px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  /* Il numero segue --accent come i titoli .acc e i link dei contatti: e' testo
     piccolo dentro un pannello, non una superficie di marca, e nel tema scuro il
     blu MW pieno non si leggerebbe. */
  .regola .num{
    font-size:.86rem;font-weight:700;letter-spacing:.14em;
    color:var(--accent);font-variant-numeric:tabular-nums;
  }
  /* ⚠️ Il corpo e' tarato perche' il titolo piu' lungo stia su UNA riga a 1440px:
     le sei schede sono un elenco, e una che va a capo sfalsa tutte quelle sotto,
     visto che --passo vale --riga. Chi allunga un titolo ricontrolli qui. */
  .regola h3{font-size:clamp(.98rem,.9rem + .35vw,1.14rem);font-stretch:118%}
  /* Dal 22/10 ogni scheda e' un ambito: il titolo piu' una riga tecnica sotto, ed e'
     per questo che --riga e' passata da 74 a 92 px (108 e 132 sotto i 960 e 680). */
  .regola-testo{display:flex;flex-direction:column;gap:3px;min-width:0}
  .regola-testo p{font-size:.86rem;line-height:1.35;color:var(--ink-soft)}
  /* La colonna di destra: pannello di marca che resta fermo mentre le schede salgono.
     Stessa lingua grafica della card Software (blu MW fisso e puntinato). */
  /* Il pannello resta fermo accanto alla pila mentre le schede si montano.
     ⚠️ Il posizionamento NON e' decorativo: l'immagine e i due veli dentro sono in
     posizione assoluta, e senza un ancoraggio qui si attaccano alla sezione e
     dilagano su mezza pagina (successo il 12/09, togliendo lo sticky). */
  .pila-visual{
    position:sticky;top:var(--top);
    height:min(500px,calc(100vh - var(--top) - 48px));
    border-radius:18px;overflow:hidden;isolation:isolate;background:#1750C8;
  }
  .pila-visual img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover}
  /* Il velo blu di marca piu' il puntinato delle card: la fotografia diventa una
     superficie Mobile Watt e non uno scatto d'archivio appoggiato li'. Blu #1750C8
     fisso, come su tutte le superfici di marca. In alto il velo e' leggero e la
     scheda si vede per quello che e'; verso il basso si chiude, ed e' li' che va a
     posarsi la didascalia in bianco.
     ⚠️ Lo z-index serve: un ::before si dipinge PRIMA dei figli, quindi senza di
     esso l'immagine coprirebbe il velo e il pannello resterebbe grigio. */
  .pila-visual::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(23,80,200,.2) 0%,rgba(23,80,200,.46) 52%,rgba(23,80,200,.82) 100%);
  }
  .pila-visual::after{
    content:"";position:absolute;inset:0;z-index:2;
    background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
    background-size:26px 26px;
  }
  .pila-didascalia{
    position:absolute;left:0;right:0;bottom:0;z-index:3;padding:24px 26px;
    color:#fff;font-size:.98rem;line-height:1.45;font-weight:500;text-wrap:balance;
  }

  /* ---------- il modulo «Contattaci» (22/10) ----------
     Un <dialog> a cinque passi. Sul telefono occupa tutto lo schermo e il contenuto
     parte dall'alto, coi bottoni ancorati in fondo; sul computer e' un riquadro che
     non sfora mai lo schermo (regola di Tommaso del 13/10 sui moduli). Testi da
     15-16 px: sotto i 16 il telefono ingrandisce la pagina quando si tocca un campo. */
  .btn-grande{
    margin-top:clamp(26px,4vw,40px);padding:20px 34px;font-size:1.12rem;gap:14px;
    border-radius:14px;box-shadow:0 14px 30px -14px rgba(23,80,200,.6);
  }
  .btn-grande svg{width:22px;height:22px;transition:transform .2s}
  .btn-grande:hover svg{transform:translateX(4px)}
  html.modulo-aperto{overflow:hidden}
  .modulo{
    width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
    margin:auto;padding:0;border:1px solid var(--rule);border-radius:20px;
    background:var(--ground);color:var(--ink);box-shadow:0 30px 80px -30px rgba(10,20,40,.55);
  }
  .modulo::backdrop{background:rgba(14,20,28,.55);backdrop-filter:blur(3px)}
  .modulo[open]{animation:modulo-entra .25s ease}
  @keyframes modulo-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .modulo-corpo{display:flex;flex-direction:column;max-height:calc(100dvh - 34px);padding:26px 28px 24px}
  .modulo-testa{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .modulo-passo{font-size:.9rem;font-weight:600;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
  .modulo-testa h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);line-height:1.15;margin-top:6px;font-stretch:118%}
  .modulo-chiudi{
    flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);
    background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  }
  .modulo-chiudi:hover{border-color:var(--accent);color:var(--accent)}
  .modulo-chiudi svg{width:18px;height:18px}
  .modulo-barra{height:4px;border-radius:2px;background:var(--rule);margin:18px 0 22px;overflow:hidden}
  .modulo-barra i{display:block;height:100%;width:20%;background:var(--accent);border-radius:2px;transition:width .3s ease}
  .modulo-passi{flex:1 1 auto;min-height:0;overflow:auto}
  .passo{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:16px}
  .passo[hidden]{display:none}
  .passo-titolo{font-size:1.15rem;font-weight:600}
  .campi-due{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .campo{display:flex;flex-direction:column;gap:7px}
  .campo label,.campo-nome{font-size:.95rem;font-weight:600;color:var(--ink)}
  .facoltativo{font-weight:400;color:var(--muted)}
  .campo input,.campo textarea{
    font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
    border:1px solid var(--rule);border-radius:12px;padding:13px 14px;width:100%;
    transition:border-color .15s,box-shadow .15s;
  }
  .campo textarea{resize:vertical;min-height:130px;line-height:1.45}
  .campo input:focus,.campo textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
  .sbagliato input,.sbagliato textarea{border-color:#D33A2C}
  .scelte{display:flex;flex-wrap:wrap;gap:10px}
  .scelte.sbagliato .scelta span{border-color:#D33A2C}
  .scelta{position:relative;cursor:pointer}
  .scelta input{position:absolute;opacity:0;pointer-events:none}
  .scelta span{
    display:block;padding:11px 16px;border:1px solid var(--rule);border-radius:999px;
    font-size:.95rem;font-weight:500;background:var(--surface);transition:background .15s,border-color .15s,color .15s;
  }
  .scelta:hover span{border-color:var(--accent)}
  .scelta input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
  .scelta input:focus-visible + span{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
  .consenso{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--ink-soft);cursor:pointer}
  .consenso input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--accent)}
  .consenso.sbagliato{color:#D33A2C}
  .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .esito{align-items:flex-start;padding:8px 0 4px}
  .esito svg{width:52px;height:52px;color:var(--accent)}
  .esito p{font-size:1rem;color:var(--ink-soft)}
  .modulo-errore{margin-top:14px;font-size:.95rem;font-weight:500;color:#D33A2C}
  .modulo-errore[hidden]{display:none}
  .modulo-piede{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
  .modulo-piede [data-avanti]{margin-left:auto;min-width:150px}
  .modulo-piede button[hidden]{display:none}
  .modulo-piede button:disabled{opacity:.6;cursor:progress}
  @media (max-width:680px){
    .modulo{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}
    .modulo-corpo{height:100dvh;max-height:100dvh;padding:18px 20px calc(16px + env(safe-area-inset-bottom))}
    .campi-due{grid-template-columns:1fr}
    .modulo-piede{margin-top:auto}
    .modulo-piede .btn{flex:1}
  }
  @media (prefers-reduced-motion:reduce){.modulo[open]{animation:none}.modulo-barra i{transition:none}}

  /* ---------- responsive ---------- */
  @media (max-width:960px){
    .hero-grid,.two-col,.contact-grid,.pannello{grid-template-columns:1fr}
    .hero-media{justify-self:start;width:min(100%,340px)}
    .servizi{grid-template-columns:1fr;gap:16px}
    .pannello-media{order:-1}
    /* La pila va a una colonna e il pannello di marca sparisce: sul telefono
       resterebbe un rettangolo blu senza ruolo, e le parti vuote non si fanno. */
    .pila-grid{grid-template-columns:1fr}
    .pila-visual{display:none}
    .pila{--riga:108px}
    .regola-corpo{padding:0 18px}
  }
  @media (max-width:680px){
    .navbar{flex-wrap:wrap;height:auto;padding-block:12px;gap:10px 18px}
    nav.links{order:3;margin-left:0;width:100%;gap:8px 20px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:8px}
    .lang{margin-left:auto}
    .brand svg{width:132px}
    .hero-media{width:100%}
    .hero-media video,.hero-media img{aspect-ratio:4/3}
    .ticker p{-webkit-text-stroke-width:1.1px}
    /* Sul telefono il titolo va a capo, quindi la riga deve essere piu' alta.
       ⚠️ --coda non puo' scendere sotto 5 x --riga. */
    .pila{--riga:132px}
  }