/*
 * Unifies legacy page canvases with the MVRPAY navy brand system.
 * Original section spacing is intentionally preserved.
 */

:root {
  --bg-black: #06111f;
  --black-bg: #06111f;
  --deep-black: #06111f;
  --bg-dark: #06111f;
  --bg-dark-canvas: #06111f;
  --bg-surface: #0a192b;
}

html,
body,
#root,
.Home_Container,
.mvrpay-page-container,
.careers-page-wrapper,
.pricing-main-container,
.policy-page-wrapper {
  background-color: #06111f !important;
}

:where(
  .ab-container,
  .api-ecosystem,
  .api_hero_wrapper,
  .automation-container,
  .banking-container,
  .bpg-container,
  .career-details,
  .comp-section-container,
  .comparison-container,
  .compliance-container,
  .cs-section,
  .dashboard-container,
  .dev-container,
  .ecosystem-container,
  .enterprise-section,
  .fpipe-hub-wrapper,
  .gh-hero-wrapper,
  .hero-wrapper,
  .home-section3,
  .hw_wrapper,
  .ind_wrapper,
  .industry-section-one,
  .industry-top,
  .invoicing-container,
  .launchnew_section7,
  .mvrpay-container,
  .page-wrapper,
  .pay_section_wrapper,
  .payouts_wrapper,
  .provenideas-wrapper,
  .reconciliation-container,
  .rt-section-container,
  .security-section-two,
  .sp-container,
  .templates-section-container,
  .wc_wrapper,
  .wrapper
) {
  background-color: #06111f !important;
}

footer,
.footer,
.footer-wrapper,
.footer-container {
  background-color: #06111f !important;
}

/*
 * The homepage hero contains black video artwork. Extend that black canvas
 * across the viewport so its bounded media never reads as accidental spacing.
 */
.section1-container {
  margin-top: 6.5rem !important;
  background: #000 !important;
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(0 -100vmax);
}

.section1-container .video-wrapper {
  background: #000 !important;
}

@media (max-width: 992px) {
  .section1-container {
    margin-top: 5.75rem !important;
  }
}

@media (max-width: 768px) {
  .section1-container {
    margin-top: 5rem !important;
  }
}

/*
 * Legacy scroll scenes used multiple viewport heights and 16rem gaps. Those
 * values create empty screens once the pages are served without the original
 * branded motion sequence. Keep deliberate breathing room without forcing
 * visitors through blank viewport-sized intervals.
 */
.section1-container {
  margin-top: 6.5rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  width: 100% !important;
}

.hero-section {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section1-container .video-wrapper {
  width: 100% !important;
  height: calc(100svh - 6.5rem);
  min-height: 42rem;
  aspect-ratio: auto !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.section1-container .Hero-video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin-top: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.section1-container .hero-text {
  top: 52% !important;
  z-index: 3 !important;
}

.section1-container .black-container {
  display: none !important;
}

/*
 * Keep the subsequent scroll-reveal section in normal document flow. Its
 * legacy negative margin pulled the copy over the hero artwork.
 */
.image-text-wrapper {
  margin-top: 0 !important;
  z-index: 1 !important;
  background: #06111f;
}

/*
 * The artwork remains still while a restrained cyan highlight travels across
 * it. Motion is isolated from the copy and disabled for reduced-motion users.
 */
.section1-container .Hero-video {
  animation: none !important;
  transform: none !important;
}

.section1-container .video-wrapper::after {
  content: "";
  position: absolute;
  inset: -20% -45%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      112deg,
      transparent 38%,
      rgba(45, 212, 191, 0.05) 45%,
      rgba(34, 211, 238, 0.42) 50%,
      rgba(96, 165, 250, 0.12) 55%,
      transparent 62%
    );
  mix-blend-mode: screen;
  filter: blur(10px);
  transform: translate3d(-38%, 0, 0);
  animation: mvrpay-network-light-flow 7s ease-in-out infinite;
}

@keyframes mvrpay-network-light-flow {
  0% {
    opacity: 0;
    transform: translate3d(-38%, 0, 0);
  }
  18%,
  72% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate3d(38%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section1-container .video-wrapper::after {
    animation: none !important;
    opacity: 0.16;
    transform: none;
  }
}

.hs4-products-list {
  gap: clamp(4rem, 7vw, 7rem) !important;
}

.hs4-product-row,
.hs4-row-reverse,
.hs4-home2-adjust {
  gap: clamp(2.5rem, 5vw, 5rem) !important;
}

.ecosystem-container,
.automation-container {
  min-height: auto !important;
}

.ecosystem-container,
.automation-container,
.comparison-container,
.pay_section_wrapper,
.payouts_wrapper,
.reconciliation-container,
.banking-container,
.invoicing-container {
  padding-top: clamp(3.5rem, 6vw, 6rem) !important;
  padding-bottom: clamp(3.5rem, 6vw, 6rem) !important;
}

@media (max-width: 768px) {
  .section1-container {
    padding-bottom: 0 !important;
  }

  .section1-container .video-wrapper,
  .section1-container .Hero-video {
    height: calc(100svh - 5rem) !important;
    min-height: 38rem;
    aspect-ratio: auto !important;
  }

  .section1-container .hero-text {
    top: 54% !important;
  }

  .hs4-products-list {
    gap: 4rem !important;
  }
}