/* ═══════════════════════════════════════════════════════════════════════════
   سمة أورورا — موقع الرائد للحلول البرمجية
   بطل داكن يذوب إلى أقسام فاتحة، وكائنات ملوّنة تتنقّل بينها وتتحوّل مع التمرير.
   كل الحركة تحترم prefers-reduced-motion في آخر الملف.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الرموز ───────────────────────────────────────────────────────────────── */
:root {
  --dark:        #070b18;
  --dark-2:      #0d1428;
  --dark-line:   #1d2748;
  --dark-ink:    #eef1fb;
  --dark-dim:    #94a1c8;

  --light:       #F1F4F9;
  --light-2:     #ffffff;
  --light-line:  #e3e6f0;
  --ink:         #111832;
  --dim:         #5b678c;

  --brand:       #0035E6;
  --brand-soft:  #ADC8FF;   /* الأزرق الفاتح: على الداكن، وتعبئة الخريطة */
  --brand-mist:  #F1F4F9;   /* الرمادي المزرقّ: الخلفيات الفاتحة والخامل */
  --brand-2:     #2ad0c8;
  --brand-3:     #ff8a5b;
  --gold:        #ffb648;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-xl: 34px;

  --wrap: 1180px;
  --gut:  20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 72px;
}

/* ── الأساس ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Lenis يتولّى التمرير الناعم؛ لا نجمع بينه وبين smooth الأصلي فيتعارضان */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--dark-ink);
  font-family: 'Tajawal', system-ui, 'Segoe UI', Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button, input, textarea, select { font: inherit; color: inherit; }

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

.sr, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 999;
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
}

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }

/* ── الخلفية الهندسية ─────────────────────────────────────────────────────────
   طبقتان فقط: شبكة تقنية ثابتة، وهالة واحدة يبدّل لونَها التمريرُ عبر --tint.
   لا كرات ضبابية: شركة برمجيات تُقاس بدقّة الخط لا بضبابية الضوء.            */
.canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: strict;
}

.grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to left,   rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(90% 65% at 50% 22%, #000 0%, transparent 100%);
  transition: opacity .45s var(--ease);
}

/* الهالة: قرص ضوء واحد خلف المحتوى، لونه متغيّر --tint يحرّكه السكربت لكل قسم */
.glow {
  --tint: var(--brand);
  position: absolute;
  inset-block-start: -28vmax; inset-inline-start: 50%;
  inline-size: 92vmax; block-size: 92vmax; margin-inline-start: -46vmax;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 38%, transparent) 0%, transparent 62%);
  filter: blur(40px);
  transition: background .5s var(--ease);
  will-change: transform, opacity;
}

/* على الخلفية الفاتحة تهدأ الطبقتان معاً بدل أن تَشِفّا عبر الأبيض */
body.is-light .grid { opacity: 0; }
body.is-light .glow { opacity: .35; }

main, .nav, .foot { position: relative; z-index: 1; }

/* ── الشريط العلوي ────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  height: var(--nav-h);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-block-end: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7,11,24,.72);
  backdrop-filter: saturate(150%) blur(14px);
  border-block-end-color: var(--dark-line);
}
body.is-light .nav.is-stuck {
  background: rgba(255,255,255,.82);
  border-block-end-color: var(--light-line);
  color: var(--ink);
}

/* عرض حاوية البطل (.hero-grid) لا --wrap: فتقع العلامة على خطّ نصّ البطل نفسه،
   وتبتعد الروابط إلى الحافّة المقابلة. */
.nav-in {
  max-width: 1440px; margin-inline: auto; padding-inline: var(--gut);
  height: 100%; display: flex; align-items: center; gap: 22px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; }
.brand-mark {
  inline-size: 30px; block-size: 30px; flex: none;
  filter: drop-shadow(0 4px 12px rgba(0,53,230,.45));
}
.brand-text { font-size: 17px; white-space: nowrap; }

.nav-links { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
/* ثلاث مجموعات: العلامة | الروابط | اللغة والتواصل. هامشان تلقائيان يقتسمان
   الفراغ بالتساوي. والترتيب في DOM لا يتغيّر فقائمة الهاتف المنطوية كما هي.
   الهامش الثاني على الرابط **قبل** مبدّل اللغة لا عليه: المبدّل يحمل dir لغته،
   فـ inline-start فيه تقع في الجهة المعاكسة لاتجاه الصفحة. */
@media (min-width: 1181px) {
  .nav-links { flex: 1; margin-inline-start: 0; }
  .nav-links > a:first-child { margin-inline-start: auto; }
  .nav-links > a:has(+ .nav-lang) { margin-inline-end: auto; }
}
.nav-links > a {
  padding: 8px 13px; border-radius: 999px; font-size: 15.5px; font-weight: 500; white-space: nowrap;
  color: var(--dark-dim); transition: color .25s, background .25s;
}
.nav-links > a:hover { color: var(--dark-ink); background: rgba(255,255,255,.07); }
.nav-links > a[aria-current="page"] { color: var(--dark-ink); background: rgba(255,255,255,.1); }
body.is-light .nav.is-stuck .nav-links > a { color: var(--dim); }
body.is-light .nav.is-stuck .nav-links > a:hover,
body.is-light .nav.is-stuck .nav-links > a[aria-current="page"] { color: var(--ink); background: rgba(17,24,50,.06); }

.nav-cta {
  margin-inline-start: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff !important; font-weight: 700;
  box-shadow: 0 8px 22px rgba(0,53,230,.35);
}
.nav-cta:hover { background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important; filter: brightness(1.08); }

.burger {
  display: none; margin-inline-start: auto;
  inline-size: 42px; block-size: 42px; border: 0; background: transparent;
  cursor: pointer; padding: 10px; gap: 5px; flex-direction: column; justify-content: center;
}
.burger span { display: block; block-size: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── الأزرار ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 28px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  box-shadow: 0 12px 30px rgba(0,53,230,.34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,53,230,.44); }
.btn-ghost { border-color: rgba(255,255,255,.22); color: var(--dark-ink); background: rgba(255,255,255,.04); }
.btn-ghost:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); }
.sec .btn-ghost, .foot-info .btn-ghost { border-color: var(--light-line); color: var(--ink); background: transparent; }
.sec .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: rgba(0,53,230,.06); }

/* ── البطل ────────────────────────────────────────────────────────────────── */
.hero {
  min-block-size: 100svh; display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + 40px) 80px;
  position: relative;
  overflow: clip;   /* الخلفية تملأ القسم وتُقصّ عند حوافّه لا عند حوافّ الصفحة */
  isolation: isolate;
}

/* ── خلفية الهدر: الفيلم يملأ القسم ────────────────────────────────────────── */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img,
.hero-vid {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 42%;
  display: block;
}
/* الفيديو شفّاف حتى يُرسم أول إطار فعلاً — لا بمجرّد بدء التحميل — وإلا ومض
   الهدر أسودَ لحظةً بين البوستر والفيديو (حقيقة #19). */
.hero-vid { opacity: 0; transition: opacity .9s ease; }
.hero-bg.is-video .hero-vid { opacity: 1; }

/* الحجاب ليس زينة: سطوع الإطار 104/255 وفيه بقع ناصعة يختفي فوقها النصّ الأبيض.
   يثقل جهة النصّ وينحسر في الطرف المقابل فتبقى اللقطات ظاهرة.
   الاتجاه `to left` يوافق العربية (النصّ جهة اليمين)، و`to right` للغات LTR. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(7,11,24,.78) 0%, rgba(7,11,24,0) 42%),
    linear-gradient(to left, rgba(7,11,24,.94) 0%, rgba(7,11,24,.74) 46%, rgba(7,11,24,.40) 100%);
}
[dir="ltr"] .hero-scrim {
  background:
    linear-gradient(to top, rgba(7,11,24,.78) 0%, rgba(7,11,24,0) 42%),
    linear-gradient(to right, rgba(7,11,24,.94) 0%, rgba(7,11,24,.74) 46%, rgba(7,11,24,.40) 100%);
}
/* تحت 900 بكسل الهدر طوليّ والخلفية صورة ثابتة، فالنصّ يحتاج عتمة متساوية */
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(7,11,24,.86) 0%, rgba(7,11,24,.62) 55%, rgba(7,11,24,.72) 100%);
  }
}

/* عمود واحد: المنتج صار خلفيةً، فلا عمود ثانٍ يقابل النصّ. والعرض مقيّد وإلا
   امتدّ السطر عبر شاشة 1900 بكسل فصار غير مقروء. */
/* position + z-index إلزاميان: الخلفية والحجاب عنصران مطلقان، والمحتوى الساكن
   يُرسم تحتهما فيختفي كلّه. */
/* حاوية البطل أعرض من --wrap: على الشاشات العريضة يبتعد النصّ عن المنتصف نحو
   حافّته (طلب المستخدم)، وتحت 1440 لا فرق. */
.hero-grid { display: grid; inline-size: 100%; max-width: 1440px; position: relative; z-index: 2; }
.hero-in { max-inline-size: 660px; }

.ticker {
  display: inline-flex; align-items: center; gap: 10px; margin-block-end: 26px;
  padding: 7px 16px 7px 12px; border-radius: 999px; font-size: 14.5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--dark-dim);
}
.ticker em { font-style: normal; color: var(--dark-ink); }
.ticker-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand-2);
  box-shadow: 0 0 0 0 rgba(42,208,200,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 11px rgba(42,208,200,0); }
  100% { box-shadow: 0 0 0 0   rgba(42,208,200,0); }
}

