:root {
  --page-bg: rgba(6, 12, 19, 1);
  --page-copy: rgba(255, 255, 255, 1);
  --dock-width: min(calc(100vw - 24px), 351px);
  --dock-height: calc(var(--dock-width) * 84 / 351);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 78% 14%, rgba(58, 110, 255, 0.34), transparent 21%),
    radial-gradient(circle at 12% 80%, rgba(0, 174, 255, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(3, 8, 15, 1) 0%, rgba(6, 12, 19, 1) 45%, rgba(7, 15, 25, 1) 100%);
}

body {
  font-family: "Roboto", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    sans-serif;
  color: var(--page-copy);
}

.page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom) + 32px);
}

.hero {
  position: relative;
  width: min(100%, 375px);
  min-height: 812px;
  margin: 0 auto;
  padding-top: max(0px, env(safe-area-inset-top));
}

.hero__title {
  position: absolute;
  z-index: 3;
  left: 65.4px;
  top: calc(max(0px, env(safe-area-inset-top)) + 53.2px);
  width: 244.2px;
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.hero__title-break {
  display: block;
}

.hero__visual {
  position: absolute;
  z-index: 2;
  left: 3px;
  top: calc(max(0px, env(safe-area-inset-top)) + 148.6px);
  width: 362px;
  display: flex;
  justify-content: center;
}

.hero__phone {
  display: block;
  width: 362px;
  height: auto;
  filter:
    drop-shadow(0 22px 42px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 12px rgba(64, 132, 255, 0.1));
}

.hero__glow,
.hero__orbit {
  position: absolute;
  pointer-events: none;
}

.hero__glow {
  z-index: 0;
  border-radius: 999px;
  filter: blur(18px);
}

.hero__glow--top {
  top: 92px;
  right: -8px;
  width: 186px;
  height: 186px;
  background:
    radial-gradient(circle, rgba(64, 132, 255, 0.78) 0%, rgba(64, 132, 255, 0.18) 54%, transparent 78%);
}

.hero__glow--bottom {
  left: -84px;
  bottom: 116px;
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle, rgba(0, 174, 255, 0.22) 0%, rgba(0, 113, 235, 0.12) 44%, transparent 76%);
}

.hero__orbit {
  z-index: 1;
  border-radius: 999px;
  border: 1px solid rgba(113, 54, 255, 0.55);
  opacity: 0.75;
}

.hero__orbit--one {
  top: 187px;
  right: -14px;
  width: 180px;
  height: 58px;
  transform: rotate(-6deg);
}

.hero__orbit--two {
  left: -36px;
  bottom: 132px;
  width: 178px;
  height: 74px;
  border-color: rgba(0, 175, 255, 0.5);
  transform: rotate(-37deg);
}

.download-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding:
    0 12px
    calc(env(safe-area-inset-bottom) + 12px);
  pointer-events: none;
}

.download-button {
  display: block;
  position: relative;
  width: var(--dock-width);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.download-button::before {
  content: "";
  position: absolute;
  left: 3.4188034188%;
  top: 7.1428571429%;
  width: 68.3760683761%;
  height: 85.7142857143%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(40, 134, 255, 1) 0%,
    rgba(21, 184, 210, 1) 62%,
    rgba(14, 203, 154, 1) 100%
  );
  z-index: 1;
}

.download-button__image {
  display: block;
  width: 100%;
  height: auto;
}

.download-button__text-wrap {
  position: absolute;
  left: 10.6552706553%;
  top: 16.4285714286%;
  width: 60.9686609687%;
  height: 64.2857142857%;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  pointer-events: none;
}

.download-button__text {
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform-origin: center center;
}

.download-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 4px;
}

@media (min-width: 431px) {
  .hero {
    min-height: 812px;
  }
}