@charset "utf-8";
@property --fill{syntax:'<number>'; inherits:true; initial-value:0}
@property --p{syntax:'<number>'; inherits:true; initial-value:0}
/* ============================================================
   ثري ديركشنز — ديمو 4 · التصميم الفاتح
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --bg-2:#F6F2EA;
  --card:#FFFFFF;
  --ink:#14142E;
  --ink-2:#4A4A5E;
  --ink-3:#6E6E80;
  --line:rgba(20,20,46,.10);
  --line-2:rgba(20,20,46,.18);

  --gold:#CAA265;
  --gold-hi:#FAE6B2;
  --gold-lo:#A47E32;
  --gold-ink:#8A6630;
  --navy:#121232;
  --night:#0B0B18;

  --deco-gold:rgba(164,126,50,.30);      /* الفاتح يحتاج ضعف الكثافة ليُرى */
  --deco-ink:rgba(20,20,46,.09);
  --wm-opacity:.07;

  --bar-bg:rgba(255,255,255,.86);
  --logo-filter:brightness(0);
  --shadow:0 30px 60px -34px rgba(20,20,46,.35);

  --f-disp:'Zain', 'Readex Pro', sans-serif;
  --f-ui:'Readex Pro', system-ui, sans-serif;
  --f-lat:'Sora', 'Readex Pro', system-ui, sans-serif;

  --gut:clamp(1rem, 4.2vw, 4.5rem);
  --maxw:1440px;
  --bar-h:clamp(64px, 7.5vh, 84px);
  --r:22px;
  --edge:clamp(34px, 5vw, 86px);         /* عمق الحافة المائلة أسفل المحتوى فوق التذييل */

  /* معامل عناوين العرض: التصميم مضبوط على مقاسات ثمانية، وخط العناوين
     الحالي (Zain) أعرض منه فتطول السطور وتنكسر. الرقم يضبط منظومة
     العناوين كلها بنسبة واحدة فيحفظ تناسبها. 1 = مقاسات ديمو 4 حرفيًا. */
  --disp-k:.92;

  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}
/* الوضع الداكن — مبدئي: يعيد تعريف الرموز فقط */
:root[data-theme="dark"]{
  --bg:#0B0B14; --bg-2:#121220; --card:#15152A;
  --ink:#F3F0EA; --ink-2:#BDBBC8; --ink-3:#9290A0;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --gold-ink:#E3C48D; --gold-lo:#D6B06F;
  --deco-gold:rgba(202,162,101,.12); --deco-ink:rgba(255,255,255,.05); --wm-opacity:.07;
  --bar-bg:rgba(11,11,20,.82); --logo-filter:none;
  --shadow:0 30px 60px -34px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; background:var(--bg); color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:clip;
  font-family:var(--f-ui); font-weight:300; line-height:1.85;
  font-size:clamp(.98rem, .25vw + .92rem, 1.08rem); -webkit-font-smoothing:antialiased;
  transition:background-color .5s var(--e), color .5s var(--e);
}
img,video,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
::selection{background:var(--gold); color:#14142E}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
section[id]{scroll-margin-block-start:var(--bar-h)}
.lat{font-family:var(--f-lat); font-variant-numeric:tabular-nums}

/* ============================================================
   الطباعة
   ============================================================ */
h1,h2,h3{margin:0; font-family:var(--f-disp); font-weight:900; letter-spacing:0; line-height:1.3; color:var(--ink)}
/* 5.2vw بدل 5.4: خط Zain أعرض من ثمانية بنحو 3%، فعنوان بطاقة التواصل
   كان يحتاج 673px في حاوٍ عرضه 653 فينكسر سطرين. الحدّ الأدنى (2.5rem)
   لم يُمَسّ، فالجوال كما هو — التغيير على الشاشات الكبيرة وحدها. */
.h-xl{font-size:calc(clamp(2.5rem, 5.2vw, 5rem) * var(--disp-k)); line-height:1.22}
.h-lg{font-size:calc(clamp(2.05rem, 3.9vw, 3.5rem) * var(--disp-k)); line-height:1.25}
.gold{color:var(--gold-lo)}
.lead{margin:0; color:var(--ink-2); font-size:clamp(1.02rem, .4vw + .95rem, 1.2rem); line-height:1.9; max-width:54ch}
.rule{display:block; width:56px; height:3px; border-radius:3px; background:var(--gold); margin-block:clamp(1.1rem,2vw,1.5rem)}

/* قناع الكلمة أوسع من الحرف — وإلا قُصَّت النقاط والشدّة والمدّ */
.w{display:inline-block; vertical-align:top; overflow:clip; padding:.14em .12em .24em; margin:-.14em -.12em -.24em}
.wi{display:inline-block; will-change:transform}

/* ============================================================
   التخطيط + الخلفيات
   ============================================================ */
main{position:relative; z-index:1; background:var(--bg)}
/* نهاية المحتوى منحنية: شكل بلون الأرضية يتدلّى تحت main فوق التذييل — الطرفان عند حدّ القسم والوسط ينزل بلطف،
   فيبدو حدّ التذييل العلوي منحنيًا يرتفع من الوسط نحو الأطراف. جزء من main فيبقى فوق التذييل اللاصق */
.main-cap{position:absolute; left:0; top:100%; width:100%; height:var(--edge); fill:var(--bg); display:block; pointer-events:none; overflow:visible; transition:fill .5s var(--e)}
.main-cap .cap-line{fill:none; stroke:var(--gold); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-linecap:round; opacity:0; transition:opacity .5s var(--e)}
/* الداكن: أرضية المحتوى والتذييل متقاربتان فيضيع المنحنى — خط ذهبي شعري على الحافة، وتذييل أفتح بدرجة */
:root[data-theme="dark"] .main-cap .cap-line{opacity:.75}
:root[data-theme="dark"] .foot{background:#15152C}
/* التذييل لاصق تحت المحتوى: القسم الأخير ينقشع للأعلى فيظهر من تحته */
.sec{position:relative; padding:clamp(5.75rem, 14vh, 11rem) var(--gut)}
.sand{background:var(--bg-2)}
.wrap{max-width:var(--maxw); margin-inline:auto}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem 3rem; flex-wrap:wrap; margin-block-end:clamp(2.2rem, 4.5vw, 3.6rem)}
.sec-head .lead{max-width:44ch}

/* خلفيات من مفردات الشعار نفسه — لا زخرفة مستوردة:
   الخطوط المائلة = قَطعا حرف الشعار · الأقواس والحلقات = انحناءته · الشبكة = الكادر */
.deco-lines,.deco-arcs,.deco-grid,.deco-rings{isolation:isolate}
.deco-lines::before,.deco-arcs::before,.deco-grid::before,
.deco-rings .svc-zoom-sticky::before,.deco-rings .words-sticky::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.deco-lines::before{
  background:repeating-linear-gradient(-45deg, var(--deco-gold) 0 1px, transparent 1px 26px);
  -webkit-mask-image:radial-gradient(62% 72% at 100% 0%, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
          mask-image:radial-gradient(62% 72% at 100% 0%, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
}
.deco-arcs::before{
  background:repeating-radial-gradient(circle at 0% 100%, transparent 0 58px, var(--deco-gold) 58px 59px);
  -webkit-mask-image:radial-gradient(75% 85% at 0% 100%, #000 0%, rgba(0,0,0,.35) 50%, transparent 78%);
          mask-image:radial-gradient(75% 85% at 0% 100%, #000 0%, rgba(0,0,0,.35) 50%, transparent 78%);
}
.deco-grid::before{
  background-image:linear-gradient(var(--deco-ink) 1px, transparent 1px), linear-gradient(90deg, var(--deco-ink) 1px, transparent 1px);
  background-size:72px 72px; background-position:center top;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 38%, #000 0%, rgba(0,0,0,.3) 55%, transparent 80%);
          mask-image:radial-gradient(70% 62% at 50% 38%, #000 0%, rgba(0,0,0,.3) 55%, transparent 80%);
}
.deco-rings .svc-zoom-sticky::before,.deco-rings .words-sticky::before{
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 74px, var(--deco-gold) 74px 75px);
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.4) 55%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.4) 55%, transparent 100%);
}
.svc-zoom-sticky,.words-sticky{isolation:isolate}

/* ============================================================
   الأزرار
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  min-height:52px; padding:0 1.6rem; border-radius:999px; border:1px solid var(--line-2);
  font-family:var(--f-ui); font-weight:500; font-size:.95rem; line-height:1; color:var(--ink); white-space:nowrap;
  transition:background-color .45s var(--e), color .45s var(--e), border-color .45s var(--e);
}
.btn:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn .arr{display:inline-block; font-family:var(--f-lat); transition:transform .45s var(--e)}
.btn:hover .arr{transform:translateX(-4px)}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#14142E}
.btn-gold:hover{background:#DDBB82; border-color:#DDBB82; color:#14142E}
.btn-light{background:#fff; border-color:#fff; color:#14142E}
.btn-light:hover{background:var(--gold); border-color:var(--gold); color:#14142E}
.btn-line-light{border-color:rgba(255,255,255,.38); color:#fff}
.btn-line-light:hover{background:#fff; border-color:#fff; color:#14142E}
.magnetic{will-change:transform}
.btn .mag-in{display:inline-flex; align-items:center; gap:.65rem}

/* ============================================================
   1. الشريط العلوي — الشعار يمين · (ابدأ مشروعك · الوضع · القائمة) يسار
   يختفي عند النزول ويعود مع أول حركة للأعلى
   ============================================================ */
.bar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:95; height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-inline:var(--gut);
  color:#fff; border-block-end:1px solid transparent;
  transition:background-color .5s var(--e), color .5s var(--e), border-color .5s var(--e), transform .6s var(--e);
}
.bar.away{transform:translateY(-102%)}
.bar.scrolled,.bar.solid{background:var(--bar-bg); color:var(--ink); border-block-end-color:var(--line); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2)}
.menu-open .bar{background:transparent; color:#fff; border-block-end-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transform:none}
.bar-end{display:flex; align-items:center; gap:.35rem}
.bar-logo{display:flex; align-items:center; gap:.7rem}
.bar-logo img{width:clamp(34px, 3vw, 42px); height:auto; transition:transform .9s cubic-bezier(.34,1.56,.64,1), filter .6s var(--e)}
.bar-logo span{transition:letter-spacing .7s var(--e)}
/* الشعار عند المرور: يدور ربع لفّة ويعود بارتداد، يتوهّج بالذهب، وتتّسع حروف الاسم قليلًا */
.bar-logo:hover img,.bar-logo:focus-visible img,.fb-logo:hover img,.fb-logo:focus-visible img{transform:rotate(-14deg) scale(1.08); filter:drop-shadow(0 0 12px rgba(202,162,101,.65))}
.bar-logo:hover span{letter-spacing:.18em}
.fb-logo img{transition:transform .9s cubic-bezier(.34,1.56,.64,1), filter .6s var(--e)}
.bar-logo span{font-family:var(--f-lat); font-weight:600; font-size:.7rem; letter-spacing:.14em; line-height:1.35; white-space:nowrap}
.bar-logo span i{display:block; font-style:normal; font-weight:400; font-size:.54rem; letter-spacing:.12em; opacity:.6}

/* البرقر: خطّان غير متساويين ونقطة ذهبية — تتبادل الصفّ عند المرور، وتصير × عند الفتح */
.burger{display:grid; place-items:center; width:48px; height:48px; margin-inline-end:-.5rem}
.burger .lines{position:relative; display:block; width:30px; height:14px}
.burger .lines i{
  position:absolute; left:0; height:1.6px; border-radius:2px; background:currentColor;
  transition:transform .6s var(--e), width .6s var(--e), top .6s var(--e), opacity .35s var(--e);
}
.burger .lines i:nth-child(1){top:0; width:30px}
.burger .lines i:nth-child(2){top:12px; width:19px}
.burger .lines i:nth-child(3){top:11.3px; left:25px; width:3px; height:3px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(202,162,101,.8)}
.burger:hover .lines i:nth-child(1){width:19px}
.burger:hover .lines i:nth-child(2){width:30px}
.burger:hover .lines i:nth-child(3){transform:translateY(-12px)}
.burger[aria-expanded="true"] .lines i:nth-child(1){top:6px; width:26px; transform:rotate(45deg)}
.burger[aria-expanded="true"] .lines i:nth-child(2){top:6px; width:26px; transform:rotate(-45deg)}
.burger[aria-expanded="true"] .lines i:nth-child(3){opacity:0; transform:scale(0)}

.bar-cta{gap:.3em; min-height:44px; padding:0 1.25rem; margin-inline-end:.4rem; font-size:.88rem; background:var(--gold); border-color:var(--gold); color:#14142E}
.bar-cta:hover{background:#fff; border-color:#fff; color:#14142E}
.bar.scrolled .bar-cta:hover,.bar.solid .bar-cta:hover{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.menu-open .bar .bar-cta:hover{background:#fff; border-color:#fff; color:#14142E}
.theme-btn{width:44px; height:44px; display:grid; place-items:center; transition:color .4s var(--e)}
.theme-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; transition:transform .7s var(--e)}
.theme-btn:hover{color:var(--gold)}
.theme-btn:hover svg{transform:rotate(40deg)}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}

/* ============================================================
   2. القائمة — كما في ديمو 3 (داكنة ثابتة في الوضعين)
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--night); color:#fff; visibility:hidden;
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--e-io), visibility 0s .85s;
}
.menu.open{visibility:visible; clip-path:inset(0); transition:clip-path .85s var(--e-io), visibility 0s}
.menu-in{
  height:100%; max-width:var(--maxw); margin-inline:auto; padding:calc(var(--bar-h) + 4vh) var(--gut) 5vh;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); grid-template-rows:1fr auto; gap:1.6rem 6vw;
  align-items:center; overflow-y:auto; overscroll-behavior:contain;
}
/* خلفية القائمة: خطوط الشعار المائلة، وتوهّج ذهبي في الزاوية، وعلامة الشعار تستقرّ عند الفتح */
.menu-bg{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(55% 75% at 0% 100%, rgba(202,162,101,.16), transparent 62%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 30px);
}
.menu-mark{position:absolute; left:-7vw; bottom:-12vh; width:min(48vw, 640px); opacity:0; transform:rotate(-28deg) scale(.86); transition:transform 1.6s var(--e), opacity 1.2s var(--e)}
.menu.open .menu-mark{opacity:.07; transform:none; transition-delay:.25s}

/* الروابط: رقم ذهبي صغير + اسم كبير، وخط يُرسم تحت الصف عند المرور */
.menu-nav{align-self:center}
.menu-list{list-style:none; margin:0; padding:0; display:grid; border-block-start:1px solid rgba(255,255,255,.08)}
.menu-list li{position:relative; overflow:hidden; border-block-end:1px solid rgba(255,255,255,.08)}
.menu-list li::after{content:''; position:absolute; inset-inline:0; bottom:-1px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .7s var(--e)}
.menu-list li:hover::after{transform:scaleX(1)}
.ml{
  display:flex; align-items:center; gap:clamp(1rem, 2vw, 1.6rem); padding-block:clamp(.2rem, 1vh, .55rem);
  font-family:var(--f-disp); font-weight:900; font-size:calc(clamp(1.7rem, min(3.4vw, 5.6vh), 3.2rem) * var(--disp-k)); line-height:1.4; color:rgba(255,255,255,.9);
  transform:translateY(105%); transition:transform .9s var(--e), color .45s var(--e);
}
.menu.open .ml{transform:none; transition-delay:calc(.22s + var(--i,0) * .06s), 0s}
.ml-n{flex:none; min-width:2.2rem; font-family:var(--f-lat); font-weight:500; font-size:.78rem; color:var(--gold); opacity:.85}
.ml-t{display:inline-block; transition:transform .6s var(--e), color .45s var(--e)}
.ml:hover .ml-t,.ml:focus-visible .ml-t{color:var(--gold); transform:translateX(-12px)}
.ml[aria-current="page"] .ml-t{color:var(--gold)}

/* الجانب: المجالات · التواصل · الدعوة · الحسابات */
.menu-side{
  align-self:center; display:grid; gap:clamp(1.4rem, 3vh, 2rem); padding-inline-start:clamp(1.5rem, 4vw, 3.5rem);
  border-inline-start:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7);
  opacity:0; transform:translateY(22px); transition:opacity .8s var(--e) .4s, transform .9s var(--e) .4s;
}
.menu.open .menu-side{opacity:1; transform:none}
.menu-k{margin:0 0 .7rem; font-size:.8rem; font-weight:400; color:var(--gold)}
.ms-tags{display:flex; flex-wrap:wrap; gap:.45rem}
.ms-tags a{padding:.45rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); font-size:.9rem; color:rgba(255,255,255,.86); transition:border-color .4s var(--e), color .4s, background-color .4s}
.ms-tags a:hover{border-color:var(--gold); color:#fff; background:rgba(202,162,101,.1)}
.ms-big{display:block; width:fit-content; font-family:var(--f-lat); font-weight:500; font-size:clamp(1.25rem, 1.9vw, 1.65rem); color:#fff; transition:color .4s}
.ms-mail{display:block; width:fit-content; margin-block-start:.25rem; color:rgba(255,255,255,.75); overflow-wrap:anywhere; transition:color .4s}
.ms-big:hover,.ms-mail:hover{color:var(--gold-hi)}
.ms-addr{margin:.3rem 0 0; font-size:.9rem; color:rgba(255,255,255,.5)}
.ms-cta{justify-self:start}
.menu .social{flex-wrap:wrap; gap:.45rem}
.menu .social a{width:42px}
.menu .social svg{width:17px; height:17px}
.social{display:flex; gap:.6rem}
.social a{width:46px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; transition:border-color .4s, background-color .4s}
.social a:hover{border-color:var(--gold); background:rgba(202,162,101,.1)}
.social svg{width:18px; height:18px; fill:rgba(255,255,255,.85)}
.menu-legal{grid-column:1/-1; margin:0; font-size:.78rem; color:rgba(255,255,255,.4); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ============================================================
   3. الهيرو — نهايته قوس يرتفع في الوسط
   ============================================================ */
.hero{
  --curve:clamp(40px, 6.5vw, 110px);
  position:relative; height:calc(100svh + var(--curve)); min-height:700px; overflow:hidden; background:#0E0E1A; color:#fff; isolation:isolate;
}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img,.hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:46% 50%}   /* الجوال يقصّ الأطراف: نُبقي جدار الشعار داخل الكادر */
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(56% 44% at 50% 50%, rgba(18,18,50,.34), rgba(18,18,50,0) 75%),
    linear-gradient(180deg, rgba(18,18,50,.62) 0%, rgba(18,18,50,.24) 32%, rgba(18,18,50,.32) 62%, rgba(12,12,32,.9) 100%);   /* تظليل بكحلي الهوية لا بالأسود: يكمّل تدرّج الفيديو الكحلي/الذهبي */
}
/* لمسة ذهبية فوق الكحلي: تدفئ إضاءة المسرح في الفيديو دون أن تصفّر الكادر كله */
.hero-shade::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% 62%, rgba(250,230,178,.10), rgba(202,162,101,0) 70%),
    linear-gradient(180deg, rgba(202,162,101,0) 45%, rgba(202,162,101,.09) 100%);
}
.hero-curve{position:absolute; z-index:3; inset-inline:0; bottom:-1px; width:100%; height:var(--curve); fill:var(--bg); transform-origin:50% 100%; pointer-events:none; transition:fill .5s var(--e)}
.hero-in{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; text-align:center;
  padding:calc(var(--bar-h) + clamp(5rem, 17vh, 10.5rem)) var(--gut) calc(var(--curve) + clamp(5.5rem, 12vh, 7.5rem));
}
.hero-title{color:#fff; font-size:calc(clamp(2.8rem, 6.2vw, 6.4rem) * var(--disp-k)); line-height:1.08; display:grid; justify-items:center}
.ht-line{display:block; white-space:nowrap; will-change:transform}
.ht-a{position:relative; display:inline-block}
/* الشعار فوق «ى» كأنه تشكيل لها — بوحدة em فيتبع حجم العنوان في كل الشاشات.
   «ى» آخر حرف في الكلمة، فهي في طرفها الأيسر */
.ht-mark{position:absolute; left:-.04em; top:.02em; width:.44em; height:.44em; pointer-events:none; will-change:transform}
.ht-mark::before{
  content:''; position:absolute; inset:-55%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(202,162,101,.38), rgba(202,162,101,0) 72%);
}
.ht-mark-in{position:relative; display:block; width:100%; height:100%; perspective:600px}
.ht-mark img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.hero-sub{margin:clamp(1.1rem, 2.4vh, 1.6rem) auto 0; max-width:50ch; color:rgba(255,255,255,.86); font-size:clamp(1rem, .5vw + .9rem, 1.2rem); line-height:1.85}
.hero-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-block-start:clamp(1.3rem, 2.8vh, 1.9rem)}
.hero-clients{position:absolute; inset-inline:0; inset-block-end:calc(var(--curve) + clamp(.2rem, 1.2vh, .8rem)); display:grid; gap:.4rem}
.hc-label{padding-inline:var(--gut); margin:0; font-size:.86rem; color:rgba(255,255,255,.72)}
.hc-view{
  overflow:hidden; display:flex;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hc-track{display:flex; flex:none; align-items:center; width:max-content; animation:mq-l 42s linear infinite}
.hc-track img{height:clamp(58px, 6vw, 80px); width:auto; margin-right:clamp(2rem, 5vw, 4.5rem); opacity:.78; flex:none}
@keyframes mq-l{to{transform:translateX(-50%)}}
@keyframes mq-r{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.is-off .hc-track,.is-off .rtrack,.is-off .wall-track{animation-play-state:paused}

/* ============================================================
   4. من نحن — نص ومبادئ + جدار صور منجرف
   ============================================================ */
/* مسافة أوسع قليلًا: بعد الهيرو، وقبل الفاصل المؤدي إلى المجالات */
.about{overflow:hidden; padding-block:clamp(7.5rem, 18vh, 13.5rem) clamp(7rem, 17vh, 12.5rem)}
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem, 6vw, 6rem); align-items:center}
.about-text p{margin:0 0 1.1rem; color:var(--ink-2); max-width:56ch}
.pillars{list-style:none; margin:clamp(2rem, 4vw, 2.8rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1rem, 2.4vw, 2rem)}
.pillars li{position:relative; padding-block-start:1.05rem; border-block-start:1px solid var(--line-2)}
.pillars li::before{content:''; position:absolute; inset-inline-start:0; top:-1px; width:34px; height:2px; background:var(--gold)}
.pillars h3{font-size:clamp(1.2rem, 1.5vw, 1.4rem); font-weight:700; line-height:1.4; margin-block-end:.3rem}
.pillars p{margin:0; font-size:.9rem; line-height:1.75; color:var(--ink-2)}

