/* ============================================================
   BioPTC — الصفحة الكاملة
   المصدر الحاكم: _design/design.html (لقطة ٨ أغسطس المعتمدة)
   خطوط محلية · لا CDN · لا أصل خارجي
   ============================================================ */

/* ---------- الخطوط ---------- */
@font-face{font-family:"Kufi";font-weight:400;font-display:swap;src:url("../fonts/notokufi-400-ar.woff2") format("woff2")}
@font-face{font-family:"Kufi";font-weight:600;font-display:swap;src:url("../fonts/notokufi-600-ar.woff2") format("woff2")}
@font-face{font-family:"Body";font-weight:400;font-display:swap;src:url("../fonts/cairo-400-ar.woff2") format("woff2")}
@font-face{font-family:"Body";font-weight:700;font-display:swap;src:url("../fonts/cairo-700-ar.woff2") format("woff2")}

/* ---------- اللوحة ---------- */
:root{
  --void:#04100b; --deep:#030b08;
  --ink:#eaf4ee; --ink-soft:rgba(234,244,238,.72); --ink-faint:rgba(234,244,238,.42);
  --emerald:#369775; --petrol:#2b4461; --gold:#d99a3c;
  --em-08:rgba(54,151,117,.08); --em-16:rgba(54,151,117,.16); --em-35:rgba(54,151,117,.35);
  --gd-note:rgba(217,154,60,.62); --gd-line:rgba(217,154,60,.26);
  --ink-mid:rgba(234,244,238,.6);
  --hair:rgba(234,244,238,.1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--deep);color:var(--ink);font-family:"Body","Segoe UI",sans-serif;font-weight:400;
  direction:rtl;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%}
a{color:inherit;text-decoration:none}
svg text{font-family:"Kufi","Segoe UI",sans-serif}
::selection{background:rgba(54,151,117,.35);color:var(--ink)}
a:focus-visible,.cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ عناصر مشتركة ============ */
.wrap{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:0 100px}
.eyebrow{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.22em;color:var(--gold)}
.eyebrow::after{content:"";width:44px;height:1px;background:linear-gradient(to left,var(--gold),transparent)}
h2{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:44px;line-height:1.45;letter-spacing:-.01em}
.lead{font-size:19px;line-height:2;color:var(--ink-soft);max-width:56ch}
.sec{position:relative;background:var(--void);display:flex;flex-direction:column;justify-content:center}
.sec>.wrap{display:flex;flex-direction:column;justify-content:center;height:100%}

/* خيط الضوء */
.spine{position:absolute;top:0;bottom:0;right:64px;width:2px;
  background:linear-gradient(to bottom,rgba(54,151,117,.55),rgba(217,154,60,.5));opacity:.45;
  transform-origin:top center;transform:scaleY(0)}
.spine i{position:absolute;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(217,154,60,.8);opacity:0;transition:opacity .6s ease}
.spine i.on{opacity:1}

/* شبكة جزيئية زخرفية */
.plexus{position:absolute;pointer-events:none;opacity:.2}
.hexghost{position:absolute;pointer-events:none;opacity:.07}

/* أقواس HUD */
.hud::before,.hud::after,.hud .h3b::before,.hud .h3b::after{content:"";position:absolute;width:22px;height:22px;border:1px solid rgba(217,154,60,.55);z-index:2}
.hud::before{top:0;right:0;border-width:1px 1px 0 0}
.hud::after{top:0;left:0;border-width:1px 0 0 1px}
.hud .h3b::before{bottom:0;right:0;border-width:0 1px 1px 0}
.hud .h3b::after{bottom:0;left:0;border-width:0 0 1px 1px}

/* ظهور العناصر مع التمرير */
.rev{opacity:0;transform:translateY(28px);will-change:opacity,transform}
html.no-js .rev,html.no-motion .rev{opacity:1;transform:none}

/* أرقام نموذجية (placeholder) */
.fig-ph{border-bottom:1px dotted rgba(217,154,60,.7)}
.fig-badge{display:inline-block;vertical-align:super;font-family:"Body","Segoe UI",sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.08em;color:var(--gold);border:1px solid var(--gd-line);border-radius:4px;
  padding:1px 5px;margin-inline-start:6px}

/* ============ 0 · المُحمِّل ============ */
#loader{position:fixed;inset:0;z-index:80;background:var(--deep);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:opacity .65s ease}
#loader.done{opacity:0;pointer-events:none}
#loader .plexus{width:420px;height:300px;top:calc(50% - 260px);left:50%;transform:translateX(-50%);transition:opacity .8s ease}
#loader .mark{width:112px}
#loader .mark path{fill-opacity:0;stroke:#369775;stroke-width:6;transition:fill-opacity .5s ease}
#loader.fill .mark path{fill-opacity:1;stroke-opacity:0;transition:fill-opacity .5s ease,stroke-opacity .5s ease}
#loader.fill .plexus{opacity:0}
#loader .track{width:250px;height:2px;background:rgba(234,244,238,.1)}
#loader .track i{display:block;width:0%;height:100%;background:var(--emerald);box-shadow:0 0 14px rgba(54,151,117,.7)}
#loader .lbl{font-size:12.5px;letter-spacing:.34em;color:var(--ink-faint);text-align:center;padding:0 20px}

/* ============ الرحلة — المسرح المثبّت ============ */
#journey{position:relative;background:var(--deep)}
.jstage{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--deep)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.vig{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 45%,rgba(4,16,11,0) 38%,rgba(4,16,11,.42) 78%,rgba(4,16,11,.82) 100%),
  linear-gradient(to top,rgba(4,16,11,.78) 0%,rgba(4,16,11,.12) 34%,rgba(4,16,11,0) 60%)}
.vig.top{background:
  radial-gradient(120% 90% at 50% 55%,rgba(4,16,11,0) 38%,rgba(4,16,11,.42) 78%,rgba(4,16,11,.8) 100%),
  linear-gradient(to bottom,rgba(4,16,11,.72) 0%,rgba(4,16,11,.1) 36%,rgba(4,16,11,0) 60%);opacity:0}

/* طبقة الإشارات — أبيض مسطّح بلا ظلال: خلايا سداسية وخطوط متكسّرة بعُقد */
#signals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#signals .sig{opacity:0}
#signals .sig-cellbox{fill:rgba(5,18,13,.56);stroke:#fff;stroke-width:1.7;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
#signals .sig-ic{fill:none;stroke:#fff;stroke-width:1.9;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
#signals .sig-txt{fill:#fff;font-family:"Segoe UI",system-ui,sans-serif;font-weight:600;
  font-size:21px;letter-spacing:.16em}
#signals .sig-txt-ar{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:22px;letter-spacing:0}
/* رقاقات الجوّال — أصغر لتسع النافذة المرئية الضيّقة بعد قصّ cover */
#signals .sig-txt-sm{font-size:12px;letter-spacing:.10em}
#signals .sig-lead{fill:none;stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 1px rgba(5,18,13,.35))}
#signals .sig-dotted{stroke-dasharray:2 7;stroke-linecap:round}
#signals .sig-ring{fill:none;stroke:#fff;stroke-width:1.7;vector-effect:non-scaling-stroke}
#signals .sig-node{fill:#fff}
#signals .sig-white{fill:none;stroke:rgba(255,255,255,.96);stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
#signals .sig-root{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.45;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
#signals .sig-shimmer{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:26 340;opacity:0}

/* توهج يتبع المؤشر */
.cursor-glow{position:absolute;width:360px;height:360px;left:0;top:0;pointer-events:none;z-index:3;
  background:radial-gradient(50% 50% at 50% 50%,rgba(54,151,117,.22),rgba(217,154,60,.07) 55%,transparent 72%);
  mix-blend-mode:screen;opacity:0;will-change:transform,opacity}

/* شريط التقدّم */
.prog{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(234,244,238,.08);z-index:6}
.prog i{position:absolute;top:0;right:0;height:100%;width:0%;background:linear-gradient(to left,var(--emerald),var(--gold))}

/* الترويسة */
.hd{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:26px 56px;transition:padding .45s ease}
/* الشعار رابطٌ يعيد إلى أعلى الصفحة */
.hd .idb{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;cursor:pointer;
  transition:opacity .3s ease}
.hd .idb:hover{opacity:.78}
.hd .idb:focus-visible{outline:1px solid rgba(54,151,117,.6);outline-offset:6px;border-radius:6px}
.hd .idb .mark{width:38px;transition:width .45s ease}
.hd .idb .wm{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:21px;letter-spacing:.02em;transition:font-size .45s ease,opacity .45s ease}
.hd .idb .full{font-size:12px;color:var(--ink-faint);border-right:1px solid var(--hair);padding-right:13px;transition:opacity .35s ease,visibility .35s ease}
.hd .nav{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--ink-soft);transition:opacity .35s ease,visibility .35s ease}
.hd .nav a{transition:color .3s ease}
.hd .nav a:hover{color:var(--ink)}
.hd .nav .en{font-size:12.5px;letter-spacing:.1em;border:1px solid var(--hair);border-radius:999px;padding:5px 14px;color:var(--ink-faint)}
.hd .nav .cta-mini{border:1px solid rgba(54,151,117,.45);border-radius:999px;padding:6px 18px;background:var(--em-08)}
.hd .nav .cta-mini:hover{background:var(--em-16)}
.hd.mini{padding:20px 56px}
.hd.mini .idb .mark{width:26px}
.hd.mini .idb .wm{font-size:16px;opacity:.85}
.hd.mini .idb .full,.hd.mini .nav{opacity:0;visibility:hidden;pointer-events:none}

/* زرّ القائمة — لا يظهر إلا على ≤820 حيث تُخفى روابط الترويسة */
.burger{display:none;position:fixed;top:14px;left:14px;width:44px;height:44px;padding:12px 10px;
  background:rgba(4,16,11,.42);border:0;border-radius:10px;cursor:pointer;backdrop-filter:blur(6px);
  flex-direction:column;justify-content:space-between;z-index:82}
.burger span{display:block;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .32s ease,opacity .22s ease,width .32s ease}
.burger span:nth-child(1){width:24px}
.burger span:nth-child(2){width:18px}
.burger span:nth-child(3){width:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.2px) rotate(-45deg)}
.burger:focus-visible{outline:1px solid rgba(54,151,117,.6);outline-offset:4px}
/* لا يظهر الزرّ فوق شاشة التحميل */
#loader:not(.done) ~ .burger{display:none}

/* لوحة القائمة */
.mnav{position:fixed;inset:0;z-index:81;display:flex;align-items:center;justify-content:center;
  background:rgba(4,16,11,.975);backdrop-filter:blur(8px);opacity:0;transition:opacity .32s ease}
/* لازم: display:flex أعلاه يتغلّب على [hidden] فتبقى اللوحة طبقةً شفافة
   تبتلع كل حدث مؤشر فوق الصفحة كلّها. والثانية تمنع الحجب أثناء التلاشي. */
.mnav[hidden]{display:none}
.mnav:not(.open){pointer-events:none}
.mnav:focus{outline:none}
.mnav.open{opacity:1}
.mnav nav{display:flex;flex-direction:column;align-items:center;gap:26px}
.mnav a{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:26px;color:var(--ink);
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.mnav.open a{opacity:1;transform:none}
.mnav.open a:nth-child(1){transition-delay:.06s}
.mnav.open a:nth-child(2){transition-delay:.11s}
.mnav.open a:nth-child(3){transition-delay:.16s}
.mnav.open a:nth-child(4){transition-delay:.21s}
.mnav.open a:nth-child(5){transition-delay:.26s}
.mnav.open a:nth-child(6){transition-delay:.31s}   /* مبدّل اللغة */
/* مبدّل اللغة داخل ☰ — رقاقة أصغر من الروابط، بهيئة رقاقة الترويسة */
.mnav .en-mini{margin-top:2px;font-family:"Body","Segoe UI",sans-serif;font-weight:400;
  font-size:14px;letter-spacing:.12em;color:var(--ink-faint);
  border:1px solid var(--hair);border-radius:999px;padding:8px 22px}
.mnav .cta-mini{margin-top:12px;font-size:19px;border:1px solid rgba(54,151,117,.45);
  border-radius:999px;padding:12px 34px;background:var(--em-08)}

/* كتلة النص فوق الفيديو */
.cap{position:absolute;z-index:4;display:flex;flex-direction:column;gap:14px;max-width:920px;opacity:0;visibility:hidden}
/* هالة ذهبية دافئة خلف النص — تعزل الحروف عن المشهد المضيء وتُبقيها مقروءة */
.cap::after{content:"";position:absolute;inset:-72px -140px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 54% at 50% 50%,rgba(217,154,60,.2),rgba(217,154,60,.07) 52%,transparent 74%),
    radial-gradient(62% 68% at 50% 50%,rgba(14,9,2,.62),rgba(14,9,2,.34) 54%,transparent 78%)}
.cap .ic{width:34px;height:34px;stroke:var(--gold);opacity:.9;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.cap h2{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:56px;line-height:1.4;letter-spacing:-.012em;text-wrap:balance;
  text-shadow:0 0 34px rgba(217,154,60,.3),0 2px 30px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.55)}
.cap h2 .w{display:inline-block;opacity:0;transform:translateY(14px);will-change:opacity,transform}
.cap .sub{font-size:20px;line-height:1.95;color:var(--ink-soft);max-width:46ch;opacity:0;transform:translateY(12px);
  text-shadow:0 0 26px rgba(217,154,60,.28),0 1px 18px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6);will-change:opacity,transform}
.cap .rule{width:56px;height:1px;background:linear-gradient(to left,var(--gold),transparent)}
.cap.center{left:50%;transform:translateX(-50%);align-items:center;text-align:center;width:max-content}
.cap.center .sub{text-align:center}
.cap.bottom{bottom:112px}
.cap.top{top:132px}
.cap.side-r{right:96px;top:50%;transform:translateY(-50%);align-items:flex-start;text-align:right;max-width:600px}
.cap.scrim::before{content:"";position:absolute;inset:-70px -110px;z-index:-1;
  background:radial-gradient(52% 52% at 50% 50%,rgba(4,16,11,.58),rgba(4,16,11,.28) 58%,transparent 76%)}

/* مؤشّر اللحظة */
.idx{position:absolute;left:56px;bottom:44px;z-index:5;font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.26em;color:var(--ink-faint);direction:ltr;opacity:0;transition:opacity .5s ease}
.idx b{color:var(--gold);font-weight:600;display:inline-block;min-width:2ch;text-align:center}
.idx.on{opacity:1}

/* مؤشّر التمرير */
.hint{position:absolute;z-index:5;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.3em;color:rgba(217,154,60,.85);text-shadow:0 1px 12px rgba(0,0,0,.9)}
.hint .rail{width:1px;height:46px;background:linear-gradient(to bottom,transparent,rgba(217,154,60,.7),transparent);
  animation:hintflow 2.2s ease-in-out infinite}
@keyframes hintflow{0%{transform:translateY(-6px);opacity:.4}50%{transform:translateY(4px);opacity:1}100%{transform:translateY(-6px);opacity:.4}}

/* الافتتاحية */
.hero-center{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding-bottom:40px}
.hero-center::before{content:"";position:absolute;top:18%;bottom:6%;left:50%;transform:translateX(-50%);width:1050px;max-width:100%;
  background:radial-gradient(50% 46% at 50% 52%,rgba(4,16,11,.6),rgba(4,16,11,.3) 55%,transparent 75%);z-index:-1}
.hero-center .mark{width:96px;filter:drop-shadow(0 6px 30px rgba(4,16,11,.8))}
.hero-center .brandline{font-weight:700;font-size:25px;letter-spacing:.14em;color:#fff;direction:ltr;
  text-shadow:0 2px 26px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6);margin-top:-8px}
.hero-center h1{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:66px;line-height:1.42;letter-spacing:-.012em;
  text-shadow:0 2px 40px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.5)}
