/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: custom (帆旅 VI v2.2) · enrichment: Tier A CSS 岗位卡 · nav: N5 floating bar · footer: Ft1 mast-headed
 * tone: 工程师式克制 + 岗位/档案现场感 · paper: VI white / canvas · accent: VI teal ≤3% · highlight: VI orange · display+body: 思源黑体/Inter · meta: mono
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0;
  color: var(--color-brand);
  font-weight: 600;
  font-style: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
p { margin: 0; }
a { color: var(--color-link); text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.94em; }
.wrap { width: min(100% - 2 * var(--page-gutter), var(--page-max)); margin-inline: auto; }

.skip {
  position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-sticky);
  background: var(--color-brand); color: var(--color-on-brand); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-control);
}
.skip:focus { top: var(--space-md); }

/* 待确认占位：工作稿可见，公开前替换或隐藏 */
.todo {
  display: inline-block; margin-inline: 2px;
  padding: 0 var(--space-xs);
  border: 1px dashed var(--color-warn-fg); border-radius: var(--radius-tag);
  background: var(--color-warn-bg); color: var(--color-warn-fg);
  font-size: var(--text-aux); font-weight: 500; line-height: var(--leading-aux);
}

/* ---------- 按钮与链接 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-control);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-active); transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-rule); color: var(--color-muted); cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px;
  color: var(--color-link); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px;
}
.link-arrow span { transition: transform var(--dur-short) var(--ease-out); }
.link-arrow:hover span { transform: translateX(3px); }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block; padding: 1px var(--space-xs);
  border: 1px solid transparent; border-radius: var(--radius-tag);
  font-size: var(--text-aux); font-weight: 500; line-height: var(--leading-aux); white-space: nowrap;
}
.tag--ok   { background: var(--color-paper);   color: var(--color-ok-fg);   border-color: var(--color-ok-fg); }
.tag--info { background: var(--color-info-bg); color: var(--color-info-fg); }
.tag--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.tag--err  { background: var(--color-err-bg);  color: var(--color-err-fg); }

/* ---------- 导航：浮动条 ---------- */
.nav { position: sticky; top: var(--space-sm); z-index: var(--z-sticky); margin-top: var(--space-sm); }
.nav__bar {
  width: min(100% - 2 * var(--page-gutter) + 2 * var(--space-sm), var(--page-max) + 2 * var(--space-md));
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-md);
  height: 64px; padding-inline: var(--space-xs) var(--space-sm);
  border: 1px solid transparent; border-radius: var(--radius-card);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled .nav__bar {
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--color-rule-strong);
  box-shadow: 0 10px 30px -22px var(--color-shadow);
}
.nav__brand { display: flex; align-items: center; flex: none; margin-right: auto; border-radius: var(--radius-control); }
/* 组合标 240px 为 VI 最小宽度；窄屏改用独立图形，不缩小组合标 */
.nav__brand img { width: 240px; height: auto; margin-block: -9px; }
.nav__links { display: none; gap: var(--space-2xs); }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm);
  border-radius: var(--radius-control);
  color: var(--color-ink); font-size: 1rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { background: var(--color-paper-3); color: var(--color-brand); }
.nav__cta { padding-inline: var(--space-md); }

@media (max-width: 29.99rem) {
  .nav__brand img { width: 52px; height: 52px; margin-block: 0; }
}
@media (min-width: 64rem) {
  .nav__links { display: flex; }
  .nav__brand { margin-right: 0; }
  .nav__links { margin-inline: auto; }
}

/* ---------- 首屏 ---------- */
.hero { padding-block: var(--space-2xl) var(--space-4xl); }
.hero__grid { display: grid; gap: var(--space-3xl); align-items: center; }
.hero__title { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: 0.01em; }
.hero__lede { margin-top: var(--space-lg); max-width: 33em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-xl); }
.hero__note {
  margin-top: var(--space-2xl); padding-top: var(--space-lg); max-width: 33em;
  border-top: 1px solid var(--color-rule-strong);
  color: var(--color-muted); font-size: var(--text-aux); line-height: var(--leading-aux);
}

@media (min-width: 60rem) {
  .hero { padding-block: var(--space-3xl) var(--space-4xl); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
}

/* 服务流程小卡的行排版（原与岗位卡共用，岗位卡移除后单独保留） */
.artifact__rows { display: grid; margin: 0; }
.artifact__rows > div {
  display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: var(--space-sm);
  padding-block: var(--space-xs); border-top: 1px solid var(--color-rule);
  font-size: var(--text-aux); line-height: var(--leading-aux);
}
.artifact__rows dt { color: var(--color-muted); }
.artifact__rows dd { margin: 0; color: var(--color-ink); min-width: 0; }
.fake-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-sm);
  border-radius: var(--radius-control); font-size: var(--text-aux); font-weight: 600; white-space: nowrap;
}
.fake-btn--ghost { border: 1px solid var(--color-control); color: var(--color-brand); background: var(--color-paper); }
.fake-btn--solid { background: var(--color-brand); color: var(--color-on-brand); }

/* ---------- 问题 ---------- */
.problem { padding-block: var(--space-4xl); background: var(--color-paper-2); }
.problem__grid { display: grid; gap: var(--space-2xl); }
.problem__head p { margin-top: var(--space-md); color: var(--color-muted); }
.problem__list { margin: 0; padding: 0; list-style: none; }
.problem__list li { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.problem__list li:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.problem__list h3 { font-size: 1.25rem; line-height: var(--leading-h3); }
@media (min-width: 48rem) {
  .problem__list li { grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-xl); align-items: baseline; }
}
@media (min-width: 60rem) {
  .problem__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
}

/* ---------- 上岗四步 ---------- */
.workflow { padding-block: var(--space-4xl); }
.workflow__head { max-width: 40em; }
.workflow__head p { margin-top: var(--space-md); color: var(--color-muted); }
.stages { margin: var(--space-3xl) 0 0; padding: 0; list-style: none; }
.stage { display: grid; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-3xl); }
.stage__rule { height: 3px; background: var(--color-brand); transform-origin: left center; }
.stage__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.stage__num { font-size: var(--text-stage); font-weight: 300; line-height: 1; color: var(--color-brand); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stage__name { font-size: var(--text-h3); font-weight: 600; color: var(--color-brand); }
.stage__time {
  padding: 1px var(--space-xs); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-tag);
  font-size: var(--text-aux); line-height: var(--leading-aux); color: var(--color-muted); white-space: nowrap;
}
.stage__body { display: grid; gap: var(--space-md); align-content: start; }
.stage__out { font-size: var(--text-aux); line-height: var(--leading-aux); color: var(--color-ink); }
.stage__out strong { display: block; margin-bottom: var(--space-2xs); color: var(--color-link); font-weight: 600; }

.artifact {
  margin: 0; padding: var(--space-md) var(--space-lg) var(--space-sm);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card);
  background: var(--color-paper); align-self: start;
}
.artifact figcaption { font-family: var(--font-mono); font-size: var(--text-aux); color: var(--color-muted); letter-spacing: 0.06em; margin-bottom: var(--space-2xs); }
.artifact__rows > div:first-child { border-top: 0; }
.artifact__rows--check > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.artifact__rows--check dd { justify-self: end; }
.artifact__versions { margin: 0; padding: 0; list-style: none; font-size: var(--text-aux); line-height: var(--leading-aux); }
.artifact__versions li { display: flex; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); color: var(--color-muted); }
.artifact__versions li:first-child { border-top: 0; }
.artifact__versions .mono { color: var(--color-brand); font-weight: 600; min-width: 2em; }
.artifact__versions .is-live { color: var(--color-ink); font-weight: 600; }
.artifact__versions .is-live::after { content: "运行中"; margin-left: auto; padding: 0 var(--space-xs); border: 1px solid var(--color-ok-fg); border-radius: var(--radius-tag); color: var(--color-ok-fg); font-weight: 500; white-space: nowrap; }

.workflow__start { margin-top: var(--space-md); }

@media (min-width: 60rem) {
  .stage {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
    column-gap: var(--space-2xl); row-gap: var(--space-xl);
  }
  .stage__rule { grid-column: 1 / -1; }
  .stage__label { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

/* 唯一的入场动效：阶段分隔线横向展开（仅在有 JS 且未要求减少动效时） */
.js .stage__rule { transform: scaleX(0); transition: transform var(--dur-long) var(--ease-out); }
.js .stage.is-in .stage__rule { transform: scaleX(1); }

/* ---------- 园区岗位 ---------- */
.roles { padding-block: var(--space-4xl); background: var(--color-paper-2); }
.roles__head { max-width: 40em; }
.roles__head p { margin-top: var(--space-md); color: var(--color-muted); }
.roles__table { width: 100%; margin-top: var(--space-2xl); border-collapse: collapse; }
.roles__table th, .roles__table td { padding: var(--space-md) var(--space-md) var(--space-md) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule-strong); }
.roles__table thead th { padding-block: var(--space-sm); font-size: var(--text-aux); font-weight: 500; color: var(--color-muted); border-bottom-color: var(--color-control); }
.roles__table tbody th { color: var(--color-brand); font-weight: 600; white-space: nowrap; }
.roles__table td:last-child { color: var(--color-muted); }
.roles__more { margin-top: var(--space-xl); color: var(--color-muted); }
.roles__more a { font-weight: 600; white-space: nowrap; }

@media (min-width: 48rem) {
  .roles__table th:first-child { width: 22%; }
  .roles__table td:nth-child(2) { width: 44%; }
}
@media (max-width: 47.99rem) {
  .roles__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .roles__table tr { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-strong); }
  .roles__table tbody tr:first-child { border-top: 1px solid var(--color-control); }
  .roles__table th, .roles__table td { display: block; padding: 0; border: 0; }
  .roles__table td::before { content: attr(data-label); display: block; font-size: var(--text-aux); color: var(--color-muted); }
  .roles__table td:last-child { color: var(--color-ink); }
}

