/* ============================================
   أفق فون — OFOQ FON — نظام التصميم
   ============================================ */

/* ---------- الخطوط (مستضافة محليًا، انظر /fonts) ---------- */
/* ملفات *-latin.woff2 مقصوصة (pyftsubset) على المحارف اللاتينية
   المستخدمة فعليًا بالصفحة فقط (أرقام، GB/TB، اسم مراجع واحد،
   ©/·/—) — تنزيلها أصلًا مشروط بـunicode-range تحته، لكن الملفات
   نفسها كانت تحمل مجموعة لاتينية كاملة غير مستخدمة، فصغّرناها. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cairo-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cairo-700-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A9, U+00B7, U+2014, U+20AC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/cairo-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/cairo-800-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A9, U+00B7, U+2014, U+20AC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/cairo-900-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/cairo-900-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A9, U+00B7, U+2014, U+20AC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A9, U+00B7, U+2014, U+20AC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A9, U+00B7, U+2014, U+20AC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A9, U+00B7, U+2014, U+20AC;
}

/* ---------- متغيرات التصميم ---------- */
:root {
  /* الهوية - أسود سينمائي + برتقالي */
  --black-deep:   #060810;   /* أساس الصفحة (كان --navy-deep) */
  --black-soft:   #0B0F1C;   /* أسطح مرتفعة قليلًا (بطاقات، الكبسولة المكثّفة) */
  --navy:         #1B2A5B;   /* بطاقات البنتو الداكنة */
  --navy-deep:    #0E1730;   /* طبقة وسطى في التدرّجات (لم تعد الأساس) */
  --navy-ink:     #14325B;

  --orange:       #F5821F;
  --orange-light: #FFA552;
  --orange-deep:  #D9660A;
  --orange-glow:  rgba(245, 130, 31, 0.45);
  --orange-glow-strong: rgba(245, 130, 31, 0.7);

  /* زجاج (الهيدر والبطاقات الداكنة) */
  --glass-bg:        rgba(255,255,255,0.055);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border:    rgba(255,255,255,0.11);

  --off-white:    #F7F8FA;
  --white:        #FFFFFF;
  --cream:        #FAF8F5;   /* خلفية الهيرو الجديد المطبوعة داخل الصورة */

  /* الثيم الفاتح الموحّد. كان js/scroll-theme.js يكتب هذين المتغيّرين
     حيًّا أثناء السكرول لينتقل الموقع غامق ← فاتح ← غامق؛ بعد قرار
     "الموقع كله فاتح" حُذف ذلك الملف وصارت القيمتان ثابتتين هنا. تُركا
     كمتغيّرين (لا استبدال بقيم صريحة) حتى تبقى كل استعمالات
     color-mix(in srgb, var(--text-current) …%) المنتشرة في الملف تعمل
     كما هي بلا إعادة كتابة. */
  --bg-current:   #F7F8FA;
  --text-current: #14325B;

  --text-on-dark:        #FFFFFF;
  --text-muted-on-dark:  rgba(255,255,255,0.72);
  --text-on-light:       var(--navy-ink);
  /* 0.65 كانت تعطي 4.40:1 فوق أبيض/off-white — أقل من حد WCAG AA (4.5:1)
     بفارق ضئيل (قيس فعليًا على بطاقات التقييمات وتسمية جدار الشعارات).
     رُفعت إلى 0.72 (نسبة 5.42:1) بهامش أمان يغطي التفاوت البسيط بين
     الأبيض الصافي و--off-white. يشمل التعديل 10 مواضع تستخدم المتغيّر. */
  --text-muted-on-light: rgba(20,50,91,0.72);

  --font-heading: 'Cairo', sans-serif;
  --font-body:    'IBM Plex Sans Arabic', sans-serif;

  --header-height: 72px;
  --container-max: 1240px;
  --container-padding: 24px;

  /* شكل موحّد (Shape Consistency Lock) */
  --radius-card: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 24px rgba(20,50,91,0.08);
  --shadow-card-hover: 0 12px 40px rgba(20,50,91,0.14);
  --shadow-glow: 0 0 40px var(--orange-glow);

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s var(--ease-smooth);
  --transition-smooth: 0.5s var(--ease-smooth);

  /* سلّم تايبوغرافي موحّد — يستبدل clamp() المتفرّقة داخل كل قسم بمصدر
     واحد، فتتناسق أحجام العناوين عبر الصفحة بدل أن تكون قرارات منفصلة. */
  --step--1: clamp(0.82rem, 0.5vw + 0.72rem, 0.9rem);   /* نص صغير/تسميات */
  --step-0:  clamp(0.95rem, 0.4vw + 0.88rem, 1.05rem);  /* نص أساسي */
  --step-1:  clamp(1.1rem, 0.6vw + 0.98rem, 1.25rem);   /* نص مقدّمة/فقرة بارزة */
  --step-2:  clamp(1.3rem, 1vw + 1.05rem, 1.6rem);      /* عناوين فرعية h3 */
  --step-3:  clamp(1.75rem, 2vw + 1.25rem, 2.3rem);     /* عناوين أقسام صغيرة */
  --step-4:  clamp(2.1rem, 3vw + 1.4rem, 2.9rem);       /* عناوين أقسام كبيرة */
  --step-5:  clamp(2.5rem, 4.5vw + 1.4rem, 3.9rem);     /* عنوان الهيرو والبانر الختامي */

  /* إيقاع الأقسام — متغيّر بدل قيمة ثابتة، حتى تتدرّج المسافة بين
     الجوال والديسكتوب بدل قفزة واحدة عند نقطة توقف. */
  --section-space: clamp(64px, 6vw + 40px, 128px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: auto; /* Lenis handles smooth scroll */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  background-color: var(--off-white);
  color: var(--text-on-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.25; }
button { font-family: inherit; }

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section { padding: var(--section-space) 0; position: relative; }

.section-title {
  font-size: var(--step-4);
  margin-bottom: 20px;
}

.section-muted {
  font-size: var(--step-1);
  color: var(--text-muted-on-light);
  max-width: 60ch;
}

/* الشرطة البرتقالية أصبحت عنصرًا مميّزًا لموضعين فقط (بدل تكرارها على
   كل عنوان، اللي كان يعطي إيقاع قالب) — انظر .section-title--marked
   في HTML لقسمي "أحدث الأجهزة" و"جهّز طلبك". */
.section-title--marked::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--orange);
  border-radius: 2px;
  margin-top: 16px;
}

/* ---------- طبقات العمق السينمائية (حبيبات + تعتيم حواف) ---------- */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { display: none; }
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.section-kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--orange);
  margin-bottom: 12px;
}

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

/* ---------- زر واتساب (نية واحدة، نص واحد) ---------- */
.cta-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--orange) 0%, #e06a0a 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 4px 20px var(--orange-glow);
}

.cta-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 8px 40px var(--orange-glow-strong); }
.cta-whatsapp:active { transform: translateY(-1px) scale(0.98); }

.cta-whatsapp svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }

.cta-whatsapp--primary { padding: 17px 40px; font-size: 1.08rem; }
.cta-whatsapp--compact { padding: 10px 24px; font-size: 0.9rem; }
.cta-whatsapp--block { width: 100%; padding: 16px 24px; font-size: 1rem; }

/* ============================================
   Liquid Glass — تقريب ويب (ليس منتجًا رسميًا)
   ============================================
   تنويه صادق: "Liquid Glass" مادة موثّقة من Apple لمنصّاتها فقط،
   ولا يوجد معيار ويب رسمي بهذا الاسم. هذا صنف واحد يقرّب نفس
   الإحساس بـbackdrop-filter + حواف داخلية مضيئة + انعكاس علوي،
   بنسختين: `.glass` فوق خلفيات غامقة، `.glass--light` فوق خلفيات
   فاتحة. يُستخدم على عناصر ثابتة/قليلة فقط (لوحة النموذج، بطاقة
   الخريطة، بطاقة البانر الختامي) — لا داخل قوائم تسكرول، لأن
   backdrop-filter مكلف على الجوال. */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 18px 60px rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* انعكاس علوي خفيف — يعطي إحساس السطح الزجاجي المنحني */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}

/* نسخة فوق خلفيات فاتحة: التوهج الأبيض المباشر غير مقروء هناك،
   فيتحوّل الزجاج لتظليل كحلي خافت جدًا بدل الأبيض */
.glass--light {
  background: rgba(20,50,91,0.05);
  border-color: rgba(20,50,91,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(20,50,91,0.05),
    0 18px 50px rgba(20,50,91,0.1);
}
.glass--light::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 45%);
}

/* بدون دعم backdrop-filter: خلفية صلبة حتى يبقى النص مقروءًا */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(11,15,28,0.92); }
  .glass--light { background: rgba(247,248,250,0.96); }
}

/* المستخدم يفضّل تقليل الشفافية: نفس منطق الاحتياط أعلاه */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--light {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass { background: rgba(11,15,28,0.92); }
  .glass--light { background: rgba(247,248,250,0.96); }
}

/* ============================================
   الهيدر — كبسولة زجاجية عائمة
   ============================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  height: calc(var(--header-height) + 20px);
  display: flex;
  align-items: center;
  transition: transform var(--transition-smooth);
}

/* الإخفاء الذكي: يرتفع مع النزول ويرجع فورًا مع الصعود */
.site-header.is-hidden { transform: translateY(-130%); }

/* تدرّج علوي ثابت يذوّب حافة الكبسولة بالمشهد بدل ما تطلع ملصوقة فوقه */
.header-fade {
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(250,248,245,0.75) 0%, rgba(250,248,245,0.3) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--transition-smooth);
}

.site-header.light-mode .header-fade { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.header-capsule {
  position: relative;
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 8px;
  padding-inline-start: 26px;
  padding-inline-end: 8px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 20px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0.6;
  transform: scale(0.97);
  transition:
    opacity var(--transition-smooth),
    background var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth),
    transform var(--transition-smooth);
}

.site-header.scrolled .header-capsule {
  opacity: 1;
  transform: scale(1);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 8px 32px rgba(0,0,0,0.4);
}

/* حالة السكون (قبل السكرول) فوق خلفية فاتحة: القيم الأساسية أعلاه
   مضبوطة لزجاج أبيض فوق مشهد داكن — فوق الكريمي تختفي تمامًا ويبقى
   فقط ظل أسود شارد حول الكبسولة. هنا تُقلب لزجاج كحلي خفيف بظل ناعم. */
.site-header.light-mode .header-capsule {
  background: rgba(20,50,91,0.035);
  border-color: rgba(20,50,91,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 20px rgba(20,50,91,0.06);
}

.site-header.light-mode.scrolled .header-capsule {
  background: rgba(20,50,91,0.06);
  border-color: rgba(20,50,91,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 32px rgba(20,50,91,0.12);
}

/* بدون دعم backdrop-filter: خلفية صلبة حتى تبقى الكبسولة مقروءة */
@supports not (backdrop-filter: blur(1px)) {
  .header-capsule { background: rgba(11,15,28,0.92); }
  .site-header.light-mode .header-capsule { background: rgba(247,248,250,0.96); }
}
@media (prefers-reduced-transparency: reduce) {
  .header-capsule { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,15,28,0.92); }
  .site-header.light-mode .header-capsule { background: rgba(247,248,250,0.96); }
}

.header-logo { display: block; flex-shrink: 0; }
.header-logo img { height: 34px; width: auto; transition: height var(--transition-smooth); }
.site-header.scrolled .header-logo img { height: 40px; }
.header-logo .logo-light { display: none; }
.site-header.light-mode .header-logo .logo-dark { display: none; }
.site-header.light-mode .header-logo .logo-light { display: block; }

/* ---------- روابط التنقّل ----------
   وزن خفيف ولون خافت عمدًا: زر واتساب يجب أن يبقى العنصر الوحيد
   عالي التباين في الهيدر حتى لا تسحب الروابط الانتباه عن هدف الصفحة. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-inline-end: auto;
  margin-inline-start: 28px;
}

.header-nav a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(20,50,91,0.62);
  padding-block: 6px;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.header-nav a:hover { color: rgba(20,50,91,0.9); }

.header-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.header-nav a.is-active { color: var(--orange); }
.header-nav a.is-active::after { transform: scaleX(1); }

.site-header.light-mode .header-nav a { color: rgba(20,50,91,0.6); }
.site-header.light-mode .header-nav a:hover { color: rgba(20,50,91,0.9); }
.site-header.light-mode .header-nav a.is-active { color: var(--orange); }

/* شريط تقدّم القراءة أسفل الكبسولة */
.header-progress {
  position: absolute;
  inset-inline: 22px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  transform: scaleX(0);
  transform-origin: right center; /* يتقدّم من اليمين لليسار مع اتجاه RTL */
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.site-header.scrolled .header-progress { opacity: 1; }

/* زر قائمة الجوال (يظهر فقط تحت 900px) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: 50%;
  background: rgba(20,50,91,0.07);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-ink);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header.light-mode .nav-toggle span { background: var(--navy-ink); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header-contact { display: flex; align-items: center; gap: 10px; }

.header-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text-on-dark);
  direction: ltr;
  transition: color var(--transition-fast);
}

.site-header.light-mode .header-phone { color: var(--text-on-light); }
.header-phone svg { width: 18px; height: 18px; fill: var(--orange); flex-shrink: 0; }

/* تحت 900px: الروابط تنطوي في قائمة منسدلة زجاجية، وزر واتساب يبقى ظاهرًا */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .header-nav {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px;
    border-radius: 20px;
    /* شبه معتمة عمدًا: القائمة تقع فوق مشهد الهيرو المضيء، والشفافية
       العالية كانت تُضعف قراءة الروابط. */
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(20,50,91,0.1);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 12px 40px rgba(20,50,91,0.16);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  }

  .site-header.light-mode .header-nav {
    background: rgba(247,248,250,0.97);
    box-shadow: 0 12px 40px rgba(20,50,91,0.16);
  }

  .site-header.nav-open .header-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .header-nav a { padding: 12px 16px; border-radius: 12px; font-size: 0.95rem; }
  .header-nav a::after { display: none; }
  .header-nav a.is-active { background: rgba(245,130,31,0.12); }
}

@media (max-width: 640px) {
  .header-capsule { padding-inline-start: 18px; }
  .cta-whatsapp--compact { padding: 10px 18px; font-size: 0.85rem; }
  .header-progress { inset-inline: 16px; }
}

@media (max-width: 640px) {
  .header-phone span { display: none; }
}

/* ============================================
   الهيرو
   ============================================ */
/* الأساس = التخطيط المكدّس (صورة فوق، نص تحت).
   التخطيط الجانبي (نص فوق الفراغ الأيمن للغلاف) مشروط بنسبة أبعاد الشاشة
   لا بعرضها فقط: الغلاف نسبته 1.87، فإن كانت الشاشة أضيق نسبيًا يقصّها
   object-fit من الجانبين ويختفي الفراغ الأيمن المخصّص للنص، فيقع النص فوق
   الأجهزة (لوحظ فعليًا على 1024×768). لذلك الشرط min-aspect-ratio: 3/2. */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-height) + 8px) 48px;
  /* الأساس --cream لا --off-white: يطابق الخلفية المطبوعة داخل صورة
     الهيرو نفسها، فلا يظهر مستطيل بلون مختلف حول الصورة قبل تحميلها
     أو في المساحة التي لا تغطّيها عند نسب شاشة غير متوقّعة. */
  background:
    radial-gradient(ellipse 70% 55% at 74% 38%, rgba(245,130,31,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 18% 100%, rgba(245,130,31,0.07) 0%, transparent 62%),
    var(--cream);
}

