:root { --bg:#070b14; --bg2:#0a101c; --line:#1e2b45; --text:#e2e8f0; --muted:#7c8aa5; --teal:#36d6b5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(1200px 600px at 70% -10%, rgba(54,214,181,.12), transparent 60%), var(--bg); color:var(--text); font:16px/1.6 "Inter","Segoe UI",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:16px 6vw; background:rgba(7,11,20,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; font-weight:600; }
.nav nav { display:flex; gap:28px; align-items:center; font-size:14px; color:var(--muted); }
.nav nav a:hover { color:var(--text); }
.btn { display:inline-block; background:var(--teal); color:#04110e; font-weight:600; padding:12px 22px; border-radius:12px; transition:.15s; }
.btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.small { padding:7px 14px; font-size:14px; color:#04110e; }
.btn.big { padding:16px 32px; font-size:18px; }
main { max-width:1120px; margin:0 auto; padding:0 6vw; }
.hero { padding:96px 0 64px; text-align:center; }
.pill { display:inline-block; font-size:13px; color:var(--teal); border:1px solid rgba(54,214,181,.35); background:rgba(54,214,181,.08); padding:4px 12px; border-radius:999px; }
h1 { font-size:clamp(36px,6vw,64px); line-height:1.08; margin:20px 0; letter-spacing:-.02em; }
.accent { color:var(--teal); }
.lead { max-width:720px; margin:0 auto; color:var(--muted); font-size:19px; }
.lead.small { font-size:16px; }
.cta { display:flex; gap:12px; justify-content:center; margin:36px 0 56px; flex-wrap:wrap; }
.hero-card { max-width:560px; margin:0 auto; text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:18px 22px; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.hc-row { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.hc-row:last-of-type { border-bottom:0; }
.hc-row .muted { margin-left:auto; font-size:13px; }
.hc-caption { font-size:11px; color:#4b5874; text-align:right; margin-top:6px; }
.dot { width:10px; height:10px; border-radius:50%; background:#475569; }
.dot.on { background:var(--teal); box-shadow:0 0 12px var(--teal); }
.section { padding:72px 0; border-top:1px solid var(--line); }
.section h2 { font-size:32px; margin:0 0 28px; letter-spacing:-.01em; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.card { background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card h3 { margin:6px 0 8px; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.num { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--teal); background:rgba(54,214,181,.1); border:1px solid rgba(54,214,181,.35); font-weight:700; }
.download { text-align:center; }
.download .btn { margin:24px 0 10px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
details { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:12px; }
summary { cursor:pointer; font-weight:600; }
details p { color:var(--muted); margin:10px 0 0; }
.footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:28px 6vw; border-top:1px solid var(--line); font-size:14px; }
@media (max-width:720px) { .nav nav a:not(.btn) { display:none; } }