/* ═══════════════════════════════════════════════════════════
   صلاح الدين لقطع غيار السيارات
   Scroll-scrubbed canvas sequences · RTL · dark cinematic
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:       #08090B;
  --ink-2:     #0D0F12;
  --surface:   #111419;
  --line:      rgba(243,238,231,.10);
  --line-2:    rgba(243,238,231,.18);
  --cream:     #F3EEE7;
  --muted:     #9BA0A8;
  --muted-2:   #6E747D;
  --red:       #C9383E;
  --red-deep:  #9F292B;
  --red-glow:  rgba(201,56,62,.30);
  --steel:     #8FA6C4;

  --d: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --b: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;

  --pad: clamp(18px, 5vw, 76px);
  --wrap: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--b); font-weight:400; line-height:1.75;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--d); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--red); color:#fff; }

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

/* film grain */
.grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:900; opacity:.036; mix-blend-mode:overlay;
}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  --bh:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:var(--bh); padding-inline:1.35em; border-radius:999px;
  font-family:var(--d); font-size:.92rem; font-weight:500; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .45s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, box-shadow .45s, color .3s;
}
.btn--lg{ --bh:56px; font-size:1.02rem; padding-inline:1.9em; }
.btn--red{
  background:var(--red); color:#fff;
  box-shadow:0 10px 34px -12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--red:hover{ transform:translateY(-3px); box-shadow:0 20px 46px -14px var(--red-glow); }
.btn--glass{
  background:rgba(243,238,231,.06); color:var(--cream);
  border-color:var(--line-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn--glass:hover{ background:rgba(243,238,231,.13); transform:translateY(-3px); }
.btn--line{ border-color:var(--line-2); color:var(--cream); font-variant-numeric:tabular-nums; }
.btn--line:hover{ border-color:var(--red); color:#fff; background:var(--red); }

/* ═══════════ EYEBROW ═══════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--d); font-size:.76rem; font-weight:400;
  letter-spacing:.14em; color:var(--muted); text-transform:uppercase;
  margin:0 0 1.1rem;
}
.eyebrow--light{ color:rgba(243,238,231,.72); }
.tick{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 4px var(--red-glow); flex:none;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px var(--red-glow); } 50%{ box-shadow:0 0 0 8px rgba(201,56,62,.06); } }

/* ═══════════ PRELOADER ═══════════ */
.boot{
  position:fixed; inset:0; z-index:1000; background:var(--ink);
  display:grid; place-items:center; clip-path:inset(0 0 0 0);
}
.boot__center{ text-align:center; padding-inline:24px; }
.boot__logo{
  width:clamp(96px,14vw,148px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.6));
  animation:bootLogo 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes bootLogo{
  0%,100%{ transform:scale(1); opacity:.92; }
  50%    { transform:scale(1.045); opacity:1; }
}
.boot__name{
  font-family:var(--d); font-size:clamp(1.1rem,3.2vw,1.6rem); font-weight:600;
  margin-top:1.35rem; letter-spacing:-.01em;
}
.boot__name span{ display:block; font-size:.62em; font-weight:300; color:var(--muted); letter-spacing:.06em; margin-top:.25em; }
.boot__hint{ margin-top:.7rem; font-size:.8rem; color:var(--muted-2); letter-spacing:.1em; }
.boot__pct{
  position:absolute; bottom:clamp(30px,6vh,58px); left:var(--pad);
  font-family:var(--d); font-size:clamp(2.6rem,10vw,5rem); font-weight:200;
  color:rgba(243,238,231,.16); line-height:1; font-variant-numeric:tabular-nums;
}
.boot__bar{ position:absolute; bottom:0; inset-inline:0; height:2px; background:rgba(243,238,231,.07); }
.boot__bar i{ display:block; height:100%; width:0%; background:var(--red); box-shadow:0 0 18px var(--red-glow); }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; inset-inline:0; z-index:700;
  transition:background .5s, backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,9,11,.72); backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3); border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
}
.brand{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.brand__logo{ width:52px; height:auto; flex:none; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.brand__word{
  font-family:var(--d); font-size:1rem; font-weight:600; line-height:1.15; letter-spacing:-.01em;
}
.brand__word em{
  display:block; font-style:normal; font-size:.66em; font-weight:300;
  color:var(--muted); letter-spacing:.04em; margin-top:.15em;
}
.nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-inline-start:auto; }
.nav__links a{
  font-size:.9rem; color:var(--muted); position:relative; padding-block:4px;
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:1px;
  background:var(--red); transition:width .45s cubic-bezier(.16,1,.3,1);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:12px; margin-inline-start:12px; }

.nav__burger{
  display:none; width:44px; height:44px; border:1px solid var(--line-2);
  border-radius:50%; background:transparent; position:relative; cursor:pointer;
}
.nav__burger span{
  position:absolute; inset-inline:13px; height:1.5px; background:var(--cream);
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.nav__burger span:nth-child(1){ top:18px; }
.nav__burger span:nth-child(2){ top:25px; }
.nav__burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* mobile menu */
.mmenu{
  position:fixed; inset:0; z-index:650; background:rgba(8,9,11,.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:100px var(--pad) 48px;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
.mmenu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mmenu__links{ display:flex; flex-direction:column; gap:2px; }
.mmenu__links a{
  font-family:var(--d); font-size:clamp(1.9rem,9vw,2.9rem); font-weight:500;
  padding-block:.24em; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1) calc(var(--i)*.055s + .12s),
             transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i)*.055s + .12s), color .3s;
}
.mmenu.open .mmenu__links a{ opacity:1; transform:none; }
.mmenu__links a:hover{ color:var(--red); }
.mmenu__foot{
  margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1) calc(var(--i)*.055s + .12s),
             transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i)*.055s + .12s);
}
.mmenu.open .mmenu__foot{ opacity:1; transform:none; }
.mmenu__wa{ color:var(--muted); font-size:.95rem; }

/* ═══════════ SCRUB SECTIONS ═══════════ */
.scrub{ position:relative; }
.scrub--hero{ height:520vh; }
.scrub--reveal{ height:280vh; }
.scrub__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; background:#05060a;
}
.scrub__canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* Three stacked layers: a dark pool under the centred type, a floor
   gradient, and an outer vignette. The pool is what makes Arabic display
   type readable over a bright, busy car. */
.scrub__tint{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(56% 40% at 50% 48%, rgba(5,6,10,.74) 0%, rgba(5,6,10,.44) 50%, rgba(5,6,10,0) 78%),
    linear-gradient(to top, rgba(5,6,10,.95) 0%, rgba(5,6,10,.34) 34%, rgba(5,6,10,0) 64%),
    radial-gradient(125% 95% at 50% 42%, rgba(5,6,10,0) 42%, rgba(5,6,10,.62) 100%);
}
.scrub__tint--soft{
  background:
    radial-gradient(54% 38% at 50% 48%, rgba(5,6,10,.66) 0%, rgba(5,6,10,.34) 52%, rgba(5,6,10,0) 78%),
    linear-gradient(to top, rgba(5,6,10,.86) 0%, rgba(5,6,10,.2) 40%, rgba(5,6,10,0) 66%),
    radial-gradient(130% 95% at 50% 46%, rgba(5,6,10,0) 46%, rgba(5,6,10,.54) 100%);
}

.hero__eyebrow{
  position:absolute; top:calc(88px + env(safe-area-inset-top)); inset-inline-start:var(--pad);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--d); font-size:clamp(.7rem,1.5vw,.82rem); font-weight:300;
  letter-spacing:.12em; color:rgba(243,238,231,.7); z-index:3;
}

.hero__cap{
  position:relative; z-index:3; text-align:center; padding-inline:var(--pad);
  grid-area:1/1; opacity:0; will-change:opacity,filter,transform;
}
.hero__h{
  font-family:var(--d); font-weight:600;
  font-size:clamp(2.2rem,7.4vw,5.4rem); line-height:1.12; letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(5,6,10,.85), 0 12px 70px rgba(5,6,10,.75);
}
.hero__h--mid{ font-size:clamp(1.9rem,6.2vw,4.4rem); font-weight:500; }
.hero__h em{ font-style:normal; color:var(--red); }

