/* Tema: scuro di default, chiaro con preferenza di sistema o con il pulsante in alto */
:root{
  --bg:#070b10; --bg-rgb:7,11,16; --ink:#e8eef5; --ink-2:#c3d0dc; --muted:#8fa3b5; --line:#1d2a38;
  --accent:#ff6a2b; --accent-glow:rgba(255,106,43,.55); --btn-ink:#120804; --cyan:#7fd4ff; --ok:#7dffb0;
  --panel:rgba(10,16,23,.72); --panel-solid:#0a1017;
  --border-strong:#3a4a5b; --border-hover:#34495e; --field-bg:#0c141c; --field-border:#243445;
  --stroke:#b9c9d8; --dot:#2a3846;
  --feat-tint:rgba(255,106,43,.09); --bridge-border:#31465a; --bridge-tint:rgba(127,212,255,.08); --bridge-bg:rgba(10,16,23,.85);
  --scene-line:#a9bfd2; --scene-hot:#ff6a2b; --scene-grid:#16222f; --scene-dots:#7fd4ff; --scene-alpha:.8;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eceff3; --bg-rgb:236,239,243; --ink:#0d1824; --ink-2:#2f4254; --muted:#566b7f; --line:#cdd6df;
    --accent:#d9480f; --accent-glow:rgba(217,72,15,.4); --btn-ink:#ffffff; --cyan:#0a6a96; --ok:#0b7a3e;
    --panel:rgba(255,255,255,.72); --panel-solid:#ffffff;
    --border-strong:#8fa1b2; --border-hover:#5d7388; --field-bg:#ffffff; --field-border:#b9c6d2;
    --stroke:#233447; --dot:#b9c6d2;
    --feat-tint:rgba(217,72,15,.08); --bridge-border:#9db4c6; --bridge-tint:rgba(10,106,150,.08); --bridge-bg:rgba(255,255,255,.82);
    --scene-line:#223447; --scene-hot:#d9480f; --scene-grid:#c3ceda; --scene-dots:#0a6a96; --scene-alpha:.85;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#eceff3; --bg-rgb:236,239,243; --ink:#0d1824; --ink-2:#2f4254; --muted:#566b7f; --line:#cdd6df;
  --accent:#d9480f; --accent-glow:rgba(217,72,15,.4); --btn-ink:#ffffff; --cyan:#0a6a96; --ok:#0b7a3e;
  --panel:rgba(255,255,255,.72); --panel-solid:#ffffff;
  --border-strong:#8fa1b2; --border-hover:#5d7388; --field-bg:#ffffff; --field-border:#b9c6d2;
  --stroke:#233447; --dot:#b9c6d2;
  --feat-tint:rgba(217,72,15,.08); --bridge-border:#9db4c6; --bridge-tint:rgba(10,106,150,.08); --bridge-bg:rgba(255,255,255,.82);
  --scene-line:#223447; --scene-hot:#d9480f; --scene-grid:#c3ceda; --scene-dots:#0a6a96; --scene-alpha:.85;
  color-scheme:light;
}
:root[data-theme="dark"]{ color-scheme:dark; }

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;font-size:112.5%}
@media (max-width:600px){html{font-size:106.25%}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
.mono{font-family:var(--mono)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;filter:blur(var(--scene-blur));transform:scale(1.02)}
:root{--scene-blur:3.5px}
@media (max-width:900px){:root{--scene-blur:2.5px}}
.hero .eyebrow,.hero h1,.hero .lead,.stats{text-shadow:0 0 22px rgba(var(--bg-rgb),.95),0 0 6px rgba(var(--bg-rgb),.85)}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 70% 40%,transparent 30%,rgba(var(--bg-rgb),.75) 100%)}
.no-webgl body{background:var(--bg) repeating-linear-gradient(0deg,transparent 0 39px,var(--line) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,var(--line) 39px 40px)}
main,.foot{position:relative;z-index:2}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.wrap.narrow{width:min(760px,100% - 32px)}
.wrap.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,calc((100% - 1120px)/2));transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(12px);border-color:var(--line)}
.nav-end{display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.logo b{color:var(--accent);font-weight:600}
.links{display:flex;gap:26px;font-size:.92rem}
.links a{text-decoration:none;color:var(--muted);transition:color .2s}
.links a:hover{color:var(--ink)}
.links .ext{color:var(--cyan)}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;background:transparent;color:var(--ink);border:1px solid var(--border-strong);border-radius:2px;cursor:pointer;transition:border-color .2s,transform .2s}
.theme-toggle:hover{border-color:var(--ink);transform:rotate(12deg)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
.theme-toggle[data-mode="dark"] .sun{display:block}
.theme-toggle[data-mode="dark"] .moon{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;background:var(--accent);color:var(--btn-ink);font:600 .98rem var(--sans);text-decoration:none;border:1px solid var(--accent);border-radius:2px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--ink);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:.88rem}

/* type */
.eyebrow{font:500 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:clamp(2.6rem,7.2vw,6rem);line-height:1.02;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin-bottom:18px;text-wrap:balance}
h3{font-size:1.2rem;font-weight:600;margin-bottom:8px}
.label{font:500 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lead{max-width:560px;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink-2);margin:24px 0 32px}
.sub{max-width:560px;color:var(--muted);font-size:1.08rem;margin-bottom:36px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;position:relative}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);max-width:600px}
.stats dt{font:600 1.35rem var(--sans)}
.stats dd{font:.82rem var(--mono);color:var(--muted);margin:2px 0 0;max-width:190px}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font:.72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.scale-tag{position:absolute;right:max(16px,calc((100% - 1120px)/2));bottom:26px;font-size:.72rem;letter-spacing:.14em;color:var(--muted)}

/* panels */
.panel{padding:120px 0;background:linear-gradient(180deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.8) 90px,rgba(var(--bg-rgb),.8) calc(100% - 90px),rgba(var(--bg-rgb),0))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 56px}
.step,.card,.plan-card{position:relative;background:var(--panel);border:1px solid var(--line);padding:28px;backdrop-filter:blur(8px);transition:border-color .25s,transform .25s}
.step:hover,.card:hover,.plan-card:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.step::before,.card::before,.plan-card::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.num{color:var(--accent);font-size:.85rem;display:block;margin-bottom:18px}
.step p,.card p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* demo */
.demo{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.term,.plan{background:var(--panel-solid);border:1px solid var(--line);overflow:hidden}
.term-bar,.plan-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.term-bar span{margin-left:8px}
.plan-bar{justify-content:space-between;letter-spacing:.1em}
.term-body{padding:20px;font-size:.86rem;line-height:1.7;min-height:310px}
.term-body .ln{display:block;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.term-body .ln.show{opacity:1;transform:none}
.term-body .cmd{color:var(--muted)}
.term-body .user{color:var(--ink)}
.term-body .user::before{content:"› ";color:var(--accent)}
.term-body .log{color:var(--cyan)}
.term-body .log::before{content:"● ";color:var(--cyan)}
.term-body .ok{color:var(--ok)}
.term-body .ok::before{content:"✔ "}
.caret{display:inline-block;width:8px;height:1em;background:var(--accent);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#plan{display:block;width:100%;height:auto}
.stroke{fill:none;stroke:var(--stroke);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1)}
.stroke.on{stroke-dashoffset:0}
.stroke.acc{stroke:var(--accent);stroke-width:2}
.stroke.dim{stroke:var(--cyan);stroke-width:1}
.plan-txt{font:500 11px var(--mono);fill:var(--muted);letter-spacing:.08em;transition:opacity .6s}
.dim-txt{fill:var(--cyan)}
#gap{transition:opacity .4s}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.plan-card{display:flex;flex-direction:column;gap:14px}
.plan-card.featured{border-color:var(--accent);background:linear-gradient(180deg,var(--feat-tint),var(--panel))}
.plan-card .tag{font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.price{font:600 1.5rem var(--sans);color:var(--ink)}
.plan-card ul{list-style:none;padding:0;display:grid;gap:10px;color:var(--ink-2);flex:1;margin:6px 0 14px}
.plan-card li{padding-left:22px;position:relative;font-size:.96rem}
.plan-card li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--accent)}

/* trust */
.checks{list-style:none;padding:0;display:grid;gap:14px}
.checks li{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);padding:18px 20px;color:var(--ink-2)}
.checks b{color:var(--ink)}

/* bridge */
.bridge{padding:40px 0 100px}
.bridge-card{border:1px solid var(--bridge-border);background:linear-gradient(120deg,var(--bridge-tint),var(--bridge-bg));padding:clamp(28px,5vw,56px);display:grid;gap:14px;justify-items:start}
.bridge-card .label{color:var(--cyan)}
.bridge-card h2{margin-bottom:6px}
.bridge-card p:not(.label){max-width:640px;color:var(--ink-2)}

/* faq */
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font:500 1.1rem var(--sans);list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::after{content:"+";color:var(--accent);font:400 1.5rem/1 var(--mono);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:12px;max-width:620px}
summary::-webkit-details-marker{display:none}

/* form */
.form{display:grid;gap:16px;background:var(--panel);border:1px solid var(--line);padding:30px;backdrop-filter:blur(8px)}
.form label{display:grid;gap:6px;font:.78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{background:var(--field-bg);border:1px solid var(--field-border);color:var(--ink);padding:12px 14px;font:1rem var(--sans);border-radius:2px;text-transform:none;letter-spacing:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.hp{position:absolute;left:-9999px}
.fine{font:.75rem var(--mono);color:var(--muted)}
.fine.err{color:var(--accent)}
.thanks{font:600 1.4rem/1.3 var(--sans);color:var(--ink)}

.foot{border-top:1px solid var(--line);background:var(--bg);padding:26px 0;font-size:.78rem;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{color:var(--cyan)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .links{display:none}
  .steps,.grid,.plans,.demo,.wrap.two{grid-template-columns:1fr}
  .wrap.two{gap:30px}
  .panel{padding:84px 0}
  .scale-tag{display:none}
  .vignette{background:linear-gradient(180deg,rgba(var(--bg-rgb),.15),rgba(var(--bg-rgb),.6))}
}
@media (max-width:480px){.btn-sm{padding:8px 12px;font-size:.8rem;white-space:nowrap}.logo span{font-size:.95rem}.nav-end{gap:8px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .dot,.scroll-hint span,.caret{animation:none}
  .stroke{transition:none}
}