:root {
  --bg: #0b1220;
  --card: rgba(255,255,255,0.05);
  --accent: #0ea5e9;
  --accent2: #2563eb;
  --text: #e5e7eb;
  --muted: #94a3b8;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); }
.bg { position:fixed; inset:0; background:radial-gradient(700px at 15% 20%, #1e3a8a33, transparent), radial-gradient(600px at 85% 80%, #0ea5e933, transparent); z-index:-1; }
header { display:flex; justify-content:space-between; align-items:center; padding:22px 6%; backdrop-filter:blur(10px); position:sticky; top:0; }
.logo { font-weight:700; font-size:1.4rem; color:#fff; }
nav a { color:var(--muted); text-decoration:none; margin-left:26px; }
nav a:hover { color:#fff; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; padding:70px 6%; align-items:center; }
.hero h1 { font-size:clamp(2.2rem,4.5vw,3.5rem); line-height:1.1; }
.hero h1 span { color:var(--accent); }
.hero p { margin:18px 0 28px; color:var(--muted); max-width:520px; font-size:1.05rem; }
.cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn-primary { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#000; font-weight:700; padding:14px 26px; border-radius:12px; text-decoration:none; display:inline-block; transition:.2s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px #0ea5e955; }
.btn-primary.large { padding:18px 34px; font-size:1.05rem; }
.version { color:var(--muted); font-size:.9rem; }
.hero-card { background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:12px; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.screenshot { width:100%; height:auto; border-radius:12px; display:block; }
.features { padding:70px 6%; text-align:center; }
.features h2, .how h2, .download h2 { font-size:2rem; margin-bottom:32px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.card { background:var(--card); padding:22px; border-radius:14px; border:1px solid rgba(255,255,255,.06); text-align:left; }
.card h3 { margin-bottom:8px; }
.card p { color:var(--muted); font-size:.95rem; }
.how { padding:50px 6%; text-align:center; }
.steps { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.steps div { background:var(--card); padding:16px 22px; border-radius:12px; border:1px solid rgba(255,255,255,.06); }
.steps span { display:inline-grid; place-items:center; width:26px; height:26px; background:var(--accent); color:#000; border-radius:50%; margin-right:8px; font-weight:700; }
.download { padding:70px 6%; text-align:center; background:linear-gradient(180deg,transparent,rgba(14,165,233,.07)); }
.small { color:var(--muted); margin-top:10px; font-size:.85rem; }
footer { padding:36px 6%; display:flex; justify-content:space-between; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); }
footer a { color:var(--muted); text-decoration:none; }
@media (max-width:900px){ .hero{grid-template-columns:1fr; text-align:center} .hero-card{order:-1} .cta{justify-content:center} }