/*!
  ورشة صيانة سيارات - صناعية الشمال - الرياض
  تصميم وهوية بصرية مخصصة - Automotive / Blueprint Theme
  RTL - Mobile First
*/

/* =========================================================
   1) الجذور والمتغيرات
========================================================= */
:root{
  /* الألوان الأساسية */
  --charcoal-950:#0b0e12;
  --charcoal-900:#12161c;
  --charcoal-800:#1a2029;
  --charcoal-700:#232a35;
  --metal-600:#3a4451;
  --metal-500:#545f6d;
  --metal-400:#7c8794;
  --metal-300:#aab3bd;
  --metal-200:#ced4da;
  --warm-white:#f6f4f1;
  --pure-white:#ffffff;

  --accent:#2f8eff;        /* أزرق كهربائي */
  --accent-dark:#1668d1;
  --accent-soft:rgba(47,142,255,.14);
  --copper:#c9773a;        /* برتقالي نحاسي */
  --copper-soft:rgba(201,119,58,.14);

  --ok:#3aa06b;

  /* الطباعة */
  --font-head:"Cairo", "Tajawal", "Segoe UI", sans-serif;
  --font-body:"Tajawal", "Segoe UI", sans-serif;

  /* المسافات */
  --space-1:.5rem;
  --space-2:.875rem;
  --space-3:1.5rem;
  --space-4:2.25rem;
  --space-5:3.5rem;
  --space-6:5.5rem;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --radius-pill:999px;

  --container:1220px;

  --shadow-1:0 10px 30px -12px rgba(11,14,18,.35);
  --shadow-2:0 22px 60px -18px rgba(11,14,18,.55);

  --ease:cubic-bezier(.22,.8,.28,1);

  color-scheme: dark;
}

/* =========================================================
   2) إعادة ضبط أساسية
========================================================= */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  background:var(--charcoal-950);
  color:var(--warm-white);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
svg{fill:currentColor;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea{font:inherit;}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.28;font-weight:800;letter-spacing:-.01em;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.accent-fill{fill:var(--accent);}
.accent-stroke{stroke:var(--accent);}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-.14em;}

/* عناصر مساعدة لإمكانية الوصول */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-60px;right:1rem;z-index:999;
  background:var(--accent);color:#fff;padding:.7rem 1.2rem;border-radius:var(--radius-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem;}

/* =========================================================
   3) أدوات تخطيط عامة
========================================================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.25rem;
}
@media(min-width:768px){ .container{padding-inline:2rem;} }

.section{padding-block:var(--space-6);position:relative;}
.section--tight{padding-block:var(--space-5);}
.section--alt{background:var(--charcoal-900);}
.section--panel{
  background:linear-gradient(180deg,var(--charcoal-900),var(--charcoal-950));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.section__head{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:var(--space-5);
}
.section__head--start{margin-inline:unset;text-align:start;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--accent);
  background:var(--accent-soft);
  padding:.4rem .95rem;
  border-radius:var(--radius-pill);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.eyebrow--copper{color:var(--copper);background:var(--copper-soft);}
.eyebrow--copper::before{background:var(--copper);box-shadow:0 0 0 4px var(--copper-soft);}

.section__head h2{
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  margin-bottom:.9rem;
  color:var(--pure-white);
}
.section__head p{
  color:var(--metal-300);
  font-size:1.02rem;
  max-width:620px;
  margin-inline:auto;
}
.section__head--start p{margin-inline:unset;}

.h1-mark{color:var(--accent);}

/* أزرار */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.98rem;
  padding:.95rem 1.7rem;
  border-radius:var(--radius-pill);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn .icon{width:1.15em;height:1.15em;}
.btn:active{transform:scale(.97);}
.btn--primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(47,142,255,.55);
}
.btn--primary:hover{background:var(--accent-dark);box-shadow:0 16px 34px -8px rgba(47,142,255,.65);}
.btn--whatsapp{
  background:#1e2830;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.14);
}
.btn--whatsapp:hover{border-color:var(--accent);color:var(--accent);}
.btn--ghost{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.18);
  color:var(--warm-white);
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn--sm{padding:.65rem 1.15rem;font-size:.88rem;}
.btn--block{width:100%;}

