/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Light theme (default) ── */
  --bg: #F5F5F3;
  --bg-rgb: 245,245,243;
  --surface1: #FFFFFF;
  --surface2: #EEEDE9;
  --surface3: #E4E3DF;
  --border: rgba(0,0,0,0.09);
  --border-active: rgba(255,85,0,0.35);
  --green: #FF5500;
  --green-bright: #FF7733;
  --green-dim: rgba(255,85,0,0.10);
  --green-glow: rgba(255,85,0,0.16);
  --yes: #16a34a;
  --yes-dim: rgba(22,163,74,0.10);
  --yes-glow: rgba(22,163,74,0.15);
  --gold: #B8900A;
  --gold-dim: rgba(184,144,10,0.1);
  --red: #D42020;
  --red-dim: rgba(212,32,32,0.1);
  --text-primary: #0A0A0A;
  --text-secondary: #555;
  --text-muted: #999;
  --base-blue: #0047E0;
  --btn-text: #fff;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

/* ── Dark theme overrides ── */
html[data-theme="dark"] {
  --bg: #080808;
  --bg-rgb: 8,8,8;
  --surface1: #111111;
  --surface2: #181818;
  --surface3: #1e1e1e;
  --border: rgba(255,255,255,0.07);
  --border-active: rgba(255,85,0,0.35);
  --green: #FF5500;
  --green-bright: #FF7733;
  --green-dim: rgba(255,85,0,0.12);
  --green-glow: rgba(255,85,0,0.18);
  --yes: #00C96B;
  --yes-dim: rgba(0,201,107,0.12);
  --yes-glow: rgba(0,201,107,0.18);
  --gold: #F5C842;
  --gold-dim: rgba(245,200,66,0.12);
  --red: #FF4545;
  --red-dim: rgba(255,69,69,0.12);
  --text-primary: #F0F0F0;
  --text-secondary: #888;
  --text-muted: #555;
  --base-blue: #0052FF;
  --btn-text: #fff;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.25s, color 0.25s;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
svg { display: block; }

/* ============================================================
   GRID TEXTURE (hero bg)
============================================================ */
.grid-texture {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
@keyframes avatar-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,85,0,0.4), 0 0 50px rgba(255,85,0,0.2); }
  50% { box-shadow: 0 0 30px rgba(255,85,0,0.6), 0 0 70px rgba(255,85,0,0.3); }
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   UTILITIES
============================================================ */
.gold { color: var(--gold); }
.green { color: var(--green); }
.red { color: var(--red); }

/* Divider line between sections */
.section-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}