/* ---------- 交付规矩：深蓝段 ---------- */
.rules { padding-block: var(--space-4xl); background: var(--color-brand); color: var(--color-on-brand); }
.rules :focus-visible { outline-color: var(--color-focus-on-dark); }
.rules__head { max-width: 40em; }
.rules__head h2 { color: var(--color-on-brand); }
.rules__head p { margin-top: var(--space-md); color: var(--color-on-brand-muted); }
.rules__list { display: grid; gap: var(--space-xl) var(--space-2xl); margin: var(--space-3xl) 0 0; }
.rules__list > div { padding-top: var(--space-lg); border-top: 1px solid var(--color-brand-raised); }
.rules__list dt { display: flex; align-items: center; gap: var(--space-sm); font-size: 1.125rem; font-weight: 600; color: var(--color-on-brand); }
.rules__list dt::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--color-accent); }
.rules__list dd { margin: var(--space-xs) 0 0; color: var(--color-on-brand-muted); font-size: 1rem; }
@media (min-width: 48rem) { .rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rules__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 关于 ---------- */
.about { padding-block: var(--space-4xl); }
.about__grid { display: grid; gap: var(--space-3xl); }
.about__main > p { margin-top: var(--space-md); max-width: 34em; }
.about__principles { padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-panel); align-self: start; }
.about__principles h3 { font-size: 1.25rem; }
.about__principles ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.about__principles li { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule-strong); font-size: 1rem; }
.about__principles li:first-child { border-top: 0; }
@media (min-width: 60rem) {
  .about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- 预约 ---------- */
.contact { padding-block: var(--space-4xl); background: var(--color-paper-2); }
.contact__grid { display: grid; gap: var(--space-2xl); }
.contact__copy p { margin-top: var(--space-md); color: var(--color-muted); max-width: 30em; }
.contact__copy p + p { margin-top: var(--space-xs); }
.contact__copy .contact__mail { color: var(--color-ink); }
.form {
  display: grid; gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-paper); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-panel);
}
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label { font-size: var(--text-aux); font-weight: 600; color: var(--color-ink); }
.field input[type="text"], .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px var(--space-sm);
  border: 1px solid var(--color-control); border-radius: var(--radius-control);
  background: var(--color-paper); color: var(--color-ink);
  font: inherit; font-size: 1rem; line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field [aria-invalid="true"] { border-color: var(--color-err-fg); box-shadow: inset 0 0 0 1px var(--color-err-fg); }
.field__help { font-size: var(--text-aux); line-height: var(--leading-aux); color: var(--color-muted); }
.field__err { font-size: var(--text-aux); line-height: var(--leading-aux); color: var(--color-err-fg); font-weight: 500; }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--space-sm); }
.field--check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-brand); }
.field--check label { font-weight: 400; line-height: var(--leading-aux); }
.field--check .field__err { grid-column: 1 / -1; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form__status {
  flex: 1 1 16rem; padding: var(--space-sm) var(--space-md);
  background: var(--color-info-bg); color: var(--color-info-fg); border-radius: var(--radius-control);
  font-size: var(--text-aux); line-height: var(--leading-aux);
}
.form__status[data-tone="ok"] { background: var(--color-ok-bg); color: var(--color-ok-fg); }
.form__status[data-tone="err"] { background: var(--color-err-bg); color: var(--color-err-fg); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form [type="submit"]:disabled { opacity: 0.6; cursor: progress; }
@media (min-width: 40rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-xl); }
  .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
}


/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js .stage__rule { transform: none; }
}

/* ---------- 当前页导航 ---------- */
.nav__link[aria-current="page"] { background: var(--color-paper-3); color: var(--color-brand); font-weight: 600; }

/* ---------- 行业场景示例页 ---------- */
.page-head { padding-block: var(--space-3xl) var(--space-xl); }
.page-head h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }

/* 行业切换条：缩略图卡片，选中项彩色、其余压暗 */
.switcher { margin-top: var(--space-xl); }
.switcher__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: var(--space-sm);
  margin: -6px; padding: 6px 6px var(--space-sm);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
}
@media (min-width: 64rem) {
  .switcher__track { grid-auto-flow: row; grid-template-columns: repeat(9, minmax(0, 1fr)); overflow: visible; }
}
.switch {
  position: relative; display: grid; align-content: start; scroll-snap-align: start; overflow: hidden;
  background: var(--color-paper); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card);
  color: var(--color-ink); text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.switch:focus-visible { outline-offset: 2px; }
.switch::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-short) var(--ease-out);
}
.switch__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(0.85) brightness(0.95); transition: filter var(--dur-short) var(--ease-out); }
.switch__text { display: grid; gap: 2px; padding: var(--space-xs) var(--space-sm) var(--space-sm); transition: background-color var(--dur-short) var(--ease-out); }
.switch__industry { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; }
.switch__name { color: var(--color-brand); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.switch:hover .switch__img { filter: none; }
.switch:hover { border-color: var(--color-control); }
.switch.is-active { border-color: var(--color-brand); box-shadow: 0 14px 30px -20px var(--color-shadow); }
.switch.is-active::after { transform: scaleX(1); }
.switch.is-active .switch__img { filter: none; }
.switch.is-active .switch__text { background: var(--color-brand); }
.switch.is-active .switch__industry { color: var(--color-on-brand-muted); }
.switch.is-active .switch__name { color: var(--color-on-brand); }
@media (hover: hover) and (pointer: fine) { .switch:not(.is-active):hover { transform: translateY(-2px); } }

/* 场景：整幅头图 + 压在其上的流程面板 */
.showcase { padding-bottom: var(--space-3xl); }
.scene { scroll-margin-top: 96px; }
.scene + .scene { margin-top: var(--space-3xl); }
.scene__hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end; min-height: clamp(460px, 62vh, 620px);
  background: var(--color-brand);
}
.scene__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.js .scene__img { opacity: 0; transition: opacity 700ms var(--ease-out); }
.js .scene__img.is-loaded { opacity: 1; }
.scene__hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--color-brand-active) 88%, transparent), color-mix(in oklch, var(--color-brand-active) 12%, transparent)),
    linear-gradient(0deg, color-mix(in oklch, var(--color-brand-active) 70%, transparent), transparent 55%);
}
.scene__overlay { display: grid; gap: var(--space-xl); padding-block: var(--space-3xl) calc(var(--space-3xl) + 56px); color: var(--color-on-brand); }
.scene__industry { color: var(--color-accent); font-size: var(--text-aux); font-weight: 600; letter-spacing: 0.04em; }
.scene__intro h2 { margin-top: var(--space-xs); color: var(--color-on-brand); font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); line-height: 1.25; }
.scene__fit { margin-top: var(--space-sm); color: var(--color-on-brand-muted); font-size: var(--text-aux); line-height: var(--leading-aux); }
.scene__intro .tag { margin-top: var(--space-md); }
.scene__problem {
  padding: var(--space-lg); max-width: 36em;
  background: color-mix(in oklch, var(--color-brand-active) 72%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-on-brand) 16%, transparent); border-radius: var(--radius-card);
}
.scene__label { color: var(--color-highlight); font-size: var(--text-aux); font-weight: 600; }
.scene__problem p + p { margin-top: var(--space-xs); color: var(--color-on-brand); font-size: 1rem; }
@media (min-width: 60rem) {
  .scene__overlay { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: var(--space-3xl); }
  .scene__problem { justify-self: end; }
}

.scene__flow {
  position: relative; display: grid; gap: var(--space-xl);
  margin-top: -56px; padding: var(--space-lg);
  background: var(--color-paper); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-panel);
  box-shadow: 0 30px 60px -44px var(--color-shadow);
}
@media (min-width: 48rem) { .scene__flow { padding: var(--space-xl) var(--space-2xl); } }
.scene__flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.scene__flow-head h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
.case-legend { display: flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: var(--text-aux); line-height: var(--leading-aux); color: var(--color-muted); }
.case-legend__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-highlight); }

/* 切换进场：头图缓推、文字与步骤依次上浮（只在切换时播放一次） */
@keyframes scene-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes scene-push { from { transform: scale(1.06); } to { transform: none; } }
.js .scene.is-entering .scene__img { animation: scene-push 1600ms var(--ease-out) both; }
.js .scene.is-entering .scene__overlay > * { animation: scene-rise var(--dur-long) var(--ease-out) both; }
.js .scene.is-entering .scene__overlay > :nth-child(2) { animation-delay: 80ms; }
.js .scene.is-entering .story__step { animation: scene-rise var(--dur-long) var(--ease-out) both; }
.js .scene.is-entering .story__step:nth-child(2) { animation-delay: 60ms; }
.js .scene.is-entering .story__step:nth-child(3) { animation-delay: 120ms; }
.js .scene.is-entering .story__step:nth-child(4) { animation-delay: 180ms; }

/* 智能体嵌入流程效果：箭头承接流程，“以前”划掉、“现在”加粗，与头图中的问题对照 */
.impact {
  position: relative; margin-top: var(--space-md);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  background: var(--color-ok-bg); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card);
}
.impact__arrow {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-brand); color: var(--color-on-brand); box-shadow: 0 0 0 6px var(--color-paper);
}
.impact__arrow .icon { width: 24px; height: 24px; }
.impact__title { text-align: center; font-size: var(--text-h3); line-height: var(--leading-h3); }
.impact__list { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.impact__item { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); background: var(--color-paper); border-radius: var(--radius-card); }
.impact__before { display: flex; align-items: baseline; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-aux); line-height: var(--leading-aux); }
.impact__before .impact__text { text-decoration: line-through; text-decoration-color: var(--color-control); }
.impact__tag { flex: none; padding: 0 6px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-tag); font-size: 0.8125rem; text-decoration: none; }
.impact__after { display: flex; align-items: flex-start; gap: var(--space-xs); color: var(--color-brand); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.impact__after .icon { margin-top: 3px; color: var(--color-ok-fg); }
@media (min-width: 48rem) {
  .impact { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
  .impact__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.js .scene.is-entering .impact__item { animation: scene-rise var(--dur-long) var(--ease-out) both; animation-delay: 240ms; }
.js .scene.is-entering .impact__item:nth-child(2) { animation-delay: 300ms; }
.js .scene.is-entering .impact__item:nth-child(3) { animation-delay: 360ms; }

/* 上一个 / 下一个场景 */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xl); }
.pager__link {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card);
  color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.pager__link:hover { background: var(--color-paper-2); border-color: var(--color-control); }
.pager__link .icon { color: var(--color-link); }
.pager__link--prev .icon { transform: rotate(180deg); }
.pager__link--next { margin-left: auto; text-align: right; }
.pager__hint { display: block; color: var(--color-muted); font-size: var(--text-aux); line-height: var(--leading-aux); }
.pager__name { display: block; color: var(--color-brand); font-weight: 600; white-space: nowrap; }
@media (max-width: 39.99rem) {
  .pager { flex-direction: column; }
  .pager__link { justify-content: space-between; }
  .pager__link--next { margin-left: 0; }
}

/* 图文流程：每步 = 执行者 + 插图 + 说明；橙色编号为人工环节 */
.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.story { display: grid; gap: var(--space-xl) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.story__step { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.story__actor { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-brand); font-size: var(--text-aux); font-weight: 600; line-height: 1.4; }
.story__num {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.story__step.is-human .story__num { background: var(--color-highlight); color: var(--color-ink); }
.story__cap { color: var(--color-muted); font-size: var(--text-aux); line-height: var(--leading-aux); }

.snip {
  flex: 1; display: grid; align-content: start; gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-paper); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card);
  color: var(--color-ink); font-size: var(--text-aux); line-height: var(--leading-aux);
}
.snip--confirm { background: var(--color-warn-bg); border-color: var(--color-highlight); }
.snip--done { background: var(--color-ok-bg); }
.snip__meta { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); }
.snip__title { font-weight: 600; }
.snip__done { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.snip__done .icon { color: var(--color-ok-fg); }

.bubble { justify-self: start; max-width: 92%; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-3); border-radius: 10px 10px 10px 3px; }
.bubble--agent { justify-self: end; background: var(--color-ok-bg); border-radius: 10px 10px 3px 10px; }

