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

/* ── DESIGN TOKENS ── */
:root {
  --rose: #e74266; --rose-mid: #d03a5a; --rose-dim: rgba(231,66,102,.15);
  --green: #20b69e; --green-mid: #1aa38d; --green-dim: rgba(32,182,158,.15);
  --bg: #090911; --bg-1: #0f0f1b; --b1: #0f0f1b; --bg-2: #161624; --b2: #161624;
  --border: rgba(255,255,255,.07); --border-mid: rgba(255,255,255,.13);
  --text: #ececf4; --muted: #74748c; --subtle: #3e3e56;
  --fd: 'Plus Jakarta Sans', sans-serif; --fb: 'DM Sans', sans-serif;
  --nav-h: 68px; --sw: 220px;
}

/* ── BASE ── */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--fb); background: var(--bg); color: var(--text); }

/* ── GRAIN OVERLAY ── */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.032'/%3E%3C/svg%3E");
  opacity: .6;
}

/* ── GRADIENT TEXT (shared utility) ── */
.gr {
  background: linear-gradient(135deg, var(--rose), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}