/* Shared visual language for Home and /tinh-nang. */
html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 5rem;
}

.marketing-hero,
.marketing-cta {
  background:
    radial-gradient(circle at 80% 18%, rgba(74, 222, 128, 0.16), transparent 30rem),
    linear-gradient(135deg, #216d39 0%, #14532d 58%, #0f3d24 100%);
}

.marketing-grid {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.hero-copy,
.hero-infographic {
  animation: marketing-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-infographic {
  animation-delay: 0.08s;
  box-shadow: 0 30px 80px -40px rgba(6, 35, 19, 0.7);
}

.feature-bento > article {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feature-bento > article:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.42);
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] .faq-chevron {
  transform: rotate(-90deg);
}

@keyframes marketing-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}