:root {
  --bg: oklch(0.985 0.003 265);
  --fg: oklch(0.2 0.02 265);
  --muted: oklch(0.52 0.02 265);
  --primary: oklch(0.47 0.17 265);
  --primary-fg: oklch(0.99 0 0);
  --amber: #f6b34a;
  --glow: oklch(0.47 0.17 265 / 0.12);
  --border: oklch(0.915 0.008 265);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.165 0.012 265);
    --fg: oklch(0.94 0.008 265);
    --muted: oklch(0.68 0.02 265);
    --primary: oklch(0.7 0.13 265);
    --primary-fg: oklch(0.16 0.02 265);
    --glow: oklch(0.7 0.13 265 / 0.14);
    --border: oklch(1 0 0 / 0.1);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(40rem 30rem at -10% 110%, var(--glow), transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  min-height: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 650; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand img { border-radius: 12px; }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4rem 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
  margin: 0 0 1.25rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgb(246 179 74 / 0.6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(246 179 74 / 0.55); } 70%, 100% { box-shadow: 0 0 0 0.55rem rgb(246 179 74 / 0); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
h1 { margin: 0; font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.lede { margin: 1.25rem 0 2rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.cta {
  align-self: flex-start; display: inline-flex; align-items: center;
  padding: 0.8rem 1.25rem; border-radius: 0.75rem; background: var(--primary); color: var(--primary-fg);
  font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--primary); }
.cta:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.foot { font-size: 0.85rem; color: var(--muted); }