/* ============================================================
   引见（YinJian）· 营销网站共享样式
   设计系统：WARM PAPER（暖纸）· V3.0，参考 handhold.io
   主题：暖纸色亮色极简 —— 白/暖纸分层 + 1px 浅边框 + 黑墨主按钮 + 大圆角
   规则：所有色彩/间距/圆角/阴影/动效引用 CSS 变量，禁止硬编码（除材质 SVG 数据 URI）
   硬门控：禁渐变文字 · 禁玻璃拟态 · 主按钮白字黑底 · hover 不靠阴影大位移 · 单一强调蓝 ≤8%
   ============================================================ */

:root {
  /* ============================================================
     1. 表面阶梯（亮色核心：白 → 暖纸分层）
     ============================================================ */
  --surface-0: #FBFAF7;
  /* 页面根底 · 暖白 */
  --surface-1: #F2F1ED;
  /* 交替区块 · 暖纸 */
  --surface-2: #FFFFFF;
  /* 卡片 / 面板 */
  --surface-3: #F5F4EF;
  /* hover / 输入框 */
  --surface-4: #ECEAE3;
  /* 弹层 / 导航滚动态 */
  --surface-void: #000000;
  /* 仅遮罩 */

  /* 墨色（交互主体：黑底按钮，handhold 式） */
  --color-ink: #0F0E0C;
  --color-ink-hover: #2A2420;
  --color-ink-active: #000000;
  --color-accent: var(--color-primary-500);
  /* 语义别名 */

  /* 兼容旧命名（值已全部改为暗色，类名无需改动） */
  --color-bg: var(--surface-0);
  --color-bg-alt: var(--surface-1);
  --color-surface: var(--surface-2);

  /* 遮罩 */
  --scrim-soft: rgba(0, 0, 0, .45);
  --scrim-strong: rgba(0, 0, 0, .78);

  /* ============================================================
     2. 边框明度阶梯（亮底：黑色 alpha 浅边）
     ============================================================ */
  --border-subtle: rgba(16, 24, 40, .06);
  --border-hairline: rgba(16, 24, 40, .09);
  --border-default: rgba(16, 24, 40, .13);
  --border-strong: rgba(16, 24, 40, .20);
  --border-interactive: rgba(16, 24, 40, .34);
  --border-accent: rgba(21, 93, 252, .40);
  --border-accent-hot: rgba(21, 93, 252, .62);

  /* 旧命名保留，值改为暗色写法 */
  --border-input: 1px solid var(--border-interactive);

  /* ============================================================
     3. 文本明度阶梯（亮底：黑色 alpha，标题近黑）
     ============================================================ */
  --color-text-primary: #0D0C0A;
  --color-text-body: rgba(13, 12, 10, .74);
  --color-text-secondary: rgba(13, 12, 10, .60);
  --color-text-muted: rgba(13, 12, 10, .50);
  --color-text-faint: rgba(13, 12, 10, .38);
  --color-text-disabled: rgba(13, 12, 10, .28);
  --color-text-on-accent: #FFFFFF;

  /* ============================================================
     4. 单一强调色 · 信号蓝（全站 ≤8% 面积，handhold 同族）
     ============================================================ */
  --color-primary-300: #A5C0FF;
  --color-primary-400: #4C82FB;
  --color-primary-500: #155DFC;
  /* ★ 唯一强调色 */
  --color-primary-600: #1250D8;
  --color-primary-700: #1044B0;
  --color-primary-800: #0C3384;
  --color-primary-900: #082257;
  --color-primary: var(--color-primary-500);

  /* alpha 变体（用于底纹、边框、glow） */
  --primary-a04: rgba(21, 93, 252, .05);
  --primary-a08: rgba(21, 93, 252, .08);
  --primary-a12: rgba(21, 93, 252, .12);
  --primary-a18: rgba(21, 93, 252, .18);
  --primary-a28: rgba(21, 93, 252, .28);
  --primary-a45: rgba(21, 93, 252, .45);

  /* glow（亮底克制：环 + 极弱冷晕，永不做文字外发光） */
  --glow-accent-sm: 0 0 0 1px rgba(21, 93, 252, .24), 0 0 12px rgba(21, 93, 252, .08);
  --glow-accent-md: 0 0 0 1px rgba(21, 93, 252, .34), 0 0 24px rgba(21, 93, 252, .12);
  --glow-accent-lg: 0 0 0 1px rgba(21, 93, 252, .42), 0 0 48px rgba(21, 93, 252, .14);
  --glow-inner-top: inset 0 1px 0 rgba(255, 255, 255, .85);
  --glow-inner-ring: inset 0 0 0 1px rgba(16, 24, 40, .05);

  /* ============================================================
     5. 语义色（亮底适配 · 深字浅底）
     ============================================================ */
  --color-success: #15803D;
  --color-warning: #A16207;
  --color-danger: #DC4A3D;
  --color-info: var(--color-primary-600);

  --color-success-bg: rgba(34, 197, 94, .10);
  --color-warning-bg: rgba(234, 179, 8, .12);
  --color-danger-bg: rgba(220, 74, 61, .08);
  --color-info-bg: var(--primary-a08);

  --color-success-border: rgba(34, 197, 94, .30);
  --color-warning-border: rgba(234, 179, 8, .34);
  --color-danger-border: rgba(220, 74, 61, .30);
  --color-info-border: var(--primary-a28);

  /* ============================================================
     6. 中性灰阶（亮色语境：数字越大越深）
     ============================================================ */
  --color-neutral-900: #101828;
  --color-neutral-800: #364153;
  --color-neutral-700: #4A5565;
  --color-neutral-600: #6A7282;
  --color-neutral-500: #8A919E;
  --color-neutral-400: #99A1AF;
  --color-neutral-300: #C2C7CF;
  --color-neutral-200: #D8DCE2;
  --color-neutral-100: #E9EBEE;
  --color-neutral-50: #F2F1ED;
  /* "暖纸" —— 次级按钮填充 */

  /* ============================================================
     7. 材质与光（暖纸：暖晕代替冷月光）
     ============================================================ */
  --noise-opacity: .03;
  --grid-line: rgba(16, 24, 40, .045);
  --grid-line-lg: rgba(16, 24, 40, .07);
  --grid-size: 72px;
  --moonlight: radial-gradient(120% 70% at 50% -12%,
      rgba(230, 220, 198, .38) 0%,
      rgba(230, 220, 198, .14) 34%,
      transparent 68%);
  --moonlight-side: radial-gradient(70% 90% at 100% 0%,
      rgba(230, 220, 198, .22) 0%, transparent 60%);

  /* ============================================================
     8. 阴影（亮底：柔和大模糊，2 层以内）
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .07);
  --shadow-md: 0 10px 28px rgba(16, 24, 40, .10);
  --shadow-lg: 0 20px 52px rgba(16, 24, 40, .13);
  --shadow-xl: 0 30px 76px rgba(16, 24, 40, .16);
  --elev-card: var(--glow-inner-top), var(--shadow-sm);
  --elev-card-hover: var(--glow-inner-top), var(--shadow-md);
  --elev-overlay: var(--glow-inner-ring), var(--shadow-xl);

  /* ============================================================
     9. 焦点环
     ============================================================ */
  --ring-focus: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--color-primary-500);

  /* ============================================================
     10. 字体栈（展示字体：衬线优先，呼应 handhold 的 bureauSerif）
     ============================================================ */
  --font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Source Han Sans SC",
    Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Palatino", "Palatino Linotype", "Songti SC", "Noto Serif SC", "STSong",
    Georgia, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas,
    "Liberation Mono", "PingFang SC", monospace;
  --font-number: var(--font-mono);
  /* 数字一律等宽 */

  /* ============================================================
     11. 字重（亮底回一档）
     ============================================================ */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============================================================
     12. 字距（英文/编号大字距是本系统标志）
     ============================================================ */
  --ls-tighter: -0.022em;
  --ls-tight: -0.015em;
  --ls-snug: -0.006em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;
  /* 英文 eyebrow / 大写标签 ★ */
  --ls-widest: 0.22em;
  /* 单词级装饰标签，慎用 */

  /* ============================================================
     13. 圆角（V3 大圆角：handhold 式亲和感）
     ============================================================ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     14. 动效
     ============================================================ */
  --dur-instant: 120ms;
  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-slower: 900ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --hover-lift: -3px;
  /* 亮底阴影明显，位移可略大 */
  --hover-lift-lg: -4px;
  --hover-lift-sm: -2px;

  /* ============================================================
     15. 字号（流体，沿用 v1 令牌）
     ============================================================ */
  --fs-display-xl: clamp(2.25rem, 1.35rem + 3.4vw, 4rem);
  --fs-display: clamp(2rem, 1.35rem + 2.5vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 1.25rem + 2vw, 2.625rem);
  --fs-h2: clamp(1.5rem, 1.16rem + 1.4vw, 2.125rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --fs-h4: 1.1875rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-micro: 0.75rem;
  --fs-metric: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --fs-metric-sm: 1.875rem;

  /* 行高 */
  --lh-tight: 1.12;
  --lh-heading: 1.24;
  --lh-snug: 1.45;
  --lh-body: 1.75;
  --lh-relaxed: 1.85;
  --lh-none: 1;

  /* 行宽 */
  --measure-body: 68ch;
  --measure-lead: 52ch;

  /* ============================================================
     16. 间距（沿用 v1）
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ============================================================
     17. 布局（沿用 v1）
     ============================================================ */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 880px;
  --container-text: 720px;
  --container-pad: 24px;
  --grid-gap: var(--space-8);

  --section-y: 96px;
  --section-y-sm: 64px;
  --section-y-lg: 128px;
  --section-hero: 160px;
  --section-head-gap: 56px;

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ============================================================
     18. 层级（沿用 v1）
     ============================================================ */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 250;
  --z-modal: 300;
  --z-toast: 400;

  /* 固定亮色主题声明 */
  color-scheme: light;
}

/* ===== 移动端令牌覆写（V2 §10） ===== */
@media (max-width: 767px) {
  :root {
    --section-y: 64px;
    --section-y-lg: 80px;
    --section-hero: 96px;
    --section-head-gap: 36px;
    --container-pad: 20px;
    --grid-gap: var(--space-5);
    --noise-opacity: .025;
    --grid-size: 48px;
    --ls-wider: 0.11em;
  }
}

/* ============================================================
   全局基线
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--color-primary-400);
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

/* 全局噪点层（body::after，全站仅 1 次，灰度 feColorMatrix） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    opacity: .02;
  }
}

/* ============================================================
   布局工具类
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--text {
  max-width: var(--container-text);
}

.section {
  padding-block: var(--section-y);
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--lg {
  padding-block: var(--section-y-lg);
}

.section--alt {
  background: var(--surface-1);
}

.section--white {
  background: var(--surface-2);
}

/* 类名不改，值改暗 */
.section+.section {
  border-top: 1px solid var(--border-subtle);
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 单卡组：卡片占中列、两侧留白对称（如 experts.html「公司经营专家」组） */
.grid-3--single {
  grid-template-columns: 1fr minmax(0, 420px) 1fr;
}

.grid-3--single>* {
  grid-column: 2;
}

@media (max-width: 1023px) {

  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3--single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3--single>* {
    grid-column: auto;
  }
}

@media (max-width: 767px) {

  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* 区块头部固定模式：Eyebrow → H2 → 导语 */
.section-head {
  margin-bottom: var(--section-head-gap);
}

.section-head--center {
  text-align: center;
}

.section-head .badge--eyebrow {
  margin-bottom: var(--space-4);
}

.section-head h2 {
  margin-bottom: var(--space-5);
}

.section-head .lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: var(--measure-lead);
}

.section-head--center .lead {
  margin-inline: auto;
}

/* ============================================================
   导航栏（暗底滚动态）
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  height: 72px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur-base) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}

.nav--scrolled {
  height: 64px;
  background: rgba(251, 250, 247, .86);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--border-hairline);
}

/* 底部细线微光（暖纸主题：强调蓝弱显） */
.nav--scrolled::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-a18) 50%, transparent);
  opacity: .5;
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--ls-snug);
}

.nav__logo svg {
  flex: none;
  color: var(--color-primary-400);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 2px;
  height: 1px;
  border-radius: 1px;
  background: var(--color-primary-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link.is-active {
  color: var(--color-text-primary);
}

.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 汉堡按钮（<1024px 显示） */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
}

@media (max-width: 1023px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: inline-flex;
  }

  .nav__actions .btn--ghost {
    display: none;
  }
}

/* 移动端抽屉 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  z-index: var(--z-drawer);
  background: var(--surface-3);
  box-shadow: var(--elev-overlay);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  visibility: hidden;
  border-left: 1px solid var(--border-hairline);
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.drawer__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--surface-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.drawer__link {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
}

.drawer__link.is-active {
  color: var(--color-text-primary);
  background: var(--surface-4);
}

.drawer__cta {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--scrim-strong);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   按钮（暗黑风）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding-inline: var(--space-6);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.btn--sm {
  height: 36px;
  padding-inline: var(--space-4);
  font-size: 14px;
  border-radius: var(--radius-sm);
}

.btn--lg {
  height: 54px;
  padding-inline: var(--space-8);
  font-size: var(--fs-body);
}

/* 主按钮：墨色填充 + 白字（handhold 式黑底主按钮） */
.btn--primary {
  background: var(--color-ink);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-xs);
}

.btn--primary:active {
  transform: translateY(0) scale(.985);
  background: var(--color-ink-active);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}

.btn--primary:focus-visible {
  box-shadow: var(--ring-focus);
}

/* 次按钮：描边 */
.btn--secondary {
  background: var(--surface-2);
  color: var(--color-text-primary);
  border-color: var(--border-interactive);
}

.btn--secondary:active {
  background: var(--surface-3);
  transform: translateY(0);
}

.btn--secondary:disabled {
  background: transparent;
  color: var(--color-text-disabled);
  border-color: var(--border-default);
  cursor: not-allowed;
}

/* 幽灵按钮 */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  padding-inline: var(--space-3);
}

.btn--ghost:active {
  background: rgba(16, 24, 40, .06);
}

/* 月白按钮（hero 副 CTA 或 accent 已占用时） */
.btn--moon {
  background: var(--color-neutral-50);
  color: var(--color-text-primary);
  border: 1px solid var(--border-subtle);
}

.btn--moon:hover {
  background: #FFFFFF;
  transform: translateY(var(--hover-lift-sm));
}

.btn--moon:active {
  background: var(--color-neutral-100);
  transform: translateY(0);
}

/* 文字链接按钮（带箭头） */
.btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary-400);
}

.btn--link .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Primary Glow：亮底降级为柔和投影（黑底主按钮不做蓝色光晕） */
.btn-glow {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.btn-glow:hover {
  box-shadow: var(--shadow-md);
}

/* 深色底上的按钮变体（保留兼容） */
.btn--on-dark {
  background: var(--surface-3);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

/* Stripe 式箭头链接 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary-400);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
}

/* hover 态统一包裹（触屏防粘滞）：边框变亮 + 表面提档 + ≤2px 位移 */
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    color: var(--color-text-primary);
    background: rgba(16, 24, 40, .05);
  }

  .nav__link:hover::after {
    transform: scaleX(1);
  }

  .btn--primary:hover {
    background: var(--color-ink-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(var(--hover-lift-sm));
  }

  .btn--secondary:hover {
    background: var(--surface-3);
    border-color: var(--border-interactive);
    transform: translateY(0);
  }

  .btn--ghost:hover {
    background: rgba(16, 24, 40, .05);
    color: var(--color-text-primary);
  }

  .btn--on-dark:hover {
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-lg);
  }

  .btn--link:hover {
    color: var(--color-primary-300);
  }

  .btn--link:hover .arrow {
    transform: translateX(3px);
  }

  .link-arrow:hover .arrow {
    transform: translateX(4px);
  }

  .card:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    transform: translateY(var(--hover-lift));
    box-shadow: var(--elev-card-hover);
  }

  .card-glass:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--elev-card-hover);
  }

  .card--feature:hover .feature-icon {
    background: var(--primary-a12);
  }

  .card--feature:hover .feature-icon svg {
    stroke: var(--color-primary-300);
  }

  .card--role:hover::before {
    opacity: 1;
  }

  .card--case:hover {
    transform: translateY(var(--hover-lift-lg));
  }

  .card--pricing:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--elev-card-hover);
  }

  .card--pricing-featured:hover {
    transform: translateY(var(--hover-lift)) scale(1.02);
    box-shadow: var(--glow-accent-md), var(--shadow-md);
  }

  .tag:hover,
  .badge:hover {
    transform: translateY(var(--hover-lift-sm));
  }

  .compare-table tbody tr:hover td {
    background: rgba(16, 24, 40, .03);
  }

  .faq__q:hover .faq__q-text {
    color: var(--color-text-primary);
  }

  .footer a:hover {
    color: var(--color-primary-300);
  }

  .article-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--elev-card-hover);
    border-color: var(--border-strong);
  }

  .channel-pill:hover {
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-md);
  }
}

/* ============================================================
   徽章与标签
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  border-radius: var(--radius-xs);
  padding: 6px 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* eyebrow 型（区块标签）：mono + 大字距 + 右上负边距补空洞 */
.badge--eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-right: -0.14em;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--color-text-muted);
  line-height: 1;
}

.badge--eyebrow--on-dark {
  border-color: var(--border-default);
  color: var(--color-text-muted);
}

.badge--recommend {
  background: var(--primary-a12);
  border: 1px solid var(--primary-a28);
  color: var(--color-primary-300);
  font-size: var(--fs-caption);
  letter-spacing: .02em;
}

.badge--status {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
  font-size: var(--fs-caption);
  letter-spacing: .01em;
  padding: 4px 12px;
}

.badge--status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
  animation: breathe 2.6s var(--ease-in-out) infinite;
}

.badge--accent {
  background: var(--primary-a12);
  border-color: var(--primary-a28);
  color: var(--color-primary-300);
}

.badge--warn {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

@keyframes breathe {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge--status::before {
    animation: none;
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--color-text-muted);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

/* ============================================================
   卡片
   ============================================================ */
.card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--elev-card);
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* 顶部 1px 暖光高光线：亮底卡片的"抬升"信号 */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 220, 198, .65) 22%, rgba(230, 220, 198, .65) 78%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.card:hover::before {
  opacity: 1;
}

.card:active {
  transform: translateY(0);
}

/* 强调卡（选中 / 推荐，V2 用 accent 边框 + 极弱外发光，禁阴影堆叠） */
.card--accent {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, var(--primary-a04), transparent 40%), var(--surface-2);
  box-shadow: var(--glow-accent-sm), var(--shadow-sm);
}

/* 玻璃拟态卡 → 终端面板（V2 §8.5：去玻璃） */
.card-glass {
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-inner-top), var(--shadow-lg);
  padding: var(--space-8);
  backdrop-filter: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

/* 堆叠卡：靠表面明度 + 边框亮度拉开前后，不用透明度 */
.stack-card-1 {
  background: var(--surface-3);
  border-color: var(--border-strong);
  z-index: 3;
}

.stack-card-2 {
  background: var(--surface-2);
  border-color: var(--border-hairline);
  z-index: 2;
}

.stack-card-3 {
  background: var(--surface-1);
  border-color: var(--border-subtle);
  z-index: 1;
}

/* 能力卡 */
.card--feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-icon {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--primary-a08);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hairline);
  transition: background var(--dur-base) var(--ease-out);
}

.feature-icon svg {
  stroke: var(--color-primary-400);
  transition: stroke var(--dur-base) var(--ease-out);
}

.card--feature p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

/* 角色卡（数字员工工牌 → 终端工牌卡，V2 §8.4） */
.card--role {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6) var(--space-7);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* 工牌"挂绳孔"暗示：顶部居中一道 24px 短线 */
.card--role::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--border-strong);
  border-radius: 0 0 2px 2px;
  opacity: 1;
}

/* 右上角十字准星刻度 */
.card--role::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  opacity: .5;
  background:
    linear-gradient(var(--border-strong) 0 0) center/9px 1px no-repeat,
    linear-gradient(var(--border-strong) 0 0) center/1px 9px no-repeat;
}

.card--role:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateY(var(--hover-lift));
}

.role-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.role-id {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* 头像位：方形终端窗口，不是圆形头像 */
.role-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  color: var(--color-text-secondary);
  box-shadow: var(--glow-inner-top);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.role-avatar svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.card--role:hover .role-avatar {
  color: var(--color-primary-400);
  border-color: var(--primary-a45);
  box-shadow: var(--glow-inner-top), 0 0 14px rgba(21, 93, 252, .12);
}

.role-name {
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

/* 环节：mono 小字 + 大字距 */
.role-stage {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: 3px;
}

/* 工号 EMP-0X：用计数器生成，六卡同色、靠 mono 工号区分角色（§8.4，零 HTML 改动） */
.grid {
  counter-reset: emp;
}

.card--role {
  counter-increment: emp;
}

.role-name::before {
  content: "EMP-" counter(emp, decimal-leading-zero) " · ";
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-faint);
}

.card--role>p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.role-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card--role:hover .role-skills>* {
  border-color: var(--border-hairline);
  color: var(--color-text-secondary);
}

/* 案例卡 */
.card--case {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.case-visual {
  aspect-ratio: 16/7;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--border-hairline);
}

.case-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  font-size: var(--fs-body-sm);
}

.case-body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.case-body p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.case-metrics {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  flex-wrap: wrap;
}

.case-metric .num {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-number);
  font-size: var(--fs-metric-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-400);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.case-metric .num svg {
  align-self: center;
}

.case-metric .lbl {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* 文章卡 */
.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--elev-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.article-card .cat {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-primary-400);
}

.article-card p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

/* ============================================================
   Hero 区（暗底 + 顶部月光，无 mesh 光斑 / 无斜切）
   ============================================================ */
.hero {
  position: relative;
  padding-block: calc(var(--section-hero) + 40px) var(--section-hero);
  background: var(--surface-0);
  overflow: hidden;
}

.hero--sub {
  padding-block: calc(var(--section-hero) - 20px) var(--section-y);
}

.glow-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* V2：唯一光源 = 顶部月光（无色相冷白，opacity ≤.075），无彩色光斑、无模糊 */
.glow-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--moonlight);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
  gap: var(--space-16);
  align-items: center;
}

.hero__title {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  font-weight: var(--fw-semibold);
}

.hero--sub .hero__title {
  font-size: var(--fs-display);
}

.hero__sub {
  margin-top: var(--space-6);
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: var(--measure-lead);
}

.hero__cta {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__note {
  margin-top: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* 渐变文字 → 禁：改为 单词级 accent + 下划 2px 刻度线（§2.6 B+C） */
.gradient-text {
  color: var(--color-primary-400);
  position: relative;
  white-space: nowrap;
}

.gradient-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.1em;
  height: 2px;
  background: var(--color-primary-500);
  opacity: .55;
  border-radius: 1px;
}

@supports not (background-clip: text) {
  .gradient-text {
    -webkit-text-fill-color: currentColor;
    color: var(--color-primary-400);
  }
}

/* Hero 右侧：3 张终端面板错落堆叠 */
.hero__stack {
  position: relative;
  min-height: 520px;
}

.hero__stack .card-glass {
  position: absolute;
  width: min(400px, 100%);
}

.stack-card-1 {
  top: 0;
  right: 8%;
  rotate: -2deg;
  box-shadow: var(--shadow-xl);
}

.stack-card-2 {
  top: 208px;
  left: 0;
  rotate: 1.5deg;
}

.stack-card-3 {
  top: 396px;
  right: 0;
  rotate: -1deg;
}

/* 对话流卡片（终端面板） */
.chat-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}

.card-glass .chat-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-faint);
  text-transform: uppercase;
}

.chat-title .who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.card-glass .chat-title .who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-secondary);
}

.chat-title .who svg {
  color: var(--color-primary-400);
  flex: none;
}

.chat-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.chat-row p {
  font-size: var(--fs-caption);
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-body);
}

.chat-in p {
  background: var(--surface-3);
  border-top-left-radius: var(--radius-xs);
}

.chat-ai {
  flex-direction: row-reverse;
}

.chat-ai p {
  background: var(--primary-a08);
  border-top-right-radius: var(--radius-xs);
  color: var(--color-text-primary);
}

.chat-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-4);
  color: var(--color-text-secondary);
}

.chat-avatar svg {
  stroke: currentColor;
}

.chat-avatar--ai {
  background: var(--primary-a18);
  color: var(--color-primary-400);
}

.chat-meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: right;
  font-family: var(--font-number);
}

.chat-meta b {
  color: var(--color-primary-400);
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--color-primary-400);
  margin-left: 2px;
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}

/* 实时线索流卡片 */
.lead-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lead-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.lead-row .time {
  font-family: var(--font-number);
  color: var(--color-text-muted);
  flex: none;
}

.lead-row .chan {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-a12);
}

.lead-row .chan svg {
  stroke: var(--color-primary-400);
}

.lead-row .name {
  flex: 1;
  color: var(--color-text-body);
}

.lead-row .tag {
  flex: none;
}

/* 经营指标卡 */
.metric-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.metric-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.metric-cell .num {
  font-family: var(--font-number);
  font-size: var(--fs-metric-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: 1.05;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.metric-cell .delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-success);
  font-family: var(--font-number);
}

.metric-cell .lbl {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.sparkline {
  margin-top: var(--space-1);
  color: var(--color-primary-400);
}

/* Hero 底部斜切已移除（V2 禁斜切）；保留降级钩子 */
.hero--angled {
  clip-path: none;
}

@media (max-width: 1023px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero__stack {
    min-height: 0;
  }

  .hero__stack .card-glass {
    position: static;
    rotate: 0deg;
    width: 100%;
  }

  .stack-card-2,
  .stack-card-3 {
    display: none;
  }
}

/* ============================================================
   数据条（滚动计数）
   ============================================================ */
.stats-bar {
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.stat {
  text-align: center;
}

.stat .num {
  font-family: var(--font-number);
  font-size: var(--fs-metric);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-none);
  color: var(--color-primary-400);
  font-variant-numeric: tabular-nums;
}

.stat .lbl {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.stats-note {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-10);
  }
}

@media (max-width: 639px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   生产线流程（4 步）
   ============================================================ */
.process {
  position: relative;
}

.process-input {
  max-width: var(--container-text);
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-16);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  position: relative;
}

.process-step {
  position: relative;
  text-align: left;
}

.step-no {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  border: 1px solid var(--border-accent);
  color: var(--color-primary-400);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  font-family: var(--font-number);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
  box-shadow: var(--glow-accent-sm);
}

.process-step::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 72px;
  right: calc(-1 * var(--grid-gap) + 16px);
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), var(--border-subtle));
}

.process-step:last-child::before {
  display: none;
}

.process-step .card {
  height: 100%;
}

.process-step h4 {
  margin-bottom: var(--space-2);
}

.process-step p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.process-note {
  margin-top: var(--space-12);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  max-width: var(--measure-body);
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .process-steps {
    grid-template-columns: 1fr 1fr;
  }

  .process-step::before {
    display: none;
  }
}

@media (max-width: 639px) {
  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step {
    padding-left: var(--space-16);
  }

  .process-step .step-no {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    font-size: var(--fs-body);
  }

  .process-step::before {
    display: block;
    top: 44px;
    bottom: -20px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--border-strong), var(--border-subtle));
  }

  .process-step:last-child::before {
    display: none;
  }
}

/* ============================================================
   三阶段路径
   ============================================================ */
.phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.phase-card {
  position: relative;
}

.phase-card .phase-no {
  font-family: var(--font-number);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-primary-400);
  margin-bottom: var(--space-3);
}

.phase-card h3 {
  margin-bottom: var(--space-3);
}

.phase-card p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
  .phases {
    grid-template-columns: 1fr;
  }
}

/* 4 步方法论横条 */
.method-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: var(--elev-card);
}

.method-item {
  padding: var(--space-8);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.method-item:last-child {
  border-right: none;
}

.method-item .k {
  font-family: var(--font-number);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-primary-400);
  letter-spacing: var(--ls-wide);
}

.method-item h4 {
  font-size: var(--fs-body);
}

.method-item p {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .method-bar {
    grid-template-columns: 1fr 1fr;
  }

  .method-item:nth-child(2n) {
    border-right: none;
  }

  .method-item:nth-child(-n+2) {
    border-bottom: var(--border-hairline);
  }
}

