/* ==========================================================
   عُمق OMQ 3D — نظام التصميم
   ========================================================== */

:root{
  /* اللوحة */
  --ink:#0A0A0B;
  --ink-2:#111113;
  --surface:#161619;
  --surface-2:#1D1D21;
  --line:#26262B;
  --line-2:#33333A;

  /* الأصفر الصناعي — درجة اللون 52°، واحمرّه أعلى من أخضره دائماً */
  --signal-900:#302B08;  /* تعبئة خافتة صلبة — خلفية فقط */
  --signal-800:#5C520F;  /* تدرّجات وفواصل زخرفية — خلفية فقط */
  --signal-700:#BEA60E;  /* حالة الضغط */
  --signal-600:#DABF10;  /* حالة المرور */
  --signal-500:#F5D713;  /* اللون المميّز */
  --signal-400:#F9E24E;  /* نص وأيقونات عند المرور، والأرقام */
  --signal-glow:rgba(245,215,19,.21);  /* توهّج الهيرو فقط — ذروته ١٫٥:١ فوق الحبر */
  --signal-edge:rgba(245,215,19,.32);  /* حدّ الشارة */
  --on-accent:#0A0A0B;   /* نص داكن فوق اللون المميّز */
  --wa-green:#25D366;    /* لون واتساب الرسمي — لا يُعاد تلوينه */

  --text:#EDEDEF;
  --muted:#9A9AA2;
  --muted-2:#858590;

  /* الخطوط */
  --f-display:'Readex Pro', system-ui, sans-serif;
  --f-body:'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* العربية تسقط إلى الخط العربي بدل خط النظام أحادي المسافة */
  --f-mono:'IBM Plex Mono','IBM Plex Sans Arabic', ui-monospace, monospace;

  /* المقاييس */
  --wrap:1120px;
  --gap:clamp(56px, 9vw, 104px);
  --r:14px;
  --r-lg:20px;

  /* الحركة — منحنى واحد ومقياس مدد واحد */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --dur-fast:160ms;    /* استجابة الضغط */
  --dur-base:250ms;    /* فتح وإغلاق */
  --dur-reveal:400ms;  /* الظهور عند التمرير */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

/* عزل النصوص اللاتينية داخل العربي */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* أداة سطرية: على خلية جدول يكسر inline-block تخطيط الجدول،
   فتخرج الخلية من الصف ويتقطّع الخط الأفقي. العزل يبقى، والعرض يعود. */
td.ltr,th.ltr{display:table-cell}

/* تخطي للمحتوى */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:999;
  background:var(--signal-500);color:var(--on-accent);padding:10px 18px;border-radius:0 0 8px 0;
}
.skip:focus{inset-inline-start:0}

:focus-visible{outline:2px solid var(--signal-500);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

/* ============ الهيدر ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:16px}
.logo{
  display:flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;color:var(--text);flex-shrink:0;line-height:1;
}
.logo-ar{
  font-family:var(--f-display);font-weight:600;font-size:33px;letter-spacing:-.01em;
}
.logo-ar b{color:var(--signal-500);font-weight:600}
.logo-lt{
  font-family:var(--f-display);font-size:11px;letter-spacing:5px;
  color:var(--muted-2);margin-top:5px;padding-top:5px;
  border-top:2px solid var(--signal-500);
  direction:ltr;unicode-bidi:isolate;
}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  text-decoration:none;color:var(--muted);font-size:14.5px;
  padding:8px 13px;border-radius:8px;
  transition:color var(--dur-fast) ease,background var(--dur-fast) ease;
  white-space:nowrap;
}
/* مؤشر الصفحة الحالية لا يُقيَّد بالمرور — يجب أن يظهر باللمس أيضاً */
.nav-links a[aria-current="page"]{color:var(--text);background:var(--surface)}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--text);background:var(--surface)}
}
.nav-cta{
  background:var(--signal-500)!important;color:var(--on-accent)!important;font-weight:500;
  padding:9px 18px!important;
  transition:background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{background:var(--signal-600)!important}
}
.nav-cta:active{background:var(--signal-700)!important;transform:scale(.97)}
.burger{
  display:none;background:none;border:1px solid var(--line);color:var(--text);
  width:42px;height:42px;border-radius:10px;cursor:pointer;font-size:19px;line-height:1;
}

/* ============ الهيرو ============ */
.hero{position:relative;padding:clamp(56px,9vw,104px) 0 var(--gap);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:0;
  width:760px;height:520px;margin-inline:auto;
  background:radial-gradient(ellipse at center,var(--signal-glow),transparent 68%);
  pointer-events:none;
  /* انسياب بطيء — إزاحة وشفافية فقط، كلاهما على المعالج الرسومي */
  animation:hero-drift 45s linear infinite alternate;
}
@keyframes hero-drift{
  from{transform:translate3d(-2.5%,-1%,0);opacity:.9}
  to{transform:translate3d(2.5%,1%,0);opacity:1}
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-size:12px;color:var(--signal-500);
  border:1px solid var(--signal-edge);border-radius:99px;padding:6px 15px;
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--signal-500);
}
h1{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(34px,6.2vw,60px);line-height:1.16;letter-spacing:-.02em;
}
h1 em{font-style:normal;color:var(--signal-500)}
h1{color:#fff}
.hero p.lead{
  color:var(--muted);font-size:clamp(16px,2.2vw,18px);
  margin-top:20px;max-width:47ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============ الأزرار ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:11px;text-decoration:none;
  font-size:15px;font-weight:500;border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.btn-primary{background:var(--signal-500);color:var(--on-accent)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover{background:var(--signal-600)}
  .btn-ghost:hover{border-color:var(--signal-500)}
}

/* استجابة الضغط — تعمل باللمس أيضاً، وهي التغذية الراجعة الوحيدة هناك */
.btn:active{transform:scale(.97)}
.btn-primary:active{background:var(--signal-700)}

/* ============ بطاقة المواصفات (العنصر المميّز) ============ */
.spec-card{
  background:linear-gradient(160deg,var(--surface) 0%,var(--ink-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;position:relative;overflow:hidden;
}
.spec-card::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--signal-500),transparent);
  opacity:.6;
}
.spec-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:15px;margin-bottom:17px;border-bottom:1px solid var(--line);
}
.spec-title{font-family:var(--f-display);font-size:13px;color:var(--text)}
.spec-tag{
  font-family:var(--f-mono);font-size:10.5px;color:var(--signal-500);
  background:var(--signal-900);padding:4px 9px;border-radius:6px;
}
.spec-rows{display:grid;gap:11px}
.spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.spec-key{font-size:13.5px;color:var(--muted)}
.spec-dots{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.spec-val{font-family:var(--f-mono);font-size:15px;color:var(--signal-400);font-weight:500}
.spec-foot{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted-2);
}

