@font-face{font-family:'Anton';src:url(fonts/anton-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-latin.woff2) format('woff2');font-weight:400 600;font-display:swap}

/* Layout: storia a scorrimento. Hero con titolo cinetico, pila di carte 3D che segue il mouse, tavolo di gioco inclinato che si raddrizza scrollando,
   fascia di parole in movimento, contatori, sezioni che scivolano dentro. Palette Grand Line: notte profonda, oro, corallo.
   Direzione C: movimento vero ma sempre leggibile da fermo. Zero librerie, zero media di terzi. */
:root{
  --bg:#050816; --bg2:#0a1030; --ink:#f3f1ec; --mute:#9aa3c4; --line:rgba(255,255,255,.12);
  --gold:#f5c35a; --coral:#ff5d5d; --sea:#3b6cff; --glass:rgba(255,255,255,.06);
  --display:'Anton','Impact','Arial Narrow',sans-serif; --body:'Inter',system-ui,'Segoe UI',sans-serif;
  --mx:50%; --my:30%; --sy:0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto}
/* luce che segue il mouse */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(59,108,255,.18),transparent 70%)}
/* grana di pellicola e vignettatura */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.07;mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:1}
nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding:8px 10px 8px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(10,16,48,.7);backdrop-filter:blur(14px)}
.logo{font:400 22px/1 var(--display);letter-spacing:.06em;text-decoration:none}.logo b{color:var(--gold);font-weight:400}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--mute)}
nav ul a{text-decoration:none}nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;padding:13px 26px;border-radius:999px;background:linear-gradient(180deg,#ffd982,#e8a93a);color:#1a1200;font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 30px -8px rgba(245,195,90,.55);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);transform:translateX(-120%);transition:transform .6s}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translateX(120%)}
.btn.ghost{background:var(--glass);color:var(--ink);border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.btn.sm{padding:9px 18px;font-size:14px}

/* HERO */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;min-height:660px;padding-block:56px 40px}
.tag{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);font-size:13px;color:var(--gold);letter-spacing:.04em}
h1{font:400 clamp(44px,7vw,96px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:22px 0 24px;text-wrap:balance}
h1::before{content:"";display:block;width:56px;height:2px;margin-bottom:22px;background:linear-gradient(90deg,var(--gold),transparent)}
h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
h1 .w>span{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms + 150ms)}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--gold),var(--coral),var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .9s cubic-bezier(.2,.8,.2,1) both,shine 5s linear infinite;animation-delay:calc(var(--i)*90ms + 150ms),0s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes shine{to{background-position:-200% 0}}
.lead{font-size:clamp(16px,1.6vw,19px);color:#cfd5ee;max-width:46ch;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}.meta{margin-top:18px;font-size:13px;color:var(--mute)}
.stage{perspective:1100px;height:480px;position:relative}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,6deg));transition:transform .15s ease-out}
.card{position:absolute;width:200px;aspect-ratio:63/88;border-radius:14px;border:2px solid rgba(255,255,255,.55);
  background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 40px 70px rgba(0,0,0,.6),inset 0 0 0 5px rgba(0,0,0,.25);
  display:flex;flex-direction:column;justify-content:space-between;padding:14px;backface-visibility:hidden}
.card small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.card strong{font:400 22px/1 var(--display);text-transform:uppercase}
.card::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);background-size:250% 100%;mix-blend-mode:overlay;animation:foil 6s ease-in-out infinite}
@keyframes foil{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.k1{--c1:#e0405a;--c2:#4a0f1b;left:0;top:90px;transform:translateZ(20px) rotate(-8deg)}
.k2{--c1:#3b6cff;--c2:#0a0f3a;left:26%;top:20px;transform:translateZ(90px) rotate(2deg)}
.k3{--c1:#f5c35a;--c2:#7a4a0c;left:52%;top:100px;transform:translateZ(50px) rotate(10deg);color:#1a1100}
.k1,.k2,.k3{animation:bob 7s ease-in-out infinite}.k2{animation-delay:-2.3s}.k3{animation-delay:-4.6s}
@keyframes bob{50%{translate:0 -14px}}
.note{font-size:11px;color:var(--mute);margin:6px 0 0;text-align:center}

}

/* TAVOLO 3D */
section{padding-block:150px 0}
.eyebrow{color:var(--gold);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
h2{font:400 clamp(34px,5vw,64px)/1 var(--display);text-transform:uppercase;margin:0 0 14px;text-wrap:balance}
.sub{color:var(--mute);max-width:56ch;margin:0 0 40px}
.table3d{perspective:1400px}
.board{aspect-ratio:16/9;border-radius:22px;border:1px solid var(--line);background:radial-gradient(90% 90% at 50% 0%,#16246b,#080d2b);position:relative;overflow:hidden;
  transform:rotateX(calc(34deg * var(--t,1))) scale(calc(.92 + .08*(1 - var(--t,1))));transform-origin:50% 100%;box-shadow:0 60px 90px rgba(0,0,0,.55)}
.board .row{position:absolute;left:8%;right:8%;display:flex;gap:2%;justify-content:center}
.board .r1{top:10%}.board .r2{top:42%}.board .r3{bottom:8%}
.slot{width:11%;aspect-ratio:63/88;border-radius:8px;border:1.5px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.slot.f{border-style:solid;border-color:rgba(255,255,255,.6);background:linear-gradient(160deg,var(--sea),#0a0f3a)}
.slot.g{border-style:solid;border-color:rgba(255,255,255,.6);background:linear-gradient(160deg,var(--coral),#4a0f1b)}
.board .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:13px;color:#cfd5ee;background:rgba(5,8,22,.35)}

/* FEATURE */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.feat{position:relative;padding:30px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 24px 50px -30px #000;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.feat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(245,195,90,.16),transparent 70%)}
.feat:hover{transform:translateY(-6px)}.feat:hover::before{opacity:1}
.feat h3{margin:0 0 8px;font-size:18px}.feat p{margin:0;color:var(--mute);font-size:15px}
.ico{width:40px;height:40px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px;color:var(--gold);font:400 18px var(--display)}
.stats{display:flex;flex-wrap:wrap;gap:16px 56px;margin-top:56px}
.stat b{display:block;font:400 clamp(40px,6vw,72px)/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{color:var(--mute);font-size:14px}
/* scorrimento: parte da posizione visibile, solo piccolo spostamento */
.rv{transform:translateY(var(--rvy,0))}
.js .rv:not(.in){--rvy:28px}
.rv{transition:transform .8s cubic-bezier(.2,.8,.2,1)}

/* DOWNLOAD */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.dlc{padding:28px;border-radius:22px;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:14px}
.dlc.main{background:radial-gradient(120% 90% at 0% 0%,rgba(245,195,90,.2),transparent 60%),linear-gradient(160deg,#17142a,#0a1030);border-color:rgba(245,195,90,.45);box-shadow:0 30px 70px -30px rgba(245,195,90,.35)}
.dlc h3{margin:0;font-size:20px}.dlc p{margin:0;color:var(--mute);font-size:14px}
code{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--mute);word-break:break-all}
.soc{display:flex;flex-wrap:wrap;gap:12px}
.soc a{padding:14px 22px;border:1px solid var(--line);border-radius:16px;background:var(--glass);text-decoration:none;font-weight:500;transition:transform .2s,border-color .2s}
.soc a:hover{border-color:var(--gold);transform:translateY(-3px)}
.disc{margin-top:110px;padding:28px;border:1px solid var(--line);border-radius:20px;color:var(--mute);font-size:14px}
.disc strong{color:var(--ink)}
footer{padding-block:40px 56px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;color:var(--mute);font-size:14px}
footer a{margin-right:20px}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:40px}.stage{height:360px}.card{width:140px}nav ul{display:none}.board .ph{font-size:11px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}.board{transform:none}.js .rv:not(.in){--rvy:0px}
}

.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}
.gl{position:absolute;inset:0;width:100%;height:100%;display:none}
.gtop{margin-top:40px}
/* sfondi immagine e video (generati con IA) */
.herobg{position:absolute;inset:0 0 auto 0;height:min(980px,115vh);z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.herobg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;opacity:.9}
.herobg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,22,.88) 0%,rgba(5,8,22,.45) 55%,rgba(5,8,22,.1) 100%)}
.herobg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.3;z-index:1}
section{position:relative}
.bgv{position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:60px;bottom:-40px;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.bgv video,.bgv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgv::after{content:"";position:absolute;inset:0;background:rgba(5,8,22,.55)}
.bgv.dawn::after{background:linear-gradient(rgba(5,8,22,.65),rgba(5,8,22,.35))}
@media (max-width:860px){.herobg::after{background:linear-gradient(rgba(5,8,22,.75),rgba(5,8,22,.45))}}
h1 .w{padding-bottom:.08em;margin-bottom:-.08em}

/* pagine legali */
body.legal{padding-bottom:40px}
.doc{max-width:72ch;margin:56px auto 0;position:relative;z-index:1}
.doc h1{font:400 clamp(36px,6vw,64px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 24px}
.doc h1::before{display:none}
.doc h2{font:400 26px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:40px 0 10px;color:var(--gold)}
.doc p,.doc li{color:#d6dbef;font-size:16px;line-height:1.7}
.doc ul{padding-left:1.2em;margin:8px 0}
.doc li{margin:6px 0}
.doc .alt{margin-top:48px}.doc .alt a{color:var(--gold)}

/* schermate vere */
.board.shot{aspect-ratio:1910/1012;background:#e8e0cf}
.board.shot img{position:absolute;inset:0;width:100%;height:100%;display:block}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.shotcard{margin:0;border-radius:18px;overflow:hidden;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -34px #000}
.shotcard img{display:block;width:100%;height:auto}
.shotcard figcaption{padding:16px 20px 20px;color:var(--mute);font-size:15px}
.shotcard figcaption strong{display:block;color:var(--ink);font-size:17px;margin-bottom:2px}
@media (max-width:860px){.shots{grid-template-columns:1fr}}

/* clip generati con IA: ventaglio, impatto, bussola */
.bgv.fan::after{background:rgba(5,8,22,.74)}
.fx{position:relative;line-height:0}
.fx .impact{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .25s}
.fx .impact.on{opacity:1}
.dlhead{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;margin-bottom:8px}
.dlhead .sub{margin-bottom:24px}
.dlvid{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0a1030;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -30px #000}
.dlvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.dlhead{grid-template-columns:1fr}}