/* شرائح/چيبس */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;
  border-radius:var(--radius-pill);
  background:var(--charcoal-800);
  border:1px solid rgba(255,255,255,.08);
  font-size:.88rem;
  color:var(--metal-200);
}
.chip strong{color:var(--pure-white);font-weight:700;}

/* =========================================================
   4) الهيدر
========================================================= */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  padding-block:1rem;
  transition:padding .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,14,18,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0;
  transition:opacity .25s var(--ease);
}
.site-header.is-scrolled::before{opacity:1;}
.site-header.is-scrolled{padding-block:.6rem;box-shadow:0 10px 30px -18px rgba(0,0,0,.6);}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.06rem;
  color:var(--pure-white);
}
.brand .icon{width:2.35rem;height:2.35rem;color:var(--accent);flex-shrink:0;}
.brand--image img{
  display:block;
  width:auto;
  height:3.35rem;
  max-width:min(46vw, 18rem);
  object-fit:contain;
}
.site-header.is-scrolled .brand--image img{height:2.9rem;}
.brand__text{display:flex;flex-direction:column;line-height:1.15;}
.brand__text small{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.7rem;
  color:var(--metal-300);
  letter-spacing:.02em;
}

.nav__list{
  display:none;
  align-items:center;
  gap:.35rem;
}
.nav__list a{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:var(--radius-pill);
  font-size:.94rem;
  font-weight:600;
  color:var(--metal-200);
  transition:background-color .2s, color .2s;
}
.nav__list a:hover{background:rgba(255,255,255,.06);color:var(--pure-white);}

.nav__cta{display:none;align-items:center;gap:.6rem;}

.nav__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:var(--radius-sm);
  background:var(--charcoal-800);
  border:1px solid rgba(255,255,255,.08);
  color:var(--pure-white);
}
.nav__toggle .icon{width:1.4rem;height:1.4rem;}
.nav__toggle .ic-close{display:none;}
.nav__toggle[aria-expanded="true"] .ic-menu{display:none;}
.nav__toggle[aria-expanded="true"] .ic-close{display:block;}

.nav__drawer{
  position:fixed;inset:0;top:0;
  background:var(--charcoal-950);
  z-index:95;
  padding:6.5rem 1.5rem 2rem;
  transform:translateY(-8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  overflow-y:auto;
}
.nav__drawer.is-open{opacity:1;transform:translateY(0);visibility:visible;}
.nav__drawer ul{display:flex;flex-direction:column;gap:.3rem;margin-bottom:2rem;}
.nav__drawer a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem .3rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-head);font-weight:700;font-size:1.15rem;
  color:var(--warm-white);
}
.nav__drawer a .icon{width:1.1rem;height:1.1rem;color:var(--metal-400);}
.nav__drawer .btn{margin-top:.4rem;}
.nav__drawer-actions{display:flex;flex-direction:column;gap:.8rem;}

@media(min-width:1080px){
  .brand--image img{height:3.75rem;max-width:20rem;}
  .nav__list{display:flex;}
  .nav__cta{display:inline-flex;}
  .nav__toggle{display:none;}
  .nav__drawer{display:none;}
}

/* =========================================================
   5) الهيرو
========================================================= */
.hero{
  position:relative;
  padding-block:8.5rem var(--space-6);
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(47,142,255,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,119,58,.10), transparent 60%),
    linear-gradient(180deg,var(--charcoal-950),var(--charcoal-900) 70%,var(--charcoal-950));
}
.hero__grid-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(75% 65% at 65% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 65% 30%, #000 30%, transparent 78%);
}
.hero .container{
  position:relative;z-index:1;
  display:grid;
  gap:3rem;
  align-items:center;
}
.hero__content{max-width:640px;}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--metal-200);
  font-weight:700;font-size:.86rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  padding:.5rem .95rem;border-radius:var(--radius-pill);
  margin-bottom:1.6rem;
}
.hero__eyebrow .icon{width:1.05rem;height:1.05rem;color:var(--accent);}
.hero h1{
  font-size:clamp(2.05rem,5vw,3.35rem);
  color:var(--pure-white);
  margin-bottom:1.15rem;
}
.hero__lead{
  font-size:clamp(1.02rem,1.7vw,1.18rem);
  color:var(--metal-200);
  max-width:52ch;
  margin-bottom:2.1rem;
}
.hero__lead strong{color:var(--pure-white);font-weight:700;}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem;
}
.hero__phone{
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:2.6rem;
  font-family:var(--font-head);
}
.hero__phone .icon{
  width:2.5rem;height:2.5rem;color:var(--accent);
  background:var(--accent-soft);border-radius:50%;padding:.55rem;flex-shrink:0;
}
.hero__phone a{font-size:1.5rem;font-weight:800;color:var(--pure-white);direction:ltr;display:inline-block;}
.hero__phone span{display:block;font-size:.8rem;color:var(--metal-300);font-weight:500;font-family:var(--font-body);}

.hero__trust{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.75rem;
}
.trust-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.85rem .9rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  font-size:.85rem;
  font-weight:600;
  color:var(--metal-200);
}
.trust-item .icon{width:1.35rem;height:1.35rem;color:var(--accent);flex-shrink:0;}

.hero__visual{position:relative;display:flex;justify-content:center;}
.hero-photo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:clamp(1.1rem,3vw,2rem);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 70px -28px rgba(0,0,0,.9),0 0 45px rgba(47,142,255,.12);
}
.hero-scene{display:none;}
.hero-scene__glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 60% 45%, rgba(47,142,255,.28), transparent 60%);
  filter:blur(10px);
  z-index:-1;
}
.hero-scene svg{width:100%;height:auto;}
.hero-scene .plate{
  fill:var(--charcoal-900);
  stroke:rgba(255,255,255,.08);
}
.hero-scene .grid-line{stroke:rgba(255,255,255,.08);}
.hero-scene .car-line{stroke:var(--metal-200);}
.hero-scene .car-accent{stroke:var(--accent);}
.hero-scene .car-fill{fill:var(--accent);}
.hero-scene .pulse{
  stroke:var(--accent);
  stroke-dasharray:4 8;
  animation:dash 6s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-120;}}
.hero-scene .badge-bg{fill:var(--charcoal-800);stroke:rgba(255,255,255,.1);}
.hero-scene .badge-text{
  font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--warm-white);
}

@media(min-width:960px){
  .hero .container{grid-template-columns:1.05fr .95fr;}
  .hero__trust{grid-template-columns:1fr 1fr;max-width:480px;}
  .hero-photo{width:100%;height:auto;}
}
@media(prefers-reduced-motion:reduce){
  .hero-scene .pulse{animation:none;}
}

/* =========================================================
   6) قسم الخدمات
========================================================= */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
}
.service-card{
  position:relative;
  padding:1.7rem 1.5rem;
  background:linear-gradient(165deg, var(--charcoal-800), var(--charcoal-900));
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
  transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.service-card:hover{transform:translateY(-4px);border-color:rgba(47,142,255,.4);}
.service-card__icon{
  width:3.1rem;height:3.1rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--accent);
  margin-bottom:1.15rem;
}
.service-card__icon .icon{width:1.65rem;height:1.65rem;}
.service-card--copper .service-card__icon{background:var(--copper-soft);color:var(--copper);}
.service-card h3{font-size:1.06rem;color:var(--pure-white);margin-bottom:.55rem;}
.service-card p{font-size:.9rem;color:var(--metal-300);}

.service-card--feature{
  grid-column:1 / -1;
  display:grid;
  gap:1.5rem;
  padding:2.1rem;
  background:linear-gradient(120deg, rgba(47,142,255,.12), var(--charcoal-800) 60%);
}
.service-card--feature h3{font-size:1.3rem;}
.service-card--feature p{font-size:.98rem;color:var(--metal-200);max-width:60ch;}

