/* ============================================================================
   艳姐曼姿 App 官网 —— 单文件站点样式
   设计依据: docs/D/D-02-App官网设计方案.md §四（视觉系统 / 优雅编辑风）
   红线: 零第三方依赖 · 禁止全属性过渡（transition all） · 动画仅动 transform/opacity
         · 禁止页面级横向溢出 · 无 emoji 图标 · 无占位图
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 自托管子集化字体（文件由字体任务产出，文件名固定，不可更改）
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Noto Serif SC";
  src: url("../fonts/noto-serif-sc-400-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("../fonts/noto-serif-sc-600-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. 设计令牌
   注意: --accent 与白底对比度仅 3.37:1，仅可用于 ≥24px 的字或非文字元素；
        正文级橙色一律使用 --accent-ink（对比纯白 #FFFFFF 约 5.56:1，
        对比纸底 #FBF8F3 约 5.37:1，两基准均满足正文 ≥4.5:1）。
   --------------------------------------------------------------------------- */
:root {
  --ink: #2B2523;             /* 暖调近黑：标题 / 正文 */
  --ink-2: #6B625C;           /* 次级正文 */
  --paper: #FBF8F3;           /* 页面底（暖白） */
  --paper-2: #F3EDE5;         /* 区块交替底色 */
  --accent: #F15A24;          /* 品牌橙：仅大字 / 非文字 */
  --accent-ink: #B83C0E;      /* 加深橙：正文级橙字 / 橙底白字 */
  --accent-soft: #FDF0EA;     /* 标签底 / 卡片高亮 */
  --rule: rgba(43, 37, 35, .12);   /* 细分割线 */

  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-sans: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-gap: clamp(72px, 9vw, 140px);
  --gap-col: clamp(16px, 2vw, 24px);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --screen: #FFFDF9;          /* 卡片底（暖白，非纯白） */
}

/* ---------------------------------------------------------------------------
   3. 基础重置
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--paper);
}

body {
  margin: 0;
  overflow-x: hidden;                 /* 兜底：禁止页面级横向溢出 */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* 极轻纸纹：内联 SVG feTurbulence data-URI（CSP img-src 'self' data: 内联，不引外域）
   置于 body 内容之下，仅作质感，不参与交互 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

h1, h2, h3, p, figure, dl, dd, dt { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 首屏纸幕：纯 CSS 一次性上移，仅动 transform，不阻塞文本与交互 */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  pointer-events: none;
  transform: translateY(0);
  animation: curtain-lift .45s cubic-bezier(.4, 0, .2, 1) .06s forwards;
}
@keyframes curtain-lift {
  to { transform: translateY(-101%); }
}

/* ---------------------------------------------------------------------------
   4. 布局原语
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * .72); }
.section--loose { padding-block: calc(var(--section-gap) * 1.12); }

/* ---------------------------------------------------------------------------
   5. 排版
   --------------------------------------------------------------------------- */
.display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(38px, 7vw, 84px);
  line-height: 1.14;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--accent); }

/* 首屏标题逐字上浮：仅动 transform/opacity
   ⚠️ 禁止用内联 style 传 --i：线上 CSP 为 style-src 'self'（无 unsafe-inline），
      内联 style 属性会被浏览器拦截 —— 2026-09-27 生产实测产生 13 条 CSP console error。
      改用 .hero__seg 内的 nth-child 逐字延迟（单段最多 5 字）。
   .hero__seg 同时保证断行只发生在语义分段之间（「把坚持」「交给」不被拆开） */
.hero__chars { display: inline; }
.hero__seg { display: inline-block; white-space: nowrap; }
.hero__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em);
  animation: char-rise .72s cubic-bezier(.22, .68, .24, 1) forwards;
}
.hero__seg > .hero__char:nth-child(1) { animation-delay: .18s; }
.hero__seg > .hero__char:nth-child(2) { animation-delay: .22s; }
.hero__seg > .hero__char:nth-child(3) { animation-delay: .26s; }
.hero__seg > .hero__char:nth-child(4) { animation-delay: .30s; }
.hero__seg > .hero__char:nth-child(5) { animation-delay: .34s; }
.hero__char--accent { font-style: italic; color: var(--accent); }
.hero__char--punct { margin-right: -.28em; }
@keyframes char-rise {
  to { opacity: 1; transform: translateY(0); }
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.h3 {
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
}
.lead { color: var(--ink-2); max-width: 46ch; }

.meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   6. 按钮（统一五态：默认 / hover / active / 加载 / 禁用）
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .7em 1.7em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease,
              transform .2s ease, opacity .2s ease;
}
.btn--primary {
  background: var(--accent-ink);
  color: #fff;
}
.btn--primary:hover { background: #9E330B; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--accent-ink);
}
.btn--ghost:hover { background: var(--accent-soft); transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(0); }
.btn--sm { min-height: 44px; padding: .55em 1.2em; font-size: 14px; }
.btn[disabled],
.btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   7. 顶栏
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 243, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
/* logo 为 480×257 宽幅字标（比例 ≈ 1.868:1），按原始宽高比显示，禁止压扁 */
.brand img { height: 40px; width: auto; }
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-left: auto;
}
.nav a {
  font-size: 15px;
  color: var(--ink-2);
  padding-block: 10px;
  transition: color .18s ease;
}
.nav a:hover { color: var(--accent-ink); }

/* ---------------------------------------------------------------------------
   8. 首屏
   --------------------------------------------------------------------------- */
.hero { padding-top: clamp(44px, 6vw, 96px); padding-bottom: var(--section-gap); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-col);
  row-gap: 40px;
}
.hero__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.hero__eyebrow { margin-bottom: 0; }
.hero__copy { grid-column: 1 / 8; min-width: 0; }
.hero__visual { grid-column: 8 / 13; align-self: center; min-width: 0; }

.hero__title {
  font-size: clamp(38px, 5.2vw, 76px);
  margin-bottom: 22px;
}
.hero__sub { font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-2); max-width: 38ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 36px;
}
.hero__action { display: flex; flex-direction: column; gap: 8px; }
.hero__hint { font-size: 13px; color: var(--ink-2); }
.hero__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent-ink);
  max-width: 30ch;
}
.hero__meta {
  margin-top: 26px;
  color: var(--ink-2);
  line-height: 1.9;
}

/* 主视觉：900×1125（4:5 竖版）按原始比例自适应，禁止拉伸变形 */
.hero__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* 二维码面板：与主视觉图同宽、同左边界，构成规整的下挂面板（不再是游离的小图） */
.hero__qr {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  width: 100%;
  margin-top: 16px;
  padding: clamp(14px, 1.6vw, 18px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.hero__qr-code { width: 112px; height: 112px; flex: none; }
.hero__qr-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero__qr-label { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.hero__qr-url {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink);
}

/* 手绘感曲线母题（全站唯一重复图形，三处变体） */
.curve { color: var(--accent); width: 100%; height: auto; }
.curve--hero { max-width: 180px; margin-top: 32px; }

/* ---------------------------------------------------------------------------
   9. 区块标题
   --------------------------------------------------------------------------- */
.section__head { max-width: 58ch; margin-bottom: clamp(40px, 5vw, 72px); }
.section__head .lead { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   10. 工具入口
   --------------------------------------------------------------------------- */
.tools__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-col);
  row-gap: 28px;
  align-items: start;
}
.tools__body { grid-column: 1 / 7; min-width: 0; }
.tools__card { grid-column: 8 / 13; }
.tools__card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--screen);
}
.tools__card p { color: var(--ink-2); }
.tools__notice {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
}
.tools__card .btn { margin-top: 24px; }

/* ---------------------------------------------------------------------------
   11. 版本与更新
   --------------------------------------------------------------------------- */
.release__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-col);
  row-gap: 32px;
}
.release__info { grid-column: 1 / 8; min-width: 0; }
.release__notes { grid-column: 8 / 13; min-width: 0; }
.release__info > p { color: var(--ink-2); max-width: 44ch; }
.release__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.release__meta dt { margin-bottom: 6px; color: var(--accent-ink); }
.release__meta dd {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ink);
}
.release__notes {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.release__notes h3 { margin-bottom: 14px; }
.release__notes-body { color: var(--ink-2); white-space: pre-line; }
/* 版本区块状态行：接口 empty / error 时的降级文案载体；ok 时整行隐藏 */
.release__status {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   12. 页脚
   --------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--section-gap);
  padding-block: clamp(48px, 6vw, 80px) 40px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-col);
  row-gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.footer__brand { grid-column: 1 / 7; }
.footer__links { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 4px; }
.footer__brand .brand { margin-bottom: 12px; }
.footer__brand .brand img { height: 52px; }
.footer__tagline { color: var(--ink-2); }
.footer__links a { color: var(--ink-2); padding-block: 11px; transition: color .18s ease; }
.footer__links a:hover { color: var(--accent-ink); }
.footer__legal {
  padding: 26px 0 0;
  display: grid;
  gap: 6px;
  color: var(--ink-2);
}
/* 客服电话 / 邮箱：可 Tab 到达，触控目标 ≥44px 高，焦点态由全局 :focus-visible 提供 */
.footer__legal a {
  display: inline-block;
  padding-block: 9px;
  color: var(--ink);
  transition: color .18s ease;
}
.footer__legal a:hover { color: var(--accent-ink); }
.footer__copy { margin-top: 22px; color: var(--ink-2); }
.footer__curve { max-width: 220px; margin-bottom: 28px; }

/* ---------------------------------------------------------------------------
   13. 滚动显现（IntersectionObserver 添加 .is-inview）
   红线: 仅动 opacity / transform
   --------------------------------------------------------------------------- */
.anim-enter {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.anim-enter.is-inview {
  opacity: 1;
  transform: none;
}
.anim-enter:nth-child(2) { transition-delay: .06s; }
.anim-enter:nth-child(3) { transition-delay: .12s; }
.anim-enter:nth-child(4) { transition-delay: .18s; }
.anim-enter:nth-child(5) { transition-delay: .24s; }

/* ---------------------------------------------------------------------------
   14. 响应式：≤1024 塌为单列；≤640 手机
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__copy,
  .hero__visual { grid-column: 1 / -1; }
  .hero__visual { max-width: 420px; }

  .tools__body,
  .tools__card { grid-column: 1 / -1; }

  .release__info,
  .release__notes { grid-column: 1 / -1; }

  .footer__brand,
  .footer__links { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .nav { display: none; }
  .site-header__inner { min-height: 64px; }

  .hero__actions { gap: 16px; }
  .hero__action { width: 100%; }
  .hero__action .btn { width: 100%; }
  /* 手机端主视觉改为裁切视觉带（4:3），避免整张 4:5 竖图撑出大段竖向空白 */
  .hero__art {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    max-height: 280px;
  }
  .hero__qr { margin-top: 14px; }

  .hero__meta { font-size: 11px; letter-spacing: .12em; }

  .release__meta { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   15. 无障碍：尊重系统降低动效偏好
   规格：动画与过渡全部关闭，内容直接可见（杜绝 opacity:0 卡住不可见）
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curtain { display: none; }
  .hero__char { opacity: 1; transform: none; animation: none; }
  .anim-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .skip-link,
  .nav a,
  .footer__links a,
  .footer__legal a { transition: none; }
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   16. 工具类
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent-ink);
  color: #fff;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }