/* app.css — lo stile della home di EDG Sistemi, portato dal mockup (Documenti\Mockup\home-v3.html, 05/09). Il mockup resta il contratto: si ritocca lì, si riporta qui. */
/* ───────────── tokens ───────────── */
:root{
  --ink:#111417; --ink-2:#181C21; --ink-3:#20262C; --line:#2B333B; --line-2:#3A434C;
  --paper:#ECEEEA; --paper-2:#E1E4DE; --paper-line:#CBD1C9; --paper-ink:#14181C; --paper-muted:#5C6771;
  --amber:#F6A623; --amber-2:#FFC15C; --amber-deep:#B86F07; --amber-glow:rgba(255,176,50,.55);
  --led:#3FD57E; --green:#137A43;
  --txt:#ECEEE9; --muted:#97A1AA;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Barlow','Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  --w:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
.sec{padding:112px 0}
.paper{background:var(--paper);color:var(--paper-ink)}

/* ───────────── testi ───────────── */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:12px;margin:0}
.eyebrow::before{content:"";flex:none;width:30px;height:11px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 7px,transparent 7px 9px,currentColor 9px 10px,transparent 10px 13px)}
.paper .eyebrow{color:var(--amber-deep)}
.h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(42px,5.4vw,68px);line-height:.94;letter-spacing:-.005em;margin:16px 0 18px;text-wrap:balance}
.lead{font-size:19px;max-width:60ch;color:var(--muted);margin:0}
.paper .lead{color:var(--paper-muted)}

/* ───────────── tasti ───────────── */
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:4px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:#1A1205}
.btn-amber:hover{background:var(--amber-2)}
.btn-ghost{border-color:var(--line-2);color:var(--txt);background:transparent}
.btn-ghost:hover{border-color:var(--txt)}
.paper .btn-ghost{border-color:var(--paper-line);color:var(--paper-ink)}
.paper .btn-ghost:hover{border-color:var(--paper-ink)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ───────────── competenze (v3): sezione scura, sei tessere in tabella ───────────── */
.comp{background:var(--ink);border-bottom:1px solid var(--line)}
.comp-testa{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:56px}
.comp-testa .h2{margin-bottom:0}
.comp-testa .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;padding-bottom:6px}
.comp-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.comp-card{position:relative;background:var(--ink);padding:34px 30px 28px;display:flex;flex-direction:column;gap:14px;transition:background .25s}
.comp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.comp-card:hover{background:var(--ink-2)}
.comp-card:hover::before{transform:scaleX(1)}
.comp-card .n{position:absolute;top:24px;right:28px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber)}
.comp-card svg{width:46px;height:46px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.comp-card h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:25px;line-height:1;letter-spacing:.02em;margin:6px 0 0;color:var(--txt)}
.comp-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.comp-card .tag{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:5px}   /* quattro sigle per tessera, SEMPRE su una riga, caselle uguali */
.comp-card .tag li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:5px 2px;border-radius:2px;text-align:center;white-space:nowrap;overflow:hidden;min-width:0}
@media (max-width:1100px){.comp-griglia{grid-template-columns:1fr 1fr}.comp-testa{grid-template-columns:1fr;gap:18px}}
@media (max-width:640px){.comp-griglia{grid-template-columns:1fr}}

/* ───────────── vetrina SI.SCO (v4): le scene ambientate, una grande, nove provini sotto ───────────── */
.vet{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)}
.vet::before{content:"";position:absolute;left:50%;top:46%;width:80vw;height:80vw;max-width:1300px;max-height:1300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(246,166,35,.10),transparent 60%);pointer-events:none}
.vet .wrap{position:relative}
.vet-testa{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:44px}
.vet-testa .h2{margin-bottom:0}
.vet-badge{display:inline-block;vertical-align:middle;font-family:var(--mono);font-size:11px;letter-spacing:.18em;border:1px solid var(--amber);color:var(--amber);padding:5px 10px;border-radius:3px;margin-left:14px;font-weight:500;text-transform:uppercase;transform:translateY(-8px)}
.vet-testa .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;padding-bottom:6px}

/* la scena grande */
.vet-scena{position:relative;aspect-ratio:16/9.4;border-radius:12px;overflow:hidden;background:#0B0E11;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 120px rgba(246,166,35,.10)}
.vet-quadro{position:absolute;inset:0;transform:translate(calc(var(--px,0)*-10px),calc(var(--py,0)*-7px)) scale(1.04);transition:transform .35s ease-out;will-change:transform}   /* segue il mouse di poco */
.vet-quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;transform:scale(1)}
.vet-quadro img.on{opacity:1;animation:vetKb var(--vet-t,7s) ease-out forwards}
@keyframes vetKb{from{transform:scale(1)}to{transform:scale(1.06)}}
.vet-scena::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,14,17,.88),rgba(11,14,17,.25) 38%,transparent 62%);pointer-events:none}
.vet-did{position:absolute;left:38px;right:38px;bottom:32px;z-index:2;display:flex;align-items:flex-end;gap:18px;color:#fff;pointer-events:none}
.vet-did b{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--amber);padding-bottom:9px;font-weight:500}
.vet-did span{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:40px;line-height:1;letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.vet-did small{display:block;font-size:15.5px;margin-top:7px;color:#D5DBE0;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.vet-did.cambia>div{animation:vetDid .6s ease}
@keyframes vetDid{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* i nove provini: navigazione, tutti uguali su una riga */
.vet-provini{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.vet-provini li{position:relative;cursor:pointer;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);opacity:.55;transition:opacity .3s,border-color .3s,transform .3s}
.vet-provini li img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.vet-provini li span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 4px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.vet-provini li i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--amber)}
.vet-provini li:hover{opacity:.9}
.vet-provini li.on{opacity:1;border-color:var(--amber);transform:translateY(-3px)}
.vet-provini li.on span{color:var(--txt)}
.vet-provini li.on i{animation:vetProg var(--vet-t,7s) linear forwards}
@keyframes vetProg{from{width:0}to{width:100%}}

/* la scheda tecnica, a due colonne */
.vet-spec{list-style:none;margin:64px 0 0;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.vet-spec li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.vet-spec li span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);padding-top:3px}
.vet-cta{display:flex;gap:14px;margin-top:34px}

@media (max-width:1100px){
  .vet-testa{grid-template-columns:1fr;gap:18px}
  .vet-spec{grid-template-columns:1fr}
  .vet-did span{font-size:30px}
}
@media (max-width:760px){
  .vet-scena{aspect-ratio:4/3}
  .vet-did{left:18px;right:18px;bottom:16px;gap:10px}
  .vet-did span{font-size:22px}
  .vet-did small{font-size:13px}
  .vet-provini{grid-template-columns:repeat(3,1fr)}
  .vet-spec li{grid-template-columns:1fr;gap:4px}
  .vet-cta{flex-direction:column}
}