.hero-inner {
  position: relative;
  z-index: 3;              /* فوق الغلاف والتعتيم وشعاع الضوء */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--container-max);
  margin: 18px auto 0;
  padding: 0 var(--container-padding);
}

.hero-content { max-width: none; text-align: center; margin: 0 auto; }
.hero-content .hero-badges { justify-content: center; }
.hero-content .hero-subtitle { margin-inline: auto; margin-bottom: 26px; }
.hero-cta-wrapper { margin-bottom: 8px; }

/* حاوية الشارتين — كانت شارة واحدة، فصار margin-bottom الفاصل عن العنوان
   عليها هي (لا على كل شارة)، وتلتف الشارتان لسطرين لو ضاقت الشاشة عن
   احتوائهما جنبًا لجنب بدل أن تتقلّص إحداهما. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(245, 130, 31, 0.12);
  border: 1px solid rgba(245, 130, 31, 0.28);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  /* --orange-light كان مضبوطًا للتباين فوق خلفية شبه سوداء؛ فوق الكريمي
     نسبته ~2.1:1 وغير مقروء. --orange-deep يعطي 4.6:1 فوق نفس الخلفية. */
  color: var(--orange-deep);
}

.hero-badge svg { width: 15px; height: 15px; fill: var(--orange); }

/* السعر عنوان لا شارة: نفس عائلة الخط والوزن اللي يستخدمهما hero-title
   (Cairo 900)، بحجم أصغر منه بخطوة واحدة حتى يبقى "سهّلنا عليك" هو أكبر
   عنصر بالمشهد — لكنه أكبر من أي نص آخر قبل العنوان، فيُقرأ كحقيقة رقمية
   واضحة (السعر) قبل الجملة العاطفية مباشرة. */
.hero-price {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--orange-deep);
  margin: 0 0 6px;
}

.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 22px;
  color: var(--navy-ink);
}

.hero-title .word--accent { color: var(--orange-deep); }

/* كل كلمة عنصر مستقل قابل للكشف بـ clip-path أثناء الافتتاحية
   (hero-intro.js). inline-block إلزامي حتى يتصرّف clip-path بثبات. */
.hero-title .word {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}

body.motion-ready .hero-title .word {
  /* left-inset:100% يعني الكلمة مخفية بالكامل؛ تقليصه إلى 0% يكشفها
     من اليمين إلى اليسار — نفس اتجاه قراءة RTL. */
  clip-path: inset(0 0 0 100%);
}

.hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text-muted-on-light);
  margin-bottom: 38px;
  max-width: 480px;
  line-height: 1.8;
}

/* الحالات الأولية لتسلسل دخول الهيرو — تُفعَّل فقط بعد تأكيد تحميل
   GSAP فعليًا (main.js يضيف body.motion-ready). هذا يمنع اختفاء محتوى
   الهيرو والزر الأساسي لو فشل تحميل مكتبة الحركة من الـCDN. */
body.motion-ready .hero-badge,
body.motion-ready .hero-price,
body.motion-ready .hero-subtitle,
body.motion-ready .hero-cta-wrapper {
  opacity: 0;
}

body.motion-ready .trust-item,
body.motion-ready .trust-partners {
  opacity: 0;
  transform: translateY(14px);
}

/* ---------- الغلاف (الأساس = مكدّس) ---------- */
.hero-media {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1100 / 916;
  max-height: 42vh;
  flex-shrink: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform-origin: center 55%;
  will-change: transform;
}

/* التلاشي يلتصق بحافة الصورة نفسها لا بحافة القسم، فلا يظهر خط قصّ */
.hero-media::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 34%;
  background: linear-gradient(to top, var(--cream) 0%, rgba(250,248,245,0.8) 45%, transparent 100%);
  pointer-events: none;
}

/* تهدئة جهة النص — يعمل فقط في التخطيط الجانبي. كان تعتيمًا أسود بنسبة
   0.94 فوق غلاف داكن؛ صار غسلة كريمية بنفس الاتجاه: الجهة اليمنى (بداية
   النص في RTL) شبه معتمة لتضمن تباين العنوان، وتتلاشى قبل أن تصل
   الأجهزة فلا تُبهتها. */
.hero-scrim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, rgba(250,248,245,0.92) 0%, rgba(250,248,245,0.7) 26%, rgba(250,248,245,0.26) 46%, transparent 64%),
    linear-gradient(to top, var(--cream) 0%, transparent 22%);
}

/* ---------- التخطيط الجانبي: نص فوق الفراغ الأيمن للغلاف ----------
   مشروط بعرض كافٍ **ونسبة أبعاد** قريبة من نسبة الغلاف (1.87)، وإلا
   قصّ object-fit جانبَي الصورة وابتلع الفراغ المخصّص للنص. */
@media (min-width: 1025px) and (min-aspect-ratio: 3/2) {
  .hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-block: calc(var(--header-height) + 24px) 0;
  }

  .hero-media {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    max-height: none;
  }

  .hero-media::after { display: none; }
  .hero-media img { object-position: 22% center; transform-origin: 30% 55%; }

  .hero-scrim { display: block; }

  .hero-inner { margin: 0 auto; justify-items: start; }
  .hero-content { max-width: 42%; text-align: start; margin: 0; }
  .hero-content .hero-badges { justify-content: flex-start; }
  .hero-content .hero-subtitle { margin-inline: 0; margin-bottom: 38px; }
  .hero-cta-wrapper { margin-bottom: 0; }
}

/* شعاع الضوء العابر أثناء الافتتاحية. فوق الغلاف الفاتح لا يظهر شعاع
   أبيض بـoverlay إطلاقًا (أبيض فوق فاتح = بلا فرق)، فاستُبدل بلمعة
   برتقالية دافئة بـsoft-light — تُقرأ كانعكاس ضوء على الأجهزة لا كطبقة. */
.light-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, transparent 42%, rgba(245,130,31,0.22) 50%, transparent 58%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}


/* ============================================
   نطاق المحتوى الرئيسي (فاتح ثابت)
   كان هذا النطاق يتحوّل غامق → فاتح مع السكرول عبر js/scroll-theme.js.
   بعد قرار "الموقع كله فاتح" حُذف ذلك الملف وصار النطاق فاتحًا ثابتًا،
   لكن بقي كعنصر تغليف واحد يحمل خلفية الأقسام كلها — فلا تنشأ حواف
   صلبة بين قسم وآخر، وهي المشكلة الأصلية التي أُدخل شريط الثقة لأجلها.
   ============================================ */
