/* ============================================================
   THEME — GOLD (Override)
   Warm amber-gold palette matched to the Moon Treasure logo.
   Primary: #C4870A (logo gold ring/dragon)
   Accent:  #E05A28 (logo coral crescent)
   Dark:    #1A0D04 (deep warm near-black)
   ============================================================ */

:root {
  /* Deep warm dark family */
  --navy: #1A0D04;
  --navy-light: #3A1C09;

  /* Extended gold family for depth effects */
  --gold-deep: #7A5200;
  --gold-darkest: #120800;
  --gold-glow: rgba(196, 135, 10, 0.35);
  --gold-light: #FEF3D6;

  /* Re-tint shadows toward warm dark */
  --shadow-sm: 0 2px 8px rgba(26, 13, 4, 0.07);
  --shadow-md: 0 4px 16px rgba(26, 13, 4, 0.10);
  --shadow-lg: 0 12px 40px rgba(26, 13, 4, 0.16);
  --shadow-teal: 0 12px 32px rgba(196, 135, 10, 0.28);
}

/* ===== Hero overlay gradient — warm gold tones ===== */
.hero::after {
  background: linear-gradient(95deg,
    rgba(18, 8, 0, 0.93) 0%,
    rgba(26, 13, 4, 0.72) 45%,
    rgba(196, 135, 10, 0.30) 100%);
}

/* Hero base gradient — deep warm dark → gold glow */
.hero,
.page-hero {
  background: linear-gradient(135deg, var(--gold-darkest) 0%, var(--navy) 45%, #5A3800 100%);
}

.page-hero::before {
  background: radial-gradient(circle at 20% 30%, rgba(224, 90, 40, 0.18) 0%, transparent 50%),
              radial-gradient(circle at 85% 70%, rgba(196, 135, 10, 0.22) 0%, transparent 55%);
}

/* ===== Industry card overlay — warm dark ===== */
.industry-card::after {
  background: linear-gradient(180deg, transparent 30%, rgba(18, 8, 0, 0.92) 100%);
}

/* ===== Lightbox bg ===== */
#lightbox {
  background: rgba(18, 8, 0, 0.95) !important;
}

/* ===== Footer — deep warm dark with gold top stripe ===== */
.footer {
  background: var(--gold-darkest);
}

.footer::before {
  background: linear-gradient(90deg, var(--teal) 0%, var(--orange) 50%, #D4920F 100%);
  height: 4px;
}

.footer__social a {
  background: var(--navy-light);
}

.footer__social a:hover {
  background: var(--teal);
  box-shadow: 0 6px 20px var(--gold-glow);
}

/* ===== Testimonial avatars — gold gradient ===== */
.testimonial__avatar {
  background: linear-gradient(135deg, var(--orange), var(--teal));
}

/* ===== Process step numbers — dark with gold numerals ===== */
.process-step__num {
  background: linear-gradient(135deg, var(--navy), var(--gold-darkest));
  color: var(--teal);
  box-shadow: 0 8px 24px var(--gold-glow);
}

/* ===== Card hover — warm gold lift shadow ===== */
.card:hover {
  box-shadow: 0 16px 40px rgba(196, 135, 10, 0.20);
  border-left: 4px solid var(--orange);
}

/* ===== Pills — warm gold tint ===== */
.pill {
  background: var(--gold-light);
  color: var(--gold-deep);
}

.pill--solid-orange {
  background: var(--orange);
  color: white;
}

/* ===== Form focus — gold glow ===== */
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ===== Compare table — warm dark headers ===== */
.compare-table thead th {
  background: var(--gold-darkest);
}
.compare-table thead th:nth-child(2) {
  background: var(--teal);
}

/* ===== Cert card — gold left accent on hover ===== */
.cert-card:hover {
  border-left-color: var(--teal);
  box-shadow: 0 12px 32px rgba(196, 135, 10, 0.18);
}

/* ===== Top bar — deep warm dark ===== */
.topbar {
  background: var(--gold-darkest);
}

/* ===== Floating call button — gold ===== */
.float-btn--phone {
  background: var(--teal);
}

.float-btn--phone:hover {
  background: var(--teal-dark);
}

/* ===== Scroll-to-top — warm dark → gold on hover ===== */
#scrollTop {
  background: var(--navy);
}

#scrollTop:hover {
  background: var(--teal);
}

/* ===== Hero stat dividers — warm gold tint ===== */
.hero__stat:not(:last-child)::after {
  background: rgba(254, 243, 214, 0.30);
}

/* ===== Scrolled navbar — faint gold shadow ===== */
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(196, 135, 10, 0.14);
}

/* ===== Industry card hover — gold glow ===== */
.industry-card:hover {
  box-shadow: 0 16px 40px rgba(196, 135, 10, 0.24);
}

/* ===== Image-background service cards — warm dark overlay ===== */
.card--bg::after {
  background: linear-gradient(180deg,
    rgba(18, 8, 0, 0.10) 0%,
    rgba(18, 8, 0, 0.65) 45%,
    rgba(18, 8, 0, 0.96) 85%);
}

.card.card--bg:hover {
  box-shadow: 0 24px 50px rgba(196, 135, 10, 0.35);
}

/* ===== Mobile hero overlay — warm dark ===== */
@media (max-width: 768px) {
  .hero {
    background: #120800;
  }

  .hero::after {
    background: linear-gradient(180deg,
      rgba(18, 8, 0, 0.88) 0%,
      rgba(18, 8, 0, 0.65) 35%,
      rgba(18, 8, 0, 0.30) 65%,
      rgba(18, 8, 0, 0.08) 100%);
  }

  /* Mobile hero image — gold border matches logo palette */
  .hero__mobile-img {
    border-color: rgba(196, 135, 10, 0.55);
    box-shadow: 0 16px 48px rgba(18, 8, 0, 0.70), 0 0 0 1px rgba(196, 135, 10, 0.20);
  }
}