/* ═══════════════════════════════════════════════════════════
   Ahmed Talaat — Cinematic Portfolio
   01. Tokens        02. Reset        03. Overlays
   04. Cursor        05. Loader       06. Nav / Menu
   07. Hero          08. Marquee      09. Manifesto
   10. Stats         11. Stack        12. Showcase
   13. Work          14. Process      15. Contact
   16. Footer        17. RTL          18. Responsive
   ═══════════════════════════════════════════════════════════ */

/* ───────── 01. TOKENS ───────── */
:root{
  --bg:        #04060a;
  --bg-2:      #070a10;
  --panel:     #0a0e15;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --ink:       #f2f5f8;
  --ink-2:     rgba(242,245,248,.62);
  --ink-3:     rgba(242,245,248,.34);

  --cy:        #00e5ff;
  --cy-2:      #0a84ff;
  --vi:        #7c5cff;
  --lime:      #b6ff3d;

  --glow-cy:   0 0 40px rgba(0,229,255,.35);
  --glow-soft: 0 0 80px rgba(0,229,255,.14);

  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --ar:   'Noto Kufi Arabic', 'Space Grotesk', sans-serif;

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-io:  cubic-bezier(.76,0,.24,1);

  --pad: clamp(20px, 5vw, 90px);
  --maxw: 1500px;
}

/* ───────── 02. RESET ───────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.menu-open{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--cy); color:#03060a; }

/* scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#04060a; }
::-webkit-scrollbar-thumb{ background:rgba(0,229,255,.25); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(0,229,255,.5); }

/* shared section bits */
.sec-tag{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:26px;
}
.sec-tag i{
  font-style:normal; color:var(--cy);
  padding:4px 9px; border:1px solid rgba(0,229,255,.28);
  border-radius:4px; background:rgba(0,229,255,.06);
  box-shadow:0 0 22px rgba(0,229,255,.18) inset;
}
.sec-title{
  font-size:clamp(2.4rem, 6.5vw, 5.6rem);
  font-weight:600; line-height:.98; letter-spacing:-.035em;
}
.grad{
  background:linear-gradient(100deg,#fff 0%,var(--cy) 42%,var(--vi) 88%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ───────── 03. OVERLAYS ───────── */
.grain{
  position:fixed; inset:-120%; z-index:9998; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(7) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}   14%{transform:translate(-6%,-4%)}
  28%{transform:translate(4%,-7%)} 42%{transform:translate(-3%,6%)}
  57%{transform:translate(-7%,2%)} 71%{transform:translate(6%,4%)}
  85%{transform:translate(-2%,-6%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.scanlines{
  position:fixed; inset:0; z-index:9996; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

/* progress rail */
.rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9994;
  background:rgba(255,255,255,.05);
}
.rail__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--cy),var(--vi));
  box-shadow:0 0 14px rgba(0,229,255,.8);
}

/* ───────── 04. CURSOR ───────── */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; }
/* left/top صريحان: بدونهما يتحدّد موضع الأساس من حافة السطر، فينزاح في RTL
   بمقدار فرق عرض النقطة عن الحلقة وتخرج النقطة من الدائرة عند التعريب */
.cursor__dot{
  position:fixed; left:0; top:0; width:6px; height:6px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
}
.cursor__ring{
  position:fixed; left:0; top:0; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease);
}
/* التسمية خارج الحلقة لا داخلها: تُوضع إلى جانبها فتبقى الحلقة صغيرة
   بنفس شكلها فوق أي عنصر تفاعلي، ويُقرأ النصّ بجوارها */
.cursor__label{
  position:absolute; top:50%; left:100%; margin-left:12px;
  transform:translateY(-50%);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; white-space:nowrap;
  opacity:0; transition:opacity .25s var(--ease);
}
/* الحلقة تنكمش قليلًا عند التأشير على عنصر تفاعلي — وهي نفسها في كل الحالات */
.cursor.is-hover .cursor__ring{ width:30px; height:30px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.8); }
.cursor.is-label .cursor__label{ opacity:1; }
.cursor.is-down .cursor__ring{ width:22px; height:22px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* إخفاء مؤشر النظام تمامًا — المؤشر المخصّص يحلّ محلّه على أجهزة الفأرة فقط */
@media (hover:hover) and (pointer:fine){
  html, body, *, *::before, *::after{ cursor:none !important; }
}

/* ───────── 05. LOADER ───────── */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg); display:grid; place-items:center; overflow:hidden;
}
.loader__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(0,229,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
  animation:gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse{ 50%{ opacity:.85; transform:scale(1.04); } }

.loader__inner{ position:relative; z-index:2; display:grid; justify-items:center; gap:26px; }
.loader__mark{ position:relative; width:140px; height:140px; display:grid; place-items:center; }
.loader__svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.lc{ fill:none; stroke-width:1.2; }
.lc--track{ stroke:rgba(255,255,255,.09); }
.lc--inner{ stroke:rgba(255,255,255,.05); stroke-dasharray:3 7; animation:spinSlow 14s linear infinite; transform-origin:50% 50%; }
.lc--prog{
  stroke:var(--cy);
  stroke-dasharray:327; stroke-dashoffset:327;
  filter:drop-shadow(0 0 8px rgba(0,229,255,.9));
}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

/* الشعار الحقيقي — مقصوص من media/logo.png ومقنَّع بتدرّج سماوي.
   ثوابت القصّ (265,145,670 من قماش 1200×1200) مطابقة لأيقونات deploy/make-images.py،
   و--lm يضبط ضلع الأيقونة فيُعاد حساب حجم القناع وإزاحته تبعًا له. */
.logo-mark{
  display:inline-block; width:var(--lm,20px); height:var(--lm,20px);
  background:linear-gradient(150deg,#fff 0%,#cdf7ff 40%,var(--cy) 100%);
  -webkit-mask-image:url('../media/logo.png'); mask-image:url('../media/logo.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:calc(var(--lm,20px) * 1200 / 670) calc(var(--lm,20px) * 1200 / 670);
  mask-size:calc(var(--lm,20px) * 1200 / 670) calc(var(--lm,20px) * 1200 / 670);
  -webkit-mask-position:calc(var(--lm,20px) * -265 / 670) calc(var(--lm,20px) * -145 / 670);
  mask-position:calc(var(--lm,20px) * -265 / 670) calc(var(--lm,20px) * -145 / 670);
}
.loader__z{
  display:grid; place-items:center;
  animation:zPulse 2.2s ease-in-out infinite;
}
@keyframes zPulse{ 50%{ opacity:.45; transform:scale(.96); } }

.loader__meta{ text-align:center; }
.loader__num{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--cy); }
.loader__num i{ font-style:normal; opacity:.5; }
.loader__status{
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3); margin-top:8px;
}
.loader__bar{ width:min(320px,60vw); height:1px; background:rgba(255,255,255,.1); overflow:hidden; }
.loader__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--cy),var(--vi));
  box-shadow:0 0 12px rgba(0,229,255,.9);
}
.loader__curtain{
  position:absolute; inset:0; background:var(--bg); transform:translateY(100%); z-index:3;
}

