/* ============================================================
   公寓U选 官网设计系统 — Amber Ops Console
   唯一视觉契约见 brand-spec.md。裸 hex 只允许出现在 :root。
   ============================================================ */

:root {
  color-scheme: light;

  /* ── 品牌常量：logo 实测橙，不随主题变化 ─────── */
  --brand: oklch(75.3% 0.169 63);

  /* ── 浅色主题（默认） ───────────────────────── */
  --bg:      oklch(97.2% 0.007 80);   /* 暖白纸面，非纯白 */
  --surface: oklch(99.6% 0.003 85);
  --fg:      oklch(25% 0.014 58);     /* 暖近黑，非纯黑 */
  --muted:   oklch(50% 0.016 62);
  --border:  oklch(90% 0.011 72);
  --accent:  oklch(56% 0.155 48);     /* 橙加深至 4.5:1 可读 */

  --accent-soft: color-mix(in oklch, var(--brand) 17%, transparent);
  --accent-line: color-mix(in oklch, var(--brand) 55%, transparent);
  --accent-hi:   color-mix(in oklch, var(--accent) 86%, black);
  --fg-soft:     color-mix(in oklch, var(--fg) 5%, transparent);
  --fg-soft-2:   color-mix(in oklch, var(--fg) 9%, transparent);
  --shadow:      0 20px 48px -22px oklch(38% 0.06 60 / 0.30);
  --scan-op:     0.10;

  --series-2: oklch(52% 0.105 232);
  --series-3: oklch(80% 0.012 72);
  --danger:   oklch(52% 0.180 27);
  --danger-hi: color-mix(in oklch, var(--danger) 76%, black); /* 微字号徽标专用，保 4.5:1 */

  /* ── 两主题共用派生 ─────────────────────────── */
  --surface-2: color-mix(in oklch, var(--surface) 62%, var(--bg));
  --grid-line: color-mix(in oklch, var(--border) 62%, transparent);
  --series-1:  var(--accent);

  /* 分区背景：hero = 略沉的暖调舞台带；footer = 反色墨块 */
  --hero-bg:     oklch(94.8% 0.011 78);
  --hero-edge:   oklch(88% 0.012 74);
  --foot-bg:     oklch(23% 0.014 60);
  --foot-surface:oklch(28.5% 0.014 60);
  --foot-fg:     oklch(97% 0.006 78);
  --foot-muted:  oklch(76% 0.012 72);
  --foot-border: oklch(34% 0.012 62);
  --foot-accent: oklch(78% 0.150 62);
  --foot-edge:   var(--foot-bg);

  /* ── 字体 ───────────────────────────────────── */
  --font-display: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body:    'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;

  /* ── 字号阶梯（8:1 跨度） ───────────────────── */
  --fs-metric:  clamp(44px, 5.6vw, 88px);
  --fs-display: clamp(34px, 4.6vw, 68px);
  --fs-h1:      clamp(30px, 3.6vw, 50px);
  --fs-h2:      clamp(24px, 2.6vw, 36px);
  --fs-h3:      19px;
  --fs-lead:    17.5px;
  --fs-body:    15.5px;
  --fs-dense:   14px;
  --fs-meta:    12.5px;
  --fs-micro:   11.5px;

  /* ── 空间：整体放宽一档，用留白换阅读密度 ───── */
  --gap-xs: 8px;  --gap-sm: 12px;  --gap-md: 20px;
  --gap-lg: 32px; --gap-xl: 64px;  --gap-2xl: 120px;
  --container: 1240px;
  --gutter: 32px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xs: 2px;
}

/* ── 深色主题 ─────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:      oklch(15% 0.008 65);
  --surface: oklch(20% 0.010 65);
  --fg:      oklch(96% 0.006 75);
  --muted:   oklch(68% 0.012 70);
  --border:  oklch(30% 0.010 65);
  --accent:  var(--brand);

  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --accent-line: color-mix(in oklch, var(--accent) 42%, transparent);
  --accent-hi:   color-mix(in oklch, var(--accent) 82%, white);
  --fg-soft:     color-mix(in oklch, var(--fg) 7%, transparent);
  --fg-soft-2:   color-mix(in oklch, var(--fg) 12%, transparent);
  --shadow:      0 18px 44px -18px oklch(0% 0 0 / 0.72);
  --scan-op:     0.06;

  --series-2: oklch(72% 0.095 215);
  --series-3: oklch(52% 0.012 70);
  --danger:   oklch(66% 0.185 25);
  --danger-hi: color-mix(in oklch, var(--danger) 72%, white);

  --hero-bg:     oklch(18.5% 0.010 65);
  --hero-edge:   oklch(26% 0.010 65);
  --foot-bg:     oklch(11.5% 0.007 65);
  --foot-surface:oklch(16% 0.008 65);
  --foot-fg:     oklch(95% 0.006 75);
  --foot-muted:  oklch(70% 0.012 70);
  --foot-border: oklch(24% 0.009 65);
  --foot-accent: var(--brand);
  --foot-edge:   oklch(24% 0.009 65);
}
/* 主题切换即时生效：分区背景走各自变量、无过渡，body 若单独过渡会出现"深底深字"闪烁 */

/* ── reset & base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; margin: 0; }
/* keep-all 让中文标题只在标点处断行，避免 balance 把词组切两半；
   break-word 作为兜底，防止超长无标点句子溢出容器。 */
h1, h2, h3, h4 {
  text-wrap: balance; margin: 0;
  word-break: keep-all; overflow-wrap: break-word;
}
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* 键盘用户跳过导航直达正文 */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 18px; border-radius: var(--radius);
  background: var(--accent); color: var(--bg); font-weight: 600; font-size: 14px;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; }

