/* ==========================================================================
   فواتيري — الأقسام
   (المرحلة 1: الهيرو + شريط الثقة — تُضاف بقية الأقسام في المرحلتين 2 و 3)
   ========================================================================== */

/* ==========================================================================
   القسم 2 — الهيرو
   ========================================================================== */
.hero {
  position: relative;
  padding-block-start: clamp(7rem, 5rem + 9vw, 11rem);
  padding-block-end: clamp(3rem, 2rem + 4vw, 6rem);
}

/* ---------- خلفية الهيرو: توهّج + أقواس عالمية ---------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* توهّج ذهبي ناعم يملأ الزاوية العليا من جهة بداية السطر */
.hero__bg::before {
  content: '';
  position: absolute;
  inset-block-start: -28%;
  inset-inline-start: -12%;
  inline-size: min(78vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(162, 128, 73, 0.16) 0%, rgba(162, 128, 73, 0.05) 42%, transparent 68%);
}

.hero__arcs {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: -6%;
  inline-size: min(62vw, 720px);
  opacity: 0.85;
}
[dir='ltr'] .hero__arcs { transform: scaleX(-1); }

.arc__line {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1;
  opacity: 0.35;
}
.arc__flow {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  opacity: 0.75;
}

.city__dot  { fill: var(--gold); }
.city__ring { fill: var(--gold); opacity: 0.35; }
.city__label {
  fill: var(--gold-deep);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font);
}

.home__dot  { fill: var(--gold-dark); }
.home__halo { fill: var(--gold); }

/* ---------- شبكة الهيرو ---------- */
.hero__grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}

.hero__title { margin-block-end: var(--s-5); }

/* كلمة «أتعابك» — لون ذهبي وخط مرسوم يدوياً تحتها */
.mark {
  position: relative;
  display: inline-block;
  color: var(--gold-deep);
  white-space: nowrap;
}

.mark__underline {
  position: absolute;
  inset-inline-start: -3%;
  inset-block-end: -0.18em;
  inline-size: 106%;
  block-size: 0.28em;
  overflow: visible;
}
.mark__stroke {
  fill: none;
  stroke: var(--gold);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.72;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-3);
  max-inline-size: 54ch;
  margin-block-end: var(--s-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}

/* ==========================================================================
   الهيرو — «الفاتورة الحية»
   ========================================================================== */
.hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
}

.invoice {
  position: relative;
  inline-size: min(100%, 420px);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* موجة الضوء التي تعبر البطاقة لحظة الدفع */
.invoice__sweep {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 55%;
  background: linear-gradient(100deg, transparent, rgba(162, 128, 73, 0.16), transparent);
  pointer-events: none;
  opacity: 0;
}

.invoice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block-end: var(--s-4);
}

.invoice__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--ink-4);
}

.invoice__number {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.invoice__mark svg { block-size: 26px; inline-size: auto; fill: var(--gold); opacity: 0.9; }

.invoice__client {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block-end: var(--s-4);
}

.invoice__avatar {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--gold-wash);
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 800;
  color: var(--gold-deep);
  font-size: var(--fs-sm);
}

.invoice__client-name { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.3; }
/* ink-4 يرسب في فحص AA على الأبيض (3.1:1) — ink-3 يعطي 5.8:1 بالنبرة نفسها */
.invoice__client-meta { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.3; }

.invoice__rows { display: grid; gap: var(--s-3); padding-block: var(--s-4); }

/* فاصل شعري بدل الإطار — لا حدود في هذا التصميم */
.invoice__rows { box-shadow: inset 0 1px 0 var(--gold-mist), inset 0 -1px 0 var(--gold-mist); }

.invoice__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
}
.invoice__row-name { color: var(--ink-2); }
.invoice__row-amt  { font-weight: 700; color: var(--ink); }

.invoice__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-start: var(--s-4);
}
.invoice__total-label { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; }
.invoice__total-amt {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800;
  color: var(--ink);
}

/* الختم — يهبط ويستقرّ مائلاً */
.invoice__stamp {
  position: absolute;
  inset-block-start: clamp(4.5rem, 4rem + 2vw, 6rem);
  inset-inline-end: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  padding: 0.3em 0.9em;
  border: 2.5px solid var(--gold);
  border-radius: var(--r-sm);
  /* الذهبي الفاتح على الأبيض = 3.67:1 ويرسب AA — الذهبي العميق 5.7:1
     ويحفظ نبرة الختم نفسها. والإطار وحده يبقى بالذهبي الفاتح. */
  color: var(--gold-deep);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  transform: rotate(-10deg);
  opacity: 1;
  pointer-events: none;
}

/* شارة «وصلت إلى حسابك البنكي» أسفل البطاقة */
.invoice__arrive {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
}

.live-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}

/* ==========================================================================
   القسم 3 — شريط الثقة
   ========================================================================== */
.trust {
  position: relative;
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}
.trust::before {
  background: var(--ivory-2);
  /* خطّان شعريان علوي وسفلي — كما يطلب الشيت */
  box-shadow: inset 0 1px 0 var(--gold-mist), inset 0 -1px 0 var(--gold-mist);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.trust__icon {
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--gold-wash);
  color: var(--gold-deep);
  transition: transform var(--t-base) var(--ease-spring);
}
.trust__icon svg { inline-size: 21px; block-size: 21px; }

