/*
 * core-competencies.css —— 核心能力页新版 ?new=1 测试页（英文站 /core-competencies/?new=1，正文由 app\service\CoreCompetencies 输出）
 * 按 Claude Design「VOOHU 英文站核心能力 v4」逐值还原：桌面 ≥1100、平板 700–1099、手机 <700 三档（设计稿自带的三档）。
 * 全部规则收在 #vh-cap 下（id 前缀压过站点通用样式），不影响页头页脚。
 * 内容宽度按全站约定（vh-layout.css）：<1440 为 1200 居中（两侧 24），≥1440 跟随内容列 --vh-page；不写 vw（≥2048 有 zoom）。
 * 字体：英文正文用应用领域页同一套自托管 "VHAP Poppins"（application-preview-fonts.css，400 / 600 / 700）。
 * 按钮：都是带边框 / 底色的正规按钮（48 高；卡片里 40 高），没有「文字 + 箭头」式链接；卡片「整卡可点」靠按钮的 ::after 盖住整张卡（.cc-stretch）。
 */

/* 站点外层 #page.dbox 的 overflow:hidden 会让吸顶锚点栏失效，同行业方案总页的做法 */
#page.dbox:has(#vh-cap) { overflow: clip; }
@keyframes l1spin { to { transform: rotate(360deg); } }

#vh-cap {
    --cc-red: #C30D23;
    --cc-red-hover: #8A0A18;
    --cc-red-hot: #E0213A;
    --cc-ink: #1A1A1A;
    --cc-muted: #565B63;
    --cc-rule: #E4E4E4;
    --cc-line: #C9C9C9;
    --cc-soft: #F4F4F4;
    --cc-pink: #FBE9EB;
    --cc-gold: #FFF6EA;
    position: relative;
    overflow-x: clip;
    background: #FFFFFF;
    color: var(--cc-ink);
    font-family: "VHAP Poppins", "Poppins", "Poppins Fallback", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
#vh-cap * { font-family: inherit; box-sizing: border-box; }
#vh-cap h1, #vh-cap h2, #vh-cap h3, #vh-cap p, #vh-cap ul, #vh-cap ol { margin: 0; padding: 0; }
#vh-cap ul, #vh-cap ol { list-style: none; }
#vh-cap a { color: var(--cc-red); text-decoration: none; }
#vh-cap img { display: block; max-width: none; }
#vh-cap b { font-weight: 600; }
#vh-cap :focus-visible { outline: 2px solid var(--cc-red); outline-offset: 3px; }
#vh-cap [data-tone="dark"] :focus-visible { outline-color: #FFFFFF; }
#vh-cap .cc-acc { color: var(--cc-red); }
/* 线框 3D 的引线标签、证书占位图上的标签：文字放在 data-cc-t 里由 CSS 显示（装饰，不进正文文字） */
#vh-cap [data-cc-t]::after { content: attr(data-cc-t); }

#vh-cap .cc-wrap { position: relative; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1440px) {
    html #vh-cap .cc-wrap { max-width: calc(var(--vh-page, 1240px) + 48px); }
}

/* ---------------------------------------------------------------- 按钮、序号、板块标题 */
#vh-cap .cc-btns { display: flex; flex-wrap: wrap; gap: 12px; }
#vh-cap .cc-btn { height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; }
#vh-cap .cc-btn--red { background: var(--cc-red); color: #FFFFFF; }
#vh-cap .cc-btn--red:hover { background: var(--cc-red-hover); color: #FFFFFF; }
#vh-cap .cc-btn--line { border-color: var(--cc-red); background: #FFFFFF; color: var(--cc-red); }
#vh-cap .cc-btn--line:hover { background: var(--cc-red); color: #FFFFFF; }
#vh-cap .cc-btn--ghost { border-color: rgba(255, 255, 255, .5); background: transparent; color: #FFFFFF; }
#vh-cap .cc-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); color: #FFFFFF; }
#vh-cap .cc-btn--white { background: #FFFFFF; color: var(--cc-red); }
#vh-cap .cc-btn--white:hover { background: var(--cc-pink); color: var(--cc-red-hover); }
#vh-cap .cc-btn--ghostw { border-color: rgba(255, 255, 255, .6); background: transparent; color: #FFFFFF; }
#vh-cap .cc-btn--ghostw:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); color: #FFFFFF; }
#vh-cap .cc-btn--gray { padding: 0 20px 0 24px; border-color: var(--cc-line); background: #FFFFFF; color: var(--cc-ink); }
#vh-cap .cc-btn--gray:hover { border-color: var(--cc-red); color: var(--cc-red); }
#vh-cap .cc-btn--xs { height: 40px; padding: 0 16px 0 20px; font-size: 14px; }
#vh-cap .cc-arr { flex: none; transition: transform .25s ease; }
#vh-cap .cc-btn:hover .cc-arr { transform: translateX(4px); }
/* 整卡可点：按钮（或标题链接）的 ::after 盖住所在卡片，链接文字仍只是按钮 / 标题上的字 */
#vh-cap .cc-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

