@font-face {
  font-family: "Paytone One";
  src: url("./assets/PaytoneOne-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --design-px: min(.2564102564vw, 1px);
  color-scheme: light;
  color: #333;
  background: #f5f5f5;
  font-family: "PingFang SC", "PingFangSC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html {
  background: #f5f5f5;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }
body {
  display: flex;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
  background: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.download-page {
  position: relative;
  width: calc(390 * var(--design-px));
  height: calc(1815.5 * var(--design-px) + env(safe-area-inset-bottom));
  flex: 0 0 auto;
  overflow: hidden;
  background: #fff;
}

.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(240 * var(--design-px));
  overflow: hidden;
}
.hero-scene {
  position: absolute;
  top: calc(-9.057 * var(--design-px));
  left: calc(-90.986 * var(--design-px));
  width: calc(562.046 * var(--design-px));
  height: calc(250.273 * var(--design-px));
  overflow: hidden;
  pointer-events: none;
}
.hero-scene img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.hero h1 {
  position: absolute;
  top: calc(88 * var(--design-px));
  left: calc(24 * var(--design-px));
  margin: 0;
  background: linear-gradient(90deg, #bca3fb, #5c3be8);
  background-clip: text;
  color: transparent;
  font-family: "Paytone One", "Arial Black", "PingFang SC", sans-serif;
  font-size: calc(40 * var(--design-px));
  font-weight: 400;
  line-height: 1.15;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-slogan {
  position: absolute;
  top: calc(145 * var(--design-px));
  left: calc(24 * var(--design-px));
  margin: 0;
  color: #8264f0;
  font-size: calc(17 * var(--design-px));
  font-weight: 500;
  line-height: 1.8;
  white-space: nowrap;
}
.hero-values {
  position: absolute;
  top: calc(185.5 * var(--design-px));
  left: calc(24 * var(--design-px));
  display: flex;
  margin: 0;
  padding: 0;
  color: #7a5bee;
  font-size: calc(17 * var(--design-px));
  font-weight: 500;
  line-height: 1.8;
  list-style: none;
}
.hero-values li { display: flex; align-items: center; white-space: nowrap; }
.hero-values li + li::before {
  width: calc(5 * var(--design-px));
  height: calc(5 * var(--design-px));
  margin: 0 calc(14.5 * var(--design-px));
  background: url("./assets/purple-dot.svg") center / 100% 100% no-repeat;
  content: "";
}

h2, h3, p { word-break: break-word; }
.about h2,
.partner h2,
.voices h2 {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  color: #333;
  font-size: calc(20 * var(--design-px));
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.section-subtitle {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  color: #666;
  font-size: calc(14 * var(--design-px));
  font-weight: 400;
  line-height: calc(20 * var(--design-px));
  text-align: center;
  white-space: nowrap;
}
.about h2 { top: calc(270 * var(--design-px)); }
.about > .section-subtitle { top: calc(301.5 * var(--design-px)); }

.feature-card {
  position: absolute;
  left: calc(20 * var(--design-px));
  width: calc(350 * var(--design-px));
  height: calc(130 * var(--design-px));
  overflow: hidden;
}
.feature-shopping {
  top: calc(341.5 * var(--design-px));
  border-radius: calc(12 * var(--design-px));
  background: linear-gradient(260.133deg, #f0fbfc 7.18%, #fdf2fd 98.66%);
}
.feature-discount {
  top: calc(487.5 * var(--design-px));
  border-radius: calc(16 * var(--design-px));
  background: linear-gradient(260.133deg, #fff9eb 7.18%, #fff5f4 98.66%);
}
.feature-service {
  top: calc(633.5 * var(--design-px));
  border-radius: calc(12 * var(--design-px));
  background: linear-gradient(93.153deg, #f8ffef 5.18%, #edffe5 94.91%);
}
.feature-interaction {
  top: calc(779.5 * var(--design-px));
  border-radius: calc(16 * var(--design-px));
  background: linear-gradient(260.133deg, #fff9eb 7.18%, #fff5f4 98.66%);
}
.feature-copy {
  position: absolute;
  z-index: 1;
  top: calc(42.5 * var(--design-px));
  color: #333;
  white-space: nowrap;
}
.feature-copy-left { left: calc(21 * var(--design-px)); text-align: left; }
.feature-copy-right { right: calc(21 * var(--design-px)); text-align: right; }
.feature-copy h3 {
  margin: 0;
  font-size: calc(17 * var(--design-px));
  font-weight: 600;
  line-height: calc(20 * var(--design-px));
}
.feature-copy p {
  margin: calc(9 * var(--design-px)) 0 0;
  font-size: calc(14 * var(--design-px));
  font-weight: 400;
  line-height: calc(20 * var(--design-px));
}
.shopping-art,
.discount-art { position: absolute; overflow: hidden; pointer-events: none; }
.shopping-art {
  top: calc(8.5 * var(--design-px));
  left: calc(215 * var(--design-px));
  width: calc(122.5 * var(--design-px));
  height: calc(113 * var(--design-px));
}
.shopping-art img {
  position: absolute;
  top: calc(-37.267 * var(--design-px));
  left: calc(-222.178 * var(--design-px));
  width: calc(395.124 * var(--design-px));
  height: calc(703.244 * var(--design-px));
  max-width: none;
}
.discount-art {
  top: calc(4.5 * var(--design-px));
  left: calc(5.5 * var(--design-px));
  width: calc(117 * var(--design-px));
  height: calc(116 * var(--design-px));
}
.discount-art img {
  position: absolute;
  top: calc(-32.12 * var(--design-px));
  left: calc(-57.611 * var(--design-px));
  width: calc(390.792 * var(--design-px));
  height: calc(696 * var(--design-px));
  max-width: none;
}
.service-art {
  position: absolute;
  top: calc(17.5 * var(--design-px));
  left: calc(236 * var(--design-px));
  display: block;
  width: calc(106 * var(--design-px));
  height: calc(106 * var(--design-px));
  object-fit: cover;
  pointer-events: none;
}
.interaction-art {
  position: absolute;
  top: calc(25 * var(--design-px));
  left: calc(14.5 * var(--design-px));
  display: block;
  width: calc(81.5 * var(--design-px));
  height: calc(94 * var(--design-px));
  object-fit: cover;
  pointer-events: none;
}

.partner h2 { top: calc(939.5 * var(--design-px)); }
.partner > .section-subtitle { top: calc(975.25 * var(--design-px)); }
.partner-grid {
  position: absolute;
  top: calc(1015 * var(--design-px));
  left: calc(20 * var(--design-px));
  display: grid;
  grid-template-columns: repeat(2, calc(169 * var(--design-px)));
  gap: calc(12 * var(--design-px));
}
.partner-card {
  position: relative;
  height: calc(183 * var(--design-px));
  overflow: hidden;
  border: calc(.5 * var(--design-px)) solid #ebebeb;
  border-radius: calc(4 * var(--design-px));
  background: rgba(255, 255, 255, .6);
  box-shadow: calc(2 * var(--design-px)) calc(3 * var(--design-px)) calc(3 * var(--design-px)) rgba(182, 182, 182, .25);
}
.partner-card > img {
  display: block;
  width: 100%;
  height: calc(105 * var(--design-px));
  border-radius: calc(4 * var(--design-px));
  object-fit: cover;
}
.partner-card h3 {
  margin: calc(12 * var(--design-px)) calc(12 * var(--design-px)) 0;
  color: #333;
  font-size: calc(15 * var(--design-px));
  font-weight: 500;
  line-height: calc(20 * var(--design-px));
}
.partner-card p {
  margin: 0 calc(12 * var(--design-px));
  color: rgba(51, 51, 51, .6);
  font-size: calc(12 * var(--design-px));
  line-height: calc(20 * var(--design-px));
  white-space: nowrap;
}

.voices h2 { top: calc(1228 * var(--design-px)); }
.voices > .section-subtitle { top: calc(1263.75 * var(--design-px)); }
.review-list {
  position: absolute;
  top: calc(1303.5 * var(--design-px));
  left: calc(20 * var(--design-px));
  display: grid;
  gap: calc(16 * var(--design-px));
}
.review {
  position: relative;
  width: calc(350 * var(--design-px));
  height: calc(63 * var(--design-px));
}
.review-shape {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--design-px));
  display: block;
  width: calc(356 * var(--design-px));
  height: calc(69 * var(--design-px));
  max-width: none;
  pointer-events: none;
}
.review-shape-mirrored { transform: scaleX(-1); }
.review p {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #333;
  font-size: calc(12 * var(--design-px));
  font-weight: 400;
  line-height: calc(17 * var(--design-px));
}
.review-avatar-right p { left: calc(19 * var(--design-px)); width: calc(264 * var(--design-px)); }
.review-avatar-left p { left: calc(70 * var(--design-px)); width: calc(265 * var(--design-px)); }
.review-avatar {
  position: absolute;
  z-index: 1;
  top: calc(6.5 * var(--design-px));
  display: block;
  width: calc(50 * var(--design-px));
  height: calc(50 * var(--design-px));
  border-radius: 50%;
  object-fit: cover;
}
.review-avatar-right .review-avatar { right: calc(3 * var(--design-px)); }
.review-avatar-left .review-avatar { left: calc(12 * var(--design-px)); }

.page-footer {
  position: absolute;
  top: calc(1633.5 * var(--design-px));
  left: 0;
  width: 100%;
  color: #666;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 calc(24 * var(--design-px));
}
.footer-links button {
  height: calc(22 * var(--design-px));
  padding: 0;
  border: 0;
  background: transparent;
  color: #666;
  cursor: pointer;
  font-size: calc(15 * var(--design-px));
  font-weight: 400;
  line-height: calc(22 * var(--design-px));
  text-align: center;
  white-space: nowrap;
}
.page-footer > p {
  margin: calc(15 * var(--design-px)) 0 0;
  font-size: calc(13 * var(--design-px));
  line-height: calc(20 * var(--design-px));
  text-align: center;
  white-space: nowrap;
}

.download-bar {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 50%;
  width: calc(390 * var(--design-px));
  height: calc(124 * var(--design-px) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: calc(.5 * var(--design-px)) solid rgba(235, 235, 235, .45);
  background: #fff;
  box-shadow: calc(2 * var(--design-px)) calc(-2 * var(--design-px)) calc(2 * var(--design-px)) rgba(229, 229, 229, .15);
}
.download-actions {
  position: absolute;
  top: calc(12 * var(--design-px));
  left: calc(16 * var(--design-px));
  display: grid;
  grid-template-columns: repeat(2, calc(169 * var(--design-px)));
  column-gap: calc(20 * var(--design-px));
  row-gap: calc(12 * var(--design-px));
}
.download-actions button {
  display: flex;
  height: calc(44 * var(--design-px));
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--design-px));
  padding: 0;
  border: calc(.5 * var(--design-px)) solid #ebebeb;
  border-radius: calc(37 * var(--design-px));
  background: rgba(255, 255, 255, .78);
  box-shadow: calc(2 * var(--design-px)) calc(3 * var(--design-px)) calc(3 * var(--design-px)) rgba(182, 182, 182, .25);
  color: #333;
  cursor: pointer;
  font-size: calc(17 * var(--design-px));
  font-weight: 500;
  line-height: calc(20 * var(--design-px));
  white-space: nowrap;
}
.download-actions img {
  display: block;
  width: calc(24 * var(--design-px));
  height: calc(24 * var(--design-px));
}
.download-actions button:active { transform: scale(.98); }
.download-actions button:focus-visible,
.footer-links button:focus-visible {
  outline: calc(2 * var(--design-px)) solid #7a5bee;
  outline-offset: calc(2 * var(--design-px));
}

@media (prefers-reduced-motion: reduce) {
  .download-actions button:active { transform: none; }
}