/* ==========================================================
   عُمق 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;width:fit-content}
/* على خلية جدول: 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}

/* جهتا بداية السطر ونهايته فيزيائياً + إشارة الإزاحة — تُغني عن تكرار
   كل قاعدة اتجاهية مرتين في النظامين معاً */
html[dir="ltr"]{--hw-is:left;--hw-ie:right;--hw-sn:1}
html[dir="rtl"]{--hw-is:right;--hw-ie:left;--hw-sn:-1}
:focus-visible{outline:2px solid var(--signal-500);outline-offset:3px;border-radius:6px}
/* §13: فجوة حبرية مضمونة بين حلقة التركيز وتعبئة primary */
.btn-primary:focus-visible,.nav-cta:focus-visible{box-shadow:0 0 0 3px var(--ink)}

.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,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap.nav{max-width:1512px;padding-inline:clamp(20px,4vw,56px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo{
  display:flex;align-items:baseline;gap:10px;
  text-decoration:none;color:var(--text);flex-shrink:0;line-height:1;
}
.logo-ar{font-family:var(--f-display);font-weight:600;font-size:22px}
.logo-ar b{color:var(--signal-500);font-weight:600}
.logo-lt{
  font-family:var(--f-mono);font-size:10px;letter-spacing:3px;
  color:var(--muted);direction:ltr;unicode-bidi:isolate;
}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{
  text-decoration:none;color:var(--muted);font-size:14px;
  padding:9px 13px;border-radius:8px;position:relative;
  transition:color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
/* الصفحة الحالية تُظهر الخط، والمرور يمدّه */
.nav-links a:not(.nav-cta)::after{
  content:"";position:absolute;bottom:4px;inset-inline:13px;height:2px;
  border-radius:2px;background:var(--signal-500);
  transform:scaleX(0);transition:transform var(--dur-base) var(--ease-out);
}
html[dir="ltr"] .nav-links a::after{transform-origin:left}
html[dir="rtl"] .nav-links a::after{transform-origin:right}
/* مؤشر الصفحة الحالية لا يُقيَّد بالمرور — يجب أن يظهر باللمس أيضاً */
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{transform:none}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--text);transform:translateY(-1px)}
  .nav-links a:not(.nav-cta):hover::after{transform:none}
}
/* خيط القراءة مثبّت في أعلى الشاشة فوق الهيدر: مسار خافت دائم الظهور
   وتعبئة صفراء تمتلئ من بداية السطر — أول ما تقع عليه العين */
.hw-prog{position:fixed;top:0;inset-inline:0;height:3px;z-index:2;background:var(--line)}
.hw-prog::after{
  content:"";position:absolute;inset:0;background:var(--signal-500);
  transform:scaleX(var(--hw-p,0));transform-origin:var(--hw-is);
}
/* زر الهيدر: مخطط وأصغر من زر الهيرو عمداً */
.nav-links .nav-cta{
  font-family:var(--f-display);font-weight:600;font-size:13.5px;
  min-height:36px;padding:6px 18px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.38);color:var(--text);
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,
             transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-links .nav-cta:hover{border-color:var(--signal-500);color:var(--signal-400)}
}
/* منطقة نقر ≥44px عمودياً والمقاس المرئي أصغر من زر الهيرو */
.nav-links .nav-cta::after{content:"";position:absolute;inset:-5px 0}
.nav-links .nav-cta:active{transform:scale(.97)}
.burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.38);color:var(--text);
  width:44px;height:44px;border-radius:10px;cursor:pointer;font-size:18px;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-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============ الأزرار — هندسة أدق: نصف قطر تقني ومساحة أوسع ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;border-radius:9px;text-decoration:none;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  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,
             box-shadow var(--dur-fast) ease,color var(--dur-fast) ease;
}
/* هالة الزر الأساسي من --signal-glow نفسه الذي يضيء الهيرو: طوق ضيق
   وسقوط ناعم — حضور بلا لون جديد */
.btn-primary{
  background:var(--signal-500);color:var(--on-accent);
  box-shadow:0 0 0 4px var(--signal-glow),0 10px 32px var(--signal-glow);
}
/* §13: حد ghost أبيض .38 ≈ 3.7:1 على الحبر */
.btn-ghost{border-color:rgba(255,255,255,.38);color:var(--text);background:rgba(255,255,255,.05)}
/* سهم الزر يتبع اتجاه القراءة */
.btn i{font-style:normal;transition:transform var(--dur-base) var(--ease-out)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover{background:var(--signal-600);box-shadow:0 0 0 7px var(--signal-glow),0 14px 38px var(--signal-glow)}
  .btn-ghost:hover{border-color:var(--signal-500);background:rgba(255,255,255,.09)}
  .hwp .hw-hero .btn-ghost:hover{background:rgba(10,10,11,.42)}
  html[dir="rtl"] .btn:hover i{transform:translateX(-4px)}
  html[dir="ltr"] .btn:hover i{transform:translateX(4px)}
}

/* استجابة الضغط — تعمل باللمس أيضاً، وهي التغذية الراجعة الوحيدة هناك */
.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-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}

/* ============ خطوات كيف نشتغل ============ */
.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}

/* ============ شريط الموثوقية ============ */
.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.25fr .9fr 1.15fr;gap:clamp(24px,3vw,40px)}
.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-reach h4,.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)}
}
/* critique #15: أهداف لمس التذييل 45px على أجهزة اللمس */
@media (pointer:coarse){
  .foot-col a{padding-block:10px;margin-block-end:0}
  .ov7-edit{min-height:44px;padding-inline:16px}
}
.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)}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* التنقل بتسعة عناصر يزدحم قبل 1080 — البرغر من 1080 في الموقع كله */
@media (max-width:1080px){
  .burger{display:block}
  .nav-links{
    display:none;position:fixed;inset-inline:0;top:64px;
    min-height:calc(100svh - 64px);flex-direction:column;align-items:stretch;
    background:rgba(10,10,11,.97);backdrop-filter:blur(20px);
    padding:24px 20px;gap:2px;border-top:1px solid var(--line);
    overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:17px;padding:14px 16px}
  .nav-links a[aria-current="page"]::after{inset-inline:16px;bottom:8px}
  .nav-links .nav-cta{margin-top:10px;min-height:48px}
  .burger[aria-expanded="true"]{color:transparent;position:relative}
  .burger[aria-expanded="true"]::after{
    content:"✕";position:absolute;inset:0;display:grid;place-items:center;
    color:var(--text);font-size:16px;
  }
}

@media (max-width:720px){
  .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);
}


/* ============ قائمة نقطية ============ */
.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}
}

/* ============ مبدّل اللغة ============ */
/* بلا letter-spacing: الشجرة الإنجليزية تحمل هنا نص «عربي» (DESIGN §7) */
.nav-links .lang{
  font-family:var(--f-mono);font-size:11.5px;
  border:1px solid var(--line-2);border-radius:8px;
  padding:6px 12px;color:var(--muted);
}
@media (hover:hover) and (pointer:fine){
  .nav-links .lang:hover{border-color:var(--signal-500);color:var(--text)}
}

/* ============ معرض الأعمال ============ */
.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 (min-width:1200px){.works{grid-template-columns:repeat(4,1fr)}}
@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)}
/* showModal يجعل الخلفية inert لكنه لا يمنع تمريرها — القفل هنا */
body:has(.lb[open]){overflow:hidden}
.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:44px;height:44px;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 - 22px)}
.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}
}


/* ============ معادلة التسعير ============ */
.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;
}

/* ============ نموذج الطلب ============ */
.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}
/* أصغر من عنوان صفحة: 404 رسالة لا صفحة محتوى */
.err h1{margin-top:14px;font-size:clamp(26px,5vw,40px)}
.err p{color:var(--muted);margin-top:14px}
.err .hw-actions{justify-content:center;margin-block-start:26px}
.err-en{color:var(--muted-2);font-size:14px}

/* ====== تقليل الحركة — الترتيب مقصود: الإلغاء بعد ما يلغيه،
   وإلا هزمه ترتيب المصدر. تسقط الإزاحة ويبقى التلاشي (DESIGN §10) ====== */
@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}
}

/* ===== نموذج الطلب المتدرّج (ov7) وشرائح مراحل حالة العمل (pf7).
   كل ما عداهما انتقل إلى شبكة hw أسفل الملف. ===== */

/* مراحل حالة العمل المميزة — شرائح مرقّمة داخل .hw-fig */
.pf7-stages{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin-block-start:18px;counter-reset:st;
}
.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;
}
.pf7-stages li::before{
  content:"0" counter(st);
  font-family:var(--f-mono);font-size:11px;color:var(--signal-500);
}

/* ---------- نموذج الطلب المتدرج ---------- */
.ov7{display:grid;gap:clamp(22px,3vw,30px);max-width:820px}
/* عمود المحتوى أعرض من الغلاف القديم، فالنموذج بعرضه الثابت كان يترك
   هامشاً ميتاً — يرسو على خط عمود بدل أن يطفو */
