:root {
  --teal: #2A9D8F;
  --teal-dark: #1E7268;
  --teal-light: #3DBFB0;
  --teal-glow: rgba(42,157,143,0.15);
  --gold: #E9C46A;
  --gold-dark: #C9A24A;

  --bg-dark: #0D0F14;
  --bg-card: #13161E;
  --bg-card2: #1A1E2A;
  --surface: #1F2433;
  --bg-deep: #08090C;
  --border: rgba(42,157,143,0.18);
  --border-subtle: rgba(255,255,255,0.06);

  --text-primary: #F0F2F5;
  --text-secondary: rgba(240,242,245,0.65);
  --text-muted: rgba(240,242,245,0.38);

  --bg-light: #F5F7FA;
  --bg-light-card: #FFFFFF;
  --bg-light-surface: #EDF0F5;
  --text-light-primary: #0D1117;
  --text-light-secondary: #4A5568;
  --text-light-muted: #8A97A8;

  --font-display: 'Cairo', sans-serif;
  --font-body: 'Tajawal', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --container: 1400px;
}

[data-theme="light"] {
  --bg-dark: #F5F7FA;
  --bg-card: #FFFFFF;
  --bg-card2: #EDF0F5;
  --surface: #E4E8F0;
  --bg-deep: #E3E7EF;
  --border: rgba(42,157,143,0.2);
  --border-subtle: rgba(0,0,0,0.07);
  --text-primary: #0D1117;
  --text-secondary: #4A5568;
  --text-muted: #8A97A8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; direction: rtl; overflow-x: hidden; }

/* ── RESPONSIVE SAFETY NET — يمنع أي صورة/فيديو/جدول (خصوصاً من محتوى المقالات) من كسر عرض الصفحة على الشاشات الصغيرة ── */
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre, code {
  max-width: 100%;
  overflow-x: auto;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.7;
  direction: rtl;
  text-align: right;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}

/* ── CONTAINER ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5000;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(13,15,20,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition);
}
.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="light"] nav {
  background: rgb(245,247,250) !important;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--teal);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-logo-icon svg { width: 22px; height: 22px; fill: white; }
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.nav-logo-text span { color: var(--teal); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%; right: 50%;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-links a:hover { color: var(--teal); }
.nav-links a:hover::after { left: 0; right: 0; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.btn-theme {
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.btn-theme:hover { background: var(--teal-glow); color: var(--teal); border-color: var(--teal); }
.btn-theme svg { width: 18px; height: 18px; stroke: currentColor; }
.btn-primary {
  padding: 10px 24px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
}
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); }
.btn-outline {
  padding: 10px 24px;
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
}
.btn-outline:hover { background: var(--teal-glow); transform: translateY(-1px); }

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ── HERO VIDEO ── */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden;
  /* الهيرو لازم يفضل بألوان الوضع الغامق دايماً (الخلفية تحته غامقة
     في الحالتين)، حتى لو المستخدم بدّل الموقع لـ Light Mode. بنعمل
     override لمتغيرات النص/الحدود هنا فقط، وده بيكسب أي قيمة موروثة
     من [data-theme="light"] على html لأن التحديد مباشر على #hero. */
  --text-primary: #F0F2F5;
  --text-secondary: rgba(240,242,245,0.65);
  --text-muted: rgba(240,242,245,0.38);
  --border-subtle: rgba(255,255,255,0.06);
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13,15,20,0.82) 0%,
    rgba(13,15,20,0.65) 50%,
    rgba(42,157,143,0.18) 100%
  );
}

/* ── Hero Image Slider ───────────────────────────────────────── */
.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* Ken Burns */
  animation: heroBgZoom 8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-slide.active {
  opacity: 1;
  animation-play-state: running;
}
@keyframes heroBgZoom {
  from { transform: scale(1);    }
  to   { transform: scale(1.08); }
}
/* Dots */
.hero-slider-dots {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.hero-slider-dot.active {
  background: var(--teal);
  transform: scale(1.35);
}
/* ─────────────────────────────────────────────────────────────── */
/* fallback grid when no video */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42,157,143,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,157,143,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  z-index: 2;
  animation: bounce 2.5s ease-in-out infinite;
}
.hero-scroll-hint svg {
  width: 20px; height: 20px;
  stroke: rgba(255,255,255,0.4);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.3);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-light);
  margin-bottom: 28px;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.hero-title .accent { color: var(--teal); }
.hero-typewriter-line {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 46px);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.25em;
  white-space: nowrap;
  min-height: 1.35em;
}
.hero-typewriter-line .typed {
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 6px;
  white-space: nowrap;
  display: inline-block;
  min-width: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { border-color: var(--gold); }
  50% { border-color: transparent; }
}
.hero-desc {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.8;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ctas .btn-primary { padding: 14px 32px; font-size: 15px; }
.hero-ctas .btn-outline { padding: 14px 32px; font-size: 15px; }

.hero-stats {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 40px;
  margin-top: 60px;
  padding: 28px 36px;
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.3);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: #fff;
}
.hero-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .hero-stats {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 20px;
  }
  .hero-stat-num { font-size: 24px; }
  .hero-stat-label { font-size: 11.5px; }
}

/* ── MARQUEE ── */
.marquee-strip {
  padding: 18px 0;
  background: var(--teal);
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); }

/* ── SECTIONS ── */
section { padding: 100px 0; }
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--teal);
  order: -1;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.section-title .accent { color: var(--teal); }
.section-desc {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.8;
}
.section-header {
  max-width: 600px;
  margin-bottom: 60px;
}
.section-header.centered {
  max-width: 600px;
  margin: 0 auto 60px;
  text-align: center;
}
.section-header.centered .section-label { justify-content: center; }
.section-header.centered .section-label::before { display: none; }
.section-header.centered .section-desc { margin: 0 auto; }

/* ── SERVICES ── */
#services { background: var(--bg-dark); }

/* سلايدر بيتحرك لوحده بشكل لانهائي (Loop) من غير توقف، وكمان تقدر تسحبه
   بالماوس أو باللمس يمين/شمال. الحركة والسحب بيتحكم فيهم JS (شوف آخر
   front-page.php) بنفس نمط سلايدر شعارات العملاء (.clients-slider) اللي
   شغال بالفعل في الموقع — القالب بيكرر الكروت مرتين بالظبط، وJS بيحسب عرض
   النسخة الواحدة ويلف الموضع (modulo) فمفيش أي فراغ أو قطعة تبان أبدًا مهما
   كان عدد الخدمات أو اتجاه السحب. حجم الكارت ثابت (300px) بدل ما كان
   بيتمدد ويكبر لما عدد الخدمات يكون أقل من عدد الأعمدة. */
.services-slider-wrap {
  overflow: hidden;
  cursor: grab;
  /* بافر فوق وتحت عشان رفعة الكارت عند الهوفر (translateY(-8px)) ما تتقصش
     من الحدود بتاعة overflow:hidden — بندي مساحة زيادة من غير ما نغيّر
     المكان اللي الكروت ظاهرة فيه بصريًا (margin سالب بنفس القيمة) */
  padding: 14px 0;
  margin: -14px 0;
}
.services-slider-wrap.dragging {
  cursor: grabbing;
}
.services-slider-wrap.dragging,
.services-slider-wrap.dragging * {
  user-select: none; /* يمنع تظليل النص/الصور وانت بتسحب */
}
.services-slider-track .service-card,
.services-slider-track img {
  -webkit-user-drag: none; /* يمنع "شبح" سحب اللينك/الصورة الافتراضي من المتصفح */
}
.services-slider-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.services-slider-track .service-card {
  flex: 0 0 300px;
  width: 300px;
}
@media (max-width: 640px) {
  .services-slider-track .service-card { flex: 0 0 260px; width: 260px; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
  z-index: 3;
}
.service-card:hover {
  border-color: var(--border);
  transform: translateY(-8px);
  box-shadow: none;
}
.service-card:hover::before { transform: scaleX(1); transform-origin: left; }

/* أولوية أعلى من ".reveal.visible" عشان حركة الرفع تشتغل حتى بعد ظهور الكارت بحركة الـ scroll-reveal */
.service-card.reveal.visible:hover {
  transform: translateY(-8px);
}

/* Optional background media (when a featured image is set) */
.service-card-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--transition), transform 0.6s ease;
  z-index: 0;
}
.service-card.has-media:hover .service-card-media {
  opacity: 0.18;
  transform: scale(1);
}

