:root {
  color-scheme: light dark;
  --bg: #f5f7fb;
  --surface: rgba(255,255,255,.82);
  --text: #131722;
  --muted: #5b6475;
  --line: rgba(18,28,45,.12);
  --blue: #0a72ef;
  --violet: #7757ff;
  --code: #171922;
  --shadow: 0 24px 70px rgba(25,40,80,.16);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#090b11; --surface:rgba(23,26,35,.88); --text:#f3f5fa; --muted:#a9b0bf; --line:rgba(255,255,255,.12); --blue:#5fa8ff; --violet:#a38cff; --shadow:0 24px 70px rgba(0,0,0,.42); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 12% -8%, rgba(10,114,239,.16), transparent 32rem), radial-gradient(circle at 92% 12%, rgba(119,87,255,.14), transparent 28rem); }
a { color:var(--blue); text-decoration-thickness:.08em; text-underline-offset:.16em; }
a:hover { text-decoration-thickness:.14em; }
.wrap { width:min(1120px, calc(100% - 40px)); margin-inline:auto; position:relative; }
header { border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(18px); position:sticky; top:0; z-index:10; }
nav { min-height:68px; display:flex; align-items:center; gap:22px; }
.brand { display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--text); text-decoration:none; font-weight:720; letter-spacing:-.02em; }
.brand img { width:36px; height:36px; border-radius:9px; box-shadow:0 5px 15px rgba(36,80,190,.22); }
.links { display:flex; gap:18px; flex-wrap:wrap; }
.links a { color:var(--muted); text-decoration:none; font-size:.92rem; }
.links a[aria-current="page"] { color:var(--text); font-weight:650; }
.hero { padding:clamp(70px, 10vw, 132px) 0 64px; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(42px,7vw,92px); align-items:center; }
.eyebrow { color:var(--blue); font-size:.8rem; font-weight:760; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-size:clamp(3rem,7vw,6.5rem); line-height:.94; letter-spacing:-.065em; margin:.2em 0 .24em; }
h2 { font-size:clamp(1.7rem,3vw,2.45rem); line-height:1.1; letter-spacing:-.035em; margin:0 0 .7em; }
h3 { line-height:1.25; margin:1.7em 0 .45em; }
.lede { font-size:clamp(1.1rem,2vw,1.35rem); color:var(--muted); max-width:38rem; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; color:white; background:linear-gradient(135deg,var(--blue),var(--violet)); text-decoration:none; font-weight:680; box-shadow:0 10px 28px rgba(32,104,240,.22); }
.button.secondary { color:var(--text); background:var(--surface); border:1px solid var(--line); box-shadow:none; }
.appshot { margin:0; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#111; box-shadow:var(--shadow); transform:perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.appshot img { display:block; width:100%; height:auto; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 0 90px; }
.card, .legal { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 36px rgba(20,35,70,.07); }
.card { padding:24px; }
.card strong { display:block; margin-bottom:6px; }
.card p { margin:0; color:var(--muted); }
.legal { width:min(800px,100%); margin:56px auto; padding:clamp(24px,5vw,58px); }
.legal h1 { font-size:clamp(2.4rem,7vw,4.4rem); }
.legal p, .legal li { color:var(--muted); }
.legal strong { color:var(--text); }
.legal hr { border:0; border-top:1px solid var(--line); margin:42px 0; }
.notice { padding:16px 18px; border:1px solid #d28c00; border-radius:12px; background:color-mix(in srgb,#ffb300 12%,var(--surface)); color:var(--text) !important; }
.meta { color:var(--muted); font-size:.9rem; }
code { padding:.12em .36em; border-radius:.4em; color:#fff; background:var(--code); }
footer { border-top:1px solid var(--line); padding:28px 0 46px; color:var(--muted); font-size:.9rem; }
.footerline { display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; }
.footerlinks { display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:800px) { .hero { grid-template-columns:1fr; padding-top:58px; } .appshot { transform:none; } .features { grid-template-columns:1fr; } nav { align-items:flex-start; padding-block:14px; } .links { justify-content:flex-end; gap:8px 14px; } }
@media (max-width:520px) { .wrap { width:min(100% - 24px,1120px); } .brand span { display:none; } .links { font-size:.88rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }