:root {
  color-scheme: light dark;
  --bg: #0e1014;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.6);
  --accent: #6a79ff;
  --space-36: clamp(30px, calc(100vh * 0.0443), 42px);
  --space-48: clamp(41px, calc(100vh * 0.0591), 56px);
  --space-11: clamp(9px, calc(100vh * 0.0136), 13px);
}

@property --bg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

@property --bg-mid {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 16%;
}

@property --bg-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 26%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
  overflow-x: hidden;
}

.bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    var(--bg-angle),
    #343b86 0%,
    #1a1e3a var(--bg-mid),
    var(--bg) var(--bg-end)
  );
  animation: bg-wave 8s ease-in-out infinite;
  z-index: 0;
  overflow: hidden;
}

.bg::before,
.bg::after {
  content: "";
  position: absolute;
  width: 90vw;
  height: 90vw;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(106, 121, 255, 0.35) 0%,
    rgba(106, 121, 255, 0) 70%
  );
  filter: blur(32px);
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
  animation: aurora-float 14s ease-in-out infinite;
}

.bg::after {
  width: 70vw;
  height: 70vw;
  right: -20vw;
  top: -10vh;
  background: radial-gradient(
    circle,
    rgba(49, 27, 121, 0.4) 0%,
    rgba(49, 27, 121, 0) 68%
  );
  animation-delay: -7s;
}

.bg::before {
  left: -10vw;
  top: -6vh;
}