.hero-center .h-rule{width:64px;height:1px;background:linear-gradient(to left,transparent,var(--gold),transparent)}
.hero-center .tag{font-size:24px;color:rgba(234,244,238,.94);text-shadow:0 2px 26px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.7)}
.hero-center .en{font-size:13px;letter-spacing:.32em;color:rgba(234,244,238,.6);direction:ltr;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.hero-center>*{opacity:0;transform:translateY(18px)}

/* ============ 7 · الجسر الرقمي ============ */
/* ٨٥٠ = ٨٢٠ صندوق المحتوى (فلا يتزحزح شيء) + ٣٠ متنفَّس أسفل الكوكبة،
   لئلا يرسم القسم التالي فوق حافّتها السفلى فتبدو مقطوعة */
#bridge{min-height:850px;padding-bottom:30px}
#bridge .wrap{align-items:center;text-align:center;gap:34px}
/* الجملة تنزل إلى منتصف الفراغ، والكوكبة خلفها هي لا خلف الأرقام */
.sealwrap{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  margin-top:clamp(90px,16vh,190px)}
#brweb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1240px;max-width:96%;
  height:300px;z-index:0;pointer-events:none;opacity:.42;
  /* تلاشٍ عند الأطراف الأربعة: يُذيب محيط الكوكبة فلا يبقى شكل يُقرأ
     ولا نتوء يُرى — تصير خلفيةً لا رسماً. تقاطع تدرّجين (أفقي × رأسي) */
  -webkit-mask-image:radial-gradient(ellipse 58% 54% at 50% 48%,#000 0,#000 42%,rgba(0,0,0,.55) 74%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 54% at 50% 48%,#000 0,#000 42%,rgba(0,0,0,.55) 74%,transparent 100%)}
/* شريط الجسر — ثلاث طبقات عمق: بوكيه قريب · شبكة وسطى · غبار بعيد.
   السطوع نصف ما كان (٠٫٨٥ ← ٠٫٤٢) بقرار عُدي ١٠ أغسطس */
#brweb .wv-line{stroke:rgba(74,178,140,.42);stroke-width:1.15;fill:none}
#brweb .wv-line.deep{stroke:rgba(74,178,140,.24)}
#brweb .wv-node{fill:rgba(96,201,161,.95)}
#brweb .wv-halo{fill:rgba(96,201,161,.55);filter:url(#wvSoft)}
#brweb .wv-gold{fill:rgba(230,168,74,.98)}
#brweb .wv-gold-halo{fill:rgba(230,168,74,.6);filter:url(#wvSoft)}
#brweb .wv-far{fill:rgba(120,205,175,.9)}
#brweb .wv-bokeh{filter:url(#wvBokeh)}
#brweb .wv-neb{fill:none;filter:url(#wvNeb)}
.nums{display:flex;align-items:stretch;gap:0;direction:rtl;position:relative;z-index:1}
.numcard{position:relative;width:330px;padding:34px 10px 28px;display:flex;flex-direction:column;align-items:center;gap:6px}
.numcard .n{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:132px;line-height:1;direction:ltr}
.numcard .u{font-size:16px;color:var(--ink-mid);letter-spacing:.06em}
.numcard .lb{font-size:17px;color:var(--ink-soft);margin-top:10px}
.numcard.was .n{color:rgba(234,244,238,.55)}
.numcard.lost .n{color:rgba(234,244,238,.3)}
.numcard.goal .n{font-size:158px;color:var(--gold);text-shadow:0 0 70px rgba(217,154,60,.5)}
.numcard.goal .lb{color:var(--ink)}
.arrowflow{display:flex;align-items:center;align-self:center;width:74px;justify-content:center}
.seal{position:relative;z-index:1;font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:30px;
  color:var(--ink);letter-spacing:-.01em}
.seal em{font-style:normal;color:var(--gold)}

/* ============ أقسام المحتوى العامة ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.stack{display:flex;flex-direction:column;gap:22px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;border:1px solid var(--hair);border-radius:18px;background:linear-gradient(180deg,var(--em-08),rgba(54,151,117,.02));
  padding:30px 28px;display:flex;flex-direction:column;gap:12px}
/* توهج التحويم الموحّد — كل بطاقات الصفحة */
.card,.stage,.person,.photo-card{transition:border-color .5s ease,transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease}
.card:hover,.stage:hover,.person:hover,.photo-card:hover{
  transform:translateY(-4px);
  border-color:rgba(54,151,117,.42);
  box-shadow:0 0 0 1px rgba(54,151,117,.18),0 14px 44px rgba(4,16,11,.45),0 0 36px rgba(54,151,117,.16)}
.card .hex{width:46px;height:46px}
.card h3{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:21px}
.card p{font-size:15.5px;line-height:1.9;color:var(--ink-soft)}

/* ============ 8 · دورنا ============ */
#role{min-height:760px}
.bignum{position:relative;padding:46px 40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.bignum .n{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:96px;color:var(--ink);direction:ltr;line-height:1;position:relative;z-index:1}
.bignum .n small{font-size:30px;color:var(--gold)}
.bignum .u{font-size:17px;color:var(--ink-mid);position:relative;z-index:1}
.curve{position:absolute;inset:auto 0 0 0;width:100%;height:150px;opacity:.5}
.curve .cfill{opacity:0;transition:opacity .8s ease .4s}
.curve.drawn .cfill{opacity:1}
.curve .cdot{opacity:0;transition:opacity .5s ease .9s}
.curve.drawn .cdot{opacity:1}
.miles{display:flex;flex-direction:column;gap:0;margin-top:6px}
.mile{position:relative;display:flex;gap:18px;padding:16px 0}
.mile::before{content:"";position:absolute;right:11px;top:34px;bottom:-8px;width:0;border-right:1px dashed rgba(54,151,117,.4)}
.mile:last-child::before{display:none}
.mile .dot{flex:none;width:23px;height:23px;border-radius:50%;border:1px solid var(--em-35);background:var(--em-08);display:grid;place-items:center}
.mile .dot i{width:7px;height:7px;border-radius:50%;background:var(--emerald)}
.mile .yr{flex:none;width:118px;font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:19px;color:var(--gold);direction:ltr;text-align:right}
.mile p{font-size:16px;line-height:1.8;color:var(--ink-soft)}
.mile p b{color:var(--ink);font-weight:700}

/* ============ 9 · التقنية ============ */
#tech{min-height:760px}

/* ============ 10 · البصمة ============ */
#dna{min-height:780px;overflow:hidden}
#dna .split{grid-template-columns:1.1fr .9fr}
.photo-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--hair)}
.photo-card img{display:block;width:100%;height:100%;object-fit:cover}
.photo-card .pc-cap{position:absolute;inset-inline:0;bottom:0;padding:64px 22px 16px;font-size:13.5px;color:rgba(234,244,238,.88);
  background:linear-gradient(to top,rgba(4,16,11,.94) 20%,rgba(4,16,11,.55) 55%,transparent)}
/* توسيط لا محاذاة أساس: النصّ المجاور أربعة أسطر، ومحاذاة الأساس تُثبّت
   سطره الأول عند أساس الرقم فتُعلّق الكتلة كلّها تحته. (عُدي ١٣ أغسطس —
   رُصد في الإنكليزية ثم في العربية، والعلّة أصلية في الاثنتين) */
.match{display:flex;align-items:center;gap:14px;margin-top:4px}
.match .n{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:74px;color:var(--gold);direction:ltr;line-height:1}
.match .t{font-size:16px;color:var(--ink-soft);max-width:22ch;line-height:1.7}

/* ============ 11 · المراحل ============ */
#stages{min-height:1180px}
.stagegrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;row-gap:28px}
#flowline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
#flowline path{fill:none;stroke:rgba(54,151,117,.35);stroke-width:1;stroke-dasharray:3 7}
.stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hair);background:var(--em-08)}
.stage img{display:block;width:100%;height:196px;object-fit:cover;filter:saturate(.6) brightness(.88) contrast(1.04)}
.stage::before{content:"";position:absolute;top:0;left:0;right:0;height:196px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,11,.14),rgba(4,16,11,0) 40%,rgba(4,16,11,.34)),rgba(54,151,117,.1)}
.stage.last::before{display:none}
.stage .sbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
/* رقاقة الرقم تنزل من الصورة إلى شريط النصّ (top:170 وارتفاعها 56، والشريط
   يبدأ عند 196) وهي مثبَّتة right:14px بعرض 50 — أي أن حافّتها اليسرى تقع
   دائماً على بُعد ٤٦px من حافّة النصّ الداخلية مهما اتّسعت البطاقة.
   فيُترك لها هذا القدر + متنفَّس.
   ⚠ الحشوة **فيزيائية** (padding-right) لا منطقية: الرقاقة نفسها مثبَّتة
   بـright فيزيائياً في اللغتين ولا تُقلب، فلو كانت الحشوة منطقية لوقعت
   في العربية يساراً — أي في الجهة الخالية — ولم تحمِ شيئاً (جُرّبت
   فأعطت فجوة −46px كما هي).
   (علّة أصلية في العربية منذ ١٠ أغسطس — رصدها عُدي ١٣ أغسطس) */
