/* ══════════════════════════════════════════════════════════════════════
   TOPA TRADERS — خارج السوق
   Art Direction سينمائي خاص بهذه الصفحة وحدها.
   ══════════════════════════════════════════════════════════════════════
   • ملف مستقل تماماً: لا يعتمد على أي ملف تنسيق آخر في القالب.
   • مسارات الخطوط نسبية لأن Kajabi لا يعالج Liquid داخل ملفات .css،
     والمسار النسبي يُحل مقابل مجلد assets نفسه فيعمل دائماً.
   • لا شيء يبدأ مخفياً: الإخفاء لا يُفعّل إلا تحت الصنف kh-armed
     الذي يضيفه JavaScript بعد التأكد من عمله.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("alexandria-arabic.woff2") format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,
    U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,
    U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF;
}
@font-face{
  font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("alexandria-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── كتم واجهة Kajabi الافتراضية داخل هذه الصفحة وحدها ── */
body:has(.kh) #section-header,
body:has(.kh) #section-footer,
body:has(.kh) #section-exit_pop,
body:has(.kh) #section-two_step{display:none!important}
html.kh-host #section-header,
html.kh-host #section-footer,
html.kh-host #section-exit_pop,
html.kh-host #section-two_step{display:none!important}
html.kh-host body{background:#000!important}
html.kh-host main{padding:0!important;margin:0!important;min-height:0!important}

/* ══════════════════ 1 · الرموز ══════════════════ */
.kh{
  /* أسود بدرجات — العتمة نفسها مادة في التصميم */
  --void:#000;
  --deep:#040505;
  --ash:#080A09;
  --slate:#0E1110;
  --steel:#161A18;

  /* أبيض دافئ · رمادي سينمائي · فضي داكن */
  --warm:#F3F1ED;
  --mist:#9AA09C;
  --dim:#6B716E;
  --silver:#7E8582;

  /* الأخضر ضوء وإشارة، لا إطار */
  --acc:#06CE2A;
  --acc-lt:#2BE84D;
  /* احتياط ثابت للمتصفحات الأقدم */
  --a06:rgba(6,206,42,.06);
  --a10:rgba(6,206,42,.10);
  --a18:rgba(6,206,42,.18);
  --a30:rgba(6,206,42,.30);
  --a55:rgba(6,206,42,.55);

  --grain:.05;                 /* شدة الحبيبات — تُضبط من Kajabi */
  --sp:1;                      /* معامل السرعة: 1 عادي · 1.45 بطيء */
  --ez:cubic-bezier(.22,1,.36,1);
  --ez-o:cubic-bezier(.16,1,.3,1);

  --font:"Alexandria","Tajawal",Arial,"Segoe UI",Tahoma,sans-serif;
  --wrap:1180px;
  --pad:clamp(20px,4.4vw,40px);

  position:relative;
  font-family:var(--font);
  background:var(--void);
  color:var(--mist);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.kh *,.kh *::before,.kh *::after{box-sizing:border-box}
.kh img{display:block;max-width:100%}
.kh a{color:inherit;text-decoration:none}
.kh h1,.kh h2,.kh h3,.kh p{margin:0}
.kh :focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}

.kh-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* عند دعم color-mix تُشتق كل الدرجات من --acc، فيغيّر إعداد اللون
   في Kajabi الإضاءة والحواف والتوهّج كلها لا الأزرار وحدها. */
@supports (color: color-mix(in srgb, red 50%, transparent)){
  .kh{
    --a06:color-mix(in srgb,var(--acc) 6%,transparent);
    --a10:color-mix(in srgb,var(--acc) 10%,transparent);
    --a18:color-mix(in srgb,var(--acc) 18%,transparent);
    --a30:color-mix(in srgb,var(--acc) 30%,transparent);
    --a55:color-mix(in srgb,var(--acc) 55%,transparent);
    --acc-lt:color-mix(in srgb,var(--acc) 78%,#fff);
  }
}

/* ══════════════════ 2 · طبقات الجو العام ══════════════════ */

/* حبيبات فيلم — طبقة ثابتة خفيفة جداً */
.kh-grain{position:fixed;inset:-120px;z-index:60;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
.kh-anim .kh-grain{animation:khGrain 1.1s steps(4) infinite}
@keyframes khGrain{
  0%{transform:translate3d(0,0,0)}     25%{transform:translate3d(-6%,3%,0)}
  50%{transform:translate3d(4%,-5%,0)} 75%{transform:translate3d(-3%,-2%,0)}
  100%{transform:translate3d(0,0,0)}}

/* Vignette هادئة حول أطراف المشهد */
.kh-vig{position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(118% 78% at 50% 42%,transparent 42%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.8) 100%)}

/* خط تقدّم التجربة */
.kh-prog{position:fixed;top:0;right:0;left:0;height:2px;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05))}
.kh-prog__b{height:100%;width:0;margin-right:auto;
  background:linear-gradient(90deg,var(--a30),var(--acc));
  box-shadow:0 0 12px var(--a55);transition:width .12s linear}

