/* ==========================================================================
   صفحة الهبوط — templates/ui/pages/landing.html · السكربت: ui/js/pages/landing.js
   (المشاهد: components/scroll_scenes.css + step_scenes.css)
   خلفية داكنة بتوهّج برتقالي (هوية) وأزرق + حبيبات خفيفة · كروت زجاجية عليها نجمة الشعار

   الترتيب بنفس ترتيب الصفحة:
     1. الأساس          2. الخلفية         3. الشريط          4. الأزرار ورأس القسم
     5. Hero            6. الكروت          7. المجموعة        8. التطبيق
     9. الفروع والخريطة 10. تواصل معنا    11. الفوتر
     12. تقليل الحركة   13. الجوال (لازم آخر شي — يغطي على اللي قبله)
   ========================================================================== */

/* ---------- 1. الأساس ---------- */
.lp-body {
  --lp-bg: #0c0e12;
  --lp-text: #f4f6fa;
  --lp-muted: #a9b1bd;
  --lp-card-w: min(29vw, 420px);
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--font-ar);
}
.lp { position: relative; isolation: isolate; }

/* ---------- 2. الخلفية ----------
   الخلفيات الثلاث — ألوانها مأخوذة من صور التصميم، وتتبدّل حسب خطوة الـ Hero:
   0 = داكن + توهّج دافئ في الزاوية · 1 = داكن + توهّج أزرق جانبي · 2 = بني دافئ + رمادي + أزرق */
.lp-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
/* كل توهّج طبقة لحالها (::before دافئ · ::after أزرق) أكبر من الشاشة — قصة الخلفية مع الخطوات:
   قبل الخطوات: البرتقالي لحاله يسبح · خطوة 1: يدخل الأزرق بنفس الحركة · خطوة 2: الاثنين يتحركون، ويكملون طول السكرول.
   حركتين فوق بعض:
     - سباحة مستمرة (animation على transform) — كل لون بإيقاع مختلف (22s / 27s) عشان ما يتحركون مع بعض
     - انزياح مع السكرول (خاصية translate منفصلة) — البرتقالي يطلع والأزرق ينزل كل ما نزلت (--lp-scroll من landing.js)
   transform/translate بس = على كرت الشاشة بدون إعادة رسم التدرّج */
.lp-bg::before, .lp-bg::after { content: ""; position: absolute; inset: -20%; will-change: transform, translate; }
.lp-bg::before { animation: lp-bg-drift-warm 22s ease-in-out infinite alternate; translate: 0 calc(var(--lp-scroll, 0) * -14vh); }
.lp-bg::after  { animation: lp-bg-drift-blue 27s ease-in-out infinite alternate; translate: 0 calc(var(--lp-scroll, 0) * 12vh); }
@keyframes lp-bg-drift-warm {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(-9%, 6%) scale(1.14); }
  70%  { transform: translate(5%, 10%) scale(.94); }
  100% { transform: translate(-4%, -7%) scale(1.08); }
}
@keyframes lp-bg-drift-blue {
  0%   { transform: translate(0, 0) scale(1.05); }
  30%  { transform: translate(8%, -7%) scale(.95); }
  65%  { transform: translate(-6%, 8%) scale(1.15); }
  100% { transform: translate(5%, 4%) scale(1); }
}