/* حركة «ضغطة ختم» دقيقة عند المرور */
.trust__item:hover .trust__icon { transform: scale(0.9); }

.trust__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.trust__desc {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.4;
}

/* الخانة الرقمية: العدّاد يحلّ محلّ العنوان */
.trust__stat {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 800;
  color: var(--gold-deep);
  line-height: 1.2;
}

/* ==========================================================================
   القسم 3ب — من نحن
   ثلاث ركائز تعريفية. الشبكة نفسها تنهار إلى عمودين ثم عمود واحد
   ضمن قواعد الاستجابة في آخر الملف، تماماً كـ .pain و .feat.
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 1rem + 2.6vw, 3rem);
}

.about__icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-lg);
  background: var(--gold-wash);
  color: var(--gold-deep);
  margin-block-end: var(--s-4);
}
.about__icon svg { inline-size: 23px; block-size: 23px; }

/* الحجم والوزن يأتيان من قاعدة h3 في base.css */
.about__title { margin-block-end: var(--s-2); }

.about__desc {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.65;
}

/* ==========================================================================
   القسم 4 — الألم
   ========================================================================== */
.pain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}

.pain__card { max-inline-size: 34ch; }

.pain__icon {
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-lg);
  background: rgba(176, 112, 42, 0.09);
  color: var(--amber);
  margin-block-end: var(--s-4);
  transition: transform var(--t-base) var(--ease-spring);
}
.pain__icon svg { inline-size: 26px; block-size: 26px; }

.pain__title {
  color: var(--ink);
  margin-block-end: var(--s-2);
}

.pain__desc { color: var(--ink-3); font-size: var(--fs-sm); }

/* ==========================================================================
   القسم 5 — كيف تعمل
   ========================================================================== */
.how__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.how__steps { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.how__step {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

/* الرقم مفرّغ بحدّ ذهبي، ويمتلئ عندما تصبح الخطوة نشطة */
.how__num {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  flex: none;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--gold-soft);
  transition: color var(--t-slow) var(--ease), -webkit-text-stroke-color var(--t-slow) var(--ease);
}

.how__step-title { color: var(--ink-3); transition: color var(--t-base) var(--ease); }
.how__step-desc  { color: var(--ink-3); font-size: var(--fs-sm); margin-block-start: var(--s-2); }

.how__step.is-active .how__num { color: var(--gold); -webkit-text-stroke-color: var(--gold); }
.how__step.is-active .how__step-title { color: var(--ink); }

/* اللوحة البصرية الملازمة */
/* ---------- نداء الفعل بعد الخطوات الثلاث ---------- */
.how__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-5);
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  /* فاصل شعري بدل الإطار — لا حدود في هذا التصميم */
  box-shadow: inset 0 1px 0 var(--gold-mist);
}

.how__cta-note {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
}

.how__media { position: relative; }

.how__sticky {
  position: sticky;
  inset-block-start: 8.5rem;
  aspect-ratio: 1;
  inline-size: min(100%, 420px);
  margin-inline: auto;
}

.how__viz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.how__viz.is-active { opacity: 1; transform: none; }

/* ---------- شاشات المنصة (portal.fawateery.me) ----------
   إعادة بناء لواجهة المنصة الحقيقية بسمتها الداكنة، لا رسوم تجريدية:
   الزائر يرى ما سيراه فعلاً بعد التسجيل. الألوان من رموز الانقلاب الداكن
   نفسها المستعملة في قسم الأمان — لا لون جديد خارج tokens.css. */
.pui {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--dark-bg);
  color: var(--dark-ink);
  font-size: var(--fs-xs);
  line-height: 1.5;
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.pui__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--s-3);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
}
.pui__bar img { opacity: 0.9; }

.pui__avatar {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--dark-bg-2);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
}

.pui__tag {
  font-size: var(--fs-xs);
  color: var(--dark-ink-2);
}

/* عنوان الشاشة بشريطه الذهبي — كما يظهر في المنصة تماماً */
.pui__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--dark-ink);
}
.pui__title::before {
  content: '';
  inline-size: 3px;
  block-size: 15px;
  border-radius: 2px;
  background: var(--dark-gold);
}

/* خطوات معالج «إضافة فاتورة» */
.pui__steps {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--dark-ink-2);
  font-size: 0.7rem;
}
.pui__steps li { display: flex; align-items: center; gap: var(--s-2); }
.pui__steps li + li::before {
  content: '';
  inline-size: 10px;
  block-size: 1px;
  background: rgb(255 255 255 / 0.18);
}
.pui__steps .is-done { color: var(--live); }
.pui__steps .is-now  { color: var(--dark-gold); font-weight: 700; }

.pui__rows {
  margin-block-start: var(--s-1);
  border-radius: var(--r-sm);
  background: var(--dark-bg-2);
  overflow: hidden;
}
.pui__head,
.pui__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
}
.pui__head {
  color: var(--dark-ink-2);
  font-size: 0.7rem;
  border-block-end: 1px solid rgb(255 255 255 / 0.07);
}
.pui__row + .pui__row { border-block-start: 1px solid rgb(255 255 255 / 0.05); }