@keyframes aurora-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6vw, 2vh, 0) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bg-wave {
  0% {
    --bg-angle: 170deg;
    --bg-mid: 14%;
    --bg-end: 24%;
  }
  50% {
    --bg-angle: 188deg;
    --bg-mid: 20%;
    --bg-end: 32%;
  }
  100% {
    --bg-angle: 170deg;
    --bg-mid: 14%;
    --bg-end: 24%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg {
    animation: none;
  }
  .bg::before,
  .bg::after {
    animation: none;
  }
  .hero__layer-left,
  .hero__layer-right,
  .hero__card {
    animation: none;
  }
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(20px + env(safe-area-inset-top)) 20px
    calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  position: relative;
  z-index: 1;
}

.content {
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 10px;
  padding-bottom: 8px;
}

@media (min-height: 820px) {
  .page {
    justify-content: center;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-36);
}

.brand__logo {
  width: min(180px, 60vw);
  height: auto;
  display: block;
}

.slogan {
  width: min(80vw);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: var(--space-48);
}

.brand__slogan{
  width: 100%;
  height: auto;
  display: block;
}
.hero {
  width: min(90vw, 420px, calc(42vh * 1050 / 990));
  aspect-ratio: 1050 / 990;
  position: relative;
  margin-bottom: var(--space-36);
  container-type: inline-size;
  --phone-ratio: 1170 / 2532;
  --center-width-ratio: 0.38;
  --side-width-ratio: 0.3306;
  --center-width: calc(var(--center-width-ratio) * 100%);
  --side-width: calc(var(--side-width-ratio) * 100%);
  --center-top: 52%;
  --side-top: 56%;
  --left-x: 30%;
  --right-x: 70%;
  --side-rotate: 16deg;
  --frame-pad: clamp(6px, 1.6vw, 10px);
  --frame-pad-center: clamp(7px, 1.9vw, 12px);
  --frame-radius: clamp(14px, 3.6vw, 20px);
  --frame-radius-center: clamp(16px, 4vw, 22px);
  --side-reveal-duration: 0.85s;
  --card-pop-duration: 0.75s;
  --card-pop-delay: 0s;
  --card-pop-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --card-pop-scale-start: 0.7;
  --card-pop-scale-peak: 1.04;
  --card-pop-z-start: -80px;
  --card-pop-z-peak: 26px;
  --card-pop-total: 1.1s;
  --card-cycle-duration: 1.4s;
  --card-cycle-delay: 0.04s;
  --card-cycle-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
}

.hero__layer {
  position: absolute;
  top: var(--layer-top);
  left: var(--layer-left);
  width: var(--layer-width);
  aspect-ratio: var(--phone-ratio);
  transform: translate(-50%, -50%) rotate(var(--layer-rotate));
  transform-origin: 50% 60%;
  border: 1px solid #FFF;
  background: rgba(106, 121, 255, 0.20);
  padding: var(--frame-pad);
  border-radius: var(--frame-radius);
  box-sizing: content-box;
  will-change: transform, left;
}

.hero__layer-center {
  --layer-width: var(--center-width);
  --layer-top: var(--center-top);
  --layer-left: 50%;
  --layer-rotate: 0deg;
  padding: var(--frame-pad-center);
  border-radius: var(--frame-radius-center);
  z-index: 3;
  box-shadow: 20.738px 24.886px 25.916px 0 rgba(0, 0, 0, 0.07), 13.442px 16.13px 15.177px 0 rgba(0, 0, 0, 0.05), 7.988px 9.586px 8.255px 0 rgba(0, 0, 0, 0.04), 4.148px 4.977px 4.211px 0 rgba(0, 0, 0, 0.04), 1.69px 2.028px 2.112px 0 rgba(0, 0, 0, 0.03), 0.384px 0.461px 1.02px 0 rgba(0, 0, 0, 0.02);
}

@supports (width: 1cqw) {
  .hero__layer-center {
    --center-width-px: calc(var(--center-width-ratio) * 100cqw);
    --shadow-unit: calc(var(--center-width-px) / 137);
    box-shadow:
      calc(var(--shadow-unit) * 20.738) calc(var(--shadow-unit) * 24.886) calc(var(--shadow-unit) * 25.916) 0 rgba(0, 0, 0, 0.07),
      calc(var(--shadow-unit) * 13.442) calc(var(--shadow-unit) * 16.13) calc(var(--shadow-unit) * 15.177) 0 rgba(0, 0, 0, 0.05),
      calc(var(--shadow-unit) * 7.988) calc(var(--shadow-unit) * 9.586) calc(var(--shadow-unit) * 8.255) 0 rgba(0, 0, 0, 0.04),
      calc(var(--shadow-unit) * 4.148) calc(var(--shadow-unit) * 4.977) calc(var(--shadow-unit) * 4.211) 0 rgba(0, 0, 0, 0.04),
      calc(var(--shadow-unit) * 1.69) calc(var(--shadow-unit) * 2.028) calc(var(--shadow-unit) * 2.112) 0 rgba(0, 0, 0, 0.03),
      calc(var(--shadow-unit) * 0.384) calc(var(--shadow-unit) * 0.461) calc(var(--shadow-unit) * 1.02) 0 rgba(0, 0, 0, 0.02);
  }
}

.hero__layer-left {
  --layer-width: var(--side-width);
  --layer-top: var(--side-top);
  --layer-left: var(--left-x);
  --layer-rotate: calc(var(--side-rotate) * -1);
  z-index: 1;
}

.hero__layer-right {
  --layer-width: var(--side-width);
  --layer-top: var(--side-top);
  --layer-left: var(--right-x);
  --layer-rotate: var(--side-rotate);
  z-index: 2;
}

.hero__layer-left,
.hero__layer-right {
  animation-duration: var(--side-reveal-duration);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}

.hero__layer-left {
  animation-name: hero-side-left;
}

.hero__layer-right {
  animation-name: hero-side-right;
}

.hero__layer_bg {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* overflow: hidden; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.hero__bg--center {
  --screen-left: 4%;
  --screen-right: 4%;
  --screen-left-ratio: 0.04;
  --screen-right-ratio: 0.04;
  --screen-top: 46.8479%;
  --screen-bottom: 7%;
  --screen-width: calc(100% - var(--screen-left) - var(--screen-right));
  --screen-height: calc(100% - var(--screen-top) - var(--screen-bottom));
  --card-1-scale: 1.6;
  --card-2-scale: 1.3;
  --card-3-scale: 1.1;
  --card-1-y: 0;
  --card-2-y: 0.35;
  --card-3-y: 0.69;
  --slot-1-top: calc(var(--screen-top) + var(--screen-height) * var(--card-1-y));
  --slot-2-top: calc(var(--screen-top) + var(--screen-height) * var(--card-2-y));
  --slot-3-top: calc(var(--screen-top) + var(--screen-height) * var(--card-3-y));
  --slot-1-width: calc(var(--screen-width) * var(--card-1-scale));
  --slot-2-width: calc(var(--screen-width) * var(--card-2-scale));
  --slot-3-width: calc(var(--screen-width) * var(--card-3-scale));
  --card-shadow-1: 0 10px 20px 2px rgba(0, 0, 0, 0.50), 0 20px 10px 1px rgba(0, 0, 0, 0.20), 0 30px 5px -3px rgba(0, 0, 0, 0.10);
  --card-shadow-2: 0 9.388px 18.776px 1.878px rgba(0, 0, 0, 0.50), 0 18.776px 9.388px 0.939px rgba(0, 0, 0, 0.20), 0 28.163px 4.694px -2.816px rgba(0, 0, 0, 0.10);
  --card-shadow-3: 0 7.291px 14.582px 1.458px rgba(0, 0, 0, 0.50), 0 14.582px 7.291px 0.729px rgba(0, 0, 0, 0.20), 0 21.872px 3.645px -2.187px rgba(0, 0, 0, 0.10);
  --card-lift: clamp(8px, 1.6vw, 16px);
  --card-lift-strong: clamp(12px, 2.2vw, 22px);
  --card-front-boost: 24px;
  --card-front-boost-half: 12px;
  --card-back-boost: 18px;
  --card-back-floor: 2px;
  --slot-1-z: 28px;
  --slot-2-z: 16px;
  --slot-3-z: 8px;
  perspective: 900px;
  transform-style: preserve-3d;
}

.hero__card {
  position: absolute;
  left: calc(var(--screen-left) + (var(--screen-width) / 2));
  top: var(--card-top);
  width: var(--card-width);
  transform: translate3d(-50%, 0, var(--card-z, 0px)) scale(1);
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: block;
  pointer-events: none;
  box-shadow: var(--card-shadow, none);
  opacity: 1;
  --pop-scale-start: var(--card-pop-scale-start);
  --pop-scale-peak: var(--card-pop-scale-peak);
  --pop-z-start: var(--card-pop-z-start);
  --pop-z-peak: var(--card-pop-z-peak);
  animation-name: hero-card-pop;
  animation-duration: var(--card-pop-duration);
  animation-timing-function: var(--card-pop-ease);
  animation-iteration-count: 1;
  animation-delay: var(--card-pop-delay);
  animation-fill-mode: both;
  will-change: transform;
}

.hero--js .hero__card {
  animation: none !important;
}

.hero__card-img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0) translateZ(0) scale(1);
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.hero__slot--1 {
  --card-top: var(--slot-1-top);
  --card-width: var(--slot-1-width);
  --card-shadow: var(--card-shadow-1);
  --card-z: var(--slot-1-z);
  z-index: 3;
}

.hero__slot--2 {
  --card-top: var(--slot-2-top);
  --card-width: var(--slot-2-width);
  --card-shadow: var(--card-shadow-2);
  --card-z: var(--slot-2-z);
  z-index: 2;
}

.hero__slot--3 {
  --card-top: var(--slot-3-top);
  --card-width: var(--slot-3-width);
  --card-shadow: var(--card-shadow-3);
  --card-z: var(--slot-3-z);
  z-index: 1;
}

.hero__card--1 {
  --card-pop-delay: 0.12s;
  --card-pop-duration: 0.9s;
  --card-pop-scale-start: 0.6;
  --card-pop-scale-peak: 1.08;
  --card-pop-z-start: 70px;
  --card-pop-z-peak: 90px;
}

.hero__card--2 {
  --card-pop-delay: 0.06s;
  --card-pop-duration: 0.8s;
  --card-pop-scale-start: 0.62;
  --card-pop-scale-peak: 1.05;
  --card-pop-z-start: 20px;
  --card-pop-z-peak: 36px;
}

.hero__card--3 {
  --card-pop-delay: 0s;
  --card-pop-duration: 0.7s;
  --card-pop-scale-start: 0.64;
  --card-pop-scale-peak: 1.03;
  --card-pop-z-start: -10px;
  --card-pop-z-peak: 12px;
}

@keyframes hero-side-left {
  0% {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92) rotate(0deg);
    opacity: 0.2;
  }
  100% {
    left: var(--left-x);
    transform: translate(-50%, -50%) scale(1) rotate(calc(var(--side-rotate) * -1));
    opacity: 1;
  }
}