.wall{position:relative; height:clamp(560px, 82vh, 780px); perspective:1600px; overflow:hidden}
/* تلاشي الأطراف بطبقتين لونيتين لا بقناع: القناع فوق أعمدة تتحرك يُعاد رسمه في كل إطار */
.wall::before,.wall::after{content:''; position:absolute; z-index:2; inset-inline:0; height:18%; pointer-events:none}
.wall::before{top:0; background:linear-gradient(180deg, var(--bg), rgba(255,255,255,0))}
.wall::after{bottom:0; background:linear-gradient(0deg, var(--bg), rgba(255,255,255,0))}
:root[data-theme="dark"] .wall::before{background:linear-gradient(180deg, var(--bg), rgba(11,11,20,0))}
:root[data-theme="dark"] .wall::after{background:linear-gradient(0deg, var(--bg), rgba(11,11,20,0))}
.wall-stage{
  position:absolute; inset:-12% -6%; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(.7rem, 1.2vw, 1rem);
  transform:rotateX(12deg) rotateZ(-7deg) scale(1.02); transform-origin:50% 50%; will-change:transform;
}
.wall-col{position:relative; will-change:transform}
.wall-col:nth-child(2){margin-block-start:-18%}
.wall-track{display:grid; gap:clamp(.7rem, 1.2vw, 1rem); animation:wall-up 46s linear infinite}
.wall-col:nth-child(2) .wall-track{animation-name:wall-down; animation-duration:52s}
.wall-col:nth-child(3) .wall-track{animation-duration:40s}
@keyframes wall-up{to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)} to{transform:translateY(0)}}
.wall-card{margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:#1B1B2A; box-shadow:0 24px 40px -28px rgba(20,20,46,.55)}
.wall-card:nth-child(3n+2){aspect-ratio:4/3}
.wall-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.wall:hover .wall-track{animation-play-state:paused}
.wall-card:hover img{transform:scale(1.06)}

/* ============================================================
   5. الفاصل المائل — الخلفية لون القسم السابق، والمنحنى لون التالي
   ============================================================ */
.slant{position:relative; z-index:1; height:clamp(56px, 7vw, 130px); margin-block:-1px; pointer-events:none; background:var(--from); overflow-x:clip}
.slant .s-base,.slant .s-draw{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.slant .s-draw svg{display:block; width:100%; height:100%; overflow:visible}
.slant .s-fill{fill:var(--to)}
.slant .s-line{fill:none; stroke:url(#goldline); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linecap:round}
.js .slant .s-draw{clip-path:inset(-24px 0 -24px 100%)}
.slant .s-dot{
  position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; will-change:transform;
  background:var(--gold); opacity:0; box-shadow:0 0 10px 2px rgba(202,162,101,.7), 0 0 30px 6px rgba(202,162,101,.3);
}
.s-white-sand{--from:var(--bg); --to:var(--bg-2)}
.s-sand-white{--from:var(--bg-2); --to:var(--bg)}

/* ============================================================
   6. المجالات
   ============================================================ */
.fields-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(.9rem, 1.6vw, 1.4rem)}
.field{position:relative; display:block; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; color:#fff; background:#1B1B2A; isolation:isolate; box-shadow:var(--shadow)}
.field img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--e)}
.field::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,12,26,.94) 0%, rgba(12,12,26,.55) 45%, rgba(12,12,26,.08) 75%)}
.field:hover img{transform:scale(1.06)}
.field-in{position:absolute; inset-inline:0; inset-block-end:0; padding:clamp(1.2rem, 2.2vw, 1.9rem); display:grid; gap:.6rem}
.field h3{color:#fff; font-size:clamp(1.7rem, 2.5vw, 2.4rem); line-height:1.25}
.field p{margin:0; font-size:.93rem; line-height:1.8; color:rgba(255,255,255,.8)}
.field ul{list-style:none; margin:.35rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.field li{font-size:.76rem; line-height:1.5; padding:.3rem .75rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.go-ic{display:grid; place-items:center; border-radius:50%; background:#fff; color:#14142E}
.go-ic svg,.field .go svg,.wc-go svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.field .go{
  position:absolute; inset-block-start:clamp(1rem, 1.8vw, 1.4rem); inset-inline-end:clamp(1rem, 1.8vw, 1.4rem);
  width:46px; height:46px; border-radius:50%; background:#fff; color:#14142E; display:grid; place-items:center;
  transform:scale(.8) rotate(45deg); opacity:0; transition:transform .6s var(--e), opacity .4s;
}
.field:hover .go,.field:focus-visible .go{transform:none; opacity:1}
.field .bar-line{position:absolute; inset-inline:0; inset-block-end:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .9s var(--e)}
.field:hover .bar-line{transform:scaleX(1)}

/* ============================================================
   7. بطاقة العمل — الصورة ثم المعلومات تحتها
   ============================================================ */
.wcard{display:block; position:relative}
.wc-media{position:relative; display:block; height:var(--mh, clamp(250px, 28vw, 440px)); border-radius:var(--r); overflow:hidden; background:#1B1B2A; isolation:isolate; transform:translateZ(0)}
.wc-media img,.wc-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.wc-media img{transition:transform 1.3s var(--e)}
.wc-media video{opacity:0; transition:opacity .6s var(--e)}
.wcard.playing .wc-media video{opacity:1}
.wcard:hover .wc-media img{transform:scale(1.05)}
.wc-tag{
  position:absolute; z-index:2; inset-block-start:.9rem; inset-inline-start:.9rem; display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .8rem; border-radius:999px; font-size:.76rem; line-height:1.4; color:#fff;
  background:rgba(12,12,26,.5); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.wc-tag svg{width:9px; height:9px; fill:currentColor}
.wc-go{position:absolute; z-index:2; inset-block-end:1rem; inset-inline-end:1rem; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#14142E; transform:scale(.6); opacity:0; transition:transform .6s var(--e), opacity .4s}
.wcard:hover .wc-go,.wcard:focus-visible .wc-go{transform:none; opacity:1}
.wc-body{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding-block:1rem .2rem}
.wc-title{font-family:var(--f-disp); font-weight:700; font-size:calc(clamp(1.2rem, 1.6vw, 1.55rem) * var(--disp-k)); line-height:1.4; transition:color .4s var(--e)}
.wcard:hover .wc-title{color:var(--gold-lo)}
.wc-client{display:block; font-size:.88rem; color:var(--ink-3); margin-block-start:.15rem}
.wc-meta{flex:none; display:grid; justify-items:end; gap:.25rem; padding-block-start:.3rem; font-size:.82rem; color:var(--ink-3); text-align:end}
.wc-meta .lat{font-size:.78rem; font-weight:500; color:var(--ink-2)}
[data-video]{cursor:none}

.works-grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(2rem, 4vw, 3.2rem) clamp(.9rem, 1.8vw, 1.6rem)}
.works-grid .wcard:nth-child(4n+1),.works-grid .wcard:nth-child(4n+4){grid-column:span 7}
.works-grid .wcard:nth-child(4n+2),.works-grid .wcard:nth-child(4n+3){grid-column:span 5}
.works-foot{display:flex; justify-content:center; margin-block-start:clamp(2.4rem, 5vw, 3.6rem)}

.pcur{
  position:fixed; top:0; left:0; z-index:150; pointer-events:none; width:84px; height:84px; margin:-42px 0 0 -42px;
  display:grid; place-items:center; border-radius:50%; background:var(--gold); color:#14142E;
  font-size:.82rem; font-weight:500; transform:scale(0); transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 14px 34px -8px rgba(164,126,50,.55);
}
.pcur.on{transform:scale(1)}
.pcur span{display:flex; align-items:center; gap:.35rem}
.pcur svg{width:11px; height:11px; fill:currentColor}

/* ============================================================
   8. مشاهد من أعمالنا — شريطان متعاكسان
   ============================================================ */
.reel{padding-inline:0; overflow:hidden}
.reel .wrap{padding-inline:var(--gut)}
.rrows{display:grid; gap:clamp(.8rem, 1.4vw, 1.2rem)}
.rrow{overflow:hidden; display:flex}
.rtrack{display:flex; flex:none; width:max-content; gap:clamp(.8rem, 1.4vw, 1.2rem); padding-inline-end:clamp(.8rem, 1.4vw, 1.2rem); animation:mq-l 70s linear infinite}
.rrow.rev .rtrack{animation-name:mq-r; animation-duration:62s}
.rrow:hover .rtrack,.rrow:focus-within .rtrack{animation-play-state:paused}
.ritem{position:relative; display:block; flex:none; border-radius:18px; overflow:hidden; background:#1B1B2A; isolation:isolate}
.rrow:not(.rev) .ritem{width:clamp(280px, 30vw, 470px); aspect-ratio:16/9}
.rrow.rev .ritem{width:clamp(170px, 16vw, 250px); aspect-ratio:4/5}
.ritem img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.ritem::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,12,26,.8), transparent 55%); opacity:0; transition:opacity .5s var(--e)}
.ritem:hover img{transform:scale(1.06)}
.ritem:hover::after,.ritem:focus-visible::after{opacity:1}
.ritem figcaption{position:absolute; z-index:2; inset-inline:1rem; inset-block-end:.8rem; color:#fff; font-size:.88rem; line-height:1.5; opacity:0; transform:translateY(8px); transition:opacity .5s var(--e), transform .5s var(--e)}
.ritem:hover figcaption,.ritem:focus-visible figcaption{opacity:1; transform:none}
.ritem .rplay{position:absolute; z-index:2; inset-block-start:.8rem; inset-inline-start:.8rem; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#14142E}
.ritem .rplay svg{width:11px; height:11px; fill:currentColor; margin-inline-start:2px}

/* ============================================================
   9. خدماتنا — عنوان يكبر مع التمرير، ثم لوحة بتبويبات
   ============================================================ */
.svc-zoom{position:relative; height:170vh; overflow:clip}
.svc-zoom-sticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; overflow:hidden}
.svc-zoom-glow{position:absolute; width:min(90vw, 1100px); aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(202,162,101,.20), rgba(202,162,101,0) 70%); transform:scale(.7); will-change:transform,opacity}
.svc-zoom-in{position:relative; text-align:center; will-change:transform, opacity; padding-inline:var(--gut)}
.svc-zoom h2{font-size:clamp(3rem, 9.4vw, 9rem); line-height:1.12; display:grid}

.services{padding-block-start:0}
.tabs{display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; margin-block-end:clamp(1.8rem, 3.5vw, 2.8rem); padding-block:.2rem}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none; display:inline-flex; align-items:center; gap:.6rem; min-height:48px; padding:0 1.25rem; border-radius:999px; border:1px solid var(--line-2); font-size:.95rem; font-weight:400; color:var(--ink-2); transition:background-color .4s var(--e), color .4s, border-color .4s}
.tab b{font-family:var(--f-lat); font-weight:500; font-size:.72rem; color:var(--ink-3); transition:color .4s}
.tab:hover{border-color:var(--ink); color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.tab[aria-selected="true"] b{color:var(--gold)}
.panel{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem, 4.5vw, 4.5rem); align-items:start}
.panel + .panel{margin-block-start:4rem}
.js .panel + .panel{margin-block-start:0}
.panel[hidden]{display:none}
.panel-visual{position:sticky; top:calc(var(--bar-h) + 1.5rem); border-radius:var(--r); overflow:hidden; aspect-ratio:4/4.4; background:#1B1B2A; color:#fff; isolation:isolate}
.panel-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.panel-visual::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,12,26,.9), rgba(12,12,26,.1) 62%)}
.pv-in{position:absolute; inset-inline:0; inset-block-end:0; padding:clamp(1.3rem, 2.4vw, 2rem); display:grid; gap:.6rem}
.pv-in h3{color:#fff; font-size:calc(clamp(1.8rem, 2.8vw, 2.6rem) * var(--disp-k))}
.pv-in p{margin:0; color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.85}
.svc-list{list-style:none; margin:0; padding:0; border-block-start:1px solid var(--line)}
.svc{position:relative; display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; padding:clamp(1.1rem, 2vw, 1.5rem) .2rem; border-block-end:1px solid var(--line); transition:padding .55s var(--e)}
.svc::before{content:''; position:absolute; inset-inline-start:0; inset-block-end:-1px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .7s var(--e)}
.svc:hover{padding-inline-start:.9rem}
.svc:hover::before{transform:scaleX(1)}
.svc .n{font-family:var(--f-lat); font-weight:500; font-size:.8rem; color:var(--gold-ink); padding-block-start:.55rem}
.svc h4{margin:0; font-family:var(--f-disp); font-weight:700; font-size:calc(clamp(1.25rem, 1.7vw, 1.6rem) * var(--disp-k)); line-height:1.45; color:var(--ink)}
.svc p{margin:.2rem 0 0; font-size:.94rem; color:var(--ink-2); max-width:52ch}

/* ============================================================
   10. مسار العمل
   ============================================================ */
.steps{list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(1rem, 2vw, 2rem); --p:0}
.steps::before,.steps::after{content:''; position:absolute; inset-inline:0; top:calc(clamp(3.4rem, 5.4vw, 5rem) / 2); height:2px; border-radius:2px}
.steps::before{background:var(--line-2)}
.steps::after{background:linear-gradient(to left, var(--gold), var(--gold-lo)); transform:scaleX(var(--p)); transform-origin:right}
.step{position:relative; display:grid; align-content:start; gap:.4rem}
.step-num{position:relative; width:fit-content; background:var(--bg-2); padding-inline-end:.7rem; margin-block-end:.8rem}
.step-n{
  position:relative; z-index:1; display:block; width:fit-content;
  font-family:var(--f-lat); font-weight:600; font-size:clamp(3.4rem, 5.4vw, 5rem); line-height:1;
  -webkit-text-stroke:1.5px var(--gold-lo); color:transparent;
  background-image:linear-gradient(to top, var(--gold) 0%, var(--gold) calc(var(--fill) * 100%), transparent calc(var(--fill) * 100%));
  -webkit-background-clip:text; background-clip:text;
}
.step h3{font-size:calc(clamp(1.35rem, 1.9vw, 1.75rem) * var(--disp-k)); font-weight:700}
.step p{margin:0; font-size:.94rem; color:var(--ink-2)}

/* ============================================================
   11. نُصغي · نصنع · نُبهر
   ============================================================ */
.words{position:relative; height:180vh; overflow:clip; background:var(--bg-2)}
.words-sticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; align-content:center; gap:clamp(1.2rem, 3vh, 2rem); padding-inline:var(--gut)}
.words-row{display:flex; align-items:center; justify-content:center; gap:clamp(.8rem, 3vw, 3rem); flex-wrap:nowrap}
.wd{font-family:var(--f-disp); font-weight:900; font-size:calc(clamp(3rem, 8.6vw, 8.8rem) * var(--disp-k)); line-height:1.15; color:var(--ink); will-change:transform, opacity; white-space:nowrap}
.wd.last{color:var(--gold-lo)}
.wd-dot{width:clamp(8px, 1vw, 14px); aspect-ratio:1; border-radius:50%; background:var(--gold); flex:none; will-change:transform}
.words-cap{margin:0; text-align:center; color:var(--ink-2); font-size:clamp(1rem, .5vw + .9rem, 1.2rem)}

/* ============================================================
   12. جهات وثقت بنا — الشعارات تتبدّل موجةً
   ============================================================ */
.trust{overflow:hidden}
.trust-mark{position:absolute; z-index:-1; width:min(52vw, 720px); inset-inline-end:-8vw; top:50%; margin-top:calc(min(52vw, 720px) / -2); opacity:var(--wm-opacity); will-change:transform; pointer-events:none}
/* الوضع الفاتح: نسخة كحلية مرسومة مسبقًا بدل filter — الدوران مع التمرير يبقى تحويلًا مركّبًا بلا إعادة معالجة في كل إطار */
:root:not([data-theme="dark"]) .trust-mark{content:url(../brand/mark-dark.webp)}
.trust-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem, 6vw, 6rem); align-items:center}
.logos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); border-block-start:1px solid var(--line); border-inline-start:1px solid var(--line)}
.logos li{aspect-ratio:1.25; display:grid; place-items:center; overflow:hidden; border-block-end:1px solid var(--line); border-inline-end:1px solid var(--line); background:color-mix(in srgb, var(--bg) 72%, transparent); transition:background-color .5s var(--e)}
.logos li:hover{background:var(--bg-2)}
.logos img{width:min(72%, 170px); height:auto; filter:var(--logo-filter); opacity:.66; transition:opacity .45s var(--e), transform .6s var(--e)}
.logos li:hover img{opacity:1}
.logos img.out{opacity:0; transform:translateY(-18px) scale(.94)}
.logos img.pre{opacity:0; transform:translateY(18px) scale(.94); transition:none}

