/* Z-VU — sistema, non gusto. Nessuna dipendenza esterna oltre ai font. */

/* ─── token ─────────────────────────────────────────────── */
:root{
  --ground:#E7E8E5;
  --surface:#FBFBFA;
  --sunk:#DFE0DC;
  --ink:#0D0F12;
  --ink2:#565D64;
  --ink3:#5B6369;
  --rule:#C9CBC6;
  --rule-soft:#D8DAD5;
  --accent:#1B36F5;
  --accent-ink:#1B36F5;
  --accent-soft:#DDE1FC;
  --st-live:#0B6E46;
  --st-live-bg:#D9EBE3;
  --st-show:#7A5B0C;
  --st-show-bg:#F0E7D2;
  --st-built:#2C3E8C;
  --st-built-bg:#DFE4F5;

  --sp-1:clamp(.5rem,.4rem + .3vw,.75rem);
  --sp-2:clamp(1rem,.8rem + .8vw,1.5rem);
  --sp-3:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  --sp-4:clamp(3rem,2.4rem + 3vw,5rem);
  --sp-5:clamp(4.5rem,3.5rem + 5vw,8rem);

  --t-xs:11px;
  --t-sm:13px;
  --t-base:clamp(15px,14.4px + .2vw,16.5px);
  --t-lg:clamp(19px,17px + .9vw,24px);
  --t-xl:clamp(28px,23px + 2.2vw,44px);
  --t-2xl:clamp(44px,30px + 6vw,104px);

  --dur:260ms;
  --ease:cubic-bezier(.32,.72,0,1);
  --gutter:clamp(20px,4vw,64px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D0F12; --surface:#161A1E; --sunk:#08090B;
    --ink:#EDEEEA; --ink2:#9AA2A9; --ink3:#7D858C;
    --rule:#282D33; --rule-soft:#1E2227;
    --accent:#7C8DFF; --accent-ink:#93A1FF; --accent-soft:#1A2043;
    --st-live:#4FBF8F; --st-live-bg:#0F2B21;
    --st-show:#D3AC55; --st-show-bg:#2C2312;
    --st-built:#8FA0EA; --st-built-bg:#171D33;
  }
}
:root[data-theme="dark"]{
  --ground:#0D0F12; --surface:#161A1E; --sunk:#08090B;
  --ink:#EDEEEA; --ink2:#9AA2A9; --ink3:#7D858C;
  --rule:#282D33; --rule-soft:#1E2227;
  --accent:#7C8DFF; --accent-ink:#93A1FF; --accent-soft:#1A2043;
  --st-live:#4FBF8F; --st-live-bg:#0F2B21;
  --st-show:#D3AC55; --st-show-bg:#2C2312;
  --st-built:#8FA0EA; --st-built-bg:#171D33;
}

/* ─── base ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:var(--t-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.disp{
  font-family:"Anybody","IBM Plex Sans",sans-serif;
  font-variation-settings:"wdth" 100;
  text-wrap:balance;
  margin:0;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#fff}

/* griglia di fondo — la venture è un contenitore, e si vede */
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,var(--rule-soft) 0 1px,transparent 1px calc(100%/6));
  background-size:100% 100%;
  opacity:.42;
}
@media (min-width:900px){
  .grid-bg{background-image:repeating-linear-gradient(90deg,var(--rule-soft) 0 1px,transparent 1px calc(100%/12))}
}
.shell{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 var(--gutter)}

/* ─── etichette ricorrenti ──────────────────────────────── */
.lab{
  font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink3);
}
.lab-accent{color:var(--accent-ink)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule-strong{height:2px;background:var(--ink);border:0;margin:0}

/* stato — la parola che questo sito usa più di ogni altra */
.st{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--rule);color:var(--ink3);
  white-space:nowrap;
}
.st::before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%}
.st-live{color:var(--st-live);background:var(--st-live-bg);border-color:currentColor}
.st-show{color:var(--st-show);background:var(--st-show-bg);border-color:currentColor}
.st-built{color:var(--st-built);background:var(--st-built-bg);border-color:currentColor}

