/* ==========================================================================
   ديب يور كار — نظام التصميم

   المنهج: Apple. أربع قواعد تحكم كل شيء تحته:
     1. الاستجابة عند الضغط لا عند الإفلات. صفر تأخير على مسار الإدخال.
     2. الحركة زنبركية وقابلة للمقاطعة. انتقالات CSS لا إطارات مفتاحية،
        لأن الانتقال يبدأ من القيمة المعروضة الآن فينقطع بسلاسة.
     3. المواد الشفافة تحمل الهرمية. المحتوى يمرّ تحتها لا بجانبها.
     4. تتبّع الحروف يتغيّر مع الحجم. قيمة واحدة لكل المقاسات خطأ.

   الهوية غير قابلة للتفاوض: الذهبي #fdb34a من شعار ديب يور كار.
   ========================================================================== */

:root {
  /* --- السطوح: كل طبقة أفتح قليلاً من التي تحتها --- */
  --void:       var(--ds-color-background);
  --raised:     var(--ds-color-surface);
  --panel:      var(--ds-color-surface-raised);
  --panel-hi:   #1a1e23;
  --line:       var(--ds-color-border);
  --line-soft:  #1a1e24;

  /* --- لون التمييز الوحيد --- */
  --gold:       var(--ds-color-primary);
  --gold-deep:  var(--ds-color-primary-hover);
  --gold-wash:  rgba(253, 179, 74, 0.08);
  --gold-edge:  rgba(253, 179, 74, 0.24);
  --gold-glow:  rgba(253, 179, 74, 0.13);

  /* --- النص --- */
  --bone:       #f4f2ef;
  --ash:        #adb3ba;
  --smoke:      #797f88;

  /* من الشعار فقط. ممنوع كلون تمييز. */
  --brand-red:  var(--ds-color-brand-mark);
  --logo-orange: var(--ds-color-logo-orange);

  /* --- الخطوط --- */
  --f-display:  var(--ds-font-display-ar);
  --f-body:     var(--ds-font-body-ar);
  --f-latin:    var(--ds-font-display-latin);

  /* --- الإيقاع --- */
  --section-y:  var(--ds-space-section-semantic);
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);
  --shell:      1340px;

  /* --- الزوايا: نظامان موثقان لا ثالث لهما --- */
  --r-sm:   var(--ds-radius-sm);
  --r:      var(--ds-radius-card);
  --r-lg:   var(--ds-radius-lg);
  --r-pill: var(--ds-radius-pill);

  /* ---------------------------------------------------------------------
     الزنبركات — محسوبة من معادلة الزنبرك، لا مقدّرة بالعين.
     damping 1.0 = تخميد حرج، يستقر بلا تجاوز.
     damping 0.8 = يتجاوز قليلاً، للحركات التي سبقها زخم من المستخدم.
     response = زمن الوصول للهدف. ليس مدة — المدة تنتج عن المعادلة.
     --------------------------------------------------------------------- */

  /* damping 1.0 · response 0.40s — الافتراضي لكل واجهة */
  --ease-spring: linear(0, 0.0961, 0.2784, 0.4613, 0.6144, 0.7319, 0.8174, 0.8777, 0.9191, 0.947, 0.9656, 0.9778, 0.9858, 0.9909, 0.9942, 0.9964, 0.9977, 0.9986, 1);
  --dur-spring:  0.6s;

  /* damping 1.0 · response 0.22s — ردّ الفعل الفوري على اللمس */
  --ease-snap:   linear(0, 0.0961, 0.2784, 0.4613, 0.6144, 0.7319, 0.8174, 0.8777, 0.9191, 0.947, 0.9656, 0.9778, 0.9858, 0.9909, 0.9942, 0.9964, 0.9977, 0.9986, 1);
  --dur-snap:    0.33s;

  /* damping 0.8 · response 0.35s — يتجاوز إلى 1.0148 ثم يستقر */
  --ease-bounce: linear(0, 0.0961, 0.2924, 0.5003, 0.6782, 0.8124, 0.9044, 0.9618, 0.994, 1.0094, 1.0148, 1.0146, 1.0121, 1.0089, 1.006, 1.0036, 1.002, 1.0009, 1);
  --dur-bounce:  0.5s;

  /* --- الطبقات: سلّم موثق --- */
  --z-grain:  2;
  --z-float:  55;
  --z-nav:    60;
  --z-drawer: 70;
}

html[lang="en"] {
  --f-display: var(--ds-font-display-latin);
  --f-body:    var(--ds-font-display-latin);
}

/* ==========================================================================
   إعادة الضبط
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-body);
  /* المقاس بـ rem ليحترم إعداد حجم النص عند المستخدم */
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* تتبّع الحروف يضيق كلما كبر النص. قيمة واحدة لكل المقاسات خطأ دائماً. */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 600;
  margin: 0 0 0.55em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: #17130c; }

