/* ═══════════════════════════════════════════
   كسب — منصة الخدمات القانونية
   Premium Arabic RTL Stylesheet
   ═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --navy:       #0B1F3A;
  --navy-dark:  #060E1D;
  --navy-mid:   #142850;
  --blue:       #1A5FA8;
  --blue-light: #2E7DD6;
  --gold:       #C8A24A;
  --gold-light: #E2C06A;
  --gold-pale:  #FBF3E2;
  --white:      #FFFFFF;
  --off-white:  #F8F6F2;
  --wa:         #25D366;
  --wa-dark:    #128C7E;
  --text:       #1A1F36;
  --text-mid:   #3D4462;
  --text-light: #6B7280;
  --border:     #E5E7EB;
  --shadow:     rgba(11, 31, 58, 0.1);
  --shadow-lg:  rgba(11, 31, 58, 0.18);
  --error:      #DC2626;
  --success:    #059669;

  --font: 'Tajawal', 'Arial', sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --r: 12px;
  --r-sm: 8px;
  --islamic-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='1.2'%3E%3Cpath d='M0,0 Q15,0 20,5 Q25,10 25,25 Q10,25 5,20 Q0,15 0,0Z'/%3E%3Cpath d='M0,0 Q10,3 15,10 Q18,15 15,20 Q10,15 5,12 Q2,8 0,0Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M0,0 L8,8'/%3E%3Cpath d='M20,5 Q22,12 18,18 Q12,22 5,20'/%3E%3C/g%3E%3C/svg%3E");
  --islamic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.5' opacity='0.18'%3E%3Cpolygon points='50,15 56,35 50,28 44,35'/%3E%3Cpolygon points='50,85 56,65 50,72 44,65'/%3E%3Cpolygon points='15,50 35,44 28,50 35,56'/%3E%3Cpolygon points='85,50 65,56 72,50 65,44'/%3E%3Cpolygon points='25,25 40,35 35,40 35,35'/%3E%3Cpolygon points='75,25 60,35 65,40 65,35'/%3E%3Cpolygon points='25,75 40,65 35,60 35,65'/%3E%3Cpolygon points='75,75 60,65 65,60 65,65'/%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Ccircle cx='50' cy='50' r='6'/%3E%3Cpath d='M50,30 Q62,42 50,50 Q38,42 50,30Z'/%3E%3Cpath d='M50,70 Q62,58 50,50 Q38,58 50,70Z'/%3E%3Cpath d='M30,50 Q42,38 50,50 Q42,62 30,50Z'/%3E%3Cpath d='M70,50 Q58,38 50,50 Q58,62 70,50Z'/%3E%3Cpath d='M35,35 Q50,40 50,50 Q40,50 35,35Z'/%3E%3Cpath d='M65,35 Q50,40 50,50 Q60,50 65,35Z'/%3E%3Cpath d='M35,65 Q50,60 50,50 Q40,50 35,65Z'/%3E%3Cpath d='M65,65 Q50,60 50,50 Q60,50 65,65Z'/%3E%3Cpath d='M0,0 Q25,10 25,25 Q10,25 0,0Z'/%3E%3Cpath d='M100,0 Q75,10 75,25 Q90,25 100,0Z'/%3E%3Cpath d='M0,100 Q25,90 25,75 Q10,75 0,100Z'/%3E%3Cpath d='M100,100 Q75,90 75,75 Q90,75 100,100Z'/%3E%3Cline x1='25' y1='0' x2='0' y2='25'/%3E%3Cline x1='75' y1='0' x2='100' y2='25'/%3E%3Cline x1='0' y1='75' x2='25' y2='100'/%3E%3Cline x1='100' y1='75' x2='75' y2='100'/%3E%3Cline x1='50' y1='0' x2='50' y2='15'/%3E%3Cline x1='50' y1='85' x2='50' y2='100'/%3E%3Cline x1='0' y1='50' x2='15' y2='50'/%3E%3Cline x1='85' y1='50' x2='100' y2='50'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  background-image: var(--islamic-bg);
  background-repeat: repeat;
  line-height: 1.7;
  font-weight: 500;
  overflow-x: hidden;
  direction: rtl;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font-family: var(--font); }

/* ── Layout ── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Section headers ── */
.section-badge {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 8px 22px;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid rgba(200,162,74,0.25);
  border-radius: 20px;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 12px;
}
.section-sub {
  color: var(--text-light);
  font-size: 1.1rem;
  font-weight: 600;
  max-width: 500px;
  margin: 0 auto;
}
.section-head { text-align: center; margin-bottom: 56px; }

/* ── Section divider ── */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  max-width: 900px;
  margin: 0 auto;
}
.section-divider span {
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  border-radius: 2px;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Shimmer */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out);
}
.btn:hover::after { transform: translateX(100%); }

/* Primary */
.btn--primary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--primary:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-lg);
}

/* WhatsApp */
.btn--wa {
  background: var(--wa);
  color: var(--white);
  border-color: var(--wa);
}
.btn--wa:hover {
  background: var(--wa-dark);
  border-color: var(--wa-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.3);
}

/* Outline */
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.btn--outline:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

/* Sizes */
.btn--sm  { padding: 8px 18px; font-size: 0.85rem; }
.btn--lg  { padding: 15px 36px; font-size: 1rem; }
.btn--xl  { padding: 16px 40px; font-size: 1.05rem; border-radius: var(--r); }
.btn--full { width: 100%; }

/* WhatsApp icon */
.icon-wa { width: 20px; height: 20px; }

/* ══════════════════════════════════════
   NOTIFICATION BAR
══════════════════════════════════════ */
.notif {
  background: var(--navy);
  color: rgba(255,255,255,0.9);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 48px;
  position: relative;
  z-index: 1001;
  transition: max-height 0.4s var(--ease-out), padding 0.4s, opacity 0.4s;
}
.notif.hidden { max-height: 0; padding: 0; opacity: 0; overflow: hidden; }
.notif__close {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 1.3rem;
  line-height: 1;
  transition: color 0.2s;
}
.notif__close:hover { color: var(--white); }

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.4s, background 0.4s;
}
.nav.scrolled {
  box-shadow: 0 4px 24px var(--shadow);
  background: rgba(255,255,255,0.98);
}
.nav__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  gap: 20px;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.nav__logo:hover { opacity: 0.85; }
.nav__logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
}
.nav__logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__logo-text { line-height: 1.2; }
.nav__logo-name {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--navy);
}
.nav__logo-sub {
  display: block;
  font-size: 0.68rem;
  color: var(--text-light);
  font-weight: 400;
}

/* Links */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav__link {
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-mid);
  border-radius: var(--r-sm);
  transition: all 0.25s;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 14px;
  left: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-out);
}
.nav__link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -2px;
  display: inline-block;
}
.nav__link-icon.icon-wa {
  color: var(--wa);
}
.nav__link:hover, .nav__link.active {
  color: var(--navy);
}
.nav__link:hover::after, .nav__link.active::after {
  transform: scaleX(1);
}

/* CTA Actions */
.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  z-index: 1001;
}
.nav__burger span {
  width: 22px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.35s var(--ease-out);
}
/* Burger open animation handled in JS dynamic styles */

/* ══════════════════════════════════════
   HERO — 3D Canvas + Split Layout
══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--navy-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Islamic decorative overlays on hero */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.hero::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='240' height='240'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%23C8A24A' opacity='0.2'%3E%3C!-- large arabesque flower --%3E%3Cg stroke-width='0.7'%3E%3Cpath d='M120,40 Q140,80 120,120 Q100,80 120,40Z'/%3E%3Cpath d='M120,200 Q140,160 120,120 Q100,160 120,200Z'/%3E%3Cpath d='M40,120 Q80,100 120,120 Q80,140 40,120Z'/%3E%3Cpath d='M200,120 Q160,100 120,120 Q160,140 200,120Z'/%3E%3Cpath d='M58,58 Q95,85 120,120 Q85,95 58,58Z'/%3E%3Cpath d='M182,58 Q145,85 120,120 Q155,95 182,58Z'/%3E%3Cpath d='M58,182 Q95,155 120,120 Q85,145 58,182Z'/%3E%3Cpath d='M182,182 Q145,155 120,120 Q155,145 182,182Z'/%3E%3C/g%3E%3C!-- decorative rings --%3E%3Ccircle cx='120' cy='120' r='50' stroke-width='0.5'/%3E%3Ccircle cx='120' cy='120' r='35' stroke-width='0.4'/%3E%3Ccircle cx='120' cy='120' r='20' stroke-width='0.4'/%3E%3C!-- corner arabesques --%3E%3Cg stroke-width='0.6'%3E%3Cpath d='M0,0 Q30,8 40,40 Q8,30 0,0Z'/%3E%3Cpath d='M0,0 Q18,18 20,40'/%3E%3Cpath d='M0,0 Q18,18 40,20'/%3E%3Cpath d='M240,0 Q210,8 200,40 Q232,30 240,0Z'/%3E%3Cpath d='M240,0 Q222,18 220,40'/%3E%3Cpath d='M240,0 Q222,18 200,20'/%3E%3Cpath d='M0,240 Q30,232 40,200 Q8,210 0,240Z'/%3E%3Cpath d='M0,240 Q18,222 20,200'/%3E%3Cpath d='M0,240 Q18,222 40,220'/%3E%3Cpath d='M240,240 Q210,232 200,200 Q232,210 240,240Z'/%3E%3Cpath d='M240,240 Q222,222 220,200'/%3E%3Cpath d='M240,240 Q222,222 200,220'/%3E%3C/g%3E%3C!-- small ornamental dots --%3E%3Ccircle cx='120' cy='70' r='2.5' fill='%23C8A24A' fill-opacity='0.15' stroke='none'/%3E%3Ccircle cx='120' cy='170' r='2.5' fill='%23C8A24A' fill-opacity='0.15' stroke='none'/%3E%3Ccircle cx='70' cy='120' r='2.5' fill='%23C8A24A' fill-opacity='0.15' stroke='none'/%3E%3Ccircle cx='170' cy='120' r='2.5' fill='%23C8A24A' fill-opacity='0.15' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
}
.hero::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='40' viewBox='0 0 800 40'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.8' opacity='0.25'%3E%3Cpath d='M0,20 Q10,8 20,20 Q30,32 40,20 Q50,8 60,20 Q70,32 80,20 Q90,8 100,20 Q110,32 120,20 Q130,8 140,20 Q150,32 160,20 Q170,8 180,20 Q190,32 200,20 Q210,8 220,20 Q230,32 240,20 Q250,8 260,20 Q270,32 280,20 Q290,8 300,20 Q310,32 320,20 Q330,8 340,20 Q350,32 360,20 Q370,8 380,20 Q390,32 400,20 Q410,8 420,20 Q430,32 440,20 Q450,8 460,20 Q470,32 480,20 Q490,8 500,20 Q510,32 520,20 Q530,8 540,20 Q550,32 560,20 Q570,8 580,20 Q590,32 600,20 Q610,8 620,20 Q630,32 640,20 Q650,8 660,20 Q670,32 680,20 Q690,8 700,20 Q710,32 720,20 Q730,8 740,20 Q750,32 760,20 Q770,8 780,20 Q790,32 800,20'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='40' viewBox='0 0 800 40'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.8' opacity='0.25'%3E%3Cpath d='M0,20 Q10,8 20,20 Q30,32 40,20 Q50,8 60,20 Q70,32 80,20 Q90,8 100,20 Q110,32 120,20 Q130,8 140,20 Q150,32 160,20 Q170,8 180,20 Q190,32 200,20 Q210,8 220,20 Q230,32 240,20 Q250,8 260,20 Q270,32 280,20 Q290,8 300,20 Q310,32 320,20 Q330,8 340,20 Q350,32 360,20 Q370,8 380,20 Q390,32 400,20 Q410,8 420,20 Q430,32 440,20 Q450,8 460,20 Q470,32 480,20 Q490,8 500,20 Q510,32 520,20 Q530,8 540,20 Q550,32 560,20 Q570,8 580,20 Q590,32 600,20 Q610,8 620,20 Q630,32 640,20 Q650,8 660,20 Q670,32 680,20 Q690,8 700,20 Q710,32 720,20 Q730,8 740,20 Q750,32 760,20 Q770,8 780,20 Q790,32 800,20'/%3E%3C/g%3E%3C/svg%3E") repeat-x top;
}

/* Three.js canvas */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* Gradient veil — keeps text readable */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 80% at 60% 50%, rgba(11,31,58,0.35) 0%, transparent 100%),
    linear-gradient(130deg,
      rgba(6,14,29,0.88) 0%,
      rgba(11,31,58,0.72) 50%,
      rgba(20,40,80,0.82) 100%);
  pointer-events: none;
}

/* Content wrapper — fills available vertical space */
.hero__container {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 96px 24px 48px;
}

/* Two-column split */
.hero__split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
  width: 100%;
}

/* ── Text column ── */
.hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(200,162,74,0.1);
  border: 1px solid rgba(200,162,74,0.28);
  padding: 7px 18px;
  border-radius: 24px;
  margin-bottom: 28px;
  animation: fadeInDown 0.7s var(--ease-out) both;
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--wa);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  60%       { box-shadow: 0 0 0 6px rgba(37,211,102,0); }
}

.hero__title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 22px;
  animation: fadeInUp 0.85s 0.1s var(--ease-out) both;
}

.hero__title-gold {
  display: block;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__sub {
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
  margin-bottom: 38px;
  max-width: 520px;
  animation: fadeInUp 0.85s 0.2s var(--ease-out) both;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  animation: fadeInUp 0.85s 0.3s var(--ease-out) both;
}

/* Trust row */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  animation: fadeInUp 0.85s 0.45s var(--ease-out) both;
}
.hero__trust span {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}

/* ── Lawyer Image Slider ── */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInUp 0.85s 0.2s var(--ease-out) both;
}

.hero__slider {
  position: relative;
  width: 100%;
  max-width: 340px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(200,162,74,0.22);
  box-shadow:
    0 0 80px rgba(200,162,74,0.08),
    0 32px 64px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.hero__slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 600%;
}

.hero__slide {
  width: 16.6667%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px 20px;
}

/* Image wrapper */
.hero__slide-img-wrap {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(200,162,74,0.35);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 60px rgba(200,162,74,0.1);
  margin-bottom: 20px;
  position: relative;
}
.hero__slide-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Placeholder for second lawyer */
.hero__slide-img-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200,162,74,0.08);
}
.hero__slide-img-wrap--placeholder svg {
  width: 80px;
  height: 80px;
  color: rgba(200,162,74,0.4);
}

/* Slide info */
.hero__slide-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero__slide-info strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
}
.hero__slide-info span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
.hero__slide-badge {
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(200,162,74,0.1);
  border: 1px solid rgba(200,162,74,0.22);
  padding: 5px 14px;
  border-radius: 20px;
}

/* Arrows */
.hero__slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(200,162,74,0.15);
  border: 1px solid rgba(200,162,74,0.25);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  z-index: 3;
  backdrop-filter: blur(8px);
}
.hero__slider-arrow svg { width: 24px; height: 24px; }
.hero__slider-arrow:hover {
  background: rgba(200,162,74,0.3);
  transform: translateY(-50%) scale(1.1);
}
.hero__slider-arrow--next { right: 10px; }
.hero__slider-arrow--prev { left: 10px; }

/* Dots */
.hero__slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-bottom: 16px;
}
.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,162,74,0.4);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}
.hero__dot--active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(200,162,74,0.4);
}

/* ── Bottom stats bar ── */
.hero__statsbar {
  position: relative;
  z-index: 4;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  padding: 28px 24px;
}

.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.hero__stat {
  text-align: center;
  padding: 0 40px;
}
.hero__stat strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.hero__stat span {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.58);
  margin-top: 6px;
  display: block;
}
.hero__stat-div {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* Scroll arrow */
.hero__scroll {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.22);
  animation: bounceDown 2.5s ease-in-out infinite;
}
.hero__scroll svg { width: 28px; height: 28px; }
@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.3; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: 0.7; }
}

/* ══════════════════════════════════════
   FEATURES
══════════════════════════════════════ */
.features {
  position: relative;
  padding: 80px 0;
  background: var(--white);
  background-image: var(--islamic-bg);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feat-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 36px 28px;
  border: 2px solid var(--gold);
  border-image: linear-gradient(135deg, var(--gold), var(--gold-light), transparent 50%) 1;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.feat-card::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px; left: 6px; bottom: 6px;
  border: 1px solid rgba(200,162,74,0.25);
  border-radius: 8px;
  pointer-events: none;
}
.feat-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.feat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px var(--shadow); border-color: transparent; }
.feat-card:hover::before { transform: scaleX(1); }
.feat-card__icon {
  width: 60px; height: 60px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(11,31,58,0.08), rgba(26,95,168,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}
.feat-card__icon svg { width: 28px; height: 28px; color: var(--navy); transition: all 0.3s; }
.feat-card:hover .feat-card__icon { background: var(--navy); }
.feat-card:hover .feat-card__icon svg { color: var(--white); }
.feat-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.feat-card p { font-size: 1rem; font-weight: 600; color: var(--text-light); line-height: 1.75; }

/* ══════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
.services {
  position: relative;
  padding: 90px 0;
  background: var(--white);
  background-image: var(--islamic-bg);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.svc-card {
  background: var(--white);
  border: 2px solid var(--gold);
  border-image: linear-gradient(135deg, var(--gold), var(--gold-light), transparent 50%) 1;
  border-radius: 0;
  padding: 32px 20px 26px;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.svc-card::before {
  content: "";
  position: absolute;
  top: 5px; right: 5px; left: 5px; bottom: 5px;
  border: 1px solid rgba(200,162,74,0.25);
  pointer-events: none;
}
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,0.0) 60%, rgba(11,31,58,0.05));
  opacity: 0;
  transition: opacity 0.4s;
}
.svc-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px var(--shadow);
}
.svc-card:hover::after { opacity: 1; }
.svc-card__icon { font-size: 2.8rem; line-height: 1; transition: transform 0.4s var(--ease-out); }
.svc-card:hover .svc-card__icon { transform: scale(1.15); }
.svc-card__title { font-size: 1rem; font-weight: 800; color: var(--navy); }
.svc-card__desc { font-size: 0.92rem; font-weight: 600; color: var(--text-light); line-height: 1.6; }
.svc-card__arrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  background: var(--gold);
  padding: 6px 16px;
  border-radius: 20px;
  margin-top: auto;
  transition: all 0.3s;
  display: inline-block;
}
.svc-card:hover .svc-card__arrow { background: var(--navy); transform: translateX(-4px); }

/* ══════════════════════════════════════
   LAWYERS
══════════════════════════════════════ */
.lawyers { position: relative; padding: 90px 0; background: var(--white); background-image: var(--islamic-bg); }

/* سلايدر المحامين */
.lawyers-slider {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.lawyers-slider__track {
  display: flex;
  width: 600%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lawyers-slider__slide {
  width: 16.6667%;
  flex-shrink: 0;
}

/* أسهم التنقل */
.lawyers-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  z-index: 5;
  box-shadow: 0 4px 16px var(--shadow);
}
.lawyers-slider__arrow svg { width: 28px; height: 28px; }
.lawyers-slider__arrow:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 28px var(--shadow-lg);
}
.lawyers-slider__arrow--next { right: 16px; }
.lawyers-slider__arrow--prev { left: 16px; }

/* نقاط التنقل */
.lawyers-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 24px 0 8px;
}
.lawyers-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}
.lawyers-slider__dot--active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(200,162,74,0.35);
  transform: scale(1.15);
}

/* بطاقة المحامي المميزة */
.lawyer-featured {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 40px var(--shadow);
  border: 2px solid var(--gold);
  display: grid;
  grid-template-columns: 320px 1fr;
  position: relative;
}
.lawyer-featured::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px; left: 6px; bottom: 6px;
  border: 1px solid rgba(200,162,74,0.3);
  border-radius: 16px;
  pointer-events: none;
}
.lawyer-featured__photo {
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  overflow: hidden;
}
.lawyer-featured__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A24A' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* صورة المحامي */
.lawyer-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lawyer-featured__badge {
  position: absolute;
  bottom: 20px;
  right: 50%;
  transform: translateX(50%);
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 2;
}
.lawyer-featured__body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lawyer-featured__name {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}
.lawyer-featured__title {
  font-size: 0.95rem;
  color: var(--gold);
  font-weight: 700;
  margin-top: 4px;
}
.lawyer-featured__bio { font-size: 1.02rem; font-weight: 600; color: var(--text-light); line-height: 1.75; }

