/* v52-visible-tap-card-bg
   Single purpose: keep the tapping-card artwork visible as the hero background.
   The image lives at /assets/utap-hero-card-tap-bg.png and is painted by CSS,
   while the existing <img> remains only as a silent preload fallback. */

html body .main-hero-wrap .hero-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(20, 199, 191, .24), transparent 34vw),
    radial-gradient(circle at 4% 0%, rgba(101, 73, 236, .13), transparent 30vw),
    linear-gradient(90deg, #ffffff 0%, #ffffff 38%, rgba(232, 250, 250, .96) 100%) !important;
}

html body .main-hero-wrap .hero-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.998) 0%, rgba(255,255,255,.99) 25%, rgba(255,255,255,.82) 39%, rgba(255,255,255,.34) 53%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 62%, rgba(255,255,255,.96) 100%) !important;
}

html body .main-hero-wrap .hero-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2 !important;
  height: 28% !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96)) !important;
}

html body .main-hero-wrap .hero-visual-card {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background-image: url('/assets/utap-hero-card-tap-bg.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto min(100%, 900px) !important;
  background-position: right center !important;
  background-color: transparent !important;
}

html body .main-hero-wrap .hero-visual-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background-image: url('/assets/utap-hero-card-tap-bg.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto min(100%, 900px) !important;
  background-position: right center !important;
  opacity: 1 !important;
}

html body .main-hero-wrap .hero-visual-card::after {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-visual-card__img {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .hero-copy {
  position: relative !important;
  z-index: 4 !important;
}

html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap .hero-apps-section,
html body .main-hero-wrap .landing-steps-strip {
  position: relative !important;
  z-index: 5 !important;
}

@media (max-width: 1180px) {
  html body .main-hero-wrap .hero-stage {
    min-height: clamp(780px, 112vw, 1040px) !important;
  }

  html body .main-hero-wrap .hero-visual-card,
  html body .main-hero-wrap .hero-visual-card::before {
    background-size: auto clamp(520px, 78vw, 760px) !important;
    background-position: right bottom !important;
  }

  html body .main-hero-wrap .hero-stage::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.965) 42%, rgba(255,255,255,.56) 63%, rgba(255,255,255,.20) 82%, rgba(255,255,255,.94) 100%),
      linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 48%, rgba(255,255,255,0) 100%) !important;
  }
}

@media (max-width: 720px) {
  html body .main-hero-wrap .hero-stage {
    min-height: clamp(860px, 178vw, 1120px) !important;
  }

  html body .main-hero-wrap .hero-visual-card,
  html body .main-hero-wrap .hero-visual-card::before {
    background-size: auto clamp(430px, 115vw, 590px) !important;
    background-position: right bottom !important;
  }
}