.hero__final{
  position:relative; z-index:4; grid-area:1/1; text-align:center;
  padding-inline:var(--pad); opacity:0; pointer-events:none;
}
.hero__big{
  font-family:var(--d); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(3.6rem,15vw,10rem); line-height:1;
  background:linear-gradient(180deg,#fff 10%, #CFC9C1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(5,6,10,.9)) drop-shadow(0 20px 70px rgba(5,6,10,.7));
}
.hero__sig{
  display:block; font-size:max(.86rem, .19em); font-weight:300; letter-spacing:.06em;
  color:var(--red); -webkit-text-fill-color:var(--red); margin-top:1.35em;
}
.hero__sub{
  max-width:52ch; margin:1.5rem auto 0; color:rgba(243,238,231,.84);
  font-size:clamp(.94rem,2vw,1.1rem); line-height:1.85;
  text-shadow:0 2px 18px rgba(5,6,10,.9);
}
.hero__sub b{ color:var(--cream); font-weight:600; }
.hero__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:2.1rem; }

.scrub__ui{
  position:absolute; bottom:calc(30px + env(safe-area-inset-bottom)); inset-inline-start:var(--pad);
  z-index:3; display:flex; align-items:center; gap:14px;
}
.scrub__label{ font-family:var(--d); font-size:.72rem; letter-spacing:.16em; color:var(--muted); }
.scrub__line{ display:block; width:clamp(80px,16vw,180px); height:1.5px; background:rgba(243,238,231,.16); }
.scrub__line i{
  display:block; height:100%; width:0%; background:var(--red);
  box-shadow:0 0 14px var(--red-glow);
}

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--ink-2); padding-block:1.15rem;
}
.marquee__track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
.marquee__row{ display:flex; align-items:center; gap:1.6rem; padding-inline-end:1.6rem; }
.marquee__row span{
  font-family:var(--d); font-size:clamp(1rem,2.4vw,1.5rem); font-weight:500;
  letter-spacing:-.01em; color:var(--cream); white-space:nowrap;
}
.marquee__row span.o{ color:transparent; -webkit-text-stroke:1px rgba(243,238,231,.36); }
.marquee__row b{ color:var(--red); font-size:.72em; }

/* ═══════════ STATEMENT ═══════════ */
.statement{ padding-block:clamp(90px,15vh,180px); }
.statement__text{
  font-family:var(--d); font-weight:400;
  font-size:clamp(1.35rem,3.9vw,3rem); line-height:1.5; letter-spacing:-.015em;
  max-width:23ch;
}
.statement__text .w{ color:#2E3238; transition:color .3s; }
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,4vw,52px); margin-top:clamp(48px,8vh,90px);
  border-top:1px solid var(--line); padding-top:clamp(28px,4vh,44px);
}
.stats__item b{
  display:block; font-family:var(--d); font-weight:300;
  font-size:clamp(2.6rem,6.5vw,4.4rem); line-height:1; color:var(--cream);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.stats__item span{ display:block; margin-top:.55rem; color:var(--muted); font-size:.92rem; }

/* ═══════════ SECTION HEADS ═══════════ */
.shead{ margin-bottom:clamp(36px,6vh,64px); }
.stitle{
  font-family:var(--d); font-weight:600;
  font-size:clamp(2rem,5.6vw,4.2rem); line-height:1.1; letter-spacing:-.025em;
}
.stitle em{ font-style:normal; color:var(--red); }
.clip{ display:block; overflow:hidden; padding-block:.06em; }
.clip__in{ display:block; }
.shead__sub{ margin-top:1rem; color:var(--muted); max-width:46ch; font-size:1rem; }

/* ═══════════ PARTS / ANATOMY ═══════════ */
.anatomy{ height:600vh; position:relative; }
.anatomy__stage{
  position:sticky; top:0; height:100svh; display:flex; align-items:center;
  background:linear-gradient(180deg,var(--ink) 0%, #0A0C10 100%);
}
.anatomy__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,72px);
  align-items:center; width:100%;
}
.anatomy__title{
  font-family:var(--d); font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.4rem); letter-spacing:-.025em; margin-bottom:1.6rem;
}
.anatomy__title em{ font-style:normal; color:var(--red); }