/* ============================================================
   13. تواصل
   ============================================================ */
.contact{padding-block-start:clamp(2rem, 5vh, 4rem)}
.cbox{
  position:relative; overflow:hidden; isolation:isolate; border-radius:clamp(22px, 3vw, 36px); background:var(--navy); color:#fff;
  padding:clamp(2.2rem, 6vw, 5.5rem) clamp(1.4rem, 5vw, 5rem);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem, 5vw, 5rem); align-items:end;
}
.cbox::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-linear-gradient(-45deg, rgba(202,162,101,.07) 0 1px, transparent 1px 30px), radial-gradient(70% 90% at 0% 100%, rgba(202,162,101,.18), transparent 60%)}
.cbox h2{color:#fff}
.cbox h2 .gold{color:var(--gold)}
.cbox .lead{color:rgba(255,255,255,.76); margin-block-start:1rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-block-start:clamp(1.6rem, 3vw, 2.2rem)}
.cinfo{display:grid}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:1rem; border-block-end:1px solid rgba(255,255,255,.14); transition:border-color .45s var(--e)}
.row:first-child{border-block-start:1px solid rgba(255,255,255,.14)}
.row span{font-size:.86rem; color:rgba(255,255,255,.56)}
.row b{font-weight:400; font-size:.98rem; text-align:end; overflow-wrap:anywhere}
a.row:hover{border-block-end-color:var(--gold)}
a.row:hover b{color:var(--gold-hi)}

