:root {
  --bg: #000000;
  --card: #0a0a0a;
  --border: #1c1c1f;
  --border2: #26262b;
  --text: #f5f5f7;
  --muted: #8a8a93;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000000;
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  --px: 0px;
  --py: 0px;
}

body::before {
  content: "";
  position: fixed;
  inset: -30px;
  z-index: -1;
  background: #000000 url('gradient-bg.svg') center top no-repeat;
  background-size: 108% auto;
  transform: translate3d(var(--px), var(--py), 0);
  will-change: transform;
  transition: transform .18s linear;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 400px at 18% 18%, rgba(99,102,241,.10) 0%, transparent 60%),
    radial-gradient(600px 380px at 82% 22%, rgba(14,165,233,.06) 0%, transparent 62%);
  transform: translate3d(calc(var(--px) * 0.6), calc(var(--py) * 0.6), 0);
  will-change: transform;
  transition: transform .18s linear;
  pointer-events: none;
}