/* Eduter public site brand layer. Loaded after the vendor theme (theme/css/style.css). */

:root {
  --ed-navy: #15345b;
  --ed-ink: #19375d;
  --ed-slate: #4f6079;
  --ed-coral: #f4755d;
  --ed-coral-deep: #e2563f;
  --ed-sun: #ffc94a;
  --ed-mint: #2ec4a6;
  --ed-sky: #3d6cf0;
  --ed-lilac: #8b6cf0;
  --ed-cream: #fdf8ef;
  --ed-paper: #fffdf8;
  --ed-line: #ece6d9;

  --ed-font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --ed-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ed-radius: 1.25rem;
  --ed-shadow-sm: 0 6px 18px rgba(21, 52, 91, .07);
  --ed-shadow: 0 18px 40px rgba(21, 52, 91, .12);
  --ed-shadow-lg: 0 28px 60px rgba(21, 52, 91, .18);
  --ed-ease: cubic-bezier(.22, 1, .36, 1);

  /* Map the vendor theme onto the brand palette. */
  --bs-body-font-family: var(--ed-font-body);
  --bs-body-color: var(--ed-slate);
  --bs-primary: var(--ed-sky);
  --bs-primary-rgb: 61, 108, 240;
  --bs-warning: var(--ed-sun);
  --bs-warning-rgb: 255, 201, 74;
  --bs-success: var(--ed-mint);
  --bs-success-rgb: 46, 196, 166;
  --bs-link-color: var(--ed-sky);
  --bs-link-color-rgb: 61, 108, 240;
  --bs-link-hover-color: var(--ed-coral-deep);
  --bs-link-hover-color-rgb: 226, 86, 63;
}

body {
  background-color: var(--ed-paper);
  color: var(--ed-slate);
  font-family: var(--ed-font-body);
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--ed-navy);
  font-family: var(--ed-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

.display-6 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.08; }
.lead { color: var(--ed-slate); font-size: 1.2rem; }
::selection { background: var(--ed-sun); color: var(--ed-navy); }

/* ---------- Eyebrow + highlight ---------- */

