/* ===========================================================================
   دايركت — التجربة الغامرة
   ست شاشات تملأ الشاشة فوق فيديو ثابت يعمل وحده ولا يرتبط بالتمرير.
   ألوان الهوية فقط: مداد وكربون أرضيةً، عنبر وسماوي تعبيراً، وأحمر للعلامة
   والزر. بلا بطاقات: سيارات على خط أرض، كُرات طلاء، فهرس طباعي، خريطة شبكة.
   =========================================================================== */

:root{ --hdr:72px; --prog:50px; --dock:78px }

html,body{height:100%}
/* .btn{display:inline-flex} كان يهزم السمة hidden فيظهر «التالي» قبل أي اختيار */
[hidden]{display:none !important}
body.xp{overflow:hidden;background:var(--carbon)}

/* --- الخلفية: مقطع لكل شاشة، صافٍ بلا صبغة لونية --------------------------
   الستائر كربون محايد (أسود بلا لون) وموضعية: تحت النص وعند الحواف فقط،
   فيبقى الفيديو ظاهراً. لا أزرق ولا بيج.                                  */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#141316}
.bg__layer{
  position:absolute;inset:0;background:center/cover no-repeat;
  opacity:0;transform:scale(1.06);
  transition:opacity 1s var(--ease),transform 2.2s var(--ease-out);
}
.bg__layer.is-on{opacity:1;transform:scale(1.01)}
.bg__layer video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
}
.bg__layer video.is-on{opacity:1}
.bg__layer[data-bg="hero"]{background-position:32% 50%}
.bg__layer[data-bg="hero"] video{object-position:32% 50%}
.bg__scrim{position:absolute;inset:0;transition:opacity 1s var(--ease)}
.bg__scrim--hero{
  background:
    linear-gradient(0deg,rgba(11,10,12,.66) 0%,rgba(11,10,12,0) 34%),
    linear-gradient(270deg,rgba(11,10,12,.84) 0%,rgba(11,10,12,.70) 34%,rgba(11,10,12,.26) 60%,rgba(11,10,12,0) 100%);
}
.bg__scrim--flow{
  opacity:0;
  background:linear-gradient(180deg,rgba(11,10,12,.74) 0%,rgba(11,10,12,.34) 30%,rgba(11,10,12,.30) 66%,rgba(11,10,12,.78) 100%);
}
body:not([data-scene="hero"]) .bg__scrim--hero{opacity:0}
body:not([data-scene="hero"]) .bg__scrim--flow{opacity:1}
/* شاشة المركز: السيارة المغطاة تقع خلف الخريطة تماماً، فيُعمَّق الستار هناك وحده.
   ستار لا filter: المرشّح على فيديو يُسقط الإطارات. */
body[data-scene="center"] .bg__grid{background-color:rgba(11,10,12,.10)}
/* شاشات النصوص الكثيفة تحتاج ستاراً أعمق قليلاً */
body[data-scene="brand"] .bg__scrim--flow,body[data-scene="pay"] .bg__scrim--flow,body[data-scene="center"] .bg__scrim--flow{
  background:linear-gradient(180deg,rgba(11,10,12,.80) 0%,rgba(11,10,12,.56) 30%,rgba(11,10,12,.56) 66%,rgba(11,10,12,.84) 100%);
}
/* الحجم: إضاءة سقف الاستوديو تقع خلف أسماء الخطوات، فيُعمَّق أعلى الشاشة وحده
   وتبقى الأرضية التي تقف عليها السيارات مكشوفة. */
body[data-scene="size"] .bg__scrim--flow{
  background:linear-gradient(180deg,rgba(11,10,12,.88) 0%,rgba(11,10,12,.74) 13%,rgba(11,10,12,.34) 34%,rgba(11,10,12,.22) 62%,rgba(11,10,12,.74) 100%);
}
/* المركز: لقطة قريبة داكنة ليدَي الفني على الفيلم. عمود بيانات المركز (يسار الشاشة)
   يأخذ ستاراً جانبياً، والوسط يبقى خفيف الستار لتظهر اليدان. أسماء المدن لها حدّ
   داكن خاص بها (.ntext) فلا تحتاج ستاراً أعمق فوق القفاز الأبيض. */
body[data-scene="center"] .bg__scrim--flow{
  background:
    linear-gradient(90deg,rgba(11,10,12,.78) 0%,rgba(11,10,12,.58) 30%,rgba(11,10,12,.10) 58%,rgba(11,10,12,0) 100%),
    linear-gradient(180deg,rgba(11,10,12,.80) 0%,rgba(11,10,12,.36) 28%,rgba(11,10,12,.32) 66%,rgba(11,10,12,.82) 100%);
}
@media (max-width:700px){
  /* عمود واحد: البيانات أسفل الخريطة، فالستار الأعمق في النصف السفلي */
  body[data-scene="center"] .bg__scrim--flow{
    background:linear-gradient(180deg,rgba(11,10,12,.86) 0%,rgba(11,10,12,.40) 24%,rgba(11,10,12,.46) 48%,rgba(11,10,12,.88) 66%,rgba(11,10,12,.93) 100%);
  }
  /* اللمعة: اليدان والكاشطة في الثلث الأيسر من اللقطة، فتُزاح لتبقيا داخل قصّ الجوال */
  .bg__layer[data-bg="finish"]{background-position:20% 50%}
  .bg__layer[data-bg="finish"] video{object-position:20% 50%}
  .bg__layer[data-bg="center"]{background-position:58% 50%}
  .bg__layer[data-bg="center"] video{object-position:58% 50%}
}
/* نمط شبكة العقد من كتاب الهوية، عنبري خافت */
.bg__grid{
  position:absolute;inset:-130px;opacity:.3;
  background-image:
    repeating-linear-gradient(45deg,transparent 0 119px,rgba(255,197,61,.07) 119px 120px),
    repeating-linear-gradient(-45deg,transparent 0 119px,rgba(255,197,61,.07) 119px 120px);
  animation:envdrift 90s linear infinite -20s;
}