/* حلقة التركيز تظهر فوراً. لا انتقال يؤخّرها. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.ltr { direction: ltr; display: inline-block; unicode-bidi: isolate; }
.tnum { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: #17130c;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r) 0;
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   طبقة الحبيبات
   ثابتة، لا تستقبل المؤشر، لا تتمرر معها الصفحة. أبداً على حاوية متمررة.
   ========================================================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body::after { display: none; }
}

/* ==========================================================================
   التخطيط
   ========================================================================== */

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

.shell--tight { max-width: 980px; }
.shell--read  { max-width: 720px; }

/* الحشو السفلي أكبر قليلاً — التوازن البصري لا الحسابي */
.section {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) * 1.1);
}
.section--raised { background: var(--raised); }
.section--flush-top { padding-top: 0; }

/* ==========================================================================
   الطباعة — سلّم يجمع الحجم والوزن والتتبّع والسطر كوحدة واحدة
   ========================================================================== */

.display-hero {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
}

.display-xl {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.95rem, 4.2vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin: 0;
}

.display-lg {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.65rem, 3.1vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.019em;
  margin: 0;
}

.display-md {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.28rem, 2.1vw, 1.65rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  margin: 0;
}

/* النص العادي: تتبّع صفر تقريباً، وسطر أوسع */
.lede {
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.85;
  letter-spacing: 0;
  color: var(--ash);
  max-width: 62ch;
}

.muted { color: var(--ash); }
.faint { color: var(--smoke); }
.gold  { color: var(--gold); }

/* النص الصغير يحتاج تتبّعاً موجباً ليُقرأ */
.tagline {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--gold);
  margin-bottom: 0.95rem;
}
html[lang="en"] .tagline {
  font-family: var(--f-latin);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ==========================================================================
   الأزرار — الاستجابة عند الضغط، والارتداد بعد الإفلات
   ========================================================================== */

.btn {
  --btn-bg: var(--gold);
  --btn-fg: #17130c;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* العودة زنبركية بعد الإفلات */
  transition:
    transform var(--dur-bounce) var(--ease-bounce),
    background var(--dur-snap) var(--ease-snap),
    border-color var(--dur-snap) var(--ease-snap),
    color var(--dur-snap) var(--ease-snap);
}

.btn:hover { background: var(--gold-deep); }

/* الضغط يستجيب فوراً — 90 مللي، لا انتظار للإفلات */
.btn:active {
  transform: scale(0.965);
  transition-duration: 90ms;
  transition-timing-function: ease-out;
}

.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--gold-wash);
  border-color: var(--gold-edge);
  color: var(--gold);
}

.btn--sm { padding: 0.65rem 1.3rem; font-size: 0.87rem; }
.btn--block { width: 100%; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.92rem;
  transition: gap var(--dur-spring) var(--ease-spring);
}
.link-arrow:hover { gap: 0.8rem; }
.link-arrow:active { gap: 0.6rem; transition-duration: 90ms; }
.link-arrow svg { width: 1em; height: 1em; }
html[dir="ltr"] .link-arrow svg { transform: scaleX(-1); }

/* ==========================================================================
   الشريط العلوي
   ========================================================================== */

.topbar {
  background: #050607;
  font-size: 0.84rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding-block: 0.35rem;
}

.topbar__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ash);
  font-weight: 500;
  transition: color var(--dur-snap) var(--ease-snap);
}
.topbar__contact:hover { color: var(--gold); }
.topbar__contact:active { color: var(--gold-deep); transition-duration: 90ms; }
.topbar__contact svg { width: 1.05em; height: 1.05em; color: var(--gold); flex: none; }

.topbar__right { display: flex; align-items: center; gap: 0.85rem; }

.social { display: flex; align-items: center; gap: 0.2rem; }

.social a {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  color: var(--smoke);
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-snap) var(--ease-snap),
    background var(--dur-snap) var(--ease-snap),
    transform var(--dur-bounce) var(--ease-bounce);
}
.social a:hover { color: var(--gold); background: var(--gold-wash); }
.social a:active { transform: scale(0.9); transition-duration: 90ms; }
.social svg { width: 15px; height: 15px; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--f-latin);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ash);
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-snap) var(--ease-snap),
    border-color var(--dur-snap) var(--ease-snap),
    background var(--dur-snap) var(--ease-snap),
    transform var(--dur-bounce) var(--ease-bounce);
}
.lang:hover { color: var(--gold); border-color: var(--gold-edge); background: var(--gold-wash); }
.lang:active { transform: scale(0.95); transition-duration: 90ms; }
.lang svg { width: 0.95em; height: 0.95em; }

/* ==========================================================================
   الترويسة — مادة شفافة، المحتوى يمرّ تحتها
   لا حد سفلي صلب. حافة متدرجة تظهر فقط حين يصل المحتوى تحتها.
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: background var(--dur-spring) var(--ease-spring);
}

/* حافة التمرير: تدرّج لا خط. تُرسم فقط بعد أن يمرّ محتوى تحت الترويسة. */
.masthead::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 9, 11, 0.5), transparent);
  opacity: 0;
  transition: opacity var(--dur-spring) var(--ease-spring);
}

.masthead[data-scrolled="true"] { background: rgba(8, 9, 11, 0.9); }
.masthead[data-scrolled="true"]::after { opacity: 1; }

/* المادة الشفافة تحتاج نصاً أثقل قليلاً ليبقى مقروءاً فوق خلفية متغيرة */
.masthead .nav__list a,
.masthead .brand { font-weight: 500; }

@media (prefers-reduced-transparency: reduce) {
  .masthead {
    background: var(--void);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
  }
  .masthead::after { display: none; }
}

@media (prefers-contrast: more) {
  .masthead { background: #000; border-bottom: 1px solid var(--bone); }
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { flex: none; -webkit-tap-highlight-color: transparent; }
.brand img { height: 38px; width: auto; }
.brand:active { transform: scale(0.97); transition: transform 90ms ease-out; }

.nav { margin-inline-start: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  position: relative;
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  color: var(--ash);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-snap) var(--ease-snap);
}

/* الخط السفلي يخرج من جهة القراءة ويعود إليها — نفس المسار ذهاباً وإياباً */
.nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0.85rem;
  bottom: 0.2rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-spring) var(--ease-spring);
}
html[dir="ltr"] .nav__list a::after { transform-origin: left; }

.nav__list a:hover { color: var(--bone); }
.nav__list a:hover::after { transform: scaleX(1); }

.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { color: var(--gold); }
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after { transform: scaleX(1); }

.nav__list li { position: relative; }

/* القائمة الفرعية تنبثق من الزر الذي فتحها، لا من مركزها */
.nav__list .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  min-width: 244px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: rgba(20, 23, 27, 0.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 52px rgba(4, 5, 6, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top var(--menu-origin, right);
  transition:
    opacity var(--dur-snap) var(--ease-snap),
    transform var(--dur-spring) var(--ease-spring),
    visibility var(--dur-snap);
}
html[dir="ltr"] .nav__list .sub-menu { --menu-origin: left; }

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.nav__list .sub-menu a { font-weight: 400; }
.nav__list .sub-menu a::after { display: none; }
.nav__list .sub-menu a:hover { background: var(--gold-wash); color: var(--gold); }

@media (prefers-reduced-transparency: reduce) {
  .nav__list .sub-menu { background: var(--panel); backdrop-filter: none; }
}

.masthead__tools { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.masthead__cta { flex: none; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bounce) var(--ease-bounce), border-color var(--dur-snap) var(--ease-snap), background var(--dur-snap) var(--ease-snap);
}
.theme-toggle:hover { border-color: var(--gold-edge); background: var(--gold-glow); }
.theme-toggle:active { transform: scale(0.92); transition-duration: 90ms; }
.theme-toggle__icon { font-family: system-ui, sans-serif; font-size: 1.2rem; line-height: 1; }

.nav-toggle {
  display: none;
	flex: 0 0 44px;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bounce) var(--ease-bounce),
              border-color var(--dur-snap) var(--ease-snap);
}
.nav-toggle:active { transform: scale(0.92); transition-duration: 90ms; }
.nav-toggle svg { width: 20px; height: 20px; color: var(--bone); }

