@font-face { font-family:"Montserrat"; src:url("/assets/fonts/montserrat-500.woff2") format("woff2"); font-weight:400 500; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Montserrat"; src:url("/assets/fonts/montserrat-700.woff2") format("woff2"); font-weight:600 700; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:"Plex Arabic"; src:url("/assets/fonts/plex-arabic-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Arabic"; src:url("/assets/fonts/plex-arabic-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex Arabic"; src:url("/assets/fonts/plex-arabic-700.woff2") format("woff2"); font-weight:600 700; font-display:swap; }

:root {
  color-scheme: light;
  --navy:#0f172a; --blue:#3b82f6; --mist:#e2e8f0; --white:#ffffff;
  --bg:#f8fafc; --ink:#0f172a; --muted:#526075;
  --on-navy:#ffffff; --on-navy-soft:#b8c4d6; --line-navy:rgba(226,232,240,.18);
  /* Each program page overrides these through its body style. */
  --hero:#0f172a; --accent:#3b82f6; --action:#2563eb; --action-hover:#1d4ed8; --tint:#eaf1fe;
  --sans:"Montserrat","Plex Arabic","Segoe UI",Tahoma,sans-serif;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:80px;
  --r-card:14px; --r-small:10px; --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
  --wrap:1200px; --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.75 var(--sans); }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,p,ul,ol,figure { margin:0; padding:0; }
ul,ol { list-style:none; }
h1,h2,h3 { line-height:1.28; font-weight:700; text-wrap:balance; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip { position:absolute; inset-inline-start:var(--s3); top:-80px; z-index:100; background:var(--white); color:var(--ink); padding:var(--s2) var(--s3); border-radius:var(--r-small); }
.skip:focus { top:var(--s2); }
.ltr { direction:ltr; unicode-bidi:isolate; }
.nowrap { white-space:nowrap; }

/* Header */
.site-head { position:sticky; top:0; z-index:40; background:var(--navy); color:var(--on-navy); border-bottom:1px solid var(--line-navy); }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:68px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; direction:ltr; font-weight:700; font-size:22px; letter-spacing:-.02em; min-height:44px; }
.logo svg { width:38px; height:30px; flex:none; }
.logo b { font-weight:700; color:var(--blue); }
.nav-links { display:flex; align-items:center; gap:var(--s1); }
.nav-links a { display:flex; align-items:center; min-height:44px; padding-inline:14px; text-decoration:none; font-size:15.5px; font-weight:500; color:var(--on-navy-soft); transition:color .15s; }
.nav-links a:hover,.nav-links a[aria-current] { color:var(--on-navy); }
.menu { display:none; position:relative; }
.menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s2); min-height:44px; padding-inline:14px; border:1px solid var(--line-navy); border-radius:999px; font-weight:500; font-size:15px; }
.menu summary::-webkit-details-marker { display:none; }
.menu svg { width:18px; height:18px; }
.menu ul { position:absolute; inset-inline-end:0; top:calc(100% + 10px); width:220px; background:var(--white); color:var(--ink); border-radius:var(--r-small); box-shadow:var(--shadow); overflow:hidden; }
.menu li + li { border-top:1px solid var(--mist); }
.menu a { display:block; padding:12px var(--s3); text-decoration:none; font-weight:500; }
.menu a:hover { background:var(--bg); }
@media (max-width:760px) { .nav-links { display:none; } .menu { display:block; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:10px 26px; border:1px solid var(--mist); border-radius:999px; background:var(--white); color:var(--ink); font:600 16px/1.3 var(--sans); text-decoration:none; cursor:pointer; touch-action:manipulation; transition:background-color .15s,color .15s,border-color .15s; }
.btn svg { width:20px; height:20px; flex:none; }
.btn:hover { border-color:var(--action); color:var(--action); }
.btn-primary { background:var(--action); border-color:var(--action); color:var(--white); }
.btn-primary:hover { background:var(--action-hover); border-color:var(--action-hover); color:var(--white); }
.btn-ghost { background:transparent; border-color:rgba(255,255,255,.35); color:var(--on-navy); }
.btn-ghost:hover { border-color:var(--on-navy); color:var(--on-navy); background:rgba(255,255,255,.08); }
.btn-small { min-height:44px; padding:8px 20px; font-size:15px; }
.btn-note { font-size:13px; font-weight:500; opacity:.85; direction:ltr; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:480px) { .btn-row .btn { width:100%; } }

/* Hero: the picture already fades to dark on the right, where the Arabic text sits */
.hero { position:relative; overflow:hidden; background:var(--hero); color:var(--on-navy); }
.hero-art { position:absolute; inset:0; background-position:left center; background-size:cover; background-repeat:no-repeat; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(to left,var(--hero) 32%,transparent 64%); }
.hero .wrap { position:relative; min-height:clamp(420px,42vw,560px); display:flex; align-items:center; padding-block:clamp(44px,6vw,72px); }
.hero-copy { max-width:520px; }
.tagline { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:500; color:var(--on-navy-soft); margin-bottom:var(--s3); }
.tagline::before { content:""; width:36px; height:3px; border-radius:2px; background:var(--accent); flex:none; }
.hero h1 { font-size:clamp(40px,5.6vw,64px); line-height:1.16; }
.hero h1 em { display:block; font-style:normal; color:var(--accent); }
.lead { font-size:clamp(17.5px,1.6vw,20px); color:var(--on-navy-soft); margin-top:var(--s3); }
.hero .btn-row { margin-top:var(--s4); }
.hero-meta { margin-top:var(--s3); font-size:14.5px; color:var(--on-navy-soft); }
.crumb { font-size:15px; color:var(--on-navy-soft); margin-bottom:var(--s3); }
.crumb a { text-underline-offset:3px; }
@media (max-width:760px) {
  .hero-art { opacity:.34; }
  .hero-art::after { background:linear-gradient(to top,var(--hero) 20%,transparent 80%); }
  .hero-copy { max-width:none; }
}

/* Sections */
.section { padding-block:clamp(44px,6vw,var(--s7)); }
.section + .section { padding-top:0; }
.sec-head { margin-bottom:clamp(20px,3vw,32px); }
.sec-head h2 { font-size:clamp(25px,3vw,32px); }
.sec-head p { color:var(--muted); margin-top:var(--s1); max-width:62ch; }
.card { background:var(--white); border:1px solid var(--mist); border-radius:var(--r-card); box-shadow:var(--shadow); }

/* Program cards */
.programs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
.program { display:flex; flex-direction:column; overflow:hidden; text-decoration:none; transition:border-color .15s,transform .15s ease-out; }
.program:hover { border-color:var(--c); transform:translateY(-2px); }
.program img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--navy); }
.program-body { padding:14px 16px 16px; border-top:3px solid var(--c); flex:1; }
.program-top { display:flex; justify-content:space-between; align-items:center; gap:var(--s2); }
.program h3 { font-size:19px; direction:ltr; }
.program p { font-size:14.5px; line-height:1.55; color:var(--muted); margin-top:var(--s1); }
.chip { display:inline-block; font:600 12.5px/1.5 var(--sans); padding:2px 10px; border-radius:999px; background:var(--mist); color:var(--muted); white-space:nowrap; }
.chip-live { background:var(--navy); color:var(--white); }
.program-more { justify-content:center; padding:20px; border-style:dashed; box-shadow:none; background:transparent; }
.program-more:hover { border-color:var(--action); }
.program-more h3 { direction:rtl; font-size:18px; }
@media (max-width:980px) { .programs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .programs { grid-template-columns:1fr; } }

