/* ============================================================
   DeepConnect · Demo V1.1
   视觉系统 · 全站统一锁死
   ============================================================ */

:root {
  /* ============ 配色 · 苹果灰阶系统 v2 ============ */
  /* 主背景 · 苹果官网精确值 #FBFBFD */
  --bg-light: #FBFBFD;
  --bg-light-pure: #FFFFFF;
  --bg-secondary: #F5F5F7;        /* 苹果浅灰底 · 用于卡片/分隔屏 */
  --bg-tertiary: #FAFAFA;          /* 更浅的灰 · 用于 hover 态 / 表头底色 */

  /* 暗背景 · 苹果黑 (比纯黑柔和) */
  --bg-dark: #1D1D1F;
  --bg-dark-pure: #000000;

  /* 文字色 · 白底 */
  --text-on-light: #1D1D1F;        /* 苹果主文字 */
  --text-on-light-mute: #86868B;   /* 苹果副文字灰 */
  --text-on-light-faint: #D2D2D7;  /* 苹果分割线灰 */

  /* 文字色 · 黑底 */
  --text-on-dark: #F5F5F7;
  --text-on-dark-mute: #A1A1A6;
  --text-on-dark-faint: #424245;

  /* 分割线 */
  --line-on-light: #D2D2D7;        /* 苹果标准分割线 */
  --line-on-light-strong: #1D1D1F;
  --line-on-dark: #424245;
  --line-on-dark-strong: #6E6E73;

  /* 品牌红 · 保持 */
  --dc-red: #D4302F;
  --dc-red-dim: rgba(212, 48, 47, 0.12);
  --dc-red-hover: #B82826;

  /* 字体 */
  --font-serif-cn: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-sans-cn: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-serif-en: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* 间距 */
  --space-section: 14rem;
  --space-section-mobile: 7rem;
  --max-content: 1280px;

  /* 动画 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body {
  font-family: var(--font-sans-cn);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

/* 文字选中色 */
::selection {
  background: var(--dc-red);
  color: #fff;
}

/* ============================================================
   通用 · 章节 · 区块翻转
   ============================================================ */

.section {
  position: relative;
  width: 100%;
  padding: var(--space-section) 0;
  overflow: hidden;
}

.section-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section-light {
  background: var(--bg-light);
  color: var(--text-on-light);
}

.section-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 4rem;
  position: relative;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ch-head-center {
  justify-content: center;
}

.ch-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dc-red);
  letter-spacing: 0.12em;
}

.ch-label {
  color: var(--text-on-dark-mute);
  font-weight: 400;
  letter-spacing: 0.18em;
}

.section-light .ch-label {
  color: var(--text-on-light-mute);
}

.section-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
}

.section-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}

.section-quote {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-on-dark-mute);
  margin-bottom: 5rem;
  letter-spacing: 0.04em;
}

.section-light .section-quote {
  color: var(--text-on-light-mute);
}

.section-quote-muted {
  font-style: normal;
  opacity: 0.75;
}

.section-foot {
  margin-top: 5rem;
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  line-height: 2;
  color: var(--text-on-dark-mute);
  text-align: center;
  letter-spacing: 0.04em;
}

.section-light .section-foot {
  color: var(--text-on-light-mute);
}

.dc-red {
  color: var(--dc-red) !important;
}

/* ============================================================
   Reveal 动画 · Apple 瀑布流式纤维感
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(6px) scale(0.99);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   导航
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem 0;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-on-dark);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.nav.is-light {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: var(--line-on-light);
}

.nav.is-light .nav-logo,
.nav.is-light .nav-meta {
  color: var(--text-on-light);
}

.nav.is-light .nav-version,
.nav.is-light .nav-date,
.nav.is-light .nav-sep {
  color: var(--text-on-light-mute);
}

.nav-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-on-dark);
}

.nav-logo {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', sans-serif;
  font-size: 1.32rem;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1;
}

.logo-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--dc-red);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45);
  animation: logo-dot-pulse 3.6s ease-in-out infinite;
}

@keyframes logo-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(212, 48, 47, 0); }
}

.logo-text {
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: baseline;
}

.logo-text-deep {
  font-weight: 300;
}

.logo-text-connect {
  font-weight: 500;
}

.nav-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-sep {
  opacity: 0.5;
}

/* ============================================================
   章节进度指示
   ============================================================ */

.chapter-rail {
  position: fixed;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
}

.chapter-rail ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.chapter-rail li {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-on-dark-faint);
  cursor: pointer;
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  padding: 2px 0;
}

.chapter-rail li:hover {
  color: var(--dc-red);
  transform: translateX(-4px);
}

.chapter-rail li.is-active {
  color: var(--dc-red);
  transform: translateX(-6px);
}

.chapter-rail li.is-active::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--dc-red);
  vertical-align: middle;
  margin-right: 6px;
}

.chapter-rail.on-light li {
  color: var(--text-on-light-faint);
}

.chapter-rail.on-light li:hover,
.chapter-rail.on-light li.is-active {
  color: var(--dc-red);
}

/* ============================================================
   00 · HERO
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rem;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212, 48, 47, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1180px;
  text-align: left;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  color: var(--text-on-dark-mute);
  margin-bottom: 3.5rem;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-serif-cn);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.8vw, 5.8rem);
  line-height: 1.28;
  letter-spacing: 0.015em;
  margin-bottom: 4rem;
}

.hero-title .line {
  display: block;
}

.hero-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 700;
  position: relative;
}

.hero-sub {
  font-family: var(--font-serif-en);
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  color: var(--text-on-dark-mute);
  line-height: 2.2;
  text-transform: uppercase;
}

.hero-scroll {
  position: absolute;
  bottom: -8rem;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--text-on-dark-mute) 30%, var(--text-on-dark-mute) 70%, transparent);
  animation: scroll-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1.1); }
}

.scroll-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--text-on-dark-mute);
  text-transform: uppercase;
}

/* ============================================================
   01 · 时代命题
   ============================================================ */

.era-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.era-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2.6rem 0;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-serif-cn);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  font-weight: 400;
  line-height: 1.6;
}

.era-row:last-child {
  border-bottom: 1px solid var(--line-on-dark);
}

.era-when {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--text-on-dark-mute);
  text-transform: uppercase;
}

.era-tech {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.era-arrow {
  font-family: var(--font-mono);
  color: var(--text-on-dark-faint);
  font-size: 1.4rem;
  text-align: center;
}

.era-result strong {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.era-row-hl .era-when {
  color: var(--dc-red);
}

.era-row-hl .era-tech {
  color: var(--dc-red);
}

.era-row-hl .era-result strong {
  font-size: 1.4em;
}

.era-foot {
  margin-top: 5rem;
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  line-height: 2;
  color: var(--text-on-dark-mute);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ============================================================
   02 · 一句话核心
   ============================================================ */

.big-statement {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 6rem;
  max-width: 18ch;
}

.big-statement em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 700;
}

.two-axis {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
  padding: 4rem 0;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
}

.axis {
  padding: 1rem 0;
}

.axis-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--dc-red);
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}

.axis-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1.6rem;
  letter-spacing: 0.02em;
}

.axis-foot {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--text-on-light-mute);
}

.axis-divider {
  background: var(--line-on-light);
}

/* ============================================================
   03 · 两张图,各管各的 (manifesto)
   ============================================================ */

.section-manifesto {
  padding: 16rem 0;
  text-align: center;
}

.manifesto-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 0 4rem;
}

.manifesto-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-top: 4rem;
  margin-bottom: 5rem;
}

.manifesto-body {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 2.1;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.04em;
}

.manifesto-body p {
  margin-bottom: 1.5rem;
}

.manifesto-emphasis {
  color: var(--text-on-dark);
  font-weight: 500;
}

.dc-red-line {
  position: relative;
  color: var(--dc-red);
  font-weight: 600;
  white-space: nowrap;
}

.dc-red-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--dc-red);
}

.manifesto-foot {
  margin-top: 6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--text-on-dark-faint);
  text-transform: uppercase;
}

/* ============================================================
   04 · 横向 · 星链网络
   ============================================================ */

.starlink {
  margin: 5rem 0;
  padding: 3.5rem 0;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
}

.starlink-track {
  display: grid;
  grid-template-columns: 1fr 60px 1.2fr 60px 1fr 60px 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
}

.node {
  padding: 1.8rem 1.4rem;
  border: 1px solid var(--line-on-light-strong);
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.node:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.node-core {
  border: 2px solid var(--dc-red);
  background: #fff;
  position: relative;
}

.node-core::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 1px solid var(--dc-red);
  pointer-events: none;
  opacity: 0.3;
  transform: scale(1.02);
}

.node-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--text-on-light-mute);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.node-tag.dc-red {
  color: var(--dc-red);
  font-weight: 600;
}

.node-name {
  font-family: var(--font-serif-cn);
  font-size: 1.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}

.node-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-on-light-mute);
  margin-bottom: 1.2rem;
}

.node-children {
  font-size: 0.85rem;
  color: var(--text-on-light-mute);
  font-family: var(--font-sans-cn);
  border-top: 1px solid var(--line-on-light);
  padding-top: 0.9rem;
  letter-spacing: 0.02em;
}

.link-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-arrow {
  font-family: var(--font-mono);
  color: var(--text-on-light-faint);
  font-size: 0.8rem;
  letter-spacing: -0.1em;
}

.starlink-foot {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-on-light-mute);
  text-align: center;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-on-light);
  line-height: 1.8;
}

.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}

.rule {
  border-top: 1px solid var(--line-on-light-strong);
  padding-top: 1.6rem;
  position: relative;
}

.rule-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  margin-bottom: 1rem;
  font-weight: 500;
}

.rule-text {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================================
   05 · 纵向 · 四层知识镜像
   ============================================================ */

.section-mirror .mq-br { display: inline; }

.mirror-terminal {
  margin: 4rem auto 0;
  max-width: 880px;
  border: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
  font-family: var(--font-mono);
  position: relative;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 80px rgba(212, 48, 47, 0.02);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
}

.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-on-dark-faint);
}

.terminal-dot:last-of-type {
  background: var(--dc-red);
  opacity: 0.7;
}

.terminal-title {
  margin-left: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-on-dark-mute);
}

.terminal-body {
  padding: 2.4rem 2rem;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--bg-dark);
}

.layer {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.2rem;
  padding: 1.2rem 1rem;
  align-items: center;
  border: 1px solid var(--line-on-dark);
  background: rgba(255, 255, 255, 0.02);
}

.layer-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dc-red);
  letter-spacing: 0.08em;
}

.layer-name {
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-on-dark);
  margin-bottom: 0.2rem;
}

.layer-desc {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-on-dark-mute);
}

.layer-3 { background: rgba(212, 48, 47, 0.03); }
.layer-2 { background: rgba(255, 255, 255, 0.03); }
.layer-1 { background: rgba(255, 255, 255, 0.025); }
.layer-0 {
  background: rgba(212, 48, 47, 0.05);
  border-color: rgba(212, 48, 47, 0.25);
}

.layer-0 .layer-name {
  color: var(--dc-red);
  font-weight: 600;
}

.sync-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-on-dark-mute);
}

.sync-arrow {
  font-size: 1rem;
  color: var(--text-on-dark-mute);
}

.sync-key {
  background: rgba(212, 48, 47, 0.08);
  border-left: 2px solid var(--dc-red);
  padding-left: 1rem;
  margin: 0.4rem 0;
  font-weight: 600;
  letter-spacing: 0.12em;
  position: relative;
}

.sync-key .sync-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  animation: star-pulse 2.6s var(--ease-in-out) infinite;
}

.sync-key .sync-text {
  text-shadow: 0 0 24px rgba(212, 48, 47, 0.4);
}

@keyframes star-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

.terminal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1rem;
  border-top: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-on-dark-mute);
  flex-wrap: wrap;
}

.foot-sep {
  opacity: 0.4;
}

/* ============================================================
   06 · 红线
   ============================================================ */

.section-redlines {
  border-top: 1px solid var(--line-on-dark);
}

.redlines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}

.redline {
  background: rgba(212, 48, 47, 0.05);
  border-left: 3px solid var(--dc-red);
  padding: 2.2rem 2rem;
  position: relative;
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.redline:hover {
  background: rgba(212, 48, 47, 0.09);
  transform: translateX(4px);
}

.redline-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--dc-red);
  margin-bottom: 1.4rem;
  font-weight: 500;
}

.redline-title {
  font-family: var(--font-serif-cn);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}

.redline-body {
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.02em;
}

/* ============================================================
   07 · 大益试验田
   ============================================================ */

.chain {
  margin: 4rem 0;
  padding: 3rem 0;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
}

.chain-row {
  display: grid;
  grid-template-columns: 1fr 40px 1.4fr 40px 1fr 40px 1fr;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.chain-cell {
  font-family: var(--font-serif-cn);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  padding: 0.8rem 0.4rem;
  border-bottom: 1px solid var(--line-on-light-strong);
}

.chain-cell-core {
  font-weight: 700;
  color: var(--dc-red);
  border-bottom: 2px solid var(--dc-red);
}

.chain-arrow {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--text-on-light-faint);
  font-size: 1.1rem;
}

.chain-row-mapping .chain-cell-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-on-light-mute);
  text-align: center;
  padding: 0.4rem 0;
}

.chain-row-mapping .chain-arrow-sub {
  font-size: 0.8rem;
  color: var(--text-on-light-faint);
}

.chain-foot {
  margin-top: 2.5rem;
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  text-align: center;
  color: var(--text-on-light-mute);
  font-style: normal;
  letter-spacing: 0.06em;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin: 4rem 0;
  padding: 3rem 0;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
}

.metric {
  text-align: center;
}

.metric-num {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  color: var(--text-on-light);
}

.metric-num .unit {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--dc-red);
  margin-left: 0.05em;
  vertical-align: 0.5em;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-on-light-mute);
  text-transform: uppercase;
}

.scaling {
  margin-top: 4rem;
}

.scaling-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--dc-red);
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  text-align: center;
}

.scaling-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.scaling-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  border: 1px solid var(--line-on-light-strong);
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.scaling-cell:hover {
  border-color: var(--dc-red);
  transform: translateY(-4px);
}

.scaling-time {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--text-on-light-mute);
  text-transform: uppercase;
}

.scaling-arrow {
  font-family: var(--font-mono);
  color: var(--text-on-light-faint);
}

.scaling-num {
  font-family: var(--font-serif-cn);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================================
   08 · 路线图
   ============================================================ */

.roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 4rem;
  border-left: 1px solid var(--line-on-dark);
}

.rm-stage {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--line-on-dark);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  position: relative;
  transition: background 0.4s var(--ease-out);
}

.rm-stage:hover {
  background: rgba(212, 48, 47, 0.04);
}

.rm-stage::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--text-on-dark-faint);
  transform-origin: left;
  transition: background 0.4s var(--ease-out);
}

.rm-stage:nth-child(1)::before { background: var(--dc-red); }

.rm-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}

.rm-name {
  font-family: var(--font-serif-cn);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.rm-goal {
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-on-dark-mute);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.rm-allocation {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-on-dark-faint);
  text-transform: uppercase;
  border-top: 1px solid var(--line-on-dark);
  padding-top: 1rem;
}

/* ============================================================
   09 · 收口
   ============================================================ */

.section-coda {
  padding: 16rem 0 10rem;
  text-align: center;
}

.coda-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 4rem;
  text-align: center;
}

.coda-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-bottom: 4rem;
}

.coda-title em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.coda-sub {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--text-on-dark-mute);
  margin-bottom: 8rem;
  letter-spacing: 0.06em;
}

.lineage {
  margin: 6rem 0;
  padding: 4rem 0;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.lineage-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--text-on-dark-mute);
  text-transform: uppercase;
  margin-bottom: 3rem;
}

.lineage-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.lineage-item {
  text-align: center;
  padding: 1.2rem 0.5rem;
  border-top: 1px solid var(--line-on-dark);
  position: relative;
}

.lineage-item.lineage-current {
  border-top: 2px solid var(--dc-red);
}

.lineage-current .lin-name {
  color: var(--dc-red);
  font-weight: 600;
}

.lin-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-on-dark-mute);
  margin-bottom: 0.6rem;
}

.lin-name {
  font-family: var(--font-serif-cn);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.coda-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin-top: 5rem;
}

.coda-logo {
  font-family: var(--font-serif-en);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}

.logo-dot-inline {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--dc-red);
  transform: translateY(-0.05em);
}

.coda-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--text-on-dark-mute);
  text-transform: uppercase;
}

/* ============================================================
   DC Lobster 浮窗
   ============================================================ */

.lobster {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 80;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border: 1px solid var(--line-on-dark-strong);
  padding: 0.85rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 0.4s var(--ease-out);
  text-transform: uppercase;
}

.lobster:hover {
  border-color: var(--dc-red);
  color: var(--dc-red);
  transform: translateY(-2px);
}

.lobster-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dc-red);
  font-size: 0;
  animation: lobster-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes lobster-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(212, 48, 47, 0); }
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1080px) {
  .section-inner,
  .nav-inner,
  .manifesto-inner,
  .coda-inner {
    padding: 0 2.5rem;
  }
  .chapter-rail { display: none; }

  .starlink-track {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .link-line {
    transform: rotate(90deg);
    height: 30px;
  }

  .rules,
  .redlines {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .roadmap {
    grid-template-columns: 1fr;
    border-left: none;
  }
  .rm-stage {
    border-right: 1px solid var(--line-on-dark);
    border-left: 1px solid var(--line-on-dark);
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1rem;
  }

  .scaling-row {
    grid-template-columns: 1fr;
  }

  .lineage-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .two-axis {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .axis-divider {
    height: 1px;
    width: 100%;
  }

  .chain-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .chain-arrow {
    transform: rotate(90deg);
  }

  .era-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    text-align: left;
  }
  .era-arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --space-section: 7rem;
  }

  .section-inner,
  .nav-inner,
  .manifesto-inner,
  .coda-inner,
  .hero {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 3rem;
  }

  .nav-meta {
    display: none;
  }

  .lobster-text {
    display: none;
  }
  .lobster {
    padding: 0.85rem;
  }

  .terminal-body {
    padding: 1.4rem 1rem;
  }

  .layer {
    grid-template-columns: 60px 1fr;
    gap: 0.6rem;
    padding: 1rem 0.6rem;
  }

  .layer-name {
    font-size: 1rem;
  }

  .layer-desc {
    font-size: 0.7rem;
  }

  .terminal-foot {
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.62rem;
  }

  .foot-sep { display: none; }
}

/* ============================================================
   主页 6 屏精简版 · 新增组件
   ============================================================ */

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  transition: all 0.4s var(--ease-out);
  border-radius: 0;
  white-space: nowrap;
}

.btn-primary {
  background: var(--dc-red);
  color: #fff;
  border-color: var(--dc-red);
}
.btn-primary:hover {
  background: #B82826;
  border-color: #B82826;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.85;
}
.btn-ghost:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.section-light .btn-ghost { color: var(--text-on-light); }
.section-dark  .btn-ghost { color: var(--text-on-dark); }

.btn-lg {
  padding: 1.2rem 2.6rem;
  font-size: 1rem;
}

.btn .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero CTA 区 ---------- */
.hero-cta {
  margin-top: 4rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- nav 链接 ---------- */
.nav-link {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-sans-en);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  padding: 0.3rem 0;
  border-bottom: 1.5px solid transparent;
  transition: opacity 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav-link:hover { opacity: 1; }
.nav-link.is-active {
  opacity: 1;
  border-bottom-color: var(--dc-red, #D4302F);
}

/* ============================================================
   02 · 痛点共鸣
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 6rem;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
}
.pain-card {
  padding: 4rem 3rem;
  border-right: 1px solid var(--line-on-light);
  transition: background 0.4s var(--ease-out);
}
.pain-card:last-child { border-right: none; }
.pain-card:hover { background: var(--bg-tertiary); }

.pain-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--dc-red);
  margin-bottom: 1.8rem;
}
.pain-title {
  font-family: var(--font-serif-cn);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1.6rem;
  color: var(--text-on-light);
}
.pain-body {
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--text-on-light-mute);
}

/* ============================================================
   03 · 60 秒看懂 · 线框 mockup
   ============================================================ */
.mock {
  margin: 6rem auto 5rem;
  max-width: 920px;
  border: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
  font-family: var(--font-mono);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
}
.mock-dot {
  width: 8px; height: 8px;
  background: var(--text-on-dark-faint);
  border-radius: 50%;
}
.mock-title {
  margin-left: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-on-light-mute);
}
.mock-body {
  padding: 2rem 1.5rem;
}
.mock-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 1.5rem;
  padding: 0.8rem 0;
  font-size: 0.88rem;
  color: var(--text-on-light-mute);
  align-items: center;
}
.mock-row-key {
  border-top: 1px dashed var(--line-on-dark-strong);
  border-bottom: 1px dashed var(--line-on-dark-strong);
  padding: 1.2rem 0;
  margin: 0.6rem 0;
}
.mock-tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-on-light-mute);
}
.mock-stat {
  font-size: 0.7rem;
  color: var(--text-on-dark-faint);
  letter-spacing: 0;
}
.mock-foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line-on-dark-strong);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-on-light-mute);
}
.mock-foot a {
  color: var(--dc-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.mock-foot a:hover { border-bottom-color: var(--dc-red); }

.how-list {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.how-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3rem;
  align-items: baseline;
  padding: 2.4rem 0;
  border-top: 1px solid var(--line-on-dark);
}
.how-row:last-child { border-bottom: 1px solid var(--line-on-dark); }
.how-key {
  font-family: var(--font-serif-cn);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--dc-red);
}
.how-val {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-on-dark-mute);
}
.how-val strong {
  display: block;
  color: var(--text-on-dark);
  font-weight: 500;
  margin-bottom: 0.4rem;
  font-size: 1.15rem;
}

/* ============================================================
   04 · 信念 + 红线
   ============================================================ */
.belief-grid {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
}
.belief-card {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid var(--line-on-light);
  text-align: center;
}
.belief-card:last-child { border-right: none; }
.belief-num {
  font-family: var(--font-serif-en);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--dc-red);
  margin-bottom: 1.2rem;
}
.belief-pct {
  font-size: 2.6rem;
  vertical-align: super;
  margin-left: 0.1em;
}
.belief-key {
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-on-light);
  margin-bottom: 0.8rem;
}
.belief-val {
  font-size: 0.92rem;
  color: var(--text-on-light-mute);
  line-height: 1.7;
}

/* ---- 红线 band ---- */
.redline-band {
  margin-top: 5rem;
  padding: 3rem 3rem;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-left: 4px solid var(--dc-red);
}
.redline-band-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
}
.rb-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--dc-red);
}
.rb-title {
  font-family: var(--font-serif-cn);
  font-size: 1.25rem;
  color: var(--text-on-light-faint);
}
.redline-band-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rb-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 1.5rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line-on-dark-strong);
  font-size: 0.95rem;
}
.rb-num {
  font-family: var(--font-mono);
  color: var(--dc-red);
  font-size: 0.85rem;
}
.rb-text {
  color: var(--text-on-light-mute);
}
.redline-band-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-on-dark-strong);
  font-size: 0.85rem;
  color: var(--text-on-light-mute);
}
.redline-band-foot a {
  color: var(--dc-red);
  text-decoration: none;
  margin-left: 0.5rem;
  border-bottom: 1px solid transparent;
}
.redline-band-foot a:hover { border-bottom-color: var(--dc-red); }

/* ============================================================
   05 · 早期共建伙伴卡
   ============================================================ */
.partner-card {
  margin: 5rem 0 4rem;
  padding: 3.5rem 3rem;
  border: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
  position: relative;
}
.partner-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--dc-red);
  margin-bottom: 1.5rem;
}
.partner-name {
  font-family: var(--font-serif-cn);
  font-size: 2rem;
  font-weight: 600;
  color: var(--bg-secondary);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
.partner-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-on-light-mute);
  margin-bottom: 2.4rem;
  max-width: 720px;
}
.partner-quote {
  padding: 1.6rem 2rem;
  border-left: 2px solid var(--dc-red);
  background: rgba(212, 48, 47, 0.04);
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-on-light-faint);
  font-style: normal;
}
.quote-source {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-on-light-mute);
}

/* ============================================================
   06 · CTA · 收口
   ============================================================ */
.coda-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  color: var(--dc-red);
  margin-bottom: 2.5rem;
  text-align: center;
}
.cta-actions {
  margin: 3.5rem 0 4rem;
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   迎新词模态弹窗
   ============================================================ */
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.welcome-modal.is-open {
  display: flex;
  animation: welcomeFadeIn 0.4s var(--ease-out);
}
@keyframes welcomeFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.welcome-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  padding: 3.5rem 3rem 2.5rem;
  background: var(--bg-dark);
  border: 1px solid var(--dc-red);
  color: var(--text-on-dark);
  animation: welcomeRise 0.5s var(--ease-out);
}
@keyframes welcomeRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.welcome-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--text-on-light-mute);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s;
}
.welcome-close:hover { color: var(--dc-red); }
.welcome-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--dc-red);
  margin-bottom: 1.6rem;
}
.welcome-title {
  font-family: var(--font-serif-cn);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.8rem;
  color: var(--bg-secondary);
}
.welcome-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 700;
}
.welcome-body p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-on-light-mute);
  margin-bottom: 0.6rem;
}
.welcome-emph {
  color: var(--dc-red);
  font-weight: 500;
  margin-top: 1.2rem;
}
.welcome-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-on-dark-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-on-light-mute);
}
.welcome-count {
  color: var(--dc-red);
  font-weight: 500;
  margin-right: 0.5rem;
}

/* ============================================================
   响应式 · 移动端兜底
   ============================================================ */
@media (max-width: 880px) {
  .pain-grid,
  .belief-grid {
    grid-template-columns: 1fr;
  }
  .pain-card,
  .belief-card {
    border-right: none;
    border-bottom: 1px solid var(--line-on-light);
  }
  .pain-card:last-child,
  .belief-card:last-child { border-bottom: none; }

  .hero-cta,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn { width: 100%; }

  .how-row {
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
  }
  .how-key { font-size: 1.6rem; }

  .partner-card,
  .redline-band { padding: 2.2rem 1.6rem; }
  .partner-name { font-size: 1.5rem; }

  .mock { font-size: 0.75rem; }
  .mock-row {
    grid-template-columns: 40px 1fr;
  }
  .mock-stat { display: none; }
  .welcome-card { padding: 2.5rem 1.8rem 2rem; }
  .welcome-title { font-size: 1.3rem; }
}

/* ============================================================
   /demo 专用 · Bloomberg 终端式信息密度
   ============================================================ */

/* ---------- 顶部 ticker 信息条 ---------- */
.demo-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--dc-red);
  overflow: hidden;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-on-light-mute);
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  padding-left: 100%;
}
.ticker-item {
  margin-right: 3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.ticker-key {
  color: var(--dc-red);
  font-weight: 500;
}
.ticker-red { color: var(--dc-red); }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* /demo 顶导下移让出 ticker */
.nav-demo {
  top: 28px;
}
.nav-demo + .chapter-rail-demo {
  margin-top: 28px;
}
body:has(.demo-ticker) {
  padding-top: 28px;
}

/* ---------- Hero 元数据条 ---------- */
.demo-meta-band {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-on-dark-strong);
  border-bottom: 1px solid var(--line-on-dark-strong);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.dmb-cell {
  padding: 1.4rem 1rem;
  border-right: 1px solid var(--line-on-dark-strong);
  text-align: center;
}
.dmb-cell:last-child { border-right: none; }
.dmb-key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--dc-red);
  margin-bottom: 0.5rem;
}
.dmb-val {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-on-light-faint);
  letter-spacing: 0.05em;
}

/* ---------- 密集引语块 dense-quote ---------- */
.dense-quote {
  margin-top: 5rem;
  padding: 2.5rem 3rem;
  border-left: 3px solid var(--dc-red);
  background: rgba(212, 48, 47, 0.04);
}
.dense-quote-light {
  background: rgba(212, 48, 47, 0.05);
}
.dq-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--dc-red);
  margin-bottom: 1rem;
}
.dq-text {
  font-family: var(--font-serif-cn);
  font-size: 1.3rem;
  line-height: 1.8;
  color: inherit;
}
.dq-text em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}
.dq-source {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-on-light-mute);
}

/* ---------- 解耦对比表 ---------- */
.decouple-table {
  margin-top: 5rem;
  border-top: 1px solid var(--line-on-dark-strong);
  border-left: 1px solid var(--line-on-dark-strong);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.dt-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  border-bottom: 1px solid var(--line-on-dark-strong);
}
.dt-cell {
  padding: 1rem 1.4rem;
  border-right: 1px solid var(--line-on-dark-strong);
  color: var(--text-on-light-mute);
}
.dt-head .dt-cell {
  background: var(--bg-dark);
  color: var(--dc-red);
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.dt-key {
  color: var(--text-on-light-mute);
  letter-spacing: 0.05em;
}

/* ---------- 镜像参数表 ---------- */
.param-table {
  margin-top: 4rem;
  border-top: 1px solid var(--line-on-dark-strong);
  border-left: 1px solid var(--line-on-dark-strong);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.pt-head, .pt-row {
  display: grid;
  grid-template-columns: 100px 130px 180px 1fr 160px;
  border-bottom: 1px solid var(--line-on-dark-strong);
}
.pt-cell {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--line-on-dark-strong);
  color: var(--text-on-light-mute);
}
.pt-head .pt-cell {
  background: var(--bg-dark);
  color: var(--dc-red);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pt-mono {
  color: var(--text-on-light-faint);
  letter-spacing: 0.1em;
}

/* ---------- 16 条红线 网格 ---------- */
.redlines-16 {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-on-dark-strong);
  border-left: 1px solid var(--line-on-dark-strong);
}
.rl16 {
  padding: 2rem 2rem;
  border-right: 1px solid var(--line-on-dark-strong);
  border-bottom: 1px solid var(--line-on-dark-strong);
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.2rem;
  row-gap: 0.6rem;
  transition: background 0.4s var(--ease-out);
}
.rl16:hover {
  background: rgba(212, 48, 47, 0.04);
}
.rl16-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--dc-red);
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 0.2rem;
}
.rl16-title {
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bg-secondary);
}
.rl16-body {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-on-light-mute);
}
.redlines-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line-on-dark-strong);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--text-on-light-mute);
  text-align: center;
}

/* ---------- 路线图详情列表 ---------- */
.rm-detail {
  list-style: none;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line-on-dark-strong);
}
.rm-detail li {
  padding: 0.4rem 0 0.4rem 1.2rem;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-on-light-mute);
}
.rm-detail li::before {
  content: '─';
  position: absolute;
  left: 0;
  color: var(--dc-red);
  font-family: var(--font-mono);
}

/* ---------- 响应式 · /demo ---------- */
@media (max-width: 880px) {
  .demo-ticker { font-size: 0.65rem; }
  .demo-meta-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .dmb-cell:nth-child(2) { border-right: none; }
  .dmb-cell:nth-child(1), .dmb-cell:nth-child(2) {
    border-bottom: 1px solid var(--line-on-dark-strong);
  }
  .dt-row, .dt-head {
    grid-template-columns: 1fr;
  }
  .dt-cell { border-right: none; border-bottom: 1px solid var(--line-on-dark-strong); }
  .pt-head, .pt-row {
    grid-template-columns: 80px 1fr;
    font-size: 0.75rem;
  }
  .pt-cell { padding: 0.6rem 0.8rem; }
  .pt-cell:nth-child(n+3) { display: none; }
  .redlines-16 {
    grid-template-columns: 1fr;
  }
  .rl16 { padding: 1.6rem 1.2rem; }
  .dense-quote { padding: 1.8rem 1.4rem; }
  .dq-text { font-size: 1.05rem; }
}

/* ============================================================
   DC Lobster · 数字分身对话演示 (替代 ASCII mockup)
   终端风外壳 + 真实对话气泡 + 主权层提示
   ============================================================ */
.lobster-demo {
  margin: 6rem auto 5rem;
  max-width: 880px;
  border: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
  font-family: var(--font-sans-cn);
}

/* 顶部状态栏 */
.ld-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
}
.ld-dot {
  width: 8px; height: 8px;
  background: var(--text-on-dark-faint);
  border-radius: 50%;
}
.ld-title {
  margin-left: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-on-light-mute);
  flex: 1;
}
.ld-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--dc-red);
}

/* 对话主体 */
.ld-body {
  padding: 2.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 单条消息 */
.ld-msg {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 78%;
}
.ld-msg-bot { align-self: flex-start; }
.ld-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}
.ld-who {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-on-light-mute);
  padding: 0 0.4rem;
}
.ld-msg-bot .ld-who { color: var(--dc-red); }

.ld-bubble {
  padding: 1rem 1.3rem;
  font-size: 0.95rem;
  line-height: 1.7;
  border: 1px solid var(--line-on-dark-strong);
  background: var(--bg-dark);
  color: var(--text-on-light-faint);
  border-radius: 0;
}
.ld-msg-user .ld-bubble {
  background: var(--bg-dark);
  border-color: var(--text-on-dark-faint);
  color: var(--text-on-light-faint);
}
.ld-msg-bot .ld-bubble {
  background: var(--bg-dark);
  border-left: 2px solid var(--dc-red);
  color: var(--text-on-light-faint);
}

/* 章节标记条 (沉/连/用) */
.ld-meta {
  margin: 0.8rem 0 1.2rem;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  border-top: 1px dashed var(--bg-dark);
  border-bottom: 1px dashed var(--bg-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-on-light-mute);
  letter-spacing: 0.05em;
}
.ld-meta-key {
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dc-red);
  letter-spacing: 0;
  flex-shrink: 0;
}
.ld-meta-text {
  flex: 1;
  line-height: 1.6;
}
.ld-meta-red {
  border-top-color: var(--dc-red);
  border-bottom-color: var(--dc-red);
  background: rgba(212, 48, 47, 0.04);
}
.ld-meta-red .ld-meta-text {
  color: #E8B8B8;
}

/* 底部签名 */
.ld-foot {
  padding: 1.2rem 1.5rem;
  border-top: 1px solid var(--line-on-dark-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-on-light-mute);
  text-align: center;
}

/* 响应式 */
@media (max-width: 880px) {
  .lobster-demo { margin: 4rem auto 3.5rem; }
  .ld-body { padding: 1.6rem 1rem; gap: 0.8rem; }
  .ld-msg { max-width: 92%; }
  .ld-bubble { font-size: 0.88rem; padding: 0.8rem 1rem; }
  .ld-title { font-size: 0.62rem; }
  .ld-status { display: none; }
  .ld-meta {
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
    padding: 0.7rem 0.8rem;
  }
  .ld-foot { font-size: 0.7rem; padding: 1rem 0.8rem; }
}

/* ============================================================
   主页 4 屏钩子链 · Apple AirPods Pro 级
   仅作用于主页四屏 · 不影响 /demo
   ============================================================ */

/* 主页极简顶部:背景透明,只留 logo + /demo */
.nav-home {
  background: transparent;
  border-bottom: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-home .nav-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--text-on-dark-mute);
  text-transform: lowercase;
}
.nav-home .nav-link:hover { color: var(--dc-red); }

/* 主页章节进度指示:更克制 */
.chapter-rail-home ol li::before {
  background: var(--text-on-dark-faint);
}
.chapter-rail-home ol li.is-active::before {
  background: var(--dc-red);
}

/* ----- 屏 01 · 一刀 ----- */
.home-blade {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-dark);
}
.blade-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  padding: 0 6vw;
  text-align: center;
}
.blade-line {
  font-family: var(--font-serif-cn);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.4vw, 5.6rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
}
.blade-then {
  display: inline-block;
  margin-top: 0.6em;
  color: var(--dc-red);
  font-style: normal;
  font-weight: 500;
}
.blade-arrow {
  position: absolute;
  bottom: -22vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: var(--dc-red);
  opacity: 0.7;
  animation: bladeArrow 3s var(--ease-in-out) infinite;
  font-family: var(--font-mono);
}
@keyframes bladeArrow {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.4; }
  50%      { transform: translate(-50%, 8px); opacity: 0.95; }
}

/* ----- 屏 02 · 时代坐标 ----- */
.home-axis {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-dark);
}
.axis-inner {
  width: 100%;
  max-width: 1080px;
  padding: 0 6vw;
}
.axis-rows {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 5rem;
}
.axis-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1.2rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--text-on-dark-mute);
  white-space: nowrap;
}
.axis-year {
  color: var(--text-on-dark);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.axis-dash {
  color: var(--text-on-dark-faint);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: clip;
}
.axis-tech {
  color: var(--text-on-dark);
  padding: 0 1.2rem;
}
.axis-arrow {
  color: var(--text-on-dark-faint);
  letter-spacing: -0.02em;
}
.axis-result {
  color: var(--text-on-dark);
  padding-left: 1rem;
  min-width: 4rem;
}
.axis-row-now .axis-tech,
.axis-row-now .axis-result {
  color: var(--text-on-dark);
  font-weight: 600;
}
.axis-question {
  color: var(--dc-red);
  font-size: 2.4em;
  font-family: var(--font-serif-cn);
  font-weight: 400;
  line-height: 0.5;
  display: inline-block;
  transform: translateY(0.18em);
  padding-left: 0.4rem;
}
.axis-foot {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--text-on-dark-mute);
  text-transform: none;
  padding-left: 0.2rem;
  border-left: 2px solid var(--dc-red);
  padding-left: 1rem;
}

/* ----- 屏 03 · 看到东西在跑 (全屏 Lobster) ----- */
.home-running {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 0;
  background: var(--bg-dark);
}
.running-inner {
  width: 100%;
  max-width: 1180px;
  padding: 0 4vw;
}
.lobster-demo-fs {
  margin: 0 auto !important;
  max-width: 100% !important;
}
.ld-body-fs {
  padding: 2rem 2rem !important;
  gap: 0 !important;
}

/* 三轮对话块:每轮一个完整单元,右侧 64px 大字孤悬 */
.ld-turn {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 2rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px dashed var(--line-on-dark-strong);
}
.ld-turn:last-child { border-bottom: none; }
.ld-turn-redline { padding-top: 2rem; padding-bottom: 1.2rem; }
.ld-turn-main {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ld-glyph {
  font-family: var(--font-serif-cn);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  color: var(--text-on-dark);
  text-align: center;
  letter-spacing: 0;
  user-select: none;
}
.ld-glyph-red {
  color: var(--dc-red);
  position: relative;
}
.ld-glyph-red::after {
  content: '';
  position: absolute;
  inset: -10px -16px;
  border: 1px solid var(--dc-red);
  border-radius: 2px;
  opacity: 0.4;
}
.ld-bubble-keystone {
  border: 1px solid var(--dc-red) !important;
  background: rgba(212, 48, 47, 0.06) !important;
}
.ld-foot-fs {
  font-size: 0.82rem !important;
  padding: 1.4rem 1.5rem !important;
  letter-spacing: 0.12em !important;
}

/* ----- 屏 04 · 筛选 + 邀请 ----- */
.home-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-dark);
}
.gate-inner {
  width: 100%;
  max-width: 980px;
  padding: 0 6vw;
  text-align: center;
}
.gate-line {
  font-family: var(--font-serif-cn);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  margin-bottom: 3.5rem;
}
.gate-sub {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: var(--text-on-dark-mute);
  margin-bottom: 4rem;
}
.gate-sub .dc-red {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.gate-meta {
  display: inline-block;
  padding-left: 0.6rem;
  color: var(--text-on-dark-faint);
}
.gate-actions {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 6rem;
  flex-wrap: wrap;
}
.gate-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--text-on-dark-faint);
  flex-wrap: wrap;
}
.gate-foot-logo {
  font-family: var(--font-sans-cn);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-mute);
  font-size: 0.82rem;
}

/* 主页极简页脚 */
.site-footer-home {
  background: var(--bg-dark);
  border-top: none;
  padding: 1.4rem 0;
}
.site-footer-home .sf-inner {
  opacity: 0.5;
}

/* 响应式 */
@media (max-width: 880px) {
  .blade-line { font-size: clamp(2rem, 8vw, 3rem); }
  .blade-arrow { bottom: -28vh; }
  .axis-row {
    grid-template-columns: auto 1fr auto;
    font-size: 0.78rem;
  }
  .axis-dash, .axis-arrow { display: none; }
  .axis-row-now .axis-result { font-weight: 700; }
  .ld-turn {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ld-glyph {
    font-size: 2.6rem;
    text-align: left;
    padding-left: 0.6rem;
  }
  .gate-line { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .gate-actions { flex-direction: column; align-items: stretch; }
  .gate-actions .btn { width: 100%; }
}

/* ============================================================
   v3 · 三模块站点 (主页 / /product / /dayi)
   全部新增,不动旧 v2 样式
   ============================================================ */

/* ============ 全局顶部导航 · 苹果毛玻璃 ============ */
.nav-global {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(29, 29, 31, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.85rem 0;
}
.nav-global .nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-global .nav-logo {
  display: inline-flex; align-items: center; gap: 0.5em;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', sans-serif;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.012em;
  line-height: 1;
}
.nav-global .nav-logo .logo-text { color: #fff; display: inline-flex; align-items: baseline; }
.nav-global .nav-logo .logo-text-deep { font-weight: 300; }
.nav-global .nav-logo .logo-text-connect { font-weight: 500; }
.nav-global .nav-logo .logo-dot {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--dc-red);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45);
  animation: logo-dot-pulse 3.6s ease-in-out infinite;
}
.nav-global .nav-links {
  display: flex; align-items: center; gap: 1.6rem;
}
.nav-global .nav-link {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0;
  border-bottom: 1.5px solid transparent;
  transition: all 0.2s;
}
.nav-global .nav-link:hover { color: #fff; }
.nav-global .nav-link.is-active {
  color: #fff;
  border-bottom-color: var(--dc-red);
}
.nav-global .nav-cta {
  background: transparent;
  border: 1px solid var(--dc-red);
  color: var(--dc-red);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 2px;
}
.nav-global .nav-cta:hover {
  background: var(--dc-red);
  color: #fff;
}

/* ============ 主页 屏 01 (PPT P1) ============ */
.home-01 {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark);
  color: #fff;
  padding: 6rem 2rem 4rem;
}
.h01-inner {
  max-width: 1100px;
  text-align: center;
}
.h01-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.45em;
  color: rgba(255,255,255,0.45);
  margin: 0 0 3.5rem;
}
.h01-title {
  font-family: var(--font-serif-cn);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin: 0 0 3rem;
  font-size: clamp(3rem, 8vw, 6.5rem);
}
.h01-line {
  display: block;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  font-style: normal;
}
.h01-emph {
  display: block;
  color: var(--dc-red);
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
  margin-top: 0.15em;
}
.h01-sub {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0 0 4rem;
  font-weight: 300;
}
.h01-arrow {
  font-size: 1.6rem;
  color: var(--dc-red);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(8px); }
}

/* ============ 主页 屏 02 三个老师傅 (PPT P2) ============ */
.home-02 {
  min-height: 100vh;
  background: var(--bg-secondary);
  color: var(--text-on-light);
  padding: 8rem 2rem 6rem;
  display: flex; align-items: center;
}
.h02-inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.h02-head { margin-bottom: 4rem; text-align: center; }
.h02-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--dc-red);
  margin: 0 0 1.2rem;
  text-transform: uppercase;
}
.h02-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.45;
  font-weight: 500;
  margin: 0;
}
.h02-title em {
  font-style: normal;
  color: var(--dc-red);
  font-weight: 700;
}
.h02-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.h02-grid-2x2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
.h02-card {
  background: #fff;
  padding: 2.5rem 2rem;
  border-top: 3px solid var(--dc-red);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.h02-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08);
}
.h02-card-pain {
  flex: 1;
  padding-bottom: 1.6rem;
  border-bottom: 1px dashed var(--text-on-light-faint);
}
.h02-card-sol {
  padding-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.h02-sol-key {
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-on-light);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}
.h02-sol-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dc-red);
  background: rgba(230, 57, 70, 0.08);
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(230, 57, 70, 0.25);
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}
.h02-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--dc-red);
  margin-bottom: 1.4rem;
}
.h02-h {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-on-light);
  margin: 0;
}
.h02-h em {
  font-style: normal;
  color: var(--text-on-light);
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(230, 57, 70, 0.18) 60%);
  padding: 0 2px;
}
.h02-note {
  font-size: 0.9rem;
  color: var(--text-on-light-mute);
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--text-on-light-faint);
  font-style: normal;
  letter-spacing: 0.04em;
}
.h02-quote {
  border-left: 3px solid var(--dc-red);
  padding: 1.6rem 0 1.6rem 2rem;
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
  color: var(--text-on-dark-faint);
  margin: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.h02-quote em { font-style: normal; color: var(--dc-red); font-weight: 600; }

/* ============ 主页 屏 03 对照表 (PPT P3) ============ */
.home-03 {
  min-height: 100vh;
  background: var(--bg-dark);
  color: #fff;
  padding: 8rem 2rem 6rem;
  display: flex; align-items: center;
}
.h03-inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.h03-head { margin-bottom: 4rem; text-align: center; }
.h03-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1.2rem;
  text-transform: uppercase;
}
.h03-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.45;
  font-weight: 500;
  margin: 0;
}
.h03-title em {
  font-style: normal;
  color: var(--dc-red);
  font-weight: 700;
}
.h03-table {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 3rem;
}
.h03-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1.8fr;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s;
}
.h03-row:not(.h03-row-head):hover {
  background: rgba(230,57,70,0.04);
}
.h03-row-head {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(230,57,70,0.4);
}
.h03-cell {
  padding: 1.4rem 1.6rem;
  font-size: 1rem;
  line-height: 1.55;
}
.h03-row-head .h03-cell {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  text-transform: uppercase;
}
.h03-c1 {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.h03-c2 {
  color: rgba(255,255,255,0.45);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.h03-c3 {
  color: rgba(255,255,255,0.95);
}
.h03-c3 strong { color: #fff; font-weight: 600; }
.h03-quote {
  border-left: 3px solid var(--dc-red);
  padding: 1.6rem 0 1.6rem 2rem;
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.h03-quote em { font-style: normal; color: var(--dc-red); font-weight: 600; }

/* ============ 主页 屏 04 三句定义+CTA (PPT P1) ============ */
.home-04 {
  min-height: 100vh;
  background: var(--bg-dark);
  color: #fff;
  padding: 8rem 2rem 4rem;
  display: flex; align-items: center; justify-content: center;
}
.h04-inner { max-width: 1100px; width: 100%; text-align: center; }
.h04-triple {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0 auto 3rem;
  max-width: 880px;
}
.h04-row {
  display: grid;
  grid-template-columns: 90px 30px 1fr;
  align-items: center;
  text-align: left;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-serif-cn);
}
.h04-key {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--dc-red);
}
.h04-sep { color: rgba(255,255,255,0.4); font-size: 1.2rem; }
.h04-val {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.h04-val strong { color: #fff; font-weight: 700; }
.h04-tag {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-style: normal;
  font-weight: 500;
  color: var(--dc-red);
  margin: 0 0 3rem;
  letter-spacing: 0.04em;
}
.h04-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.h04-actions-three {
  gap: 1rem 1.4rem;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.h04-actions-three .btn {
  min-width: 200px;
  justify-content: center;
}
.h04-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
}
.h04-foot-logo {
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', sans-serif;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.h04-foot-logo .logo-text-deep { font-weight: 300; }
.h04-foot-logo .logo-text-connect { font-weight: 500; }
.logo-dot-inline {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--dc-red);
  display: inline-block;
  flex-shrink: 0;
}

/* ============ /product 全局 ============ */
.p-section-inner,
.d-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 8rem 2rem 6rem;
}
.p-section-num,
.d-section-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.p-section-title,
.d-section-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.4;
  font-weight: 500;
  margin: 0 0 3rem;
}
.p-section-title em,
.d-section-title em {
  font-style: normal;
  color: var(--dc-red);
  font-weight: 700;
}
.section-light .p-section-title,
.section-light .d-section-title { color: var(--text-on-light); }
.section-dark .p-section-title,
.section-dark .d-section-title { color: #fff; }
.p-section-quote,
.d-section-quote {
  border-left: 3px solid var(--dc-red);
  padding: 1.6rem 0 1.6rem 2rem;
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.65;
  margin: 3rem 0 0;
  max-width: 900px;
}
.section-dark .p-section-quote,
.section-dark .d-section-quote { color: rgba(255,255,255,0.9); }
.section-light .p-section-quote,
.section-light .d-section-quote { color: var(--text-on-dark-faint); }
.p-section-quote em,
.d-section-quote em { font-style: normal; color: var(--dc-red); font-weight: 600; }

/* /product hero */
.p-hero, .d-hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark); color: #fff;
  padding: 8rem 2rem 4rem;
}
.p-hero-inner, .d-hero-inner { max-width: 1100px; text-align: center; }
.p-hero-eyebrow, .d-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.45);
  margin: 0 0 3rem;
}
.p-hero-title, .d-hero-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
  font-weight: 500;
  margin: 0 0 2.5rem;
}
.p-hero-title .line, .d-hero-title .line {
  display: block;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
}
.p-hero-title em, .d-hero-title em {
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
  color: var(--dc-red);
}
.p-hero-sub, .d-hero-sub {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 3.5rem;
}
.p-hero-arrow, .d-hero-arrow {
  font-size: 1.4rem;
  color: var(--dc-red);
  animation: breathe 2.4s ease-in-out infinite;
}

/* /product 01 · 诚实路 */
.p-honest { background: var(--bg-secondary); }
.p-honest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}
.p-honest-card {
  background: #fff;
  padding: 2.5rem;
  border-top: 3px solid var(--dc-red);
}
.p-honest-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--dc-red);
  margin-bottom: 1.2rem;
}
.p-honest-h {
  font-family: var(--font-serif-cn);
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 0 1.4rem;
  color: var(--text-on-light);
}
.p-honest-body {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-on-dark-faint);
  margin: 0 0 1rem;
}
.p-honest-body strong { color: var(--text-on-light); font-weight: 700; }
.p-honest-list {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
}
.p-honest-list li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-on-light-mute);
  line-height: 1.6;
}
.p-honest-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--dc-red);
}
.p-honest-key {
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.4rem;
  background: rgba(230,57,70,0.06);
  border-left: 3px solid var(--dc-red);
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  line-height: 1.7;
}
.p-honest-stages {
  margin: 4rem 0 2rem;
  padding: 2.5rem;
  background: #fff;
  border: 1px solid var(--text-on-light-faint);
}
.p-stage-title {
  font-family: var(--font-serif-cn);
  font-size: 1.3rem;
  text-align: center;
  margin: 0 0 2rem;
  color: var(--text-on-light);
}
.p-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.p-stage {
  flex: 1;
  text-align: center;
  padding: 1.4rem;
  background: var(--bg-secondary);
}
.p-stage-when {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--dc-red);
  letter-spacing: 0.16em;
  margin-bottom: 0.5rem;
}
.p-stage-name {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-on-light);
  margin-bottom: 0.4rem;
}
.p-stage-do {
  font-size: 0.92rem;
  color: var(--text-on-light-mute);
}
.p-stage-arrow { color: var(--dc-red); font-size: 1.2rem; }

/* /product 01 · 它是 vs 它不是 双栏对照 */
.p-vsis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.p-vsis-card {
  background: #fff;
  padding: 2.4rem 2rem;
  border-top: 3px solid var(--dc-red);
}
.p-vsis-card.p-vsis-isnt {
  background: var(--text-on-light);
  color: var(--bg-secondary);
  border-top-color: var(--text-on-dark-faint);
}
.p-vsis-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  margin-bottom: 1.4rem;
  display: inline-block;
}
.p-vsis-tag-is { color: var(--dc-red); }
.p-vsis-tag-isnt { color: var(--text-on-light-mute); }
.p-vsis-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-vsis-list li {
  font-size: 0.96rem;
  line-height: 1.7;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-on-dark-faint);
}
.p-vsis-card.p-vsis-isnt .p-vsis-list li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: var(--text-on-light-faint);
}
.p-vsis-list li:last-child { border-bottom: none; }
.p-vsis-list strong {
  color: var(--text-on-light);
  font-weight: 700;
}
.p-vsis-card.p-vsis-isnt .p-vsis-list strong { color: #fff; }
.p-vsis-list-layered li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.p-vsis-layer {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--dc-red);
  background: rgba(230, 57, 70, 0.08);
  border: 1px solid rgba(230, 57, 70, 0.25);
  padding: 0.3rem 0.5rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  white-space: nowrap;
}

/* /product 02 横向图 - 通用化提示链接 */
.pmh-note-tip {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-on-light-mute);
  font-style: normal;
}
.pmh-link {
  color: var(--dc-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}
.pmh-link:hover { border-bottom-color: var(--dc-red); }

/* /product 02 · 四个不是 (legacy, 保留兼容) */
.p-not-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.p-not-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2.4rem 2rem;
  position: relative;
  transition: all 0.3s;
}
.p-not-card:hover {
  border-color: rgba(230,57,70,0.4);
  background: rgba(230,57,70,0.04);
}
.p-not-num {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  color: rgba(230,57,70,0.3);
  line-height: 1;
  margin-bottom: 1rem;
  font-weight: 700;
}
.p-not-h {
  font-family: var(--font-serif-cn);
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0 1rem;
  font-weight: 500;
}
.p-not-h em { font-style: normal; color: var(--dc-red); font-weight: 700; }
.p-not-body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* /product 03 · 图一 横向 */
.p-map-h-diagram {
  background: #fff;
  border: 1px solid var(--text-on-light-faint);
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  overflow-x: auto;
}
.pmh-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 800px;
  margin-bottom: 2rem;
}
.pmh-node {
  flex: 1;
  background: var(--bg-secondary);
  padding: 1.6rem 1.2rem;
  text-align: center;
  border-top: 2px solid rgba(0,0,0,0.15);
  position: relative;
}
.pmh-node-core {
  background: var(--text-on-light);
  color: #fff;
  border-top-color: var(--dc-red);
}
.pmh-node-star {
  color: var(--dc-red);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.pmh-node-name {
  font-family: var(--font-serif-cn);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.pmh-node-type {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--dc-red);
  margin-bottom: 0.6rem;
}
.pmh-node-core .pmh-node-type { color: #ff6b76; }
.pmh-node-attach {
  font-size: 0.85rem;
  color: var(--text-on-light-mute);
  line-height: 1.5;
}
.pmh-node-core .pmh-node-attach { color: rgba(255,255,255,0.6); }
.pmh-arrow {
  display: flex; align-items: center;
  color: var(--dc-red);
  font-size: 1.4rem;
  font-weight: 300;
  padding: 0 0.3rem;
}
.pmh-note {
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--text-on-light-faint);
  font-size: 0.88rem;
  color: var(--text-on-light-mute);
  line-height: 1.6;
}
.pmh-note strong { color: var(--dc-red); }

/* /product 03 · 三列规则 */
.p-rules {
  background: #fff;
  border: 1px solid var(--text-on-light-faint);
  padding: 2.5rem;
}
.p-rules-title {
  font-family: var(--font-serif-cn);
  font-size: 1.3rem;
  text-align: center;
  margin: 0 0 2rem;
  color: var(--text-on-light);
}
.p-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.p-rules-col { padding: 1rem; }
.p-rules-h {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--dc-red);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--text-on-light-faint);
}
.p-rules-col ul {
  list-style: none; padding: 0; margin: 0;
}
.p-rules-col li {
  padding: 0.4rem 0 0.4rem 1.2rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-on-dark-faint);
  line-height: 1.55;
}
.p-rules-col li::before {
  content: "·";
  position: absolute; left: 0;
  color: var(--dc-red);
  font-weight: 700;
}

/* /product 04 · 图二 纵向 */
.p-map-v-diagram {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2.5rem 2rem;
  margin-bottom: 3rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.pmv-layer {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(255,255,255,0.2);
  padding: 1.4rem 1.6rem;
  gap: 1.4rem;
}
.pmv-layer-3 { border-left-color: rgba(230,57,70,0.4); }
.pmv-layer-2 { border-left-color: rgba(230,57,70,0.6); }
.pmv-layer-1 { border-left-color: rgba(230,57,70,0.8); }
.pmv-layer-0 {
  border-left-color: var(--dc-red);
  background: rgba(230,57,70,0.08);
}
.pmv-num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dc-red);
  min-width: 50px;
}
.pmv-body { flex: 1; }
.pmv-name {
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.pmv-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.pmv-mirror {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.12em;
  padding: 0.6rem 0;
}
.pmv-mirror-red {
  color: var(--dc-red);
  font-weight: 600;
}
.p-map-link {
  text-align: center;
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  margin: 2rem 0 0;
  line-height: 1.7;
}
.p-map-link strong { color: #fff; }

/* /product 05 · Lobster */
.p-lobster-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.p-lobster-text { padding: 1rem 0; }
.pl-h {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  margin: 1.6rem 0 0.6rem;
  text-transform: uppercase;
}
.pl-h:first-child { margin-top: 0; }
.p-lobster-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-on-dark-faint);
  margin: 0;
}
.pl-list {
  list-style: none; padding: 0; margin: 0.4rem 0 0;
}
.pl-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--text-on-light-faint);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-on-dark-faint);
}
.pl-list li:last-child { border-bottom: none; }
.pl-list strong { color: var(--text-on-light); font-weight: 700; }
.p-lobster-demo {
  background: var(--text-on-light);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
}
.p-lobster-demo .ld-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-dark);
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
}
.p-lobster-demo .ld-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.p-lobster-demo .ld-title { flex: 1; margin-left: 0.6rem; letter-spacing: 0.12em; }
.p-lobster-demo .ld-status { color: #4ade80; font-size: 0.72rem; }
.p-lobster-demo .ld-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}
.p-lobster-demo .ld-msg {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.p-lobster-demo .ld-msg-user { align-items: flex-end; }
.p-lobster-demo .ld-who {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em;
  padding: 0 0.4rem;
}
.p-lobster-demo .ld-bubble {
  max-width: 85%;
  padding: 0.85rem 1.1rem;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
  line-height: 1.6;
  border-radius: 4px;
  font-family: var(--font-serif-cn);
}
.p-lobster-demo .ld-msg-user .ld-bubble {
  background: rgba(230,57,70,0.15);
  border: 1px solid rgba(230,57,70,0.3);
}
.p-lobster-demo .ld-bubble-keystone {
  border: 1px solid var(--dc-red);
  background: rgba(230,57,70,0.1);
}
.p-lobster-demo .ld-bubble-keystone strong { color: #ff6b76; }
.p-lobster-demo .ld-foot {
  padding: 0.9rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  text-align: center;
}
.dc-red { color: var(--dc-red); }

/* /product 06 · 八个永不做 */
.p-never-sub {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.95rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.p-never-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 4rem;
}
.p-never-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1.8rem 1.4rem;
  transition: all 0.3s;
}
.p-never-card:hover {
  border-color: var(--dc-red);
  background: rgba(230,57,70,0.05);
}
.p-never-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--dc-red);
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.p-never-h {
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 0.7rem;
  line-height: 1.45;
  font-weight: 600;
}
.p-never-card p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}
.p-coda {
  border: none;
  text-align: center;
  margin: 4rem 0;
  padding: 0;
}
.p-coda-line {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}
.p-coda-emph {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 500;
}
.p-next, .d-next {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* /dayi 01 · 为什么是大益 */
.d-why { background: var(--bg-secondary); }
.d-why-lead {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.7;
  color: var(--text-on-dark-faint);
  margin: 0 0 3rem;
  max-width: 880px;
}
.d-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.d-why-card {
  background: #fff;
  padding: 2rem;
  border-left: 3px solid var(--dc-red);
}
.d-why-tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  font-weight: 700;
  margin-bottom: 1rem;
}
.d-why-h {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  color: var(--text-on-light);
  margin: 0 0 0.6rem;
  line-height: 1.5;
  font-weight: 600;
}
.d-why-card p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--text-on-light-mute);
  line-height: 1.6;
}
.d-why-foot {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-on-light-mute);
  padding-top: 0.8rem;
  border-top: 1px solid var(--text-on-light-faint);
  text-transform: uppercase;
}

/* /dayi 02 · 生态图 */
.d-shape-diagram {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2.5rem 1.5rem;
  margin-bottom: 3rem;
  overflow-x: auto;
}
.dsd-trunk {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  min-width: 1000px;
}
.dsd-col { flex: 1; display: flex; flex-direction: column; }
.dsd-col-core .dsd-node-core {
  background: var(--dc-red);
  color: #fff;
}
.dsd-node {
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 2px;
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  font-weight: 600;
}
.dsd-node span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
}
.dsd-node-core span { color: rgba(255,255,255,0.85); }
.dsd-down {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em;
  padding: 0.6rem 0;
}
.dsd-attach {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 1rem;
  flex: 1;
}
.dsd-attach > div:first-child {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--dc-red);
  letter-spacing: 0.12em;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dsd-attach ul {
  list-style: none; padding: 0; margin: 0;
}
.dsd-attach li {
  padding: 0.3rem 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}
.dsd-edge {
  display: flex; align-items: flex-start;
  padding-top: 1.1rem;
  color: var(--dc-red);
  font-size: 1.4rem;
  font-weight: 300;
}

/* /dayi 03 · 五行业同构 */
.d-iso { background: var(--bg-tertiary); }
.d-iso-sub {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--text-on-light-mute);
}
.d-iso-table {
  background: #fff;
  border: 1px solid var(--text-on-light-faint);
  margin-bottom: 3rem;
  overflow-x: auto;
}
.dit-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.6fr 1.2fr 1.2fr;
  border-bottom: 1px solid var(--text-on-light-faint);
  min-width: 900px;
}
.dit-row:last-child { border-bottom: none; }
.dit-row-head {
  background: var(--text-on-light);
}
.dit-row-head .dit-cell {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--dc-red);
  text-transform: uppercase;
  padding: 0.9rem 1rem;
}
.dit-row-anchor {
  background: rgba(230,57,70,0.04);
  border-bottom: 2px solid var(--dc-red);
}
.dit-row-anchor .dit-cell { color: var(--text-on-light); font-weight: 600; }
.dit-cell {
  padding: 1.1rem 1rem;
  font-size: 0.92rem;
  color: var(--text-on-dark-faint);
  line-height: 1.55;
  border-right: 1px solid var(--text-on-light-faint);
}
.dit-cell:last-child { border-right: none; }

.d-iso-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.dit3-card {
  background: #fff;
  padding: 1.8rem;
  border-top: 3px solid var(--dc-red);
}
.dit3-h {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-on-light);
  margin-bottom: 0.8rem;
}
.dit3-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-on-light-mute);
  line-height: 1.7;
}
.dit3-card strong { color: var(--dc-red); }

/* /dayi 04 · 三大联盟 */
.d-leagues-lead {
  font-family: var(--font-serif-cn);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.8);
  margin: 0 0 3rem;
  max-width: 900px;
}
.d-leagues-lead strong { color: var(--dc-red); }
.d-leagues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.d-league-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2.2rem 1.8rem;
  text-align: center;
  transition: all 0.3s;
}
.d-league-card:hover {
  border-color: var(--dc-red);
  background: rgba(230,57,70,0.05);
}
.d-league-tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  margin-bottom: 1.2rem;
}
.d-league-num {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.d-league-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  margin: 0.4rem 0 1.4rem;
  letter-spacing: 0.06em;
}
.d-league-value {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-serif-cn);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* /dayi 05 · 滚雪球 */
.d-snow { background: var(--bg-secondary); }
.d-snow-table {
  background: #fff;
  border: 1px solid var(--text-on-light-faint);
  margin-bottom: 2.5rem;
}
.dst-row {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1.6fr;
  border-bottom: 1px solid var(--text-on-light-faint);
}
.dst-row:last-child { border-bottom: none; }
.dst-row-head {
  background: var(--text-on-light);
}
.dst-row-head .dst-cell {
  color: var(--dc-red);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
}
.dst-cell {
  padding: 1.3rem 1.4rem;
  font-size: 1rem;
  color: var(--text-on-dark-faint);
  border-right: 1px solid var(--text-on-light-faint);
  line-height: 1.55;
}
.dst-cell:last-child { border-right: none; }
.dst-c1 { color: var(--dc-red); font-family: var(--font-mono); font-size: 0.95rem; }
.d-snow-deep {
  background: #fff;
  border-left: 3px solid var(--dc-red);
  padding: 1.6rem 2rem;
  margin-bottom: 2rem;
}
.dsd-tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  margin-bottom: 0.8rem;
}
.d-snow-deep p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-on-dark-faint);
}
.d-snow-deep strong { color: var(--text-on-light); font-weight: 700; }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .nav-global .nav-links { gap: 1rem; }
  .nav-global .nav-cta { display: none; }
  .h02-grid, .p-honest-grid, .p-not-grid, .p-rules-grid,
  .p-lobster-grid, .d-why-grid, .d-leagues-grid, .d-iso-three {
    grid-template-columns: 1fr;
  }
  .p-never-grid { grid-template-columns: 1fr 1fr; }
  .h03-row, .dit-row, .dst-row {
    grid-template-columns: 1fr;
  }
  .h03-cell, .dit-cell, .dst-cell {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .h04-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .h04-sep { display: none; }
  .p-stage-row { flex-direction: column; }
  .p-stage-arrow { transform: rotate(90deg); }
  .h04-actions { flex-direction: column; }
  .h04-actions .btn { width: 100%; }
}


/* ============================================================
   /scenarios · 双视角产品演示 · 苹果发布会式瀑布流
   命名空间: s-
   ============================================================ */

/* 章节进度条 (沿用现有 chapter-rail 样式) */
.chapter-rail-scenarios { z-index: 50; }

/* ---------- 通用 section 容器 (沿用现有体系) ---------- */
.s-section {
  padding: var(--space-section, 14rem) 0;
  position: relative;
  overflow: hidden;
}

.s-section-dark {
  background: var(--bg-dark, var(--bg-dark));
  color: var(--text-on-dark, var(--text-on-light-faint));
}

.s-section-light {
  background: var(--bg-light, #FFFFFF);
  color: var(--text-on-light, var(--text-on-light));
}

.s-section-light .s-section-title { color: var(--text-on-light); }
.s-section-light .s-section-title em { color: var(--text-on-light); }
.s-section-dark .s-section-title { color: #fff; }
.s-section-dark .s-section-title em { color: #fff; }

.s-section-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 4rem;
  position: relative;
}

.s-section-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}

.section-light .s-section-num { color: var(--dc-red); }

.s-section-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: 1.8rem;
}

.s-section-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}

.s-section-sub {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.8;
  color: var(--text-on-dark-mute);
  margin-bottom: 5rem;
  max-width: 56ch;
  letter-spacing: 0.03em;
}

.section-light .s-section-sub { color: var(--text-on-light-mute); }

.s-section-sub strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

.section-light .s-section-sub strong { color: var(--text-on-light); }

.s-section-quote {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.9;
  color: var(--text-on-dark-mute);
  margin-top: 5rem;
  text-align: center;
  letter-spacing: 0.05em;
  font-style: normal;
}

.s-section-quote em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}

.section-light .s-section-quote { color: var(--text-on-light-mute); }

/* ============================================================
   S00 · HERO
   ============================================================ */
.s-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8rem 2rem 6rem;
  position: relative;
  background: radial-gradient(ellipse at center, var(--bg-dark) 0%, var(--bg-dark) 70%);
}

.s-hero-inner {
  max-width: 1080px;
  width: 100%;
  text-align: center;
}

.s-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 3.5rem;
}

.s-hero-title {
  font-family: var(--font-serif-cn);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 3rem;
}

.s-hero-line {
  display: block;
  font-size: clamp(3.2rem, 8vw, 7rem);
  color: var(--text-on-dark);
}

.s-hero-line + .s-hero-line {
  margin-top: 0.4rem;
}

.s-hero-line em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}

.s-hero-sub {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.7;
  color: var(--text-on-dark-mute);
  margin-bottom: 5rem;
  letter-spacing: 0.05em;
}

.s-hero-tabs {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-bottom: 6rem;
  flex-wrap: wrap;
}

.s-hero-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 2.2rem;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
  color: var(--text-on-dark);
  text-decoration: none;
  font-family: var(--font-sans-cn);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 0.4s var(--ease-out);
  cursor: pointer;
}

.s-hero-tab:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--text-on-dark-mute);
  transform: translateY(-2px);
}

.s-hero-tab-icon {
  font-size: 1.25rem;
  filter: grayscale(0.3);
}

