:root {
  --bg: #eef6f5;
  --bg-alt: #dff0ee;
  --surface: #ffffff;
  --ink: #102826;
  --muted: #3d5a56;
  --fog: #254540;
  --line: #b8d4d0;
  --line-soft: #d4e8e5;
  --accent: #0abab5;
  --accent-deep: #067a76;
  --accent-dark: #0e6e6a;
  --accent-soft: rgba(10, 186, 181, .14);
  --ok: #0d8a5f;
  --warn: #c45c2a;
  --gold: #c99a12;
  --shadow: 0 12px 28px rgba(16, 40, 38, .08);
  --shadow-sm: 0 2px 8px rgba(16, 40, 38, .05);
  --shadow-lg: 0 28px 64px rgba(16, 40, 38, .16);
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --wrap: 1180px;
  /* 字号标度：与后台 app.css 保持一致 */
  --fs: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;
  --fs-md: 14px;
  --fs-h: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-title: 20px;
  --fs-kpi: 22px;
  --fs-hero: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(10, 186, 181, .12), transparent 55%),
    linear-gradient(180deg, #f4fbfa 0%, var(--bg) 40%, #e8f4f2 100%);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.25; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: .1em .35em;
  border-radius: 6px;
  word-break: break-all;
}
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: min(var(--wrap), calc(100% - 40px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 700;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

section { padding: 78px 0; scroll-margin-top: 84px; }

/* ================= 头部 ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  background: rgba(246, 252, 251, .92);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.site-header.is-stuck {
  border-color: var(--line);
  box-shadow: 0 6px 22px rgba(16, 40, 38, .07);
  background: rgba(255, 255, 255, .96);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px rgba(6, 122, 118, .28);
}
.brand-text strong { display: block; font-size: var(--fs-h); letter-spacing: -.01em; }
.brand-text em {
  display: block;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  color: var(--fog);
  font-size: var(--fs-md);
  font-weight: 600;
}
.nav-item { display: block; }
.nav-item__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 9px;
  transition: color .16s, background .16s;
}
.nav-item__link:hover { color: var(--accent-deep); background: rgba(10, 186, 181, .08); }
.nav-caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .55;
  transition: transform .18s;
}
.nav-item--panel:hover .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-item__more { display: none; }

.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 70;
  width: 862px;
  max-width: calc(100vw - 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-panel--right { left: 50%; right: auto; }
.nav-item--panel:hover > .nav-panel,
.nav-item--panel:focus-within > .nav-panel,
.nav-item--panel.is-open > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-panel__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
}
.nav-panel__links { display: grid; gap: 1px; align-content: start; }
.nav-panel__links a {
  display: block;
  padding: 8px 11px;
  border-radius: 10px;
  transition: background .16s;
}
.nav-panel__links a:hover { background: #f2faf9; }
.nav-panel__links strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 700;
}
.nav-panel__links em {
  display: block;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}
.nav-panel__links a:hover strong { color: var(--accent-deep); }
.nav-panel__feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f2faf9, #e9f6f4);
  border: 1px solid var(--line-soft);
}
.nav-panel__feature img {
  width: 100%;
  height: 152px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 4px;
}
.nav-panel__feature strong { font-size: var(--fs-md); color: var(--ink); }
.nav-panel__feature em {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}
.nav-panel__cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-deep);
}
.nav-panel__feature:hover .nav-panel__cta { color: var(--accent-dark); }

.header-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--fs); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 22px rgba(10, 186, 181, .28); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost, .btn-ghost-ink { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover, .btn-ghost-ink:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-login { background: var(--accent-dark); color: #fff; }
.btn-login:hover { background: #08504d; }

/* ================= 首屏 ================= */
.hero { padding: 54px 0 66px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 52px;
  align-items: center;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--accent-deep);
  letter-spacing: .16em;
  font-size: var(--fs-xs);
  font-weight: 800;
}
.hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -.035em;
  line-height: 1.08;
}
.hero-sub {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 700;
  color: var(--accent-dark);
}
.lead {
  margin: 0 0 26px;
  color: var(--fog);
  font-size: var(--fs-lg);
  line-height: 1.75;
  max-width: 34em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-facts div { min-width: 0; }
.hero-facts dt { font-size: var(--fs-sm); color: var(--muted); }
.hero-facts dd {
  margin: 2px 0 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: -.02em;
}
.hero-facts dd small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

.hero-media { position: relative; }
.hero-photo {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.hero-photo img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.hero-photo figcaption {
  padding: 11px 16px;
  font-size: var(--fs-sm);
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line-soft);
}
.hero-float {
  position: absolute;
  left: -26px;
  bottom: 58px;
  width: 208px;
  padding: 14px 16px;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft);
  animation: floaty 5s ease-in-out infinite;
}
.hero-float__tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: 6px;
}
.hero-float strong { display: block; font-size: var(--fs-title); color: var(--accent-dark); }
.hero-float small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ================= 通用区块头 ================= */
.section-head { margin-bottom: 34px; max-width: 46em; }
.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.02em;
}
.section-head p { margin: 0; color: var(--fog); font-size: var(--fs-md); line-height: 1.7; }