/* ══════════════════ 3 · ترويسة الشعار ══════════════════ */
.kh-top{position:relative;z-index:20}
.kh-top__in{display:flex;align-items:center;justify-content:center;height:74px}
.kh-mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:11.4px;font-weight:600;letter-spacing:.24em;color:var(--silver);
  transition:color .4s var(--ez)}
.kh-mark img{width:30px;height:30px;object-fit:contain;
  filter:grayscale(1) brightness(1.4);opacity:.72;transition:opacity .4s,filter .4s}
.kh-mark:hover{color:var(--warm)}
.kh-mark:hover img{opacity:1;filter:none}

/* ══════════════════ 4 · المشهد الأول — الافتتاحية ══════════════════ */
.kh-open{position:relative;min-height:90svh;min-height:90vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(28px,4vw,52px) clamp(22px,3vw,40px);overflow:hidden}

/* ضوء حجمي مصنوع بالكامل بـCSS */
.kh-open__beam{position:absolute;top:-32%;right:50%;width:min(1050px,150vw);height:min(760px,105vh);
  transform:translateX(50%) rotate(-7deg);pointer-events:none;filter:blur(46px);opacity:.62;
  background:
    conic-gradient(from 178deg at 50% 0%,transparent 0deg,var(--a10) 9deg,transparent 20deg),
    conic-gradient(from 165deg at 50% 0%,transparent 0deg,rgba(255,255,255,.045) 7deg,transparent 15deg)}
.kh-open__haze{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 46% at 50% 26%,rgba(255,255,255,.045),transparent 70%)}

/* نبضة الضوء الافتتاحية — «صوت بصري» بلا أي صوت فعلي */
.kh-pulse{position:absolute;top:38%;right:50%;translate:50% 0;width:min(560px,86vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--a55),transparent);opacity:0;pointer-events:none}
.kh-intro .kh-pulse{animation:khPulse calc(2200ms * var(--sp)) var(--ez-o) .1s 1 both}
@keyframes khPulse{
  0%{opacity:0;transform:scaleX(.04);filter:blur(0)}
  16%{opacity:1;transform:scaleX(.12);filter:blur(.4px)}
  46%{opacity:.85;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1.25);filter:blur(3px)}}

.kh-open__in{position:relative;z-index:6;text-align:center}
.kh-kick{display:block;font-size:clamp(10.2px,1.1vw,11.6px);font-weight:500;
  letter-spacing:.34em;color:var(--dim);text-transform:none}
.kh-open__mark{margin-bottom:22px}

/* العنوان: كشف بقناع + تباعد حروف يهدأ تدريجياً */
.kh-title{margin-top:clamp(20px,2.6vw,30px);
  font-size:clamp(40px,10vw,120px);font-weight:600;line-height:1.06;color:var(--warm);
  letter-spacing:.02em}
.kh-title .kh-msk{display:block;overflow:hidden;padding-block:.06em}
.kh-title .kh-msk > span{display:block}
.kh-line{margin-top:clamp(16px,2vw,24px);font-size:clamp(14.5px,1.8vw,19px);
  color:var(--mist);letter-spacing:.02em}

/* ══ المشهد المجرد: نافذة زجاجية في العمق ══ */
.kh-stage{position:relative;z-index:4;margin-top:clamp(26px,4vw,54px);
  height:clamp(210px,30vw,330px);
  perspective:1200px;perspective-origin:50% 38%}
.kh-stage__d{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translate3d(0,0,0) rotateX(var(--rx,0deg))}

