/* خطُّ المرمرة — خطُّ تطبيقِ خوارزم نفسُه، مستضافٌ عندنا.
   ⚠️ ثلاثةُ أوزانٍ لا غير. ما سواها يُصنَع صناعةً ويُفسد الحرفَ العربيّ.
   ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — أُسقط الوزنُ الخفيفُ ثلاثُ مئة: قِيس فوجد أنّ الصفحةَ
      كلَّها لا تستعمله إلّا في **موضعٍ واحد** — علامةُ الفتحِ والإغلاقِ في
      الأسئلةِ الشائعة — بينما وجهُه ينزل على كلِّ زائرٍ بستّةٍ وعشرين كيلوبايتاً
      ونصف، وهي أثقلُ من ملفِّ التنسيقِ كلِّه على السلك. فنُقلت العلامةُ إلى
      وزنِ أربعِ مئةٍ المحمَّلِ سلفاً وسقط الوجهُ من التحميل.
   ⛔ ولا يُعاد وجهٌ كاملٌ لأجلِ موضعٍ واحدٍ في الصفحة. */
@font-face {
  font-family:Almarai;
  src:url('../fonts/almarai-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:Almarai;
  src:url('../fonts/almarai-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:Almarai;
  src:url('../fonts/almarai-800.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --bg:#06090e;
  --surface:#0b111b;
  --line:#ffffff14;
  --text:#f4f7fc;
  --muted:#9aa6b6;
  --blue:#2478ff;
  --cyan:#24dfd0;
  --font:Almarai,Tahoma,Arial,sans-serif;
  --max:1200px;
}
*,*:before,*:after {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:35px;
}
/* ════════════════════════════════════════════════════════════════════════
   خلفيّةُ الصفحةِ الموحّدة — واحدةٌ من أعلى الصفحةِ إلى آخرها.

   ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — قبل هذا كانت لكلِّ قسمٍ هالتُه بلونِه: أزرقُ وسماويٌّ
      وبنفسجيّ. وهذا خطأُ فهمٍ منّي لا خطأُ تنفيذ: المالكُ طلب خلفيّةً **واحدةً
      موحّدةً** لكاملِ الصفحة، فجاءت الصفحةُ بقعاً متفرّقةً بألوانٍ مختلفةٍ
      تنتهي عند حدودِ كلِّ قسم — وهو عكسُ المطلوبِ تماماً.
   ✅ الآن طبقةٌ واحدةٌ على الصفحةِ نفسِها: وهجٌ واحدٌ مثبّتٌ بالنافذةِ فيبقى
      الإحساسُ نفسَه في كلِّ موضعٍ من الصفحة، وشبكةٌ واحدةٌ تتكرّر بانتظامٍ
      من أوّلِ الصفحةِ إلى آخرها. لونٌ واحدٌ فقط من هويّةِ الموقع.
   ⚠️ واللونُ مفصولٌ عن الصورةِ في تصريحين: الاختصارُ `background` يصفّر
      الصورةَ، فأيُّ قاعدةٍ لاحقةٍ تكتب اللونَ بالاختصارِ تمحو الطبقةَ كلَّها.
   ⚠️ والتثبيتُ لطبقةِ الوهجِ وحدَها والشبكةُ تنساب: شبكةٌ مثبّتةٌ تبدو ورقاً
      لاصقاً على الشاشةِ لا خلفيّةً للصفحة.
   ⛔ ولا تُعاد هالةٌ لقسمٍ بعينِه: هذا بالضبط ما رُفض، والصفحةُ خلفيّتُها
      واحدةٌ لا خلفيّةٌ لكلِّ كتلة. */
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — الشبكةُ تضيق على الشاشاتِ الضيّقةِ وحدَها: مربّعُ تسعين
      نقطةً يقسم شاشةَ الجوّالِ إلى أربعةِ أعمدةٍ فقط، فتُقرأ الخطوطُ **صندقةً**
      ظاهرةً لا نسيجاً خافتاً. وعلى الشاشةِ الواسعةِ نفسُ المربّعِ يعطي خمسةَ
      عشرَ عموداً فيبدو نسيجاً — فالعلّةُ في نسبةِ المربّعِ إلى عرضِ الشاشةِ
      لا في قوّةِ الخطّ.
   ⚠️⚠️⚠️ ولم يكشفها أيُّ رقم: القياسُ قال «مرئيّةٌ بظهورٍ مريح» وهو صادقٌ،
      والعينُ وحدَها قالت «مربّعات». فالنظرُ إلى اللقطةِ ليس زينةً بعد القياس
      — هو الحكمُ على الشكلِ، والقياسُ حكمٌ على الوجودِ فقط.
   ⛔ ولا تُخفَّف شفافيّةُ الخطِّ بدل تضييقِ المربّع: الخفوتُ يُضعفها على
      الجهازين معاً ويعيدنا إلى «ما فيه خلفيّة». */
body.dialog-open {
  overflow:hidden;
}
a {
  color:inherit;
  text-decoration:none;
}
button,input {
  font:inherit;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  color:inherit;
  cursor:pointer;
  border:0;
}
img,video,svg {
  display:block;
  max-width:100%;
}
img {
  height:auto;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  text-wrap:balance;
}
p {
  text-wrap:pretty;
}
::selection {
  background:#2075e4;
  color:#fff;
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:6px;
}
button:focus-visible {
  border-radius:12px;
}
[hidden] {
  display:none!important;
}
.container {
  width:min(var(--max),calc(100% - 80px));
  margin-inline:auto;
}
.section {
  padding-block:110px;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢١ — عناوينُ الأقسامِ الصغرى كُبّرت بطلبِ المالك لكاملِ الموقع:
      كانت أربعةَ عشرَ بوزنٍ عاديٍّ فتُقرأ حاشيةً باهتةً لا عنواناً، ورقمُها
      ثلاثةَ عشرَ في دائرةٍ سبعٍ وعشرين فلا يكاد يُرى.
   ⚠️ والوزنُ رُفع مع المقاس: تكبيرُ حجمٍ بوزنٍ عاديٍّ يعطي نصّاً كبيراً باهتاً،
      وهو أسوأُ من الصغيرِ الواضح.
   ⛔ ولها قاعدةٌ ثانيةٌ للشاشاتِ الضيّقةِ أسفلَ الملفّ — من عدّل هنا فليعدّل
      هناك، وإلّا كبُر في الحاسوبِ وبقي صغيراً في الجوّال. */
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#c5d2e2;
  font-size:19px;
  font-weight:700;
  margin-bottom:26px;
}
.section-number {
  color:#8cabc9;
  font-size:15px;
  font-family:var(--font);
  border:1px solid #344358;
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
}
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢١ — التدرّجُ مقصوصٌ على حدودِ الحروف، والمتصفّحُ يقصُّه على
      **صندوقِ السطرِ السطريِّ** لا على امتدادِ الحرفِ الحقيقيّ. فما خرج من
      الحرفِ عن الصندوقِ — ذيلُ الياءِ ورأسُ الشدّة — يُمحى تماماً. والعطبُ
      لا يظهر في اللاتينيّةِ فيمرّ على من يصمّم بها.
   ✅ العلاج: يصير الصندوقُ كتليّاً سطريّاً بحشوٍ رأسيٍّ نسبيٍّ يتمدّد مع حجمِ
      الخطّ، فيشمل القصُّ الحرفَ كاملاً. والحشوُ بوحدةِ الحرفِ لا بالنقاط كي
      يصحّ على كلّ مقاسِ شاشة.
   ⛔ ولا يُعاد إلى «سطريّ» مهما بدا أبسط: يعود القصُّ فوراً. */
.gradient-text {
  background:linear-gradient(105deg,#21ddcb 10%,#18b9ef 45%,#487cff 90%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  display:inline-block;
  padding-block:.08em .14em;
}
.muted-text {
  color:#8191a5;
}
h2 {
  font-size:clamp(34px,4.2vw,55px);
  line-height:1.35;
  letter-spacing:-1.1px;
  font-weight:700;
}
h3 {
  font-weight:700;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:58px;
  padding:12px 30px;
  border-radius:10px;
  font-size:16px;
  font-weight:400;
  transition:background .2s,transform .2s,border-color .2s,box-shadow .2s;
  line-height:1.5;
}
.button-primary {
  background:linear-gradient(120deg,#1267ee,#347dff);
  border:1px solid #6facff55;
  box-shadow:inset 0 1px #a1c7ff50,0 6px 24px #006dff15;
  color:#fff;
}
.button-primary:hover {
  transform:translateY(-2px);
  box-shadow:inset 0 1px #a1c7ff50,0 8px 30px #006dff38;
}
.button-outline {
  border:1px solid #364253;
  background:#ffffff04;
}
.button-outline:hover {
  background:#ffffff09;
  border-color:#677c98;
}
.button-small {
  font-size:14px;
  min-height:44px;
  padding:8px 19px;
  gap:22px;
}
.button>span[aria-hidden] {
  font-size:22px;
}
.skip-link {
  position:fixed;
  top:-100px;
  right:20px;
  z-index:100;
  background:var(--cyan);
  color:#00151d;
  padding:12px 25px;
}
.skip-link:focus {
  top:15px;
}
/* ⚠️ ٢٠٢٦-٠٩-٢٧ — هدفُ رابطِ التجاوزِ صار قابلاً للتركيزِ برمجيّاً (بلا ذلك يسقط
   التركيزُ على الجسمِ في بعضِ المتصفّحات فيبدأ التنقّلُ من أوّلِ الصفحة). والحلقةُ
   حولَ المحتوى كلِّه ليست مؤشّراً مفيداً — هو ليس عنصراً تفاعليّاً — فتُطفأ له وحدَه. */
#main:focus {
  outline:none;
}
/* Original transparent PNG, framed to its visible bounds without redrawing the wordmark. */
.brand {
  display:inline-flex;
  flex-shrink:0;
}
.logo-window {
  width:158px;
  aspect-ratio:1446/555;
  position:relative;
  overflow:hidden;
  display:block;
}
.logo-window img {
  max-width:none;
  position:absolute;
  width:118.05%;
  height:auto;
  left:-9.13%;
  top:-8.65%;
}
.site-header {
  height:94px;
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:#06090eee;
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:32px;
}
.desktop-nav a {
  color:#b3bdcb;
  font-size:14px;
  transition:color .2s;
}
.desktop-nav a:hover {
  color:white;
}
.header-actions {
  display:flex;
  align-items:center;
  gap:18px;
}
/* ⚠️ زرُّ الترويسةِ يرث وزنَه من قاعدةِ الأزرارِ العامّةِ وهي أربعُ مئة، وليس
   له قاعدةٌ أساسيّةٌ خاصّةٌ به — قاعدتاه كلتاهما داخلَ استعلامَي شاشةٍ ضيّقة.
   والمالكُ يريده متيناً. ⛔ ولا يُرفع وزنُ `.button` العامِّ فيمتنَّ معه زرُّ
   النافذةِ المنبثقةِ وكلُّ زرٍّ آخرَ في الموقع. */
.header-actions>.button {
  font-weight:700;
}
.menu-toggle {
  display:none;
  background:transparent;
  width:44px;
  height:44px;
  padding:11px;
}
.menu-toggle span {
  display:block;
  height:1.5px;
  background:#e5edfa;
  margin:6px 0;
  transition:transform .2s;
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.75px) rotate(45deg);
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.75px) rotate(-45deg);
}
.mobile-nav {
  position:absolute;
  top:100%;
  inset-inline:0;
  background:#0b111bf5;
  backdrop-filter:blur(20px);
  padding:18px 30px 28px;
  border-bottom:1px solid #27384f;
}
.mobile-nav a {
  display:block;
  padding:10px 0;
  color:#d0d9e6;
  font-size:16px;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢١ — الواجهةُ كانت بلا حشوٍ سفليٍّ إطلاقاً، وكان ذلك صحيحاً
      يومَ كانت الصورةُ العريضةُ **بداخلِها** فتؤدّي دورَ الذيل. ولمّا خرجت
      الصورةُ من الواجهةِ بطلبِ المالك انتهت الواجهةُ مبتورةً على سطرِ الملاحظات.
   ⚠️ والحشوُ في القاعدةِ الأساسيّةِ وحدَها عن قصد: قواعدُ الشاشاتِ الأربعُ
      تُبدّل الحشوَ العلويَّ فقط، فلا تصطدم بهذا ولا يتضاعف في الجوّال.
   ⛔ ولا يُحذف هذا السطرُ إلّا إن عادت كتلةٌ إلى داخلِ الواجهة. */
.hero {
  position:relative;
  padding-top:76px;
  padding-bottom:92px;
  isolation:isolate;
  overflow:hidden;
}
.hero-inner {
  text-align:center;
  position:relative;
  z-index:2;
}
.hero-halo {
  position:absolute;
  z-index:-2;
  top:0;right:0;bottom:auto;left:0;inset:0 0 auto;
  height:980px;
  background:radial-gradient(ellipse 58% 50% at 50% 43%,#102c534a,transparent 82%);
  pointer-events:none;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — شبكةُ الواجهةِ أُلغيت: صارت للصفحةِ كلِّها شبكةٌ واحدةٌ
      على الجسمِ نفسِه. وشبكتان فوقَ بعضهما بأصلين مختلفين لا تتحاذى خطوطُهما
      أبداً — أصلُ هذي من أعلى الواجهةِ وأصلُ تلك من أعلى الصفحة — فتظهر
      خطوطٌ مزدوجةٌ متقاربةٌ في الواجهةِ وحدَها، وهو أسوأُ من غيابِ الشبكة.
   ✅ والعنصرُ باقٍ في الصفحةِ بلا خلفيّة: حذفُه من البناءِ يكسر ترقيمَ الأعماقِ
      في الواجهةِ بلا داعٍ، وهو لا يُكلّف شيئاً فارغاً.
   ⛔ ولا تُعَد له شبكةٌ خاصّةٌ ما دامت للصفحةِ شبكةٌ موحّدة. */
.hero-grid {
  position:absolute;
  z-index:-1;
  top:0;right:0;bottom:0;left:0;inset:0;
  background-image:linear-gradient(#4d91bf08 1px,transparent 1px),linear-gradient(90deg,#4d91bf08 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:radial-gradient(ellipse 48% 37% at 50% 26%,#000 20%,transparent 95%);
  pointer-events:none;
}
/* ════════════════════════════════════════════════════════════════════════
   فيديو الواجهة — خلفية متحركة خلف العنوان، تعيد نفسها بلا توقّف.

   ⚠️⚠️ عمقه أدنى من الهالة والشبكة فيبقى خلفهما جميعاً، والنقرات تعبره:
      طبقة تعترض النقر فوق الواجهة تبتلع زرّي المتجرين بلا أثر ظاهر للسبب.
   ⚠️⚠️⚠️ والتعتيم فوقه ضرورةُ تشغيل لا زينة: قِستُ سطوع الشريط الأوسط من
      الفيديو نفسه — حيث يجلس العنوان — فكان متوسطه تسعة وأربعين من مئتين
      وخمسة وخمسين، وذروته ثلاثة وسبعين، وثلاثون بالمئة من الإطارات فوق
      الستّين. والعنوان الأبيض على هذا يضيع في ثلث المدّة. والتعتيم المختار
      يهبط بالذروة إلى قرابة التسعة والعشرين فيبقى النصّ حادّاً والفيديو مرئيّاً.
   ⛔ فلا يُخفَّف هذا التعتيم بحجّة «إظهار الفيديو أكثر»: الواجهة عنوانٌ أوّلاً
      وخلفيّةٌ ثانياً، ومتى نافس الفيديو العنوان سقط الاثنان.
   ⚠️ والفيديو صامتٌ ومكرّرٌ ويعمل داخل الصفحة: بلا الصمت تمنع المتصفّحات
      التشغيل التلقائيّ أصلاً، وبلا التشغيل داخل الصفحة يفتحه آيفون ملءَ الشاشة.
   ⚠️ ومن يكره الحركة يُعفى منها: نظام التشغيل يبلّغ ذلك، وتجاهله مضايقةٌ
      لمن اختاره لسببٍ صحّيّ.
   ⚠️ وعلى الجوّال الإطار عريضٌ والواجهة طويلة، فالقصّ من الجانبين كبير —
      وهذا مقصود: التغطية أولى من ظهور الإطار كاملاً مع فراغٍ أسودَ حوله.
   ════════════════════════════════════════════════════════════════════════ */
.hero-video {
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.hero:after {
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#04070ce6,#04070ca6 42%,#04070cd9);
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٧ — كان هنا إخفاءٌ للعنصرِ كلِّه عند «قلِّل الحركة»، فيُخفي معه
   غلافَه الساكن: من اختار ذلك كان يرى واجهةً بلا صورةٍ إطلاقاً. والحركةُ نفسُها
   ممنوعةٌ في السكربت — لا يُستدعى التشغيلُ أصلاً — فالغلافُ صورةٌ ساكنةٌ لا حركةَ فيها.
   ⛔ لا يُعاد الإخفاءُ هنا: المنعُ مكانُه السكربتُ لا التنسيق. */
.hero-eyebrow {
  font-size:14px;
  margin-bottom:26px;
  padding:5px 17px;
  border:1px solid #7d9fc12c;
  border-radius:30px;
  background:#ffffff03;
}
.tiny-spark {
  color:#4cc8ff;
}
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢١ — كان ارتفاعُ السطرِ تسعاً وعشرين بالمئةِ فوق حجمِ الخطّ،
      وهو مقاسٌ لاتينيٌّ لا عربيّ: العربيّةُ تنزل تحت خطِّ الأساسِ وتصعد فوقه
      أكثرَ بكثير — الياءُ والقافُ تنزلان، والشدّةُ تصعد. ومع خطٍّ يبلغ سبعةً
      وثمانين نقطةً صار صندوقُ السطرِ أقصرَ من الحرفِ نفسِه، فقُصّت الذيول.
   ⛔ ولا يُنزَّل هذا الرقمُ تحت اثنتين وأربعين لأيِّ سببٍ جماليّ. */
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — الوزن ثمان مئة بطلب المالك: «متّن الخطّ لا تكبّر المقاس».
   وخطّ المراعي محمّل بأربعة أوزان حقيقية — ثلاث مئة وأربع مئة وسبع مئة وثمان
   مئة — فالتمتين حقيقيّ لا تسميناً صناعيّاً يشوّه الحروف.
   ⚠️⚠️ والوزن الأثقل يوسّع الحروف، فقِست بعده عرض السطر الملوّن مقابل السطر
   المتاح على أضيق الشاشات للتأكّد أنّه لم يعد ينكسر سطرين.
   ⛔ والوزن هنا في القاعدة الأساسية عمداً لا داخل استعلام شاشة: لا داعي
      لاختلافه بالعرض، ووضعه في الأساس يمنع ولادة قاعدة ميّتة تضلّل من بعدي. */
.hero h1 {
  font-size:clamp(56px,6.4vw,87px);
  line-height:1.42;
  font-weight:800;
  letter-spacing:-2.1px;
}
/* ⚠️ الوزن سبع مئة بطلب المالك: تمتين نصوص الواجهة كلّها بلا تكبير مقاسها.
   وهو في القاعدة الأساسية لا داخل استعلام شاشة، فلا قاعدة وزن أخرى تغلبه. */
.hero-description {
  max-width:750px;
  margin:27px auto 0;
  color:#9eabba;
  font-size:19px;
  font-weight:700;
  line-height:1.9;
}
.hero-description strong {
  color:#dbe6f6;
  /* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — كان أربعَ مئةٍ ووصفُ الهيرو سبعُ مئة، فكلُّ عبارةٍ
     تُلَفُّ بهذا الوسمِ تخرج **أنحفَ** ممّا حولَها لا أمتن. ورآها المالكُ
     فوراً يومَ أُضيفت عبارةُ المجّانيّة. ⛔ فالتمييزُ هنا **باللونِ وحدَه**،
     والوزنُ يبقى سبعَ مئةٍ كبقيّةِ نصوصِ الهيرو بأمرِه السابقِ بتمتينِها كلِّها. */
  font-weight:700;
}
.hero-actions {
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  margin-top:33px;
}
.hero-actions .play-mini {
  font-family:var(--font);
  font-size:12px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border:1px solid #8a99ad;
  border-radius:50%;
  padding-left:2px;
}
.hero-notes {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  color:#8c9bb0;
  font-size:13px;
  font-weight:700;
  margin-top:24px;
}
.hero-notes span+span:before {
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#486076;
  margin-inline-end:25px;
  vertical-align:middle;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — النقطةُ الفاصلةُ مربوطةٌ بالعبارةِ التي بعدها، فإذا انكسر
   السطرُ نزلت معها فصارت في **أوّلِ** السطرِ الجديدِ معلّقةً بلا شيءٍ قبلها.
   وهذا يقع على الشاشاتِ الضيّقةِ وحدَها — ثلاثةُ أسطرٍ عند ثلاثِ مئةٍ وعشرين
   وسطران عند ثلاثِ مئةٍ وتسعين وأربعِ مئةٍ وثلاثين — ويختفي من سبعِ مئةٍ
   وثمانٍ وستّين فصاعداً حيث يبقى السطرُ واحداً. وهو في أوّلِ شاشةٍ يراها الزائر.
   ✅ فتُخفى النقطةُ حيث ينكسر السطرُ وحدَه: الفجوةُ بين العباراتِ تكفي للفصل.
   ⛔ ولا تُحَل بمنعِ الكسرِ: ذلك يُخرج النصَّ عن الشاشةِ وهو أسوأ. */
@media(max-width:767px) {
  .hero-notes span+span:before {
    display:none;
  }
}
.cinema-wrap {
  margin-top:68px;
}
.cinema {
  width:100%;
  height:545px;
  position:relative;
  isolation:isolate;
  text-align:initial;
  overflow:hidden;
  border:1px solid #668fba38;
  border-radius:19px;
  background:#0c1823;
  box-shadow:0 20px 100px #0006;
  display:block;
  padding:0;
}
.cinema-image {
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.cinema:hover .cinema-image {
  transform:scale(1.035);
}
.cinema-overlay {
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(0deg,#03070dea 0%,#030a0f25 50%,#03070d6e 100%),linear-gradient(90deg,#040b1570,#040b1515);
  pointer-events:none;
}
.cinema-top,.cinema-bottom {
  position:absolute;
  left:35px;
  right:35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.cinema-top {
  top:28px;
  direction:ltr;
}
.mini-wordmark {
  font-family:var(--font);
  letter-spacing:2.8px;
  font-size:13px;
  font-weight:700;
}
.mini-wordmark>span {
  font-size:12px;
  color:#bac9d7;
  letter-spacing:1.8px;
}
.cinema-tag {
  font-size:12px;
  border:1px solid #ffffff40;
  background:#03091255;
  border-radius:30px;
  padding:3px 14px;
  direction:rtl;
}
.cinema-center {
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:10px;
  padding:65px 25px;
}
.play-large {
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:50%;
  border:1px solid #ffffff65;
  background:#e6f7ff13;
  backdrop-filter:blur(16px);
  font-family:var(--font);
  font-size:22px;
  padding-left:4px;
  margin-bottom:16px;
  box-shadow:inset 0 0 20px #ffffff0a;
  transition:background .25s,transform .25s;
}
.cinema:hover .play-large {
  background:#2078ffd0;
  transform:scale(1.08);
}
.cinema-title {
  font-size:31px;
  font-weight:700;
  text-shadow:0 2px 22px #000;
}
.cinema-center .cinema-caption {
  font-size:14px;
  color:#c3d0dc;
}
.cinema-bottom {
  bottom:25px;
  font-size:14px;
  color:#b7c6d5;
}
.video-length {
  display:flex;
  align-items:center;
  gap:18px;
  color:#dce8f8;
  font-family:var(--font);
  font-size:13px;
}
.video-length>span {
  font-size:22px;
}
.cinema-footnote {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
  font-size:13px;
  color:#8193a9;
}
.editorial-code {
  font:12px/1.4 var(--font);
  letter-spacing:1.7px;
  color:#869ab4;
}
.cinema-footnote .editorial-code {
  font-size:12px;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — كان الشريطُ خطّين شعريّين على سوادٍ مسطّح، وهو الكتلةُ
   الوحيدةُ التي بقيت بلا خلفيّةٍ في الصفحةِ كلِّها بعد كسوةِ الأقسام.
   ⚠️ ومسحةٌ أفقيّةٌ لا هالةٌ شعاعيّة: الشريطُ رفيعٌ جدّاً، والهالةُ تحته
      تُقصّ من نصفِها فتبدو بقعةً مبتورةً لا عمقاً.
   ⚠️ والتدرّجُ يخفت عند الطرفين فيلتقي بالسوادِ بلا حافّةٍ صريحة. */
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — كان للشريطِ مسحتُه الخاصّةُ فوق قاعدةٍ **صلبةٍ** تملأ
      العرض. والقاعدةُ الصلبةُ تحجب خلفيّةَ الصفحةِ تحتها حجباً تامّاً، فكانت
      الصفحةُ تُقطَع عند هذا الشريطِ ثمّ تعود — وهذا بعينِه ما يكسر وحدةَ
      الخلفيّةِ المطلوبة. أثبته القياس: نافذةٌ كاملةٌ تقرأ لوناً مسطّحاً واحداً
      أغمقَ من أساسِ الصفحةِ نفسِها.
   ✅ بقيَ الحدّانِ العلويُّ والسفليُّ وحدَهما: هما خطّان لا خلفيّة، يفصلان
      الشريطَ عمّا حولَه بلا أن يحجبا ما تحته.
   ⛔ ولا يُعاد لهذا الشريطِ — ولا لأيِّ كتلةٍ تملأ العرضَ — لونٌ خاصٌّ به:
      خلفيّةُ الصفحةِ واحدةٌ تمرُّ من خلالها كلِّها. والبطاقاتُ المحدودةُ
      استثناءٌ: هي أسطحٌ داخلَ الصفحةِ لا كتلٌ منها. */
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — بلا أيِّ صبغةٍ فقد الشريطُ كونَه شريطاً: صارت المحاورُ
      نصوصاً سابحةً على نفسِ حقلِ الصفحةِ بلا كيانٍ يجمعها. والصبغةُ **لونٌ
      شبهُ شفّافٍ** لا تدرّجٌ صلب: ترفع الشريطَ قليلاً فيُقرأ كتلةً قائمةً
      بذاتها، وتنفذ من خلالها خلفيّةُ الصفحةِ بوهجِها ونسيجِها فلا تُقطَع.
   ⛔ ولا يُعاد له تدرّجٌ معتمٌ يملأ العرض: ذاك يحجب الخلفيّةَ ويقطع الصفحة. */
/* ⚠️ والصبغةُ الأولى كانت سبعةً من مئتين وخمسٍ وخمسين — خفيفةً إلى حدِّ أنّها
   لم تُعِد للشريطِ كيانَه، رأيتُ ذلك في اللقطةِ بعد النشر. رُفعت إلى الضعفين
   ونصف، ورُفع معها حدّاه: الحدُّ يرسم أين يبدأ الشريطُ وأين ينتهي، والصبغةُ
   ترفعه عن الحقلِ — والاثنان معاً يصنعان الشريطَ لا أحدُهما. */
.topics-strip {
  border-block:1px solid var(--line);
  margin-top:70px;
  background:
    linear-gradient(90deg,transparent,#0e1c2e88 22%,#102338aa 50%,#0e1c2e88 78%,transparent),
    linear-gradient(180deg,#070d16,#070d16);
}
.topics-inner {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:20px;
  padding-block:27px;
  color:#bec8d5;
  font-size:16px;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — كان لونُ هذي العلاماتِ يعطي تبايناً بين اثنين وستّةٍ
   وثمانين وثلاثةٍ وستّةَ عشر، والحدُّ المقبولُ أربعةٌ ونصف. وهو **الموضعُ
   الوحيدُ** في الصفحةِ كلِّها الذي نزل تحت حدِّ القراءة. وأثرُه جماليٌّ لا
   وظيفيٌّ — العلامةُ زخرفةٌ لا يقرؤها قارئُ الشاشة — لكنّها كانت تكاد تختفي
   على الشاشاتِ الواسعةِ فتبدو المسافةُ بين المحاورِ فارغةً بلا سبب. */
.topics-inner i {
  font-size:12px;
  color:#6f93b5;
  font-style:normal;
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:120px;
}
.about-copy {
  padding-top:9px;
}
.about-copy .large-copy {
  font-size:25px;
  line-height:1.7;
  color:#d4dde9;
  margin-bottom:23px;
}
.large-copy>span {
  color:#2bbbf3;
}
.about-copy>p:not(.large-copy) {
  color:#93a2b6;
  font-size:17px;
  margin-bottom:20px;
  line-height:1.95;
}
.text-link {
  display:inline-flex;
  gap:35px;
  align-items:center;
  color:#c5defe;
  font-size:15px;
  font-weight:400;
  border-bottom:1px solid #39516d;
  padding-bottom:8px;
  margin-top:9px;
}
.text-link>span {
  color:#54acff;
  font-size:24px;
}
.learn-section {
  padding-top:0;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:45px;
  margin-bottom:45px;
}
.section-heading>p {
  color:#8c9cb1;
  font-size:16px;
  line-height:1.85;
  padding-bottom:5px;
}
.learning-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.learning-card {
  position:relative;
  border:1px solid #7894bd24;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(150deg,#0f1a29,#09111b 72%);
}
.intelligence {
  background:linear-gradient(150deg,#102526,#08131b 65%);
}
.card-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:25px 30px 0;
  color:#9badc4;
  font-size:13px;
}
.card-topline .editorial-code {
  font-size:12px;
}
.card-visual {
  height:215px;
  position:relative;
  margin:24px 25px 8px;
  overflow:hidden;
}
.book-visual svg {
  width:100%;
  height:100%;
}
.visual-label {
  position:absolute;
  top:11px;
  right:14px;
  border:1px solid #4374a759;
  border-radius:5px;
  background:#0b1b2a;
  padding:4px 12px;
  font-size:12px;
  color:#b9d8ff;
}
.card-copy {
  padding:17px 31px 34px;
}
.card-kicker {
  color:#43a3fb;
  font-size:13px;
  display:block;
  margin-bottom:7px;
}
.intelligence .card-kicker {
  color:#42cfc2;
}
.card-copy h3 {
  font-size:29px;
  line-height:1.5;
  margin-bottom:12px;
}
.card-copy p {
  font-size:16px;
  line-height:1.85;
  color:#97a6ba;
  min-height:90px;
}
.card-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:21px;
}
.card-tags>span {
  font-size:12px;
  color:#a7bad2;
  border:1px solid #7d9fc12e;
  border-radius:5px;
  padding:3px 11px;
  background:#ffffff02;
}
.ai-visual {
  padding:0 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ai-request {
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:38px;
  padding:8px 15px;
  color:#b4ccd9;
  font-size:12px;
  border:1px solid #49666861;
  border-radius:9px;
  background:#132628;
  z-index:2;
  transform:translateX(-10px);
}
.ai-request-icon {
  width:20px;
  height:20px;
  border-radius:4px;
  background:#39afa742;
  color:#9feddd;
  display:grid;
  place-items:center;
}
.ai-response {
  width:88%;
  align-self:flex-end;
  border:1px solid #325d685e;
  background:linear-gradient(115deg,#10252e,#0b1b24);
  border-radius:12px;
  padding:18px 21px;
  transform:translateY(10px);
  box-shadow:0 12px 40px #0004;
}
.ai-response-title {
  display:flex;
  gap:12px;
  align-items:center;
  color:#c6e7e7;
  font-size:13px;
}
.ai-spark {
  color:#3ee2c8;
  font-size:25px;
}
.ai-line {
  display:block;
  height:5px;
  background:#52787832;
  border-radius:4px;
  margin-top:11px;
}
.line-1 {
  width:96%;
}
.line-2 {
  width:75%;
}
.line-3 {
  width:83%;
}
.ai-status {
  display:flex;
  gap:10px;
  margin-top:18px;
  font-size:12px;
  color:#86beba;
}
.ai-status span+span {
  border-right:1px solid #4685814f;
  padding-right:10px;
}
.section-note {
  font-size:12px;
  color:#8296b1;
  margin-top:20px;
}
.mindset-section {
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0a111a77,transparent);
}
.mindset-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:90px;
  direction:ltr;
}
.mindset-grid>* {
  direction:rtl;
}
.mindset-photo {
  position:relative;
  height:560px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #809fc022;
}
.mindset-photo:after {
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(0deg,#030b15e6,transparent 50%);
  pointer-events:none;
}
.mindset-photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo-caption {
  position:absolute;
  bottom:25px;
  right:28px;
  left:28px;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:15px;
}
.photo-caption .editorial-code {
  font-size:12px;
  color:#a4b8cd;
}
.mindset-copy h2 {
  font-size:clamp(34px,3.9vw,51px);
}
.mindset-copy>p {
  color:#91a3b9;
  font-size:17px;
  line-height:1.9;
  margin-top:25px;
}
.mindset-steps {
  list-style:none;
  padding:0;
  margin:28px 0 0;
}
.mindset-steps li {
  display:flex;
  align-items:flex-start;
  gap:20px;
  border-top:1px solid #ffffff0b;
  padding-top:16px;
  margin-top:16px;
}
.mindset-steps li>span {
  font:13px/2 var(--font);
  color:#6c9bc3;
}
.mindset-steps h3 {
  font-size:16px;
  color:#ced9e8;
  font-weight:400;
}
.mindset-steps p {
  font-size:14px;
  color:#91a4bd;
  margin-top:2px;
}
.experience-section {
  padding-top:25px;
}
.download-section {
  padding-top:5px;
}
.download-panel {
  border:1px solid #4976ba47;
  border-radius:24px;
  background:#0b1625;
  position:relative;
  overflow:hidden;
  text-align:center;
  isolation:isolate;
  padding-block:72px 64px;
}
.download-pattern {
  position:absolute;
  top:0;right:0;bottom:0;left:0;inset:0;
  z-index:-1;
  background:radial-gradient(ellipse 65% 95% at 50% 115%,#1c5bde60,transparent 90%),linear-gradient(#578cfb0a 1px,transparent 1px),linear-gradient(90deg,#578cfb0a 1px,transparent 1px);
  background-size:auto,70px 70px,70px 70px;
  mask-image:linear-gradient(transparent 0%,black 55%);
}
.download-inner {
  padding:0 25px;
}
.download-panel .eyebrow {
  color:#b3ccec;
  margin-bottom:17px;
}
.download-panel h2 {
  font-size:clamp(58px,6.2vw,81px);
  line-height:1.18;
  font-weight:700;
}
.download-panel p {
  font-size:17px;
  color:#9eafc4;
  line-height:1.9;
  margin-top:23px;
}
.store-buttons {
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:center;
  margin-top:31px;
  direction:ltr;
}
.store-button {
  background:#eff5ff;
  display:flex;
  align-items:center;
  gap:13px;
  min-width:214px;
  min-height:70px;
  border:1px solid #fff9;
  border-radius:10px;
  padding:9px 19px;
  color:#081326;
  transition:background .2s,transform .2s;
  text-align:left;
}
.store-button:hover {
  background:#fff;
  transform:translateY(-3px);
}
.store-button>svg {
  width:30px;
  height:35px;
}
.store-button>span:not(.store-arrow) {
  display:flex;
  flex-direction:column;
  gap:0;
}
.store-button small {
  font-size:12px;
  line-height:1.5;
  direction:rtl;
  text-align:left;
}
.store-button strong {
  font:700 21px/1.35 var(--font);
  letter-spacing:-.4px;
}
.download-platforms {
  display:block;
  margin-top:25px;
  font:12px/1.5 var(--font);
  letter-spacing:2px;
  color:#91b3dd;
}
.faq-section {
  padding-top:0;
}
.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
}
.faq-grid h2 {
  font-size:44px;
}
.faq-lead {
  color:#8c9aad;
  margin-top:12px;
  font-size:17px;
}
.faq-list {
  border-top:1px solid #ffffff18;
}
.faq-list details {
  border-bottom:1px solid #ffffff18;
}
.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:21px 0;
  font-size:17px;
  cursor:pointer;
  color:#ced9e8;
}
.faq-list summary::-webkit-details-marker {
  display:none;
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — كان الوزنُ هنا ثلاثَ مئة، وهو **الموضعُ الوحيدُ** في
   الموقعِ كلِّه الذي يستعمله. فكان وجهُ خطٍّ كاملٌ — ستّةٌ وعشرون كيلوبايتاً
   ونصف — ينزل على كلِّ زائرٍ لأجلِ رسمِ علامةِ فتحٍ وإغلاقٍ واحدةٍ في قسمٍ
   أسفلَ الصفحةِ قد لا يصل إليه أصلاً. ورُفع إلى أربعِ مئةٍ وهو محمَّلٌ سلفاً،
   فسقط الوجهُ الرابعُ من التحميل. والفرقُ البصريُّ في علامةٍ واحدةٍ لا يُذكَر.
   ⛔ ولا يُعاد وزنٌ لا يستعمله إلّا موضعٌ واحد. */
.faq-list summary>span {
  font:400 23px/1 var(--font);
  color:#7c90ac;
  transition:transform .2s;
}
.faq-list details[open] summary>span {
  transform:rotate(45deg);
  color:#63b9f6;
}
.faq-answer {
  padding:0 0 22px;
  color:#9aabc2;
  font-size:16px;
  line-height:1.9;
}
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — كان للتذييلِ لونٌ صلبٌ **أغمقُ من أساسِ الصفحةِ نفسِها**،
      فكان آخرُ الصفحةِ يُقرأ لوناً مسطّحاً واحداً لا أثرَ فيه للخلفيّة. وهذا
      ما أظهره القياسُ في آخرِ موضعِ تمرير: أربعُ نقاطِ قياسٍ متطابقةٌ تماماً.
      والمطلوبُ خلفيّةٌ واحدةٌ **إلى آخرِ الصفحة**، والتذييلُ آخرُها.
   ✅ بقيَ الحدُّ العلويُّ وحدَه فاصلاً. ⛔ ولا يُعاد له لونٌ خاصّ. */
/* ⚠️ والتذييلُ خارجَ الحاوي الرئيسيِّ فلا تصله درزةُ الكتل، فيأخذ فصلَه
   بنفسِه: حدٌّ أوضحُ وصبغةٌ شبهُ شفّافةٍ تُنهي الصفحةَ نهايةً مقروءةً بلا أن
   تحجب خلفيّتَها. ⛔ ولا يُعاد له لونٌ صلبٌ أغمقُ من أساسِ الصفحة. */
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — المسافةُ فوقَ التذييلِ كانت اثنتين وثلاثين نقطةً على
   الجوّالِ بينما تبلغ بين قسمين آخرين مئتين وإحدى وأربعين، فكان يبدو ملصوقاً
   بما فوقَه. قِيست الفجواتُ فعليّاً بين آخرِ عنصرٍ مرسومٍ وأوّلِ ما يليه، لا
   بالحشوِ المعلَنِ وحدَه — والحشوُ وحدَه يكذب حين يكون أعلى الكتلةِ فارغاً.
   ⚠️ والزيادةُ في الأعلى فقط: الأسفلُ محسوبٌ على ارتفاعِ شريطِ الجوّالِ السفليّ.
   ⛔ ولا تُوحَّد حشواتُ الأقسامِ الأربعةِ ذاتِ الحشوِ العلويِّ الصفريّ — التعلّمُ
      والتجربةُ والتحميلُ والأسئلة — فأصفارُها مقصودةٌ: فوقَ كلٍّ منها كتلةٌ
      تحمل مسافتَها السفليّةَ بنفسِها، وتوحيدُها يُعيد الفجوةَ المضاعفةَ التي
      كُتبت هذي الأصفارُ لإزالتِها. القياسُ رأى التفاوتَ ولم يرَ سببَه. */
.site-footer {
  border-top:1px solid #ffffff14;
  background:#04070c;
  padding-block:47px 25px;
}
/* ⚠️ وهذي تحكم ما بين خمسِ مئةٍ وواحدٍ وستّين وثمانِ مئةٍ وحدَها — لا الجوّالَ،
   فقاعدةُ خمسِ مئةٍ وستّين تغلبها هناك. وقيمتُها مضبوطةٌ على حشوِ الأقسامِ في
   هذا الحدِّ أيضاً، كي يبقى إيقاعُ الصفحةِ واحداً في كلِّ عرض. */
@media(max-width:800px) {
  .site-footer {
    padding-block:72px 25px;
  }
}
.back-top {
  margin-inline-start:auto;
  font-size:14px;
  color:#a5b3c5;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:44px;
}
.back-top>span {
  font-size:20px;
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:22px;
  color:#8fa2ba;
  font-size:12px;
}
.footer-bottom a:hover {
  color:#e3efff;
}
.risk-note {
  font-size:12px;
  color:#8293ab;
  margin-top:20px;
  line-height:1.8;
}
.mobile-only {
  display:none;
}
.store-dialog::backdrop {
  background:#01050cdd;
  backdrop-filter:blur(9px);
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:14px 20px;
}
.dialog-top h2 {
  font-size:18px;
  letter-spacing:0;
}
.icon-button {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid #677c9633;
  background:#ffffff05;
  font:28px/1 var(--font);
}
.icon-button:hover {
  background:#ffffff15;
}
.dialog-caption {
  padding:16px 21px;
  color:#a4b5c9;
  font-size:14px;
}
.video-error {
  padding:18px 21px;
  font-size:15px;
  color:#e1c1ac;
}
.video-error a {
  text-decoration:underline;
  color:#8cc8ff;
}
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — كان هنا «موضعٌ نسبيّ»، وهو يكسر أهمَّ دعوةٍ في الموقع.
      النافذةُ الحواريّةُ الطافيةُ موضعُها مثبّتٌ بالشاشةِ افتراضاً، فلمّا كُتب
      النسبيُّ صارت جزءاً من الصفحةِ في أعلاها — فيَنزلق المتصفّحُ إليها ليُظهرها
      ويسحب الزائرَ معه إلى رأسِ الصفحة. قِيس حيّاً: زائرٌ عند أربعةِ آلافٍ
      وواحدٍ وسبعين وجد نفسَه عند الصفرِ بمجرّدِ ضغطِ زرِّ التحميل، ولا يعود إلى
      مكانِه بعد الإغلاق. ويقع على كلِّ أزرارِ التحميلِ في الصفحةِ وعلى العرضين.
   ✅ وأُثبتت السببيّةُ عكسيّاً: بتثبيتِ الموضعِ في جلسةِ المتصفّحِ وحدَها بقي
      الزائرُ في مكانِه تماماً.
   ⛔ فلا يُعاد تحديدُ موضعِ هذي النافذةِ إطلاقاً — الافتراضيُّ هو الصحيح. */
.store-dialog {
  width:min(440px,calc(100% - 40px));
  padding:45px 28px 34px;
  text-align:center;
  border-radius:20px;
  background:#0d1929;
  border:1px solid #45608a;
  color:var(--text);
}
.store-dialog h2 {
  font-size:28px;
  letter-spacing:0;
}
.store-dialog p {
  margin:15px 0 25px;
  font-size:16px;
  color:#a9bbd1;
}
.store-close {
  position:absolute;
  top:12px;
  left:12px;
}
.dialog-spark {
  display:grid;
  place-items:center;
  width:57px;
  height:57px;
  border:1px solid #559eff54;
  background:#1876ff14;
  border-radius:17px;
  font-size:31px;
  color:#6bb3ff;
  margin:0 auto 22px;
}
.noscript-note {
  position:relative;
  text-align:center;
  padding:15px;
  background:#172d45;
  font-size:14px;
}
.noscript-note a {
  text-decoration:underline;
}
/* Supporting pages. */
.document-main {
  padding:85px 0 110px;
  min-height:68vh;
}
.document-container {
  width:min(800px,calc(100% - 56px));
  margin:auto;
}
.document-main h1 {
  font-size:clamp(38px,5vw,62px);
  line-height:1.35;
  margin:15px 0 22px;
}
.document-main h2 {
  font-size:25px;
  letter-spacing:0;
  margin:35px 0 13px;
}
.document-main p,.document-main li {
  color:#9aacc3;
  font-size:17px;
  line-height:1.95;
}
.document-main p+p {
  margin-top:15px;
}
.document-main ul {
  padding-inline-start:24px;
}
.document-main a {
  color:#70b5ff;
  text-decoration:underline;
  text-underline-offset:4px;
}
.document-main .button {
  color:white;
  text-decoration:none;
}
.document-note {
  padding:20px 24px;
  border:1px solid #36506d;
  border-radius:10px;
  background:#112239;
  margin-bottom:35px;
}
.document-note p {
  font-size:15px;
  color:#b7cde4;
}
.error-number {
  font:400 clamp(100px,20vw,220px)/1 var(--font);
  letter-spacing:-12px;
  color:#162d4d;
  text-align:center;
}
.error-page {
  text-align:center;
}
.error-page p {
  max-width:510px;
  margin:0 auto 30px;
}
.error-page .button {
  display:inline-flex;
}
@media(min-width:1600px) {
  .hero {
    padding-top:96px;
  }
  .hero h1 {
    font-size:94px;
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 56px);
  }
  .desktop-nav {
    gap:20px;
  }
  .logo-window {
    width:138px;
  }
  .header-inner {
    gap:20px;
  }
  .section {
    padding-block:85px;
  }
  .hero {
    padding-top:65px;
  }
  .hero h1 {
    font-size:72px;
  }
  .cinema {
    height:480px;
  }
  .about-grid {
    gap:65px;
  }
  .mindset-grid {
    gap:50px;
  }
  .mindset-photo {
    height:510px;
  }
  .faq-grid {
    gap:55px;
  }
  .learn-section {
    padding-top:0;
  }
  .experience-section {
    padding-top:15px;
  }
  .download-section,.faq-section {
    padding-top:0;
  }
  .card-copy {
    padding-inline:25px;
  }
  .card-copy h3 {
    font-size:26px;
  }
  .card-copy p {
    min-height:120px;
  }
  .card-topline {
    padding-inline:25px;
  }
  .ai-visual {
    padding-inline:0;
  }
  .mini-wordmark>span {
    display:none;
  }
}
@media(max-width:800px) {
  .site-header {
    height:80px;
  }
  .desktop-nav {
    display:none;
  }
  .menu-toggle {
    display:block;
  }
  .header-actions {
    gap:10px;
  }
  .logo-window {
    width:132px;
  }
  .hero {
    padding-top:53px;
  }
  .hero h1 {
    font-size:60px;
  }
  .hero-description {
    font-size:17px;
  }
  .hero-actions .button {
    min-height:54px;
    padding-inline:22px;
    font-size:15px;
  }
  .hero-notes {
    gap:14px;
    font-size:12px;
  }
  .hero-notes span+span:before {
    margin-inline-end:14px;
  }
  .cinema-wrap {
    margin-top:50px;
  }
  .cinema {
    height:390px;
  }
  .cinema-top,.cinema-bottom {
    right:24px;
    left:24px;
  }
  .cinema-title {
    font-size:27px;
  }
  .cinema-footnote .editorial-code {
    display:none;
  }
  .topics-inner {
    font-size:14px;
    padding-block:22px;
    gap:12px;
  }
  .topics-strip {
    margin-top:45px;
  }
  .about-grid {
    gap:35px;
    grid-template-columns:1fr 1.15fr;
  }
  .about-copy .large-copy {
    font-size:22px;
  }
  .about-copy>p:not(.large-copy) {
    font-size:16px;
  }
  .section-heading {
    gap:25px;
  }
  .section-heading>p {
    font-size:16px;
  }
  .learning-grid {
    gap:18px;
  }
  .card-topline {
    padding:22px 20px 0;
  }
  .card-topline .editorial-code {
    display:none;
  }
  .card-copy {
    padding:10px 20px 26px;
  }
  .card-copy h3 {
    font-size:23px;
  }
  .card-copy p {
    font-size:16px;
    min-height:144px;
  }
  .card-visual {
    height:180px;
    margin:20px 14px 10px;
  }
  .ai-request {
    font-size:12px;
    gap:20px;
    padding:7px 10px;
  }
  .ai-response {
    padding:12px 14px;
    width:94%;
  }
  .ai-response-title {
    font-size:12px;
    gap:8px;
  }
  .ai-line {
    height:4px;
    margin-top:8px;
  }
  .ai-status {
    margin-top:12px;
    gap:8px;
  }
  .ai-status span+span {
    padding-right:8px;
  }
  .card-tags>span {
    padding:3px 8px;
  }
  .mindset-grid {
    grid-template-columns:1fr 1.1fr;
    gap:33px;
  }
  .mindset-photo {
    height:490px;
  }
  .mindset-copy>p {
    font-size:16px;
  }
  .mindset-copy h2 {
    font-size:34px;
  }
  .mindset-steps h3 {
    font-size:16px;
  }
  .mindset-steps li {
    gap:14px;
  }
  .photo-caption {
    right:19px;
    left:19px;
    font-size:14px;
  }
  .photo-caption .editorial-code {
    display:none;
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .faq-grid h2 {
    font-size:37px;
  }
  .faq-lead {
    display:none;
  }
  .faq-list summary {
    font-size:16px;
  }
  .download-panel h2 {
    font-size:64px;
  }
  .section {
    padding-block:72px;
  }
  .learn-section,.experience-section,.download-section,.faq-section {
    padding-top:0;
  }
      .footer-bottom {
    gap:18px;
  }
    .document-main {
    padding-block:60px 80px;
  }
}
@media(max-width:560px) {
  .container {
    width:calc(100% - 38px);
  }
  html {
    scroll-padding-top:24px;
  }
  .site-header {
    height:76px;
  }
  .logo-window {
    width:119px;
  }
  .header-actions>.button {
    font-size:14px;
    min-height:44px;
    padding:8px 13px;
    gap:12px;
  }
  .header-actions>.button>span {
    font-size:17px;
  }
  .header-actions {
    gap:4px;
  }
  .header-inner {
    gap:10px;
  }
  .menu-toggle {
    width:40px;
    padding:9px;
  }
  .hero {
    padding-top:44px;
  }
  .hero-eyebrow {
    font-size:12px;
    padding:4px 14px;
    gap:9px;
    margin-bottom:23px;
  }
  .hero h1 {
    font-size:clamp(38px,10.25vw,57px);
    line-height:1.42;
    letter-spacing:-1px;
  }
  .hero-description {
    font-size:16px;
    line-height:1.9;
    margin-top:21px;
    padding-inline:7px;
  }
  .desktop-only {
    display:none;
  }
  .mobile-only {
    display:initial;
  }
  .hero-actions {
    margin-top:27px;
    gap:10px;
    flex-direction:column;
  }
  .hero-actions .button {
    width:min(330px,100%);
    min-height:53px;
    font-size:15px;
  }
  .hero-actions .button-outline {
    border:0;
    background:transparent;
    min-height:44px;
    padding:5px 15px;
    color:#a7bbd5;
    font-size:14px;
    gap:12px;
  }
  .hero-notes {
    margin-top:19px;
    flex-wrap:wrap;
    gap:4px 13px;
    font-size:12px;
    padding-inline:5px;
  }
  .hero-notes span+span:before {
    margin-inline-end:13px;
  }
  .cinema-wrap {
    margin-top:35px;
  }
  .cinema {
    height:auto;
    aspect-ratio:1.28;
    border-radius:12px;
  }
  .cinema-top {
    top:16px;
    left:17px;
    right:17px;
  }
  .mini-wordmark {
    font-size:12px;
    letter-spacing:1.8px;
  }
  .cinema-tag {
    font-size:12px;
    padding:2px 10px;
  }
  .cinema-center {
    padding:50px 15px;
    gap:6px;
  }
  .play-large {
    width:58px;
    height:58px;
    font-size:18px;
    margin-bottom:9px;
  }
  .cinema-title {
    font-size:21px;
  }
  .cinema-center .cinema-caption {
    font-size:12px;
  }
  .cinema-bottom {
    bottom:14px;
    right:18px;
    left:18px;
    font-size:12px;
  }
  .video-length {
    font-size:12px;
    gap:9px;
  }
  .video-length>span {
    font-size:18px;
  }
  .cinema-footnote {
    font-size:12px;
    margin-top:12px;
  }
  .topics-strip {
    margin-top:33px;
  }
  .topics-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    text-align:center;
    row-gap:11px;
    padding-block:20px;
    font-size:14px;
  }
  .topics-inner i {
    display:none;
  }
  .topics-inner>span:nth-of-type(even) {
    border-right:1px solid #ffffff1c;
  }
  .section {
    padding-block:61px;
  }
  h2 {
    font-size:34px;
    line-height:1.4;
    letter-spacing:-.5px;
  }
  /* ⚠️ الشاشةُ الضيّقةُ تأخذ نسبةً موافقةً لا نفسَ أرقامِ الحاسوب: سبعةَ عشرَ
        ودائرةٌ ثلاثون. ونفسُ الأرقامِ الكبرى هنا تزحم السطرَ وتكسره. */
  .eyebrow {
    font-size:17px;
    font-weight:700;
    margin-bottom:20px;
    gap:11px;
  }
  .section-number {
    font-size:14px;
    width:30px;
    height:30px;
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .about-copy {
    padding-top:0;
  }
  .about-copy .large-copy {
    font-size:22px;
    margin-bottom:18px;
  }
  .about-copy>p:not(.large-copy) {
    font-size:16px;
    margin-bottom:15px;
  }
  .text-link {
    font-size:14px;
    gap:24px;
  }
  .learn-section {
    padding-top:0;
  }
  .section-heading {
    display:block;
    margin-bottom:30px;
  }
  .section-heading>p {
    font-size:16px;
    margin-top:20px;
  }
  .section-heading>p>br {
    display:none;
  }
  .learning-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .card-topline {
    padding:23px 23px 0;
    font-size:12px;
  }
  .card-topline .editorial-code {
    display:inline;
    font-size:12px;
    letter-spacing:.7px;
  }
  .card-visual {
    height:210px;
    margin:20px 18px 10px;
  }
  .card-copy {
    padding:9px 24px 28px;
  }
  .card-copy h3 {
    font-size:28px;
  }
  .card-copy p {
    min-height:0;
    font-size:16px;
  }
  .card-tags {
    gap:7px;
    margin-top:20px;
  }
  .card-tags>span {
    font-size:12px;
    padding:3px 9px;
  }
  .card-kicker {
    font-size:13px;
  }
  .ai-visual {
    padding-inline:13px;
  }
  .ai-request {
    font-size:12px;
    padding:7px 12px;
    gap:30px;
  }
  .ai-response {
    padding:15px 17px;
    width:87%;
  }
  .ai-response-title {
    font-size:12px;
    gap:11px;
  }
  .ai-line {
    height:4px;
    margin-top:10px;
  }
  .ai-status {
    font-size:12px;
    margin-top:15px;
  }
  .section-note {
    font-size:12px;
    margin-top:16px;
  }
  .mindset-grid {
    display:flex;
    flex-direction:column-reverse;
    gap:32px;
    align-items:stretch;
  }
  .mindset-copy h2 {
    font-size:37px;
  }
  .mindset-copy>p {
    font-size:16px;
    margin-top:18px;
  }
  .mindset-steps {
    margin-top:22px;
  }
  .mindset-steps li {
    padding-top:15px;
    margin-top:15px;
    gap:19px;
  }
  .mindset-steps h3 {
    font-size:16px;
  }
  .mindset-steps p {
    font-size:14px;
  }
  .mindset-photo {
    height:340px;
    border-radius:12px;
  }
  .mindset-photo>img {
    object-position:50% 60%;
  }
  .photo-caption {
    font-size:14px;
    bottom:19px;
  }
  .photo-caption .editorial-code {
    display:inline;
    font-size:12px;
    letter-spacing:1px;
  }
  .experience-section {
    padding-top:0;
  }
  .download-section {
    padding-top:0;
  }
  .download-panel {
    border-radius:17px;
    padding-block:45px 38px;
  }
  .download-inner {
    padding:0 19px;
  }
  .download-panel h2 {
    font-size:62px;
  }
  .download-panel p {
    font-size:16px;
    margin-top:19px;
  }
  .download-panel p>br {
    display:none;
  }
  .store-buttons {
    flex-direction:column;
    gap:12px;
    margin-top:25px;
  }
  .store-button {
    width:min(260px,100%);
    min-height:65px;
    padding-inline:20px;
    gap:16px;
  }
  .store-button strong {
    font-size:21px;
  }
  .download-platforms {
    font-size:12px;
    margin-top:22px;
    letter-spacing:1px;
  }
  .faq-section {
    padding-top:0;
  }
  .faq-grid {
    gap:15px;
  }
  .faq-grid h2 {
    font-size:34px;
  }
  .faq-list summary {
    padding:20px 0;
    gap:20px;
    font-size:16px;
    line-height:1.7;
  }
  .faq-answer {
    font-size:16px;
  }
        .back-top {
    margin-inline-start:0;
    width:100%;
    font-size:14px;
  }
  .footer-bottom {
    flex-direction:column-reverse;
    font-size:12px;
    gap:23px;
    padding-top:22px;
  }
    .risk-note {
    font-size:12px;
    margin-top:18px;
  }
  /* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — هذي هي القاعدة **الحاكمة** للتذييل على الجوّال، وتغلب
     قاعدةَ الأساسِ وقاعدةَ ثمانِ مئة معاً لأنّها أضيقُ حدّاً وأبعدُ في الملفّ.
     كان حشوُها العلويُّ أربعاً وثلاثين بينما حشوُ الأقسامِ عند نفسِ الحدِّ واحدٌ
     وستّون — أي نصفُ إيقاعِ الصفحة — فبدا التذييلُ ملصوقاً بما فوقَه. قِيست
     الفجوةُ فعليّاً فكانت اثنتين وثلاثين نقطةً مقابلَ مئتين وإحدى وأربعين بين
     قسمين آخرين.
     ✅ وضُبط على حشوِ الأقسامِ في هذا الحدِّ بعينِه لا على رقمٍ مخترَع.
     ⛔ ومن أراد تغييرَ حشوِ التذييلِ على الجوّالِ فليغيّر هنا: تعديلُ قاعدةِ
        الأساسِ أو قاعدةِ ثمانِ مئةٍ لا أثرَ له عند هذا العرضِ إطلاقاً. */
  .site-footer {
    padding-top:61px;
    padding-bottom:23px;
  }
  .dialog-top {
    padding:10px 13px;
  }
  .dialog-top h2 {
    font-size:16px;
  }
  .dialog-caption {
    padding:13px 16px;
    font-size:14px;
  }
  .document-container {
    width:calc(100% - 38px);
  }
  .document-main {
    padding-block:42px 65px;
  }
  .document-main h1 {
    font-size:36px;
  }
  .document-main h2 {
    font-size:23px;
  }
  .document-main p,.document-main li {
    font-size:16px;
  }
  .document-note {
    padding:16px 19px;
  }
}
@media(max-width:360px) {
  .header-actions>.button {
    padding-inline:9px;
    gap:7px;
    font-size:12px;
  }
  .logo-window {
    width:104px;
  }
  .hero h1 {
    font-size:37px;
  }
  .card-topline .editorial-code {
    font-size:11px;
    letter-spacing:0;
  }
  .card-copy h3 {
    font-size:25px;
  }
  .ai-response {
    width:96%;
  }
  .ai-visual {
    padding:0;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   الشريطُ الثابتُ وقائمةُ الجوّالِ والتذييلُ — المنطقُ مأخوذٌ من مشروعٍ سابق لا شكلُها. الهُويّةُ البصريّةُ لخوارزمَ كما هي.

   ⚠️⚠️⚠️ الشريطُ ثابتٌ لا يمرّ: على صفحةٍ طويلةٍ كان الزائرُ ينزل فيفقد
      كلَّ طريقٍ للرجوعِ ولزرِّ التحميل. والثباتُ بالالتصاقِ لا بالتثبيتِ
      المطلقِ عمداً — الملتصقُ يبقى في تدفّقِ الصفحةِ فلا يقفز المحتوى
      تحته ولا يحتاج حشوةً تعويضيّةً في الجسم.
   ⚠️⚠️ ومعه تعويضُ التمريرِ إلزاميّاً: بلا حشوةِ تمريرٍ تساوي ارتفاعَ
      الشريطِ، كلُّ نقرةٍ على رابطٍ داخليٍّ تُخفي عنوانَ القسمِ تحتَ الشريط.
      والقيمةُ تتغيّر مع كلّ مقاسٍ لأنّ ارتفاعَ الشريطِ يتغيّر.
   ⚠️ ولا يُخفى الشريطُ عند النزولِ ولا يتقلّص: قِستُ ذلك في مشروعٍ سابق
      فوجدتُه قراراً مقصوداً — الحركةُ المفاجئةُ تُفقد الزائرَ موضعَه.
   ⛔ ولا أنماطَ سطريّةً في الصفحة: سياسةُ الأمانِ تمنع كلَّ نمطٍ مكتوبٍ
      داخلَ الوسم، فيُهمَل بصمتٍ. كلُّ شيءٍ هنا.
   ════════════════════════════════════════════════════════════════════════ */
html {
  scroll-padding-top:112px;
}
.site-header {
  position:sticky;
  top:0;
  backdrop-filter:blur(20px);
}

/* ⚠️ القسمُ الحاليُّ يُضاء: الزائرُ في صفحةٍ واحدةٍ طويلةٍ لا يعرف موضعَه
   من الشريط. والمقياسُ «أوّلُ قسمٍ عبَر ثلثَ الشاشةِ العلويّ» لا «الأكثرَ
   ظهوراً» — لأنّ قسماً طويلاً يبقى الأكثرَ ظهوراً وأنت قد جاوزتَه. */
.desktop-nav a {
  position:relative;
}
.desktop-nav a.is-active {
  color:white;
}
.desktop-nav a.is-active:after {
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-9px;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
}

/* ── قائمةُ الجوّال: لوحةٌ تغطّي الشاشةَ لا قائمةٌ منسدلة ──
   ⚠️⚠️ طبقتُها **تحتَ** الشريطِ عمداً: لو علَتْه غطّت زرَّ الإغلاقِ نفسَه
      فلا يبقى للزائرِ مخرجٌ إلّا زرُّ الرجوع.
   ⚠️ وتمريرُ الصفحةِ خلفَها يُقفَل: بلا ذلك يتحرّك المحتوى تحت أصبعِه
      وهو يظنّ أنّه يمرّر القائمة.
   ⛔ ولا خلفيّةَ معتمةٌ منفصلةٌ هنا: اللوحةُ نفسُها تغطّي الشاشةَ كاملةً،
      فطبقةٌ تحتها لا تُنقَر أبداً. أضفتُها أوّلاً ثمّ قِستُ أنّ النقرةَ تقع
      على اللوحةِ لا عليها فحذفتُها — عنصرٌ لا يُنقَر عنصرٌ ميّت.
   ⚠️ ومخارجُ الإغلاقِ أربعةٌ بلا خلفيّة: الزرُّ نفسُه، ومفتاحُ الهروب،
      ونقرةُ أيِّ رابطٍ فيها، وأيُّ نقرةٍ على شريطِ الرأسِ الظاهرِ فوقها.
   ⚠️ والإخفاءُ بالإظهارِ لا بالشفافيّةِ: الشفافُ يبقى في ترتيبِ التنقّلِ
      بالكيبورد فيقع التركيزُ على روابطَ لا تُرى. */
body.nav-open {
  overflow:hidden;
  /* ⚠️ التثبيتُ مع موضعٍ محفوظٍ في السكربت: بلا هذين السطرَينِ يبقى الجوّالُ
        يمرّر الصفحةَ خلفَ القائمةِ ثمّ يستقرّ في مكانٍ غيرِ الذي تركه. */
  position:fixed;
  inset-inline:0;
  width:100%;
}
.mobile-nav {
  position:fixed;
  top:0;right:0;bottom:0;left:0;inset:0;
  z-index:15;
  background:#070c13f7;
  backdrop-filter:blur(24px);
  border-bottom:0;
  padding:96px 30px 34px;
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(-100%);
  visibility:hidden;
  /* ⚠️⚠️⚠️ الإظهارُ يُبدَّل بلا تدريجٍ ومهلتُه عند الفتحِ صفرٌ وعند الإغلاقِ
     بطولِ الانزلاق. وضعتُ أوّلاً تدريجاً عليه فكان المتصفّحُ يعدّ اللوحةَ
     غيرَ مرئيّةٍ طولَ الثلثِ الأوّلِ من الثانية، فيسقط نقلُ التركيزِ إليها
     ولا يقع — قِستُه حيّاً: التركيزُ يبقى على الجسدِ. والإغلاقُ بمهلةٍ كي
     يُرى الانزلاقُ خارجاً قبل أن تختفي. */
  transition:transform .3s ease,visibility 0s linear .3s;
}
.mobile-nav.is-open {
  transform:translateX(0);
  visibility:visible;
  transition:transform .3s ease,visibility 0s;
}
.mobile-nav-inner {
  display:flex;
  flex-direction:column;
  max-width:520px;
  margin-inline:auto;
}
.mobile-nav a[data-nav] {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
  min-height:54px;
  font-size:19px;
  color:#e8eef8;
  border-bottom:1px solid #ffffff0f;
}
.mobile-nav a[data-nav].is-active {
  color:var(--cyan);
}
.mobile-nav-arrow {
  font-size:18px;
  color:#7f8ea3;
}
/* ⚠️ زرّا المتجرَينِ في أسفلِ اللوحةِ لا زرُّ «تحميلٍ» عامّ: من فتح القائمةَ
   على جوّالِه يريد المتجرَ في نقرةٍ واحدةٍ لا في نقرتين. */
.mobile-nav-stores {
  display:grid;
  gap:12px;
  margin-top:28px;
}
.store-button-sm {
  min-height:64px;
}

/* ── زرُّ العودةِ للأعلى: عائمٌ يظهر بعد التمرير ──
   ⚠️ ويُخفى ما دامت اللوحةُ مفتوحةً: زرٌّ عائمٌ فوق قائمةٍ مفتوحةٍ يُنقَر
      بالخطأ بدلَ رابطٍ تحته. */
.to-top {
  position:fixed;
  inset-inline-end:20px;
  bottom:22px;
  z-index:30;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid #27384f;
  background:#0d141fe6;
  backdrop-filter:blur(10px);
  color:#dce6f4;
  font-size:20px;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s,visibility .25s;
}
.to-top.is-visible {
  opacity:1;
  visibility:visible;
}
body.nav-open .to-top {
  opacity:0;
  visibility:hidden;
}

/* ── التذييلُ: أربعةُ أعمدةٍ تنهار إلى عمودٍ واحد ──
   ⚠️⚠️ عمودُ «الدعم» فيه صفحةُ الدعمِ وصفحةُ حذفِ الحسابِ: الصفحتان كانتا
      موجودتَينِ في الموقعِ بلا رابطٍ واحدٍ يقود إليهما، والمتجرانِ يشترطان
      الوصولَ إليهما بلا تسجيلِ دخول. صفحةٌ بلا رابطٍ كصفحةٍ غيرِ موجودة. */
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:38px;
}
.footer-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:17px;
}
.footer-brand .logo-window {
  width:141px;
}
.footer-brand p {
  color:#92a6c0;
  font-size:15px;
  max-width:320px;
}
.footer-col h2 {
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:#e3edfb;
  margin-bottom:15px;
}
/* ⚠️⚠️ ارتفاعُ مساحةِ النقرِ كان إحدى وعشرينَ نقطةً — والمعيارُ المتّفَقُ عليه
      في المتجرَينِ أربعٌ وأربعون. رابطٌ بهذا الضيقِ يُخطئه الإبهامُ فيفتح
      جارَه، وأخطرُها روابطُ القانونيِّ والدعمِ التي يشترط المتجرانِ الوصولَ
      إليها. فالحشوُ يُوسّع مساحةَ النقرِ والفجوةُ تُضيَّق بقدرِه، فالشكلُ
      كما هو والمساحةُ تضاعفت. */
.footer-col ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.footer-col a {
  color:#92a6c0;
  font-size:14px;
  display:inline-block;
  padding-block:8px;
  line-height:1.5;
}
.footer-col a:hover {
  color:#e3efff;
}
@media(max-width:900px) {
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:34px 24px;
  }
  /* ⚠️ على الجوّالِ يُوسَّع الحشوُ أكثر: الإبهامُ أعرضُ من مؤشّرِ الفأرة. */
  .footer-col ul {
    gap:0;
  }
  .footer-col a {
    padding-block:11px;
  }
}
@media(max-width:800px) {
  html {
    scroll-padding-top:98px;
  }
}
@media(max-width:560px) {
  html {
    scroll-padding-top:96px;
  }
  .mobile-nav {
    padding:92px 22px 30px;
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:30px;
  }
  .footer-brand {
    gap:14px;
  }
  .footer-brand p {
    font-size:14px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   الواجهةُ الأولى — زرّا المتجرَينِ مكانَ زرَّي البدءِ والعرض، والغلافُ صورةٌ
   ممتدّةٌ على كاملِ عرضِ الشاشةِ بلا فيديو.

   ⚠️⚠️ زرّا المتجرَينِ في الواجهةِ الأولى وفي قسمِ التحميلِ وفي لوحةِ الجوّالِ:
      وجهةٌ واحدةٌ تتكرّر ثلاثَ مرّاتٍ ولا تتغيّر. وهذا منطقُ مشروعٍ سابق
      حرفاً بحرف — لا زرَّ «ابدأ» ولا «شاهد العرض»: كلُّ طريقٍ يقود للمتجر.
   ⚠️ والغلافُ لم يعد زرّاً: أُزيل مثلّثُ التشغيلِ ومدّةُ المقطعِ معاً، فبقاءُ
      أحدِهما على صورةٍ لا تُنقَر وعدٌ كاذبٌ للزائر.
   ⚠️ وعلى الجوّالِ تُزاح الصورةُ إلى يمينِها بالقصّ: المشهدُ عريضٌ والرجلُ في
      طرفِه، فالقصُّ من الوسطِ يُخرجه من الكادرِ ويُبقي الشاشاتِ وحدَها.
   ════════════════════════════════════════════════════════════════════════ */
.hero-stores {
  margin-top:34px;
}
.cinema-wrap {
  width:100%;
}
.cinema {
  border-radius:0;
  border-inline:0;
  border-block:1px solid #668fba2e;
  cursor:default;
}
.cinema:hover .cinema-image {
  transform:none;
}
.cinema-top,.cinema-bottom {
  left:48px;
  right:48px;
}
@media(max-width:800px) {
  .cinema-top,.cinema-bottom {
    left:22px;
    right:22px;
  }
}
@media(max-width:560px) {
  .hero-stores {
    flex-direction:column;
    align-items:center;
    gap:11px;
    margin-top:26px;
  }
  .hero-stores .store-button {
    width:min(330px,100%);
    min-width:0;
    min-height:62px;
  }
  .cinema {
    height:430px;
  }
  .cinema-image {
    object-position:78% center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   قسمُ «عن خوارزم» — عزلُ الكتلةِ وضبطُ التنسيقِ وتفاعلٌ بصريٌّ عند الوصول.

   ⚠️⚠️ العنوانُ يثبت والنصُّ يمرّ: العمودُ الأيمنُ كان يقف وحدَه في فراغٍ
      طويلٍ لأنّ عمودَ النصِّ أطولُ منه بكثير. وتثبيتُه يملأ الفراغَ بحركةٍ
      لها معنًى بدلَ أن يملأه سكونٌ أبيض.
   ⚠️ والكتلةُ النصّيّةُ داخلَ لوحةٍ لها حدٌّ وخلفيّة: هذا هو «العزل» — تفصل
      النصَّ عن سوادِ الصفحةِ فيبدو شيئاً قائماً لا كلاماً معلّقاً.
   ⚠️⚠️⚠️ والكشفُ عند الوصولِ **مشروطٌ بعلامةِ الجافاسكربت**: بلا الشرطِ
      يصير الإخفاءُ دائماً لمن تعثّر عنده الملفُّ فلا يرى القسمَ أبداً.
      الافتراضُ ظهورٌ، والإخفاءُ لا يقع إلّا حين نملك ما يكشف.
   ════════════════════════════════════════════════════════════════════════ */
.about-grid {
  gap:74px;
  align-items:start;
}
.section-intro {
  position:sticky;
  top:130px;
}
.about-panel {
  position:relative;
  background:linear-gradient(180deg,#0a121c,#080d15);
  border:1px solid #18232f;
  border-radius:20px;
  padding:34px 38px 32px;
  transition:border-color .3s,box-shadow .3s;
}
.about-panel:before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:30px;
  bottom:30px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#2bbbf3,#2bbbf300);
}
.about-panel:hover {
  border-color:#22374d;
  box-shadow:0 18px 60px #0006;
}
.about-copy {
  padding-top:0;
}
.text-link>span {
  transition:transform .25s;
}
.text-link:hover {
  color:white;
  border-bottom-color:#54acff;
}
.text-link:hover>span {
  transform:translate(-5px,5px);
}

/* الكشفُ عند الوصول */
.js [data-reveal] {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.js [data-reveal].is-in {
  opacity:1;
  transform:none;
}

@media(max-width:900px) {
  .section-intro {
    position:static;
  }
}
@media(max-width:560px) {
  .about-grid {
    gap:30px;
  }
  .about-panel {
    padding:26px 22px 24px;
    border-radius:16px;
  }
  .about-panel:before {
    top:22px;
    bottom:22px;
  }
}

/* ⚠️ خطُّ روابطِ الشريطِ أكبر: أربعةَ عشرَ كانت صغيرةً على شاشةٍ عريضةٍ
   إلى جانبِ شعارٍ وزرٍّ كبيرَين. والزيادةُ محسوبةٌ لا مرسَلة — قِستُ عرضَ
   الشريطِ عند كلِّ مقاسٍ حتّى ٩٠٠ نقطةٍ فلم يتزاحم شيء. */
.desktop-nav a {
  font-size:16.5px;
}
@media(max-width:1100px) {
  .desktop-nav {
    gap:18px;
  }
  .desktop-nav a {
    font-size:15.5px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   شريطُ المتجرَينِ الأوسطُ وقسمُ الخطواتِ الثلاث.

   ⚠️ الحثُّ يتكرّر ووجهتُه لا تتغيّر: الواجهةُ الأولى، ثمّ هذا الشريطُ في
      المنتصف، ثمّ قسمُ التحميل، ومعها لوحةُ الجوّال. أربعةُ مواضعَ ووجهةٌ
      واحدة — وهذا منطقُ مشروعٍ سابق لا شكلُها.
   ⛔ ولا قسمَ آراءٍ هنا: لا يُكتب رأيُ متدرّبٍ لم يقُله. المراجعاتُ الملفّقةُ
      التي وجدتُها في مشروعٍ سابق مخالفةٌ صريحةٌ عقوبتُها إسقاطُ النتائج.
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — وشريطُ المتجرين كان له تدرّجٌ صلبٌ يملأ العرضَ فيحجب
      خلفيّةَ الصفحة، وهو يتكرّر في موضعين من الصفحةِ فيقطعها مرّتين.
   ✅ الحدّانِ وحدَهما، والخلفيّةُ تمرُّ من خلاله. ⛔ ولا يُعاد له لونٌ خاصّ. */
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — ونفسُ العلّةِ هنا: بلا صبغةٍ صار «كمّل معنا» وزرّا
   المتجرين سابحةً على حقلِ الصفحةِ بلا شريطٍ يجمعها. صبغةٌ شبهُ شفّافةٍ
   تُعيد له كيانَه وتُبقي خلفيّةَ الصفحةِ نافذةً من خلاله. */
.store-strip {
  border-block:1px solid #ffffff10;
  background:linear-gradient(180deg,#080d15,#060a11);
  padding-block:34px;
}
.store-strip-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  flex-wrap:wrap;
}
.store-strip-inner p {
  color:#9aa9bd;
  font-size:16px;
  margin-top:9px;
}
.store-strip-buttons {
  margin-top:0;
}
.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}
.step-card {
  position:relative;
  background:linear-gradient(180deg,#0a121c,#080d15);
  border:1px solid #18232f;
  border-radius:20px;
  padding:30px 30px 28px;
  transition:border-color .3s,transform .3s;
}
.step-card:hover {
  border-color:#22374d;
  transform:translateY(-4px);
}
.step-num {
  display:inline-block;
  font:700 13px/1 var(--font);
  letter-spacing:1.5px;
  color:#4cc8ff;
  border:1px solid #24455e;
  border-radius:30px;
  padding:7px 13px;
  margin-bottom:19px;
}
.step-card h3 {
  font-size:22px;
  font-weight:700;
  margin-bottom:11px;
}
.step-card p {
  color:#93a2b6;
  font-size:16px;
  line-height:1.9;
}
@media(max-width:900px) {
  .steps-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .store-strip-inner {
    gap:22px;
  }
}
@media(max-width:560px) {
  .store-strip {
    padding-block:26px;
  }
  .store-strip-inner {
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .store-strip-buttons {
    flex-direction:column;
    align-items:center;
    gap:11px;
  }
  .store-strip-buttons .store-button {
    width:min(330px,100%);
    min-width:0;
    min-height:62px;
  }
  .step-card {
    padding:24px 22px 22px;
    border-radius:16px;
  }
  .step-card h3 {
    font-size:20px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   جولةُ تصحيحٍ بصريّةٍ — ستّةُ مواضعَ أشار إليها المالكُ في لقطاتٍ حيّة.

   ⚠️⚠️⚠️ ١) الشعارُ كان يظهر داخلَ إطارٍ لامعٍ فجأةً: ذاك حلقةُ تركيزٍ رسمها
      المتصفّحُ لأنّ زرَّ العودةِ للأعلى كان ينقل التركيزَ إلى الشعار. أُزيل
      النقلُ من السكربت، وضُبط الإظهارُ هنا ليكون للكيبورد وحدَه.
   ⚠️⚠️ ٢) أزرارُ المتجرَينِ داخلَ لوحةِ الجوّالِ كانت منهارة: أيقونةٌ في زاويةٍ
      ونصٌّ باهتٌ في سطرٍ آخر. السببُ قاعدةٌ قديمةٌ تخصّ روابطَ اللوحةِ كلَّها
      وتغلب قاعدةَ الزرِّ بالوزن — فحُصرت في روابطِ التنقّلِ وحدَها.
   ⚠️ ٣) نصوصُ الأزرارِ في الوسط: كانت تُحاذى لليسارِ فتبدو مائلةً في صفحةٍ
      عربيّةٍ متمركزة.
   ⚠️ ٤) الشارةُ العلويّةُ لم تعد صندوقاً بنجمة: خطٌّ قصيرٌ ملوّنٌ ثمّ نصّ.
      ⛔ ولا تُعِدها كبسولةً محاطةً بإطار.
   ⚠️ ٥) عناوينُ الأقسامِ كُبّرت في كلّ المقاسات.
   ════════════════════════════════════════════════════════════════════════ */

/* ── عناوينُ الأقسامِ أكبر ── */
h2 {
  font-size:clamp(40px,5vw,66px);
  line-height:1.3;
}
h3 {
  font-size:23px;
}
.step-card h3 {
  font-size:24px;
}

/* ── نصوصُ الأزرارِ في الوسط ── */
.store-button {
  justify-content:center;
  text-align:center;
  gap:15px;
}
.store-button>span:not(.store-arrow) {
  align-items:center;
  text-align:center;
}
.store-button small {
  text-align:center;
  direction:rtl;
}

/* ── لوحةُ الجوّال: قاعدةُ الروابطِ لا تمسّ أزرارَ المتجر ── */
.mobile-nav a:not([data-nav]):not(.store-button) {
  display:block;
}
.mobile-nav .store-button {
  display:flex;
  color:#081326;
  font-size:16px;
  padding:9px 19px;
  align-items:center;
}
.mobile-nav .store-button strong {
  color:#081326;
}
.mobile-nav .store-button small {
  color:#33415a;
}

/* ── الشارةُ العلويّة: خطٌّ ونصّ، بلا إطارٍ ولا نجمة ── */
.hero-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#b9c8dc;
  font-size:15px;
  font-weight:700;
  letter-spacing:.3px;
  margin-bottom:26px;
  padding:0;
  border:0;
  background:none;
}
.eyebrow-rule {
  width:46px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#21ddcb,#487cff);
}
.eyebrow-x {
  color:#4cc8ff;
  font-family:var(--font);
}

/* ── حلقةُ التركيزِ للكيبوردِ وحدَه ── */
.brand:focus {
  outline:none;
}
.brand:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px;
  border-radius:6px;
}

@media(max-width:800px) {
  h2 {
    font-size:clamp(38px,7.4vw,54px);
  }
}
@media(max-width:560px) {
  h2 {
    /* ⚠️ القياسُ لا التقدير: القاعدةُ القديمةُ كانت تُخرج أربعةً وثلاثين على
       جوّالٍ عرضُه ثلاثُ مئةٍ وتسعون. هذه تُخرج أربعينَ على نفسِ الجهاز. */
    font-size:clamp(36px,10.3vw,46px);
    line-height:1.34;
    letter-spacing:-.6px;
  }
  .hero-eyebrow {
    font-size:13px;
    gap:10px;
    margin-bottom:22px;
  }
  .eyebrow-rule {
    width:32px;
  }
}

/* ⚠️ أزرارُ المتجرِ في لوحةِ الجوّال: كانت تأخذ عرضَ محتواها وتلتصق بالحافّة
   (قِستُ مئتين وستّين نقطةً داخل ثلاثِ مئةٍ وستٍّ وأربعين). صارت تملأ عرضَ
   اللوحةِ فتستقرّ في وسطِها كما بقيّةِ الصفحة. */
.mobile-nav-stores {
  justify-items:stretch;
}
.mobile-nav-stores .store-button {
  width:100%;
  min-width:0;
}

/* ════════════════════════════════════════════════════════════════════════
   نصوصُ الواجهةِ الأولى على الجوّال — كُبّرت كلُّها بطلبِ المالك ٢٠٢٦-٠٩-٢٤.

   ⚠️⚠️⚠️ **هذي الكتلةُ هي الفائزة.** في الملفِّ ثلاثُ كتلٍ لنفسِ مقاسِ الجوّالِ
      تمسّ نصوصَ الواجهة، وهذي آخرُها ترتيباً فتغلبهنّ جميعاً. ومن كبّر في
      الكتلةِ الأولى — وهي أوّلُ ما يصادفه الباحثُ — لم يتغيّر شيءٌ على الجهاز
      وظنّ أنّه أنجز. ⛔ فأيُّ تكبيرٍ لاحقٍ يُكتب هنا لا هناك.
   ⚠️ وسابقاً كُبّرت الشارةُ والوصفُ **وتُرك العنوان** — وهو أكبرُ ما في الشاشةِ
      وأوّلُ ما تقع عليه العين، فبقيت الواجهةُ تبدو صغيرةً رغم التكبير.
   ⚠️ وارتفاعُ سطرِ العنوانِ يبقى اثنتين وأربعين: الحرفُ العربيُّ ينزل ويصعد
      أكثرَ من اللاتينيّ، وتضييقُه يقصّ الذيولَ والشدّةَ — عطبٌ سبق إصلاحُه.
   ⚠️ والمقاسُ بنسبةِ عرضِ الشاشةِ بحدّين: حدٌّ أدنى يمنع الانكماشَ على
      الأجهزةِ الضيّقة، وأعلى يمنع الانفجارَ على العريضة.
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:560px) {
  .hero-eyebrow {
    font-size:17px;
    gap:11px;
    margin-bottom:24px;
  }
  /* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — هذي هي القاعدة التي تحكم عنوان الواجهة على الجوّال
        فعلاً، وتغلب قاعدتين أخريين له: واحدة عند خمس مئة وستّين وأخرى عند
        ثلاث مئة وستّين. الوزن واحد وهذي بعدهما في الملفّ فتفوز، فالأخريان
        ميّتتان. ⛔ فمن أراد تغيير حجم العنوان على الجوّال فليغيّر هنا، وتعديل
        الأخريين لا أثر له ويوهم أنّ العطل في مكان آخر.
     ⚠️⚠️ والمعامل خُفّض من اثني عشر وأربعة أعشار إلى أحد عشر بحساب لا بذوق:
        السطر الملوّن «وفكّر بخطوة أذكى» كان ينكسر سطرين على جوّال المالك.
        قِستُ فوجدت النصّ يحتاج سبعة وسبعة أعشار بكسل عرضاً لكلّ بكسل من حجم
        الخطّ، والسطر المتاح هو عرض الشاشة ناقص ثمانية وثلاثين — فأقصى معامل
        يدخله في سطر واحد عند ثلاث مئة وعشرين هو أحد عشر وأربعة أعشار،
        وأحد عشر يترك هامش أمان لاختلاف رسم الخطّ بين الأجهزة.
     ⚠️ والحدّ الأدنى نزل معه: لو بقي أربعة وأربعين لتجاوز المتاح على الشاشات
        الأضيق من ثلاث مئة وعشرين فعاد الكسر من حيث لا يُرى.
     ⛔ ولا يُرفع المعامل مرّة أخرى بحجّة تكبير العنوان: التكبير يعيد الكسر،
        وقد طُلب السطر الواحد صراحة. */
  .hero h1 {
    font-size:clamp(30px,11vw,62px);
    line-height:1.42;
    letter-spacing:-1.2px;
  }
  .hero-description {
    font-size:20px;
    line-height:1.88;
    margin-top:23px;
  }
  .hero-notes {
    font-size:14.5px;
    gap:6px 15px;
  }
}

/* ⚠️ العناوينُ الكبرى بثمانِ مئةٍ كما في التطبيق: المرمرةُ في سبعِ مئةٍ
      أخفُّ من بلكس في سبعِ مئةٍ، فلو بقيت كما هي ضعف حضورُ العنوان. */
h1,h2 { font-weight:800; }

/* ════════════════════════════════════════════════════════════════════════
   قسمُ المؤسّس — «من هو نواف محمد ؟»

   ⚠️ يرث لوحَ القسمِ الأوّلِ وتدرّجَه وحدَّه ونصفَ قطرِه كي لا يبدو غريباً
      عن الصفحة، ويضيف فوقَه صفَّ الصورةِ والهويّةِ وشارةَ المتابعين وأزرارَ
      الحسابات. ولا قاعدةَ لونٍ جديدةً خارجَ لوحةِ الموقعِ القائمة.

   ⚠️⚠️ والصورةُ **محلّيّةٌ** في وسائطِ الموقع لا مربوطةٌ بنطاقِ التطبيق:
      سياسةُ المحتوى هنا تسمح بالصورِ من نطاقِ الموقعِ وحدَه، فصورةٌ خارجيّةٌ
      تُحجَب بلا رسالةِ خطإٍ ولا سطرٍ في أيّ سجلّ — مربّعٌ فارغٌ فقط.
   ⛔ فمن بدّل الصورةَ في لوحةِ الإدارةِ فعليه نشرُ الموقعِ أيضاً: التطبيقُ
      يقرؤها حيّةً والموقعُ ينسخها.

   ⚠️ والأيقوناتُ الثلاثُ مرسومةٌ داخلَ الصفحةِ بمسارٍ واحدٍ لكلٍّ منها بلونِ
      النصِّ الجاري — كأيقونتَي المتجرين في هذي الصفحةِ حرفيّاً. ولا مكتبةَ
      أيقوناتٍ في الموقعِ ولا يجوز استيرادُ واحدة.
   ════════════════════════════════════════════════════════════════════════ */
.founder-head{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.founder-photo{width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid #1d2b3a;background:#0a121c}
.founder-id{min-width:0}
.founder-name{font-size:23px;font-weight:800;color:#f4f7fc;margin:0;line-height:1.5}
.founder-title{font-size:15px;color:#93a2b6;margin:4px 0 0;line-height:1.6}
/* الشارةُ عنصرٌ مستقلٌّ لا سطرٌ ملتصق: الرقمُ أهمُّ من أن يُدفن داخلَ جملة. */
.founder-stat{display:inline-flex;align-items:center;gap:8px;margin:11px 0 0;
  padding:6px 13px;border-radius:999px;background:#12202f;border:1px solid #1d3348;
  color:#47c5fb;font-size:14px;font-weight:800;line-height:1}
.founder-stat svg{width:15px;height:15px;flex:none}
/* ⚠️ النبذةُ صارت فقراتٍ لا سطرًا واحدًا بطلبِ المالك ٢٠٢٦-٠٩-٢٤. والحشوُ
   بين فقرةٍ وأختها لا على الفقرةِ نفسِها: حشوٌ عامٌّ يترك فراغًا ميّتًا فوق
   الأولى وتحت الأخيرة داخلَ اللوح. */
.founder-bio{font-size:16px;line-height:1.95;color:#c2ccd9;margin:0}
.founder-bio + .founder-bio{margin-top:15px}
.founder-sep{height:1px;background:#18232f;margin:24px 0 20px}
/* الأزرارُ تتقاسم الصفَّ بالتساوي ولا تلتفّ — نفسُ قاعدةِ البطاقةِ في التطبيق:
   سطرٌ فيه زرٌّ وحيدٌ تحت أخوَيه يبدو كسراً لا تصميماً. */
.founder-socials{display:flex;gap:11px}
.founder-social{flex:1;min-width:0;min-height:52px;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;border-radius:999px;background:#0e1823;
  border:1px solid #1d2b3a;color:#c5d2e2;font-size:14.5px;font-weight:700;
  text-decoration:none;transition:border-color .25s,color .25s,background .25s}
.founder-social svg{width:19px;height:19px;flex:none}
.founder-social:hover{border-color:#2f4a63;color:#f4f7fc;background:#12202f}
.founder-social:focus-visible{outline:2px solid #2478ff;outline-offset:3px}
@media(max-width:900px){
  .founder-head{gap:15px;margin-bottom:18px}
  .founder-photo{width:72px;height:72px}
  .founder-name{font-size:20px}
  .founder-title{font-size:14px}
  .founder-bio{font-size:15px;line-height:1.9}
  .founder-social{font-size:13.5px;gap:7px}
}
/* ⚠️ تحت أربعِ مئةٍ وخمسين يُخفى الاسمُ وتبقى الأيقونة: ثلاثةُ أسماءٍ في صفٍّ
      بهذا الضيقِ تتزاحم وتُقصّ. والاسمُ باقٍ في وصفِ الزرِّ لقارئِ الشاشة،
      فلا يخسر الكفيفُ شيئاً. */
@media(max-width:450px){
  .founder-social span{display:none}
  .founder-social{min-height:48px}
}

/* ════════════════════════════════════════════════════════════════════════
   قسمُ «محتوى معرفي» — جوّالاتٌ متجاورةٌ بنظامِ كروسيل.

   ⚠️⚠️ المقطعُ **لا يُحمَّل إلّا بضغطةٍ من الزائر**: خمسةُ مقاطعَ تُحمَّل
      تلقائيّاً تعني عشراتِ الميغابايتِ على بياناتِ جوّالٍ بلا أن يطلبها أحد.
      فالمعروضُ صورةٌ ثابتةٌ من المقطعِ نفسِه، والتحميلُ عند الطلب.
   ⚠️ والتمريرُ بالإصبعِ يعمل أصلاً بلا شيفرة: الشريطُ قابلٌ للتمريرِ أفقيّاً
      مع التقاطٍ عند كلّ جوّال. والزرّان إضافةٌ لمن يستعمل الفأرةَ والكيبورد.
   ⛔ ولا مرشّحَ تمويهٍ في أيِّ طبقةٍ هنا: مرشّحاتُ التمويهِ أثقلت موقعاً
      شقيقاً في متصفّحٍ بعينِه حتّى صار بطيئاً، وكانت هي السببَ الوحيد.
   ⚠️ وإطارُ الجوّالِ مأخوذٌ من حاويةِ الوسائطِ القائمةِ في الموقع — نفسُ
      الحدِّ ونفسُ الخلفيّةِ ونفسُ الظلّ — كي يخرج من الصفحةِ لا عليها.
   ════════════════════════════════════════════════════════════════════════ */
.reels-wrap{margin-top:54px}
.reels-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 2px 20px;scrollbar-width:none}
.reels-track::-webkit-scrollbar{display:none}
.reel{flex:0 0 auto;scroll-snap-align:center}
.reel-phone{position:relative;isolation:isolate;width:clamp(212px,21vw,268px);
  aspect-ratio:9/19.5;border-radius:34px;overflow:hidden;background:#0c1823;
  border:1px solid #668fba38;box-shadow:0 20px 100px #0006}
/* شقُّ السمّاعةِ أعلى الإطار: تفصيلٌ صغيرٌ يجعل الشكلَ يُقرأ «جوّالاً» فوراً. */
.reel-notch{position:absolute;top:11px;inset-inline-start:50%;transform:translateX(50%);
  width:74px;height:6px;border-radius:999px;background:#00000073;z-index:2}
.reel-video{display:block;width:100%;height:100%;object-fit:cover;background:#0c1823}
.reel-play{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  border:1px solid #ffffff2e;background:#0b111be6;color:#f4f7fc;display:grid;
  place-items:center;cursor:pointer;z-index:3;padding:0;
  transition:background .25s,transform .25s,opacity .25s}
.reel-play:hover{background:#12202f;transform:scale(1.06)}
.reel-play:focus-visible{outline:2px solid #2478ff;outline-offset:3px}
.reel-play svg{width:25px;height:25px}
.reel-ic-pause{display:none}
/* أثناءَ التشغيلِ ينسحب الزرُّ ليُرى المقطع، ويعود عند المرورِ أو التركيز. */
.reel-phone[data-playing] .reel-play{opacity:0}
.reel-phone[data-playing]:hover .reel-play,
.reel-phone[data-playing] .reel-play:focus-visible{opacity:1}
.reel-phone[data-playing] .reel-ic-play{display:none}
.reel-phone[data-playing] .reel-ic-pause{display:block}
.reels-controls{display:flex;gap:12px;justify-content:center;margin-top:8px}
.reels-nav{width:48px;height:48px;border-radius:50%;border:1px solid #1d2b3a;
  background:#0e1823;color:#c5d2e2;display:grid;place-items:center;cursor:pointer;
  padding:0;transition:border-color .25s,color .25s,background .25s}
.reels-nav:hover{border-color:#2f4a63;color:#f4f7fc;background:#12202f}
.reels-nav:focus-visible{outline:2px solid #2478ff;outline-offset:3px}
.reels-nav svg{width:22px;height:22px}
@media(max-width:700px){
  .reels-wrap{margin-top:40px}
  .reels-track{gap:16px}
  .reel-phone{width:clamp(192px,62vw,244px)}
}

/* ════════════════════════════════════════════════════════════════════════
   الفصلُ بين كتلِ الصفحة.

   ⚠️⚠️ ٢٠٢٦-٠٩-٢١ — لم يكن في الموقعِ عُرفُ فصلٍ بين الأقسامِ إطلاقاً: فراغٌ
      وحدَه. والفراغُ يكفي حين تكون الأقسامُ خفيفةً متباعدةَ الكثافة، فلمّا
      دخلت كتلتان كثيفتان متتاليتان صارت الصفحةُ كتلةً داكنةً واحدةً تسيل
      ولا يعرف الزائرُ أين انتهى قسمٌ وبدأ آخر.
   ✅ والخطُّ ليس اختراعاً: هو عُرفُ الموقعِ نفسِه — شريطُ المحاورِ وقسمُ
      العقليّةِ والتذييلُ كلُّها تفصل بخطٍّ شعريٍّ واحدٍ بلونِ الحدِّ الخافت.
   ⛔ والقاعدةُ على الحاوي لا على كلِّ قسمٍ بيده: كلُّ كتلةٍ تُضاف غداً تأخذ
      فصلَها تلقائيّاً. ومن كتبها يدويّاً على كلِّ قسمٍ نسيَ واحداً حتماً.
   ⚠️ وأوّلُ كتلةٍ بلا خطّ: الواجهةُ لا يسبقها شيءٌ لتُفصَل عنه.
   ⚠️ وشريطُ المحاورِ يحمل حدَّيه أصلاً، فما يليه لا يُزاد عليه خطٌّ ثانٍ.
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٢ — الخطُّ الشعريُّ وحدَه لم يكفِ: طلب المالكُ عزلاً «واضحاً
      متيناً». فأُضيف إليه **تدرّجٌ داكنٌ ينسحب** من أعلى كلِّ كتلة، وهو أسلوبُ
      الموقعِ نفسِه في قسمِ «العقليّة» — لا اختراعٌ من خارجِه.
   ⚠️ والتدرّجُ ينتهي عند ثلاثِ مئةٍ وأربعين نقطةً لا عند نهايةِ القسم: تدرّجٌ
      يمتدّ بطولِ القسمِ كلِّه يصبغ الصفحةَ ولا يفصل شيئاً. الفصلُ في الحافّة.
   ⚠️ والخطُّ أوضحُ قليلاً من لونِ الحدِّ العامّ: الحدُّ العامُّ مصمَّمٌ لحوافِّ
      البطاقاتِ داخلَ القسم، وفصلُ قسمٍ عن قسمٍ يحتاج أكثرَ منه بقليل.
   ⛔ ولا يُزاد أكثرُ من ذلك: خطٌّ صريحٌ أو تبديلُ خلفيّةٍ كاملٍ يكسر الطابعَ
      التحريريَّ للصفحةِ ويجعلها شرائحَ مرصوصة. */
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — الغشاوةُ كانت خلفيّةً على **القسمِ نفسِه**، وخلفيّةُ
      العنصرِ تُرسم فوقَ كلِّ طبقةٍ بعمقٍ سالبٍ بداخلِه. فطمست هالاتِ الأقسامِ
      كلَّها: تُحمَّل وتُرسم ولا تُرى، والصفحةُ تبقى سوداءَ مسطّحةً كما كانت.
      وكنتُ أقيس **وجودَ** القواعدِ في الملفِّ وأُعلن النجاح، والوجودُ ليس ظهورًا.
   ✅ الغشاوةُ الآن داخلَ الطبقةِ نفسِها فوقَ الهالة، والاثنتان خلفَ النصّ.
   ⚠️ والخطُّ الفاصلُ يبقى على القسم: هو حدٌّ لا خلفيّة، فلا يطمس شيئًا.
   ⛔ ولا تُعَد خلفيّةٌ إلى القسمِ نفسِه ما دامت له طبقةٌ بعمقٍ سالب. */
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٥ — لمّا حُذفت الهالاتُ حُذفت معها غشاواتُها، ولم يبقَ بين
      كتلةٍ وأخرى إلّا خطٌّ شعريٌّ واحد، فالتصقت الأقسامُ ببعضها وضاع الفصلُ
      بينها. والغشاوةُ هي التي كانت تفصل البصرَ لا الهالةُ — وأنا قصدتُ حذفَ
      الهالةِ وحدَها فحذفتُ الاثنتين معاً.
   ✅ العلاج: درزةٌ علويّةٌ **واحدةٌ لكلِّ الكتلِ بلا استثناء** — لا لونَ لقسمٍ
      دون قسم — قصيرةٌ وشبهُ شفّافة، فينفذ الوهجُ والنسيجُ من تحتها وتبقى
      خلفيّةُ الصفحةِ واحدةً كما هي.
   ⚠️⚠️ وهي خلفيّةٌ على الكتلةِ نفسِها لا طبقةٌ بعمقٍ سالب: الكتلُ الآن بلا
      موضعٍ نسبيّ، وطبقةٌ مطلقةٌ داخلَ كتلةٍ ساكنةٍ تهرب إلى الصفحةِ كلِّها.
   ⚠️⚠️⚠️ ووزنُ هذي القاعدةِ مئةٌ لأنّها مسنودةٌ لمعرّفِ الحاوي، وصبغةُ الشريطِ
      بصنفٍ وزنُها عشرة. فلو كانت الاثنتان **صورةَ خلفيّة** لسحقت هذي تلك —
      وهي نفسُ المصيدةِ التي أعمت الهالاتِ من قبل. فالدرزةُ صورةٌ والصبغةُ
      لونٌ: خاصّيّتان مختلفتان تتراكبان ولا تتصادمان.
   ⛔ ولا تُلوَّن كتلةٌ بلونٍ يخصُّها: الدرزةُ فاصلٌ موحّدٌ لا خلفيّةُ قسم. */
#main > * + *{border-top:1px solid #ffffff1f}
#main > .topics-strip + *{border-top:0}
/* ⚠️ ويُستثنى اللوحُ الذي يملأ عرضَه بصورة: درزةٌ داكنةٌ فوق أعلى صورةٍ
   كبيرةٍ تُقرأ عطباً في الصورةِ لا فاصلاً بين كتلتين. */
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — حُذفت غشاوةٌ كانت هنا. كانت مسنودةً إلى معرّفِ الحاوي
      فوزنُها مئةٌ وواحد، وقواعدُ الهالاتِ مسنودةٌ إلى أصنافٍ فوزنُها أحدَ عشر.
      فكانت تسحق خلفيّةَ الهالاتِ في الأقسامِ التسعةِ كلِّها مهما جاءت بعدَها
      في الملفّ — والترتيبُ لا يُنقذ شيئاً أمامَ فارقِ الوزن.
      ثبت بحذفِها في متصفّحٍ حيٍّ فعادت الهالاتُ فوراً.
   ✅ ولا تُفقَد الغشاوةُ بحذفِها: هي مدموجةٌ داخلَ كلِّ هالةٍ كطبقةٍ ثانية.
   ⛔ ولا يُسنَد تنسيقُ كتلةٍ إلى معرّفِ الحاوي ما دامت لها قاعدةٌ بصنفِها. */
/* ⚠️ الأقسامُ ذاتُ الهالةِ تدمج الغشاوةَ فوقَ هالتِها في تصريحٍ واحد: تصريحان
   متتاليان على نفسِ الخاصّيّةِ يُلغي آخرُهما أوّلَه. */
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — الطبقةُ كانت تُلوَّن هنا وتُخلَق بعد مئةِ سطر: بلا
      تصريحِ المحتوى لا يُخلَق العنصرُ أصلاً، فكلُّ ما يُرسم فيه يذهب إلى
      عنصرٍ غيرِ موجود. والقواعدُ تظهر في الملفِّ سليمةً فأظنُّها نجحت، والعينُ
      لا ترى شيئاً. ⛔ الخلقُ قبل التلوين دائماً، ولا يُفصَل بينهما. */
/* ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — حُذفت من هنا منظومةُ «هالةٌ لكلِّ قسم» كاملةً: طبقةٌ
      بعمقٍ سالبٍ لعشرةِ أقسامٍ، ولكلِّ مجموعةٍ لونُها — أزرقُ وسماويٌّ وبنفسجيّ.
      كانت تعمل وتُقاس وتُرى، ومع ذلك كانت **خطأً**: المطلوبُ خلفيّةٌ واحدةٌ
      موحّدةٌ من أعلى الصفحةِ إلى آخرها، وما بنيتُه بقعٌ متفرّقةٌ بألوانٍ مختلفةٍ
      تبدأ وتنتهي عند حدودِ كلِّ كتلة — أي عكسُ الوحدةِ المطلوبة.
   ✅ البديلُ طبقةٌ واحدةٌ على الجسمِ نفسِه في أعلى الملفّ: وهجٌ مثبّتٌ وشبكةٌ
      واحدةٌ، لونٌ واحدٌ للصفحةِ كلِّها.
   ⚠️ وسُحب معها العزلُ والموضعُ النسبيُّ عن الأقسامِ العشرة: لا شيءَ بداخلِها
      يعتمد عليهما — لوحُ الصورةِ وهيكلُ المقطعِ لكلٍّ منهما عزلُه وموضعُه
      الخاصُّ الأقربُ — فجُرد ذلك قبل السحبِ ولم يُفترَض.
   ⛔ ولا تُعَد طبقةٌ لقسمٍ بعينِه بأيِّ لون: هذا هو الشيءُ المرفوضُ نفسُه. */

/* ════════════════════════════════════════════════════════════════════════
   قسمُ «تجارب ونتائج متدرّبينا» — فسيفساءُ صورٍ بمقاساتٍ مختلطة.

   ⚠️⚠️ الفسيفساءُ بأعمدةٍ لا بشبكة: صورُ المحادثاتِ تأتي بنسبٍ مختلفةٍ جدّاً —
      طوليّةٌ من لقطةِ شاشةٍ كاملة، وعرضيّةٌ من قصاصة، ومربّعة. والشبكةُ ذاتُ
      الخلايا المتساويةِ إمّا تقصُّها أو تترك فجواتٍ بيضاءَ تحتها. والأعمدةُ
      تتركها بنسبِها الحقيقيّةِ وتتراصّ تحت بعضِها بلا فراغ.
   ⛔ ولا تُقَصّ صورةُ متدرّبٍ بالقوّةِ لتوحيدِ الشكل: قصُّ لقطةِ محادثةٍ يحذف
      نصّاً هو أصلُ الفائدةِ من عرضِها.
   ⚠️ ومنعُ الكسرِ داخلَ الصورةِ ضروريّ: بدونه يقطع المتصفّحُ الصورةَ بين
      عمودين فتظهر نصفين.
   ⚠️ والصورُ تُضاف من محادثاتٍ حقيقيّة، فكلُّ صورةٍ تحتاج نصّاً بديلاً يصف
      ما فيها — فاحصُ الموقعِ يرفض صورةً بلا نصٍّ بديلٍ ويوقف النشر.
   ════════════════════════════════════════════════════════════════════════ */
.results-wrap{margin-top:52px}
.results-mosaic{columns:3;column-gap:14px}
.results-mosaic img{display:block;width:100%;height:auto;margin-bottom:14px;
  border-radius:14px;border:1px solid #1d2b3a;background:#0c1823;
  break-inside:avoid;-webkit-column-break-inside:avoid}
.results-mosaic:empty{display:none}
.results-empty{text-align:center;color:#8193a9;font-size:15px;padding:28px 0;margin:0}
.results-mosaic:not(:empty) + .results-empty{display:none}
@media(max-width:900px){
  .results-wrap{margin-top:40px}
  .results-mosaic{columns:2;column-gap:12px}
  .results-mosaic img{margin-bottom:12px}
}
/* ⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — كان عموداً واحداً تحت خمسِ مئةٍ وستّين، فصارت كلُّ لقطةٍ
      بعرضِ الشاشةِ كاملاً. وثماني لقطاتٍ طوليّةٍ بعرضٍ كاملٍ تعني ثماني شاشاتٍ
      متتاليةً من التمرير — يمرّ الزائرُ على قسمٍ واحدٍ وكأنّه الموقعُ كلُّه.
   ✅ عمودان: يقصُر القسمُ إلى النصفِ وتبقى اللقطةُ مقروءةً كشاهدٍ بصريّ.
   ⛔ ولا يُعاد العمودُ الواحدُ بحجّةِ «وضوحِ اللقطة»: اللقطةُ هنا دليلٌ يُرى
      لا نصٌّ يُقرأ حرفاً حرفاً. */
@media(max-width:560px){
  .results-mosaic{columns:2;column-gap:10px}
  .results-mosaic img{margin-bottom:10px;border-radius:11px}
}

/* ════════════════════════════════════════════════════════════════════════
   أسهمُ القائمةِ والروابط — أيقوناتٌ متّجهةٌ لا حروفٌ نصّيّة.

   ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — كان السهمُ **حرفًا نصّيًّا**، وآيفون يرسم هذا الحرفَ
      بهيئةِ إيموجي مربّعٍ ملوّن — رآه المالكُ في قائمتِه الجانبيّةِ وهو يخالف
      قاعدةً ملزمة: أيقوناتٌ فقط ولا إيموجي في أيّ واجهة.
   ⚠️ والحرفُ كان يُحجَّم بحجمِ الخطّ، والأيقونةُ لا تُحجَّم به — فبلا مقاسٍ
      صريحٍ تخرج ضخمةً تكسر الصفَّ أو تختفي تمامًا.
   ✅ وترثُ لونَ النصِّ الجاري، فتبقى رماديّةً في القائمةِ وزرقاءَ في الرابطِ
      بلا تكرارِ لونٍ في موضعين.
   ⛔ ولا يُعاد حرفٌ نصّيٌّ مكانَ أيقونةٍ مهما كان أقصرَ في الكتابة: ما يُرسَم
      إيموجي على جهازٍ واحدٍ يكفي لكسرِ القاعدة. */
.mobile-nav-arrow svg{width:18px;height:18px;display:block}
.text-link>span svg{width:22px;height:22px;display:block}

/* ════════════════════════════════════════════════════════════════════════
   خلفيّةُ الصفحة — موضعُها واحدٌ فقط: قاعدةُ الجسمِ في أعلى هذا الملفّ.

   ⚠️⚠️⚠️ ٢٠٢٦-٠٩-٢٤ — كان هنا قسمٌ كاملٌ اسمُه «أجواءُ الأقسام»: هالةٌ لكلِّ
      كتلةٍ بلونِها، وقناعٌ لكلِّ واحدةٍ، وكتلةُ شاشةٍ ضيّقةٍ تُعيدها كلَّها
      بألوانٍ أخرى. بُني على مرحلتين وقِيس وعُدِّل أربعَ مرّاتٍ حتّى ظهر فعلاً
      على الشاشة — ثمّ رُفض كلُّه، لأنّ الطلبَ من أوّلِه كان خلفيّةً **واحدةً
      موحّدةً** للصفحةِ من أعلاها إلى آخرها، لا خلفيّةً لكلِّ قسم.
      فالعملُ الذي يعمل ويُقاس ويُثبَت قد يكون مع ذلك جواباً على سؤالٍ آخر.
   ⛔ فلا يُضاف إلى هذا الملفِّ تصريحُ خلفيّةٍ لقسمٍ بعينِه — ولا طبقةٌ بعمقٍ
      سالبٍ لكتلةٍ واحدة، ولا هالةٌ «تُميّز» قسماً عن أخيه. الصفحةُ لها خلفيّةٌ
      واحدة، ومكانُها قاعدةُ الجسمِ وحدَها.
   ⚠️ والخطوطُ الشعريّةُ الفاصلةُ بين الكتلِ باقيةٌ أعلى الملفّ: هي حدودٌ لا
      خلفيّات، فلا تكسر وحدةَ الخلفيّةِ ولا تطمسها.
   ⛔ وبلا أيّ مُرشّحِ تمويهٍ إطلاقاً: التمويهُ أثقل موقعاً شقيقاً حتّى زحف في
      متصفّحٍ بعينِه، وعلاجُه كان تحويلَه إلى تدرّجٍ شعاعيّ — وهو المستعملُ هنا.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   قسمُ المنصّاتِ المرشّحة — بطاقتان متجاورتان.

   ⚠️ الشعاران **محلّيّان** في أصولِ الموقع: سياسةُ المحتوى تمنع الصورَ من أيّ
      نطاقٍ خارجيٍّ وتحجبها بلا رسالةِ خطإٍ — فربطُهما من موقعِ المنصّتين كان
      سيُظهر مربّعين فارغين.
   ⚠️ والبطاقتان بارتفاعٍ واحدٍ مهما اختلف طولُ النصّ: الشبكةُ تمطّهما معًا
      والزرُّ يُدفع إلى الأسفل، فلا تبدو واحدةٌ ناقصةً بجانبِ أختها.
   ⚠️ وسطرُ التنبيهِ أسفلَ القسمِ ليس زينة: المنصّتان جهتان مستقلّتان، وذكرُ
      ذلك صراحةً يحمي الموقعَ ويحفظ ثقةَ القارئ.
   ⛔ ولا يُكتب عن أيّ منصّةٍ بصيغةِ «منصّتنا» أو «نحن»: هي ترشيحٌ لطرفٍ
      مستقلّ، وأيُّ صيغةٍ تملّكٍ تقلب معنى القسمِ كلَّه.
   ════════════════════════════════════════════════════════════════════════ */
.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px;align-items:stretch}
.plat-card{
  display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(180deg,#0a121c,#080d15);
  border:1px solid #18232f;border-radius:20px;padding:30px 30px 26px;
  transition:border-color .3s;
}
.plat-card:hover{border-color:#2f4a63}
.plat-head{display:flex;align-items:center;gap:15px}
.plat-logo{width:60px;height:60px;flex:none;border-radius:15px;display:block}
.plat-name{font-size:22px;font-weight:800;color:#f4f7fc;margin:0;line-height:1.5}
.plat-kicker{font-size:14.5px;color:#93a2b6;margin:3px 0 0;line-height:1.6}
.plat-copy{font-size:16px;line-height:1.95;color:#c2ccd9;margin:0}
.plat-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
/* النقطةُ مرسومةٌ بالتنسيقِ لا برمزٍ نصّيّ: الرموزُ النصّيّةُ تُرسَم إيموجي
   ملوّنًا على بعضِ الأجهزةِ — وقعت هذي في القائمةِ الجانبيّةِ وأُصلحت. */
.plat-list li{position:relative;padding-inline-start:20px;font-size:15px;line-height:1.8;color:#a9b6c7}
.plat-list li:before{
  content:"";position:absolute;inset-inline-start:0;top:11px;
  width:7px;height:7px;border-radius:50%;background:#2bbbf3;
}
.plat-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:999px;
  background:#12202f;border:1px solid #2f4a63;color:#dbe6f6;
  font-size:15.5px;font-weight:700;text-decoration:none;
  transition:background .25s,border-color .25s,color .25s;
}
.plat-cta svg{width:19px;height:19px;flex:none}
.plat-cta:hover{background:#17304a;border-color:#4a7ba8;color:#fff}
.plat-cta:focus-visible{outline:2px solid #2478ff;outline-offset:3px}
.plat-note{margin-top:22px}
.plat-note p{margin:0;font-size:13.5px;line-height:1.85;color:#7f8ea3;text-align:center}
@media(max-width:900px){
  .plat-grid{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .plat-card{padding:26px 24px 22px}
  .plat-name{font-size:20px}
  .plat-copy{font-size:15px}
}

/* ⚠️ ٢٠٢٦-١٠-٠٦ — متصفّحاتُ الجوّالِ القديمة (سفاري قبل الخامسةَ عشرة) لا تعرف «نسبةَ الأبعاد»: كان الشعارُ
   يختفي بارتفاعِ صفر، وإطاراتُ المقاطعِ تنطوي. ارتفاعٌ صريحٌ لها وحدَها. */
@supports not (aspect-ratio:1/1){
  .logo-window{height:61px}
  .reel-phone{height:calc(clamp(212px,21vw,268px) * 19.5 / 9)}
}

/* ٢٠٢٦-١٠-٠٦ — تحذيرُ المخاطرِ تحت أزرارِ التحميلِ في صفحةِ الإعلان. */
.hero-risk{max-width:560px;margin:18px auto 0;color:#b8c4d4;font-size:13px;line-height:1.8;font-weight:700;text-align:center}