:root {
  --bg-1: #050505;
  --bg-2: #0d0d0f;
  --muted: #9b9b9f;
  --accent: #bdbdbf;
  --white: #ffffff;
  --outline-gray: rgba(160, 160, 170, 0.25);
  --primary: #6366f1;
  --primary-dark: #4f46e5;
}

html, body {
  font-family: "Stack Sans Notch", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 700px at 50% 85%, rgba(40, 40, 45, 0.25), transparent 15%), linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--white);
  background-color: #111111;
}

body::before {
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px);
  background-repeat: repeat;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.headline {
  font-family: "Stack Sans Notch", "Poppins", "Inter", system-ui;
  font-weight: 800;
  color: var(--white);
  font-size: clamp(36px, 10vw, 100px);
  background: linear-gradient(135deg, var(--white) 0%, var(--accent) 100%);
  background-clip: text;
}

.headline .muted {
  color: #a7a7ad;
  font-weight: 800;
}

.sub {
  max-width: 680px;
  font-size: clamp(12px, 3vw, 18px);
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.2px;
}