/* الأرضية: شبكة ثلاثية الأبعاد تظهر بعمق ثم تتلاشى */
.kh-floor{position:absolute;right:50%;bottom:-6%;width:210%;height:76%;
  translate:50% 0;transform:rotateX(74deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 1px,transparent 1px 62px);
  -webkit-mask-image:linear-gradient(0deg,transparent 4%,#000 42%,transparent 96%);
          mask-image:linear-gradient(0deg,transparent 4%,#000 42%,transparent 96%);
  opacity:.9}
/* انعكاس أخضر على الأرض */
.kh-refl{position:absolute;right:50%;bottom:2%;width:min(430px,64vw);height:78px;translate:50% 0;
  background:radial-gradient(closest-side,var(--a18),transparent 72%);filter:blur(15px)}

/* إطار الشاشة/النافذة المجرد */
.kh-glass{position:absolute;right:50%;top:6%;translate:50% 0;
  width:min(500px,76vw);height:70%;border-radius:12px;
  transform:translateZ(46px);
  background:linear-gradient(168deg,rgba(255,255,255,.052),rgba(255,255,255,.008) 62%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 46px 100px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden}
.kh-glass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.07) 50%,transparent 64%);
  transform:translateX(-130%)}
.kh-anim .kh-glass::after{animation:khSweep calc(7s * var(--sp)) var(--ez-o) 1.6s infinite}
@keyframes khSweep{0%{transform:translateX(-130%)}38%,100%{transform:translateX(130%)}}

/* خط السعر الضوئي — بسيط جداً، ليس واجهة منصة */
.kh-price{position:absolute;inset:0;width:100%;height:100%}
.kh-price path{fill:none;stroke:var(--acc);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px var(--a55))}
.kh-anim .kh-price path{stroke-dasharray:600;stroke-dashoffset:600;
  animation:khDraw calc(3.6s * var(--sp)) var(--ez-o) .5s 1 forwards}
@keyframes khDraw{to{stroke-dashoffset:0}}
.kh-price .kh-base{stroke:rgba(255,255,255,.09);stroke-width:1;filter:none;
  stroke-dasharray:none;stroke-dashoffset:0;animation:none}

/* مؤشر صغير يبحث عن قرار */
.kh-cursor{position:absolute;top:52%;right:26%;width:7px;height:7px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px var(--a18),0 0 18px var(--a55)}
.kh-anim .kh-cursor{animation:khSeek calc(9s * var(--sp)) ease-in-out 1s infinite}
@keyframes khSeek{
  0%{top:52%;right:26%;opacity:.5}   18%{top:38%;right:41%;opacity:1}
  36%{top:57%;right:52%;opacity:.75} 54%{top:31%;right:64%;opacity:1}
  72%{top:47%;right:76%;opacity:.65} 100%{top:52%;right:26%;opacity:.5}}

/* كلمات تظهر للحظة ثم تختفي */
.kh-words{position:absolute;inset:0;pointer-events:none}
/* بلا JavaScript تبقى الكلمات ظاهرة بهدوء؛ الحركة تتولّاها عند تفعيلها */
.kh-words b{position:absolute;font-size:clamp(11px,1.3vw,13.5px);font-weight:500;
  letter-spacing:.22em;color:var(--silver);opacity:.55;white-space:nowrap}
.kh-anim .kh-words b{opacity:0}
.kh-words b:nth-child(1){top:16%;right:11%}
.kh-words b:nth-child(2){top:70%;right:19%}
.kh-words b:nth-child(3){top:24%;left:12%;right:auto}
.kh-words b:nth-child(4){top:76%;left:17%;right:auto}
.kh-anim .kh-words b{animation:khWord calc(13s * var(--sp)) ease-in-out infinite}
.kh-anim .kh-words b:nth-child(1){animation-delay:calc(1.6s * var(--sp))}
.kh-anim .kh-words b:nth-child(2){animation-delay:calc(4.6s * var(--sp))}
.kh-anim .kh-words b:nth-child(3){animation-delay:calc(7.6s * var(--sp))}
.kh-anim .kh-words b:nth-child(4){animation-delay:calc(10.4s * var(--sp))}
@keyframes khWord{
  0%,100%{opacity:0;filter:blur(4px);transform:translateY(6px)}
  6%{opacity:.9;filter:blur(0);transform:none}
  15%{opacity:.9;filter:blur(0);transform:none}
  22%{opacity:0;filter:blur(4px);transform:translateY(-6px)}}

/* مؤشر التمرير */
.kh-scroll{position:relative;z-index:6;margin-top:clamp(20px,2.6vw,32px);text-align:center;
  font-size:11.6px;letter-spacing:.2em;color:var(--dim)}
.kh-scroll i{display:block;width:1px;height:44px;margin:14px auto 0;
  background:linear-gradient(180deg,var(--a55),transparent)}