.pui__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: rgb(207 169 107 / 0.12);
  color: var(--dark-gold);
  font-weight: 700;
}

.pui__field,
.pui__amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-2);
}
.pui__amount {
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--dark-bg-2);
  align-items: center;
}
.pui__amount-num {
  font-size: var(--fs-lead);
  font-weight: 800;
  color: var(--dark-ink);
}

.pui__label { color: var(--dark-ink-2); }
.pui__label--block { display: block; margin-block-start: var(--s-1); }
.pui__value { color: var(--dark-ink); font-weight: 700; }

.pui__card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--dark-bg-2);
  box-shadow: inset 0 0 0 1px rgb(207 169 107 / 0.32);
  color: var(--dark-ink);
}
.pui__card-chip {
  inline-size: 26px;
  block-size: 18px;
  flex: none;
  border-radius: 4px;
  background: linear-gradient(140deg, var(--dark-gold), var(--gold-dark));
}
.pui__card-icon { flex: none; color: var(--dark-gold); }
.pui__card-icon svg { inline-size: 20px; block-size: 20px; }

.pui__cta {
  margin-block-start: auto;
  padding: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--dark-gold);
  color: var(--dark-bg);
  font-weight: 700;
  text-align: center;
}

/* سطر النجاح — أخضر المنصة نفسه */
.pui__ok {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: rgb(47 133 96 / 0.16);
  color: #6fd6a8;
  font-weight: 700;
}
.pui__ok-mark {
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}
.pui__ok-mark svg { inline-size: 14px; block-size: 14px; }

/* ==========================================================================
   القسم 6 — قنوات الدفع والسحب
   ========================================================================== */
/* كان التخطيط الثلاثي يترك كل عمود يتمركز باستقلال، فتنزل بطاقة وترتفع
   أخرى ولا يقف عنوان بجانب عنوان. والأسوأ أن أيقونتَي الطرفين 50px بينما
   قرص المنصة 96px، فبدا القسم كأن عناصره من ثلاثة تصاميم.
   العلاج: صفّ واحد بارتفاع موحّد (stretch)، وشبكة داخلية بمسارات ثابتة
   تجعل الأيقونة بمحاذاة الأيقونة والعنوان بمحاذاة العنوان، وقياس أيقونات
   واحد للطرفين مع قرص مركزي أكبر بقدر محسوب لا عشوائي. */
.flow {
  --flow-gap: clamp(1.25rem, 0.25rem + 4vw, 3.5rem);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--flow-gap);
}

.flow__side {
  display: grid;
  /* المسارات الثابتة هي ما يوحّد المحاذاة أفقياً بين البطاقتين */
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: var(--s-3);
  max-inline-size: none;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  text-align: center;
}

.flow__icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: 0;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
}
.flow__icon svg { inline-size: 26px; block-size: 26px; }

.flow__title { margin-block-end: 0; font-size: var(--fs-h3); }
.flow__desc  { color: var(--ink-3); font-size: var(--fs-sm); max-inline-size: 30ch; }

/* العقدة المركزية — المنصة.
   الهالة والقرص في خليّة شبكة واحدة بدل التموضع المطلق: كانت الهالة مثبّتة
   على أعلى العقدة (inset-block-start: 0) فتنزاح عن القرص كلما تغيّر ارتفاع
   الصفّ أو طول التسمية. في خليّة واحدة يتمركزان معاً دائماً. */
.flow__core {
  display: grid;
  grid-template-areas: 'disc' 'label';
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: var(--s-3);
  padding-inline: var(--s-2);
}

.flow__logo {
  grid-area: disc;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-md);
}

.flow__pulse {
  grid-area: disc;
  inline-size: 102px;
  block-size: 102px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.16;
}

/* سلكان منقّطان يصلان البطاقتين بالعقدة: القسم يتحدّث عن «قناتين» ولم يكن
   يرسمهما. مربوطان بالقرص نفسه لا بالعقدة، فيبقيان على منتصفه تماماً،
   وعرضهما فجوة الشبكة نفسها فلا يزحفان تحت البطاقتين. */
.flow__logo::before,
.flow__logo::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);      /* رأسي فقط — لا ينقلب في RTL */
  inline-size: calc(var(--flow-gap) + var(--s-2));
  block-size: 2px;
  background-image: linear-gradient(to right, var(--gold-soft) 50%, transparent 50%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  opacity: 0.75;
}
.flow__logo::before { inset-inline-end: 100%; }
.flow__logo::after  { inset-inline-start: 100%; }

.flow__node-label { grid-area: label; }

.flow__node-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-deep);
  text-align: center;
}

/* ذيل القسم: الشارة وزر إنشاء الحساب في صفّ واحد.
   المسافة العلوية تخصّ الصفّ لا الشارة، وإلا انزاح الزر عنها عند الالتفاف. */
