/* ==========================================================================
   style.css  —  تصميم الموقع
   ملاحظة: يستخدم خصائص CSS المنطقية (inline-start/end) ليشتغل
   صح في الاتجاهين العربي (RTL) والإنجليزي (LTR) بنفس الملف.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) المتغيرات
   -------------------------------------------------------------------------- */
:root {
  /* الألوان */
  --bg: #08080b;

  /* الخلفية الفوتوغرافية الخفيفة — بدّل الصورة أو الإعدادات من data.js */
  --bg-photo: url("../media/bg.jpg");
  --bg-photo-o: 0.55;

  /* ⭐ نسخ شفافة من خلفيات الأقسام.
     بدون هاي، الأقسام معتمة ١٠٠٪ وبتحجب الصورة تماماً.
     0.88 = شبه معتمة، بيبان شي من الخلفية بس النص يضل واضح. */
  --bg-t: rgba(8, 8, 11, 0.88);
  --bg-2-t: rgba(14, 14, 19, 0.88);

  --bg-2: #0e0e13;

  /* الهيرو: شفافية مختلفة، لأن فوقه 0.55 كاملة من الصورة
     (مش 0.48 مثل باقي الأقسام)، والفيديو فوقه ما بيقبل. */
  --hero-photo-t: rgba(10, 10, 14, 0.62);
  --surface: #121218;
  --surface-2: #191921;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text: #f4f4f6;
  --muted: #9a9aa6;
  --muted-2: #7c7c89; /* أفتح من #6e6e7a لتفمين نسبة التباين (WCAG AA) */

  /* ⭐ اللون المميّز — أحمر دموي غامق.
     #c1121f chosen because it's the darkest red that still passes
     WCAG AA (5.67:1 against white text). Lighter reds fail the 4.5:1. */
  --accent: #c1121f;
  --accent-bright: #e01e37; /* للأضواء والتوهجات */
  --accent-deep: #78040f;   /* للتدرّجات الغامقة */
  --accent-soft: rgba(193, 18, 31, 0.14);
  --accent-line: rgba(193, 18, 31, 0.4);
  --accent-glow: rgba(193, 18, 31, 0.55);

  /* ==========================================================
     ⭐ التدرّج اللوني للنصوص — من الأحمر للأسود
     ==========================================================
     background-clip: text بيقصّ الخلفية على شكل الحروف.
     ⚠️ لازم -webkit-Safari العربي أول:
        -webkit-background-clip: text  (webkit يسبقي text)
     ⚠️ لازم fill: transparent و color: transparent معاً،
        وإلا Safari/Android بيعرض النص أسود عادي.
     ⚠️ ما بنستخدمها على نص طويل (sec-lede) — بيصير صعب
        يقرأ. بس على العناوين الكبيرة. */
  /* ⚠️ ملاحظة مهمة: التدرّج ما بينتهي بـ accent-deep (#78040f)
     لأنه تباينه 1.74:1 مع الخلفية — يعني نص بيختفي.
     آخر لون = --accent (3.21:1) وهو يعدّي AA للنصوص الكبيرة. */
  --grad-head: linear-gradient(172deg, #ff5a6b 0%, var(--accent-bright) 34%, var(--accent) 100%);
  --grad-white-red: linear-gradient(
    170deg,
    #ffffff 0%,
    #f0d6d8 26%,
    var(--accent-bright) 64%,
    var(--accent) 100%
  );

  /* المسافات */
  --max: 1280px;
  --gutter: 28px;
  --section-y: 120px;

  /* الخطوط */
  --font-ar: "Tajawal", "Cairo", system-ui, sans-serif;
  --font-en: "Inter", system-ui, sans-serif;
  --font-display: "Oswald", "Inter", system-ui, sans-serif;
  /* خط تقني لشريط الكاميرا والتايم كود — نظامي، بلا تحميل إضافي */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;

  /* الحركات */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;

  /* أنصاف الأقطار */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2) إعادة الضبط
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* منع التمرير وقت ما المودال مفتوح */
body.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   الخلفية الفوتوغرافية
   --------------------------------------------------------------------------
   ⚠️ ليش html::before مو body::before؟
      لأن body's background بينتقل تلقائياً للـ canvas، والـ pseudo
      بـ z-index:-1 بيترسم فوق الـ canvas وتحت كل المحتوى.

   ⚠️ ليش fixed مو absolute؟
      عشان ما تتحرك مع السكرول — بتضل ثابتة قدام الشاشة.
       ولهذا السبب: 0.55 * 0.88 = 0.48 فعلياً على الأقسام،
      بس 0.55 كاملة فوق الهيرو. → لذلك لازم الهيرو يبلّش بشفافية
      خاصة فيه (--hero-photo-t) حتى يطلع التباين متساوي.

   التحكم: SETTINGS.cinematic.bgPhoto و bgPhotoOpacity في data.js */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ندفعها للوراء: ضباب + قِصَر تشبّع (رمادي تقريباً) */
  filter: blur(3px) saturate(0.5);
  opacity: var(--bg-photo-o, 0.55);

  /* vinjet: يخفي الأطراف عشان ما تشد العين */
  box-shadow: inset 0 0 clamp(70px, 11vw, 220px) rgba(8, 8, 11, 0.8);
}