#vh-cap .cc-no { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--cc-red); font-variant-numeric: tabular-nums; }
#vh-cap .cc-eyebrow { height: 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 3px; color: var(--cc-red); }
#vh-cap .cc-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#vh-cap .cc-eyebrow--gold { color: var(--cc-gold); }
#vh-cap .cc-sec { position: relative; padding: 72px 0; background: #FFFFFF; }
#vh-cap .cc-sec--soft { background: var(--cc-soft); }
#vh-cap .cc-h2 { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.01em; color: var(--cc-ink); text-wrap: balance; }
#vh-cap .cc-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
#vh-cap .cc-head-l { grid-column: 1 / 9; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#vh-cap .cc-head-r { grid-column: 9 / 13; justify-self: end; }
#vh-cap .cc-head-r .cc-btns { justify-content: flex-end; }
#vh-cap .cc-head-p { font-size: 16px; line-height: 26px; color: var(--cc-muted); text-wrap: pretty; }
#vh-cap .cc-head-p b { color: var(--cc-ink); }
/* 红底板块：品牌红平涂 + 48px 白色细网格，H2 白、强调淡金 */
#vh-cap .cc-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
#vh-cap [data-tone="dark"] .cc-h2 { color: #FFFFFF; }
#vh-cap [data-tone="dark"] .cc-h2 .cc-acc { color: var(--cc-gold); }