.kh-anim .kh-scroll i{animation:khDrop calc(2.4s * var(--sp)) var(--ez-o) infinite}
@keyframes khDrop{0%{transform:scaleY(0);transform-origin:top;opacity:0}
  35%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* ══════════════════ 5 · المشهد الثاني — ما لا يظهر على الشارت ══════════════════ */
.kh-tell{position:relative;background:linear-gradient(180deg,var(--void),var(--deep) 40%,var(--void))}
.kh-tell__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}

.kh-tell__sticky{position:sticky;top:0;height:100svh;height:100vh;
  display:flex;align-items:center;justify-content:center}
.kh-vis{position:relative;width:100%;aspect-ratio:1/1;max-width:430px;
  display:grid;place-items:center}
.kh-vis__ring{position:absolute;inset:12%;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  transition:transform calc(1s * var(--sp)) var(--ez),opacity calc(.8s * var(--sp)) var(--ez),
             border-color calc(.8s * var(--sp)) var(--ez)}
.kh-vis__ring:nth-child(2){inset:24%}
.kh-vis__ring:nth-child(3){inset:36%}
.kh-vis__core{position:relative;width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle,var(--a55),transparent 66%);filter:blur(3px);
  transition:transform calc(1s * var(--sp)) var(--ez),opacity calc(.8s * var(--sp)) var(--ez)}
/* الإضاءة والعمق يتغيّران مع كل مقطع */
.kh-vis[data-at="0"] .kh-vis__core{transform:scale(.55);opacity:.4}
.kh-vis[data-at="1"] .kh-vis__core{transform:scale(.8);opacity:.6}
.kh-vis[data-at="1"] .kh-vis__ring:nth-child(1){transform:scale(1.06);border-color:var(--a18)}
.kh-vis[data-at="2"] .kh-vis__core{transform:scale(1.05);opacity:.8}
.kh-vis[data-at="2"] .kh-vis__ring:nth-child(2){transform:scale(1.1);border-color:var(--a18)}
.kh-vis[data-at="3"] .kh-vis__core{transform:scale(.7);opacity:.55}
.kh-vis[data-at="3"] .kh-vis__ring{transform:scale(.9);border-color:rgba(255,255,255,.12)}
.kh-vis[data-at="4"] .kh-vis__core{transform:scale(1.5);opacity:1}
.kh-vis[data-at="4"] .kh-vis__ring{border-color:var(--a30)}
.kh-vis__glow{position:absolute;inset:-14%;pointer-events:none;
  background:radial-gradient(closest-side,var(--a10),transparent 72%);
  transition:opacity calc(1s * var(--sp)) var(--ez);opacity:.5}
.kh-vis[data-at="4"] .kh-vis__glow{opacity:1}

.kh-steps{display:flex;flex-direction:column}
.kh-step{min-height:76svh;min-height:76vh;display:flex;align-items:center}
.kh-step p{font-size:clamp(19px,2.9vw,32px);font-weight:500;line-height:1.62;
  color:var(--dim);letter-spacing:-.01em;
  transition:color calc(.7s * var(--sp)) var(--ez),transform calc(.7s * var(--sp)) var(--ez)}
.kh-step.is-at p{color:var(--warm);transform:translateX(-6px)}
.kh-step--end p{color:var(--silver)}
.kh-step--end.is-at p{color:var(--acc)}

/* ══════════════════ 6 · المشهد الثالث — الفصول ══════════════════ */
.kh-chs{position:relative;background:var(--void)}
.kh-ch{position:relative;min-height:82svh;min-height:82vh;display:flex;align-items:center;
  overflow:hidden;border-top:1px solid rgba(255,255,255,.045)}
.kh-ch__n{position:absolute;z-index:1;pointer-events:none;user-select:none;
  font-size:clamp(180px,34vw,420px);font-weight:700;line-height:.78;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  opacity:.9}
.kh-ch__x{position:relative;z-index:3;max-width:620px}
.kh-ch__t{font-size:clamp(30px,5.4vw,64px);font-weight:600;line-height:1.18;color:var(--warm)}
.kh-ch__d{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(14.5px,1.75vw,18px);
  line-height:1.95;color:var(--mist);max-width:46ch}
.kh-ch__lt{position:absolute;pointer-events:none;filter:blur(60px)}

/* كل فصل بتكوين وإضاءة مختلفة */
.kh-ch:nth-child(3n+1) .kh-ch__n{top:8%;left:2%}
.kh-ch:nth-child(3n+1) .kh-ch__lt{top:-24%;right:-8%;width:640px;height:640px;
  background:radial-gradient(circle,var(--a18),transparent 66%)}
