@charset "utf-8";

/* ==========================================================================
   Leopard Auto — نظام التصميم للموقع
   هوية «حدقة الفهد»: أوبسيديان أسود، ذهب دافئ، عربية واضحة.
   ملف واحد لكل الصفحات. الروابط نسبية دائمًا حتى تعمل من الجذر ومن /v2.
   ========================================================================== */

/* ---------- 1. الرموز ---------- */
:root{
  /* اللون */
  --obsidian:#070608;
  --surface:#15100B;
  --surface-2:#1E1710;
  --line:#2E2418;
  --amber:#D9861C;
  --gold:#E3A94A;
  --gold-light:#F8D894;
  --cream:#FFF3D4;
  --text:#F3EAD8;
  --text-2:#B5A68C;

  --hair:rgba(227,169,74,.30);
  --hair-soft:rgba(227,169,74,.14);
  --glow:rgba(216,140,50,.20);
  --danger:#E8703A;
  --ok:#8FCB6A;

  /* الخط */
  --f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-ui:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;
  --f-voice:"Aref Ruqaa","Readex Pro",serif;
  --f-mark:"Syncopate","Readex Pro",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* سلّم الأحجام — موبايل أولًا، يكبر مع الشاشة */
  --t-hero:clamp(32px,8.2vw,72px);
  --t-h1:clamp(27px,6.2vw,46px);
  --t-h2:clamp(22px,4.6vw,34px);
  --t-h3:clamp(18px,3.2vw,22px);
  --t-lead:clamp(16px,3.4vw,20px);
  --t-body:clamp(15.5px,2.4vw,17px);
  --t-sm:14px;
  --t-xs:12.5px;

  /* المسافة */
  --gutter:16px;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:34px; --s6:48px; --s7:68px;
  --sect:clamp(46px,9vw,84px);

  /* الشكل */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --shadow-lg:0 26px 70px rgba(0,0,0,.62);
  --head-h:58px;

  color-scheme:dark;
  accent-color:var(--gold);
}
/* التصميم داكن بطبيعته؛ نُثبّت الرموز على كلا مفتاحي السمة */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --obsidian:#070608; --text:#F3EAD8 } }
:root[data-theme="dark"]{ --obsidian:#070608; --text:#F3EAD8 }

@media (min-width:900px){ :root{ --gutter:28px; --head-h:66px } }

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 14px);
  /* على html لا على body: overflow على body يكسر position:sticky في الترويسة */
  overflow-x:hidden;
}
body{
  background:var(--obsidian);
  color:var(--text);
  font-family:var(--f-ui);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100%;
  /* ضوء ذهبي دافئ يهبط من الأعلى، لا صور ولا ملفات خارجية */
  background-image:
    radial-gradient(1000px 620px at 78% -8%,rgba(217,134,28,.13),transparent 62%),
    radial-gradient(760px 520px at 4% 16%,rgba(120,80,30,.09),transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-light)}
ul,ol{list-style:none}
b,strong{font-weight:600;color:var(--cream)}
small{font-size:var(--t-sm)}
::selection{background:rgba(227,169,74,.28);color:var(--cream)}

/* العربية تحتاج فراغًا رأسيًا أكثر: الشدّة والهمزة تحتاجان مكانًا */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.4;letter-spacing:0;text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:300;line-height:1.34}
h2{font-size:var(--t-h2);font-weight:300;line-height:1.36}
h3{font-size:var(--t-h3);font-weight:500;line-height:1.45}
p{max-width:64ch}
p + p{margin-top:var(--s3)}

/* التركيز: واضح دائمًا، لا يُلغى أبدًا */
:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:6px;
}
/* تخطّي إلى المحتوى — أول عنصر في الصفحة */
/* يُخفى رأسيًا لا أفقيًا: الإزاحة الأفقية تُنشئ تمريرًا جانبيًا */
.skip{
  position:absolute;top:8px;inset-inline-start:12px;z-index:200;
  background:var(--gold);color:#140D04;font-weight:600;
  padding:10px 18px;border-radius:var(--r-sm);
  transform:translateY(-250%);
}
.skip:focus{transform:none}

/* ---------- 3. الهيكل ---------- */
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:760px}
.sect{padding-block:var(--sect)}
.sect--tight{padding-block:calc(var(--sect) * .6)}
.sect + .sect{padding-top:0}

.sect-head{margin-bottom:var(--s5);max-width:66ch}
.sect-head > * + *{margin-top:var(--s2)}
.sect-head p{margin-top:var(--s3)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-ui);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;color:var(--gold);line-height:1;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.6;flex:none}

.lead{font-size:var(--t-lead);line-height:1.8;color:var(--text-2);max-width:60ch}
.muted{color:var(--text-2)}
.gold{color:var(--gold)}
.center{text-align:center}
.center p,.center .lead{margin-inline:auto}

/* اسم المنتج بالحروف اللاتينية — Syncopate فقط هنا */
.wordmark{
  font-family:var(--f-mark);font-weight:700;
  letter-spacing:.34em;direction:ltr;unicode-bidi:isolate;
  color:var(--text);line-height:1;
  margin-inline-end:-.34em; /* تعويض المسافة الزائدة بعد آخر حرف */
}

/* كلام السائق منطوقًا — عرف الرقعة، ولا شيء غيره */
.voice{
  font-family:var(--f-voice);font-weight:400;
  font-size:clamp(21px,4.6vw,32px);line-height:1.7;
  color:var(--gold-light);
}

/* ---------- 4. الترويسة اللاصقة ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(7,6,8,.88);
  border-bottom:1px solid var(--line);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-head{background:rgba(7,6,8,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
}
.site-head__in{
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--head-h);
}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--text);flex:none}
.brand:hover{color:var(--cream)}
.brand:hover .brand-mark{filter:brightness(1.12)}
.brand-mark{
  width:28px;height:28px;flex:none;border-radius:50%;
  background:var(--mark-svg) center/contain no-repeat;
  transition:filter .2s;
}
.brand .wordmark{font-size:13px}
@media (min-width:900px){ .brand-mark{width:32px;height:32px} .brand .wordmark{font-size:15px} }

.head-links{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto}
.head-link{
  font-size:var(--t-sm);font-weight:500;color:var(--text-2);
  padding:8px 4px;border-radius:8px;white-space:nowrap;
}
.head-link:hover{color:var(--cream)}
.head-link--hide{display:none}
@media (min-width:640px){ .head-link--hide{display:inline-flex} }

/* ---------- 5. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-ui);font-size:var(--t-body);font-weight:600;line-height:1.2;
  padding:14px 26px;min-height:48px;
  border:1px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn svg,.btn .btn__ic{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* الأساسي: ذهب مصقول على نص أوبسيديان */
