/* ============================================================================
   HospIQ 产品微站样式（/medical/product/ 及其 8 个模块子页共用）

   为什么单独一份而不是并进 style.css：
   HospIQ 在官网上是「产品」而不是「业态」，它有自己的品牌色（Ant 系的深蓝
   #001529 / #1677ff）和更密的信息密度；并进全站 style.css 会让两套色板互相
   污染，也会把不相关页面的首屏 CSS 撑大。因此它是独立主题，但这 9 个页面
   之间共用本文件——比每页内联一份强，也比各写各的强。

   约束（改之前先看一眼）：
   - check_footer.py 断言本文件必须含 .footer-legal / .footer-contact 等
     页脚选择器；删了会把页脚闸打红。
   - check_layout.py 断言 main 直系子元素的左右边缘一致，所以每个 <section>
     都要通栏（背景铺满），宽度限制一律交给内部的 .hq-shell。
   - 不出现 .chapter / .scene-banner / .quote-band / .twin 这几个类名——
     那是全站版面闸的「同构节奏」分组，本主题不参与那条断言。
   ========================================================================= */

:root {
  --hq-navy: #001529;
  --hq-navy-2: #00284a;
  --hq-navy-3: #003a6b;
  --hq-blue: #1677ff;          /* 只用于大面积填充与描边，不用于白底上的文字 */
  --hq-blue-deep: #0958d9;     /* 白底上的蓝色文字/按钮底色：对白 6.16:1 */
  --hq-blue-hover: #0748b0;    /* 按钮 hover 用变深，不用变浅——变浅会把对比度压到 AA 以下 */
  --hq-cyan: #69b1ff;
  --hq-cyan-soft: #91d5ff;

  --hq-ink: #001529;
  --hq-ink-2: #47607a;         /* 正文次级：对白 6.51:1 */
  --hq-ink-3: #55698a;         /* 三级：对白 5.56:1 / 对 --hq-paper 5.13:1 */
  --hq-muted: #5b7089;         /* 注释与元信息：对白 5.18:1 / 对 --hq-paper 4.77:1 */

  /* 说明：这一组灰是 2026-09 按 WCAG AA（正文 4.5:1）重新标定的。
     原来 --hq-muted #8a9bb0 对白只有 2.84:1、--hq-ink-3 #6b8098 只有 4.06:1，
     都不到 AA；截图外框上的 URL、模块卡的状态说明、表格里的链接全踩了这一条。
     改色时请用 scripts/_tmp_hq_render_audit.py 复跑一遍，它会逐条算对比度。 */
  --hq-paper: #f2f6fb;
  --hq-paper-2: #e8eff8;
  --hq-white: #fff;
  --hq-line: rgba(0, 21, 41, 0.1);
  --hq-line-soft: rgba(0, 21, 41, 0.06);
  --hq-line-dark: rgba(255, 255, 255, 0.13);

  --hq-en: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  --hq-cn: "Noto Sans SC", "Plus Jakarta Sans", sans-serif;

  --hq-shell: min(1120px, calc(100% - 2.5rem));
  --hq-sec: clamp(3.25rem, 6vw, 5.25rem);
  --hq-radius: 16px;
  --hq-shadow: 0 10px 30px rgba(0, 21, 41, 0.06);
  --hq-shadow-lg: 0 26px 60px rgba(0, 21, 41, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--hq-white);
  color: var(--hq-ink);
  font-family: var(--hq-cn);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

.hq-shell { width: var(--hq-shell); margin: 0 auto; }
.hq-skip {
  position: fixed; top: 0; left: 0; z-index: 400;
  padding: 0.6rem 1.05rem; background: var(--hq-navy); color: #e7eef0;
  font-size: 0.88rem; font-weight: 600; transform: translateY(-130%);
  transition: transform 0.16s ease-out;
}
.hq-skip:focus { transform: translateY(0); outline: 2px solid var(--hq-cyan); outline-offset: 2px; }

/* 屏幕阅读器专用 */
.hq-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 顶栏 */
.hq-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0, 21, 41, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hq-line-dark);
  color: #fff;
}
.hq-header__bar {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.15rem;
}
.hq-logo {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--hq-en); font-weight: 800; font-size: 1.2rem;
  letter-spacing: -0.02em; flex: 0 0 auto;
}
.hq-logo em { font-style: normal; color: var(--hq-cyan); }
.hq-logo span {
  font-family: var(--hq-cn); font-size: 0.78rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em;
}
.hq-nav {
  display: flex; align-items: center; gap: 0.1rem;
  margin-left: auto; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.hq-nav::-webkit-scrollbar { display: none; }
.hq-nav a {
  position: relative; flex: 0 0 auto;
  padding: 0.42rem 0.66rem; border-radius: 8px;
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s, background 0.18s;
}
.hq-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.hq-nav a[aria-current="page"] { color: #fff; }
.hq-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.66rem; right: 0.66rem; bottom: 0.1rem;
  height: 2px; border-radius: 2px; background: var(--hq-blue);
}
.hq-header__cta {
  flex: 0 0 auto; margin-left: 0.4rem;
  padding: 0.46rem 0.9rem; border-radius: 9px;
  font-size: 0.84rem; font-weight: 700;
  background: var(--hq-blue-deep); color: #fff !important;
  transition: background 0.18s;
}
.hq-header__cta:hover { background: var(--hq-blue-hover); }

/* 移动端抽屉：纯 CSS，checkbox 驱动，无 JS 也能用 */
.hq-nav-toggle { display: none; }
.hq-nav-toggle + label {
  display: none; margin-left: auto; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--hq-line-dark); border-radius: 9px;
  align-items: center; justify-content: center; cursor: pointer;
}
.hq-nav-toggle + label span,
.hq-nav-toggle + label span::before,
.hq-nav-toggle + label span::after {
  display: block; width: 1.05rem; height: 1.5px; background: #fff;
  content: ""; position: relative;
}
.hq-nav-toggle + label span::before { position: absolute; top: -5px; }
.hq-nav-toggle + label span::after { position: absolute; top: 5px; }

@media (max-width: 1040px) {
  .hq-header__bar { flex-wrap: wrap; padding: 0.55rem 0; }
  .hq-nav-toggle + label { display: flex; }
  .hq-nav {
    order: 3; width: 100%; margin-left: 0; flex-direction: column;
    align-items: stretch; gap: 0.1rem; overflow: visible;
    max-height: 0; overflow: hidden; transition: max-height 0.26s ease;
  }
  .hq-nav-toggle:checked ~ .hq-nav { max-height: 32rem; padding-bottom: 0.6rem; }
  .hq-nav a { padding: 0.6rem 0.7rem; font-size: 0.94rem; }
  .hq-nav a[aria-current="page"]::after { display: none; }
  .hq-nav a[aria-current="page"] { background: rgba(22, 119, 255, 0.22); }
  .hq-header__cta { order: 4; margin: 0 0 0.6rem; display: block; text-align: center; }
  .hq-nav-toggle:checked ~ .hq-header__cta { display: block; }
  .hq-header__cta { display: none; }
  .hq-nav-toggle:checked ~ .hq-header__cta { display: block; }
}

/* ---------------------------------------------------------------- 章节 */
.hq-sec { padding: var(--hq-sec) 0; }
.hq-sec--paper { background: var(--hq-paper); }
.hq-sec--white { background: var(--hq-white); }
.hq-sec--dark {
  background: var(--hq-navy);
  color: #fff;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
}
.hq-sec--dark .hq-lead { color: rgba(255, 255, 255, 0.62); }
.hq-sec--dark h2, .hq-sec--dark h3 { color: #fff; }
/* 深色段里的注释与其中的链接。
   踩过的坑：.hq-note 用的是 --hq-muted（针对浅底标定的灰），深底上只有
   3.62:1，不到 AA；链接又是 color: inherit，跟着一起糊。深底要单独给一套。 */
.hq-sec--dark .hq-note { color: rgba(255, 255, 255, 0.72); }
.hq-sec--dark .hq-note a { color: var(--hq-cyan-soft); }
.hq-sec--dark .hq-note a:hover { color: #fff; }
.hq-sec--dark .hq-note code { background: rgba(105, 177, 255, 0.16); color: var(--hq-cyan-soft); }

.hq-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.hq-head--wide { max-width: 54rem; }
.hq-kicker {
  margin: 0 0 0.55rem;
  font-family: var(--hq-en); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hq-blue-deep);
}
.hq-sec--dark .hq-kicker { color: var(--hq-cyan); }
.hq-head h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.5rem, 2.9vw, 2.05rem);
  font-weight: 800; line-height: 1.25; letter-spacing: -0.02em;
}
.hq-head h3 { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 800; }
.hq-lead {
  margin: 0; max-width: 44rem;
  font-size: 1rem; line-height: 1.85; color: var(--hq-ink-2);
}
.hq-lead + .hq-lead { margin-top: 0.7rem; }
.hq-note { margin: 1.1rem 0 0; font-size: 0.84rem; line-height: 1.75; color: var(--hq-muted); }
/* 注释里的链接：只在注释里补下划线，正文链接靠版式区分，不需要每处都划线 */
.hq-note a { color: var(--hq-blue-deep); text-decoration: underline; text-underline-offset: 0.18em; }
.hq-note a:hover { color: var(--hq-blue-hover); }
.hq-note code {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.86em;
  background: var(--hq-paper-2); border-radius: 4px; padding: 0.05em 0.35em;
}