/* ============ الأقسام ============ */
section{padding-block:var(--gap)}
.sec-head{max-width:62ch;margin-bottom:clamp(30px,4.5vw,48px)}
/* رفع الأولوية حتى لا تهزمه قاعدة .sec-head p */
.sec-head .sec-label{
  font-family:var(--f-display);font-size:12px;color:var(--signal-500);
  margin-block:0 12px;
}
h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(25px,4.2vw,38px);line-height:1.28;letter-spacing:-.01em;
}
h3{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.4}
.sec-head p{color:var(--muted);margin-top:14px;font-size:16.5px}

/* ============ شريط الطابعات ============ */
.printers{border-block:1px solid var(--line);background:var(--ink-2)}
.printers .wrap{padding-block:24px}
.printers + section{padding-block-start:clamp(44px,6.5vw,72px)}
.printers-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.printers-label{font-size:13px;color:var(--muted-2);white-space:nowrap}
.printer-chip{
  font-family:var(--f-mono);font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:7px;padding:5px 11px;
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine){
  .printer-chip:hover{border-color:var(--signal-500);color:var(--text)}
}

/* ============ الشبكات ============ */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;
  transition:border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
  display:block;text-decoration:none;color:inherit;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--line-2);transform:translateY(-3px)}
}
.card .ico{
  width:46px;height:46px;border-radius:12px;
  background:var(--signal-900);color:var(--signal-500);
  display:grid;place-items:center;margin-bottom:17px;
}
.card .ico svg{width:23px;height:23px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--muted);font-size:14.8px;margin-top:10px}
.card .more{
  display:inline-block;margin-top:16px;font-size:13.5px;color:var(--signal-500);
}

/* ============ خطوات كيف نشتغل ============ */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(4,1fr);
}
.step{background:var(--ink-2);padding:26px 22px;counter-increment:s}
.step::before{
  content:"0" counter(s);
  font-family:var(--f-mono);font-size:12px;color:var(--signal-500);
  display:block;margin-bottom:13px;
}
.step h3{font-size:16.5px}
.step p{color:var(--muted);font-size:14px;margin-top:8px}

/* ============ الصيغ ============ */
.formats{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.fmt{
  font-family:var(--f-mono);font-size:12.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);
  border-radius:7px;padding:6px 12px;
}

/* ============ رحلة المنتج ============ */
/* الأرقام هي اللفتة الكبيرة للّون المميّز — أكبر ظهور له في الموقع */
.jrny{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  margin-block-start:clamp(26px,3.6vw,38px);
}
/* الخط الواصل بـ--line يقيس 1.31:1 على الأرضية — يغيب فعلياً على الجوال.
   و--line-2 هو رمز «الحدود المؤكَّدة» في DESIGN.md عند 1.58:1، فهو
   الترقية الصحيحة هنا بلا رمز جديد وبلا صرف من ميزانية اللون (§11). */
.jrny-step{
  border-block-start:1px solid var(--line-2);
  padding-block-start:clamp(14px,2vw,20px);
  padding-inline:0 clamp(16px,2.4vw,28px);
}
.jrny-num{
  display:block;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(46px,7.4vw,80px);line-height:.95;letter-spacing:-.03em;
  color:var(--signal-500);
}
.jrny-step h3{font-size:17px;margin-block-start:10px}
.jrny-step p{color:var(--muted);font-size:14.2px;margin-block-start:6px;max-width:26ch}
.jrny-proof{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-block-start:clamp(30px,4.2vw,48px);
}
.jrny-proof img{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);
}
.jrny-proof figcaption{grid-column:1/-1;color:var(--muted-2);font-size:13px}
/* الشريط صار آخر ما قبل الدعوة بعد إزالة صورة الإثبات، فالمسافة
   وُسّعت حتى لا تُقرأ الدعوة امتداداً للخطوة الرابعة */
.jrny-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin-block-start:clamp(34px,5vw,56px);
}
.jrny-foot p{color:var(--text);font-size:16.5px;max-width:46ch}
@media (max-width:860px){.jrny{grid-template-columns:repeat(2,1fr);row-gap:26px}}
@media (max-width:560px){.jrny-proof{grid-template-columns:1fr}}

/* ============ صور الدورة الثانية ============ */
/* عناصر داخل الأقسام، لا خلفيات تحت النص — والسبب مقيس لا ذوقي:
   حجاب فوق صورة الهيرو يحتاج شفافية .80 لمجرّد أن يُبقي .lead
   (--muted، وهو أضعف نص في الهيرو) عند 5:1، وعندها تكون الصورة قد
   اختفت خلف الحجاب. وبلا نص فوقها: لا حجاب، ولا خسارة تباين، ولا
   تفتيح للأرضية. */
.shot{
  display:block;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);
}
img.shot,.shot img{display:block;width:100%;height:auto}
.hero-shot{margin-block-start:clamp(34px,5vw,56px)}
.shot-band{margin-block:clamp(22px,3vw,32px) 0}
.printers .printers-shot{padding-block:24px 0}
.shot-inset{max-width:560px;margin-inline:auto}
.shot-lead{margin-block-end:clamp(22px,3vw,32px)}
.card .shot{margin-block-start:16px;border-radius:var(--r)}