.p-order .ov7{grid-column:main-start/c 9;max-width:none}

/* شريط التقدم */
.ov7-progress{
  list-style:none;display:flex;gap:clamp(10px,2vw,18px);flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:16px;
}
.ov7-progress li{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-size:13px;color:var(--muted-2);
}
.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);
}
.ov7-progress li.on{color:var(--text)}
.ov7-progress li.on .n{
  background:var(--signal-500);border-color:var(--signal-500);color:var(--on-accent);
}
.ov7-progress li.now{color:var(--signal-400)}

/* اسم المسار المختار */
.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;
}

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

/* الخطوات والمجموعات */
.ov7-step{display:grid;gap:clamp(18px,2.6vw,26px)}
.ov7-step[hidden]{display:none}
@keyframes ov7-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ov7-step:not([hidden]){animation:ov7-in .3s var(--ease-out)}
.ov7-h{font-size:clamp(20px,3vw,26px);outline:none}
.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;
}
.ov7-g[hidden]{display:none}
.ov7-g legend{
  font-family:var(--f-display);font-weight:600;font-size:15px;
  color:var(--signal-400);padding-inline:8px;
}
.ov7-sub{border:0;padding:0;margin:0;display:grid;gap:12px}
.ov7-sub[hidden]{display:none}
.ov7-note{
  color:var(--muted);font-size:14px;line-height:1.8;
  border-inline-start:2px solid var(--signal-500);padding-inline-start:14px;
}
.ov7-adv{font-size:13.5px}
.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;
}

/* الملخص */
.ov7-sum{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,26px);
}
.ov7-sum h3{font-size:15.5px;margin-bottom:12px}
.ov7-sum dl{display:grid;gap:6px}
.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);
}
.ov7-sum-g:first-child{margin-top:0;padding-top:0;border-top:0}
.ov7-sum dd{color:var(--muted);font-size:14px;line-height:1.7}
.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){
  .ov7-edit:hover{border-color:var(--signal-500)}
}

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

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

/* ===== شبكة 12 عموداً، صور تكسر الحافة، فصول لا بطاقات.
   .home-wow الرئيسية · .hwp الصفحات الداخلية (الخدمات والصيانة والتسعير).
   الاتجاه بمتغيّرين لا بتكرار كل قاعدة:
   --hw-is جهة بداية السطر فيزيائياً · --hw-sn إشارة الإزاحة. ===== */

.home-wow,.hwp{
  --hw-gut:clamp(20px,4vw,56px);--hw-gap:clamp(12px,1.5vw,22px);
  --hw-slow:700ms;--hw-grand:900ms;
  /* حشوة الطبقة الثانية والثالثة — الهيرو وحده يحتفظ بحضوره الكامل */
  --hw-ch:clamp(40px,5vh,64px);
  background:radial-gradient(1100px 520px at 50% -6%,rgba(245,215,19,.05),transparent 62%),var(--ink);
}

/* main عمود المحتوى · full من حافة الشاشة إلى حافتها */
.hw-page{
  display:grid;column-gap:var(--hw-gap);
  grid-template-columns:[full-start] minmax(var(--hw-gut),1fr)
    [main-start] repeat(12,[c] minmax(0,104px))
    [main-end] minmax(var(--hw-gut),1fr) [full-end];
}
.hw-page{padding-block:0}
.hw-page > *{grid-column:main}

/* الهيدر شفاف فوق الهيرو ثم يتصلب */
:is(.home-wow,.hwp) .site-header{
  position:fixed;inset-inline:0;top:0;background:transparent;
  backdrop-filter:none;border-bottom-color:transparent;
  transition:background .3s ease,border-color .3s ease;
}
:is(.home-wow,.hwp) .site-header:is(.on,:has(.nav-links.open)){
  background:rgba(10,10,11,.9);backdrop-filter:blur(18px);border-bottom-color:var(--line);
}

/* ---------- مفردات مشتركة ---------- */
/* .hw-kick لاتيني متتبَّع · .hw-lbl مترجَم بلا تتبّع: التتبّع بعد التشكيل
   يفكّ وصل العربية، فلا يوضع على قاعدة قد تحملها (DESIGN §7) */
