:root{
  --void:#03060d;
  --deep:#060f1c;
  --panel:#081525;
  --line:#113048;
  --line-hi:#1d4e71;
  --blue:#1d7bff;
  --beam:#63d9ff;
  --text:#dbe8f7;
  --mute:#7b93ae;
  --dim:#4d6480;
  --ok:#3ddc97;

  --disp:"Chakra Petch",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --strip:38px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--body); font-weight:300; font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-top:var(--strip); padding-bottom:var(--strip);
}
::selection{background:var(--blue); color:#fff;}
canvas{display:block;}

/* ───────────── ambient ───────────── */
#mesh{position:fixed; inset:0; width:100%; height:100%; z-index:0;}
.haze{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,6,13,.88) 0%, rgba(3,6,13,.6) 36%, rgba(3,6,13,0) 66%),
    radial-gradient(100% 70% at 50% -10%, rgba(29,123,255,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(99,217,255,.07), transparent 60%);
}
@media (max-width:880px){
  .haze{background:
    linear-gradient(180deg, rgba(3,6,13,.84), rgba(3,6,13,.76)),
    radial-gradient(100% 70% at 50% -10%, rgba(29,123,255,.16), transparent 60%);}
}
.scan{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.42;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}

/* ───────────── HUD frame ───────────── */
.hud{position:fixed; inset:0; z-index:40; pointer-events:none;}
.cnr{position:absolute; width:26px; height:26px; border:1px solid var(--line-hi); opacity:0; transition:opacity .5s .3s;}
.booted .cnr{opacity:1;}
.cnr.tl{top:calc(var(--strip) + 10px); left:10px; border-right:0; border-bottom:0;}
.cnr.tr{top:calc(var(--strip) + 10px); right:10px; border-left:0; border-bottom:0;}
.cnr.bl{bottom:calc(var(--strip) + 10px); left:10px; border-right:0; border-top:0;}
.cnr.br{bottom:calc(var(--strip) + 10px); right:10px; border-left:0; border-top:0;}

.bar{
  position:fixed; left:0; right:0; height:var(--strip); z-index:41;
  background:rgba(4,9,17,.88); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:18px; padding:0 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim);
}
.bar.top{top:0; border-bottom:1px solid var(--line);}
.bar.bot{bottom:0; border-top:1px solid var(--line); justify-content:space-between;}
.sig{color:var(--text); white-space:nowrap;}
.sig b{color:var(--blue); font-weight:500;}
.live{display:inline-flex; align-items:center; gap:6px; color:var(--ok);}
.live i{width:6px; height:6px; background:var(--ok); border-radius:50%; animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.tabs{display:flex; gap:2px; margin-left:18px; pointer-events:auto;}
.tab{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--dim);
  text-decoration:none; padding:5px 11px; border:1px solid transparent; position:relative;
  transition:color .25s, border-color .25s, background .25s;
}
.tab:hover{color:var(--text); border-color:var(--line);}
.tab.on{color:var(--beam); border-color:var(--line-hi); background:rgba(29,123,255,.08);}
.tab.on::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:0; height:1px; background:var(--beam);
  transform:translateX(-50%); animation:grow .4s forwards;
}
@keyframes grow{to{width:70%}}
.inst{
  margin-left:auto; cursor:pointer; font:inherit; font-family:var(--mono); font-size:11px;
  letter-spacing:.09em; color:var(--beam); background:rgba(29,123,255,.1);
  border:1px solid var(--line-hi); padding:5px 12px; white-space:nowrap;
  transition:background .25s, border-color .25s;
}
.inst:hover{background:rgba(29,123,255,.22); border-color:var(--beam);}
.inst[hidden]{display:none;}
.readout{font-family:var(--mono); font-size:11px; color:var(--dim); white-space:nowrap;}
.readout b{color:var(--mute); font-weight:400;}

.prog{position:absolute; left:0; top:0; height:2px; width:var(--p,0%); background:linear-gradient(90deg,var(--blue),var(--beam)); box-shadow:0 0 10px rgba(99,217,255,.5);}

/* ───────────── layout ───────────── */
.wrap{width:min(1140px,calc(100% - 72px)); margin-inline:auto; position:relative; z-index:5;}
section{padding:112px 0; position:relative; z-index:5;}

