/* ============================================================
   site.css — 速贸通官网全站升级层（P0–P2）
   叠加在各页内联 <style> 之后，全部为增量规则，不破坏既有布局。
   覆盖：焦点环 / 滚动揭示 / 卡片 hover+active / 图片 hover / 返回顶部
        / 导航滚动收缩 / 移动端汉堡菜单 / 统计条 count-up / 图片兜底。
   变量均带降级值，兼容 privacy/404 等未定义 token 的页面。
   ============================================================ */

/* ---------- 1. 键盘焦点环（P0·无障碍） ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand, #2d5fc1);
  outline-offset: 2px;
  border-radius: 6px;
}
.back-to-top:focus-visible,
.nav-toggle:focus-visible { outline-offset: 3px; }

/* ---------- 2. 滚动揭示（P1·fade-up + stagger） ---------- */
/* 仅在 site.js 注入 .js-reveal 后隐藏，确保无 JS 不丢内容。
   关键：.reveal 基态只隐藏 opacity，绝不可写 transform/transition ——
   否则动画结束 cancel() 回退 transform 时会触发 transition，造成
   元素“淡入归位后又下滑 22px”的抖动。位移完全由 site.js 的 WAAPI 负责，
   结束后回退到 translateY(0)（none），无残留位移，也不影响 :hover 位移。 */
.js-reveal .reveal { opacity: 0; }
.js-reveal .reveal.revealed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; }
}

/* ---------- 3. 卡片 hover + active 双态（P1） ---------- */
.chip, .num-cell, .proof-item, .cap-card, .val-card, .faq-item, .shot-card, .stat {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.chip:hover, .num-cell:hover, .proof-item:hover,
.cap-card:hover, .val-card:hover, .faq-item:hover, .shot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(22, 34, 46, .12);
}
[data-theme="dark"] .chip:hover,
[data-theme="dark"] .num-cell:hover,
[data-theme="dark"] .proof-item:hover,
[data-theme="dark"] .cap-card:hover,
[data-theme="dark"] .val-card:hover,
[data-theme="dark"] .faq-item:hover,
[data-theme="dark"] .shot-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
/* 按下态 */
.btn:active { transform: translateY(1px); }
.chip:active, .num-cell:active, .proof-item:active { transform: translateY(-1px); }
.nav-menu a:active { color: var(--brand, #2d5fc1); }

/* ---------- 4. 图片 hover 放大（P1） ---------- */
.shot-main { overflow: hidden; }
.shot-main img { transition: transform .45s ease; }
.shot-main:hover img { transform: scale(1.03); }
.cap-card img, .shot-card img { transition: transform .45s ease; }
.cap-card:hover img, .shot-card:hover img { transform: scale(1.03); }

/* ---------- 5. 返回顶部按钮（P1） ---------- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand, #2d5fc1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(22, 34, 46, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .18s;
  z-index: 60;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--brand-deep, #1d3f85); }
.back-to-top:active { transform: translateY(1px); }

/* ---------- 6. 导航滚动收缩（P1） ---------- */
.nav-inner { transition: height .25s ease; }
.nav.shrink .nav-inner { height: 48px; }
.nav.shrink { box-shadow: 0 2px 14px rgba(22, 34, 46, .08); }

/* ---------- 7. 移动端汉堡菜单 / 抽屉（P0） ---------- */
.nav-toggle {
  display: none;
  flex: none;
  width: 38px;
  height: 38px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline, #dde4ec);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: border-color .18s, background .18s;
}
.nav-toggle:hover { border-color: var(--brand, #2d5fc1); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink, #16222e);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle span + span { margin-top: 4px; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; flex-direction: column; }
  .nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    left: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg, #f1f4f8);
    border: 1px solid var(--hairline, #dde4ec);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 14px 34px rgba(22, 34, 46, .16);
    display: none;
  }
  .nav.open .nav-menu { display: flex !important; }
  .nav-menu a {
    padding: 12px 12px;
    border-radius: 8px;
    font-size: 14px;
  }
  .nav-menu a:hover { background: rgba(45, 95, 193, .08); }
  .nav-menu a.active { background: rgba(45, 95, 193, .12); }
}
[data-theme="dark"] .nav-menu {
  background: #0f1826;
  border-color: #1c2938;
}
[data-theme="dark"] .nav-menu a:hover { background: rgba(110, 160, 232, .12); }
[data-theme="dark"] .nav-menu a.active { background: rgba(110, 160, 232, .18); }

/* ---------- 8. 统计条 + count-up（P2） ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline, #dde4ec);
  border: 1px solid var(--hairline, #dde4ec);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}
.stat {
  background: var(--bg, #f1f4f8);
  padding: 24px 18px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--brand, #2d5fc1);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted, #7c8798);
}
[data-theme="dark"] .stat { background: #0f1826; }
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat b { font-size: 26px; }
}

/* ---------- 9. 图片兜底占位（P2） ---------- */
img.img-failed {
  background: var(--line-soft, #e9edf4);
  min-height: 40px;
}