:root{
  --navy:#1B2D64;
  --navy-deep:#0E1A43;
  --purple:#6B3B8F;
  --purple-soft:#8C55AC;
  --teal:#00A29E;
  --teal-soft:#3CA8A5;
  --ink:#11182C;
  --muted:#667085;
  --line:#E8EAF1;
  --paper:#FFFFFF;
  --wash:#F8F9FC;
  --lav:#F5F1F8;
  --aqua:#EEF9F8;
  --shadow:0 18px 55px rgba(14,26,67,.08);
  --radius:24px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(calc(100% - 40px),var(--container));margin:auto}
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);border-bottom:1px solid rgba(232,234,241,.8)
}
.nav{height:96px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{width:118px;display:block}
.brand img{width:100%;display:block;object-fit:contain;margin-top:8px}
.main-nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:650;color:#39425A}
.main-nav a{transition:.2s ease}.main-nav a:hover{color:var(--purple)}
.nav-cta{padding:11px 17px!important;border:1px solid var(--line);border-radius:999px;color:var(--navy)!important}
.menu-toggle{display:none;background:none;border:0;font-size:26px;color:var(--navy)}
.hero{position:relative;overflow:hidden;padding:85px 0 70px;background:linear-gradient(180deg,#fff 0%,#fbfbfd 100%)}
.hero-grid{display:grid;grid-template-columns:1.07fr .93fr;gap:70px;align-items:center}
.eyebrow,.section-kicker,.mini-label,.course-label{
  margin:0 0 15px;color:var(--teal);font-size:11px;letter-spacing:.18em;font-weight:800
}
.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{width:24px;height:2px;background:var(--teal);display:inline-block}
.hero h1{font-size:clamp(52px,6vw,82px);line-height:.98;letter-spacing:-.05em;margin:0 0 26px;color:var(--navy-deep);font-weight:780}
.hero h1 em,.about h2 span,.cta h2 em{font-style:normal;color:var(--purple)}
.hero-text{max-width:610px;color:var(--muted);font-size:18px;line-height:1.75;margin:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{border:0;border-radius:999px;padding:14px 20px;font-weight:750;display:inline-flex;align-items:center;gap:12px;transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:white;box-shadow:0 10px 24px rgba(27,45,100,.18)}
.btn-primary:hover{box-shadow:0 14px 30px rgba(27,45,100,.25)}
.btn-ghost{border:1px solid var(--line);color:var(--navy);background:white}
.hero-proof{display:flex;gap:36px;margin-top:44px}.hero-proof div{display:flex;flex-direction:column}
.hero-proof strong{font-size:24px;color:var(--navy)}.hero-proof span{font-size:12px;color:var(--muted)}
.hero-card{position:relative;background:var(--navy-deep);border-radius:30px;padding:20px;box-shadow:var(--shadow);min-height:560px;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:auto -80px -110px auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(0,162,158,.35),transparent 65%)}
.hero-card:after{content:"";position:absolute;left:-120px;top:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(107,59,143,.34),transparent 65%)}
.hero-card-top{display:flex;justify-content:space-between;align-items:center;color:#fff;position:relative;z-index:2}
.mini-label{color:#AFC0EA;margin:0}
.status-dot{font-size:11px;color:#DDE4FA;display:flex;gap:6px;align-items:center}.status-dot i{display:block;width:7px;height:7px;border-radius:50%;background:#54D0C5}
.hero-card-art{position:relative;height:360px;display:flex;justify-content:center;align-items:center}
.dna-line{width:175px;height:290px;border:3px solid var(--teal);border-left-color:transparent;border-right-color:transparent;border-radius:50%;transform:rotate(-24deg);opacity:.92;position:absolute}
.dna-line:after{content:"";position:absolute;inset:18px 35px;border:2px solid var(--purple-soft);border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(42deg)}
.cell-grid{width:260px;height:200px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;transform:rotate(-14deg);filter:drop-shadow(0 12px 22px rgba(0,0,0,.18));position:relative}
.cell-grid span{border-radius:47% 55% 52% 42%;background:linear-gradient(145deg,#8B56B0,#4E2F87);border:1px solid rgba(255,255,255,.08)}
.cell-grid span:nth-child(2n){background:linear-gradient(145deg,#26B6B0,#008A87)}.cell-grid span:nth-child(3n){transform:scale(.78)}
.floating-tag{position:absolute;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:11px;backdrop-filter:blur(10px)}
.tag-one{left:6%;top:26%}.tag-two{right:2%;top:45%}.tag-three{left:17%;bottom:11%}
.hero-card-bottom{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);padding-top:21px;display:flex;justify-content:space-between;align-items:end;color:#fff}
.course-label{color:#73D7D2;margin-bottom:6px}.hero-card-bottom h3{margin:0;font-size:21px;letter-spacing:-.02em}
.circle-arrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:white;color:var(--navy);font-size:19px}
.hero-orbit{position:absolute;border-radius:50%;pointer-events:none}.orbit-a{width:500px;height:500px;border:1px solid #EEEAF3;right:-220px;top:30px}.orbit-b{width:240px;height:240px;border:1px solid #DDF1F0;left:-150px;bottom:-80px}
.section{padding:105px 0}.intro-band{background:var(--wash);padding:80px 0}
.intro-grid{display:grid;grid-template-columns:.45fr 1.15fr .9fr;gap:30px;align-items:start}.intro-grid h2{font-size:39px;line-height:1.08;letter-spacing:-.035em;margin:0;max-width:630px}.intro-grid h2 span{color:var(--purple)}.muted{color:var(--muted);line-height:1.75}.intro-grid .muted{margin:0;max-width:390px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.section-heading h2{font-size:45px;line-height:1.05;letter-spacing:-.04em;margin:0;color:var(--navy-deep)}.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{border:1px solid var(--line);background:white;color:#667085;border-radius:999px;padding:10px 14px;font-size:12px;font-weight:750}.filter.active{background:var(--navy);color:white;border-color:var(--navy)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.course-card{border:1px solid var(--line);border-radius:22px;padding:25px;min-height:305px;display:flex;flex-direction:column;background:#fff;position:relative;transition:.2s ease}.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.course-card.featured{background:linear-gradient(145deg,#F6F1F9,#fff)}
.course-meta{display:flex;justify-content:space-between;align-items:center;color:#7A8294;font-size:11px}.pill{display:inline-flex;padding:5px 8px;border-radius:999px;font-weight:800;letter-spacing:.08em;font-size:9px}.pill.purple{background:#F2E9F6;color:var(--purple)}.pill.teal{background:#E5F7F6;color:#008F8B}.pill.navy{background:#EAEFF8;color:var(--navy)}
.featured-label{position:absolute;top:25px;right:25px;font-size:9px;letter-spacing:.1em;font-weight:800;color:var(--purple)}
.course-card h3{font-size:25px;line-height:1.12;letter-spacing:-.025em;margin:38px 0 12px;color:var(--navy-deep)}.course-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.course-footer{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;align-items:center;color:#83899B;font-size:11px;font-weight:700}.text-btn{border:0;background:transparent;padding:0;color:var(--navy);font-size:12px;font-weight:800}
.tracks{background:var(--navy-deep);color:#fff}.tracks .section-heading h2{color:#fff}.tracks .section-kicker{color:#6FD7D0}.compact{align-items:end}.max-copy{max-width:360px;margin:0;color:#BAC4E0}
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.track-card{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:24px;background:rgba(255,255,255,.035);min-height:290px;overflow:hidden;transition:.2s ease}.track-card:hover{background:rgba(255,255,255,.07);transform:translateY(-3px)}.track-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(107,59,143,.32),transparent 65%);right:-60px;bottom:-60px}.track-number{font-size:10px;color:#8B99BF;font-weight:800;letter-spacing:.1em}.track-icon{font-size:38px;color:var(--teal);margin:28px 0 24px}.track-card h3{margin:0 0 9px;font-size:21px}.track-card p{color:#AEB8D3;font-size:13px;line-height:1.65;margin:0 0 22px}.track-card a{font-size:12px;font-weight:800;color:white}
.mentor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mentor-card{border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;align-items:center;gap:14px}.mentor-card h3{margin:0 0 3px;font-size:15px;color:var(--navy)}.mentor-card p{margin:0;font-size:11px;color:var(--muted)}.avatar{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:11px;font-weight:900;color:white}.avatar-a{background:linear-gradient(145deg,#6B3B8F,#9A66B6)}.avatar-b{background:linear-gradient(145deg,#008E8B,#35BDB7)}.avatar-c{background:linear-gradient(145deg,#233E86,#4867B1)}.avatar-d{background:linear-gradient(145deg,#43306D,#1F7C86)}
.about{padding-top:25px}.about-panel{background:var(--wash);border-radius:30px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about h2{font-size:66px;line-height:.92;letter-spacing:-.05em;margin:0;color:var(--navy-deep)}.about-copy{max-width:510px}.about-copy p{color:var(--muted);font-size:16px;line-height:1.8}.about-copy .btn{margin-top:12px}
.cta-section{padding-top:80px}.cta{background:linear-gradient(135deg,#F5F1F8,#EEF9F8);border:1px solid var(--line);border-radius:30px;padding:60px;display:grid;grid-template-columns:1fr .95fr;gap:50px;align-items:center}.cta h2{font-size:52px;line-height:1;letter-spacing:-.045em;color:var(--navy-deep);margin:0}.signup-form label{display:block;font-weight:800;color:var(--navy);margin-bottom:12px}.form-row{display:flex;gap:8px}.signup-form input{min-width:0;flex:1;padding:14px 16px;border:1px solid #DADDE6;border-radius:999px;outline:none;background:white}.signup-form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,162,158,.08)}.signup-form small{display:block;color:#7A8294;margin-top:10px;font-size:11px}
.site-footer{padding:38px 0;background:#fff;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:30px;align-items:end}.footer-logo{width:125px;display:block;margin-bottom:10px}.site-footer p{margin:0;color:#81889A;font-size:11px}.footer-links{display:flex;gap:20px;font-size:11px;font-weight:750;color:#4B5265}.copyright{text-align:right}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:100}.modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(10,17,41,.5);backdrop-filter:blur(8px)}.modal-card{position:relative;background:white;border-radius:26px;padding:34px;width:min(92vw,520px);box-shadow:0 28px 90px rgba(0,0,0,.24);z-index:1}.modal-card h2{margin:0 0 10px;color:var(--navy-deep);font-size:34px;letter-spacing:-.03em}.modal-close{position:absolute;right:16px;top:13px;border:0;background:var(--wash);width:34px;height:34px;border-radius:50%;font-size:22px;color:var(--navy)}.modal-detail{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);font-size:12px}.modal-detail span{color:#858B9B}.modal-card .btn{margin-top:18px}
.reveal{animation:fadeUp .8s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.course-card.hidden{display:none}

@media (max-width: 980px){
  .hero-grid,.about-panel,.cta{grid-template-columns:1fr}
  .hero-grid{gap:40px}.hero-card{min-height:520px}.intro-grid{grid-template-columns:1fr 1.4fr}.intro-grid .muted{grid-column:2}
  .course-grid{grid-template-columns:repeat(2,1fr)}.track-grid,.mentor-grid{grid-template-columns:repeat(2,1fr)}
  .about-panel{gap:30px}.footer-grid{grid-template-columns:1fr 1fr}.copyright{text-align:left}
}
@media (max-width: 720px){
  .container{width:min(calc(100% - 28px),var(--container))}.nav{height:78px}.brand{width:100px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:14px;right:14px;top:70px;background:white;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:4px}.main-nav.open{display:flex}.main-nav a{padding:12px 14px}.nav-cta{text-align:center}
  .hero{padding:55px 0}.hero h1{font-size:56px}.hero-text{font-size:16px}.hero-proof{gap:18px}.hero-card{min-height:470px}.hero-card-art{height:300px}.cell-grid{width:220px}.tag-one{left:0}.tag-two{right:0}.tag-three{left:12%;bottom:5%}
  .section{padding:75px 0}.intro-band{padding:65px 0}.intro-grid{display:block}.intro-grid h2{font-size:34px;margin:0 0 18px}.section-heading{display:block}.section-heading h2{font-size:37px}.filters{margin-top:22px}.course-grid,.track-grid,.mentor-grid{grid-template-columns:1fr}.course-card{min-height:280px}.about-panel,.cta{padding:32px}.about h2{font-size:54px}.cta h2{font-size:42px}.form-row{display:grid;grid-template-columns:1fr}.form-row .btn{justify-content:center}.footer-grid{grid-template-columns:1fr}.copyright{text-align:left}.footer-links{flex-wrap:wrap}
}


/* ---------- Track / Webinar UX ---------- */
.track-card-clickable{cursor:pointer;outline:none}
.track-card-clickable:focus-visible{box-shadow:0 0 0 3px rgba(0,162,158,.35)}
.track-open-btn{
  border:0;background:transparent;padding:0;color:white;font-size:12px;font-weight:800;
  text-align:left;position:relative;z-index:2
}
.webinar-modal-card{width:min(94vw,920px);max-height:88vh;overflow:auto}
.webinar-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}
.webinar-modal-head h2{margin:0 0 8px;font-size:40px;line-height:1;letter-spacing:-.04em;color:var(--navy-deep)}
.upload-webinar-btn{
  flex:0 0 auto;padding:12px 16px;border-radius:999px;background:var(--teal);color:white;
  font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(0,162,158,.18)
}
.webinar-list{display:grid;gap:12px}
.webinar-item{
  display:grid;grid-template-columns:190px 1fr;gap:18px;padding:14px;border:1px solid var(--line);
  border-radius:18px;background:#fff
}
.webinar-thumbnail{
  min-height:130px;border-radius:14px;background:linear-gradient(145deg,var(--navy-deep),var(--purple));
  display:grid;place-items:center;color:white;font-size:10px;font-weight:900;letter-spacing:.16em
}
.webinar-gradient{background:
  radial-gradient(circle at 70% 30%,rgba(0,162,158,.55),transparent 28%),
  linear-gradient(145deg,var(--navy-deep),var(--purple))}
.webinar-info{display:flex;flex-direction:column;justify-content:center}
.webinar-topline{display:flex;gap:12px;align-items:center;color:#7A8294;font-size:10px}
.webinar-info h3{margin:10px 0 6px;font-size:20px;color:var(--navy-deep)}
.webinar-info p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.webinar-info .text-btn{margin-top:12px;text-align:left}
.upload-note{
  margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--wash);
  color:#70788B;font-size:11px;line-height:1.65
}
.upload-note strong{color:var(--navy)}
.webinar-player{width:100%;margin-top:18px;border-radius:16px;background:#0B112B;max-height:460px}
@media(max-width:720px){
  .webinar-modal-head{display:block}.upload-webinar-btn{display:inline-flex;margin-top:14px}
  .webinar-modal-head h2{font-size:34px}.webinar-item{grid-template-columns:1fr}.webinar-thumbnail{min-height:160px}
}


/* ---------- Prof. Hussein Sabit profile ---------- */
.sabit-trigger{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:var(--purple);
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  text-align:left;
  position:relative;
}
.sabit-trigger:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.08em;
  height:2px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.sabit-trigger:hover:after,.sabit-trigger:focus-visible:after{transform:scaleX(1)}
.sabit-trigger:focus-visible{outline:3px solid rgba(0,162,158,.18);outline-offset:4px;border-radius:6px}
.sabit-modal-card{
  width:min(95vw,1180px);
  max-height:90vh;
  overflow:auto;
  padding:34px;
}
.sabit-modal-head{
  max-width:760px;
  margin-bottom:24px;
}
.sabit-modal-head h2{
  margin:0 0 10px;
  color:var(--navy-deep);
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.sabit-panels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.sabit-panel{
  position:relative;
  min-height:440px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  background:linear-gradient(180deg,#fff 0%,#fbfbfd 100%);
  overflow:hidden;
}
.sabit-panel:before{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-90px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,162,158,.12),transparent 68%);
}
.sabit-panel:nth-child(2):before{
  background:radial-gradient(circle,rgba(107,59,143,.13),transparent 68%);
}
.sabit-panel:nth-child(3):before{
  background:radial-gradient(circle,rgba(27,45,100,.12),transparent 68%);
}
.sabit-panel-index{
  color:var(--teal);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  margin-bottom:22px;
}
.sabit-panel h3{
  margin:0 0 12px;
  color:var(--navy-deep);
  font-size:23px;
  line-height:1.12;
  letter-spacing:-.025em;
  position:relative;
  z-index:1;
}
.sabit-panel p{
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  position:relative;
  z-index:1;
}
.sabit-meta{
  display:grid;
  gap:7px;
  margin:18px 0;
  font-size:11px;
  color:#687186;
  position:relative;
  z-index:1;
}
.sabit-meta span:first-child{font-weight:800;color:var(--navy)}
.sabit-education{
  display:grid;
  gap:8px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:#667085;
  position:relative;
  z-index:1;
}
.sabit-education strong{color:var(--purple)}
.sabit-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
  position:relative;
  z-index:1;
}
.sabit-tags span{
  padding:7px 9px;
  border-radius:999px;
  background:#f4f7fb;
  border:1px solid #e4e8f0;
  color:var(--navy);
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
}
.sabit-panel:nth-child(2) .sabit-tags span:nth-child(3n){
  background:#f4edf7;
  border-color:#eadcf0;
  color:var(--purple);
}
.sabit-panel:nth-child(2) .sabit-tags span:nth-child(2n){
  background:#eaf8f7;
  border-color:#d9f0ee;
  color:#008b87;
}
.sabit-metrics{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px;
  position:relative;
  z-index:1;
}
.sabit-metrics div{
  padding:12px;
  border-radius:15px;
  background:#f8f9fc;
  border:1px solid var(--line);
}
.sabit-metrics strong{
  display:block;
  color:var(--navy);
  font-size:24px;
  line-height:1;
  letter-spacing:-.03em;
}
.sabit-metrics span{
  display:block;
  margin-top:6px;
  color:#737b8e;
  font-size:9px;
  line-height:1.45;
}
.sabit-leadership{
  display:grid;
  gap:8px;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--line);
  position:relative;
  z-index:1;
}
.sabit-leadership span{
  color:#667085;
  font-size:10px;
  line-height:1.5;
}
@media(max-width:900px){
  .sabit-panels{grid-template-columns:1fr}
  .sabit-panel{min-height:auto}
}
@media(max-width:720px){
  .sabit-modal-card{padding:24px}
  .sabit-panel{padding:20px}
  .sabit-modal-head h2{font-size:32px}
}