/* --- الرأس ---------------------------------------------------------------- */
.xp .hdr{position:fixed;inset-inline:0;top:0;background:transparent;border:0}
.xp .hdr__in{height:var(--hdr)}
.xhdr__link{margin-inline-start:auto;font-size:14.5px;color:var(--tx-2);padding:10px 2px;transition:color .3s var(--ease)}
.xhdr__link:hover{color:var(--amber)}

/* --- خط الشبكة: التقدّم --------------------------------------------------- */
.prog{
  position:fixed;inset-inline:0;top:var(--hdr);z-index:30;height:var(--prog);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease-out);
}
body:not([data-scene="hero"]) .prog{opacity:1;pointer-events:auto;transform:none}
.prog__in{position:relative}
.prog__in ol{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0}
.prog__in::before{content:"";position:absolute;inset-inline:var(--gut);top:5px;height:1px;background:rgba(245,243,240,.26)}
.prog__fill{
  position:absolute;inset-inline:var(--gut);top:5px;height:1px;background:var(--amber);
  transform-origin:inline-start;transform:scaleX(var(--p,0));transition:transform .8s var(--ease-out);
}
.pstep{display:flex;flex-direction:column;align-items:flex-start;gap:7px;position:relative;z-index:1;padding:0;cursor:default}
.pstep[data-can="1"]{cursor:pointer}
.pstep__dot{
  width:11px;height:11px;border-radius:50%;background:#151417;border:1.5px solid rgba(245,243,240,.5);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.pstep__t{font-size:12.5px;color:var(--tx-3);display:flex;gap:7px;align-items:baseline;transition:color .4s var(--ease)}
.pstep__t b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;font-weight:700;direction:ltr}
.pstep.is-done .pstep__dot{background:var(--amber);border-color:var(--amber)}
.pstep.is-done .pstep__t{color:var(--tx-2)}
.pstep.is-now .pstep__dot{border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,197,61,.18)}
.pstep.is-now .pstep__t{color:var(--ivory)}
.pstep.is-now .pstep__t b{color:var(--amber)}
@media (max-width:640px){.pstep__t span{display:none}}

/* --- المشهد ---------------------------------------------------------------- */
.scene{
  position:fixed;inset:0;z-index:2;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--hdr) + var(--prog) + clamp(8px,2.4vh,30px)) 0 calc(var(--dock) + 22px);
  opacity:0;visibility:hidden;transform:translateX(-44px);
  transition:opacity .4s var(--ease),transform .55s var(--ease-out),visibility 0s linear .55s;
  scrollbar-width:thin;scrollbar-color:rgba(158,201,232,.3) transparent;
}
.scene.is-active{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .6s var(--ease) .14s,transform .75s var(--ease-out) .14s,visibility 0s;
}
.scene.is-leaving{transform:translateX(44px)}
.st{opacity:0;transform:translateY(20px)}
.scene.is-active .st{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) calc(.22s + var(--i,0) * 75ms),transform .85s var(--ease-out) calc(.22s + var(--i,0) * 75ms);
}

/* التسميات لاتينية الاتجاه، فتُحاذى يميناً صراحةً لتجلس فوق العنوان العربي */
.xp .shead .label,.xp .hero .label{display:block;text-align:right}
/* المحتوى يتوزّع على ارتفاع الشاشة بدل أن يتكدّس أعلاها */
.scene:not(.scene--hero) > .wrap{min-height:100%;display:flex;flex-direction:column}
.lineup,.orbs{margin-block:auto}
.shead h2{
  font-size:clamp(28px,5.2vh,52px);font-weight:900;line-height:1.15;letter-spacing:-.015em;margin-top:8px;outline:none;
}
.shead__note{margin-top:10px;color:var(--tx-2);min-height:1.8em;max-width:60ch;transition:opacity .3s var(--ease)}