.theme-track {
  position: relative;
  background-color: var(--bg-current);
  color: var(--text-current);
}

/* لا نستخدم currentColor هنا عمدًا: color: color-mix(in srgb, currentColor...)
   داخل خاصية color نفسها مرجع دائري، وتبيّن أن كل من Chromium وغيره لا
   يحسمونه بثبات (لوحظ فعليًا: النص يطلع أبيض شبه شفّاف فوق خلفية فاتحة
   بدل كحلي مخفّف، لأن currentColor رجع للون body الافتراضي لا لون الأب
   الفعلي). القراءة من متغيّر --text-current مباشرة تتفادى الدائرية تمامًا
   وتبقى متزامنة مع لون القسم الحي بالضبط. */
.theme-track .section-muted {
  color: rgba(20,50,91,0.68);
  color: color-mix(in srgb, var(--text-current) 68%, transparent);
}

/* جسر التدرّج: يذوّب حافة الهيرو السفلية في خلفية النطاق. كان يمثّل
   "بقايا" الهيرو الداكن فوق نطاق متحوّل؛ الآن الطرفان كريمي/فاتح، فهو
   انتقال لوني رقيق جدًا بين خلفية صورة الهيرو المطبوعة (--cream) وخلفية
   الصفحة (--off-white) — الفارق بينهما بسيط لكن حافة صلبة بلا جسر تظل
   مرئية عند حدود الصورة. */
.theme-bridge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 22vh;
  min-height: 140px;
  background: linear-gradient(to bottom, var(--cream) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.theme-bridge--reverse {
  background: linear-gradient(to bottom, var(--off-white) 0%, transparent 100%);
}

/* ============================================
   شريط الثقة
   ============================================ */
.trust-strip {
  position: relative;
  z-index: 1;
  padding: 36px 0;
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(20,50,91,0.82);
  /* --text-current لا currentColor: انظر الشرح أعلى .theme-track .section-muted
     على نفس مشكلة المرجع الدائري لخاصية color داخل نفسها. */
  color: color-mix(in srgb, var(--text-current) 82%, transparent);
}

.trust-item svg { width: 18px; height: 18px; fill: var(--orange); flex-shrink: 0; }

.trust-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(20,50,91,0.16);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.trust-partners {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.trust-partners-label {
  font-size: 0.8rem;
  color: rgba(20,50,91,0.72);
  color: color-mix(in srgb, var(--text-current) 72%, transparent);
}

/* بطاقة موحّدة حول كل شعار شريك. الشعارات الثلاثة تصل بخلفيات مختلفة
   (إمكان وموّرا مفرّغان، كوارا بلاطة كحلية صلبة) — بدون إطار موحّد يبدو
   الشريط ثلاث قصاصات غير مرتبطة. هذا أيضًا ما ينصّ عليه CLAUDE.md §6-هـ:
   "بخلفية بطاقة بيضاء بسيطة وظل ناعم". */
/* ارتفاع البطاقة ثابت لا min-height: الشعارات الثلاثة بنِسب مختلفة
   جدًا، وترك الارتفاع للمحتوى كان ينتج بطاقات متفاوتة الطول في صفّ
   واحد. الارتفاع ثابت والشعار يتقيّد بـmax-height داخله. */
.partner-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  height: 62px;
  background: var(--white);
  border: 1px solid rgba(20,50,91,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.partner-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

.partner-logo { max-height: 40px; width: auto; display: block; }
/* كوارا بلاطة كحلية صلبة بحشوة داخلية مطبوعة في الصورة نفسها، فيظهر
   الشعار أصغر بصريًا عند نفس الارتفاع — يُعوَّض برفع سقفه. */
.partner-logo--quara { max-height: 46px; border-radius: 6px; }
/* مورا شعار أفقي عريض (نسبة ~2.95) — سقف أقل يمنعه من أن يطغى عرضًا
   على الشعارين المربّعين نسبيًا بجانبه. */
.partner-logo--mora { max-height: 30px; }

@media (max-width: 768px) {
  .trust-divider { display: none; }
  .trust-strip-inner { justify-content: flex-start; }
}

/* ============================================
   من نحن — شريط مكثّف (لا فقرة كاملة)
   نُقل هذا القسم إلى ما بعد النموذج عمدًا (انظر ترتيب index.html):
   الدليل الاجتماعي والعرض يسبقان أي سرد تعريفي طويل، فبقي هنا سطران
   فقط بجانب شعار عائم صغير — تذكير بالهوية لا محطة قراءة مستقلة.
   ============================================ */
.about-strip {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about-strip-badge {
  position: relative;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-strip-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245, 130, 31, 0.35);
  border: 2px solid color-mix(in srgb, var(--orange) 35%, transparent);
}

.about-strip-badge img {
  position: relative;
  z-index: 1;
  width: 56px;
  height: auto;
  animation: aboutLogoFloat 6s ease-in-out infinite;
}

@keyframes aboutLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .about-strip-badge img { animation: none; }
}

/* العنوان كان visually-hidden وصار ظاهرًا بطلب العميل — هامش سفلي
   سالب يقارب المسافة من gap:16px الخاص بالشريط، فلا ينفصل العنوان
   عن فقرته بمسافة أكبر من مسافته عن الشعار فوقه. */
.about-title {
  font-size: var(--step-3);
  color: var(--navy-ink);
  margin-bottom: -4px;
}

.about-strip p {
  font-size: var(--step-1);
  line-height: 1.9;
  color: var(--text-muted-on-light);
}

/* ============================================
   الأجهزة — بانر بالغلاف الفاتح (#stage)
   ============================================
   نفس نظام الهيرو بالضبط (مكدّس على الشاشات الضيّقة/القصيرة، جانبي
   حين تسمح النسبة)، بألوان الثيم الفاتح بدل الغامق. القرار الأول
   (شبكة بطاقات فردية + مسرح سكرول مثبّت) جُرِّب فعليًا وثبت أنه هش
   مع Lenis أثناء السكرول الحقيقي المتصل — استُبدل بهذا البانر الأبسط
   المطابق لأسلوب الهيرو المُثبَت نجاحه. */
.devices-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin-top: 64px;
}

.devices-media {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1100 / 916;
  max-height: 46vh;
  flex-shrink: 0;
}

.devices-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.devices-media::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 30%;
  background: linear-gradient(to top, var(--off-white) 0%, rgba(247,248,250,0.85) 45%, transparent 100%);
  pointer-events: none;
}

.devices-scrim { display: none; }

.devices-inner {
  position: relative;
  z-index: 2;
  padding-block: 40px 0;
}

.devices-content { max-width: 640px; margin: 0 auto; text-align: center; }
.devices-content .section-muted { margin-inline: auto; max-width: 52ch; }
.devices-content .cta-whatsapp { margin-top: 8px; }

@media (min-width: 1025px) and (min-aspect-ratio: 3/2) {
  .devices-banner { flex-direction: row; align-items: center; min-height: 620px; margin-top: 96px; }

  .devices-media { position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; }
  .devices-media::after { display: none; }
  .devices-media img { object-position: 22% center; }

  .devices-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to left, var(--off-white) 0%, rgba(247,248,250,0.9) 26%, rgba(247,248,250,0.5) 46%, transparent 64%);
  }

  .devices-inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-padding); }
  .devices-content { max-width: 42%; margin: 0; text-align: start; }
  .devices-content .section-title::after { margin-inline: 0; }
  .devices-content .section-muted { margin-inline: 0; }
}

