/* ─────────────────────────────────────────
   token.css — design token & CSS reset
   ───────────────────────────────────────── */

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

:root {
  /* Brand colours */
  --purple:    #6D28D9;
  --indigo:    #4F46E5;
  --violet:    #8B5CF6;
  --green:     #10B981;

  /* Neutrals */
  --bg:        #F8F7FF;
  --white:     #FFFFFF;
  --card-bg:   #FFFFFF;
  --border:    #E5E7EB;
  --text:      #111827;
  --muted:     #6B7280;

  /* Shape */
  --radius:    16px;
  --radius-sm: 10px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in        { opacity: 1; transform: none; transition: none; }
  .hero-badge-dot { animation: none; }
}