:root {
  color-scheme: light;
  --bg: #f8fafc;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
  --teal: #0f766e;
  --border: #dbe4ef;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
  color: var(--ink);
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }

code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.container { max-width: 980px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; }

h2 { line-height: 1.2; margin-top: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

.btn {
  display: inline-block;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
}

.btn-primary { background: var(--accent); color: white; }

.btn-secondary { background: #eef2ff; color: #3730a3; }

.hero { display: grid; gap: 2rem; align-items: center; }

.footer { margin-top: 2rem; color: var(--muted); font-size: 0.95rem; }