/* ─── nav ───────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:var(--sp-2);height:60px}
.brand{
  font-family:"Anybody",sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em;font-variation-settings:"wdth" 112;
}
.brand sup{font-size:9px;vertical-align:super;font-weight:500}
.nav-links{
  display:flex;gap:var(--sp-2);margin-left:auto;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav-links::-webkit-scrollbar{display:none}
@media (max-width:859px){
  .nav-in{flex-wrap:wrap;height:auto;min-height:58px;padding:8px var(--gutter);row-gap:4px}
  .nav-links{order:3;flex-basis:100%;margin-left:0;padding-bottom:3px}
  .nav-cta{margin-left:auto}
  .nav-cta,.theme-btn{min-height:44px;display:inline-flex;align-items:center}
  .nav-cta{padding:0 16px}
  .theme-btn{width:44px}
}
.nav-links a{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.06em;color:var(--ink2);
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-links a:hover{color:var(--ink);border-color:var(--accent)}
.nav-cta{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.06em;padding:8px 14px;border:1px solid var(--ink);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
@media (min-width:860px){.nav-cta{margin-left:0}}
.nav-cta:hover{background:var(--ink);color:var(--ground)}
.theme-btn{
  background:none;border:1px solid var(--rule);color:var(--ink2);
  width:32px;height:32px;cursor:pointer;font-size:13px;line-height:1;
  display:grid;place-items:center;
}
.theme-btn:hover{border-color:var(--ink);color:var(--ink)}

/* ─── hero ──────────────────────────────────────────────── */
.hero{padding:var(--sp-5) 0 var(--sp-4);border-bottom:2px solid var(--ink)}
.hero-eyebrow{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:var(--sp-3)}
.hero h1{
  font-size:var(--t-2xl);line-height:.9;font-weight:800;
  letter-spacing:-.035em;font-variation-settings:"wdth" 108;
  max-width:15ch;
}
.hero h1 .em{color:var(--accent-ink)}
.hero-sub{
  font-family:"Anybody",sans-serif;font-weight:600;
  font-size:var(--t-lg);margin-top:var(--sp-2);color:var(--ink);
  letter-spacing:-.01em;
}
.hero-body{max-width:56ch;margin-top:var(--sp-2);color:var(--ink2);font-size:var(--t-base)}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-3)}
.btn{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:13px 20px;border:1px solid var(--ink);
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:none;color:var(--ink);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{background:var(--ink);color:var(--ground);transform:translateY(-1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* pannello di stato: potenza installata, dichiarata */
.panel{
  margin-top:var(--sp-4);border:1px solid var(--rule);background:var(--surface);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.panel-cell{padding:16px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.panel-cell:last-child{border-right:0}
.panel-cell .v{
  font-family:"Anybody",sans-serif;font-weight:700;font-size:clamp(22px,3vw,32px);
  line-height:1;letter-spacing:-.02em;font-variation-settings:"wdth" 106;
  display:block;margin-bottom:6px;
}
.panel-cell .v.accent{color:var(--accent-ink)}
.panel-foot{
  grid-column:1/-1;padding:12px 18px;display:flex;flex-wrap:wrap;gap:6px 18px;
  background:var(--sunk);
}

/* ─── sezioni ───────────────────────────────────────────── */
.sec{padding:var(--sp-5) 0;border-bottom:1px solid var(--rule)}
.sec-head{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3)}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-3);align-items:end}
}
.sec-num{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.sec-num .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent-ink);letter-spacing:.1em}
.sec h2{
  font-size:var(--t-xl);font-weight:800;line-height:1.02;
  letter-spacing:-.03em;font-variation-settings:"wdth" 106;max-width:18ch;
}
.sec-lede{color:var(--ink2);max-width:58ch;font-size:var(--t-base)}
.sec-lede strong{color:var(--ink);font-weight:600}

/* protocollo: sette fasi, e la numerazione è vera */
.phases{border-top:1px solid var(--ink)}
.phase{
  display:grid;grid-template-columns:52px 1fr;gap:var(--sp-2);
  padding:18px 0;border-bottom:1px solid var(--rule-soft);align-items:start;
}
@media (min-width:820px){.phase{grid-template-columns:52px minmax(140px,220px) 1fr auto;align-items:baseline}}
.phase .pn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink3)}
.phase .pt{font-family:"Anybody",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em}
.phase .pd{color:var(--ink2);font-size:14.5px;max-width:62ch}
.phase[data-here="1"]{background:var(--accent-soft);margin:0 calc(var(--sp-1)*-1);padding-left:var(--sp-1);padding-right:var(--sp-1)}

/* progetti */
.projects{display:grid;gap:0;border-top:1px solid var(--ink)}
.proj{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-2);
  padding:22px 0;border-bottom:1px solid var(--rule-soft);align-items:start;
  transition:padding-left var(--dur) var(--ease);
}
@media (min-width:820px){
  .proj{grid-template-columns:minmax(150px,220px) 1fr minmax(120px,200px) auto;align-items:baseline}
  .proj:hover{padding-left:10px}
}
.proj-name{font-family:"Anybody",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;font-variation-settings:"wdth" 108}
.proj-name sup{font-size:9px;vertical-align:super;font-weight:500}
.proj-what{color:var(--ink2);font-size:14.5px;max-width:56ch}
.proj-meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink3)}
.proj-link{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--accent-ink);border-bottom:1px solid currentColor}

/* colonne generiche */
.cols3{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:760px){.cols3{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--surface);padding:var(--sp-2)}
.cell h3{font-family:"Anybody",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
.cell p{color:var(--ink2);font-size:14.5px}
.cell .lab{margin-bottom:12px;display:block}

/* access */
.tiers{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--sp-2)}
@media (min-width:760px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--surface);padding:var(--sp-2);display:flex;flex-direction:column;gap:10px}
.tier .tname{font-family:"Anybody",sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em}
.tier ul{margin:0;padding-left:1.1em;color:var(--ink2);font-size:14px;display:grid;gap:5px}
.tier .undecided{margin-top:auto;padding-top:12px;border-top:1px dashed var(--rule);color:var(--ink3);font-size:12.5px}

/* la sezione che rende credibile tutto il resto */
.gaps{border:1px solid var(--ink);background:var(--surface)}
.gap-row{display:grid;grid-template-columns:1fr;gap:4px;padding:14px var(--sp-2);border-bottom:1px solid var(--rule-soft)}
@media (min-width:760px){.gap-row{grid-template-columns:minmax(160px,240px) 1fr;gap:var(--sp-2);align-items:baseline}}
.gap-row:last-child{border-bottom:0}
.gap-row .g{font-family:"Anybody",sans-serif;font-weight:700;font-size:15px}
.gap-row .s{color:var(--ink2);font-size:14.5px}

/* cta */
.cta{padding:var(--sp-5) 0;border-bottom:1px solid var(--rule)}
.cta h2{font-size:var(--t-2xl);line-height:.9;font-weight:800;letter-spacing:-.035em;font-variation-settings:"wdth" 108;max-width:12ch}
.cta-grid{display:grid;gap:var(--sp-3);margin-top:var(--sp-3)}
@media (min-width:820px){.cta-grid{grid-template-columns:1fr 1fr}}

/* footer */
.foot{padding:var(--sp-3) 0 var(--sp-4)}
.foot-grid{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3)}
@media (min-width:760px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
.foot-col a{display:block;color:var(--ink2);font-size:14px;padding:3px 0;transition:color var(--dur) var(--ease)}
.foot-col a:hover{color:var(--accent-ink)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:var(--sp-2);border-top:1px solid var(--rule)}

/* ─── movimento — presente, orchestrato, disattivabile ──── */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 620ms var(--ease);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}