@media(min-width:640px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:960px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
  .service-card--feature{grid-template-columns:1.3fr .7fr;align-items:center;grid-column:span 3;}
}

.service-media-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
  margin-top:1.4rem;
}
.service-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.09);
  background:var(--charcoal-900);
}
.service-media img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:contain;background:var(--charcoal-950);
}
.service-media figcaption{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:.2rem;color:var(--pure-white);
  padding:1rem 1.3rem 1.15rem;
  border-top:1px solid rgba(255,255,255,.07);
}
.service-media figcaption strong{font-family:var(--font-head);font-size:1.12rem;}
.service-media figcaption span{color:var(--metal-200);font-size:.86rem;}
@media(min-width:760px){.service-media-grid{grid-template-columns:repeat(2,1fr);}}

.expertise-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
.expertise-item{
  padding:1.7rem 1.5rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(47,142,255,.08),var(--charcoal-900) 58%);
}
.expertise-item h3{color:var(--pure-white);font-size:1.08rem;margin-bottom:.55rem;}
.expertise-item p{color:var(--metal-300);font-size:.92rem;}
@media(min-width:800px){.expertise-grid{grid-template-columns:repeat(3,1fr);}}

/* =========================================================
   7) قسم السيارات التي نخدمها
========================================================= */
.fleet-grid{
  display:grid;
  gap:1.2rem;
  grid-template-columns:1fr;
}
.fleet-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:2rem 1.7rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:var(--charcoal-900);
}
.fleet-card::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(320px 200px at 85% 0%, var(--fleet-glow,rgba(47,142,255,.18)), transparent 70%);
}
.fleet-card > *{position:relative;z-index:1;}
.fleet-card--euro{--fleet-glow:rgba(47,142,255,.22);}
.fleet-card--chinese{--fleet-glow:rgba(201,119,58,.22);}
.fleet-card--mazda{--fleet-glow:rgba(255,255,255,.14);}

.fleet-card__art{
  color:var(--metal-300);
  margin-bottom:1.4rem;
  background:var(--charcoal-800);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-md);
  padding:1.4rem 1rem 1rem;
}
.fleet-card--euro .fleet-card__art{color:var(--accent);}
.fleet-card--chinese .fleet-card__art{color:var(--copper);}
.fleet-card--mazda .fleet-card__art{color:var(--warm-white);}
.fleet-card__art svg{width:100%;height:auto;}

.fleet-card__tag{
  display:inline-block;
  font-size:.76rem;font-weight:700;
  color:var(--metal-400);
  letter-spacing:.03em;
  margin-bottom:.5rem;
}
.fleet-card h3{font-size:1.3rem;color:var(--pure-white);margin-bottom:.8rem;}
.fleet-card p{font-size:.92rem;color:var(--metal-300);margin-bottom:1.1rem;}
.fleet-card__models{
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.fleet-card__models span{
  font-size:.8rem;font-weight:600;
  padding:.4rem .8rem;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);
  color:var(--metal-200);
}

@media(min-width:900px){
  .fleet-grid{grid-template-columns:repeat(3,1fr);}
}

/* =========================================================
   8) لماذا تختارنا
========================================================= */
.why-wrap{
  display:grid;
  gap:2.5rem;
}
.why-list{display:flex;flex-direction:column;}
.why-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  padding-block:1.35rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.why-item:first-child{padding-top:0;}
.why-item__num{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1rem;
  color:var(--accent);
  width:2.6rem;height:2.6rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent-soft);
}
.why-item h3{font-size:1.02rem;color:var(--pure-white);margin-bottom:.35rem;}
.why-item p{font-size:.9rem;color:var(--metal-300);}

.why-panel{
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--charcoal-800), var(--charcoal-950));
  border:1px solid rgba(255,255,255,.08);
  padding:2.1rem;
  display:flex;flex-direction:column;justify-content:center;
  gap:1.3rem;
}
.why-panel .icon{width:2.4rem;height:2.4rem;color:var(--accent);}
.why-panel h3{color:var(--pure-white);font-size:1.2rem;}
.why-panel p{color:var(--metal-300);font-size:.92rem;}
.why-panel__phone{
  font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--pure-white);direction:ltr;
}