.s-hero-tab-label {
  font-weight: 500;
}

.s-hero-tab-arrow {
  color: var(--dc-red);
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-left: 0.4rem;
  transition: transform 0.4s var(--ease-out);
}

.s-hero-tab:hover .s-hero-tab-arrow {
  transform: translateY(3px);
}

.s-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--line-on-dark);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}

.s-hero-trust-dot {
  color: var(--dc-red);
  font-size: 0.5rem;
  animation: s-pulse 2s ease-in-out infinite;
}

@keyframes s-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.s-hero-trust-text { color: var(--text-on-dark-mute); }

.s-hero-trust-link {
  color: var(--text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--text-on-dark-faint);
  padding-bottom: 1px;
  margin-left: 0.3rem;
  transition: border-color 0.3s;
}

.s-hero-trust-link:hover { border-color: var(--dc-red); }

.s-hero-scrollhint {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.s-hero-scrollhint-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--text-on-dark-mute));
  animation: s-scrollhint 2.4s ease-in-out infinite;
}

@keyframes s-scrollhint {
  0%, 100% { opacity: 0.2; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.s-hero-scrollhint-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  color: var(--text-on-dark-faint);
}

/* ============================================================
   段落分隔屏 · 苹果克制版 (Part I / II / III)
   细线 + 浅灰底 + mono 小标签 + 中等字号标题
   ============================================================ */
.s-part-divider {
  padding: 9rem 0 9rem;
  text-align: center;
  background: #F5F5F7;
}

.s-part-divider .s-section-inner.s-part-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 顶部细线 · 苹果分割线 */
.s-part-inner::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  margin: 0 auto 3rem;
}

.s-part-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  margin-bottom: 2.2rem;
  font-weight: 500;
}

.s-part-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 0 1.4rem;
}

.s-part-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
}

.s-part-sub {
  font-family: var(--font-sans-cn);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 auto 2.8rem;
  max-width: 520px;
  font-weight: 400;
}

.s-part-sub em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
}

/* ============================================================
   段落分隔屏 (Part I / Part II) · 老款保留兼容
   ============================================================ */
.s-divider {
  padding: 14rem 0 14rem;
  text-align: center;
}

.s-divider-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.s-divider-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.s-divider-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--text-on-light);
}

.s-divider-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}

.s-divider-sub {
  font-family: var(--font-serif-cn);
  font-size: 1.4rem;
  font-style: normal;
  color: var(--text-on-light-mute);
  letter-spacing: 0.06em;
}

/* ============================================================
   S01 · 5分钟入驻
   ============================================================ */
.s-onboard {
  padding: var(--space-section) 0;
}

.s-onboard-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.4rem;
  margin: 4rem 0 2rem;
}

.s-onboard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.4rem;
  border: 1px solid var(--line-on-dark);
  border-radius: 18px;
  background: rgba(255,255,255,0.015);
  transition: all 0.5s var(--ease-out);
  min-height: 380px;
  justify-content: flex-start;
}

.s-onboard-step:hover {
  border-color: var(--text-on-dark-faint);
  background: rgba(255,255,255,0.03);
  transform: translateY(-4px);
}

.s-onboard-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--dc-red);
  margin-bottom: 1.6rem;
}

.s-onboard-visual {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
  position: relative;
}

.s-onboard-label {
  font-family: var(--font-serif-cn);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 0.7rem;
}

.s-onboard-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.02em;
}

.s-onboard-arrow {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--text-on-dark-faint);
  font-weight: 300;
}

/* Step 1 · 扫脸 */
.s-onboard-visual-face {
  position: relative;
}

.s-onboard-face-ring {
  width: 130px;
  height: 130px;
  border: 1.5px solid var(--dc-red);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.s-onboard-face-inner {
  width: 90px;
  height: 90px;
  border: 1px solid var(--text-on-dark-faint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,48,47,0.04);
}

.s-onboard-face-emoji {
  font-size: 2.4rem;
  filter: grayscale(0.5);
}

.s-onboard-face-tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--dc-red);
  border-style: solid;
  border-width: 0;
}

.s-onboard-face-tick-tl { top: 18px; left: calc(50% - 75px); border-top-width: 1.5px; border-left-width: 1.5px; }
.s-onboard-face-tick-tr { top: 18px; right: calc(50% - 75px); border-top-width: 1.5px; border-right-width: 1.5px; }
.s-onboard-face-tick-bl { bottom: 18px; left: calc(50% - 75px); border-bottom-width: 1.5px; border-left-width: 1.5px; }
.s-onboard-face-tick-br { bottom: 18px; right: calc(50% - 75px); border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Step 2 · AI 问答气泡 */
.s-onboard-visual-ai {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.45rem;
  align-items: stretch;
  padding: 0 0.4rem;
}

.s-onboard-bubble {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  max-width: 85%;
  letter-spacing: 0.02em;
}

.s-onboard-bubble-ai {
  background: rgba(255,255,255,0.06);
  color: var(--text-on-dark);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.s-onboard-bubble-user {
  background: var(--dc-red);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.s-onboard-bubble-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.7rem 0.95rem;
  width: fit-content;
}

.s-onboard-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-on-dark-mute);
  animation: s-typing 1.4s infinite ease-in-out;
}

.s-onboard-dot:nth-child(2) { animation-delay: 0.2s; }
.s-onboard-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes s-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Step 3 · 角色树 */
/* ============ S01 · Step 03 角色树视觉 (SVG 放射状重做 v2) ============ */
.s-onboard-visual-tree {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  overflow: visible;
}

.s-tree-svg {
  width: 100%;
  height: auto;
  max-width: 220px;
  display: block;
  overflow: visible;
}

.s-tree-bubble rect {
  transition: all 0.35s var(--ease-out);
}

.s-tree-bubble text {
  letter-spacing: 0.08em;
}

.s-tree-bubble:hover rect {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.55);
}

/* 中央圆呼吸动画 · 强化"生长"隐喻 */
.s-tree-svg circle:nth-of-type(1) {
  transform-origin: 120px 90px;
  animation: s-tree-pulse 3.2s ease-in-out infinite;
}

@keyframes s-tree-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Step 4 · 主权 */
.s-onboard-visual-vow { }

.s-onboard-vow-shield {
  width: 130px;
  height: 130px;
  border: 1.5px solid var(--dc-red);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(212,48,47,0.06);
  position: relative;
}

.s-onboard-vow-shield::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,48,47,0.3);
  border-radius: 12px;
}

.s-onboard-vow-pct {
  font-family: var(--font-serif-en);
  font-size: 3rem;
  font-weight: 600;
  color: var(--dc-red);
  line-height: 1;
}

.s-onboard-vow-pct sup {
  font-size: 1.2rem;
  vertical-align: super;
  margin-left: 2px;
}

.s-onboard-vow-cap {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  color: var(--dc-red);
  margin-top: 0.5rem;
}

/* ============================================================
   响应式 · /scenarios
   ============================================================ */
@media (max-width: 1100px) {
  .s-onboard-flow {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
  .s-onboard-arrow { display: none; }
  .s-onboard-step { min-height: 340px; }
}

@media (max-width: 720px) {
  .s-section-inner { padding: 0 1.5rem; }
  .s-hero { padding: 6rem 1.2rem 5rem; }
  .s-hero-line { font-size: clamp(2.4rem, 12vw, 4rem); }
  .s-hero-tabs { flex-direction: column; align-items: stretch; }
  .s-hero-tab { justify-content: center; }
  .s-onboard-flow {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .s-onboard-step { min-height: auto; padding: 1.6rem 1.2rem; }
  .s-divider { padding: 8rem 0 8rem; }
}

/* ============================================================
   S02 · 主界面线框图
   ============================================================ */
.s-canvas {
  padding: var(--space-section) 0;
}

.s-canvas-mock {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 4rem auto 2rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--line-on-light);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.04);
  overflow: visible;
}

/* 标题栏 */
.s-canvas-titlebar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--line-on-light);
  border-radius: 14px 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-on-light-mute);
}

.s-canvas-trafficlight {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-on-light-faint);
}

.s-canvas-trafficlight:nth-of-type(1) { background: #FF5F57; }
.s-canvas-trafficlight:nth-of-type(2) { background: #FEBC2E; }
.s-canvas-trafficlight:nth-of-type(3) { background: #28C840; }

.s-canvas-titletext {
  margin-left: 0.8rem;
  font-weight: 600;
  color: var(--text-on-light);
}

.s-canvas-orgswitch {
  margin-left: 1.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line-on-light);
  border-radius: 4px;
  background: #fff;
  font-size: 0.72rem;
}

.s-canvas-orgname { color: var(--text-on-light); }
.s-canvas-orgcaret { margin-left: 0.4rem; color: var(--text-on-light-mute); }

.s-canvas-counter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.s-canvas-counter-num {
  font-weight: 600;
  color: var(--text-on-light);
}

.s-canvas-counter-lbl {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-on-light-mute);
}

.s-canvas-counter-sep { color: var(--text-on-light-faint); margin: 0 0.2rem; }

/* 主体三栏 */
.s-canvas-body {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  min-height: 460px;
}

.s-canvas-left,
.s-canvas-right {
  padding: 1.4rem 1.2rem;
  background: #fff;
}

.s-canvas-left {
  border-right: 1px solid var(--line-on-light);
}

.s-canvas-right {
  border-left: 1px solid var(--line-on-light);
}

.s-canvas-center {
  padding: 1.4rem 1.4rem;
  background: var(--bg-light);
  border-radius: 0 0 14px 14px;
}

.s-canvas-pane-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
  margin-bottom: 1.2rem;
}

.s-canvas-pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.s-canvas-pane-tier {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
}

/* 角色列表 */
.s-canvas-roles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.s-canvas-role {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  color: var(--text-on-light);
  cursor: default;
}

.s-canvas-role.is-active {
  background: rgba(212,48,47,0.06);
  color: var(--dc-red);
}

.s-canvas-role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-on-light-faint);
}

.s-canvas-role.is-active .s-canvas-role-dot { background: var(--dc-red); }

.s-canvas-role-name { flex: 1; font-weight: 500; }

.s-canvas-role-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-on-light-mute);
}

.s-canvas-role.is-active .s-canvas-role-count { color: var(--dc-red); }

.s-canvas-role-add {
  margin-top: 0.6rem;
  border: 1px dashed var(--line-on-light);
  color: var(--text-on-light-mute);
  justify-content: center;
}

.s-canvas-role-plus {
  font-size: 1rem;
  font-weight: 300;
}

/* 知识卡片 */
.s-canvas-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.s-canvas-card {
  background: #fff;
  border: 1px solid var(--line-on-light);
  border-radius: 8px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 130px;
}

.s-canvas-card-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--dc-red);
  font-weight: 500;
}

.s-canvas-card-text {
  font-family: var(--font-serif-cn);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-on-light);
  font-weight: 500;
  flex: 1;
}

.s-canvas-card-foot {
  border-top: 1px solid var(--line-on-light);
  padding-top: 0.5rem;
  margin-top: auto;
}

.s-canvas-card-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-on-light-mute);
}

.s-canvas-card-faded { opacity: 0.55; }
.s-canvas-card-ghost {
  border-style: dashed;
  background: transparent;
  opacity: 0.4;
}

/* 任务列表 */
.s-canvas-tasks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.s-canvas-task {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  color: var(--text-on-light);
}

.s-canvas-task.is-active {
  background: rgba(212,48,47,0.05);
}

.s-canvas-task-check {
  width: 12px;
  height: 12px;
  border: 1.2px solid var(--text-on-light-faint);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
}

.s-canvas-task-check.is-done {
  background: var(--text-on-light);
  border-color: var(--text-on-light);
}

.s-canvas-task-name { flex: 1; }

.s-canvas-task-prog {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--dc-red);
  font-weight: 500;
}

.s-canvas-task-done .s-canvas-task-name {
  color: var(--text-on-light-mute);
  text-decoration: line-through;
}

/* Lobster 浮窗 */
.s-canvas-lobster {
  position: absolute;
  bottom: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: var(--dc-red);
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(212,48,47,0.35);
}

.s-canvas-lobster-icon { font-size: 0.5rem; }

/* 6 个标注 */
.s-canvas-anno {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--dc-red);
  white-space: nowrap;
}

.s-canvas-anno-num {
  width: 22px;
  height: 22px;
  border: 1.2px solid var(--dc-red);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
}

.s-canvas-anno-text {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-on-light);
  font-weight: 500;
}

.s-canvas-anno-1 { top: 90px; left: -210px; }
.s-canvas-anno-2 { top: 60px; right: -270px; }
.s-canvas-anno-3 { top: 220px; right: -250px; }
.s-canvas-anno-4 { top: -32px; left: 240px; }
.s-canvas-anno-5 { top: -32px; right: 30px; }
.s-canvas-anno-6 { bottom: -38px; right: 18px; }

@media (max-width: 1400px) {
  .s-canvas-anno { display: none; }
}

@media (max-width: 980px) {
  .s-canvas-body {
    grid-template-columns: 1fr;
  }
  .s-canvas-left,
  .s-canvas-right {
    border: none;
    border-bottom: 1px solid var(--line-on-light);
  }
  .s-canvas-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .s-canvas-cards { grid-template-columns: 1fr; }
  .s-canvas-counter { display: none; }
  .s-canvas-orgswitch { display: none; }
}

/* ============================================================
   S03 · 拖文件 AI 自动归类
   ============================================================ */
.s-drop {
  padding: var(--space-section) 0;
}

.s-drop-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.6rem;
  margin: 4rem 0 5rem;
}

.s-drop-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem 1.4rem;
  border: 1px solid var(--line-on-dark);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  min-height: 320px;
}

.s-drop-col-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--dc-red);
}

.s-drop-col-label {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 0.6rem;
}

.s-drop-files {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.s-drop-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-on-dark);
  border-radius: 6px;
  font-family: var(--font-sans-cn);
  font-size: 0.82rem;
  color: var(--text-on-dark);
}

.s-drop-file-icon { font-size: 0.95rem; }
.s-drop-file-name { letter-spacing: 0.02em; }

.s-drop-file-1 { transform: translateX(-4px); }
.s-drop-file-2 { transform: translateX(8px); }
.s-drop-file-3 { transform: translateX(-2px); }
.s-drop-file-4 { transform: translateX(6px); }
.s-drop-file-5 { transform: translateX(0); }

.s-drop-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--dc-red);
}

.s-drop-arrow-line {
  display: block;
  width: 38px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--dc-red), transparent);
}

.s-drop-arrow-tip {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--dc-red);
}

.s-drop-arrow-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--dc-red);
}

.s-drop-routes {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.s-drop-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: rgba(212,48,47,0.06);
  border-left: 2px solid var(--dc-red);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
}

.s-drop-route-from {
  color: var(--text-on-dark-mute);
  font-weight: 400;
}

.s-drop-route-arr {
  color: var(--dc-red);
  font-family: var(--font-mono);
  font-weight: 300;
}

.s-drop-route-to {
  color: var(--text-on-dark);
  font-weight: 600;
}

.s-drop-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.s-drop-tier {
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-on-dark);
  border-radius: 6px;
}

.s-drop-tier-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.s-drop-tier-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--dc-red);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
}

.s-drop-tier-name {
  font-family: var(--font-serif-cn);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

.s-drop-tier-num {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-on-dark-mute);
}

.s-drop-tier-bars {
  display: flex;
  gap: 3px;
}

.s-drop-tier-bar {
  flex: 1;
  height: 6px;
  background: var(--dc-red);
  border-radius: 1px;
}

.s-drop-tier-bar-faint {
  background: rgba(212,48,47,0.25);
}

.s-drop-tier-3 .s-drop-tier-name { color: var(--text-on-dark-mute); }

.s-drop-bigtime {
  text-align: center;
  margin-top: 4rem;
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--text-on-dark-mute);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.s-drop-bigtime-num {
  font-family: var(--font-serif-en);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 600;
  color: var(--dc-red);
  line-height: 1;
  margin: 0 0.3rem;
}

.s-drop-bigtime-unit {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--dc-red);
  font-weight: 500;
  margin-right: 0.3rem;
}

@media (max-width: 1100px) {
  .s-drop-stage {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .s-drop-arrow {
    flex-direction: row;
    justify-content: center;
  }
  .s-drop-arrow-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--dc-red), transparent);
  }
  .s-drop-arrow-tip { transform: rotate(90deg); }
}

/* ============================================================
   S04 · 杀手锏屏 · 双卡对照
   ============================================================ */
.s-killer {
  padding: 14rem 0 14rem;
}

.s-killer-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
  margin: 4rem 0 3rem;
}

.s-killer-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.06);
}

.s-killer-card-generic {
  background: var(--bg-secondary);
  border: 1px solid var(--text-on-light-faint);
}

.s-killer-card-dc {
  background: var(--bg-dark);
  border: 1px solid var(--bg-dark);
  color: var(--text-on-dark);
}

.s-killer-card-head {
  padding: 2rem 1.8rem 1.6rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.s-killer-card-dc .s-killer-card-head {
  border-bottom-color: rgba(255,255,255,0.08);
}

.s-killer-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--text-on-light-mute);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.s-killer-card-eyebrow-dc {
  color: var(--dc-red);
}

.s-killer-card-title {
  font-family: var(--font-serif-cn);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.s-killer-card-generic .s-killer-card-title { color: var(--text-on-dark-faint); }
.s-killer-card-dc .s-killer-card-title { color: #fff; }

.s-killer-card-meta {
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.s-killer-card-generic .s-killer-card-meta { color: var(--text-on-light-mute); }
.s-killer-card-dc .s-killer-card-meta { color: var(--text-on-dark-mute); }

.s-killer-chat {
  flex: 1;
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.s-killer-bubble {
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  max-width: 88%;
  letter-spacing: 0.02em;
}

.s-killer-bubble-user {
  background: var(--text-on-light-faint);
  color: var(--text-on-dark-faint);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.s-killer-card-dc .s-killer-bubble-user {
  background: var(--dc-red);
  color: #fff;
}

.s-killer-bubble-ai {
  background: #fff;
  color: var(--text-on-dark-faint);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--text-on-light-faint);
}

.s-killer-card-dc .s-killer-bubble-ai {
  background: rgba(255,255,255,0.05);
  color: var(--text-on-dark);
  border-color: var(--line-on-dark-strong);
}

.s-killer-bubble-tired {
  font-style: normal;
  opacity: 0.7;
}

.s-killer-asks {
  list-style: none;
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-on-light-mute);
}

.s-killer-asks li { padding: 1px 0; }

.s-killer-output-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  background: var(--text-on-light-mute);
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.s-killer-output-tag-dc {
  background: var(--dc-red);
}

.s-killer-thinking {
  align-self: flex-start;
  background: rgba(212,48,47,0.08);
  border: 1px solid rgba(212,48,47,0.2);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  width: 95%;
}

.s-killer-thinking-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--dc-red);
  margin-bottom: 0.7rem;
  font-weight: 600;
}

.s-killer-sources {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.s-killer-sources li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
}

.s-killer-source-check {
  color: var(--dc-red);
  font-weight: 700;
  font-size: 0.85rem;
}

.s-killer-source-label {
  color: var(--text-on-dark);
  font-weight: 500;
}

.s-killer-source-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-on-dark-mute);
}

.s-killer-bubble-result strong {
  color: var(--dc-red);
  font-weight: 600;
}

.s-killer-card-foot {
  padding: 1.1rem 1.6rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.s-killer-card-dc .s-killer-card-foot {
  border-top-color: rgba(255,255,255,0.08);
}

.s-killer-foot-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.s-killer-card-foot-bad .s-killer-foot-icon {
  background: var(--text-on-light-mute);
  color: #fff;
}

.s-killer-card-foot-bad .s-killer-foot-text { color: var(--text-on-light-mute); }

.s-killer-card-foot-good .s-killer-foot-icon {
  background: var(--dc-red);
  color: #fff;
}

.s-killer-card-foot-good .s-killer-foot-text { color: var(--dc-red); }

.s-killer-vs {
  align-self: center;
  font-family: var(--font-serif-en);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-on-light-faint);
  letter-spacing: 0.1em;
  padding: 0 0.6rem;
}

@media (max-width: 1000px) {
  .s-killer-stage {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .s-killer-vs { padding: 1rem 0; }
}

/* ============================================================
   S05 · 任务自动拆分
   ============================================================ */
.s-task {
  padding: var(--space-section) 0;
}

.s-task-stage {
  margin: 4rem auto 2rem;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-task-input {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 100px;
  font-family: var(--font-serif-cn);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-on-dark);
  letter-spacing: 0.03em;
  margin-bottom: 3rem;
}

.s-task-input-icon {
  color: var(--dc-red);
  font-size: 0.7rem;
}

.s-task-input-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1rem;
  background: var(--dc-red);
  animation: s-cursor 1.1s infinite step-end;
}

@keyframes s-cursor {
  50% { opacity: 0; }
}

.s-task-tree {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.s-task-trunk {
  width: 1px;
  height: 40px;
  background: var(--text-on-dark-faint);
}

.s-task-branches {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  position: relative;
}

.s-task-branches::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--text-on-dark-faint);
}

.s-task-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-task-branch-line {
  width: 1px;
  height: 20px;
  background: var(--text-on-dark-faint);
}

.s-task-card {
  width: 100%;
  padding: 1.4rem 1.2rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all 0.4s var(--ease-out);
}

.s-task-card:hover {
  border-color: var(--dc-red);
  background: rgba(212,48,47,0.04);
  transform: translateY(-3px);
}

.s-task-card-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.2px solid var(--dc-red);
  color: var(--dc-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.s-task-card-title {
  font-family: var(--font-serif-cn);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-on-dark);
}

.s-task-card-source {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-on-dark);
}

.s-task-card-source-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--dc-red);
  background: rgba(212,48,47,0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
}

.s-task-card-source-name {
  font-family: var(--font-sans-cn);
  font-size: 0.74rem;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.03em;
}

.s-task-merge {
  width: 1px;
  height: 50px;
  background: var(--text-on-dark-faint);
  margin-top: 30px;
}

.s-task-result {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.2rem 2rem;
  background: rgba(212,48,47,0.08);
  border: 1px solid var(--dc-red);
  border-radius: 12px;
}

.s-task-result-icon {
  font-size: 1.4rem;
}

.s-task-result-text {
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

.s-task-result-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-on-dark-mute);
  margin-left: 0.5rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--text-on-dark-faint);
}