/* إطفاء الخلفية من data.js → bgPhoto: false */
html.no-bg-photo::before {
  display: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

::selection {
  background: var(--accent);
  color: #10100c;
}

/* شريط التمرير */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #2a2a33;
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a46;
}

/* --------------------------------------------------------------------------
   3) الخطوط حسب اتجاه الصفحة
   -------------------------------------------------------------------------- */
html[lang="ar"] body {
  font-family: var(--font-ar);
}
html[lang="ar"] .display,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-family: var(--font-ar);
  font-weight: 700;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4) أدوات مساعدة
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ==========================================================
   ⭐ تدرّج النص — من الأبيض للقرمزي
   ==========================================================
   التدرّج بينترسم على الحروف نفسها (مش على صندوق خلفي).
   -webkit- لازم يسبق standard عشان Safari، و fill:transparent
   ضروري مع color:transparent وإلا Chrome بيعرض النص أسود.
   ⭐ مطفيّ افتراضياً — النص بلون واحد (var(--text)) للأكسسibilidad.
   ========================================================== */
.grad-text {
  /* background-image: var(--grad-head); */
  /* -webkit-background-clip: text; */
  /* background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
  /* color: transparent; */
  color: var(--text);
}

/* ==========================================================
   العناوين المكسّرة (split) — لا تلمسها
   ==========================================================
   الخلفية موجودة على العنوان الأب (h2) نفسه، و background-clip:
   text بيقصّها على شكل كل الحروف جواه — فكل الكلمات بتشارك
   تدرّج واحد متواصل، زي ما بدنا بالضبط.

   ⚠️ خطر: لو حطّينا background-clip على كل .word لحالها،
      الـ span بيرث background-image:none من الأب .word،
      و text-fill:transparent بيطلع النصّ غير مرئي إطلاقاً.
      لذلك ما بنضيف أي قاعدة على الـ .word — بنتركها ترث. */

/* العنوان الرئيسي بالهيرو — أبيض يذوب للأحمر */
.hero__title.grad-text {
  /* background-image: var(--grad-white-red); */
  color: var(--text);
}

/* كلمة مميزة داخل عنوان (em) */
.hero__title em.grad-text,
.display em.grad-text {
  /* background-image: var(--grad-head); */
  color: var(--text);
}

/* العنوان الكبير بكل قسم — نفس التدرّج */
.sec-title.grad-text,
.contact__title.grad-text {
  /* background-image: var(--grad-white-red); */
  color: var(--text);
}

/* الأرقام الكبيرة */
.grad-text-num {
  /* background-image: var(--grad-head); */
  /* -webkit-background-clip: text; */
  /* background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
  /* color: transparent; */
  color: var(--text);
}

/* عنوان القسم: سطر صغير + عنوان كبير */
.sec-head {
  margin-bottom: 56px;
  max-width: 720px;
}

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}

.sec-label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.sec-title {
  font-size: clamp(30px, 5vw, 52px);
  margin-bottom: 18px;
}