/* module header */
.mod{display:flex; align-items:center; gap:16px; margin-bottom:46px;}
.mod .id{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--blue);
  border:1px solid var(--line-hi); padding:4px 9px; white-space:nowrap;
}
.mod h2{
  font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,3.2vw,2.3rem);
  letter-spacing:.01em; margin:0; text-transform:uppercase;
}
.mod .ln{flex:1; height:1px; background:linear-gradient(90deg,var(--line-hi),transparent);}

/* panel with brackets */
.pnl{position:relative; background:linear-gradient(180deg,var(--panel),var(--deep)); border:1px solid var(--line);}
.pnl::before,.pnl::after{
  content:""; position:absolute; width:12px; height:12px; border:1px solid var(--line-hi);
  transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), border-color .35s;
}
.pnl::before{top:0; left:0; border-right:0; border-bottom:0;}
.pnl::after{bottom:0; right:0; border-left:0; border-top:0;}
.pnl:hover::before,.pnl:hover::after{width:22px; height:22px; border-color:var(--beam);}

/* reveal with sweep */
.rv{opacity:0; transform:translateY(16px);}
.rv.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);}
.rv.d1.in{transition-delay:.07s} .rv.d2.in{transition-delay:.14s}
.rv.d3.in{transition-delay:.21s} .rv.d4.in{transition-delay:.28s}
.rv.d5.in{transition-delay:.35s} .rv.d6.in{transition-delay:.42s}
.sweep{position:relative; overflow:hidden;}
.sweep.in::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(99,217,255,.14),transparent);
  transform:translateX(-100%); animation:pass .9s .1s cubic-bezier(.4,0,.2,1);
}
@keyframes pass{to{transform:translateX(100%)}}

/* ───────────── hero ───────────── */
.hero{min-height:calc(100svh - var(--strip)*2); display:flex; align-items:center; padding:0;}
.boot{font-family:var(--mono); font-size:12px; color:var(--dim); margin:0 0 30px; min-height:88px;}
.boot div{opacity:0;}
.boot div.sh{opacity:1; animation:flick .28s;}
.boot span{color:var(--ok);}
@keyframes flick{from{opacity:.2}to{opacity:1}}

h1{
  font-family:var(--disp); font-weight:700; margin:0; text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,7.2rem); line-height:.92; letter-spacing:.005em;
  color:var(--text); text-shadow:0 0 26px rgba(29,123,255,.3);
}
h1 .l2{display:block; color:var(--blue); text-shadow:0 0 30px rgba(29,123,255,.45);}
.sub{
  font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(.95rem,2vw,1.3rem); color:var(--beam); margin:24px 0 0;
  opacity:0; transform:translateY(10px);
}
.lede{
  max-width:56ch; margin:22px 0 0; color:var(--mute); font-size:1.02rem;
  opacity:0; transform:translateY(10px);
}
.booted .sub{opacity:1; transform:none; transition:opacity .7s .25s, transform .7s .25s cubic-bezier(.16,1,.3,1);}
.booted .lede{opacity:1; transform:none; transition:opacity .7s .4s, transform .7s .4s cubic-bezier(.16,1,.3,1);}

.telem{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; opacity:0;}
.booted .telem{opacity:1; transition:opacity .7s .6s;}
.telem span{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mute);
  border:1px solid var(--line); padding:5px 10px; background:rgba(8,21,37,.6);
}

/* ───────────── profilo ───────────── */
.prose{max-width:62ch; font-size:1.04rem;}
.prose p{margin:0 0 20px;}
.prose strong{font-weight:600; color:var(--text);}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:56px;}
.cell{padding:24px 20px;}
.cell .n{
  font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,3.6vw,2.6rem);
  line-height:1; color:var(--beam);
}
.cell .l{margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--mute); line-height:1.5;}

/* ───────────── stack ───────────── */
.mods{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px;}
.grp{padding:24px 22px 26px;}
.grp h3{
  font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em;
  margin:0 0 16px; color:var(--blue);
}
.tg{display:flex; flex-wrap:wrap; gap:7px;}
.tg span{
  font-size:.82rem; color:var(--mute); border:1px solid var(--line); padding:4px 9px;
  transition:color .22s, border-color .22s, background .22s;
}
.tg span:hover{color:var(--text); border-color:var(--line-hi); background:rgba(29,123,255,.09);}

