/* ════════════════════════════════════════════════
   Findly — النسخة الداكنة
   لغة بصرية مستوحاة من أسلوب حديث في مواقع الشحن:
   خلفية كحلية شبه سوداء · عنوان ضخم بخط رفيع ·
   صور مستطيلة بزوايا 12px · تسميات بين قوسين · أزرار بزوايا 14px.

   الألوان ألوان Findly نفسها — الكحلي والبرتقالي.
   الملف مستقل تماماً عن styles.css.
   ════════════════════════════════════════════════ */

:root {
  --navy      : #003060;   /* كحلي الشعار */
  --ink-900   : #04121f;   /* خلفية الصفحة */
  --ink-800   : #071c2f;   /* البطاقات */
  --ink-700   : #0d2942;   /* الحدود والفواصل */
  --orange    : #FF914C;
  --orange-dk : #f2762a;

  --text      : #f2f7fc;
  --text-dim  : #c2d3e2;   /* رُفع تبايُنه بطلب المالك — كان #93a9be وكان باهتاً */
  --text-mute : #93a9be;   /* للتفاصيل الثانوية فقط */

  --radius    : 22px;
  --radius-sm : 14px;
  --pill      : 999px;

  /* بطاقات زجاجية فوق صورة الواجهة */
  --glass     : rgba(255,255,255,.055);
  --glass-2   : rgba(255,255,255,.09);
  --glass-brd : rgba(255,255,255,.12);

  /* عرض المحتوى يكبر مع الشاشة بدل أن يبقى ثابتاً ويترك فراغاً عند الـ zoom out */
  --wrap      : 1240px;
  --header-h  : 108px;  /* رُفع ليتّسع للشعار الأكبر */

  /* الخط: Arial بطلب المالك.
     ملفات Fustat ما زالت في assets/fonts وتعريفها في fonts.css —
     للرجوع إليه: أعِد وسم fonts.css في الـ HTML وبدّل السطر التالي. */
  --font: Arial, 'Helvetica Neue', Helvetica, 'Segoe UI', Tahoma, sans-serif;
}

/* ── الأساسيات ── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; inset-block-start: -100px; inset-inline-start: 16px; z-index: 200;
  background: var(--orange); color: #08151f; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-weight: 700;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }

/* الشاشات العريضة وحالات الـ zoom out: وسّع المحتوى بدل ترك هوامش فارغة */
@media (min-width: 1380px) { :root { --wrap: 1400px; } }
@media (min-width: 1700px) { :root { --wrap: 1560px; } }
@media (min-width: 1950px) { :root { --wrap: 1700px; } }
.wrap-narrow { max-width: 860px; }

/* الحشوة العمودية خُفِّضت من 130px — كانت تترك الأقسام تبدو فارغة */
.section { padding-block: clamp(58px, 6.5vw, 96px); }
.pt-0 { padding-block-start: 0; }

/* ── العنوان الضخم والتسمية بين قوسين ── */

.big-title {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.bracket {
  display: inline-block;
  color: var(--orange);
  font-size: 13.5px;
  font-weight: 700;
  /* التتبّع صفر لا .04em: محتوى هذه التسميات عربي في
     أكثر من أربعين موضعاً عبر الصفحات السبع، والتتبّع
     الموجب يباعد وصلات الحروف المتّصلة فتبدو الكلمة
     مفكّكة. أُبقي التتبّع على .srv-num و .row-num
     و .pcard-n وحدها — محتواها أرقام لاتينية. */
  letter-spacing: 0;
}

.head { margin-block-end: 44px; max-width: 820px; }
.head .bracket { margin-block-end: 16px; }
.head .lead { color: var(--text-dim); font-size: 17.5px; margin-block-start: 18px; }

/* ── الصور البيضوية — العنصر المميّز ── */

.pill-photo {
  display: block;
  /* يبقى: يقصّ الصورة على القطر، ولا نصّ داخل هذا العنصر
     إطلاقاً — ابنه الوحيد <img> في المواضع الخمسة والعشرين.
     حظر overflow: hidden يخصّ الألواح الحاملة للنصّ فقط. */
  overflow: hidden;

  /* 12px = قطر .gthumb نفسه — صورة بطاقة الواجهة التي
     أشار إليها المالك حين قال «متل أول صفحة».
     ليس رقماً جديداً: هو أصلاً قطر .tags li و .gchips span
     و .jump a و .choice.

     الاسم .pill-photo باقٍ عمداً: تغييره يعني لمس 25
     موضعاً في خمسة ملفات مقابل صفر فائدة. */
  border-radius: 12px;

  /* شعرة داكنة: الصورة نافذة مقطوعة في اللوح لا ملصق فوقه.
     فوق خلفية الصفحة لا تكاد تُرى، وداخل البطاقة الكحلية
     هي كل ما يلزم لقراءة العمق. */
  border: 1px solid rgba(0,0,0,.42);

  background: var(--ink-700);
  flex: none;
}
.pill-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.pill-photo:not(.big):not(.wide):not(.tall) { inline-size: 92px; block-size: 52px; }
.pill-photo.big  { inline-size: 100%; aspect-ratio: 16 / 9; }
.pill-photo.wide { inline-size: 100%; aspect-ratio: 16 / 10; }
/* 1/1 لا 3/4 — هنا وحدها تُطبَّق كلمة «مربّعة» حرفياً.
   المواضع الثلاثة كلها داخل عمودين، و 3/4 كان يعطي صورة
   تصل إلى 950px ارتفاعاً بجانب عمود نصّ نصف ارتفاعها،
   و .split محاذاته وسطية فينتج فراغ توسيط ميت.
   والمصادر الثلاثة أفقية 3:2، فالقصّ إلى 3/4 يُظهر 50%
   من عرض اللقطة بينما 1/1 يُظهر 66.7% — قصّ أفضل.
   .big تبقى 16/9 و .wide تبقى 16/10 عمداً. */
.pill-photo.tall { inline-size: 100%; aspect-ratio: 1 / 1; }

/* ── الأزرار ── */

.pill {
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap;          /* وإلا انكسر نص الزر إلى سطرين */
  flex: none;
  padding: 8px 10px 8px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--pill);
  font: inherit; font-size: 16px; font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .18s;
}
html[dir="rtl"] .pill { padding: 8px 26px 8px 10px; }
.pill:hover { transform: translateY(-2px); }

.pill-accent { background: var(--orange); color: #08151f; }
.pill-accent:hover { background: var(--orange-dk); }

.pill-light { background: var(--text); color: var(--ink-900); }
.pill-light:hover { background: #fff; }

.pill-ghost { border-color: rgba(234,241,248,.28); color: var(--text); }
.pill-ghost:hover { border-color: var(--text); background: rgba(234,241,248,.07); }
.pill-ghost { padding-inline: 26px; }

.pill-arrow {
  inline-size: 38px; block-size: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8,21,31,.16);
}
.pill-arrow svg { inline-size: 16px; block-size: 16px; }
/* السهم يشير للخارج في كلا الاتجاهين */
html[dir="rtl"] .pill-arrow svg,
html[dir="rtl"] .circle-btn svg { transform: scaleX(-1); }

.circle-btn {
  inline-size: 52px; block-size: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(234,241,248,.3);
  color: var(--text);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.circle-btn:hover { background: var(--orange); border-color: var(--orange); color: #08151f; transform: translateY(-2px); }
.circle-btn svg { inline-size: 17px; block-size: 17px; }
.circle-btn.sm { inline-size: 42px; block-size: 42px; }
.circle-btn.sm svg { inline-size: 14px; block-size: 14px; }

/* ── شريط وضع المعاينة ──
   أصفر صريح لا يشبه شيئاً في الموقع، كي لا يُخلط بين بيانات
   المثال وبيانات زبون حقيقي. لا يظهر إلا محلياً. */
.demo-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-block-end: 24px; padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255,196,0,.12);
  border: 1px solid rgba(255,196,0,.45);
  border-inline-start: 4px solid #ffc400;
  color: var(--text); font-size: 15px;
}
.demo-bar strong { color: #ffc400; }

/* ── خريطة موقع الشحنة ──

   الدبّوس يوضع بنسبة مئوية من صندوق الصورة لا ببكسلات،
   فيبقى على موضعه عند أي عرض شاشة. والصورة aspect-ratio
   ثابتة حتى لا تقفز الصفحة قبل تحميلها.

   ⚠ الإزاحة inset-inline-start منطقية، والنِّسَب في
   track-map.js مقيسة من يسار الصورة — فيجب تثبيت اتجاه
   الصندوق إلى ltr، وإلا انقلبت الخريطة أفقياً بالعربية
   ووقعت الشحنة في نصف الكرة الآخر. */

.track-map {
  position: relative;
  direction: ltr;                 /* لا يُحذف — انظر أعلاه */
  margin-block-start: 18px;
  background: #071c2f;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  /* ⚠ بلا overflow: hidden — البطاقة المنبثقة تخرج فوق حدّ
     الخريطة، والقصّ كان يبتر نصفها على الشاشات الصغيرة.
     القطر منقول إلى الصورة نفسها بدلاً منه. */
}
.track-map img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,.42);
}