.hero-title {
  font-size: clamp(36px, 6.4vw, 68px);
  line-height: 1.14; margin-block-end: 20px;
  background: linear-gradient(180deg, #fff 30%, #a9b6e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* SplitText يقسم العنوان كلماتٍ ويحرّكها، والتحويل على ابن عنصرٍ متدرّجِ الطلاء
   ينشئ سياق طلاء جديداً فيبقى الابن شفافاً بلا تدرّج — أي عنوان يختفي تماماً.
   إعادة التدرّج إلى كل كلمة تحلّها، والمظهر واحد لأن التدرّج رأسي. */
.hero-title .hw {
  background-image: linear-gradient(180deg, #fff 30%, #a9b6e8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-lead {
  font-size: clamp(17px, 2.3vw, 20px); color: var(--dark-dim);
  max-inline-size: 52ch; margin-block-end: 32px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* شارات تحت الأزرار: دليل ملموس (سنوات، منصّات، دعم) لا شعار تسويقي */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px 20px; margin-block-start: 30px;
  color: var(--dark-dim); font-size: 14.5px;
}
.hero-badges li { display: inline-flex; align-items: center; gap: 8px; }
.hero-badges i { color: var(--brand-2); }

.scroll-hint {
  margin-block-start: 60px; color: var(--dark-dim); font-size: 14px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
}
/* داخل الهدر: مثبّت أسفل الوسط فوق الحجاب (z-index لازم، فالحجاب والخلفية
   عنصران مطلقان)، ومنفصل عن .hero-grid حتى لا يزيح النصّ ولا يطيل القسم. */
/* inset-inline: 0 مع margin-inline: auto لا نصف عرضٍ مع translateX: الأخير
   يخلط المنطقيّ بالفيزيائي، فينزاح التلميح عن الوسط في الاتجاه العربي. */
.hero .scroll-hint {
  position: absolute; inset-block-end: 26px; inset-inline: 0;
  inline-size: fit-content; margin-inline: auto;
  margin-block-start: 0; z-index: 3;
  color: rgba(255,255,255,.82); text-decoration: none;
}
.hero .scroll-hint:hover { color: #fff; }
@media (max-width: 900px) { .hero .scroll-hint { inset-block-end: 14px; font-size: 13px; } }
/* في الهاتف كان يقع فوق شارات البطل (مثبَّت أسفل الهدر والشارات تنزل إليه)، والتمرير
   باللمس بديهيّ فلا حاجة للدليل */
@media (max-width: 640px) { .hero .scroll-hint { display: none; } }
.scroll-hint .arrow {
  inline-size: 1px; block-size: 46px;
  background: linear-gradient(to bottom, var(--brand-2), transparent);
  animation: drop 1.9s var(--ease) infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* السهم حركة زينة محضة: تحت تقليل الحركة يسكن ولا يختفي — الخطّ نفسه دلالة.
   وموضع القاعدة بعد قاعدة السهم إلزامي: التخصيص واحد، فالأخيرة هي الغالبة. */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint .arrow { animation: none; transform: scaleY(1); }
}

/* ── إطار المتصفّح ──────────────────────────────────────────────────────────
   لقطة الشاشة وحدها تبدو صورةً؛ داخل إطار نافذة تبدو برنامجاً يعمل. الإطار
   مرسوم بـ CSS لا بصورة، فيتلوّن مع الخلفية ولا يضيف بايتاً واحداً.          */
.frame {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #11182f; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.frame-bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  background: #0b1224; border-block-end: 1px solid rgba(255,255,255,.08);
}
.frame-bar i {
  inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.22);
}
.frame-bar i:first-child { background: #ff5f57; }
.frame-bar i:nth-child(2) { background: #febc2e; }
.frame-bar i:nth-child(3) { background: #28c840; }
.frame-bar b {
  margin-inline-start: auto; font-size: 12px; font-weight: 500; color: #7d8ab4;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; direction: ltr;
}
.frame-body { display: block; background: #fff; }
.frame-body img { inline-size: 100%; block-size: auto; display: block; }

/* داخل الأقسام الفاتحة يخفّ ظل الإطار وإلا بدا ثقباً أسود في الصفحة */
.sec .frame, .detail .frame {
  box-shadow: 0 26px 60px rgba(17,24,50,.18);
  border-color: var(--light-line);
}

/* زرّ الفيلم: ثالث الأزرار، بأسلوب يميّزه عن «تواصل معنا» الشبحيّ */
.btn-play {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.btn-play i { font-size: 12px; }
.btn-play:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.34); }

/* ── حوار الفيلم الكامل ───────────────────────────────────────────────────── */
.filmbox {
  border: 0; padding: 0; background: transparent;
  inline-size: min(1100px, 92vw); max-inline-size: none;
  max-block-size: 92dvh;
  border-radius: 20px; overflow: hidden;
  color: #fff;
}
.filmbox::backdrop { background: rgba(6,9,20,.86); backdrop-filter: blur(6px); }
.filmbox-vid {
  display: block; inline-size: 100%; block-size: auto;
  max-block-size: 92dvh;
  border-radius: 20px; background: #000;
  box-shadow: 0 34px 90px rgba(0,0,0,.6);
}
/* الزرّ داخل الصندوق لا فوقه: خارجه بإزاحة سالبة يخرج من النافذة حين يبلغ
   الحوار سقفه 92dvh على شاشة قصيرة، فيصير الإغلاق بالزرّ متعذّراً. */
.filmbox-x {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2;
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(8,12,24,.62); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 16px;
}
.filmbox-x:hover { background: rgba(8,12,24,.85); border-color: rgba(255,255,255,.5); }

/* ── الأجهزة: النظام نفسه على ثلاث شاشات ──────────────────────────────────────
   كتلة واحدة بنسبة ثابتة، والأجهزة داخلها بمواضع وأحجام بالنسبة المئوية. فهي
   تصغر معاً ككتلة واحدة على كل عرض — بلا نقطة كسر تعيد ترتيبها، وبلا تراصٍّ
   عموديّ يجعل القسم ثلاث شاشات طولاً على الهاتف. والنسبة إلزامية: الأجهزة
   مطلقة الموضع، فبدونها ينهار ارتفاع الحاوي إلى صفر.                          */
.devices {
  position: relative; background: var(--dark-2); color: var(--dark-ink);
  padding-block: clamp(58px, 8vw, 104px);
  border-block-start: 1px solid var(--dark-line);
  overflow: clip;   /* الأجهزة تتجاوز الحاوي بإزاحات سالبة على الشاشات الضيّقة */
  isolation: isolate;   /* الطبقتان تحت المحتوى ولو لم يُذكر z-index على أولاده */
}
/* ── باترن القسم: شبكة نقاطٍ دقيقة وهالةٌ تحت الأجهزة ──────────────────────
   اللون المصمت كان يجعل الأجهزة تطفو على لا شيء: لا سطحَ تقف عليه ولا عمقَ
   خلفها. والنقاط 1 بكسل كل 26 بكسلاً بشفافية 7% — عند هذا الحدّ تُقرأ نسيجاً
   لا نقشاً، ولا تزاحم اللقطات داخل الشاشات. والقناع البيضويّ يخفّفها عند
   الحوافّ فلا تنتهي الشبكة بخطٍّ مقصوص عند حدّ القسم.

   وشبكةُ نقاطٍ لا خطوط: خطوط الشبكة توازي حوافّ الأجهزة فتشوّش عليها، أما
   النقطة فلا اتجاه لها. وكلاهما طبقةٌ مرسومة لا صورة — لا طلبَ شبكةٍ زائداً. */
.devices::before {
  content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  /* مشربيّة: مثمَّنٌ يملأ البلاطة، فتتلاقى أضلاعُ المثمَّنات وتتكوّن بينها
     معيّناتٌ صغيرة عند الأركان — تعشيقةُ «المثمَّن والنجمة» التي تُنحت بها
     المشربيّات. وهي أهدأ من النجوم المتشابكة: خطوطٌ طويلة متّصلة لا رؤوسٌ
     حادّة تتقاطع، فلا تزاحم الشاشات فوقها.
     ورسمٌ متجهيّ مضمَّن لا صورة: بلا طلبِ شبكةٍ زائد، وبلا بكسلةٍ عند التكبير. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M25.8 0 H62.2 L88 25.8 V62.2 L62.2 88 H25.8 L0 62.2 V25.8 Z'/%3E%3Cpath d='M44 30.5 L57.5 44 L44 57.5 L30.5 44 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
  opacity: .032;
  -webkit-mask-image: radial-gradient(118% 86% at 50% 38%, #000 26%, transparent 76%);
          mask-image: radial-gradient(118% 86% at 50% 38%, #000 26%, transparent 76%);
}
/* بلا هالةٍ خلف الأجهزة: الضوء الملوّن تحتها كان يُقرأ بقعةً على الخلفية
   لا عمقاً، ويسحب العين إلى الفراغ بدل الشاشات. الخلفية الداكنة وحدها
   ونقشُها الخفيف يكفيان لفصل الأجهزة. */
.devices .h-sec { color: var(--dark-ink); }
.devices .lead  { color: var(--dark-dim); max-inline-size: 60ch; margin-inline: auto; }
.devices .sec-head { margin-block-end: 30px; }

/* container-type يجعل cqw داخل الكتلة نسبةً من عرضها هي، لا من عرض النافذة.
   فكل حافّة وكل حامل وكل انحناء يصغر بالنسبة نفسها — ولا بكسل ثابت يضخم
   الحوافّ على الهاتف حتى تبتلع الشاشة التي تحيط بها.                          */
/* مشهدٌ ثلاثيّ الأبعاد متداخل لا صفٌّ مسطّح: الأجهزة تتقدّم إحداها على حافّة
   جارتها وتدور نحو مركز الكتلة، فتُقرأ عمقاً لا رصفاً. والتداخل محدودٌ بحافّة
   الجار لا بمحتوى شاشته — وهو ما كان يعيب الكومة القديمة: كانت تقصّ زاوية
   الشاشة الكبيرة فتُقرأ ركاماً. الحدود: اللوح يغطّي 5% من الكاشير، وأول
   الهواتف 3% من اللوح، وبين الهواتف 1.8%.

   والميلان نحو المركز بإشارتين متعاكستين: الكاشير في جهة البداية تنحسر حافّته
   الخارجية (+9°)، والهواتف في جهة النهاية تنحسر حافّتها الخارجية (−6°)، واللوح
   بينهما بأصغر زاوية (+3°). إشارةٌ واحدة للثلاثة كانت تُقرأ مروحةً منحرفة.

   والمنظور داخل transform كل جهاز لا على .rig ولا بـ preserve-3d: تويين GSAP
   (aurora.js:345) يكتب transform مضمّناً على .rig فيغلب أي قاعدة هنا (حقيقة
   11)، و.rig فيها container-type فلا يُعوَّل على سياق ثلاثيّ الأبعاد يعبرها.

   والنسبة محسوبة على أطول فرد — الكاشير بحامله — لا مختارة ذوقاً: عند 50%
   عرضاً ونسبة 16:9 تكون الشاشة 0.281 من عرض الكتلة، والحشوة والذقن 0.032،
   والعنق والقاعدة 0.044، والإزاحة عن الأرض 0.008 — المجموع 0.365، فـ 1/2.6
   تترك فوقه عشرين بكسلاً. (النسبة 3.2 السابقة كانت تقصّ القاعدة.)         */
.rig {
  position: relative;
  inline-size: 100%; max-inline-size: 1020px; margin-inline: auto;
  aspect-ratio: 2.6 / 1;
  container-type: inline-size;
}
/* الأرضية: خطٌّ ضوئيّ رفيع يمتدّ تحت الأجهزة كلّها، فيُرى خطُّ القاعدة بدل أن
   يُفترَض. متلاشي الطرفين كي لا ينتهي بحافّة مقصوصة. */
.rig::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset-inline: 2%; inset-block-end: 1.6%; block-size: 1px;
  background: linear-gradient(to left, transparent, rgba(255,255,255,.22) 18%,
                              rgba(255,255,255,.22) 82%, transparent);
}
.dev { position: absolute; display: block; }
/* الإطار شبه أسود لا أزرق: #2b3350 السابق كان بلون القسم نفسه تقريباً، فكانت
   الأجهزة بقعاً بلا حدّ. والأسود هو ما تُصنع منه الأجهزة فعلاً، وحافّة ضوئية
   داخلية رفيعة تفصله عن الخلفية الداكنة فلا يذوب فيها.                      */
.dev-screen {
  display: block; overflow: hidden; position: relative;
  background: #0a0c12;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.dev-screen img { display: block; inline-size: 100%; block-size: auto; }
/* لمعة الزجاج: شريطٌ مائل شفّاف فوق الشاشة. هو ما يقول «زجاج» بلا رسمٍ ولا
   صورة، ويكسر استواء اللقطة المسطّحة داخل الإطار. تحت 0.07 لا يُرى، وفوق
   0.14 يبتلع نصّ اللقطة — القيمة هنا 0.10 عند القمة وتتلاشى عند 62%.     */
.dev-screen::before {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0 18%,
                              rgba(255,255,255,.03) 34%, transparent 62%);
}

/* كل جهازٍ يقف على خطّ القاعدة نفسه: inset-block-end واحد للثلاثة، والارتفاع
   يتبع عرضَه ونسبةَ صورته فيتدرّج المقاس وحده من الشاشة إلى الهاتف.
   والدوران حول محورٍ رأسيّ لا يزيح القاعدة، فالثلاثة تبقى على خطٍّ واحد. */
.dev { inset-block-end: 2%; }

/* ظلّ الاتصال بالأرض: بقعةٌ تحت كل جهاز تربطه بالأرضية فلا يبدو معلّقاً.
   z-index سالب داخل الجهاز نفسه — وهو يحمل z-index فيصنع سياق تراص خاصاً،
   فالبقعة تقع خلف شاشته ولا تهبط خلف أرضية الكتلة. */
.dev::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset-inline: -7%; inset-block-end: -.9cqw; block-size: 2cqw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), transparent 72%);
}

/* الشاشة الكبيرة: جهة البداية، وأكبر أفراد المشهد. حافّتها الخارجية تنحسر
   فتواجه المركز، ونقطة الدوران حافّتها الداخلية — القيم فيزيائية لأن
   transform-origin لا يقبل كلمات منطقية، و0% هي اليسار وهو الداخل في RTL. */
.dev-desk {
  inline-size: 50%; inset-inline-start: 0; z-index: 1;
  transform: perspective(1150px) rotateY(11deg);
  transform-origin: 0% 50%;
}
/* طرفية كاشير لا شاشة مكتب: ذقنٌ سميك أسفل الشاشة تعلوه نقطة العلامة، وعنقٌ
   قصير عريض على قاعدة ثقيلة — هيئة الجهاز الذي يقف على الكاونتر. الشاشة
   الرفيعة بحاملٍ نحيل كانت تقول «حاسوب مكتب» لا «نظام بيع». */
.dev-desk .dev-screen {
  border-radius: 1.1cqw; padding: .8cqw .8cqw 2.4cqw;
  box-shadow: 0 30px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.14);
}
.dev-desk .dev-screen img { border-radius: .45cqw; }
/* نقطة العلامة في الذقن: قرصٌ صغير موسَّط، هو ما يجعل الذقن مقصوداً لا فراغاً */
.dev-desk .dev-screen::after {
  content: ''; position: absolute; z-index: 2;
  inset-block-end: .85cqw; inset-inline: 0; margin-inline: auto;
  inline-size: .7cqw; block-size: .7cqw; border-radius: 50%;
  background: rgba(255,255,255,.28);
}
/* الحامل: عنقٌ شبه منحرف يتّسع نازلاً، ثم قاعدة بيضاوية مسطّحة — هيئة طرفية
   الكاشير على الكاونتر. والقاعدة 36% من عرض الشاشة لا 48%: العرض السابق
   (300% من حاملٍ عرضه 16%) كان يمتدّ حتى يُقرأ رفّاً تقف عليه الشاشة. */
/* عرض الحامل هو عرض قاعدته، والعنق نسبةٌ منه: القاعدة كانت 300% من حاملٍ
   ضيّق، و margin-inline: auto لا يوسّط طفلاً أعرضَ من حاويه — يصير الهامش
   صفراً في جهة البداية فينزاح كل الفائض إلى الجهة الأخرى. فبدت القاعدة
   مزاحةً عن مركز الشاشة. */
.dev-stand { display: block; margin-inline: auto; inline-size: 39%; }
/* #12151e لا #0a0c12: الأسود التامّ يذوب في خلفية القسم الداكنة فتبدو القاعدة
   ظلّاً لا جسماً. والحافّة العلوية الضوئية هي ما يفصل سطحها عن الجوّ حولها. */
.dev-stand::before,
.dev-stand::after { content: ''; display: block; margin-inline: auto; }
/* العنق: قاعدته أعرض من رأسه بـ clip-path، فيُقرأ جسماً مصبوباً لا عموداً */
.dev-stand::before {
  inline-size: 33%; block-size: 3.1cqw;
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  /* أفتح من جسم الجهاز لا أدكن: على خلفية القسم الداكنة كان العنق الأسود
     يختفي فتبدو الشاشة معلّقة في الهواء. التدرّج الجانبيّ هو ما ينحته. */
  background: linear-gradient(to left, #10141e 0 8%, #2b3248 46%, #0d111a);
}
/* القاعدة: بيضاويّ مسطّح لا مستطيل — سطحٌ منظورٌ من علٍ حافّته الأمامية مضيئة.
   وعرضها 39% من عرض الكاشير (300% من حاملٍ عرضه 13%): أضيق من 48% التي كانت
   تُقرأ رفّاً، وأعرض من أن تبدو الشاشة واقفةً على عود.                     */
.dev-stand::after  {
  inline-size: 100%; block-size: 1.7cqw; border-radius: 50%;
  margin-block-start: -.35cqw;
  background: linear-gradient(to bottom, #39415c, #161b28 52%, #080a10);
  box-shadow: inset 0 .14cqw 0 rgba(255,255,255,.22), 0 .6cqw 1.4cqw rgba(0,0,0,.6);
}

/* اللوح: الجار الأوسط، وأصغر الزوايا الثلاث — هو محور المشهد فلا يلتفت مثل
   طرفيه. ونقطة دورانه وسطه، فيتقدّم طرفاه بالتساوي. */
.dev-tab {
  inline-size: 28%; inset-inline-start: 44.5%; z-index: 2;
  transform: perspective(1150px) rotateY(4deg);
  transform-origin: 50% 50%;
}
.dev-tab .dev-screen {
  border-radius: 1.5cqw; padding: .75cqw;
  box-shadow: 0 22px 48px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14);
}
.dev-tab .dev-screen img { border-radius: .85cqw; }

/* الهواتف: ثلاثة في طرف الصفّ. المقاس والموضع في المعدِّلات وحدها والمشترك
   هنا — فتُضاف رابعة بسطر واحد بلا مساس بالبقية. */
/* لا نتوء بـ CSS: لقطتان من الثلاث تحملان نتوءاً مرسوماً في الصورة نفسها
   (قِيس: وسط الشريط العلوي 1 و9 سطوعاً مقابل 184 و252 عند الطرف)، فنتوءٌ
   مضاف يظهر فوق نتوء. الإطار وحده هو ما يُحسَّن. */
/* الاستدارة نسبةً إلى عرض الهاتف لا إلى عرض الكتلة: 2.2cqw على هاتفٍ عرضه
   9cqw = 24% من عرضه — قوسٌ يبتلع أركان الشاشة. والهاتف الحقيقيّ نحو 14%،
   وهو ما تعطيه 1.15cqw هنا. */
.dev-phone .dev-screen {
  border-radius: 1.15cqw; padding: .4cqw;
  box-shadow: 0 18px 40px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.18);
}
.dev-phone .dev-screen img { border-radius: .95cqw; }

/* مروحةٌ حول هاتفٍ أوسط لا سلّمٌ منحدر في اتجاه واحد: واحدٌ في المقدّمة وسطاً،
   واثنان خلفه أحدهما إلى جهة والآخر إلى الأخرى، بميلانين متقابلين. والثلاثة
   **بالحجم نفسه** بطلب صاحب الموقع — العمق يقوله الترتيب والميلان والشفافية
   لا التصغير. ونقطة الدوران وسطُ كلٍّ منها (50% 50%) فتتفتّح المروحة متناظرة.

   الأرقام من جهة النهاية: الأوسط عند 12% وعرضه 9% فيشغل 12→21، والخلفيّ
   الخارجيّ عند 4.5% (4.5→13.5)، والداخليّ عند 19.5% (19.5→28.5) — تداخلٌ
   1.5% مع الأوسط من كل جهة، وطرف الداخليّ عند حافّة اللوح (27.5%).        */
.dev-phone {
  inline-size: 9%;
  transform-origin: 50% 50%;
}
/* الأوسط: في المقدّمة وأقلّ الثلاثة ميلاناً */
.dev-phone-a {
  inset-inline-end: 12%; z-index: 5;
  transform: perspective(1150px) rotateY(-5deg);
}
/* الخلفيّ الخارجيّ: يميل بعيداً عن المركز، ويعلو قليلاً كما يعلو البعيد */
.dev-phone-b {
  inset-inline-end: 4.5%; z-index: 3; opacity: .92;
  transform: perspective(1150px) rotateY(-17deg) translateY(-3.5%);
}
/* الخلفيّ الداخليّ: ميلانه معاكس فتكتمل المروحة */
.dev-phone-c {
  inset-inline-end: 19.5%; z-index: 3; opacity: .92;
  transform: perspective(1150px) rotateY(8deg) translateY(-3.5%);
}

/* تحت 620 بكسل تصير الكتلة أضيق من 300، فالهاتف الثالث بضعة بكسلات لا تُقرأ
   ولا تضيف إلا ضجيجاً — يبقى اثنان، والصفّ تحتها يذكر البقية. */
/* تحت 720 بكسل يصير عرض الهاتف في الصفّ أقلّ من 45 بكسلاً فلا تُقرأ شاشته.
   يبقى هاتفان أعرض، ويتّسع لهما المكان بتضييق الشاشة واللوح قليلاً. */
@media (max-width: 720px) {
  /* هاتفان لا ثلاثة، وبمقاسٍ أكبر: الثالث هنا بضعة بكسلات لا تُقرأ. والنسبة
     تبقى 2.6 لأن الكاشير يبقى 50% فارتفاعه هو هو (0.365 من العرض).
     والحساب: 50 + 28 + (12 + 9.5) − 4 تداخلاً مع الكاشير − 2 مع اللوح
     − 2.5 بين الهاتفين = 93.5% من عرض الكتلة. */
  /* يبقى الأوسط وخلفيٌّ واحد: ثلاثةٌ بعرض 12% هنا تلتهم عرض الكتلة كله */
  .dev-phone-c { display: none; }
  .dev-tab  { inline-size: 28%; inset-inline-start: 46%; }
  .dev-phone { inline-size: 12%; }
  .dev-phone-a { inset-inline-end: 9%;   }
  .dev-phone-b { inset-inline-end: 1.5%; }
}

.rig-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
  list-style: none; margin: 34px 0 0; padding: 0;
}
.rig-legend li { display: flex; align-items: center; gap: 9px; color: var(--dark-dim); font-size: 14.5px; }
.rig-legend i { color: var(--brand-2); font-size: 15px; }

@media (max-width: 620px) {
  /* أضيق من ذلك تصير الشاشات الثلاث رقعاً غير مقروءة — يبقى منها ما يُقرأ */
  .devices .sec-head { margin-block-end: 22px; }
  .rig-legend { gap: 10px 20px; font-size: 13px; }
}

/* ── الميلان ثلاثي الأبعاد ────────────────────────────────────────────────
   السكربت يكتب الدوران transform مضمّناً عبر GSAP (لا عبر متغيّرات CSS، لأن
   data-rise يترك transform مضمّناً يغلب أي قاعدة هنا). القاعدة نفسها في آخر
   قسم البطاقات حتى تغلب transition في .card و.rel و.branch.                  */

/* ── شريط الأرقام: جسر بين الداكن والفاتح ─────────────────────────────────── */
.stats {
  padding-block: 54px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.045));
  border-block-start: 1px solid var(--dark-line);
}
/* في الرئيسية الأرقام امتدادٌ لقسم الأجهزة فوقها: الخلفية نفسها بلا حدٍّ ولا
   تدرّج، فيُقرآن قسماً واحداً. والحشوة السفلية تزيد بعمق المنحنى الذي يعلو
   قسم الأنظمة تحتها (--edge)، وإلا غطّى المنحنى أسماء الأرقام.
   مقيَّد بالرئيسية: الشريط نفسه في about.php وهناك يبقى كما هو. */
.page-home-classic .stats {
  background: var(--dark-2); border-block-start: 0;
  padding-block: 20px calc(40px + var(--edge));
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.stats-grid li { padding: 14px 8px; }
.stats-grid .num {
  display: block; font-size: clamp(30px, 5.4vw, 50px); font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stats-grid span { color: var(--dark-dim); font-size: 15px; }

/* ── الأقسام الفاتحة ──────────────────────────────────────────────────────── */
.sec {
  position: relative; padding-block: clamp(64px, 9vw, 116px);
  background: var(--light); color: var(--ink);
}
/* أول قسم فاتح يبدأ بمنحنى يذيب الداكن فيه بدل خط قاطع */
.sec-systems::before {
  content: ''; position: absolute; inset-block-start: -58px; inset-inline: 0; block-size: 60px;
  background: var(--light); border-start-start-radius: 50% 100%; border-start-end-radius: 50% 100%;
}
.sec + .sec { padding-block-start: 0; }

.sec-head { text-align: center; margin-block-end: 46px; }
.h-sec { font-size: clamp(27px, 4.2vw, 41px); margin-block-end: 12px; }
.sec .lead, .foot .lead { color: var(--dim); max-inline-size: 60ch; margin-inline: auto; }
.foot .lead { color: var(--dark-dim); }
.sec-more { text-align: center; margin-block-start: 40px; margin-block-end: 0; }
.empty { text-align: center; color: var(--dim); padding-block: 40px; }

/* ── البطاقات ─────────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 22px; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

/* لوحة ألوان البطاقات: لون لكل بطاقة بحسب ترتيب عرضها لا بحسب معرّفها في
   القاعدة — المعرّفات مهاجَرة وغير متتابعة، فالقسمة عليها تكرّر لونين متجاورين. */
.cards > :nth-child(6n+1) { --c: var(--brand); }
.cards > :nth-child(6n+2) { --c: #2ad0c8; }
.cards > :nth-child(6n+3) { --c: #ff8a5b; }
.cards > :nth-child(6n+4) { --c: color-mix(in srgb, var(--brand) 70%, var(--ink)); }
.cards > :nth-child(6n+5) { --c: #ffb648; }
.cards > :nth-child(6n+6) { --c: #34c77b; }

.card {
  --c: var(--brand);
  position: relative;
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
/* شريط لون البطاقة في أعلاها: هو ما يجعل الشبكة تُقرأ كأنظمة مختلفة لا كقائمة */
.card::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: linear-gradient(90deg, var(--c), transparent);
  opacity: 0; transition: opacity .35s var(--ease); z-index: 3;
}
.card:hover::before { opacity: 1; }
.card > a { display: flex; flex-direction: column; block-size: 100%; }
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--c) 22%, rgba(17,24,50,.1));
  border-color: color-mix(in srgb, var(--c) 34%, transparent);
}

.card-media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-mist), #dfe8fb);
}
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }

/* البديل النائب حين لا تكون للكيان صورة أصلاً — لا صورة مكسورة أبداً */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(17,24,50,.05));
}
.ph::after {
  content: attr(data-letter);
  font-size: 58px; font-weight: 800; color: color-mix(in srgb, var(--c) 55%, transparent);
}

.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body b { font-size: 19px; font-weight: 700; }
/* سطران للاسم وثلاثةٌ للوصف: أطوال الأسماء تختلف، وبلا حدٍّ تتزحزح أسطرُ
   البطاقات عن بعضها فتُقرأ الشبكة مائلة. والحدّ الأدنى يساوي الأقصى فيبدأ
   الوصفُ في كل البطاقات عند السطر نفسه. */
.card-body b, .card-text {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.card-body b { -webkit-line-clamp: 2; min-block-size: calc(2 * 1.45em); }
.card-text { -webkit-line-clamp: 3; }
.card-body time { font-size: 13.5px; color: var(--dim); }
.card-text { color: var(--dim); font-size: 15.5px; line-height: 1.75; }
.more {
  margin-block-start: auto; padding-block-start: 10px; color: var(--c); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px;
}
.more::after { content: '←'; transition: transform .3s var(--ease); }
.card:hover .more::after { transform: translateX(-5px); }

.card-soft { background: linear-gradient(160deg, #fff, #f7f8fd); }

/* ── قسم التطبيقات: رفّ يمرّ أفقياً مع تمرير الصفحة ──────────────────────────
   القسم يُثبَّت في مكانه ويُزاح الرفّ داخله، فيشعر الزائر أنه يتصفّح التطبيقات
   لا أنه يمرّ بها. بلا سكربت يبقى الرفّ قابلاً للسحب باللمس — فيعمل كاملاً.    */
.apps {
  position: relative; background: var(--dark-2); color: var(--dark-ink);
  padding-block: clamp(64px, 9vw, 110px); overflow: hidden;
  border-block: 1px solid var(--dark-line);
}
.apps .h-sec { color: var(--dark-ink); }
.apps .lead  { color: var(--dark-dim); }

/* ── العملاء: جدار شعارات ساكن ───────────────────────────────────────────────
   بلا شريط دائر: الحركة التي لا تنتهي تسرق الانتباه ممّا حولها طول بقاء
   الزائر في الصفحة، ولا تُقرأ فيها كلمة إلا بمطاردتها بالمؤشّر. والظهور هنا
   تتابعٌ عند التمرير مرّةً واحدة عبر data-rise — حركةٌ تنتهي لا حركة تدور.  */
.sec-clients { background: var(--light-2); }
.sec-clients .sec-head { margin-block-end: 34px; }
.sec-clients .h-sec span { color: var(--brand); }

/* flex ملتفّ مركزيّ لا grid بـ auto-fit: عدد العملاء يأتي من القاعدة، وauto-fit
   يترك في الصفّ الأخير أعمدةً فارغة تُرى فجوات كلّما لم يقسم العددُ الصفَّ. */
/* نافذة الشريط: تقصّ ما خرج، وتُذيب طرفيه بقناعٍ متدرّج فلا ينتهي الشريط
   بحافّةٍ مقصوصة بل يتلاشى في بياض القسم. */
.logo-vp {
  /* الاتجاه على النافذة لا على الشريط: الشريط صندوقٌ بعرض محتواه، وموضعُه
     داخل أبيه يحدّده اتجاهُ **الأب**. فبقاء النافذة من اليمين لليسار كان
     يُرسي الشريط يمينَها ويجعل فائضه خارجها يساراً — فالإزاحة السالبة تسوقه
     بعيداً ولا يدخل شيءٌ من اليمين، وهو البياض الذي ظهر في الشكوى.        */
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}
.logo-wall {
  --logo-gap: 38px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px var(--logo-gap);
  list-style: none; margin: 0; padding: 0;
}
/* الشريط نفسه: صفٌّ لا يلتفّ، عرضه عرضُ محتواه، يزحف نصفَ عرضه ثم يعود إلى
   نقطة البداية — والنصف هو النسخة الثانية بالضبط، فالعودة غير مرئية.
   والنقص نصفَ الفجوة: نصفُ العرض يشمل فجوةً زائدة عند نقطة اللفّ، وبدون
   خصمها تُرى قفزةٌ بمقدارها في كل دورة. وهو محسوبٌ من المتغيّر لا رقماً
   مكتوباً: تغييرُ الفجوة وحدَها كان يكسر اللفّ بصمت.

   و`direction: ltr` على الشريط وحده هي إصلاح الانقطاع: الصفحة من اليمين
   لليسار، فالشريط بعرض المحتوى يُرسى يمينَ النافذة وفائضُه خارجها **يساراً**،
   والإزاحة السالبة تدفعه يساراً بعيداً — فلا يدخل شيءٌ من اليمين ويُرى بياضٌ
   في ذيله، وهو ما ظهر في الشكوى. وباتجاهٍ من اليسار لليمين يُرسى الشريط يساراً
   وفائضُه يميناً، فالخارج من اليسار يدخل من اليمين بلا انقطاع. والاتجاه يعود
   إلى الاسم وحده لأنه النصّ الوحيد في الخليّة.                            */
.logo-track {
  direction: ltr;
  flex-wrap: nowrap; justify-content: flex-start; inline-size: max-content;
  animation: logo-run 42s linear infinite;
  will-change: transform;
}
/* الاسم يأخذ اتجاهه من أول حرفٍ فيه: أسماء العملاء عربية حتى في الصفحة الإنجليزية */
.logo-track .logo-name { unicode-bidi: plaintext; }
.logo-vp:hover .logo-track { animation-play-state: paused; }
@keyframes logo-run {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--logo-gap) / 2)); }
}
/* بلا بطاقةٍ حول القرص: الإطار كان صندوقاً ثانياً حول صندوق، والقرصُ وحده
   على بياض القسم يُقرأ جدارَ شعارات لا شبكةَ بطاقات. والخليّة الآن مجرّد
   عمودٍ يجمع القرص واسمه، بلا خلفية ولا حدّ ولا حشوة.                       */
