/* =============================================================================
   栖欢生活 - Figma 1:1 复刻
   源文件: figma.com/design/w1yEwtRyWACCPhy3QIh0mh  node 204512:5975
   画板: 1384 x 3412

   >=1384px   完全按 Figma 绝对坐标渲染，像素级还原
   768-1383px 整体等比缩放，版式不变
   <768px     单栏流式布局（移动端适配，非原稿版式）
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; background: #fff; overflow-x: hidden; }

h1, h2, p { margin: 0; font-weight: inherit; }

img { display: block; }

:root {
  /* Source Han Sans SC 的开源同源字体是 Noto Sans SC */
  --f-han:  "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-pf:   "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --f-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --c-title:   #333;
  --c-body:    rgba(0, 0, 0, .5);
  --c-body-sm: #666;
  --c-gold:    #ffb908;
  --c-card:    #f7f7f7;
}

.stage { width: 1384px; margin: 0 auto; }

.page {
  position: relative;
  width: 1384px;
  height: 3412px;
  background: #fff;
}

/* section 不参与定位，子元素直接相对 .page 绝对定位 */
.page section { position: static; }

/* 手机组件（通用） */
.phone { position: absolute; }

.phone .ph-shell,
.phone .ph-screen {
  position: absolute;
  object-fit: cover;
  max-width: none;
}

/* ============================ Section 1 - Hero ============================ */
.s1-logo {
  position: absolute;
  left: 111px; top: 176px;
  width: 173px; height: 173px;
  object-fit: cover;
}

.s1-title {
  position: absolute;
  left: 115px; top: 394px;
  font-family: var(--f-han);
  font-size: 40px; font-weight: 400; line-height: 48px;
  color: #000;
  white-space: nowrap;
}

.s1-desc {
  position: absolute;
  left: 120px; top: 534px; width: 429px;
  font-family: var(--f-han);
  font-size: 22px; font-weight: 400; line-height: 40px;
  letter-spacing: .66px;
  color: var(--c-body);
  text-transform: capitalize;
  word-break: break-word;
}

/* 组 846,176 - 353x707 */
.phone--1 { left: 846px; top: 176px; width: 353px; height: 707px; }
.phone--1 .ph-shell  { left: 0;    top: 0;    width: 353px; height: 707px; border-radius: 70px; }
.phone--1 .ph-screen { left: 22px; top: 18px; width: 310px; height: 670px; border-radius: 30px; }
.phone--1 .ph-badge  {
  position: absolute;
  left: 138px; top: 545px;
  width: 73px; height: 73px;
  object-fit: cover;
}

/* ================= Section 2 - 好家具，连接好生活 ================= */
.s2-title {
  position: absolute;
  left: 120px; top: 1307px;
  font-family: var(--f-han);
  font-size: 32px; font-weight: 900; line-height: 50px;
  letter-spacing: 2.56px;
  color: var(--c-title);
  white-space: nowrap;
  text-transform: capitalize;
}

.s2-desc {
  position: absolute;
  left: 120px; top: 1414px; width: 410px;
  font-family: var(--f-han);
  font-size: 22px; font-weight: 400; line-height: 40px;
  letter-spacing: .66px;
  color: var(--c-body);
  text-transform: capitalize;
  white-space: normal;
  word-break: break-word;
}

