:root{--bg:#0a0e17;--bg2:#070b13;--cy:#00e5ff;--blue:#0a7fc2;--light:#eef2f5;--cream:#f3f3f1;--ink:#0a0e17;--mut:#5a6b7d;
--d:'Outfit',sans-serif;--b:'Plus Jakarta Sans',sans-serif;--m:'JetBrains Mono',monospace;--w:1280px;--side:clamp(24px,5vw,140px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--b);background:var(--bg);color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--d);letter-spacing:-.04em;line-height:1}
.cy{color:var(--cy)}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--cy),#6d5cff)}
 
/* NAV */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc(var(--side)));height:100px;background:rgba(10,14,23,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:14px}
.logo{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:#05080f}
.brand-text{font-family:var(--d);font-weight:600;font-size:18px;letter-spacing:.2em}
.brand-text b{color:var(--cy);font-weight:600}
.menu{display:flex;gap:44px;font-size:18px}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{display:flex;padding:4px;border:1px solid rgba(255,255,255,.15);border-radius:99px;font-family:var(--m);font-size:14px}
.lang button{background:none;border:0;color:#fff;padding:8px 14px;border-radius:99px;cursor:pointer;font:inherit}
.lang button.on{background:#fff;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:0 28px;height:50px;border-radius:99px;font-size:18px;font-weight:500;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.cyan{background:var(--cy);color:var(--ink)}
.btn.white{background:#fff;color:var(--ink);height:65px;padding:0 34px;box-shadow:0 0 40px rgba(255,255,255,.18)}
.btn.ghost{border:1px solid rgba(255,255,255,.25);height:65px;padding:0 34px;font-family:var(--d);font-weight:600}
 
/* HERO */
.hero{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;min-height:calc(100vh - 100px);padding:20px max(24px,calc(var(--side))) 60px;overflow:hidden;
background:radial-gradient(ellipse at 75% 55%,rgba(0,150,170,.28),transparent 55%),
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,var(--bg)}
.hero h1{font-size:clamp(64px,9vw,140px);font-weight:600;line-height:1.12;margin-left:-4px}
.hero h1 .outline{font-weight:300;font-style:italic;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);display:inline-block;transform:skewX(-6deg)}
.hero h1 .cy{font-weight:700}
.hero p{max-width:690px;margin:48px 0;font-size:24px;line-height:1.5;color:#c9d2dc}
.cta{display:flex;gap:20px;flex-wrap:wrap}
.orb-wrap{position:relative;display:grid;place-items:center}
.orbits{width:100%;animation:spin 60s linear infinite;transform-origin:center}
.orb{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6fbff 0,#3fd8e6 14%,#0f9eb1 45%,#064b57 80%,#03282f);box-shadow:0 0 90px rgba(0,229,255,.25)}
@keyframes spin{to{transform:rotate(360deg)}}
 
/* MARQUEE */
.marquee{background:#fff;color:var(--ink);overflow:hidden;padding:44px 0}
.track{display:flex;gap:48px;align-items:center;width:max-content;animation:slide 40s linear infinite;font-family:var(--d);font-size:84px;letter-spacing:-.04em;white-space:nowrap}
.track .o{color:transparent;-webkit-text-stroke:1px #aaa}
.track i{font-style:normal;font-size:40px;color:#0a8fd0}
@keyframes slide{to{transform:translateX(-50%)}}
 
/* PRINCIPI / CARD */
.principles{padding:150px max(24px,calc(var(--side))) 130px;color:var(--ink);background:linear-gradient(rgba(10,14,23,.05) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(10,14,23,.05) 1px,transparent 1px) 0 0/80px 80px,var(--light)}
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--m);font-size:15px;letter-spacing:.25em;color:#0a6fa8;margin-bottom:34px}
.eyebrow u{width:40px;height:1px;background:currentColor}
.eyebrow em{margin-left:auto;font-style:normal;letter-spacing:.05em}
.cyan-t{color:var(--cy)}.blue-t{color:var(--blue)}
.principles h2{font-size:clamp(48px,6vw,84px);font-weight:600;margin-bottom:80px;line-height:1.05}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{display:flex;flex-direction:column;justify-content:space-between;min-height:250px;padding:40px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(10,14,23,.07)}
.meta{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--m);color:#6b7785;font-size:15px}
.meta svg{width:30px;height:30px;fill:none;stroke:#0a6fa8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:30px;font-weight:600;margin:60px 0 16px}
.card p{color:var(--mut);font-size:18px;line-height:1.65;max-width:560px}
.c1{grid-column:span 5;grid-row:span 2;min-height:540px;background:radial-gradient(circle at 85% 65%,rgba(0,150,170,.45),transparent 55%),var(--bg);color:#fff}
.c1 .meta{color:var(--cy)}.c1 .meta svg{stroke:var(--cy)}
.c1 h3{font-size:72px;font-weight:600;margin:0 0 20px}
.c1 p{color:#dfe7ee;font-size:22px;line-height:1.5}
.c2,.c3{grid-column:span 3}.c4{grid-column:span 6}
.c5,.c6{grid-column:span 3}.c7{grid-column:span 6}
.c4,.c7{min-height:275px}
 
/* STATEMENT */
.statement{background:var(--bg);padding:200px max(24px,calc(var(--side)) + 100px)}
.statement p{font-family:var(--d);font-weight:300;font-size:clamp(36px,4.6vw,68px);line-height:1.2;letter-spacing:-.035em}
.fade1{color:#0e8c99}.fade2{color:#0b4650}
 
/* DUO */
.duo{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;padding:140px max(24px,calc(var(--side))) 160px;background:var(--cream);color:var(--ink)}
.panel{position:relative;border-radius:28px;padding:50px;min-height:595px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:0 30px 60px rgba(10,14,23,.12)}
.panel h2{font-size:clamp(38px,4.2vw,60px);font-weight:600;margin-bottom:22px;line-height:1.05}
.panel p{font-size:20px;line-height:1.5;max-width:640px;margin-bottom:34px}
.link{font-family:var(--d);font-weight:500;font-size:19px}
.product{background:#000;color:#fff}
.product p{color:#dbe3ea}
.device{position:absolute;top:0;left:50%;width:330px;height:560px;transform:translateX(-50%);border-radius:50px 50px 40px 40px;background:linear-gradient(120deg,#2b2f34,#555a60 45%,#15181c);opacity:.85;box-shadow:inset 0 0 0 1px #777}
.device::after{content:"";position:absolute;inset:26px 26px 40px;border-radius:40px;border:4px solid #5be9f5;box-shadow:0 0 25px rgba(0,229,255,.6),inset 0 0 25px rgba(0,229,255,.25)}
.panel-body{position:relative;z-index:1}
.token{background:#fff}
.token p{color:#35607f}
.chart{width:100%;height:230px;margin:10px 0 50px}
 
/* RESPONSIVE */
@media(max-width:1000px){
.menu{display:none}.nav{height:80px}
.hero{grid-template-columns:1fr}.orb-wrap{margin-top:30px}
.bento>*{grid-column:span 12!important}.c1{min-height:420px}.c1 h3{font-size:52px}
.duo,.f-grid{grid-template-columns:1fr}.track{font-size:56px}
}
@media(prefers-reduced-motion:reduce){.orbits,.track{animation:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
 
/* ===== EFFETTI ===== */
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(0,229,255,.10),transparent 65%);transition:opacity .3s;mix-blend-mode:screen}
.nav{transition:height .3s,background .3s}
.nav.small{height:76px;background:rgba(7,11,19,.95)}
 
/* navbar compatta allo scroll: resta solo il marchio, che scivola al centro */
.nav .brand{transition:transform .7s cubic-bezier(.65,0,.2,1);will-change:transform}
.nav .menu,.nav .nav-right{transition:opacity .35s ease,transform .5s cubic-bezier(.65,0,.2,1),visibility 0s linear 0s}
.nav.small .brand{transform:translateX(var(--bx,0px))}
.nav.small .menu,.nav.small .nav-right{opacity:0;transform:translateY(-14px);visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.65,0,.2,1),visibility 0s linear .45s}
.nav.morph .brand{transition:none}
.nav .bl{white-space:nowrap}
 
/* hero: entrata a sequenza al caricamento */
.hero h1,.hero p,.hero .cta{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.25s}.hero .cta{animation-delay:.4s}
.orb-wrap{animation:fadeIn 1.6s .2s both}
.orb{animation:float 6s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@keyframes fadeIn{from{opacity:0;transform:scale(.85)}}
@keyframes float{50%{transform:translateY(-16px)}}
.btn.cyan:hover{box-shadow:0 0 30px rgba(0,229,255,.55)}
.btn.white:hover{box-shadow:0 0 60px rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--cy)}
.btn span,.link span{display:inline-block;transition:transform .25s}
.btn:hover span,.link:hover span{transform:translate(4px,-4px)}
 
/* righe di parole che scorrono */
.marquee{padding:36px 0;display:flex;flex-direction:column;gap:18px}
.track.rev{animation-direction:reverse;animation-duration:55s}
.track.small{font-size:44px;gap:36px;opacity:.9}
.track.small i{font-size:24px}
.marquee:hover .track{animation-play-state:paused}
 
/* comparsa allo scroll */
.js .reveal{opacity:0;transform:translateY(48px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.left{transform:translateX(-60px)}
.js .reveal.scale{transform:scale(.94)}
.js .reveal.in.left,.js .reveal.in.scale{transform:none}
 
/* card: inclinazione 3D + luce che segue il mouse */
.card,.panel{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;position:relative}
.card::before,.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,190,230,.16),transparent 60%)}
.card:hover::before,.panel:hover::before{opacity:1}
.card:hover{box-shadow:0 24px 50px rgba(10,14,23,.14)}
.meta svg{transition:transform .5s}
.card:hover .meta svg{transform:rotate(12deg) scale(1.15)}
 
/* frase a parole */
.statement .w{opacity:.15;transition:opacity .4s}
.statement .w.on{opacity:1}
 
/* prodotto + grafico */
.device{animation:float 7s ease-in-out infinite}
.chart .line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s .3s ease}
.token.in .chart .line{stroke-dashoffset:0}
 
@media(prefers-reduced-motion:reduce){
.hero h1,.hero p,.hero .cta,.orb-wrap,.device{animation:none}
.js .reveal{opacity:1;transform:none;transition:none}
.chart .line{stroke-dashoffset:0}.statement .w{opacity:1}
}
 
/* ===== PAGINA PRODOTTO ===== */
.wrap{max-width:none;margin:0;padding:0 var(--side)}
.p-hero{padding:80px 0 120px;background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/80px 80px,var(--bg)}
.title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.p-hero h1{font-size:clamp(64px,11.5vw,176px);font-weight:700;letter-spacing:-.05em;line-height:1.05;white-space:nowrap}
.ch{display:inline-block;animation:chIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*.06s + .1s)}
.sp{display:inline-block;width:.22em}
@keyframes chIn{from{opacity:0;transform:translateY(70px) rotate(4deg);filter:blur(8px)}}
.price-box{text-align:right;padding-bottom:18px;animation:rise .9s .6s both}
.price{font-family:var(--d);font-weight:300;font-size:clamp(48px,5vw,76px);letter-spacing:-.03em;line-height:1}
.vat{font-family:var(--m);font-size:14px;letter-spacing:.25em;color:#9fb0c0;margin-top:14px}
.sub{font-size:24px;color:#d3dbe4;margin:40px 0 70px;animation:rise .9s .8s both}
 
/* stage con prodotto 3D */
.stage-wrap{position:relative;animation:rise 1.1s .9s both}
.stage{position:relative;height:min(78vh,780px);min-height:520px;border-radius:30px;overflow:hidden;cursor:crosshair;
background:radial-gradient(ellipse 28% 55% at 50% 0,rgba(190,210,215,.45),transparent 70%),radial-gradient(ellipse at 15% 70%,rgba(0,110,110,.35),transparent 55%),#030506}
.stage-label{position:absolute;top:28px;left:28px;z-index:3;font-family:var(--m);font-size:14px;letter-spacing:.3em;color:#cfd8e0}
.corner{position:absolute;width:18px;height:18px;border:0 solid #8a98a6}
.corner.tl{top:-4px;left:-4px;border-top-width:1px;border-left-width:1px}
.corner.br{bottom:-4px;right:-4px;border-bottom-width:1px;border-right-width:1px;border-color:var(--cy)}
.scene{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px}
.device3d{position:relative;width:300px;height:480px;transform-style:preserve-3d;animation:spin3d 14s linear infinite}
.slice{position:absolute;inset:0;border-radius:42px;background:linear-gradient(110deg,#2a2f34,#7c838a 45%,#2a2f34 70%,#16191d)}
.slice.front,.slice.back{background:linear-gradient(135deg,#3a4348,#222a2e 60%,#171c1f)}
.slice.front::after,.slice.back::after{content:"";position:absolute;inset:18px;border-radius:30px;border:3px solid #5fe9f5;box-shadow:0 0 22px rgba(0,229,255,.65),inset 0 0 22px rgba(0,229,255,.25)}
@keyframes spin3d{to{transform:rotateY(360deg)}}
.prod-img{width:min(420px,60%);animation:spin3d 14s linear infinite;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.floor{position:absolute;bottom:7%;left:50%;width:420px;height:70px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,229,255,.28),transparent 70%);filter:blur(14px)}
/* punto luce blu che segue il mouse */
.spot{position:absolute;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;z-index:2;opacity:0;
background:radial-gradient(circle,rgba(20,150,255,.75),rgba(20,150,255,0) 70%);filter:blur(26px);transition:opacity .35s}
.stage:hover .spot{opacity:1}
 
/* info */
.p-info{padding:150px 0 170px;color:var(--ink);background:linear-gradient(rgba(10,14,23,.045) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(10,14,23,.045) 1px,transparent 1px) 0 0/80px 80px,var(--cream)}
.info-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.desc p{font-size:24px;line-height:1.5;color:#26323f;margin-bottom:34px}
.specs{border-top:1px solid #d5d9dd}
.specs .row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 10px;border-bottom:1px solid #d5d9dd;transition:background .3s,padding .3s}
.specs .row:hover{background:rgba(0,170,220,.07);padding-left:20px}
.specs dt{font-family:var(--m);font-size:14px;letter-spacing:.3em;color:#6b7785}
.specs dd{font-size:18px;text-align:right}
 
/* pulsante acquisto: riempimento da sinistra a destra */
.buy{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;overflow:hidden;margin-top:90px;height:170px;padding:0 40px 0 60px;border-radius:99px;background:var(--bg);color:#fff;box-shadow:0 30px 60px -22px rgba(0,229,255,.45);transition:color .35s}
.buy::before{content:"";position:absolute;inset:0;background:#19b8ff;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.buy:hover::before,.buy:focus-visible::before{transform:scaleX(1);transform-origin:left}
.buy:hover,.buy:focus-visible{color:#05080f}
.buy>*{position:relative;z-index:1}
.buy-t{font-family:var(--d);font-weight:600;font-size:clamp(38px,4.6vw,68px);letter-spacing:-.04em}
.buy-r{display:flex;align-items:center;gap:28px}
.buy-p{font-family:var(--d);font-size:30px}
.buy-a{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--cy);color:#05080f;transition:background .35s,color .35s,transform .35s}
.buy:hover .buy-a{background:#05080f;color:#fff;transform:translateX(6px)}
.secure{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;font-family:var(--m);font-size:14px;color:#0a6fa8}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.trust .t{display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:18px;background:#fff;font-size:18px;box-shadow:0 10px 30px rgba(10,14,23,.07);transition:transform .3s,box-shadow .3s}
.trust .t:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(10,14,23,.12)}
.trust svg{width:26px;height:26px;fill:none;stroke:#0a6fa8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
 
/* comparsa */
.js .specs .row{opacity:0;transform:translateX(40px);transition:opacity .8s,transform .8s,background .3s,padding .3s;transition-delay:var(--delay,0s)}
.js .specs .row.in{opacity:1;transform:none}
.js .stage-wrap{clip-path:inset(0 0 0 0 round 30px)}
 
@media(max-width:1000px){
.info-grid,.trust{grid-template-columns:1fr}.buy{height:120px;padding:0 24px 0 32px}.buy-a{width:56px;height:56px}.buy-p{display:none}
.device3d{transform-origin:center;scale:.75}
}
@media(hover:none){.spot{display:none}}
@media(prefers-reduced-motion:reduce){.ch,.price-box,.sub,.stage-wrap{animation:none}.js .specs .row{opacity:1;transform:none}}
.js .buy.reveal{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),color .35s}
.js .trust .t.reveal.in{transition-delay:0s;transition-duration:.9s,.3s,.3s}
 
/* ===== MINI VIDEO: DISPOSITIVO CHE SI SCOMPONE ===== */
.part{position:absolute;opacity:0;pointer-events:none}
.pt-shell{inset:0;border-radius:42px;background:linear-gradient(110deg,#2a2f34,#7c838a 45%,#2a2f34 70%,#16191d)}
.pt-batt{left:62px;right:62px;top:268px;height:140px;border-radius:18px;background:linear-gradient(135deg,#323941,#14181c);border:1px solid #6b7884;box-shadow:inset 0 0 0 6px rgba(255,255,255,.03)}
.pt-pcb{left:30px;right:30px;top:40px;bottom:40px;border-radius:22px;border:1px solid #1d7a86;background:repeating-linear-gradient(90deg,rgba(0,229,255,.16) 0 1px,transparent 1px 14px),repeating-linear-gradient(0deg,rgba(0,229,255,.16) 0 1px,transparent 1px 14px),#0a2a30}
.pt-chip{left:102px;top:120px;width:96px;height:96px;border-radius:12px;border:2px solid #5fe9f5;background:linear-gradient(135deg,#1d272e,#0b1014);box-shadow:0 0 26px rgba(0,229,255,.55),inset 0 0 14px rgba(0,229,255,.25)}
.pt-ring{inset:18px;border-radius:30px;border:3px solid #5fe9f5;box-shadow:0 0 22px rgba(0,229,255,.7),inset 0 0 22px rgba(0,229,255,.25)}
.pt-glass{inset:0;border-radius:42px;border:1.5px solid rgba(190,240,255,.6);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(110,220,255,.05) 55%,rgba(255,255,255,.1))}
.plabel{position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--m);font-size:12px;letter-spacing:.22em;color:#9fe9f2;opacity:0}
@media(max-width:1000px){.plabel{display:none}}
 
/* ===== MENU: effetto di sollevamento (vale per tutte le pagine) ===== */
.menu a{position:relative;display:inline-block;padding:8px 0;opacity:.85;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s,color .25s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--cy);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menu a:hover,.menu a:focus-visible,.menu a.active{opacity:1}
.menu a:hover,.menu a:focus-visible{transform:translateY(-4px)}
.menu a:hover::after,.menu a:focus-visible::after,.menu a.active::after{transform:scaleX(1)}
 
/* ===== MICROCHIP, ONDE D'URTO E SCINTILLE ===== */
.pt-micro{border-radius:6px;border:1.5px solid #5fe9f5;background:linear-gradient(135deg,#222c33,#0b1014);box-shadow:0 0 16px rgba(0,229,255,.6)}
.pt-micro::before{content:"";position:absolute;inset:-5px;opacity:.8;background:
repeating-linear-gradient(90deg,#5fe9f5 0 2px,transparent 2px 7px) top/100% 4px no-repeat,
repeating-linear-gradient(90deg,#5fe9f5 0 2px,transparent 2px 7px) bottom/100% 4px no-repeat,
repeating-linear-gradient(0deg,#5fe9f5 0 2px,transparent 2px 7px) left/4px 100% no-repeat,
repeating-linear-gradient(0deg,#5fe9f5 0 2px,transparent 2px 7px) right/4px 100% no-repeat}
.pt-micro::after{content:"";position:absolute;inset:28%;border:1px solid rgba(95,233,245,.7);border-radius:2px;background:rgba(0,229,255,.12)}
.pt-micro .plabel{font-size:11px;letter-spacing:.18em}
.spark{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#9ff6ff;box-shadow:0 0 10px 2px rgba(0,229,255,.9);opacity:0;pointer-events:none}
.shock{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;border:2px solid #5fe9f5;box-shadow:0 0 40px rgba(0,229,255,.6),inset 0 0 40px rgba(0,229,255,.3);opacity:0;pointer-events:none}
.flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(130,242,255,.6),rgba(0,150,200,.15) 40%,transparent 62%)}
 
/* ===== FOOTER ===== */
.footer{background:#070b13;border-top:1px solid rgba(255,255,255,.08);padding:90px max(24px,calc(var(--side))) 36px}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px}
.tag{margin-top:24px;max-width:320px;color:#9aa8b8;font-size:16px;line-height:1.6}
.f-col{display:flex;flex-direction:column;gap:14px;font-size:16px;color:#c3ceda}
.f-col h4{font-family:var(--d);font-weight:600;font-size:17px;letter-spacing:-.01em;color:#fff;margin-bottom:8px}
.f-col a{width:max-content;color:#aab6c3;transition:color .2s,transform .25s}
.f-col a:hover{color:var(--cy);transform:translateX(3px)}
.f-col span{color:#7f8da0}
.f-risk{margin-top:64px;padding:22px 26px;border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--cy);border-radius:10px;background:rgba(255,255,255,.02);font-size:14px;line-height:1.7;color:#8fa0b2;max-width:980px}
.f-risk b{color:#d3dbe4;font-weight:500}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#7f8da0}
.f-legal{display:flex;gap:26px}
.f-legal a:hover{color:#fff}
@media(max-width:1000px){.f-grid{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
 
/* ===== PULSANTE ACQUISTA: lampo quando ci arrivi ===== */
.buy.ping{animation:ping 1.6s ease-out 1}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,229,255,.75)}100%{box-shadow:0 0 0 44px rgba(0,229,255,0)}}
 
/* ===== PAGINA INVESTI ===== */
.pad-x{padding-left:max(24px,calc(var(--side)));padding-right:max(24px,calc(var(--side)))}
.hero.i-hero{display:block;min-height:0;padding-top:70px;padding-bottom:0;background:radial-gradient(ellipse at 8% 55%,rgba(70,70,190,.22),transparent 50%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,var(--bg)}
.i-hero h1{font-size:clamp(56px,8.4vw,130px);line-height:1.12}
.i-hero p{max-width:840px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.stat{padding:34px 28px 34px 0;border-right:1px solid rgba(255,255,255,.1)}
.stat+.stat{padding-left:32px}.stat:last-child{border-right:0}
.stat span{display:block;font-family:var(--m);font-size:14px;letter-spacing:.3em;color:#9fb0c0;margin-bottom:22px}
.stat b{font-family:var(--d);font-weight:400;font-size:32px;letter-spacing:-.02em}
 
.market{padding-top:90px;padding-bottom:130px;background:var(--bg)}
.chart-card{padding:40px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#10162a,#0c1120)}
.cc-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cc-head h2{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em}
.badge{padding:9px 16px;border:1px solid rgba(0,229,255,.45);border-radius:99px;font-family:var(--m);font-size:14px;color:var(--cy)}
.cc-bar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin:34px 0 18px}
.cc-stats{display:flex;gap:46px;flex-wrap:wrap}
.cs span{display:block;font-size:13px;color:#8fa0b2;margin-bottom:6px}
.cs b{font-family:var(--d);font-weight:500;font-size:24px;letter-spacing:-.02em}
.cs b.up{color:#2dd4bf}.cs b.dn{color:#fb7185}
.cc-tabs{display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:10px}
.cc-tabs button{padding:8px 16px;border:0;border-radius:7px;background:none;color:#aab6c3;font:500 14px var(--m);cursor:pointer;transition:background .2s,color .2s}
.cc-tabs button:hover{color:#fff}
.cc-tabs button.on{background:rgba(0,229,255,.14);color:var(--cy)}
.cc-wrap{position:relative;height:440px;border-top:1px solid rgba(255,255,255,.06);margin-top:6px}
#chart{width:100%;height:100%;display:block;cursor:crosshair}
.cc-read{position:absolute;left:10px;top:10px;font-family:var(--m);font-size:13px;color:#aab6c3;pointer-events:none}
.cc-read b{font-weight:400;margin-right:12px}.cc-read .up{color:#2dd4bf}.cc-read .dn{color:#fb7185}
.cc-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:#8fa0b2}
.cc-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.cc-note{margin-top:14px;font-size:13px;line-height:1.6;color:#7f8da0}
 
.why{padding-top:130px;padding-bottom:140px;color:var(--ink);background:linear-gradient(rgba(10,14,23,.05) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(10,14,23,.05) 1px,transparent 1px) 0 0/80px 80px,var(--light)}
.why h2{font-size:clamp(44px,5vw,70px);font-weight:600;margin-bottom:60px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card.why-card{justify-content:flex-start;min-height:320px;padding:35px}
.ico{display:grid;place-items:center;width:60px;height:60px;border-radius:14px;background:var(--bg)}
.ico svg{width:26px;height:26px;fill:none;stroke:var(--cy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-size:27px;margin:52px 0 14px}
.why-card p{font-size:17px;line-height:1.65}
 
.invest{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;align-items:center;padding-top:110px;padding-bottom:110px;background:radial-gradient(ellipse at 100% 60%,rgba(0,170,190,.28),transparent 55%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/80px 80px,var(--bg)}
.invest h2{font-size:clamp(44px,5.4vw,78px);font-weight:600;line-height:1.05;margin-bottom:34px}
.invest .lead{font-size:22px;line-height:1.5;color:#d3dbe4;max-width:560px}
.risk{margin-top:44px;padding-left:22px;border-left:2px solid var(--cy);font-size:15px;line-height:1.6;color:#aebbc9;max-width:540px}
.form-card{padding:46px 50px;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,229,255,.35)}
.field{position:relative;margin-bottom:28px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.field label{display:block;font-family:var(--m);font-size:13px;letter-spacing:.25em;color:#6b7785;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;padding:14px 0 12px;border:0;border-bottom:1px solid #cfd5db;background:transparent;font:18px var(--b);color:var(--ink);outline:0;border-radius:0;appearance:none;transition:border-color .25s}
.field textarea{height:110px;resize:none}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23556' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") right 2px center no-repeat;cursor:pointer}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.field:focus-within::after{transform:scaleX(1)}
.field:focus-within label{color:var(--blue)}
.submit{display:inline-flex;align-items:center;gap:14px;margin-top:14px;height:74px;padding:0 40px;border:0;border-radius:99px;background:var(--bg);color:#fff;font:600 19px var(--d);cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.submit:hover{transform:translateY(-3px);box-shadow:0 18px 36px -12px rgba(0,229,255,.55);background:#05080f}
.submit svg{transition:transform .25s}.submit:hover svg{transform:translateX(5px)}
.form-ok{display:none;text-align:center;padding:60px 10px}
.form-ok.show{display:block;animation:rise .7s both}
.form-ok .ico{margin:0 auto 26px;width:76px;height:76px;border-radius:50%}
.form-ok h3{font-size:34px;margin-bottom:14px}.form-ok p{color:#4a5a6c;font-size:18px;line-height:1.6}
@media(max-width:1000px){.stats,.why-grid,.invest,.row2{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding-left:0!important}.cc-wrap{height:340px}.chart-card{padding:24px}.form-card{padding:30px 24px}.invest{gap:40px}}
.row2 .field label{letter-spacing:.14em;white-space:nowrap}
 
/* ===== HOME: SISTEMA SOLARE ANIMATO ===== */
.system{position:relative;width:100%;aspect-ratio:3/2;transform:translate(var(--tx,0px),var(--ty,0px)) rotate(-10deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sys-orbits{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.system .orb{position:absolute;left:50%;top:50%;translate:-50% -50%;width:17%;z-index:5;animation:sun 5s ease-in-out infinite}
.corona{position:absolute;left:50%;top:50%;translate:-50% -50%;width:34%;aspect-ratio:1;border-radius:50%;z-index:4;filter:blur(16px);opacity:.9;
background:conic-gradient(from 0deg,transparent,rgba(0,229,255,.38),transparent 28%,rgba(77,111,255,.32),transparent 58%,rgba(0,229,255,.3),transparent);animation:spin 14s linear infinite}
@keyframes sun{0%,100%{box-shadow:0 0 70px rgba(0,229,255,.3),0 0 140px rgba(0,229,255,.12)}50%{transform:scale(1.04);box-shadow:0 0 110px rgba(0,229,255,.55),0 0 210px rgba(0,229,255,.2)}}
.planet{position:absolute;left:0;top:0;width:calc(var(--sz)*100%);aspect-ratio:1;border-radius:50%;z-index:3;will-change:left,top,transform;
box-shadow:inset -5px -5px 10px rgba(0,0,0,.5),0 0 16px rgba(0,229,255,.3)}
.pl-a{background:radial-gradient(circle at 35% 30%,#fff,#9ff6ff 30%,#19a7c4 70%,#0a4f63)}
.pl-b{background:radial-gradient(circle at 35% 30%,#e3ebff,#7d9bff 35%,#3248d8 72%,#141d78);box-shadow:inset -6px -6px 12px rgba(0,0,0,.5),0 0 22px rgba(74,111,255,.45)}
.pl-m{background:radial-gradient(circle at 35% 30%,#fff,#cfdbe6 50%,#6c7a88);box-shadow:inset -3px -3px 6px rgba(0,0,0,.45),0 0 10px rgba(255,255,255,.25)}
.pl-c{background:radial-gradient(circle at 35% 30%,#9fd0e8,#2f6f9a 36%,#173a5e 70%,#081525);box-shadow:inset -7px -7px 14px rgba(0,0,0,.55),0 0 26px rgba(0,229,255,.28)}
.pl-c::before{content:"";position:absolute;left:-48%;top:28%;width:196%;height:44%;border-radius:50%;border:3px solid rgba(0,229,255,.5);transform:rotate(-16deg);box-shadow:0 0 12px rgba(0,229,255,.3)}
.pl-d{background:radial-gradient(circle at 35% 30%,#ece6ff,#9a8cff 38%,#6d5cff 70%,#2a1f86);box-shadow:inset -5px -5px 10px rgba(0,0,0,.5),0 0 20px rgba(109,92,255,.45)}
.stars{position:absolute;inset:-10% -6%;pointer-events:none;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#bff6ff;opacity:.2;animation:twinkle var(--d) ease-in-out infinite;animation-delay:var(--dl)}
@keyframes twinkle{50%{opacity:.95;transform:scale(1.7)}}
.comet{position:absolute;top:6%;left:-12%;width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#bff6ff);box-shadow:0 0 10px rgba(0,229,255,.7);transform:rotate(24deg);opacity:0;animation:comet 11s linear infinite 3s;pointer-events:none}
@keyframes comet{0%{opacity:0;transform:translate(0,0) rotate(24deg)}2%{opacity:1}12%{opacity:0;transform:translate(640px,285px) rotate(24deg)}100%{opacity:0;transform:translate(640px,285px) rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.system{transition:none}}
 
/* ===== PAGINA CHI SIAMO ===== */
.hero.c-hero{padding-bottom:110px;background:radial-gradient(ellipse at 88% 25%,rgba(0,150,170,.16),transparent 55%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,var(--bg)}
.c-hero h1{font-size:clamp(56px,8.6vw,140px)}
 
.c-photo{padding:0 max(24px,calc(var(--side) - 50px)) 130px;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/80px 80px,var(--bg)}
.c-frame{position:relative;margin:0;height:min(78vh,750px);min-height:380px;border-radius:30px;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#1c4a55,#07121a 70%);box-shadow:0 40px 90px -40px rgba(0,229,255,.25)}
.c-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.12)}
.c-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(3,6,10,.55))}
.c-time{position:absolute;left:24px;bottom:22px;z-index:2;font-family:var(--m);font-size:16px;letter-spacing:.28em;color:#dfe9f2}
 
.c-story{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;align-items:start;padding-top:170px;padding-bottom:160px;color:var(--ink);background:linear-gradient(rgba(10,14,23,.045) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(10,14,23,.045) 1px,transparent 1px) 0 0/80px 80px,var(--cream)}
.c-story .eyebrow{margin-bottom:60px}
.zero{display:flex;align-items:center}
.zero b{font-family:var(--d);font-weight:700;font-size:clamp(150px,15vw,250px);line-height:.8;letter-spacing:-.04em}
.zero svg{flex:none;margin-left:2px;max-width:40%;height:auto}
.zero .arr{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.5s .5s cubic-bezier(.6,0,.2,1)}
.c-story-l.in .arr{stroke-dashoffset:0}
.c-story-r h2{font-size:clamp(30px,3.1vw,46px);font-weight:500;line-height:1.14;letter-spacing:-.035em;margin-bottom:46px}
.c-story-r p{font-size:22px;line-height:1.6;color:#26323f;margin-bottom:38px;max-width:900px}
 
.c-time-sec{padding-top:180px;padding-bottom:180px;background:var(--bg)}
.c-time-sec h2,.c-team h2{font-size:clamp(40px,4.4vw,64px);font-weight:600;margin-bottom:70px;line-height:1.05}
.phases{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.14);border-radius:28px;overflow:hidden}
.phase{position:relative;padding:44px 36px 46px;border-right:1px solid rgba(255,255,255,.14);transition:background .35s}
.phase:last-child{border-right:0}
.phase:hover{background:rgba(0,229,255,.05)}
.ph-n{display:block;font-family:var(--m);font-size:15px;letter-spacing:.3em;color:var(--cy)}
.ph-bar{display:block;position:relative;height:1px;margin:46px 0 40px;background:rgba(255,255,255,.14)}
.ph-bar::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:var(--p);background:#e8f4f7;border-radius:3px;transition:width 1.4s .3s cubic-bezier(.6,0,.2,1),background .35s,box-shadow .35s}
.phase:hover .ph-bar::after{background:var(--cy);box-shadow:0 0 14px rgba(0,229,255,.8)}
.phase h3{font-size:30px;font-weight:600;margin-bottom:18px;letter-spacing:-.03em}
.phase p{font-size:18px;line-height:1.6;color:#c4cfda}
.js .phase .ph-bar::after{width:0}
.js .phase.in .ph-bar::after{width:var(--p)}
 
.c-team{padding-top:150px;padding-bottom:170px;color:var(--ink);background:linear-gradient(rgba(10,14,23,.05) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(10,14,23,.05) 1px,transparent 1px) 0 0/80px 80px,var(--light)}
.f-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:336px;padding:52px 60px 0;border-radius:28px;background:#fff;box-shadow:0 20px 50px -18px rgba(10,14,23,.14);overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease}
.fcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,190,230,.14),transparent 60%)}
.fcard:hover::before{opacity:1}
.fcard:hover{box-shadow:0 30px 60px -18px rgba(10,14,23,.2)}
.fcard::after{content:attr(data-l);position:absolute;right:42px;bottom:112px;font-family:var(--d);font-weight:700;font-size:230px;line-height:.72;color:rgba(10,111,168,.075);pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1),color .4s}
.fcard:hover::after{transform:translateY(-10px) scale(1.05);color:rgba(0,170,220,.13)}
.fcard p{position:relative;z-index:1;font-family:var(--d);font-weight:400;font-size:clamp(26px,2.3vw,36px);line-height:1.25;letter-spacing:-.03em;max-width:640px}
.fc-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:50px;padding:34px 0 40px;border-top:1px solid #e4e8ec}
.fc-foot b{font-family:var(--d);font-weight:600;font-size:26px;letter-spacing:.16em}
.fc-foot span{font-family:var(--m);font-size:14px;letter-spacing:.3em;color:#0a6fa8}
 
.commit{margin-top:100px;padding:56px 60px 60px;border-radius:28px;background:var(--bg);color:#fff}
.commit .eyebrow{margin-bottom:40px}
.commit ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.commit li{display:flex;align-items:center;gap:20px;font-family:var(--d);font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;transition:transform .3s}
.commit li:hover{transform:translateX(6px)}
.commit li i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,229,255,.6);transition:background .3s,box-shadow .3s}
.commit li:hover i{background:rgba(0,229,255,.15);box-shadow:0 0 18px rgba(0,229,255,.45)}
.commit li svg{width:18px;height:18px;fill:none;stroke:var(--cy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 
.js .fcard.reveal.in{transition:opacity .9s,transform .25s ease,box-shadow .25s ease;transition-delay:0s}
 
@media(max-width:1000px){
.c-story,.f-cards,.phases,.commit ul{grid-template-columns:1fr}
.c-story{gap:50px;padding-top:110px;padding-bottom:110px}
.phase{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.phase:last-child{border-bottom:0}
.c-time-sec,.c-team{padding-top:110px;padding-bottom:110px}
.fcard{padding:36px 28px 0}.commit{padding:36px 28px}
.c-photo{padding-bottom:90px}
}
@media(prefers-reduced-motion:reduce){.zero .arr{stroke-dashoffset:0;transition:none}.js .phase .ph-bar::after{width:var(--p);transition:none}.c-frame img{transform:none}}
 
/* ===== INTRO (stile "girato dal vero", crudo) ===== */
.intro{display:none}
html.intro-on,html.intro-fade{overflow:hidden}
html.intro-on .intro,html.intro-fade .intro{display:block}
html.intro-on .hero h1,html.intro-on .hero p,html.intro-on .hero .cta,html.intro-on .orb-wrap{animation-play-state:paused}
.intro{position:fixed;inset:0;z-index:1000;background:#020407;color:#e9edf0;transition:opacity .35s linear}
.intro.out{opacity:0;pointer-events:none}
#introCanvas{position:absolute;inset:0;width:100%;height:100%}
.intro-text{position:absolute;inset:0;display:grid;place-items:center;padding:0 6vw;text-align:center}
.it{grid-area:1/1;pointer-events:none}
.it .ln{display:block;opacity:0;text-shadow:0 0 3px rgba(0,0,0,.9)}
.it.s{font-family:var(--m);font-size:clamp(18px,2.5vw,32px);letter-spacing:.04em;line-height:1.7;color:#d5dbe0}
.it.big{font-family:var(--d);font-weight:600;font-size:clamp(38px,7.6vw,112px);letter-spacing:-.03em;line-height:1.08;color:#f2f4f5}
.it.on .ln{animation:lnIn .6s steps(1) both;animation-delay:calc(var(--i)*.4s)}
@keyframes lnIn{0%{opacity:0}15%{opacity:1}25%{opacity:.15}40%{opacity:1}52%{opacity:.55}100%{opacity:1}}
.intro-hud{position:absolute;left:28px;top:26px;z-index:3;display:flex;align-items:center;gap:12px;font:14px var(--m);letter-spacing:.14em;color:#e9edf0;text-shadow:0 0 3px #000}
.intro-hud i{width:11px;height:11px;border-radius:50%;background:#e5322d;animation:rec 1s steps(1) infinite}
@keyframes rec{50%{opacity:0}}
.intro-skip{position:absolute;top:22px;right:24px;z-index:3;padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(0,0,0,.35);color:#e9edf0;font:12px var(--m);letter-spacing:.2em;cursor:pointer}
.intro-skip:hover{border-color:#fff}
.intro-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,.1)}
.intro-bar i{display:block;height:100%;width:0;background:#e9edf0}
/* ===== HOME: inserzioni cliccabili (si allargano al passaggio del mouse) ===== */
.duo .panel{cursor:pointer}
.duo .panel:hover{z-index:2}
.js .duo .panel.reveal.in{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.js .duo .panel.reveal.in:hover{transform:scale(1.03);box-shadow:0 40px 80px rgba(10,14,23,.22)}
.duo .panel .link span{display:inline-block;transition:transform .3s}
.duo .panel:hover .link span{transform:translate(6px,-6px)}
 
/* ===== HOME: sfondo animato dietro le due inserzioni (nuvole luminose + onde tech) ===== */
.duo{position:relative;overflow:hidden;
background:linear-gradient(rgba(10,14,23,.04) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(10,14,23,.04) 1px,transparent 1px) 0 0/80px 80px,var(--cream)}
.duo::before,.duo::after{content:"";position:absolute;pointer-events:none;z-index:0}
/* nuvole di luce che si spostano lentamente */
.duo::before{inset:-12%;will-change:transform;
background:
radial-gradient(38% 42% at 18% 24%,rgba(0,200,230,.26),transparent 70%),
radial-gradient(34% 38% at 82% 18%,rgba(109,92,255,.17),transparent 70%),
radial-gradient(44% 44% at 72% 82%,rgba(10,127,194,.20),transparent 70%),
radial-gradient(30% 34% at 14% 86%,rgba(0,229,255,.18),transparent 70%);
animation:duoClouds 22s ease-in-out infinite alternate}
@keyframes duoClouds{
0%{transform:translate3d(-3%,2%,0) scale(1) rotate(0deg)}
50%{transform:translate3d(3%,-3%,0) scale(1.12) rotate(5deg)}
100%{transform:translate3d(-1%,4%,0) scale(1.05) rotate(-4deg)}}
/* onde a linee con nodi che scorrono in continuazione */
.duo::after{left:0;top:calc(50% - 350px);height:700px;width:calc(100% + 1800px);will-change:transform;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500' viewBox='0 0 1200 500'%3E%3Cpath d='M0 180 C200 80 400 80 600 180 S1000 280 1200 180' fill='none' stroke='%230a7fc2' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Cpath d='M0 215 C200 115 400 115 600 215 S1000 315 1200 215' fill='none' stroke='%230a7fc2' stroke-opacity='0.26' stroke-width='1.4'/%3E%3Cpath d='M0 250 C200 150 400 150 600 250 S1000 350 1200 250' fill='none' stroke='%230a7fc2' stroke-opacity='0.4' stroke-width='1.8'/%3E%3Cpath d='M0 285 C200 185 400 185 600 285 S1000 385 1200 285' fill='none' stroke='%230a7fc2' stroke-opacity='0.26' stroke-width='1.4'/%3E%3Cpath d='M0 320 C200 220 400 220 600 320 S1000 420 1200 320' fill='none' stroke='%230a7fc2' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Cpath d='M0 200 C200 300 400 300 600 200 S1000 100 1200 200' fill='none' stroke='%2300b8d9' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M0 232 C200 332 400 332 600 232 S1000 132 1200 232' fill='none' stroke='%2300b8d9' stroke-opacity='0.32' stroke-width='1.4'/%3E%3Cpath d='M0 268 C200 368 400 368 600 268 S1000 168 1200 268' fill='none' stroke='%2300b8d9' stroke-opacity='0.32' stroke-width='1.4'/%3E%3Cpath d='M0 300 C200 400 400 400 600 300 S1000 200 1200 300' fill='none' stroke='%2300b8d9' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M0 250 C200 350 400 350 600 250 S1000 150 1200 250' fill='none' stroke='%236d5cff' stroke-opacity='0.3' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='250' r='4.5' fill='white' stroke='%2300b8d9' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='250' r='11' fill='none' stroke='%2300b8d9' stroke-opacity='.25'/%3E%3Ccircle cx='600' cy='250' r='4.5' fill='white' stroke='%2300b8d9' stroke-width='1.6'/%3E%3Ccircle cx='600' cy='250' r='11' fill='none' stroke='%2300b8d9' stroke-opacity='.25'/%3E%3Ccircle cx='1200' cy='250' r='4.5' fill='white' stroke='%2300b8d9' stroke-width='1.6'/%3E%3Ccircle cx='1200' cy='250' r='11' fill='none' stroke='%2300b8d9' stroke-opacity='.25'/%3E%3Ccircle cx='300' cy='176' r='2.2' fill='%2300b8d9' fill-opacity='.7'/%3E%3Ccircle cx='300' cy='324' r='2.2' fill='%2300b8d9' fill-opacity='.7'/%3E%3Ccircle cx='900' cy='176' r='2.2' fill='%2300b8d9' fill-opacity='.7'/%3E%3Ccircle cx='900' cy='324' r='2.2' fill='%2300b8d9' fill-opacity='.7'/%3E%3C/svg%3E") repeat-x 0 50%/1800px 750px;
-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
animation:duoWaves 70s linear infinite}
@keyframes duoWaves{to{transform:translate3d(-1800px,0,0)}}
.duo .panel{z-index:1}
 
/* ===== FIX LARGHEZZA: niente elementi che sbordano dallo schermo (su telefono il browser rimpiccioliva tutta la pagina) ===== */
.nav{gap:12px}
.brand{min-width:0}
.p-info{overflow-x:clip}
@media(max-width:560px){
.nav{padding:0 16px;gap:8px}
.brand{gap:10px}
.logo{width:34px;height:34px;border-radius:8px}
.brand-text{font-size:12.5px;letter-spacing:.12em;white-space:nowrap}
.nav-right{gap:8px}
.lang{padding:3px;font-size:12px}
.lang button{padding:6px 9px}
.nav-right .btn{height:38px;padding:0 14px;font-size:14px}
}
@media(max-width:420px){
.nav{padding:0 12px}
.brand{gap:8px}
.brand-text{font-size:11px;letter-spacing:.08em}
.lang button{padding:6px 7px}
.nav-right .btn{padding:0 11px;font-size:13px}
}
 
/* titoli e numeri più piccoli sugli schermi molto stretti, così non sbordano */
@media(max-width:420px){
.hero h1{font-size:clamp(44px,14.5vw,64px)}
.i-hero h1,.c-hero h1{font-size:clamp(40px,13.5vw,64px)}
.p-hero h1{font-size:clamp(40px,15vw,64px)}
.principles h2,.why h2,.c-time-sec h2,.c-team h2{font-size:clamp(30px,10vw,44px)}
.invest h2{font-size:clamp(30px,10vw,44px)}
.zero b{font-size:clamp(90px,28vw,150px)}
.hero p{font-size:20px}
}
 
/* pagina Investi e footer su schermi stretti */
@media(max-width:1000px){.invest{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
.row2 .field label{white-space:normal;letter-spacing:.1em}
.form-card{padding:26px 20px}
}
@media(max-width:420px){
.f-grid{grid-template-columns:1fr}
.f-brand .brand-text{font-size:14px;letter-spacing:.14em}
.f-legal{flex-wrap:wrap;gap:14px 20px}
}
 
/* ===== HOME: NUOVO HERO CON CATENA ===== */
.hx{position:relative;height:calc(100vh - 100px);min-height:660px;overflow:hidden;color:#0a0a0a;
background:radial-gradient(ellipse at 62% 45%,#f6f6f7,transparent 60%),#e8e9eb}
.hx-big{position:absolute;left:50%;bottom:-1.6vw;z-index:1;white-space:nowrap;
font:700 clamp(110px,23vw,420px)/.8 var(--d);letter-spacing:-.05em;color:#0a0a0a;
transform:translate(-50%,115%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hx.go .hx-big{transform:translate(-50%,0)}
.hx-ch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hx-ch.back{z-index:2}.hx-ch.front{z-index:4}

/* prodotto al centro (al posto della stella) */
.hx-dev{position:absolute;left:62%;top:43%;z-index:3;width:clamp(150px,17vw,250px);aspect-ratio:300/480;translate:-50% -50%;perspective:900px;animation:hxFloat 6s ease-in-out infinite}
.hx-dev-in{position:relative;width:100%;height:100%;border-radius:14%/9%;
background:linear-gradient(120deg,#2b2f34,#6a7077 45%,#15181c);
box-shadow:inset 0 0 0 1px #8a9097,0 40px 60px -20px rgba(0,0,0,.55);animation:hxTurn 9s ease-in-out infinite alternate}
.hx-dev-in::after{content:"";position:absolute;inset:6%;border-radius:11%/7%;border:3px solid #5fe9f5;
box-shadow:0 0 22px rgba(0,229,255,.65),inset 0 0 22px rgba(0,229,255,.25)}
@keyframes hxFloat{50%{transform:translateY(-14px)}}
@keyframes hxTurn{from{transform:rotateY(-28deg)}to{transform:rotateY(28deg)}}

/* testi a sinistra */
.hx-text{position:absolute;left:max(24px,var(--side));top:27%;z-index:5;max-width:520px;animation:hxIn .9s .15s both}
@keyframes hxIn{from{opacity:0;transform:translateY(24px)}}
.hx-text h1{font-family:var(--d);font-weight:700;font-size:clamp(30px,3.9vw,62px);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase;color:#0a0a0a;margin:0}
.hx-text h1 span{display:block}
.hx-text p{max-width:380px;margin:26px 0 30px;font-size:14.5px;line-height:1.55;color:#4d5560}
.hx-cta{display:flex;gap:14px;flex-wrap:wrap}
.hx-btn{display:inline-flex;align-items:center;gap:18px;height:54px;padding:0 8px 0 26px;border-radius:99px;font:600 14.5px var(--d);transition:transform .25s,box-shadow .25s}
.hx-btn:hover{transform:translateY(-3px)}
.hx-btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;font-size:15px}
.hx-btn.dark{background:#0a0a0a;color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.hx-btn.dark i{background:#fff;color:#0a0a0a}
.hx-btn.light{background:#f3f3f4;color:#0a0a0a;border:1px solid #d3d5d9}
.hx-btn.light i{background:#0a0a0a;color:#fff}
.hx-scroll{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:5;font:11px var(--m);letter-spacing:.3em;color:#fff;mix-blend-mode:difference}

@media(max-width:1000px){
.hx{min-height:760px}
.hx-text{top:8%}
.hx-dev{left:60%;top:55%;width:clamp(120px,30vw,200px)}
.hx-big{font-size:27vw}
}
@media(prefers-reduced-motion:reduce){.hx-dev,.hx-dev-in,.hx-text{animation:none}}

/* ARISAF: le lettere salgono dal basso una dopo l'altra */
.hx-big{transform:translate(-50%,0);transition:none}
.hx.go .hx-big{transform:translate(-50%,0)}
.hx-big .l{display:inline-block;transform:translateY(135%);opacity:0;
transition:transform 1s cubic-bezier(.2,.9,.25,1.18) calc(var(--i)*.075s),opacity .35s ease calc(var(--i)*.075s)}
.hx.go .hx-big .l{transform:none;opacity:1}

/* HOME: testo e pulsanti più a sinistra e più in alto */
.hx-text{left:clamp(20px,2.6vw,56px);top:17%}
@media(max-width:1000px){
.hx-text{left:20px;top:5%}
}
/* HOME: ASAF, font Outfit, sale dal basso appena si apre la home */
.hx-big{
  font:700 clamp(130px,25vw,440px)/.8 var(--d);letter-spacing:-.05em;
  bottom:-3vw;filter:none;transform:translate(-50%,0);transition:none;
}
.hx-big .l{
  display:inline-block;color:#0a0a0a;background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  padding:0;opacity:0;transform:translateY(170%);transition:none;
}
.hx.go .hx-big .l{
  opacity:1;transform:none;
  animation:asafUp .9s cubic-bezier(.2,.9,.25,1.1) both;
  animation-delay:calc(var(--i)*.07s);
}
@keyframes asafUp{from{opacity:0;transform:translateY(170%)}to{opacity:1;transform:none}}
@media(max-width:1000px){.hx-big{font-size:34vw;bottom:-4vw}}

/* HOME: ASAF leggermente più a destra */
.hx-big{left:60%}

/* HOME: prodotto più in alto, entra con dissolvenza lenta */
.hx-dev{top:38%;opacity:0;transition:none}
.hx.go .hx-dev{
  animation:hxFloat 6s ease-in-out infinite, devFade 3.2s ease .3s both;
}
@keyframes devFade{from{opacity:0}to{opacity:1}}
@media(max-width:1000px){.hx-dev{top:50%}}

/* INVESTI: logo $ASAF a destra delle scritte */
.i-logo{position:absolute;right:max(24px,var(--side));top:40px;width:clamp(260px,32vw,520px);aspect-ratio:1;object-fit:contain;
mix-blend-mode:screen;pointer-events:none;animation:fadeIn 1.4s .2s both}
@media(min-width:1001px){
.i-hero h1{font-size:clamp(48px,6vw,100px)}
.i-hero p{max-width:min(840px,54%)}
}
@media(max-width:1000px){
.i-logo{position:static;display:block;width:min(70vw,360px);margin:40px auto 0}
}

/* footer: la mail non sborda su schermi stretti */
.f-col a{overflow-wrap:anywhere}

/* INVESTI: logo spostato più a sinistra */
.i-logo{right:calc(max(24px,var(--side)) + 6vw)}
@media(max-width:1000px){.i-logo{right:auto}}

/* CHI SIAMO: la foto non taglia i volti */
.c-frame img{object-position:center 30%}