.sec-lede {
  color: var(--muted);
  font-size: 17px;
  max-width: 62ch;
}

/* تأثير حبيبات خفيف يعطي إحساس السينما */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5) الأزرار
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: #e8b558;
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --------------------------------------------------------------------------
   6) الهيدر
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

/* يظهر الخلفية لما نزلت عن الهيرو */
.header.is-scrolled {
  background: rgba(8, 8, 11, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

/* بعد ما شلنا الشعار والاسم من الهيدر: صارت عنصرين بس —
   القائمة تتزاح لبداية السطر، والأدوات (اللغة + المنيو) تروح
   للطرف الثاني. عشان ما يبقوا ملزوقين ببعض. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}

/* القائمة */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__link {
  position: relative;
  padding: 9px 15px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
  border-radius: var(--r-sm);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--text);
}

.nav__link.is-active::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 15px;
  width: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* أدوات يمين/يسار الهيدر */
.header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
  z-index: 2;
}

/* زر تبديل اللغة */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: all var(--dur) var(--ease);
}

.lang:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}

.lang svg {
  width: 15px;
  height: 15px;
}

/* زر المنيو (موبايل) */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  place-items: center;
}

.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.burger span + span {
  margin-top: 4.5px;
}

.burger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger.is-open span:nth-child(2) {
  opacity: 0;
}
.burger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7) الهيرو
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* ⭐ الخلفية الشفافة: هيك الخلفية الفوتوغرافية (html::before)
   تبان بالهيرو. بدون هاي، .hero__media معتمة وبتحجبها. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--hero-photo-t);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.06);
}

/* تدرّجات فوق الفيديو حتى يضل النص مقروء.
   مخفّفة شوي (أقل عتمة) لأن الخلفية الفوتوغرافية بدها تبان شوي. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      var(--bg) 1%,
      rgba(8, 8, 11, 0.7) 26%,
      rgba(8, 8, 11, 0.26) 58%,
      rgba(8, 8, 11, 0.46) 100%
    ),
    radial-gradient(120% 85% at 50% 45%, transparent 38%, rgba(8, 8, 11, 0.62) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: calc(var(--header-h) + 60px) 70px;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.hero__tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Welcome text — كلمة Welcome كبيرة، الباقي أصغر */
.hero__welcome {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(28px, 5.5vw, 64px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.02em;
}

.hero__welcome .welcome--big {
  display: inline-block;
  font-size: clamp(60px, 11vw, 130px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  margin-inline-end: 8px;
  text-transform: uppercase;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

.hero__title {
  font-size: clamp(44px, 9vw, 116px);
  line-height: 0.96;
  margin-bottom: 20px;
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__role {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 500;
  color: var(--text);
  opacity: 0.9;
  margin-bottom: 14px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  color: var(--muted);
  font-size: 14.5px;
  margin-bottom: 38px;
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__meta svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* تلميح الصوت */
.hero__sound {
  position: absolute;
  inset-block-end: 70px;
  inset-inline-end: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(8, 8, 11, 0.6);
  backdrop-filter: blur(8px);
  font-size: 13px;
  color: var(--muted);
  transition: all var(--dur) var(--ease);
}

.hero__sound:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.hero__sound svg {
  width: 15px;
  height: 15px;
}

/* سهم النزول */
.hero__scroll {
  position: absolute;
  inset-block-end: 70px;
  inset-inline-start: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: drop 2s ease-in-out infinite;
}

@keyframes drop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes recBlink {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0.15;
  }
}

/* --------------------------------------------------------------------------
   شاشة البداية — شريط الكاميرا (فيوفيندر)
   -------------------------------------------------------------------------- */
.hero__hud {
  position: absolute;
  inset-block-start: calc(var(--header-h) + 18px);
  /* ⚠️ ليش الحاوية.container معه؟
     كان inset-inline: var(--gutter) بس — يعني ٢٨px من حافة الشاشة،
     بينما نص الهيرو داخل max-width 1280 ومتوسيط. فشريط الكاميرا
     كان ملزوق بأقصى اليسار لحاله، بعيد عن الكلام اللي تحته.
     الحين بينحاذى مع .container زي ما هي بالضبط. */
  inset-inline: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  pointer-events: none;
}

.hero__rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}

.hero__rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: recBlink 1.6s steps(1, end) infinite;
}

.hero__spec b {
  color: var(--text);
  font-weight: 600;
}

.hero__spec--wide i {
  font-style: normal;
  opacity: 0.6;
}

.hero__hud .hero__tc {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   7) قسم الأعمال + الفلتر
   -------------------------------------------------------------------------- */
.work {
  background: var(--bg-t);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 40px;
  padding-bottom: 4px;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 19px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.015);
  transition: all 0.3s var(--ease);
}

.filter:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.filter__count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding-inline: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.filter.is-active .filter__count {
  background: rgba(0, 0, 0, 0.2);
}

/* الشبكة */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 26px;
}

