body {
  overflow-x: clip;
}

.product-section,
.features-section,
.final-cta {
  position: relative;
  isolation: isolate;
}

.product-section::before,
.features-section::before,
.final-cta::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-image:
    linear-gradient(115deg, rgba(9, 5, 18, 0.88), rgba(29, 10, 43, 0.82)),
    url('/czatbox-doodle-v2.png');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.product-section::before {
  inset-block-start: -150px;
  background-position: center 18%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 26px, #000 150px);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 26px, #000 150px);
}

.product-section::after {
  content: '';
  position: absolute;
  top: -92px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 184px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(20, 8, 34, 0.34) 54%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 68%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 68%, transparent);
  pointer-events: none;
}

.features-section::before {
  background-position: center 70%;
}

.final-cta {
  border: 0;
  border-radius: 0;
  background: none;
}

.final-cta::before {
  background-position: center 42%;
}

footer {
  background-image:
    linear-gradient(rgba(7, 4, 14, 0.92), rgba(7, 4, 14, 0.97)),
    url('/czatbox-doodle-v2.png');
  background-position: center 82%;
  background-size: cover;
}