.hw-kick,.hw-lbl{font-family:var(--f-mono);font-size:12px;color:var(--signal-400);margin-block-end:10px}
.hw-kick{letter-spacing:.18em}
.hw-num,.hw-path-row b{font-family:var(--f-mono);font-weight:500;color:transparent;-webkit-text-stroke:1px var(--signal-edge)}
/* كتلة لا سطر، واتجاه موروث. يغلب .ltr بترتيب المصدر فيصحّ داخل الفصول وخارجها */
.hw-num{line-height:.78;font-size:clamp(56px,6.4vw,104px);pointer-events:none;display:block;direction:inherit;margin:0 0 2px}
.hw-h{font-weight:700;font-size:clamp(26px,3.1vw,46px);line-height:1.16;letter-spacing:-.02em}
html[dir="rtl"] .hw-h{line-height:1.26;padding-block-end:.16em}
.hw-p{color:var(--muted);font-size:clamp(15px,1.15vw,16.5px);max-width:44ch;margin-block-start:12px}
.hw-link{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  margin-block-start:16px;min-height:44px;font-family:var(--f-display);
  font-weight:600;font-size:15px;color:var(--signal-400);text-decoration:none;
}
.hw-link i,.btn i{font-style:normal;transition:transform var(--dur-base) var(--ease-out)}
.hw-link::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:8px;height:1px;
  background:currentColor;opacity:.5;transform:scaleX(0);
  transform-origin:var(--hw-is);transition:transform var(--dur-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .hw-link:hover::after{transform:none}
  .hw-link:hover i{transform:translateX(calc(5px * var(--hw-sn)))}
}

/* --- الهيرو: الصورة طبقة خلفية للقسم، والنص وبطاقة المواصفات فوقها --- */
.hw-hero{position:relative;min-height:100svh;align-content:center;padding-block:clamp(92px,13vh,140px) var(--hw-ch)}
.hw-hero-shot{grid-column:auto;position:absolute;inset:0;z-index:0;overflow:hidden}
.hw-hero-shot img{width:100%;height:100%;object-fit:cover;object-position:calc(50% - 18% * var(--hw-sn)) 46%}
/* حجاب يتدرّج من جهة النص ويذوب في الأرضية أعلى وأسفل */
.hw-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to var(--hw-ie),rgba(10,10,11,.95) 0%,rgba(10,10,11,.9) 46%,rgba(10,10,11,.62) 78%,rgba(10,10,11,.42) 100%),
    linear-gradient(to top,var(--ink) 1%,rgba(10,10,11,0) 24%);
}
.hw-hero-copy{grid-column:main-start/c 7;grid-row:1;position:relative;z-index:2;align-self:center}
.hw-hero .spec-card{grid-column:c 8/main-end;grid-row:1;z-index:2;align-self:center}
.hw-tag,.hw-fin-note,.hw-belt span,.hw-chev,.hw-row em{font-family:var(--f-mono);color:var(--muted)}
.hw-belt i{font-style:normal;color:var(--signal-500);padding-inline:22px}
.hw-tag{font-size:12px;margin-block-end:clamp(18px,3vh,30px)}
/* التتبّع على العنصر اللاتيني المعزول وحده: الوسم يحمل عربية في الشجرة
   العربية، والتتبّع بعد التشكيل يفكّ وصلها (DESIGN §7) */