/* 章节序号：编号 + 通栏细线 */
.hq-chap {
  display: flex; align-items: baseline; gap: 0.85rem;
  margin: 0 0 0.85rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--hq-line);
}
.hq-sec--dark .hq-chap { border-bottom-color: var(--hq-line-dark); }
.hq-chap__num {
  font-family: var(--hq-en); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; color: var(--hq-blue-deep);
}
.hq-sec--dark .hq-chap__num { color: var(--hq-cyan); }
.hq-chap__label { font-size: 0.86rem; font-weight: 700; color: var(--hq-ink-3); }
.hq-sec--dark .hq-chap__label { color: rgba(255, 255, 255, 0.55); }

/* ---------------------------------------------------------------- 按钮 */
.hq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.85rem; padding: 0 1.3rem; border-radius: 10px;
  font-size: 0.9rem; font-weight: 700; white-space: nowrap;
  transition: transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}
.hq-btn:hover { transform: translateY(-1px); }
.hq-btn--primary { background: var(--hq-blue-deep); color: #fff; box-shadow: 0 12px 26px rgba(22, 119, 255, 0.3); }
.hq-btn--primary:hover { background: var(--hq-blue-hover); }
.hq-btn--ghost { border: 1px solid var(--hq-line-dark); color: #fff; background: rgba(255, 255, 255, 0.07); }
.hq-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.hq-btn--line { border: 1px solid var(--hq-line); color: var(--hq-ink); background: var(--hq-white); }
.hq-btn--line:hover { border-color: var(--hq-cyan); color: var(--hq-blue-deep); }
.hq-btn--sm { min-height: 2.3rem; padding: 0 0.9rem; font-size: 0.83rem; border-radius: 9px; }
.hq-cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }

/* ---------------------------------------------------------------- Hero */
.hq-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--hq-navy); color: #fff;
}
.hq-hero__media {
  position: absolute; inset: 0; z-index: -2; transform: scale(1.03);
  background:
    linear-gradient(106deg, rgba(0, 21, 41, 0.95) 0%, rgba(0, 40, 74, 0.82) 54%, rgba(9, 88, 217, 0.5) 100%),
    url("https://p.zerocod.cn/hospiq/assets/modules/hero.jpg") center/cover no-repeat;
  animation: hq-ken 30s ease-in-out infinite alternate;
}
.hq-hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}
.hq-hero__body { padding: clamp(3rem, 8vh, 5.25rem) 0 clamp(2.75rem, 6vh, 4rem); }
.hq-hero--inner .hq-hero__body { padding: clamp(2.1rem, 5vh, 3.25rem) 0 clamp(2.25rem, 5vh, 3.25rem); }
.hq-brand {
  margin: 0 0 1rem; font-family: var(--hq-en); font-weight: 800;
  font-size: clamp(2.9rem, 8vw, 4.6rem); line-height: 0.94; letter-spacing: -0.035em;
}
.hq-brand em { font-style: normal; color: var(--hq-cyan); }
.hq-hero h1 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.26rem, 2.5vw, 1.7rem); font-weight: 700; line-height: 1.45;
}
.hq-hero__lead {
  margin: 0; max-width: 44rem;
  font-size: 1rem; line-height: 1.85; color: rgba(255, 255, 255, 0.7);
}
.hq-hero__lead strong { color: #fff; font-weight: 700; }

/* 面包屑（子页） */
.hq-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  margin: 0 0 1.35rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5);
}
.hq-crumb a:hover { color: var(--hq-cyan); }
.hq-crumb span { color: rgba(255, 255, 255, 0.28); }

/* 数字条 */
.hq-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 2.4rem 0 0;
  border-top: 1px solid var(--hq-line-dark);
}
.hq-stat { padding: 1.25rem 1.1rem 0 0; border-right: 1px solid var(--hq-line-dark); }
.hq-stat:last-child { border-right: 0; }
.hq-stat b {
  display: block; font-family: var(--hq-en); font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.05;
  letter-spacing: -0.03em; color: #fff;
}
.hq-stat b em { font-style: normal; font-size: 0.5em; font-weight: 700; color: var(--hq-cyan); margin-left: 0.15em; }
.hq-stat span { display: block; margin-top: 0.4rem; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); }

/* ---------------------------------------------------------------- 卡片组 */
.hq-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.hq-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hq-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hq-tile {
  background: var(--hq-white); border: 1px solid var(--hq-line);
  border-radius: var(--hq-radius); padding: 1.5rem 1.4rem 1.35rem;
}
.hq-sec--dark .hq-tile {
  background: rgba(255, 255, 255, 0.045); border-color: var(--hq-line-dark);
}
.hq-tile__no {
  display: block; margin-bottom: 0.7rem;
  font-family: var(--hq-en); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; color: var(--hq-blue-deep);
}
.hq-sec--dark .hq-tile__no { color: var(--hq-cyan); }
.hq-tile h3 { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.hq-tile p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: var(--hq-ink-2); }
.hq-sec--dark .hq-tile p { color: rgba(255, 255, 255, 0.62); }

/* 要点列表 */
.hq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hq-list li {
  position: relative; padding-left: 1rem;
  font-size: 0.9rem; line-height: 1.7; color: var(--hq-ink-2);
}
.hq-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62rem;
  width: 0.36rem; height: 0.36rem; border-radius: 50%; background: var(--hq-blue);
}
.hq-sec--dark .hq-list li { color: rgba(255, 255, 255, 0.66); }
.hq-sec--dark .hq-list li::before { background: var(--hq-cyan); }
.hq-list strong { color: var(--hq-ink); font-weight: 700; }
.hq-sec--dark .hq-list strong { color: #fff; }
.hq-list code {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.86em;
  background: var(--hq-paper-2); border-radius: 4px; padding: 0.05em 0.35em;
}
.hq-sec--dark .hq-list code { background: rgba(105, 177, 255, 0.16); color: var(--hq-cyan-soft); }

/* ---------------------------------------------------------------- 模块矩阵 */
.hq-group { margin-top: clamp(2rem, 4vw, 3rem); }
.hq-group:first-of-type { margin-top: 0; }
.hq-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
  margin-bottom: 1.15rem; padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--hq-ink);
}
.hq-group__head h3 { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; }
.hq-group__head span { font-size: 0.84rem; color: var(--hq-ink-3); }
.hq-group__count {
  margin-left: auto; font-family: var(--hq-en); font-size: 0.76rem;
  font-weight: 800; letter-spacing: 0.08em; color: var(--hq-blue-deep);
}
.hq-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.hq-mod {
  position: relative; display: flex; flex-direction: column;
  background: var(--hq-white); border: 1px solid var(--hq-line);
  border-radius: var(--hq-radius); padding: 1.4rem 1.35rem 1.3rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.hq-mod:hover { border-color: rgba(22, 119, 255, 0.4); box-shadow: var(--hq-shadow); }
.hq-mod__top { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.65rem; }
.hq-mod__icon {
  flex: 0 0 auto; width: 2.35rem; height: 2.35rem; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: var(--hq-paper-2);
}
.hq-mod__name { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; }
.hq-mod__meta { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--hq-muted); font-family: var(--hq-en); letter-spacing: 0.03em; }
.hq-mod__pos {
  margin: 0 0 0.85rem; font-size: 0.9rem; line-height: 1.75; color: var(--hq-ink-2);
}
.hq-mod .hq-list { margin-bottom: 1rem; }
.hq-mod .hq-list li { font-size: 0.86rem; }
.hq-mod__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--hq-line-soft);
}
.hq-roles { display: flex; flex-wrap: wrap; gap: 0.32rem; }
.hq-role {
  font-size: 0.73rem; padding: 0.14rem 0.5rem; border-radius: 999px;
  background: var(--hq-paper); color: var(--hq-ink-3); white-space: nowrap;
}
.hq-mod__more {
  margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--hq-blue-deep);
  white-space: nowrap;
}
.hq-mod__more:hover { color: var(--hq-blue-deep); }
.hq-mod__more::after { content: " →"; }

