:root{
  --navy:#1F2A3C; --navy-2:#2B3A52; --green:#3F7D20; --green-soft:#E8F1E1; --red:#B3262B;
  --bg:#F4F6F9; --surface:#FFFFFF; --ink:#1B2433; --muted:#5A6577; --line:#DCE1E8;
  --grid:#EEF1F5; --on-navy:#FFFFFF; --on-navy-muted:#B9C3D3;
  --font:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ --navy:#141C29; --navy-2:#1E293B; --green:#6DB34A; --green-soft:#1D2E17; --red:#E0575C;
    --bg:#0F151F; --surface:#18212F; --ink:#E6EBF2; --muted:#9AA6B8; --line:#2A3546; --grid:#202B3B;
    --on-navy:#FFFFFF; --on-navy-muted:#A9B4C5; color-scheme: dark; }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{font-family:var(--font-ar);line-height:1.8}
html[lang="en"] [lang="ar"]:not(html), html[lang="ar"] [lang="en"]:not(html){display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.ltr{direction:ltr;unicode-bidi:isolate}

/* header */
header{position:sticky;top:0;z-index:20;background:var(--navy);padding-top:env(safe-area-inset-top,0px);border-bottom:3px solid var(--green)}
.nav{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-navy);font-weight:600;font-size:19px}
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;padding:2px}
.nav ul{display:flex;gap:26px;list-style:none;margin-inline-start:auto}
.nav ul a{color:var(--on-navy-muted);text-decoration:none;font-size:15px}
.nav ul a:hover{color:var(--on-navy)}
.lang{background:transparent;border:1px solid #4A5A75;color:var(--on-navy);font:inherit;font-size:14px;padding:6px 14px;border-radius:6px;cursor:pointer}
.lang:hover{border-color:var(--on-navy)}
@media (max-width:860px){.nav ul{display:none}.lang{margin-inline-start:auto}}

/* hero */
.hero{background:var(--navy);color:var(--on-navy);padding:64px 0 80px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:6px 14px 6px 6px;border-radius:999px;font-size:14px;color:var(--on-navy-muted);margin-bottom:24px}
html[dir="rtl"] .badge{padding:6px 6px 6px 14px}
.badge img{width:52px;height:24px;object-fit:contain;background:#fff;border-radius:999px;padding:1px 4px}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.1;font-weight:700;letter-spacing:-.01em;margin-bottom:20px}
html[lang="ar"] .hero h1{line-height:1.3;letter-spacing:0}
.hero p.lead{font-size:19px;color:var(--on-navy-muted);max-width:34em;margin-bottom:32px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;border:2px solid transparent}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(1.08)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff}
.next{margin-top:28px;font-size:15px;color:var(--on-navy-muted)}
.next b{color:#fff;font-weight:600}

/* the model sheet */
.sheet{background:#fff;color:#1B2433;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);font-family:var(--mono);font-size:13px;overflow:hidden;direction:ltr}
.sheet .bar{background:#E9EDF2;display:flex;align-items:center;gap:8px;padding:9px 12px;font-family:var(--font);font-size:12px;color:#5A6577}
.sheet .bar i{width:10px;height:10px;border-radius:50%;background:#C9D0DA;display:inline-block}
.sheet .tabs{display:flex;border-top:1px solid #DCE1E8;background:#F4F6F9;font-family:var(--font);font-size:12px}
.sheet .tabs span{padding:6px 14px;color:#5A6577;border-inline-end:1px solid #DCE1E8}
.sheet .tabs span.on{background:#fff;color:#1B2433;font-weight:600;border-bottom:2px solid #3F7D20}
.sheet table{width:100%;border-collapse:collapse}
.sheet th,.sheet td{border:1px solid #E3E7ED;padding:5px 9px;white-space:nowrap}
.sheet thead th{background:#F4F6F9;color:#8792A3;font-weight:400;text-align:center;font-size:11px}
.sheet td.r{text-align:right;font-variant-numeric:tabular-nums}
.sheet td.lbl{font-family:var(--font);color:#1B2433}
.sheet td.idx{background:#F4F6F9;color:#8792A3;text-align:center;font-size:11px;width:28px}
.sheet tr.sec td.lbl{font-weight:600;color:#1F2A3C}
.sheet tr.tot td{font-weight:600;border-top:1.5px solid #1F2A3C}
.sheet td.link{color:#1D4ED8}
.sheet tr.check td{background:#E8F1E1;color:#2F6418;font-weight:600}
.sheet .fx{display:flex;gap:8px;padding:6px 10px;border-bottom:1px solid #E3E7ED;font-size:12px;color:#5A6577}
.sheet .fx b{color:#1F2A3C;font-weight:500;min-width:28px}
.fill{opacity:0;animation:fill .35s ease forwards}
@keyframes fill{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fill{animation:none;opacity:1}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.sheet{font-size:12px}}
@media (max-width:520px){.sheet .hide-s{display:none}.sheet{font-size:11px}.sheet th,.sheet td{padding:4px 6px}.facts strong{font-size:20px}}
.tscroll{overflow-x:auto}

/* sections */
section{padding:88px 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{font-size:clamp(28px,3.4vw,38px);line-height:1.2;color:var(--ink);font-weight:700;margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:18px}
.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* about */
.about{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.about p{margin-bottom:16px;max-width:36em}
.verify{background:var(--green-soft);border:1px solid var(--green);border-radius:10px;padding:26px}
.verify img{width:130px;background:#fff;border-radius:6px;padding:6px;margin-bottom:16px}
.verify h3{font-size:19px;margin-bottom:6px}
.verify p{color:var(--muted);font-size:15px;margin-bottom:14px}
.verify a{color:var(--green);font-weight:600}
@media (max-width:820px){.about{grid-template-columns:1fr}}

/* audience */
.aud{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.aud div{padding-block:24px 8px;padding-inline:0 24px;border-inline-end:1px solid var(--line)}
.aud div:last-child{border-inline-end:0}
.aud div + div{padding-inline-start:24px}
.aud h3{font-size:19px;margin-bottom:8px}
.aud p{color:var(--muted);font-size:16px}
.note{margin-top:32px;font-size:16px;color:var(--muted)}
.note b{color:var(--ink)}
@media (max-width:760px){.aud{grid-template-columns:1fr}.aud div,.aud div + div,html[dir="rtl"] .aud div{padding:20px 0;border-inline-end:0;border-bottom:1px solid var(--line)}}

/* modules: a real sequence */
.mods{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;counter-reset:m}
.mods li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);counter-increment:m}
.mods li::before{content:counter(m,decimal-leading-zero);font-family:var(--mono);color:var(--green);font-size:15px;padding-top:2px}
.mods h3{font-size:17px;margin-bottom:2px}
.mods p{color:var(--muted);font-size:15px}
@media (max-width:760px){.mods{grid-template-columns:1fr}}

/* program facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:28px}
.facts div{padding:24px;border-inline-end:1px solid var(--line)}
.facts div:last-child{border-inline-end:0}
.facts strong{display:block;font-size:24px;color:var(--ink);margin-bottom:2px}
.facts .lab{color:var(--muted);font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px}
.panel h3{font-size:18px;margin-bottom:12px}
.panel ul{padding-inline-start:20px;color:var(--muted)}
.panel li{margin-bottom:6px}
@media (max-width:820px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-inline-end:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}.two{grid-template-columns:1fr}}

/* instructor */
.inst{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.inst img{border-radius:10px;width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:top;background:var(--grid)}
.inst h3{font-size:26px;margin-bottom:2px}
.creds{color:var(--green);font-weight:600;margin-bottom:18px}
.inst ul{padding-inline-start:20px}
.inst li{margin-bottom:10px;max-width:40em}
@media (max-width:760px){.inst{grid-template-columns:1fr}.inst img{max-width:240px}}

/* fees */
.fees{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:28px}
.price{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px}
.price .amt{font-size:38px;font-weight:700;color:var(--ink);line-height:1.1;margin-bottom:6px}
.price .amt small{font-size:18px;color:var(--muted);font-weight:500}
.price p{color:var(--muted);font-size:15px}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pay span{border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:14px;color:var(--ink)}
.corp{margin-top:28px;background:var(--navy);color:var(--on-navy);border-radius:10px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.corp p{color:var(--on-navy-muted);max-width:42em}
.corp h3{font-size:20px;margin-bottom:4px}
@media (max-width:860px){.fees{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.clist{list-style:none}
.clist li{display:grid;grid-template-columns:130px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.clist span{color:var(--muted)}
.clist a{justify-self:start;font-weight:500;text-decoration:none;color:var(--ink)}
.clist a:hover{color:var(--green);text-decoration:underline}
@media (max-width:760px){.contact{grid-template-columns:1fr}.clist li{grid-template-columns:100px 1fr}}

footer{background:var(--navy);color:var(--on-navy-muted);padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* free lecture + handbook */
.watch{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-side p{color:var(--muted);margin-bottom:22px}
.hb{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px;text-decoration:none;color:var(--ink)}
.hb:hover{border-color:var(--green)}
.hb svg{width:44px;height:44px}
.hb b{display:block;font-size:16px}
.hb .sub{color:var(--muted);font-size:14px}
@media (max-width:860px){.watch{grid-template-columns:1fr}}

/* corporate form */
.corp-form{display:none;margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px}
.corp-form.open{display:block}
.corp-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.corp-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.corp-form input,.corp-form textarea{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.corp-form input:focus,.corp-form textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.corp-form .full{grid-column:1/-1}
.corp-form textarea{min-height:110px;resize:vertical}
.corp-form .actions{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.corp-form .actions span.hint{color:var(--muted);font-size:14px}
.corp-form button{border:0;cursor:pointer;font:inherit;font-weight:600}
.hidden-field{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.corp-form .grid{grid-template-columns:1fr}}

.form-msg{margin-top:16px;font-weight:600}
.form-msg.ok{color:var(--green)}
.form-msg.err{color:var(--red)}

.wa{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-end:20px;z-index:30;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.wa svg{width:30px;height:30px;fill:#fff}
/* ---- multi-page additions ---- */
.nav ul a.on{color:var(--on-navy);box-shadow:inset 0 -2px 0 var(--green);padding-bottom:4px}
.nav .reg{background:var(--green);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:8px 16px;border-radius:6px;white-space:nowrap}
.nav .reg:hover{filter:brightness(1.08)}
@media (max-width:980px){.nav ul{gap:18px}}
@media (max-width:860px){.nav .reg{display:none}}
.mnav{display:none;background:var(--navy-2);overflow-x:auto;white-space:nowrap;border-top:1px solid rgba(255,255,255,.08)}
.mnav a{display:inline-block;color:var(--on-navy-muted);text-decoration:none;font-size:14px;padding:10px 12px}
.mnav a.on{color:#fff}
@media (max-width:860px){.mnav{display:block}}

.page-hero{background:var(--navy);color:var(--on-navy);padding:56px 0 60px}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;margin-bottom:14px;max-width:20em}
html[lang="ar"] .page-hero h1{line-height:1.35}
.page-hero p{color:var(--on-navy-muted);font-size:18px;max-width:38em}
.crumb{font-size:14px;color:var(--on-navy-muted);margin-bottom:18px}
.crumb a{color:var(--on-navy-muted)}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:26px 0 30px;font-size:15px;color:var(--on-navy-muted)}
.hero-facts b{color:#fff;font-weight:600}

.course{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--green);border-radius:10px;padding:30px}
.course h3{font-size:24px;margin-bottom:6px}
.course p{color:var(--muted);max-width:40em;margin-bottom:14px}
.course .meta{display:flex;flex-wrap:wrap;gap:8px}
.course .meta span{font-size:14px;border:1px solid var(--line);border-radius:6px;padding:4px 10px;color:var(--ink)}
.course .go{display:flex;flex-direction:column;gap:10px;min-width:210px}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--green)}
@media (max-width:820px){.course{grid-template-columns:1fr}.course .go{min-width:0}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.inst-mini{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center}
.inst-mini img{border-radius:10px;aspect-ratio:1;object-fit:cover;object-position:top}
.inst-mini h3{font-size:22px}
.inst-mini p{color:var(--muted);margin:8px 0 14px}
.text-link{color:var(--green);font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}

.band{background:var(--navy);color:var(--on-navy);border-radius:12px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.band h2{font-size:28px;margin-bottom:6px}
.band p{color:var(--on-navy-muted);max-width:36em}

.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);margin-top:10px;max-width:46em}
.faq{max-width:820px}

/* forms */
.fbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:30px;max-width:820px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.fbox label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.fbox label small{font-weight:400;color:var(--muted)}
.fbox input,.fbox textarea,.fbox select{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.fbox input:focus,.fbox textarea:focus,.fbox select:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.fbox .full{grid-column:1/-1}
.fbox textarea{min-height:110px;resize:vertical}
.fbox .actions{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fbox .hint{color:var(--muted);font-size:14px}
.fbox button{border:0;cursor:pointer;font:inherit;font-weight:600}
.hidden-field{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-msg{margin-top:16px;font-weight:600}
.form-msg.ok{color:var(--green)}
.form-msg.err{color:var(--red)}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}
.aside-list{list-style:none}
.aside-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.aside-list b{display:block}
.aside-list span{color:var(--muted);font-size:15px}
.reg-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
@media (max-width:900px){.reg-layout{grid-template-columns:1fr}}

/* resources */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.res{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.res .body{padding:20px 22px}
.res h3{font-size:18px;margin-bottom:4px}
.res p{color:var(--muted);font-size:15px}
.res .video{border-radius:0;box-shadow:none}
@media (max-width:820px){.res-grid{grid-template-columns:1fr}}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quote{border-top:3px solid var(--green);padding-top:18px}
.quote p{font-size:17px;margin-bottom:14px}
.quote b{display:block}
.quote span{color:var(--muted);font-size:14px}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--navy);color:var(--on-navy-muted);padding:48px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:15px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:36px;margin-bottom:32px}
.foot h4{color:#fff;font-size:15px;margin-bottom:12px}
.foot ul{list-style:none}
.foot li{margin-bottom:8px}
.foot a{color:var(--on-navy-muted);text-decoration:none}
.foot a:hover{color:#fff}
.foot .brandline{display:flex;align-items:center;gap:12px;color:#fff;font-weight:600;font-size:18px;margin-bottom:10px}
.foot .brandline img{width:40px;height:40px;border-radius:50%;background:#fff;padding:2px}
.foot .bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr}}
.foot .wrap{display:block}
/* stats band */
.stats{background:var(--navy-2);color:var(--on-navy);padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stats-grid div{border-inline-start:2px solid var(--green);padding-inline-start:20px}
.stats-grid strong{display:block;font-size:clamp(44px,5vw,60px);line-height:1;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:-.02em}
.stats-grid span{color:var(--on-navy-muted);font-size:16px;line-height:1.5;display:block;max-width:15em}
@media (max-width:860px){.stats-grid{grid-template-columns:1fr 1fr;gap:36px 24px}}
html[dir="rtl"] .stats-grid strong{text-align:right}