/* ============================================
   مجموعة دان — style.css
   ثيم ليلي/نهاري بألوان العلامة: ذهبي + أخضر + كحلي
   ============================================ */

:root, html[data-theme="dark"]{
  --bg:#0b1512;
  --bg-rgb: 11,21,18;
  --surface:#0d1713;
  --surface-elev:#111d18;
  --surface-soft:#0f1a15;
  --card:#152119;
  --card-hover:#1a281f;
  --border-soft: rgba(255,255,255,.08);
  --border-gold: rgba(203,160,94,.55);
  --text:#f5f2ea;
  --mute:#9aa89f;
  --soft: rgba(255,255,255,.06);

  --gold:#CBA05E;
  --gold-2:#E9CE95;
  --gold-soft: rgba(203,160,94,.14);

  --green:#8ED0A6;
  --green-2:#3FA66B;
  --green-soft: rgba(94,190,140,.14);

  --navy:#1D3A5F;
  --navy-2:#3B5C86;
  --navy-soft: rgba(29,58,95,.25);

  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --radius-lg: 24px;
  --radius-xl: 28px;
  --logo-box:#e9e3d2;
}

html[data-theme="light"]{
  --bg:#ffffff;
  --bg-rgb: 255,255,255;
  --surface:#f7faf8;
  --surface-elev:#eef4f0;
  --surface-soft:#f3f8f5;
  --card:#ffffff;
  --card-hover:#eef6f1;
  --border-soft: rgba(20,40,30,.1);
  --border-gold: rgba(160,116,42,.5);
  --text:#16241c;
  --mute:#5b6b60;
  --soft: rgba(20,40,30,.05);

  --gold:#B8863A;
  --gold-2:#8f6423;
  --gold-soft: rgba(184,134,58,.12);

  --green:#1F7A52;
  --green-2:#155c3d;
  --green-soft: rgba(31,122,82,.1);

  --navy:#1D3A5F;
  --navy-2:#16283f;
  --navy-soft: rgba(29,58,95,.1);

  --shadow: 0 20px 50px rgba(20,40,30,.12);
  --logo-box:#ffffff;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Tajawal','Cairo',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
html[lang="en"] body{font-family:'Cairo','Tajawal',sans-serif;}
h1,h2,h3,h4{font-family:'Cairo','Tajawal',sans-serif; margin:0;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
.ltr{direction:ltr; unicode-bidi:embed; display:inline-block;}
::selection{background:var(--gold); color:#161616;}
/* .gold-text/.green-text يستخدمون background-clip:text مع لون نص شفاف، فأثناء التحديد بعض
   المتصفحات ما تقدر تطبّق قص الخلفية على النص المحدد فيطلع كصندوق مصمت بدل تحديد ملاصق للحروف —
   نجبر لون النص المحدد يكون صلب (غير شفاف) بس بهذي العناصر عشان يبين تحديد نظيف بدون هالخلل. */
.gold-text::selection, .green-text::selection{
  background:var(--gold); color:#161616; -webkit-text-fill-color:#161616;
}

.container{max-width:1200px; margin:0 auto; padding:0 24px;}

/* ===== الوصول (Accessibility) ===== */
.skip-link{
  position:fixed; top:-100px; right:16px; z-index:9999;
  background:var(--gold); color:#161616; font-weight:800; font-size:14px;
  padding:12px 22px; border-radius:10px; box-shadow:var(--shadow);
  transition:top .2s ease;
}
.skip-link:focus{top:16px; outline:2px solid var(--navy); outline-offset:2px;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

.gold-text{
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.green-text{
  background:linear-gradient(90deg, var(--green-2), var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.grid-pattern{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.3;
  pointer-events:none;
}
.grid-pattern.soft{opacity:.15;}

.bg-surface{background:var(--surface);}
.bg-surface-elev{background:var(--surface-elev);}
.bg-surface-soft{background:var(--surface-soft);}

.section{position:relative; padding:96px 0; overflow:hidden;}
@media (min-width:1024px){ .section{padding:128px 0;} }

.eyebrow{
  display:inline-block;
  color:var(--gold);
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:16px;
}
/* أعلى الهيرو تحديداً فوق صورة متغيّرة، فتحتاج وزن أثقل وظل خفيف يفصلها عن الصورة تحتها. */
/* التباعد الواسع بين الحروف مناسب للإنجليزية فقط — في العربية يكسر اتصال الحروف */
html[lang="en"] .eyebrow{letter-spacing:.25em;}

.section-head{max-width:760px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-title{
  font-size:clamp(28px, 5vw, 48px);
  font-weight:900;
  /* نفس سبب line-height المشروح في .hero-title — صندوق تظليل التحديد يرتفع لحوالي 1.875 من حجم
     الخط بغض النظر عن line-height المضبوط. القيمة هنا 1.9 مقاسة تجريبياً كأقرب قيمة آمنة (فوق حد
     1.875 مباشرة) عشان السطرين يكونوا قريبين قد ما يمكن من بعض بدون أي تداخل فعلي. */
  line-height:1.9;
  margin-bottom:16px;
}
.section-desc{color:var(--mute); font-size:18px; line-height:1.8; margin-top:16px;}

/* ===== أيقونات بألوان العلامة الثلاثة (تناوب) ===== */
.accent-gold{color:var(--gold) !important;}
.accent-green{color:var(--green) !important;}
.accent-navy{color:var(--navy-2) !important;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  border:1px solid transparent;
  transition:all .3s ease;
  white-space:nowrap;
  position:relative;
}
.btn-gold{background:linear-gradient(120deg, var(--gold), var(--gold-2)); color:#161616;}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(203,160,94,.35);}
.btn-outline{border-color:var(--border-gold); color:var(--text);}
.btn-outline:hover{background:var(--gold-soft); border-color:var(--gold);}
.btn-sm{padding:10px 22px; font-size:13px;}
.btn-block{width:100%;}

/* ===== شريط تقدّم التمرير ===== */
.scroll-progress{
  position:fixed; top:0; inset-inline:0; height:3px; z-index:200;
  background:linear-gradient(90deg, var(--gold), var(--green));
  width:0%; transition:width .1s linear;
}

/* ===== شاشة التحميل ===== */
.preloader{
  position:fixed; inset:0; z-index:300; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.preloader .mark{width:90px; animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1;}50%{transform:scale(1.08); opacity:.75;}}

/* ===== Navbar ===== */
.navbar{
  position:fixed; inset-inline:0; top:0; z-index:100;
  background:rgba(var(--bg-rgb),.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
  transition:background .4s ease, box-shadow .3s ease, padding .3s ease;
}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; height:82px; transition:height .3s ease;}
.navbar.scrolled .navbar-inner{height:66px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-icon{height:46px; width:auto; flex-shrink:0;}
.navbar.scrolled .brand-icon{height:38px;}
.brand-icon-dark{display:none;}
html[data-theme="dark"] .brand-icon-light{display:none;}
html[data-theme="dark"] .brand-icon-dark{display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-text strong{font-family:'Cairo',sans-serif; font-size:17px; font-weight:600; letter-spacing:.3px;}
html[lang="en"] .brand-text strong{letter-spacing:1.5px;}
.brand-text small{font-family:'Cairo',sans-serif; font-size:11px; font-weight:400; color:var(--mute);}

.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links a{font-size:14px; font-weight:600; color:var(--mute); transition:color .2s; position:relative;}
.nav-links a::after{
  content:''; position:absolute; right:0; left:0; bottom:-6px; height:2px;
  background:var(--gold); transform:scaleX(0); transition:transform .25s;
}
.nav-links a:hover{color:var(--gold);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--gold);}
.nav-links a.active::after{transform:scaleX(1);}

/* ===== شريط موافقة الكوكيز ===== */
.cookie-consent{
  position:fixed; inset-inline:0; bottom:0; z-index:280;
  background:var(--card); border-top:1px solid var(--border-soft);
  box-shadow:0 -10px 30px rgba(0,0,0,.2);
  padding:18px 24px; display:flex; align-items:center; justify-content:center; gap:20px;
  flex-wrap:wrap; transform:translateY(120%); transition:transform .5s ease;
}
.cookie-consent.show{transform:translateY(0);}
.cookie-consent p{color:var(--mute); font-size:13px; line-height:1.7; max-width:640px; margin:0;}
.cookie-consent p a{color:var(--gold); text-decoration:underline;}
.cookie-consent .btn{white-space:nowrap;}

/* ===== ظهور تدريجي للصور عند التحميل (Lazy Fade-in) ===== */
img[loading="lazy"]{opacity:0; transition:opacity .5s ease;}
img[loading="lazy"].loaded{opacity:1;}

.navbar-actions{display:flex; align-items:center; gap:12px;}
.icon-toggle, .lang-toggle{
  background:transparent; border:1px solid var(--border-soft); color:var(--text);
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.05em;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.icon-toggle{width:38px; height:38px; padding:0; font-size:16px;}
.icon-toggle:hover, .lang-toggle:hover{border-color:var(--gold); color:var(--gold);}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
.burger span{width:22px; height:2px; background:var(--text); display:block;}

/* ===== Hero ===== */
/* الهيرو صور فعلية بمدى سطوع واسع جداً (من قاعات غامقة لصالات معارض بيضاء ساطعة) تتغيّر تلقائياً،
   فتراكب فاتح بالوضع النهاري كان بيّيض الصور الساطعة بدون ما يفيد التباين أصلاً (تفتيح فوق فاتح
   أصلاً ما يغيّر شي). نثبّت ألوان الهيرو على نفس قيم الوضع الليلي دائماً (خلفية غامقة + نص فاتح)
   بغض النظر عن وضع الموقع العام — نفس الأسلوب المعروف بمواقع كثيرة لأقسام الهيرو المصوّرة. */
.hero{
  --bg-rgb:11,21,18;
  --text:#f5f2ea;
  --mute:#9aa89f;
  --gold:#CBA05E;
  --gold-2:#E9CE95;
  --border-gold: rgba(203,160,94,.55);
  --gold-soft: rgba(203,160,94,.14);
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:82px;
  overflow:hidden;
}
.hero-slideshow{position:absolute; inset:0; z-index:-2;}
/* كل صورة بالسلايدر مبنية من طبقتين بدل طبقة وحدة: طبقة خلفية (bg) بنفس الصورة مكبّرة ومموّهة
   تملأ كامل الشاشة (بدون ما تبين تفاصيلها الحقيقية)، وطبقة أمامية (fg) بنفس الصورة بحجمها
   الطبيعي كاملة بدون أي قص/تكبير (contain) فوق الخلفية المموّهة. النتيجة: الصورة الحقيقية
   تبين كاملة بأعلى جودة بدون ما "تُقص" أو "تُكبَّر" على جزء منها، وبنفس الوقت الخلفية تملأ
   الشاشة بالكامل بدون فراغات فارغة. */
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 2s ease;}
.hero-slide.active{opacity:1;}
.hero-slide-bg{
  position:absolute; inset:-30px; background-size:cover; background-position:center;
  filter:blur(30px) brightness(.65) saturate(1.1); transform:scale(1.08);
}
.hero-slide-fg{
  position:absolute; inset:0; background-size:contain; background-position:center;
  background-repeat:no-repeat;
}
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  /* الوقفة الأولى رفعناها من .55 لـ .74 — كانت أضعف نقطة بالتدرّج بالضبط مكان العنوان، فتخلي
     الصور الفاتحة/المزدحمة تبين خلف النص بوضوح وتصعّب قراءته. */
  background:linear-gradient(180deg, rgba(var(--bg-rgb),.74), rgba(var(--bg-rgb),.72) 55%, rgba(var(--bg-rgb),.86) 96%);
}
.hero-glow{
  position:absolute; width:480px; height:480px; border-radius:50%;
  filter:blur(90px); pointer-events:none;
}
.hero-glow-1{top:-120px; inset-inline-end:-100px; background:var(--gold-soft);}
.hero-glow-2{bottom:-160px; inset-inline-start:-120px; background:var(--green-soft);}
.cursor-glow{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-soft), transparent 70%);
  pointer-events:none; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .3s ease; z-index:0;
}
.hero:hover .cursor-glow{opacity:1;}

.hero-inner{position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; padding-top:40px; padding-bottom:40px;}
/* line-height:1.9 (بدل 1.15 القديم) ضروري وليس تجميلياً: صندوق تظليل التحديد (::selection) لخط
   Cairo بهذا الحجم يرتفع فعلياً لحوالي 1.868 من حجم الخط بغض النظر عن قيمة line-height المضبوطة
   (تأكدنا بالقياس المباشر عبر عدة قيم)، فلو بقي line-height أقل من هذي النسبة، صندوق تحديد كل سطر
   يتداخل مع السطر اللي بعده ويغطي أجزاء من حروفه. 1.9 هي أقرب قيمة آمنة فوق حد 1.868 مباشرة —
   أقرب مسافة ممكنة بين السطرين بدون أي تداخل فعلي عند التحديد. */
.hero-title{font-size:clamp(38px, 7vw, 76px); font-weight:900; line-height:1.9; margin:20px 0;}
.hero-title span{display:block; width:fit-content; max-width:100%; margin-left:auto; margin-right:auto;}
.hero-title span + span{margin-top:14px;}
.hero-desc{color:var(--mute); font-size:19px; max-width:640px; margin:0 auto 36px; line-height:1.9;}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;}
.hero-hashtag{text-align:center; margin-bottom:44px;}
.hero-hashtag span{
  display:inline-block; padding:8px 20px; border-radius:999px;
  border:1px dashed var(--border-gold); color:var(--gold); font-weight:700; font-size:13px;
}
html[lang="en"] .hero-hashtag span{letter-spacing:.02em;}
.footer-hashtag{display:block; color:var(--gold); font-weight:700; font-size:14px; margin-top:-6px !important; margin-bottom:20px !important; transition:color .2s;}
.footer-hashtag:hover{color:var(--gold-2);}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  border-top:1px solid var(--border-soft); padding-top:36px;
}
.hero-stat .num{display:block; font-size:clamp(24px,4vw,38px); font-weight:900; color:var(--gold); font-family:'Cairo',sans-serif;}
.hero-stat small{color:var(--mute); font-size:13px;}

.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color:var(--mute); font-size:20px; animation:bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ===== About ===== */
.about-grid{position:relative; display:grid; gap:64px; align-items:center;}
@media (min-width:1024px){ .about-grid{grid-template-columns:1fr 1fr;} }

.p1{color:var(--text); opacity:.9; font-size:17px; line-height:1.9; margin-bottom:20px;}
.p2{color:var(--mute); font-size:16px; line-height:1.9; margin-bottom:36px;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pillar{
  padding:20px; border-radius:18px; background:var(--card);
  border:1px solid var(--border-soft); transition:border-color .3s, transform .3s;
}
.pillar:hover{border-color:var(--gold); transform:translateY(-4px);}
.pillar i{font-size:24px; margin-bottom:10px; display:block;}
.pillar h3{font-size:15px; font-weight:800; margin-bottom:6px;}
.pillar p{color:var(--mute); font-size:13px; line-height:1.6;}

.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative;}
.stat-card{
  padding:32px; border-radius:var(--radius-xl); background:var(--card);
  border:1px solid var(--border-soft); transition:all .4s;
}
.stat-card:hover{border-color:var(--gold); transform:translateY(-4px);}
.stat-card.offset:hover{transform:translateY(28px);}
.stat-card.offset{transform:translateY(32px);}
.stat-card i{font-size:30px; margin-bottom:16px; display:block;}
.stat-card h3{font-size:17px; font-weight:800; margin-bottom:8px;}
.stat-card p{color:var(--mute); font-size:13.5px; line-height:1.7;}
.stat-value{font-size:clamp(28px,4vw,40px); font-weight:900; margin-bottom:6px; font-family:'Cairo',sans-serif;}
.stat-label{color:var(--mute); font-size:13px;}


/* ===== Services ===== */
.services-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .services-grid{grid-template-columns:repeat(4,1fr);} }
.service-card{
  border-radius:var(--radius-lg); background:var(--card); overflow:hidden;
  border:1px solid var(--border-soft); transition:all .35s;
  transform-style:preserve-3d;
}
.service-card:hover{border-color:var(--gold); background:var(--card-hover); transform:translateY(-6px);}
.service-card-img{height:150px; background-size:cover; background-position:center;}
.service-card-body{padding:24px 24px 28px;}
.service-card i{font-size:26px; margin-bottom:16px; display:block;}
.service-card h3{font-size:17px; font-weight:800; margin-bottom:10px;}
.service-card p{color:var(--mute); font-size:14px; line-height:1.7;}
.services-grid .service-card:nth-child(3n+1) i{color:var(--gold);}
.services-grid .service-card:nth-child(3n+2) i{color:var(--green);}
.services-grid .service-card:nth-child(3n+3) i{color:var(--navy-2);}

/* ===== Sectors ===== */
.sectors-grid{display:grid; grid-template-columns:1fr; gap:26px; align-items:start;}
@media (min-width:900px){ .sectors-grid{grid-template-columns:repeat(3,1fr);} }
.sector-card{
  border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--card);
  overflow:hidden; transition:border-color .3s, transform .3s;
}
.sector-card:hover{border-color:var(--gold); transform:translateY(-4px);}
.sector-card-img{
  height:190px; background-size:cover; background-position:center;
  position:relative;
}
.sector-card-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
}
.sector-card-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; background:none; border:none; color:var(--text); font-size:15.5px; font-weight:800;
  text-align:start; cursor:pointer;
}
.sector-card-head > span:first-child{display:flex; align-items:center; gap:10px;}
.sector-card-head i:not(.chev){font-size:18px; color:var(--gold);}
.sector-card:nth-child(2) .sector-card-head i:not(.chev){color:var(--green);}
.sector-card:nth-child(3) .sector-card-head i:not(.chev){color:var(--navy-2);}
.sector-card-head i.chev{color:var(--gold); transition:transform .3s; flex-shrink:0; font-size:13px;}
.sector-card.open .sector-card-head i.chev{transform:rotate(180deg);}
.sector-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.sector-chips{display:flex; flex-wrap:wrap; gap:9px; padding:0 22px 22px;}
.sector-chips span{
  background:var(--surface); border:1px solid var(--border-soft); color:var(--mute);
  padding:8px 15px; border-radius:999px; font-size:12.5px; line-height:1.4; transition:all .2s;
}
.sector-chips span:hover{border-color:var(--gold); color:var(--text);}
#sectors{padding-bottom:48px;}
@media (min-width:1024px){ #sectors{padding-bottom:64px;} }
#portfolio{padding-top:48px;}
@media (min-width:1024px){ #portfolio{padding-top:64px;} }

/* ===== Portfolio ===== */
.filter-tabs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:40px;}
.filter-tabs button{
  padding:10px 22px; border-radius:999px; background:var(--card);
  border:1px solid var(--border-soft); color:var(--mute); font-size:13px; font-weight:700;
  transition:all .25s;
}
.filter-tabs button:hover{color:var(--text);}
.filter-tabs button.active{background:var(--gold); color:#161616; border-color:var(--gold);}

.portfolio-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:640px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .portfolio-grid{grid-template-columns:repeat(3,1fr);} }

.portfolio-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; border:1px solid var(--border-soft);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:22px;
  transition:transform .4s ease;
  background-size:cover; background-position:center;
}
.portfolio-card h3, .portfolio-card .desc{width:100%;}
.portfolio-card:hover{transform:translateY(-6px);}
.portfolio-card:hover .portfolio-photo{transform:scale(1.06);}
.portfolio-card .portfolio-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .6s ease; z-index:0;
}
.portfolio-card .tag{
  position:absolute; top:16px; inset-inline-start:16px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  color:var(--gold-2); font-size:11px; font-weight:700; padding:6px 14px; border-radius:999px;
}
.portfolio-card h3{color:#fff; font-size:18px; font-weight:800; position:relative; margin-bottom:6px;}
.portfolio-card .desc{
  color:rgba(255,255,255,.85); font-size:12.5px; line-height:1.6; position:relative; max-width:92%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.portfolio-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.88) 10%, rgba(0,0,0,.25) 55%, transparent 75%);
  z-index:0;
}
.portfolio-card h3, .portfolio-card .tag, .portfolio-card .desc{z-index:1;}
.portfolio-card.hide, .portfolio-card.over-limit{display:none;}
.portfolio-card{cursor:pointer;}
.portfolio-note{text-align:center; color:var(--mute); font-size:13px; margin-top:28px;}

/* ===== Portfolio Modal ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal-box{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius-xl);
  max-width:820px; width:100%; max-height:88vh; overflow:auto; position:relative;
  display:grid; grid-template-columns:1fr; transform:translateY(20px); transition:transform .3s ease;
}
.modal-overlay.open .modal-box{transform:translateY(0);}
@media (min-width:768px){ .modal-box{grid-template-columns:1fr 1fr;} }
.modal-photo{min-height:240px; background-size:cover; background-position:center;}
@media (min-width:768px){ .modal-photo{min-height:100%;} }
.modal-body{padding:32px;}
.modal-body h3{font-size:24px; font-weight:900; margin:12px 0 14px;}
.modal-desc-main{color:var(--mute); font-size:15px; line-height:1.9; margin-bottom:20px;}
.modal-extra{display:flex; flex-direction:column; gap:12px; margin-bottom:24px;}
.modal-extra div{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text); opacity:.9;}
.modal-extra i{margin-top:3px;}
.modal-actions{display:flex; flex-wrap:wrap; gap:12px;}
.modal-video{display:inline-flex; align-items:center; gap:8px;}
.modal-whatsapp{display:inline-flex; align-items:center; gap:8px;}
.modal-whatsapp i{color:#25d366;}
.modal-close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff;
  border:none; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.modal-close:hover{background:var(--gold); color:#161616;}

/* ===== Partners (Marquee) ===== */
.marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee{direction:ltr;}
.marquee-track{
  display:flex; gap:8px; width:max-content; animation:scroll-x 22s linear infinite;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
/* شلنا خاصية "توقف الشريط عند تمرير الماوس فوقه" نهائياً — كانت تسبب تعليق الشريط بشكل متقطع
   وغير متوقع على أجهزة اللابتوب اللي فيها شاشة لمس بجانب الماوس/التاتش-باد (تقرأ hover:hover=true
   رغم إن اللمس هو من يفعّل :hover ويعلق عليه بدون ماوس فعلي)، فصار الشريط أحياناً يفتح وأحياناً
   يعلّق بلا سبب واضح للمستخدم. إزالة القاعدة كاملة تضمن إن الشريط يتحرك دائماً بلا انقطاع.
   إضافة will-change/translateZ(0) تجبر المتصفح يستخدم تسريع الرسوميات (GPU) بدل إعادة رسم كل
   إطار بالمعالج، وهذا يحل مشكلة التقطّع/الارتجاج (jank) اللي كانت تبين كـ"تعليق" أيضاً. */
@keyframes scroll-x{from{transform:translateX(0);} to{transform:translateX(-33.3333%);}}
.partner-logo{
  width:130px; height:76px; border-radius:14px; background:var(--logo-box);
  border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center;
  padding:8px; transition:all .3s; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.partner-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.partner-logo:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12);}