/* ---------------------------------------------------------------- 截图 */
.hq-shot {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hq-line); background: var(--hq-white);
  box-shadow: var(--hq-shadow);
}
/* 深色舞台上的截图卡：卡片必须跟着变深。
   踩过的坑：卡本身是 --hq-white，只把 figcaption 改成白色文字，就是白字白底
   （对比度 1.00:1，等于这行说明看不见）。卡片底色、地址栏、边框要一起翻深。 */
.hq-sec--dark .hq-shot {
  background: var(--hq-navy-2); border-color: var(--hq-line-dark); box-shadow: var(--hq-shadow-lg);
}
.hq-sec--dark .hq-shot__bar { background: var(--hq-navy-3); border-bottom-color: var(--hq-line-dark); }
.hq-sec--dark .hq-shot__bar i { background: rgba(255, 255, 255, 0.28); }
.hq-sec--dark .hq-shot__url { color: rgba(255, 255, 255, 0.72); }
.hq-shot__bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.7rem; background: var(--hq-paper);
  border-bottom: 1px solid var(--hq-line);
}
.hq-shot__bar i {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #cfd8e3; flex: 0 0 auto;
}
.hq-shot__bar i:nth-child(1) { background: #ff5f57; }
.hq-shot__bar i:nth-child(2) { background: #febc2e; }
.hq-shot__bar i:nth-child(3) { background: #28c840; }
.hq-shot__url {
  margin-left: 0.55rem; flex: 1 1 auto; min-width: 0;
  font-family: var(--hq-en); font-size: 0.68rem; color: var(--hq-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq-shot img { width: 100%; }
.hq-shot figcaption {
  padding: 0.7rem 0.9rem; font-size: 0.82rem; line-height: 1.6;
  color: var(--hq-ink-2); border-top: 1px solid var(--hq-line);
}
.hq-sec--dark .hq-shot figcaption { color: rgba(255, 255, 255, 0.62); border-top-color: var(--hq-line-dark); }

.hq-shots { display: grid; gap: 1.4rem; }
.hq-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hq-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 手机截图 */
.hq-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.hq-phone { margin: 0; text-align: center; }
.hq-phone img {
  width: 100%; max-width: 15rem; margin: 0 auto;
  border-radius: 20px; border: 1px solid var(--hq-line);
  box-shadow: var(--hq-shadow);
}
.hq-sec--dark .hq-phone img { border-color: var(--hq-line-dark); box-shadow: var(--hq-shadow-lg); }
.hq-phone figcaption { margin-top: 0.7rem; font-size: 0.83rem; color: var(--hq-ink-2); }
.hq-sec--dark .hq-phone figcaption { color: rgba(255, 255, 255, 0.62); }

/* 宽幅大屏 */
.hq-wide { margin: 0; }
.hq-wide img { width: 100%; border-radius: 12px; border: 1px solid var(--hq-line); box-shadow: var(--hq-shadow-lg); }
.hq-wide figcaption { margin-top: 0.8rem; font-size: 0.84rem; color: var(--hq-ink-2); }
.hq-sec--dark .hq-wide figcaption { color: rgba(255, 255, 255, 0.62); }

/* ---------------------------------------------------------------- 流程 */
.hq-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hq-flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hq-flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hq-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hq-flow > li {
  position: relative; padding: 1.4rem 1.1rem 0.4rem 0;
  border-top: 2px solid var(--hq-blue);
  border-right: 1px solid var(--hq-line);
}
.hq-flow > li:last-child { border-right: 0; padding-right: 0; }
.hq-sec--dark .hq-flow > li { border-right-color: var(--hq-line-dark); }
.hq-flow__n {
  display: block; margin-bottom: 0.55rem;
  font-family: var(--hq-en); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; color: var(--hq-blue-deep);
}
.hq-sec--dark .hq-flow__n { color: var(--hq-cyan); }
.hq-flow strong { display: block; margin-bottom: 0.35rem; font-size: 1rem; font-weight: 800; }
.hq-flow span { display: block; font-size: 0.87rem; line-height: 1.7; color: var(--hq-ink-2); }
.hq-sec--dark .hq-flow span { color: rgba(255, 255, 255, 0.62); }

/* ---------------------------------------------------------------- 表格 */
.hq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hq-table {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: 0.89rem; line-height: 1.65;
}
.hq-table th, .hq-table td {
  padding: 0.7rem 0.9rem; border: 1px solid var(--hq-line);
  text-align: left; vertical-align: top;
}
.hq-table th { background: var(--hq-paper); font-weight: 700; }
.hq-sec--dark .hq-table th { background: rgba(255, 255, 255, 0.07); }
.hq-sec--dark .hq-table th, .hq-sec--dark .hq-table td { border-color: var(--hq-line-dark); }
.hq-table a { color: var(--hq-blue-deep); border-bottom: 1px solid rgba(9, 88, 217, 0.25); }
.hq-table a:hover { color: var(--hq-blue-deep); }

/* ---------------------------------------------------------------- 底栏 CTA */
.hq-band {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hq-line-dark); border-radius: var(--hq-radius);
  background: rgba(255, 255, 255, 0.04);
}
.hq-band h2 { margin: 0 0 0.35rem; font-size: clamp(1.2rem, 2.3vw, 1.55rem); font-weight: 800; }
.hq-band p { margin: 0; font-size: 0.92rem; line-height: 1.75; color: rgba(255, 255, 255, 0.62); }
.hq-band--light { border-color: var(--hq-line); background: var(--hq-paper); }
.hq-band--light p { color: var(--hq-ink-2); }

/* 模块子页上一页/下一页 */
.hq-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem);
}
.hq-pager a {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.1rem 1.25rem; border: 1px solid var(--hq-line);
  border-radius: var(--hq-radius); background: var(--hq-white);
  transition: border-color 0.2s, transform 0.2s;
}
.hq-pager a:hover { border-color: rgba(22, 119, 255, 0.4); transform: translateY(-2px); }
.hq-pager small { font-family: var(--hq-en); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; color: var(--hq-muted); }
.hq-pager strong { font-size: 1.02rem; font-weight: 800; }
.hq-pager a:last-child { text-align: right; align-items: flex-end; }

/* 相关模块 chips */
.hq-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.hq-chips a {
  padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.84rem; font-weight: 600;
  background: var(--hq-paper); color: var(--hq-ink-2); border: 1px solid var(--hq-line);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.hq-chips a:hover { background: rgba(22, 119, 255, 0.1); color: var(--hq-blue-deep); border-color: rgba(22, 119, 255, 0.35); }

/* 演示凭据 */
.hq-cred {
  margin-top: 1.5rem; padding-top: 1.35rem;
  border-top: 1px solid var(--hq-line-dark);
  font-size: 0.87rem; line-height: 1.9; color: rgba(255, 255, 255, 0.6);
}
.hq-cred code {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.86em;
  color: var(--hq-cyan-soft); background: rgba(105, 177, 255, 0.14);
  padding: 0.08em 0.4em; border-radius: 4px;
}
.hq-cred a { color: var(--hq-cyan); }
.hq-cred a:hover { color: #fff; }

/* 角色一键进入 */
.hq-jump { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hq-jump a {
  padding: 0.36rem 0.72rem; border-radius: 8px; font-size: 0.81rem; font-weight: 600;
  color: var(--hq-cyan-soft); background: rgba(105, 177, 255, 0.12);
  border: 1px solid rgba(145, 213, 255, 0.24);
  transition: background 0.18s, color 0.18s;
}
.hq-jump a:hover { color: #fff; background: rgba(22, 119, 255, 0.36); }

/* ---------------------------------------------------------------- 页脚
   类名与全站一致（.site-footer / .footer-grid / .footer-legal / .footer-contact），
   这样既复用全站的排版语言，也满足 check_footer.py 的断言。 */
.site-footer {
  padding: 2.25rem 0 2.5rem;
  background: var(--hq-white); color: var(--hq-muted);
  font-size: 0.88rem; border-top: 1px solid var(--hq-line);
}
.site-footer.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.75rem);
  width: var(--hq-shell); margin: 0 auto;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.2rem; color: var(--hq-ink); }
.footer-brand strong { font-family: var(--hq-en); font-size: 1.05rem; font-weight: 800; }
.footer-grid h3 {
  margin: 0 0 0.75rem; font-family: var(--hq-en); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hq-muted);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li + li { margin-top: 0.45rem; }
.footer-grid a { font-size: 0.9rem; color: var(--hq-ink-2); }
.footer-grid a:hover { color: var(--hq-blue-deep); }
.footer-legal {
  grid-column: 1 / -1; margin: 1.5rem 0 0; font-size: 0.86rem; color: var(--hq-muted);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; padding-top: 1.35rem; border-top: 1px solid var(--hq-line);
}
.footer-legal__copy { margin: 0; }
.footer-contact { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.4rem); }
.footer-contact__text { display: grid; gap: 0.1rem; justify-items: end; text-align: right; }
.footer-contact__text strong { font-family: var(--hq-en); font-size: 0.98rem; font-weight: 800; color: var(--hq-ink); }
.footer-contact__tel {
  font-family: var(--hq-en); font-size: 1.15rem; font-weight: 800;
  letter-spacing: 0.02em; color: var(--hq-navy); white-space: nowrap;
}
.footer-contact__tel:hover { color: var(--hq-blue-deep); }
.footer-contact__note { font-size: 0.8rem; color: var(--hq-muted); }
/* 白底内边距 = 二维码静区，不能省 */
.footer-contact__qr {
  display: block; width: 8.75rem; height: auto; padding: 0.4rem;
  background: var(--hq-white); border: 1px solid var(--hq-line); border-radius: 0.4rem;
}

/* 演示水印：与静态站保持一致，截图不外流 */
.hq-watermark {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'%3E%3Ctext x='280' y='210' fill='rgba(90%2C110%2C130%2C0.20)' font-size='15' font-family='Microsoft YaHei%2CPingFang SC%2Csans-serif' text-anchor='middle' dominant-baseline='middle' transform='rotate(-28 280 210)'%3E%E7%AE%97%E6%95%B0%E7%A7%91%E6%8A%80%20%2018016313342%20%EF%BC%88%E5%BE%AE%E4%BF%A1%E5%90%8C%E5%8F%B7%EF%BC%89Cooper%3C/text%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 560px 420px;
}

/* ---------------------------------------------------------------- 动效 */
@keyframes hq-ken { from { transform: scale(1.03); } to { transform: scale(1.09); } }
@keyframes hq-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hq-rise { animation: hq-rise 0.7s ease-out both; }
.hq-rise--2 { animation-delay: 0.08s; }
.hq-rise--3 { animation-delay: 0.16s; }
.hq-rise--4 { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hq-hero__media { animation: none; }
  .hq-rise { animation: none; }
  .hq-btn:hover, .hq-pager a:hover, .hq-mod:hover { transform: none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1000px) {
  .hq-tiles, .hq-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0,1fr) 而不是 1fr：1fr 的最小值是 auto，卡片里只要有一个不肯换行的
     长元素，整列就会被撑破，页面上表现为「窄屏横向滑出一条」。 */
  .hq-mods { grid-template-columns: minmax(0, 1fr); }
  .hq-shots--2, .hq-shots--3 { grid-template-columns: minmax(0, 1fr); }
  .hq-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hq-flow--4, .hq-flow--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hq-flow > li { border-right: 0; padding-right: 0; }
  .hq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hq-stat { padding-bottom: 1rem; }
  .hq-stat:nth-child(2n) { border-right: 0; }
  .hq-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hq-line-dark); }
  .hq-stat:nth-child(n+3) { padding-top: 1rem; }
  .site-footer.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* 同上：一律 minmax(0,1fr)，别让内容撑破轨道 */
  .hq-tiles, .hq-tiles--2, .hq-tiles--4 { grid-template-columns: minmax(0, 1fr); }
  .hq-flow--4, .hq-flow--5, .hq-flow--3 { grid-template-columns: minmax(0, 1fr); }
  .hq-flow > li { padding-top: 1.1rem; padding-bottom: 0.9rem; }
  .hq-pager { grid-template-columns: minmax(0, 1fr); }
  .hq-pager a:last-child { text-align: left; align-items: flex-start; }
  .hq-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .site-footer.footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-legal { justify-content: flex-start; }
  .footer-contact__text { justify-items: start; text-align: left; }
  .hq-phones { grid-template-columns: minmax(0, 1fr); }
  .hq-phones { max-width: 22rem; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hq-stats { grid-template-columns: minmax(0, 1fr); }
  .hq-stat { border-right: 0; border-bottom: 1px solid var(--hq-line-dark); padding: 1rem 0; }
  .hq-stat:last-child { border-bottom: 0; }
}