/* ============================================================
   Youssef Elhag — Trading Masterclass VSL
   Premium dark + gold · RTL Arabic · Tier 0
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink-950:#0B0B0C; --ink-900:#101012; --ink-850:#16161A; --ink-800:#1D1D22;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --line-gold:rgba(201,162,74,.30);
  --gold-300:#F1D9A0; --gold-400:#E3C277; --gold-500:#C9A24A; --gold-600:#A07A2C;
  --metal:linear-gradient(135deg,#F7E4B0 0%,#E3C277 26%,#C9A24A 56%,#A07A2C 100%);
  --paper:#F6F3EC; --muted:#ABA59B; --faint:#6E6A62;
  --maxw:1120px; --narrow:780px;
  --r:2px; --r-lg:6px; --r-pill:999px; --r-btn:4px; --r-chip:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --glow-gold:0 0 0 1px var(--line-gold),0 24px 60px -24px rgba(201,162,74,.45);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth; scroll-padding-top:90px;
  background:var(--ink-950);
}
body{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  background:var(--ink-950); color:var(--paper);
  line-height:1.75; font-size:17px; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
input{font:inherit}
::selection{background:var(--gold-500); color:var(--ink-950)}
:focus-visible{outline:2px solid var(--gold-400); outline-offset:3px; border-radius:6px}

h1,h2,h3{font-family:"Tajawal",sans-serif; line-height:1.14; font-weight:800; letter-spacing:-.01em}
strong{font-weight:700; color:var(--paper)}
em{font-style:normal; color:var(--gold-400); font-weight:500}
.gold{color:var(--gold-400)}
.muted-strong{color:#D8D2C7; font-weight:500}
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}
.num{font-feature-settings:"tnum"; letter-spacing:.01em}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.narrow{max-width:var(--narrow)}
.center{text-align:center}
.section{padding-block:clamp(64px,9vw,120px); position:relative}
.eyebrow{display:inline-block; font-family:"Tajawal"; font-weight:700; font-size:13px;
  letter-spacing:.16em; color:var(--gold-500); text-transform:uppercase;
  margin-bottom:18px; padding-block:7px; padding-inline:14px;
  border:1px solid var(--line-gold); border-radius:var(--r-chip);
  background:var(--ink-850)}
.h2{font-size:clamp(26px,4.2vw,42px)}
.sec-head{margin-bottom:clamp(32px,5vw,56px)}
.sec-head .h2{margin-top:6px}

/* ---------- grain + glow ---------- */
.grain{position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ---------- buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Tajawal"; font-weight:800; font-size:17px; line-height:1;
  padding-block:16px; padding-inline:28px; border-radius:var(--r-btn);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  overflow:hidden; white-space:nowrap}
.btn .ic--arrow{width:19px; height:19px}
.btn--gold{background:var(--metal); color:#1A1407;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 16px 40px -16px rgba(201,162,74,.7)}
.btn--gold::after{content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transition:transform .8s var(--ease)}
.btn--gold:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 22px 50px -16px rgba(201,162,74,.85)}
.btn--gold:hover::after{transform:translateX(130%)}
.btn--dark{background:var(--ink-950); color:var(--paper); border:1px solid rgba(255,255,255,.18)}
.btn--dark:hover{transform:translateY(-2px); border-color:rgba(0,0,0,.25); background:#000}
.btn--lg{font-size:19px; padding-block:19px; padding-inline:36px}
.btn--sm{font-size:14px; padding-block:11px; padding-inline:18px}
.btn--block{display:flex; width:100%}
.btn:active{transform:translateY(0) scale(.99)}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed; top:0; inset-inline-start:0; height:3px; width:0%;
  background:var(--metal); z-index:120; transition:width .1s linear}

/* ---------- topbar ---------- */
.topbar{position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; height:70px}
.topbar.is-stuck{background:rgba(11,11,12,.72); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line)}
.topbar__label{opacity:0; transform:translateY(-6px); transition:.3s var(--ease);
  font-family:"Tajawal"; font-weight:800; font-size:15px; color:var(--paper); letter-spacing:-.01em}
.topbar.is-stuck .topbar__label{opacity:1; transform:none}
.topbar__cta{opacity:0; transform:translateY(-6px); pointer-events:none; transition:.3s var(--ease)}
.topbar.is-stuck .topbar__cta{opacity:1; transform:none; pointer-events:auto}

/* ---------- hero ---------- */
.hero{position:relative; padding-block:clamp(84px,10vh,104px) clamp(48px,6vw,72px); overflow:hidden}
.hero__glow{position:absolute; inset-block-start:-15%; inset-inline-start:50%; transform:translateX(-50%);
  width:min(900px,120vw); aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(201,162,74,.20),rgba(201,162,74,.05) 38%,transparent 66%)}
.hero__inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center}
.badges{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:18px}
.pill{display:inline-flex; align-items:center; gap:7px; font-family:"Tajawal"; font-weight:700; font-size:13.5px;
  padding-block:8px; padding-inline:16px; border-radius:var(--r-chip); border:1px solid var(--line-gold)}
.pill .ic{width:14px; height:14px; color:var(--gold-400); flex:none}
.pill--gold{color:var(--gold-300); background:var(--ink-850); border-color:rgba(201,162,74,.55)}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--muted);
  padding-block:8px; padding-inline:13px; border-radius:var(--r-chip);
  border:1px solid var(--line); background:rgba(255,255,255,.02)}
.chip .ic{width:14px; height:14px; color:var(--gold-500)}
.hero__title{font-size:clamp(27px,4.4vw,52px); font-weight:900; max-width:22ch; letter-spacing:-.02em}
.hero__sub{margin-top:13px; max-width:44ch; color:var(--muted); font-size:clamp(15px,2vw,19px)}

/* player */
.player{width:100%; max-width:800px; margin-top:clamp(20px,2.6vw,30px)}
.player__frame{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:#000; padding:0;
  box-shadow:0 0 0 1px var(--line-gold), 0 0 0 6px rgba(201,162,74,.05),
    0 50px 120px -40px rgba(201,162,74,.4), 0 40px 90px -50px #000}
.player__frame::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));
  transition:opacity .4s}
.player.is-playing .player__frame::after{opacity:0}
.player__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.player__play{position:absolute; inset:0; margin:auto; z-index:4; width:92px; height:92px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--metal); color:#1A1407; box-shadow:0 18px 50px -12px rgba(201,162,74,.8);
  transition:transform .3s var(--ease), opacity .35s}
.player__play:hover{transform:scale(1.07)}
.player__tri{width:34px; height:34px; margin-inline-start:4px}
.player__ring{position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(201,162,74,.55);
  animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1); opacity:.7}70%{transform:scale(1.28); opacity:0}100%{opacity:0}}
.player__sound{position:absolute; inset-block-end:14px; inset-inline-end:14px; z-index:4;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--paper); padding-block:6px; padding-inline:12px;
  border-radius:var(--r-btn); background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14)}
.player__sound svg{flex:none}
.player.is-playing .player__play,.player.is-playing .player__sound{opacity:0; pointer-events:none}

.hero__cta{margin-top:clamp(28px,4vw,40px); display:flex; flex-direction:column; align-items:center; gap:14px}
.scarcity{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--gold-400);
  box-shadow:0 0 0 0 rgba(227,194,119,.7); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,194,119,.6)}70%{box-shadow:0 0 0 9px rgba(227,194,119,0)}100%{box-shadow:0 0 0 0 rgba(227,194,119,0)}}

/* ---------- pain ---------- */
.pain .lead{font-size:clamp(19px,2.7vw,25px); font-weight:500; color:#E7E2D8; text-align:center;
  line-height:1.7; font-family:"Tajawal"}
