/* =============================================
   Monochrome High-Contrast Theme (App-style)
   Author: Cascade AI
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
  --bg-dark: #ffffff;
  --card-bg: #ffffff;
  --text-light: #000000;
  --text-dark: #000000;
  --accent: #00a651;
  --primary: var(--accent);
  --gradient-primary: var(--accent);
  --radius-big: 28px;
  --border-thick: 3px;
}

/* ----- Base ----- */
body {
  background: var(--bg-dark);
  font-family: 'Inter', sans-serif;
  color: var(--text-light);
}

/* Header & Nav */
header {
  background: #ffffff;
  border: var(--border-thick) solid var(--text-dark);
  border-radius: var(--radius-big);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  color: var(--text-light);
}
.navbar{
  background: transparent;
  border:none;
}
.nav-links a { color: var(--text-light); }
.nav-links .btn { background: var(--accent); color: var(--text-light); border: none; }

/* Section wrappers transparent to let dark bg show */
section { background: transparent; }

/* Icon & Feature cards overrides */
.hero, .feature-card, .subject-item, .faq-item, .cta, footer {
  background: var(--card-bg);
  color: var(--text-dark);
  border-radius: var(--radius-big);
  border: var(--border-thick) solid var(--text-dark);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Adjust hero inner content */
.hero-content { padding: 3rem; }

/* Footer accent override */
footer{
  background: var(--accent);
  color:#ffffff;
}
footer a{color:#ffffff;}

/* Button style */
.btn {
  background: var(--accent);
  color: var(--text-light);
  border: none;
  border-radius: 50px;
  font-weight: 600;
  transition: transform .2s ease;
}
.btn:hover { transform: translateY(-3px); }

/* Card hover tilt */
.feature-icon {
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.feature-card:hover, .subject-item:hover, .faq-item:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
  transition: transform .3s ease;
}

/* Invert footer text */
footer { background: var(--accent) !important; color: #ffffff !important; border: none; box-shadow: none; }
footer a{color:#ffffff !important;}

/* Override countdown blocks */
.countdown-number {
  background: var(--card-bg);
  color: var(--text-dark);
  border: var(--border-thick) solid var(--text-dark);
}

/* Ensure FAQ answers readable */
.faq-answer { color: var(--text-dark); }

/* Remove pastel backgrounds coming from playful.css */
#services,
#subjects,
#faq {
  background: transparent !important;
}

/* Ensure headings contrast on dark backdrop */
.section-title,
.section-subtitle {
  color: var(--text-light) !important;
}