@font-face{font-family:"Instrument Serif";src:url(/font/instrument-serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/font/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/font/inter-tight.woff2) format("woff2");font-weight:300 800;font-display:swap}
/* ripieghi locali con metriche vicine: meno salti quando arrivano i font */
@font-face{font-family:"Serif ripiego";src:local("Times New Roman"),local("Georgia");size-adjust:92%;ascent-override:95%;descent-override:25%}
@font-face{font-family:"Sans ripiego";src:local("Helvetica Neue"),local("Arial");size-adjust:97%}

:root{
  --fondo:#050308;
  --fondo-2:#0b0812;
  --fondo-3:#151022;
  --ink:#f4f0fa;
  --ink-2:rgba(244,240,250,.68);
  --ink-3:rgba(244,240,250,.4);
  --filo:rgba(244,240,250,.1);
  --viola:#b95aff;
  --viola-scuro:#6d28d9;
  --oro:#e6b65c;
  --serif:"Instrument Serif","Serif ripiego",Georgia,serif;
  --sans:"Inter Tight","Sans ripiego",system-ui,sans-serif;
  --curva:cubic-bezier(.16,1,.3,1);
  --bordo:max(16px,4.5vw);
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-color:var(--viola) var(--fondo);background:var(--fondo);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--ink);font:400 18px/1.65 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
em{font-style:italic}
img,video,svg{display:block;max-width:100%}
::selection{background:var(--viola);color:#12061f}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px;border-radius:6px}
.salta{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--oro);color:#111;padding:10px 16px;border-radius:10px;font-weight:600}
.salta:focus{left:16px}
.contenitore{width:min(1240px,100%);margin:0 auto;padding:0 var(--bordo)}

/* grana leggera su tutta la pagina */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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")}

/* ---------- testata ---------- */
.testata{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;padding:18px var(--bordo);transition:background .4s,backdrop-filter .4s,padding .4s var(--curva)}
.testata.piena{background:rgba(7,5,12,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--filo)}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:17px;letter-spacing:-.01em}
.marchio-g{width:38px;height:38px;border-radius:9px;display:block;background:url(/favicon.svg) center/cover no-repeat;font-size:0;color:transparent;box-shadow:0 0 24px rgba(185,90,255,.35)}
.menu{display:flex;gap:30px;margin-left:auto;font-size:15px}
.menu a{text-decoration:none;color:var(--ink-2);transition:color .25s;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--curva)}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- pulsanti ---------- */
.btn{--x:50%;--y:50%;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--ink);color:#0b0712;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;max-width:100%;text-align:center;transition:transform .5s var(--curva),box-shadow .5s var(--curva)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(160px circle at var(--x) var(--y),var(--oro),transparent 70%);opacity:0;transition:opacity .35s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(185,90,255,.7)}
.btn:hover::before{opacity:1}
.btn-vuoto{background:rgba(244,240,250,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(244,240,250,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-vuoto::before{background:radial-gradient(160px circle at var(--x) var(--y),rgba(185,90,255,.55),transparent 70%)}
.btn-piccolo{min-height:42px;padding:0 20px;font-size:14px}
.btn-spento,.btn-spento:hover{background:rgba(244,240,250,.07);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--filo);cursor:not-allowed;transform:none}
.btn-spento::before{display:none}

/* ---------- etichette e titoli ---------- */
.etichetta{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--viola);letter-spacing:.02em;margin-bottom:22px}
.etichetta::before{content:"";width:28px;height:1px;background:currentColor}
.titolo-sezione{text-wrap:balance;font:400 clamp(40px,5.4vw,84px)/1.02 var(--serif);letter-spacing:-.02em;max-width:17ch}
.titolo-sezione.grande{font-size:clamp(44px,7vw,116px);max-width:16ch}
.titolo-sezione em{color:var(--ink-2)}
.nota{font-size:14px;color:var(--ink-3);margin-top:22px}

/* parole che salgono (le crea premium.js) */
.parola{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.parola>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--curva);transition-delay:calc(var(--i)*35ms)}
.vista .parola>span{transform:none}
.sale{opacity:0;transform:translateY(28px);transition:opacity 1s var(--curva),transform 1s var(--curva);transition-delay:var(--rit,0s)}
.vista.sale,.vista .sale{opacity:1;transform:none}
html:not(.js) .parola>span,html:not(.js) .sale{transform:none;opacity:1}

/* ---------- apertura ---------- */
.hero{position:relative;height:145vh;height:145svh}
.hero-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.hero-film{position:absolute;inset:0;overflow:hidden;background:var(--fondo) url(/video/hero-poster.jpg) center/cover no-repeat;transform-origin:50% 40%;will-change:transform,clip-path}
.hero-film video{width:100%;height:100%;object-fit:cover}
.hero-velo{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,5,12,.92) 0%,rgba(7,5,12,.55) 38%,rgba(7,5,12,0) 62%),
  linear-gradient(0deg,rgba(7,5,12,.95) 0%,rgba(7,5,12,0) 42%)}
.hero-testo{position:relative;z-index:2;padding:0 var(--bordo) clamp(40px,7vh,90px);width:min(980px,100%)}
.occhiello{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2);margin-bottom:18px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--viola);box-shadow:0 0 0 4px rgba(185,90,255,.18),0 0 18px var(--viola);flex:none;animation:pulsa 2.4s ease-in-out infinite}
.punto-giallo{background:var(--oro);box-shadow:0 0 0 4px rgba(230,182,92,.16),0 0 18px var(--oro)}
@keyframes pulsa{50%{box-shadow:0 0 0 8px rgba(185,90,255,0),0 0 18px var(--viola)}}
.titolo-hero{font:400 clamp(72px,11.5vw,196px)/.84 var(--serif);letter-spacing:-.035em;margin-left:-.04em}
.titolo-hero .riga{display:block;overflow:hidden;padding-bottom:.06em}
.titolo-hero .riga>span{display:inline-block;animation:sali 1.4s var(--curva) both}
.titolo-hero .riga:nth-child(2)>span{animation-delay:.12s}
.titolo-hero em{background:linear-gradient(100deg,#fff 10%,var(--viola) 55%,var(--oro) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
@keyframes sali{from{transform:translateY(105%)}}
.hero-sotto{max-width:560px;margin-top:26px;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);animation:entra 1.2s .45s var(--curva) both}
.hero-azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;animation:entra 1.2s .6s var(--curva) both}
@keyframes entra{from{opacity:0;transform:translateY(20px)}}
.hero-scorri{position:absolute;right:var(--bordo);bottom:clamp(56px,9vh,110px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);writing-mode:vertical-rl}
.hero-scorri span{width:1px;height:70px;background:linear-gradient(var(--ink-3),transparent);position:relative;overflow:hidden}
.hero-scorri span::after{content:"";position:absolute;left:0;top:-30px;width:1px;height:30px;background:var(--oro);animation:goccia 2s var(--curva) infinite}
@keyframes goccia{to{top:100%}}