.flow__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* المخطّط فوقه متمركز، فذيله يتمركز معه — كان محاذياً لبداية السطر
     فبدا معلّقاً في جهة بلا سبب */
  justify-content: center;
  gap: var(--s-4) var(--s-5);
  margin-block-start: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}

.flow__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.flow__chip svg { inline-size: 18px; block-size: 18px; flex: none; }

/* ==========================================================================
   القسم 7 — لمن فواتيري؟
   ========================================================================== */
.whom__head { max-inline-size: 68ch; }

/* تباعد أسطر أوسع من --lh-tight الافتراضي للعناوين.
   السبب ليس جمالياً فقط: الكلمة المتبدّلة تُقصّ بـoverflow: hidden لتنزلق داخل
   نافذتها، ونافذة القصّ ارتفاعها هو سطر النص نفسه. وبـ1.22 لا يبقى أي فراغ فوق
   الحروف، فتُقصّ الضمّة والشدّة في «مُصمّم» و«مُسوِّق» وأخواتها. */
.whom__title {
  line-height: var(--lh-snug);
  margin-block-end: var(--s-4);
}

/* الكلمة المتبدّلة */
.rotator {
  position: relative;
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  color: var(--gold-deep);
}
.rotator__word {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.rotator__word.is-out { transform: translateY(-100%); opacity: 0; }
.rotator__word.is-in  { transform: translateY(100%);  opacity: 0; }

/* شريطا المهن */
.marquee {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-4);
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  /* الصفّان أوسع من الشاشة بحكم تصميمهما — القصّ هنا يمنع أي تمرير أفقي */
  overflow: hidden;
  /* تلاشٍ عند الطرفين بدل قصّ حادّ */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__row {
  display: flex;
  gap: var(--s-3);
  inline-size: max-content;
  will-change: transform;
}

.chip {
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   القسم 7ب — متجر الخدمات (بطاقات حيّة من المنصة)
   ========================================================================== */
.svcs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.svc {
  display: grid;
  /* الغلاف والتذييل بارتفاع ثابت، والعنوان والوصف يتمدّدان — فتقف أقدام
     البطاقات على خط واحد مهما اختلف طول الأسماء */
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-3);
  block-size: 100%;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.svc:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

/* الصندوق يحمل وجه مقدّم الخدمة لا صورة الخدمة — الوجه أدلّ على مَن ستتعامل
   معه، وصور المتجر تصل بأحجامها الأصلية فتُثقل الصفحة */
.svc__cover {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, var(--gold-wash), var(--gold-mist));
}

.svc__avatar {
  inline-size: clamp(72px, 6vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  /* الحلقة بالظل لا بالإطار: لا تقضم من قطر الصورة */
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--surface), 0 8px 20px -8px rgb(20 18 15 / 0.35);
  transition: transform var(--t-base) var(--ease-spring);
}
.svc__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.svc:hover .svc__avatar { transform: scale(1.06); }

.svc__price {
  position: absolute;
  inset-block-end: var(--s-2);
  inset-inline-start: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ivory);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.svc__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  /* عناوين المتجر تصل أحياناً إلى سطرين وأكثر — نقصّها عند سطرين */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc:hover .svc__title { color: var(--gold-deep); }

.svc__desc {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.svc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block-start: var(--s-3);
  box-shadow: inset 0 1px 0 var(--gold-mist);
}

.svc__owner-name {
  min-inline-size: 0;   /* حتى يعمل قصّ الاسم الطويل داخل flex */
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svc__days {
  flex: none;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ==========================================================================
   القسم 8 — المزايا
   ========================================================================== */
.feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 1rem + 3.5vw, 3.5rem);
}

.feat__art {
  block-size: 150px;
  display: grid;
  place-items: center;
  margin-block-end: var(--s-5);
}
.feat__art svg { block-size: 100%; inline-size: auto; }

.feat__title { margin-block-end: var(--s-2); }
.feat__desc  { color: var(--ink-3); font-size: var(--fs-sm); }

/* خريطة فلسطين — تُرسَم بالخط ثم تُملأ */
.feat__map {
  fill: var(--gold);
  fill-opacity: 0;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: fill-opacity 1s var(--ease) 0.85s;
}
.feat__card.is-revealed .feat__map { fill-opacity: 0.12; }

/* المستندات + الختم */
.feat__doc      { fill: var(--surface); stroke: var(--gold-mist); stroke-width: 2; transition: transform var(--t-slow) var(--ease-out); transform-origin: 50% 100%; }
.feat__doc--2   { transition-delay: .1s; }
.feat__doc--3   { transition-delay: .2s; }
.feat__doc-line { stroke: var(--gold-soft); stroke-width: 3; stroke-linecap: round; }
.feat__seal circle { fill: var(--gold); }
.feat__seal path   { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.feat__seal { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.8) rotate(-16deg); }

/* الرسم البياني */
.feat__axis  { stroke: var(--gold-mist); stroke-width: 2.5; stroke-linecap: round; }
.feat__bar   { fill: var(--gold-wash); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.feat__trend { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ==========================================================================
   القسم 9 — الأمان (الانقلاب الداكن)
   ========================================================================== */
.security { color: var(--dark-ink-2); }
.security::before { background: var(--dark-bg); }

.security h2,
.security h3 { color: var(--dark-ink); }

.security .section__lead { color: var(--dark-ink-2); }

.security .eyebrow { color: var(--dark-gold); }
.security .eyebrow::before { background: var(--dark-gold); }

/* شبكة الدروع — تستجيب بلطف لموضع المؤشر */
.security__lattice {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at var(--mx, 50%) var(--my, 40%),
      rgba(207, 169, 107, 0.16) 0%, transparent 46%),
    repeating-linear-gradient(60deg,  rgba(207, 169, 107, 0.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-60deg, rgba(207, 169, 107, 0.07) 0 1px, transparent 1px 34px);
  transition: background-position var(--t-slow) var(--ease);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 1rem + 3.5vw, 3.5rem);
}

.pillar__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--r-lg);
  background: rgba(207, 169, 107, 0.12);
  color: var(--dark-gold);
  margin-block-end: var(--s-4);
}
.pillar__icon svg { inline-size: 25px; block-size: 25px; }