/* 组 641,1178 - 258x557 */
.phone--2 { left: 641px; top: 1178px; width: 258px; height: 557px; }
.phone--2 .ph-shell  { left: 1px; top: 0; width: 255px; height: 557px; box-shadow: 0 0 0 8px #000; border-radius: 16px; }
.phone--2 .ph-screen { left: 0;   top: 0; width: 258px; height: 557px; border-radius: 10px; }

/* 组 951,1178 - 257x557 */
.phone--4 { left: 951px; top: 1178px; width: 257px; height: 557px; }
.phone--4 .ph-shell  { left: 0; top: 0; width: 255px; height: 557px; box-shadow: 0 0 0 8px #000; border-radius: 16px; }
.phone--4 .ph-screen { left: 0; top: 0; width: 257px; height: 557px; border-radius: 10px; }

/* ================= Section 3 - 一站式无忧服务 ================= */
.s3-title {
  position: absolute;
  left: 120px; top: 1906px;
  font-family: var(--f-han);
  font-size: 32px; font-weight: 900; line-height: 50px;
  letter-spacing: 2.56px;
  color: var(--c-title);
  white-space: nowrap;
  text-transform: capitalize;
}

.s3-desc {
  position: absolute;
  left: 118px; top: 1978px;
  font-family: var(--f-han);
  font-size: 16px; font-weight: 400; line-height: 32px;
  color: var(--c-body-sm);
  text-transform: uppercase;
  white-space: normal;
}

/* 组 130,2198 - 303x655.294 */
.phone--5 { left: 130px; top: 2198px; width: 303px; height: 655.294px; }
.phone--5 .ph-shell  { left: 0; top: 0; width: 300px; height: 655.294px; box-shadow: 0 0 0 10px #000; border-radius: 18.824px; }
.phone--5 .ph-screen { left: 0; top: 0; width: 303px; height: 655px;     border-radius: 10px; }

/* 组 506,2198 - 300x655.294（充值弹窗） */
.phone--r { left: 506px; top: 2198px; width: 300px; height: 655.294px; }
.phone--r .ph-shell { left: 0; top: 0; width: 300px; height: 655.294px; box-shadow: 0 0 0 10px #000; border-radius: 18.824px; }
.phone--r .ph-scrim {
  position: absolute;
  left: 0; top: 0;
  width: 300px; height: 654px;
  border-radius: 16.653px;
  background: rgba(0, 0, 0, .3);
}

/* 组 878,2195 - 300x655.294 */
.phone--6 { left: 878px; top: 2195px; width: 300px; height: 655.294px; }
.phone--6 .ph-shell  { left: 0; top: 0; width: 300px; height: 655.294px; box-shadow: 0 0 0 10px #000; border-radius: 18.824px; }
.phone--6 .ph-screen { left: 0; top: 0; width: 300px; height: 648px;     border-radius: 10px; }

/* Vector 415 - 4x7.5 白色箭头，描边溢出外框 */
.s3-vector {
  position: absolute;
  left: 183.037px; top: 3162.248px;
  width: 6.17px; height: 8.96px;
}

/* ========== 充值弹窗 - 相对 .phone--r 偏移 (0,268)，尺寸 300x387 ========== */
.recharge {
  position: absolute;
  left: 0; top: 268px;
  width: 300px; height: 387px;
  background: #fff;
  border-radius: 19.6491px 19.6491px 12px 12px;
}

.rc-title {
  position: absolute;
  left: 134.895px; top: 21.158px;
  font-family: var(--f-sans);
  font-size: 14.737px; font-weight: 900; line-height: 19px;
  letter-spacing: -.2729px;
  color: #000;
  white-space: nowrap;
}

.rc-grid {
  position: absolute;
  left: 18.637px; top: 58px;
  width: 268.538px; height: 239.064px;
  display: flex;
  flex-direction: column;
  gap: 6.55px;
}

.rc-row {
  display: flex;
  align-items: center;
  gap: 6.55px;
  width: 100%;
}

.coin-card {
  position: relative;
  flex: 0 0 auto;
  width: 85.146px; height: 116.257px;
  background: var(--c-card);
  border-radius: 9.825px;
}

.coin-card.is-active { border: 1.637px solid var(--c-gold); }

/* 金币：28x28 裁剪框（原稿中是 #D9D9D9 实心矩形 mask，等价于 clip） */
.coin { position: absolute; width: 28px; height: 28px; overflow: hidden; }

.coin img { position: absolute; object-fit: cover; max-width: none; }

.coin-l1 { left: -9.655px; top: -3.862px; width: 46.828px; height: 35.241px; }
.coin-l2 { left:  1.473px; top:  0;       width: 25.053px; height: 26.526px; }
.coin-l3 { left: -9.655px; top: -3.862px; width: 46.828px; height: 35.241px; }
.coin-l4 { left:  1.273px; top:  1.274px; width: 25.455px; height: 25.455px; }
.coin-l5 { left:  1.398px; top:  1.400px; width: 26px;     height: 26px;     }

.coin-amt {
  position: absolute;
  font-family: var(--f-sans);
  font-size: 15.556px; font-weight: 600; line-height: 20px;
  letter-spacing: -.2729px;
  color: #000;
  white-space: nowrap;
}

/* 1000 在原稿中是思源黑体 Bold 13.099px，与其余五张不同 */
.coin-amt--cn {
  font-family: var(--f-han);
  font-size: 13.099px; font-weight: 700; line-height: 19px;
}

.coin-pill {
  position: absolute;
  width: 55.672px; height: 22.924px;
  background: #fff;
  border-radius: 32.748px;
}

.coin-pill span {
  position: absolute;
  font-family: var(--f-sans);
  font-size: 11.462px; font-weight: 700; line-height: 14px;
  letter-spacing: -.2729px;
  color: #000;
  white-space: nowrap;
}

/* 六张卡的逐项微差（原稿中各不相同，逐个还原） */
.rc-row:nth-child(1) .coin-card:nth-child(1) .coin      { left: 26.525px; top: 15.061px; }
.rc-row:nth-child(1) .coin-card:nth-child(1) .coin-amt  { left: 24.562px; top: 53.626px; }
.rc-row:nth-child(1) .coin-card:nth-child(1) .coin-pill { left: 11.462px; top: 81.462px; }
.rc-row:nth-child(1) .coin-card:nth-child(1) .coin-pill span { left: 18.828px; top: 3.275px; }

.rc-row:nth-child(1) .coin-card:nth-child(2) .coin      { left: 26.830px; top: 15.061px; }
.rc-row:nth-child(1) .coin-card:nth-child(2) .coin-amt  { left: 27.018px; top: 52.807px; }
.rc-row:nth-child(1) .coin-card:nth-child(2) .coin-pill { left: 14.738px; top: 81.257px; }
.rc-row:nth-child(1) .coin-card:nth-child(2) .coin-pill span { left: 18.829px; top: 3.479px; }

.rc-row:nth-child(1) .coin-card:nth-child(3) .coin      { left: 26.133px; top: 15.062px; }
.rc-row:nth-child(1) .coin-card:nth-child(3) .coin-amt  { left: 27.016px; top: 52.807px; }
.rc-row:nth-child(1) .coin-card:nth-child(3) .coin-pill { left: 14.736px; top: 81.871px; }
.rc-row:nth-child(1) .coin-card:nth-child(3) .coin-pill span { left: 18.829px; top: 3.684px; }

.rc-row:nth-child(2) .coin-card:nth-child(1) .coin      { left: 26.525px; top: 15.255px; }
.rc-row:nth-child(2) .coin-card:nth-child(1) .coin-amt  { left: 22.926px; top: 54.854px; }
.rc-row:nth-child(2) .coin-card:nth-child(1) .coin-pill { left: 14.738px; top: 81.257px; }
.rc-row:nth-child(2) .coin-card:nth-child(1) .coin-pill span { left: 16.373px; top: 3.479px; }

.rc-row:nth-child(2) .coin-card:nth-child(2) .coin      { left: 26.830px; top: 15.255px; }
.rc-row:nth-child(2) .coin-card:nth-child(2) .coin-amt  { left: 22.923px; top: 54.854px; }
.rc-row:nth-child(2) .coin-card:nth-child(2) .coin-pill { left: 14.738px; top: 82.690px; }
.rc-row:nth-child(2) .coin-card:nth-child(2) .coin-pill span { left: 16.374px; top: 3.684px; }

.rc-row:nth-child(2) .coin-card:nth-child(3) .coin      { left: 26.133px; top: 15.255px; }
.rc-row:nth-child(2) .coin-card:nth-child(3) .coin-amt  { left: 22.924px; top: 52.807px; }
.rc-row:nth-child(2) .coin-card:nth-child(3) .coin-pill { left: 14.736px; top: 82.690px; }
.rc-row:nth-child(2) .coin-card:nth-child(3) .coin-pill span { left: 16.374px; top: 3.684px; }

/* 支付按钮 */
.rc-pay {
  position: absolute;
  left: 17.572px; top: 322.595px;
  width: 264.312px; height: 39.896px;
  display: flex;
  align-items: flex-start;
  gap: 11.636px;
}

.pay-btn {
  position: relative;
  flex: 0 0 auto;
  width: 126.338px; height: 39.896px;
  background: #000;
  border-radius: 24.935px;
}

.pay-ico { position: absolute; width: 16.623px; height: 16.623px; }

.pay-txt {
  position: absolute;
  font-family: var(--f-pf);
  font-size: 11.636px; font-weight: 600; line-height: 16px;
  letter-spacing: -.2771px;
  color: #fff;
  white-space: nowrap;
}

.pay-btn--alipay .pay-ico { left: 24.104px; top: 10.805px; }
.pay-btn--alipay .pay-txt { left: 45.713px; top: 11.636px; }

.pay-btn--wechat .pay-ico { left: 29.921px; top: 11.636px; }
.pay-btn--wechat .pay-txt { left: 51.530px; top: 11.636px; }

/* 保留行首空格与手动断行，但由 p 承载，避免容器空白节点产生空行 */
.s2-desc p { white-space: pre-wrap; }
.s3-desc p { white-space: pre; }

/* ============ 768-1383px 整体等比缩放，版式不变 ============ */
@media (max-width: 1383px) { .stage { zoom: .97; } }
@media (max-width: 1290px) { .stage { zoom: .90; } }
@media (max-width: 1200px) { .stage { zoom: .84; } }
@media (max-width: 1120px) { .stage { zoom: .78; } }
@media (max-width: 1040px) { .stage { zoom: .72; } }
@media (max-width:  960px) { .stage { zoom: .66; } }
@media (max-width:  880px) { .stage { zoom: .61; } }
@media (max-width:  800px) { .stage { zoom: .55; } }

/* ============ <768px 单栏流式布局（移动端适配，非原稿版式） ============ */
@media (max-width: 767px) {

  .stage { zoom: 1; width: 100%; }

  .page {
    width: 100%;
    height: auto;
    padding: 56px 24px 80px;
  }

  .page section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .s1, .s2 { margin-bottom: 88px; }

  .s1-logo, .s1-title, .s1-desc,
  .s2-title, .s2-desc,
  .s3-title, .s3-desc {
    position: static;
    left: auto;
    top: auto;
  }

  /* 必须 relative：.phone 内的 shell/screen/弹窗都相对它绝对定位 */
  .phone { position: relative; left: auto; top: auto; flex: 0 0 auto; }

  .s1-logo  { width: 96px; height: 96px; align-self: flex-start; }
  .s1-title { font-size: 30px; line-height: 40px; align-self: flex-start; }

  .s2-title,
  .s3-title {
    font-size: 22px; line-height: 34px; letter-spacing: 1.4px;
    align-self: flex-start;
    white-space: normal;
  }

  .s1-desc, .s2-desc { width: 100%; font-size: 16px; line-height: 30px; letter-spacing: .4px; }
  .s3-desc { width: 100%; }
  .s3-desc p { white-space: normal; }

  /* 手机整体等比缩放，最宽一台 353px */
  .phone { zoom: .9; margin: 0 auto; }

  .s3-vector { display: none; }
}

@media (max-width: 400px) { .phone { zoom: .8; } }
@media (max-width: 360px) { .phone { zoom: .72; } }