/* ================================================================
   BASE — 全局 reset + body 样式 + 公共按钮组件 (.cta-pill)
   依赖 tokens.css 的 CSS 变量。
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-cn);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.55;
  cursor: default;
  font-weight: 400;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* 跨页 #hash 锚点：定位时为固定导航留出顶部偏移（原生回退；Lenis 路径由 common.js 处理） */
:target { scroll-margin-top: clamp(80px, 11vh, 104px); }

/* preload class — page is ready but animations wait for trigger */
body.is-loading { overflow: hidden; }
body.is-loading .nav { opacity: 0; transform: translateY(-10px); }

/* ================================================================
   .cta-pill — 公共按钮组件。在 hero CTA、about CTA、news "了解更多"
   多处复用。新页面有"了解更多"类按钮请直接用这个 class。
   用法：
     <a href="..." class="cta-pill">了解更多<span class="cta-pill__icon">...svg...</span></a>
   带边框变体：再加一个 class（如 about__cta）覆盖 border 即可。
   ================================================================ */
.cta-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 28px;
  background: #fff;
  border-radius: 999px;
  color: var(--green);
  font-family: var(--font-cn);
  font-size: 15px; font-weight: 500; letter-spacing: .12em;
  box-shadow: 0 10px 10px -14px rgba(0,0,0,.35);
  transition: all linear 150ms;
}
.cta-pill:hover {
  background: var(--green); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 16px -14px rgba(0,0,0,.4);
}
.cta-pill__icon { display: block; width: 25px; height: 25px; flex-shrink: 0; }
.cta-pill__icon svg { width: 100%; height: 100%; display: block; }
.cta-pill__icon .bg    { fill: var(--green); transition: fill .35s var(--ease-out); }
.cta-pill__icon .arrow { fill: #fff;          transition: fill .35s var(--ease-out); }
/* On hover: invert — circle becomes white, arrow becomes green */
.cta-pill:hover .cta-pill__icon .bg    { fill: #fff; }
.cta-pill:hover .cta-pill__icon .arrow { fill: var(--green); }
/* 描边变体：与 news「了解更多」相同，仅多 1px 绿色描边（用于 about CTA）。padding 内缩 1px 抵消描边、尺寸不变 */
.cta-pill--bordered { border: 1px solid var(--green); padding: 8px 8px 8px 27px; }