/*
 * 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;
  min-height: clamp(44rem, 125svh, 70rem) !important;
  padding: 0 0 clamp(3rem, 6vw, 5rem) !important;
  z-index: 1 !important;
  background: #06111f;
}

.image-text-sticky {
  top: clamp(8rem, 28svh, 16rem) !important;
}

/*
 * 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;
  }
}

/*
 * Footer CTA media was positioned 333px above a narrow 900px canvas, which
 * created a cropped image and an overlapping glass card. Treat it as one
 * full-bleed section and keep the CTA content within a readable safe area.
 */
.ftr-root {
  padding-top: 0 !important;
}

.ftr-cta-wrap {
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(42rem, 78svh, 56rem);
  margin: 0 !important;
  padding: 0 clamp(1.25rem, 5vw, 6rem) !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

.ftr-cta-char {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  z-index: 0 !important;
}

.ftr-cta-video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.ftr-cta-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 17, 31, 0.06), rgba(6, 17, 31, 0.5)),
    radial-gradient(circle at 50% 54%, transparent 18%, rgba(0, 8, 18, 0.42) 78%);
}

.ftr-cta-glass {
  width: min(100%, 58rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem) !important;
  border: 1px solid rgba(45, 212, 191, 0.16);
  border-radius: 1.25rem !important;
  background: rgba(2, 10, 20, 0.7) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .image-text-wrapper {
    min-height: 105svh !important;
    padding-bottom: 2.5rem !important;
  }

  .image-text-sticky {
    top: 24svh !important;
  }

  .ftr-cta-wrap {
    min-height: 42rem;
    padding-inline: 1rem !important;
  }

  .ftr-cta-video {
    object-position: center top !important;
  }
}

.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;
  }
}