@media (max-width: 1023px) {
	.nav-toggle { display: grid; }
	.masthead__cta { display: none; }

  /* الدرج يدخل ويخرج من نفس الجهة — تناسق مكاني */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 352px);
    z-index: var(--z-drawer);
    background: rgba(14, 16, 19, 0.94);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-inline-start: 1px solid var(--line);
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform var(--dur-bounce) var(--ease-bounce);
  }
  html[dir="rtl"] .nav { transform: translateX(100%); }
  .nav[data-open="true"] { transform: translateX(0) !important; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.1rem; }
  .nav__list a { padding: 0.85rem 0.9rem; font-size: 1rem; min-height: 44px; }
  .nav__list a::after { display: none; }
  .nav__list a:active { background: var(--gold-wash); }
  .nav__list .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0 0 0.4rem; min-width: 0;
    padding-inline-start: 0.9rem;
  }

  .nav__scrim {
    position: fixed; inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgba(4, 5, 6, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@media (max-width: 380px) {
  .masthead__inner { gap: 0.5rem; }
  .masthead__tools { gap: 0.25rem; }
  .lang { padding-inline: 0.55rem; font-size: 0.72rem; }
}

/* ==========================================================================
   البطل
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(86dvh, 760px);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.38;
  /* حركة بطيئة جداً وواسعة — لا دورة متكررة قصيرة تشدّ الانتباه */
  transform: scale(1.05);
  transition: transform 24s linear;
}
html.js .hero__bg img { transform: scale(1); }

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(86% 66% at 76% 26%, var(--gold-glow), transparent 60%),
    linear-gradient(to left, rgba(8, 9, 11, 0.3) 0%, rgba(8, 9, 11, 0.88) 56%, var(--void) 100%);
}
html[dir="ltr"] .hero__bg::after {
  background:
    radial-gradient(86% 66% at 24% 26%, var(--gold-glow), transparent 60%),
    linear-gradient(to right, rgba(8, 9, 11, 0.3) 0%, rgba(8, 9, 11, 0.88) 56%, var(--void) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%;
}

.hero__copy { max-width: 44rem; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1.05rem 0.42rem 0.6rem;
  margin-bottom: 1.45rem;
  border: 1px solid var(--gold-edge);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero__eyebrow img { width: 20px; height: 20px; }

.hero__title { margin: 0 0 1.15rem; }
.hero__title em { font-style: normal; color: var(--gold); }

.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.82;
  color: var(--ash);
  max-width: 36rem;
  margin: 0 0 2.15rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero__art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  /* حافة عليا مضيئة — الضوء يمسك المادة */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 84px rgba(4, 5, 6, 0.72);
}
.hero__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .hero__art img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   شريط الثقة
   ========================================================================== */

.trust {
  border-block: 1px solid var(--line-soft);
  background: var(--raised);
  padding-block: 2.2rem;
}

.trust__label {
  text-align: center;
  font-size: 0.84rem;
  letter-spacing: 0.012em;
  color: var(--smoke);
  margin: 0 0 1.5rem;
}

.trust__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.trust__track {
  display: flex;
  align-items: center;
  gap: 3.4rem;
  width: max-content;
  animation: trust-scroll 42s linear infinite;
}
.trust__marquee:hover .trust__track { animation-play-state: paused; }

.trust__track img {
  height: 40px; width: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(1);
  transition:
    opacity var(--dur-spring) var(--ease-spring),
    filter var(--dur-spring) var(--ease-spring);
}
.trust__track img:hover { opacity: 1; filter: grayscale(0); }

@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .trust__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 2rem;
  }
  .trust__marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   من نحن
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.about__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.about__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  margin-top: 2.3rem;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.stat { background: var(--void); padding: 1.4rem 1rem; text-align: center; }
.stat__num {
  font-family: var(--f-latin);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1.05;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 0.82rem;
  letter-spacing: 0.012em;
  color: var(--ash);
  margin-top: 0.35rem;
  display: block;
}

@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   الخدمات — سبعة عناصر، سبع خلايا، صفر فراغ
   ========================================================================== */

.services__head { max-width: 48rem; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}

.svc { grid-column: span 2; }
.svc:nth-child(1), .svc:nth-child(2),
.svc:nth-child(6), .svc:nth-child(7) { grid-column: span 3; }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--dur-spring) var(--ease-spring),
    transform var(--dur-spring) var(--ease-spring),
    box-shadow var(--dur-spring) var(--ease-spring);
}

.svc:hover {
  border-color: var(--gold-edge);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 20px 44px rgba(4, 5, 6, 0.5);
}
.svc:active { transform: translateY(-1px) scale(0.995); transition-duration: 90ms; }

.svc__media { position: absolute; inset: 0; z-index: -1; }
.svc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
  transition:
    opacity var(--dur-spring) var(--ease-spring),
    transform 0.9s var(--ease-spring);
}
.svc:hover .svc__media img { opacity: 0.44; transform: scale(1.05); }
.svc__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 13, 0.96) 26%, rgba(10, 11, 13, 0.56) 100%);
}

.svc__title {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0 0 0.6rem;
}
.svc__text {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--ash);
  margin: 0 0 1.3rem;
}
.svc__foot { margin-top: auto; }

@media (max-width: 900px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .svc, .svc:nth-child(n) { grid-column: span 1; }
  .svc:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
  .svc, .svc:nth-child(n) { grid-column: span 1; }
}

/* ==========================================================================
   لماذا نحن — فواصل رفيعة، لا صناديق
   ========================================================================== */