/* Stats row */
.lawyer-featured__stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.lf-stat {
  text-align: center;
  background: var(--gold-pale);
  border: 1px solid rgba(200,162,74,0.2);
  border-radius: var(--r-sm);
  padding: 12px 20px;
  min-width: 90px;
}
.lf-stat strong { display: block; font-size: 1.1rem; font-weight: 900; color: var(--navy); }
.lf-stat span { font-size: 0.72rem; color: var(--text-light); margin-top: 2px; display: block; }

/* Specializations */
.lawyer-featured__specs h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.spec-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-tag {
  background: rgba(11,31,58,0.06);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(11,31,58,0.1);
  transition: all 0.25s;
}
.spec-tag:hover { background: var(--navy); color: var(--white); }

/* Education */
.lawyer-featured__edu { display: flex; flex-direction: column; gap: 10px; }
.edu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-mid);
}
.edu-item svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* CV placeholder */
.lawyer-featured__cv { margin-top: 4px; }
.cv-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--off-white);
  border: 2px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 14px 18px;
}
.cv-placeholder svg { width: 32px; height: 32px; color: var(--text-light); flex-shrink: 0; }
.cv-placeholder strong { display: block; font-size: 0.88rem; color: var(--text); }
.cv-placeholder span { font-size: 0.78rem; color: var(--text-light); }
.cv-soon-badge {
  margin-right: auto;
  margin-left: 0;
  background: var(--gold-pale);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(200,162,74,0.25);
  flex-shrink: 0;
}
/* Actions */
.lawyer-featured__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* Grid additional lawyers */
.lawyers-grid { margin-top: 0; }
.lawyers-add-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(11,31,58,0.03);
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: 20px 28px;
  color: var(--text-light);
  font-size: 0.9rem;
}
.lawyers-add-note svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ══════════════════════════════════════
   الصلح خير — SULH SECTION
══════════════════════════════════════ */
.sulh {
  padding: 90px 0;
  background: var(--white);
  background-image: var(--islamic-bg);
  position: relative;
  overflow: hidden;
}
.sulh::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--navy), var(--gold));
}

.sulh__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.sulh-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 24px 28px;
  text-align: center;
  border: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.sulh-card::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px; left: 6px; bottom: 6px;
  border: 1px solid rgba(200,162,74,0.3);
  border-radius: 16px;
  pointer-events: none;
}
.sulh-card::before {
  content: "🕊️";
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 1.3rem;
  opacity: 0.3;
  transition: opacity 0.3s;
}
.sulh-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px var(--shadow);
}
.sulh-card:hover::before { opacity: 0.7; }

.sulh-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(200,162,74,0.2);
  flex-shrink: 0;
}
.sulh-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.sulh-card__photo--placeholder {
  background: #E8E0D4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sulh-card__photo--placeholder svg {
  width: 100%;
  height: 100%;
}

.sulh-card__info { flex: 1; }
.sulh-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.3;
}
.sulh-card__role {
  font-size: 0.82rem;
  color: var(--gold);
  font-weight: 700;
}

.sulh-card__btn {
  margin-top: auto;
}

/* ══════════════════════════════════════
   REQUEST FORM
══════════════════════════════════════ */
.request { position: relative; padding: 90px 0; background: var(--white); background-image: var(--islamic-bg); }
.request__wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
  position: relative;
}
.request__info .section-title { text-align: right; }
.request__info p { color: var(--text-light); margin-bottom: 20px; }
.request__note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(5,150,105,0.06);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--success);
  font-weight: 600;
}
.request__note svg { width: 18px; height: 18px; flex-shrink: 0; }

.request__form, .request__success {
  background: var(--off-white);
  border-radius: var(--r);
  padding: 36px;
  border: 1px solid var(--border);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.req { color: var(--error); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--text);
  font-size: 0.92rem;
  transition: all 0.3s;
  outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11,31,58,0.08);
}
.field input.invalid, .field textarea.invalid, .field select.invalid {
  border-color: var(--error);
  animation: shake 0.4s var(--ease-out);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
}
.field textarea { min-height: 90px; resize: vertical; }
.field__err { display: block; font-size: 0.75rem; color: var(--error); margin-top: 4px; min-height: 16px; }

/* Success */
.request__success {
  display: none;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.request__success.show { display: flex; animation: popIn 0.5s var(--ease-out); }
.success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  animation: bounceIn 0.6s 0.2s var(--ease-out) both;
}
@keyframes bounceIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.request__success h3 { font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.request__success p  { color: var(--text-light); font-size: 0.9rem; }

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about { position: relative; padding: 90px 0; background: var(--white); background-image: var(--islamic-bg); }
.about .section-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.about__content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about__content h3::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--gold);
  border-radius: 2px;
  display: inline-block;
}
.about__content p { color: var(--text-light); margin-bottom: 24px; font-size: 1.05rem; font-weight: 600; }

.about__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.value-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  border: 1px solid var(--border);
  transition: all 0.3s;
}
.value-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.value-icon { font-size: 1.3rem; }
.value-item strong { font-size: 0.92rem; color: var(--navy); }

.about__card {
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  color: var(--white);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
}
.about__card-num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 8px;
}
.about__card > p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
.about__card hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 20px 0; }
.about__list { display: flex; flex-direction: column; gap: 12px; }
.about__list li {
  text-align: right;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq { padding: 90px 0; background: var(--white); background-image: var(--islamic-bg); }
.faq__list { max-width: 780px; margin: 0 auto; }
.faq__item {
  border: 2px solid var(--gold);
  border-image: linear-gradient(135deg, var(--gold), var(--gold-light), transparent 50%) 1;
  border-radius: 0;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  position: relative;
}
.faq__item:hover { box-shadow: 0 4px 20px var(--shadow); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  gap: 12px;
  background: var(--white);
  transition: background 0.3s;
}
.faq__q:hover { background: var(--off-white); }
.faq__q[aria-expanded="true"] { background: var(--navy); color: var(--white); }
.faq__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  transition: max-height 0.5s var(--ease-out), padding 0.3s;
}
.faq__item.open .faq__a { padding: 18px 22px; }
.faq__a p { font-size: 1.02rem; font-weight: 600; color: var(--text-light); line-height: 1.75; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer__wa-banner {
  background: linear-gradient(135deg, var(--wa-dark), var(--wa));
  padding: 48px 0;
}
.wa-banner__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.wa-banner__text h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}
.wa-banner__text p { color: rgba(255,255,255,0.8); font-size: 0.95rem; }

.footer__main {
  background: var(--navy-dark);
  padding: 56px 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.footer__brand .nav__logo-name { color: var(--white); }
.footer__brand .nav__logo-sub { color: rgba(255,255,255,0.4); }
.footer__brand p { color: rgba(255,255,255,0.45); font-size: 0.88rem; margin-top: 12px; line-height: 1.6; }
.footer__col h4 {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 10px;
}
.footer__col h4::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.footer__col a {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  transition: all 0.25s;
}
.footer__col a:hover { color: var(--gold); padding-right: 4px; }
.footer__wa {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  transition: all 0.3s;
  margin-bottom: 8px;
}
.footer__wa:hover { background: var(--wa-dark); transform: translateY(-2px); }
.footer__note { color: rgba(255,255,255,0.35); font-size: 0.78rem; }

.footer__bottom {
  background: #040D18;
  padding: 18px 0;
}
.footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer__bottom p { color: rgba(255,255,255,0.35); font-size: 0.8rem; }
.footer__links { display: flex; align-items: center; gap: 12px; }
.footer__links a { color: rgba(255,255,255,0.4); font-size: 0.8rem; transition: color 0.2s; }
.footer__links a:hover { color: var(--gold); }
.footer__links span { color: rgba(255,255,255,0.2); }
.footer__logo { display: flex; align-items: center; gap: 10px; }
.footer__logo-img {
  height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ══════════════════════════════════════
   SERVICE OVERLAY
══════════════════════════════════════ */
.svc-overlay, .cta-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.svc-overlay.open, .cta-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.svc-overlay__inner, .cta-overlay__inner {
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.svc-overlay.open .svc-overlay__inner,
.cta-overlay.open .cta-overlay__inner {
  transform: translateY(0);
}
.svc-overlay__close {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 24px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  width: 100%;
  text-align: right;
  transition: background 0.2s;
}
.svc-overlay__close:hover { background: var(--off-white); }
.svc-overlay__close svg { width: 20px; height: 20px; }
.svc-overlay__body, .cta-overlay__body { padding: 40px 24px; max-width: 900px; margin: 0 auto; }

/* Backdrop */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,31,58,0.5);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.overlay-backdrop.show { opacity: 1; pointer-events: all; }

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.reveal-up, .reveal-right, .reveal-left {
  opacity: 0;
  transition: all 0.8s var(--ease-out);
  will-change: transform, opacity;
}
.reveal-up    { transform: translateY(40px); }
.reveal-right { transform: translateX(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-up.visible, .reveal-right.visible, .reveal-left.visible {
  opacity: 1;
  transform: none;
}
.features__grid .reveal-up:nth-child(2) { transition-delay: 0.12s; }
.features__grid .reveal-up:nth-child(3) { transition-delay: 0.24s; }
.services__grid .svc-card:nth-child(2) { transition-delay: 0.08s; }
.services__grid .svc-card:nth-child(3) { transition-delay: 0.16s; }
.services__grid .svc-card:nth-child(4) { transition-delay: 0.24s; }
.services__grid .svc-card:nth-child(5) { transition-delay: 0.32s; }

/* Hero animations */
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════
   RESPONSIVE — TABLET
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero__split { grid-template-columns: 1fr 280px; gap: 40px; }
  .hero__slider { max-width: 280px; }
  .hero__slide-img-wrap { width: 160px; height: 160px; }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .lawyer-featured { grid-template-columns: 260px 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .request__wrap { grid-template-columns: 1fr; gap: 40px; }
  .nav__menu { gap: 0; }
  .nav__link { padding: 8px 10px; font-size: 0.85rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed;
    top: 0; left: -100%;
    width: 80%; max-width: 300px;
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 80px 20px 24px;
    box-shadow: 8px 0 40px rgba(0,0,0,0.1);
    transition: left 0.4s var(--ease-out);
    z-index: 1000;
    overflow-y: auto;
  }
  .nav__menu.open { left: 0; }
  .nav__link { width: 100%; padding: 14px 16px; font-size: 1rem; border-radius: var(--r-sm); }
  .nav__link::after { display: none; }
  .nav__link:hover, .nav__link.active { background: var(--off-white); }

  /* Hero mobile */
  .hero__split { grid-template-columns: 1fr; gap: 24px; }
  .hero__visual { order: -1; }
  .hero__slider { max-width: 260px; margin: 0 auto; }
  .hero__slide-img-wrap { width: 140px; height: 140px; }
  .hero__slide { padding: 20px 16px 14px; }
  .hero__slide-info strong { font-size: 1rem; }
  .hero__slider-arrow { width: 30px; height: 30px; }
  .hero__slider-arrow svg { width: 14px; height: 14px; }
  .hero__main { align-items: center; text-align: center; }
  .hero__sub { text-align: center; }
  .hero__trust { justify-content: center; }
  .hero__container { padding: 72px 24px 32px; }
  .hero__stats { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .hero__stat { padding: 0 16px; }
  .hero__stat-div { display: none; }
  .hero__statsbar { padding: 20px 16px; }
  .hero__scroll { bottom: 80px; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 300px; justify-content: center; }

  .features__grid, .services__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  .lawyer-featured {
    grid-template-columns: 1fr;
  }
  .lawyer-featured__photo { min-height: 260px; }
  .lawyer-featured__body { padding: 24px 20px; }
  .lawyer-featured__stats { gap: 12px; }

  .lawyers-slider__arrow { width: 40px; height: 40px; }
  .lawyers-slider__arrow svg { width: 18px; height: 18px; }
  .lawyers-slider__arrow--next { right: 8px; }
  .lawyers-slider__arrow--prev { left: 8px; }

  .sulh__grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }

  .about__values { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom .container { flex-direction: column; text-align: center; }
  .wa-banner__wrap { flex-direction: column; text-align: center; }

  .svc-overlay__body, .cta-overlay__body { padding: 24px 16px; }
}

@media (max-width: 480px) {
  .services__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 2.2rem; }
  .lawyer-featured__stats { flex-direction: column; }
}

/* ══════════════════════════════════════
   ISLAMIC GEOMETRIC PATTERN (زخرفة إسلامية)
   Mashrabiya-style interlocking star pattern
══════════════════════════════════════ */

/* ── Hero: Full Islamic geometric pattern overlay ── */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C8A24A'%3E%3Cpolygon points='40,14 47,27 60,20 53,33 66,40 53,47 60,60 47,53 40,66 33,53 20,60 27,47 14,40 27,33 20,20 33,27' stroke-width='0.8'/%3E%3Cpolygon points='40,27 47,33 53,40 47,47 40,53 33,47 27,40 33,33' stroke-width='0.6'/%3E%3Ccircle cx='40' cy='40' r='6' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='2.5' stroke-width='0.7' fill='%23C8A24A' fill-opacity='0.15'/%3E%3Cline x1='40' y1='14' x2='40' y2='0' stroke-width='0.6'/%3E%3Cline x1='66' y1='40' x2='80' y2='40' stroke-width='0.6'/%3E%3Cline x1='40' y1='66' x2='40' y2='80' stroke-width='0.6'/%3E%3Cline x1='14' y1='40' x2='0' y2='40' stroke-width='0.6'/%3E%3Cline x1='60' y1='20' x2='80' y2='0' stroke-width='0.5'/%3E%3Cline x1='60' y1='60' x2='80' y2='80' stroke-width='0.5'/%3E%3Cline x1='20' y1='60' x2='0' y2='80' stroke-width='0.5'/%3E%3Cline x1='20' y1='20' x2='0' y2='0' stroke-width='0.5'/%3E%3Cline x1='47' y1='27' x2='60' y2='0' stroke-width='0.35'/%3E%3Cline x1='33' y1='27' x2='20' y2='0' stroke-width='0.35'/%3E%3Cline x1='53' y1='33' x2='80' y2='20' stroke-width='0.35'/%3E%3Cline x1='53' y1='47' x2='80' y2='60' stroke-width='0.35'/%3E%3Cline x1='47' y1='53' x2='60' y2='80' stroke-width='0.35'/%3E%3Cline x1='33' y1='53' x2='20' y2='80' stroke-width='0.35'/%3E%3Cline x1='27' y1='47' x2='0' y2='60' stroke-width='0.35'/%3E%3Cline x1='27' y1='33' x2='0' y2='20' stroke-width='0.35'/%3E%3Cpolygon points='40,0 43,5 40,10 37,5' stroke-width='0.7' fill='%23C8A24A' fill-opacity='0.08'/%3E%3Cpolygon points='80,40 75,43 70,40 75,37' stroke-width='0.7' fill='%23C8A24A' fill-opacity='0.08'/%3E%3Cpolygon points='40,80 43,75 40,70 37,75' stroke-width='0.7' fill='%23C8A24A' fill-opacity='0.08'/%3E%3Cpolygon points='0,40 5,43 10,40 5,37' stroke-width='0.7' fill='%23C8A24A' fill-opacity='0.08'/%3E%3Ccircle cx='0' cy='0' r='3' stroke-width='0.7'/%3E%3Ccircle cx='80' cy='0' r='3' stroke-width='0.7'/%3E%3Ccircle cx='80' cy='80' r='3' stroke-width='0.7'/%3E%3Ccircle cx='0' cy='80' r='3' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── Hero: Decorative Islamic arch frames on sides ── */
.hero__container::before,
.hero__container::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 340px;
  pointer-events: none;
  opacity: 0.12;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.hero__container::before {
  right: -10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='340' viewBox='0 0 60 340'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='1.2'%3E%3Cpath d='M5,340 L5,60 Q5,10 30,5 Q55,10 55,60 L55,340'/%3E%3Cpath d='M12,340 L12,65 Q12,20 30,12 Q48,20 48,65 L48,340'/%3E%3Cpath d='M30,5 L30,12'/%3E%3Ccircle cx='30' cy='35' r='10' stroke-width='0.8'/%3E%3Cpolygon points='30,25 34,31 38,27 36,33 42,35 36,37 38,43 34,39 30,45 26,39 22,43 24,37 18,35 24,33 22,27 26,31' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='35' r='4' stroke-width='0.5'/%3E%3Cline x1='12' y1='80' x2='48' y2='80' stroke-width='0.6'/%3E%3Cline x1='12' y1='82' x2='48' y2='82' stroke-width='0.3'/%3E%3Cpolygon points='30,95 34,101 38,97 36,103 42,105 36,107 38,113 34,109 30,115 26,109 22,113 24,107 18,105 24,103 22,97 26,101' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='105' r='4' stroke-width='0.7'/%3E%3Cpolygon points='30,130 34,136 38,132 36,138 42,140 36,142 38,148 34,144 30,150 26,144 22,148 24,142 18,140 24,138 22,132 26,136' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='140' r='4' stroke-width='0.7'/%3E%3Cline x1='12' y1='165' x2='48' y2='165' stroke-width='0.6'/%3E%3Cline x1='12' y1='167' x2='48' y2='167' stroke-width='0.3'/%3E%3Cpolygon points='30,180 34,186 38,182 36,188 42,190 36,192 38,198 34,194 30,200 26,194 22,198 24,192 18,190 24,188 22,182 26,186' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='190' r='4' stroke-width='0.7'/%3E%3Cpolygon points='30,215 34,221 38,217 36,223 42,225 36,227 38,233 34,229 30,235 26,229 22,233 24,227 18,225 24,223 22,217 26,221' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='225' r='4' stroke-width='0.7'/%3E%3Cline x1='12' y1='250' x2='48' y2='250' stroke-width='0.6'/%3E%3Cline x1='12' y1='252' x2='48' y2='252' stroke-width='0.3'/%3E%3Cpolygon points='30,265 34,271 38,267 36,273 42,275 36,277 38,283 34,279 30,285 26,279 22,283 24,277 18,275 24,273 22,267 26,271' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='275' r='4' stroke-width='0.7'/%3E%3Cpolygon points='30,300 34,306 38,302 36,308 42,310 36,312 38,318 34,314 30,320 26,314 22,318 24,312 18,310 24,308 22,302 26,306' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='310' r='4' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__container::after {
  left: -10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='340' viewBox='0 0 60 340'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='1.2'%3E%3Cpath d='M5,340 L5,60 Q5,10 30,5 Q55,10 55,60 L55,340'/%3E%3Cpath d='M12,340 L12,65 Q12,20 30,12 Q48,20 48,65 L48,340'/%3E%3Cpath d='M30,5 L30,12'/%3E%3Ccircle cx='30' cy='35' r='10' stroke-width='0.8'/%3E%3Cpolygon points='30,25 34,31 38,27 36,33 42,35 36,37 38,43 34,39 30,45 26,39 22,43 24,37 18,35 24,33 22,27 26,31' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='35' r='4' stroke-width='0.5'/%3E%3Cline x1='12' y1='80' x2='48' y2='80' stroke-width='0.6'/%3E%3Cline x1='12' y1='82' x2='48' y2='82' stroke-width='0.3'/%3E%3Cpolygon points='30,95 34,101 38,97 36,103 42,105 36,107 38,113 34,109 30,115 26,109 22,113 24,107 18,105 24,103 22,97 26,101' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='105' r='4' stroke-width='0.7'/%3E%3Cpolygon points='30,130 34,136 38,132 36,138 42,140 36,142 38,148 34,144 30,150 26,144 22,148 24,142 18,140 24,138 22,132 26,136' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='140' r='4' stroke-width='0.7'/%3E%3Cline x1='12' y1='165' x2='48' y2='165' stroke-width='0.6'/%3E%3Cline x1='12' y1='167' x2='48' y2='167' stroke-width='0.3'/%3E%3Cpolygon points='30,180 34,186 38,182 36,188 42,190 36,192 38,198 34,194 30,200 26,194 22,198 24,192 18,190 24,188 22,182 26,186' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='190' r='4' stroke-width='0.7'/%3E%3Cpolygon points='30,215 34,221 38,217 36,223 42,225 36,227 38,233 34,229 30,235 26,229 22,233 24,227 18,225 24,223 22,217 26,221' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='225' r='4' stroke-width='0.7'/%3E%3Cline x1='12' y1='250' x2='48' y2='250' stroke-width='0.6'/%3E%3Cline x1='12' y1='252' x2='48' y2='252' stroke-width='0.3'/%3E%3Cpolygon points='30,265 34,271 38,267 36,273 42,275 36,277 38,283 34,279 30,285 26,279 22,283 24,277 18,275 24,273 22,267 26,271' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='275' r='4' stroke-width='0.7'/%3E%3Cpolygon points='30,300 34,306 38,302 36,308 42,310 36,312 38,318 34,314 30,320 26,314 22,318 24,312 18,310 24,308 22,302 26,306' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='310' r='4' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Hero: Islamic geometric border above stats ── */
.hero__statsbar {
  position: relative;
}
.hero__statsbar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='6' viewBox='0 0 48 6'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.8'%3E%3Cpath d='M0,3 L6,0 L12,3 L6,6 Z'/%3E%3Cpath d='M12,3 L18,0 L24,3 L18,6 Z'/%3E%3Cpath d='M24,3 L30,0 L36,3 L30,6 Z'/%3E%3Cpath d='M36,3 L42,0 L48,3 L42,6 Z'/%3E%3Ccircle cx='12' cy='3' r='1' fill='%23C8A24A'/%3E%3Ccircle cx='24' cy='3' r='1' fill='%23C8A24A'/%3E%3Ccircle cx='36' cy='3' r='1' fill='%23C8A24A'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 6px;
  opacity: 0.5;
}

/* ── Navigation Islamic accent line ── */
.nav::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='3' viewBox='0 0 48 3'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.6'%3E%3Cpath d='M0,1.5 L6,0 L12,1.5 L6,3 Z'/%3E%3Cpath d='M12,1.5 L18,0 L24,1.5 L18,3 Z'/%3E%3Cpath d='M24,1.5 L30,0 L36,1.5 L30,3 Z'/%3E%3Cpath d='M36,1.5 L42,0 L48,1.5 L42,3 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 3px;
  opacity: 0;
  transition: opacity 0.4s;
}
.nav.scrolled::after {
  opacity: 0.5;
}

/* ── Section title Islamic decoration (under headings) ── */
.section-head::after {
  content: "";
  display: block;
  width: 160px;
  height: 30px;
  margin: 16px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30' viewBox='0 0 160 30'%3E%3Cg fill='none' stroke='%23C8A24A'%3E%3Cpolygon points='80,3 86,10 92,7 90,14 98,15 90,18 92,25 86,20 80,27 74,20 68,25 70,18 62,15 70,14 68,7 74,10' stroke-width='0.9'/%3E%3Ccircle cx='80' cy='15' r='4' stroke-width='0.6'/%3E%3Ccircle cx='80' cy='15' r='1.8' fill='%23C8A24A' fill-opacity='0.3' stroke-width='0.7'/%3E%3Cline x1='5' y1='15' x2='58' y2='15' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='102' y1='15' x2='155' y2='15' stroke-width='0.5' opacity='0.5'/%3E%3Cpolygon points='5,15 8,13 11,15 8,17' fill='%23C8A24A' fill-opacity='0.4' stroke-width='0.7'/%3E%3Cpolygon points='155,15 152,13 149,15 152,17' fill='%23C8A24A' fill-opacity='0.4' stroke-width='0.7'/%3E%3Cpolygon points='25,15 28,13 31,15 28,17' stroke-width='0.7' opacity='0.4'/%3E%3Cpolygon points='135,15 132,13 129,15 132,17' stroke-width='0.7' opacity='0.4'/%3E%3Cpolygon points='45,15 47,13.5 49,15 47,16.5' stroke-width='0.3' opacity='0.3'/%3E%3Cpolygon points='115,15 113,13.5 111,15 113,16.5' stroke-width='0.3' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ── Global: Subtle Islamic background for all sections ── */
.features,
.services,
.lawyers,
.request,
.about,
.faq {
  position: relative;
}
.features::before,
.services::before,
.request::before,
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%230B1F3A'%3E%3Cpolygon points='40,14 47,27 60,20 53,33 66,40 53,47 60,60 47,53 40,66 33,53 20,60 27,47 14,40 27,33 20,20 33,27' stroke-width='0.7'/%3E%3Cpolygon points='40,27 47,33 53,40 47,47 40,53 33,47 27,40 33,33' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='6' stroke-width='0.7'/%3E%3Cline x1='40' y1='14' x2='40' y2='0' stroke-width='0.5'/%3E%3Cline x1='66' y1='40' x2='80' y2='40' stroke-width='0.5'/%3E%3Cline x1='40' y1='66' x2='40' y2='80' stroke-width='0.5'/%3E%3Cline x1='14' y1='40' x2='0' y2='40' stroke-width='0.5'/%3E%3Cline x1='60' y1='20' x2='80' y2='0' stroke-width='0.7'/%3E%3Cline x1='60' y1='60' x2='80' y2='80' stroke-width='0.7'/%3E%3Cline x1='20' y1='60' x2='0' y2='80' stroke-width='0.7'/%3E%3Cline x1='20' y1='20' x2='0' y2='0' stroke-width='0.7'/%3E%3Cline x1='47' y1='27' x2='60' y2='0' stroke-width='0.3'/%3E%3Cline x1='33' y1='27' x2='20' y2='0' stroke-width='0.3'/%3E%3Cline x1='53' y1='33' x2='80' y2='20' stroke-width='0.3'/%3E%3Cline x1='53' y1='47' x2='80' y2='60' stroke-width='0.3'/%3E%3Cline x1='47' y1='53' x2='60' y2='80' stroke-width='0.3'/%3E%3Cline x1='33' y1='53' x2='20' y2='80' stroke-width='0.3'/%3E%3Cline x1='27' y1='47' x2='0' y2='60' stroke-width='0.3'/%3E%3Cline x1='27' y1='33' x2='0' y2='20' stroke-width='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}
/* off-white sections get gold stroke instead */
.lawyers::before,
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C8A24A'%3E%3Cpolygon points='40,14 47,27 60,20 53,33 66,40 53,47 60,60 47,53 40,66 33,53 20,60 27,47 14,40 27,33 20,20 33,27' stroke-width='0.7'/%3E%3Cpolygon points='40,27 47,33 53,40 47,47 40,53 33,47 27,40 33,33' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='6' stroke-width='0.7'/%3E%3Cline x1='40' y1='14' x2='40' y2='0' stroke-width='0.5'/%3E%3Cline x1='66' y1='40' x2='80' y2='40' stroke-width='0.5'/%3E%3Cline x1='40' y1='66' x2='40' y2='80' stroke-width='0.5'/%3E%3Cline x1='14' y1='40' x2='0' y2='40' stroke-width='0.5'/%3E%3Cline x1='60' y1='20' x2='80' y2='0' stroke-width='0.7'/%3E%3Cline x1='60' y1='60' x2='80' y2='80' stroke-width='0.7'/%3E%3Cline x1='20' y1='60' x2='0' y2='80' stroke-width='0.7'/%3E%3Cline x1='20' y1='20' x2='0' y2='0' stroke-width='0.7'/%3E%3Cline x1='47' y1='27' x2='60' y2='0' stroke-width='0.3'/%3E%3Cline x1='33' y1='27' x2='20' y2='0' stroke-width='0.3'/%3E%3Cline x1='53' y1='33' x2='80' y2='20' stroke-width='0.3'/%3E%3Cline x1='53' y1='47' x2='80' y2='60' stroke-width='0.3'/%3E%3Cline x1='47' y1='53' x2='60' y2='80' stroke-width='0.3'/%3E%3Cline x1='33' y1='53' x2='20' y2='80' stroke-width='0.3'/%3E%3Cline x1='27' y1='47' x2='0' y2='60' stroke-width='0.3'/%3E%3Cline x1='27' y1='33' x2='0' y2='20' stroke-width='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}
/* Keep section content above pattern */
.features > .container,
.services > .container,
.lawyers > .container,
.request > .container,
.about > .container,
.faq > .container {
  position: relative;
  z-index: 1;
}

/* ── Feature cards Islamic corner accents ── */
.feat-card::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23C8A24A' opacity='0.4'%3E%3Cpolygon points='14,2 17,8 22,6 20,11 28,13 20,15 22,22 17,18 14,26 11,18 6,22 8,15 0,13 8,11 6,6 11,8' stroke-width='0.5'/%3E%3Ccircle cx='14' cy='14' r='3.5' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ── Service cards subtle pattern ── */
.svc-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23C8A24A' opacity='0.18'%3E%3Cpolygon points='11,1 13,6 18,4 16,9 22,10 16,12 18,18 13,15 11,21 9,15 4,18 6,12 0,10 6,9 4,4 9,6' stroke-width='0.5'/%3E%3Ccircle cx='11' cy='11' r='2.5' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: opacity 0.3s;
}
.svc-card:hover::before { opacity: 1; }

/* ── Sulh section Islamic frame ── */
.sulh::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='6' viewBox='0 0 48 6'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.8'%3E%3Cpath d='M0,3 L6,0 L12,3 L6,6 Z'/%3E%3Cpath d='M12,3 L18,0 L24,3 L18,6 Z'/%3E%3Cpath d='M24,3 L30,0 L36,3 L30,6 Z'/%3E%3Cpath d='M36,3 L42,0 L48,3 L42,6 Z'/%3E%3Ccircle cx='12' cy='3' r='1' fill='%23C8A24A'/%3E%3Ccircle cx='24' cy='3' r='1' fill='%23C8A24A'/%3E%3Ccircle cx='36' cy='3' r='1' fill='%23C8A24A'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 6px;
  opacity: 0.4;
}

/* ── Footer Islamic pattern band ── */
.footer__wa-banner {
  position: relative;
}
.footer__wa-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='6' viewBox='0 0 48 6'%3E%3Cg fill='none' stroke='%23C8A24A' stroke-width='0.8'%3E%3Cpath d='M0,3 L6,0 L12,3 L6,6 Z'/%3E%3Cpath d='M12,3 L18,0 L24,3 L18,6 Z'/%3E%3Cpath d='M24,3 L30,0 L36,3 L30,6 Z'/%3E%3Cpath d='M36,3 L42,0 L48,3 L42,6 Z'/%3E%3Ccircle cx='12' cy='3' r='1' fill='%23C8A24A'/%3E%3Ccircle cx='24' cy='3' r='1' fill='%23C8A24A'/%3E%3Ccircle cx='36' cy='3' r='1' fill='%23C8A24A'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 6px;
  opacity: 0.6;
}

