/* ==========================================================================
   مؤسسة عبدالمحسن علي السهلي للتشغيل والصيانة
   نظام التصميم — ذهبي / فحمي، عربي RTL
   ========================================================================== */

:root{
  --gold:#c79245;
  --gold-2:#e0b060;
  --gold-3:#f0d09a;
  --gold-soft:rgba(199,146,69,.12);
  --gold-line:rgba(199,146,69,.28);

  --ink:#15130f;
  --ink-2:#241f19;
  --ink-3:#3a332a;

  --text:#1d1a15;
  --muted:#6b6357;
  --muted-2:#8d8478;

  --bg:#ffffff;
  --bg-2:#faf8f5;
  --bg-3:#f3efe8;
  --line:rgba(21,19,15,.10);
  --line-2:rgba(21,19,15,.06);

  --card:#ffffff;
  --shadow-sm:0 1px 2px rgba(21,19,15,.05), 0 2px 8px rgba(21,19,15,.04);
  --shadow:0 4px 12px rgba(21,19,15,.06), 0 12px 32px rgba(21,19,15,.07);
  --shadow-lg:0 8px 24px rgba(21,19,15,.09), 0 24px 64px rgba(21,19,15,.11);
  --shadow-gold:0 10px 30px rgba(199,146,69,.28);

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  --wrap:1240px;
  --gut:clamp(18px,4vw,40px);
  --sec:clamp(64px,9vw,120px);

  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:76px;

  --font:"Tajawal","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Tajawal","Noto Kufi Arabic",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16.5px; line-height:1.85;
  font-weight:400; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; display:block}
img{height:auto}
figure{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,textarea,select{font:inherit; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5{margin:0; font-family:var(--font-display); font-weight:800; line-height:1.34; letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:6px}
::selection{background:var(--gold); color:#fff}

/* ------------------------------ التخطيط ------------------------------ */
.wrap{width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto}
.sec{padding-block:var(--sec); position:relative}
.sec--tint{background:var(--bg-2)}
.sec--ink{background:var(--ink); color:#efe9df}
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff}

.grid{display:grid; gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} }

/* ------------------------------ العناوين ------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.79rem; font-weight:700; letter-spacing:.09em;
  color:var(--gold); text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px}
.sec--ink .eyebrow{color:var(--gold-2)}

.sec-title{font-size:clamp(1.7rem,3.6vw,2.75rem); margin-bottom:14px}
.sec-sub{color:var(--muted); font-size:1.03rem; max-width:62ch; margin:0}
.sec--ink .sec-sub{color:#b8ada0}
.sec-head{margin-bottom:clamp(34px,5vw,58px)}
.sec-head--center{text-align:center}
.sec-head--center .sec-sub{margin-inline:auto}
.sec-head--center .eyebrow::before{display:none}

/* شريط ذهبي تحت العنوان */
.rule{width:64px; height:3px; border-radius:3px; margin-top:20px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head--center .rule{margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ------------------------------ الأزرار ------------------------------ */
.btn{
  --bg-btn:var(--gold); --fg-btn:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:.86em 1.7em; border-radius:var(--r-pill);
  background:var(--bg-btn); color:var(--fg-btn);
  font-weight:700; font-size:.97rem; letter-spacing:.01em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s;
  box-shadow:0 4px 14px rgba(199,146,69,.3);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  opacity:0; transition:opacity .3s;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-gold)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0)}
.btn .ic{width:18px; height:18px; flex:none}
.wa-logo{display:block; width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(1); flex:none}
.btn .wa-logo{width:18px; height:18px}
.btn.wa-action{--bg-btn:#25d366; --fg-btn:#fff; box-shadow:0 8px 22px rgba(37,211,102,.28)}
.btn.wa-action::after{background:#1ebe5d}

.btn--ghost{
  --bg-btn:transparent; --fg-btn:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn--ghost::after{background:var(--gold-soft)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold); color:var(--gold)}
.btn--light{--bg-btn:#fff; --fg-btn:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn--light::after{background:var(--gold-3)}
.btn--outline-light{
  --bg-btn:transparent; --fg-btn:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)
}
.btn--outline-light::after{background:rgba(255,255,255,.14)}
.btn--sm{padding:.62em 1.25em; font-size:.88rem}

/* ------------------------------ الترويسة ------------------------------ */
.topbar{
  background:var(--ink); color:#c9bfb2; font-size:.83rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:42px; flex-wrap:wrap}
.topbar a{display:inline-flex; align-items:center; gap:7px; transition:color .2s}
.topbar a:hover{color:var(--gold-2)}
.topbar .ic{width:15px; height:15px; color:var(--gold)}
.topbar__set{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
@media(max-width:760px){ .topbar{display:none} }

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow .3s, background .3s, border-color .3s;
}
.nav.is-stuck{box-shadow:0 4px 24px rgba(21,19,15,.08); background:rgba(255,255,255,.95)}
.nav__in{display:flex; align-items:center; gap:clamp(14px,2.5vw,34px); min-height:var(--nav-h)}
.nav__logo{display:flex; align-items:center; flex:none; padding-block:10px}
.nav__logo img{height:clamp(42px,5.2vw,54px); width:auto; transition:height .3s var(--ease)}
.nav.is-stuck .nav__logo img{height:clamp(38px,4.6vw,46px)}

.nav__links{display:flex; align-items:center; gap:clamp(4px,1vw,10px)}
.nav__links a{
  position:relative; padding:.55em .85em; border-radius:var(--r-sm);
  font-size:.945rem; font-weight:600; color:var(--muted);
  white-space:nowrap; transition:color .22s;
}
.nav__links a::after{
  content:""; position:absolute; inset-inline:.85em; bottom:.28em; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--ease-out);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after,
.nav__links a.is-active::after{transform:scaleX(1)}
.nav__links a.is-active{color:var(--gold)}
.nav__cta{flex:none; margin-inline-start:8px}
@media(max-width:1320px){ .nav__links,.nav__cta{display:none} }

.nav__burger{
  display:none; margin-inline-start:auto; width:44px; height:44px;
  align-items:center; justify-content:center; border-radius:var(--r-sm);
  color:var(--ink); transition:background .2s;
}
.nav__burger:hover{background:var(--bg-3)}
.nav__burger .ic{width:24px; height:24px}
@media(max-width:1320px){ .nav__burger{display:flex} }

/* الشعار لوحة مركّبة (رمز + اسم + وصف)؛ على الجوال كان يهبط إلى 42px
   لأن 5.2vw تقلّ عن الحد الأدنى، فيصير النص داخله غير مقروء.
   الشريط هنا شبه فارغ (الروابط والأدوات مخفية) فنمنحه ارتفاعاً أكبر. */
@media(max-width:1320px){
  .nav__logo{padding-block:7px}
  .nav__logo img{height:54px}
  .nav.is-stuck .nav__logo img{height:46px}
}

/* شريط تقدّم القراءة */
.progress{position:absolute; inset-inline:0; bottom:-1px; height:2.5px; background:transparent; pointer-events:none}
.progress__bar{
  height:100%; width:100%; transform:scaleX(0); transform-origin:right;
  will-change:transform;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
}

/* القائمة الجانبية */
.drawer{
  position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none;
}
.drawer.is-open{visibility:visible; pointer-events:auto}
.drawer__scrim{position:absolute; inset:0; background:rgba(21,19,15,.55);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .35s var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(88vw,340px);
  background:var(--bg); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .42s var(--ease-out);
  display:flex; flex-direction:column; overflow-y:auto;
}
[dir="rtl"] .drawer__panel{transform:translateX(-100%)}
[dir="ltr"] .drawer__panel{transform:translateX(100%)}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__top{display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line-2)}
.drawer__top img{height:42px; width:auto}
.drawer__close{width:42px; height:42px; display:grid; place-items:center;
  border-radius:var(--r-sm); transition:background .2s}
.drawer__close:hover{background:var(--bg-3)}
.drawer__close .ic{width:22px; height:22px}
.drawer nav{padding:14px 12px; display:flex; flex-direction:column; gap:2px}
.drawer nav a{
  padding:.85em 1em; border-radius:var(--r-sm); font-weight:600; color:var(--text);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .2s, color .2s;
}
.drawer nav a > .ic{width:20px; height:20px; flex:none}
.drawer nav a:hover,.drawer nav a.is-active{background:var(--gold-soft); color:var(--gold)}
.drawer__foot{margin-top:auto; padding:20px; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:12px}
.drawer__foot a.line{display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--muted)}
.drawer__foot .ic{width:17px; height:17px; color:var(--gold)}

/* ------------------------------ الواجهة الرئيسية ------------------------------ */
.hero{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  min-height:clamp(540px,86svh,860px); display:flex; align-items:center;
  padding-block:clamp(64px,10vh,110px);
  padding-inline:env(safe-area-inset-right) env(safe-area-inset-left);
}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.08); will-change:transform;
  animation:kenburns 24s var(--ease) infinite alternate;
}
.hero__bg picture{display:contents}
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(1.5%,-1.5%,0)}
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to left, rgba(21,19,15,.95) 8%, rgba(21,19,15,.72) 44%, rgba(21,19,15,.28) 78%),
    linear-gradient(to top, rgba(21,19,15,.86), transparent 55%);
}
.hero__glow{
  position:absolute; z-index:1; inset-inline-start:-10%; top:-20%;
  width:60vw; height:60vw; max-width:760px; max-height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(199,146,69,.24), transparent 68%);
  filter:blur(28px); pointer-events:none;
  animation:float-slow 14s ease-in-out infinite alternate;
}
@keyframes float-slow{ from{transform:translate3d(0,0,0)} to{transform:translate3d(4%,6%,0)} }