.snip__rows { display: grid; margin: 0; }
.snip__rows > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-sm); padding-block: 4px; border-top: 1px solid var(--color-rule); }
.snip__rows > div:first-child { border-top: 0; }
.snip__rows dt { color: var(--color-muted); }
.snip__rows dd { margin: 0; min-width: 0; }
.snip--confirm .snip__rows > div { border-top-color: var(--color-rule-strong); }
.snip--confirm .snip__rows dt { color: var(--color-warn-fg); }

.snip__steps { display: grid; gap: var(--space-xs); margin: 0; padding-left: 1.25em; }
.snip__src { display: block; color: var(--color-muted); }
.snip__files, .snip__checks, .snip__choices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.snip__files li { display: flex; align-items: center; gap: var(--space-xs); }
.snip__files .icon { color: var(--color-muted); }
.snip__checks li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: 6px; border-top: 1px solid var(--color-rule); }
.snip__checks li:first-child { padding-top: 0; border-top: 0; }
.snip__choices li { display: flex; align-items: center; gap: var(--space-xs); }
.snip__choices li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-control); background: var(--color-paper); }
.snip__choices li.is-on { font-weight: 600; }
.snip__choices li.is-on::before { border-color: var(--color-brand); background: var(--color-brand); box-shadow: inset 0 0 0 3px var(--color-paper); }
.snip__btns { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-2xs); }
.fake-select { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-xs); border: 1px solid var(--color-control); border-radius: var(--radius-control); background: var(--color-paper); }
.fake-select::after { content: "▾"; color: var(--color-muted); }

@media (min-width: 40rem) {
  .story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .case__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
}
@media (min-width: 64rem) {
  .story { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 步骤之间的箭头 */
  .story__step:not(:last-child)::after {
    content: ""; position: absolute; top: 9px; right: calc(var(--space-lg) / -2 - 5px);
    width: 8px; height: 8px; border-top: 2px solid var(--color-control); border-right: 2px solid var(--color-control);
    transform: rotate(45deg);
  }
}

/* 怎么选第一个场景 */
.pick { padding-block: var(--space-4xl); background: var(--color-brand); color: var(--color-on-brand); }
.pick h2 { color: var(--color-on-brand); }
.pick__grid { display: grid; gap: var(--space-2xl); }
.pick__head p { margin-top: var(--space-md); max-width: 30em; color: var(--color-on-brand-muted); }
.pick__list { display: grid; gap: var(--space-lg) var(--space-2xl); margin: 0; }
.pick__list > div { padding-top: var(--space-md); border-top: 1px solid var(--color-brand-raised); }
.pick__list dt { font-size: 1.125rem; font-weight: 600; color: var(--color-on-brand); }
.pick__list dd { margin: var(--space-xs) 0 0; font-size: 1rem; color: var(--color-on-brand-muted); }
@media (min-width: 48rem) { .pick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .pick__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); } }

.cases-cta { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.cases-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.cases-cta p { margin-top: var(--space-sm); max-width: 36em; color: var(--color-muted); }

/* ==========================================================
   首页视觉优化（2026-10-09）：大图首屏、问题对照卡、园区配图、
   行业场景预览、交付标准图标、大图预约区
   ========================================================== */

/* 导航条常驻白底，浮在深色大图上也清楚 */
.nav__bar {
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--color-rule-strong);
}

/* 区块底色交替：深色首屏 → 白 → 浅灰 → 白 → 浅灰 → 深蓝 → 白 → 深色预约 */
.problem { background: var(--color-paper); }
.workflow { background: var(--color-paper-2); }
.roles { background: var(--color-paper); }

/* 首屏大图 */
.hero--image {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -76px; padding-top: calc(76px + var(--space-3xl)); padding-bottom: var(--space-4xl);
  background: var(--color-brand); color: var(--color-on-brand);
}
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero--image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--color-brand-active) 90%, transparent), color-mix(in oklch, var(--color-brand-active) 30%, transparent)),
    linear-gradient(0deg, color-mix(in oklch, var(--color-brand-active) 60%, transparent), transparent 50%);
}
.hero--image :focus-visible { outline-color: var(--color-focus-on-dark); }
.hero--image .hero__title { color: var(--color-on-brand); }
.hero--image .hero__lede { color: var(--color-on-brand); }
.hero--image .hero__note { color: var(--color-on-brand-muted); border-top-color: var(--color-brand-raised); }
@media (min-width: 60rem) { .hero--image { padding-top: calc(76px + var(--space-4xl)); } }

