body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0b0e14; color:#e6edf3; }
.top { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:#0f1320; position:sticky; top:0; }
.logo { width:42px; height:42px; border-radius:8px; }
.top nav a { color:#b9c6d3; margin:0 10px; text-decoration:none; }
.hero { text-align:center; padding:40px 24px; }
.hero img { width:100%; max-width:960px; border-radius:16px; display:block; margin:0 auto 16px; }
.hero .btn { display:inline-block; padding:12px 18px; border-radius:12px; background:#1f2637; color:#e6edf3; text-decoration:none; margin:8px; }
.hero .btn.primary { background:#3b82f6; color:#fff; }
#how, #sample, #pricing { padding:40px 24px; max-width:960px; margin:0 auto; }
.sample { background:#101626; padding:16px; border-radius:12px; overflow:auto; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.card { background:#0f1320; padding:16px; border-radius:14px; border:1px solid #1b2030; }
.card h3 { margin-top:0; }
footer { padding:24px; text-align:center; color:#93a4b7; }
.badge { display:inline-block; padding:4px 8px; border-radius:8px; background:#0a7; color:#031; font-weight:600; margin-left:8px; }