.logo-cell {
  flex: 0 1 188px; display: grid; justify-items: center; gap: 15px;
  padding: 0; background: none; border: 0;
}
/* قرصٌ أبيض بحلقةٍ وظلّ: خلفية القسم بيضاء (--light-2)، فالقرص الأبيض العاري
   لا يُرى إلا بحدّه وظلّه — الحلقة تحدّه والظلّ يرفعه عن السطح. والأبيض لا
   الرمادي لأن شعارات القاعدة صنفان: شفّافٌ حبرُه داكن، وخامٌ خلفيته بيضاء
   مصمتة إن سقط بناء النسخة المربّعة — والقصّ الدائري يبتلع مربّعه.

   والقطر 148: زيادة 42% عن اللوح المربّع السابق (104)، تعوّض ذهاب البطاقة
   فلا يخفّ الصفّ.                                                            */
.logo-plate {
  /* الحشوة 15 = 10% من القطر بالضبط: النسخة المخزَّنة محتواها 87.9% من ضلع
     المربّع (حقيقة 16)، والمربّع الداخل في دائرةٍ قطرها 148 ضلعُه 104.6 فقط.
     فصندوق الصورة 118 يجعل المحتوى 103.7 — دون الحدّ ببكسل، فلا رُكنَ يُقصّ. */
  display: block; inline-size: 148px; block-size: 148px;
  background: #fff; border-radius: 50%; overflow: hidden; padding: 15px;
  /* بلا ظلٍّ منسدل: القرص على سطحٍ فاتح، والظلُّ تحته كان يرفعه عن الصفحة
     فيُقرأ بطاقةً ثانية — وهو ما طُلب حذفه. يبقى حدٌّ شعريّ يرسم الدائرة
     على البياض، وهو حدٌّ لا ظلّ: بلا تمويهٍ ولا إزاحة.                    */
  box-shadow: 0 0 0 1px var(--light-line);
  transition: box-shadow .25s;
}
.logo-plate img {
  inline-size: 100%; block-size: 100%; object-fit: contain;
  transition: transform .25s;
}
/* الرفع على الصورة والحلقة على القرص، لا شيء منهما على الخليّة: الخليّة تحمل
   data-rise، وتويين GSAP يكتب transform مضمّناً بعد انتهائه فيغلب أي transform
   في CSS (حقيقة #11). */
.logo-cell:hover .logo-plate {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, var(--light-line));
}
.logo-cell:hover .logo-plate img { transform: translateY(-4px) scale(1.05); }
.logo-name { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); text-align: center; }

/* تحت 560 بكسل: قرصٌ أصغر وخليّةٌ مرنة، فيبقى اثنان في الصفّ بلا تجاوز أفقي */
@media (max-width: 560px) {
  /* الفجوة الأفقية بالمتغيّر لا بقيمةٍ مباشرة: إزاحةُ اللفّ تخصم نصفها،
     فتغييرها هنا وحدها كان يترك قفزةً بمقدار 10 بكسل في كل دورة. */
  .logo-wall { --logo-gap: 18px; gap: 22px var(--logo-gap); }
  .logo-cell { flex: 1 1 132px; gap: 11px; }
  .logo-plate { inline-size: 112px; block-size: 112px; padding: 11px; }
  .logo-name { font-size: 14px; }
}

/* ── لماذا الرائد: ثماني فوائد ثم كتلة النتائج ─────────────────────────────
   شبكة رباعية تنزل إلى ثنائية ثم واحدة بـ auto-fit: الفوائد ثمانٍ دائماً
   (نصّ ثابت لا عدد من قاعدة)، فالصفّ الأخير لا يُخلّف عموداً فارغاً أبداً.  */
.eyebrow {
  display: inline-block; margin-block-end: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 14px; border-radius: 999px;
  color: var(--brand); background: rgba(0,53,230,.1);
  border: 1px solid rgba(0,53,230,.2);
}
/* القسم أبيض، وتحته نقشُ المشربيّة نفسه الذي في قسم الأجهزة بحبرٍ داكن وشفافية
   4% — هكذا يحمل الفاتحُ توقيعَ الداكن فيُقرأ من الموقع نفسه لا قالباً عامّاً.
   والنقش تحت المحتوى بـ z-index سالب داخل سياقٍ معزول، لا فوقه. */
.sec-why { background: var(--light-2); isolation: isolate; }
.sec-why::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23111832' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M25.8 0 H62.2 L88 25.8 V62.2 L62.2 88 H25.8 L0 62.2 V25.8 Z'/%3E%3Cpath d='M44 30.5 L57.5 44 L44 57.5 L30.5 44 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
  opacity: .04;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(90% 60% at 50% 30%, #000 20%, transparent 75%);
}
/* الحدّ مع رفّ التطبيقات فوقه منحنٍ كسائر حدود الفاتح/الداكن في الرئيسية —
   بالأسلوب نفسه الذي في .sec-systems::before، لا بمحدِّد أخٍ: الرفّ مثبَّت
   بـ ScrollTrigger فيُغلَّف بـ pin-spacer ولا يعود أخاً مباشراً لهذا القسم. */
.page-home-classic .sec-why::after {
  content: ''; position: absolute; inset-block-start: -58px; inset-inline: 0; block-size: 60px;
  background: var(--light-2); border-start-start-radius: 50% 100%; border-start-end-radius: 50% 100%;
  pointer-events: none;
}
/* الكلمة المميّزة في العنوان بتدرّج العلامة كعنوان البطل، لا بلونٍ مسطّح */
.sec-why .h-sec span, .sec-clients .h-sec span {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.whys {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px; list-style: none; margin: 0; padding: 0;
}
.why {
  position: relative;
  display: grid; align-content: start; gap: 10px;
  padding: 28px 24px; border-radius: var(--r-lg);
  background: var(--light-2); border: 1px solid var(--light-line);
  box-shadow: 0 1px 2px rgba(17,24,50,.04);
  transition: box-shadow .3s var(--ease);
}
.why:hover { box-shadow: 0 22px 46px rgba(0,35,150,.12); }
.why b { font-size: 17.5px; color: var(--ink); }
.why-text { font-size: 14.5px; line-height: 1.75; color: var(--dim); }
/* الأيقونة بتدرّج العلامة في كل البطاقات لا بألوانٍ باستيل دوّارة: ثماني فوائد
   لمنتجٍ واحد، والألوان الأربعة كانت تُقرأ قالباً عامّاً لا هويّة الرائد. */
.why-ico {
  display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  border-radius: 15px; margin-block-end: 6px;
  color: #fff; font-size: 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(0,53,230,.28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why:hover .why-ico { transform: translateY(-3px) rotate(-6deg); box-shadow: 0 14px 28px rgba(0,53,230,.38); }

/* كتلة النتائج: لوحٌ داكن واحد داخل القسم الفاتح (حقيقة 14)، والنتائج الثلاث
   أرقامٌ كبيرة بتدرّج العلامة بلا صناديق — لغةُ شريط الأرقام أعلى الصفحة. */
.outcomes {
  position: relative; overflow: hidden;
  margin-block-start: 34px; padding: clamp(34px, 4.4vw, 52px) clamp(22px, 4vw, 52px);
  border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(145deg, #131a36, var(--dark) 64%);
  border: 1px solid var(--dark-line);
  box-shadow: 0 30px 70px rgba(7,11,24,.3);
}
/* هالةُ العلامة في رأس اللوح: الضوء نفسه الذي خلف البطل */
.outcomes::before {
  content: ''; position: absolute; inset-block-start: -60%; inset-inline-start: 50%;
  inline-size: 70%; aspect-ratio: 1; translate: -50% 0; pointer-events: none;
  background: radial-gradient(circle, rgba(0,53,230,.28), transparent 62%);
  filter: blur(20px);
}
.outcomes > * { position: relative; }
.outcomes h3 { font-size: clamp(22px, 3vw, 30px); color: var(--dark-ink); margin: 0 0 10px; }
.outcomes-lead { color: var(--dark-dim); margin: 0 auto 34px; max-inline-size: 60ch; }
.outcome-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0; list-style: none; margin: 0; padding: 0; text-align: start;
}
/* فاصلٌ شعريّ بين النتائج لا صندوقٌ حول كلٍّ منها */
.outcome-list li {
  display: grid; align-content: start; gap: 8px; padding: 6px clamp(18px, 2.6vw, 34px);
  border-inline-start: 1px solid var(--dark-line);
}
.outcome-list li:first-child { border-inline-start: 0; }
.outcome-list b { color: var(--dark-ink); font-size: 17.5px; }
.outcome-list span { color: var(--dark-dim); font-size: 14.5px; line-height: 1.75; }
.outcome-list .outcome-n {
  font-size: clamp(40px, 5vw, 58px); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ── شريط التدريب ─────────────────────────────────────────────────────────── */
.sec-train { background: var(--light-2); }
.train {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap;
  padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3.4vw, 40px);
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, #101731, var(--dark) 70%);
  border: 1px solid var(--dark-line);
  box-shadow: 0 26px 60px rgba(7,11,24,.28);
}
.train-ico {
  display: grid; place-items: center; inline-size: 62px; block-size: 62px; flex: none;
  border-radius: 20px; font-size: 24px; color: var(--brand-2);
  background: rgba(42,208,200,.12); border: 1px solid rgba(42,208,200,.24);
}
.train-txt { display: grid; gap: 6px; flex: 1 1 320px; }
/* عنوان القسم h2 (كان <b> فعدّه مدقّق W3C قسماً بلا عنوان)، بمظهر <b> السابق نفسه */
.train-txt .train-h {
  margin: 0; font-size: clamp(19px, 2.6vw, 25px); color: var(--dark-ink);
  font-weight: 700; line-height: inherit; letter-spacing: normal;
}
.train-txt > span:last-child { color: var(--dark-dim); font-size: 15px; line-height: 1.7; }
.eyebrow-dark {
  justify-self: start; margin-block-end: 2px;
  color: var(--brand-2); background: rgba(42,208,200,.12); border-color: rgba(42,208,200,.26);
}
.btn-light { background: var(--light-2); color: var(--dark); border-color: transparent; font-weight: 700; }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.34); }

/* ═══ الرئيسية: إيقاع الفاتح والداكن ═══════════════════════════════════════════
   بعد رفّ التطبيقات تتناوب الأقسام: فاتحٌ (لماذا، العملاء) ← داكن (القطاعات)
   ← فاتح (الخدمات) ← داكن (التدريب) ← فاتح (الأخبار، الأسئلة) ← التذييل.
   القسم الداكن `.sec-night` شفّاف لا مصمت: الجسم داكنٌ أصلاً، والشفافية تُظهر
   الهالة والشبكة الثابتتين خلفه كما في البطل — فيُقرأ امتداداً له.

   والحدّ بين الفاتح والداكن منحنٍ لا مستقيم: القسمُ الفاتح نفسه تُدوَّر زاويتاه
   المجاورتان للداكن بقطعٍ ناقص عرضُه نصف القسم وارتفاعه 64 بكسلاً، فيكشف
   الدورانُ الخلفيةَ الداكنة. لا عنصر زائف ولا لونٌ يُطابَق — أيُّ لونٍ خلفه
   يظهر كما هو، والهالة معه. */
.page-home-classic .sec-night { background: transparent; color: var(--dark-ink); isolation: isolate; }
/* نقش المشربيّة الأبيض من قسم الأجهزة وضوءٌ بلون العلامة في وسطه: الهالة الثابتة
   تكون في رأس الشاشة غالباً فلا تبلغ هذين القسمين، فيبدوان أسودَ مسطّحاً بدونهما. */
.page-home-classic .sec-night::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 55%, rgba(0,53,230,.13), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M25.8 0 H62.2 L88 25.8 V62.2 L62.2 88 H25.8 L0 62.2 V25.8 Z'/%3E%3Cpath d='M44 30.5 L57.5 44 L44 57.5 L30.5 44 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 88px 88px;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 85%);
}
/* `.sec + .sec` يُسقط الحشوة العلوية بين قسمين فاتحين متتاليين؛ عند الانتقال من
   لونٍ إلى لون تعود الحشوة، وإلا اصطدم المحتوى بالمنحنى. */
.page-home-classic .sec-night,
.page-home-classic .sec-night + .sec { padding-block-start: clamp(76px, 9vw, 120px); }
/* الحدّ منحنٍ من جهةٍ مستقيمٌ من الأخرى، والحدّ الذي يليه بعكسه: زاويةٌ واحدة
   بقطعٍ ناقص عرضُه القسمُ كلّه (100%) وعمقه --edge، والمقابلة صفر. فينحدر الحدّ
   من طرفٍ إلى طرف بدل قوسٍ متماثل. والتناوب بالترتيب من الأعلى — «يمين» هو
   البداية في RTL:
     1 الأرقام←الأنظمة يمين · 2 الرفّ←لماذا يسار · 3 ←القطاعات يمين ·
     4 القطاعات← يسار · 5 ←التدريب يمين · 6 التدريب← يسار · 7 ←التذييل يمين.
   المحدِّدات بأسماء القسمين الداكنين لا بـ `.sec-night` عامّةً: الجهة تتبع موضع
   الحدّ في الصفحة، والصنف العامّ لا يعرف أيَّ حدٍّ هو. */
.page-home-classic { --edge: 90px; }
.page-home-classic .sec:has(+ .sec-sectors),
.page-home-classic .sec:has(+ .sec-train) { border-end-start-radius: 100% var(--edge); }
.page-home-classic .sec-sectors + .sec,
.page-home-classic .sec-train + .sec { border-start-end-radius: 100% var(--edge); }
/* آخر قسمٍ فاتح ينحني فوق التذييل: التذييل يصعد تحته بمقدار المنحنى، والمحتوى
   الرئيسي فوقه في الترتيب — وإلا ظهر خلف الزاوية لونُ الجسم لا لونُ التذييل. */
.page-home-classic main { z-index: 2; }
.page-home-classic main > .sec:last-of-type { border-end-start-radius: 100% var(--edge); }
.page-home-classic .foot { margin-block-start: calc(-1 * var(--edge)); padding-block-start: calc(clamp(56px, 8vw, 96px) + var(--edge)); }
/* الحدّان المرسومان بعنصرٍ زائف يعلو القسم الفاتح: الأنظمة يمين، ولماذا يسار.
   مقيَّدان بالرئيسية: `.sec-systems::before` نفسه يرسم قوس صفحة الأنظمة. */
.page-home-classic .sec-systems::before,
.page-home-classic .sec-why::after {
  inset-block-start: calc(2px - var(--edge)); block-size: var(--edge);
  border-radius: 0;
}
.page-home-classic .sec-systems::before { border-start-start-radius: 100% 100%; }
.page-home-classic .sec-why::after      { border-start-end-radius: 100% 100%; }

/* نصوص الداكن: `.sec` يكتب ألوان الفاتح على العنوان والوصف والزرّ الشبحيّ */
.sec-night .lead { color: var(--dark-dim); }
.sec-night .btn-ghost { border-color: rgba(255,255,255,.22); color: var(--dark-ink); background: rgba(255,255,255,.04); }
.sec-night .btn-ghost:hover { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.1); }

/* ── القطاعات: رقائق زجاجية على الداكن ── */
.sec-night .chip {
  background: rgba(255,255,255,.045); border-color: var(--dark-line); color: var(--dark-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sec-night .chip:hover {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent), 0 14px 30px color-mix(in srgb, var(--c) 26%, transparent);
}
.sec-night .chip.is-special { border-color: color-mix(in srgb, var(--c) 55%, transparent); }

/* ── التدريب: شريطٌ بعرض الصفحة لا صندوقٌ داخل الأبيض ──
   مقيَّد بالصنفين معاً: `.sec-train` مستعملٌ في system.php أيضاً (صندوقاً داكناً
   على فاتح)، وهناك يبقى كما هو. */
.sec-night.sec-train { padding-block-end: clamp(76px, 9vw, 120px); }
.sec-night.sec-train .train {
  position: relative; background: none; border: 0; box-shadow: none;
  padding: 0; isolation: isolate;
}
/* ضوءٌ بلون العلامة خلف الأيقونة، يربط الشريط بالهالة العامّة */
.sec-night.sec-train .train::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset-block: -90px; inset-inline-start: -60px; inline-size: 420px;
  background: radial-gradient(closest-side, rgba(42,208,200,.16), transparent);
}
/* على الشاشة الضيّقة كان الضوء (420px يبدأ خارج الشريط بـ60px) يتجاوز عرض الشاشة
   فيوسّع الصفحة أفقياً — شريطٌ جانبي داكن في الهاتف رغم overflow-x على body */
@media (max-width: 640px) {
  .sec-night.sec-train .train::before { inset-inline: 0; inline-size: auto; }
}
.sec-night.sec-train .train-ico {
  inline-size: 72px; block-size: 72px; border-radius: 22px; font-size: 28px; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); border: 0;
  box-shadow: 0 16px 36px rgba(42,208,200,.3);
}
.sec-night.sec-train .train-txt .train-h { font-size: clamp(22px, 3vw, 32px); }

/* ── الأخبار: البطاقة البيضاء بحدٍّ متدرّج عند التحويم ── */
.sec-news .card { box-shadow: 0 1px 2px rgba(17,24,50,.04); }
.sec-news .card:hover {
  border-color: var(--light-line); box-shadow: 0 24px 52px rgba(0,35,150,.13);
}
.sec-news .more { color: var(--brand); }
/* الصورة تنتهي بتدرّجٍ داكن خفيف فيستقرّ عليها التاريخ شارةً */
.sec-news .card-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,11,24,.42), transparent 48%);
}
.sec-news .card-body time {
  align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--brand);
  padding: 3px 12px; border-radius: 999px;
  background: rgba(0,53,230,.08); border: 1px solid rgba(0,53,230,.16);
}

/* ── الخدمات: بطاقة بمشهدٍ متحرّك يشرح الخدمة ─────────────────────────────────
   المكوّن partials/service-cards.php للرئيسية وصفحة الخدمات معاً، وتنسيقه كلّه
   على .svc-* لا على صنف القسم (صفحة الخدمات قسمها sec-systems).
   قاعدتان تحكمان المشاهد:
   · الحركة على أبناء .svc-scene وحدهم؛ li تحمل data-rise (حقيقة 11).
   · الوضع الأساسي لكل عنصر هو المشهد المكتمل، وإطارا 0% و100% مطابقان له —
     فالمشهد الموقوف (بلا سكربت، أو خارج الشاشة، أو مع تقليل الحركة) مقروءٌ تامّ.
   والتشغيل معلّق على .is-live يضيفها aurora.js ما دام المشهد على الشاشة.      */
.svc-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.svc-grid > :nth-child(3n+1) { --c: var(--brand); }
.svc-grid > :nth-child(3n+2) { --c: #2ad0c8; }
.svc-grid > :nth-child(3n+3) { --c: #ff8a5b; }

.svc-card {
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--light-line);
  box-shadow: 0 1px 2px rgba(17,24,50,.04); overflow: hidden;
  transition: box-shadow .35s var(--ease);
}
.svc-card:hover { box-shadow: 0 26px 56px rgba(0,35,150,.14); }
.svc-card > a { position: relative; z-index: 1; display: flex; flex-direction: column; block-size: 100%; }

.svc-scene {
  position: relative; display: block; aspect-ratio: 16 / 9; max-block-size: 220px; overflow: hidden;
  margin: 10px 10px 0; border-radius: calc(var(--r-lg) - 8px);
  background:
    radial-gradient(120% 90% at 85% 8%, color-mix(in srgb, var(--c) 40%, transparent), transparent 60%),
    linear-gradient(150deg, #161f47, #0b1022);
  transition: box-shadow .35s var(--ease);
}
.svc-scene::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px) 0 0 / 14px 14px;
}
.svc-card:hover .svc-scene {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent),
              0 16px 34px color-mix(in srgb, var(--c) 26%, transparent);
}
.svc-scene :where(span, i, em, s) { display: block; }

.svc-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 22px 24px; }
.svc-ico {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px; padding: 10px;
  border-radius: 18px; background: #fff; border: 1px solid var(--light-line);
  box-shadow: 0 10px 24px rgba(17,24,50,.1); margin-block-end: 4px;
}
.svc-ico img { inline-size: 100%; block-size: 100%; object-fit: contain; }
/* مع المشهد تتداخل الشارة مع حافّته السفلى فتربط الرسم بالخدمة */
.svc-scene + .svc-body .svc-ico { position: relative; margin-block-start: -48px; }
.svc-body b { font-size: 19px; font-weight: 700; color: var(--ink); }
.svc-text {
  color: var(--dim); font-size: 15px; line-height: 1.75;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.svc-more {
  margin-block-start: auto; padding-block-start: 10px; color: var(--brand); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px;
}
.svc-more::after { content: '←'; transition: transform .3s var(--ease); }
.svc-card:hover .svc-more::after { transform: translateX(-5px); }

/* المشاهد بإحداثيات فيزيائية (left/right) عمداً: الإزاحات بـ translate فيزيائية
   أيضاً، واتجاه الرسم (من الجهاز إلى السحابة) لا ينقلب مع لغة الصفحة. */

/* · المنيو: هاتفٌ عليه رمز، يمرّ عليه خطّ المسح، فتنزلق أصناف القائمة */
.svc-phone {
  position: absolute; left: 13%; top: 13%; inline-size: 74px; block-size: 140px;
  border: 2px solid rgba(255,255,255,.2); border-radius: 16px; background: #0f1733;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.svc-qr {
  position: absolute; left: 10px; right: 10px; top: 22px; aspect-ratio: 1; border-radius: 6px;
  background:
    conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 12px 12px,
    rgba(255,255,255,.08);
  opacity: .85; animation: svc-qr 6s var(--ease) infinite;
}
.svc-scan {
  position: absolute; left: 6px; right: 6px; top: 20px; block-size: 2px; border-radius: 2px;
  background: var(--brand-2); box-shadow: 0 0 12px 2px var(--brand-2);
  opacity: 0; animation: svc-scan 6s ease-in-out infinite;
}
.svc-menu { position: absolute; right: 9%; top: 16%; inline-size: 48%; display: grid; gap: 9px; }
.svc-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  animation: svc-row 6s var(--ease) infinite; animation-delay: calc(var(--i) * .22s);
}
.svc-row i { inline-size: 24px; block-size: 24px; flex: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--c), var(--brand-2)); }
.svc-row em { flex: 1; block-size: 6px; border-radius: 3px; background: rgba(255,255,255,.32); }
.svc-row s { inline-size: 22px; block-size: 9px; flex: none; border-radius: 5px; background: var(--brand-2); }

@keyframes svc-scan {
  0%, 46% { opacity: 0; transform: translateY(0); }
  50%     { opacity: 1; transform: translateY(0); }
  70%     { opacity: 1; transform: translateY(54px); }
  74%, 100% { opacity: 0; transform: translateY(54px); }
}
@keyframes svc-qr {
  0%, 52%, 76%, 100% { box-shadow: 0 0 0 0 rgba(42,208,200,0); }
  66% { box-shadow: 0 0 0 4px rgba(42,208,200,.35); }
}
@keyframes svc-row {
  0%, 40%   { opacity: 1; transform: none; }
  46%, 74%  { opacity: 0; transform: translateX(-24px); }
  84%, 100% { opacity: 1; transform: none; }
}

/* · النسخ الاحتياطي: بياناتٌ تصعد من الجهاز إلى السحابة، فتمتلئ الحلقة وتُختَم */
.svc-pc {
  position: absolute; left: 11%; bottom: 22%; inline-size: 96px; block-size: 66px;
  display: grid; align-content: center; gap: 6px; padding: 10px;
  border: 2px solid rgba(255,255,255,.2); border-radius: 10px; background: #0f1733;
}
.svc-pc::after {
  content: ''; position: absolute; left: 50%; bottom: -14px; inline-size: 34px; block-size: 12px;
  margin-inline-start: -17px; border-radius: 0 0 6px 6px; background: rgba(255,255,255,.16);
}
.svc-pc i { block-size: 6px; border-radius: 3px; background: rgba(255,255,255,.3); }
.svc-pc i:nth-child(2) { inline-size: 70%; }
.svc-pc i:nth-child(3) { inline-size: 45%; background: var(--c); }
.svc-path { position: absolute; left: 37%; bottom: 40%; inline-size: 22%; block-size: 26%; }
.svc-bit {
  position: absolute; inline-size: 11px; block-size: 11px; border-radius: 3px;
  left: calc(var(--i) * 40%); bottom: calc(var(--i) * 40%);
  background: var(--brand-2); box-shadow: 0 0 10px var(--brand-2);
  animation: svc-bit 2s linear infinite;
}
.svc-bit:nth-child(2) { background: var(--c); box-shadow: 0 0 10px var(--c); }
.svc-cloud {
  position: absolute; right: 11%; top: 20%; inline-size: 112px; block-size: 64px;
  border-radius: 36px; background: #0b2a7a;
}
.svc-cloud::before {
  content: ''; position: absolute; left: 20px; top: -28px; inline-size: 58px; block-size: 58px;
  border-radius: 50%; background: #0b2a7a;
}
.svc-ring {
  position: absolute; left: 50%; top: 50%; inline-size: 44px; block-size: 44px;
  margin: -26px 0 0 -22px; fill: none; stroke-width: 3.5;
}
.svc-ring circle { stroke: rgba(255,255,255,.16); }
.svc-ring .svc-ring-fill {
  /* 100.53 = 2π×16 المحيط الفعلي: pathLength="100" يرفضه مدقّق W3C على circle */
  stroke: var(--brand-2); stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: center; transform-box: fill-box;
  animation: svc-fill 6s var(--ease) infinite;
}
.svc-ok {
  position: absolute; left: 50%; top: 50%; inline-size: 20px; margin: -13px 0 0 -10px;
  text-align: center; color: #fff; font-size: 14px; line-height: 20px;
  animation: svc-ok 6s var(--ease) infinite;
}
@keyframes svc-bit {
  0%     { transform: translate(0, 0); opacity: 1; }
  50%    { transform: translate(30px, -24px); opacity: 0; }
  50.01% { transform: translate(-30px, 24px); opacity: 0; }
  100%   { transform: translate(0, 0); opacity: 1; }
}
@keyframes svc-fill {
  0%, 8%  { stroke-dashoffset: 0; opacity: 1; }
  12%     { stroke-dashoffset: 0; opacity: 0; }
  13%     { stroke-dashoffset: 100.53; opacity: 0; }
  16%     { stroke-dashoffset: 100.53; opacity: 1; }
  78%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes svc-ok {
  0%, 8%    { opacity: 1; transform: scale(1); }
  12%, 78%  { opacity: 0; transform: scale(.4); }
  86%       { opacity: 1; transform: scale(1.35); }
  92%, 100% { opacity: 1; transform: scale(1); }
}

/* · الكابتن: تُختار طاولةٌ على التابلت، فيطير الطلب إلى الطابعة ويخرج الإيصال */
.svc-tab {
  position: absolute; left: 7%; top: 15%; inline-size: 44%; block-size: 66%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px;
  border: 2px solid rgba(255,255,255,.2); border-radius: 14px; background: #0f1733;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.svc-table { border-radius: 8px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.svc-table.is-pick {
  border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 55%, transparent);
  animation: svc-pick 7s var(--ease) infinite;
}
.svc-ticket {
  position: absolute; left: 50%; top: 32%; inline-size: 46px; block-size: 32px;
  display: grid; align-content: center; gap: 5px; padding: 7px;
  border-radius: 6px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.35);
  animation: svc-fly 7s var(--ease) infinite;
}
.svc-ticket i { block-size: 4px; border-radius: 2px; background: #c9d8f5; }
.svc-ticket i:nth-child(2) { inline-size: 60%; background: var(--c); }
.svc-printer {
  position: absolute; right: 9%; top: 24%; inline-size: 80px; block-size: 42px;
  border-radius: 10px; background: #0b2a7a; border: 1px solid rgba(255,255,255,.14);
}
.svc-printer::before {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; block-size: 3px;
  border-radius: 2px; background: rgba(0,0,0,.45);
}
.svc-receipt {
  position: absolute; left: 13px; right: 13px; top: calc(100% - 7px); block-size: 74px;
  display: grid; align-content: start; gap: 6px; padding: 10px 8px;
  border-radius: 0 0 4px 4px; background: #fff; transform-origin: top;
  animation: svc-print 7s var(--ease) infinite;
}
.svc-receipt i { block-size: 4px; border-radius: 2px; background: #c9d8f5; }
.svc-receipt i:nth-child(2) { inline-size: 70%; }
.svc-receipt i:nth-child(3) { inline-size: 45%; background: var(--c); }
@keyframes svc-pick {
  0%, 68%, 82%, 100% { transform: none; }
  74% { transform: scale(1.18); }
}
@keyframes svc-fly {
  0%        { transform: none; opacity: 1; }
  10%       { transform: translate(52px, 10px) scale(.55); opacity: 0; }
  11%, 78%  { transform: translate(-50px, 6px) scale(.5); opacity: 0; }
  86%       { transform: translate(-50px, 6px) scale(1); opacity: 1; }
  100%      { transform: none; opacity: 1; }
}
@keyframes svc-print {
  0%, 5%    { transform: scaleY(1); opacity: 1; }
  8%        { transform: scaleY(1) translateY(10px); opacity: 0; }
  9%        { transform: scaleY(0); opacity: 1; }
  12%       { transform: scaleY(0); }
  36%, 100% { transform: scaleY(1); opacity: 1; }
}

/* الإيقاف والتشغيل: خصوصيةٌ أعلى من قواعد الحركة أعلاه عمداً، فاختصار animation
   فيها لا يعيد play-state إلى running. */
.svc-card .svc-scene *, .svc-card .svc-scene *::before { animation-play-state: paused; }
.svc-card .svc-scene.is-live *, .svc-card .svc-scene.is-live *::before { animation-play-state: running; }

/* ── الأسئلة: عمودان — الرأس والدعوة ثابتان، والأسئلة بجانبهما ── */
.nt-faq { display: grid; gap: 34px; }
.nt-faq-head { margin-block-end: 0; }
.nt-faq-head .lead { margin-block-end: 24px; }
@media (min-width: 900px) {
  .nt-faq { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
  .nt-faq-head { text-align: start; position: sticky; inset-block-start: calc(var(--nav-h) + 30px); }
  .nt-faq-head .lead { margin-inline: 0; }
}
/* margin-inline: 0 إلزامي: `.faq` الأصلية توسَّط بهامشٍ تلقائي، والهامش التلقائي
   داخل خليّة شبكة يُقلّص العنصر إلى عرض محتواه (272 بكسلاً من 660). */
.sec-faq .faq { max-inline-size: none; margin-inline: 0; gap: 12px; }
.sec-faq .faq details {
  padding: 4px 22px; border-radius: var(--r-lg); background: var(--light-2);
  box-shadow: 0 1px 2px rgba(17,24,50,.04);
  transition: border-color .25s, box-shadow .3s var(--ease);
}
.sec-faq .faq details:hover { box-shadow: 0 14px 34px rgba(0,35,150,.09); }
.sec-faq .faq details[open] { border-color: rgba(0,53,230,.4); box-shadow: 0 18px 40px rgba(0,35,150,.12); }
.sec-faq .faq summary { padding-block: 18px; font-size: 16.5px; }
/* علامة الفتح قرصٌ بتدرّج العلامة لا رمزٌ عارٍ */
.sec-faq .faq summary::after {
  display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
  font-size: 19px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.sec-faq .faq p { padding-block-end: 18px; line-height: 1.85; }

/* ── الحدّ المتدرّج: حلقةٌ بعرض بكسل تظهر عند التحويم ──────────────────────
   عنصرٌ زائف مقنَّع لا border-image: الأخير يُلغي border-radius ولا يقبل
   انتقالاً. والقناع يُبقي الحشوة وحدها — بكسلاً بين حدّي الصندوقين. وهو
   يحلّ محلّ شريط `.card::before` العلوي في البطاقات التي تحمله. */
.nt-ring::before {
  content: ''; position: absolute; z-index: 3; inset: 0; block-size: auto;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s var(--ease);
}
.nt-ring:hover::before { opacity: 1; }

/* ── ضوء المؤشّر: بقعةٌ خافتة تتبع المؤشّر داخل البطاقة ────────────────────
   الموضع من --mx/--my يكتبهما aurora.js، وقيمتهما الافتراضية الوسط؛ والبقعة
   لا تظهر إلا عند التحويم — فبلا سكربت ومع تقليل الحركة لا أثر لها أصلاً. */
.nt-spot { position: relative; }
.nt-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(0,53,230,.09), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.nt-spot:hover::after { opacity: 1; }
.foot-form.nt-spot::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0,53,230,.12), transparent 62%);
}

@media (max-width: 720px) {
  /* النتائج مكدّسة: الفاصل يصير أفقياً فوق كلٍّ منها */
  .outcome-list { gap: 22px; }
  .outcome-list li { border-inline-start: 0; border-block-start: 1px solid var(--dark-line); padding: 22px 0 0; }
  .outcome-list li:first-child { border-block-start: 0; padding-block-start: 0; }
  /* المنحنى أقلّ عمقاً على الهاتف: 90 بكسلاً في عرض 500 تأكل الحشوة */
  .page-home-classic { --edge: 48px; }
}

@media (max-width: 560px) {
  .why { padding: 22px 18px; }
  .outcomes { padding: 30px 18px; }
  /* عمودٌ مركزيّ لا صفّ ملتفّ: الأيقونة في الصفّ تبقى بجانب نصٍّ موسَّط
     فيميل الثقل البصري إلى جهة واحدة. */
  .train { flex-direction: column; text-align: center; justify-content: center; }
  .train-txt { justify-items: center; flex: 0 1 auto; }
  .eyebrow-dark { justify-self: center; }
}

/* ── رفّ التطبيقات بطراز apple.com ──────────────────────────────────────────
   تمريرٌ أفقي أصلي (سحب، لمس، لوحة لمس، Tab) يقف عند حافة كل بطاقة، وزرّان
   تحته. كان الرفّ يُزاح بتمرير الصفحة داخل قسمٍ مثبَّت — فطُلب بدلَه هذا.
   الحشو يحاذي أول بطاقة مع عنوان القسم: الصيغة نفسها التي تضع .wrap (عرضٌ
   أقصى --wrap وحشو --gut)، و100% لا 100vw لأن الأخير يضمّ شريط التمرير. */
.rail-vp {
  --rail-pad: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  margin-block-start: 44px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding-inline: var(--rail-pad);
  /* مساحة للارتفاع والظلّ عند التحويم: overflow-x يقصّ المحور الآخر أيضاً */
  padding-block: 14px 26px;
}
.rail-vp::-webkit-scrollbar { display: none; }

.rail { display: flex; gap: 22px; padding-inline: var(--rail-pad); inline-size: max-content; }

/* بطاقةٌ مسطّحة مستطيلة: الميلان السابق (rotateY) جعل طرفاً أقصر من طرف،
   ويتبدّل عند التحويم والتركيز — فتبدو الحواف «تنقص». الآن التحويم رفعٌ
   وظلّ فقط، والصورة تكبر داخل حوافٍ ثابتة.
   بلا إطارِ بطاقةٍ حول اللقطة: صور التطبيقات مجسّمات فيها هاتفٌ مرسوم بإطاره
   (حقيقة 32)، فبطاقةٌ لها حدٌّ وخلفية حولها تعطي إطاراً داخل إطار. */
.app { inline-size: 260px; flex: none; scroll-snap-align: start; transition: transform .45s var(--ease); }
.app a { display: block; border-radius: var(--r-lg); }
.app a:focus-visible { outline: 3px solid var(--brand-soft, #fff); outline-offset: 5px; }
.app:hover, .app:focus-within { transform: translateY(-6px); }
.app-shot {
  display: block; aspect-ratio: 230 / 498; overflow: hidden;
  /* clip-path مع overflow: Safari يسرّب الزوايا عند تحجيم الابن بـ overflow وحده */
  clip-path: inset(0 round var(--r-lg)); isolation: isolate;
  border-radius: var(--r-lg); background: #0b1224;
  box-shadow: 0 20px 44px rgba(0,0,0,.42);
  transition: box-shadow .4s;
}
.app:hover .app-shot, .app:focus-within .app-shot { box-shadow: 0 30px 62px rgba(0,53,230,.34); }
.app-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.app:hover .app-shot img, .app:focus-within .app-shot img { transform: scale(1.04); }

/* الزرّان: في نهاية سطر المحتوى كما في apple.com، ومعطّلان عند الطرفين */
.rail-nav { display: flex; justify-content: flex-end; gap: 12px; margin-block-start: 4px; }
.rail-nav[hidden] { display: none; }
.rail-btn {
  inline-size: 44px; block-size: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 15px;
  border: 1px solid var(--dark-line); background: rgba(255,255,255,.08); color: var(--dark-ink);
  transition: background .25s, opacity .25s;
}
.rail-btn:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.rail-btn:focus-visible { outline: 3px solid var(--brand-soft, #fff); outline-offset: 3px; }
.rail-btn:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .rail-btn i { transform: scaleX(-1); }
.app-name { display: block; padding: 15px 16px 18px; font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.app-name small { display: block; color: var(--dark-dim); font-size: 13px; font-weight: 500; margin-block-start: 3px; }

.stores { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 34px; }
.stores img { block-size: 44px; inline-size: auto; }
.stores a { transition: transform .3s var(--ease), opacity .3s; opacity: .9; }
.stores a:hover { transform: translateY(-3px); opacity: 1; }

/* ═══ عرض الأنظمة: لوح الرائد ثم بلاطات البقية (partials/systems-showcase.php) ══
   المكوّن نفسه في الرئيسية وصفحة الأنظمة. اللوح داكنٌ داخل القسم الفاتح (كلوح
   النتائج)، وفيه في صفحة الأنظمة «مسرح»: شاشةٌ وهاتفان يحرّكهم sxStage.
   ولا حالةَ ابتدائية مخفيّة أو مائلة هنا: GSAP يضعها بنفسه تحت الخروج المبكّر،
   فمع تقليل الحركة أو بلا سكربت يبقى كل شيء ظاهراً ومستوياً (حقيقة 13.5). */
.sx-flag {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(30px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl); color: var(--dark-ink);
  background: linear-gradient(145deg, #141c3a, var(--dark) 66%);
  border: 1px solid var(--dark-line);
  box-shadow: 0 34px 80px rgba(7,11,24,.32);
}
/* هالة العلامة خلف المسرح، ونقش المشربيّة خافتاً — لغة قسم الأجهزة نفسها */
.sx-flag::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 75% at 22% 50%, rgba(0,53,230,.24), transparent 70%),
    radial-gradient(40% 50% at 90% 0%, rgba(42,208,200,.12), transparent 70%);
}
@media (min-width: 980px) {
  .sx-flag.has-stage { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  /* بلا مسرح (الرئيسية): النصّ في عمودين — الهويّة والوصف، ثم المزايا والأزرار */
  .sx-flag:not(.has-stage) .sx-flag-txt {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 70px);
    grid-template-areas: "head feats" "title feats" "desc cta";
  }
  .sx-flag:not(.has-stage) .sx-flag-head { grid-area: head; }
  .sx-flag:not(.has-stage) h3            { grid-area: title; }
  .sx-flag:not(.has-stage) p             { grid-area: desc; }
  .sx-flag:not(.has-stage) .sx-feats     { grid-area: feats; align-self: center; grid-template-columns: 1fr; }
  .sx-flag:not(.has-stage) .sx-flag-cta  { grid-area: cta; align-self: end; }
  /* بلا مزايا (رائد تلقائي أو بديل): لا عمود فارغ — الأزرار وحدها في الثاني */
  .sx-flag.no-feats:not(.has-stage) .sx-flag-txt { grid-template-areas: "head cta" "title cta" "desc cta"; }
  .sx-flag.no-feats:not(.has-stage) .sx-flag-cta { align-self: center; }
}

.sx-flag-txt { display: grid; gap: 16px; align-content: center; }
.sx-flag-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sx-flag-head .eyebrow { margin: 0; }
.sx-flag-logo {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px; flex: none;
  border-radius: 18px; padding: 9px; background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.sx-flag-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.sx-flag h3 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; margin: 0; color: #fff; }
.sx-flag p { color: var(--dark-dim); margin: 0; line-height: 1.85; max-inline-size: 52ch; }
.sx-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px; margin-block: 6px; }
.sx-feats li { display: flex; align-items: center; gap: 11px; font-size: 15.5px; color: var(--dark-ink); }
.sx-feats i {
  display: grid; place-items: center; inline-size: 24px; block-size: 24px; flex: none;
  border-radius: 50%; font-size: 11px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.sx-flag-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; }
/* اللوح داكنٌ داخل .sec الفاتح: `.sec .btn-ghost` يكتب زرّاً فاتحاً فيُعاد هنا */
.sx-flag .btn-ghost { border-color: rgba(255,255,255,.22); color: var(--dark-ink); background: rgba(255,255,255,.04); }
.sx-flag .btn-ghost:hover { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.1); }

/* ── المسرح: شاشةٌ وهاتفان متراكبان بالنسبة المئوية فيصغرون معاً ──────────
   المنظور على الحاوي لا على الشاشة (المتحرّكة) — وإلا دارت الشاشة حول منظورها
   هي فلا يظهر عمقٌ. والهاتفان في جهة النصّ (بداية السطر) يتقدّمان الشاشة. */
.sx-stage { position: relative; aspect-ratio: 16 / 11.5; perspective: 1400px; }
.sx-screen {
  position: absolute; z-index: 1; inset-block-start: 4%; inset-inline-end: 0; inline-size: 90%;
  border-radius: 14px; overflow: hidden; background: #0b1020;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(0,53,230,.12);
  transform-origin: 50% 100%;
}
.sx-screen-bar { display: flex; gap: 6px; align-items: center; block-size: 24px; padding-inline: 12px; background: #151b30; }
.sx-screen-bar i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.sx-screen-bar i:first-child { background: #ff5f57; }
.sx-screen-bar i:nth-child(2) { background: #febc2e; }
.sx-screen-bar i:nth-child(3) { background: #28c840; }
.sx-screen img { inline-size: 100%; }
.sx-phone {
  position: absolute; aspect-ratio: 360 / 755; overflow: hidden;
  border-radius: 9% / 4.3%; background: #05070d;
  border: 4px solid #0a0e1a; outline: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.sx-phone img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sx-phone-a { z-index: 3; inline-size: 24%; inset-inline-start: 1%; inset-block-end: 0; }
.sx-phone-b { z-index: 2; inline-size: 20%; inset-inline-start: 19%; inset-block-end: 9%; }

/* ── العنوان الفرعي وبلاطات الأنظمة ─────────────────────────────────────── */
.sx-sub { text-align: center; margin-block: clamp(52px, 6vw, 76px) 26px; }
.sx-sub h3 { font-size: clamp(21px, 2.6vw, 27px); margin: 0 0 6px; }
.sx-sub p { color: var(--dim); margin: 0; }

/* اثنتان في الصف لا أربع: أسماء الأنظمة طويلة («نظام الرائد للمقاولات والمكاتب
   الهندسية»)، وبعرض 270 كانت تُقصّ عند كلمتين والوصف عند ثلاث. والحدّ الأدنى
   400 يعطي عمودين عند عرض الحاوي (1140) وعموداً واحداً على الهاتف. */
.sx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 16px; }
.sx-tile {
  border-radius: var(--r-lg); background: var(--light-2); border: 1px solid var(--light-line);
  box-shadow: 0 1px 2px rgba(17,24,50,.04);
  transition: box-shadow .3s var(--ease);
}
.sx-tile:hover { box-shadow: 0 22px 48px rgba(0,35,150,.13); }
.sx-tile > a { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; padding: 20px 22px; block-size: 100%; }
.sx-tile-logo {
  display: grid; place-items: center; inline-size: 76px; block-size: 76px; flex: none;
  border-radius: 20px; padding: 10px; background: #fff;
  border: 1px solid var(--light-line); box-shadow: 0 8px 20px rgba(17,24,50,.07);
  transition: box-shadow .3s var(--ease);
}
.sx-tile-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.sx-tile-logo b { font-size: 26px; color: var(--brand); }
.sx-tile:hover .sx-tile-logo { box-shadow: 0 12px 26px rgba(0,53,230,.2); }
.sx-tile-txt { display: grid; gap: 4px; flex: 1; min-inline-size: 0; }
.sx-tile-txt b, .sx-tile-txt span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sx-tile-txt b { font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.sx-tile-txt span { font-size: 14px; line-height: 1.7; color: var(--dim); }
.sx-tile-go {
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none;
  border-radius: 50%; border: 1px solid var(--light-line); color: var(--brand); font-size: 13px;
  transition: background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.sx-tile:hover .sx-tile-go {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent;
  transform: translateX(-4px);
}

/* ── الرقائق (القطاعات) ───────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip {
  --c: var(--brand);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px; font-size: 15.5px; font-weight: 500;
  background: var(--light-2); border: 1px solid var(--light-line); color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
}
.chips > :nth-child(6n+1) { --c: color-mix(in srgb, var(--brand) 55%, var(--brand-soft)); }
.chips > :nth-child(6n+2) { --c: #2ad0c8; }
.chips > :nth-child(6n+3) { --c: #ff8a5b; }
.chips > :nth-child(6n+4) { --c: var(--brand-soft); }
.chips > :nth-child(6n+5) { --c: #ffb648; }
.chips > :nth-child(6n+6) { --c: #34c77b; }
.chip:hover {
  transform: translateY(-3px); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, #fff);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 22%, transparent);
}
.chip i { color: var(--c); }
.chip.is-special { border-color: color-mix(in srgb, var(--c) 45%, transparent); font-weight: 700; }
/* الرقاقة رابطٌ إلى «اكتشف نظامك»: الحشوة على الرابط لا على li فتُنقر الرقاقة كلها */
.chip:has(> a) { padding: 0; }
.chip > a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; color: inherit; }
.chip img { inline-size: 18px; block-size: 18px; object-fit: contain; }

/* ── اكتشف نظامك (find-system.php) ─────────────────────────────────────────── */
.fs-steps {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 0;
}
.fs-steps li { display: flex; align-items: center; gap: 10px; color: var(--dark-dim); font-size: 15px; }
.fs-steps li + li::before {
  content: ''; inline-size: clamp(22px, 5vw, 56px); block-size: 2px; margin-inline: 12px;
  background: var(--dark-line); border-radius: 2px;
}
.fs-steps li.is-done + li::before { background: var(--brand-2); }
.fs-step-n {
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
  border: 1px solid var(--dark-line); font-weight: 700; font-size: 14px;
}
.fs-steps .is-on { color: var(--dark-ink); font-weight: 700; }
.fs-steps .is-on .fs-step-n {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px rgba(0,53,230,.4);
}
.fs-steps .is-done .fs-step-n { border-color: var(--brand-2); color: var(--brand-2); }

.fs-ico {
  display: grid; place-items: center; flex: none; inline-size: 46px; block-size: 46px;
  border-radius: 14px; background: rgba(0,53,230,.08); color: var(--brand); font-size: 19px;
}
.fs-ico img { inline-size: 28px; block-size: 28px; object-fit: contain; }
.fs-go {
  display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; margin-inline-start: auto;
  border-radius: 50%; border: 1px solid var(--light-line); color: var(--brand); font-size: 12px;
  transition: background .3s var(--ease), color .3s, border-color .3s;
}

/* الخطوة 1: شبكة المجالات */
.fs-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.fs-sector, .fs-sys {
  display: flex; align-items: center; gap: 14px; block-size: 100%;
  padding: 16px 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--light-line);
  color: var(--ink); transition: border-color .3s, box-shadow .3s;
}
.fs-sector b { font-size: 16.5px; line-height: 1.5; }
.fs-sector:hover, .fs-sys:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(0,53,230,.12); }
.fs-sector:hover .fs-go, .fs-sys:hover .fs-go {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent;
}
.fs-sector.is-special { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.fs-search {
  position: relative; max-inline-size: 520px; margin: 0 auto 36px;
}
.fs-search i { position: absolute; inset-block-start: 50%; inset-inline-start: 20px; translate: 0 -50%; color: var(--dim); }
.fs-search input {
  inline-size: 100%; padding: 15px 20px; padding-inline-start: 50px; border-radius: 999px;
  border: 1.5px solid var(--light-line); background: #fff; font: inherit; font-size: 16px; color: var(--ink);
}
.fs-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,53,230,.1); }
.fs-groups { display: grid; gap: 34px; }
.fs-groups [hidden] { display: none !important; }
.fs-group-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 18px; color: var(--ink);
}
.fs-group-head i { color: var(--brand); font-size: 16px; }
.fs-group-special { padding-block-start: 24px; border-block-start: 1px dashed var(--light-line); }

/* الخطوة 2: الأسئلة */
.fs-chosen {
  display: inline-flex; align-items: center; gap: 8px; margin-block-end: 16px;
  padding: 6px 16px; border-radius: 999px; background: rgba(0,53,230,.08); color: var(--brand);
  font-weight: 700; font-size: 15px;
}
.fs-chosen img { inline-size: 20px; block-size: 20px; object-fit: contain; }
.fs-form { display: grid; gap: 26px; }
.fs-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.fs-need { position: relative; cursor: pointer; }
.fs-need input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.fs-need-box {
  display: flex; align-items: center; gap: 14px; block-size: 100%;
  padding: 16px 18px; border-radius: var(--r); background: #fff; border: 1.5px solid var(--light-line);
  font-weight: 500; font-size: 15.5px; line-height: 1.6;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.fs-need-tick {
  display: grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px;
  border-radius: 8px; border: 1.5px solid var(--light-line); color: transparent; font-size: 13px;
  transition: background .25s, border-color .25s, color .25s;
}
.fs-need:hover .fs-need-box { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.fs-need input:checked + .fs-need-box {
  border-color: var(--brand); background: rgba(0,53,230,.05); box-shadow: 0 0 0 4px rgba(0,53,230,.1);
}
.fs-need input:checked + .fs-need-box .fs-need-tick {
  border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.fs-need input:focus-visible + .fs-need-box { outline: 2px solid var(--brand); outline-offset: 3px; }
.fs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 10px; }

/* الخطوة 3: النتيجة */
.fs-back { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-block-end: 30px; }
.fs-back a { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-weight: 500; }
.fs-back a:hover { color: var(--brand); }
.fs-best {
  position: relative; max-inline-size: 760px; margin-inline: auto;
  padding: 44px clamp(22px, 4vw, 40px) 34px; border-radius: var(--r-xl); background: #fff;
  border: 1px solid var(--light-line); box-shadow: 0 30px 70px rgba(17,24,50,.1);
}
.fs-best-tag {
  position: absolute; inset-block-start: -17px; inset-inline-start: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; font-size: 14.5px;
  white-space: nowrap; box-shadow: 0 10px 26px rgba(0,53,230,.35);
}
[dir="rtl"] .fs-best-tag { translate: 50% 0; }
.fs-best-head { display: flex; align-items: center; gap: 18px; margin-block-end: 20px; }
.fs-best-head h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.35; margin: 0; }
.fs-rel { margin: 4px 0 0; color: var(--brand); font-weight: 700; }
.fs-logo {
  display: grid; place-items: center; flex: none; inline-size: 72px; block-size: 72px; padding: 8px;
  border-radius: 18px; background: #fff; border: 1px solid var(--light-line); color: var(--brand); font-size: 26px;
}
.fs-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.fs-why-head { margin: 0 0 10px; font-size: 16px; color: var(--dim); font-weight: 500; }
.fs-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fs-why li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.7; }
.fs-why i { color: var(--brand-2); margin-block-start: 5px; }
.fs-why-base { margin: 0; color: var(--dim); line-height: 1.8; }
.fs-price {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 6px 16px;
  border-radius: 999px; background: rgba(42,208,200,.12); color: #0d7f79; font-weight: 700;
}
.fs-next { margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px solid var(--light-line); }
.fs-next h3 { margin: 0 0 12px; font-size: 16px; }
.fs-best .fs-actions { justify-content: flex-start; margin-block-start: 0; }

/* مقارنة الإصدارات: من الأبسط إلى الأشمل، والموصى به مميَّز */
.fs-rels {
  list-style: none; margin: 0 auto; padding: 0; max-inline-size: 1000px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.fs-rel-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; block-size: 100%;
  padding: 24px 20px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--light-line);
  color: var(--ink); transition: border-color .3s, box-shadow .3s;
}
.fs-rel-card b { font-size: 19px; }
.fs-rel-price { color: var(--dim); font-size: 14.5px; }
.fs-rel-more { display: inline-flex; align-items: center; gap: 8px; margin-block-start: auto; padding-block-start: 10px; color: var(--brand); font-size: 14px; font-weight: 500; }
.fs-rel-more i { font-size: 11px; }
.fs-rel-card:hover { border-color: var(--brand); box-shadow: 0 14px 34px rgba(0,53,230,.12); }
.fs-rel-card.is-on { border: 2px solid var(--brand); box-shadow: 0 18px 40px rgba(0,53,230,.14); }
.fs-rel-tag {
  position: absolute; inset-block-start: -12px; inset-inline-start: 18px; padding: 3px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 12.5px; font-weight: 700;
}
.fs-miss {
  max-inline-size: 640px; margin-inline: auto; padding: 30px; text-align: center;
  border-radius: var(--r-lg); background: #fff; border: 1px dashed var(--light-line); color: var(--dim);
}
.fs-list-head { margin-block: 70px 30px; }
.fs-best + .fs-list-head .h-sec, .fs-miss + .fs-list-head .h-sec { font-size: clamp(22px, 3vw, 30px); }
.fs-back + .fs-list-head { margin-block-start: 0; }
.fs-systems {
  list-style: none; margin: 0; padding: 0;
  /* عرضٌ أقصى للعمود وتوسيط: المجال غالباً نظامٌ واحد، فلا يُترك في طرف الصفّ */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 420px)); justify-content: center; gap: 16px;
}
.fs-sys .fs-logo { inline-size: 64px; block-size: 64px; }
.fs-sys-txt { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.fs-sys-txt b { font-size: 17px; line-height: 1.5; }
.fs-sys-txt span { color: var(--dim); font-size: 14px; line-height: 1.7; }
@media (max-width: 560px) {
  .fs-systems { grid-template-columns: 1fr; }
  .fs-best-head { flex-direction: column; text-align: center; }
  .fs-best .fs-actions { justify-content: center; }
}

/* ── صفحات داخلية: رأس الصفحة ─────────────────────────────────────────────── */
.phead {
  padding-block: calc(var(--nav-h) + 70px) 66px; text-align: center;
}
.phead h1 { font-size: clamp(30px, 5.6vw, 54px); margin-block-end: 14px; }
.phead p { color: var(--dark-dim); max-inline-size: 62ch; margin-inline: auto; }
/* شعار النظام فوق عنوانه: خلفية بيضاء لأن الشعارات المنقولة شفّافة بحبر داكن،
   فعلى الخلفية الداكنة تختفي تماماً. */
.phead-logo {
  display: inline-grid; place-items: center; margin-block-end: 20px;
  inline-size: 84px; block-size: 84px; border-radius: 24px; padding: 14px;
  background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.phead-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }

.crumbs { color: var(--dark-dim); font-size: 14.5px; margin-block-end: 16px; }
.crumbs a:hover { color: var(--brand-2); }
.crumbs span { opacity: .5; margin-inline: 7px; }

/* ── تفاصيل النظام والإصدارات ─────────────────────────────────────────────── */
.detail { background: var(--light); color: var(--ink); padding-block: clamp(50px, 7vw, 88px); position: relative; }
.detail::before {
  content: ''; position: absolute; inset-block-start: -58px; inset-inline: 0; block-size: 60px;
  background: var(--light); border-start-start-radius: 50% 100%; border-start-end-radius: 50% 100%;
}
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 900px) { .detail-grid.has-media { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.prose { font-size: 16.5px; line-height: 1.95; color: #2b3457; }
.prose :is(h2,h3) { margin-block: 1.5em .5em; color: var(--ink); }
.prose img { border-radius: var(--r); margin-block: 1em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-inline-start: 1.4em; margin-block: 1em; }
.prose table { inline-size: 100%; border-collapse: collapse; margin-block: 1em; }
.prose :is(td,th) { border: 1px solid var(--light-line); padding: 8px 12px; }

.shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--light-line); background: #fff; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-block-start: 18px; }
.gallery img { border-radius: var(--r); aspect-ratio: 4/3; object-fit: cover; inline-size: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }

/* بطاقات الإصدارات */
.releases { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-block-start: 30px; }
.releases > :nth-child(3n+1) { --c: var(--brand); }
.releases > :nth-child(3n+2) { --c: #2ad0c8; }
.releases > :nth-child(3n+3) { --c: #ff8a5b; }
.rel {
  --c: var(--brand);
  position: relative; overflow: hidden;
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .3s;
}
.rel::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: var(--c);
}
.rel:hover {
  box-shadow: 0 22px 46px color-mix(in srgb, var(--c) 20%, rgba(17,24,50,.08));
  border-color: color-mix(in srgb, var(--c) 34%, transparent);
}
.rel h3 { font-size: 21px; margin-block-end: 6px; }
.rel .price { font-size: 25px; font-weight: 800; color: var(--c); margin-block: 10px 16px; font-variant-numeric: tabular-nums; }
.rel .price small { font-size: 14px; font-weight: 500; color: var(--dim); }
.feat { display: flex; flex-direction: column; gap: 9px; margin-block-end: 20px; }
.feat li { display: flex; gap: 9px; align-items: flex-start; font-size: 15.5px; color: #2b3457; }
/* عمود الأيقونة بعرضٍ ثابت: الرمز قد يُرسم بخطٍّ بديل (Tajawal لا يحمل كل الرموز)
   بعرضٍ مختلف، فتتزحزح النصوص عن بعضها أو يركب الرمز على الكلمة. */
.feat li::before { content: '✓'; color: var(--brand-2); font-weight: 800; flex: none; inline-size: 1.1em; text-align: center; }
/* الموروثة من إصدارٍ أدنى: العلامة نفسها باهتة — شكلٌ واحد للقائمة، والفرق
   لونٌ وسمة title («من إصدار أدنى») لا رمزٌ آخر. */
.feat li.inherited { color: var(--dim); }
.feat li.inherited::before { color: var(--dim); opacity: .55; }
.rel .btn { margin-block-start: auto; }

/* الاصطفاف بين البطاقات: كل بطاقة تستعير صفوف الشبكة الأم (subgrid)، فالعنوان
   والوصف والسعر والمزايا والزر كلٌّ على خطٍّ واحد عبر البطاقات مهما اختلف طول
   الوصف أو غاب. القالب يطبع العناصر الخمسة دائماً لهذا. والفجوة 0 داخل البطاقة:
   الصفوف المستعارة ترث فجوة الأم (20px) وإلا. */
@supports (grid-template-rows: subgrid) {
  .rel { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  .rel .btn { margin-block-start: 0; align-self: end; }
}

/* ── صفحة النظام: ترويسة بهويّة وأرقام، ثم معرضٌ بلقطة كبيرة ───────────────
   الترويسة القديمة كانت شعاراً وعنواناً وسطرَ مجالات، والصفحةُ بعدها عمودين:
   نصٌّ وإطارٌ صغير وشبكةُ مصغّرات. فما كان يسأل عنه الزائر أولاً — أيُّ نوعٍ
   هو، وكم إصداراً، ومن أين يبدأ سعره — لم يكن مكتوباً في أي موضع، واللقطةُ
   التي تبيع النظام كانت في عمودٍ بعرض 468 بكسلاً من أصل 1280.               */
/* 96 لا 54: القسم الفاتح بعده يبدأ بمنحنىً يرتفع 58 بكسلاً فوق حدّه، فيقضم
   من هذه المسافة أكثر من نصفها — وكانت الأزرار تكاد تلمس بياضه. */
.phead-sys { padding-block-end: 96px; }
.sys-head {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  text-align: start; margin-block-end: 26px;
}
/* الشعار في الصفّ لا فوق العنوان: هامشه السفليّ وحجمه من قاعدة الترويسة
   العامة، وكلاهما لصفٍّ عموديّ لا أفقيّ. */
.sys-head .phead-logo { margin-block-end: 0; inline-size: 76px; block-size: 76px; padding: 12px; }
.sys-head h1 { margin-block-end: 10px; }
.sys-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sys-tags li {
  font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
  color: var(--brand-2); background: rgba(42,208,200,.12); border: 1px solid rgba(42,208,200,.24);
}

/* شريط الأرقام: لوحٌ شفّافٌ واحد بفواصل رفيعة، لا أربعُ بطاقاتٍ منفصلة —
   البطاقات تُقرأ محتوىً، وهذه بياناتُ تعريفٍ لا محتوى. */
.sys-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px clamp(18px, 3vw, 40px);
  list-style: none; margin: 0 auto 26px; padding: 18px clamp(18px, 3vw, 34px);
  max-inline-size: max-content;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04); border: 1px solid var(--dark-line);
}
.sys-meta li { display: flex; align-items: center; gap: 11px; }
.sys-meta li + li { padding-inline-start: clamp(18px, 3vw, 40px); border-inline-start: 1px solid var(--dark-line); }
.sys-meta i { color: var(--brand-2); font-size: 17px; }
.sys-meta span { display: grid; text-align: start; }
.sys-meta b { font-size: 18px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sys-meta small { font-size: 12.5px; color: var(--dark-dim); }

.sys-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sys-cta .btn i { margin-inline-end: 8px; }
/* الأزرار الشبحيّة هنا على خلفيةٍ داكنة، والقاعدة العامة تلوّنها لأقسامٍ فاتحة */
.phead-sys .btn-ghost { border-color: var(--dark-line); color: var(--dark-ink); }
.phead-sys .btn-ghost:hover { border-color: var(--brand-2); color: var(--brand-2); background: rgba(42,208,200,.08); }

/* القسم الفاتح الأول يبدأ بالمنحنى نفسه الذي يذيب الداكن في الرئيسية */
.sec-shots::before {
  content: ''; position: absolute; inset-block-start: -58px; inset-inline: 0; block-size: 60px;
  background: var(--light); border-start-start-radius: 50% 100%; border-start-end-radius: 50% 100%;
}
.shots { max-inline-size: 980px; margin-inline: auto; }
.shots .frame-body { aspect-ratio: 16 / 9; }
/* الصورة تملأ الإطار بنسبته لا بنسبتها: اللقطات من مقاسات مختلفة، وبلا نسبةٍ
   ثابتة يقفز علوّ الإطار عند كل تبديل فتتراقص الصفحة تحته. */
/* `contain` لا `cover`: اللقطات من مقاسات مختلفة (16:9 و4:3 ونوافذ طولية)،
   والقصُّ يبتر أعمدة الجداول وأطراف الشاشة — وهي بالضبط ما جاء الزائر يراه.
   والشريطان على الجانبين بلون سطحٍ فاتح يُقرآن حافّةَ عارضٍ لا نقصاً.     */
.shots .frame-body { background: #eef1f8; }
.shots .frame-body img { inline-size: 100%; block-size: 100%; object-fit: contain; }

/* شريط المصغّرات: أزرارٌ حقيقية لا روابط — التبديل لا ينقل الزائر إلى مكان،
   والزرّ يعمل بلوحة المفاتيح ويُعلن حالته بـ aria-current. */
.shot-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  list-style: none; margin: 18px 0 0; padding: 0;
}
.shot-thumb {
  display: block; padding: 0; border: 1px solid var(--light-line); background: #fff;
  inline-size: 116px; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  border-radius: 10px; opacity: .62;
  transition: opacity .25s, border-color .25s, transform .25s var(--ease);
}
.shot-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; display: block; }
.shot-thumb:hover { opacity: 1; transform: translateY(-3px); }
.shot-thumb[aria-current="true"] { opacity: 1; border-color: var(--brand); cursor: default; }

/* أربعةُ إصداراتٍ في صفّ واحد: الحدّ الأدنى 280 كان يسمح بثلاثة في 1140،
   فيبقى الرابع وحده في سطرٍ تحته ويُقرأ ملحقاً لا خياراً رابعاً. و248 تُدخل
   الأربعة في الصفّ نفسه فتُقارَن الأسعار بنظرةٍ واحدة كما يُقارَن جدولُ باقات. */
.sec-releases .releases { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

.sys-about .h-sec { text-align: center; }
.sys-about .prose { max-inline-size: 76ch; margin-inline: auto; }

@media (max-width: 720px) {
  /* عموديّاً على الهاتف: الشعار فوق العنوان، والفواصل بين الأرقام تصير
     أسطراً لا أعمدة — الفاصل الرأسيّ بلا معنى في عمود. */
  .sys-head { flex-direction: column; text-align: center; gap: 14px; }
  .sys-tags { justify-content: center; }
  .sys-meta { flex-direction: column; align-items: stretch; max-inline-size: 320px; gap: 0; }
  .sys-meta li + li {
    padding-inline-start: 0; border-inline-start: 0;
    margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--dark-line);
  }
  .shot-thumb { inline-size: 92px; }
}

/* ── الفروع والوكلاء ──────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; justify-content: center; margin-block-end: 34px; flex-wrap: wrap; }
.tabs button {
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--light-line);
  background: var(--light-2); cursor: pointer; font-weight: 600; color: var(--dim);
  transition: color .25s, border-color .25s, background .25s;
}
.tabs button.is-on { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; }

/* ── جدول المواقع ───────────────────────────────────────────────────────────
   جدول حقيقي لا شبكة div: هذه بيانات جدولية بأعمدة مسمّاة، فقارئ الشاشة يقرأ
   «العنوان: …» مع كل خانة، والمتصفّح يمنح المستخدم التنقّل بالأعمدة مجّاناً.  */
.gov-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--light-line); }
.gov-table {
  inline-size: 100%; border-collapse: collapse; background: var(--light-2);
  font-size: 15px; text-align: start;
}
.gov-table th, .gov-table td { padding: 13px 16px; text-align: start; vertical-align: middle; }
/* --ink لا --dark-ink: الثاني #eef1fb، أي حبرٌ **للخلفيات** الداكنة لا حبرٌ
   داكن. وُضع هنا على سطح أبيض فاختفت رؤوس الأعمدة تماماً. */
.gov-table thead th {
  background: color-mix(in srgb, var(--brand) 8%, var(--light-2));
  color: var(--ink); font-weight: 700; font-size: 14px; white-space: nowrap;
  border-block-end: 1px solid var(--light-line);
}
.gov-table tbody tr { border-block-start: 1px solid var(--light-line); transition: background .2s; }
.gov-table tbody tr:first-child { border-block-start: 0; }
.gov-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.gov-table .c-num  { color: var(--dim); inline-size: 1%; white-space: nowrap; }
.gov-table .c-name { font-weight: 600; color: var(--ink); }
.gov-table .c-addr { color: var(--dim); min-inline-size: 22ch; }
.gov-table .c-tel  { white-space: nowrap; }
.gov-table .c-tel a:hover, .gov-table .pin:hover { color: var(--brand); }
/* var(--brand) (#0035E6) على الأبيض ≈ 7.9 — فوق حدّ المقروئية بلا لونٍ أغمق خاص */
.gov-table .pin { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--brand); }
.tagk { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
/* k- سابقة إلزامية: كانت الشارة تحمل class="tagk branch" فكانت تطابق مرشّح
   البطاقات نفسه في الجافاسكربت، فتُخفى الشارة وتُحسَب بطاقةً وهمية. */
/* شارة الوكيل بنيٌّ أغمق من الذهبي: الذهبي على خلفيته الشفّافة دون حدّ المقروئية
   4.5، والشارة 12.5 بكسل أصلاً. شارة الفرع بلون العلامة نفسه (≈ 6.4 على خلفيتها). */
.tagk.k-branch { background: rgba(0,53,230,.12); color: var(--brand); }
.tagk.k-agent  { background: rgba(255,182,72,.16); color: #8a5a00; }

/* على الهاتف ينطوي الجدول إلى بطاقات: سبعة أعمدة في 390 بكسل تعني تمريراً
   أفقياً في كل صفّ. كل خانة تحمل اسم عمودها في data-label فلا يضيع المعنى. */
@media (max-width: 760px) {
  .gov-table-wrap { overflow-x: visible; border: 0; }
  .gov-table, .gov-table tbody, .gov-table tr, .gov-table td { display: block; inline-size: 100%; }
  .gov-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .gov-table tbody tr {
    border: 1px solid var(--light-line); border-radius: var(--r-lg);
    background: var(--light-2); padding: 6px 4px; margin-block-end: 14px;
  }
  .gov-table td { display: flex; gap: 14px; padding: 7px 14px; }
  .gov-table td::before {
    content: attr(data-label); flex: none; inline-size: 9ch;
    color: var(--dim); font-size: 13.5px; font-weight: 600;
  }
  .gov-table .c-addr { min-inline-size: 0; }
  .gov-table .c-tel, .gov-table .pin { white-space: normal; }
}

/* ── الأطلس: خريطتان تفاعليتان ───────────────────────────────────────────────
   المحافظة التي فيها مواقع وحدها هدفٌ قابل للضغط؛ الباقية شكلٌ باهت خاملٌ تماماً.
   الإطار سميك بوحدات viewBox لا بالبكسل، فيظلّ سميكاً مهما صغرت الخريطة —
   وهذا هو «الإطار الأطوخ» المطلوب.                                            */
.atlas {
  display: grid; gap: 26px; margin-block-end: 34px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .atlas { grid-template-columns: 1fr 1fr; } }

/* عمودٌ مرن والعبارة في قاعه: البطاقتان بطول واحد (صفّ الشبكة)، والخريطتان
   بارتفاعين مختلفين، فلو تبعت العبارةُ الخريطةَ لاختلف مستواها بين البطاقتين. */
.map {
  display: flex; flex-direction: column;
  margin: 0; padding: 18px 18px 14px;
  background: var(--light-2); border: 1px solid var(--light-line);
  border-radius: var(--r-lg);
}
.map-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-block-end: 10px;
}
.map-cap b { font-size: 18px; }
.map-cap span { font-size: 13.5px; color: var(--dim); }

.map svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

.map path {
  fill: var(--brand-mist);
  stroke: #fff; stroke-width: 3; stroke-linejoin: round;
  transition: fill .25s var(--ease);
}
/* المحافظات ذات المواقع: الأزرق الفاتح، ومؤشّر يد، وإطار يفصلها عن جاراتها */
.map path[data-has] {
  fill: var(--brand-soft);
  stroke: var(--light-2); cursor: pointer;
}
.map path[data-has]:hover,
.map path[data-has]:focus-visible {
  fill: color-mix(in srgb, var(--brand) 45%, var(--brand-soft));
  stroke: var(--brand); stroke-width: 5;
  outline: none;
}
.map path[aria-pressed="true"] {
  fill: var(--brand);
  stroke: var(--ink); stroke-width: 5;
}
/* الباهتة: لا مؤشّر ولا حدث ولا موضع تركيز — لا وعدَ كاذب بتفاعل لا يقع */
/* بلا شفافية: اللون الخامل هو --brand-mist نفسه كما طُلب، لا أبهت منه */
.map path:not([data-has]) { pointer-events: none; }

.map-info {
  margin: auto 0 0; padding-block-start: 10px; min-block-size: 1.7em;
  font-size: 14.5px; color: var(--dim); text-align: center;
}
.map-info b { color: var(--ink); }

.atlas-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 20px; margin-block-end: 30px;
}
.atlas-bar .tabs { margin-block-end: 0; }
.atlas-state { margin: 0; font-size: 15px; color: var(--dim); }
.atlas-state b { color: var(--ink); }
.atlas-clear {
  margin-inline-start: 8px; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--light-line); background: transparent; color: var(--dim);
  font-size: 13.5px;
}
.atlas-clear:hover { border-color: var(--brand); color: var(--brand); }

/* ── لوحات المحافظات ──────────────────────────────────────────────────────── */
.gov-panels { display: flex; flex-direction: column; gap: 38px; }
.gov-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 22px; margin-block-end: 16px;
  padding-block-end: 10px; border-block-end: 1px solid var(--light-line);
}
.gov-country { font-size: 14px; font-weight: 500; color: var(--dim); }
.atlas-none { text-align: center; color: var(--dim); padding-block: 34px; }

/* ── لافتة الوكالة ─────────────────────────────────────────────────────────── */
.join {
  margin-block-start: 46px; padding: 38px 30px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; text-align: center;
}
.join-in { max-inline-size: 60ch; margin-inline: auto; display: grid; justify-items: center; gap: 10px; }
.join i { font-size: 30px; opacity: .9; }
.join h2 { font-size: 26px; }
.join p { color: rgba(255,255,255,.88); }
.join .btn { margin-block-start: 8px; background: #fff; color: var(--brand); border-color: #fff; }
.join .btn:hover { background: rgba(255,255,255,.9); }

/* الميلان يحرّك transform كل إطار عبر GSAP؛ وجود transition عليه يجعله يتخلّف
   ويتلطّخ. تبقى الظلال والحدود وحدها منتقلة بنعومة. */
.tilt { transition-property: box-shadow, border-color, background; }

/* ── الخبر البارز في صفحة الأخبار ──────────────────────────────────────────
   صورةٌ كبيرة ونصٌّ إلى جانبها، ثم الشبكة تحته. الصورة رابطٌ مكرَّر للعنوان
   نفسه فهي aria-hidden وخارج ترتيب التنقّل — وإلا سمع قارئ الشاشة الخبرَ
   مرّتين وتوقّف عندها بلا نصّ.                                              */
.nlead {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(20px, 3.4vw, 40px); align-items: center;
  margin-block-end: clamp(34px, 4.5vw, 52px);
  padding-block-end: clamp(34px, 4.5vw, 52px);
  border-block-end: 1px solid var(--light-line);
}
.nlead-media {
  --c: var(--brand);
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--brand-mist), #dfe8fb);
  box-shadow: 0 24px 54px rgba(17,24,50,.14);
}
.nlead-media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.nlead:hover .nlead-media img { transform: scale(1.05); }
.nlead-body { display: grid; gap: 12px; justify-items: start; }
.nlead-body time { color: var(--dim); font-size: 14px; }
.nlead-body h2 { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.4; margin: 0; }
.nlead-body h2 a { color: var(--ink); }
.nlead-body h2 a:hover { color: var(--brand); }
.nlead-body p { color: var(--dim); font-size: 16px; line-height: 1.9; margin: 0; }
.nlead-body .btn { margin-block-start: 6px; }

@media (max-width: 820px) {
  .nlead { grid-template-columns: minmax(0, 1fr); }
}

/* ── صفحة التطبيقات: بطاقةٌ لكل تطبيق، عرضٌ ثلاثيّ ونصّ يتبادلان الجهة ─────
   العرض هو كاروزل الفريق نفسه (.tm، كتلة tmRoot في aurora.js) بمعدِّل
   .tm-apps: بطاقاتٌ طولية لملصقات المتجر وتبويبا «هاتف | تابلت» بدل أسماء
   الفرق. والملصقات تُعرض كما هي بلا إطار جهاز: فيها الجهاز مرسوماً أصلاً
   (حقيقة 32)، وإطارٌ حولها يعطي جهازاً داخل جهاز.
   والقواعد مسبوقة بـ .tm.tm-apps لا .tm-apps وحدها: كتلة .tm العامة تأتي بعد
   هذه في الملف وتخصيصها مثلها، فتغلبها لو تساويا.                          */
.sec-apps { background: var(--light); }
.appx {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  padding: clamp(22px, 4vw, 48px); border-radius: var(--r-xl);
  background: var(--light-2); border: 1px solid var(--light-line);
  box-shadow: 0 24px 60px rgba(17,24,50,.07);
}
.appx + .appx { margin-block-start: clamp(26px, 4vw, 44px); }
/* تبادل الجهة: الصفّ الزوجيّ يعكس عموديه فلا يقع المسرحان في عمودٍ واحد */
.appx:nth-child(even) > .appx-stage { order: 2; }

.appx-stage { position: relative; min-inline-size: 0; }
/* هالةٌ خلف المسرح تفصل الملصقات عن بياض البطاقة بلا إطار */
.appx-stage::before {
  content: ''; position: absolute; z-index: 0; inset: 8% 4% 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,53,230,.14), rgba(42,208,200,.08) 55%, transparent 72%);
}
.appx-stage > .tm { position: relative; z-index: 1; }

/* مقاس البطاقة من اللوح: ملصق الهاتف 392×696، وملصق الآيباد 3:4. و--tm-h هو
   علوّ البطاقة بحشوتها، ومنه علوّ المسرح (لا تُقسَم نسبةٌ على متغيّر في calc). */
.tm.tm-apps .tm-panel[data-kind="phone"]  { --tm-w: 210px; --tm-ar: 392 / 696; --tm-h: 386px; }
.tm.tm-apps .tm-panel[data-kind="tablet"] { --tm-w: 300px; --tm-ar: 3 / 4;     --tm-h: 412px; }
.tm.tm-apps .tm-card { padding: 6px; gap: 0; border-radius: 22px; background: var(--light-2); }
.tm.tm-apps .tm-shot { border-radius: 17px; }
.tm.tm-apps .tm-shot img { aspect-ratio: var(--tm-ar); object-fit: cover; }
.tm.tm-apps .tm-stage { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tm.tm-apps.is-live .tm-stage { block-size: calc(var(--tm-h) + 16px); }
.tm.tm-apps.is-live .tm-flow { padding-block: 4px 10px; }
.tm.tm-apps .tm-name { font-size: 15px; color: var(--dim); }

/* تبويبا هاتف/تابلت: قطعتان في كبسولة، بلا أسهم ولا لمعة */
.tm.tm-apps .tm-bar {
  inline-size: fit-content; max-inline-size: 100%; margin: 0 auto 16px; padding: 5px; gap: 0;
  border-radius: 999px; box-shadow: 0 8px 24px rgba(17,24,50,.08); border: 1px solid var(--light-line);
}
.tm.tm-apps .tm-tabs { flex: none; gap: 4px; padding: 0; overflow: visible; }
.tm.tm-apps .tm-tab {
  display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; block-size: 40px;
  padding: 0 20px; border-radius: 999px; font-size: 14px; background: transparent; border: 0;
}
/* التدرّج يُعاد هنا: الخلفية الشفّافة أعلاه أعلى تخصيصاً من قاعدة النشط العامة */
.tm.tm-apps .tm-tab[aria-selected="true"] {
  min-inline-size: 0; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, #7da4f5 0%, var(--brand) 100%);
  box-shadow: 0 8px 18px rgba(0,53,230,.25);
}
.tm.tm-apps .tm-tab[aria-selected="true"]::after { display: none; }

/* الحوار: الملصق كاملاً بلا قصّ */
.tm.tm-apps .tm-dlg { inline-size: min(560px, calc(100% - 32px)); }
.tm.tm-apps .tm-dlg-img { block-size: auto; max-block-size: 74vh; object-fit: contain; background: var(--light); }

@media (max-width: 700px) {
  .tm.tm-apps.is-live .tm-cnav:not([hidden]) { inset-block-start: calc(var(--tm-h) / 2 - 8px); }
}

/* عمود المعلومات */
.appx-info { display: grid; gap: 16px; justify-items: start; min-inline-size: 0; }
.appx-head { display: flex; align-items: center; gap: 14px; }
.appx-logo {
  display: grid; place-items: center; inline-size: 60px; block-size: 60px; flex: none;
  border-radius: 18px; padding: 8px; background: #fff;
  box-shadow: 0 0 0 1px var(--light-line), 0 10px 22px rgba(17,24,50,.08);
}
.appx-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.appx-head h2 { font-size: clamp(22px, 3.2vw, 31px); margin: 0; line-height: 1.35; }
.appx-text { color: var(--dim); font-size: 16px; line-height: 1.95; margin: 0; }

/* رقائق المنصّات المتاحة: ما له رابطٌ أو صورٌ فقط */
.appx-plats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.appx-plats li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--light); border: 1px solid var(--light-line);
}
.appx-plats i { font-size: 14px; color: var(--dim); }
.appx-plats .k-android i { color: #3ddc84; }

.appx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 6px; }
/* شارتا المتجرين الرسميتان كما هما (إرشادات العلامتين تمنع إعادة رسمهما):
   علوّ شارة آبل المرئي 44px، وصورة جوجل فيها حشوةٌ شفّافة (170 من 250 علوّاً
   و42 من 646 جانباً) فتُكبَّر إلى 65px ويُطرح هامشها ليتساوى المرئيّان. */
.appx-store { display: inline-block; line-height: 0; border-radius: 9px; transition: transform .2s var(--ease), box-shadow .2s; }
.appx-store img { block-size: 44px; inline-size: auto; }
.appx-store.k-gp img { block-size: 65px; margin: -10.5px -10.6px; }
.appx-store:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17,24,50,.22); }
.appx-store:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.btn-store {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff; border-color: transparent; font-weight: 600;
}

@media (max-width: 860px) {
  /* في عمودٍ واحد يسبق المسرحُ النصَّ دائماً */
  .appx { grid-template-columns: minmax(0, 1fr); }
  .appx:nth-child(even) > .appx-stage { order: 0; }
  .appx-info { justify-items: center; text-align: center; }
  .appx-plats, .appx-actions { justify-content: center; }
}

/* ── صفحة «من نحن»: شارة الترويسة، عمودا التعريف، القيم ────────────────────
   أصنافٌ خاصّة بها (.ab-*) لا توسيعٌ لـ.phead و.prose و.detail: تلك تخدم عشر
   صفحاتٍ أخرى، فتعديلها هنا يغيّرها هناك بلا أن يطلبه أحد.                 */
.ab-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-block-end: 16px;
  font-size: 13px; font-weight: 600; padding: 6px 15px; border-radius: 999px;
  color: var(--brand-2); background: rgba(42,208,200,.1);
  border: 1px solid rgba(42,208,200,.24);
}
/* القسم بطاقةٌ بيضاء على خلفيةٍ فاتحة مزرقّة كالقديم (.about-card-container) */
.sec-about-intro { background: var(--light); }
.ab-intro {
  display: grid; gap: clamp(26px, 4vw, 52px); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  padding: clamp(26px, 5vw, 60px); border-radius: var(--r-xl);
  background: var(--light-2); border: 1px solid var(--light-line);
  box-shadow: 0 24px 60px rgba(17,24,50,.07);
}
/* بلا صور فريق: عمودٌ واحد موسَّط بعرضٍ مقروء بدل عمودٍ يمتدّ على كل السطر */
.ab-intro.is-solo { grid-template-columns: minmax(0, 1fr); max-inline-size: 880px; margin-inline: auto; }
.ab-text .h-sec { text-align: start; margin-block: 0 14px; }
.ab-text .h-sec span { color: var(--brand); }
.ab-text .prose { margin-block-start: 6px; }

/* «اقرأ المزيد» عنصرٌ أصيل: لا سكربت ولا حالة في جافاسكربت، ويفتحه المتصفّح
   ويبحث داخله ويطبعه. والسهم يدور بـ CSS وحده عند [open]. */
.ab-more { margin-block-start: 18px; }
.ab-more > summary {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: 15px; color: var(--brand);
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(0,53,230,.28);
  background: rgba(0,53,230,.06);
  transition: background .2s, border-color .2s;
}
.ab-more > summary::-webkit-details-marker { display: none; }
.ab-more > summary:hover { background: rgba(0,53,230,.12); border-color: var(--brand); }
.ab-more > summary i { font-size: 12px; transition: transform .25s var(--ease); }
.ab-more[open] > summary i { transform: rotate(180deg); }
.ab-more[open] > summary { margin-block-end: 14px; }

/* منزلق صور الفريق كالقديم: صورةٌ تتلاشى، وسهمان أبيضان نصفهما خارج الصورة،
   ونقاطٌ النشطةُ منها مستطيلة. الصور في خليةٍ واحدة (grid-area 1/1) والخفيّة
   لا تلتقط النقر. وتقليل الحركة تصفّره القاعدة العامة آخر الملف. */
.ab-slider { min-inline-size: 0; display: grid; justify-items: center; gap: 18px; position: relative; }
.ab-slider::before {
  content: ''; position: absolute; z-index: 0; inset: -8% 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(55% 55% at 50% 45%, rgba(0,53,230,.14), rgba(42,208,200,.07) 55%, transparent 72%);
}
.ab-sl-view { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; inline-size: clamp(200px, 60%, 300px); }
.ab-sl-track { display: grid; inline-size: 100%; }
.ab-sl-img {
  grid-area: 1 / 1; inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 16px; box-shadow: 0 18px 40px rgba(17,24,50,.14);
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
.ab-sl-img.is-on { opacity: 1; pointer-events: auto; }
.ab-sl-btn {
  position: absolute; z-index: 2; inset-block-start: 50%; translate: 0 -50%;
  display: grid; place-items: center; inline-size: 40px; block-size: 40px; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--light-line); background: var(--light-2); color: var(--brand);
  font-size: 13px; box-shadow: 0 6px 18px rgba(17,24,50,.12); transition: background .2s, color .2s;
}
.ab-sl-btn[data-ab-step="-1"] { inset-inline-start: -20px; }
.ab-sl-btn[data-ab-step="1"]  { inset-inline-end: -20px; }
.ab-sl-btn:hover { background: var(--brand); color: #fff; }
[dir="rtl"] .ab-sl-btn i { transform: scaleX(-1); }
.ab-sl-dots { position: relative; z-index: 1; display: flex; gap: 7px; }
.ab-sl-dot {
  inline-size: 8px; block-size: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,53,230,.22); transition: inline-size .3s var(--ease), background .3s;
}
.ab-sl-dot[aria-current="true"] { inline-size: 24px; background: var(--brand); }
.ab-sl-btn:focus-visible, .ab-sl-dot:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
/* display أعلاه يهزم hidden، فيُعاد صراحةً كما في .rail-nav[hidden] */
.ab-sl-btn[hidden], .ab-sl-dots[hidden] { display: none; }

/* القيم الثلاث */
.sec-values .h-sec span { color: var(--brand); }
.values {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; list-style: none; margin: 0; padding: 0;
}
.values li {
  display: grid; gap: 11px; align-content: start; text-align: center; justify-items: center;
  padding: 34px 24px; border-radius: var(--r-lg);
  background: var(--light-2); border: 1px solid var(--light-line);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.values li:hover { box-shadow: 0 20px 44px rgba(17,24,50,.1); border-color: rgba(0,53,230,.4); }
.values b { font-size: 18px; color: var(--ink); }
.values li > span:last-child { color: var(--dim); font-size: 14.5px; line-height: 1.8; }
.value-ico {
  display: grid; place-items: center; inline-size: 62px; block-size: 62px;
  border-radius: 20px; font-size: 24px; color: var(--brand);
  background: linear-gradient(140deg, rgba(0,53,230,.16), rgba(42,208,200,.14));
  border: 1px solid rgba(0,53,230,.16);
}
.values li:nth-child(2) .value-ico { color: var(--gold);    background: linear-gradient(140deg, rgba(255,182,72,.2), rgba(255,138,91,.14)); border-color: rgba(255,182,72,.22); }
.values li:nth-child(3) .value-ico { color: var(--brand-2); background: linear-gradient(140deg, rgba(42,208,200,.2), rgba(0,53,230,.12)); border-color: rgba(42,208,200,.24); }

@media (max-width: 860px) {
  .ab-intro { grid-template-columns: minmax(0, 1fr); }
  .ab-text .h-sec { text-align: center; }
  .ab-text .eyebrow { display: block; margin-inline: auto; inline-size: fit-content; }
  .ab-more { display: grid; justify-items: center; }
}

/* ── فريق العمل: تبويبات الفرق وعرضٌ ثلاثيّ لصور الفريق المختار ────────────
   منقولٌ عن .powerhouse-info_section في الموقع القديم بقيمه: الجارة تُزاح 66%
   وتصغر إلى .78 وتميل 25° وتبهت إلى النصف. والعرض الثلاثي كله معلّق بـ
   .tm.is-live (يضعه السكربت)؛ وبدونه ألواحٌ متتالية بشبكة صورٍ عادية.
   --tm-dir يقلب جهة «التالي» والميلان مع اتجاه الصفحة. */
.tm { --tm-dir: 1; --tm-w: min(540px, 70vw); }
[dir="rtl"] .tm { --tm-dir: -1; }

.tm-bar {
  display: flex; align-items: center; gap: 12px; margin: 0 auto 34px;
  max-inline-size: 980px; padding: 16px 14px; border-radius: 25px;
  background: var(--light-2); box-shadow: 0 10px 40px rgba(17,24,50,.08);
}
.tm-bar[hidden] { display: none; }
.tm-tabs {
  flex: 1; min-inline-size: 0; display: flex; gap: 10px; justify-content: safe center;
  overflow-x: auto; scrollbar-width: none; padding-block: 4px;
}
.tm-tabs::-webkit-scrollbar { display: none; }
.tm-tab {
  position: relative; overflow: hidden; flex: none; min-inline-size: 150px; block-size: 58px;
  padding: 0 22px; border-radius: 16px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--dim);
  background: #f8f9fa; border: 1px solid #eee; opacity: .8;
  transition: background .3s, color .3s, box-shadow .3s, opacity .3s, min-inline-size .3s var(--ease);
}
.tm-tab:hover { opacity: 1; background: rgba(0,53,230,.08); color: var(--ink); }
.tm-tab:focus-visible, .tm-arrow:focus-visible, .tm-cnav:focus-visible, .tm-card:focus-visible {
  outline: 3px solid var(--brand-soft); outline-offset: 3px;
}
.tm-tab[aria-selected="true"] {
  min-inline-size: 210px; opacity: 1; color: #fff; font-size: 17px; border-color: transparent;
  background: linear-gradient(135deg, #7da4f5 0%, var(--brand) 100%);
  box-shadow: 0 14px 28px rgba(0,53,230,.25);
}
/* لمعةٌ تعبر التبويب النشط كالقديم */
.tm-tab[aria-selected="true"]::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -150%; inline-size: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); animation: tm-shine 2.4s infinite; pointer-events: none;
}
@keyframes tm-shine { to { inset-inline-start: 150%; } }

.tm-arrow, .tm-cnav {
  flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 13px;
  background: linear-gradient(135deg, #7da4f5 0%, var(--brand) 100%);
  box-shadow: 0 3px 10px rgba(0,53,230,.25); transition: transform .2s;
}
.tm-arrow:active, .tm-cnav:active { transform: scale(.9); }
[dir="rtl"] .tm-arrow i, [dir="rtl"] .tm-cnav i { transform: scaleX(-1); }

/* بلا سكربت: كل فريقٍ باسمه وصوره شبكةً، ولا أسهم ولا تلميح */
.tm-panel + .tm-panel { margin-block-start: 40px; }
.tm:not(.is-live) .tm-panel-all { display: none; }   /* «الكل» تكرارٌ لما في الألواح */
.tm:not(.is-live) .tm-panel-all + .tm-panel { margin-block-start: 0; }
.tm-name { text-align: center; font-size: 20px; margin: 0 0 18px; color: var(--ink); }
.tm-cnav, .tm-hint { display: none; }
/* auto-fill لا auto-fit: فريقٌ ببطاقةٍ واحدة لا تتمدّد بطاقته على السطر كله */
.tm-stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

.tm-card {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; text-align: start;
  font: inherit; color: var(--ink); cursor: pointer;
  background: #f9f9fa; border: 1px solid var(--light-line); border-radius: 25px;
  box-shadow: 0 10px 30px rgba(17,24,50,.08);
}
.tm-shot { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--light); }
.tm-shot img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tm-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-inline: 6px; font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--ink);
}

/* العرض الثلاثي */
.tm.is-live .tm-panel + .tm-panel { margin: 0; }
.tm.is-live .tm-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tm.is-live .tm-flow { position: relative; overflow-x: clip; padding-block: 10px 20px; }
.tm.is-live .tm-stage {
  display: block; position: relative; perspective: 1600px; perspective-origin: 50% 40%;
  block-size: calc(var(--tm-w) * .625 + 130px);
  touch-action: pan-y; user-select: none;   /* السحب الأفقي للسكربت، والعمودي للصفحة */
}
.tm.is-live .tm-card img { -webkit-user-drag: none; }
.tm.is-live .tm-card {
  position: absolute; inset-block-start: 0; left: 50%; inline-size: var(--tm-w);
  transform-style: preserve-3d; will-change: transform, opacity, filter;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94), opacity .5s cubic-bezier(.25,.46,.45,.94),
              filter .5s ease, visibility 0s;
}
.tm.is-live .tm-card[data-pos="0"] { z-index: 3; transform: translateX(-50%); }
.tm.is-live .tm-card[data-pos="1"],
.tm.is-live .tm-card[data-pos="-1"] {
  z-index: 2; opacity: .5; filter: blur(1.5px) grayscale(30%) brightness(.9);
}
.tm.is-live .tm-card[data-pos="1"] {
  transform: translateX(calc(-50% + 66% * var(--tm-dir))) translateY(5%) scale(.78) rotateY(calc(-25deg * var(--tm-dir)));
}
.tm.is-live .tm-card[data-pos="-1"] {
  transform: translateX(calc(-50% - 66% * var(--tm-dir))) translateY(5%) scale(.78) rotateY(calc(25deg * var(--tm-dir)));
}
.tm.is-live .tm-card[data-pos="x"] {
  z-index: 1; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) scale(.6);
  transition-property: transform, opacity, filter, visibility; transition-delay: 0s, 0s, 0s, .5s;
}
.tm.is-live .tm-card[data-pos="1"] .tm-desc,
.tm.is-live .tm-card[data-pos="-1"] .tm-desc { font-size: 12.5px; }

/* تلميح «عرض التفاصيل» على الوسطى */
.tm.is-live .tm-hint {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #fff; font-weight: 700; font-size: 15px; background: rgba(10,28,80,.45);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.tm.is-live .tm-hint i { font-size: 24px; }
.tm.is-live .tm-card[data-pos="0"]:hover .tm-hint,
.tm.is-live .tm-card[data-pos="0"]:focus-visible .tm-hint { opacity: 1; }

/* أسهم البطاقات: للهاتف حيث الجارتان مقصوصتان */
@media (max-width: 700px) {
  .tm { --tm-w: 76vw; }
  .tm-bar { padding: 12px 10px; gap: 8px; }
  .tm-tab { min-inline-size: 120px; block-size: 50px; font-size: 14px; padding: 0 16px; }
  .tm-tab[aria-selected="true"] { min-inline-size: 150px; font-size: 15px; }
  .tm.is-live .tm-card[data-pos="1"] { transform: translateX(calc(-50% + 48% * var(--tm-dir))) translateY(5%) scale(.78) rotateY(calc(-25deg * var(--tm-dir))); }
  .tm.is-live .tm-card[data-pos="-1"] { transform: translateX(calc(-50% - 48% * var(--tm-dir))) translateY(5%) scale(.78) rotateY(calc(25deg * var(--tm-dir))); }
  .tm.is-live .tm-cnav:not([hidden]) {
    display: grid; position: absolute; z-index: 5; inset-block-start: calc(var(--tm-w) * .31 + 10px);
  }
  .tm.is-live .tm-cnav[data-tm-card="-1"] { inset-inline-start: 4px; }
  .tm.is-live .tm-cnav[data-tm-card="1"]  { inset-inline-end: 4px; }
}

/* نافذة التفاصيل */
.tm-dlg {
  inline-size: min(520px, calc(100% - 32px)); max-block-size: 90vh; padding: 0; border: 0;
  border-radius: 24px; overflow-y: auto; color: var(--ink); background: var(--light-2);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.tm-dlg::backdrop { background: rgba(10,20,55,.55); backdrop-filter: blur(6px); }
.tm-dlg[open] { animation: tm-rise .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tm-rise { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.tm-dlg-img { display: block; inline-size: 100%; block-size: 280px; object-fit: cover; }
.tm-dlg-body { padding: 26px; }
.tm-dlg-body h3 { margin: 0 0 12px; font-size: 21px; color: var(--ink); }
.tm-dlg-body p { margin: 0; color: var(--dim); line-height: 1.9; white-space: pre-line; }
.tm-dlg-x {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2;
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; cursor: pointer;
  border-radius: 10px; border: 1px solid #e8f0fe; background: rgba(255,255,255,.92); color: var(--ink);
  transition: background .2s, color .2s;
}
.tm-dlg-x:hover { background: var(--brand); color: #fff; }
@media (max-width: 576px) {
  .tm-dlg-img { block-size: 200px; }
  .tm-dlg-body { padding: 20px; }
}

/* تقليل الحركة: القفز بين المواضع فوريّ، ولا لمعة ولا صعود */
@media (prefers-reduced-motion: reduce) {
  .tm.is-live .tm-card, .tm-tab, .tm-hint { transition: none; }
  .tm-tab[aria-selected="true"]::after { animation: none; display: none; }
  .tm-dlg[open] { animation: none; }
}

/* ── الأسئلة الشائعة ──────────────────────────────────────────────────────── */
.faq { max-inline-size: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--light-2); border: 1px solid var(--light-line); border-radius: var(--r);
  padding: 4px 20px; transition: border-color .25s;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
  cursor: pointer; font-weight: 700; padding-block: 15px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--brand); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--dim); padding-block-end: 14px; margin: 0; }

/* ── الترقيم ──────────────────────────────────────────────────────────────── */
.pager ul { display: flex; gap: 8px; justify-content: center; margin-block-start: 44px; flex-wrap: wrap; }
.pager a {
  min-inline-size: 42px; block-size: 42px; display: grid; place-items: center; padding-inline: 12px;
  border-radius: 12px; border: 1px solid var(--light-line); background: var(--light-2);
  color: var(--dim); font-weight: 600; transition: all .25s;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager a.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; }

/* ── الرسائل الطائرة ──────────────────────────────────────────────────────── */
.flash {
  position: fixed; inset-block-start: calc(var(--nav-h) + 12px); inset-inline-end: 20px; z-index: 80;
  padding: 13px 22px; border-radius: var(--r); font-weight: 600; font-size: 15.5px;
  background: var(--light-2); color: var(--ink); box-shadow: 0 18px 44px rgba(0,0,0,.24);
  border-inline-start: 4px solid var(--brand-2);
  animation: flashin .45s var(--ease);
}
.flash-error { border-inline-start-color: #ef4d5e; }
@keyframes flashin { from { opacity: 0; transform: translateY(-14px); } }

/* ── التذييل ──────────────────────────────────────────────────────────────── */
/* خيطٌ بتدرّج العلامة في رأس التذييل وهالةٌ خافتة تحته: التذييل خاتمةُ الصفحة
   بلغة البطل نفسها، لا شريطٌ رماديّ يُنسى. */
.foot {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dark-2); padding-block-start: clamp(56px, 8vw, 96px);
}
.foot::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -340px; inset-inline-start: 50%; translate: -50% 0;
  inline-size: min(1100px, 120%); block-size: 560px;
  background: radial-gradient(closest-side, rgba(0,53,230,.16), transparent);
}
.foot-grid { display: grid; gap: 40px; padding-block-end: 56px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 5vw, 72px); } }

/* النموذج في لوحٍ زجاجي: كان حقولاً عائمةً على الخلفية بلا حاوٍ */
.foot-form {
  padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--dark-line);
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.foot-form > * { position: relative; z-index: 1; }

.foot-side { display: grid; gap: 36px; align-content: start; }
@media (min-width: 600px) and (max-width: 899px) { .foot-side { grid-template-columns: 1.3fr 1fr; } }
.foot-brand { display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 2.6vw, 28px); margin-block-end: 12px; }
.foot-brand .brand-mark { inline-size: 40px; block-size: 40px; flex: none; }

.foot-links h3 { font-size: 15px; color: var(--dark-ink); margin-block-end: 14px; letter-spacing: .01em; }
.foot-links ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 38px; }
.foot-links a { color: var(--dark-dim); font-size: 15.5px; transition: color .25s; }
.foot-links a:hover { color: var(--brand-2); }

.form { display: flex; flex-direction: column; gap: 16px; margin-block-start: 22px; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { position: relative; }
.field :is(input, textarea) {
  inline-size: 100%; padding: 17px 16px 7px; border-radius: var(--r);
  background: rgba(255,255,255,.05); border: 1px solid var(--dark-line); color: var(--dark-ink);
  transition: border-color .25s, background .25s;
  resize: vertical;
}
.field :is(input, textarea):focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,.08); }
.field label {
  position: absolute; inset-block-start: 15px; inset-inline-start: 17px;
  color: var(--dark-dim); font-size: 16px; pointer-events: none;
  transition: transform .22s var(--ease), font-size .22s var(--ease), color .22s;
  transform-origin: top right;
}
.field :is(input, textarea):focus + label,
.field :is(input, textarea):not(:placeholder-shown) + label {
  transform: translateY(-9px); font-size: 12px; color: var(--brand-2);
}
.field.has-error :is(input, textarea) { border-color: #ef4d5e; }
.field em { display: block; font-style: normal; color: #ff8593; font-size: 13.5px; margin-block-start: 6px; }

.foot-contact { display: flex; flex-direction: column; gap: 12px; margin-block: 20px 26px; }
.foot-contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--dark-dim); font-size: 15.5px; }
.foot-contact i { color: var(--brand-2); inline-size: 18px; text-align: center; margin-block-start: 6px; flex: none; }
.foot-contact a:hover { color: var(--dark-ink); }

.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  inline-size: 42px; block-size: 42px; display: grid; place-items: center; border-radius: 13px;
  background: rgba(255,255,255,.06); border: 1px solid var(--dark-line); color: var(--dark-dim);
  transition: transform .28s var(--ease), background .28s, color .28s, border-color .28s;
}
.socials a:hover { transform: translateY(-4px); background: var(--c); color: #fff; border-color: transparent; }

.foot-bar { position: relative; padding-block: 20px; color: var(--dark-dim); font-size: 14.5px; }
/* الخيط المتدرّج بين المحتوى والحقوق: يذوب عند الطرفين بدل حدٍّ مقصوص */
.foot-bar::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,53,230,.55), rgba(42,208,200,.55), transparent);
}
.foot-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.foot-top { display: inline-flex; align-items: center; gap: 8px; color: var(--dark-dim); transition: color .25s; }
.foot-top i { font-size: 12px; transition: transform .3s var(--ease); }
.foot-top:hover { color: var(--brand-2); }
.foot-top:hover i { transform: translateY(-3px); }
@media (max-width: 599px) { .foot-bar-in { justify-content: center; text-align: center; } }

/* ── 404 والصيانة ─────────────────────────────────────────────────────────── */
.mid {
  min-block-size: 100svh; display: grid; place-items: center; text-align: center;
  padding-block: calc(var(--nav-h) + 40px) 60px;
}
.mid .code { font-size: clamp(76px, 18vw, 170px); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.mid h1 { font-size: clamp(24px, 4vw, 36px); margin-block: 10px 12px; }
.mid p { color: var(--dark-dim); margin-block-end: 26px; }

/* ── حالات الدخول قبل تشغيل الحركة ────────────────────────────────────────── */
/* العناصر تبدأ مخفيّة فقط إذا كان JS سيحرّكها — بدونه تظهر طبيعية */
body.js [data-fade], body.js [data-rise] { opacity: 0; }
body.js [data-rise] { transform: translateY(26px); }

/* ── الشاشات الصغيرة ──────────────────────────────────────────────────────── */
/* القائمة تنطوي أبكر من بقية التخطيط: ثمانية روابط ومبدّل اللغة وزرّ التواصل
   لا تتّسع لها الشاشة تحت ~1180 بكسلاً بالإنجليزية (عناوينها أطول)، فكان زرّ
   التواصل يُقصّ. الحدّ واحد للّغتين كي لا تختلف القائمة بين نسختي الصفحة. */
@media (max-width: 1180px) {
  .burger { display: flex; }
  .nav-links {
    position: fixed; inset-block-start: var(--nav-h); inset-inline: 0;
    background: rgba(7,11,24,.97); backdrop-filter: blur(16px);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px var(--gut) 30px; border-block-end: 1px solid var(--dark-line);
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    max-block-size: calc(100svh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links > a { padding: 13px 14px; border-radius: var(--r-sm); font-size: 17px; color: var(--dark-ink); }
  .nav-cta { margin-inline-start: 0; margin-block-start: 10px; text-align: center; justify-content: center; }
  body.is-light .nav.is-stuck .nav-links > a { color: var(--dark-ink); }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .flash { inset-inline: 14px; inset-block-start: calc(var(--nav-h) + 8px); }
  /* الميلان تفاعل مؤشّر لا لمس: على اللمس يترك البطاقة مائلة بعد الرفع */
  .tilt { transform: none !important; }
  .glow { filter: blur(30px); }
}

@media (max-width: 520px) {
  :root { --gut: 16px; }
  .brand-text { font-size: 15.5px; }
  .hero-cta .btn { inline-size: 100%; }
}

/* ── اللغة والاتجاه ────────────────────────────────────────────────────────────
   التنسيق منطقيّ في أغلبه (inline-start/end) فينقلب وحده مع dir. وهنا ما لا
   ينقلب وحده: أسهم «التالي» تشير إلى جهة القراءة — يساراً في العربية ويميناً
   في الإنجليزية — وإزاحة التحويم معها. والمشاهد svc- فيزيائية عمداً فلا تُمسّ. */
.nav-links > a.nav-lang {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.14);
}
body.is-light .nav.is-stuck .nav-links > a.nav-lang { border-color: var(--light-line); }
.nav-lang i { font-size: 13px; opacity: .8; }
.foot-lang { display: inline-flex; align-items: center; gap: 7px; color: var(--dark-dim); }
.foot-lang:hover { color: var(--dark-ink); }

[dir="ltr"] .more::after,
[dir="ltr"] .svc-more::after { content: '→'; }
[dir="ltr"] .card:hover .more::after,
[dir="ltr"] .svc-card:hover .svc-more::after { transform: translateX(5px); }
[dir="ltr"] .sx-tile-go i,
[dir="ltr"] .fs-go i,
[dir="ltr"] .fs-rel-more i,
[dir="ltr"] .fs-back .fa-arrow-right { transform: scaleX(-1); }
[dir="ltr"] .sx-tile:hover .sx-tile-go { transform: translateX(4px); }

/* ── احترام تقليل الحركة ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  body.js [data-fade], body.js [data-rise] { opacity: 1 !important; transform: none !important; }
  .glow { display: none; }
  .tilt { transform: none !important; }
  /* المشاهد تقف على وضعها الأساسي (المكتمل) لا على آخر إطار */
  .svc-scene *, .svc-scene *::before { animation: none !important; }
  .app:hover, .app:focus-within, .app:hover .app-shot img, .app:focus-within .app-shot img { transform: none; }
  /* وشريط الشعارات يعود جداراً ساكناً موسَّطاً: القاعدة العامة أعلاه تقصّر
     الحركة فتتجمّد عند نهاية الإزاحة لا عند بدايتها — فيُلغى التحويل صراحةً
     وتُخفى النسخة المكرّرة التي لا معنى لها بلا دوران. */
  /* والاتجاه يعود إلى اتجاه الصفحة: من اليسار لليمين حيلةُ اللفّ وحدها،
     وبلا لفٍّ يصير جداراً عربياً يُقرأ من اليمين. */
  .logo-vp { direction: inherit; }
  .logo-track {
    animation: none !important; transform: none !important;
    flex-wrap: wrap; justify-content: center; inline-size: auto;
  }
  .logo-cell[aria-hidden="true"] { display: none; }
  /* الفيديو حركة متواصلة لا تُوقفها مدّة انتقال قصيرة، فيُخفى كلّه ويبقى البوستر.
     وهذا لا يمسّ حوار الفيلم: ذاك طلبٌ صريح من الزائر لا حركةً تلقائية. */
  .hero-vid { display: none; }
}

/* ── طلب الوكالة ─────────────────────────────────────────────────────────────
   نموذج طويل على خلفية فاتحة. التسمية فوق المدخل لا عائمةً داخله: الحقول هنا
   كثيرة وبعضها قوائم وملفات لا نصّ، والتسمية العائمة لا تصلح لها.            */
.wrap-narrow { max-inline-size: 820px; }

.req-note { color: var(--dim); font-size: 14px; margin-block-end: 18px; }
.agency-form fieldset {
  border: 1px solid var(--light-line); border-radius: var(--r-lg);
  background: var(--light-2); padding: 26px 24px; margin-block-end: 22px;
}
.agency-form legend {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--ink);
  padding-inline: 10px;
}
.agency-form legend span {
  inline-size: 28px; block-size: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.fld { margin-block-start: 18px; }
.fld > label { display: block; font-weight: 600; font-size: 15px; margin-block-end: 7px; color: var(--ink); }
.fld .req { color: #d92d4b; margin-inline-start: 4px; }
.fld :is(input[type="text"], input[type="tel"], textarea, select) {
  inline-size: 100%; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--light-line); background: #fff; color: var(--ink);
  font: inherit; transition: border-color .2s, box-shadow .2s;
}
.fld textarea { resize: vertical; }
.fld :is(input, textarea, select):focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.fld input[type="file"] {
  inline-size: 100%; padding: 10px; border: 1px dashed var(--light-line);
  border-radius: var(--r); background: #fff; font: inherit; color: var(--dim);
}
.fld .hint { display: block; color: var(--dim); font-size: 13px; margin-block-start: 6px; }
.fld .err  { display: block; color: #d92d4b; font-size: 13.5px; font-weight: 600; margin-block-start: 6px; }
.fld.has-err :is(input, textarea, select) { border-color: #d92d4b; }

.row2 { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .row2 { grid-template-columns: 1fr 1fr; } }

/* أقراص الاختيار: زرّ اختيارٍ حقيقي تحتها، فيعمل التنقّل بالسهم وقارئ الشاشة.
   واسمها `pick` لا `chip`: الأخير لأقراص القطاعات في الرئيسية، وقاعدةُ
   `.chip span` هنا كانت ترسم داخل كلّ قرصِ قطاعٍ قرصاً ثانياً بإطاره. */
.picks { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { cursor: pointer; }
.pick input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pick span {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--light-line); background: #fff; color: var(--dim);
  font-size: 14.5px; transition: background .2s, color .2s, border-color .2s;
}
.pick input:checked + span {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border-color: transparent;
}
.pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* فخّ العسل: خارج الشاشة لا display:none — الآلة تتجاهل المخفيّ وتملأ الظاهر */
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.btn-send { inline-size: 100%; justify-content: center; }
.note { padding: 13px 16px; border-radius: var(--r); margin-block-end: 18px; font-size: 15px; }
.note-err { background: rgba(217,45,75,.08); color: #b02440; border: 1px solid rgba(217,45,75,.25); }

.sent { text-align: center; padding-block: 40px; display: grid; justify-items: center; gap: 12px; }
.sent i { font-size: 54px; color: #1aa06d; }
.sent h2 { font-size: 26px; }
.sent p { color: var(--dim); max-inline-size: 48ch; }
.sent .btn { margin-block-start: 10px; }

/* ── حجز التدريب (training.php) — فوق قواعد نموذج الوكالة ───────────────────
   مجموعات الأقراص fieldset داخل fieldset القسم: تُلغى عنها بطاقة القسم. */
.tb-form .tb-group { border: 0; background: none; padding: 0; margin: 18px 0 0; border-radius: 0; min-inline-size: 0; }
.tb-form .tb-group-label {
  display: block; padding: 0; margin-block-end: 9px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
/* `.agency-form legend span` يرسم دائرة رقم القسم، فيصل إلى نجمة «مطلوب» هنا */
.tb-form .tb-group-label .req {
  display: inline; inline-size: auto; block-size: auto; border-radius: 0;
  background: none; color: #d92d4b; font-size: inherit;
}
.tb-notes { list-style: decimal; margin: 0 0 4px; padding-inline-start: 22px; display: grid; gap: 6px; color: var(--ink); line-height: 1.8; }
.tb-notes li::marker { color: var(--brand); font-weight: 700; }
.fld > .tb-agree { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin: 0; }
.tb-agree input { inline-size: 20px; block-size: 20px; accent-color: var(--brand); flex: none; }
.tb-days .pick span { min-inline-size: 110px; text-align: center; }
.tb-slots .pick span { min-inline-size: 76px; text-align: center; direction: ltr; font-variant-numeric: tabular-nums; }
.tb-people .pick span { min-inline-size: 48px; text-align: center; }
.tb-form .pick input:disabled + span {
  cursor: not-allowed; opacity: .45; text-decoration: line-through; background: var(--light-2);
}
.tb-review { display: flex; align-items: flex-start; gap: 10px; background: rgba(0,53,230,.06); color: var(--ink); border: 1px solid rgba(0,53,230,.15); }
.tb-review i { color: var(--brand); margin-block-start: 4px; }
.sent .tb-code { font-size: 20px; font-weight: 700; color: var(--brand); direction: ltr; }

/* ── اصنع نظامك (build-system.php) — يستعمل قواعد النموذج والتدريب أعلاه ───── */
.bs-form .tb-group { border: 0; background: none; padding: 0; margin: 18px 0 0; border-radius: 0; min-inline-size: 0; }
.bs-form .tb-group-label { display: block; padding: 0; margin-block-end: 9px; font-size: 15px; font-weight: 600; color: var(--ink); }
.bs-form .tb-group-label i { color: var(--brand); margin-inline-end: 8px; }
.bs-form .tb-group-label .req {
  display: inline; inline-size: auto; block-size: auto; border-radius: 0;
  background: none; color: #d92d4b; font-size: inherit;
}
.bs-form .pick span i { margin-inline-end: 7px; opacity: .7; }
.bs-how {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.bs-how li {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 18px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--light-line);
}
.bs-how i { font-size: 24px; color: var(--brand); }
.bs-how b {
  inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 13px;
}
.bs-how span { font-size: 14px; color: var(--ink); line-height: 1.6; }
@media (max-width: 640px) { .bs-how { grid-template-columns: 1fr; } .bs-how li { grid-template-columns: auto auto 1fr; justify-items: start; text-align: start; align-items: center; } }
.bs-rec {
  display: grid; justify-items: center; gap: 8px; margin-block-start: 8px;
  padding: 18px 22px; border-radius: 18px; background: rgba(0,53,230,.06); border: 1px solid rgba(0,53,230,.15);
}
.sent .bs-rec i { font-size: inherit; }
.bs-rec span { color: var(--dim); }
.bs-rec b { font-size: 18px; color: var(--ink); }
.fs-build { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-block-start: 34px; color: var(--dim); font-weight: 600; }
.fs-build .btn i { margin-inline-end: 8px; }

/* ── مولّد البنرات (banner.php) وبطاقته في services.php ─────────────────────── */
.gb-promo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-block-end: 34px; padding: 22px 26px; border-radius: var(--r-xl);
  background: linear-gradient(120deg, #101731, var(--dark) 70%); color: var(--dark-ink);
  border: 1px solid var(--dark-line); box-shadow: 0 22px 50px rgba(7,11,24,.22);
}
.gb-promo-ico {
  display: grid; place-items: center; inline-size: 60px; block-size: 60px; flex: none;
  border-radius: 18px; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
}
.gb-promo-txt { display: grid; gap: 4px; flex: 1 1 260px; }
.gb-promo-txt b { font-size: 20px; }
.gb-promo-txt span { color: var(--dark-dim); font-size: 15px; }
.gb-promo:hover .btn { transform: translateY(-2px); }

.gb-steps { display: flex; justify-content: center; gap: 10px; margin-block-end: 22px; }
.gb-steps li {
  padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--light-2); color: var(--dim); border: 1px solid var(--light-line);
}
.gb-steps li.is-on { background: var(--brand); color: #fff; border-color: transparent; }
.gb-card {
  display: grid; gap: 14px; justify-items: start;
  padding: clamp(22px, 4vw, 36px); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--light-line); color: var(--ink);
}
.gb-card h2 { font-size: clamp(22px, 3vw, 28px); }
.gb-card > p { color: var(--dim); margin: 0; }
.gb-video { inline-size: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--dark); }
.gb-video iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.gb-feats { display: grid; gap: 8px; }
.gb-feats li { display: flex; align-items: center; gap: 10px; }
.gb-feats i { color: var(--brand); }
.gb-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--light-2); inline-size: 100%; }
.gb-tabs a { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; font-weight: 600; color: var(--dim); }
.gb-tabs a.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(17,24,50,.08); }
.gb-form { inline-size: 100%; }
.gb-form .gb-code { letter-spacing: .18em; text-transform: uppercase; font-weight: 700; text-align: center; }
.gb-back { color: var(--dim); font-size: 14px; }
.gb-back:hover { color: var(--brand); }

/* رأس الأداة داكن كرؤوس الصفحات الأخرى: القائمة العلوية مصمَّمة فوق الداكن قبل التمرير */
.gb-tool { background: var(--light); }
.gb-tool-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: calc(var(--nav-h) + 10px) var(--gut) 14px; background: var(--dark); color: var(--dark-ink);
}
.gb-tool-head h1 { font-size: 22px; }
.gb-tool-head p { margin: 0; color: var(--dark-dim); font-size: 14px; }
.gb-frame { display: block; inline-size: 100%; block-size: calc(100vh - var(--nav-h) - 70px); min-block-size: 620px; border: 0; background: #fff; }

/* ── مساعد المحادثة (layout.php، وسلوكه cbInit في aurora.js) ─────────────────
   زرٌّ عائم في زاوية النهاية السفلى ولوحٌ داكن فوقه. hidden يُحترم صراحةً لأن display
   على اللوح يغلبه. لا GSAP هنا: الظهور keyframes على opacity وtranslate، وقاعدة تقليل
   الحركة العامة تقصّرها. الأصناف بسابقة cb- (حقيقة 30.5). */
.cb { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 70; }
.cb[hidden], .cb-panel[hidden], .cb-chips[hidden] { display: none; }
.cb-fab {
  position: relative; inline-size: 60px; block-size: 60px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; font-size: 24px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 16px 40px rgba(0,53,230,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition-property: box-shadow, filter; transition-duration: .25s;
}
.cb-fab:hover { filter: brightness(1.08); box-shadow: 0 20px 50px rgba(0,53,230,.55), 0 0 0 1px rgba(255,255,255,.2) inset; }
.cb-fab:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.cb-fab i { grid-area: 1 / 1; }
.cb-ico-close, .cb.is-open .cb-ico-open { display: none; }
.cb.is-open .cb-ico-close { display: block; }
/* نبضةٌ حول الزرّ قبل أول فتح فقط */
.cb:not(.is-open) .cb-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(42,208,200,.55); animation: cbPulse 2.6s ease-out infinite;
}
@keyframes cbPulse { 70%, 100% { box-shadow: 0 0 0 16px rgba(42,208,200,0); } }

.cb-panel {
  position: absolute; inset-block-end: 76px; inset-inline-end: 0;
  inline-size: min(380px, calc(100vw - 32px)); block-size: min(560px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; color: var(--dark-ink);
  background: linear-gradient(180deg, #101a3a, var(--dark-2));
  border: 1px solid rgba(173,200,255,.16); box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: cbIn .28s var(--ease);
}
@keyframes cbIn { from { opacity: 0; translate: 0 12px; } }
.cb-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0,53,230,.35), rgba(42,208,200,.12));
  border-block-end: 1px solid rgba(173,200,255,.12);
}
.cb-avatar { inline-size: 40px; block-size: 40px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.cb-avatar svg { inline-size: 24px; block-size: 24px; }
.cb-who { display: flex; flex-direction: column; line-height: 1.35; min-inline-size: 0; flex: 1; }
.cb-who b { font-size: 16px; color: #fff; }
.cb-who small { font-size: 12.5px; color: var(--dark-dim); }
.cb-x {
  inline-size: 34px; block-size: 34px; border-radius: 50%; border: 1px solid rgba(173,200,255,.2);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.cb-x:hover { background: rgba(255,255,255,.14); }
.cb-log {
  list-style: none; margin: 0; padding: 16px; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
  display: flex; flex-direction: column; gap: 10px;
}
.cb-msg {
  max-inline-size: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cb-msg.is-bot { align-self: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(173,200,255,.12); border-end-start-radius: 4px; }
.cb-msg.is-user { align-self: flex-end; background: var(--brand); color: #fff; border-end-end-radius: 4px; }
.cb-msg a { color: var(--brand-soft); text-decoration: underline; text-underline-offset: 3px; }
.cb-help {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-block-start: 10px;
  padding: 8px 12px; border-radius: 12px; background: var(--brand); color: #fff !important;
  text-decoration: none !important; font-weight: 700; white-space: normal;
}
.cb-wa { background: #25D366; }
.cb-msg.is-typing { display: inline-flex; gap: 5px; padding-block: 14px; }
.cb-msg.is-typing span { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand-soft); animation: cbDot 1.1s infinite ease-in-out; }
.cb-msg.is-typing span:nth-child(2) { animation-delay: .15s; }
.cb-msg.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cbDot { 0%, 80%, 100% { opacity: .3; translate: 0 0; } 40% { opacity: 1; translate: 0 -4px; } }
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.cb-chip {
  padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--dark-ink); background: rgba(173,200,255,.08); border: 1px solid rgba(173,200,255,.22);
}
.cb-chip:hover { background: rgba(173,200,255,.18); }
.cb-form {
  display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 8px;
  border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(173,200,255,.16);
}
.cb-form:focus-within { border-color: var(--brand-soft); }
.cb-form textarea {
  flex: 1; min-inline-size: 0; resize: none; border: 0; outline: 0; background: transparent;
  color: #fff; font: inherit; font-size: 15px; line-height: 1.6; padding: 6px 6px; max-block-size: 120px;
}
.cb-form textarea::placeholder { color: var(--dark-dim); }
.cb-send {
  inline-size: 40px; block-size: 40px; flex: none; border: 0; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--brand);
}
.cb-send:disabled { opacity: .5; cursor: progress; }
[dir="rtl"] .cb-send i { transform: scaleX(-1); }
.cb-note { margin: 0; padding: 8px 16px 12px; font-size: 11.5px; line-height: 1.5; color: var(--dark-dim); text-align: center; }
/* المحادثة مع موظف (رقعة 026): رسالة الموظف بحدٍّ فيروزي واسمه فوقها، وإشعار النظام سطرٌ وسطيّ خافت */
.cb-msg.is-agent { border-color: rgba(42,208,200,.45); background: rgba(42,208,200,.09); }
.cb-author { display: block; margin-block-end: 2px; font-size: 12px; color: #2ad0c8; }
.cb-msg.is-sys {
  align-self: center; max-inline-size: 92%; padding: 6px 12px; border-radius: 12px; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--dark-dim); background: rgba(173,200,255,.06);
}
.cb.is-live .cb-who small { color: #2ad0c8; }
.cb.is-live .cb-chips, .cb.is-live .cb-note { display: none; }
.cb-live { display: flex; justify-content: center; padding: 0 16px 10px; }
.cb-human, .cb-end {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--dark-ink); background: rgba(42,208,200,.1); border: 1px solid rgba(42,208,200,.4);
}
.cb-human:hover, .cb-end:hover { background: rgba(42,208,200,.2); }
.cb-human[hidden], .cb-end[hidden], .cb-hand[hidden], .cb-hand-err[hidden] { display: none; }
.cb-human.is-pulse { animation: cbHumanPulse 1.6s ease-out 3; border-color: #2ad0c8; }
@keyframes cbHumanPulse { 0% { box-shadow: 0 0 0 0 rgba(42,208,200,.55); } 100% { box-shadow: 0 0 0 12px rgba(42,208,200,0); } }
.cb-hand {
  display: flex; flex-direction: column; gap: 8px; margin: 0 12px 10px; padding: 12px;
  border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(42,208,200,.35);
}
.cb-hand b { color: #fff; font-size: 14.5px; }
.cb-hand p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--dark-dim); }
.cb-hand input {
  border-radius: 10px; border: 1px solid rgba(173,200,255,.22); background: rgba(0,0,0,.18);
  color: #fff; font: inherit; font-size: 14.5px; padding: 8px 10px; outline: 0;
}
.cb-hand input:focus { border-color: var(--brand-soft); }
.cb-hand input::placeholder { color: var(--dark-dim); }
[dir="rtl"] .cb-hand input[dir="ltr"]::placeholder { text-align: right; }
.cb-hand .cb-hand-err { color: #ff8a8a; }
.cb-hand-acts { display: flex; gap: 8px; }
.cb-hand-go, .cb-hand-cancel { flex: 1; padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; border: 0; }
.cb-hand-go { background: var(--brand); color: #fff; font-weight: 700; }
.cb-hand-go:disabled { opacity: .5; cursor: progress; }
.cb-hand-cancel { background: rgba(255,255,255,.08); color: var(--dark-ink); }
/* رسالة موظف وصلت والنافذة مغلقة: نقطةٌ على الزرّ العائم */
.cb.has-new .cb-fab::before {
  content: ""; position: absolute; inset-block-start: 4px; inset-inline-end: 4px; inline-size: 14px; block-size: 14px;
  border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 2px var(--dark-2);
}
@media (max-width: 560px) {
  .cb { inset-block-end: 16px; inset-inline-end: 16px; }
  .cb-panel { position: fixed; inset-inline: 16px; inset-block-end: 88px; inline-size: auto; block-size: min(560px, calc(100dvh - 120px)); }
}