/* ───────── 06. NAV / MENU ───────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(4,6,10,.72); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding-top:14px; padding-bottom:14px; border-bottom-color:var(--line);
}
/* uses `translate` (not `transform`) so GSAP's intro tween never fights this transition */
.nav{ translate:0 0; transition:translate .55s var(--ease), background .45s var(--ease), padding .45s var(--ease), border-color .45s; }
.nav.is-hidden{ translate:0 -105%; }

.nav__logo{ display:flex; align-items:center; gap:11px; }
.nav__logo-mark{
  width:30px; height:30px; display:grid; place-items:center;
  border:1px solid rgba(0,229,255,.4); border-radius:7px;
  background:rgba(0,229,255,.07);
  box-shadow:0 0 20px rgba(0,229,255,.2), inset 0 0 14px rgba(0,229,255,.12);
  transition:transform .5s var(--ease), box-shadow .4s;
}
/* الدوران ٩٠° كان يليق بحرف مجرّد؛ الشعار المقلوب يُقرأ كخلل، فيكفي تكبير وتوهّج */
.nav__logo:hover .nav__logo-mark{ transform:scale(1.1); box-shadow:0 0 34px rgba(0,229,255,.5); }
.nav__logo-text{ font-weight:600; letter-spacing:.02em; font-size:15px; }
.nav__logo-text i{ font-style:normal; color:var(--ink-3); font-weight:400; }

.nav__links{ display:flex; gap:34px; }
.nav__links a{
  position:relative; font-size:13.5px; color:var(--ink-2);
  padding:4px 0; overflow:hidden; transition:color .35s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--cy); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease); box-shadow:0 0 10px var(--cy);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--cy); }
.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__right{ display:flex; align-items:center; gap:14px; }