.kh-ch:nth-child(3n+2){justify-content:flex-end;text-align:left}
.kh-ch:nth-child(3n+2) .kh-ch__n{bottom:2%;right:1%}
.kh-ch:nth-child(3n+2) .kh-ch__x{margin-inline-start:auto}
.kh-ch:nth-child(3n+2) .kh-ch__d{margin-inline-start:auto}
.kh-ch:nth-child(3n+2) .kh-ch__lt{bottom:-28%;left:-10%;width:700px;height:700px;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 66%)}
.kh-ch:nth-child(3n+3){justify-content:center;text-align:center}
.kh-ch:nth-child(3n+3) .kh-ch__n{top:50%;right:50%;translate:50% -50%}
.kh-ch:nth-child(3n+3) .kh-ch__x{margin-inline:auto}
.kh-ch:nth-child(3n+3) .kh-ch__d{margin-inline:auto}
.kh-ch:nth-child(3n+3) .kh-ch__lt{top:50%;right:50%;translate:50% -50%;
  width:820px;height:520px;background:radial-gradient(closest-side,var(--a10),transparent 70%)}

/* ══════════════════ 7 · المشهد الرابع — المرآة ══════════════════ */
.kh-mir{position:relative;background:linear-gradient(180deg,var(--void),var(--ash) 50%,var(--void));
  padding-block:clamp(70px,10vw,140px)}
.kh-mir__l{display:flex;flex-direction:column;gap:clamp(34px,5.4vw,74px);
  max-width:820px;margin-inline:auto;text-align:center}
.kh-mir__l p{font-size:clamp(17px,2.5vw,28px);font-weight:500;line-height:1.66;color:var(--silver)}
.kh-mir__l p em{font-style:normal;color:var(--warm)}
.kh-mir__end{margin-top:clamp(46px,6.4vw,88px);padding-top:clamp(28px,3.6vw,44px);
  border-top:1px solid rgba(255,255,255,.07);
  font-size:clamp(15.5px,2vw,21px);line-height:1.82;color:var(--warm);
  max-width:620px;margin-inline:auto;text-align:center}

/* ══════════════════ 8 · المشهد الخامس — ما تأخذه معك ══════════════════ */
.kh-take{position:relative;background:var(--void);padding-block:clamp(64px,9vw,124px);overflow:hidden}
.kh-take__h{text-align:center;font-size:clamp(11px,1.15vw,12px);letter-spacing:.3em;color:var(--dim)}
.kh-orbit{position:relative;margin:clamp(30px,4.6vw,58px) auto 0;
  width:min(660px,92vw);aspect-ratio:1/.72}
.kh-core{position:absolute;top:50%;right:50%;translate:50% -50%;
  width:clamp(84px,13vw,120px);height:clamp(84px,13vw,120px);border-radius:50%;
  background:radial-gradient(circle,var(--a55),var(--a10) 52%,transparent 72%);
  filter:blur(2px)}
.kh-anim .kh-core{animation:khBreath calc(5.4s * var(--sp)) ease-in-out infinite}
@keyframes khBreath{0%,100%{transform:translate(50%,-50%) scale(1);opacity:.85}
  50%{transform:translate(50%,-50%) scale(1.1);opacity:1}}
.kh-orb{position:absolute;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:min(190px,42vw);text-align:center}
.kh-orb i{display:block;width:12px;height:12px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 6px var(--a10),0 0 22px var(--a55)}
.kh-orb b{font-size:clamp(13.6px,1.6vw,16px);font-weight:600;color:var(--warm);line-height:1.6}
.kh-orb:nth-child(2){top:4%;right:2%}
.kh-orb:nth-child(3){top:4%;left:2%}
.kh-orb:nth-child(4){bottom:2%;right:50%;translate:50% 0}
/* خيوط ضوء تشدّ الطبقات نحو المركز */
.kh-orbit__t{position:absolute;top:50%;right:50%;width:1px;height:1px;pointer-events:none}
.kh-orbit__t span{position:absolute;right:0;top:0;height:1px;transform-origin:0 0;
  background:linear-gradient(90deg,var(--a30),transparent)}
.kh-orbit__t span:nth-child(1){width:clamp(140px,22vw,240px);rotate:-146deg}
.kh-orbit__t span:nth-child(2){width:clamp(140px,22vw,240px);rotate:-34deg}
.kh-orbit__t span:nth-child(3){width:clamp(110px,16vw,180px);rotate:90deg}