/* --- 00 البطل -------------------------------------------------------------- */
.scene--hero{padding:var(--hdr) 0 0;display:grid}
.hero__in{align-self:center;padding-bottom:clamp(70px,12vh,120px)}
.hero h1{
  font-size:clamp(42px,8.2vw,112px);line-height:1.06;letter-spacing:-.025em;font-weight:900;
  margin-top:14px;max-width:9ch;outline:none;
}
.hero__sub{
  font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.6vw,32px);color:var(--amber);margin-top:clamp(12px,2vh,22px);
}
.hero__lede{margin-top:14px;max-width:36ch;color:var(--tx-2);font-size:clamp(15px,1.5vw,18px);line-height:1.8}
.hero__cta{margin-top:clamp(22px,4vh,38px);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn--xl{font-size:17px;padding:19px 38px}
.hero__strip{
  position:absolute;inset-inline:0;bottom:0;border-top:1px solid rgba(245,243,240,.16);
  background:linear-gradient(0deg,rgba(11,10,12,.55),rgba(11,10,12,0));
}
.hero__strip ul{list-style:none;margin:0;padding:16px 0;display:flex;gap:clamp(14px,3vw,40px);flex-wrap:wrap;font-size:13px;color:var(--tx-2)}
.hero__strip li{display:flex;gap:9px;align-items:center}
.hero__strip li::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid var(--amber)}
.hero__strip li.plain::before{display:none}
.hero__strip a{color:var(--tx-3)}
.hero__strip a:hover{color:var(--amber)}
.hero__strip .sp{margin-inline-start:auto}
.hero__cr img{height:22px;width:auto;display:block;background:#fff;border-radius:3px;padding:2px 6px}
@media (max-width:720px){
  .bg__layer[data-bg="hero"]{background-position:22% 50%}
  .bg__layer[data-bg="hero"] video{object-position:22% 50%}
  .bg__scrim--hero{background:linear-gradient(0deg,rgba(11,10,12,.94) 0%,rgba(11,10,12,.84) 44%,rgba(11,10,12,.30) 72%,rgba(11,10,12,.12) 100%)}
  .hero__in{align-self:end;padding-bottom:clamp(96px,16vh,130px)}
  .hero__strip li.plain{display:none}
  /* السجل التجاري يبقى ظاهراً حتى على الجوال خلافاً لبقية الروابط
     القانونية هنا — إلزامي العرض، لا تفصيل ثانوي يُختصر لتوفير المساحة. */
  .hero__strip li.plain.hero__cr{display:flex}
  /* الشريط يلتصق بأسفل المشهد تماماً (position:absolute;bottom:0) — زر
     واتساب العائم ثابت بنفس الزاوية السفلية، فبدون حشو إضافي هنا يتغطّى
     آخر سطر بالشريط بالزر فعلياً على الجوال. */
  .hero__strip ul{padding-bottom:78px}
}

/* --- 01 الحجم: سيارات على خط أرض واحد ------------------------------------- */
.lineup{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:clamp(10px,4vw,72px);
  margin-top:clamp(10px,3vh,40px);
}
.ride{display:flex;flex-direction:column;align-items:center;padding:0 0 8px;position:relative;outline-offset:6px}
.ride__stage{
  position:relative;width:100%;height:clamp(120px,30vh,300px);
  display:flex;align-items:flex-end;justify-content:center;
}
/* خط الأرض يمتد نصف الفجوة من كل جهة فيتّصل بين الأعمدة */
.ride__stage::after{content:"";position:absolute;inset-inline:calc(clamp(10px,4vw,72px) / -2);bottom:0;height:1px;background:rgba(245,243,240,.30)}
.ride__glow{
  position:absolute;inset-inline:4%;bottom:-22px;height:54px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,197,61,.5) 0%,rgba(255,197,61,.14) 45%,rgba(255,197,61,0) 72%);
  opacity:0;transform:scaleX(.6);transition:opacity .5s var(--ease),transform .7s var(--ease-out);
}
.ride img{
  position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;object-fit:contain;
  transform-origin:50% 100%;transform:scale(.86);filter:brightness(.62) saturate(.6);
  transition:transform .7s var(--ease-out),filter .6s var(--ease);
}
.ride__node{
  width:11px;height:11px;border-radius:50%;margin-top:-6px;position:relative;z-index:2;
  background:#151417;border:1.5px solid rgba(245,243,240,.6);transition:background .4s,border-color .4s,box-shadow .4s;
}
.ride__name{font-family:var(--f-display);font-weight:900;font-size:clamp(12px,min(3.4vh,2.2vw + 7px),34px);line-height:1.25;text-align:center;color:var(--tx-2);margin-top:16px;transition:color .4s var(--ease)}
.ride__note{font-size:12.5px;color:var(--tx-3);margin-top:2px;text-align:center}
.ride:hover img,.ride:focus-visible img{transform:scale(1);filter:none}
.ride:hover .ride__glow,.ride:focus-visible .ride__glow{opacity:.55;transform:none}
.ride:hover .ride__name,.ride:focus-visible .ride__name{color:var(--ivory)}
.ride[aria-pressed="true"] img{transform:scale(1.04);filter:none}
.ride[aria-pressed="true"] .ride__glow{opacity:1;transform:none}
.ride[aria-pressed="true"] .ride__name{color:var(--amber)}
.ride[aria-pressed="true"] .ride__node{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(255,197,61,.18)}
/* بيك أب وSUV معاً: الـSUV في الخلف يميناً، والبيك أب أمامه يساراً */
.ride--duo .ride__stage img{position:absolute;bottom:0;max-width:86%}
.ride--duo .ride__stage img:nth-of-type(1){inset-inline-start:-8%;max-height:100%;z-index:1;opacity:.92}
.ride--duo .ride__stage img:nth-of-type(2){inset-inline-end:-10%;max-height:86%;z-index:2}
.ride--duo.is-go img:nth-of-type(1){transition-delay:.09s}
/* السيارة المختارة تنطلق إلى الأمام (يساراً في العربية) قبل تبدّل المشهد */
.ride.is-go img{transform:translateX(-150vw) scale(1.04);transition:transform .8s cubic-bezier(.7,0,.9,.35)}
.ride.is-go .ride__glow{opacity:0}
@media (max-width:760px){
  .ride__stage{height:clamp(44px,17vw,150px)}
  .ride img{filter:brightness(.8) saturate(.85)}
  .ride__note{display:none}
  .ride__name{margin-top:10px}
}