.qcards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(34px,5vw,52px)}
.qcard{position:relative; border-radius:var(--r); padding:28px 24px; overflow:hidden;
  background:linear-gradient(180deg,#17171C,#101013); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease)}
.qcard::before{content:""; position:absolute; inset-block-start:0; inset-inline:18px; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent); opacity:.0; transition:opacity .3s}
.qcard:hover{border-color:var(--line-gold); transform:translateY(-5px);
  box-shadow:0 22px 44px -24px rgba(201,162,74,.55), inset 0 1px 0 rgba(255,255,255,.07)}
.qcard:hover::before{opacity:1}
.qcard__n{display:inline-block; font-family:"Tajawal"; font-weight:900; font-size:30px; color:transparent;
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  border-bottom:2px solid var(--line-gold); padding-bottom:8px; line-height:1}
.qcard p{margin-top:16px; font-family:"Tajawal"; font-weight:700; font-size:19px; color:var(--paper); line-height:1.45}
/* giant ghosted number bleeding down the left of the card */
.qcard__ghost{position:absolute; z-index:0; inset-block:0; inset-inline-end:-14px;
  display:flex; align-items:center; pointer-events:none; user-select:none;
  font-family:"Tajawal"; font-weight:900; line-height:.74; letter-spacing:-.06em;
  font-size:clamp(190px,24vw,280px);
  background:linear-gradient(180deg, rgba(227,194,119,.22) 0%, rgba(227,194,119,.06) 50%, rgba(227,194,119,0) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.qcard__n, .qcard p{position:relative; z-index:1}

/* ---------- reframe ---------- */
.reframe{background:linear-gradient(180deg,var(--ink-950),#070708,var(--ink-950))}
.reframe__small{color:var(--gold-500); font-weight:600; font-size:14px; letter-spacing:.06em; margin-bottom:18px}
.reframe__big{font-size:clamp(38px,8vw,86px); font-weight:900; line-height:1.05}
.reframe__line{margin-top:14px; font-family:"Tajawal"; font-weight:700; font-size:clamp(20px,3.4vw,30px); color:var(--muted)}

/* ---------- mistake: scroll-fill text ---------- */
.fill{text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center;
  max-width:24ch; margin-inline:auto}
.fill__line{font-family:"Tajawal"; font-weight:700; font-size:clamp(18px,3vw,28px); line-height:1.55}
.fill__q{font-family:"Tajawal"; font-weight:900; font-size:clamp(36px,7.5vw,66px); line-height:1.1;
  margin-top:16px; filter:drop-shadow(0 8px 42px rgba(201,162,74,.22))}
.fw{color:rgba(246,243,236,.15); will-change:color}
.fw--q{color:rgba(201,162,74,.2)}

/* ---------- story ---------- */
.story__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:center}
.story__photo{position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-gold); box-shadow:var(--shadow)}
.story__photo img{width:100%; height:auto; display:block}
.story__photo figcaption{position:absolute; inset-block-end:0; inset-inline:0; padding:20px;
  display:flex; flex-direction:column; gap:3px;
  background:linear-gradient(180deg,transparent,rgba(7,7,8,.92))}
.story__name{font-family:"Tajawal"; font-weight:900; font-size:22px; color:var(--paper)}
.story__role{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.16em;
  color:var(--gold-400); direction:ltr; font-weight:600}
.story__role .ic{width:13px; height:13px; color:var(--gold-400)}
.story__body .h2{margin-block:10px 22px; font-size:clamp(24px,3.6vw,38px)}
.story__body p{color:var(--muted); margin-bottom:18px}
.stat-inline{font-family:"Tajawal"; font-weight:900; font-size:1.15em}
.pullquote{position:relative; border-inline-start:3px solid var(--gold-500); padding-inline-start:22px;
  font-family:"Tajawal"; font-weight:700; font-size:clamp(19px,2.5vw,24px); line-height:1.6;
  color:#E7E2D8 !important; margin-block:24px}
.journey{display:flex; align-items:stretch; gap:10px; margin-top:30px}
.journey__step{flex:1; min-width:96px; border-radius:var(--r); padding:18px 12px;
  background:linear-gradient(180deg,#17171C,#101013); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:9px; align-items:center; text-align:center}
.journey__step--gold{border-color:rgba(201,162,74,.55); background:linear-gradient(180deg,#1a1712,#100e0a)}
.journey__ic{width:40px; height:40px; display:grid; place-items:center; border-radius:6px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted)}
.journey__ic svg{width:20px; height:20px}
.journey__step--gold .journey__ic{background:var(--metal); border-color:transparent; color:#1A1407}
.journey__k{font-size:11.5px; color:var(--faint); font-weight:600; letter-spacing:.03em}
.journey__v{font-family:"Tajawal"; font-weight:800; font-size:15px; color:var(--paper); line-height:1.2}
.journey__step--gold .journey__v{color:var(--gold-300)}
.journey__arrow{align-self:center; color:var(--gold-500); display:grid; place-items:center; flex:none}
.journey__arrow svg{width:20px; height:20px}

/* ---------- proof ---------- */
.proof{background:radial-gradient(120% 90% at 50% 0%,rgba(201,162,74,.08),transparent 60%)}
.proof__hero{text-align:center}
.proof__kicker{font-family:"Tajawal"; font-weight:700; font-size:clamp(18px,2.4vw,22px); color:var(--muted); margin-bottom:18px}
.proof__big{display:inline-flex; align-items:center; gap:clamp(14px,3vw,30px); justify-content:center}
.proof__from{font-family:"Tajawal"; font-weight:800; font-size:clamp(30px,6vw,56px); color:var(--muted)}
.proof__arrow{width:clamp(44px,8vw,72px); height:auto; color:var(--gold-500)}
.proof__to{font-family:"Tajawal"; font-weight:900; font-size:clamp(44px,10vw,96px); line-height:1;
  color:transparent; background:var(--metal); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 10px 40px rgba(201,162,74,.35))}
.proof__cap{max-width:52ch; margin:22px auto 0; color:var(--muted); text-align:center}
.proof__many{max-width:60ch; margin:clamp(40px,6vw,64px) auto 0; text-align:center;
  font-family:"Tajawal"; font-weight:500; font-size:clamp(18px,2.5vw,23px); line-height:1.7; color:#E7E2D8}

/* ---------- jamal podcast (lite youtube) ---------- */
.podcast{max-width:760px; margin:clamp(30px,5vw,44px) auto 0}
.podcast__frame{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:#000; cursor:pointer; border:1px solid var(--line-gold);
  box-shadow:var(--glow-gold), 0 40px 90px -50px #000}
.podcast__poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.podcast__frame::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}
.podcast__frame.is-loaded{cursor:default}
.podcast__frame.is-loaded::after,.podcast__frame.is-loaded .podcast__play,.podcast__frame.is-loaded .podcast__tag{display:none}
.podcast__play{position:absolute; inset:0; margin:auto; z-index:2; width:84px; height:84px;
  display:grid; place-items:center; border-radius:50%; background:var(--metal); color:#1A1407;
  box-shadow:0 18px 50px -12px rgba(201,162,74,.8); transition:transform .3s var(--ease)}
.podcast__frame:hover .podcast__play{transform:scale(1.06)}
.podcast__play svg{width:32px; height:32px; margin-inline-start:3px}
.podcast__tag{position:absolute; inset-block-start:14px; inset-inline-start:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; font-family:"Tajawal"; font-weight:700; font-size:12.5px;
  color:var(--paper); padding:6px 12px; border-radius:var(--r-btn);
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14)}
.podcast__live{width:7px; height:7px; border-radius:50%; background:#E0654A;
  box-shadow:0 0 0 0 rgba(224,101,74,.7); animation:pulse 2s infinite}
.podcast__iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}
.podcast__cap{margin-top:16px; text-align:center; color:var(--muted); font-size:15px; font-family:"Tajawal"; font-weight:500}
.cred{list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:clamp(40px,6vw,60px); max-width:860px; margin-inline:auto}
.cred li{position:relative; border-radius:var(--r); padding:26px 16px; overflow:hidden;
  background:linear-gradient(180deg,#17171C,#101013); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease)}
.cred li:hover{border-color:var(--line-gold); transform:translateY(-4px);
  box-shadow:0 18px 38px -24px rgba(201,162,74,.5), inset 0 1px 0 rgba(255,255,255,.06)}
.cred__ic{width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-gold); color:var(--gold-400)}
.cred__ic svg{width:24px; height:24px}
.cred__n{font-family:"Tajawal"; font-weight:900; font-size:clamp(24px,3.4vw,32px); line-height:1;
  color:transparent; background:var(--metal); -webkit-background-clip:text; background-clip:text}
.cred__l{font-size:13px; color:var(--muted); line-height:1.4}

/* ---------- trust badges (gold micro-row) ---------- */
.trust{display:flex; flex-wrap:wrap; justify-content:center; gap:9px 16px; margin-top:18px}
.trust__item{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted)}
.trust__item svg{width:15px; height:15px; color:var(--gold-500); flex:none}
.trust__item b{color:var(--paper); font-weight:700}
.trust--card{margin-top:20px; padding:14px 18px; border:1px solid var(--line);
  border-radius:var(--r); background:rgba(255,255,255,.015)}

/* ---------- award credibility card ---------- */
.award{display:grid; grid-template-columns:minmax(0,290px) 1fr; gap:clamp(20px,4vw,38px); align-items:center;
  max-width:860px; margin:clamp(42px,6vw,62px) auto 0; padding:clamp(16px,2.6vw,22px);
  border-radius:var(--r-lg); border:1px solid var(--line-gold);
  background:linear-gradient(180deg,#17171C,#101013); box-shadow:var(--glow-gold)}
.award__img{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.award__img img{width:100%; height:auto; display:block}
.award__body{display:flex; flex-direction:column; gap:11px; text-align:start}
.award__badge{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:"Tajawal"; font-weight:800; font-size:12px; letter-spacing:.03em; color:#1A1407;
  padding:6px 13px; border-radius:var(--r-chip); background:var(--metal)}
.award__badge svg{width:14px; height:14px}
.award__title{font-family:"Tajawal"; font-weight:900; font-size:clamp(20px,2.8vw,27px); line-height:1.25}
.award__sub{color:var(--muted); font-size:15px; line-height:1.65}

/* ---------- promise ---------- */
.promise__lead{font-family:"Tajawal"; font-weight:800; font-size:clamp(24px,4vw,40px); margin-block:10px 20px; line-height:1.25}
.promise__body{color:var(--muted); font-size:clamp(16px,2.2vw,19px); max-width:54ch; margin-inline:auto}

/* ---------- qualify ---------- */
.qualify{background:linear-gradient(180deg,var(--ink-900),var(--ink-950))}
.qualify__h{font-size:clamp(23px,3.8vw,38px); font-weight:800; line-height:1.35; color:#E7E2D8}
.qualify__p{margin-top:18px; font-family:"Tajawal"; font-weight:900; font-size:clamp(26px,5vw,48px)}

/* ---------- offer ticket ---------- */
.ticket{position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#17171C,#121216); border:1px solid var(--line-gold);
  padding:clamp(28px,5vw,44px); box-shadow:var(--glow-gold)}
.ticket::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:var(--metal)}
.ticket__sheen{position:absolute; inset-block-start:-35%; inset-inline:0; margin-inline:auto; width:85%; height:70%;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,162,74,.15),transparent 70%); pointer-events:none}
.ticket__top{text-align:center; margin-bottom:24px}
.ticket__tag{display:block; font-family:"Tajawal"; font-weight:900; font-size:clamp(22px,3.4vw,30px)}
.ticket__sub{display:block; margin-top:6px; color:var(--gold-400); font-weight:600; font-size:14px}
.ticket__list{list-style:none; padding:0; margin:0 auto 26px; max-width:400px; display:grid; gap:13px}
.ticket__list li{display:flex; align-items:center; gap:12px; font-family:"Tajawal"; font-weight:500;
  font-size:16.5px; color:#E7E2D8}
.ic--chk{width:21px; height:21px; flex:none; color:var(--gold-400);
  background:rgba(255,255,255,.05); border:1px solid var(--line-gold); border-radius:50%; padding:3px}
.ticket__price{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px; margin-bottom:24px;
  padding-block:22px; border-block:1px solid var(--line)}
.ticket__price-k{color:var(--faint); font-size:15px}
.ticket__price-v{display:inline-block; font-family:"Tajawal"; font-weight:900; font-size:clamp(52px,9vw,76px);
  line-height:1.18; padding-block:.06em; letter-spacing:-.01em;
  color:transparent; background:var(--metal); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 6px 22px rgba(201,162,74,.25))}
.ticket__price-only{color:var(--muted); font-size:16px}
.ticket__scarcity{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  color:var(--muted); font-size:13.5px}

/* ---------- final cta ---------- */
.finalcta{overflow:hidden; text-align:center;
  background:linear-gradient(180deg,var(--ink-950),#0a0805)}
.finalcta__glow{position:absolute; inset-block-end:-30%; inset-inline-start:50%; transform:translateX(-50%);
  width:min(700px,110vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle,rgba(201,162,74,.22),transparent 62%)}
.finalcta .wrap{position:relative; z-index:2}
.finalcta__h{font-size:clamp(26px,4.6vw,46px); font-weight:900; max-width:18ch; margin-inline:auto}
.finalcta__p{margin-top:16px; margin-bottom:34px; font-family:"Tajawal"; font-weight:700;
  font-size:clamp(18px,2.6vw,24px); color:var(--gold-300)}

/* the final-cta button gets a gold fill for max punch */
.finalcta .btn--dark{background:var(--metal); color:#1A1407; border:none;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 20px 50px -16px rgba(201,162,74,.8)}
.finalcta .btn--dark:hover{transform:translateY(-2px); background:var(--metal); filter:brightness(1.05)}


/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); padding-block:clamp(40px,6vw,60px); background:#070708}
.footer__inner{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}
.footer__name{font-family:"Tajawal"; font-weight:800; font-size:18px; color:var(--paper); letter-spacing:-.01em}
.footer__social{display:flex; gap:14px}
.footer__social a{width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--muted); transition:.25s var(--ease)}
.footer__social a:hover{color:var(--gold-400); border-color:var(--line-gold); transform:translateY(-2px)}
.footer__social .ic{width:19px; height:19px}
.footer__disclaimer{max-width:60ch; color:var(--faint); font-size:13px; line-height:1.7}
.footer__copy{color:var(--faint); font-size:12.5px}
.footer__name.ltr{letter-spacing:.3em; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent}
.footer__sub{color:var(--muted); font-size:13px; margin-top:-10px}

/* ---------- section sub ---------- */
.sec-sub{color:var(--muted); margin-top:12px; max-width:52ch; margin-inline:auto; font-size:clamp(15px,2vw,18px); line-height:1.65}

/* ---------- curriculum ---------- */
.curriculum{background:var(--ink-900)}
.day{margin-top:clamp(32px,5vw,52px)}
.day__head{display:flex; align-items:center; gap:14px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.day__badge{font-family:"Tajawal"; font-weight:800; font-size:13px; letter-spacing:.03em; color:#1A1407;
  background:var(--metal); padding:7px 14px; border-radius:var(--r-chip)}
.day__title{font-family:"Tajawal"; font-weight:900; font-size:clamp(19px,2.8vw,27px)}
.axes{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.axis{position:relative; border-radius:var(--r); padding:24px;
  background:linear-gradient(180deg,#17171C,#101013); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .3s, transform .3s var(--ease)}
.axis:hover{border-color:var(--line-gold); transform:translateY(-3px)}
.axis__n{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:6px;
  font-family:"Tajawal"; font-weight:900; font-size:14px; color:#1A1407; background:var(--metal); margin-bottom:14px}
.axis__title{font-family:"Tajawal"; font-weight:800; font-size:clamp(17px,2.2vw,21px); margin-bottom:15px}
.axis__list{list-style:none; padding:0; display:grid; gap:10px}
.axis__list li{position:relative; padding-inline-start:20px; color:var(--muted); font-size:15px; line-height:1.5}
.axis__list li::before{content:""; position:absolute; inset-inline-start:0; inset-block-start:9px;
  width:6px; height:6px; border-radius:50%; background:var(--gold-500)}

/* ---------- results strip ---------- */
.results{max-width:560px; margin:clamp(32px,5vw,46px) auto 0; border-radius:var(--r);
  background:linear-gradient(180deg,#17171C,#101013); border:1px solid var(--line-gold);
  box-shadow:var(--glow-gold); overflow:hidden}
.results__head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line)}
.results__badge{display:inline-flex; align-items:center; gap:8px; font-family:"Tajawal"; font-weight:700; font-size:13.5px; color:var(--gold-300)}
.results__date{font-size:12px; color:var(--faint); font-feature-settings:"tnum"}
.results__list{list-style:none; padding:6px 0; margin:0}
.results__list li{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px;
  padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04)}
.results__list li:last-child{border-bottom:none}
.r-sym{font-family:"Tajawal"; font-weight:800; font-size:15px; color:var(--paper); letter-spacing:.02em}
.r-dir{font-size:12.5px; color:var(--faint)}
.r-val{font-family:"Tajawal"; font-weight:900; font-size:16px; color:var(--gold-300); font-feature-settings:"tnum"}
.results__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.02); flex-wrap:wrap}
.results__note{font-size:12.5px; color:var(--muted)}
.results__total{font-family:"Tajawal"; font-weight:700; font-size:14px; color:var(--muted)}
.results__total .ltr{color:var(--gold-300); font-weight:900; font-size:17px; margin-inline-start:6px}

/* ---------- voices / testimonials ---------- */
.vnotes{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:clamp(32px,5vw,46px)}
.vnote{border-radius:var(--r); padding:20px; background:linear-gradient(180deg,#17171C,#101013);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .3s, transform .3s var(--ease)}
.vnote:hover{border-color:var(--line-gold); transform:translateY(-3px)}
.vnote.is-playing{border-color:var(--line-gold)}
.vnote__head{display:flex; align-items:center; gap:12px; margin-bottom:13px}
.vnote__avatar{width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%;
  font-family:"Tajawal"; font-weight:900; font-size:19px; color:#1A1407; background:var(--metal)}
.vnote__id{display:flex; flex-direction:column; gap:2px; margin-inline-end:auto; min-width:0}
.vnote__name{font-family:"Tajawal"; font-weight:800; font-size:16px; color:var(--paper)}
.vnote__tag{font-size:11.5px; color:var(--faint)}
.vnote__seal{width:18px; height:18px; flex:none; color:var(--gold-400)}
.vnote__story{color:var(--muted); font-size:14.5px; line-height:1.6; margin-bottom:16px}
.vnote__player{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-btn);
  background:var(--ink-800); border:1px solid var(--line)}
.vnote__play{width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--metal); color:#1A1407; transition:transform .2s var(--ease)}
.vnote__play:hover{transform:scale(1.06)}
.vnote__play svg{width:18px; height:18px}
.vnote__wave{flex:1; min-width:0; height:30px; display:flex; align-items:center; gap:2px; overflow:hidden; cursor:pointer}
.vnote__wave .bar{flex:1 1 0; min-width:2px; max-width:5px; border-radius:2px; background:var(--line-2); transition:background .12s}
.vnote__wave .bar.on{background:var(--gold-400)}
.vnote__time{font-size:12px; color:var(--faint); font-feature-settings:"tnum"; flex:none; min-width:36px; text-align:center; direction:ltr}

.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px}
.quote{position:relative; border-radius:var(--r); padding:26px 24px; background:linear-gradient(180deg,#17171C,#101013);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.quote__mark{width:30px; height:30px; color:var(--gold-500); margin-bottom:10px}
.quote blockquote{margin:0; color:#E7E2D8; font-size:15.5px; line-height:1.75}
.quote figcaption{display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.quote__name{font-family:"Tajawal"; font-weight:800; font-size:14px; color:var(--paper)}
.quote__tag{font-size:11.5px; color:var(--faint)}
.quote__tag::before{content:"· "; color:var(--gold-500)}

/* ---------- proof screenshots carousel (gold-framed) ---------- */
.proof-shots-head{text-align:center; margin-top:clamp(34px,5vw,52px)}
.proof-shots-label{display:inline-flex; align-items:center; gap:9px; font-family:"Tajawal"; font-weight:700;
  font-size:14px; color:var(--gold-300); padding:8px 16px; border-radius:var(--r-chip); border:1px solid var(--line-gold)}
.proof-shots{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:18px 4px;
  margin-top:18px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gold-600) transparent}
.proof-shots::-webkit-scrollbar{height:6px}
.proof-shots::-webkit-scrollbar-track{background:transparent}
.proof-shots::-webkit-scrollbar-thumb{background:var(--line-gold); border-radius:3px}
.shot{flex:0 0 auto; width:min(300px,74vw); scroll-snap-align:center; margin:0;
  border-radius:var(--r-lg); overflow:hidden; border:2.5px solid transparent;
  background:linear-gradient(var(--ink-950),var(--ink-950)) padding-box, var(--metal) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 26px 60px -28px rgba(201,162,74,.55), 0 18px 50px -30px #000}
.shot img{width:100%; height:auto; display:block}
.proof-shots-hint{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:4px;
  font-size:13px; color:var(--faint); font-family:"Tajawal"; font-weight:600}
.proof-shots-hint svg{width:16px; height:16px; color:var(--gold-500); animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}

/* ---------- pricing anchor ---------- */
.ticket__brand{display:block; font-family:"Tajawal"; font-weight:800; font-size:11px; letter-spacing:.3em;
  color:var(--gold-500); margin-bottom:9px}
/* diagonal red slash over old prices (no horizontal strikethrough) */
.strike{position:relative; display:inline-block; text-decoration:none; line-height:1}
.strike::after{content:""; position:absolute; inset-inline:-9%; top:38%; height:3px; border-radius:3px;
  background:#E0654A; transform:translateY(-50%) rotate(-11deg); transform-origin:center; pointer-events:none}
.ticket__price-old{align-self:center; font-family:"Tajawal"; font-weight:800; font-size:clamp(28px,4.6vw,40px);
  color:var(--faint)}
.ticket__save{display:inline-flex; align-items:center; gap:6px; margin:-4px auto 22px; width:fit-content;
  font-family:"Tajawal"; font-weight:700; font-size:13.5px; color:var(--gold-300);
  padding:7px 15px; border-radius:var(--r-chip); border:1px solid var(--line-gold)}
.cta-anchor{display:inline-flex; align-items:baseline; gap:13px; font-family:"Tajawal"; font-weight:900}
.cta-anchor__now{color:var(--gold-300); font-size:clamp(30px,5.2vw,42px); line-height:1}
.cta-anchor__old{color:var(--faint); font-weight:800; font-size:clamp(21px,3.6vw,28px); line-height:1}
.cta-anchor__old.strike::after{height:2.5px; inset-inline:-8%}
.cta-anchor--center{justify-content:center; margin:10px auto 26px}

/* ---------- scarcity countdown ---------- */
.countdown{display:flex; flex-direction:column; align-items:center; gap:11px; margin:4px auto 22px}
.countdown__label{display:inline-flex; align-items:center; gap:8px; font-family:"Tajawal"; font-weight:700;
  font-size:13px; color:var(--gold-300)}
.countdown__clock{display:flex; align-items:flex-start; gap:8px}
.cd-seg{display:flex; flex-direction:column; align-items:center; gap:5px; min-width:62px;
  padding:11px 8px 9px; border-radius:var(--r); background:linear-gradient(180deg,#1b1b20,#101013);
  border:1px solid var(--line-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cd-seg b{font-family:"Tajawal"; font-weight:900; font-size:28px; line-height:1; color:transparent;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; font-variant-numeric:tabular-nums}
.cd-seg i{font-style:normal; font-size:10px; color:var(--faint); letter-spacing:.02em}
.cd-sep{font-family:"Tajawal"; font-weight:900; font-size:24px; color:var(--gold-600); line-height:1; padding-top:11px}
/* compact variant for the hero */
.countdown--mini{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px; margin:2px auto 0}
.countdown--mini .countdown__label{font-size:13.5px; color:var(--muted)}
.countdown--mini .countdown__clock{gap:7px}
.countdown--mini .cd-seg{flex-direction:column; align-items:center; gap:3px; min-width:50px; padding:8px 8px 6px}
.countdown--mini .cd-seg b{font-size:23px}
.countdown--mini .cd-seg i{font-size:9.5px}
.countdown--mini .cd-sep{font-size:19px; padding-top:7px}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{position:fixed; inset-block-end:0; inset-inline:0; z-index:90; display:none;
  align-items:center; justify-content:center; gap:9px; padding-block:15px;
  font-family:"Tajawal"; font-weight:800; font-size:16px; color:#1A1407; background:var(--metal);
  box-shadow:0 -10px 30px -8px rgba(0,0,0,.6); transform:translateY(100%); transition:transform .35s var(--ease)}
.sticky-cta .ic{width:18px; height:18px}
.sticky-cta.is-visible{transform:none}

/* ---------- reveal (JS-gated so no-JS shows everything) ---------- */
html.js [data-reveal]{opacity:0; transform:translateY(22px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .story__grid{grid-template-columns:1fr; gap:28px}
  .story__photo{max-width:420px; margin-inline:auto}
  .award{grid-template-columns:1fr; gap:20px; text-align:center}
  .award__img{max-width:340px; margin-inline:auto}
  .award__body{align-items:center; text-align:center}
  .axes,.vnotes,.quotes{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16px; padding-bottom:72px} /* clear the fixed sticky CTA */
  .qcards{grid-template-columns:1fr; gap:12px}
  .cred{grid-template-columns:repeat(2,1fr)}
  .sticky-cta{display:flex}
  .topbar__cta{display:none}
  .journey__arrow{transform:rotate(-90deg)}
  .journey{flex-direction:column}
  .journey__step{width:100%}
  .player__play{width:74px; height:74px}
  .player__tri{width:28px; height:28px}
}
@media (max-width:380px){
  .badges{gap:7px}
  .chip{font-size:11.5px; padding-inline:10px}
  .ticket__price-v{font-size:46px}
  .ticket__price-old{font-size:24px}
  .cta-anchor__now{font-size:30px}
  .cta-anchor__old{font-size:20px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js [data-reveal]{opacity:1 !important; transform:none !important}
  .player__ring,.dot{animation:none}
  .timeline{--p:1}
}