/**
 * الصفحةُ الرئيسيّة — هويّةُ محمد جمال البصريّة.
 *
 * ══════════════════════════════════════════════════════════════════════
 * لماذا رموزٌ خاصّةٌ بها (`--mg-*`) بدل رموز المنصّة (`--rw-*`)
 * ══════════════════════════════════════════════════════════════════════
 * الرئيسيّةُ **صفحةُ علامة**، والبوّاباتُ **أداةُ عمل**. للأولى برتقاليٌّ حارٌّ
 * وأسودُ سينمائيّ، وللثانية زرقةٌ هادئةٌ تُطالَع ساعاتٍ دون إجهاد. فلو حقنتُ
 * ألوانَ الرئيسيّة في `--rw-*` لصار جدولُ الحصص برتقاليًّا.
 *
 * ولا يعني هذا نظامَين: الرموزُ هنا **تشتقُّ** من رموز المنصّة حيثما كان
 * المعنى واحدًا، ويبقى الاختلافُ في نبرة العلامة وحدَها.
 *
 * ══════════════════════════════════════════════════════════════════════
 * الوضعان — نفسُ قاعدة `tokens.css` حرفيًّا
 * ══════════════════════════════════════════════════════════════════════
 * داكنٌ أوّلًا على `:root` العاري، والنهاريُّ إعادةُ تعريفٍ في كتلتين:
 * `@media (prefers-color-scheme: light)` مقيَّدةً بـ`:not([data-theme="dark"])`
 * ثمّ `[data-theme="light"]`. ولا لونَ يُعرَّف لأوّلِ مرّةٍ في كتلة وضع.
 */


/* ============================================================
   ٢) الأساس — مقيَّدٌ بالصفحة الرئيسيّة وحدَها
   ============================================================ */
body.mg-home {
  background:var(--mg-bg);
  color:var(--mg-ink);
  font-family:var(--mg-body);
  line-height:1.7;
  overflow-x:hidden;
  transition:background .45s,color .45s;
}
body.mg-home .mg-disp { font-family:var(--mg-disp); }
body.mg-home ::selection { background:var(--mg-acc); color:var(--mg-on-acc); }

.mg-wrap { max-width:1280px; margin-inline:auto; padding-inline:28px; }
@media (max-width:700px) { .mg-wrap { padding-inline:18px; } }

/**
 * الحشوةُ لكلِّ قسمٍ **إلّا الواجهة**.
 *
 * الواجهةُ تقيس نفسَها بالشاشة (`100svh` ناقصَ الترويسة)، فحشوةٌ رأسيّةٌ
 * فوقها تزيدها ٢٦٠px — أي أنّ الشريطَ الجاريَ ينزل تحت الطيّة دائمًا.
 *
 * وكان في `.mg-hero` سطرُ `padding:0` يقصد هذا، لكنّه **لا يعمل**:
 * `.mg-home section` أرجحُ منه وزنًا (صنفٌ ونوعٌ في مقابل صنف). قِيس:
 * `padding-top` و`padding-bottom` = ١٣٠px رغم السطر. فالاستثناءُ هنا لا
 * هناك — يقول القاعدةَ نفسَها: الواجهةُ ليست قسمًا يُحشى.
 */
.mg-home section:not(.mg-hero) { padding:128px 0; }
.mg-home section { position:relative; }
@media (max-width:860px) { .mg-home section:not(.mg-hero) { padding:80px 0; } }

/**
 * المراسي تحت هيدرٍ مثبَّت.
 *
 * `scroll-margin-top` وحدَها تمنع أن يختفي عنوانُ القسم خلف الشريط العلويّ
 * عند القفز إليه — وهو أوّلُ ما يُلاحَظ في شريطِ تنقّلٍ بمراسٍ داخليّة.
 */
.mg-home :target,
.mg-home section[id],
.mg-home [id="courses"] { scroll-margin-top:96px; }
@media (prefers-reduced-motion:no-preference) { .mg-home { scroll-behavior:smooth; } }

/* ---- الحركةُ تُطفأ لمن طلب ذلك ---- */
@media (prefers-reduced-motion:reduce) {
  body.mg-home *,
  body.mg-home *::before,
  body.mg-home *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   ٣) طبقاتُ الزينة — الحبيبات · المؤشّر · شريطُ التقدّم
   ============================================================ */
