/* ═══════════════════════════════════════════════════════════
   VARIABLES & RESET
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --primary:      #11517C;
  --primary-md:   #16688f;
  --primary-lg:   #0d3a5c;
  --pink:         #D384C7;
  --pink-bg:      rgba(211,132,199,.08);
  --teal:         #82D1B8;
  --teal-bg:      #eaf7f1;
  --blue:         #84B1D3;
  --blue-bg:      #eaf2f8;
  --orange:       #DB8F6A;
  --orange-bg:    #fdf0e8;
  --purple:       #9B84D3;
  --purple-bg:    #f3f0fa;
  --danger:       #e04848;
  --danger-bg:    #fef2f2;
  --bg:           #f0f4f8;
  --card:         #fff;
  --text:         #1e293b;
  --muted:        #64748b;
  --border:       #dce4ec;
  --radius:       16px;
  --shadow:       0 2px 12px rgba(17,81,124,.06);
  --shadow-md:    0 6px 24px rgba(17,81,124,.10);
  --shadow-lg:    0 12px 40px rgba(17,81,124,.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}