.pillar__title { margin-block-end: var(--s-2); }
.pillar__desc  { color: var(--dark-ink-2); font-size: var(--fs-sm); }

/* ==========================================================================
   القسم 10 — الأرقام والشهادات
   ========================================================================== */
.odo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  margin-block-end: clamp(3rem, 2rem + 4.5vw, 6rem);
}

/* شرطة ذهبية فوق كل رقم بدل الإطار */
.odo__item::before {
  content: '';
  display: block;
  inline-size: 28px;
  block-size: 2px;
  background: var(--gold);
  margin-block-end: var(--s-4);
}

.odo__num {
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow: hidden;   /* حتى يبدو الرقم كأنه يدور داخل نافذته */
}

.odo__label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.5;
  margin-block-start: var(--s-3);
  max-inline-size: 22ch;
}

/* شريط الأرقام الحيّة تحت شريط الثقة مباشرة — حشوته أضيق من القسم الكامل
   حتى لا يفصل الهيرو عن «من نحن» بفراغ واسع */
.numbers { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* شارات شروط الخدمة تحت العدّادات — أرقام ثابتة لا تنمو، فلا تأخذ حجم
   العدّاد الحيّ ولا حركته */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-block-start: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.facts__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.facts__item .num { font-weight: 800; color: var(--gold-deep); font-size: var(--fs-sm); }

/* ---------- آراء المشتركين المصوّرة ---------- */
/* مشتركون حقيقيون بوجوههم وأسمائهم، كل بطاقة رابط إلى فيديو تجربته على
   قناة فواتيري. لا اقتباسات مكتوبة: النص الذي نكتبه نحن لا يُثبت شيئاً،
   والوجه الموصول بفيديو قابل للتحقّق يُثبت. */
.stories__lead {
  max-inline-size: 60ch;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.stories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.story {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}

.story__photo {
  position: relative;
  display: block;
  inline-size: clamp(84px, 7vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* الحلقة الذهبية تُرسم بالظل لا بالإطار: الإطار يقضم من قطر الصورة
     ويكسر محاذاة الصفّ حين تختلف سماكته */
  box-shadow: 0 0 0 2px var(--gold-mist), 0 6px 18px -8px rgb(0 0 0 / 0.28);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-spring);
}

.story__photo img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* شارة التشغيل تُعلن أن خلف الوجه فيديو، لا صورة زينة */
.story__play {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 3px var(--surface);
  transition: transform var(--t-base) var(--ease-spring), background-color var(--t-base) var(--ease);
}
.story__play svg { inline-size: 18px; block-size: 18px; }
/* السهم في RTL يشير يساراً بالانعكاس، والفيديو لا يُعكس اتجاهه */
[dir='rtl'] .story__play svg { transform: scaleX(-1); }

.story:hover .story__photo,
.story:focus-visible .story__photo {
  box-shadow: 0 0 0 2px var(--gold), 0 10px 24px -8px rgb(0 0 0 / 0.34);
  transform: translateY(-3px);
}
.story:hover .story__play { transform: scale(1.12); background: var(--gold-deep); }

.story__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.story__watch {
  font-size: var(--fs-xs);
  color: var(--gold-deep);
  line-height: 1.35;
}

/* ==========================================================================
   القسم 11 — الدعم
   ========================================================================== */
.support__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}

.support__copy .section__lead { max-inline-size: 52ch; }

.channels {
  display: grid;
  gap: var(--s-2);
  margin-block-start: var(--s-6);
}

.channel {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  transition: background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.channel:hover {
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}

/* زر الدردشة يستعير مظهر بقية القنوات ليبقى الصفّ واحداً بصرياً */
button.channel {
  inline-size: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
}

.channel__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-md);
  background: var(--gold-wash);
  color: var(--gold-deep);
}
.channel__icon svg { inline-size: 23px; block-size: 23px; }

.channel__title { display: block; font-weight: 700; color: var(--ink); font-size: var(--fs-sm); line-height: 1.4; }
.channel__desc  { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }

/* ---------- فقاعة المحادثة الحيّة ---------- */
.chat {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  inline-size: min(100%, 380px);
  margin-inline: auto;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}