.hw-tag b{color:var(--signal-500);font-weight:500;letter-spacing:.16em}
:is(.hw-hero,.hw-head) h1{font-weight:700;font-size:clamp(44px,6.8vw,98px);line-height:1.02;letter-spacing:-.03em;color:#fff}
html[dir="rtl"] :is(.hw-hero,.hw-head) h1{line-height:1.12;padding-block-end:.28em}
:is(.hw-hero,.hw-head) h1 em{font-style:normal;color:var(--signal-500)}
.hw-lede{color:var(--text);font-size:clamp(16px,1.5vw,20px);line-height:1.7;max-width:40ch;margin-block-start:clamp(18px,2.6vh,28px)}
.hw-actions{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:clamp(18px,2.6vh,26px)}

/* --- الشريط التقني --- */
.hw-belt{
  border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding-block:26px;
  mask-image:linear-gradient(to var(--hw-ie),#000 calc(100% - 130px),transparent calc(100% - 78px))}
.hw-belt-track{display:flex;width:max-content;animation:hw-belt 44s linear infinite}
.hw-belt span{white-space:nowrap;font-size:12px;letter-spacing:.22em}
@keyframes hw-belt{to{transform:translateX(calc(-50% * var(--hw-sn)))}}

/* --- الخدمات: أربعة فصول بأربعة تكوينات --- */
/* أربع خلايا في شبكة 2×2 — كل خلية تحتوي أجواءها بحدّ وقصّ، والنص
   كتلة واحدة على محور واحد داخلها. صفوف 1fr تُسوّي الأربع تماماً. */
.hw-chs{position:relative;padding-block:var(--hw-ch);row-gap:var(--hw-gap);grid-auto-rows:1fr}
/* أجواء واحدة متصلة خلف الأربع بدل أربع صور متنافسة */
.hw-chs-bg{grid-column:auto;position:absolute;inset:0;z-index:0;overflow:hidden;margin:0}
.hw-chs-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.46}
.hw-chs::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(10,10,11,.2)}
.hw-ch1,.hw-ch3{grid-column:main-start/c 7}
.hw-ch2,.hw-ch4{grid-column:c 7/main-end}
/* الخلايا أسطح شبه معتمة فوق الأجواء: حدّها يفصلها والطابعات تظل مقروءة بينها */
.hw-ch{
  position:relative;z-index:2;display:flex;align-items:center;
  background:rgba(10,10,11,.79);backdrop-filter:blur(3px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.8vw,38px);
}
.hw-ch-txt{width:100%}
/* أرقام على خط واحد: البدء من الأعلى والفائض أسفل */
.hw-chs-3 .hw-ch{align-items:flex-start}
/* الصورة مؤطّرة ومحتواة — لا كسر حافة ولا قص قاسٍ في هذه الطبقة */
/* 1 الصورة تكسر الحافة البعيدة والرقم يعبر بينهما */
/* 2 شريط بعرض الشاشة والنص يرسو على قاعه */
/* 3 مرآة الأول */
/* 4 النص يتقدم وصورة أقصر ترسو في القاع */

/* مواضع التركيز الأفقية — لا قلب أفقي لأي صورة */

/* --- رحلة المشروع --- */
.hw-path-head{max-width:34ch}
.hw-path-line{position:relative;height:1px;background:var(--line)}
.hw-path-line i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--signal-500);transition:width .18s linear}
/* تدفّق عمودي يوزّع أي عدد بالتساوي: خمس على الرئيسية وأربع على الصيانة */
.hw-path-row{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(14px,2vw,26px);margin:0}
.hw-path-row li{position:relative;padding-block-start:clamp(26px,4vh,40px)}
.hw-path-row li::before{
  content:"";position:absolute;top:-4px;inset-inline-start:0;width:9px;height:9px;
  border-radius:50%;background:var(--signal-500);box-shadow:0 0 0 5px var(--ink);
}
.hw-path-row b{display:block;line-height:.9;font-size:clamp(38px,4.4vw,64px)}
.hw-path-row h3{font-size:clamp(16px,1.4vw,19px);margin-block-start:14px}
.hw-path-row p{color:var(--muted);font-size:14px;margin-block-start:6px;max-width:22ch}

/* --- الأعمال: ثلاث دراسات حالة بثلاثة تكوينات --- */
.hw-works-head{padding-block:var(--hw-ch)}
/* ===== شريط الأعمال: تشويق متحرك لا معرض — المعرض في portfolio.html ===== */
.hw-strip{overflow:hidden;padding-block:2px}
.hw-strip-track{display:flex;width:max-content;gap:14px;animation:hw-belt 28s linear infinite}
.hw-thumb{flex:0 0 auto;width:clamp(140px,12vw,172px);text-decoration:none;transition:transform var(--dur-base) var(--ease-out)}
.hw-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:10px;background:var(--ink-2);transition:border-color var(--dur-fast) ease}
.hw-thumb span{display:block;margin-block-start:9px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .hw-strip:hover .hw-strip-track{animation-play-state:paused}
  .hw-thumb:hover{transform:scale(1.03)}
  .hw-thumb:hover img{border-color:var(--signal-500)}
}
.hw-works-more{grid-column:main;margin-block-start:clamp(18px,3vh,30px);text-align:center}

/* --- الخاتمة: ذروة الصفحة --- */
.hw-fin{
  padding-block:var(--hw-ch);text-align:center;
  border-block-start:1px solid var(--line);
  background:
    radial-gradient(820px 420px at 50% 42%,rgba(245,215,19,.08),transparent 70%),
    linear-gradient(180deg,var(--surface),var(--ink));
}
.hw-fin-in{grid-column:c 2/c 12}
.hw-fin h2{font-weight:700;font-size:clamp(26px,2.9vw,40px);line-height:1.2;letter-spacing:-.02em}
html[dir="rtl"] .hw-fin h2{line-height:1.3;padding-block-end:.16em}
.hw-fin h2 em{font-style:normal;color:var(--signal-500)}
.hw-fin .hw-actions{justify-content:center}
/* الفقرة تحت عنوان الخاتمة تتوسّط بدل أن ترسو على محور القراءة */
.hw-fin .hw-p{max-width:52ch;margin-inline:auto}
.hw-fin-note{margin-block-start:clamp(22px,3.5vh,34px);font-size:11px;letter-spacing:.16em}