/* ───────────── barra di navigazione ───────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(17,20,23,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;position:relative}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--txt)}
.logo svg{width:48px;height:48px;display:block;flex:none}
.logo-word{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.05em;line-height:.9;text-transform:uppercase;white-space:nowrap}
.logo-word small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--muted);font-weight:500;margin-top:5px;text-transform:uppercase}
.nav-links{display:flex;gap:34px;font-size:15px;font-weight:500;margin:0;padding:0;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover{color:var(--txt);border-color:var(--amber)}
.nav-right{display:flex;align-items:center;gap:22px}
.lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--muted)}
.lang b{color:var(--txt);font-weight:600}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--txt);border-radius:4px;height:40px;padding:0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;cursor:pointer}

/* ───────────── hero ───────────── */
.hero{position:relative;overflow:hidden;padding:84px 0 84px;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.32;-webkit-mask-image:radial-gradient(ellipse at 68% 45%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 68% 45%,#000 25%,transparent 72%)}
.hero::after{content:"";position:absolute;right:-12%;top:-30%;width:64vw;height:64vw;max-width:980px;max-height:980px;background:radial-gradient(circle,rgba(246,166,35,.13),transparent 60%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(36px,4.2vw,58px);line-height:.98;letter-spacing:.005em;margin:18px 0 22px;white-space:nowrap}
.h1 .soft{display:block;font-weight:600;color:var(--muted);font-size:.6em;letter-spacing:.04em;margin-bottom:.14em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* v2: il titolo sale riga per riga all'apertura; la luce che passa e la grana danno profondità */
.h1 .riga{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h1 .riga>span{display:block;animation:sale .9s cubic-bezier(.2,.8,.2,1) both}
.h1 .riga:nth-child(2)>span{animation-delay:.12s}
@keyframes sale{from{transform:translateY(105%)}to{transform:translateY(0)}}
.hero-sweep{position:absolute;inset:-20% -10%;background:linear-gradient(105deg,transparent 42%,rgba(246,166,35,.075) 50%,transparent 58%);animation:sweep 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes sweep{from{transform:translateX(-45%)}to{transform:translateX(45%)}}
.hero-noise{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* v2: le tre credenziali sotto i tasti */
.cred{margin-top:46px;padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.cred>div{padding:0 22px;border-left:1px solid var(--line);min-width:0}
.cred>div:first-child{border-left:0;padding-left:0}
.cred>div:last-child{padding-right:0}
.cred b{display:block;font-family:var(--display);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cred b em{font-style:normal;color:var(--amber);font-size:.46em;vertical-align:top;margin-left:3px;letter-spacing:.02em}
.cred span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:9px;line-height:1.6}
/* v2: le specialità, in evidenza sotto il titolo */
.campi{list-style:none;margin:6px 0 26px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:18px;letter-spacing:.04em;line-height:1;color:#C9D0D6}
.campi li{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:10px 0;border-bottom:1px solid var(--line)}   /* la riga corre per tutta la larghezza, a filo col paragrafo */
.campi li:last-child{border-bottom:0}
.campi li span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.campi li span::before{content:"";width:6px;height:6px;background:var(--amber);transform:rotate(45deg);flex:none}
/* v2: i due tasti dividono a metà la larghezza del testo */
.hero .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero .hero-cta .btn{justify-content:center;width:100%}
.lead em{font-style:normal;color:var(--txt);font-weight:600;border-bottom:2px solid var(--amber)}
.hero .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-justify:inter-word;text-wrap:pretty}   /* v2: giustificato, con la sillabazione italiana del browser */
/* v2: le piattaforme */
.piatt{margin-top:28px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.piatt-t{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.chip{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 6px;border:1px solid var(--line-2);border-radius:3px;font-size:12.5px;font-weight:500;color:var(--txt);background:rgba(255,255,255,.02);white-space:nowrap;min-width:0}
.chip svg{width:14px;height:14px;flex:none;fill:var(--amber);color:var(--amber)}
/* v2: la lettura del codice a barre sull'etichetta */
.scan{position:absolute;left:10px;right:10px;height:2px;top:0;background:#FF3B30;box-shadow:0 0 10px 2px rgba(255,59,48,.7);opacity:0;pointer-events:none}
.label.lettura .scan{animation:scan 1.2s ease-in-out both}
@keyframes scan{0%{top:calc(100% - 56px);opacity:0}12%{opacity:1}55%{top:calc(100% - 12px)}88%{opacity:1}100%{top:calc(100% - 56px);opacity:0}}
.letto{position:absolute;right:16px;bottom:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#fff;background:var(--green);padding:3px 8px;border-radius:2px;box-shadow:0 0 0 3px #FBFBF7;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}   /* sopra il codice, in basso a destra, con un alone di carta */
.label.ok .letto{opacity:1;transform:none}

/* v3: la foto del reparto al posto della bilancia, sfumata nel grafite sui quattro lati */
.foto{position:relative;margin:-30px -40px -40px 0;aspect-ratio:1122/1402;max-height:760px;justify-self:end;width:100%}
.foto img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34%,#000 70%,transparent),linear-gradient(to bottom,transparent,#000 28%,#000 68%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 34%,#000 70%,transparent),linear-gradient(to bottom,transparent,#000 28%,#000 68%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.foto::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,transparent 40%,rgba(17,20,23,.7) 100%);pointer-events:none}
/* v3: la scena = foto + display vero nello schermo dell'indicatore + etichetta a richiamo dalla stampante */
.scena{position:relative;justify-self:end;width:100%;max-width:640px;transition:transform .4s ease;will-change:transform}
.scena .foto{margin:0;max-height:none;width:100%}
/* misurato sulla foto (1122×1402): schermo da (887,748) a (1015,760) sopra, (880,798)-(1008,810) sotto → 128×50 px, ruotato 5,4° */
.ind{position:absolute;left:79.05%;top:53.35%;width:11.45%;height:3.6%;transform:rotate(5.4deg);transform-origin:0 0;padding:1.5% 3%}
.ind svg{width:100%;height:100%;display:block}
.ind .seg{fill:rgba(40,20,0,.10)}                       /* LCD ambra: cifre SCURE su fondo acceso, come nella foto */
.ind .seg.on{fill:#241400;filter:none}
.lbl-call{position:relative;height:150px;margin-top:-4%;pointer-events:none}   /* SOTTO la foto, non sopra: l'immagine resta libera */
.lbl-call .label{left:auto;right:6%;top:0;bottom:auto;width:44%;transform:none;opacity:0;transition:opacity .6s ease,transform .6s ease;padding:10px 13px 9px;font-size:11px}
.lbl-call .label.out{opacity:1;transform:none}
.lbl-call .label:not(.out){transform:translateY(-10px)}
.lbl-call .lbl-big{font-size:28px}
.lbl-call .lbl-bar{height:36px}
.lbl-filo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .6s ease .2s}
.label.out ~ .lbl-filo{opacity:1}
/* strumento: bilancia + stampante */
.rig{position:relative;filter:drop-shadow(0 40px 50px rgba(0,0,0,.55));transition:transform .4s ease;will-change:transform}   /* v2: segue il mouse con una leggera inclinazione */
.scale{background:linear-gradient(180deg,#3B424B,#252B32);border:1px solid #4B545E;border-radius:12px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.scale-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#9AA3AB;padding:4px 6px 12px}
.scale-head .demo{border:1px solid #5A636D;padding:3px 8px;border-radius:3px;font-size:10px;color:#C3CAD1}
.scale-screen{background:#06080A;border-radius:7px;padding:20px 22px 16px;border:1px solid #000;box-shadow:inset 0 0 46px rgba(0,0,0,.95),0 0 0 1px #1A2026}
.scale-screen svg{width:100%;height:auto;display:block}
.seg{fill:rgba(255,176,50,.07)}
.seg.on{fill:#FFB43A;filter:drop-shadow(0 0 5px var(--amber-glow))}
.leds{display:flex;gap:22px;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#5F686F;align-items:center}
.led{display:flex;align-items:center;gap:7px;transition:color .3s}
.led i{width:8px;height:8px;border-radius:50%;background:#1A1F24;box-shadow:inset 0 0 2px #000;transition:background .3s,box-shadow .3s}
.led.on{color:#C9D1D8}
.led.on i{background:var(--led);box-shadow:0 0 9px var(--led)}
.led.amber.on i{background:var(--amber);box-shadow:0 0 9px var(--amber)}
.unit{margin-left:auto;font-size:15px;color:var(--amber);font-weight:600;letter-spacing:.06em}
.printer{margin:0 28px;background:linear-gradient(180deg,#23292F,#161A1F);border:1px solid #333B44;border-top:0;border-radius:0 0 10px 10px;height:24px;position:relative;z-index:2}
.printer::before{content:"";position:absolute;left:26px;right:26px;top:7px;height:3px;background:#04060A;border-radius:2px;box-shadow:0 0 0 1px #2C343C}
.label-slot{position:relative;margin:0 54px;height:196px;overflow:hidden;z-index:1}
.label{position:absolute;left:0;right:0;top:0;transform:translateY(-106%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);background:#FBFBF7;color:#14181C;border-radius:3px;box-shadow:0 14px 34px rgba(0,0,0,.5);padding:12px 16px 12px;font-family:var(--mono);font-size:12px;line-height:1.35;box-shadow:0 18px 30px -12px rgba(0,0,0,.75)}
.label.out{transform:translateY(0)}
.lbl-row{display:flex;justify-content:space-between;gap:12px}
.lbl-row b{font-weight:600}
.lbl-big{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;margin:6px 0 4px;letter-spacing:.02em}
.lbl-kg{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.lbl-bar{display:block;width:100%;height:44px;margin-top:8px}

/* ───────────── nastro ───────────── */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink-2)}
.ticker-track{display:flex;width:max-content;animation:tk 46s linear infinite}
.ticker-track span{padding:15px 0;font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:var(--muted);display:flex;align-items:center;white-space:nowrap}
.ticker-track span::after{content:"";width:64px;height:14px;margin:0 38px;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 3px,var(--line-2) 3px 6px,transparent 6px 8px,var(--line-2) 8px 9px,transparent 9px 13px)}
@keyframes tk{to{transform:translateX(-50%)}}

/* ───────────── cosa facciamo ───────────── */

/* ───────────── SI.SCO ───────────── */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--amber-glow)}50%{box-shadow:0 0 0 5px rgba(255,176,50,0)}}

/* ───────────── flusso (v4): la spina dorsale dell'impianto, scura, con i dati che corrono da una stazione all'altra ───────────── */
.flusso{position:relative;overflow:hidden;background:var(--ink-2);border-bottom:1px solid var(--line)}
.flusso::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.22;-webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 60%,#000 30%,transparent 75%);pointer-events:none}
.flusso .wrap{position:relative}
.fl-testa{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:64px}
.fl-testa .h2{margin-bottom:0}
.fl-testa .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;padding-bottom:6px}

/* la linea: passa dietro alle cinque icone; due punti ambra la percorrono senza fermarsi */
.fl-schema{position:relative}
.fl-linea{position:absolute;left:10%;right:10%;top:33px;height:2px;background:var(--line-2)}
.fl-linea i{position:absolute;top:-3px;left:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px 2px var(--amber-glow);animation:flPunto 5s linear infinite}
.fl-linea i:nth-child(2){animation-delay:2.5s}
@keyframes flPunto{from{left:0}to{left:100%}}

.fl-nodi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.fl-nodo{display:flex;flex-direction:column;align-items:center}
.fl-icona{position:relative;width:68px;height:68px;border-radius:50%;background:var(--ink);border:1px solid var(--line-2);display:grid;place-items:center;z-index:1;flex:none}
.fl-icona svg{width:34px;height:34px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fl-icona::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--amber);opacity:0;animation:flPulsa 2.5s ease-out infinite}   /* l'anello si accende quando passa il dato */
.fl-nodo:nth-child(2) .fl-icona::after{animation-delay:1.25s}
.fl-nodo:nth-child(4) .fl-icona::after{animation-delay:1.25s}
@keyframes flPulsa{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}

.fl-card{position:relative;flex:1;width:100%;margin-top:22px;background:var(--ink);border:1px solid var(--line);border-radius:6px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,border-color .3s}
.fl-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber);border-radius:6px 6px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.fl-nodo:hover .fl-card{transform:translateY(-4px);border-color:var(--line-2)}
.fl-nodo:hover .fl-card::before{transform:scaleX(1)}
.fl-card b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);font-weight:500}
.fl-card h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:.02em;margin:0;color:var(--txt)}
.fl-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.fl-tag{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:5px}   /* quattro sigle, due per riga, caselle uguali */
.fl-tag li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:5px 2px;border-radius:2px;text-align:center;white-space:nowrap;overflow:hidden;min-width:0}

@media (max-width:1100px){
  .fl-testa{grid-template-columns:1fr;gap:18px}
  .fl-nodi{gap:14px}
  .fl-card{padding:20px 14px 16px}
  .fl-card h3{font-size:21px}
}
@media (max-width:900px){
  .fl-linea{left:33px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .fl-linea i{left:-3px;top:0;margin:-4px 0 0;animation-name:flPuntoV}
  @keyframes flPuntoV{from{top:0}to{top:100%}}
  .fl-nodi{grid-template-columns:1fr;gap:18px}
  .fl-nodo{flex-direction:row;align-items:flex-start;gap:18px}
  .fl-card{margin-top:0}
}

/* ───────────── contatti (v4): testata, tre passi + recapiti a sinistra, modulo a destra ───────────── */
.contact{position:relative;overflow:hidden;background:var(--ink)}
.contact::before{content:"";position:absolute;right:-10%;bottom:-30%;width:60vw;height:60vw;max-width:900px;max-height:900px;background:radial-gradient(circle,rgba(246,166,35,.09),transparent 60%);pointer-events:none}
.contact .wrap{position:relative}
.ct-testa{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:56px}
.ct-testa .h2{margin-bottom:0}
.ct-testa .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;padding-bottom:6px}
.ct-corpo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* i tre passi */
.ct-passi{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ct-passi li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.ct-passi b{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber);font-weight:500;padding-top:4px}
.ct-passi span{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1;letter-spacing:.02em}
.ct-passi small{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:6px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* i recapiti: tabella a due colonne, etichetta mono ambra e valore */
.ct-recapiti{list-style:none;margin:28px 0 0;padding:0}
.ct-recapiti li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;align-items:baseline}
.ct-recapiti span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ct-recapiti b{font-weight:500}
.todo{color:var(--amber);font-style:italic;font-weight:500}

/* il modulo */
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:28px}
.ct-form .full{grid-column:1/-1}
.ct-form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.ct-form input,.ct-form textarea{width:100%;background:var(--ink);border:1px solid var(--line-2);color:var(--txt);padding:13px 14px;font:inherit;font-size:16px;border-radius:4px;transition:border-color .2s,box-shadow .2s}
.ct-form textarea{min-height:140px;resize:vertical}
.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(246,166,35,.18)}
.ct-invio{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.ct-invio p{margin:0;font-size:13px;color:var(--muted);flex:1;min-width:220px}
.ct-invio a{color:var(--txt)}

/* ───────────── piede (v4): marca, sezioni, note, riga finale ───────────── */
.foot{border-top:1px solid var(--line);padding:56px 0 28px;font-size:14px;color:var(--muted);background:var(--ink-2)}
.foot-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-marca{display:flex;gap:14px;align-items:flex-start}
.foot-marca svg{width:44px;height:44px;flex:none}
.foot-marca b{display:block;font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt);line-height:1;margin-bottom:8px}
.foot-marca span{display:block;font-size:13.5px;line-height:1.6}
.foot-nav{display:flex;flex-direction:column;gap:9px}
.foot-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.foot-nav a{color:var(--muted);text-decoration:none;transition:color .2s;width:max-content}
.foot-nav a:hover{color:var(--txt)}
.foot-piva{margin-top:6px}
.foot-piva i{font-style:italic}
.foot-riga{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:13px}
.foot-su{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.foot-su svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foot-su:hover{color:var(--txt)}

@media (max-width:1100px){
  .ct-testa,.ct-corpo{grid-template-columns:1fr;gap:28px}
  .foot-griglia{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ct-form{grid-template-columns:1fr;padding:20px}
  .ct-recapiti li{grid-template-columns:1fr;gap:4px}
  .foot-griglia{grid-template-columns:1fr;gap:28px}
}

/* ───────────── comparsa ───────────── */
.rv{transition:opacity .75s ease,transform .75s ease}
.rv-pre{opacity:0;transform:translateY(20px)}

/* ───────────── responsive ───────────── */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;gap:56px}
  .rig{max-width:560px}
  .scena{margin:0 auto;justify-self:center}
}
@media (max-width:760px){
  .sec{padding:80px 0}
  .wrap{padding:0 20px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:68px;background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 20px 16px}
  .nav.open .nav-links{display:flex}
  .nav-links a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:inline-block}
  .lang{display:none}
  .hero{padding:56px 0 64px}
  .logo-word{font-size:24px}
  .logo-word small{display:none}
  .cred>div{padding:0 12px}
  .cred b{font-size:36px}
  .cred span{font-size:9px}
  .campi{font-size:16px}
  .campi li{grid-template-columns:1fr;gap:8px}
  .hero .hero-cta{grid-template-columns:1fr}
  .piatt{grid-template-columns:repeat(5,1fr);gap:5px}
  .chip{font-size:0;gap:0;height:38px}
  .chip svg{width:18px;height:18px}
  .label-slot{margin:0 28px}
  .printer{margin:0 14px}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.cell.sel,.fl-linea i,.fl-icona::after,.rv,.h1 .riga>span,.hero-sweep,.scan,.vet-quadro img.on,.vet-provini li.on i{animation:none!important;transition:none!important}
  .label,.rig{transition:none}
}

/* ───────────── pagina di errore ───────────── */
.errore-codice{font-family:var(--mono);font-size:13px;color:var(--muted);margin:24px 0 0}

/* ───────────── recapiti veri (05/09): righe della marca nel piede e link cliccabili ───────────── */
.foot-sede{margin-top:4px;color:var(--muted)}
.foot-marca a,.ct-recapiti a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--line-2)}
.foot-marca a:hover,.ct-recapiti a:hover{border-color:var(--amber)}

/* ───────────── pagine legali (05/09): privacy, cookie, note legali — veste «documento», leggera ─────────────
   Roberto: «un documento che non legge mai nessuno»: caratteri piccoli, niente grassetti pesanti, testo attenuato. */
.doc{position:relative;padding:72px 0 96px;background:var(--ink)}
.doc::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.14;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 360px);mask-image:linear-gradient(to bottom,#000,transparent 360px);pointer-events:none}
.doc .wrap{position:relative}
.doc-testa{max-width:72ch;margin-bottom:44px}
.doc-testa .h2{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:.01em;margin:12px 0 14px}
.doc-testa .lead{font-size:15.5px;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.doc-aggiornato{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.doc-aggiornato b{color:#C9D0D6;font-weight:500}
.doc-corpo{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}

/* l'indice a sinistra, fermo mentre si scorre, e la scheda del titolare sotto */
.doc-indice{position:sticky;top:92px}
.doc-indice-t,.doc-scheda-t{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.doc-indice ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doc-indice li a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:12.5px;line-height:1.35;transition:color .2s}
.doc-indice li a b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--amber);font-weight:500;padding-top:2px}
.doc-indice li a:hover{color:var(--txt)}
.doc-scheda{margin-top:24px;padding:16px 18px;background:var(--ink-2);border:1px solid var(--line);border-radius:6px;font-size:12.5px;line-height:1.55}
.doc-scheda b{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.03em;line-height:1;margin-bottom:8px;color:#C9D0D6}
.doc-scheda span{display:block;color:var(--muted)}
.doc-scheda a{display:inline-block;margin-top:8px;color:#C9D0D6;text-decoration:none;border-bottom:1px solid var(--line-2)}
.doc-scheda a:hover{border-color:var(--amber)}

/* il testo: sezioni numerate, paragrafi giustificati, elenchi col rombo ambra */
.doc-testo{max-width:74ch}
.doc-testo section{padding:22px 0 26px;border-top:1px solid var(--line)}
.doc-testo section:first-child{border-top:0;padding-top:0}
.doc-testo h2{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:19px;line-height:1;letter-spacing:.04em;color:#C9D0D6;scroll-margin-top:92px}
.doc-testo h2 b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--amber);font-weight:500}
.doc-testo p{margin:0 0 10px;font-size:14px;line-height:1.65;color:#A9B2BA;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.doc-testo ul{list-style:none;margin:0 0 10px;padding:0}
.doc-testo li{position:relative;padding:4px 0 4px 20px;font-size:14px;line-height:1.6;color:#A9B2BA;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.doc-testo li::before{content:"";position:absolute;left:3px;top:13px;width:5px;height:5px;background:var(--amber);transform:rotate(45deg)}
.doc-coda{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.doc-coda .btn{height:46px;font-size:14px;font-weight:500}

@media (max-width:1100px){
  .doc-corpo{grid-template-columns:1fr;gap:32px}
  .doc-indice{position:static}
  .doc-indice ol{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
}
@media (max-width:640px){
  .doc{padding:52px 0 72px}
  .doc-indice ol{grid-template-columns:1fr}
  .doc-testo h2{font-size:17px}
}

/* ───────────── modulo che spedisce (05/09): conferma, errore, trappola per i bot ───────────── */
.ct-trappola{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.ct-errore{margin:0;padding:12px 14px;border:1px solid var(--amber);border-radius:4px;background:rgba(246,166,35,.08);color:var(--txt);font-size:14.5px;line-height:1.5}
.ct-esito{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:center;min-height:420px}
.ct-esito svg{width:56px;height:56px;stroke:var(--led);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ct-esito h3{margin:6px 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:.02em}
.ct-esito p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:44ch}
.ct-esito-rec a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--line-2)}
.ct-esito-rec a:hover{border-color:var(--amber)}

/* ───────────── scheda SI.SCO (05/09): la pagina del prodotto ───────────── */
/* la sotto-barra: le sezioni della scheda, fissa sotto la barra principale, con la voce accesa mentre si scorre */
.sk-sub{position:sticky;top:68px;z-index:40;background:rgba(17,20,23,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sk-sub .wrap{display:flex;align-items:center;gap:0;height:46px;overflow-x:auto;scrollbar-width:none}
.sk-sub .wrap::-webkit-scrollbar{display:none}
.sk-sub b{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-right:28px;white-space:nowrap;font-weight:500}
.sk-sub a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:0 14px;height:46px;display:flex;align-items:center;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.sk-sub a:hover{color:var(--txt)}
.sk-sub a.on{color:var(--txt);border-color:var(--amber)}

/* apertura: titolo a sinistra, la scena grande col telefono davanti a destra */
.sk-hero{position:relative;overflow:hidden;padding:80px 0 88px;border-bottom:1px solid var(--line)}
.sk-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.26;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}
.sk-hero::after{content:"";position:absolute;right:-10%;top:-30%;width:60vw;height:60vw;max-width:900px;max-height:900px;background:radial-gradient(circle,rgba(246,166,35,.13),transparent 60%);pointer-events:none}
.sk-hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.sk-hero .h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,5.2vw,72px);line-height:.94;letter-spacing:0;margin:16px 0 6px}
.sk-hero .h1 small{display:block;font-size:.42em;font-weight:600;color:var(--muted);letter-spacing:.06em;margin-top:10px}
.sk-hero .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;margin-top:22px}
.sk-hero .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.sk-hero .hero-cta .btn{justify-content:center;width:100%}
.sk-nota{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sk-nota a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--line-2)}
.sk-nota a:hover{border-color:var(--amber)}
.sk-numeri{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.sk-numeri>div{padding:0 18px;border-left:1px solid var(--line);min-width:0}
.sk-numeri>div:first-child{border-left:0;padding-left:0}
.sk-numeri b{display:block;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.sk-numeri span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.55}
.sk-copertina{position:relative;perspective:1600px}
.sk-cop-grande{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 120px rgba(246,166,35,.10);transform:rotateY(-5deg) rotateX(2deg);transition:transform .5s ease;will-change:transform}
.sk-cop-grande img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.sk-cop-tel{position:absolute;right:-6%;bottom:-10%;width:34%;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 60px rgba(0,0,0,.65);transform:rotate(-3deg) translateZ(80px);transition:transform .5s ease;will-change:transform}
.sk-cop-tel img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* le quattro gestioni: tessere 2×2 */
.sk-gest{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.sk-gest article{position:relative;background:var(--ink);padding:34px 32px 30px;display:flex;flex-direction:column;gap:12px;transition:background .25s}
.sk-gest article::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.sk-gest article:hover{background:var(--ink-2)}
.sk-gest article:hover::before{transform:scaleX(1)}
.sk-gest .n{position:absolute;top:24px;right:28px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber)}
.sk-gest h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1;letter-spacing:.02em;margin:0}
.sk-gest .unita{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.sk-gest p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.sk-gest ul{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.sk-gest li{position:relative;padding:5px 0 5px 18px;font-size:14.5px;color:#C9D0D6}
.sk-gest li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;background:var(--amber);transform:rotate(45deg)}

/* i moduli: la scena a sinistra RESTA FERMA e cambia mentre a destra scorrono i testi */
.sk-moduli{position:relative}
.sk-mod-griglia{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-top:48px}
.sk-mod-scena{position:sticky;top:132px}
.sk-mod-quadro{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:#0B0E11;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 120px rgba(246,166,35,.08)}
.sk-mod-quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .8s ease,transform 1.2s ease}
.sk-mod-quadro img.on{opacity:1;transform:scale(1)}
.sk-mod-quadro .attesa{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);background:rgba(11,14,17,.8);padding:5px 9px;border-radius:3px;border:1px solid rgba(246,166,35,.4);opacity:0;transition:opacity .4s}
.sk-mod-quadro .attesa.on{opacity:1}
.sk-mod-did{display:flex;align-items:baseline;gap:14px;margin-top:16px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;letter-spacing:.02em;line-height:1}
.sk-mod-did b{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--amber);font-weight:500}
.sk-mod-lista{display:flex;flex-direction:column;gap:0}
.sk-mod{padding:34px 0 34px 28px;border-left:2px solid var(--line);position:relative;transition:border-color .3s}
.sk-mod::before{content:"";position:absolute;left:-7px;top:44px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--line-2);transition:background .3s,border-color .3s}
.sk-mod.on{border-color:var(--amber)}
.sk-mod.on::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px var(--amber-glow)}
.sk-mod b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);font-weight:500}
.sk-mod h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;letter-spacing:.02em;margin:6px 0 10px;color:var(--muted);transition:color .3s}
.sk-mod.on h3{color:var(--txt)}
.sk-mod p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.sk-mod ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sk-mod li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:5px 2px;border-radius:2px;text-align:center;white-space:nowrap;overflow:hidden;min-width:0}
.sk-mod .sk-mob{display:none}

/* in tasca: il telefono grande e i numeri */
.sk-tasca .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.sk-tel-scena{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.6);transform:rotateY(6deg);transition:transform .5s ease}
.sk-tel-scena img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.sk-tasca .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.sk-tasca .campi{margin-top:26px}
.sk-cont{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.sk-cont>div{padding:0 18px;border-left:1px solid var(--line)}
.sk-cont>div:first-child{border-left:0;padding-left:0}
.sk-cont b{display:block;font-family:var(--display);font-weight:800;font-size:48px;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.sk-cont span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.55}

/* scheda tecnica e messa in opera */
.sk-spec{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.sk-spec li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.sk-spec li span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);padding-top:3px}
.sk-passi{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sk-passi li{background:var(--ink);padding:30px 28px 28px}
.sk-passi b{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber);font-weight:500}
.sk-passi h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:.02em;margin:8px 0 10px}
.sk-passi p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* le brochure da scaricare: due tessere con la copertina e le cinque lingue */
.sk-broc{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.sk-broc article{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:24px;transition:border-color .3s,transform .3s}
.sk-broc article:hover{border-color:var(--line-2);transform:translateY(-3px)}
.sk-broc img{display:block;width:100%;aspect-ratio:210/297;object-fit:cover;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.6);border:1px solid var(--line-2)}
.sk-broc h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;letter-spacing:.02em;margin:0 0 6px}
.sk-broc p{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.sk-lingue{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sk-lingue a{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:1px solid var(--line-2);border-radius:3px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--txt);text-decoration:none;transition:border-color .2s,background .2s}
.sk-lingue a:hover{border-color:var(--amber);background:rgba(246,166,35,.08)}
.sk-lingue a svg{width:13px;height:13px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-broc-nota{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media (max-width:1100px){
  .sk-hero .wrap{grid-template-columns:1fr;gap:44px}
  .sk-copertina{max-width:640px;margin:0 auto}
  .sk-mod-griglia{grid-template-columns:1fr;gap:0}
  .sk-mod-scena{display:none}
  .sk-mod .sk-mob{display:block;margin:0 0 16px;border-radius:8px;overflow:hidden;border:1px solid var(--line-2)}
  .sk-mod .sk-mob img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
  .sk-tasca .wrap{grid-template-columns:1fr;gap:36px}
  .sk-spec{grid-template-columns:1fr}
  .sk-passi{grid-template-columns:1fr}
  .sk-broc{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sk-sub{top:68px}
  .sk-hero{padding:52px 0 60px}
  .sk-hero .hero-cta{grid-template-columns:1fr}
  .sk-numeri{grid-template-columns:1fr 1fr;gap:18px 0}
  .sk-numeri>div:nth-child(3){border-left:0;padding-left:0}
  .sk-gest{grid-template-columns:1fr}
  .sk-mod{padding-left:18px}
  .sk-mod ul{grid-template-columns:1fr 1fr}
  .sk-cont{grid-template-columns:1fr 1fr;gap:18px 0}
  .sk-cont>div:nth-child(3){border-left:0;padding-left:0}
  .sk-spec li{grid-template-columns:1fr;gap:4px}
  .sk-broc article{grid-template-columns:1fr}
  .sk-broc img{max-width:150px}
  .sk-lingue{grid-template-columns:repeat(5,1fr);gap:4px}
}

/* moduli, correzioni (05/09): la scena resta ferma davvero (overflow:hidden impediva lo sticky: si usa clip-path)
   e sotto la scena tre «finestre collegate» che cambiano col modulo */
.sk-moduli{overflow:visible;clip-path:inset(0)}
.sk-mod-extra{margin-top:14px}
.sk-mod-extra-t{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sk-mod-extra>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sk-mod-extra img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line);background:var(--ink-2);opacity:.85;transition:opacity .3s,transform .3s}
.sk-mod-extra img:hover{opacity:1;transform:translateY(-2px)}
.sk-mod-extra img:not([src]){visibility:hidden}

/* finestre piatte nel quadro (05/09): INTERE, come uno schermo su fondo scuro, non ritagliate a forza nel 3:2 */
.sk-mod-quadro .sk-piatta{position:absolute;inset:0;display:grid;place-items:center;padding:7% 8%;opacity:0;transition:opacity .8s ease;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(246,166,35,.10),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;background-color:#0B0E11}
.sk-mod-quadro .sk-piatta:has(img.on){opacity:1}
.sk-mod-quadro .sk-piatta img{position:relative;inset:auto;width:100%;height:auto;max-height:100%;object-fit:contain;opacity:1;transform:none;border-radius:6px;border:1px solid #3A434C;box-shadow:0 0 0 6px #1A1F25,0 0 0 7px #2B333B,0 30px 60px rgba(0,0,0,.65)}
.sk-mod-quadro .attesa{left:auto;right:14px;top:14px;bottom:auto}
.sk-mod-extra>div{grid-template-columns:repeat(3,1fr)}
.sk-mod-extra img{aspect-ratio:2.2/1;object-position:center top;border-color:var(--line-2);background:#0B0E11}

/* in tasca (05/09): la galleria dei telefoni in 3D — quello al centro davanti, gli altri girano dietro */
.sk-tasca .wrap{display:block}
.sk-flow{position:relative;margin-top:44px;outline:none;border-radius:12px}
.sk-flow:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.sk-flow-scena{position:relative;height:500px;perspective:1500px;transform-style:preserve-3d;overflow:visible}
.sk-flow figure{position:absolute;left:50%;top:10px;margin:0 0 0 -132px;width:264px;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.65);cursor:pointer;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s;will-change:transform;background:#0B0E11}
.sk-flow figure img{display:block;width:100%;height:470px;object-fit:cover;object-position:center top}
.sk-flow figure.c{cursor:default;box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 90px rgba(246,166,35,.14)}
.sk-flow-piede{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:18px;margin-top:22px}
.sk-flow-did{display:flex;align-items:baseline;justify-content:center;gap:14px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:.02em;line-height:1;text-align:center}
.sk-flow-did b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--amber);font-weight:500;font-variant-numeric:tabular-nums}
.sk-flow-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:var(--ink-2);color:var(--txt);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s}
.sk-flow-btn:hover{border-color:var(--amber);background:rgba(246,166,35,.08)}
.sk-flow-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-tasca-sotto{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:52px}
.sk-tasca-sotto .campi{margin:0}
.sk-tasca-sotto .sk-cont{margin-top:0;padding-top:0;border-top:0;grid-template-columns:1fr 1fr;gap:22px 0}
.sk-tasca-sotto .sk-cont>div:nth-child(3){border-left:0;padding-left:0}
@media (max-width:900px){.sk-flow-scena{height:420px}.sk-flow figure{width:210px;margin-left:-105px}.sk-flow figure img{height:390px}.sk-tasca-sotto{grid-template-columns:1fr;gap:32px}}

/* la voce della barra accesa sulla pagina corrente (la scheda SI.SCO) */
.nav-links a.on{color:var(--txt);border-color:var(--amber)}

/* ───────────── lingue nel cassetto del telefono (06/09): sul PC le sigle stanno a destra, sotto i 760px
   spariscono da lì e diventano l'ultima riga del menu aperto ───────────── */
.nav-lingue{display:none}
@media (max-width:760px){
  .nav-lingue{display:block;padding:14px 0 6px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--muted)}
  .nav-lingue b{color:var(--txt);font-weight:600}
  .nav-lingue a{display:inline;padding:0;border:0;color:var(--muted)}
  .nav-lingue a:hover{color:var(--txt)}
}

/* ───────────── barra più stretta (06/09): con «Negozio» e il carrello le voci andavano a capo ─────────────
   meno spazio fra le voci, sigle su una riga, e il cassetto MENU già sotto i 1100px (non solo sotto i 760) */
.nav-links{gap:22px;font-size:14.5px;white-space:nowrap}
.nav-right{gap:14px}
.lang{white-space:nowrap;font-size:11px}
.logo-word{font-size:24px}
@media (max-width:1100px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:68px;background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 20px 16px;white-space:normal}
  .nav.open .nav-links{display:flex}
  .nav-links a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:inline-block}
  .lang{display:none}
  .nav-lingue{display:block;padding:14px 0 6px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--muted)}
  .nav-lingue b{color:var(--txt);font-weight:600}
  .nav-lingue a{display:inline;padding:0;border:0;color:var(--muted)}
}

/* ───────────── negozio (06/09): catalogo, scheda prodotto, carrello ───────────── */
.ng-testa{position:relative;overflow:hidden;padding:64px 0 40px;border-bottom:1px solid var(--line)}
.ng-testa::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.2;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%);mask-image:linear-gradient(to bottom,#000,transparent 90%);pointer-events:none}
.ng-testa .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
.ng-testa .h2{margin-bottom:0}
.ng-testa .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto;padding-bottom:6px}

/* la barra del catalogo: categorie a sinistra, interruttore IVA e carrello a destra; resta attaccata sotto la barra */
.ng-barra{position:sticky;top:68px;z-index:40;background:rgba(17,20,23,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ng-barra .wrap{display:flex;align-items:center;gap:18px;height:54px}
.ng-cat{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.ng-cat::-webkit-scrollbar{display:none}
.ng-cat button{background:none;cursor:pointer;font-weight:500;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:7px 12px;border:1px solid transparent;border-radius:3px;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.ng-cat button:hover{color:var(--txt)}
.ng-cat button.on{color:var(--txt);border-color:var(--line-2);background:var(--ink-2)}
.ng-iva{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;flex:none}
.ng-iva button{background:transparent;border:0;color:var(--muted);padding:8px 11px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.ng-iva button.on{background:var(--amber);color:#1A1205;font-weight:600}
.ng-carrello-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:3px;background:var(--ink-2);color:var(--txt);cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;flex:none}
.ng-carrello-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ng-carrello-btn b{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--amber);color:#1A1205;font-family:var(--mono);font-size:11px;display:grid;place-items:center;font-weight:600}
.ng-carrello-btn b:empty,.ng-carrello-btn b[data-n="0"]{display:none}

/* la griglia dei prodotti: tessere uguali, disegno in alto, prezzo grande, tasto in fondo */
.ng-griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:1px 0 0 1px;margin-top:40px}   /* le celle vuote restano vuote: il bordo ce l'ha ogni tessera (06/09) */
.ng-prod{position:relative;background:var(--ink);display:flex;flex-direction:column;transition:background .25s;border:1px solid var(--line);margin:-1px 0 0 -1px}
.ng-prod::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:1}
.ng-prod:hover{background:var(--ink-2)}
.ng-prod:hover::before{transform:scaleX(1)}
.ng-prod .cat{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);z-index:1}
.ng-fig{display:block;aspect-ratio:4/3;background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(246,166,35,.10),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px;background-color:#0E1115;display:grid;place-items:center;border-bottom:1px solid var(--line);text-decoration:none}
.ng-fig svg{width:46%;height:46%;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 18px rgba(246,166,35,.25));transition:transform .4s ease}
.ng-prod:hover .ng-fig svg{transform:translateY(-4px) scale(1.04)}
.ng-fig img{width:100%;height:100%;object-fit:cover}
.ng-corpo{padding:18px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ng-corpo h3{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1;letter-spacing:.02em}
.ng-corpo h3 a{color:var(--txt);text-decoration:none}
.ng-corpo p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ng-var{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.ng-var span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:3px 7px;border-radius:2px}
.ng-piede{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ng-prezzo{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.ng-prezzo small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:5px}
.ng-add{height:40px;padding:0 14px;border-radius:3px;border:1px solid var(--amber);background:transparent;color:var(--amber);font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s;white-space:nowrap}
.ng-add:hover{background:var(--amber);color:#1A1205}
.ng-add svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ng-add.ok{background:var(--green);border-color:var(--green);color:#fff}
.ng-disp{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--led);display:flex;align-items:center;gap:6px}
.ng-disp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.ng-disp.ordine{color:var(--amber)}
.ng-disp.ordine::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* il cassetto del carrello: scivola da destra */
.ng-velo{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90}
.ng-cass{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--ink-2);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:91;display:flex;flex-direction:column}
body.ng-aperto .ng-velo{opacity:1;pointer-events:auto}
body.ng-aperto .ng-cass{transform:none}
.ng-cass-testa{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.ng-cass-testa h3{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;letter-spacing:.02em}
.ng-cass-testa button{background:none;border:1px solid var(--line-2);color:var(--txt);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1}
.ng-righe{flex:1;overflow:auto;padding:8px 22px}
.ng-riga{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ng-riga .ng-fig{aspect-ratio:1;border:1px solid var(--line);border-radius:4px;border-bottom:1px solid var(--line)}
.ng-riga .ng-fig svg{width:60%;height:60%;filter:none}
.ng-riga b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;line-height:1.05;letter-spacing:.02em}
.ng-riga small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ng-qta{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:3px;margin-top:8px}
.ng-qta button{width:28px;height:28px;background:none;border:0;color:var(--txt);cursor:pointer;font-size:15px}
.ng-qta span{min-width:28px;text-align:center;font-family:var(--mono);font-size:12px}
.ng-riga .tot{font-family:var(--display);font-weight:800;font-size:19px;text-align:right;font-variant-numeric:tabular-nums}
.ng-riga .via{display:block;margin-top:6px;background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:0}
.ng-riga .via:hover{color:#FF6B5E}
.ng-vuoto{padding:40px 0;text-align:center;color:var(--muted);font-size:14.5px}
.ng-cass-piede{padding:18px 22px 22px;border-top:1px solid var(--line);background:var(--ink)}
.ng-somme{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.ng-somme div{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.ng-somme .tot{color:var(--txt);font-family:var(--display);font-weight:800;font-size:24px;padding-top:8px;margin-top:4px;border-top:1px solid var(--line)}
.ng-cass-piede .btn{width:100%;justify-content:center;margin-top:14px}
.ng-nota{margin:10px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}

/* la scheda prodotto */
.ng-scheda{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;padding:48px 0 0}
.ng-galleria .ng-fig{aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px;border-bottom:1px solid var(--line)}
.ng-galleria .ng-fig svg{width:44%;height:44%}
.ng-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.ng-mini .ng-fig{aspect-ratio:4/3;border:1px solid var(--line);border-radius:6px;opacity:.55;cursor:pointer}
.ng-mini .ng-fig.on,.ng-mini .ng-fig:hover{opacity:1;border-color:var(--amber)}
.ng-mini .ng-fig svg{width:50%;height:50%;filter:none}
.ng-briciole{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.ng-briciole a{color:var(--muted);text-decoration:none}
.ng-briciole a:hover{color:var(--txt)}
.ng-info h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,3.6vw,48px);line-height:.96;letter-spacing:.01em;margin:0 0 10px}
.ng-info .cod{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ng-info .lead{font-size:16.5px;margin-top:18px;text-align:justify;hyphens:auto;-webkit-hyphens:auto;max-width:none}
.ng-scelta{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.ng-scelta .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.ng-opz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ng-opz button{height:40px;border:1px solid var(--line-2);border-radius:3px;background:transparent;color:var(--txt);font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .2s,background .2s}
.ng-opz button.on{border-color:var(--amber);background:rgba(246,166,35,.1)}
.ng-compra{margin-top:24px;padding:22px;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.ng-compra .ng-prezzo{font-size:38px}
.ng-compra .ng-qta{margin:0 0 10px}
.ng-compra .btn{white-space:nowrap}
.ng-compra .ng-disp{margin-top:8px}
.ng-spec{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.ng-spec li{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ng-spec li span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);padding-top:2px}
.ng-fiducia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.ng-fiducia div{background:var(--ink);padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.ng-fiducia svg{width:22px;height:22px;flex:none;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ng-fiducia b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.03em;line-height:1;margin-bottom:5px}
.ng-fiducia span{font-size:12.5px;color:var(--muted);line-height:1.45}
.ng-correlati{margin-top:64px}
.ng-correlati .ng-griglia{margin-top:22px}

/* la pagina del carrello: righe a sinistra, riepilogo e dati per l'ordine a destra */
.ng-cart{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;padding-top:40px}
.ng-cart .ng-riga{grid-template-columns:72px 1fr auto;padding:18px 0}
.ng-cart .ng-riga b{font-size:19px}
.ng-riep{position:sticky;top:140px;display:grid;gap:18px}
.ng-box{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:22px}
.ng-box h3{margin:0 0 14px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:.02em}
.ng-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;margin-bottom:16px}
.ng-seg button{height:40px;background:transparent;border:0;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer}
.ng-seg button.on{background:var(--amber);color:#1A1205;font-weight:600}
.ng-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ng-form .full{grid-column:1/-1}
.ng-form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ng-form input,.ng-form select{width:100%;background:var(--ink);border:1px solid var(--line-2);color:var(--txt);padding:11px 12px;font:inherit;font-size:15px;border-radius:4px}
.ng-form input:focus,.ng-form select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(246,166,35,.18)}
.ng-form .azienda{display:none}
.ng-form.is-azienda .azienda{display:block}
.ng-sped{list-style:none;margin:0;padding:0}
.ng-sped li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ng-sped li b{color:var(--txt);font-weight:500}
.ng-paga{width:100%;justify-content:center;opacity:.55;cursor:not-allowed}
.ng-avviso{margin:12px 0 0;padding:12px 14px;border:1px dashed var(--line-2);border-radius:4px;font-size:13px;line-height:1.5;color:var(--muted)}
.ng-avviso b{color:var(--amber);font-weight:600}

@media (max-width:1100px){
  .ng-testa .wrap{grid-template-columns:1fr;gap:18px}
  .ng-griglia{grid-template-columns:repeat(3,1fr)}
  .ng-scheda{grid-template-columns:1fr;gap:32px}
  .ng-cart{grid-template-columns:1fr}
  .ng-riep{position:static}
}
@media (max-width:760px){
  .ng-barra{top:68px}
  .ng-barra .wrap{gap:10px}
  .ng-iva button{padding:8px 8px}
  .ng-griglia{grid-template-columns:repeat(2,1fr)}
  .ng-corpo h3{font-size:18px}
  .ng-prezzo{font-size:24px}
  .ng-piede{flex-direction:column;align-items:stretch}
  .ng-add{justify-content:center}
  .ng-opz{grid-template-columns:1fr 1fr}
  .ng-compra{grid-template-columns:1fr}
  .ng-fiducia{grid-template-columns:1fr}
  .ng-form{grid-template-columns:1fr}
}
@media (max-width:480px){.ng-griglia{grid-template-columns:1fr}}

/* il tasto del carrello nella barra */
.nav-right .ng-carrello-btn{margin-right:4px;height:36px;padding:0 10px}
/* ══ GESTIONE (pannello riservato): consolle scura con la colonna dei menù a sinistra; prefisso gs- ══ */
.gs{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:var(--ink)}
.gs-lato{background:var(--ink-2);border-right:1px solid var(--line);padding:22px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;box-sizing:border-box}
.gs-marchio{padding:0 22px 20px;border-bottom:1px solid var(--line);margin-bottom:14px}
.gs-marchio b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;letter-spacing:.01em;display:block;line-height:1}
.gs-marchio small{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);display:block;margin-top:6px}
.gs-menu{list-style:none;margin:0;padding:0 12px}
.gs-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:4px;color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;border:1px solid transparent}
.gs-menu a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gs-menu a:hover{color:var(--txt)}
.gs-menu a.on{color:var(--txt);background:var(--ink-3);border-color:var(--line-2)}
.gs-menu a b{margin-left:auto;font-family:var(--mono);font-size:10.5px;background:var(--amber);color:#1A1205;border-radius:9px;padding:1px 7px;font-weight:600}
.gs-lato .fine{margin-top:auto;padding:14px 22px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.gs-lato .fine a{color:var(--txt);text-decoration:none;display:block;margin-top:4px}
.gs-corpo{padding:28px 36px 60px;min-width:0}
.gs-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.gs-testa h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:40px;line-height:1;margin:6px 0 0}
.gs-testa .azioni{display:flex;gap:10px;align-items:center}
.gs-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:4px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--txt);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.gs-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-btn:hover{border-color:var(--txt)}
.gs-btn.amber{background:var(--amber);border-color:var(--amber);color:#1A1205;font-weight:600}
.gs-btn.amber:hover{background:var(--amber-2)}
.gs-btn.rosso{color:#FF7A6B;border-color:rgba(255,122,107,.4)}
.gs-cerca{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--ink-2);min-width:280px;box-sizing:border-box}
.gs-cerca svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.gs-cerca input{background:none;border:0;color:var(--txt);font:inherit;font-size:14px;flex:1;outline:none}
.gs-filtri{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.gs-filtri button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid transparent;border-radius:3px;padding:7px 12px;cursor:pointer}
.gs-filtri button.on{color:var(--txt);border-color:var(--line-2);background:var(--ink-2)}
.gs-tab{width:100%;border-collapse:separate;border-spacing:0;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gs-tab th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:500;background:var(--ink-3)}
.gs-tab td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
.gs-tab tr:last-child td{border-bottom:0}
.gs-tab tbody tr:hover td{background:rgba(255,255,255,.02)}
.gs-tab .num{font-family:var(--mono);font-size:13.5px;text-align:right;white-space:nowrap}
.gs-tab .cod{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.gs-tab a{color:var(--txt);text-decoration:none;font-weight:500}
.gs-tab a:hover{color:var(--amber)}
.gs-mini{width:44px;height:44px;border-radius:4px;background:var(--ink);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.gs-mini svg{width:55%;height:55%;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gs-prod{display:flex;align-items:center;gap:12px}
.gs-prod small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.gs-stato{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gs-stato::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.gs-stato.ok{color:var(--led)}.gs-stato.ok::before{background:var(--led);box-shadow:0 0 8px rgba(63,213,126,.6)}
.gs-stato.giallo{color:var(--amber)}.gs-stato.giallo::before{background:var(--amber);box-shadow:0 0 8px rgba(246,166,35,.6)}
.gs-stato.rosso{color:#FF7A6B}.gs-stato.rosso::before{background:#FF7A6B}
.gs-stato.blu{color:#6FB5FF}.gs-stato.blu::before{background:#6FB5FF}
.gs-sw{position:relative;width:38px;height:22px;border-radius:11px;background:var(--line-2);display:inline-block;vertical-align:middle;cursor:pointer;transition:background .2s}
.gs-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--txt);transition:transform .2s}
.gs-sw.on{background:var(--led)}.gs-sw.on::after{transform:translateX(16px);background:#0B2A18}
.gs-pie{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
/* la scheda: due colonne, i riquadri */
.gs-due{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.gs-box{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:22px;margin-bottom:22px}
.gs-box h3{margin:0 0 16px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;letter-spacing:.02em;display:flex;align-items:center;gap:12px}
.gs-box h3 small{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:.05em}
.gs-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gs-form .full{grid-column:1/-1}
.gs-form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gs-form input,.gs-form select,.gs-form textarea{width:100%;background:var(--ink);border:1px solid var(--line-2);color:var(--txt);padding:10px 12px;font:inherit;font-size:14.5px;border-radius:3px;box-sizing:border-box}
.gs-form textarea{min-height:110px;resize:vertical;line-height:1.5}
.gs-form input:focus,.gs-form select:focus,.gs-form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(246,166,35,.18)}
.gs-form .mono{font-family:var(--mono);font-size:13.5px}
.gs-form .euro{position:relative}.gs-form .euro::after{content:"€";position:absolute;right:12px;bottom:11px;color:var(--muted);font-family:var(--mono)}
.gs-lingue{display:flex;gap:2px;margin:0 0 -1px;padding-left:4px}
.gs-lingue button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:6px 12px;background:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;color:var(--muted);cursor:pointer}
.gs-lingue button.on{color:var(--txt);border-color:var(--line-2);background:var(--ink-3)}
.gs-lingue button i{font-style:normal;color:var(--amber);margin-left:5px}
.gs-lingua-riq{border:1px solid var(--line-2);border-radius:0 6px 6px 6px;padding:16px;background:var(--ink-3)}
.gs-lingua-riq .gs-form input,.gs-lingua-riq .gs-form textarea{background:var(--ink-2)}
.gs-foto{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gs-foto figure{margin:0;position:relative;aspect-ratio:1;border:1px solid var(--line-2);border-radius:6px;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.gs-foto figure svg{width:44%;height:44%;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gs-foto figure.prima{border-color:var(--amber);box-shadow:0 0 0 3px rgba(246,166,35,.18)}
.gs-foto figure .tag{position:absolute;left:8px;top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--amber);color:#1A1205;padding:2px 7px;border-radius:2px;font-weight:600}
.gs-foto figure .via{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:rgba(17,20,23,.85);border:1px solid var(--line-2);color:var(--txt);display:grid;place-items:center;font-size:14px;line-height:1;cursor:pointer}
.gs-foto figure .nome{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;font-family:var(--mono);font-size:10px;color:var(--muted);background:linear-gradient(transparent,rgba(17,20,23,.9))}
.gs-foto .carica{aspect-ratio:1;border:1px dashed var(--line-2);border-radius:6px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12.5px;padding:10px;cursor:pointer;background:none;font-family:inherit;line-height:1.4}
.gs-foto .carica:hover{border-color:var(--amber);color:var(--txt)}
.gs-foto .carica svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;display:block;margin-left:auto;margin-right:auto}
.gs-nota{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.gs-righe{width:100%;border-collapse:collapse}
.gs-righe th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 8px 8px 0;font-weight:500}
.gs-righe td{padding:0 8px 8px 0;vertical-align:middle}
.gs-righe input,.gs-righe select{width:100%;background:var(--ink);border:1px solid var(--line-2);color:var(--txt);padding:8px 10px;font:inherit;font-size:14px;border-radius:3px;box-sizing:border-box}
.gs-righe .via{width:30px;height:30px;border-radius:50%;background:none;border:1px solid var(--line-2);color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.gs-righe .aggiungi{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);background:none;border:0;cursor:pointer;padding:6px 0}
.gs-corr{display:flex;flex-wrap:wrap;gap:6px}
.gs-corr span{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border:1px solid var(--line-2);border-radius:20px;font-size:13px;background:var(--ink)}
.gs-corr span b{width:18px;height:18px;border-radius:50%;background:var(--ink-3);display:grid;place-items:center;font-size:11px;color:var(--muted);cursor:pointer;font-weight:400}
.gs-corr .piu{border-style:dashed;color:var(--muted);cursor:pointer}
.gs-pubb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:6px;background:var(--ink)}
.gs-pubb b{display:block;font-size:14.5px}.gs-pubb small{color:var(--muted);font-size:12.5px}
.gs-fondo{position:sticky;bottom:0;background:linear-gradient(transparent,var(--ink) 30%);padding:26px 0 0;display:flex;gap:10px;justify-content:flex-end;align-items:center}
.gs-fondo .msg{margin-right:auto;font-size:13px;color:var(--muted)}
/* ordini: elenco a sinistra, dettaglio a destra */
.gs-ordini{display:grid;grid-template-columns:1fr 440px;gap:22px;align-items:start}
.gs-ord-riga{cursor:pointer}.gs-ord-riga.on td{background:var(--ink-3)}
.gs-det h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;margin:0;line-height:1}
.gs-det .quando{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;margin-top:4px}
.gs-passi{display:flex;gap:0;margin:16px 0 18px;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.gs-passi span{flex:1;text-align:center;padding:8px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--ink);border-right:1px solid var(--line)}
.gs-passi span:last-child{border-right:0}
.gs-passi span.fatto{color:var(--txt);background:var(--ink-3)}
.gs-passi span.ora{color:#1A1205;background:var(--amber);font-weight:600}
.gs-det .blocco{padding:14px 0;border-top:1px solid var(--line)}
.gs-det .blocco .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gs-det .blocco p{margin:0;font-size:14.5px;line-height:1.5}
.gs-det .art{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.gs-det .art span:last-child{font-family:var(--mono);font-size:13px;white-space:nowrap}
.gs-det .somme div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:3px 0}
.gs-det .somme .tot{color:var(--txt);font-weight:600;font-size:16px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.gs-det .tracking{display:flex;gap:8px;margin-top:8px}.gs-det .tracking input{flex:1;background:var(--ink);border:1px solid var(--line-2);color:var(--txt);padding:9px 12px;font:inherit;font-size:14px;border-radius:3px}
.gs-det .azioni{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.gs-det .azioni .gs-btn{justify-content:center}
/* accesso */
.gs-accesso{min-height:100vh;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 40%,rgba(246,166,35,.08),transparent 70%),var(--ink)}
.gs-accesso .card{width:380px;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:34px 32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.5);box-sizing:border-box}
.gs-accesso .card .gs-marchio{padding:0 0 18px;margin-bottom:22px}
.gs-accesso .gs-form{grid-template-columns:1fr}
.gs-accesso .gs-btn{width:100%;justify-content:center;height:46px;margin-top:6px;font-size:15px}
.gs-accesso .nota{text-align:center;font-size:12.5px;color:var(--muted);margin:16px 0 0}
.gs-accesso .nota a{color:var(--txt)}
@media(max-width:1100px){.gs{grid-template-columns:1fr}.gs-lato{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px}.gs-marchio{border:0;padding:0 16px 0 0;margin:0}.gs-menu{display:flex;gap:4px;padding:0}.gs-lato .fine{display:none}.gs-due,.gs-ordini{grid-template-columns:1fr}.gs-corpo{padding:22px 18px 50px}.gs-foto{grid-template-columns:repeat(3,1fr)}}
/* accesso: tutto centrato (Roberto 06/09) */
.gs-accesso .card,.gs-accesso .gs-form label,.gs-accesso .gs-form input{text-align:center}
/* il pannello: cose in più rispetto al mockup */
.gs-msg{font-size:13.5px;padding:10px 14px;border-radius:4px;border:1px solid var(--line-2);background:var(--ink-2);margin:0 0 16px}
.gs-msg.ok{border-color:rgba(63,213,126,.4);color:var(--led)}.gs-msg.err{border-color:rgba(255,122,107,.5);color:#FF7A6B}
.gs-foto figure.trascina{opacity:.4}.gs-foto figure img{width:100%;height:100%;object-fit:cover}
.gs-foto .carica input{display:none}
.gs-vuoto{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:8px;font-size:14.5px;line-height:1.6}
.gs-tab .gs-mini img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.gs-righe .su,.gs-tab .su{width:30px;height:30px;border-radius:50%;background:none;border:1px solid var(--line-2);color:var(--muted);cursor:pointer;font-size:12px;line-height:1;margin-right:4px}
.gs-fattura{font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;background:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:12px;margin-top:8px;line-height:1.6}
.gs-passi-vuoti{font-size:13px;color:var(--muted)}
.gs-form .riga-sw{display:flex;align-items:center;gap:12px;font-size:14.5px}
@media print{.gs-lato,.gs-testa .azioni,.gs-filtri,.gs-ordini>table,.gs-det .azioni,.gs-det .tracking{display:none!important}.gs{display:block}.gs-ordini{display:block}body{background:#fff;color:#000}.gs-box{border-color:#999;background:#fff;color:#000}}

/* NIENTE SCORRIMENTO DI LATO SUL TELEFONO (Roberto 06/09): nella scheda SI.SCO il telefono della copertina (right:-6%) e la
   scena 3D dei moduli sporgono a destra; sul PC body{overflow-x:hidden} basta, sul telefono no: la pagina si spostava
   di lato e la barra restava a sinistra. «clip» taglia senza creare un contenitore di scorrimento (sticky resta vivo);
   hidden è la riserva per i browser vecchi. */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:clip}
.sk-hero,.sk-tasca,.sk-moduli{overflow-x:clip}

/* ══ LA PESA A PONTE NEL SITO (06/09) ══ */
/* il menù «Prodotti» nella barra: si apre passando sopra (e con la tastiera); sul telefono le due voci stanno
   nel cassetto, rientrate sotto «Prodotti» */
.nav-menu{position:relative}
.nav-voce{display:inline;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;cursor:default;transition:color .2s,border-color .2s}   /* inline come i link accanto: stessa riga, stessa altezza (06/09 sera) */
.nav-voce svg{width:13px;height:13px;margin-left:4px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav-voce.on{color:var(--txt);border-color:var(--amber)}
.nav-menu:hover .nav-voce,.nav-menu:focus-within .nav-voce{color:var(--txt)}
.nav-menu:hover .nav-voce svg,.nav-menu:focus-within .nav-voce svg{transform:rotate(180deg)}
.nav-sotto{display:none;position:absolute;left:-18px;top:calc(100% + 14px);margin:0;padding:8px 0;list-style:none;min-width:250px;background:rgba(24,28,33,.98);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.55)}
.nav-menu:hover .nav-sotto,.nav-menu:focus-within .nav-sotto{display:block}
/* il ponte invisibile fra la voce e la tendina: passando col mouse nello spazio in mezzo il menù non si chiude */
.nav-sotto::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-sotto li{display:block}
.nav-links .nav-sotto a{display:block;padding:10px 18px;border:0;font-size:14px;white-space:nowrap}
.nav-links .nav-sotto a:hover{background:var(--ink-3);color:var(--txt)}
.nav-links .nav-sotto a.on{color:var(--amber)}
@media (max-width:1100px){
  .nav-voce{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--txt);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .nav-voce svg{display:none}
  .nav-sotto{display:block;position:static;margin:0;padding:0 0 0 16px;min-width:0;background:none;border:0;box-shadow:none}
  .nav-links .nav-sotto a{padding:12px 0;border-bottom:1px solid var(--line);white-space:normal}
}
/* fuori dalla cabina: totem, tablet, telefono in tre tessere */
.pp-fuori{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.pp-fuori article{position:relative;background:var(--ink);padding:0 0 26px;display:flex;flex-direction:column;gap:10px}
.pp-fuori img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.pp-fuori b{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber);padding:14px 26px 0}
.pp-fuori h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;letter-spacing:.02em;margin:0;padding:0 26px}
.pp-fuori p{margin:0;padding:0 26px;font-size:15px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pp-fuori.due{grid-template-columns:1fr 1fr}   /* due schede sole: mezza pagina ciascuna, niente colonna vuota */
/* schermate a fondo CHIARO su sezione scura: senza cornice sono rettangoli bianchi appiccicati */
.pp-fuori.chiare article{padding:22px 22px 28px;gap:12px}
.pp-fuori.chiare img{aspect-ratio:16/10;object-fit:contain;object-position:center;background:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:7px;box-shadow:0 18px 38px rgba(0,0,0,.45)}
.pp-fuori.chiare b{padding:16px 0 0}
.pp-fuori.chiare h3,.pp-fuori.chiare p{padding:0}
@media (max-width:1100px){.pp-fuori{grid-template-columns:1fr}}
/* la pesa in home: il sinottico a sinistra, tre righe e i tasti a destra */
.pp-home{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;margin-top:44px}
.pp-home-img{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 120px rgba(246,166,35,.08);transition:transform .35s ease}
.pp-home-img:hover{transform:translateY(-4px)}
.pp-home-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top}
.pp-home-testo ul{list-style:none;margin:0 0 26px;padding:0}
.pp-home-testo li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:16px;color:#C9D0D6;line-height:1.45}
.pp-home-testo li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;background:var(--amber);transform:rotate(45deg)}
.pp-home .vet-azioni{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pp-home .vet-azioni .btn{justify-content:center;width:100%}
@media (max-width:1100px){.pp-home{grid-template-columns:1fr;gap:26px}}
@media (max-width:640px){.pp-home .vet-azioni{grid-template-columns:1fr}}

/* LE SCHERMATE DELLA PESA NON SI TAGLIANO (Roberto 06/09): i mockup non hanno tutti la stessa altezza, e i riquadri
   3:2 li ritagliavano. Nella scheda della pesa (classe pp) e in home l'immagine sta INTERA nel riquadro, con le bande
   dello stesso grigio dello sfondo dei mockup. */
/* le SCENE (11/09): dove l'immagine e' una fotografia di ambiente e non un mockup, il riquadro la
   RITAGLIA come una foto qualsiasi. Vale per il quadro grande dell'apertura, le tre schede «fuori dalla
   cabina» e il richiamo in home. Il riquadro piccolo del telefono, largo un terzo, tiene il mockup
   piatto: una fotografia li' dentro non si legge piu'. */
.pp .sk-cop-grande img.foto,.pp-fuori img.foto,.pp-home-img img.foto{
  object-fit:cover;object-position:center;background:transparent}
.pp .sk-cop-grande img,.pp .sk-cop-tel img,.pp .sk-mod-quadro img,.pp .sk-mod-extra img,.pp .sk-mob img,.pp-fuori img,.pp-home-img img{object-fit:contain;object-position:center;background:#1B242D}

/* ══ SI.SCO CARNI (09/09): le schermate del TABLET sono verticali (800×1280) e le etichette sono figure strette:
   nei riquadri ci stanno intere, senza tagli. Il resto della pagina riusa le classi di SI.SCO e della pesa. ══ */
.pp-fuori.cn-vert img{aspect-ratio:3/4;object-fit:contain;object-position:center;background:#0B0E12}
.cn-eti{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.cn-eti figure{margin:0;background:var(--ink);display:flex;flex-direction:column}
.cn-eti img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#fff;border-bottom:1px solid var(--line)}
.cn-eti figcaption{padding:16px 18px 22px;display:flex;flex-direction:column;gap:7px}
.cn-eti figcaption b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1;letter-spacing:.02em}
.cn-eti figcaption span{font-size:14px;line-height:1.5;color:var(--muted)}
.cn-eti-nota{max-width:80ch;margin:22px 0 0;font-size:15px;line-height:1.6;color:var(--muted);border-left:2px solid var(--amber);padding-left:16px}
@media (max-width:1100px){.cn-eti{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cn-eti{grid-template-columns:1fr}}

/* ══ IL PALMARE A FASCE (Roberto 16/09): la galleria 3D era la stessa di «In tasca» e sembrava la copia
   dell'app mobile. Qui l'impaginazione è quella della brochure — una fascia per lavoro, il testo di qua e
   le sue tre schermate di là, alternate. Schermate PIATTE e ferme: niente prospettiva, niente movimento. ══ */
.pl-lavori{margin-top:52px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.pl-lavoro{background:var(--ink);display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;
  align-items:center;padding:46px 42px}
.pl-lavoro.girata{grid-template-columns:1.18fr .82fr}
.pl-lavoro.girata .pl-testo{order:2}
.pl-lavoro.girata .pl-schermi{order:1}
.pl-testo b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--amber);margin-bottom:12px}
.pl-testo h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:30px;
  line-height:1;letter-spacing:.02em;margin:0}
.pl-testo .unita{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-top:10px}
.pl-testo p{margin:16px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pl-schermi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.pl-schermi figure{margin:0}
.pl-schermi img{display:block;width:100%;border-radius:12px;border:1px solid var(--line-2);
  box-shadow:0 22px 50px rgba(0,0,0,.6)}
.pl-schermi figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.5}
.pl-schermi figcaption i{font-style:normal;color:var(--amber)}
@media (max-width:1100px){
  .pl-lavoro,.pl-lavoro.girata{grid-template-columns:1fr;gap:30px;padding:34px 24px}
  .pl-lavoro.girata .pl-testo,.pl-lavoro.girata .pl-schermi{order:0}
}

/* ══ I NEGOZI nella scheda /sisco (19/09): le stesse fasce del palmare, ma le schermate sono larghe
   (la finestra del server) e una sola è verticale (il telefono). Cambia solo quante ne stanno in riga. ══ */
.pl-schermi.uno{grid-template-columns:1fr}
.pl-schermi.due{grid-template-columns:1fr;gap:16px}
.pl-schermi.tel{grid-template-columns:1fr;justify-items:center}
.pl-schermi.tel img{max-width:300px;border-radius:18px}
@media (min-width:1101px){.pl-schermi.due{grid-template-columns:1fr 1fr}}

/* ══ FIRMWARE E SOFTWARE (19/09): la pagina /firmware, dal mockup firmware-software-v2.html. Le fasce, i
   campi e i contatori sono quelli del palmare; qui servono solo l'apertura, il riquadro dell'esempio e le
   cornici delle immagini. Classi PREFISSATE fw-: nel sito «.foto» è già la fotografia dell'apertura. ══ */
.fw-apri{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.fw-apri .lead{max-width:none;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.fw-apri .campi{margin-top:28px}
.fw-apri .fw-foto{border-radius:14px;border:1px solid var(--line-2)}
.fw-caso{margin-top:64px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:36px 40px;display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center}
.fw-caso h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:34px;line-height:.98;margin:12px 0 0}
.fw-caso p{color:var(--muted);font-size:16px;line-height:1.6;margin:0;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.fw-caso .chi{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C9D0D6;line-height:1.9}
.fw-caso .chi i{font-style:normal;color:var(--amber)}
/* le immagini: fotografie e disegni a filo, schermate chiare con la cornice, telefono stretto e centrato */
.fw-foto{display:block;width:100%;border-radius:12px}
.fw-foto.chiara{border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 34px rgba(0,0,0,.5);background:#fff}
.fw-foto.tel{max-width:230px;margin:0 auto;border-radius:18px;border:1px solid var(--line-2)}
@media (max-width:1100px){.fw-apri,.fw-caso{grid-template-columns:1fr;gap:28px}.fw-caso{padding:28px 24px}}
/* il richiamo alla pagina, sotto le sei competenze della home */
.comp-piu{margin:34px 0 0;text-align:center}
.comp-piu a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px}
.comp-piu a:hover{border-bottom-color:var(--amber)}
.comp-piu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Il carrello toccava «Contatti» (Roberto 19/09): con una voce in più nella barra le due file si
   avvicinano fino a sfiorarsi. Un margine minimo fra le voci e il gruppo di destra le tiene separate. */
.nav-right{margin-left:30px}
@media (max-width:1280px){.nav-right{margin-left:18px}}
@media (max-width:760px){.nav-right{margin-left:12px}}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SI.SCO PRODUZIONE — la scheda /produzione (20/09). L'impianto è quello della SUA BROCHURE, non
   della pagina accanto: aperture fotografiche a tutta larghezza, quattro tessere, quattro passi,
   le trenta schermate a fasce alternate, la notte, la tracciabilità, l'impianto. Classi prefissate
   «pr-». Niente filter né mix-blend-mode sulle fotografie: il velo è un gradiente sopra.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── l'apertura e la notte: la fotografia sta sotto, il testo dentro il wrap ── */
.pr-apri,.pr-notte{position:relative;isolation:isolate;padding:118px 0 96px;overflow:hidden;border-bottom:1px solid var(--line)}
.pr-apri-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pr-apri::after,.pr-notte::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(17,20,23,.94) 0%,rgba(17,20,23,.86) 42%,rgba(17,20,23,.42) 72%,rgba(17,20,23,.28) 100%)}
.pr-notte::after{background:linear-gradient(80deg,rgba(17,20,23,.93) 0%,rgba(17,20,23,.8) 46%,rgba(17,20,23,.35) 100%)}
.pr-apri .wrap,.pr-notte .wrap{position:relative}
.pr-apri .lead,.pr-notte .lead{max-width:56ch;margin-top:18px}
.pr-claim{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(46px,6.2vw,86px);
  line-height:.9;letter-spacing:-.01em;margin:18px 0 0;max-width:15ch}
.pr-claim b{color:var(--amber)}
.pr-claim span{color:#C9D0D6}
.pr-sotto{margin:18px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pr-numeri{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--line-2)}
.pr-numeri>div{padding:20px 20px 0;border-left:1px solid var(--line-2)}
.pr-numeri>div:first-child{border-left:0;padding-left:0}
.pr-numeri b{display:block;font-family:var(--display);font-weight:800;font-size:52px;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.pr-numeri span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.55}
.pr-firma{margin:34px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ── le quattro tessere di «che cos'è» ── */
.pr-tessere{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.pr-tessere article{position:relative;background:var(--ink);padding:30px 26px 26px;display:flex;flex-direction:column;gap:10px}
.pr-tessere .n{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber)}
.pr-tessere .cat{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pr-tessere h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:.02em;margin:0}
.pr-tessere p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pr-tessere .tag{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:auto 0 0;padding:14px 0 0}
.pr-tessere .tag li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:5px 2px;border-radius:2px;text-align:center}

/* ── una fotografia larga con la sua didascalia di fianco ── */
.pr-foto-did{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center;margin-top:44px}
.pr-foto-did img{display:block;width:100%;border-radius:12px;border:1px solid var(--line-2)}
.pr-foto-did h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;margin:0 0 12px}
.pr-foto-did p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* ── il riquadro che chiude una sezione ── */
.pr-quadro{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;margin-top:44px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:28px 32px}
.pr-quadro b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.02;letter-spacing:.01em}
.pr-quadro p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:80ch}
.pr-bollo{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  border:1px solid var(--amber);border-radius:2px;padding:9px 14px;white-space:nowrap}

/* ── i quattro passi del giro di una bobina ── */
.pr-passi{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:44px 0 0;padding:0}
.pr-passi li{display:flex;flex-direction:column;gap:8px}
.pr-passi img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line-2);margin-bottom:6px}
.pr-passi b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber)}
.pr-passi .gesto{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pr-passi h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1;margin:0}
.pr-passi p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* ── due colonne di testo, per le note e per l'impianto ── */
.pr-due{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px}
.pr-due .cat{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.pr-due h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1;margin:8px 0 12px}
.pr-due p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pr-due .sk-spec{grid-template-columns:1fr;margin-top:18px}

/* ── le trenta schermate: un gruppo, poi le sue fasce alternate ── */
.pr-gruppo{margin-top:56px;padding-top:26px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:.9fr 1.1fr auto;gap:12px 36px;align-items:end}
.pr-gruppo .eyebrow{grid-row:1;grid-column:1}
.pr-gruppo h3{grid-row:2;grid-column:1;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;margin:0}
.pr-gruppo p{grid-row:2;grid-column:2;margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.pr-gruppo .tag{grid-row:2;grid-column:3;list-style:none;display:flex;gap:5px;margin:0;padding:0;flex-wrap:wrap}
.pr-gruppo .tag li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:5px 8px;border-radius:2px}
.pr-righe{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.pr-riga{background:var(--ink);display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:center;padding:30px}
.pr-riga.girata{grid-template-columns:1.28fr .72fr}
.pr-riga.girata .pr-riga-testo{order:2}
.pr-riga.girata figure{order:1}
.pr-riga-testo b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);margin-bottom:10px}
.pr-riga-testo h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1;letter-spacing:.02em;margin:0}
.pr-riga-testo p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pr-riga figure{margin:0}
.pr-riga img{display:block;width:100%;border-radius:10px;border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.pr-nota{margin:26px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── la notte: le quattro righe ── */
.pr-ore{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin:44px 0 0;padding:0;max-width:1000px}
.pr-ore li{background:rgba(17,20,23,.72);padding:20px 22px}
.pr-ore b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;color:var(--amber)}
.pr-ore span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:#C9D0D6}

/* ── tracciabilità: le due schermate, le tre fotografie, i quattro effetti ── */
.pr-tra{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.pr-tra figure{margin:0}
.pr-tra img{display:block;width:100%;border-radius:10px;border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.pr-tra figcaption{margin-top:16px;font-size:15px;line-height:1.6;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pr-tra .cat{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.pr-tra figcaption b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1;color:var(--txt);margin:6px 0 10px}
.pr-eti{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.pr-eti figure{margin:0}
.pr-eti img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:1px solid var(--line-2)}
.pr-eti figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-effetti{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.pr-effetti>div{background:var(--ink);padding:22px 22px 24px}
.pr-effetti b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1.05;letter-spacing:.02em}
.pr-effetti span{display:block;margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}

/* ── l'impianto: i nodi, il server, l'avviamento ── */
.pr-schema{margin-top:44px;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:30px 32px}
.pr-schema>p{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:90ch}
.pr-schema .campi{margin:0}
.pr-nodi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pr-nodo{border:1px solid var(--line-2);border-radius:8px;padding:16px 18px;background:var(--ink)}
.pr-nodo b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1}
.pr-nodo span{display:block;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-server{margin:14px 0 18px;border:1px solid var(--amber);border-radius:8px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pr-server b{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--amber)}
.pr-server span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.pr-avvio{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.pr-avvio li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5}
.pr-avvio b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.1}
.pr-avvio span{color:var(--muted)}

/* ── la chiusura ── */
.pr-fine{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.pr-fine img{display:block;width:100%;border-radius:12px;border:1px solid var(--line-2)}
.pr-fine .sk-lingue{margin-top:26px;max-width:460px}

@media (max-width:1100px){
  .pr-numeri,.pr-tessere,.pr-passi,.pr-effetti,.pr-ore{grid-template-columns:1fr 1fr}
  .pr-numeri>div:nth-child(3){border-left:0;padding-left:0}
  .pr-foto-did,.pr-due,.pr-tra,.pr-fine,.pr-nodi{grid-template-columns:1fr;gap:26px}
  .pr-riga,.pr-riga.girata{grid-template-columns:1fr;gap:24px;padding:26px 22px}
  .pr-riga.girata .pr-riga-testo,.pr-riga.girata figure{order:0}
  .pr-gruppo{grid-template-columns:1fr;gap:10px}
  .pr-gruppo h3,.pr-gruppo p,.pr-gruppo .tag{grid-row:auto;grid-column:auto}
  .pr-quadro{grid-template-columns:1fr;gap:18px}
  .pr-apri,.pr-notte{padding:84px 0 72px}
}
@media (max-width:640px){
  .pr-numeri,.pr-tessere,.pr-passi,.pr-effetti,.pr-ore,.pr-eti{grid-template-columns:1fr}
  .pr-numeri>div{border-left:0;padding-left:0}
  .pr-avvio li{grid-template-columns:1fr;gap:4px}
}

/* LA BARRA STACCATA DALLA SCRITTA (Roberto 20/09): con le voci di oggi la fila arrivava a toccare
   «EDG SISTEMI». Come per il gruppo di destra, un margine minimo; solo dove la barra è una riga
   (sotto i 1100px le voci stanno nel cassetto e il margine sposterebbe il cassetto). */
@media (min-width:1101px){.nav-links{margin-left:34px}}

/* IL BLOCCO IN FONDO AI NEGOZI (Roberto 20/09): le sue quattro frasi sono lunghe il triplo di quelle
   della tasca, e nelle due colonne schiacciavano i numeri in una striscia (una parola per riga, con
   il vuoto sotto). Qui le frasi prendono tutta la larghezza e i quattro numeri stanno sotto, in fila. */
.sk-neg-sotto{margin-top:52px}
.sk-neg-sotto .campi{margin:0}
.sk-neg-sotto .campi li span{white-space:normal;align-items:flex-start;line-height:1.25}
.sk-neg-sotto .campi li span::before{margin-top:5px}
.sk-neg-sotto .sk-cont{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .sk-neg-sotto{margin-top:38px}
  .sk-neg-sotto .campi li{grid-template-columns:1fr;gap:10px}
  .sk-neg-sotto .sk-cont{grid-template-columns:1fr 1fr;gap:22px 0}
  .sk-neg-sotto .sk-cont>div:nth-child(3){border-left:0;padding-left:0}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SI.SCO SILOS — la scheda /silos (20/09). L'impianto è quello della SUA BROCHURE, non della
   pagina accanto: apertura fotografica, tre tessere col sinottico a fianco, i cinque passi della
   giornata su una linea, la fascia «ponte contro silo», le trenta schermate in sei gruppi con le
   fotografie a far da separatore, la notte, il richiamo, l'impianto, le tre domande.

   IL COLORE È BLU, non ambra: si ridefiniscono le variabili su «.si-pagina» e il blu scende da
   solo su tutte le classi comuni (occhielli, tasti, bordi, liste). Restano da correggere a mano
   soltanto i pochi punti dove l'ambra è scritta per esteso in un rgba().
   Niente filter né mix-blend-mode sulle fotografie: il velo è un gradiente sopra.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.si-pagina{--amber:#4C8DFF;--amber-2:#9CC3FF;--amber-deep:#2456C4;--amber-glow:rgba(76,141,255,.5);--si-cifra:#EAF2FF}
.si-pagina .btn-amber{color:#06121F}
.si-pagina .sk-lingue a:hover{background:rgba(76,141,255,.10)}
.si-pagina .vet::before{background:radial-gradient(circle,rgba(76,141,255,.10),transparent 60%)}
.si-pagina .contact::before{background:radial-gradient(circle,rgba(76,141,255,.09),transparent 60%)}
.si-pagina .ct-form input:focus,.si-pagina .ct-form textarea:focus{box-shadow:0 0 0 3px rgba(76,141,255,.18)}
.si-pagina .ct-errore{background:rgba(76,141,255,.08)}

/* le pastiglie sotto le tessere: qui non c'è la griglia a quattro caselle della home, i testi sono frasi */
.si-pagina .tag{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.si-pagina .tag li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9D0D6;border:1px solid var(--line-2);padding:5px 9px;border-radius:2px;line-height:1.5}

/* ── 1 · l'apertura: la sala silos, il velo da sinistra, i quattro numeri ── */
.si-apri{position:relative;padding:130px 0 96px;overflow:hidden;border-bottom:1px solid var(--line)}
.si-foto-piena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.si-apri::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(11,14,17,.96) 0 40%,rgba(11,14,17,.74) 62%,rgba(11,14,17,.42) 100%),linear-gradient(0deg,rgba(11,14,17,.92),transparent 45%)}
.si-apri .wrap{position:relative;z-index:2}
.si-claim{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,5.8vw,78px);line-height:.92;letter-spacing:-.005em;margin:18px 0 0;max-width:15ch}
.si-claim b{color:var(--amber);font-weight:800}
.si-coda{margin:18px 0 0;font-size:19.5px;line-height:1.5;max-width:46ch;color:var(--txt)}
.si-sotto{margin:26px 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.si-apri .lead{max-width:58ch}
.si-numeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:52px;padding-top:24px;border-top:1px solid var(--line-2)}
.si-numeri>div{padding:0 26px;border-left:1px solid var(--line-2)}
.si-numeri>div:first-child{padding-left:0;border-left:0}
.si-numeri b{display:block;font-family:var(--display);font-weight:800;font-size:54px;line-height:1;color:var(--si-cifra);font-variant-numeric:tabular-nums}
.si-numeri span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.55}
.si-firma{margin:28px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ── 2 · che cos'è: le tre tessere a sinistra, il sinottico a destra ── */
.si-cosa{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:48px;align-items:start}
.si-tessere{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.si-tessere article{position:relative;background:var(--ink);padding:26px 24px}
.si-tessere .n{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber)}
.si-pagina .cat{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.si-tessere h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.02;margin:8px 0 8px}
.si-tessere p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.si-tessere.tre{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:46px}
.si-figura{margin:0}
.si-figura img{width:100%;display:block;border:1px solid var(--line-2);border-radius:10px;background:#0B0E11}
.si-figura figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-figura figcaption b{display:block;margin-bottom:6px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1;color:var(--txt)}
.si-dati{list-style:none;margin:46px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.si-dati li{padding:18px 22px;border-left:1px solid var(--line)}
.si-dati li:first-child{padding-left:0;border-left:0}
.si-dati span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.si-dati b{display:block;margin-top:7px;font-size:15.5px;font-weight:500;line-height:1.5;color:var(--txt)}

/* ── 3 · la giornata: cinque passi su una linea sola ── */
.si-passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2)}
.si-passi li{position:relative;padding:30px 24px 0;border-left:1px solid var(--line)}
.si-passi li:first-child{border-left:0;padding-left:0}
.si-passi li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--amber);transform:rotate(45deg)}
.si-passi b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber)}
.si-passi h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:23px;line-height:1.02;margin:10px 0 8px}
.si-passi p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.si-largo{margin:54px 0 0}
.si-largo img{width:100%;display:block;border:1px solid var(--line-2);border-radius:10px;background:#0B0E11}
.si-largo figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-largo figcaption b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:23px;line-height:1.05;color:var(--txt)}
.si-quadro{margin-top:50px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;background:var(--ink-2);border:1px solid var(--line-2);border-left:3px solid var(--amber);padding:28px 30px}
.si-quadro b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:27px;line-height:1.05}
.si-quadro p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-bollo{max-width:360px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;color:var(--amber);border:1px dashed var(--line-2);border-radius:3px;padding:12px 16px}

/* ── 4 · ponte contro silo: la fascia fotografica e il confronto ── */
.si-banda{position:relative;padding:116px 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.si-banda::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,14,17,.72),rgba(11,14,17,.93))}
.si-banda .wrap{position:relative;z-index:2}
.si-banda .lead{max-width:70ch}
.si-dopo{padding-top:76px}
.si-righe{margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.si-righe>div{background:var(--ink);padding:22px 24px;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:22px;align-items:baseline}
.si-righe b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--amber)}
.si-righe span{font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-due{margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.si-due>div{border-top:2px solid var(--amber);padding-top:20px}
.si-due h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.05;margin:8px 0 10px}
.si-due p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* ── 5 · le trenta schermate: sei gruppi, due per riga, con le fotografie in mezzo ── */
.si-gruppo{margin-top:82px;padding-top:28px;border-top:1px solid var(--line-2)}
.si-gruppo h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,44px);line-height:1;margin:14px 0 12px}
.si-gruppo>p:last-child{margin:0;max-width:80ch;font-size:16.5px;line-height:1.6;color:var(--muted)}
.si-schede{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.si-scheda{margin:0;min-width:0}
.si-scheda img{width:100%;display:block;border:1px solid var(--line-2);border-radius:8px;background:#0B0E11}
.si-scheda figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--muted)}
.si-scheda figcaption i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--amber)}
.si-scheda figcaption b{display:block;margin:6px 0 6px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.02;color:var(--txt)}
.si-quattro{margin-top:46px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.si-quattro>div{background:var(--ink);padding:24px 22px}
.si-quattro h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.05;margin:0 0 9px}
.si-quattro p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.si-freddo{margin-top:46px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;background:var(--ink-2);border:1px solid var(--line-2);padding:30px 32px}
.si-freddo h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1.05;margin:12px 0 10px}
.si-freddo p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-freddo .si-dati{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
.si-freddo .si-dati li{padding:14px 18px;border-top:1px solid var(--line)}
.si-freddo .si-dati li:nth-child(odd){border-left:0;padding-left:0}
.si-foglio{margin-top:54px;padding-top:36px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:50px;align-items:start}
.si-foglio.girata{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
.si-foglio.girata>figure{order:-1}
.si-foglio h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3vw,38px);line-height:1;margin:12px 0 12px}
.si-foglio figure{margin:0}
.si-foglio figure img{width:100%;display:block;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.si-foglio figcaption{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;color:var(--muted)}
.si-foglio .si-due{margin-top:28px;gap:30px}
.si-foglio .si-quattro{margin-top:26px;grid-template-columns:1fr;gap:0;background:transparent;border:0}
.si-foglio .si-quattro>div{padding:18px 0 0;border-top:1px solid var(--line);margin-top:18px}
.si-foglio .si-quattro>div:first-child{margin-top:0}
.si-sep{position:relative;margin-top:66px;height:clamp(240px,32vw,420px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.si-sep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.si-sep::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,14,17,.94) 0 18%,rgba(11,14,17,.30) 70%,rgba(11,14,17,.45))}
.si-sep .wrap{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-bottom:28px}
.si-sep p{margin:0;max-width:56ch;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;line-height:1.75;color:#DDE3E9}
.si-tre{margin-top:82px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.si-tre>div{display:flex;flex-direction:column;background:var(--ink);padding:28px 26px}
.si-tre h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:23px;line-height:1.05;margin:10px 0 10px}
.si-tre p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-tre .tag{margin-top:auto}
.si-nota{margin:36px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── 6 · la notte ── */
.si-notte{position:relative;padding:124px 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.si-notte::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,13,.80),rgba(8,10,13,.94))}
.si-notte .wrap{position:relative;z-index:2}
.si-notte .lead{max-width:72ch}
.si-notte .si-righe{background:rgba(58,67,76,.45);border-color:var(--line-2)}
.si-notte .si-righe>div{background:rgba(11,14,17,.74);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.si-cit{margin:50px 0 0;padding:6px 0 6px 28px;border-left:3px solid var(--amber)}
.si-cit b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);line-height:1.08}
.si-cit span{display:block;margin-top:12px;max-width:78ch;font-size:16px;line-height:1.6;color:var(--muted)}

/* ── 8 · com'è fatto: lo schema, le tessere, chi fa che cosa ── */
.si-schema{margin-top:8px;background:var(--ink-2);border:1px solid var(--line-2);padding:34px 32px}
.si-nodi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.si-nodi>div{background:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:16px 18px}
.si-nodi b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.05}
.si-nodi span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.55;color:var(--muted)}
.si-server{position:relative;margin:34px 0;padding:18px;text-align:center;border:1px solid var(--amber);border-radius:4px;background:rgba(76,141,255,.08);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:.04em}
.si-server::before,.si-server::after{content:"";position:absolute;left:50%;width:1px;height:12px;background:var(--line-2)}
.si-server::before{top:-13px}
.si-server::after{bottom:-13px}
.si-dove{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.si-dove span{border:1px dashed var(--line-2);border-radius:4px;padding:14px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C9D0D6}
.si-schema>p{margin:24px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-sic{margin-top:54px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:50px;align-items:start}
.si-sic figure{margin:0}
.si-sic img{width:100%;display:block;border:1px solid var(--line-2);border-radius:10px}
.si-sic h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3vw,40px);line-height:1;margin:12px 0 12px}

/* ── 9 · la chiusura: le tre domande, la brochure ── */
.si-domande{margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.si-domande article{display:flex;flex-direction:column;background:var(--ink);padding:30px 28px}
.si-domande h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:25px;line-height:1.02;margin:10px 0 10px}
.si-domande p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.si-domande .tag{margin-top:auto;display:grid;grid-template-columns:1fr;gap:5px}
.si-fine{margin-top:58px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:52px;align-items:center}
.si-fine img{width:100%;display:block;border:1px solid var(--line-2);border-radius:10px}