/* Real card thumbnail image (from featured image), full-bleed at the top of the card */
.service-card-thumb {
  margin: -24px -22px 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.service-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.service-card:hover .service-card-thumb-img {
  transform: scale(1.04);
}

/* حاوية جزء المحتوى (الأيقونة + العنوان + الوصف + الزرار) — الـ Overlay هيتحدد بيها بس
   من غير الصورة اللي فوق. flex:1 عشان تاخد كل المساحة المتبقية تحت الصورة
   لحد آخر الكارت، عشان الـ Overlay يغطي المساحة كلها من غير ما يوقف فراغ تحته */
.service-card-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── HOVER OVERLAY ──
   بيمتد بـ margins سالبة عشان ياخد عرض/ارتفاع الكارت بالكامل (لحد الحواف)
   عدا الصورة اللي فوق. -22px/-24px بيعوّضوا padding الكارت نفسه (24px 22px) */
.service-card-overlay {
  position: absolute;
  top: -24px;
  left: -22px;
  right: -22px;
  bottom: -24px;
  z-index: 2;
  background: linear-gradient(160deg, rgba(42,157,143,0.97) 0%, rgba(30,114,104,0.97) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* لما يكون فيه صورة: الأوفرلاي يبدأ من نهاية الصورة مباشرة (مش من نهاية الـ body) */
.service-card.has-media .service-card-overlay {
  top: -20px;
}
.service-card:hover .service-card-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.service-card-overlay-inner {
  text-align: center;
  width: 100%;
}
/* الأيقونة جمب اسم الخدمة (بدل ما تكون فوقه) — اسم الخدمة بياخد سطرين جمب الأيقونة */
.service-overlay-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
  text-align: right;
}
.service-card-overlay .service-icon {
  margin: 0;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}
.service-card-overlay .service-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}
.service-card-overlay .service-name {
  color: #fff;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card-overlay .service-desc {
  color: rgba(255,255,255,0.85);
  margin-bottom: 22px;
  text-align: justify;
  text-align-last: right;
}
.service-overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--teal-dark);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  transition: all var(--transition);
}
.service-overlay-btn:hover {
  background: var(--bg-card);
  color: var(--teal);
  transform: translateY(-2px);
}
.service-overlay-btn svg { stroke: currentColor; }
.service-icon {
  width: 52px; height: 52px;
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.service-icon svg {
  width: 26px; height: 26px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.service-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.service-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto; /* بيدفعه لآخر الكارت دايمًا مهما كان طول الوصف فوقه، بحيث يتساوى في مكان واحد مع كل الكروت جنبه */
  padding-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  opacity: 1;
  transform: translateX(0);
  transition: all var(--transition);
  position: relative;
  z-index: 1;
}
.service-card:hover .service-arrow { gap: 10px; }

/* ── ABOUT ── */
#about { background: var(--bg-card2); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-visual {
  position: relative;
  padding: 32px 40px 36px 44px;
}
.about-img-frame {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: visible;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-img-inner {
  width: 80%;
  height: 80%;
  background: var(--teal-glow);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.about-logo-big {
  width: 80px; height: 80px;
  background: var(--teal);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.about-logo-big svg { width: 44px; height: 44px; fill: white; }
.about-logo-big img { width: 50px; height: 50px; object-fit: contain; }
.about-brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.about-brand-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.about-float-badge {
  position: absolute;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: float 4s ease-in-out infinite;
}
.about-float-badge.b1 { bottom: -28px; right: -28px; animation-delay: 0s; z-index: 10; }
.about-float-badge.b2 { top: 24px; left: -36px; animation-delay: 2s; z-index: 10; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-icon { font-size: 22px; }
.float-text .top { font-size: 12px; color: var(--text-muted); }
.float-text .bot { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.about-text .section-header { margin-bottom: 32px; }
.about-features { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.feat-icon {
  width: 36px; height: 36px;
  min-width: 36px;
  background: var(--teal-glow);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease;
}
.feat-icon svg { width: 18px; height: 18px; }
.about-feature:hover .feat-icon {
  transform: translateY(-3px) scale(1.06);
  background: var(--teal);
  color: #fff;
}
.feat-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.feat-desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* ── PORTFOLIO (Grid With Slider) ── */
#portfolio { background: var(--bg-dark); overflow: hidden; }

.portfolio-track-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}
.portfolio-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.portfolio-page {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.portfolio-item {
  transition: transform var(--transition);
}
.portfolio-item:hover { transform: translateY(-4px); }
.portfolio-item > a {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.portfolio-more { text-align: center; margin-top: 36px; }
.portfolio-thumb {
  width: 100%;
  aspect-ratio: 437 / 404; /* نفس نسبة كارد CAFM IMS — كل الكروت بمقاس واحد */
  background-color: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.portfolio-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* تتقص الزيادة بس الكارد يبقى مليان بالكامل */
  object-position: center;
}
.portfolio-thumb-fallback {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(11, 35, 33, 0.92) 0%, rgba(15, 118, 110, 0.85) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

/* الأيقونة + "عرض المشروع" في نص الكارد */
.portfolio-view-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(10px) scale(0.92);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transition-delay: 0.05s;
}
.portfolio-item:hover .portfolio-view-cta {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.portfolio-view-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  backdrop-filter: blur(4px);
}
.portfolio-view-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

/* التصنيف + اسم المشروع — يفضلوا في القاعدة مع ظهور الـ overlay */
.portfolio-info {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  text-align: right;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.portfolio-item:hover .portfolio-info {
  transform: translateY(0);
  opacity: 1;
}
.portfolio-info .p-cat {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.portfolio-info .p-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-top: 2px;
}

/* Controls Row — الأزرار يسار (مجمعين) والـ dots يمين، نفس باترن sr-controls-row */
#portfolio .portfolio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
#portfolio .portfolio-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  order: 2; /* يسار في RTL */
}
#portfolio .portfolio-prev,
#portfolio .portfolio-next {
  width: 48px; height: 48px;
  min-width: 48px; min-height: 48px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
#portfolio .portfolio-prev svg,
#portfolio .portfolio-next svg {
  width: 18px; height: 18px;
  transition: transform 0.25s ease;
}
#portfolio .portfolio-prev:hover,
#portfolio .portfolio-next:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--teal-glow);
}
#portfolio .portfolio-prev:hover svg,
#portfolio .portfolio-next:hover svg { transform: scale(1.1); }
#portfolio .portfolio-prev:active,
#portfolio .portfolio-next:active { transform: translateY(0) scale(0.95); }

/* Dots */
#portfolio .portfolio-dots { display: flex; align-items: center; gap: 8px; order: 1; }
#portfolio .portfolio-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-subtle);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
}
#portfolio .portfolio-dot:hover { background: var(--teal-light); }
#portfolio .portfolio-dot.active {
  background: var(--teal);
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  #portfolio .portfolio-prev,
  #portfolio .portfolio-next {
    width: 42px; height: 42px;
    min-width: 42px; min-height: 42px;
    border-radius: 12px;
  }
  #portfolio .portfolio-prev svg,
  #portfolio .portfolio-next svg { width: 16px; height: 16px; }
}

/* ── PROCESS ── */
#process { background: var(--bg-card2); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 40px; right: 40px; left: 40px;
  height: 1px;
  background: var(--border);
}
.process-step {
  text-align: center;
  padding: 0 24px 40px;
  position: relative;
}
.process-num {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
  transition: all var(--transition);
  color: var(--teal);
}
.process-step:hover .process-num {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
  transform: scale(1.1);
}
.process-step:hover .process-num svg {
  stroke: white;
}
.process-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.process-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* ── TESTIMONIALS ── */
#testimonials { background: var(--bg-dark); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: all var(--transition);
}
.testimonial-card:hover {
  border-color: var(--border);
  transform: translateY(-4px);
}
.t-quote {
  font-size: 48px;
  line-height: 1;
  color: var(--teal);
  font-family: Georgia, serif;
  margin-bottom: 16px;
  opacity: 0.6;
}
.t-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
}
.t-author { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: white;
}
.av1 { background: linear-gradient(135deg, #2A9D8F, #1E7268); }
.av2 { background: linear-gradient(135deg, #E9C46A, #C9A24A); }
.av3 { background: linear-gradient(135deg, #9D2A8F, #6E1E64); }
.t-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.t-role { font-size: 12px; color: var(--text-muted); }
.t-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.t-stars span { color: var(--gold); font-size: 15px; }

/* ── CLIENTS ── */
#clients { background: var(--bg-card2); padding: 60px 0; }
.clients-title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}
.clients-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.clients-slider {
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.clients-slider.dragging { cursor: grabbing; }
.clients-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  will-change: transform;
}
.client-logo {
  padding: 6px 0;
  background: transparent;
  border: none;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  flex-shrink: 0;
}
.client-logo-text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  transition: color var(--transition);
}
.client-logo img {
  height: 150px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--transition);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.client-logo:hover { border-color: var(--border); }
.client-logo:hover .client-logo-text { color: var(--teal); }
.client-logo:hover img { filter: grayscale(0) opacity(1); }

/* ── CTA ── */
#cta-section {
  background: var(--bg-dark);
  padding: 100px 0;
}
.cta-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: var(--teal);
  filter: blur(100px);
  opacity: 0.12;
  pointer-events: none;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.cta-title .accent { color: var(--teal); }
.cta-desc { font-size: 16px; color: var(--text-secondary); max-width: 480px; margin: 0 auto 36px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-btns .btn-primary { padding: 16px 40px; font-size: 16px; }
.cta-btns .btn-outline { padding: 16px 40px; font-size: 16px; }

/* ── CONTACT ── */
#contact { background: var(--bg-card2); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.contact-info { padding-top: 8px; }
.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.c-icon {
  width: 44px; height: 44px;
  background: var(--teal-glow);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  min-width: 44px;
}
.c-label { font-size: 12px; color: var(--text-muted); }
.c-val { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-primary); margin-top: 1px; }
.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  direction: rtl;
  text-align: right;
  transition: border-color var(--transition);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--teal);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.form-submit:hover { background: var(--teal-dark); }

/* ── FOOTER ── */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: 60px 0 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand { max-width: 280px; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-logo-icon {
  width: 40px; height: 40px;
  background: var(--teal);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.footer-logo-icon svg { width: 22px; height: 22px; fill: white; }
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.footer-tagline { font-size: 13px; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 10px; }
.social-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.social-btn:hover { background: var(--teal); color: white; border-color: var(--teal); }
.footer-col-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--teal); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}
.footer-copy { font-size: 12px; color: var(--text-muted); }
.footer-copy a { color: var(--teal); text-decoration: none; }

/* ── VIDEO SLIDER 16:9 ── */
#showreel {
  background: #000;
  padding: 80px 0;
  overflow: hidden;
}
#reels-slider {
  background: #000;
  padding: 80px 0;
  overflow: hidden;
}
.slider-header { margin-bottom: 40px; }
.slider-16x9-track {
  position: relative;
  overflow: hidden;
}
.slider-16x9-inner {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.slide-16x9 {
  flex: 0 0 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: transform var(--transition);
}
.slide-16x9:hover { transform: scale(0.985); }
.slide-16x9-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* placeholder coloured bg when no real video */
.slide-bg-1 { background: linear-gradient(135deg, #0D1F2D 0%, #2A9D8F 100%); }
.slide-bg-2 { background: linear-gradient(135deg, #1A0D2E 0%, #6B2FA0 100%); }
.slide-bg-3 { background: linear-gradient(135deg, #1A1A0D 0%, #9D6A2A 100%); }
.slide-bg-4 { background: linear-gradient(135deg, #0D1A1A 0%, #2A7D4F 100%); }
.slide-16x9-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
}
.slide-play-btn {
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  cursor: pointer;
}
.slide-play-btn:hover { background: var(--teal); border-color: var(--teal); transform: scale(1.1); }
.slide-play-btn svg {
  width: 22px; height: 22px;
  fill: white;
  margin-right: -3px;
}
.slide-16x9-info { margin-top: auto; }
.slide-cat {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.slide-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: white;
}
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.slider-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.slider-arrow svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slider-arrow:hover { background: var(--teal); border-color: var(--teal); color: white; }
.slider-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.s-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.s-dot.active {
  background: var(--teal);
  width: 24px;
  border-radius: 4px;
}

/* ── VIDEO/IMG SLIDER 9:16 ── */
#social-reel {
  background: var(--bg-dark);
  padding: 80px 0;
  overflow: hidden;
}
.slider-9x16-track { position: relative; overflow: hidden; }
.slider-9x16-inner {
  display: flex;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}
.slide-9x16 {
  flex: 0 0 calc(25% - 12px);
  aspect-ratio: 9/16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--transition);
}
@media (max-width: 900px) { .slide-9x16 { flex: 0 0 calc(33.333% - 11px); } }
@media (max-width: 600px) { .slide-9x16 { flex: 0 0 calc(50% - 8px); } }
.slide-9x16:hover { transform: scale(0.97); }
.slide-9x16-inner {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end;
  padding: 18px 14px;
  position: relative;
}
.s9-bg-1 { background: linear-gradient(170deg, #0D2A27 0%, #2A9D8F 60%, #1E7268 100%); }
.s9-bg-2 { background: linear-gradient(170deg, #1a0d2e 0%, #8B5CF6 60%, #5B21B6 100%); }
.s9-bg-3 { background: linear-gradient(170deg, #0d1a1a 0%, #E9C46A 60%, #C9A24A 100%); }
.s9-bg-4 { background: linear-gradient(170deg, #1a0a0a 0%, #EF4444 60%, #B91C1C 100%); }
.s9-bg-5 { background: linear-gradient(170deg, #0a0a1a 0%, #3B82F6 60%, #1D4ED8 100%); }
.slide-9x16-info {
  position: relative;
  z-index: 1;
}
.slide-9x16-info .s-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.slide-9x16-info .s-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: white;
  line-height: 1.3;
}
.slide-9x16::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
  z-index: 1;
}
.slide-9x16-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  z-index: 2;
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.slide-9x16:hover .slide-9x16-play { background: var(--teal); border-color: var(--teal); }
.slide-9x16-play svg { width: 16px; height: 16px; fill: white; margin-right: -2px; }
/* light dots for 9:16 slider */
.sr-dots { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 28px; }
.sr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all var(--transition); border: none; }
.sr-dot.active { background: var(--teal); width: 20px; border-radius: 3px; }

/* ── VIDEO MODAL ── */
.video-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}
.video-modal-backdrop.open { display: flex; }
.video-modal-box {
  width: min(900px, 92vw);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.video-modal-close {
  position: absolute;
  top: -48px; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.video-modal-close:hover { background: var(--teal); }
.video-modal-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.video-modal-placeholder {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-display);
}
.video-modal-placeholder .vmp-icon {
  font-size: 60px;
  display: block;
  margin-bottom: 16px;
}
.video-modal-placeholder p { font-size: 15px; }


.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── MOBILE NAV ── */
.mobile-menu {
  position: fixed;
  top: 72px; right: -100%; left: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: 24px 5%;
  z-index: 4999;
  transition: right 0s 0.3s, opacity var(--transition);
  opacity: 0;
  pointer-events: none;
}
.mobile-menu.open {
  right: 0;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--transition);
}
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition);
}
.mobile-menu a:hover { background: var(--teal-glow); color: var(--teal); }
.mobile-menu .btn-primary { width: 100%; justify-content: center; margin-top: 16px; padding: 14px; font-size: 15px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-actions .btn-primary { display: none; }
  .hamburger { display: flex; }
  .hero-stats { gap: 24px; padding: 20px 22px; flex-wrap: wrap; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .process-grid::before { display: none; }
  .cta-box { padding: 48px 24px; }
  section { padding: 70px 0; }
}
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 20px rgba(42,157,143,0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 900;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); }

/* ══════════════════════════════════
   MULTI-PAGE ROUTER
══════════════════════════════════ */
[data-page] { display: none; }
[data-page].page-active { display: block; }

/* ══════════════════════════════════
   PAGE HERO BANNER (inner pages)
══════════════════════════════════ */
.page-banner {
  padding: 140px 0 70px;
  background: var(--bg-card2);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.page-banner::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--teal);
  filter: blur(120px);
  opacity: 0.1;
  pointer-events: none;
}
.page-banner-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-banner-label::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--teal);
  order: -1;
}
.page-banner h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 16px;
}
.page-banner h1 span { color: var(--teal); }
.page-banner p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.8;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumb a {
  color: var(--teal);
  text-decoration: none;
  cursor: pointer;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { opacity: 0.4; }

/* ══════════════════════════════════
   STORY PAGE
══════════════════════════════════ */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
}
.story-text h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.2;
}
.story-text h2 span { color: var(--teal); }
.story-text p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 14px;
}
.vision-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
.vision-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: all var(--transition);
}
.vision-card:hover {
  border-color: var(--border);
  transform: translateY(-4px);
}
.vision-card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.vision-card-icon svg {
  width: 24px; height: 24px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vision-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.vision-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
}
.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 80px;
}
.stat-cell {
  background: var(--bg-card);
  padding: 36px 24px;
  text-align: center;
}
.stat-cell-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  color: var(--teal);
  display: block;
}
.stat-cell-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.team-card:hover { transform: translateY(-4px); border-color: var(--border); }
.team-img {
  aspect-ratio: 1;
  background: var(--bg-card2);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}
.team-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.team-img-placeholder svg {
  width: 60px; height: 60px;
  stroke: var(--text-muted);
  fill: none; stroke-width: 1;
}
.team-info { padding: 20px; }
.team-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.team-role { font-size: 12px; color: var(--teal); font-weight: 600; }
.team-socials {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.team-social {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.team-social svg {
  width: 13px; height: 13px;
  stroke: var(--text-muted);
  fill: none; stroke-width: 2;
  stroke-linecap: round;
}
.team-social:hover { background: var(--teal); border-color: var(--teal); }
.team-social:hover svg { stroke: white; }

/* ══════════════════════════════════
   SERVICES PAGE
══════════════════════════════════ */
.services-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-full-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.service-full-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}
.service-full-card:hover {
  border-color: var(--border);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.service-full-card:hover::after { transform: scaleX(1); transform-origin: left; }
.svc-icon {
  width: 58px; height: 58px;
  border-radius: var(--radius-md);
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.svc-icon svg {
  width: 26px; height: 26px;
  stroke: var(--teal); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.svc-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.svc-desc {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.8; flex: 1;
}
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 13px; font-weight: 700;
  color: var(--teal); text-decoration: none;
  cursor: pointer;
  transition: gap var(--transition);
}
.svc-link:hover { gap: 10px; }
.svc-link svg {
  width: 14px; height: 14px;
  stroke: var(--teal); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══════════════════════════════════
   PORTFOLIO FILTER TABS
══════════════════════════════════ */
.portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.tab-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  background: transparent;
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition: background var(--transition),
              border-color var(--transition),
              color var(--transition),
              transform .2s ease,
              box-shadow .2s ease;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.tab-btn:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-2px);
}
.tab-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.tab-btn.active:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  transform: translateY(-2px);
}

/* ══════════════════════════════════
   PORTFOLIO PAGE
══════════════════════════════════ */
.portfolio-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* ══════════════════════════════════
   PORTFOLIO PAGE — Card + Full Overlay
   (يستبدل الكود القديم بنفس الاسم في style.css)
══════════════════════════════════ */

/* ══ Portfolio Card ══ */
.portfolio-page-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22,.68,0,1.2),
              box-shadow .45s ease;
  text-decoration: none;
  display: block;
}
.portfolio-page-item:hover {
  transform: translateY(-6px);
}

/* Thumbnail */
.portfolio-thumb-wrap {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  transition: transform .55s ease;
}
.portfolio-page-item:hover .portfolio-thumb-wrap {
  transform: scale(1.07);
}

/* Info strip — title/category exactly as before: always visible, no fade */
.portfolio-item-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(13,15,20,0.95) 0%, transparent 100%);
  z-index: 1;
}

.portfolio-item-cat {
  font-size: 11px; font-weight: 700;
  color: var(--teal);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 5px;
}
.portfolio-item-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Full-card overlay — covers the ENTIRE card (image + info strip),
   shows only the icon + "عرض المشروع" label on hover ── */
.portfolio-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(42,157,143,0.45) 0%,
    rgba(30,114,104,0.75) 50%,
    rgba(20,77,70,0.92) 100%
  );
  opacity: 0;
  transition: opacity .38s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* sits above thumb AND the info strip */
}
.portfolio-page-item:hover .portfolio-thumb-overlay { opacity: 1; }

