/* ---------- DESIGN TOKENS ---------- */
    :root {
      --primary-purple:  #7c3aed;
      --electric-blue:   #3b82f6;
      --sunshine-yellow: #fbbf24;
      --mint-fresh:      #10b981;
      --coral-pop:       #f97316;
      --pink-playful:    #ec4899;
      --lavender-soft:   #a78bfa;
      --sky-light:       #0ea5e9;

      --bg:          #fafaff;
      --bg-soft:     #f3f0ff;
      --surface:     #ffffff;
      --text:        #1f1b3a;
      --text-muted:  #5b5878;
      --border:      rgba(124,58,237,0.12);
      --shadow-lg:   0 20px 50px -12px rgba(124,58,237,0.25);
      --shadow-md:   0 8px 24px -8px rgba(124,58,237,0.18);
    }
    html[data-theme="dark"] {
      --bg:          #0d0a1f;
      --bg-soft:     #151030;
      --surface:     #1a1540;
      --text:        #f1efff;
      --text-muted:  #a8a2c9;
      --border:      rgba(167,139,250,0.18);
      --shadow-lg:   0 20px 50px -12px rgba(0,0,0,0.5);
      --shadow-md:   0 8px 24px -8px rgba(0,0,0,0.4);
    }

    * { -webkit-font-smoothing: antialiased; }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      transition: background 0.4s ease, color 0.4s ease;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, .display {
      font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
      letter-spacing: -0.02em;
    }
    .handwrite { font-family: 'Caveat', cursive; }

    /* ---------- ANIMATED MESH GRADIENT BG ---------- */
    .mesh-bg {
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(at 15% 20%, rgba(124,58,237,0.25) 0px, transparent 50%),
        radial-gradient(at 85% 10%, rgba(236,72,153,0.20) 0px, transparent 50%),
        radial-gradient(at 75% 80%, rgba(59,130,246,0.22) 0px, transparent 50%),
        radial-gradient(at 10% 90%, rgba(251,191,36,0.18) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(16,185,129,0.12) 0px, transparent 50%);
      animation: meshShift 18s ease-in-out infinite alternate;
    }
    html[data-theme="dark"] .mesh-bg {
      opacity: 0.55;
    }
    @keyframes meshShift {
      0%   { transform: scale(1) rotate(0deg); }
      100% { transform: scale(1.15) rotate(6deg); }
    }

    /* Floating blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.55;
      pointer-events: none;
      animation: floaty 12s ease-in-out infinite;
    }
    @keyframes floaty {
      0%, 100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(30px,-40px) scale(1.1); }
    }

    /* ---------- GLASS CARDS ---------- */
    .glass {
      background: color-mix(in srgb, var(--surface) 78%, transparent);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
    }
    .glass-strong {
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid var(--border);
    }

    /* Gradient border effect */
    .gradient-border {
      position: relative;
      background: var(--surface);
    }
    .gradient-border::before {
      content: "";
      position: absolute; inset: 0;
      padding: 2px;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--primary-purple), var(--pink-playful), var(--electric-blue));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }

    /* ---------- NAV ---------- */
    .nav-link {
      position: relative;
      padding: 0.5rem 0.25rem;
      color: var(--text-muted);
      font-weight: 500;
      transition: color 0.2s;
    }
    .nav-link:hover { color: var(--primary-purple); }
    .nav-link::after {
      content: "";
      position: absolute; left: 0; bottom: -2px;
      height: 2px; width: 0;
      background: linear-gradient(90deg, var(--primary-purple), var(--pink-playful));
      transition: width 0.25s ease;
    }
    .nav-link:hover::after { width: 100%; }

    /* ---------- BUTTONS ---------- */
    .btn-primary {
      background: linear-gradient(135deg, var(--primary-purple), var(--pink-playful));
      color: #fff;
      padding: 0.9rem 1.8rem;
      border-radius: 14px;
      font-weight: 600;
      box-shadow: 0 8px 22px -8px rgba(124,58,237,0.6);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .btn-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 14px 30px -10px rgba(236,72,153,0.65);
    }
    .btn-ghost {
      padding: 0.9rem 1.6rem;
      border-radius: 14px;
      border: 2px solid var(--border);
      background: transparent;
      color: var(--text);
      font-weight: 600;
      transition: all 0.2s;
      display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .btn-ghost:hover {
      border-color: var(--primary-purple);
      color: var(--primary-purple);
      transform: translateY(-2px);
    }

    /* ---------- HERO MASCOT ---------- */
    .mascot {
      animation: bob 4s ease-in-out infinite;
      filter: drop-shadow(0 20px 30px rgba(124,58,237,0.35));
    }
    @keyframes bob {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50%      { transform: translateY(-20px) rotate(2deg); }
    }
    .blink {
      animation: blink 4s infinite;
      transform-origin: center;
    }
    @keyframes blink {
      0%, 45%, 50%, 100% { transform: scaleY(1); }
      47%                 { transform: scaleY(0.1); }
    }

    /* ---------- TYPEWRITER ---------- */
    .typewriter {
      display: inline-block;
      border-right: 3px solid var(--primary-purple);
      white-space: nowrap;
      overflow: hidden;
      animation: type 3.5s steps(40, end) 0.3s 1 normal both, caret 0.75s step-end infinite;
    }
    @keyframes type { from { width: 0 } to { width: 100% } }
    @keyframes caret {
      50% { border-right-color: transparent; }
    }

    /* ---------- SKILL CARDS ---------- */
    .skill-card {
      position: relative;
      border-radius: 22px;
      padding: 1.75rem;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
    }
    .skill-card::before {
      content: "";
      position: absolute; inset: 0;
      background: var(--card-grad);
      opacity: 0.12;
      transition: opacity 0.35s;
    }
    .skill-card:hover { transform: translateY(-8px) scale(1.01); }
    .skill-card:hover::before { opacity: 0.22; }
    .skill-card:hover .skill-glow {
      opacity: 1; transform: scale(1.2);
    }
    .skill-glow {
      position: absolute;
      width: 140px; height: 140px;
      border-radius: 50%;
      background: var(--card-grad);
      filter: blur(40px);
      opacity: 0.4;
      top: -40px; right: -40px;
      transition: all 0.4s;
    }
    .skill-icon {
      width: 56px; height: 56px;
      border-radius: 16px;
      display: grid; place-items: center;
      background: var(--card-grad);
      color: #fff;
      box-shadow: 0 10px 20px -8px var(--card-shadow);
    }

    /* Module color themes */
    .m-grammar   { --card-grad: linear-gradient(135deg, #7c3aed, #a78bfa); --card-shadow: rgba(124,58,237,0.5); }
    .m-reading   { --card-grad: linear-gradient(135deg, #3b82f6, #0ea5e9); --card-shadow: rgba(59,130,246,0.5); }
    .m-writing   { --card-grad: linear-gradient(135deg, #f97316, #fb923c); --card-shadow: rgba(249,115,22,0.5); }
    .m-speaking  { --card-grad: linear-gradient(135deg, #ec4899, #f472b6); --card-shadow: rgba(236,72,153,0.5); }
    .m-listening { --card-grad: linear-gradient(135deg, #10b981, #34d399); --card-shadow: rgba(16,185,129,0.5); }
    .m-vocab     { --card-grad: linear-gradient(135deg, #fbbf24, #fcd34d); --card-shadow: rgba(251,191,36,0.5); }
    .m-phonetics { --card-grad: linear-gradient(135deg, #0d9488, #14b8a6, #5eead4); --card-shadow: rgba(20,184,166,0.5); }

    /* ---------- PROGRESS RING ---------- */
    .ring-track { stroke: var(--border); }
    .ring-fill {
      transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
      stroke-linecap: round;
    }

    /* ---------- REVEAL ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.in {
      opacity: 1; transform: translateY(0);
    }

    /* ---------- FAQ ---------- */
    .faq-item[open] .faq-chev { transform: rotate(180deg); }
    .faq-chev { transition: transform 0.3s; }

    /* ---------- UTILITIES ---------- */
    .gradient-text {
      background: linear-gradient(135deg, var(--primary-purple), var(--pink-playful), var(--electric-blue));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .chip {
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    /* ---------- FLAME STREAK ---------- */
    .flame {
      display: inline-block;
      animation: flicker 1.5s infinite alternate;
      filter: drop-shadow(0 0 8px rgba(249,115,22,0.6));
    }
    @keyframes flicker {
      0%   { transform: scale(1) rotate(-3deg); }
      100% { transform: scale(1.08) rotate(3deg); }
    }

    /* ---------- CAROUSEL ---------- */
    .carousel { scroll-snap-type: x mandatory; }
    .carousel > * { scroll-snap-align: start; }
    .carousel::-webkit-scrollbar { height: 6px; }
    .carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

    /* ---------- MOBILE MENU ---------- */
    #mobileMenu {
      transform: translateY(-10px);
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s;
    }
    #mobileMenu.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    /* Prevent horizontal scroll from decorative blobs */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* =========================================================
       RESPONSIVE — home page refinements
       ========================================================= */
    @media (max-width: 640px) {
      /* Tighter nav */
      nav.glass-strong {
        width: calc(100% - 1rem) !important;
        margin-top: 0.5rem;
        padding: 0.6rem 0.85rem !important;
        border-radius: 16px;
      }
      nav .text-lg { font-size: 0.95rem; }
      nav .text-\[10px\] { display: none; }

      /* Hero */
      section.pt-16 { padding-top: 2.5rem !important; padding-bottom: 3rem !important; }
      h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; line-height: 1.1; }
      .handwrite { font-size: 1.4rem !important; }

      /* Mascot scales down */
      .mascot { width: 220px !important; height: 230px !important; }
      .mascot + * { /* glow blob */ }

      /* Floating badges: smaller & repositioned */
      section.pt-16 .glass.rounded-xl {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.6rem !important;
      }
      section.pt-16 .glass.rounded-xl .text-lg { font-size: 1rem !important; }

      /* Hero mini-stats */
      .grid-cols-3 > div > .text-2xl { font-size: 1.25rem !important; }

      /* Daily challenge padding */
      section section.relative.overflow-hidden { padding: 1.4rem !important; }

      /* Skill card padding */
      .skill-card { padding: 1.2rem !important; border-radius: 18px; }
      .skill-icon { width: 46px !important; height: 46px !important; }

      /* Dashboard rings */
      .w-28.h-28 { width: 88px !important; height: 88px !important; }

      /* Stats large numbers */
      .text-4xl.md\:text-5xl { font-size: 1.9rem !important; }

      /* Word of the day big word */
      .text-5xl.md\:text-6xl { font-size: 2.25rem !important; }

      /* Carousel cards slightly wider % on very small */
      .carousel > a { width: 88% !important; }
      .carousel .h-36 { height: 110px; }
      .carousel .text-5xl { font-size: 2.2rem; }

      /* Buttons min tap target */
      .btn-primary, .btn-ghost { min-height: 44px; }

      /* FAQ */
      .faq-item { padding: 1rem !important; }

      /* Testimonial padding */
      blockquote.glass { padding: 1.1rem !important; }

      /* Footer */
      footer .glass { padding: 1.2rem !important; }
      #newsletter { flex-direction: column; }
      #newsletter input, #newsletter button { width: 100%; }
    }

    /* Tablet range fine-tuning */
    @media (max-width: 1024px) {
      section.pt-16 .absolute.w-72 { width: 200px; height: 200px; }
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--primary-purple), var(--pink-playful));
      border-radius: 999px;
    }
  

/* ---- learner page helpers (tabs, flip cards, bars) ---- */
.lq-tab { padding:.5rem 1rem; border-radius:12px; font-weight:600; font-size:.9rem; color:var(--text-muted); cursor:pointer; transition:all .2s; border:none; background:transparent; }
.lq-tab.tab-active { background:rgba(124,58,237,.12); color:var(--primary-purple); }
.flip { perspective:1000px; cursor:pointer; }
.flip-inner { position:relative; transition:transform .5s; transform-style:preserve-3d; height:100%; width:100%; }
.flip.is-flipped .flip-inner { transform:rotateY(180deg); }
.flip-face { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.flip-back { transform:rotateY(180deg); }
.bar { height:8px; border-radius:999px; background:var(--bg-soft); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--primary-purple),var(--pink-playful)); }

/* Site-wide: Inter for headings (replaces Fredoka); keep Caveat for .handwrite */
h1,h2,h3,h4,h5,h6,.display,.section-title{font-family:'Inter',system-ui,sans-serif !important;letter-spacing:normal !important;}