:root { --bg:#05060d; --panel:#0c0f1c; --panel2:#11152a; --line:#1e2440; --text:#e8eaf6; --dim:#8a90b4; --accent:#8b7cff; --accent2:#5ad7ff; --glow:rgba(139,124,255,.35); --radius:16px; --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent2); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }
.wrap { width:min(1120px, 100% - 32px); margin-inline:auto; }
header.top { position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); background:rgba(5,6,13,.65); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { font-weight:800; letter-spacing:.18em; font-size:15px; color:var(--text); }
.brand span { color:var(--accent); }
nav a { color:var(--dim); margin-left:22px; font-size:14px; font-weight:600; }
nav a:hover, nav a.on { color:var(--text); text-decoration:none; }
.hero { position:relative; min-height:78vh; display:grid; place-items:center; overflow:hidden; text-align:center; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero .inner { position:relative; padding:80px 16px; }
.hero h1 { font-size:clamp(40px, 8vw, 92px); letter-spacing:.22em; margin:0; font-weight:800; text-shadow:0 0 40px var(--glow); }
.hero p.lead { font-size:clamp(17px, 2.2vw, 22px); color:#c9cdf0; max-width:640px; margin:18px auto 30px; }
.btn { display:inline-block; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; background:linear-gradient(135deg, var(--accent), #5b4bd6); color:#fff; box-shadow:0 10px 30px var(--glow); }
.btn:hover { text-decoration:none; filter:brightness(1.1); }
.btn.ghost { background:transparent; border:1px solid var(--line); box-shadow:none; color:var(--text); margin-left:10px; }
section { padding:72px 0; }
section.alt { background:linear-gradient(180deg, transparent, rgba(139,124,255,.05), transparent); }
h2 { font-size:clamp(26px, 4vw, 38px); margin:0 0 10px; letter-spacing:.02em; }
h3 { font-size:20px; margin:0 0 6px; }
p.sub { color:var(--dim); margin:0 0 34px; max-width:720px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:transform .2s, border-color .2s; }
.card:hover { transform:translateY(-3px); border-color:#2d3660; }
.card img { border-radius:10px; border:1px solid var(--line); margin-bottom:16px; }
.card .tag { font-size:11px; letter-spacing:.2em; color:var(--accent2); font-weight:700; }
.card p { color:var(--dim); font-size:15px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.feature { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.feature h3 { font-size:16px; color:var(--text); }
.feature p { margin:0; color:var(--dim); font-size:14px; }
.demos { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; }
.demo { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none; }
.demo:hover { border-color:#2d3660; }
.demo .play { width:40px; height:40px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex:none; color:#fff; font-size:14px; }
.demo.playing .play { background:var(--accent2); color:#05060d; }
.demo .name { font-weight:700; font-size:15px; }
.demo .bank { color:var(--dim); font-size:12px; letter-spacing:.1em; }
.demo .bar { height:3px; background:var(--line); border-radius:2px; margin-top:6px; overflow:hidden; }
.demo .bar i { display:block; height:100%; width:0; background:var(--accent2); }
.shot { border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.two { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
@media (max-width:820px) { .two { grid-template-columns:1fr; } nav a { margin-left:14px; } }
.steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.steps li { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px 16px 58px; position:relative; color:#c9cdf0; }
.steps li::before { counter-increment:s; content:counter(s); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:grid; place-items:center; font-size:13px; }
.note { border-left:3px solid var(--accent2); background:rgba(90,215,255,.06); padding:14px 18px; border-radius:0 10px 10px 0; color:#c9cdf0; font-size:15px; }
.dl { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.dl small { color:var(--dim); }
table { width:100%; border-collapse:collapse; font-size:15px; }
td, th { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--dim); font-weight:600; font-size:13px; letter-spacing:.08em; }
footer { border-top:1px solid var(--line); padding:36px 0; color:var(--dim); font-size:13px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }
code { background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:2px 6px; font-size:13px; }

.btn.intro { display:inline-flex; width:auto; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:12px 22px; gap:8px; align-items:center; }
.btn.intro.playing { border-color:var(--accent2); color:var(--accent2); }