.btn--light { background: var(--color-paper); color: var(--color-brand); }
.btn--light:hover { background: var(--color-paper-3); }
.btn--light:active { background: var(--color-rule-strong); transform: translateY(1px); }
.link-arrow--light { color: var(--color-accent); }

/* 常见问题：问题 → 我们的做法 */
.problem__head { max-width: 40em; }
.versus { display: grid; gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.versus__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-panel); background: var(--color-paper); }
.versus__problem { flex: 1; padding: var(--space-lg) var(--space-lg) var(--space-xl); background: var(--color-paper-2); }
.versus__tag { display: inline-block; padding: 0 6px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-tag); color: var(--color-muted); font-size: 0.8125rem; line-height: var(--leading-aux); }
.versus__problem h3 { margin-top: var(--space-sm); font-size: 1.25rem; }
.versus__problem p { margin-top: var(--space-xs); color: var(--color-muted); font-size: 1rem; }
.versus__arrow {
  position: relative; z-index: var(--z-raised); align-self: center; margin-block: -26px;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-brand); color: var(--color-on-brand); box-shadow: 0 0 0 6px var(--color-paper);
}
.versus__arrow .icon { width: 24px; height: 24px; }
.versus__answer {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg) var(--space-lg); background: var(--color-ok-bg);
  color: var(--color-brand); font-size: 1.0625rem; font-weight: 600; line-height: 1.6;
}
.versus__answer .icon { margin-top: 4px; color: var(--color-ok-fg); }
@media (min-width: 60rem) { .versus { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 园区场景：配图 */
.roles__grid { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
.roles__grid .roles__table { margin-top: 0; }
.roles__figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-panel); background: var(--color-brand); }
.roles__figure img { width: 100%; height: 100%; object-fit: cover; }
.roles__figure figcaption {
  position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  background: linear-gradient(0deg, color-mix(in oklch, var(--color-brand-active) 88%, transparent), transparent);
}
.roles__fig-industry { color: var(--color-accent); font-size: var(--text-aux); font-weight: 600; }
.roles__fig-text { color: var(--color-on-brand); font-size: 1.25rem; font-weight: 600; }
@media (min-width: 60rem) {
  .roles__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
  .roles__figure { position: sticky; top: 100px; aspect-ratio: 3 / 4; }
}

/* 行业场景示例预览 */
.teaser { padding-block: var(--space-4xl); background: var(--color-paper-2); }
.teaser__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.teaser__head p { margin-top: var(--space-md); max-width: 36em; color: var(--color-muted); }
.teaser__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .teaser__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } }
.teaser-card {
  position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card); background: var(--color-brand); text-decoration: none;
}
.teaser-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.teaser-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* 底部文字区需要足够深，浅色图片上的标签才看得清 */
  background: linear-gradient(0deg, color-mix(in oklch, var(--color-brand-active) 94%, transparent) 0%, color-mix(in oklch, var(--color-brand-active) 82%, transparent) 34%, transparent 72%);
}
.teaser-card__text { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: var(--space-md); }
.teaser-card__industry { color: var(--color-accent); font-size: var(--text-aux); font-weight: 600; }
.teaser-card__name { color: var(--color-on-brand); font-size: 1rem; font-weight: 600; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .teaser-card:hover img { transform: scale(1.05); } }

/* 交付标准：图标 */
.rules__list dt::before { content: none; }
.rules__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-brand-raised); color: var(--color-accent);
}

/* 预约：大图背景 */
.contact--image { position: relative; isolation: isolate; overflow: hidden; background: var(--color-brand); }
.contact__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.contact--image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-brand-active) 92%, transparent), color-mix(in oklch, var(--color-brand-active) 55%, transparent));
}
.contact--image h2 { color: var(--color-on-brand); }
.contact--image .contact__copy p { color: var(--color-on-brand-muted); }
.contact--image .contact__copy .contact__mail { color: var(--color-on-brand); }
.contact--image .contact__mail a { color: var(--color-accent); }
.contact--image .contact__copy :focus-visible { outline-color: var(--color-focus-on-dark); }
.contact--image .form { box-shadow: 0 30px 70px -30px color-mix(in oklch, var(--color-brand-active) 80%, transparent); }

/* 概念图需要更宽：首屏图文各占一半，流程四个节点保持一行 */
@media (min-width: 60rem) {
  .hero--image .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* 关于帆旅数科：深蓝实底版本，左文右图 */

.about__main .about__principles { margin-top: var(--space-2xl); }
@media (min-width: 60rem) {
  .about__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
  
}
/* 关于帆旅数科（第二版）：上排左文右图垂直居中，下排合作原则通栏 */
.about__lead { margin-top: var(--space-md); max-width: 34em; }
.about__points { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.about__point { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.about__point-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-ok-bg); color: var(--color-ok-fg); }
.about__point h3 { font-size: 1.125rem; line-height: 1.4; }
.about__point p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: 1rem; }
@media (min-width: 60rem) {
  .about__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
  
}

