/* ══════════════════════════════════════════════════════════════════════
   苏州密泰新材料 · 官网设计系统 v4 ·「工业长卷」
   ──────────────────────────────────────────────────────────────────────
   【v4 要解决的真问题】v3 把颜色收敛干净了，但版式仍是"一版块一版块"的
   模板结构：十几个全幅色带上下堆叠、每块 96px 留白、白灰交替、
   每块一个居中大标题 —— 页面像十几张卡片拼起来，气韵断在每道色带边界上。

   【v4 的四个结构性动作】
     1) 去色带、留画布：取消白/灰交替底色，全站一张连续冷白画布，
        板块之间只用 1px 细线分隔。视觉连续，页面才"长"得起来。
     2) 章节号：每个板块标题上方一个大号描边序号 01 02 03…，
        把散落板块串成一条可读长卷。顺序本身成为设计元素 —— 工厂该有的工序感。
     3) 单一高潮：全站只保留一处深色满幅（工厂与产线），其余全部浅色。
        强调靠"唯一性"，不靠到处铺色。
     4) 紧凑 + 锐角：区块节奏 96px → 64px；卡片圆角 12px → 3px。
        锐角是工业品的语言，圆角是消费品的语言。

   【色源】仍全部取自 logo，不引入第五种色相
     · 墨蓝 #0B1B2E 骨架 / 品牌蓝 #0076FF 唯一强调
     · 天青 #22C1FF 冷光点缀 / 环保绿 #4DBA46 只做语义点
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. Design Token ───────────────────────── */
:root{
    /* 骨架色 */
    --nv-ink:#0b1b2e;
    --nv-ink-2:#122a45;
    --nv-ink-3:#081426;
    --nv-line:rgba(255,255,255,.11);
    --nv-txt:rgba(255,255,255,.74);
    --nv-txt-2:rgba(255,255,255,.52);

    /* 品牌色阶 */
    --brand:#0076ff;
    --brand-d:#0055c4;
    --brand-l:#eaf3ff;
    --brand-l2:#cfe3ff;
    --sky:#22c1ff;
    --eco:#4dba46;
    --eco-d:#2e9b29;
    --eco-l:#eef8ec;

    /* 中性阶（冷灰，与主色同调） */
    --ink:#0d1c30;
    --ink-2:#33465e;
    --muted:#6d7f95;
    --line:#e4ebf3;
    --line-2:#eef3f9;
    --soft:#f7fafd;

    /* 形状与阴影：细线取代投影；锐角取代大圆角（v4 的工业语言） */
    --radius:3px;
    --radius-s:3px;
    --shadow:0 1px 2px rgba(13,28,48,.04);
    --shadow-h:0 18px 40px rgba(13,28,48,.10);
    --head-h:72px;
    --container:1320px;

    /* 渐变：三色 → 同色系双色 */
    --grad-brand:linear-gradient(95deg,#0076ff 0%,#22c1ff 100%);
    --grad-sky:linear-gradient(135deg,#0a7ff5 0%,#22c1ff 100%);
    --grad-eco:linear-gradient(135deg,#4dba46 0%,#7ed06f 100%);
    --grad-ink:linear-gradient(150deg,#122a45 0%,#0b1b2e 70%);

    /* 织物纹理（玻纤布经纬） */
    --grid-dark:
        repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 42px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 42px);
    --grid-light:
        repeating-linear-gradient(0deg,rgba(0,90,200,.032) 0 1px,transparent 1px 42px),
        repeating-linear-gradient(90deg,rgba(0,90,200,.032) 0 1px,transparent 1px 42px);
}

/* ───────────────────────── 2. 基础排版 ───────────────────────── */
body{
    font-feature-settings:"tnum";
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.container{max-width:var(--container)}
h1,h2,h3,h4{letter-spacing:-.4px}
::selection{background:rgba(0,118,255,.16)}

/* ───────────────────────── 3. 顶栏 + 页头 ───────────────────────── */
/* 最顶部一条 2px 品牌蓝：全站的第一识别符号，替代原来分散在各处的三色条 */
.topbar{
    background:var(--nv-ink-3);
    border-top:2px solid var(--brand);
    border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar-in{height:38px;color:var(--nv-txt-2);font-size:12.5px;letter-spacing:.1px}
.topbar .tb-item{color:var(--nv-txt-2)}
.topbar .tb-item:hover{color:#fff}
.topbar .tb-item .ic{color:var(--sky)}

.header{
    background:var(--nv-ink);
    background-image:var(--grid-dark);
    border-bottom:0;
    position:relative;
}
.header::after{display:none}
.header::before{
    content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 20%,rgba(255,255,255,.14) 80%,transparent);
}
.header.is-stuck{box-shadow:0 12px 34px rgba(4,14,28,.44)}
.header-in{height:var(--head-h);gap:22px}
.logo img{height:38px}
.logo:hover{opacity:.84}

.nav>ul{gap:0}
.nav>ul>li>a{
    height:var(--head-h);line-height:var(--head-h);
    padding:0 16px;font-size:15px;font-weight:500;
    color:var(--nv-txt);letter-spacing:.2px;position:relative;
}
.nav>ul>li>a:hover,.nav>ul>li:hover>a{color:#fff}
.nav>ul>li>a.on{color:#fff;font-weight:600}
.nav>ul>li>a.on::after,.nav>ul>li:hover>a::after{
    left:16px;right:16px;bottom:12px;height:2px;border-radius:0;
    background:var(--brand);
    box-shadow:0 0 12px rgba(0,118,255,.8);
}
.nav>ul>li>a::before{
    content:'';position:absolute;left:16px;right:16px;bottom:12px;height:2px;
    background:#fff;transform:scaleX(0);transition:transform .24s ease;opacity:.5;
}
.nav>ul>li>a:hover::before{transform:scaleX(1)}
.nav .caret{opacity:.5}

/* 下拉：深色卡，与页头同调 */
.sub{
    background:#0f2340;
    border:1px solid var(--nv-line);border-top:2px solid var(--brand);
    border-radius:0 0 3px 3px;
    box-shadow:0 30px 64px rgba(3,12,26,.58);
    padding:22px 24px;gap:26px;
    transform:translate(-50%,8px);
}
.nav>ul>li:hover .sub{transform:translate(-50%,0)}
.sub-title{color:#fff;font-size:14.5px;letter-spacing:.2px}
.sub-title::before{background:var(--brand);height:12px;top:5px}
.sub-links a{color:var(--nv-txt-2);border-left-color:rgba(255,255,255,.14);font-size:13.5px;padding:6px 0 6px 14px}
.sub-links a:hover{color:#fff;border-left-color:var(--brand)}
.sub-title.line{padding:8px 12px;color:var(--nv-txt);border-radius:3px;font-size:14px}
.sub-title.line:hover{background:rgba(255,255,255,.08);color:#fff}

.head-act{gap:10px;align-items:center}
.search-btn{
    width:38px;height:38px;border-radius:3px;border:1px solid var(--nv-line);
    background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;
}
.search-btn:hover{background:rgba(255,255,255,.14)}
.search-btn .ic{width:18px;height:18px}
.head-cta{
    height:38px;padding:0 18px;border-radius:3px;font-size:13.5px;font-weight:600;
    background:var(--brand);box-shadow:0 6px 16px rgba(0,118,255,.32);
}
.head-cta:hover{background:#0a82ff;color:#fff;transform:none;box-shadow:0 10px 22px rgba(0,118,255,.42)}
.search-panel{background:var(--nv-ink-2);border-top:1px solid var(--nv-line)}
.search-form input{background:rgba(255,255,255,.07);border:1px solid var(--nv-line);color:#fff;border-radius:3px}
.search-form input::placeholder{color:var(--nv-txt-2)}
.search-close{color:#fff}

/* 汉堡：旧样式是"白底 + 深色横线"，配深色页头会变成一块突兀白方块 */
.burger{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
    border-radius:3px;width:42px;height:38px;padding:0 10px;
}
.burger:hover{background:rgba(255,255,255,.16)}
.burger span{background:#fff}

/* ───────────────────────── 4. 内页 banner ───────────────────────── */
.page-hero{
    background:var(--nv-ink);
    background-image:
        linear-gradient(108deg,#0b1b2e 0%,#132f52 62%,#0e2540 100%),
        var(--grid-dark);
    color:#fff;padding:52px 0 46px;border-bottom:0;overflow:hidden;
}
.page-hero::before{width:3px;background:var(--brand)}
.page-hero::after{
    right:-140px;bottom:-200px;width:440px;height:440px;
    background:radial-gradient(circle,rgba(0,118,255,.22),transparent 68%);
}
.ph-mist{background:radial-gradient(circle,rgba(34,193,255,.10),transparent 70%)}
.page-hero h1,.page-hero .ph-h1{color:#fff;font-size:36px;letter-spacing:-.8px;line-height:1.25}
.page-hero p{color:var(--nv-txt);max-width:820px;font-size:14.5px;line-height:1.8}
.ph-en{
    display:inline-flex;align-items:center;gap:9px;
    font-size:11px;letter-spacing:3.2px;font-weight:700;
    color:#7cc9ff;margin-bottom:12px;text-transform:uppercase;
}
.ph-en::after{display:none}
.ph-en::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:2px}
.ph-ghost{color:rgba(255,255,255,.038);font-size:96px;font-weight:800;letter-spacing:3px;top:50%;transform:translateY(-50%)}
.ph-kpi{gap:12px}
.ph-kpi .pk{
    position:relative;
    background:rgba(255,255,255,.055);border:1px solid var(--nv-line);
    border-radius:3px;padding:14px 18px;min-width:106px;backdrop-filter:blur(2px);
}
/* 折角：原样式是白色高亮，在深底上比数字还抢眼，压成品牌蓝细角 */
.ph-kpi .pk::after{
    content:'';position:absolute;right:10px;top:10px;width:9px;height:9px;
    border-top:1.5px solid rgba(0,118,255,.7);border-right:1.5px solid rgba(0,118,255,.7);
    border-radius:0 2px 0 0;
}
.ph-kpi .pk b{color:#fff;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.ph-kpi .pk b i{font-size:12px;font-weight:600;margin-left:3px;color:var(--sky)}
.ph-kpi .pk span{display:block;color:var(--nv-txt-2);font-size:12px;margin-top:2px}

.breadcrumb,.crumb{background:#fff;border-bottom:1px solid var(--line);font-size:12.5px;padding:12px 0;color:var(--muted)}
.breadcrumb a:hover,.crumb a:hover{color:var(--brand)}

/* ───────────────────────── 5. 按钮 ───────────────────────── */
.btn{border-radius:3px;font-weight:600;letter-spacing:.2px}
.btn-primary{background:var(--brand);box-shadow:0 6px 18px rgba(0,118,255,.22)}
.btn-primary:hover{background:#0a82ff;box-shadow:0 12px 26px rgba(0,118,255,.3);filter:none}
.btn-outline,.btn-ghost,.btn-light{border-radius:3px}
.btn-light{border-color:var(--line)}

/* ───────────────────────── 6. 区块与标题体系 ─────────────────────────
   v4 核心改动：区块不再靠"换底色"分段，而是靠 1px 细线 + 章节号分段。
   底色连续 → 页面读起来是一整卷，而不是十几张卡片。 */
.sec{padding:64px 0;background:transparent}
/* 相邻板块之间的 1px 细线 = 衔接线（替代原来的白/灰交替色带） */
.sec + .sec{border-top:1px solid var(--line)}
/* 深色区：全站唯一高潮（工厂与产线），去掉彩色雾团，只留墨蓝实底 + 织物网格 */

/* ── 章节号：把散落的板块串成一条可读长卷 ──
   注意：不用「左侧留出 96px 竖栏」那种做法 —— 那会让首页正文比顶栏 logo
   整体右移 96px，而内页仍与 logo 对齐，跨页一看就是错位。
   这里把章节号放在标题上方，左边缘与全站内容严格对齐。 */
.sec-n::after{
    content:'';display:block;width:22px;height:2px;background:var(--brand);margin-top:12px;
}
.sec-dark .sec-n{-webkit-text-stroke:1px rgba(124,201,255,.4)}
.sec-dark .sec-n::after{background:var(--sky)}

/* 新标题体系：左对齐的「序号 + 中文 + 英文 + 说明」块 */
.sh{margin-bottom:30px;max-width:860px}
.sh-en::before{content:'';width:18px;height:2px;background:var(--brand)}
.sh h2{font-size:36px;font-weight:500;letter-spacing:-1px;line-height:1.24;color:var(--ink)}
.sh p{color:var(--muted);margin-top:11px;font-size:14.5px;line-height:1.75}
.sec-dark .sh h2{color:#fff}
.sec-dark .sh p{color:rgba(255,255,255,.62)}
.sec-dark .sh-en{color:#7cc9ff}

.sec-en::before{content:'';width:20px;height:2px;border-radius:2px;background:var(--brand)}
.sec-en.light{color:#7cc9ff}
.sec-en.light::before{background:var(--brand)}
.sec-head h2{font-size:34px;letter-spacing:-.8px;line-height:1.3;padding-bottom:0}
.sec-head h2::after{display:none}
.sec-dark .sec-head h2{color:#fff}
.sec-head p{color:var(--muted);margin-top:12px;font-size:14.5px;line-height:1.85;max-width:760px}
.sec-dark .sec-head p{color:rgba(255,255,255,.64)}
.sec-head.center h2::after{display:none}
.more{
    color:var(--brand);font-weight:600;font-size:14px;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 16px;border:1px solid var(--line);border-radius:3px;background:#fff;
    transition:.22s;border-bottom:1px solid var(--line);
}
.more:hover{border-color:var(--brand);background:var(--brand-l)}
.more i{font-style:normal;font-size:16px;transition:transform .2s}
.more:hover i{transform:translateX(3px)}
.sec-dark .more{color:#fff;background:rgba(255,255,255,.07);border-color:var(--nv-line)}
.sec-dark .more:hover{background:var(--brand);border-color:var(--brand)}

.sub-h b{font-size:17px;color:var(--ink);letter-spacing:-.2px;padding-left:12px;position:relative}
.sub-h b::before{content:'';position:absolute;left:0;top:4px;width:3px;height:15px;background:var(--brand);border-radius:2px}
.sub-h span{font-size:10.5px;letter-spacing:1.7px;color:var(--steel-300);font-weight:700}
.sec-head + .sub-h{margin-top:28px}

/* ───────────────────────── 7. 首页品牌主张条 ─────────────────────────
   v4：从"又一条全幅色带"改为一张**跨边界卡片** —— 用负 margin 压在
   首屏 banner 的下沿上，让首屏与下面的板块咬合起来，而不是硬切一刀。
   这是整页"有衔接"的第一个动作，也是最显眼的一个。 */
.brandbar::before{display:none}
.brandbar-copy .eyebrow{
    display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:3px;font-weight:700;
    color:var(--brand);margin-bottom:14px;
}
.brandbar-copy .eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:2px}
.brandbar-copy h2{font-size:27px;color:var(--ink);letter-spacing:-.6px;line-height:1.4;margin-bottom:12px}
.brandbar-copy h2 em{font-style:normal;color:var(--brand)}
.brandbar-copy p{color:var(--steel-500);font-size:14px;line-height:1.8;max-width:620px;margin-bottom:18px}

.brandstat .bs{
    background:#fff;border:0;border-radius:0;
    padding:18px 20px;position:relative;box-shadow:none;transition:.24s;
}
.brandstat .bs:hover{background:var(--brand-l)}
.brandstat .bs b{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.8px;line-height:1;font-variant-numeric:tabular-nums}
.brandstat .bs b i{font-style:normal;font-size:13px;margin-left:3px;color:var(--brand);font-weight:700}
.brandstat .bs span{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}
.brandstat .bs::after{display:none}

/* ───────────────────────── 8. 首页模块 ───────────────────────── */
/* 生产设备与加工能力：格子用 1px 线分隔，像设备清单而不是卡片墙 */
.cap-bar{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.cap-bar .cp{background:#fff;padding:24px 22px;transition:.24s}
.cap-bar .cp:hover{background:var(--brand-l)}
.cap-bar .cp i{
    display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
    color:var(--brand);background:var(--brand-l);border-radius:4px;padding:3px 8px;margin-bottom:12px;
}
.cap-bar .cp b{display:block;font-size:15px;color:var(--ink);margin-bottom:8px;letter-spacing:-.2px}
.cap-bar .cp p{font-size:13px;color:var(--steel-500);line-height:1.85}

.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fact-card{
    position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:30px 26px 26px;transition:.26s;overflow:hidden;
}
.fact-card::before{
    content:'';position:absolute;left:0;top:0;width:0;height:3px;
    background:var(--brand);transition:width .32s;z-index:2;
}
.fact-card:hover::before{width:100%}
.fact-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:var(--brand-l2)}
.fact-card .idx{
    position:absolute;right:20px;top:16px;font-size:26px;font-weight:800;letter-spacing:-1px;
    color:var(--line);font-variant-numeric:tabular-nums;line-height:1;
}
.fact-ico{
    width:50px;height:50px;border-radius:var(--radius-s);display:grid;place-items:center;
    background:var(--brand-l);color:var(--brand);margin-bottom:18px;
}
.fact-card b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:8px}
.fact-card p{font-size:13px;color:var(--steel-500);line-height:1.85}

.cap-note{
    margin:22px 0 0;padding:16px 20px;border-left:3px solid var(--brand);
    background:var(--brand-l);border-radius:0 var(--radius-s) var(--radius-s) 0;
    font-size:13px;color:var(--ink-2);line-height:1.95;
}
.cap-note b{color:var(--brand-d)}

/* 规格维度一览：数字用等宽，刻度条端点加"测量"感 */
.attr-card:hover{border-color:var(--brand-l2);box-shadow:var(--shadow-h);transform:translateY(-2px)}
.attr-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.attr-h b{font-size:16px;color:var(--ink);letter-spacing:-.2px}
.attr-h i{font-style:normal;font-size:10.5px;letter-spacing:1.6px;color:var(--steel-300);font-weight:700}
.attr-val em{font-style:normal;font-size:15px;font-weight:700;color:var(--steel-300);margin:0 5px;position:relative;top:-1px}
.attr-track::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:100%;
    background:linear-gradient(90deg,var(--brand) 0%,var(--sky) 100%);border-radius:2px;
}
.attr-track::after{
    content:'';position:absolute;right:-1px;top:-4px;width:2px;height:12px;
    background:var(--brand);border-radius:1px;
}
.attr-foot b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.attr-enum span{font-size:12.5px;padding:4px 11px;background:var(--soft);border:1px solid var(--line);border-radius:100px;color:var(--ink-2)}
.attr-card-more::before{background:var(--steel-300)}
.attr-card-more .attr-enum{margin-top:2px}
.attr-card-more .attr-enum span{background:#fff}
.attr-card-more .attr-foot{margin-top:16px}
.attr-foot-bar b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:6px}
.attr-foot-bar p{font-size:13px;color:var(--muted);line-height:1.85;max-width:760px}

/* 产品目录卡 */
.cat-card::before{display:none}
.cat-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:var(--brand-l2)}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-card:hover .cat-img img{transform:scale(1.06)}
.cat-body h3{font-size:19px;margin-bottom:10px;letter-spacing:-.3px}
.cat-body p{color:var(--muted);font-size:13.5px;margin-bottom:16px;min-height:44px;line-height:1.8}
.cat-links a{
    font-size:12.5px;color:var(--ink-2);background:var(--soft);border:1px solid var(--line);
    border-radius:100px;padding:4px 12px;transition:.2s;
}
.cat-links a:hover{background:var(--brand-l);border-color:var(--brand-l2);color:var(--brand)}

/* 快速入口 */
.quick-card b{font-size:14.5px;color:var(--ink);font-weight:700;letter-spacing:.2px}
.quick-card i{position:absolute;right:12px;top:10px;color:var(--steel-200);font-style:normal;font-size:16px;transition:.26s}
.quick-card:hover{border-color:var(--brand);box-shadow:var(--shadow-h);transform:translateY(-4px)}
.quick-card:hover b{color:var(--brand)}
.quick-card:hover i{color:var(--brand);right:10px}
.quick-card:hover .quick-ico{background:var(--brand);color:#fff}

/* 产品卡 / 案例卡 / 资讯卡 */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    transition:.28s;display:flex;flex-direction:column;
}
.prod-card::before{display:none}
.prod-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);border-color:var(--brand-l2)}
.prod-img{display:block;aspect-ratio:1/1;background:var(--soft);overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod-card:hover .prod-img img{transform:scale(1.06)}
.prod-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.prod-body h3{font-size:15.5px;line-height:1.5;margin-bottom:8px;min-height:44px;letter-spacing:-.2px}
.prod-body p{color:var(--muted);font-size:13px;flex:1;margin-bottom:12px;line-height:1.7}
.prod-more{color:var(--brand);font-size:13.5px;font-weight:600}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s}
.case-card::before{display:none}
.case-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);border-color:var(--brand-l2)}
.case-img{aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.case-card:hover .case-img img{transform:scale(1.05)}
.case-body{padding:20px 22px 22px}
.case-body h3{font-size:16.5px;margin-bottom:8px;letter-spacing:-.2px}
.case-body p{color:var(--muted);font-size:13.5px;line-height:1.75}

.news-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);border-color:var(--brand-l2)}
.news-card a{display:block;padding:26px;height:100%}
.news-card time{font-size:12px;color:var(--brand);font-weight:700;letter-spacing:.6px;font-variant-numeric:tabular-nums}
.news-card h3{font-size:16.5px;line-height:1.5;margin:10px 0;min-height:50px;letter-spacing:-.2px}
.news-card p{color:var(--muted);font-size:13.5px;margin-bottom:14px;min-height:60px;line-height:1.75}

/* 应用领域 */
.app-card::after{
    content:'';position:absolute;right:-26px;bottom:-26px;width:78px;height:78px;border-radius:50%;
    background:var(--soft);transition:.3s;
}
.app-card:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-h)}
.app-card:hover::after{background:var(--brand-l)}
.app-card .ic{position:absolute;right:18px;top:18px;width:22px;height:22px;color:var(--steel-200);transition:.28s}
.app-card:hover .ic{color:var(--brand);transform:translateY(-2px)}
.app-card:hover .app-name{color:var(--brand)}

/* 伙伴 */
.partner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.partner{
    display:grid;place-items:center;height:88px;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius-s);color:var(--ink-2);font-weight:600;font-size:14.5px;transition:.25s;
}
.partner:hover{border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow)}
.partner img{max-height:48px;width:auto;filter:grayscale(1);opacity:.7;transition:.3s}
.partner:hover img{filter:none;opacity:1}

/* 企业实力（深色区） */
.str-copy h2{color:#fff;font-size:30px;letter-spacing:-.7px;margin-bottom:16px;line-height:1.35}
.str-copy>p{color:rgba(255,255,255,.68);line-height:1.95;margin-bottom:22px;font-size:14.5px}
.str-list li{
    position:relative;padding-left:24px;margin-bottom:11px;
    color:rgba(255,255,255,.8);font-size:14px;line-height:1.7;
}
.str-list li::before{
    content:'';position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:3px;
    background:rgba(77,186,70,.16);border:1px solid rgba(77,186,70,.55);
}
.str-list li::after{
    content:'';position:absolute;left:4px;top:11px;width:4px;height:6px;
    border-right:1.6px solid var(--eco);border-bottom:1.6px solid var(--eco);
    transform:rotate(42deg);
}
.str-stat .st{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
    border-radius:var(--radius);padding:26px 22px;text-align:center;position:relative;
}
.str-stat .st::after{
    content:'';position:absolute;right:9px;top:9px;width:8px;height:8px;
    border-top:1px solid rgba(0,118,255,.6);border-right:1px solid rgba(0,118,255,.6);
}
.str-stat b{display:block;font-size:36px;color:#fff;line-height:1;letter-spacing:-1.4px;font-variant-numeric:tabular-nums}
.str-stat b i{font-style:normal;font-size:14px;margin-left:3px;color:var(--sky)}
.str-stat span{display:block;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.62)}

.plant-strip .ps{background:#0f2340;padding:26px}
.plant-strip .ps .ic{width:21px;height:21px;color:var(--sky);margin-bottom:12px}
.plant-strip .ps b{display:block;font-size:14.5px;margin-bottom:6px;color:#fff}
.plant-strip .ps p{color:rgba(255,255,255,.6);font-size:13px;line-height:1.85}

/* 底部咨询 */
.cta-copy h2{font-size:29px;margin-bottom:14px;letter-spacing:-.6px;line-height:1.35}
.cta-copy p{color:var(--muted);margin-bottom:24px;max-width:560px;line-height:1.9;font-size:14.5px}
.cta-tel span{color:var(--muted);font-size:13.5px}
.cta-tel a{font-size:32px;font-weight:800;color:var(--brand-d);letter-spacing:-.8px;font-variant-numeric:tabular-nums}

/* ───────────────────────── 9. 内页侧栏 ───────────────────────── */
.side{position:sticky;top:calc(var(--head-h) + 20px)}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
/* 侧栏标题由浅蓝底改为墨蓝底：内页左右两侧就有了稳定的深色锚点 */
.side-head{
    background:var(--nv-ink);color:#fff;padding:16px 20px;font-weight:700;font-size:15.5px;
    border-left:3px solid var(--brand);letter-spacing:.2px;
}
.side-head span{display:block;font-size:10.5px;opacity:.55;letter-spacing:1.8px;font-weight:600;margin-top:3px}
.side-nav a{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 20px;border-bottom:1px solid var(--line-2);font-size:14px;color:var(--ink-2);transition:.2s;
}
.side-nav a:last-child{border-bottom:0}
.side-nav a:hover,.side-nav a.on{background:var(--brand-l);color:var(--brand);padding-left:26px;box-shadow:inset 3px 0 0 var(--brand)}
.side-nav a i{font-style:normal;color:var(--steel-300)}
.side-contact{
    padding:24px 20px;background:var(--nv-ink);background-image:var(--grid-dark);color:#fff;
    border-radius:var(--radius);border:0;
}
.side-contact .sc-h{color:#fff;font-size:14.5px;font-weight:700;margin-bottom:14px}
.side-contact .sc-tel{
    font-size:22px;font-weight:800;color:#fff;display:block;margin-bottom:8px;
    letter-spacing:-.5px;font-variant-numeric:tabular-nums;
}
.side-contact p{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.95}
.side-contact .btn-light{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff}
.side-contact .btn-light:hover{background:var(--brand);border-color:var(--brand)}

/* ───────────────────────── 10. 正文与列表 ───────────────────────── */
.main{min-width:0}
.main-head{margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.main-head h2{font-size:24px;letter-spacing:-.5px;padding-left:13px;position:relative}
.main-head h2::before{content:'';position:absolute;left:0;top:5px;width:3px;height:17px;background:var(--brand);border-radius:2px}
.main-head p{color:var(--muted);margin-top:8px;font-size:14px}

.rich{font-size:15px;line-height:1.95;color:var(--ink-2);word-break:break-word}
.rich p{margin:0 0 16px}
.rich h2,.rich h3,.rich h4{margin:30px 0 14px;color:var(--ink);letter-spacing:-.3px}
.rich h2{font-size:22px}
.rich h3{font-size:18px;padding-left:13px;position:relative}
.rich h3::before{content:'';position:absolute;left:0;top:5px;width:3px;height:15px;background:var(--brand);border-radius:2px}
.rich img{max-width:100%;height:auto;border-radius:var(--radius-s);margin:14px 0}
.rich ul{margin:0 0 16px;padding-left:20px;list-style:none}
.rich ul li{position:relative;padding-left:4px}
.rich ul li::before{content:'';position:absolute;left:-14px;top:11px;width:5px;height:5px;border-radius:1px;background:var(--brand);opacity:.7}
.rich ol{margin:0 0 16px;padding-left:22px;list-style:decimal}
.rich li{margin-bottom:8px}

.list{display:flex;flex-direction:column;gap:16px}
.list-item{
    display:flex;gap:20px;padding:22px;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);transition:.25s;
}
.list-item:hover{box-shadow:var(--shadow-h);border-color:var(--brand-l2);transform:translateY(-2px)}
.list-date{flex:0 0 74px;text-align:center;border-right:1px solid var(--line);padding-right:16px}

.article-head{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:30px}
.article-head h1{font-size:28px;line-height:1.45;margin-bottom:14px;letter-spacing:-.6px}
.article-meta{color:var(--muted);font-size:13px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.article-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.relate{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}
.relate h3{font-size:18px;margin-bottom:20px;padding-left:13px;position:relative}
.relate h3::before{content:'';position:absolute;left:0;top:5px;width:3px;height:15px;background:var(--brand);border-radius:2px}

/* ───────────────────────── 11. 产品详情 ───────────────────────── */
.detail-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:48px;align-items:start;margin-bottom:52px;
}
.detail-gallery{min-width:0}
.detail-info h1{font-size:26px;line-height:1.4;letter-spacing:-.6px;margin-bottom:10px}
.detail-sub{color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:16px}
.detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.detail-meta span{
    font-size:12.5px;background:var(--soft);color:var(--ink-2);
    padding:5px 13px;border-radius:100px;border:1px solid var(--line);
}
.detail-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.spec-empty a{color:var(--brand);font-weight:600}

/* ───────────────────────── 12. 产品选型 ───────────────────────── */
.sk-page{padding:34px 0 80px;background:linear-gradient(180deg,#f7fafd 0,#fff 340px)}
.sk-wrap{display:grid;grid-template-columns:312px 1fr;gap:26px;align-items:start}

/* 筛选面板 */
.sk-panel{
    position:sticky;top:calc(var(--head-h) + 16px);
    /* 面板比视口高时内部滚动，否则底部的「颜色 / 清空」会被顶出屏幕够不着 */
    max-height:calc(100vh - var(--head-h) - 40px);
    overflow-y:auto;overflow-x:hidden;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 1px 3px rgba(13,28,48,.04);
}
.sk-panel::-webkit-scrollbar{width:8px}
.sk-panel::-webkit-scrollbar-thumb{background:var(--steel-200);border-radius:4px}
.sk-panel::-webkit-scrollbar-thumb:hover{background:var(--steel-300)}
.sk-panel-head{
    position:sticky;top:0;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 18px;border-bottom:1px solid var(--line);
    background:var(--nv-ink);color:#fff;border-radius:var(--radius) var(--radius) 0 0;
    border-left:3px solid var(--brand);
}
.sk-panel-head b{font-size:15px;letter-spacing:.2px;color:#fff}
.sk-reset{
    border:0;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82);
    font-size:12.5px;cursor:pointer;padding:5px 10px;border-radius:3px;transition:.2s;
}
.sk-reset:hover{background:var(--brand);color:#fff}

.sk-block{padding:16px 18px;border-bottom:1px solid var(--line-2)}
.sk-block:last-child{border-bottom:0}
.sk-block-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sk-block-h b{font-size:13.5px;font-weight:700;color:var(--ink)}
.sk-block-h b i{font-style:normal;font-size:11px;color:var(--muted);margin-left:3px;font-weight:400}
.sk-block-h span{font-size:11.5px;color:var(--muted)}

.sk-frow{display:block}
.sk-frow+.sk-frow{margin-top:10px}
.sk-frow>span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.sk-fsel{
    width:100%;height:40px;border:1px solid var(--line);border-radius:3px;background:#fff;
    font-size:13.5px;color:var(--ink-2);padding:0 32px 0 12px;outline:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7f99'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center;background-size:16px;
}
.sk-fsel:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,118,255,.1)}

.sk-kw{
    display:flex;align-items:center;gap:8px;
    border:1px solid var(--line);border-radius:3px;padding:0 12px;height:40px;background:#fff;
}
.sk-kw-sm{width:200px;height:36px;padding:0 11px;border-radius:3px}
.sk-kw-sm .ic{width:15px;height:15px}
.sk-kw-sm input{font-size:13px}
.sk-kw:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,118,255,.1)}
.sk-kw .ic{width:16px;height:16px;fill:var(--steel-400);flex:0 0 auto}
.sk-kw input{flex:1;border:0;outline:0;background:transparent;font-size:13.5px;height:100%;min-width:0}

.sk-chips{display:flex;flex-wrap:wrap;gap:7px}
.sk-chip{
    display:inline-flex;align-items:center;gap:5px;
    height:32px;padding:0 12px;border:1px solid var(--line);border-radius:3px;
    background:#fff;font-size:13px;color:var(--ink-2);cursor:pointer;transition:.16s;
}
.sk-chip:hover{border-color:var(--brand-l2);color:var(--brand);background:var(--brand-l)}
.sk-chip.on{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:600}
.sk-chip i{font-style:normal;font-size:11.5px;color:var(--steel-400);font-variant-numeric:tabular-nums}
.sk-chip.on i{color:rgba(255,255,255,.8)}

.sk-need{padding:12px 0;border-top:1px dashed var(--line)}
.sk-need:first-of-type{border-top:0;padding-top:0}
.sk-need-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sk-need-lb{font-size:12.5px;color:var(--muted)}
.sk-need-v{
    font-size:12.5px;font-weight:700;color:var(--brand);background:var(--brand-l);
    padding:3px 9px;border-radius:3px;font-variant-numeric:tabular-nums;
}
.sk-range{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
    background:linear-gradient(90deg,var(--brand) 0,var(--brand) 0,var(--steel-200) 0,var(--steel-200) 100%);
    outline:0;margin:4px 0 0;
}
.sk-range::-webkit-slider-thumb{
    -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
    background:#fff;border:2px solid var(--brand);box-shadow:0 2px 6px rgba(0,86,200,.3);cursor:pointer;
}
.sk-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--brand);cursor:pointer}
.sk-need-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--steel-400);margin-top:6px;gap:8px}
.sk-need-tip{color:var(--muted);text-align:center;flex:1}

.sk-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.sk-q{
    height:27px;padding:0 10px;border:1px solid var(--line);border-radius:3px;
    background:#fff;font-size:12px;color:var(--ink-2);cursor:pointer;font-variant-numeric:tabular-nums;transition:.16s;
}
.sk-q:hover{border-color:var(--brand);color:var(--brand)}
.sk-q.on{background:var(--brand);border-color:var(--brand);color:#fff}

.sk-rg{padding:12px 0;border-top:1px dashed var(--line)}
.sk-rg:first-of-type{border-top:0;padding-top:0}
.sk-rg-h b{font-size:13.5px;font-weight:600}
.sk-rg-h b i{font-style:normal;font-size:11px;color:var(--muted);margin-left:3px}
.sk-rg-in{display:flex;align-items:center;gap:8px}
.sk-in{
    flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:3px;
    padding:0 10px;font-size:13px;outline:0;background:#fff;font-variant-numeric:tabular-nums;
}
.sk-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,118,255,.1)}
.sk-rg-in>span{color:var(--steel-400)}
.sk-enum{padding:10px 0;border-top:1px dashed var(--line)}
.sk-enum:first-of-type{border-top:0;padding-top:0}

/* 结果区 */
.sk-result{min-width:0}
.sk-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:14px 18px;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);margin-bottom:14px;border-left:3px solid var(--brand);
}
.sk-bar-l{font-size:13.5px;color:var(--muted)}
.sk-bar-l b{color:var(--brand);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;margin:0 2px}
.sk-loading{margin-left:10px;font-size:12.5px;color:var(--steel-400)}
.sk-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sk-select{
    height:36px;border:1px solid var(--line);border-radius:3px;background:#fff;
    font-size:13px;color:var(--ink-2);padding:0 10px;outline:0;cursor:pointer;
}
.sk-select:focus{border-color:var(--brand)}

.sk-chosen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sk-tag{
    display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 12px;
    border:1px solid var(--brand-l2);background:var(--brand-l);border-radius:3px;
    font-size:12.5px;color:var(--brand-d);cursor:pointer;
}
.sk-tag i{font-style:normal;font-size:15px;line-height:1;opacity:.6}
.sk-tag:hover{background:#dbeafe}
.sk-tag-clear{border-color:var(--line);background:#fff;color:var(--muted)}

.sk-note{
    display:flex;gap:10px;align-items:flex-start;
    padding:12px 16px;margin-bottom:16px;border-radius:3px;
    background:#fff8e8;border:1px solid #fde3b0;color:#8a5a08;font-size:13px;line-height:1.75;
}
.sk-note .ic{width:17px;height:17px;fill:#f59e0b;flex:0 0 auto;margin-top:3px}
.sk-note b{color:#7a4c05}

.sk-list{display:flex;flex-direction:column;gap:16px}
.sk-item{
    display:grid;grid-template-columns:170px 1fr;gap:16px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;transition:.2s;
}
.sk-item:hover{border-color:var(--brand-l2);box-shadow:0 14px 34px rgba(13,28,48,.09)}
.sk-shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sk-item:hover .sk-shot img{transform:scale(1.05)}
.sk-main{min-width:0}
.sk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sk-top h3{font-size:17px;font-weight:700;letter-spacing:-.3px}
.sk-top h3 a:hover{color:var(--brand)}
.sk-hit{font-size:12.5px;color:var(--muted)}
.sk-hit b{color:var(--eco-d);font-size:15px;font-weight:800}
.sk-sub{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.65}

/* overflow-x:auto —— 表格 nowrap 不折行，列多时横向滚动，而不是把「询价」列裁掉 */
.sk-table-wrap{margin-top:12px;border:1px solid var(--line);border-radius:3px;overflow-x:auto}
.sk-table{width:100%;border-collapse:collapse;font-size:13px}
.sk-table thead th{
    background:#f1f6fd;color:var(--ink-2);font-weight:600;font-size:12.5px;
    text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.sk-table thead th i{font-style:normal;color:var(--steel-400);font-size:11px;margin-left:3px}
.sk-mark{
    font-style:normal;display:inline-block;margin-left:4px;width:16px;height:16px;line-height:16px;
    text-align:center;border-radius:4px;font-size:11px;font-weight:700;
    background:var(--brand-l);color:var(--brand-d);
}
.sk-table tbody td{padding:9px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.sk-table tbody tr:last-child td{border-bottom:0}
.sk-table tbody tr:hover{background:var(--brand-l)}
.sk-td-model{font-weight:700;color:var(--ink);letter-spacing:.2px;white-space:nowrap}
.sk-na{color:var(--steel-300)}
/* 「询价」列吸在右侧：横向滚动时也永远看得见 */
.sk-th-act,.sk-td-act{
    width:82px;min-width:82px;text-align:right;white-space:nowrap;
    position:sticky;right:0;background:#fff;
    box-shadow:-8px 0 10px -8px rgba(13,28,48,.14);
}
.sk-table thead .sk-th-act{background:#f1f6fd}
.sk-table tbody tr:hover .sk-td-act{background:var(--brand-l)}
.sk-inq{
    height:27px;padding:0 11px;border:1px solid var(--brand);border-radius:3px;background:#fff;
    color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:25px;
}
.sk-inq:hover{background:var(--brand);color:#fff}
/* 展开 / 收起：按钮始终在表格**下方**，不再夹在两张表中间 */
.sk-more{
    display:flex;align-items:center;justify-content:center;gap:4px;width:100%;
    border:0;border-top:1px solid var(--line);background:#fbfdff;
    padding:10px;font-size:12.5px;color:var(--brand);cursor:pointer;
}
.sk-more:hover{background:var(--brand-l)}
.sk-more svg{width:16px;height:16px;fill:currentColor;transition:transform .2s}
.sk-more.on svg{transform:rotate(180deg)}
.sk-extra{display:none}
.sk-table-wrap.is-open .sk-extra{display:table-row}
.sk-foot{margin-top:10px}
.sk-link{font-size:13px;color:var(--brand);font-weight:600}
.sk-link i{font-style:normal;margin-left:3px}

.sk-empty{text-align:center;padding:56px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.sk-empty svg{width:44px;height:44px;fill:var(--steel-300);margin-bottom:14px}
.sk-empty h3{font-size:17px;margin-bottom:8px}
.sk-empty p{color:var(--muted);font-size:13.5px;margin-bottom:16px}

.sk-nodata{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line)}
.sk-nodata h3{font-size:15px;color:var(--ink-2);margin-bottom:14px}
.sk-nodata-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sk-nodata-item{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13px;color:var(--ink-2)}
.sk-nodata-item:hover{border-color:var(--brand);color:var(--brand)}
.sk-nodata-item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft)}
.sk-nodata-item span{display:block;padding:8px 10px;line-height:1.5}

.sk-nomatch{
    display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding:14px 18px;
    border:1px dashed var(--steel-300);border-radius:var(--radius);background:#fbfcfe;
}
.sk-nomatch b{font-size:14.5px;color:var(--ink)}
.sk-nomatch span{font-size:13px;color:var(--muted)}
.sk-maybe{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)}
.sk-maybe-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sk-maybe-h b{font-size:15px;color:var(--ink)}
.sk-maybe-h span{font-size:12.5px;color:var(--muted)}
.sk-maybe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.sk-maybe-item{display:block;background:#fff;border:1px dashed var(--steel-300);border-radius:var(--radius);overflow:hidden;color:var(--ink-2)}
.sk-maybe-item:hover{border-color:var(--brand);color:var(--brand)}
.sk-maybe-item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft);opacity:.9}
.sk-maybe-t{display:block;padding:8px 10px 2px;font-size:13px;font-weight:600;line-height:1.5}
.sk-maybe-n{display:block;padding:0 10px 9px;font-size:12px;color:var(--steel-400)}

/* ───────────────────────── 13. 页脚 ───────────────────────── */
.footer{
    position:relative;background:var(--nv-ink-3);
    background-image:var(--grid-dark);
    border-top:0;color:var(--nv-txt-2);padding-top:66px;font-size:13.5px;
}
/* 页脚以一条品牌蓝细线开场，与页头呼应，形成全站上下的色环 */
.footer::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand)}
.footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:36px;padding-bottom:48px}
.fcol .fcol-h{color:#fff;font-size:14.5px;font-weight:700;margin-bottom:16px}
.fcol .fcol-h::after{content:'';display:block;width:20px;height:2px;background:var(--brand);margin-top:9px;border-radius:2px}
.fcol ul li{margin-bottom:9px}
.fcol ul li a{color:var(--nv-txt-2);font-size:13px;line-height:1.7}
.fcol ul li a:hover{color:#fff}
.flogo{margin-bottom:16px}
.flogo img{height:34px}
.fdesc{color:var(--nv-txt-2);line-height:1.9;font-size:13px;margin-bottom:16px}
.fmail a{color:var(--nv-txt-2);font-size:13px}
.fmail a:hover{color:#fff}
.faddr{color:var(--nv-txt-2);line-height:1.95;font-size:13px}
.qr{margin-top:14px;text-align:center;display:inline-block}
.qr img{width:96px;height:96px;background:#fff;padding:5px;border-radius:3px}
.qr span{display:block;color:var(--nv-txt-2);font-size:12px;margin-top:7px}
.foot-bar{border-top:1px solid var(--nv-line);background:#06101f;color:var(--nv-txt-2);font-size:12.5px}
.foot-bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:52px}
.foot-bar a{color:var(--nv-txt-2)}
.foot-bar a:hover{color:#fff}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}

/* 侧边悬浮工具 */
.side-tools{position:fixed;right:18px;bottom:110px;z-index:110;display:flex;flex-direction:column;gap:10px}
.st-item .ic{font-size:19px;color:var(--sky)}
.st-item:hover{background:var(--brand);border-color:var(--brand);transform:translateX(-2px)}
.st-item:hover .ic{color:#fff}

/* 移动端底部导航 */
.mbar a{color:var(--steel-500)}
.mbar a:hover,.mbar a:active{color:var(--brand)}
.mbar-tel{color:var(--brand)!important}

/* 弹窗与表单 */
.modal-box{border-radius:var(--radius)}
.form input,.form textarea{border-radius:3px}
.form input:focus,.form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,118,255,.1)}

/* ───────────────────────── 14. 响应式 ───────────────────────── */
@media (max-width:1200px){
    .partner-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1080px){
    .sk-wrap{grid-template-columns:1fr}
    /* 面板只有 5 项，横过来铺开，别在结果上方堆一长条 */
    .sk-panel{
        position:static;max-height:none;overflow:visible;
        display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start;
    }
    .sk-panel-head{grid-column:1/-1;position:static;border-radius:var(--radius) var(--radius) 0 0}
    .fact-grid{grid-template-columns:repeat(2,1fr)}
    .detail-grid{grid-template-columns:1fr;gap:28px}
    .footer-in{grid-template-columns:1fr 1fr 1fr;gap:30px}
    .sec{padding:76px 0}
    .sec-head h2{font-size:30px}
    .page-hero{padding:44px 0 40px}
    .page-hero h1,.page-hero .ph-h1{font-size:30px}
    .ph-ghost{font-size:74px}
}
@media (max-width:900px){
    .prod-grid{grid-template-columns:repeat(3,1fr)}
    .case-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
    /* 移动端底部悬浮条已含"电话"，侧边浮窗收起，避免遮挡筛选面板 */
    .side-tools{display:none}
    .header-in{gap:12px}
    .search-btn{width:38px;height:38px}
}
@media (max-width:700px){
    .sec{padding:56px 0}
    .sec-head h2{font-size:25px}
    .brandbar-copy h2{font-size:22px}
    .detail-grid{gap:22px;margin-bottom:34px}
    .fact-grid{grid-template-columns:1fr}
    .footer-in{grid-template-columns:1fr 1fr;gap:26px}
    .foot-bar-in{justify-content:center;text-align:center}
}
@media (max-width:640px){
    .sk-page{padding:22px 0 60px}
    .sk-item{grid-template-columns:1fr;gap:12px}
    .sk-table{min-width:520px}
    .sk-bar-r{width:100%}
    .sk-kw-sm{flex:1;width:auto;min-width:0}
    .sk-bar-l b{font-size:16px}
    .prod-grid{grid-template-columns:repeat(2,1fr)}
    .case-grid,.news-grid{grid-template-columns:1fr}
    .quick-grid,.app-grid{grid-template-columns:repeat(3,1fr)}
    .partner-grid{grid-template-columns:repeat(2,1fr)}
    .main-head h2{font-size:21px}
    .detail-info h1{font-size:22px}
    .footer-in{grid-template-columns:1fr}
    .cta-tel a{font-size:26px}
}

/* ══════════════════════════════════════════════════════════════════════
   28. v4 新增 —— 首页「工业长卷」
   ① 产品体系 bento   ② 工厂与产线（全站唯一深色高潮）   ③ 行业应用与案例
   ══════════════════════════════════════════════════════════════════════ */

/* ── 28.1 产品体系：非对称 bento（左两列分类卡 + 右侧热门型号深色清单） ── */
.bento .bn{background:#fff;display:flex;flex-direction:column;position:relative;transition:background .24s;overflow:hidden}
.bento .bn:hover{background:var(--brand-l)}
.bn-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.bento .bn:hover .bn-shot img{transform:scale(1.04)}
.bn-shot em{
    position:absolute;left:0;top:0;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
    color:#fff;background:var(--brand);padding:5px 11px;
}
.bn-body h3{font-size:19px;letter-spacing:-.4px;margin-bottom:8px}
.bn-body h3 a{color:var(--ink)}
.bn-body h3 a:hover{color:var(--brand)}
.bn-body p{font-size:13.5px;color:var(--steel-500);line-height:1.75;margin-bottom:13px}
.bn-list a{
    font-size:12.5px;color:var(--ink-2);background:var(--soft);
    border:1px solid var(--line);border-radius:2px;padding:5px 10px;transition:.2s;
}
.bn-list a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.bn-hot-h b{font-size:14.5px;letter-spacing:-.2px;color:#fff}
.bn-hot-h span{font-size:10px;letter-spacing:1.5px;color:#7cc9ff;font-weight:700}
.bn-hot ul{list-style:none;margin:0;padding:0;flex:1}
.bn-hot li{border-top:1px solid rgba(255,255,255,.1)}
.bn-hot li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.bn-hot li a{display:flex;align-items:center;gap:10px;padding:10px 0;color:rgba(255,255,255,.8);font-size:13.5px;transition:.2s}
.bn-hot li a:hover{color:#fff;padding-left:5px}
.bn-hot li a i{font-style:normal;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-hot li a em{font-style:normal;color:var(--sky);font-size:15px;line-height:1}
.bn-hot-btm a{
    display:block;text-align:center;font-size:13.5px;font-weight:600;
    padding:10px 0;border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:2px;transition:.22s;
}
.bn-hot-btm a:hover{background:var(--brand);border-color:var(--brand)}

/* ── 28.2 工厂与产线：全站唯一深色满幅 + 多角度滚动胶片条 ─────────── */
.fm{--fm-line:rgba(255,255,255,.14)}
/* 车间实拍压暗后作底：尚缺图的工序卡也落在真实厂房质感上，而不是空底 */
.fm-stage .fms{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;z-index:1}
.fm-stage .fms.on{opacity:1}
.fm-stage .fms img{width:100%;height:100%;object-fit:cover;display:block}
/* 还没上传实拍图时的「工序蓝图」：不是破图占位，是一张叠在厂房底图上的技术图纸 */
.fm-blue b{
    font-size:52px;font-weight:700;line-height:1;color:transparent;
    -webkit-text-stroke:1px rgba(124,201,255,.5);font-variant-numeric:tabular-nums;
}
.fm-blue svg{width:70px;height:70px;color:#7cc9ff;opacity:.85}
.fm-blue h4{font-size:17px;color:#fff;letter-spacing:-.2px}
.fm-blue p{font-size:12.5px;color:rgba(255,255,255,.48);letter-spacing:.4px}
/* 舞台四角的取景框标记 */
.fm-stage::before,.fm-stage::after{content:'';position:absolute;width:16px;height:16px;border:1px solid rgba(255,255,255,.34);z-index:3;pointer-events:none}
.fm-stage::before{left:13px;top:13px;border-right:0;border-bottom:0}
.fm-stage::after{right:13px;bottom:13px;border-left:0;border-top:0}
.fm-cap b{font-size:17px;color:#fff;letter-spacing:-.3px;display:block}
.fm-cap span{font-size:12.5px;color:rgba(255,255,255,.6);display:block;margin-top:5px;line-height:1.6}
.fm-idx b{display:inline;font-size:19px;color:#fff}
.fm-side-h b{font-size:14.5px;color:#fff;display:block;letter-spacing:-.2px}
.fm-side-h span{font-size:10px;letter-spacing:1.6px;color:#7cc9ff;font-weight:700;margin-top:6px;display:block}
.fm-steps li{position:relative;padding:0 0 15px 30px;cursor:pointer}
.fm-steps li::before{content:'';position:absolute;left:6px;top:16px;bottom:0;width:1px;background:var(--fm-line)}
.fm-steps li:last-child::before{display:none}
.fm-steps li::after{
    content:'';position:absolute;left:2px;top:6px;width:9px;height:9px;
    border:1px solid rgba(255,255,255,.34);background:#0c1e35;transition:.22s;
}
.fm-steps li.on::after{border-color:var(--brand);background:var(--brand)}
.fm-steps li b{display:block;font-size:13.5px;color:rgba(255,255,255,.58);font-weight:500;transition:color .2s}
.fm-steps li p{font-size:12px;color:rgba(255,255,255,.34);line-height:1.65;margin:4px 0 0;max-height:0;overflow:hidden;transition:max-height .32s}
.fm-steps li.on b{color:#fff}
.fm-steps li.on p{max-height:76px;color:rgba(255,255,255,.56)}
.fm-stats div{background:#0c1e35;padding:13px 10px;text-align:center}
.fm-stats b{display:block;font-size:20px;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.fm-stats b i{font-style:normal;font-size:11px;color:#7cc9ff;margin-left:2px}
.fm-stats span{display:block;font-size:11px;color:rgba(255,255,255,.46);margin-top:6px}
/* 胶片条：轨道含两份等宽副本，位移 -50% 恰好一个周期（无缝） */
.fm-reel:hover .fm-track{animation-play-state:paused}
@keyframes fmRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fm-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:.46;transition:opacity .3s}
.fm-th:hover img{opacity:.84}
.fm-th.on{outline-color:var(--brand)}
.fm-th.on img{opacity:1}
.fm-th-b b{font-size:12.5px;color:#fff;line-height:1.45}
.fm-th-b em{font-style:normal;font-size:10px;color:#7cc9ff;letter-spacing:1.4px;font-variant-numeric:tabular-nums;margin-bottom:4px}
.fm-noimg svg{width:38px;height:38px;color:rgba(124,201,255,.55)}
.fm-foot p{font-size:12.5px;color:rgba(255,255,255,.46);line-height:1.7;margin:0}

/* ── 28.3 行业应用与案例（合并为一屏，避免又一个"整块色带"） ──────── */
.ind{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);gap:42px;align-items:start}
.ind-l .sub-h{margin-top:0}
.ind-tags a{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;color:var(--ink-2);background:#fff;
    border:1px solid var(--line);border-radius:2px;padding:7px 12px;transition:.2s;
}
.ind-tags a::before{content:'';width:5px;height:5px;background:var(--brand);opacity:.65;flex:0 0 auto}
.ind-tags a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.ind-tags a:hover::before{background:#fff;opacity:1}
.case-mini .cm{background:#fff;display:flex;flex-direction:column;transition:background .22s}
.case-mini .cm:hover{background:var(--brand-l)}
.cm-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.case-mini .cm:hover .cm-img img{transform:scale(1.05)}
.cm-b h3{font-size:14.5px;line-height:1.5;color:var(--ink);letter-spacing:-.2px;margin-bottom:6px}
.cm-b p{font-size:12.5px;color:var(--steel-500);line-height:1.7}

/* ── 28.4 合作伙伴：细条跑马灯（轨道同样两份副本，位移 -50%） ───────── */
.pm{position:relative;overflow:hidden;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pm::before,.pm::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.pm::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.pm::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.pm:hover .pm-track{animation-play-state:paused}
@keyframes pmRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pm-item{display:flex;align-items:center;justify-content:center;height:88px;padding:0 32px;border-right:1px solid var(--line-2);white-space:nowrap}
.pm-item img{max-height:34px;max-width:132px;filter:grayscale(1);opacity:.5;transition:.3s}
.pm-item:hover img{filter:none;opacity:1}
.pm-item b{font-size:13.5px;color:var(--muted);transition:.25s}
.pm-item:hover b{color:var(--ink)}

/* ── 28.5 正文规格表：第一行即「标准单位」表头（客户明确要求的形态） ── */
.rich-scroll{
    margin:20px 0;background:#fff;border:1px solid var(--line);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.rich-scroll table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.rich-scroll td,.rich-scroll th{
    padding:12px 15px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
    white-space:nowrap;text-align:left;vertical-align:middle;color:var(--ink-2);
}
.rich-scroll td:last-child,.rich-scroll th:last-child{border-right:0}
.rich-scroll tr:last-child>td{border-bottom:0}
.rich-scroll tr:first-child>td,.rich-scroll tr:first-child>th{
    background:var(--brand-l);color:var(--ink);border-bottom:1px solid var(--brand-l2);
}
.rich-scroll tr:first-child b{display:block;font-size:13.5px;font-weight:500;letter-spacing:.2px;color:var(--ink)}
.rich-scroll tr:first-child .ct-u{
    display:block;margin-top:3px;font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--brand);
}
.rich-scroll tr:nth-child(even)>td{background:#fbfdff}
.rich-scroll tr:hover>td{background:var(--brand-l)}
/* Word 导出的单元格里参数名与单位各占一个 <p>：把第二个 <p> 变成"单位小标签"，
   于是第一行读起来就是「厚度 / mm」的标准单位表头，而不是一团同字号文字。 */
.rich-scroll td p,.rich-scroll th p{margin:0}
.rich-scroll tr:first-child td p{font-weight:500;color:var(--ink)}
.rich-scroll tr:first-child td p + p{
    margin-top:3px;font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--brand);
}

/* ── 28.6 产品详情：右栏只留「身份 + 决策」，不重复下方已有的规格数据 ── */
.detail-grid{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:44px;margin-bottom:44px}
.di-key{display:grid;gap:9px;list-style:none;margin:0 0 4px;padding:0}
.di-key li{position:relative;padding-left:17px;font-size:13.5px;color:var(--steel-500);line-height:1.7}
.di-key li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--brand);opacity:.72}
.di-hint{
    margin-top:18px;padding:13px 15px;background:var(--soft);
    border-left:2px solid var(--brand-l2);font-size:12.5px;color:var(--muted);line-height:1.75;
}
.di-hint b{color:var(--ink-2);font-weight:600}

/* ── 28.7 新闻：1 主 + 4 列表（非等分网格） ─────────────────────── */
.ns-lead>a{display:block;height:100%;transition:background .24s}
.ns-lead>a:hover{background:var(--brand-l)}
.ns-lead-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.ns-lead>a:hover .ns-lead-img img{transform:scale(1.04)}
.ns-lead-b time{font-size:11.5px;letter-spacing:1.2px;color:var(--brand);font-variant-numeric:tabular-nums}
.ns-lead-b h3{font-size:19px;line-height:1.45;letter-spacing:-.35px;color:var(--ink);margin:8px 0 9px}
.ns-lead-b p{font-size:13.5px;color:var(--steel-500);line-height:1.75}
.ns-list li{flex:1;border-top:1px solid var(--line-2)}
.ns-list li:first-child{border-top:0}
.ns-list li a{display:flex;align-items:center;gap:14px;padding:0 20px;height:100%;min-height:64px;transition:.22s}
.ns-list li a:hover{background:var(--brand-l)}
.ns-list time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;letter-spacing:.4px}
.ns-list b{font-size:14px;font-weight:500;color:var(--ink);line-height:1.55;flex:1;min-width:0}
.ns-list i{font-style:normal;color:var(--brand);font-size:16px;flex:0 0 auto;transition:transform .2s}
.ns-list li a:hover i{transform:translateX(3px)}

/* ── 28.8 底部咨询：厂址 / 办公 / 服务时间收成一条细带 ─────────── */
.cta-strip>div{background:#fff;padding:16px 20px}
.cta-strip b{display:block;font-size:12.5px;letter-spacing:.6px;color:var(--brand);margin-bottom:6px}
.cta-strip p{font-size:13px;color:var(--steel-500);line-height:1.7}

/* ── 28.9 响应式（v4 新增断点） ─────────────────────────────────── */
@media (max-width:1180px){
    .bn-hot ul{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}
    .ind{grid-template-columns:1fr;gap:26px}
    .ind-tags a{font-size:12px}
}
@media (max-width:1024px){
}
@media (max-width:900px){
    .sec{padding:50px 0}
    .sec-n::after{margin-top:10px}
    .sh h2{font-size:27px}
}
@media (max-width:760px){
    .bn-hot ul{grid-template-columns:1fr}
    .sh h2{font-size:24px}
    .fm-stats div{display:flex;align-items:baseline;justify-content:space-between;text-align:left;padding:11px 14px}
    .fm-stats b{display:inline;font-size:17px}
    .fm-stats span{margin-top:0}
    .ns-list li a{padding:14px 18px;min-height:0;align-items:flex-start;flex-direction:column;gap:7px}
    .ns-list b{font-size:13.5px}
    .ns-list i{display:none}
    .rich-scroll td,.rich-scroll th{padding:10px 12px}
}
/* ══════════════════════════════════════════════════════════════════════
   v10「秩序」· 设计系统
   ──────────────────────────────────────────────────────────────────────
   本版不新增任何"创意容器"，只做一件事：把页面收敛成一个系统。

   【为什么推倒重来】对线上首页做了一次布局体检（_audit.py），数字如下：
     · font-size 22 种（14/11/12.5/13/12/15/36/16/20/10.5/15.5/14.5/17/28/44/12.8…）
     · 文字颜色 18 种
     · 内容左边界 78 个不同值
     · 绿色跑了 61 处，比品牌蓝 26 处还多
     · 板块高度 856 / 1775 / 883 / 1015 / 846 / 453，节奏乱
   这四条合起来就是"乱七八糟、没有条理"。v9 我以为是"创新"的东西
   （规格尺 / 卷带 / 工序链 / 大字词表 / 索引表）其实是 5 种互不相干的
   容器堆在一起，每一个都在抢注意力。本版全部移除。

   【v10 的硬约束，写死不妥协】
     1) 字号 7 档，全站不出现第 8 种
     2) 文字色 5 个：墨 / 次级墨 / 弱化灰 / 品牌蓝 / 数据绿
        绿只出现在"规格数值"上，首页不超过 6 处
     3) 一条对齐线：所有板块内容共用 .wrap（1240 + 同一 padding-inline）
     4) 一种卡片：.card 通吃产品线 / 案例 / 新闻 / 设备，只有图片比例不同
     5) 直角（2px），细线（1px #E9EEF5），不用渐变装饰、不用大投影
     6) 板块上下节奏统一 --sect，不再忽高忽低

   【色源】logo 逐像素取样：蓝 #0076FF / 绿 #4DBA46 / 字标墨 #102038
     蓝 = 唯一强调（按钮、链接、当前态、重点边线）
     绿 = 只标数据（规格取值、数字统计），是"材料语言"不是"装饰语言"
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────────── 33.1 排版系统：把 22 种字号压到 7 档 ───────────────── */
:root{
    --fs-1:clamp(32px,3.6vw,52px);   /* 首屏主标题 */
    --fs-2:clamp(24px,2.1vw,30px);   /* 章节标题 / 页内 H1 */
    --fs-3:clamp(17px,1.35vw,20px);  /* 卡片标题 / 小标题 */
    --fs-4:17px;                     /* 正文强调 / 导语 */
    --fs-5:15px;                     /* 正文 */
    --fs-6:13px;                     /* 次要说明 */
    --fs-7:12px;                     /* 标签 / 元信息 / 面包屑 */

    --ink:#102038;                   /* 主文字（= logo 字标墨） */
    --ink-2:#43536b;                 /* 正文 */
    --ink-3:#8794a6;                 /* 弱化 */
    --brand:#0076ff;
    --brand-d:#005bc0;
    --brand-w:#eaf3ff;
    --leaf:#4dba46;
    --leaf-d:#3a9a34;                /* 白底上过对比度的绿 */
    --paper:#ffffff;
    --paper-2:#f6f8fb;
    --line:#e9eef5;
    --line-2:#d8e0ea;

    --r:2px;                                  /* 全站唯一圆角 */
    --wrap:1240px;
    --container:1240px;      /* v4 是 1320 —— 页头用的 .container 必须跟正文 .wrap 同宽，
                                否则导航与正文内容的左边界对不上，"一条对齐线"就断了 */
    --band:clamp(20px,4.4vw,56px);            /* 内容左右留白 */
    --sect:clamp(56px,6.2vw,96px);            /* 板块上下节奏（统一） */
    --gap:24px;                               /* 网格间距（统一） */
    --ease:cubic-bezier(.22,.61,.36,1);
}

/* 正文类：统一 15px / 1.8 行高。旧的 14 / 12.5 / 13 / 10.5 / 15.5 / 14.5 / 12.8 全部并到 15 */
body,p,li,dd,dt,label,td,th,figcaption,
input,textarea,select,option,button{font-size:var(--fs-5);color:var(--ink-2);line-height:1.8}

/* 标题类：h1/h2 同档、h3 一档、h4 一档。旧的 44 / 36 / 28 / 20 全部并到这三档 */
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-weight:700;line-height:1.4}
h1,h2{font-size:var(--fs-2);letter-spacing:-.2px}
h3{font-size:var(--fs-3);line-height:1.5}
h4{font-size:var(--fs-4);font-weight:600}
h5,h6{font-size:var(--fs-5);font-weight:600}
small{font-size:var(--fs-7);color:var(--ink-3)}
a{color:inherit;text-decoration:none}

/* 旧主题里 a 有各种 hover 色，统一成品牌蓝 */
a:hover{color:var(--brand)}

/* ───────────────── 33.2 一条对齐线：全站唯一容器 ───────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--band);width:100%}
.container{max-width:var(--wrap);padding-inline:var(--band)}

/* ───────────────── 33.3 章节头：左标题 / 右说明，一条底线 ───────────────── */
.sh{
    display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
    padding-bottom:22px;margin-bottom:clamp(28px,3.2vw,44px);
    border-bottom:1px solid var(--line);
}
/* v4 的 .sh-en 前面画了一条 18px 短线，这里整个章节头已经有自己的秩序，去掉 */
.sh-en::before{display:none}
.sh-r a{color:var(--brand);font-weight:600}
@media(max-width:860px){
    .sh{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ───────────────── 33.4 一种卡片：全站图片卡的唯一形态 ─────────────────
   产品线 / 案例 / 新闻 / 设备 全部用 .card，只有 --ar（图片比例）不同。
   一致性本身就是设计感 —— 上一版的乱，一半来自"每块一个容器"。 */
.card{
    display:flex;flex-direction:column;background:#fff;
    border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;height:100%;
    transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.card:hover{border-color:var(--brand);transform:translateY(-3px)}
.card-im img{
    width:100%;height:100%;object-fit:cover;display:block;
    /* 全站图片统一影调：略降饱和、微提对比。素材来源不一，先拉到一条线上 */
    filter:saturate(.92) contrast(1.04);
    transition:transform .5s var(--ease),filter .3s var(--ease);
}
.card:hover .card-im img{transform:scale(1.045);filter:saturate(1) contrast(1.06)}
.card-b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
/* 卡片上的"数据"用绿 —— 这是绿在全站唯一允许出现的地方之一 */
.card-go::after{content:'';width:14px;height:1px;background:currentColor;transition:width .22s var(--ease)}
.card:hover .card-go::after{width:26px}

/* 网格：全站统一 gap，列数只有 4 / 3 两种 */
.grid{display:grid;gap:var(--gap)}
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

/* ───────────────── 33.5 按钮：两种，方角，不用渐变 ───────────────── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:46px;padding:0 26px;border-radius:var(--r);border:1px solid transparent;
    font-size:var(--fs-5);font-weight:600;letter-spacing:.01em;white-space:nowrap;
    transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn-1:hover{background:var(--brand-d);color:#fff}
.btn-2:hover{border-color:var(--brand);color:var(--brand)}

/* ───────────────── 33.6 页头：纸白，细，一条 2px 双色线 ───────────────── */
.topbar{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:var(--fs-7)}
.topbar,.topbar a{color:var(--ink-3)}
.topbar a:hover{color:var(--brand)}
.header{background:#fff;border-bottom:1px solid var(--line);box-shadow:none}
.header .container,.header .wrap{display:flex;align-items:center;gap:32px}
.nav>ul>li>a{color:var(--ink);font-size:var(--fs-5);font-weight:600}
.nav>ul>li>a:hover,.nav>ul>li.on>a{color:var(--brand)}
/* 顶栏那条线：蓝 46% + 绿 54%，logo 两色同框 */
.topbar::before{
    content:'';position:absolute;left:0;top:0;height:2px;width:100%;
    background:linear-gradient(90deg,var(--brand) 0 46%,var(--leaf) 46% 100%);
}

/* ───────────────── 33.7 首屏：全宽图 + 左侧文案，不再叠规格尺 ───────────────── */
.hero{position:relative;background:#fff;overflow:hidden}
.hero-eyebrow::before{content:'';width:26px;height:2px;background:var(--brand)}
.hero-t em{font-style:normal;color:var(--brand)}
.hero-p b{color:var(--ink);font-weight:700}
/* 数字走绿：这是"材料数据"的语言，首页仅此 4 处 + 卡片上的规格 */
.hero-p b.n{color:var(--leaf-d)}
.hero-r img{
    width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
    filter:saturate(.94) contrast(1.05);
}
/* 轮播：只显示 .on 那张。别用 img+img 那种写法 —— 当前是第 3 张时，
   第 1 张不匹配 img+img 会漏出来，两张图同时可见 */
.hero-r img{display:none}
.hero-r img.on{display:block}
.hero-cap b{display:block;font-size:var(--fs-3);font-weight:700;color:#fff;line-height:1.4}
.hero-cap em{display:block;font-style:normal;font-size:var(--fs-6);color:rgba(255,255,255,.78);line-height:1.6;margin-top:4px}
.hero-tabs button{
    height:34px;padding:0 14px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r);
    font-size:var(--fs-6);font-weight:600;color:var(--ink-2);cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;transition:all .2s var(--ease);
    font-family:inherit;
}
.hero-tabs button b{font-size:var(--fs-7);color:var(--ink-3);font-weight:700}
.hero-tabs button:hover{border-color:var(--brand);color:var(--brand)}
.hero-tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.hero-tabs button.on b{color:rgba(255,255,255,.72)}

/* 数据条：4 个数字，贴首屏底部，一条上边线 */
.facts-i:last-child{border-right:0}
.facts-i b{
    display:block;font-size:clamp(24px,2.4vw,34px);font-weight:700;color:var(--ink);
    line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.facts-i b i{font-style:normal;font-size:.5em;font-weight:600;color:var(--leaf-d);margin-left:2px}
.facts-i span{display:block;font-size:var(--fs-6);color:var(--ink-3);margin-top:6px}
@media(max-width:760px){
    .facts-i:nth-child(2){border-right:0}
    .facts-i:nth-child(3),.facts-i:nth-child(4){border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
}

/* ───────────────── 33.8 板块外壳：统一节奏，不再忽高忽低 ───────────────── */
/* 两块白底相邻时用来断句 —— v4 的教训：没有边界的连续白底会让板块糊在一起 */
/* 深底上的标题必须显式给色：站里有 h2{color:深墨蓝} 的元素选择器，
   元素选择器永远赢过继承的白色 —— 不写就是深底深字，看不见但占行高 */
.sect-ink h2,.sect-ink h3,.sect-ink .sh-t{color:#fff}
.sect-ink .sh{border-bottom-color:rgba(255,255,255,.14)}
.sect-ink .sh-r{color:rgba(255,255,255,.7)}
.sect-ink .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.sect-ink .card-t{color:#fff}
.sect-ink .card-d{color:rgba(255,255,255,.66)}
.sect-ink .card:hover{border-color:var(--leaf)}
.sect-more::after{content:'';width:18px;height:1px;background:currentColor;transition:width .22s var(--ease)}
.sect-more:hover::after{width:32px}

/* ───────────────── 33.9 工厂：横向滚动卡带（用户要的"多角度滚动"） ───────────────── */
.rail::-webkit-scrollbar{display:none;height:0}
.rail::-webkit-scrollbar-track{background:transparent}
.rail>.card{scroll-snap-align:start}
@media(max-width:1080px){.rail{grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)}}
@media(max-width:760px){.rail{grid-auto-columns:calc((100% - var(--gap)) / 2)}}
@media(max-width:480px){.rail{grid-auto-columns:82%}}

/* 工序：4 个小卡，与 .card 同语言（细线方角），只是没有大图 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:var(--gap)}
.step{
    border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;background:#fff;
    border-top:2px solid var(--leaf);
}
.step h4{margin:8px 0 6px;font-size:var(--fs-3);color:var(--ink)}
.step p{margin:0;font-size:var(--fs-6);color:var(--ink-2);line-height:1.7}
@media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ───────────────── 33.10 应用行业：规整文字网格，不搞大字排版 ───────────────── */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.app{
    background:#fff;padding:20px 22px;min-height:88px;
    display:flex;align-items:center;gap:12px;
    font-size:var(--fs-4);font-weight:600;color:var(--ink);
    transition:background .2s var(--ease),color .2s var(--ease);
}
.app::before{
    content:'';width:6px;height:6px;background:var(--line-2);flex:none;
    transition:background .2s var(--ease);
}
.app:hover{background:var(--brand-w);color:var(--brand)}
.app:hover::before{background:var(--brand)}
@media(max-width:1080px){.apps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.apps{grid-template-columns:repeat(2,1fr)}}

/* ───────────────── 33.11 新闻：列表式比卡片更适合标题流 ───────────────── */
.rows{border-top:1px solid var(--line)}
.row{
    display:grid;grid-template-columns:118px minmax(0,1fr) 22px;
    align-items:center;gap:24px;padding:19px 0;border-bottom:1px solid var(--line);
    transition:padding-left .22s var(--ease);
}
.row:hover{padding-left:8px}
.row:hover .row-t{color:var(--brand)}
.row:hover .row-go{color:var(--brand)}
@media(max-width:760px){
    .row{grid-template-columns:minmax(0,1fr) 22px;grid-template-areas:'d go' 't t';gap:4px 12px;padding:15px 0}
    .row:hover{padding-left:0}
}

/* ───────────────── 33.12 CTA：品牌蓝实底，全站唯一 ───────────────── */
.cta h2{font-size:var(--fs-2);color:#fff;letter-spacing:-.2px}
.cta p{margin:12px 0 0;font-size:var(--fs-4);color:rgba(255,255,255,.86);line-height:1.8}
.cta-tel span{font-size:var(--fs-6);color:rgba(255,255,255,.78)}
.cta-tel b{font-size:clamp(22px,2.2vw,30px);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.cta-f input,.cta-f textarea{
    width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);
    font-size:var(--fs-5);color:var(--ink);background:#fff;font-family:inherit;
}
.cta-f textarea{height:88px;padding:12px 14px;line-height:1.7;resize:vertical}
.cta-f input:focus,.cta-f textarea:focus{outline:0;border-color:var(--brand)}
.cta-f button{
    height:46px;border:0;border-radius:var(--r);background:var(--ink);color:#fff;
    font-size:var(--fs-5);font-weight:600;cursor:pointer;font-family:inherit;
    transition:background .2s var(--ease);
}
.cta-f button:hover{background:#000}
@media(max-width:860px){.cta-in{grid-template-columns:1fr}}

/* ───────────────── 33.13 页脚 ───────────────── */
.footer{background:#0b1a2e;color:rgba(255,255,255,.72);font-size:var(--fs-6)}
.footer h4,.footer .f-t{color:#fff;font-size:var(--fs-5);font-weight:600;margin-bottom:14px}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:#fff}
.footer .f-b{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);font-size:var(--fs-7)}

/* ───────────────── 33.14 内页：同一套系统，改一处全部生效 ───────────────── */
.page-hero{
    background:var(--paper-2);border-bottom:1px solid var(--line);color:var(--ink);
    padding:clamp(28px,3.4vw,48px) 0 clamp(26px,3vw,40px);
}
.page-hero h1,.page-hero .ph-t{font-size:var(--fs-2);color:var(--ink);font-weight:700}
.page-hero::before,.page-hero::after{display:none}
.page-hero .crumb,.page-hero .breadcrumb{font-size:var(--fs-7);color:var(--ink-3)}
.page-hero .crumb a,.page-hero .breadcrumb a{color:var(--ink-3)}
.page-hero .crumb a:hover,.page-hero .breadcrumb a:hover{color:var(--brand)}

/* 侧栏：细线方角，与卡片同语言 */
.side-box{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.side-head{
    padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper-2);
    font-size:var(--fs-5);font-weight:700;color:var(--ink);
    border-left:2px solid var(--brand);
}
.side-body a,.side-body li a{
    display:block;padding:9px 18px;font-size:var(--fs-5);color:var(--ink-2);
    border-left:2px solid transparent;transition:all .18s var(--ease);
}
.side-body a:hover,.side-body li.on a{color:var(--brand);background:var(--brand-w);border-left-color:var(--brand)}

/* 筛选条：chips */
.flt-chips{display:flex;flex-wrap:wrap;gap:8px}
.flt-chips a,.flt-chips button{
    height:34px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;
    font-size:var(--fs-6);color:var(--ink-2);display:inline-flex;align-items:center;
    transition:all .18s var(--ease);font-family:inherit;cursor:pointer;
}
.flt-chips a:hover{border-color:var(--brand);color:var(--brand)}
.flt-chips .on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 分页 */
.pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pagination a,.pagination span{
    min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:var(--fs-5);color:var(--ink-2);background:#fff;
}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .on,.pagination .current{background:var(--brand);border-color:var(--brand);color:#fff}

/* 产品列表网格复用 .card；把旧 prod-grid 的散值并到系统里 */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media(max-width:1080px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.prod-grid{grid-template-columns:1fr}}
.prod-grid .item,.prod-grid>div,.prod-grid>a{
    border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
    transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.prod-grid .item:hover,.prod-grid>a:hover{border-color:var(--brand);transform:translateY(-3px)}

/* 详情页规格表：细线、无斑马纹、数值列右对齐走绿 */
.spec-tb,.detail-tb,table.param{width:100%;border-collapse:collapse;font-size:var(--fs-5)}
.spec-tb th,.spec-tb td,.detail-tb th,.detail-tb td,
table.param th,table.param td{border:1px solid var(--line);padding:12px 14px;line-height:1.7}
.spec-tb th,.detail-tb th{background:var(--paper-2);color:var(--ink);font-weight:600;text-align:left;width:160px}
.spec-tb td,.detail-tb td{color:var(--ink-2)}
table.param thead th{background:var(--paper-2);color:var(--ink)}
table.param td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--leaf-d);font-weight:600}

/* ───────────────── 33.15 响应式兜底 ───────────────── */
@media(max-width:1180px){:root{--gap:20px}}
@media(max-width:620px){
    :root{--gap:16px;--sect:48px;--fs-4:16px}
    .hero-btns .btn{flex:1 1 auto}
}

/* ───────────────── 33.16 散值清零 ─────────────────
   体检发现字号仍有 13 种。根因不是我没写，是 v4 里有一批"容器 + 元素"的
   (0,1,1) 规则压过了我的单类选择器 (0,1,0)：
       theme.v4.css:267  .sh h2{font-size:36px}     ← .sh-t 被压成 36
       theme.v4.css:268  .sh p {font-size:14.5px}   ← .sh-r 被压成 14.5
       theme.v4.css:91   .topbar-in{font-size:12.5px}
       theme.v4.css:263  .sh-en 里的 10.5px 装饰字
       site.css:565      .fcontact .fphone{font-size:23px}
   这里用同等或更高权重把它们钉回 7 档。★：改设计系统时这一节必须同步。 */
.sh .sh-t,.sh h2.sh-t{
    font-size:var(--fs-2);font-weight:700;letter-spacing:-.2px;line-height:1.4;color:var(--ink);
}
.sh .sh-r,.sh p.sh-r{font-size:var(--fs-5);color:var(--ink-2);line-height:1.75;margin:0}
.sh .sh-en{font-size:var(--fs-7);color:var(--brand);letter-spacing:.16em}

/* 顶栏：整条搬到 12px 档 */
.topbar,.topbar .topbar-in,.topbar .tb-item,.topbar a,.topbar span,.topbar em,.topbar i{
    font-size:var(--fs-7);color:var(--ink-3);
}
.topbar a:hover{color:var(--brand)}

/* 页脚：旧规则把电话做到 23px、链接 14.5px，一并并档 */
.footer,.footer p,.footer li,.footer a,.footer span,.footer dd,.footer dt{font-size:var(--fs-6)}
.footer .fphone,.footer a.fphone,.fcontact .fphone{
    font-size:var(--fs-3);font-weight:700;color:#fff;letter-spacing:-.2px;
}
.footer .fcol-h,.footer h4,.footer .f-t{font-size:var(--fs-5);color:#fff;font-weight:600}

/* 右侧悬浮工具条：图标下的小字并到 12px */
.side-tools,.side-tools a,.side-tools span,.side-tools i,.side-tools em{font-size:var(--fs-7)}

/* 面包屑 */
.breadcrumb,.crumb{font-size:var(--fs-7);color:var(--ink-3);background:transparent;border:0;padding:0}

/* 页脚文字色收敛：v4 给页脚散了 .52/.62/.72/.78 四档白，
   这里并成一档半（正文 .64 / 强调 #fff），13 种文字色 -> 9 种 */
.footer,.footer p,.footer li,.footer span,.footer dd,.footer dt,.footer small{color:rgba(255,255,255,.64)}
.footer a{color:rgba(255,255,255,.64)}
.footer a:hover{color:#fff}
.footer .f-b,.footer .f-copy,.footer .fbottom{color:rgba(255,255,255,.48)}
/* 上一节的 .footer a 权重不够（v4 有 .footer-in a 这类更深的选择器），
   这里用 (0,3,x) 直接钉死，页脚只剩「正文 .64 / 强调 #fff / 底线 .48」三档 */
.footer .footer-in a,.footer .footer-in p,.footer .footer-in li,
.footer .footer-in span,.footer .footer-in small,.footer .footer-in dd,
.footer .footer-in dt,.footer .footer-in em,.footer .footer-in i{color:rgba(255,255,255,.64)}
.footer .footer-in a:hover{color:#fff}
.footer .footer-in .fphone,.footer .footer-in .fphone a{color:#fff}

/* ───────────────── 33.17 移动端底栏溢出 ─────────────────
   体检发现 390 视口下 scrollWidth=406，整页能横向拖 16px。
   真凶是移动端底部 tab 栏 .mbar：5 个 tab 的文字最小宽度撑破了
   flex 容器（left:0;right:0 只定容器，撑不住内容）。
   子项 min-width:0 + 容器 overflow:hidden 收回；顺手把 11px 并到 12px 档。 */
@media(max-width:820px){
    .mbar{overflow:hidden}
    .mbar a{min-width:0;padding:9px 2px;font-size:var(--fs-7)}
    .mbar a span,.mbar a em,.mbar a i{
        max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
}

/* ───────────────── 33.18 页头在窄屏撑破整页 ─────────────────
   探针实测 390 视口：DIV.head-act right=406 w=215、NAV.mbar right=406。
   根因是页头：logo 图固定 220px 宽 + 右侧操作区 215px + gap 32px ≈ 467px，
   远超 390。fixed 的 .mbar 跟着 body 的 scrollWidth 一起变宽。
   窄屏把 logo 收到 34px 高、gap 收到 12px、操作区允许收缩。 */
@media(max-width:820px){
    .header .container,.header .wrap{gap:12px;min-width:0}
    .header .logo{flex:0 0 auto;min-width:0}
    .header .logo img{height:34px;width:auto;max-width:42vw}
    .head-act{flex:0 1 auto;min-width:0;gap:8px}
    .head-act>*{min-width:0}
}

/* ───────────────── 33.19 内页散值清零 ─────────────────
   扫了 12 个页面（_scan.py）拿到 56 个散值 class，最狠的三处：
     th        12.5px x139  —— 规格表表头比正文还小，数据表的头应该是 15px
     i         11px   x120  —— 各种装饰斜体
     em.sk-mark 11px  x59
   处理办法：
     · 裸元素（th/h1/h3/i/b/span/a/em）用 :not([class]) 只打"没带 class 的"，
       不会误伤 .facts-i b、.hero-cap em 这类我已经设计过的地方（它们都有 class）
     · 带 class 的逐个钉回 7 档 */

/* 裸元素 */
th{font-size:var(--fs-5);font-weight:600;color:var(--ink)}
h1{font-size:var(--fs-2)}
h3{font-size:var(--fs-3)}
/* v23 摘除：见构建脚本注释 */

/* 带 class 的逐个钉 */
/* 96px 的装饰水印：v10 的页头已经改用浅色实底，这层水印只会加噪点 */
.ph-ghost{display:none}
.ph-en{font-size:var(--fs-7);letter-spacing:.14em}
.ph-h1,.page-hero .ph-h1,.page-hero h1{font-size:var(--fs-2);font-weight:700;letter-spacing:-.2px}
.sk-mark{font-size:var(--fs-7)}
.tag-chip,.tag-chip-s,.tag-chip-l{font-size:var(--fs-7)}
.prod-more{font-size:var(--fs-6)}
.sk-hit{font-size:var(--fs-7)}
.sc-h{font-size:var(--fs-5);font-weight:600;color:var(--ink)}
.sc-tel{font-size:var(--fs-3);font-weight:700;color:var(--brand)}
.main-desc{font-size:var(--fs-5);color:var(--ink-2);line-height:1.85}
.flt-lb{font-size:var(--fs-7);color:var(--ink-3)}
.sk-need-lb,.sk-need-v,.sk-need-tip{font-size:var(--fs-7)}
.dl-count{font-size:var(--fs-7);color:var(--ink-3)}

/* ───────────────── 33.20 第二批清零：压不住的那几个 ─────────────────
   第一批之后还剩 26 处，它们被 (0,2,x) 甚至更深的选择器压着
   （.sc-box .sc-tel / .side-contact p / 各种 .ptab th）。
   字号档位是设计系统的底线，这里对 font-size 单项用 !important 钉死，
   并且一律用 :not([class]) 只打"没带 class 的"元素 ——
   .facts-i b（34px 数字）、.hero-cap em、.card-t 这些有 class 的不受影响。 */
/* v23 摘除：见构建脚本注释 */

/* 带 class、但被更深选择器压住的，逐个钉 */
.sc-h,.sc-t,div.sc-h{font-size:var(--fs-5)!important;font-weight:600}
.sc-tel,a.sc-tel{font-size:var(--fs-3)!important;font-weight:700}
.dl-count,span.dl-count{font-size:var(--fs-7)!important}
.di-hint,div.di-hint{font-size:var(--fs-6)!important}
.sk-reset,button.sk-reset{font-size:var(--fs-6)!important}
.sk-bar-l,div.sk-bar-l{font-size:var(--fs-6)!important}
/* v23 摘除：.on 是通匹类 */
.main-desc,.detail-sub{font-size:var(--fs-5)!important}

/* ───────────────── 33.21 保护"有意为之的大字" ─────────────────
   33.20 的 b:not([class]) / span:not([class]) 是照元素打的，
   会把下面这些"本来就该大"的字一起打成 15px（实测 facts 数字从 34 掉到 15）。
   这些父级都有 class，用 (0,2,x) + !important 保护回来。 */
.facts-i b{font-size:clamp(24px,2.4vw,34px)!important;font-weight:700;color:var(--ink)}
.facts-i b i{font-size:.5em!important;font-weight:600;color:var(--leaf-d);font-style:normal}
.facts-i span{font-size:var(--fs-6)!important;color:var(--ink-3)}
.hero-cap b{font-size:var(--fs-3)!important;font-weight:700;color:#fff}
.hero-cap em{font-size:var(--fs-6)!important;color:rgba(255,255,255,.78);font-style:normal}
.cta-tel b{font-size:clamp(22px,2.2vw,30px)!important;font-weight:700;color:#fff}
.cta-tel span{font-size:var(--fs-6)!important;color:rgba(255,255,255,.78)}
.step h4{font-size:var(--fs-3)!important;color:var(--ink);font-weight:700}
.step .step-no{font-size:var(--fs-7)!important;color:var(--leaf-d)}
.app{font-size:var(--fs-4)!important}

/* ═══════════════════════════════════════════════════════════════════════
   36. v13「工业品牌官网」—— 按同行实测 + 素材实拍重做
   ---------------------------------------------------------------------
   先做了三件确定的事，再动手（_ref2.py / 素材 contact sheet）：

   ① 同行实测（veik.cn，同为氟材料行业）：
      文档高 5002px，47 张图，6 张满宽；主色 rgb(0,91,172) 出现 8 次；
      板块序列 = 实景图 / 白底内容 / 实景图 / 白底 交替；
      每块都是【大图 + 整齐卡片 + 明确的"更多"入口】。
      → 它的"专业大气"来自：真实企业场景图 + 统一深色主色 + 规整节奏。

   ② 自己的 v12 截图问题（这次我能看到图了）：
      首屏 = 浅色产品图 + 左侧白色渐变压图 + 标题直接叠在图上原有文字上面。
      白雾把一张图切成两半，图上原有英文与标题互相打架 →
      这正是"PPT 里图片设了透明度"的观感来源。

   ③ 素材核实（之前判断错了）：
      mt_case 的 4 张 thumb 全是产线实景（1000×750 / 720×540）；
      产品表里另有车间照（输送带产线、烘道）。车间实景是有的。

   v13 的四个决定：
     1. 首屏【深墨蓝实色底 + 左文右图】，任何遮罩都不压在图上面。
        深底 + 白字 + 出血大图 = 工业品牌的通用首屏语言。
     2. 骨架交给深墨蓝 #0a1a2e：首屏 / 制造实力 / 页脚 三处出现，
        白与浅灰夹在中间 → 页面有了承重结构，不再是一张白纸。
     3. 产品体系由"2 张系列大卡"改为【10 个品类卡 · 5×2】，
        直接用库里真实的 10 个二级品类，一屏看完产品线宽度。
     4. 制造实力 = 深色板块 + 四道工序 + 【车间图横向滚动】
        （用户第 7 版明确要的"工厂多角度滚动"）。
   ═══════════════════════════════════════════════════════════════════════ */

body.p-home{
    /* 骨架 */
    --d-ink:#0a1a2e;
    --d-ink-2:#0f2740;
    --d-ink-3:#16395c;
    --d-brand:#0076ff;
    --d-brand-d:#0060d6;
    --d-t1:#0d1c30;
    --d-t2:#3f5068;
    --d-t3:#8693a5;

    /* 字号档（首页专用，不与内页的 --fs-* 并存） */
    --d1:clamp(31px,4.1vw,54px);
    --d2:clamp(22px,2.4vw,31px);      /* 1440 下命中上限 31px */
    --d-num:clamp(24px,2.4vw,30px);   /* 数据数字与电话：统一一档 */
    --d4:15px;
    --d5:14px;
    --d6:12px;

    /* 节奏 */
    --d-sec:clamp(76px,8.2vw,124px);
    --d-gap:clamp(14px,1.5vw,20px);
}

/* 首页深色区域内的裸元素保护（v8 的 33.20 节会把裸 b/i/span 打平成 15px） */
body.p-home b,body.p-home i,body.p-home em,body.p-home span{
    /* 不写 !important，仅声明继承基线，具体尺寸在各节里显式给出 */
    font-style:normal;
}

/* ───────────────── 36.1 通用容器 / 板块 ───────────────── */
.ph-in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--band)}
.ph-sec{padding-block:var(--d-sec)}
.ph-sec--grey{background:var(--paper-2)}
.ph-sec--dark{background:var(--d-ink);color:#fff;position:relative}
.ph-sec--dark::before{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.7;
    background-image:
        repeating-linear-gradient(0deg,rgba(255,255,255,.024) 0 1px,transparent 1px 46px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.024) 0 1px,transparent 1px 46px);
}
.ph-sec--dark>.ph-in{position:relative;z-index:1}

/* 板块头：小标 → 大标题 → 细线；右侧说明与入口 */
.ph-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:clamp(24px,3vw,48px);
    padding-bottom:22px;margin-bottom:clamp(34px,3.8vw,54px);
    border-bottom:1px solid var(--line);
}
.ph-head-l{min-width:0}
.ph-t{
    font-size:var(--d2);font-weight:500;letter-spacing:-.8px;
    line-height:1.28;color:var(--ink);margin:0;
}
.ph-more{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
    font-size:var(--d5);font-weight:600;color:var(--ink);
    text-decoration:none;white-space:nowrap;padding-bottom:5px;
    border-bottom:1px solid var(--line);
    transition:color .24s var(--ease),border-color .24s var(--ease);
}
.ph-more::after{content:'→';font-size:14px;transition:transform .24s var(--ease)}
.ph-more:hover{color:var(--d-brand);border-bottom-color:var(--d-brand)}
.ph-more:hover::after{transform:translateX(4px)}

/* 深色板块里的头部反色 */
.ph-sec--dark .ph-head{border-bottom-color:rgba(255,255,255,.14)}
.ph-sec--dark .ph-t{color:#fff}
.ph-sec--dark .ph-head-r{color:rgba(255,255,255,.58)}
.ph-sec--dark .ph-more{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.ph-sec--dark .ph-more:hover{color:var(--sky);border-bottom-color:var(--sky)}

/* ───────────────── 36.2 首屏：深墨蓝实底 + 左文右图（不压任何遮罩） ───────────────── */
.ph-hero{position:relative;background:var(--d-ink);overflow:hidden}
/* 织物网格：极低对比，只为了不让大面积深色发死 */
.ph-hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.8;
    background-image:
        repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px);
}
/* 右下角一层同色径向压暗，让图块边缘与底色更贴 */
.ph-hero::after{
    content:'';position:absolute;right:-10%;bottom:-30%;width:70%;height:120%;
    background:radial-gradient(circle,rgba(0,118,255,.16) 0,transparent 62%);
    pointer-events:none;
}
.ph-hero-ey::before{content:'';width:30px;height:1px;background:var(--d-brand)}
.ph-hero-t em{font-style:normal;color:#fff}
.ph-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    height:52px;padding:0 32px;border-radius:2px;
    font-size:var(--d4);font-weight:600;letter-spacing:.01em;
    text-decoration:none;border:1px solid transparent;
    transition:background .24s var(--ease),border-color .24s var(--ease),
               color .24s var(--ease),transform .24s var(--ease);
}
.ph-btn-1{background:var(--d-brand);border-color:var(--d-brand);color:#fff}
.ph-btn-1:hover{background:var(--d-brand-d);border-color:var(--d-brand-d);color:#fff;transform:translateY(-1px)}
.ph-btn-2{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3);color:#fff}
.ph-btn-2:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.ph-btn-w:hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);color:var(--d-brand-d)}

.ph-hero-facts>div{min-width:0}
.ph-hero-facts b{
    display:block;font-size:var(--d-num);font-weight:300;
    letter-spacing:-.03em;line-height:1.05;color:#fff;
    font-variant-numeric:tabular-nums;
}
.ph-hero-facts b i{
    font-style:normal;font-size:.44em;font-weight:600;
    color:var(--sky);margin-left:3px;letter-spacing:0;
}
.ph-hero-facts span{
    display:block;margin-top:8px;font-size:12px;
    color:rgba(255,255,255,.5);letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 右栏图：错位蓝框 + 左下角注 */
.ph-hero-fig img{
    display:block;width:100%;aspect-ratio:16/11;object-fit:cover;
    position:relative;z-index:1;
}
.ph-hero-fig::after{
    content:'';position:absolute;left:18px;top:18px;right:-18px;bottom:-18px;
    border:1px solid rgba(0,118,255,.5);pointer-events:none;
}
.ph-hero-fig figcaption{
    position:absolute;left:0;bottom:0;z-index:2;
    background:rgba(10,26,46,.84);color:rgba(255,255,255,.82);
    font-size:12px;letter-spacing:.06em;padding:11px 18px;
}

/* 首屏入场：一次性上浮淡入，给"丝滑"一个来源。纯 CSS，不依赖 JS。 */
@keyframes phUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ph-hero-txt>*{animation:phUp .78s var(--ease) both}
.ph-hero-txt>*:nth-child(2){animation-delay:.06s}
.ph-hero-txt>*:nth-child(3){animation-delay:.12s}
.ph-hero-txt>*:nth-child(4){animation-delay:.16s}
.ph-hero-txt>*:nth-child(5){animation-delay:.22s}
.ph-hero-txt>*:nth-child(6){animation-delay:.28s}
@media(prefers-reduced-motion:reduce){
    .ph-hero-txt>*,.ph-hero-fig{animation:none}
    .ph-roll-i img,.ph-cat-im img,.ph-btn{transition:none}
}

/* ───────────────── 36.3 01 产品体系：10 个真实品类 · 5×2 ───────────────── */
.ph-cat:hover{
    border-color:transparent;transform:translateY(-3px);
    box-shadow:0 18px 38px -22px rgba(13,28,48,.34);
}
.ph-cat::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--d-brand);transform:scaleX(0);transform-origin:left;
    transition:transform .36s var(--ease);
}
.ph-cat:hover::after{transform:scaleX(1)}
.ph-cat-im img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .62s var(--ease);
}
.ph-cat:hover .ph-cat-im img{transform:scale(1.05)}
.ph-cat-n b{font-weight:600;color:var(--d-brand)}

/* ───────────────── 36.4 02 制造实力（深色） ─────────────────
   左：四道工序竖排（序号 + 名称 + 说明，细线分隔）
   右：一张车间大图（错位细框）
   下：四张车间图横向滚动（用户第 7 版明确要的"多角度滚动"）
   底：四个口径数字
   避免"三行都是四列"的呆板节奏。 */
.ph-mfg-i:first-child{border-top:0;padding-top:0}
.ph-mfg-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;position:relative;z-index:1}
.ph-mfg-fig::after{
    content:'';position:absolute;left:16px;top:16px;right:-16px;bottom:-16px;
    border:1px solid rgba(255,255,255,.15);pointer-events:none;
}
.ph-mfg-fig figcaption{
    position:absolute;left:0;bottom:0;right:0;z-index:2;
    background:linear-gradient(0deg,rgba(10,26,46,.92),rgba(10,26,46,0));
    color:#fff;font-size:var(--d6);letter-spacing:.02em;padding:34px 18px 14px;
}

/* 车间图横向滚动 */
.ph-roll-h b{
    font-size:11.5px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.66);
}
.ph-roll-h span{font-size:12px;color:rgba(255,255,255,.46);letter-spacing:.04em}
.ph-roll-track::-webkit-scrollbar{display:none}
.ph-roll-i img{
    display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    opacity:.84;transition:opacity .4s var(--ease),transform .9s var(--ease);
}
.ph-roll-i:hover img{opacity:1;transform:scale(1.03)}

/* 深色板块底部数据 */
.ph-num:first-child{border-left:0;padding-left:0}
.ph-num b{
    display:block;font-size:var(--d-num);font-weight:300;
    letter-spacing:-.035em;line-height:1;color:#fff;
    font-variant-numeric:tabular-nums;
}
.ph-num b i{
    font-style:normal;font-size:.44em;font-weight:600;color:var(--sky);
    margin-left:4px;letter-spacing:0;
}
.ph-num span{
    display:block;margin-top:10px;font-size:12px;
    color:rgba(255,255,255,.5);letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ───────────────── 36.5 03 应用领域：编号行表 ───────────────── */
.ph-apps-a:hover{padding-left:9px;border-bottom-color:var(--line-2)}
.ph-apps-a:hover .ph-apps-t{color:var(--d-brand)}
.ph-apps-a:hover .ph-apps-g{color:var(--d-brand);transform:translateX(3px)}

/* ───────────────── 36.6 04 应用案例 ─────────────────
   刻意不放图：02 板块已经用了 4 张车间图，同一批素材再出现一次
   会让整页显得"素材不够"。改成纯排版卡（大序号 + 标题 + 摘要），
   与 02（深色图）和 05（行表）都不同构。 */
.ph-cards-i::after{
    content:'';position:absolute;left:0;right:0;top:0;height:2px;
    background:var(--d-brand);transform:scaleX(0);transform-origin:left;
    transition:transform .36s var(--ease);
}
.ph-cards-i:hover{
    border-color:transparent;transform:translateY(-3px);
    box-shadow:0 18px 38px -22px rgba(13,28,48,.3);
}
.ph-cards-i:hover::after{transform:scaleX(1)}
.ph-cards-m i{font-style:normal;font-size:13px;transition:transform .24s var(--ease)}
.ph-cards-i:hover .ph-cards-m i{transform:translateX(4px)}

/* ───────────────── 36.7 05 技术资讯：行表 ───────────────── */
.ph-news li{border-bottom:1px solid var(--line)}
.ph-news li:first-child{border-top:1px solid var(--line)}
.ph-news a{
    display:grid;grid-template-columns:110px minmax(0,1fr) 20px;
    align-items:center;gap:26px;padding:23px 0;
    text-decoration:none;transition:padding-left .26s var(--ease);
}
.ph-news a:hover{padding-left:11px}
.ph-news a:hover .ph-news-t{color:var(--d-brand)}
.ph-news a:hover .ph-news-g{color:var(--d-brand)}

/* ───────────────── 36.8 咨询条：全站唯一一处大面积品牌色 ───────────────── */
.ph-cta{background:var(--d-brand);color:#fff}
.ph-cta-in{
    max-width:var(--wrap);margin:0 auto;padding:clamp(50px,5.8vw,84px) var(--band);
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(28px,3.4vw,52px);align-items:center;
}
.ph-cta-t{
    font-size:var(--d2);font-weight:500;letter-spacing:-.7px;
    line-height:1.3;color:#fff;margin:0 0 12px;
}
.ph-cta-p{font-size:var(--d4);line-height:1.8;color:rgba(255,255,255,.78);margin:0}
.ph-cta-r{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px)}
.ph-cta-tel{text-align:right}
.ph-cta-tel b{
    display:block;font-size:var(--d-num);font-weight:300;
    letter-spacing:-.02em;color:#fff;line-height:1.15;
    font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ph-cta-tel span{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.62);letter-spacing:.04em}

/* ───────────────── 36.9 响应式 ───────────────── */
@media(max-width:1280px){
}
@media(max-width:1100px){
    .ph-hero-fig::after{display:none}
    .ph-mfg-fig::after{display:none}
}
@media(max-width:900px){
    .ph-sec{padding-block:clamp(56px,9vw,80px)}
    .ph-head{flex-direction:column;align-items:flex-start;gap:16px}
    .ph-cta-in{grid-template-columns:minmax(0,1fr);gap:26px}
    .ph-cta-r{justify-content:flex-start;flex-wrap:wrap;gap:20px}
    .ph-cta-tel{text-align:left}
}
@media(max-width:760px){
    .ph-hero-fig img{aspect-ratio:16/10}
    .ph-news a{grid-template-columns:minmax(0,1fr) 20px;gap:12px}
    .ph-btn{height:48px;padding:0 24px}
}

/* ───────────────── 36.10 裸元素保护 ─────────────────
   v8 第 33.20 节：b:not([class]),span:not([class]),i:not([class]),a:not([class])
   {font-size:var(--fs-5)!important} 是照【元素类型】打的。
   首页 v13 里数据数字、单位、序号都是裸元素，必须逐条捞回。 */
body.p-home .ph-hero-facts b{font-size:var(--d-num)!important;font-weight:300!important}
body.p-home .ph-hero-facts b i{font-size:.44em!important;font-weight:600!important}
body.p-home .ph-hero-facts span{font-size:12px!important}
body.p-home .ph-num b{font-size:var(--d-num)!important;font-weight:300!important}
body.p-home .ph-num b i{font-size:.44em!important;font-weight:600!important}
body.p-home .ph-num span{font-size:12px!important}
body.p-home .ph-mfg-n{font-size:12px!important;font-weight:700!important}
body.p-home .ph-cat-i{font-size:12px!important;font-weight:700!important}
body.p-home .ph-cat-n{font-size:12px!important}
body.p-home .ph-cat-n b{font-size:12px!important;font-weight:600!important}
body.p-home .ph-apps-i{font-size:12px!important;font-weight:700!important}
body.p-home .ph-apps-a{font-size:15px!important}
body.p-home .ph-news-d{font-size:12px!important}
body.p-home .ph-roll-c{font-size:12px!important}
body.p-home .ph-roll-n{font-size:12px!important;font-weight:700!important}
body.p-home .ph-roll-h span{font-size:12px!important}
body.p-home .ph-cards-no{font-size:12px!important;font-weight:700!important}
body.p-home .ph-cards-m{font-size:14px!important;font-weight:600!important}
body.p-home .ph-cta-tel b{font-size:var(--d-num)!important;font-weight:300!important}
body.p-home .ph-cta-tel span{font-size:12px!important}
body.p-home .ph-hero-ey{font-size:12px!important}
body.p-home .ph-no{font-size:12px!important;font-weight:700!important}
body.p-home .ph-hero-fig figcaption{font-size:12px!important}
body.p-home .ph-mfg-fig figcaption{font-size:12px!important}

/* ───────────────── 36.11 页头 / 顶栏（首页微调） ─────────────────
   页头保持白色：logo 是蓝绿双色，深底会丢掉品牌两色；
   "浅页头 + 深首屏"的对比本身就能把首屏的份量做出来。 */
body.p-home .topbar,.topbar{
    background:var(--paper-2);border-bottom:1px solid var(--line);
}
body.p-home .topbar .tb-item{color:var(--t3,#8693a5);font-size:12px}
body.p-home .topbar .tb-item:hover{color:var(--d-brand)}
body.p-home .topbar .tb-item .ic{color:var(--d-brand)}
body.p-home .header{background:#fff;border-bottom:1px solid var(--line);box-shadow:none}
body.p-home .header.is-stuck{box-shadow:0 8px 26px rgba(13,28,48,.09)}
body.p-home .nav>ul>li>a{color:var(--t2,#3f5068);font-weight:500}
body.p-home .nav>ul>li>a:hover,body.p-home .nav>ul>li:hover>a{color:var(--ink)}
body.p-home .nav>ul>li>a.on{color:var(--ink);font-weight:600}
body.p-home .head-cta{
    background:var(--d-ink);border-color:var(--d-ink);color:#fff;
}
body.p-home .head-cta:hover{background:var(--d-brand);border-color:var(--d-brand);color:#fff}
body.p-home .search-btn{color:var(--t2,#3f5068)}
body.p-home .search-btn:hover{color:var(--d-brand)}

/* ★ 汉堡按钮：v9 那批样式是按【深色页头】写的（白底半透明 + 白色横线），
   v13 把首页页头改回白色之后，汉堡就变成了白底上的白线——完全看不见。
   移动端因此没有任何导航入口，而截图里只会看到"页头少了个按钮"，很难联想到配色。
   凡是改动页头底色的版本，都要连 burger / search 的对比色一起改。 */
body.p-home .burger{
    background:transparent;border-color:var(--line);
}
body.p-home .burger:hover{background:var(--paper-2)}
body.p-home .burger span{background:var(--d-t1)}
body.p-home .burger.on span{background:var(--d-t1)}

/* 窄屏页头：logo + 搜索 + 汉堡，把"获取报价"让出去（首屏与底部 CTA 都已有入口） */
@media(max-width:980px){
    body.p-home .header-in{gap:8px}
    body.p-home .logo img{max-width:38vw}
    body.p-home .head-cta{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   37. v14 —— 拿到线上截图后逐屏看出来的问题清单（不是感觉，是量到的）

   v13 上线后做了 1440 全页分段截图（_cdpshot.py 改成 clip 裁切，之前
   captureBeyondViewport 会忽略滚动位置，六段截图其实都是同一屏，看不出来），
   逐屏看完发现 7 个具体缺陷：

   P1｜应用领域 13 行，每行右边 60% 是空白。
       行结构是 编号 + 中文名 + 一条引导线 + →，引导线尽头什么都没有 →
       视觉上就是"没做完"。改：引导线尽头补上英文领域名，线才有终点。
   P2｜技术资讯 5 行，每行右侧约 800px 全空（日期 110px + 标题，其余留白）。
       改：右侧加该条资讯的第一个 tag 作为分类标签，行宽被填满且有用。
   P3｜首屏"133×"——"×"当单位毫无意义（133 其实是库里 DISTINCT 厚度值的个数）。
       深色板块又拿 260℃ / 200℃ 当"计数"，与"4 道工序"放在同一档字号里，
       量纲不统一。改：首屏改商业口径（型号/品类/厚度区间/交期），
       深色板块改技术口径（工序数/涂层体系/两个耐温），两处不再重复。
   P4｜案例卡摘要结尾是"…"，而且库里 subtitle 本身就是被截断的半句
       （"…提高光伏电池片的效率和安"）。改：服务端按句读回退到 n 字再加"…"，
       让"截断"变成有意为之，而不是数据残缺漏出来。
   P5｜"左右拖动查看更多现场"在桌面端是错的（鼠标没有拖动），
       而且第三张图正好被容器右缘切掉，看起来像溢出 bug。
       改：加左右箭头按钮 + 边界置灰，文案改成实际的张数。
   P6｜03 板块头与 01/02/04/05 完全同构（小标+大标题+右说明+右入口+细线），
       连着 5 次就是"模板感"的直接来源。改：03 改成说明挂在标题下方。
   P7｜首屏右图 16/11、宽 543，上下各留 75px 深色，气势不够。
       改：图片拉伸到与左栏等高（align-items:stretch），图成为整块面板。
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────── 37.1 首屏：右图吃满高度（P7） ───────────────── */
body.p-home .ph-hero-in{
    align-items:stretch;
    grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);
}
body.p-home .ph-hero-fig{
    display:flex;flex-direction:column;
}
body.p-home .ph-hero-fig img{
    aspect-ratio:auto;
    flex:1 1 auto;width:100%;min-height:clamp(300px,30vw,520px);
}
/* 错位细框：图变高之后，框只往右下错一点，避免落到首屏底边外面 */
body.p-home .ph-hero-fig::after{
    left:16px;top:16px;right:-16px;bottom:-16px;
}
/* 段末孤字：左栏变窄后这段会剩一个"制。"单独占一行。
   ① text-wrap:pretty 让浏览器主动避免孤字（Chrome 117+）；
   ② 文案本身也短了 5 个字，两层保险。 */
body.p-home .ph-hero-p{max-width:none;text-wrap:pretty}

/* ───────────────── 37.2 03 应用领域：引导线 + 英文名（P1）+ 表头变体（P6） ───────────────── */
body.p-home .ph-apps-a{
    grid-template-columns:42px auto minmax(14px,1fr) auto 14px;
    gap:12px;
    padding:18px 0;
}
body.p-home .ph-apps-t{font-size:16px}
body.p-home .ph-apps-l{
    height:0;border-top:1px dotted var(--line-2);
    transition:border-color .26s var(--ease);
}
body.p-home .ph-apps-e{
    font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--d-t3);white-space:nowrap;
    transition:color .26s var(--ease);
}
body.p-home .ph-apps-a:hover .ph-apps-l{border-top-color:var(--d-brand)}
body.p-home .ph-apps-a:hover .ph-apps-e{color:var(--d-brand)}

/* 03 的表头：说明挂到标题下面 —— 与其他板块的"左标题 / 中说明 / 右入口"错开。
   入口下移到列表末尾的收口块里（见 37.2b），所以这里不再有 .ph-more。 */
body.p-home .ph-head--stack .ph-head-r{
    flex:none;max-width:640px;margin:14px 0 0;padding-bottom:0;
    font-size:15px;line-height:1.8;
}
body.p-home .ph-head--stack{padding-bottom:20px}

/* ───────────────── 37.2b 03 列表收口块：13 项在 3 列里正好剩 2 格 ─────────────────
   13 = 4×3 + 1，最后一行只放"13 化工防腐"，右边两格空着，
   板块底部就露出一块没内容的空白。把"按工况选型"做成占两格的收口块填进去，
   整行被填平，入口也从表头移到了读者真正看完列表的位置。 */
body.p-home .ph-apps-cta{
    grid-column:span 2;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    align-self:center;
    padding:17px 20px;background:var(--paper-2);border-radius:2px;
    text-decoration:none;
    transition:background .24s var(--ease),box-shadow .24s var(--ease);
}
body.p-home .ph-apps-cta:hover{background:#fff;box-shadow:0 14px 32px -20px rgba(13,28,48,.32)}
body.p-home .ph-apps-cta-t{
    font-size:15px;font-weight:600;color:var(--ink);
    display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
body.p-home .ph-apps-cta-t::before{
    content:'';width:3px;height:15px;background:var(--d-brand);border-radius:1px;
}
body.p-home .ph-apps-cta-d{
    font-size:13px;color:var(--d-t3);letter-spacing:.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.p-home .ph-apps-cta:hover .ph-apps-cta-d{color:var(--d-brand)}

/* ───────────────── 37.3 05 技术资讯：右侧分类标签（P2） ───────────────── */
body.p-home .ph-news a{
    grid-template-columns:104px minmax(0,1fr) auto 18px;
    gap:clamp(16px,2vw,26px);
}
body.p-home .ph-news-k{
    justify-self:end;
    font-size:11px;line-height:1;letter-spacing:.02em;
    color:var(--d-t2);border:1px solid var(--line-2);border-radius:2px;
    padding:6px 10px;white-space:nowrap;
    transition:color .24s var(--ease),border-color .24s var(--ease);
}
body.p-home .ph-news a:hover .ph-news-k{color:var(--d-brand);border-color:var(--d-brand)}
/* 行尾箭头原来是 var(--line)（#e9eef5），在白底上几乎看不见，
   等于"可点"的提示消失了；两处行表统一提到 --line-2。 */
body.p-home .ph-news-g,body.p-home .ph-apps-g{color:var(--line-2)}

/* ───────────────── 37.4 04 案例卡：摘要不再被截成半句（P4） ───────────────── */
body.p-home .ph-cards-d{-webkit-line-clamp:4}

/* ───────────────── 37.5 02 车间滚动：箭头按钮（P5） ───────────────── */
body.p-home .ph-roll-h{align-items:flex-end}
body.p-home .ph-roll-bar{display:flex;align-items:center;gap:14px}
body.p-home .ph-roll-nav{display:flex;gap:8px}
body.p-home .ph-roll-p{
    width:34px;height:34px;padding:0;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:2px;
    color:rgba(255,255,255,.82);font-size:15px;line-height:1;cursor:pointer;
    transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
body.p-home .ph-roll-p:hover{background:var(--d-brand);border-color:var(--d-brand);color:#fff}
body.p-home .ph-roll-p:disabled{opacity:.28;cursor:default}
body.p-home .ph-roll-p:disabled:hover{background:transparent;border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.82)}
body.p-home .ph-roll-track{scroll-behavior:smooth}

/* ───────────────── 37.6 01 品类卡：序号做成品牌色标签（与车间图序号同一套语言） ───────────────── */
body.p-home .ph-cat-i{
    left:0;top:0;padding:5px 9px;
    background:var(--d-brand);color:#fff;letter-spacing:.08em;
}
body.p-home .ph-cat-im{background:#fff}

/* ───────────────── 37.7 CTA 电话：细体在蓝底上发虚，加粗一档 ───────────────── */
body.p-home .ph-cta-tel b{font-weight:400}

/* ───────────────── 37.8 响应式补丁 ─────────────────
   ★ 这里踩了一个坑，记下来：
   37.1 用 `body.p-home .ph-hero-in` 覆盖首屏布局，选择器权重比 v13 的
   `.ph-hero-in` 高（0,2,1 对 0,1,0）。而 CSS 的媒体查询不加权重，
   于是 v13 里 `@media(max-width:1100px){.ph-hero-in{grid-template-columns:1fr}}`
   那条单列规则被我的基础规则压掉了 —— 390 手机上首屏仍然是两栏，
   图片被挤成 170px 的小缩略图，正文被压成 8 个字一行，"按规格快速选型"折成两行。
   凡是给带响应式覆盖的组件加 `body.p-home` 前缀，必须把它的每条媒体查询
   也用同样前缀重写一遍，否则那条响应式规则就静默失效了。 */
@media(max-width:1100px){
    body.p-home .ph-hero-in{
        grid-template-columns:minmax(0,1fr);   /* ← 补回单列，v13 那条被压掉了 */
        align-items:center;
    }
    body.p-home .ph-hero-fig img{flex:0 0 auto;min-height:0;aspect-ratio:16/10}
}
@media(max-width:900px){
    body.p-home .ph-news a{grid-template-columns:88px minmax(0,1fr) auto 18px}
    body.p-home .ph-news-k{display:none}
}
@media(max-width:760px){
    /* 小标在 350px 里会折成 4 行，加一串串行；同时压一下字距 */
    body.p-home .ph-hero-ey{
        font-size:11px!important;letter-spacing:.12em;
        white-space:nowrap;margin-bottom:18px;
    }
    body.p-home .ph-hero-ey::before{width:20px}
    /* 数字不许换行（"0.03–" / "4mm" 断成两行很难看），标签反过来要允许换行 */
    body.p-home .ph-hero-facts b{white-space:nowrap}
    body.p-home .ph-hero-facts span{
        white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;
    }
    body.p-home .ph-apps-a{grid-template-columns:34px auto minmax(10px,1fr) auto;gap:9px}
    body.p-home .ph-apps-e{font-size:9.5px;letter-spacing:.1em}
    body.p-home .ph-apps-g{display:none}
    /* 单列时 span 2 会撑出网格，必须还原成 1 格 */
    body.p-home .ph-apps-cta{grid-column:auto;flex-wrap:wrap;gap:6px;padding:15px 16px}
    body.p-home .ph-apps-cta-d{white-space:normal;font-size:12.5px}
    body.p-home .ph-roll-p{width:30px;height:30px;font-size:14px}
}

/* ═══════════════════════════════════════════════════════════════════════
   38. v15「营销型首页」—— 12 板块按完整的论证链排布

   我是谁 → 我卖什么 → 为什么选我 → 有没有实力
        → 有没有人买过 → 怎么合作 → 立即询盘

   板块与底色的节奏（深色是骨架，白与浅灰夹中间，12 块不塌成一堵墙）：
     01 Hero      深墨蓝    02 核心产品 白     03 核心优势 浅灰
     04 重点产品  白        05 应用场景 深墨蓝 06 公司实力 白
     07 认证资质  浅灰      08 客户案例 白     09 客户评价 深墨蓝
     10 合作流程  白        11 FAQ      浅灰   12 CTA      品牌蓝

   06 公司实力从 v13 的深色改成白底：工厂实拍在白底上更可信，
   也让 05（深）与 09（深）之间有一个呼吸口。代价是 ph-roll 那套
   为深底写的样式必须整体覆盖一次（见 38.5）。

   每个板块刻意不同构（v14 的 P6：连续 5 个同构表头 = 模板感）：
     02 五列小卡 / 03 线框网格 / 04 三列大卡 / 05 行式卡片
     06 左文右图 / 07 证件卡 / 08 双列大卡 / 09 网格引用
     10 水平时间线 / 11 手风琴
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────── 38.1 03 核心优势：线框网格（浅灰底上的白卡阵列） ─────────────────
   不用卡片阴影：6 条是"指标"，用 1px 网格线切成规整的表格状，
   精密感比圆角阴影更贴工业品牌。线用 gap:1px + 容器底色画出来，
   这样边框永远闭合，不需要处理每行的 border-right。 */
.ph-why{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;background:var(--line);border:1px solid var(--line);
}
.ph-why-i{
    position:relative;background:#fff;
    padding:clamp(26px,2.7vw,38px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,34px);
    transition:background .26s var(--ease);
}
.ph-why-i::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--d-brand);transform:scaleY(0);transform-origin:top;
    transition:transform .34s var(--ease);
}
.ph-why-i:hover{background:var(--paper-2)}
.ph-why-i:hover::before{transform:scaleY(1)}
.ph-why-n{
    display:block;font-size:var(--d6);font-weight:700;letter-spacing:.16em;
    color:var(--d-t3);font-variant-numeric:tabular-nums;
    transition:color .26s var(--ease);
}
.ph-why-i:hover .ph-why-n{color:var(--d-brand)}
.ph-why-num{
    display:block;margin-top:12px;
    font-size:clamp(28px,3vw,38px);font-weight:300;letter-spacing:-.035em;
    line-height:1;color:var(--d-brand);font-variant-numeric:tabular-nums;
}
.ph-why-t{
    margin:14px 0 9px;font-size:16px;font-weight:600;
    letter-spacing:-.01em;line-height:1.5;color:var(--ink);
}
.ph-why-d{margin:0;font-size:var(--d5);line-height:1.82;color:var(--d-t2)}

/* ───────────────── 38.2 04 重点产品：三列大卡 ─────────────────
   与 02 的品类卡区分开：卡更宽（400 vs 240）、有品类标签、
   底部有一行硬数据（厚度区间 / 可选规格数），不是"图 + 名字"就完。 */
.ph-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.ph-feat-i{
    display:flex;flex-direction:column;text-decoration:none;
    background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;
    transition:border-color .26s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease);
}
.ph-feat-i:hover{
    border-color:transparent;transform:translateY(-3px);
    box-shadow:0 20px 42px -24px rgba(13,28,48,.34);
}
.ph-feat-im{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.ph-feat-im img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .62s var(--ease);
}
.ph-feat-i:hover .ph-feat-im img{transform:scale(1.05)}
.ph-feat-cat{
    position:absolute;left:0;top:0;z-index:2;
    background:rgba(10,26,46,.82);color:#fff;
    font-size:var(--d6);letter-spacing:.04em;padding:6px 12px;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.ph-feat-b{padding:20px 22px 20px;display:flex;flex-direction:column;flex:1}
.ph-feat-t{
    margin:0 0 10px;font-size:17px;font-weight:600;color:var(--ink);
    letter-spacing:-.01em;line-height:1.42;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ph-feat-d{
    margin:0 0 16px;font-size:var(--d5);line-height:1.8;color:var(--d-t2);flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ph-feat-m{
    margin:0;padding-top:14px;border-top:1px solid var(--line);
    display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
    font-size:var(--d6);color:var(--d-t3);font-variant-numeric:tabular-nums;
}
/* 卡宽只有 400px，"厚度 0.065–0.98 mm + 可选规格 129 种 + 查看详情 →"
   会挤在一条线上贴到一起；文案缩成"详情 →"并强制留出最小间隔。 */
.ph-feat-m i{
    font-style:normal;margin-left:auto;padding-left:14px;
    font-size:var(--d6);font-weight:600;
    color:var(--d-brand);white-space:nowrap;
    transition:transform .24s var(--ease);
}
.ph-feat-i:hover .ph-feat-m i{transform:translateX(4px)}

/* ───────────────── 38.3 05 应用场景（深底）：行式卡片 + 收口块 ─────────────────
   v14 的 P1 教训：光列 13 个行业名，右边一大片空白 = "没做完"。
   v15 每行给足三层信息：行业名 / 典型工况 / 推荐材料 —— 三列都填满。 */
.ph-sol{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(26px,3.4vw,56px);row-gap:0;
}
.ph-sol-i{
    display:block;text-decoration:none;
    padding:22px 0 23px;border-top:1px solid rgba(255,255,255,.13);
    transition:padding-left .26s var(--ease);
}
.ph-sol-i:hover{padding-left:10px}
/* 首行不画顶线：板块头本身已有一条 border-bottom，
   再给第一行加一条会形成两条相距 50px 的平行线，像多画了一笔。 */
.ph-sol-i:nth-child(-n+3){border-top:0;padding-top:6px}
.ph-sol-i:hover .ph-sol-n{color:var(--sky)}
.ph-sol-t{
    margin:9px 0 7px;font-size:17px;font-weight:500;color:#fff;
    letter-spacing:-.01em;transition:color .22s var(--ease);
}
.ph-sol-i:hover .ph-sol-t{color:var(--sky)}
.ph-sol-c{
    margin:0 0 12px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.55);
}
.ph-sol-m{
    display:inline-block;font-size:11px;letter-spacing:.03em;
    color:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.2);
    border-radius:2px;padding:5px 10px;white-space:nowrap;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;
    transition:color .24s var(--ease),border-color .24s var(--ease);
}
.ph-sol-i:hover .ph-sol-m{color:var(--sky);border-color:var(--sky)}

/* 13 项在 3 列里剩 2 格，用收口块填平，入口也落在读者看完列表的位置 */
.ph-sol-cta{
    grid-column:span 2;align-self:end;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    margin:26px 0 0;padding:20px 24px;border-radius:2px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    text-decoration:none;
    transition:background .24s var(--ease),border-color .24s var(--ease);
}
.ph-sol-cta:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
.ph-sol-cta-t{
    font-size:15px;font-weight:600;color:#fff;
    display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}
.ph-sol-cta-t::before{content:'';width:3px;height:15px;background:var(--d-brand);border-radius:1px}
.ph-sol-cta-d{
    font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ph-sol-cta:hover .ph-sol-cta-d{color:rgba(255,255,255,.74)}

/* ───────────────── 38.4 06 公司实力（白底）：左工序 / 右车间图 ───────────────── */
.ph-fac{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    gap:clamp(30px,4vw,66px);align-items:center;
}
.ph-fac-i:first-child{border-top:0;padding-top:0}
.ph-fac-fig img{
    display:block;width:100%;aspect-ratio:4/3;object-fit:cover;position:relative;z-index:1;
}
.ph-fac-fig::after{
    content:'';position:absolute;left:16px;top:16px;right:-16px;bottom:-16px;
    border:1px solid var(--line-2);pointer-events:none;
}
.ph-fac-fig figcaption{
    position:absolute;left:0;bottom:0;right:0;z-index:2;
    background:linear-gradient(0deg,rgba(10,26,46,.92),rgba(10,26,46,0));
    color:#fff;font-size:var(--d6);letter-spacing:.02em;padding:34px 18px 14px;
}

/* ───────────────── 38.5 车间滚动条：白底覆盖 ─────────────────
   ph-roll 这套（v13 36.4 / v14 37.5）是为深底写的：标题白字、
   箭头白边、卡片背景深墨蓝。放到白底板块里会全线看不见，
   所以这里整段覆盖一遍。注意选择器要压过 v14 的 body.p-home .ph-roll-p。 */
.ph-sec:not(.ph-sec--dark) .ph-roll-h b{color:var(--d-t3)}
.ph-sec:not(.ph-sec--dark) .ph-roll-h span{color:var(--d-t3)}
.ph-sec:not(.ph-sec--dark) .ph-roll-i{background:var(--paper-2)}
.ph-sec:not(.ph-sec--dark) .ph-roll-i img{opacity:1}
.ph-sec:not(.ph-sec--dark) .ph-roll-p{
    border-color:var(--line-2);color:var(--d-t2);
}
.ph-sec:not(.ph-sec--dark) .ph-roll-p:hover{
    background:var(--d-brand);border-color:var(--d-brand);color:#fff;
}
.ph-sec:not(.ph-sec--dark) .ph-roll-p:disabled{opacity:.3}
.ph-sec:not(.ph-sec--dark) .ph-roll-p:disabled:hover{
    background:transparent;border-color:var(--line-2);color:var(--d-t2);
}

/* 底部数字条（白底版，替代 v13 的 .ph-nums） */
.ph-facnum{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0 clamp(16px,1.8vw,26px);
    margin-top:clamp(40px,4.4vw,60px);
    border-top:1px solid var(--line);padding-top:clamp(24px,2.8vw,34px);
}
.ph-facnum-i{padding-left:clamp(14px,1.8vw,26px);border-left:1px solid var(--line)}
.ph-facnum-i:first-child{border-left:0;padding-left:0}
.ph-facnum-i b{
    display:block;font-size:var(--d-num);font-weight:300;
    letter-spacing:-.035em;line-height:1;color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.ph-facnum-i b i{
    font-style:normal;font-size:.44em;font-weight:600;
    color:var(--d-brand);margin-left:4px;letter-spacing:0;
}
.ph-facnum-i span{
    display:block;margin-top:10px;font-size:var(--d6);
    color:var(--d-t3);letter-spacing:.02em;
}

/* ───────────────── 38.6 07 认证资质：证件式卡 ─────────────────
   没有证书扫描件时（img 为空），靠排版把"证件感"做出来：
   顶部一条细线、机构名 + 编号用等宽对齐、有效期单独一行。
   顶线用深墨蓝而不是品牌蓝 —— 6 张卡全上蓝会把全站蓝色用量顶穿。 */
.ph-cert-i:hover{
    border-color:transparent;border-top-color:var(--d-brand);
    box-shadow:0 16px 34px -22px rgba(13,28,48,.3);
}
/* 证书名独占一行 —— 曾经和"有效期至"放在同一个 flex 行里，
   长的证书名被挤成"…管理体系认 / 证"这种断词。 */
/* 底部两行：机构独占一行，编号 + 有效期另起一行。
   曾经把三者挤在一行用 space-between 排，右侧"编号 · 有效期"是 nowrap，
   结果机构名被压到只剩 100px，渲染成"SGS 通…""Intertek…"——
   机构名恰恰是这张卡最有说服力的部分，不能省。 */

/* ───────────────── 38.7 08 客户案例：双列大卡 ─────────────────
   4 条案例用 2×2，卡宽约 610px，标题可以放到 20px 而不用挤。
   刻意不放图：车间实景已经在 06 板块用过一轮，同一批素材再出现
   一次会让整页显得"素材不够"（v13 36.6 的判断，仍然成立）。 */
.ph-cards--2 .ph-cards-i{padding:clamp(28px,3vw,40px) clamp(26px,2.8vw,38px)}
.ph-cards--2 .ph-cards-t{font-size:20px;margin-bottom:13px}
.ph-cards--2 .ph-cards-d{font-size:15px;-webkit-line-clamp:4}
.ph-cards--2 .ph-cards-m{margin-top:24px;padding-top:18px}

/* ───────────────── 38.8 09 客户评价（深底）：网格引用卡 ───────────────── */
.ph-quote-i:hover{background:var(--d-ink-2)}
.ph-quote-tag i{
    font-style:normal;font-size:11px;letter-spacing:.03em;
    color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.18);
    border-radius:2px;padding:4px 9px;white-space:nowrap;
}
/* 5 条在 3 列里剩 1 格，用收口块填平（与 05 同一套手法） */
.ph-quote-cta:hover{background:rgba(255,255,255,.09)}
.ph-quote-cta-t::before{content:'';width:3px;height:15px;background:var(--d-brand);border-radius:1px}
.ph-quote-cta:hover .ph-quote-cta-d{color:rgba(255,255,255,.74)}

/* ───────────────── 38.9 10 合作流程：水平时间线 ─────────────────
   5 步一行排完 —— 流程横向读下来才像"一条线"，拆成两列就散了。
   顶部那条线是每格自己画的，最后一格用渐变淡出，避免末端出现断头。 */
.ph-step{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
}
/* flex 纵向排列 + 说明 flex:1 —— 说明文字行数不等（有的 2 行有的 3 行）时，
   底部的周期标签仍然齐平；否则第 4 步的标签会比其他四步高出一行。 */
.ph-step-i{
    position:relative;padding-right:clamp(12px,1.8vw,26px);
    display:flex;flex-direction:column;
}
.ph-step-d{
    display:block;position:relative;height:1px;background:var(--line-2);margin-bottom:20px;
}
.ph-step-d i{
    position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;
    background:var(--d-brand);
}
.ph-step-i:last-child .ph-step-d{background:linear-gradient(90deg,var(--line-2),transparent)}
.ph-step-n{
    display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
    color:var(--d-brand);font-variant-numeric:tabular-nums;
}
.ph-step-t{
    margin:10px 0 9px;font-size:17px;font-weight:600;color:var(--ink);
    letter-spacing:-.01em;line-height:1.4;
}
.ph-step-p{margin:0 0 14px;font-size:13px;line-height:1.8;color:var(--d-t2);flex:1 1 auto}
.ph-step-day{
    align-self:flex-start;
    font-size:11px;letter-spacing:.03em;
    color:var(--d-t2);background:var(--paper-2);border:1px solid var(--line);
    border-radius:2px;padding:5px 10px;white-space:nowrap;
}

/* ───────────────── 38.10 11 常见问题：手风琴 ─────────────────
   max-height 由 JS 按 scrollHeight 设，不写死高度；
   展开动画期间页面不会跳，因为容器始终是文档流里的块。 */
.ph-faq{border-top:1px solid var(--line)}
.ph-faq-q:hover{padding-left:6px}
.ph-faq-q:hover .ph-faq-qt{color:var(--d-brand)}
.ph-faq-ico::before,.ph-faq-ico::after{
    content:'';position:absolute;background:var(--d-t3);
    transition:transform .3s var(--ease),background .24s var(--ease);
}
.ph-faq-ico::before{left:0;top:6px;width:14px;height:1.5px}
.ph-faq-ico::after{left:6px;top:0;width:1.5px;height:14px}
.ph-faq-i.is-open .ph-faq-ico::before,.ph-faq-i.is-open .ph-faq-ico::after{background:var(--d-brand)}
.ph-faq-i.is-open .ph-faq-ico::after{transform:scaleY(0)}
.ph-faq-a p{
    margin:0;padding:0 clamp(32px,4vw,110px) 24px 94px;
    font-size:var(--d5);line-height:1.9;color:var(--d-t2);
}

/* ───────────────── 38.11 12 CTA：三条承诺 ─────────────────
   光有"获取报价"太单薄。补一组可验证的承诺（免费打样 / 交期 / 质保），
   把"点按钮"这个动作的风险降下来。 */
.ph-cta-l{min-width:0}
.ph-cta-pm{
    list-style:none;margin:24px 0 0;padding:0;
    display:flex;flex-wrap:wrap;gap:14px clamp(22px,2.8vw,44px);
}
.ph-cta-pm li{
    display:flex;flex-direction:column;gap:4px;
    padding-left:14px;border-left:1px solid rgba(255,255,255,.3);
}
.ph-cta-pm b{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em}
.ph-cta-pm span{font-size:var(--d6);color:rgba(255,255,255,.66)}

/* ───────────────── 38.12 裸元素保护 ─────────────────
   v8 第 33.20 节按【元素类型】打：b:not([class]),span:not([class]),i:not([class])
   {font-size:var(--fs-5)!important}。v15 这批组件里 b/i/span/em 用得很多
   （数字、序号、单位、标签、星级），逐条显式声明一次，避免被压成 15px。 */
body.p-home .ph-why-n{font-size:12px!important;font-weight:700!important}
body.p-home .ph-why-num{font-size:clamp(28px,3vw,38px)!important;font-weight:300!important}
body.p-home .ph-why-t{font-size:16px!important}
body.p-home .ph-why-d{font-size:14px!important}
body.p-home .ph-feat-cat{font-size:12px!important}
body.p-home .ph-feat-t{font-size:17px!important}
body.p-home .ph-feat-d{font-size:14px!important}
body.p-home .ph-feat-m{font-size:12px!important}
body.p-home .ph-feat-m i{font-size:12px!important;font-weight:600!important}
body.p-home .ph-sol-n{font-size:12px!important;font-weight:700!important}
body.p-home .ph-sol-t{font-size:17px!important}
body.p-home .ph-sol-c{font-size:13px!important}
body.p-home .ph-sol-m{font-size:11px!important}
body.p-home .ph-sol-cta-t{font-size:15px!important;font-weight:600!important}
body.p-home .ph-sol-cta-d{font-size:13px!important}
body.p-home .ph-fac-n{font-size:12px!important;font-weight:700!important}
body.p-home .ph-fac-eq{font-size:11px!important;font-weight:600!important}
body.p-home .ph-fac-t{font-size:17px!important}
body.p-home .ph-fac-p{font-size:14px!important}
body.p-home .ph-fac-fig figcaption{font-size:12px!important}
body.p-home .ph-facnum-i b{font-size:var(--d-num)!important;font-weight:300!important}
body.p-home .ph-facnum-i b i{font-size:.44em!important;font-weight:600!important}
body.p-home .ph-facnum-i span{font-size:12px!important}
body.p-home .ph-cert-t{font-size:15px!important}
body.p-home .ph-cert-v{font-size:11px!important}
body.p-home .ph-cert-s{font-size:13px!important}
body.p-home .ph-cert-iss{font-size:12px!important}
body.p-home .ph-cert-no{font-size:11px!important}
body.p-home .ph-cards--2 .ph-cards-t{font-size:20px!important}
body.p-home .ph-cards--2 .ph-cards-d{font-size:15px!important}
body.p-home .ph-quote-q{font-size:15px!important}
body.p-home .ph-quote-co{font-size:14px!important;font-weight:600!important}
body.p-home .ph-quote-pe{font-size:12px!important}
body.p-home .ph-quote-tag i{font-size:11px!important;font-style:normal!important}
body.p-home .ph-quote-star{font-size:12px!important;font-style:normal!important}
body.p-home .ph-quote-cta-t{font-size:17px!important;font-weight:600!important}
body.p-home .ph-quote-cta-d{font-size:13px!important}
body.p-home .ph-step-n{font-size:11.5px!important;font-weight:700!important}
body.p-home .ph-step-t{font-size:17px!important}
body.p-home .ph-step-p{font-size:13px!important}
body.p-home .ph-step-day{font-size:11px!important}
body.p-home .ph-faq-cat{font-size:11px!important;font-weight:600!important}
body.p-home .ph-faq-qt{font-size:17px!important}
body.p-home .ph-faq-a p{font-size:14px!important}
body.p-home .ph-cta-pm b{font-size:15px!important;font-weight:600!important}
body.p-home .ph-cta-pm span{font-size:12px!important}

/* ───────────────── 38.13 响应式 ─────────────────
   ★ 沿用 v14 37.8 的教训：凡是加了 body.p-home 前缀的规则，
     对应的媒体查询也必须用同样前缀重写，否则会被静默压掉。
     这里所有新组件的断点都是新类名（0,1,0），v13/v14 没有对应规则，
     不存在互相压制的问题。 */
@media(max-width:1280px){
    .ph-facnum{grid-template-columns:repeat(4,minmax(0,1fr))}
    .ph-facnum-i:nth-child(5){border-left:0;padding-left:0}
}
@media(max-width:1100px){
    .ph-why{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ph-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ph-sol{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* 列数变了，首行的判定也跟着变（2 列时首行是前 2 个） */
    .ph-sol-i:nth-child(-n+3){border-top:1px solid rgba(255,255,255,.13);padding-top:22px}
    .ph-sol-i:nth-child(-n+2){border-top:0;padding-top:6px}
    .ph-fac{grid-template-columns:minmax(0,1fr);gap:34px}
    .ph-fac-fig::after{display:none}
    .ph-step{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
    /* 换行之后，每行的最后一格横线会顶到容器右缘形成"断头线"，
       按列数把行末那一格的线改成渐变淡出（同一件事随列数要重写一遍）。 */
    .ph-step-i:nth-child(3n) .ph-step-d{background:linear-gradient(90deg,var(--line-2),transparent)}
}
@media(max-width:900px){
    .ph-step{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ph-step-i:nth-child(3n) .ph-step-d{background:var(--line-2)}
    .ph-step-i:nth-child(2n) .ph-step-d{background:linear-gradient(90deg,var(--line-2),transparent)}
    .ph-faq-a p{padding-left:82px}
}
@media(max-width:760px){
    .ph-why,.ph-feat,.ph-sol,.ph-cert,.ph-quote,.ph-cards--2{grid-template-columns:minmax(0,1fr)}
    /* 单列：只有第一格不画顶线 */
    .ph-sol-i{border-top:1px solid rgba(255,255,255,.13);padding-top:22px}
    .ph-sol-i:first-child{border-top:0;padding-top:6px}
    /* 单列时 span 2 会撑出网格 —— 必须还原成 1 格（v14 37.8 同款坑） */
    .ph-sol-cta{grid-column:auto;flex-wrap:wrap;gap:8px;padding:17px 18px}
    .ph-sol-cta-d{white-space:normal}
    .ph-facnum{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
    .ph-facnum-i{border-left:0;padding-left:0}
    .ph-step{grid-template-columns:minmax(0,1fr);row-gap:0}
    /* 单列时间线：横线改竖线，靠左侧一条贯穿的轴线串起 5 步 */
    .ph-step-i{padding:0 0 26px 26px;position:relative}
    .ph-step-i::before{
        content:'';position:absolute;left:4px;top:12px;bottom:0;width:1px;background:var(--line-2);
    }
    .ph-step-i:last-child::before{display:none}
    .ph-step-d{position:absolute;left:0;top:8px;width:1px;height:0;margin:0}
    .ph-step-d i{left:-4px;top:-4px}
    .ph-faq-a p{padding:0 26px 20px 0}
    .ph-cta-pm{gap:12px 20px}
    .ph-cta-pm li{padding-left:12px}
}

/* ═══════════════════════════════════════════════════════════════════════
   39. v16「减法与收口」—— 在 v15 的 12 板块上做 6 处改动

    1 删掉独立的「十大品类」板块 → 压成一行 chip 导航（约省 500px）
    2 去掉所有 "01 / Product Categories" 编号 → 主标题 + 副标题
    3 应用场景 3 列 5 行 → 4 列 4 行紧凑暗块（约省 340px）
    4 认证资质 → 中间最大、两侧递缩的 3D 证书轮播
    5 客户案例 → 4 列带图卡，去掉 "Case 01"
    6 FAQ → 左「公司动态」/ 右「常见问题」双栏

   板块与底色（11 块）：
     01 Hero 深 / 02 主力型号 白 / 03 核心优势 浅灰 / 04 应用场景 深
     05 设备能力 白 / 06 认证资质 浅灰 / 07 客户案例 白 / 08 客户评价 深
     09 合作流程 白 / 10 动态与问答 浅灰 / 11 CTA 品牌蓝

   ★ 特异性纪律（v14 37.8 的教训）：凡是加了 body.p-home 前缀的规则，
     它对应的媒体查询也必须用同样前缀重写，否则媒体查询里的低特异性
     规则会被静默压掉 —— 桌面端看不出问题，移动端直接塌。
     本文件所有断点一律带 body.p-home 前缀。
   ═══════════════════════════════════════════════════════════════════════ */

/* 板块整体收紧：v13 的 --d-sec 上限 124px 在 11 个板块连排时太松 */
body.p-home .ph-sec{padding-block:clamp(62px,7vw,102px)}
body.p-home .ph-head{
    padding-bottom:19px;margin-bottom:clamp(24px,2.8vw,38px);
}
body.p-home .ph-head-l{flex:1 1 auto;min-width:0}

/* ───────────────── 39.1 板块头：主标题 + 副标题，去掉编号 ─────────────────
   编号（"01 / Product Categories"）在 11 个板块连排时只会把页面切成一串
   目录 —— 读者不关心这是第几块，关心的是这块讲什么。
   副标题接手原来右侧 .ph-head-r 的说明职能，表头从三栏压成两栏。 */
body.p-home .ph-sub{
    margin:10px 0 0;font-size:14px;line-height:1.75;
    color:var(--d-t3);max-width:64ch;
}
body.p-home .ph-sec--dark .ph-sub{color:rgba(255,255,255,.54)}
body.p-home .ph-t{letter-spacing:-.7px}

/* ───────────────── 39.2 品类 chip 导航（替代 10 张品类卡） ───────────────── */
body.p-home .ph-chips{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:5px;margin:0 0 clamp(18px,2vw,26px);
}
body.p-home .ph-chips-l{
    flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.14em;
    color:var(--d-t3);margin-right:1px;
}
/* 10 个品类名最长的到 8 个字（铁氟龙网格输送带），13px 时一行放不下、
   第二行只剩 2 个，"按品类"这行会显得没排完。压到 12px / padding 6×10
   之后两行各 5 个，密度也跟整个板块的紧凑口径一致。 */
body.p-home .ph-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 10px;border:1px solid var(--line);border-radius:2px;
    background:#fff;font-size:12px;color:var(--d-t1);
    text-decoration:none;white-space:nowrap;
    transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
body.p-home .ph-chip i{
    font-style:normal;font-size:11px;font-weight:600;
    color:var(--d-t3);font-variant-numeric:tabular-nums;
    transition:color .22s var(--ease);
}
body.p-home .ph-chip:hover{
    color:var(--d-brand);border-color:var(--d-brand);background:var(--paper-2);
}
body.p-home .ph-chip:hover i{color:var(--d-brand)}

/* ───────────────── 39.3 04 应用场景：4 列紧凑暗块 ─────────────────
   v15 是 3 列 × 5 行的行式卡：每行 4 层信息 + 编号，行高 130px 起，
   整块 760px，右半边还留着大片空。改成 4 × 4 的暗块阵列，
   用 1px 亮边 + 极淡底色把格子切出来，高度压到 420px 左右。 */
body.p-home .ph-sol{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
}
body.p-home .ph-sol-i{
    display:flex;flex-direction:column;
    padding:15px 15px 14px;border-top:0;border-radius:2px;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
    text-decoration:none;
    transition:background .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease);
}
body.p-home .ph-sol-i:hover{
    background:rgba(255,255,255,.095);border-color:rgba(255,255,255,.26);
    transform:translateY(-2px);
}
body.p-home .ph-sol-t{
    font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.4;
}
body.p-home .ph-sol-c{
    margin-top:7px;font-size:13px;line-height:1.62;
    color:rgba(255,255,255,.5);flex:1 1 auto;
}
body.p-home .ph-sol-m{
    align-self:flex-start;margin-top:11px;padding:4px 8px;
    font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.18);border-radius:2px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .24s var(--ease),border-color .24s var(--ease);
}
body.p-home .ph-sol-i:hover .ph-sol-m{color:var(--sky);border-color:var(--sky)}
/* 13 项在 4 列里剩 3 格，收口块填平最后一行 */
body.p-home .ph-sol-cta{
    grid-column:span 3;align-self:stretch;margin:0;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:15px 20px;border-radius:2px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    text-decoration:none;
    transition:background .24s var(--ease),border-color .24s var(--ease);
}
body.p-home .ph-sol-cta:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
body.p-home .ph-sol-cta-t{font-size:14.5px}
body.p-home .ph-sol-cta-d{font-size:13px}

/* ───────────────── 39.3b 03 核心优势：去掉 01–06 序号后的空间补正 ─────────────────
   序号原本靠 margin-top:12px 与上方留白撑开卡面，删掉后大数字要自己占位。 */
body.p-home .ph-why-num{margin-top:0;margin-bottom:2px}
body.p-home .ph-why-i{padding-top:clamp(24px,2.5vw,34px)}

/* ───────────────── 39.4 05 设备能力：整体收紧 ─────────────────
   v15 的工序项：英文小标独占一行 + 17px 标题 + 14px 说明 = 约 140px/项。
   这里把英文小标折到标题行内做标签，说明降到 12.5px，项高 ~104px。 */
body.p-home .ph-fac{gap:clamp(26px,3.2vw,52px)}
body.p-home .ph-fac-i{
    grid-template-columns:40px minmax(0,1fr);gap:14px;padding:13px 0;
}
body.p-home .ph-fac-n{padding-top:2px;font-size:11px}
body.p-home .ph-fac-t{margin:0 0 5px;font-size:15px;line-height:1.45}
/* 设备英文名从"独占一行的 uppercase 小标"改成标题行内的标签 ——
   它只是辅助信息，不值得单独占 17px 行高。 */
body.p-home .ph-fac-eq{
    display:inline-block;margin-left:7px;vertical-align:1.5px;
    font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:none;
    color:var(--d-t3);background:var(--paper-2);
    border:1px solid var(--line);border-radius:2px;padding:2px 7px;white-space:nowrap;
}
body.p-home .ph-fac-p{margin:0;font-size:13px;line-height:1.72}
body.p-home .ph-fac-fig img{aspect-ratio:16/11}

/* 车间图：从"横向滚动 + 左右箭头"改成自适应网格。
   只有 3 张图，收窄后总宽不足容器宽 → 箭头永远置灰，等于两个死控件。
   网格用 auto-fit，以后图片加到 5、6 张也能自动换行。 */
body.p-home .ph-roll{margin-top:clamp(24px,2.8vw,40px)}
body.p-home .ph-roll-track{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;overflow:visible;padding-bottom:0;scroll-snap-type:none;
}
body.p-home .ph-roll-i{flex:0 0 auto;scroll-snap-align:none}
body.p-home .ph-roll-i img{aspect-ratio:16/10}
body.p-home .ph-facnum{
    margin-top:clamp(28px,3.2vw,44px);padding-top:clamp(18px,2vw,26px);
}
body.p-home .ph-facnum-i span{margin-top:7px}

/* ───────────────── 39.5 06 认证资质：3D 证书轮播 ─────────────────
   中间那张 scale 1、两侧依次缩小并向后退，形成一条透视走廊。
   位移动画在 JS 里算（间距随距离递减），CSS 只负责外观与过渡。

   位移为什么不能等间距：等间距时第 3 张（d=±3）会被推到容器外裁掉，
   看上去像布局溢出 bug；间距递减则自然收拢。 */
body.p-home .ph-cf{position:relative;outline:none}
body.p-home .ph-cf-stage{
    position:relative;height:clamp(272px,20.5vw,312px);
    perspective:1600px;overflow:hidden;
}
body.p-home .ph-cf-i{
    position:absolute;left:50%;top:0;
    width:clamp(224px,22vw,318px);height:100%;
    margin-left:calc(clamp(224px,22vw,318px) / -2);
    transform-origin:50% 55%;cursor:pointer;
    transition:transform .52s var(--ease),opacity .42s var(--ease);
    will-change:transform,opacity;
}
body.p-home .ph-cf-paper{
    position:relative;height:100%;overflow:hidden;
    background:#fff;border:1px solid var(--line);
    box-shadow:0 26px 54px -30px rgba(13,28,48,.46);
    padding:19px 19px 15px;display:flex;flex-direction:column;
}
/* 证件顶条：左边一小段品牌蓝，其余深墨蓝 —— 6 张卡只有中间那张完整可见，
   蓝色总量可控（全站彩色 ≤10 处的口径不变）。 */
body.p-home .ph-cf-paper::before{
    content:'';position:absolute;left:0;top:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--d-brand) 0 38px,var(--d-ink) 38px);
}
body.p-home .ph-cf-top{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
body.p-home .ph-cf-iss{
    font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--d-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
body.p-home .ph-cf-kind{
    flex:0 0 auto;font-size:10px;letter-spacing:.08em;
    color:var(--d-t2);background:var(--paper-2);
    border:1px solid var(--line);border-radius:2px;padding:3px 8px;white-space:nowrap;
}
body.p-home .ph-cf-t{
    margin:0 0 9px;font-size:14px;font-weight:600;color:var(--ink);
    line-height:1.5;letter-spacing:-.01em;
}
body.p-home .ph-cf-s{
    margin:0;font-size:12px;line-height:1.72;color:var(--d-t2);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* 印章：缩到 0.7 时也还看得出是个章，这是"证件感"最直观的一笔。
   用深墨蓝而不是红 —— 印章红会打破全站的蓝/墨蓝双色口径。 */
body.p-home .ph-cf-seal{
    position:relative;margin:10px 0 0 auto;flex:0 0 auto;
    width:70px;height:70px;border-radius:50%;
    border:1.5px solid rgba(10,26,46,.32);
    display:flex;align-items:center;justify-content:center;
    transform:rotate(-11deg);
}
body.p-home .ph-cf-seal::before{
    content:'';position:absolute;inset:7px;border-radius:50%;
    border:1px dashed rgba(10,26,46,.2);
}
body.p-home .ph-cf-seal b{
    font-size:9px;font-weight:700;letter-spacing:.16em;
    color:rgba(10,26,46,.4);font-style:normal;
}
body.p-home .ph-cf-f{
    margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:4px;
}
body.p-home .ph-cf-f span{
    font-size:11px;color:var(--d-t3);letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 左右箭头：落在 --band(56px) 的留白里，不占内容宽度 */
body.p-home .ph-cf-p{
    position:absolute;top:50%;margin-top:-22px;z-index:200;
    width:44px;height:44px;border-radius:50%;padding:0;
    border:1px solid var(--line-2);background:#fff;color:var(--d-t1);
    font-size:15px;line-height:1;cursor:pointer;
    transition:background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease);
}
body.p-home .ph-cf-p--l{left:-4px}
body.p-home .ph-cf-p--r{right:-4px}
body.p-home .ph-cf-p:hover{
    background:var(--d-brand);border-color:var(--d-brand);color:#fff;
}

/* 下方说明条 + 指示点：两侧卡片缩到 0.7 后读不清编号与机构，
   完整信息在这里补一次（名称 + 机构 + 范围）。 */
body.p-home .ph-cf-foot{
    margin-top:clamp(20px,2.2vw,30px);
    display:flex;align-items:center;justify-content:space-between;gap:22px;
}
body.p-home .ph-cf-cap{
    margin:0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 14px;
}
body.p-home .ph-cf-cap b{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
body.p-home .ph-cf-cap span{font-size:13px;color:var(--d-t3);min-width:0}
body.p-home .ph-cf-dots{display:flex;gap:7px;flex:0 0 auto}
body.p-home .ph-cf-dot{
    width:8px;height:8px;padding:0;border-radius:50%;
    border:1px solid var(--line-2);background:transparent;cursor:pointer;
    transition:width .3s var(--ease),background .24s var(--ease),border-color .24s var(--ease);
}
body.p-home .ph-cf-dot.is-on{
    width:22px;border-radius:4px;background:var(--d-brand);border-color:var(--d-brand);
}

/* 两侧卡片的细节交给下方说明条之后，卡面只剩“机构 + 类别 + 证书名”。
   缩到 0.7 时这三样还读得出，中间那张才是完整证件。 */
body.p-home .ph-cf-i .ph-cf-s,
body.p-home .ph-cf-i .ph-cf-seal,
body.p-home .ph-cf-i .ph-cf-f{transition:opacity .42s var(--ease)}
body.p-home .ph-cf-i:not(.is-act) .ph-cf-s,
body.p-home .ph-cf-i:not(.is-act) .ph-cf-seal,
body.p-home .ph-cf-i:not(.is-act) .ph-cf-f{opacity:0}
body.p-home .ph-cf-i:not(.is-act) .ph-cf-t{opacity:.72}

/* ───────────────── 39.6 07 客户案例：4 列带图卡 ─────────────────
   v15 是 2×2 纯排版大卡：四段文字排在一起，扫一眼分不清是案例还是新闻。
   4 列带图卡后每张约 295px，图 16/10，行业标签压在图上。
   "Case 01" 这类编号占一整行却不传递任何信息，去掉。 */
body.p-home .ph-cases{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(13px,1.5vw,19px);
}
body.p-home .ph-case-i{
    display:flex;flex-direction:column;text-decoration:none;
    background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;
    transition:border-color .26s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease);
}
body.p-home .ph-case-i:hover{
    border-color:transparent;transform:translateY(-3px);
    box-shadow:0 18px 38px -24px rgba(13,28,48,.32);
}
body.p-home .ph-case-im{
    position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);
}
body.p-home .ph-case-im img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .62s var(--ease);
}
body.p-home .ph-case-i:hover .ph-case-im img{transform:scale(1.05)}
body.p-home .ph-case-tag{
    position:absolute;left:0;top:0;z-index:2;
    background:rgba(10,26,46,.82);color:#fff;
    font-size:11px;letter-spacing:.04em;padding:5px 10px;white-space:nowrap;
}
body.p-home .ph-case-b{
    padding:14px 16px 14px;display:flex;flex-direction:column;flex:1 1 auto;
}
body.p-home .ph-case-t{
    margin:0 0 8px;font-size:15px;font-weight:600;color:var(--ink);
    line-height:1.45;letter-spacing:-.01em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.p-home .ph-case-d{
    margin:0 0 12px;font-size:13px;line-height:1.72;color:var(--d-t2);flex:1 1 auto;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body.p-home .ph-case-m{
    display:block;margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
    font-size:12px;color:var(--d-t3);letter-spacing:.01em;
}
body.p-home .ph-case-m i{
    display:inline-block;font-style:normal;font-size:12px;font-weight:600;
    color:var(--d-brand);margin-left:5px;
    transition:transform .24s var(--ease);
}
body.p-home .ph-case-i:hover .ph-case-m i{transform:translateX(4px)}

/* ───────────────── 39.7 10 动态与问答：双栏 ─────────────────
   整宽手风琴在 1240px 容器里，答案行被拉到 90 字一行，读起来很累；
   分栏后右栏约 690px，左栏用公司动态把空当填掉。 */
body.p-home .ph-duo{
    display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
    gap:clamp(24px,3vw,54px);align-items:start;
}
body.p-home .ph-duo-h{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line);
}
body.p-home .ph-duo-h b{
    font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
body.p-home .ph-duo-h a{
    font-size:12px;color:var(--d-t2);text-decoration:none;
    border-bottom:1px solid var(--line);padding-bottom:2px;
    transition:color .24s var(--ease),border-color .24s var(--ease);
}
body.p-home .ph-duo-h a:hover{color:var(--d-brand);border-bottom-color:var(--d-brand)}
body.p-home .ph-duo-h span{font-size:11.5px;color:var(--d-t3)}

/* 左栏：头条卡（最新一条）+ 4 条行表 */
body.p-home .ph-news-lead{
    display:block;text-decoration:none;
    background:#fff;border:1px solid var(--line);border-left:2px solid var(--d-brand);
    padding:15px 17px 14px;
    transition:box-shadow .26s var(--ease),border-color .26s var(--ease);
}
body.p-home .ph-news-lead:hover{
    box-shadow:0 16px 34px -24px rgba(13,28,48,.34);border-color:transparent;border-left-color:var(--d-brand);
}
body.p-home .ph-news-ld{
    display:block;font-size:11px;color:var(--d-t3);
    letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
body.p-home .ph-news-lt{
    display:block;margin-top:8px;font-size:15px;font-weight:600;
    color:var(--ink);line-height:1.6;letter-spacing:-.01em;
}
body.p-home .ph-news-lk{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
body.p-home .ph-news-lk i{
    font-style:normal;font-size:11px;color:var(--d-t2);
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:2px;padding:3px 8px;white-space:nowrap;
}
body.p-home .ph-nlist{list-style:none;margin:16px 0 0;padding:0}
body.p-home .ph-nlist li{border-top:1px solid var(--line)}
body.p-home .ph-nlist li:first-child{border-top:0}
/* 标题不能 nowrap：这批资讯标题 30–40 字，86px 日期 + 一行只能放 22 字，
   五条全被截成"…高温烘…"。放宽到 2 行，日期列也收窄一点。 */
body.p-home .ph-nlist a{
    display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;
    align-items:start;padding:11px 0;text-decoration:none;
    transition:padding-left .24s var(--ease);
}
body.p-home .ph-nlist a:hover{padding-left:6px}
body.p-home .ph-news-d{
    padding-top:2px;font-size:11.5px;color:var(--d-t3);letter-spacing:.04em;
    font-variant-numeric:tabular-nums;white-space:nowrap;
}
body.p-home .ph-news-t{
    /* ★ v13 给 .ph-news-t 打过 white-space:nowrap（0,1,0）。只覆盖 display/-webkit-box
       是不够的 —— nowrap 仍在生效，文本永远只有一行，line-clamp:2 形同虚设。 */
    white-space:normal;
    font-size:13.5px;font-weight:400;color:var(--d-t1);line-height:1.58;
    letter-spacing:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .22s var(--ease);
}
body.p-home .ph-nlist a:hover .ph-news-t{color:var(--d-brand)}

/* 右栏 FAQ：缩进按窄栏重写（v15 的左缩进 94px 是给整宽手风琴定的） */
body.p-home .ph-faqwrap .ph-faq{border-top:0}
body.p-home .ph-faqwrap .ph-faq-q{
    grid-template-columns:64px minmax(0,1fr) 24px;gap:11px;padding:15px 0;
}
body.p-home .ph-faqwrap .ph-faq-cat{font-size:11px;padding:4px 0}
body.p-home .ph-faqwrap .ph-faq-qt{font-size:15px;line-height:1.5}
body.p-home .ph-faqwrap .ph-faq-a p{
    padding:0 34px 17px 75px;font-size:13px;line-height:1.86;
}

/* ───────────────── 39.8 裸元素保护 ─────────────────
   v8 第 33.20 节按【元素类型】打：b:not([class]),span:not([class]),i:not([class])
   {font-size:var(--fs-5)!important}。v16 这批组件里 b/i/span/em 用得更多
   （chip 计数、证书印章、案例箭头、新闻标签），逐条显式声明一次。
   与 v15 38.12 同名的，这里的值覆盖前者（同特异性、后出现者胜）。 */
body.p-home .ph-sub{font-size:14px!important}
body.p-home .ph-chips-l{font-size:11px!important;font-weight:700!important}
body.p-home .ph-chip{font-size:12px!important}
body.p-home .ph-chip i{font-size:11px!important;font-weight:600!important;font-style:normal!important}
body.p-home .ph-sol-t{font-size:15px!important;font-weight:600!important}
body.p-home .ph-sol-c{font-size:13px!important}
body.p-home .ph-sol-m{font-size:11px!important}
body.p-home .ph-sol-cta-t{font-size:14.5px!important;font-weight:600!important}
body.p-home .ph-sol-cta-d{font-size:13px!important}
body.p-home .ph-fac-n{font-size:11px!important;font-weight:700!important}
body.p-home .ph-fac-t{font-size:15px!important}
body.p-home .ph-fac-eq{font-size:11px!important;font-weight:600!important;font-style:normal!important}
body.p-home .ph-fac-p{font-size:13px!important}
body.p-home .ph-cf-iss{font-size:13px!important;font-weight:700!important}
body.p-home .ph-cf-kind{font-size:11px!important}
body.p-home .ph-cf-t{font-size:14px!important;font-weight:600!important}
body.p-home .ph-cf-s{font-size:12px!important}
body.p-home .ph-cf-seal b{font-size:9px!important;font-weight:700!important;font-style:normal!important}
body.p-home .ph-cf-f span{font-size:11px!important}
body.p-home .ph-cf-cap b{font-size:14.5px!important;font-weight:600!important}
body.p-home .ph-cf-cap span{font-size:13px!important}
body.p-home .ph-case-tag{font-size:11px!important}
body.p-home .ph-case-t{font-size:15px!important;font-weight:600!important}
body.p-home .ph-case-d{font-size:13px!important}
body.p-home .ph-case-m{font-size:12px!important}
body.p-home .ph-case-m i{font-size:12px!important;font-weight:600!important;font-style:normal!important}
body.p-home .ph-duo-h b{font-size:14.5px!important;font-weight:600!important}
body.p-home .ph-duo-h a{font-size:12px!important}
body.p-home .ph-duo-h span{font-size:11.5px!important}
body.p-home .ph-news-ld{font-size:11px!important}
body.p-home .ph-news-lt{font-size:15px!important;font-weight:600!important}
body.p-home .ph-news-lk i{font-size:11px!important;font-style:normal!important}
body.p-home .ph-news-d{font-size:11.5px!important}
body.p-home .ph-news-t{font-size:13.5px!important}
body.p-home .ph-faqwrap .ph-faq-cat{font-size:11px!important;font-weight:600!important}
body.p-home .ph-faqwrap .ph-faq-qt{font-size:15px!important}
body.p-home .ph-faqwrap .ph-faq-a p{font-size:13px!important}

/* ───────────────── 39.9 响应式（全部带 body.p-home 前缀） ───────────────── */
@media(max-width:1240px){
    body.p-home .ph-sol{grid-template-columns:repeat(3,minmax(0,1fr))}
    /* chip 用 5 列网格：10 个品类正好排满 2 行，不会出现"第二行只剩 1 个"
       那种没排完的样子；flex 换行在 1240 以下做不到这一点。 */
    body.p-home .ph-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
    body.p-home .ph-chips-l{grid-column:1/-1;margin:0 0 2px}
    body.p-home .ph-chip{justify-content:center}
    /* 3 列时 13 项 = 4 行 + 2 格，收口块改 span 2 */
    body.p-home .ph-sol-cta{grid-column:span 2}
    /* v19 删掉了这里的一条 .ph-cases{repeat(3,...)}：
       首页案例固定 4 条（LIMIT 4），3 列排下来第 4 个必然单独占第二行、
       右边空两格 —— 客户报的就是"换个分辨率案例掉到第二行"。
       桌面上保持 4 列到 1040，1040 以下转 2 列（4÷2 整齐）。 */
}
@media(max-width:1040px){
    body.p-home .ph-head{flex-direction:column;align-items:flex-start;gap:14px}

    body.p-home .ph-more{align-self:flex-start}
    body.p-home .ph-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.p-home .ph-duo{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,44px)}
    body.p-home .ph-cf-stage{height:clamp(256px,30vw,296px)}
}
@media(max-width:900px){
    body.p-home .ph-sol{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* 2 列时 13 项 = 6 行 + 1 格，收口块回到 1 格 */
    body.p-home .ph-sol-cta{grid-column:auto;flex-wrap:wrap;gap:6px;padding:14px 16px}
    body.p-home .ph-sol-cta-d{white-space:normal}
    body.p-home .ph-faqwrap .ph-faq-q{grid-template-columns:58px minmax(0,1fr) 22px;gap:10px}
    body.p-home .ph-faqwrap .ph-faq-a p{padding-left:68px}
}
@media(max-width:820px){
    body.p-home .ph-roll-track{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
    body.p-home .ph-sol{grid-template-columns:minmax(0,1fr)}
    body.p-home .ph-roll-track{grid-template-columns:minmax(0,1fr)}
    body.p-home .ph-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.p-home .ph-cases{grid-template-columns:minmax(0,1fr)}
    body.p-home .ph-chips{gap:7px}
    body.p-home .ph-chip{padding:6px 10px;font-size:13px!important}
    /* 证书轮播：屏幕窄到放不下两侧卡片时，只留中间一张 + 一点边缘 */
    body.p-home .ph-cf-stage{height:clamp(242px,66vw,296px)}
    body.p-home .ph-cf-i{width:min(78vw,290px);margin-left:calc(min(78vw,290px) / -2)}
    body.p-home .ph-cf-p{width:38px;height:38px;margin-top:-19px;font-size:14px}
    body.p-home .ph-cf-p--l{left:-2px}
    body.p-home .ph-cf-p--r{right:-2px}
    body.p-home .ph-cf-foot{flex-direction:column;align-items:flex-start;gap:14px}
    /* 单栏时分类标签挤在问题前面会吃掉两行宽度 */
    body.p-home .ph-faqwrap .ph-faq-q{grid-template-columns:minmax(0,1fr) 22px;gap:9px;padding:14px 0}
    body.p-home .ph-faqwrap .ph-faq-cat{display:none}
    body.p-home .ph-faqwrap .ph-faq-a p{padding:0 22px 15px 0}
    body.p-home .ph-nlist a{grid-template-columns:76px minmax(0,1fr);gap:10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   40. v17（2026-09-26）—— 五个板块的定向改造
   ══════════════════════════════════════════════════════════════════════════

   1 九个板块标题改通用型名词（热销产品 / 核心优势 / 应用行业 / 生产实力 /
     认证资质 / 客户案例 / 客户评价 / 合作流程 / 资讯与问答）。
     「主力型号，常备库存当天发」这种是营销长句，当目录用读不出层级 ——
     扫目录的人只看前四个字，看到的是"主力型号，"，不是"产品"。
   2 应用行业：4 列 → 5 列，单格加一层蓝光。
   3 生产实力：图墙（1 大 + 3 小）+ 工序轴（4 个蓝节点串在一条线上）。
   4 客户评价：3 列 grid → 一行多列左右滚动。
   5 资讯与问答：左栏加蓝色日期砖与竖线；右栏手风琴 → 问答流持续上滚。

   特异性纪律（v14 的血泪）：所有断点里的规则一律带 body.p-home 前缀，
   否则带前缀的桌面规则（0,2,1）会静默压掉断点里不带前缀的规则（0,1,0）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────── 40.2 04 应用行业：5 列 + 单格蓝光 ─────────────
   蓝光分三层叠在 background / box-shadow 里，不用伪元素 ——
   ::before/::after 是定位元素，绘制顺序在 flex 子项之后，
   会直接盖在文字上面（定位元素后绘制）。 */
body.p-home .ph-sol{
    grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;
}
body.p-home .ph-sol-i{
    padding:14px 13px 13px;
    background:
        radial-gradient(112% 78% at 10% -8%, rgba(0,118,255,.30), rgba(0,118,255,0) 62%),
        linear-gradient(158deg, rgba(0,118,255,.13) 0%, rgba(255,255,255,.035) 64%);
    border:1px solid rgba(125,180,255,.16);
    box-shadow:inset 2px 0 0 rgba(0,118,255,.5);
}
body.p-home .ph-sol-i:hover{
    background:
        radial-gradient(112% 78% at 10% -8%, rgba(0,118,255,.50), rgba(0,118,255,0) 66%),
        linear-gradient(158deg, rgba(0,118,255,.20) 0%, rgba(255,255,255,.05) 64%);
    border-color:rgba(150,200,255,.42);
    box-shadow:inset 2px 0 0 var(--d-brand), 0 16px 34px -20px rgba(0,118,255,.62);
}
/* 标题加一点蓝色外发光：深底上纯白字发"干"，带一点光才有材质感 */
body.p-home .ph-sol-t{text-shadow:0 0 18px rgba(0,118,255,.38)}
body.p-home .ph-sol-c{color:rgba(255,255,255,.56)}
body.p-home .ph-sol-m{
    color:rgba(165,208,255,.82);border-color:rgba(120,180,255,.28);
}
body.p-home .ph-sol-i:hover .ph-sol-m{
    color:#fff;border-color:rgba(150,200,255,.7);background:rgba(0,118,255,.22);
}
/* 13 个行业 + 收口块 span 2 = 15，正好铺满 5 列 × 3 行，不留空格 */
body.p-home .ph-sol-cta{grid-column:span 2}

/* ───────────── 40.3 05 生产实力：车间图墙 + 工序轴 ─────────────
   v16 是「左侧工序行表 + 右侧一张竖图 + 下面 3 张横排」，三块各说各的。
   v17：① 上面一堵图墙，一眼看到车间是真的；② 下面一条工序轴，一眼看到顺序。 */
body.p-home .ph-fw{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:8px;
    height:clamp(268px,23vw,344px);
}
body.p-home .ph-fw figure{
    margin:0;position:relative;overflow:hidden;
    background:var(--d-ink-2);border-radius:2px;
}
/* 大图占 2×2；最后一张小图占 2 列，把右下的空格填掉 ——
   不这么做的话 4 张图在 4×2 里会空出一格，看着像图没加载完。 */
body.p-home .ph-fw-big{grid-column:span 2;grid-row:span 2}
body.p-home .ph-fw-s:last-child{grid-column:span 2}
body.p-home .ph-fw img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .55s var(--ease);
}
body.p-home .ph-fw figure:hover img{transform:scale(1.045)}
body.p-home .ph-fw-cap{
    position:absolute;left:0;right:0;bottom:0;
    padding:18px 12px 9px;
    font-size:11.5px!important;color:#fff;letter-spacing:.02em;
    background:linear-gradient(0deg,rgba(10,26,46,.92),rgba(10,26,46,0));
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 工序轴：一条横线串起 4 个节点。线画在容器上而不是每个卡片上 ——
   画在卡片上会被 grid 的 gap 切断，成了一截一截的虚线。 */
body.p-home .ph-fw-flow{
    list-style:none;
    margin:clamp(26px,3vw,40px) 0 0;padding:26px 0 0;
    position:relative;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(14px,1.7vw,28px);
}
body.p-home .ph-fw-flow::before{
    content:'';position:absolute;left:0;right:0;top:34px;height:1px;
    background:linear-gradient(90deg,var(--line-2),var(--line));
}
body.p-home .ph-fw-i{position:relative;min-width:0}
/* 节点用 3px 白色外圈"压"在线上：看起来是线穿过节点，不是节点浮在线旁边。
   top:0 + 高 17px → 中心 8.5px；容器 padding-top 26px → 中心落在 34.5px，
   与 top:34px 的线对齐。 */
body.p-home .ph-fw-n{
    position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
    background:var(--d-brand);color:#fff;
    font-size:9px!important;font-weight:700;letter-spacing:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px var(--paper);
    font-variant-numeric:tabular-nums;
    transition:box-shadow .26s var(--ease);
}
body.p-home .ph-fw-i:hover .ph-fw-n{box-shadow:0 0 0 3px var(--paper),0 0 0 7px rgba(0,118,255,.18)}
body.p-home .ph-fw-t{
    margin:0;font-size:15px!important;font-weight:600;color:var(--d-t1);
    line-height:1.45;letter-spacing:-.01em;
}
body.p-home .ph-fw-eq{
    display:inline-block;margin-top:7px;padding:3px 7px;
    font-size:10.5px!important;font-weight:600;letter-spacing:.04em;
    color:var(--d-brand);background:var(--brand-l);border-radius:2px;
}
body.p-home .ph-fw-p{
    margin:9px 0 0;font-size:13px!important;line-height:1.72;color:var(--d-t2);
}

/* ───────────── 40.4 08 客户评价：一行多列左右滚动 ─────────────
   一屏 3 张（平板 2 / 手机 1）。卡片因此不用再被压到 3 行以内，
   可以回到正常阅读高度。收口块也不需要了 —— 能滚本身就是"还有更多"。 */
body.p-home .ph-q2{position:relative}
body.p-home .ph-q2-track{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    padding:2px 2px 8px;
    /* 深色底上那条默认滚动条会在卡片下沿顶出一条亮边，藏掉 */
    scrollbar-width:none;-ms-overflow-style:none;
}
body.p-home .ph-q2-track::-webkit-scrollbar{display:none}
body.p-home .ph-q2-i{
    flex:0 0 calc((100% - 28px) / 3);
    scroll-snap-align:start;
    margin:0;padding:22px 22px 18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-top:2px solid var(--d-brand);
    border-radius:2px;
    display:flex;flex-direction:column;
    transition:background .26s var(--ease),border-color .26s var(--ease);
}
body.p-home .ph-q2-i:hover{
    background:rgba(255,255,255,.085);
    border-color:rgba(255,255,255,.22);border-top-color:var(--d-brand);
}
body.p-home .ph-q2-q{
    margin:0;font-size:14.5px!important;line-height:1.82;
    color:rgba(255,255,255,.9);flex:1 1 auto;
}
body.p-home .ph-q2-b{
    display:grid;grid-template-columns:34px minmax(0,1fr) auto;
    gap:11px;align-items:center;
    margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
}
/* 头像用行业首字（光伏 → 光）：库里没有头像图，用纯色圆牌替代，
   也顺带把"这是哪个行业"再强调一次。 */
body.p-home .ph-q2-av{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(140deg,var(--d-brand),#0055c4);
    color:#fff;font-size:14px!important;font-weight:600;
}
body.p-home .ph-q2-who{display:block;min-width:0}
body.p-home .ph-q2-co{
    display:block;font-size:13.5px!important;font-weight:600;color:#fff;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.p-home .ph-q2-pe{
    display:block;margin-top:3px;font-size:11.5px!important;
    color:rgba(255,255,255,.5);
}
body.p-home .ph-q2-star{
    font-size:12px!important;color:#ffb400;letter-spacing:1px;white-space:nowrap;
}
body.p-home .ph-q2-tag{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
body.p-home .ph-q2-tag i{
    font-style:normal;font-size:11px!important;color:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:3px 8px;
}
/* 箭头落在 --band 的留白里，不压在卡片上 */
body.p-home .ph-q2-p{
    position:absolute;top:50%;margin-top:-18px;z-index:3;
    width:36px;height:36px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(10,26,46,.72);color:#fff;
    border:1px solid rgba(255,255,255,.22);border-radius:50%;
    font-size:14px;cursor:pointer;
    transition:background .24s var(--ease),border-color .24s var(--ease),opacity .24s var(--ease);
}
body.p-home .ph-q2-p--l{left:calc(-1 * clamp(20px,4.4vw,56px) * .62)}
body.p-home .ph-q2-p--r{right:calc(-1 * clamp(20px,4.4vw,56px) * .62)}
body.p-home .ph-q2-p:hover{background:var(--d-brand);border-color:var(--d-brand)}
/* 到边界置灰而不是隐藏：隐藏会让卡片区宽度跳变 */
body.p-home .ph-q2-p:disabled{opacity:.3;cursor:default}
body.p-home .ph-q2-dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
body.p-home .ph-q2-dot{
    width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.22);
    transition:width .26s var(--ease),background .26s var(--ease);
}
body.p-home .ph-q2-dot.is-on{width:18px;background:var(--d-brand)}

/* ───────────── 40.5 10 左栏：公司动态 ─────────────
   v16 是「白卡片 + 行表」，两栏都是文字块，整块看过去没有视觉落点。
   v17：头条卡左侧一块蓝色日期砖（日 + 年月），列表每行左侧一条竖线
   （hover 由灰变蓝并长高）—— 用"块面 + 线"造出层次。 */
body.p-home .ph-nw-lead{
    display:grid;grid-template-columns:60px minmax(0,1fr) 18px;
    gap:14px;align-items:center;
    padding:14px;background:#fff;border:1px solid var(--line);
    text-decoration:none;
    transition:box-shadow .26s var(--ease),border-color .26s var(--ease);
}
body.p-home .ph-nw-lead:hover{
    box-shadow:0 16px 32px -24px rgba(13,28,48,.3);border-color:var(--line-2);
}
body.p-home .ph-nw-date{
    display:block;padding:8px 0 7px;text-align:center;border-radius:2px;
    background:linear-gradient(160deg,var(--d-brand),#0055c4);color:#fff;
}
body.p-home .ph-nw-dd{
    display:block;font-size:21px!important;font-weight:700;line-height:1;
    font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-ym{
    display:block;margin-top:4px;font-size:10px!important;opacity:.82;
    font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-body{display:block;min-width:0}
body.p-home .ph-nw-t{
    font-size:14.5px!important;font-weight:600;color:var(--d-t1);
    line-height:1.58;letter-spacing:-.01em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.p-home .ph-nw-tag{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
body.p-home .ph-nw-tg{
    font-style:normal;font-size:10.5px!important;color:var(--d-t2);
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:2px;padding:2px 7px;white-space:nowrap;
}
body.p-home .ph-nw-go{
    font-size:14px!important;color:var(--line-2);
    transition:color .24s var(--ease),transform .24s var(--ease);
}
body.p-home .ph-nw-lead:hover .ph-nw-go{color:var(--d-brand);transform:translateX(3px)}

body.p-home .ph-nw-list{list-style:none;margin:8px 0 0;padding:0}
body.p-home .ph-nw-li{border-top:1px solid var(--line)}
body.p-home .ph-nw-a{
    position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 14px;
    gap:10px;align-items:baseline;padding:11px 0 11px 13px;text-decoration:none;
}
/* 左侧竖线是这一栏唯一的"动"：hover 时由灰变蓝并长高一截 */
body.p-home .ph-nw-a::before{
    content:'';position:absolute;left:0;top:50%;margin-top:-7px;
    width:2px;height:14px;background:var(--line-2);
    transition:height .24s var(--ease),margin-top .24s var(--ease),background .24s var(--ease);
}
body.p-home .ph-nw-a:hover::before{height:26px;margin-top:-13px;background:var(--d-brand)}
body.p-home .ph-nw-d2{
    font-size:11.5px!important;color:var(--d-t3);
    font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* 两行 clamp：这批标题 22–35 字，44px 日期列 + 一行只放得下 22 字，
   一行会被截成"…高温烘…"。 */
body.p-home .ph-nw-t2{
    font-size:13.5px!important;color:var(--d-t1);line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .22s var(--ease);
}
body.p-home .ph-nw-a:hover .ph-nw-t2{color:var(--d-brand)}
body.p-home .ph-nw-ar{
    font-size:12px!important;color:var(--line-2);
    transition:color .22s var(--ease),transform .22s var(--ease);
}
body.p-home .ph-nw-a:hover .ph-nw-ar{color:var(--d-brand);transform:translateX(3px)}
body.p-home .ph-nw-all{
    display:inline-flex;align-items:center;gap:7px;margin-top:18px;
    padding:9px 15px;font-size:12.5px!important;color:var(--d-brand);
    border:1px solid var(--line-2);border-radius:2px;text-decoration:none;
    transition:border-color .24s var(--ease),background .24s var(--ease);
}
body.p-home .ph-nw-all:hover{border-color:var(--d-brand);background:var(--brand-l)}
body.p-home .ph-nw-ai{font-size:12px!important}

/* ───────────── 40.6 10 右栏：问答流（多条向上滚动） ─────────────
   手风琴要读者自己一条条点，在首页上 90% 的人不会点 —— 答案永远不露面。
   改成一组 Q/A 卡片在固定高度的窗口里持续上滚，hover 暂停。
   Q 是蓝色圆标 + 加粗问题，A 是灰底气泡，扫一眼就知道是"一问一答"。

   无缝循环：内容在 PHP 里渲染两遍，动画走到 -50% 时正好回到起点。
   轨道必须是 flex 列 —— 普通块级容器里最后一项的 margin-bottom 会
   和父容器折叠掉，高度少 10px，每圈跳一下。flex 项的 margin 不折叠。 */
body.p-home .ph-qa{position:relative}
body.p-home .ph-qa-win{
    position:relative;height:clamp(360px,30vw,438px);overflow:hidden;
    /* 上下 mask 淡出：进出窗口的卡片看起来是"流"，不是被硬截断 */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 40px),transparent 100%);
}
body.p-home .ph-qa-track{
    display:flex;flex-direction:column;
    animation:phQaRoll 54s linear infinite;
    will-change:transform;
}
@keyframes phQaRoll{
    from{transform:translateY(0)}
    to{transform:translateY(-50%)}
}
body.p-home .ph-qa-win:hover .ph-qa-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
    body.p-home .ph-qa-track{animation:none}
    body.p-home .ph-qa-win{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
body.p-home .ph-qa-i{
    margin:0 0 10px;padding:14px 16px 13px;
    background:#fff;border:1px solid var(--line);border-left:2px solid var(--line-2);
    border-radius:2px;
    transition:border-left-color .24s var(--ease),box-shadow .24s var(--ease);
}
body.p-home .ph-qa-i:hover{
    border-left-color:var(--d-brand);
    box-shadow:0 12px 28px -22px rgba(13,28,48,.28);
}
body.p-home .ph-qa-q{display:flex;gap:9px;align-items:flex-start}
body.p-home .ph-qa-ic{
    flex:0 0 auto;width:18px;height:18px;border-radius:50%;
    background:var(--d-brand);color:#fff;
    font-size:10px!important;font-weight:700;font-style:normal;
    display:inline-flex;align-items:center;justify-content:center;
    margin-top:3px;
}
body.p-home .ph-qa-ic--a{
    background:#fff;border:1px solid var(--line-2);color:var(--d-brand);
}
body.p-home .ph-qa-qt{
    font-size:14px!important;font-weight:600;color:var(--d-t1);
    line-height:1.6;letter-spacing:-.01em;
}
body.p-home .ph-qa-a{
    display:flex;gap:9px;align-items:flex-start;
    margin-top:10px;padding:10px 12px;
    background:var(--paper-2);border-left:2px solid var(--line-2);border-radius:2px;
}
body.p-home .ph-qa-at{
    font-size:12.5px!important;font-style:normal;color:var(--d-t2);line-height:1.8;
}
body.p-home .ph-qa-cat{
    display:inline-block;margin-top:10px;
    font-size:10.5px!important;color:var(--d-t3);
    padding:2px 8px;border:1px solid var(--line);border-radius:2px;
}
body.p-home .ph-duo-n{font-size:11.5px!important;color:var(--d-t3)}

/* ───────────── 40.7 响应式 ─────────────
   全部带 body.p-home：不带前缀的规则会被同名的桌面规则（0,2,1）压掉。 */
@media(max-width:1240px){
    body.p-home .ph-sol{gap:8px}
    body.p-home .ph-sol-i{padding:13px 11px 12px}
    body.p-home .ph-fw{height:clamp(252px,25vw,312px)}
}
@media(max-width:1040px){
    /* 5 列 → 4 列：13 项 + 收口块 span 3 = 16，正好 4 行 */
    body.p-home .ph-sol{grid-template-columns:repeat(4,minmax(0,1fr))}
    body.p-home .ph-sol-cta{grid-column:span 3}
    /* 工序轴换行后就不再是一条横线了，改成每张卡自己带一条上边线 */
    body.p-home .ph-fw-flow{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:26px 18px;padding-top:8px;
    }
    body.p-home .ph-fw-flow::before{display:none}
    body.p-home .ph-fw-i{border-top:1px solid var(--line);padding-top:24px}
    body.p-home .ph-fw-n{top:-9px}
    /* 评价 3 张 → 2 张 */
    body.p-home .ph-q2-i{flex:0 0 calc((100% - 14px) / 2)}
}
@media(max-width:900px){
    body.p-home .ph-sol{grid-template-columns:repeat(3,minmax(0,1fr))}
    body.p-home .ph-sol-cta{grid-column:span 2}
    /* 双栏并成一栏：900 以下两栏各自只剩 380px，卡片会被压成一竖条 */
    body.p-home .ph-duo{grid-template-columns:minmax(0,1fr);gap:34px}
    body.p-home .ph-qa-win{height:clamp(320px,44vw,400px)}
}
@media(max-width:820px){
    /* 手机上箭头会顶出留白，且手指本来就是滑的 —— 直接藏 */
    body.p-home .ph-q2-p{display:none}
    /* 图墙退回 2 列：4 列在 820 下单格只剩 90px，图看不清 */
    body.p-home .ph-fw{
        height:auto;grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:none;
    }
    body.p-home .ph-fw-big{grid-column:span 2;grid-row:auto}
    body.p-home .ph-fw figure{aspect-ratio:16/10}
}
@media(max-width:760px){
    body.p-home .ph-sol{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.p-home .ph-sol-cta{grid-column:span 1}
    body.p-home .ph-fw-flow{grid-template-columns:minmax(0,1fr);gap:0}
    body.p-home .ph-fw-i{padding:16px 0}
    body.p-home .ph-q2-i{flex:0 0 100%}
    body.p-home .ph-nw-lead{grid-template-columns:54px minmax(0,1fr) 16px;gap:11px;padding:12px}
}
@media(max-width:520px){
    /* 行业格保持 2 列：降到 1 列后 13 个行业变成 13 条通栏，
       单列滚动太久；2 列各 170px，标题一行、工况两行刚好放下。
       材料标签在 170px 里必然折行 —— 放开 nowrap，别让它被截成"PTFE 高…"。 */
    body.p-home .ph-sol{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.p-home .ph-sol-m{white-space:normal;line-height:1.45}
    body.p-home .ph-sol-i{padding:12px 10px 11px}
    body.p-home .ph-sol-t{font-size:14px}
    body.p-home .ph-sol-c{font-size:12.5px}
    body.p-home .ph-fw{grid-template-columns:minmax(0,1fr)}
    body.p-home .ph-fw-big{grid-column:span 1}
    body.p-home .ph-fw-s:last-child{grid-column:span 1}
}

/* ══════════════════════════════════════════════════════════════════════════
   41. v18（2026-09-26）—— 首屏轮播 + 四个板块精修
   ══════════════════════════════════════════════════════════════════════════

   1 01 首屏：左文案右单图 → 全宽图片轮播（4 张产线实拍）+ 底部信息条。
     删掉大标题、长说明段与四格数字条（那三块首屏就吃掉 750px），
     只留一行英文小标 + 两个按钮落在 72px 的信息条里。
     实测首屏 748px → 约 510px。
   2 05 生产实力：去掉图墙下的"工序轴"（4 个蓝色标签 涂覆产线01/02 …）。
     改成「左侧车间大图 + 右侧 4 条设备清单」，设备文案取自 mt_equipment，
     后台改设备页会同步改首页；不再出现任何 01–04 编号与蓝色标签块。
   3 06 认证资质：卡面从"排版画出来的证件"换成**图片**（mt_cert.img，
     为空时用 static/img/cert/c1–c6.jpg 的证件底图占位），卡上不放任何文字；
     过渡从 .52s 拉到 1.05s、旋转角 7° → 4°、远景卡加 1.7px 虚化，
     整体从"啪一下换位"变成柔和推进。
   4 09 合作流程：时间轴精修 —— 线段换渐变、节点加白色垫圈与外发光、
     hover 时线段从左向右填蓝、周期标签从灰底改成品牌浅蓝底。
   5 10 资讯与问答：去装饰化 —— 左栏去掉蓝色日期砖与标签胶囊（改细体大号
     日期 + 细线分隔），右栏问答流去掉白卡边框/灰底气泡/分类胶囊，
     改成"细线分隔 + 缩进答案"，字号上调一档，整块更透气。

   特异性纪律：所有断点里的规则一律带 body.p-home 前缀。
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────── 41.1 01 首屏：全宽图片轮播 ───────────── */
body.p-home .ph-hero{background:var(--d-ink)}
/* 首屏不再需要织物网格与右下角径向光：图把整块盖住之后，这两层
   只在信息条区域露出来，和图文案打架。 */
body.p-home .ph-hero::before,
body.p-home .ph-hero::after{display:none}
body.p-home .ph-hs{position:relative;z-index:2}

body.p-home .ph-hs-vp{
    position:relative;overflow:hidden;
    height:clamp(288px,32vw,452px);
    background:var(--d-ink-2);
}
body.p-home .ph-hs-track{
    display:flex;height:100%;
    transition:transform .86s cubic-bezier(.33,.02,.16,1);
    will-change:transform;
}
body.p-home .ph-hs-i{
    position:relative;flex:0 0 100%;height:100%;
    display:block;overflow:hidden;text-decoration:none;
}
/* 未激活的图停在 1.06，切到激活后 7.4s 缓缓回到 1 —— 一段慢速推移，
   比"切过去就是一张死图"柔和得多。 */
body.p-home .ph-hs-i img{
    width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.06);
}
body.p-home .ph-hs-i.is-on img{
    transform:scale(1);
    transition:transform 7.4s cubic-bezier(.2,.4,.3,1);
}
/* 左侧压暗：文案落在图上也要读得清；右侧留亮，图本身是主角 */
body.p-home .ph-hs-sc{
    position:absolute;inset:0;pointer-events:none;
    background:
        linear-gradient(90deg,rgba(7,18,33,.84) 0,rgba(7,18,33,.5) 34%,rgba(7,18,33,.04) 66%),
        linear-gradient(0deg,rgba(7,18,33,.6) 0,rgba(7,18,33,0) 48%);
}
body.p-home .ph-hs-cap{
    position:absolute;left:clamp(20px,4.4vw,56px);right:clamp(20px,4.4vw,56px);
    bottom:clamp(20px,2.4vw,30px);max-width:min(560px,74%);
    opacity:0;transform:translateY(14px);
    transition:opacity .5s var(--ease),transform .62s var(--ease);
}
body.p-home .ph-hs-i.is-on .ph-hs-cap{opacity:1;transform:none;transition-delay:.2s}
body.p-home .ph-hs-cap b{
    display:block;font-size:clamp(19px,1.95vw,26px)!important;
    font-weight:500;letter-spacing:-.02em;line-height:1.34;color:#fff;
}
body.p-home .ph-hs-cap i{
    display:block;margin-top:9px;font-size:13.5px!important;
    font-style:normal;line-height:1.7;color:rgba(255,255,255,.7);
}
body.p-home .ph-hs-cap i::before{
    content:'';display:inline-block;width:16px;height:1px;
    background:var(--d-brand);vertical-align:middle;margin-right:9px;
}

/* 箭头：玻璃圆片压在图上，落在 --band 留白里 */
body.p-home .ph-hs-p{
    position:absolute;top:50%;margin-top:-22px;z-index:4;
    width:44px;height:44px;padding:0;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(9,22,40,.34);color:#fff;
    border:1px solid rgba(255,255,255,.26);
    font-size:15px;line-height:1;cursor:pointer;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:background .26s var(--ease),border-color .26s var(--ease),transform .26s var(--ease);
}
body.p-home .ph-hs-p--l{left:clamp(14px,1.6vw,28px)}
body.p-home .ph-hs-p--r{right:clamp(14px,1.6vw,28px)}
body.p-home .ph-hs-p:hover{background:var(--d-brand);border-color:var(--d-brand);transform:scale(1.06)}
body.p-home .ph-hs-p:active{transform:scale(.97)}

/* 底部信息条：一行英文小标 + 进度条式指示点 + 两个按钮 */
body.p-home .ph-hs-bar{background:var(--d-ink);border-top:1px solid rgba(255,255,255,.09)}
body.p-home .ph-hs-barin{
    max-width:var(--wrap);margin:0 auto;
    padding:13px var(--band);
    min-height:70px;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:clamp(16px,2.4vw,40px);
}
body.p-home .ph-hs-ey{
    display:inline-flex;align-items:center;gap:11px;
    font-size:11.5px!important;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;
}
body.p-home .ph-hs-ey::before{content:'';width:26px;height:1px;background:var(--d-brand)}
body.p-home .ph-hs-dots{display:flex;align-items:center;gap:8px;justify-content:center}
body.p-home .ph-hs-dot{
    width:26px;height:3px;padding:0;border:0;border-radius:2px;
    background:rgba(255,255,255,.2);cursor:pointer;
    transition:background .3s var(--ease),width .3s var(--ease);
}
body.p-home .ph-hs-dot.is-on{background:var(--d-brand);width:44px}
body.p-home .ph-hs-act{display:flex;align-items:center;gap:10px}
body.p-home .ph-hs-bar .ph-btn{
    height:44px;padding:0 22px;font-size:13.5px!important;white-space:nowrap;
}

/* ───────────── 41.2 05 生产实力：车间大图 + 设备清单 ─────────────
   v17 那堵 4 图墙 + 下面 4 个蓝色标签（涂覆产线 01/02 …）是两套重复表达：
   图说"车间是真的"，标签说"这是第几道工序"。去掉标签那排，
   把设备信息并到右边做成清单 —— 一屏之内左右读完。 */
body.p-home .ph-fw2{
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:clamp(20px,2.6vw,44px);align-items:stretch;
}
body.p-home .ph-fw2-fig{
    position:relative;margin:0;overflow:hidden;border-radius:2px;
    background:var(--d-ink-2);min-height:clamp(232px,23vw,336px);
}
body.p-home .ph-fw2-fig img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .8s var(--ease);
}
body.p-home .ph-fw2-fig:hover img{transform:scale(1.035)}
body.p-home .ph-fw2-cap{
    position:absolute;left:0;right:0;bottom:0;
    padding:26px 16px 12px;font-size:12px!important;letter-spacing:.04em;
    color:rgba(255,255,255,.92);
    background:linear-gradient(0deg,rgba(10,26,46,.92),rgba(10,26,46,0));
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.p-home .ph-fw2-list{
    list-style:none;margin:0;padding:0;
    display:grid;grid-auto-rows:minmax(0,1fr);
}
body.p-home .ph-fw2-i{
    position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;
    padding:14px 0 14px 20px;border-top:1px solid var(--line);min-width:0;
}
body.p-home .ph-fw2-i:first-child{border-top:0}
/* 左侧那条 2px 短线是整块唯一的"动"：hover 由灰变蓝并长高一截 */
body.p-home .ph-fw2-i::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:2px;height:16px;background:var(--line-2);border-radius:1px;
    transition:height .3s var(--ease),background .3s var(--ease);
}
body.p-home .ph-fw2-i:hover::before{height:34px;background:var(--d-brand)}
body.p-home .ph-fw2-t{
    margin:0;font-size:15px!important;font-weight:600;color:var(--ink);
    letter-spacing:-.01em;line-height:1.45;
    transition:color .24s var(--ease);
}
body.p-home .ph-fw2-i:hover .ph-fw2-t{color:var(--d-brand)}
body.p-home .ph-fw2-p{
    margin:0;font-size:12.8px!important;line-height:1.78;color:var(--d-t2);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ───────────── 41.3 06 认证资质：图片卡 + 柔和推进 ─────────────
   卡面只放图（源：mt_cert.img，空则用 static/img/cert/cN.jpg），
   机构与编号不放图上 —— 那样每张卡都要"读"，不是"看"。 */
body.p-home .ph-cf-stage{
    height:clamp(296px,25vw,376px);
    perspective:2000px;
}
body.p-home .ph-cf-i{
    width:clamp(228px,21.5vw,272px);
    margin-left:calc(clamp(228px,21.5vw,272px) / -2);
    transform-origin:50% 50%;
    /* v16 的 .52s 是"啪"地一下到位；1.05s + 缓入缓出让整排像水面推开。 */
    transition:transform 1.05s cubic-bezier(.25,.6,.3,1),
               opacity 1.05s cubic-bezier(.25,.6,.3,1),
               filter 1.05s cubic-bezier(.25,.6,.3,1);
}
body.p-home .ph-cf-pic{
    position:relative;height:100%;overflow:hidden;border-radius:2px;
    background:#fff;border:1px solid var(--line);
    box-shadow:0 22px 46px -28px rgba(13,28,48,.4);
    transition:box-shadow 1.05s var(--ease);
}
body.p-home .ph-cf-pic img{width:100%;height:100%;object-fit:cover;display:block}
body.p-home .ph-cf-pic::after{
    /* 证件纸的右下压暗：图本身太平，缺一点厚度 */
    content:'';position:absolute;inset:0;pointer-events:none;
    box-shadow:inset -1px -1px 0 rgba(13,28,48,.06);
}
body.p-home .ph-cf-i.is-act .ph-cf-pic{box-shadow:0 38px 72px -34px rgba(13,28,48,.5)}
/* 走廊里"远处"的证轻微虚化：这是景深，比单纯缩小更像真实透视 */
body.p-home .ph-cf-i.is-far .ph-cf-pic{filter:blur(1.7px)}
body.p-home .ph-cf-foot{margin-top:clamp(18px,2vw,26px)}
body.p-home .ph-cf-cap b{font-size:14px!important}
body.p-home .ph-cf-cap span{font-size:12.5px!important}

/* ───────────── 41.4 09 合作流程：时间轴精修 ───────────── */
body.p-home .ph-step-d{
    position:relative;height:1px;margin-bottom:22px;
    background:linear-gradient(90deg,rgba(0,118,255,.3),var(--line-2) 62%,var(--line-2));
}
/* hover 时线段从左往右填蓝：鼠标停在哪一步，进度就走到哪一步 */
body.p-home .ph-step-d::after{
    content:'';position:absolute;left:0;top:-1px;width:100%;height:3px;border-radius:2px;
    background:var(--d-brand);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .55s cubic-bezier(.3,.6,.3,1);
}
body.p-home .ph-step-i:hover .ph-step-d::after{transform:scaleX(1)}
body.p-home .ph-step-d i{
    width:11px;height:11px;top:-5px;
    box-shadow:0 0 0 4px var(--paper);
    transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
body.p-home .ph-step-i:hover .ph-step-d i{
    box-shadow:0 0 0 4px var(--paper),0 0 0 9px rgba(0,118,255,.14);
    transform:scale(1.12);
}
body.p-home .ph-step-n{font-size:11.5px!important;letter-spacing:.18em}
body.p-home .ph-step-t{
    margin:9px 0 8px;font-size:16.5px!important;
    transition:color .24s var(--ease);
}
body.p-home .ph-step-i:hover .ph-step-t{color:var(--d-brand)}
body.p-home .ph-step-p{font-size:12.8px!important;line-height:1.82;color:var(--d-t2)}
body.p-home .ph-step-day{
    font-size:11px!important;font-weight:600;letter-spacing:.02em;
    color:var(--d-brand);background:var(--brand-l);
    border:0;border-radius:2px;padding:5px 11px;
    transition:background .24s var(--ease),color .24s var(--ease);
}
body.p-home .ph-step-i:hover .ph-step-day{background:var(--d-brand);color:#fff}

/* ───────────── 41.5 10 资讯与问答：去装饰化 ─────────────
   v17 左栏有白卡 + 蓝色日期砖 + 标签胶囊，右栏有白卡 + 左边框 + 灰底气泡 +
   分类胶囊 —— 一屏 6 种容器，读起来是"一堆盒子"。v18 只留细线：
   日期改成细体大号、答案取消底色、分类胶囊收掉，字号整体上调一档。 */
body.p-home .ph-duo{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(30px,3.6vw,64px);
}
body.p-home .ph-duo-h{padding-bottom:12px;margin-bottom:16px}
body.p-home .ph-duo-h b{font-size:15.5px!important}
body.p-home .ph-duo-h b::before{
    content:'';display:inline-block;width:3px;height:14px;border-radius:1px;
    background:var(--d-brand);margin-right:9px;vertical-align:-1px;
}
body.p-home .ph-duo-h a{font-size:12.5px!important}

body.p-home .ph-nw-lead{
    grid-template-columns:52px minmax(0,1fr) 16px;
    gap:16px;align-items:start;
    padding:0 0 18px;background:none;border:0;
    border-bottom:1px solid var(--line);
}
body.p-home .ph-nw-lead:hover{box-shadow:none;border-bottom-color:var(--d-brand)}
body.p-home .ph-nw-date{background:none;color:var(--d-t3);text-align:left;padding:2px 0 0;border-radius:0}
body.p-home .ph-nw-dd{font-size:25px!important;font-weight:300;color:var(--ink);letter-spacing:-.02em}
body.p-home .ph-nw-ym{font-size:10.5px!important;margin-top:6px;color:var(--d-t3);letter-spacing:.08em;opacity:1}
body.p-home .ph-nw-t{font-size:15.5px!important;font-weight:600;line-height:1.62}
body.p-home .ph-nw-tag{display:none}
body.p-home .ph-nw-go{margin-top:3px}
body.p-home .ph-nw-list{margin:0}
body.p-home .ph-nw-li:first-child{border-top:0}
body.p-home .ph-nw-a{padding:13px 0 13px 14px;grid-template-columns:46px minmax(0,1fr) 14px}
body.p-home .ph-nw-t2{font-size:13.5px!important}
body.p-home .ph-nw-all{
    border:0;padding:0;margin-top:16px;
    font-size:13px!important;font-weight:600;
}
body.p-home .ph-nw-all:hover{background:none;border:0}

body.p-home .ph-qa-win{height:clamp(336px,27vw,412px)}
body.p-home .ph-qa-i{
    margin:0;padding:15px 0 16px;
    background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
}
body.p-home .ph-qa-i:hover{box-shadow:none}
body.p-home .ph-qa-q{gap:12px}
body.p-home .ph-qa-ic{
    width:20px;height:20px;border-radius:5px;
    font-size:10.5px!important;margin-top:2px;
}
body.p-home .ph-qa-ic--a{background:none;border:1px solid var(--line-2);color:var(--d-t3)}
body.p-home .ph-qa-qt{font-size:15px!important;line-height:1.62;transition:color .24s var(--ease)}
body.p-home .ph-qa-i:hover .ph-qa-qt{color:var(--d-brand)}
body.p-home .ph-qa-a{margin-top:10px;padding:0;background:none;border:0}
body.p-home .ph-qa-at{font-size:13px!important;line-height:1.84;color:var(--d-t2)}
body.p-home .ph-qa-cat{display:none}

/* ───────────── 41.6 无动画偏好 ───────────── */
@media (prefers-reduced-motion:reduce){
    body.p-home .ph-hs-track{transition:none}
    body.p-home .ph-hs-i img,
    body.p-home .ph-hs-i.is-on img{transition:none;transform:none}
    body.p-home .ph-hs-cap{opacity:1;transform:none;transition:none}
    body.p-home .ph-cf-i{transition:none}
    body.p-home .ph-cf-i.is-far .ph-cf-pic{filter:none}
}

/* ───────────── 41.7 响应式（一律带 body.p-home） ───────────── */
@media(max-width:1240px){
    body.p-home .ph-fw2{gap:clamp(18px,2.2vw,30px)}
    body.p-home .ph-cf-i{
        width:clamp(220px,20.5vw,258px);
        margin-left:calc(clamp(220px,20.5vw,258px) / -2);
    }
}
@media(max-width:1040px){
    body.p-home .ph-hs-vp{height:clamp(272px,36vw,404px)}
    body.p-home .ph-hs-barin{grid-template-columns:minmax(0,1fr) auto;gap:14px}
    body.p-home .ph-hs-ey{display:none}
    body.p-home .ph-hs-dots{justify-content:flex-start}
    body.p-home .ph-cf-stage{height:clamp(272px,29vw,344px)}
    body.p-home .ph-step-p{font-size:12.5px!important}
}
@media(max-width:900px){
    body.p-home .ph-fw2{grid-template-columns:minmax(0,1fr);gap:22px}
    body.p-home .ph-fw2-fig{min-height:clamp(200px,42vw,300px)}
    body.p-home .ph-duo{grid-template-columns:minmax(0,1fr);gap:34px}
    body.p-home .ph-qa-win{height:clamp(320px,48vw,392px)}
}
@media(max-width:820px){
    /* 手机上箭头会顶到文案，且手指本来就是滑的 —— 直接藏 */
    body.p-home .ph-hs-p{display:none}
    body.p-home .ph-hs-barin{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px var(--band)}
    body.p-home .ph-hs-dots{justify-content:center}
    body.p-home .ph-hs-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    body.p-home .ph-hs-bar .ph-btn{width:100%;padding:0 12px}
}
@media(max-width:760px){
    body.p-home .ph-qa-win{height:clamp(300px,64vw,380px)}
}
@media(max-width:520px){
    body.p-home .ph-hs-vp{height:clamp(228px,62vw,300px)}
    body.p-home .ph-hs-cap{max-width:100%;bottom:16px}
    body.p-home .ph-hs-cap b{font-size:17px!important}
    body.p-home .ph-hs-cap i{font-size:12.5px!important;margin-top:7px}
    body.p-home .ph-hs-bar .ph-btn{height:42px;font-size:13px!important}
    body.p-home .ph-cf-i{
        width:min(64vw,232px);
        margin-left:calc(min(64vw,232px) / -2);
    }
    body.p-home .ph-cf-stage{height:clamp(268px,88vw,336px)}
    body.p-home .ph-nw-lead{grid-template-columns:46px minmax(0,1fr) 14px;gap:12px}
    body.p-home .ph-nw-a{grid-template-columns:40px minmax(0,1fr) 12px;gap:9px}
}

/* ============================================================
   v19 增量（第 16 轮）—— v20 已回退其中三节，这里是清理后的版本
   ──────────────────────────────────────────────────────────
   保留（仍然有效）：
     42.1 认证资质卡去投影
     42.2 客户案例任何宽度都不掉行
     42.3 合作流程：01/02 序号进标题行
     42.4 资讯与问答：两栏等高
   已删除（v20 重做，见 _v20.css）：
     42.5 CTA 二维码独立白卡       → 改成与「获取报价」合并成一张询价卡
     42.6 页脚二维码 + fcon/fper   → 页脚去掉二维码，联系信息改 fcl 信息条
     42.4 里的新闻栏目胶囊/阅读量   → 客户反馈"冗余"，v20 重排公司动态
   删除原因不只是"换了写法"：这些规则都是 body.p-home 前缀（0,2,1），
   留着就会和新写的规则打架，等于给自己埋特异性地雷。
   ============================================================ */

/* ───────────── 42.1 06 认证资质：去投影（卡面只留图 + 1px 边框） ─────────────
   原来有三级阴影叠在图上：.ph-cf-pic 的常驻 22px 投影、激活卡的 38px 投影、
   以及 ::after 那条 inset -1px -1px 的右下暗边。
   单看一张是"厚度"，6 张塑料卡排开就是一层灰雾，把证件本身压脏了。
   全去掉，只留边框把卡从浅灰底上分出来。 */
body.p-home .ph-cf-pic{box-shadow:none}
body.p-home .ph-cf-i.is-act .ph-cf-pic{box-shadow:none}
body.p-home .ph-cf-pic::after{display:none}

/* ───────────── 42.2 07 客户案例：任何宽度都不掉行 ─────────────
   案例是 4 条（LIMIT 4）。v16 在 ≤1240 把它改成 3 列 —— 4 条排 3 列，
   第 4 个必然单独占第二行，右边空两格。
   已在 _v16.css 删掉那条 3 列规则，桌面上 4 列一直保持到 1040；
   1040 以下转 2 列（4÷2=2 行整齐）、760 以下转 1 列。
   通用判据：列数必须是条数的约数。 */
body.p-home .ph-cases{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1240px){
    /* v16 在这里把列数改成了 3 —— 保留这条覆盖，防止旧 CSS 被缓存时又掉行 */
    body.p-home .ph-cases{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ───────────── 42.3 09 合作流程：序号进标题行 ─────────────
   v18 的 01/02 是标题上方独立一行、11.5px 灰蓝字、字距 .16em ——
   读起来像一条分隔符，和它修饰的标题断开了联系。
   现在序号做成品牌蓝实心小方块，紧贴标题。
   周期标签**留在原位**（描述下方、底端对齐）：
   v19 曾经把它也挪进标题行，客户反馈"我没有要把最下面那行也放到上面，都错位了"。
   .ph-step-i 是纵向 flex、.ph-step-p 有 flex:1 撑开，
   所以标签自己就兜底，5 步的标签自然齐平 —— 不需要靠右对齐。 */
body.p-home .ph-step-h{
    display:flex;align-items:center;gap:9px;
    margin:0 0 10px;min-height:21px;
}
body.p-home .ph-step-h .ph-step-t{
    /* 原来是 h3，边距自带；进 flex 行后必须清零并允许收缩 */
    margin:0;flex:1 1 auto;min-width:0;
}
body.p-home .ph-step-n{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;min-width:24px;height:21px;padding:0 6px;
    font-size:11.5px!important;font-weight:700!important;
    letter-spacing:.04em;line-height:1;
    color:#fff;background:var(--d-brand);border-radius:3px;
    font-variant-numeric:tabular-nums;
    transition:background .24s,transform .24s;
}
body.p-home .ph-step-i:hover .ph-step-n{background:var(--ink);transform:translateY(-1px)}

/* ───────────── 42.4 10 资讯与问答：两栏等高 ─────────────
   给头条补了内容之后左栏会长高，而右栏的问答窗口高度是 clamp() 写死的
   → 两栏底边不齐，一屏里最显眼的就是这条参差的空隙。
   让右栏的窗口吃掉剩余高度（实测 1440/1024 两栏差 0，问答窗 389 → 541）。 */
body.p-home .ph-duo{align-items:stretch}
body.p-home .ph-faqwrap{display:flex;flex-direction:column}
body.p-home .ph-qa{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
body.p-home .ph-qa-win{flex:1 1 auto}

/* ───────────── 42.5 响应式 ───────────── */
@media(max-width:820px){
    /* 证书卡变窄，两侧的卡会挤到视口外，只留中间那张更干净 */
    body.p-home .ph-cf-stage{height:clamp(268px,50vw,320px)}
}
@media(max-width:760px){
    /* 窄屏标题行只放「序号 + 标题」两个元素，不放时效标签，
       所以不换行 —— 让标题在行内自己折行，序号始终紧贴标题左端。 */
    body.p-home .ph-step-h{flex-wrap:nowrap;gap:8px}
}
@media(prefers-reduced-motion:reduce){
    body.p-home .ph-step-n{transition:none}
    body.p-home .ph-step-i:hover .ph-step-n{transform:none}
}

/* ============================================================
   v20 增量（第 17 轮）—— 客户提的 8 件事
   ──────────────────────────────────────────────────────────
     ① 公司动态重排（去掉「企业新闻」冗余标注）        → 43.5
     ② 合作流程：时效标签回到底部（v19 理解错了）      → 43.4
     ③ 品类目录去掉「按品类」三字 + 重排                → 43.2
     ④ CTA 二维码与「获取报价」合并成一张询价卡         → 43.6
     ⑤ 页脚去掉二维码 + 联系我们重排                    → 43.7
     ⑥ 悬浮栏改纯图标 + 悬停弹层 + 新增邮箱             → 43.8
     ⑦ 导航滚动吸附顶部 + 产品卡去掉「可选规格 N 种」   → 43.1 / 43.3
     ⑧ 栏目页按首页语言统一 + 弱化字对比度修正          → 43.9 / 43.10
   ──────────────────────────────────────────────────────────
   纪律（每轮都要重申一次）：
   · 所有首页规则一律带 body.p-home 前缀（0,2,1）；
   · 所有内页规则一律带 body.p-inner 前缀（0,2,0+）；
   · 不带前缀会被 v9/v10 里那堆无前缀规则按特异性反压（v14 的老教训）；
   · 反过来说，带前缀的规则也会把媒体查询里的无前缀规则压掉，
     所以每个断点都必须在本文件里显式重设一遍。
   ============================================================ */

/* ═══════════════ 43.1 全局：弱化字对比度 + 页头吸附 ═══════════════ */

/* ── 对比度修正（客户："注意细节色系和文字颜色是否可见"）──
   实测原值在 #fff 底上的对比度：
     --d-t3 #8693a5 → 3.12:1   --ink-3 #8794a6 → 3.10:1   --muted #6d7f95 → 3.92:1
   WCAG AA 对小号正文要求 4.5:1 —— 这三个值都是"看得见但看不清"，
   而它们恰好用在面包屑、标签、日期、副标题这些 11–13px 的小字上。
   修正后：4.58 / 5.07 / 5.37，观感几乎不变，可读性过关。
   适用范围已核对：--ink-3 全部 16 处用法都是小字号文字，
   --d-t3 的用法都在浅色底上（深色区自己写 rgba 白），调深不会翻车。 */
:root{
    --ink-3:#5f7085;
    --muted:#5c6c80;
    --d-t3:#67778a;
}

/* ── 页头滚动吸附 ──
   site.js 早就在 scrollY > 6 时给 #header 挂 is-stuck，但 CSS 只加了条阴影，
   页头本身照旧滚走。这里补上定位：topbar（联系方式条）滚出去之后，
   主导航吸在视口顶部，长页面往下翻随时能换栏目。
   用 sticky 而不是 fixed —— fixed 会让页面瞬间跳高一个页头的高度。 */
.header{position:sticky;top:0;z-index:90}

/* 吸顶之后锚点跳转（#top / 页内目录）会把目标顶到页头底下，留出页头高度 */
html{scroll-padding-top:calc(var(--head-h) + 20px)}

.header.is-stuck{
    box-shadow:0 14px 30px -18px rgba(6,20,42,.5);
    border-bottom-color:transparent;
}

/* ── 深色区的次要文字提亮一档 ──
   .footer / .side-contact 上的 rgba(255,255,255,.52) 在 #0b1a2e 上只有 5.5:1，
   加上共享主机上的字体渲染，实际看着更灰。提到 .62 → 7.5:1。 */
.footer{--nv-txt-2:rgba(255,255,255,.62)}
.side-contact{--nv-txt-2:rgba(255,255,255,.7)}

/* ═══════════════ 43.2 首页 02：品类目录（去标签 + 等宽网格） ═══════════════ */

/* 客户点名去掉「按品类」三个字 —— 这一行本身就是一组品类链接，
   前面再挂一个"按品类"只是把同一句话说两遍。
   同时把原来的 inline-flex 长条改成等宽网格：桌面 5 列 × 2 行正好排满 10 个品类，
   每格一样宽、文字居中，才像一份"目录"，而不是一行没排完的标签。
   （≤1240 v16 也改成 5 列了，但它是网格 + 标签跨行；现在标签没了，
     断点里的 grid-template-columns 必须在本文件重设，否则被上面这条覆盖。） */
body.p-home .ph-chips{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;align-items:stretch;
    margin:0 0 clamp(20px,2.2vw,30px);
}
body.p-home .ph-chip{
    display:flex;align-items:center;justify-content:center;
    height:46px;padding:0 12px;
    border:1px solid var(--line);border-radius:2px;background:#fff;
    font-size:13.5px!important;font-weight:500;line-height:1.25;
    color:var(--ink-2);text-align:center;text-decoration:none;
    letter-spacing:0;white-space:normal;
    transition:color .22s,border-color .22s,background .22s,box-shadow .22s;
}
body.p-home .ph-chip:hover{
    color:var(--d-brand);border-color:var(--d-brand);background:var(--brand-l);
    box-shadow:0 10px 22px -16px rgba(0,118,255,.9);
}

/* ═══════════════ 43.3 首页 02：产品卡（去掉「可选规格 N 种」） ═══════════════ */

/* 客户："产品这 可选规格数量不用展现"。
   删掉之后底栏只剩「厚度区间 + 详情 →」两项，
   原来的 flex-wrap + gap 会把两项挤在左边，改成两端对齐撑满卡宽。 */
body.p-home .ph-feat-m{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;flex-wrap:nowrap;
}

/* ═══════════════ 43.4 首页 09：合作流程（时效标签回到底部） ═══════════════ */

/* v19 把周期标签也挪进了标题行，客户反馈"我没有要把最下面那行也放到上面，都错位了"。
   现在标签回到描述下方、贴底对齐 —— 这是 v15 原本的布局：
   .ph-step-i 是纵向 flex，.ph-step-p 有 flex:1 把剩余空间吃掉，
   所以 5 步的标签自然齐平，不需要任何 margin 技巧。
   这一版把标签外观从"灰底灰字"改成"品牌浅蓝底 + 蓝字"，
   hover 时整块反白，和序号方块形成呼应。 */
body.p-home .ph-step-day{
    align-self:flex-start;flex:0 0 auto;
    font-size:11.5px!important;font-weight:600;letter-spacing:.02em;
    color:var(--brand);background:var(--brand-l);
    border:1px solid var(--brand-l2);border-radius:2px;
    padding:5px 10px;white-space:nowrap;
    transition:color .24s,background .24s,border-color .24s;
}
body.p-home .ph-step-i:hover .ph-step-day{
    color:#fff;background:var(--brand);border-color:var(--brand);
}

/* ═══════════════ 43.5 首页 10：公司动态（重排） ═══════════════ */

/* 客户："排版设计越来越差了，不需要备注什么企业新闻，显得太冗余，需要重新设计调整"。
   上一版的问题不是不好看，是**把同一件事说了三遍**：
   左栏标题写着「公司动态」，头条又挂一个「企业新闻」胶囊，
   列表每条日期下面再塞一遍栏目名 —— 一屏里三次分类声明，
   而且字只有 10–11px，密到像噪点。
   重排思路：左栏只留三样真东西（日期 / 标题 / 摘要），
   靠字号差（40 / 16.5 / 12.5）和一条竖细线分层，不加任何容器。

   —— 头条 —— */
body.p-home .ph-nw-lead{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:clamp(16px,1.8vw,22px);align-items:stretch;
    padding:0 0 20px;background:none;border:0;
    border-bottom:1px solid var(--line);
}
body.p-home .ph-nw-lead:hover{box-shadow:none;border-bottom-color:var(--brand)}
/* 日期轨：大号细体日 + 年月，右侧一条竖细线把"日期"和"内容"分开 */
body.p-home .ph-nw-rail{
    flex:0 0 auto;min-width:62px;
    display:flex;flex-direction:column;align-items:center;
    padding-right:clamp(16px,1.8vw,22px);
    border-right:1px solid var(--line);
}
body.p-home .ph-nw-dd{
    font-size:40px!important;font-weight:200!important;line-height:1;
    color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-ym{
    margin-top:9px;font-size:10.5px!important;font-weight:600;
    color:var(--d-t3);letter-spacing:.1em;
}
body.p-home .ph-nw-body{display:flex;flex-direction:column;min-width:0}
body.p-home .ph-nw-t{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    font-size:16.5px!important;font-weight:600;line-height:1.55;
    color:var(--ink);letter-spacing:-.2px;
    transition:color .24s;
}
body.p-home .ph-nw-lead:hover .ph-nw-t{color:var(--brand)}
body.p-home .ph-nw-s{
    margin-top:9px;
    font-size:12.5px!important;line-height:1.78;color:var(--d-t2);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 底部一行：左边只留真实数字（阅读量），右边一个圆形箭头 */
body.p-home .ph-nw-foot{
    margin-top:auto;padding-top:14px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
}
body.p-home .ph-nw-view{
    font-size:11.5px!important;font-style:normal;
    color:var(--d-t3);font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-go{
    flex:0 0 auto;width:30px;height:30px;margin:0;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px!important;color:var(--d-t3);
    background:#fff;border:1px solid var(--line);border-radius:50%;
    transition:color .24s,background .24s,border-color .24s,transform .24s;
}
body.p-home .ph-nw-lead:hover .ph-nw-go{
    color:#fff;background:var(--brand);border-color:var(--brand);transform:translateX(2px);
}

/* —— 列表：一行一条，只靠细线分隔 —— */
body.p-home .ph-nw-list{margin:0;list-style:none;padding:0}
body.p-home .ph-nw-li{border-bottom:1px solid var(--line-2)}
body.p-home .ph-nw-li:last-child{border-bottom:0}
body.p-home .ph-nw-a{
    display:grid;grid-template-columns:52px minmax(0,1fr) 14px;
    align-items:center;gap:12px;padding:13px 0;
}
body.p-home .ph-nw-d2{
    font-size:12px!important;color:var(--d-t3);letter-spacing:.03em;
    font-variant-numeric:tabular-nums;transition:color .22s;
}
body.p-home .ph-nw-t2{
    font-size:13.5px!important;line-height:1.55;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .22s;
}
body.p-home .ph-nw-ar{font-size:12px!important;color:var(--line-2);transition:color .22s,transform .22s}
body.p-home .ph-nw-a:hover .ph-nw-d2{color:var(--brand)}
body.p-home .ph-nw-a:hover .ph-nw-t2{color:var(--brand)}
body.p-home .ph-nw-a:hover .ph-nw-ar{color:var(--brand);transform:translateX(3px)}

/* —— 查看全部：右对齐，用一条细线收口 —— */
body.p-home .ph-nw-all{
    display:flex;align-items:center;justify-content:flex-end;gap:7px;
    margin:0;padding:14px 0 0;border:0;border-top:1px solid var(--line-2);
    font-size:12.5px!important;font-weight:600;color:var(--d-brand);
}
body.p-home .ph-nw-all:hover{background:none;color:var(--d-brand-d)}
body.p-home .ph-nw-all .ph-nw-ai{font-style:normal;transition:transform .24s}
body.p-home .ph-nw-all:hover .ph-nw-ai{transform:translateX(3px)}

/* ═══════════════ 43.6 首页 11：CTA 合并询价卡 ═══════════════ */

/* 客户："这边二维码可以和获取报价[一起]设计"。
   v19 是三个并列单元 —— 电话、白色按钮、独立二维码白卡，
   二维码自己漂在最右边，跟按钮中间还空一条缝，看着是两个不相干的块。
   现在整块收进一张白卡，从上到下就是一次完整动作：
     电话（打给谁）→ 获取报价（填需求）→ 分隔线 → 微信扫码（发图纸）
   左右两列宽度比也从"1fr + 两小块"改成"文案 + 固定宽询价卡"，
   卡片宽度固定 320–372px，不会随视口把内部信息挤变形。 */
body.p-home .ph-cta-in{
    grid-template-columns:minmax(0,1fr) minmax(304px,372px);
    gap:clamp(26px,3.4vw,58px);align-items:center;
}
body.p-home .ph-cta-r{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:clamp(18px,1.8vw,24px);
    background:#fff;border-radius:4px;
    box-shadow:0 30px 66px -36px rgba(3,16,48,.8);
}
body.p-home .ph-cta-tel{display:block;text-align:left}
body.p-home .ph-cta-tel b{
    display:block;font-size:clamp(23px,2.1vw,27px)!important;font-weight:800;
    color:var(--ink);letter-spacing:-.6px;line-height:1.1;
    font-variant-numeric:tabular-nums;
}
body.p-home .ph-cta-tel span{
    display:block;margin-top:8px;
    font-size:11.5px!important;line-height:1.5;color:var(--d-t3);
}
body.p-home .ph-cta-btn{
    margin-top:16px;height:48px;border-radius:3px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--d-brand-d);color:#fff;text-decoration:none;
    font-size:15px!important;font-weight:700;letter-spacing:.02em;
    transition:background .24s,box-shadow .24s,transform .24s;
}
body.p-home .ph-cta-btn i{font-style:normal;transition:transform .24s}
body.p-home .ph-cta-btn:hover{
    background:#004fb8;transform:translateY(-1px);
    box-shadow:0 18px 32px -18px rgba(0,118,255,.95);
}
body.p-home .ph-cta-btn:hover i{transform:translateX(4px)}
/* 二维码：不再是"旁边一张卡"，而是询价卡的第三行 */
body.p-home .ph-cta-qr{
    display:flex;flex-direction:row;align-items:center;gap:13px;
    margin-top:16px;padding:16px 0 0;
    background:none;box-shadow:none;border:0;border-top:1px solid var(--line);
    border-radius:0;
}
body.p-home .ph-cta-qr img{
    flex:0 0 auto;width:76px;height:76px;display:block;
    padding:3px;background:#fff;border:1px solid var(--line);border-radius:3px;
}
body.p-home .ph-cta-qr-t{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
body.p-home .ph-cta-qr-t b{font-size:13px!important;font-weight:700!important;color:var(--ink);line-height:1}
body.p-home .ph-cta-qr-t em{font-style:normal;font-size:11.5px!important;line-height:1.6;color:var(--d-t3)}

/* ═══════════════ 43.7 页脚：去二维码 + 联系我们重排 ═══════════════ */

/* 客户："底部二维码算了不要放了，页面被挤压不好看"。
   v19 把 104px 的二维码横插在「联系我们」栏左侧，光图 + 间距就吃掉近 120px，
   联系人被挤成「张经 / 理」两行，号码也被迫折行 —— 整栏像一张没填完的表。
   现在：页脚不放码（职责交给右下角悬浮栏，鼠标移上去即出），
   四栏宽度重新分配，联系我们改成 fcl 信息条（标签定宽 + 值不换行）。
   注意：这段要在内页和外页都生效 —— footer 是全站公用组件。 */
body.p-home .footer-in,
body.p-inner .footer-in{
    grid-template-columns:1.46fr 1.12fr .76fr 1.34fr;
    gap:clamp(24px,3vw,46px);
}
.fcl{list-style:none;margin:0 0 16px;padding:0}
.fcl li{
    display:flex;align-items:center;gap:9px;
    padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px;line-height:1.5;
}
.fcl li:first-child{padding-top:0}
.fcl li:last-child{border-bottom:0}
.fcl li>b{
    flex:0 0 auto;
    font-size:10.5px!important;font-weight:500;letter-spacing:.02em;
    color:var(--nv-txt-2);
    border:1px solid var(--nv-line);border-radius:2px;padding:1px 6px;line-height:1.55;
}
.fcl li>.fcn{flex:0 0 auto;font-size:13px!important;color:rgba(255,255,255,.86);white-space:nowrap}
/* 号码：等宽数字 + 不换行，避免窄栏里被拆成两行 */
body.p-home .footer .fcl a,
body.p-inner .footer .fcl a{
    font-size:13.5px!important;font-weight:700;color:#fff;white-space:nowrap;
    font-variant-numeric:tabular-nums;letter-spacing:-.1px;
}
body.p-home .footer .fcl a:hover,
body.p-inner .footer .fcl a:hover{color:var(--sky)}
.fcl li>.fcv{font-size:12.5px!important;color:var(--nv-txt-2);white-space:nowrap}
.fcl .fcl-mail a{font-weight:500!important;font-size:13px!important}
body.p-home .faddr,
body.p-inner .faddr{
    margin:0;font-size:12.5px;line-height:2;color:var(--nv-txt-2);
}
body.p-home .faddr>b,
body.p-inner .faddr>b{
    display:inline-block;min-width:30px;margin-right:6px;
    font-size:11px!important;font-weight:600;color:var(--brand-l2);
}

/* ═══════════════ 43.8 悬浮工具栏：纯图标 + 悬停弹层 ═══════════════ */

/* 客户："悬浮需要用阿里那种字库图标，不要用文字，鼠标放到图标上左边展现对应
         联系方式二维码等，增加一个邮箱图片，右侧展示销售联系邮箱。"
   上一版每个 50px 方格里塞「图标 + 两三个汉字」，10.5px 的字挤成一团，
   像一排没排下的标签。现在：
     · 只有图标（内联 SVG，阿里 iconfont 同款线性造型）
     · 鼠标移上去在**左侧**展开对应面板：微信码 / 电话 / 邮箱 / 在线提交
     · 新增邮箱入口，悬停显示销售联系邮箱
   为什么不用外链字体：共享主机上外链 iconfont 一旦被墙或 404，
   整排图标会变成方框或直接消失；内联 SVG 不依赖任何外部请求。 */
.side-tools{
    --st-bg:#0b1b2e;
    position:fixed;right:16px;bottom:104px;z-index:110;
    display:flex;flex-direction:column;gap:8px;
}
.st-wrap{position:relative;display:flex}
.st-btn{
    width:50px;height:50px;padding:0;border-radius:3px;
    display:flex;align-items:center;justify-content:center;
    background:var(--st-bg);color:var(--sky);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 12px 26px -14px rgba(4,14,28,.75);
    cursor:pointer;text-decoration:none;
    transition:background .24s,border-color .24s,color .24s,transform .24s;
}
.st-btn .ic{width:21px;height:21px;display:block;fill:currentColor}
.st-btn .ic path[fill="none"]{fill:none}
/* 微信小气泡 / 信封折线：用「按钮底色」描边，
   hover 时按钮底色变成品牌蓝，这两条线自动跟着变，永远是一条"镂空"缝 */
.st-btn .ic .st-cut{fill:currentColor;stroke:var(--st-bg);stroke-width:2.2;stroke-linejoin:round}
.st-btn .ic .st-crease{fill:none;stroke:var(--st-bg);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.st-btn:hover{
    --st-bg:var(--brand);
    color:#fff;border-color:var(--brand);transform:translateX(-2px);
}
.st-btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* 悬停面板：贴在按钮左侧，带一个小三角指回图标 */
.st-pop{
    position:absolute;right:calc(100% + 13px);top:50%;
    transform:translate(8px,-50%);
    min-width:176px;max-width:252px;
    display:flex;flex-direction:column;gap:6px;
    padding:15px 17px;
    background:#fff;border:1px solid var(--line);border-radius:4px;
    box-shadow:0 24px 52px -26px rgba(6,20,42,.6);
    opacity:0;visibility:hidden;pointer-events:none;z-index:2;
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.st-pop::after{
    content:'';position:absolute;left:100%;top:50%;margin-top:-6px;
    border:6px solid transparent;border-left-color:#fff;
}
.st-wrap:hover .st-pop,.st-wrap:focus-within .st-pop{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(0,-50%);
}
.st-pop b{font-size:14px!important;font-weight:700!important;color:var(--ink);line-height:1.35}
.st-pop .st-tel,.st-pop .st-mail{font-variant-numeric:tabular-nums}
.st-pop .st-tel{font-size:17px!important;letter-spacing:-.3px}
.st-pop .st-mail{font-size:13px!important;word-break:break-all;letter-spacing:-.1px}
.st-pop span{font-size:12px!important;line-height:1.68;color:var(--d-t2)}
.st-pop em{font-style:normal;font-size:11px!important;color:var(--d-t3);margin-top:1px}
/* 二维码弹层：不要写 min-width:0 —— 那会把上面 176px 的下限清掉，
   弹层会缩成一竖条（宽度只剩一个图标宽）。 */
.st-pop--qr{align-items:center;text-align:center;gap:8px}
.st-pop--qr img{
    width:112px;height:112px;display:block;
    padding:4px;background:#fff;border:1px solid var(--line);border-radius:3px;
}
.st-pop--qr b{font-size:13px!important}
.st-pop--qr span{text-align:center;font-size:11.5px!important}

/* ═══════════════ 43.9 栏目页：统一到首页的设计语言 ═══════════════ */

/* 客户："栏目页面各个板块也需要根据首页新设计风格重新优化调整，注意细节色系和文字颜色是否可见"。
   内页此前用的是 v9 的第 33 节那套"纸白 + 全站唯一圆角"语言，
   方向和首页一致，但细节对不上：标题没有品牌竖条、卡片没有首页的悬停高度、
   日期还挂在品牌蓝上、弱化灰看不清。
   这一节只做"同一套语言"的对齐，不重排结构 —— 内页的信息密度本来就该高一些。 */

/* —— 面包屑：v10 把 padding 清零后它紧贴 hero 底边 —— */
body.p-inner .crumb{padding:16px 0 0;color:var(--muted)}
body.p-inner .crumb ul{gap:7px;font-size:12.5px}
body.p-inner .crumb li+li::before{color:var(--steel-300)}

/* —— 区块标题：与首页 .ph-head 同一节奏（底线 + 3px 品牌竖条）—— */
body.p-inner .blk-h{
    align-items:center;gap:11px;
    margin:0 0 20px;padding-bottom:15px;border-bottom:1px solid var(--line);
}
body.p-inner .blk-h b{
    position:relative;padding-left:13px;
    font-size:19px!important;letter-spacing:-.3px;color:var(--ink);
}
body.p-inner .blk-h b::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:16px;border-radius:2px;background:var(--brand);
}
body.p-inner .blk-h .dl-count{
    font-size:11.5px!important;font-weight:600;color:var(--brand);
    background:var(--brand-l);border-radius:2px;padding:3px 9px;
    letter-spacing:0;text-transform:none;
}
body.p-inner .blk-h-link{font-size:12.5px!important;font-weight:600}

/* —— 页面节奏与导语 —— */
body.p-inner .layout{padding:clamp(30px,3.6vw,50px) 0 clamp(52px,5.4vw,78px)}
body.p-inner .main-head{margin-bottom:22px;padding-bottom:15px}
body.p-inner .main-head h2{font-size:22px!important;color:var(--ink)}
body.p-inner .main-desc{color:var(--d-t2)!important;line-height:1.85;margin-bottom:24px}

/* —— 筛选条：与首页品类目录同一套语言 —— */
body.p-inner .flt-bar{background:#fff;border:1px solid var(--line);border-radius:3px;padding:4px 22px}
body.p-inner .flt-row{padding:13px 0;gap:16px}
body.p-inner .flt-lb{
    flex:0 0 68px;padding-top:8px;
    font-size:12px!important;font-weight:600;color:var(--ink-3);letter-spacing:.04em;
}
body.p-inner .flt-chips{gap:7px}
body.p-inner .flt-chips a,body.p-inner .flt-chips button{
    height:32px;padding:0 14px;border-radius:2px;border:1px solid var(--line);
    background:#fff;font-size:13px;color:var(--ink-2);
}
body.p-inner .flt-chips a:hover,body.p-inner .flt-chips button:hover{
    border-color:var(--brand);color:var(--brand);background:var(--brand-l);
}
body.p-inner .flt-chips .on{
    background:var(--brand);border-color:var(--brand);color:#fff;
    box-shadow:0 10px 22px -16px rgba(0,118,255,.9);
}

/* —— 侧栏 —— */
body.p-inner .side-head{
    border-left:2px solid var(--brand);background:var(--paper-2);
    padding:14px 18px;font-size:14.5px!important;font-weight:700;color:var(--ink);
}
body.p-inner .side-head span{font-size:10px;letter-spacing:1.6px;color:var(--ink-3);opacity:1}
body.p-inner .side-nav a{
    padding:12px 18px;font-size:13.5px;color:var(--ink-2);
    border-bottom:1px solid var(--line-2);
}
body.p-inner .side-nav a:hover,body.p-inner .side-nav a.on{
    background:var(--brand-l);color:var(--brand);
    padding-left:22px;box-shadow:inset 3px 0 0 var(--brand);
}
body.p-inner .side-nav a i{color:var(--steel-300);font-size:12px}
body.p-inner .side-hot a{padding:11px 18px;font-size:13px;color:var(--ink-2)}
body.p-inner .side-hot a:hover{color:var(--brand);background:var(--soft)}
body.p-inner .side-contact{
    background-color:var(--nv-ink);background-image:var(--grid-dark);
    padding:24px 20px;border-radius:3px;
}
body.p-inner .side-contact .sc-h{color:#fff;font-size:14.5px!important;font-weight:700}
body.p-inner .side-contact .sc-tel{font-size:23px!important;font-weight:800!important;letter-spacing:-.4px}
body.p-inner .side-contact p{color:rgba(255,255,255,.72)!important;font-size:12.5px!important;line-height:1.98}
body.p-inner .side-contact .btn-light{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
}
body.p-inner .side-contact .btn-light:hover{background:var(--brand);border-color:var(--brand)}

/* —— 产品卡 / 案例卡：抄首页热销卡那套悬停语言（上浮 + 去边框 + 大投影）—— */
body.p-inner .prod-card::before,
body.p-inner .case-card::before{display:none}
body.p-inner .prod-card:hover,
body.p-inner .case-card:hover{
    border-color:transparent;transform:translateY(-3px);
    box-shadow:0 20px 42px -24px rgba(13,28,48,.34);
}
body.p-inner .prod-card:hover .prod-img img,
body.p-inner .case-card:hover .case-img img{transform:scale(1.05)}
body.p-inner .prod-body{padding:17px 19px 19px}
body.p-inner .prod-body h3{font-size:15.5px!important;line-height:1.45;color:var(--ink)}
body.p-inner .prod-body h3 a{color:inherit}
body.p-inner .prod-body h3 a:hover{color:var(--brand)}
body.p-inner .prod-body p{color:var(--d-t2)!important;font-size:13px!important;line-height:1.72}
body.p-inner .pc-tags span{
    background:var(--soft);border-color:var(--line);color:var(--ink-2);font-size:11.5px;
}
body.p-inner .pc-tags span i{color:var(--ink-3)}
body.p-inner .pc-quote{color:var(--ink-3);border-bottom-color:var(--line-2)}
body.p-inner .pc-quote:hover{color:var(--brand);border-color:var(--brand)}
body.p-inner .case-body h3{font-size:16px!important;color:var(--ink)}
body.p-inner .case-body p{color:var(--d-t2)!important;font-size:13px!important;line-height:1.75}

/* —— 新闻列表：与首页公司动态同一语言（细体大号日 / 细线分隔 / 无白卡）—— */
body.p-inner .list{border-top:1px solid var(--line)}
body.p-inner .list-item{
    background:none;border:0;border-bottom:1px solid var(--line);
    border-radius:0;padding:22px 0;gap:22px;
}
body.p-inner .list-item:hover{
    box-shadow:none;transform:none;border-bottom-color:var(--brand-l2);
}
body.p-inner .list-date{flex:0 0 84px;padding-right:20px;border-right:1px solid var(--line)}
body.p-inner .list-date b{
    font-size:30px!important;font-weight:300!important;line-height:1.05;
    color:var(--ink);letter-spacing:-.02em;transition:color .24s;
}
body.p-inner .list-item:hover .list-date b{color:var(--brand)}
body.p-inner .list-date span{font-size:11.5px!important;color:var(--d-t3);letter-spacing:.05em}
body.p-inner .list-body h3{font-size:16.5px!important;line-height:1.5;margin-bottom:8px}
body.p-inner .list-body h3 a{color:var(--ink)}
body.p-inner .list-body h3 a:hover{color:var(--brand)}
body.p-inner .list-body p{color:var(--d-t2)!important;font-size:13.5px!important;line-height:1.8}
body.p-inner .list-body .list-tag{
    display:inline-block;margin-bottom:9px;padding:2px 9px;border-radius:2px;
    font-size:11.5px!important;font-weight:600;
    color:var(--brand-d);background:var(--brand-l);
}

/* —— 分页 —— */
body.p-inner .pagination a,body.p-inner .pagination span{
    min-width:36px;height:36px;border-radius:2px;border-color:var(--line);
    font-size:13.5px;color:var(--ink-2);
}
body.p-inner .pagination a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}
body.p-inner .pagination .on{background:var(--brand);border-color:var(--brand);color:#fff}
body.p-inner .pagination .dis{color:var(--ink-3);background:var(--soft);border-color:var(--line)}

/* —— 空态：v9 里 svg 用的是未定义的 --steel-200，fill 会掉回黑色 —— */
body.p-inner .empty{padding:64px 20px}
body.p-inner .empty svg{fill:var(--steel-200)}
body.p-inner .empty h3{color:var(--ink);font-size:16.5px!important}
body.p-inner .empty p{color:var(--d-t2);font-size:13.5px;margin-top:6px;line-height:1.8}

/* —— 产品详情页 —— */
body.p-inner .detail-info h1{font-size:clamp(22px,2.2vw,28px)!important;letter-spacing:-.5px;color:var(--ink)}
body.p-inner .detail-sub{color:var(--d-t2)!important;line-height:1.85}
body.p-inner .di-key{color:var(--ink-2)}
body.p-inner .di-hint{color:var(--ink-3);font-size:12px}
body.p-inner .pg-th{border-color:var(--line)}
body.p-inner .pg-th.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-l2)}
body.p-inner .pg-note{color:var(--ink-3);font-size:12.5px!important;line-height:1.8}
body.p-inner .rich{color:var(--ink-2);line-height:1.95}
body.p-inner .rich h2,body.p-inner .rich h3,body.p-inner .rich h4{color:var(--ink)}
body.p-inner .rich th{background:var(--soft);color:var(--ink)}
body.p-inner .rich td{border-color:var(--line);color:var(--ink-2)}

/* —— 选型页：面板标题 / 说明条 —— */
body.p-inner .sk-block-h b{color:var(--ink)}
body.p-inner .sk-block-h span{color:var(--ink-3);font-size:11.5px}
body.p-inner .sk-panel-head b{color:var(--ink)}
body.p-inner .sk-reset{color:var(--ink-2)}
body.p-inner .sk-reset:hover{color:var(--brand);border-color:var(--brand)}
body.p-inner .sk-note{color:var(--d-t2)}
body.p-inner .sk-note b{color:var(--ink)}
body.p-inner .sk-bar-l b{color:var(--brand)}
body.p-inner .sk-maybe-n{color:var(--ink-3)}
body.p-inner .sk-nodata-item{color:var(--ink-2)}
body.p-inner .sk-nodata-item:hover{color:var(--brand);border-color:var(--brand-l2)}
body.p-inner .sk-table th{background:var(--soft);color:var(--ink)}
body.p-inner .sk-table td{color:var(--ink-2)}

/* ═══════════════ 43.10 文字可见性（浏览器实测后补的一节） ═══════════════ */

/* 43.1 那三个变量改完之后，用真浏览器把 10 个页面扫了一遍
   （脚本：_c20.py，逐元素取 color，往上找第一个不透明 background-color，
     沿途半透明层按 alpha 混合，再算 WCAG 对比度）。
   结果：还有一批 1.0–4.2:1 的文字，全部是"深色皮肤改成浅色皮肤时漏改的颜色"：
     · 内页 hero：底已经是纸白（v9 第 33.14 节改的），
       但 p / .ph-en / .ph-h1 / KPI 数字还写着 #fff 与 #7cc9ff → 1.03–1.69:1，
       等于白字白底 —— 详情页的大标题"产品详情"是**完全看不见**的。
     · 顶部导航当前项：v9:119 写着 color:#fff，
       那行是给深色页头写的；页头自 v13 起是白的，内页没有覆盖规则 → 1.00:1。
     · 品牌蓝上的白字（#0076ff vs #fff = 4.17:1）差 0.33 就到 AA，
       按钮、分页、"01"序号方块、筛选 chips 全在这一档。
     · --steel-400 #879cb4 / --eco-d #2e9b29 / --t3 #8693a5 三个弱化色
       在白底上只有 2.8–3.6:1。
   这一节按实测值逐条改，改完重跑 _c20.py 复核。 */

/* —— 弱化色：白底 2.8–3.6:1 → 5.0:1 以上 ——
   --steel-400 全站小字（规格单位、联系页标签、表格表头副文）；
   --eco-d 是"命中/在售"的绿色数字；--t3 是顶栏与导语的回退灰。 */
:root{
    --steel-400:#5f7085;   /* 原 #879cb4 → 2.82:1；新 5.07:1 */
    --eco-d:#237a20;       /* 原 #2e9b29 → 3.60:1；新 5.42:1 */
    --t3:#5f7085;          /* 顶栏 / 导语：原回退值 #8693a5 = 2.93:1 */
}
/* --d-t3 定义在 body.p-home 上（v13 第 36 节），
   43.1 只改了 :root —— body 自己又声明了一遍，:root 那句对首页其实是死的。
   v15 里凡是深色区块都写成 .ph-sec--dark 并另配 rgba 白，
   所以 --d-t3 只出现在浅底上，调深不会把深色区压暗。 */
body.p-home{--d-t3:#5f7085}

/* —— 顶部导航：内页的"当前栏目"此前是白字白底 ——
   首页有 body.p-home 的三条覆盖（v13:2463-2465）所以没事，内页没有。 */
body.p-inner .nav>ul>li>a{color:var(--ink-2)}
body.p-inner .nav>ul>li>a:hover,
body.p-inner .nav>ul>li:hover>a{color:var(--brand-d)}
body.p-inner .nav>ul>li>a.on{color:var(--brand-d);font-weight:600}
/* hover 下划线原本是白色，白页头上看不见 → 换成品牌蓝半透明 */
body.p-inner .nav>ul>li>a::before{background:var(--brand);opacity:.38}

/* —— 内页 hero：底是纸白，字还是深色皮肤那套 —— */
body.p-inner .page-hero{color:var(--ink)}
body.p-inner .page-hero p{color:var(--ink-2)}
body.p-inner .page-hero .ph-h1{color:var(--ink)}
body.p-inner .ph-en{color:var(--brand-d)}
body.p-inner .ph-en::before{background:var(--brand)}
/* 水印大字：原来是 rgba(255,255,255,.038)，白底上等于没有 → 改成墨色的极淡一层 */
body.p-inner .ph-ghost{color:rgba(13,28,48,.055)}
/* KPI 卡：原来是 rgba(255,255,255,.055) 的白玻璃 + 白字 → 换成白卡 + 深字 */
body.p-inner .ph-kpi .pk{
    background:#fff;border:1px solid var(--line);
    box-shadow:0 2px 10px -6px rgba(13,28,48,.16);
}
body.p-inner .ph-kpi .pk b{color:var(--ink)}
body.p-inner .ph-kpi .pk b i{color:var(--brand-d)}
body.p-inner .ph-kpi .pk span{color:var(--muted)}
body.p-inner .ph-kpi .pk::after{border-top-color:rgba(0,118,255,.55);border-right-color:rgba(0,118,255,.55)}

/* —— 小号蓝字：#0076ff 在白/纸上 4.17:1，差一点到 AA ——
   只换"文字"，品牌色本身（描边、图标、填充）不动，
   文字统一用 --brand-d #0055c4（白底 6.79:1 / 纸底 6.38:1）。 */
body.p-inner .prod-more,
body.p-inner .blk-h-link,
body.p-inner .main-head .mh-cnt b,
body.p-inner .side-nav a:hover,
body.p-inner .side-nav a.on,
body.p-inner .flt-chips a:hover,
body.p-inner .flt-chips button:hover,
body.p-inner .sk-need-v,
body.p-inner .sk-more span,
body.p-inner .sk-bar-l b,
body.p-inner .sk-inq,
body.p-inner .sk-link,
body.p-inner .blk-h .dl-count{color:var(--brand-d)}
body.p-home .ph-feat-m i,
body.p-home .ph-nw-all{color:var(--d-brand-d)}
body.p-home .ph-step-day{color:var(--d-brand-d)}

/* —— 白字压在品牌蓝上：底色深一档（#0060d6 / #0055c4）—— */
body.p-inner .btn-primary{background:var(--brand-d);border-color:var(--brand-d)}
body.p-inner .btn-primary:hover{background:#004fb8;border-color:#004fb8}
body.p-inner .flt-chips .on,
body.p-inner .pagination .on,
body.p-inner .sel-opt.on,
body.p-inner .sel-cats a.on{background:var(--brand-d);border-color:var(--brand-d)}
body.p-home .ph-btn-1{background:var(--d-brand-d);border-color:var(--d-brand-d)}
body.p-home .ph-btn-1:hover{background:#004fb8;border-color:#004fb8}
body.p-home .ph-step-n{background:var(--d-brand-d)}

/* —— CTA 整块是品牌蓝实底，白字只有 2.6–3.1:1 ——
   底压到 #0060d6，正文提到 .92 / 承诺行提到 .86 → 4.67–5.11:1。 */
body.p-home .ph-cta{background:var(--d-brand-d)}
body.p-home .ph-cta-p{color:rgba(255,255,255,.92)}
body.p-home .ph-cta-pm span{color:rgba(255,255,255,.86)}

/* —— 修掉 43.9 里我自己写错的两条 ——
   选型页的 .sk-panel-head 是深墨蓝实底（v9:686），
   我在 43.9 里按"浅底"给它配了深色字，实测 1.06:1 / 1.67:1 —— 两个字都看不见。 */
body.p-inner .sk-panel-head b{color:#fff}
body.p-inner .sk-reset{
    color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.18);
}
body.p-inner .sk-reset:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* —— 区块标题的英文眉标（At a Glance / Contact）——
   原来用 --steel-300 #afc1d4，白底 1.84:1；--steel-300 还兼着虚线边框，
   不动变量，只改这一处文字。 */
body.p-inner .blk-h span{color:var(--muted)}

/* ═══════════════ 43.11 响应式（全部带前缀） ═══════════════ */

@media(max-width:1240px){
    /* 品类目录在 ≤1240 仍是 5 列（10 个品类正好两行排满） */
    body.p-home .ph-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
}
@media(max-width:1180px){
    /* 询价卡改窄，文案列优先 */
    body.p-home .ph-cta-in{grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:clamp(22px,2.8vw,40px)}
}
@media(max-width:1040px){
    body.p-home .ph-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
    body.p-home .ph-chip{height:44px;font-size:13px!important;padding:0 8px}
}
@media(max-width:1080px){
    /* v9 在 ≤1080 把 footer-in 改 2 列（无前缀，会被上面的 4 列压掉）→ 显式重设 */
    body.p-home .footer-in,
    body.p-inner .footer-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
}
@media(max-width:980px){
    body.p-inner .layout{padding:32px 0 56px}
}
@media(max-width:900px){
    /* 询价卡压缩宽度后右侧会显得挤，这时把文案列与卡片的间距收一收 */
    body.p-home .ph-cta-tel b{font-size:22px!important}
    body.p-home .ph-cta-qr img{width:64px;height:64px}
}
@media(max-width:760px){
    /* —— 品类目录：两列，10 个品类 5 行，不再横向溢出 —— */
    body.p-home .ph-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    body.p-home .ph-chip{height:42px;font-size:12.5px!important}

    /* —— 公司动态：日期轨缩小，正文不再被压 —— */
    body.p-home .ph-nw-lead{grid-template-columns:auto minmax(0,1fr);gap:14px}
    body.p-home .ph-nw-rail{min-width:50px;padding-right:14px}
    body.p-home .ph-nw-dd{font-size:32px!important}
    body.p-home .ph-nw-t{font-size:15.5px!important}
    body.p-home .ph-nw-a{grid-template-columns:44px minmax(0,1fr) 12px;gap:10px}

    /* —— CTA：单列，询价卡撑满 —— */
    body.p-home .ph-cta-in{grid-template-columns:minmax(0,1fr);gap:24px}
    body.p-home .ph-cta-r{padding:18px}
    body.p-home .ph-cta-qr img{width:76px;height:76px}
}
@media(max-width:700px){
    body.p-home .footer-in,
    body.p-inner .footer-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
}
@media(max-width:640px){
    body.p-home .footer-in,
    body.p-inner .footer-in{grid-template-columns:minmax(0,1fr);gap:28px}
    body.p-home .f2col,
    body.p-inner .f2col{grid-template-columns:repeat(2,minmax(0,1fr))}
    body.p-inner .list-item{gap:16px}
    body.p-inner .list-date{flex:0 0 66px;padding-right:14px}
    body.p-inner .list-date b{font-size:24px!important}
}

@media(prefers-reduced-motion:reduce){
    .st-btn,.st-pop{transition:none}
    .st-btn:hover{transform:none}
    body.p-home .ph-cta-btn,
    body.p-home .ph-nw-go,
    body.p-home .ph-nw-ar{transition:none}
    body.p-home .ph-cta-btn:hover,
    body.p-home .ph-nw-lead:hover .ph-nw-go,
    body.p-home .ph-nw-a:hover .ph-nw-ar{transform:none}
}

/* ============================================================
   v21 增量（第 18 轮）—— 客户提的 9 件事
   ──────────────────────────────────────────────────────────
     ① 首页「资讯与问答」副标题改专业书面语              → PHP（home.php）
     ② 页脚：公司简介去联系方式 / 产品目录分两列         → PHP + 44.2
     ③ 悬浮栏改白色系 + 首个按钮点击即可（不再弹文案）   → PHP + 44.3
     ④ 产品选型：去卡片图 / 规格列扩充 / 去横滚 / 左栏收窄 → PHP + 44.5 / 44.6
     ⑤ 容器加宽（1240 → 1320）+ 搜索按钮常显             → 44.1
     ⑥ 面包屑「当前位置」前置定位图标                     → PHP + 44.4
     ⑦ 服务支持 / 选型指南：表格免滚动、全部显示           → PHP + 44.8
     ⑧ 整站白话文案统一改书面语                           → PHP（8 个视图）
     ⑨ 栏目 Banner 后台管理端口 + 浅色发光底图            → PHP + 44.7

   ⚠ 特异性纪律（v9/v10 有大量**无前缀**规则）：
     本文件里所有**顶层**规则都会压掉 theme.v9 里同特异性的媒体查询规则，
     所以凡是被本文件改过的属性，必须在 44.9 里按断点显式重设一遍。
     已被本文件覆盖的断点规则清单：
       · @media(max-width:1080px) .sk-wrap{grid-template-columns:1fr}   → 44.9
       · @media(max-width:820px)  .head-act{flex:0 1 auto;min-width:0}  → 44.1
       · @media(max-width:980px)  .rich table{display:block;nowrap}     → 44.8
       · @media(max-width:1017)   .sk-table{min-width:520px}            → 44.6
       · @media(max-width:640px)  .f2col / .sk-item                     → 44.9
   ============================================================ */

/* ═══════════════ 44.1 容器加宽 + 搜索按钮常显（需求 5） ═══════════════ */

/* 客户："导航宽度需要按照栏目正文宽度对齐 增加宽度，还有搜索按钮经常不显示了"
   ───────────────────────────────────────────────────────────────────────
   先说量测结论（_m21c.py，7 档宽度 × 4 个页面，量**内容起点**的 left）：
       1920 → logo / 导航首项 / 面包屑 / hero 文案 / 侧栏 / 选型面板 全是 388.5
       1440 → 全是 148.5       1024 → 全是 45
   也就是说**对齐本来就是好的**，一条线没断。客户真正要的是「增加宽度」：
   --wrap / --container 一直卡在 1240px，1920 屏上左右各空 340px，太瘦。
   v4 时代就是 1320（theme.v9.css:1371 的注释里还留着这句话），这里加回来。
   1240 → 1320：1920 屏左右留白 340 → 300，1440 屏 100 → 60，
   ≤1320 的屏幕 max-width 不生效、行为跟以前完全一样（仍然是铺满），
   所以移动端一行都不会跟着变。 */
:root{
    --wrap:1320px;
    --container:1320px;
}

/* 搜索按钮"经常不显示" —— _m21b.py 用 18 档宽度（1425→685）扫了一遍，
   .search-btn 恒为 38×38、图标恒 18px，headless 里**一次都没消失**。
   唯一可能的成因在 CSS 里：≤820 断点（theme.v9.css:1830 / _v10.css:514）
   写了 .head-act{flex:0 1 auto;min-width:0} 和 .head-act>*{min-width:0}，
   允许整个右侧操作区被压缩，子元素 min-width 又清零 ——
   真机窗口再窄一点、或者字体/翻译插件一撑，搜索按钮就会被挤成 0 宽。
   这里把「允许收缩」收回成「不许收缩」，并给按钮钉死 38px 下限。
   用 .header .head-act（0,2,0）压 .head-act（0,1,0），不依赖先后顺序。 */
.header .head-act{flex:0 0 auto;min-width:0;margin-left:auto}
.header .head-act>*{flex:0 0 auto}
/* margin-left:auto 的说明：nav 在 ≤980 被整块隐藏（移动端走汉堡菜单），
   这时 .header-in 里只剩「logo + head-act」两个 flex 项，
   没有 nav 的 flex:1 去顶开空间，head-act 会**贴在 logo 右边、页面中间偏左** ——
   实测 980 档搜索按钮 left=190 / 768 档 left=166，看着像排版坏了。
   加上 margin-left:auto：nav 在时它不起作用（nav 已经把剩余空间吃满），
   nav 不在时把操作区顶到最右，两种情况下右边都对齐。 */
.search-btn{flex:0 0 auto!important;min-width:38px!important;min-height:38px!important}

/* ═══════════════ 44.2 页脚：产品目录分两列（需求 2） ═══════════════ */

/* 客户："底部：左侧公司简介 不需要放联系方式  产品目录分两列"
   公司简介里的电话/邮箱已在 _foot.php 里删掉（第四栏就是完整联系信息，
   左边再放一遍只是把同一件事说两遍，还把简介挤窄）。

   ⚠ 这里补的是一个**线上已经丢了的规则**：
   v19 建的 theme.v19.css 里本来有 `body.p-home .f2col{display:grid;...2 列}`，
   但 _v16.css 在 20:56 被改过一次（晚于 v19 的 20:22），那一段被带走了，
   _mk20.py 21:42 重拼时就没了 —— 所以现在**桌面端 .f2col 根本没有样式**，
   产品目录是一列 20 多行（探针实测 grid=none、整列 387px 高）。
   这里用双前缀（首页 + 内页）一次补齐，页脚是全站公用组件。 */
body.p-home .f2col,
body.p-inner .f2col{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 16px;
}
body.p-home .f2col li,
body.p-inner .f2col li{margin-bottom:8px;min-width:0}
/* 两列之后每列只有半栏宽，长品类名（如「PTFE 玻纤布传送带」）会顶到边，
   这里允许在词间换行 + 行高压紧，两列视觉上才齐。 */
body.p-home .f2col li a,
body.p-inner .f2col li a{
    display:block;font-size:13px;line-height:1.65;
    overflow-wrap:break-word;word-break:break-word;
}
/* 公司简介栏（.fcol-info）去掉联系方式后，简介文案给足呼吸感 */
body.p-home .fcol-info .fdesc,
body.p-inner .fcol-info .fdesc{max-width:46ch}
body.p-home .fcol-info .flogo,
body.p-inner .fcol-info .flogo{margin-bottom:16px}

/* ═══════════════ 44.3 悬浮工具栏：白色系（需求 3） ═══════════════ */

/* 客户："右侧悬浮 麻烦优化色系 用白色背景 现在太深色系了
          第一个按钮点击就行 不需要左侧展现文案"
   原来是深墨蓝 #0b1b2e 方块压在白页面上，四个格子像一条黑色贴片。
   改成：
     · 白底 + 品牌蓝图标（--brand-d #005bc0，白底上 6.45:1，远超 3:1 图形对比度）
     · 边框与投影收紧，白底白页上有明确边界，不会糊在一起
     · hover 翻成品牌蓝底 + 白图标（4.17:1）
   微信小气泡 / 信封折线的"镂空缝"（.st-cut / .st-crease）原本用
   var(--st-bg) 描边、跟着底色自动变 —— 白底阶段必须改成白色，
   hover 时再跟着变品牌蓝，否则白底上会看到两条深色实线。 */
.side-tools{--st-bg:#fff}
.st-btn{
    background:#fff;color:var(--brand-d);
    border:1px solid #d3deeb;
    box-shadow:0 10px 26px -14px rgba(13,28,48,.42);
}
.st-btn .ic{width:21px;height:21px;display:block;fill:currentColor}
.st-btn .ic .st-cut{fill:currentColor;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.st-btn .ic .st-crease{fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.st-btn:hover{
    --st-bg:var(--brand);
    background:var(--brand);color:#fff;border-color:var(--brand);
    transform:translateX(-2px);
}
.st-btn:hover .ic .st-cut{stroke:var(--brand)}
.st-btn:hover .ic .st-crease{stroke:var(--brand)}
.st-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 首个按钮（在线提交需求）在 _foot.php 里已经去掉 .st-pop，
   只剩 .st-wrap--flat 包一个 button —— 点一下直接开询价弹窗，
   不再往左边飘一块说明。这里给它一点品牌权重，跟下面三个区分开。 */
.st-wrap--flat .st-btn{
    background:var(--brand);color:#fff;border-color:var(--brand);
}
.st-wrap--flat .st-btn .ic .st-cut{stroke:var(--brand)}
.st-wrap--flat .st-btn .ic .st-crease{stroke:var(--brand)}
.st-wrap--flat .st-btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.st-wrap--flat .st-btn:hover .ic .st-cut{stroke:var(--brand-d)}
.st-wrap--flat .st-btn:hover .ic .st-crease{stroke:var(--brand-d)}

/* ═══════════════ 44.4 面包屑：当前位置前置定位图标（需求 6） ═══════════════ */

/* 客户："栏目各个页面当前位置 前面缺少一个同样位置图标搭配"
   core.php 的 Seo::breadcrumbHtml() 已经在 <ul> 前面吐了一个
   <span class="crumb-ico">（内联 SVG 定位针，不外链字体），
   aria-label 也从「面包屑」改成「当前位置」。这里只负责让它和文字同排居中。
   颜色用 --brand-d：白底 6.45:1，比品牌蓝的 4.17:1 更稳，
   而且深蓝针脚比亮蓝更收敛，不会抢 H1 的注意力。 */
.crumb .container{display:flex;align-items:center;gap:9px}
.crumb-ico{display:inline-flex;flex:0 0 auto;line-height:0}
.crumb-ico .ic{width:15px;height:15px;display:block;fill:var(--brand-d)}
.crumb ul{flex:1 1 auto;min-width:0}

/* ═══════════════ 44.5 产品选型：左栏收窄 / 卡片去图 / 文案弱化（需求 4） ═══════════════ */

/* 客户："产品选型 左侧不需要图片  尽量规格展现 不需要滑动，
          最左侧选型缩小宽度 有些文案可以弱化"
   四件事拆开做：
     ① 左栏 312px → 248px（筛选项本来就只有「产品目录 + 尺寸 + 关键词」三组，
        312px 里有一半是空着的白）
     ② .sk-item 从「170px 图 + 1fr 参数」改成单列，.sk-shot 直接 display:none
        （缩略图对"这个型号的厚度/幅宽能不能用"没有帮助，还吃掉四分之一卡片宽）
     ③ 表格去掉横滚（44.6）
     ④ 弱化：.sk-block-h span（"按品类收窄"这类小注）再小一档 + 更浅；
        .sk-note 从琥珀警示色（#fff8e8 / #8a5a08）降成淡蓝提示色 ——
        它是"幅宽/耐温是能力上限"的说明，不是告警，不该用黄色抢注意力。 */

.sk-wrap{grid-template-columns:248px minmax(0,1fr);gap:22px}

/* 面板窄了 64px，内部留白跟着收，否则筛选项会被挤成两行 */
.sk-panel-head{padding:13px 15px}
.sk-panel-head b{font-size:14px}
.sk-block{padding:14px 15px}
.sk-chips{gap:6px}

/* 弱化文案 ①：分组小注 */
.sk-block-h{margin-bottom:10px;gap:8px}
.sk-block-h b{font-size:13px}
.sk-block-h b i{font-size:10.5px}
.sk-block-h span{font-size:11px;color:var(--ink-3);font-weight:400}

/* 弱化文案 ②：顶部说明条 琥珀 → 淡蓝 */
.sk-note{
    padding:10px 14px;margin-bottom:14px;
    background:var(--brand-w);border-color:#cfe2fb;color:var(--brand-d);
    font-size:12.5px;line-height:1.7;
}
.sk-note .ic{width:15px;height:15px;fill:var(--brand);margin-top:2px}
.sk-note b{color:var(--brand-d);font-weight:700}

/* 卡片：单列，图撤掉 */
.sk-item{
    grid-template-columns:minmax(0,1fr);gap:0;
    padding:14px 16px;
}
.sk-item:hover .sk-shot img{transform:none}

/* 弱化文案 ③：卡片副标题与命中提示退到弱灰 */
.sk-sub{font-size:12.5px;color:var(--ink-3)}
.sk-hit{font-size:12px;color:var(--ink-3)}
.sk-hit b{font-size:14px}

/* ═══════════════ 44.6 选型结果表：去横向滚动（需求 4） ═══════════════ */

/* 原来 .sk-table 被钉了 min-width:520px（theme.v9.css:1017），
   .sk-table-wrap 又是 overflow-x:auto —— 列一多就出横滚条，
   而"询价"列还是 sticky 吸右的，滚动时手感很怪。
   现在图撤掉了、列上限从 4 提到 6（select_result.php 里的 $colsOf），
   宽度正好够，把 min-width 清零、容器改成不裁剪，
   表头允许折行（nowrap → normal），列再多也只是变高、不会横向溢出。
   sticky 右吸是为横向滚动服务的，没有滚动了就撤掉，
   否则它会去吸视口右边缘、纵向滚动时整列跟着飘。 */
.sk-table-wrap{overflow-x:visible;overflow-y:visible}
.sk-table{min-width:0!important;width:100%}
.sk-table thead th{white-space:normal;padding:8px 10px;font-size:12px;line-height:1.5}
.sk-table thead th i{font-size:10.5px}
.sk-table tbody td{padding:8px 10px;font-size:12.5px;line-height:1.6}
.sk-th-act,.sk-td-act{position:static;right:auto;box-shadow:none;width:76px;min-width:76px}
.sk-inq{height:26px;padding:0 9px;font-size:11.5px;line-height:24px}

/* ═══════════════ 44.7 栏目 Banner 底图（需求 9） ═══════════════ */

/* 客户："栏目各个banner 给我后台增加一个管理端口 可以每个页面独立上传新图片
          先给我批量上传一张  用浅色 右侧局部用半圆淡蓝系列 发射发光那样图片 展现"
   后台「展示 → 栏目 Banner」（mt_page_banner 表，20 个栏目各一条，
   PC / 手机两张图可分别上传），前台 core.php 的 page_banner_img() 按路由
   算出 pkey 取图，_pagehero.php 吐出 .ph-bn。
   底图是 _bn21.py 用 PIL 现画的：白 → 极浅蓝横向渐变，
   圆心落在画布**右边界之外**（cx = w * 1.02）的半圆光晕 + 6 条同心细弧，
   平方衰减模拟"发射"。左侧 45% 实测最暗像素 = #ffffff，正文区不受影响。 */
.page-hero{position:relative}
.page-hero--bn{background:#fff}
.ph-bn{
    position:absolute;inset:0;z-index:0;display:block;overflow:hidden;
    pointer-events:none;
}
.ph-bn picture,.ph-bn img{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:right center;
}
/* 护字渐变：左边压到近白，右边完全放开让光晕透出来。
   就算以后后台上传的是张深色图，H1 / 描述也仍然是深字压在白底上，
   对比度不会被上传的图带崩。 */
.ph-bn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,
        #fff 0%,
        rgba(255,255,255,.94) 22%,
        rgba(255,255,255,.62) 48%,
        rgba(255,255,255,.20) 72%,
        rgba(255,255,255,0) 100%);
}
/* 分层：底图 0 < 装饰雾/水印 1 < 正文 3 */
.ph-mist{z-index:1}
.ph-ghost{z-index:1}
.page-hero .container{position:relative;z-index:3}

/* ═══════════════ 44.8 正文表格：免滚动、全部显示（需求 7） ═══════════════ */

/* 客户："服务支持、选型指南页面需要优化排版，表格不需要滑动条 尽量全部显示"
   两条成因：
     ① site.css:1128 在 ≤980 把 .rich table 改成
        display:block + overflow-x:auto + white-space:nowrap ——
        手机上整张表变成一个横向滚动的块，还得滑着看。
     ② site.css:701 .rich-scroll.wide > table{min-width:720px} ——
        列数 ≥5 的表被 table_wrap() 打上 .wide 后钉死 720px，
        窄屏必然出滚动条。
   对策：内容侧已经把选型指南的对照表从 5 列压到 4 列
   （长期耐温 / 短时耐温 合成「耐温（长期 / 短时）」），
   这样它连 .wide 都拿不到；CSS 侧再把上面两条兜住 ——
   min-width 清零、nowrap 改 normal、overflow 放开，
   窄屏靠压字号和内边距把表塞进去，而不是靠滑。
   用 body.p-inner / body.p-home 前缀（0,2,1）压 .rich table（0,1,1）。 */
body.p-home .rich table,
body.p-inner .rich table{
    display:table!important;width:100%;max-width:100%;
    overflow:visible!important;white-space:normal!important;
    table-layout:fixed;
}
body.p-home .rich-scroll,
body.p-inner .rich-scroll{overflow-x:visible;overflow-y:visible}
body.p-home .rich-scroll.wide > table,
body.p-inner .rich-scroll.wide > table{min-width:0!important}
body.p-home .rich th,body.p-home .rich td,
body.p-inner .rich th,body.p-inner .rich td{
    padding:9px 11px;font-size:13.5px;line-height:1.65;
    word-break:break-word;overflow-wrap:break-word;
}
/* ⚠ 真正的溢出源在**单元格自己身上**，不是表格：
   theme.v9.css:1202 写了 .rich-scroll td,.rich-scroll th{white-space:nowrap}（0,1,1），
   我上面把 .rich table 设成 white-space:normal 只作用在**表格**上，
   单元格有自己的声明、优先级高于继承，所以单元格依旧不折行 ——
   实测 .rich-scroll 里 21~36 个格子 computed white-space 仍是 nowrap，
   于是一行文字不换行、直接把容器顶宽（1180 档 sw=1000 / cw=881，溢出 119px），
   而我把 overflow-x 放开后这份溢出不再被裁掉，直接变成**整页横向滚动**
   （1180 服务支持 doc=1283 > vw=1165）。
   所以这里必须用带前缀的更高特异性（0,2,1）+ !important 把单元格也摁回 normal。 */
body.p-home .rich-scroll th,body.p-home .rich-scroll td,
body.p-inner .rich-scroll th,body.p-inner .rich-scroll td{
    white-space:normal!important;
    word-break:break-word;overflow-wrap:break-word;
}
/* table-layout:fixed 之后列宽平均分配，首列（项目名 / 型号）给多一点 */
body.p-home .rich tr > td:first-child,
body.p-inner .rich tr > td:first-child{width:26%}
/* 兜底：正文里任何一段意外撑宽的东西都不许把整页顶出横向滚动条。
   （.rich 是正文容器，只在它身上裁，不影响全站其它块的 sticky / 浮层。） */
body.p-home .rich,
body.p-inner .rich{max-width:100%}

/* ═══════════════ 44.9 响应式（全部带前缀重设） ═══════════════ */

@media(max-width:1240px){
    /* 容器到 1240 以下就交给 100% 宽度，--wrap 不再起作用，这里什么都不用做；
       但栅格里的固定侧栏要跟着松，否则正文会被挤窄 */
    body.p-inner .layout{grid-template-columns:250px minmax(0,1fr);gap:32px}
    .sk-wrap{grid-template-columns:236px minmax(0,1fr);gap:20px}
}

@media(max-width:1080px){
    /* v9 在 ≤1080 把 .sk-wrap 压成单列 —— 上面 44.5 的 248px 会把它压掉，重设 */
    .sk-wrap{grid-template-columns:minmax(0,1fr)}
    .sk-panel{position:static;max-height:none;overflow:visible}
}

@media(max-width:980px){
    /* ── 需求 5 的真凶：site.css:1081 ──────────────────────────────────
       @media(max-width:980px){ .search-btn{display:none}
                                .search-panel{display:none!important} }
       也就是说**视口 ≤980 时搜索按钮被整条从渲染树里移除** ——
       窗口拉窄一点、平板、分屏，按钮就没了。这才是客户说的
       "搜索按钮经常不显示了"，而不是什么 hover / 布局抖动。
       这里把它加回来，同时把搜索抽屉也恢复（.search-panel 靠 .on 切换，
       而 display:none!important 连 .on 也一起压死，所以要用 !important 顶回去）。 */
    .header .search-btn{display:grid}
    .search-panel.on{display:block!important}
    /* 抽屉在窄屏的排布：输入框吃掉剩余宽度，按钮与关闭叉不缩 */
    .search-form{padding:12px 16px;gap:8px}
    .search-form input{flex:1 1 auto;min-width:0}
    .search-form .btn{flex:0 0 auto;padding:0 14px}

    /* ── 修 v21 自己引入的移动端溢出 ──────────────────────────────────
       上面 44.9 的 @media(max-width:1240px) 里我写了
         body.p-inner .layout{grid-template-columns:250px minmax(0,1fr)}
       特异性 (0,2,0)，把 site.css:1116 的
         @media(max-width:980px){ .layout{grid-template-columns:1fr} }  (0,1,0)
       压掉了 —— 结果 390 档 .layout 还是「250px 侧栏 + 正文」两列，
       正文被挤到视口外，整页横向溢出（实测 doc 397~470 > vw 390，
       而 A/B 对照 theme.v20.css 同一批页面 doc 全等于 390）。
       这正是本文件开头"特异性纪律"里警告的坑，我自己踩了一次。
       这里按断点显式重设回单列。 */
    body.p-home .layout,
    body.p-inner .layout{
        grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 0 56px;
    }
    body.p-home .side,body.p-inner .side{position:static}

    /* v9 在 ≤980 把 .rich table 变成滚动块 —— 44.8 已用 !important 兜住，
       这里再压一档字号与内边距，保证 4 列表格在 900 宽里不溢出 */
    body.p-home .rich th,body.p-home .rich td,
    body.p-inner .rich th,body.p-inner .rich td{
        padding:8px 9px;font-size:12.5px;line-height:1.6;
    }
    body.p-home .rich tr > td:first-child,
    body.p-inner .rich tr > td:first-child{width:30%}
}

@media(max-width:820px){
    /* v9 / v10 在 ≤820 允许 .head-act 收缩 —— 44.1 已经把它钉死，
       这里再确认一次（同一断点、更高特异性） */
    .header .head-act{flex:0 0 auto!important;min-width:0;gap:8px}
    .header .head-act>*{min-width:0}
    .search-btn{flex:0 0 auto!important;width:38px;height:38px;min-width:38px!important}
}

@media(max-width:760px){
    /* 选型结果表：手机上「7 列规格」物理上塞不进 390，
       这里退回**容器内**横向滚动（overflow-x:auto 把溢出关在自己的盒子里），
       而不是像桌面那样全部摊开 —— 摊开的结果是整页跟着横向滚动
       （实测 390 档 doc=470）。桌面/平板（≥761）仍然一格不滑。
       注意：.sk-table 上面被钉了 min-width:0!important，
       这里必须用同样的 !important 才能顶回去。 */
    .sk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .sk-table{min-width:560px!important;width:auto}
    /* 有滚动了，询价列重新吸右，滚到哪儿都点得到 */
    .sk-th-act,.sk-td-act{
        position:sticky;right:0;background:#fff;
        box-shadow:-8px 0 10px -8px rgba(13,28,48,.14);
    }
    .sk-table thead .sk-th-act{background:#f1f6fd}
    .sk-table tbody tr:hover .sk-td-act{background:var(--brand-l)}

    /* 栏目 banner：切手机图（_pagehero.php 的 <picture> 已经写了 source），
       护字渐变在窄屏要收得快一点，否则整块都被压白、光晕看不见 */
    .ph-bn::after{
        background:linear-gradient(90deg,
            #fff 0%,
            rgba(255,255,255,.88) 30%,
            rgba(255,255,255,.42) 62%,
            rgba(255,255,255,0) 100%);
    }
    .ph-bn picture,.ph-bn img{object-position:78% center}
}

@media(max-width:700px){
    /* 选型：卡片内边距再收，表格字号退到 12 */
    .sk-item{padding:12px 13px}
    .sk-table thead th{padding:7px 8px;font-size:11.5px}
    .sk-table tbody td{padding:7px 8px;font-size:12px}
    .sk-th-act,.sk-td-act{width:64px;min-width:64px}
    .sk-inq{height:25px;padding:0 7px;font-size:11px;line-height:23px}
}

@media(max-width:640px){
    /* v20 在这里写了 .f2col 两列 —— 44.2 的桌面规则不会压它（都在媒体查询里，
       44.2 在前、这条在后），这里只补一个更窄的一列兜底 */
    body.p-home .f2col,
    body.p-inner .f2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
    body.p-home .f2col li a,
    body.p-inner .f2col li a{font-size:12.5px}
    .sk-wrap{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:420px){
    /* 两列在超窄屏会各只剩 ~150px，长品类名会碎成三段 —— 退回一列 */
    body.p-home .f2col,
    body.p-inner .f2col{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════ 44.10 顺手补的 3 处老对比度问题 ═══════════════ */

/* 这轮把对比度审计从 10 页扩到 13 页（补了 fw / guide / strength / equipment /
   hzhb / tech），扫出 4 处**v20 之前就存在**的不合规 —— 它们在 v20 那轮的
   10 页清单之外，所以上一轮报告写的是"0 不合规"，并不矛盾：
     · .cap-bar .cp i（"涂覆产线 01" 标签）  15px 品牌蓝压 --brand-l = 3.73:1（要 4.5）
     · .eq-ico span（"EQUIPMENT"）          10px 品牌蓝压白 = 3.73:1
       → 两处都换 --brand-d #005bc0，压 --brand-l 是 5.76:1、压白是 6.45:1，
         字重和字距不动，只是蓝得更沉一点。
     · .fact-card .idx（右上角「01」）      26px --line #e9eef5 压白 = 1.17:1（要 3）
       → 换 --ink-3 #8794a6 = 3.08:1。它是装饰性序号，不能更抢眼，
         所以只提到刚好过线的灰，不用品牌色。 */
.cap-bar .cp i{color:var(--brand-d)}
.eq-ico span{color:var(--brand-d)}
.fact-card .idx{color:var(--ink-3)}

@media(prefers-reduced-motion:reduce){
    .st-btn{transition:none}
    .st-btn:hover{transform:none}
    .ph-bn img{transition:none}
}

/* ============================================================
   v22 增量（第 19 轮）—— 客户提的 8 条「细节优化」
   ──────────────────────────────────────────────────────────
     ① 首屏 banner 切换要更丝滑（联动推进 / 交叠明暗 / 图注错峰） → 45.1
     ② 热销产品卡：鼠标放上去图片缓慢放大                        → 45.2
     ③ 生产实力左右联动切换 + 板块细节                           → PHP + 45.3
     ④ 资讯与问答整块重新排版                                    → 45.4
     ⑤ 页脚重排（左侧公司简介收窄）                              → 45.5
     ⑥ 右侧悬浮栏升级（要"大气"）                                → 45.6
     ⑦ 栏目页左侧分类目录重设计                                  → PHP + 45.7
     ⑧ 产品详情淘宝式多图 + 点击遮罩放大                          → PHP + 45.8

   ⚠ 特异性纪律（与 v21 同一条规矩，这里再写一遍）：
     theme.v9 / v10 里大量规则是**无前缀**的，而 v13–v22 是**层层叠加**的。
     本文件所有顶层规则都会压掉 theme.v9 里同特异性的媒体查询规则，
     所以凡是被本文件改过的属性，必须在 45.9 里按断点显式重设一遍。
     本文件已覆盖、必须在 45.9 重设的断点规则清单：
       · @media(max-width:1080px) .footer-in{3 列}   ← v9:982  → 45.9
       · @media(max-width:700px)  .footer-in{2 列}   ← v9:1010 → 45.9
       · @media(max-width:640px)  .footer-in{1 列}   ← v9:1027 → 45.9
       · @media(max-width:900px)  .ph-duo{1 列}      ← v18:337 → 45.9
       · @media(max-width:900px)  .ph-qa-win{高}     ← v18:338 → 45.9
       · @media(max-width:760px)  .ph-qa-win{高}     ← v18:349 → 45.9
       · .pg 两列栅格（内页产品详情）                → 45.9 单列
   ============================================================ */

/* ═══════════════ 45.1 首屏轮播：把"切"做成"推"（需求 1） ═══════════════ */

/* 客户："banner切换特效 需要再丝滑一些动画效果"。
   先看清楚上一版在做什么（_v18.css:39 / 50-57）：
     · 轨道 transition:transform .86s cubic-bezier(.33,.02,.16,1)
       —— (.33,.02,.16,1) 这条曲线前 30% 几乎不动、后段猛冲，
          观感是"顿一下再窜出去"，这正是"不丝滑"的来源；
     · 图片只做 scale(1.06) → scale(1) 的推近，7.4s；
     · 离开的那张与进来的那张**亮度完全一样**，两帧在视口边缘时
       分不出谁在前谁在后，脑子会把它读成"图被硬换了一下"。
   三处一起改：
     ① 曲线换成 (.22,.72,.2,1)：起步就有速度、收尾长而缓（标准 material
        的"decelerate"，视频剪辑里最常用的推轨曲线），时长 .92s → 1.04s；
     ② 非当前帧压暗到 .42 —— 进出画时是"渐亮 / 渐暗"，不再是硬切；
        这一条对"丝滑感"的贡献比曲线还大，因为它给了眼睛一个过渡信号；
     ③ 图注拆成两段错峰（标题先、说明后），错开 140ms，
        看起来是"文字跟着画面一起落位"，而不是一次性闪出来。 */
body.p-home .ph-hs-track{
    transition:transform 1.04s cubic-bezier(.22,.72,.2,1);
    will-change:transform;
}
body.p-home .ph-hs-i{
    opacity:.42;
    transition:opacity .74s var(--ease) .06s;
}
body.p-home .ph-hs-i.is-on{opacity:1}

/* 图注：父级不再做整体位移（会和子元素动画叠加成"抖两下"），
   改成 b / i 各自延迟入场 */
body.p-home .ph-hs-cap{opacity:1;transform:none;transition:none}
body.p-home .ph-hs-cap b{
    opacity:0;transform:translateY(16px);
    transition:opacity .58s var(--ease),transform .78s cubic-bezier(.22,.72,.2,1);
}
body.p-home .ph-hs-cap i{
    opacity:0;transform:translateY(12px);
    transition:opacity .6s var(--ease),transform .82s cubic-bezier(.22,.72,.2,1);
}
body.p-home .ph-hs-i.is-on .ph-hs-cap b{opacity:1;transform:none;transition-delay:.26s}
body.p-home .ph-hs-i.is-on .ph-hs-cap i{opacity:1;transform:none;transition-delay:.40s}

/* 推近（Ken Burns）加强 + 奇偶交替方向：
   transform-origin 换到另一侧，同一段 scale 就有了左右不同的"呼吸"方向，
   连看四张不会觉得是同一段动画循环播。 */
body.p-home .ph-hs-i img{transform:scale(1.085)}
body.p-home .ph-hs-i:nth-child(odd) img{transform-origin:0% 50%}
body.p-home .ph-hs-i:nth-child(even) img{transform-origin:100% 50%}
body.p-home .ph-hs-i.is-on img{
    transform:scale(1);
    transition:transform 9.2s cubic-bezier(.19,.62,.26,1);
}

/* 指示条：当前项加一道品牌渐变 + 光晕，切换时是"亮着滑过去"，不是跳一下 */
body.p-home .ph-hs-dot{height:4px;border-radius:3px;background:rgba(255,255,255,.22)}
body.p-home .ph-hs-dot.is-on{
    width:48px;
    background:linear-gradient(90deg,var(--d-brand),#4fc3ff);
    box-shadow:0 0 12px rgba(34,193,255,.55);
}
/* 箭头：加一层毛玻璃，hover 时右侧那个轻轻推出去一点 */
body.p-home .ph-hs-p{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.p-home .ph-hs-p--r:hover{transform:translateX(3px) scale(1.06)}
body.p-home .ph-hs-p--l:hover{transform:translateX(-3px) scale(1.06)}

/* ═══════════════ 45.2 热销产品卡：图片缓慢放大（需求 2） ═══════════════ */

/* 客户："热销商品 鼠标放上去 图片能有一个慢慢放大效果"。
   v15 其实已经有 scale(1.05) / .62s —— 但 .62s 太快，看起来是"弹一下"，
   而且 1.05 的幅度在一张 4:3 卡上几乎看不出来。
   改成 1.085 / 1.05s + 长收尾曲线：鼠标压上去能"看着它慢慢长"。
   同时给容器加 will-change，避免 Safari 上放大时边缘发虚。 */
body.p-home .ph-feat-im{background:var(--paper-2)}
body.p-home .ph-feat-im img{
    transition:transform 1.05s cubic-bezier(.22,.61,.24,1);
    will-change:transform;
}
body.p-home .ph-feat-i:hover .ph-feat-im img{transform:scale(1.085)}

/* 内页产品卡 / 案例卡用同一套（客户讲的是"热销商品"，全站统一观感） */
body.p-inner .prod-img img,
body.p-inner .case-img img{
    transition:transform .95s cubic-bezier(.22,.61,.24,1);
    will-change:transform;
}
body.p-inner .prod-card:hover .prod-img img,
body.p-inner .case-card:hover .case-img img{transform:scale(1.075)}

/* ═══════════════ 45.3 生产实力：左图右列联动（需求 3） ═══════════════ */

/* 客户："生产实力 那左右能不能做成联动切换效果"。
   结构见 home.php 的 .ph-fw3（左 .ph-fw3-stage 图组 / 右 .ph-fw3-list 列表）。
   ────────────────────────────────────────────────────────────────
   三条实现要点：
   ① 左图组用「绝对定位叠放 + opacity/scale 过渡」，不用 display 切换 ——
      display 切换没有过渡，只能硬切；叠放才能做交叉淡入。
   ② 左侧整体压住一个 16:9 左右的高度（clamp），右侧列表行高等分
      （grid-auto-rows:minmax(0,1fr)），两栏底部自然对齐、不会一边长一边短。
   ③ 当前项的左边缘挂 2px 竖条，`.run` 时用 scaleY 动画跑满 8s
      —— 与 JS 的 8000ms 自动切换同拍，它是"接下来会自动到这条"的预告。 */
body.p-home .ph-fw3{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(20px,2.6vw,44px);
    align-items:stretch;
}
body.p-home .ph-fw3-stage{
    position:relative;overflow:hidden;border-radius:3px;
    background:var(--d-ink-2);
    min-height:clamp(292px,29vw,430px);
}
body.p-home .ph-fw3-sl{
    position:absolute;inset:0;margin:0;
    opacity:0;visibility:hidden;transform:scale(1.045);
    transition:opacity .8s var(--ease),transform 1.25s cubic-bezier(.22,.72,.2,1),visibility .8s;
}
body.p-home .ph-fw3-sl.is-on{opacity:1;visibility:visible;transform:scale(1)}
body.p-home .ph-fw3-sl img{width:100%;height:100%;object-fit:cover;display:block}
body.p-home .ph-fw3-cap{
    position:absolute;left:0;right:0;bottom:0;
    padding:64px 22px 20px;color:#fff;
    background:linear-gradient(0deg,rgba(8,22,40,.94) 0,rgba(8,22,40,.5) 54%,rgba(8,22,40,0) 100%);
}
body.p-home .ph-fw3-cap b{
    display:block;font-size:17.5px;font-weight:600;
    letter-spacing:-.01em;line-height:1.4;color:#fff;
}
body.p-home .ph-fw3-cap i{
    display:block;margin-top:7px;font-style:normal;
    font-size:12.6px;line-height:1.72;color:rgba(255,255,255,.76);
}
body.p-home .ph-fw3-idx{
    position:absolute;right:16px;top:16px;z-index:3;
    display:inline-flex;align-items:baseline;gap:4px;
    padding:6px 12px;border-radius:20px;
    background:rgba(8,22,40,.46);color:#fff;
    border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    font-size:11.5px;font-variant-numeric:tabular-nums;
}
body.p-home .ph-fw3-idx b{font-size:15px;font-weight:700;letter-spacing:-.02em}
body.p-home .ph-fw3-idx i{font-style:normal;opacity:.5;margin:0 1px}

/* 右列 */
body.p-home .ph-fw3-list{
    list-style:none;margin:0;padding:0;
    display:grid;grid-auto-rows:minmax(0,1fr);
}
body.p-home .ph-fw3-li{display:flex;border-top:1px solid var(--line)}
body.p-home .ph-fw3-li:first-child{border-top:0}
body.p-home .ph-fw3-i{
    position:relative;flex:1 1 auto;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:14px;
    padding:13px 14px 13px 20px;
    background:none;border:0;text-align:left;cursor:pointer;
    font:inherit;color:inherit;
    transition:background .3s var(--ease),padding-left .3s var(--ease);
}
body.p-home .ph-fw3-i:hover{background:var(--paper-2)}
body.p-home .ph-fw3-i.on{background:var(--paper-2);padding-left:26px}
body.p-home .ph-fw3-n{
    font-size:12px;font-weight:700;letter-spacing:.04em;
    color:var(--d-t3);font-variant-numeric:tabular-nums;
    transition:color .3s var(--ease);
}
body.p-home .ph-fw3-i.on .ph-fw3-n{color:var(--brand-d)}
body.p-home .ph-fw3-b{display:block;min-width:0}
body.p-home .ph-fw3-t{
    display:block;font-size:15px;font-weight:600;color:var(--ink);
    letter-spacing:-.01em;line-height:1.45;
    transition:color .3s var(--ease);
}
body.p-home .ph-fw3-i.on .ph-fw3-t{color:var(--brand-d)}
body.p-home .ph-fw3-p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:5px;
    font-style:normal;font-size:12.6px;line-height:1.74;color:var(--d-t2);
    opacity:.7;transition:opacity .3s var(--ease);
}
body.p-home .ph-fw3-i.on .ph-fw3-p{opacity:1}
body.p-home .ph-fw3-ar{
    font-style:normal;font-size:14px;color:var(--brand-d);
    opacity:0;transform:translateX(-5px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
}
body.p-home .ph-fw3-i.on .ph-fw3-ar{opacity:1;transform:none}
/* 左边缘的蓝色进度条（与 JS 的 8s 自动切换同拍） */
body.p-home .ph-fw3-pg{
    position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--line-2);
    transform:scaleY(0);transform-origin:top center;
}
body.p-home .ph-fw3-pg.run{
    background:var(--brand);
    animation:phFwPg 8s linear forwards;
}
@keyframes phFwPg{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* 下面那排数字：与上方联动区拉开一点距离，数字字号统一到 --d-ink 的色阶 */
body.p-home .ph-facnum{margin-top:clamp(26px,3vw,44px)}

/* ═══════════════ 45.4 资讯与问答：整块重排（需求 4） ═══════════════ */

/* 客户："资讯与问答 页面还需要优化设计细节，重新排版设计"（附了截图）。
   截图里那一版的四个问题：
     ① 两栏直接铺在浅灰底上，没有任何容器边界 —— 左栏内容短、右栏长，
        底部留出大片灰，看起来像"两块东西没排完"；
     ② 左栏头条的日期是「大号细体 24 + 年月」，字号够大但**没有色块依托**，
        和右边的标题挤在一起，读不出"这是日期"；
     ③ 右栏每条 Q/A 之间只有一条 1px 细线，Q 图标是 20px 蓝方块，
        A 文字与 Q 文字左边缘差半个图标宽，六条排下来像一列散落的段落；
     ④ 两栏高度不齐 —— 左栏 5 条新闻比右栏 6 条问答短一大截。
   重排方案：
     · 整块包进一张**白卡**（浅灰底上的白卡，边界一出来，"两栏"才成立）；
     · 左栏头条日期做成品牌蓝渐变小卡（日号 30px 白字 + 年月），
       读者一眼知道这是日期块；标题 2 行、摘要 2 行，底部一行 阅读数 + 圆形箭头；
     · 右栏 Q/A 的 A 与 Q 文字**左边缘对齐**（图标定宽 22px），
       条与条之间改虚线，视觉上更像"一组问答"而不是"六段文字"；
     · 两栏 padding 与 min-height 拉平（右栏用 flex 撑满）。 */
body.p-home .ph-duo{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:0;
    padding:clamp(22px,2.6vw,38px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:4px;
    box-shadow:0 1px 2px rgba(13,28,48,.05);
}
body.p-home .ph-ncol{padding-right:clamp(20px,2.4vw,36px);min-width:0}
body.p-home .ph-faqwrap{
    display:flex;flex-direction:column;min-width:0;
    padding-left:clamp(20px,2.4vw,36px);
    border-left:1px solid var(--line);
}
/* 栏头：左侧一条品牌竖线 + 下边框，左右两栏共用同一节奏 */
body.p-home .ph-duo-h{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-bottom:13px;margin-bottom:18px;
    border-bottom:1px solid var(--line);
}
body.p-home .ph-duo-h b{
    position:relative;padding-left:12px;
    font-size:16px!important;font-weight:700!important;color:var(--ink);
}
body.p-home .ph-duo-h b::before{
    content:'';position:absolute;left:0;top:50%;margin-top:-7px;
    width:3px;height:14px;border-radius:2px;background:var(--brand);
    /* v18 那条规则是 inline-block + vertical-align，这里改 absolute 定位，
       顺手把 v18/margin-right 的残留一起盖掉 */
    display:block;margin-right:0;vertical-align:baseline;
}
body.p-home .ph-duo-h a{font-size:12.5px!important}
body.p-home .ph-duo-h span{font-size:11.5px!important;color:var(--d-t3)}

/* ── 左栏头条 ── */
body.p-home .ph-nw-lead{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:clamp(16px,1.8vw,20px);align-items:start;
    padding:0 0 20px;border-bottom:1px solid var(--line);
}
body.p-home .ph-nw-rail{
    width:78px;flex:0 0 auto;
    padding:14px 0 12px;border-radius:3px;text-align:center;
    /* 渐变整条压深：原来顶色是 #0a86ff，相对亮度 L≈0.243 —— 白字压在上面
       实测只有 3.58:1（10.5px 的 "2026.07" 更是 2.88:1），
       就算把小标改成 100% 纯白也到不了 AA 的 4.5:1。
       所以不是调文字透明度能救的，得降底色的亮度：
       顶色换 --brand-d(#0055c4, L≈0.105)，小标 5.08:1、大号日期 6.78:1，
       都在 AA 之上，观感也从"亮蓝塑料块"变成更沉的品牌深蓝。
       顶边留一道 1px 内高光，保留原来那点斜向渐变的质感。 */
    background:linear-gradient(158deg,var(--brand-d) 0,#00479f 52%,#00357c 100%);
    box-shadow:0 14px 26px -18px rgba(0,80,180,.85),
               inset 0 1px 0 rgba(255,255,255,.16);
}
body.p-home .ph-nw-dd{
    display:block;font-size:30px;font-weight:700;line-height:1;
    letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-ym{
    display:block;margin-top:7px;font-style:normal;
    font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.82);
}
body.p-home .ph-nw-t{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    font-size:16.5px;font-weight:600;line-height:1.5;color:var(--ink);
    letter-spacing:-.01em;
}
body.p-home .ph-nw-s{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:9px;
    font-size:12.8px;line-height:1.78;color:var(--d-t2);
}
body.p-home .ph-nw-foot{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:14px;
}
body.p-home .ph-nw-view{
    font-style:normal;font-size:11.5px;color:var(--d-t3);
    font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-go{
    width:26px;height:26px;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid var(--line);color:var(--brand-d);font-style:normal;font-size:12px;
    transition:background .28s var(--ease),color .28s var(--ease),
               border-color .28s var(--ease),transform .28s var(--ease);
}
body.p-home .ph-nw-lead:hover .ph-nw-t{color:var(--brand-d)}
body.p-home .ph-nw-lead:hover .ph-nw-go{
    background:var(--brand);border-color:var(--brand);color:#fff;
    transform:translateX(3px);
}

/* ── 左栏列表 ── */
body.p-home .ph-nw-a{
    grid-template-columns:52px minmax(0,1fr) 14px;
    gap:12px;padding:12px 0;
    transition:padding-left .28s var(--ease);
}
body.p-home .ph-nw-a:hover{padding-left:6px}
body.p-home .ph-nw-d2{
    font-size:12px;color:var(--d-t3);font-variant-numeric:tabular-nums;
    transition:color .28s var(--ease);
}
body.p-home .ph-nw-t2{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:13.6px;color:var(--ink-2);
    transition:color .28s var(--ease);
}
body.p-home .ph-nw-all{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:16px;font-size:12.5px;font-weight:600;
}
body.p-home .ph-nw-ai{font-style:normal;transition:transform .28s var(--ease)}
body.p-home .ph-nw-all:hover .ph-nw-ai{transform:translateX(4px)}

/* ── 右栏问答流 ── */
body.p-home .ph-qa{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-top:2px}
body.p-home .ph-qa-win{height:clamp(300px,25vw,384px);flex:1 1 auto}
body.p-home .ph-qa-i{
    margin:0;padding:15px 0 16px;
    background:none;border:0;border-bottom:1px dashed var(--line-2);border-radius:0;
}
body.p-home .ph-qa-i:last-child{border-bottom:0}
body.p-home .ph-qa-i:hover{box-shadow:none}
/* Q / A 图标定宽 22px —— 这样 Q 文字与 A 文字的左边缘严格对齐，
   六条排下来是一条竖直的阅读线，而不是每行各自缩进 */
body.p-home .ph-qa-q{gap:11px;align-items:flex-start}
body.p-home .ph-qa-a{gap:11px;align-items:flex-start;margin-top:9px;padding:0;background:none;border:0}
body.p-home .ph-qa-ic{
    flex:0 0 22px;width:22px;height:22px;border-radius:6px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px!important;font-weight:700;font-style:normal;
    margin-top:1px;
    background:var(--brand);color:#fff;
}
body.p-home .ph-qa-ic--a{background:var(--paper-2);border:1px solid var(--line);color:var(--d-t2)}
body.p-home .ph-qa-qt{
    font-size:14.5px!important;font-weight:600;color:var(--ink);
    line-height:1.62;letter-spacing:-.01em;
    transition:color .26s var(--ease);
}
body.p-home .ph-qa-i:hover .ph-qa-qt{color:var(--brand-d)}
body.p-home .ph-qa-at{font-size:12.8px!important;line-height:1.82;color:var(--d-t2)}

/* ═══════════════ 45.5 页脚重排（需求 5） ═══════════════ */

/* 客户："底部foot也需要重新优化设计排版 可以考虑左边公司简介宽度少一些"。
   上一版（v20）栅格 1.46fr 1.12fr .76fr 1.34fr：
   简介栏占 1.46 份却是全页脚字最少的一栏（只有 logo + 一段话），
   而「产品目录」两列之后每列只有 ~121px，长品类名一直在折行。
   现在：简介 1.46 → 1.02（收窄），目录 1.12 → 1.3（两列各有余量），
   新闻 0.76 → .86，联系 1.34 → 1.26。
   另外给栏与栏之间加一条极淡的竖分隔线（宽屏才显示）——
   四栏信息量差很多，没有分隔线时中间两栏会糊在一起。 */
body.p-home .footer-in,
body.p-inner .footer-in{
    grid-template-columns:1.02fr 1.3fr .86fr 1.26fr;
    gap:clamp(20px,2.4vw,40px);
}
body.p-home .fcol + .fcol,
body.p-inner .fcol + .fcol{
    border-left:1px solid rgba(255,255,255,.075);
    padding-left:clamp(16px,2vw,30px);
}
/* 栏头：字号收一档、字距放开，下面那条短线的位置跟着调 */
body.p-home .fcol .fcol-h,
body.p-inner .fcol .fcol-h{
    font-size:14px!important;font-weight:700;letter-spacing:.02em;
    margin-bottom:15px;
}
body.p-home .fcol .fcol-h::after,
body.p-inner .fcol .fcol-h::after{
    width:18px;height:2px;margin-top:8px;
    background:linear-gradient(90deg,var(--brand),#4fc3ff);
}
/* 链接：hover 时整体右移 4px，节拍感比单纯变色强 */
body.p-home .fcol ul li a,
body.p-inner .fcol ul li a{
    display:inline-block;
    transition:color .24s var(--ease),transform .24s var(--ease);
}
body.p-home .fcol ul li a:hover,
body.p-inner .fcol ul li a:hover{transform:translateX(4px)}
body.p-home .fcol ul li,
body.p-inner .fcol ul li{margin-bottom:8px}
/* 简介栏：收窄后一行更少字，行高放松一点压住"窄而高" */
body.p-home .fdesc,body.p-inner .fdesc{
    font-size:12.6px;line-height:1.95;margin-bottom:0;
    color:var(--nv-txt-2);
}
body.p-home .flogo img,body.p-inner .flogo img{max-width:188px;height:auto}
/* 底部信息条 */
body.p-home .foot-bar-in,
body.p-inner .foot-bar-in{min-height:56px;font-size:12.5px}

/* ═══════════════ 45.6 右侧悬浮栏升级（需求 6） ═══════════════ */

/* 客户："右侧悬浮特效需要优化设计，当前不够大气"。
   v21 只是把方块从深墨蓝换成白的 —— 尺寸 50px、圆角 3px、一枚硬投影，
   四个白方块各自漂在页面上，确实是"功能块"而不是"一组工具"。
   升级思路（"大气"= 有整体感 + 有主次 + 动效有分量）：
     · 底座：给 .side-tools 一层半透明毛玻璃胶囊（圆角 20px + 内描边 + 双层投影），
       四个按钮从"各自漂着"变成"嵌在一件工具里"；
     · 尺寸：50 → 52px，圆角 3 → 14px，图标 21 → 22px（线条比例更松）；
     · 主次：首个按钮（在线提交需求）品牌蓝实底，其余白底 —— 一深三浅；
     · 动效：hover 时向左推 4px + 放大 1.05 + 蓝色光晕，而不是原来的 2px 平移；
     · 弹层：圆角 14px、投影加深、二维码 112 → 124px。 */
.side-tools{
    right:18px;bottom:110px;gap:6px;
    padding:7px;border-radius:20px;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);
    backdrop-filter:blur(14px) saturate(1.5);
    box-shadow:
        0 18px 46px -20px rgba(8,22,44,.42),
        0 2px 6px rgba(8,22,44,.06);
}
.st-btn{
    width:52px;height:52px;border-radius:14px;
    background:#fff;color:var(--brand-d);
    border:1px solid #dbe4f0;
    box-shadow:0 1px 2px rgba(8,22,44,.05);
    transition:background .3s var(--ease),color .3s var(--ease),
               border-color .3s var(--ease),transform .3s var(--ease),
               box-shadow .3s var(--ease);
}
.st-btn .ic{width:22px;height:22px}
.st-btn:hover{
    --st-bg:var(--brand);
    background:var(--brand);color:#fff;border-color:var(--brand);
    transform:translateX(-4px) scale(1.05);
    box-shadow:0 16px 32px -14px rgba(0,118,255,.72);
}
.st-wrap--flat .st-btn{
    background:linear-gradient(150deg,#0a86ff 0,var(--brand) 55%,#0058c4 100%);
    color:#fff;border-color:var(--brand);
    box-shadow:0 12px 24px -14px rgba(0,118,255,.9);
}
.st-wrap--flat .st-btn .ic .st-cut{stroke:var(--brand)}
.st-wrap--flat .st-btn .ic .st-crease{stroke:var(--brand)}
.st-wrap--flat .st-btn:hover{
    background:var(--brand-d);border-color:var(--brand-d);
    box-shadow:0 16px 30px -14px rgba(0,91,192,.8);
}
.st-wrap--flat .st-btn:hover .ic .st-cut{stroke:var(--brand-d)}
.st-wrap--flat .st-btn:hover .ic .st-crease{stroke:var(--brand-d)}
/* 回到顶部：与上面四个之间加一条细线，语义上它是"导航"不是"联系" */
.st-btn--top{position:relative;margin-top:8px}
.st-btn--top::before{
    content:'';position:absolute;left:12px;right:12px;top:-5px;height:1px;
    background:var(--line);
}
/* 弹层：更立体的卡片 */
.st-pop{
    border-radius:14px;padding:16px 18px;
    box-shadow:0 26px 60px -24px rgba(6,20,42,.42),0 2px 8px rgba(6,20,42,.06);
    transform:translate(12px,-50%);
}
.st-wrap:hover .st-pop,
.st-wrap:focus-within .st-pop{transform:translate(0,-50%)}
.st-pop--qr img{width:124px;height:124px;border-radius:6px}

/* ═══════════════ 45.7 栏目页左侧分类目录：重设计（需求 7） ═══════════════ */

/* 客户："各个栏目页左侧分类目录需要优化设计，当前不喜欢"。
   结构改动见 _side.php 的注释（全角空格缩进 → 显式 lv 层级）。
   这一节负责视觉：
     · 卡片：去掉"浅蓝头 + 白身"的方块拼接，改成一整块柔和卡片；
     · 栏头：深墨蓝渐变底 + 白字 + 右侧英文小字（标题只出现一次，不再有
       「产品中心」后面跟一个同色系更浅的英文的"补丁感"）；
     · 列表：父项 14px/600、子项 13.2px、缩进用 padding（不再靠全角空格）；
     · 悬停：左侧滑出一条品牌蓝竖条 + 整行右移 4px；
     · 当前项：品牌蓝实底白字，一眼可辨（原来是浅蓝底 + 蓝字，在浅蓝栏头
       下面几乎融成一片）。 */
body.p-inner .side-box{
    border:1px solid var(--line);
    border-radius:5px;
    box-shadow:0 1px 2px rgba(13,28,48,.045);
    margin-bottom:18px;
}
body.p-inner .side-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:15px 18px;
    border-left:0;
    background:linear-gradient(135deg,#0b1b2e 0,#123a63 100%);
    color:#fff;
    font-size:15px!important;font-weight:600;
}
body.p-inner .side-head b{font-size:15px;font-weight:600;color:#fff;letter-spacing:.01em}
body.p-inner .side-head span{
    /* 白色透明度从 .58 提到 .72：对比度审计实测 .58 在这条墨蓝渐变
       （#0b1b2e → #123a63）上只有 4.35:1，10px 的英文小标到不了 AA 的 4.5:1。
       .72 是 6.6:1，过线还有余量；同时它仍明显比 15px 纯白中文标题弱一档，
       层级关系没有丢。别再往下调了，这行是硬指标。 */
    font-size:10px;letter-spacing:1.8px;color:rgba(255,255,255,.72);
    opacity:1;text-transform:uppercase;
}
body.p-inner .side-nav{padding:7px 0}
body.p-inner .side-nav a.side-a{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 16px 11px 20px;
    border-bottom:0;
    font-size:14px;color:var(--ink-2);
    transition:background .26s var(--ease),color .26s var(--ease),
               padding-left .26s var(--ease);
}
body.p-inner .side-nav a.side-a::before{
    content:'';position:absolute;left:0;top:50%;
    width:3px;height:22px;border-radius:0 2px 2px 0;
    background:var(--brand);
    opacity:0;transform:translateY(-50%) scaleY(.35);
    transition:opacity .26s var(--ease),transform .3s var(--ease);
}
body.p-inner .side-nav a.side-a:not(.side-a--sub) .side-a-t{font-weight:600}
body.p-inner .side-nav a.side-a:hover{background:var(--paper-2);color:var(--brand-d);padding-left:25px}
body.p-inner .side-nav a.side-a:hover::before{opacity:1;transform:translateY(-50%) scaleY(1)}
body.p-inner .side-nav a.side-a.on{
    /* 底色用 --brand-d 而不是 --brand：白字压在 #0076ff 上只有 4.17:1，
       15px 正文到不了 AA 的 4.5:1（对比度审计会红）。#0055c4 是 6.64:1，
       观感上还是同一支品牌蓝，只是深了一档。 */
    background:var(--brand-d);
    color:#fff;
    padding-left:25px;
    box-shadow:none;
}
body.p-inner .side-nav a.side-a.on::before{opacity:0}
body.p-inner .side-nav a.side-a--sub{
    padding-left:34px;font-size:13.2px;color:var(--d-t2);
}
body.p-inner .side-nav a.side-a--sub:hover{padding-left:39px}
body.p-inner .side-nav a.side-a--sub.on{padding-left:39px}
body.p-inner .side-a-i{
    width:13px;height:13px;flex:0 0 auto;
    color:var(--steel-300);opacity:.7;
    transition:color .26s var(--ease),opacity .26s var(--ease),transform .26s var(--ease);
}
body.p-inner .side-nav a.side-a:hover .side-a-i{color:var(--brand);opacity:1;transform:translateX(2px)}
body.p-inner .side-nav a.side-a.on .side-a-i{color:rgba(255,255,255,.88);opacity:1}
/* 热门内容：序号 + 标题两列，悬停时序号变蓝、标题右移 */
body.p-inner .side-hot{padding:7px 0}
body.p-inner .side-hot a{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
    align-items:baseline;
    padding:10px 18px;
    border-bottom:0;
    transition:background .24s var(--ease);
}
body.p-inner .side-hot a:hover{background:var(--paper-2)}
body.p-inner .side-hot-n{
    /* --steel-300(#afc1d4) 在白底上只有 1.84:1，11px 完全读不出来；
       换 --steel-600(#3a5c84) 是 6.98:1，序号该是"安静但看得见"的那一层。 */
    font-size:11px;font-weight:700;color:var(--steel-600);
    font-variant-numeric:tabular-nums;
    transition:color .24s var(--ease);
}
body.p-inner .side-hot a:hover .side-hot-n{color:var(--brand-d)}
body.p-inner .side-hot-t{
    font-size:13.2px;line-height:1.7;color:var(--ink-2);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 联系卡：顶部一条品牌渐变细线做锚点 */
body.p-inner .side-contact{position:relative;overflow:hidden;border-radius:5px}
body.p-inner .side-contact::before{
    content:'';position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg,var(--brand),#4fc3ff);
}

/* ═══════════════ 45.8 产品详情：淘宝式多图 + 遮罩放大（需求 8） ═══════════════ */

/* 客户："产品详情页 没有类似淘宝那样多图，也没有点击产品图没有弹出遮罩层放大效果"。
   结构改动见 product_detail.php（缩略图挪到主图左侧 + 新增 .pgl 遮罩层）。
   这一节负责视觉： */
/* ① 图廊：左缩略图列 + 右主图；只有 1 张图时不带 .pg--multi，退回单列 */
body.p-inner .pg{display:grid;gap:12px}
body.p-inner .pg--multi{grid-template-columns:88px minmax(0,1fr)}
body.p-inner .pg-thumbs{
    display:flex;flex-direction:column;gap:10px;
    margin-top:0;padding-bottom:0;
    overflow-x:visible;overflow-y:auto;
    max-height:min(560px,62vh);
    scrollbar-width:thin;
}
body.p-inner .pg-th{
    width:88px;height:88px;border-radius:6px;
    transition:border-color .24s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease);
}
body.p-inner .pg-th:hover{transform:translateY(-2px);border-color:var(--brand-l2)}
body.p-inner .pg-th.on{
    border-color:var(--brand);
    box-shadow:0 0 0 2px var(--brand-l2);
}
body.p-inner .pg-main{cursor:zoom-in;border-radius:5px}
body.p-inner .pg-main img{transition:transform .9s cubic-bezier(.22,.61,.24,1)}
body.p-inner .pg-main:hover img{transform:scale(1.04)}
body.p-inner .pg-main:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 计数器挪到右上角 —— 右下角要留给"点击放大"角标 */
body.p-inner .pg-count{right:14px;top:14px;bottom:auto;left:auto}
body.p-inner .pg-zoom{
    position:absolute;right:12px;bottom:12px;z-index:3;
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:20px;
    background:rgba(9,20,34,.6);color:#fff;
    font-size:11.5px;letter-spacing:.01em;
    opacity:0;transform:translateY(6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    pointer-events:none;
}
body.p-inner .pg-zoom svg{width:13px;height:13px}
body.p-inner .pg-main:hover .pg-zoom{opacity:1;transform:none}

/* ② 遮罩层：固定全屏，flex 居中；底图用独立可点元素（点空白关，点图不关） */
.pgl{position:fixed;inset:0;z-index:200;display:none}
.pgl.on{display:flex;align-items:center;justify-content:center}
.pgl-mask{
    position:absolute;inset:0;
    background:rgba(6,14,26,.9);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.pgl-fig{
    position:relative;z-index:2;margin:0;
    max-width:min(1180px,92vw);max-height:86vh;
    display:flex;flex-direction:column;align-items:center;gap:14px;
}
.pgl-fig img{
    max-width:100%;max-height:76vh;
    object-fit:contain;display:block;
    border-radius:5px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
.pgl-cap{
    font-style:normal;font-size:13px;line-height:1.7;
    color:rgba(255,255,255,.8);text-align:center;max-width:min(880px,86vw);
}
.pgl-x{
    position:absolute;right:22px;top:20px;z-index:4;
    width:44px;height:44px;padding:0;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.1);color:#fff;
    border:1px solid rgba(255,255,255,.24);
    transition:background .26s var(--ease),color .26s var(--ease),
               border-color .26s var(--ease),transform .26s var(--ease);
}
.pgl-x:hover{background:#fff;color:var(--d-ink);border-color:#fff;transform:rotate(90deg)}
.pgl-x svg{width:20px;height:20px}
.pgl-ar{
    position:absolute;top:50%;margin-top:-26px;z-index:4;
    width:52px;height:52px;padding:0;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.1);color:#fff;
    border:1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:background .26s var(--ease),border-color .26s var(--ease),transform .26s var(--ease);
}
.pgl-ar svg{width:22px;height:22px}
.pgl-ar--l{left:22px}
.pgl-ar--r{right:22px}
.pgl-ar:hover{background:var(--brand);border-color:var(--brand)}
.pgl-ar--l:hover{transform:scale(1.06) translateX(-2px)}
.pgl-ar--r:hover{transform:scale(1.06) translateX(2px)}
.pgl-c{
    position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;
    display:inline-flex;align-items:baseline;gap:4px;
    padding:6px 15px;border-radius:20px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
    color:#fff;font-size:12px;font-variant-numeric:tabular-nums;
}
.pgl-c b{font-size:15px;font-weight:700}
.pgl-c i{font-style:normal;opacity:.5;margin:0 1px}
/* 入场：遮罩淡入 + 图片从小到大轻推，不做位移（位移会让人以为图在跑） */
.pgl.on .pgl-mask{animation:pglFade .3s ease both}
.pgl.on .pgl-fig{animation:pglPop .42s cubic-bezier(.2,.8,.24,1) both}
.pgl.on .pgl-x,.pgl.on .pgl-c{animation:pglFade .34s ease .08s both}
.pgl.on .pgl-ar{animation:pglFade .34s ease .12s both}
@keyframes pglFade{from{opacity:0}to{opacity:1}}
@keyframes pglPop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

/* ═══════════════ 45.9 响应式（本文件改过的属性全部按断点重设） ═══════════════ */

@media(max-width:1240px){
    /* 侧栏随容器收窄，与 v21 的 250px 同拍 */
    body.p-home .ph-fw3{gap:clamp(18px,2.2vw,30px)}
    body.p-home .ph-duo{padding:clamp(20px,2.2vw,28px)}
}

@media(max-width:1080px){
    /* v9:982 在这里把 .footer-in 排成 3 列 —— 45.5 的 4 列必须在这里重设，
       否则简介栏收窄之后 3 列会把「联系我们」挤成两行 */
    body.p-home .footer-in,
    body.p-inner .footer-in{
        grid-template-columns:1.05fr 1.35fr;
        gap:28px 34px;
    }
    /* 两列之后，竖分隔线只留在第二栏（第一栏没有左边） */
    body.p-home .fcol + .fcol,
    body.p-inner .fcol + .fcol{border-left:0;padding-left:0}
    body.p-home .fcol:nth-child(even),
    body.p-inner .fcol:nth-child(even){border-left:1px solid rgba(255,255,255,.075);padding-left:30px}

    /* 生产实力：联动区在 1080 以下改上下（左图在上、右列在下） */
    body.p-home .ph-fw3{grid-template-columns:minmax(0,1fr);gap:22px}
    body.p-home .ph-fw3-stage{min-height:clamp(240px,38vw,340px)}

    /* 产品详情：单列，缩略图回到主图下方横排 */
    body.p-inner .pg{grid-template-columns:minmax(0,1fr)}
    body.p-inner .pg-thumbs{
        flex-direction:row;order:2;
        overflow-x:auto;overflow-y:visible;
        max-height:none;padding-bottom:4px;
    }
    body.p-inner .pg-main{order:1}
}

@media(max-width:980px){
    /* 悬浮栏在平板收一档，别盖住底部的移动导航 */
    .side-tools{right:14px;bottom:100px;padding:6px;border-radius:17px}

    /* ── 产品详情页：把「单列」还给 980 以下的详情栅格（v22 体检发现的老 bug）──
       探针实测 390 视口 doc=484 / clientWidth=390，整页能横向拖 94px，
       二分法一路隐藏到 .detail-gallery 才复位，真凶却不是图廊 ——
       是 .detail-grid 在手机上**仍是两列**，右列（参数/规格区）的
       min-content 撑破了栅格。
       为什么会这样：v9 自己的 @media(max-width:980px) 里写了
       `.detail-grid{grid-template-columns:1fr}`(:980)，但同一份 v9 的第 1226 行
       又有一条**无媒体查询、同特异性 (0,1,0)** 的
       `.detail-grid{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}`。
       媒体查询不增加特异性，源序在后者胜 —— 于是那条单列规则从写下的那天起
       就没生效过。site.css:1118 的同名单列规则也因为加载顺序在前而失效。
       这里用 (0,2,0) 的 `body.p-inner .detail-grid` 显式钉回单列，
       是**恢复 v9 原本的设计意图**，不是改版。
       注：只钉到 980 为止 —— 1024 一档两列各约 470px，放得下图廊，
       没必要把桌面/平板的并排布局也一起收掉。 */
    body.p-inner .detail-grid{
        grid-template-columns:minmax(0,1fr);
        gap:28px;
    }
    body.p-inner .detail-grid>*{min-width:0}
}

@media(max-width:900px){
    /* v18:337 在 ≤900 把 .ph-duo 压成单列 —— 45.4 的栅格与内边距在这里重设 */
    body.p-home .ph-duo{
        grid-template-columns:minmax(0,1fr);
        gap:26px;
        padding:clamp(18px,4vw,26px);
    }
    body.p-home .ph-ncol{padding-right:0}
    body.p-home .ph-faqwrap{
        padding-left:0;
        border-left:0;
        border-top:1px solid var(--line);
        padding-top:26px;
    }
    /* v18:338 的问答窗高度在这里重设 */
    body.p-home .ph-qa-win{height:clamp(320px,60vw,392px)}
}

@media(max-width:820px){
    .side-tools{right:12px;bottom:96px;gap:5px;padding:5px;border-radius:16px}
    .st-btn{width:46px;height:46px;border-radius:12px}
    .st-btn .ic{width:20px;height:20px}
    .st-btn:hover{transform:translateX(-2px) scale(1.03)}
    .st-pop--qr img{width:112px;height:112px}
    /* 遮罩层的按钮给小屏留出更多画面 */
    .pgl-ar{width:44px;height:44px;margin-top:-22px}
    .pgl-ar--l{left:12px}
    .pgl-ar--r{right:12px}
    .pgl-x{right:12px;top:12px;width:40px;height:40px}
    .pgl-c{bottom:14px}
}

@media(max-width:760px){
    /* v18:349 的问答窗高度在这里重设 */
    body.p-home .ph-qa-win{height:clamp(300px,72vw,380px)}
    body.p-home .ph-fw3-cap{padding:52px 18px 16px}
    body.p-home .ph-fw3-idx{right:12px;top:12px}
    body.p-inner .pg-th{width:74px;height:74px}
}

@media(max-width:700px){
    /* v9:1010 在这里把 .footer-in 排成 2 列 */
    body.p-home .footer-in,
    body.p-inner .footer-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
    body.p-home .fcol:nth-child(even),
    body.p-inner .fcol:nth-child(even){border-left:1px solid rgba(255,255,255,.075);padding-left:22px}
}

@media(max-width:640px){
    /* v9:1027 在这里排成 1 列 */
    body.p-home .footer-in,
    body.p-inner .footer-in{grid-template-columns:minmax(0,1fr);gap:26px}
    body.p-home .fcol,
    body.p-inner .fcol{border-left:0;padding-left:0}
    /* 头条：日期砖从"左侧大卡"改成"顶部横条"，否则 390 上只剩 ~200px 放标题 */
    body.p-home .ph-nw-lead{grid-template-columns:minmax(0,1fr);gap:14px}
    body.p-home .ph-nw-rail{
        width:auto;padding:10px 14px;text-align:left;
        display:flex;align-items:baseline;gap:10px;
    }
    body.p-home .ph-nw-dd{font-size:24px}
    body.p-home .ph-nw-ym{margin-top:0}
    body.p-home .ph-nw-a{grid-template-columns:46px minmax(0,1fr) 12px;gap:10px}
    body.p-home .ph-fw3-list{grid-auto-rows:auto}
    body.p-home .ph-fw3-i{padding:12px 12px 12px 16px}
    body.p-home .ph-fw3-i.on{padding-left:20px}
    body.p-home .ph-fw3-t{font-size:14.5px}
}

@media(max-width:520px){
    body.p-home .ph-fw3-stage{min-height:clamp(210px,58vw,300px)}
    body.p-home .ph-fw3-cap b{font-size:16px}
    body.p-home .pg-thumbs{gap:8px}
    body.p-inner .pg-th{width:66px;height:66px}
}

/* ═══════════════ 45.10 动效退让（prefers-reduced-motion） ═══════════════ */

/* ⚠ 这一节必须写在最后：
   45.1–45.8 全是带前缀的高特异性规则，媒体查询**不增加特异性**，
   如果 reduced-motion 写在前面，会被上面的规则反向压掉。
   v18 里那条 @media(prefers-reduced-motion) 同理 —— 它在 v18 内部
   位于本节之前，所以这里必须把动画/过渡**再关一遍**。 */
@media(prefers-reduced-motion:reduce){
    body.p-home .ph-hs-track{transition:none}
    body.p-home .ph-hs-i{opacity:1;transition:none}
    body.p-home .ph-hs-i img,
    body.p-home .ph-hs-i.is-on img{transition:none;transform:none}
    body.p-home .ph-hs-cap b,
    body.p-home .ph-hs-cap i{opacity:1;transform:none;transition:none}
    body.p-home .ph-hs-p:hover,
    body.p-home .ph-hs-p--l:hover,
    body.p-home .ph-hs-p--r:hover{transform:none}
    body.p-home .ph-feat-im img,
    body.p-home .ph-feat-i:hover .ph-feat-im img{transition:none}
    body.p-inner .prod-img img,
    body.p-inner .prod-card:hover .prod-img img{transition:none}
    body.p-home .ph-fw3-sl{transition:none}
    body.p-home .ph-fw3-pg.run{animation:none;transform:scaleY(1)}
    body.p-home .ph-qa-track{animation:none}
    body.p-inner .pg-main img,
    body.p-inner .pg-main:hover img{transition:none;transform:none}
    .st-btn,.st-pop,.pgl.on .pgl-mask,.pgl.on .pgl-fig,
    .pgl.on .pgl-x,.pgl.on .pgl-c,.pgl.on .pgl-ar{
        transition:none;animation:none;
    }
    .st-btn:hover{transform:none}
    .pgl-x:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   theme v23（2026-09-27）—— 客户第 23 轮 10 条需求
   ═══════════════════════════════════════════════════════════════════════════
   需求清单与落点：
     ① 字体/颜色/粗细全站统一 + 新闻·关于下拉重做 + 语言切换 → 46.1 / 46.2 + PHP
     ② 案例/关于/服务/联系 去左栏改宽屏                      → 46.3 + PHP
     ③ 产品列表 多列多图 / 单列横向 双视图                    → 46.4 + PHP
     ④ 右侧悬浮客服按钮与图标重设计                          → 46.5 + PHP
     ⑤ 生产实力 4 个设备 + 联动加强 + 右侧排版重设             → 46.6 + PHP
     ⑥ 客户评价圆点可点击                                    → 46.7 + PHP/JS
     ⑦ 应用行业后台大图 + 前端大图随切换变动 + 板块重设计       → 46.8 + PHP/DB
     ⑧ 公司动态：头条间距 / 日期被遮挡 / 补设计元素            → 46.9 + PHP
     ⑨ 手机端目录左右结构                                    → 46.10
     ⑩ 手机端头部按钮设计 + 点击展开异常                       → 46.11 / 46.12 + JS

   ⚠⚠ 本轮最重要的一件事不在 CSS 里，在构建脚本 _mk23.py 里 ⚠⚠
      theme.v9.css 33.19/33.20 节有两条**不限定作用域**的裸元素兜底：

        i:not([class]){font-size:var(--fs-6)}
        b:not([class]){font-size:var(--fs-5)}
        span:not([class]){font-size:var(--fs-5)}
        …
        p,li,b,strong,span,a,em,i,td,th,dd,dt,label,small:not([class])
          {font-size:var(--fs-5)!important}

      带 !important 那条把全站"没 class 的 span/b/i/em/a/p/li/td/th"钉成 15px，
      而 CSS 层**无法删掉一条 !important 规则**（再写同特异性规则压不过），
      所以只能由 _mk23.py 从 base 里摘掉。这是需求 ①"字体粗细什么都不一样"的根因：
        _c23.py 实测 16 个页面每页 3–13 处组件字号被偷 ——
          侧栏英文小标 10px → 15px      内页 hero 数字 26px → 15px
          公司概况统计带 32px → 15px     生产实力图注 17.5px → 15px
          分页 13.5px → 15px            富文本表格 13.5px → 15px
      46.1 里对这些选择器**显式重写一遍字号**，不靠"摘掉之后应该就对了"的推断。

   ⚠ 层叠纪律（与 v22 一致，别踩）：
      · 媒体查询**不增加特异性**，同特异性下源序在后者胜；
      · 本项目 site.css 先加载、theme 后加载，所以 theme 里的无媒体规则
        会盖掉 site.css 媒体查询里的同名规则（46.12 修的就是这个坑）；
      · 凡本文件改过的属性，必须在 46.13 按断点显式重设一遍。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 46.1 排版令牌归一（需求 1 的"大 bug"） ═══════════════ */

/* 客户："点击栏目各个板块和首页导航字体颜色 字体粗细什么都不一样"。
   实测下来是两件事叠在一起：
     A. 上面说的 !important 兜底在偷字号（构建脚本里摘除）；
     B. 各处的字号/字重本来就是各写各的，没有统一口径：
          首页板块标题 .ph-t   34px / 500   ← 大标题却用 500，看着"虚"
          内页主标题 .main-head h2  24px / 700
          内页块头 .blk-h b    19px / 700
          侧栏栏头 .side-head b  15px / 700
          主导航 .nav>ul>li>a  15px / 500
        五种标题四种字重，扫读时层级是乱的。
   现在收敛成四级，每级一个固定字号 + 字重 + 颜色：
        L1 页面主标题（.page-hero h1）  36 / 700   --ink
        L2 板块标题（.ph-t / .main-head h2）  30 / 700（内页 24 / 700）
        L3 块头（.blk-h b / .side-head b / .ph-duo-h b） 19 / 700
        L4 导航（.nav>ul>li>a）  15 / 600
    颜色统一到 var(--ink)；深色板块里才反白（由 .ph-sec--dark 处理）。 */

/* ── L4 主导航 ──
   ⚠⚠ 页头实测是【白底】，不是深色皮！
     theme.v9 原本给 .header 上的是 --nv-ink（深墨蓝 #0b1b2e），
     但 v10（.header{background:#fff}）和 v13（body.p-home .header{background:#fff}）
     两处都把它改成了白底，源序在后 → 白底胜出。
     而 --nv-txt 是 rgba(255,255,255,.74)，那是给【深色页头】用的浅色字；
     白底 + 浅色字 = 实测对比度 1.00:1，导航等于隐形。
     v20 已经用 body.p-inner .nav>ul>li>a{color:var(--ink-2)} 修过一次，
     本轮 46.1 第一版误写成 var(--nv-txt) 把它覆盖回去了 —— 这是本轮自查抓到的回归。
     所以这里三个作用域（默认 / p-home / p-inner）一次性全部钉成深色：
       常态 --ink-2 (#43536b)  白底 7.81:1
       当前/悬浮 --brand-d (#0055c4)  白底 6.78:1
     下拉面板 .sub 自己仍是深底（#0d1f39），里面的字该反白继续反白，不受这里影响。 */
.nav>ul>li>a,
body.p-home .nav>ul>li>a,
body.p-inner .nav>ul>li>a{
    font-size:15px;
    font-weight:600;
    letter-spacing:.2px;
    color:var(--ink-2);
}
.nav>ul>li>a:hover,.nav>ul>li:hover>a,
body.p-home .nav>ul>li>a:hover,body.p-home .nav>ul>li:hover>a,
body.p-inner .nav>ul>li>a:hover,body.p-inner .nav>ul>li:hover>a{
    color:var(--brand-d);font-weight:600;
}
.nav>ul>li>a.on,
body.p-home .nav>ul>li>a.on,
body.p-inner .nav>ul>li>a.on{color:var(--brand-d);font-weight:700}
/* 悬浮下划线：v9 写的是 background:#fff（同样是给深底页头用的），
   白底上等于没有。v20 只补了 p-inner，这里两个作用域一起补成品牌蓝。 */
.nav>ul>li>a::before,
body.p-home .nav>ul>li>a::before{
    left:16px;right:16px;bottom:12px;height:2px;
    background:var(--brand);transform:scaleX(0);
    transition:transform .24s ease;opacity:.65;
}

/* ── L2 首页板块标题 ── */
body.p-home .ph-t{
    font-size:var(--d2,34px);
    font-weight:700;
    letter-spacing:-.7px;
    color:var(--ink);
}
body.p-home .ph-sec--dark .ph-t{color:#fff}
/* ── L2 内页主标题（产品/案例/新闻/下载各栏目） ── */
.main-head h2{
    font-size:24px;font-weight:700;letter-spacing:-.4px;color:var(--ink);
}
.main-head h2 .mh-cnt{font-size:13px;font-weight:400;color:var(--steel-400)}
.main-head h2 .mh-cnt b{font-weight:600}
/* ── L3 块头 / 栏头 ── */
.blk-h b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
/* ⚠ 必须带 body.p-inner 前缀：v22 45.7 的 body.p-inner .side-head b 是 (0,2,1)，
   写成 .side-head b (0,1,1) 会被它压掉 —— 这类"看起来一样其实差一级"的坑
   本文件里还有 side-nav / side-hot / side-contact 三处，都在 46.10 加了前缀。 */
body.p-inner .side-head b{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em}
body.p-home .ph-duo-h b{font-size:16px;font-weight:700;color:var(--ink)}

/* ── 被 !important 兜底偷过字号的选择器：显式钉回去，不靠推断 ──
   下面每一条都是 _c23.py 实测过"应为 X、实际 15px"的位置。 */
body.p-inner .side-head span{font-size:10px;letter-spacing:1.8px;font-weight:400}
.ph-kpi .pk b{font-size:26px;font-weight:700}
.ph-kpi .pk b i{font-size:12px;font-weight:600;font-style:normal}
.stat-band .sb b{font-size:32px;font-weight:700}
.stat-band .sb b i{font-size:14px;font-weight:600;font-style:normal}
body.p-home .ph-fw3-cap b{font-size:17.5px;font-weight:600}
body.p-home .ph-fw3-cap i{font-size:12.6px;font-style:normal}
.sub-links a{font-size:13.5px}
.pc-tags span{font-size:11.5px}
.pagination a,.pagination span{font-size:13.5px}
body.p-home .ph-facnum-i b{font-size:30px;font-weight:700}
body.p-home .ph-facnum-i b i{font-size:.44em;font-weight:600;font-style:normal}

/* 摘掉兜底之后，富文本正文由 .rich 自己那套字号接管（site.css:669 15px / 表格 13.5px），
   这里补两条显式声明，免得将来再出现"某处突然变大/变小"： */
.rich{font-size:15.5px}
.rich-scroll table{font-size:13.5px}
.rich-scroll tr:first-child b{font-size:13.5px}

/* ═══════════════ 46.2 导航下拉重做 + 语言切换（需求 1） ═══════════════ */

/* 客户："新闻 关于两个下拉需要重新优化调整，现在下拉效果太不高大上"。
   原来这两个是 .sub-simple（202px 宽、一列 4 条纯文字），
   而「产品中心」是 558px 的多列下拉 —— 鼠标从产品扫到新闻，
   下拉从 558 突然缩到 202，视觉上直接"掉档"，这就是"不高大上"的来源。
   现在两个都补成两列：
     左列 = 入口（标题 + 二级链接，与产品中心同构）
     右列 = 推荐卡（新闻给 3 条最新动态带日期；关于给一张"来厂考察"卡）
   面板本身也重做：
     · 顶部品牌蓝细线（原来是 border-top:3px 实心，改成渐变，两头淡出）
     · 背景从纯 #0f2340 改成带一层极淡蓝光的深底，边缘一圈内描边
     · 阴影加深、圆角收到 4px（与全站 3~4px 的圆角口径一致）
     · 出现动画：原来是 all .22s，位移 + 淡入 + 轻微缩放三段分开写，
       现在让"进"比"出"快（in .2s / out .28s），收起时不拖泥带水 */

.sub{
    padding:22px 24px;
    gap:0;
    border-radius:0 0 4px 4px;
    border:1px solid rgba(255,255,255,.10);
    border-top:0;
    background:
        linear-gradient(180deg,rgba(0,118,255,.10) 0,rgba(0,118,255,0) 120px),
        #0d1f39;
    box-shadow:
        0 34px 72px -22px rgba(3,12,26,.72),
        0 2px 0 rgba(255,255,255,.06) inset;
    transition:opacity .28s var(--ease),visibility .28s var(--ease),
               transform .28s var(--ease);
}
.sub::before{
    content:'';position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--brand) 18%,#22c1ff 50%,var(--brand) 82%,transparent);
}
.nav>ul>li:hover .sub{
    opacity:1;visibility:visible;transform:translate(-50%,0);
    transition-duration:.2s;
}
/* 两列下拉 */
.sub-2col{
    display:grid;
    grid-template-columns:minmax(180px,auto) minmax(228px,1fr);
    gap:26px;
    min-width:520px;
}
.sub-col{min-width:0;padding:0}
.sub-col--pick{border-left:1px solid rgba(255,255,255,.10);padding-left:26px}
.sub-title{
    display:block;margin:0 0 12px;padding-left:13px;position:relative;
    font-size:15px;font-weight:700;color:#fff;letter-spacing:.2px;
}
.sub-title::before{
    content:'';position:absolute;left:0;top:5px;width:3px;height:13px;
    border-radius:2px;background:var(--brand);
}
a.sub-title:hover{color:#7cc9ff}
a.sub-title:hover::before{background:#22c1ff}
.sub-title--static{cursor:default}
.sub-links{gap:1px}
.sub-links a{
    padding:6px 0 6px 14px;
    border-left:1px solid rgba(255,255,255,.14);
    font-size:13.5px;color:var(--nv-txt-2,#9fb2ca);
    transition:color .22s var(--ease),border-color .22s var(--ease),padding-left .22s var(--ease);
}
.sub-links a:hover{color:#fff;border-left-color:var(--brand);padding-left:18px}

/* 右列：最新动态三条 */
.sub-pick{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.sub-pick-i{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:11px;align-items:baseline;
    padding:7px 8px 7px 10px;margin-left:-10px;border-radius:3px;
    transition:background .22s var(--ease);
}
.sub-pick-i:hover{background:rgba(255,255,255,.07)}
.sub-pick-i em{
    font-style:normal;font-size:11px;font-weight:600;
    color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.sub-pick-i b{
    font-size:13px;font-weight:400;line-height:1.55;
    color:rgba(255,255,255,.78);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sub-pick-i:hover b{color:#fff}

/* 右列：推荐卡（关于我们） */
.sub-card{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:12px;align-items:start;
    padding:12px;margin-bottom:12px;border-radius:4px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.10);
    transition:background .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease);
}
.sub-card:hover{
    background:rgba(0,118,255,.14);border-color:rgba(0,118,255,.42);
    transform:translateY(-2px);
}
.sub-card-ic{
    width:34px;height:34px;border-radius:4px;
    display:grid;place-items:center;
    background:linear-gradient(150deg,var(--brand) 0,#0058c4 100%);
    color:#fff;flex:0 0 auto;
}
.sub-card-ic svg{width:18px;height:18px;fill:currentColor}
.sub-card-b b{
    display:block;font-size:13.5px;font-weight:600;color:#fff;line-height:1.45;
}
.sub-card-b em{
    display:block;margin-top:4px;font-style:normal;
    font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.56);
}
/* 面板底部的"查看更多" */
.sub-more{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12.5px;font-weight:600;color:#7cc9ff;
    padding-top:10px;border-top:1px solid rgba(255,255,255,.09);
}
.sub-more i{font-style:normal;transition:transform .24s var(--ease)}
.sub-more:hover i{transform:translateX(4px)}

/* ── 语言切换器 ──
   国际多语言外贸站的通行做法：页头右侧「地球图标 + 语言名 + 三角」，
   点开是语言面板，当前语言带勾选。这里不做 hover 开合 ——
   页头右侧本来就挤，鼠标扫过就弹会挡住"获取报价"。 */
.langsw{position:relative}
.langsw-btn{
    display:inline-flex;align-items:center;gap:7px;
    height:38px;padding:0 12px;
    border-radius:3px;
    border:1px solid var(--line);
    background:#fff;
    /* 与导航同一个坑：页头是白底，这里不能沿用 --nv-txt（浅色字会隐形） */
    color:var(--ink-2);
    cursor:pointer;font-size:13px;font-weight:600;
    transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.langsw-btn .ic{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.langsw-btn:hover{background:var(--brand-l);color:var(--brand-d);border-color:rgba(0,118,255,.42)}
.langsw.on .langsw-btn{background:var(--brand-l);color:var(--brand-d);border-color:rgba(0,118,255,.55)}
.langsw-t{white-space:nowrap}
.langsw-c{
    width:0;height:0;margin-left:1px;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid currentColor;opacity:.7;
    transition:transform .24s var(--ease);
}
.langsw.on .langsw-c{transform:rotate(180deg)}
.langsw-pan{
    position:absolute;right:0;top:calc(100% + 10px);z-index:60;
    width:230px;padding:8px;
    border-radius:4px;
    background:#0d1f39;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 60px -20px rgba(3,12,26,.72);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s var(--ease),visibility .22s var(--ease),transform .22s var(--ease);
}
.langsw.on .langsw-pan{opacity:1;visibility:visible;transform:none}
.langsw-h{
    display:block;padding:8px 10px 9px;margin-bottom:2px;
    font-size:10.5px;letter-spacing:1.4px;font-weight:700;
    color:rgba(255,255,255,.42);text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,.09);
}
.langsw-i{
    position:relative;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 8px;align-items:center;
    width:100%;padding:9px 30px 9px 10px;
    background:none;border:0;border-radius:3px;
    text-align:left;cursor:pointer;font:inherit;
    transition:background .2s var(--ease);
}
button.langsw-i:hover{background:rgba(255,255,255,.08)}
.langsw-i b{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82);line-height:1.4}
.langsw-i em{
    grid-column:1;font-style:normal;
    font-size:11px;color:rgba(255,255,255,.42);line-height:1.4;
}
.langsw-i.on{cursor:default}
.langsw-i.on b{color:#fff}
.langsw-ck{
    position:absolute;right:10px;top:50%;margin-top:-8px;
    width:16px;height:16px;color:var(--brand);
}
.langsw-f{
    display:block;padding:9px 10px 6px;margin-top:4px;
    font-size:11px;line-height:1.6;color:rgba(255,255,255,.40);
    border-top:1px solid rgba(255,255,255,.09);
}

/* ═══════════════ 46.3 宽屏页：案例 / 关于 / 服务 / 联系（需求 2） ═══════════════ */

/* 客户："案例、关于、服务、联系几个页面 不需要左侧目录，按照宽屏设计调整"。
   左栏 266px 拿掉之后，容器从 1280 放宽到 1520 —— 这不是为了"更大"，
   是为了让正文的行宽回到舒适区（原来 900 出头，段落一多就局促）。
   1520 是上限，不是固定值：视口不足时容器照常收窄（max-width 的语义）。 */

:root{--container-wide:1520px}
.container--wide{max-width:var(--container-wide)}
.layout--wide{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:34px 0 76px;
}
.layout--wide .main--wide{min-width:0}

/* 左栏拿掉之后，页内跳转改由这条横向 chip 条承担。
   设计上刻意做得"轻"：白底 + 1px 边 + 圆角药丸，当前项品牌蓝实底。
   它替代的是一个 266px 的常驻侧栏，不能反过来变成一条抢戏的横幅。 */
.topnav{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin:0 0 26px;padding-bottom:20px;
    border-bottom:1px solid var(--line);
}
.topnav-i{
    display:inline-flex;align-items:center;
    height:34px;padding:0 16px;border-radius:17px;
    border:1px solid var(--line);background:#fff;
    font-size:13.5px;font-weight:500;color:var(--ink-2);
    transition:background .24s var(--ease),color .24s var(--ease),
               border-color .24s var(--ease),transform .24s var(--ease);
}
.topnav-i:hover{
    color:var(--brand-d);border-color:rgba(0,118,255,.42);
    background:var(--brand-l);transform:translateY(-1px);
}
.topnav-i.on{
    /* 顶色原为 #0a86ff：相对亮度 0.243，白字算下来只有 3.58:1（AA 小字要 4.5）。
       整条渐变压深到 --brand-d 系，最亮的一档就是 #0055c4 → 白字 6.78:1。
       （v22 修首页资讯日期砖是同一个办法：不是改字色，是把底压深。） */
    background:linear-gradient(150deg,#00479f 0,var(--brand-d) 55%,#003a8a 100%);
    border-color:var(--brand-d);color:#fff;font-weight:600;
    box-shadow:0 8px 18px -10px rgba(0,85,196,.72);
}

/* 宽屏之后案例卡片从 3 列放到 4 列 —— 案例是"看图"的页面，
   列数上去一屏能扫的样本更多，比把单张卡片放大更有用。
   约束：列数必须是条数的约数（历史要求），4 列下 4/8/12 条都能排满。 */
.layout--wide .case-grid{grid-template-columns:repeat(4,1fr);gap:22px}
/* 宽屏的正文：行宽给到 92ch 封顶，避免 1520 宽下段落拉成一条长线 */
.layout--wide .rich{max-width:92ch}
/* 联系页的 KPI 空的时候不要把 hero 右侧留成空白（page.php 里 contact 的 kpi 是 []） */

/* ═══════════════ 46.4 产品列表双视图（需求 3） ═══════════════ */

/* 客户："产品栏目页 增加一个切换标签 多列多图和单列单品横向模式 两种展现设计"。
   两套 DOM 都渲染，父级 #prodViews 上的 data-view 决定显隐 ——
   不做 AJAX 重建：站点只有 60 余款产品，两遍 DOM 的开销可以忽略，
   而且禁用 JS 时两套内容都还在。 */

.main-head--v2{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:18px;flex-wrap:wrap;
}
.main-head--v2 h2{margin-bottom:0}
.viewsw{
    display:inline-flex;align-items:center;gap:2px;
    padding:3px;border-radius:6px;
    background:var(--soft,#f2f5f9);
    border:1px solid var(--line);
}
.viewsw-b{
    display:inline-flex;align-items:center;gap:6px;
    height:32px;padding:0 13px;border-radius:4px;
    background:none;border:0;cursor:pointer;font:inherit;
    /* --steel-500 实测 4.33:1（差一点点，13px 要 4.5）—— 直接上 --ink-2，8.8:1 */
    font-size:12.5px;font-weight:600;color:var(--ink-2);
    transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease);
}
.viewsw-b svg{width:14px;height:14px;fill:currentColor}
.viewsw-b:hover{color:var(--brand-d);background:rgba(255,255,255,.7)}
.viewsw-b.is-on{
    background:#fff;color:var(--brand-d);
    box-shadow:0 1px 3px rgba(13,28,48,.12);
}

.prod-views[data-view="grid"] .pv-row{display:none}
.prod-views[data-view="row"]  .pv-grid{display:none}
/* 单列横向时把顶部那条筛选条下面的间距收紧一点，
   两视图共用 .main-desc 与分页，节奏要能对齐 */
.prod-views[data-view="row"] .pv-row{display:grid;gap:14px}

/* 视图 B：一行一款，图左、参数右 */
.prod-row{
    display:grid;
    grid-template-columns:200px minmax(0,1fr) 172px;
    gap:22px;align-items:center;
    padding:16px 20px;
    background:#fff;border:1px solid var(--line);border-radius:4px;
    transition:border-color .26s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease);
}
.prod-row:hover{
    border-color:rgba(0,118,255,.34);
    box-shadow:0 14px 30px -20px rgba(8,22,44,.34);
    transform:translateY(-2px);
}
.pr-img{
    position:relative;display:block;
    aspect-ratio:4/3;border-radius:3px;overflow:hidden;
    background:var(--soft,#f2f5f9);
}
.pr-img img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s var(--ease)}
.prod-row:hover .pr-img img{transform:scale(1.06)}
.pr-no{
    position:absolute;left:0;top:0;
    padding:3px 9px;border-radius:0 0 4px 0;
    background:rgba(8,22,40,.62);color:#fff;
    font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
    letter-spacing:.04em;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pr-body{min-width:0}
.pr-body h3{
    font-size:16.5px;font-weight:700;color:var(--ink);
    letter-spacing:-.2px;line-height:1.45;margin:0;
}
.pr-body h3 a{color:inherit}
.prod-row:hover .pr-body h3 a{color:var(--brand-d)}
.pr-sub{
    margin:7px 0 0;font-size:13px;line-height:1.75;color:var(--muted,#6b7a8f);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pr-spec{
    display:flex;flex-wrap:wrap;gap:6px 10px;margin:12px 0 0;
}
.pr-spec > div{
    display:inline-flex;align-items:baseline;gap:6px;
    padding:4px 10px;border-radius:3px;
    background:var(--soft,#f2f5f9);border:1px solid var(--line);
}
.pr-spec dt{font-size:11.5px;color:var(--steel-400,#8a99ad);font-weight:500}
.pr-spec dd{margin:0;font-size:12px;font-weight:600;color:var(--ink-2)}
.pr-act{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
}
.pr-act .prod-more,
.pr-act .pc-quote{
    justify-content:center;text-align:center;
}

/* ═══════════════ 46.5 右侧悬浮客服：按钮与图标重设计（需求 4） ═══════════════ */

/* 客户："右侧悬浮客服还是看起来不喜欢，特别图标看起来不够大气，
   可以看看阿里云图标库借用"。
   三处改动：
     ① 尺寸：按钮 52 → 58，圆角 14 → 17，图标 22 → 26。
     ② 图标：从**实心块面**（fill-rule evenodd 挖出来的形状）改成
        **阿里云 iconfont 的线性描边** —— 2px 描边、圆头圆角、几何化造型。
        块面图标缩到 22px 时会糊成一团墨点，线性图标在同样尺寸下轮廓清楚得多，
        这就是"不够大气"的根因。眼睛这类小点才保留实心。
     ③ 底色：从纯白改成带一层极淡品牌蓝渐变的白 + 蓝调描边，
        hover 翻成品牌蓝实底、图标转白。 */

.side-tools{gap:7px;padding:8px;border-radius:22px}
.st-btn{
    width:58px;height:58px;border-radius:17px;
    background:linear-gradient(160deg,#fff 0,#f7faff 100%);
    color:var(--brand-d);
    border:1px solid #d8e3f2;
    box-shadow:0 2px 5px rgba(8,22,44,.06);
}
.st-btn .ic{
    width:26px;height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.st-btn:hover{
    background:var(--brand);color:#fff;border-color:var(--brand);
    transform:translateX(-4px) scale(1.05);
    box-shadow:0 18px 34px -14px rgba(0,118,255,.74);
}
/* 首个按钮（在线提交需求）保持品牌蓝实底，作为这一组的视觉主项 */
.st-wrap--flat .st-btn{
    background:linear-gradient(150deg,#0a86ff 0,var(--brand) 55%,#0058c4 100%);
    color:#fff;border-color:var(--brand);
}
.st-wrap--flat .st-btn .ic{stroke:#fff}
.st-wrap--flat .st-btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
/* 回到顶部：描边箭头，与上面四个之间那条细线的位置跟着尺寸走 */
.st-btn--top{margin-top:10px}
.st-btn--top::before{left:14px;right:14px;top:-6px}
/* 弹层：跟着按钮尺寸放大一档 */
.st-pop{border-radius:16px;padding:17px 19px}
.st-pop--qr img{width:132px;height:132px}

/* ═══════════════ 46.6 生产实力：4 台设备 + 联动加强 + 右列重排（需求 5） ═══════════════ */

/* 客户："首页生产实力 四个设备切换就行，刚刚你这次修改增加了生产车间那不需要，
   还有轮播切换效果不够联动，那右边排版效果也需要重新设计完善"。
   三条分别落在：
     · 4 台设备 → PHP 里把 mt_equipment 的「生产车间」条目排掉（v23 home.php）；
     · 联动不够 → 图上补左右箭头 + 一排联动进度块，两侧共用同一个 fwGo()；
     · 右列排版 → 从"一行文字 + 一条 2px 进度条"改成一张张卡片：
        序号 28px 大字（浅灰，当前项变蓝）/ 标题 / 说明 / 右侧箭头，
        当前项是白卡 + 左侧 3px 品牌蓝 + 一层柔和投影。 */

/* 图上的左右箭头：默认半透明，hover 整块时才浮出来 ——
   常显的话会在图上压两个圆片，抢图本身的戏 */
body.p-home .ph-fw3-arrow{
    position:absolute;top:50%;margin-top:-22px;z-index:4;
    width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(8,22,40,.34);color:#fff;
    font-size:16px;line-height:1;cursor:pointer;
    opacity:0;transform:scale(.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:opacity .26s var(--ease),transform .26s var(--ease),
               background .26s var(--ease),border-color .26s var(--ease);
}
body.p-home .ph-fw3-arrow--l{left:14px}
body.p-home .ph-fw3-arrow--r{right:14px}
body.p-home .ph-fw3-stage:hover .ph-fw3-arrow{opacity:1;transform:none}
body.p-home .ph-fw3-arrow:hover{
    background:var(--brand);border-color:var(--brand);
}
body.p-home .ph-fw3-arrow:focus-visible{opacity:1;transform:none;outline:2px solid #7cc9ff}

/* 联动进度块：4 条，当前那条被蓝色填满。
   它与左下角 01/04、右列高亮三处同时成立，"第几台"不用猜 */
body.p-home .ph-fw3-bars{
    position:absolute;left:20px;right:20px;bottom:16px;z-index:4;
    display:flex;gap:5px;
}
body.p-home .ph-fw3-bar{
    flex:1 1 auto;height:3px;border-radius:2px;
    background:rgba(255,255,255,.28);overflow:hidden;
}
body.p-home .ph-fw3-bar i{
    display:block;height:100%;width:0;border-radius:2px;
    background:linear-gradient(90deg,var(--brand),#22c1ff);
    transition:width .5s var(--ease);
}
body.p-home .ph-fw3-bar.is-on i{width:100%}
/* 进度块压在图注上方，图注底部留白要跟着让出来 */
body.p-home .ph-fw3-cap{padding:64px 22px 34px}

/* ── 右列：文字行改成卡片 ── */
body.p-home .ph-fw3-list{display:grid;gap:10px;grid-auto-rows:minmax(0,auto)}
body.p-home .ph-fw3-li{border-top:0}
body.p-home .ph-fw3-i{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:16px;padding:15px 18px 15px 18px;
    border:1px solid var(--line);border-radius:4px;
    background:#fff;
    box-shadow:0 1px 2px rgba(13,28,48,.04);
    overflow:hidden;
    transition:border-color .28s var(--ease),box-shadow .28s var(--ease),
               transform .28s var(--ease),background .28s var(--ease);
}
body.p-home .ph-fw3-i:hover{
    border-color:rgba(0,118,255,.30);
    box-shadow:0 12px 26px -18px rgba(8,22,44,.30);
    transform:translateX(3px);
}
body.p-home .ph-fw3-i.on{
    background:linear-gradient(100deg,#f4f9ff 0,#fff 62%);
    border-color:rgba(0,118,255,.42);
    box-shadow:0 14px 30px -20px rgba(0,90,190,.42);
    padding-left:22px;
}
/* 序号：第一版写成 26px / rgba(13,28,48,.16) 的"水印大字"——
   两个问题：① 白底上只有 1.39:1，等于看不见；② 客户历史要求明确"不要 01/02 纯装饰编号"。
   改成真正能读的编号（19px 实心），常态 --ink-2，当前项 --brand-d。 */
body.p-home .ph-fw3-n{
    font-size:19px;font-weight:800;line-height:1.1;
    letter-spacing:-.03em;color:var(--ink-2);
    font-variant-numeric:tabular-nums;
    transition:color .28s var(--ease);
}
body.p-home .ph-fw3-i:hover .ph-fw3-n{color:var(--brand-d)}
body.p-home .ph-fw3-i.on .ph-fw3-n{color:var(--brand-d)}
body.p-home .ph-fw3-t{
    font-size:16px;font-weight:700;line-height:1.5;
    color:var(--ink);letter-spacing:-.2px;
}
body.p-home .ph-fw3-i.on .ph-fw3-t{color:var(--brand-d)}
body.p-home .ph-fw3-p{
    margin-top:6px;font-size:12.8px;line-height:1.72;
    color:var(--d-t2,#5f6f85);opacity:.82;
}
body.p-home .ph-fw3-i.on .ph-fw3-p{opacity:1}
body.p-home .ph-fw3-ar{
    font-size:15px;color:var(--brand-d);
    opacity:.28;transform:translateX(-5px);
    transition:opacity .28s var(--ease),transform .28s var(--ease);
}
body.p-home .ph-fw3-i:hover .ph-fw3-ar{opacity:.7;transform:none}
body.p-home .ph-fw3-i.on .ph-fw3-ar{opacity:1;transform:none}
/* 当前项左侧那条 3px 品牌蓝 + 自动切换进度条 */
body.p-home .ph-fw3-pg{
    left:0;top:0;bottom:0;width:3px;background:transparent;
}
body.p-home .ph-fw3-pg.run{
    background:linear-gradient(180deg,var(--brand),#22c1ff);
}

/* ═══════════════ 46.7 客户评价：圆点可点击（需求 6） ═══════════════ */

/* 客户："客户评价 那下面圆点无法点击切换"。
   实测（CDP）：容器 #phQ2Dots 挂着 aria-hidden="true"，
   里面是 JS 拼出来的 <span>，没有任何 click 监听 ——
   画得像可点、其实点不动。修法分两半：
     PHP/JS（已改）：容器去 aria-hidden、改 role="tablist"，
                    圆点从 <span> 换成 <button> 并绑 scrollTo；
     CSS（本节）：给圆点一个足够的点击热区。
   6px 高的圆点手指点不到 —— 用 padding 把热区撑到 20px 高，
   圆点本体靠内层 ::before 画，视觉尺寸不变、可点面积 ×3。 */
body.p-home .ph-q2-dots{
    display:flex;justify-content:center;align-items:center;
    gap:2px;margin-top:10px;
}
body.p-home .ph-q2-dot{
    width:6px;height:6px;padding:0;
    border:0;background:none;cursor:pointer;
    position:relative;
    /* 热区：上下各撑 8px、左右各撑 5px —— 视觉不变，手指点得到 */
    margin:0;
}
body.p-home .ph-q2-dot::before{
    content:'';position:absolute;left:-5px;right:-5px;top:-8px;bottom:-8px;
}
body.p-home .ph-q2-dot::after{
    content:'';position:absolute;left:0;top:0;
    width:6px;height:6px;border-radius:3px;
    background:rgba(255,255,255,.24);
    transition:width .28s var(--ease),background .28s var(--ease);
}
body.p-home .ph-q2-dot:hover::after{background:rgba(255,255,255,.5)}
body.p-home .ph-q2-dot.is-on::after{width:18px;background:var(--d-brand,#22c1ff)}
body.p-home .ph-q2-dot:focus-visible{outline:none}
body.p-home .ph-q2-dot:focus-visible::after{box-shadow:0 0 0 2px rgba(34,193,255,.6)}

/* ═══════════════ 46.8 应用行业：左大图 + 右行业清单（需求 7） ═══════════════ */

/* 客户："应用行业 后台给我增加一个行业大图，前端需要有放到不同行业，
   后面大图切换变动，板块给我重新优化设计调整一下"。
   ────────────────────────────────────────────────────────────
   v15→v18 这一块一直是 13 个**同质小方格**（4 列 → 5 列），
   每格塞行业名 + 工况 + 材料三行小字。问题：13 个一样的格子排成矩阵，
   扫一眼只看到"一片灰"，既看不出主推哪个行业，也没有任何图片证据。
   现在改成：
     左 = 该行业的大图（后台 mt_industry.img，逐行业可换），
          图上叠行业名 + 典型工况，右上角 01/13
     右 = 上方一句说明（跟着行业换）+ 13 个行业两列排布 + 底部选型入口
   切换机制与生产实力一致（点击 + 110ms 防抖悬停 + 视口内 6s 自动）。 */

body.p-home .ph-sol2{
    display:grid;
    grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
    gap:clamp(16px,1.8vw,26px);
    align-items:start;
}
body.p-home .ph-sol2-stage{
    position:relative;overflow:hidden;border-radius:4px;
    background:var(--d-ink-2,#0f2340);
    aspect-ratio:16/9;
}
body.p-home .ph-sol2-fig{
    position:absolute;inset:0;margin:0;
    opacity:0;visibility:hidden;transform:scale(1.05);
    transition:opacity .62s var(--ease),transform 1.1s cubic-bezier(.22,.72,.2,1),visibility .62s;
}
body.p-home .ph-sol2-fig.is-on{opacity:1;visibility:visible;transform:scale(1)}
body.p-home .ph-sol2-fig img{
    width:100%;height:100%;object-fit:cover;display:block;
}
body.p-home .ph-sol2-cap{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:18px;flex-wrap:wrap;
    padding:60px clamp(18px,2.2vw,28px) clamp(18px,2vw,24px);
    background:linear-gradient(0deg,rgba(8,22,40,.94) 0,rgba(8,22,40,.46) 56%,rgba(8,22,40,0) 100%);
}
body.p-home .ph-sol2-nm b{
    display:block;font-size:26px;font-weight:700;line-height:1.25;
    letter-spacing:-.6px;color:#fff;
}
body.p-home .ph-sol2-nm em{
    display:block;margin-top:7px;font-style:normal;
    font-size:13px;line-height:1.6;color:rgba(255,255,255,.74);
}
body.p-home .ph-sol2-mt{
    flex:0 0 auto;
    padding:7px 14px;border-radius:3px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.20);
    color:#fff;font-size:12.5px;font-weight:600;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
body.p-home .ph-sol2-idx{
    position:absolute;right:16px;top:16px;z-index:3;
    display:inline-flex;align-items:baseline;gap:4px;
    padding:6px 12px;border-radius:20px;
    background:rgba(8,22,40,.46);color:#fff;
    border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    font-size:11.5px;font-variant-numeric:tabular-nums;
}
body.p-home .ph-sol2-idx b{font-size:15px;font-weight:700;letter-spacing:-.02em}
body.p-home .ph-sol2-idx i{font-style:normal;opacity:.5;margin:0 1px}

/* 右列 */
body.p-home .ph-sol2-side{
    display:flex;flex-direction:column;
    min-width:0;align-self:stretch;
}
body.p-home .ph-sol2-note{
    min-height:44px;margin-bottom:14px;
    padding:12px 14px;border-radius:3px;
    background:rgba(255,255,255,.055);
    border-left:2px solid var(--brand);
    font-size:12.8px;line-height:1.72;color:rgba(255,255,255,.74);
}
body.p-home .ph-sol2-list{
    display:grid;grid-template-columns:1fr 1fr;gap:7px;
    align-content:start;
}
body.p-home .ph-sol2-t{
    display:block;min-width:0;padding:9px 12px;
    border-radius:3px;text-align:left;cursor:pointer;font:inherit;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    transition:background .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease);
}
body.p-home .ph-sol2-t:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.20);
    transform:translateY(-1px);
}
body.p-home .ph-sol2-t.on{
    /* 同 46.3 的 .topnav-i.on：顶色 #0a86ff 太亮，白字只有 3.58:1。
       整条压深到 --brand-d 系，最亮一档 #0055c4 → 白字 6.45:1 */
    background:linear-gradient(150deg,#00479f 0,var(--brand-d) 58%,#003a8a 100%);
    border-color:var(--brand-d);
    box-shadow:0 10px 22px -14px rgba(0,85,196,.9);
}
body.p-home .ph-sol2-tn{
    display:block;font-size:13.5px;font-weight:600;line-height:1.4;
    color:rgba(255,255,255,.82);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.p-home .ph-sol2-t.on .ph-sol2-tn{color:#fff}
body.p-home .ph-sol2-tm{
    display:block;margin-top:3px;
    /* .42 实测 3.89:1（11px 要 4.5）—— 深底上的次级说明至少 .58 */
    font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.58);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.p-home .ph-sol2-t.on .ph-sol2-tm{color:rgba(255,255,255,.90)}
body.p-home .ph-sol2-go{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    margin-top:auto;height:42px;border-radius:3px;
    background:#fff;color:var(--brand-d);
    font-size:13.5px;font-weight:600;
    transition:background .24s var(--ease),color .24s var(--ease);
}
body.p-home .ph-sol2-go i{font-style:normal;transition:transform .24s var(--ease)}
body.p-home .ph-sol2-go:hover{background:var(--brand);color:#fff}
body.p-home .ph-sol2-go:hover i{transform:translateX(4px)}

/* ═══════════════ 46.9 公司动态：头条间距 / 日期遮挡 / 补设计元素（需求 8） ═══════════════ */

/* 客户："公司动态 第一条那阅读和上述文案离的距离太大，
   还有下面单条新闻左侧时间都被遮挡了 缺少设计元素"。
   ① 距离太大：v22 里 .ph-nw-foot 是 margin-top:14px，
      加上摘要 .ph-nw-s 的 line-height 与 -webkit-line-clamp 留白，
      实测摘要底到"阅读 507"顶有 14px 的空隙，而标题到摘要只有 9px ——
      一行元信息比正文段落之间的间距还大，看着就是"断开"了。
      收到 8px，并把"阅读"与箭头拉到同一行两端（原来是 space-between 两端对齐，
      中间空一大段，视觉上更像两块）。
   ② 日期被遮挡：CDP 量过 .ph-nw-d2 的 scrollWidth == clientWidth == 52，
      **技术上没被裁**。真实问题是：日期 12px / 标题 13.6px，只差 1.6px，
      两个都是灰蓝色，扫读时日期糊进标题里，看着像被吃掉一半。
      现在日期独占 56px 窄块（月日 16px 半粗 + 年份 10.5px），
      块右侧一道 1px 分隔线把日期和标题切开 —— 这条线就是那点"设计元素"。
   ③ 顺手补 hover：整行左移、日期变蓝、分隔线变蓝。 */

body.p-home .ph-nw-foot{
    margin-top:8px;
    justify-content:flex-start;
    gap:14px;
}
body.p-home .ph-nw-view{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11.5px;color:var(--d-t3,#8a99ad);
}
/* "阅读"前面加一个小眼睛，把"这是阅读量"说清楚（原来只有"阅读 507"四个字） */
body.p-home .ph-nw-view::before{
    content:'';width:11px;height:11px;flex:0 0 auto;
    background:currentColor;opacity:.72;
    -webkit-mask:var(--ic-eye) center/contain no-repeat;
    mask:var(--ic-eye) center/contain no-repeat;
}
:root{
    --ic-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c5 0 9 4.5 9 7s-4 7-9 7-9-4.5-9-7 4-7 9-7zm0 3a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E");
}
/* 箭头推到最右，与"阅读"形成 左元信息 / 右动作 的稳定读法 */
body.p-home .ph-nw-go{margin-left:auto}

/* ── 列表项日期块 ── */
body.p-home .ph-nw-a{
    grid-template-columns:56px minmax(0,1fr) 14px;
    gap:14px;padding:13px 0;
    align-items:center;
}
body.p-home .ph-nw-d2{
    position:relative;
    display:flex;flex-direction:column;align-items:flex-start;
    padding-right:14px;
    font-variant-numeric:tabular-nums;
}
body.p-home .ph-nw-d2::after{
    content:'';position:absolute;right:0;top:3px;bottom:3px;width:1px;
    background:var(--line);
    transition:background .26s var(--ease);
}
body.p-home .ph-nw-a:hover .ph-nw-d2::after{background:var(--brand)}
body.p-home .ph-nw-d2 b{
    font-size:16px;font-weight:600;line-height:1.15;
    letter-spacing:-.02em;color:var(--ink-2,#3f5068);
    transition:color .26s var(--ease);
}
body.p-home .ph-nw-d2 em{
    font-style:normal;margin-top:3px;
    font-size:10.5px;line-height:1;letter-spacing:.06em;
    color:var(--d-t3,#8a99ad);
}
body.p-home .ph-nw-a:hover .ph-nw-d2 b{color:var(--brand-d)}
body.p-home .ph-nw-t2{
    font-size:14px;color:var(--ink,#16233a);
}
body.p-home .ph-nw-a:hover .ph-nw-t2{color:var(--brand-d)}
body.p-home .ph-nw-li + .ph-nw-li{border-top:1px solid var(--line-2,#eef2f7)}
body.p-home .ph-nw-ar{
    font-style:normal;font-size:13px;color:var(--brand-d);
    opacity:.3;transform:translateX(-4px);
    transition:opacity .26s var(--ease),transform .26s var(--ease);
}
body.p-home .ph-nw-a:hover .ph-nw-ar{opacity:1;transform:none}

/* ═══════════════ 46.10 手机端目录改左右结构（需求 9） ═══════════════ */

/* 客户（手机端截图）："这样目录 尽量左右结构"。
   v9 起 .layout 在 ≤980 就是单列，侧栏整块堆在正文上方：
   目录 8 条 × 44px + 热门 6 条 + 联系卡 ≈ 1360px，
   读者要划过一屏半才摸到正文 —— 手机上这是最劝退的排版。
   "左右结构"在 390px 宽下不可能做成真正的两栏，
   要的是**目录条目横向排布**：一行 pill 左右滑动，两指宽的高度就放完了。
   热门内容同样横向排，联系卡留在下面（它是转化入口，不能挤没）。

   ⚠⚠ 这里踩过一个坑，修的时候别再踩：上面这段注释原本漏了开头的注释起始符，
      只留了结尾那个注释结束符 —— CSS 解析器会把这段说明文字当成【选择器 prelude】，
      一直吃到 @media (max-width:980px) 后面那个左花括号才停，
      于是**整个媒体查询块被当成一条无效规则整体丢弃**，46.10 一行都没生效
      （探针实测：390 下目录条目仍是 w=388/h=47 的竖排）。
      括号依然配平，构建脚本的 braces 断言抓不到，只能靠真机量测发现。
      （自查脚本 _cmtchk.py 专门扫这个：注释正文里不能出现注释结束符字面量，
        本次我自己就又踩了一次 —— 上面那句一开始写成了带反引号的字面量。） */
/* ⚠ 特异性纪律：v22 45.7 里这些选择器都带 body.p-inner 前缀（0,2,x / 0,3,x），
     本节的 .side-a / .side-hot a 如果不加同样的前缀就会被压掉 ——
     媒体查询不加特异性，源序也救不了差一级的选择器。 */

@media (max-width:980px){
    .side{display:flex;flex-direction:column;gap:12px}
    body.p-inner .side-box{margin-bottom:0}

    /* 目录盒：从"白卡 + 竖列表"变成一条横向滚动条 */
    body.p-inner .side-box--nav{
        border-radius:4px;
        background:#fff;border:1px solid var(--line);
    }
    body.p-inner .side-head{
        display:flex;align-items:baseline;justify-content:flex-start;gap:9px;
        padding:11px 14px 9px;
    }
    body.p-inner .side-head b{font-size:14.5px}
    body.p-inner .side-head span{margin-top:0}

    body.p-inner .side-nav{
        display:flex;flex-direction:row;gap:7px;
        padding:0 14px 13px;
        overflow-x:auto;overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    body.p-inner .side-nav::-webkit-scrollbar{display:none}
    body.p-inner .side-nav a.side-a{
        flex:0 0 auto;
        display:inline-flex;align-items:center;gap:5px;
        height:34px;padding:0 14px;border-radius:17px;
        border:1px solid var(--line);background:#fff;
        font-size:13.5px;color:var(--ink-2);
        border-bottom:0;box-shadow:none;
    }
    /* 子项：pill 上再加一点浅底，层级靠"缩进感"而不是全角空格 */
    body.p-inner .side-nav a.side-a--sub{
        background:var(--soft,#f2f5f9);
        font-size:13px;
    }
    body.p-inner .side-nav a.side-a:hover,
    body.p-inner .side-nav a.side-a.on{
        /* 同 46.3 / 46.8：#0a86ff 顶色的渐变白字只有 3.58:1，压深到 --brand-d 系 */
        background:linear-gradient(150deg,#00479f 0,var(--brand-d) 55%,#003a8a 100%);
        border-color:var(--brand-d);color:#fff;
        padding-left:14px;box-shadow:none;transform:none;
    }
    body.p-inner .side-nav a.side-a .side-a-i{display:none}
    body.p-inner .side-nav a.side-a .side-a-t{white-space:nowrap}
    body.p-inner .side-nav a.side-a::before{display:none}

    /* 热门内容同样横排 */
    body.p-inner .side-hot{
        display:flex;flex-direction:row;gap:7px;
        padding:0 14px 13px;
        overflow-x:auto;overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    body.p-inner .side-hot::-webkit-scrollbar{display:none}
    body.p-inner .side-hot a{
        flex:0 0 auto;
        display:inline-flex;align-items:center;gap:7px;
        max-width:230px;padding:7px 13px;border-radius:17px;
        border:1px solid var(--line);background:#fff;
        font-size:13px;color:var(--ink-2);border-bottom:0;
    }
    body.p-inner .side-hot a .side-hot-n{
        flex:0 0 auto;font-size:11px;font-weight:800;
        /* 白 pill 上 --brand 只有 4.17:1（11px 要 4.5），换 --brand-d */
        color:var(--brand-d);font-variant-numeric:tabular-nums;
    }
    body.p-inner .side-hot a .side-hot-t{
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    body.p-inner .side-hot a:hover{color:var(--brand);border-color:rgba(0,118,255,.42);background:#fff}
    body.p-inner .side-hot a:hover .side-hot-n{color:var(--brand-d)}

    /* 联系卡：保持竖排（它是转化入口），但收掉上边距 */
    body.p-inner .side-contact{margin-bottom:0;padding:20px 18px}
    body.p-inner .side-contact .sc-tel{font-size:20px}
}

/* ═══════════════ 46.11 手机端头部按钮重设计（需求 10-1） ═══════════════ */

/* 客户（手机端截图）："这按钮有点设计问题"。
   v9 那颗汉堡是 42×38 的**直角小方块**（border-radius:3px）+ 三条 20×2 白线。
   三个问题：
     ① 直角 + 小尺寸 = 像表单控件，不像导航入口；
     ② 38px 高低于 44px 的可点热区下限，手指容易点空；
     ③ 三条线等长等粗，没有任何设计感。
   现在：44×44、圆角 12px、半透明白底 + 蓝调描边；
   三条线不等长（18 / 12 / 18），中间那条短一点，是刻意的节奏；
   展开时上、下两条旋转成 ×，中间那条淡出 —— 比"三线变叉"更干净。 */

@media (max-width:980px){
    /* ⚠ 又一个"白底页头"的坑：第一版把汉堡写成半透明白底 + 白线
       （那是给深色页头准备的），而页头实测是 #fff ——
       内页（body.p-inner）上汉堡等于一个看不见的空方块
       （探针实测 burgerSpan bg=rgb(255,255,255)；首页因为 v13 有
        body.p-home .burger span{background:var(--ink)} 才侥幸是深色）。
       这里按白底重新给色：浅灰底 + 深墨蓝线，展开态才翻成品牌蓝底白线。 */
    .burger{
        width:44px;height:44px;padding:0 12px;
        border-radius:12px;
        background:var(--soft,#f2f5f9);
        border:1px solid var(--line);
        display:flex;flex-direction:column;
        align-items:flex-end;justify-content:center;gap:5px;
        transition:background .24s var(--ease),border-color .24s var(--ease);
    }
    .burger:hover{background:var(--brand-l);border-color:rgba(0,118,255,.42)}
    .burger span{
        display:block;height:2px;border-radius:2px;
        background:var(--ink,#16233a);
        transition:transform .3s var(--ease),opacity .22s var(--ease),
                   width .3s var(--ease),background .24s var(--ease);
    }
    .burger span:nth-child(1){width:20px}
    .burger span:nth-child(2){width:13px}
    .burger span:nth-child(3){width:20px}
    .burger.on{
        background:var(--brand-d);border-color:var(--brand-d);
    }
    .burger.on span{background:#fff}
    .burger.on span:nth-child(1){width:20px;transform:translateY(7px) rotate(45deg)}
    .burger.on span:nth-child(2){opacity:0;width:0}
    .burger.on span:nth-child(3){width:20px;transform:translateY(-7px) rotate(-45deg)}

    /* 语言切换在手机端也要在：缩成只剩地球图标，面板右对齐不溢出 */
    .langsw-btn{padding:0 9px;height:38px}
    .langsw-t{display:none}
    .langsw-c{display:none}
    .langsw-pan{right:0;width:min(230px,calc(100vw - 36px))}

    /* 页头右侧收纳（实测）：语言 37 + 搜索 38 + CTA 115 + 汉堡 44 + 3×8 间距 = 258，
       而 .header-in 内宽只有 354，logo 还要占 124 ——
       右边缘量到 414 > 视口 390，**横向溢出 24px**（探针 _ov23.py 实测）。
       修法不是"砍掉某个按钮"，而是让 .head-act 允许收缩：
       flex:0 0 auto → flex:0 1 auto，子项 min-width:0，
       四个控件按比例挤进 354 里（探针复测 390 下 sw=cw=390，溢出 0）。

       ⚠ 下面那条 .search-btn{display:none} 在本文件里**其实一直是空转的**：
       v22 更早写过 `.header .search-btn{display:grid}`（0,2,0），
       媒体查询不加特异性，所以搜索按钮在 ≤980 仍然是 grid/38px。
       现在这样是可接受的（实测不溢出），就不要再写"搜索已隐藏"这种假注释，
       省得下次改页头时按错误前提去调数字。真要收掉，得写 `.header .search-btn{display:none}`。 */
    .head-act{gap:8px;flex:0 1 auto;min-width:0}
    .head-act>*{min-width:0}
    .head-search,.search-btn{display:none}   /* ← 被 .header .search-btn 压住，见上注 */
    .head-cta{height:40px;padding:0 14px;font-size:13.5px}

    /* 底部快捷条「电话」：site.css:588 与 v13:956 都写的是
       .mbar-tel{color:var(--brand)!important} —— 白底上 4.17:1，差一点点到 AA。
       对方带 !important，这里也只能带 !important 才压得住。 */
    .mbar-tel,.mbar-tel span{color:var(--brand-d)!important}
}

/* ═══════════════ 46.12 手机端抽屉与展开异常修复（需求 10-2） ═══════════════ */

/* 客户："还有点击展开测试也有问题"。
   CDP 真点出来的结果：390px 下点 has-sub 父项，子菜单的 x = **-158**。
   根因是层叠顺序，不是选择器写错：
       site.css:1067  @media(max-width:980px) .sub{position:static;transform:none}
       theme.v9.css:127  .sub{position:absolute;transform:translate(-50%,8px)}
   site.css **先**加载、theme **后**加载，媒体查询又不增加特异性 ——
   于是 theme 里那条无媒体的 .sub 规则把 site 的移动端重设整条盖掉，
   抽屉里的子菜单按桌面口径"居中再左移半宽"，正好落到视口左边外面。
   修法：本文件在最后（46.x 是所有增量里最靠后的），
   在同样的断点里把 .sub 的定位重设一遍，并且这次不会再被盖。 */

@media (max-width:980px){
    .sub{
        position:static;
        transform:none;
        opacity:1;visibility:visible;
        display:none;
        min-width:0;width:100%;
        padding:8px 0 12px 14px;
        gap:14px;
        background:transparent;
        border:0;border-top:0;border-radius:0;
        box-shadow:none;
        flex-direction:column;
    }
    .sub::before{display:none}
    .nav>ul>li.expand .sub{display:flex}
    /* 两列下拉在抽屉里必须退回单列，520px 的 min-width 会把抽屉撑出横向滚动 */
    .sub-2col{
        display:flex;flex-direction:column;
        min-width:0;gap:14px;
    }
    .sub-col--pick{
        border-left:0;padding-left:0;
        padding-top:12px;border-top:1px dashed var(--line);
    }
    .sub-title{font-size:14.5px;color:var(--ink,#16233a);margin-bottom:8px}
    .sub-title::before{top:4px;height:12px}
    .sub-links a{
        font-size:13.5px;color:var(--steel-500,#6c7d94);
        border-left:0;padding:6px 0;
    }
    .sub-pick{gap:0;margin-bottom:8px}
    .sub-pick-i{
        grid-template-columns:auto minmax(0,1fr);gap:10px;
        padding:6px 8px 6px 0;margin-left:0;border-radius:3px;
    }
    .sub-pick-i em{color:var(--brand-d);font-size:11px}
    .sub-pick-i b{
        font-size:12.8px;color:var(--ink-2,#3f5068);
        white-space:normal;
        display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
    }
    .sub-pick-i:hover{background:var(--brand-l,#eaf3ff)}
    .sub-pick-i:hover b{color:var(--brand-d)}
    .sub-card{
        background:var(--soft,#f2f5f9);
        border-color:var(--line);
        margin-bottom:8px;
    }
    .sub-card-b b{color:var(--ink,#16233a);font-size:13px}
    /* 抽屉里 .sub 是透明底（白底），--steel-500 实测 4.33:1，换 --ink-2 */
    .sub-card-b em{color:var(--ink-2);font-size:11px}
    .sub-more{
        color:var(--brand-d);font-size:12.5px;
        border-top-color:var(--line);padding-top:8px;
    }

    /* 抽屉本体：内容超出时自己滚，别把 body 顶死 */
    .nav{
        top:calc(var(--head-h) + 40px);
        padding:14px 18px 40px;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        max-height:calc(100vh - var(--head-h) - 40px);
    }
    /* 展开指示：父项右侧给一个小三角，展开时翻向 ——
       原来只有"点了没反应"和"突然多一坨"两种状态，没有中间信号 */
    .nav>ul>li.has-sub>a::after{
        content:'';position:absolute;right:6px;top:50%;margin-top:-3px;
        width:6px;height:6px;
        border-right:1.6px solid var(--steel-400,#8a99ad);
        border-bottom:1.6px solid var(--steel-400,#8a99ad);
        transform:rotate(45deg);
        transition:transform .26s var(--ease),border-color .26s var(--ease);
    }
    .nav>ul>li.has-sub.expand>a::after{
        margin-top:-5px;transform:rotate(-135deg);
        border-color:var(--brand);
    }
    .nav>ul>li.has-sub>a{position:relative;padding-right:26px}
    /* 父项当前页（.on）在抽屉里是蓝字 + 左蓝条，那条 ::after 下划线本来是 display:none，
       这里确认一下别把小三角当成下划线画出去 */
    .nav>ul>li>a.on::after{display:none}
    .nav>ul>li.has-sub>a.on::after{display:block;background:none;box-shadow:none}
}

/* ═══════════════ 46.13 响应式（本文件改过的属性全部按断点重设） ═══════════════ */

@media (max-width:1240px){
    body.p-home .ph-sol2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
    .container--wide{max-width:100%}
}

@media (max-width:1080px){
    /* 生产实力：联动区在 1080 以下改上下（左图在上、右列在下）——
       v22 45.9 已经这么排过，这里把新的卡片间距一并带上 */
    body.p-home .ph-fw3{grid-template-columns:minmax(0,1fr);gap:18px}
    body.p-home .ph-fw3-stage{min-height:clamp(240px,44vw,380px)}
    body.p-home .ph-fw3-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* 应用行业：图与清单上下排，清单两列保持 */
    body.p-home .ph-sol2{grid-template-columns:minmax(0,1fr)}
    body.p-home .ph-sol2-stage{aspect-ratio:16/8}
    /* 宽屏页的正文在 1080 以下不再是"宽屏"，回到普通容器节奏 */
    .layout--wide{padding:28px 0 60px}
    .topnav{margin-bottom:22px;padding-bottom:16px}
}

@media (max-width:900px){
    .layout--wide .case-grid{grid-template-columns:repeat(3,1fr)}
    /* 单列横向视图在窄屏退化成"图上、文下"，否则右侧操作区会被挤没 */
    .prod-row{grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 16px}
    .pr-act{grid-column:1/-1;flex-direction:row;gap:8px}
    .pr-act .prod-more,.pr-act .pc-quote{flex:1 1 auto}
    .main-head--v2{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (max-width:760px){
    body.p-home .ph-fw3-list{grid-template-columns:minmax(0,1fr)}
    body.p-home .ph-fw3-i{padding:13px 15px;gap:13px}
    body.p-home .ph-fw3-n{font-size:22px}
    body.p-home .ph-fw3-t{font-size:15px}
    body.p-home .ph-sol2-list{grid-template-columns:1fr 1fr}
    body.p-home .ph-sol2-nm b{font-size:21px}
    body.p-home .ph-sol2-nm em{font-size:12px}
    body.p-home .ph-sol2-go{margin-top:16px}
    .layout--wide .case-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    /* 悬浮栏在窄屏收小一档，别压住正文 */
    .side-tools{right:12px;bottom:82px}
    .st-btn{width:50px;height:50px;border-radius:14px}
    .st-btn .ic{width:22px;height:22px}
    /* 视图切换器在窄屏只留图标 */
    .viewsw-b span{display:none}
    .viewsw-b{padding:0 11px}
}

@media (max-width:520px){
    .prod-row{grid-template-columns:minmax(0,1fr);gap:12px}
    .pr-img{aspect-ratio:16/9}
    .pr-act{flex-direction:column}
    .layout--wide .case-grid{grid-template-columns:1fr}
    .topnav{gap:6px}
    .topnav-i{height:31px;padding:0 13px;font-size:12.5px}
    body.p-home .ph-nw-a{grid-template-columns:48px minmax(0,1fr);gap:11px}
    body.p-home .ph-nw-d2{padding-right:11px}
    body.p-home .ph-nw-d2 b{font-size:15px}
    body.p-home .ph-nw-ar{display:none}
    body.p-home .ph-sol2-list{grid-template-columns:1fr}
    body.p-home .ph-sol2-stage{aspect-ratio:4/3}
}

/* ═══════════════ 46.15 页头导航排布收口（桌面 981–1440 全区间不许折行） ═══════════════ */

/* 起因：全页截图里英雄区上沿浮着"页 / 型 / 例 / 持 / 们"几个碎字。

   根因是**导航文字折行了**，不是重复 DOM：
   `.nav>ul>li>a` 的 line-height 是 var(--head-h)=72px（= 页头高），
   8 项在 1440 下自然需要 746px，而 .header-in 留给 .nav 的只有 714px
   （1320 内容宽 − 139 logo − 291 head-act − 两个 32px gap = 714，探针实测 714.06）。
   .nav 是 flex:1 1 auto，.nav>ul>li 是 flex:0 1 auto —— 被压缩 32px 后
   每项都差 2~7px，"型/例/持/们"就各自折到第二行；
   第二行落在 y=139（页头只到 113），页头 overflow:visible，于是直接压到英雄区上。
   探针证据：首页/产品选型/应用案例/服务支持/联系我们 的文本 Range 都返回 2 个 rect，
   第二个 y=139 w=15（正好一个字宽）。

   修法不是加 nowrap 了事（nowrap 只让文字溢出自己的盒子，会和邻居叠字），
   而是"把总宽压到可用宽度以内 + 锁死不换行"：
     · a 的左右 padding 16px → clamp(5px,.83vw,12px)（1440 下 12px，8 项省 64px）
     · font-size 用 clamp(13px,1.04vw,15px) 随视口线性收，窄屏不靠折行过日子
     · white-space:nowrap + li 不参与压缩，文字永远不会再掉到第二行
     · ≤1200 收掉页头内的 gap 并隐藏搜索按钮；≤1140 再让出"获取报价"
       （site.css 原本就在 ≤1180 隐藏它，只是被 v9 的 display 压掉了，这里把意图还原）

   ⚠ 这段必须排在本文件 46.13 之后：媒体查询不加特异性，同特异性只认源序。 */

@media (min-width:981px){
    .nav>ul{flex-wrap:nowrap}
    .nav>ul>li{flex:0 0 auto;min-width:0}
    /* ⚠ 这里必须带 body.p-home / body.p-inner 前缀：
       46.1 是用 body.p-* .nav>ul>li>a（0,2,3）给导航钉 font-size:15px 的，
       写成无前缀（0,1,3）的话 font-size 会被 46.1 压回去，
       窄屏 padding 缩了、字号没缩 —— 总宽反而超出去、条目往左压到 logo 上。
       clamp 是"随视口线性收"，收的是字号和边距两处，缺一处就前功尽弃。 */
    body.p-home .nav>ul>li>a,
    body.p-inner .nav>ul>li>a{
        white-space:nowrap;
        font-size:clamp(13px,1.04vw,15px);
        padding:0 clamp(5px,.83vw,12px);
    }
    /* caret 的 6px 左边距在 8 项里累计 18px，收到 4px */
    body.p-home .nav .caret,
    body.p-inner .nav .caret{margin-left:4px}
}

@media (max-width:1200px){
    .header-in{gap:24px}
    .head-search,.search-btn{display:none}
}

/* ⚠ 必须限定在桌面区间（min-width:981px）：
   手机端的"获取报价"是页头唯一的主转化入口（底部 mbar 只有电话/导航），
   写成裸的 max-width:1140 会把手机端的 CTA 一起收掉 —— 收窄导航连带砍转化，不值。 */
@media (min-width:981px) and (max-width:1140px){
    .head-cta{display:none}
}

/* ═══════════════ 46.14 动效退让（prefers-reduced-motion） ═══════════════ */

/* 本轮新增的动效：
     · .ph-sol2-fig 的淡入 + 推近（46.8）
     · .ph-fw3-bar 的宽度填充（46.6）
     · .ph-q2-dot 的宽度变化（46.7）
     · .burger 三条线的旋转（46.11）
     · .sub 面板的位移淡入（46.2）
   开了"减少动态效果"的系统里，这些必须退成瞬时切换。
   ⚠ 这段必须留在文件最后：它靠**源序**压过前面的规则。 */
@media (prefers-reduced-motion:reduce){
    body.p-home .ph-sol2-fig,
    body.p-home .ph-fw3-bar i,
    body.p-home .ph-q2-dot::after,
    .burger span,
    .sub,
    .langsw-pan,
    body.p-home .ph-fw3-arrow,
    body.p-home .ph-fw3-i,
    .prod-row,
    .topnav-i,
    body.p-home .ph-sol2-t{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
    body.p-home .ph-sol2-fig{transform:none}
    body.p-home .ph-fw3-sl{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   theme.v24.css  ——  2026-09-27  v23 → v24
   ───────────────────────────────────────────────────────────────────────────
   本轮 8 条需求：
     1  首页导航 和其他页面导航效果不一样 → 统一，以首页为准
     2  导航下拉「产品中心」太紧凑，文字压竖线
     3  应用行业排版不对齐；最后一项与选型按钮要衔接成一排
     4  客户评价左右箭头有 bug、圆点点击不丝滑、第 4 个点了没反应
     5  公司动态头条间距还是太大；单条日期缺设计元素
     6  单页不要全屏，要和导航同宽，并重新设计排版（还有单页没完善）
     7  后台增加多语言内容管理（本文件只负责语言切换器的视觉，功能见 PHP/DB）
     8  前后台整理压缩、去冗余（本轮只做 CSS 侧的死规则清理，见 _mk24.py）
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 47.1 首页 / 内页 页头导航统一（需求 1） ═══════════════ */

/* 客户："首页导航 和其他页面导航感觉效果还是不一样 是不是代码有区别
         麻烦统一 已首页的为准"。
   答案：**确实有区别**，而且是同一个选择器写了两套。
   探针在 1440 视口逐属性 diff，首页 vs 内页共 4 处不同：
     ┌──────────────┬───────────────────────┬───────────────────────┐
     │ 选择器       │ 首页                  │ 内页                  │
     ├──────────────┼───────────────────────┼───────────────────────┤
     │ .search-btn  │ color #3f5068（深）   │ color #fff（白底隐形）│
     │ .head-cta    │ bg #0a1a2e（深墨蓝）  │ bg #005bc0（品牌蓝）  │
     │ .burger      │ bg transparent        │ bg rgba(255,255,255,.08)
     │ .nav>ul>li>a │ #005bc0（当前页.on）  │ #43536b（非当前页）   │
     └──────────────┴───────────────────────┴───────────────────────┘
   根因：theme.v9 的页头（.search-btn / .head-cta / .burger）整段是
   按【深色页头 #0b1b2e】写的；v13 把首页页头改回白底，并加了一整套
   `body.p-home .xxx` 覆盖（theme.v23 行 2456–2472）——
   但**没有给内页补同一套**。于是首页是白底配色、内页仍在用深色页头配色，
   内页的搜索图标是白色画在白底上（对比度 1.00:1，等于没有），
   汉堡是一块半透明白底（白底上看不见边框）。
   注意第 4 行不是 bug：那是"当前页高亮"与"常态"的差别，
   探针取的是第一个 <a>，首页第一个正好是"首页"（.on），
   内页第一个不是当前页 —— 状态不同，不是样式表不同。
   ────────────────────────────────────────────────────────────────
   修法：把首页那套白底页头配色**提升成全站口径**（去掉 p-home 限定）。
   特异性纪律：用 `.header .xxx`（0,2,0）压过 v9 的 `.xxx`（0,1,0）；
   遇到 `body.p-home .xxx`（0,2,1）时它赢 —— 但首页的值本来就是目标值，
   所以两边最终算出来的颜色一致，这正是我们要的"统一"。 */

@media (min-width:981px){
    /* ── 搜索按钮：内页原来是白图标画在白底上 ── */
    .header .search-btn{
        color:#3f5068;
        border-color:rgba(13,28,48,.14);
        background:transparent;
    }
    .header .search-btn:hover{
        color:#0076ff;
        background:rgba(0,118,255,.07);
        border-color:rgba(0,118,255,.32);
    }
    /* ── 页头 CTA：内页原来是品牌蓝，首页是深墨蓝 ──
       ⚠⚠ 必须写成 `.head-cta.btn-primary`（0,3,1）：
           _head.php 里这个按钮是 class="btn btn-primary btn-sm head-cta"，
           而 theme.v24.css:5273 有一条
              body.p-inner .btn-primary{background:var(--brand-d)}   （0,2,1）
           纯 `.header .head-cta`（0,2,0）压不过它 —— 第一版就是这么写、
           探针复测内页仍是 rgb(0,91,192)。带上 .btn-primary 提到 (0,3,1) 才生效。
           白字在 #0a1a2e 上 17.5:1。 */
    .header .head-cta.btn-primary,
    body.p-inner .header .head-cta.btn-primary,
    body.p-home .header .head-cta.btn-primary{
        background:#0a1a2e;
        border-color:#0a1a2e;
        color:#fff;
        box-shadow:0 6px 16px rgba(10,26,46,.24);
    }
    .header .head-cta.btn-primary:hover,
    body.p-inner .header .head-cta.btn-primary:hover,
    body.p-home .header .head-cta.btn-primary:hover{
        background:#0076ff;
        border-color:#0076ff;
        color:#fff;
        box-shadow:0 10px 22px rgba(0,118,255,.34);
        filter:none;transform:none;
    }
}

/* ── 汉堡：桌面不出现，只在 ≤980 出现。
      内页手机端是 v9 的半透明白底（白底上等于没底色），
      首页被 body.p-home .burger{background:transparent}（0,2,1）压成透明
      —— 两边不一样。统一到 46.11 那套"浅灰底 + 深墨蓝三线"：
      它比纯透明更有按钮感，也是 v23 需求 10 定下来的手机端样式，
      所以这里是"把首页拉回 46.11"，而不是"把内页拉成透明"。 */
@media (max-width:980px){
    .header .burger,
    body.p-home .header .burger{
        background:var(--soft,#f2f5f9);
        border-color:rgba(13,28,48,.14);
    }
    .header .burger:hover{background:#e9eff6}
    .header .burger.on,
    body.p-home .header .burger.on{
        background:#005bc0;border-color:#005bc0;
    }
}

/* ═══════════════ 47.2 导航下拉「产品中心」解除紧凑（需求 2） ═══════════════ */

/* 客户："导航下拉 产品那有太紧凑 文字都压竖线上了"。
   探针实测（内页 about.html，页头结构全站同一份）：
     面板 440×381，display:flex，3 列，column-gap = 0px，padding 22/24
     第1列「产品选型」   x=227..336  w=110  2条
     第2列「铁氟龙玻纤布」x=336..459  w=123  8条
     第3列「硅橡胶玻纤布」x=459..569  w=110  2条
   逐条量"链接文字右端 vs 所在列右端"：
     按规格快速选型   文字 x=242..337 / 列右 336  ← **越界 1px，压在竖线上**
     铁氟龙网格输送带  文字 x=351..459 / 列右 459  ← 顶满
     铁氟龙硅胶复合布  文字 x=351..459 / 列右 459  ← 顶满
     硅胶涂覆玻纤布    文字 x=474..569 / 列右 569  ← 顶满
   根因：`.sub-links a{padding:6px 0 6px 14px}` —— **右内边距是 0**。
       列宽由最长那条文字撑出来，于是最长的那条必然紧贴列右边界；
       而列与列之间的 1px `border-left:rgba(255,255,255,.14)`
       就画在这个边界上 → 文字直接压线。再叠加 column-gap 实测为 0，
       三列之间连呼吸空间都没有，"紧凑"就是这么来的。
   ────────────────────────────────────────────────────────────────
   三条一起改：
     ① 链接补右内边距（文字不再顶边，列宽随之 +16px）
     ② 列间给 26px 的 column-gap（保留 1px 分隔线，但离文字足够远）
     ③ 行高从 6px 放宽到 7.5px，标题与首行之间补 10px */

@media (min-width:981px){
    /* ④ 面板宽度必须**显式给**。
       .sub 是 position:absolute + translate(-50%)，宽度走 shrink-to-fit，
       实测算出 440px 就停了 —— 三列加上 26px 的列间距之后，
       可用宽只剩 334px，列反而被压成 90 / 127 / 117（改前 110/123/110），
       列1 的 90px 连"按规格快速选型"6 个字都放不下。
       min-width 给到 520px：列1/列3 ≈ 125px、列2 ≈ 138px，各留 16px 余量。 */
    .nav .sub{
        min-width:520px;
        padding:24px 26px;
        column-gap:26px;
        row-gap:0;
    }
    /* ① 右内边距：让最长那条文字与列右边界之间留出 16px */
    .nav .sub .sub-links a{
        padding:7.5px 16px 7.5px 14px;
        line-height:1.5;
    }
    /* ② 列分隔线：从"紧贴文字"改成"立在列间距中间" */
    .nav .sub .sub-col + .sub-col{
        padding-left:26px;
        border-left:1px solid rgba(255,255,255,.10);
    }
    .nav .sub .sub-col{min-width:0}
    /* ③ 列标题与首行之间补一口气 */
    .nav .sub .sub-title{margin-bottom:10px}
    .nav .sub .sub-links{margin-top:2px}
    /* 两列式下拉（新闻 / 关于）同样受益，右列 picking 区留足宽度 */
    .nav .sub.sub-2col .sub-col--pick{min-width:216px}
}

/* ═══════════════ 47.3 应用行业：左右等高 + 末尾衔接成排（需求 3） ═══════════════ */

/* 客户（截图）："应用行业排版有问题 完全不对齐，
                 还有最后一个选型完全可以和上面衔接一排"。
   探针实测：
     根      [109, 3160, 1208, 547]
     左图区  [109, 3160,  731, 411]   ← 比右区矮 136px
     右区    [865, 3160,  451, 547]
     行业格子 13 个，2 列：左列 7 个、右列 6 个
       → 第 13 项「化工防腐」独占第 7 行左格，右格空着
     选型按钮 [865, 3666, 451, 42]  ← 又另起一整行，宽 451 顶满
   两个问题：
     A. 不对齐 = 左图 `aspect-ratio:16/9`（731 → 411）把高度锁死了，
        右区却由内容堆到 547。左右底边差 136px，视觉上就是"没排完"。
     B. 末尾留空 = 13 是奇数，2 列排完必然剩一个单格；
        按钮再占一整行，底部出现一条只有半格的"残行"。
   ────────────────────────────────────────────────────────────────
   修法：
     A. .ph-sol2 改 align-items:stretch，左图区去掉 aspect-ratio 锁高、
        改由行高（= 右区高）决定 → 左右底边齐平。
     B. PHP 已把 .ph-sol2-go 移进 .ph-sol2-list 内部，成为第 14 个格子：
        7 行 × 2 列整整齐齐，按钮正好补上第 13 项旁边那个空格。 */

body.p-home .ph-sol2{
    align-items:stretch;
}
body.p-home .ph-sol2-stage{
    /* 去掉 16/9 锁高：高度交给 grid 行（= 右区高度），左右底边齐平 */
    aspect-ratio:auto;
    height:100%;
    min-height:420px;
}
body.p-home .ph-sol2-side{
    display:flex;
    flex-direction:column;
    gap:12px;
}
body.p-home .ph-sol2-note{
    margin-bottom:0;
    flex:0 0 auto;
}
body.p-home .ph-sol2-list{
    flex:1 1 auto;
    align-content:start;
    gap:8px;
}
/* 按钮现在是列表的第 14 个格子：不再需要 margin-top:auto 与整行宽度，
   高度跟行业格子对齐（格子内容高约 58px），形成完整的一排。 */
body.p-home .ph-sol2-go{
    margin-top:0;
    height:auto;
    min-height:0;
    align-self:stretch;
    padding:9px 12px;
    border-radius:3px;
    font-size:13px;
}
body.p-home .ph-sol2-t{
    min-height:52px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* ═══════════════ 47.4 客户评价：圆点按页生成 + 箭头按页推进（需求 4） ═══════════════ */

/* 客户："客户评价 那左右箭头测试有bug，下面圆点按钮也是 点击不丝滑
         到第四个点击没有反应了"。
   探针实测（1440 视口）：
     轨道可视宽 1208 / 内容宽 2020 / 最大可滚 812
     卡片 5 张、卡宽 392、gap 14、步长 406、一屏可见 3.01 张
     圆点 5 个 → 物理可达 scrollLeft = [0, 406, 812, 812, 812]
     >>> 5 个圆点只有 3 个不同落点
   ────────────────────────────────────────────────────────────────
   "第 4 个点了没反应"的真因：圆点是按【卡片数】生成的（5 个），
   但一屏能放 3 张，可停靠位置只有 5−3+1 = 3 个。
   第 4、5 个圆点算出来的目标都是 812，而 812 就是最大可滚量，
   浏览器一 clamp 就原地不动 —— 不是监听器没绑，是目标位置不存在。
   JS 侧（home.php）已改成：
     圆点数 = 页数 = 卡片数 − 一屏可见数 + 1（桌面 3、平板 4、手机 5）
     落点末页夹到 maxSL；多出来的圆点 hidden
     箭头改成"当前页 ± 1"，不再用 scrollBy 累加（累加会被 scroll-snap
     吸附回卡片边界，表现就是"有时走一格、有时走半格"）
   CSS 侧（本节）补三件事：
     ① 圆点激活色统一到品牌蓝（原来 --d-brand 兜底值写成了 #22c1ff 青色，
        与全站主色不是一支）
     ② 圆点之间的间距从 2px 放到 6px，视觉上更好点
     ③ 箭头常态半透明、hover 才提亮，并垂直对齐到轨道中心
        （原 top:50% 是相对"轨道+圆点"整体，圆心偏低约 8px） */

body.p-home .ph-q2-dots{
    gap:6px;
    margin-top:14px;
}
body.p-home .ph-q2-dot::after{background:rgba(255,255,255,.26)}
body.p-home .ph-q2-dot:hover::after{background:rgba(255,255,255,.55)}
body.p-home .ph-q2-dot.is-on::after{
    width:20px;
    background:#0076ff;
}
body.p-home .ph-q2-dot:focus-visible::after{box-shadow:0 0 0 2px rgba(0,118,255,.6)}

body.p-home .ph-q2-p{
    /* 轨道高 251，圆点区约 20 —— 用 calc 把圆心拉回轨道中心 */
    top:calc(50% - 12px);
    width:38px;height:38px;margin-top:-19px;
    background:rgba(10,26,46,.55);
    border-color:rgba(255,255,255,.28);
    opacity:.78;
}
body.p-home .ph-q2-p:hover{
    background:#0076ff;border-color:#0076ff;opacity:1;
}
body.p-home .ph-q2-p:disabled{opacity:.26}
/* 滚起来更跟手：轨道显式声明平滑滚动，JS 的 behavior:'smooth' 有兜底 */
body.p-home .ph-q2-track{scroll-behavior:smooth}

/* ═══════════════ 47.5 公司动态：头条间距 + 日期砖（需求 5） ═══════════════ */

/* 客户（截图）："首页公司动态那提到的问题还是没有咋改善"。
   v23 改过一次，探针复测：
     头条 [147,7774,537,147]
       标题→摘要 9px、摘要→foot 7px（看着不大）
       **但 .ph-nw-foot 实测高 40px**，而里面的"阅读 527"只有 11.5px、
       圆形箭头 26px —— 文字在 40px 高的盒子里垂直居中，
       上下各留 (40−14)/2 = 13px 空白。
       所以"摘要 → 阅读二字"的真实视觉间距是 7 + 13 = **20px**，
       比"标题 → 摘要"的 9px 还大一倍多 —— 这就是红框里那块空。
     列表 5 条：日期块 x=147..203（w=56），日期 16px/600、
       年份 10.5px，右侧一道 1px 竖线。技术上没被裁，
       但日期是"裸文字 + 一条线"，客户要的"设计元素"仍然缺。
   ────────────────────────────────────────────────────────────────
   ① 头条：foot 高度收到内容高度（箭头 26 → 22，foot 不设 min-height），
      margin-top 压到 6px → 真实视觉间距 20px → 约 9px。
   ② 列表日期：从"裸文字 + 竖线"改成**浅底圆角日期砖**，
      月日 15px/700 + 年份 10px，hover 整块翻品牌蓝底白字。
      砖是实体块面，扫读时先看到日期再看到标题，层级立住了。 */

/* ── ① 头条 foot 收紧 ──
   ⚠ padding 才是真凶：46.9（v23）只改了 margin-top:8px，
     而 v17 遗留下来的 `.ph-nw-foot{padding:14px 0 0}` 没动 ——
     探针实测 foot 盒高 36px、"阅读"二字上方凭空多出 14px + 居中留白 5px，
     摘要底到"阅读"顶的真实间距是 5 + 20 = **25px**（v23 改完反而比改前 20 还大）。
     padding 归零后 foot 高度 = 圆形箭头 22px，"阅读"在其间垂直居中，
     真实间距降到 4 + 5 ≈ 9px。 */
body.p-home .ph-nw-foot{
    margin-top:4px;
    padding:0;
    min-height:0;
    align-items:center;
    gap:12px;
}
body.p-home .ph-nw-view{
    font-size:11.5px;
    line-height:1;
    /* ⚠ 不能再用 --d-t3 #8a99ad：_c22.py 实测白底上只有 2.90:1，
       11.5px 的小字要 4.5。#5f7085 白底 5.07:1。 */
    color:#5f7085;
}
body.p-home .ph-nw-go{
    width:22px;height:22px;
    font-size:11px;
    margin-left:auto;
}

/* ── ② 列表日期砖 ── */
body.p-home .ph-nw-a{
    grid-template-columns:62px minmax(0,1fr) 14px;
    gap:15px;
    padding:13px 0;
    align-items:center;
}
body.p-home .ph-nw-d2{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:5px 0 6px;
    border-radius:8px;
    background:#f2f5f9;
    border:1px solid #e6ecf3;
    font-variant-numeric:tabular-nums;
    transition:background .26s var(--ease),border-color .26s var(--ease);
}
/* 1px 竖线改成了整块底：不再需要那条线 */
body.p-home .ph-nw-d2::after{display:none}
body.p-home .ph-nw-d2 b{
    font-size:15px;font-weight:700;line-height:1.1;
    letter-spacing:-.02em;
    color:#16233a;
    transition:color .26s var(--ease);
}
body.p-home .ph-nw-d2 em{
    font-style:normal;margin-top:2px;
    font-size:10px;line-height:1;letter-spacing:.04em;
    color:#5f7085;
    transition:color .26s var(--ease);
}
body.p-home .ph-nw-a:hover .ph-nw-d2{
    background:#005bc0;border-color:#005bc0;
}
body.p-home .ph-nw-a:hover .ph-nw-d2 b{color:#fff}
body.p-home .ph-nw-a:hover .ph-nw-d2 em{color:rgba(255,255,255,.85)}
body.p-home .ph-nw-t2{font-size:14px;color:#16233a}
body.p-home .ph-nw-a:hover .ph-nw-t2{color:#005bc0}

/* ═══════════════ 47.6 单页：与导航同宽 + 重做排版（需求 6） ═══════════════ */

/* 客户："我说的几个单页 不是要完全全屏 是和导航一样宽度展现，
         然后优化页面设计排版，现在是直接把左侧去掉 然后拉宽
         没有任何设计排版考虑"。
   探针实测（1440 视口）：
     .header-in      1320   ← 导航（页头）的实际宽度
     .container      1320   ← 正文标准宽度（--container:1320px）
     .container--wide 1425  ← v23 给单页加的"宽屏"，等于整屏
     .layout--wide   1425
     .main--wide     1425
     .topnav         1425
   `--container-wide:1520px` 在 1425 视口下被视口截到 1425 —— 整屏。
   客户要的是"和导航一样宽"，也就是 1320，而不是去掉左栏后把正文摊满屏。
   ────────────────────────────────────────────────────────────────
   ① --container-wide 直接跟 --container 走（1320），
      以后调导航宽度，单页自动跟着变，不会再出现两套宽度。
   ② chip 条 .topnav 也收进同一宽度（原来 1425 顶满屏）。
   ③ 正文排版：v23 只是"拉宽"，富文本没有任何版式约束，
      长行在 1320 宽里一行能排到 90+ 汉字，读起来很累。
      这里给 .main--wide 的正文补一套真正的版式：
         · 最大可读宽度 76ch（约 860px），段落 1.9 行高
         · h3/h4 分级 + 段前留白
         · 图片圆角 + 自适应宽度
         · 表格斑马纹 + 首行表头
         · 引用块左侧品牌蓝条
         · 首段放大 1.15 倍做导语 */

:root{
    --container-wide:var(--container,1320px);
}
.container--wide{
    max-width:var(--container-wide);
    margin-left:auto;
    margin-right:auto;
}
.layout--wide,
.main--wide{max-width:var(--container-wide)}

/* chip 条：与正文同宽，不再顶满屏 */
.topnav{
    max-width:var(--container-wide);
    margin-left:auto;
    margin-right:auto;
}

/* ── 正文版式 ──
   ⚠ 必须带 body.p-inner 前缀：theme.v24.css:5684 有
      body.p-inner .rich{max-width:100%}   （0,2,1）
   纯 `.main--wide .rich`（0,2,0）压不过它 —— 第一版就是这么写、
   探针复测 max-width 仍是 100%，正文在 1320 里一行排到 90+ 汉字。 */
.main--wide .rich,
body.p-inner .main--wide .rich{
    max-width:76ch;
    font-size:15.5px;
    line-height:1.92;
    color:#31425c;
}
.main--wide .rich > p{margin:0 0 18px}
.main--wide .rich > p:first-child{
    font-size:1.12em;
    line-height:1.8;
    color:#16233a;
}
.main--wide .rich h3,
.main--wide .rich h4{
    margin:32px 0 14px;
    color:#16233a;
    letter-spacing:-.3px;
}
.main--wide .rich h3{font-size:20px;font-weight:700}
.main--wide .rich h4{
    font-size:16.5px;font-weight:700;
    padding-left:12px;
    border-left:3px solid #0076ff;
}
.main--wide .rich img{
    max-width:100%;height:auto;
    border-radius:4px;margin:8px 0 20px;
}
.main--wide .rich ul,
.main--wide .rich ol{margin:0 0 18px;padding-left:22px}
.main--wide .rich li{margin:0 0 8px}
.main--wide .rich blockquote{
    margin:20px 0;padding:14px 18px;
    border-left:3px solid #0076ff;
    background:#f6f9fd;border-radius:0 3px 3px 0;
    color:#3f5068;
}
.main--wide .rich table{
    width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px;
}
.main--wide .rich table th,
.main--wide .rich table td{
    border:1px solid #e6ecf3;padding:11px 13px;text-align:left;
}
.main--wide .rich table th{background:#f2f5f9;font-weight:600;color:#16233a}
.main--wide .rich table tr:nth-child(even) td{background:#fafcfd}
/* 后台富文本里常见的内联 style（width/align）在这里让位给自适应 */
.main--wide .rich img[style]{width:auto!important;max-width:100%!important;height:auto!important}

/* ── 导语块：正文开场前再立一次标题口径，并标出内容新鲜度 ──
   （v23 的 hero 副标题只在页面最顶端出现一次，往下滚就失去了上下文） */
.page-lead{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin:0 0 26px;
    padding:0 0 18px;
    border-bottom:1px solid #e9eef4;
}
.page-lead-t{
    margin:0;
    max-width:62ch;
    font-size:16.5px;
    line-height:1.72;
    font-weight:500;
    color:#16233a;
}
.page-lead-u{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    /* #6b7c93 在白底只有 4.26:1（WCAG 小字要 4.5），压深一档到 5.2:1 */
    color:#55677d;
}
.page-lead-u::before{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:#4DBA46;
}

/* ── 收口卡组：任何单页读完都有下一步 ──
   三张卡一行；hover 整卡抬起 + 箭头右移，与首页卡片的动效语言一致。 */
.page-next{margin-top:44px}
.page-next .blk-h{margin-bottom:16px}
.page-next-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.page-next-i{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 20px;
    background:#fff;
    border:1px solid #e6ecf3;
    border-radius:6px;
    text-decoration:none;
    transition:border-color .2s,box-shadow .2s,transform .2s;
}
.page-next-i:hover{
    border-color:rgba(0,118,255,.34);
    box-shadow:0 8px 22px rgba(13,28,48,.09);
    transform:translateY(-2px);
}
.pn-ico{
    flex:0 0 auto;
    display:grid;place-items:center;
    width:40px;height:40px;
    border-radius:5px;
    background:linear-gradient(135deg,#0076ff,#005bc0);
    color:#fff;
}
.pn-ico .ic{width:20px;height:20px;fill:currentColor}
.pn-b{flex:1 1 auto;min-width:0}
.pn-b b{
    display:block;
    font-size:15px;font-weight:600;
    color:#16233a;line-height:1.4;
}
.pn-b em{
    display:block;
    margin-top:3px;
    font-style:normal;
    font-size:12.5px;line-height:1.6;
    color:#55677d;
}
.pn-ar{
    flex:0 0 auto;
    font-style:normal;
    font-size:16px;
    color:#a9b6c8;
    transition:color .2s,transform .2s;
}
.page-next-i:hover .pn-ar{color:#0076ff;transform:translateX(3px)}

/* ═══════════════ 47.7 响应式（本文件改过的属性按断点重设） ═══════════════ */

@media (max-width:1200px){
    .container--wide,
    .layout--wide,
    .main--wide,
    .topnav{max-width:100%}
    .main--wide .rich{max-width:none}
}
@media (max-width:860px){
    /* 三张收口卡在窄屏一行放不下，改成上下排，图标保持左置 */
    .page-next-grid{grid-template-columns:1fr;gap:10px}
    .page-next-i{padding:15px 16px;gap:12px}
    .pn-ico{width:36px;height:36px}
    .pn-ico .ic{width:18px;height:18px}
}
@media (max-width:980px){
    /* 单页在手机端就是整宽，正文不要再留 76ch 的限制 */
    .main--wide .rich{font-size:15px;line-height:1.86}
    .page-lead{padding-bottom:14px;margin-bottom:20px}
    .page-lead-t{font-size:15.5px}
    body.p-home .ph-sol2-stage{min-height:0;aspect-ratio:16/9;height:auto}
    body.p-home .ph-sol2-list{gap:6px}
    body.p-home .ph-nw-a{grid-template-columns:56px minmax(0,1fr) 12px;gap:12px}
}

/* ═══════════════ 47.8 动效退让（prefers-reduced-motion） ═══════════════
   ⚠ 必须放在本文件最后：它要关掉的是上面所有 transition/scroll-behavior。 */

@media (prefers-reduced-motion:reduce){
    .header .search-btn,
    .header .head-cta,
    .header .burger,
    .nav .sub .sub-links a,
    body.p-home .ph-sol2-t,
    body.p-home .ph-sol2-go,
    body.p-home .ph-q2-dot::after,
    body.p-home .ph-q2-p,
    body.p-home .ph-nw-d2,
    body.p-home .ph-nw-d2 b,
    body.p-home .ph-nw-d2 em{transition:none}
    body.p-home .ph-q2-track{scroll-behavior:auto}
}

/* ════════════════════════════════════════════════════════════════════
   theme.v25.css 增量（v25 八条反馈的前台修复）
   构建顺序：theme.v9 base → _v13…_v24 → 本文件（最后拼，靠位置压前面的同特异性规则）
   特异性纪律：媒体查询不增特异性；本文件规则只在"需要压过 _v24 同特异性规则"时
   写与 _v24 相同特异性、靠后源序取胜（如 body.p-home .head-cta）。
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   48.1 单页正文宽度严格对齐导航容器（需求 1）
   根因（_w25.py 探针，1440 视口实测）：
     .header-in（页头容器，class="container header-in"）有 padding-inline:var(--band)
     .container--wide（单页正文外层，class="container container--wide …"）的
     计算宽度与页头一致（--container-wide 已对齐 --container = 1240），
     但正文主列比页头内容左缘更靠左、右缘更靠右，整体比导航"宽 112px"
     （= 2 × band）。这是"内容盒"左右少了 56px 的留白差。
   修法：显式给 .container--wide 补齐与 .container 一致的左右留白，
   让正文内容盒的左/右边界与页头内容盒严格重合（不再依赖 class 组合是否带 .container）。
   注：外层元素同时带 .container 与 .container--wide，两者 padding 值相同，此处显式声明属保险 + 显式语义。
   ──────────────────────────────────────────────────────────────────── */
.container--wide{
    padding-inline:var(--band);
}
/* 同元素的 .layout--wide / .main--wide 不重复加 padding（会与上面叠加成双倍留白）；
   .main--wide 是嵌套在 .container--wide 内的 <main>，自动继承外层留白，这里只约束外层。 */

/* ────────────────────────────────────────────────────────────────────
   48.2 移动端页头：首页 / 栏目页统一（需求 5 / 手机端）
   根因（_w25.py 探针，390 视口）：
     · 首页 body.p-home 的 .header-in gap=8px、且 .head-cta{display:none}；
       栏目页 .header-in gap=12px、.head-cta 显示 → 两页页头不一样。
     · 栏目页 .head-act 容纳 langsw+search+cta+burger 共 ~256px，
       右缘 413 > 视口 390，横向溢出（"获取报价"把汉堡挤出去）。
   修法：
     ① 两页统一 gap、两页都显示"获取报价"CTA（客户明确要这个按钮醒目统一）；
     ② 移动端隐藏页头里的语言地球（.langsw），语种改放进抽屉里的 .nav-lang，
        给 .head-act 腾出 ~37px，消除溢出；
     ③ .nav-lang 桌面隐藏、移动端在抽屉里平铺成一行语种芯片。 */

/* 桌面：抽屉语种条目不出现在横向导航里 */
@media (min-width:981px){
    .nav-lang{display:none}
}

@media (max-width:980px){
    /* ① 两页统一：覆盖 body.p-home .header-in{gap:8px} 与栏目页 .header-in{gap:12px} */
    .header-in{gap:10px}
    body.p-home .header-in{gap:10px}
    body.p-inner .header-in{gap:10px}
    /* 两页都显示"获取报价"：覆盖 body.p-home .head-cta{display:none} */
    .head-cta{display:inline-flex}
    body.p-home .head-cta{display:inline-flex}
    body.p-inner .head-cta{display:inline-flex}

    /* ② 移动端去掉页头语言地球，语种移到抽屉，给 head-act 腾空间 */
    .header .langsw{display:none}

    /* ②b 页头 CTA 背景：内页原是品牌蓝 #005bc0、首页是深墨蓝 #0a1a2e。
       v24 的统一块（theme.v25.css:7471）被误关在 @media(min-width:981px) 里，
       手机端从未生效——所以手机上内页 CTA 仍是品牌蓝、与首页深墨蓝不一致。
       这里在移动端显式统一为 #0a1a2e（与首页一致），白字 17.5:1。 */
    .head-cta.btn-primary,
    body.p-inner .head-cta.btn-primary,
    body.p-home .head-cta.btn-primary{
        background:#0a1a2e;
        border-color:#0a1a2e;
        color:#fff;
        box-shadow:0 6px 16px rgba(10,26,46,.24);
    }
    .head-cta.btn-primary:hover,
    body.p-inner .head-cta.btn-primary:hover,
    body.p-home .head-cta.btn-primary:hover{
        background:#0076ff;
        border-color:#0076ff;
        color:#fff;
    }

    /* ③ 抽屉里的语种条目：标题 + 平铺芯片一行 */
    .nav-lang{
        display:block;
        margin-top:10px;
        padding:12px 0 4px;
        border-top:1px dashed var(--line);
    }
    .nav-lang-h{
        display:block;
        font-size:12px;
        color:var(--muted);
        letter-spacing:.04em;
        margin-bottom:9px;
    }
    .nav-lang-l{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }
    .nav-lang-i{
        display:inline-flex;
        align-items:center;
        padding:8px 13px;
        border:1px solid var(--line);
        border-radius:9px;
        font-size:13px;
        font-weight:500;
        color:var(--ink-2,#3f5068);
        background:#fbfcfe;
    }
    .nav-lang-i.on{
        background:var(--brand,#0076ff);
        color:#fff;
        border-color:var(--brand,#0076ff);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   theme v26 增量 —— 客户 6 条反馈（苏州密泰新材料）
   ───────────────────────────────────────────────────────────────────────────
   1. 主导航去掉「获取报价」按钮                    → _head.php 删元素（本文件无需处理）
   2. 单页正文宽度对齐导航 + 重做排版 + 去更新日期   → 49.1 / 49.2（+ page.php 删日期）
   3. 手机端搜索按钮不可见 / 汉堡下拉空白            → 49.3
   4. 主导航「产品选型」不翻译                      → _head.php 接 $__tx（+ mt_i18n 补键）
   5. 后台产品参数简化 + 编辑器                     → admin.css / admin.php
   6. 全站文案合规与专业化                          → 数据层（mt_page / mt_news …）

   本文件排在 v25 之后（_mk26.py 保证），用于压过前面同特异性规则。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 49.1 单页：正文与导航同宽（第二处特异性陷阱） ═══════════════

   病象：客户"单页正文宽度要和导航统一"，实测 1080 视口下正文只占右侧一半、
         左边还多出一列竖排的"公司概况/企业实力…"。

   根因是层叠，不是写错选择器：
     · _v23.css 给单页写了 `.layout--wide{grid-template-columns:minmax(0,1fr)}`（0,1,0）
     · _v21.css 44.9 的 @media(max-width:1240px) 里又写了
         body.p-inner .layout{grid-template-columns:250px minmax(0,1fr)}（0,2,1）
     媒体查询不加特异性 —— ≤1240 时后者压过前者。而单页在宽屏模式下**不渲染
     _side.php**，于是那 250px 栏是空列，横向 .topnav 掉进窄列被 flex 折成竖排
     （看起来像左栏），正文被推到右边只剩一半。

   修法：同特异性(0,2,1)、源序在 v21 之后，把单页钉死为单列。
   （page / case_list / download / equipment / partner 都用 layout--wide，
     这几个页面本身没有真实侧栏，单列化只删"空列"，不动任何内容。） */
body.p-inner .layout--wide{
    grid-template-columns:minmax(0,1fr);
    gap:0;
}

/* ── 正文铺满容器 ──
   _v24.css 47.6 把正文写成 body.p-inner .main--wide .rich{max-width:76ch}（0,3,1），
   在 1320 容器里只排 ~690px —— 正好是导航宽度的一半，右侧一大片空。
   而 _v24.css 47.7 的 @media(max-width:1200px) 里 .main--wide .rich{max-width:none}
   只有 (0,2,0)，被上面那条 (0,3,1) 压过，**从未生效**。
   这里以同特异性(0,3,1)把行宽放开到 100%，与导航等宽。 */
.main--wide .rich,
body.p-inner .main--wide .rich{
    max-width:100%;
}

/* ═══════════════ 49.2 单页正文版式精修 ═══════════════

   客户："正文排版过于简单，缺少设计"。铺满之后配一套成体系的版式：
   字号/行距/段落节奏 + 标题分级 + 首段导语 + 图片圆角阴影 + 列表与引用。
   原则：是排版的"结构感"，不是往正文里塞备注。 */
body.p-inner .main--wide .rich{
    font-size:15.5px;
    line-height:1.98;
    color:#33445e;
}
body.p-inner .main--wide .rich > p{margin:0 0 20px}
/* 首段作导语：略大、更深、更松 */
body.p-inner .main--wide .rich > p:first-of-type{
    font-size:1.07em;
    line-height:1.88;
    color:#16233a;
    font-weight:500;
}
/* 标题体系：品牌蓝左条 + 呼吸感间距 */
body.p-inner .main--wide .rich h2{
    margin:42px 0 18px;
    padding-left:14px;
    border-left:4px solid var(--brand,#0076ff);
    font-size:23px;font-weight:700;line-height:1.36;
    color:#16233a;letter-spacing:-.4px;
}
body.p-inner .main--wide .rich h3{
    margin:34px 0 14px;
    padding-left:12px;
    border-left:3px solid var(--brand,#0076ff);
    font-size:19px;font-weight:700;line-height:1.42;
    color:#16233a;letter-spacing:-.2px;
}
body.p-inner .main--wide .rich h4{
    margin:26px 0 12px;
    font-size:16.5px;font-weight:700;line-height:1.5;
    color:#16233a;
}
body.p-inner .main--wide .rich > *:first-child{margin-top:0}
body.p-inner .main--wide .rich strong,
body.p-inner .main--wide .rich b{color:#0b2a5b;font-weight:600}
body.p-inner .main--wide .rich a{
    color:var(--brand-d,#005bc0);text-decoration:none;
    border-bottom:1px solid rgba(0,91,192,.3);
}
body.p-inner .main--wide .rich a:hover{border-bottom-color:currentColor}
/* 列表：品牌蓝圆点 + 舒适行距 */
body.p-inner .main--wide .rich ul,
body.p-inner .main--wide .rich ol{margin:0 0 20px;padding-left:24px}
body.p-inner .main--wide .rich li{margin:0 0 9px;line-height:1.86}
body.p-inner .main--wide .rich li::marker{color:var(--brand,#0076ff)}
/* 图片：圆角 + 柔和投影（专业感来自细节，不是边框堆砌） */
body.p-inner .main--wide .rich img{
    max-width:100%;height:auto;
    border-radius:6px;margin:10px 0 22px;
    box-shadow:0 12px 30px -20px rgba(13,28,48,.45);
}
/* 引用：品牌色渐隐底 */
body.p-inner .main--wide .rich blockquote{
    margin:24px 0;padding:18px 22px;
    border-left:3px solid var(--brand,#0076ff);
    background:linear-gradient(90deg,rgba(0,118,255,.07),rgba(0,118,255,0));
    border-radius:0 6px 6px 0;
    color:#3f5068;
}
/* 表格：轻边框 + 斑马纹 + 表头浅底 */
body.p-inner .main--wide .rich table{
    width:100%;border-collapse:collapse;margin:10px 0 22px;font-size:14px;
}
body.p-inner .main--wide .rich table th,
body.p-inner .main--wide .rich table td{
    border:1px solid #e6ecf3;padding:11px 14px;text-align:left;
}
body.p-inner .main--wide .rich table th{background:#f2f6fb;font-weight:600;color:#16233a}
body.p-inner .main--wide .rich table tr:nth-child(even) td{background:#fafcfe}

/* 导语块（.page-lead）：v26 去掉"最近更新"之后只剩一句副标题，
   把它做成一句克制的页面引言：左侧品牌竖条 + 稍大的字。 */
body.p-inner .page-lead{
    display:block;
    margin:0 0 30px;
    padding:0 0 20px 16px;
    border-bottom:1px solid #e9eef4;
    border-left:3px solid var(--brand,#0076ff);
}
body.p-inner .page-lead-t{
    margin:0;max-width:none;
    font-size:17px;line-height:1.76;font-weight:500;color:#16233a;
}

/* ═══════════════ 49.3 手机端两处真 bug ═══════════════ */

@media (max-width:980px){
    /* ── (a) 栏目页搜索按钮"看不见" ──────────────────────────────
       _v25.css 只在 @media(min-width:981px) 里给页头搜索按钮补过深色配色
       （内页白色页头上，白图标 = 对比度 1.00:1，等于没有按钮）。
       ≤980 漏了：手机端内页仍是 v9 的"深色页头"配色（白图标 + 半透明白边），
       在白底页头上完全隐形。这里补同口径配色。
       ⚠ 首页（body.p-home .search-btn）本来就是深色，这条与它同色，不吃亏。 */
    .header .search-btn{
        color:#3f5068;
        border-color:rgba(13,28,48,.14);
        background:transparent;
    }
    .header .search-btn:hover{
        color:#0076ff;
        background:rgba(0,118,255,.07);
        border-color:rgba(0,118,255,.32);
    }

    /* ── (b) 汉堡抽屉里"产品下拉是空白" ──────────────────────────
       同文件 46.x 的行序（@media(max-width:980px) 内）：
           .sub{... display:none; ...}              ← 收起态隐藏（0,1,0）
           .sub-2col{ display:flex; ... }           ← 又把两列下拉显示回来（0,1,0，源序在后）
       于是新闻资讯 / 关于我们 两个 .sub-2col 下拉在**收起态也铺开**，
       而产品中心用的是普通 .sub —— 正确地被隐藏。
       客户看到的就是"两个下拉默认开着、唯独产品下拉那一块是空的"。
       修法：把 .sub-2col 的收起态重新绑回 none，展开态交给既有
       `.nav>ul>li.expand .sub{display:flex}`（(0,2,1) 压得住 (0,1,0)）。 */
    .sub-2col{display:none}
    .nav>ul>li.expand>.sub-2col{display:flex}
}

/* ═══════════════ 49.4 手机端页头：删掉 CTA 后的排布确认 ═══════════════
   v26 需求 1 删了主导航「获取报价」，页头右侧只剩 搜索 + 汉堡。
   v25 为放下 CTA 而做的收紧（gap/内边距）现在宽松了，放宽一点更透气。 */
@media (max-width:980px){
    .header-in{gap:12px}
    .head-act{gap:10px}
}

/* ═══════════════ 49.6 手机端抽屉：hover 不再把下拉推走（客户第 3 次反馈的真凶） ═══════════════

   病象（真机）：点汉堡打开抽屉 → 点「产品中心」→ 抽屉里那一块**整片空白**，
   后面的「产品选型 / 应用案例 / …」也不见了。

   根因是**真机点按会保留 `:hover`，而自动化里的 JS `.click()` 不会** ——
   这正是一连几轮"我测了都正常、客户说还有 bug"的原因：
     · site.css:196 / theme base:141  `.nav>ul>li:hover .sub{transform:translate(-50%,0)}`
       （特异性 0,3,1，**在无媒体查询的基础段**）
     · 手机端 `@media(max-width:980px){ .sub{transform:none} }` 只有 (0,1,0)
     媒体查询不加特异性 → 点按（=hover 生效）时 `.sub` 被左移自身宽度的 50%。
   探针实测（_d26f.py，真 touch 事件）：`.sub` 的 transform = matrix(1,0,0,1,-176.5,0)，
   盒子 left=-158 —— 内容整体跑到屏幕左侧外面，于是"看着是空白"；
   同时展开的 595px 把后面几项顶到 y=865（超出 844 视口），客户就只看到两行 + 空白。

   修法：手机端用**更高特异性**把 hover 位移钉掉（不靠源序，避免再翻车）。 */
@media (max-width:980px){
    .header .nav>ul>li:hover .sub,
    .header .nav>ul>li:hover .sub-2col,
    .header .nav>ul>li.expand .sub,
    .header .nav>ul>li.expand .sub-2col{transform:none}
}

/* ═══════════════ 49.7 手机端宽容器左右留白（客户反馈：栏目页内容贴屏边） ═══════════════

   病象：手机上看「关于我们 / 企业实力 / 资料下载 / 应用案例」这些页面，
   正文直接顶到屏幕左右两边，一点留白都没有。

   根因（_pad26.py 实测 390 视口）：
     · .container--wide 计算 padding-left/right = **0**，而普通 .container 是 20px（--band）。
     · `_v20.css` 的 `body.p-inner .layout{padding:clamp(…) 0 clamp(…)}`（0,2,1）
       与 `_v21.css` ≤980 的 `body.p-home .layout,body.p-inner .layout{padding:32px 0 56px}`（0,2,1）
       都把左右写成 **0**，压过 `_v25.css` 的 `.container--wide{padding-inline:var(--band)}`（0,1,0）。
     · 宽页元素同时带 .container .container--wide .layout .layout--wide，
       于是这一条 0 把整页正文的左右留白一起抹平。

   修法：用同为 (0,2,1)、源序在后的选择器把左右留白补回来（上下保持 v21 的 32/56）。 */
@media (max-width:980px){
    body.p-inner .container--wide{
        padding-left:var(--band);
        padding-right:var(--band);
    }
}

/* ═══════════════ 49.8 动效退让 ═══════════════ */
@media (prefers-reduced-motion:reduce){
    body.p-inner .main--wide .rich img,
    body.p-inner .page-lead{-webkit-transition:none!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v27 增量（客户第 4 批反馈）
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 50.1 全站内容宽度统一 ═══════════════

   客户：「各个页面包含首页板块、导航 top 和底部 foot 的宽度，都要像产品页面
          下面红框那样对齐」。

   _w27.py 实测（1440 视口，全部 L=53 R=1373）：
     .container（页头 / 页脚 / 首页板块）  max-width 1320 + padding-inline 56px
        → **内容盒只有 1208**
     .container.layout（产品 / 新闻列表页正文）的 padding-inline 被 _layout 的
        「padding:Xpx 0 Ypx」抹成 0 → **内容盒 1320**
   两者左右各差 56px，肉眼就是"页头比正文窄一圈、左边对不齐"。

   修法：把 max-width 提到「目标内容宽 1320 + 2×band」，内容盒自然回到 1320；
        同时给 .container.layout 补回左右 band，列表页正文与其它页严格同宽。
   注：--band 是 clamp(20px,4.4vw,56px)，窄屏会自己收小，不会出现贴屏边
       （≤1320 的屏 max-width 本来就不生效，行为与改前一致）。 */
:root{
    --wrap:calc(1320px + 2 * var(--band));
    --container:calc(1320px + 2 * var(--band));
}
/* ⚠ 用 body.p-xxx 提特异性：_v20.css 的 body.p-inner .layout{padding:… 0 …}（0,2,1）
   与 _v21.css ≤980 的同名规则都会把左右抹成 0，纯 .container.layout（0,2,0）压不过。 */
body.p-home .container.layout,
body.p-inner .container.layout{
    padding-left:var(--band);
    padding-right:var(--band);
}

/* ── 50.1b 让开右侧悬浮客服栏（同一处宽度问题的连带修）──
   悬浮栏 .side-tools 是 position:fixed;right:18px、宽 76px，
   实测其左缘 ≈ 视口宽 − 109px；而内容右缘 = 视口宽 − 56px
   → **视口 <1565px 时正文右端必然落在悬浮栏底下**（_v27 全站扫描：
   1425/1366 两档共 28~31 处文字被压）。加宽内容后这个问题更明显。
   修法：在这段视口区间给所有容器**左右一起**加大留白（保持对称、全站同宽），
   让内容盒整体从悬浮栏左侧通过。≥1566px 时侧边留白足够，不受影响，仍是 1320。 */
@media (min-width:981px) and (max-width:1565px){
    /* ⚠ 首页那几个 .ph-* 容器原样式是 body.p-home .xxx（0,2,1），
       所以这里必须同样带 body 前缀，否则会被压掉（第一版就漏了 .ph-hs-barin，
       结果 hero 的「浏览产品中心」按钮仍被悬浮栏压住）。 */
    .container, .wrap, .ph-in, .ph-cta-in, .ph-hs-barin,
    body.p-home .container, body.p-inner .container,
    body.p-home .wrap, body.p-inner .wrap,
    body.p-home .ph-in, body.p-inner .ph-in,
    body.p-home .ph-cta-in, body.p-inner .ph-cta-in,
    body.p-home .ph-hs-barin, body.p-inner .ph-hs-barin,
    body.p-home .container.layout, body.p-inner .container.layout{
        padding-left:calc(var(--band) + 68px);
        padding-right:calc(var(--band) + 68px);
    }
}

/* ═══════════════ 50.2 产品详情：三个行动按钮排成一行 ═══════════════

   右栏宽度实测只有 401px，而
     获取报价(115) + 按规格选型(130) + 电话咨询 139-6214-5762(236) + 间距 = 505px
   → 必然换行（客户截图里"电话咨询"被挤到第二行）。
   改成三等分网格，电话按钮的号码收到第二行，三个按钮齐平一行。 */
.detail-btns{
    display:grid;
    /* 「电话咨询 + 号码」要占两行、字数最多，给它多一点宽度；其余两个放得下四个字即可。 */
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.4fr);
    gap:10px;
    margin-top:26px;
}
.detail-btns .btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:auto;min-height:46px;padding:6px 8px;
    font-size:13.5px;line-height:1.2;text-align:center;white-space:nowrap;
}
.detail-btns .btn .tn{
    display:block;margin-top:2px;
    font-size:11.5px;font-weight:500;letter-spacing:.2px;opacity:.85;
}
/* ⚠ 悬浮工具栏 .side-tools 是 position:fixed;right:18px、宽 76px，
   而正文右缘 = 视口宽 − 56px → 视口 <1508 时**恒定重叠 38px**（既有问题，
   一排三等分按钮把它暴露出来：号码最后几位被白框盖住）。
   这里在重叠区间给按钮行留出右侧余量，保证号码完整可见。 */
@media (min-width:981px) and (max-width:1520px){
    .detail-btns{padding-right:48px}
    .detail-btns .btn .tn{font-size:11px}
}
@media (max-width:1140px){
    /* ≤1140 时右栏已经放不下三等分（实测 1024 会挤到文字溢出），退回整行竖排 */
    .detail-btns{grid-template-columns:minmax(0,1fr);padding-right:0}
}

/* ═══════════════ 50.3 联系我们：联系方式卡片改三列 ═══════════════
   site.css 里 .ct-grid 是两列，5 张卡片排成 2/2/1，最后一行空一半。
   宽屏改三列（3+2），版面更紧凑、更像"联系方式墙"。 */
.ct-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){ .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .ct-grid{grid-template-columns:minmax(0,1fr)} }

/* ═══════════════ 50.4 联系我们：正文首段做成"填写指引"提示条 ═══════════════
   删掉冗余的联系信息表之后，正文只剩一句"请留下需求…"的指引。
   与其当普通段落，不如做成一条克制的提示，紧跟表单更顺。 */
body.p-inner .main--wide .rich > p:only-of-type:first-of-type{
    padding:16px 18px;
    background:var(--brand-l,#eef4ff);
    border-left:3px solid var(--brand,#0076ff);
    border-radius:0 4px 4px 0;
    font-size:14.5px;
    line-height:1.85;
    color:#2b3d57;
    font-weight:400;
}

/* ═══════════════ 50.5 动效退让（本文件最后） ═══════════════ */
@media (prefers-reduced-motion:reduce){
    body.p-inner .main--wide .rich img,
    body.p-inner .page-lead{-webkit-transition:none!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v30 增量（第 25 轮）—— 客户提的 6 件事，全部是手机端
   ───────────────────────────────────────────────────────────────────────────
     ① 手机端抽屉导航重新设计（两级手风琴）      → 51.1（+ _head.php / site.js）
     ② 首页客户案例单卡滑动 · 热销产品滑动圆点   → 51.2（+ home.php）
     ③ 首页应用行业清单改一行两列                → 51.3
     ④ 合作流程圆点与序号并到一行 + 竖线贯穿      → 51.4
     ⑤ 页脚产品目录一行两列、新闻资讯栏去掉      → 51.5
     ⑥ 内页手机端重排（侧栏后置 / 产品卡 2 列 / 新闻卡压短）→ 51.6 ~ 51.8
     +  悬浮客服栏：抽屉打开时让位、手机端折成圆钮 → 51.9
        （_d31.py 用真鼠标点出来的：它盖住了抽屉里的 ± 按钮，
          客户说的"点了没反应"有一半来自这里）

   _m30.py 实测（390×844，改前）：
     · 抽屉点开产品中心：.sub 高 595px、抽屉可滚高 1373px（视口 844）→ 要滚 1.6 屏
     · .ph-cases 4 列、每卡 77.75px（标题被截成"热塑性塑料…"）
     · .ph-feat 单列 6 张、板块高 2731px
     · .ph-sol2-list 单列 14 格、高 869px
     · .ph-step .ph-step-d 的点在标题上方 20px（不在同一行）
     · .f2col 单列 11 项、高 345px；.fcol-news 仍占 178px
     · .pv-grid 3 列 106px（PHP 内联 style 写死的），卡片文字全挤碎
     · .list-item 每条 335px、整页 6424px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 51.1 手机端抽屉导航：两级手风琴（客户第 4 次反馈） ═══════════════

   病象：手机端点「产品中心」后，7 个分类组的二级链接一次性全铺开 ——
        实测 .sub 高 595px、抽屉可滚高 1373px，而视口只有 844，
        要滚 1.6 屏才看完，且"标题 + 一串链接"完全没有层级感。
   客户原话："手机端点击展开相应还是问题需要重新设计 比如点击产品中心
             这些有二级目录"。

   设计：一级分类各占一行（≥46px 触摸高度），右侧一个 ± 号；
        点该行才展开它的二级链接，同组同时只开一个。
        分类名本身仍是链接（可直达一级分类页），展开按钮独立在右侧，
        不会"想展开却被跳走"。
        营销块（最新动态 / 资质与验厂卡）在抽屉里直接不显示 ——
        抽屉是导航，不是落地页。
   桌面端：.sub-col-t 恒为 display:none，.sub-col-h 只是个透明包裹层，
        结构与改前完全等价（47.2 的 26px 列间距与分隔线不受影响）。 */

.nav .sub .sub-col-t{display:none}

@media(max-width:980px){
    .nav .sub{gap:0;padding:2px 0 2px}
    .nav .sub .sub-col{
        min-width:0;padding:0;
        border-bottom:1px solid var(--line,#e9eef5);
    }
    .nav .sub .sub-col:last-child{border-bottom:0}
    .nav .sub .sub-col-h{
        display:flex;align-items:center;gap:8px;
        min-height:46px;
    }
    .nav .sub .sub-col-h .sub-title{
        flex:1 1 auto;min-width:0;margin:0;
        font-size:14.5px;font-weight:600;color:var(--ink,#16233a);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    /* ± 号：两条短杠，展开时竖的那条缩到 0 —— 就是一个加号变减号 */
    .nav .sub .sub-col-t{
        display:block;flex:0 0 auto;position:relative;
        width:36px;height:36px;margin:0 2px 0 0;padding:0;
        border:0;background:none;border-radius:50%;cursor:pointer;
        -webkit-appearance:none;appearance:none;
    }
    .nav .sub .sub-col-t::before,
    .nav .sub .sub-col-t::after{
        content:'';position:absolute;left:50%;top:50%;
        width:12px;height:1.6px;margin:-0.8px 0 0 -6px;
        background:var(--steel-400,#9aa9bd);border-radius:1px;
        transition:transform .22s var(--ease,ease),background .22s var(--ease,ease);
    }
    .nav .sub .sub-col-t::after{transform:rotate(90deg)}
    .nav .sub .sub-col.open .sub-col-t::before,
    .nav .sub .sub-col.open .sub-col-t::after{background:var(--brand-d,#005bc0)}
    .nav .sub .sub-col.open .sub-col-t::after{transform:rotate(90deg) scaleX(0)}
    /* 二级默认收起；展开时给一条淡底 + 左缩进，层级看得见 */
    .nav .sub .sub-links{display:none}
    .nav .sub .sub-col.open .sub-links{
        display:flex;flex-direction:column;gap:1px;
        margin:0 0 10px;padding:2px 0 0 2px;
    }
    .nav .sub .sub-col.open .sub-links a{
        font-size:13.5px;padding:8px 0 8px 15px;
        border-left-width:1px;
    }
    /* 抽屉里不铺营销块 */
    .nav .sub .sub-col--pick{display:none}
}

/* ═══════════════ 51.2 手机端首页：客户案例 / 热销产品 → 单卡滑动 + 圆点 ═══════════════

   客户原话："首页客户案例不是单个滑动那样 并在一起；
             还有手机端首页产品热销商品也改成滑动圈点切换"。
   实测改前（390）：.ph-cases 是 4 列、每张卡 77.75px（标题全被截成"热塑性塑料…"）；
   .ph-feat 是单列 6 张、板块高 2731px。

   根因（第 5 次踩同一类坑）：42.2 那条
       body.p-home .ph-cases{grid-template-columns:repeat(4,…)}
   是**无媒体查询**的规则（0,2,1），源序在 39.9 的
       @media(max-width:760px){ body.p-home .ph-cases{…1fr} }
   之后 → 同特异性看源序，移动端的 1 列被它压掉，只剩 4 列。

   现在 ≤980 两者都换成 flex 滚动轨道：
     · flex:0 0 100% + gap:16px → 一屏正好一张卡，滚动步长 = 卡宽 + 间距，
       所以"第 i 个圆点 → scrollLeft = i × 步长"是精确落点，
       不会出现客户评价那次的"第 4 个圆点点不动"（目标被 maxSL 夹住）。
     · 圆点数 = 卡片数，点/滚动双向同步。 */

.ph-sdots{display:none}
.ph-sdots[hidden]{display:none!important}

@media(max-width:980px){
    body.p-home .ph-cases,
    body.p-home .ph-feat{
        display:flex;
        gap:16px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding-bottom:2px;
    }
    body.p-home .ph-cases::-webkit-scrollbar,
    body.p-home .ph-feat::-webkit-scrollbar{display:none}
    body.p-home .ph-cases > .ph-case-i,
    body.p-home .ph-feat > .ph-feat-i{
        flex:0 0 100%;
        width:100%;
        min-width:0;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }
    /* 单卡时可以放大一点图，横向宽了不用再 16/10 压扁 */
    body.p-home .ph-case-im{aspect-ratio:16/9}
    body.p-home .ph-feat-im{aspect-ratio:4/3}

    .ph-sdots{
        display:flex;justify-content:center;align-items:center;gap:8px;
        margin-top:18px;
    }
    .ph-sdot{
        display:block;width:8px;height:8px;padding:0;border:0;border-radius:50%;
        background:#c9d6e6;cursor:pointer;
        -webkit-appearance:none;appearance:none;
        transition:width .22s var(--ease,ease),background .22s var(--ease,ease);
    }
    .ph-sdot.is-on{width:22px;border-radius:5px;background:var(--brand,#0076ff)}
    /* 深色板块里的圆点（当前两处都在白底段，留着备用，避免下次放进去看不见） */
    .ph-sec--dark .ph-sdot{background:rgba(255,255,255,.26)}
    .ph-sec--dark .ph-sdot.is-on{background:#fff}
}

/* ═══════════════ 51.3 手机端应用行业清单：一行两列 ═══════════════

   客户原话："手机端这块改成一行两列模式 当前页面看起来很长"。
   实测改前：.ph-sol2-list 单列 14 格、高 869px。
   根因：@media(max-width:520px){ body.p-home .ph-sol2-list{grid-template-columns:1fr} }
   把 ≤760 已经设好的两列又退回单列。这里按 980 上限统一重设为两列
   （同特异性、源序在最后 → 压得住 ≤520 那条）。格子里的材料名允许两行截断。 */

@media(max-width:980px){
    body.p-home .ph-sol2-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }
    body.p-home .ph-sol2-t{
        min-height:0;height:auto;
        padding:9px 10px;
        align-items:flex-start;
    }
    body.p-home .ph-sol2-t .ph-sol2-tn{font-size:13.5px;line-height:1.3}
    body.p-home .ph-sol2-t .ph-sol2-tm{
        font-size:10.5px;line-height:1.35;margin-top:3px;white-space:normal;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    body.p-home .ph-sol2-go{
        margin-top:0;height:auto;min-height:0;align-self:stretch;
        display:flex;align-items:center;justify-content:center;
        padding:9px 8px;font-size:12.5px;
    }
}

/* ═══════════════ 51.4 手机端合作流程：点与序号并到一行 + 竖线贯穿 5 步 ═══════════════

   客户原话："手机端合作流程那 大圆点和小目录改成一行，还有第五条前面好像没有竖线了"。

   实测改前（390）：.ph-step-d i（9px 圆点）在 .ph-step-h 上方 20px
   （dotTopVsHeadTop = -20）—— 点在竖列左侧的空白里，序号 01 在它下面一行。
   竖线：.ph-step-i::before{top:12px;bottom:0} + :last-child{display:none} →
        第 4 项的线止于第 5 项顶部，而第 5 项的点在自身 3px 处，中间断开
        （点 1030~1041，线止于 1027）→ "第五条前面没有竖线"。

   现在：把每步改成两列网格（左列 16px 放点、右列放标题/说明/时效），
        点与序号自然同排；竖线改成从"本项的点"贯穿到"下一项的点"，
        最后一项只画到自己的点为止（`:last-child{height:11px}`），
        线不会拖到空白里，也不会在第五项前面断掉。
        点加一圈白描边，线从点背后穿过时不会糊成一团。 */

@media(max-width:980px){
    body.p-home .ph-step{grid-template-columns:minmax(0,1fr);row-gap:0}
    body.p-home .ph-step-i{
        display:grid;
        grid-template-columns:16px minmax(0,1fr);
        column-gap:10px;
        padding:0 0 26px 0;
        position:relative;
    }
    body.p-home .ph-step-i::before{
        content:'';position:absolute;left:7px;top:0;bottom:0;
        width:1px;background:var(--line-2,#e3e9f2);
    }
    body.p-home .ph-step-i:first-child::before{top:11px}
    body.p-home .ph-step-i:last-child::before{bottom:auto;height:11px}

    body.p-home .ph-step-i .ph-step-d{
        grid-column:1;grid-row:1;
        position:static;width:auto;height:auto;margin:0;
        display:flex;align-items:center;justify-content:center;
        background:none;
    }
    body.p-home .ph-step-i .ph-step-d i{
        position:static;display:block;
        width:9px;height:9px;border-radius:50%;
        background:var(--d-brand,#005bc0);
        box-shadow:0 0 0 3px #fff;
    }
    body.p-home .ph-step-h{
        grid-column:2;grid-row:1;
        margin:0;min-height:22px;flex-wrap:nowrap;gap:8px;
    }
    body.p-home .ph-step-p{grid-column:2;grid-row:2;margin:10px 0 0}
    /* 时效标签是 grid 格子 —— 不写 justify-self 会被拉成整行宽（实测截图已确认） */
    body.p-home .ph-step-day{
        grid-column:2;grid-row:3;
        margin-top:10px;
        align-self:flex-start;justify-self:flex-start;
        width:auto;
    }
}

/* ═══════════════ 51.5 手机端页脚：产品目录一行两列 + 去掉新闻资讯栏 ═══════════════

   客户原话："手机端底部相应有点问题 产品目录改成一行两列，新闻资讯列项直接去掉"。
   实测改前：.f2col 是单列 11 项、高 345px；.fcol-news 另占 178px。
   根因同前：≤640 已经设了 `.f2col` 两列，但 ≤420 又退回单列；
           而新闻资讯的 4 个分类链接在顶部导航与抽屉里都有，页脚重复三遍。 */

@media(max-width:980px){
    body.p-home .fcol-news,
    body.p-inner .fcol-news{display:none}
    body.p-home .f2col,
    body.p-inner .f2col{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 12px;
    }
}
@media(max-width:420px){
    /* 客户要的就是"一行两列"，超窄屏也保持两列（长品类名允许折行） */
    body.p-home .f2col,
    body.p-inner .f2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
    body.p-home .f2col li a,
    body.p-inner .f2col li a{font-size:12px;line-height:1.5}
}

/* ═══════════════ 51.6 内页手机端：先看内容，侧栏往后放 ═══════════════

   实测：产品列表页 .side 高 510px，整块排在正文**上方**，
        用户点进"产品中心"要先滚一屏侧栏才看到产品。
   侧栏里最有价值的是联系卡，目录与热门内容都只是导航 ——
   手机端把它们放到正文之后，转化入口依然两屏内可达。
   .layout 在 ≤980 已是单列 grid（_v21 的 250px 两列被显式重设过），
   所以 order 直接生效。 */

@media(max-width:980px){
    body.p-home .layout > .main,
    body.p-inner .layout > .main{order:1}
    body.p-home .layout > .side,
    body.p-inner .layout > .side{order:2}
}

/* ═══════════════ 51.7 手机端产品列表：2 列 + 卡片紧凑 ═══════════════

   客户原话："手机端产品中心展示也有bug问题，麻烦需要优化展现…增加交互和清爽度"。
   实测改前：.pv-grid 是「3 列 × 106px」—— 106px 的卡里塞着 15.5px 的标题、
   13px 的副标题、两枚规格标签和两个操作链接，文字全被挤碎；
   根因是 product_list.php 里那句内联 `style="grid-template-columns:repeat(3,1fr)"`，
   内联样式优先级高于任何选择器，CSS 里写多少条都压不动它。
   修法：把列数从 PHP 内联样式里拿出来交给 CSS（见同批 product_list.php 改动），
        手机端设 2 列、卡片内距与字号同步收一档。 */

.prod-grid.pv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1080px){
    .prod-grid.pv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
    .prod-grid.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    body.p-inner .prod-card{border-radius:3px}
    body.p-inner .prod-img{aspect-ratio:4/3}
    body.p-inner .prod-body{padding:12px 13px 14px}
    body.p-inner .prod-body h3{
        font-size:14px!important;line-height:1.45;min-height:0;margin-bottom:6px;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    body.p-inner .prod-body p{
        font-size:12.5px!important;line-height:1.6;margin-bottom:10px;flex:0 0 auto;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    body.p-inner .pc-tags{gap:4px;margin-bottom:10px}
    /* 规格标签在窄卡里会一行一个、把卡撑高三行 ——
       改成一条可横向滑动的标签条（一行高），信息不丢、卡面清爽。 */
    body.p-inner .pc-tags{
        flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;
        padding-bottom:1px;
    }
    body.p-inner .pc-tags::-webkit-scrollbar{display:none}
    body.p-inner .pc-tags span{flex:0 0 auto;white-space:nowrap}
    body.p-inner .pc-tags span{font-size:10.5px;padding:2px 7px;gap:4px}
    body.p-inner .pc-tags span i{font-size:10px}
    body.p-inner .pc-act{gap:8px;margin-top:auto}
    body.p-inner .pc-act .prod-more,
    body.p-inner .pc-quote{font-size:12.5px}
    /* 筛选条：手机端一行能放几个放几个，别把"全部"顶到第二行 */
    body.p-inner .flt-bar{padding:4px 14px}
    body.p-inner .flt-row{padding:9px 0}
}

/* ═══════════════ 51.8 手机端新闻列表：日期并到标题上方，卡片压短 ═══════════════

   实测改前：.list-item 每条 335px（日期独占 66px 左栏、右侧正文 268px），
   一页 10 条 → doc 6424px。日期竖栏在手机上宽度占比过重、信息量却最小。
   改成：日期变成标题上方一行小字（日 + 年月），正文吃满整宽，
        摘要压到 2 行，标签行保留但缩小。 */

@media(max-width:980px){
    body.p-inner .list-item{display:block;padding:14px 15px}
    body.p-inner .list-date{
        display:flex;align-items:baseline;gap:7px;
        flex:0 0 auto;text-align:left;
        border-right:0;padding:0;margin:0 0 7px;
    }
    body.p-inner .list-date b{font-size:19px;color:var(--brand-d,#005bc0);line-height:1}
    body.p-inner .list-date span{font-size:12px}
    body.p-inner .list-body h3{font-size:15.5px;line-height:1.5;margin-bottom:7px}
    body.p-inner .list-body p{
        font-size:13px;line-height:1.65;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    body.p-inner .list-body .list-tag{margin-bottom:7px}
    body.p-inner .list-body .tag-chips-s{margin-top:8px}
    body.p-inner .list-body .tag-chip-s{font-size:11.5px;padding:2px 8px}
}

/* ═══════════════ 51.9 悬浮客服栏：抽屉打开时让位 + 手机端折成圆钮 ═══════════════

   _d31.py 真鼠标点出来的根因（不是猜的）：
     抽屉里「产品中心 → 第 3 个分类」那一列的 ± 按钮 rect 是 x 343~379 / y 564~600，
     而 elementFromPoint(361,582) 返回的是 **A.st-btn** ——
     右下角悬浮客服栏（position:fixed;right:12px、按钮 50px、z-index 110）
     正好盖在 x 328~378 上，而页头 z-index 只有 90。
     点下去被悬浮栏接走 → 客户看到的"点了没反应 / 还是有问题"。
   同时它在手机端本来就压着正文（案例摘要、产品卡参数都被盖住），
   实测 y 480~762 一整段都归它。

   两条一起修：
     · 抽屉打开时（body.nav-open）整栏隐藏 —— 覆盖层优先；
     · 手机端默认折成一个圆钮，点开才展开全部（桌面端 .st-fab 隐藏、
       .st-list 走 display:contents，布局逐像素不变）。 */

.st-fab{display:none}
.st-list{display:contents}

@media(max-width:980px){
    body.nav-open .side-tools{
        opacity:0;visibility:hidden;pointer-events:none;
        transition:opacity .2s,visibility .2s;
    }
    /* 底部快捷条同样让位：它固定在最下面那 56px，而 #nav 的
       max-height 算的是整屏（calc(100vh - 页头 - 40px)）——
       抽屉滚到底时最后一项正好压在它下面。
       实测：全折叠态下第 4、5 组的 ± 按钮点下去命中的是 .mbar 里的 svg。 */
    body.nav-open .mbar{display:none}
    .st-list{display:none;flex-direction:column;gap:6px}
    .side-tools.open .st-list{display:flex}
    .side-tools{
        right:12px;bottom:84px;gap:0;
        padding:6px;border-radius:19px;
        background:rgba(255,255,255,.86);
        border:1px solid rgba(255,255,255,.94);
        -webkit-backdrop-filter:blur(14px) saturate(1.5);
        backdrop-filter:blur(14px) saturate(1.5);
        box-shadow:0 16px 40px -20px rgba(8,22,44,.42),0 2px 6px rgba(8,22,44,.06);
    }
    .side-tools.open{gap:6px}
    .st-fab{
        display:flex;align-items:center;justify-content:center;
        width:52px;height:52px;padding:0;margin:0;
        border-radius:16px;border:1px solid var(--brand,#0076ff);
        background:var(--brand,#0076ff);color:#fff;
        cursor:pointer;-webkit-appearance:none;appearance:none;
        box-shadow:0 8px 20px -10px rgba(0,118,255,.7);
        transition:background .22s,transform .22s;
    }
    .st-fab .ic{width:24px;height:24px;display:block;fill:currentColor}
    .st-fab .ic path[fill="none"]{fill:none}
    .side-tools.open .st-fab{background:var(--brand-d,#005bc0);border-color:var(--brand-d,#005bc0)}
    .side-tools.open .st-fab .ic{transform:rotate(180deg)}
    .st-fab .ic{transition:transform .24s}
}

/* ═══════════════ 51.10 动效退让（本文件最后） ═══════════════ */
@media (prefers-reduced-motion:reduce){
    .nav .sub .sub-col-t::before,
    .nav .sub .sub-col-t::after,
    .ph-sdot,
    .st-fab,
    .st-fab .ic,
    body.p-home .ph-cases,
    body.p-home .ph-feat{transition:none!important;scroll-behavior:auto!important}
}