.stage h3{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:18.5px;padding-right:54px}
.stage p{font-size:13.5px;line-height:1.75;color:var(--ink-soft)}
.stage .hexn{position:absolute;top:170px;right:14px;width:50px;height:56px;z-index:3;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.stage.last{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  background:linear-gradient(160deg,rgba(54,151,117,.16),rgba(43,68,97,.14));padding:20px}
.stage.last svg.fin{width:54px;height:54px;stroke:var(--gold)}
.stage.last h3{font-size:20px}

/* ============ 12 · الناتج المحلي ============ */
#gdp{min-height:700px}

/* ============ 13 · الداعمات ============ */
#mix{min-height:760px}
.mixbar{display:flex;height:64px;border-radius:14px;overflow:hidden;border:1px solid var(--hair)}
.mixbar .palm{flex:0 0 70%;background:linear-gradient(180deg,rgba(54,151,117,.6),rgba(54,151,117,.32));display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:19px;transform-origin:right center}
.mixbar .rest{flex:1;background:linear-gradient(180deg,rgba(217,154,60,.4),rgba(217,154,60,.2));display:flex;align-items:center;justify-content:center;
  font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:17px;transform-origin:right center}
.mixnums{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-mid);margin-top:8px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cards4 .card{padding:24px 20px;gap:9px}
.cards4 .card h3{font-size:18px}
.cards4 .card p{font-size:13.5px}

/* ============ 14 · المنشأة والناس ============ */
#people{min-height:960px}
#people .wrap{gap:30px}
.facility{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;height:300px}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(54,151,117,.5);border-radius:999px;
  padding:8px 20px;font-size:14.5px;color:var(--ink);background:var(--em-08);width:max-content;flex:none}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 5px rgba(54,151,117,.18);
  animation:badgepulse 2.4s ease-in-out infinite}
@keyframes badgepulse{0%,100%{box-shadow:0 0 0 4px rgba(54,151,117,.22)}50%{box-shadow:0 0 0 9px rgba(54,151,117,.06)}}
.persons{display:flex;gap:26px}
.person{flex:1;display:flex;align-items:center;gap:20px;border:1px solid var(--hair);border-radius:18px;padding:22px 26px;background:linear-gradient(180deg,var(--em-08),transparent)}
.person img{width:104px;height:104px;border-radius:50%;object-fit:cover;border:1px solid rgba(217,154,60,.4);flex:none}
.person h3{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:20px;margin-bottom:6px}
.person p{font-size:14px;line-height:1.7;color:var(--ink-soft)}

/* ============ 15 · الأنشطة ============ */
#acts{min-height:660px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.act{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(234,244,238,.07)}
.act .n{flex:none;width:40px;height:44px}
.act p{font-size:16px;color:var(--ink-soft)}
.act p b{color:var(--ink);font-weight:700}
.reg{font-size:14px;color:var(--ink-mid);margin-top:26px}

/* ============ 16 · الخاتمة ============ */
#contact{min-height:780px}
#contact .wrap{align-items:center;text-align:center;gap:26px}
#contact{background:var(--void)}
#contact::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(54,151,117,.14),transparent 70%)}
#contact .mark{width:86px}
#contact h2{font-size:48px}
#contact .sub{font-size:19px;color:var(--ink-soft);max-width:44ch;line-height:2}
.cta{display:inline-flex;align-items:center;gap:13px;padding:20px 54px;border:none;border-radius:999px;cursor:pointer;
  font-family:"Body","Segoe UI",sans-serif;font-size:18px;font-weight:700;background:var(--gold);color:#04100b;
  box-shadow:0 8px 44px rgba(217,154,60,.28);transition:transform .35s ease,box-shadow .35s ease}
.cta:hover{transform:translateY(-3px);box-shadow:0 14px 60px rgba(217,154,60,.4)}
.cta i{width:8px;height:8px;border-radius:50%;background:#04100b;box-shadow:0 0 0 5px rgba(4,16,11,.15)}
.contact{display:flex;gap:34px;font-size:15px;color:rgba(234,244,238,.62);direction:ltr;flex-wrap:wrap;justify-content:center}
.contact span{display:flex;align-items:center;gap:8px}

/* ============ 17 · التذييل ============ */
#foot{min-height:380px;background:var(--void)}
#foot .wrap{justify-content:flex-end;height:100%}
#foot .rule-top{height:1px;background:linear-gradient(to left,transparent,rgba(54,151,117,.5),rgba(217,154,60,.4),transparent)}
.foot-in{display:flex;align-items:center;justify-content:space-between;padding:56px 0 40px}
.lock{display:flex;align-items:center;gap:18px}
.lock .mark{width:56px}
.lock .nm{font-family:"Kufi","Segoe UI",sans-serif;font-weight:600;font-size:22px;line-height:1.6}
/* الاسم اللاتيني تحت العربي: كان 12px/.14em بعرض ٣٧١px تحت اسمٍ عربي
   عرضه ٤٥٠ — فبدا ضامراً (رصده عُدي ١٣ أغسطس). و16px/.08em يعطي
   ٤٥٠px بالضبط، فيتحاذى طرفا السطرين. الحجم رُفع والتباعد خُفّض معاً:
   لو بقي .14em لتجاوز العرض ٤٩٥px وخرج عن الاسم فوقه. */
.lock .nm small{display:block;font-family:"Body","Segoe UI",sans-serif;font-weight:400;font-size:16px;color:var(--ink-faint);letter-spacing:.08em;direction:ltr;text-align:right}
.links{display:flex;gap:26px;font-size:14px;color:var(--ink-soft)}
.links a:hover{color:var(--ink)}
.fine{display:flex;justify-content:space-between;padding:18px 0 30px;border-top:1px solid rgba(234,244,238,.07);font-size:12.5px;color:var(--ink-faint)}

/* ============ تجاوب ============ */
@media (max-width:1180px){
  .wrap{padding:0 64px}
  .spine{right:40px}
  .cap h2{font-size:44px}
  .hero-center h1{font-size:52px}
  .numcard{width:250px}
  .numcard .n{font-size:100px}
  .numcard.goal .n{font-size:120px}
  .split,#dna .split{grid-template-columns:1fr;gap:44px}
  .stagegrid{grid-template-columns:repeat(2,1fr)}
  #flowline{display:none}
  .facility{grid-template-columns:1fr 1fr;height:auto}
  .facility .photo-card{height:220px}
  .facility .photo-card:first-child{grid-column:1/-1;height:300px}
  .sec{padding:90px 0}
  .sec[id]{min-height:0}
  /* حشوة ٩٠px العلوية تأكل متنفَّس الكوكبة — يُعوَّض بضعفها ارتفاعاً */
  #bridge{min-height:950px}
}
@media (max-width:820px){
  .wrap{padding:0 24px}
  .spine{right:14px}
  .hd,.hd.mini{padding:18px 20px}
  .hd .idb .full,.hd .nav{display:none}
  .burger{display:flex}                     /* البديل عن الروابط المخفيّة */
  .hero-center h1{font-size:34px}
  .hero-center .tag{font-size:17px}
  .hero-center .en{font-size:10px;letter-spacing:.22em}
  .hero-center .mark{width:64px}
  .hero-center .brandline{font-size:18px;letter-spacing:.1em}
  .cap{max-width:88vw;gap:10px}
  .cap.center{width:auto;min-width:88vw}
  .hero-center .en{max-width:92vw;white-space:normal;line-height:1.8}
  .cap h2{font-size:27px}
  .cap .sub{font-size:15px;line-height:1.85;max-width:88vw}
  .cap.bottom{bottom:88px}
  .cap.top{top:96px}
  .cap.side-r{right:50%;transform:translate(50%,0);top:auto;bottom:88px;align-items:center;text-align:center;max-width:88vw;min-width:88vw}
  .cap.side-r .rule{align-self:center;background:linear-gradient(to left,transparent,var(--gold),transparent)}
  .cap .ic{width:26px;height:26px}
  .idx{left:20px;bottom:22px;font-size:11px}
  h2{font-size:29px}
  .lead{font-size:16px}
  .eyebrow{font-size:11.5px}
  .sec{padding:72px 0}
  .nums{flex-direction:column;gap:8px}
  /* البطاقات تتراصّ عمودياً فينزل الختام قرب حافة القسم — يُوسَّع
     المتنفَّس أسفلها فلا يرسم القسم التالي فوق الكوكبة */
  #bridge{padding-bottom:90px}
  .numcard{width:100%;padding:20px 10px}
  .numcard .n{font-size:76px}
  .numcard.goal .n{font-size:96px}
  .arrowflow{transform:rotate(90deg);width:auto;padding:2px 0}
  .seal{font-size:20px;line-height:1.8}
  .cards3,.cards4{grid-template-columns:1fr;gap:16px}
  .stagegrid{grid-template-columns:1fr}
  .stage img{height:180px}
  .stage .hexn{top:154px}
  .bignum .n{font-size:64px}
  .bignum .n small{font-size:22px}
  .match .n{font-size:52px}
  .mixbar{height:52px}
  .mixbar .palm{font-size:15px}
  .mixbar .rest{font-size:13px}
  .facility{grid-template-columns:1fr}
  .facility .photo-card{height:210px}
  .persons{flex-direction:column}
  .acts{grid-template-columns:1fr}
  #contact h2{font-size:30px}
  #contact .sub{font-size:16px}
  .cta{padding:16px 40px;font-size:16px}
  .contact{gap:14px;font-size:13px}
  .foot-in{flex-direction:column;gap:26px;align-items:flex-start;padding:40px 0 28px}
  .links{flex-wrap:wrap;gap:14px 20px}
  .fine{flex-direction:column;gap:8px}
  .lock .nm{font-size:17px}
  #loader .plexus{width:300px;height:220px}
  #loader .lbl{font-size:10.5px;letter-spacing:.22em}
}

/* ============ حركة مخفّضة ============ */
html.no-motion .hint .rail{animation:none}
html.no-motion .badge i{animation:none}
html.no-motion .cap{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;margin:60px auto;padding:0 24px}
html.no-motion .cap h2 .w{opacity:1;transform:none}
html.no-motion .cap .sub{opacity:1;transform:none}
html.no-motion .hero-center>*{opacity:1;transform:none}
html.no-motion .jstage{height:auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
html.no-motion #signals,html.no-motion .cursor-glow{display:none}
html.no-motion .spine{transform:none}
html.no-motion .spine i{opacity:1}

/* ═══════════════════════════════════════════════════════════════════
   الإنكليزية — قلب الاتجاه RTL ← LTR                (١٣ أغسطس ٢٠٢٦)

   كتلة واحدة تعمل حين dir="ltr" وحدها. الصفحة العربية لا تُمسّ:
   كل محدِّد هنا يبدأ بـhtml[dir=ltr] فلا يطابق شيئاً في الجذر.
   المحدِّدات أعلى نوعيةً من قواعد @media العربية، فما احتاج تجاوباً
   أُعيد داخل @media أدناه صراحةً وإلا تسرّبت قيمة سطح المكتب.
   ═══════════════════════════════════════════════════════════════════ */

/* الخطّ اللاتيني — IBM Plex Sans (قرار عُدي ١٣ أغسطس · OFL · محلي بلا CDN).
   مُعلَنٌ هنا لكنه لا يُنزَّل إلا حين يُستعمل، أي في /en/ وحدها. */
@font-face{font-family:"Latin";font-weight:400;font-display:swap;src:url("../fonts/plex-400-latin.woff2") format("woff2")}
@font-face{font-family:"Latin";font-weight:600;font-display:swap;src:url("../fonts/plex-600-latin.woff2") format("woff2")}
@font-face{font-family:"Latin";font-weight:700;font-display:swap;src:url("../fonts/plex-700-latin.woff2") format("woff2")}

html[dir=ltr] body{direction:ltr;font-family:"Latin","Segoe UI",sans-serif}
html[dir=ltr] h2,html[dir=ltr] .cap h2,html[dir=ltr] .hero-center h1,
html[dir=ltr] .seal,html[dir=ltr] .card h3,html[dir=ltr] .stage h3,
html[dir=ltr] .numcard .n,html[dir=ltr] .bignum .n,html[dir=ltr] .match .n,
html[dir=ltr] .mile .yr,html[dir=ltr] .idx,html[dir=ltr] .mnav a,
html[dir=ltr] .lock .nm small,html[dir=ltr] .person h3,html[dir=ltr] #loader .lbl
  {font-family:"Latin","Segoe UI",sans-serif}
/* svg text مستثنى عمداً: عرض الرقاقات يُحسب بثابت charW في story.js لا
   بقياس فعلي، فتغيير خطّها يزحزح هندسة طبقة الوسوم المعتمدة. تبقى
   الرقاقات متطابقة في النسختين — وهو المطلوب أصلاً. */

/* ---------- المواضع المقلوبة ---------- */
html[dir=ltr] .spine{right:auto;left:64px}
html[dir=ltr] .spine i{right:auto;left:-3px}
html[dir=ltr] .burger{left:auto;right:14px}
html[dir=ltr] .idx{left:auto;right:56px}
/* رقاقة رقم المرحلة تبقى يميناً ولا تُقلب — نفس منطق لحظة الحلزون.
   هي عند y=170..226 والعنوان يبدأ عند y=213، فموضعها يجب أن يكون في
   الجهة التي **لا** يبدأ منها النصّ. قلبُها يساراً وضعها فوق أول حرف من
   العنوان الإنكليزي مباشرةً (رصده عُدي ١٣ أغسطس). */
html[dir=ltr] .mile::before{right:auto;left:11px;
  border-right:0;border-left:1px dashed rgba(54,151,117,.4)}
html[dir=ltr] .hd .idb .full{border-right:0;padding-right:0;
  border-left:1px solid var(--hair);padding-left:13px}
html[dir=ltr] .mile .yr{text-align:left}
html[dir=ltr] .lock .nm small{text-align:left}

/* شريط التقدّم يمتلئ من اليسار */
html[dir=ltr] .prog i{right:auto;left:0;
  background:linear-gradient(to right,var(--emerald),var(--gold))}

/* التدرّجات تتلاشى في اتجاه القراءة */
html[dir=ltr] .eyebrow::after{background:linear-gradient(to right,var(--gold),transparent)}
html[dir=ltr] .cap .rule{background:linear-gradient(to right,var(--gold),transparent)}

/* بطاقات الرؤية: ٣٤ ← ١٤ ← ٣٠ يجب أن تُقرأ يساراً إلى يميناً */
html[dir=ltr] .nums{direction:ltr}
html[dir=ltr] .arrowflow svg{transform:scaleX(-1)}

/* لحظة الحلزون — الصندوق يبقى يميناً ولا يُقلب.
   السبب: رقاقات هذه اللحظة نفسها (DNA · 100% GENETIC MATCH ·
   DISEASE FREE) عند x ≈ ٢٨٨–٤٣٣ في فضاء 1920، أي اليسار — فالقلب
   الآلي يضع النصّ فوقها. قرار عُدي ١٣ أغسطس. يُقلب داخله فقط. */
html[dir=ltr] .cap.side-r{align-items:flex-start;text-align:left}
/* الصندوق مثبَّت يميناً (right:96px) ويبلغ حدّه ٦٠٠px، والنصّ محاذٍ
   لليسار داخله — فيبدأ عند ١٢٨٩ على شاشة ٢٠٠٠ بعيداً عن الهالة الضوئية.
   تضييق الصندوق يزيح حافّته اليسرى يميناً ١٢٠px فتجلس الكتلة في الهالة،
   والعنوان يبقى سطرين كما هو (طلب عُدي ١٣ أغسطس). */
html[dir=ltr] .cap.side-r{max-width:480px}
html[dir=ltr] .cap.side-r .sub{max-width:32ch}


/* جملة الختام: لا يُقيَّد عرضها.
   قِيست بـmax-width:34ch أولاً ظنّاً أن الخطر من العرض — والقياس نقض ذلك:
   القيد يكسر الجملة سطرين (٧٧px بدل ٥٧px) فيبتلع شريحةً أعرض من اللوح
   الضيّق (٣٠٠px) وتنهار العيّنة من ١٢ عقدة إلى ٨ على عرض ٩٠٠.
   الخطر من ارتفاع الجملة لا عرضها. تُترك سطراً واحداً كالعربية. */

/* بقيّة ما يذكر "Kufi"/"Body" صراحةً — يُحوَّل إلى اللاتيني.
   الغاية مزدوجة: توحيد الخطّ، ومنع تنزيل الخطّين العربيّين (١٥٤ KB)
   في صفحةٍ لا حرف عربي فيها. */
html[dir=ltr] .hd .idb .wm,html[dir=ltr] .lock .nm,html[dir=ltr] .cta,
html[dir=ltr] .fig-badge,html[dir=ltr] .mixbar .palm,html[dir=ltr] .mixbar .rest
  {font-family:"Latin","Segoe UI",sans-serif}
/* svg text: نفس الرسم الحالي بالضبط (Kufi بلا لاتينية فيسقط إلى Segoe UI)
   لكن بلا تنزيل ١٢٤ KB بلا فائدة */
html[dir=ltr] svg text{font-family:"Segoe UI",system-ui,sans-serif}

/* شريط ٧٠/٣٠ ينمو من اليسار (scaleX من صفر في story.js) */
html[dir=ltr] .mixbar .palm,html[dir=ltr] .mixbar .rest{transform-origin:left center}

@media (max-width:1180px){
  html[dir=ltr] .spine{left:40px}
}
@media (max-width:820px){
  html[dir=ltr] .spine{left:14px}
  html[dir=ltr] .idx{left:auto;right:20px}
  /* اللحظة تتوسّط تحت ٨٢٠ في اللغتين — يُعاد التوسيط صراحةً لأن قاعدة
     سطح المكتب أعلاه أعلى نوعيةً من قاعدة @media العربية */
  /* تُعاد قيمة العرض إلى قاعدة الجوّال صراحةً — تضييق سطح المكتب أعلى
     نوعيةً منها فلولا هذا لتسرّب إليها */
  html[dir=ltr] .cap.side-r{align-items:center;text-align:center;max-width:88vw}
}