/* EdifyKids tokens + hero (own code). Palette/fonts = approved brand pack 2026-11-03 */
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-var.woff2") format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --ek-orange:#F28C28;--ek-red:#E5432F;--ek-yellow:#FBC531;--ek-green:#6DBE4B;--ek-blue:#3AA7D8;
  --ek-ink:#1F2A44;--ek-ink-soft:#4A5672;--ek-cream:#FFF8F0;--ek-sky:#EAF6FD;--ek-white:#fff;
  --ek-radius:24px;--ek-radius-lg:36px;--ek-shadow:0 10px 30px rgba(31,42,68,.10);
  --ek-font-head:"Fredoka",system-ui,sans-serif;--ek-font-body:"Nunito",system-ui,sans-serif;--ek-ease:cubic-bezier(.22,.9,.3,1);
}
body.ek-home{background:var(--ek-cream);color:var(--ek-ink);font-family:var(--ek-font-body)}
body.ek-home #site-header,body.ek-home #site-footer,body.ek-home .page-header{display:none!important}
body.ek-home .site-main{max-width:none!important;padding:0!important;margin:0}

/* ---------- hero ---------- */
.ek-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,820px);display:flex;align-items:center;
  background:radial-gradient(1200px 600px at 78% 30%,#ffffff 0%,rgba(255,255,255,0) 60%),linear-gradient(170deg,#DDF1FC 0%,#EAF6FD 38%,#FFF8F0 100%);color:var(--ek-ink);font-family:var(--ek-font-body)}
.ek-hero *{box-sizing:border-box}
.ek-hero__stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.ek-hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--ek-ease)}
.ek-hero.ek-3d-on .ek-hero__canvas{opacity:1}
.ek-hero__fallback{position:absolute;right:2%;top:50%;width:min(52vw,720px);transform:translateY(-50%);opacity:1;transition:opacity .9s var(--ek-ease)}
.ek-hero__fallback svg{display:block;width:100%;height:auto}
.ek-hero.ek-3d-on .ek-hero__fallback{opacity:0}
.ek-hero__inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:120px 28px 110px}
.ek-hero__copy{max-width:620px}
.ek-tag{display:inline-block;padding:8px 18px;border-radius:999px;background:#fff;color:var(--ek-ink);font:600 15px/1 var(--ek-font-head);letter-spacing:.2px;box-shadow:var(--ek-shadow)}
.ek-tag::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ek-green);margin-right:9px;vertical-align:1px;box-shadow:0 0 0 4px rgba(109,190,75,.22)}
.ek-hero h1{margin:22px 0 18px;font:700 clamp(36px,5.2vw,70px)/1.06 var(--ek-font-head);color:var(--ek-ink);letter-spacing:-.5px}
.ek-hero h1 em{font-style:normal;color:var(--ek-orange);position:relative;white-space:nowrap}
.ek-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 15 1 30 7 T 60 7 T 90 7 T 118 6' fill='none' stroke='%23FBC531' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ek-hero p.ek-lead{margin:0 0 30px;max-width:520px;font:500 clamp(17px,1.5vw,20px)/1.65 var(--ek-font-body);color:var(--ek-ink-soft)}
.ek-btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ek-btn{display:inline-block;padding:15px 32px;border-radius:999px;font:600 18px/1.1 var(--ek-font-head);text-decoration:none;color:#fff;background:var(--ek-orange);box-shadow:0 7px 0 #c96f12;transition:transform .18s var(--ek-ease),box-shadow .18s var(--ek-ease)}
.ek-btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 #c96f12;color:#fff}
.ek-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #c96f12}
.ek-btn--blue{background:var(--ek-blue);box-shadow:0 7px 0 #2487b3}.ek-btn--blue:hover{box-shadow:0 10px 0 #2487b3}.ek-btn--blue:active{box-shadow:0 2px 0 #2487b3}
.ek-btn:focus-visible{outline:3px solid var(--ek-ink);outline-offset:3px}
.ek-hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}.ek-hero__wave svg{display:block;width:100%;height:70px}
.ek-hero__cue{position:absolute;left:50%;bottom:78px;z-index:2;transform:translateX(-50%);font:600 13px var(--ek-font-head);letter-spacing:2px;color:var(--ek-ink-soft);text-transform:uppercase;opacity:.8}

/* entry animation (JS-free, respects reduced motion) */
@keyframes ek-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ek-hero__copy>*{animation:ek-rise .8s var(--ek-ease) both}.ek-hero__copy>*:nth-child(2){animation-delay:.08s}.ek-hero__copy>*:nth-child(3){animation-delay:.16s}.ek-hero__copy>*:nth-child(4){animation-delay:.24s}
@media(prefers-reduced-motion:reduce){.ek-hero__copy>*{animation:none}.ek-btn{transition:none}.ek-hero__canvas,.ek-hero__fallback{transition:none}}

/* tablet */
@media(max-width:1024px){.ek-hero__inner{padding:110px 24px 100px}.ek-hero__copy{max-width:540px}}
/* phone: scene on top (its own stage), text below */
@media(max-width:767px),(max-width:1024px) and (orientation:portrait){
  .ek-hero{display:block;min-height:0;padding-bottom:70px}
  .ek-hero__stage{position:relative;inset:auto;height:min(72vw,340px);margin-top:56px}
  .ek-hero__fallback{right:50%;transform:translate(50%,-50%);width:min(92vw,420px)}
  .ek-hero__inner{padding:6px 20px 60px}
  .ek-hero h1{font-size:clamp(32px,9vw,42px);margin-top:16px}
  .ek-btns{gap:12px}.ek-btn{padding:14px 26px;font-size:17px}
  .ek-hero__cue{display:none}
}

.ek-hero a.ek-btn,.ek-hero a.ek-btn:hover,.ek-hero a.ek-btn:focus{text-decoration:none!important;color:#fff}