/* الهيرو على الجوال: الأفقية نفسها مقصوصة، لا قصّة رأسية — تلك سُحبت
   لأنها كانت تكبّر 1.77x من 42% من الكادر (DESIGN.md §15).
   4:3 تُبقي 75% من عرض الكادر بلا أي تكبير: نحو 1440 بكسل مصدري داخل
   صندوق عرضه ~335، فتبقى حادّة حتى عند DPR 3. */
@media (max-width:719px){
  .hero-shot{aspect-ratio:4/3}
  .hero-shot img{height:100%;object-fit:cover}
}

/* ============ شريط الموثوقية ============ */
.trust{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
}
.trust-txt h3{font-size:17px}
.trust-txt p{color:var(--muted);font-size:14.5px;margin-top:7px}
.trust-code{
  font-family:var(--f-mono);font-size:13px;color:var(--text);
  border:1px solid var(--line-2);border-radius:9px;padding:11px 17px;
  white-space:nowrap;
}
.trust-code span{color:var(--muted-2);font-size:11px;display:block;margin-bottom:3px}

/* ============ CTA ============ */
.cta-band{
  background:linear-gradient(150deg,var(--surface) 0%,var(--ink-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(34px,5vw,56px);text-align:center;
}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band p{color:var(--muted);margin-top:14px;max-width:52ch;margin-inline:auto}
.cta-band .hero-actions{justify-content:center;margin-top:28px}

/* ============ الفوتر ============ */
.site-footer{
  border-top:1px solid var(--line);background:var(--ink-2);
  padding-block:48px 30px;margin-top:var(--gap);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot-brand .logo{margin-bottom:16px}
.foot-brand .logo-ar{font-size:36px}
.foot-brand p{color:var(--muted);font-size:14.3px;max-width:34ch}
.foot-col h4{
  font-family:var(--f-display);font-size:13.5px;margin-bottom:14px;color:var(--text);
}
.foot-col a,.foot-col address{
  display:block;color:var(--muted);text-decoration:none;font-size:14.3px;
  font-style:normal;margin-bottom:9px;transition:color var(--dur-fast) ease;
}
/* عمود التواصل كتلة عنوان واحدة، لا جزر متساوية كأعمدة الروابط.
   يُستهدف بالروابط التالية لـ<address> — وهو العمود الوحيد الذي يحويه —
   فلا صنف جديد في الماركب ولا :has()، وأعمدة القوائم تبقى بإيقاعها. */
.foot-col address{line-height:1.55}
.foot-col address,.foot-col address ~ a{margin-block-end:4px}
.foot-col address ~ a:last-child{margin-block-end:0}
@media (max-width:720px){
  /* الفوتر يصير عموداً واحداً فينتفي تنافس الأعمدة، ويعود الهدف اللمسي أولى */
  .foot-col address,.foot-col address ~ a{margin-block-end:10px}
}
@media (hover:hover) and (pointer:fine){
  .foot-col a:hover{color:var(--signal-500)}
}
.foot-bottom{
  border-top:1px solid var(--line);margin-top:34px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:var(--muted-2);font-size:12.5px;
}
/* إفصاح: أي مشهد أجهزة في الموقع منتج رقمياً، وصور المعرض حقيقية */
.foot-note{
  margin-block-start:12px;color:var(--muted-2);font-size:12.5px;max-width:78ch;
}

/* ============ زر واتساب عائم ============ */
.wa-float{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:var(--wa-green);display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
  transition:transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .wa-float:hover{transform:scale(1.07)}
}
/* الضغط يصغّر فقط — اللون أخضر واتساب المقفل ولا يُعاد تلوينه */
.wa-float:active{transform:scale(.97)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ============ الحركة ============ */
.reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
.reveal.in{opacity:1;transform:none}

/* تدرّج ظهور بطاقات الخدمات — ٥٠ms بين الواحدة والأخرى.
   على .grid فيشمل grid-3 وgrid-2 معاً */
.grid > .reveal:nth-child(2){transition-delay:50ms}
.grid > .reveal:nth-child(3){transition-delay:100ms}
.grid > .reveal:nth-child(4){transition-delay:150ms}

/* ============ الاستجابة ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .burger{display:block}
  .nav-links{
    display:none;position:absolute;inset-inline:0;top:80px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:12px 20px 18px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px}
  .nav-cta{text-align:center;margin-top:6px}
  .grid-3,.grid-2,.steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .trust{flex-direction:column;align-items:flex-start}
}


/* ============ جدول الأعطال ============ */
.tbl-wrap{
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--ink-2);
}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:660px}
thead th{
  background:var(--surface);text-align:start;
  font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--text);
  padding:15px 18px;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{
  padding:15px 18px;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--muted);vertical-align:top;
}
tbody tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){
  tbody tr:hover td{background:rgba(255,255,255,.018)}
}
td.fault{color:var(--text);font-weight:500;white-space:nowrap}
td.dur{font-family:var(--f-mono);font-size:13px;color:var(--signal-400);white-space:nowrap}
.tbl-note{
  padding:14px 18px;background:var(--surface);font-size:13px;color:var(--muted-2);
  border-top:1px solid var(--line);
}

/* ============ قائمة العلامات ============ */
.brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.brand{
  font-family:var(--f-mono);font-size:13px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:8px 14px;
}

