/* ==========================================================================
   Duo Motion, foglio di stile comune
   ========================================================================== */

:root{
  --canvas:#07080D;
  --canvas-2:#0B0D15;
  --panel:#10121B;
  --panel-2:#151826;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --accent:#3B82F6;
  --accent-2:#8B5CF6;
  --accent-hover:#5C95F8;
  --accent-muted:rgba(109,108,247,.18);
  --grad:linear-gradient(100deg,#3B82F6 0%,#6D6CF7 55%,#8B5CF6 100%);
  --grad-btn:linear-gradient(100deg,#2563EB 0%,#4F46E5 55%,#7C3AED 100%); /* fondo dei pulsanti: stessi colori, più profondi (testo bianco leggibile) */
  --text-primary:#F4F5F8;
  --text-secondary:#A4A8B8;
  --text-dim:#7C8194;

  --f-display:"Montserrat",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace; /* solo per il codice nell'anteprima sviluppo */
  --f-label:"Montserrat",system-ui,sans-serif; /* etichette, menu, pulsanti: semi-grassetto morbido */

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --f-btn:"Unbounded",system-ui,sans-serif;--btn-fw:600;--btn-fs:12px;--btn-ls:.08em; /* pulsanti: geometrico largo, come le lettere del logo */
  --gutter:clamp(20px,4.2vw,64px);
  --maxw:1320px;
  --nav-h:76px;
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}

.btn-sm{font-size:calc(var(--btn-fs) - 1.5px)!important}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);
  font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:rgba(109,108,247,.45);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
h1,h2,h3,h4,p{margin:0}
a[href],button,input,select,textarea,[tabindex]{scroll-margin-top:calc(var(--nav-h) + 16px)}
h1,h2,h3,.title,.band-title{text-wrap:balance}
p,li,dd,.lede{text-wrap:pretty}
.step p,.footer .f-brand p,#contatti .lede{text-wrap:balance} /* frasi brevi: righe di lunghezza simile */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:1000;background:var(--panel);color:#fff;padding:10px 16px;border-radius:10px;border:1px solid var(--line-strong);transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
main:focus{outline:none}

/* la pagina entra con una dissolvenza */
body{opacity:0;transition:opacity .7s var(--ease-out)}
body.ready{opacity:1}
/* sicurezza: se il codice non parte, la pagina si mostra comunque */
body:not(.ready):not(.leaving){animation:failsafe .01s 2.5s forwards}
@keyframes failsafe{to{opacity:1}}
body.leaving{opacity:0;transition:opacity .35s var(--ease-io)}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ---------- ambiente fisso: stelle e grana ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none}
.env canvas{width:100%;height:100%}
.env::after{content:"";position:absolute;inset:-50%;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.4s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.env .glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(80px);opacity:.16;will-change:transform}
.env .glow.g1{background:radial-gradient(circle,#3B82F6 0%,transparent 62%);left:-25vmax;top:-20vmax;animation:drift1 70s ease-in-out infinite alternate;animation-delay:-20s}
.env .glow.g2{background:radial-gradient(circle,#8B5CF6 0%,transparent 62%);right:-25vmax;bottom:-25vmax;animation:drift2 80s ease-in-out infinite alternate;animation-delay:-35s}
.env.covered .glow,.env.covered::after{animation-play-state:paused} /* nascosti dietro la hero: fermi finché non si vedono */
@keyframes drift1{to{transform:translate(30vw,40vh)}}
@keyframes drift2{to{transform:translate(-35vw,-30vh)}}

/* ---------- cursore 3D (assets/js/cursore.js): freccia cromata e anelli del logo, su una tela WebGL ---------- */
.cursor{position:fixed;left:0;top:0;z-index:9000;pointer-events:none;opacity:0;transition:opacity .25s}
.cursor.on{opacity:1}
.cursor .c-pos{position:absolute;left:0;top:0;will-change:transform}
.cursor .c-gl{position:absolute;left:-60px;top:-60px;width:120px;height:120px}
.cursor .c-disc{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,rgba(12,14,22,.8) 0 60%,rgba(12,14,22,.55) 78%,rgba(12,14,22,0) 100%);opacity:var(--disc,0);transform:scale(calc(.4 + .6*var(--disc,0)))}
.cursor .c-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(calc(.6 + .4*var(--disc,0)));font:600 10.5px/1 var(--f-btn);letter-spacing:.1em;color:#fff;opacity:var(--disc,0);white-space:nowrap}
@media (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none!important}
  html.has-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),html.has-cursor textarea{cursor:text!important}
}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- navigazione ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);transition:transform .6s var(--ease-out),background-color .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,8,13,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav .brand{display:flex;align-items:center;gap:12px;height:40px}
.nav .brand img{height:38px;width:auto}
.brand-mark{height:44px!important;width:auto;filter:drop-shadow(0 0 14px rgba(109,108,247,.35));transition:transform .8s var(--ease-out),filter .5s}
@media (hover:hover) and (pointer:fine){.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06);filter:drop-shadow(0 0 20px rgba(109,108,247,.6))}}
.brand-word{display:flex;flex-direction:column;gap:4px;line-height:1}
.bw-main{font:300 17px/1 var(--f-display);letter-spacing:.02em;color:#fff;white-space:nowrap}
.bw-main b{font-weight:800}
.bw-sub{font:500 7.5px/1 var(--f-display);letter-spacing:.52em;color:#C9CDDB;white-space:nowrap}
.nav .links{display:flex;gap:6px;align-items:center}
.nav .links a{position:relative;font:600 12px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);padding:12px 14px;transition:color .3s}
.nav .links a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:#fff}
.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav .right{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:#fff;transition:transform .5s var(--ease-out),opacity .3s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:790;background:rgba(7,8,13,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  clip-path:circle(0% at calc(100% - 44px) 38px);transition:clip-path .8s var(--ease-io);visibility:hidden}
.menu-open .mobile-menu{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible}
html.menu-open,html.menu-open body{overflow:hidden}
.mobile-menu{overscroll-behavior:contain;overflow-y:auto;justify-content:safe center;padding-top:calc(var(--nav-h) + 8px);padding-bottom:20px}
.mobile-menu a{font:800 clamp(40px,11vw,64px)/1.1 var(--f-display);letter-spacing:-.01em;padding:6px 0;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease-out)}
.menu-open .mobile-menu a{opacity:1;transform:none}
.menu-open .mobile-menu a:nth-child(2){transition-delay:.06s}.menu-open .mobile-menu a:nth-child(3){transition-delay:.12s}
.menu-open .mobile-menu a:nth-child(4){transition-delay:.18s}.menu-open .mobile-menu a:nth-child(5){transition-delay:.24s}
.mobile-menu .mm-note{margin-top:28px;font:600 12px/1.6 var(--f-label);letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase}
@media (max-width:900px){.nav .links,.nav .right .btn{display:none}.burger{display:block}.brand-mark{height:38px!important}.bw-main{font-size:15px}.bw-sub{font-size:6.5px}}

/* ---------- pulsanti ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;
  font-family:var(--f-btn);font-weight:var(--btn-fw);font-size:var(--btn-fs);line-height:1;letter-spacing:var(--btn-ls);text-transform:uppercase;white-space:nowrap;isolation:isolate;text-shadow:none;
  transition:color .35s,border-color .35s}
.btn .btn-in{display:inline-flex;align-items:center;gap:12px;will-change:transform}
.btn .arrow{display:inline-block;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .arrow{transform:translateX(5px)}}
.btn-primary{color:#fff}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad-btn);z-index:-2}
.btn-primary::after{content:"";position:absolute;inset:-6px;border-radius:inherit;background:var(--grad);filter:blur(18px);opacity:0;z-index:-3;transition:opacity .5s}
.btn-primary:hover::after{opacity:.55}
.btn-ghost{color:#fff;border:1px solid var(--line-strong);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:rgba(255,255,255,.4)}
.btn-sm{height:44px;padding:0 20px}
@media (pointer:coarse){.btn{min-height:48px}}

/* ---------- struttura sezioni ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{position:relative;padding-block:clamp(110px,15vh,190px)} /* solo sopra e sotto: con .wrap restano i margini laterali */
.label{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.label::before{content:"";width:28px;height:1px;background:var(--grad)}
.title{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,7.2vw,104px);line-height:.98;letter-spacing:-.025em;text-transform:none}
.title .thin{font-weight:300}
.title .grad,.title-md .grad,.grad .w > span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.title .grad .w,.title-md .grad .w{color:transparent}
.title-md{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--text-secondary);max-width:46ch}
.mono{font-family:var(--f-label)}
.head{display:flex;flex-direction:column;gap:26px;margin-bottom:clamp(48px,7vh,84px)}
.head .lede{margin-top:4px}

/* ---------- entrate allo scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:calc(var(--d,0) * 1ms)}
[data-reveal].in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .14em;margin:-.08em -.02em -.14em}
.split .w > span{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + var(--d,0) * 1ms)}
.split.in .w > span{transform:none}
.draw path,.draw line,.draw circle.stroke{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.8s var(--ease-io)}
.draw.in path,.draw.in line,.draw.in circle.stroke{stroke-dashoffset:0}

/* ---------- footer ---------- */
.footer{position:relative;padding:110px 0 36px;border-top:1px solid var(--line);overflow:hidden}
.footer .f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;align-items:start}
.f-logo{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.f-logo img{width:190px;height:auto;filter:drop-shadow(0 0 30px rgba(109,108,247,.35))}
.f-logo .bw-main{font-size:26px}
.f-logo .bw-sub{font-size:9.5px;margin-right:-.52em}
.footer .f-brand p{margin-top:22px;color:var(--text-secondary);max-width:30ch}
.footer h4{font:600 12px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:22px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer ul a{color:var(--text-secondary);transition:color .3s;position:relative}
.footer ul a:hover{color:#fff}
.footer .f-big{margin-top:90px;font:800 clamp(48px,11.6vw,210px)/.82 var(--f-display);letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);display:flex;justify-content:center;user-select:none}
.footer .f-big span{transition:color .6s var(--ease-out),-webkit-text-stroke-color .6s;display:inline-block}
.footer .f-big span:hover{color:rgba(139,92,246,.9);-webkit-text-stroke-color:transparent}
.footer .f-bottom{margin-top:36px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:600 12px/1.6 var(--f-label);letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}
.to-top{display:inline-flex;align-items:center;gap:10px;color:var(--text-secondary);transition:color .3s}
.to-top:hover{color:#fff}
@media (max-width:820px){.footer .f-top{grid-template-columns:1fr 1fr}.footer .f-brand{grid-column:1/-1}}

/* ---------- CTA ripetuta ---------- */
.cta-band{position:relative;padding:clamp(90px,13vh,150px) 0;text-align:center;overflow:hidden}
.cta-band .title{margin:22px 0 38px}
.cta-band .lede{margin:-16px auto 34px;max-width:44ch;text-wrap:balance}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .orbits{position:absolute;inset:0;pointer-events:none;opacity:.5}

/* ---------- pausa animazioni (scheda nascosta / fuori vista) ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}
/* telefono coricato: voci più piccole, il menu sta nello schermo (dopo la regola generale, così vale) */
@media (max-height:500px){.mobile-menu a{font-size:clamp(26px,9vh,40px);padding:2px 0}.mobile-menu .mm-note{margin-top:12px}}