/*
 * MVRPAY visual clarity corrections.
 * Keeps the original layout and motion while improving text contrast and
 * covering the obsolete radial mark embedded in the Step 4 artwork.
 */

.section1-container .video-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(2, 10, 20, 0.2) 0%,
      rgba(2, 10, 20, 0.42) 48%,
      rgba(2, 10, 20, 0.12) 78%
    ),
    linear-gradient(
      180deg,
      rgba(2, 10, 20, 0.2) 0%,
      rgba(2, 10, 20, 0.05) 38%,
      rgba(2, 10, 20, 0.5) 100%
    );
}

.section1-container .hero-text {
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.78));
}

.section1-container .motion-span,
.section1-container .hero-text-sub {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.section1-container .platform-features-bar {
  border-top: 1px solid rgba(213, 225, 235, 0.12);
  border-bottom: 1px solid rgba(213, 225, 235, 0.12);
  background:
    linear-gradient(
      90deg,
      rgba(2, 10, 20, 0.2),
      rgba(6, 17, 31, 0.78) 18%,
      rgba(6, 17, 31, 0.82) 82%,
      rgba(2, 10, 20, 0.2)
    ) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section1-container .feature-item {
  color: #d5e1eb !important;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.section1-container .feature-separator {
  color: rgba(168, 184, 200, 0.58) !important;
}

.section5-image-wrap:has(.section5-image.step4-image) {
  position: relative;
  isolation: isolate;
}

.section5-image-wrap:has(.section5-image.step4-image)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(3.5rem, 5vw, 4.75rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #baff63 url("/assets/mvrpay-mark.svg") center / cover no-repeat;
  box-shadow:
    0 0 0 0.35rem rgba(67, 31, 128, 0.92),
    0 0 1.5rem rgba(39, 215, 209, 0.2);
  pointer-events: none;
}

@media (max-width: 768px) {
  .section1-container .platform-features-bar {
    background: rgba(6, 17, 31, 0.88) !important;
  }

  .section5-image-wrap:has(.section5-image.step4-image)::after {
    width: clamp(2.9rem, 12vw, 3.8rem);
  }
}