.principles { margin-top: var(--space-3xl); padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-panel); }
.principles h3 { font-size: 1.25rem; }
.principles__list { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0 0; padding: 0; list-style: none; counter-reset: principle; }
.principles__list li { counter-increment: principle; padding-top: var(--space-sm); border-top: 2px solid var(--color-brand); font-size: 1rem; }
.principles__list li::before { content: counter(principle, decimal-leading-zero); display: block; margin-bottom: var(--space-2xs); color: var(--color-link); font-size: var(--text-aux); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .principles { padding: var(--space-xl) var(--space-2xl); } .principles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .principles__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ==========================================================
   FADP 平台星系图：中心平台、业务流程环（智能体 + 人工确认）、
   外围大模型 / 企业知识库 / 业务系统 / 业务人员，光束与光点表示数据往来
   ========================================================== */
.orbit {
  container-type: inline-size;
  margin: 0; padding: var(--space-lg) var(--space-md) var(--space-md);
  background: color-mix(in oklch, var(--color-brand-active) 66%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-on-brand) 16%, transparent); border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px -30px color-mix(in oklch, var(--color-brand-active) 80%, transparent);
  color: var(--color-on-brand);
}
.orbit--solid { background: var(--color-brand-active); border-color: var(--color-brand-active); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 70px -44px var(--color-shadow); }
.orbit__head { display: grid; gap: 4px; text-align: center; }
.orbit__title { font-size: 1.0625rem; font-weight: 600; }
.orbit__en { color: var(--color-accent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.orbit__stage { position: relative; aspect-ratio: 560 / 520; margin-top: var(--space-sm); }
.orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* 网页文字层：不随图形缩小 */
.orbit__core-name {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding-left: 0.1em; font-size: 1.625rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1;
}
.orbit__lbl {
  position: absolute; padding: 2px 8px; white-space: nowrap;
  background: color-mix(in oklch, var(--color-brand-active) 80%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent); border-radius: var(--radius-tag);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.orbit__lbl--top { left: 50%; top: 15.4%; transform: translate(-50%, -50%); }
.orbit__lbl--right { left: 79.6%; top: 50%; transform: translateY(-50%); }
.orbit__lbl--bottom { left: 50%; top: 84.6%; transform: translate(-50%, -50%); }
.orbit__lbl--left { right: 79.6%; top: 50%; transform: translateY(-50%); }
.orbit__lbl--human { background: var(--color-highlight); border-color: var(--color-highlight); color: var(--color-ink); }
.orbit__sat {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center;
  padding: 6px 10px; white-space: nowrap;
  background: color-mix(in oklch, var(--color-brand-active) 86%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-accent) 50%, transparent); border-radius: var(--radius-control);
}
.orbit__sat .icon { grid-row: span 2; width: 18px; height: 18px; color: var(--color-accent); }
.orbit__sat b { font-size: 0.8125rem; font-weight: 600; line-height: 1.35; }
.orbit__sat small { color: var(--color-on-brand-muted); font-size: 0.6875rem; line-height: 1.35; }
.orbit__sat--human { border-color: color-mix(in oklch, var(--color-highlight) 70%, transparent); }
.orbit__sat--human .icon { color: var(--color-highlight); }
.orbit__sat--tl { left: 22.86%; top: 20.77%; }
.orbit__sat--tr { left: 77.14%; top: 20.77%; }
.orbit__sat--br { left: 77.14%; top: 79.23%; }
.orbit__sat--bl { left: 22.86%; top: 79.23%; }
.orbit__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md); margin: var(--space-sm) 0 0; color: var(--color-on-brand-muted); font-size: 0.75rem; }
.orbit__legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg { display: inline-block; width: 10px; height: 10px; }
.lg--agent { background: var(--color-accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lg--human { background: var(--color-highlight); border-radius: 50%; }
.lg--ring { border: 2px solid var(--color-accent); border-radius: 50%; }
.lg--beam { width: 14px; height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent)); }

/* 窄时缩小文字、隐藏卫星节点的副标题 */
@container (max-width: 420px) {
  .orbit__core-name { font-size: 1.25rem; }
  .orbit__lbl { padding: 1px 6px; font-size: 0.75rem; }
  .orbit__sat { padding: 4px 7px; column-gap: 4px; }
  .orbit__sat small { display: none; }
  .orbit__sat .icon { grid-row: auto; width: 14px; height: 14px; }
  .orbit__sat b { font-size: 0.75rem; }
}

