/* ============================================================
   道爷心得 × 人生失序校准 — 官网设计系统 v4.0
   国际大站风格 + 实拍级品牌图接入
   ============================================================ */

/* ── 设计 Token ─────────────────────────────────────────── */
:root {
  /* 品牌色系：暖象牙底 + 低饱和古铜，不用廉价亮橙 */
  --copper:        #9c704e;
  --copper-dim:    #c1a17d;
  --plum:          #514755;
  --plum-light:    #75677a;
  --jade:          #3f625c;

  /* 中性色阶 */
  --ink:           #171410;          /* 近黑但保留温度 */
  --ink-90:        rgba(23,20,16,.9);
  --ink-60:        rgba(23,20,16,.6);
  --ink-40:        rgba(23,20,16,.4);
  --ink-16:        rgba(23,20,16,.16);
  --ink-08:        rgba(23,20,16,.08);
  --ink-05:        rgba(23,20,16,.05);

  /* 页面背景 */
  --bg:            #fbfaf7;
  --bg-white:      #fffefd;
  --bg-sand:       #f2ecdf;
  --bg-dark:       #0f1114;          /* 深沉浸区 */
  --bg-dark-2:     #15181d;

  /* 文字层级 */
  --text-primary:  var(--ink);
  --text-body:     rgba(23,20,16,.72);
  --text-muted:    rgba(23,20,16,.48);
  --text-micro:    rgba(23,20,16,.38);

  /* 交互主色 */
  --accent:        #9c704e;          /* restrained bronze CTA */
  --accent-dark:   #7d573d;
  --interactive-gradient: linear-gradient(135deg, #a87955 0%, #725a73 50%, #3f625c 100%);
  --interactive-gradient-hover: linear-gradient(135deg, #b5835d 0%, #7f637f 48%, #496d66 100%);
  --interactive-ghost-gradient: linear-gradient(180deg, rgba(255,254,253,.98) 0%, rgba(239,232,221,.9) 100%);
  --interactive-link-gradient: linear-gradient(135deg, rgba(164,116,79,.92) 0%, rgba(102,82,103,.92) 56%, rgba(63,98,92,.92) 100%);
  --interactive-shadow: 0 15px 32px rgba(47,43,38,.22), 0 5px 12px rgba(63,98,92,.14), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -10px 20px rgba(20,16,12,.14);
  --interactive-shadow-hover: 0 20px 42px rgba(47,43,38,.26), 0 9px 18px rgba(63,98,92,.16), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -10px 20px rgba(20,16,12,.12);
  --interactive-ghost-shadow: 0 12px 26px rgba(47,43,38,.12), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -8px 18px rgba(122,94,67,.08);

  /* 边框 */
  --border:        rgba(26,31,38,.08);
  --border-strong: rgba(26,31,38,.14);
  --border-copper: rgba(184,121,76,.28);
  --border-plum:   rgba(106,84,108,.22);

  /* 阴影 — 仿 Stripe 蓝调多层 */
  --shadow-xs:     0 1px 2px rgba(26,31,38,.06);
  --shadow-sm:     0 4px 12px rgba(26,31,38,.06), 0 1px 3px rgba(26,31,38,.04);
  --shadow-md:     0 12px 32px rgba(26,31,38,.08), 0 4px 10px rgba(26,31,38,.05);
  --shadow-lg:     0 28px 60px rgba(26,31,38,.10), 0 8px 20px rgba(26,31,38,.06);
  --shadow-xl:     0 48px 96px rgba(26,31,38,.12), 0 16px 36px rgba(26,31,38,.07);

  /* 圆角系统 */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 9999px;

  /* 容器 */
  --max-w:  1160px;
  --gap:    20px;
}

/* ── 重置 ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { text-wrap: balance; }
.copy-line {
  display: block;
  max-width: 100%;
}
.hero-copy h1 .copy-line,
.subpage .page-title .copy-line,
.info-card h2 .copy-line,
.subpage-next-title .copy-line {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.keep-phrase { display: inline-block; white-space: nowrap; }

/* ── 容器 ────────────────────────────────────────────────── */
.container {
  width: min(var(--max-w), 100% - 48px);
  margin-inline: auto;
}

/* ================================================================
   通告栏
   ================================================================ */
.announcement-bar {
  background: linear-gradient(90deg, rgba(184,121,76,.08), rgba(106,84,108,.06), rgba(184,121,76,.05));
  border-bottom: 1px solid var(--border-copper);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.announcement-inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.announcement-inner a {
  color: var(--copper);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .15s;
}
.announcement-inner a:hover { opacity: .76; }

/* ================================================================
   导航 — Apple 玻璃态标准
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,248,.82);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--ink-05);
  transition: background .2s;
}
.nav-shell {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 品牌 Logo */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #8d674b 0%, #272320 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(23,20,16,.18);
  flex-shrink: 0;
}
.brand-title {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.brand-subtitle {
  display: block;
  color: var(--text-micro);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.4;
}

/* 导航链接 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  position: relative;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  color: var(--ink-60);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,254,253,.82), rgba(239,232,221,.62));
  box-shadow: 0 8px 18px rgba(47,43,38,.08), inset 0 1px 0 rgba(255,255,255,.7);
  transform: translateY(-1px);
}

/* 导航 CTA */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--interactive-gradient);
  border: 1px solid rgba(255,255,255,.2);
  color: #fffdf8 !important;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(47,43,38,.18), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -9px 18px rgba(20,16,12,.14);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  flex-shrink: 0;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--interactive-gradient-hover);
  box-shadow: 0 14px 30px rgba(47,43,38,.24), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -9px 18px rgba(20,16,12,.12);
  transform: translateY(-2px);
}

/* ================================================================
   按钮系统 — 克制 3D 渐变，不用纯黑/纯黄
   ================================================================ */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  text-decoration: none;
}
.button::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 54%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); box-shadow: 0 7px 16px rgba(47,43,38,.16), inset 0 1px 0 rgba(255,255,255,.18); }
.button:focus-visible,
.nav-cta:focus-visible,
.text-link:focus-visible {
  outline: 3px solid rgba(156,112,78,.28);
  outline-offset: 3px;
}

.button-primary,
.button-copper {
  background: var(--interactive-gradient);
  color: #fffdf8;
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--interactive-shadow);
}
.button-primary:hover,
.button-copper:hover {
  background: var(--interactive-gradient-hover);
  box-shadow: var(--interactive-shadow-hover);
}

.button-ghost {
  background: var(--interactive-ghost-gradient);
  color: #332820;
  border-color: rgba(156,112,78,.28);
  box-shadow: var(--interactive-ghost-shadow);
}
.button-ghost:hover {
  background: linear-gradient(180deg, rgba(255,254,253,1) 0%, rgba(235,226,212,.96) 100%);
  border-color: rgba(114,90,115,.28);
  box-shadow: 0 16px 34px rgba(47,43,38,.14), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -8px 18px rgba(122,94,67,.08);
}

/* ================================================================
   Hero — 首页主视觉
   ================================================================ */
.home-hero {
  position: relative;
  min-height: calc(100vh - 112px);
  padding: 132px 0 108px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,10,14,.86) 0%, rgba(8,10,14,.64) 42%, rgba(8,10,14,.22) 72%, rgba(8,10,14,.16) 100%),
    linear-gradient(180deg, rgba(8,10,14,.22) 0%, rgba(8,10,14,.4) 100%),
    url('./website-hero-city-20260425-v01.png') center center / cover no-repeat;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 76% 18%, rgba(184,121,76,.2), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22));
  pointer-events: none;
}
.home-hero .hero-copy h1,
.home-hero .hero-lead,
.home-hero .hero-caption {
  color: rgba(255,255,255,.96);
}
.home-hero .hero-lead {
  color: rgba(255,255,255,.76);
}
.home-hero .hero-caption {
  color: rgba(255,255,255,.56);
}
.home-hero .hero-eyebrow {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
}
.home-hero .hero-copy h1 em {
  color: #f0c79f;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: 0;
  align-items: center;
  min-height: 560px;
}

.home-hero .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.home-hero .button-primary {
  background: linear-gradient(135deg, rgba(255,254,253,.98) 0%, rgba(231,216,196,.96) 42%, rgba(176,125,83,.94) 100%);
  color: #241b15;
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 18px 38px rgba(0,0,0,.26), 0 7px 18px rgba(176,125,83,.16), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -10px 18px rgba(119,82,50,.12);
}
.home-hero .button-primary:hover {
  background: linear-gradient(135deg, #fffefd 0%, #ead7bd 42%, #bd875b 100%);
  box-shadow: 0 22px 48px rgba(0,0,0,.3), 0 9px 22px rgba(176,125,83,.18), inset 0 1px 0 rgba(255,255,255,.84), inset 0 -10px 18px rgba(119,82,50,.1);
}
.home-hero .button-ghost {
  color: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  box-shadow: 0 14px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.home-hero .button-ghost:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.1));
}

/* 文案区 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--ink-05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  flex-shrink: 0;
}

.hero-copy h1 {
  max-width: 680px;
  font-size: clamp(46px, 5.4vw, 72px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.038em;
  color: var(--ink);
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--copper);
}
.hero-lead {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-body);
  max-width: 560px;
  letter-spacing: -0.005em;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.hero-caption {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-micro);
  letter-spacing: .01em;
}

/* Hero 下方三格路径 proof bar */
.hero-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
  max-width: 700px;
}
.hero-proof-card {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(12,14,18,.38);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .2s, transform .2s;
}
.hero-proof-card:hover {
  box-shadow: none;
  transform: none;
}
.hero-proof-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--copper);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-proof-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.94);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.hero-proof-card p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
}