/* ================= 场景 ================= */
.scenes { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.scene-card {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.scene-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.scene-card--wide { grid-column: span 1; }
.scene-card img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.scene-card figcaption { padding: 14px 16px 16px; }
.scene-card figcaption strong { display: block; font-size: var(--fs-h); margin-bottom: 4px; }
.scene-card figcaption span { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* ================= 核心能力 ================= */
.caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cap {
  padding: 20px 20px 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease;
}
.cap:hover { transform: translateY(-3px); border-color: var(--accent); }
.cap-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.cap h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.cap p { margin: 0; color: var(--muted); font-size: var(--fs); line-height: 1.7; }

/* ================= 业务主线 ================= */
.flow { background: linear-gradient(180deg, #e8f4f2, var(--bg) 72%); }
.flow-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.flow-step {
  position: relative;
  padding: 18px 16px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.flow-step::after {
  content: "›";
  position: absolute;
  right: -11px;
  top: 20px;
  font-size: 20px;
  font-weight: 800;
  color: var(--line);
  z-index: 2;
}
.flow-step--last::after { display: none; }
.flow-step__n {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.flow-step h3 { margin: 0 0 2px; font-size: var(--fs-lg); }
.flow-step__sub { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-deep); }
.flow-step p:last-child { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }
.flow-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.flow-links__box {
  padding: 20px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
}
.flow-links__box h3 { margin: 0 0 8px; font-size: var(--fs-md); color: var(--accent-deep); }
.flow-links__box p { margin: 0; font-size: var(--fs); color: var(--muted); line-height: 1.7; }

/* ================= 业务模型 ================= */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.model {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.model header {
  padding: 20px 22px 18px;
  background: linear-gradient(160deg, #123c39, #0a2a28);
  color: #e9fffc;
}
.model--accent header { background: linear-gradient(160deg, var(--accent-dark), #084c48); }
.model header h3 { margin: 0 0 4px; font-size: var(--fs-title); color: #fff; }
.model header p { margin: 0; font-size: var(--fs-sm); color: #9fc9c4; }
.model ul { padding: 18px 22px 22px; display: grid; gap: 10px; }
.model li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs);
  color: var(--fog);
  line-height: 1.6;
}
.model li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.models-note {
  margin: 20px 0 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid #9fd9d4;
  color: var(--accent-dark);
  font-size: var(--fs-md);
  font-weight: 600;
}

/* ================= 功能全景 ================= */
.features { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: -10px 0 26px;
  color: var(--muted);
  font-size: var(--fs-md);
}
.feat-meta b { color: var(--accent-deep); margin-right: 3px; font-size: var(--fs-lg); }
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feat-group {
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f8fcfb, #fff);
}
.feat-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.feat-group__head h3 { margin: 0; font-size: var(--fs-h); }
.feat-group__count {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.feat-group__list { display: grid; gap: 11px; }
.feat-group__list li { position: relative; padding-left: 18px; }
.feat-group__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.feat-group__list span { display: block; font-size: var(--fs); font-weight: 700; color: var(--ink); }
.feat-group__list em {
  display: block;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  margin-top: 1px;
}
.feat-group__sub {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.feat-group__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.feat-group__chips li {
  padding: 4px 9px;
  border-radius: 7px;
  background: #eef7f5;
  border: 1px solid #dcefec;
  color: var(--fog);
  font-size: var(--fs-sm);
  line-height: 1.45;
  cursor: default;
  transition: background .15s, color .15s, border-color .15s;
}
.feat-group__chips li:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
.feat-picks {
  margin-top: 26px;
  padding: 24px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}
.feat-picks__title { margin: 0 0 16px; font-size: var(--fs-title); }
.feat-picks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.feat-picks article {
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fcfb, #fff);
  border: 1px solid var(--line);
}
.feat-picks h4 { margin: 0 0 6px; font-size: var(--fs-h); }
.feat-picks p { margin: 0 0 8px; color: var(--fog); font-size: var(--fs-sm); line-height: 1.65; }
.feat-picks__meta { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.features-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 26px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e8f7f5, #f6fcfb);
  border: 1px solid #9fd9d4;
}
.features-foot p { margin: 0; color: var(--fog); font-size: var(--fs-md); }

/* ================= 单机核算 ================= */
.costing { background: linear-gradient(180deg, var(--bg), #e6f3f1 70%); }
.formula {
  margin: 0 0 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #102826, #0b3a37);
  color: #eafffd;
  font-size: clamp(14px, 1.7vw, 19px);
  font-weight: 700;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.6;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.metric {
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.metric--hi { background: linear-gradient(160deg, #eefbf9, #fff); border-color: #9fd9d4; }
.metric span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.metric b { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--accent-dark); letter-spacing: -.02em; }
.metric small { margin-left: 3px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cost-box {
  padding: 22px 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
}
.cost-box--alt { background: linear-gradient(180deg, #f2fbfa, #fff); border-color: #9fd9d4; }
.cost-box h3 { margin: 0 0 12px; font-size: var(--fs-lg); }
.cost-box ul { display: grid; gap: 9px; }
.cost-box li { font-size: var(--fs); color: var(--muted); line-height: 1.65; padding-left: 16px; position: relative; }
.cost-box li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cost-box li b { color: var(--ink); }
.cost-note { margin: 14px 0 0; font-size: var(--fs-xs); color: #6b7c78; }

/* ================= 演示路径 ================= */
.path-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.step {
  display: block;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .2s;
}
.step:hover { border-color: var(--accent); transform: translateY(-2px); }
.step-n {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: var(--fs-sm);
  font-weight: 800;
  margin-bottom: 12px;
}
.step h3 { margin: 0 0 6px; font-size: var(--fs-lg); }
.step p { margin: 0; color: var(--muted); font-size: var(--fs); line-height: 1.6; }

/* ================= 角色 ================= */
.roles-section { background: #fff; border-top: 1px solid var(--line-soft); }
.roles-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role {
  display: block;
  padding: 16px 18px;
  border-radius: 14px;
  background: #102826;
  color: #e8fffc;
  border: 1px solid transparent;
  transition: transform .18s, border-color .18s;
}
.role:hover { transform: translateY(-2px); border-color: var(--accent); }
.role strong { display: block; font-size: var(--fs-md); }
.role code {
  display: block;
  background: transparent;
  color: #7ee8e2;
  padding: 0;
  margin: 2px 0 6px;
  font-size: var(--fs-sm);
}
.role span { font-size: var(--fs-sm); color: #9bb8b4; line-height: 1.55; }
.role__scope {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(126, 232, 226, .18);
  color: #7ee8e2;
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: .01em;
}
.qr-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  align-content: center;
}
.qr-duo figure { margin: 0; text-align: center; }
.qr-duo img, .qr-duo .qr-inline { margin: 0 auto 8px; border-radius: 12px; }
.qr-duo figcaption { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.qr-duo__hint {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}

/* ================= 移动端 ================= */
.mobile { background: linear-gradient(180deg, #e8f4f2, var(--bg) 72%); }
.mobile-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.mobile-photo { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.mobile-photo img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.mobile-photo figcaption { padding: 12px 16px; font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--line-soft); }
.mobile-list { display: grid; gap: 10px; }
.mobile-list li {
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.mobile-list strong { display: inline-block; min-width: 5.5em; font-size: var(--fs); color: var(--accent-deep); }
.mobile-list span { font-size: var(--fs); color: var(--muted); }

/* ================= 下载中心 ================= */
.downloads { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.dl-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.dl-card--accent { background: linear-gradient(180deg, #f2fbfa, #fff); border-color: #9fd9d4; }
.dl-badge {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.dl-badge--xls { background: #e6f6ef; color: #147a52; }
.dl-badge--ppt { background: #fdeee7; color: #b8481f; }
.dl-badge--doc { background: #e9f0fb; color: #25519c; }
.dl-card h3 { margin: 0 0 8px; font-size: var(--fs-title); }
.dl-card > p { margin: 0 0 16px; color: var(--muted); font-size: var(--fs); line-height: 1.7; }
.dl-meta { margin: 0 0 18px; display: grid; gap: 6px; }
.dl-meta div { display: flex; gap: 8px; font-size: var(--fs-sm); }
.dl-meta dt { flex: none; width: 3em; color: #8aa5a0; }
.dl-meta dd { margin: 0; color: var(--fog); }
.dl-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-md);
  transition: background .18s, transform .18s;
}
.dl-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.dl-btn span { font-size: var(--fs-lg); }
.dl-note { margin: 20px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.8; }
.dl-note a { color: var(--accent-deep); font-weight: 600; }

/* ================= 能力边界 ================= */
.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bound { padding: 24px 26px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.bound--ok { border-color: #9fd9d4; background: linear-gradient(180deg, #eefaf8, #fff); }
.bound--plan { border-color: #e7d2c4; background: linear-gradient(180deg, #fff8f3, #fff); }
.bound h3 { margin: 0 0 14px; font-size: var(--fs-lg); }
.bound--plan h3 { color: var(--warn); }
.bound ul { display: grid; gap: 9px; }
.bound li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-md);
  color: var(--fog);
  line-height: 1.65;
}
.bound--ok li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(42deg);
}
.bound--plan li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #d08a5f;
}
.bound-note { margin: 16px 0 0; font-size: var(--fs-sm); color: #8a6a55; }

/* ================= FAQ ================= */
.faq-list { display: grid; gap: 10px; max-width: 60em; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0 18px;
  transition: border-color .18s;
}
.faq-list details[open] { border-color: #9fd9d4; }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 26px 15px 0;
  font-weight: 700;
  font-size: var(--fs-md);
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 18px;
  font-weight: 400;
  color: var(--accent-deep);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] summary { color: var(--accent-deep); }
.faq-list p { margin: 0 0 16px; color: var(--fog); font-size: var(--fs-md); line-height: 1.75; }

/* ================= 预约 ================= */
.demo-section { background: #fff; border-top: 1px solid var(--line-soft); }
.demo-with-qr { display: grid; grid-template-columns: 1.5fr .8fr; gap: 18px; align-items: stretch; }
.consult-cta {
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f4fbfa, #fff);
}
.consult-cta p { margin: 0 0 16px; color: var(--fog); font-size: var(--fs-md); line-height: 1.7; }
.demo-hint { display: block; margin-top: 12px; font-size: var(--fs); color: var(--muted); }
.demo-hint a { color: var(--accent-deep); font-weight: 700; }
.demo-qr-card {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #102826;
  color: #e8fffc;
  text-align: center;
}
.demo-qr-card img { border-radius: 12px; background: #fff; padding: 8px; }
.demo-qr-card strong { font-size: var(--fs-h); }
.demo-qr-card small { color: #9bb8b4; }

/* ================= 关于 ================= */
.about { background: linear-gradient(180deg, #e8f4f2, var(--bg)); }
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; }
.about h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.about-lead { margin: 0 0 20px; color: var(--fog); font-size: var(--fs-md); line-height: 1.8; }
.about-list { display: grid; gap: 12px; }
.about-list li {
  padding-left: 18px;
  position: relative;
  font-size: var(--fs);
  color: var(--muted);
  line-height: 1.7;
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.about-list strong { color: var(--ink); }
.about-figure { margin: 0; }
.about-figure img { width: 100%; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.about-figure p { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ================= 联系 ================= */
.contact { background: #fff; border-top: 1px solid var(--line-soft); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-card {
  padding: 26px 28px;
  border-radius: 18px;
  background: #102826;
  color: #e8fffc;
}
.contact-card--alt { background: linear-gradient(160deg, #f2fbfa, #fff); color: var(--ink); border: 1px solid var(--line); }
.contact-card h3 { margin: 0 0 10px; font-size: var(--fs-lg); }
.contact-phone { margin: 0; }
.contact-phone a { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: #7ee8e2; letter-spacing: .01em; }
.contact-sub { margin: 2px 0 16px; font-size: var(--fs-sm); color: #9bb8b4; }
.contact-meta { margin: 0; display: grid; gap: 8px; }
.contact-meta div { display: flex; gap: 10px; font-size: var(--fs); }
.contact-meta dt { flex: none; width: 4.5em; color: #8fb5b0; }
.contact-meta dd { margin: 0; color: #d7ece9; word-break: break-all; }
.contact-card--alt p { margin: 0 0 18px; color: var(--fog); font-size: var(--fs-md); line-height: 1.7; }
.contact-downloads { display: grid; gap: 10px; }
.contact-downloads a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-dark);
  transition: border-color .18s, transform .18s;
}
.contact-downloads a::after { content: "↓"; color: var(--accent); }
.contact-downloads a:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ================= 页脚（对齐 zhubao.zerocod.cn 布局） ================= */
.site-footer {
  position: relative;
  margin-top: 0;
  padding: 0;
  background: linear-gradient(180deg, #0a1c1a 0%, #05100f 100%);
  color: #e8eaed;
}
.footer-top-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10, 186, 181, .55), transparent);
}
.footer-shell { padding: 34px 0 22px; }
.footer-main {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 236px;
  gap: 26px 42px;
  align-items: start;
}
.footer-brand-col { display: flex; flex-direction: column; gap: 12px; }
.footer-logo-link { display: flex; align-items: center; gap: 10px; }
.footer-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .04em;
}
.footer-logo-copy strong { display: block; color: #fff; font-size: var(--fs-lg); letter-spacing: -.01em; }
.footer-logo-copy em { display: block; font-style: normal; font-size: var(--fs-xs); color: #7f909c; }
.footer-slogan {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.7;
  color: #8b95a8;
  max-width: 20em;
}
.footer-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #05100f;
  font-size: 12.5px;
  font-weight: 800;
  transition: background .18s, transform .18s;
}
.footer-cta:hover { background: #35d5cf; transform: translateY(-1px); }

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
}
.footer-col h4 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #7ee8e2;
}
.footer-col-list { display: grid; gap: 1px; }
.footer-col-list a {
  display: block;
  padding: 3px 0;
  font-size: 12.8px;
  color: #8b95a8;
  transition: color .16s;
}
.footer-col-list a:hover { color: #7ee8e2; }

.footer-qr-col { justify-self: end; width: 100%; max-width: 236px; }
.footer-qr-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.footer-qr-figure img { width: 96px; height: 96px; border-radius: 8px; background: #fff; padding: 5px; }
.footer-qr-figure figcaption strong { display: block; color: #fff; font-size: 12.5px; }
.footer-qr-figure figcaption span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.6; color: #8b95a8; }

.footer-trust-bar {
  padding: 16px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.footer-trust-line {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #8b95a8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.footer-trust-line strong { color: #e8eaed; letter-spacing: .04em; }
.footer-trust-sep { color: rgba(255, 255, 255, .22); }
.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.footer-trust-badges li {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(10, 186, 181, .12);
  border: 1px solid rgba(10, 186, 181, .26);
  color: #8de8e3;
  font-size: 11.5px;
}
.footer-trust-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8b95a8;
}
.footer-trust-meta a { color: #8b95a8; transition: color .16s; }
.footer-trust-meta a:hover { color: #7ee8e2; }
.footer-bottom {
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.footer-copyright { margin: 0; font-size: 11.5px; line-height: 1.7; color: #8b95a8; }

/* ================= 浮动按钮 ================= */
.float-consult {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 50;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #05100f;
  font-weight: 800;
  font-size: var(--fs-md);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(10, 186, 181, .35);
  transition: background .18s, transform .18s;
}
.float-consult:hover { background: #35d5cf; transform: translateY(-2px); }

/* ================= 响应式 ================= */
@media (max-width: 1120px) {
  .nav-item__link { padding: 9px 9px; font-size: var(--fs); }
  .header-cta .btn-ghost { display: none; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-step::after { display: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 240px minmax(0, 1fr); }
  .footer-qr-col { grid-column: 1 / -1; justify-self: start; max-width: 320px; }
  .footer-qr-figure { flex-direction: row; align-items: center; }
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .header-cta { margin-left: 0; }
  .header-cta .btn-login { display: none; }

  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    z-index: 65;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 16px 22px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav-item { position: relative; border-bottom: 1px solid var(--line-soft); }
  .nav-item__link { padding: 14px 2px; font-size: var(--fs-md); }
  .nav-item__link .nav-caret { display: none; }
  .nav-item__more {
    display: grid;
    place-items: center;
    position: absolute;
    right: 0;
    top: 6px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .nav-panel {
    position: static;
    width: auto;
    max-width: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 14px;
  }
  .nav-item.is-open .nav-panel { display: block; }
  .nav-panel__card {
    grid-template-columns: 1fr;
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
  }
  .nav-panel__links a { padding: 9px 10px; background: #f6fbfa; margin-bottom: 4px; }
  .nav-panel__feature { display: none; }

  .hero-grid, .roles-layout, .demo-with-qr, .mobile-grid,
  .about-grid, .contact-grid, .cost-grid, .boundary-grid, .flow-links { grid-template-columns: 1fr; }
  .scene-grid, .model-grid, .feat-grid, .download-grid { grid-template-columns: 1fr 1fr; }
  .feat-picks__grid { grid-template-columns: 1fr 1fr; }
  .role-grid { grid-template-columns: 1fr 1fr; }
  .path-steps { grid-template-columns: 1fr 1fr; }
  .hero-float { left: auto; right: 12px; bottom: 12px; width: 190px; }
  .footer-main { grid-template-columns: 1fr; }

  .site-footer .wrap { padding-left: 0; padding-right: 0; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  section { padding: 58px 0; }
  .header-inner { min-height: 62px; }
  .brand-text em { display: none; }
  .hero { padding: 34px 0 46px; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .scene-grid, .model-grid, .feat-grid, .download-grid,
  .path-steps, .caps, .metric-grid, .role-grid, .qr-duo,
  .feat-picks__grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .hero-float { position: static; width: auto; margin-top: 12px; animation: none; }
  .footer-nav-grid { grid-template-columns: 1fr 1fr; }
  .footer-qr-figure { flex-direction: column; align-items: flex-start; }
  .float-consult { right: 12px; bottom: 14px; min-height: 40px; padding: 0 16px; font-size: var(--fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}