/* CSS reset (lightweight) */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji"; }

:root {
  --bg: #0c0c0d;
  --fg: #f2f3f5;
  --muted: #a6a8ad;
  --card: #111214;
  --border: #1b1c1f;
  --accent: #7c5cff; /* will be updated by JS */
  --blur: 30px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --fg: #15171a;
    --muted: #5a6069;
    --card: #ffffff;
    --border: #eaecef;
  }
}

.page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: radial-gradient(1200px 800px at 100% -20%, color-mix(in oklab, var(--accent), transparent 85%), transparent 60%),
              radial-gradient(900px 700px at -10% 120%, color-mix(in oklab, var(--accent), transparent 85%), transparent 60%),
              var(--bg);
  color: var(--fg);
}

.backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 400px at 50% 0%, color-mix(in oklab, var(--accent), transparent 92%), transparent 70%);
  filter: blur(var(--blur));
  opacity: 0.7;
}

.card {
  margin: clamp(40px, 10vh, 96px) auto 0;
  width: min(780px, calc(100% - 32px));
  background: linear-gradient(180deg, color-mix(in oklab, var(--card), transparent 0%), color-mix(in oklab, var(--card), transparent 0%));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(36px, 7vw, 72px);
  box-shadow:
    0 10px 30px color-mix(in oklab, #000, transparent 85%),
    inset 0 1px 0 color-mix(in oklab, #fff, transparent 94%);
  text-align: center;
}

/* Header */
.header { width: min(980px, calc(100% - 32px)); margin: 36px auto 0; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; }
.logo-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 24px color-mix(in oklab, var(--accent), transparent 30%); }
.logo-text { opacity: 0.9; }

/* Hero */
.hero { padding: clamp(24px, 8vh, 64px) 0; margin: 0 auto; align-self: center; justify-self: center; }
.hero-title { margin: 8px 0 24px; font-size: clamp(34px, 8vw, 72px); line-height: 1.02; letter-spacing: -0.02em; }
.grad { background: linear-gradient(90deg, color-mix(in oklab, var(--accent), white 15%), color-mix(in oklab, var(--accent), black 10%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin: 0 auto 28px; max-width: 60ch; color: var(--muted); font-size: clamp(16px, 2.8vw, 18px); }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  flex-wrap: wrap;
}

.button {
  --btn-bg: color-mix(in oklab, var(--accent), black 10%);
  --btn-glow: color-mix(in oklab, var(--accent), transparent 65%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--btn-bg), color-mix(in oklab, var(--btn-bg), black 12%));
  color: white;
  border: 1px solid color-mix(in oklab, var(--accent), black 30%);
  box-shadow: 0 8px 24px var(--btn-glow), inset 0 1px 0 color-mix(in oklab, #fff, transparent 90%);
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px var(--btn-glow), inset 0 1px 0 color-mix(in oklab, #fff, transparent 85%); }
.button:active { transform: translateY(0); }

.note { color: var(--muted); font-size: 14px; }

.footer {
  display: grid;
  place-items: center;
  padding: 28px 16px 40px;
  color: var(--muted);
  font-size: 14px;
}

.attribution { color: var(--muted); margin: 0; }
.attribution a { color: inherit; text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--muted), transparent 60%); }
.attribution a:hover { color: var(--fg); border-bottom-color: color-mix(in oklab, var(--fg), transparent 70%); }

@media (max-width: 480px) {
}