/* ================================================================
   页面级 Hero（服务/内容页）
   ================================================================ */
.page-hero {
  padding: 96px 0 80px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* 服务页 Hero — 毛笔静物背景 */
.page-hero-service {
  background:
    linear-gradient(90deg, rgba(250,250,248,.96) 0%, rgba(250,250,248,.88) 38%, rgba(250,250,248,.6) 60%, rgba(250,250,248,.24) 100%),
    url('./website-service-20260424-v03.png') center right / cover no-repeat;
}

.page-hero-content {
  background:
    linear-gradient(90deg, rgba(250,250,248,.96) 0%, rgba(250,250,248,.88) 38%, rgba(250,250,248,.6) 60%, rgba(250,250,248,.24) 100%),
    url('./website-content-20260424-v03.png') center right / cover no-repeat;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.page-title {
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.page-title span {
  color: var(--text-muted);
}
.page-hero-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 560px;
}
.page-hero-proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(26,31,38,.08);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.page-hero-proof-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--copper), var(--plum));
}
.page-hero-proof-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.page-hero-proof-card small {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.subpage-rhythm-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: -20px 0 28px;
  padding: 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(245,240,232,.68));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.subpage-rhythm-item {
  position: relative;
  min-height: 116px;
  padding: 16px 16px 16px 18px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(26,31,38,.07);
  overflow: hidden;
}
.subpage-rhythm-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--copper), var(--plum));
}
.subpage-rhythm-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--copper);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.subpage-rhythm-item strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.subpage-rhythm-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* 品牌视觉块 — 别名，对齐 channel-card-visual */
.brand-visual-block {
  width: 100%;
  height: 130px;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Hero 右侧信息卡 */
.info-card {
  padding: 32px;
  border-radius: var(--r-xl);
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.info-card h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 12px;
}
.info-card p {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.65;
}
.panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-micro);
  margin-bottom: 16px;
}

/* ── 频道卡（含视觉块） ─────────────────────────────── */
.channel-card-visual {
  width: 100%;
  height: 130px;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.brand-visual-assessment {
  background: url('./website-assessment-20260424-v01.png') center center / cover no-repeat;
}
.brand-visual-service {
  background:
    linear-gradient(135deg, rgba(34,29,22,.16), rgba(255,255,255,0) 44%, rgba(44,67,62,.12)),
    url('./website-service-20260424-v03.png') 72% 64% / cover no-repeat;
  filter: saturate(1.08) contrast(1.07) brightness(.98);
}
.brand-visual-content {
  background:
    linear-gradient(135deg, rgba(34,29,22,.10), rgba(255,255,255,0) 40%, rgba(44,67,62,.14)),
    url('./website-content-20260424-v03.png') 64% 56% / cover no-repeat;
  filter: saturate(1.06) contrast(1.05);
}
.channel-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.28), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(184,121,76,.32), transparent 30%),
    linear-gradient(135deg, rgba(14,16,20,.08), rgba(14,16,20,.28));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.channel-card-visual::after {
  content: 'CALIBRATION';
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(17,19,24,.58);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.78);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand-visual-assessment::after { content: 'ASSESSMENT'; }
.brand-visual-service::after { content: 'SERVICE'; }
.brand-visual-content::after { content: 'CONTENT'; }

/* ================================================================
   Sections — 通用
   ================================================================ */
.section {
  position: relative;
  padding: 96px 0;
}
.section-sm { padding: 72px 0; }
.section-lg { padding: 120px 0; }

/* 浅色区 */
.section-light { background: var(--bg-white); }

/* 沙色区 */
.section-sand {
  background: linear-gradient(180deg, var(--bg-sand) 0%, var(--bg) 100%);
}

/* 深色沉浸区 — Apple 黑区工艺 */
.section-dark {
  background: var(--bg-dark);
  color: rgba(255,255,255,.88);
}
.section-dark .eyebrow     { color: rgba(255,255,255,.38); }
.section-dark h2,
.section-dark h3           { color: rgba(255,255,255,.94); }
.section-dark p            { color: rgba(255,255,255,.6);  }
.section-dark .text-link {
  color: #fffdf8;
  background: linear-gradient(135deg, rgba(255,254,253,.16), rgba(164,116,79,.2), rgba(63,98,92,.16));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.section-dark .text-link:hover { color: #fff; background: linear-gradient(135deg, rgba(255,254,253,.22), rgba(181,131,93,.24), rgba(73,109,102,.2)); }

/* 分割线 */
.section + .section::before,
.section + .section-sm::before,
.section-sm + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max-w), 100% - 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}
.section-dark::before,
.section-dark + *::before { display: none; }

