/* ═══════════════════════════════════════════════════
   HE & MO للغات — Main Stylesheet
   ═══════════════════════════════════════════════════ */

/* ── Reset & direction ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  direction:rtl;text-align:right;
  font-family:'Cairo',system-ui,sans-serif;
  background:#fff;color:#111827;line-height:1.65;overflow-x:hidden;
}

/* ── Design tokens ── */
:root{
  --b1:#0B3A82;
  --b2:#1E5AA8;
  --bl:#EAF2FF;
  --bl2:#DBEAFE;
  --bbd:rgba(11,58,130,.12);
  --wh:#ffffff;
  --dk:#111827;
  --gr:#6B7280;
  --gl:#F9FAFB;
  --sh:0 4px 24px rgba(11,58,130,.1);
  --sh2:0 2px 8px rgba(11,58,130,.07);
  --sh3:0 16px 48px rgba(11,58,130,.18);
  --r:16px;--rs:10px;
}

/* ── Utilities ── */
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.tc{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:'Cairo',sans-serif;font-weight:800;border:none;cursor:pointer;
  text-decoration:none;border-radius:100px;transition:all .22s;white-space:nowrap;
}
.btn-p{
  background:var(--b1);color:#fff;padding:.85rem 2rem;font-size:1rem;
  box-shadow:0 4px 18px rgba(11,58,130,.32);
}
.btn-p:hover{background:var(--b2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(11,58,130,.38)}
.btn-p:active{transform:translateY(0)}
.btn-o{
  background:transparent;color:var(--b1);border:2px solid var(--b1);
  padding:.78rem 1.75rem;font-size:.95rem;
}
.btn-o:hover{background:var(--b1);color:#fff}
.btn-lg{font-size:1.1rem;padding:1rem 2.25rem}
.btn-full{width:100%;border-radius:var(--rs)}

/* ── Section label / heading ── */
.lbl{
  display:inline-block;background:var(--bl);color:var(--b1);
  font-size:.73rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .9rem;border-radius:100px;margin-bottom:.9rem;
}
.stitle{
  font-size:clamp(1.55rem,4vw,2.3rem);font-weight:900;color:var(--dk);
  line-height:1.2;margin-bottom:.7rem;text-wrap:balance;
}
.ssub{font-size:.97rem;color:var(--gr);max-width:580px;margin:0 auto;line-height:1.65}

/* ── Scroll reveal ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.05s}.rv-d2{transition-delay:.1s}.rv-d3{transition-delay:.15s}.rv-d4{transition-delay:.2s}

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
.hd{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bbd);padding:.85rem 0;
}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-size:1.35rem;font-weight:900;color:var(--b1);letter-spacing:-.015em}
.logo em{color:var(--b2);font-style:normal}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.hero{
  background:linear-gradient(145deg,#EAF2FF 0%,#F0F7FF 45%,#fff 100%);
  padding:4.5rem 0 3.5rem;text-align:center;position:relative;overflow:hidden;
  min-height:540px;
}
.hero::before{
  content:'';position:absolute;top:-120px;right:-120px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(11,58,130,.06),transparent 68%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,90,168,.07),transparent 68%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2}

/* ══════════════════════════════════════════════════
   HERO — Student images
   ──────────────────────────────────────────────────
   RIGHT  : older students (Glenn, 2048×2048, white bg)
            → mix-blend-mode:multiply removes the white
            → subjects float cleanly against the gradient
   LEFT   : children (Avaye, 3376×1440 — subjects fill
            the RIGHT ~58 % of the image; left half is blank)
            → a clipping wrapper anchors the img by its
              right edge so only the children are visible
            → mix-blend-mode:multiply on the wrapper
              blends the whole group with the hero bg
   ══════════════════════════════════════════════════ */

/* ── RIGHT: older students — LARGE, main visual ── */
.hero-img-right{
  position:absolute;bottom:0;right:-10px;
  height:97%;width:auto;max-width:520px;
  object-fit:contain;object-position:bottom right;
  mix-blend-mode:multiply;
  z-index:1;pointer-events:none;user-select:none;
}

/* ── LEFT: children — wrapper + inner img ── */
.hero-children-wrap{
  position:absolute;left:0;bottom:0;
  width:460px;height:66%;
  overflow:hidden;
  mix-blend-mode:multiply;          /* blend whole group with hero bg */
  z-index:1;pointer-events:none;
}
.hero-children-img{
  position:absolute;right:0;bottom:0; /* anchor children (right of image) to left edge of hero */
  height:100%;width:auto;
  display:block;
}

/* ── Tablet 900 – 1100 px ── */
@media(max-width:1100px){
  .hero-img-right{max-width:400px}
  .hero-children-wrap{width:340px;height:58%}
}

/* ══════════════════════════════════════════════════
   MOBILE ≤ 767 px — student PNG images are hidden;
   replaced by the language-card visual below.
   Desktop positioning remains completely untouched.
   ══════════════════════════════════════════════════ */
@media(max-width:767px){
  .hero-imgs{display:none}        /* hide both student images on mobile */
}

/* ─────────────────────────────────────────────────
   MOBILE LANGUAGE VISUAL
   4 floating cards · 2 × 2 grid · premium / modern
   ───────────────────────────────────────────────── */

/* Float keyframe (globally defined, hardware-accelerated) */
@keyframes mlv-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* Hidden on desktop by default */
.mobile-lang-vis{display:none}

@media(max-width:767px){
  .mobile-lang-vis{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem;
    padding:1.35rem 1.4rem .85rem;
    max-width:340px;
    margin:0 auto;
  }

  /* Card shell */
  .mlv-card{
    background:#fff;
    border-radius:14px;
    border:1.5px solid rgba(11,58,130,.09);
    border-top:3px solid var(--b1);
    padding:1.05rem .75rem .9rem;
    text-align:center;
    box-shadow:0 6px 24px rgba(11,58,130,.11),0 1px 4px rgba(11,58,130,.06);
  }

  /* Staggered float — each card slightly out of phase */
  .mlv-card:nth-child(1){animation:mlv-float 4.8s ease-in-out 0s    infinite}
  .mlv-card:nth-child(2){animation:mlv-float 4.8s ease-in-out  .9s  infinite}
  .mlv-card:nth-child(3){animation:mlv-float 4.8s ease-in-out 1.8s  infinite}
  .mlv-card:nth-child(4){animation:mlv-float 4.8s ease-in-out 2.7s  infinite}

  /* Card content */
  .mlv-flag{
    display:block;
    font-size:1.9rem;
    line-height:1;
    margin-bottom:.5rem;
  }
  .mlv-word{
    display:block;
    font-family:'Cairo',sans-serif;
    font-size:1.08rem;
    font-weight:800;
    color:var(--b1);
    letter-spacing:.01em;
    margin-bottom:.18rem;
  }
  .mlv-lang{
    display:block;
    font-family:'Cairo',sans-serif;
    font-size:.7rem;
    font-weight:600;
    color:var(--gr);
    letter-spacing:.025em;
  }

  /* Respect user motion preference */
  @media(prefers-reduced-motion:reduce){
    .mlv-card{animation:none!important}
  }
}
.hero-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--b1);color:#fff;
  font-size:.8rem;font-weight:700;padding:.35rem 1.1rem;border-radius:100px;
  margin-bottom:1.5rem;
}
.pulse{
  width:8px;height:8px;background:#4ade80;border-radius:50%;flex-shrink:0;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.5)}}
.hero h1{
  font-size:clamp(2rem,5.5vw,3.4rem);font-weight:900;color:var(--dk);
  line-height:1.12;margin-bottom:1.1rem;text-wrap:balance;
}
.hero h1 span{color:var(--b1)}
.hero-sub{font-size:1.05rem;color:var(--gr);max-width:520px;margin:0 auto 2.25rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:2.25rem}
.hero-bar{
  display:inline-flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--r);box-shadow:var(--sh);
  padding:1.1rem 1.5rem;max-width:640px;margin:0 auto;
}
.hchip{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--dk)}
.hchip .ci{color:var(--b1);font-size:1rem}
.hchip .red-pill{
  background:#FEF2F2;color:#DC2626;border:1px solid #FECACA;
  font-size:.66rem;font-weight:800;padding:.12rem .5rem;border-radius:100px;
}
.hdiv{width:1px;height:24px;background:var(--bbd)}

/* ════════════════════════════════════
   LANGUAGES
════════════════════════════════════ */
.langs{padding:5rem 0;background:#fff}
.lang-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;margin-top:2.5rem;
}
.lcard{
  background:#fff;border:1.5px solid var(--bbd);border-radius:var(--r);
  padding:2rem 1.5rem;text-align:center;cursor:pointer;
  transition:all .24s;position:relative;overflow:hidden;
}
.lcard::after{
  content:'';position:absolute;inset:0;background:var(--bl);
  opacity:0;transition:opacity .24s;pointer-events:none;
}
.lcard:hover{border-color:var(--b1);box-shadow:var(--sh);transform:translateY(-5px)}
.lcard:hover::after{opacity:1}
.lcard > *{position:relative;z-index:1}
.lflag{font-size:3.2rem;display:block;margin-bottom:.9rem;line-height:1}
.lname{font-size:1.2rem;font-weight:800;color:var(--dk);margin-bottom:.45rem}
.ldesc{font-size:.83rem;color:var(--gr);line-height:1.55}
.lcard-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  margin-top:1.1rem;font-size:.8rem;font-weight:700;color:var(--b1);
  background:var(--bl);padding:.35rem .85rem;border-radius:100px;
  transition:all .2s;
}
.lcard:hover .lcard-btn{background:var(--b1);color:#fff}

/* ════════════════════════════════════
   OFFER SECTION
════════════════════════════════════ */
.offer{
  padding:5rem 0;
  background:linear-gradient(145deg,var(--b1) 0%,var(--b2) 100%);
  position:relative;overflow:hidden;
}
.offer::before{
  content:'';position:absolute;top:-150px;left:-100px;
  width:600px;height:600px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none;
}
.offer::after{
  content:'';position:absolute;bottom:-100px;right:-80px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.03);pointer-events:none;
}
.offer .lbl{background:rgba(255,255,255,.15);color:#fff}
.offer .stitle{color:#fff}
.offer .ssub{color:rgba(255,255,255,.78)}
.ocard{
  background:#fff;border-radius:var(--r);padding:2.5rem;
  box-shadow:0 24px 60px rgba(0,0,0,.22);max-width:620px;margin:2.5rem auto 0;
  position:relative;z-index:1;
}
.ocard-head{font-size:1.15rem;font-weight:800;color:var(--dk);margin-bottom:1.5rem}
.olist{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.5rem}
.olist li{display:flex;align-items:flex-start;gap:.75rem;font-size:.97rem;font-weight:600;color:var(--dk);line-height:1.5}
.ck{
  width:22px;height:22px;background:var(--b1);border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;margin-top:.1rem;
}
.ck-gift{background:linear-gradient(135deg,#7C3AED,#4F46E5)}
.odivider{border:none;border-top:1px solid rgba(11,58,130,.1);margin:1.25rem 0}
.ourg{
  background:#FEF2F2;border:1.5px solid #FECACA;border-radius:var(--rs);
  padding:.9rem 1.1rem;text-align:center;margin-bottom:1.5rem;
  font-size:.88rem;font-weight:700;color:#DC2626;
}
.ourg strong{color:#7f1d1d}

/* ════════════════════════════════════
   WHY US
════════════════════════════════════ */
.why{padding:5rem 0;background:var(--gl)}
.why-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.15rem;margin-top:2.5rem;
}
.wcard{
  background:#fff;border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--sh2);border:1px solid rgba(11,58,130,.06);
  transition:all .24s;
}
.wcard:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.wico{
  width:46px;height:46px;background:var(--bl);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.9rem;
}
.wtitle{font-size:.97rem;font-weight:800;color:var(--dk);margin-bottom:.3rem}
.wdesc{font-size:.82rem;color:var(--gr);line-height:1.55}

/* ════════════════════════════════════
   STEPS
════════════════════════════════════ */
.steps{padding:5rem 0;background:#fff}
.steps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2rem;margin-top:3rem;position:relative;
}
/* connector line desktop only */
@media(min-width:700px){
  .steps-grid::before{
    content:'';position:absolute;top:2.2rem;right:calc(33.33% + 1rem);left:calc(33.33% + 1rem);
    height:2px;background:linear-gradient(90deg,var(--b1),var(--b2));opacity:.15;
    pointer-events:none;
  }
}
.scard{text-align:center}
.snum{
  width:56px;height:56px;background:linear-gradient(135deg,var(--b1),var(--b2));border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;
  font-size:1.3rem;font-weight:900;color:#fff;
  box-shadow:0 8px 24px rgba(11,58,130,.28);
}
.stit{font-size:1.05rem;font-weight:800;color:var(--dk);margin-bottom:.4rem}
.sdsc{font-size:.85rem;color:var(--gr);line-height:1.6}

/* ════════════════════════════════════
   FINAL CTA
════════════════════════════════════ */
.fcta{
  padding:5rem 0;
  background:linear-gradient(145deg,var(--bl) 0%,var(--bl2) 100%);
  text-align:center;
}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
.foot{
  background:var(--dk);color:rgba(255,255,255,.45);
  text-align:center;padding:1.5rem;font-size:.78rem;
}
.foot strong{color:rgba(255,255,255,.75)}

/* ════════════════════════════════════
   MODAL
════════════════════════════════════ */
.ov{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .28s;
}
.ov.open{opacity:1;pointer-events:all}
.modal{
  background:#fff;border-radius:20px 20px 0 0;padding:2rem 1.5rem 2.5rem;
  width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
}
@media(min-width:600px){
  .ov{align-items:center}
  .modal{border-radius:20px;transform:translateY(20px) scale(.97)}
  .ov.open .modal{transform:translateY(0) scale(1)}
}
.ov.open .modal{transform:translateY(0)}
.mhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.mtitle{font-size:1.15rem;font-weight:900;color:var(--dk)}
.mclose{background:none;border:none;font-size:1.3rem;color:var(--gr);cursor:pointer;padding:.2rem .4rem;border-radius:6px;transition:background .15s}
.mclose:hover{background:#f3f4f6}
.fg{margin-bottom:1.1rem}
.fl{display:block;font-size:.82rem;font-weight:700;color:var(--dk);margin-bottom:.45rem}
.fi,.fs{
  width:100%;padding:.8rem 1rem;border:1.5px solid #E5E7EB;border-radius:var(--rs);
  font-family:'Cairo',sans-serif;font-size:.92rem;color:var(--dk);
  background:#fff;transition:border-color .18s;direction:rtl;
}
.fi:focus,.fs:focus{outline:none;border-color:var(--b1);box-shadow:0 0 0 3px rgba(11,58,130,.1)}
.fi::placeholder{color:#9CA3AF}
.fnote{font-size:.75rem;color:var(--gr);text-align:center;margin-top:.9rem;line-height:1.5}
.succ{text-align:center;padding:2rem 0}
.succ .big{font-size:4rem;margin-bottom:1rem;line-height:1}
.succ h3{font-size:1.25rem;font-weight:800;color:var(--dk);margin-bottom:.5rem}
.succ p{font-size:.88rem;color:var(--gr)}

/* ════════════════════════════════════
   STICKY BAR (mobile)
════════════════════════════════════ */
.stbar{
  position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:#fff;
  padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -2px 20px rgba(11,58,130,.14);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.stbar.show{transform:translateY(0)}
.stbar-cta{
  display:block;width:100%;
  background:var(--b1);color:#fff;border:none;cursor:pointer;
  font-family:'Cairo',sans-serif;font-weight:800;font-size:1rem;
  padding:.9rem 1.5rem;border-radius:100px;
  box-shadow:0 4px 18px rgba(11,58,130,.32);
  transition:background .2s,transform .15s;
}
.stbar-cta:hover{background:var(--b2)}
.stbar-cta:active{transform:scale(.98)}
@media(min-width:768px){.stbar{display:none!important}}

/* Bottom page padding so sticky button never covers content */
@media(max-width:767px){.foot{padding-bottom:calc(1.5rem + 5rem)}}

/* ── Mobile section spacing ──
   Desktop: 5 rem per section is spacious and premium.
   Mobile: reduce to ~3 rem so the page feels compact, not airy. */
@media(max-width:767px){
  .hero{padding:2.75rem 0 0;min-height:auto}
  .vid-sec{padding:2.5rem 0}
  .langs,.offer,.why,.ages,.teachers,.steps,.reviews,.fcta{padding:3.25rem 0}
  .steps-grid{margin-top:2rem}
  .why-grid,.lang-grid,.rev-grid{margin-top:1.75rem}
  .vid-wrap{margin-top:1.25rem}
}

/* ════════════════════════════════════
   FAQ ACCORDION
════════════════════════════════════ */
.faq{padding:4.5rem 0;background:var(--gl)}
.faq-list{margin-top:2rem;display:flex;flex-direction:column;gap:.45rem}
.faq-item{
  background:#fff;border-radius:var(--rs);
  border:1.5px solid var(--bbd);overflow:hidden;
  transition:border-color .2s;
}
.faq-item.open{border-color:var(--b1)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;
  font-family:'Cairo',sans-serif;font-size:.95rem;font-weight:700;color:var(--dk);
  background:none;border:none;cursor:pointer;text-align:right;
  transition:background .18s,color .18s;
}
.faq-q:hover{background:var(--bl)}
.faq-item.open .faq-q{color:var(--b1)}
.faq-icon{
  font-size:1.3rem;font-weight:400;color:var(--b1);
  flex-shrink:0;line-height:1;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{
  padding:.15rem 1.25rem 1.15rem;
  font-size:.88rem;color:var(--gr);line-height:1.72;
}
.faq-item.open .faq-a{max-height:200px}
@media(max-width:767px){.faq{padding:3.25rem 0}}

/* ════════════════════════════════════
   VIDEO SECTION
════════════════════════════════════ */
.vid-sec{padding:4rem 0;background:var(--gl)}
.vid-wrap{
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh3);background:#000;
  max-width:980px;margin:2.25rem auto 0;
  position:relative;
}
.vid-wrap video{
  width:100%;height:auto;display:block;
}

/* Mobile: edge-to-edge, no horizontal padding */
@media(max-width:767px){
  .vid-sec .wrap{padding-left:0;padding-right:0}
  .vid-wrap{border-radius:0;margin-top:1.75rem;box-shadow:none}
}

/* ════════════════════════════════════
   REVIEWS / TESTIMONIALS
════════════════════════════════════ */
.reviews{padding:5rem 0;background:#fff}
.rev-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;margin-top:2.5rem;
}
.rcard{
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh2);border:1.5px solid var(--bbd);
  transition:all .24s;cursor:pointer;background:#fff;
}
.rcard:hover{box-shadow:var(--sh);transform:translateY(-4px)}
.rcard img{width:100%;height:auto;display:block}
.rev-trust{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1.75rem;font-size:.82rem;font-weight:700;color:var(--gr);
  background:var(--gl);border-radius:100px;padding:.55rem 1.25rem;
  width:fit-content;margin-left:auto;margin-right:auto;
}
@media(max-width:600px){
  .rev-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════
   TEACHERS SECTION
════════════════════════════════════ */
.teachers{padding:5rem 0;background:#fff}
.teachers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,360px));
  gap:2rem;margin-top:2.75rem;
  justify-content:center;
}
.tcard{
  background:#fff;border-radius:var(--r);
  padding:2.5rem 2rem 2rem;text-align:center;
  box-shadow:var(--sh2);border:1.5px solid var(--bbd);
  transition:all .24s;
}
.tcard:hover{box-shadow:var(--sh);transform:translateY(-4px)}
.tcard-img{
  width:160px;height:160px;border-radius:50%;
  object-fit:cover;object-position:center top;
  margin:0 auto 1.4rem;display:block;
  border:4px solid var(--bl2);
  box-shadow:0 10px 32px rgba(11,58,130,.18);
}
.tcard-lang{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--bl);color:var(--b1);
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  padding:.28rem .85rem;border-radius:100px;
  margin-bottom:.85rem;
}
.tcard-name{
  font-size:1.1rem;font-weight:900;color:var(--dk);
  margin-bottom:.4rem;letter-spacing:-.01em;
}
.tcard-desc{
  font-size:.84rem;color:var(--gr);line-height:1.65;
}
@media(max-width:600px){
  .teachers-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .tcard-img{width:150px;height:150px}
}

/* ════════════════════════════════════════════════════
   INLINE REGISTRATION SECTION — mobile only
   Shown below the video. Hidden on desktop.
   Reuses existing form classes: .fg .fl .fi .fs
   .fnote .succ .big .btn .btn-p .btn-full .btn-lg
════════════════════════════════════════════════════ */
.ireg{display:none}

@media(max-width:767px){
  .ireg{
    display:block;
    padding:3rem 0 3.25rem;
    background:var(--gl);
  }
  .ireg-box{
    background:#fff;
    border-radius:20px;
    padding:2rem 1.5rem 2.5rem;
    box-shadow:var(--sh3);
    max-width:480px;
    margin:0 auto;
  }
  .ireg-hd{
    margin-bottom:1.75rem;
    text-align:center;
  }
  .ireg-title{
    font-size:1.15rem;
    font-weight:900;
    color:var(--dk);
    margin-bottom:.55rem;
  }
  .ireg-sub{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    flex-wrap:wrap;
    font-size:.82rem;
    color:var(--gr);
  }
}

/* ════════════════════════════════════════════════════
   AGE CATEGORIES SECTION
════════════════════════════════════════════════════ */
.ages{padding:5rem 0;background:var(--gl)}
.ages-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  margin-top:2.75rem;
  max-width:840px;
  margin-left:auto;
  margin-right:auto;
}

/* ── Card shell ── */
.age-card{
  background:#fff;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh2);
  border:1.5px solid var(--bbd);
  transition:all .24s;
  display:flex;
  flex-direction:column;
}
.age-card:hover{transform:translateY(-6px);box-shadow:var(--sh3)}

/* ── Top image zone ── */
.age-img-wrap{
  background:linear-gradient(155deg,#EAF2FF 0%,#DBEAFE 100%);
  height:240px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.age-img{
  height:100%;
  width:auto;
  max-width:115%;           /* let wide images breathe a little */
  object-fit:contain;
  object-position:bottom center;
  mix-blend-mode:multiply;  /* removes the white background */
  display:block;
}

/* ── Card body ── */
.age-body{
  padding:1.75rem 1.5rem 2rem;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ── Icon circle ── */
.age-icon-wrap{
  width:56px;height:56px;
  background:var(--bl);
  border:2px solid var(--bl2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
  flex-shrink:0;
}
.age-icon-wrap svg{
  width:27px;height:27px;
  stroke:var(--b1);
}

/* ── Labels ── */
.age-label{
  font-size:1.25rem;
  font-weight:900;
  color:var(--dk);
  margin-bottom:.5rem;
}
.age-range{
  display:inline-block;
  background:var(--bl);
  color:var(--b1);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.25rem .95rem;
  border-radius:100px;
  margin-bottom:1.1rem;
}
.age-desc{
  font-size:.88rem;
  color:var(--gr);
  line-height:1.72;
  margin-bottom:1.6rem;
  flex:1;
}
.age-btn{width:100%}

/* ── Responsive ── */
@media(max-width:640px){
  .ages-grid{gap:1rem}
  .age-img-wrap{height:170px}
  .age-body{padding:1.25rem 1rem 1.5rem}
  .age-label{font-size:1.05rem}
  .age-icon-wrap{width:48px;height:48px}
  .age-icon-wrap svg{width:23px;height:23px}
  .age-desc{font-size:.83rem}
}
@media(max-width:380px){
  .ages-grid{grid-template-columns:1fr;max-width:340px}
  .age-img-wrap{height:220px}
}