/* ══════════════════ 9 · المشهد السادس — التسجيل ══════════════════ */
.kh-join{position:relative;background:linear-gradient(180deg,var(--void),var(--deep) 55%,var(--void));
  padding-block:clamp(66px,9vw,124px)}
.kh-join__in{max-width:560px;margin-inline:auto;text-align:center}
.kh-join__t{font-size:clamp(24px,3.6vw,40px);font-weight:600;color:var(--warm);line-height:1.35}
.kh-join__d{margin-top:14px;font-size:clamp(14px,1.6vw,16px);line-height:1.9;color:var(--mist)}
.kh-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;
  margin-top:clamp(20px,2.6vw,28px)}
.kh-facts span{font-size:12.4px;color:var(--silver);letter-spacing:.02em;
  padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}

.kh-form{margin-top:clamp(26px,3.4vw,38px);text-align:start}
.kh-form .form-group{margin-bottom:13px}
.kh-form .form-group label{display:block;margin-bottom:7px;font-size:12.4px;color:var(--silver)}
.kh-form .form-control{width:100%;min-height:52px;padding:0 16px;
  font-family:var(--font);font-size:14.2px;color:var(--warm);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  transition:border-color .3s,background .3s,box-shadow .3s}
.kh-form textarea.form-control{min-height:104px;padding-block:14px;line-height:1.8;resize:vertical}
.kh-form .form-control::placeholder{color:var(--dim)}
.kh-form .form-control:focus{outline:none;border-color:var(--a55);
  background:rgba(255,255,255,.055);box-shadow:0 0 0 4px var(--a10)}
.kh-form select.form-control{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),
                   linear-gradient(135deg,var(--silver) 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 1px),calc(0% + 23px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.kh-form input[type="checkbox"]{width:20px;height:20px;margin-top:2px;
  accent-color:var(--acc);flex:none;cursor:pointer}

.kh-btn{position:relative;overflow:hidden;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:8px;min-height:56px;padding:0 26px;border-radius:12px;
  font-family:var(--font);font-size:14.6px;font-weight:600;color:#001304;cursor:pointer;
  background:var(--acc);border:1px solid var(--acc);
  transition:background .26s,box-shadow .34s var(--ez),transform .18s var(--ez)}
.kh-btn:hover{background:var(--acc-lt);box-shadow:0 20px 46px -20px var(--a55)}
.kh-btn:active{transform:scale(.985)}
/* جذب مغناطيسي خفيف — Desktop فقط */
@media (hover:hover) and (pointer:fine){
  .kh-btn{transform:translate3d(var(--mx,0),var(--my,0),0);
    transition:background .26s,box-shadow .34s var(--ez),transform .26s var(--ez)}
  .kh-btn:active{transform:translate3d(var(--mx,0),var(--my,0),0) scale(.985)}
}
/* الـlabel كله هدف لمس واحد، والمربع مكبّر قليلاً للوضوح */
.kh-form .kh-agree{display:flex;align-items:flex-start;gap:12px;margin-top:6px;
  padding:10px 2px;min-height:48px;cursor:pointer;
  font-size:12.4px;line-height:1.85;color:var(--silver)}
.kh-form .kh-agree:hover{color:var(--warm)}
.kh-form .kh-agree a{color:var(--acc);border-bottom:1px solid var(--a30);padding-block:12px}
.kh-form .kh-agree a:hover{color:var(--acc-lt);border-bottom-color:var(--acc)}
.kh-note{margin-top:16px;font-size:12px;line-height:1.9;color:var(--dim);text-align:center}
.editor-null{padding:22px;border:1px dashed var(--a30);border-radius:12px;
  color:var(--silver);font-size:13.4px;text-align:center;background:var(--a06)}

/* مقطع الفيديو الاختياري — يظهر فقط عند إضافة رابط */
.kh-trailer{position:relative;margin-top:clamp(26px,3.4vw,40px);
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);background:var(--slate)}
.kh-trailer iframe,.kh-trailer video{width:100%;height:100%;border:0;display:block}

/* ══════════════════ 10 · رسالة النجاح ══════════════════ */
.kh-done{max-width:520px;margin-inline:auto;text-align:center}
.kh-done__i{width:56px;height:56px;margin-inline:auto;border-radius:50%;display:grid;place-items:center;
  color:var(--acc);background:var(--a10);border:1px solid var(--a30)}