.btn--gold{
  color:#160E03;
  background:linear-gradient(170deg,var(--gold-light) 0%,var(--gold) 46%,#BE7F26 100%);
  box-shadow:0 10px 26px rgba(214,140,50,.26),inset 0 1px 0 rgba(255,246,222,.5);
}
.btn--gold:hover{
  color:#160E03;
  box-shadow:0 14px 34px rgba(214,140,50,.38),inset 0 1px 0 rgba(255,246,222,.65);
  filter:brightness(1.05);
}

/* الشبحي: خط ذهبي رفيع على الأسود */
.btn--ghost{
  color:var(--gold);background:rgba(227,169,74,.05);border-color:var(--hair);
}
.btn--ghost:hover{color:var(--gold-light);background:rgba(227,169,74,.11);border-color:var(--gold)}

.btn--sm{padding:9px 16px;min-height:38px;font-size:var(--t-sm);gap:7px;white-space:nowrap}
/* زر الشراء في الترويسة لا يلتف أبداً — التفافه يخلي السعر يُقرأ غلط. */
.site-head .btn{white-space:nowrap;flex:none}
.head-links{flex-wrap:nowrap;min-width:0}
@media (max-width:389px){
  .site-head .btn--sm{padding:9px 12px;font-size:13px}
  .site-head__in{gap:var(--s2)}
}
.btn--sm svg{width:16px;height:16px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.btn-row{display:flex;flex-direction:column;gap:var(--s2)}
@media (min-width:560px){ .btn-row{flex-direction:row;flex-wrap:wrap;align-items:center} }
.center .btn-row{justify-content:center}

/* ---------- 6. البطاقة ---------- */
.card{
  background:linear-gradient(168deg,var(--surface) 0%,#0C0907 78%);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s4);
  position:relative;
}
/* الشعرة الذهبية في أعلى البطاقة */
.card::before{
  content:"";position:absolute;inset-inline:18px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair),transparent);
}
.card--plain::before{display:none}
.card > * + *{margin-top:var(--s2)}
.card h3{color:var(--cream)}
.card p{color:var(--text-2);max-width:none}
.card__ic{
  width:42px;height:42px;border-radius:12px;flex:none;
  display:grid;place-items:center;color:var(--gold);
  background:rgba(227,169,74,.07);border:1px solid var(--hair-soft);
  margin-bottom:var(--s1);
}
.card__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.card-grid{display:grid;gap:var(--s3)}
@media (min-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);gap:var(--s4)} .card-grid--3{grid-template-columns:repeat(3,1fr)} }
/* عناصر صغيرة جدًا (شارات، مزايا بسطر) تُسمح بعمودين مبكرًا */
.grid-tight{display:grid;gap:var(--s2)}
@media (min-width:560px){ .grid-tight{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .grid-tight{grid-template-columns:repeat(4,1fr)} }

/* ---------- 7. بطاقة الخطوة المرقّمة ---------- */
.steps{display:grid;gap:var(--s3)}
/* على الجوال: الرقم بجانب العنوان، والنصّ بعرض البطاقة كاملًا.
   على الشاشة العريضة: النصّ يزيح تحت العنوان ليصطف الرقم وحده. */
.step{
  display:grid;grid-template-columns:auto 1fr;gap:0 13px;align-items:center;
  background:linear-gradient(168deg,var(--surface) 0%,#0C0907 78%);
  border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);
}
.step__n{
  grid-column:1;grid-row:1;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-display);font-size:17px;font-weight:500;line-height:1;
  color:var(--gold-light);
  background:radial-gradient(circle at 50% 28%,rgba(240,180,90,.22),rgba(10,8,6,.9) 72%);
  border:1px solid var(--hair);
}
.step__title{
  grid-column:2;grid-row:1;
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:500;color:var(--cream);line-height:1.45;
}
.step__body{grid-column:1 / -1;color:var(--text-2);margin-top:var(--s3)}
.step__body p{max-width:none}
.step__body > * + *{margin-top:var(--s2)}
.step__cost{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--s2);
  font-size:var(--t-sm);font-weight:500;color:var(--gold);
}
.step[data-done="1"] .step__n{color:#160E03;background:linear-gradient(170deg,var(--gold-light),var(--gold));border-color:transparent}
@media (min-width:900px){
  .step{padding:var(--s5);gap:0 18px;align-items:start}
  .step__n{width:42px;height:42px;font-size:18px}
  .step__title{align-self:center;min-height:42px;display:flex;align-items:center}
  .step__body{grid-column:2;margin-top:var(--s2)}
}

/* ---------- 8. بطاقة السعر ---------- */
.price{
  background:linear-gradient(168deg,#1B140C 0%,#0A0806 80%);
  border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);
  box-shadow:var(--shadow);
  text-align:center;position:relative;overflow:hidden;
}
.price::after{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
}
.price__amount{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:300;line-height:1;
  margin-block:var(--s2) var(--s1);
}
.price__amount b{
  font-size:clamp(54px,14vw,86px);font-weight:300;
  background:linear-gradient(180deg,#FFF4DC 12%,#F1C97A 58%,#B9782A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price__cur{font-size:clamp(17px,3.4vw,22px);font-weight:400;color:var(--gold)}
.price__note{color:var(--text-2);font-size:var(--t-sm);max-width:44ch;margin-inline:auto}
.price__list{display:grid;gap:var(--s2);margin-block:var(--s4);text-align:start}
.price__list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:var(--t-sm);line-height:1.7}
.price__list li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:5px;border-radius:50%;
  background:var(--tick-svg) center/13px no-repeat,rgba(227,169,74,.12);
  border:1px solid var(--hair-soft);
}
@media (min-width:900px){ .price{padding:var(--s6) var(--s5)} }

/* ---------- 9. الأسئلة (details/summary — تعمل بلا جافاسكربت) ---------- */
.faq{display:grid;gap:var(--s2)}
.faq__item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.faq__item[open]{border-color:var(--hair)}
.faq__q{
  display:flex;align-items:flex-start;gap:12px;
  padding:var(--s3) var(--s4);cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:var(--t-body);font-weight:500;color:var(--cream);
  line-height:1.65;
}
.faq__q::-webkit-details-marker{display:none}
/* حدّان ماديّان لا منطقيّان: المنطقيّان ينقلبان مع RTL فيصير السهم جانبيًا */
.faq__q::after{
  content:"";flex:none;width:10px;height:10px;margin-top:7px;margin-inline-start:auto;
  border-right:1.8px solid var(--gold);border-bottom:1.8px solid var(--gold);
  transform:rotate(45deg);transform-origin:60% 60%;transition:transform .2s ease;
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg)}
.faq__q:hover{background:rgba(227,169,74,.04)}
.faq__a{padding:0 var(--s4) var(--s4);color:var(--text-2)}
.faq__a p{max-width:none}
.faq__a > * + *{margin-top:var(--s2)}

/* ---------- 10. الشارة والفاصل ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:500;line-height:1.7;
  color:var(--text-2);background:rgba(227,169,74,.06);border:1px solid var(--hair-soft);
  white-space:nowrap;
}
.pill--gold{color:var(--gold-light);background:rgba(227,169,74,.12);border-color:var(--hair)}
.pill--warn{color:#F2B080;background:rgba(232,112,58,.10);border-color:rgba(232,112,58,.3)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;margin-inline-end:2px}
.pill-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* فاصل بصري بدل «·» — النقطة النصية تُقرأ صفراً عربياً إذا جاورت رقماً. */
.sep{
  display:inline-block;vertical-align:middle;
  width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.5;
  margin-inline:.62em;
}
.btn .sep{opacity:.65}
/* داخل حاوية flex لا يصير الفاصل عنصراً مستقلاً يكسر السطر. */
.sep{flex:none}
.eyebrow > span,.price__list li > span{display:inline}


.rule{
  border:0;height:1px;margin-block:var(--s5);
  background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);
}
.rule--gold{background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--hair) 82%,transparent)}

/* ---------- 11. ملاحظة صريحة (السعر، التكلفة، تحذير) ---------- */
.note{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(227,169,74,.05);border:1px solid var(--hair-soft);
  border-inline-start:2px solid var(--gold);
  border-radius:var(--r-sm);padding:var(--s3) var(--s3);
  color:var(--text-2);font-size:var(--t-sm);line-height:1.75;
}
.note p{max-width:none}
.note--warn{background:rgba(232,112,58,.06);border-color:rgba(232,112,58,.24);border-inline-start-color:var(--danger)}
.note__ic{flex:none;width:19px;height:19px;margin-top:4px;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.note--warn .note__ic{color:var(--danger)}
.note--gold{
  background:rgba(227,169,74,.10);border-color:var(--hair);
  border-inline-start-width:3px;color:var(--text);
  font-size:var(--t-body);align-items:center;
}
.note--gold b{color:var(--gold-light);font-weight:600}
.note--gold .note__ic{width:24px;height:24px;margin-top:0}
/* عنوان صغير يفصل «حالة الجوال» عن «حالة شاشة السيارة» */
.branch-label{
  display:block;margin-top:var(--s5);margin-bottom:var(--s2);
  color:var(--text-2);font-size:var(--t-sm);font-weight:500;
}

/* ---------- 12. شريط «الخطوة الجاية» ---------- */
.nextbar{
  display:flex;flex-direction:column;gap:var(--s3);
  background:linear-gradient(168deg,#1B140C 0%,#0A0806 80%);
  border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s4);margin-block:var(--s5);
  box-shadow:var(--shadow);
}
.nextbar__k{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;
  color:var(--gold);line-height:1;
}
.nextbar__t{
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:500;
  color:var(--cream);line-height:1.5;margin-top:var(--s1);
}
.nextbar__sub{color:var(--text-2);font-size:var(--t-sm);margin-top:4px}
.nextbar .btn{flex:none}
@media (min-width:900px){
  .nextbar{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5)}
}

