/* =============================================================================
   AdStar landing — footer.css
   ========================================================================== */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 460px;
  background: var(--black);     /* black top blends seamlessly into the CTA above */
}
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  /* Fade the image's dark top into the black footer bg so the top edge blends
     into the (black) CTA above — the glow only reads in the lower half. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 12%, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 12%, #000 55%);
}
.footer__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.footer__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 60px);
  flex-wrap: wrap;
}
.footer__menu a {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--gray-25);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__menu a:hover { color: var(--brand-600); }

.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--gray-600);
  text-align: center;
}
.footer__legal-row { display: flex; align-items: center; gap: 12px; }
.footer__legal-row a { text-decoration: underline; color: var(--gray-600); }
.footer__legal-row a:hover { color: var(--gray-300); }
.footer__legal-row span { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.footer__copy { font-size: var(--fs-xs); line-height: var(--lh-xs); }

.footer__mark { width: 21px; height: 24px; }

@media (max-width: 767px) {
  .footer { padding: 48px 20px 32px; min-height: 320px; }
  .footer__menu { gap: 20px 28px; }
}