/* Hallmark · macrostructure: Stat-Led · tone: editorial · anchor hue: 39 (terracotta)
 * 版式：常规网页布局 —— 居中容器（68rem），正文左对齐、行长限制在可读范围，
 * 卡片/表格铺满容器宽度。颜色/字体/间距全部引用 tokens.css 的具名 token。
 */

/* ═══════════════ 基础 ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[v-cloak] { visibility: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.tnum { font-variant-numeric: tabular-nums; }

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

/* 居中容器：常规网页宽度 */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* ═══════════════ 滚动进场动效 ═══════════════
 * 关键：初始隐藏态只在 <html class="js"> 下生效（该 class 由 index.html
 * 头部的内联脚本添加）。若 JS 未执行、加载失败或被禁用，内容保持可见，
 * 页面不会出现空白 —— 动效是可选的增强，不是渲染的前提。
 */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* 子元素依次进场 */
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }

/* ═══════════════ 导航 ═══════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out);
}
.nav.is-stuck { border-bottom-color: var(--color-border); }
.nav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav__mark-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  flex: none;
}
.nav__links {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--text-sm);
}
.nav__links a {
  position: relative;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  transition: color var(--dur-micro) var(--ease-in-out);
}
/* 悬停时下划线从左展开 */
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__links a:hover { color: var(--color-accent-ink); }
.nav__links a:hover::after { transform: scaleX(1); }

/* ═══════════════ ① 首屏 ═══════════════ */
.hero {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-3xl);
  text-align: center;
}
.hero__eyebrow {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.hero__figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
}
.hero__num {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.hero__unit {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-ink-3);
}
.hero__head {
  margin: var(--space-md) 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.hero__sub {
  max-width: 40rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
}
.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 46px;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-button);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}
.btn--primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px var(--color-accent-ink);
}
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-ink-3);
  background: var(--color-surface);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0); }

/* 首屏数据卡 */
.stats {
  list-style: none;
  margin: var(--space-3xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.stat {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.stat:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 14px 30px -18px var(--color-accent-ink);
}
.stat__v {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.stat__k {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* ═══════════════ 通用版块 ═══════════════ */
.band {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  border-top: 1px solid var(--color-border);
}
.band--tint { background: var(--color-surface); }

.band__head {
  margin: 0 0 var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
/* 区块导语：左对齐，行长受控 */
.band__lead {
  max-width: 58ch;
  margin: 0 0 var(--space-2xl);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
}

/* 正文：左对齐（正常网页做法），行长 58ch 保证可读 */
.prose { max-width: 60ch; }
.prose p {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-2);
}
.prose p:last-child { margin-bottom: 0; }
.prose__aside {
  margin: var(--space-2xl) 0 0;
  max-width: 60ch;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-paper);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  font-size: var(--text-base);
  color: var(--color-ink-2);
}
.band--tint .prose__aside { background: var(--color-paper); }

/* ═══════════════ 机器人卡片 ═══════════════ */
.robots {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.robots li {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-ink);
  white-space: nowrap;
  transition:
    transform var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.robots li:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
}
.band--tint .robots li { background: var(--color-paper); }

/* ═══════════════ 信息清单 ═══════════════ */
.facts {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.facts li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-ink);
}
.facts__k { font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: 0.04em; }
.facts__v { font-size: var(--text-base); color: var(--color-ink); }

/* ═══════════════ 费用表（铺满容器宽度）═══════════════ */
.cost {
  width: 100%;
  margin: var(--space-xl) 0 0;
  border-collapse: collapse;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.cost__cap {
  caption-side: top;
  padding-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  text-align: left;
}
.cost th, .cost td {
  text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}
.cost th:last-child, .cost td:last-child { padding-right: 0; }
.cost thead th {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  border-bottom: 1px solid var(--color-ink);
}
.cost tbody th { font-weight: 500; color: var(--color-ink); }
.cost tbody td { color: var(--color-ink-2); }
.cost col.c-item { width: 24%; }
.cost col.c-note { width: 52%; }
.cost col.c-fee  { width: 24%; }
/* 费用列右对齐，数值好比较 */
.cost .num { text-align: right; padding-right: 0; white-space: nowrap; }
.cost tbody tr { transition: background var(--dur-micro) var(--ease-in-out); }
.cost tbody tr:hover { background: var(--color-paper); }
.band--tint .cost tbody tr:hover { background: var(--color-paper); }

/* ═══════════════ 赞助方式卡片 ═══════════════
 * 列宽用固定值而非 auto-fit：只有一张收款卡时，auto-fit 会把它拉伸到整行宽，
 * 卡内二维码却只有 15rem，于是变成一条巨大的空白长条。固定列宽可避免。
 */
.pay {
  display: grid;
  grid-template-columns: repeat(auto-fill, 18rem);
  justify-content: start;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0 0;
  align-items: start;
}
.pay__card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.pay__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 16px 34px -20px var(--color-accent-ink);
}
/* 卡片头：方式名 + 一句说明 */
.pay__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.pay__icon {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: var(--radius-button);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}
.pay__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-ink);
}
.pay__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.pay__qr {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-button);
  background: var(--color-paper);
}
.pay__ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--color-paper);
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-button);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.pay__tip {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  text-align: center;
}

