/* =============================================================
   طبقة الهوية المؤسسية — Enterprise Layer
   =============================================================
   تُحمَّل بعد site-additions.css فتغلبها عند التعارض.

   الغاية: رفع لغة الموقع البصرية من «شركة تطوير برمجيات» إلى
   «شريك بنية رقمية للمؤسسات» — دون تغيير الهوية القائمة.
   البنفسجي #756de7 يبقى لون العلامة؛ أُضيف إليه سطح كحلي عميق
   يمنح الثِّقل المؤسسي، وأزرق تقني للمخطّطات والبيانات.

   كل الأصناف الجديدة تحت بادئة .ent- حتى لا تصطدم بأصناف القالب.
   الموقع RTL دائماً، ومع ذلك نستخدم الخصائص المنطقية حيثما أمكن.
   ============================================================= */

:root {
  /* ---------- الأسطح ---------- */
  --ent-navy-900: #080d1a;
  --ent-navy-800: #0d1526;
  --ent-navy-700: #131e35;
  --ent-navy-600: #1b2947;

  --ent-surface: #ffffff;
  --ent-surface-soft: #f5f7fb;
  --ent-surface-mute: #eef1f7;

  /* ---------- النص ----------
     دُكِّنت درجات النصّ الثانوي: القيم السابقة كانت تمرّ من فحص التباين
     بالحدّ الأدنى (4.9:1) لكنها تُقرأ باهتةً على شاشة مكتب ساطعة.
     القيم الحالية تتجاوز 7:1 فيبدو النصّ مقروءاً لا رمادياً. */
  --ent-ink: #070d1a;
  --ent-ink-2: #27314b;
  --ent-muted: #4b5872;
  --ent-on-dark: #f3f6fd;
  --ent-on-dark-2: #c4cee4;
  --ent-on-dark-3: #97a5c2;

  /* ---------- العلامة والألوان التقنية ---------- */
  --ent-brand: #756de7;
  --ent-brand-1: #8f88ff;
  --ent-brand-deep: #4f46e5;
  --ent-cyan: #38bdf8;
  --ent-teal: #2dd4bf;
  --ent-amber: #f5a524;
  --ent-rose: #f472b6;

  /* ---------- الحدود والظلال ---------- */
  --ent-line: #dde4ef;
  --ent-line-dark: rgba(148, 163, 184, 0.2);
  --ent-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 4px 14px rgba(11, 18, 32, 0.05);
  --ent-shadow-md: 0 2px 6px rgba(11, 18, 32, 0.07), 0 18px 40px rgba(11, 18, 32, 0.09);
  --ent-shadow-dark: 0 20px 50px rgba(0, 0, 0, 0.45);

  /* ---------- سطح البطاقة ----------
     المربّع الأبيض المسطّح يقرأ كورقة جريدة. ثلاث طبقات تُخرجه منها:
     تدرّج رأسي شديد الخفوت يعطي عمقاً، وخطّ ضوء داخلي أعلى الحافة
     يوحي بحافة مرفوعة، وظلّ ملوّن لا رمادي فيبدو الارتفاع طبيعياً. */
  --ent-card-bg: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
  --ent-card-ring: inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --ent-card-shadow: 0 1px 2px rgba(11, 18, 32, 0.05),
    0 10px 26px -10px rgba(30, 41, 71, 0.16);
  --ent-card-shadow-hover: 0 2px 6px rgba(11, 18, 32, 0.06),
    0 28px 54px -14px rgba(79, 70, 229, 0.3);

  /* بطاقة على سطح كحلي */
  --ent-card-bg-dark: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));

  /* ---------- الإيقاع (density: فسيح) ---------- */
  --ent-s1: 8px;
  --ent-s2: 16px;
  --ent-s3: 24px;
  --ent-s4: 36px;
  --ent-s5: 56px;
  --ent-s6: 80px;
  --ent-s7: 104px;

  --ent-radius: 14px;
  --ent-radius-lg: 20px;

  --ent-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ent-dur: 220ms;
}

/* =============================================================
   1. الطباعة
   =============================================================
   انتبه: «Montserrat» في هذا الموقع ليست Montserrat الحقيقية.
   style.css يعرّفها بـ @font-face على ملف AraJozoor-Regular، فالاسم
   لاتيني والمحارف عربية. نُبقيها أولاً في المكدّس حفاظاً على هوية
   الموقع كما هي.

   ما نضيفه هنا شبكة أمان فقط: خطوط عربية عالية الجودة موجودة أصلاً
   على أجهزة المستخدمين، تعمل إن تعذّر تحميل ملف الخطّ أو نقصه محرف.
   لا طلب شبكة إضافي، ولا أثر على Lighthouse.

   ⚠️ قيد قائم قبل هذا التغيير ولم يُحلّ فيه: AraJozoor وزن واحد
   (normal) فقط. كل عنوان عريض في الموقع — القديم والجديد — يُغلَّظ
   تغليظاً صناعياً في المتصفح. رفع التدرّج الطباعي إلى مستوى مؤسسي
   حقيقي يحتاج عائلة عربية متعددة الأوزان، وهو قرار هوية لا تنسيق.
   لذلك يعتمد التدرّج هنا على الحجم والمسافة واللون لا على الوزن.
   ============================================================= */

