/* =====================================================================
   UI-DESIGNER 官网 · 设计系统
   规范来源：references/design-systems/figma/DESIGN.md（preset: figma）
   唯一事实来源：site/DESIGN.md
   规则：颜色/字号/字重/行高/圆角/间距/阴影/时长一律用 var(--token)，零硬编码。
   ===================================================================== */

:root {
  /* ---- 色彩 ---- */
  --color-canvas: #ffffff;
  --color-surface-1: #f7f7f5;
  --color-surface-2: #ebebeb;
  --color-surface-3: #e0e0e0;
  --color-ink: #000000;
  --color-ink-muted: #4c4c4c;
  --color-ink-subtle: #858585;
  --color-hairline: #e6e6e6;
  --color-hairline-soft: #f1f1f1;
  --color-primary: #000000;
  --color-primary-hover: #242424;
  --color-on-primary: #ffffff;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #ffffff;
  --color-success: #1ea64a;
  --color-warning: #9a6700;
  --color-danger: #cf222e;

  /* ---- figma 招牌彩色故事区块 ---- */
  --color-block-lime: #dceeb1;
  --color-block-lilac: #c5b0f4;
  --color-block-cream: #f4ecd6;
  --color-block-mint: #c8e6cd;
  --color-block-pink: #efd4d4;
  --color-block-coral: #f3c9b6;
  --color-block-navy: #1f1d3d;
  --color-accent-magenta: #ff3d8b;

  /* ---- 字体与字阶（figmaSans → Inter 替代；figmaMono → JetBrains Mono） ---- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display-size: 86px;
  --text-display-weight: 340;
  --text-display-lh: 1.00;
  --text-display-ls: -1.72px;
  --text-h1-size: 26px;
  --text-h1-weight: 540;
  --text-h1-lh: 1.35;
  --text-h1-ls: -0.26px;
  --text-h2-size: 26px;
  --text-h2-weight: 340;
  --text-h2-lh: 1.35;
  --text-h2-ls: -0.26px;
  --text-h3-size: 24px;
  --text-h3-weight: 700;
  --text-h3-lh: 1.45;
  --text-h3-ls: 0;
  --text-body-lg-size: 20px;
  --text-body-lg-weight: 330;
  --text-body-lg-lh: 1.40;
  --text-body-lg-ls: -0.14px;
  --text-button-size: 20px;
  --text-button-weight: 480;
  --text-button-lh: 1.40;
  --text-button-ls: -0.10px;
  --text-body-size: 18px;
  --text-body-weight: 320;
  --text-body-lh: 1.45;
  --text-body-ls: -0.26px;
  --text-eyebrow-size: 18px;
  --text-eyebrow-weight: 400;
  --text-eyebrow-lh: 1.30;
  --text-eyebrow-ls: 0.54px;
  --text-body-sm-size: 16px;
  --text-body-sm-weight: 330;
  --text-body-sm-lh: 1.45;
  --text-body-sm-ls: -0.14px;
  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-lh: 1.00;
  --text-caption-ls: 0.60px;

  /* ---- 间距与圆角 ---- */
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;
  --space-gap: 12px;
  --space-pad: 24px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 50px;
  --radius-full: 9999px;
  --radius-control: 8px;
  --radius-card: 24px;

  /* ---- 描边 / 层级 / 动效 ---- */
  --border-hairline: 1px solid var(--color-hairline);
  --border-hairline-soft: 1px solid var(--color-hairline-soft);
  --border-strong: 1px solid var(--color-ink-subtle);
  --border-focus: 2px solid var(--color-primary);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-3: 0 12px 32px rgba(16, 24, 40, .12);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 布局 ---- */
  --container: 1280px;
  --nav-h: 64px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

/* ============================ 排印工具类 ============================ */
.display-xl {
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}
.caption {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-lh);
  letter-spacing: var(--text-caption-ls);
  text-transform: uppercase;
}
.h1 { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); margin: 0; }
.h2 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-ls); margin: 0; }
.h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); margin: 0; }
.body-lg { font-size: var(--text-body-lg-size); font-weight: var(--text-body-lg-weight); line-height: var(--text-body-lg-lh); letter-spacing: var(--text-body-lg-ls); margin: 0; }
.body { font-size: var(--text-body-size); font-weight: var(--text-body-weight); line-height: var(--text-body-lh); letter-spacing: var(--text-body-ls); margin: 0; }
.body-sm { font-size: var(--text-body-sm-size); font-weight: var(--text-body-sm-weight); line-height: var(--text-body-sm-lh); letter-spacing: var(--text-body-sm-ls); margin: 0; }
.ink-muted { color: var(--color-ink-muted); }
.ink-subtle { color: var(--color-ink-subtle); }
.mono { font-family: var(--font-mono); }

