/*
 * ركائز القسط — Brand Theme Override
 * Primary: Teal #0f5c5c | Secondary: Gold #c9a84c
 */

:root {
  --navy:      #0f5c5c;
  --navy-dark: #0a4040;
  --navy-mid:  #136a6a;
  --teal:      #0f5c5c;
  --teal-mid:  #1a7a7a;
  --teal-light:#228888;
  --gold:      #c9a84c;
  --gold-dark: #9e7520;
  --gold-light:#e8c96a;
}

/* ── Hero background — teal gradient instead of navy ── */
.hero-2026,
.hero-2026 .hero-bg-layer {
  background: linear-gradient(160deg, #041212 0%, #071e1e 35%, #0a2e2e 65%, #0d3a3a 100%) !important;
}
.hero-bg-layer {
  background:
    radial-gradient(ellipse 140% 90% at 75% 60%, rgba(10,80,80,.9) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 5% 90%, rgba(201,168,76,.06) 0%, transparent 50%),
    radial-gradient(ellipse 45% 45% at 95% 10%, rgba(201,168,76,.05) 0%, transparent 50%),
    linear-gradient(160deg, #041212 0%, #071e1e 35%, #0a2e2e 65%, #0d3a3a 100%) !important;
}

/* ── Trust & Numbers sections — teal ── */
.trust-section,
.numbers-section {
  background: linear-gradient(135deg, #0f5c5c 0%, #136a6a 100%) !important;
}

/* ── Consultation section ── */
.whb-consult-section { background: #071e1e !important; }
.whb-consult-bg {
  background:
    linear-gradient(90deg, rgba(4,18,18,.97) 0%, rgba(10,60,60,.86) 46%, rgba(4,18,18,.82) 100%),
    url('../img/consultation-bg.webp') center/cover no-repeat !important;
}

/* ── Page hero ── */
.page-hero {
  background: linear-gradient(135deg, #0f5c5c 0%, #1a7a7a 100%) !important;
}

/* ── Mobile header on white bg ── */
@media (max-width: 880px) {
  .header {
    background: #fff !important;
    border-bottom: 1px solid rgba(15,92,92,.15) !important;
  }
  .mobile-menu-toggle span { background: #0f5c5c !important; }
  .mobile-menu-toggle { border-color: rgba(15,92,92,.15) !important; }
}

/* ── Desktop header — teal dark ── */
@media (min-width: 881px) {
  .header { background: rgba(10,50,50,.95) !important; }
  .header.scrolled { background: rgba(4,20,20,.99) !important; }
}

/* ── Footer ── */
.footer { background: #0a3a3a !important; }
.footer-bottom { background: rgba(0,0,0,.25) !important; }

/* ── Mobile menu ── */
.mobile-menu {
  background: linear-gradient(160deg, #0a2a2a 0%, #071e1e 55%, #040f0f 100%) !important;
}

/* ── Logo frame: teal border ── */
.logo-frame {
  border-color: rgba(201,168,76,.5) !important;
  background: rgba(15,92,92,.12) !important;
}

/* ── About section ── */
.about-story { background: #f4f8f8 !important; }
.whyus-section { background: #f0f7f7 !important; }
.whb-why-2026 { background: #fff !important; }

/* ── CTA button on forms ── */
.whb-submit-btn {
  background: linear-gradient(135deg, #1a7a7a, #0f5c5c) !important;
  color: #fff !important;
}
.whb-submit-btn:hover { filter: brightness(1.1) !important; }

/* ── Nav active/hover ── */
.nav-link.active, .nav-link:hover { color: #fff !important; }
.nav-link--cta {
  background: linear-gradient(135deg, #c9a84c, #9e7520) !important;
}

/* ── Section tags ── */
.sec-tag, .section-subtitle, .trust-tag, .about-story-tag,
.numbers-subtitle, .hero-badge-pill {
  color: var(--gold) !important;
}

/* ── Card active borders ── */
.ctab.active { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }
.cnav-dot.active { background: var(--gold) !important; }
.hero-card { border-color: rgba(201,168,76,.25) !important; }

/* ── Logo image: no invert needed (PNG has transparent bg) ── */
.logo-frame .logo-img,
.logo-img,
.mobile-logo img {
  filter: none !important;
}

/* ── Stat cards in teal sections ── */
.stat-card, .trust-acc-card {
  border-color: rgba(201,168,76,.22) !important;
}

/* ── Hero orbs — teal ── */
.hero-orb-1 { background: radial-gradient(circle, rgba(15,92,92,.2) 0%, transparent 65%) !important; }
.hero-orb-2 { background: radial-gradient(circle, rgba(10,50,50,.7) 0%, transparent 65%) !important; }
.hero-orb-3 { background: radial-gradient(circle, rgba(201,168,76,.06) 0%, transparent 65%) !important; }

/* ── About exp badge — teal instead of navy ── */
.about-exp-badge {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
}

/* ── Package section backgrounds ── */
.pkg-card.featured { border-color: var(--gold) !important; }
.pkg-featured-badge {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
}

/* ── Hero btn main ── */
.hero-btn-main {
  background: linear-gradient(135deg, #c9a84c 0%, #9e7520 100%) !important;
}