.track-pin {
  position: absolute;
  inline-size: 38px; block-size: 52px;
  /* رأس الدبّوس على النقطة، لا مركزه */
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
  cursor: pointer;
  z-index: 2;
}
.track-pin img { inline-size: 100%; block-size: 100%; display: block; }

/* نبضة هادئة تلفت النظر دون أن تشتّت */
@media (prefers-reduced-motion: no-preference) {
  .track-pin img { animation: pin-pulse 2.6s ease-in-out infinite; }
}
@keyframes pin-pulse {
  0%,100% { transform: scale(1);    opacity: 1;   }
  50%     { transform: scale(1.06); opacity: .92; }
}

/* ── البطاقة المنبثقة ──
   تُقلب فوق الدبّوس، ولا تُقصّ لأن .track-map عليها
   overflow: hidden — لذلك تبقى داخل حدود الصورة بالإزاحة. */
.track-tip {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  /* عرض يتّسع لأطول صفّ (estimated arrival + التاريخ كاملاً) —
     القيم لا تُكسر في منتصفها، انظر قاعدة b أدناه */
  inline-size: max-content; max-inline-size: 300px;
  display: grid; gap: 7px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(13,32,50,.97), rgba(4,18,31,.97));
  border: 1px solid rgba(255,145,76,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 28px rgba(0,0,0,.55);
  font-size: 13.5px; line-height: 1.45;
  text-align: start;
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
}
.track-pin:hover .track-tip,
.track-pin:focus-visible .track-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.track-tip-head {
  font-weight: 700; color: var(--orange);
  font-size: 14px;
  padding-block-end: 8px; margin-block-end: 3px;
  border-block-end: 1px solid rgba(255,145,76,.28);
}
.track-tip-row {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 18px;
}
.track-tip-row em {
  font-style: normal; color: var(--text-mute);
  font-size: 12px; letter-spacing: .02em;
  /* توحيد أحرف التسميات الإنكليزية — المفاتيح تأتي من سياقات
     مختلفة فتصل بحالات متضاربة (container · Area · Cartons) */
  text-transform: capitalize;
}
.track-tip-row b {
  color: var(--text); font-weight: 600;
  /* القيم قصيرة بطبيعتها (رقم حاوية · منطقة · تاريخ · عدد) —
     كسرها في المنتصف أقبح من توسيع البطاقة */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.track-map-cap { margin-block-start: 10px; }
.track-map-cap strong { color: var(--text); }

@media (max-width: 520px) {
  .track-pin { inline-size: 24px; block-size: 32px; }
}

/* ── تسوية hidden ──

   لوحة التتبّع تبدّل حالاتها كلّها بـ el.hidden. والخاصية ضعيفة:
   أي قاعدة تضبط display تغلبها — و .mini-facts و .page-actions
   و .callout كلّها تضبط display، فتظهر الحالة المخفيّة فوق
   الظاهرة. لا يُحذف هذا السطر. */
[hidden] { display: none !important; }

/* الزرّ المعطّل أثناء الطلب — بلا هذا يبقى شكله قابلاً للضغط */
.pill:disabled,
.pill:disabled:hover {
  opacity: .55;
  cursor: default;
  transform: none;
}

/* بطاقات الشحنات */
#trackOut { display: grid; gap: 20px; }

/* ── الهيدر ── */

/* الهيدر شفّاف فوق الصورة، ويكتسب خلفية زجاجية عند التمرير */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
.hdr.scrolled {
  background: rgba(4,18,31,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-block-end-color: rgba(234,241,248,.09);
}
.hdr-in { block-size: var(--header-h); display: flex; align-items: center; gap: 18px; }

/* الطرفان يتقاسمان المساحة بالتساوي ليقع وسط القائمة في وسط الهيدر تماماً */
.brand { flex: 1 1 0; min-inline-size: 0; }
.brand img { block-size: 86px; inline-size: auto; }

/* ── لوح زجاجي: حافة مضيئة من فوق وظلّ داخلي ── */
.glassy {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 8px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* القائمة لوح زجاجي في وسط الهيدر */
.nav {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 8px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav a {
  padding: 9px 15px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 14.5px; color: var(--text-dim);
  white-space: nowrap;
  transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,.07); }
.nav a.is-active {
  color: var(--text);
  background: var(--glass-2);
  border-color: var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.hdr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 0; min-inline-size: 0; }

.chip {
  inline-size: 42px; block-size: 42px;
  display: grid; place-items: center;
  background: transparent; color: var(--text);
  border: 1px solid rgba(234,241,248,.24);
  border-radius: 50%;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.chip:hover { background: rgba(234,241,248,.1); border-color: rgba(234,241,248,.45); }

.hdr-tel {
  padding: 9px 18px; gap: 9px;
  font-size: 14.5px; color: var(--text);
}
.hdr-tel svg { inline-size: 16px; block-size: 16px; color: var(--orange); flex: none; }

.hdr-cta { font-size: 15px; padding-block: 6px; }
.hdr-cta .pill-arrow { inline-size: 32px; block-size: 32px; }
.hdr-cta .pill-arrow svg { inline-size: 14px; block-size: 14px; }

.menu-toggle { display: none; flex-direction: column; gap: 4px; }
.menu-toggle span {
  inline-size: 16px; block-size: 1.6px; background: var(--text); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

/* ════════════════════════════════════════════════
   الواجهة الجديدة — بطاقات زجاجية فوق صورة
   ════════════════════════════════════════════════ */

.hero-x {
  position: relative;
  margin-block-start: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + 30px) 46px;
  overflow: hidden;
}
/* الصورة أصلاً غامقة ودافئة — تعتيم خفيف فقط كي لا تُطفأ حموليتها المضيئة */
.hero-x-photo {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  object-position: 50% 58%;
  filter: brightness(.86) saturate(1.02);
}
/* حجب متدرّج: قاتم عند الأطراف ليقرأ النص، شفّاف في الوسط لتظهر السفينة */
.hero-x-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,18,31,.82) 0%, rgba(4,18,31,.30) 30%, rgba(4,18,31,.55) 62%, rgba(4,18,31,.96) 100%),
    linear-gradient(90deg, rgba(4,18,31,.66), rgba(4,18,31,.12) 24%, rgba(4,18,31,.12) 76%, rgba(4,18,31,.66));
}
/* دائرة قاتمة خلف العنوان وحده — تفصله عن الحمولة الساطعة دون تعتيم الصورة */
.hero-x-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 30% 30% at 50% 52%, rgba(4,18,31,.62), rgba(4,18,31,.28) 55%, transparent 78%);
}
.hero-x-in { position: relative; z-index: 1; }

.hero-x-grid {
  display: grid;
  /* الأعمدة الجانبية تكبر مع الشاشة، والأوسط يأخذ الباقي دائماً */
  grid-template-columns: minmax(205px, 300px) minmax(0, 1fr) minmax(225px, 330px);
  gap: clamp(20px, 2.2vw, 46px);
  align-items: center;
  min-block-size: clamp(500px, 62vh, 640px);
}

/* ── البطاقة الزجاجية ── */

/* كحلي شفّاف لا أبيض شفّاف — فوق صورة فاتحة يبقى النص مقروءاً */
.gcard {
  background: rgba(7, 24, 40, .62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.34);
  padding: 16px 18px;
  transition: background-color .25s, transform .25s;
}
.gcard:hover { background: rgba(7,24,40,.76); transform: translateY(-3px); }

.gcard-top {
  display: flex; align-items: center; gap: 9px;
  color: var(--text-dim); font-size: 13px; font-weight: 500;
  margin-block-end: 12px;
}
.gcard-top svg { inline-size: 17px; block-size: 17px; color: var(--orange); flex: none; }
.gcard-v {
  display: block;
  font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--text);
  margin-block-end: 6px;
}
.gcard-n { color: var(--text-mute); font-size: 12.5px; }

.hx-col { display: grid; gap: 14px; }

/* رقائق صغيرة داخل البطاقة */
.gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.gchips span {
  padding: 4px 11px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--pill);
  font-size: 12px; color: var(--text-dim);
}