/* ── Section 头部 ─────────────────────────────────────── */
.section-head {
  max-width: 680px;
  margin-bottom: 56px;
}
.section-head.center {
  max-width: 760px;
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
}
.section-head h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 660;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.section-copy {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.78;
  color: var(--text-body);
  max-width: 560px;
}
.section-head.center .section-copy { margin-inline: auto; }

/* ================================================================
   卡片系统 — Vercel 多层阴影工艺
   ================================================================ */
/* 通用卡片 */
.card {
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--bg-white);
  border: 1px solid rgba(26,31,38,.075);
  box-shadow: 0 1px 2px rgba(26,31,38,.035);
  transition: border-color .18s ease, background .18s ease;
}
.card:hover {
  border-color: rgba(26,31,38,.14);
  box-shadow: 0 1px 2px rgba(26,31,38,.035);
  transform: none;
}

/* 深色卡片（dark section 内使用） */
.card-dark {
  background: var(--bg-dark-2);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 8px 24px rgba(0,0,0,.24);
}
.card-dark:hover {
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 16px 40px rgba(0,0,0,.32);
}

/* 强调卡片（copper 顶边） */
.card-accent {
  border-top: 2px solid var(--copper);
}
.card-mist {
  border-top: 2px solid rgba(200,211,223,.72);
}
.card-plum {
  border-top: 2px solid var(--plum);
}

/* 卡片内部排版 */
.card .mono-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-micro);
  margin-bottom: 12px;
}
.card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 10px;
}
.card p {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.65;
}
.card-dark .mono-label { color: rgba(255,255,255,.3); }
.card-dark h3          { color: rgba(255,255,255,.92); }
.card-dark p           { color: rgba(255,255,255,.56); }

/* ── 频道卡（含视觉块） ─────────────────────────────── */
.channel-card-visual {
  width: 100%;
  height: 130px;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.channel-card-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-micro);
  margin-bottom: 10px;
}

/* ── 路由卡 / editorial 卡 ────────────────────────── */
.route-card {
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.route-card .mono-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.route-card h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.route-card p {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.65;
}
.editorial-thumb {
  width: 100%;
  height: 184px;
  border-radius: var(--r-md);
  margin-bottom: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.editorial-thumb-state {
  background-image: url('./article-state-observation-20260424-v01.png');
}
.editorial-thumb-case {
  background-image: url('./article-case-breakdown-20260424-v01.png');
}
.editorial-thumb-method {
  background-image: url('./article-judgment-recovery-20260424-v01.png');
}

/* ── Story 卡（深色大卡） ──────────────────────────── */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 20px;
}
.story-card {
  padding: 40px;
  border-radius: var(--r-xl);
  background: var(--bg-dark-2);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 24px 56px rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
}
.story-card .mono-label { color: rgba(255,255,255,.3); }
.story-card h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 640;
  line-height: 1.24;
  letter-spacing: -0.032em;
  color: #fff;
  margin-bottom: 16px;
}
.story-card p { color: rgba(255,255,255,.58); font-size: 15px; }
.story-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
}
.story-points li {
  min-height: 92px;
  padding: 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.story-points strong {
  display: block;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  margin-bottom: 6px;
}
.story-points span {
  display: block;
  color: rgba(255,255,255,.5);
  font-size: 12.5px;
  line-height: 1.45;
}
.story-card-side {
  background:
    linear-gradient(135deg, rgba(184,121,76,.16), rgba(255,255,255,.04)),
    var(--bg-dark-2);
}

/* ── Trust 卡 ───────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.trust-card {
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--bg-white);
  border: 1px solid rgba(26,31,38,.075);
  box-shadow: 0 1px 2px rgba(26,31,38,.035);
}
.trust-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.trust-card p { font-size: 14.5px; color: var(--text-body); line-height: 1.65; }

/* ================================================================
   网格系统
   ================================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.compact-card-grid {
  gap: 16px;
  align-items: stretch;
}
.compact-card-grid .card,
.compact-card-grid .route-card {
  padding: 24px;
}
.compact-card-grid .channel-card-badge,
.compact-card-grid .mono-label {
  margin-bottom: 8px;
}
.compact-card-grid .card h3,
.compact-card-grid .route-card h3 {
  font-size: 18px;
  line-height: 1.28;
  margin-bottom: 8px;
}
.compact-card-grid .card p,
.compact-card-grid .route-card p {
  font-size: 14px;
  line-height: 1.6;
}
.compact-card-grid .channel-card-visual,
.compact-card-grid .editorial-thumb {
  margin-bottom: 16px;
}

/* 分列布局（50/50） */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* CTA panel（文字 + card） */
.cta-panel {
  padding: 32px;
  border-radius: var(--r-xl);
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guide-list li {
  font-size: 15px;
  color: var(--text-body);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.guide-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--copper);
  font-size: 12px;
  top: 2px;
}
.guide-list strong { color: var(--ink); }

/* ================================================================
   链接 & 文字链 — 统一做成轻按钮，所有可点击处有深度
   ================================================================ */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--interactive-link-gradient);
  border: 1px solid rgba(255,255,255,.18);
  color: #fffdf8;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(47,43,38,.12), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -7px 14px rgba(20,16,12,.1);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.text-link::after { content: '→'; font-size: 12px; transform: translateY(-.5px); }
