/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
      color: #2d1b4e;
      background: #FFF8E7;
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { max-width: 100%; display: block; }

/* ===== VARS ===== */
:root {
      --yellow: #FFD600;
      --orange: #FF8C00;
      --red: #E8503A;
      --cream: #FFF8E7;
      --dark: #2d1b4e;
      --purple: #7C3AED;
      --purple-light: #A78BFA;
      --gray: #6B7280;
      --brown: #6B4226;
      --radius: 20px;
      --radius-sm: 14px;
      --shadow: 0 8px 30px rgba(124,58,237,.12);
      --shadow-lg: 0 20px 60px rgba(124,58,237,.15);
      --transition: all .3s cubic-bezier(.4,0,.2,1);
    }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }