/* =========================================
   0) GLOBAL RESET + TOKENS (KEEP)
   ========================================= */

:root{
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --c-bg-0: #070a08;
  --c-bg-1: #0c120d;
  --c-bg-2: #0f1a12;
  --c-surface: rgba(14, 22, 16, 0.72);
  --c-surface-2: rgba(10, 16, 12, 0.62);

  --c-text: rgba(245, 255, 248, 0.92);
  --c-muted: rgba(210, 230, 218, 0.72);
  --c-dim: rgba(210, 230, 218, 0.55);

  --c-green: #7CFF6B;
  --c-green-2: #2CFF9A;
  --c-lime: #B8FF4E;
  --c-gold: #FFB85C;
  --c-gold-2: #FF9A3D;

  --border-1: 1px solid rgba(255,255,255,0.10);
  --border-2: 1px solid rgba(255,255,255,0.14);

  --shadow-1: 0 18px 60px rgba(0,0,0,0.55);
  --shadow-2: 0 26px 90px rgba(0,0,0,0.68);

  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 160ms var(--ease);
  --t-med: 260ms var(--ease);

  --container: 1160px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--c-text);
  background:
    radial-gradient(1100px 680px at 70% 25%, rgba(124,255,107,0.10), transparent 60%),
    radial-gradient(1000px 640px at 20% 30%, rgba(255,184,92,0.10), transparent 58%),
    linear-gradient(160deg, var(--c-bg-0), var(--c-bg-1));
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

button, input, textarea{
  font: inherit;
  color: inherit;
}

::selection{
  background: rgba(124,255,107,0.22);
  color: rgba(255,255,255,0.95);
}