/* ═══════════════════════════════════════════════════════════
   دز — الصفحة التعريفية
   الهوية فاتحة: ورق أبيض ورمادي فاتح جدًا، والبنفسجي والماجنتا
   لمسات (أزرار، تحديد، خطوط) لا أغلفة. المساحة البيضاء جزء من
   التصميم لا فراغ فيه.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#FFFFFF;
  --ground:#F2F3F7;      /* أرضية الصفحة */
  --ground-2:#EAECF3;    /* أعمق درجة نستعملها — تبقى فاتحة */
  --line:#E2E5EC;
  --line-2:#EDEFF4;

  --ink:#0F1117;         /* العناوين والنص الأساسي */
  --ink-2:#5A6072;       /* النص الثانوي */
  --ink-3:#868CA0;       /* التسميات الصغيرة */

  --violet:#6248FF;
  --violet-deep:#4B35D9;
  --violet-wash:#F1EFFF; /* خلفية التحديد — بنفسجي مخفّف جدًا */
  --magenta:#FF48E7;
  --magenta-wash:#FFF0FC;

  --good:#0E9F6E;
  --danger:#D92D20;
  --danger-wash:#FEF3F2;

  --grad:linear-gradient(105deg,var(--violet),var(--magenta));

  /* ── البطل الغامق ───────────────────────────────────────
     الصفحة فاتحة، والبطل وحده غامق: تباين مقصود يفتتح الصفحة.
     القيم مقيسة على أرضية ‎#0B0D14‎:
       hero-fg   أبيض        ≈ 19.9:1
       hero-fg-2 ‎#C2C7D6‎   ≈ 11.5:1
       hero-fg-3 ‎#9AA1B8‎   ≈  7.6:1   (أصغر نصّ في الشريط)
     والتدرّج فُتِّح خصّيصًا هنا: ‎#6248FF‎ على الغامق يعطي 3.6:1 فقط،
     أما ‎#9D8BFF‎ فيعطي 7.0:1. */
  --hero-bg:#0B0D14;
  --hero-bg-2:#141728;
  --hero-fg:#FFFFFF;
  --hero-fg-2:#C2C7D6;
  --hero-fg-3:#9AA1B8;
  --hero-line:rgba(255,255,255,.14);
  --hero-grad:linear-gradient(105deg,#9D8BFF,#FF7BEF);

  /* ارتفاع الشريط العلوي — ثابت في كل المقاسات.
     🔴 لا تغيّره مع حالة الشريط: تغيّر الارتفاع = قفزة في التخطيط. */
  --nav-h:70px;

  --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:32px; --pill:999px;
  --wrap:1200px; --gut:20px;

  /* الإيقاع الرأسي — قيمة واحدة تحكم تباعد كل الأقسام.
     ثلاث قيم متفرّقة تعني أن إحداها ستُنسى، وقد نُسيت فعلًا: كان الهيرو
     ينتهي بصفر فيلامس شريط الشعارات. الاستثناء الوحيد (الشريط الرفيع)
     مشتقّ منها بضرب لا برقم مستقلّ. */
  --rhythm:clamp(64px,8.5vw,116px);

  --sans:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
  /* المونو للأرقام والرموز اللاتينية فقط. الأرقام في هذه الصفحة هي المنتج
     (أسعار ونطاقات)، فأعطيناها صوتًا خاصًا بعرض ثابت. */
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --sh-sm:0 1px 2px rgba(16,18,25,.05);
  --sh:0 4px 16px rgba(16,18,25,.06);
  --sh-lg:0 18px 48px rgba(16,18,25,.09);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* قصّ الفائض أفقيًا على الجذر لا على body وحده: في RTL أي عنصر أعرض من الشاشة
   يزيح المحتوى كله خارج النافذة، و body وحدها لا تمنع ذلك. */
/* لا overflow-x هنا: يُبطل position:sticky لشريط التنقّل.
   الشريط العريض (brand-rail) يُقصّ داخل .brands نفسه. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--ground);color:var(--ink-2);
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
/* ‏[hidden] في ورقة المتصفّح أضعف من أي display في ورقتنا، وبطاقات الحالة
   عندنا تستعمل display:flex — فبلا هذه القاعدة تظهر وهي مخفيّة. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
/* بلا letter-spacing: العربية موصولة والتتبّع يفسد الوصلات.
   التنفّس من line-height وحده. */
h1,h2,h3{color:var(--ink);line-height:1.25;font-weight:700}
ul,ol{list-style:none}

/* 🔴 كل رقم في الصفحة لاتيني (0-9) بأمر المالك — ولا رقم عربي-هندي إطلاقًا.
   هذا الصنف يضبط شكلها: عرض ثابت، واتجاه لاتيني معزول داخل النص العربي. */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate;font-weight:600;letter-spacing:.01em}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--rhythm)}

:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--violet);
  color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.skip:focus{inset-inline-start:16px}

/* ── الأزرار ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15.5px;padding:15px 30px;border:0;border-radius:var(--r-sm);
  cursor:pointer;text-align:center;
  transition:transform .16s ease,box-shadow .18s ease,background .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(98,72,255,.26)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(98,72,255,.34)}
.btn-primary:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-sm{padding:10px 20px;font-size:14.5px;border-radius:var(--pill)}
.btn-block{width:100%}

/* ── الشريط العلوي ─────────────────────────────────────────
   الشريط لاصق وارتفاعه ثابت في كل الحالات؛ اللون وحده هو ما يتغيّر:
   شفّاف وهو مارّ فوق البطل الغامق، ثم فاتح بعد تجاوزه. التبديل يضيفه
   app.js من IntersectionObserver على الشريط الغامق. */
.nav{position:sticky;top:0;z-index:60;background:rgba(242,243,247,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);
  transition:background .28s ease,border-color .28s ease}
.nav-in{display:flex;align-items:center;gap:26px;height:var(--nav-h)}
.nav-logo{display:block;position:relative}
.nav-logo img{height:23px;width:auto;transition:opacity .28s ease}
/* النسختان متراكبتان حتى لا يتغيّر عرض الشعار عند التبديل */
.nav-logo .logo-light{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}
.nav-links{display:flex;gap:26px;margin-inline-start:auto;font-size:15px;color:var(--ink-2)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav .btn{flex:none}

/* حالة «فوق البطل»: بلا خلفية ولا حدّ، ونصوص فاتحة */
.nav--over-hero{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.nav--over-hero .logo-ink{opacity:0}
.nav--over-hero .logo-light{opacity:1}
.nav--over-hero .nav-links{color:var(--hero-fg-2)}   /* 11.5:1 على أرضية البطل */
.nav--over-hero .nav-links a:hover{color:var(--hero-fg)}

/* ═══ البطل ═══════════════════════════════════════════════ */
/* flow-root يمنع انهيار الهوامش مع الأب، فيبقى سحب الشريط الغامق
   إلى أعلى محصورًا داخل القسم لا مسرّبًا إلى ‎<main>‎. */
.hero{padding-block:0 var(--rhythm);display:flow-root}

/* الشريط الغامق: يمتدّ خلف الشريط العلوي بمقدار ارتفاعه بالضبط،
   ويعوّض ذلك بحشوة علوية مساوية فلا يتحرّك النصّ. */
.hero-dark{
  margin-top:calc(-1 * var(--nav-h));
  padding-block:calc(var(--nav-h) + clamp(30px,3.6vw,54px)) calc(var(--rhythm) * .62);
  background:
    radial-gradient(900px 480px at 50% -12%,rgba(98,72,255,.34),transparent 66%),
    radial-gradient(640px 400px at 88% 4%,rgba(255,72,231,.16),transparent 70%),
    linear-gradient(180deg,var(--hero-bg-2),var(--hero-bg) 62%);
  background-color:var(--hero-bg);
  color:var(--hero-fg-2);
}
.hero-in{max-width:760px;margin-inline:auto;text-align:center}

.hero-dark h1{color:var(--hero-fg)}
.hero-dark .hl{background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-dark .lede{color:var(--hero-fg-2)}
.hero-dark .join-note{color:var(--hero-fg-3)}

/* البطاقة تطلع فوق حافّة الشريط الغامق فيربط القسمين بدل حدّ فاصل حادّ.
   القيمة مشتقّة من ‎--rhythm‎ لا مستقلّة عنه. */
.hero .stage{margin-top:calc(var(--rhythm) * -.3);position:relative;z-index:1}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--violet-deep);background:var(--violet-wash);border:1px solid #DCD6FF;
  padding:7px 17px;border-radius:var(--pill)}
/* الشارة على الغامق: ‎#C9BFFF‎ ≈ 11.5:1 */
.hero-dark .eyebrow{color:#C9BFFF;background:rgba(98,72,255,.20);border-color:rgba(157,139,255,.38)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--magenta);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

.hero h1{font-size:clamp(36px,6.4vw,66px);margin-top:18px;line-height:1.18}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);margin-top:16px;
  max-width:46ch;margin-inline:auto;line-height:1.72}