*,
body {
  font-family: 'Montserrat', 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'SF Arabic',
    'Geeza Pro', 'Dubai', Tahoma, 'Helvetica Neue', Arial, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- تسوية أبعاد الصور ----------
   أُضيفت سمتا width/height إلى كل صورة لحجز مساحتها ومنع قفز التخطيط
   (CLS). لكنّ سمة height تعمل كتلميح عرضٍ يضبط الارتفاع فعلياً ما لم
   تنقضه قاعدة CSS — والقالب هنا يضبط العرض وحده (‎104px‎) دون
   ‎height: auto‎، فظهرت الأيقونة بعرض 104 وارتفاع 206: ممطوطة رأسياً.

   ‎height: auto‎ يعيد الارتفاع إلى الاشتقاق من النسبة، فتبقى فائدة
   الحجز المسبق ويعود الشكل صحيحاً. أوّليّة المحدّد أدنى ما يكون
   (‎0,0,1‎) فأي قاعدة تضبط ارتفاعاً صريحاً تغلبه. */
img {
  height: auto;
}

/* ---------- تسوية العناوين المحوَّلة ----------
   عناوين الأقسام والبطاقات كانت <div> و<span> بلا معنى دلالي، فكانت
   صفحاتٌ كثيرة تخلو من أي h2 — ومحرّك البحث يقرأ بنية الصفحة من
   العناوين. حُوِّلت إلى h2/h3، والأصناف نفسها تضبط الحجم والوزن واللون
   فلا يتغيّر المظهر.

   يبقى فرقان يجب إلغاؤهما يدوياً:
   1. للعناوين هوامش افتراضية (‎1em 0‎) لم تكن للـdiv.
   2. ‎#features-holder .feature-title‎ كان <span> سطرياً يجاور الأيقونة،
      و<h3> عنصر كتليّ فيهبط إلى سطر جديد. */
.feature-title,
.mfeature-title {
  margin-top: 0;
}

#features-holder .feature-box .feature-title-holder .feature-title {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

/* الأرقام في السياق العربي: أرقام لاتينية بعرض جدولي حتى لا يهتزّ
   العدّاد أثناء التحرّك من رقم إلى آخر. */
.ent-num,
.scale-value,
.stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* =============================================================
   2. عناصر مشتركة بين الأقسام الجديدة
   ============================================================= */

/* ---------- شريحة تعريفية فوق العنوان (eyebrow) ---------- */
.ent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ent-brand-deep);
  background: rgba(117, 109, 231, 0.09);
  border: 1px solid rgba(117, 109, 231, 0.22);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: var(--ent-s2);
  direction: ltr;
}

.ent-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ent-brand);
  box-shadow: 0 0 0 3px rgba(117, 109, 231, 0.2);
  flex: none;
}

.ent-dark .ent-eyebrow {
  color: var(--ent-brand-1);
  background: rgba(143, 136, 255, 0.12);
  border-color: rgba(143, 136, 255, 0.3);
}

/* الهيرو ليس داخل .ent-dark — خلفيته يرسمها .bg-animation في القالب —
   لكنه سطح داكن فعلياً، فلا تصلح له الشريحة الفاتحة (#4f46e5 على كحلي).
   ولأن التوهّج البنفسجي يمرّ تحت هذه الشريحة تحديداً، تحتاج قاعدةً أشدّ:
   شريحة داكنة معتمة نسبياً + لون أفتح، فيبقى التباين ≥ 9:1 فوق أسطع
   نقطة في التوهّج لا فوق الكحلي وحده. */
.ent-hero-holder .ent-eyebrow {
  color: #c9c4ff;
  background: rgba(8, 13, 26, 0.55);
  border-color: rgba(143, 136, 255, 0.34);
}

.ent-hero-holder .ent-eyebrow::before {
  background: var(--ent-brand-1);
  box-shadow: 0 0 0 3px rgba(143, 136, 255, 0.22);
}

/* ---------- ترويسة قسم ---------- */
.ent-head {
  max-width: 820px;
  margin: 0 auto var(--ent-s5);
  text-align: center;
}

.ent-head.start {
  margin-inline: 0;
  text-align: start;
}

.ent-title {
  font-size: 38px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--ent-ink);
  margin: 0 0 var(--ent-s2);
  letter-spacing: -0.01em;
}

.ent-lead {
  font-size: 17px;
  line-height: 1.95;
  color: var(--ent-muted);
  margin: 0;
}

.ent-dark .ent-title {
  color: #fff;
}

.ent-dark .ent-lead {
  color: var(--ent-on-dark-2);
}

/* ---------- شريط كحلي ---------- */
.ent-dark {
  position: relative;
  background: var(--ent-navy-800);
  color: var(--ent-on-dark);
  overflow: hidden;
}

/* شريط مائل داكن أعمق خلف القسم الكحلي — نفس زاوية أشرطة القالب،
   فيبقى القسم الداكن جزءاً من الإيقاع البصري نفسه لا كتلةً غريبة.

   ⚠️ display:block إلزامي: القسم عنصر .container-fluid، وBootstrap 3
   يحجز ::before و::after له بقاعدة clearfix تفرض display:table.
   الصندوق الجدولي المطلق ينكمش على محتواه الفارغ فيصير 0×0 ولا يُرسم
   شيء إطلاقاً. هذا ينطبق على كل عنصر زائف نضيفه إلى .container-fluid. */
.ent-dark::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--ent-navy-900);
  transform: skewY(10deg) scaleY(1.12);
  transform-origin: center center;
}

.ent-dark > .container,
.ent-dark > .container-fluid {
  position: relative;
  z-index: 1;
}

.ent-section {
  padding-block: var(--ent-s7);
}

.ent-section.soft {
  background: var(--ent-surface-soft);
}

/* =============================================================
   3. الهيرو
   =============================================================
   استُبدل سلايدر الأيقونات بهيرو تحريري ثابت: عمود نصّ + مخطّط SVG.
   السبب: الشريحة الدوّارة تؤخّر LCP، وتفرض على الزائر انتظار الرسالة
   بدل قراءتها فوراً — وهو عكس ما يحتاجه صانع القرار المؤسسي.
   ============================================================= */

/* ---------- ضبط حافة الشريط المائل في الترويسة ----------
   الميل ‎10deg‎ يرفع طرفاً ويخفض الآخر بمقدار ‎tan(10°) × نصف عرض الشاشة‎
   ≈ ‎8.8vw‎. فالحافة السفلية ليست خطاً واحداً بل قطر يمتدّ ‎±8.8vw‎ حول
   موضعها غير المائل.

   القاعدة السابقة ‎height: calc(88% + 11vw)‎ تخلط نسبةً من الارتفاع مع
   وحدة عرض، فتضبط الحافة عند نسبة عرض/ارتفاع واحدة فقط. عند غيرها
   يتدلّى أخفض طرف من القطر تحت الترويسة — وهو ما كان يقطع صفّ الأرقام.

   الاشتقاق: أخفض نقطة = ‎top + height + 8.8vw‎، ونريدها ‎100%‎ بالضبط:
   ‎-11vw + height + 8.8vw = 100%‎  ⟶  ‎height = 100% + 2.2vw‎
   وبهذا تنتهي الحافة عند حدّ الترويسة تماماً مهما تغيّر العرض. */