@media (max-width: 900px) {
  .s-task-branches {
    grid-template-columns: 1fr 1fr;
  }
  .s-task-branches::before { display: none; }
  .s-task-branch-line { height: 12px; }
  .s-task-result-meta {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 0.4rem;
  }
  .s-task-result {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   S06 · 一人多身份
   ============================================================ */
.s-multi {
  padding: var(--space-section) 0;
}

.s-multi-stage {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 5rem auto 2rem;
  height: 540px;
}

.s-multi-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.s-multi-center-ring {
  position: absolute;
  inset: 0;
  border: 1.5px dashed var(--dc-red);
  border-radius: 50%;
  animation: s-spin 30s linear infinite;
}

@keyframes s-spin {
  to { transform: rotate(360deg); }
}

.s-multi-center-core {
  width: 100px;
  height: 100px;
  background: var(--dc-red);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
}

.s-multi-center-label {
  font-family: var(--font-serif-cn);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
}

.s-multi-center-id {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  margin-top: 0.4rem;
  opacity: 0.85;
}

.s-multi-id {
  position: absolute;
  display: flex;
  align-items: center;
}

.s-multi-id-line {
  height: 1px;
  background: var(--text-on-light-faint);
  position: absolute;
}

.s-multi-id-card {
  background: #fff;
  border: 1px solid var(--line-on-light);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  min-width: 200px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.04);
  position: relative;
  z-index: 3;
  transition: all 0.4s var(--ease-out);
}

.s-multi-id-card:hover {
  border-color: var(--dc-red);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(212,48,47,0.12);
}

.s-multi-id-org {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.s-multi-id-role {
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-on-light);
  margin-bottom: 0.3rem;
}

.s-multi-id-perm {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  color: var(--text-on-light-mute);
  margin-bottom: 0.5rem;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(0,0,0,0.04);
  border-radius: 3px;
}

.s-multi-id-stat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-on-light-mute);
  letter-spacing: 0.04em;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-on-light);
}

/* 4 个身份位置 */
.s-multi-id-1 {
  top: 10%;
  left: 0;
}
.s-multi-id-1 .s-multi-id-line {
  width: 140px;
  right: -140px;
  top: 50%;
}

.s-multi-id-2 {
  top: 10%;
  right: 0;
}
.s-multi-id-2 .s-multi-id-line {
  width: 140px;
  left: -140px;
  top: 50%;
}

.s-multi-id-3 {
  bottom: 10%;
  left: 0;
}
.s-multi-id-3 .s-multi-id-line {
  width: 140px;
  right: -140px;
  top: 50%;
}

.s-multi-id-4 {
  bottom: 10%;
  right: 0;
}
.s-multi-id-4 .s-multi-id-line {
  width: 140px;
  left: -140px;
  top: 50%;
}

@media (max-width: 900px) {
  .s-multi-stage {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .s-multi-center {
    position: static;
    transform: none;
    margin: 0 auto 1.5rem;
  }
  .s-multi-id {
    position: static;
  }
  .s-multi-id-line { display: none; }
  .s-multi-id-card { width: 100%; }
}

/* ============================================================
   S07 · 离职那天
   ============================================================ */
.s-leave {
  padding: var(--space-section) 0;
}

.s-leave-grid {
  margin: 4rem auto 3rem;
  max-width: 1080px;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 12px;
  overflow: hidden;
}

.s-leave-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--line-on-dark-strong);
}

.s-leave-row:last-child { border-bottom: none; }

.s-leave-head {
  background: rgba(255,255,255,0.04);
}

.s-leave-cell {
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line-on-dark);
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  color: var(--text-on-dark);
}

.s-leave-cell:last-child { border-right: none; }

.s-leave-head .s-leave-cell {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
  font-weight: 500;
}

.s-leave-cell-key {
  background: rgba(255,255,255,0.02);
}

.s-leave-level {
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

.s-leave-level-sub {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  color: var(--text-on-dark-mute);
  margin-top: 0.25rem;
}

.s-leave-yes {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dc-red);
  letter-spacing: 0.04em;
}

.s-leave-no {
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  color: var(--text-on-dark-faint);
  letter-spacing: 0.04em;
}

.s-leave-row-public { background: rgba(212,48,47,0.04); }

.s-leave-action {
  text-align: center;
  margin: 4rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.s-leave-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.4rem;
  background: var(--dc-red);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: var(--font-sans-cn);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 14px 34px rgba(212,48,47,0.35);
}

.s-leave-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(212,48,47,0.45);
}

.s-leave-btn-icon {
  font-size: 1.1rem;
  font-weight: 600;
}

.s-leave-action-note {
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .s-leave-row {
    grid-template-columns: 1fr;
  }
  .s-leave-cell {
    border-right: none;
    border-bottom: 1px solid var(--line-on-dark);
  }
  .s-leave-cell:last-child { border-bottom: none; }
}

/* ============================================================
   M3 · 组织视角前半段 (S08 / S09 / S10)
   ============================================================ */

/* ---------- PART · II 分隔屏 (复用 PART · I 风格) ---------- */
/* 已有 .s-part-divider / .s-part-light / .s-part-inner / .s-part-label / .s-part-title / .s-part-sub / .s-part-rule
   M3 直接复用,无需新增 */

/* ============================================================
   S08 · 接入 · 10 分钟开张
   ============================================================ */
.s-onboard-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 6rem 0 5rem;
  position: relative;
}

.s-onboard-step {
  position: relative;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-onboard-time {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.2rem;
}

.s-onboard-line {
  position: absolute;
  top: 2.4rem;
  left: 1.5rem;
  right: -1.5rem;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.35) 100%
  );
}

.s-onboard-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
}

.s-onboard-line-end {
  background: none;
}

.s-onboard-line-end::after {
  display: none;
}

.s-onboard-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  padding: 2rem 1.6rem;
  border-radius: 4px;
  width: 100%;
  min-height: 200px;
  transition: all 0.4s var(--ease-out);
}

.s-onboard-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.s-onboard-icon {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.2rem;
}

.s-onboard-title {
  font-family: var(--font-serif-cn);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 0.9rem;
  letter-spacing: 0.02em;
}

.s-onboard-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* S08 大数字 */
.s-stat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  margin: 4rem 0 5rem;
  padding: 4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.s-stat-big {
  text-align: center;
}

.s-stat-num {
  font-family: var(--font-serif-en);
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.s-stat-num span {
  font-size: 0.4em;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 0.3rem;
  letter-spacing: 0.08em;
}

.s-stat-label {
  font-family: var(--font-sans-cn);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
  letter-spacing: 0.05em;
}

.s-stat-divider {
  width: 1px;
  height: 5rem;
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   S09 · Admin 控制台线框
   ============================================================ */
.s-console-frame {
  margin: 5rem 0 4rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-tertiary);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
}

.s-console-titlebar {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.s-console-dots {
  display: flex;
  gap: 0.4rem;
}

.s-console-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-on-light-faint);
}

.s-console-dots span:nth-child(1) { background: #ed6a5e; }
.s-console-dots span:nth-child(2) { background: #f5bf4f; }
.s-console-dots span:nth-child(3) { background: #62c554; }

.s-console-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.5);
  margin-left: 1.5rem;
  flex-shrink: 0;
}

.s-console-org {
  margin-left: auto;
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.45);
}

.s-console-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 480px;
}

.s-console-nav {
  background: var(--bg-secondary);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1.5rem 0;
}

.s-console-nav-item {
  padding: 0.8rem 1.5rem;
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.62);
  cursor: default;
  border-left: 2px solid transparent;
  transition: all 0.25s var(--ease-out);
}

.s-console-nav-item i {
  margin-right: 0.7rem;
  width: 16px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.45);
}

.s-console-nav-item.s-active {
  background: #fff;
  color: var(--text-on-light);
  border-left-color: var(--dc-red, #D4302F);
  font-weight: 500;
}

.s-console-nav-item.s-active i {
  color: var(--dc-red, #D4302F);
}

.s-console-main {
  padding: 2rem 2.2rem;
  background: #fff;
}

.s-console-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.s-console-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 1.4rem 1.2rem;
  background: #fff;
}

.s-console-card-label {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.s-console-card-num {
  font-family: var(--font-serif-en);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--text-on-light);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.s-console-card-trend {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.5);
}

.s-console-card-trend.s-trend-warn {
  color: var(--dc-red, #D4302F);
}

.s-console-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1.6rem;
}

.s-console-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  margin-bottom: 1.2rem;
  color: var(--text-on-light);
  font-weight: 500;
}

.s-console-section-more {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.s-console-rank-row {
  display: grid;
  grid-template-columns: 30px 130px 1fr 160px;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0;
  font-family: var(--font-sans-cn);
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.s-console-rank-row:last-child {
  border-bottom: none;
}

.s-rank-no {
  font-family: var(--font-serif-en);
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.4);
}

.s-rank-who {
  color: var(--text-on-light);
  font-weight: 500;
}

.s-rank-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.s-rank-bar > div {
  height: 100%;
  background: linear-gradient(to right, var(--text-on-light), var(--text-on-dark-faint));
  border-radius: 3px;
}

.s-rank-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
  text-align: right;
  letter-spacing: 0.04em;
}

.s-console-footer {
  display: flex;
  gap: 2rem;
  padding: 0.8rem 1.2rem;
  background: var(--bg-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.5);
}

.s-console-footer .s-dot-live {
  font-size: 0.55rem;
  color: #62c554;
  margin-right: 0.4rem;
  vertical-align: middle;
  animation: s-pulse 2s ease-in-out infinite;
}

@keyframes s-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   S10 · 活的大脑 · 闭环
   ============================================================ */
.s-loop-frame {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 5rem 0 4rem;
  position: relative;
}

.s-loop-stage {
  position: relative;
  padding: 2.4rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  transition: all 0.4s var(--ease-out);
}

.s-loop-stage:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.s-loop-icon {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.2rem;
}

.s-loop-stage-2 .s-loop-icon,
.s-loop-stage-3 .s-loop-icon {
  color: var(--dc-red, #D4302F);
}

.s-loop-title {
  font-family: var(--font-serif-cn);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.s-loop-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

.s-loop-arrow {
  position: absolute;
  right: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif-en);
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.45);
  z-index: 2;
  background: var(--bg-dark, var(--bg-dark));
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-loop-back {
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: var(--dc-red, #D4302F);
  white-space: nowrap;
}

.s-loop-back::before {
  content: '';
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1.4rem;
  background: rgba(212, 48, 47, 0.5);
}

/* S10 节奏说明 */
.s-loop-rhythm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 6rem 0 5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3rem 0;
}

.s-rhythm-item {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 1rem;
}

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

.s-rhythm-num {
  font-family: var(--font-serif-en);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}

.s-rhythm-label {
  font-family: var(--font-sans-cn);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

/* ============================================================
   响应式 (M3)
   ============================================================ */
@media (max-width: 900px) {
  .s-onboard-timeline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .s-onboard-line {
    display: none;
  }

  .s-stat-row {
    flex-direction: column;
    gap: 2rem;
  }

  .s-stat-divider {
    width: 60%;
    height: 1px;
  }

  .s-console-body {
    grid-template-columns: 1fr;
  }

  .s-console-nav {
    display: flex;
    overflow-x: auto;
    padding: 0.6rem;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .s-console-nav-item {
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    border-left: none;
    border-bottom: 2px solid transparent;
  }

  .s-console-nav-item.s-active {
    border-left-color: transparent;
    border-bottom-color: var(--dc-red, #D4302F);
  }

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

  .s-console-rank-row {
    grid-template-columns: 25px 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.4rem;
  }

  .s-rank-bar,
  .s-rank-val {
    grid-column: 1 / -1;
  }

  .s-loop-frame {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .s-loop-arrow {
    display: none;
  }

  .s-loop-back {
    position: static;
    transform: none;
    margin-top: 1rem;
    text-align: center;
  }

  .s-loop-back::before {
    display: none;
  }

  .s-loop-rhythm {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0;
  }

  .s-rhythm-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.5rem;
  }

  .s-rhythm-item:nth-child(3),
  .s-rhythm-item:nth-child(4) {
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 1.5rem;
  }
}


/* ============================================================
   M4 · 组织视角后半段 (S11 / S12 / S13 / S14)
   ============================================================ */

/* ============================================================
   S11 · 组织 AI 调用 (白底 · 双卡对照)
   ============================================================ */
.s-org-call-frame {
  margin: 5rem 0 4rem;
}

.s-org-call-q {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.s-org-call-q-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 0.8rem;
}

.s-org-call-q-text {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--text-on-light);
  letter-spacing: 0.02em;
}

.s-org-call-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.s-org-call-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 2rem 1.8rem;
  background: #fff;
  min-height: 360px;
}

.s-org-card-generic {
  background: var(--bg-secondary);
}

.s-org-card-deep {
  border: 1px solid var(--text-on-light);
  background: #fff;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.18);
}

.s-org-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.s-org-card-icon {
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.55);
}

.s-org-card-icon.s-icon-red {
  color: var(--dc-red, #D4302F);
}

.s-org-card-name {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  color: var(--text-on-light);
  letter-spacing: 0.02em;
  font-weight: 500;
}

.s-org-card-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.45);
}

.s-org-card-line {
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-on-light);
  margin-bottom: 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  border-left: 3px solid rgba(0, 0, 0, 0.2);
}

.s-org-card-deep .s-org-card-line {
  border-left-color: var(--dc-red, #D4302F);
  background: rgba(212, 48, 47, 0.04);
}

.s-org-card-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  line-height: 2;
  color: rgba(0, 0, 0, 0.72);
}

.s-org-card-meta.s-meta-mute {
  color: rgba(0, 0, 0, 0.45);
}

.s-org-card-meta li {
  padding-left: 0;
}

.s-org-card-meta i {
  color: var(--dc-red, #D4302F);
  margin-right: 0.6rem;
  font-size: 0.78rem;
}

.s-org-call-bottom {
  text-align: center;
  padding: 2.5rem 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.s-org-call-bottom-line {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.8;
  color: var(--text-on-light);
  letter-spacing: 0.02em;
}

/* ============================================================
   S12 · 组织任务派发 (黑底 · 树状图)
   ============================================================ */
.s-dispatch-frame {
  margin: 5rem 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-dispatch-root {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.8rem 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  min-width: 480px;
  max-width: 90%;
}

.s-dispatch-root-icon {
  font-size: 1.6rem;
  color: var(--dc-red, #D4302F);
}

.s-dispatch-root-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}

.s-dispatch-root-quote {
  font-family: var(--font-serif-cn);
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0.02em;
}

.s-dispatch-arrow-down {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.45);
  padding: 1.6rem 0;
  position: relative;
}

.s-dispatch-arrow-down::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  z-index: -1;
}

.s-dispatch-branches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  width: 100%;
  position: relative;
}

.s-dispatch-branches::before {
  content: '';
  position: absolute;
  top: -1.6rem;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.s-dispatch-branch {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  padding: 1.5rem 1.3rem;
  position: relative;
  transition: all 0.4s var(--ease-out);
}

.s-dispatch-branch::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1.6rem;
  width: 1px;
  height: 1.6rem;
  background: rgba(255, 255, 255, 0.2);
}

.s-dispatch-branch:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.s-branch-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--dc-red, #D4302F);
  margin-bottom: 0.7rem;
}

.s-branch-task {
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.s-branch-kb {
  font-family: var(--font-sans-cn);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.s-branch-kb i {
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
}

.s-dispatch-aggr {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  min-width: 480px;
  max-width: 90%;
}

.s-dispatch-aggr-icon {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}

.s-dispatch-aggr-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}

.s-dispatch-aggr-quote {
  font-family: var(--font-serif-cn);
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0.01em;
}

/* ============================================================
   S13 · 跨组织协作 (白底 · C 位 II)
   ============================================================ */
.s-cross-frame {
  margin: 5rem 0 4rem;
}

/* 上方双圆 + 握手 */
.s-cross-top {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  margin-bottom: 5rem;
  padding: 3rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.s-cross-org {
  text-align: center;
}

.s-cross-org-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.2rem;
  color: var(--text-on-light);
  background: #fff;
}

.s-cross-org-a .s-cross-org-circle {
  border-color: rgba(0, 0, 0, 0.35);
}

.s-cross-org-b .s-cross-org-circle {
  border-color: var(--dc-red, #D4302F);
  color: var(--dc-red, #D4302F);
}

.s-cross-org-name {
  font-family: var(--font-serif-cn);
  font-size: 1.2rem;
  color: var(--text-on-light);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.s-cross-org-role {
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
}

.s-cross-handshake {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  position: relative;
}

.s-cross-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.15)
  );
  max-width: 120px;
}

.s-cross-handshake-icon {
  font-size: 1.6rem;
  color: var(--dc-red, #D4302F);
  padding: 1rem;
  border: 1px solid rgba(212, 48, 47, 0.3);
  border-radius: 50%;
  background: #fff;
}

/* 五阶段流程 */
.s-cross-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: 4rem;
}

.s-cross-stage {
  padding: 1.8rem 1.2rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

.s-cross-stage:last-child {
  border-right: none;
}

.s-cross-stage-num {
  font-family: var(--font-serif-en);
  font-size: 1.6rem;
  color: rgba(0, 0, 0, 0.3);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.s-cross-stage-title {
  font-family: var(--font-serif-cn);
  font-size: 1.15rem;
  color: var(--text-on-light);
  margin-bottom: 0.9rem;
  letter-spacing: 0.02em;
}

.s-cross-stage-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.65);
}

/* 底部对比 */
.s-cross-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.s-cross-bottom-stat {
  text-align: center;
}

.s-cross-bottom-num {
  font-family: var(--font-serif-en);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--text-on-light);
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}

.s-cross-bottom-num-red {
  color: var(--dc-red, #D4302F);
}

.s-cross-bottom-label {
  font-family: var(--font-sans-cn);
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.02em;
}

.s-cross-bottom-arrow {
  font-family: var(--font-serif-en);
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   S14 · 双周报 · 透明 (黑底 · 双卡对称)
   ============================================================ */
.s-bireport-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 5rem 0 4rem;
}

.s-bireport-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 2rem 1.8rem;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.4s var(--ease-out);
}

.s-bireport-card:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.s-bireport-admin {
  border-color: rgba(212, 48, 47, 0.32);
}

.s-bireport-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.s-bireport-head-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.s-tag-admin {
  color: var(--dc-red, #D4302F);
  border-color: rgba(212, 48, 47, 0.4);
}

.s-bireport-head-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

.s-bireport-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  font-family: var(--font-sans-cn);
}

.s-bireport-list li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.s-bireport-list li:last-child {
  border-bottom: none;
}

.s-bireport-num {
  font-family: var(--font-serif-en);
  font-size: 1.6rem;
  color: #fff;
  min-width: 4rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.s-bireport-admin .s-bireport-num {
  color: var(--dc-red, #D4302F);
}

.s-bireport-foot {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.s-bireport-foot i {
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   响应式 (M4)
   ============================================================ */
@media (max-width: 900px) {
  .s-org-call-grid {
    grid-template-columns: 1fr;
  }

  .s-org-call-q-text {
    font-size: 1.2rem;
  }

  .s-dispatch-root,
  .s-dispatch-aggr {
    flex-direction: column;
    text-align: center;
    min-width: 0;
    width: 100%;
    gap: 1rem;
  }

  .s-dispatch-branches {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .s-dispatch-branches::before {
    display: none;
  }

  .s-dispatch-branch::before {
    display: none;
  }

  .s-cross-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .s-cross-handshake {
    flex-direction: column;
  }

  .s-cross-line {
    width: 1px;
    height: 30px;
    max-width: none;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.15)
    );
  }

  .s-cross-stages {
    grid-template-columns: 1fr;
  }

  .s-cross-stage {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .s-cross-stage:last-child {
    border-bottom: none;
  }

  .s-cross-bottom {
    flex-direction: column;
    gap: 1.5rem;
  }

  .s-cross-bottom-arrow {
    transform: rotate(90deg);
  }

  .s-bireport-frame {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   M5 · 收官段 (S15 脊柱图 / S16 红线表)
   ============================================================ */

/* ============================================================
   S15 · 脊柱图 · 个人 ↔ 组织 (黑底)
   ============================================================ */
.s-spine-frame {
  margin: 5rem 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.s-spine-layer {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
}

.s-spine-side {
  text-align: right;
  padding: 0 1.5rem;
}

.s-spine-side-right {
  text-align: left;
}

.s-spine-side-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.5rem;
}

.s-spine-side-text {
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.s-spine-core {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  text-align: center;
  position: relative;
  transition: all 0.4s var(--ease-out);
}

.s-spine-core:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.s-spine-l1 .s-spine-core,
.s-spine-l2 .s-spine-core {
  border-color: rgba(212, 48, 47, 0.4);
}

.s-spine-core-base {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.s-spine-core-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--dc-red, #D4302F);
  margin-bottom: 0.5rem;
}

.s-spine-core-name {
  font-family: var(--font-serif-cn);
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.s-spine-core-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
}

/* 脊柱连接线 */
.s-spine-conn {
  height: 1.6rem;
  position: relative;
}

.s-spine-conn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.15)
  );
  transform: translateX(-50%);
}

/* ============================================================
   S16 · 红线表 · 我们做 / 我们不做 (白底)
   ============================================================ */
.s-redline-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 5rem 0 4rem;
}

.s-redline-card {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  padding: 2.4rem 2rem;
  background: #fff;
  transition: all 0.4s var(--ease-out);
}

.s-redline-do {
  border-color: var(--text-on-light);
  box-shadow: 0 12px 36px -16px rgba(0, 0, 0, 0.2);
}

.s-redline-dont {
  background: var(--bg-tertiary);
  border-color: rgba(212, 48, 47, 0.3);
}

.s-redline-head {
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.s-redline-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--text-on-light);
  border-radius: 2px;
  color: var(--text-on-light);
  margin-bottom: 1.2rem;
}

.s-redline-tag.s-tag-dont {
  color: var(--dc-red, #D4302F);
  border-color: var(--dc-red, #D4302F);
}

.s-redline-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--text-on-light);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.s-redline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans-cn);
}

.s-redline-list li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.s-redline-list li:last-child {
  border-bottom: none;
}

.s-redline-list i {
  color: var(--text-on-light);
  font-size: 0.85rem;
  flex-shrink: 0;
  width: 1rem;
}

.s-redline-list-dont li {
  color: rgba(0, 0, 0, 0.65);
}

.s-redline-list-dont i {
  color: var(--dc-red, #D4302F);
}

/* ============================================================
   收官 CTA
   ============================================================ */
.s-final-cta {
  text-align: center;
  margin: 6rem 0 0;
  padding: 5rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.s-final-cta-line {
  font-family: var(--font-serif-cn);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
}

.s-final-cta-strong {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--text-on-light);
  margin-bottom: 3rem;
}

.s-final-cta-strong em {
  font-style: normal;
  font-family: var(--font-serif-en);
  letter-spacing: 0.03em;
}

.s-final-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.s-final-btn {
  display: inline-block;
  padding: 1rem 2.2rem;
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.3s var(--ease-out);
  border: 1px solid;
}

.s-final-btn-primary {
  background: var(--text-on-light);
  color: #fff;
  border-color: var(--text-on-light);
}

.s-final-btn-primary:hover {
  background: var(--bg-dark-pure);
  transform: translateY(-2px);
}

.s-final-btn-ghost {
  background: transparent;
  color: var(--text-on-light);
  border-color: var(--text-on-light);
}

.s-final-btn-ghost:hover {
  background: var(--text-on-light);
  color: #fff;
}

/* ============================================================
   响应式 (M5)
   ============================================================ */
@media (max-width: 900px) {
  .s-spine-layer {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    text-align: center;
  }

  .s-spine-side,
  .s-spine-side-right {
    text-align: center;
    padding: 0;
  }

  .s-redline-frame {
    grid-template-columns: 1fr;
  }

  .s-final-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .s-final-btn {
    text-align: center;
  }
}


/* ============================================================
   PART 分隔屏 · 苹果克制版 v3 (任务 2 · 2026-05-07)
   3 个分隔屏统一: PART I / II / III
   设计语言: 苹果浅灰底 + 极细细线 + mono 小字 + 节制中字标题
   ============================================================ */

.s-part-divider {
  background: #F5F5F7;
  min-height: auto;
  padding: 9rem 2rem 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.s-part-divider .s-part-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* 顶部细线 · 苹果分割线宽度 */
.s-part-divider .s-part-inner::before {
  content: '';
  position: absolute;
  top: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: #D2D2D7;
}

/* mono 小标签 · 不再大字"PART · II" */
.s-part-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: #86868B;
  text-transform: uppercase;
  margin-bottom: 2.4rem;
  font-weight: 500;
}

/* 中等大小标题 · 苹果 Medium · 不再 7vw 巨幅 */
.s-part-title {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: #1D1D1F;
  margin: 0 0 1.6rem;
}

.s-part-title em {
  color: #D4302F;
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
}

/* 副标题 · 较小 · 苹果灰 */
.s-part-sub {
  font-family: var(--font-serif-cn);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: #86868B;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin: 0 0 3.2rem;
}

.s-part-sub em {
  color: #1D1D1F;
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
}

/* 底部装饰短线 · 居中红点 */
.s-part-rule {
  width: 32px;
  height: 1px;
  background: #D2D2D7;
  margin: 0 auto;
  position: relative;
}

.s-part-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D4302F;
  box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45);
  animation: s-part-dot-pulse 3.6s ease-in-out infinite;
}

@keyframes s-part-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(212, 48, 47, 0); }
}

/* 移动端 · 进一步收紧 */
@media (max-width: 768px) {
  .s-part-divider {
    padding: 5rem 1.5rem 5rem;
  }
  .s-part-divider .s-part-inner::before {
    top: -2.5rem;
    width: 32px;
  }
  .s-part-label {
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    margin-bottom: 1.8rem;
  }
  .s-part-title {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.25;
  }
  .s-part-sub {
    font-size: 0.95rem;
    margin-bottom: 2.4rem;
  }
}

/* 旧 .s-divider 类全面失效保护 (PART I 已迁移到 .s-part-divider,旧类不再使用) */

/* ============================================================
   返回顶部按钮 · 苹果克制版 (P2-1)
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 90;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(29, 29, 31, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.32s var(--ease-out),
    transform 0.32s var(--ease-out),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  padding: 0;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: rgba(29, 29, 31, 0.92);
  border-color: var(--dc-red);
  color: #fff;
  transform: translateY(-1px);
}

.back-to-top:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

.back-to-top svg {
  display: block;
}

@media (max-width: 720px) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 36px;
    height: 36px;
  }
}

/* ============================================================
   P2-4 · 全站移动端响应统一 (2026-05-07)
   - 顶部导航折叠 (880px 以下精简, 640px 以下隐藏链接)
   - section padding 收紧
   - 关键模块网格降维
   ============================================================ */

/* ---------- 顶部全局导航 · 移动端折叠 ---------- */
@media (max-width: 880px) {
  .nav-global { padding: 0.7rem 0; }
  .nav-global .nav-inner { padding: 0 1.2rem; }
  .nav-global .nav-links { gap: 1rem; }
  .nav-global .nav-link {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.25rem 0;
  }
  .nav-global .nav-cta {
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 640px) {
  .nav-global .nav-inner { padding: 0 1rem; gap: 0.8rem; }
  .nav-global .nav-logo { font-size: 0.95rem; }
  /* 移动端：横排链接整体隐藏，由汉堡抽屉接管 */
  .nav-global .nav-links { display: none; }
}

/* ============================================================
   移动端导航抽屉 (N1, 2026-05-07)
   - ≤640px：显示汉堡按钮，点击打开全屏抽屉
   - >640px：完全隐藏（汉堡按钮 + 抽屉）
   ============================================================ */

/* ============================================================
   移动端底部 Tab Bar (重做版 N2, 2026-05-07)
   设计原则：
   - 4 个页面图标常驻底部，永不隐藏，永远可点
   - 复用 .nav 自动翻转机制（updateActiveSection 给所有 .nav 加 is-light）
   - 桌面端 (>640px) 完全 display:none，零影响
   - 留出 iPhone 安全区 (env(safe-area-inset-bottom))
   ============================================================ */

/* 默认（桌面端）：底部 Tab Bar 不显示 */
.nav-tabbar { display: none; }

@media (max-width: 640px) {
  /* 移动端顶栏：只显示 logo，4 链接全部隐藏（由底部 Tab 接管） */
  .nav-global .nav-links { display: none; }

  /* ---------- 底部 Tab Bar ---------- */
  .nav-tabbar {
    display: flex;
    position: fixed;
    top: auto;          /* 双保险:防继承 .nav 基类的 top:0 把 Tab Bar 拉成全屏 */
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;       /* 防被任何祖先 100vh 拉伸 */
    z-index: 1000;
    /* 默认深底状态：白底页面会显示底色 */
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.4rem 0.4rem calc(env(safe-area-inset-bottom, 0px) + 0.4rem);
    transition: background 0.35s ease, border-color 0.35s ease;
    /* 即使 backdrop-filter 失效也是接近实色,不会和正文重叠混乱 */
  }

  /* 当前屏是深色屏 (.nav.is-light = false) → Tab Bar 深底白字
     注意 .nav.is-light 的语义是"底色为浅,所以导航走 light 模式(深字)" 
     反过来不加 is-light 就是 dark 模式(浅字、深底) */
  .nav-tabbar:not(.is-light) {
    background: rgba(20, 20, 22, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ---------- 单个 Tab ---------- */
  .nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.55rem 0.2rem;
    text-decoration: none;
    color: rgba(60, 60, 65, 0.62);  /* 浅底页面默认色 */
    transition: color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .nav-tabbar:not(.is-light) .nav-tab {
    color: rgba(255, 255, 255, 0.55);  /* 深底页面默认色 */
  }

  .nav-tab:active { transform: scale(0.94); }

  /* 图标 */
  .nav-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  .nav-tab-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* 文字 */
  .nav-tab-text {
    font-family: var(--font-sans-cn);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  /* ---------- 当前页激活态 ---------- */
  .nav-tab.is-active {
    color: var(--dc-red);
  }
  .nav-tabbar:not(.is-light) .nav-tab.is-active {
    color: var(--dc-red);  /* 红色在深浅底都显眼,直接保持 */
  }

  /* 顶部红色指示线（当前页） */
  .nav-tab.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--dc-red);
    border-radius: 0 0 2px 2px;
  }

  /* ---------- 给页面正文留出底部空间，避免被 Tab Bar 遮挡 ---------- */
  body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
  }

  /* 章节进度条 (.chapter-rail) 等 fixed 元素也要避开 Tab Bar */
  .chapter-rail {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
  }

  /* 回到顶部按钮也要避开 */
  .back-to-top,
  #back-to-top {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 75px) !important;
  }
}

/* ---------- 全站 section · 小屏 padding 统一 ---------- */
@media (max-width: 720px) {
  .section,
  .s-section { padding: 5rem 1.2rem; }
  .h01-inner,
  .h02-inner,
  .h03-inner,
  .h04-inner { max-width: 100%; }
  .home-01 { padding: 5rem 1.2rem 3rem; }
  /* HERO 大字 · 防溢出 */
  .h01-title,
  .p-hero-title,
  .d-hero-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    line-height: 1.2;
  }
  .h01-sub,
  .p-hero-sub,
  .d-hero-sub {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
  }
}

/* ---------- 章节进度条 · 移动端隐藏 ---------- */
@media (max-width: 900px) {
  .chapter-rail,
  .chapter-rail-home,
  .chapter-rail-demo,
  .chapter-rail-scenarios { display: none; }
}

/* ---------- 通用网格 · 单列降维 ---------- */
@media (max-width: 720px) {
  .h02-grid,
  .h03-grid,
  .h04-grid,
  .p-honest-grid,
  .p-vsis-grid,
  .d-iso-grid,
  .d-leagues-grid,
  .d-snow-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
}

/* ---------- 红线 16 条表 · 单列堆叠 ---------- */
@media (max-width: 720px) {
  .redlines-16 {
    grid-template-columns: 1fr;
  }
}

/* ---------- 镜像/规则参数表 · 横向滚动避免压扁 ---------- */
@media (max-width: 720px) {
  .param-table,
  .dt-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pt-head,
  .pt-row,
  .dt-head,
  .dt-row {
    min-width: 720px;
  }
}

/* ---------- footer 移动端 ---------- */
@media (max-width: 720px) {
  .h04-foot {
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1.2rem;
    text-align: center;
  }
}

/* ---------- 字体在小屏下进一步缩小 ---------- */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .s-hero-line { font-size: clamp(2rem, 11vw, 3.2rem); }
  .s-part-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
}

/* ============================================================
   S17 · 商业模式屏 (按 Token 收费 · 苹果发布会风)
   ============================================================ */
.s-revenue {
  background: var(--bg-light);
  padding: 9rem 0 8rem;
}

.s-revenue .s-section-title em {
  color: var(--dc-red);
  font-style: normal;
  font-weight: 600;
}

.s-revenue .s-section-sub em {
  color: var(--text-on-light);
  font-style: normal;
  font-weight: 500;
}

/* ---------- 三栏数字卡片 · 苹果发布会风 ---------- */
.s-revenue-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 1.6rem;
  margin: 4.5rem 0 5rem;
}

.s-revenue-card {
  background: var(--bg-secondary);
  border-radius: 18px;
  padding: 3rem 2.4rem;
  text-align: center;
  position: relative;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out);
}

.s-revenue-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.s-revenue-card-mid {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.s-revenue-card-mid .s-revenue-card-tag {
  color: var(--dc-red);
}

.s-revenue-card-mid .s-revenue-card-label,
.s-revenue-card-mid .s-revenue-card-desc {
  color: var(--text-on-dark-mute);
}

.s-revenue-card-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  display: block;
}

.s-revenue-card-num {
  font-family: var(--font-serif-cn);
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--text-on-light);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

.s-revenue-card-mid .s-revenue-card-num {
  color: var(--text-on-dark);
}

.s-revenue-card-unit {
  font-size: 0.5em;
  font-weight: 400;
  margin-left: 0.1em;
  color: var(--text-on-light-mute);
}

.s-revenue-card-mid .s-revenue-card-unit {
  color: var(--text-on-dark-mute);
}

.s-revenue-card-num-dual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.s-revenue-num-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.s-revenue-num-val {
  font-family: var(--font-serif-cn);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.s-revenue-num-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--text-on-dark-mute);
  text-transform: uppercase;
}

.s-revenue-num-sep {
  font-family: var(--font-serif-cn);
  font-weight: 300;
  color: var(--dc-red);
  font-size: 1.4em;
  align-self: flex-start;
  margin-top: -0.1em;
}

.s-revenue-card-label {
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-light);
  letter-spacing: 0.02em;
  margin-bottom: 1.4rem;
}

.s-revenue-card-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-on-light-mute);
  letter-spacing: 0.01em;
}

/* ---------- 增长路径时间轴 ---------- */
.s-revenue-timeline {
  margin: 5rem 0 4rem;
  padding: 3rem 2rem;
  background: var(--bg-light);
  border-top: 1px solid var(--text-on-light-faint);
  border-bottom: 1px solid var(--text-on-light-faint);
}

.s-timeline-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--text-on-light-mute);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2.4rem;
}

.s-timeline-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
}

.s-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.8rem;
  position: relative;
}

.s-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-on-light-faint);
  margin-bottom: 1rem;
  transition: all 0.3s var(--ease-out);
}

.s-timeline-dot-red {
  background: var(--dc-red);
  box-shadow: 0 0 0 4px rgba(212, 48, 47, 0.12);
}

.s-timeline-mark {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-on-light-mute);
  margin-bottom: 0.5rem;
}

.s-timeline-step-final .s-timeline-mark {
  color: var(--dc-red);
}

.s-timeline-title {
  font-family: var(--font-sans-cn);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-light);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.s-timeline-desc {
  font-family: var(--font-sans-cn);
  font-size: 0.78rem;
  color: var(--text-on-light-mute);
  line-height: 1.5;
}

.s-timeline-line {
  width: 100%;
  height: 1px;
  background: var(--text-on-light-faint);
  margin: 0 0;
  align-self: center;
  transform: translateY(-1.4rem);
}

/* ---------- 商业化红线条款 (mini 版) ---------- */
.s-revenue-redline {
  margin: 4rem auto 3rem;
  max-width: 760px;
  background: rgba(212, 48, 47, 0.04);
  border: 1px solid rgba(212, 48, 47, 0.18);
  border-radius: 14px;
  padding: 2rem 2.4rem;
}

.s-redline-mini-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--dc-red);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  text-align: center;
}

.s-redline-mini-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.6rem;
  margin: 0;
  padding: 0;
}

.s-redline-mini-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans-cn);
  font-size: 0.92rem;
  color: var(--text-on-light);
  letter-spacing: 0.01em;
}

.s-redline-mini-list i {
  color: var(--dc-red);
  font-size: 0.85rem;
  width: 16px;
  text-align: center;
  opacity: 0.7;
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 900px) {
  .s-revenue-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .s-timeline-track {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .s-timeline-line {
    width: 1px;
    height: 1.6rem;
    margin: 0 auto;
    transform: none;
  }
  .s-redline-mini-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .s-revenue { padding: 5rem 0 4rem; }
  .s-revenue-card { padding: 2.4rem 1.6rem; }
  .s-revenue-redline { padding: 1.6rem 1.4rem; }
  .s-revenue-timeline { padding: 2rem 1.2rem; }
}

/* ============================================================
 * S04 · 杀手锏屏 · 交互 Demo 动效（C-1）
 * 触发：JS 在 .s-killer 上加 .is-playing → 各步骤元素按 data-killer-step 显形
 * 节奏：桌面 8s 紧凑版 / ≤640px 5s 压缩版 / prefers-reduced-motion 静态终态
 * ============================================================ */

/* —— 顶部共用输入框 · 打字机 —— */
.s-killer-prompt {
  position: relative;
  max-width: 720px;
  margin: 0 auto 3.2rem;
  padding: 1.1rem 1.4rem;
  background: var(--bg-light, #FFFFFF);
  border: 1px solid var(--text-on-light-faint, #ECECEC);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--text-on-light, #1D1D1F);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.s-killer-prompt-prefix {
  color: var(--dc-red);
  font-weight: 500;
  flex-shrink: 0;
}
.s-killer-prompt-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.4em;
}
.s-killer-prompt-cursor {
  display: inline-block;
  color: var(--dc-red);
  font-weight: 500;
  animation: s-killer-blink 0.9s step-end infinite;
  flex-shrink: 0;
}
@keyframes s-killer-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
/* 打完字时输入框微亮 */
.s-killer.is-prompt-done .s-killer-prompt {
  border-color: var(--dc-red);
  box-shadow: 0 0 0 3px rgba(212, 48, 47, 0.08);
}
.s-killer.is-prompt-done .s-killer-prompt-cursor {
  opacity: 0;
}

/* —— 重放按钮 —— */
.s-killer-replay {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--text-on-light-faint, #ECECEC);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-on-light-mute, #707070);
  cursor: pointer;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease, border-color 0.2s ease;
}
.s-killer.is-finished .s-killer-replay {
  opacity: 1;
  transform: translateY(0);
}
.s-killer-replay:hover {
  color: var(--dc-red);
  border-color: var(--dc-red);
}
.s-killer-replay-icon {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
}
.s-killer-replay:hover .s-killer-replay-icon {
  animation: s-killer-spin 0.6s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}
@keyframes s-killer-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* —— 演绎步骤通用：默认隐藏，加 .is-on 显形 —— */
.s-killer [data-killer-step] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)),
              transform 0.45s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
  will-change: opacity, transform;
}
.s-killer [data-killer-step].is-on {
  opacity: 1;
  transform: translateY(0);
}

/* 左卡反问气泡里 5 条追问行 · 错峰 */
.s-killer-asks li[data-killer-step] {
  transform: translateX(-6px);
}
.s-killer-asks li[data-killer-step].is-on {
  transform: translateX(0);
}

/* 疲惫气泡 · 多带一点延迟感的"叹气" */
.s-killer-bubble-tired[data-killer-step] {
  transform: translateY(10px) scale(0.98);
}
.s-killer-bubble-tired[data-killer-step].is-on {
  transform: translateY(0) scale(1);
}

/* 左卡末尾 × 颤抖一次 */
.s-killer-card-foot-bad[data-killer-step].is-on {
  animation: s-killer-shake 0.5s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 0.1s 1;
}
@keyframes s-killer-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* —— 右卡数据源 · 扫描激活 —— */
.s-killer-sources li[data-killer-step] {
  position: relative;
  opacity: 0.35;
  filter: grayscale(0.8);
  transform: translateX(0);
  transition: opacity 0.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)),
              filter 0.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)),
              background-color 0.4s ease;
}
.s-killer-sources li[data-killer-step].is-on {
  opacity: 1;
  filter: grayscale(0);
  transform: translateX(0);
}
/* ✓ 弹出 + 微旋 */
.s-killer-sources li[data-killer-step] .s-killer-source-check {
  display: inline-block;
  transform: scale(0) rotate(-90deg);
  transition: transform 0.45s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.s-killer-sources li[data-killer-step].is-on .s-killer-source-check {
  transform: scale(1) rotate(0deg);
}
/* count 数字像计数器一样浮现 */
.s-killer-sources li[data-killer-step] .s-killer-source-count {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s;
}
.s-killer-sources li[data-killer-step].is-on .s-killer-source-count {
  opacity: 1;
  transform: translateY(0);
}
/* 激活时的扫描光带 */
.s-killer-sources li[data-killer-step]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 48, 47, 0.08) 50%,
    transparent 100%);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
.s-killer-sources li[data-killer-step].is-on::before {
  animation: s-killer-scan 0.55s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 1;
}
@keyframes s-killer-scan {
  0%   { opacity: 0; transform: translateX(-100%); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

/* —— 计时器 00→20 —— */
.s-killer-output-tag-dc [data-killer="timer"] {
  display: inline-block;
  min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
}

/* 右卡末尾 ✓ 绿光呼吸（用 DC 红呼应品牌，不用绿） */
.s-killer-card-foot-good[data-killer-step].is-on {
  animation: s-killer-pulse-good 1.6s ease-out 0.1s 1;
}
@keyframes s-killer-pulse-good {
  0%   { box-shadow: 0 0 0 0    rgba(212, 48, 47, 0); }
  35%  { box-shadow: 0 0 0 6px  rgba(212, 48, 47, 0.12); }
  100% { box-shadow: 0 0 0 14px rgba(212, 48, 47, 0); }
}

/* 整张右卡 · 完成时一次轻微提亮 */
.s-killer.is-finished .s-killer-card-dc {
  box-shadow: 0 18px 50px -22px rgba(212, 48, 47, 0.28);
  transition: box-shadow 0.8s ease;
}

/* —— 移动端：≤640px 节奏压缩到 5s + 输入框紧凑 —— */
@media (max-width: 640px) {
  .s-killer-prompt {
    padding: 0.9rem 1rem;
    font-size: 0.88rem;
    flex-wrap: wrap;
  }
  .s-killer-replay {
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    font-size: 0.65rem;
  }
  .s-killer [data-killer-step] {
    transition-duration: 0.32s;
  }
  .s-killer-card-foot-bad[data-killer-step].is-on {
    animation-duration: 0.4s;
  }
}

/* —— 无障碍：尊重 prefers-reduced-motion，直接显示终态 —— */
@media (prefers-reduced-motion: reduce) {
  .s-killer [data-killer-step],
  .s-killer-sources li[data-killer-step],
  .s-killer-sources li[data-killer-step] .s-killer-source-check,
  .s-killer-sources li[data-killer-step] .s-killer-source-count {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .s-killer-prompt-cursor { animation: none; opacity: 0; }
  .s-killer-replay { opacity: 1; transform: none; }
}

/* ============================================================
 * S10 · 活的大脑闭环 · 交互 Demo（C-2）
 * 4 阶段顺次激活 + 数据胶囊在箭头滑动 + SVG 弧线回环
 * 节奏：12s/轮，自动循环；reduced-motion 时静态显示终态
 * ============================================================ */

/* —— 阶段卡：默认低饱和，激活时亮起 —— */
.s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage] {
  transition: border-color 0.5s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)),
              background-color 0.5s ease,
              transform 0.5s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow 0.5s ease;
}
.s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage].is-active {
  border-color: rgba(212, 48, 47, 0.55);
  background: rgba(212, 48, 47, 0.06);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -22px rgba(212, 48, 47, 0.5);
}
.s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage] .s-loop-icon {
  transition: transform 0.5s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
              color 0.4s ease;
}
.s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage].is-active .s-loop-icon {
  color: var(--dc-red);
  transform: scale(1.12);
}
.s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage] .s-loop-title {
  transition: color 0.4s ease, letter-spacing 0.4s ease;
}
.s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage].is-active .s-loop-title {
  color: var(--dc-red);
  letter-spacing: 0.04em;
}

/* —— 箭头：line + tip + capsule —— */
.s-loop-frame[data-loop-demo="root"] .s-loop-arrow[data-loop-arrow] {
  width: 2.4rem;
  height: 2.4rem;
  background: var(--bg-dark);
  position: absolute;
  right: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.s-loop-arrow[data-loop-arrow] .s-loop-arrow-line {
  position: absolute;
  left: -2rem;
  right: -2rem;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 100%);
  transform: translateY(-50%);
}
.s-loop-arrow[data-loop-arrow] .s-loop-arrow-tip {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif-en);
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.45);
  background: var(--bg-dark);
  padding: 0 0.4rem;
  transition: color 0.4s ease, transform 0.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}
.s-loop-arrow[data-loop-arrow].is-flowing .s-loop-arrow-tip {
  color: var(--dc-red);
  transform: translateX(2px);
}
.s-loop-arrow[data-loop-arrow].is-flowing .s-loop-arrow-line {
  background: linear-gradient(90deg,
    rgba(212,48,47,0) 0%,
    rgba(212,48,47,0.5) 50%,
    rgba(212,48,47,0) 100%);
}

/* 数据胶囊：默认隐藏，加 .is-flying 触发左→右滑过 */
.s-loop-arrow[data-loop-arrow] .s-loop-capsule {
  position: absolute;
  top: 50%;
  left: -3.2rem;
  transform: translateY(-50%) translateX(-100%);
  padding: 0.18rem 0.6rem;
  background: var(--dc-red);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 4px 12px -2px rgba(212, 48, 47, 0.55);
}
.s-loop-arrow[data-loop-arrow].is-flying .s-loop-capsule {
  animation: s-loop-capsule-fly 1.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 1;
}
@keyframes s-loop-capsule-fly {
  0%   { opacity: 0; transform: translateY(-50%) translateX(-100%) scale(0.85); }
  18%  { opacity: 1; transform: translateY(-50%) translateX(-30%) scale(1); }
  82%  { opacity: 1; transform: translateY(-50%) translateX(140%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) translateX(220%) scale(0.85); }
}

/* —— 第 4 阶段「↺ 循环」激活时呼吸 —— */
.s-loop-stage[data-loop-stage="4"] .s-loop-back[data-loop-back] {
  transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease;
}
.s-loop-stage[data-loop-stage="4"].is-active .s-loop-back[data-loop-back] {
  color: var(--dc-red);
  text-shadow: 0 0 12px rgba(212, 48, 47, 0.4);
}

/* —— SVG 回环弧线 —— */
.s-loop-frame[data-loop-demo="root"] .s-loop-return {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5.6rem;
  width: 100%;
  height: 110px;
  pointer-events: none;
  opacity: 0.55;
}
.s-loop-return-path {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.s-loop-frame[data-loop-demo="root"].is-returning .s-loop-return-path {
  opacity: 1;
  animation: s-loop-dash 1.6s linear 1;
}
@keyframes s-loop-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -200; }
}
.s-loop-return-dot {
  opacity: 0;
}
.s-loop-frame[data-loop-demo="root"].is-returning .s-loop-return-dot {
  opacity: 1;
}

/* —— 节奏说明卡 · 与阶段同步高亮 —— */
.s-loop-rhythm[data-loop-rhythm] .s-rhythm-item[data-loop-rhythm-item] {
  transition: color 0.4s ease, transform 0.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}
.s-loop-rhythm[data-loop-rhythm] .s-rhythm-item[data-loop-rhythm-item] .s-rhythm-num {
  transition: color 0.4s ease, text-shadow 0.5s ease;
}
.s-loop-rhythm[data-loop-rhythm] .s-rhythm-item[data-loop-rhythm-item].is-active .s-rhythm-num {
  color: var(--dc-red);
  text-shadow: 0 0 18px rgba(212, 48, 47, 0.35);
}
.s-loop-rhythm[data-loop-rhythm] .s-rhythm-item[data-loop-rhythm-item].is-active {
  transform: translateY(-2px);
}

/* —— 移动端：≤900px 改为竖向流，胶囊纵向飞 —— */
@media (max-width: 900px) {
  .s-loop-frame[data-loop-demo="root"] .s-loop-arrow[data-loop-arrow] .s-loop-arrow-line {
    left: 50%;
    right: auto;
    top: -1.6rem;
    bottom: -1.6rem;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.22) 50%,
      rgba(255,255,255,0.08) 100%);
    transform: translateX(-50%);
  }
  .s-loop-frame[data-loop-demo="root"] .s-loop-arrow[data-loop-arrow].is-flowing .s-loop-arrow-line {
    background: linear-gradient(180deg,
      rgba(212,48,47,0) 0%,
      rgba(212,48,47,0.55) 50%,
      rgba(212,48,47,0) 100%);
  }
  .s-loop-arrow[data-loop-arrow] .s-loop-capsule {
    left: 50%;
    top: -2.2rem;
    transform: translateX(-50%) translateY(-100%);
  }
  .s-loop-arrow[data-loop-arrow].is-flying .s-loop-capsule {
    animation: s-loop-capsule-fly-v 1.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 1;
  }
  @keyframes s-loop-capsule-fly-v {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-100%) scale(0.85); }
    18%  { opacity: 1; transform: translateX(-50%) translateY(-30%) scale(1); }
    82%  { opacity: 1; transform: translateX(-50%) translateY(140%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(220%) scale(0.85); }
  }
  .s-loop-frame[data-loop-demo="root"] .s-loop-return {
    display: none; /* 移动端隐藏弧线，避免视觉拥挤 */
  }
}

/* —— 无障碍：reduced-motion 时直接静态终态 —— */
@media (prefers-reduced-motion: reduce) {
  .s-loop-frame[data-loop-demo="root"] .s-loop-stage[data-loop-stage],
  .s-loop-arrow[data-loop-arrow] .s-loop-capsule,
  .s-loop-return-path,
  .s-loop-return-dot {
    animation: none !important;
    transition: none !important;
  }
  .s-loop-arrow[data-loop-arrow] .s-loop-capsule { opacity: 0; }
}

/* ============================================================
 * S13 · 跨组织协作 · 交互 Demo（C-3）
 * 双圆数据脉冲 + 握手图标点亮 + 5 阶段顺次激活 + 90→3 数字滚动
 * 节奏：单次 10s，进视口触发一次；reduced-motion 静态终态
 * ============================================================ */

/* —— 双圆默认 → 激活时红光晕 —— */
.s-cross-frame[data-cross-demo="root"] .s-cross-org[data-cross-org] {
  transition: transform 0.5s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}
.s-cross-frame[data-cross-demo="root"] .s-cross-org[data-cross-org] .s-cross-org-circle {
  transition: border-color 0.4s ease, box-shadow 0.5s ease, transform 0.5s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.s-cross-frame[data-cross-demo="root"] .s-cross-org[data-cross-org].is-pulsing .s-cross-org-circle {
  border-color: var(--dc-red);
  box-shadow: 0 0 0 6px rgba(212, 48, 47, 0.12), 0 14px 36px -16px rgba(212, 48, 47, 0.45);
  transform: scale(1.06);
}
.s-cross-frame[data-cross-demo="root"] .s-cross-org[data-cross-org] .s-cross-org-name {
  transition: color 0.4s ease;
}
.s-cross-frame[data-cross-demo="root"] .s-cross-org[data-cross-org].is-pulsing .s-cross-org-name {
  color: var(--dc-red);
}

/* —— 握手线脉冲点：A→B 红色，B→A 蓝灰冷脉 —— */
.s-cross-line {
  position: relative;
  overflow: hidden;
}
.s-cross-pulse[data-cross-pulse] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--dc-red);
  box-shadow: 0 0 12px 2px rgba(212, 48, 47, 0.5);
  opacity: 0;
  pointer-events: none;
}
.s-cross-pulse[data-cross-pulse="b2a"] {
  background: rgba(60, 80, 110, 0.9);
  box-shadow: 0 0 12px 2px rgba(60, 80, 110, 0.45);
}
/* A→B 触发：从左滑到右 */
.s-cross-pulse[data-cross-pulse="a2b"].is-firing {
  animation: s-cross-pulse-a2b 1.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 1;
}
@keyframes s-cross-pulse-a2b {
  0%   { opacity: 0; left: 0%; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; left: 100%; }
}
/* B→A 触发：从右滑到左（视觉上箭头反向） */
.s-cross-pulse[data-cross-pulse="b2a"].is-firing {
  animation: s-cross-pulse-b2a 1.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 1;
}
@keyframes s-cross-pulse-b2a {
  0%   { opacity: 0; left: 100%; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; left: 0%; }
}

/* —— 握手图标：默认轻显，被两次脉冲交汇时点亮 + 旋转一下 —— */
.s-cross-handshake-icon[data-cross-handshake-icon] {
  transition: box-shadow 0.5s ease, transform 0.6s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
              border-color 0.4s ease;
}
.s-cross-handshake-icon[data-cross-handshake-icon].is-shaking {
  border-color: var(--dc-red);
  box-shadow: 0 0 0 8px rgba(212, 48, 47, 0.1), 0 0 30px -2px rgba(212, 48, 47, 0.5);
  transform: scale(1.1) rotate(-6deg);
}

/* —— 五阶段：默认低饱和，激活时红编号 + 提亮描述 —— */
.s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage] {
  opacity: 0.5;
  transition: opacity 0.5s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)),
              transform 0.5s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}
.s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage].is-active {
  opacity: 1;
  transform: translateY(-2px);
}
.s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage] .s-cross-stage-num {
  transition: color 0.4s ease, letter-spacing 0.4s ease, text-shadow 0.5s ease;
}
.s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage].is-active .s-cross-stage-num {
  color: var(--dc-red);
  letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(212, 48, 47, 0.28);
}
.s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage] .s-cross-stage-title {
  transition: color 0.4s ease;
}
.s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage].is-active .s-cross-stage-title {
  color: var(--text-on-light, #1D1D1F);
}

/* —— 底部 90→3 数字滚动 + 箭头流光 —— */
.s-cross-bottom-arrow[data-cross-bottom-arrow] {
  position: relative;
  transition: color 0.4s ease, transform 0.4s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}
.s-cross-bottom-arrow[data-cross-bottom-arrow].is-flowing {
  color: var(--dc-red);
  transform: translateX(4px);
}
.s-cross-bottom-arrow[data-cross-bottom-arrow]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 48, 47, 0.25) 50%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.s-cross-bottom-arrow[data-cross-bottom-arrow].is-flowing::after {
  animation: s-cross-arrow-shine 1s var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1)) 1;
}
@keyframes s-cross-arrow-shine {
  0%   { opacity: 0; transform: translateX(-100%); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
[data-cross-counter] {
  display: inline-block;
  min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* —— 移动端：脉冲点更小，节奏不变 —— */
@media (max-width: 900px) {
  .s-cross-pulse[data-cross-pulse] {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
  }
}

/* —— reduced-motion 静态终态 —— */
@media (prefers-reduced-motion: reduce) {
  .s-cross-frame[data-cross-demo="root"] .s-cross-org[data-cross-org],
  .s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage],
  .s-cross-pulse[data-cross-pulse],
  .s-cross-handshake-icon[data-cross-handshake-icon] {
    animation: none !important;
    transition: none !important;
  }
  .s-cross-frame[data-cross-demo="root"] .s-cross-stage[data-cross-stage] { opacity: 1; }
  .s-cross-pulse[data-cross-pulse] { opacity: 0; }
}

/* ============================================================
   FIX-PATCH (2026-05-07) · 两处微调
   1. .nav-global.is-light 浅色页反色（修复白底导航消失 bug）
   2. .dit-row-head 表头从纯黑切到苹果浅灰 + 红线（消解突兀感）
   ============================================================ */

/* ---- 1. nav-global 浅色态反色 ---- */
.nav-global.is-light {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: var(--line-on-light, rgba(0,0,0,0.08));
}
.nav-global.is-light .nav-logo,
.nav-global.is-light .nav-logo .logo-text {
  color: var(--text-on-light);
}
.nav-global.is-light .nav-link {
  color: rgba(29, 29, 31, 0.55);
}
.nav-global.is-light .nav-link:hover {
  color: var(--text-on-light);
}
.nav-global.is-light .nav-link.is-active {
  color: var(--text-on-light);
  border-bottom-color: var(--dc-red);
}
.nav-global.is-light .nav-cta {
  color: var(--dc-red);
  border-color: var(--dc-red);
}
.nav-global.is-light .nav-cta:hover {
  background: var(--dc-red);
  color: #fff;
}

/* ---- 2. d-iso 表头切换为苹果浅灰 + 顶部红线 ---- */
.d-iso-table {
  border-top: 3px solid var(--dc-red);
}
.dit-row-head {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--text-on-light-faint);
}
.dit-row-head .dit-cell {
  color: var(--dc-red);
  font-weight: 600;
}
.dit-row-anchor {
  background: rgba(212, 48, 47, 0.04);
}

/* ============================================================
   FIX-PATCH (2026-05-07) · 主页 h03 对照表移动端方案 B
   逐维度卡片：每个维度独立成卡，"过去 vs DC" 上下对照
   桌面端（≥768px）保持原 3 列 grid 不变
   ============================================================ */
@media (max-width: 767px) {
  /* 表格容器：去掉顶部白线，改为透明，让卡片成为视觉主体 */
  .h03-table {
    border-top: none;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  /* 表头行：在手机上隐藏，标签由 ::before 注入到每张卡里 */
  .h03-row.h03-row-head {
    display: none;
  }

  /* 每个维度行 → 一张独立卡片 */
  .h03-row:not(.h03-row-head) {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.4rem 1.3rem 1.3rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* 覆盖 4393 行的浅色边框 */
    transition: none;
  }
  .h03-row:not(.h03-row-head):hover {
    background: rgba(255, 255, 255, 0.04); /* 移动端禁用 hover 红色变化 */
  }

  /* h03-c1 → 卡片标题（维度名，红色 mono 标签） */
  .h03-cell.h03-c1 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dc-red);
    padding: 0 0 0.9rem 0;
    border-right: none;
    border-bottom: 1px solid rgba(212, 48, 47, 0.35);
    margin-bottom: 0.9rem;
  }

  /* h03-c2 → "过去" 行：灰色 + 删除线感（克制） */
  .h03-cell.h03-c2 {
    position: relative;
    padding: 0.7rem 0 0.7rem 4.2rem;
    border-right: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .h03-cell.h03-c2::before {
    content: "过去";
    position: absolute;
    left: 0;
    top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
  }

  /* h03-c3 → "DeepConnect" 行：红点 + 高亮白字 */
  .h03-cell.h03-c3 {
    position: relative;
    padding: 0.9rem 0 0.2rem 4.2rem;
    border-bottom: none;
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .h03-cell.h03-c3::before {
    content: "DC";
    position: absolute;
    left: 0;
    top: 0.95rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--dc-red);
    text-transform: uppercase;
    font-weight: 700;
  }
  .h03-cell.h03-c3::after {
    content: "";
    position: absolute;
    left: 2.4rem;
    top: 1.15rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dc-red);
    box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.4);
    animation: h03-dc-dot 2.4s ease-in-out infinite;
  }
  .h03-cell.h03-c3 strong {
    color: #fff;
    font-weight: 600;
  }

  @keyframes h03-dc-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.4); }
    50%      { box-shadow: 0 0 0 4px rgba(212, 48, 47, 0); }
  }
}

/* ============================================================
   优化 4 (2026-05-07) · 主页 CTA 重排：1 主 + 2 副
   主按钮：红色实心 XL，强引导到 /scenarios#s-04 杀手锏
   副链接：弱视觉文字链，符合"目录式探索"语义
   ============================================================ */

/* 主按钮容器 */
.h04-actions-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 1.6rem;
}

/* btn-xl: 比 btn-lg 更大的尺寸（专门给路演主 CTA 用） */
.btn-xl {
  padding: 1.4rem 3rem;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
}

/* 主 CTA：实心红 + 红色光晕脉冲，路演视觉钩子 */
.h04-cta-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 500;
  box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45);
  animation: h04-cta-pulse 3.2s ease-in-out infinite;
  overflow: hidden;
}
.h04-cta-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.h04-cta-main:hover::before {
  transform: translateX(100%);
}
.h04-cta-main-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.7em;
  padding-left: 0.15em; /* 微调 ▶ 视觉居中 */
}

@keyframes h04-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 48, 47, 0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(212, 48, 47, 0); }
}

/* 副链接区：水平居中，弱视觉 */
.h04-sublinks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.h04-sublink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.h04-sublink:hover {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--dc-red);
}
.h04-sublink-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--dc-red);
  opacity: 0.7;
}
.h04-sublink-label {
  /* 自然继承 */
}
.h04-sublink-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
  font-size: 0.9em;
  opacity: 0.5;
}
.h04-sublink:hover .h04-sublink-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.h04-sublink-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
  user-select: none;
}

/* 移动端 ≤640px：副链接竖排 */
@media (max-width: 640px) {
  .btn-xl {
    padding: 1.2rem 2rem;
    font-size: 1rem;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
  .h04-cta-main {
    gap: 0.6rem;
  }
  .h04-sublinks {
    flex-direction: column;
    gap: 0.5rem;
  }
  .h04-sublink-sep {
    display: none;
  }
  .h04-sublink {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 0.7rem 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
  }
  .h04-sublink:hover {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    border-color: var(--dc-red);
  }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .h04-cta-main { animation: none; }
  .h04-cta-main::before { display: none; }
}

/* ============================================================
   L2 (2026-05-07) · 「演示」突出三层结构
   主 CTA (8 秒) → 次 CTA (18 屏) → 三级链接 (产品 / 案例)
   ============================================================ */

/* h04-actions-hero 改为竖排：主 CTA + 次 CTA */
.h04-actions-hero {
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* 次级 CTA：描边红色按钮，比主 CTA 弱但比文字链强 */
.h04-cta-second {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--dc-red);
  background: transparent;
  border: 1px solid rgba(212, 48, 47, 0.55);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.h04-cta-second:hover {
  background: rgba(212, 48, 47, 0.08);
  border-color: var(--dc-red);
  color: #fff;
}
.h04-cta-second .arrow {
  transition: transform 0.3s var(--ease-out);
}
.h04-cta-second:hover .arrow {
  transform: translateX(4px);
}

/* 三级链接区：弱化为辅助提示，白底浅灰字 */
.h04-sublinks-tertiary {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  opacity: 0.65;
}
.h04-sublinks-prefix {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin-right: 0.4rem;
}

/* ============================================================
   A2 · 桌面端顶栏「实操」整体变红高亮
   ============================================================ */
.nav-link-primary {
  color: var(--dc-red) !important;
  font-weight: 600;
  position: relative;
}
.nav-link-primary:hover {
  color: var(--dc-red) !important;
  opacity: 1;
}
/* 浅底页面（is-light 模式）下，未激活时也保持红色高亮 */
.nav.is-light .nav-link-primary {
  color: var(--dc-red) !important;
}
/* 激活态：保留底部红下划线（继承 .nav-link.is-active 已有样式） */
.nav-link-primary.is-active {
  color: var(--dc-red) !important;
}

/* ============================================================
   A2 · 移动端 Tab Bar「实操」整体变红 + B2 · 波纹扩散
   ============================================================ */
@media (max-width: 640px) {
  /* A2: 实操 tab 在未激活时,文字 + 图标都呈红色 */
  .nav-tab-primary {
    color: var(--dc-red) !important;
  }
  .nav-tab-primary .nav-tab-text {
    font-weight: 600;
  }
  /* 深底页面下也强制红色（覆盖 .nav-tabbar:not(.is-light) .nav-tab 的浅白色） */
  .nav-tabbar:not(.is-light) .nav-tab-primary {
    color: var(--dc-red) !important;
  }

  /* 主推态图标容器:用作波纹的定位锚点 */
  .nav-tab-primary .nav-tab-icon {
    position: relative;
  }

  /* B2 · 红色实心点 (核心) */
  .nav-tab-primary .nav-tab-icon::after {
    content: "";
    position: absolute;
    top: 2px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dc-red);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    z-index: 2;
  }
  /* 深底页面下,红点的外圈白边换成深色 */
  .nav-tabbar:not(.is-light) .nav-tab-primary .nav-tab-icon::after {
    box-shadow: 0 0 0 2px rgba(20, 20, 22, 0.85);
  }

  /* B2 · 水波纹扩散圆环 */
  .nav-tab-primary .nav-tab-icon::before {
    content: "";
    position: absolute;
    top: 2px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dc-red);
    z-index: 1;
    animation: nav-tab-ripple 2.2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
  }

  /* 已激活就不需要红点和波纹了 */
  .nav-tab-primary.is-active .nav-tab-icon::after,
  .nav-tab-primary.is-active .nav-tab-icon::before {
    display: none;
  }

  /* 移动端 h04-cta-second 全宽 */
  .h04-cta-second {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* 移动端三级链接更紧凑 */
  .h04-sublinks-tertiary {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.78rem;
  }
  .h04-sublinks-tertiary .h04-sublink {
    width: auto;
    max-width: none;
    background: transparent;
    border: none;
    padding: 0.3rem 0;
  }
  .h04-sublinks-tertiary .h04-sublink-sep {
    display: inline;
  }
}

/* B2 波纹关键帧:从内向外扩散 + 淡出 */
@keyframes nav-tab-ripple {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

/* 减少动效偏好:关闭波纹动画 */
@media (prefers-reduced-motion: reduce) {
  .nav-tab-primary .nav-tab-icon::before { animation: none; opacity: 0; }
}

/* ============================================================
   D1 · 首屏气泡引导（仅首次访问主页时弹出）
   ============================================================ */
.demo-hint-bubble {
  position: fixed;
  z-index: 999;
  background: var(--dc-red);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 28px rgba(212, 48, 47, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}
.demo-hint-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: demo-hint-float 2.4s ease-in-out infinite;
}
.demo-hint-bubble .demo-hint-arrow {
  display: inline-block;
  font-size: 1em;
  transition: transform 0.3s var(--ease-out);
}
.demo-hint-bubble:hover .demo-hint-arrow {
  transform: translateX(4px);
}
.demo-hint-bubble .demo-hint-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
  cursor: pointer;
  border: none;
  color: #fff;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.demo-hint-bubble .demo-hint-close:hover {
  background: rgba(255, 255, 255, 0.35);
}
/* 气泡下方小三角，指向 Tab Bar 的"实操"位置 */
.demo-hint-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 30%;
  width: 12px;
  height: 12px;
  background: var(--dc-red);
  transform: rotate(45deg);
}

/* 移动端：气泡定位在 Tab Bar 上方,指向第 2 格"实操" */
@media (max-width: 640px) {
  .demo-hint-bubble {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    /* 第 2 格 (实操) 大概位于屏幕宽度 25%~50% 之间,中点 ≈ 37.5% */
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    max-width: 88vw;
  }
  .demo-hint-bubble.is-visible {
    transform: translateX(-50%) translateY(0);
  }
  .demo-hint-bubble::after {
    left: 50%;
    margin-left: -6px;
    /* 偏向左,指向第 2 格 */
    transform: rotate(45deg) translate(-30px, -30px);
  }
}

/* 桌面端：气泡定位在顶栏下方,指向"实操"链接 */
@media (min-width: 641px) {
  .demo-hint-bubble {
    top: 76px;
    left: 50%;
    transform: translateX(-30%) translateY(-8px);
  }
  .demo-hint-bubble.is-visible {
    transform: translateX(-30%) translateY(0);
  }
  .demo-hint-bubble::after {
    top: -6px;
    bottom: auto;
    left: 30%;
  }
}

@keyframes demo-hint-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  @keyframes demo-hint-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-3px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-hint-bubble.is-visible { animation: none; }
}

/* ============================================================
   L3 (2026-05-07) · 全站「演示」逃生口
   读者在任意一屏看不懂,都能一键跳到 /scenarios#s-04
   视觉份量：比主 CTA 弱、比正文段落强
   ============================================================ */

.escape-to-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 2.4rem auto 0;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition:
    background 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
  /* 让它从段落中脱出 */
  align-self: center;
}

/* 浅色屏（h-02 屏）下的样式 */
.escape-to-demo-light {
  display: flex;
  width: fit-content;
  background: rgba(212, 48, 47, 0.06);
  border: 1px solid rgba(212, 48, 47, 0.25);
  color: #2c2c2e;
}
.escape-to-demo-light:hover {
  background: rgba(212, 48, 47, 0.12);
  border-color: var(--dc-red);
  color: var(--dc-red);
  transform: translateY(-1px);
}
.escape-to-demo-light .escape-icon {
  color: var(--dc-red);
}

