/*! QZ Cable — main.css（构建产物，请勿直接编辑）
 *  源码在 assets/css/src/，改完跑 bin/build-css.php 重新生成。
 *  生成时间：2026-09-30 10:36:40 UTC
 */

/* ==================== 00-tokens.css ==================== */
/* QZ Cable — 设计令牌（唯一一层 :root）
 *
 * 来源：demo v5.20 的 7 层 :root 坍缩而成。原文件里后层反复覆盖前层，
 * 直接搬运会带一堆永不生效的死声明，因此这里只保留每个令牌的最终生效值。
 *
 * 坍缩方式：双轨交叉验证，两轨逐条一致（0 分歧）后才落盘。
 *   轨 A  浏览器 CSSOM，按源码顺序取每个令牌最后一层声明
 *   轨 B  bin/extract/collapse_tokens.py 纯文本解析，同样取最后一层
 *
 * ⚠️ --chrome-h 是唯一需要人工裁决的一条：CSS 声明 114px，但运行时 JS 会把实测的
 *    顶栏高度写进 documentElement.style（采集时实测 95px）。此处取 CSS 设计值作兜底，
 *    JS 负责运行时校正 —— 不能反过来把某次实测值写死进 CSS。
 *
 * ⚠️ --utility-h 只存在于运行时 inline，CSS 中无声明，故不进本表。
 */