/* --- التواصل: صفوف روابط حقيقية فوق أوّليات .card و.ico القائمة --- */
.hw-path{padding-block:var(--hw-ch)}
.hw-path-head{margin-block-end:clamp(18px,3vh,32px)}
.hw-row b,.hw-row em{line-height:1.3}
.hw-rows{display:grid;gap:6px}
/* الصفوف في التذييل: بلاطة أصغر وصف أنحف مع بقاء هدف اللمس 44px */
.foot-reach .hw-row{min-height:44px;padding:0;gap:10px;background:none;border:0;border-radius:0;grid-template-columns:auto auto auto;justify-content:start}
.foot-reach .hw-rows{gap:9px}
.foot-reach b{font-size:13px}
.foot-reach em{font-size:11.5px;margin-block-start:1px}
.foot-reach .hw-chev{font-size:14px}
.hw-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:56px;padding:6px 16px}
.hw-row .ico{margin:0;width:40px;height:40px;border-radius:11px;background:var(--surface-2)}
/* واتساب علامة طرف ثالث مقفلة — لا يُعاد تلوين أخضرها ولا أبيض أيقونتها */
.hw-row .hw-tile-wa{background:var(--wa-green)}
.hw-row .hw-tile-wa svg{fill:#fff;stroke:none}
.hw-row b{display:block;font-family:var(--f-display);font-weight:600;font-size:15.5px}
.hw-row em{display:block;font-style:normal;font-size:13.5px;margin-block-start:4px}
.hw-chev{font-style:normal;font-size:17px;transition:transform var(--dur-base) var(--ease-out),color var(--dur-fast) ease}
@media (hover:hover) and (pointer:fine){
  .hw-row:hover .hw-chev{color:var(--signal-400);transform:translateX(calc(5px * var(--hw-sn)))}
}
/* --- الاستجابة: كل عنصر تفاعلي يقرّ بك — transform وbox-shadow فقط،
   المرور خلف (hover:hover) والضغط بلا بوابة لأن اللمس لا يملك سواه --- */
.hw-row,.hw-row .ico{transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) ease}
@media (hover:hover) and (pointer:fine){
  /* .hw-st.in > * يصفّر التحويل بالأولوية نفسها فالرفع يحتاج محدّداً أقوى */
  .hw-rows .hw-row:hover{transform:translateY(-2px);border-color:var(--line-2)}
  .hw-rows .hw-row:hover .ico{transform:scale(1.04)}
}
.hw-rows .hw-row:active{transform:scale(.99)}

/* ═══ الصفحات الداخلية (.hwp): الخدمات · الصيانة · التسعير ═══ */

/* الرئيسية وحدها تملأ الشاشة. وعناوين هذه الصفحات وصفية طويلة، فبمقاس
   الرئيسية (98px) تلتهم الشاشة — درجة بينها وبين .hw-h */
.hwp .hw-hero{min-height:min(78svh,660px);padding-block:clamp(88px,11vh,118px) var(--hw-ch)}
.hwp :is(.hw-hero,.hw-head) h1{font-size:clamp(32px,4.4vw,62px)}
/* رأس نصّي: أسطح القراءة والتنفيذ (الأسئلة، التواصل، الطلب، البيانات)
   تصل إلى محتواها مباشرة — نفس المقياس بلا هيرو مصوّر ولا ارتفاع محجوز */
.hw-head{padding-block:clamp(96px,13vh,132px) var(--hw-ch);row-gap:clamp(16px,2.4vh,24px)}
.hw-head .hw-lede{max-width:64ch}
.hw-head .crumbs{margin-block-end:0}
/* أرضية ghost شبه شفافة تكشف ما تحتها — ومنه هالة الزر الأساسي المجاور.
   أرضية داكنة تجعله يُقرأ على نفسه لا على جاره (4.36:1 ← 4.98:1) */
.hwp .hw-hero .btn-ghost{background:rgba(10,10,11,.55)}
/* هيرو أقصر = نص أعلى فوق أسطع الكادر. حجاب أعمق على جهة النص وحدها؛
   البعيدة تبقى .46 فالصورة حاضرة. لا يُفتَح الحبر أبداً (DESIGN §5، §15) */
.hwp .hw-hero::before{
  background:
    linear-gradient(to var(--hw-ie),rgba(10,10,11,.97) 0%,rgba(10,10,11,.95) 52%,rgba(10,10,11,.72) 80%,rgba(10,10,11,.46) 100%),
    linear-gradient(to top,var(--ink) 1%,rgba(10,10,11,0) 28%);
}
/* عنوان الفصول عارٍ فوق الأجواء بلا سطح يفصله — حجاب أعمق ليعبر 6:1 */
.hwp .hw-chs::before{background:rgba(10,10,11,.34)}

/* شريط محتوى. الفجوة صفّية: أبناء .hw-page صفوف شبكة لا كتل متجاورة */
.hw-band{padding-block:var(--hw-ch);row-gap:clamp(18px,3vh,30px)}
/* صفوف تلقائية وإلا ساوى 1fr صفَّ العنوان بصفوف الخلايا */
.hw-chs:has(.hw-chs-head){grid-auto-rows:auto}
/* الأجواء وحجابها عنصران مطلقان، فأي ابن غير مموضع يُرسم تحتهما — لا تحت
   الحجاب وحده بل تحت الصورة نفسها. كل ما عدا الأجواء يعلوهما */
.hw-chs > :not(.hw-chs-bg){position:relative;z-index:2}
.hw-chs-head{grid-row:1}
/* الخلية سطحٌ يفصل النص عن الأجواء — فبلا أجواء لا سطح ولا حدّ */
.hw-chs:not(:has(.hw-chs-bg)) .hw-ch{background:none;backdrop-filter:none;border:0;padding:0}
/* صفّان من الفقرات الكاملة يتجاوزان سقف الطبقة الثانية، وصفٌّ واحد يسعها.
   :where تُبقي الأولوية صفراً فتغلبها قاعدة الجوال بعدها */
:where(.hw-chs-4) .hw-ch1{grid-column:main-start/c 4}
:where(.hw-chs-4) .hw-ch2{grid-column:c 4/c 7}
:where(.hw-chs-4) .hw-ch3{grid-column:c 7/c 10}
:where(.hw-chs-4) .hw-ch4{grid-column:c 10/main-end}
/* ثلاث خلايا متساوية في صف واحد — أربعة أعمدة لكل خلية */
@media (min-width:1200px){
  :where(.hw-chs-3) .hw-ch1{grid-column:main-start/c 5}
  :where(.hw-chs-3) .hw-ch2{grid-column:c 5/c 9}
  :where(.hw-chs-3) .hw-ch3{grid-column:c 9/main-end}
}
/* دون ذلك تتكدّس الثلاث: صفٌّ من ثلاث خلايا ضيّقة يخنق النص، و2+1
   يعيد الخلية الغريبة التي أُصلحت */
@media (max-width:1199px){:where(.hw-chs-3) .hw-ch{grid-column:main}}
.printers.hw-page{padding-block:24px}

/* الطبقة الوحيدة التي تحمل صورة ليست أجواء. نسبة ثابتة لا ارتفاع ثابت:
   القص أفقي فيبقى الموضوع كاملاً (DESIGN §15) */