/* ============================ 布局 ============================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space-xxl);
  padding-right: var(--space-xxl);
}
.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}
.section--tight { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

/* 柔和底色，让长页面有呼吸和节奏 */
/* soft 灰底：figma preview 中承载色块网格的 section 底色（= figma --surface-soft） */
.section--soft { background: var(--color-surface-1); }
.section--cream { background: var(--color-block-cream); }
.section--mint { background: var(--color-block-mint); }
.section--pink { background: var(--color-block-pink); }
.section--lime { background: var(--color-block-lime); }
.section--lilac { background: var(--color-block-lilac); }
.section--coral { background: var(--color-block-coral); }

/* ============================ 顶栏 Nav ============================ */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--color-canvas);
  border-bottom: var(--border-hairline);
  backdrop-filter: saturate(180%) blur(8px);
}
.top-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.brand__mark {
  height: 30px;
  width: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}
.nav-links a {
  font-size: var(--text-body-sm-size);
  font-weight: 480;
  color: var(--color-ink-muted);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.nav-links a:hover { color: var(--color-ink); background: var(--color-surface-1); }
.nav-links a.is-current { color: var(--color-ink); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none; background: var(--color-surface-1);
  border-radius: var(--radius-full);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; display: block;
  width: 18px; height: 2px; background: var(--color-ink);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ============================ 按钮（figma：pill 是唯一的文字按钮形状） ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-lh);
  letter-spacing: var(--text-button-ls);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  min-height: 44px;
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { transform: scale(0.98); }
.btn--secondary { background: var(--color-canvas); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.btn--secondary:hover { background: var(--color-surface-1); }
.btn--magenta { background: var(--color-accent-magenta); color: var(--color-on-primary); }
.btn--magenta:hover { filter: brightness(0.95); }
.btn--ghost { background: transparent; color: var(--color-ink-muted); padding: 8px 14px; min-height: 40px; }
.btn--ghost:hover { color: var(--color-ink); background: var(--color-surface-1); }
.btn--block { width: 100%; }

/* ============================ Marquee 黑条 ============================ */
/* 对齐 figma .marquee-strip：高 36px、mono 13px 大写、字距 0.4、元素间距 32px、左右内距 24px */
.marquee-strip {
  background: var(--color-inverse-canvas);
  color: var(--color-inverse-ink);
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
}
.marquee-strip__track {
  display: flex;
  gap: var(--space-xl);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee-strip__track span { opacity: 0.85; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================ Hero ============================ */
.hero {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle at 60% 40%, var(--color-block-lime) 0%, var(--color-block-cream) 45%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--space-lg); }
.hero__title {
  max-width: 16ch;
  margin-bottom: var(--space-xl);
}
.hero__lede {
  max-width: 56ch;
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-lh);
  letter-spacing: var(--text-body-lg-ls);
  margin-bottom: var(--space-xxl);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero__meta { margin-top: var(--space-xl); }

/* ============================ 彩色故事区块（对齐 figma preview #blocks） ============================
   reference 事实：色块不是全宽 band，而是「soft 灰底 section 内的圆角卡网格」
     .block-grid   → repeat(auto-fill, minmax(360px, 1fr)); gap: 24px
     .color-block  → radius 24px; padding 48px; min-height 220px; flex column; space-between
     标题 26px（不是 display 级），正文 16px，卡片底部放 pill 按钮
   ============================================================================================== */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
}
.story-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.block {
  border-radius: var(--radius-lg);
  padding: 48px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}
.block--wide { grid-column: span 2; }
.block__eyebrow { margin-bottom: 12px; opacity: 0.75; }
.block__title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.26px;
  line-height: 1.35;
  margin-bottom: 12px;
  max-width: 26ch;
}
.block__body {
  font-size: 16px;
  line-height: 1.45;
  max-width: 44ch;
}
.block__foot { margin-top: auto; display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.block__stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.block--lime { background: var(--color-block-lime); color: var(--color-ink); }
.block--lilac { background: var(--color-block-lilac); color: var(--color-ink); }
.block--cream { background: var(--color-block-cream); color: var(--color-ink); }
.block--mint { background: var(--color-block-mint); color: var(--color-ink); }
.block--pink { background: var(--color-block-pink); color: var(--color-ink); }
.block--coral { background: var(--color-block-coral); color: var(--color-ink); }
.block--navy { background: var(--color-block-navy); color: var(--color-inverse-ink); }
.block--navy .block__eyebrow { color: var(--color-inverse-ink); opacity: 0.7; }
.stat__num { font-size: 52px; font-weight: 540; letter-spacing: -1.5px; line-height: 1; }
.stat__label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; margin-top: var(--space-xs); }

/* ============================ 卡片 ============================ */
/* 对齐 figma preview .pricing-card：canvas 白底 + 1px hairline + 24px 圆角 + 24px 内距
   （surface-1 灰底是 figma 的 --surface-soft，只给「承载色块网格的 section」，不给卡片） */
.card {
  background: var(--color-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-pad);
  transition: background var(--duration-base) var(--ease);
}
.card:hover { background: var(--color-surface-1); }
.card--lime { background: var(--color-block-lime); }
.card--lilac { background: var(--color-block-lilac); }
.card--cream { background: var(--color-block-cream); }
.card--mint { background: var(--color-block-mint); }
.card--pink { background: var(--color-block-pink); }
.card--coral { background: var(--color-block-coral); }
.card--lime:hover,
.card--lilac:hover,
.card--cream:hover,
.card--mint:hover,
.card--pink:hover,
.card--coral:hover { filter: brightness(0.97); }
.card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-1);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 500;
  margin-bottom: var(--space-lg);
}
.card__title { margin-bottom: var(--space-sm); }
.card__body { color: var(--color-ink-muted); }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================ 区块标题组 ============================ */
.section-head { max-width: 60ch; margin-bottom: var(--space-xxl); }
.section-head__eyebrow { margin-bottom: var(--space-md); }
.section-head__title { margin-bottom: var(--space-md); }