.kh-done__i svg{width:24px;height:24px}
.kh-done__t{margin-top:20px;font-size:clamp(22px,3.2vw,32px);font-weight:600;color:var(--warm)}
.kh-done__d{margin-top:12px;font-size:14.2px;line-height:1.9;color:var(--mist)}
.kh-done__a{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;
  min-height:50px;padding:0 26px;border-radius:12px;font-size:13.6px;font-weight:600;
  color:var(--acc);background:var(--a06);border:1px solid var(--a30);
  transition:background .26s,border-color .26s,color .26s}
.kh-done__a:hover{background:var(--a10);border-color:var(--acc);color:var(--acc-lt)}

/* ══════════════════ 11 · الخاتمة — آخر لقطة ══════════════════ */
.kh-end{position:relative;min-height:88svh;min-height:88vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:var(--void);overflow:hidden;
  padding-block:clamp(50px,7vw,90px)}
.kh-end__lt{position:absolute;bottom:-32%;right:50%;translate:50% 0;
  width:min(900px,130vw);height:min(560px,72vh);pointer-events:none;filter:blur(70px);opacity:.5;
  background:radial-gradient(closest-side,var(--a18),transparent 70%)}
.kh-end__q{position:relative;z-index:3;font-size:clamp(18px,3vw,30px);font-weight:500;
  line-height:1.62;color:var(--silver);max-width:600px}
.kh-end__t{position:relative;z-index:3;margin-top:clamp(28px,4vw,48px);
  font-size:clamp(34px,8vw,90px);font-weight:600;line-height:1.1;color:var(--warm);
  letter-spacing:.02em}
.kh-end__ft{position:relative;z-index:3;margin-top:clamp(38px,5.4vw,72px);
  display:flex;flex-direction:column;align-items:center;gap:16px}
.kh-end__ft a.kh-site{font-size:12.6px;letter-spacing:.14em;color:var(--silver);
  min-height:44px;display:inline-flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.14);transition:color .3s,border-color .3s}
.kh-end__ft a.kh-site:hover{color:var(--acc);border-bottom-color:var(--a55)}
.kh-legal{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;
  font-size:11.4px;color:var(--dim)}
.kh-legal a{min-height:40px;display:inline-flex;align-items:center;transition:color .25s}
.kh-legal a:hover{color:var(--silver)}

/* ══════════════════ 12 · نظام الظهور ══════════════════
   لا شيء مخفي قبل أن يؤكّد JavaScript عمله بإضافة kh-armed. */
.kh.kh-armed [data-kh]{opacity:0;transform:translateY(22px);
  transition:opacity calc(.9s * var(--sp)) var(--ez),transform calc(.9s * var(--sp)) var(--ez)}
.kh.kh-armed [data-kh].is-in{opacity:1;transform:none}
.kh.kh-armed [data-kh-seq] > *{opacity:0;transform:translateY(24px);
  transition:opacity calc(.85s * var(--sp)) var(--ez),transform calc(.85s * var(--sp)) var(--ez)}
.kh.kh-armed [data-kh-seq].is-in > *{opacity:1;transform:none}
.kh.kh-armed [data-kh-seq].is-in > *:nth-child(1){transition-delay:calc(.06s * var(--sp))}
.kh.kh-armed [data-kh-seq].is-in > *:nth-child(2){transition-delay:calc(.2s * var(--sp))}
.kh.kh-armed [data-kh-seq].is-in > *:nth-child(3){transition-delay:calc(.34s * var(--sp))}
.kh.kh-armed [data-kh-seq].is-in > *:nth-child(4){transition-delay:calc(.48s * var(--sp))}
.kh.kh-armed [data-kh-seq].is-in > *:nth-child(5){transition-delay:calc(.62s * var(--sp))}

/* كشف بقناع للعنوان */
.kh.kh-armed .kh-title .kh-msk > span{transform:translateY(108%);
  transition:transform calc(1.15s * var(--sp)) var(--ez-o)}
.kh.kh-armed .kh-title.is-in .kh-msk > span{transform:none}
/* تباعد الحروف يهدأ مع الظهور */
.kh.kh-armed .kh-title{letter-spacing:.16em;
  transition:letter-spacing calc(1.6s * var(--sp)) var(--ez-o)}
.kh.kh-armed .kh-title.is-in{letter-spacing:.02em}