/* 通用内联小图标（跟随 currentColor） */
.ic {
  display: inline-block; width: 15px; height: 15px; flex: none;
  vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 背景三层 ─────────────────────────────────── */
.bg-layers { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 22%, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 22%, black 0%, transparent 78%);
  opacity: 0.3;
}
.bg-glow {
  display: none; /* 光晕职责已移入 .hero 自身背景带 */
  position: absolute; left: 50%; top: -14vh;
  width: min(1100px, 120vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  opacity: 0.55;
}
.bg-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--brand);
  opacity: var(--scan-op);
  animation: scan 18s linear infinite;
  will-change: transform;
}
/* 动 transform 不动 top：合成器线程完成，不触发每帧 layout */
@keyframes scan { from { transform: translateY(-2vh); } to { transform: translateY(102vh); } }

.page { position: relative; z-index: 1; }

/* ── 布局 ─────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8.5vw, var(--gap-2xl)); position: relative; }
.section + .section { border-top: 1px solid var(--border); }
/* 满幅色带节：打破均匀"翻页"节奏，纸面 → 色带 → 纸面交替 */
.section-band { background: var(--hero-bg); border-block: 1px solid var(--hero-edge); }
.section + .section-band, .section-band + .section { border-top: 0; }
/* 标题按 h2 字号定行宽（约 18 个汉字），正文另设更窄的可读行宽 */
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, var(--gap-xl)); }
.section-head .lead, .section-head > p { max-width: 560px; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap-md); }
.row { display: flex; align-items: center; gap: var(--gap-md); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-md); }
.grid-2-1 { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap-xl); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 1.55fr; gap: var(--gap-xl); align-items: start; }

/* ── 排版 ─────────────────────────────────────── */
.metric-num {
  font-family: var(--font-mono); font-size: var(--fs-metric);
  font-weight: 600; line-height: 0.94; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.metric-num .unit { font-size: 0.4em; letter-spacing: 0; margin-left: 3px; color: var(--muted); }
.metric-num.is-accent { color: var(--accent); }
.metric-label { color: var(--muted); font-size: var(--fs-dense); margin-top: var(--gap-xs); max-width: 26ch; }

.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: 1.14; letter-spacing: -0.022em; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 650; line-height: 1.22; letter-spacing: -0.018em; }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
h4 { font-size: 15px; font-weight: 600; line-height: 1.5; }

.lead { font-size: var(--fs-lead); line-height: 1.72; color: var(--muted); max-width: 56ch; }
.body-dense { font-size: var(--fs-dense); line-height: 1.62; color: var(--muted); }
/* 中文标签：短横线 + 字距，不再用全大写拉丁样式 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; flex: none; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.kicker { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.idx {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.06em; color: var(--muted);
  transition: transform 0.2s ease;
}
.fg { color: var(--fg); }
.mut { color: var(--muted); }

/* ── 导航 ─────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner { display: flex; align-items: center; gap: var(--gap-lg); padding-block: 13px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-logo { width: 30px; height: 27px; flex: none; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* ── 主题切换 ─────────────────────────────────── */
.theme-toggle {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--muted);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--accent-line); background: var(--fg-soft); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ico-moon { display: block; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: 14px; color: var(--muted);
  background: transparent; border: 0;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--fg); background: var(--fg-soft); }
.nav-link[aria-current="page"] { color: var(--fg); }
.nav-link[aria-current="page"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1px; background: var(--accent);
}
.caret { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.2s ease; }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 288px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: none;
}
.nav-drop[data-open="true"] { display: block; }
/* 桥接触发器与面板之间的 6px 空隙：指针经过时不脱离 li，下拉不会误关 */
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-drop a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); transition: background 0.16s ease; }
.drop-ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--accent); background: var(--accent-soft);
  margin-top: 2px;
}
.drop-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop-txt { display: block; min-width: 0; }
.nav-drop a:hover { background: var(--fg-soft-2); }
.nav-drop a[aria-current="page"] { background: var(--fg-soft); }
.nav-drop strong { display: block; font-size: 14px; font-weight: 600; color: var(--fg); }
.nav-drop span { display: block; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; margin-top: 2px; }

.topnav .nav-toggle { display: none; }
.nav-menu-cta { display: none; }
/* 进度条动 scaleX 不动 width：滚动高频回调里避免 layout */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}

/* ── 按钮 ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { background: var(--fg-soft); border-color: var(--accent-line); color: var(--fg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 12px; }
.btn-ghost:hover { background: var(--fg-soft); color: var(--fg); }
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: 13.5px; }
.arrow { transition: transform 0.2s ease; }
.btn:hover .arrow, .tlink:hover .arrow { transform: translateX(3px); }

.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid var(--accent-line); padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.tlink:hover { color: var(--accent-hi); border-color: var(--accent-hi); }

/* ── 卡片 / 面板 ──────────────────────────────── */
.card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.card-top {
  background: transparent; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; padding: 22px 0 0;
  position: relative; transition: border-color 0.2s ease;
}
.card-top::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: var(--accent); transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-hover:hover { border-color: var(--accent-line); background: var(--surface); }
.card-hover:hover .idx { transform: translateX(3px); }
.card-top.card-hover:hover { background: transparent; }
.card-top.card-hover:hover::before { width: 100%; }
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
/* 示例界面加"窗口壳"：让演示面板读作产品截图而非幻灯片表格 */
.win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.win-bar .win-title {
  margin-left: 8px; font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--muted); letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md);
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.panel-body { padding: 18px; }

