:root {
  color-scheme: dark;
  --page-bg: #0e0f14;
  --panel-bg: #07101f;
  --line-soft: rgba(255, 255, 255, 0.22);
  --copy: rgba(255, 255, 255, 0.72);
  --copy-strong: #ffffff;
  --cyan: #20f5ff;
  --violet: #7036d4;
  --mint: #73ff9e;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--page-bg);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 22% 68%, rgba(57, 3, 127, 0.28), transparent 28rem),
    radial-gradient(circle at 18% 94%, rgba(0, 45, 83, 0.26), transparent 26rem),
    var(--page-bg);
  color: var(--copy-strong);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
}

.top-art {
  position: absolute;
  inset: 0 0 auto;
  z-index: -3;
  height: 1765px;
  background-image: url("./images/hero-background.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
}

.ambient {
  position: absolute;
  z-index: -2;
  max-width: none;
  opacity: 0.68;
  object-fit: fill;
  pointer-events: none;
  transform-origin: 50% 50%;
  user-select: none;
}

.ambient-one {
  top: 2439px;
  left: calc(50% - 597px);
  width: 1067px;
  height: 742px;
  opacity: 1;
  animation: ambientOneSpin 36s linear infinite;
}

.ambient-two {
  top: 3664px;
  left: calc(50% - 962px);
  width: 1397px;
  height: 970px;
  opacity: 1;
  animation: ambientTwoSpin 52s linear infinite reverse;
}

@keyframes ambientOneSpin {
  from {
    transform: rotate(-164deg) scaleY(-1);
  }

  to {
    transform: rotate(196deg) scaleY(-1);
  }
}

@keyframes ambientTwoSpin {
  from {
    transform: rotate(-16deg);
  }

  to {
    transform: rotate(344deg);
  }
}

.content-wrap {
  width: min(1392px, calc(100vw - 64px));
  margin: 0 auto;
}

.brand-word {
  position: absolute;
  top: 54px;
  left: max(40px, calc((100vw - 1392px) / 2));
  z-index: 3;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
}

.hero {
  min-height: 820px;
  padding-top: 263px;
  text-align: center;
}

.hero-title {
  width: min(788px, 82vw);
  margin: 0 auto;
}

.hero-copy {
  width: min(560px, calc(100vw - 48px));
  margin: 91px auto 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 51px;
  margin-top: 64px;
}

.hero-button {
  display: inline-flex;
  width: 205px;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.hero-button:hover,
.hero-button:focus-visible {
  transform: translateY(-2px);
}

.hero-button-primary {
  background: linear-gradient(118deg, #20f5ff 8%, #3a87eb 105%);
  box-shadow: 0 14px 30px rgba(32, 245, 255, 0.2);
}

.hero-button-primary:hover,
.hero-button-primary:focus-visible {
  box-shadow: 0 18px 44px rgba(32, 245, 255, 0.32);
}

.hero-button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(3.4px);
}

.hero-button-secondary:hover,
.hero-button-secondary:focus-visible {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.16);
}

.win-icon {
  width: 24px;
  height: 24px;
}

.down-cue {
  display: block;
  width: 65px;
  height: 82px;
  margin: 38px auto 0;
  animation: cueFloat 1.8s ease-in-out infinite;
}

.down-cue img {
  width: 100%;
  height: 100%;
}

@keyframes cueFloat {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(-4px);
  }

  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

.section-kicker {
  display: grid;
  place-items: center;
  gap: 13px;
  text-align: center;
}

.section-kicker h2,
.section-kicker p {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.section-kicker.is-changing h2,
.section-kicker.is-changing p {
  opacity: 0.68;
  transform: translateY(4px);
}

.section-kicker h2,
.feature-title {
  margin: 0;
  color: #fff;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

.section-kicker h2 {
  font-size: 32px;
}

.section-kicker p,
.feature-copy {
  margin: 0;
  color: var(--copy);
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 1.3px;
}

.section-kicker p {
  width: min(427px, 88vw);
  font-size: 15px;
  letter-spacing: 0.75px;
}

.lobby {
  min-height: 916px;
  padding-top: 56px;
}

.lobby-stage {
  position: relative;
  width: min(1240px, 94vw);
  height: clamp(420px, 34.375vw, 660px);
  margin: 69px auto 0;
  perspective: 1600px;
}

.lobby-stage::before {
  position: absolute;
  inset: 12% 6% 16%;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 48%, rgba(32, 245, 255, 0.16), transparent 42%),
    radial-gradient(circle at 50% 56%, rgba(112, 54, 212, 0.22), transparent 58%);
  filter: blur(8px);
  content: "";
}

.carousel-track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, -360px) rotateY(0deg) scale(0.62);
  transform-style: preserve-3d;
  transition:
    opacity 760ms ease,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 760ms ease;
  will-change: transform, opacity;
}