@media(min-width:960px){
  .why-wrap{grid-template-columns:1.3fr .8fr;align-items:stretch;}
}

/* =========================================================
   9) مناطق الخدمة
========================================================= */
.coverage{
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(47,142,255,.12), transparent 65%),
    var(--charcoal-900);
  padding:2.3rem 1.6rem;
}
@media(min-width:768px){.coverage{padding:3rem;}}

.coverage__main{
  display:inline-flex;align-items:center;gap:.8rem;
  background:var(--accent);
  color:#fff;
  padding:.9rem 1.5rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-head);font-weight:800;
  margin-bottom:1.8rem;
  box-shadow:0 14px 30px -12px rgba(47,142,255,.55);
}
.coverage__main .icon{width:1.3rem;height:1.3rem;}

.coverage__list{
  display:flex;flex-wrap:wrap;gap:.65rem;
  margin-bottom:1.6rem;
}
.coverage__list span{
  font-size:.88rem;font-weight:600;color:var(--metal-200);
  padding:.6rem 1.05rem;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
}
.coverage__note{
  color:var(--metal-300);
  font-size:.9rem;
  max-width:65ch;
  display:flex;
  gap:.6rem;
}
.coverage__note .icon{width:1.2rem;height:1.2rem;color:var(--accent);flex-shrink:0;margin-top:.15rem;}

/* =========================================================
   10) طريقة العمل
========================================================= */
.steps{
  display:grid;
  gap:1.4rem;
  grid-template-columns:1fr;
  counter-reset:step;
  position:relative;
}
.step{
  position:relative;
  padding:1.7rem 1.5rem;
  background:var(--charcoal-800);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
}
.step__num{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.6rem;
  color:var(--accent);
  opacity:.55;
  margin-bottom:.7rem;
}
.step h3{font-size:1.02rem;color:var(--pure-white);margin-bottom:.5rem;}
.step p{font-size:.88rem;color:var(--metal-300);}

@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);}
  .steps::before{
    content:"";
    position:absolute;top:2.35rem;inset-inline:8%;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(47,142,255,.5), transparent);
    z-index:0;
  }
}

/* =========================================================
   11) قسم التشخيص
========================================================= */
.diagnose{
  display:grid;
  gap:2.5rem;
  align-items:center;
}
.diagnose__art{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--charcoal-900);
  border:1px solid rgba(255,255,255,.08);
}
.diagnose__art img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:contain;background:var(--charcoal-950);
}
.diagnose__body h2{
  font-size:clamp(1.5rem,3.2vw,2.15rem);
  color:var(--pure-white);
  margin-bottom:1.1rem;
}
.diagnose__body > p{color:var(--metal-200);font-size:1rem;margin-bottom:1.5rem;max-width:60ch;}
.diagnose__points{display:flex;flex-direction:column;gap:1rem;}
.diagnose__points li{
  display:flex;gap:.85rem;
  font-size:.92rem;color:var(--metal-300);
}
.diagnose__points .icon{
  width:1.55rem;height:1.55rem;flex-shrink:0;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:50%;
  padding:.32rem;
}

@media(min-width:960px){
  .diagnose{grid-template-columns:.85fr 1.15fr;}
}

/* =========================================================
   12) الأسئلة الشائعة
========================================================= */
.faq-list{
  max-width:820px;
  margin-inline:auto;
  display:flex;flex-direction:column;
  gap:.8rem;
}
.faq-item{
  background:var(--charcoal-800);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.4rem;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.98rem;
  color:var(--pure-white);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{
  width:1.15rem;height:1.15rem;color:var(--accent);
  flex-shrink:0;
  transition:transform .25s var(--ease);
}
.faq-item[open] summary .icon{transform:rotate(90deg);}
.faq-item__body{
  padding:0 1.4rem 1.3rem;
  color:var(--metal-300);
  font-size:.92rem;
  max-width:70ch;
}

/* =========================================================
   13) CTA النهائي
========================================================= */
.final-cta{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:3rem 1.6rem;
  text-align:center;
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(47,142,255,.35), transparent 65%),
    linear-gradient(165deg, var(--charcoal-800), var(--charcoal-950));
  border:1px solid rgba(255,255,255,.09);
}
@media(min-width:768px){.final-cta{padding:4.2rem 2rem;}}
.final-cta h2{
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--pure-white);
  margin-bottom:.9rem;
}
.final-cta p{color:var(--metal-200);margin-bottom:2rem;font-size:1.02rem;}
.final-cta__actions{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:1.6rem;
}
.final-cta__phone{
  font-family:var(--font-head);font-weight:800;
  font-size:1.15rem;color:var(--metal-200);
  direction:ltr;display:inline-block;
}
.final-cta__phone strong{color:var(--pure-white);font-size:1.3rem;}

/* =========================================================
   14) الفوتر
========================================================= */
.site-footer{
  background:var(--charcoal-950);
  border-top:1px solid rgba(255,255,255,.07);
  padding-block:var(--space-5) 2rem;
}
.footer-grid{
  display:grid;
  gap:2.4rem;
  margin-bottom:2.5rem;
}
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand p{color:var(--metal-400);font-size:.88rem;max-width:38ch;margin-bottom:1.1rem;}
.footer-brand__phone{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);font-weight:700;color:var(--warm-white);direction:ltr;
}
.footer-brand__phone .icon{width:1.1rem;height:1.1rem;color:var(--accent);}

.footer-col h4{
  font-family:var(--font-head);font-size:.95rem;color:var(--pure-white);margin-bottom:1rem;
}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem;}
.footer-col a{color:var(--metal-400);font-size:.88rem;transition:color .2s;}
.footer-col a:hover{color:var(--accent);}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:1.6rem;
  display:flex;flex-direction:column;gap:.8rem;
  font-size:.82rem;color:var(--metal-500);
}
@media(min-width:768px){
  .footer-grid{grid-template-columns:1.4fr repeat(3,1fr);}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
}

/* =========================================================
   15) شريط الجوال السفلي
========================================================= */
.mobile-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1fr 1fr;
  background:rgba(15,19,24,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.09);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem .5rem;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;
  color:var(--warm-white);
}
.mobile-bar a:first-child{border-inline-end:1px solid rgba(255,255,255,.09);}
.mobile-bar .icon{width:1.2rem;height:1.2rem;}
.mobile-bar a:last-child{color:#25d366;}
.mobile-bar a:first-child .icon{color:var(--accent);}

body{padding-bottom:4.3rem;}
@media(min-width:1080px){
  .mobile-bar{display:none;}
  body{padding-bottom:0;}
}

/* =========================================================
   16) صفحة سياسة الخصوصية وصفحات عامة
========================================================= */
.legal{
  padding-block:9rem var(--space-6);
  max-width:800px;
  margin-inline:auto;
}
.legal h1{font-size:clamp(1.7rem,3.6vw,2.3rem);color:var(--pure-white);margin-bottom:.6rem;}
.legal__updated{color:var(--metal-400);font-size:.86rem;margin-bottom:2.5rem;}
.legal h2{font-size:1.2rem;color:var(--pure-white);margin-block:2rem .8rem;}
.legal p, .legal li{color:var(--metal-300);font-size:.96rem;margin-bottom:.9rem;}
.legal ul{list-style:disc;padding-inline-start:1.4rem;}
.legal a{color:var(--accent);text-decoration:underline;}
.breadcrumb{
  display:flex;gap:.5rem;align-items:center;
  color:var(--metal-400);font-size:.85rem;margin-bottom:2rem;
}
.breadcrumb a{color:var(--metal-300);}
.breadcrumb .icon{width:.85rem;height:.85rem;transform:scaleX(-1);}

/* =========================================================
   17) تحسينات إضافية
========================================================= */
::selection{background:var(--accent);color:#fff;}

.reveal{
  opacity:1;
  transform:none;
}
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

.divider-fade{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin-block:0;
}