.chat__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
  margin-block-end: var(--s-2);
}

.chat__bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  max-inline-size: 80%;
}

.chat__bubble--them {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--gold-wash);
  border-start-start-radius: 6px;
}
.chat__bubble--them img { block-size: 17px; inline-size: auto; opacity: 0.85; }

/* رسالة الزائر: على الجهة المقابلة كما في أي محادثة */
.chat__bubble--me {
  justify-self: end;
  background: var(--ink);
  color: var(--dark-ink);
  font-size: var(--fs-sm);
  border-end-end-radius: 6px;
}

.chat__typing { font-size: var(--fs-xs); font-weight: 700; color: var(--gold-deep); }

.chat__dots { display: inline-flex; gap: 4px; }
.chat__dots i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.55;
}

/* ==========================================================================
   القسم 12 — المدوّنة
   ========================================================================== */
.blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  max-width: none;
}
.blog__head > div { max-inline-size: 54ch; }
.blog__all { flex: none; padding-block: var(--s-2); }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

.post { display: grid; gap: var(--s-3); }

.post__cover {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 2;
}
.post__cover svg {
  inline-size: 100%;
  block-size: 100%;
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-out);
}
/* الغلاف يتقلّص من 1.08 إلى 1 عند ظهور البطاقة */
.posts > li.is-revealed .post__cover svg { transform: none; }
.post:hover .post__cover svg { transform: scale(1.05); }

.post__cover--1 { background: linear-gradient(140deg, var(--gold-wash), var(--gold-mist)); }
.post__cover--2 { background: linear-gradient(140deg, var(--ivory-2), var(--gold-wash)); }
.post__cover--3 { background: linear-gradient(140deg, var(--gold-mist), var(--ivory-2)); }

.pc-line  { stroke: var(--gold-soft); stroke-width: 3; stroke-linecap: round; }
.pc-bar   { fill: var(--gold-soft); }
.pc-bar--hi { fill: var(--gold); }
.pc-mark  { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.pc-sheet { fill: var(--surface); }
.pc-dot   { fill: var(--gold); }
.pc-check { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pc-ring  { fill: none; stroke: var(--gold-soft); stroke-width: 3; }
.pc-hand  { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }

.post__cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--gold-deep);
}

.post__title {
  font-size: clamp(1.02rem, 0.97rem + 0.28vw, 1.2rem);
  transition: color var(--t-base) var(--ease);
}
.post:hover .post__title { color: var(--gold-deep); }

.post__meta { font-size: var(--fs-xs); color: var(--ink-4); }

/* ==========================================================================
   القسم 13 — تنزيل التطبيق
   ========================================================================== */
.app__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}

.app__copy .section__lead { max-inline-size: 46ch; }

/* ---------- رمز QR: مربّع مسطّح بلا إطار، على وسادة عاجية ----------
   حلّ وحده محلّ شارتَي App Store وGoogle Play وسطر التقييمات. */
.app__qr {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
}

/* الصورة تحمل منطقتها الهادئة وخلفيتها البيضاء داخلها، فلا padding هنا:
   أي حشو إضافي يصغّر الوحدات دون فائدة للماسح.
   الحجم 148px بعد إزالة الشارتين: صار الرمز وسيلة التنزيل الأساسية على
   سطح المكتب لا حاشية بجانبها، والأصل 1230px فلا تكبير فوق دقّته. */
.qr {
  inline-size: 148px;
  block-size: 148px;
  flex: none;
  border-radius: var(--r-sm);
  background: #fff;             /* خلف شفافية الـPNG مهما كان لون القسم */
  box-shadow: var(--sh-sm);
}

.app__qr-hint {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  max-inline-size: 20ch;
}

/* على الشاشات الصغيرة الكاميرا هي الهاتف نفسه — فلا معنى للرمز */
@media (max-width: 767px) {
  .app__qr { display: none; }
}

/* ---------- معاينة الهاتف: مبنية بالكامل بـ CSS ---------- */
.app__stage {
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.phone {
  position: relative;
  inline-size: min(100%, 285px);
  aspect-ratio: 9 / 18.4;
  padding: 10px;
  border-radius: 42px;
  background: var(--ink);
  box-shadow: var(--sh-lg);
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform var(--t-slow) var(--ease);
}

.phone__notch {
  position: absolute;
  inset-block-start: 17px;
  inset-inline: 0;
  margin-inline: auto;   /* توسيط منطقي يصحّ في الاتجاهين */
  inline-size: 76px;
  block-size: 5px;
  border-radius: var(--r-pill);
  /* الشاشة تملأ حدود الجهاز، فالنتوء يقع فوقها: لونه حبري خفيف لا أبيض */
  background: rgba(20, 18, 15, 0.14);
}

.phone__screen {
  block-size: 100%;
  border-radius: 33px;
  background: linear-gradient(180deg, var(--ivory-2), var(--surface) 38%);
  padding: clamp(0.9rem, 0.7rem + 0.9vw, 1.25rem);
  padding-block-start: 2.35rem;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  overflow: hidden;
}

.phone__bar { display: flex; align-items: center; justify-content: space-between; }
.phone__bar img { block-size: 17px; inline-size: auto; }

.phone__avatar {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--gold-wash);
}