/* ---------- جدار العلامات ---------- */
.brand-wall { padding: 48px 0 8px; }

.brand-wall-label {
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-muted-on-light);
  margin-bottom: 28px;
}

.brand-wall-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}

/* كل شعار داخل بطاقة بيضاء بلونه الرسمي الحقيقي — ثمانية ألوان مختلفة
   مباشرة على الخلفية كانت تبدو مبعثرة، والبطاقة الموحّدة تجعلها تبدو
   مقصودة، لا عشوائية. اللون نفسه يصل عبر --brand من كل <li> بالـHTML. */
.brand-wall-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  background: var(--white);
  border: 1px solid rgba(20,50,91,0.08);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.brand-wall-grid li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--brand, var(--orange)) 35%, transparent);
}

.brand-wall-grid svg {
  height: 28px;
  width: auto;
  max-width: 68%;
  fill: var(--brand, var(--navy-ink));
}

/* لون كل علامة الرسمي — data-brand بدل أنماط inline، اتساقًا مع بقية
   الصفحة (data-device، data-wa-context، إلخ). */
.brand-wall-grid li[data-brand="apple"]       { --brand: #000000; }
.brand-wall-grid li[data-brand="samsung"]     { --brand: #1428A0; }
.brand-wall-grid li[data-brand="playstation"] { --brand: #0070D1; }
.brand-wall-grid li[data-brand="lenovo"]      { --brand: #E2231A; }
.brand-wall-grid li[data-brand="huawei"]      { --brand: #FF0000; }
.brand-wall-grid li[data-brand="xiaomi"]      { --brand: #FF6900; }
.brand-wall-grid li[data-brand="dell"]        { --brand: #007DB8; }
.brand-wall-grid li[data-brand="hp"]          { --brand: #0096D6; }

@media (max-width: 640px) {
  .brand-wall-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .brand-wall-grid li { height: 68px; }
  .brand-wall-grid svg { height: 22px; }
}

/* ============================================
   كيف يعمل التقسيط — Scroll Progress Path
   ============================================ */
.installment-path { background: var(--white); }

.path-wrap {
  position: relative;
  max-width: 760px;
  margin: 64px auto 0;
}

.path-line-svg {
  position: absolute;
  top: 0;
  right: 27px;
  height: 100%;
  width: 4px;
  overflow: visible;
}

.path-line-track { stroke: rgba(20,50,91,0.1); stroke-width: 4; fill: none; }
.path-line-progress {
  stroke: var(--orange);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.path-steps { display: flex; flex-direction: column; gap: 64px; }

.path-step {
  position: relative;
  padding-right: 74px;
  min-height: 56px;
}

.path-step-num {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid rgba(20,50,91,0.12);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth);
}

.path-step.is-active .path-step-num {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.path-step h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: 8px; }
.path-step p { font-size: 0.98rem; color: var(--text-muted-on-light); line-height: 1.8; max-width: 46ch; }

@media (max-width: 640px) {
  .path-step { padding-right: 60px; }
  .path-step-num { width: 44px; height: 44px; font-size: 1.05rem; }
  .path-line-svg { right: 21px; }
}

/* Financing partner note under the path */
.path-partners-note {
  margin-top: 56px;
  padding: 24px 28px;
  background: var(--off-white);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.path-partners-logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.path-partners-note .partner-chip { background: var(--white); }
.path-partners-note p { font-size: 0.85rem; color: var(--text-muted-on-light); flex: 1; min-width: 220px; }

/* ============================================
   جهّز طلبك — مُكوِّن واتساب
   ============================================ */
.composer-section { background: var(--off-white); }

/* لوحة النموذج: بطاقة زجاجية (glass--light) عمود واحد، تتصرّف
   كنموذج عادي متتابع بدون JS، وكمعالج خطوات (wizard) بعد تفعيل JS
   (انظر التبديل عبر .js-ready أدناه وwa-composer.js) */
.composer-panel {
  position: relative;
  max-width: 640px;
  margin: 48px auto 0;
  border-radius: var(--radius-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* شريط التقدّم والنقاط: بلا فائدة قبل تفعيل JS (كل الخطوات ظاهرة
   معًا أصلًا)، فتبقى مخفيّين حتى تضيف wa-composer.js صنف js-ready */
.composer-progress {
  display: none;
  height: 4px;
  border-radius: 4px;
  background: rgba(20,50,91,0.1);
  overflow: hidden;
}
.composer-progress-bar {
  height: 100%;
  width: 20%;
  background: var(--orange);
  border-radius: inherit;
  transition: width var(--transition-smooth);
}
.composer-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  list-style: none;
}
.composer-dots li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(20,50,91,0.18);
  transition: all var(--transition-fast);
}
.composer-dots li.is-active { background: var(--orange); width: 22px; border-radius: 4px; }
.composer-dots li.is-done { background: rgba(245,130,31,0.55); }

.composer-steps { position: relative; }

.composer-step {
  border: none;
  padding: 0;
  margin: 0;
  display: block; /* بدون JS: كل الخطوات ظاهرة معًا متتابعة، فاصل بسيط بينها */
}
.composer-step + .composer-step {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(20,50,91,0.08);
}

.composer-step-heading {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy-ink);
  margin-bottom: 20px;
}

.composer-step-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 12px;
  margin-top: 24px;
}
.composer-step-label:first-of-type { margin-top: 0; }

.choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.choice-pills:last-child { margin-bottom: 0; }

/* وصلة تخطٍّ: لمن يبي يرسل فورًا بلا تعبئة الخطوات — تستخدم نفس رابط
   واتساب الحي أصلًا (انظر wa-composer.js)، فتعمل من أول خطوة مباشرة. */
.composer-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.composer-skip:hover { color: var(--orange); }

.choice-pill {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(20,50,91,0.16);
  background: var(--white);
  color: var(--text-on-light);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.choice-pill:hover { border-color: var(--orange); }

.choice-pill[aria-checked="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 700;
}

/* "وضعك" (الجنسية/جهة العمل) — سطر اختياري قابل للطي داخل خطوة
   التقسيط بدل خطوة كاملة منفصلة (كانت الخطوة الثالثة سابقًا). عنصر
   <details> أصلي: يعمل ويُقرأ بدون أي JS، ومفتوح افتراضيًا فقط إذا
   المتصفح لا يدعم :has (احتياط)، وإلا يبدأ مغلقًا لتقصير الخطوة. */
.composer-optional {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed rgba(20,50,91,0.14);
}
.composer-optional summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
}
.composer-optional summary::-webkit-details-marker { display: none; }
.composer-optional summary::before {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--orange);
  transition: transform var(--transition-fast);
}
.composer-optional[open] summary::before { transform: rotate(45deg); }
.composer-optional .choice-pills { margin-top: 16px; }
/* :first-of-type يُحسب بين أشقاء <details> وحدها لا الفورم كله،
   فتحتاج تسمية "الجنسية" (أول تسمية داخل التفاصيل) هامشًا علويًا
   صريحًا بدل الصفر الافتراضي حتى لا تلتصق بسطر summary. */
.composer-optional .composer-step-label:first-of-type { margin-top: 16px; }

/* خطوة البيانات الشخصية: حقول نصية عادية */
.composer-field { margin-bottom: 24px; }
.composer-field:last-child { margin-bottom: 0; }
.composer-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.composer-field input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(20,50,91,0.16);
  background: var(--white);
  color: var(--text-on-light);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.composer-field input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245,130,31,0.15);
}
.composer-field input[aria-invalid="true"] { border-color: #B3261E; }
.composer-error {
  margin-top: 8px;
  font-size: 0.82rem;
  color: #B3261E;
  font-weight: 600;
}

.composer-preview-wrap {
  background: var(--white);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.composer-preview-label {
  font-size: 0.82rem;
  color: var(--text-muted-on-light);
  font-weight: 600;
}

.composer-preview-bubble {
  background: var(--off-white);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--navy-ink);
  box-shadow: var(--shadow-card);
  min-height: 110px;
  white-space: pre-line;
}

/* أزرار التنقّل: مخفية بدون JS — زر واتساب بخطوة المراجعة يعمل
   دائمًا بدون الحاجة للتنقّل خطوة بخطوة */
.composer-nav {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ---------- وضع المعالج (بعد تفعيل JS) ---------- */
.composer-panel.js-ready .composer-progress { display: block; }
.composer-panel.js-ready .composer-dots { display: flex; }
.composer-panel.js-ready .composer-nav { display: flex; }
.composer-panel.js-ready .composer-step { display: none; }
.composer-panel.js-ready .composer-step.is-active { display: block; }
.composer-panel.js-ready .composer-step + .composer-step {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.composer-nav-btn[hidden] { display: none; }

@media (max-width: 900px) {
  .composer-panel { padding: 28px; }
}

/* ============================================
   الأسئلة الشائعة
   ============================================ */
.faq-section { background: var(--white); }

.faq-list { max-width: 800px; margin: 48px auto 0; }

.faq-item { border-bottom: 1px solid rgba(20,50,91,0.1); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  list-style: none;
  transition: color var(--transition-fast);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--orange);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--orange); }

/* حيلة grid-rows لفتح/إغلاق سلس بدل قفزة <details> الافتراضية.
   faq-accordion.js يتحكم بـ grid-template-rows مباشرة؛ هذه القيم
   هي الحالة الأولية (بدون JS تبقى <details> تعمل بشكل فطري وفوري). */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-smooth);
}

.faq-item[open] .faq-answer-wrap { grid-template-rows: 1fr; }

.faq-answer {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 22px 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--text-muted-on-light);
}

.faq-answer a { color: var(--orange); text-decoration: underline; }

/* الأسئلة الإضافية (بعد الرابعة) مخفية افتراضيًا خلف زر "أسئلة أكثر" —
   تبقى بالكامل داخل DOM (مفهرسة، وفي FAQPage JSON-LD) وتُقرأ فورًا
   بدون JS (لا صنف .is-collapsed يُضاف إلا عبر faq-accordion.js). */
.faq-item.is-collapsed { display: none; }

.faq-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px auto 0;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(20,50,91,0.16);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.faq-more:hover { border-color: var(--orange); color: var(--orange); }
.faq-more svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--transition-fast); }
.faq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-more[hidden] { display: none; }

.faq-cta { display: flex; justify-content: center; margin-top: 32px; }

.faq-disclaimer {
  max-width: 800px;
  margin: 28px auto 0;
  font-size: 0.82rem;
  color: var(--text-muted-on-light);
  line-height: 1.8;
  padding-top: 20px;
  border-top: 1px dashed rgba(20,50,91,0.15);
}

/* ============================================
   زورنا — تقييمات + خريطة
   ============================================ */
.visit-section { background: var(--off-white); }

.visit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 44px;
}

.visit-header .section-title { margin-bottom: 0; }

.visit-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid rgba(20,50,91,0.1);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

.visit-header-badge svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- بطاقات التقييمات المستقلة ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid transparent;
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* ارتفاع + ظل أعمق + حدّ برتقالي خفيف عند المرور — تغذية راجعة للمس */
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(245,130,31,0.28);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.review-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
}

.review-head-meta { min-width: 0; }

.review-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  color: var(--navy-ink);
  line-height: 1.3;
}

.review-meta {
  font-size: 0.78rem;
  color: var(--text-muted-on-light);
}

.review-stars {
  color: var(--orange);
  font-size: 0.95rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.review-text {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-muted-on-light);
  flex: 1;
}

.review-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(20,50,91,0.08);
  font-size: 0.78rem;
  color: var(--text-muted-on-light);
}

.review-source svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- الرسائل الصوتية (بشكل واتساب الداكن) ----------
   فقاعة داكنة عمدًا فوق صفحة فاتحة: هذا هو المقصد — أن تُقرأ كلقطة
   شاشة حقيقية من واتساب لا كعنصر واجهة من الموقع. الألوان مأخوذة من
   قيم واتساب الفعلية (#1f2c34 خلفية، #00a884 أخضر، #53bdeb علامة
   القراءة، #8696a0 الأيقونات الثانوية). */
.voice-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/* رسالة صوتية واحدة: بدون هذا الحد تتمدّد البطاقة الوحيدة على عرض
   القسم كامل بالديسكتوب فتبدو كشريط فارغ لا كفقاعة واتساب. */
.voice-notes--single { grid-template-columns: minmax(0, 460px); }

.voice-notes-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-ink);
  margin-bottom: 14px;
}

.voice-notes-label svg { width: 20px; height: 20px; fill: #00a884; flex-shrink: 0; }

.voice-note {
  --voice-progress: 0%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #1f2c34;
  box-shadow: 0 6px 22px rgba(20,50,91,0.16);
  direction: rtl;
}

.voice-note-avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
}

/* بدون JS: يبقى مشغّل المتصفح الأصلي ظاهرًا وصالحًا. مع JS يُخفى
   ويحلّ محلّه .voice-note-body المبني في voice-note.js */
.voice-note audio { width: 100%; max-width: 220px; }
.voice-note.is-enhanced audio { display: none; }

.voice-note-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.voice-note-play {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: #8696a0;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.voice-note-play:hover { color: #e9edef; background: rgba(255,255,255,0.06); }
.voice-note-play svg { width: 26px; height: 26px; fill: currentColor; }

.voice-note-track {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* الموجة والشريط متراكبان في نفس المساحة: الموجة هي المرئي، والـinput
   شفاف فوقها ليحمل كل تفاعل السحب وإمكانية الوصول بلوحة المفاتيح. */
.voice-note-wave {
  position: relative;
  height: 22px;
  pointer-events: none;
}

.voice-note-wave-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.voice-note-wave-layer span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: #47575f;
}

/* الطبقة الخضراء نسخة مطابقة فوق الرمادية، تُقتطع بـclip-path حسب
   --voice-progress التي يكتبها voice-note.js. القصّ من اليسار لأن
   التشغيل في حاوية RTL يتقدّم من اليمين لليسار، فالمقطع المُشغَّل هو
   الجزء الأيمن فيزيائيًا. */
.voice-note-wave-layer--played span { background: #00a884; }
.voice-note-wave-layer--played {
  clip-path: inset(0 0 0 calc(100% - var(--voice-progress)));
}

.voice-note-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  accent-color: #00a884;
}

.voice-note-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #8696a0;
  direction: ltr;
  justify-content: flex-start;
}

.voice-note-mic svg { width: 13px; height: 13px; fill: #8696a0; display: block; }
.voice-note.is-playing .voice-note-mic svg { fill: #00a884; }

.voice-note-ticks { margin-inline-start: auto; }
.voice-note-ticks svg { width: 16px; height: 11px; fill: #53bdeb; display: block; }

.voice-note-name {
  font-size: 0.72rem;
  color: #8696a0;
}

@media (max-width: 640px) {
  .voice-notes { grid-template-columns: 1fr; }
}

.reviews-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.reviews-actions--center { justify-content: center; margin-bottom: 32px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(20,50,91,0.18);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.btn-outline:hover { border-color: var(--orange); color: var(--orange); }

/* خلفية مصمّمة خلف الـiframe: لو تعذّر الوصول لخرائط جوجل (شبكة محجوبة
   أو حاجب تتبّع) يرى الزائر لوحة بألوان الهوية لا صندوقًا أبيض فارغًا،
   وأزرار "احصل على الاتجاهات" و"اتصل بنا" تبقى عاملة فوقها. */
.map-card {
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background:
    radial-gradient(circle at 50% 40%, rgba(245,130,31,0.16) 0%, transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.map-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px;
  background:
    radial-gradient(circle at 50% 40%, rgba(245,130,31,0.16) 0%, transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: opacity var(--transition-smooth);
}

.map-facade svg { width: 40px; height: 40px; fill: var(--orange); }
.map-facade strong { font-family: var(--font-heading); font-size: 1.05rem; }
.map-facade span { font-size: 0.85rem; color: var(--text-muted-on-dark); max-width: 34ch; }

.map-card.is-active .map-facade { opacity: 0; pointer-events: none; }

.map-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.map-card.is-active iframe { opacity: 1; }

.map-actions {
  padding: 18px 24px;
  display: flex;
  gap: 12px;
  background: var(--white);
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .map-card { min-height: 300px; }
}

/* ============================================
   قسم المتجر الإلكتروني — المسار الثاني (شراء مباشر بدون تقسيط)
   موضعه بعد الأسئلة عمدًا: مسار التحويل الأساسي بالصفحة كلها هو واتساب،
   فلا يُقدَّم بديل الشراء المباشر إلا بعد أن يكون الزائر قد رأى العرض
   وأُجيبت أسئلته، حتى لا يزاحم الـCTA الرئيسي في منتصف الرحلة.
   ============================================ */
.store-section {
  background: linear-gradient(to bottom, var(--off-white) 0%, var(--white) 100%);
}

.store-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.store-media {
  position: relative;
  isolation: isolate;
}

/* توهّج شعاعي خلف الموك-أب الشفاف — يفصله عن الخلفية الفاتحة بلا إطار */
.store-media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 6% -4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(245,130,31,0.2) 0%, transparent 68%);
  filter: blur(8px);
}

.store-media img { width: 100%; height: auto; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius-pill);
  background: rgba(245,130,31,0.1);
  border: 1px solid rgba(245,130,31,0.28);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange-deep);
}

.store-badge svg { width: 15px; height: 15px; fill: var(--orange); flex-shrink: 0; }

.store-content h2 { font-size: var(--step-4); margin-bottom: 16px; color: var(--navy-ink); }

.store-content p {
  font-size: var(--step-0);
  color: var(--text-muted-on-light);
  line-height: 1.9;
  margin-bottom: 22px;
  max-width: 46ch;
}

.store-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.store-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid rgba(20,50,91,0.1);
  box-shadow: var(--shadow-card);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--navy-ink);
}

.store-features svg { width: 14px; height: 14px; fill: var(--orange); flex-shrink: 0; }

/* زر المتجر: بالهوية الكحلية لا الخضراء — لأن الأخضر في هذه الصفحة
   يعني "واتساب" حصرًا، وأي زر أخضر آخر يُقرأ خطأً كزر تواصل. */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 6px 22px rgba(20,50,91,0.24);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(20,50,91,0.32);
}

.btn-store svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

.store-note {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-muted-on-light);
}

@media (max-width: 900px) {
  .store-inner { grid-template-columns: 1fr; }
  .store-media { order: -1; max-width: 520px; margin-inline: auto; }
  .store-content { text-align: center; }
  .store-content p { margin-inline: auto; }
  .store-features { justify-content: center; }
}

/* ---------- زر المتجر في الهيدر ---------- */
.header-store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(20,50,91,0.18);
  background: rgba(255,255,255,0.7);
  color: var(--navy-ink);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.header-store:hover {
  background: var(--white);
  border-color: rgba(245,130,31,0.5);
  color: var(--orange-deep);
}

.header-store svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

/* تحت 900px الكبسولة ضيّقة — يُترك زر واتساب وحده هو الأكشن الظاهر،
   ورابط المتجر ينطوي داخل قائمة التنقّل (نسخة .header-nav منه). */
@media (max-width: 900px) {
  .header-store { display: none; }
}

.header-nav .nav-store { color: var(--orange-deep); font-weight: 600; }
@media (min-width: 901px) { .header-nav .nav-store { display: none; } }

/* ============================================
   منطقة الإغلاق (فاتحة)
   ============================================ */
.theme-track-reverse {
  background-color: var(--bg-current);
  color: var(--text-current);
}

/* أُعيد بناء البانر الختامي بالكامل بعد قرار "الموقع كله فاتح": كان
   صورة مركّبة داكنة (closing-dark.webp) بتعتيم أسود فوقها. صار قسمًا
   فاتحًا بـCSS خالص — تدرّج كريمي + توهّج برتقالي شعاعي + الشعار. هذا
   يوفّر طلبًا لصورة بحجم ~46KB أسفل الصفحة، ويُبقي "إغلاق القصة"
   بنفس لغة الافتتاح البصرية (كريمي + برتقالي) لا بانقلاب لوني. */
.final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 64px;
  padding-block: clamp(64px, 8vw, 112px);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 22%, rgba(245,130,31,0.16) 0%, transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(245,130,31,0.07) 0%, transparent 60%),
    linear-gradient(to bottom, var(--white) 0%, var(--cream) 100%);
}

/* حلقة ضوء زخرفية خلف المحتوى — تحاكي حلقة النيون في صور الأجهزة */
.final-cta::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(560px, 82vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(245,130,31,0.22);
  pointer-events: none;
}

.final-cta-logo {
  position: relative;
  z-index: 3;
  height: 56px;
  width: auto;
  margin: 0 auto 26px;
}

/* خط ضوء رفيع يفصل الإغلاق عن القسم فوقه */
.final-cta-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(245,130,31,0.5), transparent);
}

.final-cta-inner {
  position: relative;
  z-index: 3;
}

.final-cta-content { max-width: 640px; margin: 0 auto; text-align: center; }

.final-cta-content h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--navy-ink);
}

.final-cta-trust {
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--text-muted-on-light);
}

.final-cta-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--navy-ink);
  border-bottom: 1px solid rgba(20,50,91,0.3);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.final-cta-alt:hover { color: var(--orange-deep); border-color: var(--orange); }

.cta-whatsapp--halo {
  box-shadow: 0 4px 20px var(--orange-glow), 0 0 0 8px rgba(245,130,31,0.08);
}
.cta-whatsapp--halo:hover {
  box-shadow: 0 8px 40px var(--orange-glow-strong), 0 0 0 10px rgba(245,130,31,0.14);
}

@media (min-width: 1025px) {
  .final-cta { margin-top: 96px; }
}

/* ============================================
   الفوتر
   ============================================ */
/* فوتر فاتح. بلا خلفية داكنة تفصله، يحتاج حدًّا علويًا صريحًا وإلا
   ذاب في البانر الختامي فوقه وبدت الصفحة بلا نهاية. */
