:root {
  --ink: #24324a;
  --blue: #2f6bff;
  --blue-dark: #1844c7;
  --cyan: #35d3ff;
  --yellow: #ffd84d;
  --coral: #ff6f91;
  --orange: #ff9f43;
  --mint: #65e6b4;
  --purple: #9b7bff;
  --lavender: #eee8ff;
  --cream: #fff8df;
  --sky: #edf9ff;
  --white: #ffffff;
  --shadow: 0 14px 34px rgba(47, 107, 255, .14);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Nunito", system-ui, sans-serif;
  line-height: 1.55;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.top-ribbon {
  text-align: center;
  padding: 8px 16px;
  font-weight: 900;
  color: #24324a;
  background: linear-gradient(90deg, var(--yellow), #fff099, var(--yellow));
  letter-spacing: .2px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px clamp(18px, 5vw, 72px);
  /*background: rgba(255,255,255,.94);*/
  /*backdrop-filter: blur(12px);*/
  /*border-bottom: 1px solid #e9eefc;*/
  background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    -webkit-backdrop-filter: blur(5.8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: "Baloo 2"; font-size: 1.65rem; font-weight: 800; color: var(--blue-dark); }
.brand-logo { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(31,75,190,.18)); }
.footer-logo { width: 66px; height: 66px; }
.nav { margin-left: auto; display: flex; gap: 22px; font-weight: 800; }
.nav a { padding: 8px 4px; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--blue); border-color: var(--yellow); }
.header-actions { display: flex; gap: 10px; }
.menu-btn { display: none; border: 0; background: #eef4ff; border-radius: 12px; padding: 9px 12px; font-size: 1.25rem; }
.loginLink{
    display: none;
}
.primary-btn, .secondary-btn, .ghost-btn, .white-btn, .card-btn {
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease;
}
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .white-btn:hover, .card-btn:hover { transform: translateY(-2px); }
.primary-btn { padding: 12px 18px; color: white; background: linear-gradient(135deg, var(--blue), var(--purple)); box-shadow: 0 9px 20px rgba(47,107,255,.26); }
.primary-btn.large, .secondary-btn.large { padding: 15px 22px; }
.secondary-btn { padding: 12px 18px; color: #643c00; background: linear-gradient(135deg, var(--yellow), #ffea8a); box-shadow: 0 9px 20px rgba(255,216,77,.28); }
/*.ghost-btn { padding: 11px 16px; color: var(--blue-dark); background: #eef4ff; }*/
.ghost-btn {
    background: rgba(0, 0, 0, 0) !important;
    font-weight: 600;
}
.white-btn { padding: 13px 18px; color: var(--blue-dark); background: white; }

/*.hero {*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*  display: grid;*/
/*  grid-template-columns: 1.05fr .95fr;*/
/*  gap: 48px;*/
/*  align-items: center;*/
/*  min-height: 660px;*/
/*  padding: 76px clamp(22px, 7vw, 110px);*/
/*  background:*/
/*    radial-gradient(circle at 12% 20%, rgba(255,216,77,.55), transparent 22%),*/
/*    radial-gradient(circle at 88% 18%, rgba(101,230,180,.38), transparent 23%),*/
/*    radial-gradient(circle at 80% 85%, rgba(155,123,255,.23), transparent 28%),*/
/*    linear-gradient(135deg, #eff9ff 0%, #fff9e6 54%, #fff0f6 100%);*/
/*}*/
.hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    min-height: 660px;
    padding: 76px clamp(22px, 7vw, 110px);
    background-image: url('../abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -150px;
  bottom: -190px;
  border-radius: 50%;
  background: rgba(53,211,255,.16);
}
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: #e8f0ff; color: var(--blue-dark); font-size: .86rem; font-weight: 900; letter-spacing: .5px; }
.eyebrow.orange { background: #fff0d7; color: #b65b00; }
.eyebrow.purple-label { background: var(--lavender); color: #6547c7; }
.eyebrow.light { background: rgba(255,255,255,.18); color: white; }
/*.hero h1 { margin: 17px 0 14px; font-family: "Baloo 2"; font-size: clamp(3rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -2px; }*/
.hero h1 {
    margin: 17px 0 14px;
    font-family: "Baloo 2";
    font-size: clamp(3rem, 6vw, 5.6rem);
    line-height: .98;
    letter-spacing: -2px;
    color: var(--white);
}
/*.hero h1 span { color: var(--coral); text-shadow: 0 3px 0 #fff3b0; }*/
.hero h1 span {
    color: #ffeaa0;
    text-shadow: 0 3px 0 var(--orange);
}
.hero-copy > p { max-width: 650px; font-size: 1.13rem; color: #506078; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 25px 0 20px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 11px; }
.trust-row span { padding: 8px 12px; border-radius: 999px; background: white; box-shadow: 0 6px 16px rgba(50,70,120,.08); font-weight: 800; font-size: .92rem; }
.hero-decor { position: absolute; z-index: 1; font-size: 2.2rem; animation: floaty 4s ease-in-out infinite; }
.decor-one { left: 4%; top: 15%; }
/*.decor-two { left: 48%; bottom: 8%; animation-delay: .8s; }*/
.decor-two {
    right: 3%;
    bottom: 4%;
    animation-delay: .8s;
    font-size: 7rem;
    z-index: 9;
}
.decor-three { right: 4%; top: 8%; animation-delay: 1.5s; }
@keyframes floaty { 50% { transform: translateY(-10px) rotate(4deg); } }

.hero-visual { display: flex; justify-content: center; align-items: center; min-height: 470px; }
.hero-card { width: min(100%, 470px); padding: 28px; border-radius: 34px; background: rgba(255,255,255,.96); border: 5px solid white; box-shadow: 0 30px 60px rgba(47,107,255,.18); transform: rotate(1.5deg); }
.hero-card-top { display: flex; justify-content: space-between; gap: 12px; }
.streak, .stars { padding: 8px 11px; border-radius: 999px; font-weight: 900; }
.streak { background: #fff0e7; color: #c45112; }
.stars { background: #fff7cc; color: #7a5a00; }
.hero-card h3 { font-family: "Baloo 2"; font-size: 1.8rem; margin: 18px 0 2px; }
.hero-card p { margin: 0 0 16px; color: #68768d; }
.mission-list { display: grid; gap: 10px; }
.mission { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #f6f8ff; }
.mission > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: white; background: var(--blue); font-weight: 900; }
.mission.done { background: #ecfff7; }
.mission.done > span { background: #2bc58a; }
.mission small { color: #7b8799; }
.progress-wrap { margin-top: 18px; }
.progress-label { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 800; }
.progress-track { height: 10px; margin-top: 7px; background: #e8edfa; border-radius: 999px; overflow: hidden; }
.progress-track span { display: block; width: 33%; height: 100%; background: linear-gradient(90deg, var(--mint), var(--cyan)); }
/*.mascot { position: absolute; right: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 28px; background: var(--yellow); font-size: 3rem; transform: rotate(7deg); box-shadow: var(--shadow); }*/
.mascot {
    position: absolute;
    top: 35%;
    left: -50px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 28px;
    background: var(--yellow);
    font-size: 3rem;
    transform: rotate(7deg);
    box-shadow: var(--shadow);
}
.mascot-bubble { position: absolute; right: 70px; top: -38px; z-index: 4; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--blue-dark); color: white; font-weight: 900; box-shadow: var(--shadow); }

.grade-zone { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px clamp(22px, 7vw, 110px); background: white; border-top: 1px solid #eef1f8; border-bottom: 1px solid #eef1f8; }
.grade-zone h2 { margin: 3px 0 0; font-family: "Baloo 2"; font-size: 30px; }
.mini-title { color: #7b8799; font-weight: 800; }
/*.grade-pills { display: flex; flex-wrap: wrap; gap: 10px; }*/
.grade-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/*.grade-pill { border: 2px solid #dfe7fb; padding: 8px 13px 8px 8px; border-radius: 18px; background: white; color: var(--ink); font-weight: 900; }*/
.grade-pill {
    border: 2px solid #dfe7fb;
    padding: 8px;
    border-radius: 18px;
    background: white;
    color: var(--ink);
    font-weight: 900;
    width: calc((100% - 30px) / 4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.grade-pill span { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 7px; border-radius: 11px; background: #eef4ff; color: var(--blue); }
.grade-pill.active { border-color: var(--blue); box-shadow: 0 8px 18px rgba(47,107,255,.13); }
.grade-pill.active span { color: white; background: var(--blue); }

.section { padding: 82px clamp(22px, 7vw, 110px); }
.section-yellow { background: linear-gradient(180deg, #fff9e6, #fffdf7); }
.section-blue { background: linear-gradient(180deg, #eef9ff, #f7fbff); }
.section-heading { max-width: 760px; margin-bottom: 38px; }
.centered { text-align: center; margin-inline: auto; }
.section-heading h2 { margin: 12px 0 6px; font-family: "Baloo 2"; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.08; }
.section-heading p { color: #6a778c; }

.practice-grid, .testimonial-grid, .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.practice-card, .testimonial-card, .benefit { border-radius: var(--radius); box-shadow: var(--shadow); }
.practice-card { position: relative; overflow: hidden; padding: 26px; border: 3px solid rgba(255,255,255,.9); }
.practice-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -30px; bottom: -35px; border-radius: 50%; background: rgba(255,255,255,.35); }
.practice-card.pink { background: linear-gradient(145deg, #ffe6f0, #fff); }
.practice-card.blue { background: linear-gradient(145deg, #dff5ff, #fff); }
.practice-card.green { background: linear-gradient(145deg, #ddfff1, #fff); }
.practice-top { display: flex; align-items: center; justify-content: space-between; }
.practice-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: white; font-size: 2rem; box-shadow: 0 8px 20px rgba(35,58,103,.08); }
.points { font-weight: 900; color: #6f5b00; background: #fff7c6; padding: 6px 10px; border-radius: 999px; }
.practice-card h3 { margin: 18px 0 4px; font-family: "Baloo 2"; font-size: 1.7rem; }
.practice-card p { min-height: 74px; color: #68768d; }
.card-btn { position: relative; z-index: 2; width: 100%; padding: 12px 14px; color: white; background: var(--blue); }

/*.subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }*/
.subject-grid>* {
    width: calc((100% - 36px) / 3);
}
.subject-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}
.subject-card { border: 0; border-radius: 24px; padding: 24px; text-align: left; min-height: 210px; box-shadow: var(--shadow); color: var(--ink); transition: transform .18s ease; }
.subject-card:hover { transform: translateY(-5px) rotate(-.5deg); }
.subject-card .subject-emoji { display: block; font-size: 2.6rem; margin-bottom: 12px; }
.subject-card b { display: block; font-family: "Baloo 2"; font-size: 1.55rem; }
.subject-card small { display: block; margin: 5px 0 18px; color: #58677d; font-size: .95rem; }
.subject-card em { font-style: normal; font-weight: 900; }
.science { background: linear-gradient(145deg, #93fd0863, #f8fdff); }
.maths { background: linear-gradient(145deg, #2effec61, #fffaf0); }
.english { background: linear-gradient(145deg, #ffe2b8, #fff8ed); }
.gk { background: linear-gradient(145deg, #dff6ff, #f7fcff); }
.sst { background: linear-gradient(145deg, #9affa66b, #fbfdff); }
.reasoning { background: linear-gradient(145deg, #819cff78, #fffdf6); }

.testimonial-section { background: #fff; }
.testimonial-card { padding: 26px; border: 1px solid #edf0f7; }
.yellow-card { background: #fff9db; }
.mint-card { background: #e9fff6; }
.lavender-card { background: #f3efff; }
/*.quote-mark { font-family: Georgia, serif; font-size: 4rem; line-height: .7; opacity: .28; }*/
.quote-mark {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: .7;
    opacity: 1;
    background: #fff;
    padding: 20px 5px;
    border-radius: 20px;
    position: absolute;
    bottom: -20px;
    right: 20px;
    box-shadow: 0 0 1px #a3a3a3;
}
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.student-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: white; font-size: 1.8rem; }
.testimonial-person b, .testimonial-person small { display: block; }
.testimonial-person small { color: #778398; }

.benefit-grid { grid-template-columns: repeat(4, 1fr); }
.benefit { padding: 23px; background: white; border-top: 5px solid var(--cyan); }
.benefit:nth-child(2) { border-color: var(--yellow); }
.benefit:nth-child(3) { border-color: var(--coral); }
.benefit:nth-child(4) { border-color: var(--purple); }
.benefit > span { font-size: 2rem; }
.benefit h3 { margin: 9px 0 4px; font-family: "Baloo 2"; font-size: 1.35rem; }
.benefit p { margin: 0; color: #6d798d; }

.cta { margin: 0 clamp(22px, 7vw, 110px) 70px; padding: 34px 38px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; border-radius: 34px; color: white; background: linear-gradient(135deg, var(--blue-dark), var(--blue), var(--purple)); box-shadow: 0 24px 50px rgba(47,107,255,.26); }
.cta-emoji { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 26px; background: rgba(255,255,255,.15); font-size: 2.8rem; }
.cta h2 { margin: 6px 0 0; font-family: "Baloo 2"; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.05; }

footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 30px; padding: 34px clamp(22px, 7vw, 110px); color: #dce7ff; background: #18274c; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand b, .footer-brand small { display: block; }
.footer-brand b { font-family: "Baloo 2"; font-size: 1.45rem; color: white; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 800; }
.footer-links a:hover { color: var(--yellow); }

.modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; }
.modal.show { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20,31,60,.58); backdrop-filter: blur(4px); }
.modal-card { position: relative; z-index: 2; width: min(100%, 420px); padding: 30px; border-radius: 28px; background: white; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.modal-card h2 { font-family: "Baloo 2"; font-size: 2rem; margin: 10px 0 4px; }
.modal-card label { display: block; margin-top: 13px; font-weight: 800; }
.modal-card input { width: 100%; margin-top: 5px; padding: 12px 13px; border: 2px solid #e2e8f5; border-radius: 13px; outline: none; }
.modal-card input:focus { border-color: var(--blue); }
.modal-close { position: absolute; right: 16px; top: 13px; border: 0; background: transparent; font-size: 1.7rem; }
.login-mascot { font-size: 2.8rem; }
.full { width: 100%; margin-top: 18px; }
.demo-note { display: block; margin-top: 10px; color: #7a8698; text-align: center; }

@media (max-width: 980px) {
  .nav, .header-actions { display: none; }
  .nav.open { position: absolute; top: 80px; left: 18px; right: 18px; display: grid; gap: 5px; padding: 16px; border-radius: 18px; background: white; box-shadow: var(--shadow); }
  .menu-btn { display: block; margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 56px; }
  .hero-visual { min-height: 400px; }
  .grade-zone { align-items: flex-start; flex-direction: column; }
  .practice-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .subject-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .cta { grid-template-columns: auto 1fr; }
  .cta .white-btn { grid-column: 1 / -1; }
  footer { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .top-ribbon { font-size: .83rem; }
  .topbar { padding-inline: 15px; }
  .brand-logo { width: 48px; height: 48px; }
  .brand { font-size: 1.35rem; }
  .hero { padding-inline: 20px; min-height: auto; }
  .hero h1 { font-size: 3.2rem; }
  .hero-visual { min-height: 360px; }
  .hero-card { padding: 20px; transform: none; }
  .mascot { width: 68px; height: 68px; font-size: 2.2rem; }
  .mascot-bubble { right: 45px; top: -55px; max-width: 200px; }
  .mission { grid-template-columns: 34px 1fr; }
  .mission small { grid-column: 2; }
  .section { padding: 64px 20px; }
  .subject-grid, .benefit-grid { grid-template-columns: 1fr; }
  .cta { margin-inline: 20px; padding: 28px; grid-template-columns: 1fr; }
  .cta-emoji { width: 66px; height: 66px; }
}

/* Playful motion layer */
@keyframes logoBounce {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  45% { transform: translateY(-5px) rotate(-3deg) scale(1.04); }
  70% { transform: translateY(1px) rotate(2deg) scale(.99); }
}
@keyframes heroCardFloat {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50% { transform: rotate(-.5deg) translateY(-9px); }
}
@keyframes mascotBob {
  0%, 100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-10px); }
}
@keyframes bubblePop {
  0% { opacity: 0; transform: translateY(12px) scale(.82) rotate(-2deg); }
  70% { transform: translateY(-2px) scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes progressGrow {
  from { width: 0; }
  to { width: 33%; }
}
@keyframes shineSweep {
  from { transform: translateX(-140%) skewX(-18deg); }
  to { transform: translateX(340%) skewX(-18deg); }
}
@keyframes emojiWiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-8deg) scale(1.08); }
  60% { transform: rotate(7deg) scale(1.12); }
}
@keyframes rocketFloat {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(5px, -9px) rotate(5deg); }
}
@keyframes ribbonGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.brand-logo { animation: logoBounce 3.6s ease-in-out infinite; }
.footer-logo { animation-duration: 4.4s; }
.hero-card { animation: heroCardFloat 5s ease-in-out infinite; }
.mascot { animation: mascotBob 2.8s ease-in-out infinite; }
.mascot-bubble { animation: bubblePop .7s .35s cubic-bezier(.2,.8,.2,1) both; transform-origin: right bottom; }
.progress-track span { animation: progressGrow 1.2s .55s cubic-bezier(.2,.8,.2,1) both; position: relative; overflow: hidden; }
.progress-track span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: rgba(255,255,255,.65);
  filter: blur(2px);
  animation: shineSweep 2.4s 1.6s ease-in-out infinite;
}
.top-ribbon { background-size: 220% 220%; animation: ribbonGlow 5s ease-in-out infinite; }
.cta-emoji { animation: rocketFloat 2.7s ease-in-out infinite; }

.primary-btn, .secondary-btn, .white-btn, .card-btn, .grade-pill, .subject-card {
  position: relative;
  overflow: hidden;
}
.primary-btn::after, .secondary-btn::after, .white-btn::after, .card-btn::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -35%;
  width: 22%;
  height: 180%;
  background: rgba(255,255,255,.48);
  transform: skewX(-18deg) translateX(-250%);
  transition: transform .55s ease;
  pointer-events: none;
}
.primary-btn:hover::after, .secondary-btn:hover::after, .white-btn:hover::after, .card-btn:hover::after {
  transform: skewX(-18deg) translateX(760%);
}
.practice-card:hover .practice-icon,
.subject-card:hover .subject-emoji,
.benefit:hover > span,
.testimonial-card:hover .student-avatar {
  animation: emojiWiggle .55s ease;
}
.practice-card, .testimonial-card, .benefit {
  transition: transform .25s ease, box-shadow .25s ease;
}
.practice-card:hover, .testimonial-card:hover, .benefit:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 42px rgba(47, 107, 255, .18);
}
.grade-pill:active, .subject-card:active, .primary-btn:active, .secondary-btn:active, .card-btn:active, .white-btn:active {
  transform: scale(.96);
}

/* Scroll reveal. JS adds .reveal, then .is-visible. */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   OLYMPATH LOGO-MATCHED COLOR THEME
   Palette: deep navy, royal blue, cyan blue, gold and orange.
   Layout, content and animations remain unchanged.
   ========================================================= */
:root {
  --ink: #102846;
  --blue: #0b78d0;
  --blue-dark: #06376f;
  --navy: #062451;
  --navy-deep: #031838;
  --cyan: #19baf0;
  --yellow: #ffcb2f;
  --gold: #f4b915;
  --gold-soft: #ffea94;
  --coral: #f27a08;
  --orange: #ef7600;
  --mint: #31c9e8;
  --purple: #0858a8;
  --lavender: #e7f3ff;
  --cream: #fff7d8;
  --sky: #eaf7ff;
  --white: #ffffff;
  --shadow: 0 14px 34px rgba(6, 55, 111, .16);
}

body {
  color: var(--ink);
  background: #fff;
}

.top-ribbon {
  color: var(--navy-deep);
  background: linear-gradient(90deg, #f2ad08, #ffdc54, #fff09d, #ffcf2f, #f28a06);
}

/*.topbar {*/
/*  background: rgba(255,255,255,.96);*/
/*  border-bottom-color: #d8e8f5;*/
/*}*/

.brand { color: var(--navy); }
.brand-logo { filter: drop-shadow(0 5px 9px rgba(6,55,111,.22)); }
.nav a:hover { color: var(--blue); border-color: var(--yellow); }
.menu-btn,
.ghost-btn { color: var(--navy); background: #eaf5ff; }

.primary-btn {
  background: linear-gradient(135deg, #0c8de8, #085bab 55%, #06376f);
  box-shadow: 0 9px 20px rgba(8, 91, 171, .28);
}
.secondary-btn {
  color: #543300;
  background: linear-gradient(135deg, #ffca28, #ffe47c);
  box-shadow: 0 9px 20px rgba(244,185,21,.28);
}
.white-btn { color: var(--navy); }

/*.hero {*/
/*  background:*/
/*    radial-gradient(circle at 12% 20%, rgba(255,203,47,.50), transparent 23%),*/
/*    radial-gradient(circle at 88% 18%, rgba(25,186,240,.23), transparent 25%),*/
/*    radial-gradient(circle at 82% 86%, rgba(8,88,168,.15), transparent 30%),*/
/*    linear-gradient(135deg, #eaf7ff 0%, #f7fbff 46%, #fff8de 100%);*/
/*}*/
.hero::after { background: rgba(25,186,240,.12); }
.eyebrow { background: #dff1ff; color: var(--navy); }
.eyebrow.orange { background: #fff0bd; color: #8b4b00; }
.eyebrow.purple-label { background: #e4f2ff; color: #07539d; }
/*.hero h1 span { color: var(--orange); text-shadow: 0 3px 0 #ffeaa0; }*/
.hero-copy > p {
    color: #fff;
}
.trust-row span { border: 1px solid #e5eef7; }

.hero-card {
  border-color: #fff;
  box-shadow: 0 30px 60px rgba(6,55,111,.20);
}
.streak { background: #fff0d8; color: #a54b00; }
.stars { background: #fff3b8; color: #735400; }
.mission { background: #edf6ff; }
.mission > span { background: linear-gradient(135deg, #0c8de8, #0756a5); }
.mission.done { background: #eefaff; }
.mission.done > span { background: #16a9d9; }
.progress-track { background: #deebf6; }
.progress-track span { background: linear-gradient(90deg, #19baf0, #0b78d0, #ffcb2f); }
.mascot { color: var(--navy-deep); background: linear-gradient(145deg, #ffe46f, #f8bb18); }
.mascot-bubble { background: linear-gradient(135deg, var(--navy), #0759a7); }

.grade-zone { border-color: #e1edf6; }
.grade-pill { border-color: #d7e6f2; }
.grade-pill span { color: var(--blue); background: #e9f5ff; }
.grade-pill.active { border-color: var(--blue); box-shadow: 0 8px 18px rgba(8,91,171,.14); }
.grade-pill.active span { background: linear-gradient(135deg, #0c8de8, #0757a4); }

.section-yellow { background: linear-gradient(180deg, #fff8d8, #fffdf5); }
.section-blue { background: linear-gradient(180deg, #eaf7ff, #f8fcff); }

.practice-card.pink { background: linear-gradient(145deg, #fff0bd, #fffdf5); }
.practice-card.blue { background: linear-gradient(145deg, #dff3ff, #fafdff); }
.practice-card.green { background: linear-gradient(145deg, #d9f5ff, #f8fdff); }
.points { color: #604500; background: #fff0ad; }
.card-btn { background: linear-gradient(135deg, #0c8de8, #0758a8); }

/*.science { background: linear-gradient(145deg, #d9f5ff, #f8fdff); }*/
/*.maths { background: linear-gradient(145deg, #fff0b8, #fffaf0); }*/
.english { background: linear-gradient(145deg, #ffe2b8, #fff8ed); }
.gk { background: linear-gradient(145deg, #dcefff, #f8fcff); }
/*.sst { background: linear-gradient(145deg, #e6f3ff, #fbfdff); }*/
/*.reasoning { background: linear-gradient(145deg, #fff2c8, #fffdf6); }*/
.subject-card small { color: #526981; }
.subject-card em { color: #0759a8; }

.testimonial-card { border-color: #dce9f4; }
.yellow-card { background: #fff6c9; }
.mint-card { background: #e4f7ff; }
.lavender-card { background: #edf5ff; }
.quote-mark { color: #0b69bb; }
.student-avatar { border: 1px solid #e2edf5; }

.benefit { border-top-color: #19baf0; }
.benefit:nth-child(2) { border-color: #ffcb2f; }
.benefit:nth-child(3) { border-color: #f27a08; }
.benefit:nth-child(4) { border-color: #0758a8; }

.cta {
  background: linear-gradient(125deg, #031838 0%, #06376f 34%, #0b78d0 72%, #f08a06 135%);
  box-shadow: 0 24px 50px rgba(6,55,111,.28);
}
.cta-emoji { background: rgba(255,203,47,.16); }

footer {
  color: #d9eaff;
  background: linear-gradient(135deg, #03152f, #062451 72%, #073c76);
  border-top: 4px solid #e8ad18;
}
.footer-links a:hover { color: #ffd34c; }

.modal-backdrop { background: rgba(3,24,56,.64); }
.modal-card input { border-color: #d7e6f2; }
.modal-card input:focus { border-color: #0b78d0; }

.practice-card:hover, .testimonial-card:hover, .benefit:hover {
  box-shadow: 0 20px 42px rgba(6,55,111,.19);
}

/* =========================================================
   OLYMPYTH KIDS MOTION PACK
   Keeps the existing motion layer and adds gentle, section-by-section
   animation without changing the brochure content.
   ========================================================= */

/* New supplied Olympyth logo */
.brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  box-shadow: 0 0 0 3px #ffcf2f, 0 8px 18px rgba(3,24,56,.18);
}
.footer-logo { width: 74px; height: 74px; }

@keyframes logoChampionPulse {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); filter: drop-shadow(0 5px 9px rgba(6,55,111,.22)); }
  50% { transform: translateY(-5px) rotate(2deg) scale(1.055); filter: drop-shadow(0 10px 14px rgba(244,185,21,.28)); }
}
.brand-logo { animation: logoChampionPulse 3.2s ease-in-out infinite; }

/* Every main section gets its own little moving world. */
.playful-section { position: relative; overflow: hidden; isolation: isolate; }
.playful-section > *:not(.section-float) { position: relative; z-index: 2; }
.section-float {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  font-size: clamp(1.5rem, 3vw, 2.7rem);
  opacity: .28;
  filter: drop-shadow(0 5px 8px rgba(6,55,111,.15));
}
.float-a { left: 2.5%; top: 16%; animation: sectionFloatA 4.8s ease-in-out infinite; }
.float-b { right: 3%; bottom: 13%; animation: sectionFloatB 5.4s ease-in-out infinite; }
@keyframes sectionFloatA {
  0%, 100% { transform: translate(0,0) rotate(-7deg) scale(1); }
  50% { transform: translate(10px,-16px) rotate(8deg) scale(1.12); }
}
@keyframes sectionFloatB {
  0%, 100% { transform: translate(0,0) rotate(7deg) scale(1); }
  50% { transform: translate(-12px,-12px) rotate(-8deg) scale(1.1); }
}

/* Animated heading accent so each section arrives like a game level. */
.section-heading h2, .grade-zone h2 {
  position: relative;
  display: inline-block;
}
.section-heading h2::after, .grade-zone h2::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: -6px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #19baf0, #ffcb2f, #f27a08, #19baf0);
  background-size: 220% 100%;
  transform-origin: center;
  animation: rainbowUnderline 3.3s linear infinite, underlineBounce 2.4s ease-in-out infinite;
}
@keyframes rainbowUnderline { to { background-position: 220% 0; } }
@keyframes underlineBounce { 50% { transform: scaleX(.78); } }

/* Course cards: gentle float with staggered timing. */
.practice-card:nth-child(1) { animation: cardDrift 4.8s ease-in-out infinite; }
.practice-card:nth-child(2) { animation: cardDrift 4.8s .65s ease-in-out infinite; }
.practice-card:nth-child(3) { animation: cardDrift 4.8s 1.3s ease-in-out infinite; }
@keyframes cardDrift {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(.45deg); }
}
.practice-icon { animation: iconBounce 2.6s ease-in-out infinite; }
.practice-card:nth-child(2) .practice-icon { animation-delay: .45s; }
.practice-card:nth-child(3) .practice-icon { animation-delay: .9s; }
@keyframes iconBounce {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-7px) rotate(-6deg); }
  65% { transform: translateY(-2px) rotate(5deg); }
}

/* Subject cards behave like collectible tiles, but politely. */
.subject-card { transform-origin: center bottom; }
.subject-card:nth-child(odd) .subject-emoji { animation: subjectBob 3s ease-in-out infinite; }
.subject-card:nth-child(even) .subject-emoji { animation: subjectBob 3s .7s ease-in-out infinite; }
@keyframes subjectBob {
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  50% { transform: translateY(-8px) rotate(5deg) scale(1.08); }
}
.subject-card::before {
  content: "";
  position: absolute;
  inset: -45% -25%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.7) 49%, transparent 60%);
  transform: translateX(-70%) rotate(8deg);
  animation: subjectShine 6.5s ease-in-out infinite;
  pointer-events: none;
}
.subject-card:nth-child(2)::before { animation-delay: .7s; }
.subject-card:nth-child(3)::before { animation-delay: 1.4s; }
.subject-card:nth-child(4)::before { animation-delay: 2.1s; }
.subject-card:nth-child(5)::before { animation-delay: 2.8s; }
@keyframes subjectShine {
  0%,70%,100% { transform: translateX(-70%) rotate(8deg); }
  82% { transform: translateX(75%) rotate(8deg); }
}

/* Benefits feel alive while staying readable. */
.testimonial-card .quote-mark,
.benefit > span { display: inline-block; animation: badgePop 3.1s ease-in-out infinite; }
.benefit > span {
    font-size: 3rem;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 1px #b9b9b9;
    width: 66px;
    padding: 0px;
}
.testimonial-card:nth-child(2) .quote-mark, .benefit:nth-child(2) > span { animation-delay: .45s; }
.testimonial-card:nth-child(3) .quote-mark, .benefit:nth-child(3) > span { animation-delay: .9s; }
.benefit:nth-child(4) > span { animation-delay: 1.35s; }
@keyframes badgePop {
  0%,100% { transform: scale(1) rotate(0); }
  45% { transform: scale(1.14) rotate(-5deg); }
  60% { transform: scale(1.06) rotate(4deg); }
}

/* Grade selector gives a little celebratory ring around the active class. */
.grade-pill.active { animation: activeGradeGlow 2s ease-in-out infinite; }
@keyframes activeGradeGlow {
  0%,100% { box-shadow: 0 8px 18px rgba(8,91,171,.14), 0 0 0 0 rgba(255,203,47,.34); }
  50% { box-shadow: 0 10px 22px rgba(8,91,171,.20), 0 0 0 7px rgba(255,203,47,0); }
}

/* Registration CTA gets a slow celebratory glow. */
.cta { background-size: 180% 180%; animation: ctaGradientPlay 7s ease-in-out infinite; }
.cta .white-btn { animation: registerBounce 2.4s ease-in-out infinite; }
@keyframes ctaGradientPlay { 50% { background-position: 100% 50%; } }
@keyframes registerBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}

/* Tiny twinkle field, generated by JS, across sections. */
.kid-sparkle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffcb2f;
  box-shadow: 0 0 0 3px rgba(255,203,47,.12), 0 0 14px rgba(255,203,47,.7);
  animation: sparkleTwinkle var(--sparkle-speed, 3s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
  opacity: .45;
}
@keyframes sparkleTwinkle {
  0%,100% { transform: scale(.35) rotate(0); opacity: .18; }
  50% { transform: scale(1.2) rotate(90deg); opacity: .82; }
}

@media (max-width: 600px) {
  .brand-logo { width: 54px; height: 54px; }
  .footer-logo { width: 64px; height: 64px; }
  .section-float { opacity: .18; }
  .kid-sparkle:nth-of-type(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .section-float, .section-heading h2::after, .grade-zone h2::after,
  .practice-card, .practice-icon, .subject-emoji, .subject-card::before,
  .testimonial-card .quote-mark, .benefit > span, .grade-pill.active,
  .cta, .cta .white-btn, .kid-sparkle { animation: none !important; }
}


/* Animated bow-style underline for the Olympyth name in the top header */
.brand-name {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  line-height: 1;
  letter-spacing: .4px;
}

.brand-name::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 34px;
  height: 16px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 36'%3E%3Cpath d='M38 18 C29 6 16 3 7 12 C18 13 24 18 29 28 C33 24 36 21 38 18Z' fill='%23ffcb2f' stroke='%23f08a06' stroke-width='2'/%3E%3Cpath d='M42 18 C51 6 64 3 73 12 C62 13 56 18 51 28 C47 24 44 21 42 18Z' fill='%23ffcb2f' stroke='%23f08a06' stroke-width='2'/%3E%3Cellipse cx='40' cy='18' rx='8' ry='6.8' fill='%230b78d0' stroke='%23ffcb2f' stroke-width='2'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 2px rgba(6,55,111,.16));
  animation: bowKnotBob 2.8s ease-in-out infinite;
}

.brand-name::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: 0;
  width: 104%;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 32' preserveAspectRatio='none'%3E%3Cpath d='M7 18 C34 27 56 25 77 18 C89 14 102 13 118 19 C126 22 134 22 142 19 C158 13 171 14 183 18 C204 25 226 27 253 18' fill='none' stroke='%23f4b915' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M11 21 C36 28 57 27 77 21 C89 18 101 17 118 22 C126 24 134 24 142 22 C159 17 171 18 183 21 C203 27 224 28 249 21' fill='none' stroke='%230b78d0' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M115 18 Q130 30 145 18' fill='none' stroke='%23ffcb2f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  transform-origin: center center;
  filter: drop-shadow(0 2px 2px rgba(244,185,21,.2));
  animation: bowUnderlineSway 2.8s ease-in-out infinite;
}

@keyframes bowUnderlineSway {
  0%, 100% { transform: scaleX(.93) translateY(1px); opacity: .84; }
  50% { transform: scaleX(1.02) translateY(-1px); opacity: 1; }
}

@keyframes bowKnotBob {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-1.5px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-name::before,
  .brand-name::after { animation: none; transform: translateX(-50%); opacity: 1; }
  .brand-name::after { transform: none; }
}


/* =========================================================
   QUOTE + WHATSAPP
   ========================================================= */
.quote-section {
  position: relative;
  padding-top: 88px;
  padding-bottom: 88px;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,203,47,.24), transparent 23%),
    radial-gradient(circle at 92% 84%, rgba(25,186,240,.18), transparent 26%),
    linear-gradient(135deg, #fffdf5 0%, #f7fbff 52%, #eef8ff 100%);
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.quote-copy { min-width: 0; }
.quote-copy h2 {
  margin: 14px 0 14px;
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--navy);
  font-size: clamp(2.2rem, 4vw, 3.55rem);
  line-height: 1.03;
  letter-spacing: -.02em;
}
.quote-copy > p {
  max-width: 620px;
  margin: 0;
  color: #536981;
  font-size: 1.06rem;
}
.quote-highlights {
  display: grid;
  gap: 11px;
  margin-top: 24px;
}
.quote-highlights span {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid #dfeaf3;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 20px rgba(6,55,111,.08);
  color: #173a62;
  font-weight: 900;
  animation: quoteChipFloat 3.3s ease-in-out infinite;
}
.quote-highlights span:nth-child(2) { animation-delay: .4s; }
.quote-highlights span:nth-child(3) { animation-delay: .8s; }
@keyframes quoteChipFloat {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.quote-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 2px solid #dbeaf5;
  border-radius: 30px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 55px rgba(6,55,111,.15);
  animation: quoteCardHover 5s ease-in-out infinite;
}
.quote-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.72) 48%, transparent 60%);
  transform: translateX(-130%);
  animation: quoteCardShine 7s ease-in-out infinite;
}
.quote-card::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -90px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,203,47,.34), rgba(255,203,47,0) 70%);
  pointer-events: none;
}
@keyframes quoteCardHover {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(.15deg); }
}
@keyframes quoteCardShine {
  0%,72%,100% { transform: translateX(-130%); }
  84% { transform: translateX(130%); }
}
.quote-card > * { position: relative; z-index: 2; }
.quote-card-badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #6a4a00;
  background: linear-gradient(135deg, #fff0ad, #ffe06a);
  box-shadow: 0 6px 16px rgba(244,185,21,.16);
  font-weight: 900;
  letter-spacing: .4px;
}
.quote-card label {
  display: block;
  margin-top: 14px;
  color: var(--navy);
  font-weight: 900;
}
.quote-card input,
.quote-card select,
.quote-card textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  padding: 13px 14px;
  border: 2px solid #dce8f2;
  border-radius: 14px;
  outline: none;
  background: #fbfdff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.quote-card textarea {
  min-height: 105px;
  resize: vertical;
}
.quote-card input:focus,
.quote-card select:focus,
.quote-card textarea:focus {
  border-color: #0b78d0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11,120,208,.10);
  transform: translateY(-1px);
}
.quote-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.optional { color: #8190a1; font-weight: 700; }
.quote-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #25D366, #139b68 58%, #128C7E);
  box-shadow: 0 11px 24px rgba(18,140,126,.24);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: quoteButtonGlow 2.5s ease-in-out infinite;
}
.quote-submit:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 15px 30px rgba(18,140,126,.32);
}
.quote-submit span {
  display: inline-block;
  animation: whatsappWiggle 2s ease-in-out infinite;
}
.quote-card small {
  display: block;
  margin-top: 10px;
  color: #718096;
  text-align: center;
  line-height: 1.4;
}
@keyframes quoteButtonGlow {
  0%,100% { box-shadow: 0 11px 24px rgba(18,140,126,.24); }
  50% { box-shadow: 0 13px 32px rgba(37,211,102,.38); }
}
@keyframes whatsappWiggle {
  0%,100% { transform: rotate(0) scale(1); }
  45% { transform: rotate(-12deg) scale(1.08); }
  60% { transform: rotate(10deg) scale(1.08); }
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 12px 30px rgba(18,140,126,.38);
  font-weight: 900;
  transform-origin: right bottom;
  animation: whatsappFloat 3s ease-in-out infinite;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.03); }
.whatsapp-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
  font-size: 1.28rem;
}
.whatsapp-label { position: relative; z-index: 2;display:none; }
.whatsapp-pulse {
  position: absolute;
  left: 10px;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.68);
  border-radius: 50%;
  animation: whatsappPulse 2s ease-out infinite;
}
.whatsapp-float:hover .whatsapp-label {
    display: block;
    transition: all ease-in-out 0.5s;
}
.whatsapp-float:hover .whatsapp-icon svg {
    color: #fff;
}
@keyframes whatsappPulse {
  0% { transform: scale(.75); opacity: .75; }
  85%,100% { transform: scale(1.65); opacity: 0; }
}
@keyframes whatsappFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 900px) {
  .quote-layout {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .quote-copy { text-align: center; }
  .quote-copy > p { margin-inline: auto; }
  .quote-highlights { justify-items: center; }
}
@media (max-width: 600px) {
  .quote-section { padding-top: 64px; padding-bottom: 70px; }
  .quote-card { padding: 22px 18px; border-radius: 24px; }
  .quote-form-row { grid-template-columns: 1fr; gap: 0; }
  .quote-highlights span { width: 100%; border-radius: 16px; justify-content: flex-start; }
  .whatsapp-float { right: 12px; bottom: 12px; padding: 9px; }
  .whatsapp-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-highlights span,
  .quote-card,
  .quote-card::before,
  .quote-submit,
  .quote-submit span,
  .whatsapp-float,
  .whatsapp-pulse { animation: none !important; }
}


/* =========================================================
   FINAL UI POLISH: HEADER, QUICK CONNECT, BUTTON ALIGNMENT
   ========================================================= */
.brand {
  gap: 12px;
  min-width: 0;
}
.brand-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.brand-slogan {
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ef7d00;
  text-shadow: 0 1px 0 #fff2bf;
  animation: sloganSpark 2.9s ease-in-out infinite;
}
@keyframes sloganSpark {
  0%,100% { transform: translateY(0); opacity: .88; }
  50% { transform: translateY(-2px); opacity: 1; }
}

.topbar {
  gap: 18px;
}
.nav {
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  /*border: 1px solid #dbe8f4;*/
  /*border-radius: 999px;*/
  /*background: rgba(255,255,255,.88);*/
  /*box-shadow: 0 10px 24px rgba(6,55,111,.08);*/
}
.nav a {
  position: relative;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  color: #173a62;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav a:hover,
.nav a:focus-visible {
  color: #062451;
  background: linear-gradient(135deg, #fff3b9, #e9f6ff);
  box-shadow: inset 0 0 0 1px #dce8f4, 0 8px 18px rgba(6,55,111,.08);
  transform: translateY(-1px);
}
.header-actions {
  align-items: center;
}
.header-actions .ghost-btn,
.header-actions .primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  white-space: nowrap;
}

.practice-card {
  display: flex;
  flex-direction: column;
}
.practice-card p {
  margin-bottom: 20px;
}
.card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: auto;
}

.quote-layout {
  align-items: start;
}
.quote-copy h2 {
  max-width: 560px;
}
.quote-card {
  width: min(100%, 560px);
  justify-self: end;
}
.quote-card-badge {
  letter-spacing: .08em;
}
.quick-connect-actions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.quick-connect-direct {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #06376f, #0b78d0 62%, #19baf0);
  color: #fff;
  box-shadow: 0 12px 26px rgba(6,55,111,.22);
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease;
}
.quick-connect-direct:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(6,55,111,.28);
}
.quick-connect-direct span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}

.quick-connect-float,
.whatsapp-float {
  position: fixed;
  right: 20px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  border-radius: 999px;
  font-weight: 900;
  transform-origin: right bottom;
}
.quick-connect-float {
  bottom: 92px;
  padding: 10px 10px 10px 10px;
  border: 2px solid rgba(255,255,255,.82);
  color: #fff;
  background: linear-gradient(135deg, #06376f, #0b78d0 66%, #f2b20d 130%);
  box-shadow: 0 12px 30px rgba(6,55,111,.34);
  animation: quickConnectFloat 3.1s ease-in-out infinite;
}
.quick-connect-float:hover {
  transform: translateY(-3px) scale(1.03);
}
.quick-connect-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 1.15rem;
}
.quick-connect-label, .whatsapp-label {
    position: relative;
    z-index: 2;
    display: none;
    transition: ease-in-out all 0.9s;
    color: #fff;
}
.quick-connect-float:hover .quick-connect-label {
    display: block;
    transition: ease-in-out all 0.9s;
}
@keyframes quickConnectFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 980px) {
  .nav {
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 46px rgba(3,24,56,.18);
  }
  .nav a {
    padding: 12px 14px;
    border-radius: 14px;
  }
}

@media (max-width: 900px) {
  .quote-card {
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 600px) {
  .brand-slogan {
    font-size: .62rem;
    letter-spacing: .1em;
  }
  .quick-connect-float {
    right: 12px;
    bottom: 82px;
    padding: 9px 10px;
  }
  .quick-connect-label,
  .whatsapp-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-slogan,
  .quick-connect-float {
    animation: none !important;
  }
}

/* =========================================================
   COMPACT SECTION SPACING
   Removes the large visual gaps between homepage sections
   while keeping each section readable and animated.
   ========================================================= */
main > section,
.section,
.quote-section,
.grade-zone,
.cta {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.hero {
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

.grade-zone {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.quote-section {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

.cta {
  margin: 0 clamp(22px, 7vw, 110px) !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.ctaContent {
    margin-top: 40px;
}
.section-heading {
  margin-bottom: 26px !important;
}

.practice-grid,
.subject-grid,
.testimonial-grid,
.benefit-grid {
  margin-bottom: 0 !important;
}

footer {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .hero {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .quote-section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
}

@media (max-width: 600px) {
  .section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .hero {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .grade-zone {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .quote-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .cta {
    margin-inline: 20px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}


/* Breathing room between the final registration CTA and footer */
.cta {
  margin-bottom: 34px !important;
}

@media (max-width: 600px) {
  .cta {
    margin-bottom: 24px !important;
  }
}


/* Quote-side content fill */
.connect-showcase { display:grid; gap:12px; margin-top:24px; }
.connect-step { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center; padding:13px 15px; border:1px solid #dce8f2; border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 10px 24px rgba(6,55,111,.08); animation:connectCardFloat 4s ease-in-out infinite; }
.connect-step:nth-child(2){animation-delay:.55s}.connect-step:nth-child(3){animation-delay:1.1s}
.connect-step > b { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#0b78d0,#06376f); box-shadow:0 7px 16px rgba(6,55,111,.18); }
.connect-step span,.connect-step strong,.connect-step small{display:block}.connect-step strong{color:#102846;font-size:.98rem}.connect-step small{margin-top:2px;color:#6b7d91;line-height:1.35}
.connect-mini-board { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.connect-mini-board span { padding:12px 8px; border-radius:15px; text-align:center; background:linear-gradient(145deg,#fff8d9,#eef8ff); border:1px solid #e1eaf2; color:#163a62; font-size:.82rem; box-shadow:0 8px 20px rgba(6,55,111,.06); }
.connect-mini-board b { display:block; margin-top:3px; }
@keyframes connectCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* CTA registration polish */
.cta-support-copy { margin:8px 0 0; color:rgba(255,255,255,.9); font-weight:800; }
.cta .white-btn { cursor:pointer; min-width:145px; }

/* Register links look like nav links instead of browser-default buttons */
.nav-register-link,.footer-register-link { border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; cursor:pointer; }
/*.nav-register-link { position:relative; padding:10px 14px; border-radius:999px; color:#173a62; font-weight:800; transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; }*/
.nav-register-link {
    position: relative;
    padding: 10px 14px;
    border-radius: 999px;
    color: #173a62;
    font-weight: 800;
    transition: transform .18s ease;
    color: #062451;
    background: linear-gradient(135deg, #fff3b9, #e9f6ff);
    box-shadow: inset 0 0 0 1px #dce8f4, 0 8px 18px rgba(6, 55, 111, .08);
}
.nav-register-link:hover,.nav-register-link:focus-visible{color:#062451;background:linear-gradient(135deg,#fff3b9,#e9f6ff);box-shadow:inset 0 0 0 1px #dce8f4,0 8px 18px rgba(6,55,111,.08);transform:translateY(-1px)}
.footer-register-link{padding:0;color:inherit}.footer-register-link:hover{color:var(--yellow)}

/* Registration modal */
body.modal-open{overflow:hidden}
.register-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.register-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.register-modal-backdrop{position:absolute;inset:0;background:rgba(3,24,56,.68);backdrop-filter:blur(7px)}
.register-modal-card{position:relative;z-index:2;width:min(100%,760px);max-height:min(90vh,820px);overflow:auto;padding:28px;border:2px solid rgba(255,255,255,.75);border-radius:30px;background:linear-gradient(150deg,#ffffff 0%,#f5fbff 58%,#fff8db 120%);box-shadow:0 30px 80px rgba(3,24,56,.32);transform:translateY(20px) scale(.97);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.register-modal.show .register-modal-card{transform:translateY(0) scale(1)}
.register-modal-close{position:absolute;right:15px;top:12px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#eaf5ff;color:#06376f;font-size:1.55rem;font-weight:900;cursor:pointer}
.register-modal-head{display:flex;align-items:center;gap:14px;padding-right:44px;margin-bottom:18px}.register-modal-icon{display:grid;place-items:center;flex:0 0 62px;width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,#ffdf68,#f2ad08);font-size:2rem;box-shadow:0 10px 22px rgba(244,185,21,.22);animation:badgePop 3.1s ease-in-out infinite}.register-kicker{display:block;color:#0b78d0;font-size:.75rem;font-weight:900;letter-spacing:.12em}.register-modal-head h2{margin:3px 0 0;font-family:"Baloo 2";font-size:2rem;line-height:1;color:#102846}.register-modal-head p{margin:5px 0 0;color:#6b7d91;font-weight:800}
.register-form{display:grid;gap:14px}.register-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.register-form label{display:block;color:#102846;font-weight:900}.register-form input,.register-form select{width:100%;margin-top:6px;padding:13px 14px;border:2px solid #dce8f2;border-radius:14px;outline:none;background:#fbfdff;color:#24324a;font:inherit;font-weight:700;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.register-form input:focus,.register-form select:focus{border-color:#0b78d0;box-shadow:0 0 0 4px rgba(11,120,208,.1);transform:translateY(-1px);background:#fff}.same-number-check{display:flex!important;align-items:center;gap:9px;padding:10px 12px;border-radius:14px;background:#eef8ff;font-size:.9rem}.same-number-check input{width:auto;margin:0;accent-color:#0b78d0}.register-summary{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-radius:16px;background:linear-gradient(135deg,#062451,#0b78d0);color:#fff;font-weight:900}.register-summary b{font-size:1.25rem;color:#ffdf68}.register-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;border:0;border-radius:16px;color:#fff;background:linear-gradient(135deg,#0b78d0,#06376f 70%);box-shadow:0 12px 28px rgba(6,55,111,.24);font-weight:900;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.register-submit:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(6,55,111,.3)}.register-form-note{margin:0;color:#728397;text-align:center;font-size:.83rem}

@media(max-width:700px){.connect-mini-board{grid-template-columns:1fr}.register-modal{padding:10px}.register-modal-card{padding:22px 16px;border-radius:24px;max-height:94vh}.register-grid{grid-template-columns:1fr}.register-modal-head h2{font-size:1.65rem}.register-modal-icon{width:52px;height:52px;flex-basis:52px;border-radius:17px}}
@media(prefers-reduced-motion:reduce){.connect-step,.register-modal-icon{animation:none!important}}
@media (max-width: 700px) {
    .subject-grid>* {
        width: 100%;
    }
    .testimonial-card {
    margin-bottom: 10px;
    }
    .benefit {
    border-top-color: #19baf0;
    margin-bottom: 10px;
}
.cta .white-btn {
    margin: 40px 0 0;
}
.decor-two {
    right: -2%;
    bottom: 0%;
}
.mascot {
    left: -30px;
}
.grade-zone h2 {
    margin: 10px 0 30px;
    font-family: "Baloo 2";
    font-size: 45px;
}
.grade-zone {
    height: 310px;
}
.cta {
    height: auto;
}





}
@media (max-width: 1199px) {
.nav a {
    padding: 10px 11px;
}
}
@media (max-width: 1163px) {
.nav a {
    padding: 10px 09px;
}
}
@media (max-width: 1024px) {
.nav a {
    padding: 10px 5px;
    font-size: 14px;
}
.nav {
    gap: 2px;
    padding: 8px 0px;
}
}
@media (max-width: 991px) {
    .testimonial-card {
    margin-bottom: 10px;
    }
    .benefit {
    border-top-color: #19baf0;
    margin-bottom: 10px;
}
.cta .white-btn {
    margin: 40px 0 0;
}
.btnDiv {
    align-items: start !important;
    display: block !important;
}
.loginLink{
    display: block;
}
}
}