/* مشهد الافتتاحية يصعد من العتمة */
.kh.kh-armed .kh-stage{opacity:0;transform:translateY(28px) scale(.985);
  transition:opacity calc(1.5s * var(--sp)) var(--ez-o),transform calc(1.5s * var(--sp)) var(--ez-o)}
.kh.kh-armed .kh-stage.is-in{opacity:1;transform:none}

/* الستارة السوداء الافتتاحية */
.kh-curtain{position:fixed;inset:0;z-index:80;background:#000;pointer-events:none;
  opacity:0;visibility:hidden}
.kh-intro .kh-curtain{opacity:1;visibility:visible;
  animation:khCurtain calc(1500ms * var(--sp)) var(--ez-o) 1 forwards}
@keyframes khCurtain{0%,42%{opacity:1}100%{opacity:0;visibility:hidden}}

/* ══════════════════ 13 · التجاوب ══════════════════ */
@media (max-width:1024px){
  .kh-tell__g{gap:clamp(20px,3vw,36px)}
  .kh-vis{max-width:340px}
}
/* على الشاشات الأصغر يتحوّل المشهد الثاني إلى تسلسل رأسي بلا Sticky */
@media (max-width:820px){
  .kh-tell__g{grid-template-columns:1fr}
  .kh-tell__sticky{position:relative;top:auto;height:auto;
    padding-block:clamp(34px,6vw,54px) clamp(10px,2vw,20px)}
  .kh-vis{max-width:min(300px,62vw)}
  .kh-step{min-height:0;padding-block:clamp(30px,6vw,46px)}
  .kh-step p{color:var(--silver)}
  .kh-step.is-at p{transform:none}
  .kh-ch{min-height:0;padding-block:clamp(60px,12vw,96px)}
  .kh-ch:nth-child(3n+2),.kh-ch:nth-child(3n+3){justify-content:flex-start;text-align:start}
  .kh-ch:nth-child(3n+2) .kh-ch__d,.kh-ch:nth-child(3n+3) .kh-ch__d{margin-inline:0}
  .kh-ch:nth-child(3n+3) .kh-ch__n{top:6%;right:auto;left:1%;translate:none}
  .kh-ch:nth-child(3n+2) .kh-ch__n{bottom:auto;top:6%;right:auto;left:1%}
  .kh-ch:nth-child(3n+1) .kh-ch__n{top:5%;left:1%}
}
@media (max-width:680px){
  .kh-top__in{height:64px}
  .kh-open{min-height:88svh;min-height:88vh}
  .kh-stage{height:clamp(180px,52vw,240px)}
  .kh-orbit{aspect-ratio:1/1.15;width:min(360px,92vw)}
  .kh-orb,.kh-orb:nth-child(2),.kh-orb:nth-child(3),.kh-orb:nth-child(4){
    position:static;width:100%;translate:none;inset:auto}
  .kh-orbit{display:flex;flex-direction:column;align-items:center;
    gap:clamp(26px,7vw,40px);aspect-ratio:auto;padding-block:8px}
  .kh-core{position:relative;top:auto;right:auto;translate:none;order:-1}
  .kh-anim .kh-core{animation-name:khBreathM}
  @keyframes khBreathM{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
  .kh-orbit__t{display:none}
  .kh-end{min-height:82svh;min-height:82vh}
}
@media (max-width:400px){
  .kh-mark{font-size:10.4px;letter-spacing:.18em;gap:8px}
  .kh-mark img{width:26px;height:26px}
  .kh-facts span{font-size:11.6px;padding:8px 13px}
}

/* ══════════════════ 14 · احترام تقليل الحركة ══════════════════ */
@media (prefers-reduced-motion:reduce){
  .kh.kh-armed [data-kh],
  .kh.kh-armed [data-kh-seq] > *,
  .kh.kh-armed .kh-stage{opacity:1;transform:none;transition:none}
  .kh.kh-armed .kh-title{letter-spacing:.02em;transition:none}
  .kh.kh-armed .kh-title .kh-msk > span{transform:none;transition:none}
  .kh-curtain,.kh-pulse{display:none}
  .kh *,.kh *::before,.kh *::after{animation:none!important}
  /* لو أُضيف kh-anim قبل تفعيل الإعداد يبقى كل شيء ظاهراً */
  .kh .kh-words b,.kh-anim .kh-words b{opacity:.75}
  .kh .kh-price path,.kh-anim .kh-price path{stroke-dasharray:none;stroke-dashoffset:0}
  .kh .kh-step p{color:var(--warm)}
}