/* شريط المراحل المصغّر */
.gbar { display: flex; gap: 4px; margin-block-start: 12px; }
.gbar i { block-size: 4px; flex: 1; border-radius: 3px; background: rgba(255,255,255,.18); }
.gbar i.on { background: var(--orange); }

/* أعمدة صغيرة زخرفية */
.gspark { display: flex; align-items: flex-end; gap: 4px; block-size: 30px; margin-block-start: 12px; }
.gspark i { flex: 1; border-radius: 2px; background: rgba(255,145,76,.32); }
.gspark i:nth-child(2) { background: rgba(255,145,76,.55); }
.gspark i:nth-child(4) { background: var(--orange); }

/* خط زمني مصغّر داخل بطاقة */
.gtrack { display: grid; gap: 0; margin-block-start: 12px; }
.gtrack li {
  position: relative;
  padding-inline-start: 22px; padding-block: 7px;
  font-size: 13px; color: var(--text-dim);
}
.gtrack li::before {
  content: ''; position: absolute;
  inset-inline-start: 3px; inset-block-start: 20px;
  inline-size: 1.5px; block-size: calc(100% - 8px);
  background: rgba(255,255,255,.2);
}
.gtrack li:last-child::before { display: none; }
.gtrack li i {
  position: absolute; inset-inline-start: 0; inset-block-start: 12px;
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: transparent; border: 2px solid rgba(255,255,255,.35);
}
.gtrack li.on i { background: var(--orange); border-color: var(--orange); }
.gtrack li.on { color: var(--text); }

.gthumb {
  display: block; overflow: hidden;
  border-radius: 12px; margin-block-start: 12px;
  aspect-ratio: 16 / 9;
}
.gthumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── العمود الأوسط ── */

/* الشريط التعريفي أعلى الواجهة، منفصل عن كتلة العنوان */
.hx-top { display: flex; justify-content: center; padding-block: 8px 4px; }
.hx-top .glass-pill { margin-block-end: 0; }

.hx-center {
  text-align: center; padding-inline: 12px;
  /* تُدفع الكتلة للأسفل لتقع تحت منتصف الصورة */
  padding-block-start: clamp(60px, 17vh, 215px);
  container-type: inline-size;   /* مرجع القياس لحجم العنوان */
}

.glass-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--pill);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 13.5px; color: var(--text-dim);
  margin-block-end: 26px;
}
.glass-pill i {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--orange); flex: none;
}

.hx-title {
  /* يقاس على عرض العمود لا على عرض الشاشة، فلا ينكسر عند الـ zoom out */
  /* العنوان ثلاث كلمات — يُقاس على عرض عموده ويبقى في سطر واحد */
  font-size: clamp(38px, min(14cqi, 8vw), 104px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 4px 34px rgba(4,18,31,.55);
  background: linear-gradient(180deg, #ffffff 26%, #93a9be 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block-end: 22px;
}

.hx-sub {
  max-width: 540px; margin-inline: auto;
  color: var(--text-dim); font-size: 17px;
}

.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 32px; }

.glass-btn {
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap; flex: none;
  padding: 14px 16px 14px 28px;
  background: rgba(255,255,255,.09);
  border: 1px solid var(--glass-brd);
  border-radius: var(--pill);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--text); font-size: 16px; font-weight: 500;
  transition: background-color .22s, transform .2s;
}
html[dir="rtl"] .glass-btn { padding: 14px 28px 14px 16px; }
.glass-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.glass-btn .pill-arrow { background: rgba(255,255,255,.14); }

/* ── شريط أسفل الواجهة ── */

.hx-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  margin-block-start: 40px;
  padding-block-start: 26px;
  border-block-start: 1px solid rgba(255,255,255,.12);
}
.hx-foot .bracket { flex: none; }
.hx-foot ul { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-foot li {
  padding: 8px 16px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--pill);
  background: var(--glass);
  font-size: 14px; color: var(--text-dim);
}

/* ── الواجهة القديمة (محفوظة للتصميم الفاتح) ── */

.hero {
  position: relative;
  min-block-size: min(88vh, 780px);
  display: flex; align-items: flex-end;
  padding-block: 90px 56px;
  overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,18,31,.72) 0%, rgba(4,18,31,.42) 38%, rgba(4,18,31,.94) 100%),
    linear-gradient(90deg, rgba(0,48,96,.42), transparent 60%);
}
.hero-in { position: relative; z-index: 1; inline-size: 100%; }

/* ملاحظة: Arial أعرض من Fustat وحروفه تتلاصق مع التتبّع السالب.
   لذلك التتبّع هنا خفيف جداً — لا تُعده إلى ‎-.05em‎ إلا مع خط رفيع. */
.wordmark {
  font-size: clamp(58px, 14vw, 190px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .95;
  margin-block-end: 34px;
}
.wordmark .reg {
  font-size: .2em; font-weight: 400; letter-spacing: 0;
  vertical-align: super;
  margin-inline-start: .06em;
}

.hero-line { display: flex; align-items: center; gap: 18px; margin-block-end: 22px; }
.hero-tag {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hero-note { max-width: 480px; color: var(--text-dim); font-size: 16px; }

.hero-foot {
  display: flex; align-items: center; gap: 16px;
  margin-block-start: 44px;
}

/* ── بطاقتا المدخل ── */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.dcard {
  display: flex; flex-direction: column;
  padding: 22px;
  border-radius: var(--radius);
  transition: transform .25s;
}
.dcard:hover { transform: translateY(-5px); }
.dcard h2 {
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: 400; letter-spacing: -.02em;
  margin-block: 24px 0;
}
.dcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-block-start: auto; padding-block-start: 30px;
}

.dcard-accent { background: var(--navy); color: #fff; }
.dcard-accent .bracket { color: rgba(255,255,255,.62); }
.dcard-accent .circle-btn { border-color: rgba(255,255,255,.35); color: #fff; }

.dcard-light { background: #f2f7fc; color: var(--ink-900); }
.dcard-light .bracket { color: #5b7691; }
.dcard-light .circle-btn { border-color: rgba(4,18,31,.28); color: var(--ink-900); }
.dcard-light .circle-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── الخدمات ── */

/* ── سقف عدد الأعمدة ──

   auto-fit وحدها تضع أكبر عدد أعمدة يتّسع، وعرض المحتوى
   --wrap يكبر إلى 1700px على الشاشات العريضة (:78-80)،
   وتصغير المتصفّح يزيد العرض بوحدات CSS. فكان عدد الأعمدة
   يتغيّر مع كل تكبير وتصغير، وستّ خدمات تقع على خمسة أعمدة
   فتبقى واحدة يتيمة في سطر وحدها.

   الصيغة تضع سقفاً دون إلغاء الاستجابة: تحت السقف يتصرّف
   auto-fit كما كان وينزل إلى عمود واحد على الجوال، وفوقه
   لا يتجاوز العدد المحدَّد أبداً.

   السطر الأول بديل للمتصفّحات التي لا تعرف max()
   — تتجاهل الثاني وتبقى على السلوك القديم.

   القاعدة: (100% − (عدد−1) × الفجوة) ÷ عدد

   ستّ خدمات ÷ 3 أعمدة = 3+3، ولا يتيم. */
.srv-grid {
  display: grid; gap: 34px 26px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(max(290px, (100% - 52px) / 3), 1fr));
}
.srv { position: relative; }
.srv .pill-photo { margin-block-end: 22px; }
.srv-num {
  display: block;
  color: var(--orange);
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  margin-block-end: 10px;
}
.srv h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; margin-block-end: 10px; }
.srv p { color: var(--text-dim); font-size: 16px; }

/* ── الصفوف (كيف نعمل) ── */

.rows { border-block-start: 1px solid var(--ink-700); }
.row {
  display: grid;
  grid-template-columns: 90px 1fr 1.3fr;
  gap: 28px; align-items: start;
  padding-block: 34px;
  border-block-end: 1px solid var(--ink-700);
  transition: background-color .25s;
}
.row:hover { background: rgba(13,41,66,.35); }
.row-num { color: var(--orange); font-size: 14px; font-weight: 700; letter-spacing: .1em; padding-block-start: 6px; }
.row h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: -.02em; }
.row p { color: var(--text-dim); font-size: 16px; }

/* ── التتبّع ── */

.track-card {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 52px);
}

.segbar { display: flex; gap: 8px; margin-block-end: 40px; }
.segbar span {
  block-size: 3px; flex: 1;
  border-radius: 3px;
  background: rgba(234,241,248,.14);
}
.segbar span.on { background: var(--orange); }

.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.track-copy .bracket { margin-block-end: 16px; }
.track-copy .big-title { margin-block-end: 18px; }
.track-copy p { color: var(--text-dim); margin-block-end: 30px; }

.stages { position: relative; }
.stages li {
  position: relative;
  padding-inline-start: 36px;
  padding-block: 11px;
  font-size: 16.5px;
}
.stages li::before {
  content: '';
  position: absolute;
  inset-inline-start: 6px; inset-block-start: 30px;
  inline-size: 1.5px; block-size: calc(100% - 12px);
  background: rgba(234,241,248,.16);
}
.stages li:last-child::before { display: none; }
.sd {
  position: absolute;
  inset-inline-start: 0; inset-block-start: 18px;
  inline-size: 14px; block-size: 14px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 2px solid var(--orange);
}
.stages li:last-child .sd { background: var(--orange); }

/* ── حقائق صغيرة داخل قسم التتبّع ── */

.mini-facts {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-block: 28px 30px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--ink-700);
}
.mini-facts div { display: flex; flex-direction: column; gap: 6px; }
.mini-facts strong { font-size: 17px; font-weight: 500; color: var(--text); }