.langbtn{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--line-2); border-radius:99px; padding:4px;
  background:rgba(255,255,255,.03); overflow:hidden;
}
.langbtn__slider{
  position:absolute; top:4px; inset-inline-start:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  background:linear-gradient(135deg,rgba(0,229,255,.9),rgba(124,92,255,.9));
  border-radius:99px; transition:transform .5s var(--ease);
  box-shadow:0 0 18px rgba(0,229,255,.45);
}
.langbtn.is-ar .langbtn__slider{ transform:translateX(100%); }
.langbtn__opt{
  position:relative; z-index:2; width:34px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-3); transition:color .4s; padding:3px 0;
}
.langbtn__opt.is-on{ color:#03060a; font-weight:600; }

.burger{ display:none; width:34px; height:34px; position:relative; }
.burger span{
  position:absolute; left:7px; width:20px; height:1.5px; background:var(--ink);
  transition:transform .5s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:20px; }
.burger.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.menu{ position:fixed; inset:0; z-index:8999; pointer-events:none; }
.menu.is-open{ pointer-events:auto; }
.menu__bg{
  position:absolute; inset:0; background:rgba(4,6,10,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  clip-path:circle(0% at 90% 5%); transition:clip-path .85s var(--ease-io);
}
.menu.is-open .menu__bg{ clip-path:circle(150% at 90% 5%); }
.menu__inner{
  position:relative; height:100%; display:flex; flex-direction:column;
  justify-content:center; gap:6px; padding:0 var(--pad);
}
.menu__link{
  display:flex; align-items:baseline; gap:18px;
  font-size:clamp(2rem,9vw,4rem); font-weight:600; letter-spacing:-.03em;
  opacity:0; transform:translateY(40px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__link{ opacity:1; transform:none; }
.menu.is-open .menu__link:nth-child(1){ transition-delay:.28s }
.menu.is-open .menu__link:nth-child(2){ transition-delay:.36s }
.menu.is-open .menu__link:nth-child(3){ transition-delay:.44s }
.menu.is-open .menu__link:nth-child(4){ transition-delay:.52s }
.menu.is-open .menu__link:nth-child(5){ transition-delay:.60s }
.menu__link i{ font-family:var(--mono); font-size:12px; font-style:normal; color:var(--cy); opacity:.6; }
.menu__link:hover{ color:var(--cy); }

/* ───────── 07. HERO ───────── */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:120px var(--pad) 90px; overflow:hidden; isolation:isolate;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }

.hero__aurora{ position:absolute; inset:0; z-index:0; filter:blur(90px); opacity:.5; }
.aur{ position:absolute; border-radius:50%; }
.aur--1{ width:52vw; height:52vw; left:-12vw; top:-14vw; background:radial-gradient(circle,rgba(0,229,255,.42),transparent 68%); animation:drift1 20s ease-in-out infinite; }
.aur--2{ width:46vw; height:46vw; right:-10vw; bottom:-12vw; background:radial-gradient(circle,rgba(124,92,255,.4),transparent 68%); animation:drift2 26s ease-in-out infinite; }
.aur--3{ width:34vw; height:34vw; left:42%; top:34%; background:radial-gradient(circle,rgba(10,132,255,.32),transparent 70%); animation:drift3 22s ease-in-out infinite; }
@keyframes drift1{ 50%{ transform:translate(14vw,10vh) scale(1.18); } }
@keyframes drift2{ 50%{ transform:translate(-12vw,-9vh) scale(1.22); } }
@keyframes drift3{ 50%{ transform:translate(-9vw,12vh) scale(.85); } }

.hero__rings{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; pointer-events:none; }
.ring{
  position:absolute; border-radius:50%; border:1px solid rgba(0,229,255,.12);
  animation:spinSlow 40s linear infinite;
}
.ring--1{ width:min(560px,74vw); height:min(560px,74vw); border-style:dashed; }
.ring--2{ width:min(800px,100vw); height:min(800px,100vw); animation-duration:70s; animation-direction:reverse; border-color:rgba(124,92,255,.1); }
.ring--3{ width:min(1080px,132vw); height:min(1080px,132vw); animation-duration:110s; border-color:rgba(255,255,255,.045); }
.ring-dot{
  position:absolute; width:min(560px,74vw); height:min(560px,74vw);
  animation:spinSlow 40s linear infinite;
}
.ring-dot::before{
  content:''; position:absolute; top:-4px; left:50%; width:7px; height:7px;
  border-radius:50%; background:var(--cy); box-shadow:0 0 18px 4px rgba(0,229,255,.85);
}

.hero__beam{
  position:absolute; top:0; left:50%; width:1px; height:100%; z-index:0;
  background:linear-gradient(to bottom, transparent, rgba(0,229,255,.5), transparent);
  opacity:.5; animation:beamSweep 6s ease-in-out infinite;
}
@keyframes beamSweep{ 0%,100%{ transform:translateX(-30vw); opacity:.15 } 50%{ transform:translateX(30vw); opacity:.5 } }

.hero__inner{ position:relative; z-index:3; text-align:center; max-width:var(--maxw); }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:99px;
  padding:8px 18px; background:rgba(255,255,255,.028);
  backdrop-filter:blur(10px); margin-bottom:34px;
}
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{ 50%{ transform:scale(1.7); opacity:.45 } }

.hero__title{
  font-size:clamp(3rem, 13.5vw, 12rem);
  font-weight:700; line-height:.86; letter-spacing:-.055em; margin-bottom:30px;
}
.hero__title .line, .showcase__title .line, .contact__title .line{
  display:block; overflow:hidden; padding-bottom:.06em;
}
.hero__title .w, .showcase__title .w, .contact__title .w{ display:inline-block; will-change:transform; }

.hero__sub{ max-width:660px; margin:0 auto 44px; }
.hero__sub p{ font-size:clamp(.95rem,1.35vw,1.15rem); color:var(--ink-2); line-height:1.75; }

.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:16px 34px; border-radius:99px; overflow:hidden;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  border:1px solid var(--line-2); isolation:isolate;
  transition:color .4s var(--ease), border-color .4s;
}
.btn__label,.btn__arrow{ position:relative; z-index:2; transition:transform .5s var(--ease); }
.btn__arrow{ font-size:15px; }
.btn__fill{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,var(--cy),var(--vi));
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.btn--primary{
  background:linear-gradient(120deg,rgba(0,229,255,.16),rgba(124,92,255,.16));
  border-color:rgba(0,229,255,.4);
  box-shadow:0 0 34px rgba(0,229,255,.16), inset 0 0 22px rgba(0,229,255,.07);
}
.btn--primary:hover{ color:#03060a; border-color:transparent; }
.btn--primary:hover .btn__fill{ transform:translateY(0); }
.btn--primary:hover .btn__arrow{ transform:translateX(6px); }
.btn--ghost{ background:rgba(255,255,255,.025); }
.btn--ghost:hover{ border-color:var(--cy); color:var(--cy); box-shadow:0 0 30px rgba(0,229,255,.18); }

.hero__hud{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hud{
  position:absolute; display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}
.hud i{ width:5px; height:5px; border-radius:50%; background:var(--cy); box-shadow:0 0 8px var(--cy); animation:pulseDot 2s infinite; }
.hud--tl{ top:96px; left:var(--pad); } .hud--tr{ top:96px; right:var(--pad); }
.hud--bl{ bottom:38px; left:var(--pad); } .hud--br{ bottom:38px; right:var(--pad); }

.hero__scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; }
.scrollline{ width:1px; height:64px; background:rgba(255,255,255,.12); overflow:hidden; position:relative; }
.scrollline span{
  position:absolute; top:0; left:0; width:100%; height:34%;
  background:linear-gradient(to bottom,transparent,var(--cy));
  animation:scrollDrop 2.1s var(--ease) infinite;
}
@keyframes scrollDrop{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(300%) } }

/* ───────── 08. MARQUEE ───────── */
.marquee-wrap{
  position:relative; z-index:4; padding:34px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,229,255,.03),transparent);
  overflow:hidden;
  /* main.js يحرّك المسار بإحداثيات فيزيائية ثابتة (0 → -w) على افتراض
     أن نقطة الصفر تلاصق الحافة اليسرى؛ في dir=rtl يلصق inline-flex
     المسار بالحافة اليمنى بدلًا منها فيتّسع فراغ في جهة العرض مع كل
     دورة. نفرض LTR هنا لتبقى الهندسة كما تتوقّعها الحركة، بلا أثر على
     القراءة لأن محتوى الشريط أسماء تقنيات لاتينية ثابتة لا تتبع اللغة. */
  direction:ltr;
}
.marquee{ overflow:hidden; white-space:nowrap; padding:7px 0; }
.marquee__track{ display:inline-flex; gap:52px; will-change:transform; }
.marquee__track span{
  font-family:var(--mono); font-size:clamp(1rem,2.1vw,1.7rem);
  letter-spacing:-.01em; color:rgba(255,255,255,.16);
  display:inline-flex; align-items:center; gap:52px; text-transform:uppercase;
  transition:color .3s;
}
.marquee__track span b{ color:var(--cy); font-size:.6em; opacity:.6; }
.marquee--rev .marquee__track span{ color:rgba(0,229,255,.14); }

