/* =============================
   Playful Neo-Brutalist Theme
   Author: Cascade AI
   ============================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  /* Cool pastel palette */
  --pastel-blue:   #d0f4ff;
  --pastel-mint:   #d7ffef;
  --pastel-lavender:#e8e6ff;
  --pastel-peach:  #ffeeda;
  --pastel-gray:   #f2f6ff;
  --border-thick: 4px;
  --radius-big:   22px;
  --text-dark:    #000;
}

/* ---------- Global Typography ---------- */
body {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-dark);
}

h1, h2, h3, h4, .logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ---------- Universal Card Outline ---------- */
.card, .feature-card, .subject-item, .faq-item, .cta, header, footer, .hero, section {
  border: var(--border-thick) solid var(--text-dark);
  border-radius: var(--radius-big);
  box-shadow: 0 6px 0 var(--text-dark);
}

/* Section background alternation */
.hero        { background: var(--pastel-blue); }
#services    { background: var(--pastel-mint);   }
#subjects    { background: var(--pastel-lavender);  }
#faq         { background: var(--pastel-gray);   }
.cta         { background: var(--pastel-peach);  }

/* Feature cards */
.feature-card {
  background: #fff;
  transition: transform 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 0 var(--text-dark);
}

/* Buttons */
.btn {
  border: var(--border-thick) solid var(--text-dark);
  border-radius: 50px;
  box-shadow: 0 4px 0 var(--text-dark);
  background: #fff;
  color: var(--text-dark);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-3px);
}

/* Countdown blocks */
.countdown-number {
  background: #fff;
  border: var(--border-thick) solid var(--text-dark);
  box-shadow: 0 4px 0 var(--text-dark);
}

/* FAQ */
.faq-question {
  cursor: pointer;
}

/* Disable default gradients / shadows that clash */
.hero::before,
.hero::after,
.cta::before,
.cta::after {
  display: none;
}