/* ============================================================
   九色视频 zfc-cm.com — 全站样式表
   分组：base / layout / components / pages / responsive
   ============================================================ */

/* ------------------------------------------------------------
   base — 变量、重置、基础排版
   ------------------------------------------------------------ */
:root {
  --bg-page: #f5f3ef;
  --bg-surface: #fffdfa;
  --line: #e2ddd5;
  --line-strong: #d4cec4;
  --ink-title: #2a2724;
  --ink-body: #58534c;
  --ink-muted: #857e74;
  --mark-amber: #a5834a;
  --mark-blue: #5c7286;
  --mark-green: #6b7f6c;
  --mark-purple: #8a6f80;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --wrap: 1180px;
  --gap: 28px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.78;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ink-title);
  font-weight: 600;
  line-height: 1.4;
}

p {
  margin: 0 0 14px;
}

p:last-child {
  margin-bottom: 0;
}

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

dl,
dd {
  margin: 0;
}

dt {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ink-title);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

a:hover {
  color: var(--mark-amber);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.7;
}

:focus-visible {
  outline: 2px solid var(--mark-blue);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   layout — 页头、目录浮层、主容器、内页骨架、页脚
   ------------------------------------------------------------ */

/* 页头 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 243, 239, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(150%) blur(6px);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-title);
  white-space: nowrap;
}

.brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--mark-amber);
  vertical-align: 1px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-link {
  font-size: 14px;
  color: var(--ink-body);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
}

.header-link:hover,
.header-link.is-current {
  color: var(--ink-title);
  border-bottom-color: var(--mark-amber);
}

.catalog-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 15px;
  font-size: 14px;
  color: var(--ink-title);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.catalog-toggle::before {
  content: "";
  width: 12px;
  height: 8px;
  border-top: 1.5px solid var(--ink-title);
  border-bottom: 1.5px solid var(--ink-title);
}

.catalog-toggle:hover {
  border-color: var(--mark-amber);
}

/* 全屏目录索引浮层 */
.catalog-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(42, 39, 36, 0.42);
  overflow-y: auto;
  padding: 0;
}

.catalog-overlay[hidden] {
  display: none;
}

.catalog-inner {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100%;
  padding: 56px 32px 64px;
  background: var(--bg-surface);
}

.catalog-title {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

.catalog-list {
  border-top: 1px solid var(--line);
}

.catalog-item {
  border-bottom: 1px solid var(--line);
}

.catalog-item a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 48px;
  padding: 14px 4px;
}

.catalog-name {
  flex: 0 0 96px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-title);
}

.catalog-desc {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.65;
}

.catalog-item a:hover .catalog-name {
  color: var(--mark-amber);
}

.catalog-current {
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* 主内容骨架 */
.site-main {
  display: block;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px 72px;
}

.inner-main {
  max-width: var(--wrap);
}

.section {
  padding: 46px 0;
  border-top: 1px solid var(--line);
}

.section:first-of-type {
  border-top: 0;
}

.section-head {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
}

.section-desc,
.section-lead,
.section-intro {
  margin-top: 8px;
  max-width: 760px;
  font-size: 14px;
  color: var(--ink-body);
}

.section-more {
  margin-top: 18px;
  font-size: 14px;
}

.text-link {
  display: inline-block;
  min-height: 24px;
  padding-bottom: 2px;
  color: var(--ink-title);
  border-bottom: 1px solid var(--line-strong);
}

.text-link::after {
  content: " →";
  color: var(--mark-amber);
}

.text-link:hover {
  color: var(--mark-amber);
  border-bottom-color: var(--mark-amber);
}

.section-note {
  margin-top: 16px;
  font-size: 14px;
}

/* 面包屑与内页标题区 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.breadcrumb a {
  color: var(--ink-muted);
}

.breadcrumb a:hover {
  color: var(--mark-amber);
}

.breadcrumb-sep {
  color: var(--line-strong);
}

.breadcrumb-current {
  color: var(--ink-body);
}

.page-header {
  padding: 16px 0 0;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-title);
}

.page-hero {
  padding: 12px 0 30px;
  border-bottom: 1px solid var(--line);
}

.page-lead,
.page-lede,
.page-hero-lead {
  max-width: 720px;
  font-size: 15px;
  color: var(--ink-body);
}

.tag-list,
.page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.tag,
.page-tag {
  display: inline-block;
  padding: 3px 11px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-body);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

/* 相关入口带 */
.related-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 34px;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.related-links-label {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

.related-links-item {
  font-size: 14px;
  color: var(--ink-title);
  border-bottom: 1px solid var(--line-strong);
}

.related-links-item:hover {
  color: var(--mark-amber);
  border-bottom-color: var(--mark-amber);
}

/* 页脚 */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--line);
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 46px 32px 30px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-title);
}

.footer-intro {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.75;
}

.footer-group-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-title);
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  font-size: 13px;
  color: var(--ink-body);
}

.footer-links a:hover {
  color: var(--mark-amber);
}

.footer-bottom {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px 32px 30px;
  border-top: 1px solid var(--line);
}

.footer-copy {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------
   components — 通用按钮、媒体、行列表、表格、问答
   ------------------------------------------------------------ */

/* 按钮 */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  font-size: 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary,
.button-primary {
  color: #fffdfa;
  background: var(--ink-title);
  border-color: var(--ink-title);
}

.btn-primary:hover,
.button-primary:hover {
  color: #fffdfa;
  background: #3d3833;
  border-color: #3d3833;
}

.btn-ghost,
.button-ghost {
  color: var(--ink-title);
  background: transparent;
  border-color: var(--line-strong);
}

.btn-ghost:hover,
.button-ghost:hover {
  color: var(--ink-title);
  border-color: var(--mark-amber);
}

/* 媒体容器 */
.hero-media,
.content-media,
.scenario-media,
.media-item,
.media-figure,
.spec-figure,
.approach-figure,
.row-media {
  overflow: hidden;
  background: #efece6;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.hero-media img,
.content-media img,
.scenario-media img,
.media-item img,
.media-figure img,
.spec-figure img,
.approach-figure img,
.row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 行列表 — 通用行容器 */
.compare-row,
.scene-row,
.service-row,
.mapping-row {
  display: grid;
  align-items: baseline;
  gap: 6px 20px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background 0.18s ease, border-left-color 0.18s ease;
}

.compare-row:first-child,
.scene-row:first-child,
.service-row:first-child,
.mapping-row:first-child {
  border-top: 1px solid var(--line);
}

.compare-row:hover,
.scene-row:hover,
.service-row:hover,
.mapping-row:hover {
  background: var(--bg-surface);
}

.compare-row--film,
.scene-row--film,
.service-row--film {
  border-left-color: var(--mark-amber);
}

.compare-row--product,
.scene-row--product,
.service-row--product {
  border-left-color: var(--mark-blue);
}

.compare-row--short,
.scene-row--short,
.service-row--short {
  border-left-color: var(--mark-green);
}

.compare-row--live,
.scene-row--live,
.service-row--live {
  border-left-color: var(--mark-purple);
}

.compare-type,
.scene-name,
.service-name,
.mapping-scene {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-title);
}

.compare-fit,
.scene-need,
.service-fit,
.mapping-category {
  font-size: 14px;
  color: var(--ink-body);
}

.compare-output,
.scene-match,
.service-output {
  font-size: 13px;
  color: var(--ink-muted);
}

/* 三列 / 两列内容容器 */
.ability-columns,
.prep-columns,
.tradeoff-columns {
  display: grid;
  gap: var(--gap);
}

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

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

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

.ability-col,
.prep-column,
.prep-col,
.tradeoff-col,
.acceptance-column {
  min-width: 0;
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.ability-title,
.prep-title,
.prep-col-title,
.col-title,
.acceptance-title {
  font-size: 16px;
  font-weight: 600;
}

.ability-desc,
.prep-desc,
.prep-col-desc,
.col-text,
.acceptance-desc {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-body);
}

.ability-points,
.prep-list,
.col-list,
.acceptance-list {
  margin-top: 14px;
}

.ability-points li,
.prep-list li,
.col-list li,
.acceptance-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink-body);
}

.ability-points li::before,
.prep-list li::before,
.col-list li::before,
.acceptance-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--line-strong);
}

/* 表格 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.data-table,
.version-table {
  min-width: 560px;
  font-size: 14px;
}

.table-caption,
.data-table caption,
.version-table caption {
  padding: 14px 18px;
  text-align: left;
  font-size: 13px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}

.data-table th,
.version-table th {
  padding: 12px 18px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-title);
  background: #f2efe9;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table td,
.version-table td {
  padding: 12px 18px;
  color: var(--ink-body);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.data-table tbody tr:last-child td,
.version-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td,
.version-table tbody tr:hover td {
  background: #fbf9f5;
}

/* 问答条目 */
.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--line);
}

.faq-question {
  position: relative;
  min-height: 48px;
  padding: 14px 40px 14px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-title);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
  transform: rotate(-135deg);
}

.faq-question:hover {
  color: var(--mark-amber);
}

.faq-answer {
  padding: 0 4px 18px;
}

.faq-answer p {
  font-size: 14px;
  color: var(--ink-body);
}

/* 相关条目列表 */
.related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.related-item a {
  display: block;
  min-height: 48px;
  padding: 14px 18px;
  font-size: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.related-item a::after {
  content: " →";
  color: var(--mark-amber);
}

.related-item a:hover {
  border-color: var(--mark-amber);
}

/* ------------------------------------------------------------
   pages — 首页
   ------------------------------------------------------------ */

/* 首屏对比区 */
.hero {
  padding: 46px 0 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.42;
}

.hero-lead {
  margin-top: 16px;
  max-width: 460px;
  font-size: 15px;
  color: var(--ink-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-media {
  aspect-ratio: 16 / 10;
}

.hero-media figcaption {
  padding: 0;
}

.compare-list {
  margin-top: 34px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare-row {
  grid-template-columns: 140px minmax(0, 1.35fr) minmax(0, 1fr);
}

.content-media {
  margin-top: 26px;
}

.content-media-primary {
  aspect-ratio: 21 / 8;
}

.content-media figcaption {
  padding: 0 2px;
}

/* 首页场景清单 */
.scene-row {
  grid-template-columns: 150px minmax(0, 1.4fr) minmax(0, 1fr);
}

/* 首页业务目录行 */
.service-row {
  grid-template-columns: 160px minmax(0, 1.3fr) minmax(0, 0.9fr) 108px;
}

.service-link {
  font-size: 13px;
  color: var(--ink-title);
  border-bottom: 1px solid var(--line-strong);
  justify-self: end;
  white-space: nowrap;
}

.service-link::after {
  content: " →";
  color: var(--mark-amber);
}

.service-link:hover {
  color: var(--mark-amber);
  border-bottom-color: var(--mark-amber);
}

/* 首页制作流程 */
.flow-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.flow-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}

.flow-index {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--mark-amber);
  letter-spacing: 0.04em;
}

.flow-body {
  min-width: 0;
}

.flow-name {
  font-size: 16px;
  font-weight: 600;
}

.flow-desc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-body);
}

.flow-deliver {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* 首页问答预览 */
.faq-brief-list {
  border-top: 1px solid var(--line);
}

.faq-brief {
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}

.faq-brief-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-title);
}

.faq-brief-a {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-body);
}

/* 首页合作入口带 */
.coop-band {
  padding: 46px 0 0;
}

.coop-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mark-amber);
  border-radius: var(--radius-lg);
}