.ed-eyebrow {
  align-items: center;
  background: rgba(61, 108, 240, .09);
  border-radius: 999px;
  color: var(--ed-sky);
  display: inline-flex;
  font-size: .8rem;
  font-weight: 800;
  gap: .45rem;
  letter-spacing: .08em;
  margin-bottom: 1rem;
  padding: .4rem .9rem;
  text-transform: uppercase;
}
.ed-eyebrow--coral { background: rgba(244, 117, 93, .12); color: var(--ed-coral-deep); }
.ed-eyebrow--sun { background: rgba(255, 201, 74, .18); color: #a06a00; }
.ed-eyebrow--light { background: rgba(255, 255, 255, .12); color: var(--ed-sun); }

/* Marker underline that draws itself when its section is revealed. */
.ed-mark {
  background-image: linear-gradient(transparent 62%, rgba(255, 201, 74, .75) 62%, rgba(255, 201, 74, .75) 90%, transparent 90%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: inherit;
  padding: 0 .08em;
  transition: background-size 1s var(--ed-ease) .35s;
}
.ed-mark--coral { background-image: linear-gradient(transparent 62%, rgba(244, 117, 93, .35) 62%, rgba(244, 117, 93, .35) 90%, transparent 90%); }
.ed-js [data-reveal] .ed-mark, .ed-js .ed-mark[data-reveal] { background-size: 0 100%; }
.ed-js [data-reveal].is-visible .ed-mark, .ed-js .ed-mark[data-reveal].is-visible { background-size: 100% 100%; }

/* ---------- Buttons ---------- */

.btn { border-radius: 999px; font-family: var(--ed-font-body); font-weight: 800; letter-spacing: .01em; transition: transform .25s var(--ed-ease), box-shadow .25s var(--ed-ease), background-color .25s ease, color .25s ease; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(61, 108, 240, .35); }
.btn-primary { --bs-btn-bg: var(--ed-navy); --bs-btn-border-color: var(--ed-navy); --bs-btn-hover-bg: var(--ed-ink); --bs-btn-hover-border-color: var(--ed-ink); --bs-btn-active-bg: var(--ed-ink); --bs-btn-active-border-color: var(--ed-ink); }
.btn-primary:hover { box-shadow: var(--ed-shadow-sm); transform: translateY(-2px); }

.ed-btn-cta {
  background: linear-gradient(135deg, var(--ed-coral) 0%, var(--ed-coral-deep) 100%);
  border: 0;
  box-shadow: 0 12px 26px rgba(226, 86, 63, .32);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.ed-btn-cta::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-120%);
}
.ed-btn-cta:hover, .ed-btn-cta:focus-visible { box-shadow: 0 16px 34px rgba(226, 86, 63, .42); color: #fff; transform: translateY(-3px); }
.ed-btn-cta:hover::after { transform: translateX(120%); transition: transform .8s var(--ed-ease); }
.ed-btn-cta .fa-arrow-right, .ed-link-arrow .fa-arrow-right { transition: transform .25s var(--ed-ease); }
.ed-btn-cta:hover .fa-arrow-right, .ed-link-arrow:hover .fa-arrow-right { transform: translateX(4px); }

.ed-btn-ghost { background: #fff; border: 2px solid var(--ed-line); color: var(--ed-navy); }
.ed-btn-ghost:hover, .ed-btn-ghost:focus-visible { border-color: var(--ed-navy); color: var(--ed-navy); transform: translateY(-2px); }

.ed-link-arrow { color: var(--ed-sky); font-weight: 800; text-decoration: none; }
.ed-link-arrow:hover { color: var(--ed-coral-deep); }

/* ---------- Header ---------- */

header.navbar-sticky { transition: box-shadow .3s ease, background-color .3s ease; }
header.navbar-sticky-on {
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  background-color: rgba(255, 253, 248, .85) !important;
  box-shadow: 0 6px 24px rgba(21, 52, 91, .08);
}
.navbar .nav-link { color: var(--ed-navy); font-weight: 700; position: relative; }
@media (min-width: 1200px) {
  .navbar .nav-link::after {
    background: var(--ed-coral);
    border-radius: 2px;
    bottom: .35rem;
    content: "";
    height: 3px;
    left: var(--bs-navbar-nav-link-padding-x, .5rem);
    position: absolute;
    right: var(--bs-navbar-nav-link-padding-x, .5rem);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ed-ease);
  }
  .navbar .nav-link:hover::after, .navbar .nav-link:focus-visible::after { transform: scaleX(1); }
}

/* ---------- Hero ---------- */

.ed-hero { background: linear-gradient(180deg, var(--ed-cream) 0%, var(--ed-paper) 100%); isolation: isolate; }
.ed-hero::before, .ed-hero::after {
  border-radius: 50%;
  content: "";
  filter: blur(60px);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.ed-hero::before { animation: ed-drift 18s ease-in-out infinite alternate; background: rgba(255, 201, 74, .35); height: 420px; left: -120px; top: -80px; width: 420px; }
.ed-hero::after { animation: ed-drift 22s ease-in-out infinite alternate-reverse; background: rgba(61, 108, 240, .18); bottom: -140px; height: 480px; right: -120px; width: 480px; }

.ed-checks { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.ed-checks li {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: 999px;
  color: var(--ed-navy);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 700;
  gap: .4rem;
  padding: .35rem .85rem .35rem .55rem;
}
.ed-checks i { color: var(--ed-mint); font-size: 1.05rem; }

.ed-hero-visual { isolation: isolate; }
.ed-hero-blob {
  animation: ed-morph 14s ease-in-out infinite;
  aspect-ratio: 1;
  background: linear-gradient(140deg, var(--ed-sun) 0%, var(--ed-coral) 55%, var(--ed-lilac) 100%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  bottom: 4%;
  left: 50%;
  opacity: .9;
  position: absolute;
  transform: translateX(-50%);
  width: min(88%, 470px);
  z-index: -1;
}
.ed-hero-visual img.ed-hero-photo { filter: drop-shadow(0 30px 40px rgba(21, 52, 91, .18)); }

.ed-chip { animation: ed-float 6s ease-in-out infinite; animation-delay: var(--float-delay, 0s); border-radius: 1rem !important; box-shadow: var(--ed-shadow) !important; }
.ed-chip img { height: 52px; width: 52px; }
.ed-momentum { animation: ed-float 7s ease-in-out infinite; animation-delay: -2s; border-radius: var(--ed-radius) !important; box-shadow: var(--ed-shadow-lg) !important; }
.ed-momentum p { font-family: var(--ed-font-display); font-weight: 600; }

/* ---------- Bands + sections ---------- */

.ed-band { background: radial-gradient(1200px 400px at 10% 0%, #22497a 0%, var(--ed-navy) 60%); overflow: hidden; position: relative; }
.ed-band::after {
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  pointer-events: none;
  position: absolute;
}
.ed-band h2 { color: #fff; }
.ed-band .container { position: relative; z-index: 1; }

.ed-section-soft { background: var(--ed-cream); }
.ed-photo { border-radius: calc(var(--ed-radius) + .25rem); box-shadow: var(--ed-shadow); transition: transform .6s var(--ed-ease), box-shadow .6s var(--ed-ease); }
.ed-photo-frame { position: relative; }
.ed-photo-frame::before {
  background: var(--ed-sun);
  border-radius: calc(var(--ed-radius) + .25rem);
  content: "";
  inset: 1rem -1rem -1rem 1rem;
  position: absolute;
  transition: transform .6s var(--ed-ease);
  z-index: 0;
}
.ed-photo-frame--mint::before { background: var(--ed-mint); opacity: .55; }
.ed-photo-frame .ed-photo { position: relative; z-index: 1; }
.ed-photo-frame:hover .ed-photo { transform: translate(-4px, -4px); }
.ed-photo-frame:hover::before { transform: translate(4px, 4px); }

/* ---------- Feature cards ---------- */

.ed-card {
  --ed-accent: var(--ed-sky);
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow-sm);
  height: 100%;
  overflow: hidden;
  padding: 1.75rem;
  position: relative;
  transition: transform .4s var(--ed-ease), box-shadow .4s var(--ed-ease), border-color .4s ease;
}
.ed-card::before {
  background: var(--ed-accent);
  content: "";
  height: 4px;
  inset: 0 0 auto 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ed-ease);
}
.ed-card:hover { border-color: transparent; box-shadow: var(--ed-shadow); transform: translateY(-6px); }
.ed-card:hover::before { transform: scaleX(1); }
.ed-card h5 { font-size: 1.3rem; }
.ed-card p { margin-bottom: 0; }
.ed-card--mint { --ed-accent: var(--ed-mint); }
.ed-card--sun { --ed-accent: var(--ed-sun); }
.ed-card--coral { --ed-accent: var(--ed-coral); }
.ed-card--lilac { --ed-accent: var(--ed-lilac); }

.ed-icon {
  align-items: center;
  background: color-mix(in srgb, var(--ed-accent) 16%, #fff);
  border-radius: 1rem;
  color: var(--ed-accent);
  display: inline-flex;
  font-size: 1.5rem;
  height: 3.5rem;
  justify-content: center;
  margin-bottom: 1.1rem;
  transition: transform .4s var(--ed-ease);
  width: 3.5rem;
}
.ed-card--sun .ed-icon { color: #c78a00; }
.ed-card:hover .ed-icon { transform: rotate(-8deg) scale(1.08); }

.ed-step {
  color: var(--ed-accent);
  display: block;
  font-family: var(--ed-font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}
.ed-card--sun .ed-step { color: #c78a00; }

/* Audience list (students / parents / teachers). */
.ed-audience {
  --ed-accent: var(--ed-sky);
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem 1.4rem;
  transition: transform .35s var(--ed-ease), box-shadow .35s var(--ed-ease);
}
.ed-audience:hover { box-shadow: var(--ed-shadow-sm); transform: translateX(6px); }
.ed-audience .ed-icon { flex-shrink: 0; margin-bottom: 0; }
.ed-audience h6 { font-size: 1.15rem; }

/* ---------- Call to action ---------- */

.ed-cta {
  background: linear-gradient(135deg, #fff4dc 0%, #ffe3d9 55%, #e8e6ff 100%);
  border-radius: calc(var(--ed-radius) * 1.6);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.ed-cta::before, .ed-cta::after {
  border-radius: 50%;
  content: "";
  position: absolute;
  z-index: -1;
}
.ed-cta::before { animation: ed-float 9s ease-in-out infinite; background: rgba(255, 201, 74, .45); height: 220px; right: -60px; top: -80px; width: 220px; }
.ed-cta::after { animation: ed-float 11s ease-in-out infinite reverse; background: rgba(46, 196, 166, .25); bottom: -90px; height: 200px; left: 30%; width: 200px; }
.ed-cta-form { background: #fff; border-radius: var(--ed-radius); box-shadow: var(--ed-shadow); padding: 1.75rem; }
.ed-cta-form .form-control { border: 2px solid var(--ed-line); border-radius: .9rem; transition: border-color .25s ease, box-shadow .25s ease; }
.ed-cta-form .form-control:focus { border-color: var(--ed-sky); box-shadow: 0 0 0 .25rem rgba(61, 108, 240, .15); }
.ed-cta-form .form-label { color: var(--ed-navy); font-weight: 800; }
.ed-cta-form .text-muted { color: var(--ed-slate) !important; }

/* ---------- Footer ---------- */

footer { background: var(--ed-cream); border-top: 1px solid var(--ed-line); margin-top: 3rem; }
footer h5 { font-size: 1.05rem; }
footer .nav-link { color: var(--ed-slate); font-weight: 600; padding-left: 0; transition: color .2s ease, transform .2s var(--ed-ease); }
footer .nav-link:hover { color: var(--ed-coral-deep); transform: translateX(3px); }

.back-top { background: var(--ed-coral) !important; box-shadow: 0 10px 22px rgba(226, 86, 63, .35); color: #fff !important; }

/* ---------- Scroll reveal (site.js adds .is-visible; .ed-js is set in <head>) ---------- */

.ed-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ed-ease), transform .8s var(--ed-ease);
  transition-delay: var(--reveal-delay, 0s);
}
.ed-js [data-reveal="left"] { transform: translateX(-36px); }
.ed-js [data-reveal="right"] { transform: translateX(36px); }
.ed-js [data-reveal="zoom"] { transform: scale(.94); }
.ed-js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */

@keyframes ed-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ed-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 40px) scale(1.12); } }
@keyframes ed-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 63% 37% 45% 55% / 55% 61% 39% 45%; }
  66% { border-radius: 38% 62% 35% 65% / 62% 38% 62% 38%; }
}

@media (max-width: 575.98px) {
  .ed-card, .ed-cta-form { padding: 1.4rem; }
  .ed-photo-frame::before { inset: .6rem -.6rem -.6rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .ed-js [data-reveal] { opacity: 1; transform: none; }
  .ed-js [data-reveal] .ed-mark, .ed-js .ed-mark[data-reveal] { background-size: 100% 100%; }
}