/* Center icon + label */
.portfolio-view-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  transform: translateY(10px);
  transition: transform .35s ease;
}
.portfolio-page-item:hover .portfolio-view-btn {
  transform: translateY(0);
}
.portfolio-view-btn .pv-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  background: rgba(42,157,143,0.3);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, transform .25s;
}
.portfolio-page-item:hover .portfolio-view-btn .pv-icon {
  background: var(--teal);
  border-color: var(--teal);
  transform: scale(1.08);
}
.portfolio-view-btn .pv-icon svg {
  width: 22px; height: 22px;
  stroke: #fff; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.portfolio-view-btn .pv-label {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease .06s, transform .3s ease .06s;
}
.portfolio-page-item:hover .portfolio-view-btn .pv-label {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll-reveal: stagger per card ── */
.portfolio-page-item.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,.68,0,1.15);
}
.portfolio-page-item.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.portfolio-page-item.reveal.visible:hover {
  transform: translateY(-6px) scale(1);
}
/* stagger delays */
.portfolio-page-item:nth-child(3n+1) { transition-delay: 0s;    }
.portfolio-page-item:nth-child(3n+2) { transition-delay: 0.1s;  }
.portfolio-page-item:nth-child(3n+3) { transition-delay: 0.2s;  }
/* ══════════════════════════════════
   CONTACT PAGE
══════════════════════════════════ */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
  padding: 64px 0;
}
.contact-page-info { padding-top: 8px; }
.contact-page-intro {
  font-size: 15px; color: var(--text-secondary);
  line-height: 1.85; margin-bottom: 36px;
}
.contact-items { display: flex; flex-direction: column; gap: 20px; }
.contact-item {
  display: flex; align-items: flex-start; gap: 16px;
}
.contact-item-icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: var(--radius-md);
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.18);
  display: flex; align-items: center; justify-content: center;
}
.contact-item-icon svg {
  width: 20px; height: 20px;
  stroke: var(--teal); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.contact-item-label { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.contact-item-val {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
}
.contact-social-row {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.contact-social-btn {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all var(--transition);
}
.contact-social-btn svg {
  width: 16px; height: 16px;
  stroke: var(--text-muted); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.contact-social-btn:hover { background: var(--teal); border-color: var(--teal); }
.contact-social-btn:hover svg { stroke: white; }
.contact-form-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 44px;
}
.contact-form-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 28px;
}

/* ══════════════════════════════════
   RESPONSIVE INNER PAGES
══════════════════════════════════ */
@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .vision-cards { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .services-full-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-page-grid { grid-template-columns: 1fr 1fr; }
  .contact-page-grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
}
@media (max-width: 768px) {
  .vision-cards { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .services-full-grid { grid-template-columns: 1fr; }
  .portfolio-page-grid { grid-template-columns: 1fr; }
  .contact-page-grid { padding: 36px 0; gap: 32px; }
  .contact-form-wrap { padding: 28px 20px; }
  .portfolio-tabs { gap: 8px; }
  .tab-btn { font-size: 12px; padding: 7px 14px; }
}
@media (max-width: 480px) {
  .contact-page-grid { padding: 24px 0; }
  .contact-form-wrap { padding: 20px 16px; }
}

/* ══ PROCESS IMAGE SLIDER ══ */
#process-gallery { background: var(--bg-dark); padding: 0 0 80px; }
.pg-track-wrap { position: relative; overflow: hidden; }
.pg-track { display: flex; gap: 16px; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
.pg-slide {
  flex: 0 0 calc(33.333% - 11px);
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--transition);
}
.pg-slide:hover { transform: scale(0.98); }
.pg-slide-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pg-slide-play {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  z-index: 1;
}
.pg-slide:hover .pg-slide-play { background: var(--teal); border-color: var(--teal); transform: scale(1.1); }
.pg-slide-play svg { width: 18px; height: 18px; fill: white; margin-right: -2px; }
.pg-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 18px 20px;
  opacity: 0; transition: opacity var(--transition);
}
.pg-slide:hover .pg-slide-overlay { opacity: 1; }
.pg-slide-cat { font-size: 11px; font-weight: 700; color: var(--teal-light); text-transform: uppercase; letter-spacing: .08em; }
.pg-slide-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; margin-top: 2px; }
.pg-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.pg-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.pg-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-arrow:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.pg-dots { display: flex; gap: 8px; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: all var(--transition); }
.pg-dot.active { background: var(--teal); width: 24px; border-radius: 4px; }

/* ══ TESTIMONIALS SLIDER ══ */
#testimonials { background: var(--bg-card2); }
.t-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 48px;
}
.t-col-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  margin-bottom: 18px;
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
}
@media (max-width: 900px) {
  .t-two-col { grid-template-columns: 1fr; gap: 32px; }
}
.t-slider-wrap { position: relative; overflow-x: hidden; overflow-y: visible; padding-top: 6px; }
.t-slider-track { display: flex; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
#mSliderTrack { align-items: flex-start; }
.t-slide { flex: 0 0 100%; padding: 0 4px; box-sizing: border-box; }
.testimonial-card-slide {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg); padding: 36px;
  box-shadow: none;
  transition: all var(--transition);
  max-width: 800px; margin: 0 auto;
  /* الكارت ده أبيض ثابت دايماً، فبنقفل ألوان النص جواه على نسخة غامقة
     تفضل واضحة فوق الأبيض في الوضعين (لايت/دارك). */
  --text-primary: #0D1117;
  --text-secondary: #4A5568;
  --text-muted: #8A97A8;
}
.testimonial-card-slide:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: none; }
.t-slide-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.t-avatar-lg {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff;
}
.t-slide-meta .t-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-primary); }
.t-slide-meta .t-role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.t-slide-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.t-slide-stars span { color: var(--gold); font-size: 16px; }
.t-slide-quote { font-size: 38px; line-height: 1; color: var(--teal); font-family: Georgia,serif; opacity: .5; margin-bottom: 10px; }
.t-slide-text { font-size: 15px; color: var(--text-secondary); line-height: 1.85; }
/* video testimonial */
.t-video-tab-wrap { display: flex; gap: 10px; margin-bottom: 32px; justify-content: center; flex-wrap: wrap; }
.t-tab-btn {
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-subtle); background: transparent;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; gap: 7px;
}
.t-tab-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-tab-btn.active, .t-tab-btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.t-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle); color: var(--text-secondary);
  font-size: 11px; font-weight: 700; line-height: 1;
  transition: all var(--transition);
}
.t-tab-btn.active .t-tab-count, .t-tab-btn:hover .t-tab-count {
  background: rgba(255,255,255,.25); color: #fff;
}
.t-tab-panel { display: none; }
.t-tab-panel.active { display: block; }
.t-video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 32px; }
.t-video-card {
  aspect-ratio: 9/16; border-radius: var(--radius-lg); overflow: hidden;
  position: relative; cursor: pointer; transition: transform var(--transition);
}
.t-video-card:hover { transform: scale(0.97); }
.t-video-bg { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 16px; position: relative; }
.t-video-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%); }
.t-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-55%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.t-video-card:hover .t-video-play { background: var(--teal); border-color: var(--teal); }
.t-video-play svg { width: 18px; height: 18px; fill: #fff; margin-right: -2px; }
.t-video-info { position: relative; z-index: 1; }
.t-video-info .v-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff; }
.t-video-info .v-role { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }
.t-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }

/* ══ BLOG SLIDER ══ */
/* أسهم تنقل المدونة — مطابقة لشكل أسهم سكشن آراء العملاء (Story Reels) */
#blog-preview .slider-arrow {
  width: 48px; height: 48px;
  min-width: 48px; min-height: 48px;
  border-radius: 14px;
  background: rgba(13, 23, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
#blog-preview .slider-arrow svg { transition: transform 0.25s ease; }
#blog-preview .slider-arrow:hover:not(:disabled) {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--teal-glow);
}
#blog-preview .slider-arrow:hover:not(:disabled) svg { transform: scale(1.1); }
#blog-preview .slider-arrow:active:not(:disabled) { transform: translateY(0) scale(0.95); }
#blog-preview .slider-arrow:disabled {
  background: rgba(140, 150, 160, 0.18);
  border-color: rgba(140, 150, 160, 0.18);
  color: rgba(140, 150, 160, 0.7);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

#blog-preview { background: var(--bg-dark); padding: 100px 0; }
.blog-track-wrap { overflow: hidden; padding-top: 10px; margin-top: -10px; }
.blog-track { display: flex; gap: 20px; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
.blog-slide {
  flex: 0 0 calc(33.333% - 14px);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all var(--transition); cursor: pointer;
}
.blog-slide:hover { border-color: var(--teal); transform: translateY(-6px); }
.blog-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.blog-thumb-bg { width: 100%; height: 100%; transition: transform .4s ease; }
.blog-slide:hover .blog-thumb-bg { transform: scale(1.04); }
.blog-tag {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--teal); color: #fff;
  font-size: 11px; font-weight: 700;
}
.blog-body { padding: 22px 24px; }
.blog-date { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.blog-date svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.blog-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1.4; margin-bottom: 10px; }
.blog-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 18px; }
.blog-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; transition: gap var(--transition); }
.blog-readmore:hover { gap: 10px; }
.blog-readmore svg { width: 14px; height: 14px; stroke: var(--teal); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.blog-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.blog-controls .blog-arrows { display: flex; align-items: center; gap: 12px; }

/* ══ WHATSAPP CTA ══ */
#whatsapp-cta { background: var(--bg-card2); padding: 80px 0; }
.wa-cta-box {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 56px 60px;
  position: relative; overflow: hidden;
}
.wa-cta-box::before {
  content: ''; position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: #25D366; filter: blur(100px); opacity: .07; pointer-events: none;
}
.wa-label { font-size: 12px; font-weight: 700; color: #25D366; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.wa-label svg { width: 16px; height: 16px; stroke: #25D366; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.wa-title { font-family: var(--font-display); font-size: clamp(24px,2.8vw,38px); font-weight: 900; color: var(--text-primary); line-height: 1.2; margin-bottom: 14px; }
.wa-title span { color: #25D366; }
.wa-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 28px; max-width: 420px; }
.wa-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.wa-bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.wa-bullets li svg { width: 16px; height: 16px; stroke: #25D366; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wa-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  background: #25D366; color: #fff; border: none;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: all var(--transition);
}
.btn-whatsapp svg { width: 20px; height: 20px; fill: #fff; }
.btn-whatsapp:hover { background: #1EBE5A; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.35); }
.wa-choices { display: flex; flex-direction: column; gap: 14px; }
.wa-choice-card {
  background: var(--bg-card2); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px 22px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; text-decoration: none;
  transition: all var(--transition);
}
.wa-choice-card:hover { border-color: #25D366; background: rgba(37,211,102,.05); transform: translateX(4px); }
.wa-choice-icon {
  width: 48px; height: 48px; min-width: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.wa-choice-icon svg { width: 22px; height: 22px; }
.ci-consult { background: rgba(42,157,143,.12); border: 1px solid rgba(42,157,143,.2); }
.ci-consult svg { stroke: var(--teal); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ci-price { background: rgba(233,196,106,.12); border: 1px solid rgba(233,196,106,.2); }
.ci-price svg { stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ci-idea { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.2); }
.ci-idea svg { stroke: #25D366; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-choice-text .wc-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.wa-choice-text .wc-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wa-choice-arrow { margin-right: auto; }
.wa-choice-arrow svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-avail { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.wa-avail .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; animation: pulse 2s infinite; }

@media (max-width: 900px) {
  .wa-cta-box { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
  .t-video-grid { grid-template-columns: 1fr 1fr; }
  .pg-slide { flex: 0 0 calc(50% - 8px); }
  .blog-slide { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 600px) {
  .t-video-grid { grid-template-columns: 1fr; }
  .pg-slide { flex: 0 0 100%; }
  .blog-slide { flex: 0 0 100%; }
}

/* ══ AUDIO TESTIMONIALS SLIDER ══ */
.audio-slider-wrap { overflow: hidden; margin-bottom: 40px; }
.audio-track { display: flex; transition: transform 0.5s cubic-bezier(.4,0,.2,1); gap: 16px; }
.audio-slide { flex: 0 0 calc(33.333% - 11px); }
#mSliderTrack .audio-slide { flex: 0 0 100%; width: 100%; }
.audio-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg); padding: 36px;
  box-shadow: none;
  transition: all var(--transition);
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  min-height: 300px;
  --text-primary: #0D1117;
  --text-secondary: #4A5568;
  --text-muted: #8A97A8;
}
.audio-card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: none; }
.audio-card-top { display: flex; align-items: center; gap: 12px; }
.audio-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.audio-meta .a-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.audio-meta .a-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.audio-player { display: flex; align-items: center; gap: 12px; }
.audio-play-btn {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
  background: var(--teal); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.audio-play-btn:hover { background: var(--teal-dark); transform: scale(1.06); }
.audio-play-btn svg { width: 14px; height: 14px; fill: #fff; }
.audio-play-btn.playing svg { width: 13px; height: 13px; }
.audio-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; }
.audio-wave span {
  display: block; width: 3px; border-radius: 2px;
  background: var(--border); transition: background var(--transition);
}
.audio-card.is-playing .audio-wave span { background: var(--teal); animation: waveBounce 0.9s ease-in-out infinite; }
.audio-card.is-playing .audio-wave span:nth-child(odd) { animation-delay: 0.15s; }
.audio-card.is-playing .audio-wave span:nth-child(3n) { animation-delay: 0.3s; }

/* ── Video testimonial card ── */
.video-testimonial-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: none;
  transition: all var(--transition);
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  --text-primary: #0D1117;
  --text-muted: #8A97A8;
}
.video-testimonial-card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: none; }
.video-testimonial-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/10;
  cursor: pointer;
}
.video-testimonial-thumb img,
.video-testimonial-thumb-fallback {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-testimonial-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
  transition: background var(--transition);
}
.video-testimonial-thumb:hover .video-testimonial-play { background: rgba(0,0,0,0.4); }
.video-testimonial-play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition);
}
.video-testimonial-thumb:hover .video-testimonial-play-btn { transform: scale(1.08); background: rgba(255,255,255,0.25); }
.video-testimonial-play-btn svg { width: 20px; height: 20px; }
.video-testimonial-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.video-testimonial-meta .a-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.video-testimonial-meta .a-role { font-size: 11px; color: var(--text-muted); }
@keyframes waveBounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.audio-duration { font-size: 11px; color: var(--text-muted); font-family: var(--font-display); min-width: 32px; text-align: left; }
@media (max-width: 900px) { .audio-slide { flex: 0 0 calc(50% - 8px); } }
@media (max-width: 600px) { .audio-slide { flex: 0 0 100%; } }

/* Vertical list variant (used in combined media testimonials panel) */
.audio-slide-list { flex: 0 0 100%; width: 100%; }

/* ══ COMBINED MEDIA TESTIMONIALS PANEL (audio list + featured video/image) ══ */
.media-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: start;
}
.media-testimonials-audio-list {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 560px; overflow-y: auto;
  padding-right: 4px;
}
/* تعارض: نفس الكلاس ده مستخدم هنا فوق سلايدر "رأي صوتي" في الصفحة
   الرئيسية بس لتفعيل كود JS (تشغيل/إيقاف الصوت)، لكن flex-direction:
   column بتاعه كانت بتكسر اتجاه السلايدر الأفقي. الاستثناء ده بيفرض
   السلوك الصحيح للسلايدر هنا بس، من غير ما يأثر على استخدام الكلاس
   في أي صفحة تانية. */
#mSliderTrack.media-testimonials-audio-list {
  display: flex;
  flex-direction: row;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  padding-right: 0;
  gap: 0;
}
.media-testimonials-audio-list::-webkit-scrollbar { width: 6px; }
.media-testimonials-audio-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.media-featured-wrap { display: flex; flex-direction: column; gap: 14px; }
.media-featured-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer;
  transition: transform var(--transition);
}
.media-featured-card:hover { transform: scale(0.99); }
.media-featured-bg {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 22px;
}
.media-featured-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
}
.media-featured-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); z-index: 1;
}
.media-featured-card:hover .media-featured-play { background: var(--teal); border-color: var(--teal); transform: translate(-50%,-50%) scale(1.08); }
.media-featured-play svg { width: 22px; height: 22px; fill: #fff; margin-right: -3px; }
.media-featured-info { position: relative; z-index: 1; }
.media-featured-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.media-featured-source svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.media-featured-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; }

.media-thumb-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.media-thumb {
  flex: 0 0 80px; height: 56px; border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer; position: relative;
  border: 2px solid transparent; transition: all var(--transition);
}
.media-thumb.active { border-color: var(--teal); }
.media-thumb-bg { width: 100%; height: 100%; }
.media-thumb-add {
  flex: 0 0 80px; height: 56px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.media-thumb-add svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .media-testimonials-grid { grid-template-columns: 1fr; }
  .media-testimonials-audio-list { max-height: none; }
}

/* ══ GROWTH BANNER SECTION ══ */
#growth-banner { background: var(--bg-card2); padding: 90px 0; position: relative; overflow: hidden; }
#growth-banner::before {
  content: ''; position: absolute; top: -150px; right: -100px;
  width: 450px; height: 450px; border-radius: 50%;
  background: var(--teal); filter: blur(130px); opacity: .12; pointer-events: none;
}
#growth-banner::after {
  content: ''; position: absolute; bottom: -150px; left: -100px;
  width: 350px; height: 350px; border-radius: 50%;
  background: var(--gold); filter: blur(120px); opacity: .08; pointer-events: none;
}
.gb-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.gb-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,.3); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--teal-light); margin-bottom: 24px;
}
.gb-title {
  font-family: var(--font-display); font-size: clamp(28px,4vw,50px);
  font-weight: 900; color: var(--text-primary); line-height: 1.2; margin-bottom: 18px;
}
.gb-title span { color: var(--teal); }
.gb-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.85; max-width: 580px; margin: 0 auto 36px; }
.gb-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.gb-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  max-width: 760px; margin: 0 auto;
}
.gb-stat { background: var(--bg-card); padding: 28px 16px; text-align: center; }
.gb-stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--teal); display: block; }
.gb-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 768px) {
  .gb-stats { grid-template-columns: 1fr 1fr; }
}

/* ══ FIXED SOCIAL SIDEBAR ══ */
.social-sidebar {
  position: fixed;
  left: 24px; top: 50%;
  transform: translateY(-50%);
  z-index: 950;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.social-sidebar::before, .social-sidebar::after {
  content: ''; display: block; width: 1px; height: 30px;
  background: rgba(42,157,143,0.3);
}
.social-sidebar a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all var(--transition);
}
.social-sidebar a svg {
  width: 16px; height: 16px;
  stroke: var(--text-secondary); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--transition);
}
.social-sidebar a:hover {
  background: var(--teal); border-color: var(--teal);
  transform: scale(1.1) translateX(2px);
}
.social-sidebar a:hover svg { stroke: #fff; }
.social-sidebar a.wa-link:hover { background: #25D366; border-color: #25D366; }
/* Responsive sizing (not hiding) for smaller screens is defined later,
   right after the ".social-sidebar { left:24px; right:auto; }" RTL fix,
   so it reliably wins the cascade. */

/* FIX: instagram dot uses fill="currentColor" inline in markup —
   make sure it stays solid instead of being forced to fill:none */
.social-sidebar svg circle[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

/* ══ NAV DROPDOWN ══ */
.nav-item-dropdown { position: relative; }
.nav-item-dropdown > a { display: flex; align-items: center; gap: 5px; }
.nav-caret { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.nav-item-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); right: 50%;
  transform: translateX(50%) translateY(-8px);
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  padding: 10px;
  opacity: 0; pointer-events: none;
  transition: all var(--transition);
  z-index: 1100;
}
.nav-item-dropdown:hover .nav-dropdown-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(50%) translateY(0);
}
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary) !important;
  transition: all var(--transition);
}
.nav-dropdown-menu a:hover { background: var(--teal-glow); color: var(--teal) !important; }
.nav-dropdown-menu a:hover::after { display: none; }
.nav-dropdown-menu a svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.nav-dropdown-divider { height: 1px; background: var(--border-subtle); margin: 6px 4px; }

/* ══ FLOATING WHATSAPP BUTTON ══ */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  z-index: 950;
  text-decoration: none;
  transition: all var(--transition);
  animation: waFloatPulse 2.5s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(37,211,102,0.55); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
.wa-icon-close svg { fill: none !important; width: 24px; height: 24px; }
.wa-float.chat-open .wa-float-ping { display: none; }
.wa-float-ping {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; opacity: .6;
  animation: waPing 2.5s ease-out infinite;
}
@keyframes waFloatPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes waPing {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 480px) {
  .wa-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .wa-float svg { width: 25px; height: 25px; }
}

/* ══ WHATSAPP CHAT WIDGET ══ */
.wa-chat-panel {
  position: fixed;
  bottom: 100px; right: 28px;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  z-index: 951;
  overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.wa-chat-panel.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-chat-header {
  background: #25D366;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.wa-chat-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
}
.wa-chat-avatar svg { width: 22px; height: 22px; fill: #fff; }
.wa-chat-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; }
.wa-chat-status { font-size: 12px; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wa-chat-status .wd { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.wa-chat-close {
  position: absolute; left: 14px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.wa-chat-close:hover { background: rgba(255,255,255,0.3); }
.wa-chat-close svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.wa-chat-body {
  padding: 20px;
  background: var(--bg-card2);
  background-image:
    radial-gradient(circle at 20px 20px, rgba(42,157,143,0.04) 2px, transparent 2px),
    radial-gradient(circle at 50px 60px, rgba(42,157,143,0.04) 2px, transparent 2px);
  background-size: 70px 70px;
  max-height: 340px;
  overflow-y: auto;
}
.wa-chat-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  padding: 12px 16px;
  font-size: 13px; line-height: 1.75;
  color: var(--text-secondary);
  max-width: 88%;
  margin-bottom: 10px;
  animation: waChatIn 0.35s ease both;
}
.wa-chat-bubble:last-child { margin-bottom: 0; }
.wa-chat-bubble strong { color: var(--text-primary); }
@keyframes waChatIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.wa-chat-bubble:nth-child(2) { animation-delay: .12s; }
.wa-chat-bubble:nth-child(3) { animation-delay: .24s; }
.wa-chat-time { font-size: 10px; color: var(--text-muted); margin-top: 6px; text-align: left; }
.wa-quick-replies { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wa-quick-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition);
}
.wa-quick-btn:hover { border-color: #25D366; background: rgba(37,211,102,.06); transform: translateX(-2px); }
.wa-quick-btn svg { width: 15px; height: 15px; stroke: #25D366; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wa-chat-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.wa-start-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px; border-radius: var(--radius-pill);
  background: #25D366; color: #fff; border: none;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: all var(--transition);
}
.wa-start-btn:hover { background: #1EBE5A; }
.wa-start-btn svg { width: 18px; height: 18px; fill: #fff; }
@media (max-width: 480px) {
  .wa-chat-panel { right: 16px; bottom: 86px; width: calc(100vw - 32px); }
}


/* ══════════════════════════════════════════════════════
   RTL OVERRIDES — Arabic Layout Fixes
══════════════════════════════════════════════════════ */

/* Base direction */
html, body { direction: rtl; text-align: right; }

/* Inputs & textareas */
input, textarea, select { direction: rtl; text-align: right; }

/* Nav links underline animate from right */
.nav-links a::after { left: auto; right: 50%; left: 50%; }
.nav-links a:hover::after { right: 0; left: 0; }

/* Section label line on right */
.section-label { flex-direction: row-reverse; }
.section-label::before { order: 1; }

/* Hero typewriter line stays RTL naturally */

/* Process grid connector line */
.process-grid::before { right: 40px; left: 40px; }

/* About float badges — already absolute positioned, fine */

/* Footer socials row */
.footer-socials { flex-direction: row; }

/* Breadcrumb separator */
.breadcrumb-sep { transform: scaleX(-1); }

/* Page banner label */
.page-banner-label { flex-direction: row-reverse; }
.page-banner-label::before { order: 1; }

/* Blog readmore arrow direction */
.blog-readmore svg { transform: scaleX(-1); }

/* Svc-link arrow */
.svc-link svg { transform: scaleX(-1); }
.svc-link:hover { gap: 10px; }

/* Service arrow on cards */
.service-arrow { flex-direction: row-reverse; }

/* back-to-top on left (لا يتعارض مع واتساب على اليمين) */
.back-to-top { left: 28px; right: auto; }

/* Slider tracks — RTL translateX fix */
/* In RTL, translateX positive = moves left, negative = moves right */
/* Our JS uses positive X for RTL sliding which is correct */

/* Nav dropdown position */
.nav-dropdown-menu { right: 50%; left: auto; transform: translateX(50%) translateY(-8px); }
.nav-item-dropdown:hover .nav-dropdown-menu { transform: translateX(50%) translateY(0); }

/* WhatsApp chat panel */
.wa-chat-panel { right: 28px; left: auto; }

/* Social sidebar stays on left */
.social-sidebar { left: 24px; right: auto; }

/* Social sidebar — responsive sizing instead of hiding.
   Shrinks progressively on smaller screens but always stays visible. */
@media (max-width: 1024px) {
  .social-sidebar { left: 14px; gap: 8px; }
  .social-sidebar a { width: 32px; height: 32px; }
  .social-sidebar a svg { width: 14px; height: 14px; }
  .social-sidebar::before, .social-sidebar::after { height: 22px; }
}
@media (max-width: 480px) {
  .social-sidebar { left: 8px; gap: 6px; }
  .social-sidebar a { width: 28px; height: 28px; }
  .social-sidebar a svg { width: 12px; height: 12px; }
  .social-sidebar::before, .social-sidebar::after { display: none; }
}

/* Fix flex row-reverse for items that should stay LTR-looking in RTL */
.hero-stats { flex-direction: row; }
.hero-ctas { flex-direction: row; }
.wa-cta-btns { flex-direction: row; }

/* wa-choice-card hover (RTL: move right) */
.wa-choice-card:hover { transform: translateX(4px); }

/* Quote mark in testimonials */
.t-slide-quote, .t-quote { text-align: right; }

/* Forms */
.form-row { direction: rtl; }
.form-label { display: block; }

/* Marker on process-grid horizontal line */
@media (max-width: 768px) {
  .back-to-top { left: 20px; right: auto; }
  .wa-chat-panel { right: 16px; left: 16px; }
}

/* ============================================================
   REEL SECTION — Container + Track
   ============================================================ */

.gec-reel-section {
    padding: 60px 0;
}

.gec-reel-track-wrap {
    overflow: hidden;
    width: 100%;
}

.reel-slider-inner {
    display: flex;
    gap: 16px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.slide-9x16 {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: #0a1a1a;
}

@media (max-width: 900px) {
    .slide-9x16 { width: 220px; }
}

@media (max-width: 600px) {
    .slide-9x16 { width: 160px; }
}

.slide-9x16-inner {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.slide-9x16-info {
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    width: 100%;
}

.slide-9x16-info .s-label {
    color: #8DC63F;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.slide-9x16-info .s-name {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}


/* ============================================================
   REEL NAV ROW — توزيع: الأزرار (يسار) والـ dots (يمين) متباعدين
   ============================================================ */

.gec-reel-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.gec-reel-btns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gec-reel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── الأزرار: مربع بزوايا دائرية + زجاجي غامق (نفس ستايل Gallery) ── */
.gec-reel-prev,
.gec-reel-next {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 14px;
    background: rgba(10, 26, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease,
                transform 0.25s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.gec-reel-prev svg,
.gec-reel-next svg {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}

.gec-reel-prev:hover,
.gec-reel-next:hover {
    background: rgba(141, 198, 63, 0.85);
    border-color: #8DC63F;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(141, 198, 63, 0.3);
}

.gec-reel-prev:hover svg,
.gec-reel-next:hover svg {
    transform: scale(1.1);
}

.gec-reel-prev:active,
.gec-reel-next:active {
    transform: translateY(0) scale(0.95);
}

@media (max-width: 640px) {
    .gec-reel-nav-row {
        margin-top: 18px;
    }
    .gec-reel-prev,
    .gec-reel-next {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 12px;
    }
    .gec-reel-prev svg,
    .gec-reel-next svg {
        width: 18px;
        height: 18px;
    }
}

/* نقاط الـ dots (sr-dot) — بتُبنى ديناميكياً جوه #reelDots عبر main.js */
.sr-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sr-dot.active {
    background: #8DC63F;
    width: 24px;
    border-radius: 4px;
}


/* ============================================================
   REEL SLIDE — Thumbnail Canvas + Play Button
   ============================================================ */

/* الفيديو يكون مخفي بصرياً قبل ما الكانفاس يجهز (يمنع وميض فريم أسود) */
.slide-9x16-thumb-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.slide-9x16-thumb-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slide-9x16-thumb-canvas.is-ready {
    opacity: 1;
}

/* زرار الـ Play على كل سلايد فيديو */
.slide-9x16-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(10, 26, 26, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.slide-9x16-play svg {
    width: 22px;
    height: 22px;
}

.slide-9x16[data-video-url] {
    cursor: pointer;
}

.slide-9x16[data-video-url]:hover .slide-9x16-play {
    transform: translate(-50%, -50%) scale(1.12);
    background: rgba(141, 198, 63, 0.85);
    border-color: #8DC63F;
}


/* ============================================================
   REEL FULLSCREEN VIEWER — Modal بمقاس 9:16
   ============================================================ */

.reel-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(5, 12, 12, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 24px;
}

.reel-fs-overlay.open {
    opacity: 1;
    visibility: visible;
}

.reel-fs-stage {
    position: relative;
    width: min(92vw, calc(92vh * 9 / 16));
    height: min(92vh, calc(92vw * 16 / 9));
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

.reel-fs-overlay.open .reel-fs-stage {
    transform: scale(1);
}

.reel-fs-video,
.reel-fs-iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
    border: none;
}

.reel-fs-close {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(10, 26, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.reel-fs-close svg {
    width: 18px;
    height: 18px;
}

.reel-fs-close:hover {
    background: rgba(220, 38, 38, 0.75);
    border-color: rgba(220, 38, 38, 0.9);
}

.reel-fs-info {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    max-width: 70%;
    text-align: right;
    pointer-events: none;
}

.reel-fs-label {
    display: inline-block;
    background: rgba(141, 198, 63, 0.9);
    color: #0a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.reel-fs-label:empty {
    display: none;
}

.reel-fs-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
    .reel-fs-overlay {
        padding: 0;
    }
    .reel-fs-stage {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}
/* ══════════════════════════════════════════════════════════
   SINGLE PORTFOLIO ITEM – PROVISION STUDIO
   أضف هذا الكود في نهاية ملف style.css
══════════════════════════════════════════════════════════ */

/* ── HERO ── */
.pf-hero-wrap {
  position: relative;
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  display: block;
}
.pf-hero-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(13,15,20,0.7) 100%);
  pointer-events: none;
}
.pf-hero-badge {
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.pf-hero-placeholder {
  height: 280px;
  background: var(--bg-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── INFO GRID ── */
.pf-info-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: start;
}

.pf-brief .section-title { margin-bottom: 20px; }
.pf-content {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.9;
}
.pf-content p { margin-bottom: 16px; }
.pf-content p:last-child { margin-bottom: 0; }
.pf-content h2, .pf-content h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 24px 0 10px;
}

/* Meta Card */
.pf-meta-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: sticky;
  top: 90px;
}
.pf-meta-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.pf-meta-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.pf-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pf-meta-item:last-child { border-bottom: none; }
.pf-meta-icon {
  width: 32px; height: 32px; min-width: 32px;
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.pf-meta-icon svg { stroke: var(--teal); }
.pf-meta-label {
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px;
}
.pf-meta-val {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.pf-meta-link { color: var(--teal); text-decoration: none; word-break: break-all; }
.pf-meta-link:hover { text-decoration: underline; }

/* ── HERO VIDEO (يحل محل السلايد) ── */
.pf-hero-video-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  margin-bottom: 16px;
  width: 100%;
}
/* Landscape 16:9 */
.pf-hero-video--landscape {
  aspect-ratio: 16 / 9;
}
/* Portrait 9:16 — مُحاط بـ wrapper يضبطه في المنتصف */
.pf-hero-video--portrait {
  max-width: 420px;
  aspect-ratio: 9 / 16;
  margin-left: auto;
  margin-right: auto;
}
/* Square 1:1 — مُحاط بـ wrapper يضبطه في المنتصف */
.pf-hero-video--square {
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
}
.pf-hero-video-wrap iframe,
.pf-hero-video-wrap video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: contain;
}

/* ── SLIDER ── */
.pf-slider-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.pf-slider-track {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
/* مقاس صور السلايدر — نفس منطق اتجاه الفيديو، بيتحكم فيه من الميتا بوكس */
.pf-slider-wrap.pf-slider--landscape .pf-slider-track {
  aspect-ratio: 16/9;
}
.pf-slider-wrap.pf-slider--portrait {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.pf-slider-wrap.pf-slider--portrait .pf-slider-track {
  aspect-ratio: 9/16;
}
.pf-slider-wrap.pf-slider--square {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.pf-slider-wrap.pf-slider--square .pf-slider-track {
  aspect-ratio: 1/1;
}
.pf-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.pf-slide.active { opacity: 1; pointer-events: auto; }
.pf-slide-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  position: relative;
}
.pf-slide-zoom {
  position: absolute;
  bottom: 16px; left: 16px;
  width: 40px; height: 40px;
  background: rgba(13,15,20,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: white;
  transition: all var(--transition);
}
.pf-slide-zoom:hover { background: var(--teal); border-color: var(--teal); }
.pf-slide-embed { width: 100%; height: 100%; }
.pf-slide-embed iframe,
.pf-slide-embed video {
  width: 100%; height: 100%;
  border: none; display: block; object-fit: cover;
}

.pf-slider-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(13,15,20,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: white; z-index: 5;
  transition: all var(--transition);
}
.pf-slider-btn:hover { background: var(--teal); border-color: var(--teal); }
.pf-slider-prev { right: 16px; }
.pf-slider-next { left: 16px; }
.pf-slider-counter {
  position: absolute;
  bottom: 16px; right: 50%; transform: translateX(50%);
  background: rgba(13,15,20,0.6);
  backdrop-filter: blur(8px);
  color: white;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
}

.pf-slider-thumbs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.pf-thumb-btn {
  width: 80px; height: 54px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  overflow: hidden; cursor: pointer; padding: 0;
  position: relative; background: var(--bg-card);
  transition: all var(--transition); flex-shrink: 0;
}
.pf-thumb-btn:hover { border-color: var(--text-muted); }
.pf-thumb-btn.active { border-color: var(--teal); }
.pf-thumb-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}
.pf-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
}

/* ── GALLERY ── */
.pf-gallery-header {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 32px;
}
/* Grid Layout — كل صورة بمقاسها الطبيعي داخل عمودها، بدون أي قص */
.pf-gallery[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.pf-gallery[data-layout="grid"] .pf-gallery-item {
  cursor: pointer; border-radius: var(--radius-lg); overflow: hidden;
}
.pf-gallery[data-layout="grid"] .pf-gallery-thumb {
  width: 100%;
  position: relative;
  display: block;
  transition: transform 0.4s ease;
}
.pf-gallery[data-layout="grid"] .pf-gallery-thumb img,
.pf-gallery[data-layout="grid"] .pf-gallery-thumb video {
  width: 100%;
  height: auto;
  display: block;
}
.pf-gallery[data-layout="grid"] .pf-gallery-item:hover .pf-gallery-thumb { transform: scale(1.04); }

/* List Layout — كل الصور تحت بعض بعرض كامل ونسبة ثابتة 16:9 (نفس الموقع المرجعي) */
.pf-gallery[data-layout="list"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pf-gallery[data-layout="list"] .pf-gallery-item {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.pf-gallery[data-layout="list"] .pf-gallery-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  display: block;
  background: var(--bg-card);
}
.pf-gallery[data-layout="list"] .pf-gallery-thumb img,
.pf-gallery[data-layout="list"] .pf-gallery-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Landing Layout — للصور الطويلة (تصميمات Landing Page)، عرض كامل وارتفاع طبيعي دون أي قص */
.pf-gallery[data-layout="landing"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pf-gallery[data-layout="landing"] .pf-gallery-item {
  width: 100%;
  cursor: pointer;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pf-gallery[data-layout="landing"] .pf-gallery-thumb {
  width: 100%;
  position: relative;
  display: block;
}
.pf-gallery[data-layout="landing"] .pf-gallery-thumb img,
.pf-gallery[data-layout="landing"] .pf-gallery-thumb video {
  width: 100%;
  height: auto;
  display: block;
}

/* Square Slider Layout — سلايدر مربع 1:1 للصور (مناسب لصور السوشيال ميديا/البوستات) */
.pf-gallery[data-layout="square"] .pf-gallery-slider {
  width: 100%;
  padding-bottom: 44px; /* مساحة لعناصر الـ pagination تحت السلايدر */
  position: relative;
}
.pf-gallery[data-layout="square"] .pf-gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  height: auto;
}
.pf-gallery[data-layout="square"] .pf-gallery-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  display: block;
  background: var(--bg-card);
}
.pf-gallery[data-layout="square"] .pf-gallery-thumb img,
.pf-gallery[data-layout="square"] .pf-gallery-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pf-gallery[data-layout="square"] .pf-gallery-nav-prev,
.pf-gallery[data-layout="square"] .pf-gallery-nav-next {
  width: 44px; height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--teal);
  top: 45%;
}
.pf-gallery[data-layout="square"] .pf-gallery-nav-prev::after,
.pf-gallery[data-layout="square"] .pf-gallery-nav-next::after {
  font-size: 16px;
  font-weight: 700;
}
.pf-gallery[data-layout="square"] .pf-gallery-nav-prev:hover,
.pf-gallery[data-layout="square"] .pf-gallery-nav-next:hover {
  background: var(--teal);
  color: var(--bg-dark);
}
.pf-gallery[data-layout="square"] .pf-gallery-pagination {
  bottom: 0;
}
.pf-gallery[data-layout="square"] .pf-gallery-pagination .swiper-pagination-bullet {
  background: var(--border-subtle);
  opacity: 1;
  width: 8px; height: 8px;
}
.pf-gallery[data-layout="square"] .pf-gallery-pagination .swiper-pagination-bullet-active {
  background: var(--teal);
  width: 22px;
  border-radius: var(--radius-pill);
}

/* Shared overlay */
.pf-gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,15,20,0.92) 0%, rgba(13,15,20,0.4) 55%, transparent 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  opacity: 0; transition: opacity .35s ease;
}
.pf-gallery-item:hover .pf-gallery-overlay { opacity: 1; }
.pf-gallery-item:hover .pf-gallery-overlay .pv-label {
  transform: translateY(0);
  opacity: 1;
}

/* Video gallery items — بيتعرض بنفس صندوق العرض بالظبط، فقط بادچ صغير للتمييز */
.pf-gallery-item-video .pf-gallery-thumb video { background: #000; }
.pf-gallery-video-badge {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(13,15,20,0.75);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-pill);
  pointer-events: none; z-index: 2;
}

/* ── PREV / NEXT ── */
.pf-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pf-nav-card {
  display: block; text-decoration: none;
  border-radius: var(--radius-xl); overflow: hidden;
  transition: transform var(--transition);
}
.pf-nav-card:hover { transform: translateY(-4px); }
.pf-nav-card--next .pf-nav-thumb { align-items: flex-end; text-align: left; }
.pf-nav-card--next .pf-nav-info { text-align: left; }
.pf-nav-thumb {
  aspect-ratio: 16/7;
  background: var(--bg-card);
  background-size: cover; background-position: center;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden;
}
.pf-nav-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,15,20,0.88) 0%, rgba(13,15,20,0.35) 60%, transparent 100%);
  pointer-events: none;
}
.pf-nav-dir {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--teal-light);
  text-transform: uppercase; letter-spacing: 0.08em;
  position: relative; z-index: 1;
}
.pf-nav-dir--left { justify-content: flex-end; }
.pf-nav-info { position: relative; z-index: 1; }
.pf-nav-cat {
  font-size: 11px; font-weight: 700; color: var(--teal-light);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}
.pf-nav-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: white; line-height: 1.3;
}

/* ── MORE PROJECTS SLIDER ── */
.pf-more-section {
  background: var(--bg-card2);
  padding: 80px 0;
}
.pf-more-wrap {
  position: relative;
}
.pf-more-viewport {
  width: 100%;
  overflow: hidden;
  /* padding علوي يستوعب مسافة ارتفاع الكارت عند hover (translateY)
     من غير ما يقطعها القص */
  padding-top: 8px;
  margin-top: -8px;
}
.pf-more-track {
  display: flex;
  gap: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.pf-more-card {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0 10px;
  box-sizing: border-box;
  transition: transform var(--transition);
}
.pf-more-card:hover { transform: translateY(-4px); }
.pf-more-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-card);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 18px 18px;
}
.pf-more-info {
  position: relative;
  z-index: 1;
}

/* ── Full-card teal hover overlay (same as portfolio archive cards) ── */
.pf-more-hover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(42,157,143,0.45) 0%,
    rgba(30,114,104,0.75) 50%,
    rgba(20,77,70,0.92) 100%
  );
  opacity: 0;
  transition: opacity .38s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pf-more-card:hover .pf-more-hover-overlay { opacity: 1; }

.pf-more-view-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  transform: translateY(10px);
  transition: transform .35s ease;
}
.pf-more-card:hover .pf-more-view-btn {
  transform: translateY(0);
}
.pf-more-view-btn .pv-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  background: rgba(42,157,143,0.3);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, transform .25s;
}
.pf-more-card:hover .pf-more-view-btn .pv-icon {
  background: var(--teal);
  border-color: var(--teal);
  transform: scale(1.08);
}
.pf-more-view-btn .pv-icon svg {
  width: 22px; height: 22px;
  stroke: #fff; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pf-more-view-btn .pv-label {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease .06s, transform .3s ease .06s;
}
.pf-more-card:hover .pf-more-view-btn .pv-label {
  opacity: 1;
  transform: translateY(0);
}

/* Controls Row — الأزرار يسار (مجمعين) والـ Dots يمين، نفس باترن sr-controls-row */
.pf-more-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.pf-more-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  order: 2; /* يسار في RTL */
}

/* الأزرار: مربع بزوايا دائرية + زجاجي، Theme-aware (يشتغل في الوضع الفاتح والغامق) */
.pf-more-prev,
.pf-more-next {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.25s ease, box-shadow 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.pf-more-prev svg,
.pf-more-next svg {
  width: 18px; height: 18px;
  transition: transform 0.25s ease;
}
.pf-more-prev:hover,
.pf-more-next:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--teal-glow);
}
.pf-more-prev:hover svg,
.pf-more-next:hover svg { transform: scale(1.1); }
.pf-more-prev:active,
.pf-more-next:active { transform: translateY(0) scale(0.95); }