.phone__label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-block-start: var(--s-5);
}

.phone__amount {
  font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.05rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}

.phone__cta {
  display: grid;
  place-items: center;
  min-block-size: 42px;
  margin-block: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.phone__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--ivory-2);
  font-size: var(--fs-xs);
}
.phone__row-icon {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--gold-wash);
}
.phone__row-text { flex: 1; color: var(--ink-3); line-height: 1.3; }
.phone__row-amt  { color: var(--live); font-weight: 700; }

/* الصفوف الأخيرة تبهت تدريجياً كأن القائمة تمتدّ خارج الشاشة */
.phone__row--soft:nth-last-child(2) { opacity: 0.65; }
.phone__row--soft:nth-last-child(1) { opacity: 0.35; }

.phone__row-bars { display: grid; gap: 6px; flex: 1; }
.phone__row-bars i { display: block; block-size: 6px; border-radius: var(--r-pill); background: var(--gold-mist); }
.phone__row-bars i:first-child { inline-size: 78%; }
.phone__row-bars i:last-child  { inline-size: 46%; }

/* ==========================================================================
   القسم 14 — الأسئلة الشائعة
   ========================================================================== */
.faq__item {
  position: relative;
  box-shadow: inset 0 -1px 0 var(--gold-mist);
}
.faq__list > .faq__item:first-child { box-shadow: inset 0 1px 0 var(--gold-mist), inset 0 -1px 0 var(--gold-mist); }

/* الخيط يتفرّع نحو السؤال المفتوح */
.faq__item::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: calc(var(--s-3) * -1);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease);
}
.faq__item.is-open::before { transform: scaleY(1); }

.faq__q { font-size: inherit; }

.faq__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  text-align: start;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
  transition: color var(--t-base) var(--ease);
}
.faq__btn:hover { color: var(--gold-deep); }
.faq__item.is-open .faq__btn { color: var(--gold-deep); }

/* علامة + تتحول إلى − */
/* الشبكة تتولّى التوسيط، فلا حاجة إلى إزاحة بالـtransform تنقلب في RTL */
.faq__sign {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  grid-area: 1 / 1;
  inline-size: 15px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0deg); opacity: 0; }

/* الفتح بانتقال ارتفاع سلس: 0fr → 1fr.
   visibility تُخرج الجواب المطويّ من ترتيب التركيز ومن قارئ الشاشة. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--t-base) var(--ease),
    visibility var(--t-base) step-end;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-timing-function: var(--ease-out), step-start;
}

.faq__a-inner { overflow: hidden; }

.faq__a p {
  padding-block-end: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-inline-size: 64ch;
}

/* الرابط إلى صفحة الأسئلة الكاملة (faq.html) */
.faq__more { margin-block-start: var(--s-6); }

/* ==========================================================================
   القسم 15 — الانطلاق
   ========================================================================== */
.start__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

/* النقطة التي يتجمّع فيها الخيط ثم تتفتّح خلف الزر */
.start__bloom {
  position: absolute;
  inset-block-start: -14%;
  /* التوسيط بـ inset-inline: 0 + margin auto لا بـ translate:
     الإزاحة بالـtransform فيزيائية لا منطقية، فتنقلب خطأً في RTL
     وتدفع العنصر خارج الحاوية فيظهر تمرير أفقي. */
  inset-inline: 0;
  margin-inline: auto;
  /* محسوبة من عرض الحاوية لا من عرض الشاشة: أي وحدة vw هنا تتجاوز
     الحاوية فتوسّع المستند أيضاً. */
  inline-size: min(100%, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(162, 128, 73, 0.20) 0%, rgba(162, 128, 73, 0.06) 40%, transparent 66%);
  z-index: -1;
  pointer-events: none;
}

.start .section__lead { max-inline-size: 52ch; }
.start__cta { margin-block-start: var(--s-6); }

/* مؤشر التقدّم الأفقي للخطوات الثلاث */
.steps {
  position: relative;
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-block-start: clamp(2.75rem, 1.8rem + 3vw, 4.25rem);
}

.steps::before,
.steps::after {
  content: '';
  position: absolute;
  inset-block-start: 7px;
  inset-inline: 16.66%;
  block-size: 2px;
  border-radius: 2px;
}
.steps::before { background: var(--gold-mist); }
.steps::after  {
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease) 0.25s;
}
[dir='rtl'] .steps::after { transform-origin: right center; }
.steps.is-revealed::after { transform: scaleX(1); }

.steps__item {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
}

.steps__dot {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 0 0 3px var(--gold-mist);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-spring);
}
.steps.is-revealed .steps__item:nth-child(1) .steps__dot { transition-delay: 0.35s; }
.steps.is-revealed .steps__item:nth-child(2) .steps__dot { transition-delay: 0.95s; }
.steps.is-revealed .steps__item:nth-child(3) .steps__dot { transition-delay: 1.5s; }
.steps.is-revealed .steps__dot { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.12); }

.steps__title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }

/* ==========================================================================
   القسم 16 — التذييل
   ========================================================================== */
