/* ===== Tokens ===== */
:root{
  --bg-0:#04080d;
  --bg-1:#060f16;
  --bg-2:#0a1720;
  --panel:#0e1b24;
  --panel-2:#101f29;
  --teal:#5AFFEA;
  --cyan:#5AFFFF;
  --teal-dim:#1e8f7c;
  --purple:#8b5cf6;
  --pink:#FF0093;
  --btn-text:#061C2B;
  --text-0:#f3f6f8;
  --text-1:#c7d2d8;
  --text-2:#8a9aa4;
  --border:rgba(255,255,255,.08);
  --radius:18px;
  --radius-lg:28px;
  --container:1180px;
  --font:'Almarai', -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--bg-0);
  color:var(--text-1);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button, input, select, textarea{font-family:inherit;}
h1,h2,h3{color:var(--text-0); font-weight:800; line-height:1.3;}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem);}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.3rem;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
section{position:relative;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:none; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--teal); color:var(--btn-text);}
.btn-primary:hover{transform:translateY(-2px); background:#7bffef;}
.btn-glow{box-shadow:0 0 0 rgba(47,230,198,.5);}
.btn-glow:hover{box-shadow:0 8px 30px rgba(47,230,198,.45);}
.btn-sm{padding:9px 20px; font-size:.85rem;}
.btn-primary-outline{
  border:1.5px solid var(--teal); color:var(--teal); background:transparent;
  padding:12px 26px; border-radius:999px; font-weight:700; display:inline-block;
  transition:.25s;
}
.btn-primary-outline:hover{background:var(--teal); color:var(--btn-text);}

/* ===== Progress bar ===== */
.progress-bar{
  position:fixed; top:0; right:0; height:3px; width:0%; z-index:999;
  background:linear-gradient(90deg, var(--teal), var(--purple));
  transition:width .1s linear;
}

/* ===== Header ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:rgba(4,8,13,.55);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .3s, padding .3s;
}
.site-header.scrolled{background:rgba(4,8,13,.92);}
.header-inner{
  display:flex; align-items:center; gap:28px; justify-content:center;
  height:74px;
}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.25rem; color:var(--text-0);}
.logo svg{color:var(--teal); flex-shrink:0;}
.logo-img{height:38px; width:auto;}
.main-nav{display:flex; align-items:center; gap:22px; font-size:.92rem; color:var(--text-1); flex-shrink:0;}
.main-nav a{display:flex; align-items:center; gap:3px; transition:color .2s;}
.main-nav a:hover, .main-nav a.active{color:var(--teal);}
.chev{font-size:.65em; opacity:.7;}
.search-box{
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:9px 18px; color:var(--text-2); font-size:.85rem; max-width:280px;
}
.header-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.icon-btn{background:none; border:none; color:var(--text-1); cursor:pointer; display:flex;}
.link-btn{font-size:.9rem; color:var(--text-1); display:flex; align-items:center; gap:5px; white-space:nowrap;}
.link-btn:hover{color:var(--teal);}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{width:22px; height:2px; background:var(--text-0); border-radius:2px; transition:.3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:640px; display:flex; align-items:center;
  padding-top:74px; overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
.hero-fade{
  position:absolute; inset:0;
  background:linear-gradient(270deg, var(--bg-0) 8%, rgba(4,8,13,.85) 40%, rgba(4,8,13,.35) 65%, rgba(4,8,13,.05) 100%),
             linear-gradient(0deg, var(--bg-0) 0%, transparent 30%);
}
.hero-inner{position:relative; z-index:1; padding-top:80px; padding-bottom:60px;}
.hero-content{max-width:640px;}
.badge{
  display:inline-block; background:var(--panel); border:1px solid var(--border); color:var(--teal);
  font-size:.7rem; padding:4px 12px; border-radius:999px; margin-bottom:18px;
}
.hero h1{margin-bottom:18px;}
.dots{color:var(--teal);}
.hero-sub{color:var(--text-1); font-size:1.05rem; max-width:520px; margin-bottom:22px;}
.hero-speaker{margin-bottom:20px;}
.hero-speaker strong{display:block; color:var(--text-0); font-size:1.05rem; margin-bottom:4px;}
.hero-speaker .tagline{color:var(--teal); font-size:.85rem;}
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:16px 0; margin-bottom:24px; border-top:1px solid var(--border);
  font-size:.85rem; color:var(--text-1);
}
.hero-meta .sep{color:var(--border); opacity:.6;}
.pill-free{color:var(--teal); font-weight:700;}

/* ===== Countdown ===== */
.countdown-wrap{margin-top:-70px; position:relative; z-index:3; padding-bottom:70px;}
.countdown-card{
  background:
    radial-gradient(ellipse 420px 260px at 8% 20%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(ellipse 500px 320px at 95% 60%, rgba(90,255,234,.22), transparent 65%),
    linear-gradient(120deg, #1a1230 0%, #0e1b24 55%, #0a2420 100%);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding:28px 40px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.countdown-label{text-align:center;}
.countdown-label strong{display:block; color:var(--teal); font-size:1rem; margin-bottom:2px;}
.countdown-label span{color:var(--text-2); font-size:.78rem;}
.countdown-timer{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.time-block{text-align:center; min-width:0;}
.time-block .num{
  display:block; font-size:2rem; font-weight:800; color:var(--teal);
  font-variant-numeric:tabular-nums;
}
.countdown-timer .time-block:nth-child(1) .num{color:var(--cyan);}
.time-block .unit{color:var(--text-2); font-size:.78rem;}

/* ===== Problem Section ===== */
.problem-section{min-height:520px; display:flex; align-items:center; padding:90px 0;}
.problem-bg{position:absolute; inset:0; z-index:0;}
.problem-bg img{width:100%; height:100%; object-fit:cover;}
.problem-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(270deg, var(--bg-0) 25%, rgba(4,8,13,.55) 55%, rgba(4,8,13,.15) 100%),
             linear-gradient(0deg, var(--bg-0), transparent 25%, transparent 75%, var(--bg-0));
}
.problem-content{position:relative; z-index:1; max-width:640px; margin-inline-end:auto;}
.problem-content h2{margin-bottom:20px;}
.problem-content p{font-size:1.05rem; margin-bottom:14px; padding-top:10px; border-top:1px solid var(--border);}
.problem-content p:first-of-type{border-top:none; padding-top:0;}
.problem-content .highlight{color:var(--teal); font-weight:800; font-size:1.2rem; border-top:1px solid var(--border); padding-top:16px;}

/* ===== Split layout sections ===== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding-top:90px; padding-bottom:90px;}
.split.reverse{grid-template-columns:1fr 1fr;}
.workshop-content, .why-section{
  background:
    radial-gradient(ellipse 900px 500px at 85% 0%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(ellipse 900px 500px at 0% 100%, rgba(90,255,234,.08), transparent 60%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

.video-thumb, .why-photo{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3;}
.video-thumb img, .why-photo img{width:100%; height:100%; object-fit:cover;}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--teal); color:#03211c; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 10px rgba(47,230,198,.15); transition:.25s;
}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.1);}
.play-btn.sm{width:40px; height:40px; box-shadow:0 0 0 7px rgba(47,230,198,.15);}

.workshop-text h2, .why-text h2{margin-bottom:16px;}
.workshop-text p, .why-text p{margin-bottom:12px;}
.workshop-text h3{margin:22px 0 10px; color:var(--teal);}
.workshop-text .muted, .why-text .lead{color:var(--text-2);}
.why-text .lead{color:var(--text-0); font-size:1.1rem; font-weight:700; margin-bottom:10px;}
.workshop-text .btn, .why-text .btn{margin-top:16px;}

/* ===== Fit Section ===== */
.fit-section{padding:90px 0; text-align:center;}
.fit-section h2{margin-bottom:34px;}
.fit-cards{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:36px;
}
.fit-card{
  flex:1 1 180px; max-width:230px; min-height:100px;
  border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center;
  text-align:center; font-weight:700; font-size:.92rem; color:var(--text-0);
  transition:transform .25s;
}
.fit-card:hover{transform:translateY(-6px);}
.fit-card.c1{background:linear-gradient(135deg,#2a2a33,#3a3a45);}
.fit-card.c2{background:linear-gradient(135deg,#0f5a6f,#0d7a72);}
.fit-card.c3{background:linear-gradient(135deg,#3a2a6b,#4b2f7a);}
.fit-card.c4{background:linear-gradient(135deg,#5c2560,#7a2f6a);}
.fit-card.c5{background:linear-gradient(135deg,#6b2a55,#8a3560);}

/* ===== Videos section ===== */
.videos-section{padding:90px 0; background:var(--bg-1);}
.videos-section h2{margin-bottom:28px;}
.video-carousel{position:relative; display:flex; align-items:center; gap:14px; margin-bottom:60px;}
.carousel-track{
  flex:1; display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar{display:none;}
.v-card{
  position:relative; flex:0 0 260px; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--panel);
}
.v-card img{width:100%; height:100%; object-fit:cover;}
.carousel-nav{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--panel);
  color:var(--text-0); cursor:pointer; flex-shrink:0; font-size:1.1rem; transition:.2s;
}
.carousel-nav:hover{background:var(--teal); color:#03211c;}

.speaker-card{
  display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px; position:relative; overflow:hidden;
}
.speaker-text .eyebrow{color:var(--text-2); font-size:.85rem;}
.speaker-text h3{margin:8px 0 16px;}
.speaker-text p{font-size:.92rem; margin-bottom:14px; color:var(--text-1);}
.speaker-photo{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;}
.speaker-photo img{width:100%; height:100%; object-fit:cover;}

/* ===== Event details ===== */
.details-section{padding:90px 0; text-align:center;}
.details-section h2{margin-bottom:34px;}
.details-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px;
  margin-bottom:34px;
}
.detail-item{position:relative; padding-top:32px;}
.detail-item::before{
  content:''; position:absolute; top:0; right:0; left:0; height:1px;
  background:linear-gradient(to right, transparent, rgba(90,255,234,.5), transparent);
}
.detail-item.pink::before{background:linear-gradient(to right, transparent, rgba(236,72,153,.6), transparent);}
.detail-icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
}
.detail-item.pink .detail-icon{color:var(--pink);}
.detail-item strong{display:block; color:var(--text-0); font-size:1.05rem;}
.detail-item span{color:var(--text-2); font-size:.8rem; display:block; margin-top:4px;}

/* ===== CTA banner ===== */
.cta-banner{min-height:520px; display:flex; align-items:center; padding:100px 0; overflow:hidden;}
.cta-bg{position:absolute; inset:0; z-index:0;}
.cta-bg img{width:100%; height:100%; object-fit:cover; object-position:top;}
.cta-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(270deg, var(--bg-0) 20%, rgba(4,8,13,.55) 55%, rgba(4,8,13,.25) 100%),
             linear-gradient(0deg, var(--bg-0) 0%, transparent 25%, transparent 75%, var(--bg-0) 100%);
}
.cta-banner .container{position:relative; z-index:1; text-align:center;}
.cta-btn{margin-bottom:34px;}
.cta-banner h2{font-size:clamp(1.6rem,3.4vw,2.5rem);}
.cta-banner .sub{font-weight:400; color:var(--text-1); font-size:.7em;}
.glow-text{color:var(--teal); font-size:1.3em; text-shadow:0 0 30px rgba(47,230,198,.5);}

/* ===== Footer ===== */
.site-footer{background:var(--bg-1); border-top:1px solid var(--border); padding-top:60px;}
.footer-grid{display:grid; grid-template-columns:auto repeat(4,1fr); gap:30px; padding-bottom:40px;}
.footer-brand{display:flex; flex-direction:column; align-items:flex-start; gap:20px;}
.footer-brand .logo{color:var(--text-0);}
.socials{display:flex; flex-wrap:nowrap; gap:8px;}
.socials a{
  width:32px; height:32px; border-radius:50%; background:var(--panel); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.socials a:hover{background:var(--teal); color:#03211c;}
.footer-col{display:flex; flex-direction:column; gap:12px; font-size:.88rem;}
.footer-col h4{color:var(--teal); font-size:.9rem; margin-bottom:6px;}
.footer-col a{color:var(--text-1); transition:.2s;}
.footer-col a:hover{color:var(--teal);}
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  border-top:1px solid var(--border); padding:22px 24px; font-size:.82rem; color:var(--text-2);
}
.footer-links{display:flex; flex-wrap:wrap; gap:18px;}
.footer-links a{color:var(--teal); text-decoration:underline; text-underline-offset:3px;}

/* ===== Reveal animation ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(2,5,8,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px; width:min(420px,90vw); position:relative;
  transform:scale(.92); transition:transform .3s;
}
.modal-overlay.open .modal-box{transform:scale(1);}
.modal-close{
  position:absolute; top:14px; left:14px; background:none; border:none; color:var(--text-1);
  font-size:1.6rem; cursor:pointer; line-height:1;
}
.modal-box h3{margin-bottom:10px;}
.modal-box > p{color:var(--text-2); font-size:.85rem; margin-bottom:22px;}
#registerForm{display:flex; flex-direction:column; gap:12px;}
#registerForm input{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; color:var(--text-0); font-family:var(--font); font-size:.9rem;
}
#registerForm input:focus{outline:1.5px solid var(--teal);}
#registerForm .btn{margin-top:6px;}
.modal-success{display:none; text-align:center; padding:20px 0; color:var(--teal);}
.modal-success svg{margin:0 auto 14px;}
.modal-success p{color:var(--text-0); font-size:1rem;}
.modal-box.success #registerForm, .modal-box.success h3, .modal-box.success > p{display:none;}
.modal-box.success .modal-success{display:block;}

/* ===== Scroll to top ===== */
.scroll-top{
  position:fixed; bottom:26px; left:26px; width:46px; height:46px; border-radius:50%;
  background:var(--teal); color:#03211c; border:none; font-size:1.2rem; cursor:pointer;
  z-index:400; opacity:0; pointer-events:none; transform:translateY(10px);
  transition:.3s; box-shadow:0 6px 20px rgba(47,230,198,.35);
}
.scroll-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}

/* ===== Responsive ===== */
@media (max-width:960px){
  .main-nav, .search-box{display:none;}
  .hamburger{display:flex;}
  .split, .split.reverse{grid-template-columns:1fr; gap:34px;}
  .split.reverse .why-photo{order:-1;}
  .speaker-card{grid-template-columns:1fr;}
  .speaker-photo{order:-1; max-width:260px; margin:0 auto;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:900px){
  .countdown-wrap{margin-top:30px; padding-bottom:50px;}
}
@media (max-width:600px){
  .hero{min-height:auto;}
  .hero-bg img{position:relative; object-fit:contain; object-position:top center; min-height:340px;}
  .hero-inner{padding-top:50px; padding-bottom:30px;}
  .hero-meta{flex-direction:column; align-items:flex-start; gap:8px; font-size:.78rem;}
  .hero-meta .sep{display:none;}
  .hero h1{font-size:1.9rem;}
  .hero-content{
    background:linear-gradient(180deg, rgba(4,8,13,.15), rgba(4,8,13,.7) 20%, var(--bg-0) 90%);
    padding:18px 0 4px; border-radius:12px;
  }
  .countdown-wrap{margin-top:22px; padding-bottom:40px;}
  .countdown-card{padding:20px 16px; justify-content:center; gap:16px;}
  .countdown-timer{gap:10px; width:100%;}
  .time-block .num{font-size:1.4rem;}
  .time-block .unit{font-size:.68rem;}
  .details-grid{flex-direction:column;}
  .detail-item{border-inline-start:none; border-top:1px solid var(--border);}
  .detail-item:first-child{border-top:none;}
  .footer-grid{grid-template-columns:1fr;}
  .link-btn{display:none;}
}

/* Mobile nav drawer */
@media (max-width:960px){
  .main-nav.mobile-open{
    display:flex; flex-direction:column; position:fixed; top:74px; right:0; left:0;
    background:var(--bg-1); padding:24px; border-top:1px solid var(--border);
    gap:18px; z-index:400;
  }
}