/* ==========================================================================
   base.css — 重置、排版、氛围层、滚动入场、降级动效
   ========================================================================== */

/* --------------------------------------------------------------------------
   安全区兜底：tokens.css 已定义 --sa-*。此处再声明一次，
   目的是当 base.css 被单独引入（调试场景）时也不会出现未定义变量。
   旧引擎不认 env() 时整条声明被丢弃 → 退回 0px，布局与改动前完全一致。
   -------------------------------------------------------------------------- */
:root{
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after{ box-sizing: border-box; }html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sa-t) + 24px);
  /* 屏蔽横向滚动：轮播 track 等宽容器会撑开文档宽度 */
  overflow-x: hidden;
}body{
  margin: 0;
  overflow-x: hidden;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-cn);
  font-size: var(--fs-16);
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* 刘海屏 / 挖孔屏横向避让：与 .wrap 的 gutter 叠加而非替换 */
  padding-left: var(--sa-l);
  padding-right: var(--sa-r);
}h1, h2, h3, h4, p, figure, blockquote{ margin: 0; }ul, ol{ margin: 0; padding: 0; list-style: none; }img, svg{ display: block; max-width: 100%; }button{ font: inherit; color: inherit; }a{
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}/* 焦点可见：2px 描边 + 2px 偏移，全站统一 */
:focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}::selection{ background: var(--c-accent); color: var(--c-bg); }/* --------------------------------------------------------------------------
   排版层级
   -------------------------------------------------------------------------- */
.h1{
  font-size: clamp(2.5rem, 4.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
}.h2{
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: -0.025em;
}.h3{
  font-size: var(--fs-24);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.015em;
}.h4{
  font-size: var(--fs-18);
  font-weight: 650;
  line-height: 1.5;
}.lead{
  font-size: var(--fs-18);
  line-height: 1.75;
  color: var(--c-ink-2);
  letter-spacing: 0.015em;
}.body{ color: var(--c-ink-2); }.small{ font-size: var(--fs-14); color: var(--c-ink-2); }/* 数字统一等宽，避免滚动抖动 */
.num{
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}/* --------------------------------------------------------------------------
   氛围层：颗粒 + 全局环境光。用氛围替代纯色平铺。
   -------------------------------------------------------------------------- */
.grain::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}/* --------------------------------------------------------------------------
   布局骨架
   -------------------------------------------------------------------------- */
.wrap{
  width: min(var(--max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}.section{ position: relative; padding: var(--sp-10) 0; }.section--tight{ padding: var(--sp-9) 0; }/* 无边界感核心：区块之间用渐变互相溶解，不出现硬切分界线 */
.band{
  position: relative;
  background: linear-gradient(
    180deg,
    var(--c-bg) 0%,
    var(--c-surface) 14%,
    var(--c-surface) 86%,
    var(--c-bg) 100%
  );
}/* 发丝分割线：两端淡出，不是硬边框 */
.hairline{
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--c-line) 18%,
    var(--c-line) 82%,
    transparent 100%
  );
}/* 区块标题组 */
.sec-head{ max-width: 720px; }.sec-head--center{ margin-inline: auto; text-align: center; }/* 加宽标题组 + 描述整句不断行（窄屏自动回退为正常换行） */
.sec-head--wide{ max-width: none; }/* 整句不断行：短句锁定一行，用 max-width:100% 兜底防止横向溢出被裁切；
   窄屏自动回退为正常换行 */
.one-line{ white-space: nowrap; max-width: 100%; }@media (max-width: 1180px) {.one-line{ white-space: normal; }
}.sec-desc--one{ white-space: nowrap; max-width: 100%; }@media (max-width: 1180px) {.sec-desc--one{ white-space: normal; }
}.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}.eyebrow::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--accent-a2);
}.sec-desc{
  margin-top: var(--sp-4);
  font-size: var(--fs-18);
  line-height: 1.75;
  color: var(--c-ink-2);
}/* --------------------------------------------------------------------------
   滚动入场：只动 opacity 与 translateY，错峰 80ms

   P0-5 双保险：
   初始隐藏只在 html.js 下生效。main.js 在 <head> 内联脚本第一时间给
   <html> 加 .js；若脚本整包失败（ArkWeb 风险），.js 不存在 → 内容直接可见，
   绝不出现整站白屏。IntersectionObserver 逻辑与 --d 延迟参数保持不变。
   -------------------------------------------------------------------------- */
.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}.reveal.is-in{
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}/* 系统开启「减少动态效果」时无条件显示（即使 .js 已加） */
@media (prefers-reduced-motion: reduce) {
  .js .reveal{ opacity: 1 !important; transform: none !important; }
}/* --------------------------------------------------------------------------
   降级动效：尊重系统偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {html{ scroll-behavior: auto; }*, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }.js .reveal{ opacity: 1 !important; transform: none !important; }
}

/* 法务页宽表格：窄屏横向滚动，而不是撑破整页 */
.legal-scroll{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.legal-scroll > table{ min-width: 520px; }

/* 页面加载编排序列：一次编排好的入场，胜过零散微交互 */
@keyframes riseIn{
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}.enter{
  animation: riseIn var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}@media (prefers-reduced-motion: reduce) {.enter{ animation: none; }
}/* 浮窗打开时锁定页面滚动（配合 main.js lockScroll，页面零位移） */
html.scroll-locked,
html.scroll-locked body{ overflow: hidden; }