/* ---------- 13. النماذج (لتنسيق ما تُخرجه ملفات PHP) ---------- */
.field{display:block;margin-bottom:var(--s3)}
.label{display:block;font-size:var(--t-sm);font-weight:500;color:var(--text);margin-bottom:7px}
.input,input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="password"],input[type="search"],select,textarea{
  width:100%;font-family:var(--f-ui);font-size:16px; /* ١٦px يمنع تكبير iOS عند التركيز */
  color:var(--text);background:#0C0907;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;min-height:50px;line-height:1.6;
  transition:border-color .18s,box-shadow .18s;
}
textarea{min-height:110px;resize:vertical}
.input::placeholder,input::placeholder,textarea::placeholder{color:#7A6E58;opacity:1}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,169,74,.16);
}
.input[dir="ltr"],.input--code{direction:ltr;text-align:center;font-family:var(--f-mono);letter-spacing:.14em}
.hint{font-size:var(--t-xs);color:var(--text-2);margin-top:6px;line-height:1.7}
.msg{border-radius:var(--r-sm);padding:12px 15px;font-size:var(--t-sm);line-height:1.75;margin-bottom:var(--s3)}
.msg--err{color:#F5B79A;background:rgba(232,112,58,.10);border:1px solid rgba(232,112,58,.34)}
.msg--ok{color:#C6E6AE;background:rgba(143,203,106,.09);border:1px solid rgba(143,203,106,.30)}

/* رمز التفعيل ومفتاح الذكاء */
.code{
  display:block;font-family:var(--f-mono);direction:ltr;unicode-bidi:isolate;
  font-size:clamp(20px,5.4vw,30px);letter-spacing:.18em;font-weight:600;
  color:var(--gold-light);background:#0C0907;
  border:1px dashed var(--hair);border-radius:var(--r-sm);
  padding:16px 12px;text-align:center;word-break:break-all;
}
.mono{font-family:var(--f-mono);direction:ltr;unicode-bidi:isolate;font-size:.92em;color:var(--cream)}

/* حاوية QR — أبيض إجباري حتى تقرأه الكاميرا */
.qr{
  display:grid;place-items:center;background:#fff;
  padding:12px;border-radius:12px;width:max-content;margin-inline:auto;
}
.qr img,.qr canvas,.qr svg{display:block}

/* ---------- 14. حدقة الفهد ---------- */
.iris-mark{
  display:block;margin-inline:auto;flex:none;
  width:clamp(210px,64vw,290px);aspect-ratio:1;
  border-radius:50%;
}
@media (min-width:900px){ .iris-mark{width:clamp(270px,25vw,340px)} }
/* بلا WebGL أو على جهاز ضعيف: iris.js يضيف .no-iris فتظهر الصورة الجاهزة.
   الوهج هنا بـ CSS حتى لا يُقصّ عند حدود الصندوق، ولا يتكرر مع وهج iris.js الحي. */
.iris-mark.no-iris{
  background:url("iris-still.png") center/100% no-repeat;
  box-shadow:0 0 70px 14px var(--glow);
}
.iris-mark .iris-still{width:100%;height:100%;border-radius:50%;box-shadow:0 0 70px 14px var(--glow)}

/* ---------- 15. الواجهة العلوية للصفحة الرئيسية ---------- */
.hero{padding-block:var(--s5) var(--s6);overflow-x:clip}
/* الوهج البنّي الدافئ خلف الحدقة — نفس بلوم شاشة التطبيق في السيارة. */
.hero__eye{position:relative;display:grid;place-items:center;isolation:isolate}
.hero__eye::before{
  content:"";position:absolute;z-index:-1;
  width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(150,84,28,.30) 0%,rgba(96,52,18,.17) 34%,rgba(52,28,10,.07) 58%,transparent 74%);
  filter:blur(6px);
}
.hero__in{display:grid;gap:var(--s5);text-align:center}
.hero__copy > * + *{margin-top:var(--s3)}
.hero h1{margin-inline:auto;max-width:19ch}
.hero .lead{margin-inline:auto}
.hero .btn-row{margin-top:var(--s5)}
.hero__price{font-size:var(--t-sm);color:var(--text-2)}
.hero .pill-row{justify-content:center}
@media (min-width:900px){
  .hero{padding-block:var(--s6) var(--s7)}
  .hero__in{grid-template-columns:1fr auto;align-items:center;gap:var(--s7);text-align:start}
  .hero__copy{grid-column:1;grid-row:1}
  .hero__eye{grid-column:2;grid-row:1}
  .hero h1,.hero .lead{margin-inline:0}
  .hero .btn-row,.hero .pill-row{justify-content:flex-start}
}

/* ---------- 16. التذييل ---------- */
.site-foot{
  border-top:1px solid var(--line);
  margin-top:var(--sect);
  padding-block:var(--s5) var(--s6);
  background:rgba(12,9,7,.6);
}
.site-foot__in{display:grid;gap:var(--s4)}
.site-foot .brand{margin-bottom:var(--s2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.foot-nav a{font-size:var(--t-sm);color:var(--text-2)}
.foot-nav a:hover{color:var(--gold)}
.foot-note{font-size:var(--t-xs);color:#8A7C66;line-height:1.85;max-width:62ch}
@media (min-width:900px){ .site-foot__in{grid-template-columns:1fr auto;align-items:start;gap:var(--s6)} }

/* ---------- 17. أدوات ---------- */
.flow > * + *{margin-top:var(--s3)}
.flow-lg > * + *{margin-top:var(--s4)}
.mt-0{margin-top:0}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}
.nowrap{white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* رموز مرسومة داخل CSS — لا ملفات ولا مضيفين خارجيين */
:root{
  --mark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="42%25" cy="36%25" r="72%25"><stop offset=".30" stop-color="%23070606"/><stop offset=".345" stop-color="%23C0501C"/><stop offset=".47" stop-color="%23F0A73A"/><stop offset=".74" stop-color="%23E3A94A"/><stop offset=".96" stop-color="%23553A12"/></radialGradient></defs><circle cx="50" cy="50" r="46" fill="%230B0807"/><circle cx="50" cy="50" r="46" fill="none" stroke="%23E3A94A" stroke-width="3.4"/><path d="M65.5 23.2 69 17.1M76.8 34.5 82.9 31M81 50H88M76.8 65.5 82.9 69M65.5 76.8 69 82.9M50 81V88M34.5 76.8 31 82.9M23.2 65.5 17.1 69M19 50H12M23.2 34.5 17.1 31M34.5 23.2 31 17.1" stroke="%23F8D894" stroke-width="2.6" stroke-linecap="round" opacity=".85"/><path d="M46.6 14.5h6.8L50 21.2Z" fill="%23FFF3D4"/><circle cx="50" cy="50" r="27" fill="url(%23g)"/><circle cx="50" cy="50" r="11.4" fill="%23040303"/></svg>');
  --tick-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E3A94A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5 10 17.5 19 7"/></svg>');
}

/* ---------- 18. الحركة والطباعة وإتاحة الوصول ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}
@media (prefers-contrast:more){
  :root{--text-2:#D6CAB4;--line:#5A4A30;--hair:rgba(248,216,148,.6)}
}

@media print{
  :root{--text:#111;--text-2:#333;--gold:#7A5410;--cream:#111}
  html,body{background:#fff!important;color:#111!important;background-image:none!important}
  body{font-size:11pt;line-height:1.6}
  .site-head,.site-foot,.nextbar,.iris-mark,.skip,.btn{display:none!important}
  .card,.step,.price,.faq__item,.note{
    background:#fff!important;border:1px solid #bbb!important;box-shadow:none!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .card::before,.price::after{display:none}
  .price__amount b{color:#111!important;-webkit-text-fill-color:#111!important;background:none!important}
  .faq__item{border:0!important;border-bottom:1px solid #ccc!important;border-radius:0!important}
  .faq__q::after{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .sect{padding-block:10pt}
}

/* ---------- 19. صفحات الشرح الطويلة (الدليل، الخصوصية، الشروط، النقل) ----------
   أضافها الوكيل B3. مكوّنان فقط، بالرموز نفسها ولا شيء خارجها:
   (أ) `.list` — الأساس يلغي علامات القوائم (ul{list-style:none})، فبدون هذا
       تصير بنود الخصوصية والشروط أسطرًا بلا ترتيب ولا تمييز.
   (ب) `.toc` + `.guide` — الفهرس اللاصق الذي يطلبه الدليل.
   ========================================================================== */

/* (أ) قوائم النصّ
   العلامة موضوعة `absolute` لا `flex`: حاوية فليكس تحوّل كل عنصر ابن — حتى
   `<b>` و`<span>` — إلى عنصر فليكس مستقل، فتتفكك الجملة إلى كتل متباعدة.
   و`overflow-wrap:anywhere` يمنع أطول رمز لاتيني (sk-or-…،
   leopard-assistant.apk) من فرض عرض أدنى يتجاوز شاشة الجوال. */
.list{display:grid;gap:var(--s2)}
.list li{
  position:relative;padding-inline-start:23px;
  color:var(--text-2);line-height:1.8;overflow-wrap:anywhere;
}
.list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.74em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.8;
}
.list b{color:var(--cream)}
.list--tick li{padding-inline-start:28px}
.list--tick li::before{
  width:17px;height:17px;top:.36em;opacity:1;
  background:var(--tick-svg) center/13px no-repeat,rgba(227,169,74,.12);
  border:1px solid var(--hair-soft);
}
.list--num{counter-reset:ln}
.list--num li{padding-inline-start:37px}
.list--num li::before{
  counter-increment:ln;content:counter(ln,arabic-indic);
  width:25px;height:25px;top:.1em;opacity:1;
  display:grid;place-items:center;line-height:1;
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:500;
  color:var(--gold-light);background:rgba(227,169,74,.10);
  border:1px solid var(--hair-soft);
}

/* (ب) تخطيط صفحة بفهرس جانبي */
/* العمود صريح `minmax(0,1fr)` لا ضمني: العمود الضمني `auto` يتمدد مع
   أعرض محتوى داخله، فيخرج الفهرس خارج الشاشة ويُنشئ تمريرًا جانبيًا. */
.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
@media (min-width:900px){ .guide{grid-template-columns:246px minmax(0,1fr);gap:var(--s6)} }

/* الفهرس — عمودان على الجوال، ولاصق تحت الترويسة على الشاشة العريضة */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.toc__h{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:6px 8px;line-height:1.6;
  font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;color:var(--gold);
}
.toc__h::-webkit-details-marker{display:none}
/* حدّان ماديّان لا منطقيّان — المنطقيّان ينقلبان مع RTL */
.toc__h::after{
  content:"";flex:none;width:9px;height:9px;margin-inline-start:auto;
  border-right:1.8px solid var(--gold);border-bottom:1.8px solid var(--gold);
  transform:rotate(-135deg);transform-origin:60% 60%;transition:transform .2s ease;
}
.toc:not([open]) .toc__h::after{transform:rotate(45deg)}
.toc__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:var(--s2)}
.toc__list a{
  display:block;padding:9px 10px;border-radius:8px;
  font-size:var(--t-sm);color:var(--text-2);line-height:1.6;
}
.toc__list a:hover{color:var(--cream);background:rgba(227,169,74,.06)}
@media (min-width:900px){
  .toc{
    position:sticky;top:calc(var(--head-h) + 20px);
    max-height:calc(100vh - var(--head-h) - 40px);overflow-y:auto;
  }
  .toc__list{grid-template-columns:minmax(0,1fr)}
}
@media print{ .toc,.guide__nav{display:none!important} .guide{display:block} }

/* ---------- 20. مسار الدفع والإقران (buy · callback · m) ----------
   أضافها الوكيل B2. ثلاثة أشياء فقط لا يغطّيها ما سبق، وكلها بالرموز نفسها:
   (أ) `.msg:empty` — الجافاسكربت في m.php يكتب النص فقط (textContent)، فبدون
       هذه القاعدة يظهر صندوق خطأ أحمر فارغ من لحظة فتح الصفحة.
   (ب) `.paste-row` — مربع المفتاح وزر «لصق» جنبه، بارتفاع واحد.
   (ج) `.kstat` — سطر حالة فحص المفتاح. المعنى باللون والنقطة، بلا رموز ولا إيموجي.
   ========================================================================== */

/* (أ) رسالة لا تظهر وهي فارغة */
.msg:empty{display:none}

/* (ب) صفّ اللصق */
.paste-row{display:flex;gap:var(--s2);align-items:stretch}
.paste-row textarea,.paste-row .input{flex:1;min-width:0;min-height:56px;resize:vertical}
/* السقف يمنع الزر من التحوّل إلى بيضاوي لو كبّر السائق المربع */
.paste-row .btn{flex:none;padding-inline:18px;max-height:96px}

/* (ج) حالة فحص المفتاح */
.kstat{
  position:relative;display:block;
  margin-top:var(--s2);padding-inline-start:16px;
  min-height:1.5em;font-size:var(--t-sm);line-height:1.7;color:var(--text-2);
}
.kstat::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0;
}
.kstat.ok::before,.kstat.bad::before,.kstat.wait::before{opacity:1}
.kstat.ok{color:var(--ok)}
.kstat.bad{color:#F5B79A}
.kstat.wait{color:var(--text-2)}

/* ---------- 21. شاشة السيارة: عرضي وقصير (1920×1080) ----------
   الشاشة عريضة بس ارتفاعها قليل، فالبطل كان ياكل الشاشة كاملة ويدفع
   الزر الأساسي تحت الطية. هنا نضغط الفراغات ونصغّر العين شوي فقط. */
@media (orientation:landscape) and (max-height:1150px) and (min-width:1100px){
  .hero{padding-block:var(--s3) var(--s4)}
  .hero__in{gap:var(--s5)}
  .hero .btn-row{margin-top:var(--s4)}
  .iris-mark{width:clamp(200px,16vw,248px)}
  .sect{padding-block:calc(var(--sect) * .62)}
  .sect--tight{padding-block:calc(var(--sect) * .42)}
  /* بطاقة السعر: الزر لازم يوصل الطية على شاشة السيارة. */
  .price{padding:var(--s4) var(--s4)}
  .price__amount{margin-block:var(--s2)}
  .price__list{margin-block:var(--s3);gap:4px}
  .price__list li{line-height:1.55}
  .price .note{padding:var(--s2) var(--s3)}
}