.mg-grain {
  position:fixed; inset:-50%; width:200%; height:200%;
  z-index:900; pointer-events:none; opacity:var(--mg-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:mg-grain 8s steps(10) infinite;
}
@keyframes mg-grain {
  0%,100%{transform:translate(0,0)}   10%{transform:translate(-5%,-6%)}
  30%{transform:translate(4%,-4%)}    50%{transform:translate(-3%,5%)}
  70%{transform:translate(6%,3%)}     90%{transform:translate(-4%,2%)}
}

.mg-cursor-dot, .mg-cursor-ring {
  position:fixed; top:0; left:0; z-index:999;
  pointer-events:none; border-radius:50%;
}
.mg-cursor-dot  { width:8px; height:8px; background:var(--mg-acc); }
.mg-cursor-ring {
  width:38px; height:38px; border:1.5px solid rgba(255,77,28,.5);
  transition:width .25s,height .25s,border-color .25s,background .25s;
}
.mg-cursor-ring.grow {
  width:70px; height:70px;
  border-color:rgba(255,77,28,.9); background:rgba(255,77,28,.08);
}
@media (hover:none), (pointer:coarse) { .mg-cursor-dot,.mg-cursor-ring { display:none; } }

.mg-progress { position:fixed; inset-inline:0; top:0; height:3px; z-index:500; }
.mg-progress .bar { height:100%; width:0; background:var(--mg-grad); }

/* ---- شاشةُ التحميل ---- */
/**
 * الرقمُ في القلب لا في الركن.
 *
 * كان `flex` بـ`space-between` و`align-items:flex-end`: الاسمُ في ركنٍ
 * والرقمُ في الركن المقابل، كلاهما ملتصقٌ بالقاع. وأوّلُ ما يراه الزائرُ
 * من الموقع كلِّه هو هذه الشاشة، فالرقمُ فيها ليس تفصيلًا.
 *
 * والخليّةُ واحدةٌ (`grid-area:1/1`) والعنصران فيها: الرقمُ متمركزٌ
 * بـ`place-items`، والاسمُ في قاعها. فالتمركزُ **حقيقيٌّ** — لا يزيحه
 * ارتفاعُ الاسم كما يفعل صفٌّ ثانٍ في الشبكة.
 */
.mg-loader {
  position:fixed; inset:0; z-index:1000; background:var(--mg-bg);
  display:grid; place-items:center;
  padding:40px 48px; transition:transform .9s cubic-bezier(.76,0,.24,1);
}
.mg-loader.done { transform:translateY(-101%); }
.mg-loader .cnt {
  grid-area:1 / 1;
  font-family:var(--mg-mono); font-size:clamp(120px,24vw,320px);
  font-weight:700; line-height:.85; color:var(--mg-ink);
  /**
   * `tabular-nums` مع عرضٍ أدنى ٣ خانات: العدُّ يمرّ من خانةٍ إلى ثلاث
   * (٠ ← ١٠٠)، ولولاهما لاهتزّ الرقمُ يمينًا ويسارًا طولَ العدّ — وهو
   * اهتزازٌ يُرى ولا يُفسَّر.
   */
  font-variant-numeric:tabular-nums;
  min-width:3ch; text-align:center;
}
.mg-loader .word {
  grid-area:1 / 1; align-self:end;
  font-size:13px; letter-spacing:.3em; color:var(--mg-muted);
  text-transform:uppercase; text-align:center;
}
@media (max-width:700px) { .mg-loader { padding:24px; } }

/* ============================================================
   ٤) الأزرار
   ============================================================ */
.mg-btn {
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:600; padding:17px 32px;
  border-radius:999px; overflow:hidden; transition:color .3s,transform .25s;
  text-decoration:none;
}
.mg-btn .bg { position:absolute; inset:0; border-radius:999px; transition:transform .45s cubic-bezier(.76,0,.24,1); }
.mg-btn > span:not(.bg) { position:relative; z-index:1; }
.mg-btn--fill { color:var(--mg-on-acc); font-weight:700; }
.mg-btn--fill .bg { background:var(--mg-grad); }
.mg-btn--fill:hover .bg { transform:scale(1.06); }
.mg-btn--line { border:1px solid var(--mg-line); color:var(--mg-ink); }
.mg-btn--line .bg { background:var(--mg-ink); transform:translateY(101%); }
.mg-btn--line:hover { color:var(--mg-bg); border-color:var(--mg-ink); }
.mg-btn--line:hover .bg { transform:translateY(0); }

/* ============================================================
   ٥) الواجهة (Hero)
   ============================================================ */
/**
 * الواجهةُ عمودان — نصٌّ ونصف.
 *
 * كانت الصورةُ `position:absolute` بعرض `min(37vw,500px)` والنصُّ فوقها
 * بـ`max-width:62%`. فكانا يتراكبان لا يتجاوران: النصُّ يمرّ على الصورة،
 * وعرضاهما معًا ٩٩٪ لا ١٠٠٪ — أي أنّ التقسيمَ كان بصريًّا لا حقيقيًّا.
 *
 * الآن شبكةٌ صريحة: صفٌّ للمحتوى وصفٌّ للشريط الجاري، والصفُّ الأوّلُ
 * عمودان متساويان. والشريطُ يمتدّ عليهما (`1 / -1`) فيبقى مِلءَ العرض.
 *
 * والعمودُ الأوّلُ في `inline-start` — يمينًا في العربيّة ويسارًا في
 * الإنجليزيّة، **بالمنطق نفسِه لا بقاعدةٍ ثانية**. فالانعكاسُ مجّانيّ.
 *
 * ولأنّ الشريطَ صفٌّ مستقلّ، يأخذ عمودُ الصورة ما بقي من الارتفاع وحدَه —
 * فلا نطرح ارتفاعَ الشريطِ برقمٍ مكتوبٍ يشيخ حين يتغيّر حجمُ خطِّه.
 */
.mg-hero {
  /* الترويسةُ في السياق فوقَها، فـ`100svh` تدفع الشريطَ الجاريَ تحت الطيّة
     بمقدار ارتفاعِها. لا رمزَ لها في الثيم، فيُعرَّف هنا بقيمةٍ مقيسة. */
  --mg-header-h:66px;
  position:relative; min-height:calc(100svh - var(--mg-header-h));
  display:grid;
  /**
   * العمودان ليسا نصفَين متساويَين على الشاشات العريضة.
   *
   * الصورةُ نسبتُها ٠٫٧٩٦ ومحكومةٌ بالارتفاع، فعرضُها = ارتفاعُ العمود ×
   * ٠٫٧٩٦ مهما اتّسع العمود. وفي ١٩٢٠ يبلغ العمودُ ٩٦٠ والصورةُ ٧٢٧ —
   * فيبقى ٢٣٣ بكسلًا فراغًا **داخل** عمود الصورة، والنصُّ في العمود
   * الآخر مضغوطٌ في الوقت نفسِه. قِيس: امتلاءُ ٧٥٫٧٪.
   *
   * فالعمودُ يُقاس بما تحتاجه الصورةُ فعلًا (`--mg-photo-ar`)، والباقي
   * يذهب إلى النصّ حيث يُنتفَع به. ولا يقلّ عن ٣٦٪ فلا تنكمش الصورةُ
   * إلى شريطٍ في شاشةٍ منخفضة.
   */
  /**
   * هامشٌ يمين الصورة — توازنُ مساحاتٍ لا زينة.
   *
   * كانت الصورةُ ملتصقةً بحافّة الشاشة بينما النصُّ في الجهة الأخرى له
   * هامشٌ واسع، فمالت الكتلةُ كلُّها. والهامشُ نسبيٌّ لا ثابت: يضيق مع
   * الشاشة فلا يأكل من الصورة في اللوحيّ.
   */
  --mg-hero-gutter:clamp(0px,3.2vw,64px);
  --mg-photo-ar:.796;
  grid-template-columns:minmax(36%, calc((100svh - var(--mg-header-h)) * var(--mg-photo-ar))) 1fr;  grid-template-rows:minmax(0,1fr) auto;
  align-items:end;
  overflow:hidden;
  /* ⚠ **بعد** `padding` المختصرة لا قبلها: المختصرةُ تكتب الجهاتِ الأربعَ
     فتمحو أيَّ هامشٍ منطقيٍّ سبقها. قِيس: الصورةُ لاصقةٌ بالحافّة و`gapRight`
     صفرٌ رغم وجود القاعدة. */
  padding:0;
  padding-inline-start:var(--mg-hero-gutter);
}
.mg-hero-mark {
  position:absolute; z-index:1; top:5%; inset-inline-end:-2%;
  font-family:var(--mg-disp); font-weight:900;
  font-size:clamp(120px,23vw,360px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--mg-stroke-faint);
  pointer-events:none; user-select:none;
}
.mg-hero-glow  { position:absolute; inset:0; pointer-events:none; background:var(--mg-glow); }
.mg-hero-grid  {
  position:absolute; inset:0; pointer-events:none; opacity:.028;
  background-image:linear-gradient(var(--mg-ink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mg-ink) 1px,transparent 1px);
  background-size:90px 90px;
}
/**
 * الصورةُ تملأ نصفَها — والانزياحُ والدخولُ على عنصرين لا عنصرٍ واحد.
 *
 * كان كلاهما على `.mg-hero-photo`: الدخولُ بـ`transform` في الورقة، ثمّ
 * الانزياحُ يكتب `style.transform` من جافاسكربت. وقاعدةُ الدخول حملت
 * `!important` — **و`!important` في الورقة يغلب الـinline العاديّ**. فكان
 * سطرُ الانزياح ينفَّذ مع كلِّ تمريرةٍ ولا أثرَ له: شغلٌ ميّتٌ لا يُرى غيابُه.
 *
 * ففُصلا: الغلافُ يحمل الانزياحَ برمزٍ (`--mg-par`) بلا انتقال، والصورةُ
 * تحمل الدخولَ بانتقاله. فلا يتنازعان، ولا يحتاج أحدُهما `!important`.
 * ولو بقيا معًا لكان تحديثُ الانزياح يشغّل انتقالَ الدخول ١٫١ ثانيةٍ في
 * كلِّ إطارِ تمرير — انزياحٌ يتلكّأ خلف الإصبع.
 */
/**
 * الصورةُ **لا تحدّد ارتفاعَ الصفّ** — ولهذا هي مطلقةُ الموضع.
 *
 * كانت في السياق بـ`height:100%` و`max-height:100%`، والصفُّ `minmax(0,1fr)`.
 * والنسبةُ المئويّةُ في صفٍّ يقيسه محتواه دائرةٌ: يقيس المتصفّحُ الصفَّ
 * بالصورة (٩٠٥px طبيعيّة)، ثمّ يحسب `100%` منه — فتساوي ٩٠٥ ولا تقيّد شيئًا.
 * قِيس: الواجهةُ ١٢٦٥px في شاشةِ ٩٠٠، أي أنّ الأزرارَ كلَّها تحت الطيّة.
 *
 * فأُخرجت من السياق: الصفُّ يقيسه النصُّ وحدَه، والصورةُ تملأ ما قِيس.
 */
.mg-hero-photo {
  position:relative; z-index:3; grid-area:1 / 1;
  align-self:stretch; min-height:0;
  filter:var(--mg-photo);
  transform:translateY(var(--mg-par,0px));
}
.mg-hero-photo::after {
  content:""; position:absolute; inset-inline:0; bottom:0; height:34%;
  z-index:1; pointer-events:none;
  background:linear-gradient(to top,var(--mg-bg),transparent);
}
.mg-hero-photo img {
  position:absolute; bottom:0; inset-inline:0; margin-inline:auto;
  display:block; width:auto; max-width:100%; height:100%;
  object-fit:contain; object-position:bottom;
  opacity:0; transform:translateX(-70px);
  transition:opacity 1.1s ease .45s,transform 1.1s cubic-bezier(.22,1,.36,1) .45s;
}
html[dir="ltr"] .mg-hero-photo img { transform:translateX(70px); }
body.mg-loaded .mg-hero-photo img { opacity:1; transform:translateX(0); }

/* المدارُ على خطِّ التقسيم بين العمودين — لا في وسط أحدهما */
.mg-hero-orbit {
  position:absolute; z-index:4; inset-inline-start:calc(50% - 75px); bottom:9%;
  width:150px; height:150px; animation:mg-rot 18s linear infinite;
}
@keyframes mg-rot { to { transform:rotate(360deg); } }
.mg-hero-orbit text { font-family:var(--mg-mono); font-size:9.2px; letter-spacing:.32em; fill:var(--mg-ink); opacity:.85; }
.mg-hero-orbit circle.core { fill:var(--mg-acc); }

/**
 * حشوةٌ **سفليّةٌ وحدَها** — لا اختصارُ `padding`.
 *
 * كان `padding:0 0 6vh`، والاختصارُ يعيد ضبطَ كلِّ الجهات — فيمحو
 * `padding-inline:18px` الذي ورثه العنصرُ من `.mg-wrap`. والنتيجةُ لا
 * تُرى على شاشةٍ عريضة (`max-width:62%` يبعده عن الحافة)، وتظهر على
 * الهاتف: الاسمُ يلامس حرفَي الشاشة تمامًا — قِيس عرضُه ٣٩٠ في منفذٍ ٣٩٠.
 */
/**
 * النصُّ في النصف الآخر.
 *
 * `.mg-wrap` عليه `max-width:1280px; margin-inline:auto` — وهو صحيحٌ لقسمٍ
 * يملأ العرض، خاطئٌ لعمودٍ في شبكة: التوسيطُ داخل نصفٍ يترك النصَّ معلَّقًا
 * بعيدًا عن حافّته. فيُلغى التوسيطُ هنا وتُبنى الحشوةُ بيدها.
 *
 * والحافّةُ الخارجيّةُ تُحاذي الوِرابَ نفسَه (`(100vw - 1280px) / 2`) فيبقى
 * الاسمُ على استقامةٍ واحدةٍ مع عناوين الأقسام تحته — ولا تنكسر العينُ
 * بين واجهةٍ تبدأ من حافّةٍ وقسمٍ يبدأ من أخرى.
 */
.mg-hero-content {
  position:relative; grid-area:1 / 2; align-self:end;
  padding-block-end:6vh;
  max-width:none; margin-inline:0;
  padding-inline-start:clamp(24px,3.4vw,56px);
  padding-inline-end:max(28px,calc((100vw - 1280px) / 2));
}
.mg-hero-eyebrow {
  position:relative; z-index:6; display:flex; align-items:center; gap:16px;
  font-size:15.5px; font-weight:600; letter-spacing:.13em;
  color:var(--mg-ink); text-transform:uppercase; margin-bottom:4vh;
}
.mg-hero-eyebrow::before { content:""; width:52px; height:1px; background:var(--mg-acc); flex:none; }

.mg-hero-name { position:relative; z-index:5; font-weight:900; line-height:1.18; letter-spacing:-.01em; margin:0; }
/**
 * الاسمُ يقيس **العرضَ والارتفاعَ معًا** — لا العرضَ وحدَه.
 *
 * `10.2vw` على شاشةِ ١٤٤٠ يعطي ١٤٧px، وسطران منه ٣٩٤px. وهذا يسع شاشةً
 * طولُها ١٠٨٠ ولا يسع لابتوبًا طولُه ٩٠٠ — فتهبط الأزرارُ تحت الطيّة على
 * أشيع مقاسِ لابتوب. والعرضُ لا يعلم شيئًا عن الطول.
 *
 * فـ`min()` تأخذ الأصغرَ من قياسَي المحورين: يبقى الاسمُ ضخمًا على الشاشات
 * الطويلة، وينضبط وحدَه على القصيرة، بلا استعلامِ وسائطٍ لكلِّ مقاس.
 */
/* المقاسُ يتبع ما يسعه العمود: كلمتان بينهما فجوةٌ في عمودٍ عرضُه نصفُ
   الشاشة. وكان يفيض فيلتفّ، فبقي سطرين رغم `flex`. قِيس عند ١٤٤٠:
   ٣٨٩+٣٩٤+فجوة = ٨٢٥ في عمودٍ عرضُه ٧٧٦. */
/**
 * المقاسُ يتبع **عرضَ العمود** لا عرضَ الشاشة.
 *
 * `vw` تقيس النافذةَ، والاسمُ يعيش في عمودٍ أضيقَ منها بكثير وله هامشُه.
 * فكلُّ رقمٍ أختاره بـ`vw` صحيحٌ في مقاسٍ خاطئٌ في غيره — جرّبتُ اثنين
 * فالتفَّ الاسمُ في الحالتين. قِيس: العمودُ ٦٠١px والكلمتان ٦٦٧.
 *
 * و`cqw` تقيس الحاويةَ نفسَها، فالقاعدةُ تصير جوابًا لا تخمينًا:
 * الكلمتان معًا ≈ ٦٫٤ أضعافِ حجمِ الخطّ في العربيّة، و≈ ٩ في
 * الإنجليزيّة (MOHAMMAD أطول). فالسقفُ ١٥cqw و١٠٫٥cqw.
 *
 * ويبقى `clamp` سقفًا أعلى: في شاشةٍ عريضةٍ جدًّا لا نريده يكبر بلا حدّ.
 */
.mg-hero-content { container-type:inline-size; }
html[lang="ar"] .mg-hero-name { font-size:min(clamp(48px,min(9.6vw,12.8svh),148px), 15cqw); }
/* والإنجليزيّةُ أضيق: MOHAMMAD وحدَها ٥٫٤ أضعافِ الخطّ، والاثنتان ٩. */
html[lang="en"] .mg-hero-name { font-size:min(clamp(32px,min(5.6vw,8.4svh),94px), 8.4cqw); line-height:1.1; }
/**
 * الاسمُ سطرٌ واحدٌ لا سطران.
 *
 * كان `display:block` فنزلت «جمال» تحت «محمد»، وبقي يسارَ الاسم فراغٌ
 * بعرضِ كلمةٍ كاملة. والسطرُ الواحدُ يملؤه، ويقرأ الزائرُ الاسمَ كما
 * يُنطَق لا كما يُقسَّم.
 *
 * و`overflow:hidden` باقٍ: هو ما يخفي السطرَ تحت حافّته قبل الظهور،
 * وحذفُه يُلغي الحركةَ لا يُصلحها.
 */
.mg-hero-name { display:flex; flex-wrap:wrap; align-items:baseline;
                column-gap:.28em; row-gap:0; }
.mg-hero-name .ln { display:block; overflow:hidden; white-space:nowrap; }
.mg-hero-name .ln span { display:inline-block; padding-block:.08em; transform:translateY(115%) rotate(4deg); transform-origin:0 100%; transition:transform 1.1s cubic-bezier(.76,0,.24,1); }
body.mg-loaded .mg-hero-name .ln span { transform:translateY(0) rotate(0); }
.mg-hero-name .ln:nth-child(2) span {
  transition-delay:.12s; padding-inline-start:.3em;
  background:var(--mg-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.mg-hero-sub { position:relative; z-index:6; display:flex; flex-direction:column; align-items:flex-start; gap:40px; margin-top:5vh; max-width:640px; }
.mg-hero-tag { max-width:470px; font-size:var(--mg-t-md); color:var(--mg-muted); min-height:3.4em; margin:0; }
.mg-hero-tag b { color:var(--mg-ink); font-weight:600; }
.mg-caret { display:inline-block; width:2px; height:1.05em; background:var(--mg-acc); vertical-align:-2px; margin-inline-start:2px; animation:mg-caret .8s steps(1) infinite; }
.mg-caret.done { display:none; }
@keyframes mg-caret { 50% { opacity:0; } }
/* ثلاثةُ أزرارٍ في نصفِ شاشةٍ — الفجوةُ ٢٨ ثابتةً كانت تكسر الصفَّ مبكّرًا */
.mg-hero-ctas { display:flex; gap:clamp(12px,1.5vw,24px); flex-wrap:wrap; }
.mg-hero-ctas .mg-btn { padding:16px clamp(20px,2.2vw,32px); }

/**
 * على الضيّق يعود التراكبُ — ولا يُكدَّس.
 *
 * التكديسُ (صورةٌ فوق نصّ) يدفع الاسمَ تحت طيّة الشاشة: أوّلُ ما يُرى صورةٌ
 * بلا اسمٍ ولا زرّ. فيعود العنصران إلى خليّةٍ واحدة، والصورةُ خلفَ النصّ
 * بشفافيّةٍ — وهو ما كان يفعله التخطيطُ القديم على الهاتف وأحسنَ فيه.
 */
@media (max-width:900px) {
  .mg-hero { grid-template-columns:1fr; }
  .mg-hero-photo,
  .mg-hero-content { grid-area:1 / 1; }

  /* الصورةُ تُزاح نحو الحافّة فلا يقع الوجهُ خلفَ الاسم مباشرةً */
  .mg-hero-photo { opacity:.4; z-index:1; }
  .mg-hero-photo img {
    max-width:min(82vw,430px);
    inset-inline-start:-12%; inset-inline-end:auto; margin-inline:0;
  }
  .mg-hero-content {
    z-index:2;
    padding-inline:28px;
  }
  .mg-hero-orbit { display:none; }
  .mg-hero-mark { font-size:36vw; top:3%; }
  html[lang="ar"] .mg-hero-name { font-size:clamp(52px,16vw,110px); }
  html[lang="en"] .mg-hero-name { font-size:clamp(34px,10.5vw,72px); }
  .mg-hero-sub { max-width:100%; gap:24px; }
}

/* ============================================================
   ٦) الشريطُ الجاري (Marquee)
   ============================================================ */
/* يمتدّ على العمودين — الشريطُ مِلءُ العرض لا نصفَه */
.mg-marq { grid-area:2 / 1 / 3 / -1; border-block:1px solid var(--mg-line); padding:22px 0; overflow:hidden; background:var(--mg-bg); position:relative; z-index:5; }
.mg-marq-track { display:flex; width:max-content; animation:mg-marq 30s linear infinite; }
.mg-marq .set { display:flex; align-items:center; }
.mg-marq .it {
  font-family:var(--mg-disp); font-weight:800;
  font-size:clamp(20px,2.6vw,32px); white-space:nowrap;
  display:flex; align-items:center; gap:32px; padding-inline-end:32px;
}
.mg-marq .it .star { color:var(--mg-acc); font-size:.8em; }
.mg-marq .it.ghost { -webkit-text-stroke:1.2px var(--mg-stroke-soft); color:transparent; }
@keyframes mg-marq { to { transform:translateX(-50%); } }
html[dir="ltr"] .mg-marq-track { animation-name:mg-marq-ltr; }
@keyframes mg-marq-ltr { to { transform:translateX(-50%); } }
.mg-marq:hover .mg-marq-track { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { .mg-marq-track { animation:none; } }

/* ============================================================
   ٧) هيكلُ الأقسام والظهورُ عند التمرير
   ============================================================ */
.mg-sec-head { display:flex; align-items:baseline; gap:24px; margin-bottom:64px; position:relative; overflow:hidden; }
.mg-sec-num { font-family:var(--mg-mono); font-size:14px; color:var(--mg-acc); letter-spacing:.2em; flex:none;
  /* الهاشُ والرقمُ وحدةٌ لاتينيّةٌ واحدة — تُعزَل عن اتّجاه السطر العربيّ. */
  direction:ltr; unicode-bidi:isolate; }
.mg-sec-num .h { opacity:.55; margin-inline-end:.06em; }
.mg-sec-title { font-family:var(--mg-disp); font-size:var(--mg-t-sec); font-weight:900; line-height:1.15; margin:0; }
.mg-sec-title .thin { -webkit-text-stroke:2px var(--mg-stroke-ink); color:transparent; font-weight:800; }

.mg-sec-head::after {
  content:""; position:absolute; inset:0; background:var(--mg-grad);
  transform:translateX(101%); opacity:.9; pointer-events:none;
}
.mg-sec-head.on::after { animation:mg-sweep .9s cubic-bezier(.7,0,.2,1) .05s both; }
@keyframes mg-sweep { from { transform:translateX(101%); } to { transform:translateX(-101%); } }
html[dir="ltr"] .mg-sec-head::after { transform:translateX(-101%); }
html[dir="ltr"] .mg-sec-head.on::after { animation-name:mg-sweep-ltr; }
@keyframes mg-sweep-ltr { from { transform:translateX(-101%); } to { transform:translateX(101%); } }
@media (prefers-reduced-motion:reduce) { .mg-sec-head::after { display:none; } }

.mg-rv {
  opacity:0; transform:translateY(46px);
  transition:opacity .95s ease,transform .95s cubic-bezier(.16,1,.3,1);
}
.mg-rv.on { opacity:1; transform:none; }

/**
 * الكشفُ بالقصّ — **على الابن، لا على المُراقَب**.
 *
 * كان `clip-path:inset(0 0 100%)` على العنصر نفسِه، فصارت مساحتُه المرئيّةُ
 * صفرًا، ولا يبلغ `IntersectionObserver` عتبتَه أبدًا — فيبقى مخفيًّا إلى
 * الأبد، وتؤجَّل صورتُه الكسولةُ فلا تُحمَّل. عطلٌ يخفي نفسَه.
 *
 * فالقصُّ الآن على الابن، والمُراقَبُ أبٌ سليمُ المساحة.
 */
/**
 * ⚠ الحوافُّ **سالبة** — و`inset(0)` هي ما كان يقطع الإطار.
 *
 * `clip-path:inset(0)` تقصّ عند حدِّ الصندوق بالضبط. وغلافُ البودكاست
 * مائلٌ ٣ درجات داخل `.mg-pod-stack`، فتبرز زاويتاه **خارج** صندوقِ
 * أبيه — فتُقصّان. قِيس: البطاقةُ من ٩٩ إلى ٦٨٦، والأبُ من ١٠٨ إلى
 * ٦٧٧ — تسعةُ بكسلاتٍ من كلِّ جهةٍ تختفي، وهي زاويتا الإطار.
 *
 * وهو ما شكاه محمد: «الزاوية المقطوشة شمال فوق ويمين تحت».
 *
 * والحلُّ توسيعُ نافذة القصِّ لا إلغاؤها: الكشفُ من أعلى يبقى (القاعُ
 * ١٠٠٪ ثمّ يفتح)، والحوافُّ الثلاثُ تفسح لأيِّ ميلٍ أو ظلّ.
 */
.mg-clip { clip-path:inset(-2.5em -2.5em 100% -2.5em); transform:scale(1.06);
           transition:clip-path 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1); }
.mg-rv.on .mg-clip { clip-path:inset(-2.5em); transform:scale(1); }

/* ============================================================
   ٨) الفلسفة (Manifesto)
   ============================================================ */
.mg-mani-txt { font-family:var(--mg-disp); font-weight:800; font-size:clamp(26px,4.2vw,54px); line-height:1.5; max-width:1050px; margin:0; }
.mg-mani-txt .w { opacity:.34; transition:opacity .5s; }
.mg-mani-txt .w.lit { opacity:1; }
.mg-mani-txt .hl { background:var(--mg-grad); -webkit-background-clip:text; background-clip:text; }
.mg-mani-txt .hl.lit { color:transparent; }
.mg-mani-note {
  margin-top:40px; max-width:520px; color:var(--mg-muted); font-size:var(--mg-t-base);
  border-inline-start:2px solid var(--mg-acc); padding-inline-start:22px;
}

/* ============================================================
   ٩) الإحصائيّات
   ============================================================ */
.mg-stats { display:grid; grid-template-columns:repeat(5,1fr); border-block:1px solid var(--mg-line); }
/* الرقمُ في وسط خليّته: خمسةُ أرقامٍ محاذاةٌ للبداية تبدو منحرفةً عن
   خطوطِ الفصل بينها، والتوسيطُ يجعل كلَّ رقمٍ في مركزِ حقله. */
.mg-stat { padding:56px 28px; border-inline-end:1px solid var(--mg-line);
           position:relative; overflow:hidden; text-align:center; }
.mg-stat:last-child { border-inline-end:none; }
.mg-stat-fill { position:absolute; inset:0; background:var(--mg-fill-soft); transform:translateY(101%); transition:transform .45s cubic-bezier(.76,0,.24,1); }
.mg-stat:hover .mg-stat-fill { transform:translateY(0); }
.mg-stat .n { font-family:var(--mg-mono); font-size:clamp(36px,4vw,58px); font-weight:700; line-height:1; position:relative; }
.mg-stat .n .plus { color:var(--mg-acc); }
.mg-stat .l { margin-top:12px; color:var(--mg-muted); font-size:var(--mg-t-sm); position:relative; }
.mg-stat.mg-rv.on .n { animation:mg-pop .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes mg-pop { 0% { transform:scale(.55); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .mg-stat.mg-rv.on .n { animation:none; } }
@media (max-width:860px) {
  .mg-stats { grid-template-columns:1fr 1fr; }
  .mg-stat { border-bottom:1px solid var(--mg-line); padding:32px 20px; }
  .mg-stat:last-child { grid-column:1/-1; border-inline-end:none; }
}

/* ============================================================
   ١٠) من هو محمد
   ============================================================ */
/**
 * الصورةُ في وسط عمودها لا في أعلاه.
 *
 * العمودان غيرُ متساويين: الصورةُ ٥٦٢px والنصُّ مع الجدولين ٩٥١ —
 * فارقُ ٣٨٩ كان يتجمّع **كلُّه تحت الصورة**، فبدت معلّقةً وتحتها حفرة.
 * والتوسيطُ يوزّعه على الطرفين (١٩٤ و١٩٤) فيُقرَأ فسحةً مقصودةً لا نقصًا.
 */
.mg-about-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:64px; align-items:center; }
.mg-ox-card {
  position:relative; border-radius:24px; padding:4px; background:var(--mg-grad);
  transform:rotate(-2deg); box-shadow:0 34px 80px -24px rgba(255,77,28,.45); max-width:380px;
}
.mg-ox-card img { width:100%; border-radius:21px; display:block; }
/**
 * التوسيطُ بخاصّيّةٍ ماديّة (`left`) لا منطقيّة (`inset-inline-start`).
 *
 * `inset-inline-start:50%` في RTL تعني `right:50%`، ومعها `translateX(-50%)`
 * تدفع الشارةَ إلى اليسار بدل أن توسّطها. والتوسيطُ ليس اتّجاهيًّا: نصفُ
 * العرضِ نصفُه في الاتّجاهين.
 */
.mg-ox-lbl {
  position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--mg-mono); font-size:11px; letter-spacing:.2em;
  background:var(--mg-bg); border:1px solid var(--mg-line); color:var(--mg-ink);
  padding:8px 18px; border-radius:999px;
}
.mg-bio-lead { font-family:var(--mg-disp); font-weight:800; font-size:clamp(20px,2.3vw,28px); line-height:1.55; margin:0; }
.mg-bio-lead .g { background:var(--mg-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mg-bio-body { color:var(--mg-muted); font-size:var(--mg-t-base); margin-top:18px; max-width:640px; }
.mg-chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.mg-chip { font-size:13px; border:1px solid var(--mg-line); border-radius:999px; padding:8px 16px; color:var(--mg-muted); }
.mg-chip b { color:var(--mg-acc); font-family:var(--mg-mono); font-weight:700; }

.mg-tl-cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px; }
.mg-tl-h { font-family:var(--mg-disp); font-weight:800; font-size:18px; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.mg-tl-h::after { content:""; flex:1; height:1px; background:var(--mg-line); }
.mg-tl-item { position:relative; padding-inline-start:22px; padding-bottom:20px; border-inline-start:1px solid var(--mg-line); }
.mg-tl-item:last-child { padding-bottom:0; }
.mg-tl-item::before { content:""; position:absolute; inset-inline-start:-4.5px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--mg-acc); }
.mg-tl-y { font-family:var(--mg-mono); font-size:11.5px; letter-spacing:.1em; color:var(--mg-acc); }
.mg-tl-t { font-weight:600; font-size:15px; margin-top:3px; }
.mg-tl-d { font-size:13px; color:var(--mg-muted); margin-top:3px; }
@media (max-width:900px) {
  .mg-about-grid { grid-template-columns:1fr; gap:40px; }
  .mg-ox-card { margin-inline:auto; max-width:300px; transform:rotate(0); }
  .mg-tl-cols { grid-template-columns:1fr; }
  .mg-bio-lead { font-size:19px; }
}

/* ============================================================
   ١١) الخدمات — صفوفٌ تحريريّة
   ============================================================ */
.mg-svc-row {
  display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:24px;
  padding:40px 10px; border-bottom:1px solid var(--mg-line);
  position:relative; overflow:hidden; cursor:pointer;
  transition:padding .35s;
  background:none; border-inline:0; border-top:0; width:100%; text-align:inherit; color:inherit; font:inherit;
}
.mg-svc-row:first-of-type { border-top:1px solid var(--mg-line); }
.mg-svc-row::before {
  content:""; position:absolute; inset:0; background:var(--mg-panel);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s cubic-bezier(.76,0,.24,1); z-index:0;
}
.mg-svc-row:hover::before, .mg-svc-row[aria-expanded="true"]::before { transform:scaleY(1); }
.mg-svc-row:hover { padding-inline-start:24px; }
.mg-svc-row > * { position:relative; z-index:1; }
.mg-svc-idx { font-family:var(--mg-mono); font-size:13px; color:var(--mg-muted); letter-spacing:.14em; }
.mg-svc-row:hover .mg-svc-idx { color:var(--mg-acc); }
.mg-svc-count {
  /* ١٠ب صغيرٌ لعدَّادٍ يُقرَأ لا يُزيَّن — ولا يُقاس بمسافة الذراع وحدَها */
  display:inline-block; margin-inline-start:8px; font-size:12px; color:var(--mg-ink);
  background:rgba(255,77,28,.25); border:1px solid rgba(255,77,28,.4);
  border-radius:999px; padding:2px 8px; vertical-align:2px;
}
.mg-svc-name { font-family:var(--mg-disp); font-weight:800; font-size:clamp(20px,3vw,34px); }
.mg-svc-tags {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s,opacity .5s;
}
.mg-svc-row:hover .mg-svc-tags,
.mg-svc-row[aria-expanded="true"] .mg-svc-tags { max-height:320px; opacity:1; }
.mg-svc-tag {
  /* رابطٌ يُنقَر ويُقرَأ، لا لاصقةُ زينة — فلا ينزل عن ١٢ب */
  font-family:var(--mg-mono); font-size:12px; letter-spacing:.05em;
  border:1px solid var(--mg-line); padding:5px 12px; border-radius:999px;
  color:var(--mg-muted); text-decoration:none; transition:border-color .2s,color .2s;
}
a.mg-svc-tag:hover { border-color:var(--mg-acc); color:var(--mg-acc); }
.mg-svc-arrow {
  width:46px; height:46px; border:1px solid var(--mg-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s,transform .3s,border-color .3s;
}
.mg-svc-row:hover .mg-svc-arrow { background:var(--mg-acc); border-color:var(--mg-acc); transform:rotate(-45deg); }
.mg-svc-arrow svg { width:16px; height:16px; stroke:var(--mg-ink); fill:none; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.mg-svc-row:hover .mg-svc-arrow svg { stroke:var(--mg-bg); }
@media (max-width:860px) {
  .mg-svc-row { grid-template-columns:44px 1fr auto; gap:12px; padding:24px 6px; }
  .mg-svc-name { font-size:19px; }
  .mg-svc-arrow { width:38px; height:38px; }

  /**
   * الوسمُ هدفُ لمسٍ لا زينة.
   *
   * بحشوة ٤px يصير ارتفاعُه ٢٢ بكسلًا — دون الحدِّ الأدنى (٢٤) في
   * WCAG 2.5.8. وهي ثلاثةٌ وخمسون وسمًا: الطريقُ **الوحيد** إلى صفحات
   * الخدمات من الهاتف. فمَن أخطأ الهدفَ لم يُبطئ، بل لم يصل.
   */
  .mg-svc-tag { padding:9px 14px; font-size:11.5px; }
  .mg-svc-tags { gap:10px; }
}

/* ============================================================
   ١٢) البودكاست
   ============================================================ */
.mg-podcast { overflow:hidden; background:var(--mg-bg-2); }
/**
 * العمودان يتقاربان — الغلافُ كان محبوسًا في ٤٠٪ من العرض.
 *
 * طلبَ محمد تكبيرَه، وسقفُه الحقيقيُّ ليس رقمًا في الورقة بل عمودُه:
 * `.8fr` من ١٢٨٠ = ٥١٢px، فلا يبلغ `max-width:500` أثرًا يُذكَر.
 */
/**
 * العمودُ النصّيُّ يبدأ من أعلى، والغلافُ وحدَه يتوسّط.
 *
 * كان `align-items:center` على الشبكة كلِّها. والغلافُ ٥٨٨px والنصُّ
 * ٣٧٠، فالتوسيطُ يدفع «الناظر» **١١٠px** إلى أسفل. ومعها هامشُ عنوان
 * القسم (٧٠) صار بين «#٠٤ بودكاست» و«الناظر» ١٨٠px من الفراغ — وهو ما
 * رآه محمد.
 *
 * فالنصُّ يلتصق بعنوانه، والغلافُ يبقى متوسّطًا في وجهه.
 */
.mg-pod-grid { display:grid; grid-template-columns:1fr .95fr; gap:56px; align-items:start; }
.mg-pod-visual { align-self:center; }
.mg-pod-big {
  font-family:var(--mg-disp); font-weight:900; font-size:clamp(52px,9vw,128px); line-height:1.05;
  background:var(--mg-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mg-pod-quote { font-family:var(--mg-disp); font-weight:800; font-size:clamp(20px,2.4vw,30px); margin-top:22px; line-height:1.5; }
.mg-pod-desc { color:var(--mg-muted); margin-top:18px; max-width:520px; font-size:var(--mg-t-base); }
.mg-pod-plat { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.mg-pod-chip {
  font-family:var(--mg-mono); font-size:12.5px; letter-spacing:.06em;
  border:1px solid var(--mg-line); padding:9px 18px; border-radius:999px;
  color:var(--mg-muted); text-decoration:none; transition:all .25s;
}
.mg-pod-chip:hover { border-color:var(--mg-acc); color:var(--mg-acc); }
.mg-pod-contact { margin-top:20px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.mg-pod-contact .k { font-size:var(--mg-t-sm); color:var(--mg-muted); }
.mg-pod-contact a { font-family:var(--mg-mono); font-size:14px; color:var(--mg-acc); text-decoration:none; }

/**
 * الحاوي يقيسه محتواه، والحلقاتُ تبقى دوائرَ.
 *
 * كان `aspect-ratio:1` على الحاوي والرزمةُ `position:absolute; inset:0`
 * داخله — أي أنّ الغلافَ والموجاتِ محبوسان في مربّعٍ ضلعُه عرضُ العمود.
 * فتكبيرُ الغلاف كان يدفع الموجاتِ خارجَ المربّع، و`.mg-clip` يقصّها
 * (`clip-path:inset(0)` يقصّ عند حدِّ الصندوق). قِيس الفيضُ: ٤٤px.
 *
 * الآن الرزمةُ في السياق فيطول الحاوي بها، والحلقاتُ وحدَها تحمل
 * `aspect-ratio:1` معلَّقةً من الأعلى — فتبقى دوائرَ مهما طال ما تحتها.
 */
.mg-pod-visual { position:relative; max-width:620px; margin-inline:auto; width:100%; }
.mg-pod-ring {
  position:absolute; inset-inline:0; top:0; aspect-ratio:1;
  border:1px solid var(--mg-line); border-radius:50%; pointer-events:none;
}
.mg-pod-ring.r2 { inset-inline:12%; top:12%; border-color:rgba(255,77,28,.3); }
.mg-pod-ring.r3 { inset-inline:24%; top:24%; border-color:rgba(124,58,237,.3); }
.mg-pod-stack { position:relative; display:flex; flex-direction:column; align-items:center; gap:32px; }
.mg-pod-cover {
  position:relative; width:98%; max-width:560px; aspect-ratio:1; border-radius:32px; padding:5px;
  /* الأصلُ ٥٠١px، فالسقفُ ٥٤٥ تكبيرٌ ٨٪ — دون عتبة ما يُرى في الحوافّ. */
  background:var(--mg-grad); box-shadow:0 36px 90px -22px rgba(255,77,28,.5);
  transform:rotate(-3deg); transition:transform .3s; will-change:transform;
}
.mg-pod-cover > img { width:100%; height:100%; object-fit:contain; background:var(--mg-paper); border-radius:26px; padding:16px; }
.mg-pod-cover-lbl {
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mg-mono); font-size:12px; letter-spacing:.24em;
  background:var(--mg-bg); border:1px solid var(--mg-line); color:var(--mg-ink);
  padding:9px 20px; border-radius:999px;
}
/* في السياق تحت اللاصقة — والحاوي يطول به بدل أن يقصَّه */
.mg-eq {
  display:flex; align-items:center; justify-content:center; gap:7px; height:52px;
  pointer-events:none;
}
.mg-eq i { width:5px; border-radius:99px; background:var(--mg-grad); animation:mg-eq 1.1s ease-in-out infinite; }
.mg-eq i:nth-child(1){height:26px;animation-delay:0s}   .mg-eq i:nth-child(2){height:52px;animation-delay:.15s}
.mg-eq i:nth-child(3){height:80px;animation-delay:.3s}  .mg-eq i:nth-child(4){height:44px;animation-delay:.45s}
.mg-eq i:nth-child(5){height:64px;animation-delay:.6s}  .mg-eq i:nth-child(6){height:30px;animation-delay:.75s}
@keyframes mg-eq { 0%,100% { transform:scaleY(.55); } 50% { transform:scaleY(1); } }
@media (max-width:900px) { .mg-pod-grid { grid-template-columns:1fr; } }

/* ============================================================
   ١٣) باقاتُ العمل
   ============================================================ */
/**
 * أربعُ باقاتٍ **ثابتة** — فشبكةٌ لا شريطُ تمرير.
 *
 * كان `grid-auto-flow:column` مع `overflow-x:auto`: تخطيطُ عددٍ لا يُعرَف
 * سلفًا. والباقاتُ أربعٌ ولن تزيد، فالتمريرُ يُخفي ثلاثةَ أرباعِ العرض خلف
 * حركةٍ يجب أن يكتشفها الزائرُ بنفسه — وأكثرُهم لا يكتشفها.
 *
 * والفرقُ ليس راحةً بل بيعًا: الباقاتُ تُقارَن. مَن رأى «جلسة تشخيص» وحدَها
 * لا يعرف أنّ فوقها ثلاثًا، فيقيسها بلا سقفٍ ولا أرضيّة.
 *
 * ٤ ← ٢ ← ١ بحسب المتّسع، بلا رقمٍ يُكتَب لكلِّ مقاس.
 */
.mg-tiers {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px; padding:10px 0 4px; align-items:stretch;
}
@media (max-width:1100px) { .mg-tiers { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px)  { .mg-tiers { grid-template-columns:1fr; } }

/* `stretch` على الشبكة و`height:100%` هنا: البطاقاتُ تتساوى مهما اختلف
   طولُ نصّها، فتستوي الأزرارُ في سطرٍ واحدٍ أسفلَها. */
.mg-tier {
  height:100%; background:var(--mg-panel); border:1px solid var(--mg-line);
  border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden; transition:transform .3s,border-color .3s;
}
.mg-tier:hover { transform:translateY(-8px); border-color:rgba(255,77,28,.5); }
.mg-tier::after {
  content:""; position:absolute; top:-70px; inset-inline-end:-70px; width:180px; height:180px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,77,28,.22),transparent 65%);
}
.mg-tier .fmt { font-family:var(--mg-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mg-acc); position:relative; }
.mg-tier h3 { font-family:var(--mg-disp); font-weight:800; font-size:var(--mg-t-card); line-height:1.45; margin:0; position:relative; }
.mg-tier p { font-size:var(--mg-t-sm); color:var(--mg-muted); flex-grow:1; margin:0; position:relative; }
.mg-tier .price { font-family:var(--mg-mono); font-size:14px; color:var(--mg-ink); font-style:italic; opacity:.7; position:relative; }
/* `margin-top:auto` يدفع الزرَّ إلى القاع — فالأربعةُ في سطرٍ واحدٍ ولو
   اختلف طولُ الوصفِ فوقها. و`p{flex-grow:1}` وحدَه لا يكفي حين يقصر النصُّ. */
.mg-tier .mg-btn { margin-top:auto; justify-content:center; padding:14px 22px; }
/* ============================================================
   ١٣-أ) الكورس — قسمٌ مستقلّ
   ============================================================ */
/**
 * السعرُ في عمودٍ لاصقٍ إلى جانب الوصف.
 *
 * الوصفُ يُقرَأ ويطول، والقرارُ (السعر + الزرّ) يجب أن يبقى تحت العين —
 * فلا يضطرّ من اقتنع في السطر الثالث أن يعود صعودًا ليجد الزرّ.
 */
.mg-course { background:var(--mg-bg-2); }
.mg-course-note { margin-top:18px; font-size:12.5px; color:var(--mg-muted); line-height:1.6; }

/* ---- الرزمةُ المكدَّسة ----------------------------------------------
 *
 * البطاقاتُ كلُّها في الشبكة نفسِها (`grid-area:1/1`) لا `position:absolute`:
 * فأطولُها يقيس الحاوي، ولا يُقصّ شيءٌ ولا يُترَك فراغٌ محسوبٌ باليد.
 *
 * و`--pos` رتبةُ البطاقة من الواجهة (٠ في المقدّمة)، تكتبها جافاسكربت.
 * وبلا جافاسكربت تبقى القيمُ التي كتبها الخادمُ في `style` — أي الأولى
 * في المقدّمة والباقيةُ خلفها. فالقسمُ يُقرأ ويُشترى منه بلا سكربت.
 *
 * و`--mg-dir` يقلب اتّجاهَ الإزاحة: `transform` لا ينعكس مع `dir` وحدَه،
 * فرزمةٌ تميل يمينًا في العربيّة تميل يمينًا في الإنجليزيّة أيضًا — وهي
 * ساعتها تخرج من الصفحة بدل أن تدخل فيها.
 */
:root { --mg-dir:-1; }
html[dir="ltr"] { --mg-dir:1; }

.mg-cstack { position:relative; }
.mg-cstack-view { display:grid; }
.mg-cstack-item {
  grid-area:1 / 1;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
/**
 * الإزاحةُ محسوسةٌ عمدًا: الرزمةُ تَعِد بما خلفَها، ووعدٌ لا يكاد يُرى لا
 * يُقرَأ وعدًا. فحافّتان ظاهرتان بوضوحٍ خلفَ الأولى.
 *
 * والشفافيّةُ تنحدر بـ`.33` فتبلغ الصفرَ عند الرابعة وحدَها — بلا قاعدةٍ
 * تصطاد `[style*="--pos:3"]`. وتلك كانت هشّةً أصلًا: الخادمُ يكتب
 * `--pos:3` بلا مسافة، وجافاسكربت تكتب `--pos: 3` بمسافة، فتصيب إحداهما
 * وتخطئ الأخرى — والخطأُ صامتٌ لأنّ البطاقةَ مخفيّةٌ خلفَ غيرها أصلًا.
 */
.mg-cstack.is-many .mg-cstack-item {
  transform:translateX(calc(var(--pos) * 44px * var(--mg-dir)))
            translateY(calc(var(--pos) * -26px))
            scale(calc(1 - var(--pos) * .06));
  z-index:calc(20 - var(--pos));
  opacity:calc(1 - var(--pos) * .33);
}

.mg-cstack-nav { display:flex; align-items:center; gap:16px; margin-top:24px; }
.mg-cstack-btn {
  width:46px; height:46px; flex:none; border-radius:50%;
  border:1px solid var(--mg-line); background:transparent; color:var(--mg-ink);
  font-size:24px; line-height:1; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.mg-cstack-btn:hover { background:var(--mg-ink); color:var(--mg-bg); border-color:var(--mg-ink); }
.mg-cstack-btn:focus-visible { outline:2px solid var(--mg-acc); outline-offset:3px; }
.mg-cstack-count { margin:0; font-family:var(--mg-mono); font-size:14px; color:var(--mg-muted); }
.mg-cstack-count b { color:var(--mg-ink); font-weight:700; }

/* ---- البطاقة ---- */
.mg-ccard {
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0; overflow:hidden;
  background:var(--mg-panel); border:1px solid rgba(255,77,28,.45);
  border-radius:22px; box-shadow:0 30px 70px -34px rgba(255,77,28,.5);
}
.mg-cc-cover {
  position:relative; min-height:260px; display:grid; place-items:center;
  background:var(--mg-grad); overflow:hidden;
}
.mg-cc-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.mg-cc-mark { display:grid; place-items:center; color:rgba(255,255,255,.62); }
.mg-cc-mark svg { width:clamp(56px,7vw,88px); height:auto; stroke-width:1.1; }
.mg-cc-cat {
  position:absolute; inset-block-start:16px; inset-inline-start:16px;
  background:var(--mg-bg); color:var(--mg-ink);
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:7px 14px; border-radius:999px;
}

.mg-cc-body { padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; }
.mg-cc-title { font-size:clamp(24px,3vw,40px); font-weight:900; line-height:1.2; margin:0; }
.mg-cc-title a { color:inherit; text-decoration:none; }
.mg-cc-title a:hover { color:var(--mg-acc); }
.mg-cc-sub { font-size:var(--mg-t-md); color:var(--mg-acc); margin:12px 0 0; font-weight:600; }

.mg-cc-facts { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0; padding:0; list-style:none; }
.mg-cc-facts li {
  border:1px solid var(--mg-line); border-radius:999px; padding:8px 16px;
  font-size:var(--mg-t-sm); color:var(--mg-muted);
}
.mg-cc-facts b { font-family:var(--mg-mono); font-size:15px; color:var(--mg-ink); font-weight:700; }
.mg-cc-facts li.free { border-color:rgba(255,77,28,.45); }
.mg-cc-facts li.free b { color:var(--mg-acc); }

/* `margin-top:auto` يثبّت السعرَ والزرَّ في القاع مهما اختلف طولُ العنوان —
   فتستوي البطاقاتُ عند التكديس ولا يقفز الزرُّ بين واحدةٍ وأخرى. */
.mg-cc-foot { margin-top:auto; padding-top:24px; display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.mg-cc-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mg-cc-price b { font-family:var(--mg-mono); font-size:clamp(32px,3.6vw,46px); font-weight:700; color:var(--mg-acc); line-height:1; }
.mg-cc-price > span { color:var(--mg-muted); font-size:var(--mg-t-base); }
.mg-cc-forever { flex-basis:100%; font-size:var(--mg-t-sm); color:var(--mg-ink); }
.mg-cc-foot .mg-btn { margin-inline-start:auto; }

@media (max-width:860px) {
  .mg-ccard { grid-template-columns:1fr; }
  .mg-cc-cover { min-height:190px; }
  .mg-cstack.is-many .mg-cstack-item {
    transform:translateX(calc(var(--pos) * 16px * var(--mg-dir)))
              translateY(calc(var(--pos) * -10px))
              scale(calc(1 - var(--pos) * .035));
  }
  .mg-cc-foot .mg-btn { margin-inline-start:0; width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  .mg-cstack-item { transition:none; }
}

.mg-tiers-note {
  margin-top:22px; font-size:13.5px; color:var(--mg-muted);
  border:1px dashed rgba(255,77,28,.4); border-radius:12px; padding:14px 18px; max-width:640px;
}

/* ============================================================
   ١٤) بانرُ المحاكاة
   ============================================================ */
.mg-sim {
  position:relative; overflow:hidden; border-radius:28px; padding:64px 56px;
  background:var(--mg-panel); border:1px solid var(--mg-line);
}
.mg-sim::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px circle at 15% 20%,rgba(255,77,28,.18),transparent 55%),
             radial-gradient(500px circle at 85% 85%,rgba(124,58,237,.20),transparent 55%);
}
.mg-sim > * { position:relative; }
.mg-sim h3 { font-family:var(--mg-disp); font-weight:900; font-size:clamp(26px,3.6vw,44px); line-height:1.3; max-width:640px; margin:0; }
.mg-sim p { color:var(--mg-muted); margin-top:16px; max-width:560px; font-size:var(--mg-t-base); }
.mg-sim .mg-btn { margin-top:32px; }
.mg-sim-badge {
  position:absolute; top:26px; inset-inline-end:32px; font-family:var(--mg-mono);
  font-size:11px; letter-spacing:.2em; color:var(--mg-acc);
  border:1px solid rgba(255,77,28,.4); padding:7px 14px; border-radius:999px;
}
@media (max-width:700px) { .mg-sim { padding:40px 24px; } .mg-sim-badge { position:static; display:inline-block; margin-bottom:16px; } }

/* ============================================================
   ١٥) أثرٌ حقيقيّ
   ============================================================ */
.mg-succ {
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  border:1px solid var(--mg-line); border-radius:22px; padding:40px; background:var(--mg-bg-2);
}
.mg-succ .eyebrow { font-size:11px; letter-spacing:.2em; color:var(--mg-acc); font-family:var(--mg-mono); margin-bottom:8px; }
.mg-succ .who { font-family:var(--mg-mono); font-size:clamp(24px,3vw,36px); font-weight:700; }
.mg-succ .what { color:var(--mg-muted); max-width:480px; font-size:var(--mg-t-base); }
.mg-testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.mg-testi { border:1px dashed rgba(255,77,28,.35); border-radius:18px; padding:28px; color:var(--mg-muted); font-size:var(--mg-t-base); }
.mg-testi .who { margin-top:14px; color:var(--mg-acc); font-size:13px; font-weight:600; }
@media (max-width:760px) { .mg-testi-grid { grid-template-columns:1fr; } .mg-succ { padding:28px; } }

/* ============================================================
   ١٦) تواصل
   ============================================================ */
.mg-contact { background:var(--mg-bg-2); border-top:1px solid var(--mg-line); }
.mg-cta-big { font-family:var(--mg-disp); font-weight:900; font-size:clamp(44px,8.6vw,120px); line-height:1.06; margin:0; }
.mg-cta-big .o { -webkit-text-stroke:2.5px var(--mg-stroke-ink); color:transparent; }
.mg-cta-row { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-top:48px; }
.mg-contact-list {
  margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--mg-line); border:1px solid var(--mg-line); border-radius:18px; overflow:hidden;
}
.mg-c-cell { background:var(--mg-bg-2); padding:28px; }
.mg-c-cell .lbl { font-family:var(--mg-mono); font-size:11px; letter-spacing:.18em; color:var(--mg-muted); text-transform:uppercase; }
.mg-c-cell .val { margin-top:8px; font-size:var(--mg-t-base); }
.mg-c-cell .val a { color:inherit; text-decoration:none; }
.mg-c-cell .val .sub { color:var(--mg-muted); font-size:13.5px; }
.mg-soc-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.mg-soc {
  font-family:var(--mg-mono); font-size:12px; letter-spacing:.08em;
  border:1px solid var(--mg-line); padding:11px 20px; border-radius:999px;
  color:var(--mg-muted); text-decoration:none; transition:all .25s;
}
.mg-soc:hover { border-color:var(--mg-acc); color:var(--mg-acc); transform:translateY(-3px); }
@media (max-width:860px) { .mg-contact-list { grid-template-columns:1fr; } }

/* ============================================================
   ١٤) روابطُ المنصّات — أيقونةٌ حيث تُعرَف، ونصٌّ حيث لا تُعرَف
   ============================================================

   `has-icon` يضعها الخادمُ حين يجد رسمًا للمضيف. فالشريحةُ الدائريّةُ
   تُقاس بالأيقونة، والشريحةُ النصّيّةُ تبقى كما كانت — ولا نحتاج قائمتين
   في الورقة ولا صنفًا يُكتَب باليد لكلِّ منصّة.

   والهدفُ ٤٤×٤٤ لا ٢٠: الأيقونةُ صغيرةٌ، والإصبعُ ليس كذلك. */
.mg-pod-chip.has-icon,
.mg-soc.has-icon {
  display:inline-grid; place-items:center;
  width:44px; height:44px; padding:0; flex:none;
}
.mg-pod-chip.has-icon svg,
.mg-soc.has-icon svg { display:block; }

/* اللونُ يُصيب الحدَّ والرسمَ معًا — الرسمُ يرث `currentColor` */
.mg-pod-chip.has-icon:hover,
.mg-soc.has-icon:hover { color:var(--mg-acc); border-color:var(--mg-acc); }
.mg-pod-chip.has-icon:focus-visible,
.mg-soc.has-icon:focus-visible { outline:2px solid var(--mg-acc); outline-offset:3px; }

/* ============================================================
   ١٥) الحدُّ الأدنى للقراءة على الهاتف
   ============================================================

   وسومُ الخدمات ١٠٫٥ب وعدّادُها ١٠ب — مقاسٌ يُقرَأ على شاشةِ حاسوبٍ
   بمسافةِ ذراع، ولا يُقرَأ على هاتفٍ في يد. والرقمُ لا يُخمَّن: ما نزل عن
   ١٢ يُرفَع إليها، وما فوقها يبقى — فلا يتضخّم التخطيطُ كلُّه لأجلِ سطر. */
@media (max-width: 900px) {
  body.mg-home .mg-svc-count { font-size:12px; }
  body.mg-home .mg-svc-tag   { font-size:12px; }
  body.mg-home .mg-tl-y      { font-size:12px; }
  body.mg-home .mg-ox-lbl    { font-size:12px; }
  body.mg-home .mg-cc-cat    { font-size:12px; }
}
@media (max-width: 900px) {
  body.mg-home .mg-tier .fmt { font-size:12px; }
  body.mg-home .mg-c-cell .lbl { font-size:12px; }
}
/* وسمُ الخدمة رابطٌ قائمٌ بذاته لا نصٌّ في سطر — فيُقاس بالإصبع */
@media (pointer: coarse) {
  body.mg-home .mg-svc-tag { min-height:44px; display:inline-flex; align-items:center; }
}