/* Dots Navigation */
.pf-more-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  order: 1; /* يمين في RTL */
}
.pf-more-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--border-subtle);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
}
.pf-more-dot:hover { background: var(--teal-light); }
.pf-more-dot.active {
  width: 28px;
  background: var(--teal);
}

@media (max-width: 1100px) {
  .pf-more-controls { margin-top: 22px; }
}
@media (max-width: 640px) {
  .pf-more-section { padding: 60px 0; }
  .pf-more-card { padding: 0 6px; }
  .pf-more-controls { margin-top: 20px; }
  .pf-more-prev, .pf-more-next {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px;
    border-radius: 12px;
  }
}

/* ── COMMENTS ── */
.pf-comments-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: start;
}
.pf-comments-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.pf-comment-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 24px;
  transition: border-color var(--transition);
}
.pf-comment-card:hover { border-color: var(--border); }
.pf-comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pf-comment-avatar { flex-shrink: 0; }
.pf-avatar-img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--teal-glow);
}
.pf-comment-meta { flex: 1; }
.pf-comment-author {
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.pf-comment-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pf-comment-stars { display: flex; gap: 2px; margin-right: auto; }
.pf-comment-text { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }

.pf-comment-form-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 32px;
}
.pf-comment-form-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--text-primary); margin-bottom: 24px;
}
.pf-comment-form { display: flex; flex-wrap: wrap; gap: 14px; }
.pf-field-row {
  flex: 1 1 calc(50% - 7px);
  display: flex; flex-direction: column; gap: 6px; margin: 0 !important;
}
.pf-field-row label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pf-field-full { flex: 1 1 100%; }
.pf-input {
  background: var(--bg-card2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important; padding: 11px 14px !important;
  width: 100% !important;
  transition: border-color var(--transition) !important;
  outline: none !important; box-shadow: none !important;
}
.pf-input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--teal-glow) !important;
}
.pf-textarea { resize: vertical; min-height: 120px; }
.pf-comment-form .form-submit { flex: 1 1 100%; margin: 4px 0 0 !important; }

/* CTA Box */
.pf-cta-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 32px;
  position: sticky; top: 90px; text-align: center;
}
.pf-cta-icon {
  width: 64px; height: 64px;
  background: var(--teal-glow); border: 1px solid rgba(42,157,143,0.2);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.pf-cta-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--text-primary); margin-bottom: 10px;
}
.pf-cta-desc {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.75; margin-bottom: 24px;
}

