body[data-page="home"] main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

body[data-page="home"] .hm-sec,
body[data-page="home"] .sec.alt {
  position: relative;
  background: transparent;
  border: 0;
}

body[data-page="home"] .sec {
  padding: 96px 0;
}

body[data-page="home"] .hm-sec::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  bottom: -72px;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
}

body[data-page="home"] main > .hm-sec:nth-of-type(2)::before {
  background: radial-gradient(38% 60% at 75% 50%, rgba(63, 224, 255, 0.16), transparent 70%);
}

body[data-page="home"] main > .hm-sec:nth-of-type(3)::before {
  background:
    radial-gradient(40% 70% at 22% 50%, rgba(124, 92, 255, 0.2), transparent 72%),
    linear-gradient(90deg, rgba(46, 34, 104, 0.55), rgba(20, 16, 44, 0.35) 60%, rgba(12, 10, 20, 0));
}

body[data-page="home"] main > .hm-sec:nth-of-type(4)::before {
  background:
    radial-gradient(rgba(255, 63, 208, 0.2) 1px, transparent 1.6px) 0 0 / 10px 10px,
    radial-gradient(60% 55% at 50% 55%, rgba(255, 63, 208, 0.12), transparent 75%),
    rgba(34, 12, 38, 0.45);
}

body[data-page="home"] main > .hm-sec:nth-of-type(5)::before {
  background:
    radial-gradient(34% 50% at 50% 60%, rgba(245, 200, 74, 0.13), transparent 72%),
    linear-gradient(180deg, rgba(48, 36, 14, 0.42), rgba(30, 22, 10, 0.3));
}

body[data-page="home"] main > .hm-sec:nth-of-type(6)::before {
  background: var(--bg);
}

body[data-page="home"] main > .hm-sec:nth-of-type(7)::before {
  background:
    radial-gradient(42% 60% at 50% 50%, rgba(63, 224, 255, 0.18), transparent 72%),
    linear-gradient(rgba(63, 224, 255, 0.09) 2px, transparent 2px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(63, 224, 255, 0.09) 2px, transparent 2px) 0 0 / 48px 48px,
    var(--bg);
}

body[data-page="home"] .hm-cta {
  background: rgba(12, 10, 20, 0.85);
}

@media (max-width: 820px) {
  body[data-page="home"] .sec {
    padding: 64px 0;
  }

  body[data-page="home"] .hm-sec::before {
    top: -48px;
    bottom: -48px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  }

  body[data-page="home"] main > .hm-sec:nth-of-type(2)::before {
    background: radial-gradient(90% 40% at 60% 72%, rgba(63, 224, 255, 0.15), transparent 70%);
  }

  body[data-page="home"] main > .hm-sec:nth-of-type(3)::before {
    background:
      radial-gradient(90% 40% at 30% 70%, rgba(124, 92, 255, 0.2), transparent 72%),
      linear-gradient(180deg, rgba(46, 34, 104, 0.5), rgba(20, 16, 44, 0.35));
  }
}