.coop-title {
  font-size: 17px;
  font-weight: 600;
}

.coop-desc {
  margin-top: 6px;
  max-width: 640px;
  font-size: 14px;
  color: var(--ink-body);
}

/* ------------------------------------------------------------
   pages — 业务目录 services.html
   ------------------------------------------------------------ */
.catalog-rows {
  border-top: 1px solid var(--line);
}

.catalog-row {
  border-bottom: 1px solid var(--line);
}

.catalog-row-inner {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 4px;
}

.row-mark {
  display: block;
  width: 3px;
  min-height: 100%;
  border-radius: 2px;
  background: var(--line-strong);
}

.mark-amber {
  background: var(--mark-amber);
}

.mark-blue {
  background: var(--mark-blue);
}

.mark-green {
  background: var(--mark-green);
}

.mark-purple {
  background: var(--mark-purple);
}

.row-body {
  min-width: 0;
}

.row-name {
  font-size: 17px;
  font-weight: 600;
}

.row-media {
  margin-top: 14px;
  aspect-ratio: 16 / 7;
}

.row-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 16px;
}

.row-field {
  min-width: 0;
}

.row-field dt {
  font-size: 12px;
  color: var(--ink-muted);
}

.row-field dd {
  margin-top: 2px;
  font-size: 14px;
  color: var(--ink-body);
}

.row-links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
}

.row-links a {
  color: var(--ink-title);
  border-bottom: 1px solid var(--line-strong);
}

.row-links a:hover {
  color: var(--mark-amber);
  border-bottom-color: var(--mark-amber);
}

/* ------------------------------------------------------------
   pages — 业务场景 scenarios.html
   ------------------------------------------------------------ */
.scenario-item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.scenario-item:first-of-type {
  border-top: 1px solid var(--line);
}

.scenario-media {
  aspect-ratio: 16 / 10;
  align-self: start;
}

.scenario-body {
  min-width: 0;
}

.scenario-name {
  font-size: 17px;
  font-weight: 600;
}

.scenario-need {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-body);
}

.scenario-category {
  position: relative;
  margin-top: 8px;
  padding-left: 15px;
  font-size: 13px;
  color: var(--ink-muted);
}

.scenario-category::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--mark-blue);
}

.scenario-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.mapping-list {
  border-top: 1px solid var(--line);
}

.mapping-row {
  grid-template-columns: 150px minmax(0, 1fr) 110px;
}

.mapping-link {
  justify-self: end;
  font-size: 13px;
}

.mapping-link a {
  color: var(--ink-title);
  border-bottom: 1px solid var(--line-strong);
}

.mapping-link a::after {
  content: " →";
  color: var(--mark-amber);
}

.mapping-link a:hover {
  color: var(--mark-amber);
  border-bottom-color: var(--mark-amber);
}

/* ------------------------------------------------------------
   pages — 制作流程 process.html
   ------------------------------------------------------------ */
.stage-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 26px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.stage-row:first-of-type {
  border-top: 1px solid var(--line);
}

.stage-head {
  min-width: 0;
}

.stage-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mark-amber);
  letter-spacing: 0.06em;
}

.stage-name {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
}

.stage-body {
  min-width: 0;
}

.stage-desc {
  font-size: 14px;
  color: var(--ink-body);
}

.stage-meta {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px 16px;
  margin-top: 14px;
}

.stage-meta dt {
  font-size: 12px;
  color: var(--ink-muted);
}

.stage-meta dd {
  font-size: 14px;
  color: var(--ink-body);
}

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

.media-item {
  aspect-ratio: 4 / 3;
}

.media-item figcaption {
  padding: 0 2px;
}

.deviation-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  counter-reset: deviation;
}

.deviation-item {
  min-width: 0;
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.deviation-title {
  font-size: 15px;
  font-weight: 600;
}

.deviation-title::before {
  counter-increment: deviation;
  content: counter(deviation) ". ";
  font-family: var(--font-mono);
  color: var(--mark-amber);
}

.deviation-desc {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-body);
}

/* ------------------------------------------------------------
   pages — 质量标准 standards.html
   ------------------------------------------------------------ */
.spec-groups {
  display: grid;
  gap: 0;
  padding: 40px 0 0;
}

.spec-group {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.spec-group:first-child {
  border-top: 1px solid var(--line);
}

.spec-group-title {
  font-size: 18px;
  font-weight: 600;
}

.spec-group-title::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 10px;
  background: var(--mark-blue);
  vertical-align: 5px;
}

.spec-group-desc {
  margin-top: 8px;
  max-width: 760px;
  font-size: 14px;
  color: var(--ink-body);
}

.spec-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
}

.spec-item {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  color: var(--ink-body);
}

.spec-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--line-strong);
}

.spec-figure {
  margin: 30px 0 0;
  aspect-ratio: 21 / 9;
}

.spec-figure figcaption {
  padding: 0 2px;
}

.version-table-section {
  padding: 40px 0 0;
}

.acceptance-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 40px 0 0;
}

.entry-band {
  padding: 40px 0 0;
}

.entry-band-title {
  font-size: 18px;
  font-weight: 600;
}

.entry-band-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 14px;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.entry-band-list a {
  font-size: 14px;
  color: var(--ink-title);
  border-bottom: 1px solid var(--line-strong);
}

.entry-band-list a::after {
  content: " →";
  color: var(--mark-amber);
}

.entry-band-list a:hover {
  color: var(--mark-amber);
  border-bottom-color: var(--mark-amber);
}

/* ------------------------------------------------------------
   pages — 问题解答 faq.html
   ------------------------------------------------------------ */
.faq-media {
  padding: 30px 0 0;
}

.media-figure {
  aspect-ratio: 21 / 8;
}

.media-figure figcaption {
  padding: 0 2px;
}

.faq-block {
  padding: 40px 0 0;
}

.faq-next {
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mark-amber);
  border-radius: var(--radius-lg);
}

.faq-next p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-body);
}

.related-entry {
  padding: 40px 0 0;
}

/* ------------------------------------------------------------
   pages — 合作路径 cooperation.html
   ------------------------------------------------------------ */
.prep-section .prep-columns {
  margin-top: 6px;
}

.path-section {
  padding: 46px 0;
}

.path-steps {
  display: grid;
  gap: 0;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.path-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}

.path-num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--mark-purple);
  letter-spacing: 0.04em;
}

.path-body {
  min-width: 0;
}

.path-name {
  font-size: 16px;
  font-weight: 600;
}

.path-desc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-body);
}

.path-output {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* 合作方式说明：图片与正文各自独立成块，不参与栅格自动分列 */
.approach-section {
  padding: 46px 0;
}

.approach-section .section-title {
  margin-bottom: 8px;
}

.approach-section .section-intro {
  margin-bottom: 22px;
}

.approach-section .approach-figure {
  aspect-ratio: 21 / 9;
  margin-bottom: 22px;
}

.approach-section .approach-body {
  max-width: 760px;
}

.approach-section .approach-body p {
  font-size: 15px;
  color: var(--ink-body);
}

.related-section {
  padding: 0 0 40px;
}

.related-section .related-links {
  margin-top: 14px;
}

/* ------------------------------------------------------------
   pages — 404.html
   ------------------------------------------------------------ */
.error-main {
  max-width: var(--wrap);
}

.error-block {
  padding: 72px 0 46px;
  border-bottom: 1px solid var(--line);
}

.error-code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mark-amber);
  letter-spacing: 0.14em;
}

.error-block h1 {
  margin-top: 10px;
  font-size: 28px;
  font-weight: 600;
}