#header-holder .bg-animation {
  height: calc(100% + 2.2vw);
}

/* ضمانة أخيرة: لو تغيّرت زاوية الميل مستقبلاً لا يتسرّب شيء خارج
   الترويسة على المحتوى تحتها */
#header-holder {
  overflow: hidden;
}

/* ---------- خلفية ترويسة الرئيسية ----------
   القالب يرسم الترويسة بمستطيل بنفسجي مائل (.bg-animation) بلون #756de7 مسطّح.
   نُبقي الشكل المائل نفسه — فهو من هوية الموقع — ونستبدل السطح بكحلي عميق
   يحمل توهّجاً بنفسجياً في موضع النصّ وآخر أزرق أسفل المخطّط.
   النتيجة: التباين المؤسسي المطلوب، مع بقاء البنفسجي لون العلامة. */
#header-holder.ent-home .bg-animation {
  background-color: var(--ent-navy-800);
  background-image: radial-gradient(
      1100px 560px at 76% 12%,
      rgba(117, 109, 231, 0.46),
      transparent 62%
    ),
    radial-gradient(820px 460px at 14% 92%, rgba(56, 189, 248, 0.2), transparent 66%),
    url(../images/headbg.svg);
}

#top-content.ent-hero-holder {
  padding-top: 40px;
  padding-bottom: 170px;
}

.ent-hero {
  display: flex;
  align-items: center;
  gap: var(--ent-s6);
  min-height: 480px;
}

.ent-hero-copy {
  flex: 1 1 52%;
  min-width: 0;
}

.ent-hero-visual {
  flex: 1 1 60%;
  min-width: 0;
}

.ent-hero h1.ent-hero-title {
  font-size: 52px;
  line-height: 1.28;
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--ent-s3);
  letter-spacing: -0.015em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

/* خطّ لوني تحت الكلمة المفتاحية — بديل هادئ عن التدرّجات الصاخبة.
   يُرسم كخلفية على العنصر نفسه لا كعنصر زائف بـ z-index سالب: الأخير
   كان يسقط خلف طبقة .bg-animation المطلقة في القالب فلا يظهر أصلاً. */
.ent-hero-title .hl {
  white-space: nowrap;
  color: #fff;
  background-image: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.55),
    rgba(143, 136, 255, 0.55)
  );
  background-repeat: no-repeat;
  background-size: 100% 10px;
  background-position: 0 calc(100% - 10px);
  border-radius: 6px;
}

.ent-hero-sub {
  font-size: 18px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--ent-s4);
  max-width: 640px;
}

.ent-hero-en {
  display: block;
  direction: ltr;
  text-align: start;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  margin-top: var(--ent-s2);
}

.ent-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: var(--ent-s4);
}

/* ملاحظة: كان هنا .ent-hero-trust — صفّ أرقام داخل الترويسة.
   نُقل إلى مكوّن StatStrip في قسم مستقلّ تحت الهيرو، لأن الشريط المائل
   يقطع أسفل الترويسة قطرياً فيقع نصف الصفّ خارج السطح الكحلي. */

/* ---------- مخطّط الهيرو ---------- */
.ent-hero-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.28));
}

/* ---------- أحجام نصوص المخطّطات ----------
   الحجم في CSS لا في سمة font-size، لسبب عملي: المخطّط يتقلّص مع عرض الشاشة
   بنسبة viewBox، فحجم 14 وحدة يصبح ~8.6px على شاشة 375px — تحت حدّ القراءة.
   الأحجام هنا تُرفَع في استعلام الوسائط أسفل الملف لتعويض ذلك المعامل.
   (قواعد CSS تغلب سمات العرض في SVG، فلا حاجة لـ !important) */
.ent-hero-svg text,
.ent-arch-svg text {
  font-weight: 500;
}

.ent-hero-svg .h-chan { font-size: 14.5px; font-weight: 600; }
.ent-hero-svg .h-bar  { font-size: 14px; }
.ent-hero-svg .h-core { font-size: 13px; }
.ent-hero-svg .h-side { font-size: 12.5px; }
.ent-hero-svg .h-ext  { font-size: 12.5px; font-weight: 600; }
.ent-hero-svg .h-foot { font-size: 12px; }

.ent-arch-svg .a-name { font-size: 15px; }
.ent-arch-svg .a-note { font-size: 12px; font-weight: 400; }
.ent-arch-svg .a-en   { font-size: 11.5px; opacity: 0.85; }

/* تدفّق البيانات على الوصلات — حركة بطيئة لا تلفت النظر عن النصّ */
.js-anim .ent-flow {
  stroke-dasharray: 6 10;
  animation: ent-dash 2.6s linear infinite;
}

@keyframes ent-dash {
  to {
    stroke-dashoffset: -32;
  }
}

.js-anim .ent-pulse {
  animation: ent-pulse 3.2s var(--ent-ease) infinite;
  transform-origin: center;
}

@keyframes ent-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* =============================================================
   4. لماذا تختارنا المؤسسات
   ============================================================= */

.ent-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--ent-s3);
}

.ent-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: var(--ent-s4) var(--ent-s3) var(--ent-s3);
  height: 100%;
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease), border-color var(--ent-dur) var(--ent-ease);
}

/* شريط لوني علوي يُكشف عند المرور — نفس نبرة .work-card في الموقع */
.ent-card::before {
  content: '';
  position: absolute;
  top: -1px;
  inset-inline: -1px;
  height: 3px;
  border-radius: var(--ent-radius) var(--ent-radius) 0 0;
  background: linear-gradient(90deg, var(--ent-brand), var(--ent-cyan));
  opacity: 0;
  transition: opacity var(--ent-dur) var(--ent-ease);
}