.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   9) كرت الفيديو
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  display: block;
  width: 100%;
  text-align: start;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.85);
}

/* الصورة المصغّرة */
.card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--thumb, linear-gradient(135deg, #1c1c25, #0d0d12));
}

/* تدرّج بديل الصورة */
.card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--thumb, linear-gradient(135deg, #1c1c25, #0d0d12));
  transition: transform 0.7s var(--ease);
}

.card:hover .card__thumb::before {
  transform: scale(1.07);
}

/* صورة حقيقية موجودة */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.card:hover .card__img {
  transform: scale(1.07);
}

/* تعتيم فوق الصورة */
.card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 11, 0.88), rgba(8, 8, 11, 0.05) 62%);
  pointer-events: none;
}

/* زر التشغيل */
.card__play {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 244, 246, 0.94);
  color: #0b0b0f;
  transition: all var(--dur) var(--ease);
  z-index: 2;
}

.card__play svg {
  width: 17px;
  height: 17px;
  margin-inline-start: 2px;
}

.card:hover .card__play {
  background: var(--accent);
  transform: scale(1.09);
}

/* الشارة */
.card__badge {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  z-index: 2;
}

/* المدة */
.card__time {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  z-index: 2;
}

/* العنوان على الفيديو */
.card__overlay-title {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-end: 16px;
  inset-inline-start: 76px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--dur) var(--ease);
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card:hover .card__overlay-title {
  opacity: 1;
  transform: translateY(0);
}

/* أسفل الكرت */
.card__body {
  padding: 18px 20px 20px;
}

.card__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted-2);
}

.card__cat {
  color: var(--accent);
  font-weight: 600;
}

/* زر المزيد */
.more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}

/* --------------------------------------------------------------------------
   10) قسم نبذة
   -------------------------------------------------------------------------- */
.about {
  background: var(--bg-2-t);
  border-block: 1px solid var(--line);
}

.about__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items: start;
}

.about__text {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 40px;
  max-width: 60ch;
}

/* العدّادات */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  /* تدرّج بدل لون واحد — نفس تقنية العناوين */
  background-image: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 13.5px;
  color: var(--muted);
}

/* بطاقة المعدات */
.gear {
  position: sticky;
  top: calc(var(--header-h) + 30px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}

.gear__title {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 22px;
}

.gear__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gear__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
}

.gear__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gear__item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}

.gear__film {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.gear__film svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
}

/* --------------------------------------------------------------------------
   11) الخدمات
   -------------------------------------------------------------------------- */
.services {
  background: var(--bg-t);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
}

.svc {
  position: relative;
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}

.svc::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.5s var(--ease);
}

.svc:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  background: var(--surface-2);
}

.svc:hover::before {
  transform: scaleX(1);
}

.svc__n {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  display: block;
}

.svc__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  /* 20px/700 = نص كبير حسب WCAG، فيعدّي الحد 3:1 */
  background-image: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.svc__desc {
  color: var(--muted);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   12) قسم التواصل
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  background: var(--bg-2-t);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%);
  pointer-events: none;
}

.contact__inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.contact .sec-label {
  justify-content: center;
}

.contact .sec-label::before {
  display: none;
}

