/* ============================================================
   ألور أوتو سيرفيس — core.css
   النظام البصري مقروء من الموقع الحالي (تقرير ٠١ سبتمبر ٢٠٢٦).
   ممنوع تعديل الملف المبني — التعديل هنا وبعدين إعادة بناء.
   ============================================================ */

/* ---------- 1. الخط ----------
   IBM Plex Sans Arabic — وزنين بس (400 / 700).
   تحذير محفور: subset العربي مافيهوش أرقام لاتينية خالص (٠ من ١٠).
   عشان كده الـ unicode-range مكتوبة صراحةً — من غيرها الأرقام
   (10,000 كم · +201202222081) هتقع على خط النظام.                    */

@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0300-0304,U+0308,U+2013-2026,U+2039-203A,U+2044,U+20AC,U+2122,
    U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0300-0304,U+0308,U+2013-2026,U+2039-203A,U+2044,U+20AC,U+2122,
    U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+2010,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+2010,U+FB50-FDFF,U+FE70-FEFF;
}

/* ---------- 2. التوكنز ---------- */
:root{
  /* لون واحد بس بيقود العين */
  --primary:#C16A57;
  --ground:#101010;
  --surface:#1C1C1C;
  --headline:#FFFFFF;
  --body:rgba(255,255,255,.6);
  --soft:rgba(255,255,255,.1);
  --hair:#FFFFFF1A;
  --pill-bg:#FF4D240D;
  --silver-1:#FDFDFD;
  --silver-2:#9B9B9B;

  /* الحاوية */
  --max:1176px;
  --gutter:20px;

  /* الاستدارات */
  --r-card:16px; --r-acc:12px; --r-img:11px; --r-btn:6px; --r-ico:5px; --r-pill:100px;

  /* الهيدر — تقدير لحد ما يوصل uicore-global.css */
  --nav-h:88px;
  --nav-h-scrolled:68px;
  --logo-h:44px;

  /* الحركة */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* ظهور هادي: بيبدأ بسرعة وبيهدى في الآخر */
  --enter:1100ms;
}

/* ---------- 3. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.9;
  letter-spacing:0;            /* ممنوع التتبّع على العربي — بيكسر اتصال الحروف */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* كل رقم لازم يتلف في .num وإلا الاتجاه بيعكسه */
/* الأرقام لاتينية وسياقها LTR — من غير كده «(+20) 120 222 2081» بينعكس */
.num{unicode-bidi:isolate;direction:ltr;font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- 3ب. خطوط الشبكة + الخطين المتحركين ----------
   منقولة بالظبط من ثيم UiCore على الموقع الحالي:
   أعمدة رمادي 8% (٥ ديسكتوب · ٣ تابلت · ٢ موبايل)، وخطين بلون البراند
   على حافتي الحاوية نازلين لتحت، بسرعتين مختلفتين عشان مايتزامنوش.
   CSS بس، مفيش ماركب ولا JS.

   الأداء: الكل position:fixed بطول الشاشة بس، والخطين بيتحركوا بـtransform.
   النسخة الأولى كانت بتحرّك background-position على عمود طوله الصفحة كلها
   (+٦٠٠٠px) — ده repaint كل فريم حتى والزائر واقف، والسكرول كان بيهنّج.
   transform بيتعمل على كارت الشاشة من غير ما يرسم حاجة من الأول.        */
html{
  --grid-cols:5; --grid-w:min(95%,var(--max));
  --grid-line:rgba(163,163,163,.08);
}
@media(max-width:1024px){html{--grid-cols:3}}
@media(max-width:767px){html{--grid-cols:2}}
html::before,body::before,body::after{
  content:"";position:fixed;top:0;pointer-events:none;
}
html::before{
  inset-inline:0;bottom:0;margin-inline:auto;max-width:var(--grid-w);z-index:0;
  border-right:1px solid var(--grid-line);
  background:linear-gradient(to right,var(--grid-line) 1px,transparent 0) repeat-x;
  background-size:calc(100% / var(--grid-cols)) 100%;
}
body::before,body::after{
  width:1px;height:25vh;z-index:1;
  background:linear-gradient(to top,var(--primary),transparent);
  inset-inline-start:calc((100% - var(--grid-w)) / 2);
  transform:translateY(-25vh);will-change:transform;
  animation:beam 7.6s linear 1s infinite;
}
body::after{
  inset-inline-start:auto;inset-inline-end:calc((100% - var(--grid-w)) / 2);
  animation-duration:6s;animation-delay:0s;
}
/* بينزل من فوق الشاشة لتحتها في ٦٠٪ من الوقت، وبعدين فاصل قبل اللفّة الجاية */
@keyframes beam{
  0%{transform:translateY(-25vh)}
  60%,100%{transform:translateY(100vh)}
}
@media(prefers-reduced-motion:reduce){body::before,body::after{display:none}}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:4px;
}
.skip{
  position:absolute;inset-inline-start:-9999px;top:8px;z-index:200;
  background:var(--primary);color:#fff;padding:10px 18px;border-radius:var(--r-btn);
}
.skip:focus{inset-inline-start:8px}

/* ---------- 4. العنوان الفضّي ---------- */
/* العناوين الكبيرة مش أبيض صافي — تدرّج فضّي متقصوص على شكل الحروف */
.silver{
  background:linear-gradient(90deg,var(--silver-1) 0%,var(--silver-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tint{color:var(--primary)}

/* ---------- 5. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--primary);color:#fff;
  font-size:16px;font-weight:400;line-height:1;letter-spacing:-.01em;
  padding:16px 32px;border-radius:var(--r-btn);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:#b25f4d;transform:translateY(-1px)}
.btn--ghost{
  background:rgba(255,255,255,.1);color:var(--headline);
  border:1px solid var(--hair);
}
.btn--ghost:hover{background:var(--primary);color:#fff}
@media(max-width:1024px){.btn{font-size:15px}}
@media(max-width:767px){.btn{font-size:14px;padding:13px 35px}}

/* ---------- 6. الهيدر ---------- */
/* شفاف فوق الهيرو · صلب لما تنزل · بيختفي نازل ويرجع طالع */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),transform .35s var(--ease);
}
.nav.is-solid{
  height:var(--nav-h-scrolled);
  background:rgba(16,16,16,.96);
  border-bottom-color:var(--hair);
}
.nav.is-hidden{transform:translateY(-100%)}

.nav__inner{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  width:100%;display:flex;align-items:center;gap:28px;
}
.nav__logo img{height:var(--logo-h);width:auto;transition:height .3s var(--ease)}
.nav.is-solid .nav__logo img{height:36px}
/* بديل مؤقت لحد ما توصل صورة اللوجو */
.nav__logo .placeholder{
  height:var(--logo-h);aspect-ratio:412/145;display:grid;place-items:center;
  border:1px dashed var(--hair);border-radius:var(--r-ico);
  color:var(--primary);font-size:13px;
}

.nav__menu{display:flex;align-items:center;gap:26px;margin-inline-start:auto}
.nav__menu a{
  font-size:15px;color:rgba(255,255,255,.78);position:relative;padding-block:6px;
  transition:color .2s var(--ease);
}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--headline)}
.nav__menu a[aria-current="page"]::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;background:var(--primary);
}
.nav__cta{margin-inline-start:8px}
.nav__cta .btn{padding:12px 24px;font-size:15px}

.nav__burger{
  display:none;width:44px;height:44px;margin-inline-start:auto;
  align-items:center;justify-content:center;
}
.nav__burger span{
  display:block;width:22px;height:2px;background:var(--headline);position:relative;
  transition:background .2s var(--ease);
}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;inset-inline-start:0;width:22px;height:2px;background:var(--headline);
  transition:transform .3s var(--ease);
}
.nav__burger span::before{top:-7px}
.nav__burger span::after{top:7px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* الدروار — القالب الحالي بيقلب للموبايل عند 1025px */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:rgba(16,16,16,.98);backdrop-filter:blur(20px);
  padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-size:20px;color:var(--headline);padding:14px 0;
  border-bottom:1px solid var(--hair);
}
.drawer .btn{margin-top:24px;align-self:flex-start}

@media(max-width:1025px){
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* ---------- 7. الهيرو ---------- */
.hero{
  position:relative;isolation:isolate;
  padding-block:calc(var(--nav-h) + 120px) 88px;
  overflow:hidden;
}
/* قصّتين مختلفتين مش مقاس واحد: الديسكتوب عرضية والموبايل طولية.
   الموبايل بينزّل 71 KB بدل 137. */
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background-image:url("img/hero-mobile.webp");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-color:#1a1a1a;
}
@media(min-width:768px){
  .hero__bg{
    background-image:url("img/hero-desktop.webp");
    background-position:center left;   /* العربية الخضرا ناحية الشمال،
                                          والتدرّج شفاف من الناحية دي */
  }
}
/* الصفحة بتعدّي فوق الصورة. ممنوع background-attachment:fixed —
   بيقفل السكرول السريع في المتصفح وبيعيد رسم الصورة كلها كل فريم
   (ده اللي كان مهنّج السكرول). البديل: الخلفية نفسها fixed في طبقة
   لوحدها، والقسم بيقصّها بـclip-path (overflow:hidden مابيقصّش fixed). */