.ent-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ent-shadow-md);
  border-color: rgba(117, 109, 231, 0.32);
}

.ent-card:hover::before {
  opacity: 1;
}

.ent-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: var(--ent-s2);
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 8px 20px rgba(117, 109, 231, 0.28);
}

.ent-card:nth-child(2) .ent-card-icon {
  background: linear-gradient(135deg, #38bdf8, #0369a1);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.28);
}

.ent-card:nth-child(3) .ent-card-icon {
  background: linear-gradient(135deg, #2dd4bf, #0f766e);
  box-shadow: 0 8px 20px rgba(45, 212, 191, 0.26);
}

.ent-card:nth-child(4) .ent-card-icon {
  background: linear-gradient(135deg, #f5a524, #c2410c);
  box-shadow: 0 8px 20px rgba(245, 165, 36, 0.26);
}

.ent-card h3 {
  font-size: 19px;
  font-weight: 500;
  color: var(--ent-ink);
  margin: 0 0 10px;
  line-height: 1.5;
}

.ent-card p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ent-muted);
  margin: 0;
}

/* =============================================================
   5. القدرات المؤسسية
   ============================================================= */

.ent-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ent-s3);
}

.ent-cap {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3);
  height: 100%;
  text-decoration: none;
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease), border-color var(--ent-dur) var(--ent-ease);
}

.ent-cap:hover,
.ent-cap:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ent-shadow-md);
  border-color: rgba(117, 109, 231, 0.3);
  text-decoration: none;
}

.ent-cap-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ent-cap-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 21px;
  color: var(--ent-brand-deep);
  background: rgba(117, 109, 231, 0.1);
  transition: background var(--ent-dur) var(--ent-ease), color var(--ent-dur) var(--ent-ease);
}

.ent-cap:hover .ent-cap-icon {
  background: var(--ent-brand);
  color: #fff;
}

.ent-cap h3 {
  font-size: 18.5px;
  font-weight: 500;
  color: var(--ent-ink);
  margin: 0;
  line-height: 1.5;
}

.ent-cap p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ent-muted);
  margin: 0 0 var(--ent-s2);
  flex: 1 1 auto;
}

/* رقائق القدرات الفرعية — تُظهر العمق دون فقرة إضافية */
.ent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 var(--ent-s2);
  padding: 0;
  list-style: none;
}

.ent-chips li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ent-ink-2);
  background: var(--ent-surface-mute);
  border: 1px solid var(--ent-line);
  border-radius: 999px;
  padding: 5px 11px;
  line-height: 1.6;
}

.ent-cap-more {
  font-size: 14px;
  font-weight: 500;
  color: var(--ent-brand-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ent-cap-more i {
  font-size: 12px;
  transition: transform var(--ent-dur) var(--ent-ease);
}

.ent-cap:hover .ent-cap-more i {
  transform: translateX(-4px); /* RTL: السهم يشير يساراً */
}

/* =============================================================
   6. كيف نهندس البرمجيات + مخطّط الطبقات
   ============================================================= */

.ent-eng {
  display: flex;
  gap: var(--ent-s6);
  align-items: flex-start;
}

.ent-eng-principles {
  flex: 1 1 52%;
  min-width: 0;
}

/* ملاحظة: كان هنا position:sticky وtop:96px، وكانا بلا أثر.
   ‎.ent-dark‎ عليه ‎overflow:hidden‎ لاحتواء طبقات الخلفية الحيّة، وأي
   حاوية بـ overflow غير visible تصبح هي «حاوية التمرير» للعنصر اللاصق —
   والقسم لا يمرَّر داخلياً، فلا يلتصق شيء. أُزيلا بدل تركهما يوهمان
   بسلوك غير موجود. ارتفاع العمودين متقارب أصلاً فلا يخسر التخطيط شيئاً. */
.ent-eng-arch {
  flex: 1 1 48%;
  min-width: 0;
}

.ent-principle {
  display: flex;
  gap: var(--ent-s2);
  padding: var(--ent-s3) 0;
  border-bottom: 1px solid var(--ent-line-dark);
}

.ent-principle:last-child {
  border-bottom: 0;
}

.ent-principle-no {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ent-cyan);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.24);
  direction: ltr;
}

.ent-principle h3 {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.5;
}

.ent-principle p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ent-on-dark-2);
  margin: 0;
}

/* ---------- مخطّط الطبقات ---------- */
.ent-arch-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ent-line-dark);
  border-radius: var(--ent-radius-lg);
  padding: var(--ent-s3);
  backdrop-filter: blur(2px);
}

.ent-arch-card figcaption {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ent-on-dark-3);
  margin-bottom: var(--ent-s2);
  direction: ltr;
  text-align: start;
}

.ent-arch-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
   7. الجاهزية التشغيلية
   ============================================================= */

/* ستة عناصر: ثلاثة أعمدة في صفّين — لا أربعة يتبعها عمودان يتيمان */
.ent-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ent-s2);
}

@media (max-width: 991px) {
  .ent-rel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .ent-rel-grid { grid-template-columns: 1fr; }
}

.ent-rel {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3);
  transition: border-color var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease);
}

.ent-rel:hover {
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow: var(--ent-shadow-sm);
}

.ent-rel-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #0f766e;
  background: rgba(45, 212, 191, 0.13);
}

.ent-rel h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--ent-ink);
  margin: 0 0 6px;
  line-height: 1.5;
}

.ent-rel p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ent-muted);
  margin: 0;
}

/* =============================================================
   8. الستاك التقني مصنّفاً
   ============================================================= */

/* ستة مجالات: ثلاثة أعمدة في صفّين. الملء التلقائي (auto-fit) كان يعطي خمسة
   أعمدة على الشاشات العريضة فيبقى عمود يتيم في السطر الثاني. */
.ent-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ent-s2);
  margin-bottom: var(--ent-s4);
}

@media (max-width: 991px) {
  .ent-stack-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .ent-stack-grid { grid-template-columns: 1fr; }
}

