/* ═══════════════════════════════════════════════════════════════════
   QIDIAN · 星河语言升级层  ·  2026-08-25
   ───────────────────────────────────────────────────────────────────
   这一层是「在原有版本上升级」，不是重做：
   index.html 的结构、区块、123 个链接一个没动，只在最后加载这一层，
   把视觉语言换成实测拆出来的星河 OPC 那套。

   拆自 大师重做_v9/index.html 的真实配方：
     · 暖黑底 #0E0D0B（不是死黑），四层抬升
     · 金箔当稀缺强调 #C49749 / #E2C079，发丝线 rgba(196,151,73,.12)
     · 文字暖灰四档 #F4F0E8 / #CFC8BA / #9A9384 / #6A6457
     · 标题走中文衬线，正文走无衬线
     · 板块公式：眉标（编号 — 这块干嘛的）→ 一句完整的话当标题，
       前半白后半金，带句号
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'QidianSong';
  src:url('/assets/fonts/qidian-song.woff2?v=20260825b') format('woff2');
  font-weight:400 900;
  font-display:swap;
}

:root{
  /* 暖黑四层 —— 不用死黑，死黑会把金箔衬得像贴上去的 */
  --xh-bg:#0E0D0B;
  --xh-bg2:#121009;
  --xh-bg3:#16130C;
  --xh-bg4:#1A160E;
  /* 金箔：稀缺强调，只落在标题后半句、眉标、主 CTA、关键数字 */
  --xh-gold:#C49749;
  --xh-gold-hi:#E2C079;
  --xh-gold-lo:#8B6428;
  --xh-hair:rgba(196,151,73,.14);
  --xh-hair-soft:rgba(240,236,228,.08);
  /* 文字暖灰四档 */
  --xh-fg0:#F4F0E8;
  --xh-fg1:#CFC8BA;
  --xh-fg2:#9A9384;
  /* 🔴 这一档是按 WCAG 公式反解出来的，不是照抄参考站：
     参考站的 #6A6457 压在 #0E0D0B 上只有 3.3:1，Lighthouse 当场判不达标。
     #8A8478 = 5.45:1，过 AA，色相仍在暖灰系里。 */
  --xh-fg3:#8A8478;
  --xh-serif:'QidianSong','Songti SC','Noto Serif SC','STSong',serif;
  --xh-sans:'PingFang SC','Noto Sans SC',-apple-system,'Hiragino Sans GB',
    'Microsoft YaHei',system-ui,sans-serif;
  --xh-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* ── 底色与正文 ───────────────────────────────────────────────── */
html,body{background:var(--xh-bg)!important}
body{color:var(--xh-fg1)!important;font-family:var(--xh-sans)!important;
  line-height:1.85}

/* 分区底色：交替抬升，让长页有呼吸的节奏，而不是一路平铺 */
.qds-section{background:var(--xh-bg)!important;
  border-top:1px solid var(--xh-hair-soft)!important}
.qds-section--strong{background:var(--xh-bg2)!important}
.qds-section--dark{background:var(--xh-bg3)!important}
.qroute,.qtry,.qstrip,.qds-contact{background:var(--xh-bg)!important;
  border-top:1px solid var(--xh-hair-soft)!important}
.qds-section,.qroute,.qtry,.qds-contact{
  padding-block:clamp(66px,9vh,124px)!important}

/* ── 眉标：编号 — 这块干嘛的 ──────────────────────────────────── */
.eyebrow,.qds-kicker,.platform-kicker{
  display:inline-flex!important;align-items:center;gap:11px;
  font-family:var(--xh-mono)!important;
  font-size:11px!important;font-weight:500!important;
  letter-spacing:.2em!important;text-transform:none!important;
  color:var(--xh-gold)!important;margin-bottom:18px!important}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--xh-gold);
  opacity:.7;flex:0 0 auto}

/* ── 标题：中文衬线，前白后金，一句完整的话 ────────────────────── */
/* 🔴 选择器权重是被逼出来的，不是随手写的：
   qidian-system.css 里有
     body > main h1:first-of-type{font-family:var(--q-sans)!important}
     .qds-section h2,.qds-section-head h2{font-family:var(--q-sans)!important}
   两条都是 !important 且权重高于裸 h1/h2，光写 h1{...!important} 压不住。
   所以这里逐条对着它们的权重写，多一层 html body 顶上去。 */
html body h1,html body h2,html body h3,
html body > main h1:first-of-type,
html body .qds-section h1,html body .qds-section h2,
html body .qds-section-head h2,html body .section h2,
html body .qroute__head h2,html body .qtry__head h2,
html body .qstrip__head h2,html body .qhero h1,
html body .qds-index-hero h1,html body .hero h1,
html body h1.qds-page-title{
  font-family:var(--xh-serif)!important;
  color:var(--xh-fg0)!important;
  font-weight:400!important;
  letter-spacing:-.005em!important}
/* 中文断行必须管：不管的话会在「我/们」「先/别」中间断开，读着卡。
   auto-phrase = Chrome 按词组断；balance = 两行长度尽量均衡；
   不支持的浏览器忽略这两条，退回默认断行，不会坏。 */
h1,h2,h3,.qroute__txt b{text-wrap:balance;word-break:auto-phrase}
h2{font-size:clamp(23px,3.1vw,40px)!important;line-height:1.42!important;
  margin:0 0 6px!important;max-width:26ch}
h2 em{font-style:normal!important;color:var(--xh-gold-hi)!important}
h3{font-size:clamp(17px,1.9vw,23px)!important;line-height:1.5!important}
.qds-section-head p,.qroute__head p,.qtry__head p,.qstrip__head p{
  font-family:var(--xh-sans)!important;color:var(--xh-fg2)!important;
  font-size:15px!important;line-height:1.9!important}

/* ── 首屏 · 迭代 1：重做成参照那套的构图 ────────────────────────
   参照那版首屏的力量不在那张星河照片，在三件事：
     ① 居中构图，字在正中，两侧全空
     ② 巨型中文衬线，两行，第二行压金
     ③ 底下一句人话说清「我们是谁、给谁、做到什么程度」+ 一金一素两个按钮
   麒典这边不动一行 HTML，全部用 CSS 把左对齐改成居中电影感。
   照片保留：上半屏让投影那块看得清（那是唯一有信息量的部分），
   下半屏压深，巨字压在深色上。 */
.qh3{background:var(--xh-bg)!important;
  justify-content:center!important;text-align:center!important;
  padding:clamp(120px,17vh,190px) clamp(22px,5vw,76px)
          clamp(64px,10vh,110px)!important}
.qh3__in{margin-inline:auto!important;max-width:1120px!important}
.qh3__act{justify-content:center!important;
  gap:16px 26px!important;margin-top:clamp(26px,3.6vh,40px)!important}
.qh3__cred{margin-inline:auto!important;max-width:64ch!important;
  text-align:center!important}
.qh3__photo{filter:grayscale(.34) brightness(.62) contrast(1.06)!important;
  background-position:50% 34%!important}
/* 四角压暗，把视线收进中间 —— 电影感来自这一层，不是滤镜 */
.qh3__grain::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 82% 66% at 50% 42%,
    transparent 0%,rgba(14,13,11,.34) 62%,rgba(14,13,11,.86) 100%)}
.qh3__meta{justify-content:center!important;gap:clamp(16px,4vw,64px)!important;
  left:0!important;right:0!important;
  top:clamp(88px,11vh,124px)!important}
html body .qh3 h1,html body > main .qh3 h1:first-of-type{
  font-family:var(--xh-serif)!important;
  /* 宋体 Black 的字面比黑体大一圈，同样 vw 会顶出屏幕 —— 实测收到 7.2vw */
  font-size:clamp(36px,7.2vw,104px)!important;line-height:1.12!important;
  letter-spacing:-.015em!important;color:var(--xh-fg0)!important;
  margin-bottom:clamp(18px,2.6vh,30px)!important;
  text-shadow:0 2px 30px rgba(10,9,7,.55)}
/* 文字压在照片上，底部再压深一层保对比度 */
.qh3__light{background:
  radial-gradient(ellipse 74% 44% at 26% 16%,rgba(226,192,121,.16) 0%,transparent 62%),
  linear-gradient(178deg,rgba(14,13,11,.58) 0%,rgba(14,13,11,.16) 26%,
    rgba(14,13,11,.80) 58%,#0E0D0B 100%),
  linear-gradient(100deg,rgba(14,13,11,.62) 0%,rgba(14,13,11,.28) 34%,
    rgba(14,13,11,.05) 60%,transparent 100%)!important}
.qh3 h1 em{color:var(--xh-gold-hi)!important}
.qh3__lede{font-size:clamp(15.5px,1.4vw,18.5px)!important;
  line-height:1.92!important;color:var(--xh-fg1)!important;
  max-width:52ch!important;margin-inline:auto!important}
.qh3__lede b{color:var(--xh-fg0)!important;font-weight:600!important}
.qh3__lede--2{margin-top:14px!important;color:var(--xh-fg2)!important}
.qh3__meta{color:var(--xh-gold)!important;opacity:.86}
.qh3__cred{color:var(--xh-fg3)!important;
  border-top-color:var(--xh-hair-soft)!important}
.qh3__btn{background:var(--xh-gold)!important;color:#1A1408!important;
  font-weight:600!important;border-radius:2px!important}
.qh3__btn:hover{background:var(--xh-gold-hi)!important}
.qh3__alt{color:var(--xh-fg1)!important;
  border-bottom-color:var(--xh-hair)!important}
.qh3__alt:hover{color:var(--xh-gold-hi)!important;
  border-bottom-color:var(--xh-gold)!important}

/* ── 实力事实带：首屏之后第一眼就能核对的东西 ─────────────────── */
.qpb{background:var(--xh-bg2);border-top:1px solid var(--xh-hair-soft);
  border-bottom:1px solid var(--xh-hair-soft)}
.qpb__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--xh-hair-soft)}
.qpb__i{display:block;background:var(--xh-bg2);text-decoration:none;
  padding:clamp(26px,3vw,42px) clamp(18px,2vw,28px);
  transition:background .24s cubic-bezier(.16,1,.3,1)}
.qpb__i:hover{background:var(--xh-bg4)}
.qpb__i b{display:block;font-family:var(--xh-serif);
  font-size:clamp(30px,3.8vw,54px);font-weight:400;line-height:1;
  letter-spacing:-.02em;color:var(--xh-gold-hi);font-feature-settings:"tnum"}
.qpb__i span{display:block;margin-top:14px;font-size:12.5px;line-height:1.7;
  color:var(--xh-fg2)}
.qpb__i:hover b{color:var(--xh-fg0)}

/* ── 导航 ─────────────────────────────────────────────────────── */
.site-head{background:rgba(14,13,11,.9)!important;
  border-bottom:1px solid var(--xh-hair-soft)!important;
  backdrop-filter:blur(14px)}
.brand b{font-family:var(--xh-serif)!important;color:var(--xh-fg0)!important;
  letter-spacing:.02em}
.brand span{color:var(--xh-fg3)!important}
.qnav__top{color:var(--xh-fg1)!important}
.qnav__top:hover{color:var(--xh-gold-hi)!important}
.qnav__panel{background:var(--xh-bg3)!important;
  border:1px solid var(--xh-hair)!important}
.qnav__panel h4{color:var(--xh-gold)!important;font-family:var(--xh-mono)!important;
  letter-spacing:.16em}
.qnav__panel a b{color:var(--xh-fg0)!important}
.qnav__panel a span{color:var(--xh-fg2)!important}
.nav-cta{background:var(--xh-gold)!important;color:#1A1408!important;
  font-weight:600!important;border:0!important;border-radius:2px!important}
.nav-cta:hover{background:var(--xh-gold-hi)!important}
.nav-search{border:1px solid var(--xh-hair)!important;
  color:var(--xh-fg2)!important;background:transparent!important}

/* ── 分流四条：序号做成金色锚点 ────────────────────────────────── */
.qroute__list{border-top-color:var(--xh-hair-soft)!important}
.qroute__row{border-bottom-color:var(--xh-hair-soft)!important}
.qroute__no{font-family:var(--xh-mono)!important;
  font-size:clamp(24px,2.9vw,44px)!important;line-height:1!important;
  color:rgba(196,151,73,.28)!important;min-width:1.9em}
.qroute__row:hover .qroute__no{color:var(--xh-gold)!important}
.qroute__txt b{font-family:var(--xh-serif)!important;
  color:var(--xh-fg0)!important;font-weight:400!important;
  font-size:clamp(19px,2.4vw,30px)!important}
.qroute__txt span{color:var(--xh-fg2)!important;font-size:14.5px!important}
.qroute__go{color:var(--xh-fg3)!important}
.qroute__row:hover .qroute__go{color:var(--xh-gold-hi)!important}
.qroute__row::before{background:linear-gradient(96deg,
  rgba(196,151,73,.09) 0%,transparent 66%)!important}

/* ── 卡片：抬升面 + 金色发丝线，不投影不圆角 ──────────────────── */
.qds-content-card,.case-card,.demo-card,.case-feature,.brief-box,
.case-facts div{
  background:var(--xh-bg4)!important;
  border:1px solid var(--xh-hair)!important;
  border-radius:0!important;box-shadow:none!important}
.qds-content-card h3,.case-card h3,.demo-card h3{
  font-family:var(--xh-serif)!important;color:var(--xh-fg0)!important;
  font-weight:400!important}
.qds-content-card p,.case-card p,.demo-card p{color:var(--xh-fg2)!important}
.qds-content-card small,.case-card small,.demo-card small,
.qds-process-grid small{
  display:block;margin-bottom:14px!important;
  font-family:var(--xh-mono)!important;font-size:11.5px!important;
  letter-spacing:.15em!important;color:var(--xh-gold)!important}

/* ── 迭代 2 · 案例区做成证据版面 ────────────────────────────────
   原来是 4 张等重的扁平卡，扫一眼分不出轻重 —— 就是「卡片墙」。
   改法（纯 CSS，HTML 一行不动）：
     · 去掉卡片盒子，改成发丝线分隔的编辑式格子
     · 每格压一个巨大的幽灵序号（衬线，低透明度）当锚点
     · 状态（实践中 / 提案能力 / 可现场核验）做成金色胶囊，一眼看出分量
     · 正文里的关键数字（68 项 WBS / 12/12 / 422）压金，扫读就抓得到 */
/* 🔴 必须同时压掉卡片自己的 grid-column：qidian-system.css 里写着
   .qds-content-grid>.qds-content-card{grid-column:span 6}（12 栅格），
   只改 grid-template-columns 会被它顶成一栏，右边 60% 全空。 */
section[aria-labelledby="s-cases"] .qds-content-grid{
  counter-reset:qcase;display:grid!important;gap:0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  border-top:1px solid var(--xh-hair)!important}
section[aria-labelledby="s-cases"] .qds-content-grid>.qds-content-card{
  grid-column:auto!important}
@media(max-width:760px){
  section[aria-labelledby="s-cases"] .qds-content-grid{
    grid-template-columns:1fr!important}}
section[aria-labelledby="s-cases"] .qds-content-card{
  position:relative;overflow:hidden;
  background:transparent!important;border:0!important;
  border-bottom:1px solid var(--xh-hair)!important;
  border-right:1px solid var(--xh-hair)!important;
  padding:clamp(30px,3.6vw,52px) clamp(24px,2.6vw,40px)
          clamp(34px,4vw,58px)!important;
  transition:background .3s cubic-bezier(.16,1,.3,1)}
section[aria-labelledby="s-cases"] .qds-content-card:hover{
  background:var(--xh-bg4)!important}
section[aria-labelledby="s-cases"] .qds-content-card::before{
  counter-increment:qcase;content:counter(qcase,decimal-leading-zero);
  position:absolute;right:clamp(14px,1.6vw,26px);top:clamp(6px,.9vw,14px);
  font-family:var(--xh-serif);font-size:clamp(58px,6.6vw,104px);
  line-height:1;color:rgba(196,151,73,.10);pointer-events:none}
/* 状态胶囊要包住文字，不能撑满整行 —— 用 width:fit-content 兜住，
   因为别处有 display:block!important 在抢，光写 inline-flex 不一定压得住 */
section[aria-labelledby="s-cases"] .qds-content-card small{
  display:inline-flex!important;width:fit-content!important;
  max-width:100%;align-items:center;gap:9px;
  margin:0 0 18px!important;padding:6px 13px;
  border:1px solid var(--xh-hair);
  font-size:11px!important;letter-spacing:.13em!important;
  color:var(--xh-gold)!important}
section[aria-labelledby="s-cases"] .qds-content-card small::before{
  content:"";width:5px;height:5px;background:var(--xh-gold);
  border-radius:50%;flex:0 0 auto}
section[aria-labelledby="s-cases"] .qds-content-card h3{
  font-size:clamp(21px,2.5vw,31px)!important;line-height:1.4!important;
  margin:0 0 14px!important}
section[aria-labelledby="s-cases"] .qds-content-card p{
  font-size:14.5px!important;line-height:1.86!important;
  color:var(--xh-fg2)!important;max-width:44ch}
section[aria-labelledby="s-cases"] .qds-content-card p b{
  color:var(--xh-gold-hi)!important;font-weight:600!important;
  white-space:nowrap}
section[aria-labelledby="s-cases"] .qds-figure{
  margin:clamp(26px,3.4vw,46px) 0 0!important;
  border:1px solid var(--xh-hair)!important;background:#000}
section[aria-labelledby="s-cases"] .qds-figure img{
  filter:grayscale(.2) brightness(.9) contrast(1.03)}
section[aria-labelledby="s-cases"] figcaption{
  padding:13px 16px!important;border-top:1px solid var(--xh-hair)!important;
  background:var(--xh-bg2)!important;
  font-family:var(--xh-mono)!important;font-size:11.5px!important;
  letter-spacing:.08em!important;color:var(--xh-fg3)!important}
/* 「你可以去问它一句」那段钩子：做成引文块，别混在正文里淹掉 */
.qds-demo-hook{border-left:2px solid var(--xh-gold)!important;
  padding:4px 0 4px 20px!important;margin-top:20px!important;
  font-size:14.5px!important;line-height:1.9!important;
  color:var(--xh-fg1)!important;max-width:64ch}
.qds-demo-hook b{color:var(--xh-gold-hi)!important;font-weight:600!important}

/* ── 迭代 10 · 「签约五条量尺」做成红旗清单 ─────────────────────
   问题：这一节和「四种叫停」跟案例区、判据区长得一模一样，
   全站四处都是同一种卡片，翻下去没有节奏，读者分不出轻重。
   这一节讲的是「别人会怎么糊弄你」，性质是红旗，不是能力介绍 ——
   所以做成一条条竖排的警示项：左边一道琥珀竖线 + 巨大序号，
   标题是那句「病症」，说明是「为什么这是问题」。 */
section[aria-labelledby="s-ruler"] .qds-content-grid{
  display:grid!important;grid-template-columns:1fr!important;
  gap:0!important;counter-reset:qruler;
  border-top:1px solid var(--xh-hair)!important}
section[aria-labelledby="s-ruler"] .qds-content-grid>.qds-content-card{
  grid-column:auto!important;
  position:relative;background:transparent!important;
  border:0!important;border-bottom:1px solid var(--xh-hair)!important;
  border-left:2px solid rgba(224,113,92,.34)!important;
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px)
          clamp(24px,2.8vw,36px) clamp(24px,3vw,44px)!important;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2.6vw,42px);align-items:baseline;
  transition:background .3s cubic-bezier(.16,1,.3,1),
             border-left-color .3s}
section[aria-labelledby="s-ruler"] .qds-content-card:hover{
  background:var(--xh-bg4)!important;
  border-left-color:#E0715C!important}
section[aria-labelledby="s-ruler"] .qds-content-card::before{
  counter-increment:qruler;
  content:counter(qruler,decimal-leading-zero);
  grid-row:1/3;font-family:var(--xh-serif);
  font-size:clamp(26px,3vw,44px);line-height:1;
  color:rgba(224,113,92,.30);transition:color .3s}
section[aria-labelledby="s-ruler"] .qds-content-card:hover::before{
  color:rgba(224,113,92,.62)}
section[aria-labelledby="s-ruler"] .qds-content-card small{
  grid-column:2;display:block!important;margin:0 0 8px!important;
  font-size:10.5px!important;letter-spacing:.16em!important;
  color:rgba(224,113,92,.82)!important}
section[aria-labelledby="s-ruler"] .qds-content-card h3{
  grid-column:2;margin:0 0 10px!important;
  font-size:clamp(18px,2vw,25px)!important;line-height:1.42!important}
section[aria-labelledby="s-ruler"] .qds-content-card p{
  grid-column:2;font-size:14px!important;line-height:1.84!important;
  color:var(--xh-fg2)!important;max-width:70ch}

/* ── 迭代 10 · 「四种叫停」做成停止牌 ───────────────────────────
   这一节讲的是「我们不接什么」，是全站唯一一处主动往外推的内容，
   分量要够、要跟别处长得不一样：四格，每格左上一个红色停止标记，
   底色压深一档，像四块立在那儿的牌子。 */
section[aria-labelledby="s-stop"] .qds-content-grid{
  display:grid!important;gap:1px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  background:var(--xh-hair)!important;
  border:1px solid var(--xh-hair)!important}
section[aria-labelledby="s-stop"] .qds-content-grid>.qds-content-card{
  grid-column:auto!important;position:relative;
  background:#141009!important;border:0!important;
  padding:clamp(34px,3.6vw,50px) clamp(22px,2.4vw,34px)
          clamp(28px,3vw,40px)!important;
  transition:background .3s cubic-bezier(.16,1,.3,1)}
section[aria-labelledby="s-stop"] .qds-content-card:hover{
  background:#1B1109!important}
section[aria-labelledby="s-stop"] .qds-content-card::before{
  content:"";position:absolute;top:clamp(16px,1.8vw,24px);
  left:clamp(22px,2.4vw,34px);width:16px;height:16px;
  border:2px solid rgba(224,113,92,.78);border-radius:50%;
  transition:background .3s,border-color .3s}
section[aria-labelledby="s-stop"] .qds-content-card::after{
  content:"";position:absolute;top:clamp(23px,2.5vw,31px);
  left:clamp(25px,2.7vw,37px);width:10px;height:2px;
  background:rgba(224,113,92,.78);transition:background .3s}
section[aria-labelledby="s-stop"] .qds-content-card:hover::before{
  border-color:#E0715C}
section[aria-labelledby="s-stop"] .qds-content-card:hover::after{
  background:#E0715C}
section[aria-labelledby="s-stop"] .qds-content-card small{
  display:block!important;margin:clamp(26px,2.6vw,34px) 0 12px!important;
  font-size:10.5px!important;letter-spacing:.18em!important;
  color:rgba(224,113,92,.86)!important}
section[aria-labelledby="s-stop"] .qds-content-card h3{
  margin:0 0 12px!important;
  font-size:clamp(19px,2.2vw,27px)!important;line-height:1.4!important}
section[aria-labelledby="s-stop"] .qds-content-card p{
  font-size:14px!important;line-height:1.84!important;
  color:var(--xh-fg2)!important;max-width:46ch}
/* 🔴 这一节四条里第一条是「条件都齐了」—— 那是放行，不是叫停。
   我第一版给四条都挂了红色禁止标，第一条语义就反了。
   按内容分开：第 1 条走绿色放行，第 2 条走琥珀（缩小范围＝有条件通过），
   第 3、4 条才是红色停。图标也跟着变：放行是实心点，停是横杠。 */
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1)::before{
  border-color:rgba(95,199,154,.82)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1)::after{
  background:rgba(95,199,154,.82)!important;
  width:6px!important;height:6px!important;border-radius:50%;
  top:clamp(21px,2.3vw,29px)!important;left:clamp(27px,2.9vw,39px)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1) small{
  color:rgba(95,199,154,.9)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1):hover::before{
  border-color:#5FC79A!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(1):hover::after{
  background:#5FC79A!important}

section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2)::before{
  border-color:rgba(226,192,121,.82)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2)::after{
  background:rgba(226,192,121,.82)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2) small{
  color:rgba(226,192,121,.92)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2):hover::before{
  border-color:var(--xh-gold-hi)!important}
section[aria-labelledby="s-stop"] .qds-content-card:nth-child(2):hover::after{
  background:var(--xh-gold-hi)!important}

@media(max-width:760px){
  section[aria-labelledby="s-stop"] .qds-content-grid{
    grid-template-columns:1fr!important}
}

/* ── 迭代 3 · 试用台做成真正的产品控制台 ────────────────────────
   这台是全站最值钱的东西（会拒答、标版本、标责任人），但原来的视觉分量
   跟旁边一段正文差不多，滚过去根本不会停。这轮把它拉到跟首屏一个级别：
     · 面板抬到最亮的一层 + 金色边，四周留白拉开，像一台设备摆在那儿
     · 标签页做成真的可选态，选中压金底线
     · 问/答分成两个层级：问是白的，答是金的，一眼看出「它没顺着说」
     · 拒答状态做成红色徽章，版本/权限/责任人做成数据条
   全部纯 CSS，HTML 一行没动，交互逻辑还是它原来那套 JS。 */
.qtry{background:var(--xh-bg2)!important}
.qdemo{background:var(--xh-bg4)!important;
  border:1px solid rgba(196,151,73,.30)!important;
  box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4)!important;
  margin-top:clamp(28px,3.6vw,48px)!important;overflow:hidden}
.qdemo__glow{background:radial-gradient(ellipse 70% 50% at 24% 0%,
  rgba(196,151,73,.10),transparent 68%)!important}
.qdemo__bar{background:var(--xh-bg3)!important;
  border-bottom:1px solid var(--xh-hair)!important;
  padding:14px clamp(18px,2vw,26px)!important}
.qdemo__led{background:#5FC79A!important;box-shadow:0 0 10px rgba(95,199,154,.6)}
.qdemo__lbl{font-family:var(--xh-mono)!important;font-size:11.5px!important;
  letter-spacing:.16em!important;color:var(--xh-fg1)!important}
.qdemo__hint{font-family:var(--xh-mono)!important;font-size:11px!important;
  letter-spacing:.12em!important;color:var(--xh-gold)!important}
/* 标签页：做成真的可选态 */
.qdemo__chips{border-bottom:1px solid var(--xh-hair)!important;
  background:var(--xh-bg3)!important}
.qdemo__chips button,.qdemo__chips [role="tab"]{
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:16px 20px!important;font-size:14.5px!important;
  color:var(--xh-fg2)!important;position:relative;
  transition:color .2s,background .2s}
.qdemo__chips button:hover,.qdemo__chips [role="tab"]:hover{
  color:var(--xh-fg0)!important;background:rgba(196,151,73,.05)!important}
.qdemo__chips [aria-selected="true"],.qdemo__chips .is-on{
  color:var(--xh-gold-hi)!important;background:var(--xh-bg4)!important}
.qdemo__chips [aria-selected="true"]::after,.qdemo__chips .is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--xh-gold)}
/* 问 / 答：两个层级，一眼看出它没顺着说 */
.qdemo__body{padding:clamp(24px,3vw,40px)!important}
.qdemo__role{font-family:var(--xh-mono)!important;font-size:10.5px!important;
  letter-spacing:.18em!important;color:var(--xh-fg3)!important;
  margin-bottom:10px!important}
.qdemo__ask{font-family:var(--xh-serif)!important;
  font-size:clamp(19px,2.1vw,26px)!important;line-height:1.5!important;
  color:var(--xh-fg0)!important;margin:0 0 26px!important}
.qdemo__ans{border-left:2px solid var(--xh-gold)!important;
  padding:2px 0 2px 20px!important;
  font-size:clamp(15px,1.5vw,17.5px)!important;line-height:1.86!important;
  color:var(--xh-gold-hi)!important;margin:0 0 22px!important}
.qdemo__foot{gap:14px!important;align-items:center!important}
.qdemo__status{padding:7px 13px!important;
  border:1px solid rgba(224,113,92,.5)!important;
  font-family:var(--xh-mono)!important;font-size:11px!important;
  letter-spacing:.12em!important;color:#E0715C!important}
.qdemo__stamp{font-family:var(--xh-mono)!important;font-size:12px!important;
  color:var(--xh-fg2)!important}
/* 版本 / 权限 / 责任人：做成数据条 */
.qdemo__meta{margin-top:22px!important;
  border-top:1px solid var(--xh-hair)!important;padding-top:0!important}
.qdemo__meta>*{padding:15px 16px 13px 0!important}
.qdemo__meta dt,.qdemo__meta b:first-child{
  font-family:var(--xh-mono)!important;font-size:10px!important;
  letter-spacing:.14em!important;color:var(--xh-gold)!important}
/* 「它查了什么」：做成证据日志 */
.qdemo__side{background:var(--xh-bg3)!important;
  border-top:1px solid var(--xh-hair)!important;
  padding:clamp(22px,2.6vw,34px)!important}
.qdemo__h{font-family:var(--xh-mono)!important;font-size:11px!important;
  letter-spacing:.18em!important;color:var(--xh-gold)!important;
  margin:0 0 16px!important}
.qdemo__note{font-size:13px!important;line-height:1.8!important;
  color:var(--xh-fg3)!important;margin-top:16px!important}
.qdemo__note a{color:var(--xh-gold-hi)!important;
  border-bottom:1px solid rgba(196,151,73,.4)}

/* ── 迭代 4 · 六阶五门做成可视流程 ──────────────────────────────
   原来是 6 张卡 + 5 张卡两排，看不出「这是一条路，中间有门」。
   改法（纯 CSS）：
     · 六阶接成一条横向轨道，顶上一条金线穿过去，序号做成轨道上的节点
     · 五道门做成菱形闸口，颜色跟六阶区分开 —— 一眼看出「过不去就停在这」
     · 门下面写清判什么，不再是一句悬空的卡片文案 */
.qds-process-grid{
  display:grid!important;gap:0!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  border-top:1px solid var(--xh-hair)!important;
  margin-top:clamp(26px,3.4vw,44px)!important;position:relative}
.qds-process-grid::before{content:"";position:absolute;left:0;right:0;top:-1px;
  height:1px;background:linear-gradient(90deg,transparent,var(--xh-gold),transparent);
  opacity:.7}
.qds-process-grid>article{
  background:transparent!important;border:0!important;border-radius:0!important;
  border-right:1px solid var(--xh-hair)!important;
  padding:clamp(24px,2.6vw,36px) clamp(14px,1.5vw,22px)!important;
  position:relative}
.qds-process-grid>article:last-child{border-right:0!important}
.qds-process-grid>article::before{content:"";position:absolute;top:-4px;left:0;
  width:7px;height:7px;background:var(--xh-gold);transform:rotate(45deg)}
.qds-process-grid>article small{
  display:block!important;font-family:var(--xh-mono)!important;
  font-size:11px!important;letter-spacing:.16em!important;
  color:var(--xh-gold)!important;margin-bottom:14px!important}
.qds-process-grid>article h3{
  font-size:clamp(15.5px,1.5vw,19px)!important;line-height:1.42!important;
  margin:0 0 10px!important;color:var(--xh-fg0)!important}
.qds-process-grid>article p{font-size:12.5px!important;line-height:1.72!important;
  color:var(--xh-fg2)!important}
@media(max-width:1080px){.qds-process-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:640px){.qds-process-grid{grid-template-columns:repeat(2,1fr)!important}}

/* 五道门：菱形闸口，和六阶明确区分 */
.qds-status-grid{display:grid!important;gap:0!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  border-top:1px solid var(--xh-hair)!important;
  margin-top:clamp(30px,3.8vw,52px)!important}
.qds-status-card{background:transparent!important;border:0!important;
  border-right:1px solid var(--xh-hair)!important;border-radius:0!important;
  padding:clamp(30px,3vw,42px) clamp(14px,1.5vw,22px)
          clamp(24px,2.6vw,34px)!important;
  position:relative;text-align:left}
.qds-status-card:last-child{border-right:0!important}
.qds-status-card::before{content:"";position:absolute;top:-7px;left:clamp(14px,1.5vw,22px);
  width:13px;height:13px;transform:rotate(45deg);
  border:1px solid var(--xh-gold);background:var(--xh-bg3)}
.qds-status-card b{display:block;font-family:var(--xh-serif)!important;
  font-size:clamp(16px,1.7vw,21px)!important;font-weight:400!important;
  color:var(--xh-fg0)!important;margin-bottom:10px}
.qds-status-card span{display:block;font-size:12.5px!important;
  line-height:1.74!important;color:var(--xh-fg2)!important}
@media(max-width:1080px){.qds-status-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:640px){.qds-status-grid{grid-template-columns:repeat(2,1fr)!important}}

/* ── 现场照带 ─────────────────────────────────────────────────── */
.qstrip figure{border:1px solid var(--xh-hair)!important;
  background:var(--xh-bg3)!important}
.qstrip img{filter:grayscale(.18) brightness(.86) contrast(1.03)!important}
.qstrip figure:hover img{filter:grayscale(0) brightness(1.04) contrast(1.01)!important}
.qstrip__note{color:var(--xh-fg3)!important}

/* ── 迭代 6 · 行业 15 类做成真网格 ──────────────────────────────
   原来是一排纯文字链，而且 15 条全部指向同一个 /industries 页
   —— 点哪个都一样，是功能缺陷不只是难看。
   现在每条指向自己的真页面（15 个页面实测都在），
   并补了一句它自己页面上写的能力项（从各页 meta 抓的，不是编的）。 */
.qind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--xh-hair);
  margin-top:clamp(24px,3vw,40px)}
.qind__i{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"n b g" "n d g";
  column-gap:clamp(12px,1.4vw,20px);row-gap:7px;align-items:baseline;
  padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,24px);
  border-right:1px solid var(--xh-hair);
  border-bottom:1px solid var(--xh-hair);
  text-decoration:none;overflow:hidden;
  transition:background .3s cubic-bezier(.16,1,.3,1)}
.qind__i:nth-child(3n){border-right:0}
.qind__i::before{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(196,151,73,.10),transparent 68%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.16,1,.3,1);pointer-events:none}
.qind__i:hover::before{transform:scaleX(1)}
.qind__n{grid-area:n;font-family:var(--xh-mono);font-size:11px;
  letter-spacing:.12em;color:rgba(196,151,73,.42);
  transition:color .3s;position:relative;z-index:1}
.qind__i:hover .qind__n{color:var(--xh-gold)}
.qind__b{grid-area:b;font-family:var(--xh-serif);
  font-size:clamp(16px,1.6vw,20px);line-height:1.4;
  color:var(--xh-fg0);position:relative;z-index:1}
.qind__d{grid-area:d;font-size:12.5px;line-height:1.7;
  color:var(--xh-fg2);position:relative;z-index:1}
.qind__go{grid-area:g;color:var(--xh-fg3);font-size:14px;
  opacity:0;transform:translate3d(-6px,0,0);
  transition:opacity .28s,transform .28s cubic-bezier(.16,1,.3,1);
  position:relative;z-index:1}