/* Add-on list */
.addons { display:grid; gap:var(--s3); }
.addon { display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:var(--s4); align-items:center; padding:var(--s3); }
.addon img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 30%; border-radius:var(--r-small); border:1px solid var(--mist); }
.addon h3 { font-size:21px; margin-top:var(--s1); }
.addon p { color:var(--muted); font-size:15.5px; margin-top:2px; }
.addon-soon { grid-template-columns:minmax(0,1fr) auto; border-style:dashed; box-shadow:none; background:transparent; padding:var(--s4); }
@media (max-width:760px) { .addon { grid-template-columns:1fr; gap:var(--s2); } .addon .btn { width:100%; } }

/* Steps */
.steps-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); counter-reset:step; }
.steps-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.steps-row li { counter-increment:step; padding:20px; }
.steps-row li::before { content:counter(step); display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--tint); color:var(--action-hover); font-weight:700; margin-bottom:10px; }
.steps-row h3 { font-size:18px; }
.steps-row p { color:var(--muted); font-size:15px; line-height:1.65; margin-top:var(--s1); }
.note { margin-top:var(--s3); padding:12px 16px; background:var(--tint); border-radius:var(--r-small); font-size:15.5px; }
@media (max-width:980px) { .steps-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .steps-row,.steps-4 { grid-template-columns:1fr; } }

