:root {
  --bg: #0b0f14;
  --panel: #121923;
  --ink: #e6edf3;
  --muted: #9fb0c0;
  --accent: #5cc8ff;
  --accent-ink: #062033;
  --line: #22303f;
  --code-bg: #0e1520;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fb;
    --panel: #ffffff;
    --ink: #10161d;
    --muted: #4b5a68;
    --accent: #0b6fb8;
    --accent-ink: #ffffff;
    --line: #dbe3ea;
    --code-bg: #eef2f6;
  }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--accent); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.92em; }
pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: 0.9em; }

.hero { max-width: 900px; margin: 0 auto; padding: 64px 24px 24px; }
.kicker { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 8px; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 0 0 16px; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 760px; }
.lead em { color: var(--ink); font-style: normal; font-weight: 600; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.btn.ghost { background: transparent; color: var(--accent); }

main { max-width: 900px; margin: 0 auto; padding: 0 24px 40px; }
section { padding: 28px 0; border-top: 1px solid var(--line); }
h2 { font-size: 1.35rem; margin: 0 0 12px; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.grid { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0; }
.links ul { list-style: none; padding: 0; }
footer { max-width: 900px; margin: 0 auto; padding: 24px 24px 56px; border-top: 1px solid var(--line); color: var(--muted); }
.fine { font-size: 0.85rem; }