.carousel-slide img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42));
}

.carousel-slide.is-active {
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 155px) rotateY(0deg) scale(1);
}

.carousel-slide.is-prev {
  z-index: 3;
  opacity: 0.54;
  transform: translate3d(-31%, 3%, -160px) rotateY(30deg) scale(0.74);
  filter: saturate(0.8) brightness(0.66);
}

.carousel-slide.is-next {
  z-index: 3;
  opacity: 0.54;
  transform: translate3d(31%, 3%, -160px) rotateY(-30deg) scale(0.74);
  filter: saturate(0.8) brightness(0.66);
}

.carousel-slide.is-hidden {
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 5%, -420px) rotateY(0deg) scale(0.58);
}

.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -25px;
  position: relative;
  z-index: 4;
}

.pagination-dots button {
  display: block;
  width: 16px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition:
    width 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}

.pagination-dots button:hover,
.pagination-dots button:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.82);
}

.pagination-dots button.is-active {
  width: 42px;
  background: #fff;
}

.feature {
  position: relative;
  min-height: 700px;
}

.voice-section {
  min-height: 810px;
}

.share-section {
  min-height: 644px;
}

.energy-section {
  min-height: 746px;
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 88px;
  min-height: inherit;
}

.feature-grid.reverse {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}

.feature-copy {
  width: min(427px, 100%);
  margin-top: 13px;
}

.feature-copy.compact {
  max-width: 430px;
}

.feature-media {
  position: relative;
}

.feature-media img {
  width: 100%;
  height: auto;
}

.media-voice {
  width: min(760px, 100%);
  margin-left: auto;
  margin-top: -70px;
}

.media-share {
  width: min(712px, 100%);
  margin-top: 42px;
}

.media-energy {
  width: min(804px, 100%);
  margin-top: 111px;
}

.media-accelerator {
  width: min(760px, 100%);
}

.share-section .feature-text {
  margin-top: -56px;
}

.energy-section .feature-text {
  margin-top: -34px;
}

.accelerator-section .feature-text {
  margin-top: 206px;
}

.micro-list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 47px;
  margin-top: 30px;
  color: #fff;
}

.micro-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  line-height: 1.58;
  letter-spacing: 1px;
  white-space: nowrap;
}

.noise-bars {
  display: inline-grid;
  grid-template-columns: repeat(5, 4px);
  align-items: center;
  gap: 2px;
  height: 26px;
  width: 26px;
}

.noise-bars i {
  display: block;
  border-radius: 14px;
  background: var(--violet);
  box-shadow: 0 0 6px rgba(112, 54, 212, 0.66);
}

.noise-bars i:nth-child(1),
.noise-bars i:nth-child(5) {
  height: 6px;
}

.noise-bars i:nth-child(2),
.noise-bars i:nth-child(4) {
  height: 12px;
}

.noise-bars i:nth-child(3) {
  height: 26px;
}

.ring-icon,
.bolt-icon,
.check-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #8c5dff;
}

.ring-icon::before {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(112, 54, 212, 0.18);
  content: "";
}