/* ============ قائمة نقطية ============ */
.ticks{display:grid;gap:11px;margin-top:18px}
.ticks li{list-style:none;display:flex;gap:11px;color:var(--muted);font-size:15px}
.ticks li::before{
  content:"—";color:var(--signal-500);flex-shrink:0;font-family:var(--f-mono);
}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ============ الأسئلة الشائعة ============ */
.faq-groups{display:grid;gap:34px}
.faq-group h3{
  font-size:15px;color:var(--signal-500);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.faq-list{display:grid;gap:10px}
/* الأكورديون: الشبكة على <details> نفسه، فلا يحتاج الماركب غلافاً داخلياً */
details.qa{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-rows:auto 0fr;
  transition:grid-template-rows var(--dur-base) var(--ease-out),
             border-color var(--dur-fast) ease;
}
details.qa[open]{grid-template-rows:auto 1fr;border-color:var(--line-2)}
details.qa summary{
  cursor:pointer;list-style:none;padding:17px 20px;
  font-family:var(--f-display);font-size:16px;color:var(--text);
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"+";color:var(--signal-500);font-family:var(--f-mono);font-size:19px;
  line-height:1;flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-out);
}
/* علامة واحدة تدور ٤٥° فتصير ×، بدل تبديل المحتوى الذي لا يقبل الانتقال */
details.qa[open] summary::after{transform:rotate(45deg)}
details.qa .a{
  display:block;min-height:0;overflow:hidden;
  padding:0 20px 19px;color:var(--muted);font-size:15px;line-height:1.8;
}
details.qa .a a{color:var(--signal-500);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  details.qa summary:hover{color:var(--signal-400)}
  details.qa .a a:hover{text-decoration:underline}
}

/* ============ مبدّل اللغة ============ */
.lang{
  font-family:var(--f-mono);font-size:12px!important;
  border:1px solid var(--line);border-radius:8px;
  padding:7px 12px!important;color:var(--muted)!important;
}
@media (hover:hover) and (pointer:fine){
  .lang:hover{border-color:var(--signal-500);color:var(--text)!important;background:transparent!important}
}

/* ============ معرض الأعمال ============ */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .work:hover{border-color:var(--line-2);transform:translateY(-3px)}
}
.work img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.work-body{padding:18px 20px 20px}
.work-body h3{font-size:16px}
.work-body p{color:var(--muted);font-size:14px;margin-top:7px}
.work-specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.wspec{
  font-family:var(--f-body);font-size:11.5px;color:var(--signal-400);
  background:var(--signal-900);border-radius:6px;padding:4px 9px;
}
/* الرموز اللاتينية المعزولة تبقى بخط المونو */
.wspec.ltr,.wspec .ltr{font-family:var(--f-mono)}
@media (max-width:960px){.works{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.works{grid-template-columns:1fr}}

/* البطاقة كلها هدف نقر واحد — الرابط يمتد فوقها فيصدق تأثير المرور */
.work{position:relative}
.work-open{
  color:inherit;text-decoration:none;font:inherit;
  border-radius:2px;
}
.work-open::after{content:"";position:absolute;inset:0;z-index:1}
.work-open:focus-visible{outline:none}
.work-open:focus-visible::after{outline:2px solid var(--signal-500);outline-offset:-3px;border-radius:var(--r-lg)}

/* ============ نافذة عرض الأعمال ============ */
.lb{
  border:0;padding:0;background:transparent;color:var(--text);
  width:min(1080px,92vw);max-width:92vw;max-height:92vh;overflow:visible;
}
.lb::backdrop{background:rgba(10,10,11,.9)}
.lb-panel{
  position:relative;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.lb-img{
  display:block;width:100%;height:auto;max-height:58vh;
  object-fit:contain;background:var(--surface-2);
}
.lb-cap{display:grid;gap:13px;padding:20px 22px 22px}
.lb-title{font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.35}
.lb-specs{display:flex;flex-wrap:wrap;gap:7px}
.lb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.lb-count{font-family:var(--f-mono);font-size:12.5px;color:var(--muted-2)}
.lb-close,.lb-nav{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:rgba(10,10,11,.72);border:1px solid var(--line-2);color:var(--text);
  transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.lb-close{inset-block-start:10px;inset-inline-end:10px;font-size:20px;line-height:1}
.lb-nav{inset-block-start:calc(29vh - 21px)}
.lb-prev{inset-inline-start:10px}
.lb-next{inset-inline-end:10px}
.lb-nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* الشيفرون يشير دائماً نحو اتجاه القراءة الصحيح.
   لا خاصية منطقية تعكس أيقونة، فالانعكاس يتم بمحدّد الاتجاه لا بخاصية فيزيائية. */
.lb-next svg{transform:rotate(180deg)}
html[dir="rtl"] .lb-prev svg{transform:rotate(180deg)}
html[dir="rtl"] .lb-next svg{transform:none}
@media (hover:hover) and (pointer:fine){
  .lb-close:hover,.lb-nav:hover{background:var(--ink);border-color:var(--signal-500)}
}
.lb-close:active,.lb-nav:active{transform:scale(.97)}
@media (max-width:640px){
  .lb-nav{inset-block-start:auto;inset-block-end:calc(100% - 58vh + 10px)}
  .lb-foot .btn{width:100%;justify-content:center}
}

/* صور موضّحة داخل الصفحات (الصيانة والخامات) */
.fig-wide{
  margin-block:22px;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);
}
.fig-wide img{display:block;width:100%;height:auto}
.fig-wide figcaption{
  padding:11px 16px;font-size:13px;color:var(--muted);
  border-top:1px solid var(--line);
}
.fig-narrow{max-width:520px;margin-inline:auto}

/* ============ معادلة التسعير ============ */
.formula{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;
}
.f-item{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;text-align:center;flex:1;min-width:120px;
}
.f-item b{display:block;font-family:var(--f-display);font-size:14.5px;color:var(--text)}
.f-item span{font-size:12px;color:var(--muted-2)}
.f-op{font-family:var(--f-mono);font-size:19px;color:var(--signal-500);flex-shrink:0}

/* ============ بطاقات التواصل ============ */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.contact-grid .card{display:flex;gap:17px;align-items:flex-start}
.contact-grid .ico{margin-bottom:0;flex-shrink:0}
.contact-grid .card h3{font-size:16.5px}
.contact-grid .card p{margin-top:5px;font-size:14.3px}
.contact-grid .card .val{
  display:inline-block;margin-top:9px;font-family:var(--f-mono);
  font-size:14px;color:var(--signal-400);text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .contact-grid .card .val:hover{text-decoration:underline}
}
@media (max-width:720px){.contact-grid{grid-template-columns:1fr}}

/* ============ سطر الهوية ============ */
/* يسكن الفراغ بين آخر قسم والفوتر بدل أن يبقى فجوة */
.ident{
  color:var(--muted-2);font-size:13.5px;line-height:1.7;
  text-align:center;max-width:62ch;margin-inline:auto;
  padding-block:clamp(16px,2.4vw,24px);
}

/* ============ مسار التنقل ============ */
.crumbs{font-size:13px;color:var(--muted-2);margin-block-end:16px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs [aria-current]{color:var(--text)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--signal-500)}}

/* ============ بطاقات الأرقام ============ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 22px;
}
.stat b{
  display:block;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(26px,3.4vw,34px);line-height:1.1;color:var(--signal-500);
}
.stat span{display:block;color:var(--text);font-size:14px;margin-block-start:9px}
.stat em{
  display:block;font-style:normal;color:var(--muted-2);
  font-size:12.5px;line-height:1.6;margin-block-start:5px;
}

/* ============ نموذج الطلب ============ */
.ordr{display:grid;gap:clamp(22px,3vw,30px);max-width:760px}
.fld{display:grid;gap:9px}
/* أقوى من .fld فيغلب display:grid بلا !important */
.fld[hidden]{display:none}
.lbl{font-family:var(--f-display);font-size:14.5px;color:var(--text)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts-stack{display:grid;gap:8px}
.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.opt > span{
  display:block;border:1px solid var(--line);border-radius:10px;
  padding:10px 15px;font-size:14.3px;color:var(--muted);cursor:pointer;
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,
             background var(--dur-fast) ease;
}
.opt input:checked + span{
  background:var(--signal-500);border-color:var(--signal-500);color:var(--on-accent);
}
.opt input:focus-visible + span{outline:2px solid var(--signal-500);outline-offset:3px}
.opt-use{display:block;font-size:12.5px;color:var(--muted-2);margin-block-start:4px}
.opt input:checked + span .opt-use{color:var(--on-accent);opacity:.72}
.fld input[type=text],.fld input[type=number],.fld textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--text);
  font-family:var(--f-body);font-size:15px;
  transition:border-color var(--dur-fast) ease;
}
.fld textarea{min-height:112px;resize:vertical;line-height:1.7}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--signal-500)}
.fld ::placeholder{color:var(--muted-2)}
.ordr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ordr-note{font-size:13px;color:var(--muted-2);max-width:38ch}
@media (max-width:560px){
  .ordr-foot .btn{width:100%;justify-content:center}
}