/* ============================================================
   14. التذييل
   ============================================================ */
.foot{
  position:sticky; bottom:0; z-index:0; overflow:hidden; isolation:isolate; background:var(--night); color:rgba(255,255,255,.7);
  padding:calc(clamp(3.5rem, 8vw, 6rem) + var(--edge)) var(--gut) clamp(1.2rem, 2.4vw, 1.8rem);
}
.foot::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(202,162,101,.16), transparent 62%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 30px);
}
.foot-in{max-width:var(--maxw); margin-inline:auto}
/* صف واحد: الشعار · أربعة روابط · أيقونات التواصل */
.foot-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.4rem 2.4rem; padding-block-end:clamp(1.6rem, 3.4vw, 2.4rem)}
.fb-logo{display:inline-flex; align-items:center; gap:.85rem; color:#fff}
.fb-logo img{width:48px; height:auto}
.fb-logo span{font-family:var(--f-disp); font-weight:900; font-size:1.5rem; line-height:1.2}
.fb-logo span i{display:block; font-family:var(--f-lat); font-style:normal; font-weight:500; font-size:.54rem; letter-spacing:.18em; color:var(--gold); margin-top:.25rem}
.foot-nav{display:flex; flex-wrap:wrap; gap:.4rem 1.8rem}
.foot-nav a{position:relative; font-size:.95rem; color:rgba(255,255,255,.8); transition:color .35s var(--e)}
.foot-nav a::after{content:''; position:absolute; inset-inline:0; bottom:-3px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e)}
.foot-nav a:hover{color:#fff}
.foot-nav a:hover::after{transform:scaleX(1)}
.foot-social{flex-wrap:wrap; gap:.5rem}
.foot-social a{width:42px}
.foot-social svg{width:17px; height:17px}
.foot-social a:hover svg{fill:var(--gold-hi)}
.foot-word{
  margin:0; padding-block:clamp(1rem, 2.4vw, 1.6rem) clamp(.5rem, 1.2vw, .9rem); border-block-start:1px solid rgba(255,255,255,.1);
  font-family:var(--f-lat); font-weight:600; font-size:clamp(2.2rem, 7.4vw, 7.6rem); line-height:1; letter-spacing:-.02em;
  text-align:center; white-space:nowrap; user-select:none;
  color:transparent; -webkit-text-stroke:1px rgba(202,162,101,.45);
  background-image:linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) calc(var(--fill) * 100%), transparent calc(var(--fill) * 100%));
  -webkit-background-clip:text; background-clip:text;
}
.foot-vision{display:flex; align-items:center; justify-content:center; gap:clamp(1rem, 3vw, 2.4rem); padding-block:clamp(1.1rem, 2.4vw, 1.7rem); border-block-end:1px solid rgba(255,255,255,.1)}
.foot-vision i{flex:1; max-width:240px; height:1px; background:linear-gradient(to left, transparent, rgba(202,162,101,.6))}
.foot-vision i:last-child{background:linear-gradient(to right, transparent, rgba(202,162,101,.6))}
.foot-vision img{height:clamp(54px, 5.6vw, 76px); width:auto; opacity:.9; transition:opacity .4s var(--e)}
.foot-vision:hover img{opacity:1}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-block-start:1.2rem; font-size:.84rem; color:rgba(255,255,255,.5)}   /* الجملة يمينًا، والشعار و© يسارًا */
.credit-text{color:rgba(255,255,255,.6)}
.credit-text b{font-weight:500; color:rgba(255,255,255,.85)}
.credit{display:inline-flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.6); transition:color .4s}
.credit b{font-weight:500; color:rgba(255,255,255,.8)}
.credit img{height:22px; width:auto; opacity:.75; transition:opacity .4s}
.credit:hover b{color:var(--gold-hi)}
.credit:hover img{opacity:1}

/* ============================================================
   15. الزرّان العائمان
   ============================================================ */
.dock{position:fixed; z-index:94; left:max(16px, env(safe-area-inset-left)); bottom:calc(18px + env(safe-area-inset-bottom)); display:grid; gap:12px; opacity:0; transform:translateY(24px); pointer-events:none; transition:opacity .6s var(--e), transform .8s var(--e)}
.dock.on{opacity:1; transform:none; pointer-events:auto}
.menu-open .dock,.modal-lock .dock{opacity:0; pointer-events:none}
.beacon{position:relative; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; transition:transform .5s var(--e)}
.beacon:hover{transform:translateY(-3px)}
.beacon svg{width:22px; height:22px}
/* ثابتان في الوضعين: كحلي زجاجي بحلقة ذهبية شعرية، وذهبي مصمت — كما يظهران في الداكن */
.b-ig{background:radial-gradient(120% 120% at 30% 20%, #2A2A4A 0%, #121232 62%); border:1px solid rgba(202,162,101,.45); box-shadow:0 16px 32px -14px rgba(18,18,50,.7), inset 0 1px 0 rgba(255,255,255,.12)}
.b-ig svg{fill:#fff}
.b-ig:hover{border-color:var(--gold)}
.b-wa{background:var(--gold); box-shadow:0 14px 30px -12px rgba(164,126,50,.6)}
.b-wa svg{fill:#14142E}
.b-wa::before{content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--gold); animation:ping 2.8s var(--e) infinite; pointer-events:none}
@keyframes ping{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.9); opacity:0}}

/* ============================================================
   16. نافذة الفيديو
   ============================================================ */
.modal{position:fixed; inset:0; z-index:180; display:grid; place-items:center; align-content:center; gap:1rem; padding-inline:var(--gut); background:rgba(10,10,22,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; opacity:0; visibility:hidden; transition:opacity .45s var(--e), visibility 0s .45s}
.modal.open{opacity:1; visibility:visible; transition:opacity .45s var(--e), visibility 0s}
.modal-stage{width:min(1180px, 100%, calc(76svh * 16 / 9)); aspect-ratio:16/9; position:relative; background:#000; border-radius:14px; overflow:hidden; transform:scale(.94); transition:transform .55s var(--e)}
.modal.open .modal-stage{transform:none}
.modal-stage iframe,.modal-stage video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain}
.modal-cap{width:min(1180px, 100%, calc(76svh * 16 / 9)); display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.modal-cap b{font-family:var(--f-disp); font-weight:700; font-size:1.3rem}
.modal-cap a{font-size:.9rem; color:var(--gold-hi)}
.modal-x{position:absolute; inset-block-start:clamp(1rem, 3vh, 2rem); inset-inline-start:var(--gut); width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.24); display:grid; place-items:center; transition:border-color .4s, background-color .4s}
.modal-x:hover{border-color:var(--gold); background:rgba(202,162,101,.12)}
.modal-x svg{width:16px; height:16px; stroke:#fff; stroke-width:1.5}
.modal-lock{overflow:hidden}

/* ============================================================
   17. صفحة الأعمال
   ============================================================ */
.page-head{background:var(--bg-2); padding:calc(var(--bar-h) + clamp(3rem, 9vh, 6rem)) var(--gut) clamp(2.6rem, 6vh, 4rem)}
/* رأس صفحة الأعمال: قصير، والخلفية حيّة — بانوراما تقترب ببطء، وخطوط الشعار المائلة تنساب، ولمعة ضوء تعبر */
.page-head.ph-dark{
  position:relative; overflow:hidden; isolation:isolate; background:#0E0E1A; color:#fff;
  min-height:clamp(440px, 60vh, 580px); display:flex; align-items:flex-end;
  padding:calc(var(--bar-h) + 3rem) var(--gut) clamp(2.4rem, 6vh, 3.6rem);
}
.page-head.ph-dark > .wrap{width:100%}
.ph-media{position:absolute; inset:0; z-index:-4}
.ph-media img{width:100%; height:100%; object-fit:cover; animation:ph-zoom 26s ease-in-out infinite alternate}
@keyframes ph-zoom{from{transform:scale(1.02)} to{transform:scale(1.16) translate3d(-2.5%, -1.5%, 0)}}
.ph-dark::before{content:''; position:absolute; inset:0; z-index:-3; background:linear-gradient(180deg, rgba(12,12,26,.74) 0%, rgba(12,12,26,.42) 40%, rgba(12,12,26,.92) 100%), linear-gradient(to left, rgba(12,12,26,.55), transparent 65%)}
.ph-lines{
  position:absolute; inset:-10% -10% -10% -20%; z-index:-2;
  background:repeating-linear-gradient(-45deg, rgba(202,162,101,.16) 0 1px, transparent 1px 34px);
  animation:ph-drift 16s linear infinite;
  -webkit-mask-image:radial-gradient(70% 90% at 0% 0%, #000, transparent 72%);
          mask-image:radial-gradient(70% 90% at 0% 0%, #000, transparent 72%);
}
@keyframes ph-drift{to{transform:translateX(48.08px)}}          /* دورة واحدة بالضبط: 34 ÷ جا 45° */
.ph-sweep{position:absolute; inset:-20% -50%; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(250,230,178,.09) 50%, transparent 58%); animation:ph-sweep 9s var(--e) 1.2s infinite; will-change:transform}
@keyframes ph-sweep{0%{transform:translateX(60%)} 60%,100%{transform:translateX(-60%)}}
.ph-dark h1{color:#fff}
.ph-dark .crumb{color:rgba(255,255,255,.7)}
.ph-dark .crumb a:hover{color:var(--gold-hi)}
.ph-dark .lead{color:rgba(255,255,255,.82)}
.ph-dark .ph-stats{border-block-start-color:rgba(255,255,255,.16)}
.ph-dark .stat b{color:#fff}
.ph-dark .stat span{color:rgba(255,255,255,.62)}

/* صور الخدمات: تكبير وتصغير بطيء متواصل — لكل مجال إيقاعه ونقطة ارتكازه */
.panel-visual img{animation:kb 14s ease-in-out infinite alternate; will-change:transform}
.panel:nth-child(2) .panel-visual img{animation-duration:17s; transform-origin:25% 35%}
.panel:nth-child(3) .panel-visual img{animation-duration:15s; transform-origin:75% 60%; animation-direction:alternate-reverse}
@keyframes kb{from{transform:scale(1)} to{transform:scale(1.15)}}
.crumb{display:flex; gap:.5rem; margin:0 0 1rem; font-size:.88rem; color:var(--ink-3)}
.crumb a:hover{color:var(--gold-lo)}
.page-head .lead{margin-block-start:1rem}
.ph-stats{display:flex; flex-wrap:wrap; gap:clamp(1.6rem, 5vw, 4rem); margin-block-start:clamp(1.8rem, 4vw, 2.6rem); padding-block-start:clamp(1.4rem, 3vw, 2rem); border-block-start:1px solid var(--line)}
.stat b{display:block; font-family:var(--f-lat); font-weight:600; font-size:clamp(1.9rem, 3vw, 2.6rem); line-height:1.1; color:var(--ink)}
.stat b sup{font-size:.5em; color:var(--gold-lo); vertical-align:top; margin-inline-start:.1em}
.stat span{font-size:.9rem; color:var(--ink-3)}
.works-list{padding-block-start:clamp(2rem, 4vw, 3rem)}
.filters{position:relative; display:flex; flex-wrap:wrap; gap:.5rem; margin-block-end:.9rem}
.filters button{min-height:46px; padding:0 1.2rem; border-radius:999px; border:1px solid var(--line-2); font-size:.92rem; color:var(--ink-2); transition:background-color .4s var(--e), color .4s, border-color .4s}
.filters button:hover{border-color:var(--ink); color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.count{margin:0 0 clamp(1.4rem, 3vw, 2rem); font-size:.9rem; color:var(--ink-3)}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:clamp(2rem, 3.5vw, 2.8rem) clamp(.9rem, 1.6vw, 1.4rem)}
.gallery .wcard{--mh:clamp(230px, 22vw, 320px)}
.gallery .wcard.is-out,.gallery .wcard[hidden]{display:none}

/* ============================================================
   18. تفاصيل العمل
   ============================================================ */
.d-cover{position:relative; min-height:min(88vh, 860px); display:flex; align-items:flex-end; overflow:hidden; background:#0E0E1A; color:#fff; isolation:isolate; padding:calc(var(--bar-h) + 3rem) var(--gut) clamp(5rem, 13vh, 8rem)}
.dc-media{position:absolute; inset:-6% 0 0; z-index:-2; will-change:transform}
.dc-media img{width:100%; height:100%; object-fit:cover}
.d-cover::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(12,12,26,.6) 0%, rgba(12,12,26,.2) 34%, rgba(12,12,26,.85) 100%)}
.d-cover .in{width:100%; max-width:var(--maxw); margin-inline:auto}
.d-cover .crumb{color:rgba(255,255,255,.7)}
.d-cover .crumb a:hover{color:var(--gold-hi)}
.d-cover h1{color:#fff; max-width:18ch}
.d-cover .lead{color:rgba(255,255,255,.84); margin-block-start:1rem}
.d-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-block-start:clamp(1.4rem, 3vw, 2.2rem)}
.d-facts{position:relative; z-index:2; padding-inline:var(--gut); margin-block-start:clamp(-3.2rem, -6vh, -2.4rem)}
.facts{margin:0 auto; max-width:var(--maxw); display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); border-radius:var(--r); overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow)}
.facts div{padding:clamp(1.1rem, 2vw, 1.6rem); border-inline-start:1px solid var(--line); display:grid; gap:.3rem; align-content:start}
.facts div:first-child{border-inline-start:0}
.facts dt{font-size:.84rem; color:var(--ink-3)}
.facts dd{margin:0; font-family:var(--f-disp); font-weight:700; font-size:calc(clamp(1.05rem, 1.4vw, 1.25rem) * var(--disp-k)); line-height:1.5}
.d-story .grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(2rem, 6vw, 6rem)}
.d-brief{margin:0; font-size:clamp(1.15rem, 1.6vw, 1.5rem); line-height:1.95; color:var(--ink)}
.side h2{font-size:clamp(1.4rem, 2vw, 1.8rem); font-weight:700; margin-block-end:1rem}
.side h2 + *{margin-block-end:2.2rem}
.scope{list-style:none; margin:0; padding:0; counter-reset:sc}
.scope li{counter-increment:sc; display:grid; grid-template-columns:2.2rem 1fr; gap:.6rem; padding-block:.8rem; border-block-end:1px solid var(--line); color:var(--ink-2); font-size:.96rem}
.scope li::before{content:counter(sc, decimal-leading-zero); font-family:var(--f-lat); font-weight:500; font-size:.78rem; color:var(--gold-ink); padding-block-start:.25rem}
.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.chips li{font-size:.88rem; padding:.4rem .95rem; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2)}
.mgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:clamp(.8rem, 1.4vw, 1.2rem)}
.mitem{position:relative; display:block; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:#1B1B2A}
.mitem img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.mitem:hover img{transform:scale(1.05)}
.pager{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem, 1.6vw, 1.4rem)}
.pg{position:relative; display:block; min-height:clamp(220px, 32vh, 320px); border-radius:var(--r); overflow:hidden; background:#1B1B2A; color:#fff; isolation:isolate}
.pg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.3s var(--e)}
.pg::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(12,12,26,.9), rgba(12,12,26,.2) 70%)}
.pg:hover img{transform:scale(1.05)}
.pg-in{position:absolute; inset-inline:clamp(1.2rem, 2.6vw, 2.2rem); bottom:clamp(1.2rem, 2.6vw, 2rem); display:grid; gap:.35rem}
.pg-next .pg-in{justify-items:end; text-align:end}
.pg-k{font-size:.88rem; color:var(--gold-hi)}
.pg-t{font-family:var(--f-disp); font-weight:700; font-size:calc(clamp(1.3rem, 2.2vw, 2rem) * var(--disp-k)); line-height:1.4}