.ent-stack-col {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ent-line-dark);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3) 20px;
}

.ent-stack-col h3 {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.5;
}

.ent-stack-col > span {
  display: block;
  font-size: 18px;
  color: var(--ent-on-dark-3);
  margin-bottom: 14px;
  line-height: 1.7;
}

.ent-stack-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ent-stack-col li {
  direction: ltr;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ent-on-dark);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--ent-line-dark);
  border-radius: 7px;
  padding: 5px 10px;
  line-height: 1.6;
}

.ent-stack-note {
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ent-on-dark-2);
  max-width: 720px;
  margin: 0 auto var(--ent-s3);
}

.ent-stack-note strong {
  color: #fff;
  font-weight: 500;
}

/* =============================================================
   9. القطاعات — قيمة الأعمال لا الاسم فقط
   ============================================================= */

.ent-ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ent-s2);
}

.ent-ind {
  display: block;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: 22px var(--ent-s3);
  text-decoration: none;
  height: 100%;
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease), border-color var(--ent-dur) var(--ent-ease);
}

.ent-ind:hover,
.ent-ind:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ent-shadow-md);
  border-color: rgba(117, 109, 231, 0.3);
  text-decoration: none;
}

.ent-ind-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ent-ind-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
}

.ent-ind h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--ent-ink);
  margin: 0;
  line-height: 1.5;
}

.ent-ind p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ent-muted);
  margin: 0;
}

/* =============================================================
   10. الحركة
   =============================================================
   حركة واحدة فقط: كشف تدريجي عند الظهور، بمدّة 400ms وإزاحة 16px.
   لا شيء يتحرّك بعد استقراره. من طلب تقليل الحركة يرى كل شيء ثابتاً.
   ============================================================= */

.js-anim .ent-reveal {
  opacity: 0;
  /* إزاحة أوضح ومدّة أطول: الحركة القصيرة (16px / 420ms) كانت تنتهي قبل
     أن يستقرّ نظر الزائر على البطاقة، فلا يُدرَك أن هناك حركة أصلاً. */
  transform: translateY(24px);
  transition: opacity 560ms var(--ent-ease), transform 560ms var(--ent-ease);
  will-change: opacity, transform;
}

.js-anim .ent-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- ظهور ترويسات الأقسام ----------
   البطاقات كانت تظهر تدريجياً بينما يظهر عنوان القسم فوقها دفعةً واحدة،
   فيبدو القسم كأنه بدأ قبل أن يُقدَّم. نضمّ الترويسة إلى الحركة نفسها
   بإزاحة أقصر (10px) لأنها تسبق البطاقات لا تنافسها.

   مستثنى بوعي: ترويسة الصفحة (#page-head) وهيرو الرئيسية ودراسة الحالة —
   محتوى فوق الطيّة، وإخفاؤه لحظةً عند التحميل خسارة لا مكسب. */
.js-anim .ent-head,
.js-anim .cs-sec-head,
.js-anim #main .row-title,
.js-anim #main .sec-lead {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms var(--ent-ease), transform 380ms var(--ent-ease);
}

.js-anim .ent-head.is-visible,
.js-anim .cs-sec-head.is-visible,
.js-anim #main .row-title.is-visible,
.js-anim #main .sec-lead.is-visible {
  opacity: 1;
  transform: none;
}

/* العنوان يسبق نصّه التمهيدي بفارق محسوس لا متساوٍ */
.js-anim #main .sec-lead { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .ent-head,
  .js-anim .cs-sec-head,
  .js-anim #main .row-title,
  .js-anim #main .sec-lead {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* تدرّج زمني أوسع بين عناصر الصفّ الواحد — الفارق السابق (70ms) كان
   أقصر من أن يُقرأ كتتابع، فتبدو البطاقات وكأنها ظهرت معاً. */
.js-anim .ent-reveal.d1 { transition-delay: 110ms; }
.js-anim .ent-reveal.d2 { transition-delay: 230ms; }
.js-anim .ent-reveal.d3 { transition-delay: 350ms; }
.js-anim .ent-reveal.d4 { transition-delay: 470ms; }

/* نفس التوسيع لتدرّج القالب الأصلي (.reveal-d1..d5 في site-additions.css) */
.js-anim .reveal-d1 { transition-delay: 120ms; }
.js-anim .reveal-d2 { transition-delay: 250ms; }
.js-anim .reveal-d3 { transition-delay: 380ms; }
.js-anim .reveal-d4 { transition-delay: 510ms; }
.js-anim .reveal-d5 { transition-delay: 640ms; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .ent-reveal,
  .js-anim .ent-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-anim .ent-flow,
  .js-anim .ent-pulse {
    animation: none;
  }


  .ent-card:hover,
  .ent-cap:hover,
  .ent-ind:hover {
    transform: none;
  }
}

/* =============================================================
   11. الوصولية
   ============================================================= */

/* ---------- مساحة اللمس على الشاشات الصغيرة ----------
   روابط القالب في الفوتر ودرج التنقّل ارتفاعها 28–32px، وهو دون الحدّ
   الموصى به (44px) فتُخطئ الإصابة على الجوال. نضيف حشوة رأسية بدل تكبير
   الخط، فلا يتغيّر شكل الفوتر على سطح المكتب. */
@media (max-width: 767px) {
  #footer .footer-menu > li > a,
  #footer .address-holder a,
  #nav .navbar-collapse .nav > li > a,
  #nav .navbar-collapse .mega-link {
    display: block;
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 22px;
  }

  /* القائمة تصبح أطول بعد التوسعة — نُبقيها قابلة للتمرير داخل نفسها */
  #nav .navbar-collapse {
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* زرّ القائمة وأيقونات التواصل: مربّع 44px حول الأيقونة نفسها،
     دون تكبير الأيقونة فيبقى الشكل كما هو */
  #nav .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  #footer .social-menu > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

.ent-cap:focus-visible,
.ent-ind:focus-visible,
.ent-hero-cta a:focus-visible {
  outline: 3px solid var(--ent-cyan);
  outline-offset: 3px;
}

.ent-dark a:focus-visible {
  outline-color: var(--ent-cyan);
}

/* =============================================================
   12. الاستجابة
   ============================================================= */

@media (max-width: 1199px) {
  .ent-hero h1.ent-hero-title { font-size: 44px; }
  .ent-hero,
  .ent-eng { gap: var(--ent-s5); }
}

@media (max-width: 991px) {
  :root {
    --ent-s6: 60px;
    --ent-s7: 72px;
  }

  .ent-hero,
  .ent-eng {
    flex-direction: column;
    gap: var(--ent-s4);
  }

  .ent-hero-copy,
  .ent-hero-visual,
  .ent-eng-principles,
  .ent-eng-arch {
    flex: 1 1 100%;
    width: 100%;
  }

  .ent-hero h1.ent-hero-title { font-size: 38px; }
  .ent-title { font-size: 31px; }
}

/* =============================================================
   13. العمق والتباين — Depth Layer
   =============================================================
   يأتي بعد قواعد الأقسام ليغلبها، وقبل استعلامات الوسائط أدناه
   حتى تبقى تسويات الشاشات الصغيرة هي الأخيرة.

   المشكلة التي يعالجها: الأقسام كانت أسطحاً بيضاء مسطّحة عليها مربّعات
   بيضاء مسطّحة — فيقرأ الفرق بينها كخطّ حدّ رفيع لا كارتفاع. النتيجة
   صفحة «جافة كالجريدة». الحلّ ثلاث طبقات: نسيج خفيف على القسم، وسطح
   متدرّج على البطاقة، وظلّ ملوّن يفصلها عمّا تحتها.
   ============================================================= */

/* ---------- 13.1 خلفية الأقسام — الشريط المائل ----------
   نستعمل مفردة القالب نفسها الموجودة في الرئيسية وأغلب الصفحات:
   شريط لوني مائل بـ ‎skewY(10deg)‎ خلف القسم، لا لوناً مسطّحاً.

   الميل هو ما يربط الأقسام الجديدة ببقية الموقع بصرياً: نفس زاوية
   ‎.message-area .bg-color‎ و‎.sec-band .bg-color‎ في site-additions.css.

   ‎scaleY(1.15)‎ ضروري: الميل يرفع أحد الطرفين ويخفض الآخر، فبلا تمديد
   رأسي تظهر مثلّثات بيضاء في الزاويتين.

   الإيقاع: أبيض ← شريط مائل ← أبيض. الأقسام العادية تبقى بيضاء نظيفة،
   و‎.soft‎ وحدها تحمل الشريط. */
.ent-section.soft {
  background: transparent;
  position: relative;
  isolation: isolate;
}

/* display:block إلزامي — القسم ‎.container-fluid‎ وBootstrap يحجز عنصريه
   الزائفين لقاعدة clearfix بـ display:table فينكمشان إلى صفر.
   راجع الملاحظة الكاملة عند ‎.ent-dark::before‎ أعلاه. */
.ent-section.soft::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #f6f9fc;
  transform: skewY(10deg) scaleY(1.15);
  transform-origin: center center;
  top: 70px;
}
#reliability::before {
  transform: unset;
  top: 0;
}

/* =============================================================
   صفّ أرقام الشركة (.ent-stats)
   =============================================================
   يُبطل تنسيق #stats في site-additions.css: خلفية rebeccapurple
   وأربعة ألوان نيون للأرقام. اللون الآن واحد من الهوية، والتمييز
   بين البطاقات يأتي من الأيقونة لا من لون الرقم. */
.ent-stats {
  padding-block: var(--ent-s6);
  background-color: transparent;
}

.ent-stats.tight {
  padding-top: var(--ent-s4);
}

.ent-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ent-s2);
}

.ent-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ent-s4) var(--ent-s2) var(--ent-s3);
  background: var(--ent-card-bg);
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease), border-color var(--ent-dur) var(--ent-ease);
}

.ent-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(117, 109, 231, 0.3);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow-hover);
}

.ent-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 22px;
  color: #fff;
  margin-bottom: var(--ent-s2);
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 10px 22px -7px rgba(79, 70, 229, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ent-stat-value {
  display: block;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ent-ink);
  letter-spacing: -0.02em;
  /* الرقم قد يبدأ بـ + والنصّ عربي — نمنع انقلاب ترتيب الإشارة */
  unicode-bidi: plaintext;
}

.ent-stat-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ent-ink-2);
  margin-top: 8px;
}

.ent-stat-note {
  display: block;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ent-muted);
  margin-top: 8px;
}

@media (max-width: 767px) {
  .ent-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ent-stat {
    padding: var(--ent-s3) 12px 20px;
  }

  .ent-stat-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .ent-stat-value {
    font-size: 30px;
  }

  .ent-stat-label {
    font-size: 13.5px;
  }

  .ent-stat-note {
    display: none; /* الملاحظة تفصيل ثانوي يزدحم على شاشة ضيّقة */
  }
}

/* ---------- 13.2 سطح البطاقة ---------- */
.ent-card,
.ent-cap,
.ent-rel,
.ent-ind {
  background: var(--ent-card-bg);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  border-color: rgba(200, 210, 226, 0.9);
}

.ent-card:hover,
.ent-cap:hover,
.ent-rel:hover,
.ent-ind:hover,
.ent-cap:focus-visible,
.ent-ind:focus-visible {
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow-hover);
}

/* زخرفة ركنية: قوس نقطي شديد الخفوت أعلى البطاقة.
   وظيفتها كسر بياض المربّع دون إضافة عنصر بصري يُقرأ كمحتوى. */
.ent-card,
.ent-cap,
.ent-rel {
  position: relative;
  overflow: hidden;
  /* سياق تكديس خاص بالبطاقة: يسمح بدفع الزخرفة إلى z-index سالب فتبقى
     فوق خلفية البطاقة وتحت محتواها. بغيره تُرسم الزخرفة المطلقة فوق
     الأيقونة — وفي RTL تقع في الركن نفسه الذي تشغله الأيقونة. */
  isolation: isolate;
}

.ent-card::after,
.ent-cap::after,
.ent-rel::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -34px;
  inset-inline-start: -34px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  pointer-events: none;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(79, 70, 229, 0.16) 1.5px, transparent 0);
  background-size: 11px 11px;
  opacity: 0.75;
  transition: opacity var(--ent-dur) var(--ent-ease), transform var(--ent-dur) var(--ent-ease);
}

.ent-card:hover::after,
.ent-cap:hover::after,
.ent-rel:hover::after {
  opacity: 1;
  transform: scale(1.12);
}

/* الشريط اللوني العلوي: كان يظهر عند المرور فقط فتبدو البطاقة بلا هوية
   في حالتها الساكنة. صار ظاهراً دائماً بعرض جزئي، ويمتدّ عند المرور. */
/* ملاحظة: البطاقة صارت overflow:hidden لاحتواء الزخرفة الركنية،
   فالإزاحة السالبة (-1px) تُقصّ. نُعيد الشريط إلى حافة الصندوق تماماً. */
.ent-card::before {
  opacity: 1;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 58px;
  border-radius: 0;
  transition: width var(--ent-dur) var(--ent-ease);
}

.ent-card:hover::before {
  width: 100%;
}

/* ---------- 13.3 بروز الأيقونات ----------
   الأيقونة كانت مربّعاً لونياً صغيراً. الآن: حجم أكبر، وتدرّج، وهالة
   خارجية تفصلها عن السطح، ووميض داخلي أعلاها يعطيها حجماً. */
.ent-card-icon {
  position: relative;
  width: 58px;
  height: 58px;
  font-size: 26px;
  border-radius: 16px;
  box-shadow: 0 10px 24px -6px rgba(79, 70, 229, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: transform var(--ent-dur) var(--ent-ease);
}

/* حلقة هالة حول الأيقونة */
.ent-card-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 1px solid currentColor;
  opacity: 0.22;
  pointer-events: none;
}

.ent-card:hover .ent-card-icon {
  transform: translateY(-2px) scale(1.04);
}

.ent-cap-icon {
  position: relative;
  width: 52px;
  height: 52px;
  font-size: 23px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(117, 109, 231, 0.16), rgba(56, 189, 248, 0.14));
  box-shadow: inset 0 0 0 1px rgba(117, 109, 231, 0.24);
}

.ent-cap:hover .ent-cap-icon {
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 10px 22px -6px rgba(79, 70, 229, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ent-rel-icon {
  width: 46px;
  height: 46px;
  font-size: 20px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(13, 148, 136, 0.14));
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.22);
}

.ent-rel:hover .ent-rel-icon {
  background: linear-gradient(135deg, #2dd4bf, #0f766e);
  color: #fff;
  box-shadow: 0 10px 22px -6px rgba(15, 118, 110, 0.5);
}

.ent-ind-icon {
  width: 44px;
  height: 44px;
  font-size: 19px;
  border-radius: 13px;
  box-shadow: 0 8px 18px -5px rgba(79, 70, 229, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

/* ---------- 13.4 أرقام مفرّغة للمتتاليات ----------
   حيث تكون البطاقات خطوات متسلسلة، يصير الرقم عنصر التصميم لا شارة
   صغيرة: كبير، مفرّغ، يظهر حدّه فقط. يعطي إيقاعاً بصرياً للتسلسل
   ويملأ فراغ البطاقة دون ضجيج لوني.

   الشفافية مشروطة بدعم text-stroke: بغيره يبقى الرقم مصمتاً مقروءاً
   بدل أن يختفي كلياً. */
.ent-principle-no {
  width: auto;
  height: auto;
  min-width: 52px;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--ent-cyan);
  letter-spacing: -0.02em;
}

@supports (-webkit-text-stroke: 1px red) {
  .ent-principle-no {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--ent-cyan);
  }
}

/* ---------- 13.5 أعمدة الستاك على الكحلي ---------- */
.ent-stack-col {
  background: var(--ent-card-bg-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease);
}

.ent-stack-col:hover {
  border-color: rgba(143, 136, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -16px rgba(0, 0, 0, 0.7);
}

/* أيقونة المجموعة — تُضاف في TechStack.astro */
.ent-stack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 18px;
  color: var(--ent-cyan);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(45, 212, 191, 0.12));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.28);
  margin-bottom: 14px;
}

/* ---------- 13.6 بطاقات إثبات الحجم ----------
   موجودة في site-additions.css بسطح أبيض مسطّح — نرفعها إلى مستوى
   بقية البطاقات حتى لا يبدو القسم من صفحة أخرى. */
.scale-proof .scale-box {
  background: var(--ent-card-bg);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease);
}

.scale-proof .scale-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow-hover);
}

.scale-proof .scale-icon {
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* =============================================================
   14. الصفحات الداخلية — توحيد العمق
   =============================================================
   الحلول والقطاعات و«من نحن» والتقنيات ما تزال على أسطح القالب
   الأصلية: أقسام بيضاء مسطّحة وبطاقات بلا حدّ ولا ظلّ. بعد رفع
   الرئيسية ودراسات الحالة صارت هذه الصفحات تبدو من موقع أقدم.

   نطبّق عليها اللغة نفسها — نسيج القسم، وسطح البطاقة، وبروز الأيقونة —
   دون لمس ترميز القالب أو أصنافه.
   ============================================================= */

/* ---------- 14.1 خلفية الأقسام الداخلية — الشريط المائل ----------
   ‎#ifeatures‎ و‎#tech-strip‎ لهما في القالب خلفية رمادية مسطّحة. نحوّلها
   إلى شريط مائل بالزاوية نفسها المستعملة في الرئيسية، فيتّحد إيقاع
   الصفحات الداخلية مع إيقاع الرئيسية.

   البقية (‎#h-info‎، ‎#page-content‎، ‎#articles‎، ‎.more-features-sec‎)
   تبقى بيضاء: التناوب أبيض ← مائل ← أبيض هو ما يصنع الإيقاع، وشريط في
   كل قسم يُلغيه. */
#ifeatures,
#tech-strip {
  background-color: transparent;
  position: relative;
  isolation: isolate;
}

/* display:block إلزامي — ‎.container-fluid‎ + clearfix. راجع §13.1 */
#ifeatures::before,
#tech-strip::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #f6f9fc;
  transform: skewY(10deg) scaleY(1.15);
  transform-origin: center center;
    top: 70px;
}

/* ---------- 14.2 أسطح البطاقات ----------
   ‎#features-holder‎ مستثنى: بطاقاته مكدّسة بـ position:absolute في
   أكورديون «كيف نعمل»، وإعطاؤها سطحاً وحدوداً يكشف الطبقات المخفية. */
.feature-box:not(#features-holder .feature-box),
.mfeature-box,
.content-holder,
.prose-panel,
.step-box,
.related-card {
  background: var(--ent-card-bg);
  border: 1px solid rgba(200, 210, 226, 0.9);
  border-radius: var(--ent-radius);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease), border-color var(--ent-dur) var(--ent-ease);
}

.feature-box:not(#features-holder .feature-box) {
  padding: 30px 22px;
}

.mfeature-box:hover,
.content-holder:hover,
.related-card:hover,
.feature-box:not(#features-holder .feature-box):hover {
  transform: translateY(-4px);
  border-color: rgba(117, 109, 231, 0.32);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow-hover);
}

/* ---------- 14.3 تأطير أيقونات القالب ----------
   أيقونات ‎.feature-box‎ صور PNG شفّافة معلّقة في الفراغ. لوحة دائرية
   خفيفة خلفها تجعلها تُقرأ كأيقونة مؤطَّرة بنفس لغة بقية الموقع،
   دون استبدال أصول القالب. */
.feature-box:not(#features-holder .feature-box) .feature-icon img {
  padding: 15px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(117, 109, 231, 0.13), rgba(56, 189, 248, 0.1));
  box-shadow: inset 0 0 0 1px rgba(117, 109, 231, 0.2),
    0 12px 26px -12px rgba(79, 70, 229, 0.45);
  transition: transform var(--ent-dur) var(--ent-ease);
}

.feature-box:not(#features-holder .feature-box):hover .feature-icon img {
  transform: translateY(-2px) scale(1.04);
}

/* أيقونة بطاقات ‎.mfeature-box‎ — بعضها بلا أيقونة أصلاً، فتُضاف في
   صفحات الحلول والقطاعات وتُوحَّد هنا */
.mfeature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 21px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 10px 22px -7px rgba(79, 70, 229, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  margin-bottom: 16px;
}

.mfeature-box:hover .mfeature-icon {
  transform: translateY(-2px);
}

/* أيقونة بطاقة السؤال الشائع */
.content-holder {
  position: relative;
}

.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ent-brand-deep);
  background: linear-gradient(135deg, rgba(117, 109, 231, 0.16), rgba(56, 189, 248, 0.12));
  box-shadow: inset 0 0 0 1px rgba(117, 109, 231, 0.22);
  margin-bottom: 12px;
}

/* ---------- 14.4 أيقونة ترويسة القسم ---------- */
.row-icon {
  color: var(--ent-brand-deep);
}

/* ---------- 14.5 شارات التقنيات ---------- */
.tag-list li {
  border-color: rgba(200, 210, 226, 0.95);
  background: linear-gradient(180deg, #ffffff, #f6f8fd);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.05);
}

@media (max-width: 767px) {
  :root {
    --ent-s5: 40px;
    --ent-s6: 48px;
    --ent-s7: 56px;
  }

  .feature-box:not(#features-holder .feature-box) { padding: 24px 18px; }

  /* الزخرفة الركنية والنسيج يصغران على الجوال حتى لا يزاحما النصّ */
  .ent-card::after,
  .ent-cap::after,
  .ent-rel::after {
    width: 92px;
    height: 92px;
    top: -26px;
    inset-inline-start: -26px;
  }

  .ent-card-icon { width: 52px; height: 52px; font-size: 23px; }
  .ent-principle-no { font-size: 32px; min-width: 42px; }

  #top-content.ent-hero-holder {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .ent-hero { min-height: 0; }

  .ent-hero h1.ent-hero-title {
    font-size: 30px;
    line-height: 1.42;
  }

  /* الخطّ اللوني تحت الكلمة المفتاحية يفترض سطراً واحداً؛
     على الجوال قد تلتفّ الكلمة فيقطعه — نلغيه بدل أن يظهر مكسوراً. */
  /* على الجوال قد تلتفّ الكلمة سطرين فينكسر الخطّ اللوني — نلغيه */
  .ent-hero-title .hl {
    white-space: normal;
    background-image: none;
  }

  .ent-hero-sub { font-size: 16px; }
  .ent-title { font-size: 26px; }
  .ent-lead { font-size: 15.5px; }

  .ent-hero-cta { flex-direction: column; align-items: stretch; }
  .ent-hero-cta a { text-align: center; }

  .ent-principle { gap: 14px; padding: 20px 0; }
  .ent-principle h3 { font-size: 17.5px; }

  .ent-card,
  .ent-cap,
  .ent-rel { padding: 20px; }

  .ent-arch-card { padding: 18px 14px; }

  /* المخطّطات تتقلّص إلى ~0.62 من مقاسها على شاشة 375px،
     فنرفع الأحجام لتعود القراءة فوق 11px تقريباً.
     الأطوال مُتحقَّق منها: أطول سلسلة تبقى داخل مستطيلها بعد الرفع. */
  .ent-hero-svg .h-chan { font-size: 21px; }
  .ent-hero-svg .h-bar  { font-size: 19px; }
  .ent-hero-svg .h-core { font-size: 19px; }
  .ent-hero-svg .h-side { font-size: 19px; }
  .ent-hero-svg .h-ext  { font-size: 19px; }
  .ent-hero-svg .h-foot { font-size: 19px; }

  .ent-arch-svg .a-name { font-size: 19px; }
  .ent-arch-svg .a-note { font-size: 17px; }
  .ent-arch-svg .a-en   { font-size: 17px; }
}