/* ── بوّابة التسجيل ────────────────────────────────────────
   الحقول لم تعد في الصفحة: مكانها زرّ واحد. والزرّ نفسه يختفي بعد
   التسجيل وتحلّ محلّه بطاقة «تسجيلك وصلنا». */
.join-gate{margin-top:26px;max-width:340px;margin-inline:auto}
.join-gate .join-cta{width:100%}
.join-gate-big{max-width:420px}

.joined-card{
  margin-top:26px;max-width:460px;margin-inline:auto;
  display:flex;align-items:center;gap:13px;text-align:start;
  background:#ECFDF3;border:1px solid #A6F4C5;border-radius:var(--r);
  padding:16px 18px;
}
.joined-card:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.joined-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--good)}
.joined-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.joined-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.joined-tx b{font-size:15.5px;color:#05603A;font-weight:600}
.joined-tx small{font-size:13.5px;color:#0B7A55;line-height:1.6}
/* على أرضية البطل الغامقة: نفس البطاقة بلباس شفّاف بدل الأخضر الفاتح.
   ‎#7BEFB6‎ و‎#D6FAE7‎ فوق ‎rgba‎ الخضراء الغامقة يتجاوزان 7:1. */
.hero-dark .joined-card{background:rgba(14,159,110,.16);border-color:rgba(122,239,182,.34)}
.hero-dark .joined-tx b{color:#D6FAE7}
.hero-dark .joined-tx small{color:#9ADFC2}

/* ── نموذج التسجيل (داخل النافذة) ─────────────────────── */
.join{margin-top:24px}
.join-fields{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld span{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.fld input{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;font-size:15.5px;color:var(--ink);width:100%;
  transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh-sm);
}
.fld input::placeholder{color:#AAB0C0}
.fld input:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(98,72,255,.12)}
.fld input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(217,45,32,.1)}
/* 🔴 محاذاة يمينية لحقل البريد بطلب المالك، مع بقاء الكتابة لاتينية سليمة */
.fld-email{text-align:right;font-family:var(--mono);font-size:14.5px}

.captcha-slot:empty{display:none}          /* لا تحجز فراغًا قبل تركيب الودجت */
.captcha-slot{margin-top:14px;min-height:0}

/* ── خانة الموافقة ─────────────────────────────────────────
   عنصر وظيفي لا زخرفي: نصّها أصغر من الحقول وبلون ثانوي،
   ومربّع الاختيار بحجم يُلمس على الجوال. */
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px;cursor:pointer}
.consent input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin-top:2px;border:1.5px solid var(--line);border-radius:6px;
  background:var(--paper);cursor:pointer;transition:background .15s,border-color .15s;
}
.consent input:checked{background:var(--violet);border-color:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat}
.consent input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.consent span{font-size:13.5px;color:var(--ink-3);line-height:1.6}
/* الرابطان يُميَّزان باللون والوزن لا بالتسطير وحده */
.consent a{color:var(--violet-deep);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(98,72,255,.3)}
.consent a:hover{border-bottom-color:var(--violet)}

.join-modal{margin-top:20px;text-align:start}
.join-modal button[type="submit"]{margin-top:18px}
.join-note{font-size:13.5px;color:var(--ink-3);margin-top:12px;text-align:center}
.join-msg{margin-top:14px;font-size:14.5px;padding:13px 16px;border-radius:var(--r-sm);line-height:1.6}
.join-msg.ok{background:#ECFDF3;color:#05603A;border:1px solid #A6F4C5}
.join-msg.dup{background:var(--violet-wash);color:var(--violet-deep);border:1px solid #DCD6FF}
.join-msg.err{background:var(--danger-wash);color:#912018;border:1px solid #FECDCA}
.join-msg .code{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;
  direction:ltr;unicode-bidi:isolate;opacity:.8}

/* ═══ منصّة السيارة ═══════════════════════════════════════
   العنصر التوقيعي في الصفحة: السيارة نفسها هي دليل ما يغطّيه
   التطبيق. تميل مع الماوس، وكل جزء فيها يفتح أنظمته الحقيقية. */
.stage{
  margin-top:clamp(28px,3.4vw,46px);
  background:
    radial-gradient(760px 400px at 50% 6%,rgba(98,72,255,.07),transparent 70%),
    linear-gradient(180deg,var(--paper),var(--ground-2));
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
}
.stage-car{position:relative;padding:22px 22px 18px;display:flex;flex-direction:column;min-width:0}
#car3d{
  width:100%;height:clamp(280px,32vw,420px);
  --poster-color:transparent;background:transparent;
  /* لا نعطّل تمرير الصفحة فوق النموذج: التفاعل نقر فقط */
  touch-action:pan-y;
  /* 🔴 إلزامي: model-viewer يضع نقاط الأجزاء بإزاحة من الحافة اليسرى.
     داخل صفحة RTL يبدأ تخطيطها من الحافة اليمنى فتُزاح النقاط بعرض
     العنصر كاملًا وتخرج خارج الإطار. المحتوى ثلاثي الأبعاد بلا نصّ
     والنقاط أيقونات، فقلب الاتجاه هنا لا يؤثّر على شيء معروض. */
  direction:ltr;
}

/* نقاط الأجزاء فوق النموذج */
.pin{
  width:30px;height:30px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(16,18,25,.22);
  display:grid;place-items:center;transition:opacity .25s ease,transform .18s ease;
}
.pin span{width:11px;height:11px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 0 rgba(98,72,255,.45);animation:ping 2.6s ease-out infinite}
.pin:hover{transform:scale(1.12)}
.pin.on{background:var(--violet)}
.pin.on span{background:#fff;animation:none}
.pin.hide{opacity:0;pointer-events:none}   /* يخفيها model-viewer خلف الهيكل */
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(98,72,255,.45)}70%,100%{box-shadow:0 0 0 12px rgba(98,72,255,0)}}

.car-loading{display:none}
.car-err{margin:10px 4px 0;font-size:14px;background:var(--danger-wash);color:#912018;
  border:1px solid #FECDCA;border-radius:var(--r-sm);padding:12px 14px;line-height:1.6}
.car-err .code{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;
  direction:ltr;unicode-bidi:isolate;opacity:.8}

.body-picker{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:8px}
.bt{background:transparent;border:1px solid var(--line);border-radius:var(--pill);
  padding:7px 15px;font-size:13.5px;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.bt:hover{border-color:var(--violet);color:var(--violet-deep)}
.bt.on{background:var(--ink);border-color:var(--ink);color:#fff}

.stage-panel{background:var(--paper);border-inline-start:1px solid var(--line);
  padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;min-width:0}
.stage-h{font-size:clamp(21px,2.2vw,27px)}
.stage-sub{font-size:14.5px;color:var(--ink-2);margin-top:9px;line-height:1.65}

.zone-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.ztab{background:var(--ground);border:1px solid var(--line);border-radius:var(--pill);
  padding:8px 16px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:all .15s}
.ztab:hover{border-color:var(--violet);color:var(--violet-deep)}
.ztab[aria-selected="true"]{background:var(--violet-wash);border-color:var(--violet);color:var(--violet-deep);font-weight:600}

.zone-body{margin-top:18px;overflow-y:auto;max-height:340px;padding-inline-end:4px}
.zone-body::-webkit-scrollbar{width:6px}
.zone-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.zhint{font-size:14.5px;color:var(--ink-3);background:var(--ground);border:1px dashed var(--line);
  border-radius:var(--r-sm);padding:18px;text-align:center}

.zsys{border-top:1px solid var(--line-2);padding-block:14px}
.zsys:first-child{border-top:0;padding-top:4px}
.zsys-h{display:flex;align-items:baseline;gap:8px}
.zsys-h b{font-size:16px;color:var(--ink);font-weight:600}
.zsys-d{font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.55}
.zsvc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;
  background:var(--ground);border-radius:var(--r-xs);padding:9px 12px}
.zsvc-n{font-size:13.5px;color:var(--ink-2);min-width:0}
.zsvc-p{font-size:13.5px;color:var(--ink);white-space:nowrap;font-weight:600}
.zsvc-p .cur{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin-inline-start:4px;font-weight:500}
.zsvc-p.diag{font-size:12.5px;color:var(--ink-3);font-weight:500}

/* ═══ شريط الماركات ═══════════════════════════════════════ */
/* 🔴 overflow:hidden إلزامي هنا: الشريط أعرض من الشاشة بأضعاف (نسختان من ٣٢ شعارًا).
   بدونه يتمدّد عرض المستند كله، وفي صفحة RTL ينزاح المحتوى خارج النافذة
   فتظهر الصفحة فارغة تمامًا. لا تحذف هذا السطر. */
/* شريط رفيع: نصف الإيقاع، مشتقًّا منه لا رقمًا مستقلًّا. */
.brands{padding-block:calc(var(--rhythm) * .5);background:var(--paper);
  border-block:1px solid var(--line);overflow:hidden}
.brands-lbl{text-align:center;font-size:13.5px;color:var(--ink-3);font-weight:500;
  margin-bottom:8px}
/* تلاشي الحواف حتى لا يبدو الشريط مقصوصًا بالسكّين عند طرفي الشاشة */
.brand-wrap{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.brand-rail{display:flex;gap:clamp(34px,4vw,60px);align-items:center;margin-block:30px 26px;
  width:max-content;animation:rail 58s linear infinite}
/* الشعارات أيقونات مربّعة أحادية اللون (24×24)، فنحدّد لها صندوقًا ثابتًا.
   بلا filter: الرسوم سوداء أصلًا فالتدرّج الرمادي لا يغيّر شيئًا ويكلّف طبقة لكل شعار. */
.brand-rail img{width:27px;height:27px;object-fit:contain;opacity:.42;flex:none}
.brands:hover .brand-rail{animation-play-state:paused}
@keyframes rail{to{transform:translateX(50%)}}  /* RTL: الاتجاه الموجب يسير يمينًا */
.brands-note{text-align:center;font-size:12px;color:var(--ink-3);line-height:1.6;max-width:62ch;margin-inline:auto}

/* ═══ المشكلة: اليوم / مع دز ═══════════════════════════════ */
.pain-in{max-width:980px;margin-inline:auto}
.pain-h{font-size:clamp(27px,4vw,44px);text-align:center}
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(28px,3.5vw,44px)}
.pcard{border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);border:1px solid var(--line)}
.pcard-t{font-size:13px;font-weight:600;margin-bottom:12px}
.pcard-p{font-size:clamp(16px,1.5vw,17.5px);line-height:1.8}
.today{background:var(--ground-2)}
.today .pcard-t{color:var(--ink-3)}
.today .pcard-p{color:var(--ink-2)}
.dz{background:var(--paper);border-color:#DCD6FF;box-shadow:var(--sh)}
.dz .pcard-t{color:var(--violet-deep)}
.dz .pcard-p{color:var(--ink)}

/* ═══ كيف تشتغل ═══════════════════════════════════════════ */
.sec h2{font-size:clamp(26px,3.4vw,40px)}
.sub{font-size:clamp(15.5px,1.4vw,17px);color:var(--ink-2);margin-top:12px;max-width:56ch;line-height:1.7}
.how{background:var(--paper);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(30px,3.6vw,48px)}
.step{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 28px}
.step-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:15px;font-weight:600}
.step h3{font-size:18px;margin-top:16px}
.step p{font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.7}

/* ═══ التجربة ═════════════════════════════════════════════ */
.try-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:clamp(28px,3.4vw,44px);align-items:start}
.try-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-sm)}
.tstep+.tstep{margin-top:20px}
.tlbl{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:11px}
.tn{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--violet-wash);
  color:var(--violet-deep);font-family:var(--mono);font-size:12.5px;font-weight:600;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--ground);border:1px solid var(--line);border-radius:var(--pill);padding:8px 15px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--violet);color:var(--violet-deep)}