/* ============ صفحة 404 ============ */
.err{min-height:62vh;display:grid;place-items:center;text-align:center;padding:60px 20px}
.err-code{font-family:var(--f-mono);font-size:15px;color:var(--signal-500);letter-spacing:.3em}
.err h1{margin-top:14px}
.err p{color:var(--muted);margin-top:14px}

/* ============ تقليل الحركة ============
   يبقى في آخر الملف عمداً: قواعد الإلغاء يجب أن تأتي بعد كل ما تلغيه،
   وإلا هزمها ترتيب المصدر عند تساوي الأولوية (مثل .work:hover).
   الفلسفة: تسقط الإزاحة والتكبير، ويبقى التلاشي — لا إلغاء شامل. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* الإزاحة تختفي في الحالتين، فلا شيء يتحرك */
  .reveal,.reveal.in{transform:none}
  .reveal{transition:opacity var(--dur-reveal) var(--ease-out)}

  /* تأثيرات المرور تفقد حركتها وتحتفظ بلونها */
  .btn:hover,.card:hover,.work:hover,.wa-float:hover{transform:none}

  /* الضغط يفقد التصغير ويحتفظ بتغيّر اللون — التغذية الراجعة تبقى */
  .btn:active,.nav-cta:active,.wa-float:active{transform:none}

  /* الأكورديون يفتح فوراً، والعلامة تدور بلا انتقال */
  details.qa{transition-property:border-color}
  details.qa summary::after{transition:none}

  /* توهّج الهيرو يثبت في مكانه بكامل قوته — بلا انسياب */
  .hero::before{animation:none}
}

/* ==========================================================
   v7 — نموذج الصفحة الرئيسية الجديد
   كل قاعدة هنا محصورة تحت أصناف body للصفحات المعاد تصميمها
   (home-v7 · services-v7 · repair-v7 · pricing-v7) فلا تمسّ بقية الصفحات.
   الصور الكبيرة خلفيات مشاهد كاملة (img مطلقة + object-fit:cover)
   لا صور داخل أطر — وفوقها حجاب متدرّج ينصهر في الأرضية.
   ========================================================== */

/* الهيدر: زجاج أوضح فوق المشاهد المصوّرة */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .site-header{
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(150%);
}

/* ---------- المشهد: قسم بخلفية صورة ---------- */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene{position:relative;overflow:hidden;padding-block:0}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-bgwrap{
  position:absolute;inset:0;z-index:0;
  transform:scale(1);
  /* تكبير بطيء جداً عند دخول المشهد — 1 إلى 1.04 */
  transition:transform 16s var(--ease-out);
}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene.reveal{opacity:1;transform:none;transition:none}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene.reveal.in .hv7-bgwrap{transform:scale(1.04)}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;border-radius:0;
}
/* الحجاب: تعتيم أساس يُبقي الصورة ظاهرة نحو 35–55%،
   وانصهار علوي وسفلي ناعم في أسود الصفحة — لا إطار ولا حواف */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--ink) 0%,rgba(10,10,11,0) 20%),
    linear-gradient(to top,var(--ink) 2%,rgba(10,10,11,.55) 34%,rgba(10,10,11,0) 66%),
    rgba(10,10,11,.42);
}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene > .wrap{position:relative;z-index:2}