.text-link:hover,
.text-link:focus-visible {
  background: var(--interactive-gradient-hover);
  box-shadow: 0 14px 30px rgba(47,43,38,.18), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -7px 14px rgba(20,16,12,.09);
  transform: translateY(-2px);
}

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* ================================================================
   首页判断卡
   ================================================================ */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ================================================================
   Feature Grid（3列特性卡）
   ================================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ================================================================
   看懂失序与停留动线
   ================================================================ */
.page-hero-concepts {
  background:
    radial-gradient(circle at 88% 12%, rgba(156,112,78,.16), transparent 34%),
    linear-gradient(135deg, #f8f4ec 0%, #fbfaf7 46%, #eee3d3 100%);
}
.understanding-hero-visual,
.concept-visual-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: rgba(255,254,253,.82);
  border: 1px solid rgba(23,20,16,.08);
  box-shadow: var(--shadow-lg);
}
.understanding-hero-visual img,
.concept-visual-panel img {
  width: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(.98) brightness(.98);
}
.understanding-hero-visual img {
  height: 360px;
}
.understanding-hero-visual figcaption {
  padding: 24px 26px 6px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 760;
  line-height: 1.28;
  letter-spacing: -0.025em;
}
.understanding-hero-visual p {
  padding: 0 26px 26px;
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.68;
}
.concept-teaser-section {
  overflow: hidden;
}
.concept-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.concept-teaser-head {
  margin-bottom: 0;
}
.concept-actions {
  margin-top: 28px;
}
.concept-teaser-side {
  display: grid;
  gap: 18px;
}
.concept-visual-panel img {
  height: 220px;
}
.concept-visual-panel figcaption {
  padding: 14px 18px 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  background: linear-gradient(180deg, rgba(255,254,253,.86), rgba(242,236,223,.62));
}
.concept-card-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.concept-mini-card {
  position: relative;
  min-height: 168px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(255,254,253,.88);
  border: 1px solid rgba(23,20,16,.075);
  box-shadow: 0 14px 34px rgba(23,20,16,.055);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.concept-mini-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #8d674b, #c1a17d 56%, rgba(81,71,85,.55));
  opacity: .9;
}
.concept-mini-card:hover {
  border-color: rgba(156,112,78,.28);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.concept-mini-card span,
.concept-one-liners span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: var(--r-pill);
  background: rgba(184,121,76,.1);
  color: var(--copper);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.concept-mini-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -0.025em;
}
.concept-mini-card p {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.65;
}
.concept-primer-grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: stretch;
}
.concept-primer-panel,
.concept-one-liners article,
.concept-detail-card {
  border-radius: var(--r-xl);
  background: var(--bg-white);
  border: 1px solid rgba(26,31,38,.075);
  box-shadow: var(--shadow-xs);
}
.concept-primer-panel {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.concept-primer-panel h2 {
  color: var(--ink);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.concept-one-liners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.concept-one-liners article {
  padding: 24px;
}
.concept-one-liners strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 720;
}
.concept-one-liners p {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.6;
}
.concept-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.concept-detail-card {
  scroll-margin-top: 104px;
  padding: 32px;
}
.concept-detail-card h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}
.concept-detail-card p {
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.72;
}
.concept-compare {
  display: grid;
  gap: 8px;
  margin: 22px 0;
  padding: 18px;
  border-radius: var(--r-md);
  background: rgba(242,236,223,.72);
  border: 1px solid var(--border);
}
.concept-compare span {
  display: block;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.55;
}
.concept-compare strong {
  color: var(--ink);
}

/* ================================================================
   法律声明区
   ================================================================ */
.legal-section {
  padding: 48px 0;
  background: var(--bg-sand);
  border-top: 1px solid var(--border);
}
.legal-panel {
  padding: 28px 32px;
  border-radius: var(--r-lg);
  background: var(--bg-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.legal-panel-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 28px;
  align-items: start;
}
.legal-aside {
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(156,112,78,.09), rgba(81,71,85,.055));
  border: 1px solid rgba(156,112,78,.16);
}
.legal-aside .mono-label {
  margin-bottom: 10px;
  color: var(--text-micro);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.legal-aside h3 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.legal-aside p {
  color: var(--text-body);
  font-size: 13.5px;
  line-height: 1.62;
}
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notice-list li {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}
.notice-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .82em;
  width: 9px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(168,121,85,.62), rgba(63,98,92,.38));
}
.notice-list strong { color: var(--text-body); font-weight: 650; }
.notice-list .notice-copy-line {
  display: block;
}
.notice-list .notice-break {
  display: inline-block;
  margin-top: 2px;
  color: var(--text-body);
  letter-spacing: -0.005em;
}
.notice-list .notice-break .copy-line {
  display: block;
  line-height: 1.62;
}

/* ================================================================
   Footer
   ================================================================ */
.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-white);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-brand strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.footer-brand p {
  font-size: 13px;
  color: var(--text-muted);
}
.footer-meta {
  text-align: right;
}
.footer-meta p {
  font-size: 13px;
  color: var(--text-micro);
  line-height: 1.8;
}
.footer-meta .icp {
  color: var(--text-micro);
  font-size: 12.5px;
}

/* ================================================================
   通用辅助
   ================================================================ */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }

/* ================================================================
   非首页网页版精修 — 低密度排版 + 克制色彩
   ================================================================ */
body.subpage {
  --subpage-bg: #f4f1ea;
  --subpage-surface: #fffdf8;
  --subpage-panel: #fbfaf6;
  --subpage-ink: #181510;
  --subpage-muted: rgba(24,21,16,.68);
  --subpage-faint: rgba(24,21,16,.50);
  --subpage-line: rgba(24,21,16,.10);
  --subpage-accent: #6d5c4c;
  background: var(--subpage-bg);
}
.subpage .page-hero,
.subpage .page-hero-service,
.subpage .page-hero-content,
.subpage .page-hero-concepts {
  padding: 104px 0 92px;
  background: var(--subpage-bg);
  border-bottom: 1px solid var(--subpage-line);
}
.subpage .page-hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(390px, .72fr);
  gap: 84px;
  align-items: center;
}
.subpage .page-title {
  max-width: 780px;
  color: var(--subpage-ink);
  font-size: clamp(44px, 5.2vw, 64px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.046em;
}
.subpage .page-title .copy-line { display: block; color: inherit; }
.subpage .page-title .soft-line { color: rgba(24,21,16,.62); }
.subpage .hero-lead {
  max-width: 620px;
  margin-top: 24px;
  color: var(--subpage-muted);
  font-size: 17px;
  line-height: 1.86;
}
.subpage .eyebrow,
.subpage .panel-label,
.subpage .channel-card-badge,
.subpage .mono-label {
  color: var(--subpage-faint);
  letter-spacing: .08em;
}
.subpage .button-primary {
  background: var(--interactive-gradient);
  color: #fffdf8;
  box-shadow: var(--interactive-shadow);
}
.subpage .button-ghost {
  background: var(--interactive-ghost-gradient);
  border-color: rgba(156,112,78,.28);
  color: var(--subpage-ink);
  box-shadow: var(--interactive-ghost-shadow);
}
.subpage .text-link {
  color: #fffdf8;
  background: var(--interactive-link-gradient);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(47,43,38,.1), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -7px 14px rgba(20,16,12,.1);
}
.subpage .info-card {
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  background: var(--subpage-surface);
  border: 1px solid var(--subpage-line);
  box-shadow: none;
}
.subpage .info-card .panel-label {
  margin: 28px 30px 14px;
}
.subpage .info-card .brand-visual-block {
  height: 260px;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.subpage .info-card h2 {
  padding: 28px 30px 0;
  color: var(--subpage-ink);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 620;
  line-height: 1.34;
  letter-spacing: -0.028em;
}
.subpage .info-card > p:not(.panel-label) {
  padding: 0 30px 30px;
  color: var(--subpage-muted);
}
.subpage .understanding-hero-visual {
  background: var(--subpage-surface);
  border-color: var(--subpage-line);
  box-shadow: none;
}
.subpage .understanding-hero-visual img {
  height: 360px;
  filter: saturate(.78) contrast(.98) brightness(.96);
}
.subpage .page-hero-proof-strip {
  max-width: 560px;
  margin-top: 34px;
  gap: 0;
  border-top: 1px solid var(--subpage-line);
  border-bottom: 1px solid var(--subpage-line);
}
.subpage .page-hero-proof-card {
  padding: 18px 20px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--subpage-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.subpage .page-hero-proof-card:last-child { border-right: 0; }
.subpage .page-hero-proof-card::before { display: none; }
.subpage .page-hero-proof-card strong {
  color: var(--subpage-ink);
  font-size: 14px;
  font-weight: 650;
}
.subpage .page-hero-proof-card small {
  color: var(--subpage-faint);
  font-size: 12px;
}
.subpage .section {
  padding: 92px 0;
}
.subpage .section-sand,
.subpage .legal-section {
  background: var(--subpage-bg);
}
.subpage .section-light {
  background: var(--subpage-panel);
}
.subpage .section-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.subpage .section-head h2,
.subpage .subpage-next-title,
.subpage .concept-primer-panel h2 {
  color: var(--subpage-ink);
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -0.038em;
}
.subpage .subpage-next-title { margin: 0; }
.subpage .section-copy {
  color: var(--subpage-muted);
  line-height: 1.84;
}
.subpage .subpage-rhythm-rail {
  margin: 0 0 36px;
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--subpage-line);
  border-bottom: 1px solid var(--subpage-line);
  border-radius: 0;
  box-shadow: none;
}
.subpage .subpage-rhythm-item {
  min-height: auto;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--subpage-line);
  border-radius: 0;
}
.subpage .subpage-rhythm-item:last-child { border-right: 0; }
.subpage .subpage-rhythm-item::before { display: none; }
.subpage .subpage-rhythm-item span,
.subpage .route-card .mono-label {
  color: var(--subpage-faint);
}
.subpage .card,
.subpage .route-card,
.subpage .concept-mini-card,
.subpage .concept-one-liners article,
.subpage .concept-detail-card,
.subpage .concept-primer-panel,
.subpage .cta-panel,
.subpage .legal-panel {
  background: var(--subpage-surface);
  border: 1px solid var(--subpage-line);
  box-shadow: none;
}
.subpage .card,
.subpage .route-card,
.subpage .concept-mini-card,
.subpage .concept-one-liners article,
.subpage .concept-detail-card {
  border-radius: 22px;
}
.subpage .card-accent,
.subpage .card-mist,
.subpage .card-plum {
  border-top: 1px solid var(--subpage-line);
}
.subpage .compact-card-grid {
  gap: 18px;
}
.subpage .compact-card-grid .card,
.subpage .compact-card-grid .route-card {
  padding: 26px;
}
.subpage .compact-card-grid .card h3,
.subpage .compact-card-grid .route-card h3,
.subpage .concept-detail-card h3 {
  color: var(--subpage-ink);
  font-weight: 650;
  line-height: 1.34;
  letter-spacing: -0.024em;
}
.subpage .compact-card-grid .card p,
.subpage .compact-card-grid .route-card p,
.subpage .concept-detail-card p,
.subpage .concept-one-liners p,
.subpage .concept-mini-card p {
  color: var(--subpage-muted);
  line-height: 1.72;
}
.subpage .compact-card-grid .card,
.subpage .compact-card-grid .route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.subpage .compact-card-grid .card > .text-link,
.subpage .compact-card-grid .route-card > .text-link,
.subpage .compact-card-grid .card > .card-action,
.subpage .compact-card-grid .route-card > .card-action {
  margin-top: auto !important;
  align-self: flex-start;
}
.subpage .compact-card-grid .card > h3,
.subpage .compact-card-grid .route-card > h3 {
  margin-bottom: 10px;
}
.subpage .compact-card-grid .card > p:not(.channel-card-badge):not(.mono-label),
.subpage .compact-card-grid .route-card > p:not(.channel-card-badge):not(.mono-label) {
  margin-bottom: 18px;
}
.subpage .channel-card-visual,
.subpage .brand-visual-block,
.subpage .editorial-thumb {
  border-color: var(--subpage-line);
  box-shadow: none;
  filter: saturate(.78) contrast(.98) brightness(.96);
}
.subpage .channel-card-visual::before {
  background: rgba(24,21,16,.08);
  mix-blend-mode: normal;
}
.subpage .channel-card-visual::after { display: none; }
.subpage .concept-compare {
  background: rgba(244,241,234,.82);
  border-color: var(--subpage-line);
}
.subpage .story-card,
.subpage .story-card-side {
  background: #161411;
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}
.subpage .legal-aside {
  background: var(--subpage-bg);
  border-color: var(--subpage-line);
}

/* ================================================================
   响应式断点
   ================================================================ */
@media (max-width: 1024px) {
  .page-hero-grid,
  .story-grid,
  .concept-teaser-grid,
  .concept-primer-grid,
  .legal-panel-split,
  .split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .concept-detail-grid,
  .concept-one-liners {
    grid-template-columns: 1fr;
  }
  .subpage .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .split      { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .capability-grid, .feature-grid, .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root { --gap: 14px; }

  .container { width: min(var(--max-w), 100% - 32px); }

  /* 移动端不把 PC 导航硬塞进首屏：只保留品牌 + 主入口 */
  .announcement-bar { display: none; }
  .nav-shell {
    height: 58px;
    padding: 0;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .brand { gap: 9px; min-width: 0; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
  .brand-title { font-size: 15px; line-height: 1.2; white-space: nowrap; }
  .brand-subtitle { display: none; }
  .nav-links { display: none; }
  .nav-cta { height: 38px; padding: 0 16px; font-size: 13px; }

  .home-hero {
    min-height: auto;
    padding: 56px 0 60px;
    background:
      linear-gradient(90deg, rgba(8,10,14,.9) 0%, rgba(8,10,14,.74) 52%, rgba(8,10,14,.42) 100%),
      linear-gradient(180deg, rgba(8,10,14,.18) 0%, rgba(8,10,14,.5) 100%),
      url('./website-hero-city-20260425-v01.png') 58% center / cover no-repeat;
  }
  .hero-grid { min-height: auto; display: block; }
  .home-hero .hero-copy { max-width: 100%; }
  .hero-eyebrow { margin-bottom: 18px; padding: 5px 12px; font-size: 10.5px; letter-spacing: .08em; }
  .hero-lead { margin-top: 18px; font-size: 16px; line-height: 1.65; max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; max-width: 340px; }
  .hero-actions .button { width: 100%; }
  .hero-proof-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; max-width: 360px; }
  .hero-proof-card { padding: 14px 16px; }
  .hero-proof-card strong { font-size: 15px; }
  .hero-proof-card p { font-size: 13px; line-height: 1.55; }
  .hero-caption { display: none; }

  .section, .section-sm, .section-lg { padding: 64px 0; }

  .hero-copy h1 { font-size: clamp(38px, 10vw, 52px); }
  .hero-copy h1 em { display: block; }
  .section-copy { max-width: 100%; }
  .page-title   { font-size: clamp(32px, 8vw, 48px); }
  .section-head h2 { font-size: clamp(26px, 7vw, 40px); }

  .grid-2, .grid-3, .capability-grid,
  .feature-grid, .trust-grid { grid-template-columns: 1fr; }

  .compact-card-grid { gap: 12px; }
  .compact-card-grid .card,
  .compact-card-grid .route-card { padding: 20px; }
  .compact-card-grid .card h3,
  .compact-card-grid .route-card h3 { font-size: 17px; }
  .compact-card-grid .card p,
  .compact-card-grid .route-card p {
    font-size: 13.5px;
    line-height: 1.58;
  }
  .compact-card-grid .channel-card-visual,
  .compact-card-grid .editorial-thumb { margin-bottom: 16px; }
  .compact-card-grid .channel-card-visual { height: 116px; }
  .compact-card-grid .editorial-thumb { height: 156px; }

  .subpage-rhythm-rail,
  .page-hero-proof-strip,
  .story-points,
  .concept-card-stack { grid-template-columns: 1fr; }
  .subpage .page-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .subpage .page-title {
    max-width: 100%;
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.04em;
  }
  .subpage .page-hero,
  .subpage .page-hero-service,
  .subpage .page-hero-content,
  .subpage .page-hero-concepts { padding: 72px 0 56px; }
  .subpage .page-hero-proof-strip,
  .subpage .subpage-rhythm-rail { grid-template-columns: 1fr; }
  .subpage .page-hero-proof-card,
  .subpage .subpage-rhythm-item {
    border-right: 0;
    border-bottom: 1px solid var(--subpage-line);
  }
  .subpage .page-hero-proof-card:last-child,
  .subpage .subpage-rhythm-item:last-child { border-bottom: 0; }
  .concept-card-stack { grid-template-columns: 1fr; }
  .concept-mini-card { min-height: auto; }
  .concept-teaser-grid { gap: 24px; }
  .concept-teaser-side { gap: 16px; }
  .concept-visual-panel { border-radius: 24px; }
  .concept-visual-panel img { height: 180px; }
  .understanding-hero-visual { order: -1; border-radius: 24px; }
  .understanding-hero-visual img { height: 220px; }
  .concept-mini-card p { font-size: 13.5px; line-height: 1.58; }
  .page-hero-proof-strip { gap: 10px; }
  .concept-primer-grid,
  .legal-panel-split { gap: 28px; }
  .concept-primer-panel,
  .concept-one-liners article,
  .concept-detail-card { border-radius: var(--r-lg); }

  .announcement-inner { flex-direction: column; align-items: flex-start; gap: 6px; }

  .story-grid { grid-template-columns: 1fr; }
  .story-card { padding: 28px; }

  .footer-meta { text-align: left; }

  .page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero      { padding: 72px 0 56px; }
}

@media (max-width: 480px) {
  .button { min-height: 48px; padding: 0 22px; font-size: 14.5px; }
  .text-link { min-height: 38px; padding: 8px 12px; font-size: 13.5px; }
  .inline-links { gap: 10px; }
  .card, .trust-card, .route-card { padding: 22px; }
  .compact-card-grid .card,
  .compact-card-grid .route-card { padding: 18px; }
  .compact-card-grid .card h3,
  .compact-card-grid .route-card h3 { font-size: 16.5px; }
  .compact-card-grid .channel-card-visual { height: 108px; }
  .compact-card-grid .editorial-thumb { height: 144px; }
  .cta-panel { padding: 24px; }
  .info-card { padding: 24px; }
  .legal-panel { padding: 22px 24px; }
  .legal-aside { padding: 18px; }
  .concept-primer-panel,
  .concept-detail-card,
  .concept-mini-card,
  .concept-one-liners article { padding: 22px; }
  .concept-visual-panel img { height: 150px; }
  .understanding-hero-visual img { height: 180px; }
}