:root{

  /* ---- 原语 · 调色板 ---- */
  --amber-600: #8A5A00;
  --grey-100: #F4F3F1;
  --grey-200: #E7E5E1;
  --grey-300: #D5D2CC;
  --ink-2: #3A3945;   /* 3 层，覆盖：#454B54 → #3D3D3D */
  --ink-3: #6E6D76;   /* 3 层，覆盖：#5F666E → #6A6A6A */
  --ink-300: #9C9C9C;
  --ink-4: #9A99A2;   /* 3 层，覆盖：#828992 → #8A8A8A */
  --ink-500: #666666;
  --ink-700: #333333;
  --ink-900: #212121;
  --navy: #003366;
  --navy-050: #EBEFF4;
  --navy-100: #D8E3EE;
  --navy-2: #0A4A8C;
  --navy-3: #1565B8;
  --navy-50: #EDF2F7;
  --navy-700: #344D74;
  --navy-800: #2B3F5F;
  --navy-900: #202E46;
  --red-050: #FDF2F2;
  --red-100: #FAE5E6;
  --red-400: #EF4E53;
  --red-500: #E51017;
  --red-600: #E01018;
  --red-700: #BF0D13;
  --red-800: #9D0B10;
  --white: #FFFFFF;

  /* ---- 语义 · 颜色 ---- */
  --accent-ink: var(--brand-700);
  --bg: #FBFBFB;   /* 4 层，覆盖：#F2F4F7 → #FAFBFC → #FFFFFF */
  --bg-alt: var(--surface-2);   /* 3 层，覆盖：var(--grey-100) */
  --bg-inverse: var(--navy-900);
  --bg-page: var(--bg);   /* 3 层，覆盖：var(--white) */
  --bg-surface: var(--surface);   /* 3 层，覆盖：var(--white) */
  --border: var(--line);   /* 3 层，覆盖：var(--grey-300) */
  --border-soft: #EFEFEF;   /* 3 层，覆盖：var(--grey-200) → #EDF0F3 */
  --brand: #E80113;
  --brand-50: #FDF1F2;
  --brand-700: #C00010;
  --color-primary: var(--brand);   /* 2 层，覆盖：var(--red-600) */
  --color-primary-active: var(--red-800);
  --color-primary-hover: var(--brand-700);   /* 2 层，覆盖：var(--red-700) */
  --color-primary-soft: var(--red-050);
  --color-structure: var(--navy);   /* 3 层，覆盖：var(--navy-900) → var(--ink) */
  --color-structure-2: var(--navy-800);
  --color-structure-soft: var(--navy-050);
  --focus: var(--red-600);
  --ink: #0E0C1B;   /* 3 层，覆盖：#15181C → #1A1A1A */
  --line: #DFDFE2;   /* 3 层，覆盖：#E1E5EA → #E5E5E5 */
  --line-2: #C8C7CD;   /* 3 层，覆盖：#CED4DC → #D2D2D2 */
  --metal-dark: linear-gradient(180deg,#141220 0%,#0E0C1B 100%);   /* 3 层，覆盖：linear-gradient(180deg,#2A3038 0%,#1B2026 100%) → linear-gradient(180deg,#3F3F3F 0%,#2E2E2E 100%) */
  --metal-red: linear-gradient(180deg,#E8151D 0%,#D30F17 100%);
  --req: var(--brand);
  --rule: var(--line-2);   /* 3 层，覆盖：var(--ink-900) */
  --steel: #0E0C1B;   /* 2 层，覆盖：#383838 */
  --steel-2: #121519;   /* 2 层，覆盖：#2E2E2E */
  --surface: #FFFFFF;   /* 3 层，值未变 */
  --surface-2: #F2F3F5;   /* 4 层，覆盖：#F7F8FA → #F7F9FA → #F7F7F7 */
  --surface-3: #DFDFE2;   /* 4 层，覆盖：#EDF0F4 → #F1F4F6 → #EFEFEF */
  --text-body: var(--ink-2);   /* 2 层，覆盖：var(--ink-700) */
  --text-muted: var(--ink-3);   /* 2 层，覆盖：var(--ink-500) */
  --text-on-dark: rgba(255,255,255,.86);
  --text-strong: var(--ink);   /* 2 层，覆盖：var(--ink-900) */

  /* ---- 间距 ---- */
  --sp-1: 4px;   /* 2 层，值未变 */
  --sp-10: 96px;   /* 2 层，覆盖：40px */
  --sp-12: 96px;   /* 2 层，覆盖：48px */
  --sp-16: 128px;   /* 2 层，覆盖：64px */
  --sp-2: 8px;   /* 2 层，值未变 */
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-3: 12px;   /* 2 层，值未变 */
  --sp-4: 16px;   /* 2 层，值未变 */
  --sp-5: 24px;   /* 2 层，覆盖：20px */
  --sp-6: 32px;   /* 2 层，覆盖：24px */
  --sp-7: 48px;
  --sp-8: 64px;   /* 2 层，覆盖：32px */
  --sp-9: 80px;

  /* ---- 字号 ---- */
  --fs-2xl: 40px;   /* 2 层，覆盖：31px */
  --fs-2xs: 11px;   /* 2 层，值未变 */
  --fs-3xl: 64px;   /* 2 层，覆盖：39px */
  --fs-4xl: 49px;
  --fs-5xl: 61px;
  --fs-lg: 20px;   /* 2 层，值未变 */
  --fs-md: 16px;   /* 2 层，值未变 */
  --fs-sm: 14px;   /* 2 层，值未变 */
  --fs-xl: 28px;   /* 2 层，覆盖：25px */
  --fs-xs: 12px;   /* 2 层，值未变 */

  /* ---- 字体栈 ---- */
  --font-display: "Outfit","Plex Sans","Microsoft YaHei",sans-serif;
  --font-mono: "IBM Plex Mono",ui-monospace,Consolas,monospace;
  --font-sans: "Plex Sans","Microsoft YaHei",system-ui,sans-serif;

  /* ---- 圆角与阴影 ---- */
  --e1: none;   /* 2 层，覆盖：0 1px 2px rgba(21,24,28,.05) */
  --e2: none;   /* 2 层，覆盖：0 2px 6px rgba(21,24,28,.06), 0 8px 20px rgba(21,24,28,.06) */
  --e3: 0 24px 64px rgba(0,0,0,.28);   /* 2 层，覆盖：0 8px 20px rgba(21,24,28,.10), 0 32px 64px rgba(21,24,28,.14) */
  --r-lg: 0;   /* 3 层，覆盖：var(--r-none) → 6px */
  --r-md: 0;   /* 3 层，覆盖：var(--r-none) → 6px */
  --r-none: 0;   /* 3 层，值未变 */
  --r-pill: 0;   /* 3 层，覆盖：999px → 3px */
  --r-sm: 0;   /* 3 层，覆盖：var(--r-none) → 3px */
  --r-xs: 2px;
  --sh-1: none;   /* 3 层，覆盖：var(--e1) */
  --sh-2: none;   /* 3 层，覆盖：0 1px 0 var(--rule) → var(--e2) */
  --sh-3: var(--e3);   /* 3 层，覆盖：var(--sh-overlay) */
  --sh-overlay: 0 12px 24px rgba(20,20,20,.14), 0 2px 6px rgba(20,20,20,.08);

  /* ---- 动效 ---- */
  --dur: 180ms;   /* 2 层，值未变 */
  --dur-fast: 180ms;   /* 2 层，覆盖：120ms */
  --dur-slow: 300ms;   /* 2 层，覆盖：320ms */
  --ease: cubic-bezier(.2,.7,.25,1);   /* 2 层，覆盖：cubic-bezier(.2,0,.2,1) */

  /* ---- 层级 ---- */
  --z-drawer: 200;
  --z-nav: 100;
  --z-rail: 120;
  --z-toast: 300;

  /* ---- 布局与其他 ---- */
  --chrome-h: 114px;
  --wrap: 1300px;   /* 2 层，覆盖：1320px */
}

/* ==================== 01-fonts.css ==================== */
/* QZ Cable — 自托管字体。
   来源：demo v5.20 内嵌 base64（7 条）→ 脱嵌成 woff2。
   剔除 Plex Cond 700：全文仅在其自身 @font-face 中出现，三个字体栈令牌均未引用。
   保持全站零第三方外链（不接 Google Fonts）—— 与 demo 一致，兼顾海外访问稳定与隐私。 */

@font-face{
  font-family:'Outfit';
  src:url('../fonts/outfit-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Outfit';
  src:url('../fonts/outfit-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plex Sans';
  src:url('../fonts/plex-sans-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plex Sans';
  src:url('../fonts/plex-sans-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ==================== 02-reset-base.css ==================== */
/* QZ Cable — 02-reset-base.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.u-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.u-label{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.6;
  color:var(--text-body);background:var(--bg-page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
h1,h2,h3,h4,h5{margin:0;color:var(--text-strong);font-weight:700}
h1,h2{font-family:var(--font-display);text-transform:uppercase;line-height:1;letter-spacing:-.015em}
h1{font-size:clamp(36px,5.2vw,66px)}
h2{font-size:clamp(27px,3.4vw,44px)}
h3{font-family:var(--font-sans);font-size:clamp(18px,1.6vw,var(--fs-lg));line-height:1.28;letter-spacing:-.01em}
h4{font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.35}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.15em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--color-primary);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4}
.lede{font-size:var(--fs-lg);line-height:1.45;color:var(--text-strong)}
.btn .icon{font-size:1.05em}
.btn .icon{font-size:1.15em}
.link-more .icon{transition:transform var(--dur) var(--ease)}
.link-more:hover .icon{transform:translateX(4px)}
.hero__meta .icon{color:var(--red-500);font-size:14px}
.usp .icon{font-size:22px;color:var(--color-primary);margin-top:2px}
.tab[aria-selected="true"] .icon{color:#fff}
.sol-card__body li .icon{color:var(--color-primary);margin-top:4px;font-size:15px}
.contact-list .icon{font-size:20px;color:var(--red-500);margin-top:2px}
.rail .icon{font-size:20px}
.toast .icon{color:#4ADE80;font-size:20px}
.crumb .icon{font-size:12px}
.clampbox__btn .icon{transition:transform var(--dur) var(--ease)}
.clampbox.is-open .clampbox__btn .icon{transform:rotate(180deg)}
.schema-faq-section.is-open .faq__q .icon{transform:rotate(45deg)}
.faq__q .icon{margin-left:auto;font-size:18px;color:var(--color-primary);transition:transform var(--dur) var(--ease)}
.faq__item.is-open .faq__q .icon{transform:rotate(45deg)}
.pdp__std .icon{color:var(--color-primary);font-size:18px}
.bullets .icon{color:var(--color-primary);margin-top:4px;font-size:15px}
.opts .icon{color:var(--color-primary);font-size:18px}
.certwall .icon{width:21px;height:21px}
::selection{background:var(--color-primary);color:#fff}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.btn .icon:last-child:not(:first-child){transition:transform var(--dur) var(--ease)}
.btn:hover .icon:last-child:not(:first-child){transform:translateX(3px)}
@media (max-width:900px){
  body{padding-bottom:58px}
  html{scroll-padding-top:120px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
body{background:var(--bg);color:var(--ink-2);line-height:1.65}
h1,h2{font-family:var(--font-sans);text-transform:none;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
h1{font-size:clamp(36px,4.8vw,64px)}
h2{font-size:clamp(28px,3.2vw,40px)}
.lede{color:var(--ink-2)}
table{background:var(--surface)}
th,td{border-color:var(--line)}
td{color:var(--ink-2);font-size:var(--fs-sm)}
.hero__meta .icon{color:var(--ink-4)}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);box-shadow:none;font-size:var(--fs-md)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:2px solid rgba(224,16,24,.2);outline-offset:1px}
.contact-list .icon{color:var(--ink-4)}
.icon{width:20px;height:20px;font-size:20px}
.hero__meta .icon,.utility .icon,.contact-list .icon,.footer .icon,.news-kicker .icon,
.cat__body .icon,.link-more .icon,.crumb .icon,.prod__std .icon,.xsec .icon,
.utility__tag .icon,.review .icon,.stars .icon{width:16px;height:16px;font-size:16px}
.rail .icon,.icon-btn .icon,.hero__arrows .icon,.casemodal__close .icon{width:24px;height:24px;font-size:24px}
.usp .icon,.bullets .icon,.opts .icon,.pdp__std .icon,.sol-card__body li .icon,.faq__q .icon{width:20px;height:20px;font-size:20px;color:var(--ink-4)}
.certwall__ic .icon{width:20px;height:20px;font-size:20px;flex:none}
.u-label{color:var(--ink-2)}
.u-label{color:var(--brand-700)}
.certbar .icon{width:20px;height:20px}
.fam-tab .icon{width:20px;height:20px}
.fam__links .icon{width:16px;height:16px;color:var(--ink-4);flex:none}
.fam__links a:hover .icon{color:var(--brand-700)}
.pbanner .crumb .icon{color:rgba(255,255,255,.42)}
body{background:var(--surface)}
h1{font-size:clamp(32px,3.6vw,52px);letter-spacing:-.022em;line-height:1.06}
h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.018em;line-height:1.14}
h3,h4{letter-spacing:-.012em}
[data-band="steel"] .pmap__more,[data-band="steel"] .link-more,[data-band="steel"] .pmap__more .icon{color:#FFA8AD}
.footer__social .icon,.pdp__share .icon{width:18px;height:18px}
.footer__contact .icon{width:16px;height:16px;flex:none;margin-top:4px;color:rgba(255,255,255,.55)}
.hero__arrows button .icon{width:20px;height:20px;stroke-width:2.4}
.hero__arrows button:hover,.hero__arrows button:focus-visible{background-color:var(--navy);border-color:var(--navy);color:#fff}
[data-band="steel"] .pmap__cards .pmap__more,
[data-band="steel"] .pmap__cards .pmap__more .icon{color:#E01018}
body:not(.is-top) .utility .icon{color:var(--ink-4)}
.hero__facts .icon{width:15px;height:15px;flex:none;opacity:.92}
.fam__links a:hover .icon{color:#fff}
.footer__contact .icon{color:rgba(255,255,255,.82)}
.fam__tabs .fam-tab[aria-selected="true"] .fam-tab__ic svg,
.fam__tabs .fam-tab[aria-selected="true"] .fam-tab__ic .icon{color:#fff}
.casemeta__k .icon{width:14px;height:14px}
mark{background:rgba(232,1,19,.10);color:inherit;border-radius:2px;padding:0 2px;font-weight:650}

/* ==================== 03-layout.css ==================== */
/* QZ Cable — 03-layout.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-5)}
.section{padding-block:clamp(48px,6vw,var(--sp-24))}
.section--alt{background:var(--bg-alt);
  background-image:
    linear-gradient(to right, rgba(33,33,33,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33,33,33,.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(33,33,33,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33,33,33,.022) 1px, transparent 1px);
  background-size:64px 64px,64px 64px,8px 8px,8px 8px;}
.section-head::after{content:"";position:absolute;top:-2px;right:0;width:132px;height:9px;pointer-events:none;
  background:repeating-linear-gradient(to right,
    var(--rule) 0 1px, transparent 1px 11px);}
.section-head::after{opacity:.55}
/* 原有一条 @media(max-width:700px){.section-head::after{display:none}}
   实测两侧计算值都是 none —— 768px 那条已经把它隐藏了，这条永远改不动东西。
   demo 上同样是死的，删了零视觉变化。 */
.section--tight{padding-block:clamp(36px,4vw,var(--sp-16))}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-3);
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-primary);margin-bottom:var(--sp-4);}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.section-head{position:relative;max-width:none;margin-bottom:clamp(28px,3vw,var(--sp-12));
  padding-top:var(--sp-5);border-top:2px solid var(--rule);}
.section-head[data-no]{padding-left:72px}
.section-head[data-no]::before{content:attr(data-no);position:absolute;top:var(--sp-5);left:0;
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;
  color:var(--color-primary);letter-spacing:.08em;}
.section-head p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-md);max-width:68ch}
.section-head--center{text-align:left}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:36px}
.hero__copy .eyebrow{color:#fff}
.hero__copy .eyebrow::before{background:var(--color-primary);width:34px;height:2px}
.hero__nav .wrap{display:flex;align-items:center;gap:var(--sp-4)}
.about__media .stack{position:absolute;right:-6%;bottom:-12%;width:52%;
  border:3px solid var(--bg-alt);outline:1px solid var(--rule);box-shadow:none}
.form-band .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,4vw,var(--sp-16));align-items:start}
.form-band .eyebrow{color:#fff}
.pbanner{position:relative;background:var(--color-structure);color:#fff;overflow:hidden}
.pbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.pbanner__body{position:relative;padding-block:clamp(40px,5vw,var(--sp-20))}
.pbanner h1{color:#fff;max-width:22ch}
.pbanner p{margin-top:var(--sp-5);max-width:62ch;color:rgba(255,255,255,.82);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.28)}
.crumb{display:flex;align-items:center;gap:var(--sp-2);color:rgba(255,255,255,.72);
  margin-bottom:var(--sp-5);flex-wrap:wrap;
  font-family:var(--font-sans);font-size:var(--fs-xs);letter-spacing:.005em;}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb--light{color:var(--text-muted)}
.pdp .schema-faq,.block .schema-faq{max-width:none;margin-inline:0}
.pdp__head .eyebrow{margin-bottom:var(--sp-3)}
.subnav .wrap{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.block{padding-block:clamp(32px,4vw,var(--sp-16));border-bottom:1px solid var(--border)}
.block:last-child{border-bottom:0}
.block__title{display:flex;align-items:flex-end;gap:var(--sp-5);margin-bottom:var(--sp-8);padding-bottom:var(--sp-3);border-bottom:2px solid var(--rule)}
.block__title h2{font-size:clamp(24px,2.6vw,36px)}
.block__title::after{content:"";flex:1}
.section-head{position:relative}
@media (max-width:900px){
  .about__media .stack{display:none}
  .utility .wrap{justify-content:center}
  .section-head[data-no]{padding-left:0;padding-top:var(--sp-8)}
  .section-head[data-no]::before{top:var(--sp-4)}
}
.v4-light,.v4-light.section{background:var(--surface-2);color:var(--ink-2)}
.section{padding-block:clamp(64px,7vw,96px)}
.section--alt{background:var(--surface-2);background-image:none}
.section--tight{padding-block:clamp(48px,5vw,64px)}
.eyebrow,thead th,.flagtag{text-transform:uppercase}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--ink-3)}
.eyebrow::before{width:18px;height:1px;background:var(--brand)}
.section-head{border-top:0;padding-top:0;margin-bottom:clamp(24px,3vw,40px)}
.section-head::after{display:none}
.section-head[data-no]{padding-left:0}
.section-head[data-no]::before{content:attr(data-no);position:static;display:block;margin-bottom:var(--sp-2);
  background:none;box-shadow:none;padding:0;min-width:0;height:auto;
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.14em;color:var(--ink-4)}
.section-head p{max-width:68ch;color:var(--ink-3)}
.hero__copy .eyebrow{color:var(--ink-3)}
.form-band h2,.form-band .eyebrow{color:var(--ink)}
.home-cases .section-head h2{color:var(--ink)}
.home-cases .section-head p{color:var(--ink-3)}
.pbanner{background-image:var(--metal-dark)}
.crumb,.crumb a{color:rgba(255,255,255,.74);font-size:var(--fs-sm)}
.crumb--light,.crumb--light a{color:var(--ink-3)}
.section{position:relative}
.section[id]::before,.home-families::before,.home-about::before,.home-solutions::before,
.home-cases::before,.home-news::before,.home-resources::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.section-head[data-no]{position:relative;padding-top:var(--sp-5)}
.section-head[data-no]::after{content:"";position:absolute;top:0;left:0;width:32px;height:2px;background:var(--brand);display:block}
.section--alt,.v4-light.section{background-image:linear-gradient(180deg,rgba(21,24,28,.022) 0,rgba(21,24,28,0) 24px),
                   linear-gradient(0deg,rgba(21,24,28,.022) 0,rgba(21,24,28,0) 24px)}
@media(max-width:768px){
  .hero__nav .wrap{flex-wrap:wrap;row-gap:var(--sp-3)}
}
.section{padding-block:clamp(40px,4.5vw,64px)}
.section--tight{padding-block:clamp(28px,3vw,44px)}
.section-head{margin-bottom:clamp(18px,2vw,28px)}
.pbanner{background-color:#0F3B76;
  background-image:linear-gradient(96deg,#0B2C5E 0%,#134479 46%,#17509B 100%);color:#fff}
.pbanner img{opacity:.44;filter:grayscale(.28) brightness(.62) contrast(1.04)}
.pbanner__body{padding-block:clamp(26px,3.2vw,46px)}
.pbanner h1{color:#fff}
.pbanner .crumb,.pbanner .crumb a{color:rgba(255,255,255,.82)}
.pbanner .crumb a:hover{color:#fff}
.block__sub{margin-top:var(--sp-8)}
.block__subtitle{margin-bottom:var(--sp-4)}
.section-head h2,.block__title h2{margin-bottom:0}
[data-band="white"]{background-color:var(--surface) !important;background-image:none !important}
[data-band="light"]{background-color:var(--surface-2) !important;background-image:none !important}
[data-band="steel"]{background-color:var(--steel) !important;background-image:none !important;
  --surface:#454545; --surface-2:#3E3E3E; --surface-3:#4C4C4C;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.66); --ink-4:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.24);
  --text-strong:#fff; --text-body:rgba(255,255,255,.86); --text-muted:rgba(255,255,255,.66);
  --border:rgba(255,255,255,.16); --bg-surface:#454545; --bg-alt:#3E3E3E; --color-structure:#fff;
  color:rgba(255,255,255,.86);}
[data-band="steel"] h2,[data-band="steel"] h3,[data-band="steel"] h4,[data-band="steel"] b,[data-band="steel"] .stat__num{color:#fff}
[data-band="steel"] .eyebrow,[data-band="steel"] .stat__label{color:rgba(255,255,255,.66)}
[data-band="steel"] .section-head[data-no]::before{color:rgba(255,255,255,.4)}
[data-band="steel"] .pmap__map{background:#454545}
[data-band="steel"] .pmap__land{fill:#5A5A5A;stroke:#6E6E6E}
[data-band="steel"] .pmap__tip,[data-band="steel"] .pmap__chipdot{color:#1A1A1A}
[data-band="steel"] .pmap__region{color:rgba(255,255,255,.86);background:transparent;border-color:rgba(255,255,255,.3)}
[data-band="steel"] .pmap__region:hover{color:#fff;background:rgba(255,255,255,.12)}
[data-band="steel"] .pmap__region[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-band="steel"] .pmap__more:hover{color:#FFC9CC}
[data-band="steel"] .btn--ghost{background-color:var(--brand);color:#fff;border-color:var(--brand)}
[data-band="steel"] .btn--ghost:hover{background-color:#fff;color:var(--brand);border-color:#fff}
.block[data-band]{padding-block:clamp(36px,4vw,60px);margin-block:0;
  box-shadow:-100vmax 0 0 var(--band,transparent),100vmax 0 0 var(--band,transparent);clip-path:inset(0 -100vmax)}
.block[data-band="white"]{--band:var(--surface);background:var(--surface)}
.block[data-band="light"]{--band:var(--surface-2);background:var(--surface-2)}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.hero__copy .eyebrow{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
.section--alt:not([data-band]){background-color:transparent}
.v4-light:not([data-band]),.v4-light.section:not([data-band]){background-color:transparent}
@media(max-width:768px){
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
}
.hero__nav .wrap{position:relative}
.hero .eyebrow,.hero__meta{display:none}
[data-band="steel"]{--surface:#14396C;--surface-2:#0F3160;--surface-3:#17427A}
[data-band="steel"] .pmap__land{fill:#2A5590;stroke:#3D6BAA}
[data-band="steel"] .pmap__map{background:#0F3160}
.eyebrow::before{background:var(--color-primary)}
.section-head[data-no]{padding-left:0;padding-top:0}
.section-head[data-no]::before,.section-head[data-no]::after{display:none}
.section-head{margin-top:0}
.section-head .eyebrow{margin-top:0}
.section{padding-block:clamp(32px,3.4vw,52px)}
.section--tight{padding-block:clamp(22px,2.4vw,34px)}
.section-head{margin-bottom:clamp(14px,1.6vw,22px)}
.pbanner{min-height:216px;display:flex;align-items:center}
.pbanner__body{padding-block:var(--sp-6);width:100%}
.pbanner h1{display:block;margin:0;font-size:clamp(30px,3.4vw,44px);line-height:1.06;letter-spacing:-.01em}
.pbanner .crumb{font-size:var(--fs-md);margin-bottom:var(--sp-5)}
.pbanner__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap}
.pbanner__eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:10px}
.pbanner__facts{display:flex;gap:var(--sp-8);list-style:none;margin:0;padding:12px 18px;
  background:rgba(9,34,72,.62)}
.pbanner__facts li{display:flex;flex-direction:column;gap:3px;padding-left:14px;
  border-left:2px solid rgba(255,255,255,.26)}
.pbanner__facts b{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;color:#fff;
  letter-spacing:.02em;line-height:1.15}
.pbanner__facts span{font-size:var(--fs-xs);color:rgba(255,255,255,.93);letter-spacing:.04em}
@media(max-width:960px){
  .pbanner__facts{display:none}
}
@media(max-width:768px){
  .pbanner{min-height:150px}
}
.hero__slide:nth-of-type(1) .hero__copy .eyebrow{text-shadow:0 1px 6px rgba(2,10,24,.6)}
.hero__copy .eyebrow{color:rgba(255,255,255,.7)}
.hero__copy .eyebrow::before{background:var(--color-primary)}
.block[data-band]{padding-block:clamp(26px,2.8vw,40px)}
.block__title{margin-bottom:var(--sp-4);border-bottom:0;padding-bottom:0}
.block__title::after{display:none}
.block--factory .gal-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.block--packing .spec-2col{grid-template-columns:5fr 6fr;align-items:stretch;gap:var(--sp-6)}
.block--packing .spec-2col > img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:0}
.block--packing .spec-2col > div{display:flex;align-items:center}
.block--packing .bullets{display:grid;gap:var(--sp-4);width:100%}
.block--packing .bullets li{align-items:flex-start;padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.block--packing .bullets li:last-child{border-bottom:0;padding-bottom:0}
@media(max-width:900px){
  .block--packing .spec-2col{grid-template-columns:1fr}
  .block--packing .spec-2col > img{min-height:200px}
}
.section-head > p{display:none}
.section-head{margin-bottom:var(--sp-4)}
.section-head h2{margin-bottom:0}
.section{padding-block:clamp(20px,2vw,30px)}
.section--tight{padding-block:clamp(14px,1.4vw,20px)}
.block[data-band]{padding-block:clamp(20px,2vw,30px)}
.block__title{border-bottom:0}
[data-band="steel"]{position:relative;isolation:isolate}
[data-band="light"],[data-band="white"]{position:relative;isolation:isolate;overflow:hidden}
[data-band="light"]::after,[data-band="white"]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
[data-band="light"] > .wrap,[data-band="white"] > .wrap{position:relative}
[data-band="steel"] .wrap{position:relative}
@media(max-width:768px){
  [data-band="light"]::after,[data-band="white"]::after{width:70vw;opacity:.7}
}
[data-band="steel"]{background-color:#20262C !important}
[data-band="steel"]::after{content:"";position:absolute;inset:0;z-index:-1;opacity:1;
  background-image:
    linear-gradient(158deg,rgba(26,32,38,.72) 0%,rgba(21,26,32,.79) 52%,rgba(15,19,24,.86) 100%),
    var(--band-img,none);
  background-size:cover,cover;
  background-position:center,center 42%;
  background-repeat:no-repeat,no-repeat;
  filter:none}
[data-band="steel"]::before{content:none}
[data-band="steel"]{--surface:#2B3239;--surface-2:#20262C;--surface-3:#343C44;
  --line:rgba(255,255,255,.20);--line-2:rgba(255,255,255,.28)}
[data-band="steel"] .pmap__land{fill:#FFFFFF;stroke:rgba(255,255,255,.45)}
[data-band="steel"] .pmap__map{background:rgba(255,255,255,.05)}
[data-band="steel"] .link-more{color:#fff}
[data-band="steel"] .pmap__cards{background:#fff;border-color:rgba(255,255,255,.26)}
[data-band="steel"] .pmap__body{background:#fff}
/* 16-c-map 的 .casecard .pmap__body{background:var(--surface)} concat 排在本文件之后、
   同权重(0,2,0)会压过上面那条白底 → steel 段里案例卡正文变深灰(与 demo 不符)。
   用更高特异性(0,3,0)锁死白底，不依赖 concat 顺序。 */
[data-band="steel"] .casecard .pmap__body{background:#fff}
[data-band="steel"] .pmap__body h3,[data-band="steel"] .pmap__body dd,
[data-band="steel"] .pmap__body b{color:#0E1B2E}
[data-band="steel"] .pmap__body dt,[data-band="steel"] .pmap__loc{color:#5B6B84}
[data-band="steel"] .pmap__cards .pmap__more:hover{color:#B00C13}
.section{padding-block:clamp(20px,2vw,30px)}
.section--tight{padding-block:clamp(14px,1.4vw,20px)}
.section-head{margin-bottom:clamp(10px,1.2vw,16px)}
.single-product .block[data-band],.single-product .block[data-band="light"],.single-product .block[data-band="white"]{background:var(--surface) !important;--band:var(--surface);box-shadow:none;clip-path:none}
.home-resources .wrap > div:last-child{margin-top:var(--sp-5) !important}
.form-band .wrap{align-items:stretch}
@media(max-width:900px){
  .form-band .wrap{align-items:start}
}
.hero__copy .eyebrow{color:rgba(255,255,255,.84)}
.page-products .pbanner__eyebrow,.page-products .pbanner h1,.page-products .pbanner__row > div:first-child{display:none}
.page-products .pbanner__row{justify-content:center}
.page-products .pbanner__facts{margin:0 auto}
.home-reviews .section-head .eyebrow{display:none}
.home-reviews .section-head h2{text-transform:uppercase;font-weight:700;
  font-size:clamp(19px,1.8vw,25px);letter-spacing:.005em}
.masthead .wrap{min-height:52px}
.masthead .wrap nav{justify-content:flex-start;margin-left:var(--sp-7)}
.casemeta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-6);background:var(--surface-2)}
.casemeta__i{display:flex;flex-direction:column;gap:6px}
.casemeta__k{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--brand);text-transform:uppercase;letter-spacing:.08em}
.casemeta__i b{font-size:var(--fs-md);color:var(--ink);line-height:1.35}
@media(max-width:760px){
  .casemeta{grid-template-columns:1fr;gap:var(--sp-4)}
}
.section-head > h2:first-child{margin-top:0}
.section-head > h2 + .eyebrow{margin-top:var(--sp-3);display:flex;align-items:center}

/* ==================== 10-c-chrome.css ==================== */
/* QZ Cable — 10-c-chrome.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.utility{background:var(--color-structure);color:var(--text-on-dark);
  font-family:var(--font-sans);font-size:var(--fs-xs);letter-spacing:.005em;}
.utility__tag{display:flex;align-items:center;gap:var(--sp-2)}
.utility__list{display:flex;align-items:center;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.utility a{display:inline-flex;align-items:center;gap:6px;padding-block:8px}
.utility a:hover{color:#fff}
.utility .sep{width:1px;height:14px;background:rgba(255,255,255,.25)}
.masthead{position:sticky;top:0;z-index:var(--z-nav);background:var(--bg-surface);border-bottom:2px solid var(--rule);transition:box-shadow var(--dur) var(--ease)}
.masthead.is-stuck{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:var(--sh-2)}
.masthead__inner{display:flex;align-items:center;gap:var(--sp-6);min-height:72px}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex:none;padding-block:var(--sp-2);color:var(--color-primary)}
.brand__mark{width:42px;height:42px;flex:none}
.brand__type{display:grid;gap:2px;padding-left:var(--sp-3);border-left:1px solid var(--border)}
.brand__type b{font-family:var(--font-display);font-size:24px;line-height:1;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);}
.brand__type i{font-style:normal;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;}
.brand--sm .brand__mark{width:34px;height:34px}
.brand--sm .brand__type b{font-size:20px}
.brand--inv{color:#fff}
.brand--inv .brand__type{border-left-color:rgba(255,255,255,.28)}
.brand--inv .brand__type b{color:#fff}
.brand--inv .brand__type i{color:rgba(255,255,255,.6)}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:var(--sp-1);list-style:none;margin:0;padding:0}
.nav__link{display:inline-flex;align-items:center;gap:6px;padding:var(--sp-3) var(--sp-3);
  min-height:48px;color:var(--text-strong);position:relative;white-space:nowrap;
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.005em;}
.nav__link::after{content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:12px;height:2px;
  background:var(--color-primary);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);}
.nav__link:hover::after,.nav__item.is-open>.nav__link::after,.nav__link[aria-current]::after{transform:scaleX(1)}
.nav__link[aria-current]{color:var(--color-primary)}
.nav__item{position:relative}
.nav__caret{transition:transform var(--dur) var(--ease)}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 1px);left:50%;transform:translate(-50%,8px);
  width:min(940px,94vw);background:var(--bg-surface);border:1px solid var(--rule);
  border-top:3px solid var(--color-primary);border-radius:var(--r-none);
  box-shadow:var(--sh-3);padding:var(--sp-6);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2) var(--sp-8);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);}
.nav__item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega__item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);min-height:56px}
.mega__item:hover{background:var(--color-structure-soft)}
.mega__item img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-sm);flex:none;background:var(--grey-100)}
.mega__item b{display:block;font-size:var(--fs-sm);color:var(--text-strong);font-weight:650}
.mega__item span{font-size:var(--fs-xs);color:var(--text-muted)}
.mega__foot{grid-column:1/-1;border-top:1px solid var(--border-soft);margin-top:var(--sp-2);padding-top:var(--sp-4);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.head-tools{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.burger{display:none}
.searchbar{max-height:0;overflow:hidden;border-top:1px solid transparent;transition:max-height var(--dur-slow) var(--ease)}
.searchbar.is-open{max-height:110px;border-top-color:var(--border-soft)}
.searchbar form{display:flex;gap:var(--sp-3);padding-block:var(--sp-4)}
.searchbar input{flex:1;min-height:48px;padding:0 var(--sp-4);border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--bg-alt)}
.searchbar input:focus{border-color:var(--color-structure);background:#fff;outline:none}
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(32,46,70,.5);opacity:0;transition:opacity var(--dur) var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(380px,88vw);background:#fff;
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4);border-bottom:1px solid var(--border-soft)}
.drawer nav{padding:var(--sp-2) var(--sp-4) var(--sp-6)}
.drawer nav a{display:block;padding:var(--sp-4) 0;border-bottom:1px solid var(--border-soft);font-weight:650;color:var(--text-strong)}
.drawer nav a.sub{padding-left:var(--sp-4);font-weight:500;font-size:var(--fs-sm);color:var(--text-body)}
.drawer__cta{padding:var(--sp-4);border-top:1px solid var(--border-soft);display:grid;gap:var(--sp-3);margin-top:auto}
.rail{position:fixed;right:20px;top:56%;transform:translateY(-50%);z-index:var(--z-rail);display:grid;gap:10px}
.rail a,.rail button{position:relative;width:48px;height:48px;display:grid;place-items:center;
  background:var(--bg-surface);color:var(--text-strong);border:1px solid var(--border);
  box-shadow:var(--sh-overlay);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),
             opacity var(--dur) var(--ease),visibility 0s linear;}
.rail a:hover,.rail button:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.rail a:active,.rail button:active{transform:scale(.94)}
.rail__tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(4px,-50%);
  background:var(--color-structure);color:#fff;font-family:var(--font-mono);
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.rail [data-top]{opacity:0;visibility:hidden;transform:translateY(-8px);margin-top:8px}
.rail.rail--top [data-top]{opacity:1;visibility:visible;transform:none}
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:inline-flex}
}
@media (max-width:900px){
  .masthead__inner{min-height:64px}
  .brand__mark{width:34px;height:34px}
  .brand__type b{font-size:20px}
  .brand__type i{display:none}
  .rail{left:0;right:0;top:auto;bottom:0;transform:none;grid-auto-flow:column;grid-template-columns:repeat(4,1fr);gap:0}
  .rail a,.rail button{width:auto;height:58px;border:0;box-shadow:none;background:var(--color-structure);color:#fff;gap:3px;grid-template-rows:auto auto;place-content:center}
  .rail a:hover,.rail button:hover{background:var(--color-primary)}
  .rail__tip{position:static;opacity:1;visibility:visible;transform:none;background:transparent;padding:0;font-size:10px;letter-spacing:.08em}
  .rail [data-top]{opacity:1;visibility:visible;transform:none;margin-top:0}
  .utility__tag{display:none}
}
@media print{
  .rail,.utility,.subnav{display:none}
}
.utility{background-image:var(--metal-dark);color:rgba(255,255,255,.74);border:0;font-size:var(--fs-xs)}
.utility a{color:rgba(255,255,255,.78)}
.utility a:hover{color:#fff}
.masthead{background:rgba(242,244,247,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:none}
.masthead.is-stuck{background:rgba(242,244,247,.97);box-shadow:none}
.brand__type b{color:var(--ink)}
.brand__type i{color:var(--ink-3)}
.brand__mark{color:var(--brand)}
.nav__link{color:var(--ink-2);font-weight:500;font-size:var(--fs-md)}
.nav__link::after{display:none}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current]{color:var(--brand-700)}
.mega,.searchbar,.drawer__panel{background:var(--surface);background-image:none;border-color:var(--line)}
.mega{box-shadow:var(--e3);border-radius:var(--r-md)}
.brand__type i{font-size:var(--fs-2xs)}
.rail a,.rail button{color:var(--ink-2);box-shadow:var(--e2)}
.rail a:hover,.rail button:hover{background-color:var(--brand);border-color:var(--brand-700);color:#fff}
.rail__tip{background-image:none;background-color:var(--ink);color:#fff;border:0;
  border-radius:var(--r-sm);font-size:var(--fs-xs)}
.utility__lang{display:inline-flex;align-items:center;gap:6px;color:inherit}
.brandmark{gap:var(--sp-3)}
.brandmark .brand__mark{width:42px;height:42px;color:var(--brand)}
.brandmark__rule{width:1px;height:32px;background:var(--line-2);display:block}
.brandmark .brand__type b{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.1em;color:var(--ink);line-height:1.05}
.brandmark .brand__type i{font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.langsw{position:relative}
.langsw__btn{display:inline-flex;align-items:center;gap:6px;color:inherit;font-size:inherit;cursor:pointer;padding:2px 0}
.langsw__caret{width:12px;height:12px;transition:transform var(--dur) var(--ease)}
.langsw__btn[aria-expanded="true"] .langsw__caret{transform:rotate(180deg)}
.langsw__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:var(--z-drawer);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--e3);min-width:150px;padding:4px 0}
.langsw__menu[hidden]{display:none}
.langsw__menu li{padding:8px 14px;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.langsw__menu li:hover,.langsw__menu li:focus{background:var(--surface-2);color:var(--ink);outline:none}
.langsw__menu li[aria-selected="true"]{color:var(--brand);font-weight:600}
@media(max-width:768px){
  .brandmark{gap:var(--sp-2)}
  .brandmark .brand__mark{width:34px;height:34px}
  .brandmark__rule{display:none}
  .brandmark .brand__type i{display:none}
  .brandmark .brand__type b{font-size:16px;letter-spacing:.06em}
}
.langsw--nav{margin-right:var(--sp-1)}
.langsw--nav .langsw__btn{height:46px;padding:0 var(--sp-3);border:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-sm)}
.langsw--nav .langsw__btn:hover{border-color:var(--ink-4);color:var(--ink)}
.langsw--nav .langsw__btn b{font-weight:600}
.langsw--nav .langsw__menu{top:calc(100% + 6px)}
@media(max-width:900px){
  .langsw--nav .langsw__btn b,.langsw--nav .langsw__caret{display:none}
  .langsw--nav .langsw__btn{width:46px;padding:0;justify-content:center}
}
@media(max-width:768px){
  .langsw--nav{display:none}
}
.drawer__lang{display:none;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);gap:var(--sp-3);flex-direction:column}
.drawer__lang > span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.drawer__lang > div{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.drawer__lang button{min-width:44px;padding:8px 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer}
.drawer__lang button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:768px){
  .drawer__lang{display:flex}
}
.utility{background-image:none;background-color:var(--navy);color:rgba(255,255,255,.82)}
.utility a{color:rgba(255,255,255,.82)}
.utility a:hover{color:#fff}
.utility__tag{color:rgba(255,255,255,.9)}
.masthead{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.nav__link{color:var(--ink-2)}
.nav__link:hover{color:var(--navy)}
.nav__link[aria-current]{color:var(--color-primary)}
.brandmark .brand__type b{color:var(--navy)}
.utility{padding-block:6px}
.masthead__inner{min-height:64px}
.head-tools .btn{min-height:40px !important}
.icon-btn,.langsw--nav .langsw__btn{height:40px}
.langsw--nav .langsw__btn{padding:0 var(--sp-2)}
.brandmark .brand__mark{width:36px;height:36px}
.brandmark__rule{height:28px}
.brandmark .brand__type b{font-size:17px}
.rail{top:50%}
.utility{position:fixed;top:0;left:0;right:0;z-index:61;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.masthead{position:fixed;top:var(--utility-h,44px);left:0;right:0;z-index:60;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
body:not(.is-top) .masthead{box-shadow:0 1px 0 rgba(14,12,27,.06),0 6px 22px rgba(14,12,27,.08)}
body.is-top .utility{background-color:transparent;background-image:none;border-bottom:0}
body.is-top .utility,body.is-top .utility a,body.is-top .utility__tag{color:rgba(255,255,255,.94)}
body.is-top .utility a:hover{color:#fff}
body.is-top .masthead{background:transparent;border-bottom-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.is-top .nav__link,body.is-top .nav__link:hover{color:#fff}
body.is-top .nav__link[aria-current]{color:#fff}
body.is-top .brand__type b{color:#fff}
body.is-top .brand__type i{color:rgba(255,255,255,.74)}
body.is-top .brand__mark{color:var(--brand)}
body.is-top .icon-btn{color:#fff;border-color:rgba(255,255,255,.42);background:transparent}
body.is-top .icon-btn:hover{background:rgba(255,255,255,.14)}
body.is-top .head-tools button:not(.btn){color:#fff;border-color:rgba(255,255,255,.42);background:transparent}
body:not(.is-top) .utility{background-color:#fff;background-image:none;
  border-bottom:0;color:var(--ink-3)}
body:not(.is-top) .utility,body:not(.is-top) .utility a,
body:not(.is-top) .utility__tag{color:var(--ink-3)}
body:not(.is-top) .utility a:hover{color:var(--brand)}
body:not(.is-top) .masthead{background:#fff;border-bottom:1px solid var(--line)}
.masthead .nav{gap:clamp(6px,1.2vw,18px)}
.masthead .nav__link{font-size:15px}
.masthead .head-tools{gap:var(--sp-3)}
.langsw--util{position:relative}
.langsw--util .langsw__btn{height:26px;padding:0 8px;gap:6px;background:transparent;
  border:1px solid rgba(255,255,255,.38);color:#fff;font-size:var(--fs-xs);border-radius:2px}
.langsw--util .langsw__btn:hover{background:rgba(255,255,255,.12)}
.langsw--util .langsw__caret{width:12px;height:12px}
.langsw--util .langsw__menu{top:calc(100% + 6px);right:0;left:auto}
body:not(.is-top) .langsw--util .langsw__btn{border-color:var(--line);color:var(--ink-3)}
body:not(.is-top) .langsw--util .langsw__btn:hover{background:var(--surface-2);color:var(--brand)}
.utility__list > li:last-child{display:flex;align-items:center}
.brandmark .brand__type b{font-size:17px;letter-spacing:.055em;white-space:nowrap}
.brandmark .brand__type i{letter-spacing:.006em;white-space:nowrap}
body:not(.is-top) .masthead .brand__type b{color:#0E0C1B}
.utility{padding-block:3px;font-size:11px}
.masthead .brand__mark{width:38px;height:38px}
.masthead .brand__type b{font-size:17px;line-height:1.15}
.masthead .brand__type i{font-size:10px;letter-spacing:.1em}
.masthead .brand{padding-block:4px}
.masthead .nav__link{padding-block:9px}
.footer .brand--inv .brand__type i{color:rgba(255,255,255,.82)}
.searchhero .searchbar{max-height:none;overflow:visible;border-top:0;margin-top:var(--sp-5)}
.searchhero .searchbar input{min-height:56px;font-size:var(--fs-md)}
@media(max-width:420px){
  .searchhero .searchbar form{flex-wrap:wrap}
  .searchhero .searchbar input,.searchhero .searchbar button{flex:1 1 100%}
}
.nav__item--drop{position:relative}
.nav__item--drop .drop{position:absolute;top:100%;left:50%;min-width:212px;z-index:60;
  transform:translateX(-50%) translateY(6px);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--e3);
  padding:var(--sp-2);display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.nav__item--drop.is-open .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.drop__item{display:block;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);
  color:var(--ink-2);white-space:nowrap;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.drop__item:hover{background:var(--surface-2);color:var(--brand)}

/* 客户真实 logo（横版红色锁定图，含公司名）替换占位品牌区 */
.brand--logo{padding-block:var(--sp-2)}
.brand__logo{height:46px;width:auto;display:block}
@media(max-width:900px){.brand__logo{height:34px}}

/* ==================== 11-c-buttons.css ==================== */
/* QZ Cable — 11-c-buttons.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.btn{--btn-bg:var(--color-primary); --btn-fg:#fff; --btn-bd:var(--color-primary);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  min-height:50px;padding:0 var(--sp-6);border-radius:var(--r-none);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.005em;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);
  touch-action:manipulation;text-align:center;}
.btn:hover{--btn-bg:var(--color-primary-hover);--btn-bd:var(--color-primary-hover);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--color-structure);--btn-bd:var(--border)}
.btn--ghost:hover{--btn-bg:var(--color-structure-soft);--btn-bd:var(--color-structure);--btn-fg:var(--color-structure)}
.btn--onDark{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.btn--onDark:hover{--btn-bg:rgba(255,255,255,.14);--btn-bd:#fff}
.btn--navy{--btn-bg:var(--color-structure);--btn-bd:var(--color-structure)}
.btn--navy:hover{--btn-bg:var(--color-structure-2);--btn-bd:var(--color-structure-2)}
.btn--sm{min-height:42px;padding:0 var(--sp-4);font-size:var(--fs-xs);letter-spacing:.005em}
.btn--block{width:100%}
.link-more{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.005em;color:var(--color-primary);}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--r-md);color:var(--text-strong);font-size:20px;border:1px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.icon-btn:hover{background:var(--color-structure-soft);border-color:var(--border-soft)}
.dots{display:flex;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.dots button{position:relative;width:46px;height:3px;border-radius:var(--r-none);background:rgba(255,255,255,.32);transition:background var(--dur) var(--ease)}
.dots button::after{content:"";position:absolute;inset:-20px -5px}
.dots button[aria-selected="true"]{background:var(--color-primary)}
.cat__body .link-more{margin-top:auto;padding-top:var(--sp-2)}
.news__lead .link-more{margin-top:auto;padding-top:var(--sp-4)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);z-index:var(--z-toast);
  background:var(--color-structure);color:#fff;padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md);
  box-shadow:var(--sh-3);display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);
  transition:transform var(--dur-slow) var(--ease);max-width:min(560px,92vw);}
.toast.is-open{transform:translate(-50%,0)}
.pill{min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-pill);border:1.5px solid var(--border);
  background:var(--bg-surface);font-size:var(--fs-sm);font-weight:600;color:var(--text-body);
  transition:all var(--dur) var(--ease);}
.pill:hover{border-color:var(--color-structure)}
.pill[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.chip{padding:8px var(--sp-4);background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;color:var(--color-structure)}
.btn:active{transform:scale(.97)}
@media (max-width:560px){
  .btn{width:100%}
}
.btn{border-radius:var(--r-md);min-height:44px;font-family:var(--font-sans);font-size:var(--fs-sm);
  font-weight:650;letter-spacing:0;padding:0 20px;box-shadow:none;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn{background-image:none;background-color:var(--brand);color:#fff;border:1px solid var(--brand)}
.btn:hover{box-shadow:none;transform:none;background-image:none;
  background-color:#fff;color:var(--brand);border-color:var(--brand)}
.btn:active{transform:none;box-shadow:none}
.btn--ghost,.btn--navy,.btn--onDark{--btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand);
  background-image:none;background-color:var(--brand);color:#fff;border-color:var(--brand);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.btn--ghost:hover,.btn--navy:hover,.btn--onDark:hover{--btn-bd:var(--brand);--btn-bg:#fff;--btn-fg:var(--brand);
  background-color:#fff;color:var(--brand);border-color:var(--brand)}
.icon-btn{color:var(--ink-2)}
.dots button{background:var(--line-2)}
.dots button[aria-selected="true"]{background:var(--brand)}
.link-more:hover,.clampbox__btn:hover,.tblwrap__hint button:hover{color:var(--brand-700)}
.toast{background-image:none;background-color:var(--ink);border:0;box-shadow:var(--e3)}
.fam__body .link-more{margin-top:var(--sp-4);display:inline-flex}
.btn--onBrand{background:#fff;color:var(--brand);border:0;font-weight:700}
.btn--onBrand:hover{background:#F2F2F2;color:var(--brand)}
.hero .dots{display:none}
@media(max-width:768px){
  .hero .dots{position:static;transform:none;order:1}
}
.hero .dots button{background:rgba(255,255,255,.35)}
.hero .dots button[aria-selected="true"]{background:#fff}
.toast{visibility:hidden;opacity:0;transform:translate(-50%,calc(100% + 48px));
  transition:transform var(--dur-slow) var(--ease),opacity var(--dur) var(--ease),visibility 0s linear var(--dur-slow)}
.toast.is-open{visibility:visible;opacity:1;transform:translate(-50%,0);transition-delay:0s}

/* ==================== 12-c-forms.css ==================== */
/* QZ Cable — 12-c-forms.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.form-band{background:var(--color-structure);color:#fff}
.form-band h2{color:#fff}
.form{background:#fff;border-radius:var(--r-none);padding:clamp(20px,3vw,var(--sp-10));border-top:3px solid var(--color-primary)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:var(--fs-sm);font-weight:650;color:var(--text-strong)}
.field label .req{color:var(--color-primary)}
.field input,.field select,.field textarea{min-height:50px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:var(--r-none);background:var(--bg-alt);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-structure);border-bottom-color:var(--color-primary);background:#fff}
.field small{font-size:var(--fs-xs);color:var(--text-muted)}
.form__note{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:900px){
  .opts,.form__grid{grid-template-columns:1fr}
}
.form-band{background-color:var(--surface-2);background-image:none;border-top:1px solid var(--line);color:var(--ink-2)}
.form-band p{color:var(--ink-3)}
.form-band .contact-list li{color:var(--ink-2)}
.form-band .contact-list b{color:var(--ink-3)}
.form-band .form{background:var(--surface);background-image:none;border:1px solid var(--line);box-shadow:none}
.form-band .form label{color:var(--ink-2)}
.form-band .field label .req{color:var(--brand)}
.form-band{border-top:2px solid var(--brand)}
.form-band{border-top:0}
.single-product .form-band{background-color:var(--surface) !important}
.form-band .form{display:flex;flex-direction:column}
.form-band .form__grid{flex:1;align-content:start}
.form-band .field--full:last-child{margin-top:auto}

/* 询盘段母题（demo v5.21 #contact::after）—— 右侧单条粗斜带（135°），收束整页。
   基座 [data-band=white/light]::after 在 03-layout 里只搭了定位+蒙版没给底纹，
   demo 是「一段一形」逐个 #id::after 补 background-image；这里把询盘段那张补回来。
   0,2,1 特异性压过基座 0,1,1；蒙版沿用基座（demo 同款上下渐隐）。 */
.form-band[data-band="white"]::after,.form-band[data-band="light"]::after{
  background-image:repeating-linear-gradient(135deg,rgba(11,44,94,.04) 0 3px,transparent 3px 30px);
  background-size:52% 100%;background-position:right top;background-repeat:no-repeat}

/* ==================== 13-c-hero.css ==================== */
/* QZ Cable — 13-c-hero.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.hero{position:relative;background:var(--color-structure);overflow:hidden}
.hero__slides{position:relative;min-height:clamp(440px,58vw,640px)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease);pointer-events:none}
.hero__slide.is-active{opacity:1;pointer-events:auto}
.hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(32,46,70,.96) 0%,
    rgba(32,46,70,.94) 34%,
    rgba(32,46,70,.62) 52%,
    rgba(32,46,70,.12) 100%);}
.hero__body{position:relative;z-index:2;display:flex;align-items:center;min-height:clamp(440px,58vw,640px);padding-block:var(--sp-12)}
.hero__copy{max-width:720px;color:#fff;padding-left:var(--sp-6);border-left:3px solid var(--color-primary)}
.hero h1{color:#fff;text-wrap:balance}
.hero h1 em{font-style:normal;color:#fff;box-shadow:inset 0 -.16em 0 var(--color-primary)}
.hero__sub{margin-top:var(--sp-6);font-size:var(--fs-lg);line-height:1.45;color:rgba(255,255,255,.84);max-width:52ch}
.hero__actions{margin-top:var(--sp-8);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero__meta{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.85);}
.hero__meta li{display:flex;align-items:center;gap:var(--sp-2);padding:9px 14px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.hero__nav{position:absolute;bottom:var(--sp-6);left:0;right:0;z-index:3}
.hero__count{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;color:rgba(255,255,255,.7)}
.hero__arrows{margin-left:auto;display:flex;gap:0}
.hero__arrows button{width:48px;height:48px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-none);color:#fff;display:grid;place-items:center;font-size:20px;transition:background var(--dur) var(--ease)}
.hero__arrows button + button{border-left:0}
.hero__arrows button:hover{background:rgba(255,255,255,.18)}
@media (max-width:560px){
  .hero__meta{gap:var(--sp-3);font-size:var(--fs-xs)}
  .hero__actions{gap:var(--sp-2)}
}
.hero{background:var(--bg);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{display:none}
.hero__slides{min-height:clamp(500px,52vw,620px)}
.hero__slide img{opacity:.14;filter:grayscale(.4)}
.hero__slide::after{background:linear-gradient(96deg,var(--bg) 0%,rgba(242,244,247,.94) 48%,rgba(242,244,247,.68) 100%)}
.hero__body{min-height:clamp(500px,52vw,620px)}
.hero__copy{max-width:min(580px,52%);border-left:0;padding-left:0;color:var(--ink-2)}
.hero h1{color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--brand);box-shadow:none}
.hero__sub{color:var(--ink-2);max-width:46ch;margin-top:var(--sp-4);font-size:var(--fs-md)}
.hero__meta{border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-6);
  color:var(--ink-3);font-family:var(--font-sans);font-size:var(--fs-sm)}
.hero__meta li{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0 16px 0 0;margin-right:16px;border-right:1px solid var(--line)}
.hero__meta li:last-child{border-right:0;margin-right:0;padding-right:0}
.hero__count{color:var(--ink-3);font-family:var(--font-sans);font-size:var(--fs-xs)}
.hero__arrows button{color:var(--ink);border-radius:var(--r-md)}
.hero__arrows button+button{margin-left:8px}
.hero__arrows button:hover{background-color:var(--surface-2)}
@media (max-width:1100px){
  .hero__copy{max-width:58%}
}
@media (max-width:900px){
  .hero__copy{max-width:100%}
  .hero__slide::after{background:linear-gradient(180deg,rgba(242,244,247,.9),rgba(242,244,247,.97))}
}
.hero .xsec{transition:opacity 420ms var(--ease),visibility 420ms}
.hero[data-slide="1"] .xsec{opacity:1;visibility:visible}
.hero:not([data-slide="1"]) .xsec{opacity:0;visibility:hidden}
.hero:not([data-slide="1"]) .hero__slide img{opacity:.82;filter:none}
.hero:not([data-slide="1"]) .hero__slide::after{background:linear-gradient(96deg,rgba(242,244,247,.97) 0%,rgba(242,244,247,.9) 38%,rgba(242,244,247,.35) 68%,rgba(242,244,247,.08) 100%)}
.hero:not([data-slide="1"]) .hero__copy{max-width:min(560px,48%)}
.hero__cta{margin-left:auto}
.hero__arrows{margin-left:0}
@media(max-width:768px){
  .hero__cta{order:3;flex:1 1 100%;justify-content:center;margin-left:0}
  .hero__arrows{margin-left:auto}
}
.hero__slides,.hero__body{min-height:clamp(420px,44vw,540px)}
@media(max-width:768px){
  .hero__slides,.hero__body{min-height:0}
  .hero__slide{position:static;display:none}
  .hero__slide.is-active{display:block}
  .hero__slide img{position:absolute;inset:0;height:100%}
  .hero__nav{position:static;margin-top:var(--sp-2);padding-bottom:var(--sp-2)}
}
.hero__meta{display:block;border-top:0;padding-top:0;margin-top:var(--sp-5)}
.hero__meta li{display:block;position:relative;padding:5px 0 5px 20px;margin:0;border:0;
  font-size:var(--fs-md);color:var(--ink-2);line-height:1.5}
.hero__meta li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;background:var(--brand)}
.hero__copy h1 em{color:var(--brand);font-style:normal}
@media(max-width:768px){
  .hero__meta li{font-size:var(--fs-sm)}
}
.hero__facts{display:flex;align-items:center;gap:var(--sp-5);list-style:none;margin:0 auto 0 0;padding:0;
  flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:400;
  letter-spacing:.06em;color:var(--ink)}
.hero__facts li{display:flex;align-items:center;gap:var(--sp-5);white-space:nowrap}
.hero__facts li+li::before{content:"";width:1px;height:15px;background:rgba(11,44,94,.26);flex:none}
@media(max-width:900px){
  .hero__facts{gap:var(--sp-3);font-size:11px;margin-right:0}
  .hero__facts li{gap:var(--sp-3)}
  .hero__facts li:last-child{display:none}
}
.hero__cta{margin-left:auto}
@media(max-width:768px){
  .hero__cta{order:3;margin-left:0}
}
.hero__slides,.hero__body{min-height:clamp(360px,34vw,440px)}
.hero__slide img{left:0;right:auto;width:100%;opacity:1;filter:none}
.hero__slide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;z-index:1;
  background:linear-gradient(90deg,
    rgba(6,28,62,.94) 0%, rgba(9,38,80,.86) 22%, rgba(13,46,96,.62) 44%,
    rgba(17,56,110,.30) 66%, rgba(21,65,129,.08) 82%, rgba(21,65,129,0) 94%)}
.hero__slide:nth-of-type(1)::before{display:none}
.hero__slide:nth-of-type(1) .hero__copy h1,
.hero__slide:nth-of-type(1) .hero__copy .hero__sub,
.hero__slide:nth-of-type(1) .hero__meta li{text-shadow:0 1px 2px rgba(2,10,24,.55), 0 2px 12px rgba(2,10,24,.45)}
.hero__slide::after{display:none}
.hero__body{position:relative;z-index:2;align-items:flex-start;padding-block:var(--sp-7) var(--sp-6)}
.hero__copy{max-width:none;width:52%;padding-right:var(--sp-8);color:#fff}
.hero__copy h1{color:#fff;font-size:clamp(26px,2.8vw,42px)}
.hero__copy h1 em{color:#FF5A62}
.hero__sub{color:rgba(255,255,255,.82)}
.hero__meta li{color:rgba(255,255,255,.9)}
.hero__meta li::before{background:var(--color-primary)}
.hero__arrows button{background-color:#fff;border:1px solid var(--line-2);color:var(--navy);
  box-shadow:0 2px 8px rgba(11,44,94,.16);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hero__arrows button:active{transform:scale(.94)}
.hero__arrows button[disabled]{opacity:.45;box-shadow:none}
.hero__count{color:rgba(255,255,255,.7)}
@media(max-width:900px){
  .hero__slide::before{width:100%}
  .hero__slide img{display:none}
  .hero__copy{width:100%;padding-right:0}
}
.hero__slides,.hero__body{min-height:calc(100vh - var(--chrome-h,104px))}
@media(max-width:900px){
  .hero__slides,.hero__body{min-height:calc(100vh - 92px)}
}
.hero__body{padding-block:var(--sp-6) var(--sp-10)}
.hero__nav{bottom:var(--sp-5)}
.hero__copy h1{font-size:clamp(30px,3.2vw,46px);line-height:1.08}
.hero__copy .hero__sub{font-size:var(--fs-md);margin-top:var(--sp-3)}
.hero__meta{margin-top:var(--sp-5)}
.hero__meta li{padding:7px 0 7px 22px;font-size:var(--fs-md)}
.hero__meta li::before{top:17px;width:12px}
.hero{border-bottom:0}
.hero{margin-top:0}
.hero__slides,.hero__body{min-height:100vh}
.hero__body{padding-top:calc(var(--chrome-h,104px) + var(--sp-6))}
.hero .hero__slide img,
.hero:not([data-slide="1"]) .hero__slide img{opacity:1;filter:none}
.hero .hero__slide::after,
.hero:not([data-slide="1"]) .hero__slide::after{display:block;content:"";
  background:
    
    linear-gradient(180deg,rgba(8,12,20,.46) 0px,rgba(8,12,20,.42) 62px,rgba(8,12,20,0) 190px),
    linear-gradient(96deg,rgba(8,12,20,.60) 0%,rgba(8,12,20,.42) 34%,rgba(8,12,20,.14) 62%,rgba(8,12,20,.03) 100%),
    linear-gradient(180deg,rgba(8,12,20,.44) 0%,rgba(8,12,20,.12) 28%,rgba(8,12,20,.16) 60%,rgba(8,12,20,.56) 100%)}
.hero .hero__slide::before{display:none;content:none}
.hero__copy{color:#fff}
.hero h1{color:#fff}
.hero__facts{color:#fff}
.hero__facts li+li::before{background:rgba(255,255,255,.44)}
@media(max-width:768px){
  .hero__body{padding-top:calc(var(--chrome-h,104px) + var(--sp-4))}
}
.hero__facts{flex-wrap:wrap;gap:14px 30px;max-width:660px;align-items:flex-start}
.hero__facts li{align-items:center;gap:8px;padding-bottom:9px;position:relative}
.hero__facts li::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--brand)}
.hero__facts li+li::before{content:none}

/* ==================== 14-c-cards.css ==================== */
/* QZ Cable — 14-c-cards.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.sol-tabs{display:flex;justify-content:center;gap:clamp(8px,2vw,var(--sp-10));flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-2);scrollbar-width:none}
.sol-tabs::-webkit-scrollbar{display:none}
.sol-tabs{justify-content:flex-start;gap:0;flex:1;min-width:0}
.sol__ctrl{display:flex;align-items:stretch;border-top:1px solid var(--border);border-bottom:2px solid var(--rule)}
.sol__ctrl .car__nav{flex:none;align-items:stretch}
.sol__ctrl .car__nav button{height:auto;border-top:0;border-bottom:0;border-right:0}
.sol__deck{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;margin-top:var(--sp-8);}
.sol__deck::-webkit-scrollbar{display:none}
.sol__deck > .sol-card{scroll-snap-align:start}
.sol-tab{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);
  min-width:150px;padding:var(--sp-5) var(--sp-5) var(--sp-4);color:var(--text-muted);text-align:left;
  border-right:1px solid var(--border);position:relative;
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.005em;line-height:1.35;}
.sol-tab:first-child{border-left:1px solid var(--border)}
.sol-tab__ring{width:44px;height:44px;border-radius:var(--r-none);display:grid;place-items:center;font-size:24px;
  border:1px solid var(--border);color:var(--color-structure);
  transition:all var(--dur) var(--ease);background:var(--bg-surface);}
.sol-tab:hover{background:var(--bg-alt);color:var(--color-structure)}
.sol-tab:hover .sol-tab__ring{border-color:var(--color-primary);color:var(--color-primary)}
.sol-tab[aria-selected="true"]{color:var(--text-strong);background:var(--bg-alt)}
.sol-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--color-primary)}
.sol-tab[aria-selected="true"] .sol-tab__ring{border-color:var(--color-primary);background:var(--color-primary);color:#fff}
.sol-card{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--bg-surface);border:1px solid var(--border);border-top:0;border-radius:var(--r-none)}
.sol-card__media{position:relative;min-height:340px}
.sol-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sol-card__body{padding:clamp(24px,3vw,var(--sp-12))}
.sol-card__body h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,2.1vw,29px);line-height:1.02;letter-spacing:-.012em;color:var(--text-strong)}
.sol-card__body ul{margin:var(--sp-5) 0 var(--sp-6);padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.sol-card__body li{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm)}
.case-row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:center;padding:var(--sp-4);background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--r-md);transition:all var(--dur) var(--ease)}
.case-row:hover{border-color:var(--color-primary);box-shadow:var(--sh-2);transform:translateX(3px)}
.case-row b{display:block;color:var(--text-strong);font-size:var(--fs-sm)}
.case-row span{font-size:var(--fs-xs);color:var(--text-muted)}
.news{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,3vw,var(--sp-10));align-items:stretch}
.news__lead{display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-surface);transition:box-shadow var(--dur) var(--ease)}
.news__lead:hover{box-shadow:var(--sh-3)}
.news__lead img{aspect-ratio:16/9;object-fit:cover;width:100%}
.news__lead .body{padding:var(--sp-6);flex:1;display:flex;flex-direction:column;align-items:flex-start}
.news__list{display:grid;grid-template-rows:repeat(5,1fr);gap:0}
.news-row{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-4);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--border-soft)}
.news-row:last-child{border-bottom:0}
.news-row img{width:120px;height:78px;object-fit:cover;border-radius:var(--r-sm)}
.news-kicker{font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-primary)}
.news-row b{display:block;font-size:var(--fs-sm);color:var(--text-strong);margin-top:4px;line-height:1.45}
.news-row time{font-size:var(--fs-xs);color:var(--text-muted)}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.rel{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--bg-surface);transition:all var(--dur) var(--ease)}
.rel:hover{border-color:var(--rule);background:var(--bg-alt)}
.rel img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:var(--r-sm);flex:none;mix-blend-mode:multiply}
.rel b{font-size:var(--fs-sm);color:var(--text-strong);display:block;line-height:1.35}
.rel span{font-size:var(--fs-xs);color:var(--text-muted)}
.sol-card__media{overflow:hidden}
.sol-card__media img{transition:transform var(--dur-slow) var(--ease)}
.sol-card:hover .sol-card__media img{transform:scale(1.03)}
.news__lead img{transition:transform var(--dur-slow) var(--ease)}
.news__lead:hover img{transform:scale(1.03)}
@media (max-width:900px){
  .sol-card__media{min-height:240px;position:relative;aspect-ratio:16/9}
}
@media (max-width:560px){
  .news-row{grid-template-columns:92px 1fr}
  .news-row img{width:92px;height:64px}
}
.news-kicker{color:var(--ink-3)}
.sol-card__body{padding:40px}
.news-kicker{color:var(--brand-700);font-size:var(--fs-2xs)}
.news-row{border-bottom-color:var(--line)}
.news-row img{border-radius:var(--r-sm)}
.news-row b{font-size:var(--fs-sm)}
.news-row time{font-size:var(--fs-xs);color:var(--ink-3)}
.sol-tab{color:var(--ink-3)}
.sol-tab[aria-selected="true"]{background-color:var(--ink);color:#fff}
.sol-tab[aria-selected="true"] .sol-tab__ring{border-color:#fff;background:transparent;color:#fff}
.sol-tab__ring{border-color:var(--line-2);color:var(--ink-3)}
.sol-tabs{display:flex}
.sol-tab{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:var(--fs-sm);min-height:56px;padding:0 12px}
.sol-tab__no{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);
  font-weight:400;letter-spacing:.08em;color:var(--ink-3)}
.sol-tab[aria-selected="true"] .sol-tab__no{color:rgba(255,255,255,.62)}
.sol-tab:hover .sol-tab__no{color:var(--ink-3)}
.sol-tab[aria-selected="true"]{background-color:var(--navy);color:#fff}
.sol-tab[aria-selected="true"] .sol-tab__no{color:rgba(255,255,255,.66)}
.sol-tab[aria-selected="true"]{border-bottom:3px solid var(--brand)}
.home-solutions .sol{margin-top:var(--sp-3)}
.home-solutions .sol__ctrl{border-top:0;border-bottom:0;margin-bottom:0}
.home-solutions .sol__deck{margin-top:var(--sp-3)}
.home-solutions .sol-card__body{padding-top:22px}
.home-solutions .sol-card__body h3{margin-bottom:22px}
.sol-tabs{gap:6px}
.sol-tab:first-child{border-left:1px solid var(--line)}
.sol-tab[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.sol-tab[aria-selected="true"]::after{content:none}
.sol-tab:hover .sol-tab__no,.sol-tab[aria-selected="true"] .sol-tab__no{color:rgba(255,255,255,.74)}
.sol-card__body h3{margin-bottom:var(--sp-4)}
.news-row{background:var(--surface-2);padding:var(--sp-3);border-bottom:0;margin-bottom:8px}
.news-row:last-child{margin-bottom:0}

/* ==================== 15-c-cert.css ==================== */
/* QZ Cable — 15-c-cert.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.std-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.certwall{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
.certwall div{position:relative;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;
  min-height:136px;padding:var(--sp-4) var(--sp-3);border:1px solid var(--border);background:var(--bg-surface);
  transition:background var(--dur) var(--ease);}
.certwall div::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.certwall div:hover{background:var(--bg-alt)}
.certwall div:hover::before{transform:scaleX(1)}
.certwall__ic{width:44px;height:44px;display:grid;place-items:center;background:#FDF2F2;color:var(--color-primary)}
.certwall b{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong);line-height:1.2}
.certwall span{font-size:11px;color:var(--text-muted);line-height:1.3}
@media (max-width:900px){
  .certwall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .certwall{grid-template-columns:repeat(2,1fr)}
}
.certwall__ic{background-color:var(--surface-2);background-image:none;box-shadow:none;
  color:var(--ink-3);border-radius:var(--r-sm)}
.certwall b{color:var(--ink);font-size:var(--fs-xs)}
.certwall span{color:var(--ink-3);font-size:var(--fs-xs)}
.certgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cert{margin:0;display:flex;flex-direction:column;gap:10px}
.cert__scan{position:relative;aspect-ratio:210/297;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  transition:border-color var(--dur) var(--ease)}
.cert:hover .cert__scan{border-color:var(--line-2)}
.cert__scan svg{width:100%;height:100%;display:block}
.cert__page{fill:var(--surface)}
.cert__frame{fill:none;stroke:var(--line-2);stroke-width:1.4}
.cert__frame2{fill:none;stroke:var(--line);stroke-width:.8}
.cert__ln{fill:#C9CFD6}
.cert__ln2{fill:#DFE4EA}
.cert__seal{fill:none;stroke:#E7B9BB;stroke-width:1.6}
.cert__seal2{fill:none;stroke:#EFD2D3;stroke-width:1}
.cert__code{fill:#B6BDC6;font-family:var(--font-mono);font-size:11px;text-anchor:middle;letter-spacing:.1em}
.cert__slot{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--ink-3);
  background:rgba(255,255,255,.9);padding:2px 6px;border-radius:2px;white-space:nowrap}
.cert figcaption{text-align:center}
.cert figcaption b{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:.04em;color:var(--ink);line-height:1.3}
.cert figcaption span{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:2px;line-height:1.35}
@media (max-width:1100px){
  .certgrid{grid-template-columns:repeat(3,1fr)}
}
/* 原有一条 @media(max-width:640px){.certgrid{repeat(2,1fr)}}
   被 21-c-pdp.css 里更靠后的 900px 规则（3 列）按源码顺序压掉，
   实测 620/660 两侧都是 3 列。demo 上同样是死的，删了零视觉变化。
   要真想让证书墙在 640 以下变 2 列，得改的是 21-c-pdp.css 那条。 */
.certcar{position:relative}
.certcar__track{grid-template-columns:unset;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px) / 4);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.certcar__track::-webkit-scrollbar{display:none}
.certcar__track > .cert{scroll-snap-align:start}
.certcar__ctrl{display:flex;justify-content:center;gap:12px;margin-top:var(--sp-5)}
@media (max-width:900px){
  .certcar__track{grid-auto-columns:calc((100% - 16px) / 2)}
}
.certbar{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:var(--sp-8)}
.certbar button{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-3);background:var(--surface);text-align:center;cursor:pointer;transition:background var(--dur) var(--ease)}
.certbar button:hover{background:var(--surface-2)}
.certbar__ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;color:var(--ink-2);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.certbar button:hover .certbar__ic{border-color:var(--brand);color:var(--brand-700)}
.certbar b{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink);line-height:1.2}
.certbar span{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.3}
@media(max-width:1024px){
  .certbar{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .certbar{grid-template-columns:repeat(2,1fr)}
}
.certmodal{position:fixed;inset:0;z-index:var(--z-toast);display:grid;place-items:center;padding:var(--sp-5)}
.certmodal[hidden]{display:none}
.certmodal__scrim{position:absolute;inset:0;background:rgba(21,24,28,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.certmodal__panel{position:relative;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--e3);max-width:1080px;width:100%;max-height:86vh;overflow:auto;padding:var(--sp-6)}
.certmodal__head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.certmodal__head h3{margin:0}
.certmodal .certgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:768px){
  .certmodal .certgrid{grid-template-columns:repeat(2,1fr)}
}
.cert__shot{border:1px solid var(--line);background:var(--surface);aspect-ratio:210/297;overflow:hidden;display:block}
.cert__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cert figcaption{margin-top:var(--sp-3)}
.cert figcaption b{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink)}
.cert figcaption span{font-size:var(--fs-2xs);color:var(--ink-3)}
.certlogos{display:flex;justify-content:center;align-items:center;gap:var(--sp-2) var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-6)}
.certlogos span{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:color var(--dur) var(--ease)}
.certlogos span:hover{color:var(--ink)}
.certgrid{grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
.certbar{border:0}
.std-strip{gap:var(--sp-2);margin-top:var(--sp-4)}
.certbar{margin-top:var(--sp-4)}
.certbar button{padding:var(--sp-3) var(--sp-2);gap:6px}
.certbar__ic{width:36px;height:36px}
.certlogos{margin-top:var(--sp-4)}

/* ==================== 16-c-map.css ==================== */
/* QZ Cable — 16-c-map.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.pmap__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-6);align-items:stretch}
.pmap__left{display:flex;flex-direction:column}
.pmap__map{position:relative;background:var(--bg-surface);border:1px solid var(--border);overflow:hidden;display:grid;place-items:center;flex:1;min-height:0}
.pmap__plot{position:relative;width:100%;aspect-ratio:1000/500}
.pmap__svg{position:absolute;inset:0;width:100%;height:100%}
.pmap__land{fill:var(--navy-050);stroke:var(--border);stroke-width:.7;vector-effect:non-scaling-stroke}
.pmap__pin{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:2}
.pmap__pin::before{content:"";width:9px;height:9px;background:var(--color-structure);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--color-structure);transition:all var(--dur) var(--ease);}
.pmap__pin:hover::before{background:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.pmap__pin[aria-current="true"]::before{background:var(--color-primary);width:13px;height:13px;
  box-shadow:0 0 0 1px var(--color-primary),0 0 0 7px rgba(224,16,24,.16);}
.pmap__pin.is-dim{opacity:.22;pointer-events:none}
.pmap__tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--color-structure);color:#fff;white-space:nowrap;padding:4px 8px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease);pointer-events:none;}
.pmap__pin:hover .pmap__tip,.pmap__pin[aria-current="true"] .pmap__tip{opacity:1;visibility:visible}
.pmap__cards{position:relative;border:1px solid var(--border);background:var(--bg-surface);display:flex;min-height:0}
.pmap__case{display:flex;flex-direction:column;width:100%;position:relative;animation:fade var(--dur-slow) var(--ease)}
.pmap__case[hidden]{display:none}
.pmap__year{position:absolute;top:0;right:0;z-index:3;background:var(--color-primary);color:#fff;
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;padding:6px 12px;}
.pmap__thumb{flex:1;min-height:200px;overflow:hidden;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.pmap__thumb img{width:100%;height:100%;object-fit:cover}
.pmap__body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:none}
.pmap__more{margin-top:var(--sp-2);background:none;border:0;padding:0}
.pmap__loc{display:inline-flex;align-items:center;gap:6px;color:var(--color-primary);
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;}
.pmap__body h3{font-size:var(--fs-lg);line-height:1.25}
.pmap__spec{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);margin:var(--sp-2) 0 0;
  padding-top:var(--sp-4);border-top:1px solid var(--border-soft);font-size:var(--fs-sm)}
.pmap__spec dt{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);padding-top:3px}
.pmap__spec dd{margin:0;color:var(--text-body)}
.pmap__filters{margin-top:var(--sp-5);border-top:2px solid var(--rule);padding-top:var(--sp-5);flex:none}
.pmap__regions{display:flex;gap:0;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.pmap__region{min-height:40px;padding:0 var(--sp-4);border:1px solid var(--border);background:var(--bg-surface);
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:.005em;
  color:var(--text-body);margin-left:-1px;transition:all var(--dur) var(--ease);}
.pmap__region:first-child{margin-left:0}
.pmap__region:hover{color:var(--color-structure);background:var(--bg-alt)}
.pmap__region[aria-selected="true"]{background:var(--color-structure);border-color:var(--color-structure);color:#fff}
.pmap__chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pmap__chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:42px;padding:0 var(--sp-4);
  border:1px solid var(--border);background:var(--bg-surface);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:.005em;
  transition:all var(--dur) var(--ease);}
.pmap__chip b{color:var(--text-muted);font-weight:700;font-family:var(--font-mono)}
.pmap__chipdot{width:7px;height:7px;background:var(--color-structure);flex:none}
.pmap__chip:hover{border-color:var(--color-structure);background:var(--bg-alt)}
.pmap__chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.pmap__chip[aria-pressed="true"] b{color:rgba(255,255,255,.75)}
.pmap__chip[aria-pressed="true"] .pmap__chipdot{background:#fff}
.pmap__chip[hidden]{display:none}
.pmap__src{margin-top:var(--sp-4);font-size:var(--fs-2xs);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.04em}
.pmap__thumb{overflow:hidden}
.pmap__thumb img{transition:transform var(--dur-slow) var(--ease)}
.pmap__case:hover .pmap__thumb img{transform:scale(1.04)}
.casemodal{position:fixed;inset:0;z-index:var(--z-drawer);display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
.casemodal.is-open{visibility:visible;opacity:1;transition-delay:0s}
.casemodal__scrim{position:absolute;inset:0;background:rgba(18,26,40,.56);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.casemodal__panel{position:relative;width:min(720px,100%);max-height:min(86vh,780px);overflow:auto;background:var(--bg-surface);border-top:3px solid var(--color-primary);box-shadow:var(--sh-overlay);transform:translateY(12px) scale(.985);transition:transform var(--dur-slow) var(--ease)}
.casemodal.is-open .casemodal__panel{transform:none}
.casemodal__media{position:relative;aspect-ratio:2/1;background:var(--bg-alt)}
.casemodal__media img{width:100%;height:100%;object-fit:cover}
.casemodal__body{padding:clamp(20px,3vw,var(--sp-8));display:grid;gap:var(--sp-4);justify-items:start}
.casemodal__close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--border);color:var(--text-strong);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.casemodal__close:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .pmap__pin[aria-current="true"]::after{content:"";position:absolute;inset:-7px;border:1.5px solid var(--color-primary);animation:pinpulse 1.8s var(--ease) infinite}
}
@media (max-width:900px){
  .pmap__regions{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pmap__regions::-webkit-scrollbar{display:none}
}
.pmap__map{background:var(--surface);border-color:var(--line)}
.pmap__land{fill:#E6EAEF;stroke:var(--line-2)}
.pmap__pin::before{background:var(--ink);border-color:#fff;box-shadow:0 0 0 1px var(--line-2)}
.pmap__pin:hover::before,.pmap__pin[aria-current="true"]::before{background:var(--brand);border-color:#fff;
  box-shadow:0 0 0 1px var(--brand)}
.pmap__region,.pmap__chip{color:var(--ink-2);font-size:var(--fs-sm)}
.pmap__region[aria-selected="true"]{background-color:var(--ink);color:#fff;border-color:var(--ink)}
.pmap__chip[aria-pressed="true"]{background-color:var(--brand);color:#fff;border-color:var(--brand-700)}
.pmap__cards{border-color:var(--line)}
.pmap__thumb{background:var(--surface-2)}
.pmap__loc{color:var(--brand-700);font-size:var(--fs-2xs)}
.pmap__year{background-image:none;background-color:var(--brand);font-size:var(--fs-xs)}
.pmap__tip{background-image:none;background-color:var(--ink)}
.pmap__chipdot{background:var(--ink-4)}
.pmap__tip{font-size:var(--fs-2xs)}
.pmap__loc{color:var(--ink-3)}
.pmap__year{padding:4px 12px}
.xsec__spec dt,.pmap__spec dt{padding-top:4px}
.casemodal__scrim{background:rgba(21,24,28,.44)}
.casemodal__panel{border-top:2px solid var(--brand);box-shadow:var(--e3)}
.casemodal__close{color:var(--ink);border-radius:var(--r-sm);box-shadow:none}
.casemodal__close:hover{background-color:var(--brand);border-color:var(--brand-700);color:#fff}
.pmap__map{background-image:radial-gradient(rgba(21,24,28,.05) 1px,transparent 1.2px);
  background-size:22px 22px;background-position:center;background-color:var(--surface)}
.pmap__land{fill:#E7EBF0;stroke:#C6CFD9;stroke-width:.8}
.pmap__pin::before{width:8px;height:8px;border-radius:50%;background:var(--ink);
  border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2),0 1px 3px rgba(21,24,28,.28)}
.pmap__pin::after{content:"";position:absolute;inset:3px;border:1px solid rgba(21,24,28,.22);
  border-radius:50%;pointer-events:none}
.pmap__pin:hover::before,.pmap__pin[aria-current="true"]::before{background:var(--brand);
  box-shadow:0 0 0 1px var(--brand),0 1px 4px rgba(224,16,24,.3)}
.pmap__pin[aria-current="true"]::after{border-color:rgba(224,16,24,.5)}
.pmap__tip{border-radius:3px;box-shadow:var(--e2);font-size:var(--fs-2xs);letter-spacing:.06em}
.pmap{margin-top:var(--sp-3)}
.home-cases .pmap__thumb{aspect-ratio:16/7}
.home-cases .pmap__body{padding:var(--sp-5)}
.home-cases .pmap__map{min-height:0}
.home-cases .pmap__map{background:#fff}
.home-cases .pmap__land{fill:#D9DEE3;stroke:#fff;stroke-width:.8}
.home-cases .pmap__land--served{fill:#6EA8DC;stroke:#fff;stroke-width:.8}
.page-cases .caseflow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.page-cases .casecard:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(11,44,94,.14);transform:translateY(-2px)}
.page-cases .casecard .pmap__thumb{aspect-ratio:16/10;min-height:0;flex:none}
.page-cases .casecard .pmap__year{position:absolute;top:0;right:0;z-index:2}
.page-cases .casecard .pmap__body{flex:1;background:var(--surface)}
.page-cases .casecard .pmap__more{margin-top:auto;padding-top:var(--sp-3)}
@media(max-width:1100px){
  .page-cases .caseflow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .page-cases .caseflow{grid-template-columns:1fr}
}
.caseflow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.casecard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);color:inherit;text-decoration:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.casecard:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(11,44,94,.14);transform:translateY(-2px)}
.casecard .pmap__thumb{aspect-ratio:16/10;min-height:0;flex:none}
.casecard .pmap__year{position:absolute;top:0;right:0;z-index:2}
.casecard .pmap__body{flex:1;background:var(--surface)}
.casecard .pmap__more{margin-top:auto;padding-top:var(--sp-3)}
@media(max-width:1100px){
  .caseflow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .caseflow{grid-template-columns:1fr}
}
.page-cases .caseflow--feat .casecard:first-child{grid-column:1 / span 2;flex-direction:row}
.page-cases .caseflow--feat .casecard:first-child .pmap__thumb{width:52%;aspect-ratio:auto;min-height:280px;border-bottom:0}
.page-cases .caseflow--feat .casecard:first-child .pmap__body{flex:1;justify-content:center;padding:var(--sp-7)}
.page-cases .caseflow--feat .casecard:first-child h3{font-size:var(--fs-xl)}
.page-cases .caseflow--feat .casecard:first-child .pmap__spec{margin-top:var(--sp-3)}
@media(max-width:900px){
  .page-cases .caseflow--feat .casecard:first-child{grid-column:auto;flex-direction:column}
  .page-cases .caseflow--feat .casecard:first-child .pmap__thumb{width:auto;aspect-ratio:16/10;min-height:0}
}
.caseflow .casecard[hidden]{display:none}

/* ==================== 17-c-carousel.css ==================== */
/* QZ Cable — 17-c-carousel.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.car{position:relative}
.car__track{display:grid;grid-auto-flow:column;gap:var(--sp-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;}
.car__track::-webkit-scrollbar{display:none}
.car__track > *{scroll-snap-align:start}
.car--4 .car__track{grid-auto-columns:calc((100% - var(--sp-4)*3)/4)}
.car--3 .car__track{grid-auto-columns:calc((100% - var(--sp-4)*2)/3)}
.car__nav{display:flex;gap:0;flex:none}
.car__nav button{width:44px;height:44px;display:grid;place-items:center;font-size:18px;
  border:1px solid var(--border);background:var(--bg-surface);color:var(--color-structure);
  transition:all var(--dur) var(--ease);}
.car__nav button + button{border-left:0}
.car__nav button:hover:not(:disabled){background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.car__nav button:disabled{opacity:.32;cursor:not-allowed}
@media (max-width:900px){
  .car--4 .car__track{grid-auto-columns:calc((100% - var(--sp-4))/2)}
  .car--3 .car__track{grid-auto-columns:calc((100% - var(--sp-4))/2)}
}
@media (max-width:560px){
  .car--4 .car__track,.car--3 .car__track{grid-auto-columns:86%}
}
.revcar{position:relative}
.revcar__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.revcar__track::-webkit-scrollbar{display:none}
.revcar__track > .review{scroll-snap-align:start;margin:0}
.revcar__ctrl{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-5)}
.revcar__btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.revcar__btn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.revcar__btn:disabled{opacity:.4;cursor:default}
.revcar__dots{display:flex;gap:6px}
.revcar__dots button{width:22px;height:3px;border-radius:2px;background:var(--line-2);border:0;padding:0;
  transition:background-color var(--dur) var(--ease)}
.revcar__dots button[aria-selected="true"]{background:var(--brand)}
@media (max-width:900px){
  .revcar__track{grid-auto-columns:88%}
}
.revcar__track{grid-auto-columns:100%}
@media(max-width:1100px){
  .revcar__track{grid-auto-columns:100%}
}
@media(max-width:900px){
  .revcar__track{grid-auto-columns:100%}
}
.revcar__dots{gap:8px}
.revcar__dots button{width:10px;height:10px;border-radius:50%;background:transparent;
  border:1px solid var(--line-2);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.revcar__dots button[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
.revcar__ctrl{margin-top:var(--sp-4)}
.home-reviews .revcar{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(190px,.75fr);
  gap:var(--sp-8);align-items:center;margin-top:var(--sp-4)}
.home-reviews .revcar__ctrl{flex-direction:column;gap:var(--sp-4);margin-top:0;
  padding-left:var(--sp-8);border-left:1px solid var(--line)}
.home-reviews .revcar__dots{flex-wrap:wrap;justify-content:center;max-width:128px}
@media(max-width:900px){
  .home-reviews .revcar{grid-template-columns:1fr;gap:var(--sp-4)}
  .home-reviews .revcar__ctrl{flex-direction:row;border-left:0;padding-left:0;justify-content:center}
  .home-reviews .revcar__dots{max-width:none}
}
.home-reviews .revcar__btn{display:none}
.home-reviews .revcar__ctrl{gap:var(--sp-3)}
.home-reviews .revcar__more{font-size:var(--fs-sm);white-space:nowrap}
.home-reviews .revcar__ctrl{border-left:0;padding-left:var(--sp-6);align-items:center;justify-content:flex-start}
.home-reviews .revcar__logo{display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--navy);min-height:104px;justify-content:center}
.home-reviews .revcar__logo svg{width:88px;height:88px}
/* 客户上传的是图片 logo（虚构品牌走 svg，走上面那条）——图片按框缩放 */
.home-reviews .revcar__logo img{max-width:170px;max-height:84px;object-fit:contain}
.home-reviews .review__logo img{max-width:120px;max-height:56px;object-fit:contain}
.home-reviews .revcar__logo b{font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.home-reviews .revcar{padding-bottom:var(--sp-5)}
@media(max-width:900px){
  .home-reviews .revcar__logo svg{width:64px;height:64px}
  .home-reviews .revcar__ctrl{padding-left:0}
}

/* ==================== 19-c-footer.css ==================== */
/* QZ Cable — 19-c-footer.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.footer{background:var(--navy-900);color:rgba(255,255,255,.7);font-size:var(--fs-sm);
  position:relative;overflow:hidden;isolation:isolate}
.footer__motif{position:absolute;right:-70px;top:-90px;width:380px;height:380px;z-index:-1;
  color:#fff;opacity:.07;pointer-events:none;fill:none;stroke:currentColor;stroke-width:.7;}
.footer__motif .motif__steel{stroke-width:1.1}
@media (max-width:900px){
  .footer__motif{width:260px;height:260px;right:-90px;top:-70px}
}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--sp-8);padding-block:var(--sp-16)}
.footer h5{color:#fff;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-3);border-bottom:1px solid rgba(255,255,255,.2);}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.footer ul a{display:inline-block;padding-block:5px}
.footer a:hover{color:#fff}
.footer__brand p{margin-top:var(--sp-4);max-width:34ch}
/* 页脚横版 logo（真实透明底图，替代 SVG 符号+文字） */
.brand--footlogo{padding:0}
.brand--footlogo .brand__logo{height:50px;width:auto;display:block}
@media(max-width:900px){.brand--footlogo .brand__logo{height:40px}}
.footer__social{display:flex;gap:var(--sp-2);margin-top:var(--sp-5)}
.footer__social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);display:grid;place-items:center;font-size:18px}
.footer__social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.footer__legal a{text-decoration:underline;text-underline-offset:3px}
.footer__bar{border-top:1px solid rgba(255,255,255,.14);padding-block:var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-xs)}
@media (max-width:1100px){
  .footer__top{grid-template-columns:1fr 1fr}
}
.footer{background-image:var(--metal-dark);color:rgba(255,255,255,.74)}
.footer h5{color:rgba(255,255,255,.56)}
.footer a{color:rgba(255,255,255,.8)}
.footer a:hover{color:#fff}
.footer__motif{opacity:.05}
.footer__bar{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.62)}
.footer__contact li{display:flex;align-items:flex-start;gap:var(--sp-2)}
.footer{background-color:#2B2B2B;background-image:none}
.footer__bar{border-top-color:rgba(255,255,255,.14)}
.certstrip{background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.10)}
.certstrip__inner{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;padding-block:18px}
.certstrip__label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.footer .certstrip__list{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer .certstrip__list li{display:grid;place-items:center;min-width:92px;padding:9px 16px;
  border:1px solid rgba(255,255,255,.30);border-radius:999px;
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.10em;
  color:rgba(255,255,255,.92);white-space:nowrap;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.certstrip__list li:hover{border-color:var(--brand);background-color:rgba(224,16,24,.16)}
@media(max-width:768px){
  .certstrip__inner{gap:var(--sp-4)}
  .certstrip__list li{min-width:0;padding:7px 12px}
}
.footer__top{padding-block:var(--sp-6) var(--sp-5);gap:var(--sp-6);row-gap:var(--sp-5)}
.footer__bar{padding-block:var(--sp-3)}
.footer__social{margin-top:var(--sp-3)}
.footer__brand p{margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.5}
.footer h5{margin-bottom:var(--sp-3);padding-bottom:var(--sp-2)}
.footer ul{gap:var(--sp-2)}
.footer ul li{line-height:1.4}
.footer__contact li{gap:var(--sp-2)}
.footer,.footer a,.footer__brand p{color:rgba(255,255,255,.94)}
.footer h5{color:#fff}
.footer__bar{color:rgba(255,255,255,.88)}
.certstrip__label{color:rgba(255,255,255,.88)}
.footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr}
@media(max-width:1100px){
  .footer__top{grid-template-columns:1fr 1fr}
}

/* ==================== 20-c-product.css ==================== */
/* QZ Cable — 20-c-product.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.cats{position:relative}
.cats__track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--border);border-left:1px solid var(--border);}
.cat{position:relative;display:flex;flex-direction:column;background:var(--bg-surface);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  transition:background var(--dur) var(--ease);}
.cat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-primary);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);z-index:2;}
.cat:hover{background:var(--bg-alt)}
.cat:hover::before{transform:scaleX(1)}
.cat__media{position:relative;aspect-ratio:16/9;background:var(--grey-100);overflow:hidden}
.cat__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:filter var(--dur) var(--ease)}
.cat:hover .cat__media img{filter:saturate(1.05)}
.cat__tag{position:absolute;top:0;left:0;background:var(--color-structure);color:#fff;
  font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.01em;
  padding:5px 9px;border-radius:var(--r-none);}
.cat__body{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.cat__body h3{font-size:var(--fs-md);letter-spacing:-.005em}
.cat__body p{font-size:var(--fs-xs);color:var(--text-muted);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.prod-grid{gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.prod{position:relative;display:flex;flex-direction:column;background:var(--bg-surface);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  border-radius:var(--r-none);transition:background var(--dur) var(--ease);}
.prod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);z-index:2}
.prod:hover{background:var(--bg-alt)}
.prod:hover::before{transform:scaleX(1)}
.prod__media{position:relative;aspect-ratio:1;background:var(--surface-2);overflow:hidden;border:1px solid var(--line);margin:var(--sp-3) var(--sp-3) 0}
.prod__media img{position:absolute;inset:var(--sp-4);width:calc(100% - var(--sp-4)*2);height:calc(100% - var(--sp-4)*2);
  object-fit:contain;mix-blend-mode:multiply;}
.prod__wm{position:absolute;top:var(--sp-3);left:var(--sp-3);width:22px;height:22px;color:var(--color-primary);opacity:.8}
.prod__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.prod__body h3{font-size:var(--fs-md);line-height:1.3}
.prod__std{display:flex;gap:4px;flex-wrap:wrap}
.prod__std span{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--color-structure);border:1px solid var(--border);padding:3px 6px;border-radius:var(--r-none);}
.prod__spec{font-size:var(--fs-xs);color:var(--text-muted);display:grid;gap:3px;padding-top:var(--sp-3);border-top:3px solid var(--color-primary);border-top-width:0;position:relative}
.prod__spec::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--color-primary)}
.prod__spec b{color:var(--text-body);font-weight:650}
.prod__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-2)}
.othercats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.othercat{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--bg-surface);min-height:64px;transition:all var(--dur) var(--ease)}
.othercat:hover{border-color:var(--rule);background:var(--bg-alt)}
.othercat img{width:46px;height:46px;object-fit:cover;border-radius:var(--r-sm);flex:none}
.othercat b{display:block;font-size:var(--fs-sm);color:var(--text-strong);line-height:1.3}
.othercat span{font-size:var(--fs-xs);color:var(--text-muted)}
.cat__media img{transition:filter var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.cat:hover .cat__media img{transform:scale(1.045)}
.prod__media{overflow:hidden}
.prod__media img{transition:transform var(--dur-slow) var(--ease)}
.prod:hover .prod__media img{transform:scale(1.05)}
.prod__media,.prod__body h3{cursor:pointer}
.prod__body h3:hover{color:var(--brand)}
@media (max-width:1100px){
  .prod-grid,.rel-grid{grid-template-columns:repeat(3,1fr)}
  .cats__track{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .prod-grid,.rel-grid{grid-template-columns:repeat(2,1fr)}
  .cats__track{grid-template-columns:repeat(2,1fr)}
  .othercats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cats__track{grid-template-columns:repeat(2,1fr)}
  .prod-grid,.rel-grid,.othercats{grid-template-columns:1fr}
}
.cats__track{display:grid;grid-template-columns:repeat(4,1fr)}
.cat{overflow:hidden}
.cat__media{border-radius:0;overflow:hidden;border-bottom:1px solid var(--line)}
.cat__media img{transition:none}
.cat:hover .cat__media img{transform:none}
.cat__media .cat__tag,.cat__tag{background-image:none;background-color:rgba(255,255,255,.94);
  color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none;
  font-family:var(--font-mono);font-size:var(--fs-2xs);top:8px;left:8px;padding:4px 8px}
.prod__std span{color:var(--ink-3);border-color:var(--line);border-radius:var(--r-sm)}
.prod__wm{color:var(--ink-4);opacity:.28}
.cat:hover .cat__media img,.sol-card:hover .sol-card__media img{transform:none}
@media (max-width:1100px){
  .cats__track{grid-template-columns:repeat(2,1fr)}
}
.fam__tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.fam__tabs::-webkit-scrollbar{display:none}
.fam-tab{flex:1 0 auto;min-width:118px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-3);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);margin-bottom:0;cursor:pointer;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.fam-tab:hover{color:var(--brand);background:#fff;border-color:var(--brand)}
.fam-tab[aria-selected="true"]{color:#fff;background:var(--brand);border-color:var(--brand)}
.fam-tab:hover .fam-tab__ic{border-color:var(--brand);color:var(--brand)}
.fam-tab[aria-selected="true"] .fam-tab__ic{border-color:rgba(255,255,255,.72);color:#fff}
.fam__panel{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-6);padding:var(--sp-6)}
.fam__panel[hidden]{display:none}
.fam__media img{width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:var(--r-sm);display:block}
.fam__body > p{margin-top:var(--sp-2);color:var(--ink-3);max-width:62ch}
.fam__links{margin-top:var(--sp-4);display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-6)}
.fam__links a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-sm);transition:color var(--dur) var(--ease)}
.fam__links a:hover{color:var(--brand-700)}
@media(max-width:900px){
  .fam__panel{grid-template-columns:1fr}
  .fam__media img{min-height:200px;height:auto;aspect-ratio:16/9}
  .fam__links{grid-template-columns:1fr}
}
.prod-grid{gap:var(--sp-5);border:0}
.prod{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.pcat{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2)}
.pcat button{padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pcat button:hover{border-color:var(--ink-4);color:var(--ink)}
.pcat button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pgroup-head{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;padding-top:var(--sp-2)}
.pgroup-head h4{font-size:var(--fs-lg)}
.pgroup-head p{color:var(--text-muted);font-size:var(--fs-sm);margin:0}
.prod--mini .prod__body{padding:var(--sp-4) var(--sp-5)}
.prod--mini h3{font-size:var(--fs-md)}
@media(max-width:900px){
  .pcat{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .pcat{grid-template-columns:repeat(2,1fr)}
  .pcat button{padding:7px 13px}
}
.fam__media img{border-radius:0}
.fam-tab[aria-selected="true"]{color:#fff;background:var(--brand);border-color:var(--brand)}
.fam-tab[aria-selected="true"] .fam-tab__ic{border-color:rgba(255,255,255,.72);color:#fff}
.fam__tabs{border-bottom:0;background:transparent;border-radius:0;gap:2px}
.fam__panels{background:var(--surface)}
.fam-tab[aria-selected="true"]{color:#fff;background:var(--brand);border-color:var(--brand)}
.fam-tab[aria-selected="true"] .fam-tab__ic{border-color:var(--brand);color:var(--brand)}
.cat__media{border-bottom:0}
.fam__links a{border-bottom:0;padding:6px 0}
.fam-tab[aria-selected="true"]{border-bottom:2px solid var(--brand)}
.prod__wm{display:none}
.fam__links{gap:8px var(--sp-4)}
.fam__links a{background:var(--surface-2);border-bottom:0;padding:11px 14px}
.fam__links a:hover{background:var(--brand);color:#fff}
.fam__tabs .fam-tab[aria-selected="true"] .fam-tab__ic{border-color:rgba(255,255,255,.8);color:#fff}
/* demo 的方案详情视图类是 .soldetail，WordPress 这边是 .single-solution。
   这三条是 v5.15 专门加的：相关产品只有 3 张卡，用产品页那套 4 列会空一格。 */
.single-solution .prod-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){
  .single-solution .prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .single-solution .prod-grid{grid-template-columns:1fr}
}

/* ==================== 21-c-pdp.css ==================== */
/* QZ Cable — 21-c-pdp.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.tabs{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  min-height:46px;padding:0 var(--sp-5);border-radius:var(--r-none);
  border:1px solid var(--border);background:var(--bg-surface);color:var(--text-body);
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.005em;
  transition:all var(--dur) var(--ease);}
.tab:hover{border-color:var(--color-structure);color:var(--color-structure)}
.tab[aria-selected="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.panel[hidden]{display:none}
.panel--fade{animation:fade var(--dur-slow) var(--ease)}
.std-plate{position:relative;display:grid;gap:3px;justify-items:center;text-align:center;padding:var(--sp-5) var(--sp-3) var(--sp-4);background:var(--bg-surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background var(--dur) var(--ease)}
.std-plate::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.std-plate:hover{background:var(--bg-alt)}
.std-plate:hover::before{transform:scaleX(1)}
.std-plate b{font-family:var(--font-mono);font-weight:700;letter-spacing:.08em;font-size:var(--fs-sm);color:var(--color-structure);text-transform:uppercase}
.std-plate i{font-style:normal;font-size:11px;color:var(--text-muted)}
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,var(--sp-16));align-items:start}
.gal{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--sp-3);align-items:stretch}
.gal__main{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-none);aspect-ratio:1;overflow:hidden}
.gal__main img{position:absolute;inset:var(--sp-6);width:calc(100% - var(--sp-6)*2);height:calc(100% - var(--sp-6)*2);
  object-fit:contain;mix-blend-mode:multiply;transition:transform var(--dur-slow) var(--ease);}
.gal__main:hover img{transform:scale(1.08)}
.gal__thumbs{display:grid;grid-template-rows:repeat(5,1fr);gap:var(--sp-3);height:100%;min-height:0}
.gal__thumb{position:relative;border:1px solid var(--border);border-radius:var(--r-none);background:#fff;
  overflow:hidden;min-height:0;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.gal__thumb img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;mix-blend-mode:multiply}
.gal__thumb:hover{border-color:var(--color-structure);background:var(--bg-alt)}
.gal__thumb[aria-selected="true"]{border-color:var(--color-primary)}
.gal__thumb[aria-selected="true"]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--color-primary)}
.pdp__head h1{font-size:clamp(30px,3.4vw,48px)}
.pdp__lede{margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--text-body)}
.pdp__std{list-style:none;padding:0;margin:var(--sp-6) 0;display:grid;gap:var(--sp-2)}
.pdp__std li{display:flex;align-items:center;gap:var(--sp-3);font-weight:650;color:var(--text-strong);font-size:var(--fs-sm)}
.pdp__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.pdp__share{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border-soft);font-size:var(--fs-xs);color:var(--text-muted)}
.pdp__share a{width:40px;height:40px;border:1px solid var(--border);border-radius:var(--r-none);display:grid;place-items:center;color:var(--color-structure)}
.pdp__share a:hover{background:var(--color-structure);color:#fff;border-color:var(--color-structure)}
.subnav{position:sticky;top:var(--chrome-h,96px);z-index:90;background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:2px solid var(--rule)}
.subnav a{display:inline-flex;align-items:center;min-height:54px;padding:0 var(--sp-4);white-space:nowrap;
  color:var(--text-body);border-bottom:3px solid transparent;margin-bottom:-2px;
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:.005em;}
.subnav a:hover{color:var(--color-structure)}
.subnav a.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.spec-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);list-style:none;padding:0;margin:0}
.opts li{display:flex;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm)}
.std-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;margin-bottom:var(--sp-5)}
.std-tabs::-webkit-scrollbar{display:none}
.std-tab{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:52px;padding:0 var(--sp-5);
  white-space:nowrap;font-size:var(--fs-sm);font-weight:650;color:var(--text-muted);
  border-bottom:3px solid transparent;margin-bottom:-1px;}
.std-tab:hover{color:var(--color-structure)}
.std-tab[aria-selected="true"]{color:var(--color-structure);border-bottom-color:var(--color-primary)}
.std-tab .flagtag{font-size:10px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:var(--r-sm);background:var(--color-primary-soft);color:var(--color-primary)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.gal-grid img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);width:100%}
@media (max-width:1100px){
  .subnav{top:var(--chrome-h,96px)}
}
@media (max-width:900px){
  .gal{grid-template-columns:1fr}
  .gal__thumbs{grid-template-rows:none;grid-template-columns:repeat(5,1fr);height:auto}
  .gal__thumb{aspect-ratio:1}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
}
.std-tab{color:var(--ink-3);font-size:var(--fs-sm)}
.std-tab[aria-selected="true"]{background-color:var(--ink);color:#fff;border-color:var(--ink)}
.std-tab .flagtag{background:var(--brand);color:#fff;border-radius:var(--r-sm);font-size:var(--fs-2xs)}
.std-plate b{color:var(--ink);font-size:var(--fs-sm)}
.std-plate i{color:var(--ink-3);font-size:var(--fs-xs)}
.subnav{background:rgba(242,244,247,.95);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.subnav a{color:var(--ink-3);font-size:var(--fs-sm)}
.subnav a.is-active{color:var(--brand-700);box-shadow:inset 0 -2px 0 var(--brand)}
.constr{margin-top:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.constr__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);flex-wrap:wrap}
.constr__head h4{margin:0}
.constr__legend{display:flex;gap:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-3);align-items:center}
.constr__legend .lg{display:inline-block;width:12px;height:12px;border:1px solid var(--ink-2);margin-right:6px;vertical-align:-2px}
.constr__legend .lg--st{background:var(--line-2)}
.constr__legend .lg--al{background:var(--surface)}
.constr__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.constr__grid figure{margin:0;background:var(--surface);padding:var(--sp-5);text-align:center}
.constr__grid svg{width:min(100%,180px);height:auto;display:block;margin:0 auto}
.constr__grid figcaption{margin-top:var(--sp-3)}
.constr__code{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.constr__sub{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:2px}
.constr__lay{margin:0;border-top:1px solid var(--line);padding:var(--sp-5);overflow-x:auto}
.constr__lay svg{min-width:720px;width:100%;height:auto;display:block}
.constr__note{margin-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-3);text-align:left;min-width:720px}
.constr .al{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.4}
.constr .st{fill:var(--line-2);stroke:var(--ink-2);stroke-width:1.4}
.constr .od{fill:none;stroke:var(--ink-4);stroke-width:1;stroke-dasharray:5 4}
.constr .cl{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:10 4 2 4}
.constr .tx{fill:none;stroke:var(--ink-4);stroke-width:.9}
.constr .ld{fill:none;stroke:var(--ink-4);stroke-width:1}
.constr .ed{fill:none;stroke:var(--ink-2);stroke-width:1.4}
.constr text{font-family:var(--font-mono);font-size:12px;fill:var(--ink-2)}
@media(max-width:768px){
  .constr__grid figure{padding:var(--sp-3)}
}
.pdp{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.gal{grid-template-columns:1fr}
.gal__thumbs{grid-template-rows:none;grid-template-columns:repeat(5,1fr);height:auto}
.gal__thumb{aspect-ratio:1}
.subnav a.is-active{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.gal-grid{grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
@media(max-width:1100px){
  .certgrid,.gal-grid,.advgrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .certgrid,.gal-grid,.advgrid{grid-template-columns:repeat(2,1fr)}
}
.constr{border:0}
.subnav{border-top:0;border-bottom:0}
.std-plate{padding:var(--sp-3) var(--sp-2)}
.gal__thumb[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--brand)}
.subnav a.is-active{box-shadow:inset 0 -2px 0 var(--navy)}
.spec-2col > div > h4{margin-bottom:var(--sp-3)}
.page-cases .gal-grid{grid-template-columns:repeat(3,1fr)}

/* ==================== 22-c-tables.css ==================== */
/* QZ Cable — 22-c-tables.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.kv{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.kv th,.kv td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-soft);vertical-align:top}
.kv th{width:42%;color:var(--text-strong);font-weight:650;background:var(--bg-alt)}
.tblwrap{position:relative;border:1px solid var(--border-soft);border-radius:var(--r-md);background:#fff}
.tblwrap__scroll{overflow:auto;max-height:var(--tbl-h,392px);transition:max-height var(--dur-slow) var(--ease)}
.tblwrap.is-expanded .tblwrap__scroll{max-height:1400px}
@media (hover:hover) and (pointer:fine){
  .tblwrap:hover .tblwrap__scroll{max-height:1400px}
}
.tblwrap__hint{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;
  gap:var(--sp-2);height:96px;pointer-events:none;
  background:linear-gradient(to top,#fff 22%,rgba(255,255,255,.92) 55%,rgba(255,255,255,0));
  font-size:var(--fs-xs);color:var(--text-muted);padding-bottom:var(--sp-3);
  transition:opacity var(--dur) var(--ease);}
.tblwrap__hint button{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--color-primary);min-height:44px;padding-inline:var(--sp-3)}
.tblwrap.is-expanded .tblwrap__hint{opacity:0;visibility:hidden}
@media (hover:hover) and (pointer:fine){
  .tblwrap:hover .tblwrap__hint{opacity:0;visibility:hidden}
}
table.data{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
table.data thead th{position:sticky;top:0;z-index:2;background:var(--color-structure);color:#fff;
  padding:var(--sp-3) var(--sp-3);text-align:center;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
table.data thead tr:first-child th{border-bottom:1px solid rgba(255,255,255,.2)}
table.data tbody td{padding:10px var(--sp-3);text-align:center;border-bottom:1px solid var(--border-soft);white-space:nowrap;color:var(--text-body)}
table.data tbody tr:nth-child(even){background:var(--bg-alt)}
table.data tbody tr:hover{background:var(--color-primary-soft)}
table.data tbody td:first-child{font-weight:700;color:var(--color-structure);text-align:left;position:sticky;left:0;background:inherit}
table.data caption{caption-side:bottom;text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5}
.tblwrap__scroll{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.tblwrap__scroll::-webkit-scrollbar{height:6px}
.tblwrap__scroll::-webkit-scrollbar-thumb{background:var(--border)}
.tblwrap__scroll::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
thead th{background-color:var(--ink)!important;background-image:var(--metal-dark)!important;
  color:#fff!important;box-shadow:none;font-size:var(--fs-2xs);letter-spacing:.06em}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:hover td{background:var(--brand-50)}
.tblwrap,.tblwrap__scroll{border-color:var(--line);border-radius:var(--r-md)}
.tblwrap__hint button{color:var(--brand-700);font-size:var(--fs-sm)}
.kv{border:1px solid var(--line-2);border-collapse:collapse}
.kv th,.kv td{border:1px solid var(--line-2);padding:10px var(--sp-4);vertical-align:middle}
.kv th{width:44%;background:var(--surface-2);color:var(--ink);font-weight:650}
.kv td{background:var(--surface);color:var(--ink-2)}
.kv tr:nth-child(even) th{background:var(--surface-3)}
table.data{border:1px solid var(--line-2)}
table.data tbody td{border:1px solid var(--line-2)}
table.data thead th{border:1px solid rgba(255,255,255,.22)}

/* ==================== 23-c-content.css ==================== */
/* QZ Cable — 23-c-content.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.clampbox{position:relative}
.clampbox__text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-body)}
.clampbox.is-open .clampbox__text{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.clampbox__btn{margin-top:var(--sp-3);display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:650;color:var(--color-primary);min-height:44px}
.editor-content > h3{margin-top:var(--sp-8)}
.editor-content > p{color:var(--text-body)}
.editor-content figure{margin:0}
.editor-content table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.editor-content table{font-family:var(--font-mono)}
.editor-content table thead th{position:sticky;top:0;z-index:2;background:var(--color-structure);color:#fff;
  padding:var(--sp-3);text-align:center;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
.editor-content table tbody td{padding:10px var(--sp-3);text-align:center;border-bottom:1px solid var(--border-soft);white-space:nowrap}
.editor-content table tbody tr:nth-child(even){background:var(--bg-alt)}
.editor-content table tbody tr:hover{background:var(--color-primary-soft)}
.editor-content table tbody td:first-child{font-weight:700;color:var(--color-structure);text-align:left;position:sticky;left:0;background:inherit}
.editor-content table caption{caption-side:bottom;text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5}
.schema-faq-section .faq__q span{flex:1}
.faq{max-width:900px;margin-inline:auto;display:grid;gap:var(--sp-3)}
.faq__item{border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--bg-surface);overflow:hidden}
.faq__item.is-open{border-color:var(--color-structure)}
.faq__q{width:100%;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5);text-align:left;font-weight:650;color:var(--text-strong);min-height:64px}
.faq__q:hover{background:var(--bg-alt)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.faq__a > div{padding:0 var(--sp-5) var(--sp-5);color:var(--text-body);font-size:var(--fs-sm)}
.faq__q{color:var(--ink);font-size:var(--fs-md)}
.clampbox::after{background:linear-gradient(transparent,var(--surface-2))}
.page-products .clampbox{max-width:none}
.clampbox__text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clampbox.is-open .clampbox__text{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.clampbox__btn{margin:var(--sp-2) 0 0 auto;display:flex;min-height:0;padding:6px 0}
.clampbox__btn[hidden]{display:none}

/* 产品正文(客户 docx 导入)：小标题 + 段落间距,不再是一堵加粗文字墙 */
.editor-content h4{margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-md);font-weight:700;color:var(--text-strong);line-height:1.3}
.editor-content > h2 + h4,.editor-content > h4:first-child{margin-top:var(--sp-2)}
.editor-content p{margin-bottom:var(--sp-3);line-height:1.62}
.editor-content p:last-child{margin-bottom:0}
.editor-content ul,.editor-content ol{margin:0 0 var(--sp-4) var(--sp-5)}

/* 客户 docx 导入的参数表没有 <thead> —— 首行当表头(深底白字),不再一片同色 */
.editor-content table:not(:has(thead)) tbody tr:first-child td{background:var(--color-structure);color:#fff;font-weight:700;text-align:center}
.editor-content table:not(:has(thead)) tbody tr:first-child td:first-child{color:#fff}

/* ---- 方案详情：给客户 docx 正文做排版设计 ---- */
/* 分节：每个 h2 顶部一条细分隔线，形成清晰的段落节奏 */
.single-solution .editor-content > h2{margin-top:var(--sp-9);padding-top:var(--sp-7);border-top:1px solid var(--border)}
.single-solution .editor-content > h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* 列表：双栏 + 品牌色方块符号（替代畸形的项目符号） */
.single-solution .editor-content ul{list-style:none;margin:var(--sp-3) 0 var(--sp-5);padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-7)}
.single-solution .editor-content ul li{position:relative;padding-left:var(--sp-6);line-height:1.5;color:var(--ink-2)}
.single-solution .editor-content ul li::before{content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;border-radius:2px;background:var(--color-primary)}
@media(max-width:640px){.single-solution .editor-content ul{grid-template-columns:1fr}}

/* 方案详情：Why Qingzhou Cable 特征卡区 */
.sol-why{margin-top:var(--sp-9);padding-top:var(--sp-7);border-top:1px solid var(--border)}
.sol-why > h2{margin:0 0 var(--sp-6)}
.advgrid .adv--static{cursor:default}

/* ---- 产品详情正文：给客户 docx 内容做分节排版(对齐 demo 的层次感) ----
 * 真实产品正文是「H2 段标题 + 若干 H4 小节(Application/Standard/Construction/参数表)」，
 * 原来平铺成一堵文字。这里给它分节的视觉节奏：段标题一条红下划线，
 * 每个 H4 小节前一道品牌色竖条，正文限宽便于阅读；表格保持全宽。 */
:is(.single-product,.single-project) .editor-content > h2{font-size:clamp(22px,2.3vw,30px);margin:0 0 var(--sp-6);
  padding-bottom:var(--sp-3);border-bottom:2px solid var(--rule)}
:is(.single-product,.single-project) .editor-content h4{position:relative;margin:var(--sp-7) 0 var(--sp-3);padding-left:var(--sp-4);
  font-size:var(--fs-md);font-weight:750;color:var(--ink);letter-spacing:.005em;line-height:1.3}
:is(.single-product,.single-project) .editor-content h4::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;
  width:3px;border-radius:2px;background:var(--color-primary)}
:is(.single-product,.single-project) .editor-content h4:first-child{margin-top:0}
:is(.single-product,.single-project) .editor-content > p{color:var(--ink-2);max-width:80ch}
/* 顶层列表改成响应式多栏栅格：短条目铺满整行宽度，不再一列到底把右侧空着；
 * 每项前一个品牌色小方块。仅作用于顶层 > ul，spec-2col 里的 .bullets 不受影响。 */
:is(.single-product,.single-project) .editor-content > ul{list-style:none;padding:0;margin:var(--sp-4) 0 var(--sp-6);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:var(--sp-3) var(--sp-7)}
:is(.single-product,.single-project) .editor-content > ul li{position:relative;padding-left:var(--sp-5);line-height:1.5;
  color:var(--ink-2);break-inside:avoid}
:is(.single-product,.single-project) .editor-content > ul li::before{content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:2px;background:var(--color-primary)}
/* 顶部简介做成两栏(左文右要点卡)，铺满宽度、观感更丰富(对齐 demo 的 spec-2col) */
:is(.single-product,.single-project) .editor-content .pdp-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,var(--sp-16));align-items:start;margin-bottom:var(--sp-8)}
:is(.single-product,.single-project) .editor-content .pdp-intro > div > p:first-child{margin-top:0}
:is(.single-product,.single-project) .editor-content .pdp-facts{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-6) var(--sp-6) var(--sp-5)}
:is(.single-product,.single-project) .editor-content .pdp-facts h4{margin:0 0 var(--sp-4);padding-left:0}
:is(.single-product,.single-project) .editor-content .pdp-facts h4::before{display:none}
:is(.single-product,.single-project) .editor-content .pdp-facts .bullets li{font-size:var(--fs-sm)}
@media(max-width:820px){:is(.single-product,.single-project) .editor-content .pdp-intro{grid-template-columns:1fr}}
/* 参数表小节：H4 紧跟折叠表壳时收紧间距 */
:is(.single-product,.single-project) .editor-content h4 + .tblwrap,
:is(.single-product,.single-project) .editor-content h4 + figure{margin-top:var(--sp-3)}
/* 正文里客户自带 Standard 小节转出的徽章 */
:is(.single-product,.single-project) .editor-content .chips--bodystd{margin:var(--sp-3) 0 var(--sp-5)}

/* ---- 产品详情固定模块(证书/工厂/优势/包装)：明暗交替更可辨 + 上下留白更足，
 *      让每个模块像独立分区,不再是一堵平铺的白。仅作用于产品详情页。 ---- */
.single-product .block[data-band="light"]{background:#EBEEF2 !important}
.single-product .block[data-band]{padding-block:clamp(44px,5vw,76px)}
/* 浅色模块加内嵌上下细线,形成清晰的分区边界 */
.single-product .block[data-band="light"]{box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border)}
/* 模块标题:红色短标 + 下细线,统一分区起点的视觉锚点 */
.single-product .block__title h2{position:relative;padding-left:var(--sp-4)}
.single-product .block__title h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;
  width:4px;border-radius:2px;background:var(--color-primary)}

/* ---- SEO 批次产品:表格与正文的兜底排版 ---- */
/* 被 qz_repair_spec_tables 拆出的分节标题 */
:is(.single-product,.single-project) .editor-content h4.spec-h{margin-top:var(--sp-7)}
:is(.single-product,.single-project) .editor-content h4.spec-h:first-child{margin-top:var(--sp-2)}
/* 安全网:表格单元格里若残留 <p>/标题(生成器遗留),内联渲染——不撑高、不带竖红条、不变大字 */
.editor-content th p,.editor-content td p{margin:0;display:inline}
.editor-content th h1,.editor-content th h2,.editor-content th h3,.editor-content th h4,.editor-content th h5,.editor-content th h6,
.editor-content td h1,.editor-content td h2,.editor-content td h3,.editor-content td h4,.editor-content td h5,.editor-content td h6{
  display:inline;font-size:inherit;font-weight:inherit;color:inherit;margin:0;padding:0;line-height:inherit}
:is(.single-product,.single-project) .editor-content th h4::before,:is(.single-product,.single-project) .editor-content td h4::before{display:none}
/* SEO 产品正文里误留的 H1:降到区块小标题尺寸,别盖过页面主标题 */
:is(.single-product,.single-project) .editor-content h1{font-size:clamp(20px,2vw,26px);font-weight:750;line-height:1.25;
  margin:var(--sp-6) 0 var(--sp-3);color:var(--ink)}

/* ---- 案例详情:Quick Answer 答案卡 + 技术要点标签 ---- */
.single-project .editor-content .case-answer{display:flex;gap:var(--sp-5);align-items:flex-start;
  margin:var(--sp-4) 0 var(--sp-8);padding:var(--sp-5) var(--sp-6);
  background:var(--color-primary-soft);border-left:4px solid var(--color-primary);border-radius:var(--r-md)}
.single-project .editor-content .case-answer__tag{flex:none;margin-top:4px;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--color-primary);white-space:nowrap}
.single-project .editor-content .case-answer__body{color:var(--ink);font-size:var(--fs-md)}
.single-project .editor-content .case-answer__body p{margin:0}
.single-project .editor-content .case-answer__body p + p{margin-top:var(--sp-3)}
@media(max-width:640px){.single-project .editor-content .case-answer{flex-direction:column;gap:var(--sp-2)}}
.single-project .editor-content .chips--case{margin:var(--sp-3) 0 var(--sp-6)}

/* 案例/详情 FAQ 靠左铺满,不再 900px 居中留白 */
.single-project .editor-content .schema-faq,
.single-product .editor-content .schema-faq{max-width:none;margin-inline:0}

/* 案例分节标题:左侧图标徽章(打破单调的大标题堆叠) */
.single-project .editor-content .case-h2{display:flex;align-items:center;gap:var(--sp-3)}
.single-project .editor-content .case-h2 .icon{flex:none;width:28px;height:28px;padding:6px;border-radius:7px;
  background:var(--color-primary-soft);color:var(--color-primary)}
.single-project .editor-content .case-h2 > span{flex:1}

/* 案例:Qingzhou Cable Solution → 高亮块(关键结论单独强调) */
.single-project .editor-content .case-solution{margin:var(--sp-6) 0 var(--sp-8);padding:var(--sp-6) var(--sp-6) var(--sp-5);
  background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--color-primary);border-radius:var(--r-md)}
.single-project .editor-content .case-solution__h{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);
  font-size:var(--fs-md);font-weight:750;color:var(--ink)}
.single-project .editor-content .case-solution__h .icon{flex:none;width:24px;height:24px;color:var(--color-primary)}
.single-project .editor-content .case-solution__body p{margin:0}
.single-project .editor-content .case-solution__body p + p{margin-top:var(--sp-3)}

/* ==================== 24-c-misc.css ==================== */
/* QZ Cable — 24-c-misc.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.icon--fill{fill:currentColor;stroke:none}
.grid{display:grid;gap:var(--sp-6)}
.rule{height:2px;width:44px;background:var(--color-primary)}
.stats{background:var(--bg-page);border-bottom:2px solid var(--rule)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:var(--sp-8) var(--sp-6);border-left:1px solid var(--border)}
.stat:first-child{border-left:0}
.stat__num{font-family:var(--font-mono);font-size:clamp(30px,3.2vw,44px);font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-strong);line-height:1;}
.stat__num small{font-size:.42em;font-weight:700;margin-left:4px;color:var(--color-primary);letter-spacing:0}
.stat__label{margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);line-height:1.45;}
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,var(--sp-16));align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--r-none);box-shadow:none;border:1px solid var(--border)}
.about__badge{position:absolute;left:0;top:0;background:var(--color-primary);color:#fff;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg) 0 var(--r-lg) 0;}
.about__badge b{display:block;font-size:var(--fs-2xl);line-height:1}
.about__badge span{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.usp{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin:var(--sp-6) 0 var(--sp-8);list-style:none;padding:0}
.usp li{display:flex;gap:var(--sp-3);align-items:flex-start}
.usp b{display:block;color:var(--text-strong);font-size:var(--fs-sm)}
.usp span{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5}
.case-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--sp-6)}
.case{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--color-structure);min-height:300px;display:flex;align-items:flex-end}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform var(--dur-slow) var(--ease)}
.case:hover img{transform:scale(1.05)}
.case::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(32,46,70,.94) 0%,rgba(32,46,70,.55) 45%,rgba(32,46,70,.15) 100%)}
.case__body{position:relative;padding:var(--sp-6);color:#fff}
.case__loc{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--color-primary);padding:5px 10px;border-radius:var(--r-none)}
.case__body h4{color:#fff;margin-top:var(--sp-4);font-family:var(--font-display);text-transform:uppercase;font-size:clamp(20px,1.8vw,26px);line-height:1.04;letter-spacing:-.012em}
.case__spec{margin-top:var(--sp-4);display:grid;gap:5px;font-family:var(--font-mono);font-size:var(--fs-xs);color:rgba(255,255,255,.82)}
.case__spec b{color:#fff;font-weight:650}
.case-list{display:grid;gap:var(--sp-3)}
.case-row__yr{font-family:var(--font-num);font-size:var(--fs-sm);font-weight:700;color:var(--color-primary);border-right:1px solid var(--border);padding-right:var(--sp-4)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.review{position:relative;margin:0;padding:var(--sp-7);background:var(--bg-surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:var(--sp-4);transition:background var(--dur) var(--ease)}
.review::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.review:hover{background:var(--bg-alt)}
.review:hover::before{transform:scaleX(1)}
.review__top{display:flex;align-items:center;justify-content:space-between}
.review__q{width:28px;height:28px;color:var(--color-primary);opacity:.25}
.stars{display:flex;gap:3px;color:#F5A524;font-size:14px}
.review blockquote{margin:0;font-size:var(--fs-md);line-height:1.6;color:var(--text-strong);font-weight:400;flex:1}
.review figcaption{padding-top:var(--sp-4);border-top:1px solid var(--border-soft);font-size:var(--fs-xs);color:var(--text-muted)}
.review figcaption b{display:block;color:var(--text-strong);font-size:var(--fs-sm);margin-bottom:2px}
.contact-list{list-style:none;padding:0;margin:var(--sp-6) 0 0;display:grid;gap:var(--sp-4)}
.contact-list li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.contact-list b{display:block;color:#fff;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:650}
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}
.pill__n{font-size:var(--fs-xs);opacity:.7;margin-left:6px}
.editor-note{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--text-muted)}
.schema-faq{max-width:900px;margin-inline:auto;display:grid;gap:var(--sp-3)}
.schema-faq-section{border:1px solid var(--border-soft);border-radius:var(--r-md);background:var(--bg-surface);overflow:hidden}
.schema-faq-section.is-open{border-color:var(--color-structure)}
.schema-faq-question{display:block;font-weight:650}
.schema-faq-section > .schema-faq-question{padding:var(--sp-5) var(--sp-5) 0}
.schema-faq-section > .schema-faq-answer{padding:var(--sp-3) var(--sp-5) var(--sp-5);margin:0;font-size:var(--fs-sm)}
.bullets{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.bullets li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm)}
.bullets b{color:var(--text-strong)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.tdata__switch{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);max-width:560px;margin-bottom:var(--sp-6)}
.tdata__switch button{min-height:52px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--bg-alt);
  font-weight:650;color:var(--text-body);transition:all var(--dur) var(--ease);}
.tdata__switch button[aria-selected="true"]{background:var(--color-structure);border-color:var(--color-structure);color:#fff}
.ftabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.ftab{min-height:48px;padding:0 var(--sp-5);background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:var(--r-md);font-weight:650;font-size:var(--fs-sm);color:var(--text-body);transition:all var(--dur) var(--ease)}
.ftab[aria-selected="true"]{background:var(--color-structure);border-color:var(--color-structure);color:#fff}
.head-cta{position:absolute;right:0;bottom:6px}
@media (max-width:900px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:var(--sp-6) var(--sp-4)}
  .tdata__switch{max-width:none}
}
.view[hidden]{display:none}
.stats{background-image:none;background-color:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:none}
.stat{border-left:1px solid var(--line);padding-block:var(--sp-7)}
.stat:first-child{border-left:0}
.stat__num{color:var(--ink);letter-spacing:-.03em;font-size:clamp(28px,3vw,40px)}
.stat__num small{color:var(--ink-3);font-size:.4em}
.stat__label{color:var(--ink-3);font-size:var(--fs-sm)}
.xsec{position:absolute;z-index:2;right:max(20px,calc((100vw - var(--wrap)) / 2));top:50%;
  transform:translateY(-50%);margin:0;width:min(40vw,438px);pointer-events:none}
.xsec__stage{position:relative;aspect-ratio:1}
.xsec__stage::before{content:"";position:absolute;inset:4%;border-radius:50%;z-index:0;
  background:radial-gradient(52% 52% at 50% 44%,rgba(255,255,255,.96),rgba(233,236,240,0) 72%)}
.xsec__svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 16px 30px rgba(21,24,28,.16))}
.xsec__od{fill:none;stroke:var(--line-2);stroke-width:.4;stroke-dasharray:2 3}
.xsec__lay{transform-origin:50px 50px;animation:lay 64s linear infinite}
.xsec__alu circle{fill:url(#g-alu);stroke:rgba(21,24,28,.42);stroke-width:.45}
.xsec__steel circle{fill:url(#g-steel);stroke:rgba(21,24,28,.5);stroke-width:.45}
.xsec__lay circle{transform-box:fill-box;transform-origin:center;
  animation:strand 620ms var(--ease) backwards;animation-delay:calc(120ms + var(--i) * 11ms)}
.xsec__dim path{fill:none;stroke:var(--line-2);stroke-width:.4}
.xsec__lead{stroke-dasharray:1.6 2}
.xsec__tag,.xsec__od-label{position:absolute;z-index:2;font-family:var(--font-mono);
  font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;
  animation:tagin 500ms var(--ease) 900ms backwards}
.xsec__tag b{color:var(--ink);font-weight:700}
.xsec__tag--a{top:-4%;left:74%}
.xsec__tag--b{top:47%;left:76%}
.xsec__od-label{bottom:-3%;left:50%;transform:translateX(-50%);color:var(--ink-3)}
.xsec figcaption{margin-top:var(--sp-3);text-align:center;font-family:var(--font-mono);
  font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--ink-3)}
.xsec figcaption b{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .xsec__lay,.xsec__lay circle,.xsec__tag,.xsec__od-label{animation:none}
}
label{color:var(--ink-2);font-size:var(--fs-sm)}
.home-cases{background:var(--surface-2)}
.review figcaption{border-top-color:var(--line);font-size:var(--fs-xs)}
.review__q{color:var(--ink-4);opacity:.3}
.stars{color:#C2760B}
.schema-faq-section{border-bottom-color:var(--line)}
.about__media img{border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--e1)}
.about__badge{background-image:none;background-color:var(--brand);border-radius:var(--r-md);box-shadow:none}
.case{background-image:var(--metal-dark)}
@media (max-width:900px){
  .xsec{display:none}
}
.home-about .usp{margin-bottom:0;padding-bottom:var(--sp-2)}
.home-about .about__text > :last-child{margin-bottom:0}
.home-about{padding-bottom:clamp(56px,6vw,80px)}
.home-solutions{padding-top:clamp(56px,6vw,80px)}
.fam{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.fam-tab__ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.advgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.adv{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.adv__ic{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--ink-2);margin-bottom:var(--sp-2)}
.adv b{color:var(--ink)}
.adv span:last-child{font-size:var(--fs-sm);color:var(--ink-3)}
@media(max-width:900px){
  .advgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .advgrid{grid-template-columns:1fr}
}
.ctaband{background:var(--brand);color:#fff;padding-block:clamp(32px,3.6vw,52px)}
.ctaband h2{color:#fff;margin:0}
.ctaband p{color:rgba(255,255,255,.9);margin-top:var(--sp-2);max-width:62ch}
.xsec{display:none}
.advgrid{grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
.adv{padding:var(--sp-4) var(--sp-3);text-align:center;align-items:center}
.adv__ic{margin:0 auto var(--sp-2)}
.adv b{font-size:var(--fs-sm)}
.adv span:last-child{font-size:var(--fs-2xs)}
.home-about{padding-bottom:clamp(18px,1.8vw,26px)}
.home-solutions{padding-top:clamp(18px,1.8vw,26px)}
.home-resources{padding-block:clamp(18px,1.8vw,26px)}
.ctaband{padding-block:clamp(24px,2.4vw,36px)}
.home-about{padding-bottom:clamp(16px,1.6vw,24px)}
.home-solutions{padding-top:clamp(16px,1.6vw,24px)}
.fam{border:0;border-radius:0;background:transparent;overflow:visible}
.review{border-right:0;border-bottom:0}
.review figcaption{border-top:0;padding-top:var(--sp-3)}
.home-families::after{background-image:
    radial-gradient(circle,transparent 30.4%,rgba(11,44,94,.075) 30.5% 31.4%,transparent 31.5%),
    radial-gradient(circle,transparent 45.4%,rgba(11,44,94,.055) 45.5% 46.4%,transparent 46.5%),
    radial-gradient(circle,transparent 60.4%,rgba(11,44,94,.04) 60.5% 61.4%,transparent 61.5%),
    radial-gradient(circle,rgba(224,16,24,.05) 0 11%,transparent 11.5%);
  background-size:560px 560px;background-position:right -120px top -150px;background-repeat:no-repeat}
.home-solutions::after{background-image:radial-gradient(rgba(11,44,94,.14) 1.4px,transparent 1.5px);
  background-size:26px 26px;background-position:right top;background-repeat:repeat-y;
  width:min(38%,460px);left:auto}
.home-reviews::after{background-image:
    radial-gradient(circle at 30% 32%,rgba(11,44,94,.07) 0 8.5%,transparent 9%),
    radial-gradient(circle at 30% 32%,transparent 15.5%,rgba(11,44,94,.05) 16% 17.6%,transparent 18%);
  background-size:420px 420px;background-position:left -70px center;background-repeat:no-repeat}
.home-news::after{background-image:
    repeating-linear-gradient(90deg,rgba(11,44,94,.10) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(11,44,94,.06) 0 1px,transparent 1px 34px);
  background-size:100% 14px,100% 9px;
  background-position:0 22px,0 calc(100% - 22px);background-repeat:repeat-x,repeat-x}
.home-resources::after{background-image:
    repeating-linear-gradient(0deg,rgba(11,44,94,.045) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(90deg,rgba(11,44,94,.045) 0 1px,transparent 1px 92px);
  background-size:100% 92px,92px 100%;background-repeat:repeat}
.home-contact::after{background-image:repeating-linear-gradient(135deg,rgba(11,44,94,.04) 0 3px,transparent 3px 30px);
  background-size:52% 100%;background-position:right top;background-repeat:no-repeat}
.home-cases{padding-block:clamp(14px,1.5vw,24px)}
.home-resources{padding-block:clamp(16px,1.6vw,24px)}
.review{padding:var(--sp-7) var(--sp-6) var(--sp-6);text-align:center;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.review__logo{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--navy);opacity:.9}
.review__logo svg{width:38px;height:38px}
.review__logo b{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.review__top{flex-direction:column;align-items:center;gap:var(--sp-3);width:auto}
.review .review__q{width:42px;height:42px;opacity:.22;color:var(--navy)}
.review .stars{order:3}
.review blockquote{font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.72;
  max-width:62ch;margin:0 auto;color:var(--ink)}
.review figcaption{text-align:center;margin-top:var(--sp-2);padding-top:0}
.review figcaption b{font-size:var(--fs-md);color:var(--ink)}
.home-reviews .review{padding-block:var(--sp-3);min-height:0;text-align:left}
.home-reviews .review blockquote{font-size:var(--fs-md);line-height:1.55;max-width:60ch;margin-inline:0}
.home-reviews .review__top{justify-content:flex-start}
.home-reviews .review figcaption{margin-inline:0}
.packing__notes{margin-top:var(--sp-5);display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3) var(--sp-6)}
@media(max-width:900px){
  .packing__notes{grid-template-columns:1fr}
}
.home-solutions{background-color:#fff !important;background-image:none !important}
.home-solutions::after{content:none !important}
.home-reviews{background-color:#fff !important;background-image:none !important}
.home-reviews::after{content:none !important}
.home-reviews .stars{display:none}
.home-reviews .review{background:transparent;border:0;box-shadow:none;padding:0;transform:none}
.home-reviews .review::before{display:none}
.home-reviews .review__top{justify-content:flex-start;margin-bottom:0}
.home-reviews .review__q{width:46px;height:46px;color:var(--ink);opacity:1}
.home-reviews .review blockquote{position:relative;text-align:center;font-style:italic;
  color:var(--ink-3);font-size:var(--fs-md);line-height:1.62;max-width:60ch;margin:-14px auto 0}
.home-reviews .review blockquote::after{content:"\201D";position:absolute;right:-6px;top:-52px;
  font-family:Georgia,"Times New Roman",serif;font-size:74px;line-height:1;color:var(--ink)}
.home-reviews .review figcaption{text-align:center;margin-top:var(--sp-4)}
.home-reviews .review__logo{display:none}
.home-reviews .review__q{display:none}
.home-reviews .review__top{display:none}
.home-reviews .review blockquote{margin-top:0;padding-inline:58px;max-width:64ch}
.home-reviews .review blockquote::before,
.home-reviews .review blockquote::after{position:absolute;top:2px;font-family:Georgia,"Times New Roman",serif;
  font-size:56px;line-height:1.05;color:var(--ink)}
.home-reviews .review blockquote::before{content:"\201C";left:0}
.home-reviews .review blockquote::after{content:"\201D";right:0}
.page-solutions .advgrid,.page-cases .advgrid,.page-news .advgrid,.page-about .advgrid{grid-template-columns:repeat(3,1fr)}
[data-cards-link] .adv{cursor:pointer}
[data-cards-link] .adv:hover{border-color:var(--brand);background:#fff;box-shadow:0 8px 22px rgba(11,44,94,.14);transform:translateY(-2px)}
.page-cases .casecard--cta{background:var(--surface-2);justify-content:center}
.page-cases .casecard--cta .casecard__cta{padding:var(--sp-6);gap:var(--sp-3)}
.page-cases .casecard--cta p{color:var(--ink-3);font-size:var(--fs-sm)}
.casecard--cta{background:var(--surface-2);justify-content:center}
.casecard--cta .casecard__cta{padding:var(--sp-6);gap:var(--sp-3)}
.casecard--cta p{color:var(--ink-3);font-size:var(--fs-sm)}
.about--rev{grid-template-columns:1fr 1.05fr}
.about--rev .about__media{order:2}
@media(max-width:900px){
  .about--rev .about__media{order:0}
}
.page-cases .projstats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-6)}
.page-cases .projstats__i b{display:block;font-family:var(--font-mono);font-size:var(--fs-2xl);color:var(--brand);line-height:1}
.page-cases .projstats__i span{display:block;margin-top:6px;font-size:var(--fs-2xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){
  .page-cases .projstats{grid-template-columns:repeat(2,1fr)}
}
.casefilter{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.casefilter__chip{padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.casefilter__chip:hover{border-color:var(--brand);color:var(--brand)}
.casefilter__chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.searchhero{max-width:720px;margin-inline:auto;text-align:center}
.searchhero h2{margin-top:var(--sp-2)}
.searchhero>p{color:var(--ink-3);margin-top:var(--sp-3)}
.searchhero .casefilter{justify-content:center;margin-top:var(--sp-5)}
.rescount{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:var(--sp-5)}
.resgroup+.resgroup{margin-top:var(--sp-8)}
.resgroup__head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.resgroup__head b{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--ink)}
.resgroup__head span{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-3);letter-spacing:.08em}
.fuzzy{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--brand-700);letter-spacing:.06em}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.tlc{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.tlc__yr{font-family:var(--font-display);font-size:var(--fs-3xl);line-height:1;color:var(--brand);padding:var(--sp-5) var(--sp-4) 0;letter-spacing:-.01em}
.tlc__body{padding:var(--sp-3) var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.tlc__body h3{font-size:var(--fs-md);margin:0;line-height:1.3}
.tlc__body p{font-size:var(--fs-sm);color:var(--ink-3);margin:0;line-height:1.55}
.tlc__tag{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:auto;padding-top:var(--sp-2)}
.tlc--todo{border-style:dashed;background:transparent}
.tlc--todo .tlc__yr{color:var(--ink-3)}
@media(max-width:1100px){
  .tl{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .tl{grid-template-columns:1fr}
}

/* 首页产品模块:客户 10 个产品线,标签多。让 10 个等宽铺满一行、标签自动换行,
   不再横向滚动藏掉后面的(之前 8 个够宽、10 个会溢出滚走看着像 9 个)。 */
.home-families .fam__tabs{overflow-x:visible}
.home-families .fam-tab{flex:1 1 0;min-width:0;padding-inline:var(--sp-2)}
.home-families .fam-tab > span:last-child{overflow-wrap:anywhere}

/* 通用分页导航(产品分类/案例/新闻列表页) */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:var(--sp-8)}
.pagination .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:650;border-radius:var(--r-md);transition:all var(--dur) var(--ease)}
.pagination a.page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* 案例详情正文首图：场景图全宽横幅（hero 被蒙版压暗，这里清晰展示现场类型） */
.case-lead{margin:0 0 var(--sp-6);border-radius:var(--radius,8px);overflow:hidden;line-height:0}
.case-lead img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;display:block}

/* ---- 证书点击放大 + 工厂/包装轮播（秦鑫：证书可放大、工厂图轮播+放大） ---- */
/* 证书图：包一层按钮，鼠标 zoom-in，去掉按钮默认样式 */
.cert__zoom{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in;font:inherit;color:inherit}
.cert__zoom img{display:block;width:100%}
.cert__zoom:hover{opacity:.94}

/* 工厂 / 包装：横向轮播（复用 .car），每张可点击放大 */
.car--facto .car__track{grid-auto-columns:calc((100% - var(--sp-4)*3)/4)}
@media(max-width:900px){.car--facto .car__track{grid-auto-columns:calc((100% - var(--sp-4))/2)}}
@media(max-width:560px){.car--facto .car__track{grid-auto-columns:86%}}
.facto-shot{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}
.facto-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}
.facto-shot:hover img{filter:brightness(.96)}

/* ---- 图片灯箱 ---- */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox__scrim{position:absolute;inset:0;background:rgba(9,13,20,.9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lightbox__stage{position:relative;z-index:1;margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.lightbox__img{max-width:92vw;max-height:80vh;object-fit:contain;background:#fff;border-radius:var(--r-sm);
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox__cap{color:rgba(255,255,255,.92);font-size:var(--fs-sm);text-align:center;max-width:72ch;line-height:1.5}
.lightbox__cap[hidden]{display:none}
.lightbox__close{position:absolute;top:var(--sp-4);right:var(--sp-4);z-index:2;width:48px;height:48px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:20px;transition:background var(--dur) var(--ease)}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:52px;height:52px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;transition:background var(--dur) var(--ease)}
.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__nav[hidden]{display:none}
.lightbox__prev{left:var(--sp-5)}
.lightbox__next{right:var(--sp-5)}
@media(max-width:560px){
  .lightbox__nav{width:44px;height:44px}
  .lightbox__prev{left:var(--sp-2)}
  .lightbox__next{right:var(--sp-2)}
}

/* ==================== 25-c-motion.css ==================== */
/* QZ Cable — 25-c-motion.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:where(button,[role="tab"]){cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);transition-delay:var(--rvd,0ms)}
  [data-reveal].is-in{opacity:1;transform:none}
  @keyframes pinpulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.12);opacity:.15}100%{transform:scale(1.25);opacity:0}}
}
@keyframes strand{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lay{to{transform:rotate(360deg)}}
@keyframes tagin{from{opacity:0;transform:translateY(6px)}}

/* ==================== 29-c-overrides.css ==================== */
/* QZ Cable — 29-c-overrides.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

.rail a:hover .rail__tip,.rail button:hover .rail__tip,
.rail a:focus-visible .rail__tip,.rail button:focus-visible .rail__tip{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media (max-width:900px){
  .about,.news,.case-grid,.form-band .wrap,.pdp,.sol-card,.spec-2col,.pmap__grid{grid-template-columns:1fr}
}
h3,h4,.cat__body h3,.sol-card__body h3{font-family:var(--font-sans);text-transform:none;
  letter-spacing:-.012em;color:var(--ink);font-size:var(--fs-lg)}
.btn,.nav__link,.crumb,.crumb a,.link-more,.std-tab,.sol-tab,.pmap__region,.pmap__chip,
.subnav a,.utility,.utility a,.footer a,.footer__bar,.stat__label,.cat__tag,.prod__std span,
.clampbox__btn,.tblwrap__hint button,.rail__tip,.hero__meta,.hero__count,.xsec__tag,
.xsec__od-label,.xsec figcaption,.news-kicker,.contact-list b,.certwall b,.std-plate b,
.review figcaption,.pmap__loc,.faq__q,.utility__tag{text-transform:none;letter-spacing:0}
.cat,.prod,.sol-card,.review,.certwall div,.news__lead,.std-plate,.card,.form,
.pmap__cards,.pmap__map,.casemodal__panel,.chip,.rail a,.rail button,.std-tab,
.sol-tab,.pmap__region,.pmap__chip,.hero__arrows button,.casemodal__close{background-image:none;background-color:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cat:hover,.prod:hover,.sol-card:hover,.news__lead:hover,.certwall div:hover,
.std-plate:hover,.review:hover,.othercat:hover,.rel:hover,.gal__thumb:hover{border-color:var(--brand);background-color:#fff;
  box-shadow:0 8px 22px rgba(11,44,94,.14);transform:translateY(-2px)}
.sol-tab:hover,.pmap__region:hover,.pmap__chip:hover,.faq__q:hover{background-color:#fff;border-color:var(--brand);color:var(--brand)}
.cat::before,.review::before,.certwall div::before,.std-plate::before{display:block}
.cats__track,.review-grid,.certwall,.std-strip{border:0;background:transparent;gap:16px}
.link-more,.cat__body .link-more,.news__lead .link-more,.prod .link-more,
.clampbox__btn,.clampbox__btn span,.tblwrap__hint button{color:var(--ink-2)}
.link-more,.cat__body .link-more,.news__lead .link-more,.prod .link-more,
.clampbox__btn,.clampbox__btn span{color:var(--brand-700);font-size:var(--fs-sm);font-weight:650}
.cat__media img,.news__lead img,.prod__media img,.sol-card__media img{transition:none}
.btn:hover,.cat:hover,.prod:hover,.review:hover,.certwall div:hover,.std-plate:hover,
.news__lead:hover,.sol-card:hover,.rail a:hover,.rail button:hover{transform:none}
h1,h2,h3,h4,.hero__copy h1{font-family:var(--font-display);font-weight:700}
.cat,.prod,.sol-card,.review,.card,.form,.fam,.constr,.adv,.certbar,.news__lead,.std-plate,
.gal__main,.gal__thumb,.certmodal__panel,.casemodal__panel,.btn,.pcat button,input,select,textarea{border-radius:0}
img,.fam__media img,.cat__media img,.prod__media img{border-radius:0}
.fam,.sol,.news,.revcar,.prod-grid,.std-strip{margin-top:var(--sp-3)}
.review,.revcar__track,.revcar__track > .review,
.sol,.sol__deck,.sol-card,.sol__ctrl,.sol-tabs,.sol-tab,
.fam,.fam__tabs,.fam__panels,.fam__panel,.fam__links a,
.cat,.cat__media,.prod,.news__lead,.news-row,
.certbar,.certbar button,.cert__shot,.std-plate,.constr,.constr__head,.constr__lay,
.adv,.pmap__cards,.pmap__map,.block,.block__title,.subnav,
.certgrid,.gal-grid,.gal__main,.gal__thumb,.hero,.form-band,.section,.section--alt{border:0}
.sol-tab{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--font-sans);font-size:var(--fs-sm);padding:10px 16px}
.sol-tab:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.gal__main,.gal__thumb{border:1px solid var(--line)}

/* ==================== 31-theme.css ==================== */
/* QZ Cable — 主题自有规则（不由 extract_css.py 生成，不会被重新提取覆盖）
 *
 * demo 是单文件多视图应用，WP 是多页站，有些规则 demo 里不存在或形态不同，
 * 需要主题自己写。凡是写在这里的，都要注明「为什么 demo 里没有」。
 */

/* ---- 固定顶栏让位 ----
 * demo 里是一条列举了除 #home 外所有视图 id 的选择器：
 *   #products,#acsr,#industries,…,#logistics{padding-top:var(--chrome-h,104px)}
 * WP 没有视图 id 的概念，改为作用在主内容容器上。
 * 首页例外：hero 要顶到 y=0（demo 的 #home 没有 padding-top），
 * 顶栏透明压在大图上。
 *
 * ⚠️ 这条原来写的是 `body.has-hero .site-main` —— 而 `has-hero` 挂在
 * **<main> 元素**上（`<main class="site-main has-hero front-page">`），
 * body 上从来没有这个类，所以这条规则**从来没有匹配过任何元素**：
 * 首页跟内页一样让出 95px，hero 从 y=95 开始，顶栏成了一条白边。
 * 不报错、页面照常渲染，只是那条规则等于不存在
 * （与 v5.13「规则漏加作用域」同科）。
 *
 * 只命中首页。**不要**改成 `.site-main.has-hero` —— 那个类十几个内页都有，
 * 内页没有 hero 大图做底，取消让位会让标题被固定顶栏压住。 */
.site-main {
  padding-top: var(--chrome-h, 95px);
}
.site-main.front-page {
  padding-top: 0;
}

/* ---- 通用页面标题区 ----
 * demo 的内页顶部是 .pbanner（带大图与面包屑），其 CSS 属于 30-p-pages.css，
 * 要到 B3 才随页面模板一起提取。在那之前，page.php 用这个轻量标题区，
 * 保证「空页面」看起来是正常的空页面，而不是错乱的版式。
 * B3 接入 .pbanner 后本段即可删除。 */
.page-head {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.page-head__crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.page-head__crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.page-head__crumb a:hover {
  color: var(--brand);
}
.page-head__crumb .icon {
  width: 12px;
  height: 12px;
}
.page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--ink);
}
.page-head__lead {
  margin: var(--sp-3) 0 0;
  max-width: 68ch;
  color: var(--ink-3);
}

/* 页面正文区：Gutenberg 内容的容器。.editor-content 的排版细则在 18-c-content.css
   （B4 提取），这里只给最小的纵向节奏，避免空页面塌成一条。 */
.page-body {
  padding-block: var(--sp-8);
  min-height: 30vh;
}
.page-body__empty {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ---------- B3 ---------- */

/* 筛选器显隐。
   不用 [hidden]：v5.19 事故就是 `[hidden]`(0,3,0) 被 `#projects .casecard`(1,1,0)
   压过，点了筛选高亮变了卡片没动，而且不报错。专用类 + !important 免疫特异性战争。 */
.is-hidden { display: none !important; }

/* 详情页锚点让位。
   demo 写死在 `#desc,#tdata,#certificate,…` 这一串固定 id 上；WordPress 这边
   锚点是从正文的 h2 自动生成的（客户改标题 id 就变），绑死 id 会失效。
   改成对所有带 id 的 h2 生效 —— 跳转后标题不会被顶栏 + 子导航盖住。 */
.editor-content h2[id] {
  scroll-margin-top: calc(var(--chrome-h, 95px) + 60px);
}

/* clampbox 内容不足三行时按钮已由 JS 隐藏，这里去掉多余的渐变遮罩 */
.clampbox.is-short::after { display: none; }

/* ── CF7 包装层 ──────────────────────────────────────────────
   CF7 会在每个 input 外面多包一层 <span class="wpcf7-form-control-wrap">。
   .field 是 flex column，拉伸作用在这层 span 上，里面的 input 退回默认宽度
   （约 177px），于是表单看起来「输入框只有一半宽」。
   demo 里 input 是 .field 的直接子元素，靠 align-items:stretch 满宽，
   所以这两条只是把 CF7 那层补回等价状态，不改 demo 的视觉。 */
.field .wpcf7-form-control-wrap { display: block; }
.field input, .field select, .field textarea { width: 100%; }

/* CF7 自己的外壳与提示条：外壳不能带边距（会把 .form-band 的两栏撑开） */
.form-band .wpcf7 { display: flex; flex-direction: column; }
.form-band .wpcf7 form { flex: 1; display: flex; flex-direction: column; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 8px; }
.wpcf7 .wpcf7-response-output { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); font-size: var(--fs-sm); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--brand); font-size: var(--fs-xs); margin-top: 4px; }
.field input.wpcf7-not-valid, .field textarea.wpcf7-not-valid { border-color: var(--brand); }


/* ── 内容页正文的间距：原来逐个写在 style 属性里，现在收成规则 ──────
   这 9 个页面（About / 服务三页 / 证书 / 测试 / 资源 / 联系 / 致谢）的正文
   即将开放给客户在后台编辑，`margin-top:var(--sp-4)` 这种东西不该出现在
   他的编辑界面里。

   规律是量出来的：p.lede 7 处全带；普通段落 17 处里带样式的 3 处
   **全是所在块的第一段且该块没有 lede**；两处 bullets 与两处说明小字各自统一。
   有 lede 时 lede 就是第一个 p，没有 lede 时第一段是第一个 p ——
   所以下面第一条同时覆盖那 10 个点，其余 14 段正好不是 first-of-type。 */
.about__text > p:first-of-type { margin-top: var(--sp-4); }
.about__text > ul.bullets { margin-top: var(--sp-4); }

/* 网格下面那句等宽小字说明 */
.block-note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  letter-spacing: .06em;
  margin-top: var(--sp-4);
}

/* 询盘区左栏那句说明（form-band 里唯一一处内联样式） */
.form-band .wrap > div > p { margin-top: var(--sp-4); }

/* ── 顶栏的菜单按钮：桌面藏、手机留 ─────────────────────────────
   ⚠️ 两条都是**主题层的有意规则**，不是从 demo 提取出来的。

   ① 桌面不该有菜单按钮。`.burger{display:none}` 在产物里排第 634 行，
      而 `.icon-btn{display:inline-flex}` 排第 859 行 —— 同特异性 (0,1,0)、
      后者在后面，于是赢了。demo 单文件里这两条的先后正好相反，所以没暴露。
      这是**把单文件 CSS 拆成多文件之后产生的顺序事故**（计划 R1 那一类：
      不报错、不溢出，截图上只是多一个图标）。
      不去动提取产物的顺序（牵一发动全身），在这里把作用域写明确即可。 */
.masthead .burger { display: none; }

@media (max-width: 1100px) {
  .masthead .burger { display: inline-flex; }
}

/* ── 手机上打得开菜单 ─────────────────────────────────────────────
   **⚠️ 这是对 demo 的一处有意偏离。整段删掉即可退回与 demo 完全一致。**

   375 宽下顶栏内容实测 532px（24 内距 + 品牌 218 + 间距 32 + 工具组 234 + 24），
   超出视口 157px，汉堡被挤到 x=480。demo 同样打不开 —— 而且**不是**「能横着
   滚过去」：顶栏是 position:fixed，固定定位不跟随横向滚动（实测 demo 横滚到底
   按钮仍在 x=480）。demo 的 CSS 在 620px 以下一条顶栏规则都没有（已全量扫过），
   所以这不是移植丢的，是 demo 本身在手机上没有导航。

   1:1 照搬 = 交付一个手机上打不开菜单的站。与 R12 同性质，同样口径处理。

   收 Get a Quote 而不收搜索，依据是「在手机上还有没有别的入口」：
     Get a Quote  抽屉里有、底部快捷条里也有（Inquiry）—— 两处重复
     搜索         只有抽屉里有一个（抽屉 34 个可点项里第三个）
     汉堡         没有替代，它是通往导航的唯一入口
   收完实测 342px，375 下余 33px。 */
@media (max-width: 560px) {
  .head-tools > .btn { display: none; }
  .masthead__inner { gap: var(--sp-3); }
  .head-tools { gap: var(--sp-2); }
}

/* ==================== 90-print.css ==================== */
/* QZ Cable — 90-print.css
   来源：demo v5.20，按组件族提取，保持源码顺序与 @media 上下文。 */

}