.footer {
  position: relative;
  padding-block: clamp(3rem, 2rem + 3.2vw, 4.75rem) var(--s-6);
  background: var(--ivory-2);
  box-shadow: inset 0 1px 0 var(--gold-mist);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.footer__brand img { block-size: 36px; inline-size: auto; margin-block-end: var(--s-4); }
.footer__about { font-size: var(--fs-sm); color: var(--ink-3); max-inline-size: 42ch; }

.footer__col-title {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink);
  margin-block-end: var(--s-4);
}

.footer__col ul { display: grid; gap: var(--s-3); }
.footer__col a {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}
.footer__col a:hover { color: var(--gold-deep); }

/* ستّ أيقونات في صفّين متساويين بدل التفافها 4+2 */
/* أربعة أعمدة توزّع الأيقونات السبع 4+3؛ ثلاثة أعمدة كانت تترك
   السابعة وحدها في صف ثالث */
.social {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: var(--s-3);
}

.social__link {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  box-shadow: var(--sh-xs);
  transition: color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease-spring);
}
.social__link svg { inline-size: 19px; block-size: 19px; }
.social__link:hover { color: #fff; background: var(--gold); transform: translateY(-3px); }

.footer__bottom {
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block-start: var(--s-5);
  box-shadow: inset 0 1px 0 var(--gold-mist);
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}
.footer__bottom p { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

/* شريط وسائل الدفع والشركاء */
/* العرض الكامل ضروري: ‎.footer__bottom‎ يوسّط عناصره، فلولاه انكمش الشريط
   إلى عرض عنوانه وصار ‎min(100%,640px)‎ يقيس على حاوية غير محدَّدة */
.footer__pay { display: grid; justify-items: center; gap: var(--s-3); inline-size: 100%; }
.footer__pay-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
/* الشريط رفيع جداً (نسبة ‎13.5:1‎)، فنحدّ عرضه ونترك الارتفاع تلقائياً */
.footer__pay-strip {
  inline-size: min(100%, 640px);
  block-size: auto;
  opacity: 0.95;
}

/* ==========================================================================
   الاستجابة
   ========================================================================== */
@media (max-width: 1000px) {
  .pain,
  .feat,
  .about__grid,
  .svcs,
  .pillars { grid-template-columns: 1fr 1fr; }
  .pain__card:last-child,
  .feat__card:last-child,
  .about__item:last-child,
  .pillars .pillar:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* لوحة «كيف تعمل» الملازمة تختفي، وتتحوّل الخطوات إلى خط زمني عمودي */
  .how__grid { grid-template-columns: 1fr; }
  .how__media { display: none; }
  .how__steps { gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .how__step .how__num { color: var(--gold); -webkit-text-stroke-color: var(--gold); }
  .how__step .how__step-title { color: var(--ink); }

  /* القنوات تصبح عموداً: استقبال ← المنصة ← سحب */
  .flow { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .flow__side { max-inline-size: 40ch; inline-size: 100%; }
  .flow__icon { margin-inline: auto; }
  /* السلكان أفقيان بطبعهما، ولا معنى لهما حين تنزل البطاقات تحت بعضها */
  .flow__logo::before,
  .flow__logo::after { display: none; }

  /* الهيرو يصبح عموداً واحداً */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  }
  .hero__arcs {
    inline-size: min(105vw, 620px);
    inset-block-start: 1%;
    inset-inline-end: -22%;
    opacity: 0.32;   /* أخفت على الموبايل حتى لا تزاحم العنوان */
  }
  .hero__lead { max-inline-size: 60ch; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }

  /* الدعم والتطبيق يصبحان عموداً واحداً */
  .support__grid,
  .app__grid { grid-template-columns: 1fr; }
  .app__stage { order: -1; }   /* الهاتف أولاً: هو بطل القسم على الموبايل */

  .blog__head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* الشهادات: أربعة وجوه في الصفّ تضيق كثيراً دون هذا العرض */
@media (max-width: 760px) {
  .stories { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .hero { padding-block-start: clamp(6rem, 4.5rem + 8vw, 8rem); }
  .invoice { inline-size: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .trust__grid { gap: var(--s-5) var(--s-4); }
  .trust__item { gap: var(--s-3); }

  .odo { grid-template-columns: repeat(2, 1fr); }

  /* بطاقتا خدمة جنباً إلى جنب تخنقان العنوان والوصف على الشاشة الضيقة */
  .svcs { grid-template-columns: 1fr; }

  /* الخطوات الثلاث تنزل تحت بعضها، فيختفي شريط التقدّم الأفقي */
  .steps { grid-template-columns: 1fr; gap: var(--s-5); justify-items: start; text-align: start; }
  .steps::before, .steps::after { display: none; }
  .steps__item { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-3); justify-items: start; }

  .footer__grid { grid-template-columns: 1fr; }
}

/* شريط الفعل اللاصق يظهر تحت 768px ويغطي أسفل التذييل — نترك له مساحة */
@media (max-width: 767px) {
  .footer { padding-block-end: 6rem; }
}

@media (max-width: 900px) and (min-width: 561px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}