.asteps{ display:flex; flex-direction:column; gap:2px; }
.asteps__item{
  display:flex; gap:1rem; padding:.72rem .9rem; border-radius:14px;
  opacity:.3; filter:blur(.4px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1), background .55s, filter .55s, transform .55s cubic-bezier(.16,1,.3,1);
}
.asteps__item.on{
  opacity:1; filter:none; background:rgba(243,238,231,.045);
  box-shadow:inset 0 0 0 1px var(--line);
}
.asteps__num{
  font-family:var(--d); font-size:.76rem; font-weight:400; color:var(--red);
  letter-spacing:.1em; padding-top:.5em; flex:none; font-variant-numeric:tabular-nums;
}
.asteps__item h3{ font-size:clamp(1rem,2.1vw,1.28rem); font-weight:600; }
.asteps__item p{
  color:var(--muted); font-size:.92rem; line-height:1.7; margin-top:.2rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s cubic-bezier(.16,1,.3,1), opacity .5s, margin .6s;
}
.asteps__item.on p{ max-height:6.5em; opacity:1; }

.anatomy__media{
  position:relative; margin:0; border-radius:20px; overflow:hidden;
  aspect-ratio:16/11; background:#05060a;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px var(--line);
}
.anatomy__media canvas{ position:absolute; inset:0; width:100%; height:100%; }
.anatomy__mtag{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  font-family:var(--d); font-size:.68rem; letter-spacing:.1em;
  color:rgba(243,238,231,.8); background:rgba(5,6,10,.5);
  border:1px solid var(--line); border-radius:999px; padding:.35em 1em;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.anatomy__mbar{
  position:absolute; bottom:0; inset-inline:0; height:2px;
  background:rgba(243,238,231,.12); z-index:2;
}
.anatomy__mbar i{ display:block; height:100%; width:0%; background:var(--red); box-shadow:0 0 14px var(--red-glow); }

/* ═══════════ BRANDS ═══════════ */
.brands{ padding-block:clamp(80px,13vh,150px); }
/* 16 brands — column counts that divide evenly so no row is ever ragged */
.bgrid{
  display:grid; grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--line); border-inline-start:1px solid var(--line);
}
.bgrid__i{
  display:grid; place-items:center; min-height:clamp(84px,10vw,116px);
  border-bottom:1px solid var(--line); border-inline-end:1px solid var(--line);
  font-family:var(--d); font-weight:500; font-size:clamp(.7rem,1.15vw,.92rem);
  letter-spacing:.08em; color:var(--muted-2); position:relative; overflow:hidden;
  text-align:center; padding-inline:6px;
  transition:color .45s, background .45s, letter-spacing .45s;
}
.bgrid__i::before{
  content:''; position:absolute; inset:0; background:radial-gradient(80% 100% at 50% 120%, var(--red-glow), transparent 70%);
  opacity:0; transition:opacity .5s;
}
.bgrid__i:hover{ color:var(--cream); background:rgba(243,238,231,.03); letter-spacing:.16em; }
.bgrid__i:hover::before{ opacity:1; }
.bgrid__i--star{ color:var(--cream); font-weight:700; font-size:clamp(.95rem,1.8vw,1.3rem); }
.bgrid__i--star::after{
  content:''; position:absolute; inset-inline:26%; bottom:20px; height:2px;
  background:var(--red); box-shadow:0 0 16px var(--red-glow);
}