.bolt-icon::before {
  width: 13px;
  height: 22px;
  background: linear-gradient(180deg, #7cff68, #66f8ec);
  clip-path: polygon(46% 0, 95% 0, 63% 42%, 100% 42%, 29% 100%, 43% 56%, 0 56%);
  content: "";
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}

.pill {
  display: inline-flex;
  width: 150px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 60px;
  background: var(--panel-bg);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
}

.title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.title-with-icon img {
  width: 60px;
  height: 60px;
}

.title-with-icon .accelerator-icon {
  width: 54px;
  height: 54px;
}

.check-list {
  display: grid;
  gap: 13px;
  margin-top: 34px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 20px;
  line-height: 1.58;
  letter-spacing: 1px;
}

.check-icon {
  width: 24px;
  height: 24px;
}

.check-icon::before {
  width: 17px;
  height: 17px;
  border: 2px solid #7a49f2;
  border-radius: 999px;
  content: "";
}

.footer {
  padding: 164px 0 68px;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  margin: 0 auto 32px;
}

.footer-logo-mark {
  width: 59px;
  height: 40px;
  object-fit: contain;
}

.footer-logo-text {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 4.2px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 31px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.75px;
}

.footer-desc {
  width: min(949px, calc(100vw - 48px));
  margin: 35px auto 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 2.48;
  letter-spacing: 0.7px;
}

.footer-meta {
  display: flex;
  justify-content: center;
  gap: min(198px, 10vw);
  margin-top: 66px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 2.48;
  letter-spacing: 0.7px;
}

.reveal {
  opacity: 0;
  transform: translateY(38px);
}

.float-soft {
  will-change: transform;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (max-width: 1280px) {
  .content-wrap {
    width: min(1120px, calc(100vw - 48px));
  }

  .feature-grid,
  .feature-grid.reverse {
    gap: 56px;
  }

  .hero {
    min-height: 760px;
    padding-top: 220px;
  }

  .lobby {
    min-height: 900px;
  }
}

@media (max-width: 1500px) and (min-width: 901px) {
  .top-art {
    background-position: top center;
  }
}

@media (max-width: 900px) {
  .top-art {
    height: 980px;
    background-size: 100% auto;
    background-position: top center;
  }

  .ambient-one,
  .ambient-two {
    display: none;
  }

  .brand-word {
    top: 26px;
    left: 24px;
    opacity: 1;
  }

  .hero {
    min-height: 640px;
    padding-top: 172px;
  }

  .hero-copy {
    margin-top: 28px;
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
  }

  .down-cue {
    margin-top: 46px;
  }

  .lobby {
    min-height: auto;
    padding: 40px 0 76px;
  }

  .lobby-stage {
    margin-top: 42px;
  }

  .feature {
    min-height: auto;
    padding: 72px 0;
  }

  .voice-section,
  .share-section,
  .energy-section,
  .accelerator-section {
    min-height: auto;
  }

  .feature-grid,
  .feature-grid.reverse {
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  .feature-grid.reverse .feature-text {
    order: 1;
  }

  .feature-grid.reverse .feature-media {
    order: 2;
  }

  .feature-title,
  .section-kicker h2 {
    font-size: 32px;
  }

  .feature-copy {
    width: 100%;
    font-size: 18px;
    letter-spacing: 0.6px;
  }

  .micro-list {
    gap: 14px 22px;
  }

  .micro-item,
  .pill,
  .check-item {
    font-size: 16px;
    letter-spacing: 0.4px;
  }

  .pill {
    width: auto;
    min-width: 118px;
    height: 46px;
    padding: 0 18px;
  }

  .title-with-icon img,
  .title-with-icon .accelerator-icon {
    width: 44px;
    height: 44px;
  }

  .footer {
    padding-top: 58px;
  }

  .footer-nav,
  .footer-meta {
    flex-wrap: wrap;
    gap: 18px 28px;
  }
}

@media (max-width: 560px) {
  .content-wrap {
    width: calc(100vw - 32px);
  }

  .top-art {
    background-size: 1080px auto;
  }

  .hero {
    min-height: 602px;
    padding-top: 152px;
  }

  .hero-title {
    width: min(430px, 94vw);
  }

  .hero-copy {
    width: min(344px, calc(100vw - 32px));
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-button {
    width: min(225px, 82vw);
    height: 52px;
    font-size: 16px;
  }

  .section-kicker p {
    line-height: 1.8;
  }

  .lobby-stage {
    width: min(600px, 100vw);
    height: clamp(300px, 78vw, 440px);
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .media-voice {
    width: 118vw;
    margin-left: 50%;
    margin-top: 0;
    transform: translateX(-50%);
  }

  .media-share {
    margin-top: 0;
  }

  .media-energy {
    width: 112vw;
    margin-left: 50%;
    margin-top: 0;
    transform: translateX(-50%);
  }

  .media-accelerator {
    width: 110vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .share-section .feature-text,
  .energy-section .feature-text,
  .accelerator-section .feature-text {
    margin-top: 0;
  }

  .footer-desc {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}