:root{
  --bg:#071018;
  --panel:#0d1a26;
  --panel2:#101f2e;
  --line:rgba(255,255,255,.12);
  --text:#eef6ff;
  --muted:#a8b8c8;
  --accent:#77b7ff;
  --accent2:#b9e3ff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 20% 5%,rgba(64,142,255,.25),transparent 32%),
    linear-gradient(135deg,#050910,#071018 45%,#0a1520);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 7vw;
  background:rgba(5,10,16,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.brand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.mark{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  color:#06101b;font-weight:900;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
nav{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:14px}
.navBtn,.primary,.secondary{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:12px 18px;font-weight:700;
}
.navBtn,.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101b}
.secondary{border:1px solid var(--line);color:var(--text)}
.hero{
  display:grid;grid-template-columns:1.02fr .98fr;gap:42px;
  padding:86px 7vw 60px;align-items:center;
}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);font-size:12px;font-weight:800}
h1{font-size:clamp(42px,6vw,76px);line-height:.95;margin:12px 0 22px}
h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0 0 18px}
h3{margin:0 0 10px}
.lead,.section p,.cta p{color:var(--muted);font-size:18px;line-height:1.65}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.heroPanel,.codeCard,article{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border-radius:26px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.heroPanel{padding:24px}
.canvasMock{
  height:410px;border-radius:20px;position:relative;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    #07111b;
  background-size:32px 32px;
}
.node{
  position:absolute;
  padding:18px 22px;border-radius:18px;
  background:rgba(119,183,255,.15);
  border:1px solid rgba(119,183,255,.45);
  color:#dfefff;font-weight:800;
}
.n1{left:44px;top:52px}.n2{right:58px;top:112px}.n3{left:130px;bottom:70px}
svg{position:absolute;inset:0;width:100%;height:100%;fill:none}
path{stroke:rgba(185,227,255,.7);stroke-width:4;stroke-linecap:round}
.section{padding:70px 7vw}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
article{padding:26px}
article p{font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.codeCard{padding:24px;overflow:auto}
pre{margin:0;color:#d7ecff;font-size:15px;line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:26px}
.steps div{
  border:1px solid var(--line);border-radius:20px;padding:22px;
  background:rgba(255,255,255,.05)
}
.steps b{display:block;color:var(--accent2);margin-bottom:10px}
.steps span{font-weight:800}
.cta{
  margin:50px 7vw 80px;padding:46px;border-radius:30px;text-align:center;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(119,183,255,.18),rgba(255,255,255,.05));
}
footer{
  padding:26px 7vw;color:var(--muted);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
@media(max-width:900px){
  .hero,.split{grid-template-columns:1fr}
  .grid,.steps{grid-template-columns:1fr}
  nav{display:none}
}