/* ═══════════ SERVICES / WHY ═══════════ */
.services{ padding-block:clamp(80px,13vh,150px); }
/* 8 cards — 4×2 / 2×4 / 1×8, never a ragged row */
.svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.svc__card{
  position:relative; padding:clamp(24px,3vw,34px); border-radius:20px;
  background:linear-gradient(180deg, rgba(243,238,231,.045), rgba(243,238,231,.014));
  border:1px solid var(--line); overflow:hidden; isolation:isolate;
  transition:transform .55s cubic-bezier(.16,1,.3,1), border-color .45s, background .45s;
}
.svc__card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120% 130% at 50% 130%, rgba(201,56,62,.24), transparent 62%);
  transition:opacity .55s;
}
.svc__card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.svc__card:hover::before{ opacity:1; }
.svc__num{
  font-family:var(--d); font-size:.72rem; letter-spacing:.16em; color:var(--red);
  display:block; margin-bottom:1.9rem; font-variant-numeric:tabular-nums;
}
.svc__card h3{ font-size:clamp(1.1rem,2.3vw,1.4rem); font-weight:600; }
.svc__card p{ color:var(--muted); font-size:.93rem; line-height:1.75; margin-top:.5rem; }
.svc__go{
  position:absolute; top:clamp(24px,3vw,34px); inset-inline-start:clamp(24px,3vw,34px);
  color:var(--muted-2); font-size:1.15rem; transition:transform .5s cubic-bezier(.16,1,.3,1), color .4s;
}
.svc__card:hover .svc__go{ color:var(--red); transform:translateX(-6px); }

/* ═══════════ GALLERY ═══════════ */
.gallery{ height:340vh; position:relative; }
.gallery__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,4vh,42px);
  background:linear-gradient(180deg,#0A0C10 0%, var(--ink) 100%);
}
.gallery__head{ display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.gallery__head .eyebrow{ margin-bottom:.5rem; }
.gallery__hint{
  margin-inline-start:auto; font-family:var(--d); font-size:.76rem;
  letter-spacing:.16em; color:var(--muted-2);
}
.gtrack{
  display:flex; gap:clamp(12px,1.6vw,22px); align-items:center;
  padding-inline:var(--pad); width:max-content; will-change:transform;
}
.gcard{
  margin:0; position:relative; flex:none;
  width:clamp(220px,26vw,360px); height:clamp(180px,34vh,300px);
  border-radius:16px; overflow:hidden; cursor:zoom-in;
  border:1px solid var(--line); background:var(--surface);
}
.gcard--tall{ height:clamp(250px,50vh,430px); }
.gcard img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.16,1,.3,1), filter .6s;
  filter:saturate(.92) contrast(1.03);
}
.gcard:hover img{ transform:scale(1.06); filter:saturate(1.05) contrast(1.05); }
.gcard figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:1.5rem 1.1rem .95rem;
  font-family:var(--d); font-size:.82rem; font-weight:400; color:var(--cream);
  background:linear-gradient(to top, rgba(5,6,10,.9), transparent);
}
.gcard--cta{
  display:grid; place-items:center; background:var(--red);
  border-color:var(--red); cursor:pointer;
}
.gcard--cta a{
  font-family:var(--d); font-size:clamp(1.05rem,2.2vw,1.4rem); font-weight:500;
  text-align:center; line-height:1.4; color:#fff;
}

/* ═══════════ PROCESS ═══════════ */
.process{ padding-block:clamp(80px,13vh,150px); }
.pline{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,3vw,38px); border-top:1px solid var(--line); padding-top:clamp(30px,5vh,50px);
}
.pline__item b{
  font-family:var(--d); font-size:.74rem; letter-spacing:.18em; color:var(--red);
  display:block; margin-bottom:1rem; font-variant-numeric:tabular-nums;
}
.pline__item h3{ font-size:clamp(1.15rem,2.4vw,1.45rem); font-weight:600; }
.pline__item p{ color:var(--muted); font-size:.93rem; margin-top:.45rem; line-height:1.75; }

/* ═══════════ FAQ ═══════════ */
.faq{ padding-block:clamp(80px,13vh,150px); border-top:1px solid var(--line); }
.faq__list{ display:flex; flex-direction:column; gap:8px; max-width:880px; }
.faq__item{
  border:1px solid var(--line); border-radius:16px; padding:0 clamp(16px,2.5vw,26px);
  background:linear-gradient(180deg, rgba(243,238,231,.035), rgba(243,238,231,.01));
  transition:border-color .35s, background .35s;
}
.faq__item[open]{ border-color:var(--line-2); background:rgba(243,238,231,.045); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:clamp(16px,2vw,22px) 0;
  font-family:var(--d); font-size:clamp(1rem,2vw,1.2rem); font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:'+'; flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--red); font-weight:400; font-size:1.2rem; transition:transform .4s, background .3s;
}
.faq__item[open] summary::after{ transform:rotate(45deg); background:rgba(201,56,62,.12); }
.faq__item p{ color:var(--muted); padding-bottom:clamp(16px,2vw,22px); line-height:1.8; font-size:.97rem; max-width:70ch; }
.faq__item p a{ color:var(--red); }
.nav__cat{ color:var(--cream) !important; }

/* ═══════════ CTA ═══════════ */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(100px,18vh,190px); text-align:center; background:#05060a;
}
.cta__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  opacity:.5; filter:saturate(.85);
}
.cta__shade{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(5,6,10,.35) 0%, rgba(5,6,10,.9) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}
.cta__inner{ position:relative; }
.cta .eyebrow{ justify-content:center; }
.cta__title{
  font-family:var(--d); font-weight:600;
  font-size:clamp(2.3rem,7vw,5.4rem); line-height:1.1; letter-spacing:-.03em;
}
.cta__title em{ font-style:normal; color:var(--red); }
.cta__phones{
  display:flex; gap:clamp(16px,4vw,48px); justify-content:center; flex-wrap:wrap;
  margin-top:clamp(28px,5vh,48px);
}
.cta__phone{
  font-family:var(--d); font-weight:300; letter-spacing:.02em;
  font-size:clamp(1.6rem,5vw,3.1rem); color:var(--cream);
  font-variant-numeric:tabular-nums; position:relative; padding-bottom:.1em;
  transition:color .35s;
}
.cta__phone::after{
  content:''; position:absolute; bottom:0; inset-inline:0; height:1px;
  background:var(--line-2); transform:scaleX(0); transform-origin:right;
  transition:transform .6s cubic-bezier(.16,1,.3,1), background .35s;
}
.cta__phone:hover{ color:var(--red); }
.cta__phone:hover::after{ transform:scaleX(1); background:var(--red); }
.cta__sub{ margin-top:1.5rem; color:var(--muted); font-size:1rem; }
.cta__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }

/* ═══════════ FOOTER ═══════════ */
.footer{ border-top:1px solid var(--line); padding-block:clamp(38px,6vh,64px); background:var(--ink); }
.footer__inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer__nav{ display:flex; gap:clamp(12px,2vw,26px); flex-wrap:wrap; margin-inline-start:auto; }
.footer__nav a{ color:var(--muted); font-size:.9rem; transition:color .3s; }
.footer__nav a:hover{ color:var(--cream); }
.footer__fine{ width:100%; color:var(--muted-2); font-size:.82rem; padding-top:20px; border-top:1px solid var(--line); }
.footer__fine span{ color:var(--red); }