/* ── 徽标 ─────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent-hi); /* 微字号需 ≥4.5:1，用加深档 */
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.tag {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: var(--fs-meta);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-risk { color: var(--danger-hi); background: color-mix(in oklch, var(--danger) 14%, transparent); }

/* ── 图标框 ───────────────────────────────────── */
.mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--accent); margin-bottom: var(--gap-md);
}
.mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── 密排清单 ─────────────────────────────────── */
.dense-list > li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; font-size: var(--fs-dense); line-height: 1.6; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.dense-list > li:last-child { border-bottom: 0; }
.dense-list .bullet { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); flex: none; }
.dense-list b { color: var(--fg); font-weight: 600; }

/* ── 表格 ─────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-dense); }
.ds-table caption { text-align: left; color: var(--muted); font-size: var(--fs-meta); padding-bottom: 10px; }
.ds-table th, .ds-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.ds-table thead th {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ds-table tbody tr { transition: background 0.16s ease; }
.ds-table tbody tr:hover { background: var(--fg-soft); }
.ds-table .col-key { color: var(--fg); font-weight: 600; white-space: nowrap; }
.ds-table .col-us { border-left: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--fg); }
.ds-table thead .col-us { border-top: 1px solid var(--accent-line); color: var(--accent); }
.ds-table tbody tr:last-child .col-us { border-bottom: 1px solid var(--accent-line); }
.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── 步骤 ─────────────────────────────────────── */
.step { display: grid; grid-template-columns: 52px 1fr; gap: var(--gap-md); padding: 20px 0; border-top: 1px solid var(--border); }
.step-num { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--accent-line); line-height: 1.1; }
.step h3 { margin-bottom: 5px; }

/* ── 首屏链路管线 ─────────────────────────────── */
.pipeline { position: relative; }
.pipeline svg { width: 100%; height: auto; overflow: visible; }
.pl-track { fill: none; stroke: var(--border); stroke-width: 1.5; }
.pl-return { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 4 5; }
.pl-flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
.pl-node circle { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; transition: stroke 0.3s ease, fill 0.3s ease; }
.pl-node text { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); letter-spacing: 0.04em; transition: fill 0.3s ease; }
.pl-node.is-on circle { stroke: var(--accent); fill: var(--accent-soft); }
.pl-node.is-on text { fill: var(--fg); }
.pl-head { fill: var(--accent); }
.pl-return-label { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); letter-spacing: 0.06em; }
.pl-caption {
  min-height: 46px; margin-top: 14px; padding: 10px 14px;
  border-left: 1px solid var(--accent-line); background: var(--fg-soft);
  font-size: var(--fs-dense); color: var(--muted);
}
.pl-caption b { color: var(--fg); font-weight: 600; }

.pl-list { display: none; }
.pl-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-dense); color: var(--muted); }
.pl-list li:last-child { border-bottom: 0; }
.pl-list b { display: block; color: var(--fg); font-size: 14.5px; }
.pl-list .n { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); letter-spacing: 0.06em; padding-top: 3px; }

/* ── 预测卡 ───────────────────────────────────── */
.forecast-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md); padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-dense); }
.forecast-row:last-child { border-bottom: 0; }
.forecast-row .k { color: var(--muted); }
.forecast-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; }