.qind__i:hover .qind__go{opacity:1;transform:none;color:var(--xh-gold-hi)}
@media(max-width:1000px){.qind{grid-template-columns:repeat(2,1fr)}
  .qind__i:nth-child(3n){border-right:1px solid var(--xh-hair)}
  .qind__i:nth-child(2n){border-right:0}}
@media(max-width:620px){.qind{grid-template-columns:1fr}
  .qind__i{border-right:0!important}}

/* ── Demo 试用台 ──────────────────────────────────────────────── */
.qdemo{background:var(--xh-bg3)!important;
  border:1px solid var(--xh-hair)!important}
.qdemo__h{font-family:var(--xh-serif)!important;color:var(--xh-fg0)!important}
.qterm__foot,.qterm__tx{color:var(--xh-fg2)!important}

/* ── 通用链接与按钮 ───────────────────────────────────────────── */
a{color:inherit}
.qds-btn,.btn,.cta-primary{background:var(--xh-gold)!important;
  color:#1A1408!important;border-radius:2px!important;font-weight:600!important}
.qds-btn:hover,.btn:hover,.cta-primary:hover{background:var(--xh-gold-hi)!important}
.qds-btn--ghost,.btn-ghost{background:transparent!important;
  border:1px solid var(--xh-hair)!important;color:var(--xh-fg1)!important}
.qds-btn--ghost:hover,.btn-ghost:hover{border-color:var(--xh-gold)!important;
  color:var(--xh-gold-hi)!important}

/* ── 页脚与站点地图 ───────────────────────────────────────────────
   实际类名是 .footer / .qfootmap（不是我先前猜的 .site-foot），
   所以那一版页脚底色没跟上暖黑，还是冷调的。查过 DOM 才写对。 */
.site-foot,footer,.footer,.qfootmap{background:var(--xh-bg)!important;
  border-top:1px solid var(--xh-hair-soft)!important;color:var(--xh-fg3)!important}
.site-foot a,footer a,.footer a,.qfootmap a{color:var(--xh-fg2)!important}
.site-foot a:hover,footer a:hover,.footer a:hover,
.qfootmap a:hover{color:var(--xh-gold-hi)!important}
.qfootmap__col h4,.footer-links h4,.footer h4,.footer strong{
  font-family:var(--xh-serif)!important;color:var(--xh-fg0)!important;
  font-weight:400!important}
.qfootmap__more,.footer .more{color:var(--xh-gold)!important}
.qfootmap__cta{background:var(--xh-bg2)!important;
  border-top:1px solid var(--xh-hair-soft)!important;
  border-bottom:1px solid var(--xh-hair-soft)!important}
.qfootmap__cta b,.qfootmap__cta strong{font-family:var(--xh-serif)!important;
  color:var(--xh-fg0)!important;font-weight:400!important}

/* ── 逐个补 Lighthouse 点名的低对比元素 ───────────────────────────
   这三处原样式的色值权重压过 --xh-fg3，必须逐条点名，光改变量没用。
   实测扣分值：.brand span 2.26 / kbd 3.66 / footer span 3.3，门槛 4.5。 */
html body .brand span,
html body .nav-search kbd,
html body .footer-company span,
html body .footer-meta span,
html body .site-foot span,
html body footer span{color:var(--xh-fg3)!important}
/* 🔴 光改 color 不够：这两处外面还套着 opacity，把已经达标的色又压回去
   （实测 #8A8478 × .72 → #676359 = 3.24:1）。必须同时把 opacity 顶回 1，
   否则改多少次颜色都还是不达标 —— 这就是「改了没效果」的真因。 */
html body .brand span,
html body .nav-search kbd{opacity:1!important}
html body .nav-search kbd{border-color:var(--xh-hair)!important}

/* ── 全局细节 ─────────────────────────────────────────────────── */
hr,.rule{border-color:var(--xh-hair-soft)!important}
::selection{background:rgba(196,151,73,.3);color:var(--xh-fg0)}
mark{background:transparent!important;color:var(--xh-gold-hi)!important;
  font-weight:600}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}}