/* ═══════════ MOBILE ACTION BAR ═══════════ */
.abar{
  position:fixed; z-index:680; inset-inline:10px; bottom:calc(10px + env(safe-area-inset-bottom));
  display:none; gap:10px;
  transform:translateY(140%); transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.abar.show{ transform:none; }
.abar__b{
  flex:1; height:52px; display:grid; place-items:center; border-radius:14px;
  font-family:var(--d); font-size:1rem; font-weight:500;
}
.abar__b--call{ background:var(--red); color:#fff; box-shadow:0 10px 30px -10px var(--red-glow); }
.abar__b--wa{
  background:rgba(243,238,231,.09); color:var(--cream); border:1px solid var(--line-2);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed; inset:0; z-index:950; background:rgba(5,6,10,.96);
  display:grid; place-items:center; padding:clamp(20px,5vw,70px);
  opacity:0; pointer-events:none; transition:opacity .45s;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox figure{ margin:0; max-width:min(1100px,100%); }
.lightbox img{ width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:12px; }
.lightbox figcaption{
  margin-top:1rem; text-align:center; color:var(--muted);
  font-family:var(--d); font-size:.9rem;
}
.lightbox__x{
  position:absolute; top:22px; inset-inline-end:22px; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--line-2); background:transparent;
  color:var(--cream); font-size:1.05rem; cursor:pointer; transition:background .3s, transform .3s;
}
.lightbox__x:hover{ background:rgba(243,238,231,.1); transform:rotate(90deg); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1200px){
  .bgrid{ grid-template-columns:repeat(4,1fr); }
  .bgrid__i{ font-size:clamp(.78rem,1.9vw,1rem); }
  .bgrid__i--star{ font-size:clamp(1rem,2.4vw,1.35rem); }
  .svc{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1080px){
  .anatomy{ height:520vh; }
  .anatomy__grid{ grid-template-columns:1fr; gap:22px; }
  .anatomy__media{ order:-1; aspect-ratio:16/9; }
  .asteps__item{ padding:.55rem .7rem; }
  .asteps__item p{ font-size:.88rem; }
  .anatomy__title{ margin-bottom:1rem; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__right{ margin-inline-start:auto; }
  .nav__phone{ display:none; }
  .brand__word{ font-size:.92rem; }
  .brand__logo{ width:38px; }
  .abar{ display:flex; }
  .scrub--hero{ height:440vh; }
  .gallery{ height:300vh; }
  .statement__text{ max-width:none; }
  .footer__nav{ margin-inline-start:0; width:100%; }
  .hero__eyebrow{ font-size:.68rem; inset-inline-end:var(--pad); }
  .scrub__ui{ bottom:calc(78px + env(safe-area-inset-bottom)); }
  .cta{ padding-bottom:clamp(120px,20vh,200px); }
  .gallery__head{ flex-direction:column; align-items:flex-start; gap:2px; }
  .gallery__hint{ margin-inline-start:0; margin-top:6px; }
  .shead__sub{ font-size:.94rem; }
}
@media (max-width:640px){
  .bgrid{ grid-template-columns:repeat(2,1fr); }
  .svc{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .anatomy{ height:480vh; }
  .asteps__item p{ font-size:.85rem; line-height:1.6; }
  .gcard{ width:78vw; height:clamp(200px,32vh,280px); }
  .gcard--tall{ height:clamp(260px,44vh,360px); }
  .hero__ctas .btn{ flex:1 1 auto; }
}

/* ═══════════ REDUCED MOTION / STATIC ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .scrub--hero,.scrub--reveal{ height:auto; }
  .scrub__stage{ position:relative; height:70svh; }
  .anatomy{ height:auto; }
  .anatomy__stage{ position:relative; height:auto; padding-block:80px; }
  .gallery{ height:auto; }
  .gallery__stage{ position:relative; height:auto; padding-block:80px; }
  .gtrack{ width:100%; overflow-x:auto; padding-bottom:16px; }
  .hero__cap{ position:relative; opacity:1; }
  .hero__final{ opacity:1; pointer-events:auto; }
  .asteps__item{ opacity:1; filter:none; }
  .asteps__item p{ max-height:none; opacity:1; }
}
html.static .hero__cap:not([data-cap="0"]):not([data-rcap="0"]){ display:none; }
html.static .hero__final{ opacity:1 !important; pointer-events:auto; }

/* ═══════════ ACCESSIBILITY: SKIP LINK + FOCUS ═══════════ */
/* رابط تخطٍّ لكيبورد/قارئ الشاشة — مخفي بصرياً، يظهر بأعلى الصفحة عند التركيز */
.skip{
  position:absolute; inset-inline-start:12px; top:-48px; z-index:2000;
  background:var(--red); color:#fff; padding:.7em 1.3em; border-radius:8px;
  font-weight:600; text-decoration:none; transition:top .3s cubic-bezier(.16,1,.3,1);
}
.skip:focus{ top:12px; }

/* حلقة تركيز موحّدة لكل عناصر التفاعل — تظهر فقط لتنقّل الكيبورد لا لضغطة الفأرة */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), summary:focus:not(:focus-visible){ outline:none; }