/* ── Footer background subtle pattern ── */
.footer__main {
  position: relative;
}
.footer__main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C8A24A'%3E%3Cpolygon points='40,14 47,27 60,20 53,33 66,40 53,47 60,60 47,53 40,66 33,53 20,60 27,47 14,40 27,33 20,20 33,27' stroke-width='0.7'/%3E%3Cpolygon points='40,27 47,33 53,40 47,47 40,53 33,47 27,40 33,33' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='6' stroke-width='0.7'/%3E%3Cline x1='40' y1='14' x2='40' y2='0' stroke-width='0.5'/%3E%3Cline x1='66' y1='40' x2='80' y2='40' stroke-width='0.5'/%3E%3Cline x1='40' y1='66' x2='40' y2='80' stroke-width='0.5'/%3E%3Cline x1='14' y1='40' x2='0' y2='40' stroke-width='0.5'/%3E%3Cline x1='60' y1='20' x2='80' y2='0' stroke-width='0.7'/%3E%3Cline x1='60' y1='60' x2='80' y2='80' stroke-width='0.7'/%3E%3Cline x1='20' y1='60' x2='0' y2='80' stroke-width='0.7'/%3E%3Cline x1='20' y1='20' x2='0' y2='0' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── About card Islamic corner ── */
.about__card {
  position: relative;
}
.about__card::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23C8A24A' opacity='0.3'%3E%3Cpolygon points='18,2 22,9 28,6 26,13 36,15 26,18 28,26 22,22 18,32 14,22 8,26 10,18 0,15 10,13 8,6 14,9' stroke-width='0.6'/%3E%3Cpolygon points='18,9 21,13 25,12 23,16 28,18 23,19 25,24 21,22 18,28 15,22 11,24 13,19 8,18 13,16 11,12 15,13' stroke-width='0.7'/%3E%3Ccircle cx='18' cy='18' r='3' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ── Floating Sulh Button ── */
.sulh-float {
  position: fixed;
  bottom: 100px;
  left: 28px;
  z-index: 900;
  height: 48px;
  border-radius: 24px;
  background: var(--navy);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  box-shadow: 0 4px 20px rgba(11,31,58,0.35), 0 8px 32px rgba(0,0,0,0.15);
  transition: all 0.3s var(--ease-out);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
}
.sulh-float svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.sulh-float__label {
  white-space: nowrap;
}
.sulh-float:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(200,162,74,0.4), 0 12px 40px rgba(0,0,0,0.2);
}

/* ── Floating WhatsApp Button ── */
.wa-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 900;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 8px 32px rgba(0,0,0,0.15);
  transition: all 0.3s var(--ease-out);
  animation: waFloat 3s ease-in-out infinite;
}
.wa-float svg {
  width: 32px;
  height: 32px;
}
.wa-float:hover {
  background: var(--wa-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.5), 0 12px 40px rgba(0,0,0,0.2);
}
@keyframes waFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.wa-float:hover {
  animation: none;
  transform: scale(1.1);
}

/* ── Responsive: hide arch frames on small screens ── */
@media (max-width: 1024px) {
  .hero__container::before,
  .hero__container::after {
    display: none;
  }
}
/* ══════════════════════════════════════
   Reduced motion
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal-up, .reveal-right, .reveal-left { opacity: 1; transform: none; }
}