/* =============================================================================
   忆念（深圳市悟创楠科技有限公司）- Figma 1:1 复刻
   源文件: figma.com/design/HFv1kNJqoI4KPkLQIVx4Ip  node 205057:6449「Frame 忆念」
   画板: 1380 x 3877，底色 #fae7f8

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

   注意：不引 Google Fonts —— 展示机在国内，fonts.googleapis.com 会被墙掉
   导致首屏阻塞。正文一律走系统 CJK 字体栈。

   原稿正文/标题标的是 Inter Regular（西文字体，中文由 Figma 回落到系统 CJK），
   导航项标的是 Source Han Sans CN Bold —— 这里对应 400 / 700 两档。

   🔴 导航「首页」的颜色不要照抄 Figma 导出的 #d9d9d9 —— 那个值在 #fae7f8 底上
      几乎看不见。1:1 原稿渲染图里量到的实际墨色是 rgb(21,21,21)，
      另两项 #282626（与 lianwen-www / jiaochun / shuyun 各站同一处理）。

   🔴 行高不是 line-height:1.2 —— 本稿实测比 1.2 还紧：
      36px 档行距 33px（≈0.917）、24px 档行距 29px（≈1.208）。**两档不同，别互相套。**
      判据：1:1 原稿渲染图里逐行量墨迹带的 top 差（36px 组 4 个标题全 33，
      24px 组 4 段正文全 28~29）。行盒比字形还矮，所以 top 必须按下面公式补，
      不能照抄 Figma 节点的 y。

   🔴 top 的算法（所有档位统一，实测误差 ≤0.8px）：
      top = 墨迹顶 − (fontBoundingBoxAscent − line-height/2)
      系统 CJK 字体（Microsoft YaHei）的 fontBoundingBox：
        fs=24 → asc 28 / desc 7   fs=36 → asc 42 / desc 10
      代入即 24px 档 = 墨迹顶 + 2.5、36px 档 = 墨迹顶 + 25.5。
      下面的值就是拿 1:1 原稿渲染图量出的墨迹顶算的，括号里标原稿 y。

   🔴 正文一律不用 <br> 硬换行：换行点由「width + CJK 禁则」算出，与原稿逐行一致
      （txt-1 28/18、txt-2 23/23、txt-3 24/25/6、txt-4 24/24/3）。**改 width 换行点就跑。**
      原稿的 letter-spacing 是 0（Figma 没给 tracking），**不要**从 jiaoji/jiaochun
      顺手带 1.2px 过来，带了换行点全变。
   ========================================================================== */

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

/* html 也要 overflow-x:hidden —— 只给 body 设，缩放档位有零头时
   documentElement 仍会横向溢出 */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body { margin: 0; background: #fae7f8; 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:      #fae7f8;   /* 画板底色（纯粉，不是渐变） */
  --c-ink:     #000;
  --c-nav-cur: #151515;   /* 导航当前项「首页」（实测墨色，非导出的 #d9d9d9） */
  --c-nav-ink: #282626;   /* 导航其余项 */
  --c-cta-bg:  #10100e;   /* 「下载」胶囊按钮 */
  --c-cta-ink: #fdf0e6;
}

/* 底色铺满整个视口宽度，.stage 两侧留白不会露边 */
.canvas { background: var(--c-bg); }

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

.page {
  position: relative;
  width: 1380px;
  height: 3877px;
}

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

/* ============================== 顶部导航 ============================== */
/* 容器铺满画板宽，子元素直接用画板绝对坐标（原稿里 logo 是画板的直接子节点，
   只有三个导航项 + 下载按钮在 frame 205091:6407 里） */
.nav {
  position: absolute;
  left: 0; top: 0;
  width: 1380px; height: 180px;
}

.nav-mark {
  position: absolute;
  left: 43px; top: 48px;
  width: 129px; height: 130px;
}

/* 三个导航项 + 下载按钮是一条 gap:60 的 flex（原稿 frame 205091:6407，
   x=416 y=67 w=579 h=92，items-center），算出来的绝对位置正好是
   416 / 521 / 671 / 821 */
.nav-links {
  position: absolute;
  left: 416px; top: 96.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: 821px; top: 85px;
  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;
  letter-spacing: 0.6px;
  text-align: center;
  transition: opacity .2s;
}

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