/* ============================ 模式对比（preset / remix） ============================ */
/* 对齐 figma .pricing-card：卡片统一 24px 内距 + 24px 圆角 + hairline */
.mode-card {
  border-radius: var(--radius-card);
  padding: var(--space-pad);
  border: var(--border-hairline);
  background: var(--color-canvas);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.mode-card--remix { background: var(--color-block-lilac); border-color: transparent; }
.mode-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 12px; border-radius: var(--radius-full);
  background: var(--color-ink); color: var(--color-on-primary);
}
.mode-card__list li { padding: var(--space-sm) 0; border-top: var(--border-hairline); display: flex; gap: var(--space-sm); }
.mode-card__list li:first-child { border-top: none; }

/* ============================ 步骤列表 ============================ */
/* 对齐 figma .card-grid：auto-fill minmax(280px,1fr) + gap 24 */
.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
/* 对齐 figma .pricing-card：白底 + hairline + 24px 圆角 + 24px 内距；彩色变体沿用色块 token */
.step {
  background: var(--color-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-pad);
}
.step--lime { background: var(--color-block-lime); }
.step--lilac { background: var(--color-block-lilac); }
.step--cream { background: var(--color-block-cream); }
.step--mint { background: var(--color-block-mint); }
.step--pink { background: var(--color-block-pink); }
.step--coral { background: var(--color-block-coral); }
.step--navy { background: var(--color-block-navy); color: var(--color-inverse-ink); }
.step--navy .step__num { background: var(--color-inverse-ink); color: var(--color-ink); }
.step__num {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.6px;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-ink); color: var(--color-on-primary);
  display: grid; place-items: center;
  margin-bottom: var(--space-lg);
}
.step__title { margin-bottom: var(--space-sm); }
.step__body { color: var(--color-ink-muted); }

/* ============================ 维度表 ============================ */
/* 对齐 figma .responsive-table：th/td padding 12px 16px，行分隔用 hairline-soft，
   th 是 mono 11px 大写正字距（taxonomy，不是正文） */
.table-wrap { overflow-x: auto; border: var(--border-hairline); border-radius: var(--radius-md); }
table.spec {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: var(--text-body-sm-size);
}
table.spec th, table.spec td {
  text-align: left; padding: 12px 16px;
  border-bottom: var(--border-hairline-soft);
  vertical-align: top;
}
table.spec th {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 500; color: var(--color-ink); opacity: 0.75;
}
table.spec tr:last-child td { border-bottom: none; }
table.spec td code { font-family: var(--font-mono); background: var(--color-surface-1); padding: 2px 6px; border-radius: var(--radius-xs); }

/* ============================ 代码块 ============================ */
.code {
  background: var(--color-inverse-canvas);
  color: var(--color-inverse-ink);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.code .cm { color: #9aa0a6; }
.code .kw { color: #ffb86c; }
.code .str { color: #c5b0f4; }

/* ============================ 参考案例库 ============================ */
.filterbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--color-canvas);
  border-bottom: var(--border-hairline);
  padding: var(--space-md) 0;
}
.filterbar__inner { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
/* 对齐 figma .b-tab-default / .b-tab-selected：pill 形状，padding 8px 18px，
   默认态 = 白底 + hairline-soft 描边 + ink；选中态 = 黑底白字无描边 */
.chip {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: var(--border-hairline-soft);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.chip.is-active { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; }
/* 对齐 figma .form-input：控件圆角 8px（pill 只给按钮），内距 12px 14px */
.filterbar__search {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--space-sm);
  border: var(--border-hairline); border-radius: var(--radius-control);
  padding: 10px 14px; background: var(--color-canvas);
}
.filterbar__search input {
  border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 15px; color: var(--color-ink);
  width: 200px;
}
.filterbar__search .mono { color: var(--color-ink-subtle); font-size: 13px; }

/* 对齐 figma .card-grid：auto-fill minmax(280px,1fr) + gap 24 */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}
/* 对齐 figma .pricing-card：白底 + hairline + 24px 圆角 + 24px 内距；
   hover 只换背景，不位移不投影（figma：颜色/描边才是层级手段） */
.case-card {
  background: var(--color-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-pad);
  display: flex; flex-direction: column; gap: var(--space-sm);
  transition: background var(--duration-base) var(--ease);
}
.case-card:hover { background: var(--color-surface-1); }
.case-card__cat {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--color-ink); opacity: 0.75;
}
.case-card__name { font-size: var(--text-h3-size); font-weight: 700; line-height: 1.2; }
.case-card__blurb { color: var(--color-ink-muted); font-size: var(--text-body-sm-size); flex: 1; }
.case-card__links { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.case-link {
  font-family: var(--font-mono); font-size: 13px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: var(--border-hairline); color: var(--color-ink);
  transition: background var(--duration-fast) var(--ease);
}
.case-link:hover { background: var(--color-canvas); }
.case-link--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.case-link--primary:hover { background: var(--color-primary-hover); }
.cases-count {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--color-ink); opacity: 0.75;
  margin-bottom: var(--space-lg);
}

/* 对齐 figma .form-label：mono 11px 大写正字距，仅作分类标签 */
.field-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.6px; opacity: 0.75;
}

/* ============================ 页脚 ============================ */
/* 对齐 figma .footer：上下内距 48px、顶部 hairline、mono 大写辅助信息 */
.footer {
  background: var(--color-canvas);
  border-top: var(--border-hairline);
  padding: var(--space-xxl) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-xl);
}
.footer__brand { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; margin-bottom: var(--space-md); }
.footer__col h4 {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--color-ink-subtle); margin: 0 0 var(--space-md); font-weight: 500;
}
.footer__col a { display: block; font-size: var(--text-body-sm-size); color: var(--color-ink-muted); padding: 6px 0; }
.footer__col a:hover { color: var(--color-ink); }
.footer__bottom {
  margin-top: var(--space-xxl);
  padding-top: var(--space-lg);
  border-top: var(--border-hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md);
}

/* ============================ 入场动画（已禁用：内容默认可见，避免首屏下方空白） ============================ */
.reveal { opacity: 1; transform: none; }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================ 响应式 ============================ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn--secondary { display: none; }
  .block__stats-row { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .block { padding: var(--space-xl) var(--space-lg); min-height: 0; }
  .block--wide { grid-column: span 1; }
  .block__stats-row { grid-template-columns: repeat(2, 1fr); }
  .container { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}
@media (max-width: 560px) {
  :root { --text-display-size: 48px; --text-display-ls: -1px; --space-section: 64px; }
  .hero__cta .btn { width: 100%; }
  .grid--2, .grid--3, .grid--4, .steps, .cases-grid, .block__stats-row { grid-template-columns: 1fr; }
  .story-grid, .story-grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .nav-actions .btn--primary { display: none; }
}

/* 移动端抽屉 */
.mobile-drawer {
  position: fixed; inset: var(--nav-h) 0 0 0;
  background: var(--color-canvas);
  z-index: 49;
  display: none;
  flex-direction: column;
  padding: var(--space-xl) var(--space-lg);
  gap: var(--space-md);
}
.mobile-drawer.is-open { display: flex; }
.mobile-drawer a { font-size: 22px; font-weight: 480; padding: var(--space-sm) 0; }
.mobile-drawer .btn { margin-top: var(--space-md); }

@media (prefers-reduced-motion: reduce) {
  .marquee-strip__track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}