/* ───────── 09. MANIFESTO ───────── */
.manifesto{ height:260vh; position:relative; }
.manifesto__sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad); max-width:var(--maxw); margin:0 auto;
}
.manifesto__text{
  font-size:clamp(1.5rem,4.4vw,3.6rem);
  font-weight:400; line-height:1.32; letter-spacing:-.025em;
}
.manifesto__text .wd{ display:inline-block; color:rgba(255,255,255,.09); transition:color .1s linear; }
.manifesto__text .wd.on{ color:var(--ink); }
.manifesto__text .wd.hl.on{ color:var(--cy); text-shadow:0 0 28px rgba(0,229,255,.5); }

/* ───────── 10. STATS ───────── */
.stats{ padding:120px var(--pad); border-top:1px solid var(--line); }
.stats__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.stat{
  position:relative; background:var(--bg); padding:46px 30px; overflow:hidden;
  transition:background .5s var(--ease);
}
.stat:hover{ background:var(--panel); }
.stat__num{
  font-size:clamp(2.4rem,5vw,4.2rem); font-weight:600; letter-spacing:-.045em;
  line-height:1; background:linear-gradient(160deg,#fff,rgba(0,229,255,.75));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat__label{ margin-top:14px; font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; }
.stat__glow{
  position:absolute; inset:auto -30% -70% -30%; height:130%;
  background:radial-gradient(ellipse at center,rgba(0,229,255,.22),transparent 68%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none;
}
.stat:hover .stat__glow{ opacity:1; }

/* ───────── 11. STACK (horizontal) ───────── */
.stack{ position:relative; }
.stack__pin{ height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.stack__head{ padding:0 var(--pad); margin-bottom:44px; }
.stack__track{ display:flex; gap:28px; padding:0 var(--pad); will-change:transform; }

.cap{
  position:relative; flex:0 0 min(430px,84vw); padding:38px 34px 34px;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  backdrop-filter:blur(8px);
  transition:border-color .55s var(--ease), transform .55s var(--ease);
}
.cap:hover{ border-color:rgba(0,229,255,.4); transform:translateY(-8px); }
.cap__idx{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--cy); opacity:.65; }
.cap__icon{
  width:52px; height:52px; margin:22px 0 24px; border-radius:13px;
  display:grid; place-items:center; border:1px solid rgba(0,229,255,.24);
  background:rgba(0,229,255,.06); box-shadow:inset 0 0 22px rgba(0,229,255,.1);
  transition:transform .6s var(--ease), box-shadow .5s;
}
.cap:hover .cap__icon{ transform:rotate(-8deg) scale(1.08); box-shadow:0 0 32px rgba(0,229,255,.32), inset 0 0 22px rgba(0,229,255,.18); }
.cap__icon svg{ width:24px; height:24px; fill:none; stroke:var(--cy); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cap h3{ font-size:1.42rem; font-weight:600; letter-spacing:-.02em; margin-bottom:12px; }
.cap p{ font-size:14px; color:var(--ink-2); line-height:1.72; min-height:96px; }
.cap__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.cap__tags li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  padding:5px 11px; border:1px solid var(--line); border-radius:99px; color:var(--ink-3);
  transition:border-color .4s,color .4s;
}
.cap:hover .cap__tags li{ border-color:rgba(0,229,255,.26); color:rgba(0,229,255,.8); }
.cap__glow{
  position:absolute; top:-40%; left:-20%; width:140%; height:80%;
  background:radial-gradient(ellipse,rgba(0,229,255,.18),transparent 65%);
  opacity:0; transition:opacity .6s; pointer-events:none;
}
.cap:hover .cap__glow{ opacity:1; }

.stack__progress{ margin:44px var(--pad) 0; height:1px; background:rgba(255,255,255,.08); }
.stack__progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cy),var(--vi)); box-shadow:0 0 12px rgba(0,229,255,.7); }

/* ───────── 12. SHOWCASE ───────── */
.showcase{ height:220vh; position:relative; }
.showcase__pin{ position:sticky; top:0; height:100svh; overflow:hidden; }
.showcase__panel{ position:relative; height:100%; display:grid; place-items:center; }
#gridCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.showcase__copy{
  position:relative; z-index:2; text-align:center;
  padding:0 var(--pad); max-width:920px;
}
.showcase__title{ font-size:clamp(2.6rem,10vw,8rem); font-weight:700; line-height:.9; letter-spacing:-.05em; margin:6px 0 26px; }
.showcase__lead{ font-size:clamp(.95rem,1.3vw,1.1rem); color:var(--ink-2); line-height:1.8; max-width:620px; margin:0 auto 52px; }
.showcase__metrics{ display:flex; justify-content:center; gap:clamp(24px,6vw,80px); flex-wrap:wrap; }
.showcase__metrics div{ display:grid; gap:7px; }
.showcase__metrics b{
  font-size:clamp(1.8rem,3.6vw,2.9rem); font-weight:600; letter-spacing:-.04em;
  background:linear-gradient(160deg,#fff,var(--cy));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.showcase__metrics span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* ───────── 13. WORK ───────── */
.work{ padding:140px 0 100px; }
.work__head{ padding:0 var(--pad); max-width:var(--maxw); margin:0 auto 70px; }
.work__list{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:grid; gap:110px; }

.proj{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
/* ── تناوب جهة الصورة: المشاريع المقلوبة تحمل .proj--flip صراحةً ──
   (كانت nth-child، وهي تعدّ داخل كلّ حاوية على حدة فينكسر التناوب
   حين تُقسَّم الأعمال إلى قائمتين: الأولى الظاهرة والثانية المطويّة) */
.proj--flip{ direction:rtl; }
.proj--flip > *{ direction:ltr; }

.proj__media{
  position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .6s var(--ease), transform .8s var(--ease);
}
.proj:hover .proj__media{ border-color:color-mix(in srgb, var(--p1) 45%, transparent); }
.proj__visual{ position:absolute; inset:0; overflow:hidden; }
.pv-glow{
  position:absolute; inset:-25%;
  background:radial-gradient(circle at 32% 34%, var(--p1), transparent 55%),
             radial-gradient(circle at 70% 72%, var(--p2), transparent 58%);
  opacity:.68; filter:blur(46px);
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
  animation:glowBreath 9s ease-in-out infinite;
}
@keyframes glowBreath{ 50%{ transform:scale(1.09) rotate(4deg); } }
.proj:hover .pv-glow{ opacity:.95; }
.proj__visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,6,10,.05),rgba(4,6,10,.55));
}
.pv-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:38px 38px;
  transform:perspective(560px) rotateX(58deg) translateY(18%) scale(1.9);
  transform-origin:center bottom; animation:gridRun 5s linear infinite;
}
@keyframes gridRun{ to{ background-position:0 38px; } }
.pv-orb{
  position:absolute; top:50%; left:50%; width:38%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 62%);
  box-shadow:0 0 60px color-mix(in srgb, var(--p1) 50%, transparent), inset 0 0 40px rgba(255,255,255,.08);
  animation:orbFloat 7s ease-in-out infinite;
}
@keyframes orbFloat{ 50%{ transform:translate(-50%,-58%) scale(1.06) } }
.pv-wave{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.09) 22px 23px);
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  animation:waveSlide 4s linear infinite;
}
@keyframes waveSlide{ to{ background-position:23px 0 } }
.pv-rings{
  position:absolute; top:50%; left:50%; width:80%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 40px rgba(255,255,255,.035), 0 0 0 80px rgba(255,255,255,.02);
  animation:ringBreath 5s ease-in-out infinite;
}
@keyframes ringBreath{ 50%{ transform:translate(-50%,-50%) scale(1.09); opacity:.7 } }
.pv-bars{
  position:absolute; bottom:0; left:0; right:0; height:60%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 14px,transparent 14px 34px);
  mask-image:linear-gradient(to top,#000,transparent);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  animation:barsPulse 3s ease-in-out infinite;
}
@keyframes barsPulse{ 50%{ height:76%; opacity:.6 } }
.proj__scan{
  position:absolute; left:0; right:0; height:120px; top:-120px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);
  pointer-events:none;
}
.proj:hover .proj__scan{ animation:scanRun 1.5s var(--ease); }
@keyframes scanRun{ to{ top:120%; } }

/* ── لقطات المشاريع: طبقة الصورة داخل .proj__visual ──
   ترتيب الطبقات المقصود: .pv-shot (0) ← .pv-glow (1) ← .proj__visual::after (2) ← .proj__scan (3) */
.pv-shot{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 0;                 /* اللقطات مأخوذة من أعلى الصفحة */
  transform:scale(1); transform-origin:50% 0;
  opacity:.46;
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
}
.proj:hover .pv-shot{ opacity:.94; transform:scale(1.045); }

/* main.js يحرّك .proj__visual بـ parallax لأعلى — نمدّ الحاوية أسفل الإطار كي لا ينكشف حدّ الصورة */
.proj__visual:has(.pv-shot){ bottom:-18%; }

/* التوهّج يخفّ عند وجود لقطة كي لا يطمسها، مع بقاء اللون محسوسًا */
.proj__visual:has(.pv-shot) .pv-glow{ opacity:.32; filter:blur(58px); }
.proj:hover .proj__visual:has(.pv-shot) .pv-glow{ opacity:.5; }

/* لا يوجد hover على أجهزة اللمس — تُعرض اللقطة واضحة من البداية */
@media (hover:none),(pointer:coarse){
  .pv-shot{ opacity:.86; }
  .proj__visual:has(.pv-shot) .pv-glow{ opacity:.4; }
}

/* تثبيت الترتيب: التعتيم وخطّ المسح يبقيان فوق الصورة */
.proj__visual > .pv-glow{ z-index:1; }
.proj__visual::after{ z-index:2; }
.proj__scan{ z-index:3; }

.proj__meta{
  display:flex; gap:16px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px;
}
.proj__meta span:first-child{ color:var(--cy); }
.proj__title{
  font-size:clamp(1.9rem,3.6vw,3.1rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.03; margin-bottom:16px;
  transition:color .4s;
}
.proj:hover .proj__title{ color:var(--p1); }
.proj__desc{ font-size:14.5px; color:var(--ink-2); line-height:1.75; max-width:460px; }
.proj__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 26px; }
.proj__tags li{
  font-family:var(--mono); font-size:10.5px; padding:5px 12px;
  border:1px solid var(--line); border-radius:99px; color:var(--ink-3);
}
.proj__link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); position:relative; padding-bottom:6px;
}
.proj__link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--p1); transform:scaleX(.3); transform-origin:left;
  transition:transform .6s var(--ease);
}
.proj:hover .proj__link::after{ transform:scaleX(1); }
.proj__link i{ font-style:normal; transition:transform .5s var(--ease); }
.proj:hover .proj__link i{ transform:translateX(7px); }
/* ── .proj__link صار <a>: تثبيت شكله كما كان في <span> تمامًا ── */
a.proj__link,
a.proj__link:link,
a.proj__link:visited,
a.proj__link:hover,
a.proj__link:active,
a.proj__link:focus{
  display:inline-flex; color:var(--ink); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
a.proj__link:focus-visible{
  outline:1px solid color-mix(in srgb, var(--p1) 65%, transparent);
  outline-offset:8px; border-radius:6px;
}
/* ── مشروع بلا رابط حيّ: وسم ثابت بلا سهم ولا تفاعل ── */
.proj__link--off{ color:var(--ink-3); cursor:default; }
.proj__link--off::after{ background:var(--ink-3); opacity:.45; transform:scaleX(.18); }
.proj:hover .proj__link--off::after{ transform:scaleX(.18); }

/* ── الأعمال الأقدم: قائمة ثانية مطويّة خلف زرّ «المزيد» ──
   .work__list تفرض display:grid، وهو يتغلّب على السمة hidden ⇒ نعيد إخفاءها صراحةً. */
.work__more[hidden]{ display:none; }
.work__more{ margin-top:110px; }

.work__morebar{
  max-width:var(--maxw); margin:96px auto 0; padding:0 var(--pad);
  display:flex; justify-content:center;
}
.work__morebtn{ cursor:pointer; font-family:inherit; color:var(--ink); }
.work__morebtn-arrow{
  font-style:normal; font-size:15px; line-height:1;
  transition:transform .5s var(--ease);
}
.work__morebtn:hover .work__morebtn-arrow{ transform:translateY(3px); }
.work__morebtn[aria-expanded="true"] .work__morebtn-arrow{ transform:rotate(180deg); }
.work__morebtn[aria-expanded="true"]:hover .work__morebtn-arrow{ transform:rotate(180deg) translateY(3px); }
.work__morebtn:focus-visible{ outline:1px solid var(--cy); outline-offset:5px; }

/* ───────── 14. PROCESS ───────── */
.process{ padding:110px var(--pad) 140px; border-top:1px solid var(--line); }
.process__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,7vw,110px);
  align-items:start;
}
.process__head{ position:sticky; top:130px; }
.process__note{ margin-top:26px; font-size:14.5px; color:var(--ink-2); line-height:1.8; max-width:380px; }
.process__wrap{ position:relative; padding-left:60px; }
.process__line{ position:absolute; left:0; top:0; width:4px; height:100%; }
.pl-track{ stroke:rgba(255,255,255,.09); stroke-width:1.5; }
.pl-fill{
  stroke:var(--cy); stroke-width:1.5;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  filter:drop-shadow(0 0 6px rgba(0,229,255,.9));
}
.process__steps{ display:grid; gap:70px; }
.step{ position:relative; }
.step__dot{
  position:absolute; left:-62px; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:1px solid rgba(255,255,255,.25);
  transition:background .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.step.is-on .step__dot{ background:var(--cy); border-color:var(--cy); box-shadow:0 0 18px 3px rgba(0,229,255,.6); transform:scale(1.25); }
.step i{ font-family:var(--mono); font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--cy); opacity:.6; }
.step h4{ font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-.025em; margin:9px 0 12px; }
.step p{ font-size:14.5px; color:var(--ink-2); line-height:1.75; max-width:600px; }

/* ───────── 15. CONTACT ───────── */
.contact{ position:relative; padding:150px var(--pad) 130px; text-align:center; overflow:hidden; }
.contact__aura{
  position:absolute; top:50%; left:50%; width:min(1000px,120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,229,255,.16),rgba(124,92,255,.08) 42%,transparent 66%);
  filter:blur(70px); animation:auraPulse 8s ease-in-out infinite;
}
@keyframes auraPulse{ 50%{ transform:translate(-50%,-50%) scale(1.15); opacity:.75 } }
.contact__inner{ position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.contact__title{ font-size:clamp(2.2rem,8.5vw,7rem); font-weight:700; line-height:.92; letter-spacing:-.05em; margin-bottom:28px; }
.contact__lead{ font-size:clamp(.95rem,1.3vw,1.1rem); color:var(--ink-2); max-width:540px; margin:0 auto 56px; line-height:1.8; }

/* البريد يظهر بعنوانه كاملًا لا بأيقونة — هو قناة التواصل الأولى */
.bigcta{
  position:relative; display:inline-block; padding:26px 58px;
  font-size:clamp(1rem,2.4vw,1.75rem); font-weight:500; letter-spacing:-.02em;
  border-radius:99px; border:1px solid rgba(0,229,255,.35);
  background:rgba(0,229,255,.05); overflow:hidden;
  transition:color .5s var(--ease), border-color .5s, box-shadow .5s;
  box-shadow:0 0 46px rgba(0,229,255,.16);
}
.bigcta__ring{
  position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(120deg,var(--cy),var(--vi));
  transform:scale(0); transform-origin:center;
  transition:transform .65s var(--ease);
}
.bigcta__text{ position:relative; z-index:2; }
.bigcta:hover{ color:#03060a; border-color:transparent; box-shadow:0 0 80px rgba(0,229,255,.4); }
.bigcta:hover .bigcta__ring{ transform:scale(1); }

/* صفّ دوائر قنوات المراسلة المباشرة أسفل البريد */
/* الواتساب والديسكورد يكتنفان بطاقة البريد على سطر واحد */
.contact__row{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.contact__circle{
  width:88px; height:88px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03); color:var(--ink-2);
  transition:transform .5s var(--ease), border-color .4s, color .4s, box-shadow .4s, background .4s;
}
.contact__circle svg{ width:36px; height:36px; fill:currentColor; }
.contact__circle:hover{
  color:#03060a; border-color:transparent; transform:translateY(-7px);
  background:linear-gradient(135deg,var(--cy),var(--vi));
  box-shadow:0 0 40px rgba(0,229,255,.45);
}

/* الحسابات المهنية تبقى روابط نصّية أسفل الدوائر — تصميمها الأصلي */
.contact__socials{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; margin-top:56px; }
.contact__socials a{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); position:relative; padding-bottom:5px;
  transition:color .4s;
}
.contact__socials a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--cy); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.contact__socials a:hover{ color:var(--cy); }
.contact__socials a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ───────── 16. FOOTER ───────── */
.footer{ border-top:1px solid var(--line); padding:60px var(--pad) 40px; overflow:hidden; }
/* الاسم كلمتان لا كلمة واحدة — يُبقى على سطر واحد وإلا اختفى السطر الثاني تحت التدرّج */
.footer__big{
  font-size:clamp(1.5rem,12.2vw,11rem); font-weight:700; letter-spacing:-.06em;
  line-height:.9; text-align:center; white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.11),transparent 78%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  user-select:none;
}
.footer__row{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-top:20px;
}
.footer__row a:hover{ color:var(--cy); }

/* ───────── ENTRY ANIMATION HELPERS ───────── */
.reveal-fade{ opacity:0; transform:translateY(26px); }

/* split-title word masks — extra vertical room so Arabic diacritics never clip */
.sw{ display:inline-block; overflow:hidden; padding:.14em .02em .16em; margin:-.14em -.02em -.16em; }
.si{ display:inline-block; }

/* ───────── 17. RTL ───────── */
html[dir="rtl"] body{ font-family:var(--ar); }
html[dir="rtl"] .sec-title,
html[dir="rtl"] .hero__title,
html[dir="rtl"] .showcase__title,
html[dir="rtl"] .contact__title,
html[dir="rtl"] .manifesto__text,
html[dir="rtl"] .proj__title,
html[dir="rtl"] .step h4,
html[dir="rtl"] .cap h3{ letter-spacing:0; line-height:1.22; }
html[dir="rtl"] .hero__title{ font-size:clamp(2.6rem,10vw,8.5rem); line-height:1.1; }
html[dir="rtl"] .showcase__title,
html[dir="rtl"] .contact__title{ line-height:1.14; }
html[dir="rtl"] .footer__big{ font-family:var(--sans); }
/* mono يبقى للعناصر اللاتينية/الرقمية فقط — IBM Plex Mono بلا مجموعة عربية */
html[dir="rtl"] .langbtn__opt,
html[dir="rtl"] .hud--tl,
html[dir="rtl"] .hud--tr,
html[dir="rtl"] .hud--bl,
html[dir="rtl"] .cap__idx,
html[dir="rtl"] .marquee__track span{ font-family:var(--mono); }
/* عناصر تحمل نصًّا عربيًّا: خطّ عربي بلا تباعد حروف (التباعد يفصل الحروف المتّصلة) */
html[dir="rtl"] .sec-tag,
html[dir="rtl"] .hero__eyebrow,
html[dir="rtl"] .loader__status,
html[dir="rtl"] .hud--br,
html[dir="rtl"] .proj__meta,
html[dir="rtl"] .proj__link,
html[dir="rtl"] .footer__row,
html[dir="rtl"] .menu__link{ font-family:var(--ar); letter-spacing:0; }
html[dir="rtl"] .process__wrap{ padding-left:0; padding-right:60px; }
html[dir="rtl"] .process__line{ left:auto; right:0; }
html[dir="rtl"] .step__dot{ left:auto; right:-62px; }
/* الحاوية المقلوبة تصير ltr لعكس ترتيب العمودين، أمّا المحتوى فيعود rtl ليُقرأ عربيًّا */
html[dir="rtl"] .proj--flip{ direction:ltr; }
html[dir="rtl"] .proj > *{ direction:rtl; }
html[dir="rtl"] .btn__arrow,
html[dir="rtl"] .proj__link i{ transform:scaleX(-1); }
html[dir="rtl"] .proj:hover .proj__link i{ transform:scaleX(-1) translateX(7px); }
html[dir="rtl"] .btn--primary:hover .btn__arrow{ transform:scaleX(-1) translateX(6px); }
html[dir="rtl"] .langbtn.is-ar .langbtn__slider{ transform:translateX(-100%); }
html[dir="rtl"] .nav__links a::after,
html[dir="rtl"] .contact__socials a::after{ transform-origin:left; }
html[dir="rtl"] .nav__links a:hover::after,
html[dir="rtl"] .contact__socials a:hover::after{ transform-origin:right; }
html[dir="rtl"] .proj__link::after{ transform-origin:right; }
html[dir="rtl"] .rail__fill{ margin-inline-start:0; }
/* اللقطة تعتمد إحداثيات فيزيائية (inset / object-position) فلا تنعكس مع اتجاه الصفحة */
html[dir="rtl"] .pv-shot{ inset:0; object-position:50% 0; transform-origin:50% 0; }
/* تسمية المؤشر تنتقل إلى يسار الحلقة في الاتجاه العربي */
html[dir="rtl"] .cursor__label{ left:auto; right:100%; margin-left:0; margin-right:12px; }

/* ───────── 18. RESPONSIVE ───────── */
@media (max-width:1080px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .proj{ grid-template-columns:1fr; gap:30px; }
  /* عمود واحد ⇒ لا جهة تُقلب، والاتجاه يتبع لغة الصفحة */
  .proj--flip,
  html[dir="rtl"] .proj--flip{ direction:inherit; }
  .work__list{ gap:80px; }
  .work__more{ margin-top:80px; }
  .work__morebar{ margin-top:72px; }
  .hud--tl,.hud--tr{ display:none; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .manifesto{ height:230vh; }
  .showcase{ height:190vh; }
  .cap p{ min-height:auto; }
  .process__grid{ grid-template-columns:1fr; gap:56px; }
  .process__head{ position:static; }
  .process__wrap{ padding-left:42px; }
  html[dir="rtl"] .process__wrap{ padding-right:42px; padding-left:0; }
  .step__dot{ left:-44px; }
  html[dir="rtl"] .step__dot{ right:-44px; left:auto; }
  .hero__hud .hud--bl{ display:none; }
}
/* بين 561 و780: تصغير متدرّج يُبقي البريد ودائرتيه على سطر واحد */
@media (max-width:780px){
  .contact__row{ gap:14px; }
  .bigcta{ padding:18px 26px; font-size:clamp(.8rem,2.1vw,1.05rem); }
  .contact__circle{ width:64px; height:64px; }
  .contact__circle svg{ width:28px; height:28px; }
}
@media (max-width:560px){
  .hero__title{ font-size:clamp(2.3rem,11vw,4.2rem); letter-spacing:-.04em; }
  html[dir="rtl"] .hero__title{ font-size:clamp(2.4rem,11vw,4rem); }
  .hero__eyebrow{ font-size:9.5px; letter-spacing:.16em; padding:7px 14px; }
  .hero__hud .hud--br{ display:none; }
  .stats__grid{ grid-template-columns:1fr; }
  .btn{ padding:14px 26px; font-size:13px; }
  /* الخمس دوائر تتقاسم السطر بالتساوي فتبقى صفًّا واحدًا على أي عرض،
     بسقف 66px كي لا تتضخّم على الشاشات الأعرض ضمن هذا النطاق */
  .contact__row{ gap:10px; }
  .bigcta{ padding:13px 16px; font-size:clamp(.62rem,2.9vw,.8rem); }
  .contact__circle{ width:52px; height:52px; }
  .contact__circle svg{ width:23px; height:23px; }
  .contact__socials{ gap:20px; }
  .footer__row{ justify-content:center; text-align:center; }
}

/* أضيق الشاشات: البريد يأخذ سطره كاملًا وتنزل الدائرتان تحته جنبًا إلى جنب */
@media (max-width:360px){
  .bigcta{ order:-1; flex:0 0 100%; font-size:.78rem; }
  .contact__circle{ width:56px; height:56px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* اللقطة: تُلغى حركة التكبير تمامًا ويبقى تبدّل الشفافية بلا حركة */
  .pv-shot,
  .proj:hover .pv-shot{ transform:none !important; transition:none !important; }
}