:root {
  --bg: #ffffff; --bg-alt: #f4f6fa; --text: #16213a; --text-muted: #5a6b8a;
  --accent: #2456e6; --border: #dde4ef;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --space: 1rem; --radius: 10px; --maxw: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1526; --bg-alt:#151f36; --text:#e8edf7; --text-muted:#93a3c0;
          --accent:#6a92ff; --border:#263352; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.6;
}
section { padding: calc(var(--space) * 4) var(--space); }
section > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.alt { background: var(--bg-alt); }
.hero { text-align: center; padding-top: calc(var(--space) * 6); }
.kicker {
  color: var(--accent); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: .8rem; margin: 0 0 var(--space);
}
h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem);
  line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space);
}
.sub { color: var(--text-muted); max-width: 42rem; margin: 0 auto; }
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space);
}
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: calc(var(--space) * 1.5); box-shadow: 0 1px 3px rgba(22,33,58,.08);
}
.card span {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700;
}
.card h2 { font-size: 1.1rem; line-height: 1.15; margin: var(--space) 0 .4rem; }
.card p { margin: 0; color: var(--text-muted); font-size: .95rem; }
code {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 4px; padding: .1em .35em; font-size: .9em;
}
.alt code { background: var(--bg); }
.meta { text-align: center; color: var(--text-muted); font-size: .9rem; margin-top: calc(var(--space) * 3); }