:root{
  --navy:#082D6B;
  --royal:#2563EB;
  --bright:#0B6FFF;
  --sky:#7DD3FC;
  --light:#F7FBFF;
  --pale:#EAF6FF;
  --line:#CFE5FF;
  --line-strong:#B9D8FF;
  --text:#0A2F6F;
  --muted:#6881A6;
  --shadow:0 16px 44px rgba(8,45,107,.08);
  --shadow-strong:0 28px 65px rgba(8,45,107,.14);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#F6FBFF;
  color:var(--text);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  line-height:1.7;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}

.shell{width:min(100% - 24px,1200px);margin:auto}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(207,229,255,.75);
}
.nav{
  min-height:76px;
  display:grid;
  grid-template-columns:52px 150px 1fr auto;
  align-items:center;
  gap:16px;
}
.brand-link{display:flex;align-items:center}
.nav-logo{width:132px;height:auto;object-fit:contain}
.menu-btn{
  width:42px;height:42px;border:none;background:#fff;border-radius:12px;
  display:grid;place-content:center;gap:5px;box-shadow:0 6px 18px rgba(8,45,107,.06)
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--navy);border-radius:99px}
.desktop-nav{display:none;gap:26px;justify-content:center}
.desktop-nav a{font-size:.95rem;color:#4A668F;font-weight:500}
.nav-cta,.primary-btn,.ghost-btn,.scroll-cta{
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;
}
.nav-cta,.primary-btn,.scroll-cta{
  background:linear-gradient(90deg,#0B6FFF,#2A63F3);
  color:#fff;
  box-shadow:0 14px 30px rgba(11,111,255,.18);
}
.nav-cta{padding:11px 18px;font-size:.9rem;white-space:nowrap}
.primary-btn{padding:15px 28px;font-size:1rem;white-space:nowrap}
.ghost-btn{
  padding:14px 20px;
  background:#fff;color:var(--navy);
  border:1px solid var(--line);
}
.scroll-cta{
  position:fixed;
  left:-2px;
  top:54%;
  z-index:80;
  padding:12px 16px 12px 18px;
  font-size:.88rem;
  opacity:0;
  pointer-events:none;
  transform:translate(-18px,-50%);
  transition:.25s ease;
  border-radius:0 999px 999px 0;
  box-shadow:0 14px 34px rgba(11,111,255,.22);
  max-width:170px;
  text-align:center;
}
.scroll-cta.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(0,-50%);
}

.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#F8FCFF 0%, #F1F8FF 100%);
  padding:24px 0 18px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 10%, rgba(125,211,252,.38), transparent 24%),
    radial-gradient(circle at 10% 80%, rgba(11,111,255,.08), transparent 26%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:180px;
  background:url("../images/wave-bg.svg") bottom center/cover no-repeat;
  opacity:.95;
  pointer-events:none;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:center;
}
.hero-copy{text-align:right}
.eyebrow{
  margin:0 0 8px;
  color:#1877E7;
  font-weight:700;
  font-size:.86rem;
}
.eyebrow.small{font-size:.82rem}
.hero h1,.section-head h2,.final-copy h2,.pricing-copy h2,.parent-copy h2{
  margin:0 0 10px;
  line-height:1.02;
  letter-spacing:-1px;
  color:var(--navy);
}
.hero h1{
  font-size:clamp(2.5rem,9vw,5rem);
}
.hero h1 span,
.section-head h2 span,
.parent-copy h2 span,
.final-copy h2 span{color:#1E6BFF}
.hero-lead{
  margin:0;
  color:#4E6E9A;
  font-size:1.06rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.hero-note{
  margin:10px 0 0;
  color:#738AAE;
  font-size:.78rem;
}
.hero-stage{
  position:relative;
  min-height:380px;
  direction:ltr;
}
.hero-worksheet{
  position:absolute;
  width:min(50vw,260px);
  left:2%;
  top:44px;
  transform:rotate(-6deg);
  filter:drop-shadow(0 20px 30px rgba(8,45,107,.14));
  z-index:1;
}
.hero-phone{
  position:absolute;
  width:min(56vw,330px);
  right:0;
  top:0;
  filter:drop-shadow(0 22px 36px rgba(8,45,107,.18));
  z-index:3;
}
.hero-arrow{
  position:absolute;
  left:46%;
  top:138px;
  font-size:58px;
  color:var(--bright);
  transform:rotate(-6deg);
  z-index:4;
  text-shadow:0 2px 0 rgba(255,255,255,.95);
  font-family:Arial,sans-serif;
}
.hero-pencil{
  position:absolute;
  width:16px;
  height:200px;
  left:0;
  top:165px;
  background:linear-gradient(90deg,#E79C1C,#FFD36B,#D98906);
  border-radius:4px;
  box-shadow:0 12px 20px rgba(8,45,107,.12);
  transform:rotate(-10deg);
  z-index:5;
}
.hero-pencil::before{
  content:"";
  position:absolute;
  top:-34px;
  left:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:34px solid #DFC19A;
}
.hero-pencil::after{
  content:"";
  position:absolute;
  bottom:-18px;
  left:0;
  width:16px;
  height:18px;
  background:#E46F67;
  border-radius:0 0 5px 5px;
}
.hero-bahrain{
  position:relative;
  z-index:1;
  margin-top:6px;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  align-items:end;
}
.hero-bahrain img{
  width:88px;height:74px;border-radius:16px;object-fit:cover;
  box-shadow:var(--shadow);
}
.hero-bahrain-copy strong{
  display:block;
  font-size:1rem;
  line-height:1.2;
}
.hero-bahrain-copy span{
  display:block;
  margin-top:4px;
  color:#2B72D8;
  font-size:.56rem;
  letter-spacing:1.2px;
}

.section{padding:58px 0}
.section-white{background:#fff}
.section-pale{background:linear-gradient(180deg,#F1F8FF 0%, #EAF6FF 100%)}
.section-head{margin-bottom:22px}
.section-head.center{text-align:center}
.section-head h2{
  font-size:clamp(2rem,5.4vw,3.5rem);
}
.section-head p{
  margin:0;
  color:var(--muted);
  font-size:1rem;
}

.cards{display:grid;gap:14px}
.three-cards{grid-template-columns:1fr}
.soft-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 16px;
  box-shadow:0 8px 24px rgba(8,45,107,.04);
}
.issue-card,.feature-card,.grade-card{text-align:center}
.issue-card img,.feature-card img,.grade-card img{
  width:54px;
  margin:0 auto 10px;
}
.issue-card h3,.feature-card h3,.grade-card h3,
.step-card h3,.mini-card h4,.value-card b{
  margin:0 0 6px;
}
.issue-card p,.feature-card p,.grade-card p,
.step-card p,.mini-card p,.value-card span{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

.steps-cards .step-card{position:relative;text-align:center}
.step-badge{
  position:absolute;top:12px;right:12px;
  width:30px;height:30px;border-radius:50%;
  background:var(--bright);color:#fff;
  display:grid;place-items:center;
  font-weight:700;
}
.step-visual{
  min-height:146px;
  border-radius:16px;
  border:1px solid #DAEBFF;
  background:#F7FBFF;
  display:flex;align-items:center;justify-content:center;
  margin:16px 0 12px;
  padding:12px;
}
.capture-visual .capture-frame{
  width:92px;height:92px;border-radius:14px;border:1px solid var(--line-strong);
  display:grid;place-items:center;background:#fff;
}
.capture-visual img{width:58px}
.select-visual{flex-direction:column;gap:10px}
.select-visual .line{
  width:100%;height:18px;border-radius:999px;background:#E7F0FF;
}
.selected-line{
  width:100%;
  min-height:46px;
  border:2px solid var(--bright);
  border-radius:12px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--navy);
  font-weight:700;
}
.frac{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  line-height:.9;
}
.frac b:first-child{
  border-bottom:1.6px solid var(--navy);
  padding-bottom:2px;
}
.frac b:last-child{padding-top:2px}
.explain-visual{flex-direction:column;gap:8px}
.explain-visual span{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 12px;
  color:#3E628F;
}

.learning-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:center;
}
.learning-copy .section-head p{margin-bottom:0}
.learning-photo{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  min-height:320px;
  box-shadow:var(--shadow);
}
.learning-photo img{
  width:100%;height:100%;object-fit:cover;
}
.handwriting{
  position:absolute;
  top:26px;right:22px;
  color:var(--bright);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.2;
  transform:rotate(-4deg);
}
.english-tag{
  position:absolute;
  top:96px;right:24px;
  color:#3772DA;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:1.25px;
}
.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.mini-card{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px 12px;text-align:center;
}
.mini-card img{width:42px;margin:0 auto 8px}
.mini-card h4{font-size:.92rem}
.mini-card p{font-size:.78rem;line-height:1.5}

.feature-cards{
  grid-template-columns:1fr 1fr;
}
.feature-card{padding:16px 14px}
.feature-card img{width:50px}

.parent-section{overflow:hidden}
.parent-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.parent-photo img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
}
.parent-copy{padding:22px 18px}
.parent-points{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.parent-points>div{
  display:flex;
  gap:10px;
  align-items:center;
  background:#F7FBFF;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}
.parent-points img{width:38px}
.parent-points b,.parent-points small{display:block}
.parent-points small{font-size:.78rem;color:var(--muted)}

.grade-cards .grade-card img{width:48px}
.grade-card h3{font-size:1.1rem}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-top:8px;
}
.chip-row span{
  background:#EFF5FF;
  color:#4F719A;
  border-radius:999px;
  font-size:.73rem;
  padding:5px 9px;
}

.pricing-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#EDF8FF 0%, #DFF1FF 100%);
}
.pricing-bg{
  position:absolute;
  inset:auto 0 0;
  height:240px;
  background:url("../images/wave-bg.svg") bottom center/cover no-repeat;
  opacity:.96;
  pointer-events:none;
}
.pricing-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:20px;
  align-items:start;
}
.value-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.value-card{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px 12px;text-align:center;
}
.value-card img{width:42px;margin:0 auto 8px}
.value-card b{display:block;font-size:.9rem}
.value-card span{display:block;font-size:.78rem}
.price-card{
  position:relative;
  background:#fff;
  border:2px solid #8FD0FF;
  border-radius:24px;
  padding:22px 18px 18px;
  box-shadow:var(--shadow-strong);
}
.trial-badge{
  position:absolute;
  top:-16px;
  right:18px;
  background:#BFF2D8;
  color:#0C825F;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
  padding:7px 12px;
}
.price-logo{
  width:128px;
  margin-bottom:8px;
}
.price-micro{
  margin:0;
  font-size:.8rem;
  color:#7A92B3;
}
.price-value{
  margin:16px 0 12px;
  font-size:4.3rem;
  line-height:.95;
  font-weight:700;
  color:var(--navy);
}
.price-value span{
  font-size:1.05rem;
  font-weight:600;
}
.price-list{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:8px;
}
.price-list li{
  position:relative;
  padding-right:20px;
  color:#315681;
  font-size:.92rem;
}
.price-list li::before{
  content:"✓";
  position:absolute;right:0;top:0;
  color:#13B67A;font-weight:700;
}
.full-btn{width:100%}

.faq-wrap{
  display:grid;grid-template-columns:1fr;gap:18px;
}
.faq-head{margin-bottom:0}
.faq-list{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:0 16px;
}
.faq-list details:last-child{border-bottom:none}
.faq-list summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:18px 28px 18px 0;
  font-size:1rem;
  font-weight:600;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{
  content:"+";
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  color:var(--bright);
  font-size:1.2rem;
  font-weight:700;
}
.faq-list details[open] summary::before{content:"−"}
.faq-list p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.75;
}

.final-section{padding-top:34px}
.final-card{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:center;
  background:linear-gradient(135deg,#ECF8FF 0%, #F9FCFF 100%);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow);
}
.final-photo img{
  width:100%;
  height:260px;
  object-fit:cover;
}
.final-copy{
  padding:22px 18px 24px;
}
.final-copy p{
  margin:0 0 16px;
  color:var(--muted);
}
.final-copy small{
  display:block;
  margin-top:10px;
  color:#738AAE;
  font-size:.8rem;
}
.final-side-tag{
  position:absolute;
  left:20px;
  bottom:18px;
  color:var(--bright);
  font-weight:700;
  line-height:1.35;
  transform:rotate(-4deg);
}

.site-footer{
  background:#fff;
  padding:26px 0 32px;
}
.footer-wrap{display:grid;gap:16px}
.footer-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.footer-logo{width:130px}
.footer-socials{display:flex;gap:8px}
.footer-socials a{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#EAF6FF;color:var(--bright);font-weight:700;
}
.footer-links{
  display:flex;flex-wrap:wrap;gap:12px;
  color:#6480A7;
  font-size:.82rem;
}
.footer-bottom{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:#7991B0;font-size:.76rem;
  border-top:1px solid #E4EFFA;padding-top:12px;
}

@media (max-width: 699px){
  .nav{grid-template-columns:42px 1fr auto;gap:10px}
  .desktop-nav{display:none!important}
  .brand-link{justify-content:center}
  .nav-logo{width:118px;margin:auto}
  .nav-cta{font-size:.8rem;padding:10px 13px}
  .hero-grid{gap:10px}
  .hero-stage{order:2;min-height:410px}
  .hero-copy{order:1}
  .hero-actions .ghost-btn{display:inline-flex}
  .hero h1{font-size:2.65rem}
  .hero-worksheet{width:44%;left:5%;top:84px}
  .hero-phone{width:54%;right:4%;top:8px}
  .hero-arrow{left:48%;top:182px;font-size:48px}
  .hero-pencil{left:2%;top:190px;height:220px}
  .hero-bahrain{margin-top:-12px}
  .scroll-cta{
    left:-2px;
    right:auto;
    top:58%;
    bottom:auto;
    justify-content:center;
    max-width:148px;
    padding:11px 13px 11px 15px;
    font-size:.8rem;
  }
  .hero-bahrain-bg{
    width:58%;
    height:170px;
    opacity:.52;
  }
  .hero-bahrain-hand{
    display:none;
  }
  .faq-wrap{gap:16px}
}

@media (min-width: 700px){
  .shell{width:min(100% - 40px,1200px)}
  .desktop-nav{display:flex}
  .hero{padding:44px 0 24px}
  .hero-grid{grid-template-columns:1fr 1.04fr;gap:34px}
  .hero-stage{min-height:510px}
  .hero-worksheet{width:320px;top:92px;left:10px}
  .hero-phone{width:360px;top:6px;right:10px}
  .hero-arrow{left:45%;top:182px;font-size:66px}
  .hero-pencil{left:4px;top:226px;height:260px}
  .hero-bahrain{grid-template-columns:130px 1fr;gap:16px}
  .hero-bahrain img{width:130px;height:94px}
  .three-cards{grid-template-columns:repeat(3,1fr)}
  .learning-wrap{grid-template-columns:.98fr 1.02fr;gap:26px}
  .feature-cards{grid-template-columns:repeat(3,1fr)}
  .parent-wrap{grid-template-columns:.95fr 1.05fr}
  .pricing-grid{grid-template-columns:.9fr .8fr;gap:26px}
  .faq-wrap{grid-template-columns:.75fr 1.25fr;align-items:start}
  .final-card{grid-template-columns:1fr 1fr}
  .final-photo{order:2}
  .final-copy{order:1}
}

@media (min-width: 980px){
  .site-header .nav{min-height:84px}
  .nav-logo{width:150px}
  .hero-grid{gap:54px}
  .hero-copy{padding-top:14px}
  .hero h1{font-size:5.1rem}
  .hero-lead{font-size:1.14rem;max-width:580px}
  .hero-stage{min-height:560px}
  .hero-worksheet{width:355px;left:12px;top:98px}
  .hero-phone{width:400px;right:0;top:2px}
  .hero-arrow{left:46%;top:198px;font-size:72px}
  .hero-pencil{height:282px;left:4px;top:240px}
  .hero-bahrain{margin-top:-8px}
  .section{padding:74px 0}
  .soft-card{padding:22px 18px}
  .mini-grid{grid-template-columns:repeat(3,1fr)}
  .value-grid{grid-template-columns:repeat(4,1fr)}
  .price-card{max-width:500px}
  .final-card{grid-template-columns:.95fr 1.05fr}
  .final-copy{padding:30px 30px 32px}
  .final-photo img{height:100%;min-height:320px}
}

@media (prefers-reduced-motion:no-preference){
  .scroll-cta,.nav-cta,.primary-btn,.ghost-btn{transition:transform .18s ease, box-shadow .18s ease, opacity .25s ease}
  .nav-cta:hover,.primary-btn:hover,.ghost-btn:hover,.scroll-cta:hover{
    transform:translateY(-1px);
  }
}


.hero-bahrain-bg{
  position:absolute;
  left:-2%;
  bottom:0;
  width:min(42%,520px);
  height:230px;
  background:
    linear-gradient(90deg,rgba(247,251,255,.08),rgba(247,251,255,.46) 55%,rgba(247,251,255,1)),
    linear-gradient(0deg,rgba(247,251,255,.06),rgba(247,251,255,.22)),
    url("../images/bahrain-skyline.png") center/cover no-repeat;
  opacity:.9;
  border-radius:0 36px 0 0;
  z-index:0;
  pointer-events:none;
}
.hero-bahrain-hand{
  position:absolute;
  left:8%;
  bottom:46px;
  z-index:2;
  color:#1467F2;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.2;
  transform:rotate(-5deg);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  pointer-events:none;
}
.social-placeholder{
  font-size:.72rem!important;
}
.page-hero{
  background:linear-gradient(180deg,#F5FAFF 0%,#EAF6FF 100%);
  padding:54px 0 42px;
  position:relative;
  overflow:hidden;
}
.page-hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:120px;
  background:url("../images/wave-bg.svg") bottom/cover no-repeat;
  opacity:.55;
}
.page-hero .shell{position:relative;z-index:1}
.page-hero h1{margin:0 0 10px;font-size:clamp(2.3rem,7vw,4rem);line-height:1.1}
.page-hero p{margin:0;color:var(--muted);max-width:720px}
.content-page{background:#fff;padding:48px 0 80px}
.prose{max-width:860px;margin:auto}
.prose h2{margin:30px 0 8px;font-size:1.55rem}
.prose h3{margin:22px 0 6px;font-size:1.15rem}
.prose p,.prose li{color:#526F95}
.prose ul{padding-right:20px}
.back-link{display:inline-flex;margin-top:24px;color:var(--bright);font-weight:700}
.social-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.social-page-card{border:1px solid var(--line);border-radius:18px;padding:20px;background:#F8FCFF}
.social-page-card strong{display:block;margin-bottom:5px}
.social-page-card small{color:var(--muted)}

.hero-bahrain{display:none!important}


/* FINAL V2 — approved cleanup */
.hero-bahrain-bg,
.hero-bahrain-hand,
.hero-pencil{
  display:none !important;
}

/* Keep the hero clean: only Wajibat wave language, worksheet, arrow and phone */
.hero{
  background:linear-gradient(180deg,#F8FCFF 0%,#F1F8FF 100%);
}
.hero-bg{
  background:
    radial-gradient(circle at 82% 8%, rgba(125,211,252,.28), transparent 24%),
    radial-gradient(circle at 12% 82%, rgba(11,111,255,.06), transparent 28%);
}

/* Grade cards: always compact, no subject chips */
.grade-cards{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px;
}
.grade-card{
  min-width:0;
  padding:16px 8px !important;
}
.grade-card img{
  width:42px !important;
}
.grade-card h3{
  font-size:.95rem;
  line-height:1.35;
  margin:0 !important;
}
.grade-note{
  margin-top:4px !important;
  font-size:.82rem !important;
  color:#7A90AE !important;
}

/* Final image tagline: inside the photo, high contrast */
.final-side-tag{
  color:#fff !important;
  text-shadow:0 2px 10px rgba(0,36,90,.55);
  background:rgba(5,45,105,.12);
  border-radius:12px;
  padding:6px 9px;
  backdrop-filter:blur(2px);
}

/* Social/footer sizing cleanup */
.footer-socials a{
  font-size:.78rem;
}

/* Mobile: keep both hero CTAs stacked; floating CTA is not needed because header CTA stays sticky */
@media (max-width:699px){
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:9px;
  }
  .hero-actions .primary-btn,
  .hero-actions .ghost-btn{
    width:100%;
    min-height:48px;
  }
  .hero-actions .ghost-btn{
    display:inline-flex !important;
  }
  .scroll-cta{
    display:none !important;
  }
  .grade-cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .grade-card{
    padding:14px 5px !important;
  }
  .grade-card img{
    width:38px !important;
    margin-bottom:7px !important;
  }
  .grade-card h3{
    font-size:.78rem;
  }
}

/* Desktop/tablet: side CTA remains useful after hero */
@media (min-width:700px){
  .scroll-cta{
    display:inline-flex;
  }
}

@media (max-width:699px){
  .hero-stage{min-height:355px !important}
  .hero-worksheet{top:54px !important;left:4% !important;width:45% !important}
  .hero-phone{top:0 !important;right:3% !important;width:56% !important}
  .hero-arrow{top:150px !important;left:46% !important}
}
@media (min-width:700px){
  .hero-stage{min-height:470px}
  .hero-worksheet{top:74px}
  .hero-phone{top:0}
}


/* ===== FINAL V3 — final CTA rebuilt as two structural blocks ===== */
.final-section{
  padding:36px 0 48px !important;
}

.final-composition{
  display:grid;
  grid-template-columns:1fr;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.final-media{
  position:relative;
  min-height:260px;
  overflow:hidden;
}

.final-media img{
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  display:block;
}

.final-media-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,43,96,.03) 20%,rgba(5,43,96,.58) 100%);
  pointer-events:none;
}

.final-image-tagline{
  position:absolute;
  right:22px;
  bottom:20px;
  color:#fff;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.3;
  text-shadow:0 2px 10px rgba(0,25,65,.65);
  z-index:2;
}

.final-content{
  padding:24px 22px 28px;
  background:linear-gradient(180deg,#fff 0%,#F7FBFF 100%);
}

.final-content h2{
  margin:0 0 10px;
  font-size:clamp(2rem,6vw,3.3rem);
  line-height:1.05;
  color:var(--navy);
}

.final-content h2 span{
  color:#1E6BFF;
}

.final-content p{
  margin:0 0 16px;
  color:var(--muted);
}

.final-content small{
  display:block;
  margin-top:10px;
  color:#738AAE;
  font-size:.8rem;
}

/* disable all obsolete old final CTA positioning */
.final-card,
.final-photo,
.final-copy,
.final-side-tag{
  all:unset;
}

/* Social icons are actual visual logos now */
.footer-socials{
  display:flex;
  gap:9px;
  align-items:center;
}

.footer-socials a{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#EEF7FF;
  overflow:hidden;
  transition:transform .15s ease;
}

.footer-socials a:hover{
  transform:translateY(-1px);
}

.footer-socials img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.footer-whatsapp{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  color:#147A56!important;
  font-weight:700;
}

.footer-whatsapp img{
  width:20px;
  height:20px;
}

@media (min-width:700px){
  .final-composition{
    grid-template-columns:1.05fr .95fr;
    min-height:320px;
  }
  .final-media{
    min-height:320px;
    order:2;
  }
  .final-media img{
    min-height:320px;
  }
  .final-content{
    order:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px 34px 38px;
  }
  .final-image-tagline{
    right:26px;
    bottom:24px;
    font-size:1.25rem;
  }
}

@media (max-width:699px){
  .final-section{
    padding-top:30px!important;
  }
  .final-composition{
    border-radius:22px;
  }
  .final-media,
  .final-media img{
    min-height:220px;
  }
  .final-content{
    padding:22px 18px 24px;
  }
  .final-image-tagline{
    right:16px;
    bottom:15px;
    font-size:1rem;
  }
}


/* ===== FINAL V4 — handwriting accents only inside images ===== */
.handwriting,
.final-image-tagline{
  font-family:"Aref Ruqaa Ink","IBM Plex Sans Arabic",system-ui,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.handwriting{
  color:#FFFFFF !important;
  font-size:1.85rem !important;
  line-height:1.15 !important;
  transform:rotate(-5deg) !important;
  text-shadow:0 2px 12px rgba(0,25,65,.55), 0 1px 0 rgba(255,255,255,.06);
}

.final-image-tagline{
  color:#FFFFFF !important;
  font-size:1.45rem !important;
  line-height:1.22 !important;
  transform:rotate(-4deg);
  text-shadow:0 2px 12px rgba(0,25,65,.62), 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width:699px){
  .handwriting{
    font-size:1.5rem !important;
    right:16px !important;
    top:18px !important;
  }
  .final-image-tagline{
    font-size:1.18rem !important;
    right:16px !important;
    bottom:15px !important;
  }
}

@media (min-width:700px){
  .handwriting{
    font-size:2rem !important;
  }
  .final-image-tagline{
    font-size:1.55rem !important;
  }
}


/* ===== FINAL V6 — locked image handwriting + navy outline social icons ===== */

/* New class names are intentional to avoid stale CSS from previous deploys. */
.image-handwrite{
  position:absolute;
  z-index:4;
  font-family:"Aref Ruqaa Ink","IBM Plex Sans Arabic",system-ui,sans-serif !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  line-height:1.16 !important;
  direction:rtl;
  text-align:right;
  pointer-events:none;
}

.image-handwrite-student{
  top:22px;
  right:20px;
  font-size:1.9rem;
  transform:rotate(-5deg);
  text-shadow:0 2px 12px rgba(0,31,78,.62);
}

.image-handwrite-final{
  right:20px;
  bottom:18px;
  font-size:1.48rem;
  transform:rotate(-4deg);
  text-shadow:0 2px 12px rgba(0,25,65,.68);
}

/* Retire previous handwriting classes entirely. */
.handwriting,
.final-image-tagline{
  display:none !important;
}

/* Social media treatment: monochrome Wajibat dark navy outline only. */
.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-socials a{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible;
}

.footer-socials a img{
  width:34px !important;
  height:34px !important;
  object-fit:contain;
}

.footer-socials a:hover{
  transform:translateY(-1px);
}

/* WhatsApp remains its native green brand icon. */
.footer-whatsapp img{
  width:21px !important;
  height:21px !important;
}

@media (max-width:699px){
  .image-handwrite-student{
    top:18px;
    right:16px;
    font-size:1.58rem;
  }
  .image-handwrite-final{
    right:16px;
    bottom:15px;
    font-size:1.22rem;
  }
  .footer-socials{
    gap:8px;
  }
  .footer-socials a{
    width:38px;
    height:38px;
  }
  .footer-socials a img{
    width:32px !important;
    height:32px !important;
  }
}

@media (min-width:700px){
  .image-handwrite-student{
    font-size:2rem;
  }
  .image-handwrite-final{
    font-size:1.58rem;
  }
}


/* ===== FINAL V7 — deterministic handwriting rendering =====
   The handwriting itself is inline SVG with hard-coded WHITE fill.
   CSS does NOT control its color.
*/
.image-handwrite,
.image-handwrite-student,
.image-handwrite-final,
.handwriting,
.final-image-tagline{
  display:none !important;
}

.handwrite-svg{
  position:absolute;
  z-index:7;
  pointer-events:none;
  overflow:visible;
  filter:drop-shadow(0 3px 7px rgba(0,25,65,.60));
}

.handwrite-student-svg{
  width:245px;
  height:auto;
  top:18px;
  right:18px;
  transform:rotate(-5deg);
}

.handwrite-final-svg{
  width:260px;
  height:auto;
  right:16px;
  bottom:14px;
  transform:rotate(-4deg);
}

@media (max-width:699px){
  .handwrite-student-svg{
    width:205px;
    top:14px;
    right:12px;
  }
  .handwrite-final-svg{
    width:215px;
    right:12px;
    bottom:10px;
  }
}

@media (min-width:700px){
  .handwrite-student-svg{ width:255px; }
  .handwrite-final-svg{ width:275px; }
}


/* ===== FINAL V8 — handwriting is baked into the image pixels ===== */

/* There are no HTML/CSS handwriting overlays in V8. */
.handwrite-svg,
.image-handwrite,
.image-handwrite-student,
.image-handwrite-final,
.handwriting,
.final-image-tagline{
  display:none !important;
}

/* Preserve the top-right handwritten message inside the student photo. */
.learning-photo img{
  object-position:center top !important;
}

/* Keep the English secondary line below the baked handwritten message. */
.english-tag{
  top:150px !important;
  right:24px !important;
}

/* Final image is a prepared 16:9 asset: show the entire image, no cropping. */
.final-media{
  min-height:0 !important;
  height:auto !important;
}

.final-media img{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  display:block !important;
}

/* Social icons remain monochrome Wajibat dark navy outline.
   WhatsApp remains its native green brand color. */


/* ===== FINAL LOCKED BUILD ===== */

/* The handwriting is part of the image files themselves.
   No extra text overlay is rendered in HTML/CSS. */
.handwrite-svg,
.image-handwrite,
.image-handwrite-student,
.image-handwrite-final,
.handwriting,
.final-image-tagline{
  display:none !important;
}

/* Student photo */
.learning-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Bahrain final CTA photo */
.final-media{
  min-height:0 !important;
  height:auto !important;
}
.final-media img{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

/* Social icons stay Wajibat dark-navy outline.
   WhatsApp remains green. */
.footer-socials a{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.footer-socials a img{
  width:34px !important;
  height:34px !important;
  object-fit:contain !important;
}
.footer-whatsapp img{
  width:21px !important;
  height:21px !important;
}