/* SVG 图形层 */
.o-dot { fill: color-mix(in oklch, var(--color-on-brand) 18%, transparent); }
.o-glow-0 { stop-color: var(--color-accent); stop-opacity: 0.32; }
.o-glow-1 { stop-color: var(--color-accent); stop-opacity: 0; }
.o-ring { fill: none; stroke: color-mix(in oklch, var(--color-on-brand) 24%, transparent); stroke-width: 1.5; }
.o-ring-dash { fill: none; stroke: color-mix(in oklch, var(--color-accent) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 7; }
.o-spoke { stroke: color-mix(in oklch, var(--color-accent) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.o-beam { stroke-width: 1.5; }
.o-beam-0 { stop-color: var(--color-accent); stop-opacity: 0.08; }
.o-beam-1 { stop-color: var(--color-accent); stop-opacity: 0.8; }
.o-human-stop { stop-color: var(--color-highlight); }
.o-particle { fill: var(--color-accent); }
.o-particle--human { fill: var(--color-highlight); }
.o-comet-tail { fill: none; stroke: var(--color-accent); stroke-opacity: 0.25; stroke-width: 7; stroke-linecap: round; }
.o-comet { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; }
.o-comet-head { fill: var(--color-on-brand); }
.o-ring-text { fill: color-mix(in oklch, var(--color-accent) 70%, transparent); font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 3.2px; }
.o-core-halo { fill: none; stroke: color-mix(in oklch, var(--color-accent) 30%, transparent); stroke-width: 1; }
.o-core { fill: var(--color-brand); stroke: var(--color-accent); stroke-width: 2; }
.o-core-inner { fill: none; stroke: color-mix(in oklch, var(--color-accent) 28%, transparent); stroke-width: 1; }
.o-agent { fill: var(--color-brand-active); stroke: var(--color-accent); stroke-width: 1.5; }
.o-human { fill: var(--color-highlight); }
.o-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.o-icon--agent { color: var(--color-accent); }
.o-icon--human { color: var(--color-ink); }
.o-ping { fill: none; stroke: var(--color-accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.o-ping--human { stroke: var(--color-highlight); }

/* 环境动效：流程光环转动、文字环慢转、站点脉冲、中心呼吸 */
@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes o-breathe { 50% { opacity: 0.55; } }
.o-spin, .o-spin-rev, .o-spin-slow { transform-origin: 280px 260px; }
.o-spin { animation: o-spin 9s linear infinite; }
.o-spin-rev { animation: o-spin 90s linear infinite reverse; }
.o-spin-slow { animation: o-spin 60s linear infinite; }
.o-ping { animation: o-ping 3s var(--ease-out) infinite; }
.o-glow { animation: o-breathe 5s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) {
  .o-spin, .o-spin-rev, .o-spin-slow, .o-ping, .o-glow { animation: none !important; }
  .o-ping { opacity: 0; }
}
/* 首屏的星系图控制尺寸，首屏尽量一屏放下 */
@media (min-width: 60rem) { .hero--image .orbit { width: 100%; max-width: 520px; justify-self: end; } }
/* 极窄屏：隐藏环上的工位标签，由图例说明；面板内边距收窄 */
@media (max-width: 22.5rem) { .orbit { padding-inline: var(--space-xs); } }
@container (max-width: 300px) {
  .orbit__lbl { display: none; }
}

/* 隐私说明等长文页面 */
.doc { padding-bottom: var(--space-4xl); }
.doc__meta { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-aux); }
.doc__body { max-width: 760px; }
.doc__body h2 { margin-top: var(--space-2xl); font-size: 1.25rem; line-height: var(--leading-h3); }
.doc__body p, .doc__body ul { margin-top: var(--space-sm); }
.doc__body ul { padding-left: 1.25em; }
.doc__body li + li { margin-top: var(--space-2xs); }


/* 对话式交互：站点旁交替浮出的对话气泡 */
.o-chat-box { fill: var(--color-brand-active); stroke: var(--color-accent); stroke-width: 1.2; }
.o-chat-tail { fill: var(--color-accent); }
.o-chat--b .o-chat-box { stroke: var(--color-highlight); }
.o-chat--b .o-chat-tail { fill: var(--color-highlight); }
.o-chat-dot { fill: var(--color-on-brand); }
@keyframes o-chat { 0%, 100% { opacity: 0; } 8%, 44% { opacity: 1; } 52% { opacity: 0; } }
@keyframes o-typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.o-chat { opacity: 0; animation: o-chat 6s var(--ease-in-out) infinite; }
.o-chat--b { animation-delay: 3s; }
.o-chat-dot { animation: o-typing 1.4s var(--ease-in-out) infinite; }
.o-chat-dot--2 { animation-delay: 0.2s; }
.o-chat-dot--3 { animation-delay: 0.4s; }
.lg--chat { width: 12px; height: 9px; border: 1.5px solid var(--color-accent); border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .o-chat, .o-chat-dot { animation: none !important; opacity: 1; }
}

/* ---------- 页脚：上层品牌与信息，下层版权与备案 ---------- */
.foot { padding-block: var(--space-2xl) var(--space-lg); border-top: 1px solid var(--color-rule); background: var(--color-paper); }
.foot__top { display: grid; gap: var(--space-xl); }
.foot__brand img { width: 240px; margin: -10px 0 0 -12px; }
.foot__tagline { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-aux); }
.foot__info { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-3xl); margin: 0; }
.foot__info dt { color: var(--color-muted); font-size: var(--text-aux); }
.foot__info dd { margin: var(--space-2xs) 0 0; font-size: 1rem; }
.foot__info a { white-space: nowrap; }
.foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule);
  color: var(--color-muted); font-size: var(--text-aux); line-height: var(--leading-aux);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__legal a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.foot__legal a:hover, .foot__legal a[aria-current="page"] { color: var(--color-link); text-decoration: underline; }
@media (min-width: 48rem) {
  .foot__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* 首屏能力支柱：按钮下方，三列并排，窄屏单列 */
.hero__pillars {
  display: grid; gap: var(--space-md); margin: var(--space-2xl) 0 0; padding: var(--space-lg) 0 0; list-style: none;
  border-top: 1px solid var(--color-brand-raised);
}
.hero__pillars li { display: grid; gap: var(--space-2xs); align-content: start; }
.hero__pillars b { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-on-brand); font-size: 1rem; font-weight: 600; }
.hero__pillars b::before { content: ""; flex: none; width: 3px; height: 1em; border-radius: 2px; background: var(--color-accent); }
.hero__pillars span { color: var(--color-on-brand-muted); font-size: var(--text-aux); line-height: var(--leading-aux); }
@media (min-width: 40rem) { .hero__pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }