:root{
  --bg:#0b0b0d; --bg2:#131317; --bg3:#1b1b21; --linea:#2a2a33;
  --testo:#ecebe8; --tenue:#a3a1a8; --rame:#e8a15a; --rame2:#f3c38f; --verde:#7fd6a4; --rosso:#f08a7a;
  --raggio:18px; --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--testo);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:var(--rame2)}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:.6em}
h3{font-size:1.25rem;margin-bottom:.4em}
p{color:var(--tenue);max-width:68ch}
p strong,li strong{color:var(--testo)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
section{padding:110px 0}
.etichetta{display:inline-block;font:500 .78rem/1 "Space Grotesk";letter-spacing:.18em;text-transform:uppercase;color:var(--rame);margin-bottom:18px}
.nota{font-size:.82rem;color:#77757d;margin-top:10px}

/* navigazione */
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(11,11,13,.72);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
nav.scorso{border-color:var(--linea)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.marchio{font:700 1.15rem "Space Grotesk";color:var(--testo);text-decoration:none;display:flex;gap:10px;align-items:center}
.marchio i{width:10px;height:10px;border-radius:50%;background:var(--rame);box-shadow:0 0 14px var(--rame)}
nav ul{display:flex;gap:26px;list-style:none}
nav ul a{color:var(--tenue);text-decoration:none;font-size:.9rem}
nav ul a:hover{color:var(--testo)}
.bottone{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font:500 .95rem "Space Grotesk";text-decoration:none;border:1px solid var(--linea);color:var(--testo);background:transparent;cursor:pointer;transition:transform .15s,background .2s}
.bottone:hover{transform:translateY(-1px);background:var(--bg3)}
.bottone.pieno{background:var(--rame);color:#1a1006;border-color:var(--rame)}
.bottone.pieno:hover{background:var(--rame2)}
@media(max-width:820px){nav ul{display:none}}

/* apertura */
.apertura{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 0 90px;overflow:hidden}
.apertura video,.apertura .sfondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.apertura::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.2) 0%,rgba(11,11,13,0) 40%,rgba(11,11,13,.85) 82%,var(--bg) 100%)}
.apertura .wrap{position:relative;z-index:2;width:100%}
.apertura h1{font-size:clamp(3.4rem,11vw,8.5rem);font-weight:700;letter-spacing:-.05em}
.apertura h1 span{color:var(--rame)}
.apertura .sotto{font-size:clamp(1.1rem,2.2vw,1.45rem);color:var(--testo);max-width:34ch;margin:14px 0 30px}
.azioni{display:flex;gap:12px;flex-wrap:wrap}
.cifre{display:flex;gap:42px;margin-top:56px;flex-wrap:wrap}
.cifre div{font:700 1.9rem "Space Grotesk"}
.cifre small{display:block;font:400 .8rem Inter;color:var(--tenue);margin-top:2px}

/* tre gesti */
.griglia3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.carta{background:var(--bg2);border:1px solid var(--linea);border-radius:var(--raggio);padding:30px}
.carta .icona{width:46px;height:46px;border-radius:12px;background:var(--bg3);display:grid;place-items:center;margin-bottom:22px;color:var(--rame)}
@media(max-width:820px){.griglia3{grid-template-columns:1fr}}

/* immagine + testo */
.affianco{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.affianco.inverso{grid-template-columns:1fr 1.1fr}
.affianco.inverso .media{order:2}
.media img,.media video{border-radius:var(--raggio);border:1px solid var(--linea);width:100%}
@media(max-width:860px){.affianco,.affianco.inverso{grid-template-columns:1fr;gap:32px}.affianco.inverso .media{order:0}}
ul.punti{list-style:none;margin-top:22px}
ul.punti li{padding:12px 0 12px 30px;border-top:1px solid var(--linea);position:relative;color:var(--tenue)}
ul.punti li::before{content:"";position:absolute;left:4px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--rame)}

/* confronto */
.confronto{background:var(--bg2)}
.tabella{width:100%;border-collapse:collapse;margin-top:40px;font-size:.95rem}
.tabella th,.tabella td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.tabella thead th{font:500 .8rem "Space Grotesk";letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.tabella thead th:last-child{color:var(--rame)}
.tabella td:first-child{color:var(--testo);font-weight:600;width:22%}
.tabella td:nth-child(2){color:var(--tenue)}
.tabella td:last-child{color:var(--testo)}
.tabella td:last-child::before{content:"✓ ";color:var(--verde);font-weight:700}
.scorri{overflow-x:auto}
@media(max-width:700px){
  .tabella thead{display:none}
  .tabella tr{display:block;border-bottom:1px solid var(--linea);padding:14px 0}
  .tabella td{display:block;border:0;padding:4px 0;width:auto!important}
  .tabella td:nth-child(2)::before{content:"Tradizionale: ";color:#77757d}
}

/* eterno */
.griglia2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
@media(max-width:760px){.griglia2{grid-template-columns:1fr}}
.carta .numero{font:700 .8rem "Space Grotesk";color:var(--rame);letter-spacing:.14em}

/* elettrodi */
.diagramma{background:var(--bg2);border:1px solid var(--linea);border-radius:var(--raggio);padding:28px;margin-top:40px}

/* prova */
.prova{background:radial-gradient(1200px 500px at 50% 0%,#24180d 0%,var(--bg) 70%)}
.strumento{margin-top:40px;background:var(--bg2);border:1px solid var(--linea);border-radius:24px;padding:28px}
#manico{position:relative;height:120px;border-radius:16px;background:linear-gradient(180deg,#141418,#0d0d10);border:1px solid #33333d;cursor:pointer;touch-action:none;overflow:hidden;user-select:none}
#manico .tacca{position:absolute;top:0;bottom:0;width:1px;background:rgba(232,161,90,.18)}
#manico .tacca.do{background:rgba(232,161,90,.5)}
#manico .tacca span{position:absolute;bottom:6px;left:4px;font:500 .68rem "Space Grotesk";color:#8a7560}
#dito{position:absolute;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle,rgba(243,195,143,.9),rgba(232,161,90,.0) 70%);opacity:0;transition:opacity .15s;pointer-events:none}
.comandi{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:22px}
.comandi label{font-size:.85rem;color:var(--tenue);display:flex;align-items:center;gap:10px}
input[type=range]{accent-color:var(--rame);width:150px}
.misura{flex:1;min-width:200px}
.misura .barra{height:10px;border-radius:99px;background:var(--bg3);overflow:hidden;margin-top:6px}
.misura .barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rame),var(--rame2));transition:width .05s}
#leggiNota{font:700 2.2rem "Space Grotesk";min-width:110px;text-align:right}
.piccolo{padding:9px 16px;font-size:.85rem}
.piccolo.attivo{background:var(--rame);color:#1a1006;border-color:var(--rame)}

/* pulsanti */
.pulsantiera{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.tasto{background:var(--bg2);border:1px solid var(--linea);border-radius:16px;padding:22px}
.tasto b{display:flex;align-items:center;gap:12px;font:600 1.05rem "Space Grotesk";color:var(--testo)}
.tasto b i{width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,#d9d9de,#8c8c94);box-shadow:inset 0 -2px 4px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.4);flex:none}
.tasto p{font-size:.9rem;margin-top:10px}
.tasto em{font-style:normal;color:var(--rame2)}
@media(max-width:820px){.pulsantiera{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pulsantiera{grid-template-columns:1fr}}

/* tabelle tecniche */
.dati{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:18px}
.dati td,.dati th{padding:10px 12px;border-bottom:1px solid var(--linea);text-align:left}
.dati th{color:var(--tenue);font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.dati td:first-child{font-family:"Space Grotesk";color:var(--rame2);white-space:nowrap}
.dati td{color:var(--tenue)}
code{font:.88em ui-monospace,Menlo,monospace;background:var(--bg3);padding:2px 6px;border-radius:6px;color:var(--testo)}
pre{background:#08080a;border:1px solid var(--linea);border-radius:14px;padding:20px;overflow:auto;font:.84rem/1.6 ui-monospace,Menlo,monospace;color:#cfcdd4;margin-top:18px}

.schema{background:#f5f4f0;border-radius:var(--raggio);padding:14px;margin-top:36px}

/* galleria */
.galleria{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
.galleria figure{background:var(--bg2);border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden}
.galleria img,.galleria video{width:100%;aspect-ratio:4/3;object-fit:cover}
.galleria figcaption{padding:14px 18px;font-size:.85rem;color:var(--tenue)}
@media(max-width:700px){.galleria{grid-template-columns:1fr}}

/* stato */
.stato{display:grid;gap:10px;margin-top:36px}
.stato div{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;background:var(--bg2);border:1px solid var(--linea);border-radius:14px}
.stato b{flex:none;font:600 .75rem "Space Grotesk";letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.fatto b{background:rgba(127,214,164,.14);color:var(--verde)}
.dafare b{background:rgba(240,138,122,.13);color:var(--rosso)}
.inprova b{background:rgba(232,161,90,.15);color:var(--rame)}
.stato span{color:var(--tenue);font-size:.93rem}

/* scarica */
.scarica{background:var(--bg2)}
.file{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.file a{display:block;text-decoration:none;background:var(--bg);border:1px solid var(--linea);border-radius:16px;padding:22px;transition:border-color .2s,transform .15s}
.file a:hover{border-color:var(--rame);transform:translateY(-2px)}
.file b{display:block;color:var(--testo);font:600 1rem "Space Grotesk"}
.file span{font-size:.85rem;color:var(--tenue)}
.file a.grande{grid-column:1/-1;background:linear-gradient(120deg,#2a1b0c,#15110d);border-color:#5a3d1f}
.file a.grande b{font-size:1.3rem}
@media(max-width:820px){.file{grid-template-columns:1fr}}
.licenze{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:820px){.licenze{grid-template-columns:1fr}}

footer{padding:50px 0;border-top:1px solid var(--linea);color:#77757d;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.appare{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.appare.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.appare{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
.galleria figure.verticale img,.galleria figure.verticale video{object-fit:contain;background:#0d0d10}