/* ── شريط أصناف البضائع ── */

.tags { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 8px 22px; }
.tags li {
  padding: 11px 22px;
  border: 1px solid var(--ink-700);
  border-radius: var(--pill);
  color: var(--text-dim);
  font-size: 15.5px;
  transition: border-color .2s, color .2s, background-color .2s;
}
.tags li:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,145,76,.07); }

/* ── صفّ «لماذا Findly» المختصر ── */

.why-row {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  overflow: hidden;
}
.why-row article {
  padding: 30px 26px;
  border-inline-start: 1px solid var(--ink-700);
  transition: background-color .22s;
}
.why-row article:first-child { border-inline-start: 0; }
.why-row article:hover { background: rgba(13,41,66,.42); }
.why-row .n { display: block; color: var(--orange); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; margin-block-end: 12px; }
.why-row h3 { font-size: 18px; font-weight: 500; margin-block-end: 9px; }
.why-row p { color: var(--text-dim); font-size: 15px; }

/* ── الصفّ الإضافي في قسم التواصل ── */

.contact-extra {
  display: grid; gap: 20px;
  grid-template-columns: 1fr 1.25fr;
  margin-block-start: 20px;
}
.xbox {
  padding: 30px 26px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
}
.xbox h3 { font-size: 19px; font-weight: 500; margin-block: 12px 12px; }
.xbox p { color: var(--text-dim); font-size: 15.5px; }
.xbox .bullets { margin-block: 14px 0; }
.xbox .bullets li { font-size: 15.5px; }

.addr-big { font-size: 21px; font-weight: 500; color: var(--text); margin-block-end: 8px; }
.xbox-h { font-size: 19px; font-weight: 500; margin-block: 12px 12px; }

/* ── صفحة عرض السعر ── */

.quote-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
.quote-layout > * { min-inline-size: 0; }
.quote-side { display: grid; gap: 20px; }

.mini-steps { display: grid; gap: 12px; margin-block-start: 4px; counter-reset: ms; }
.mini-steps li {
  position: relative;
  padding-inline-start: 34px;
  color: var(--text-dim); font-size: 15.5px;
  counter-increment: ms;
}
.mini-steps li::before {
  content: counter(ms);
  position: absolute; inset-inline-start: 0; inset-block-start: 2px;
  inline-size: 22px; block-size: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  color: var(--orange); font-size: 12px; font-weight: 700;
}

/* أزرار أسفل ترويسة الصفحة */
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }

/* صفوف مضغوطة داخل عمود منقسم */
.rows-tight { margin-block-start: 20px; }
.rows-tight .row { grid-template-columns: 56px 1fr; gap: 18px; padding-block: 20px; }
.rows-tight .row h3 { font-size: 18px; }
.rows-tight .row p { grid-column: 2; }

/* صندوق دعوة عريض */
.callout-lg { gap: 32px; padding: 36px; }
.callout-lg .big-title { margin-block: 12px 12px; }
.callout-lg > div { flex: 1 1 420px; }

/* ── من نحن ── */

.about-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
.about-copy .bracket { margin-block-end: 16px; }
.about-copy .big-title { margin-block-end: 24px; }
.about-copy p { color: var(--text-dim); margin-block-end: 16px; }
.quote-line {
  color: var(--text) !important;
  border-inline-start: 2px solid var(--orange);
  padding-inline-start: 20px;
  margin-block-start: 28px !important;
}

/* ── شريط الدعوة ── */

.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 120px);
  text-align: center;
}
.band-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,18,31,.84), rgba(0,31,63,.90));
}
.band-in { position: relative; z-index: 1; }
.band-in .big-title { max-width: 820px; margin-inline: auto; margin-block-end: 16px; }
.band-in p { color: var(--text-dim); font-size: 17.5px; }
.band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-block-start: 36px; }

/* ── النموذج ── */

.qform {
  display: grid; gap: 22px;
  grid-template-columns: 1fr 1fr;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px);
}
.field { display: flex; flex-direction: column; gap: 9px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.field-full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 15px; font-weight: 700; color: var(--text); padding: 0; }
.opt { color: var(--text-dim); font-weight: 400; }

.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--text);
  padding: 13px 16px;
  background: rgba(4,18,31,.6);
  border: 1.5px solid var(--ink-700);
  border-radius: var(--radius-sm);
  inline-size: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-block-size: 88px; }
.field input::placeholder, .field textarea::placeholder { color: #8ea8bf; }

.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,145,76,.15);
}
.field input.invalid, .field textarea.invalid { border-color: #e2564d; }

.err { display: none; color: #ff9a92; font-size: 14px; }
.err.show { display: block; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 4px; }
.choice {
  /* لا يتقلّص أبداً — وإلا انكسر النص داخل الزر إلى عدة سطور */
  flex: 0 0 auto;
  max-inline-size: 100%;
  min-block-size: 54px;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 0 24px;
  border: 1.5px solid var(--ink-700);
  border-radius: var(--pill);
  cursor: pointer; font-size: 15.5px; color: var(--text-dim);
  white-space: nowrap;
  transition: border-color .18s, color .18s, background-color .18s;
}

/* دائرة اختيار مرسومة يدوياً — الافتراضية تظهر بيضاء ثقيلة على الخلفية الداكنة */
.choice input {
  appearance: none; -webkit-appearance: none;
  /* padding صفر ضروري — قاعدة ‎.field input‎ العامة تعطيه حشوة تكبّره */
  padding: 0;
  margin: 0; flex: none;
  inline-size: 20px; block-size: 20px;
  min-inline-size: 20px;
  border: 2px solid #4a6a88;
  border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
  transition: border-color .18s;
}
.choice input::after {
  content: '';
  inline-size: 10px; block-size: 10px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform .18s;
}
.choice input:checked { border-color: var(--orange); }
.choice input:checked::after { transform: scale(1); }
.choice:hover { border-color: rgba(234,241,248,.32); color: var(--text); }
.choice:has(input:checked) {
  border-color: var(--orange); color: var(--orange); background: rgba(255,145,76,.1);
}

.form-foot {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-block-start: 10px; text-align: center;
}

/* ── التواصل ── */

/* سقف 3 أعمدة — ثلاثة أرقام هاتف، صفّ واحد دائماً */
.ccards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(max(270px, (100% - 40px) / 3), 1fr));
}
.ccard {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 30px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  transition: transform .22s, border-color .22s;
}
.ccard:hover { transform: translateY(-5px); border-color: var(--orange); }
.cnum { font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.chint { color: var(--text-dim); font-size: 14.5px; }
.ccard .circle-btn {
  position: absolute;
  inset-block-start: 24px; inset-inline-end: 24px;
}

.addr {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-block-start: 34px;
  color: var(--text-dim); font-size: 17px;
}

/* ── الفوتر ── */

.ftr { border-block-start: 1px solid var(--ink-700); padding-block: 60px 30px; }

.ftr-mark {
  font-size: clamp(52px, 12vw, 155px);
  font-weight: 400; letter-spacing: -.015em; line-height: .95;
  color: #16496f;
  margin-block-end: 44px;
}
.ftr-mark .reg { font-size: .2em; vertical-align: super; letter-spacing: 0; margin-inline-start: .06em; }

.ftr-in {
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between;
  padding-block-end: 30px;
}
.ftr-tag { color: var(--text-dim); font-size: 15.5px; max-width: 320px; }
.ftr-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ftr-nav a { color: var(--text-dim); font-size: 15.5px; transition: color .2s; }
.ftr-nav a:hover { color: var(--orange); }

.ftr-bottom {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--ink-700);
  color: var(--text-dim); font-size: 14.5px;
}
.ftr-bottom .dev { color: var(--orange); font-weight: 600; }

/* ── زر واتساب العائم ── */

.wa-float {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 90;
  inline-size: 56px; block-size: 56px;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(37,211,102,.36);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { inline-size: 31px; block-size: 31px; }

/* ════════════════════════════════════════════════
   مكوّنات الصفحات الداخلية — services.html · about.html
   ════════════════════════════════════════════════ */

.pb-0 { padding-block-end: 0; }

/* الصفحة الحالية: خلفية زجاجية + نص برتقالي */
.nav a.is-active { color: var(--orange); }

/* ── ترويسة الصفحة ── */

/* تُسحب لأعلى لتمرّ الصورة خلف الهيدر الشفّاف */
.page-head {
  position: relative;
  overflow: hidden;
  margin-block-start: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + clamp(40px, 6vw, 76px)) clamp(56px, 8vw, 96px);
}
.page-head-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-head::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,18,31,.80) 0%, rgba(4,18,31,.93) 100%);
}
.page-head-in { position: relative; z-index: 1; }
.page-head .big-title { margin-block: 14px 18px; }
.page-lead { max-width: 620px; color: var(--text-dim); font-size: 18px; }

.crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-mute); }
.crumbs a { color: var(--orange); }
.crumbs a:hover { text-decoration: underline; }

/* ── فهرس القفز ── */

.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.jump a {
  padding: 9px 18px;
  border: 1px solid var(--ink-700);
  border-radius: var(--pill);
  font-size: 14.5px; color: var(--text-dim);
  transition: border-color .18s, color .18s, background-color .18s;
}
.jump a:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,145,76,.08); }

/* ── القسم المنقسم صورة/نص ── */

/* الصفّ صار لوحاً زجاجياً — بطلب المالك.
   التعبئة والحدّ يأتيان من القائمة الموحّدة ثم يغلبهما
   .glass-i؛ هنا الهندسة وحدها.

   الفجوة نزلت من 56px لتدفع ثمن الحشوة الجديدة: بدونها
   كان عمود الصورة سيضيق من 526px إلى 480px، ومعها 505px
   أي خسارة 4% فقط.

   ملاحظة إلزامية: تعليمة border مطلوبة صراحةً وإن كانت
   القائمة الموحّدة تضبط border-color — لأن border-style
   الافتراضي none فلا يُرسم شيء بدونها. */
.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 3vw, 44px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
}
/* بدون هذا يتمدّد عمود الشبكة إلى أعرض محتوى بداخله (الجدول) فتتجاوز الصفحة عرض الشاشة */
.split > * { min-inline-size: 0; }
.split-rev .split-media { order: 2; }
.split-copy > .bracket { margin-block-end: 14px; }
.mid-title {
  font-size: clamp(25px, 3.4vw, 40px);
  font-weight: 400; letter-spacing: -.025em;
  margin-block-end: 18px;
}
.split-copy p { color: var(--text-dim); margin-block-end: 14px; }
.split-lead { color: var(--text) !important; font-size: 18.5px; }
.split-copy .pill { margin-block-start: 12px; }

/* ── قوائم النقاط ── */

.bullets { margin-block: 20px 22px; display: grid; gap: 12px; }
.bullets li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--text-dim);
  font-size: 16.5px;
}
.bullets li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; inset-block-start: 11px;
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.fit {
  border-inline-start: 2px solid var(--orange);
  padding-inline-start: 18px;
  color: var(--text) !important;
}
.fit-k { color: var(--orange); font-weight: 700; }

.note { color: var(--text-mute) !important; font-size: 14.5px; }

/* ── الجداول ── */

.tbl-wrap { overflow-x: auto; max-inline-size: 100%; margin-block: 22px; }
.tbl {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-inline-size: 380px;
}
.tbl-wide { min-inline-size: 640px; }
.tbl caption {
  text-align: start;
  color: var(--orange);
  font-size: 13.5px; font-weight: 700;
  padding-block-end: 12px;
}
.tbl th, .tbl td {
  text-align: start;
  padding: 14px 16px;
  border-block-end: 1px solid var(--ink-700);
}
.tbl thead th {
  color: var(--text);
  font-weight: 700; font-size: 14.5px;
  background: rgba(13,41,66,.5);
  white-space: nowrap;
}
.tbl tbody th { color: var(--text); font-weight: 700; white-space: nowrap; }
.tbl tbody td { color: var(--text-dim); }
.tbl tbody tr:hover { background: rgba(13,41,66,.32); }
.tbl thead th:first-child { border-start-start-radius: 10px; }
.tbl thead th:last-child  { border-start-end-radius: 10px; }

/* ── صندوق الأوراق ── */

/* المستوى الثاني: حفرة محفورة في اللوح لا لوح فوق لوح.

   إشارات .glass-i الأربع تُقلب واحدةً واحدة — التعبئة
   الفاتحة تصير طرحاً من الأسود، والحافّة العليا اللامعة
   تصير ظلاً، والسفلى الغائرة تصير شفةً مضيئة، والظلّ
   الخارجي يُحذف لأن الحفرة لا تُلقي ظلاً على السطح
   المحفورة فيه.

   الحبيبات والتدرّج العلوي محذوفان: الحفرة ليست لوح زجاج
   ثانياً، وحذفهما يوفّر اثنتي عشرة بلاطة 140px في صفحة
   الخدمات وحدها.

   هذا هو ما يمنع «الحليب» عند تداخل الألواح. */
.doc-box {
  margin-block-start: 26px;
  padding: 24px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(0,0,0,.34);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0  1px 0        rgba(0,0,0,.45),
    inset 0  2px 4px -2px rgba(0,0,0,.55),
    inset 0 -1px 0        rgba(255,255,255,.10);
}

/* هوامش أول عنصر وآخره داخل اللوحين تُصفَّر.

   بدون هذا: .bullets تحمل margin-block: 20px 22px
   و .tbl-wrap تحمل 22px — فإسقاط أيٍّ منهما داخل لوح
   حشوته 24px يعطي 44–46px فجوة داخلية ميتة من فوق
   وهامشاً شارداً من تحت، فيبدو كل لوح جديد مائل الحشوة.

   المحدِّد (0,2,0) يغلب .bullets و .rows-tight
   و .split-copy p بلا حاجة إلى !important. */
.doc-box    > :first-child,
.track-card > :first-child { margin-block-start: 0; }

.doc-box    > :last-child,
.track-card > :last-child  { margin-block-end: 0; }
.docs { margin-block: 16px 12px; display: grid; gap: 10px; }
.docs li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--ink-700);
}
.docs li:last-child { border-block-end: 0; padding-block-end: 0; }
.docs em { color: var(--text-mute); font-style: normal; font-size: 14px; direction: ltr; }

/* ── بطاقات المبادئ ── */

/* سقف 4 أعمدة — انظر شرح .srv-grid.
   الأعداد المستعملة 4 و 6 و 8: تصير 4 · 4+2 · 4+4،
   ولا يقع عنصر واحد يتيماً في أي منها. */
.pcards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(max(258px, (100% - 60px) / 4), 1fr));
}
.pcard {
  padding: 30px 26px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  transition: transform .22s, border-color .22s;
}
.pcard:hover { transform: translateY(-5px); border-color: var(--orange); }
.pcard-n { display: block; color: var(--orange); font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-block-end: 14px; }
.pcard h3 { font-size: 19.5px; font-weight: 500; margin-block-end: 10px; }
.pcard p { color: var(--text-dim); font-size: 15.5px; }
.pcard-x {
  margin-block-start: 12px; padding-block-start: 12px;
  border-block-start: 1px solid var(--ink-700);
  color: var(--text-mute) !important; font-size: 14.5px !important;
}
/* داخل عمود منقسم تصبح البطاقات أصغر وأخفّ */
.split-copy .pcards { margin-block-start: 22px; }

/* المستوى الثاني له صورتان: حفرة، وجسم موضوع فوق اللوح.
   هذه أجسام — أربع بطاقات متوازية — فالضوء يبقى فوقها
   ولا يُقلب. لكنها لا تأخذ تعبئة: تراكم التعبئتين
   الشفّافتين هو مصدر «الحليب» لا تراكم الألواح، فبإلغاء
   التعبئة يظهر لون الأب من خلالها وتُرسم بالضوء وحده.
   المحدِّد (0,2,0) يغلب .glass-i (0,1,0) مهما كان ترتيب
   الملفّين. */
.split-copy .pcard {
  padding: 24px 22px;
  background-color: transparent;
  background-image: none;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 6px 18px rgba(0,0,0,.24);
}

/* بدون هذه، .glass-i:hover (0,2,0) في الملفّ اللاحق يعيد
   الظلّ الخماسي الكامل عند المرور فتقفز البطاقة درجةً. */
.split-copy .pcard:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 10px 26px rgba(0,0,0,.30);
}

.split-copy .pcard h3 { font-size: 18px; }

/* ── المعادلات ── */

/* سقف 3 أعمدة — ثلاث معادلات، صفّ واحد دائماً */
.formula-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(max(300px, (100% - 40px) / 3), 1fr));
}
.formula {
  padding: 30px 26px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
}
.formula h3 { font-size: 21px; font-weight: 500; margin-block: 12px 16px; }
.formula p { color: var(--text-dim); font-size: 15.5px; }
.eq {
  display: block;
  padding: 16px 18px;
  margin-block-end: 16px;
  background: rgba(4,18,31,.7);
  border: 1px solid var(--ink-700);
  border-radius: 10px;
  color: var(--orange);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 16px;
  overflow-x: auto;
}
.eq-u { color: var(--text-mute); font-size: .82em; }

.formula-wide { grid-column: 1 / -1; }
.steps-calc {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-block: 20px 4px;
}
.steps-calc li { display: flex; flex-direction: column; gap: 8px; }
.steps-calc .eq { margin-block-end: 0; font-size: 15px; }

/* ── صندوق التنبيه ── */

.callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  justify-content: space-between;
  margin-block-start: 28px;
  padding: 28px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-inline-start: 3px solid var(--orange);
  border-radius: var(--radius-sm);
}
.callout p { color: var(--text-dim); flex: 1 1 340px; }
.callout .pill { flex: none; }

/* ── الأسئلة الشائعة ── */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  transition: border-color .2s;
}
.faq details[open] { border-color: rgba(255,145,76,.5); }
.faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 17px; font-weight: 500;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--orange);
  font-size: 24px; font-weight: 400; line-height: 1;
  transition: transform .22s;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--orange); }
.faq p { padding: 0 24px 22px; color: var(--text-dim); }

/* ── المراحل المفصّلة ── */

.stage-list { display: grid; gap: 0; }
.stage-list li {
  position: relative;
  display: grid; grid-template-columns: 74px 1fr; gap: 22px;
  padding-block: 26px;
  border-block-end: 1px solid var(--ink-700);
}
.stage-list li:first-child { border-block-start: 1px solid var(--ink-700); }
.stage-list h3 { font-size: 20px; font-weight: 500; margin-block-end: 8px; }
.stage-list p { color: var(--text-dim); font-size: 16px; }
.stage-n {
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-700);
  color: var(--text-dim);
  font-size: 14px; font-weight: 700;
}
.stage-list li.is-last .stage-n { background: var(--orange); border-color: var(--orange); color: #08151f; }

/* ── قائمة أرقام التواصل ── */

.contact-list { display: grid; gap: 12px; margin-block: 22px; }
.contact-list li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--ink-700);
}
.contact-list a { font-size: 20px; transition: color .2s; }
.contact-list a:hover { color: var(--orange); }

/* ── رابط «المزيد» تحت شبكة ── */

.more { display: flex; justify-content: center; margin-block-start: 46px; }

/* ════════════════════════════════════════════════
   تمرير الروح الزجاجية على الموقع كلّه
   ------------------------------------------------
   هذا القسم يأتي بعد تعريفات المكوّنات عمداً ليتغلّب عليها،
   فيصبح شكل الأسطح موحّداً في الصفحات السبع بملف واحد.

   ملاحظة أداء: ‎backdrop-filter‎ مكلف، ولا فائدة منه فوق خلفية
   مصمتة. لذلك يُستعمل الضباب فقط فوق الصور (‎.gcard‎ والهيدر
   والقائمة)، أما بقية الأسطح فخلفية شبه شفّافة بلا ضباب —
   المظهر نفسه تقريباً والكلفة أقل بكثير على الجوال.
   ════════════════════════════════════════════════ */

/* توهّج خافت خلف الصفحة كي لا يبدو الأسود مسطّحاً */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 78% 8%,  rgba(0,80,160,.20), transparent 60%),
    radial-gradient(ellipse 60% 45% at 12% 52%, rgba(255,145,76,.09), transparent 62%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,48,96,.28), transparent 65%);
}

/* السطح الزجاجي الموحّد */
.card,
.pcard,
.xbox,
.ccard,
.formula,
.track-card,
.qform,
/* .doc-box خرجت من هنا: صارت حفرة المستوى الثاني.
   .split دخلت مكانها: صارت لوح المستوى الأول. */
.split,
.callout,
.why-row,
.faq details,
.dcard-light {
  background-color: var(--glass);
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%);
  border-color: var(--glass-brd);
}

.faq details[open] { border-color: rgba(255,145,76,.45); }

.dcard-light {
  color: var(--text);
  border: 1px solid var(--glass-brd);
}
.dcard-light .bracket { color: var(--orange); }
.dcard-light .circle-btn { border-color: var(--glass-brd); color: var(--text); }
.dcard-light .circle-btn:hover { background: var(--orange); border-color: var(--orange); color: #08151f; }

/* البطاقة البارزة: زجاج بمسحة برتقالية */
.dcard-accent {
  background-color: rgba(255,145,76,.10);
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%);
  border: 1px solid rgba(255,145,76,.34);
  color: var(--text);
}
.dcard-accent .bracket { color: var(--orange); }
.dcard-accent .circle-btn { border-color: rgba(255,145,76,.5); color: var(--text); }

/* حدود موحّدة للفواصل */
.rows, .row, .stage-list li, .contact-list li, .docs li,
.ftr, .ftr-bottom, .mini-facts, .stage-n, .why-row article {
  border-color: var(--glass-brd);
}

/* العناوين بتدرّج أبيض إلى رمادي — نفس معالجة عنوان الواجهة */
.big-title,
.mid-title {
  background: linear-gradient(180deg, #ffffff 30%, #9fb4c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* حشوة سفلية لعناوين التدرّج — إصلاح لا زينة.

   background-clip: text يرسم التدرّج داخل صندوق الحشوة
   وحده. وارتفاعات الأسطر هنا (1.06 و 1.08) أضيق من
   صندوق حبر Arial، فذيول ج ح خ ع غ م ي س ش ص ض ق
   تقع خارج الصندوق ولا يُرسم عليها تدرّج — فتُعرض
   شفّافة. النتيجة حروف عربية مقصوصة في ثلاثين عنواناً
   عبر الصفحات السبع، وأظهرها عنوان الواجهة نفسه.

   لا تحذف هذه القاعدة، ولا تخفض ارتفاعات الأسطر
   أدناه دون زيادتها. */
.big-title,
.mid-title,
.hx-title {
  padding-block-end: .09em;
}

/* داخل البطاقات الملوّنة يبقى العنوان أبيض مصمتاً */
.dcard h2 { background: none; color: var(--text); }

/* العربية تحتاج تنفّساً أكثر من اللاتينية.
   1.15 يساوي صندوق سطر Arial تماماً بلا فسحة —
   مقبول بالإنكليزية، مضغوط بالعربية.
   العناوين الضخمة تُترك على قيمها كي لا تتحرّك
   كتلة الواجهة، والحشوة أعلاه كافية لمنع القصّ. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.3; }

/* العناوين الضخمة تُستثنى وتُعاد لقيمها صراحةً:
   القاعدة أعلاه محدِّدها أقوى من محدِّدات الأصناف
   المفردة، فبدون هذه الثلاثة كانت ستبتلعها كلها
   ويتحرّك تخطيط الواجهة. */
html[lang="ar"] .big-title { line-height: 1.08; }
html[lang="ar"] .mid-title { line-height: 1.18; }
html[lang="ar"] .hx-title  { line-height: 1.06; }

/* حقول النموذج غائرة لا بارزة — المستوى الثاني.
   كانت أفتح من اللوح الذي تجلس فيه وهذا مقلوب:
   الحقل حفرة يُكتب فيها. حالتا التركيز والخطأ تبقيان. */
.field input, .field textarea {
  background-color: rgba(0,0,0,.28);
  border-color: rgba(0,0,0,.34);
}
.field input:focus, .field textarea:focus { background-color: rgba(255,255,255,.07); }
.choice { border-color: var(--glass-brd); }

/* الجداول */
.tbl th, .tbl td { border-block-end-color: var(--glass-brd); }
.tbl thead th { background: rgba(255,255,255,.06); }
.tbl tbody tr:hover { background: rgba(255,255,255,.035); }

/* ── الأزرار: لوح زجاجي بحافة مضيئة ── */

.pill, .glass-btn, .chip, .circle-btn, .jump a, .tags li, .choice, .gchips span {
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.chip, .circle-btn { border-radius: 14px; }
.tags li, .gchips span, .jump a, .choice { border-radius: 12px; }

.jump a, .tags li, .chip, .pill-ghost { border-color: var(--glass-brd); background: var(--glass); }
.circle-btn { border-color: var(--glass-brd); }

/* الزر البرتقالي: نفس اللوح مع توهّج لونه */
.pill-accent {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 22px rgba(255,145,76,.30);
}
.pill-light {
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 8px 22px rgba(0,0,0,.30);
}
.glass-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 8px 26px rgba(0,0,0,.30);
}
.pill-arrow { border-radius: 11px; }

/* المعادلات */
/* المعادلة حفرة داخل صندوق المعادلات — نفس قلب الإشارات */
.eq {
  background: rgba(0,0,0,.32);
  border-color: rgba(0,0,0,.34);
  box-shadow:
    inset 0  1px 0        rgba(0,0,0,.45),
    inset 0  2px 4px -2px rgba(0,0,0,.55),
    inset 0 -1px 0        rgba(255,255,255,.10);
}

/* ترويسة الصفحات الداخلية: توهّج برتقالي خفيف كواجهة الرئيسية */
.page-head::after {
  background:
    linear-gradient(180deg, rgba(4,18,31,.78) 0%, rgba(4,18,31,.92) 100%),
    radial-gradient(ellipse 55% 60% at 50% 100%, rgba(255,145,76,.14), transparent 70%);
}

/* ════════════════════════════════════════════════
   الرسوم البيانية المتحركة
   ------------------------------------------------
   كل رقم هنا معطى قياسي في قطاع الشحن أو ناتج حسابي
   من المثال المعروض في صفحة الخدمات — لا رقم مخترعاً.
   الحركة تبدأ عند دخول العنصر الشاشة عبر كلاس ‎.play‎.
   ════════════════════════════════════════════════ */

.charts {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.chart-wide { grid-column: 1 / -1; }
.chart-wide .flow { columns: 2; column-gap: 34px; }
.chart-wide .flow::before, .chart-wide .flow-fill { display: none; }
.chart-wide .flow li { break-inside: avoid; }

.chart {
  padding: 26px 24px;
  border-radius: 18px;
  background-color: var(--glass);
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.2);
}
.chart-top {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: 13.5px; font-weight: 500;
  margin-block-end: 6px;
}
.chart-top svg { inline-size: 18px; block-size: 18px; color: var(--orange); flex: none; }
.chart h3 { font-size: 19px; font-weight: 500; margin-block-end: 6px; }
.chart-n { color: var(--text-mute); font-size: 14px; }
.chart-body { margin-block: 22px 16px; }
.chart-out {
  padding-block-start: 14px;
  border-block-start: 1px solid var(--glass-brd);
  color: var(--text-dim); font-size: 14.5px;
}
.chart-out b { color: var(--orange); font-weight: 700; }

/* ── أعمدة أفقية ── */

.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center; }
.bar-k { color: var(--text-dim); font-size: 14px; white-space: nowrap; }
.bar-track {
  block-size: 10px; border-radius: 6px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.bar-fill {
  display: block; block-size: 100%; inline-size: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,145,76,.55), var(--orange));
  transition: inline-size 1.1s cubic-bezier(.22,.8,.28,1);
}
.play .bar-fill { inline-size: var(--w, 0%); }
.bar-row:nth-child(2) .bar-fill { transition-delay: .12s; }
.bar-row:nth-child(3) .bar-fill { transition-delay: .24s; }
.bar-v { color: var(--text); font-size: 14.5px; font-weight: 600; min-inline-size: 62px; text-align: end; }

/* ── مقياس قوسي ── */

.gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gauge svg { inline-size: 100%; max-inline-size: 250px; block-size: auto; }
.gauge-arc {
  fill: none; stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 251.3;      /* نصف محيط دائرة نصف قطرها 80 */
  stroke-dashoffset: 251.3;
  transition: stroke-dashoffset 1.4s cubic-bezier(.22,.8,.28,1);
}
.gauge-bg { stroke: rgba(255,255,255,.10); stroke-dashoffset: 0; }
.play .gauge-arc.gauge-val { stroke-dashoffset: var(--off, 251.3); }
.gauge-mid { text-align: center; margin-block-start: -46px; }
.gauge-num { display: block; font-size: 30px; font-weight: 500; color: var(--orange); letter-spacing: -.02em; }
.gauge-lbl { color: var(--text-mute); font-size: 13px; }

/* ── مقارنة عمودين ── */

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; block-size: 170px; }
.vs-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; block-size: 100%; }
.vs-bar {
  inline-size: 100%; max-inline-size: 78px;
  block-size: 0;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  transition: block-size 1.2s cubic-bezier(.22,.8,.28,1);
}
.play .vs-bar { block-size: var(--h, 0%); }
.vs-col.is-win .vs-bar { background: linear-gradient(180deg, var(--orange), rgba(255,145,76,.45)); }
.vs-v { font-size: 19px; font-weight: 600; color: var(--text); }
.vs-col.is-win .vs-v { color: var(--orange); }
.vs-k { color: var(--text-dim); font-size: 13.5px; text-align: center; }

/* ── خط زمني متحرّك للمراحل ── */

.flow { position: relative; padding-inline-start: 26px; }
.flow::before {
  content: ''; position: absolute;
  inset-inline-start: 6px; inset-block: 10px;
  inline-size: 2px; border-radius: 2px;
  background: rgba(255,255,255,.12);
}
.flow-fill {
  position: absolute;
  inset-inline-start: 6px; inset-block-start: 10px;
  inline-size: 2px; block-size: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--orange), rgba(255,145,76,.25));
  transition: block-size 2.2s cubic-bezier(.4,0,.2,1);
}
.play .flow-fill { block-size: calc(100% - 20px); }

.flow li {
  position: relative;
  padding-block: 9px;
  font-size: 15px; color: var(--text-mute);
  transition: color .4s ease;
}
.flow li i {
  position: absolute;
  inset-inline-start: -26px; inset-block-start: 15px;
  inline-size: 14px; block-size: 14px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 2px solid rgba(255,255,255,.22);
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.play .flow li { color: var(--text-dim); }
.play .flow li i { border-color: var(--orange); }
.play .flow li:last-child i {
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255,145,76,.18);
}
/* كل نقطة تضيء بعد سابقتها */
.flow li:nth-child(1) i { transition-delay: .10s; }
.flow li:nth-child(2) i { transition-delay: .40s; }
.flow li:nth-child(3) i { transition-delay: .70s; }
.flow li:nth-child(4) i { transition-delay: 1.00s; }
.flow li:nth-child(5) i { transition-delay: 1.30s; }
.flow li:nth-child(6) i { transition-delay: 1.60s; }
.flow li:nth-child(7) i { transition-delay: 1.90s; }
.flow li:nth-child(n) { transition-delay: inherit; }

/* ── أعمدة زخرفية صغيرة داخل بطاقات الواجهة ── */

.play .gspark i { animation: sparkUp .9s cubic-bezier(.22,.8,.28,1) both; }
.gspark i:nth-child(1) { animation-delay: .05s }
.gspark i:nth-child(2) { animation-delay: .15s }
.gspark i:nth-child(3) { animation-delay: .25s }
.gspark i:nth-child(4) { animation-delay: .35s }
.gspark i:nth-child(5) { animation-delay: .45s }
@keyframes sparkUp { from { block-size: 10%; opacity: .3 } to { block-size: var(--h,60%); opacity: 1 } }

/* شريط المراحل في بطاقة الواجهة يمتلئ بالتتابع */
.play .gbar i.on { animation: segIn .5s ease both; }
.gbar i:nth-child(1) { animation-delay: .1s }
.gbar i:nth-child(2) { animation-delay: .25s }
.gbar i:nth-child(3) { animation-delay: .4s }
@keyframes segIn { from { transform: scaleX(0); transform-origin: inline-start } to { transform: scaleX(1) } }

@media (prefers-reduced-motion: reduce) {
  .bar-fill, .gauge-arc, .vs-bar, .flow-fill,
  .flow li, .flow li i { transition: none !important; }
  .play .gspark i, .play .gbar i.on { animation: none !important; }
}

/* ── الظهور التدريجي ── */

/* المسافة 14px لا 24: النص يستقرّ بدل أن يطير.
   المنحنى مشترك مع glass.css، وله بديل مكتوب هنا
   كي لا تنكسر القاعدة إن أُزيلت تلك الطبقة. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .6s var(--ease, cubic-bezier(.22,.61,.36,1)),
    transform .6s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.reveal.in { opacity: 1; transform: none; }

/* التدرّج يغطّي ثمانية: صفّ الخدمات ستّ بطاقات،
   وكان ينتهي عند الرابعة فتهبط البقية دفعة واحدة */
.reveal-group > *:nth-child(2) { transition-delay: .07s; }
.reveal-group > *:nth-child(3) { transition-delay: .14s; }
.reveal-group > *:nth-child(4) { transition-delay: .21s; }
.reveal-group > *:nth-child(5) { transition-delay: .28s; }
.reveal-group > *:nth-child(6) { transition-delay: .35s; }
.reveal-group > *:nth-child(7) { transition-delay: .42s; }
.reveal-group > *:nth-child(8) { transition-delay: .49s; }

/* ════════════ الشاشات المتوسطة ════════════ */

/* رقم الهاتف يختفي أولاً عند ضيق الهيدر */
/* ── القائمة المدمجة بين 1330 و 1800 ──

   القائمة صارت سبعة عناصر بعد إضافة حاسبة CBM، فاتّسعت
   إلى 556px. والهيدر يقسم ما تبقّى بالتساوي بين الشعار
   وكتلة الأزرار (كلاهما flex: 1 1 0)، فضاق صندوق الأزرار
   إلى 378px بينما محتواه يحتاج 413px.

   وأزرار الهيدر عليها white-space: nowrap و flex: none —
   فهي لا تنضغط، بل تخرج من صندوقها وتركب على القائمة.
   هذا ما كان يظهر عند تكبير 100%.

   تقليص حشوة روابط القائمة يحرّر ~70px تنقسم بين الطرفين،
   فيتّسع صندوق الأزرار لمحتواه.

   ⚠ لا تُلغَ هذه القاعدة إن أُضيف عنصر ثامن للقائمة —
   بل أعِد القياس: الفائض يعود فوراً. */
@media (max-width: 1800px) {
  .nav a { padding-inline: 10px; font-size: 14px; }
  .nav   { gap: 2px; }

  /* زر التسعيرة يتقلّص قليلاً أيضاً — تقليص القائمة وحده
     يحرّر 40px فقط لصندوق الأزرار وكان النقص 35px، أي
     هامش خمسة بكسلات لا يحتمل خطاً في قياس الخط.

     ⚠ لا تُكتب حشوة الزر هنا: القاعدة
     html[dir="rtl"] .pill تستعمل اختصار padding بمحدِّد
     أقوى، فتغلب أي padding-inline مفرد ولا يعمل التصحيح
     بالعربية — وهي اللغة الافتراضية. لذلك يُقلَّص السهم
     وحجم الخط، وكلاهما لا يمرّ عبر تلك القاعدة. */
  .hdr-cta { font-size: 14.5px; }
  .hdr-cta .pill-arrow { inline-size: 28px; block-size: 28px; }
  .hdr-cta .pill-arrow svg { inline-size: 13px; block-size: 13px; }
}

/* ── رقم الهاتف يتقلّص إلى أيقونته ──

   القائمة الإنكليزية أعرض من العربية بنحو 56px عند حجم
   الخط نفسه، فتقليص القائمة وحده لا يكفيها. وبدل ضغط
   الروابط حتى تتلاصق، يتنازل الرقم عن نصّه: يوفّر ~140px
   ويبقى زر اتصال قابل للضغط بدل أن يختفي كلياً.

   فوق 1750px يظهر الرقم كاملاً — قيست الحافّة فعلياً:
   عند 1665px تعود القائمة الإنكليزية إلى الضيق بعشرة
   بكسلات، فالحدّ رُفع حتى يتّسع الرقم الكامل بهامش.

   ⚠ الحشوة تُكتب بمحدِّد html[dir] وإلا غلبتها القاعدة
   html[dir="rtl"] .pill التي تستعمل اختصار padding
   بمحدِّد أقوى — فلا يعمل التصحيح بالعربية أصلاً. */
@media (max-width: 1750px) {
  .hdr-tel span { display: none; }
  html[dir] .hdr-tel { padding: 9px 13px; }
}

@media (max-width: 1330px) { .hdr-tel { display: none; } }

/* شاشات اللابتوب: ضيّق الجانبين ليأخذ العنوان عرضاً كافياً */
@media (max-width: 1420px) {
  .hero-x-grid { grid-template-columns: minmax(185px, 250px) minmax(0, 1fr) minmax(205px, 280px); }
}

@media (max-width: 1180px) {
  /* الأعمدة الزجاجية تنزل تحت العنوان في صفّين */
  .hero-x-grid { grid-template-columns: 1fr; gap: 30px; min-block-size: 0; }
  .hx-center { order: -1; padding-block: 20px 6px; }
  /* عند انطواء الأعمدة يصير العمود بعرض الصفحة، فيُقاس العنوان على الشاشة */
  .hx-title { font-size: clamp(38px, 8vw, 78px); }
  .hx-col { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

@media (max-width: 1000px) {
  .track-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { max-width: 360px; }
  .row { grid-template-columns: 60px 1fr; }
  .row > p, .row > div { grid-column: 2; }

  .split { grid-template-columns: 1fr; gap: 26px; padding: clamp(20px, 4.5vw, 30px); }
  .split-rev .split-media { order: 0; }
  /* داخل لوح، صورة ملتصقة بحافّة واحدة والنصّ تحتها بعرض
     اللوح كامل تبدو خطأً — كان غير مرئي قبل وجود حدّ
     يُقاس عليه. تُوسَّط بدل إلغاء السقف.

     ⚠ inline-size: 100% إلزامية ولا تُحذف.
     margin-inline: auto على عنصر شبكة يلغي التمدّد
     ويجعله يتقلّص لمحتواه، ومحتواه .pill-photo عرضه
     100% من الأب — اعتماد دائري ينهار إلى 2px.
     تحديد العرض صراحةً يكسر الدائرة، فيصير الصندوق
     min(100%, 520px) وتوسّطه الهوامش التلقائية. */
  .split-media { inline-size: 100%; max-width: 520px; margin-inline: auto; }
}

/* ════════════ الجوال ════════════ */

@media (max-width: 860px) {

  .menu-toggle { display: flex; }
  .hdr-cta { display: none; }

  .nav {
    position: fixed;
    inset-block-start: var(--header-h); inset-inline: 0;
    background: var(--ink-900);
    flex-direction: column; align-items: stretch;
    gap: 2px; padding: 16px 18px 28px; margin: 0;
    border-block-end: 1px solid var(--ink-700);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: 14px 14px; font-size: 17px; border-radius: 12px; }

  body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

  .duo { grid-template-columns: 1fr; }
  .qform { grid-template-columns: 1fr; }
  .contact-extra { grid-template-columns: 1fr; }
  .charts { grid-template-columns: 1fr; }
  .chart-wide .flow { columns: 1; }
  .bar-row { grid-template-columns: 70px 1fr auto; gap: 9px; }
  .bar-v { min-inline-size: 54px; font-size: 13.5px; }
  .hx-actions .pill, .hx-actions .glass-btn { flex: 1 1 auto; justify-content: center; }
  .hx-foot { flex-direction: column; align-items: flex-start; }
  .nav { margin-inline: 0 auto; }
  .quote-layout { grid-template-columns: 1fr; }
  .callout-lg { padding: 26px; }
  .why-row article { border-inline-start: 0; border-block-start: 1px solid var(--ink-700); }
  .why-row article:first-child { border-block-start: 0; }
  .hero { min-block-size: auto; padding-block: 70px 46px; }
  .hero-line { flex-wrap: wrap; gap: 14px; }
  .band-actions .pill { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .brand img { block-size: 64px; }
  .row { grid-template-columns: 1fr; gap: 10px; }
  .row > p, .row > div { grid-column: 1; }
  .stage-list li { grid-template-columns: 52px 1fr; gap: 16px; }
  .stage-n { inline-size: 40px; block-size: 40px; font-size: 13px; }
  .callout { padding: 22px; }
  /* الحشوات تتراكم كما تتراكم التعبئات: .wrap 18 + .split 14
     + .doc-box 18 = 50px من كل جانب على شاشة 375px، قبل
     نقطة القائمة نفسها. */
  .split { padding: 14px; }
  .doc-box { padding: 18px; }
  .faq summary { padding: 17px 18px; font-size: 16px; }
  .faq p { padding: 0 18px 18px; }
  .ccard { padding: 24px; }
  .ccard .circle-btn { inset-block-start: 20px; inset-inline-end: 20px; }
}

/* ── تقليل الحركة ── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}