.hw-fig{padding-block:var(--hw-ch)}
/* بطاقة واحدة بعمودين، بسطح الخلية على أرضية مسطّحة */
.hw-fig .hw-ch{gap:clamp(22px,2.8vw,38px)}
.hw-fig figure{flex:1 1 0;margin:0}
.hw-fig figure img{
  width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.hw-fig-txt{flex:1 1 0}

/* إزاحة عن جهة النص — ولا قلب أفقي لأي صورة */
.p-serv .hw-hero-shot img{object-position:calc(50% - 14% * var(--hw-sn)) 42%}
.p-rep .hw-hero-shot img{object-position:calc(52% - 14% * var(--hw-sn)) 38%}
.p-price .hw-hero-shot img{object-position:calc(56% - 16% * var(--hw-sn)) 46%}

/* --- الحركة: ظهور أبطأ وتدرّج سطراً سطراً --- */
:is(.home-wow,.hwp) .reveal{
  transform:translateY(24px);
  transition:opacity var(--hw-slow) var(--ease-out),transform var(--hw-slow) var(--ease-out);
}
.hw-chs-bg.reveal img{transform:scale(1.045);transition:transform var(--hw-grand) var(--ease-out)}
.hw-chs-bg.reveal.in img{transform:none}
/* الحاوية لا تتلاشى — أبناؤها يتتابعون */
:is(.home-wow,.hwp) .hw-st.reveal{opacity:1;transform:none;transition:none}
.hw-st > *{opacity:0;transform:translateY(18px);transition:opacity var(--hw-slow) var(--ease-out),transform var(--hw-slow) var(--ease-out)}
.hw-st.in > *{opacity:1;transform:none}
.hw-st.in > :nth-child(2){transition-delay:70ms}
.hw-st.in > :nth-child(3){transition-delay:140ms}
.hw-st.in > :nth-child(4){transition-delay:210ms}
.hw-st.in > :nth-child(5){transition-delay:280ms}
@keyframes hw-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hw-hero-copy > *{animation:hw-in 650ms var(--ease-out) both;animation-delay:calc(60ms + var(--i,0) * 90ms)}
.hw-hero-shot{animation:hw-in 900ms var(--ease-out) 120ms both}

/* --- الجوال: إعادة ترتيب لا تكديس --- */
@media (max-width:999px){
  .hw-ch1,.hw-ch2,.hw-ch3,.hw-ch4{grid-column:main}
}
@media (max-width:900px){
  .hw-page{
    grid-template-columns:[full-start] var(--hw-gut)
      [main-start] repeat(4,[c] minmax(0,1fr)) [main-end] var(--hw-gut) [full-end];
  }
  .hw-page > *{grid-column:main;grid-row:auto}
  /* العنوان والأزرار أولاً. المحدّد مركّب ليغلب .hwp .hw-hero بترتيب المصدر */
  :is(.home-wow,.hwp) .hw-hero{min-height:auto;padding-block:96px 0;align-content:start}
  .hw-hero-copy{align-self:start}
  .hw-hero-shot img{object-position:50% 44%}
  /* النص يملأ العرض هنا فالتدرّج الجانبي لا يحميه — حجاب رأسي أعمق */
  .hw-hero::before{background:linear-gradient(to top,rgba(10,10,11,.93) 42%,rgba(10,10,11,.74) 100%)}
  /* النص يملأ العرض فلا تدرّج جانبي يحميه — حجاب رأسي أعمق للداخلية */
  .hwp .hw-hero::before{background:linear-gradient(to top,rgba(10,10,11,.96) 40%,rgba(10,10,11,.89) 100%)}
  .hw-hero .spec-card{grid-column:main;grid-row:auto;margin-block-start:clamp(22px,4vh,34px)}
  .hw-ch .hw-num{font-size:clamp(58px,17vw,88px);margin:0 0 -.1em}
  .hw-ch-txt{align-self:auto;padding-block:0}
  .hw-fig .hw-ch{flex-direction:column;align-items:stretch}
  /* الرحلة عمود واحد */
  .hw-path-line{display:none}
  .hw-path-row{grid-auto-flow:row;gap:24px}
  .hw-path-row li{padding-block-start:0;padding-inline-start:26px}
  .hw-path-row li::before{top:12px}
  .hw-path-row b{font-size:40px}
  .hw-path-row p{max-width:32ch}
  /* الأعمال: صورة بعرض الشاشة ثم نصها */
  .hw-fin-in{grid-column:main}
  .hw-belt span{padding-inline:18px;gap:18px;letter-spacing:.16em}
}

/* ---------- تقليل الحركة: يسقط التحريك والتكبير ويبقى كل المحتوى ---------- */
@media (prefers-reduced-motion:reduce){
  /* انتقال خطوات نموذج الطلب يسقط والمحتوى يبقى ظاهراً */
  .ov7-step:not([hidden]){animation:none}
  /* الرئيسية: تسقط الإزاحة والتكبير والدوران، ويبقى المحتوى كاملاً ظاهراً */
  .hw-belt-track,html[dir="rtl"] .hw-belt-track{animation:none}
  .hw-hero-copy > *,.hw-hero-shot{animation:none}
  :is(.home-wow,.hwp) .reveal{transform:none}
  .hw-chs-bg.reveal img,.hw-chs-bg.reveal.in img{transform:none;transition:none}
  .hw-st > *{opacity:1;transform:none;transition:none}
  .hw-st.in > *{transition-delay:0ms}
  .hw-path-line i{transition:none}
  .hw-link i,.btn i,.hw-chev{transition:none}
  .hw-row,.hw-row .ico,.nav-links a{transition-property:color,border-color}
  .hw-row:active,.nav-links a:hover,.hw-rows .hw-row:hover,
  .hw-rows .hw-row:hover .ico{transform:none}
  .hw-strip-track{animation:none}
  .hw-thumb:hover{transform:none}
  html[dir="rtl"] .hw-link:hover i,html[dir="ltr"] .hw-link:hover i,
  html[dir="rtl"] .btn:hover i,html[dir="ltr"] .btn:hover i,
  .hw-row:hover .hw-chev{transform:none}
  .nav-links a:not(.nav-cta)::after{transition:none}
}