.chip[aria-pressed="true"]{background:var(--violet-wash);border-color:var(--violet);color:var(--violet-deep);font-weight:600}
.hint{font-size:13.5px;color:var(--ink-3)}
.skel{display:inline-block;width:96px;height:34px;border-radius:var(--pill);background:var(--ground-2);animation:sk 1.4s ease-in-out infinite}
.skel:nth-child(2){width:128px}.skel:nth-child(3){width:78px}
@keyframes sk{50%{opacity:.5}}

.svc-list{display:flex;flex-direction:column;gap:8px}
.svc{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;
  background:var(--ground);border:1px solid var(--line);border-radius:var(--r-xs);padding:12px 14px;cursor:pointer;transition:all .15s}
.svc:hover{border-color:var(--violet)}
.svc[aria-pressed="true"]{background:var(--violet-wash);border-color:var(--violet)}
.svc-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc-b b{font-size:14.5px;color:var(--ink);font-weight:600}
.svc-b small{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.svc-p{font-size:14px;color:var(--ink);font-weight:600;white-space:nowrap}
.svc-p .cur{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin-inline-start:4px;font-weight:500}
.svc-p.diag{font-size:12.5px;color:var(--ink-3);font-weight:500}
.try-form .btn{margin-top:22px}

.try-out{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-sm);min-height:260px}
.out-ph{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:220px;
  text-align:center;color:var(--ink-3);font-size:14.5px;gap:6px}
.out-ph b{color:var(--ink-2)}

.mock-banner{display:flex;gap:10px;background:#FFFAEB;border:1px solid #FEDF89;border-radius:var(--r-sm);padding:13px 15px}
.mock-banner svg{width:19px;height:19px;flex:none;fill:none;stroke:#B54708;margin-top:2px}
.mock-banner p{font-size:13.5px;color:#93370D;line-height:1.65}
.mock-banner b{display:block;color:#7A2E0E}

.out-sum{margin-top:16px;background:var(--ground);border-radius:var(--r-sm);padding:15px 16px;display:flex;flex-direction:column;gap:3px}
.out-sum small{font-size:12px;color:var(--ink-3);font-weight:600}
.out-sum b{font-size:16px;color:var(--ink)}
.out-sum .pl{font-size:13px;color:var(--ink-2)}
.out-head{font-size:14px;color:var(--ink-2);margin-top:18px}
.out-head b{color:var(--ink)}

/* العروض أشكال فارغة تمامًا: لا اسم ورشة ولا سعر خلف التمويه */
.offers{display:flex;flex-direction:column;gap:9px;margin-top:11px;filter:blur(3.4px);opacity:.62;user-select:none}
.offer{display:flex;align-items:center;gap:11px;background:var(--ground);border:1px solid var(--line);border-radius:var(--r-xs);padding:13px 14px}
.offer .av{width:34px;height:34px;border-radius:50%;background:var(--ground-2);flex:none}
.offer .ln{display:flex;flex-direction:column;gap:6px;flex:1}
.offer .ln i{height:8px;border-radius:4px;background:var(--ground-2);display:block}
.offer .ln i:first-child{width:58%}.offer .ln i:last-child{width:34%}
.offer .pr{width:62px;height:22px;border-radius:6px;background:#DDD8FF;flex:none}
.offer-lock{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.offer-lock svg{width:16px;height:16px;fill:none;stroke:var(--ink-3)}
.out-cta{margin-top:16px}

.err-box{margin-top:16px;font-size:14px;background:var(--danger-wash);color:#912018;
  border:1px solid #FECDCA;border-radius:var(--r-sm);padding:13px 15px;line-height:1.6}
.err-box .code{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;direction:ltr;unicode-bidi:isolate;opacity:.8}

/* ═══ للورش ═══════════════════════════════════════════════ */
.shops{background:var(--paper);border-block:1px solid var(--line)}
.shops-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(28px,4vw,60px);align-items:center}
.kicker{font-size:13px;font-weight:600;color:var(--violet-deep);margin-bottom:12px}
.shops-copy .btn{margin-top:24px}
.shop-list{display:flex;flex-direction:column;gap:11px}
.shop-list li{background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.7;position:relative;padding-inline-start:44px}
.shop-list li::before{content:"";position:absolute;inset-inline-start:18px;top:22px;width:8px;height:8px;
  border-radius:50%;background:var(--violet)}

/* ═══ التسجيل ═════════════════════════════════════════════ */
.join-in{max-width:620px;margin-inline:auto;text-align:center}
.join-in .sub{margin-inline:auto}
.stores{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 18px;opacity:.62}
.store svg{width:21px;height:21px;fill:var(--ink)}
.store-t{display:flex;flex-direction:column;line-height:1.25;text-align:start}
.store-t small{font-size:10.5px;color:var(--ink-3)}
.store-t b{font-size:14px;color:var(--ink);font-family:var(--mono);font-weight:600}

/* ═══ التذييل ═════════════════════════════════════════════ */
.foot{background:var(--paper);border-top:1px solid var(--line);padding-block:26px}
/* في RTL آخر عنصر في الصف يقع أقصى اليسار — وهو مكان توقيع فيستا المطلوب */
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-c{font-size:13px;color:var(--ink-3)}
.foot-legal{display:flex;gap:20px;font-size:13px}
.foot-legal a{color:var(--ink-2);transition:color .15s}
.foot-legal a:hover{color:var(--violet-deep)}
.foot-by{display:inline-flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-3);
  transition:opacity .15s}
.foot-by:hover{opacity:.7}
.foot-by img{height:22px;width:auto}

/* ═══ نافذة التسجيل ═══════════════════════════════════════
   ‎<dialog>‎ في الطبقة العليا: لا حاجة لـz-index ولا لحبس تركيز يدوي.
   نُلغي مظهر الـUA كاملًا ونبني البطاقة بأنفسنا. */
.jm{border:0;padding:0;background:transparent;color:inherit;
  width:100%;max-width:100%;height:100%;max-height:100%;
  inset:0;overflow:auto;overscroll-behavior:contain}
.jm:not([open]){display:none}
.jm[open]{display:grid;place-items:center;padding:24px var(--gut)}
.jm::backdrop{background:rgba(9,11,18,.62);backdrop-filter:blur(3px)}

.jm-card{
  position:relative;width:100%;max-width:520px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:clamp(24px,3vw,34px);
  animation:jm-in .22s ease-out;
}
@keyframes jm-in{from{opacity:0;transform:translateY(14px) scale(.985)}}

.jm-x{position:absolute;inset-block-start:14px;inset-inline-end:14px;
  width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:var(--r-xs);
  background:var(--ground);cursor:pointer;transition:background .15s,color .15s}
.jm-x:hover{background:var(--ground-2);color:var(--ink)}
.jm-x svg{width:17px;height:17px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.jm-x:hover svg{stroke:var(--ink)}

.jm-t{font-size:clamp(20px,2.4vw,25px);padding-inline-end:44px}
.jm-sub{font-size:14.5px;color:var(--ink-2);margin-top:9px;line-height:1.7}

/* لوحة النجاح: هي «اللحظة المطمئنة» — علامة صحّ تكبر ثم تثبت،
   ونصّ صريح أن التسجيل استُلم، ثم تُغلق النافذة من نفسها. */
.jm-done{text-align:center;padding-block:14px 4px}
.jm-tick{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  margin-inline:auto;background:#ECFDF3;border:2px solid #A6F4C5;
  animation:jm-pop .34s cubic-bezier(.2,1.5,.5,1)}
.jm-tick svg{width:34px;height:34px;fill:none;stroke:var(--good);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;animation:jm-draw .4s .16s ease-out forwards}
@keyframes jm-pop{from{transform:scale(.4);opacity:0}}
@keyframes jm-draw{to{stroke-dashoffset:0}}
.jm-done-t{font-size:22px;font-weight:700;color:var(--ink);margin-top:18px}
.jm-done-p{font-size:14.5px;color:var(--ink-2);margin-top:9px;line-height:1.7;
  max-width:40ch;margin-inline:auto}
.jm-done .btn{margin-top:24px}

/* بلا حركة: العلامة تظهر مكتملة فورًا بدل أن تُرسم */
@media (prefers-reduced-motion:reduce){
  .jm-tick svg{stroke-dashoffset:0}
}

/* ═══ الاستجابة ═══════════════════════════════════════════ */
@media (max-width:1000px){
  .stage{grid-template-columns:1fr}
  .stage-panel{border-inline-start:0;border-top:1px solid var(--line)}
  .zone-body{max-height:none}
  .steps{grid-template-columns:1fr 1fr}
  .try-box{grid-template-columns:1fr}
  .shops-in{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-in{gap:14px;justify-content:space-between}
  .join-fields{grid-template-columns:1fr}
  .pain-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero-dark{padding-top:calc(var(--nav-h) + 34px)}
  /* النافذة على الجوال: ورقة تملأ العرض وتلتصق بالأسفل */
  .jm[open]{place-items:end center;padding:0}
  .jm-card{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;border-inline:0;border-bottom:0;
    padding:26px 18px calc(18px + env(safe-area-inset-bottom))}
  @keyframes jm-in{from{opacity:0;transform:translateY(26px)}}
  #car3d{height:248px}
  .stage-car{padding:14px 14px 14px}
  .stage{border-radius:var(--r-lg)}
  .foot-in{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .brand-rail{animation:none}
}