/* ---------------------------------------------------------------- S1 首屏 */
#vh-cap .cc-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 110% at 78% 50%, #2A1016 0%, #170A0E 45%, #0C0B0F 100%); color: #FFFFFF; }
#vh-cap .cc-hero-art { position: absolute; inset: 0; pointer-events: none; }
#vh-cap .cc-hero-in { z-index: 1; padding-top: 32px; padding-bottom: 72px; }
#vh-cap .cc-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .6); }
#vh-cap .cc-crumb li { display: flex; align-items: center; gap: 8px; }
#vh-cap .cc-crumb a { color: rgba(255, 255, 255, .6); }
#vh-cap .cc-crumb a:hover { color: #FFFFFF; }
#vh-cap .cc-crumb [aria-current] { font-weight: 500; color: #FFFFFF; }
#vh-cap .cc-hero-txt { margin-top: 48px; width: calc((100% - 264px) / 2 + 120px); min-width: 0; }
#vh-cap .cc-eyebrow--hero { height: auto; gap: 10px; font-weight: 700; color: #FFFFFF; }
#vh-cap .cc-eyebrow--hero .cc-dot { background: var(--cc-red-hot); }
#vh-cap .cc-h1 { margin-top: 20px; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; text-wrap: balance; }
#vh-cap .cc-h1 .cc-acc { color: var(--cc-red-hot); }
@media (min-width: 1280px) { #vh-cap .cc-h1 { font-size: 48px; line-height: 56px; } }
@media (min-width: 1440px) { #vh-cap .cc-h1 { font-size: 52px; line-height: 60px; } }
@media (min-width: 1560px) { #vh-cap .cc-h1 { font-size: 56px; line-height: 64px; } }
#vh-cap .cc-lead { margin-top: 24px; max-width: 620px; font-size: 20px; line-height: 30px; font-weight: 500; color: #FFFFFF; text-wrap: pretty; }
#vh-cap .cc-pts { margin-top: 24px; max-width: 620px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; gap: 14px; }
#vh-cap .cc-pts li { display: flex; align-items: flex-start; gap: 14px; }
#vh-cap .cc-pt-ico { flex: none; width: 32px; height: 32px; margin-top: -4px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; color: var(--cc-red-hot); }
#vh-cap .cc-pt-tx { min-width: 0; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
#vh-cap .cc-pt-tx b { color: #FFFFFF; }
#vh-cap .cc-hero .cc-btns { margin-top: 32px; }

/* ---------------------------------------------------------------- S0 锚点栏（吸顶；top = 站点固定页头下沿，由 JS 写进 --cc-top） */
#vh-cap .cc-anchors { position: sticky; top: var(--cc-top, 0px); z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--cc-rule); transition: box-shadow .25s ease; }
#vh-cap .cc-anchors.is-stuck { box-shadow: 0 8px 20px rgba(26, 26, 26, .08); }
#vh-cap .cc-anchors-scroll { overflow-x: auto; scrollbar-width: none; }
#vh-cap .cc-anchors-scroll::-webkit-scrollbar { display: none; }
#vh-cap .cc-anchors-row { position: relative; height: 64px; display: flex; align-items: stretch; }
#vh-cap .cc-anchors-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cc-ink); }
#vh-cap .cc-anchor { position: relative; flex: 1 1 0; min-width: max-content; padding-top: 2px; display: flex; align-items: center; color: var(--cc-ink); white-space: nowrap; transition: color .15s ease; }
#vh-cap .cc-anchor::before { content: ""; position: absolute; top: 0; left: 0; right: 16px; height: 2px; background: transparent; transition: background .25s ease; }
#vh-cap .cc-anchor + .cc-anchor::before { left: 16px; }
#vh-cap .cc-anchor-in { flex: 1; padding: 0 16px 0 0; display: flex; flex-direction: column; gap: 2px; }
#vh-cap .cc-anchor + .cc-anchor .cc-anchor-in { padding-left: 16px; border-left: 1px solid var(--cc-rule); }
#vh-cap .cc-anchor-no { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--cc-muted); }
#vh-cap .cc-anchor-t { font-size: 15px; line-height: 20px; font-weight: 500; }
#vh-cap .cc-anchor:hover { color: var(--cc-red); }
#vh-cap .cc-anchor.is-on { color: var(--cc-red); }
#vh-cap .cc-anchor.is-on::before { background: var(--cc-red); }
#vh-cap .cc-anchor.is-on .cc-anchor-no { color: var(--cc-red); }
#vh-cap .cc-anchor.is-on .cc-anchor-t { font-weight: 600; }

/* ---------------------------------------------------------------- S2 每个设计阶段（卡片：3:2 配图 + 序号 + H3 + 说明 + 贴底按钮） */
#vh-cap .cc-stages { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#vh-cap .cc-stage { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--cc-rule); border-radius: 10px; overflow: hidden; background: #FFFFFF; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#vh-cap .cc-stage:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 26, 26, .1); border-color: var(--cc-red); }
#vh-cap .cc-stage-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--cc-rule); }
#vh-cap .cc-stage-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
#vh-cap .cc-stage:hover .cc-stage-img img { transform: scale(1.04); }
#vh-cap .cc-stage-b { flex: 1; padding: 20px 24px 24px; display: flex; flex-direction: column; }
#vh-cap .cc-stage-t { margin-top: 8px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--cc-ink); text-wrap: balance; }
#vh-cap .cc-stage-d { margin: 8px 0 24px; font-size: 14px; line-height: 22px; color: var(--cc-muted); text-wrap: pretty; }
#vh-cap .cc-stage .cc-btn { margin-top: auto; align-self: flex-start; }
#vh-cap .cc-stage:hover .cc-btn--line { background: var(--cc-red); color: #FFFFFF; }
#vh-cap .cc-stage:hover .cc-arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- S3 按问题找帮助（上半红带，三张白卡压在分界线上） */
#vh-cap .cc-probs { padding: 0 0 48px; }
#vh-cap .cc-band { position: relative; overflow: hidden; padding: 72px 0 208px; background: var(--cc-red); color: #FFFFFF; }
#vh-cap .cc-probs-wrap { margin-top: -160px; }
#vh-cap .cc-probs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#vh-cap .cc-prob { position: relative; min-width: 0; padding: 32px; display: flex; flex-direction: column; border: 1px solid var(--cc-rule); border-radius: 10px; background: #FFFFFF; box-shadow: 0 20px 44px rgba(26, 26, 26, .1); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#vh-cap .cc-prob:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(26, 26, 26, .14); border-color: var(--cc-red); }
#vh-cap .cc-prob-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#vh-cap .cc-prob-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--cc-pink); color: var(--cc-red); }
#vh-cap .cc-prob-go { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cc-line); border-radius: 50%; color: var(--cc-red); transition: border-color .2s ease, background .2s ease, color .2s ease; }
#vh-cap .cc-prob:hover .cc-prob-go { border-color: var(--cc-red); background: var(--cc-red); color: #FFFFFF; }
#vh-cap .cc-prob:hover .cc-arr { transform: translateX(4px); }
#vh-cap .cc-prob > .cc-no { margin-top: 24px; }
#vh-cap .cc-prob-t { margin-top: 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
#vh-cap .cc-prob-t a { color: var(--cc-ink); }
#vh-cap .cc-prob:hover .cc-prob-t a { color: var(--cc-red); }
#vh-cap .cc-prob-q { margin-top: 12px; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--cc-ink); text-wrap: pretty; }
#vh-cap .cc-prob-a { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--cc-muted); text-wrap: pretty; }
/* 设计指南：问题卡下面一排带边框的整卡链接（站内技术文章），不用「文字 + 箭头」式链接 */
#vh-cap .cc-guides { margin-top: 32px; }
#vh-cap .cc-guides-l { margin-bottom: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cc-muted); }
#vh-cap .cc-guides-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#vh-cap .cc-guides-list li { min-width: 0; display: flex; }
#vh-cap .cc-guide { flex: 1; min-width: 0; min-height: 64px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--cc-rule); border-radius: 10px; background: #FFFFFF; color: var(--cc-ink); font-size: 15px; line-height: 22px; font-weight: 600; transition: border-color .2s ease, transform .2s ease, color .2s ease; }
#vh-cap .cc-guide:hover { border-color: var(--cc-red); transform: translateY(-2px); color: var(--cc-red); }
#vh-cap .cc-guide-ico { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--cc-pink); color: var(--cc-red); }
#vh-cap .cc-guide-t { flex: 1; min-width: 0; text-wrap: pretty; }
#vh-cap .cc-guide .cc-arr { color: var(--cc-red); }
#vh-cap .cc-guide:hover .cc-arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- S4 质量与认证 */
#vh-cap .cc-qpts { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#vh-cap .cc-qpt { position: relative; padding-top: 20px; border-top: 2px solid var(--cc-ink); font-size: 16px; line-height: 27px; color: var(--cc-muted); text-wrap: pretty; }
#vh-cap .cc-qpt b { color: var(--cc-ink); }
#vh-cap .cc-qpt-bar { position: absolute; left: 0; top: -2px; width: 48px; height: 2px; background: var(--cc-red); transform-origin: left center; }
#vh-cap .cc-qpt-no { display: block; margin-bottom: 12px; }
#vh-cap .cc-certs { margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
#vh-cap .cc-cert { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--cc-rule); border-radius: 10px; overflow: hidden; background: #FFFFFF; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#vh-cap .cc-cert:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 26, 26, .1); border-color: var(--cc-red); }
#vh-cap .cc-cert-fig { padding: 20px; background-color: #EEF1F4; background-image: linear-gradient(rgba(26, 26, 26, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 26, 26, .05) 1px, transparent 1px); background-size: 16px 16px; }
#vh-cap .cc-cert-doc { position: relative; aspect-ratio: 210 / 297; overflow: hidden; padding: 13% 12%; display: flex; flex-direction: column; border-radius: 4px; background: #FFFFFF; box-shadow: 0 8px 20px rgba(138, 10, 24, .1); }
#vh-cap .cc-cert-doc--img { padding: 0; }
#vh-cap .cc-cert-doc--img img { width: 100%; height: 100%; object-fit: cover; }
#vh-cap .cc-cd-frame { position: absolute; inset: 5%; border: 1px solid #E8D5D8; border-radius: 2px; }
#vh-cap .cc-cd-frame--in { inset: 7%; border-color: #F2E6E8; }
#vh-cap .cc-cd-ring { position: relative; align-self: center; width: 22%; aspect-ratio: 1 / 1; border: 2px solid #C9D1DC; border-radius: 50%; }
#vh-cap .cc-cd-label { position: relative; font-size: 13px; line-height: 1.2; font-weight: 700; color: var(--cc-ink); white-space: nowrap; }
#vh-cap .cc-cert-doc--iso .cc-cd-label { margin-top: 10%; align-self: center; }
#vh-cap .cc-cd-lines { position: relative; margin-top: 10%; display: flex; flex-direction: column; align-items: center; gap: 7%; }
#vh-cap .cc-cd-lines--left { margin-top: 8%; align-items: stretch; gap: 6%; }
#vh-cap .cc-cd-bar { display: block; height: 0; padding-bottom: 5%; border-radius: 3px; background: #DCE1E8; }
#vh-cap .cc-cd-bar--ink { padding-bottom: 6%; background: var(--cc-ink); }
#vh-cap .cc-cd-bar--lt { padding-bottom: 9%; background: #E4E8EE; }
#vh-cap .cc-cd-foot { position: relative; margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8%; }
#vh-cap .cc-cd-sign { flex: 1; display: flex; flex-direction: column; gap: 10%; }
#vh-cap .cc-cd-seal { flex: none; width: 26%; aspect-ratio: 1 / 1; border: 2px solid var(--cc-red-hot); border-radius: 50%; box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px rgba(224, 33, 58, .35); }
#vh-cap .cc-cd-seal--sm { width: 22%; box-shadow: none; }
#vh-cap .cc-cd-row { display: flex; align-items: center; justify-content: space-between; gap: 8%; }
#vh-cap .cc-cd-code { flex: none; width: 16%; aspect-ratio: 1 / 1; border-radius: 2px; background: repeating-linear-gradient(90deg, #C9D1DC 0 2px, transparent 2px 4px); }
#vh-cap .cc-cd-table { margin-top: 10%; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 4px; }
#vh-cap .cc-cd-table span { height: 0; padding-bottom: 38%; border-radius: 2px; background: #EDF0F4; }
#vh-cap .cc-cd-table span.is-head { background: #C9D1DC; }
#vh-cap .cc-cd-end { margin-top: auto; display: flex; justify-content: flex-end; }
#vh-cap .cc-cert-doc--ce .cc-cd-lines { margin-top: 0; }
#vh-cap .cc-cd-big { flex: 1; display: flex; align-items: center; justify-content: center; }
#vh-cap .cc-cd-big .cc-cd-label { font-size: 32px; line-height: 1; letter-spacing: .04em; }
#vh-cap .cc-cert-b { flex: 1; padding: 16px 20px 20px; }
#vh-cap .cc-cert-t { margin-top: 4px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--cc-ink); }
#vh-cap .cc-cert-s { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--cc-muted); }
#vh-cap .cc-certs-more { min-width: 0; display: flex; }
#vh-cap .cc-cert-more { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-radius: 10px; background: var(--cc-red); color: #FFFFFF; transition: background .2s ease, transform .3s ease, box-shadow .3s ease; }
#vh-cap .cc-cert-more:hover { background: var(--cc-red-hover); color: #FFFFFF; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(138, 10, 24, .25); }
#vh-cap .cc-cert-more > svg { color: var(--cc-gold); }
#vh-cap .cc-cert-more-t { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 18px; line-height: 26px; font-weight: 600; }
#vh-cap .cc-cert-more:hover .cc-arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- S5 核心竞争力（品牌红平涂带） */
#vh-cap .cc-core { overflow: hidden; background: var(--cc-red); color: #FFFFFF; }
#vh-cap .cc-cores { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
#vh-cap .cc-corei { position: relative; min-width: 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .32); }
#vh-cap .cc-corei-bar { position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--cc-gold); transform-origin: left center; }
#vh-cap .cc-corei-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#vh-cap .cc-corei-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #FFFFFF; color: var(--cc-red); }
#vh-cap .cc-corei .cc-no { color: var(--cc-gold); }
#vh-cap .cc-corei-t { margin-top: 24px; font-size: 18px; line-height: 26px; font-weight: 600; color: #FFFFFF; }
#vh-cap .cc-corei-d { margin-top: 8px; font-size: 14px; line-height: 22px; color: #FFFFFF; text-wrap: pretty; }

/* ---------------------------------------------------------------- S6 客户 logo 墙（细线网格，最后一行剩余格子合成询盘格） */
#vh-cap .cc-logos { position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--cc-rule); border-radius: 10px; overflow: hidden; background: var(--cc-rule); }
#vh-cap .cc-logo { position: relative; min-width: 0; height: 88px; padding: 16px 14px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; transition: box-shadow .25s ease; }
#vh-cap .cc-logo:hover { z-index: 2; box-shadow: 0 12px 28px rgba(26, 26, 26, .14), inset 0 0 0 1px var(--cc-red); }
#vh-cap .cc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
#vh-cap .cc-logo:hover img { transform: scale(1.1); }
#vh-cap .cc-logo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cc-red); opacity: 0; transform-origin: left center; }
#vh-cap .cc-logo-cta { grid-column: span var(--cc-fd, 12); min-width: 0; min-height: 88px; display: flex; }
#vh-cap .cc-logo-cta a { flex: 1; min-width: 0; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--cc-red); color: #FFFFFF; transition: background .2s ease; }
#vh-cap .cc-logo-cta a:hover { background: var(--cc-red-hover); color: #FFFFFF; }
#vh-cap .cc-logo-cta a:hover .cc-arr { transform: translateX(4px); }
#vh-cap .cc-logo-cta-tx { display: flex; flex-direction: column; }
#vh-cap .cc-logo-cta-tx b { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
#vh-cap .cc-logo-cta-tx span { font-size: 14px; line-height: 20px; font-weight: 600; }

/* ---------------------------------------------------------------- S7 问答（左栏吸顶，右栏细线列表） */
#vh-cap .cc-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
#vh-cap .cc-faq-side { grid-column: 1 / 6; position: sticky; top: calc(var(--cc-top, 0px) + 96px); min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#vh-cap .cc-faq-side .cc-btns { margin-top: 16px; }
#vh-cap .cc-faq-list { grid-column: 7 / 13; min-width: 0; border-top: 2px solid var(--cc-ink); }
#vh-cap .cc-q { border-bottom: 1px solid #DADDE1; }
#vh-cap .cc-q-h { font-size: 18px; line-height: 26px; font-weight: 600; }
#vh-cap .cc-q-btn { width: 100%; min-height: 72px; padding: 20px 0; display: flex; align-items: center; gap: 24px; border: 0; background: none; font: inherit; color: var(--cc-ink); text-align: left; cursor: pointer; transition: color .15s ease; }
#vh-cap .cc-q-btn:hover, #vh-cap .cc-q.is-open .cc-q-btn { color: var(--cc-red); }
#vh-cap .cc-q-t { flex: 1; min-width: 0; text-wrap: pretty; }
#vh-cap .cc-q-ico { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--cc-line); border-radius: 10px; background: #FFFFFF; transition: border-color .2s ease, background .2s ease; }
#vh-cap .cc-q-ico::before, #vh-cap .cc-q-ico::after { content: ""; position: absolute; background: var(--cc-ink); }
#vh-cap .cc-q-ico::before { left: 9px; right: 9px; top: 14px; height: 2px; }
#vh-cap .cc-q-ico::after { top: 9px; bottom: 9px; left: 14px; width: 2px; }
#vh-cap .cc-q.is-open .cc-q-ico { border-color: var(--cc-red); background: var(--cc-red); }
#vh-cap .cc-q.is-open .cc-q-ico::before { background: #FFFFFF; }
#vh-cap .cc-q.is-open .cc-q-ico::after { display: none; }
#vh-cap .cc-a { padding: 0 56px 24px 0; font-size: 15px; line-height: 26px; color: var(--cc-muted); text-wrap: pretty; }
#vh-cap .cc-a[hidden] { display: none; }

/* ---------------------------------------------------------------- S8 收尾询盘条 */
#vh-cap .cc-cta-sec { padding: 64px 0; }
#vh-cap .cc-cta { padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; border: 1px solid var(--cc-rule); border-radius: 10px; background: #FFFFFF; }
#vh-cap .cc-cta-l { flex: 1 1 480px; min-width: 0; display: flex; align-items: flex-start; gap: 20px; }
#vh-cap .cc-cta-ico { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--cc-pink); color: var(--cc-red); }
#vh-cap .cc-cta-tx { min-width: 0; }
#vh-cap .cc-cta-h { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; color: var(--cc-ink); text-wrap: balance; }
#vh-cap .cc-cta-tx p { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--cc-muted); text-wrap: pretty; }
#vh-cap .cc-cta .cc-btns { flex: none; }

/* ---------------------------------------------------------------- 平板 700–1099 */
@media (max-width: 1099px) {
    #vh-cap .cc-hero-in { padding-top: 24px; padding-bottom: 48px; }
    #vh-cap .cc-hero-txt { margin-top: 24px; width: auto; }
    #vh-cap .cc-h1 { font-size: 40px; line-height: 48px; }
    #vh-cap .cc-lead { font-size: 18px; line-height: 28px; }
    #vh-cap .cc-anchors-row { height: 56px; }
    #vh-cap .cc-anchor { flex: none; }
    #vh-cap .cc-sec { padding: 56px 0; }
    #vh-cap .cc-h2 { font-size: 32px; line-height: 40px; }
    #vh-cap .cc-head { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-head-l, #vh-cap .cc-head-r { grid-column: auto; }
    #vh-cap .cc-head-r { justify-self: start; }
    #vh-cap .cc-head-r .cc-btns { justify-content: flex-start; }
    #vh-cap .cc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #vh-cap .cc-probs { padding-bottom: 40px; }
    #vh-cap .cc-band { padding: 56px 0 168px; }
    #vh-cap .cc-probs-wrap { margin-top: -120px; }
    #vh-cap .cc-probs-list { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-prob { padding: 24px; }
    #vh-cap .cc-guides-list { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #vh-cap .cc-cd-big .cc-cd-label { font-size: 28px; }
    #vh-cap .cc-cores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #vh-cap .cc-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #vh-cap .cc-logo { height: 80px; padding: 14px 12px; }
    #vh-cap .cc-logo-cta { grid-column: span var(--cc-ft, 6); min-height: 80px; }
    #vh-cap .cc-faq { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-faq-side, #vh-cap .cc-faq-list { grid-column: auto; }
    #vh-cap .cc-faq-side { position: static; }
    #vh-cap .cc-cta-sec { padding: 48px 0; }
    #vh-cap .cc-cta { padding: 24px; }
    #vh-cap .cc-cta-h { font-size: 24px; line-height: 32px; }
}

/* ---------------------------------------------------------------- 手机 <700 */
@media (max-width: 699px) {
    #vh-cap .cc-wrap { padding: 0 16px; }
    /* 两个按钮并排：自托管 Poppins 比设计稿的字宽一点点，390 宽时 24 的内边距会差 0.2px 折成两行 */
    #vh-cap .cc-btn { padding: 0 20px; }
    #vh-cap .cc-btn--gray { padding: 0 16px 0 20px; }
    #vh-cap .cc-btn--xs { padding: 0 16px 0 20px; }
    #vh-cap .cc-hero-in { padding-top: 16px; padding-bottom: 36px; }
    #vh-cap .cc-h1 { font-size: 30px; line-height: 38px; }
    #vh-cap .cc-sec { padding: 48px 0; }
    #vh-cap .cc-h2 { font-size: 28px; line-height: 36px; }
    #vh-cap .cc-stages { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-band { padding: 48px 0 136px; }
    #vh-cap .cc-probs-wrap { margin-top: -88px; }
    #vh-cap .cc-qpts { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #vh-cap .cc-cd-label { font-size: 12px; }
    #vh-cap .cc-cores { grid-template-columns: minmax(0, 1fr); }
    #vh-cap .cc-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #vh-cap .cc-logo { height: 72px; }
    #vh-cap .cc-logo-cta { grid-column: span var(--cc-fm, 3); min-height: 72px; }
    #vh-cap .cc-a { padding: 0 0 24px; }
    #vh-cap .cc-cta-l { flex-basis: 100%; }
    /* 设计稿手机版这里三个按钮不折行，390 宽时右边两个超出屏幕被裁掉；这里让按钮组占满一行、自动折行 */
    #vh-cap .cc-cta .cc-btns { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #vh-cap *, #vh-cap *::before, #vh-cap *::after { transition-duration: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 国内站中文版（html lang="zh"，config/core_competencies_cn.php）：H1 强调段另起一行，固定在逗号后换行
   （「核心能力：选型支持，」/「从样品到批量供货」）。不加这条时 text-wrap: balance 按字数对半拆，桌面会断成「选型支 / 持」 */
html[lang|="zh"] #vh-cap .cc-h1 .cc-acc { display: block; }