/* نص المشاهد فوق الصور: النص الكامل لا الرمادي الخافت — لأجل التباين */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene .sec-head p{color:var(--text)}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene .sec-head{margin-bottom:clamp(20px,3vw,30px)}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-more{color:var(--signal-400);text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-more:hover{text-decoration:underline}
}

/* محتوى أسفل المشهد (الأسطول والتجميع): الصورة تتنفس فوق النص */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-low{padding-block:clamp(190px,30vh,300px) clamp(56px,8vh,88px)}
/* محتوى جانبي متوسّط (التصميم): النص على المنطقة الداكنة من الصورة */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-side{padding-block:clamp(88px,14vh,150px)}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-side .sec-head{max-width:52ch}

/* ---------- الهيرو ----------
   تكوين واحد: الصورة خلفية والنص فوقها، وكل القيمة داخل الشاشة الأولى.
   الارتفاع لا يتجاوز المتاح بعد الهيدر (80px) ولا يفرض تمريراً للوصول
   إلى العنوان أو الأزرار. */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero{
  min-height:min(calc(100svh - 80px),820px);
  display:flex;align-items:center;
  padding-block:clamp(48px,7vh,88px) clamp(40px,6vh,72px);
}
/* حجاب الهيرو: تدرّج جانبي خلف عمود النص (جهة البداية في كل لغة)
   بدل قلب الصورة — الصور تبقى باتجاهها الأصلي دائماً، فقلبها يعكس
   تفاصيل هندسية وشعارات يفترض أن تبقى صحيحة */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .hv7-scrim{
  background:
    linear-gradient(to right,rgba(10,10,11,.6) 8%,rgba(10,10,11,0) 58%),
    linear-gradient(to top,var(--ink) 0%,rgba(10,10,11,.42) 36%,rgba(10,10,11,.1) 66%),
    rgba(10,10,11,.4);
}
html[dir="rtl"] :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .hv7-scrim{
  background:
    linear-gradient(to left,rgba(10,10,11,.6) 8%,rgba(10,10,11,0) 58%),
    linear-gradient(to top,var(--ink) 0%,rgba(10,10,11,.42) 36%,rgba(10,10,11,.1) 66%),
    rgba(10,10,11,.4);
}
/* دخول الهيرو: تكبير الخلفية مرة واحدة عند التحميل */
@keyframes hv7-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .hv7-bgwrap{transition:none;animation:hv7-zoom 15s var(--ease-out) .2s both}

/* دخول نص الهيرو: تلاشٍ وارتفاع متدرّج */
@keyframes hv7-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-copy > *{animation:hv7-up .65s var(--ease-out) both}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-copy > :nth-child(1){animation-delay:.05s}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-copy > :nth-child(2){animation-delay:.14s}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-copy > :nth-child(3){animation-delay:.23s}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-copy > :nth-child(4){animation-delay:.32s}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .spec-card{animation:hv7-up .7s var(--ease-out) .38s both}

/* بطاقة المواصفات فوق الصورة: زجاج داكن بدل السطح الصلب */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .spec-card{
  background:rgba(15,15,17,.68);
  backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.09);
}

/* الهيرو النصي فوق الصورة: القراءة أولاً */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .lead{color:var(--text);max-width:50ch}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .eyebrow{background:rgba(10,10,11,.5);backdrop-filter:blur(6px)}

/* توهّج أصفر هادئ للزر الأساسي فوق المشاهد */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .btn-primary{box-shadow:0 4px 24px rgba(245,215,19,.2)}
@media (hover:hover) and (pointer:fine){
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .btn-primary:hover{box-shadow:0 6px 30px rgba(245,215,19,.32)}
}

/* ---------- مواضع التركيز لكل صورة ----------
   لا قلب أفقي لأي صورة — القلب يعكس اتجاه المنتج والمكونات والكتابة.
   الموازنة بين الاتجاهين تتم بالتدرّج الجانبي (أعلاه) وبموضع كتلة
   النص داخل القسم (أدناه لقسم التصميم)، والصورة بأصلها في اللغتين.
   الهيرو: القطعة الصفراء يمين الوسط أسفل الكادر — 62% يُبقيها في
   قلب القصّة على الجوال، وسطح المكتب يعرض الكادر كاملاً تقريباً. */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .hv7-bg{object-position:62% 44%}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-fleet .hv7-bg{object-position:50% 30%}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-design .hv7-bg{object-position:72% 46%}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-assembly .hv7-bg{object-position:44% 42%}

/* قسم التصميم: المنطقة الداكنة الفارغة في يسار الكادر — كتلة النص
   تُرسى عليها في اللغتين (في RTL تُدفع إلى نهاية المحور الداخلي، أي
   يسار الشاشة)، فلا نص فوق القطعة ولا قلب للصورة */
html[dir="rtl"] :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-design .sec-head,
html[dir="rtl"] :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-design .formats{
  margin-inline-start:auto;
  max-width:52ch;
}

/* ---------- مسار الرحلة (٥ محطات) ---------- */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow{
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:26px clamp(14px,2vw,26px);
  margin-block-start:clamp(26px,3.6vw,38px);
}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow li{
  border-block-start:1px solid var(--line-2);
  padding-block-start:clamp(12px,1.8vw,18px);
}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow .n{
  display:block;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.02em;
  color:var(--signal-500);
}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow h3{font-size:15.5px;margin-block-start:9px}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow p{color:var(--muted);font-size:13.6px;margin-block-start:5px}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow p a{color:var(--signal-400);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow p a:hover{text-decoration:underline}
}

/* تدرّج ظهور محطات الرحلة */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-stagger > .reveal:nth-child(2){transition-delay:60ms}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-stagger > .reveal:nth-child(3){transition-delay:120ms}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-stagger > .reveal:nth-child(4){transition-delay:180ms}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-stagger > .reveal:nth-child(5){transition-delay:240ms}