.partners-note{text-align:center; color:var(--mute); font-size:13px; margin-top:24px;}

/* ===== Clients ===== */
.clients-wrap{position:relative; overflow:hidden; transition:max-height .5s ease;}
.clients-wrap.collapsed{max-height:340px;}
.clients-wrap.collapsed::after{
  content:''; position:absolute; inset:auto 0 0 0; height:110px;
  background:linear-gradient(to top, var(--surface-elev), transparent);
}
.clients-wrap:not(.collapsed){max-height:4000px;}
.clients-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (min-width:640px){ .clients-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .clients-grid{grid-template-columns:repeat(4,1fr);} }
.client-card{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:18px; min-height:96px; border-radius:18px; background:var(--logo-box);
  border:1px solid var(--border-soft); transition:border-color .3s, transform .3s;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.client-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.client-card img{max-width:100%; max-height:56px; object-fit:contain;}

/* ===== Testimonials ===== */
.testi-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:768px){ .testi-grid{grid-template-columns:repeat(3,1fr);} }
.testi-card{
  padding:28px; border-radius:var(--radius-lg); background:var(--card);
  border:1px solid var(--border-soft); transition:border-color .3s, transform .3s;
}
.testi-card:hover{border-color:var(--gold); transform:translateY(-4px);}
.testi-stars{color:var(--gold); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.testi-text{color:var(--text); opacity:.9; font-size:15px; line-height:1.9; margin-bottom:20px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.testi-avatar{
  width:72px; height:72px; border-radius:50%; background:var(--logo-box); border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:10px; box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.testi-avatar img{max-width:100%; max-height:100%; object-fit:contain;}
.testi-name{font-weight:800; font-size:14px;}
.testi-role{color:var(--mute); font-size:12px;}

/* ===== FAQ ===== */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{border:1px solid var(--border-soft); border-radius:16px; background:var(--card); overflow:hidden;}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; background:none; border:none; color:var(--text); font-size:16px; font-weight:700; text-align:start;
}
.faq-q i{color:var(--gold); transition:transform .3s; flex-shrink:0;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{color:var(--mute); font-size:14px; line-height:1.8; padding:0 24px 22px;}

/* ===== Contact ===== */
.contact-grid{display:grid; gap:32px;}
@media (min-width:1024px){ .contact-grid{grid-template-columns:2fr 3fr;} }
.contact-info{display:flex; flex-direction:column; gap:14px;}
.contact-item{
  display:flex; align-items:center; gap:16px; padding:20px;
  border-radius:18px; background:var(--card); border:1px solid var(--border-soft);
  transition:all .3s;
}
.contact-item:hover{border-color:var(--gold); background:var(--card-hover); transform:translateY(-2px);}
.contact-item .icon-box{
  width:48px; height:48px; border-radius:14px; background:var(--gold-soft); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-item .icon-box i{color:var(--gold);}
.contact-item:nth-child(2) .icon-box{background:var(--green-soft); border-color:var(--green);}
.contact-item:nth-child(2) .icon-box i{color:var(--green-2);}
.contact-item:nth-child(3) .icon-box{background:var(--navy-soft); border-color:var(--navy-2);}
.contact-item:nth-child(3) .icon-box i{color:var(--navy-2);}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:0; height:0; overflow:hidden; opacity:0; pointer-events:none;}
.contact-item .label{color:var(--mute); font-size:12px; margin-bottom:4px;}
.contact-item .value{font-weight:800; font-size:15px;}
.contact-item .value.map-links a{color:var(--text); transition:color .2s;}
.contact-item .value.map-links a:hover{color:var(--gold); text-decoration:underline;}
.contact-item .value.map-links span{color:var(--mute); font-weight:400;}

.contact-form{
  padding:32px; border-radius:var(--radius-xl); background:var(--card); border:1px solid var(--border-soft);
}
.form-row{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;}
@media (min-width:640px){ .form-row{grid-template-columns:1fr 1fr;} }
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.field label{font-size:13px; color:var(--mute); font-weight:700;}
.field input, .field select, .field textarea{
  background:var(--surface); border:1px solid var(--border-soft); color:var(--text);
  padding:13px 16px; border-radius:12px; font-family:inherit; font-size:14px; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft);}
.form-note{margin-top:14px; font-size:13px; text-align:center; min-height:18px; color:var(--gold);}

/* ===== Footer ===== */
.footer{background:var(--surface); border-top:1px solid var(--border-soft); padding-top:72px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:40px; padding-bottom:48px;}
@media (min-width:900px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;} }
.footer-col p{color:var(--mute); font-size:15px; margin:16px 0; line-height:1.8;}
.footer-col h2, .footer-col h4{font-size:16px; font-weight:800; margin-bottom:20px;}
.footer-col a{display:block; color:var(--mute); font-size:15px; margin-bottom:12px; transition:color .2s;}
.footer-col a:hover{color:var(--gold);}
.footer-col .brand{display:flex; margin-bottom:18px;}
.footer-locations{
  display:flex; align-items:center; flex-wrap:nowrap; gap:5px;
  direction:ltr; justify-content:flex-start; text-align:left;
  color:var(--mute); font-size:15px; margin-bottom:12px;
}
.footer-locations a{display:inline; color:var(--mute); font-size:15px; margin-bottom:0; transition:color .2s;}
.footer-locations a:hover{color:var(--gold);}
.socials{display:flex; gap:10px;}
.socials a{
  width:38px; height:38px; border-radius:10px; background:var(--card); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; margin:0;
}
.socials a:hover{border-color:var(--gold); color:var(--gold);}

.footer-bottom{border-top:1px solid var(--border-soft); padding:24px 0;}
.footer-bottom-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-bottom span{color:var(--mute); font-size:14px;}
.footer-bottom .legal-links{display:flex; gap:16px;}
.footer-bottom .legal-links a{color:var(--mute); font-size:14px;}
.footer-bottom .legal-links a:hover{color:var(--gold);}
.footer-bottom .legal-links .footer-admin-link{opacity:.55; font-size:13px;}
.footer-bottom .legal-links .footer-admin-link:hover{opacity:1;}
.to-top{
  width:40px; height:40px; border-radius:50%; background:var(--card); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center;
}
.to-top:hover{border-color:var(--gold); color:var(--gold);}
.brand-closing{
  border-top:1px solid var(--border-soft); background:var(--surface);
  padding:32px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.brand-closing-brand{display:flex; align-items:center; gap:12px;}
.brand-closing-logo{height:52px; width:auto; display:block;}
.brand-closing-logo.brand-icon-dark{display:none;}
html[data-theme="dark"] .brand-closing-logo.brand-icon-light{display:none;}
html[data-theme="dark"] .brand-closing-logo.brand-icon-dark{display:block;}
.brand-closing-text{display:flex; flex-direction:column; line-height:1.2; text-align:start;}
.brand-closing-text strong{font-family:'Cairo',sans-serif; font-size:19px; font-weight:600; letter-spacing:.3px;}
html[lang="en"] .brand-closing-text strong{letter-spacing:1.5px;}
.brand-closing-text small{font-family:'Cairo',sans-serif; font-size:12px; font-weight:400; color:var(--mute);}
.brand-closing-tagline{font-size:18px; font-weight:700; color:var(--text); letter-spacing:.3px;}

/* ===== Floating actions ===== */
.floating-actions{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:90;
  display:flex; flex-direction:column; gap:12px;
}
.fab{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:var(--shadow); transition:transform .25s;
}
.fab:hover{transform:scale(1.08);}
.fab-whatsapp{background:#25d366; color:#fff;}
.fab-call{background:linear-gradient(120deg, var(--gold), var(--gold-2)); color:#161616;}

/* ===== Mobile nav ===== */
@media (max-width:960px){
  .nav-links{
    position:fixed; inset:0; z-index:290; overflow-y:auto;
    background:rgba(var(--bg-rgb),.98); backdrop-filter:blur(10px);
    flex-direction:column; justify-content:flex-start; align-items:center;
    padding-top:104px; padding-bottom:32px; gap:28px;
    transform:translateY(-120%); transition:transform .35s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{font-size:18px;}
  .burger{display:flex; position:relative; z-index:291;}
  .navbar-actions .btn{display:none;}
  body.nav-open{overflow:hidden;}
  .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .stat-card.offset{transform:none;}
}

/* على الجوال، صور الهيرو الأفقية (landscape) تبين كشريط رفيع بمنتصف الشاشة الطويلة لو استخدمنا
   contain (لأن الحاوية عمودية طويلة والصورة عريضة). نستخدم بدلها cover عشان الصورة تملأ الشاشة
   بالكامل زي أي هيرو موبايل عادي، وتحترم نفس نقطة التركيز المحفوظة من الأدمن. */
@media (max-width:767px){
  .hero-slide-fg{background-size:cover;}

  /* ===== تقليل طول الموقع بنسخة الجوال: تصغير الفراغات المتكررة بين الأقسام والفوتر
     (كل قسم كان ياخذ 96px فوق وتحت، × عدد الأقسام = طول كبير متراكم بدون داعي بالجوال) ===== */
  .section{padding:52px 0;}
  .section-head{margin-bottom:32px;}
  .section-desc{margin-top:10px;}

  /* الفوتر: عمودين بدل التكديس الكامل عمود تحت عمود (يقلّل ارتفاعه تقريباً للنصف) */
  .footer{padding-top:40px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:28px;}
  .footer-col:first-child{grid-column:1 / -1;}
  .footer-col p{margin:10px 0;}
  .footer-col h4{margin-bottom:12px;}
  .footer-col a{margin-bottom:8px;}
  .footer-hashtag{margin-bottom:14px !important;}
  .footer-bottom{padding:16px 0;}
  .footer-bottom-inner{justify-content:center; text-align:center;}

  /* الشريط الختامي بالفوتر (شعار + تاجلاين) مكرر بصرياً مع شعار أعلى الفوتر — نصغّره بالجوال بدل حذفه */
  .brand-closing{padding:20px 20px 28px; gap:8px;}
  .brand-closing-logo{height:38px;}
  .brand-closing-text strong{font-size:16px;}
  .brand-closing-tagline{font-size:14px;}
}

/* Reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].in{opacity:1; transform:none;}