/* ============================================================
   19. الاستجابة
   ============================================================ */
@media (max-width:1100px){
  .about-grid,.trust-grid{grid-template-columns:1fr}
  .wall{height:clamp(440px, 64vh, 600px)}
  .panel{grid-template-columns:1fr}
  .panel-visual{position:relative; top:auto; aspect-ratio:16/10}
  .steps{grid-template-columns:1fr; gap:0}
  .steps::before,.steps::after{inset-inline:auto; inset-inline-start:calc(clamp(3.4rem, 5.4vw, 5rem) * .5); top:0; bottom:0; width:2px; height:auto}
  .steps::after{transform:scaleY(var(--p)); transform-origin:top}
  .step{grid-template-columns:auto 1fr; column-gap:1.2rem; padding-block-end:2.2rem}
  .step-num{grid-row:span 2; padding:0 0 .4rem; margin:0}
  .step:last-child{padding-block-end:0}
  .menu-in{grid-template-columns:1fr; grid-template-rows:auto auto auto; align-content:start; gap:2rem; padding:calc(var(--bar-h) + 3vh) var(--gut) calc(2rem + env(safe-area-inset-bottom))}
  .menu-side{padding-inline-start:0; border-inline-start:0; padding-block-start:.4rem}
  .menu-legal{flex-direction:column; gap:.3rem}
  .menu-mark{width:80vw; left:-22vw; bottom:-6vh}
  .cbox{grid-template-columns:1fr}
  .d-story .grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .fields-grid{grid-template-columns:1fr; gap:1rem}
  .field{aspect-ratio:4/4.3}
  .works-grid{grid-template-columns:1fr; gap:2.2rem}
  .works-grid .wcard:nth-child(n){grid-column:auto}
  .wc-media{height:auto; aspect-ratio:4/3.1}
  /* الجوال: المجالات الثلاثة متتالية بلا تبويبات */
  .tabs{display:none}
  .panel[hidden]{display:grid}
  .js .panel + .panel{margin-block-start:clamp(2.8rem, 9vw, 3.8rem)}
}
@media (max-width:680px){
  .bar{gap:.5rem}
  .bar-cta{display:none}
  .bar-logo{gap:.55rem}
  .bar-logo img{width:34px}
  .bar-logo span{font-size:.62rem}
  .bar-logo span i{font-size:.48rem}
  .theme-btn{width:42px; height:42px}
  .hero{min-height:640px; --curve:34px}
  .hero-title{font-size:calc(clamp(2.6rem, 14vw, 4.6rem) * var(--disp-k)); line-height:1.12}
  .hero-in{padding-block:calc(var(--bar-h) + 6rem) calc(var(--curve) + 6.4rem)}
  .hero-sub{font-size:.98rem}
  /* الإطار العمودي يقصّ الفيديو على أكثر أجزائه إضاءة، فالتعتيم هنا أعمق */
  .hero-shade{background:radial-gradient(90% 55% at 50% 50%, rgba(18,18,50,.42), rgba(18,18,50,0) 80%), linear-gradient(180deg, rgba(18,18,50,.66) 0%, rgba(18,18,50,.38) 35%, rgba(18,18,50,.44) 65%, rgba(12,12,32,.92) 100%)}
  .hc-track img{height:50px; margin-right:1.5rem}
  .pillars{grid-template-columns:1fr; gap:1.2rem}
  .wall{height:440px}
  .wall-stage{grid-template-columns:repeat(2, 1fr); inset:-10% -14%; transform:rotateX(10deg) rotateZ(-6deg)}
  .wall-col:nth-child(3){display:none}
  .rrow:not(.rev) .ritem{width:78vw}
  .rrow.rev .ritem{width:44vw}
  .ritem figcaption{opacity:1; transform:none; font-size:.8rem}
  .ritem::after{opacity:.8}
  .svc-zoom{height:135vh}
  .svc{grid-template-columns:2.4rem 1fr; gap:.6rem}
  .words{height:150vh}
  .words-row{flex-direction:column; gap:.2rem}
  .wd{font-size:calc(clamp(3rem, 16vw, 5rem) * var(--disp-k)); line-height:1.25}
  .wd-dot{display:none}
  .logos{grid-template-columns:repeat(2, 1fr)}
  .trust-mark{width:90vw; margin-top:-45vw; inset-inline-end:-30vw}
  .ml{font-size:clamp(1.75rem, 8.4vw, 2.4rem)}
  .foot-top{grid-template-columns:1fr; gap:2.2rem}
  /* الجوال: الشعار والقائمة والحسابات والاعتماد في الوسط */
  .foot-row{flex-direction:column; align-items:center; text-align:center; gap:1.3rem}
  .foot-nav,.foot-social{justify-content:center}
  .foot-bottom{flex-direction:column; justify-content:center; align-items:center; gap:.7rem; text-align:center}   /* الجملة فوق الشعار */
  .pager{grid-template-columns:1fr}
  .pg-next .pg-in{justify-items:start; text-align:start}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(odd){border-inline-start:0}
  .facts div{border-block-start:1px solid var(--line)}
  .facts div:nth-child(-n+2){border-block-start:0}
  .modal{padding-inline:12px; gap:.8rem}
  /* مشغّل Google Drive يضع شريط أدواته أعلى الإطار ويقصّ الفيديو إن ضاق الارتفاع:
     في الجوال العمودي نمنحه صندوقًا أطول فيحتوي الفيديو كاملًا مع شريطه */
  .modal-stage{width:100%; aspect-ratio:4/5; max-height:74svh}
  .modal-cap{width:100%}
  .modal-x{inset-block-start:calc(14px + env(safe-area-inset-top)); width:46px; height:46px}
  .modal-cap b{font-size:1.1rem}
}
/* اللمس: مكافئات المرور */
@media (hover:none),(pointer:coarse){
  [data-video]{cursor:pointer}
  .pcur{display:none}
  .field .go{opacity:1; transform:none; width:40px; height:40px}
  .wc-go{opacity:1; transform:none; width:44px; height:44px}
  /* كل تأثير مرور يعمل هنا حين يعبر العنصر منتصف الشاشة (‎.is-lit‎ من motion.js) */
  .wcard.is-lit .wc-title{color:var(--gold-lo)}
  .wcard.is-lit .wc-media img{transform:scale(1.05)}
  .field.is-lit img{transform:scale(1.06)}
  .field.is-lit .bar-line{transform:scaleX(1)}
  .svc.is-lit{padding-inline-start:.9rem}
  .svc.is-lit::before{transform:scaleX(1)}
  .logos li.is-lit{background:var(--bg-2)}
  .logos li.is-lit img{opacity:1}
  .mitem.is-lit img,.pg.is-lit img{transform:scale(1.05)}
  .wall:hover .wall-track{animation-play-state:running}
  /* الشعار: اللمس يشغّل حركة المرور نفسها، وشعار الهيرو يتمايل بهدوء بدل تتبّع المؤشّر */
  .bar-logo:active img,.fb-logo:active img{transform:rotate(-14deg) scale(1.08); filter:drop-shadow(0 0 12px rgba(202,162,101,.65))}
  .ht-mark img{animation:mark-sway 6s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .hc-track,.rtrack,.wall-track{animation:none !important}
  .rrow{overflow-x:auto}
  .svc-zoom,.words{height:auto}
  .svc-zoom-sticky,.words-sticky{position:relative; height:auto; padding-block:clamp(4rem, 12vh, 8rem)}
  .js .slant .s-draw{clip-path:none}
  .foot-word{--fill:1}
}

/* مقطع داخل عنصر «مشاهد من أعمالنا» — يظهر فوق الملصق عند التشغيل */
.ritem video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--e)}
.ritem.playing video{opacity:1}
.ritem.playing .rplay{opacity:0; transition:opacity .4s var(--e)}