/* Result and features */
.result { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s3); margin-bottom:var(--s3); }
.shot { overflow:hidden; display:flex; align-items:center; }
@media (max-width:760px) { .result { grid-template-columns:1fr; } }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.feature { padding:20px; }
.feature svg { width:26px; height:26px; color:var(--action); margin-bottom:8px; display:block; }
.feature h3 { font-size:17.5px; }
.feature p { color:var(--muted); font-size:15px; line-height:1.65; margin-top:var(--s1); }
@media (max-width:880px) { .features { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:540px) { .features { grid-template-columns:1fr; } }

/* Offer */
.offer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.offer > div { padding:var(--s4); }
.offer h3 { font-size:14.5px; font-weight:600; color:var(--action); margin-bottom:var(--s1); }
.offer b { display:block; font-size:clamp(21px,2.4vw,25px); line-height:1.3; }
.offer p { color:var(--muted); font-size:15px; margin-top:var(--s1); }
.offer .top { background:var(--navy); border-color:var(--navy); color:var(--on-navy); }
.offer .top h3 { color:var(--accent); }
.offer .top p { color:var(--on-navy-soft); }
@media (max-width:760px) { .offer { grid-template-columns:1fr; } }

/* FAQ */
.faq { display:grid; gap:10px; }
.faq details { padding-inline:var(--s4); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); min-height:58px; padding-block:var(--s2); cursor:pointer; font-weight:600; font-size:16.5px; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary svg { width:20px; height:20px; color:var(--action); flex:none; transition:transform .18s ease-out; }
.faq details[open] summary svg { transform:rotate(45deg); }
.faq p { color:var(--muted); padding-bottom:var(--s3); max-width:74ch; }

/* Contact band */
.band-wrap { padding-bottom:clamp(40px,6vw,64px); }
.band { background:#0e2039 url("/assets/programs/band.webp") left center/cover no-repeat; color:var(--on-navy); border-radius:var(--r-card); padding:clamp(28px,4vw,48px); min-height:190px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.band h2 { font-size:clamp(23px,2.8vw,30px); }
.band p { color:var(--on-navy-soft); margin-block:var(--s1) var(--s3); max-width:56ch; }
.pending { display:inline-block; border:1px dashed var(--on-navy-soft); border-radius:999px; padding:10px 20px; color:var(--on-navy-soft); font-size:15px; }

/* Footer */
.site-foot { background:var(--navy); color:var(--on-navy); }
.foot-main { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); align-items:center; padding-block:var(--s4); }
.foot-links { display:flex; flex-wrap:wrap; gap:0 var(--s4); align-items:center; }
.foot-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:15px; color:var(--on-navy-soft); }
.foot-links a:hover { color:var(--on-navy); }
.foot-links svg { width:22px; height:22px; }
.foot-legal { border-top:1px solid var(--line-navy); padding-block:var(--s3); font-size:13px; line-height:1.65; color:var(--on-navy-soft); }

.notfound { text-align:center; padding-block:clamp(72px,14vw,160px); }
.notfound h1 { font-size:clamp(30px,5vw,48px); }
.notfound p { color:var(--muted); margin:var(--s2) 0 var(--s4); }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } .program:hover { transform:none; } }