/* شرائح الطابعات والصيغ فوق الصور: أرضية داكنة تفصلها عن المشهد */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene .printer-chip,
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene .fmt{
  background:rgba(10,10,11,.55);
  backdrop-filter:blur(6px);
  color:var(--text);
}

/* روابط داخل فقرات فوق الصور */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .cta-band p a{color:var(--signal-400)}

/* سطر الموثوقية داخل شريط الدعوة */
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-trustline{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 22px;color:var(--muted);font-size:13.5px;
}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-trustline > span{max-width:52ch}
:is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-trustline .trust-code{text-decoration:none}

/* ---------- الاستجابة ---------- */
@media (max-width:960px){
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow{grid-template-columns:repeat(2,1fr)}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero{min-height:auto}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-low{padding-block:clamp(150px,26vh,240px) 56px}

  /* الهيدر: التنقل الكامل يزدحم بين 721 و960، فقائمة البرغر تبدأ
     هنا مبكراً في هذه الصفحة. نفس قواعد ≤720 العامة حرفياً —
     وزر البرغر في main.js مجرد click toggle فيعمل عند أي عرض */
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .burger{display:block}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .nav-links{
    display:none;position:absolute;inset-inline:0;top:80px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:12px 20px 18px;
  }
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .nav-links.open{display:flex}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .nav-links a{padding:12px 14px}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .nav-cta{text-align:center;margin-top:6px}
}
@media (max-width:700px){
  /* الجوال: العنوان والوصف والزر الأساسي مبكراً — حشوة علوية دنيا،
     وبطاقة المواصفات تتبعهم لا تسبقهم (ترتيب الماركب يضمنها) */
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero{min-height:auto;padding-block:32px 48px}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow{grid-template-columns:1fr;gap:20px}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow li{
    display:grid;grid-template-columns:auto 1fr;column-gap:16px;
    align-items:start;
  }
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow .n{grid-row:1/3;font-size:30px;padding-block-start:2px}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow h3{margin-block-start:0}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-flow p{grid-column:2}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-side{padding-block:clamp(120px,20vh,170px) 56px}
}

/* ---------- دفعة الصفحات المصوّرة: الخدمات والصيانة والتسعير ---------- */
/* هيرو صفحة داخلية: أقصر من هيرو الرئيسية */
:is(.services-v7,.repair-v7,.pricing-v7) .hv7-hero--page{
  min-height:min(calc(78svh - 80px),620px);
}
/* بطاقات فوق المشاهد: زجاج داكن بدل السطح الصلب */
:is(.services-v7,.repair-v7,.pricing-v7) .hv7-scene .card{
  background:rgba(15,15,17,.66);
  backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.09);
}
:is(.services-v7,.repair-v7,.pricing-v7) .hv7-scene .ticks li{color:var(--text)}

/* مواضع التركيز — لا قلب أفقي لأي صورة:
   printers: الطابعة والقطع الثلاث في الوسط · hero (شاشة التصميم): الشاشة
   يسار والقطعة الصفراء يمين الوسط · repair: الطابعة يمين الوسط ولوحة
   العدة الداكنة يسار · part-macro: القطعة يمين والثلث الأيسر داكن فارغ */
.services-v7 .hv7-printing .hv7-bg{object-position:50% 42%}
.services-v7 .hv7-design .hv7-bg{object-position:62% 42%}
.services-v7 .hv7-assembly .hv7-bg{object-position:44% 42%}
.repair-v7 .hv7-repairhero .hv7-bg{object-position:58% 38%}
.pricing-v7 .hv7-pricehero .hv7-bg{object-position:74% 46%}

/* هيرو التسعير: نفس منطق قسم التصميم — النص يرسو على المنطقة الداكنة
   يسار الكادر في اللغتين، فلا يغطي القطعة الصفراء ولا تُقلب الصورة */
html[dir="rtl"] .pricing-v7 .hv7-pricehero .sec-head,
html[dir="rtl"] .pricing-v7 .hv7-pricehero .hero-actions{
  margin-inline-start:auto;
  max-width:52ch;
}
.pricing-v7 .hv7-pricehero .sec-head{max-width:52ch}
.pricing-v7 .hv7-pricehero .wrap{width:100%}
/* والحجاب يتبع النص لا الاتجاه: النص يسار الشاشة في اللغتين، فالتعتيم
   الجانبي يبقى «إلى اليمين» حتى في RTL — وإلا أظلمت القطعة الصفراء */
html[dir="rtl"] .pricing-v7 .hv7-pricehero .hv7-scrim{
  background:
    linear-gradient(to right,rgba(10,10,11,.6) 8%,rgba(10,10,11,0) 58%),
    linear-gradient(to top,var(--ink) 0%,rgba(10,10,11,.42) 36%,rgba(10,10,11,.1) 66%),
    rgba(10,10,11,.4);
}

