/* ============================================================
   MoonAI — base.css
   Reset, design tokens, typography, utility primitives
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #0E1B17;
  background: #FAFAF7;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }

/* ---------- Material Symbols ---------- */
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  letter-spacing: normal;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}

/* ---------- Design tokens ---------- */
:root {
  /* Backgrounds */
  --bg: #FAFAF7;
  --bg-paper: #FFFFFF;
  --bg-mint: #EAF7E8;
  --bg-peach: #FFEBDC;
  --bg-lilac: #EFEBFE;
  --bg-cream: #FFF6E5;
  --bg-sky:  #E5F3FF;

  /* Ink */
  --ink: #0E1B17;
  --ink-2: #2B2D33;
  --ink-3: #51545C;
  --muted: #767A85;
  --border: #E6E7E2;

  /* Dark for dark sections */
  --dark: #0F0A2E;
  --dark-2: #1A1240;

  /* Brand */
  --primary: #6E56F8;
  --primary-2: #4F46E5;
  --accent: #C7F284;
  --accent-2: #FCD34D;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(15,10,46,.04), 0 10px 30px rgba(15,10,46,.06);
  --shadow-hover: 0 30px 60px rgba(78,70,229,.12), 0 12px 24px rgba(15,10,46,.08);

  /* Radii */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-xl: 40px;

  /* Layout */
  --container: 1240px;
}

/* ---------- Layout primitives ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 110px 0; position: relative; }
@media (max-width: 980px) { section { padding: 80px 0; } }
@media (max-width: 600px) { section { padding: 60px 0; } }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
}
h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 4.5vw, 60px); line-height: 1.05; letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1.15; }
h4 { font-size: 18px; font-weight: 700; }
p  { color: var(--ink-2); font-size: 18px; line-height: 1.55; margin: 0; }

.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); max-width: 720px; line-height: 1.5; }
.center { text-align: center; }
.center.lead, h2.center { margin-left: auto; margin-right: auto; }
.small { font-size: 14px; color: var(--ink-3); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }