/* ==========================================================================
   فواتيري — Base: الخطوط، التصفير، التنضيد، الأدوات المشتركة
   ملاحظة اتجاهية: كل قواعد المسافات تستخدم الخصائص المنطقية
   (margin-inline / padding-inline / inset-inline) — فينقلب التخطيط
   تلقائياً بين RTL و LTR بلا أي CSS مكرر.
   ========================================================================== */

/* ---------- الخط: تجوال (استضافة ذاتية) ---------- */
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/tajawal-300-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/tajawal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/tajawal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/tajawal-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/tajawal-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- التصفير ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem; /* الهيدر اللاصق لا يغطي المرسى */

  /* عناصر الظهور تُزاح أفقياً 30px قبل أن تُكشف (data-reveal="left|right")،
     فتتجاوز حاشية الشاشة على العروض ≤390px وتُنتج تمريراً أفقياً بـ7–12px
     حتى تنتهي الحركة. هذا حارس يمنع أي تجاوز عابر من أن يصبح تمريراً.
     `clip` لا `hidden` عن قصد: `hidden` يجعل الجذر حاوية تمرير فيتعطّل
     `position: sticky` في لوحة قسم «كيف تعمل». */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* حارس ضد أي تجاوز أفقي على الموبايل */
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* ---------- التنضيد ---------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--ink); }

/* الأرقام اللاتينية داخل نص عربي تبقى LTR وتُقرأ صحيحة */
.num {
  unicode-bidi: isolate;
  direction: ltr;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* لكن `direction: ltr` أعلاه يُغيّر معنى `start` داخل العنصر نفسه: فيصبح
   يساراً حتى في صفحة عربية، فيقف الرقم على جهة والتوصيف تحته على الجهة
   المقابلة. المحاذاة هنا تتبع اتجاه الصفحة لا اتجاه العنصر — والترتيب
   الداخلي للأرقام يبقى لاتينياً كما هو مطلوب. */
[dir="rtl"] .num { text-align: right; }

/* استثناء: رقم مصحوب بوحدة عربية («130 ألف» لا «130,000»).
   هذا ليس رقماً خالصاً، فإجباره على LTR يضع «ألف» في أقصى اليمين — أي في أول
   ما تقع عليه العين العربية — فيُقرأ «ألف 130+» بدل «+130 ألف».
   الحل أن يتبع العنصر اتجاه الصفحة، ويبقى «+130» جزيرة لاتينية بحكم قواعد
   Bidi وحدها (ET المجاور لـEN يصير EN فيلتصق «+» برقمه ولا يهيم عنه). */
.num--unit { direction: inherit; }

/* ---------- التركيز — حلقة ذهبية واضحة ---------- */
:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- أدوات ---------- */

/* سمة hidden تُخفي فعلاً: قسم متجر الخدمات وروابطه في القائمة تبدأ مخفية
   حتى تصل بيانات المتجر. بلا هذه القاعدة يكفي أن يُعطى أي عنصر منها قيمة
   display في المستقبل ليتغلّب على إخفاء المتصفح الافتراضي فيظهر فارغاً. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* الحاوية مرفوعة فوق الخيط الذهبي عمداً.
   ترتيب الطبقات في الصفحة: خلفيات الأقسام (‎-1) → الخيط (0) → المحتوى (1).
   بهذا يمرّ الخيط فوق الخلفيات الملوّنة ولا يعبر النص أبداً. */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

/* رابط التخطي — أول عنصر قابل للتركيز في الصفحة */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: var(--z-menu);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--r-md);
  font-weight: 700;
  transition: inset-block-start var(--t-base) var(--ease);
}
.skip-link:focus-visible { inset-block-start: var(--s-4); }

/* ---------- تسمية القسم (Eyebrow) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--gold-deep);
  margin-block-end: var(--s-3);
}
.eyebrow::before {
  content: '';
  inline-size: 22px;
  block-size: 1.5px;
  background: var(--gold);
  flex: none;
}

/* ---------- الأزرار ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 52px;            /* هدف لمس مريح */
  padding-inline: var(--s-6);
  padding-block: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}

.btn--primary { box-shadow: var(--sh-gold); }

.btn--primary::after {          /* لمعة تمرّ عند المرور */
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start var(--t-slow) var(--ease);
  z-index: -1;
}

.btn--primary:hover { transform: translateY(-2px); background: var(--gold-dark); }
.btn--primary:hover::after { inset-inline-start: 115%; }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--gold-mist);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--gold);
  color: var(--gold-deep);
  transform: translateY(-2px);
}

.btn--sm { min-block-size: 44px; padding-inline: var(--s-5); font-size: var(--fs-sm); }

/* رابط نصي بسهم متحرك */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--gold-deep);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.link-arrow svg { transition: transform var(--t-base) var(--ease); }
.link-arrow:hover svg { transform: translateX(-5px); }
[dir='ltr'] .link-arrow:hover svg { transform: translateX(5px); }
/* السهم نفسه ينقلب مع اتجاه الصفحة */
[dir='ltr'] .link-arrow svg { scale: -1 1; }