.site-footer {
  padding: 56px 0 28px;
  background: var(--white);
  border-top: 1px solid rgba(20,50,91,0.1);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand img { height: 42px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 0.9rem; color: var(--text-muted-on-light); line-height: 1.8; max-width: 300px; }

.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  margin-bottom: 18px;
  color: var(--orange-deep);
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text-muted-on-light);
  transition: color var(--transition-fast);
}

.footer-links a:hover { color: var(--orange-deep); }
.footer-links a svg { width: 17px; height: 17px; fill: var(--orange); flex-shrink: 0; }

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(20,50,91,0.06);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 18px; height: 18px; fill: var(--text-muted-on-light); }

/* ---------- البيانات النظامية (سجل تجاري / ضريبي / اعتماد) ---------- */
.footer-credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid rgba(20,50,91,0.1);
}

.credential-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--off-white);
  border: 1px solid rgba(20,50,91,0.08);
  border-radius: 14px;
}

.credential-item img { height: 42px; width: auto; flex-shrink: 0; }
/* شعار المركز السعودي أفقي عريض (نسبة ~4.2) — ارتفاع أقل حتى لا يفرض
   عرضًا يكسر الصف على الشاشات المتوسطة. */
.credential-item--sbc img { height: 30px; }

.credential-meta { display: flex; flex-direction: column; line-height: 1.4; }

.credential-label {
  font-size: 0.74rem;
  color: var(--text-muted-on-light);
}

/* الأرقام النظامية لاتينية دائمًا: direction:ltr يمنع محرّك الاتجاه
   الثنائي من إعادة ترتيب مقاطعها داخل الفقرة العربية (لُوحظ فعليًا أن
   الرقم يُقرأ معكوسًا بلا هذا الضبط)، وtabular-nums يمنع رقص العرض. */
.credential-value {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-ink);
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.credential-value--text { direction: rtl; font-size: 0.86rem; letter-spacing: 0; }

@media (max-width: 640px) {
  .footer-credentials { flex-direction: column; align-items: stretch; }
  .credential-item { justify-content: flex-start; }
}

.footer-bottom {
  border-top: 1px solid rgba(20,50,91,0.1);
  padding-top: 24px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted-on-light);
}

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   زر واتساب العائم
   ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 900;
  width: 60px;
  height: 60px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, #e06a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 30px var(--orange-glow-strong);
  animation: floatPulse 3.6s ease-in-out infinite;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

/* يُخفى أثناء ظهور زر الهيرو نفسه: زران متطابقان في آن واحد تكرار يشتّت،
   وكانا يتصادمان فعليًا على الجوال (تداخل 28px رأسيًا قبل الإصلاح).
   يعود فورًا بمجرد خروج زر الهيرو من الشاشة، فيبقى التحويل متاحًا دائمًا. */
.whatsapp-float.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

@keyframes floatPulse {
  0%, 100% { box-shadow: 0 6px 30px var(--orange-glow-strong); }
  50%      { box-shadow: 0 6px 30px var(--orange-glow-strong), 0 0 0 12px rgba(245,130,31,0.12); }
}

/* ============================================
   شريط الأكشن الثابت — الجوال فقط
   ============================================
   تحت 640px، الزر الدائري العائم أضعف من شريط كامل العرض بزرّين
   (واتساب + اتصال): مساحة لمس أكبر ووضوح أعلى دون سكرول أفقي. يبقى
   مخفيًا تمامًا فوق 640px حيث الزر الدائري يكفي وأريح بصريًا.
   نفس منطق is-tucked المستخدم مع الزر العائم (انظر main.js) يُطبَّق
   هنا أيضًا — يختفي الشريط فقط أثناء ظهور زر واتساب داخل الهيرو نفسه. */
.mobile-action-bar {
  display: none;
  flex-direction: column;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  gap: 7px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.94);
  border-top: 1px solid rgba(20,50,91,0.1);
  box-shadow: 0 -6px 24px rgba(20,50,91,0.08);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  transition: transform var(--transition-smooth);
}

.mobile-action-bar.is-tucked { transform: translateY(100%); }

.mobile-action-bar-note {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-muted-on-light);
}

.mobile-action-bar-row {
  display: flex;
  gap: 10px;
}

.mobile-action-bar .cta-whatsapp {
  flex: 2;
  min-height: 48px;
  padding-inline: 12px;
  font-size: 0.95rem;
}

.mobile-action-bar-call {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  min-width: 48px;
  border-radius: var(--radius-pill);
  background: rgba(20,50,91,0.05);
  border: 1px solid rgba(20,50,91,0.14);
  color: var(--navy-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.mobile-action-bar-call svg { width: 18px; height: 18px; fill: var(--orange); flex-shrink: 0; }

@media (max-width: 640px) {
  /* مساحة ثابتة أسفل الصفحة تعوّض الشريط الثابت حتى لا يغطّي الفوتر —
     محجوزة دائمًا بصرف النظر عن حالة is-tucked المؤقتة (لا تتغيّر إلا
     قرب الهيرو أعلى الصفحة، بعيدًا تمامًا عن الفوتر أسفلها). */
  /* 80px = ارتفاع محتوى الشريط (سطر الطمأنة + فجوة + زرّان 48px + حشوة
     علوية)، والباقي هامش تنفّس فوق منطقة الأمان. */
  body { padding-bottom: calc(80px + max(10px, env(safe-area-inset-bottom)) + 12px); }

  .whatsapp-float { display: none; }
  .mobile-action-bar { display: flex; }
}

/* ============================================
   شاشة المسار السريع للواتساب (?wa=1)
   ============================================
   مخفية تمامًا افتراضيًا: لا تظهر إلا حين يضيف سكربت الـ<head> الصنف
   is-wa-fasttrack على <html> (انظر js/wa-fasttrack.js). طبقة معتمة
   كاملة بدل إخفاء أقسام الصفحة واحدًا واحدًا — أبسط وأضمن ألّا يتسرّب
   عنصر ثابت (الهيدر، الزر العائم، شريط الجوال) من تحتها. */
.wa-fasttrack { display: none; }

html.is-wa-fasttrack { overflow: hidden; }

html.is-wa-fasttrack .wa-fasttrack {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 24px;
  background: var(--off-white);
}

.wa-fasttrack-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 380px;
}

.wa-fasttrack-logo {
  width: 96px;
  height: auto;
  animation: wa-fasttrack-breathe 1.6s ease-in-out infinite;
}

.wa-fasttrack-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy-ink);
}

.wa-fasttrack-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted-on-light);
}

.wa-fasttrack .cta-whatsapp { margin-top: 6px; }

.wa-fasttrack-dismiss {
  border: none;
  background: transparent;
  padding: 8px 12px;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted-on-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.wa-fasttrack-dismiss:hover { color: var(--navy-ink); }

@keyframes wa-fasttrack-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.72; transform: scale(0.965); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fasttrack-logo { animation: none; }
}

/* ============================================
   استجابة عامة
   ============================================ */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .composer-panel { padding: 22px; }
  .review-card { padding: 22px; }
  .visit-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   تقليل الحركة
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }

  .hero-badge, .hero-price, .hero-title, .hero-subtitle, .hero-cta-wrapper,
  .hero-media img,
  .trust-item, .trust-partners {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-title .word { clip-path: inset(0 0 0 0) !important; }
  .light-sweep { display: none !important; }
}