.why {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.why__list {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.why__item {
  background: var(--void);
  padding: 1.6rem 0;
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 1.15rem;
  align-items: start;
}

.why__icon {
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: var(--r-sm);
  background: var(--gold-wash);
  border: 1px solid var(--gold-edge);
  color: var(--gold);
  flex: none;
}
.why__icon svg { width: 1.15rem; height: 1.15rem; }

.why__item h3 {
  font-size: 1.04rem;
  letter-spacing: -0.008em;
  margin: 0 0 0.32rem;
}
.why__item p { font-size: 0.9rem; line-height: 1.72; color: var(--ash); margin: 0; }

@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

/* ==========================================================================
   التقييمات — تمرير أفقي بالتقاط ومقاومة عند الحافة
   ========================================================================== */

.reviews__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(285px, 390px);
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* المقاومة عند الحافة بدل التوقف الصلب، ولا يتسرب التمرير للصفحة */
  overscroll-behavior-x: contain;
  scroll-padding-inline-start: var(--gutter);
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-edge) transparent;
}
.reviews__rail::-webkit-scrollbar { height: 5px; }
.reviews__rail::-webkit-scrollbar-track { background: var(--line-soft); border-radius: var(--r-pill); }
.reviews__rail::-webkit-scrollbar-thumb { background: var(--gold-edge); border-radius: var(--r-pill); }

.review {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.review__stars { display: flex; gap: 0.15rem; margin-bottom: 1.1rem; color: var(--gold); }
.review__stars svg { width: 1rem; height: 1rem; }

.review__body {
  font-size: 0.93rem;
  line-height: 1.78;
  color: var(--bone);
  margin: 0 0 1.5rem;
}

.review__who { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.review__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.006em;
}
.review__meta { font-size: 0.82rem; letter-spacing: 0.012em; color: var(--smoke); }

/* ==========================================================================
   لوحة الدعوة
   ========================================================================== */

.summon {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-edge);
  padding: clamp(2.6rem, 5vw, 4.2rem);
  text-align: center;
  background:
    radial-gradient(70% 128% at 50% 0%, rgba(253, 179, 74, 0.12), transparent 66%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.summon h2 { max-width: 22ch; margin-inline: auto; }
.summon p { max-width: 54ch; margin-inline: auto; color: var(--ash); }
.summon .btn { margin-top: 1.7rem; }

/* ==========================================================================
   المدونة
   ========================================================================== */

.journal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
  gap: 1.35rem;
}

.entry {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--dur-spring) var(--ease-spring),
    transform var(--dur-spring) var(--ease-spring),
    box-shadow var(--dur-spring) var(--ease-spring);
}
.entry:hover {
  border-color: var(--gold-edge);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 20px 44px rgba(4, 5, 6, 0.5);
}
.entry:active { transform: translateY(-1px); transition-duration: 90ms; }

.entry__thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.entry__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-spring);
}
.entry:hover .entry__thumb img { transform: scale(1.06); }

.entry__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.entry__cats { font-size: 0.78rem; letter-spacing: 0.015em; color: var(--gold); margin-bottom: 0.5rem; }
.entry__title {
  font-size: 1.08rem;
  line-height: 1.42;
  letter-spacing: -0.008em;
  margin: 0 0 0.6rem;
}
.entry__excerpt { font-size: 0.89rem; line-height: 1.72; color: var(--ash); margin: 0 0 1.3rem; }
.entry__foot { margin-top: auto; }

/* ==========================================================================
   ترويسة الصفحات الداخلية
   ========================================================================== */

.svc-hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}
.svc-hero__bg { position: absolute; inset: 0; z-index: 0; }
.svc-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.svc-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--void) 4%, rgba(8, 9, 11, 0.74) 100%);
}
.svc-hero__inner { position: relative; z-index: 1; max-width: 48rem; }

.crumbs { font-size: 0.83rem; letter-spacing: 0.012em; color: var(--smoke); margin-bottom: 1.1rem; }
.crumbs a { color: var(--ash); transition: color var(--dur-snap) var(--ease-snap); }
.crumbs a:hover { color: var(--gold); }
.crumbs span { margin-inline: 0.4rem; opacity: 0.45; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
}

.step {
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.step__n {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin-bottom: 1.05rem;
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  border: 1px solid var(--gold-edge);
  color: var(--gold);
  font-family: var(--f-latin);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.02rem; letter-spacing: -0.008em; margin: 0 0 0.42rem; }
.step p { font-size: 0.89rem; line-height: 1.72; color: var(--ash); margin: 0; }

.includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--raised);
  font-size: 0.92rem;
  line-height: 1.68;
}
.includes svg { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.34em; color: var(--gold); }