.error-text {
  margin-top: 12px;
  max-width: 560px;
  font-size: 15px;
  color: var(--ink-body);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.error-guide {
  padding: 40px 0 0;
}

.error-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.error-links a {
  display: block;
  min-height: 48px;
  padding: 14px 18px;
  font-size: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.error-links a::after {
  content: " →";
  color: var(--mark-amber);
}

.error-links a:hover {
  border-color: var(--mark-amber);
}

/* ------------------------------------------------------------
   responsive — 1080 / 768 / 480
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .header-inner,
  .site-main,
  .footer-inner,
  .footer-bottom {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
  }

  .hero-title {
    font-size: 26px;
  }

  .ability-columns,
  .prep-columns,
  .tradeoff-columns,
  .acceptance-section,
  .media-grid,
  .deviation-list,
  .related-list,
  .error-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .header-inner {
    padding: 0 18px;
    height: 58px;
  }

  .brand {
    font-size: 17px;
  }

  .header-actions {
    gap: 14px;
  }

  .header-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .catalog-toggle {
    min-height: 40px;
  }

  .catalog-inner {
    padding: 40px 20px 56px;
  }

  .catalog-item a {
    flex-direction: column;
    gap: 4px;
    min-height: 48px;
  }

  .catalog-name {
    flex: none;
  }

  .site-main,
  .footer-inner,
  .footer-bottom {
    padding-left: 18px;
    padding-right: 18px;
  }

  .site-main {
    padding-bottom: 56px;
  }

  .section {
    padding: 36px 0;
  }

  .page-title {
    font-size: 22px;
  }

  .page-hero {
    padding: 10px 0 24px;
  }

  .hero {
    padding: 34px 0 0;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hero-title {
    font-size: 22px;
  }

  .hero-lead {
    max-width: none;
  }

  .hero-media {
    aspect-ratio: 16 / 9;
  }

  .content-media-primary,
  .spec-figure,
  .media-figure,
  .approach-section .approach-figure {
    aspect-ratio: 16 / 9;
  }

  /* 行列表：转为纵向堆叠，色标条移到行首上方 */
  .compare-row,
  .scene-row,
  .service-row,
  .mapping-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 14px 16px 16px;
    border-left-width: 3px;
  }

  .compare-type,
  .scene-name,
  .service-name,
  .mapping-scene {
    font-size: 15px;
  }

  .compare-fit,
  .scene-need,
  .service-fit,
  .mapping-category,
  .compare-output,
  .scene-match,
  .service-output {
    font-size: 13px;
  }

  .service-link,
  .mapping-link {
    justify-self: start;
    margin-top: 6px;
  }

  .flow-step,
  .path-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .ability-columns,
  .prep-columns,
  .tradeoff-columns,
  .acceptance-section,
  .media-grid,
  .deviation-list,
  .related-list,
  .error-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .row-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .row-media {
    aspect-ratio: 16 / 9;
  }

  .scenario-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .scenario-media {
    aspect-ratio: 16 / 9;
  }

  .stage-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .stage-meta {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .spec-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .media-item {
    aspect-ratio: 16 / 9;
  }

  .coop-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }

  .related-links,
  .entry-band-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .related-links-item,
  .entry-band-list a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    padding-top: 36px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .error-block {
    padding: 52px 0 36px;
  }

  .error-block h1 {
    font-size: 22px;
  }

  .data-table,
  .version-table {
    min-width: 520px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 0 14px;
  }

  .site-main,
  .footer-inner,
  .footer-bottom {
    padding-left: 14px;
    padding-right: 14px;
  }

  .catalog-inner {
    padding: 32px 14px 48px;
  }

  .hero-title,
  .page-title,
  .error-block h1 {
    font-size: 21px;
  }

  .section-title,
  .spec-group-title,
  .entry-band-title {
    font-size: 17px;
  }

  .ability-col,
  .prep-column,
  .prep-col,
  .tradeoff-col,
  .acceptance-column,
  .deviation-item {
    padding: 18px 16px;
  }

  .btn,
  .button {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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