@media(min-width:1025px){
  .hero{clip-path:inset(0)}
  .hero__bg{position:fixed;will-change:transform}
}
/* الحجاب اللي بين الصورة والنص.
   الأرقام اتظبطت بالقياس مش بالنظر: النص الصغير على الموبايل كان
   تباينه 1.3:1 فوق بقعة الأرضية المنوّرة — يعني مش مقروء. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(-110deg,#101010 62%,#0E0E0E1F 97%);
  opacity:.86;
}
.hero__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

.hero h1{
  max-width:809px;padding-top:16px;
  font-size:65px;line-height:1.2;font-weight:700;
  text-align:right;
}
/* السطرين مكتوبين كسطرين في الأصل — نخليهم كده بدل ما اللف يقسمهم غلط */
.hero h1 span{display:block}
/* كانت 29٪ من الحاوية = ١١٣px للعلامة الواحدة، فبتلزق في ذيول
   حروف العنوان. الحل: سقف ثابت للارتفاع + مسافة أوضح. */
.hero__brands{
  display:flex;flex-direction:row;align-items:center;gap:22px;
  margin-top:30px;
}
.hero__brands img{height:86px;width:auto;max-width:none;flex:none;opacity:.92}
.hero__lede{max-width:640px;font-size:13px;line-height:1.9}
.hero__actions{display:flex;flex-direction:row;gap:16px;margin-top:24px;flex-wrap:wrap}

.counter{display:flex;flex-direction:row;align-items:center;gap:16px;margin-top:10px}
.counter__num{
  color:#FFF;font-size:26px;font-weight:700;line-height:1;
  display:flex;align-items:baseline;gap:2px;
}
.counter__label{color:var(--headline);font-size:13px;line-height:1.5;max-width:34ch}

@media(max-width:767px){
  .hero{padding-block:calc(var(--nav-h) + 80px) 10px}
  /* على الموبايل النص في النص، فالتدرّج الجانبي مابيحميهوش.
     بقى رأسي: خفيف فوق عشان العربية تبان، وبيتقل تحت مكان النص الصغير. */
  .hero__scrim{
    background-image:linear-gradient(180deg,
      rgba(16,16,16,.58) 0%,
      rgba(16,16,16,.70) 28%,
      rgba(16,16,16,.93) 56%,
      #101010 100%);
    opacity:1;
  }
  .hero__col{align-items:center;text-align:center;gap:5px}
  .hero h1{font-size:33px;line-height:1.2;text-align:center}
  .hero__brands{gap:18px;margin-top:26px;justify-content:center}
  .hero__brands img{height:58px}
  .hero__actions{gap:10px;margin-top:25px;justify-content:center}
  .counter{margin-top:25px;padding-bottom:5px;justify-content:center}
}

/* ---------- 8. شريط اللوجوهات ---------- */
.logos{padding-block:40px;overflow:hidden}
.logos__mask{
  overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.logos__track{
  display:flex;width:max-content;gap:60px;direction:ltr;
  animation:marquee 70s linear infinite;
}
.logos:hover .logos__track{animation-play-state:paused}
.logos__item{
  flex:none;width:265px;
  aspect-ratio:500/250;display:grid;place-items:center;
  opacity:.55;transition:opacity .3s var(--ease);
}
.logos__item:hover{opacity:1}
.logos__item .slot{
  width:100%;height:100%;border:1px dashed var(--hair);border-radius:var(--r-ico);
  display:grid;place-items:center;font-size:11px;color:rgba(255,255,255,.45);
}
@keyframes marquee{to{transform:translateX(-50%)}}

@media(max-width:1024px){
  .logos__track{gap:48px}
  .logos__item{width:215px}
}
@media(max-width:767px){
  .logos{padding-block:0}
  .logos__track{gap:20px}
  .logos__item{width:180px}
}

/* ---------- 9. حركة الدخول ---------- */
/* .rv على الحاوية = كل ولادها بيدخلوا واحد ورا التاني.
   .rv-item على عنصر لوحده.
   علي 2026-11-02: ظهور هادي لكل تفاصيل الصفحة أول مرة مع السكرول (تلاشي +
   طلوع). بقى animation مش transition: transition الهوفر على الكروت كان
   بيلغي الظهور ويخلّيه يتنطّ (ده اللي كان مش انسيابي).
   حماية الفراغ الأسود (ملاحظة المراجعة ١، 2026-11-01) — الحارس reveal-safe:
   · الحركة قصيرة (٠٫٩ث) والتدرّج سقفه ٢٨٠ms، فالعنصر بيبان أول ما يدخل.
   · أي عنصر الزائر عدّاه بسكرول سريع بيظهر على طول من غير حركة (.is-past).
   · من غير JS أو مع تقليل الحركة كل حاجة ظاهرة. */
.rv>*:not(.is-in),.rv-item:not(.is-in){opacity:0}
.rv>.is-in,.rv-item.is-in{animation:reveal .9s var(--ease-out) var(--d,0ms) backwards}
.is-past,.is-past::after{animation:none !important;transition:none !important}
@keyframes reveal{from{opacity:0;transform:translateY(22px)}}
/* الفواصل بتتفرد من النص للجناب */
.rule:not(.is-in)::after{transform:scaleX(0)}
.rule.is-in::after{transition:transform 1.2s var(--ease-out)}
/* الأكورديون المفتوح مالوش لازمة يتحرك */
.faq__item.is-open{transition-delay:0ms}

/* عمود واحد — أقسام الأسئلة والتواصل */
.stack{display:flex;flex-direction:column;gap:32px}
.stack .faq{max-width:820px;margin-inline:auto;width:100%}
.sec-cta{margin-top:24px;text-align:center}

/* fadeInUp + blur — أهم حركة في الموقع، بتأخير متدرّج 250/500/750 */
.enter{opacity:0;transform:translateY(28px);filter:blur(9px)}
.enter.is-in{
  opacity:1;transform:none;filter:none;
  transition:opacity var(--enter) var(--ease),
             transform var(--enter) var(--ease),
             filter var(--enter) var(--ease);
  transition-delay:var(--d,0ms);
}
.enter--zoom{opacity:0;transform:scale(.86);filter:none}
.enter--zoom.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rv>*,.rv-item{opacity:1 !important;transform:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .enter{opacity:1;transform:none;filter:none}
  .hero__bg,.why__bg{position:absolute}
}

/* ---------- 10. مكان الصور الناقصة ---------- */
/* تتشال كلها لما توصل الصور. بتحجز نفس المقاسات بالظبط. */
.slot{
  display:grid;place-items:center;text-align:center;
  border:1px dashed var(--hair);border-radius:var(--r-ico);
  font-size:11px;line-height:1.4;color:rgba(255,255,255,.4);
  min-height:100%;
}

/* العناوين مكتوبة سطرين في الأصل — نخليهم سطرين بدل ما اللف يقسمهم غلط */
.hero h1 > span:not(.num),.sec-head h2 > span:not(.num),
.cta h2 > span:not(.num){display:block}

/* ============================================================
   الدفعة ٢ — باقي الصفحة
   ============================================================ */

/* ---------- 11. هيكل الأقسام ---------- */
.sec{padding-block:40px}
.sec--tight{padding-block:30px}
.sec--wide{padding-block:60px}
@media(max-width:767px){
  .sec,.sec--tight,.sec--wide{padding-block:20px}
}

.pill{
  display:inline-block;background:var(--pill-bg);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:8px 22px;font-size:14px;color:var(--headline);
}
.sec-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sec-head--center{align-items:center;text-align:center}
.sec-head h2{font-size:46px;line-height:1.3;font-weight:400;max-width:809px}
.sec-head--42 h2{font-size:42px;line-height:1.2}
.sec-head--44 h2{font-size:44px;line-height:1.2}
.sec-head p{max-width:62ch;font-size:15px}
@media(max-width:767px){
  .sec-head h2,.sec-head--42 h2,.sec-head--44 h2{font-size:33px}
}

/* صفّين جنب بعض */
.row2{display:flex;flex-direction:row;gap:0 64px;align-items:flex-start}
.row2>*{flex:1;min-width:0}
.row2--center{align-items:center;justify-content:center}
@media(max-width:1024px){.row2,.row2--center{flex-direction:column;gap:32px 0}}

/* ---------- 12. بطاقة الخدمة ---------- */
/* الإطار الدوّار: زاوية متحرّكة بدل تدوير العنصر نفسه،
   عشان الحلقة تفضل مستطيلة وهي بتلف. */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}

.cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px 72px;
  max-width:948px;margin-inline:auto;
}
@media(max-width:1024px){.cards{max-width:100%;gap:24px 32px}}
@media(max-width:767px){.cards{grid-template-columns:1fr;gap:16px}}

.card{
  position:relative;isolation:isolate;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:24px;
}
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--r-card);
  padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 68%,var(--primary) 84%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:ang 12s linear infinite;
}
@keyframes ang{to{--ang:360deg}}

.card__row{display:flex;gap:12px;align-items:flex-start}
.card__ico{flex:none;width:24px;height:24px;color:var(--primary);margin-top:4px}
.card__ico svg{width:24px;height:24px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;line-height:1.4;font-weight:700;color:var(--headline);margin-bottom:6px}
.card p{font-size:15px;line-height:22px;text-align:justify}
@media(max-width:767px){
  .card{padding:18px}
  .card p{font-size:14px}
  .card__ico{margin-top:2px}
}

/* الفرد على الموبايل بس: ٣ بطاقات وبعدين زرار.
   لازم تفضل جوّه الميديا كويري — برّه بتخفي بطاقات على الديسكتوب. */
.more-btn{display:none;width:100%;justify-content:center;margin-top:16px}
@media(max-width:767px){
  .cards.is-collapsed>*:nth-child(n+4){display:none}
  .cards.is-expanded>*:nth-child(n+4){display:block}
  .more-btn{display:inline-flex}
}

/* ---------- 13. قسم «لماذا تثق بنا» ---------- */
.why{position:relative;isolation:isolate;padding-block:180px 88px;overflow:hidden}
.why__bg{
  position:absolute;inset:0;z-index:-2;background-color:#1a1a1a;
  background-image:url("img/why-mobile.webp");
  background-size:cover;background-position:center;
}
@media(min-width:768px){
  .why__bg{background-image:url("img/why-desktop.webp")}
}
/* نفس حل الهيرو — طبقة fixed مقصوصة بدل background-attachment:fixed */
@media(min-width:1025px){
  /* inset(2px 0) مش inset(0): الصورة الـfixed بتترسم على طبقة لوحدها والقصّ
     بتاعها بيتقرّب لبكسل كامل، فكان بيفضل سطر من الصورة برّه الـscrim
     تحت آخر القسم = خط باهت فوق الفاصل (علي 2026-11-02). بنقص 2px عشان يغطي التقريب على الشاشات العادية (1x) كمان. */
  .why{clip-path:inset(2px 0)}
  .why__bg{position:fixed;will-change:transform}
}
.why__scrim{
  position:absolute;inset:0;z-index:-1;opacity:1;
  background-image:linear-gradient(-136deg,rgba(16,16,16,.95) 58%,rgba(16,16,16,.55) 100%);
}
.why__marks{display:flex;flex-direction:row;gap:20px;align-items:center;margin-top:20px}
.why__marks img{height:74px;width:auto;flex:none;opacity:.92}
.why .cards{grid-template-columns:1fr;gap:24px;max-width:none}
@media(max-width:767px){
  .why{padding-block:40px 0}
  /* كان أسود صافي ١٠٠٪ فالصورة مكانتش بتبان خالص على الموبايل */
  .why__scrim{
    background-image:linear-gradient(180deg,
      rgba(16,16,16,.62) 0%,rgba(16,16,16,.88) 30%,#101010 70%);
    opacity:1;
  }
  .why__marks{justify-content:center}
  .why__marks img{height:56px}
}

/* ---------- 14. آراء العملاء ---------- */
.glow{
  height:1px;margin-block:24px;
  background:radial-gradient(at center center,#E1926F 0%,#F2295B00 36%);
}
.quotes{position:relative;max-width:820px;margin-inline:auto}
.quotes__stage{display:grid}
.quote{
  grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),visibility .7s;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:32px;text-align:center;cursor:grab;
}
.quote.is-active{opacity:1;visibility:visible}
.quote p{font-size:22px;line-height:26px;font-weight:400;color:var(--headline)}
.quote footer{margin-top:18px;font-size:15px}
.quote footer b{display:block;color:var(--primary);font-weight:400}
.quotes__dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.quotes__dots button{
  width:8px;height:8px;border-radius:50%;background:var(--soft);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.quotes__dots button[aria-selected="true"]{background:var(--primary);width:22px;border-radius:4px}
@media(max-width:767px){
  .quote{padding:22px}
  .quote p{font-size:18px;line-height:1.4}
}

/* ---------- 15. الباقات ---------- */
.tabs{display:flex;gap:8px;margin-bottom:24px}
.tabs button{
  flex:1;padding:14px 18px;border-radius:var(--r-btn);
  background:var(--surface);border:1px solid var(--hair);
  color:rgba(255,255,255,.7);font-size:16px;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.tabs button[aria-selected="true"]{color:var(--headline);border-color:var(--primary);background:rgba(193,106,87,.12)}
@media(max-width:767px){.tabs{justify-content:center}.tabs button{font-size:14px;padding:12px 10px}}

.models{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* القاعدة القديمة كانت display:block وبتغلب .model لأنها أقوى — اتحصرت
   على الـslot بس. */
.models .slot{
  display:block;border-radius:var(--r-img);overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);aspect-ratio:1;
}
.tabpanel[hidden]{display:none}

/* ---------- 16. الأسئلة الشائعة ---------- */
.faq{max-width:820px}
.faq__item{background:var(--surface);border-radius:var(--r-acc);margin-bottom:8px;overflow:hidden}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;font-size:17px;color:var(--headline);text-align:start;line-height:1.6;
}
.faq__q::after{
  content:"";flex:none;width:14px;height:14px;
  background:currentColor;color:var(--primary);
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq__item.is-open .faq__q::after{transform:rotate(45deg);opacity:.55}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{
  margin:0 20px 18px;padding:16px 18px;background:var(--soft);
  border-radius:var(--r-btn);font-size:16px;line-height:1.9;
}
@media(max-width:767px){.faq__q{font-size:14px}.faq__a p{font-size:14px}}

/* ---------- 17. قايمة التواصل ---------- */
.contact-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.contact-list a,.contact-list span{
  display:flex;align-items:center;gap:12px;font-size:16px;color:var(--headline);
}
.contact-list .ic{
  flex:none;width:34px;height:34px;border-radius:var(--r-ico);
  background:var(--headline);color:var(--surface);
  display:grid;place-items:center;
}
.contact-list .ic svg{width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-list a:hover{color:var(--primary)}

/* ---------- 18. الفروع ---------- */
.branches{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
@media(max-width:1024px){.branches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.branches{grid-template-columns:1fr}}
.branch h3{font-size:16px;font-weight:700;color:var(--headline)}
.branch p{font-size:12px;line-height:1.8;margin-bottom:10px}
.map{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-img);overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);
  display:grid;place-items:center;width:100%;
}
.map__hint{display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-size:13px}
.map__hint .btn{padding:10px 20px;font-size:14px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 19. صندوق الدعوة ---------- */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--surface);border-radius:var(--r-card);
  background-image:linear-gradient(90deg,var(--surface) 13%,#000 39%);
  padding:40px 60px;
}
.cta i{position:absolute;border-radius:50%;opacity:.5;z-index:-1;
  -webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
.cta i:nth-of-type(1){width:260px;height:260px;background:var(--primary);top:-80px;inset-inline-end:8%;animation:drift1 8s ease-in-out infinite alternate}
.cta i:nth-of-type(2){width:200px;height:200px;background:#C16A577D;bottom:-90px;inset-inline-end:38%;animation:drift2 11s ease-in-out infinite alternate}
.cta i:nth-of-type(3){width:180px;height:180px;background:rgba(255,255,255,.3);top:8%;inset-inline-start:6%;animation:drift3 9s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-80px,70px) scale(1.25)}}
@keyframes drift2{to{transform:translate(100px,-60px) scale(.8)}}
@keyframes drift3{to{transform:translate(50px,80px) scale(1.15)}}
.cta h2{font-size:44px;line-height:1.2;font-weight:400;max-width:620px}
.cta p{margin:12px 0 24px;max-width:52ch}
.cta__actions{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:1024px){.cta{padding:72px 30px}}
@media(max-width:767px){
  .cta{padding:40px 10px;text-align:center}
  .cta h2{font-size:33px}
  .cta p{margin-inline:auto}
  .cta__actions{justify-content:center;gap:10px}
}

/* ---------- 20. الفوتر ---------- */
.foot{padding-block:88px 120px;border-top:1px solid var(--hair);margin-top:40px}
.foot__grid{display:flex;flex-direction:row;gap:0 64px;align-items:flex-start}
.foot__brand{flex:1.6;min-width:0}
.foot__brand .placeholder{
  height:56px;aspect-ratio:641/229;display:grid;place-items:center;
  border:1px dashed var(--hair);border-radius:var(--r-ico);color:var(--primary);font-size:13px;
}
.foot__hours{margin-top:16px;font-size:15px;max-width:34ch}
.foot__social{display:flex;gap:10px;margin-top:18px}
.foot__social a{
  width:38px;height:38px;border-radius:var(--r-ico);background:var(--soft);
  display:grid;place-items:center;transition:background .25s var(--ease)
}
.foot__social a:hover{background:var(--primary)}
.foot__social svg{width:17px;height:17px;
  fill:none;stroke:var(--headline);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot__col{flex:1;min-width:0}
.foot__col h3{font-size:17px;font-weight:700;color:var(--headline);margin-bottom:14px}
.foot__col li{margin-bottom:10px}
.foot__col a{font-size:15px}
.foot__col a:hover{color:var(--primary)}
.foot__legal{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);
  font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot__legal b{color:var(--headline);font-weight:400}
@media(max-width:1024px){
  .foot{padding-block:56px 64px}
  .foot__grid{flex-direction:column;gap:36px 0}
}

/* ---------- 21. الصور الحقيقية ----------
   كل صورة فيها width/height في الـHTML عشان المتصفح يحجز مكانها
   قبل ما تحمّل — من غير كده الصفحة بتنطّ وانت بتقرا. */
.nav__logo img{height:var(--logo-h);width:auto;object-fit:contain}
.hero__brands img,.why__marks img{object-fit:contain}
.logos__item img{width:100%;height:100%;object-fit:contain}
.foot__brand img{height:56px;width:auto;object-fit:contain}
.sec img{width:100%;height:auto}


/* ---------- 22. آراء العملاء ----------
   ملخّص فوق وكروت بتتزحلق تحت — نفس فكرة دكان بفورمات ألور.
   مهم: الملخّص ده نص ظاهر للزائر بس. ممنوع يتحوّل لتقييم مجمّع
   في الـschema — ألور مالهاش كيان بزنس مستقل. */
.score{
  max-width:560px;margin:26px auto 0;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:24px 28px;text-align:center;
}
.score[data-placeholder]{border-style:dashed}
.score__top{display:flex;align-items:center;justify-content:center;gap:14px}
.score__val{font-size:40px;font-weight:700;color:var(--headline);line-height:1}
.score__stars{display:flex;gap:4px}
.score__stars svg{width:22px;height:22px;color:var(--primary)}
.score__stars .is-half{opacity:.35}
.score__meta{margin-top:10px;font-size:14px}
.score__link{
  display:inline-block;margin-top:14px;color:var(--primary);font-size:15px;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.score__link:hover{border-bottom-color:var(--primary)}

.reviews{margin-top:24px}
.reviews__mask{
  overflow:hidden;direction:ltr;padding-block:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.reviews__track{
  display:flex;gap:20px;width:max-content;direction:ltr;
  animation:marquee 120s linear infinite;
}
.reviews:hover .reviews__track,
.reviews.is-held .reviews__track{animation-play-state:paused}
.review{
  flex:0 0 340px;direction:rtl;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:22px;display:flex;flex-direction:column;gap:14px;
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review__stars{display:flex;gap:3px}
.review__stars svg{width:16px;height:16px;color:var(--primary)}
.review__src{
  font-size:12px;color:rgba(255,255,255,.55);
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px 12px;
}
.review:hover{transform:scale(1.05);border-color:rgba(193,106,87,.55);z-index:2}
.review p{font-size:16px;line-height:1.8;color:var(--headline);flex:1}
.review footer{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--hair);padding-top:14px;
}
.review__av{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(193,106,87,.16);border:1px solid var(--hair);
  color:var(--primary);display:grid;place-items:center;font-size:15px;
}
.review footer b{display:block;color:var(--headline);font-weight:400;font-size:15px}
.review__meta{font-size:12.5px;color:rgba(255,255,255,.5)}
@media(max-width:767px){
  .score{padding:20px}
  .score__val{font-size:32px}
  .review{flex-basis:78vw}
  .review p{font-size:15px}
}

/* ---------- 23. الفروع ---------- */
.branches{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
@media(max-width:767px){.branches{grid-template-columns:1fr}}
.branch{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:22px;
}
.branch.is-first{border-color:rgba(193,106,87,.55)}
.branch h3{font-size:18px;font-weight:700;color:var(--headline);line-height:1.5}
.branch__n{color:var(--primary)}
.branch p{font-size:14px;line-height:1.8;margin:6px 0 16px}
.map{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-img);overflow:hidden;
  background:
    linear-gradient(135deg,rgba(193,106,87,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px),
    #151515;
  border:1px solid var(--hair);cursor:pointer;width:100%;
  display:grid;place-items:center;
}
.map__open{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  background:rgba(16,16,16,.85);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:8px 16px;font-size:13px;color:var(--headline);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.map:hover .map__open{background:var(--primary);border-color:var(--primary)}
.map__hint{font-size:13px;color:rgba(255,255,255,.45);padding:0 16px;text-align:center}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.contacts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin-top:34px;
}
.tile{display:flex}
.tile > *{
  flex:1;display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:16px 18px;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.tile a:hover{border-color:rgba(193,106,87,.55);background:rgba(193,106,87,.08)}
.tile__ic{
  flex:none;width:38px;height:38px;border-radius:var(--r-ico);
  background:rgba(193,106,87,.14);color:var(--primary);display:grid;place-items:center;
}
.tile__ic svg{width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile__txt{display:flex;flex-direction:column;min-width:0}
.tile__lab{font-size:12px;color:rgba(255,255,255,.45)}
.tile__val{font-size:15px;color:var(--headline);overflow-wrap:break-word}

/* ---------- 24. عنوان شريط الشركات ---------- */
.clients-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.clients-head h2{font-size:26px;font-weight:700;color:var(--headline);line-height:1.5}
.arrow-link{
  color:var(--primary);font-size:15px;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.arrow-link:hover{border-bottom-color:var(--primary)}
.arrow-link span{display:inline-block;transition:transform .25s var(--ease)}
.arrow-link:hover span{transform:translateX(-4px)}
@media(max-width:767px){
  .clients-head h2{font-size:20px}
  .arrow-link{font-size:14px}
}

/* عناوين بولد — لازم تبقى بنفس قوة .sec-head h2 وإلا مابتشتغلش */
h1.is-bold,h2.is-bold,h3.is-bold,
h1 span.is-bold,h2 span.is-bold,h3 span.is-bold{font-weight:700}

/* دخول أهدأ لصورة العربية: كبر بسيط بدل الطلوع */
.rv-soft.is-in{animation:reveal-soft 1.1s var(--ease-out) var(--d,0ms) backwards}
@keyframes reveal-soft{from{opacity:0;transform:scale(.965)}}

/* ---------- 25. الخرايط ----------
   بقت بتتحمّل لوحدها مع loading="lazy" — يعني لما تقرب من الشاشة بس،
   مش مع فتح الصفحة. */
.map{cursor:default}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;filter:grayscale(.25)}
.map__open{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  background:rgba(16,16,16,.88);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:8px 16px;font-size:13px;color:var(--headline);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.map__open:hover{background:var(--primary);border-color:var(--primary)}

/* ---------- 26. صندوق الدعوة ---------- */
.cta{text-align:center}
.cta h2{margin-inline:auto}
.cta__tel{
  display:inline-block;margin-top:10px;
  font-size:44px;font-weight:700;line-height:1.1;color:var(--primary);
  transition:opacity .25s var(--ease);
}
.cta__tel:hover{opacity:.82}
.cta p{margin:14px auto 24px;max-width:46ch}
.cta__actions{justify-content:center}
@media(max-width:767px){.cta__tel{font-size:30px}}

/* ---------- 27. زرار واتساب العائم ----------
   بلون ألور مش أخضر واتساب — الزرار جزء من الموقع مش إعلان لتطبيق. */
.wa{
  position:fixed;bottom:22px;left:22px;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s var(--ease);
}
.wa.is-on{opacity:1;transform:none;pointer-events:auto}
.wa:hover{background:#b25f4d}
.wa svg{width:26px;height:26px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.wa{width:50px;height:50px;bottom:16px;left:16px}}

/* ---------- 28. سطر الحقوق ---------- */
.foot__legal{align-items:center}
.foot__legal-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot__group-logo{height:30px;width:auto;flex:none;object-fit:contain}


/* ---------- 29. الفاصل بين الأقسام ----------
   شعاع بلون ألور بعد كل قسم ما عدا الهيرو وشريط الشركات.
   نفس فكرة الفاصل اللي كان فوق آراء العملاء، بس مطبّق على الصفحة كلها. */
.rule{
  max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);
}
.rule::after{
  content:"";display:block;height:1px;
  background:radial-gradient(at center center,#E1926F 0%,rgba(225,146,111,0) 42%);
}
/* الفوتر ورا آخر فاصل، فماعادش محتاج خطه الخاص */
.foot{border-top:0;margin-top:0}

/* ---------- 30. تعديلات الجولة الأخيرة ---------- */

/* كلمة ملوّنة جوّه عنوان فضّي: لازم تلغي قصّ التدرّج وإلا بتطلع شفافة */
.silver .tint{
  background:none;-webkit-text-fill-color:var(--primary);color:var(--primary);
}

/* الفاصل أتقل وأوضح */
.rule::after{
  height:2px;
  background:radial-gradient(at center center,var(--primary) 0%,rgba(193,106,87,0) 58%);
  opacity:.9;
}

/* مؤثرات صندوق الدعوة أسرع */
.cta i:nth-of-type(1){animation-duration:4.5s}
.cta i:nth-of-type(2){animation-duration:6s}
.cta i:nth-of-type(3){animation-duration:5s}

/* علامات الهيرو أكبر */
.hero__brands img{height:104px}
@media(max-width:767px){.hero__brands img{height:66px}}

/* عدّاد الخبرة أكبر */
.counter{gap:18px}
.counter__num{font-size:40px}
.counter__label{font-size:16px;max-width:30ch}
@media(max-width:767px){
  .counter__num{font-size:32px}
  .counter__label{font-size:14px}
}

/* ---------- 31. كروت الآراء بشكل جوجل ----------
   كارت فاتح وإطار أصفر خفيف ونجوم صفرا — الكارت يقرا كأنه مقتبس من جوجل
   مش مصمّم عندنا. الكارت الوحيد الفاتح في الصفحة، وده مقصود.
   كان أبيض صافي #FFF — أنصع حاجة في الصفحة وبيخبط في العين جنب الأسود
   وكروت الموديلات البني. بقى أوف وايت دافي (٣١ أكتوبر ٢٠٢٦). */
.review{
  --rv-bg:#EFEBE7; --rv-chip:#F7F4F1; --rv-line:#DDD6CF; --rv-av:#E4DDD6;
  background:var(--rv-bg);border-color:#F2C14E66;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.review:hover{border-color:#F2C14E;transform:scale(1.05)}
.review__stars svg,.score__stars svg{color:#F2B705}
.review__src{color:#5B5B5B;border-color:var(--rv-line);background:var(--rv-chip)}
.review p{color:#1C1C1C}
.review footer{border-top-color:var(--rv-line)}
.review footer b{color:#1C1C1C}
/* طول كل كارت حسب نصّه — الكروت المتساوية بتبان مصنوعة */
.reviews__track{align-items:flex-start}
.review p{flex:0 1 auto}
.review__meta{color:#6B6B6B}
.review__av{background:var(--rv-av);border-color:var(--rv-line);color:var(--primary)}

/* ---------- 32. توهّج كروت الفروع ---------- */
.branch{transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.branch:hover{
  border-color:rgba(193,106,87,.65);
  box-shadow:0 0 0 1px rgba(193,106,87,.25),0 12px 34px rgba(193,106,87,.22);
}

/* ---------- 33. لوجو المجموعة في الفوتر ---------- */
.foot__legal-brand{display:flex;align-items:center;gap:14px}
.foot__group-logo{height:32px;width:auto;flex:none;object-fit:contain}

/* ---------- 34. تعديلات إضافية ---------- */

/* الفروع الأربعة جنب بعض، وزوم هادي عند الماوس */
.branches{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1024px){.branches{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:767px){.branches{grid-template-columns:1fr}}
.branch{
  padding:18px;
  transition:transform .35s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.branch:hover{transform:scale(1.03)}
.branch h3{font-size:16px}
.branch p{font-size:13px;min-height:2lh}

/* لوجو الماركة جوّه زرار التبويب */
.tabs button{display:flex;align-items:center;justify-content:center;gap:10px}
.tabs button img{height:30px;width:auto;flex:none;object-fit:contain;opacity:.75;
  transition:opacity .25s var(--ease)}
.tabs button[aria-selected="true"] img{opacity:1}
@media(max-width:767px){.tabs button img{height:24px}}

/* رابط تعاقدات الأساطيل — أبيض مش أحمر */
.arrow-link{color:var(--headline)}
.arrow-link:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* علامات «لماذا تثق بنا» أكبر */
.why__marks{gap:26px;margin-top:26px}
.why__marks img{height:104px}
@media(max-width:767px){.why__marks img{height:74px}}

/* ---------- 35. كروت الموديلات ----------
   مؤقتة: الإطار متقطّع لحد ما توصل صور الموديلات الحقيقية،
   ساعتها الصورة بتحل محل اللوجو والإطار يرجع عادي. */
.models[data-placeholder] .model{border-style:dashed}
.model{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  aspect-ratio:1;padding:18px;text-align:center;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-img);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.model:hover{
  transform:translateY(-3px);border-color:rgba(193,106,87,.6);
  background:rgba(193,106,87,.08);
}
.model img{height:46px;width:auto;object-fit:contain;opacity:.85}
.model__name{font-size:16px;color:var(--headline);line-height:1.4}
.model__cta{font-size:12.5px;color:var(--primary)}
@media(max-width:767px){
  .model{padding:14px;gap:8px}
  .model img{height:36px}
  .model__name{font-size:14px}
}

/* ---------- 36. كروت الفروع أطول ---------- */
.branch{padding:20px}
.branch h3{font-size:17px}
.branch p{font-size:13.5px}
.map{aspect-ratio:3/4}
@media(max-width:1024px){.map{aspect-ratio:4/3}}
@media(max-width:767px){.map{aspect-ratio:4/3}}

/* ---------- 37. مؤثرات صندوق الدعوة أسرع ---------- */
.cta i:nth-of-type(1){animation-duration:2.6s}
.cta i:nth-of-type(2){animation-duration:3.4s}
.cta i:nth-of-type(3){animation-duration:3s}

/* ---------- 38. الإيميل في الفوتر ---------- */
.foot__mail{
  display:inline-block;margin-top:14px;font-size:15px;color:var(--headline);
  border-bottom:1px solid var(--hair);transition:color .25s var(--ease),border-color .25s var(--ease);
}
.foot__mail:hover{color:var(--primary);border-bottom-color:var(--primary)}
.foot__hours{margin-top:10px}

/* ---------- 39. كروت الفروع: الخريطة تاخد الكارت كله ----------
   الحشو الجانبي كان بياكل من عرض الخريطة على أربع أعمدة. */
.branches{gap:12px}
.branch{padding:0;overflow:hidden}
.branch__head{padding:18px 18px 14px}
.branch h3{margin:0}
.branch p{margin:6px 0 0}
.map{
  border:0;border-top:1px solid var(--hair);border-radius:0;
  aspect-ratio:3/4;
}
@media(max-width:1024px){
  .branches{gap:16px}
  .map{aspect-ratio:4/3}
}



/* شيفرون سيتروين عريض، فعلى نفس الارتفاع بيبان أتقل من درع بيجو.
   (كلاس مش [src*=...] — في ملف المعاينة المسارات بتبقى data URI.) */
.tabs button img.tab-ico--wide{height:26px}
@media(max-width:767px){.tabs button img.tab-ico--wide{height:22px}}

/* ---------- 42. كروت الموديلات بالصور ----------
   الكارت كله صورة واحدة (اسم الموديل والزرار مرسومين جوّاها زي كروت دكان).
   فالتايل بقى إطار للصورة بس. */
.model{padding:0;gap:0;overflow:hidden;background:#F0F0F0;border-color:transparent}
.model img{height:auto;width:100%;display:block;opacity:1}
.model:hover{background:#F0F0F0;border-color:rgba(193,106,87,.6)}
/* كروت بيجو وسيتروين البني (٣١ أكتوبر ٢٠٢٦): ١٤ و١١ كارت — عمودين
   بس كانوا بيطوّلوا القسم لحد ٧ صفوف. ٣ على الديسكتوب. والخلفية
   داكنة عشان مفيش فلاش فاتح قبل ما الصورة تتحمّل. */
.model:has(img[src*="/models/"]),
.model:has(img[src*="/models/"]):hover{background:#1C1C1C}
@media(min-width:1025px){.models{grid-template-columns:repeat(3,1fr)}}
/* في الرئيسية الكروت في نص الصف بس — ٣ كانت بتطلع ١٦٨px، فعمودين */
@media(min-width:1025px){.row2 .models{grid-template-columns:repeat(2,1fr)}}
/* قسم الباقات في الرئيسية (2026-11-03): عمودين كانوا بيطوّلوا القسم ٣ صفوف والنص جنبه
   بيسيب فراغ. عمود الكروت أعرض و٣ كروت في الصف = صفّين بس. */
@media(min-width:1025px){
  .row2--models>:first-child{flex:1.7}
  .row2--models .models{grid-template-columns:repeat(3,1fr)}
}
/* الرابط #tab-… بيوصّل للتبويب — من غير ده الهيدر الثابت بيغطّيه */
.tabs [role="tab"]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* سطر الانتماء تحت العدّاد */
.hero__group{
  margin-top:10px;font-size:13px;color:rgba(255,255,255,.62);
  letter-spacing:0;
}
@media(max-width:767px){.hero__group{font-size:12.5px}}

/* ---------- 43. تعديلات ---------- */

/* كروت الآراء بطول مختلف حسب نصّها — الكروت المتساوية بتبان مصنوعة */
.reviews__track{align-items:flex-start}
.review p{flex:0 1 auto}

/* «لماذا تثق بنا» كان حشوه من فوق ١٨٠ ومن تحت ٨٨ — الفراغ العلوي
   كان باين مش متناسق. اتوازنوا. */
.why{padding-block:92px 88px}
@media(max-width:767px){.why{padding-block:40px 24px}}

/* ---------- 44. سطر الحقوق: ٣ أجزاء ---------- */
.foot__legal{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:767px){
  .foot__legal{flex-direction:column;text-align:center}
}

/* ---------- 45. صورة الإكس راي: الأجزاء بتنوّر بالتتابع ----------
   توهّج تيراكوتا هادي فوق المحرك ← العفشة (قدام وورا مع بعض) ← التكييف.
   كل جزء ١.٥ ثانية من دورة ٤.٥، واللون أفتح شوية من التيراكوتا عشان التوهّج يبان أقوى. المواضع نسبة مئوية من الصورة (1207×657). */
.xray{position:relative;isolation:isolate}
.xray__glow{
  position:absolute;pointer-events:none;border-radius:50%;
  translate:-50% -50%;opacity:0;mix-blend-mode:color-dodge;
  background:radial-gradient(closest-side,rgba(232,140,112,1),rgba(212,118,94,.7) 45%,rgba(193,106,87,.25) 75%,transparent);
  animation:xray-glow 3s ease-in-out infinite;
}
.xray__glow--engine{left:27%;top:42%;width:26%;height:26%}
.xray__glow--susp{left:43%;top:58%;width:13%;height:30%;animation-delay:1s}
.xray__glow--susp-r{left:84%;top:49%;width:9%;height:26%;animation-delay:1s}
.xray__glow--ac{left:21%;top:64%;width:15%;height:16%;animation-delay:2s}
/* التكييف والتبريد بالأزرق — برودة، مش لون ألور */
.xray__glow--ac{background:radial-gradient(closest-side,rgba(120,190,255,1),rgba(70,150,240,.7) 45%,rgba(50,120,220,.25) 75%,transparent)}
@keyframes xray-glow{0%,100%{opacity:0} 12%,24%{opacity:1} 36%{opacity:0}}
@media(prefers-reduced-motion:reduce){.xray__glow{animation:none}}

/* ---------- 46. السلاسة وقت السكرول ----------
   حدود الكروت اللي بتلف (--ang) والتوهّج على الإكس راي بيترسموا من جديد
   كل فريم. وقت ما الزائر بيسكرول بنوقفهم (app.js بيحط .is-scrolling على
   html)، وأي كارت برّه الشاشة واقف على طول (.is-off). */
/* علي 2026-11-02: توهّج قطع العربية مابقاش يقف وقت السكرول (كان باين إنه
   بيتعطّل). اتقاس: السكرول فضل ٦٠ فريم. */
html.is-scrolling .card::before,
.card.is-off::before{animation-play-state:paused}

/* ---------- 47. دخول كروت الفروع ----------
   الكارت بيطلع ويكبر سنة، حدّه بينوّر تيراكوتا لحظة، الخريطة بتتفتح من فوق
   لتحت، والرقم بينزل زي دبوس الخريطة. بـanimation مش transition عشان
   transition الزوم بتاع الهوفر (قسم ٣٤) كان بيلغي حركة .rv ويخلّي الكروت
   تظهر مرة واحدة. التأخير ضعف التدرّج العادي عشان الأربعة يبانوا واحد ورا التاني. */
.branches>.branch.is-in{animation:branch-in .9s var(--ease) calc(var(--d,0ms) * 2) backwards}
.branches>.branch.is-in .branch__n{display:inline-block;
  animation:pin-in .6s var(--ease) calc(var(--d,0ms) * 2 + 450ms) backwards}
@keyframes branch-in{0%{opacity:0;transform:translateY(26px) scale(.97)} 70%{border-color:rgba(193,106,87,.75)}}
@keyframes pin-in{0%{opacity:0;transform:translateY(-8px) scale(.7)} 60%{transform:translateY(2px) scale(1.12)}}
@media(prefers-reduced-motion:reduce){
  .branches>.branch.is-in,.branches>.branch.is-in .branch__n{animation:none}
}

/* ---------- 48. مراجعة المحتوى 2026-11-01 ----------
   شريط المعلومات السريعة تحت أزرار الهيرو، سطر التعريف والرقم في الفوتر،
   روابط تحت كل فرع، ورابط «اتصل بنا» جوّه الفقرات. والفقرة تحت عنوان
   الهيرو كانت 13px وباهتة على الصورة — كبرت وفتحت. */
.hero__lede{font-size:15px;color:rgba(255,255,255,.86)}
.hero__facts{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:18px;font-size:13px;color:rgba(255,255,255,.78)}
.hero__facts li+li::before{content:"·";margin-inline:10px;color:var(--primary)}
@media(max-width:767px){
  .hero__lede{font-size:14px}
  .hero__facts{justify-content:center;margin-top:20px;font-size:12.5px}
}
.foot__tag{margin-top:14px;font-size:15px;max-width:34ch}
.foot__tel{display:block;width:max-content;margin-top:10px;font-size:18px;font-weight:700;
  color:var(--headline);direction:ltr;transition:color .25s var(--ease)}
.foot__tel:hover{color:var(--primary)}
.branch__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 20px 18px;font-size:14px}
.branch__links a{color:var(--headline);transition:color .2s var(--ease)}
.branch__links a:hover{color:var(--primary)}
.inline-link{color:var(--primary);border-bottom:1px solid currentColor}
.reviews__cta{margin-top:22px;text-align:center;font-size:15px}
.reviews__cta a{color:var(--headline);border-bottom:1px solid var(--hair);transition:color .2s var(--ease),border-color .2s var(--ease)}
.reviews__cta a:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* ---------- 49. ارتفاع كروت الآراء ----------
   رأي واحد طويل (٣٢٢ حرف) كان بيخلّي الشريط 407px والباقي 234px، فبيفضل
   ~170px فاضي تحت معظم الكروت. النص بيتقصّ على ٤ سطور (النص نفسه ماتغيّرش)،
   وبيتفرد كامل لما الماوس يقف على الكارت. والرأي كامل في لينك جوجل. */
.review p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.review:hover p,.review:focus-within p{-webkit-line-clamp:unset;line-clamp:unset}

/* ---------- 50. آخر الصفحة ----------
   كان فيه 120px فاضي بعد سطر الحقوق (64px على الموبايل). بقى 40px.
   زرار الواتساب الثابت واخد الركن الشمال تحت (22–76px)، فلوجو المجموعة
   بيتزق بعيد عنه على الكمبيوتر عشان مايتغطّاش. */
.foot{padding-bottom:40px}
@media(min-width:1025px){.foot__legal{padding-inline-end:72px}}

/* ---------- 51. شريط الأرقام (بعد خدمات ألور) ----------
   نفس فكرة شريط دكان، بألوان ألور: خلفية الصفحة الغامقة، خطوط رفيعة
   بين الخانات، الرقم أبيض تقيل والوصف رمادي. */
.stats{border-block:1px solid var(--hair)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats__grid li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:44px 16px;text-align:center}
.stats__grid li+li{border-inline-start:1px solid var(--hair)}
.stats__num{font-size:52px;font-weight:700;line-height:1;color:var(--headline)}
.stats__lab{font-size:15px;line-height:1.6;max-width:26ch}
@media(max-width:1024px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid li:nth-child(3){border-inline-start:0}
  .stats__grid li:nth-child(n+3){border-top:1px solid var(--hair)}
  .stats__num{font-size:40px}
}
@media(max-width:767px){
  .stats__grid li{padding:28px 10px}
  .stats__num{font-size:32px}
  .stats__lab{font-size:13px}
}

/* ---------- 52. أيقونة زرار الواتساب العائم ----------
   كانت 26px جوّه دايرة 54px، فماكانتش باينة إنها واتساب (علي 2026-11-01).
   الدايرة كبرت سنة والأيقونة بقت تملاها أكتر بخط أتقل. */
.wa{width:60px;height:60px}
.wa svg{width:32px;height:32px}
@media(max-width:767px){.wa{width:56px;height:56px}.wa svg{width:29px;height:29px}}

/* ---------- 54. ملخص تقييم جوجل فوق الآراء ----------
   علي 2026-11-02: 4.38 من 2018 تقييم. النجوم بتتملي بالنسبة (--p).
   نص ظاهر للزائر بس، مش بيانات تقييم في الـschema. */
.score{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;
  margin:-8px auto 28px;text-align:center}
.score__num{font-size:34px;font-weight:700;line-height:1;color:var(--headline)}
.score__stars{position:relative;display:inline-flex;line-height:0}
.score__stars svg{width:20px;height:20px;color:#F2C14E}
.score__bg{display:inline-flex;opacity:.25}
.score__fg{position:absolute;inset:0;display:inline-flex;overflow:hidden;width:var(--p);white-space:nowrap}
[dir="rtl"] .score__fg{inset-inline-start:0;right:0;left:auto;justify-content:flex-start}
.score__txt{font-size:15px}
.score__link{font-size:14px;color:var(--headline);border-bottom:1px solid var(--hair)}
.score__link:hover{color:var(--primary);border-bottom-color:var(--primary)}
@media(max-width:767px){.score{flex-direction:column;gap:8px}.score__num{font-size:30px}}

/* ---------- 55. غطا لحافة «لماذا ألور أوتو؟» تحت ----------
   القص (قسم ١٣) ماكانش كفاية على كل الشاشات/الزووم: سطر من الصورة الـfixed
   بيفضل يبان تحت آخر القسم (علي 2026-11-02 «لسه باين»). شريط بلون الصفحة
   بعرض الشاشة كلها فوق الفاصل اللي بعد القسم بيغطّي أي سطر يهرب، أيًّا كان
   التقريب. الفاصل نفسه بيترسم فوق الشريط. */
@media(min-width:1025px){
  .why+.rule{position:relative;z-index:2}
  .why+.rule::before{
    content:"";position:absolute;top:-4px;height:4px;
    left:calc(50% - 50vw);right:calc(50% - 50vw);background:#101010;
  }
}

/* ---------- 56. ملخص التقييم: مكان وألوان ونجوم ----------
   علي 2026-11-02: كان راكب ٨px على العنوان (margin سالب)، والنجوم الصفرا
   كانت بتتزنق جوّه عرض النسبة فبتبان مزحزحة عن النجوم الباهتة وراها،
   والمربع لازم يبقى بلون كروت الآراء. */
.score{
  margin:24px auto 32px;
  background:#EFEBE7;border:1px solid #F2C14E66;box-shadow:0 10px 30px rgba(0,0,0,.35);
  color:#5B5B5B;
}
.score__num{color:#1C1C1C}
.score__txt{color:#3A3A3A}
.score__stars svg{flex:none}
.score__bg svg{color:#1C1C1C}
.score__bg{opacity:.18}
.score__link{color:#1C1C1C;border-bottom-color:#DDD6CF}
.score__link:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* ---------- 57. أسفل كارت الرأي في سطر واحد ----------
   علي 2026-11-02: الاسم يمين زي ما هو، والفرع والتاريخ شمال على نفس السطر،
   عشان الجزء السفلي ياخد مساحة أقل. الأفاتار صغر سنة عشان يقعد على السطر ده. */
.review footer{padding-top:12px;gap:10px}
.review footer>span:last-child{flex:1;min-width:0;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.review footer b{display:inline}
.review__meta{white-space:nowrap}
.review__av{width:32px;height:32px;font-size:14px}

/* ---------- 58. كروت الباقات بتدخل واحد ورا التاني ----------
   علي 2026-11-02. ماكانتش بتتدرّج: transition بتاع الهوفر على .model (٠.٣ث
   من غير تأخير) كان بيلغي تأخير .rv. نفس حل الفروع (قسم ٤٧): الدخول
   animation، والهوفر يفضل transition. الكارت ظاهر من الأول (قسم ٩) —
   بس واطي ومصغّر سنة، وبيطلع مكانه بالترتيب. */
.models>.model:not(.is-in){transform:translateY(30px) scale(.92)}
.models>.model.is-in{animation:model-in .9s var(--ease-out) calc(var(--d,0ms) * 1.3) backwards}
@keyframes model-in{from{opacity:0;transform:translateY(30px) scale(.92)}}

/* ---------- 59. حدود الكروت اللي بتلف على الموبايل ----------
   الحد اللي بيلف (--ang) بيترسم من جديد كل فريم لكل كارت ظاهر — أغلى
   حركة في الصفحة. على الأجهزة اللي باللمس بيفضل الحد ظاهر ثابت، والحركة
   على الكمبيوتر بس. */
@media(hover:none){.card::before{animation:none;--ang:200deg}}

@media(prefers-reduced-motion:reduce){
  .models>.model:not(.is-in){transform:none}
  .models>.model.is-in{animation:none}
}

/* ---------- 60. مسافات الرئيسية (علي 2026-11-02) ----------
   تحت «58 جهة وشركة» كان ~85px قبل اللوجوهات، وفوق الفروع ~100px،
   وفوق الفوتر ~130px. اتقلّلوا سنة من غير ما الأقسام تلزق في بعض. */
section[aria-labelledby="clients-h"]{padding-bottom:20px}
.logos{padding-top:30px}
/* الجولة التانية: لسه كان فيه فراغ فوق الفروع وفوق الفوتر */
.sec--before-branches{padding-bottom:16px}
#branches{padding-top:14px}
/* صندوق الدعوة آخر قسم في كل صفحة — تحته الفوتر على طول */
.sec:has(> .wrap > .cta){padding-bottom:16px}
.foot{padding-top:26px}
@media(max-width:1024px){.foot{padding-top:22px}}

/* ============================================================
   pages.css — كل اللي الصفحات الداخلية محتاجاه.
   بيتضاف على core.css في ملف واحد مبني (assets/allure.css).
   ممنوع تعديل الملف المبني — التعديل هنا وبعدين إعادة بناء.
   ============================================================ */

/* ---------- 1. رأس الصفحة الداخلية ----------
   مش هيرو. الهيرو بصورة للرئيسية بس — الصفحات الداخلية بتبدأ
   بمساحة هادية عشان العين تروح على العنوان فورًا.                */
.pagehead{
  position:relative; isolation:isolate;
  padding-block:calc(var(--nav-h) + 56px) 48px;
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.pagehead::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 120% at 88% 0%, #C16A5726 0%, transparent 62%),
    radial-gradient(40% 90%  at 12% 100%, #C16A5714 0%, transparent 70%);
}
.pagehead__col{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.pagehead h1{
  font-size:46px; line-height:1.22; font-weight:400;
  color:var(--headline); max-width:20ch;
}
.pagehead h1 > span:not(.num){display:block}
.pagehead p{max-width:64ch; font-size:15px}
.pagehead__actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px}

/* فتات الخبز */
.crumbs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:13px; color:rgba(255,255,255,.45); margin-bottom:6px;
}
.crumbs a:hover{color:var(--primary)}
.crumbs span[aria-hidden]{opacity:.4}

/* ---------- 2. النص الطويل ---------- */
.prose{max-width:76ch; display:flex; flex-direction:column; gap:18px}
.prose h2{
  font-size:30px; line-height:1.35; font-weight:700;
  color:var(--headline); margin-top:18px;
}
.prose h3{font-size:21px; line-height:1.45; font-weight:700; color:var(--headline)}
.prose p{font-size:15px; line-height:1.95; text-align:justify}
.prose a{color:var(--primary); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:#d98570}
.prose strong{color:var(--headline); font-weight:700}
.prose ul{display:flex; flex-direction:column; gap:10px}
.prose li{position:relative; padding-inline-start:22px; font-size:15px; line-height:1.85}
.prose li::before{
  content:""; position:absolute; inset-inline-start:0; top:.72em;
  width:7px; height:7px; border-radius:2px;
  background:var(--primary); transform:rotate(45deg);
}

/* قايمة تشيك — بتستعمل في صفحة الخدمات */
.checks{display:flex; flex-direction:column; gap:9px; margin-top:12px}
.checks li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.7;
}
.checks svg{
  flex:none; width:17px; height:17px; margin-top:4px; color:var(--primary);
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 3. كروت «كمّل من هنا» ----------
   الغرض: الزائر يوصل لآخر الصفحة ويلاقي الخطوة اللي بعدها قدامه،
   مش يقفل. نفس فكرة دكان.                                        */
.sugs{
  display:grid; gap:14px; margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
}
.sug{
  display:flex; gap:13px; align-items:flex-start;
  padding:18px 18px 18px 16px; border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--hair);
  transition:border-color .25s var(--ease), transform .25s var(--ease),
             background .25s var(--ease);
}
.sug:hover{border-color:#C16A5766; transform:translateY(-2px); background:#212121}
.sug__ic{flex:none; width:24px; height:24px; color:var(--primary); margin-top:3px}
.sug__ic svg{
  width:24px; height:24px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.sug__txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.sug__t{color:var(--headline); font-size:16px; font-weight:700; line-height:1.4}
.sug__d{font-size:13px; line-height:1.65}
.sug__go{
  margin-inline-start:auto; align-self:center; flex:none;
  color:var(--primary); font-size:18px; opacity:.55;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.sug:hover .sug__go{opacity:1; transform:translateX(-3px)}

/* ---------- 4. صف خدمة: صورة + تفاصيل ---------- */
.svc{
  display:grid; gap:28px 40px; align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  padding-block:30px; border-bottom:1px solid var(--hair);
}
.svc:last-child{border-bottom:0}
.svc:nth-child(even) .svc__media{order:2}
.svc__media img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-img); border:1px solid var(--hair);
}
.svc__body{display:flex; flex-direction:column; gap:10px}
.svc__body h2{
  font-size:26px; line-height:1.35; font-weight:700; color:var(--headline);
  display:flex; align-items:center; gap:10px;
}
.svc__body h2 svg{
  flex:none; width:24px; height:24px; color:var(--primary);
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.svc__body > p{font-size:15px; line-height:1.9}

/* ---------- 5. كروت المدونة ---------- */
.posts{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}
.post{
  display:flex; flex-direction:column; gap:9px;
  padding:22px; border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--hair);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.post:hover{border-color:#C16A5766; transform:translateY(-2px)}
.post__tag{
  align-self:flex-start; font-size:12px; color:var(--primary);
  background:var(--pill-bg); border:1px solid #C16A5733;
  border-radius:var(--r-pill); padding:3px 12px;
}
.post h2, .post h3{font-size:18px; line-height:1.5; font-weight:700; color:var(--headline)}
.post p{font-size:14px; line-height:1.8}
.post__go{margin-top:auto; padding-top:8px; color:var(--primary); font-size:14px}

/* ---------- 6. نموذج الحجز ----------
   ملحوظة: النموذج ده HTML خام من غير باك-إند. لحد ما يتوصّل
   بمعالج، زرار «احجز» بيفتح واتساب بالبيانات — أفضل من فورم
   بيبلع البيانات في السكوت.                                       */
.form{
  display:grid; gap:16px; padding:26px;
  border-radius:var(--r-card); background:var(--surface);
  border:1px solid var(--hair);
}
.form__row{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.form__step{
  grid-column:1/-1; display:flex; gap:9px; align-items:center;
  color:var(--headline); font-size:16px; font-weight:700;
  padding-top:6px;
}
.form__step b{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; font-weight:400;
  background:var(--primary); color:#fff;
}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; color:var(--headline)}
.field input, .field select, .field textarea{
  font-family:inherit; font-size:14px; color:var(--headline);
  background:#141414; border:1px solid var(--hair);
  border-radius:var(--r-btn); padding:11px 13px; width:100%;
  transition:border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary);
}
.field textarea{min-height:92px; resize:vertical}
.field--wide{grid-column:1/-1}
.form__note{grid-column:1/-1; font-size:13px; line-height:1.75}
.form .btn{grid-column:1/-1; justify-content:center}

/* ---------- 7. جدول أسعار ----------
   الجداول الحالية على الموقع صور PNG — غير مقروءة لجوجل ولا
   لمساعدات الذكاء الاصطناعي. لما توصل الأسعار نصًا، بتترسم هنا.  */
.sched{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.sched table{border-collapse:collapse; width:100%; min-width:520px; font-size:14px}
.sched caption{
  text-align:start; color:var(--headline); font-size:18px;
  font-weight:700; padding-bottom:12px;
}
.sched th, .sched td{
  padding:11px 14px; border-bottom:1px solid var(--hair); text-align:start;
}
.sched thead th{
  color:var(--headline); font-weight:700; background:#1A1A1A;
  border-bottom:1px solid #C16A5740;
}
.sched tfoot td{color:var(--headline); font-weight:700; background:#1A1A1A}

/* ---------- 8. صندوق ملاحظة ---------- */
.note{
  display:flex; gap:12px; padding:16px 18px;
  border-radius:var(--r-acc); background:#C16A570F;
  border:1px solid #C16A5733;
}
.note svg{
  flex:none; width:20px; height:20px; margin-top:3px; color:var(--primary);
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.note p{font-size:14px; line-height:1.8}

/* ---------- 9. الموبايل ---------- */
@media (max-width:900px){
  .svc{grid-template-columns:1fr; gap:18px}
  .svc:nth-child(even) .svc__media{order:0}
}
@media (max-width:767px){
  .pagehead{padding-block:calc(var(--nav-h) + 30px) 34px}
  .pagehead h1{font-size:31px; max-width:none}
  .prose h2{font-size:24px}
  .prose p, .prose li{text-align:start}
  .form{padding:18px}
  .form__row{grid-template-columns:1fr}
  .sugs{grid-template-columns:1fr}
}

/* ---------- المقالات (المدونة) ---------- */
.art-meta{margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.6)}
.art{max-width:78ch}
.art h2{margin-top:14px}
.art table.art-table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto;
  border:1px solid var(--hair);border-radius:var(--r-acc);background:var(--surface)}
.art-table th,.art-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:start;
  vertical-align:top;line-height:1.7}
.art-table thead th{background:#171717;color:var(--headline);font-size:13px;white-space:nowrap}
.art-table tbody tr:last-child th,.art-table tbody tr:last-child td{border-bottom:0}
.art ol{display:flex;flex-direction:column;gap:10px;padding-inline-start:22px}
.art ol li{font-size:15px;line-height:1.85}

/* ---------- كروت المدونة ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.post{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border:1px solid var(--hair);
  border-radius:var(--r-card);background:var(--surface);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.post:hover{border-color:rgba(193,106,87,.6);transform:translateY(-3px)}
.post__tag{align-self:flex-start;font-size:12.5px;color:var(--primary);border:1px solid rgba(193,106,87,.35);
  border-radius:var(--r-pill);padding:3px 12px}
.post__t{margin:0;font-size:19px;line-height:1.55;color:var(--headline)}
.post__d{margin:0;font-size:14px;line-height:1.85;flex:1}
.post__m{font-size:13px;color:rgba(255,255,255,.62)}
.art-table td{white-space:nowrap}
.art-table td:first-child{white-space:normal;min-width:120px}

/* ---------- corporate ----------
   خدمة الشركات: بحث وفلتر جدول الجهات (الشريط مخفي من غير JS،
   فالجدول بيظهر كامل)، وكروت الخطوات الثلاث.                    */
.orgs__bar{display:grid;grid-template-columns:2fr 1fr;gap:12px;max-width:720px;margin-bottom:14px}
.orgs__bar[hidden],.orgs [hidden]{display:none}
.orgs .sched{max-height:560px;overflow-y:auto;border:1px solid var(--hair);
  border-radius:var(--r-card);background:var(--surface)}
.orgs .sched table{min-width:0}
.orgs thead th{position:sticky;top:0;z-index:1}
.orgs__none{padding:14px 2px;font-size:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;list-style:none;padding:0}
.steps li{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:22px}
.steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--primary);color:#fff;font-weight:400;margin-bottom:12px}
.steps h3{font-size:19px;line-height:1.45;color:var(--headline);margin-bottom:6px}
.steps p{font-size:14.5px;line-height:1.85}
@media (max-width:767px){.orgs__bar,.steps{grid-template-columns:1fr}}

/* ---------- صفحة الفرع ---------- */
.bp-rate{margin-top:6px;font-size:15px;color:rgba(255,255,255,.82)}
.bp-rate b{font-size:20px;color:var(--headline)}
.bp-stars{color:#F2B705;margin-inline-end:4px}
.bp-facts .tile__val{white-space:normal}
.bp-loc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
.bp-map{display:block}
.bp-map .branch{margin:0}
.bp-areas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;width:100%}
.bp-areas h3{margin:0 0 8px;font-size:15px;color:var(--headline)}
.bp-areas ul{display:flex;flex-wrap:wrap;gap:6px}
.bp-areas li{font-size:13px;padding:4px 10px;border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--surface)}
.bp-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start}
.bp-svcs{display:flex;flex-wrap:wrap;gap:10px}
.bp-svc{padding:10px 16px;border:1px solid var(--hair);border-radius:var(--r-acc);background:var(--surface);
  color:var(--headline);transition:border-color .2s var(--ease)}
.bp-svc:hover{border-color:var(--primary)}
.bp-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bp-other{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--hair);
  border-radius:var(--r-card);background:var(--surface);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.bp-other:hover{border-color:var(--primary);transform:translateY(-2px)}
.bp-other b{color:var(--headline);font-size:16px}
.bp-other span{font-size:13.5px}
.bp-other em{font-style:normal;font-size:13px;color:#F2B705}
@media(max-width:900px){.bp-loc{grid-template-columns:1fr}.bp-others{grid-template-columns:1fr}}
@media(max-width:640px){.bp-areas{grid-template-columns:1fr}}
.bp-reviews{margin-top:26px}

/* ============================================================
   جداول الصيانة — صفحة الموديل + جدول الأسعار في صفحة الباقات
   نفس ميكانيزم دكان بألوان ألور. app.js قسم 12 بيشغّله.
   من غير JS: كل الأعمدة ظاهرة بسكرول أفقي، ومفيش رقم بيضيع.
   ============================================================ */

/* ---------- رأس صفحة الموديل ---------- */
.mp-head__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:center}
.mp-head h1{display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline}
.mp-head h1 span{display:inline}
.mp-yrs{font-size:.55em;color:rgba(255,255,255,.62);font-weight:400}
.mp-lede{max-width:62ch;font-size:16px;line-height:1.95;color:rgba(255,255,255,.86)}
.mp-shot{margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hair);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mp-shot img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .mp-head__grid{grid-template-columns:1fr;gap:24px}
  .mp-shot{max-width:300px;margin-inline:auto}
}

/* ---------- العدّاد ---------- */
.km{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:18px;
  padding:16px 18px;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface)}
.km label{font-weight:700;color:var(--headline)}
.km__row{display:flex;align-items:center;gap:8px}
.km input{width:160px;padding:10px 12px;border-radius:var(--r-btn);border:1px solid var(--hair);
  background:#111;color:var(--headline);font:inherit;direction:ltr;text-align:center}
.km input:focus{outline:2px solid var(--primary);outline-offset:2px}
.km__out{flex-basis:100%;margin:0;font-size:14px;color:rgba(255,255,255,.82);min-height:1.9em}
.km__out b{color:var(--primary)}

/* ---------- شرائح الباقات ---------- */
.pt-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pt-bar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 14px;
  border-radius:var(--r-acc);border:1px solid var(--hair);background:var(--surface);color:var(--headline);
  font:inherit;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.pt-bar button b{font-size:14px;font-weight:700;direction:ltr}
.pt-bar button small{font-size:11.5px;color:rgba(255,255,255,.6)}
.pt-bar button:hover{border-color:rgba(193,106,87,.6)}
.pt-bar button[aria-pressed="true"]{background:rgba(193,106,87,.16);border-color:var(--primary)}
.pt-bar button[aria-pressed="true"] small{color:var(--primary)}

/* ---------- كارت السعر ---------- */
.pq{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);
  padding:18px 20px;margin-bottom:16px}
.pq__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.pq__t{margin:0;font-size:18px;color:var(--headline)}
.pq__tier{color:var(--primary);font-size:14px}
.pq__f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pq__i{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-acc);background:#141414}
.pq__i span{font-size:13px;color:rgba(255,255,255,.62)}
.pq__i b{font-size:22px;color:var(--headline);font-weight:700}
.pq__i i{font-style:normal}
.pq__s b{color:#7FD1A5}
.pq__s em{font-style:normal;font-size:13px;font-weight:400;color:rgba(255,255,255,.62);margin-inline-start:4px}
@media(max-width:640px){.pq__f{grid-template-columns:1fr 1fr}.pq__s{grid-column:1/-1}.pq__i b{font-size:19px}}

/* ---------- الجدول ---------- */
.pt-tools{display:flex;justify-content:flex-end;margin-bottom:8px}
.pt-all{font:inherit;font-size:13.5px;color:var(--headline);background:none;border:0;cursor:pointer;
  border-bottom:1px solid var(--hair);padding:2px 0}
.pt-all:hover{color:var(--primary);border-bottom-color:var(--primary)}
.pt-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);
  -webkit-overflow-scrolling:touch}
.pt{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:100%}
.pt th,.pt td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:center;white-space:nowrap}
.pt thead th{background:#171717;color:var(--headline);font-weight:700}
.pt-pk b{display:block;font-size:13.5px;direction:ltr}
.pt-pk small{display:block;font-size:11.5px;font-weight:400;color:rgba(255,255,255,.55)}
.pt-g{font-size:12px;font-weight:400 !important}
.pt-g.o{color:#E9B7A9}
.pt-g.a{color:#9FD8BB}
.pt .pt-it{position:sticky;inset-inline-start:0;z-index:1;text-align:start;background:var(--surface);
  font-weight:400;color:rgba(255,255,255,.88);white-space:normal;min-width:150px;
  box-shadow:-1px 0 0 rgba(255,255,255,.08) inset}
.pt thead .pt-it{background:#171717}
.pt td{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.86)}
.pt td.a{background:rgba(127,209,165,.035)}
.pt-z{background:rgba(255,255,255,.025)}
.pt td.x{color:rgba(255,255,255,.28)}
.pt tfoot th,.pt tfoot td{border-bottom:0}
.pt-lab td{color:rgba(255,255,255,.7)}
.pt-tot th,.pt-tot td{background:rgba(193,106,87,.12);font-weight:700;color:var(--headline)}
.pt-tot .pt-it{background:#2a1f1c}
.pt-tot td.a{color:#9FD8BB}
.pt td.is-sel,.pt-pk.is-sel,.pt-g.is-sel{box-shadow:inset 0 0 0 9999px rgba(193,106,87,.07)}
/* وضع «باقة واحدة»: app.js بيحط .is-hid على الأعمدة التانية — موجودة في الصفحة لجوجل */
.pt .is-hid{display:none}

.mp-notes{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.mp-notes p{margin:0;font-size:14px;line-height:1.9;color:rgba(255,255,255,.78)}
.mp-notes b{color:var(--headline)}

/* ---------- كارت نصّي لموديل مالوش صورة لسه ---------- */
.model--text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:1;background:radial-gradient(circle at 50% 30%,#4a2a22,#1c1513 70%) !important;
  border:1px solid var(--hair) !important;text-align:center;padding:16px}
.model__t{font-size:clamp(20px,3vw,30px);font-weight:700;color:#fff;direction:ltr}
.model__y{font-size:14px;color:rgba(255,255,255,.7)}
.model__go{margin-top:10px;padding:6px 16px;border-radius:var(--r-pill);background:var(--primary);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}

/* ---------- جدول أسعار الموديلات (صفحة الباقات) ---------- */
.pi-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);margin-top:22px}
.pi{width:100%;border-collapse:collapse;font-size:14.5px}
.pi th,.pi td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);text-align:start;white-space:nowrap}
.pi thead th{background:#171717;color:var(--headline);font-size:13px}
.pi tbody th{font-weight:400}
.pi tbody th a{color:var(--headline);border-bottom:1px solid rgba(193,106,87,.45)}
.pi tbody th a:hover{color:var(--primary)}
.pi tbody tr:last-child th,.pi tbody tr:last-child td{border-bottom:0}

/* نص للقارئ الآلي بس (caption الجدول) */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* وضع «باقة واحدة»: صف البند اللي مش في الباقة المختارة بيتخفي (موجود في الصفحة) */
.pt tr.is-hid{display:none}
.pi-h{margin:34px 0 0;font-size:20px;color:var(--headline)}
.pi-note{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.62)}