/* =============================================================================
   椿水（fansy88.cn / 深圳梵时语科技有限公司）—— 婚庆服务展示向
   源文件: figma.com/design/XLnne24emhqQGXSMXHecGj  node 2:6「椿水婚庆备案用」
   画板: 1078 x 2448，底色 #fbf2fb

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

   · 不引 Google Fonts（展示机在国内）；原稿字体 Inter 对中文无字形，这里直接走系统 CJK 栈。
   · 所有文本在原稿里都是单行 nowrap、左对齐，left/top 即 Figma 节点坐标；
     line-height 取原稿文本框高（20→24 / 24→29 / 32→39），让字形落在同一个行盒中线上。
   · 导航「首页」不要照抄导出的 #d9d9d9（浅底上看不见），原稿渲染墨色是 #151515。
   · 截图 .ph-* 的 width/height 是**原稿显示框（1×）**，位图是它的 2 倍 —— 别照 naturalWidth 填。
   ========================================================================== */

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

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

body { margin: 0; background: #fbf2fb; 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:      #fbf2fb;
  --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: 1078px; margin: 0 auto; }

.page {
  position: relative;
  width: 1078px;
  height: 2448px;
}

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

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

.nav-mark {
  position: absolute;
  left: 16px; top: 29px;
  width: 124px; height: 110px;
}

.nav-word {
  position: absolute;
  left: 176px; top: 73px;
  font-family: var(--f-han);
  font-size: 32px; font-weight: 400; line-height: 39px;
  color: #000;
  white-space: nowrap;
}

/* 原稿 frame 380,38：gap 60 的 flex，导航项 y = frame y + 29.5，下载键 y = frame y + 18 */
.nav-links {
  position: absolute;
  left: 380px; top: 67.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: 785px; top: 56px;
  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-weight: 400;
  white-space: nowrap;
}

.t1   { left: 192px; top: 278px; font-size: 24px; line-height: 29px; } /* 原稿 192,278 24px */
.t2   { left: 77px; top: 455px; font-size: 20px; line-height: 24px; } /* 原稿 77,455 20px */
.t3   { left: 573px; top: 770px; font-size: 24px; line-height: 29px; } /* 原稿 573,770 24px */
.t4   { left: 459px; top: 896px; font-size: 20px; line-height: 24px; } /* 原稿 459,896 20px */
.t5   { left: 153px; top: 1224px; font-size: 24px; line-height: 29px; } /* 原稿 153,1224 24px */
.t6   { left: 68px; top: 1350px; font-size: 20px; line-height: 24px; } /* 原稿 68,1350 20px */
.t7   { left: 521px; top: 1817px; font-size: 24px; line-height: 29px; } /* 原稿 521,1817 24px */
.t8   { left: 413px; top: 1959px; font-size: 20px; line-height: 24px; } /* 原稿 413,1959 20px */

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

.ph-home    { left: 716px; top: 257px; width: 217px; height: 386px; }
.ph-insp    { left: 138px; top: 691px; width: 230px; height: 409px; }
.ph-consult { left: 716px; top: 1125px; width: 258px; height: 458px; }
.ph-mine    { left: 118px; top: 1742px; width: 244px; height: 434px; }

/* ======================= 中屏：整体等比缩放 ======================= */
/* zoom 按每档最窄视口算：(下界 − 20px 滚动条余量) ÷ 1078；第一档上界 = 画板宽 + 19。 */
@media (max-width: 1097px) { .stage { zoom: 0.909; } }
@media (max-width: 1000px) { .stage { zoom: 0.816; } }
@media (max-width: 900px) { .stage { zoom: 0.724; } }
@media (max-width: 800px) { .stage { zoom: 0.694; } }

/* ========================= 窄屏：单栏流式 ========================= */
@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: 54px; height: 48px; }

  .nav-word {
    left: 80px; 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 { position: static; }

  .txt {
    white-space: normal;
    font-size: 15px; line-height: 1.7;
    text-align: center;
    text-indent: 0;
  }

  .txt:first-child { font-size: 21px; line-height: 1.5; margin-bottom: 8px; }

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

  .ph { width: 100%; max-width: 220px; height: auto; border-radius: 8px; }
  .phs .ph:only-child { max-width: 240px; }
  .phs .ph:not(:only-child) { width: calc(50% - 6px); }
}

/* ================================ 页脚 ================================ */
/* 四站逐字节相同，改一处要四处一起改 */
.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 span { display: block; }
  .site-footer__contact .site-footer__sep { display: none; }
}