:root {
  --design-width: 1920px;
  --design-height: 4488px;
  --scale: 1;
  --stage-left: 0px;
  --bg: #0e0619;
  --cyan: #00a8ff;
  --pink: #e34b97;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: #fff;
  font-family:
    Inter,
    "PingFang TC",
    "PingFang SC",
    "Microsoft JhengHei",
    "Noto Sans TC",
    Arial,
    sans-serif;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  width: 100%;
}

.design-canvas {
  position: relative;
  width: 100%;
  height: calc(var(--design-height) * var(--scale));
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 840px at 74% 14%, rgba(36, 0, 76, 0.96), rgba(34, 12, 58, 0.72) 22%, rgba(14, 5, 25, 0) 68%),
    radial-gradient(900px 680px at 50% 78%, rgba(0, 168, 255, 0.18), rgba(14, 5, 25, 0) 58%),
    var(--bg);
}

.design-stage {
  position: absolute;
  left: var(--stage-left);
  top: 0;
  width: var(--design-width);
  height: var(--design-height);
  transform: scale(var(--scale));
  transform-origin: top left;
  background:
    radial-gradient(900px 840px at 74% 14%, rgba(36, 0, 76, 0.96), rgba(34, 12, 58, 0.72) 22%, rgba(14, 5, 25, 0) 68%),
    radial-gradient(900px 680px at 50% 78%, rgba(0, 168, 255, 0.18), rgba(14, 5, 25, 0) 58%),
    var(--bg);
}

.site-header {
  position: absolute;
  left: 100px;
  top: 42px;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 1728px;
  height: 48px;
}

.brand,
.main-nav button,
.main-nav a,
.jump,
.round-nav {
  border: 0;
  background: transparent;
  color: inherit;
}

.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.brand img,
.footer-brand img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.main-nav {
  position: absolute;
  left: 1260px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 468px;
  font-size: 20px;
  letter-spacing: 0;
}

.main-nav a {
  text-decoration: none;
}

.hero {
  position: absolute;
  inset: 0;
}

.hero-copy {
  position: absolute;
  left: 92px;
  top: 212px;
  z-index: 3;
  width: 690px;
}

.hero-copy h1 {
  margin: 0;
  font-size: 128px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

.challenge-row {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-top: 14px;
  padding-left: 8px;
  white-space: nowrap;
}

.challenge-row img {
  width: 157px;
  height: 157px;
  border-radius: 20px;
}

.challenge-row strong,
.cta strong {
  color: var(--pink);
  font-weight: inherit;
}

.hero-copy p {
  margin: 12px 0 0 203px;
  color: #dedede;
  font-size: 24px;
  font-weight: 500;
}

.download-row,
.qr-row {
  display: flex;
  gap: 65px;
  margin-left: 1px;
}

.download-row {
  margin-top: 31px;
}

.qr-row {
  margin-top: 41px;
}

.qr-row img {
  width: 256px;
  height: 256px;
  border-radius: 4px;
  background: #fff;
}

.store-button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 256px;
  height: 68px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: #e4e4e4;
  color: #000;
  text-align: left;
}

.store-button-copy {
  display: flex;
  flex-direction: column;
}

.store-button small {
  display: block;
  font-size: 14px;
  line-height: 1.1;
}

.store-button-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}

.store-button-icon {
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

.store-button-icon-ios {
  width: 34px;
  height: 40px;
}

.hero .store-button-icon-ios {
  filter: brightness(0);
}

.store-button-icon-play {
  width: 42px;
  height: 42px;
}

.hero-media {
  position: absolute;
  left: 93px;
  top: -61px;
  z-index: 1;
  width: 2315px;
  height: 1063px;
  pointer-events: none;
}

.hero-frame-art {
  position: absolute;
  inset: 0;
}

.hero-frame-photo {
  position: absolute;
  left: 476.429px;
  top: 194.93px;
  width: 1301.143px;
  height: 867.09px;
  -webkit-mask-image: url("./assets/hero-mask.png");
  mask-image: url("./assets/hero-mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 47.768px -57.63px;
  mask-position: 47.768px -57.63px;
  -webkit-mask-size: 1268.399px 937.399px;
  mask-size: 1268.399px 937.399px;
  mask-mode: alpha;
}

.hero-frame-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-vector {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero-blue-1,
.hero-blue-2,
.hero-blue-3,
.hero-pink-1,
.hero-pink-2,
.hero-pink-3 {
  mix-blend-mode: hard-light;
}

.hero-blue-1 {
  left: 555.72px;
  top: 169.46px;
  width: 1203.8px;
  height: 429.775px;
}

.hero-blue-2 {
  left: 569.15px;
  top: 182.77px;
  width: 1177.12px;
  height: 402.475px;
}

.hero-blue-3 {
  left: 567.64px;
  top: 188.39px;
  width: 1180px;
  height: 405.975px;
}

.hero-blue-4 {
  left: 576.78px;
  top: 190.67px;
  width: 1161.54px;
  height: 388.3px;
}

.hero-blue-5 {
  left: 578.75px;
  top: 191.59px;
  width: 1159.76px;
  height: 387.133px;
}

.hero-pink-1 {
  left: 641.89px;
  top: 199.38px;
  width: 800.625px;
  height: 115.25px;
}

.hero-pink-2 {
  left: 651.35px;
  top: 208.87px;
  width: 781.125px;
  height: 96.2504px;
}

.hero-pink-3 {
  left: 650.35px;
  top: 212.88px;
  width: 783.625px;
  height: 98.2503px;
}

.hero-pink-4 {
  left: 656.96px;
  top: 214.5px;
  width: 771px;
  height: 85.0002px;
}

.hero-pink-5 {
  left: 657.65px;
  top: 215.16px;
  width: 770.167px;
  height: 83.6668px;
}

.hero-bottom-blue {
  left: 642px;
  top: 880px;
  width: 853.5px;
  height: 161.5px;
}

.hero-tail-pink {
  left: 418.5px;
  top: 1006.5px;
  width: 528px;
  height: 5px;
}

.home-mock {
  position: absolute;
  left: 1471px;
  top: 395px;
  z-index: 4;
  width: 411.405px;
  height: 682.647px;
  pointer-events: none;
}

.home-mock-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 321.754px;
  height: 649.014px;
  transform: translate(-50%, -50%) rotate(9.12deg);
  transform-origin: center;
}

.home-mock-body img {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.home-mock-buttons {
  left: -1px;
  top: 132px;
  width: 318.226px;
  height: 151.663px;
  z-index: 1;
}

.home-mock-surround {
  left: 0;
  top: 0;
  width: 321.754px;
  height: 649.014px;
  z-index: 2;
  filter:
    drop-shadow(0 0 2px rgba(0, 21, 64, 0.14))
    drop-shadow(0 2px 4px rgba(0, 21, 64, 0.05))
    drop-shadow(13px 37px 48px rgba(0, 0, 0, 0.22));
}

.home-mock-bg {
  left: 7.7px;
  top: 7.7px;
  width: 306.301px;
  height: 633.542px;
  z-index: 3;
}

.home-mock-screen {
  position: absolute;
  left: 22.7px;
  top: 20.5px;
  z-index: 4;
  width: 279.472px;
  height: 606.647px;
  overflow: hidden;
  -webkit-mask-image: url("./assets/mock-screen-mask.svg");
  mask-image: url("./assets/mock-screen-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-mode: alpha;
}

.home-mock-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-mock-speaker {
  left: 123px;
  top: 35px;
  z-index: 5;
  width: 77px;
  height: 6px;
}

.home-mock-camera {
  position: absolute;
  left: 208px;
  top: 30px;
  z-index: 5;
  width: 13.668px;
  height: 13.693px;
}

.home-mock-camera-base {
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-mock-camera-oval {
  left: 18.75%;
  top: 18.75%;
  width: 62.5%;
  height: 62.5%;
}

.home-mock-camera-highlight {
  left: 43.75%;
  top: 31.25%;
  width: 12.5%;
  height: 12.5%;
}

.section-title {
  position: absolute;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 4px #028cfd;
}

.line-title {
  left: 853px;
  top: 1548px;
}

.line-title::before,
.line-title::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 71px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

.line-title::before {
  right: calc(100% + 17px);
}

.line-title::after {
  left: calc(100% + 17px);
  transform: scaleX(-1);
}

.intro-title {
  left: 882px;
  top: 1140px;
}

.app-intro {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 360px;
}

.app-intro-panel {
  position: absolute;
  left: 92px;
  top: 1224px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1736px;
  min-height: 212px;
  padding: 38px 78px;
  border: 3px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(46, 20, 75, 0.66) 0%, rgba(21, 7, 48, 0.66) 100%) padding-box,
    linear-gradient(183deg, rgba(125, 41, 83, 0) 0%, rgba(227, 75, 151, 1) 100%) border-box;
  background-clip: padding-box, border-box;
}

.app-intro-panel p {
  margin: 0;
  color: #f4f4f4;
  font-size: 28px;
  line-height: 1.72;
  text-align: center;
}

.step-card {
  position: absolute;
  top: 1646px;
  display: flex;
  align-items: center;
  width: 468px;
  height: 290px;
  padding: 0 48px 0 56px;
  border: 3px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(46, 20, 75, 0.57) 0%, rgba(21, 7, 48, 0.57) 100%) padding-box,
    linear-gradient(183deg, rgba(125, 41, 83, 0) 0%, rgba(227, 75, 151, 1) 100%) border-box;
  background-clip: padding-box, border-box;
}

.step-one {
  left: 92px;
}

.step-two {
  left: 726px;
}

.step-three {
  left: 1360px;
}

.step-card img {
  width: 151px;
  height: 151px;
  object-fit: contain;
  margin-right: 26px;
}

.step-two img {
  width: 178px;
  height: 178px;
  margin-left: -16px;
}

.step-three img {
  width: 159px;
  height: 136px;
}

.step-card span {
  color: #d29efa;
  font-size: 32px;
}

.step-card h3 {
  margin: 10px 0 8px;
  font-size: 32px;
  font-weight: 600;
}

.step-card p {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

.step-arrow {
  position: absolute;
  top: 1749px;
  color: var(--pink);
  font-size: 68px;
  font-weight: 300;
}

.arrow-one {
  left: 626px;
}

.arrow-two {
  left: 1260px;
}

.reward-title {
  left: 812px;
  top: 2084px;
}

.reward-connector {
  position: absolute;
  left: 959px;
  top: 1968px;
  width: 2px;
  height: 71px;
  background: linear-gradient(180deg, rgba(0, 168, 255, 0), #00a8ff 45%, rgba(0, 168, 255, 0));
  box-shadow: 0 0 9px rgba(0, 168, 255, 0.9), 0 0 18px rgba(0, 168, 255, 0.42);
}

.reward-panel {
  position: absolute;
  left: 92px;
  top: 2164px;
  display: flex;
  align-items: center;
  gap: 69px;
  width: 1735px;
  height: 356px;
  padding-left: 468px;
  border: 3px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(46, 20, 75, 0.57), rgba(21, 7, 48, 0.57)) padding-box,
    linear-gradient(183deg, rgba(125, 41, 83, 0) 0%, rgba(227, 75, 151, 1) 100%) border-box;
  background-clip: padding-box, border-box;
}

.mall-mock {
  position: absolute;
  left: 63px;
  top: 2079px;
  z-index: 2;
  width: 526px;
  height: 526px;
  overflow: hidden;
  pointer-events: none;
}

.mall-mock-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.reward-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 235px;
  height: 252px;
  border: 1px solid rgba(227, 75, 151, 0.95);
  border-radius: 12px;
  text-align: center;
}

.reward-card img {
  width: 126px;
  height: 126px;
  object-fit: contain;
  margin-bottom: 16px;
}

.reward-card h3,
.reward-card p {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.more-dot {
  position: absolute;
  right: 33px;
  top: 166px;
  display: grid;
  place-items: center;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.more-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    -11px 0 0 #fff,
    11px 0 0 #fff;
}

.showcase {
  position: absolute;
  left: 0;
  top: 2728px;
  width: 1920px;
  height: 980px;
}

.showcase-panel {
  position: absolute;
  left: 92px;
  top: 431px;
  width: 1736px;
  height: 560px;
  border-radius: 18px;
  background: linear-gradient(180deg, #097c98, #19212e);
}

.showcase-viewport {
  position: absolute;
  left: 92px;
  top: 0;
  width: 1736px;
  height: 976px;
  overflow: hidden;
}

.showcase-track {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: start;
  width: 100%;
  height: 976px;
  padding: 54px 96px 0;
}

.showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 302px;
  text-align: center;
}

.showcase-phone-slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 640px;
}

.showcase-phone {
  --phone-scale: 0.68;
  position: relative;
  width: calc(413.651px * var(--phone-scale));
  height: calc(851.654px * var(--phone-scale));
  margin: 0 auto;
  border: calc(1px * var(--phone-scale)) solid #222420;
  border-radius: calc(62.813px * var(--phone-scale));
  background: linear-gradient(145deg, #181a1b 0%, #d2d4ce 21%, #8f9289 34%, #191b1a 51%, #eff0ea 72%, #262826 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.showcase-phone::before {
  content: "";
  position: absolute;
  left: calc(6.544px * var(--phone-scale));
  top: calc(0.744px * var(--phone-scale));
  width: calc(400.979px * var(--phone-scale));
  height: calc(844.377px * var(--phone-scale));
  border: calc(4.747px * var(--phone-scale)) solid #989892;
  border-radius: calc(60.467px * var(--phone-scale));
  box-shadow: inset 0 0 0 calc(5.113px * var(--phone-scale)) #3f3f3f;
  pointer-events: none;
}

.showcase-phone-shell,
.showcase-phone-screen,
.showcase-phone-island,
.showcase-phone-antenna,
.showcase-phone-button {
  position: absolute;
}

.showcase-phone-shell {
  left: calc(5.448px * var(--phone-scale));
  top: 0;
  width: calc(403.17px * var(--phone-scale));
  height: calc(845.865px * var(--phone-scale));
  border: calc(0.73px * var(--phone-scale)) solid #1b1c16;
  border-radius: calc(62.813px * var(--phone-scale));
  box-shadow:
    inset 0 0 0 calc(1.826px * var(--phone-scale)) #77796b,
    inset 0 0 0 calc(4.747px * var(--phone-scale)) rgba(20, 20, 20, 0.64);
}

.showcase-phone-shell::after {
  content: "";
  position: absolute;
  left: calc(1.096px * var(--phone-scale));
  top: calc(0.744px * var(--phone-scale));
  width: calc(400.979px * var(--phone-scale));
  height: calc(844.377px * var(--phone-scale));
  border-radius: calc(60.467px * var(--phone-scale));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 8%, rgba(0, 0, 0, 0) 16%, rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.12) 100%);
  opacity: 0.58;
  pointer-events: none;
}

.showcase-phone-screen {
  left: calc(20.896px * var(--phone-scale));
  top: calc(16.059px * var(--phone-scale));
  z-index: 2;
  width: calc(372.339px * var(--phone-scale));
  height: calc(812.11px * var(--phone-scale));
  overflow: hidden;
  border-radius: calc(54px * var(--phone-scale));
  background: #050607;
  box-shadow: inset 0 0 0 calc(1px * var(--phone-scale)) rgba(255, 255, 255, 0.05);
}

.showcase-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.showcase-phone-island {
  left: calc(157.613px * var(--phone-scale));
  top: calc(28.75px * var(--phone-scale));
  z-index: 4;
  width: calc(99.774px * var(--phone-scale));
  height: calc(27.735px * var(--phone-scale));
  border-radius: calc(13.162px * var(--phone-scale));
  background: #0a0a0a;
  box-shadow:
    inset 0 0 0 calc(0.353px * var(--phone-scale)) #0e0e0e,
    inset 0 0 calc(1.763px * var(--phone-scale)) calc(0.353px * var(--phone-scale)) #000,
    inset calc(-1.058px * var(--phone-scale)) 0 0 #2a2a2a,
    inset calc(1.058px * var(--phone-scale)) 0 0 #2a2a2a;
}

.showcase-phone-island-dot {
  position: absolute;
  right: calc(8.8px * var(--phone-scale));
  top: calc(5.7px * var(--phone-scale));
  width: calc(16px * var(--phone-scale));
  height: calc(16px * var(--phone-scale));
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(86, 172, 255, 0.95), rgba(17, 56, 119, 0.9) 48%, rgba(3, 14, 31, 0.98) 72%);
  box-shadow: 0 0 0 calc(1px * var(--phone-scale)) rgba(12, 17, 30, 0.88);
}

.showcase-phone-island-line {
  position: absolute;
  right: calc(27px * var(--phone-scale));
  top: calc(8px * var(--phone-scale));
  width: calc(1px * var(--phone-scale));
  height: calc(12px * var(--phone-scale));
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(8deg);
}

.showcase-phone-antenna {
  z-index: 3;
  border-radius: 999px;
}

.antenna-top {
  left: calc(322.818px * var(--phone-scale));
  top: 0;
  width: calc(6.129px * var(--phone-scale));
  height: calc(5.448px * var(--phone-scale));
  background: rgba(228, 228, 227, 0.65);
}

.antenna-left-top {
  left: calc(5.421px * var(--phone-scale));
  top: calc(85.82px * var(--phone-scale));
  width: calc(6.088px * var(--phone-scale));
  height: calc(6.893px * var(--phone-scale));
  background: rgba(228, 228, 227, 0.65);
}

.antenna-left-bottom {
  left: calc(5.448px * var(--phone-scale));
  top: calc(761.414px * var(--phone-scale));
  width: calc(5.789px * var(--phone-scale));
  height: calc(4.767px * var(--phone-scale));
  background: rgba(154, 169, 177, 0.5);
}

.antenna-right-top {
  left: calc(402.82px * var(--phone-scale));
  top: calc(86.164px * var(--phone-scale));
  width: calc(6.088px * var(--phone-scale));
  height: calc(6.549px * var(--phone-scale));
  background: rgba(228, 228, 227, 0.65);
}

.antenna-right-bottom {
  left: calc(402.82px * var(--phone-scale));
  top: calc(761.352px * var(--phone-scale));
  width: calc(6.088px * var(--phone-scale));
  height: calc(4.825px * var(--phone-scale));
  background: rgba(154, 169, 177, 0.5);
}

.antenna-bottom {
  left: calc(85.91px * var(--phone-scale));
  top: calc(840.004px * var(--phone-scale));
  width: calc(5.412px * var(--phone-scale));
  height: calc(5.859px * var(--phone-scale));
  background: rgba(154, 169, 177, 0.5);
}

.showcase-phone-button {
  z-index: 3;
  background: #c8c9c4;
}

.button-silent,
.button-plus,
.button-minus {
  left: calc(1.869px * var(--phone-scale));
  border: calc(0.271px * var(--phone-scale)) solid #7d7e79;
  border-radius: calc(1.353px * var(--phone-scale));
  box-shadow:
    inset calc(-0.676px * var(--phone-scale)) 0 0 #f2f3ed,
    inset 0 calc(-1.353px * var(--phone-scale)) calc(0.676px * var(--phone-scale)) #f2f3ed,
    inset 0 calc(1.353px * var(--phone-scale)) 0 #41423c,
    inset calc(-1.353px * var(--phone-scale)) 0 calc(1.353px * var(--phone-scale)) #41423c,
    inset 0 calc(2.706px * var(--phone-scale)) calc(0.338px * var(--phone-scale)) rgba(65, 66, 60, 0.3),
    inset calc(-1.015px * var(--phone-scale)) calc(-2.706px * var(--phone-scale)) calc(1.015px * var(--phone-scale)) rgba(218, 219, 214, 0.2),
    inset calc(0.338px * var(--phone-scale)) 0 0 #dadbd6;
}

.button-silent {
  top: calc(168.447px * var(--phone-scale));
  width: calc(4.059px * var(--phone-scale));
  height: calc(36.189px * var(--phone-scale));
}

.button-plus {
  top: calc(231.176px * var(--phone-scale));
  width: calc(4.059px * var(--phone-scale));
  height: calc(67.209px * var(--phone-scale));
}

.button-minus {
  top: calc(312.514px * var(--phone-scale));
  width: calc(4.059px * var(--phone-scale));
  height: calc(66.519px * var(--phone-scale));
  border-width: calc(0.552px * var(--phone-scale));
  border-radius: calc(1.471px * var(--phone-scale));
}

.button-power {
  left: calc(408.395px * var(--phone-scale));
  top: calc(253.578px * var(--phone-scale));
  width: calc(3.044px * var(--phone-scale));
  height: calc(101.33px * var(--phone-scale));
  border: calc(0.271px * var(--phone-scale)) solid #7d7e79;
  border-radius: calc(1.471px * var(--phone-scale));
  box-shadow:
    inset 0 calc(-1.471px * var(--phone-scale)) 0 #f2f3ed,
    inset 0 calc(1.471px * var(--phone-scale)) 0 #f2f3ed,
    inset calc(-1.103px * var(--phone-scale)) 0 calc(1.471px * var(--phone-scale)) rgba(65, 66, 60, 0.66),
    inset calc(1.471px * var(--phone-scale)) calc(2.942px * var(--phone-scale)) calc(0.735px * var(--phone-scale)) #41423c,
    inset calc(1.471px * var(--phone-scale)) calc(-2.942px * var(--phone-scale)) calc(0.735px * var(--phone-scale)) #dadbd6,
    inset calc(-1.471px * var(--phone-scale)) 0 0 #dadbd6;
}

.showcase-item p {
  width: 302px;
  margin: 40px auto 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.round-nav {
  position: absolute;
  z-index: 3;
  top: 545px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  line-height: 0;
}

.round-nav-arrow {
  display: block;
  width: 16px;
  height: 16px;
  border-top: 3px solid #7b7f86;
  border-right: 3px solid #7b7f86;
  pointer-events: none;
}

.round-nav-arrow-left {
  margin-left: 6px;
  transform: rotate(-135deg);
}

.round-nav-arrow-right {
  margin-right: 6px;
  transform: rotate(45deg);
}

.round-nav.left {
  left: 60px;
}

.round-nav.right {
  right: 59.863px;
}

.cta {
  position: absolute;
  left: 92px;
  top: 3980px;
  width: 1736px;
  height: 360px;
}

.cta-border {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 1738px;
  height: 362px;
  pointer-events: none;
}

.cta-copy {
  position: absolute;
  left: 108px;
  top: 50%;
  transform: translateY(-50%);
  width: 560px;
}

.cta h2 {
  margin: 0;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.cta p {
  margin: 24px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
}

.cta-downloads {
  position: absolute;
  left: 870px;
  top: 34px;
  display: flex;
  gap: 42px;
  width: 690px;
}

.cta-download {
  width: 324px;
}

.cta-qr-wrap {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto;
}

.cta-qr-frame {
  position: absolute;
  inset: -0.5px;
  width: 177px;
  height: 177px;
}

.cta-qr-code {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 162px;
  height: 162px;
}

.cta-store {
  position: relative;
  display: block;
  width: 100%;
  height: 66px;
  margin-top: 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(17, 6, 31, 0.92), rgba(28, 10, 47, 0.86)) padding-box,
    linear-gradient(90deg, #00a8ff 0%, rgba(0, 135, 204, 0) 50%, #00a8ff 100%) border-box;
  background-clip: padding-box, border-box;
  color: #f5f5f5;
  text-align: left;
}

.cta-store-icon {
  position: absolute;
  display: block;
  pointer-events: none;
}

.cta-store-ios-icon {
  left: 34px;
  top: 10px;
  width: 38px;
  height: 44.41px;
}

.cta-store-play-icon {
  left: 30px;
  top: 12px;
  width: 40px;
  height: 40px;
}

.cta-store-kicker,
.cta-store-name {
  position: absolute;
  left: 88px;
  font-family: Inter, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: #f5f5f5;
  white-space: nowrap;
}

.cta-store-kicker {
  top: 10px;
  font-size: 12px;
}

.cta-store-name {
  top: 31px;
  font-size: 18px;
}

.site-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
  width: 100%;
  height: 80px;
  padding: 0 24px;
  background: #2c3e50;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.footer-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.site-footer > p {
  margin: 0;
  color: #d0d0d0;
  font-size: 16px;
}

.site-footer nav {
  display: flex;
  gap: 32px;
}

.site-footer a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 900px) {
  .site-footer {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: auto;
    padding: 20px 24px;
    text-align: center;
  }

  .site-footer nav {
    gap: 24px;
  }
}