.lp-bg--0 { opacity: 1; background: linear-gradient(135deg, #090a07 0%, #14130f 55%, #2a2219 100%); }
.lp-bg--0::before { background: radial-gradient(70vw 75vh at 90% 86%, rgb(122 84 40 / .95), rgb(82 60 33 / .55) 38%, transparent 72%); }
.lp-bg--1 { background: linear-gradient(120deg, #0d0b0b 0%, #16171b 50%, #1c2633 100%); }
.lp-bg--1::after { background: radial-gradient(56vw 90vh at 96% 54%, rgb(37 63 92 / .95), rgb(30 53 77 / .6) 40%, transparent 75%); }
.lp-bg--2 { background: linear-gradient(90deg, #4a3a29 0%, #3a3c3e 50%, #253b53 100%); }
.lp-bg--2::before { background: radial-gradient(52vw 72vh at 8% 20%, rgb(109 71 30 / .95), rgb(79 62 45 / .55) 40%, transparent 75%); }
.lp-bg--2::after  { background: radial-gradient(52vw 86vh at 96% 50%, rgb(37 64 91 / .95), rgb(37 59 83 / .55) 40%, transparent 75%); }
.lp:has(.lp-hero[data-step="1"]) .lp-bg--1,
.lp:has(.lp-hero[data-step="2"]) .lp-bg--2 { opacity: 1; }
.lp:has(.lp-hero[data-step="1"]) .lp-bg--0,
.lp:has(.lp-hero[data-step="2"]) .lp-bg--0 { opacity: 0; }

/* حبيبات (grain) خفيفة فوق الخلفية */
.lp::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
}

/* ---------- 3. الشريط (partials/landing/nav.html) — ثابت فوق، ويظهر مع خطوة 1 في الهبوط ---------- */
.lp-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) clamp(1rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, rgb(12 14 18 / .55), rgb(12 14 18 / 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lp-nav[data-step-in] { transform: translateY(-8px); }
.lp-nav[data-step-in].is-in { transform: none; }
.lp-nav__brand { justify-self: start; display: inline-flex; }
.lp-nav__links { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.lp-nav__links a { color: rgb(255 255 255 / .82); font-size: var(--text-sm); text-decoration: none; transition: color .2s; }
.lp-nav__links a:hover { color: #fff; }
.lp-nav__links a.is-active { color: #fff; font-weight: var(--weight-semibold); box-shadow: inset 0 -2px 0 var(--color-secondary, #F9A038); padding-block-end: 4px; }
.lp-nav > .lp-btn { justify-self: end; }

/* ---------- 4. الأزرار (زر التطبيق: partials/landing/store_button.html) ورأس القسم ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: .7rem 1.4rem;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn--light { background: #fff; color: #11151b; box-shadow: 0 8px 24px -10px rgb(255 255 255 / .45); }
.lp-btn--light:hover { color: #11151b; box-shadow: 0 10px 28px -8px rgb(249 160 56 / .55); }
.lp-btn--sm { padding: .5rem 1.1rem; }
.lp-btn__icon { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; margin-inline-end: -.6rem; border-radius: 50%; background: #11151b; color: #fff; }
[dir="ltr"] .lp-btn__icon svg { transform: scaleX(-1); }

/* رأس القسم (partials/landing/section_head.html) — عنوان صغير برتقالي + عنوان كبير + وصف · الفروع وتواصل معنا */
.lp-head { max-inline-size: 44rem; margin-inline: auto; text-align: center; }
.lp-head__eyebrow { margin: 0; color: var(--color-secondary, #f9a038); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; }
.lp-head__title { margin: var(--space-3) 0; color: var(--lp-text); font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.2; }
.lp-head__sub { margin: 0; color: var(--lp-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.8; }

/* ---------- 5. Section 01 · Hero (خطوات تمشي لحالها — data-autoplay) ---------- */
.lp-hero { display: flex; flex-direction: column; align-items: center; }
.lp-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-inline-size: 46rem;
  margin-block-start: clamp(6.5rem, 17vh, 10rem);
  padding-inline: var(--space-4);
  text-align: center;
}
.lp-hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffffff 15%, #9ca6b3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-hero__text { margin: 0; max-inline-size: 36rem; color: var(--lp-muted); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.9; }
/* مزايا تحت الزر — على الجوال بس (بالكمبيوتر الكروت تبدأ قريب من الزر) */
.lp-hero__perks { display: none; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.lp-hero__perks li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius-full); background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .82); font-size: var(--text-xs); }
.lp-hero__perks .ui-icon { color: var(--color-secondary, #f9a038); }

/* ---------- 6. الكروت — طبقة لاصقة فوق الـ Hero والمجموعة (الحركة مع السكرول في landing.js) ---------- */
.lp-cards {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  block-size: 100vh;
  block-size: 100svh;
  overflow: clip;
  pointer-events: none;
}
/* الـ Hero يطلع تحت الطبقة (بدل margin سالب على الطبقة نفسها — كان يمنعها تفك لصقتها آخر القسم الثاني) */
.lp-flow > .lp-hero { margin-block-start: -100vh; margin-block-start: -100svh; }
/* كل كرت داخل slot: الـ Hero يحرّك الكرت، والسكرول يحرّك الـ slot */
.lp-slot { position: absolute; inset: 0; will-change: transform, opacity; }
.lp-slot--main { z-index: 3; }
.lp-card {
  position: absolute;
  inset-block-start: 57vh;
  inset-block-start: 57svh;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--lp-card-w) / -2);
  inline-size: var(--lp-card-w);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: clamp(1.6rem, 2.6vw, 2.6rem);
  border: 1px solid rgb(255 255 255 / .28);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .45);
  overflow: hidden;
  transform-origin: 50% 100%;
}
/* لمعة زجاجية فوق التدرّج */
.lp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgb(255 255 255 / .38) 0%, rgb(255 255 255 / 0) 42%); }
/* التوهّج: طبقة أكبر من الكرت فيها البقعتين (#D6E3F1 فوق · #FEF0E0 تحت)، تدور وتتحرك ببطء — "الظل يتحرك"
   ألوانه الافتراضية لكرت الهوية، والجانبيين يبدّلونها (--glow-*) */
.lp-card__glow {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(38% 34% at 30% 28%, var(--glow-a, rgb(184 208 236 / .95)), var(--glow-a2, rgb(214 227 241 / .7)) 45%, transparent 75%),
    radial-gradient(36% 32% at 72% 74%, var(--glow-b, rgb(253 222 186 / .95)), var(--glow-b2, rgb(254 240 224 / .75)) 45%, transparent 75%);
  filter: blur(18px);
  animation: lp-glow-move 14s ease-in-out infinite;
}
@keyframes lp-glow-move {
  0%   { transform: rotate(0deg) translate(0, 0) scale(1); }
  25%  { transform: rotate(40deg) translate(3%, -2%) scale(1.06); }
  50%  { transform: rotate(95deg) translate(-2%, 3%) scale(.97); }
  75%  { transform: rotate(150deg) translate(-3%, -2%) scale(1.05); }
  100% { transform: rotate(180deg) translate(0, 0) scale(1); }
}

/* الكرت الرئيسي = كرت الهوية (من التصميم): أبيض + توهّج أزرق فاتح وخوخي يتحرك + الشعار */
.lp-card--main { z-index: 3; }
.lp-card--brand { background: #fbfcfe; border-color: rgb(255 255 255 / .7); }
.lp-card--brand::after { background: linear-gradient(155deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 40%); }
/* الشعار في نص الجزء الظاهر (الكرت مقصوص من تحت) */
.lp-card__logo { position: relative; z-index: 1; inline-size: 34%; block-size: auto; margin-block-end: 44%; translate: 0 calc(var(--lp-card-w) * .22 * var(--enter, 0)); filter: drop-shadow(0 10px 18px rgb(42 108 181 / .18)); }
/* النجمة تلمع لمعة خفيفة كل 4.5 ثانية */
.lp-card__logo .ui-logo-mark__star { animation: lp-star-glint 4.5s ease-in-out 1.2s infinite; }
@keyframes lp-star-glint {
  0%, 78%, 100% { transform: none; }
  86% { transform: scale(1.25) rotate(45deg); }
  92% { transform: scale(.92) rotate(90deg); }
}

/* الجانبيين = شركات أبياتي: نفس أسلوب كرت الهوية (فاتح + توهّج يتحرك) بألوان كل شعار
   الخلفية فاتحة لازم — الفيل أسود وإطار مينا باك رمادي غامق.
   --dir = جهة الانفراد (-1 يمين · 1 يسار) · الشعار يميل للطرف الخارجي عشان ما يغطيه الكرت الرئيسي اللي فوقه */
.lp-card--side { z-index: 1; will-change: transform, opacity; backface-visibility: hidden; }
.lp-card--menapack, .lp-card--afyal { border-color: rgb(255 255 255 / .7); }
.lp-card--menapack::after, .lp-card--afyal::after { background: linear-gradient(155deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 40%); }
.lp-card__brand { position: relative; z-index: 1; block-size: auto; margin-block-end: 50%; translate: calc(var(--dir) * var(--lp-card-w) * .1 * (1 - var(--enter, 0))) calc(var(--lp-card-w) * .25 * var(--enter, 0)); }
/* مينا باك: تركوازي #0FA39A + رمادي #333 · الشعار عرضي فياخذ عرض أكبر */
.lp-card--menapack {
  --dir: -1;
  background: #f6fbfa;
  --glow-a: rgb(150 222 214 / .95); --glow-a2: rgb(208 240 236 / .7);
  --glow-b: rgb(196 206 210 / .8);  --glow-b2: rgb(230 236 238 / .7);
}
.lp-card--menapack .lp-card__brand { inline-size: 62%; filter: drop-shadow(0 10px 18px rgb(15 163 154 / .2)); }
/* أفيال: بنفسجي #9B3790 + ذهبي #D1AA6A على عاجي دافئ */
.lp-card--afyal {
  --dir: 1;
  background: #fdfaf4;
  --glow-a: rgb(226 190 228 / .95); --glow-a2: rgb(242 222 244 / .7);
  --glow-b: rgb(240 214 166 / .95); --glow-b2: rgb(250 236 210 / .75);
}
.lp-card--afyal .lp-card__brand { inline-size: 44%; filter: drop-shadow(0 10px 18px rgb(155 55 144 / .18)); }

/* خطوة 2: الجانبيين يطلعون من خلف الرئيسي وينفردون — حركة وحدة متصلة
   منحنى يبدأ هادي (= "يطلّون") ثم يسرع ويهدى لين يستقر — بدل حركتين متتاليتين (كان فيه قفزة سرعة بينهم).
   الكرت الثاني يتأخر 70ms عشان يبان طبيعي · transition: none = الحركة من الـ animation بس (مو تلاشي step_scenes) */
.lp-card--side[data-step-in] { transition: none; }
.lp-card--side.is-in { animation: lp-fan 1.3s cubic-bezier(.55, .05, .15, 1) both; }
.lp-card--afyal.is-in { animation-delay: .07s; }
@keyframes lp-fan {
  0%   { opacity: 0; transform: translate(0, 1.5vh) rotate(0deg) scale(.95); }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(var(--dir) * var(--lp-spread, 22vw)), var(--lp-drop, 7vh)) rotate(calc(var(--dir) * 9deg)) scale(1); }
}

/* ---------- 7. Section 02 · شركات المجموعة (المنطق في landing.js) ----------
   الكروت نفسها (فوق) ترتصّ عمود يمين، والمعلومات يسار. data-active = الشركة الحالية · --enter = وصول الكروت (0 → 1)
   كل شركة لها توهّج بلونها خلف الكروت يتبدّل بنعومة */
.lp-group__tint { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.lp-group__tint--abyati   { background: radial-gradient(55vw 75vh at 88% 50%, rgb(42 108 181 / .38), transparent 70%), radial-gradient(45vw 55vh at 8% 92%, rgb(249 160 56 / .14), transparent 70%); }
.lp-group__tint--afyal    { background: radial-gradient(55vw 75vh at 88% 50%, rgb(155 55 144 / .4), transparent 70%), radial-gradient(45vw 55vh at 8% 92%, rgb(209 170 106 / .2), transparent 70%); }
.lp-group__tint--menapack { background: radial-gradient(55vw 75vh at 88% 50%, rgb(15 163 154 / .34), transparent 70%), radial-gradient(45vw 55vh at 8% 92%, rgb(150 165 172 / .16), transparent 70%); }
.lp-group[data-active="0"] .lp-group__tint--abyati,
.lp-group[data-active="1"] .lp-group__tint--afyal,
.lp-group[data-active="2"] .lp-group__tint--menapack { opacity: var(--enter, 1); }

.lp-group__info {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 8vw;
  inline-size: min(34rem, 46vw);
  display: grid;
  opacity: var(--enter, 1);
  transform: translateY(-50%);
}
.lp-group__title { grid-area: 1 / 1; margin: 0 0 var(--space-6); color: var(--lp-muted); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; }
/* الثلاثة في نفس الخانة — الحالية تظهر والباقي يختفي */
.lp-group__item { grid-area: 2 / 1; opacity: 0; transform: translateY(1.2rem); transition: opacity .5s ease, transform .5s ease; }
.lp-group[data-active="0"] .lp-group__item[data-i="0"],
.lp-group[data-active="1"] .lp-group__item[data-i="1"],
.lp-group[data-active="2"] .lp-group__item[data-i="2"] { opacity: 1; transform: none; transition-delay: .15s; }
.lp-group__item--abyati   { --accent: #7fb0ec; }
.lp-group__item--afyal    { --accent: #d68fce; }
.lp-group__item--menapack { --accent: #3cc9bf; }
.lp-group__count { margin: 0; color: var(--accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; }
.lp-group__name { margin: var(--space-2) 0 var(--space-4); color: var(--accent); font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.15; }
.lp-group__text { margin: 0; color: #c9d0da; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.9; }

/* ---------- 8. Section 03 · تطبيق الجوال (المسارات data-track في landing.html) ----------
   عمودين: النص (يمين) والجوال (يسار) · المزايا حبوب زجاجية على أطراف الجوال، نصها برا ونصها فوقه */
.lp-app__stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 36rem));
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding-inline: clamp(1rem, 8vw, 9rem);
}
.lp-app__eyebrow { margin: 0; color: var(--color-secondary, #f9a038); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; }
.lp-app__title { margin: var(--space-3) 0 var(--space-4); color: var(--lp-text); font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.15; }
.lp-app__text { margin: 0 0 var(--space-8); max-inline-size: 30rem; color: var(--lp-muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.9; }
.lp-app__stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.lp-app__device { position: relative; display: grid; place-items: center; block-size: 100%; }
/* توهّج خلف الجوال بألوان الهوية (أزرق + برتقالي) */
.lp-app__glow {
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side at 40% 40%, rgb(42 108 181 / .55), transparent), radial-gradient(closest-side at 65% 70%, rgb(249 160 56 / .3), transparent);
  filter: blur(40px);
  pointer-events: none;
}
.lp-app__phone {
  position: relative;
  block-size: min(80svh, 780px);
  inline-size: auto;
  filter: drop-shadow(0 40px 60px rgb(0 0 0 / .55));
}
.lp-app__chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.lp-app__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: .55rem 1rem .55rem .6rem;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: var(--radius-full, 999px);
  background: rgb(18 22 30 / .62);  /* داكن عشان النص الأبيض ينقرأ فوق شاشة الجوال البيضاء */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .6);
  color: #fff;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  font-weight: 700;
  white-space: nowrap;
}
.lp-app__chip-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: #fff; color: #2a6cb5; }
.lp-app__chip--2 .lp-app__chip-icon { color: #c98a1a; }
/* المواقع فعلية (left/right) عشان تبقى على أطراف الجوال نفسها في العربي والإنجليزي */
.lp-app__chip--1 { top: 22%; left: 4%; }
.lp-app__chip--2 { top: 36%; right: 2%; }
.lp-app__chip--3 { top: 60%; left: 0; }
.lp-app__chip--4 { top: 72%; right: 6%; }

/* ---------- 9. Section 04 · الفروع (المنطق في landing.js) ----------
   قائمة (يمين) + خريطة (يسار) · لون كل براند: --pin (أبياتي أزرق · مينا باك تركوازي · أفيال بنفسجي) */
.lp-branches { padding: clamp(5rem, 14vh, 9rem) clamp(1rem, 6vw, 6rem) clamp(4rem, 10vh, 7rem); }

.lp-branches__body {
  display: grid;
  grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-inline-size: 78rem;
  margin: clamp(2rem, 6vh, 3.5rem) auto 0;
}
.lp-branches__cities { display: flex; gap: var(--space-2); margin-block-end: var(--space-4); }
.lp-city {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .5rem 1rem;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--lp-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lp-city__count { display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: .35rem; border-radius: var(--radius-full, 999px); background: rgb(255 255 255 / .12); font-size: var(--text-xs); }
.lp-city[aria-pressed="true"] { background: #fff; border-color: #fff; color: #11151b; }
.lp-city[aria-pressed="true"] .lp-city__count { background: #11151b; color: #fff; }

/* الفرع في القائمة (partials/landing/branch.html) */
.lp-branches__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lp-branch--abyati   { --pin: #2a6cb5; --pin-soft: rgb(42 108 181 / .18); --pin-text: #8db8ee; }
.lp-branch--menapack { --pin: #0fa39a; --pin-soft: rgb(15 163 154 / .18); --pin-text: #4fd2c8; }
.lp-branch--afyal    { --pin: #9b3790; --pin-soft: rgb(155 55 144 / .2);  --pin-text: #d98fd0; }
.lp-branch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: .35rem .35rem .35rem .75rem;
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / .04);
  transition: background .25s ease, border-color .25s ease;
}
[dir="ltr"] .lp-branch { padding: .35rem .75rem .35rem .35rem; }
.lp-branch:hover, .lp-branch.is-active { border-color: var(--pin); background: var(--pin-soft); }
.lp-branch__pick { display: flex; flex: 1; align-items: center; gap: var(--space-3); min-inline-size: 0; padding: .55rem .5rem; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lp-branch__dot { flex: none; inline-size: .8rem; block-size: .8rem; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 4px var(--pin-soft); }
.lp-branch__info { display: grid; min-inline-size: 0; }
.lp-branch__brand { color: var(--pin-text); font-size: var(--text-xs); font-weight: 700; }
.lp-branch__name { color: var(--lp-text); font-size: .98rem; line-height: 1.5; }
.lp-branch__note { color: var(--lp-muted); font-size: var(--text-xs); }
.lp-branch__go { flex: none; padding: .45rem .8rem; border-radius: var(--radius-full, 999px); background: rgb(255 255 255 / .08); color: var(--lp-text); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.lp-branch__go:hover { background: #fff; color: #11151b; }

/* الخريطة: بلاطات OpenStreetMap معكوسة لتناسب الخلفية الداكنة · isolation عشان طبقات Leaflet (z-index 1000) ما تطلع فوق الشريط */
.lp-branches__map {
  position: relative;
  isolation: isolate;
  min-block-size: min(70svh, 640px);
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: clamp(1.2rem, 2vw, 1.8rem);
  overflow: hidden;
  background: #1a1f27;
}
.lp-branches__map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.45); }
.lp-branches__map .leaflet-control-attribution { background: rgb(12 14 18 / .7); color: #8b94a1; font-size: 10px; }
.lp-branches__map .leaflet-control-attribution a { color: #b9c2ce; }
.lp-branches__map .leaflet-bar a { background: #1d232c; border-color: #2c333d; color: #e6eaf0; }

/* الدبوس: دائرة بلون البراند + حلقة · المختار يكبر وينبض */
.lp-pin { --pin: #2a6cb5; }
.lp-pin--menapack { --pin: #0fa39a; }
.lp-pin--afyal { --pin: #9b3790; }
.lp-pin span { display: block; inline-size: 100%; block-size: 100%; border: 3px solid #fff; border-radius: 50%; background: var(--pin); box-shadow: 0 4px 12px rgb(0 0 0 / .45); transition: transform .25s ease; }
.lp-pin.is-active { z-index: 1000 !important; }
.lp-pin.is-active span { transform: scale(1.35); animation: lp-pin-pulse 1.6s ease-out infinite; }
@keyframes lp-pin-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pin) 60%, transparent), 0 4px 12px rgb(0 0 0 / .45); } 100% { box-shadow: 0 0 0 14px transparent, 0 4px 12px rgb(0 0 0 / .45); } }
.lp-pin__label { border: 0; border-radius: .6rem; background: #11151b; color: #fff; font-family: var(--font-ar); font-weight: 700; box-shadow: 0 8px 20px rgb(0 0 0 / .4); }
.lp-pin__label::before { border-top-color: #11151b; }

/* ---------- 10. Section 05 · تواصل معنا — نموذج في الوسط ---------- */
.lp-contact { padding: clamp(3rem, 10vh, 6rem) clamp(1rem, 6vw, 6rem) clamp(4rem, 12vh, 7rem); }
.lp-contact__form { display: grid; gap: var(--space-4); max-inline-size: 38rem; margin: clamp(2rem, 5vh, 3rem) auto 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgb(255 255 255 / .08); border-radius: clamp(1.2rem, 2vw, 1.8rem); background: rgb(255 255 255 / .04); }
.lp-contact__field { display: grid; gap: var(--space-2); }
.lp-contact__label { color: var(--lp-text); font-size: var(--text-sm); font-weight: 700; }
.lp-contact__input { inline-size: 100%; padding: .8rem 1rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 1rem; background: rgb(12 14 18 / .5); color: var(--lp-text); font: inherit; transition: border-color .2s, box-shadow .2s; }
.lp-contact__input::placeholder { color: rgb(255 255 255 / .35); }
.lp-contact__input:focus { outline: none; border-color: var(--color-secondary, #f9a038); box-shadow: 0 0 0 3px rgb(249 160 56 / .2); }
textarea.lp-contact__input { resize: vertical; min-block-size: 8rem; line-height: 1.8; }
.lp-contact__trap { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.lp-contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lp-contact__foot .lp-btn { margin-inline-start: auto; border: 0; font-family: inherit; cursor: pointer; }
.lp-contact__foot .lp-btn:disabled { opacity: .6; cursor: progress; }
.lp-contact__status { margin: 0; color: #7fd6a4; font-size: var(--text-sm); }
.lp-contact__status.is-error { color: #ff9b8f; }

/* ---------- 11. الفوتر (partials/landing/footer.html) — صغير: زر التطبيق + حلقات التواصل، وتحتها الحقوق ---------- */
.lp-footer { padding: var(--space-5) clamp(1rem, 6vw, 6rem); border-block-start: 1px solid rgb(255 255 255 / .08); background: rgb(12 14 18 / .55); }
.lp-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); max-inline-size: 78rem; margin-inline: auto; }
.lp-footer__social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lp-footer__icon { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border: 1px solid rgb(255 255 255 / .16); border-radius: 50%; color: var(--lp-muted); transition: color .2s, background .2s, border-color .2s; }
.lp-footer__icon:hover { border-color: #fff; background: #fff; color: #11151b; }
.lp-footer__copy { max-inline-size: 78rem; margin: var(--space-4) auto 0; padding-block-start: var(--space-4); border-block-start: 1px solid rgb(255 255 255 / .08); color: rgb(255 255 255 / .45); font-size: var(--text-xs); text-align: center; }

/* ---------- 12. تقليل الحركة ----------
   .ui-scenes-static (من scroll_scenes.js): المشاهد ما تلزق — الكروت تبقى في الـ Hero، والمعلومات تحت بعض
   prefers-reduced-motion: نوقف الحركات المستمرة، والجانبيين يظهرون في مكانهم النهائي مباشرة */
.ui-scenes-static .lp-cards { position: relative; }
.ui-scenes-static .lp-flow > .lp-hero { margin-block-start: -100vh; margin-block-start: -100svh; }
.ui-scenes-static .lp-group__tint { display: none; }
.ui-scenes-static .lp-group__info { position: relative; inset: auto; inline-size: auto; padding: 12vh 8vw; transform: none; }
.ui-scenes-static .lp-group__item { grid-area: auto; opacity: 1; transform: none; margin-block-end: var(--space-8); }
.ui-scenes-static .lp-app__stage { padding-block: var(--space-12); }

@media (prefers-reduced-motion: reduce) {
  .lp-card__glow, .lp-card__logo .ui-logo-mark__star, .lp-card--side.is-in, .lp-bg::before, .lp-bg::after, .lp-pin.is-active span { animation: none; }
  .lp-bg::before, .lp-bg::after { translate: none; }
  .lp-card--side.is-in { transform: translate(calc(var(--dir) * var(--lp-spread, 22vw)), var(--lp-drop, 7vh)) rotate(calc(var(--dir) * 9deg)); }
}

/* ---------- 13. الجوال ---------- */
@media (max-width: 767.98px) {
  /* الشريط: الشعار + زر الدخول بس (روابط الأقسام تختفي) */
  .lp-nav { grid-template-columns: auto 1fr auto; }
  .lp-nav__links { display: none; }
  /* الكروت: أصغر شوي والجانبيين أقرب للنص — عشان شعار كل جانبي يبان كامل (يبدأ ~1vw من الحافة وينتهي قبل الرئيسي)
     بدل ما ينقص من طرف الشاشة · مثبّتة على أسفل الشاشة وتطلّ منه (ربع الكرت تحت الحافة = 44vw × 4/3 × 0.25)
     عشان يكون نفس الشكل في الجوالات الطويلة والقصيرة، ومسافة مريحة بينها وبين الزر */
  .lp-body { --lp-card-w: 44vw; --lp-spread: 31vw; --lp-drop: 4svh; }
  .lp-card { inset-block-start: auto; inset-block-end: -15vw; }
  /* الـ Hero: النص في منتصف المسافة بين الشريط (فوق ~5rem) والكروت (الظاهر منها تحت ~48vw) + المزايا تحت الزر */
  .lp-hero { padding-block: 5rem 48vw; }
  .lp-hero__content { margin-block: auto; }
  .lp-hero__perks { display: flex; }
  /* المجموعة: الكرت الحالي كبير في نص الشاشة (landing.js) والمعلومات تحته مباشرة بالوسط */
  .lp-group__info { inset-block-start: var(--lp-info-top, 58svh); inset-inline: 7vw; inline-size: auto; transform: none; text-align: center; }
  .lp-group__title { margin-block-end: var(--space-3); }
  .lp-group__name { margin-block: var(--space-1) var(--space-2); font-size: 2rem; }
  .lp-group__text { font-size: .98rem; line-height: 1.8; }
  /* التطبيق: النص فوق والجوال تحته (مقصوص من تحت) */
  .lp-app__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: var(--space-4); padding: 11svh 7vw 0; text-align: center; }
  .lp-app__text { margin-inline: auto; margin-block-end: var(--space-5); }
  .lp-app__stores { justify-content: center; }
  .lp-app__device { align-items: start; overflow: visible; }
  .lp-app__phone { block-size: 66svh; }
  .lp-app__chip { padding: .4rem .75rem .4rem .45rem; }
  .lp-app__chip-icon { inline-size: 1.6rem; block-size: 1.6rem; }
  .lp-app__chip--1 { top: 12%; left: 0; }
  .lp-app__chip--2 { top: 26%; right: 0; }
  .lp-app__chip--3 { top: 44%; left: -2%; }
  .lp-app__chip--4 { top: 58%; right: -2%; }
  /* الفروع: الخريطة فوق والقائمة تحت */
  .lp-branches__body { grid-template-columns: 1fr; }
  .lp-branches__map { order: -1; min-block-size: 52svh; }
  /* الفوتر: زر التطبيق فوق والحلقات تحته — بالوسط */
  .lp-footer__row { flex-direction: column; }
}