.contact__title {
  font-size: clamp(32px, 6vw, 60px);
  margin-bottom: 18px;
}

.contact__lede {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 40px;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 54px;
}

/* روابط التواصل */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: all var(--dur) var(--ease);
}

.social:hover {
  border-color: var(--accent-line);
  color: var(--accent);
  transform: translateY(-3px);
}

.social svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --------------------------------------------------------------------------
   13) الفوتر
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 34px;
  background: var(--bg-t);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: var(--muted-2);
}

.footer__brand {
  color: var(--text);
  font-weight: 600;
}

.footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-inline-start: auto;
}

.footer__link {
  color: var(--muted-2);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s var(--ease);
}

.footer__link:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   14) المودال (مشغّل الفيديو)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  /* minmax(0,1fr) مو auto: بدونها يتمدد سطر الشبكة على أكبر محتوى
     جوا المودال، يعني عرض شريط الكواليس كامل (مجموع المصغّرات)،
     والمودال بيطلع برّا الشاشة تحت 1100px وما بيطلع له scroll bar. */
  grid-template-columns: minmax(0, 1fr);
  padding: 24px;
  background: rgba(4, 4, 6, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  /* visibility تتبدل فوراً عند الفتح عشان زر الإغلاق يقبل التركيز */
  transition: opacity 0.3s var(--ease), visibility 0s;
}

.modal__box {
  position: relative;
  width: min(1100px, 100%);
  transform: scale(0.965);
  transition: transform 0.35s var(--ease);
}

.modal.is-open .modal__box {
  transform: scale(1);
}

.modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
}

.modal__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.modal__yt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  display: none;
}

/* رسالة لو الفيديو مش موجود */
.modal__err {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}

.modal__err.is-shown {
  display: flex;
}

.modal__err svg {
  width: 38px;
  height: 38px;
  color: var(--muted-2);
}

/* معلومات تحت الفيديو */
.modal__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  flex-wrap: wrap;
}

.modal__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.modal__cat {
  font-size: 13.5px;
  color: var(--accent);
  font-weight: 600;
}

/* ======================================================================
   زر الكواليس تحت الفيديو
   ====================================================================== */
.modal__bts {
  margin-top: 18px;
}

.modal__bts[hidden] {
  display: none;
}

/* الشريط العلوي: زر الكواليس + الأسهم */
.bts-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* على الجوال الضيق بتنزل الأسهم سطر ثاني بدل ما تضغط الزر */
  flex-wrap: wrap;
}

.bts-btn {
  /* أساس 260px: تحت ~412px بتنزل الأسهم سطر ثاني، بياخد الزر العرض كله
     ويضل ارتفاعه 77px بدل ما ينضغط ويصير 124px */
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 62%
  );
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
    background 0.25s var(--ease);
}

.bts-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    transparent 70%
  );
}

.bts-btn:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.bts-btn__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
  color: #fff;
}

.bts-btn__icon svg {
  width: 21px;
  height: 21px;
}

.bts-btn__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bts-btn__label {
  font-size: 15px;
  font-weight: 700;
}

.bts-btn__sub {
  font-size: 12.5px;
  color: var(--muted);
}

.bts-btn__play {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--accent);
}

.bts-btn__play svg {
  width: 13px;
  height: 13px;
  margin-inline-start: 2px;
}

/* وضع الكواليس: شريط رفيع فوق الفيديو يوضح إنك داخل كواليس */
.modal.is-bts .modal__frame {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 60px rgba(193, 18, 31, 0.28);
}

