/* ==========================================================================
   Components — 构成、组件与状态
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 红线 / 阅读进度（签名元素）
   -------------------------------------------------------------------------- */
.thread {
  position: fixed; left: max(14px, calc(50vw - var(--page-max) / 2 - 30px)); top: 50%;
  transform: translateY(-50%); z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.thread__rail { width: 1px; height: 34vh; background: var(--line-strong); position: relative; }
.thread__fill {
  position: absolute; inset: 0 0 auto 0; height: 0%;
  background: var(--accent); transition: height 120ms linear;
}
.thread__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--color-muted); writing-mode: vertical-rl;
}
@media (max-width: 1360px) { .thread { display: none; } }

/* --------------------------------------------------------------------------
   1. 报头 / 导航
   -------------------------------------------------------------------------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--masthead-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--ink-800) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.masthead.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--ink-900) 92%, transparent); }
.masthead__inner { display: flex; align-items: center; gap: var(--space-5); width: 100%; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__text { font-family: var(--font-display); font-size: var(--fs-500); letter-spacing: -0.02em; line-height: 1; }
.brand__text small {
  display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.24em; color: var(--accent); margin-top: 3px; text-transform: uppercase;
}

.nav { display: flex; gap: var(--space-1); margin-left: auto; }
.nav a {
  position: relative; padding: 10px 12px; min-height: 44px;
  display: inline-flex; align-items: center;
  font-size: var(--fs-300); letter-spacing: 0.02em; text-decoration: none;
  color: var(--paper-dim); border-radius: var(--radius-sm);
  transition: color var(--dur-fast) ease-out;
}
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav a:hover { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

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

/* 语言切换 */
.lang { position: relative; }
.lang__button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  background: transparent; border: 1px solid var(--line); color: var(--paper-dim);
  border-radius: var(--radius-pill); cursor: pointer;
  font-size: var(--fs-300); letter-spacing: 0.06em;
  transition: border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.lang__button:hover { border-color: var(--line-strong); color: var(--paper); }
.lang__button svg { width: 13px; height: 13px; transition: transform var(--dur-base) var(--ease-out); }
.lang[data-open="true"] .lang__button svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: min(210px, 78vw);
  background: var(--ink-600); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); padding: 6px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) ease-out, transform var(--dur-base) var(--ease-out), visibility var(--dur-fast);
}
.lang[data-open="true"] .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px; padding: 8px 12px; background: none; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; color: var(--paper-dim); font-size: var(--fs-400);
}
.lang__menu button:hover { background: var(--ink-500); color: var(--paper); }
.lang__menu button[aria-checked="true"] { color: var(--paper); }
.lang__menu button[aria-checked="true"]::after { content: "●"; color: var(--accent); font-size: 9px; }
.lang__code { font-family: var(--font-mono); font-size: 10px; color: var(--color-muted); letter-spacing: 0.1em; }