.sig-head{margin:72px 0 24px;}
.sig-head h3{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:1.05rem; margin:0 0 6px;}
.sig-head p{margin:0; color:var(--mute); font-size:.9rem;}
.sigs{display:grid; gap:14px; max-width:820px;}
.row{display:grid; grid-template-columns:190px 1fr 42px; align-items:center; gap:18px;}
.row .nm{font-size:.93rem;}
.row .cells{display:flex; gap:3px;}
.row .cells i{
  flex:1; height:12px; background:var(--line); opacity:.5;
  transition:background .3s, opacity .3s, box-shadow .3s;
}
.row .cells i.lit{background:var(--blue); opacity:1;}
.row .cells i.tip{background:var(--beam); box-shadow:0 0 9px rgba(99,217,255,.65);}
.row .v{font-family:var(--mono); font-size:12px; color:var(--mute); text-align:right;}

/* ───────────── timeline ───────────── */
.track{position:relative; padding-left:44px;}
.track::before{content:""; position:absolute; left:1px; top:8px; bottom:8px; width:1px; background:var(--line);}
.track::after{content:""; position:absolute; left:1px; top:8px; width:1px; height:var(--d,0%); background:linear-gradient(180deg,var(--beam),var(--blue)); box-shadow:0 0 10px rgba(99,217,255,.5); transition:height .18s linear;}
.ent{position:relative; margin-bottom:14px;}
.ent .dot{position:absolute; left:-47px; top:22px; width:9px; height:9px; border:1px solid var(--line-hi); background:var(--void); transition:all .4s;}
.ent .dot::before{
  content:""; position:absolute; inset:-6px; border:1px solid var(--beam);
  opacity:0; transform:scale(.6); transition:opacity .4s, transform .4s;
}
.ent.lock .dot{border-color:var(--beam); background:var(--beam); box-shadow:0 0 12px rgba(99,217,255,.7);}
.ent.lock .dot::before{opacity:.45; transform:scale(1);}
.ent .in-pnl{padding:22px 24px 24px;}
.hd{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.yr{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--beam);}
.flag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--blue); border:1px solid var(--line-hi); padding:2px 7px;}
.ent h3{font-family:var(--disp); font-weight:600; font-size:1.18rem; margin:0 0 3px; letter-spacing:.01em;}
.org{color:var(--mute); font-size:.9rem; margin:0 0 14px;}
.ent ul{margin:0; padding-left:16px; max-width:68ch;}
.ent li{margin-bottom:6px; color:var(--mute); font-size:.94rem;}
.ent li::marker{color:var(--line-hi);}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.chips span{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--dim); border:1px solid var(--line); padding:3px 8px;}

/* ───────────── contatti ───────────── */
.cta{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,3rem); letter-spacing:.01em; line-height:1.08;
  margin:0 0 36px; max-width:20ch;
}
.cta em{font-style:normal; color:var(--blue);}
.ports{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;}
.port{display:block; text-decoration:none; color:inherit; padding:20px;}
.port .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--blue); margin-bottom:8px;}
.port .v{font-size:.97rem; color:var(--text); word-break:break-word;}
.port .ar{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:12px; transition:color .3s, transform .3s; display:inline-block;}
.port:hover .ar{color:var(--beam); transform:translateX(5px);}
.foot{margin-top:46px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--dim);}

/* reticle cursor */
.ret{position:fixed; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; z-index:60; pointer-events:none; opacity:0; transition:opacity .3s;}
.ret.on{opacity:.55;}
.ret::before,.ret::after{content:""; position:absolute; background:var(--beam);}
.ret::before{left:50%; top:0; bottom:0; width:1px;}
.ret::after{top:50%; left:0; right:0; height:1px;}
.ret i{position:absolute; inset:7px; border:1px solid var(--beam); border-radius:50%;}

:focus-visible{outline:2px solid var(--beam); outline-offset:3px;}

@media (max-width:880px){
  body{font-size:16px;}
  .wrap{width:calc(100% - 36px);}
  section{padding:80px 0;}
  .tabs{display:none;}
  .inst{margin-left:auto;}
  .readout.wide{display:none;}
  .grid4{grid-template-columns:repeat(2,1fr);}
  .row{grid-template-columns:118px 1fr 36px; gap:11px;}
  .row .nm{font-size:.84rem;}
  .cnr{display:none;}
  .track{padding-left:26px;}
  .ent .dot{left:-29px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important; transition:none!important;}
  .rv{opacity:1; transform:none;}
  .sub,.lede,.telem,.cnr{opacity:1; transform:none;}
  #mesh,.ret,.scan{display:none;}
}