/* ── 图表 ─────────────────────────────────────── */
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .gridline { stroke: var(--border); stroke-width: 1; opacity: 0.5; }
.chart .area-1 { fill: var(--accent-soft); }
.chart .line-1 { fill: none; stroke: var(--series-1); stroke-width: 2.2; stroke-linejoin: round; }
.chart .line-2 { fill: none; stroke: var(--series-2); stroke-width: 1.8; stroke-dasharray: 5 4; }
.chart .dot-1 circle { fill: var(--series-1); }
.chart .bar { fill: var(--series-3); }
.chart .bar-hi { fill: var(--accent); }
.chart .tick { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: var(--gap-md); margin-top: 14px; font-size: var(--fs-meta); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ── 诊断器 ───────────────────────────────────── */
.diag-q { padding: 18px 0; border-top: 1px solid var(--border); }
.diag-q:first-child { border-top: 0; padding-top: 0; }
.diag-q > p { font-size: var(--fs-dense); color: var(--muted); margin-bottom: 11px; }
.diag-opts { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.diag-opt {
  min-height: 44px; padding: 9px 15px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.diag-opt:hover { background: var(--fg-soft); border-color: var(--accent-line); }
.diag-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.diag-out { margin-top: var(--gap-md); }
.rec-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; transition: border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
  opacity: 0.44;
}
.rec-card.is-rec { opacity: 1; border-color: var(--accent-line); background: var(--accent-soft); }
.rec-card h4 { font-size: var(--fs-h3); font-family: var(--font-display); margin-bottom: 4px; }
.rec-card .why { font-size: var(--fs-dense); color: var(--muted); margin-top: 9px; }
.rec-rank { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rec-card.is-rec .rec-rank { color: var(--accent); }

/* ── AI 找房 demo ─────────────────────────────── */
.chat-input { display: flex; gap: var(--gap-xs); align-items: stretch; }
.chat-input .fake-field {
  flex: 1; min-height: 44px; display: flex; align-items: center;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--muted); font-size: 14px;
}
.chat-input .fake-field .caret-blink { width: 1px; height: 17px; background: var(--accent); margin-left: 2px; animation: blink 1.05s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.listing { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: var(--gap-md); }
.listing-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--gap-md); align-items: center;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); opacity: 0; transform: translateY(8px);
  transition: opacity 0.34s ease, transform 0.34s ease, border-color 0.2s ease;
}
.listing-row.is-in { opacity: 1; transform: none; }
.listing-row:hover { border-color: var(--accent-line); }
.listing-row h4 { font-size: 15px; }
.listing-row .facts { font-size: var(--fs-meta); color: var(--muted); font-family: var(--font-mono); margin-top: 3px; }
.listing-row .price { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.skeleton { height: 62px; border-radius: var(--radius); background: var(--fg-soft); animation: pulse 1.15s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ── 字标网格（合作品牌 / 城市） ─────────────── */
.wordmark {
  display: grid; place-items: center; min-height: 74px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--fs-dense); letter-spacing: 0.06em;
  color: var(--muted); text-align: center; padding: 12px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wordmark:hover { color: var(--fg); border-color: var(--accent-line); background: var(--fg-soft); }
.wordmark small { display: block; font-size: var(--fs-micro); letter-spacing: 0.1em; opacity: 0.8; margin-top: 3px; }




/* 母题绑定类。url() 必须声明在本文件内：写进 HTML 内联 --motif 时，
   浏览器对 custom property 里相对 url 的基址处理不一致（Chrome 按
   样式表基址解析，会得到 assets/assets/…）。 */
.m-isochrone { --motif: url(img/motif-isochrone.svg); }
.m-feed      { --motif: url(img/motif-feed.svg); }
.m-funnel    { --motif: url(img/motif-funnel.svg); }
.m-match     { --motif: url(img/motif-match.svg); }
.m-lattice   { --motif: url(img/motif-lattice.svg); }
.m-network   { --motif: url(img/motif-network.svg); }

/* ── 页面母题图形 ─────────────────────────────────
   每页一个从产品逻辑生成的图形（通勤等时圈 / 内容流 /
   预约漏斗 / 语义匹配 / 权重格栅 / 城市网络），不是配图，
   是把产品实际在算的东西画出来。

   用 mask-image 而非 background-image：SVG 经 background 加载时
   是独立文档，currentColor 不继承、拿不到主题色；做成蒙版后由
   background 上色，深浅主题自动跟随。 */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 1; }
.hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -6%; top: 50%; translate: 0 -50%;
  width: min(760px, 62vw); aspect-ratio: 1;
  background: var(--accent);
  opacity: 0.16;
  -webkit-mask: var(--motif) no-repeat right center / contain;
  mask: var(--motif) no-repeat right center / contain;
}
html[data-theme="dark"] .hero::after { opacity: 0.22; }
/* 已有右侧概念图的页面：母题退到背景更远处，避免与之打架 */
.hero:has(.hero-art)::after { opacity: 0.09; width: min(900px, 78vw); right: -18%; }
html[data-theme="dark"] .hero:has(.hero-art)::after { opacity: 0.13; }
@media (max-width: 860px) {
  .hero::after,
  .hero:has(.hero-art)::after { width: 128vw; right: -34%; opacity: 0.07; }
  html[data-theme="dark"] .hero::after,
  html[data-theme="dark"] .hero:has(.hero-art)::after { opacity: 0.11; }
}

/* 色带节的母题水印：把同一图形语言带进正文分区 */
.section-band { position: relative; overflow: hidden; }
.section-band > .container { position: relative; z-index: 1; }
/* 用 ::after 而非 ::before：.photo::before 是照片遮罩，两者会落在同一个
   伪元素上。危险的不是"谁赢"，而是**属性级串味**——赢者只覆盖自己声明的
   属性，本规则的 width / opacity / mask 会残留到对方身上，表现为遮罩被压成
   10% 不透明度并裁成母题形状，即"整层静默失效"。同一分区不要让两个类争
   同一个伪元素。 */
.band-motif::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: -8%; bottom: -22%;
  width: min(560px, 52vw); aspect-ratio: 1;
  background: var(--accent); opacity: 0.10;
  -webkit-mask: var(--motif) no-repeat left bottom / contain;
  mask: var(--motif) no-repeat left bottom / contain;
}
html[data-theme="dark"] .band-motif::after { opacity: 0.14; }
@media (max-width: 860px) { .band-motif::after { display: none; } }

/* 纸面颗粒：暖白大色块的"纸纹"，消除塑料感。
   SVG feTurbulence 内联，约 300 字节，无额外请求。 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.32; }
@media (prefers-reduced-motion: reduce) { body::before { opacity: 0.34; } }


/* ── 实景照片层 ───────────────────────────────────
   照片一律预处理成暖灰单色（见 docs/），品牌琥珀由
   background-blend-mode 在此叠加：一套图适配深浅两主题，
   强度按场景调，不必为每个主题各存一份。

   用法边界：照片只承担氛围与纵深，绝不作为"我方房源"呈现——
   关于我们页明示「不编造房源与事实」，配图不能与之矛盾。 */
.photo {
  position: relative; isolation: isolate;
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: var(--ph-pos, center);
  background-size: cover;
  background-blend-mode: luminosity;
}
.photo > .container { position: relative; z-index: 2; }
/* 遮罩：保证文字对比度，同时让照片向版面边缘自然消隐 */
.photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--ph-scrim);
}

/* A. 收尾 CTA：照片自身左侧是大片天空，文字就放左侧，
      右侧让建筑露出来——顺着这张图的构图排版，而不是硬压一层暗色。 */
.photo-cta {
  --ph-pos: right center;
  --ph-scrim: linear-gradient(100deg,
      var(--bg) 0%, var(--bg) 30%,
      color-mix(in oklch, var(--bg) 82%, transparent) 48%,
      color-mix(in oklch, var(--bg) 42%, transparent) 68%,
      color-mix(in oklch, var(--bg) 22%, transparent) 100%);
  border-block: 1px solid var(--border);
}
html[data-theme="dark"] .photo-cta { background-blend-mode: luminosity; }

/* B. 分区背景：这一档下面压着正文、logo 墙和时间线，照片必须退到只提供
      纵深。遮罩强度是算出来的，不是调出来的：--accent 在纸面上只有 4.53:1
      （AA 底线、零余量），照片透出 22% 时实测 accent 掉到 3.07、muted 3.78，
      两项都不达 AA。90% 起、12% 处收到 95.5% 后基本走平，实测背景亮度
      Lmin≈0.834，配下面的 .photo .eyebrow 加深档可保 fg 13.5 / muted 5.1 /
      eyebrow 5.8，同时照片仍有 Δ0.06 的明暗起伏可见。 */
.photo-band {
  --ph-scrim: linear-gradient(180deg,
      color-mix(in oklch, var(--bg) 90%, transparent) 0%,
      color-mix(in oklch, var(--bg) 95.5%, transparent) 12%,
      color-mix(in oklch, var(--bg) 96%, transparent) 70%,
      var(--bg) 100%);
}
/* 照片降低了背景亮度，微字号的强调色必须换加深档才守得住 4.5:1 */
.photo .eyebrow, .photo .kicker { color: var(--accent-hi); }
/* 深色档可以放开一档：合成在 gamma 空间做，近黑纸面上同样比例的照片
   折算成线性亮度要小得多（同一档遮罩实测 muted 6.29 vs 浅色 5.05）。
   余量拿来换照片的可见度，实测 muted 5.38 / eyebrow 8.02，明暗幅度 ×3。 */
html[data-theme="dark"] .photo-band {
  --ph-scrim: linear-gradient(180deg,
      color-mix(in oklch, var(--bg) 80%, transparent) 0%,
      color-mix(in oklch, var(--bg) 88%, transparent) 12%,
      color-mix(in oklch, var(--bg) 90%, transparent) 70%,
      var(--bg) 100%);
}

/* C. 图文并置：前景配图。这一档是**内容图**不是装饰，故用真实 <img>：
      有 alt、能被图片索引、响应式交给 srcset 按实际版面宽度选档，
      比 CSS media query 猜视口宽度准。 */
.photo-figure {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3; background: var(--surface-2);
}
.photo-figure > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* 文案居中压在图上：底衬一条与文字等高的半透明横幅，
   照片本身明暗不可控，靠这条底板保证任何画面下都读得清。 */
.photo-figure figcaption {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 2;
  display: grid; place-items: center;
  padding: 18px clamp(16px, 4vw, 40px);
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  backdrop-filter: blur(3px) saturate(0.9);
  border-block: 1px solid color-mix(in oklch, var(--fg) 10%, transparent);
  color: var(--fg);
  font-family: var(--font-display); font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 600; line-height: 1.5; letter-spacing: 0.01em;
  text-align: center; text-wrap: balance;
}
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .photo-figure figcaption { background: color-mix(in oklch, var(--bg) 90%, transparent); }
}
@media (max-width: 560px) { .photo-figure figcaption { padding: 14px 16px; } }
@media (max-width: 860px) {
  .photo-cta { --ph-pos: 72% center;
    --ph-scrim: linear-gradient(180deg, var(--bg) 0%,
      color-mix(in oklch, var(--bg) 86%, transparent) 62%,
      color-mix(in oklch, var(--bg) 58%, transparent) 100%); }
  .photo-figure { aspect-ratio: 16 / 10; }
}

/* 照片源（相对 site.css 解析，理由同母题类） */
.ph-building { background-image: image-set(url(img/ph-building-1568.webp) 1x); }
.ph-towers   { background-image: image-set(url(img/ph-towers-750.webp) 1x); }
@media (max-width: 900px) {
  .ph-building { background-image: url(img/ph-building-880.webp); }
}


/* 首屏照片背景层。
   用独立子元素而非伪元素：.hero::before 已被网格纹占用、::after 已被母题占用，
   同特异性下后写的规则会互相覆盖（实测照片层被网格纹吃掉）。 */
.hero-ph {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hero-ph);
  background-size: cover; background-position: center right;
  background-repeat: no-repeat;
  /* 压到 0.12 并加轻微模糊：右侧概念图与照片重叠，
     不虚化会互相争夺注意力。模糊让它退到景深之外，只留纵深。 */
  opacity: 0.12;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(95deg, transparent 6%, black 48%, black 78%, color-mix(in oklch, black 55%, transparent) 100%);
  mask-image: linear-gradient(95deg, transparent 6%, black 48%, black 78%, color-mix(in oklch, black 55%, transparent) 100%);
}
html[data-theme="dark"] .hero-ph { opacity: 0.22; }
@media (max-width: 860px) {
  .hero-ph { opacity: 0.09;
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, black 64%);
    mask-image: linear-gradient(180deg, transparent 10%, black 64%); }
  html[data-theme="dark"] .hero-ph { opacity: 0.17; }
}
.ph-hero-ai { --hero-ph: url(img/ph-ai-1568.webp); }
@media (max-width: 900px) { .ph-hero-ai { --hero-ph: url(img/ph-ai-880.webp); } }

/* ── logo 墙：城市 / 合作品牌 ─────────────────────
   紧凑自适应网格。窄屏靠 auto-fill 自然排 3 列，
   不再退化成一项一行（12 个品牌原本占 1020px）。 */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); /* auto-fit：空轨道折叠，9 项不会在末尾留空格 */
  gap: 8px;
}
.logo-wall .wordmark { min-height: 64px; padding: 10px 8px; }
/* 九城是一个清单，用 ul/li 让机器也读得出来；列表默认样式在这里清掉 */
.city-wall { list-style: none; margin: 0; padding: 0; }
/* <address> 是块级且 UA 默认斜体，页脚那一行是图标 + 地址的行内排版，
   两项都要压掉，否则地址会掉到图标下一行并变成斜体 */
.pagefoot address { display: inline; font-style: normal; }
@media (max-width: 560px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .logo-wall .wordmark { min-height: 56px; padding: 8px 4px; font-size: var(--fs-meta); }
  .logo-wall .wordmark small { font-size: 10px; letter-spacing: 0.04em; margin-top: 2px; }
}


/* 合作品牌 logo：统一墨色呈现。
   各品牌原色跨navy/橙/棕/蓝，直接铺开会花；实测这批 logo 内部结构
   全靠透明通道（无不透明白像素），故 brightness(0) 压成单色不会糊成块。
   浅色主题压成墨色、深色主题翻成浅色，一套文件适配两主题。 */
.logo-wall .brand-logo-cell {
  display: grid; place-items: center;
  min-height: 76px; padding: 14px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.logo-wall .brand-logo-cell img {
  width: auto; max-width: 100%; max-height: 30px;
  object-fit: contain;
  filter: brightness(0) opacity(0.58);
  transition: filter 0.2s ease;
}
.logo-wall .brand-logo-cell:hover { border-color: var(--accent-line); background: var(--fg-soft); }
.logo-wall .brand-logo-cell:hover img { filter: brightness(0) opacity(0.9); }
html[data-theme="dark"] .logo-wall .brand-logo-cell img { filter: brightness(0) invert(1) opacity(0.66); }
html[data-theme="dark"] .logo-wall .brand-logo-cell:hover img { filter: brightness(0) invert(1) opacity(1); }
@media (max-width: 560px) {
  .logo-wall .brand-logo-cell { min-height: 62px; padding: 10px 8px; }
  .logo-wall .brand-logo-cell img { max-height: 24px; }
}


/* 品牌墙独占通栏：11 项按 6/4/3 列分档，末行不至于只剩一两个。
   列宽变大后 logo 可放到 36px，base 佰舍 / 有巢 一类带副标的才读得清。 */
.logo-wall-brands { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.logo-wall-brands .brand-logo-cell { min-height: 88px; }
.logo-wall-brands .brand-logo-cell img { max-height: 36px; }
/* 竖版组合标（图形 + 名称 + 副标上下叠放）不能按横版的限高走：
   按 36px 限高只剩 31px 宽，字读不出来。改限高 56px，
   单元格内容盒高 60px（88 − 上下各 14 padding）刚好装得下，单元格不被顶高。
   视觉重量与横版接近：竖版 48×56 vs 横版 103×36。 */
.logo-wall-brands .brand-logo-cell img.is-tall { max-height: 56px; }
@media (max-width: 1080px) { .logo-wall-brands { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  {
  .logo-wall-brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .logo-wall-brands .brand-logo-cell { min-height: 70px; padding: 10px 8px; }
  .logo-wall-brands .brand-logo-cell img { max-height: 28px; }
  .logo-wall-brands .brand-logo-cell img.is-tall { max-height: 46px; }
}

/* ── 时间线 ───────────────────────────────────── */
.timeline { border-left: 1px solid var(--border); padding-left: var(--gap-md); }
.timeline li { position: relative; padding: 0 0 22px 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: calc(-1 * var(--gap-md) - 4px); top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--muted);
}
.timeline li.is-key::before { background: var(--accent); border-color: var(--accent); }
.timeline time { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.07em; color: var(--accent); display: block; }
.timeline p { font-size: var(--fs-dense); color: var(--muted); margin-top: 2px; }
.timeline strong { color: var(--fg); font-size: 14.5px; font-weight: 600; }

/* ── FAQ ──────────────────────────────────────── */
.faq-item { border-top: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-md);
  padding: 17px 0; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: var(--fg);
  transition: color 0.18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-mono); font-size: 17px; color: var(--accent); flex: none; }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--accent); }
.faq-item p { font-size: var(--fs-dense); color: var(--muted); padding-bottom: 18px; max-width: 76ch; }

/* ── 表单 ─────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-meta); color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.input, .textarea, .select {
  width: 100%; min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  /* 16px 起：iOS Safari 对 <16px 的输入框会聚焦自动放大 */
  background: var(--bg); color: var(--fg); font: inherit; font-size: 16px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
.input::placeholder, .textarea::placeholder { color: color-mix(in oklch, var(--muted) 78%, var(--bg)); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--accent-line); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.form-note { font-size: var(--fs-meta); color: var(--muted); }
.form-ok { font-size: var(--fs-dense); color: var(--accent); }

/* ── 面包屑 ───────────────────────────────────── */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.crumb a:hover { color: var(--fg); }
.crumb .sep { opacity: 0.5; }

/* ── 页脚 ─────────────────────────────────────── */
/* 页脚 = 全站最深的墨块。在作用域内改写通用 token，后代文字与边框自动跟随 */
.pagefoot {
  --bg: var(--foot-bg);
  --surface: var(--foot-surface);
  --surface-2: var(--foot-surface);
  --fg: var(--foot-fg);
  --muted: var(--foot-muted);
  --border: var(--foot-border);
  --accent: var(--foot-accent);
  --accent-soft: color-mix(in oklch, var(--foot-accent) 16%, transparent);
  --accent-line: color-mix(in oklch, var(--foot-accent) 46%, transparent);
  --fg-soft:   color-mix(in oklch, var(--foot-fg) 8%, transparent);
  --fg-soft-2: color-mix(in oklch, var(--foot-fg) 13%, transparent);
  background: var(--foot-bg);
  color: var(--foot-fg);
  border-top: 1px solid var(--foot-edge);
  padding-block: var(--gap-xl) var(--gap-lg);
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap-lg); }
.foot-grid h4 { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 13px; font-weight: 500; }
.foot-grid li { padding: 5px 0; font-size: var(--fs-dense); }
.foot-grid li a { color: var(--muted); transition: color 0.18s ease; }
.foot-grid li a:hover { color: var(--fg); }
.foot-legal { margin-top: var(--gap-xl); padding-top: var(--gap-md); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--gap-md); justify-content: space-between; font-size: var(--fs-meta); color: var(--muted); }
.qr-slot {
  width: 96px; height: 96px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: oklch(100% 0 0);
}
.qr-slot img { width: 100%; height: 100%; object-fit: contain; }

/* ── 首屏：一个主张 + 一张概念图 ──────────────── */
/* hero 自成一带：与正文纸面拉开一档色调 —— 浅色偏暖下沉、深色抬升 */
.hero {
  padding-block: clamp(52px, 7vw, 104px) clamp(56px, 8vw, 108px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 84% at 72% 8%, var(--accent-soft) 0%, transparent 64%),
    var(--hero-bg);
  border-bottom: 1px solid var(--hero-edge);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 86% 76% at 50% 28%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 86% 76% at 50% 28%, black 0%, transparent 80%);
  opacity: 0.6;
}
.hero > .container { position: relative; z-index: 1; }
/* 文案列加宽到 1.18fr：右列的概念图本来就被 .art 的 max-width:460px 封顶，
   0.96fr 在 1440 下给到 530px，有 70px 是白给的。挪过来几乎零代价。 */
.hero-inner { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.hero-inner:not(:has(.hero-art)) { grid-template-columns: 1fr; }
/* 原来这里是 max-width: 32em，但 em 按正文字号算（32×15.5=496px），
   于是主标题宽度被钉死在 496px 且完全不随视口变。正文的可读行宽由
   .hero-sub 自己的 max-width 管，标题不该跟着受限。 */
.hero-copy > * { max-width: 100%; }
/* 字号封顶 64px：--fs-display 是 4.6vw，字号跟视口涨，但容器 1240px 就封顶了，
   所以屏幕越宽越必然溢出——这是"总是多一个字换行"的根因，不是行宽不够。
   64px 是算出来的：容器封顶时文案列 649px，最长一行 10 个汉字需 10em ≤ 649。 */
.hero h1 { font-size: min(var(--fs-display), 64px); }
.hero-sub {
  font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.78;
  color: var(--muted); margin-top: 22px; max-width: 25em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: 36px; }
/* 三项事实同基线：容器本身必须 baseline 对齐。若留 stretch，每个 span 各自
   计算内部基线组，含大号数字的那组基线更深，整组视觉下移（实测 6px 错位）。 */
.hero-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 36px; font-size: var(--fs-dense); color: var(--muted); }
.hero-foot span { display: inline-flex; align-items: baseline; gap: 8px; }
.hero-foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); }
.hero-foot b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; color: var(--fg); }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.03em;
}
.status-pill .dot { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.65); } }

/* ── 概念图通用语汇 ───────────────────────────── */
.hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.art { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.art [class^="a-"], .art [class*=" a-"] { transition: fill 0.3s ease, stroke 0.3s ease; }
.art .a-ring    { fill: none; stroke: var(--border); stroke-width: 1.4; }
.art .a-dash    { fill: none; stroke: var(--accent-line); stroke-width: 1.4; stroke-dasharray: 3 8; stroke-linecap: round; }
.art .a-line    { fill: none; stroke: var(--border); stroke-width: 1.4; }
.art .a-flow    { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.art .a-node    { fill: var(--surface); stroke: var(--border); stroke-width: 1.4; }
.art .a-node-on { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; }
.art .a-dot     { fill: var(--accent); }
.art .a-mute    { fill: var(--muted); opacity: 0.32; }
.art .a-fill    { fill: var(--fg-soft-2); }
.art .a-core    { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1.4; }
.art .a-txt     { font-size: 11px; fill: var(--muted); letter-spacing: 0.04em; }
.art .a-txt-hi  { font-size: 12.5px; fill: var(--fg); font-weight: 600; letter-spacing: 0.02em; }

.art .spin, .art .spin-rev, .art .orbit, .art .breathe, .art .drift { transform-box: view-box; transform-origin: center; }
.art .spin     { animation: art-spin 34s linear infinite; }
.art .spin-rev { animation: art-spin 26s linear infinite reverse; }
.art .orbit    { animation: art-spin 13s linear infinite; }
@keyframes art-spin { to { transform: rotate(360deg); } }
.art .breathe  { animation: art-breathe 4.4s ease-in-out infinite; }
@keyframes art-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.art .drift    { animation: art-drift 6.5s ease-in-out infinite; }
.art .blink    { animation: blink 1.05s step-end infinite; }
.art .a-stream { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 9 13; animation: art-dash 1.5s linear infinite; }
@keyframes art-dash { to { stroke-dashoffset: -22; } }
@keyframes art-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 顺序点亮：给子元素排 delay，形成流动感 */
.art .a-seq > * { animation: art-seq 6.3s ease-in-out infinite; opacity: 0.28; }
.art .a-seq > *:nth-child(1) { animation-delay: 0s; }
.art .a-seq > *:nth-child(2) { animation-delay: 0.42s; }
.art .a-seq > *:nth-child(3) { animation-delay: 0.84s; }
.art .a-seq > *:nth-child(4) { animation-delay: 1.26s; }
.art .a-seq > *:nth-child(5) { animation-delay: 1.68s; }
.art .a-seq > *:nth-child(6) { animation-delay: 2.1s; }
.art .a-seq > *:nth-child(7) { animation-delay: 2.52s; }
.art .a-seq > *:nth-child(8) { animation-delay: 2.94s; }
@keyframes art-seq { 0%, 62%, 100% { opacity: 0.28; } 9%, 44% { opacity: 1; } }


/* 流程中"归你做"的那一步：本页论点所在，给视觉重音 */
.step.is-yours { background: var(--accent-soft); border-radius: var(--radius); padding: 12px 14px; margin-block: 4px; }
.step.is-yours .step-num { color: var(--accent-hi); }

/* ── 图标化模块 ───────────────────────────────────
   替代"编号 + 纯文案罗列"：图标承担识别，编号退居辅助。 */
.ico-box {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.ico-box svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* 图标 + 标题 + 说明的横向条目，取代 .step 的纯数字列 */
.feat {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: start; padding: 16px 0;
  border-top: 1px solid var(--border);
}
.feat:first-child { border-top: 0; padding-top: 0; }
.feat h3 { font-size: var(--fs-h3); }
.feat p { margin-top: 4px; }
.feat .feat-n {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--accent); letter-spacing: 0.08em; display: block; margin-bottom: 2px;
}
@media (max-width: 560px) {
  .feat { gap: 12px; padding: 14px 0; }
  .ico-box { width: 34px; height: 34px; border-radius: 8px; }
  .ico-box svg { width: 16px; height: 16px; }
}

/* ── 进场动画 ───────────────────────────────────
   只在 html.js（head 内联脚本标记）下隐藏初始态：
   JS 失败 / 被禁时内容默认可见，不留永久空白。 */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.62s cubic-bezier(0.22,1,0.36,1), transform 0.62s cubic-bezier(0.22,1,0.36,1); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ── 响应式 ───────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --gutter: 24px; }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--gap-xl); }
  .hero-art { min-height: 0; }
  .art { max-width: 380px; }
  /* 管线 SVG 缩到 ≤1080 时节点文字实测 <8px，整段换密排清单（原断点 860 漏掉了 861–1080 区间） */
  .pl-svg, .pl-caption, .pl-ctrl { display: none; }
  .pl-list { display: block; }
}
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gutter) 18px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    display: none;
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-link { justify-content: space-between; width: 100%; }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-drop { position: static; min-width: 0; box-shadow: none; margin-top: 4px; background: var(--surface-2); }
  .nav-drop::before { display: none; }  /* 静态排布时无空隙，桥接层会挡住触发器 */
  .topnav .nav-toggle { display: inline-flex; }
  .topnav .nav-cta { display: none; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .ds-table { min-width: 560px; }
  /* 关键列（公寓U选）钉在滚动容器右缘：横滑时其余列从它下方经过，
     卖点列不再被裁出屏外。背景必须不透明，否则下层文字透出。 */
  .table-scroll .ds-table th.col-us,
  .table-scroll .ds-table td.col-us {
    position: sticky; right: 0;
    background: color-mix(in oklch, var(--brand) 13%, var(--surface));
    box-shadow: -10px 0 14px -10px oklch(30% 0.03 60 / 0.45);
  }
  .step { grid-template-columns: 1fr; gap: var(--gap-xs); }
  .listing-row { grid-template-columns: 1fr; align-items: start; }
  .nav-menu-cta { display: block; margin-top: 10px; }
  .nav-menu-cta .btn { width: 100%; }
}
/* SVG 文字随 viewBox 等比缩小，窄屏下按缩放比例反向放大字号保可读 */
@media (max-width: 700px) {
  .chart .tick { font-size: 14px; }
  .art .a-txt { font-size: 15px; }
  .art .a-txt-hi { font-size: 17px; }
}
@media (max-width: 560px) {
  .grid-4, .grid-5 { grid-template-columns: 1fr; }
  /* 品牌块通栏，三个链接组两列并排：单列时右半屏全空且页脚拉到 900px+ */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--gap-md) var(--gap-lg); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  /* 联系组通栏：地址是长句，挤在半列里会断成「虹桥国 / 际展汇」 */
  .foot-grid > :last-child { grid-column: 1 / -1; }
  .foot-grid > :last-child ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap-lg); }
  .foot-grid > :last-child li:last-child { grid-column: 1 / -1; }
  .foot-legal { margin-top: var(--gap-lg); gap: 6px; flex-direction: column; }
  .brand-sub { display: none; }
}
@media (max-width: 480px) {
  .chart .tick { font-size: 20px; }
}

/* 触屏设备：交互目标补足到 ~44px（桌面精密指针维持紧凑视觉） */
@media (pointer: coarse) {
  .theme-toggle { width: 44px; height: 44px; }
  .btn-sm { min-height: 44px; }
  .tlink { padding-block: 8px; }
  .nav-drop a { padding-block: 13px; }
  .foot-grid li { padding: 2px 0; }
  .foot-grid li a { display: inline-block; padding-block: 9px; }
  .crumb a { display: inline-block; padding-block: 10px; }
}

/* 表格横滑提示（JS 检测到可滚动时插入） */
.scroll-hint {
  display: none;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 8px;
}
@media (max-width: 860px) {
  .scroll-hint { display: flex; align-items: center; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .listing-row { opacity: 1; transform: none; }
  .bg-scan { display: none; }
  .art .a-seq > * { opacity: 1; }
}