/* ============================== 标题 ============================== */
.tt {
  position: absolute;
  color: var(--c-ink);
  font-family: var(--f-han);
  font-size: 36px; font-weight: 400; line-height: 33px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* top = 墨迹顶 + 25.5（36px 档，见文件头公式），括号里是原稿 y */
.tt-1 { left: 200px; top: 563px; }   /* 原稿 y=557；渲染图墨迹顶 561，36px 档偏移 +2 */
.tt-2 { left: 602px; top: 1505px; }   /* 原稿 y=1502；墨迹顶 1503.4 + 2 */
.tt-3 { left: 125px; top: 2350px; }   /* 原稿 y=2348；墨迹顶 2347.7 + 2 */
.tt-4 { left: 653px; top: 3169px; }   /* 原稿 y=3168；墨迹顶 3166.7 + 2 */

/* ============================== 正文 ============================== */
.txt {
  position: absolute;
  color: var(--c-ink);
  font-family: var(--f-han);
  font-size: 24px; font-weight: 400; line-height: 29px;
  letter-spacing: 0;
}

/* width 决定换行点，别动（见文件头说明）。
   top = 墨迹顶 + 2.5（24px 档），括号里是原稿 y。 */
.txt-1 { left: 149px; top: 810px; width: 686px; }   /* 原稿 y=802；墨迹顶 805 + 5；28 / 18 字 */
.txt-2 { left: 602px; top: 1691px; width: 571px; }   /* 原稿 y=1684；墨迹顶 1685.7 + 5；23 / 23 字 */
.txt-3 { left: 130px; top: 2572px; width: 613px; }   /* 原稿 y=2567；墨迹顶 2566.5 + 5；24 / 25 / 6 字 */
.txt-4 { left: 645px; top: 3385px; width: 592px; }   /* 原稿 y=3382；墨迹顶 3379.9 + 5；24 / 24 / 3 字 */

/* ============================ App 截图 ============================ */
/* 尺寸 = 原稿显示框 ×2（素材按 2× 导出，retina 下不糊） */
.ph { position: absolute; }

.ph-home  { left: 901px; top:  491px; width: 740px; height: 1336px; }
.ph-feed  { left:  84px; top: 1363px; width: 710px; height: 1284px; }
.ph-topup { left: 941px; top: 2260px; width: 680px; height: 1228px; }
.ph-mine  { left: 130px; top: 3145px; width: 662px; height: 1196px; }

/* ======================= 中屏：整体等比缩放 ======================= */
/* zoom 而非 transform:scale —— zoom 会带动布局高度，页面不会留白。
   每档的 zoom 按该区间**最窄**的视口算：(下界 − 20px 滚动条余量) ÷ 1380，
   否则档内最窄那几像素会横向溢出。
   第一档上界 1399 = 画板 1380 + 19px 滚动条余量：媒体查询比的是视口宽（含滚动条），
   而能不能放下画板取决于内容区宽，视口正好 1380 时内容区只剩 1365。 */
@media (max-width: 1399px) { .stage { zoom: .93; } }
@media (max-width: 1300px) { .stage { zoom: .87; } }
@media (max-width: 1200px) { .stage { zoom: .80; } }
@media (max-width: 1100px) { .stage { zoom: .74; } }
@media (max-width: 1000px) { .stage { zoom: .67; } }
@media (max-width:  900px) { .stage { zoom: .60; } }
@media (max-width:  820px) { .stage { zoom: .55; } }

/* ========================= 窄屏：单栏流式 ========================= */
/* 原稿是 1380 宽的桌面画板，手机上按 DOM 顺序重排，不再还原绝对坐标 */
@media (max-width: 767px) {
  .stage { zoom: 1; width: 100%; }

  .page {
    width: 100%;
    height: auto;
    padding: 96px 20px 48px;   /* 顶部留给绝对定位的 .nav（72px）+ 24px 呼吸 */
  }

  /* 导航压成固定高度的普通栏；窄屏放不下三个导航项，收起，只留下载按钮
     （联系方式在页脚，「关于我们」的内容本身就在下面） */
  .nav { left: 0; top: 0; width: 100%; height: 72px; }

  .nav-mark { left: 14px; top: 12px; width: 50px; height: 50px; }

  .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;
  }

  .tt, .txt, .ph {
    position: static;
    white-space: normal;
    width: auto;
  }

  .tt {
    font-size: 24px; line-height: 1.5; letter-spacing: .3px;
    margin-bottom: 10px;
  }

  .txt {
    font-size: 15px; line-height: 1.7; letter-spacing: .3px;
  }

  .ph {
    width: 100%; max-width: 240px; height: auto;
    margin: 20px auto 0;
    border-radius: 8px;
  }
}

/* ================================ 页脚 ================================ */
.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__sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, .35);
}

.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; }
  /* 窄屏把「手机号 | 邮箱」拆成两行，竖线隐藏。
     🔴 隐藏那条必须写成 `.site-footer__contact .site-footer__sep`：
        单写 `.site-footer__sep`（0,1,0）打不过上一行的 `.site-footer__contact span`（0,1,1），
        竖线会变成 block 单占一行。 */
  .site-footer__contact span { display: block; }
  .site-footer__contact .site-footer__sep { display: none; }
}