.hero__in{position:relative; z-index:2}
.hero__box{max-width:660px; margin-inline-end:auto}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:.42em 1.05em;
  border-radius:var(--r-pill); background:rgba(199,146,69,.16);
  border:1px solid var(--gold-line); color:var(--gold-3);
  font-size:.83rem; font-weight:700; letter-spacing:.05em; margin-bottom:22px;
}
.hero__eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold-2);
  position:relative; flex:none;
}
.hero__eyebrow .dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--gold-2); will-change:transform,opacity;
  animation:pulse 2.4s cubic-bezier(.22,.68,.28,1) infinite;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:.6}
  70%{transform:scale(4.2); opacity:0}
  100%{transform:scale(4.2); opacity:0}
}

.hero h1{
  font-size:clamp(2rem,5.1vw,3.55rem); line-height:1.24; color:#fff;
  margin-bottom:18px; text-wrap:balance;
}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 62%, rgba(199,146,69,.42) 62%);
  padding-inline:.1em;
}
.hero__lead{
  font-size:clamp(1rem,1.35vw,1.14rem); color:#d3c9bc; max-width:56ch;
  margin-bottom:34px; line-height:1.9;
}
.hero__acts{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px}

.hero__badges{display:flex; flex-wrap:wrap; gap:12px}
.hero__badge{
  display:flex; align-items:center; gap:11px; padding:.78em 1.15em;
  border-radius:var(--r); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px);
  font-size:.9rem; font-weight:600; color:#e8e0d5;
  transition:transform .3s var(--ease-out), background .3s, border-color .3s;
}
.hero__badge:hover{transform:translateY(-3px); background:rgba(199,146,69,.16); border-color:var(--gold-line)}
.hero__badge .ic{width:21px; height:21px; color:var(--gold-2); flex:none}

.hero__scroll{
  position:absolute; z-index:3; bottom:26px; inset-inline-start:50%; transform:translateX(-50%);
  display:grid; place-items:center; gap:7px; color:rgba(255,255,255,.55); font-size:.74rem;
  letter-spacing:.14em; font-weight:600;
}
.hero__mouse{width:24px; height:38px; border:1.8px solid rgba(255,255,255,.35); border-radius:14px; position:relative}
.hero__mouse::after{content:""; position:absolute; top:7px; inset-inline-start:50%; margin-inline-start:-2px;
  width:4px; height:7px; border-radius:2px; background:var(--gold-2); animation:wheel 1.9s infinite}
@keyframes wheel{0%{opacity:0; transform:translateY(0)} 35%{opacity:1} 100%{opacity:0; transform:translateY(12px)}}
@media(max-width:700px){ .hero__scroll{display:none} }

/* ------------------------------ شريط الإحصاءات ------------------------------ */
.stats{
  position:relative; z-index:5; margin-top:calc(var(--sec) * -.42);
}
.stats__card{
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(24px,3.4vw,42px); display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(4,1fr); border:1px solid var(--line-2);
}
@media(max-width:820px){ .stats__card{grid-template-columns:repeat(2,1fr)} }
.stat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; position:relative}
.stat + .stat::before{
  content:""; position:absolute; inset-inline-end:100%; top:14%; bottom:14%;
  width:1px; background:var(--line); margin-inline-end:clamp(8px,1vw,13px);
}
@media(max-width:820px){ .stat:nth-child(odd)::before{display:none} }
.stat__ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold); margin-bottom:6px;
}
.stat__ic .ic{width:23px; height:23px}
.stat__n{
  font-family:var(--font-display); font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800;
  line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:1px; direction:ltr;
}
.stat__n .sfx{color:var(--gold); font-size:.62em}
.stat__l{font-size:.9rem; color:var(--muted); font-weight:600; line-height:1.5}


/* ---------- استجابة ما يظهر أولاً (ترويسة + واجهة + أرقام) ----------
   هذه القواعد جزء من الـ CSS الحرج المضمّن، حتى لا يقفز التخطيط على الجوال */
@media(max-width:1080px){
  :root{ --sec:clamp(56px,8vw,92px); --nav-h:68px }
}
@media(max-width:900px){
  :root{ --gut:clamp(16px,4.2vw,28px) }
  .sec-title{font-size:clamp(1.55rem,4.6vw,2.1rem)}
  .sec-sub{font-size:.98rem}
  .hero__lead{font-size:1rem; margin-bottom:28px}
  .stats{margin-top:calc(var(--sec) * -.34)}
}
@media(max-width:680px){
  :root{ --sec:clamp(48px,11vw,72px); --r-lg:18px; --r-xl:22px }
  body{font-size:15.8px; line-height:1.8}

  .hero{min-height:clamp(500px,80svh,700px)}
  .hero h1{font-size:clamp(1.65rem,7.2vw,2.2rem); line-height:1.35}
  .hero__eyebrow{font-size:.76rem; padding:.38em .9em; margin-bottom:16px}
  .hero__lead{font-size:.96rem; line-height:1.85; margin-bottom:26px}
  .hero__acts{gap:10px; margin-bottom:32px}
  .hero__acts .btn{flex:1 1 100%; justify-content:center}
  .hero__badges{gap:8px}
  .hero__badge{flex:1 1 100%; font-size:.86rem; padding:.7em 1em}

  .stats{margin-top:calc(var(--sec) * -.3)}
  .stats__card{grid-template-columns:repeat(2,1fr); gap:20px 12px; padding:22px 16px}
  .stat + .stat::before{display:none}
  .stat__ic{width:40px; height:40px; border-radius:12px; margin-bottom:2px}
  .stat__ic .ic{width:20px; height:20px}
  .stat__n{font-size:1.75rem}
  .stat__l{font-size:.8rem; line-height:1.45}
}
@media(max-width:420px){
  :root{ --gut:15px }
  .hero h1{font-size:1.55rem}
  .stats__card{padding:18px 12px; gap:18px 8px}
  .stat__n{font-size:1.55rem}
  .stat__l{font-size:.76rem}
  .sec-title{font-size:1.42rem}
}
@media(hover:none){
  .nav__links a,.drawer nav a{min-height:44px}
  .fab{width:54px; height:54px}
  .fabs{
    left:max(14px, env(safe-area-inset-left));
    right:max(14px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
  }
}

/* أدوات الترويسة */
.nav__tools{display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex:none}
@media(max-width:1320px){ .nav__tools{display:none} }

.nav__pdf{white-space:nowrap}
.nav__pdf .ic{width:16px; height:16px}
@media(max-width:1480px){ .nav__pdf{padding:.5em .95em} }

/* زر اللغة */
.langbtn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:.48em .9em; border-radius:var(--r-pill);
  font-size:.86rem; font-weight:700; color:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:color .25s, box-shadow .25s, background .25s;
}
.langbtn:hover{color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold); background:var(--gold-soft)}
.langbtn__globe{display:inline-flex}
.langbtn__globe .ic{width:16px; height:16px}
.langbtn__t{min-width:3.6em; text-align:center}

/* زر اللغة داخل القائمة الجانبية للجوال */
.drawer__lang{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:.7em 1em; border-radius:var(--r-sm); font-weight:700; font-size:.92rem;
  box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-3);
  transition:color .25s, box-shadow .25s, background .25s;
}
.drawer__lang:hover{color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold); background:var(--gold-soft)}
.drawer__lang .ic{width:17px; height:17px}

/* ------------------------------ من نحن ------------------------------ */
.about{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center}
@media(max-width:940px){ .about{grid-template-columns:1fr} }

.about__media{position:relative}
.about__media .shot{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative;
}
.about__media .shot img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease)}
.about__media .shot:hover img{transform:scale(1.05)}
.about__media .shot--sm{
  position:absolute; inset-inline-end:-8%; bottom:-8%; width:52%;
  border:7px solid var(--bg); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
}
.about__media .shot--sm img{aspect-ratio:4/3}
@media(max-width:520px){ .about__media .shot--sm{display:none} }

.about__badge{
  position:absolute; z-index:3; inset-inline-start:-6%; top:8%;
  background:var(--gold); color:#fff; border-radius:var(--r);
  padding:16px 20px; box-shadow:var(--shadow-gold); text-align:center; min-width:120px;
}
.about__badge b{display:block; font-family:var(--font-display); font-size:1.85rem; line-height:1}
.about__badge span{font-size:.78rem; font-weight:600; opacity:.92}
@media(max-width:520px){ .about__badge{inset-inline-start:4%; top:4%} }

.facts{display:grid; gap:1px; background:var(--line); border-radius:var(--r);
  overflow:hidden; margin-top:30px; border:1px solid var(--line)}
/* شبكة بعمودين ثابتين: القيمة الطويلة تلتفّ داخل عمودها ولا تزحزح العنوان.
   مع flex-wrap كان صفّ «النشاط» يلتفّ فيختلّ محاذاة عنوانه عن باقي الصفوف. */
.fact{
  background:var(--bg); padding:15px 18px;
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:4px 14px;
  align-items:baseline;
}
.fact__k{font-size:.83rem; color:var(--muted-2); font-weight:600; text-align:start}
.fact__v{font-weight:700; color:var(--ink); font-size:.97rem; text-align:start; min-width:0}

/* ------------------------------ الرؤية والرسالة ------------------------------ */
.vm{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,30px)}
@media(max-width:760px){ .vm{grid-template-columns:1fr} }
.vm__card{
  position:relative; overflow:hidden; padding:clamp(28px,3.4vw,44px);
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-out), box-shadow .4s;
}
.vm__card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2)); transform:scaleY(0);
  transform-origin:top; transition:transform .5s var(--ease-out);
}
.vm__card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.vm__card:hover::before{transform:scaleY(1)}
.vm__ic{
  width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold),var(--gold-2)); color:#fff;
  box-shadow:0 8px 22px rgba(199,146,69,.3); margin-bottom:20px;
}
.vm__ic .ic{width:27px; height:27px}
.vm__card h3{font-size:1.35rem; margin-bottom:12px}
.vm__card p{color:var(--muted); font-size:1rem}
.vm__q{position:absolute; inset-inline-end:22px; top:18px; width:54px; height:54px;
  color:var(--gold); opacity:.09}
.vm__q .ic{width:100%; height:100%}

/* ------------------------------ الخدمات ------------------------------ */
.svc{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s, border-color .35s;
}
.svc:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:var(--gold-line)}
.svc__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3)}
.svc__media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .5s}
.svc:hover .svc__media img{transform:scale(1.09)}
.svc__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,19,15,.72), rgba(21,19,15,.06) 62%);
}
.svc__num{
  position:absolute; z-index:2; inset-inline-end:16px; top:14px;
  font-family:var(--font-display); font-size:2.5rem; font-weight:800; line-height:1;
  color:rgba(255,255,255,.9); text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.svc__ic{
  position:absolute; z-index:2; inset-inline-start:18px; bottom:16px;
  width:56px; height:56px; border-radius:17px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold),var(--gold-2)); color:#fff;
  box-shadow:0 8px 20px rgba(199,146,69,.36);
  transition:transform .45s var(--ease-out);
}
.svc:hover .svc__ic{transform:translateY(-4px) rotate(-6deg)}
.svc__ic .ic{width:26px; height:26px}
.svc__body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.svc__body h3{font-size:1.16rem; margin-bottom:10px; transition:color .25s}
.svc:hover .svc__body h3{color:var(--gold)}
.svc__body p{color:var(--muted); font-size:.94rem; margin-bottom:16px}
.svc__list{display:flex; flex-direction:column; gap:8px; margin-top:auto}
.svc__list li{display:flex; align-items:flex-start; gap:9px; font-size:.885rem; color:var(--muted)}
.svc__list .ic{width:16px; height:16px; color:var(--gold); flex:none; margin-top:5px}

/* ------------------------------ منظومة التشغيل ------------------------------ */
.ops{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,4.6vw,64px); align-items:center}
@media(max-width:940px){ .ops{grid-template-columns:1fr} }
.ops__media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative}
.ops__media img{width:100%; aspect-ratio:5/4; object-fit:cover}
.ops__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(199,146,69,.2), transparent 55%)}

.ops__list{display:flex; flex-direction:column; gap:12px}
.op{
  display:flex; align-items:center; gap:16px; padding:13px 15px;
  border-radius:var(--r); background:var(--card); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.op:hover{box-shadow:var(--shadow); border-color:var(--gold-line)}
[dir="rtl"] .op:hover{transform:translateX(6px)}
[dir="ltr"] .op:hover{transform:translateX(-6px)}
.op__thumb{width:82px; height:60px; border-radius:11px; overflow:hidden; flex:none; background:var(--bg-3)}
.op__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.op:hover .op__thumb img{transform:scale(1.12)}
.op__t{font-weight:700; font-size:1rem; color:var(--ink)}
.op__n{
  margin-inline-start:auto; font-family:var(--font-display); font-weight:800;
  font-size:1.05rem; color:var(--gold); opacity:.5; flex:none;
}

/* ------------------------------ الجودة والسلامة ------------------------------ */
.quality{position:relative; overflow:hidden}
.quality__bg{position:absolute; inset:0; z-index:0}
.quality__bg img{width:100%; height:100%; object-fit:cover; object-position:center 62%}
.quality__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to left, rgba(21,19,15,.96) 30%, rgba(21,19,15,.82))}
.quality__in{position:relative; z-index:2}
.qsteps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:38px}
.qstep{
  display:flex; align-items:center; gap:15px; padding:17px 19px;
  border-radius:var(--r); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11); backdrop-filter:blur(8px);
  transition:transform .4s var(--ease-out), background .35s, border-color .35s;
}
.qstep:hover{transform:translateY(-5px); background:rgba(199,146,69,.16); border-color:var(--gold-line)}
.qstep__n{
  font-family:var(--font-display); font-size:1.9rem; font-weight:800; line-height:1;
  color:var(--gold-2); flex:none; direction:ltr;
}
.qstep__t{font-size:.95rem; font-weight:600; color:#e6ded3; line-height:1.55}

/* ------------------------------ القدرات الفنية ------------------------------ */
.cap{
  text-align:center; padding:clamp(26px,3vw,38px) 22px; border-radius:var(--r-lg);
  background:var(--ink-2); color:#e6ded3; border:1px solid rgba(255,255,255,.08);
  position:relative; overflow:hidden;
  transition:transform .42s var(--ease-out), box-shadow .42s, background .35s;
}
.cap::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(120% 90% at 50% 0%, rgba(199,146,69,.28), transparent 62%);
}
.cap:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); background:var(--ink-3)}
.cap:hover::before{opacity:1}
.cap__ic{
  position:relative; z-index:1; width:66px; height:66px; margin:0 auto 18px;
  border-radius:20px; display:grid; place-items:center;
  background:rgba(199,146,69,.14); border:1px solid var(--gold-line); color:var(--gold-2);
  transition:transform .45s var(--ease-out), background .35s;
}
.cap:hover .cap__ic{transform:scale(1.07) rotate(-5deg); background:rgba(199,146,69,.24)}
.cap__ic .ic{width:31px; height:31px}
.cap h3{position:relative; z-index:1; font-size:1.03rem; color:#fff; line-height:1.6}
.cap__note{
  margin-top:34px; text-align:center; color:var(--muted); font-size:1rem;
  display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap;
}
.cap__note .ic{width:20px; height:20px; color:var(--gold)}
.sec--ink .cap__note{color:#b8ada0}

/* ------------------------------ آلية إدارة المشروع ------------------------------ */
.flow{position:relative; display:grid; gap:0}
.flow::before{
  content:""; position:absolute; inset-block:22px; inset-inline-start:31px; width:2px;
  background:linear-gradient(180deg,var(--gold-line),var(--gold),var(--gold-line));
}
@media(max-width:640px){ .flow::before{inset-inline-start:23px} }
.step{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.4vw,28px);
  padding-block:clamp(14px,2vw,20px);
}
.step__dot{
  position:relative; z-index:2; width:64px; height:64px; border-radius:20px; flex:none;
  display:grid; place-items:center; background:var(--card);
  border:2px solid var(--gold-line); color:var(--gold);
  font-family:var(--font-display); font-weight:800; font-size:1.2rem; direction:ltr;
  box-shadow:var(--shadow-sm); transition:all .45s var(--ease-out);
}
@media(max-width:640px){ .step__dot{width:48px; height:48px; font-size:1rem; border-radius:15px} }
.step.is-in .step__dot{background:linear-gradient(140deg,var(--gold),var(--gold-2));
  color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(199,146,69,.32)}
.step__card{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px); box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out), box-shadow .4s, border-color .35s;
}
.step__card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-line)}
.step__card h3{font-size:1.14rem; margin-bottom:12px}
.step__pts{display:flex; flex-wrap:wrap; gap:9px}
.step__pts li{
  display:inline-flex; align-items:center; gap:7px; padding:.4em .9em;
  border-radius:var(--r-pill); background:var(--gold-soft); color:var(--ink-3);
  font-size:.855rem; font-weight:600;
}
.step__pts .ic{width:14px; height:14px; color:var(--gold)}

/* ------------------------------ المرشِّحات ------------------------------ */
.filters{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:38px}
.filter{
  padding:.55em 1.25em; border-radius:var(--r-pill); font-size:.9rem; font-weight:700;
  color:var(--muted); background:var(--bg-3); border:1px solid transparent;
  transition:all .28s var(--ease);
}
.filter:hover{color:var(--ink); background:var(--gold-soft)}
.filter.is-on{background:var(--gold); color:#fff; box-shadow:0 5px 16px rgba(199,146,69,.3)}
.sec--ink .filter{background:rgba(255,255,255,.07); color:#b8ada0}
.sec--ink .filter:hover{background:rgba(199,146,69,.2); color:#fff}
.sec--ink .filter.is-on{background:var(--gold); color:#fff}

/* عناصر مخفية بالتصفية */
.is-hidden{display:none !important}

/* ------------------------------ المشاريع ------------------------------ */
.prj{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s, border-color .35s;
}
.prj:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:var(--gold-line)}
.prj__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3)}
.prj__media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.prj:hover .prj__media img{transform:scale(1.08)}
.prj__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,19,15,.6), transparent 58%)}
.prj__tag{
  position:absolute; z-index:2; inset-inline-start:14px; top:13px;
  padding:.34em .9em; border-radius:var(--r-pill); font-size:.76rem; font-weight:700;
  background:rgba(199,146,69,.94); color:#fff; backdrop-filter:blur(6px);
}
.prj__loc{
  position:absolute; z-index:2; inset-inline-start:14px; bottom:12px;
  display:inline-flex; align-items:center; gap:6px; color:#fff;
  font-size:.85rem; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.prj__loc .ic{width:15px; height:15px; color:var(--gold-2)}
.prj__body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; gap:9px}
.prj__body h3{font-size:1.08rem; line-height:1.5; transition:color .25s}
.prj:hover .prj__body h3{color:var(--gold)}
.prj__client{font-size:.86rem; color:var(--gold); font-weight:700}
.prj__meta{
  margin-top:auto; padding-top:13px; border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.prj__scope{font-size:.86rem; color:var(--muted)}
.prj__dur{
  display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700;
  color:var(--ink-3); background:var(--gold-soft); padding:.3em .8em; border-radius:var(--r-pill);
}
.prj__dur .ic{width:14px; height:14px; color:var(--gold)}

/* ------------------------------ العملاء ------------------------------ */
.clients{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px)}
@media(max-width:900px){ .clients{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px){ .clients{grid-template-columns:repeat(2,1fr)} }
.client{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,30px) 18px; text-align:center; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:transform .42s var(--ease-out), box-shadow .42s, border-color .35s;
}
.client:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold-line)}
.client__logo{
  width:clamp(80px,9vw,104px); height:clamp(80px,9vw,104px); display:grid; place-items:center;
}
.client__logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1) opacity(.62); transition:filter .45s var(--ease), transform .45s var(--ease-out);
}
.client:hover .client__logo img{filter:grayscale(0) opacity(1); transform:scale(1.06)}
.client__name{font-size:.9rem; font-weight:700; color:var(--ink-3); line-height:1.55}

/* ------------------------------ الشهادات ------------------------------ */
/* .certs صارت مسار سلايدر: التخطيط من .slider__track */
.cert{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm); text-align:center; cursor:zoom-in;
  display:flex; flex-direction:column;
  transition:transform .42s var(--ease-out), box-shadow .42s, border-color .35s;
}
.cert:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold-line)}
.cert__img{background:var(--bg-3); padding:14px; position:relative; overflow:hidden}
.cert__img img{
  width:100%; aspect-ratio:3/4; object-fit:contain; border-radius:6px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .55s var(--ease);
}
.cert:hover .cert__img img{transform:scale(1.04)}
.cert__zoom{
  position:absolute; inset-inline-end:18px; top:18px; width:32px; height:32px;
  border-radius:50%; background:rgba(199,146,69,.94); color:#fff;
  display:grid; place-items:center; opacity:0; transform:scale(.8);
  transition:all .35s var(--ease-out);
}
.cert:hover .cert__zoom{opacity:1; transform:scale(1)}
.cert__zoom .ic{width:16px; height:16px}
.cert__body{padding:13px 14px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.cert__t{font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.5}
.cert__i{font-size:.78rem; color:var(--muted-2)}

/* ------------------------------ معرض الأعمال ------------------------------ */
/* .gal صارت مسار سلايدر: التخطيط من .slider__track */
.gal__it{
  position:relative; overflow:hidden; border-radius:var(--r); cursor:zoom-in;
  background:var(--bg-3); aspect-ratio:3/2; box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s;
}
.gal__it:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.gal__it img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.gal__it:hover img{transform:scale(1.09)}
.gal__ov{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
  background:linear-gradient(to top, rgba(21,19,15,.86), rgba(21,19,15,.05) 60%);
  opacity:0; transition:opacity .4s var(--ease);
}
.gal__it:hover .gal__ov{opacity:1}
.gal__cap{color:#fff; font-size:.92rem; font-weight:700; transform:translateY(9px);
  transition:transform .45s var(--ease-out)}
.gal__it:hover .gal__cap{transform:translateY(0)}

/* ------------------------------ نافذة العرض (Lightbox) ------------------------------ */
.lb{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(12,10,8,.93); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
  padding:clamp(16px,4vw,50px);
}
.lb.is-open{opacity:1; visibility:visible}
.lb__fig{max-width:min(1000px,92vw); max-height:86vh; display:flex; flex-direction:column; gap:14px;
  transform:scale(.94); transition:transform .4s var(--ease-out)}
.lb.is-open .lb__fig{transform:scale(1)}
.lb__fig img{max-width:100%; max-height:74vh; width:auto; margin-inline:auto;
  object-fit:contain; border-radius:var(--r); background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lb__cap{text-align:center; color:#e6ded3; font-size:.96rem; font-weight:600}
.lb__cap small{display:block; color:#9d948a; font-weight:400; font-size:.83rem; margin-top:4px}
.lb__cap a{color:var(--gold-2); text-decoration:underline; text-underline-offset:3px}
.lb__x,.lb__nav{
  position:absolute; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.16);
  transition:background .25s, transform .25s;
}
.lb__x:hover,.lb__nav:hover{background:var(--gold); transform:scale(1.08)}
.lb__x{top:clamp(14px,3vw,26px); inset-inline-end:clamp(14px,3vw,26px)}
.lb__nav{top:50%; margin-top:-24px}
.lb__nav--prev{inset-inline-end:clamp(10px,2.4vw,26px)}
.lb__nav--next{inset-inline-start:clamp(10px,2.4vw,26px)}
.lb__nav--next .ic{transform:rotate(180deg)}
.lb__x .ic,.lb__nav .ic{width:22px; height:22px}
@media(max-width:640px){ .lb__nav{width:40px; height:40px; margin-top:-20px} }

/* ------------------------------ التواصل ------------------------------ */
.contact{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4.4vw,60px); align-items:start}
@media(max-width:940px){ .contact{grid-template-columns:1fr} }

.cinfo{display:flex; flex-direction:column; gap:14px}
.cinfo__it{
  display:flex; gap:16px; align-items:flex-start; padding:18px 20px;
  border-radius:var(--r); background:var(--card); border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.cinfo__it:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-line)}
.cinfo__ic{
  width:48px; height:48px; border-radius:15px; flex:none; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold); transition:all .35s var(--ease-out);
}
.cinfo__it:hover .cinfo__ic{background:var(--gold); color:#fff; transform:rotate(-6deg)}
.cinfo__ic .ic{width:22px; height:22px}
.cinfo__ic .wa-logo{width:24px; height:24px}
.cinfo__it--wa .cinfo__ic{background:#25d366; color:#fff}
.cinfo__it--wa:hover .cinfo__ic{background:#1ebe5d}
.cinfo__k{display:block; font-size:.8rem; color:var(--muted-2); font-weight:600; margin-bottom:3px}
.cinfo__v{display:block; font-weight:700; color:var(--ink); font-size:1rem; word-break:break-word; direction:ltr; text-align:start}
.cinfo__v--rtl{direction:rtl}
[dir="ltr"] .cinfo__v--rtl{direction:ltr}
a.cinfo__it{cursor:pointer}

.form{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,40px); box-shadow:var(--shadow);
}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){ .form__grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.87rem; font-weight:700; color:var(--ink-3)}
.field label .req{color:var(--gold)}
.field input,.field textarea,.field select{
  width:100%; padding:.82em 1em; border-radius:var(--r-sm);
  background:var(--bg-2); border:1.5px solid var(--line); color:var(--text);
  font-size:.96rem; transition:border-color .25s, background .25s, box-shadow .25s;
}
.field textarea{resize:vertical; min-height:132px; line-height:1.75}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:var(--bg);
  box-shadow:0 0 0 4px rgba(199,146,69,.14);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2); opacity:.75}
.field.has-err input,.field.has-err textarea{border-color:#c0392b; box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.field__err{font-size:.8rem; color:#c0392b; font-weight:600; min-height:1em}
.form__foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px}
.form__note{font-size:.83rem; color:var(--muted-2)}
.hp{position:absolute !important; inset-inline-start:-9999px; opacity:0; pointer-events:none}

/* ---- حقل إرفاق ملف ---- */
.field--att label .opt{
  font-weight:600; font-size:.76rem; color:var(--muted-2);
  background:var(--bg-3); border-radius:var(--r-pill); padding:2px 9px; margin-inline-start:6px;
}
.att{position:relative}
.att__input{
  position:absolute !important; width:1px; height:1px; padding:0 !important;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 !important;
}
.att__drop{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:16px 18px; border-radius:var(--r-sm); background:var(--bg-2);
  border:1.5px dashed var(--line); color:var(--muted);
  transition:border-color .25s, background .25s, box-shadow .25s;
  font-weight:500;
}
.att__drop:hover{border-color:var(--gold); background:var(--bg)}
.att__input:focus-visible + .att__drop,
.att.is-over .att__drop{
  border-color:var(--gold); background:var(--bg); border-style:solid;
  box-shadow:0 0 0 4px rgba(199,146,69,.14);
}
.att__ic{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; background:var(--gold-soft); color:var(--gold);
}
.att__ic .ic{width:20px; height:20px}
.att__txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.att__txt b{font-size:.92rem; font-weight:700; color:var(--ink-3)}
.att__txt small{font-size:.78rem; color:var(--muted-2); line-height:1.6}

.att__file{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-sm);
  background:var(--bg); border:1.5px solid var(--gold-line);
}
.att.has-file .att__drop{display:none}
.att__fic{
  flex:none; width:38px; height:38px; border-radius:10px; overflow:hidden;
  display:grid; place-items:center; background:var(--gold-soft); color:var(--gold);
}
.att__fic .ic{width:19px; height:19px}
.att__fic img{width:100%; height:100%; object-fit:cover; display:block}
.att__meta{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.att__meta b{
  font-size:.9rem; font-weight:700; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:start;
}
.att__meta small{font-size:.77rem; color:var(--muted-2)}
.att__x{
  flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:var(--bg-3); color:var(--muted);
  transition:background .2s, color .2s;
}
.att__x:hover{background:#c0392b; color:#fff}
.att__x .ic{width:16px; height:16px}
.field.has-err .att__drop,
.field.has-err .att__file{border-color:#c0392b}
@media(max-width:560px){
  .att__drop{padding:14px; gap:11px}
  .att__txt small{font-size:.74rem}
}


.alert{
  display:flex; align-items:flex-start; gap:12px; padding:15px 18px; border-radius:var(--r);
  font-size:.94rem; font-weight:600; margin-bottom:20px; line-height:1.7;
}
.alert .ic{width:20px; height:20px; flex:none; margin-top:3px}
.alert--ok{background:rgba(38,140,86,.1); color:#1e7a4a; border:1px solid rgba(38,140,86,.24)}
.alert--err{background:rgba(192,57,43,.09); color:#a93226; border:1px solid rgba(192,57,43,.22)}
.alert[hidden]{display:none}

/* شريط دعوة للتواصل */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(125deg,var(--ink),var(--ink-3)); color:#fff;
  padding:clamp(34px,5vw,64px); text-align:center; box-shadow:var(--shadow-lg);
}
.cta::before{
  content:""; position:absolute; inset-inline-end:-14%; top:-46%;
  width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(199,146,69,.34), transparent 66%); filter:blur(20px);
}
.cta::after{
  content:""; position:absolute; inset-inline-start:-10%; bottom:-52%;
  width:44%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(199,146,69,.2), transparent 68%); filter:blur(22px);
}
.cta__in{position:relative; z-index:2}
.cta h2{font-size:clamp(1.5rem,3.2vw,2.3rem); color:#fff; margin-bottom:12px}
.cta p{color:#c4b9ab; max-width:56ch; margin-inline:auto; margin-bottom:28px}
.cta__acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ------------------------------ التذييل ------------------------------ */
.foot{background:var(--ink); color:#bdb3a5; padding-top:clamp(50px,7vw,80px); font-size:.93rem}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:clamp(26px,3.4vw,50px)}
@media(max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot__grid{grid-template-columns:1fr} }
.foot .foot__h{color:#fff; font-size:1rem; margin-bottom:18px; position:relative; padding-bottom:11px}
.foot .foot__h::after{content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:34px; height:2px; background:var(--gold); border-radius:2px}
.foot__logo img{height:62px; width:auto; margin-bottom:18px}
.foot p{line-height:1.9; margin-bottom:18px}
.foot__links{display:flex; flex-direction:column; gap:10px}
.foot__links a{display:inline-flex; align-items:center; gap:8px; transition:color .22s, transform .22s}
.foot__links a::before{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.5; transition:opacity .22s; flex:none}
.foot__links a:hover{color:var(--gold-2)}
[dir="rtl"] .foot__links a:hover{transform:translateX(4px)}
[dir="ltr"] .foot__links a:hover{transform:translateX(-4px)}
.foot__links a:hover::before{opacity:1}
.foot__c{display:flex; flex-direction:column; gap:14px}
.foot__c a,.foot__c div{display:flex; align-items:flex-start; gap:11px; line-height:1.7}
.foot__c .ic{width:17px; height:17px; color:var(--gold); flex:none; margin-top:5px}
.foot__c a:hover{color:var(--gold-2)}
.foot__c .val{direction:ltr; text-align:start}
.foot__bar{
  margin-top:clamp(38px,5vw,58px); border-top:1px solid rgba(255,255,255,.09);
  padding-block:22px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:.86rem; color:#a99f92;
}
.foot__bar a{color:#c2b8aa; transition:color .2s}
.foot__bar a:hover{color:var(--gold-2)}
.foot__credit{display:inline-flex;align-items:center;gap:5px;direction:ltr}
.foot__credit strong{color:var(--gold-2);font-weight:700}
.foot__credit a{color:var(--gold-2)}

/* ------------------------------ أزرار عائمة ------------------------------ */
/* شريط سفلي بعرض الصفحة: الواتساب يميناً والعودة للأعلى يساراً، متقابلين.
   direction:ltr مع order يثبّت الجهتين فلا تنقلبان عند التبديل للإنجليزية. */
.fabs{
  position:fixed; z-index:70; direction:ltr;
  left:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px);
  bottom:clamp(14px,2.4vw,26px);
  display:flex; justify-content:space-between; align-items:flex-end;
  pointer-events:none;  /* الشريط نفسه لا يحجب النقر على المحتوى خلفه */
}
.fab--top{order:1}
.fab--wa{order:2}
.fab{
  pointer-events:auto;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow); transition:transform .32s var(--ease-out), box-shadow .32s, opacity .3s;
}
.fab:hover{transform:translateY(-4px) scale(1.06); box-shadow:var(--shadow-lg)}
.fab .ic{width:25px; height:25px}
.fab .wa-logo{width:25px; height:25px}
.fab--wa{background:#25d366; color:#fff}
.fab--top{background:var(--ink); color:#fff; opacity:0; pointer-events:none; transform:translateY(12px)}
.fab--top.is-on{opacity:1; pointer-events:auto; transform:translateY(0)}

/* ------------------------------ التحميل والحركة ------------------------------ */
/* شاشة التحميل وحالات الظهور معرَّفة داخل critical.css المضمَّن،
   حتى لا تُرسم قبل وصول هذا الملف. لا تُكرَّر هنا. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{opacity:1 !important; transform:none !important}
  .hero__bg img{animation:none; transform:scale(1.02)}
}

@media print{
  .nav,.topbar,.fabs,.loader,.drawer,.hero__scroll,.filters,.form{display:none !important}
  body{font-size:12pt}
  .sec{padding-block:18pt; break-inside:avoid}
  [data-rv]{opacity:1 !important; transform:none !important}
}

/* حركة ظهور البطاقات بعد التصفية */
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* ------------------------------ مؤشرات الأداء ------------------------------ */
.kpi{position:relative; overflow:hidden; background:var(--ink)}
.kpi__bg{position:absolute; inset:0; z-index:0}
.kpi__bg img{width:100%; height:100%; object-fit:cover; object-position:center 62%}
.kpi__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,19,15,.94), rgba(199,146,69,.55));
}
.kpi__in{position:relative; z-index:2}
.kpi__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(14px,2vw,20px); margin-top:40px;
}
.kpi__card{
  padding:clamp(22px,2.8vw,30px) 20px; border-radius:var(--r-lg); text-align:center;
  background:rgba(21,19,15,.42); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; gap:15px;
  transition:transform .42s var(--ease-out), background .35s, border-color .35s;
}
.kpi__card:hover{
  transform:translateY(-7px); background:rgba(21,19,15,.62); border-color:var(--gold-line);
}
.kpi__ic{
  width:60px; height:60px; border-radius:19px; display:grid; place-items:center; flex:none;
  background:rgba(199,146,69,.2); border:1px solid var(--gold-line); color:var(--gold-3);
  transition:transform .45s var(--ease-out), background .35s;
}
.kpi__card:hover .kpi__ic{transform:scale(1.08) rotate(-6deg); background:rgba(199,146,69,.34)}
.kpi__ic .ic{width:28px; height:28px}
.kpi__t{font-size:.98rem; font-weight:700; color:#fff; line-height:1.65}

/* ==========================================================================
   طبقة الاستجابة — ضبط دقيق للأجهزة اللوحية والجوال
   ========================================================================== */

/* ------- جوال كبير ------- */
@media(max-width:680px){
  :root{ --sec:clamp(48px,11vw,72px); --r-lg:18px; --r-xl:22px }
  body{font-size:15.8px; line-height:1.8}

  .hero{min-height:clamp(500px,80svh,700px); text-align:start}
  .hero h1{font-size:clamp(1.65rem,7.2vw,2.2rem); line-height:1.35}
  .hero__eyebrow{font-size:.76rem; padding:.38em .9em; margin-bottom:16px}
  .hero__lead{font-size:.96rem; line-height:1.85; margin-bottom:26px}
  .hero__acts{gap:10px; margin-bottom:32px}
  .hero__acts .btn{flex:1 1 100%; justify-content:center}
  .hero__badges{gap:8px}
  .hero__badge{
    flex:1 1 100%; font-size:.86rem; padding:.7em 1em;
  }

  /* بطاقة الأرقام: شبكة 2×2 بفواصل بدل الأعمدة الأربعة */
  .stats{margin-top:calc(var(--sec) * -.3)}
  .stats__card{
    grid-template-columns:repeat(2,1fr); gap:20px 12px; padding:22px 16px;
    border-radius:var(--r-lg);
  }
  .stat + .stat::before{display:none}
  .stat__ic{width:40px; height:40px; border-radius:12px; margin-bottom:2px}
  .stat__ic .ic{width:20px; height:20px}
  .stat__n{font-size:1.75rem}
  .stat__l{font-size:.8rem; line-height:1.45}

  /* من نحن */
  .about{gap:34px}
  .about__media .shot img{aspect-ratio:4/3.4}
  .about__badge{
    inset-inline-start:auto; inset-inline-end:14px; top:auto; bottom:14px;
    padding:12px 16px; min-width:0;
  }
  .about__badge b{font-size:1.45rem}
  .about__badge span{font-size:.72rem}
  .facts{margin-top:24px}
  .fact{grid-template-columns:minmax(0,1fr); gap:3px; padding:13px 15px}
  .fact__k{font-size:.79rem}
  .fact__v{font-size:.93rem}

  /* الرؤية والرسالة */
  .vm__card{padding:24px 20px}
  .vm__ic{width:50px; height:50px; border-radius:15px; margin-bottom:16px}
  .vm__ic .ic{width:24px; height:24px}
  .vm__card h3{font-size:1.2rem}
  .vm__q{width:42px; height:42px; inset-inline-end:16px; top:14px}

  /* مؤشرات الأداء */
  .kpi__grid{grid-template-columns:1fr; gap:11px; margin-top:30px}
  .kpi__card{
    flex-direction:row; align-items:center; text-align:start;
    padding:15px 16px; gap:14px;
  }
  .kpi__ic{width:46px; height:46px; border-radius:14px}
  .kpi__ic .ic{width:23px; height:23px}
  .kpi__t{font-size:.92rem}

  /* الخدمات */
  .svc__body{padding:22px 20px}
  .svc__num{font-size:2rem; top:11px; inset-inline-end:13px}
  .svc__ic{width:48px; height:48px; border-radius:15px; bottom:14px; inset-inline-start:15px}
  .svc__ic .ic{width:23px; height:23px}
  .svc__body h3{font-size:1.08rem}

  /* منظومة التشغيل */
  .ops{gap:28px}
  .ops__media img{aspect-ratio:16/11}
  .op{padding:11px 12px; gap:13px}
  .op__thumb{width:64px; height:50px; border-radius:9px}
  .op__t{font-size:.92rem; line-height:1.5}
  .op__n{font-size:.92rem}

  /* الجودة */
  .qsteps{grid-template-columns:1fr; gap:11px; margin-top:28px}
  .qstep{padding:14px 16px; gap:13px}
  .qstep__n{font-size:1.55rem}
  .qstep__t{font-size:.9rem}

  /* القدرات */
  .cap{padding:22px 16px}
  .cap__ic{width:54px; height:54px; border-radius:16px; margin-bottom:14px}
  .cap__ic .ic{width:26px; height:26px}
  .cap h3{font-size:.96rem}
  .cap__note{margin-top:26px; font-size:.92rem; text-align:start; justify-content:flex-start}

  /* آلية إدارة المشروع */
  .flow::before{inset-inline-start:19px}
  .step{grid-template-columns:auto 1fr; gap:14px; padding-block:10px}
  .step__dot{width:40px; height:40px; border-radius:13px; font-size:.9rem}
  .step__card{padding:17px 16px}
  .step__card h3{font-size:1.03rem; margin-bottom:10px}
  .step__pts li{font-size:.8rem; padding:.34em .75em}

  /* المشاريع */
  .prj__body{padding:16px 17px 18px; gap:7px}
  .prj__body h3{font-size:1rem}
  .prj__meta{flex-direction:column; align-items:flex-start; gap:8px}
  .prj__tag{font-size:.71rem; padding:.3em .75em}
  .prj__loc{font-size:.8rem}

  /* العملاء */
  .clients{gap:11px}
  .client{padding:18px 12px; gap:11px}
  .client__logo{width:64px; height:64px}
  .client__name{font-size:.8rem; line-height:1.45}

  /* الشهادات */
  
  .cert__img{padding:10px}
  .cert__body{padding:10px 11px 13px}
  .cert__t{font-size:.82rem; line-height:1.45}
  .cert__i{font-size:.72rem}

  /* المعرض */
  
  .gal__it{aspect-ratio:1}
  .gal__cap{font-size:.78rem; transform:none}
  .gal__ov{opacity:1; padding:11px;
    background:linear-gradient(to top, rgba(21,19,15,.9), transparent 62%)}

  /* التواصل */
  .contact{gap:26px}
  .cinfo__it{padding:14px 15px; gap:13px}
  .cinfo__ic{width:42px; height:42px; border-radius:13px}
  .cinfo__ic .ic{width:20px; height:20px}
  .cinfo__v{font-size:.94rem}
  .form{padding:22px 18px}
  .form__grid{gap:14px}
  .form__foot{flex-direction:column; align-items:stretch; gap:12px}
  .form__foot .btn{width:100%; justify-content:center}
  .form__note{text-align:center}

  /* دعوة للتواصل */
  .cta{padding:32px 22px; border-radius:var(--r-lg)}
  .cta h2{font-size:clamp(1.3rem,5.6vw,1.7rem)}
  .cta__acts{flex-direction:column}
  .cta__acts .btn{width:100%; justify-content:center}

  /* التذييل */
  .foot__grid{gap:30px}
  .foot__logo img{height:52px}
  /* التذييل السفلي: توسيط + مساحة أسفل حتى لا تغطّيه الأزرار العائمة */
  .foot__bar{
    flex-direction:column; align-items:center; gap:11px; text-align:center;
    padding-bottom:calc(22px + 64px);
  }
}

/* ------- جوال صغير ------- */
@media(max-width:420px){
  :root{ --gut:15px }
  .hero h1{font-size:1.55rem}
  .stats__card{padding:18px 12px; gap:18px 8px}
  .stat__n{font-size:1.55rem}
  .stat__l{font-size:.76rem}
  
  .clients{grid-template-columns:repeat(2,1fr)}
  .sec-title{font-size:1.42rem}
}

/* أهداف لمس مريحة على الأجهزة اللمسية */
@media(hover:none){
  .nav__links a,.drawer nav a,.filter,.foot__links a,.foot__bar a{min-height:44px}
  .filter{display:inline-flex; align-items:center}
  .fab{width:54px; height:54px}
  .fabs{
    inset-inline-end:max(14px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
  }
}

/* المرشِّحات: شريط أفقي قابل للسحب بدل الالتفاف على الشاشات الضيقة */
@media(max-width:680px){
  .filters{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
    padding-bottom:6px; scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none; scroll-snap-align:start}
}

/* الشاشات العريضة جداً */
@media(min-width:1600px){
  :root{ --wrap:1340px }
}

/* ==========================================================================
   أيقونات متحركة وتفاصيل تفاعلية
   كل الحركات على transform/opacity فقط لتبقى على طبقة الرسم
   ========================================================================== */

/* ---------- رسم الأيقونة عند الظهور ---------- */
.ic-draw{stroke-dasharray:var(--len,120); stroke-dashoffset:var(--len,120)}
.is-in .ic-draw,
[data-rv].is-in .ic-draw{
  animation:icDraw 1.1s var(--ease-out) forwards;
}
@keyframes icDraw{ to{stroke-dashoffset:0} }

/* ---------- حركات مستمرة خفيفة على أيقونات المفاتيح ---------- */
@media (prefers-reduced-motion:no-preference){
  /* ترس يدور ببطء عند تمرير المؤشر */
  .svc:hover .svc__ic .ic,
  .cap:hover .cap__ic .ic{ animation:spinSlow 6s linear infinite }
  @keyframes spinSlow{ to{transform:rotate(360deg)} }

  /* نبضة خفيفة لأيقونات الأرقام عند الظهور */
  .stats__card.is-in .stat__ic{ animation:popIn .6s var(--ease-out) both }
  .stat:nth-child(2) .stat__ic{ animation-delay:.08s }
  .stat:nth-child(3) .stat__ic{ animation-delay:.16s }
  .stat:nth-child(4) .stat__ic{ animation-delay:.24s }
  @keyframes popIn{
    0%{transform:scale(.6) rotate(-12deg); opacity:0}
    60%{transform:scale(1.08) rotate(3deg); opacity:1}
    100%{transform:scale(1) rotate(0); opacity:1}
  }

  /* وميض لطيف لأيقونة الكهرباء */
  .kpi__card:hover .kpi__ic .ic,
  .cinfo__it:hover .cinfo__ic .ic{ animation:nudge .7s var(--ease-out) }
  @keyframes nudge{
    0%,100%{transform:translateY(0)}
    30%{transform:translateY(-3px) scale(1.08)}
    60%{transform:translateY(1px) scale(.98)}
  }
}

/* ---------- هالة تتبع المؤشر داخل البطاقات ---------- */
@media (hover:hover){
  .svc,.prj,.cap,.client,.cert{ position:relative }
  .svc::after,.prj::after,.cap::after,.client::after{
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    border-radius:inherit; opacity:0; transition:opacity .35s var(--ease);
    background:radial-gradient(
      420px circle at var(--mx,50%) var(--my,50%),
      rgba(199,146,69,.16), transparent 62%);
  }
  .svc:hover::after,.prj:hover::after,.cap:hover::after,.client:hover::after{opacity:1}
}

/* ---------- تموّج عند اللمس/النقر على الأزرار ---------- */
.btn{ --rip:0 }
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.42); animation:ripple .62s var(--ease-out) forwards;
}
.btn--ghost .ripple{ background:rgba(199,146,69,.3) }
@keyframes ripple{ to{transform:scale(2.6); opacity:0} }

/* ---------- سهم يتحرك داخل الأزرار ---------- */
.btn .ic{ transition:transform .32s var(--ease-out) }
[dir="rtl"] .btn:hover .ic{ transform:translateX(-4px) }
[dir="ltr"] .btn:hover .ic{ transform:translateX(4px) }
/* السهم في الأزرار يشير لجهة القراءة */
[dir="ltr"] .btn .ic[data-flip],
[dir="ltr"] .drawer nav a > .ic{ transform:scaleX(-1) }
[dir="ltr"] .lb__nav--next .ic{ transform:rotate(0) }
[dir="ltr"] .lb__nav--prev .ic{ transform:rotate(180deg) }

/* ---------- شريط ذهبي يمتد أسفل عناوين الأقسام ---------- */
.rule{ transform:scaleX(0); transform-origin:right; transition:transform .9s var(--ease-out) .15s }
.sec-head.is-in .rule,
[data-rv].is-in .rule{ transform:scaleX(1) }

/* ---------- بطاقات المشاريع: شارة تنزلق ---------- */
.prj__tag{ transform:translateY(-4px); opacity:.92; transition:all .35s var(--ease-out) }
.prj:hover .prj__tag{ transform:translateY(0); opacity:1 }

/* ---------- شعارات العملاء: ارتداد خفيف ---------- */
.client__logo img{ transform-origin:center bottom }
@media (prefers-reduced-motion:no-preference){
  .client:hover .client__logo img{ animation:logoPop .55s var(--ease-out) }
  @keyframes logoPop{
    0%{transform:scale(1)} 45%{transform:scale(1.12) translateY(-3px)} 100%{transform:scale(1.06)}
  }
}

/* ---------- مؤشر تمرير أفقي للمعرض على الجوال ---------- */
.gal__it::after{
  content:""; position:absolute; inset-inline-end:9px; top:9px;
  width:26px; height:26px; border-radius:50%; z-index:2;
  background:rgba(199,146,69,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;
  opacity:0; transform:scale(.7); transition:all .35s var(--ease-out);
}
.gal__it:hover::after{opacity:1; transform:scale(1)}
@media(hover:none){ .gal__it::after{opacity:.9; transform:scale(1)} }

/* ---------- خطوات آلية العمل: خط يُرسم تدريجياً ---------- */
.flow::before{ transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--ease-out) }
.flow.is-drawn::before{ transform:scaleY(1) }

/* ---------- تحريك خفيف لصور الأقسام مع التمرير ---------- */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  .ops__media img{ will-change:transform }
}

/* ==========================================================================
   دعم الاتجاهين + زر اللغة وتحميل الملف التعريفي
   ========================================================================== */

/* انتقال ناعم عند تبديل اللغة */
.lang-swapping main,
.lang-swapping .foot,
.lang-swapping .nav__links{
  animation:langFade .42s var(--ease-out);
}
@keyframes langFade{
  0%{opacity:.35; transform:translateY(4px)}
  100%{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lang-swapping main,.lang-swapping .foot,.lang-swapping .nav__links{animation:none}
}

/* ------- تعديلات الإنجليزية (LTR) ------- */
.lang-en{ letter-spacing:0 }

/* الأرقام والهواتف بالإنجليزية تُقرأ يساراً بشكل طبيعي */
.lang-en .cinfo__v,
.lang-en .foot__c .val{ direction:ltr; text-align:start }

/* شريط التقدّم والشريط الذهبي يبدآن من اليسار */
[dir="ltr"] .progress__bar{ transform-origin:left }
[dir="ltr"] .rule{ transform-origin:left }

/* التذييل: النقطة قبل الرابط */
[dir="ltr"] .foot .foot__h::after{ inset-inline-start:0 }

/* الإنجليزية أقل ارتفاعاً في السطر من العربية */
.lang-en body,
.lang-en .sec-sub,
.lang-en p{ line-height:1.72 }
.lang-en h1,.lang-en h2,.lang-en h3{ line-height:1.25; letter-spacing:-.015em }
.lang-en .hero h1{ line-height:1.16 }
.lang-en .eyebrow{ letter-spacing:.11em }

/* عناوين إنجليزية أطول: نمنح مساحة أكبر للبطاقات */
.lang-en .svc__body h3,
.lang-en .prj__body h3{ line-height:1.35 }

/* ========================================================================== 
   تحسينات الواجهة الاحترافية — ثبات العرض، الحركة، وسلايدر المشاريع
   ========================================================================== */

/* منع أي عنصر زخرفي أو مخفي من توسيع الصفحة أفقياً */
html,body{max-width:100%;overflow-x:hidden}
body{font-synthesis:none}
main{max-width:100%;overflow-x:clip}
.drawer{overflow:hidden;contain:layout paint}
.drawer__panel{max-width:100%}
picture{max-width:100%}
.hp{
  position:fixed !important;inset:auto !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;
  white-space:nowrap !important;border:0 !important;opacity:0;pointer-events:none;
}

/* طبقة هندسية خفيفة تعكس طبيعة التشغيل والمقاولات */
.hero::after{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(240,208,154,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,208,154,.22) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 78%);
  animation:blueprint-drift 24s linear infinite;
}
@keyframes blueprint-drift{to{background-position:54px 54px}}

#services,#projects{overflow:hidden;isolation:isolate}
#services::before,#projects::before{
  content:"";position:absolute;z-index:-1;width:460px;height:460px;border-radius:50%;
  pointer-events:none;filter:blur(2px);
  background:radial-gradient(circle,rgba(199,146,69,.13),transparent 68%);
  animation:section-orb 10s ease-in-out infinite alternate;
}
#services::before{inset-inline-end:-180px;top:8%}
#projects::before{inset-inline-start:-190px;bottom:3%}
@keyframes section-orb{to{transform:translate3d(28px,-22px,0) scale(1.08)}}

/* سلايدر المشاريع */
.slider{position:relative}
.slider__viewport{
  width:100%;overflow-x:auto;overflow-y:hidden;padding:8px 4px 24px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.slider__viewport::-webkit-scrollbar{display:none}
.slider__viewport:focus-visible{outline-offset:7px}
.slider__track{display:flex;gap:clamp(16px,2vw,24px);align-items:stretch}
.slider__track > *{
  flex:0 0 calc((100% - clamp(16px,2vw,24px)*2)/3);min-width:0;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.slider__controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}
.slider__btn{
  width:46px;height:46px;display:grid;place-items:center;flex:none;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease-out),background .25s,color .25s,border-color .25s;
}
.slider__btn:hover:not(:disabled){transform:translateY(-3px);background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:var(--shadow-gold)}
.slider__btn:disabled{opacity:.35;cursor:default}
.slider__btn .ic{width:19px;height:19px}
.slider__btn--prev .ic{transform:rotate(180deg)}
[dir="ltr"] .slider__btn--prev .ic{transform:none}
[dir="ltr"] .slider__btn--next .ic{transform:rotate(180deg)}
.slider__progress{width:min(260px,34vw);height:4px;overflow:hidden;border-radius:4px;background:var(--bg-3)}
.slider__progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease-out)}
[dir="ltr"] .slider__progress span{transform-origin:left}
.slider__count{min-width:54px;direction:ltr;color:var(--muted);font-size:.8rem;font-weight:700;text-align:center}
/* السلايدر داخل قسم داكن */
.sec--ink .slider__count{color:#b8ada0}
.sec--ink .slider__progress{background:rgba(255,255,255,.14)}
.sec--ink .slider__btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.sec--ink .slider__btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold)}

/* لمسات تفاعلية محسوبة */
.svc,.prj,.client,.cert,.vm__card,.kpi__card{transform-style:preserve-3d}
.nav.is-stuck{box-shadow:0 10px 30px rgba(21,19,15,.08)}
.sec-head .eyebrow{transition:letter-spacing .45s var(--ease-out)}
.sec-head.is-in .eyebrow{letter-spacing:.13em}

@media(max-width:980px){
  .slider__track > *{flex-basis:calc((100% - clamp(16px,2vw,24px))/2)}
}
@media(max-width:680px){
  body{font-size:16px;line-height:1.75}
  h1,h2,h3,h4,h5{letter-spacing:0}
  .hero h1{font-size:clamp(1.8rem,8vw,2.25rem);line-height:1.3}
  .sec-title{font-size:clamp(1.55rem,7vw,1.9rem);line-height:1.4}
  .sec-sub{font-size:.96rem;line-height:1.8}
  .hero__lead{font-size:1rem;line-height:1.8}
  .slider__viewport{margin-inline:calc(var(--gut) * -1);width:calc(100% + var(--gut)*2);padding-inline:var(--gut)}
  .slider__track > *{flex-basis:86%;max-width:360px}
  .slider__controls{justify-content:space-between;gap:9px}
  .slider__progress{flex:1;width:auto}
  .slider__btn{width:42px;height:42px}
  .hero::after{background-size:42px 42px;opacity:.11}
}
@media(max-width:420px){
  .hero h1{font-size:1.82rem}
  .sec-title{font-size:1.55rem}
  .slider .prj{flex-basis:90%}
}

@media(prefers-reduced-motion:reduce){
  .hero::after,#services::before,#projects::before{animation:none}
  .slider__viewport{scroll-behavior:auto}
}
.lang-en .stat__l{ line-height:1.35 }
.lang-en .client__name{ line-height:1.4 }

/* ==========================================================================
   سجل الأعمال — شريط المستندات المتحرك + عارض المستندات
   ========================================================================== */

.wq-sec{overflow:hidden}
.wq-sec .wrap + .wq{margin-top:clamp(6px,1.4vw,14px)}

/* ------------------------------ الشريط ------------------------------ */
.wq{
  --wq-h:clamp(150px,17vw,214px);
  --wq-gap:clamp(10px,1.2vw,16px);
  position:relative; user-select:none; touch-action:pan-y;
}
.wq__rows{display:flex; flex-direction:column; gap:var(--wq-gap)}
.wq__row{
  position:relative; direction:ltr; overflow:hidden;
  height:var(--wq-h); contain:strict; cursor:grab; touch-action:pan-y;
}
.wq.is-dragging .wq__row{cursor:grabbing}
.wq__row--2{display:none}
@media(min-width:900px){ .wq__row--2{display:block} }

.wq__tile{
  position:absolute; top:0; left:0; height:100%;
  border-radius:var(--r-sm); overflow:hidden; background:#0e0d0b;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  outline:1px solid rgba(199,146,69,.22); outline-offset:-1px;
  will-change:transform; contain:content;
  transition:outline-color .3s var(--ease), box-shadow .3s var(--ease);
}
.wq__tile img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  background:#161310; opacity:0; transition:opacity .45s var(--ease);
}
.wq__tile img.is-in{opacity:1}
.wq__tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,7,.45),transparent 42%);
  opacity:.85; transition:opacity .3s var(--ease);
}
@media(hover:hover){
  .wq__tile:hover{outline-color:var(--gold); box-shadow:0 10px 28px rgba(0,0,0,.45)}
  .wq__tile:hover::after{opacity:.25}
}

/* تلاشي الحواف */
.wq__fade{position:absolute; top:0; bottom:0; width:clamp(40px,7vw,120px); pointer-events:none; z-index:2}
.wq__fade--s{left:0;  background:linear-gradient(to right,var(--ink),transparent)}
.wq__fade--e{right:0; background:linear-gradient(to left,var(--ink),transparent)}

/* هيكل مؤقّت قبل عمل الجافاسكربت */
.wq__skeleton{position:absolute; inset:0; display:flex; gap:var(--wq-gap); overflow:hidden}
.wq__skeleton i{
  flex:0 0 auto; width:calc(var(--wq-h) * .707); border-radius:var(--r-sm);
  background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%);
  background-size:280% 100%; animation:wqShimmer 1.6s linear infinite;
}
@keyframes wqShimmer{from{background-position:180% 0}to{background-position:-80% 0}}
.wq.is-ready .wq__skeleton{display:none}

/* ------------------------------ شريط التحكم ------------------------------ */
.wq__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(8px,1.4vw,14px); margin-top:clamp(20px,2.6vw,32px);
}
.wq__ctl{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.07); color:#cfc5b8;
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-pill);
  padding:9px 16px; font-size:.88rem; font-weight:700;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.wq__ctl:hover{background:rgba(199,146,69,.2); color:#fff; border-color:var(--gold-line)}
.wq__ctl .ic{width:17px; height:17px}
.wq__ctl--icon{padding:9px; width:38px; height:38px; justify-content:center}
.wq__speed{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-pill); padding:3px;
}
.wq__speed b{
  min-width:44px; text-align:center; font-size:.84rem; font-weight:800;
  color:var(--gold-2); font-variant-numeric:tabular-nums; direction:ltr;
}
.wq__speed .wq__ctl{background:none; border:0; padding:6px 11px; font-size:1rem; line-height:1; color:#cfc5b8}
.wq__speed .wq__ctl:hover{color:var(--gold-2); background:rgba(199,146,69,.16)}
.wq__ctl--main{background:var(--gold); color:#fff; border-color:transparent; box-shadow:var(--shadow-gold)}
.wq__ctl--main:hover{background:var(--gold-2); color:#fff}
.wq__note{width:100%; text-align:center; color:#8d8478; font-size:.82rem; margin-top:2px}

/* بديل بدون جافاسكربت */
.wq-nojs{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.wq-nojs img{width:100%; border-radius:var(--r-sm)}

/* ------------------------------ عارض المستندات ------------------------------ */
.wv{
  position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column;
  background:rgba(9,8,6,.97); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  color:#e6ded3;
}
.wv.is-open{opacity:1; visibility:visible}
.wv__top{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:10px clamp(10px,2vw,20px); border-bottom:1px solid rgba(255,255,255,.08);
}
.wv__pos{
  font-size:.86rem; font-weight:800; color:var(--gold-2);
  font-variant-numeric:tabular-nums; direction:ltr; min-width:82px;
}
.wv__tools{display:flex; align-items:center; gap:6px; margin-inline-start:auto}
.wv__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:40px; height:40px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); color:#cfc5b8;
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.wv__btn:hover{background:var(--gold); color:#fff}
.wv__btn .ic{width:19px; height:19px}
.wv__btn[aria-pressed="true"]{background:var(--gold); color:#fff}
.wv__btn.is-off{opacity:.35; pointer-events:none}
.wv__zoom{
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.05); border-radius:var(--r-pill); padding:2px;
}
.wv__zoom .wv__btn{width:34px; height:34px; background:none}
.wv__zoom b{min-width:46px; text-align:center; font-size:.8rem; font-weight:800;
  color:var(--gold-2); font-variant-numeric:tabular-nums; direction:ltr}

.wv__stage{
  position:relative; flex:1 1 auto; overflow:hidden; min-height:0;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; cursor:zoom-in;
}
.wv__stage.is-zoomed{cursor:grab}
.wv__stage.is-panning{cursor:grabbing}
.wv__pan{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform-origin:50% 50%; will-change:transform;
}
.wv__img{
  max-width:96%; max-height:96%; width:auto; height:auto;
  border-radius:6px; background:#fff; box-shadow:0 20px 70px rgba(0,0,0,.6);
  opacity:0; transition:opacity .3s var(--ease);
}
.wv__img.is-in{opacity:1}
.wv__spin{
  position:absolute; width:34px; height:34px; border-radius:50%;
  border:2.5px solid rgba(199,146,69,.25); border-top-color:var(--gold);
  animation:wvSpin .7s linear infinite; opacity:0; transition:opacity .2s;
}
.wv.is-loading .wv__spin{opacity:1}
@keyframes wvSpin{to{transform:rotate(360deg)}}

.wv__nav{
  position:absolute; top:50%; margin-top:-25px; z-index:3;
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(21,19,15,.7); color:#fff; border:1px solid rgba(255,255,255,.14);
  transition:background .22s var(--ease), transform .22s var(--ease);
}
.wv__nav:hover{background:var(--gold); transform:scale(1.07)}
.wv__nav .ic{width:21px; height:21px}
.wv__nav--prev{inset-inline-end:clamp(8px,2vw,22px)}
.wv__nav--next{inset-inline-start:clamp(8px,2vw,22px)}
.wv__nav--next .ic{transform:rotate(180deg)}

/* شريط المصغّرات */
.wv__film{
  flex:0 0 auto; position:relative; border-top:1px solid rgba(255,255,255,.08);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; direction:ltr;
  scrollbar-color:rgba(199,146,69,.5) transparent; overscroll-behavior-x:contain;
}
.wv__film::-webkit-scrollbar{height:7px}
.wv__film::-webkit-scrollbar-thumb{background:rgba(199,146,69,.5); border-radius:6px}
.wv__filmtrack{display:flex; gap:8px; padding:10px clamp(10px,2vw,20px)}
.wv__th{
  flex:0 0 auto; height:76px; border-radius:6px; overflow:hidden; position:relative;
  background:rgba(255,255,255,.05); outline:1px solid transparent; outline-offset:-1px;
  transition:outline-color .2s var(--ease), opacity .2s var(--ease); opacity:.55;
}
.wv__th img{width:100%; height:100%; object-fit:cover; object-position:top center}
.wv__th:hover{opacity:1}
.wv__th.is-on{opacity:1; outline-color:var(--gold)}


@media(max-width:640px){
  .wv__th{height:58px}
  .wv__pos{min-width:66px; font-size:.8rem}
  .wv__btn{width:36px; height:36px}
  .wv__nav{width:42px; height:42px; margin-top:-21px}
}
@media(prefers-reduced-motion:reduce){
  .wq__skeleton i{animation:none}
  .wv__img,.wq__tile img{transition:none}
}

/* ---- منع حفظ الصور: قائمة الضغط المطوّل على iOS وسحب الصورة ---- */
img, picture, .gp__t, .wv__img, .wq__c, .lb__img{
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
}
/* لا نضع pointer-events:none على الصور: يكسر النقر على البلاطات
   والمعرض وشريط المستندات. منع القائمة يتم في protect.js. */