/* Hero + Header harmony v8 */
:root{
  --hh-shell: min(1320px, calc(100% - 40px));
}

/* ---------- Header ---------- */
.topbar{
  top: 0 !important;
  margin: 0 auto !important;
  padding: 0 18px 12px !important;
  background: linear-gradient(180deg, rgba(247,249,252,.96), rgba(247,249,252,.72)) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 0 !important;
  box-shadow: none !important;
}

.topbar-inner{
  width: min(1320px, calc(100vw - 36px)) !important;
  margin: 0 auto !important;
  min-height: 84px !important;
  padding: 16px 24px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  border-radius: 0 0 24px 24px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(203,213,225,.66) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10) !important;
}

.brand{
  gap: 12px !important;
  min-width: max-content;
}
.brand img{
  width: 48px !important;
  height: 48px !important;
  padding: 5px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(203,213,225,.85);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}
.brand-text strong{
  font-size: 1.22rem !important;
  line-height: 1.05;
}
.brand-text span{
  font-size: .88rem !important;
  color: #64748b !important;
  margin-top: 4px;
}

.nav{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px !important;
}
.nav a{
  padding: 11px 14px !important;
  border-radius: 14px !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
}
.nav a:hover,
.nav a:focus-visible{
  background: #eef4fb !important;
  color: #0f2744 !important;
}
.nav .btn{
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: .95rem !important;
}
.nav .btn.primary{
  background: linear-gradient(135deg, #173a63, #225b93) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.menu-btn{
  min-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
}

/* ---------- Hero ---------- */
.hero{
  margin: 10px 0 28px !important;
  min-height: 640px !important;
  border-radius: 0 0 32px 32px !important;
  border: 0 !important;
  box-shadow: 0 28px 60px rgba(15,23,42,.12) !important;
}
.hero-overlay{
  background:
    linear-gradient(90deg, rgba(3,15,30,.68) 0%, rgba(3,15,30,.44) 34%, rgba(3,15,30,.22) 100%) !important;
}
.hero-content{
  align-items: center !important;
  justify-content: center !important;
  padding: 42px 0 !important;
}
.hero-simple-shell,
.hero-simple-shell--compact{
  width: var(--hh-shell) !important;
  max-width: 1320px !important;
  min-height: 530px !important;
  margin: 0 auto !important;
  padding: 44px 48px !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(520px, 700px) !important;
  align-items: center !important;
  gap: clamp(26px, 4vw, 72px) !important;
  background: linear-gradient(135deg, rgba(4,22,48,.30), rgba(4,22,48,.12)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 30px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 42px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}

.hero-simple-shell::before,
.hero-simple-shell--compact::before{
  content: "";
  display: block;
  align-self: stretch;
  min-height: 100%;
  border-radius: 26px;
  background:
    radial-gradient(circle at 22% 24%, rgba(99,179,237,.28), transparent 28%),
    radial-gradient(circle at 72% 68%, rgba(16,185,129,.14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-simple-shell::after,
.hero-simple-shell--compact::after{
  content: "استشارات مؤسسية\A حلول تنفيذية\A أثر قابل للقياس";
  white-space: pre;
  position: absolute;
  left: 72px;
  bottom: 74px;
  z-index: 1;
  font-family: "Tajawal", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.95;
  font-weight: 700;
  color: rgba(255,255,255,.84);
  pointer-events: none;
}

.hero-copy,
.hero-copy--compact,
.hero-copy.hero-copy--compact{
  width: 100% !important;
  max-width: 700px !important;
  margin-inline-start: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 16px !important;
  text-align: right !important;
  position: relative;
  z-index: 2;
}
[dir="rtl"] .hero-copy,
[dir="rtl"] .hero-copy--compact,
[dir="rtl"] .hero-copy.hero-copy--compact{
  align-items: flex-start !important;
}

.tag{
  margin: 0 0 6px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  font-size: .95rem !important;
}
.hero-title,
.hero-copy h1,
.hero-copy--compact h1{
  max-width: 15ch !important;
  margin: 0 !important;
  font-size: clamp(3rem, 4.4vw, 5.5rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-wrap: pretty;
}
.hero-actions{
  margin-top: 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}
.hero-actions .btn{
  min-width: 176px !important;
  height: 50px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  justify-content: center !important;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.hero-actions .btn.primary{
  background: #fff !important;
  color: #0f2744 !important;
  border-color: #fff !important;
  box-shadow: 0 14px 28px rgba(255,255,255,.15);
}
.hero-actions .btn.primary i{color:#0f2744 !important;}
.hero-actions .btn:hover{transform: translateY(-1px);}

.controls{
  top: auto !important;
  bottom: 22px !important;
  right: 26px !important;
  gap: 8px !important;
}
[dir="ltr"] .controls{left:26px !important; right:auto !important;}
.iconbtn{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.dots{
  bottom: 28px !important;
  left: 28px !important;
}
[dir="ltr"] .dots{right:28px !important; left:auto !important;}

/* ---------- Dark mode ---------- */
body.dark-mode .topbar{
  background: linear-gradient(180deg, rgba(9,19,33,.94), rgba(9,19,33,.72)) !important;
}
body.dark-mode .topbar-inner{
  background: rgba(11, 23, 40, .92) !important;
  border-color: rgba(148,163,184,.14) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.30) !important;
}
body.dark-mode .brand img{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(148,163,184,.14) !important;
}
body.dark-mode .brand-text strong,
body.dark-mode .nav a,
body.dark-mode .menu-btn,
body.dark-mode .menu-btn i,
body.dark-mode .menu-btn span{
  color: #eef4ff !important;
}
body.dark-mode .brand-text span{color:#9fb1c9 !important;}
body.dark-mode .nav a:hover,
body.dark-mode .nav a:focus-visible{
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
body.dark-mode .nav .btn:not(.primary),
body.dark-mode .menu-btn{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(148,163,184,.14) !important;
  color: #eef4ff !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px){
  .topbar-inner{
    grid-template-columns: auto 1fr auto;
    padding: 14px 18px !important;
  }
  .nav a{padding: 10px 11px !important; font-size: .93rem !important;}
  .hero{
    min-height: 580px !important;
  }
  .hero-simple-shell,
  .hero-simple-shell--compact{
    grid-template-columns: minmax(260px, .82fr) minmax(430px, 1fr) !important;
    min-height: 480px !important;
    padding: 34px !important;
  }
  .hero-simple-shell::after,
  .hero-simple-shell--compact::after{
    left: 52px;
    bottom: 52px;
    font-size: 1rem;
  }
  .hero-title,
  .hero-copy h1,
  .hero-copy--compact h1{
    max-width: 13ch !important;
    font-size: clamp(2.6rem, 4.4vw, 4.3rem) !important;
  }
}

@media (max-width: 991.98px){
  .topbar{
    padding: 0 12px 10px !important;
  }
  .topbar-inner{
    width: calc(100vw - 24px) !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    min-height: 76px !important;
  }
  .nav-desktop{display:none !important;}
  .menu-btn{display:inline-flex !important; justify-content:center;}
  .brand{min-width: 0;}
  .brand-text strong{font-size:1.08rem !important;}
  .brand-text span{font-size:.82rem !important;}

  .hero{
    min-height: 560px !important;
    border-radius: 0 0 26px 26px !important;
  }
  .hero-content{
    padding: 22px 0 34px !important;
  }
  .hero-simple-shell,
  .hero-simple-shell--compact{
    width: calc(100% - 24px) !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px !important;
  }
  .hero-simple-shell::before,
  .hero-simple-shell--compact::before,
  .hero-simple-shell::after,
  .hero-simple-shell--compact::after{
    display: none !important;
  }
  .hero-copy,
  .hero-copy--compact,
  .hero-copy.hero-copy--compact{
    max-width: 100% !important;
    align-items: stretch !important;
  }
  .hero-title,
  .hero-copy h1,
  .hero-copy--compact h1{
    max-width: 100% !important;
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
    line-height: 1.13 !important;
  }
  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100%;
  }
  .hero-actions .btn{
    width: 100% !important;
    min-width: 0 !important;
  }
  .controls,
  .dots{
    display:none !important;
  }
}

@media (max-width: 575.98px){
  .topbar-inner{
    border-radius: 0 0 18px 18px !important;
    padding: 12px 14px !important;
  }
  .brand img{width:44px !important; height:44px !important;}
  .menu-btn{min-height:42px !important; padding:0 14px !important;}
  .hero-simple-shell,
  .hero-simple-shell--compact{
    width: calc(100% - 18px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
  .hero-title,
  .hero-copy h1,
  .hero-copy--compact h1{
    font-size: clamp(1.82rem, 9vw, 2.75rem) !important;
  }
  .hero-actions{
    grid-template-columns: 1fr !important;
  }
}