/* استلام السيارة من المنزل — عرض خدمة واضح. */
.pickup-promo {
  background: linear-gradient(135deg, var(--raised), var(--panel));
}
.pickup-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
.pickup-promo__grid .btn { margin-top: 0.8rem; }
.pickup-promo__card {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--gold-edge);
  border-radius: var(--r-lg);
  background: var(--gold-wash);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pickup-promo__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r);
  margin-bottom: 1.4rem;
  border: 1px solid var(--gold-edge);
}
.pickup-promo__badge {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  margin-bottom: 1.2rem;
  border-radius: var(--r-pill);
  color: var(--gold);
  background: var(--void);
  border: 1px solid var(--gold-edge);
}
.pickup-promo__badge svg { width: 1.45rem; height: 1.45rem; }
.pickup-promo__card h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.pickup-promo__list { display: grid; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }
.pickup-promo__list li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--ash); font-size: 0.92rem; }
.pickup-promo__list svg { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.3em; color: var(--gold); }
.service-pickup-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--gold-edge);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 0.86rem;
}
.service-quick-answer {
  max-width: 42rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-inline-start: 3px solid var(--gold);
  background: rgba(253, 179, 74, 0.06);
  color: var(--ash);
  font-size: 0.92rem;
}
.service-quick-answer strong { display: block; color: var(--gold); margin-bottom: 0.2rem; }
.service-quick-answer p { margin: 0; }
.service-faq-link {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
  color: var(--ash);
  font-size: 0.88rem;
  text-decoration: underline;
  text-decoration-color: var(--gold-edge);
  text-underline-offset: 0.25em;
}

/* تحسينات الوضع الساطع على طبقات الحركة والصور ذات التدرج الداكن. */
html[data-theme="light"] {
  --bone: #20252b;
  --ash: #5d6670;
  --smoke: #737d88;
  --panel-hi: #e4e8ec;
  --line-soft: #e1e5ea;
}
html[data-theme="light"] body { color-scheme: light; }
html[data-theme="light"] .masthead { background: rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .masthead[data-scrolled="true"] { background: rgba(255, 255, 255, 0.96); }
html[data-theme="light"] .masthead::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72), transparent); }
html[data-theme="light"] .nav__list .sub-menu { background: rgba(255, 255, 255, 0.94); box-shadow: 0 22px 52px rgba(47, 55, 64, 0.16); }
html[data-theme="light"] .hero__bg::after { background: linear-gradient(90deg, rgba(246, 247, 248, 0.92), rgba(246, 247, 248, 0.58) 52%, rgba(246, 247, 248, 0.16)); }
html[dir="ltr"][data-theme="light"] .hero__bg::after { background: linear-gradient(270deg, rgba(246, 247, 248, 0.92), rgba(246, 247, 248, 0.58) 52%, rgba(246, 247, 248, 0.16)); }
html[data-theme="light"] .svc { color: #f4f2ef; }
html[data-theme="light"] .svc__text { color: #e7ebef; }
html[data-theme="light"] .svc__media::after { background: linear-gradient(to top, rgba(30, 36, 42, 0.88) 24%, rgba(30, 36, 42, 0.28) 100%); }
html[data-theme="light"] .svc-hero__bg::after { background: linear-gradient(to top, var(--void) 4%, rgba(246, 247, 248, 0.68) 100%); }
html[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.96); }
html[data-theme="light"] .nav__scrim { background: rgba(28, 34, 40, 0.32); }

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

.faq { display: grid; gap: 0.7rem; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color var(--dur-spring) var(--ease-spring);
}
.faq details[open] { border-color: var(--gold-edge); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.01rem;
  letter-spacing: -0.008em;
  list-style: none;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-snap) var(--ease-snap);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255, 255, 255, 0.018); }
.faq summary:active { background: var(--gold-wash); }

.faq summary::after {
  content: "";
  flex: none;
  width: 0.6rem; height: 0.6rem;
  border-inline-end: 2px solid var(--gold);
  border-block-end: 2px solid var(--gold);
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
  transition: transform var(--dur-spring) var(--ease-spring);
}
.faq details[open] summary::after { transform: rotate(-135deg); }

.faq__answer {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.93rem;
  line-height: 1.82;
  color: var(--ash);
}

@media (max-width: 760px) {
  .pickup-promo__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   النماذج — التحقق يظهر فوراً بجانب الحقل، لا عند الإرسال
   ========================================================================== */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.field { display: grid; gap: 0.45rem; margin-bottom: 1.15rem; }

.field label {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--bone);
}
.field label span { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.85rem 1rem;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--bone);
  font-size: 0.95rem;
  transition:
    border-color var(--dur-snap) var(--ease-snap),
    background var(--dur-snap) var(--ease-snap);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--smoke); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--raised);
}

.field textarea { min-height: 132px; resize: vertical; }

