html {
  scroll-behavior: smooth;
}

.container-g {
  max-width: 1120px;
}

.bg-hero {
  background-image: linear-gradient(
      rgba(11, 19, 36, 0.55),
      rgba(11, 19, 36, 0.55)
    ),
    url("https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=2000&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}

.metric-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.1);
}

.feature-card {
  transition: transform 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
}

.pricing-card {
  border: 1px solid rgba(2, 8, 23, 0.08);
}

/* Animated underline for navbar links */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 2px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor; /* follows text color (e.g., hover:text-primary) */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* FAQ Styles */
.faq-answer {
  transition: all 0.3s ease;
  overflow: hidden;
  display: none;
  max-height: 0;
  opacity: 0;
  padding: 0 1.5rem;
}

.faq-answer:not(.hidden) {
  display: block;
  max-height: 500px;
  opacity: 1;
  padding: 1.5rem;
  padding-top: 0;
}

.faq-answer.hidden {
  display: none;
  max-height: 0;
  opacity: 0;
  padding: 0 1.5rem;
  overflow: hidden;
}

.faq-question {
  cursor: pointer;
  user-select: none;
}

.faq-question i {
  transition: transform 0.3s ease;
}

/* Debug styles to make sure FAQ answers are visible */
.faq-answer p {
  margin: 0;
  line-height: 1.6;
}