@keyframes hero-side-right {
  0% {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92) rotate(0deg);
    opacity: 0.2;
  }
  100% {
    left: var(--right-x);
    transform: translate(-50%, -50%) scale(1) rotate(var(--side-rotate));
    opacity: 1;
  }
}

@keyframes hero-card-pop {
  0% {
    transform: translate3d(-50%, 0, var(--pop-z-start)) scale(var(--pop-scale-start));
  }
  60% {
    transform: translate3d(-50%, 0, var(--pop-z-peak)) scale(var(--pop-scale-peak));
  }
  100% {
    transform: translate3d(-50%, 0, var(--card-z, 0px)) scale(1);
  }
}

@keyframes hero-card-cycle-1 {
  0%,
  18% {
    top: var(--slot-1-top);
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-1-z));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
  26% {
    top: calc(var(--slot-1-top) - var(--card-lift-strong));
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift-strong) * -1)) translateZ(clamp(var(--card-back-floor), calc(var(--slot-3-z) - var(--card-back-boost)), var(--slot-3-z)));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  33.33%,
  51.33% {
    top: var(--slot-3-top);
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-3-z));
    box-shadow: var(--card-shadow-3);
    z-index: 1;
  }
  59% {
    top: calc(var(--slot-3-top) - var(--card-lift));
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift) * -1)) translateZ(calc(var(--slot-2-z) + var(--card-front-boost-half)));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  66.66%,
  84.66% {
    top: var(--slot-2-top);
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-2-z));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  92% {
    top: calc(var(--slot-2-top) - var(--card-lift));
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift) * -1)) translateZ(calc(var(--slot-1-z) + var(--card-front-boost)));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
  100% {
    top: var(--slot-1-top);
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-1-z));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
}