.field__help  { font-size: 0.82rem; letter-spacing: 0.01em; color: var(--smoke); }
.field__error { font-size: 0.82rem; letter-spacing: 0.01em; color: #ff9d94; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #ff9d94; }
.field[data-invalid="true"] .field__error { display: block; }

.contact__card {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.contact__rows { display: grid; gap: 1.35rem; margin: 0; }

.contact__row {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  align-items: start;
}
.contact__row .why__icon { width: 2.6rem; height: 2.6rem; }
.contact__row dt { font-size: 0.83rem; letter-spacing: 0.012em; color: var(--smoke); margin-bottom: 0.15rem; }
.contact__row dd { margin: 0; font-weight: 600; font-size: 0.97rem; }
.contact__row dd a { transition: color var(--dur-snap) var(--ease-snap); }
.contact__row dd a:hover { color: var(--gold); }

@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   المقال
   ========================================================================== */

.prose { font-size: 1rem; line-height: 1.92; color: var(--ash); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: clamp(1.38rem, 2.3vw, 1.8rem);
  letter-spacing: -0.016em;
  color: var(--bone);
  margin-top: 2em;
}
.prose h3 {
  font-size: clamp(1.14rem, 1.85vw, 1.38rem);
  letter-spacing: -0.011em;
  color: var(--bone);
  margin-top: 1.7em;
}
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li + li { margin-top: 0.5em; }
.prose img { border-radius: var(--r); margin-block: 1.6em; }
.prose blockquote {
  margin: 1.8em 0;
  padding: 1.25rem 1.5rem;
  border-inline-start: 3px solid var(--gold);
  background: var(--panel);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--bone);
}
html[dir="ltr"] .prose blockquote { border-radius: var(--r) 0 0 var(--r); }

/* ==========================================================================
   التذييل
   ========================================================================== */

.foot {
  border-top: 1px solid var(--line-soft);
  background: #050607;
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  padding-bottom: 3rem;
}

.foot__logo { height: 40px; width: auto; margin-bottom: 1.15rem; }
.foot__blurb { font-size: 0.89rem; line-height: 1.78; color: var(--ash); max-width: 36ch; }

.foot h3 { font-size: 0.94rem; letter-spacing: -0.004em; margin: 0 0 1.15rem; color: var(--bone); }

.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot__links a {
  font-size: 0.89rem;
  color: var(--ash);
  transition: color var(--dur-snap) var(--ease-snap);
}
.foot__links a:hover { color: var(--gold); }

.foot__bar {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.83rem;
  letter-spacing: 0.012em;
  color: var(--smoke);
}
.foot__bar a { transition: color var(--dur-snap) var(--ease-snap); }
.foot__bar a:hover { color: var(--gold); }

@media (max-width: 900px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   الأزرار العائمة
   ========================================================================== */

.dock {
  position: fixed;
  inset-block-end: 1.15rem;
  inset-inline-start: 1.15rem;
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dock a {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(4, 5, 6, 0.55);
  transition: transform var(--dur-bounce) var(--ease-bounce);
}
.dock a:hover { transform: translateY(-3px); }
.dock a:active { transform: scale(0.9); transition-duration: 90ms; }
.dock svg { width: 25px; height: 25px; }

.dock__wa  { background: #25d366; color: #06301a; }
.dock__tel { background: var(--panel); border: 1px solid var(--line); color: var(--gold); }

@media (max-width: 560px) {
  .dock { inset-block-end: 0.9rem; inset-inline-start: 0.9rem; }
  .dock a { width: 48px; height: 48px; }
}

/* ==========================================================================
   أهداف اللمس
   ========================================================================== */

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  .btn, .btn--sm, .lang, .nav__list a, .faq summary, .topbar__contact { min-height: 44px; }
  .btn, .btn--sm, .lang, .topbar__contact { align-items: center; }
  .social a { width: 44px; height: 44px; }
  .topbar__inner { min-height: 52px; }
  /* الرفع عند hover لا معنى له على اللمس */
  .svc:hover, .pkg:hover, .entry:hover, .dock a:hover { transform: none; }
}

/* ==========================================================================
   الكشف عند الدخول
   مشروط بكلاس js: بلا جافاسكربت يظهر المحتوى كاملاً بدل صفحة فارغة.
   انتقال لا إطار مفتاحي — الانتقال يبدأ من القيمة المعروضة فينقطع بسلاسة.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--dur-spring) var(--ease-spring),
      transform var(--dur-spring) var(--ease-spring);
    transition-delay: calc(var(--i, 0) * 65ms);
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  html.js .hero [data-reveal] { transform: translateY(18px); }
  html.js.js-gsap [data-reveal] { transition: none; }

  /* أسطر العنوان التي يولّدها SplitText — كل سطر كتلة تصعد على حدة. */
  .hero__title .hero__line,
  .kine-line { display: block; will-change: transform, opacity; }
}

/* الحركة المخفّضة تعني تلاشياً لطيفاً، لا غياب ردّ فعل */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 0;
    transition: opacity 220ms ease;
  }
  html.js [data-reveal].is-in { opacity: 1; }

  .hero__bg img { transition: none; transform: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:active, .social a:active, .dock a:active,
  .lang:active, .nav-toggle:active, .brand:active { transform: none; }
  .svc:hover, .pkg:hover, .entry:hover, .dock a:hover { transform: none; }
}

/* ==========================================================================
   الحالات الفارغة والتحميل و404
   ========================================================================== */

.blank {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 8rem);
  max-width: 36rem;
  margin-inline: auto;
}
.blank__code {
  font-family: var(--f-latin);
  font-size: clamp(3.4rem, 11vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--gold);
  line-height: 1;
  margin: 0 0 0.7rem;
}

/* هيكل تحميل بشكل التخطيط النهائي — لا دوّار دائري */
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-hi) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px; min-height: 44px;
  padding-inline: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ash);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-snap) var(--ease-snap),
    border-color var(--dur-snap) var(--ease-snap),
    transform var(--dur-bounce) var(--ease-bounce);
}
.pagination .page-numbers:hover { color: var(--gold); border-color: var(--gold-edge); }
.pagination .page-numbers:active { transform: scale(0.94); transition-duration: 90ms; }
.pagination .page-numbers.current {
  background: var(--gold);
  border-color: var(--gold);
  color: #17130c;
  font-weight: 700;
}

/* ==========================================================================
   تباين مرتفع
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --ash:   #e2e5e8;
    --smoke: #c3c8ce;
    --line:  #5a616b;
  }
  .svc, .pkg, .entry, .review, .step, .contact__card, .faq details {
    border-color: var(--line);
  }
  .btn--ghost { border-color: var(--bone); }
}

/* ==========================================================================
   الطباعة على ورق
   ========================================================================== */

@media print {
  .masthead, .topbar, .dock, .foot__grid, .summon, .trust { display: none; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   صفحة الخدمة كبطاقة منتج + مقارنة قبل/بعد + معرض
   ========================================================================== */

.product {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y);
}

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  margin-top: 1.6rem;
}

.product__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 84px rgba(4, 5, 6, 0.6);
}
.product__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.product__title { margin: 0 0 0.9rem; }
.product__lede { margin: 0 0 1.3rem; color: var(--ash); }

.product__price {
  font-family: var(--f-latin);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
}

.product__facts {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.product__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ash);
}
.product__facts svg {
  width: 1.1em; height: 1.1em;
  flex: none;
  margin-top: 0.35em;
  color: var(--gold);
}

.product__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.1rem; }
.product__note { font-size: 0.85rem; color: var(--smoke); margin: 0; }

@media (max-width: 900px) {
  .product__grid { grid-template-columns: 1fr; }
  .product__media { order: -1; }
  .product__media img { aspect-ratio: 16 / 10; }
}

/* --- مقارنة قبل/بعد: طبقتان، الحاجز يكشف الطبقة العليا --- */
.ba {
  position: relative;
  margin-top: 1.8rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  touch-action: pan-y;
  user-select: none;
  background: var(--panel);
}
.ba img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba__img { position: absolute; inset: 0; }
.ba__after {
  position: absolute;
  inset: 0;
  /* يكشف من الحافة اليسرى حتى موضع الحاجز */
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  transform: translateX(-50%);
  background: var(--gold);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.ba__handle span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: #17130c;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 6px 18px rgba(4, 5, 6, 0.5);
}
/* شيفرونان متقابلان مرسومان بحدود CSS — أمتن من القناع/القص. */
.ba__handle span::before,
.ba__handle span::after {
  content: "";
  width: 0; height: 0;
  border-block: 5px solid transparent;
}
.ba__handle span::before { border-inline-end: 7px solid currentColor; }
.ba__handle span::after  { border-inline-start: 7px solid currentColor; }
.ba__tag {
  position: absolute;
  top: 0.8rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(8, 9, 11, 0.72);
  color: var(--bone);
  font-size: 0.76rem;
  font-weight: 600;
  pointer-events: none;
}
.ba__tag--after { left: 0.8rem; }
.ba__tag--before { right: 0.8rem; }
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.ba__range:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px; height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 44px; height: 100px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.ba__range::-moz-range-track { background: transparent; }

/* --- معرض الخدمة --- */
.svc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
.svc-gallery__item {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.svc-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-spring) var(--ease-spring);
}
.svc-gallery__item:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .svc-gallery__item img { transition: none; }
  .svc-gallery__item:hover img { transform: none; }
}