/* ── le misure più strette ── */
@media (max-width:1100px){
  .si-cosa,.si-freddo,.si-sic,.si-fine,.si-schede{grid-template-columns:1fr}
  .si-foglio,.si-foglio.girata{grid-template-columns:1fr;gap:34px}
  .si-foglio.girata>figure{order:0}
  .si-foglio figure img{max-width:420px}
  .si-passi{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .si-passi li{border-left:0;padding:26px 0 0}
  .si-passi li:nth-child(even){padding-left:26px;border-left:1px solid var(--line)}
  .si-numeri,.si-dati,.si-quattro,.si-tre,.si-domande,.si-nodi,.si-tessere.tre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .si-dati li:nth-child(odd),.si-numeri>div:nth-child(odd){border-left:0;padding-left:0}
  .si-numeri{gap:22px 0}
  .si-righe{grid-template-columns:1fr}
  .si-largo figcaption{grid-template-columns:1fr;gap:10px}
  .si-apri{padding:100px 0 76px}
  .si-apri::after{background:linear-gradient(100deg,rgba(11,14,17,.95) 0 60%,rgba(11,14,17,.80) 100%),linear-gradient(0deg,rgba(11,14,17,.92),transparent 50%)}
}
@media (max-width:640px){
  .si-passi,.si-numeri,.si-dati,.si-quattro,.si-tre,.si-domande,.si-nodi,.si-dove,.si-due,.si-tessere.tre,.si-freddo .si-dati{grid-template-columns:1fr}
  .si-passi li:nth-child(even){padding-left:0;border-left:0}
  .si-freddo .si-dati li:nth-child(odd),.si-freddo .si-dati li{padding-left:0;border-left:0}
  .si-righe>div{grid-template-columns:1fr;gap:8px}
  .si-quadro{grid-template-columns:1fr;gap:22px}
  .si-bollo{max-width:none}
  .si-claim{font-size:clamp(34px,10vw,46px)}
  .si-numeri b{font-size:44px}
  .si-freddo,.si-schema{padding:24px 20px}
  .si-sep{height:230px}
  .si-cit{padding-left:20px}
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   L'INTELLIGENZA ARTIFICIALE NEI PRODOTTI (27/09/2026, mockup home-v4): il marchio IA, la riga
   nell'hero, la sezione «dove serve» in home, la sezione «Assistente» in /sisco. Le stesse cose,
   con le stesse parole, delle pagine 4 e 5 della brochure di SI.SCO. I pannelli VERI del programma
   hanno il loro foglio, wwwroot/ia.css, caricato solo dove servono (home e /sisco).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* il marchio IA: scintilla bianca a quattro punte su quadrato verde, con la sigla (lo stesso della brochure) */
.ia-segno{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.ia-segno i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(150deg,#43b84f,#137A43);box-shadow:0 2px 8px -2px rgba(19,122,67,.8)}
.ia-segno i svg{width:78%;height:78%;display:block;fill:#fff}
.ia-segno b{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;color:#4CD27E}
.eyebrow .ia-segno{margin-right:2px}
.eyebrow .ia-segno i{width:18px;height:18px;border-radius:5px}
.vet-ia{display:inline-block;vertical-align:middle;transform:translateY(-8px);margin-left:4px}
.vet-ia .ia-segno i{width:30px;height:30px;border-radius:8px}
.vet-ia .ia-segno b{font-size:14px}
.sk-hero .h1 .vet-ia{transform:translateY(-14px);margin-left:10px}
.nav-sotto .ia-segno{margin-left:8px;gap:5px}
.nav-sotto .ia-segno i{width:16px;height:16px;border-radius:4px}
.nav-sotto .ia-segno b{font-size:10px}
/* la riga nell'hero, fra il paragrafo e i tasti */
.ia-riga{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:14px 18px;border:1px solid var(--line-2);border-left:3px solid #137A43;border-radius:4px;background:rgba(19,122,67,.07);font-size:15.5px;line-height:1.5;color:var(--txt)}
.ia-riga .ia-segno i{width:26px;height:26px;border-radius:7px;flex:none}
/* la sezione in home */
.ia{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line)}
.ia::before{content:"";position:absolute;left:50%;top:40%;width:80vw;height:80vw;max-width:1300px;max-height:1300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(67,184,79,.09),transparent 60%);pointer-events:none}
.ia .wrap{position:relative}
.ia-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ia-tre article{display:flex;flex-direction:column;background:var(--ink);padding:30px 28px 26px}
.ia-tre .cat,.sk-ia-tessere .cat{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#4CD27E}
.ia-tre h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:25px;line-height:1.02;margin:10px 0 12px}
.ia-tre p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ia-chiusa{margin-top:auto!important;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;color:#4CD27E!important;text-align:left!important}
.ia-sic{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.ia-sic li b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.02em;color:#BFF3D6;line-height:1.1}
.ia-sic li span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
/* le due figure: la Home col pannello Aiuto e il pannello Report, cornice chiara su fondo scuro */
.ia-figure{margin-top:44px;display:grid;grid-template-columns:auto auto;justify-content:center;gap:40px;align-items:start}
.ia-figure figure{margin:0;min-width:0}
.ia-cornice{border-radius:12px;padding:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 120px rgba(67,184,79,.10)}
.ia-cornice .ia-sch{box-shadow:none;border-radius:8px}
.ia-figure figcaption{margin-top:16px;max-width:660px;font-size:15px;line-height:1.55;color:var(--muted)}
.ia-figure figcaption b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4CD27E}
.ia-figure figure:last-child figcaption{max-width:260px}
.ia-fonte{margin:40px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.8}
.vet-provini{grid-template-columns:repeat(10,1fr)}   /* dieci scene: la decima è l'assistente */
/* la sezione «Assistente» in /sisco: impianto diverso dalla home — il pannello grande con le due tessere
   accanto, poi le tre voci del Report col suo pannello, poi i sei punti della sicurezza in tessere */
.sk-ia{border-bottom:1px solid var(--line)}
.sk-ia-aiuto{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:start}
.sk-ia-tessere{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sk-ia-tessere>div{background:var(--ink);padding:22px 22px}
.sk-ia-tessere h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1.05;margin:8px 0 8px}
.sk-ia-tessere p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.sk-ia-tessere .sk-ia-did{margin:0;padding:18px 22px;background:var(--ink-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;color:#4CD27E}
.sk-ia-report{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.sk-ia-voci{display:grid;gap:26px}
.sk-ia-voci>div{border-left:3px solid #137A43;padding-left:20px}
.sk-ia-voci h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.05;margin:0 0 8px}
.sk-ia-voci p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.sk-ia-sic{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sk-ia-sic li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:16px 18px}
.sk-ia-sic b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;color:#BFF3D6;line-height:1.1}
.sk-ia-sic span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--muted)}
.sk-ia-nota{margin:26px 0 0;padding:14px 18px;border-left:3px solid #137A43;background:rgba(19,122,67,.07);font-size:15px;line-height:1.55;color:var(--muted)}
/* i pannelli si rimpiccioliscono con la finestra: sono larghi in pixel e sul telefono sborderebbero */
.ia-cornice.grande .ia-sch.home{--k:.72}
.sk-ia .ia-sch.pannello{--k:.5}
@media (max-width:1100px){
  .ia-tre{grid-template-columns:1fr}
  .ia-figure,.sk-ia-aiuto,.sk-ia-report{grid-template-columns:1fr;justify-items:center}
  .sk-ia-sic{grid-template-columns:1fr 1fr}
  .ia-cornice.grande .ia-sch.home{--k:.6}
}
@media (max-width:760px){.ia-sch.home,.ia-cornice.grande .ia-sch.home{--k:.42}.ia-sch.pannello{--k:.5}}
@media (max-width:520px){.ia-sch.home,.ia-cornice.grande .ia-sch.home{--k:.28}.ia-sch.pannello{--k:.45}.sk-ia-sic{grid-template-columns:1fr}.ia-riga{align-items:flex-start}}