@keyframes hero-card-cycle-2 {
  0%,
  18% {
    top: var(--slot-2-top);
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-2-z));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  26% {
    top: calc(var(--slot-2-top) - var(--card-lift));
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift) * -1)) translateZ(calc(var(--slot-1-z) + var(--card-front-boost)));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
  33.33%,
  51.33% {
    top: var(--slot-1-top);
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-1-z));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
  59% {
    top: calc(var(--slot-1-top) - var(--card-lift-strong));
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift-strong) * -1)) translateZ(clamp(var(--card-back-floor), calc(var(--slot-3-z) - var(--card-back-boost)), var(--slot-3-z)));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  66.66%,
  84.66% {
    top: var(--slot-3-top);
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-3-z));
    box-shadow: var(--card-shadow-3);
    z-index: 1;
  }
  92% {
    top: calc(var(--slot-3-top) - var(--card-lift));
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift) * -1)) translateZ(calc(var(--slot-2-z) + var(--card-front-boost-half)));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  100% {
    top: var(--slot-2-top);
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-2-z));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
}

@keyframes hero-card-cycle-3 {
  0%,
  18% {
    top: var(--slot-3-top);
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-3-z));
    box-shadow: var(--card-shadow-3);
    z-index: 1;
  }
  26% {
    top: calc(var(--slot-3-top) - var(--card-lift));
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift) * -1)) translateZ(calc(var(--slot-2-z) + var(--card-front-boost-half)));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  33.33%,
  51.33% {
    top: var(--slot-2-top);
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-2-z));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  59% {
    top: calc(var(--slot-2-top) - var(--card-lift));
    width: var(--slot-2-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift) * -1)) translateZ(calc(var(--slot-1-z) + var(--card-front-boost)));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
  66.66%,
  84.66% {
    top: var(--slot-1-top);
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-1-z));
    box-shadow: var(--card-shadow-1);
    z-index: 3;
  }
  92% {
    top: calc(var(--slot-1-top) - var(--card-lift-strong));
    width: var(--slot-1-width);
    transform: translateX(-50%) translateY(calc(var(--card-lift-strong) * -1)) translateZ(clamp(var(--card-back-floor), calc(var(--slot-3-z) - var(--card-back-boost)), var(--slot-3-z)));
    box-shadow: var(--card-shadow-2);
    z-index: 2;
  }
  100% {
    top: var(--slot-3-top);
    width: var(--slot-3-width);
    transform: translateX(-50%) translateY(0) translateZ(var(--slot-3-z));
    box-shadow: var(--card-shadow-3);
    z-index: 1;
  }
}

@supports (width: 1cqw) {
  .hero__bg--center {
    --screen-width-ratio: calc(1 - var(--screen-left-ratio) - var(--screen-right-ratio));
    --slot-1-width-px: calc(var(--center-width-ratio) * var(--screen-width-ratio) * var(--card-1-scale) * 100cqw);
    --slot-2-width-px: calc(var(--center-width-ratio) * var(--screen-width-ratio) * var(--card-2-scale) * 100cqw);
    --slot-3-width-px: calc(var(--center-width-ratio) * var(--screen-width-ratio) * var(--card-3-scale) * 100cqw);
    --shadow-unit-1: calc(var(--slot-1-width-px) / 161.849);
    --shadow-unit-2: calc(var(--slot-2-width-px) / 151.939);
    --shadow-unit-3: calc(var(--slot-3-width-px) / 115);
    --card-shadow-1: 0 calc(var(--shadow-unit-1) * 10) calc(var(--shadow-unit-1) * 20) calc(var(--shadow-unit-1) * 2) rgba(0, 0, 0, 0.50),
      0 calc(var(--shadow-unit-1) * 20) calc(var(--shadow-unit-1) * 10) calc(var(--shadow-unit-1) * 1) rgba(0, 0, 0, 0.20),
      0 calc(var(--shadow-unit-1) * 30) calc(var(--shadow-unit-1) * 5) calc(var(--shadow-unit-1) * -3) rgba(0, 0, 0, 0.10);
    --card-shadow-2: 0 calc(var(--shadow-unit-2) * 9.388) calc(var(--shadow-unit-2) * 18.776) calc(var(--shadow-unit-2) * 1.878) rgba(0, 0, 0, 0.50),
      0 calc(var(--shadow-unit-2) * 18.776) calc(var(--shadow-unit-2) * 9.388) calc(var(--shadow-unit-2) * 0.939) rgba(0, 0, 0, 0.20),
      0 calc(var(--shadow-unit-2) * 28.163) calc(var(--shadow-unit-2) * 4.694) calc(var(--shadow-unit-2) * -2.816) rgba(0, 0, 0, 0.10);
    --card-shadow-3: 0 calc(var(--shadow-unit-3) * 7.291) calc(var(--shadow-unit-3) * 14.582) calc(var(--shadow-unit-3) * 1.458) rgba(0, 0, 0, 0.50),
      0 calc(var(--shadow-unit-3) * 14.582) calc(var(--shadow-unit-3) * 7.291) calc(var(--shadow-unit-3) * 0.729) rgba(0, 0, 0, 0.20),
      0 calc(var(--shadow-unit-3) * 21.872) calc(var(--shadow-unit-3) * 3.645) calc(var(--shadow-unit-3) * -2.187) rgba(0, 0, 0, 0.10);
  }
}
.hero__bg--left {
  background-image: url("/redirect/assets/iphone_left.png");
}

.hero__bg--center {
  background-image: url("/redirect/assets/iphone_center.png");
  z-index: 2;
}

.hero__bg--right {
  background-image: url("/redirect/assets/iphone_right.png");
}

.countdown {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.countdown:empty {
  display: none;
}

.note {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}

.note-link {
  color: #6a79ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.note-link:visited {
  color: #6a79ff;
}

.note-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-11);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 67vw;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid #6a79ff;
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.btn-primary {
  background-color: rgba(106, 121, 255, 0.18);
  background-image: linear-gradient(#6A79FF, #6A79FF);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 0% 100%;
  /* box-shadow: 0 10px 24px rgba(106, 121, 255, 0.35); */
  animation: btn-fill 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

.btn:active {
  transform: translateY(1px);
}

.btn-disabled {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes btn-fill {
  0% {
    background-size: 0% 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    animation: none;
    background-size: 100% 100%;
  }
}

.footer-tabs {
  width: min(420px, 92vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.footer-logo {
  width: 24px;
  height: 24px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  display: block;
}

.footer-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  flex: 1 1 0;
  font-family: D-DIN-PRO;
  border-radius: 4px;
  background: linear-gradient(180deg, #B7BEFF 0%, #FFF 100%);
  color: #151C5C;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.tab-badge {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
}