@font-face {
  font-family: QishiBrand;
  src: url("assets/fonts/brand.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #f7f7f7; color: #111; }
body {
  min-width: 320px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font-family: inherit; }
.icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; color: inherit; }
svg { overflow: visible; }
.page { width: 100%; max-width: 863px; margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 0 30px #0000000f; }
.page-canvas {
  --u: calc(100cqw / 863);
  position: relative;
  container-type: inline-size;
  isolation: isolate;
}
/* 原站四张切图之间各重叠 1px；窄屏也保留这三个固定像素接缝。 */
.page-canvas::before { content: ""; display: block; padding-top: calc(200.3476245655% - 3px); }

/* 保留原站的人物、街景、地图、盾牌和纹理；正文由上层 HTML 渲染。 */
.original-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; user-select: none; }
.original-art img { position: absolute; left: 0; display: block; width: 100%; height: auto; }
.art-hero { top: 0; }
.art-features { top: calc(517 * var(--u) - 1px); }
.art-coverage { top: calc(1045 * var(--u) - 2px); }
.art-footer { top: calc(1357 * var(--u) - 3px); }

.hero-copy-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(446 * var(--u));
  height: calc(440 * var(--u));
  background: linear-gradient(90deg, #fff 0%, #fff 88%, #ffffff00 100%);
  mask-image: linear-gradient(#000 0%, #000 84%, transparent 100%);
}
.hero-title { position: static; font-weight: 900; line-height: 1; }
.hero-brand {
  position: absolute;
  left: calc(61 * var(--u));
  top: calc(41 * var(--u));
  font-family: QishiBrand, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(80 * var(--u));
  font-weight: 900;
  letter-spacing: calc(-5 * var(--u));
  line-height: 1.08;
  transform: skewX(-9deg) scaleY(.86);
  transform-origin: left top;
  white-space: nowrap;
}
/* 箭杆沿“势”字右上竖笔的斜率衔接，与字形使用同一缩放坐标。 */
.brand-arrow { position: absolute; left: calc(167 * var(--u)); top: calc(28 * var(--u)); width: calc(34 * var(--u)); height: calc(31 * var(--u)); }
.hero-slogan {
  position: absolute;
  left: calc(55 * var(--u));
  top: calc(122 * var(--u));
  height: calc(97.85 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  white-space: nowrap;
  transform: scaleX(.95);
  transform-origin: left center;
}
.hero-slogan-word { font-family: QishiBrand, sans-serif; font-size: calc(74 * var(--u)); font-weight: 900; letter-spacing: calc(-3 * var(--u)); transform: skewX(-9deg); }
/* 透明品牌字形按原图笔画边界定位，保留原版书法比例。 */
.hero-bicheng { position: absolute; left: calc(191.424 * var(--u)); top: calc(110.782 * var(--u)); width: calc(187.546 * var(--u)); height: calc(105.33 * var(--u)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-services { position: absolute; left: calc(57 * var(--u)); top: calc(241 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.4; letter-spacing: calc(.5 * var(--u)); white-space: nowrap; }
.hero-values { position: absolute; left: calc(57 * var(--u)); top: calc(288 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.5; }
.hero-values i { width: calc(2 * var(--u)); height: calc(16 * var(--u)); background: #fb6c0a; }
.hero-badges { position: absolute; left: calc(58 * var(--u)); top: calc(335 * var(--u)); display: flex; gap: calc(9 * var(--u)); }
.hero-badges li { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); padding-inline: calc(10 * var(--u)); color: #373737; background: #fff9f3; border-radius: calc(22 * var(--u)); font-size: calc(15 * var(--u)); white-space: nowrap; }
.hero-badges .icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #ff6500; }
.hero-service { position: absolute; width: calc(128 * var(--u)); height: calc(79 * var(--u)); padding-top: calc(14 * var(--u)); border-radius: calc(22 * var(--u)); background: #fff; text-align: center; }
.hero-service h2 { display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 650; line-height: calc(25 * var(--u)); }
.hero-service h2 .icon { width: calc(23 * var(--u)); height: calc(23 * var(--u)); color: #ff6200; }
.hero-service p { margin-top: calc(7 * var(--u)); color: #606060; font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }
.service-pickup { left: calc(711 * var(--u)); top: calc(58 * var(--u)); }
.service-buy { left: calc(408 * var(--u)); top: calc(219 * var(--u)); }
.service-sell { left: calc(702 * var(--u)); top: calc(360 * var(--u)); }

.features-panel {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(541 * var(--u) - 1px);
  width: calc(828 * var(--u));
  height: calc(536 * var(--u));
  border-radius: calc(35 * var(--u));
  background: #fff;
  box-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) #00000006;
}
.feature-grid { position: absolute; left: 0; right: 0; top: calc(44 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.feature-grid article { position: relative; }
.feature-grid article:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 0; height: calc(174 * var(--u)); border-right: 1px solid #f1f1f1; }
.feature-icon { width: calc(62 * var(--u)); height: calc(62 * var(--u)); margin-inline: auto; color: #ff6900; }
.feature-grid h2 { margin-top: calc(17 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; line-height: calc(28 * var(--u)); }
.feature-grid p { margin-top: calc(7 * var(--u)); color: #383838; font-size: calc(16 * var(--u)); line-height: calc(26 * var(--u)); white-space: nowrap; }
.features-divider { position: absolute; left: calc(36 * var(--u)); right: calc(36 * var(--u)); top: calc(241 * var(--u)); height: 1px; background: #f1f1f1; }
.process-heading { position: absolute; left: 0; right: 0; top: calc(267 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 750; line-height: calc(42 * var(--u)); }
.process-heading::before, .process-heading::after { content: ""; width: calc(25 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: linear-gradient(90deg, #ffffff00, #ff741b); }
.process-heading::after { transform: rotate(180deg); }
.order-steps { position: absolute; left: 0; right: 0; top: calc(324 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.order-steps li { position: relative; }
.step-icon { display: grid; place-items: center; width: calc(88 * var(--u)); height: calc(88 * var(--u)); margin: 0 auto; border-radius: 50%; color: #ff6900; background: radial-gradient(circle, #fff2e7, #fff9f5); }
.step-icon .icon { width: calc(49 * var(--u)); height: calc(49 * var(--u)); }
.order-steps li:not(:last-child)::after { content: ""; position: absolute; right: calc(-14 * var(--u)); top: calc(35 * var(--u)); width: calc(29 * var(--u)); height: calc(19 * var(--u)); background: #c7cac9; clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); }
.order-steps h3 { display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 650; line-height: calc(27 * var(--u)); white-space: nowrap; }
.order-steps h3 > span { display: grid; place-items: center; width: calc(23 * var(--u)); height: calc(23 * var(--u)); border-radius: 50%; color: #fff; background: #ff6900; font-size: calc(16 * var(--u)); font-weight: 500; }
.order-steps p { margin-top: calc(7 * var(--u)); color: #444; font-size: calc(16 * var(--u)); line-height: calc(26 * var(--u)); white-space: nowrap; }

.coverage-copy { position: absolute; top: calc(1128 * var(--u) - 2px); left: calc(54 * var(--u)); width: calc(332 * var(--u)); padding-left: calc(3 * var(--u)); background: #fff; box-shadow: 0 0 calc(9 * var(--u)) calc(7 * var(--u)) #fff; }
.coverage-copy h2 { font-size: calc(32 * var(--u)); font-weight: 750; line-height: calc(43 * var(--u)); letter-spacing: calc(-.5 * var(--u)); white-space: nowrap; }
.coverage-copy h2 span { color: #ff6500; }
.coverage-copy p { margin-top: calc(5 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); white-space: nowrap; }
.coverage-stats { position: absolute; left: calc(35 * var(--u)); top: calc(1236 * var(--u) - 2px); display: grid; grid-template-columns: 110fr 115fr 95fr 105fr; width: calc(425 * var(--u)); height: calc(154 * var(--u)); text-align: center; }
.coverage-stats li { display: flex; flex-direction: column; align-items: center; }
.stat-icon { display: grid; place-items: center; width: calc(68 * var(--u)); height: calc(68 * var(--u)); margin-top: calc(3 * var(--u)); color: #ff6a00; background: radial-gradient(circle, #fff1e4, #fff9f2); border-radius: 50%; box-shadow: 0 0 calc(4 * var(--u)) calc(6 * var(--u)) #fff; }
.stat-icon .icon { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.coverage-stats strong { margin-top: calc(11 * var(--u)); padding-inline: calc(5 * var(--u)); color: #f7690b; background: #fff; box-shadow: 0 0 calc(3 * var(--u)) calc(4 * var(--u)) #fff; font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: calc(22 * var(--u)); font-weight: 700; line-height: calc(29 * var(--u)); }
.coverage-stats li > span:last-child { margin-top: calc(9 * var(--u)); padding-inline: calc(8 * var(--u)); background: #fff; box-shadow: 0 0 calc(4 * var(--u)) calc(5 * var(--u)) #fff; font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); white-space: nowrap; }
.map-pledge { position: absolute; left: calc(680 * var(--u)); top: calc(1287 * var(--u) - 2px); width: calc(83 * var(--u)); height: calc(67 * var(--u)); padding-top: calc(3 * var(--u)); background: linear-gradient(90deg, #ffe6c7, #ffe0b5); text-align: center; font-size: calc(16 * var(--u)); font-weight: 650; line-height: calc(29 * var(--u)); }

.assurance-copy { position: absolute; left: calc(174 * var(--u)); top: calc(1441 * var(--u) - 3px); width: calc(320 * var(--u)); height: calc(84 * var(--u)); padding: calc(6 * var(--u)) 0 0 calc(7 * var(--u)); color: #fff; background: #111112; box-shadow: 0 0 calc(7 * var(--u)) calc(5 * var(--u)) #111112; }
.assurance-copy h2 { font-size: calc(28 * var(--u)); font-weight: 750; line-height: calc(38 * var(--u)); white-space: nowrap; }
.assurance-copy p { margin-top: calc(8 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); white-space: nowrap; }
.assurance-list { position: absolute; left: calc(72 * var(--u)); top: calc(1581 * var(--u) - 3px); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; width: calc(772 * var(--u)); height: calc(89 * var(--u)); background: #fff; box-shadow: 0 0 calc(8 * var(--u)) calc(6 * var(--u)) #fff; }
.assurance-list li { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.assurance-list li > .icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: #ff6900; }
.assurance-list li > span { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); white-space: nowrap; }
.assurance-list strong { display: block; font-size: inherit; font-weight: 500; }
.assurance-list li > span > span { color: #555; }

/* 两处下单入口沿用原站的位置和共用跳转逻辑。 */
.order-cta { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; width: 26.998841%; gap: clamp(4px, 1.16cqw, 12px); }
.order-cta--hero { left: 6.025492%; top: 24%; }
.order-cta--footer { left: 57.65%; top: 83.742042%; width: 29.2%; }
.order-button { display: flex; align-items: center; justify-content: flex-end; gap: calc(18 * var(--u)); width: 100%; aspect-ratio: 233 / 59; padding: 0 calc(28 * var(--u)) 0 0; border: 0; border-radius: 999px; background: #ff6900; color: #fff; font-size: calc(25 * var(--u)); font-weight: 650; letter-spacing: calc(1 * var(--u)); cursor: pointer; white-space: nowrap; }
.order-button:hover { background: #f06000; }
.order-button:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.order-arrow { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: #ff6900; background: #fff; border-radius: 50%; }
.order-arrow .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.order-cta--footer .order-button { font-size: calc(28 * var(--u)); }
.order-cta--footer .order-arrow { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.order-hint { display: flex; justify-content: center; align-items: center; gap: .3em; width: 100%; color: #3d3d3d; font-size: clamp(8px, 2.05cqw, 18px); line-height: 1.2; white-space: nowrap; }
.order-hint .icon { width: 1.1em; height: 1.1em; }
.order-hint--footer { color: #fff; font-size: clamp(7px, 1.85cqw, 16px); }

.icp-filing { position: relative; z-index: 2; display: block; margin-top: -20px; padding: 0 16px 14px; color: #999; background: #fff; font-size: 10px; line-height: 1.6; text-align: center; text-decoration: none; }
.safe-bottom { height: env(safe-area-inset-bottom, 0px); background: #fff; }
.wechat-tip { display: none; position: fixed; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 10; padding: 12px 16px; border-radius: 12px; color: #fff; background: #141414e6; font-size: 14px; line-height: 1.5; text-align: center; }

@media (min-width: 864px) {
  body { padding: 24px 0; }
  .page { border-radius: 24px; }
}

@media (max-width: 359px) {
  .order-button { min-height: 22px; }
}