@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('/fonts/JetBrainsMono-var.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/fonts/SpaceGrotesk-var.woff2') format('woff2'); }

:root {
  --bg:#000; --bg2:#0b0a14; --panel:#100e1c; --line:#1e1c2c;
  --text:#e7e7ea; --dim:#8b8b93; --faint:#4a4a55;
  --purple:#8b5cff; --purple-dim:rgba(139,92,255,.16); --green:#00ff5f;
  --red:#ff4d5e; --orange:#ff9f43; --yellow:#ffd166;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--purple); text-decoration:none; }
a:hover { color:var(--green); }
code, pre, .mono { font-family:var(--mono); }
.wrap { max-width:1040px; margin:0 auto; padding:0 24px; }

.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.82); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; }
.brand img { border-radius:7px; }
.nav nav { display:flex; gap:22px; align-items:center; font-size:.92rem; }
.nav nav a { color:var(--dim); }
.nav nav a:hover { color:var(--text); }
.nav nav a.cta { color:#000; background:var(--green); padding:7px 14px; border-radius:8px; font-weight:600; }
.nav nav a.cta:hover { filter:brightness(1.1); }

.hero { position:relative; padding:96px 0 64px; text-align:center; overflow:hidden; }
.hero .glow { position:absolute; top:-120px; left:50%; width:720px; height:720px; transform:translateX(-50%); background:radial-gradient(circle, rgba(139,92,255,.18), transparent 66%); pointer-events:none; }
.hero > * { position:relative; }
.hero img.logo { width:112px; height:112px; border-radius:26px; margin-bottom:24px; }
.hero h1 { font-size:clamp(2.2rem,6vw,3.6rem); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.hero h1 em { font-style:normal; color:var(--purple); }
.hero p.lead { max-width:640px; margin:20px auto 0; color:var(--dim); font-size:1.12rem; }
.actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:10px; font-weight:600; font-size:1rem; border:1px solid transparent; }
.btn-primary { background:var(--green); color:#000; }
.btn-primary:hover { color:#000; filter:brightness(1.1); }
.btn-ghost { border-color:var(--line); color:var(--text); background:var(--bg2); }
.btn-ghost:hover { border-color:var(--purple); color:var(--text); }
.meta { margin-top:14px; font-family:var(--mono); font-size:.78rem; color:var(--faint); letter-spacing:.04em; }

.sample { margin:56px auto 0; max-width:760px; text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(139,92,255,.08); }
.sample .bar { display:flex; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); }
.sample .bar i { width:11px; height:11px; border-radius:50%; background:#2a2836; display:block; }
.sample pre { padding:18px 20px; font-size:.8rem; line-height:1.7; overflow-x:auto; color:var(--dim); }
.ok { color:var(--green); } .med { color:var(--orange); } .hi { color:var(--red); } .lo { color:var(--yellow); } .inf { color:var(--purple); } .k { color:var(--text); }

section { padding:72px 0; border-top:1px solid var(--line); }
.kicker { font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); margin-bottom:10px; }
h2 { font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:700; letter-spacing:-.015em; line-height:1.15; }
.sub { color:var(--dim); max-width:640px; margin-top:12px; font-size:1.05rem; }

.grid { display:grid; gap:14px; margin-top:34px; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.card h3 { font-size:.98rem; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.card h3::before { content:''; width:8px; height:8px; border-radius:2px; background:var(--purple); }
.card p { color:var(--dim); font-size:.9rem; }

.steps { display:grid; gap:18px; margin-top:34px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); counter-reset:s; }
.step { padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--bg2); }
.step::before { counter-increment:s; content:counter(s, decimal-leading-zero); font-family:var(--mono); color:var(--green); font-size:.8rem; letter-spacing:.2em; }
.step h3 { margin:8px 0 6px; font-size:1.05rem; }
.step p { color:var(--dim); font-size:.92rem; }

.tiers { display:grid; gap:18px; margin-top:34px; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.tier { border:1px solid var(--line); border-radius:14px; padding:26px; background:var(--bg2); display:flex; flex-direction:column; }
.tier.pro { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple-dim), 0 24px 60px rgba(139,92,255,.1); }
.tier .name { font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.tier.pro .name { color:var(--purple); }
.tier .price { font-size:2.4rem; font-weight:700; margin:6px 0 2px; letter-spacing:-.02em; }
.tier .price small { font-size:.95rem; color:var(--dim); font-weight:400; letter-spacing:0; }
.tier ul { list-style:none; margin:18px 0 22px; display:grid; gap:9px; flex:1; }
.tier li { padding-left:22px; position:relative; color:var(--text); font-size:.95rem; }
.tier li::before { content:'✓'; position:absolute; left:0; color:var(--green); font-family:var(--mono); }
.tier li.no { color:var(--faint); } .tier li.no::before { content:'—'; color:var(--faint); }
.tier .btn { justify-content:center; }

.priv { display:grid; gap:14px; margin-top:30px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.priv div { padding:18px; border-left:2px solid var(--purple); background:var(--bg2); border-radius:0 10px 10px 0; }
.priv strong { display:block; margin-bottom:4px; }
.priv p { color:var(--dim); font-size:.92rem; }

.dl { display:grid; gap:18px; margin-top:34px; grid-template-columns:1.2fr 1fr; align-items:start; }
@media (max-width:760px) { .dl { grid-template-columns:1fr; } }
.dl .box { border:1px solid var(--line); border-radius:14px; padding:26px; background:var(--bg2); }
.dl h3 { font-size:1.15rem; margin-bottom:8px; }
.dl p { color:var(--dim); font-size:.95rem; }
.dl pre { margin-top:14px; background:#000; border:1px solid var(--line); border-radius:9px; padding:12px 14px; font-size:.82rem; overflow-x:auto; color:var(--text); }
.dl pre span { color:var(--faint); }
.dl .req { margin-top:14px; font-family:var(--mono); font-size:.76rem; color:var(--faint); line-height:1.9; }
.dl .req b { color:var(--dim); font-weight:500; }

.faq { margin-top:30px; display:grid; gap:10px; }
.faq details { border:1px solid var(--line); border-radius:10px; background:var(--bg2); }
.faq summary { cursor:pointer; padding:14px 18px; font-weight:600; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:'+'; color:var(--purple); font-family:var(--mono); margin-right:12px; }
.faq details[open] summary::before { content:'–'; }
.faq details p { padding:0 18px 16px 40px; color:var(--dim); font-size:.95rem; }

.foot { border-top:1px solid var(--line); padding:34px 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:.85rem; }
.foot a { color:var(--dim); } .foot a:hover { color:var(--green); }
.foot-links { display:flex; gap:18px; flex-wrap:wrap; }

.page { padding:64px 0 80px; max-width:760px; }
.page h1 { font-size:2.2rem; letter-spacing:-.02em; margin-bottom:8px; }
.page .lead { color:var(--dim); font-size:1.1rem; margin-bottom:36px; }
.prose h2 { font-size:1.45rem; margin:40px 0 10px; padding-top:24px; border-top:1px solid var(--line); }
.prose h3 { font-size:1.02rem; margin:22px 0 8px; color:var(--purple); font-family:var(--mono); font-weight:500; letter-spacing:.04em; }
.prose p, .prose li { color:#c9c9d0; font-size:.98rem; }
.prose ul { padding-left:22px; margin:6px 0 10px; display:grid; gap:6px; }
.prose code { background:var(--panel); border:1px solid var(--line); padding:1px 6px; border-radius:5px; font-size:.86em; color:var(--text); }
.prose strong { color:var(--text); }
.prose table { border-collapse:collapse; width:100%; margin:12px 0; font-size:.93rem; }
.prose th, .prose td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th { color:var(--dim); font-weight:500; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width:640px) { .nav nav a:not(.cta) { display:none; } .hero { padding-top:64px; } section { padding:56px 0; } }