:root {
  --bg: #ffffff; --bg-soft: #f5f7fb; --text: #0f172a; --muted: #475569;
  --primary: #2563eb; --primary-dark: #1d4ed8; --accent: #0ea5e9;
  --border: #e2e8f0; --card: #ffffff; --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b1120; --bg-soft:#0f172a; --text:#e2e8f0; --muted:#94a3b8;
    --border:#1e293b; --card:#0f172a; --shadow:0 10px 30px rgba(0,0,0,.5); }
}
:root[data-theme="dark"] {
  --bg:#0b1120; --bg-soft:#0f172a; --text:#e2e8f0; --muted:#94a3b8;
  --border:#1e293b; --card:#0f172a; --shadow:0 10px 30px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --bg:#ffffff; --bg-soft:#f5f7fb; --text:#0f172a; --muted:#475569;
  --border:#e2e8f0; --card:#ffffff; --shadow:0 10px 30px rgba(2,6,23,.08);
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.hero { text-align:center; padding: 72px 0 48px; display:flex; flex-direction:column; align-items:center; }
.badge { display:inline-block; background: var(--bg-soft); border:1px solid var(--border); color:var(--muted);
  font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
h1 { font-size: clamp(34px, 6vw, 54px); margin: 8px 0 16px; letter-spacing:-.02em; }
.tagline { font-size: clamp(17px, 2.5vw, 22px); color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
.cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:600; font-size:15px;
  transition:.15s; border:1px solid transparent; }
.btn.primary { background: var(--primary); color:#fff; }
.btn.primary:hover { background: var(--primary-dark); text-decoration:none; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); text-decoration:none; }
.meta { font-size:13px; color: var(--muted); }
section { padding: 44px 0; }
h2 { font-size: clamp(24px, 4vw, 32px); text-align:center; margin:0 0 8px; letter-spacing:-.01em; }
.sub { text-align:center; color: var(--muted); max-width:600px; margin:0 auto 34px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow); }
.card h3 { margin:0 0 6px; font-size:16px; display:flex; align-items:center; gap:8px; }
.card p { margin:0; color: var(--muted); font-size:14px; }
.ic { width:34px; height:34px; border-radius:9px; background: var(--bg-soft); display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.os { text-align:center; margin-top:34px; }
.os span { display:inline-flex; gap:6px; align-items:center; background: var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:14px; margin:6px; }
code { background: var(--bg-soft); border:1px solid var(--border); padding:2px 6px; border-radius:6px; font-size:13px; }
.hero-icon { display:inline-block; width:76px; height:76px; border-radius:18px; margin-bottom:14px; box-shadow: var(--shadow); object-fit:cover; }
.hero-icon-white { display:none; }
:root[data-theme="dark"] .hero-icon { display:none; }
:root[data-theme="dark"] .hero-icon-white { display:inline-block; }
.screenshots { display:grid; gap:18px; margin-top:8px; }
.screenshots img { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); }