/* 联系方式 */
.contact {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-base);
  color: var(--color-ink-2);
}
.contact a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-micro) var(--ease-in-out);
}
.contact a:hover { color: var(--color-ink); }

/* ═══════════════ 收支账本 ═══════════════ */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0 0;
}
.ledger__cell {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-ink);
  border-radius: var(--radius-card);
  text-align: center;
  transition:
    transform var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.ledger__cell:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.ledger__cell--accent { border-top-color: var(--color-accent); }
.ledger__k {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.ledger__v {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.ledger__note {
  max-width: 60ch;
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.sub {
  margin: var(--space-4xl) 0 var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.thanks {
  width: 100%;
  margin: var(--space-xl) 0 0;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.thanks th, .thanks td {
  text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule);
}
.thanks th:last-child, .thanks td:last-child { padding-right: 0; }
.thanks thead th {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  border-bottom: 1px solid var(--color-ink);
}
.thanks tbody th { font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.thanks tbody td { color: var(--color-ink-2); }
.thanks .num { text-align: right; padding-right: var(--space-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.thanks col.t-name { width: 26%; }
.thanks col.t-amt  { width: 18%; }
.thanks col.t-note { width: 56%; }
.thanks__empty {
  color: var(--color-ink-3);
  padding: var(--space-2xl) 0 !important;
  text-align: center;
}

/* ═══════════════ 页脚 ═══════════════ */
.foot {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-lg);
}
.foot p {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.foot__sep { color: var(--color-rule); }

/* ═══════════════ 响应式 ═══════════════ */
@media (min-width: 48rem) {
  .wrap { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .nav__inner { padding-left: var(--space-xl); padding-right: var(--space-xl); }
}

/* 中等屏：机器人/清单两列，账本保持三列 */
@media (max-width: 56rem) {
  .robots,
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 手机 */
@media (max-width: 40rem) {
  .hero { padding-top: var(--space-3xl); }
  .hero__head { font-size: var(--text-2xl); }
  .band { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
  .band__head { font-size: var(--text-2xl); }
  .band__lead { font-size: var(--text-base); }
  .stats,
  .robots,
  .facts,
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .stat, .ledger__cell { padding: var(--space-lg); }
  /* 表格：手机上改为堆叠，避免挤压 */
  .cost col { width: auto !important; }
  .cost thead { display: none; }
  .cost tbody tr {
    display: grid;
    gap: 2px;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .cost tbody th, .cost tbody td {
    padding: 0;
    border: 0;
    text-align: left;
  }
  .cost tbody td { color: var(--color-ink-3); font-size: var(--text-sm); }
  .cost .num { text-align: left; }
}

@media (max-width: 30rem) {
  .nav__inner { flex-direction: column; gap: var(--space-sm); }
  .nav__links { gap: var(--space-lg); }
  .hero__actions { flex-direction: column; }
  .btn { width: 100%; }
}

/* ═══════════════ 降低动效 ═══════════════ */
@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;
  }
  .reveal { opacity: 1; transform: none; }
  .stat:hover, .robots li:hover, .pay__card:hover,
  .ledger__cell:hover, .btn:hover { transform: none; }
}