.home-page .hero-product-gallery {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  color: #f7fbff;
  background-color: #06131f;
  background-image: url("./media/首屏图.png");
  background-position: 64% center;
  background-size: cover;
}

.home-page .hero-product-gallery::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, #06131ff5 0%, #06131fe8 32%, #06131f9e 61%, #06131f2e 100%),
    linear-gradient(0deg, #06131f9e 0%, transparent 48%, #06131f7a 100%);
}

.home-page .hero-product-gallery .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100svh;
  padding: 132px 0 90px;
  align-items: center;
}

.home-page .hero-copy {
  max-width: min(780px, 72vw);
}

.home-page .hero-copy h1,
.home-page .stage-copy h2 {
  margin: 0;
  color: inherit;
  font-family: Georgia, "Songti SC", serif;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 3px 20px #031525b3;
}

.home-page .hero-copy h1 {
  max-width: 780px;
  font-size: 88px;
  line-height: 1.08;
}

.home-page .hero-copy h1 em {
  color: #91d8ff;
  font-style: normal;
}

.home-page .hero-copy p {
  max-width: 700px;
  margin: 30px 0 0;
  color: #e0edf3;
  font-size: 18px;
  line-height: 1.85;
}

.home-page .hero-product-gallery .hero-actions {
  margin-top: 32px;
}

.home-page .hero-product-gallery .button.primary {
  color: #06131f;
  background: #f8fbfd;
}

.home-page .hero-product-gallery .button.outline {
  color: #bde7ff;
  border-color: #8ad7ff;
}

.home-page .scroll-cue {
  z-index: 1;
}

@media (max-width: 1024px) {
  .home-page .hero-copy h1 {
    font-size: 72px;
  }
}

@media (max-width: 900px) {
  .home-page .hero-product-gallery .hero-content {
    min-height: auto;
    padding: 132px 0 110px;
  }

  .home-page .hero-copy {
    max-width: 720px;
  }

  .home-page .hero-copy h1 {
    font-size: 64px;
  }
}

@media (max-width: 600px) {
  .home-page .hero-product-gallery {
    background-position: 72% center;
  }

  .home-page .hero-product-gallery .hero-content {
    min-height: 100svh;
    padding: 116px 18px 86px;
  }

  .home-page .hero-copy h1 {
    font-size: 34px;
    line-height: 1.15;
  }

  .home-page .hero-copy p {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.8;
  }

  .home-page .hero-product-gallery .hero-actions {
    margin-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-product-gallery {
    background-position: 64% center;
  }
}