/* ══════════════════════════════════════════════════════════
   TUITIONLY — Shared Theme (Vivid Teal / Clean / Deep Forest)
   ══════════════════════════════════════════════════════════ */

:root {
  --teal: #14B8A6;
  --mint: #2DD4BF;
  --cream: #F5F7FA;
  --ivory: #FFFFFF;
  --forest: #0F2B36;
  --soft-teal: #CCFBF1;
  --soft-mint: #D5F5F0;
}

/* ─── Prevent horizontal overflow from AOS X-axis animations ─── */
html { overflow-x: clip; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: clip; }

/* ─── Lenis smooth scroll ─── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ─── Nav scroll effect ─── */
nav#main-nav {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
}
nav#main-nav.scrollable-nav {
  will-change: transform;
}
nav#main-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 4px 30px rgba(15, 43, 54, 0.1);
  border-color: rgba(15, 43, 54, 0.08) !important;
}
nav#main-nav.nav-hidden {
  transform: translateY(-100%);
}

/* ─── Animated gradient hero (shared) ─── */
.hero-gradient-dark {
  background: linear-gradient(135deg, #0F2B36 0%, #163a4a 30%, #1a4a5a 60%, #14B8A6 100%);
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}
.hero-gradient-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #14B8A6 0%, #1a4a5a 40%, #163a4a 70%, #0F2B36 100%);
  opacity: 0;
  animation: heroGradientDark 12s ease-in-out infinite;
  z-index: -1;
  will-change: opacity;
}
@keyframes heroGradientDark {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

.hero-gradient-light {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(20,184,166,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(45,212,191,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(20,184,166,0.05) 0%, transparent 50%),
    #F5F7FA;
}

/* ─── Floating keyframes ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-1.5deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: floatReverse 7s ease-in-out infinite 1s; }
.float-3 { animation: floatSlow 5s ease-in-out infinite 2s; }

/* ─── Pulse ring on CTA ─── */
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.pulse-ring { position: relative; }
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(20,184,166,0.45);
  animation: pulseRing 2s ease-out infinite;
}

/* ─── Primary CTA button ─── */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: #14B8A6;
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.3), 0 4px 6px -4px rgba(20, 184, 166, 0.3);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
  box-shadow: 0 20px 25px -5px rgba(20, 184, 166, 0.4), 0 8px 10px -6px rgba(20, 184, 166, 0.4);
  transform: scale(1.05);
}

/* ─── Card hover lift ─── */
.card-lift {
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s cubic-bezier(.4,0,.2,1);
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(15,43,54,0.15);
}

/* ─── Button shine sweep ─── */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-shine:hover::after { transform: translateX(100%); }

/* ─── Gradient text ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--teal), var(--mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-warm {
  background: linear-gradient(135deg, var(--teal), #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Decorative blobs ─── */
.blob {
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

/* ─── Sub-page hero backgrounds ─── */
.sub-hero {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}
.sub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroGradientDark 12s ease-in-out infinite;
  z-index: -1;
  will-change: opacity;
}
.sub-hero-cbse  { background: linear-gradient(135deg, #0F2B36 0%, #163a4a 40%, #2DD4BF 100%); }
.sub-hero-cbse::before  { background: linear-gradient(135deg, #2DD4BF 0%, #163a4a 60%, #0F2B36 100%); }
.sub-hero-ib    { background: linear-gradient(135deg, #0F2B36 0%, #163a4a 40%, #14B8A6 100%); }
.sub-hero-ib::before    { background: linear-gradient(135deg, #14B8A6 0%, #163a4a 60%, #0F2B36 100%); }
.sub-hero-igcse { background: linear-gradient(135deg, #0F2B36 0%, #14B8A6 50%, #0F2B36 100%); }
.sub-hero-igcse::before { background: linear-gradient(135deg, #0F2B36 0%, #163a4a 50%, #14B8A6 100%); }
.sub-hero-ap    { background: linear-gradient(135deg, #0F2B36 0%, #163a4a 40%, #0F2B36 70%, #14B8A6 100%); }
.sub-hero-ap::before    { background: linear-gradient(135deg, #14B8A6 0%, #0F2B36 30%, #163a4a 60%, #0F2B36 100%); }

/* ─── IGCSE sage gradient text ─── */
.gradient-text-sage {
  background: linear-gradient(135deg, #2DD4BF, #14B8A6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Stats bar hero overlap ─── */
.stats-overlap {
  margin-top: -4rem; /* consistent -mt-16 across all pages */
}

/* ─── Section divider gradient ─── */
.section-gradient-1 {
  background: linear-gradient(180deg, var(--cream) 0%, var(--soft-teal) 100%);
}
.section-gradient-2 {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
}

/* ─── Testimonials (Swiper) ─── */
.testimonials-pagination .swiper-pagination-bullet {
  background: rgba(15, 43, 54, 0.2);
  opacity: 1;
}
.testimonials-pagination .swiper-pagination-bullet-active {
  background: var(--teal);
}

/* ─── Calendly ─── */
.calendly-wrapper {
  position: relative;
  height: 772px;
  overflow: hidden;
  border-radius: 1rem;
  background: white;
}
.calendly-inline-widget {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  min-height: unset !important;
  overflow: hidden !important;
}
.calendly-inline-widget iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  overflow: hidden !important;
}
@media (max-width: 768px) {
  .calendly-wrapper { height: 620px; }
}

/* ─── Skeleton loader ─── */
@keyframes shimmer {
  0%   { background-position: -700px 0; }
  100% { background-position:  700px 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(15,43,54,0.06) 25%, rgba(15,43,54,0.12) 50%, rgba(15,43,54,0.06) 75%);
  background-size: 700px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 0.5rem;
}
#calendly-skeleton {
  position: absolute;
  inset: 0;
  padding: 2rem;
  background: white;
  border-radius: 1rem;
  z-index: 10;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#calendly-skeleton.hidden { opacity: 0; }

/* ─── Magazine drop-cap ─── */
.magazine-dropcap::first-letter {
  font-size: 4rem;
  float: left;
  margin-right: 0.5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--teal);
}

/* ─── Scroll indicator bounce ─── */
.scroll-dot {
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}