#webgl {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 45%, rgba(255, 190, 90, 0.08), transparent 34%),
    radial-gradient(circle at 30% 30%, rgba(120, 90, 255, 0.08), transparent 36%),
    linear-gradient(180deg, #050607 0%, #020202 100%);
}

.page {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  pointer-events: none;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 6vw;
  display: flex;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 5;
  width: min(760px, 58vw);
  pointer-events: auto;
}

.hero-side-text {
  position: fixed;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: none;
}

.hero-side-text span {
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.42);
}

.scroll-ui {
  position: fixed;
  left: 6vw;
  bottom: 42px;
  z-index: 5;
  pointer-events: none;
}

.scroll-ui span {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
  .hero {
    padding: 34px 24px;
    align-items: flex-start;
    padding-top: 82px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-side-text {
    display: none;
  }

  .scroll-ui {
    left: 24px;
    bottom: 28px;
  }
}