:root {
  --bg: #06070d;
  --surface-1: #0c0e18;
  --surface-2: #111320;
  --surface-3: #171a2b;
  --border: #1d2035;
  --border-hi: #2b2f50;
  --text: #dce2f7;
  --muted: #747b94;
  --faint: #383d5a;
  --accent: #5d5fef;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(93, 95, 239, .12);
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #f43f5e;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 28px 90px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }

.grid-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -4;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 48px 48px;
}
.scanline {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.018), transparent);
  background-size: 100% 9px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 80%, transparent);
}
.orb {
  position: fixed;
  pointer-events: none;
  z-index: -2;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .25;
}
.orb-a { left: -180px; top: -190px; background: var(--accent); }
.orb-b { right: -220px; top: 90px; background: #06b6d4; opacity: .13; }

::selection { background: rgba(93,95,239,.35); color: #fff; }