.modal.is-bts .bts-btn__icon {
  background: linear-gradient(140deg, #3a3a44, #1c1c22);
}

/* ----------------------------------------------------------------------
   أسهم التنقل + العدّاد
   ---------------------------------------------------------------------- */
.bts-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bts-nav[hidden] {
  display: none;
}

.bts-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

.bts-arrow svg {
  width: 17px;
  height: 17px;
}

/* بالعربي الترتيب بينقلب، فالسهم لازم يشير للاتجاه اللي بيسير فيه فعلاً.
   prev يصير على اليمين ويشير يمين، next يصير على اليسار ويشير يسار. */
[dir="rtl"] .bts-arrow svg {
  transform: scaleX(-1);
}

.bts-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.bts-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.bts-arrow:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.bts-count {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
   الشريط الأفري لمقاطع الكواليس
   ---------------------------------------------------------------------- */
.bts-strip {
  display: flex;
  /* بدون هاد بتمدد المصغّرات (flex:none) الأب كله لعرضها كل،
     والمودال بيطلع برّا الشاشة. معاه المصغّرات تنتج فراغ قابل للتمرير. */
  min-width: 0;
  gap: 10px;
  margin-top: 12px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.bts-strip[hidden] {
  display: none;
}

.bts-strip.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.bts-strip::-webkit-scrollbar {
  height: 5px;
}

.bts-strip::-webkit-scrollbar-track {
  background: transparent;
}

.bts-strip::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.bts-strip:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 8px;
}

.bts-item {
  position: relative;
  flex: none;
  width: 132px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #0d0d11;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.bts-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.bts-item:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.bts-item.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* تدرّج بديل وقت ما تكون الصورة مش موجودة */
.bts-item__ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, #1e1e26, #0c0c10);
}

.bts-item__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bts-item__n {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bts-item__play {
  position: absolute;
  inset-block-end: 5px;
  inset-inline-end: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.bts-item__play svg {
  width: 10px;
  height: 10px;
  margin-inline-start: 1px;
}

.bts-item:hover .bts-item__play,
.bts-item.is-active .bts-item__play {
  opacity: 1;
}

/* أزرار التنقل */
.modal__nav {
  display: flex;
  gap: 9px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--dur) var(--ease);
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

html[dir="rtl"] .icon-btn svg,
html[dir="rtl"] .modal__nav .prev svg {
  transform: scaleX(-1);
}

/* زر الإغلاق */
.modal__close {
  position: absolute;
  inset-block-start: -52px;
  inset-inline-end: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--text);
  transition: all var(--dur) var(--ease);
}

.modal__close:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.modal__close svg {
  width: 17px;
  height: 17px;
}

/* --------------------------------------------------------------------------
   15) زر الرجوع للأعلى
   -------------------------------------------------------------------------- */
.totop {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  z-index: 800;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
  box-shadow: 0 10px 26px -8px var(--accent-glow);
}

.totop.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}

.totop:hover {
  transform: translateY(-3px);
}

.totop svg {
  width: 18px;
  height: 18px;
}

html[dir="rtl"] .totop svg {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   16) أنيميشن الظهور عند التمرير
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* تأخير متدرّج لعناصر الشبكة */
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }
.reveal[data-delay="4"] { transition-delay: 0.28s; }
.reveal[data-delay="5"] { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   17) الريسبونسف
   -------------------------------------------------------------------------- */

/* تابلت */
@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .gear {
    position: static;
  }
}

/* موبايل */
@media (max-width: 860px) {
  :root {
    --section-y: 82px;
    --header-h: 68px;
  }

  .burger {
    display: grid;
  }

  /* قائمة الموبايل */
  .nav {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 20px var(--gutter) 30px;
    background: rgba(8, 8, 11, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
      visibility 0s linear 0.32s;
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0s;
  }

  .nav__link {
    padding: 15px 4px;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .nav__link.is-active::after {
    inset-inline-start: 0;
    width: 22px;
    inset-block-end: -1px;
  }

  .hero {
    min-height: 94svh;
  }
  .hero__scroll,
  .hero__sound {
    display: none;
  }
  .hero__inner {
    padding-block-end: 60px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 520px) {
  :root {
    --gutter: 20px;
  }
  .hero__actions .btn,
  .contact__actions .btn {
    width: 100%;
  }
  .modal {
    padding: 14px;
  }
  .modal__close {
    inset-block-start: -46px;
  }
  .modal__title {
    font-size: 17px;
  }
  .totop {
    inset-block-end: 18px;
    inset-inline-end: 18px;
  }
}

/* --------------------------------------------------------------------------
   18) الطباعة
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .hero__sound,
  .hero__scroll,
  .totop,
  .modal,
  .grain {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}