/* 移动端导航开关 */
.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   2. 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: var(--fs-400); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) ease-out, background var(--dur-base) ease-out,
              border-color var(--dur-base) ease-out, color var(--dur-base) ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { border-color: var(--line-strong); color: var(--paper); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: var(--fs-300); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   3. 首屏（非对称 + 破格溢出）
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: clip; padding-top: calc(var(--masthead-h) + clamp(28px, 6vh, 64px)); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-6); align-items: center;
}
.hero__title {
  font-size: var(--fs-display);
  margin: var(--space-4) 0 var(--space-5);
  margin-left: calc(var(--page-pad) * -0.34);   /* 破格：标题向左冲出栅格 */
  max-width: 15ch;
}
.hero__title em {
  font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--accent);
}
.hero__sub { font-size: var(--fs-500); color: var(--paper-dim); max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.hero__figure { position: relative; margin: 0; margin-right: calc(var(--page-pad) * -0.72); }
.hero__figure img {
  width: 100%; height: clamp(320px, 60vh, 640px); object-fit: cover;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  filter: saturate(0.68) contrast(0.99) brightness(1.04);
}
.hero__figure figcaption {
  position: absolute; right: 0; bottom: -1px;
  background: var(--ink-900); color: var(--color-muted);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  padding: 8px 14px; border-radius: var(--radius-sm) 0 0 0;
}
.hero__frame {
  position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  pointer-events: none;
}

/* 首屏数据条 */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); margin-top: clamp(40px, 7vh, 76px);
}
.stats__item { padding: var(--space-5) var(--space-4) var(--space-4) 0; border-right: 1px solid var(--line); }
.stats__item:last-child { border-right: 0; }
.stats__value {
  font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, var(--fs-800)); line-height: 1;
  letter-spacing: -0.03em;
}
.stats__value sup { font-size: 0.42em; color: var(--accent); top: -0.9em; }
.stats__label { font-size: var(--fs-300); color: var(--color-muted); margin-top: 10px; letter-spacing: 0.02em; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero__title { margin-left: 0; }
  .hero__figure { margin-right: 0; }
  .hero__figure img { border-radius: var(--radius-lg); height: clamp(260px, 42vh, 420px); }
  .hero__frame { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(2) { border-right: 0; }
  .stats__item:nth-child(1), .stats__item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   4. 跑马灯（倾斜带）
   -------------------------------------------------------------------------- */
.marquee {
  --marquee-dur: 42s;
  position: relative; z-index: 3;
  margin: clamp(48px, 8vh, 84px) 0;
  padding: 15px 0;
  background: var(--accent); color: var(--on-accent);
  transform: rotate(-1.4deg) scale(1.03);
  overflow: hidden; border-block: 1px solid var(--accent-deep);
}
.marquee__track { display: flex; gap: var(--space-5); width: max-content; animation: marquee var(--marquee-dur) linear infinite; }
.marquee__track span {
  font-family: var(--font-display); font-size: clamp(1.15rem, 3.2vw, var(--fs-600)); font-weight: 600;
  letter-spacing: -0.01em; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-5);
}
.marquee__track span::after { content: "◆"; font-size: 0.5em; opacity: 0.62; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   5. 机会 / 特性卡
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--dur-base) ease-out, transform var(--dur-base) var(--ease-out);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::before { transform: scaleY(1); }
.card__no { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--accent); letter-spacing: 0.1em; }
.card h3 { font-size: var(--fs-600); margin: var(--space-3) 0 var(--space-3); }
.card p { color: var(--color-muted); font-size: var(--fs-300); }

/* --------------------------------------------------------------------------
   6. 沉浸式城市展厅（编辑式非对称栅格）
   -------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.place {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--ink-700); grid-column: span 12;
}
.place:nth-child(1) { grid-column: span 7; }
.place:nth-child(2) { grid-column: span 5; }
.place:nth-child(3) { grid-column: span 5; }
.place:nth-child(4) { grid-column: span 7; }
.place:nth-child(5) { grid-column: span 12; }
.place img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  filter: saturate(0.9) contrast(1.03);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) ease-out;
}
.place:nth-child(2) img, .place:nth-child(3) img { aspect-ratio: 4 / 5; }
.place:nth-child(5) img { aspect-ratio: 21 / 9; }
.place:hover img { transform: scale(1.045); filter: saturate(1.02) contrast(1.06); }
.place__body {
  position: absolute; inset: auto 0 0 0; padding: var(--space-5);
  background: linear-gradient(to top, rgba(12, 10, 8, 0.95) 4%, rgba(12, 10, 8, 0.62) 52%, transparent 100%);
}
.place__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.place__body h3 { font-size: var(--fs-600); margin: var(--space-2) 0 var(--space-2); }
.place__body p { color: var(--paper-dim); font-size: var(--fs-300); max-width: 46ch; }
.place__plus {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  background: color-mix(in srgb, var(--ink-900) 46%, transparent); backdrop-filter: blur(6px);
  transition: background var(--dur-base) ease-out, border-color var(--dur-base) ease-out;
}
.place:hover .place__plus { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 900px) {
  .place, .place:nth-child(n) { grid-column: span 12; }
  .place:nth-child(n) img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   7. 行前指南（工具箱）
   -------------------------------------------------------------------------- */
.kit { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 940px) { .kit { grid-template-columns: 1fr; } }

.panel {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.panel__no { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--accent); letter-spacing: 0.12em; }
.panel h3 { font-size: var(--fs-600); }
.panel__desc { color: var(--color-muted); font-size: var(--fs-300); }

/* 表单控件（暗色 + 44px 触摸目标） */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: var(--fs-300); color: var(--paper-dim); letter-spacing: 0.02em; }
select, input[type="text"], input[type="search"], input[type="email"] {
  min-height: 46px; padding: 10px 14px; width: 100%;
  background: var(--ink-600); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--paper); appearance: none;
  transition: border-color var(--dur-fast) ease-out;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0958a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
select:hover, input:hover { border-color: var(--line-strong); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px;
  background: var(--accent); border: 3px solid var(--ink-700); border-radius: 50%;
  transition: transform var(--dur-fast) ease-out;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--accent); border: 3px solid var(--ink-700); border-radius: 50%;
}

/* 签证模拟器结果 */
.verdict {
  border: 1px dashed var(--accent-line); border-radius: var(--radius-md);
  background: var(--accent-wash); padding: var(--space-4);
}
.verdict__big {
  font-family: var(--font-display); font-size: clamp(1.9rem, 6vw, var(--fs-900)); line-height: 1;
  letter-spacing: -0.035em; color: var(--paper);
}
.verdict__big small { font-size: 0.34em; letter-spacing: 0.06em; color: var(--accent); display: block; margin-top: 6px; font-family: var(--font-mono); }
.verdict p { margin-top: var(--space-3); font-size: var(--fs-300); color: var(--paper-dim); }

/* 支付步骤 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--fs-300); color: var(--paper-dim);
}
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--ink-500); color: var(--paper-dim); border: 1px solid var(--line);
}
.badge--accent { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent); }

/* 预算计算器 */
.budget__out {
  font-family: var(--font-display); font-size: clamp(2.2rem, 8vw, var(--fs-1000)); line-height: 0.98;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.budget__out sup { font-size: 0.34em; color: var(--accent); top: -1.4em; font-family: var(--font-mono); letter-spacing: 0.06em; }
.bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--ink-500); }
.bar > i { height: 100%; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.bar > i:nth-child(1) { opacity: 1; }
.bar > i:nth-child(2) { opacity: 0.68; }
.bar > i:nth-child(3) { opacity: 0.44; }
.bar > i:nth-child(4) { opacity: 0.24; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--space-4); list-style: none; margin: 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-300); color: var(--color-muted); }
.legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex: none; }
.legend li:nth-child(1) i { opacity: 1; }
.legend li:nth-child(2) i { opacity: 0.68; }
.legend li:nth-child(3) i { opacity: 0.44; }
.legend li:nth-child(4) i { opacity: 0.24; }
.legend b { margin-left: auto; color: var(--paper-dim); font-variant-numeric: tabular-nums; font-weight: 500; }
.range-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.range-row output { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--accent); }

/* 直飞航线 */
.routes-list { list-style: none; margin: 0; padding: 0; }
.routes-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-300);
}
.routes-list li:last-child { border-bottom: 0; }
.routes-list .pair { color: var(--paper-dim); }
.routes-list .dur { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--color-muted); }
.routes-list .freq { color: var(--accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   8. 行程规划器
   -------------------------------------------------------------------------- */
.planner { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1 1 auto; min-height: 52px; padding: 12px 20px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--color-muted); cursor: pointer; text-align: left;
  font-size: var(--fs-300); letter-spacing: 0.02em;
  transition: color var(--dur-fast) ease-out, background var(--dur-base) ease-out;
}
.tab:hover { color: var(--paper); background: var(--ink-600); }
.tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--accent); background: var(--ink-600); }
.tab small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.14em; margin-top: 3px; }
.tabpanel { padding: var(--space-5); }
.tabpanel[hidden] { display: none; }
.tabpanel__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--line);
}
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .day {
  font-family: var(--font-mono); font-size: var(--fs-300); color: var(--accent);
  letter-spacing: 0.1em; padding-top: 2px;
}
.timeline h4 { font-size: var(--fs-500); margin-bottom: 6px; }
.timeline p { color: var(--color-muted); font-size: var(--fs-300); }
@media (max-width: 620px) {
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   9. 真实故事 / AI 助手
   -------------------------------------------------------------------------- */
.stories { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .stories { grid-template-columns: 1fr; } }
.story { background: var(--color-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.story blockquote { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--fs-500); line-height: 1.42; letter-spacing: -0.01em; }
.story__who { display: flex; align-items: center; gap: var(--space-3); }
.story__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--font-display);
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-line);
}
.story__who b { display: block; font-weight: 600; font-size: var(--fs-300); }
.story__who span { font-size: 11px; color: var(--color-muted); font-family: var(--font-mono); letter-spacing: 0.08em; }

