/* ===== HERO GRADIENT ===== */
.hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(19, 52, 35, 0.95) 0%,
    rgba(10, 30, 20, 0.98) 50%,
    rgba(6, 18, 12, 1) 100%
  );
}

.hero-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(201, 168, 76, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(83, 130, 55, 0.08) 0%, transparent 50%);
}

/* ===== TESTIMONIALS BACKGROUND ===== */
.testimonials-gradient {
  background: linear-gradient(135deg, #f8f6ef 0%, #f0ead6 50%, #e8e0c8 100%);
}

/* ===== CTA BACKGROUND ===== */
.cta-gradient {
  background: linear-gradient(135deg, #1B3C2B 0%, #0f2419 60%, #08130c 100%);
}

.about-glow {
  background: radial-gradient(circle, rgba(83, 130, 55, 0.15) 0%, transparent 70%);
}

/* ===== NAVBAR ===== */
#navbar.scrolled {
  background: rgba(8, 19, 12, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ===== GOLD LINE ACCENTS ===== */
.gold-line {
  background: linear-gradient(90deg, transparent, #c9a84c, transparent);
  height: 1px;
}

/* ===== SMOOTH SCROLL OFFSET ===== */
section[id] {
  scroll-margin-top: 80px;
}

/* ===== IMAGE HOVER ===== */
img {
  transition: transform 0.5s ease;
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #08130c;
}
::-webkit-scrollbar-thumb {
  background: #1B3C2B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #335125;
}

/* ===== FOCUS STYLES ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== MOBILE MENU ANIMATION ===== */
#mobile-menu {
  animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== MENU CARD HOVER ===== */
.bg-forest-900\/50:hover {
  background: rgba(27, 60, 43, 0.7);
}

/* ===== GOLD GLOW EFFECT ===== */
.shadow-gold {
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.3);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 640px) {
  .font-serif {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}