/* ---------- chi sono ---------- */
.chi{position:relative;padding:clamp(72px,10vw,150px) 0 clamp(64px,8vw,120px);overflow:hidden}
.nastro{position:absolute;top:clamp(40px,7vw,110px);left:0;right:0;white-space:nowrap;pointer-events:none}
.nastro-in{display:inline-block;font:400 clamp(110px,19vw,300px)/1 var(--serif);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(244,240,250,.2);will-change:transform}
.nastro-in i{font-style:normal;color:rgba(185,90,255,.35);-webkit-text-stroke:0}
.chi-griglia{position:relative;width:min(1240px,100%);margin:0 auto;padding:0 var(--bordo);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.ritratto{position:relative;aspect-ratio:800/690}
.ritratto img{position:relative;width:100%;height:auto;-webkit-mask-image:radial-gradient(105% 92% at 38% 28%,#000 52%,transparent 78%);mask-image:radial-gradient(105% 92% at 38% 28%,#000 52%,transparent 78%);filter:drop-shadow(-18px 0 40px rgba(185,90,255,.28));transform:scale(1.04);transition:transform 1.6s var(--curva)}
.vista .ritratto img,.ritratto.vista img{transform:none}
.ritratto-luce{position:absolute;inset:-10% -12% 10%;background:radial-gradient(closest-side,rgba(185,90,255,.5),rgba(185,90,255,.12) 55%,transparent);filter:blur(10px)}
.chi-testo p,.storia-intro,.siti-testo>p{text-wrap:pretty}
.chi-testo p{color:var(--ink-2);margin-top:22px;max-width:52ch;font-size:clamp(17px,1.3vw,19px)}
.chi-testo .firma{font:italic 26px/1.3 var(--serif);color:var(--ink)}

/* ---------- storia ---------- */
.storia{padding:clamp(64px,8vw,130px) 0 clamp(72px,8vw,130px)}
.storia-intro{margin-top:28px;max-width:56ch;color:var(--ink-2);font-size:clamp(17px,1.3vw,19px)}
.tappe{position:relative;margin-top:clamp(56px,7vw,100px);padding-left:0}
.tappe::before,.tappe::after{content:"";position:absolute;left:calc(clamp(88px,12vw,180px) + 6px);top:10px;bottom:10px;width:1px;background:var(--filo)}
.tappe::after{background:linear-gradient(var(--viola),var(--oro));transform-origin:top;transform:scaleY(var(--avanza,0));box-shadow:0 0 14px var(--viola)}
.tappa{position:relative;display:grid;grid-template-columns:clamp(88px,12vw,180px) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--filo)}
.tappa:last-child{border-bottom:1px solid var(--filo)}
.tappa::before{content:"";position:absolute;left:calc(clamp(88px,12vw,180px) + 1px);top:calc(clamp(26px,3.4vw,44px) + 18px);width:11px;height:11px;border-radius:50%;background:var(--fondo);box-shadow:inset 0 0 0 1px var(--ink-3);z-index:1;transition:background .5s,box-shadow .5s}
.tappa.accesa::before{background:var(--oro);box-shadow:0 0 0 5px rgba(230,182,92,.15),0 0 18px var(--oro)}
.anno{font:400 clamp(34px,4.4vw,64px)/1 var(--serif);color:var(--ink-3);transition:color .6s}
.tappa.accesa .anno{color:var(--ink)}
.tappa h3{font:600 clamp(20px,1.8vw,26px)/1.25 var(--sans);letter-spacing:-.01em;padding-left:clamp(10px,2vw,24px)}
.tappa p{margin-top:10px;color:var(--ink-2);max-width:58ch;padding-left:clamp(10px,2vw,24px)}
.tappa-oggi .anno{font-style:italic;color:var(--oro)!important}

/* ---------- numeri ---------- */
.numeri{padding:clamp(64px,8vw,130px) 0;background:radial-gradient(70% 60% at 80% 0%,rgba(185,90,255,.14),transparent 70%),var(--fondo-2);border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.cifre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,90px);border-top:1px solid var(--filo)}
.cifre li{padding:34px 24px 0 0;border-right:1px solid var(--filo);margin-right:24px}
.cifre li:last-child{border-right:0}
.cifre b{display:block;font:400 clamp(52px,6.4vw,104px)/1 var(--serif);letter-spacing:-.03em;color:var(--oro);font-variant-numeric:tabular-nums;white-space:nowrap}
.cifre li:nth-child(n+3) b{color:var(--ink)}
.cifre span{display:block;margin-top:14px;color:var(--ink-2);font-size:16px;max-width:20ch}

/* ---------- sistemi ---------- */
.sistemi{padding:clamp(64px,8vw,130px) 0 clamp(24px,4vw,60px)}
.nota-alta{margin-top:20px}
.sistema{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(40px,6vw,90px) 0;border-top:1px solid var(--filo)}
.sistema:first-of-type{margin-top:clamp(40px,5vw,72px)}
.num{font:italic 22px/1 var(--serif);color:var(--viola)}
.sistema h3{font:400 clamp(48px,6.4vw,104px)/.95 var(--serif);letter-spacing:-.03em;margin-top:14px}
.sistema p{margin-top:20px;color:var(--ink-2);max-width:42ch}
.schermo{position:relative;border-radius:28px;background:linear-gradient(160deg,rgba(185,90,255,.14),rgba(21,16,34,.9) 40%);border:1px solid rgba(185,90,255,.25);padding:26px;min-height:340px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;transform:perspective(1200px) rotateX(var(--rx,8deg)) translateY(var(--ty,40px));opacity:var(--op,.2);transition:transform 1.2s var(--curva),opacity 1.2s var(--curva)}
.siti-scheda.vista::before{transform:none;opacity:1}
.schermo.on-scena{--rx:0deg;--ty:0px;--op:1}
.schermo::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,70%) var(--my,0%),rgba(185,90,255,.18),transparent 60%);pointer-events:none}
.s-testa{display:flex;align-items:center;gap:12px;font-weight:600;font-size:16px;padding-bottom:16px;border-bottom:1px solid var(--filo);margin-bottom:22px}
.s-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--viola),var(--viola-scuro));font:italic 18px/1 var(--serif)}
.b{max-width:78%;width:fit-content;padding:12px 18px;border-radius:20px;font-size:16px;line-height:1.35;margin-top:12px;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s var(--curva),transform .6s var(--curva)}
.b-loro{margin-left:auto;background:var(--viola);color:#12061f;font-weight:500;border-bottom-right-radius:6px}
.b-noi{background:#2a1a44;border:1px solid rgba(185,90,255,.3);border-bottom-left-radius:6px}
.s-tasti{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;opacity:0;transition:opacity .6s .9s}
.s-tasti span{text-align:center;padding:11px 4px;border-radius:12px;border:1px solid rgba(185,90,255,.45);font-size:14px;font-weight:600;color:#e9d8ff}
.s-tasti .on{background:rgba(185,90,255,.45)}
.chip{width:fit-content;margin-top:16px;padding:9px 16px;border-radius:30px;font-size:14px;font-weight:600;color:var(--oro);background:rgba(230,182,92,.1);border:1px solid rgba(230,182,92,.4);opacity:0;transition:opacity .5s .55s}
.on-scena .b{opacity:1;transform:none}
.on-scena .b:nth-of-type(2){transition-delay:.35s}
.on-scena .b:nth-of-type(3){transition-delay:.9s}
.on-scena .s-tasti,.on-scena .chip{opacity:1}
.schermo-app{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:22px}
.tel{border-radius:26px;background:#0b0813;border:1px solid rgba(255,255,255,.1);padding:24px 18px;min-height:290px}
.tel b{display:block;font:400 32px/1 var(--serif);margin-bottom:20px}
.tel i{display:block;height:44px;border-radius:12px;background:rgba(255,255,255,.04);margin-top:10px;position:relative;overflow:hidden}
.tel i::after{content:"";position:absolute;left:12px;right:12px;bottom:12px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--viola),var(--oro));transform-origin:left;transform:scaleX(0);transition:transform 1.4s .4s var(--curva);width:calc(var(--w) - 24px)}
.on-scena .tel i::after{transform:scaleX(1)}
.tel u{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;padding:12px 0;border-bottom:1px solid var(--filo)}
.tel u::before{content:"";width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(185,90,255,.7);flex:none;transition:background .4s,box-shadow .4s}
.on-scena .tel u.ok::before{background:var(--oro);box-shadow:inset 0 0 0 4px #0b0813,0 0 0 2px var(--oro)}
.on-scena .tel u.ok:nth-of-type(2)::before{transition-delay:.4s}
.pan-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pan-griglia div{border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--filo);padding:14px;height:170px;display:flex;flex-direction:column;justify-content:space-between}
.pan-griglia small{font-size:14px;font-weight:600}
.pan-griglia svg{width:100%;height:80px}
.pan-griglia path{fill:none;stroke:var(--viola);stroke-width:4;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s .3s var(--curva);vector-effect:non-scaling-stroke}
.pan-griglia path.g{stroke:var(--oro)}
.pan-griglia path.c{stroke:#e9d8ff}
.on-scena .pan-griglia path{stroke-dashoffset:0}

/* ---------- apribottega ---------- */
.siti{padding:clamp(40px,6vw,90px) 0 clamp(80px,10vw,160px)}
.siti-scheda{position:relative}
.siti-scheda>*{position:relative}
.siti-scheda::before{content:"";position:absolute;inset:0 var(--bordo);border-radius:36px;transform:scale(.94);opacity:.4;transition:transform 1.4s var(--curva),opacity 1.4s var(--curva);background:linear-gradient(150deg,#1a0f2e,#0c0816 60%);border:1px solid rgba(185,90,255,.3);box-shadow:0 60px 140px -50px rgba(185,90,255,.45)}
.siti-scheda{padding-top:clamp(48px,7vw,110px);padding-bottom:clamp(48px,7vw,110px)}
.siti-luce{position:absolute!important;right:calc(var(--bordo) + 4%);top:10%;width:min(420px,50%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(230,182,92,.22),transparent);filter:blur(20px);pointer-events:none}

/* ---------- shop ---------- */
.shop{padding:clamp(80px,10vw,160px) 0;border-top:1px solid var(--filo)}
.shop-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.shop-stato{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;border:1px solid rgba(230,182,92,.35);background:rgba(230,182,92,.07);color:var(--oro);font-weight:600;font-size:15px}
.prodotti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,72px)}
.prodotto{border-radius:26px;border:1px solid var(--filo);background:var(--fondo-2);padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px}
.p-img{aspect-ratio:4/3;border-radius:16px;background:radial-gradient(60% 60% at 30% 30%,rgba(185,90,255,.55),transparent 70%),radial-gradient(50% 50% at 75% 70%,rgba(230,182,92,.3),transparent 70%),#140d22;filter:blur(.5px);position:relative;overflow:hidden}
.p-img-2{background:radial-gradient(60% 60% at 70% 30%,rgba(230,182,92,.38),transparent 70%),radial-gradient(50% 50% at 25% 75%,rgba(185,90,255,.5),transparent 70%),#140d22}
.p-img-3{background:radial-gradient(70% 60% at 50% 40%,rgba(185,90,255,.5),transparent 70%),#140d22}
.p-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);transform:translateX(-100%);animation:luccica 3.2s ease-in-out infinite}
@keyframes luccica{60%,100%{transform:translateX(100%)}}
.p-riga{height:12px;border-radius:6px;background:rgba(244,240,250,.09);width:40%}
.p-riga.lunga{width:72%;height:16px;margin-top:6px}
.prodotto .btn{margin-top:8px;width:100%;font-size:14px}
.shop-piede{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:36px;color:var(--ink-2);font-size:15px}
.metodi{display:flex;gap:10px}
.metodo{padding:8px 16px;border-radius:10px;background:rgba(244,240,250,.06);border:1px solid var(--filo);font-weight:700;letter-spacing:-.01em;color:var(--ink-2);font-size:15px}
.shop-piede .nota{flex-basis:100%;margin-top:0}

/* ---------- contatti ---------- */
.contatti{position:relative;isolation:isolate;padding:clamp(90px,12vw,190px) 0;overflow:hidden}
.contatti::before,.contatti::after{content:"";position:absolute;z-index:-2;width:70vw;aspect-ratio:1;border-radius:50%;filter:blur(60px);pointer-events:none}
.contatti::before{left:-10vw;bottom:-45vw;background:radial-gradient(closest-side,rgba(185,90,255,.45),transparent);animation:aurora 16s ease-in-out infinite alternate}
.contatti::after{right:-15vw;bottom:-50vw;background:radial-gradient(closest-side,rgba(230,182,92,.18),transparent);animation:aurora 20s ease-in-out infinite alternate-reverse}
@keyframes aurora{to{transform:translate(18vw,-8vw) scale(1.15)}}
.titolo-contatti{font:400 clamp(100px,20vw,320px)/.85 var(--serif);letter-spacing:-.045em}
.titolo-contatti em{color:var(--oro)}
.contatti-sotto{margin-top:26px;color:var(--ink-2);font-size:clamp(17px,1.4vw,20px)}

/* ---------- piede ---------- */
.piede{padding:32px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--filo);color:var(--ink-3);font-size:15px}
.piede-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.piede nav{display:flex;gap:22px}
.piede a{text-decoration:none;color:var(--ink-2)}
.piede a:hover{color:var(--ink)}

/* ---------- telefono e tablet ---------- */
@media (max-width:980px){
  .menu{display:none}
  .testata .btn-piccolo{margin-left:auto}
  .chi-griglia,.sistema{grid-template-columns:minmax(0,1fr)}
  .ritratto{max-width:520px}
  .cifre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifre li{border-right:0;margin-right:0;padding:28px 12px 28px 0;border-bottom:1px solid var(--filo)}
  .cifre li:nth-child(odd){border-right:1px solid var(--filo);margin-right:16px}
  .prodotti{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:17px}
  .hero{height:125svh}
  .hero-testo{padding-bottom:40px}
  .titolo-hero{font-size:clamp(64px,19vw,96px)}
  .hero-sotto{margin-top:18px;font-size:16px}
  .hero-azioni{margin-top:22px;gap:10px}
  .occhiello{margin-bottom:12px;font-size:14px}
  .chi{padding-top:84px}
  .nastro{top:20px}
  .ritratto{margin:0 -8px}
  .storia,.numeri,.sistemi,.shop{padding-top:64px;padding-bottom:64px}
  .contatti{padding:72px 0 80px}
  .prodotto{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:8px;align-items:center;padding:12px}
  .prodotto .p-img{grid-row:1/4;aspect-ratio:1;border-radius:12px}
  .prodotto .p-riga.lunga{margin-top:0}
  .prodotto .btn{margin-top:4px;min-height:40px;font-size:13px;padding:0 12px}
  .marchio-n{display:none}
  .hero-velo{background:linear-gradient(0deg,rgba(7,5,12,1) 0%,rgba(7,5,12,.88) 38%,rgba(7,5,12,0) 64%)}
  .hero-scorri{display:none}
  .hero-azioni .btn{flex:1 1 100%}
  .titolo-hero{font-size:clamp(68px,22vw,120px)}
  .cifre{grid-template-columns:minmax(0,1fr)}
  .cifre li,.cifre li:nth-child(odd){border-right:0;margin-right:0}
  .prodotti{grid-template-columns:minmax(0,1fr)}
  .tappe::before,.tappe::after{left:5px}
  .tappa{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:34px}
  .tappa::before{left:0;top:calc(clamp(26px,3.4vw,44px) + 12px)}
  .tappa h3,.tappa p{padding-left:0}
  .schermo{min-height:0;padding:18px}
  .schermo-app{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .tel{padding:16px 12px;min-height:240px}
  .tel b{font-size:24px}
  .pan-griglia div{height:130px;padding:10px}
  .pan-griglia small{font-size:12px}
  .siti-scheda::before{inset:0 8px;border-radius:28px}
  .siti-scheda .hero-azioni .btn{flex:1 1 100%}
}


/* ---------- h1: seconda riga ---------- */
.h1-sotto{display:block;margin-top:.35em;font:500 clamp(22px,2.6vw,42px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink);max-width:22ch;animation:entra 1.2s .3s var(--curva) both}

/* ---------- scena fissa dei sistemi (computer) ---------- */
.scena-fissa{position:relative}
.sf-palco{display:none}
@media (min-width:981px){
  .scena-fissa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,80px);margin-top:clamp(40px,5vw,72px)}
  .sf-lista .sistema{display:flex;align-items:center;min-height:78vh;padding:0;border-top:1px solid var(--filo)}
  .sf-lista .sistema:first-of-type{margin-top:0}
  .sf-lista .sistema-testo{opacity:.28;transition:opacity .6s var(--curva)}
  .sf-lista .sistema.attivo .sistema-testo{opacity:1}
  .sf-palco{display:block;position:sticky;top:12vh;height:76vh;align-self:start}
  .sf-palco .schermo{position:absolute;left:0;right:0;top:50%;--ty:-46%;margin:0}
  .sf-palco .schermo:not(.on-scena){--ty:-40%;--rx:10deg;--op:0;pointer-events:none}
  .sf-palco .schermo.on-scena{--ty:-50%}
  .sf-conta{position:absolute;right:0;bottom:0;font-size:14px;color:var(--ink-3);letter-spacing:.06em}
  .sf-conta b{font:italic 400 34px/1 var(--serif);color:var(--oro);letter-spacing:0}
}

/* ---------- anteprima del sito (browser) ---------- */
.siti-griglia{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:center;margin:0 clamp(24px,5vw,80px)}
.siti-griglia .etichetta,.siti-griglia h2{margin-left:0;margin-right:0}
.siti-griglia .titolo-sezione.grande{font-size:clamp(44px,5.2vw,88px)}
.siti-testo>p{max-width:58ch;color:var(--ink-2);margin-top:22px}
.siti-testo>p a{color:var(--ink);text-decoration-color:var(--oro);text-underline-offset:4px}
.browser{border-radius:18px;overflow:hidden;background:#f3ede2;box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(230,182,92,.35),0 0 80px -20px rgba(185,90,255,.5);transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);transition:transform 1.2s var(--curva)}
.browser:hover{transform:none}
.br-barra{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#1a1424}
.br-barra i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.br-barra span{margin-left:14px;flex:1;height:24px;border-radius:7px;background:rgba(255,255,255,.07);font-size:12px;line-height:24px;padding-left:12px;color:var(--ink-2)}
.br-vista{height:min(460px,60vw);overflow:hidden}
.br-vista img{width:100%;height:auto;animation:sfoglia 22s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes sfoglia{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + min(460px,60vw)))}}
.browser figcaption{background:#1a1424;color:var(--ink-2);font-size:13px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.06)}

/* ---------- contatti: scena finale ---------- */
.contatti-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:clamp(40px,5vw,64px)}
.btn-wa{min-height:84px;padding:0 40px 0 30px;font-size:clamp(19px,1.7vw,24px);gap:16px;background:linear-gradient(120deg,#f7dc96,var(--oro) 50%,#b7832b);color:#140c04;box-shadow:0 20px 60px -18px rgba(230,182,92,.7)}
.btn-wa small{font-size:.72em;font-weight:500;opacity:.75;padding-left:14px;border-left:1px solid rgba(20,12,4,.25)}
.btn-wa::before{background:radial-gradient(180px circle at var(--x) var(--y),rgba(255,255,255,.7),transparent 70%)}
.wa-ico{width:30px;height:30px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7.5-.1 1.5-.6 1.7-1.2s.2-1.1.1-1.2-.2-.2-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7.5-.1 1.5-.6 1.7-1.2s.2-1.1.1-1.2-.2-.2-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.contatti-mail{font:400 clamp(28px,3.4vw,52px)/1.1 var(--serif);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--filo);padding-bottom:6px;transition:border-color .3s,color .3s;overflow-wrap:anywhere}
.contatti-mail i{font-style:normal;color:var(--oro);display:inline-block;transition:transform .5s var(--curva)}
.contatti-mail:hover{border-color:var(--oro)}
.contatti-mail:hover i{transform:translateX(8px)}

/* ---------- cursore luminoso (solo mouse) ---------- */
.cursore{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursore{display:block;opacity:0;transition:opacity .4s;position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:0;height:0}
  .cursore::before{content:"";position:absolute;width:420px;height:420px;left:-210px;top:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(185,90,255,.2),rgba(185,90,255,.06) 50%,transparent);mix-blend-mode:screen;transition:transform .5s var(--curva)}
  .cursore i{position:absolute;width:10px;height:10px;left:-5px;top:-5px;border-radius:50%;background:var(--oro);box-shadow:0 0 14px var(--oro);transition:transform .35s var(--curva),opacity .3s}
  .cursore.mosso{opacity:1}
  .cursore.su-link i{transform:scale(4.2);opacity:.35}
  .cursore.su-link::before{transform:scale(1.25)}
}

/* ---------- scorrimento fluido (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

@media (max-width:980px){
  .siti-griglia{grid-template-columns:minmax(0,1fr)}
  .browser{transform:none}
}
@media (max-width:640px){
  .siti-griglia{margin:0 10px}
  .br-vista{height:340px}
  @keyframes sfoglia{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 340px))}}
  .btn-wa{width:100%;min-height:76px;padding:0 20px;flex-wrap:wrap;row-gap:0}
  .btn-wa small{border-left:0;padding-left:0;flex-basis:100%;text-align:center}
  .h1-sotto{font-size:clamp(21px,6vw,26px)}
}

/* ---------- meno movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .parola>span,.sale,.schermo,.ritratto img,.b,.browser,.br-vista img{animation:none!important;transition:opacity .4s linear!important;transform:none!important}
  .hero{height:auto}
  .hero-palco{position:relative;height:100svh}
  .nastro-in{transform:none!important}
}