/* =============================================================================
   微向（liulimone.top / 深圳市东琉璃科技有限公司）—— 付费壁纸工具
   源文件: figma.com/design/ZIwr6Y0MwQnpDlKREPz9Eq  node 205330:6358「微向工具包备案」
   画板: 1446 x 3645，底色 #f8fbfe

   >=1466px   完全按 Figma 绝对坐标渲染
   768-1465px 整体等比缩放（zoom），版式不变
   <768px     单栏流式布局（移动端适配，非原稿版式）

   · 不引 Google Fonts（展示机在国内）；原稿字体 Inter 对中文无字形，这里直接走系统 CJK 栈。
   · 正文是「固定宽度 + 左对齐」文本框，left/top/width 照抄节点框，折行由 width 决定。
   · 导航「首页」不要照抄导出的 #d9d9d9（浅底上看不见），取 #151515。
   · 截图 .ph-* 的 width/height 是原稿显示框（1×），位图约 2×；素材用 WebP（展示机只有 2M 带宽）。
   ========================================================================== */

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

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

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

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

img { display: block; }

a { color: inherit; text-decoration: none; }

:root {
  --f-han: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB",
           "Microsoft YaHei", sans-serif;

  --c-bg:      #f8fbfe;
  --c-ink:     #000;
  --c-nav-cur: #151515;
  --c-nav-ink: #282626;
  --c-cta-bg:  #10100e;
  --c-cta-ink: #fdf0e6;
}

.canvas { background: var(--c-bg); }

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

.page {
  position: relative;
  width: 1446px;
  height: 3645px;
}

.page section, .phs { position: static; }

/* ============================== 顶部导航 ============================== */
.nav {
  position: absolute;
  left: 0; top: 0;
  width: 1446px; height: 220px;
}

.nav-mark {
  position: absolute;
  left: 47px; top: 33px;
  width: 153px; height: 149px;
  border-radius: 30px;
}

.nav-word {
  position: absolute;
  left: 279px; top: 92px;
  font-family: var(--f-han);
  font-size: 64px; font-weight: 400; line-height: 77px;
  color: #333;
  white-space: nowrap;
}

/* 原稿 frame 617,72 h110：gap 60 的 flex，导航项 y = frame y + 38.5，下载键 y = frame y + 27 */
.nav-links {
  position: absolute;
  left: 617px; top: 110.5px;
  height: 33px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.nav-links a {
  font-family: var(--f-han);
  font-size: 22px; font-weight: 700; line-height: 33px;
  letter-spacing: 0.66px;
  color: var(--c-nav-ink);
  white-space: nowrap;
  transition: opacity .2s;
}

.nav-links a.is-current { color: var(--c-nav-cur); }

.nav-links a:hover { opacity: .6; }

.nav-cta {
  position: absolute;
  left: 872px; top: 99px;
  width: 120px; height: 56px;
  border-radius: 40px;
  background: var(--c-cta-bg);
  color: var(--c-cta-ink);
  font-family: var(--f-han);
  font-size: 20px; font-weight: 700; line-height: 56px;
  text-align: center;
  transition: opacity .2s;
}

.nav-cta:hover { opacity: .85; }

/* ============================== 文本 ============================== */
.txt {
  position: absolute;
  color: var(--c-ink);
  font-family: var(--f-han);
  font-size: 32px; font-weight: 400; line-height: 39px;
  letter-spacing: 0.96px;
}

.t1 { left: 765px; top: 737px;  width: 582px; } /* 原稿带前导空格，但 Figma 墨迹左缘(766.3)与另三段同为节点 x+1，空格未占位，故不加 indent */
.t2 { left: 124px; top: 1588px; width: 650px; }
.t3 { left: 774px; top: 2333px; width: 650px; }
.t4 { left: 124px; top: 3002px; width: 704px; }

/* ============================ App 截图 ============================ */
.ph { position: absolute; }

/* 原稿首图外框 480.56×851.32，内图 478.46×850.14 旋转 0.14° 居中 */
.ph-tilt {
  position: absolute;
  left: 77px; top: 283px;
  width: 480.561px; height: 851.32px;
  display: flex; align-items: center; justify-content: center;
}

.ph-tilt .ph-home {
  position: static;
  width: 478.456px; height: 850.137px;
  transform: rotate(0.14deg);
}

.ph-guide { left: 816px; top: 1094px; width: 479px; height: 851px; }
.ph-topup { left: 77px;  top: 1870px; width: 480px; height: 853px; }
.ph-mine  { left: 854px; top: 2723px; width: 441px; height: 784px; }

/* ======================= 中屏：整体等比缩放 ======================= */
/* zoom 按每档最窄视口算：(下界 − 20px 滚动条余量) ÷ 1446；第一档上界 = 画板宽 + 19。 */
@media (max-width: 1465px) { .stage { zoom: 0.871; } }
@media (max-width: 1279px) { .stage { zoom: 0.746; } }
@media (max-width: 1099px) { .stage { zoom: 0.608; } }
@media (max-width: 899px)  { .stage { zoom: 0.517; } }

/* ========================= 窄屏：单栏流式 ========================= */
@media (max-width: 767px) {
  .stage { zoom: 1; width: 100%; }

  .page {
    width: 100%;
    height: auto;
    padding: 96px 20px 48px;
  }

  .nav { width: 100%; height: 72px; }

  .nav-mark { left: 14px; top: 12px; width: 49px; height: 48px; border-radius: 10px; }

  .nav-word {
    left: 75px; top: 12px;
    font-size: 26px; line-height: 48px;
  }

  .nav-links { display: none; }

  .nav-cta {
    left: auto; right: 14px; top: 17px;
    width: 88px; height: 38px;
    font-size: 15px; line-height: 38px;
  }

  .page section { display: block; margin-bottom: 44px; }

  .txt, .ph, .ph-tilt { position: static; }

  .txt {
    width: auto;
    font-size: 16px; line-height: 1.7;
    letter-spacing: 0;
    text-align: center;
    text-indent: 0;
  }

  .phs { display: flex; justify-content: center; margin-top: 20px; }

  .ph-tilt { width: auto; height: auto; display: block; }

  .ph, .ph-tilt .ph-home {
    width: 100%; max-width: 260px; height: auto;
    border-radius: 8px;
    transform: none;
  }
}

/* ================================ 页脚 ================================ */
.site-footer {
  background: #000;
  color: rgba(255, 255, 255, .72);
  font-family: var(--f-han);
  padding: 40px 24px;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.9;
}

.site-footer__corp { color: #fff; font-size: 16px; font-weight: 700; }

.site-footer__addr,
.site-footer__contact { font-size: 13px; }

.site-footer__icp { margin-top: 8px; font-size: 13px; }

.site-footer__icp a { color: rgba(255, 255, 255, .72); transition: color .2s; }

.site-footer__icp a:hover { color: #fff; }

@media (max-width: 767px) {
  .site-footer { padding: 28px 16px; }
  .site-footer__corp { font-size: 15px; }
  .site-footer__addr,
  .site-footer__contact,
  .site-footer__icp { font-size: 12px; }
}