.assistant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-6); align-items: center; }
@media (max-width: 940px) { .assistant { grid-template-columns: 1fr; } }
.chat {
  background: var(--color-surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2);
}
.chat__bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--ink-600);
}
.chat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.chat__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--paper-dim); }
.chat__log { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-height: 232px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--fs-300); line-height: 1.5; }
.msg--in { background: var(--ink-600); color: var(--paper-dim); align-self: flex-start; border-bottom-left-radius: 3px; }
.msg--out { background: var(--accent); color: var(--on-accent); align-self: flex-end; border-bottom-right-radius: 3px; }
.msg--typing { display: inline-flex; gap: 4px; align-items: center; }
.msg--typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; animation: blink 1s infinite; }
.msg--typing i:nth-child(2) { animation-delay: 160ms; }
.msg--typing i:nth-child(3) { animation-delay: 320ms; }
@keyframes blink { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--space-4) var(--space-3); }
.chip {
  min-height: 34px; padding: 6px 12px; font-size: 11px; letter-spacing: 0.02em;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  color: var(--paper-dim); cursor: pointer;
  transition: border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chat__form { display: flex; gap: 8px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--ink-600); }
.chat__form input { min-height: 44px; }
.chat__form button { flex: none; }

/* --------------------------------------------------------------------------
   10. 合作 / 项目摘要
   -------------------------------------------------------------------------- */
.partners { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .partners { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts > div { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.facts dd { margin: 10px 0 0; font-family: var(--font-display); font-size: var(--fs-600); line-height: 1.16; letter-spacing: -0.02em; }

/* 折叠面板 */
.accordion { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__trigger {
  width: 100%; min-height: 56px; padding: var(--space-4) 0;
  display: flex; align-items: center; gap: var(--space-3);
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--paper);
}
.acc__trigger h3 { font-size: var(--fs-500); flex: 1; }
.acc__trigger .acc__sign { color: var(--accent); font-family: var(--font-mono); transition: transform var(--dur-base) var(--ease-out); }
.acc__trigger[aria-expanded="true"] .acc__sign { transform: rotate(45deg); }
.acc__panel { overflow: hidden; }
.acc__panel[hidden] { display: none; }
.acc__panel > div { padding: 0 0 var(--space-5); color: var(--paper-dim); }

/* 数据表（中文内容为主） */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table.data { border-collapse: collapse; width: 100%; min-width: 620px; font-size: var(--fs-300); }
table.data caption { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--paper); font-family: var(--font-display); font-size: var(--fs-500); }
table.data th, table.data td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--ink-600); color: var(--paper-dim); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--ink-600); }
table.data td:first-child { color: var(--paper); font-weight: 500; white-space: nowrap; }
table.data td:not(:first-child) { color: var(--color-muted); }

/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--ink-900); margin-top: var(--space-8); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-5); padding: var(--space-7) 0 var(--space-6); }
@media (max-width: 940px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--paper-dim); text-decoration: none; font-size: var(--fs-300); }
.footer a:hover { color: var(--accent); }
.footer p { color: var(--color-muted); font-size: var(--fs-300); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between;
  padding: var(--space-5) 0; border-top: 1px solid var(--line);
  color: var(--color-muted); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   12. 交互细节
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-600); border: 1px solid var(--line-strong); color: var(--paper);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-base) ease-out, transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }

/* 移动端：导航折叠 */
@media (max-width: 900px) {
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--paper); cursor: pointer;
  }
  .nav {
    position: fixed; inset: var(--masthead-h) 0 auto 0; flex-direction: column; gap: 0;
    background: var(--ink-800); border-bottom: 1px solid var(--line);
    padding: var(--space-3) var(--page-pad) var(--space-5);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) ease-out, transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .masthead[data-nav="open"] .nav { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-400); }
  .nav a::after { display: none; }
  .masthead__actions .btn { display: none; }
}