/* ---------- الأعمال: حالة العمل المميزة أعلى المعرض ---------- */
/* الصورة تُعرض كاملة بأبعادها الأصلية 4:3 — لا cover ولا قص ولا قلب */
.portfolio-v7 .pf7-case{
  background:linear-gradient(160deg,var(--surface) 0%,var(--ink-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
}
.portfolio-v7 .pf7-case-img{margin:0}
.portfolio-v7 .pf7-case-img img{display:block;width:100%;height:auto}
.portfolio-v7 .pf7-case-txt{padding:clamp(24px,3.5vw,44px)}
.portfolio-v7 .pf7-case-txt h2{margin-block-start:10px}
.portfolio-v7 .pf7-case-txt > p{color:var(--muted);margin-block-start:12px;max-width:46ch}
.portfolio-v7 .pf7-stages{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin-block-start:18px;counter-reset:st;
}
.portfolio-v7 .pf7-stages li{
  counter-increment:st;
  font-size:13px;color:var(--text);
  background:var(--ink);border:1px solid var(--line-2);
  border-radius:99px;padding:6px 14px;
  display:inline-flex;align-items:center;gap:8px;
}
.portfolio-v7 .pf7-stages li::before{
  content:"0" counter(st);
  font-family:var(--f-mono);font-size:11px;color:var(--signal-500);
}
.portfolio-v7 .pf7-case .hero-actions{margin-top:22px}
@media (max-width:860px){
  .portfolio-v7 .pf7-case{grid-template-columns:1fr}
}

/* ---------- نموذج الطلب المتدرج (order-v7) ---------- */
.order-v7 .ov7{display:grid;gap:clamp(22px,3vw,30px);max-width:820px}

/* شريط التقدم */
.order-v7 .ov7-progress{
  list-style:none;display:flex;gap:clamp(10px,2vw,18px);flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:16px;
}
.order-v7 .ov7-progress li{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-size:13px;color:var(--muted-2);
}
.order-v7 .ov7-progress .n{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-family:var(--f-mono);font-size:12px;
  border:1px solid var(--line-2);color:var(--muted);
}
.order-v7 .ov7-progress li.on{color:var(--text)}
.order-v7 .ov7-progress li.on .n{
  background:var(--signal-500);border-color:var(--signal-500);color:var(--on-accent);
}
.order-v7 .ov7-progress li.now{color:var(--signal-400)}

/* اسم المسار المختار */
.order-v7 .ov7-path{
  font-family:var(--f-mono);font-size:12.5px;color:var(--signal-400);
  background:var(--signal-900);border-radius:8px;padding:7px 13px;
  justify-self:start;
}

/* بطاقات الاختيار الكبيرة */
.order-v7 .ov7-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.order-v7 .ov7-cards-3{grid-template-columns:repeat(3,1fr)}
.order-v7 .ov7-card{position:relative;display:block}
.order-v7 .ov7-card input{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;
}
.order-v7 .ov7-card > span{
  display:block;height:100%;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;
  transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease;
}
.order-v7 .ov7-card strong{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:15.5px;color:var(--text);
}
.order-v7 .ov7-card small{
  display:block;font-size:12.8px;color:var(--muted);margin-top:5px;line-height:1.6;
}
.order-v7 .ov7-card input:checked + span{
  border-color:var(--signal-500);background:var(--signal-900);
}
.order-v7 .ov7-card input:checked + span strong{color:var(--signal-400)}
.order-v7 .ov7-card input:focus-visible + span{
  outline:2px solid var(--signal-500);outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .order-v7 .ov7-card:hover > span{border-color:var(--line-2)}
}

/* الخطوات والمجموعات */
.order-v7 .ov7-step{display:grid;gap:clamp(18px,2.6vw,26px)}
.order-v7 .ov7-step[hidden]{display:none}
@keyframes ov7-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.order-v7 .ov7-step:not([hidden]){animation:ov7-in .3s var(--ease-out)}
.order-v7 .ov7-h{font-size:clamp(20px,3vw,26px);outline:none}
.order-v7 .ov7-g{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,26px);display:grid;gap:clamp(16px,2.2vw,22px);
  background:var(--ink-2);min-width:0;
}
.order-v7 .ov7-g[hidden]{display:none}
.order-v7 .ov7-g legend{
  font-family:var(--f-display);font-weight:600;font-size:15px;
  color:var(--signal-400);padding-inline:8px;
}
.order-v7 .ov7-sub{border:0;padding:0;margin:0;display:grid;gap:12px}
.order-v7 .ov7-sub[hidden]{display:none}
.order-v7 .ov7-note{
  color:var(--muted);font-size:14px;line-height:1.8;
  border-inline-start:2px solid var(--signal-500);padding-inline-start:14px;
}
.order-v7 .ov7-adv{font-size:13.5px}
.order-v7 .ov7-err{
  color:#FF9F9F;font-size:14px;
  border:1px solid rgba(255,110,110,.4);background:rgba(255,90,90,.08);
  border-radius:10px;padding:11px 15px;
}

/* الملخص */
.order-v7 .ov7-sum{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,26px);
}
.order-v7 .ov7-sum h3{font-size:15.5px;margin-bottom:12px}
.order-v7 .ov7-sum dl{display:grid;gap:6px}
.order-v7 .ov7-sum-g{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-display);font-size:13.5px;color:var(--signal-400);
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.order-v7 .ov7-sum-g:first-child{margin-top:0;padding-top:0;border-top:0}
.order-v7 .ov7-sum dd{color:var(--muted);font-size:14px;line-height:1.7}
.order-v7 .ov7-edit{
  background:none;border:1px solid var(--line-2);border-radius:7px;
  color:var(--text);font-family:var(--f-body);font-size:12px;
  padding:4px 12px;cursor:pointer;
  transition:border-color var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine){
  .order-v7 .ov7-edit:hover{border-color:var(--signal-500)}
}

/* أزرار التنقل */
.order-v7 .ov7-nav{
  display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:18px;
}
.order-v7 .ov7-nav [data-next]{margin-inline-start:auto}
.order-v7 .ov7-nav button[hidden]{display:none}

@media (max-width:720px){
  .order-v7 .ov7-cards,.order-v7 .ov7-cards-3{grid-template-columns:1fr}
  .order-v7 .ov7-nav .btn{flex:1;justify-content:center}
  .order-v7 .ov7-nav [data-next]{margin-inline-start:0}
}

/* ---------- تقليل الحركة: يسقط التحريك والتكبير ويبقى كل المحتوى ---------- */
@media (prefers-reduced-motion:reduce){
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-bgwrap,
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .hv7-bgwrap{animation:none;transition:none;transform:none}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-scene.reveal.in .hv7-bgwrap{transform:none}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-copy > *,
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-hero .spec-card{animation:none}
  :is(.home-v7,.services-v7,.repair-v7,.pricing-v7,.contact-v7,.portfolio-v7,.order-v7) .hv7-stagger > .reveal{transition-delay:0ms}
  /* انتقال خطوات نموذج الطلب يسقط والمحتوى يبقى ظاهراً */
  .order-v7 .ov7-step:not([hidden]){animation:none}
}