/* ── LIGHTBOX ── */
.pf-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.pf-lightbox.open { opacity: 1; pointer-events: auto; }
.pf-lightbox-img {
  max-width: 92vw; max-height: 90vh;
  object-fit: contain; border-radius: var(--radius-lg); display: block;
}
.pf-lightbox-close {
  position: absolute; top: 20px; left: 20px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.pf-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.pf-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.pf-lightbox-nav:hover { background: var(--teal); border-color: var(--teal); }
.pf-lb-prev { right: 24px; }
.pf-lb-next { left: 24px; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1200px) {
  .pf-info-grid,
  .pf-comments-grid { grid-template-columns: 1fr; gap: 40px; }
  .pf-meta-card,
  .pf-cta-box { position: static; }
  .pf-gallery[data-layout="grid"] { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1024px) {
  .pf-info-grid { gap: 32px; }
}
@media (max-width: 768px) {
  .pf-hero-wrap,
  .pf-hero-img { max-height: 300px; }
  .pf-nav-grid { grid-template-columns: 1fr; }
  .pf-gallery[data-layout="grid"] { grid-template-columns: 1fr 1fr; }
  .pf-thumb-btn { width: 64px; height: 44px; }
  .pf-comment-form { flex-direction: column; }
  .pf-field-row { flex: 1 1 100%; }
  .pf-meta-card { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .pf-gallery[data-layout="grid"] { grid-template-columns: 1fr; }
  .pf-nav-title { font-size: 15px; }
  .pf-slider-btn { width: 36px; height: 36px; }
  .pf-lb-prev { right: 10px; }
  .pf-lb-next { left: 10px; }
  .pf-content { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════
   SINGLE PORTFOLIO ITEM – تصغير حجم العناوين الرئيسية فقط
   (مقيّد بـ .pf-page حتى لا يؤثر على باقي صفحات الموقع)
══════════════════════════════════════════════════════════ */
.pf-page .page-banner h1 {
  font-size: clamp(24px, 3vw, 38px);
}
.pf-page .section-title {
  font-size: clamp(20px, 2.4vw, 32px);
}

/* ══════════════════════════════════════════════════════════
   صفحة المقال المنفرد – تصغير عنوان المقال ليكون متناسب
   (مقيّد بـ .single-post حتى لا يؤثر على باقي صفحات الموقع)
══════════════════════════════════════════════════════════ */
.single-post .page-banner h1 {
  font-size: clamp(24px, 3vw, 38px);
}

/* ══════════════════════════════════════════════════════════
   HERO أرشيف المدونة – خلفية صورة اختيارية (زي هيرو صفحة الخدمة)
══════════════════════════════════════════════════════════ */
.blog-archive-hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.12) translate(0, 0);
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.blog-archive-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 26, 0.72) 0%, rgba(10, 26, 26, 0.92) 100%);
  z-index: 0;
}
#blog-archive-hero.has-media .section-label { color: var(--teal); }
#blog-archive-hero.has-media .section-title,
#blog-archive-hero.has-media .section-title .accent { color: #fff; }
#blog-archive-hero.has-media .section-desc { color: rgba(255, 255, 255, 0.85); }
/* ══════════════════════════════════════════════════════════
   PROJECT BRIEF + CLIENT TESTIMONIAL — Single Portfolio Item
   عمودان متساويان (50/50): نبذة المشروع (يمين) / رأي العميل (شمال)
   (أضف هذا الكود في نهاية ملف style.css)
══════════════════════════════════════════════════════════ */

.pf-brief-testimonial-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
/* لو لا يوجد رأي عميل، النبذة تاخد العرض كامل */
.pf-brief-testimonial-grid.pf-no-testimonial {
  grid-template-columns: 1fr;
}
.pf-brief-testimonial-grid.pf-no-testimonial .pf-brief {
  max-width: 860px;
}

.pf-brief .section-title,
.pf-testimonial-col .section-title { margin-bottom: 20px; }

/* ── Testimonial Column ── */
.pf-testimonial-col {
  display: flex;
  flex-direction: column;
}

.pf-testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.pf-testimonial-card::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--teal);
  filter: blur(100px);
  opacity: 0.1;
  pointer-events: none;
}

/* Stars */
.pf-testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

/* Author (avatar + name + role) — appears at top of card, above stars */
.pf-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.pf-testimonial-avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-testimonial-avatar span {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
}
.pf-testimonial-author-info { line-height: 1.5; }
.pf-testimonial-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.pf-testimonial-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Text */
.pf-testimonial-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

/* Voice block — appears last, separated with a top border */
.pf-testimonial-voice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  z-index: 1;
}
.pf-testimonial-audio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pf-testimonial-audio-label svg { stroke: var(--teal); }
.pf-testimonial-audio {
  width: 100%;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pf-brief-testimonial-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 600px) {
  .pf-testimonial-card { padding: 24px; }
}

/* حركة عند مرور الماوس على لوجو بروفيجن ستديو */
.cp-brand-logo {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* حركة عند مرور الماوس على لوجو بروفيجن ستديو — رفعة لفوق بدون أي ظل */
.cp-brand-logo {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cp-brand-logo:hover {
  transform: translateY(-6px);
}

/* ══════════════════════════════════════════════════════════
   STORY REELS SLIDER — Template Part
══════════════════════════════════════════════════════════ */

.story-reels-section {
  background: var(--bg-dark);
  padding: 80px 0;
  overflow: hidden;
}

/* Track */
.sr-track-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}

.story-reels-section .slider-9x16-inner {
  cursor: grab;
}
.story-reels-section .slider-9x16-inner.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* ── Overlay Fix ──────────────────────────────────────────────
   السبب: فيه تعريف قديم لـ .slide-9x16-info (من سيكشن #social-reel
   القديم) بيحط الـ gradient جوه صندوق صغير بمساحة الـ padding بس
   (16px) مش على مساحة الكارت كله، فالتأثير كان شبه مش ظاهر خصوصاً
   على الصور الفاتحة. هنا بنشيل الـ background دي ونرجّع الاعتماد
   على ::before (تحت) اللي بيغطي مساحة الكارت بالكامل.
*/
.story-reels-section .slide-9x16-info {
  background: none;
  padding: 0;
}

.story-reels-section .slide-9x16::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.32) 45%, transparent 78%);
  z-index: 1;
  pointer-events: none;
}

/* Controls Row — الأزرار يسار (مجمعين) والـ dots يمين، Scoped جوه .story-reels-section عشان منعارض مع #social-reel القديم */
.story-reels-section .sr-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.story-reels-section .sr-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  order: 2; /* يسار في RTL */
}

/* Arrows — مربع بزوايا دائرية + زجاجي غامق */
.story-reels-section .sr-prev,
.story-reels-section .sr-next {
  width: 48px; height: 48px;
  min-width: 48px; min-height: 48px;
  border-radius: 14px;
  background: rgba(13, 23, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.story-reels-section .sr-prev svg,
.story-reels-section .sr-next svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.story-reels-section .sr-prev:hover:not(:disabled),
.story-reels-section .sr-next:hover:not(:disabled) {
  background: var(--teal);
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--teal-glow);
}
.story-reels-section .sr-prev:hover:not(:disabled) svg,
.story-reels-section .sr-next:hover:not(:disabled) svg { transform: scale(1.1); }
.story-reels-section .sr-prev:active:not(:disabled),
.story-reels-section .sr-next:active:not(:disabled) { transform: translateY(0) scale(0.95); }

/* حالة Disabled — نفس شكل السهم الباهت في أول/آخر سلايد */
.story-reels-section .sr-prev:disabled,
.story-reels-section .sr-next:disabled {
  background: rgba(140, 150, 160, 0.18);
  border-color: rgba(140, 150, 160, 0.18);
  color: rgba(140, 150, 160, 0.7);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Dots */
.story-reels-section .sr-dots { display: flex; align-items: center; gap: 8px; order: 1; }
.story-reels-section .sr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
}
.story-reels-section .sr-dot.active {
  background: var(--teal);
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .story-reels-section .sr-prev,
  .story-reels-section .sr-next {
    width: 42px; height: 42px;
    min-width: 42px; min-height: 42px;
    border-radius: 12px;
  }
  .story-reels-section .sr-prev svg,
  .story-reels-section .sr-next svg { width: 16px; height: 16px; }
}

/* Video Modal — 9:16 */
.sr-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.93);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}
.sr-modal-backdrop.open { display: flex; }

.sr-modal-box {
  width: min(380px, 92vw);
  aspect-ratio: 9/16;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.sr-modal-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sr-modal-close {
  position: absolute;
  top: 20px; left: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background var(--transition);
  z-index: 10;
}
.sr-modal-close:hover { background: rgba(255,255,255,0.25); }

/* Responsive */
@media (max-width: 900px) {
  .story-reels-section { padding: 60px 0; }
}
@media (max-width: 600px) {
  .story-reels-section { padding: 48px 0; }
  .sr-modal-box { width: min(320px, 90vw); }
}
/* ══════════════════════════════════════════════════════════
   SERVICE PAGE — Brand Identity (تصميم الهوية البصرية)
   كل الكلاسات هنا بريفكس bi- أو price- عشان منتعارضش مع أي
   كومبوننت تاني في الملف. أضف البلوك ده في آخر style.css.
══════════════════════════════════════════════════════════ */

/* ── Intro ── */
.bi-intro { background: var(--bg-dark); padding: 64px 0 0; }
.bi-intro p {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  color: var(--text-secondary);
}

/* ── Principles Grid ── */
.bi-principles { background: var(--bg-dark); padding: 80px 0; }
.bi-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.principle-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--transition);
}
.principle-card:hover {
  transform: translateY(-4px);
  border-color: var(--border);
}
.principle-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--teal-glow);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.principle-icon svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; }
.principle-icon i { font-size: 20px; line-height: 1; color: var(--teal); }
.principle-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.principle-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.85; }

@media (max-width: 900px) { .bi-principles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bi-principles-grid { grid-template-columns: 1fr; } }

/* ── Deliverables Tabs ── */
.bi-deliverables { background: var(--bg-card2); padding: 80px 0; }
.bi-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px 0;
}
.bi-tab-panel { display: none; }
.bi-tab-panel.active { display: block; animation: bi-fade-up .4s ease; }
@keyframes bi-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bi-deliverable-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bi-deliverable-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.bi-deliverable-item svg { width: 16px; height: 16px; stroke: var(--teal); flex-shrink: 0; }

@media (max-width: 900px) { .bi-deliverable-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bi-deliverable-list { grid-template-columns: 1fr; } }

/* ── Portfolio Section spacing (الشبكة نفسها موجودة بالفعل) ── */
.bi-portfolio { background: var(--bg-dark); padding: 80px 0; }
.bi-portfolio .portfolio-page-grid { margin-top: 48px; }
.bi-portfolio-more { text-align: center; margin-top: 36px; }
.bi-portfolio-empty { text-align: center; color: var(--text-muted); font-size: 14px; margin-top: 24px; }

/* ── Pricing ── */
.bi-pricing { background: var(--bg-card2); padding: 80px 0; }
.price-table-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 48px;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition);
}
.price-card:hover { transform: translateY(-6px); border-color: var(--border); }
.price-card.featured {
  border-color: var(--teal);
  background: linear-gradient(180deg, var(--teal-glow), var(--bg-card) 45%);
  box-shadow: 0 20px 50px rgba(42,157,143,0.18);
}
.price-badge {
  position: absolute;
  top: -14px; right: 50%;
  transform: translateX(50%);
  background: var(--teal);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  white-space: nowrap;
}
.price-name { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-primary); }
.price-tagline { font-size: 13px; color: var(--text-muted); margin-top: 4px; margin-bottom: 22px; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-amount .currency { font-size: 18px; font-weight: 700; color: var(--teal); }
.price-amount .value { font-family: var(--font-display); font-size: 38px; font-weight: 900; color: var(--text-primary); }
.price-note { font-size: 12px; color: var(--text-muted); margin-bottom: 26px; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; padding: 0; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.price-features li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; stroke: var(--teal); fill: none; }
.price-cta { margin-top: auto; }

@media (max-width: 1100px) { .price-table-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .price-table-grid { grid-template-columns: 1fr; } }

/* ── CTA spacing (الـ .cta-box نفسه جاهز بالفعل) ── */
.bi-cta { background: var(--bg-dark); padding: 80px 0; }
/* ══════════════════════════════════
   PRIVACY POLICY PAGE
══════════════════════════════════ */
.privacy-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-dark);
}
.privacy-updated-badge svg { color: var(--gold); }

/* Highlights */
.privacy-highlights { padding: 56px 0 16px; }
.privacy-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.privacy-highlight-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: var(--transition);
}
.privacy-highlight-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
}
.privacy-highlight-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--teal-glow);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.privacy-highlight-card h4 {
  font-family: var(--font-display);
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.privacy-highlight-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Layout */
.privacy-main { padding: 50px 0 100px; }
.privacy-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* TOC */
.privacy-toc {
  position: sticky;
  top: 100px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  align-self: start;
  z-index: 1;
}
.privacy-toc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.privacy-toc-list { display: flex; flex-direction: column; gap: 4px; }
.privacy-toc-link {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border-right: 2px solid transparent;
  transition: var(--transition);
  display: block;
}
.privacy-toc-link:hover { background: var(--surface); color: var(--text-primary); }
.privacy-toc-link.active {
  color: var(--teal);
  background: var(--teal-glow);
  border-right-color: var(--teal);
  font-weight: 600;
}

/* Content */
.privacy-content { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.privacy-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px;
  scroll-margin-top: 110px;
}
.privacy-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.privacy-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--teal);
  background: var(--teal-glow);
  border-radius: var(--radius-md);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.privacy-section-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.privacy-section p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 14px;
}
.privacy-subhead {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
  margin: 18px 0 10px;
}
.privacy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0;
}
.privacy-list li {
  position: relative;
  padding-right: 22px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.8;
}
.privacy-list li::before {
  content: '';
  position: absolute;
  right: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--teal);
}

/* Callout */
.privacy-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--teal-glow);
  border-right: 3px solid var(--teal);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 8px;
}
.privacy-callout svg { color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.privacy-callout p { margin: 0; color: var(--text-primary); font-size: 14px; }

/* Contact cards */
.privacy-contact-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
}
.privacy-contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
}
.privacy-contact-card svg { color: var(--teal); }
.privacy-contact-card:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.privacy-contact-card:hover svg { color: #fff; }
.privacy-note {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 992px) {
  .privacy-layout { grid-template-columns: 1fr; }
  .privacy-toc { position: relative; top: 0; }
  .privacy-highlights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .privacy-highlights-grid { grid-template-columns: 1fr; }
  .privacy-section { padding: 24px; }
}
/* ══════════════════════════════════════════════════════════
   SINGLE SERVICE PAGE — single-service.php
   كلاسات جديدة بريفكس svc- (الباقي بيعتمد على كلاسات
   موجودة بالفعل: bi-principles / bi-deliverables / portfolio-page-*
   / price-* / pf-slider-* / cta-box / btn-whatsapp)
══════════════════════════════════════════════════════════ */

/* ── Hero: أيقونة + اسم الخدمة ── */
.svc-hero-top { position: relative; z-index: 1; }
.svc-hero-text { min-width: 0; }
.svc-hero-title-row { display: flex; align-items: flex-start; gap: 24px; }
.svc-hero-title-col { flex: 1; min-width: 0; }
.svc-hero-title-col h1 { margin: 0; }
.svc-hero-title-col p { margin-top: 22px; }
.svc-hero-icon {
  width: 84px; height: 84px;
  border-radius: var(--radius-lg);
  background: var(--teal-glow);
  border: 1px solid rgba(42,157,143,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc-hero-icon svg { width: 38px; height: 38px; stroke: var(--teal); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 600px) {
  .svc-hero-title-row { gap: 16px; }
  .svc-hero-icon { width: 64px; height: 64px; }
  .svc-hero-icon svg { width: 30px; height: 30px; }
}

/* ── وصف الخدمة + صورة ── */
.svc-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  padding: 80px 0;
}
.svc-intro-grid.no-media { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.svc-intro-content { color: var(--text-secondary); font-size: 15.5px; line-height: 1.9; }
.svc-intro-content p { margin-bottom: 16px; }
.svc-intro-content p:last-child { margin-bottom: 0; }
.svc-intro-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.svc-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }

@media (max-width: 900px) {
  .svc-intro-grid { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
}

/* ── فورم طلب عرض السعر ── */
.svc-quote-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.svc-quote-form { display: flex; flex-direction: column; gap: 14px; }
.svc-quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-quote-form input,
.svc-quote-form select,
.svc-quote-form textarea {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color var(--transition);
}
.svc-quote-form input::placeholder,
.svc-quote-form textarea::placeholder { color: var(--text-muted); }
.svc-quote-form input:focus,
.svc-quote-form select:focus,
.svc-quote-form textarea:focus { outline: none; border-color: var(--teal); }
.svc-quote-form textarea { resize: vertical; min-height: 80px; }
.svc-quote-msg { font-size: 13.5px; margin-top: 4px; min-height: 18px; }
.svc-quote-msg.is-success { color: var(--teal); }
.svc-quote-msg.is-error { color: #e25555; }

@media (max-width: 900px) {
  .svc-quote-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .svc-quote-row { grid-template-columns: 1fr; }
}

/* ── Pricing grid مرن: يتوسط بعرض ثابت بدل التمدد لما الباقات قليلة (1-2) ── */
.svc-price-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  margin-top: 48px;
}
.svc-price-grid .price-card {
  flex: 1 1 280px;
  max-width: 320px;
}
@media (max-width: 600px) {
  .svc-price-grid .price-card { flex-basis: 100%; max-width: 360px; }
}

/* ── تصغير عناوين السكاشن في صفحة الخدمة المنفردة فقط
   (نفس فكرة .pf-page .section-title بصفحة المشروع المنفرد) ── */
.single-service .section-title { font-size: clamp(20px, 2.4vw, 32px); }

/* ── هيدر مميز لسكشن "اختار الباقة المناسبة لك" (Price List) ── */
.svc-pricing-header { position: relative; }
.svc-pricing-header .section-label {
  background: linear-gradient(135deg, rgba(233,196,106,0.16), var(--teal-glow));
  border: 1px solid rgba(233,196,106,0.35);
  color: var(--gold-dark);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
}
.svc-pricing-header .section-label::before { display: none; }
.svc-pricing-header .section-title {
  background: linear-gradient(135deg, var(--text-primary) 35%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="light"] .svc-pricing-header .section-label { color: var(--gold-dark); }

/* ── ملاحظات عامة تحت جدول الباقات ── */
.svc-pricing-notes {
  width: 100%;
  margin: 32px 0 0;
  padding: 20px 24px;
  background: var(--bg-card2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.svc-pricing-notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-pricing-notes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.svc-pricing-notes li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* ── خلفية رمادية خفيفة لكل سطر من مميزات الباقة (لتمييز السطر عن السطر اللي تحته) ── */
.price-features li {
  background: var(--bg-card2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

/* ── هيدر ملوّن لكل باقة (اللون يُختار من الداشبورد) + ذيل سهم صغير أسفله ── */
.price-card-banner {
  margin: -36px -28px 0 -28px;
  padding: 24px 28px 26px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.price-card-banner .price-name { color: #fff; margin-bottom: 4px; }
.price-card-banner .price-tagline { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.price-card-banner-tail {
  width: 0;
  height: 0;
  margin: 0 auto 22px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid; /* اللون بييجي inline حسب لون الباقة */
  filter: brightness(0.92); /* ظل خفيف يفرّق الذيل عن الهيدر نفسه */
}

/* ══════════════════════════════════════════════════════════
   MOBILE LOCKDOWN — عمود واحد إجباري لكل أقسام الموقع على الموبايل
   وحماية نهائية من أي طلعة (Overflow) برة عرض الشاشة تحت أي ظرف
   (هذا البلوك في آخر الملف عن قصد عشان ياخد الأولوية على كل القواعد اللي فوق)
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html, body { max-width: 100vw; overflow-x: hidden !important; }

  .services-grid,
  .about-grid,
  .process-grid,
  .testimonials-grid,
  .contact-grid,
  .form-row,
  .footer-top,
  .story-grid,
  .vision-cards,
  .stats-bar,
  .team-grid,
  .services-full-grid,
  .portfolio-page-grid,
  .contact-page-grid,
  .t-two-col,
  .t-video-grid,
  .wa-cta-box,
  .media-testimonials-grid,
  .gb-stats,
  .pf-info-grid,
  .pf-gallery[data-layout="grid"],
  .pf-nav-grid,
  .pf-comments-grid,
  .pf-brief-testimonial-grid,
  .bi-principles-grid,
  .bi-deliverable-list,
  .price-table-grid,
  .privacy-layout,
  .privacy-highlights-grid,
  .svc-intro-grid,
  .svc-quote-grid,
  .svc-quote-row {
    grid-template-columns: 1fr !important;
  }

  /* أي عنصر معمول Flex بعرضين أو تلاتة جنب بعض بيتحول لعمود تحت بعض */
  .footer-top,
  .wa-cta-box {
    flex-direction: column !important;
  }

  /* أي عنصر بعرض ثابت بالبكسل أكبر من عرض الشاشة، يتحول لعرض مرن 100% */
  .container,
  .nav-inner,
  section,
  .card,
  .price-card {
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ULTIMATE OVERFLOW GUARD — إجبار نهائي وقاطع:
   مفيش أي عنصر في الموقع كله يقدر يطلع برة عرض الشاشة، تحت أي ظرف.
   (هذا آخر بلوك في الملف عن قصد عشان ياخد الأولوية المطلقة في الـ Cascade)
══════════════════════════════════════════════════════════ */

/* 1) قفل جذري على مستوى الصفحة نفسها — أقوى نقطة ممكنة لمنع أي Scroll أفقي */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  overscroll-behavior-x: none;
}
body {
  position: relative;
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw !important;
  overscroll-behavior-x: none;
}

/* 2) قفل شامل على كل عنصر في الموقع (كل الشاشات، مش بس الموبايل) —
      أي عنصر (Div, Section, Image, Button...) اتحدد له max-width: 100vw إجبارياً */
* {
  max-width: 100vw;
}

/* 3) استثناء العناصر اللي المفروض تفضل أعرض من الشاشة عن قصد
      (السلايدرات والمسارات اللي بتتفرجط أفقياً بالسحب أو الأنيميشن —
      لو دول اتقفلوا برضه، السلايدر هيتكسر بدل ما يتصلح) */
.audio-slider, .audio-track,
.blog-track,
.clients-slider, .clients-track,
.gec-reel-track,
.pf-gallery-slider,
.pf-more-track,
.pf-slider-track,
.pg-track,
.portfolio-track,
.reel-slider,
.services-slider-track,
.slider-16x9-track,
.slider-9x16-track,
.sr-track,
.t-slider-track,
.marquee-track,
.marquee-strip,
.swiper-wrapper,
.swiper-slide {
  max-width: none;
}


/* ============================================================
   إضافات CSS مطلوب دمجها يدوياً في style.css
   ============================================================ */

/* ── 1) ظبط حجم أيقونات Font Awesome داخل كروت وصفحات الخدمات ──
   عشان تتماشى بصرياً مع أيقونات الـ SVG الجاهزة. عدّل القيم حسب تصميمك. */
.service-icon i,
.svc-hero-icon i {
  font-size: 28px;
  line-height: 1;
  color: var(--teal);
}

/* ============================================================
   2) شعارات العملاء (Clients Logos) — Light / Dark Mode
   ============================================================ */

/* الوضع الافتراضي (Light Mode) — الألوان الطبيعية */
#clients .client-logo img {
  filter: none;
  transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
  opacity: 0.85;
}

#clients .client-logo:hover img {
  transform: scale(1.08);
  opacity: 1;
}

/* Dark Mode — اللوجو أبيض بالكامل
   ⚠️ عدّل السيلكتور (body.dark-mode أو [data-theme="dark"]) حسب آلية التبديل
   الفعلية عندك بين الوضعين */
body.dark-mode #clients .client-logo img,
[data-theme="dark"] #clients .client-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

/* Dark Mode + Hover — يرجع لألوانه الطبيعية */
body.dark-mode #clients .client-logo:hover img,
[data-theme="dark"] #clients .client-logo:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

/* ============================================================
   3) حركة الأيقونة (svg/i) عند عمل Hover على كارت الخدمة
      (صفحة خدماتنا + الصفحة الرئيسية — نفس الكارت service-card.php)
   ============================================================ */

.service-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.35s ease,
              filter 0.35s ease;
}

.service-icon svg,
.service-icon i {
  transition: inherit;
}

/* عند Hover على الكارت كله: الأيقونة تترفع لفوق + تكبر شوية + تتلوّن بالتيل + Glow خفيف */
.service-card:hover .service-icon {
  transform: translateY(-8px) scale(1.08);
  color: var(--teal);
  filter: drop-shadow(0 6px 14px rgba(42, 157, 143, 0.45));
}

/* لو الأيقونة SVG بتستخدم stroke بدل fill، فعّل السطر ده كمان */
.service-card:hover .service-icon svg {
  stroke: var(--teal);
}

/* نفس الحركة لأيقونة الـ Overlay اللي بتظهر فوق الكارت عند الهوفر */
.service-card:hover .service-icon-overlay {
  transform: translateY(-8px) scale(1.08);
  color: var(--teal);
  filter: drop-shadow(0 6px 14px rgba(42, 157, 143, 0.45));
}

/* ============================================================
   4) Single Service — أيقونة الـ Hero: حركة + تغيير لون عند الـ Hover
      (svc-hero-icon مش جوه لينك، فالـ Hover على العنصر نفسه)
   ============================================================ */

.svc-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease, color 0.35s ease, filter 0.35s ease;
  cursor: pointer;
}

.svc-hero-icon svg {
  transition: transform 0.35s ease, stroke 0.35s ease, filter 0.35s ease;
}

.svc-hero-icon i {
  transition: transform 0.35s ease, color 0.35s ease;
}

.svc-hero-icon:hover {
  transform: translateY(-8px);
}

.svc-hero-icon:hover svg {
  stroke: var(--teal);
  filter: drop-shadow(0 6px 14px rgba(42, 157, 143, 0.45));
}

/* لو الـ SVG بتاعتك بتتلوّن بـ fill بدل stroke، استبدل السطر اللي فوق دي بـ:
   .svc-hero-icon:hover svg { fill: var(--teal); ... }
   افتح أي أيقونة من Inspector في المتصفح للتأكد */

.svc-hero-icon:hover i {
  color: var(--teal);
  filter: drop-shadow(0 6px 14px rgba(42, 157, 143, 0.45));
}

/* ============================================================
   5) Single Service — صورة "عن الخدمة" (svc-intro-media):
      عند الـ Hover: الصورة ترتفع لفوق + Overlay بنفس صورة
      البراند (Social-1024x910.jpg) بشفافية 100%
   ============================================================ */

.svc-intro-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px; /* عدّلها لو عندك متغيّر --radius مختلف */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease;
}

.svc-intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* طبقة الـ Overlay — نفس صورة البراند، مخفية افتراضياً (opacity: 0) */
.svc-intro-media-overlay {
  position: absolute;
  inset: 0;
  background-image: url('https://aymanmokhtar.com/wp-content/uploads/2026/06/Social-1024x910.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* ── عند الـ Hover على كل الصورة ── */
.svc-intro-media:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.svc-intro-media:hover img {
  transform: scale(1.08);
}

/* الـ Overlay يظهر بشفافية كاملة 100% */
.svc-intro-media:hover .svc-intro-media-overlay {
  opacity: 1;
}



/* ============================================================
   6) صفحة تواصل معنا — رسالة صوتية ترحيبية (قبل سكشن تواصل معنا)
   ============================================================ */

.contact-welcome-audio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 24px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e8e8e8);
  border-radius: var(--radius-md, 12px);
}

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

.cwa-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 157, 143, 0.12);
  border-radius: 10px;
  color: var(--color-primary, #2A9D8F);
  position: relative;
  animation: cwa-pulse 2s ease-in-out infinite;
}

/* حلقة نبض متمددة حوالين الأيقونة */
.cwa-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid var(--color-primary, #2A9D8F);
  opacity: 0.6;
  animation: cwa-ring 2s ease-out infinite;
}

@keyframes cwa-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@keyframes cwa-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.cwa-text {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.cwa-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-bottom: 3px;
}

.cwa-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}

/* المشغّل ياخد عرض العمود بالكامل */
.cwa-audio {
  width: 100%;
  height: 42px;
}

@media (max-width: 480px) {
  .contact-welcome-audio { padding: 14px 16px; }
}

/* أيقونة "تواصل معنا" جنب العنوان — بدون التأثير على section-label في باقي الصفحة */
.section-label-icon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-label-icon svg {
  flex-shrink: 0;
  color: var(--color-primary, #2A9D8F);
}

/* ============================================================
   7) صفحة تواصل معنا — اقتباس "أنت محور إهتمامنا" (نفس عمود بيانات التواصل)
   ============================================================ */

.ci-quote {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--teal-glow, rgba(42, 157, 143, 0.08));
  border-inline-start: 3px solid var(--color-primary, #2A9D8F);
  border-radius: var(--radius-md, 12px);
  text-align: right;
}

.ci-quote-mark {
  color: var(--color-primary, #2A9D8F);
  opacity: 0.4;
  margin-bottom: 6px;
}

.ci-quote-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0;
}

/* ============================================================
   8) Feedback Slider — نفس تصميم النافيجيشن الموجود في الصفحة
      الرئيسية بقسم Story Reels (.gec-reel-prev/next + .sr-dot)
      ⚠️ هذه الكلاسات (gec-gal-*) لم تكن معرّفة إطلاقاً في style.css
   ============================================================ */

.gec-gal-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

/* ── النقاط: نفس شكل sr-dot (دائرة رمادية → حبة خضراء عند التفعيل) ── */
.gec-gal-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gec-gal-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  opacity: 1;
  margin: 0;
  transition: all 0.3s ease;
}

.gec-gal-pagination .swiper-pagination-bullet-active {
  background: #8DC63F;
  width: 24px;
  border-radius: 4px;
}

/* ── الأزرار: نفس شكل gec-reel-prev/next الزجاجي الغامق ── */
.gec-gal-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gec-gal-prev,
.gec-gal-next {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  background: rgba(10, 26, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.25s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.gec-gal-prev svg,
.gec-gal-next svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}

.gec-gal-prev:hover,
.gec-gal-next:hover {
  background: rgba(141, 198, 63, 0.85);
  border-color: #8DC63F;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(141, 198, 63, 0.3);
}

.gec-gal-prev:hover svg,
.gec-gal-next:hover svg {
  transform: scale(1.1);
}

.gec-gal-prev:active,
.gec-gal-next:active {
  transform: translateY(0) scale(0.95);
}

@media (max-width: 640px) {
  .gec-gal-nav-row { margin-top: 18px; }
  .gec-gal-prev,
  .gec-gal-next {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 12px;
  }
  .gec-gal-prev svg,
  .gec-gal-next svg { width: 18px; height: 18px; }
}


/* ============================================================
   10) قسم "فريقنا" — 5 كروت في الصف الواحد (بدل 4)
   ============================================================ */

.team-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1280px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}
/* من 1024px وأصغر، القواعد الأصلية في style.css (3 أعمدة ثم عمودين)
   تفضل شغالة زي ما هي من غير أي تعديل */

/* ============================================================
   11) إصلاح: أيقونة الـ Overlay في كارت الخدمة لازم تفضل بيضاء
      عند الـ Hover (مش تيل) — الخلفية أصلاً تيل فالتيل بيختفي فيها.
      تنطبق على أي مكان بيستخدم service-card.php (الهوم + صفحة خدماتنا
      + أي صفحة تانية تخص الخدمات مستقبلاً)
   ============================================================ */

.service-card:hover .service-card-overlay .service-icon,
.service-card:hover .service-icon-overlay {
  color: #fff;
}

.service-card:hover .service-card-overlay .service-icon svg,
.service-card:hover .service-icon-overlay svg {
  stroke: #fff;
  fill: #fff;
}

.service-card:hover .service-card-overlay .service-icon i,
.service-card:hover .service-icon-overlay i {
  color: #fff;
}

/* ============================================================
   12) صور فريق العمل — زووم خفيف عند الـ Hover
   ============================================================ */

.team-img {
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card:hover .team-img {
  transform: scale(1.08);
}

/* ============================================================
   13) سكشن "نظرة عامة عن الخدمة" — دعم وضع السلايدر
      (بديل الصورة الثابتة، بنفس مكان وحجم svc-intro-media)
   ============================================================ */

.svc-intro-media--slider .pf-slider-wrap {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  border: none;
  border-radius: 0; /* svc-intro-media الأب هو اللي بيعمل الـ border-radius والقص */
  background: transparent;
}

.svc-intro-media--slider .pf-slider-track {
  height: 100%;
  aspect-ratio: 4/3; /* نفس نسبة صورة "نظرة عامة" الثابتة عشان الشكل يتماشى */
}

.pf-slide-img {
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.svc-intro-media--slider:hover .pf-slide-img {
  transform: scale(1.08);
}

/* ============================================================
   14) باقات الأسعار — شارة خصم في أقصى يسار السطر (محاذية لنفس
      حد الـ Pills بتاعة مميزات الباقة تحتها)
   ============================================================ */

.price-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.price-amount-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-old {
  font-size: 15px;
  text-decoration: line-through;
  opacity: 0.75;
  font-weight: 600;
}

.price-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   15) Hero صفحة الخدمة — خلفية صورة/فيديو اختيارية
   ============================================================ */

.svc-hero-banner.has-media {
  position: relative;
  overflow: hidden;
  border-bottom: none;
}
.svc-hero-banner.has-media::before { display: none; }

.svc-hero-bg-image,
.svc-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.12) translate(0, 0);
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.svc-hero-bg-image {
  background-size: cover;
  background-position: center;
}
.svc-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 26, 0.7) 0%, rgba(10, 26, 26, 0.92) 100%);
  z-index: 1;
}
.svc-hero-banner.has-media > .container {
  position: relative;
  z-index: 2;
}
.svc-hero-banner.has-media .page-banner-label { color: var(--teal); }
.svc-hero-banner.has-media .svc-hero-text h1,
.svc-hero-banner.has-media .svc-hero-text h1 span { color: #fff; }
.svc-hero-banner.has-media .svc-hero-text p { color: rgba(255, 255, 255, 0.85); }
.svc-hero-banner.has-media .breadcrumb { color: rgba(255, 255, 255, 0.6); }
.svc-hero-banner.has-media .breadcrumb a { color: var(--teal); }
.svc-hero-banner.has-media .svc-hero-icon {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ============================================================
   16) عناصر الخدمة — Cards بأنميشن Hover (بدل القائمة القديمة)
   ============================================================ */

.svc-feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}
.svc-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 14px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border-subtle);
  padding: 6px 14px;
}
.svc-feature-card:nth-child(4n) { border-left: none; }
.svc-feature-card-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 157, 143, 0.12);
  border-radius: 50%;
  color: var(--teal);
  position: relative;
  animation: svc-feature-float 3.6s ease-in-out infinite;
  transition: background 0.35s ease;
}
.svc-feature-card:nth-child(2) .svc-feature-card-icon { animation-delay: 0.2s; }
.svc-feature-card:nth-child(3) .svc-feature-card-icon { animation-delay: 0.4s; }
.svc-feature-card:nth-child(4) .svc-feature-card-icon { animation-delay: 0.6s; }
.svc-feature-card:nth-child(5) .svc-feature-card-icon { animation-delay: 0.1s; }
.svc-feature-card:nth-child(6) .svc-feature-card-icon { animation-delay: 0.3s; }
.svc-feature-card:nth-child(7) .svc-feature-card-icon { animation-delay: 0.5s; }
.svc-feature-card:nth-child(8) .svc-feature-card-icon { animation-delay: 0.7s; }
.svc-feature-card-icon::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
@keyframes svc-feature-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.svc-feature-card:hover .svc-feature-card-icon {
  animation: svc-feature-bounce 0.6s ease;
  background: var(--teal);
}
.svc-feature-card:hover .svc-feature-card-icon::after {
  opacity: 0.5;
  transform: scale(1);
}
@keyframes svc-feature-bounce {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.18) rotate(-10deg); }
  65%  { transform: scale(0.94) rotate(6deg); }
  100% { transform: scale(1.08) rotate(-4deg); }
}
.svc-feature-card-icon svg { width: 26px; height: 26px; fill: none !important; stroke: var(--teal); transition: stroke 0.35s ease; }
.svc-feature-card-icon svg path,
.svc-feature-card-icon svg circle,
.svc-feature-card-icon svg rect,
.svc-feature-card-icon svg polygon,
.svc-feature-card-icon svg polyline,
.svc-feature-card-icon svg line { fill: none !important; stroke: var(--teal); transition: stroke 0.35s ease; }
.svc-feature-card-icon i { font-size: 24px; line-height: 1; color: var(--teal); font-weight: 400; transition: color 0.35s ease; }
.svc-feature-card:hover .svc-feature-card-icon svg,
.svc-feature-card:hover .svc-feature-card-icon svg path,
.svc-feature-card:hover .svc-feature-card-icon svg circle,
.svc-feature-card:hover .svc-feature-card-icon svg rect,
.svc-feature-card:hover .svc-feature-card-icon svg polygon,
.svc-feature-card:hover .svc-feature-card-icon svg polyline,
.svc-feature-card:hover .svc-feature-card-icon svg line { stroke: #fff; }
.svc-feature-card:hover .svc-feature-card-icon i { color: #fff; }
.svc-feature-card span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .svc-feature-cards { grid-template-columns: repeat(3, 1fr); }
  .svc-feature-card:nth-child(4n) { border-left: 1px solid var(--border-subtle); }
  .svc-feature-card:nth-child(3n) { border-left: none; }
}
@media (max-width: 700px)  {
  .svc-feature-cards { grid-template-columns: repeat(2, 1fr); }
  .svc-feature-card:nth-child(3n) { border-left: 1px solid var(--border-subtle); }
  .svc-feature-card:nth-child(2n) { border-left: none; }
}
@media (max-width: 420px)  {
  .svc-feature-cards { grid-template-columns: 1fr; }
  .svc-feature-card { border-left: none !important; border-top: 1px solid var(--border-subtle); padding: 20px 14px 0; }
  .svc-feature-card:first-child { border-top: none; padding-top: 6px; }
}

/* ============================================================
   17) لماذا نحن — قائمة إحصائيات/مميزات
   ============================================================ */

.svc-why-us-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 36px;
  max-width: 1000px;
  margin: 0 auto;
}
.svc-why-us-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 190px;
}
.svc-why-us-circle {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.svc-why-us-circle svg { width: 28px; height: 28px; stroke: var(--teal); transition: stroke 0.35s ease; }
.svc-why-us-circle i { font-size: 26px; line-height: 1; color: var(--teal); transition: color 0.35s ease; }
.svc-why-us-item:hover .svc-why-us-circle {
  transform: translateY(-6px) scale(1.06);
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: 0 14px 30px rgba(42, 157, 143, 0.25);
}
.svc-why-us-item:hover .svc-why-us-circle svg { stroke: #fff; }
.svc-why-us-item:hover .svc-why-us-circle i { color: #fff; }
.svc-why-us-counter {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
}
.svc-why-us-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.7;
}
@media (max-width: 700px) { .svc-why-us-item { width: 45%; } }
@media (max-width: 420px) { .svc-why-us-item { width: 100%; } }

/* ============================================================
   17b) لماذا نحن — ستايل الإحصائيات (مطابق لسكشن الإحصائيات
   في صفحة بروفايل الشركة .cp-stats)
   ============================================================ */
.svc-why-stats {
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 56px 0 48px;
}
.svc-why-stats .section-header { margin-bottom: 40px; }
.svc-why-stats-grid {
  display: grid;
  grid-template-columns: repeat(var(--why-cols, 4), 1fr);
  gap: 0;
}
.svc-why-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 14px;
  border-left: 1px solid var(--border-subtle);
  min-width: 0;
  cursor: default;
  position: relative;
  transition: transform 0.35s ease;
}
.svc-why-stat-item:hover {
  transform: translateY(-8px) scale(1.06);
  z-index: 2;
}
.svc-why-stat-item:last-child { border-left: none; }
.svc-why-stat-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  margin-bottom: 2px;
  transition: stroke 0.35s ease;
}
.svc-why-stat-icon svg { width: 26px; height: 26px; fill: none !important; stroke: var(--teal); transition: stroke 0.35s ease; }
.svc-why-stat-icon svg path,
.svc-why-stat-icon svg circle,
.svc-why-stat-icon svg rect,
.svc-why-stat-icon svg polygon,
.svc-why-stat-icon svg polyline,
.svc-why-stat-icon svg line { fill: none !important; stroke: var(--teal); transition: stroke 0.35s ease; }
.svc-why-stat-icon i { font-size: 22px; line-height: 1; color: var(--teal); font-weight: 400; transition: color 0.35s ease; }
.svc-why-stat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  color: var(--teal);
  line-height: 1;
}
.svc-why-stat-num-suffix {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
}
.svc-why-stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.6;
  transition: color 0.35s ease;
}
.svc-why-stat-item:hover .svc-why-stat-label { color: var(--text-primary); }
@media (max-width: 1024px) {
  .svc-why-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-why-stat-item:nth-child(3n) { border-left: none; }
}
@media (max-width: 768px) {
  .svc-why-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-why-stat-item:nth-child(3n) { border-left: 1px solid var(--border-subtle); }
  .svc-why-stat-item:nth-child(2n) { border-left: none; }
}
@media (max-width: 640px) {
  .svc-why-stats-grid { grid-template-columns: 1fr; }
  .svc-why-stat-item { border-left: none !important; border-top: 1px solid var(--border-subtle); padding: 16px 0; }
  .svc-why-stat-item:first-child { border-top: none; }
}

/* ============================================================
   18) مراحل العمل — Timeline أفقي بخط واصل بين الأيقونات
   ============================================================ */

.svc-timeline-h {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.svc-timeline-h::before {
  content: '';
  position: absolute;
  top: 40px; /* منتصف دائرة الأيقونة (ارتفاعها 80px) */
  right: 60px;
  left: 60px;
  height: 1px;
  background: var(--border-subtle);
  z-index: 0;
}

.svc-timeline-h-step {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.svc-timeline-h-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.35s ease, box-shadow 0.35s ease;
}
.svc-timeline-h-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--teal);
}
.svc-timeline-h-icon i {
  font-size: 24px;
  color: var(--teal);
}

.svc-timeline-h-step:hover .svc-timeline-h-icon {
  transform: translateY(-6px) scale(1.06);
  border-color: var(--teal);
  box-shadow: 0 14px 30px rgba(42, 157, 143, 0.22);
}

.svc-timeline-h-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.svc-timeline-h-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 220px;
}

@media (max-width: 900px) {
  .svc-timeline-h { flex-wrap: wrap; row-gap: 32px; }
  .svc-timeline-h::before { display: none; }
  .svc-timeline-h-step { flex: 0 0 45%; }
}
@media (max-width: 560px) {
  .svc-timeline-h-step { flex: 0 0 100%; }
  .svc-timeline-h-desc { max-width: 280px; }
}

/* ============================================================
   19) الأسئلة الشائعة — أكورديون
   ============================================================ */

.svc-faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.svc-faq-item.is-open { border-color: var(--teal); }
.svc-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}
.svc-faq-chevron {
  flex-shrink: 0;
  color: var(--teal);
  transition: transform 0.3s ease;
}
.svc-faq-item.is-open .svc-faq-chevron { transform: rotate(180deg); }
.svc-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.svc-faq-item.is-open .svc-faq-answer { max-height: 500px; }
.svc-faq-answer-inner {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.svc-faq-answer-inner p:last-child { margin-bottom: 0; }
/* ── SVC WHY SECTION — لون أغمق شوية بس عن السكشن اللي فوقه وتحته، وبياخد
   وضع الثيم (Dark/Light) لوحده أوتوماتيك عن طريق var(--bg-deep) — مش لون
   ثابت. مع إحساس بالحركة عند مرور الماوس على السكشن كله ── */
#svc-why {
  background: var(--bg-deep);
  transition: background var(--transition);
  position: relative;
  overflow: hidden;
  padding: 90px 0;
}
#svc-why::before,
#svc-why::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.9s ease;
}
#svc-why::before {
  top: -120px; left: -120px;
  width: 400px; height: 400px;
  background: var(--teal);
  filter: blur(120px);
  opacity: 0.14;
}
#svc-why::after {
  bottom: -160px; right: -100px;
  width: 360px; height: 360px;
  background: var(--teal-light);
  filter: blur(140px);
  opacity: 0.1;
}
/* عند مرور الماوس على أي مكان في السكشن، الوهجين بيتحركوا ويكبروا شوية —
   إحساس بحركة هادية من غير ما نلمس التصميم نفسه */
#svc-why:hover::before {
  transform: scale(1.2) translate(30px, 20px);
  opacity: 0.22;
}
#svc-why:hover::after {
  transform: scale(1.2) translate(-25px, -15px);
  opacity: 0.18;
}
#svc-why > .container { position: relative; z-index: 2; }

/* الكلام (اللابل + العنوان + الوصف) بيرتفع لفوق شوية عند مرور الماوس على
   السكشن، والعنوان بياخد وهج تيل خفيف بدل الزوم */
.svc-why-header {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#svc-why:hover .svc-why-header {
  transform: translateY(-8px);
}

#svc-why .section-title .accent { transition: color 0.4s ease; }
#svc-why:hover .section-title .accent { color: var(--teal-light); }

/* أيقونة السكشن بترتفع وتاخد توهج تيل حواليها عند الهوفر */
#svc-why .svc-icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
}
#svc-why:hover .svc-icon {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 0 0 10px rgba(42, 157, 143, 0.12), 0 14px 32px rgba(42, 157, 143, 0.35);
}

.svc-why-header { max-width: 720px; }
.svc-why-title {
  white-space: nowrap;
  font-size: clamp(20px, 5.2vw, 44px);
}
/* Justified paragraph: every line stretches flush right-to-left,
   except the last line which stays aligned to the right */
.svc-why-desc {
  text-align: justify;
  text-align-last: right;
  margin-left: auto;
  margin-right: auto;
}
.svc-scroll-arrow {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.svc-scroll-arrow svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: svcArrowBounce 1.6s ease-in-out infinite;
}
@keyframes svcArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(10px); opacity: 1; }
}
@media (max-width: 480px) {
  .svc-why-title { font-size: clamp(16px, 5.6vw, 28px); }
}

/* ── SVC IDEA VISUAL — صورة سكشن "من الفكرة إلى الواقع" بتستخدم نفس كلاسات
   svc-intro-media / svc-intro-media-overlay اللي في صفحة الخدمة المنفردة
   (سكشن "نظرة عامة عن الخدمة")، فالـ Hover مطابق تمامًا: نفس الارتفاع عند
   الهوفر + نفس تكبير الصورة + نفس صورة الـ Overlay اللي بتظهر فوقها ── */
.svc-idea-visual.about-visual {
  padding: 0; /* drop the About section's decorative badge padding so the frame reads bigger */
}
.svc-idea-visual .svc-intro-media {
  aspect-ratio: 4/3;
  width: 100%;
}
/* Fallback (no featured image set): keep the smaller inner box + icon */
.about-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
}