/* 深色屏（h-03 / 产品页 hero）下的样式 */
.escape-to-demo-dark {
  display: flex;
  width: fit-content;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
.escape-to-demo-dark:hover {
  background: rgba(212, 48, 47, 0.12);
  border-color: var(--dc-red);
  color: #fff;
  transform: translateY(-1px);
}
.escape-to-demo-dark .escape-icon {
  color: var(--dc-red);
}

/* 共用部件 */
.escape-to-demo .escape-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: rgba(212, 48, 47, 0.12);
  font-size: 0.65em;
  padding-left: 0.12em; /* 微调 ▶ 居中 */
  flex-shrink: 0;
}
.escape-to-demo .escape-text strong {
  color: var(--dc-red);
  font-weight: 600;
}
.escape-to-demo-dark .escape-text strong {
  color: #fff;
}
.escape-to-demo:hover .escape-text strong {
  color: var(--dc-red);
}
.escape-to-demo .escape-arrow {
  transition: transform 0.3s var(--ease-out);
  font-size: 0.95em;
  opacity: 0.7;
  flex-shrink: 0;
}
.escape-to-demo:hover .escape-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* 让父容器把它居中（h02-inner / h03-inner 是 block 流） */
.h02-inner > .escape-to-demo,
.h03-inner > .escape-to-demo {
  margin-left: auto;
  margin-right: auto;
}

/* 产品页 hero 内的逃生口：跟在 ↓ 箭头之后，份量更轻 */
.escape-to-demo-hero {
  margin-top: 1.8rem;
  font-size: 0.85rem;
  padding: 0.7rem 1.3rem;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .escape-to-demo {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    font-size: 0.86rem;
    padding: 0.75rem 1.2rem;
    margin-top: 2rem;
  }
  .escape-to-demo-hero {
    font-size: 0.8rem;
    padding: 0.65rem 1rem;
    margin-top: 1.4rem;
  }
}

/* ============================================================
   优化 1 (2026-05-07) · 主页屏 02 反差对照重构
   3 行横排：左 [过去] · 中 → 箭头 · 右 [DeepConnect]
   ============================================================ */

.h02-contrast {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0 auto 3.5rem;
  max-width: 980px;
}

.h02-contrast-row {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  background: #fff;
  border: 1px solid var(--text-on-light-faint);
  border-left: 3px solid var(--dc-red);
  border-radius: 4px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.h02-contrast-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.h02-contrast-old,
.h02-contrast-new {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.h02-contrast-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
}
.h02-contrast-new .h02-contrast-tag {
  color: var(--dc-red);
}

.h02-contrast-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-on-light-mute);
}
.h02-contrast-new .h02-contrast-text {
  color: var(--text-on-light);
  font-size: 1.15rem;
}
.h02-contrast-text strong {
  color: var(--text-on-light);
  font-weight: 600;
}

.h02-contrast-arrow {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--dc-red);
}
.h02-contrast-arrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--dc-red);
}
.h02-contrast-arrow-head {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  margin-left: -8px;
}

@media (max-width: 767px) {
  .h02-contrast-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.3rem 1.2rem;
  }
  .h02-contrast-arrow {
    transform: rotate(90deg);
    justify-self: start;
    margin: 0.3rem 0;
  }
  .h02-contrast-arrow-line { width: 20px; }
  .h02-contrast-new .h02-contrast-text { font-size: 1.08rem; }

  /* ---------- S06 一人多身份 · 手机端关闭误导性虚线圈 ---------- */
  /* 桌面端 4 张身份卡呈圆周分布,虚线圈是同心轨道隐喻; */
  /* 手机端 4 卡纵向堆叠,该圈被拉成贯穿全屏的椭圆,造成视觉误导,故隐藏 */
  .s-multi-center-ring {
    display: none;
  }
}

/* ============================================================
   屏 01.5 · DC 概念视觉屏 · 神经元网络（分镜叙事版 V2）
   2026-05-07 重做 - 6 秒一轮，3 段分镜，每段 2 秒
   段 1 (0-2s)：先让员工有"记忆" — 仅中央红点
   段 2 (2-4s)：再让公司有"大脑" — 4 个外围公司点淡入
   段 3 (4-6s)：最后让大脑"互相对话" — 8 条光丝绘制 + 数据流
   ============================================================ */
.home-network {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark);
  color: #fff;
  padding: 6rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}
.home-network::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90vmin; height: 90vmin;
  background: radial-gradient(circle, rgba(255,40,60,0.06) 0%, rgba(255,40,60,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.hn-inner {
  max-width: 1100px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hn-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.45em;
  color: rgba(255,255,255,0.45);
  margin: 0 0 2rem;
}
.hn-title {
  font-family: var(--font-serif-cn);
  font-weight: 400;
  line-height: 1.32;
  margin: 0 0 2.5rem;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  color: rgba(255,255,255,0.92);
}
.hn-title .hn-line { display: block; }
.hn-title .hn-line:last-child { color: var(--dc-red); }

/* ----- SVG 舞台 ----- */
.hn-stage {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  aspect-ratio: 800 / 480;
  position: relative;
}
.hn-svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
  position: absolute;
  inset: 0;
}

/* ----- 分镜大字（独立放在 SVG 舞台上方，避免遮挡） ----- */
.hn-acts {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 2rem;
  /* 固定高度避免布局抖动；3 段共用同一空间，靠绝对定位轮显 */
  height: 5.6rem;
}
.hn-act {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  width: 100%;
}
.hn-act-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--dc-red);
  margin-bottom: 0.55rem;
  font-weight: 600;
}
.hn-act-text {
  display: block;
  font-family: var(--font-serif-cn);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255,255,255,0.96);
  margin-bottom: 0.4rem;
}
.hn-act-sub {
  display: block;
  font-family: var(--font-serif-cn);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

/* 6s 一轮: 段 1 0-2s, 段 2 2-4s, 段 3 4-6s; 每段淡入0.3s+保持1.4s+淡出0.3s */
.hn-act-1 { animation: hn-act-1-show 6s ease-in-out infinite; }
.hn-act-2 { animation: hn-act-2-show 6s ease-in-out infinite; }
.hn-act-3 { animation: hn-act-3-show 6s ease-in-out infinite; }
@keyframes hn-act-1-show {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  5%   { opacity: 1; transform: translate(-50%, 0); }
  28%  { opacity: 1; transform: translate(-50%, 0); }
  33%  { opacity: 0; transform: translate(-50%, -8px); }
  100% { opacity: 0; }
}
@keyframes hn-act-2-show {
  0%, 33%   { opacity: 0; transform: translate(-50%, 8px); }
  38%       { opacity: 1; transform: translate(-50%, 0); }
  61%       { opacity: 1; transform: translate(-50%, 0); }
  66%       { opacity: 0; transform: translate(-50%, -8px); }
  100%      { opacity: 0; }
}
@keyframes hn-act-3-show {
  0%, 66%   { opacity: 0; transform: translate(-50%, 8px); }
  71%       { opacity: 1; transform: translate(-50%, 0); }
  94%       { opacity: 1; transform: translate(-50%, 0); }
  99%       { opacity: 0; transform: translate(-50%, -8px); }
  100%      { opacity: 0; }
}

/* ----- 中央节点：始终脉冲（贯穿全段） ----- */
.hn-node-core .hn-halo {
  transform-origin: 400px 240px;
  animation: hn-core-halo 2.4s ease-in-out infinite;
}
.hn-node-core .hn-dot {
  filter: drop-shadow(0 0 8px rgba(255,40,60,0.8));
}
@keyframes hn-core-halo {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.4); opacity: 0.12; }
}

/* 段 1 时中央节点放大突出（独享主角） */
.hn-node-core {
  animation: hn-core-emphasize 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 400px 240px;
}
@keyframes hn-core-emphasize {
  0%, 33%  { transform: scale(1.15); }
  38%, 100%{ transform: scale(1); }
}

/* ----- 段 2: 4 个外围公司节点淡入 (2s 起) ----- */
.hn-node-tl, .hn-node-tr, .hn-node-bl, .hn-node-br {
  opacity: 0;
  animation: hn-company-appear 6s ease-in-out infinite;
  transform-box: fill-box;
}
.hn-node-tl { animation-delay: 0s;    transform-origin: 180px 120px; }
.hn-node-tr { animation-delay: 0.15s; transform-origin: 640px 120px; }
.hn-node-bl { animation-delay: 0.3s;  transform-origin: 180px 360px; }
.hn-node-br { animation-delay: 0.45s; transform-origin: 640px 360px; }
@keyframes hn-company-appear {
  0%, 35%   { opacity: 0; transform: scale(0.5); }
  42%       { opacity: 1; transform: scale(1.15); }
  48%       { opacity: 1; transform: scale(1); }
  100%      { opacity: 1; transform: scale(1); }
}

/* ----- 节点 SVG 文字标签 ----- */
.hn-label {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  opacity: 0;
  animation: hn-label-appear 6s ease-in-out infinite;
}
.hn-label-core {
  fill: rgba(255,255,255,0.95);
  font-size: 15px;
  font-weight: 500;
}
/* 段 1 标签：员工 · 有记忆（0-2s 显示） */
.hn-label-person {
  opacity: 0;
  animation: hn-label-person-show 6s ease-in-out infinite both;
}
/* 段 2/3 标签：公司 A · 大脑（2-6s 显示） */
.hn-label-company {
  opacity: 0;
  animation: hn-label-company-show 6s ease-in-out infinite both;
}
@keyframes hn-label-person-show {
  0%        { opacity: 0; }
  5%        { opacity: 1; }
  28%       { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes hn-label-company-show {
  0%, 33%   { opacity: 0; }
  38%       { opacity: 1; }
  61%       { opacity: 1; }
  66%, 100% { opacity: 0; }  /* 段 3 时退场，避免与流动光点抢视觉 */
}
@keyframes hn-label-appear {
  0%, 38%   { opacity: 0; }
  46%       { opacity: 0.9; }
  100%      { opacity: 0.9; }
}

/* ----- 中央节点身份图标变身：小人 → 公司方块 ----- */
.hn-icon { opacity: 0; }
.hn-icon-person {
  opacity: 0;
  animation: hn-icon-person-show 6s ease-in-out infinite both;
}
.hn-icon-company {
  opacity: 0;
  animation: hn-icon-company-show 6s ease-in-out infinite both;
}
@keyframes hn-icon-person-show {
  0%        { opacity: 0; }
  8%        { opacity: 1; }
  28%       { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes hn-icon-company-show {
  0%, 33%   { opacity: 0; }
  40%       { opacity: 1; }
  100%      { opacity: 1; }
}

/* 中央红点尺度变身：员工尺度（小） → 公司尺度（大） */
.hn-node-core .hn-dot {
  transform-origin: 400px 240px;
  transform-box: fill-box;
  animation: hn-core-dot-resize 6s ease-in-out infinite;
}
@keyframes hn-core-dot-resize {
  0%, 28%   { transform: scale(0.7); }
  38%, 100% { transform: scale(1); }
}

/* ----- 段 3: 光丝逐条绘制 (4s 起) ----- */
.hn-edge {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: hn-edge-draw 6s ease-in-out infinite;
  opacity: 0;
}
.hn-edge-1 { animation-delay: 0s; }
.hn-edge-2 { animation-delay: 0.1s; }
.hn-edge-3 { animation-delay: 0.2s; }
.hn-edge-4 { animation-delay: 0.3s; }
.hn-edge-5 { animation-delay: 0.4s; }
.hn-edge-6 { animation-delay: 0.5s; }
.hn-edge-7 { animation-delay: 0.6s; }
.hn-edge-8 { animation-delay: 0.7s; }
@keyframes hn-edge-draw {
  0%, 66%   { stroke-dashoffset: 600; opacity: 0; }
  72%       { opacity: 0.7; }
  85%       { stroke-dashoffset: 0; opacity: 0.7; }
  100%      { stroke-dashoffset: 0; opacity: 0.7; }
}

/* ----- 段 3: 数据流光点沿对角线流动 ----- */
.hn-flow {
  opacity: 0;
}
.hn-flow-1 { animation: hn-flow-tl 6s ease-in-out infinite; animation-delay: 0s; }
.hn-flow-2 { animation: hn-flow-tr 6s ease-in-out infinite; animation-delay: 0.4s; }
.hn-flow-3 { animation: hn-flow-bl 6s ease-in-out infinite; animation-delay: 0.2s; }
.hn-flow-4 { animation: hn-flow-br 6s ease-in-out infinite; animation-delay: 0.6s; }

@keyframes hn-flow-tl {
  0%, 75%   { opacity: 0; transform: translate(0, 0); }
  78%       { opacity: 1; transform: translate(0, 0); }
  95%       { opacity: 1; transform: translate(-220px, -120px); }
  100%      { opacity: 0; transform: translate(-220px, -120px); }
}
@keyframes hn-flow-tr {
  0%, 75%   { opacity: 0; transform: translate(0, 0); }
  78%       { opacity: 1; transform: translate(0, 0); }
  95%       { opacity: 1; transform: translate(240px, -120px); }
  100%      { opacity: 0; transform: translate(240px, -120px); }
}
@keyframes hn-flow-bl {
  0%, 75%   { opacity: 0; transform: translate(0, 0); }
  78%       { opacity: 1; transform: translate(0, 0); }
  95%       { opacity: 1; transform: translate(-220px, 120px); }
  100%      { opacity: 0; transform: translate(-220px, 120px); }
}
@keyframes hn-flow-br {
  0%, 75%   { opacity: 0; transform: translate(0, 0); }
  78%       { opacity: 1; transform: translate(0, 0); }
  95%       { opacity: 1; transform: translate(240px, 120px); }
  100%      { opacity: 0; transform: translate(240px, 120px); }
}

/* ----- 段 3 减法（2026-05-07）：动词标签已下线，
   靠流动光点自身表达"互相对话"，避免段 3 信息过载 ----- */

/* ----- 三步进化标注（永久显示，作为目录索引；当前段高亮） ----- */
.hn-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.hn-step {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  transition: opacity 0.3s ease;
}
.hn-step-num {
  font-size: 0.78rem;
  color: rgba(255,40,60,0.5);
  letter-spacing: 0.15em;
  font-weight: 600;
  transition: color 0.3s ease, transform 0.3s ease;
}
.hn-step-text {
  color: rgba(255,255,255,0.55);
  font-family: var(--font-serif-cn);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}
.hn-sep {
  color: rgba(255,255,255,0.2);
  font-size: 1.05rem;
}

/* 三步联动：当前段对应的 step 高亮 */
.hn-step-1 .hn-step-num,
.hn-step-2 .hn-step-num,
.hn-step-3 .hn-step-num {
  animation: hn-step-num-pulse 6s ease-in-out infinite;
}
.hn-step-1 .hn-step-text,
.hn-step-2 .hn-step-text,
.hn-step-3 .hn-step-text {
  animation: hn-step-text-pulse 6s ease-in-out infinite;
}
.hn-step-2 .hn-step-num, .hn-step-2 .hn-step-text { animation-delay: -4s; }
.hn-step-3 .hn-step-num, .hn-step-3 .hn-step-text { animation-delay: -2s; }
@keyframes hn-step-num-pulse {
  0%, 28%, 33%, 100% { color: rgba(255,40,60,0.5); }
  5%, 27%            { color: var(--dc-red); }
}
@keyframes hn-step-text-pulse {
  0%, 28%, 33%, 100% { color: rgba(255,255,255,0.55); }
  5%, 27%            { color: rgba(255,255,255,0.95); }
}

/* ----- 移动端适配 ----- */
@media (max-width: 720px) {
  .home-network { padding: 4.5rem 1.2rem 3.5rem; }
  .hn-eyebrow { font-size: 0.78rem; letter-spacing: 0.35em; margin: 0 0 1.5rem; }
  .hn-title { font-size: clamp(1.25rem, 4.6vw, 1.7rem); margin: 0 0 1.8rem; line-height: 1.45; }
  .hn-stage { margin: 0 auto 1.8rem; }
  .hn-acts { height: 4.8rem; margin: 0 auto 1.4rem; }
  .hn-act-text { font-size: clamp(1.05rem, 4.4vw, 1.4rem); margin-bottom: 0.3rem; }
  .hn-act-sub { font-size: 0.78rem; }
  .hn-act-num { font-size: 0.72rem; margin-bottom: 0.35rem; }
  .hn-label { font-size: 12px; }
  .hn-label-core { font-size: 13px; }
  .hn-steps { gap: 0.5rem; font-size: 0.78rem; flex-wrap: nowrap; }
  .hn-step-text { font-size: 0.85rem; }
  .hn-step-num { font-size: 0.68rem; }
  .hn-sep { font-size: 0.78rem; }
}

/* ----- 无障碍：减少动效偏好 ----- */
@media (prefers-reduced-motion: reduce) {
  .hn-act-1, .hn-act-2, .hn-act-3 {
    animation: none !important;
    opacity: 0 !important;
  }
  .hn-act-3 { opacity: 1 !important; }
  .hn-node-core, .hn-node-core .hn-halo,
  .hn-node-tl, .hn-node-tr, .hn-node-bl, .hn-node-br,
  .hn-edge, .hn-flow, .hn-label,
  .hn-step-num, .hn-step-text {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .hn-flow { opacity: 0 !important; }
}

/* ============================================================
   屏 01.6 · 历史沿革 · 从滴灌通升维而来
   2026-05-07 新增 - 时间轴 + 四张卡片 + 底部金句
   ============================================================ */
.home-origin {
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.home-origin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(255, 40, 60, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.h-origin-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px;
  position: relative;
  z-index: 1;
}

/* —— 顶部标题区 —— */
.h-origin-head {
  text-align: center;
  margin-bottom: 80px;
}
.h-origin-eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  color: rgba(255, 40, 60, 0.85);
  margin: 0 0 24px;
  font-weight: 500;
}
.h-origin-title {
  font-size: 44px;
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.h-origin-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  letter-spacing: 0.02em;
}

/* —— 时间轴 —— */
.h-origin-timeline {
  position: relative;
  height: 60px;
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.h-origin-line {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.h-origin-line-progress {
  position: absolute;
  left: 40px;
  top: 50%;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 40, 60, 0.8), rgba(255, 40, 60, 0.4));
  box-shadow: 0 0 8px rgba(255, 40, 60, 0.5);
  animation: h-origin-line-draw 1.6s ease-out 0.5s forwards;
}
@keyframes h-origin-line-draw {
  to { width: calc(100% - 80px); }
}
.h-origin-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff283c;
  box-shadow: 0 0 0 4px rgba(255, 40, 60, 0.15), 0 0 12px rgba(255, 40, 60, 0.6);
  z-index: 2;
  opacity: 0;
  transform: scale(0.5);
  animation: h-origin-dot-show 0.5s ease-out forwards;
}
.h-origin-dot-1 { animation-delay: 0.6s; }
.h-origin-dot-2 { animation-delay: 1.0s; }
.h-origin-dot-3 { animation-delay: 1.4s; }
.h-origin-dot-4 { animation-delay: 1.8s; }
@keyframes h-origin-dot-show {
  to { opacity: 1; transform: scale(1); }
}
.h-origin-dot-3 {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 6px rgba(255, 40, 60, 0.2), 0 0 20px rgba(255, 40, 60, 0.8);
}
.h-origin-dot-3::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 40, 60, 0.4);
  animation: h-origin-dot-pulse 2.4s ease-out infinite;
}
@keyframes h-origin-dot-pulse {
  0%   { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2); }
}
.h-origin-dot-year {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  font-weight: 500;
}
.h-origin-dot-3 .h-origin-dot-year {
  color: rgba(255, 40, 60, 0.9);
  font-weight: 600;
}

/* —— 四张卡片 —— */
.h-origin-cards {
  list-style: none;
  padding: 0;
  margin: 0 0 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.h-origin-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid rgba(255, 40, 60, 0.4);
  border-radius: 6px;
  padding: 28px 22px;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: h-origin-card-show 0.7s ease-out forwards;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.h-origin-card-1 { animation-delay: 1.2s; }
.h-origin-card-2 { animation-delay: 1.5s; }
.h-origin-card-3 { animation-delay: 1.8s; }
.h-origin-card-4 { animation-delay: 2.1s; }
@keyframes h-origin-card-show {
  to { opacity: 1; transform: translateY(0); }
}
.h-origin-card:hover {
  border-color: rgba(255, 40, 60, 0.6);
  transform: translateY(-4px);
}
.h-origin-card-now {
  background: rgba(255, 40, 60, 0.06);
  border-top: 2px solid #ff283c;
  border-color: rgba(255, 40, 60, 0.25);
  box-shadow: 0 0 32px rgba(255, 40, 60, 0.12);
}
.h-origin-card-num {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 40, 60, 0.85);
  font-weight: 600;
  margin-bottom: 8px;
}
.h-origin-card-stage {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
  letter-spacing: 0.08em;
}
.h-origin-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.3;
}
.h-origin-card-now .h-origin-card-title {
  color: #ff5566;
}
.h-origin-card-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* —— 底部金句 —— */
.h-origin-quote {
  text-align: center;
  opacity: 0;
  animation: h-origin-quote-show 1s ease-out 2.6s forwards;
}
@keyframes h-origin-quote-show {
  to { opacity: 1; }
}
.h-origin-quote-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(255, 40, 60, 0.4);
  margin: 0 auto 28px;
}
.h-origin-quote-text {
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  letter-spacing: 0.02em;
}
.h-origin-quote-text em {
  color: #ff283c;
  font-style: normal;
  font-weight: 600;
  animation: h-origin-quote-pulse 3s ease-in-out infinite;
}
@keyframes h-origin-quote-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 40, 60, 0); }
  50%      { text-shadow: 0 0 12px rgba(255, 40, 60, 0.5); }
}

/* —— 移动端适配 —— */
@media (max-width: 768px) {
  .h-origin-inner {
    padding: 64px 20px;
  }
  .h-origin-head {
    margin-bottom: 48px;
  }
  .h-origin-title {
    font-size: 28px;
  }
  .h-origin-sub {
    font-size: 14px;
  }
  .h-origin-timeline {
    display: none;
  }
  .h-origin-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 56px;
  }
  .h-origin-card {
    padding: 22px 18px;
  }
  .h-origin-card-title {
    font-size: 18px;
  }
  .h-origin-quote-text {
    font-size: 17px;
    line-height: 1.6;
    padding: 0 16px;
  }
}

/* —— 减少动效偏好 —— */
@media (prefers-reduced-motion: reduce) {
  .h-origin-line-progress {
    width: calc(100% - 80px) !important;
    animation: none !important;
  }
  .h-origin-dot,
  .h-origin-card,
  .h-origin-quote {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .h-origin-dot-3::after,
  .h-origin-quote-text em {
    animation: none !important;
  }
}