@media (max-width: 639px) {
  .method-bar {
    grid-template-columns: 1fr;
  }

  .method-item {
    border-right: none;
    border-bottom: var(--border-hairline);
  }

  .method-item:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   全链路漏斗（暗底：表面分层 + accent 转化率）
   ============================================================ */
.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.funnel-layer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 76px;
  color: var(--color-text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
}

.funnel-layer .rate {
  position: absolute;
  left: calc(100% + var(--space-6));
  white-space: nowrap;
  font-family: var(--font-number);
  font-size: var(--fs-metric-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-400);
  letter-spacing: -0.015em;
}

.funnel-layer .rate small {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  letter-spacing: 0;
  font-family: var(--font-sans);
}

.funnel-l1 {
  width: 100%;
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.funnel-l2 {
  width: 82%;
  background: var(--surface-2);
}

.funnel-l3 {
  width: 66%;
  background: var(--surface-1);
}

.funnel-l4 {
  width: 52%;
  background: rgba(16, 24, 40, .03);
}

.funnel-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding-right: 150px;
}

.funnel-caption {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .funnel-wrap {
    padding-right: 0;
  }

  .funnel-layer {
    flex-direction: column;
    gap: 0;
    height: auto;
    padding: var(--space-4);
  }

  .funnel-layer .rate {
    position: static;
    font-size: var(--fs-body-lg);
  }

  .funnel-layer .rate small {
    color: var(--color-text-muted);
  }
}

/* ============================================================
   渠道矩阵（集成对接）
   ============================================================ */
.channel-matrix {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  min-height: 420px;
}

.channel-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.channel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  border: 1px solid var(--border-accent);
  color: var(--color-primary-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  font-family: var(--font-number);
  box-shadow: var(--glow-accent-md);
  z-index: 2;
  text-align: center;
}

.channel-center small {
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}

.channel-pill {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.channel-pill svg {
  stroke: var(--color-primary-400);
  flex: none;
}

.cp-1 {
  left: 6%;
  top: 8%;
}

.cp-2 {
  right: 6%;
  top: 8%;
}

.cp-3 {
  left: 0;
  top: 46%;
}

.cp-4 {
  right: 0;
  top: 46%;
}

.cp-5 {
  left: 10%;
  bottom: 6%;
}

.cp-6 {
  right: 10%;
  bottom: 6%;
}

@media (max-width: 767px) {
  .channel-matrix {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    padding-top: var(--space-8);
  }

  .channel-lines {
    display: none;
  }

  .channel-center {
    position: static;
    transform: none;
    order: -1;
    flex: none;
    margin-bottom: var(--space-4);
  }

  .channel-pill {
    position: static;
  }
}

/* ============================================================
   定价
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.card--pricing {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--elev-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.card--pricing .plan-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.card--pricing .plan-desc {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  min-height: 3em;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.plan-price .num {
  font-family: var(--font-number);
  font-size: var(--fs-metric);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: var(--lh-none);
}

.plan-price .unit {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}

.plan-quota {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.plan-divider {
  border: none;
  border-top: var(--border-hairline);
  margin: var(--space-2) 0;
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--color-text-body);
}

.plan-list li svg {
  flex: none;
  margin-top: 4px;
  stroke: var(--color-success);
}

.card--pricing .btn {
  width: 100%;
}

/* 推荐档：暗底强调 = 表面提亮 + accent 边框 + 极弱外发光 + 顶部 2px 实线（不靠阴影） */
.card--pricing-featured {
  position: relative;
  background: var(--surface-3);
  border-color: var(--border-accent);
  box-shadow: var(--glow-accent-md), var(--shadow-md);
  z-index: 2;
}

.card--pricing-featured::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-a28), var(--color-primary-500) 50%, var(--primary-a28));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card--pricing-featured .badge--recommend {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .card--pricing-featured {
    transform: scale(1.02);
  }
}

@media (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .card--pricing-featured {
    order: -1;
    transform: none;
  }
}

/* 行业版横幅（L4）：全宽横排卡，置于四层阶梯之下 */
.plan-banner {
  margin-top: var(--grid-gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--elev-card);
}

.plan-banner__body {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-banner__body h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.plan-banner__body p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.plan-banner__price {
  font-family: var(--font-number);
  font-size: var(--fs-metric-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.plan-banner .btn {
  flex: none;
}

/* 四层阶梯（L0–L3）：四列窄卡，价格用小号 metric */
.pricing-grid--ladder {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-grid--ladder .card--pricing {
  padding: var(--space-8);
  gap: var(--space-4);
}

.pricing-grid--ladder .plan-price .num {
  font-size: var(--fs-metric-sm);
}

.pricing-grid--ladder .card--pricing .plan-desc {
  min-height: 2.6em;
}

@media (max-width: 1023px) {
  .pricing-grid--ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 639px) {
  .pricing-grid--ladder {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   功能对比表（hairline 表格）
   ============================================================ */
.compare-wrap {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--elev-card);
}

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}

.compare-table th,
.compare-table td {
  padding: 0 var(--space-5);
  height: 60px;
}

.compare-table thead th {
  position: sticky;
  top: 64px;
  z-index: var(--z-raised);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  text-align: center;
}

.compare-table thead th:first-child {
  text-align: left;
}

.compare-table thead th .th-plan {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-3);
}

.compare-table thead th .th-plan small {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

.compare-table tbody th,
.compare-table tbody td {
  border-bottom: 1px solid var(--border-subtle);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody th[scope="row"] {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  font-size: var(--fs-body-sm);
  position: sticky;
  left: 0;
  background: var(--surface-2);
  z-index: 1;
}

.compare-table tbody tr:nth-child(odd) td,
.compare-table tbody tr:nth-child(odd) th[scope="row"] {
  background: var(--surface-1);
}

.compare-table td {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--color-text-body);
  transition: background var(--dur-fast);
}

.compare-table .th-group th {
  height: 48px;
  background: var(--surface-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-align: left;
  position: static;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.compare-table .cell-yes svg {
  stroke: var(--color-success);
  margin-inline: auto;
}

.compare-table .cell-no svg {
  stroke: var(--color-text-disabled);
  margin-inline: auto;
}

/* 高亮列（我们家那列）：极弱 accent 底 + 左右 1px 边 */
.compare-table .col-featured {
  background: var(--primary-a04);
  border-left: 1px solid var(--primary-a18);
  border-right: 1px solid var(--primary-a18);
  color: var(--color-text-primary);
}

.compare-table tbody tr:nth-child(odd) td.col-featured {
  background: var(--primary-a08);
}

.compare-hint {
  display: none;
  margin-bottom: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 1023px) {
  .compare-hint {
    display: block;
  }

  .compare-table tbody th[scope="row"] {
    box-shadow: 4px 0 8px rgba(16, 24, 40, .08);
  }

  .compare-table thead th {
    top: 0;
  }
}

/* 增值说明小卡 */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.addon-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.addon-card h4 {
  font-size: var(--fs-body);
}

.addon-card p {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  flex: 1;
}

.addon-card .price {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-400);
}

@media (max-width: 1023px) {
  .addon-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .addon-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FAQ 手风琴
   ============================================================ */
.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--border-hairline);
  position: relative;
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: padding-left var(--dur-base) var(--ease-out);
}

.faq__q-text {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  line-height: var(--lh-snug);
  font-family: var(--font-display);
  letter-spacing: var(--ls-snug);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast);
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast);
}

.faq__icon::before {
  left: 0;
  top: 6.5px;
  width: 14px;
  height: 1px;
}

.faq__icon::after {
  top: 0;
  left: 6.5px;
  width: 1px;
  height: 14px;
}

.faq__item.is-open .faq__icon::after {
  transform: scaleY(0);
}

.faq__item.is-open .faq__icon::before {
  background: var(--color-primary-400);
}

.faq__item.is-open .faq__q {
  padding-left: var(--space-5);
}

.faq__item.is-open .faq__q-text {
  color: var(--color-text-primary);
}

.faq__item.is-open .faq__a-inner {
  padding-left: var(--space-5);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a-inner {
  overflow: hidden;
  transition: padding-left var(--dur-base) var(--ease-out);
}

.faq__a-inner p {
  padding-bottom: var(--space-6);
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  max-width: var(--measure-body);
}

/* ============================================================
   深色 CTA 区（暗底 + 侧光月光，无斜切 / 无彩色光斑）
   ============================================================ */
.cta-deep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-1);
  padding-block: calc(var(--section-y-lg) + var(--space-8)) var(--section-y-lg);
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.cta-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--moonlight-side);
  pointer-events: none;
}

.cta-deep h2 {
  color: var(--color-text-primary);
  font-size: var(--fs-h1);
  max-width: 22em;
  margin-inline: auto;
}

.cta-deep .lead {
  margin: var(--space-5) auto 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-lg);
  max-width: var(--measure-lead);
}

.cta-deep .cta-actions {
  margin-top: var(--space-10);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.cta-deep .note {
  margin-top: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* 无斜切变体（保留钩子，V2 不再斜切） */
.cta-deep--flat {
  clip-path: none;
}

/* 解决方案页：深色区块（去斜切，仅作表面分层） */
.section--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-1);
  padding-block: calc(var(--section-y-lg) + var(--space-8)) var(--section-y-lg);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.section--dark .section-head h2 {
  color: var(--color-text-primary);
}

.section--dark .section-head .lead {
  color: var(--color-text-secondary);
}

/* 深色区内漏斗：表面分层 + accent 转化率（已统一在 .funnel 中处理） */
.section--dark .funnel-layer {
  color: var(--color-text-primary);
}

/* ============================================================
   页脚（暗底 surface）
   ============================================================ */
.footer {
  background: var(--surface-1);
  color: var(--color-text-secondary);
  padding-block: var(--space-20) var(--space-8);
  font-size: var(--fs-body-sm);
  border-top: 1px solid var(--border-subtle);
}

.footer a {
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
}

.footer__brand .nav__logo {
  color: var(--color-primary-400);
  margin-bottom: var(--space-4);
}

.footer__brand p {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  max-width: 30ch;
}

.footer h4 {
  color: var(--color-text-primary);
  font-size: var(--fs-body);
  margin-bottom: var(--space-5);
}

.footer__col li {
  margin-bottom: var(--space-3);
}

.footer__bottom {
  padding-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 639px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   定价页：取消 v1 浅色全页背景，统一暗底
   ============================================================ */
.page-pricing .hero {
  background: transparent;
}

/* ============================================================
   材质层（按需挂在区块上；用量受 §5 约束）
   ============================================================ */
.tex-grid {
  position: relative;
  isolation: isolate;
}

.tex-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 78%);
}

.tex-grid--major::before {
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line-lg) 0 1px, transparent 1px calc(var(--grid-size) * 5)),
    repeating-linear-gradient(90deg, var(--grid-line-lg) 0 1px, transparent 1px calc(var(--grid-size) * 5)),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
}

.tex-moon {
  position: relative;
  isolation: isolate;
}

.tex-moon::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: var(--moonlight);
}

.tex-moon--side::before {
  background: var(--moonlight-side);
}

.tex-scan {
  position: relative;
  overflow: hidden;
}

.tex-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(16, 24, 40, .03) 0 1px, transparent 1px 4px);
}

.tex-scan--sweep::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 88px;
  background: linear-gradient(180deg, transparent, rgba(21, 93, 252, .08), transparent);
  animation: scanSweep 6.5s var(--ease-in-out) infinite;
}

@keyframes scanSweep {
  0% {
    top: -88px;
  }

  100% {
    top: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tex-scan--sweep::before {
    animation: none;
    opacity: 0;
  }
}

/* 边框流光（signature 微交互，全站 ≤3 处，默认不用，挂在显式 .beam 元素上） */
.beam {
  position: relative;
  overflow: hidden;
}

.beam::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-angle, 0deg), transparent 0deg, transparent 300deg, rgba(21, 93, 252, .55) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: beamSpin 7s linear infinite;
}

@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes beamSpin {
  to {
    --beam-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beam::after {
    animation: none;
    opacity: .25;
  }
}

/* 月面刻度装饰件 */
.tick-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: .55;
}

.tick-corner::before,
.tick-corner::after {
  content: "";
  position: absolute;
  background: var(--border-strong);
}

.tick-corner::before {
  left: 0;
  top: 4px;
  width: 10px;
  height: 1px;
}

.tick-corner::after {
  top: 0;
  left: 4px;
  width: 1px;
  height: 10px;
}

.contour-ring circle {
  fill: none;
  stroke: rgba(16, 24, 40, .10);
  stroke-width: 1;
}

.contour-ring circle:nth-child(3) {
  stroke: var(--primary-a18);
  stroke-dasharray: 3 5;
}

/* 诗性文案（人文反差，每页 ≤1 处） */
.verse {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, .9rem + .8vw, 1.5rem);
  font-weight: var(--fw-regular);
  letter-spacing: .06em;
  line-height: 2;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
}

.verse::before,
.verse::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  margin: var(--space-8) auto;
  background: linear-gradient(180deg, transparent, var(--border-default), transparent);
}

/* 英文大写标签通用（大字距补右侧负边距） */
.eyebrow-en {
  margin-right: -0.14em;
}

/* ============================================================
   滚动入场动画（V2 §7.3：位移收紧 10px，保留 JS 钩子 .is-visible）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   无障碍动效兜底（必须实现）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 高对比模式：加深正文、加重边框（亮底适配） */
@media (prefers-contrast: more) {
  :root {
    --color-text-body: rgba(13, 12, 10, .92);
    --color-text-secondary: rgba(13, 12, 10, .82);
    --color-text-muted: rgba(13, 12, 10, .72);
    --border-hairline: rgba(16, 24, 40, .28);
    --border-interactive: rgba(16, 24, 40, .60);
    --noise-opacity: 0;
  }
}

/* 斜切 <768px 兜底（V2 全站已无斜切，此处仅保险） */
@media (max-width: 767px) {

  .hero--angled,
  .cta-deep,
  .section--dark {
    clip-path: none;
  }
}

/* ============================================================
   专家团 DAG 流水线展示（solutions.html）
   ============================================================ */
.pipeline-board {
  padding: var(--space-8);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border-hairline);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  overflow-x: auto;
}

.pipeline-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  min-width: 860px;
}

.pipeline-node {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-hairline);
  background: var(--surface-2);
  text-align: center;
  transition: border-color .2s ease, transform .2s ease;
}

.pipeline-node:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.pipeline-node--gate {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.pipeline-icon {
  font-size: 22px;
  line-height: 1;
}

.pipeline-node strong {
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}

.pipeline-node small {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pipeline-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .pipeline-board {
    padding: var(--space-4);
  }
}

/* ============================================================
   V3 WARM PAPER 补丁（消化历史硬编码，零 HTML 改动优先）
   ============================================================ */
/* Logo：墨底白勾（替代硬编码 #06070A 描边） */
.nav__logo svg rect {
  fill: var(--color-ink);
}

.nav__logo svg path {
  stroke: #FFFFFF;
}

.footer__brand .nav__logo {
  color: var(--color-text-primary);
}

/* 指标上行箭头：硬编码 #12A87A → 语义成功绿 */
.num svg[stroke="#12A87A"] path {
  stroke: var(--color-success);
}

/* 粒子画布（hero 背景层，位于文字之下） */
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero>.container {
  position: relative;
  z-index: 1;
}

.glow-bg>.container {
  position: relative;
  z-index: 1;
}

/* ===================== platform.html 专用 ===================== */

/* Hero 控制台面板：固定单卡，不再错落堆叠 */
.hero__stack {
  min-height: 0;
}

.hero__stack .card-glass {
  position: static;
  width: 100%;
}

.console-panel .chat-title {
  margin-bottom: var(--space-4);
}

/* 花名册行 */
.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px var(--space-3);
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
}

.roster-row .r-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-body);
}

.roster-row .r-name svg {
  color: var(--color-primary-400);
  flex: none;
}

.roster-row .r-stage {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.roster-row--lead {
  background: var(--primary-a08);
  border-color: var(--primary-a18);
}

.roster-row--lead .r-name {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

.roster-row--lead .r-stage {
  color: var(--color-primary-400);
}

.console-metrics {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* 指标条 3 格 */
.metric-board--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-board--3 .num {
  font-size: var(--fs-body-lg);
}

/* 三步流程（复用 process-steps，收敛为 3 列） */
.process-steps--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .process-steps--3 {
    grid-template-columns: 1fr;
  }
}

/* 三层集成架构示意 */
.arch {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.arch-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-card);
}

.arch-layer .a-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}

.arch-layer .a-title svg {
  color: var(--color-primary-400);
  flex: none;
}

.arch-layer .a-sub {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-snug);
}

.arch-layer--core {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, var(--primary-a04), transparent 40%), var(--surface-2);
  box-shadow: var(--glow-accent-sm), var(--shadow-sm);
}

.arch-arrow {
  align-self: center;
  padding-block: var(--space-2);
  color: var(--color-primary-400);
  font-size: var(--fs-h4);
  line-height: 1;
}

.arch-note {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.arch-note svg {
  color: var(--color-primary-400);
  flex: none;
}

/* SDK 代码示意条 */
.code-block {
  max-width: 780px;
  margin: var(--space-12) auto 0;
  padding: var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-card);
}

.code-block pre {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: var(--color-text-body);
}

.code-block pre code {
  font-family: inherit;
}

.code-block .c-cm {
  color: var(--color-text-faint);
}