/* --- 02 اللمعة: كُرات طلاء ------------------------------------------------ */
.orbs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2.4vw,36px);margin-top:clamp(8px,3vh,40px)}
.orbs__gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.orbbtn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:8px 4px 10px;outline-offset:4px}
.orb{
  width:min(100%,clamp(56px,26vh,230px));aspect-ratio:1;border-radius:50%;position:relative;
  transition:transform .7s var(--ease-out);
}
.orbbtn:hover .orb,.orbbtn:focus-visible .orb{transform:translateY(-8px) scale(1.04)}
.orbbtn[aria-pressed="true"] .orb{transform:translateY(-10px) scale(1.06)}
/* صورة مربّعة حقيقية (رول/عيّنة) تحلّ محل الكرة حين يرفعها المدير لهذه
   اللمعة تحديداً — نفس مقاس الكرة ونفس حركة hover/الاختيار، بزوايا حادة
   بدل دائرية لتطابق هوية الموقع لا كرة مموّهة كصورة. */
.orb__photo{
  width:min(100%,clamp(56px,26vh,230px));aspect-ratio:1;border-radius:2px;object-fit:cover;
  display:block;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .7s var(--ease-out);
}
.orbbtn:hover .orb__photo,.orbbtn:focus-visible .orb__photo{transform:translateY(-8px) scale(1.04)}
.orbbtn[aria-pressed="true"] .orb__photo{transform:translateY(-10px) scale(1.06);outline:2px solid var(--amber);outline-offset:3px}
/* كُرات CSS: الأساس الذي يعمل بلا WebGL */
.orb--gloss{background:radial-gradient(circle at 32% 27%,#fff 0 5%,rgba(255,255,255,.75) 9%,#efece6 17%,#cfcac3 52%,#8f8a83 86%,#6d6862 100%)}
.orb--matte{background:radial-gradient(circle at 36% 30%,#e9e5df 0%,#cbc6bf 38%,#a7a29b 72%,#837e77 100%)}
.orb--black{background:radial-gradient(circle at 32% 27%,#fff 0 4%,rgba(255,255,255,.55) 8%,#4a4a52 15%,#141317 42%,#060607 100%)}
.orb--black-matte{background:radial-gradient(circle at 36% 30%,#3a3a3d 0%,#232325 38%,#121214 72%,#040405 100%)}
/* ملوّن: ألوان صريحة (أحمر، أصفر، أخضر، أزرق، بنفسجي) ليفهم الزبون فوراً أنه فيلم ألوان */
.orb--color{background:
  radial-gradient(circle at 32% 27%,#fff 0 4%,rgba(255,255,255,.55) 9%,rgba(255,255,255,0) 24%),
  radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%),
  conic-gradient(from 200deg,#E10600,#FFC53D,#2FB344,#1E88E5,#8E44AD,#E10600)}
.orb__swatches{display:flex;gap:6px;margin-top:8px}
.orb__swatches i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(245,243,240,.75)}
/* كُرة CSS تبقى ظاهرة دائماً تحت القماشة — لا تُخفى عند نجاح WebGL، فتبقى
   هي المعروضة فوراً ودون انقطاع إن تأخّر التحميل أو فشل الرسم لاحقاً بصمت */
.orb__floor{
  width:60%;height:16px;border-radius:50%;margin-top:6px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);
  transition:background .5s var(--ease),transform .6s var(--ease-out);
}
.orbbtn[aria-pressed="true"] .orb__floor{background:radial-gradient(ellipse at center,rgba(255,197,61,.6),rgba(255,197,61,0) 70%);transform:scale(1.25)}
.orb__name{font-family:var(--f-display);font-weight:900;font-size:clamp(13px,min(3.4vh,2.2vw + 7px),34px);color:var(--tx-2);margin-top:12px;transition:color .4s var(--ease)}
.orbbtn:hover .orb__name,.orbbtn:focus-visible .orb__name{color:var(--ivory)}
.orbbtn[aria-pressed="true"] .orb__name{color:var(--amber)}
.orb__plus{font-family:var(--f-mono);font-size:12px;color:var(--tx-3);margin-top:2px;direction:ltr}
.orb__plus.is-price{font-size:clamp(12px,1.9vh,15px);font-weight:700;color:var(--tx-2);white-space:nowrap}
.orbbtn[aria-pressed="true"] .orb__plus.is-price{color:var(--amber)}
/* «من»: اللمعة تُختار قبل الشركة، فالسعر هنا أقل سعر بين الشركات التي توفّرها */
.orb__plus.is-price small{font-family:var(--f-body);font-weight:500;font-size:.72em;color:var(--tx-3);margin-inline-end:2px}
@media (max-width:560px){.orb__swatches{gap:3px}.orb__swatches i{width:9px;height:9px;border-width:1px}.orb__floor{height:10px}}

/* --- 03 الشركة: فهرس طباعي ------------------------------------------------ */
.marques{margin-top:clamp(8px,2vh,26px);border-top:1px solid rgba(245,243,240,.18);position:relative}
.marques__gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.marque{
  width:100%;display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;column-gap:clamp(10px,2.4vw,34px);
  padding:clamp(3px,1.05vh,16px) 0;border-bottom:1px solid rgba(245,243,240,.18);text-align:start;position:relative;overflow:hidden;outline-offset:-2px;
}
.marque::before{
  content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(245,243,240,.10),rgba(245,243,240,0) 70%);
  transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease-out);
}
.marque:hover::before,.marque:focus-visible::before,.marque[aria-pressed="true"]::before{transform:scaleX(1)}
.marque > *{position:relative}
.marque__n{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--tx-3);direction:ltr;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:100%;max-width:96px}
.marque__n--logo img{width:100%;height:100%;object-fit:contain;transition:opacity .4s var(--ease)}
/* يختفي شعار شركة معيّنة فقط بعد جاهزية مجسّمها هي، لا كل الشركات دفعة واحدة
   (راجع logo3d.js) — فشركة بطيئة أو فاشلة التحميل تبقى بشعارها المسطّح ظاهراً. */
.marque__n--logo.logo3d-ready img{opacity:0}
@media (max-width:640px){.marque__n{max-width:64px}}
.marque__name{
  font-family:var(--f-mono);font-weight:800;font-size:clamp(24px,min(7vh,9vw),100px);line-height:1;letter-spacing:-.03em;
  direction:ltr;text-align:right;color:transparent;-webkit-text-stroke:1.3px rgba(245,243,240,.6);
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease),transform .7s var(--ease-out);
}
.marque:hover .marque__name,.marque:focus-visible .marque__name{color:var(--ivory);-webkit-text-stroke-color:var(--ivory);transform:translateX(-14px)}
.marque[aria-pressed="true"] .marque__name{color:var(--amber);-webkit-text-stroke-color:var(--amber);transform:translateX(-14px)}
.marque__side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:end}
.marque__price{font-family:var(--f-display);font-weight:800;font-size:clamp(17px,2.6vh,24px);color:var(--ivory)}
.marque[aria-pressed="true"] .marque__price{color:var(--amber)}
.marque__meta{font-size:12.5px;color:var(--tx-3)}
.marque__incl{font-size:12px;font-weight:700;color:var(--ice)}
@media (max-width:640px){
  .marque{grid-template-columns:64px minmax(0,1fr) auto;column-gap:8px}
  .marque__price{font-size:15px}
  .marque__meta{font-size:10.5px}
  .marque__incl{font-size:10.5px}
  .marque__name{-webkit-text-stroke-width:1px}
}

/* --- 04 المركز: خريطة الشبكة ---------------------------------------------- */
.net{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.85fr);gap:clamp(16px,3vw,48px);margin-top:clamp(6px,1.6vh,20px);align-items:stretch}
.netmap{position:relative;min-height:clamp(150px,42vh,520px)}
.netmap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nl{stroke:rgba(245,243,240,.22);stroke-width:1;fill:none;transition:stroke .5s var(--ease),opacity .5s}
.nl.is-on{stroke:var(--amber);stroke-width:1.8;stroke-dasharray:7 7;animation:flowdash 1.1s linear infinite}
@keyframes flowdash{to{stroke-dashoffset:-28}}
.nn{cursor:pointer;outline:none}
.nn circle.dot{fill:#151417;stroke:var(--ivory);stroke-width:1.6;transition:fill .4s,stroke .4s,r .4s var(--ease-out)}
.nn circle.halo{fill:rgba(255,197,61,.0);transition:fill .4s}
.nn:hover circle.dot,.nn:focus-visible circle.dot{stroke:var(--amber)}
.nn.is-on circle.dot{fill:var(--amber);stroke:var(--amber);r:12}
.nn.is-on circle.halo{fill:rgba(255,197,61,.16)}
.nn.is-pick circle.dot{fill:var(--amber);stroke:var(--ivory);stroke-width:2.4}
.nn.is-dim{opacity:.28}
.nhub circle{fill:none;stroke:var(--signal);stroke-width:2.6}
/* حدّ داكن حول الاسم: يبقى مقروءاً فوق أي جزء فاتح من اللقطة (قفاز، انعكاس ضوء) */
.ntext{font-family:var(--f-body);font-size:24px;fill:var(--ivory);paint-order:stroke;stroke:rgba(11,10,12,.82);stroke-width:6px;stroke-linejoin:round}
.ntext--hub{font-family:var(--f-display);font-weight:700;font-size:24px;fill:var(--ivory)}
.netmap__cap{position:absolute;inset-inline-start:0;bottom:-4px;font-size:12px;color:var(--tx-3)}

.cities{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(4px,1vh,12px)}
.cities::-webkit-scrollbar{display:none}
.cities button{white-space:nowrap;flex-shrink:0}
.cities button{font-size:13px;color:var(--tx-2);padding:6px 12px;border-bottom:1.5px solid transparent;transition:color .3s,border-color .3s}
.cities button:hover{color:var(--ivory)}
.cities button[aria-pressed="true"]{color:var(--amber);border-bottom-color:var(--amber)}

.readout{display:flex;flex-direction:column;min-width:0}
.readout__img{height:clamp(90px,22vh,260px);background:#151417 center/cover;border:1px solid rgba(245,243,240,.18);position:relative;overflow:hidden}
.readout__img i{position:absolute;inset:0;background:center/cover;opacity:0;transition:opacity .7s var(--ease)}
.readout__img i.is-on{opacity:1}
.readout__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,10,12,.75),rgba(11,10,12,0) 55%)}
.readout__rate{position:absolute;inset-inline-start:14px;bottom:10px;z-index:2;font-family:var(--f-mono);font-weight:800;color:var(--amber);font-size:20px;direction:ltr}
.readout__rate small{font-weight:400;font-size:12px;color:var(--tx-2);margin-inline-start:6px}
.readout__name{font-family:var(--f-display);font-weight:900;font-size:clamp(20px,3.6vh,38px);line-height:1.2;color:var(--ivory);margin-top:clamp(8px,1.6vh,16px)}
.readout__where{color:var(--ice);margin-top:2px}
.readout dl{display:grid;grid-template-columns:auto 1fr;gap:clamp(2px,.6vh,6px) 16px;margin:clamp(6px,1.4vh,14px) 0 0;font-size:13.5px}
.readout dt{color:var(--tx-3)}
.readout dd{margin:0;color:var(--tx-2)}
.readout__acts{display:flex;gap:8px;margin-top:auto;padding-top:clamp(8px,1.8vh,18px);align-items:stretch}
.readout__acts .btn--signal{flex:1;min-width:0;white-space:nowrap;padding-inline:clamp(8px,1.4vw,24px)}
@media (max-width:1000px){.readout__acts .btn--signal{font-size:13px}.readout__acts .arrowbtn{width:42px;flex-shrink:0}}
.arrowbtn{width:50px;border:1px solid var(--border-ui);border-radius:2px;display:grid;place-items:center;color:var(--ivory);transition:border-color .3s,color .3s,background .3s}
.arrowbtn:hover{border-color:var(--amber);color:var(--amber)}
@media (max-width:700px){
  /* minmax(0,…) لا 1fr: وإلا تمدّد العمود بعرض شريط المدن وقُصّ زر «السابق» خارج الشاشة */
  .net{grid-template-columns:minmax(0,1fr)}
  .netmap{min-height:clamp(150px,30vh,300px)}
  .readout__acts .btn--signal{min-width:0;padding-inline:10px}
  .arrowbtn{width:46px;flex-shrink:0}
  .ntext{font-size:30px}.ntext--hub{font-size:30px}
  /* على الجوال تُخفى صورة المركز ليبقى زر الاختيار ظاهراً بلا تمرير */
  .readout__img{display:none}
  .readout__name{margin-top:6px}
}

/* --- 05 الدفع -------------------------------------------------------------- */
.pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.82fr);gap:clamp(16px,4vw,60px);margin-top:clamp(4px,1.6vh,24px);align-items:start}
.pay form{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px)}
.pay .field{gap:clamp(3px,.7vh,7px)}
.pay .input{padding-block:clamp(8px,1.3vh,13px)}
.pay .btn--xl{padding-block:clamp(13px,2vh,19px)}
.pay .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xp .input{background:rgba(11,10,12,.58);backdrop-filter:blur(8px);border-color:rgba(245,243,240,.42)}
.seg{display:flex;flex-wrap:wrap;border:1px solid rgba(245,243,240,.42);border-radius:2px;overflow:hidden;background:rgba(11,10,12,.5);backdrop-filter:blur(8px)}
.seg label{flex:1 1 auto;min-width:96px;position:relative;text-align:center;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;padding:clamp(8px,1.4vh,13px) 10px;font-size:14px;color:var(--tx-2);border-inline-end:1px solid var(--border);transition:background .3s,color .3s}
.seg label:last-child span{border-inline-end:0}
.seg input:hover + span{color:var(--ivory);background:rgba(158,201,232,.08)}
.seg input:checked + span{background:var(--amber);color:var(--carbon);font-weight:600}
.seg input:focus-visible + span{outline:2px solid var(--amber);outline-offset:-3px}
.cert{
  position:relative;background:rgba(11,10,12,.66);backdrop-filter:blur(12px);
  border:1px solid rgba(245,243,240,.22);padding:clamp(14px,2.6vh,30px) clamp(16px,2.4vw,30px);
}
.cert::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--signal)}
.cert__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cert h3{margin-top:clamp(4px,1vh,10px);font-size:clamp(17px,2.6vh,22px)}
.cert dl{margin:clamp(6px,1.4vh,16px) 0 0}
.cert .r{display:flex;justify-content:space-between;gap:14px;padding-block:clamp(4px,1.05vh,10px);border-bottom:1px solid rgba(245,243,240,.14);font-size:14px}
.cert .r dt{color:var(--ice)}
.cert .r dd{margin:0;font-weight:600;color:var(--ivory);text-align:end}
.cert__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(6px,1.4vh,16px);padding-top:clamp(6px,1.3vh,14px);border-top:2px solid rgba(245,243,240,.3)}
.cert__total b{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,3.4vw,32px);color:var(--amber)}
.cert.is-stamped{border-color:var(--amber)}
.cert > *{position:relative;z-index:1}
.stamp{
  position:absolute !important;z-index:0 !important;inset:50% auto auto 50%;width:min(62%,230px);aspect-ratio:1;
  color:var(--ice);opacity:.05;transform:translate(-50%,-50%) rotate(-14deg) scale(1.25);
  transition:opacity .6s var(--ease) .25s,transform .8s var(--ease-out) .25s,color .6s var(--ease) .25s;
}
.cert.is-stamped .stamp{opacity:.16;color:var(--amber);transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
@media (max-width:700px){.pay{grid-template-columns:1fr}.pay .row2{grid-template-columns:1fr 1fr;gap:10px}}

/* --- الرصيف السفلي: الطلب يتكوّن حيّاً ------------------------------------ */
.dock{
  position:fixed;inset-inline:0;bottom:0;z-index:40;height:var(--dock);
  border-top:1px solid rgba(245,243,240,.14);background:rgba(11,10,12,.72);backdrop-filter:blur(16px);
  transform:translateY(102%);transition:transform .7s var(--ease-out);
}
body:not([data-scene="hero"]):not(.is-done) .dock{transform:none}
/* زر واتساب العائم يتداخل مع الرصيف أثناء بناء الطلب — يُخفى بنفس شرط ظهور
   الرصيف بالضبط، ويعود بمجرد العودة للبطل أو إتمام الطلب. */
body:not([data-scene="hero"]):not(.is-done) .wa-fab{display:none}
.dock__in{display:flex;align-items:center;gap:clamp(10px,2vw,22px);height:100%}
.dock__back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--tx-2);padding:12px 6px;transition:color .3s}
.dock__back:hover{color:var(--amber)}
.dock__build{flex:1;min-width:0;display:flex;gap:10px;align-items:baseline;white-space:nowrap;overflow:hidden;font-size:14px;color:var(--tx-2);mask-image:linear-gradient(90deg,transparent 0,#000 26px)}
.dock__build b{color:var(--ivory);font-weight:600}
.dock__build i{font-style:normal;color:var(--tx-3)}
.dock__price{font-family:var(--f-display);font-weight:900;font-size:clamp(19px,2.6vw,27px);color:var(--amber);white-space:nowrap}
.dock__price small{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.1em;margin-inline-start:6px;color:var(--tx-2)}
@media (max-width:640px){.dock__next{padding-inline:16px}.dock__back span{display:none}}

/* --- التنبيه العابر -------------------------------------------------------- */
.toast{
  position:fixed;inset-block-end:calc(var(--dock) + 16px);inset-inline-start:50%;z-index:90;
  transform:translate(50%,14px);opacity:0;pointer-events:none;
  background:var(--ivory);color:var(--carbon);border-radius:2px;padding:11px 20px;font-size:14px;font-weight:600;
  transition:opacity .35s var(--ease),transform .35s var(--ease-out);
}
.toast.is-on{opacity:1;transform:translate(50%,0)}

/* شاشات اللابتوب القصيرة: الإطار ينكمش بدل أن يفيض المحتوى. القياس على عشرة
   مقاسات أثبت أن 1366×768 و1536×864 و1280×620 كانت تحتاج تمريراً داخل المشهد. */
@media (max-height:900px){ :root{--hdr:64px;--prog:46px;--dock:68px} }
@media (max-height:780px){
  :root{--hdr:56px;--prog:42px;--dock:60px}
  .shead h2{margin-top:2px}
  .shead__note{margin-top:4px;font-size:14px;min-height:0}
  .pstep{gap:4px}
}
@media (max-height:660px){
  :root{--hdr:50px;--prog:34px;--dock:54px}
  .pstep__t{display:none}
  .hero__lede{display:none}
  .shead .label{display:none}
  .pay form{gap:6px}
  .cert .r{padding-block:3px;font-size:13px}
  .cert__total b{font-size:24px}
  .scene{padding-bottom:calc(var(--dock) + 8px)}
}

/* الشاشات الطولية (جوال، تابلت واقف): العناصر نفسها والترتيب نفسه، لكن في صفّين
   ٢×٢. صف واحد من أربع على عرض 390 يعطي سيارة بعرض 55 بكسل ونصف شاشة فارغاً. */
@media (orientation:portrait) and (max-width:900px){
  .lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3.4vh,52px) clamp(18px,7vw,64px)}
  .ride__stage{height:clamp(64px,min(15vh,23vw),240px)}
  .ride__stage::after{inset-inline:calc(clamp(18px,7vw,64px) / -2)}
  .ride__name{font-size:clamp(17px,min(3.2vh,4.8vw),32px);margin-top:10px}
  .ride__note{display:block;font-size:clamp(10.5px,1.5vh,13px)}
  .orbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2px,1.2vh,24px) clamp(14px,6vw,56px)}
  .orbbtn{padding-block:4px 6px}
  .orb{width:min(100%,clamp(70px,13.5vh,240px))}
  .orb__name{font-size:clamp(17px,min(3.2vh,4.8vw),32px);margin-top:6px}
  .orb__swatches{gap:5px;margin-top:5px}
  .orb__swatches i{width:12px;height:12px;border-width:1.5px}
}
@media (max-width:700px) and (max-height:700px){
  .orb__plus.is-price{font-size:11.5px;line-height:1.3}
  .orb__name{margin-top:4px}
  .netmap{min-height:clamp(110px,23vh,300px)}
  .readout dl{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .scene,.scene.is-active,.scene.is-leaving{transform:none}
  .st{opacity:1;transform:none}
  .bg__grid{animation:none}
  .bg__layer video{display:none}
  .nl.is-on{animation:none}
  .ride.is-go img{transform:scale(1.04)}
}

/* ===========================================================================
   04 المركز — إعادة تصميم: خريطة السعودية + بطاقات (بديل الرسم الشبكي القديم)
   =========================================================================== */
.ksa{margin-top:clamp(6px,1.6vh,18px)}
.ksamap{position:relative;border:1px solid var(--border-ui)}
.ksamap__load{height:260px;display:grid;place-items:center;color:var(--tx-3);font-size:13.5px;background:var(--panel)}
.ksamap__el{height:260px}
@media (min-width:720px){.ksamap__load,.ksamap__el{height:340px}}

/* خريطة Leaflet فاتحة افتراضياً — نُلبسها هوية داكنة بأقل تدخّل ممكن:
   تعتيم بلاطات OSM نفسها بدل محاولة إعادة تلوينها، وتطبيق ألوان العلامة
   على عناصر التحكم والتلميحة فقط. */
.ksamap .leaflet-container{background:var(--panel);font-family:var(--f-body)}
.ksamap .leaflet-tile-pane{filter:brightness(.62) saturate(.75) invert(1) hue-rotate(180deg) contrast(.92)}
.ksamap .leaflet-control-zoom a{background:var(--panel-2);color:var(--ivory);border-color:var(--border-ui)!important}
.ksamap .leaflet-control-zoom a:hover{background:var(--panel);color:var(--amber)}
.ksamap .leaflet-control-attribution{background:rgba(11,10,12,.72);color:var(--tx-3);font-size:10px}
.ksamap .leaflet-control-attribution a{color:var(--ice)}
.ksamap .leaflet-tooltip{background:var(--carbon);color:var(--ivory);border:1px solid var(--border-ui);border-radius:0;font-size:12.5px;font-family:var(--f-body);box-shadow:none}
.ksamap .leaflet-tooltip-top::before{border-top-color:var(--carbon)}

.ksa .cities{margin-top:clamp(10px,2vh,18px);justify-content:center}

.ccards{margin-top:clamp(16px,2.6vh,26px);display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.ccards[hidden]{display:none}
.ccard{position:relative;text-align:start;padding:15px 17px;border:1px solid var(--border-ui);background:var(--panel);transition:border-color .3s var(--ease),transform .22s var(--ease),background .3s}
.ccard:hover{border-color:var(--tx-3);transform:translateY(-2px)}
.ccard[aria-pressed="true"]{border-color:var(--amber);background:var(--panel-2)}
.ccard[aria-pressed="true"]::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--amber)}
.ccard__check{position:absolute;top:13px;inset-inline-end:13px;width:21px;height:21px;border-radius:50%;border:1.5px solid var(--border-ui);display:grid;place-items:center;color:transparent;transition:all .22s var(--ease)}
.ccard[aria-pressed="true"] .ccard__check{background:var(--amber);border-color:var(--amber);color:var(--carbon)}
.ccard__name{font-family:var(--f-display);font-weight:800;font-size:16.5px;color:var(--ivory);padding-inline-end:26px;line-height:1.35}
.ccard__where{margin-top:3px;color:var(--ice);font-size:13px}
.ccard__pick{margin-top:13px;width:100%;justify-content:center}
.ccards__empty{grid-column:1/-1;color:var(--tx-3);font-size:14px;padding:18px 0;text-align:center}
/* بطاقات معلوماتية فقط الآن (بلا اختيار مركز محدد) — لا أيقونة صح محجوز
   لها مساحة، ولا حالة pressed. زر التأكيد الوحيد يمتد تحتها كامل العرض. */
.ccard--info{cursor:default}
.ccard--info:hover{border-color:var(--border-ui);transform:none}
.ccard--info .ccard__name{padding-inline-end:0}
.ccards__confirm{grid-column:1/-1;margin-top:4px;width:100%;justify-content:center}
.ccards__confirm[disabled]{opacity:.6;pointer-events:none}

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

/* --- نافذة تأكيد بيانات الطلب (إلزامية قبل الانتقال من المركز للدفع) --- */
.xmodal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,8,10,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.xmodal.is-open{opacity:1;pointer-events:auto}
.xmodal__panel{width:100%;max-width:460px;max-height:88vh;overflow-y:auto;background:var(--panel-2);border:1px solid rgba(158,201,232,.3);position:relative;transform:translateY(14px) scale(.98);transition:transform .25s var(--ease)}
.xmodal.is-open .xmodal__panel{transform:none}
.xmodal__panel::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--signal)}
.xmodal__body{padding:clamp(20px,4vw,28px)}
.xmodal__title{font-family:var(--f-display);font-weight:900;font-size:clamp(19px,3vw,23px);color:var(--ivory);outline:none}
.xmodal__lede{margin-top:9px;color:var(--tx-2);font-size:13.5px;line-height:1.8}
.xmodal__rows{margin:16px 0 0;border-top:1px solid var(--border)}
.xmodal__row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.xmodal__row dt{color:var(--tx-3)}
.xmodal__row dd{margin:0;color:var(--ivory);font-weight:600;text-align:end}
.xmodal__total{align-items:baseline;border-bottom:0;margin-top:2px;padding-top:12px;border-top:2px solid rgba(245,243,240,.25)}
.xmodal__total b{font-family:var(--f-display);font-weight:900;font-size:21px;color:var(--amber)}
.xmodal__ack{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:13px;border:1px solid var(--border-ui);cursor:pointer}
.xmodal__ack input{margin-top:3px;width:18px;height:18px;accent-color:var(--amber);flex-shrink:0}
.xmodal__ack span{font-size:13px;color:var(--tx-2);line-height:1.7}
.xmodal__err{margin-top:9px;font-size:12.5px;color:var(--signal-tx)}
.xmodal__acts{display:flex;gap:10px;margin-top:16px}
.xmodal__acts .btn{flex:1;min-width:0}
@media (max-width:420px){
  .xmodal__acts{flex-direction:column-reverse}
}