/* ==========================================================================
   PLB Battery · Website UI System · Version 10
   Unified corporate design — deep navy / brand blue / cyan accents
   Sections: tokens · base · motion · header · buttons · video hero · photo
   bands · sections · cards · components · footer · responsive · a11y
   v7: navbar #0352A2 · tabs fix · container gradient frames · search overlay
   v8: stat number fix · CTA photo card visibility · product-detail overview panel
   v9: sticky product image · compact breadcrumb head · INQUIRY/WHATSAPP/BUY button set
   v10: product-detail CTA band uses customer-service photo background
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
--blue:#0352A2;--blue-d:#023E7D;--blue-dd:#012A56;--blue-l:#EAF2FB;--blue-ll:#F4F8FC;
--navy:#041A36;--navy-d:#02122A;--navy-l:#0A2C58;
--cyan:#C80000;--cyan-d:#A30000;--cyan-l:#FDECEC;--cyan-b:#F0A0A0;
--ink:#0F1F33;--ink2:#475467;--ink3:#5F6F82;
--line:#E3EAF3;--line2:#EDF2F8;--soft:#F5F9FD;
--navmax:1800px;--max:1460px;--r:10px;--r-lg:16px;
--sh:0 18px 50px rgba(3,52,110,.10);
--sh-h:0 30px 72px rgba(1,42,86,.22);
--glass:rgba(7,24,47,.55);--glass-b:rgba(255,255,255,.15);
/* V19：全站通用 H2 字号（桌面 36px 封顶，窄屏 22px 起；沿用按视口高度收敛的老习惯） */
--h2:clamp(22px,min(2.5vw,4.2vh),36px);
--ease:cubic-bezier(.16,1,.3,1);
--fh:'Inter','Montserrat',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
--fb:'Open Sans',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
--font-h:var(--fh)}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;font-family:var(--fb);color:var(--ink2);background:#fff;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--fh);color:var(--ink);margin:0;line-height:1.18;text-wrap:balance}
/* 全站 H1/H2 统一：同一字体族（Inter）· 同一字重（800）· 全大写 · 同一响应式字号
   vw 兼顾窄屏、vh 兼顾矮屏；这里是全站唯一来源，各页组件不再单独指定 H1/H2 字号
   字号已下调：全站最长的标题（75 字符的首页 H1、70 字符的产品页 H1）在 768px 以上宽度
   均可排进 2 行内；H2 在桌面端基本 1 行、最长 2 行 */
h1{font-size:clamp(26px,min(3.3vw,5.2vh),44px);font-weight:800;letter-spacing:-.4px;text-transform:uppercase}
h2{font-size:var(--h2);font-weight:800;letter-spacing:-.2px;text-transform:uppercase}
h3{font-size:21px;font-weight:700}
h4{font-size:16.5px;font-weight:700}
p{margin:0 0 14px}
a{color:var(--blue);text-decoration:none;transition:.22s}
a:hover{color:var(--cyan-d)}
img{max-width:100%}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(200,0,0,.28)}
:focus-visible{outline:3px solid rgba(200,0,0,.6);outline-offset:2px;border-radius:4px}
.ic{flex:none;display:inline-block;vertical-align:middle}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}
.wrap-nav{max-width:var(--navmax);margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:8px;top:8px}
.center{text-align:center}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(3,82,162,.18),transparent);border:0;margin:0}

/* ---------- 3. Motion (reveal system — kept early so component hovers win) ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv-l{transform:translateX(-36px)}
.rv-r{transform:translateX(36px)}
.rv-s{transform:scale(.95)}
.rv.in{opacity:1;transform:none}
@keyframes hRise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes fIn{from{opacity:0}to{opacity:1}}
.f-in{opacity:0;animation:fIn 1.4s ease .9s both}
.h-in{opacity:0;animation:hRise 1.05s var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.29s}.d4{animation-delay:.42s}.d5{animation-delay:.55s}.d6{animation-delay:.68s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}
@keyframes beam{0%{left:-8%}100%{left:104%}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pz{from{transform:scale(1.03)}to{transform:scale(1.1)}}
@media (scripting: none){.rv{opacity:1;transform:none}.vhero-v{opacity:1}.h-in,.f-in{opacity:1;animation:none}}

/* ---------- 4. Scroll progress + header ---------- */
.sp{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:#C80000;box-shadow:0 0 12px rgba(200,0,0,.8)}
.hd{position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;transition:background .35s,box-shadow .35s}
.hd:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,12,28,.6),transparent);transition:.35s;pointer-events:none}
.hd.scrolled{background:#0352A2;box-shadow:0 16px 44px rgba(1,20,44,.42)}
.hd.scrolled:before{opacity:0}
body.hd-solid .hd{background:#0352A2;box-shadow:0 16px 44px rgba(1,20,44,.42)}
body.hd-solid .hd:before{opacity:0}
.hd-in{display:flex;align-items:center;height:86px;gap:10px;position:relative}
.hd-logo{display:flex;align-items:center;margin-right:24px}
.logo{height:48px;width:auto;display:block}
.nav{display:flex;align-items:center;height:86px}
.nav-a{display:flex;align-items:center;gap:6px;height:86px;padding:0 16px;color:#fff;font:600 15px var(--fh);letter-spacing:.2px;position:relative;white-space:nowrap;cursor:pointer}
.nav-a:hover{color:#fff}
.nav-a:after{content:"";position:absolute;left:16px;right:16px;bottom:24px;height:2px;border-radius:2px;background:#C80000;transform:scaleX(0);transform-origin:left;transition:.32s var(--ease)}
.nav-a:hover:after,.nav-a.on:after{transform:scaleX(1)}
.nav-a.on{color:#fff}
.nav-cv{opacity:.7;transition:.25s}
.dd-w:hover .nav-cv{transform:rotate(180deg)}
.dd-w{height:86px;position:relative}
.dd{position:absolute;top:100%;left:0;transform:translateY(16px);opacity:0;visibility:hidden;transition:.3s var(--ease);z-index:210}
.dd:before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px}
.dd-w:hover .dd{opacity:1;visibility:visible;transform:none}
.nav>.dd-w:last-child .dd{left:auto;right:0}
.dd-in{background:#fff;border-radius:0 0 16px 16px;box-shadow:0 40px 92px rgba(1,26,54,.30);padding:30px 34px;display:flex;gap:40px;position:relative;overflow:hidden}
.dd-in:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#C80000}
.dd-col{min-width:210px}
.dd-h{font:700 12px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
/* V18：Media 下拉为 News + Video 双列；窄桌面（1281–1292px）整体左移 14px，避免右侧超出视口 */
@media (min-width:1281px){
.dd-w:has(> .nav-a[href="news.html"]) .dd{left:-14px}
}
.dd-l{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:6px;color:var(--ink2);font-size:14.5px;white-space:nowrap}
.dd-l:hover{background:var(--blue-ll);color:var(--blue)}
.dd-ar{opacity:0;transform:translateX(-4px);transition:.2s}
.dd-l:hover .dd-ar{opacity:1;transform:none}
.dd-feat{width:252px;border-radius:10px;overflow:hidden;background:var(--blue-ll);display:block;align-self:flex-start}
.dd-feat-im{display:block;height:140px;overflow:hidden}
.dd-feat-im img{width:100%;height:100%;object-fit:cover;transition:.5s}
.dd-feat:hover .dd-feat-im img{transform:scale(1.06)}
.dd-feat b{display:block;padding:14px 16px 2px;color:var(--ink);font:700 15.5px var(--fh)}
.dd-feat span{display:block;padding:0 16px;color:var(--ink3);font-size:12.5px}
.dd-feat em{display:flex;align-items:center;gap:6px;font-style:normal;padding:10px 16px 16px;color:var(--cyan-d);font:600 13px var(--fh)}
.hd-r{display:flex;align-items:center;gap:16px;margin-left:auto}
.hic{background:rgba(255,255,255,.12);border:0;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s}
.hic:hover{background:rgba(255,255,255,.25)}
.lang{display:inline-flex;align-items:center;color:#fff;position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#fff;font:700 14px/1 var(--fh);padding:9px 2px;cursor:pointer;line-height:1}
.lang-btn .ic{flex:none}
.lang-btn:hover{opacity:.85}
.lang-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
.lang-menu{position:absolute;top:calc(100% + 12px);right:0;width:210px;max-height:min(360px,70vh);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(1,26,54,.22);padding:6px;z-index:80}
.lang-menu[hidden]{display:none}
.lang-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:6px;background:none;color:var(--ink);font:500 13.5px/1.4 var(--fb);cursor:pointer;white-space:nowrap}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--blue-l);color:var(--blue)}
.lang-gt{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;visibility:hidden}
@media(max-width:480px){.lang-btn{font-size:13px;padding:8px 0}.lang-menu{width:190px}}
.hdiv{width:1px;height:22px;background:rgba(255,255,255,.25)}
.hphone{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.88);font-size:14px}
.hphone:hover{color:#fff}
.btn-cta{background:#fff;color:var(--blue);border-radius:50px;box-shadow:0 10px 26px rgba(1,28,58,.28)}
.btn-cta:hover{color:var(--blue-d);box-shadow:0 14px 34px rgba(200,0,0,.5);transform:translateY(-2px)}
.hd .btn-cta{height:46px;padding:0 26px;font:700 15px var(--fh)}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border-radius:50px;
font:600 16px var(--fh);border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s,background .28s,color .2s,border-color .28s;white-space:nowrap}
.btn:after{content:"";position:absolute;top:-10%;left:-130%;width:55%;height:120%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:.6s}
.btn:hover:after{left:150%}
.btn:not(.btn-link):hover{transform:translateY(-2px)}
.btn:not(.btn-link):active{transform:translateY(0) scale(.97)}
.btn .ic{transition:transform .3s}
.btn:not(.btn-link):hover .ic{transform:scale(1.08)}
.btn-sm{height:42px;padding:0 20px;font-size:14px;border-radius:50px}
.btn-xl{height:56px;padding:0 34px;font-size:16.5px}
.btn-w{width:100%}
.btn-cta2{background:#C80000;color:#fff}
.btn-cta2:hover{color:#fff;box-shadow:0 16px 38px rgba(3,82,162,.42);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);color:#fff;box-shadow:0 14px 34px rgba(3,82,162,.35);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{color:var(--blue-d);box-shadow:0 16px 36px rgba(255,255,255,.25);transform:translateY(-2px)}
.btn-ol{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55);color:#fff}
.btn-ol:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}
.btn-line{border-color:rgba(3,82,162,.35);color:var(--blue);background:#fff}
.btn-line:hover{border-color:var(--blue);background:var(--blue-ll);color:var(--blue);transform:translateY(-2px)}
.btn-g{background:#25D366;color:#fff}
.btn-g:hover{background:#1EBE5A;color:#fff}
.btn-link{height:auto;padding:0;border:0;background:none;color:var(--cyan-d);font-weight:700;gap:8px}
.btn-link:hover{color:var(--blue);gap:12px}

/* ---------- 6. Video hero (homepage) ---------- */
.vhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(160deg,#04182F,var(--blue-dd) 58%,var(--blue-d))}
.vhero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.vhero-v.ready{opacity:1}
.vhero-ov{position:absolute;inset:0;background:linear-gradient(102deg,rgba(2,11,26,.94) 6%,rgba(2,22,46,.78) 44%,rgba(3,40,84,.44) 80%,rgba(3,52,106,.32))}
.vhero-ov:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,24,.55),transparent 26%,transparent 60%,rgba(2,10,24,.78))}
.vhero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;
-webkit-mask-image:radial-gradient(82% 82% at 68% 26%,#000 0%,transparent 100%);mask-image:radial-gradient(82% 82% at 68% 26%,#000 0%,transparent 100%)}
.vhero-in{position:relative;z-index:3;width:100%;padding-top:168px;padding-bottom:130px}
.vhero h1{color:#fff;margin:0 0 22px;max-width:1060px}
.vhero h1 em{font-style:normal;background:#C80000;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(200,0,0,.16);border:1px solid rgba(200,0,0,.5);color:#FFC9C9;padding:9px 18px;border-radius:100px;font:600 13.5px var(--fh);letter-spacing:.06em;text-transform:uppercase;margin-bottom:26px;backdrop-filter:blur(4px)}
.hero-sub{color:rgba(255,255,255,.86);font-size:18.5px;max-width:660px;margin-bottom:34px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:46px}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap}
.hbadge{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.92);font-size:13.5px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);padding:9px 16px;border-radius:8px;backdrop-filter:blur(6px);transition:.25s}
.hbadge:hover{transform:translateY(-2px);border-color:rgba(240,160,160,.7)}
.hbadge .ic{color:var(--cyan)}
.hero-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);color:rgba(255,255,255,.65);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;z-index:3}
.hero-scroll .ic{animation:scrollHint 1.8s ease-in-out infinite}

/* ---------- 7. Photo bands (homepage) ---------- */
.band{position:relative;overflow:hidden;background:var(--navy-d);padding:clamp(96px,12vh,150px) 0;isolation:isolate}
.band.tall{min-height:94vh;min-height:94svh;display:flex;align-items:center}
.band-bg{position:absolute;inset:-9% 0;background-size:cover;background-position:center;transform:translate3d(0,var(--par,0px),0) scale(1.06);will-change:transform}
.band-ov{position:absolute;inset:0}
.band-ov.center{background:linear-gradient(180deg,rgba(2,11,26,.88),rgba(2,17,36,.66) 46%,rgba(1,9,21,.9))}
.band-ov.left{background:linear-gradient(102deg,rgba(2,11,26,.93) 4%,rgba(2,19,40,.72) 46%,rgba(3,30,62,.42) 82%,rgba(3,40,84,.3))}
.band-in{position:relative;z-index:2;width:100%}
.band h2{color:#fff}
.band .scr-hd h2{color:#fff}
.overline.lt{color:#F0A0A0}
.overline.lt:before{background:#C80000}

/* statement pieces */
.st-q{width:64px;height:64px;margin:0 auto 30px;border-radius:50%;background:rgba(200,0,0,.15);border:1px solid rgba(200,0,0,.5);display:flex;align-items:center;justify-content:center;color:#F0A0A0}
.st-t2{font:800 clamp(26px,2.6vw,40px)/1.4 var(--fh);color:#fff;letter-spacing:-.5px;max-width:1080px;margin:0 auto 22px;text-wrap:balance}
.st-t2 em{font-style:normal;background:#C80000;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-s{color:rgba(255,255,255,.74);font-size:17px;max-width:840px;margin:0 auto 36px}

/* ---------- 8. Sections & heads ---------- */
.sec{padding:clamp(72px,7vw,104px) 0;position:relative}
.sec.dark{background:var(--blue-dd);color:rgba(255,255,255,.78)}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}
.sec.dark .overline{color:#F0A0A0}
.sec.soft{background:var(--soft)}
.sec-head{max-width:900px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.between{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;max-width:none;margin-bottom:44px}
/* V19：左右两栏底边对齐 —— 去掉左栏最后一段的尾部外边距、右栏按钮组的底部内距，
   让「标题 + 说明」的末行与右侧按钮组真正齐平（原先相差 14px 以上） */
.sec-head.between>div>:last-child{margin-bottom:0}
.sec-head.between .consult{padding-bottom:0}
.sec-sub{color:var(--ink2);font-size:17.5px;margin-top:16px}
.sec.dark .sec-sub{color:rgba(255,255,255,.7)}
.overline{display:inline-flex;align-items:center;gap:10px;font:700 13px var(--fh);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-d);margin-bottom:16px}
.overline:before{content:"";width:26px;height:2px;background:#C80000}
.sec-head.center .overline:before{display:none}
.sec-head.center .overline:after{content:"";width:26px;height:2px;background:#C80000}
.beam{height:1px;background:rgba(200,0,0,.35);position:relative;overflow:visible;margin:0}
.beam:after{content:"";position:absolute;top:-1px;left:-10%;width:140px;height:3px;border-radius:3px;background:#C80000;animation:beam 4.5s linear infinite}
.scr-hd{max-width:900px;margin-bottom:46px}
.scr-sub{color:rgba(255,255,255,.78);font-size:17px;margin-top:14px}

/* ---------- 9. Grid & cards ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;transition:transform .32s var(--ease),box-shadow .32s,border-color .32s;position:relative}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(200,0,0,.55)}
.ic-b{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue-l),#fff);color:var(--blue);border:1px solid var(--line);margin-bottom:18px;transition:.3s}
.card:hover .ic-b{background:#C80000;color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(3,82,162,.3)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink2);font-size:15px;margin:0}
.kv{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;font:600 12.5px var(--fh);letter-spacing:.02em}
.chip.b{background:var(--blue-l);color:var(--blue)}
.chip.c{background:var(--cyan-l);color:var(--cyan-d)}
.chip.l{border:1px solid var(--line);color:var(--ink2);background:#fff}
.chip.d{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.num{font:800 46px/1.1 var(--fh);color:var(--blue);letter-spacing:-1.5px}
.num i{font-style:normal;color:var(--cyan);font-size:26px;vertical-align:super}
.tag{display:inline-block;padding:3px 10px;border-radius:5px;font:600 11.5px var(--fh);background:var(--blue-l);color:var(--blue)}
.tag.c{background:var(--cyan-l);color:var(--cyan-d)}
.meta{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--ink3)}
.meta .tag{margin-right:2px}
.card .ic-b .ic,.cic .ic,.dic .ic,.sol-ic .ic,.step .ic{transition:transform .3s}
.card:hover .ic-b .ic{transform:scale(1.14) rotate(-3deg)}

/* image card */
.icard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s,border-color .32s;display:flex;flex-direction:column;position:relative}
.icard:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(200,0,0,.55)}
.icard .im{height:240px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--blue-l),#DCE9F7)}
.icard .im img{width:100%;height:100%;object-fit:cover;display:block;transition:.7s var(--ease)}
.icard:hover .im img{transform:scale(1.07)}
.icard .im .tag{position:absolute;top:14px;left:14px;background:rgba(3,82,162,.88);color:#fff;font:600 12px var(--fh);padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px)}
.icard-b{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.icard-b h3{font-size:19px}
.icard-b p{color:var(--ink2);font-size:14.5px;margin:0;flex:1}
.icard .btn-link{align-self:flex-start;margin-top:4px}

/* product cards (homepage) */
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative}
.pcard:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#C80000;opacity:0;transition:.3s;z-index:3}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(200,0,0,.55)}
.pcard:hover:before{opacity:1}
.pcard .pim{position:relative;height:224px;overflow:hidden;background:linear-gradient(140deg,#06294F,var(--navy-d))}
.pcard .pim img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.pcard:hover .pim img{transform:scale(1.06)}
.pim .ptag{position:absolute;top:14px;left:14px;background:rgba(3,52,110,.78);border:1px solid rgba(255,255,255,.24);color:#fff;font:600 12px var(--fh);padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px)}
.pbody{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.pbody h3{font-size:18px}
.pbody p{color:var(--ink2);font-size:14px;margin:0;flex:1}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.plink{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 14px var(--fh);color:var(--cyan-d);transition:.25s}
.pcard:hover .plink{gap:12px;color:var(--blue)}

/* ---------- 10. Glass + solution mini + stats ---------- */
.glass{background:linear-gradient(150deg,rgba(9,30,58,.62),rgba(4,16,34,.55));backdrop-filter:blur(14px) saturate(1.15);border:1px solid var(--glass-b);border-radius:14px;transition:transform .35s var(--ease),border-color .3s,background .3s,box-shadow .35s}
a.glass:hover{background:linear-gradient(150deg,rgba(11,40,76,.8),rgba(5,22,46,.68));border-color:rgba(200,0,0,.6);transform:translateY(-5px);box-shadow:0 26px 62px rgba(0,10,26,.5);color:#fff}
.sol-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sol-mini a{display:flex;gap:16px;align-items:flex-start;padding:24px 22px;color:#fff}
.sol-mini b{display:block;font:700 16px var(--fh);color:#fff;margin-bottom:4px}
.sol-mini span span{font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.55;display:block}
.sol-mini .sol-ic{flex:0 0 46px;width:46px;height:46px;border-radius:11px;background:rgba(200,0,0,.16);border:1px solid rgba(200,0,0,.4);display:flex;align-items:center;justify-content:center;color:#F0A0A0}
.sol-card:hover .sol-ic .ic,.sol-mini a:hover .sol-ic .ic{transform:scale(1.12)}
.why-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.why-mini .wm{padding:28px 24px;color:#fff}
.why-mini .wm b{display:block;font:800 clamp(30px,2.5vw,40px)/1.05 var(--fh);color:#fff;letter-spacing:-1.5px}
.why-mini .wm b i{font-style:normal;color:#F0A0A0;font-size:.5em;font-weight:700;margin-left:4px}
.why-mini .wm h3{color:#fff;font-size:15.5px;margin:10px 0 8px}
.why-mini .wm p{color:rgba(255,255,255,.68);font-size:12.8px;margin:0;line-height:1.6}
.why-mini .wm{transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.why-mini .wm:hover{transform:translateY(-5px);box-shadow:0 24px 58px rgba(1,42,86,.46);border-color:rgba(200,0,0,.55)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stat{position:relative;padding:10px 0 10px 26px;transition:transform .3s}
.stat:hover{transform:translateY(-3px)}
.stat:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:#C80000}
.stat b{display:block;font:800 52px/1.05 var(--fh);color:#fff;letter-spacing:-2px}
.stat b i{font-style:normal;color:#F0A0A0;font-size:30px}
.stat span{color:rgba(255,255,255,.7);font-size:14.5px}
.stat.dark b{color:var(--blue)}
.stat.dark b i{color:var(--cyan-d)}
.stat.dark span{color:var(--ink2)}
.stat.sm b{font-size:34px;letter-spacing:-1px}
.stat.sm b i{font-size:18px}
.stat.sm span{font-size:13.5px}
.stat b span,.stat.sm b span,.stat.dark b span{font:inherit;color:inherit;letter-spacing:inherit}

/* ---------- 11. News / mini lists / sidebars ---------- */
.ncard{display:flex;flex-direction:column;overflow:hidden;padding:0}
.ncard .im{height:210px;overflow:hidden;background:linear-gradient(135deg,var(--blue-l),#DCE9F7)}
.ncard .im img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.ncard:hover .im img{transform:scale(1.06)}
.ncard-b{padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.ncard h3{font-size:18.5px;line-height:1.45}
.ncard p{color:var(--ink2);font-size:14px;flex:1;margin:0}
.ncard.feat{grid-column:span 2;flex-direction:row}
.ncard.feat .im{flex:1.05;height:auto;min-height:100%;border-radius:0}
.ncard.feat .ncard-b{flex:1;padding:36px 38px;justify-content:center}
.ncard.feat h3{font-size:22px}
.news-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-mini a{overflow:hidden;display:flex;flex-direction:column;color:#fff}
.news-mini .im{height:170px;overflow:hidden}
.news-mini .im img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.news-mini a:hover .im img{transform:scale(1.06)}
.news-mini .nb{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-mini h3{color:#fff;font-size:16px;line-height:1.5}
.news-mini .meta{color:rgba(255,255,255,.55);font-size:12px;display:flex;gap:12px}
.news-mini p{color:rgba(255,255,255,.68);font-size:13.5px;margin:0;flex:1}
.news-mini .btn-link{color:#F0A0A0;align-self:flex-start}
.news-mini .btn-link:hover{color:#fff}
.with-side{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start}
.split-a{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.split-b{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.side .card{padding:26px 26px}
.side-search{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.side-search input{flex:1;border:0;padding:13px 16px;font:400 14.5px var(--fb);outline:none;min-width:0}
.side-search button{border:0;background:var(--blue);color:#fff;padding:0 18px;cursor:pointer;transition:.25s}
.side-search button:hover{background:var(--blue-d)}
.cat-l{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--ink2);transition:.22s}
.cat-l:hover{color:var(--blue);padding-left:9px}
.cat-l em{font-style:normal;color:var(--ink3);font-size:12.5px}
.mini-n{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.mini-n:last-child{border-bottom:0}
.mini-n .im{width:86px;height:64px;flex:0 0 86px;border-radius:8px;overflow:hidden;background:var(--blue-l)}
.mini-n .im img{width:100%;height:100%;object-fit:cover}
.mini-n b{font:600 13.5px/1.45 var(--fh);color:var(--ink);display:block}
.mini-n span{font-size:12px;color:var(--ink3)}
.prevnext{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:60px;padding-top:26px;font-size:15px}
.prevnext a{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.prevnext a:hover{color:var(--blue)}

/* ---------- 12. Timeline / steps / table / page head ---------- */
.tl{position:relative;padding-left:40px}
.tl:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:#C80000}
.tl-i{position:relative;padding:0 0 38px}
.tl-i:before{content:"";position:absolute;left:-40px;top:6px;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 0 0 6px rgba(200,0,0,.15)}
.tl-y{font:800 14px var(--fh);letter-spacing:.08em;color:var(--cyan-d);text-transform:uppercase}
.tl-i h4, .tl-i h3{margin:6px 0 8px;font-size:19px}
.tl-i p{color:var(--ink2);font-size:15px;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 24px 26px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.step:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(200,0,0,.55)}
.step:before{counter-increment:st;content:"0" counter(st);position:absolute;top:-18px;left:24px;background:#C80000;color:#fff;font:800 14px var(--fh);padding:7px 13px;border-radius:8px;box-shadow:0 10px 22px rgba(3,82,162,.3)}
.step h4, .step h3{margin:10px 0 8px;font-size:17px}
.step p{color:var(--ink2);font-size:13.8px;margin:0}
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;min-width:820px}
.tbl th{background:linear-gradient(120deg,var(--blue-dd),var(--blue));color:#fff;font:600 13px var(--fh);letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:15px 18px;white-space:nowrap}
.tbl td{padding:14px 18px;border-top:1px solid var(--line2);font-size:14.5px;color:var(--ink2);white-space:nowrap}
.tbl tbody tr:nth-child(even){background:#FAFCFE}
.tbl tbody tr:hover{background:var(--cyan-l)}
.tbl td b{color:var(--ink);font-family:var(--fh)}
.tbl .m{color:var(--blue);font-weight:700}
.phead{position:relative;padding:158px 0 104px;background:var(--blue-dd);overflow:hidden}
.phead .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34;transform:scale(1.04);animation:pz 26s ease-in-out infinite alternate}
.phead:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(1,26,54,.94) 10%,rgba(2,53,106,.74) 55%,rgba(3,82,162,.35))}
.phead-in{position:relative;z-index:2;max-width:1460px;margin:0 auto;padding:0 30px}
.crumb{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.6);font-size:13.5px;margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:rgba(255,255,255,.78)}
.crumb a:hover{color:#fff}
.crumb b{color:#F0A0A0;font-weight:600}
.phead h1{color:#fff;margin-bottom:16px}
.phead-sub{color:rgba(255,255,255,.82);font-size:17.5px;max-width:860px}
.phead .kv .chip{margin-top:8px}
.phead-sm{padding:142px 0 40px}

/* ---------- 13. FAQ / downloads / certs ---------- */
.faq{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq details{border-top:1px solid var(--line2)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font:700 17px var(--fh);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;transition:.2s}
.faq summary:hover{color:var(--blue);background:var(--blue-ll)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--blue-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230352A2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/13px no-repeat;transition:.28s}
.faq details[open] summary:after{transform:rotate(180deg);background-color:var(--cyan-l)}
.faq details>div{padding:0 26px 24px;color:var(--ink2);font-size:15.5px}
.faq details>div p{margin:0 0 10px}
.faq details>div p:last-child{margin:0}
.drow{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.drow:hover{border-color:rgba(200,0,0,.55);box-shadow:var(--sh-h);transform:translateY(-4px)}
.drow .dic{width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:#C80000;color:#fff;display:flex;align-items:center;justify-content:center}
.drow:hover .dic .ic{transform:rotate(-6deg) scale(1.1)}
.drow h4, .drow h3{margin-bottom:4px}
.drow p{margin:0;color:var(--ink3);font-size:13px}
.drow .dact{margin-left:auto;display:flex;gap:10px;align-items:center}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 20px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.cert:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(200,0,0,.55)}
.cert .cic{width:48px;height:48px;margin:0 auto 14px;border-radius:12px;background:linear-gradient(135deg,var(--blue-l),#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.cert:hover .cic{background:#C80000;color:#fff;border-color:transparent}
.cert:hover .cic .ic{transform:scale(1.14)}
.cert b{display:block;font:700 14.5px var(--fh);color:var(--ink)}
.cert span{display:block;font-size:12px;color:var(--ink3);margin-top:5px}

/* ---------- 14. Marquee / CTA band ---------- */
.mq{overflow:hidden;position:relative;padding:8px 0}
.mq:before,.mq:after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2}
.mq:before{left:0;background:linear-gradient(90deg,var(--soft),transparent)}
.mq:after{right:0;background:linear-gradient(-90deg,var(--soft),transparent)}
.mq-in{display:flex;gap:16px;width:max-content;animation:mq 36s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
.mq-i{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 24px;font:700 14px var(--fh);color:var(--ink2);white-space:nowrap}
.mq-i .ic{color:var(--cyan-d)}
.ctaband{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(120deg,var(--navy) 0%,var(--blue-d) 55%,#0A6FC8);padding:60px 68px;display:flex;align-items:center;justify-content:space-between;gap:36px;box-shadow:0 40px 90px rgba(1,32,66,.30)}
.ctaband:before{content:"";position:absolute;inset:0;background:url("../img/v5/screen-cta.svg") center/cover;opacity:.5}
.ctaband:after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;border:1.5px dashed rgba(240,160,160,.35);animation:spin 26s linear infinite}
.ctaband>*{position:relative;z-index:2}
.ctaband h3{color:#fff;font-size:27px;margin-bottom:10px}
.ctaband p{color:rgba(255,255,255,.78);margin:0;max-width:720px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 15. Dock / modal / mobar / forms ---------- */
.dock{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:10px}
/* 右侧悬浮咨询联系导航：默认品牌红，悬停/点选切换主题蓝 */
.dk{width:50px;height:50px;border-radius:50px;background:rgba(200,0,0,.92);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 26px rgba(140,0,0,.3);transition:.25s}
.dk:hover,.dk:focus-visible,.dk:active{background:rgba(3,82,162,.96);color:#fff;transform:translateX(-4px)}
.dk span{position:absolute;right:62px;top:50%;transform:translateY(-50%) translateX(8px);background:var(--blue-dd);color:#fff;font-size:13px;padding:8px 14px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transition:.22s;box-shadow:0 10px 24px rgba(1,42,86,.3)}
.dk span:after{content:"";position:absolute;right:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--blue-dd)}
.dk:hover span{opacity:1;visibility:visible;transform:translateY(-50%)}
.dk#toTop{opacity:0;visibility:hidden;transform:translateY(10px)}
.dk#toTop.show{opacity:1;visibility:visible;transform:none}
.dk#toTop.show:hover{transform:translateX(-4px)}
.modal{position:fixed;inset:0;z-index:400;display:none}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(1,22,44,.6);backdrop-filter:blur(4px)}
.modal-c{position:relative;max-width:660px;margin:7vh auto 0;background:#fff;border-radius:18px;padding:38px 40px;box-shadow:0 50px 110px rgba(0,0,0,.45);max-height:86vh;overflow:auto;animation:hRise .5s var(--ease) both}
.modal-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.modal-x:hover{background:var(--blue-l);color:var(--blue)}
.modal-h{margin-bottom:24px}
.modal-h p{color:var(--ink2);font-size:14.5px;margin:8px 0 0}
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:180;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px;gap:10px;box-shadow:0 -10px 30px rgba(1,42,86,.12)}
.mobar .btn{flex:1;height:48px}
.form label{display:block;font:600 13.5px var(--fh);color:var(--ink);margin-bottom:16px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:8px;padding:13px 16px;border:1.5px solid var(--line);border-radius:8px;font:400 15px var(--fb);color:var(--ink);background:#fff;transition:.2s;outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(200,0,0,.14)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.f-note{font-size:12.5px;color:var(--ink3);margin:12px 0 0}

/* ---------- 16. Article / misc ---------- */
.art{max-width:860px;margin:0 auto}
.art-body h2{margin:40px 0 16px}
.art-body h3{font-size:21px;margin:30px 0 12px}
.art-body p{color:#3B4755;font-size:17px;line-height:1.9;margin:0 0 18px}
.art-body .lead{background:var(--blue-ll);border-left:4px solid var(--cyan);border-radius:0 12px 12px 0;padding:22px 26px;font-size:17px;color:var(--blue-dd);font-weight:600;line-height:1.8}
.art-meta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:var(--ink3);font-size:14px;margin:20px 0 8px}
.art-meta .who{display:flex;align-items:center;gap:12px;color:var(--ink2)}
.avatar{width:40px;height:40px;border-radius:50%;background:#C80000;color:#fff;display:flex;align-items:center;justify-content:center;font:700 14px var(--fh)}
.note{background:var(--cyan-l);border:1px solid #BFE7F8;border-radius:10px;padding:16px 20px;font-size:14px;color:#0A5E86;display:flex;gap:12px;align-items:flex-start}
.note .ic{flex:0 0 20px;margin-top:3px;color:var(--cyan-d)}
.quote-c{border-left:4px solid var(--cyan);background:var(--blue-ll);border-radius:0 12px 12px 0;padding:26px 30px}
.quote-c p{font-size:16.5px;color:#3B4755;font-style:italic;margin:0 0 14px}
.quote-c .who{display:flex;gap:12px;align-items:center;color:var(--ink2);font-size:14px}
.ticks li{position:relative;padding-left:32px;margin-bottom:13px;color:var(--ink2);font-size:15.5px}
.ticks li:before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
background:var(--cyan-l);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A30000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
background-position:center;background-repeat:no-repeat}
.ticks li b{color:var(--ink)}
.map-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.map-wrap img{display:block;width:100%}
.gimg{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.gimg img{display:block;width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.gimg:hover img{transform:scale(1.05)}

/* ---------- 17. Footer ---------- */
/* 页脚背景：主题蓝（原深海军蓝渐变） */
.ft{background:var(--blue);color:rgba(255,255,255,.78)}
.ft-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.25fr;gap:44px;padding-top:84px;padding-bottom:56px}
.ft-about p{font-size:14px;line-height:1.8;margin:22px 0 24px;max-width:340px}
.ft-logo{height:48px}
.ft h4, .ft h3{color:#fff;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;position:relative;padding-bottom:12px}
.ft h4:after, .ft h3:after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:#C80000}
.ft a{display:block;color:rgba(255,255,255,.82);font-size:14px;padding:6px 0;transition:.22s}
.ft a:hover{color:#F0A0A0;transform:translateX(3px)}
.ft-soc{display:flex;gap:12px}
.ft-soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;padding:0}
.ft-soc a:hover{background:#C80000;transform:translateY(-3px)}
.ft-p{display:flex;gap:10px;font-size:13.8px;line-height:1.6;margin:0 0 14px;align-items:flex-start}
.ft-p .ic{flex:0 0 16px;margin-top:4px;color:#F0A0A0}
.ft-p a{display:inline;padding:0}
.ft-news{display:flex;gap:0;margin-top:20px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.ft-news input{flex:1;background:rgba(255,255,255,.07);border:0;padding:12px 15px;color:#fff;font:400 13.5px var(--fb);outline:none;min-width:0}
.ft-news input::placeholder{color:rgba(255,255,255,.45)}
.ft-news .btn{border-radius:0;height:auto;padding:0 16px}
.ft-bot{border-top:1px solid rgba(255,255,255,.12)}
.ft-bot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px;font-size:13.5px;flex-wrap:wrap}
.ft-legal{display:flex;gap:22px}
.ft-legal a{display:inline;padding:0}


/* ---------- 17b. Tabs / filters (V7 fix) ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:36px}
.tab{padding:13px 22px;font:600 15px var(--fh);color:var(--ink2);background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;position:relative;transition:color .22s,background .22s,border-color .22s;white-space:nowrap}
.tab:hover{color:var(--blue);background:var(--blue-ll)}
.tab.on{color:var(--blue);border-bottom-color:var(--cyan)}
.tab.on:hover{background:none}
/* 视觉隐藏（仍保留在无障碍树与 DOM 标题大纲中）：详情页 tab 面板标题用 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 17c. V7 · container gradient frames ---------- */
.card:not(.ncard):not(.icard),.step,.cert,.drow,.glass,.ctaband,.modal-c,.srch-panel{border-width:1px;border-style:solid;border-image:url("../img/v7/frame-border.svg") 17/18px/0 stretch}
.ctaband,.modal-c,.srch-panel{border-color:transparent}
.icard:after,.pcard:after,.ncard:after,.faq:after{content:"";position:absolute;inset:0;border:18px solid transparent;border-image:url("../img/v7/frame-border.svg") 17 stretch;pointer-events:none;z-index:4;border-radius:inherit}

/* ---------- 17d. V7 · search overlay ---------- */
.srch{position:fixed;inset:0;z-index:520;display:none}
.srch.open{display:block}
.srch-bg{position:absolute;inset:0;background:rgba(2,12,28,.74);backdrop-filter:blur(6px)}
.srch-panel{position:relative;max-width:760px;margin:11vh auto 0;background:#fff;border-radius:20px;padding:36px 38px 30px;box-shadow:0 60px 130px rgba(0,10,26,.5);animation:hRise .5s var(--ease) both;max-height:80vh;overflow:auto}
.srch-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.srch-x:hover{background:var(--blue-l);color:var(--blue)}
.srch-label{font:700 13px var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-d);margin-bottom:16px}
.srch-form{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:100px;padding:6px 6px 6px 20px;transition:.25s;background:#fff}
.srch-form:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(200,0,0,.14)}
.srch-form>svg{flex:none;color:var(--ink3)}
.srch-form input{flex:1;border:0;outline:none;font:400 17px var(--fb);color:var(--ink);background:none;min-width:0;padding:10px 0}
.srch-hot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.srch-hot-t{font:600 13px var(--fh);color:var(--ink3)}
.srch-note{font-size:12.5px;color:var(--ink3);margin:20px 0 0}
.nav-srch{display:none}
@media (max-width:1280px){
.nav-srch{display:block;padding:4px 6px 14px;border-bottom:1px solid var(--line2)}
.nav-srch button{width:100%;display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:500 14.5px var(--fb);color:var(--ink3);cursor:pointer;text-align:left;transition:.2s}
.nav-srch button:hover{border-color:var(--cyan);color:var(--ink2)}
.nav-srch .ic{color:var(--cyan-d)}
}
@media (max-width:880px){
.srch-panel{margin:7vh 14px 0;padding:28px 22px 24px}
}

/* ---------- 17e. V7 · CTA band with photo ---------- */
.ctaband.photo{background:url("../img/v7/bg-support.jpg") center 42%/cover no-repeat,linear-gradient(120deg,var(--navy) 0%,var(--blue-d) 55%,#0A6FC8)}
.ctaband.photo:before{background:linear-gradient(100deg,rgba(2,10,24,.92) 0%,rgba(2,16,34,.72) 40%,rgba(2,20,42,.38) 74%,rgba(2,20,42,.26) 100%);opacity:1}
.ctaband.photo .btn-ol{background:rgba(4,20,42,.55);border-color:rgba(255,255,255,.72);backdrop-filter:blur(8px)}


/* ---------- 17f. V8 · product detail overview ---------- */
.pd-overview{padding-top:clamp(64px,6vw,92px)}
.pd-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:start}
.pd-media{position:sticky;top:106px}
.pd-media:hover{transform:none}
.pd-media .im{height:440px}
.pd-side .overline{margin-bottom:12px}
.pd-side h2{margin-bottom:14px}
.pd-lead{color:var(--ink2);font-size:16.5px;margin:0 0 20px}
.pd-points{margin:0 0 20px}
.pd-points li{font-size:15px;margin-bottom:11px}
/* V19：标签行与上方 .pd-adv 最后一条的分隔线拉开距离（原来 0，贴着线） */
.pd-tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.pd-kv-h{margin:0 0 8px;font-size:16px}
.pd-kv{margin:0 0 26px}
.pd-kv li{display:flex;justify-content:space-between;gap:18px;padding:10px 2px;border-bottom:1px dashed var(--line);font-size:14.5px}
.pd-kv li:last-child{border-bottom:0}
.pd-kv span{color:var(--ink3)}
.pd-kv b{color:var(--ink);font-family:var(--fh);font-weight:600;text-align:right}
.pd-foot{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:1180px){
.pd-grid{grid-template-columns:1fr;gap:32px}
.pd-media{position:relative;top:auto}
.pd-media .im{height:360px}
}
@media (max-width:640px){
.pd-media .im{height:260px}
}

/* ---------- 18. Responsive ---------- */
@media (max-width:1550px){
.hphone{display:none}
.nav-a{padding:0 12px;font-size:14px}
.nav-a:after{left:12px;right:12px}
.hd-logo{margin-right:14px}
.logo{height:44px}
}
@media (max-width:1360px){
.nav-a{padding:0 10px}
.nav-a:after{left:10px;right:10px}
.hd-r{gap:12px}
}
@media (max-width:1280px){
.wrap-nav{padding:0 20px}
.burger{display:block}
.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:14px 20px 24px;box-shadow:0 30px 60px rgba(1,42,86,.25);max-height:80vh;overflow:auto;height:auto;border-radius:0 0 16px 16px}
.nav.open{display:flex}
.nav-a{color:var(--ink);height:auto;padding:14px 6px;font-size:16px;border-bottom:1px solid var(--line2)}
/* 移动端下拉菜单：选中项字体为红色（也修掉 .nav-a.on 先前被判成白色、在白色面板上看不见的问题） */
.nav-a.on,.dd-l.on,.dd-l[aria-current],.nav-a:active,.nav-a:focus-visible,.dd-l:active,.dd-l:focus-visible{color:#C80000}
.dd-w:has(.dd-l[aria-current]) > .nav-a,.dd-w:has(.dd-l[aria-current]) > .nav-a .nav-cv{color:#C80000}
.nav-a:after{display:none}
.nav-cv{color:rgba(255,255,255,.72)}
.dd-w{height:auto}
.dd,.dd-w .dd.dd-l0{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;left:auto}
.nav>.dd-w:last-child .dd{left:auto;right:auto}
.dd-in{box-shadow:none;border-radius:0;padding:8px 0 12px 14px;flex-direction:column;gap:16px}
.dd-in:before{display:none}
.dd-feat{width:100%}
.hd-in{height:76px}
.logo{height:42px}
}
@media (max-width:1180px){
.vhero-in{padding-top:140px;padding-bottom:110px}
.g4,.g5,.stats,.steps,.certs{grid-template-columns:repeat(2,1fr)}
.ncard.feat{grid-column:span 1;flex-direction:column}
.ncard.feat .im{min-height:220px}
.with-side{grid-template-columns:1fr}
.ft-top{grid-template-columns:1fr 1fr}
.split-a,.split-b{grid-template-columns:1fr;gap:26px}
.sol-mini{grid-template-columns:repeat(2,1fr)}
.why-mini{grid-template-columns:repeat(2,1fr)}
.news-mini{grid-template-columns:1fr}
.ctaband{flex-direction:column;align-items:flex-start;text-align:left;padding:48px 40px}
.dock{display:none}
.band.tall{min-height:auto}
}
@media (max-width:880px){
.wrap{padding:0 20px}
.wrap-nav{padding:0 16px}
.g2,.g3,.g4,.g5,.stats,.steps,.certs,.sol-grid,.sol-mini,.why-mini,.split-a,.split-b{grid-template-columns:1fr}
.sec{padding:64px 0}
.sec-head{margin-bottom:36px}
.sec-head.between{flex-direction:column;align-items:flex-start;gap:18px}
.phead{padding:118px 0 64px}
.phead-sm{padding:106px 0 30px}
.phead-sub{font-size:15.5px}
.vhero-in{padding-top:118px;padding-bottom:96px}
.hero-sub{font-size:16px}
.hero-cta{margin-bottom:34px}
.hero-badges{gap:8px}
.hbadge{font-size:12.5px;padding:8px 12px}
.hero-scroll{display:none}
.hero-chip{font-size:11.5px;padding:8px 14px;margin-bottom:18px}
.band{padding:72px 0}
.st-t2{font-size:22px}
.st-s{font-size:15.5px}
.stat b{font-size:38px}
.stat b i{font-size:22px}
.num{font-size:34px}
.icard .im{height:200px}
.ncard .im{height:180px}
.pcard .pim{height:200px}
.drow{flex-wrap:wrap}
.drow .dact{margin-left:0;width:100%;margin-top:14px}
.drow .dact .btn{width:100%}
.ctaband{padding:38px 26px}
.ctaband h3{font-size:21px}
.cta-actions{width:100%}
/* 小屏 CTA 按钮：不再被 flex:1 挤到贴边——放不下时自动换行成整行，并保留左右内边距 */
.cta-actions .btn{flex:1 1 auto;min-width:min(170px,100%);padding:0 24px}
.tabs{gap:2px}
.tab{padding:11px 14px;font-size:14px}
.faq summary{font-size:15.5px;padding:18px 18px}
.tbl th,.tbl td{padding:11px 13px;font-size:13.5px}
.f-row{grid-template-columns:1fr}
.mobar{display:flex}
/* 小尺寸隐藏页头 CTA（底部固定条已提供 Get a Quote） */
.hd-r .btn-cta{display:none}
.modal-c{margin:4vh 12px 0;padding:28px 24px}
.ft-top{grid-template-columns:1fr;gap:30px;padding-top:54px;padding-bottom:36px}
.ft-bot-in{flex-direction:column;align-items:flex-start}
.prevnext{flex-direction:column}
}
@media (max-width:640px){
.hic{display:none}
.vhero{min-height:92svh}
.vhero-in{padding-top:104px;padding-bottom:84px}
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn{width:100%}
.modal-c{padding:24px 20px}
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.band-bg{transform:none!important}
}

/* ---------- 20. V11 · company strength (photo slideshow + play icon) ---------- */
.s2{position:relative;overflow:hidden;background:var(--navy-d);min-height:clamp(620px,88vh,960px);display:flex;align-items:center;padding:clamp(96px,12vh,150px) 0}
.s2-bgs{position:absolute;inset:0}
.s2-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease}
.s2-bg.on{opacity:1;animation:s2zoom 14s ease-out both}
@keyframes s2zoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.s2-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(2,11,26,.94) 0%,rgba(2,16,34,.84) 36%,rgba(2,20,42,.6) 66%,rgba(2,20,42,.42) 100%)}
.s2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.s2-copy{position:relative;z-index:2}
.s2-t{font-size:clamp(26px,2.4vw,38px);line-height:1.35;margin-bottom:20px;letter-spacing:-.5px;color:#fff}
.s2-t em{font-style:normal;background:#C80000;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s2-p{color:rgba(255,255,255,.85);font-size:16px;margin:0 0 14px}
.s2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0 4px;border-top:1px solid rgba(255,255,255,.2);padding-top:24px}
.s2-stats b{display:block;font:800 clamp(28px,2.9vw,46px)/1.05 var(--fh);color:#F0A0A0;letter-spacing:-1.5px}
.s2-stats span{display:block;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.5;margin-top:6px}
.s2-stats b span{font:inherit;color:inherit;letter-spacing:inherit}
.s2-photo .overline{color:#F0A0A0}
.s2-side{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.s2-play2{position:relative;width:108px;height:108px;border-radius:50%;border:0;background:rgba(255,255,255,.96);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 26px 64px rgba(0,0,0,.5);transition:transform .3s var(--ease),color .25s}
.s2-play2:hover{transform:scale(1.08);color:var(--cyan-d)}
.s2-play2:before,.s2-play2:after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);inset:-10px;animation:pulseRing 2.6s ease-out infinite;pointer-events:none}
.s2-play2:after{inset:-22px;border-color:rgba(255,255,255,.3);animation-delay:1.1s}
@keyframes pulseRing{0%{transform:scale(.85);opacity:.95}70%{transform:scale(1.22);opacity:0}100%{transform:scale(1.22);opacity:0}}
@media (max-width:1180px){.s2-grid{grid-template-columns:1fr;gap:40px}.s2-side{flex-direction:row;justify-content:flex-start;gap:22px}}
@media (max-width:880px){.s2-stats{grid-template-columns:1fr 1fr}.s2-stats b{font-size:30px}.s2-play2{width:88px;height:88px}}

/* ---------- 20b. V11 · factory video modal ---------- */
.vmodal{position:fixed;inset:0;z-index:620;display:none}
.vmodal.open{display:block}
.vmodal-bg{position:absolute;inset:0;background:rgba(1,10,22,.9);backdrop-filter:blur(6px)}
.vmodal-c{position:relative;max-width:1060px;margin:9vh auto 0;padding:0 22px}
.vmodal video{display:block;width:100%;border-radius:14px;background:#000;box-shadow:0 60px 140px rgba(0,0,0,.65)}
.vmodal-x{position:absolute;right:26px;bottom:calc(100% + 14px);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.22s}
.vmodal-x:hover{background:rgba(255,255,255,.3)}

/* ---------- 21. V11 · inline consultation group ---------- */
.consult{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:0 0 auto;padding-bottom:4px}
.consult-t{font:600 14px var(--fh);color:var(--ink2)}
.consult-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:880px){.consult{align-items:flex-start}.consult-btns{justify-content:flex-start}}

/* ---------- 22. V11 · article detail (news-detail) ---------- */
.phead-art{padding:158px 0 86px}
.art-head{position:relative;z-index:3;margin-top:-66px;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -18px 44px rgba(2,20,42,.07);padding:62px 0 0}
.art-h1{max-width:none;margin:18px 0 14px}
.art-sub{font-size:15.5px;color:var(--ink2);max-width:960px;margin:0 0 6px;line-height:1.75}
.art-meta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:24px;margin-top:26px}
.art-meta-row .art-meta{margin:0}
.art-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.art-share-t{font:700 12px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-right:4px}
.art-share a{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink2);display:flex;align-items:center;justify-content:center;transition:.24s var(--ease)}
.art-share a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-3px);box-shadow:0 14px 28px rgba(3,82,162,.28)}
.art-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.art-tags .t{display:inline-flex;align-items:center;gap:7px;font:700 12px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-right:4px}
.art-tags a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;white-space:nowrap;border:1px solid rgba(3,82,162,.12);border-radius:999px;padding:8px 16px;font:600 13px/1.4 var(--fh);color:var(--blue);background:#FDECEC;transition:.26s var(--ease)}
.art-tags a:hover{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--blue-dd),var(--blue));transform:translateY(-2px);box-shadow:0 12px 24px rgba(3,82,162,.24)}
.prevnext{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:46px;padding-top:30px}
.prevnext .pn{flex:1 1 0;max-width:49%;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.3s var(--ease)}
.prevnext .pn.r{flex-direction:row-reverse;text-align:right;margin-left:auto}
.prevnext .pn-ic{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--blue-ll);color:var(--blue);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.prevnext .pn-b{display:flex;align-items:center;min-width:0}
.prevnext .pn b{font:600 13.5px/1.5 var(--fh);color:var(--ink)}
.prevnext .pn:hover{border-color:rgba(200,0,0,.6);box-shadow:var(--sh);transform:translateY(-3px)}
.prevnext .pn:hover .pn-ic{background:#C80000;color:#fff}
.prevnext .pn:hover b{color:var(--blue)}
.cat-l.on{color:var(--blue);font-weight:700}
.cat-l.on em{color:var(--cyan-d)}
.side-stick{position:sticky;top:104px;align-self:start}
@media (max-width:1180px){
.phead-art{padding:150px 0 74px}
.art-head{margin-top:-52px;padding-top:46px}
.side-stick{position:static}
}
@media (max-width:880px){
.phead-art{padding:118px 0 58px}
.art-head{margin-top:-38px;border-radius:18px 18px 0 0;padding-top:34px}
.art-h1{margin:12px 0 10px}
.art-meta-row{gap:16px;padding-bottom:20px}
.art-share{width:100%}
.art-share a{width:44px;height:44px}
.prevnext .pn{max-width:100%;padding:15px 16px}
.prevnext .pn-ic{width:38px;height:38px;flex:0 0 38px}
.prevnext .pn b{font-size:13px}
}

/* ---------- 23. V11 · article rich blocks (reference layout · site design tokens) ---------- */
.art-article{--gold:#C5962C;--gold-l:#E8C978}
.art-article>.lead{background:var(--soft);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:18px 22px;margin:0 0 26px;font-size:16.5px;line-height:1.85;color:var(--ink)}
.art-article .art-body>h2{color:var(--blue-dd);margin:38px 0 16px;padding-left:14px;border-left:4px solid var(--gold)}
.art-article .art-body>h3{font-size:17px;font-weight:700;color:var(--blue-d);margin:26px 0 10px}
.art-article .art-body>p{font-size:16px;line-height:1.85;color:var(--ink);margin:0 0 18px}
.hl-box{background:linear-gradient(135deg,var(--blue-dd) 0%,var(--blue-d) 100%);color:#fff;border-radius:8px;padding:36px 40px;margin:4px 0 28px}
.hl-kicker{font:600 12.5px var(--fh);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l);margin-bottom:12px}
.hl-name{font:700 22px var(--fh);color:#fff;line-height:1.4;margin-bottom:14px}
.hl-box p{color:rgba(255,255,255,.72);font-size:14px;line-height:1.7;margin:0}
.hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.hl-item{background:rgba(255,255,255,.1);border-radius:6px;padding:14px 10px;text-align:center}
.hl-ic{display:block;font-size:20px;line-height:1.2;margin-bottom:4px}
.hl-lb{display:block;font:600 13px/1.4 var(--fh);color:#fff}
.eco-card{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:22px 26px;margin:24px 0}
.eco-card .eco-name{font:700 18px var(--fh);color:var(--blue-dd);margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eco-card .eco-ticker{font:600 12px var(--fh);background:var(--gold);color:#fff;padding:2px 8px;border-radius:3px;letter-spacing:.04em}
.eco-card .eco-desc{font-size:14px;color:var(--ink2);line-height:1.75;margin:0}
.eco-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.eco-stat b{display:block;font:700 22px var(--fh);color:var(--blue);letter-spacing:-.4px}
.eco-stat span{display:block;font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.5}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin:20px 0}
.cap-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;text-align:center;transition:.3s var(--ease)}
.cap-card:hover{border-color:rgba(200,0,0,.5);box-shadow:var(--sh)}
.cap-ic{width:48px;height:48px;border-radius:50%;background:#C80000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 12px}
.cap-card .cap-t{font:700 15px var(--fh);color:var(--blue-dd);margin-bottom:6px}
.cap-card .cap-d{font-size:13px;color:var(--ink2);line-height:1.65;margin:0}
.quote-block{background:var(--soft);border-radius:8px;padding:22px 26px;margin:28px 0;font-size:16px;line-height:1.85;color:var(--ink2);font-style:italic}
.part-bar{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin:28px 0;padding:8px 0}
.part-s{text-align:center;padding:0 14px}
.part-s b{display:block;font:700 28px var(--fh);color:var(--blue);letter-spacing:-.6px}
.part-s.is-now b{color:var(--gold)}
.part-s span{display:block;font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.5}
.part-a{color:var(--ink3);opacity:.6;font-size:22px;line-height:1}
.art-article .art-body .art-motto{text-align:center;font:700 16px var(--fh);color:var(--blue-dd);margin:28px 0 0}
.art-article .art-body .art-src{font-size:12.5px;color:var(--ink3);line-height:1.75;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line2)}
.art-article .art-body .art-src a{color:var(--blue)}
@media (max-width:880px){
.hl-box{padding:24px 20px}
.hl-name{font-size:19px}
.hl-grid{grid-template-columns:1fr 1fr}
.eco-card{padding:20px 18px}
.eco-card .eco-name{font-size:16.5px}
.cap-grid{grid-template-columns:1fr 1fr}
.part-s{padding:0 8px}
.part-s b{font-size:22px}
}
@media (max-width:640px){
.hl-grid{grid-template-columns:1fr}
.cap-grid{grid-template-columns:1fr}
.part-a{display:none}
.part-s{padding:6px 8px;flex:1 1 40%}
}

/* ---------- 24. V11 · product page category column + pagination ---------- */
.with-cat{display:grid;grid-template-columns:284px 1fr;gap:38px;align-items:start}
.cat-panel{position:sticky;top:104px;align-self:start;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.cat-head{position:relative;display:flex;align-items:center;gap:11px;background:linear-gradient(120deg,var(--blue-dd),var(--blue));color:#fff;font:700 14px var(--fh);letter-spacing:.12em;text-transform:uppercase;padding:19px 22px}
.cat-head:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:#C80000}
.cat-head svg{opacity:.92}
.cat-list{display:flex;flex-direction:column}
.cat-t{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;font:700 14.5px/1.35 var(--fh);color:var(--blue-dd);background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:.24s var(--ease)}
.cat-t:first-child{border-top:0}
.cat-t:after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.8px solid var(--blue);border-bottom:1.8px solid var(--blue);transform:rotate(45deg);transition:.24s var(--ease)}
.cat-t:hover{color:var(--blue);background:var(--blue-ll)}
.cat-t:hover:after{border-color:var(--cyan-d)}
.cat-i{display:flex;align-items:center;gap:11px;padding:11px 20px 11px 34px;font:400 14px/1.4 var(--fb);color:var(--ink2);border-bottom:1px solid var(--line2);transition:.24s var(--ease)}
.cat-i:before{content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--line);transition:.24s var(--ease)}
.cat-i:hover{color:var(--blue);background:var(--blue-ll);padding-left:38px}
.cat-i:hover:before{background:var(--cyan)}
.cat-i.on{color:var(--blue);font-weight:600;background:var(--blue-ll)}
.cat-i.on:before{background:var(--cyan);box-shadow:0 0 0 3px rgba(200,0,0,.18)}
.cat-cta{margin:14px;padding:20px;border-radius:14px;background:linear-gradient(135deg,#0E1E33,#23405F)}
.cat-cta b{display:block;font:700 15px var(--fh);color:#fff;margin-bottom:6px}
.cat-cta p{font-size:12.5px;color:rgba(255,255,255,.7);margin:0 0 14px;line-height:1.6}
.cat-cta .btn{width:100%;justify-content:center}
.cat-cta .btn+.btn{margin-top:9px}
.cat-cta .btn-line{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.cat-cta .btn-line:hover{background:#fff;border-color:#fff;color:var(--blue-dd)}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:#fff;font:600 13.5px var(--fh);color:var(--ink2);transition:.24s var(--ease)}
.pager .pg:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 20px rgba(3,82,162,.12)}
.pager .pg.on{background:linear-gradient(135deg,var(--blue-dd),var(--blue));border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(3,82,162,.26)}
.pager .pg{cursor:pointer}
.pager .pg:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.pager .pg-total{margin-left:4px;font:600 13px var(--fh);color:var(--ink3)}
@media (max-width:1180px){
.with-cat{grid-template-columns:1fr;gap:28px}
.cat-panel{position:static}
.cat-list{max-width:560px}
.with-cat .grid.g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
.cat-head{padding:17px 18px;font-size:13px}
.cat-t{padding:13px 18px}
.cat-i{padding:10px 18px 10px 30px}
.with-cat .grid.g3{grid-template-columns:1fr}
.pager{margin-top:30px;gap:6px}
.pager .pg{min-width:36px;height:36px;padding:0 11px;font-size:13px}
}

/* ---------- 25. V11 · nav / tabs / gallery / global map / contact ---------- */
/* (1) dropdown: text only, no product images */
.dd-feat-im{display:none!important}
.dd-feat{padding-bottom:4px}
.dd-feat b{padding-top:16px}
/* (5) centred pill tabs + filter chips + download rows */
.tabs{justify-content:center;gap:10px;border-bottom:0;margin-bottom:24px}
.tab{padding:11px 24px;font:600 14.5px var(--fh);border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink2)}
.tab:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-ll)}
.tab.on,.tab.on:hover{background:linear-gradient(135deg,var(--blue-dd),var(--blue));border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(3,82,162,.22)}
.chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.chips button{padding:9px 18px;border-radius:999px;background:var(--soft);border:1px solid var(--line2);font:600 13px var(--fh);color:var(--ink2);cursor:pointer;transition:.24s var(--ease)}
.chips button:hover{background:var(--blue-ll);border-color:var(--blue);color:var(--blue)}
.chips button.on{background:var(--blue-ll);border-color:var(--blue);color:var(--blue)}
.drow{gap:18px;padding:18px 22px;border-radius:10px}
.drow .dic{width:44px;height:44px;flex:0 0 44px;border-radius:8px;background:none;border:1px solid var(--line);color:var(--blue)}
.drow .dic svg{width:22px;height:22px}
.drow h4, .drow h3{font-size:15.5px;margin-bottom:3px}
.drow p{font-size:12.5px}
.drow .dact{gap:0}
.drow .dact .btn{width:44px;height:44px;padding:0;font-size:0;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink2);justify-content:center}
.drow .dact .btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.drow .dact .btn svg{width:18px;height:18px}
/* (2) product gallery thumbnails + carousel */
.pd-thumbs{display:flex;align-items:center;gap:10px;margin-top:16px}
.pd-thumbs .tw{display:flex;gap:10px;flex:1;min-width:0;overflow:hidden;scroll-behavior:smooth}
.pd-thumbs .tn{flex:0 0 calc(20% - 8px);padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;transition:.24s var(--ease)}
.pd-thumbs .tn img{display:block;width:100%;height:76px;object-fit:cover;transition:.5s var(--ease)}
.pd-thumbs .tn:hover img{transform:scale(1.06)}
.pd-thumbs .tn.on{border-color:var(--blue);box-shadow:0 10px 20px rgba(3,82,162,.18)}
.pd-thumbs .tn.on img{transform:none}
.pd-nav{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.24s var(--ease)}
.pd-nav:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* (4) global distribution */
.gdist{position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#0A2C58 0%,#041A36 60%,#02122A 100%);padding:44px 30px 40px;box-shadow:var(--sh-h)}
.gdist-map{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.gdist-map>.globe{position:absolute;inset:0;background:url("../img/v5/globe-network.svg") center/contain no-repeat;opacity:.55}
.gdist-pin{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#C80000;color:#fff;font:700 14px var(--fh);letter-spacing:.06em;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.gdist-pin:before,.gdist-pin:after{content:"";position:absolute;left:-6px;top:50%;width:56px;height:56px;margin-top:-28px;border-radius:50%;border:1.5px solid rgba(240,160,160,.6);animation:gdRing 2.8s ease-out infinite}
.gdist-pin:after{animation-delay:1.4s}
@keyframes gdRing{0%{transform:scale(.5);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.gdist-flags{position:relative;z-index:2;display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.gdist-flags.top{margin-bottom:26px}
.gdist-flags.bot{margin-top:26px}
.gdist-flags a{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font:600 13.5px var(--fh);animation:gdFloat 4s ease-in-out infinite}
.gdist-flags a:nth-child(2n){animation-delay:.5s}
.gdist-flags a:nth-child(3n){animation-delay:1s}
.gdist-flags a:hover{color:var(--cyan-b)}
.gdist-flags img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.16),0 14px 26px rgba(0,0,0,.35);transition:.28s var(--ease)}
.gdist-flags a:hover img{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 3px rgba(200,0,0,.6),0 18px 32px rgba(0,0,0,.45)}
@keyframes gdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gdist-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.gdist-lines path{fill:none;stroke:rgba(240,160,160,.55);stroke-width:1.4;stroke-dasharray:6 8;animation:gdDash 3.4s linear infinite}
@keyframes gdDash{to{stroke-dashoffset:-56}}
.gdist-note{position:relative;z-index:2;text-align:center;color:rgba(255,255,255,.72);font-size:13.5px;margin-top:26px}
/* (6) contact page */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh);transition:.3s var(--ease)}
.ct-card:hover{transform:translateY(-4px);border-color:rgba(200,0,0,.5)}
.ct-ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--blue-l),#fff);border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ct-card h3{font-size:17px;margin-bottom:8px}
.ct-card p{font-size:14px;color:var(--ink2);margin:0 0 8px;line-height:1.7}
.ct-card a{font-weight:600}
.ct-hint{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--fh);color:var(--cyan-d);margin-top:4px}
.ct-map{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);background:#fff}
.ct-map iframe{display:block;width:100%;height:430px;border:0}
.ct-offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.ct-office{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff}
.ct-office b{display:block;font:700 15px var(--fh);color:var(--blue-dd);margin-bottom:6px}
.ct-office p{font-size:13px;color:var(--ink2);margin:0}
.ct-quick{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
@media (max-width:880px){
.tab{padding:10px 16px;font-size:13.5px}
.chips button{padding:8px 14px;font-size:12.5px}
.pd-thumbs .tn{flex:0 0 calc(33.333% - 7px)}
.pd-thumbs .tn img{height:64px}
.gdist{padding:30px 18px 28px}
.gdist-flags{gap:16px}
.gdist-flags img{width:38px;height:38px}
.gdist-map{min-height:300px}
.ct-map iframe{height:320px}
}

/* ---------- 26. V11 · news & video centre: pinned item + 3×3 grid ---------- */
.news-pin{display:grid;grid-template-columns:1.12fr .88fr;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh);margin-bottom:34px}
.news-pin .np-media{position:relative;min-height:380px;background:var(--blue-ll)}
.news-pin .np-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-pin .np-tag{position:absolute;left:20px;top:20px;background:linear-gradient(135deg,var(--blue-dd),var(--blue));color:#fff;font:700 11.5px var(--fh);letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:999px;box-shadow:0 10px 22px rgba(1,32,66,.3)}
.news-pin .np-strip{position:absolute;left:20px;right:20px;bottom:18px;display:flex;gap:10px}
.news-pin .np-strip img{width:84px;height:58px;border-radius:9px;object-fit:cover;cursor:pointer;border:2px solid rgba(255,255,255,.6);transition:.26s var(--ease)}
.news-pin .np-strip img.on,.news-pin .np-strip img:hover{border-color:var(--cyan);transform:translateY(-4px)}
.news-pin .np-body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.news-pin .np-date{font:600 13px var(--fh);color:var(--ink3)}
.news-pin h3{font-size:24px;line-height:1.4}
.news-pin p{font-size:14.5px;color:var(--ink2);margin:0}
.news-pin .btn-link{align-self:flex-start}
.news-more{display:flex;justify-content:center;margin-top:34px}
@media (max-width:1180px){
.news-pin{grid-template-columns:1fr}
.news-pin .np-media{min-height:0;height:300px}
.news-pin .np-body{padding:28px 24px}
.news-pin h3{font-size:20px}
}

/* ---------- 27. V11 · contact page: 4-card row + 3×2 support grid ---------- */
.ct-grid.ct4{grid-template-columns:repeat(4,1fr);gap:18px}
.ct4 .ct-card{padding:22px 20px}
.ct4 .ct-card h3{font-size:16px}
.ct4 .ct-card p{font-size:13.5px}
.ct4 .ct-ic{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
.ct-offices.ct3{grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1180px){
.ct-grid.ct4{grid-template-columns:1fr 1fr}
.ct-offices.ct3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.ct-grid.ct4{grid-template-columns:1fr}
.ct-offices.ct3{grid-template-columns:1fr}
}

/* ---------- 28. V11 · product detail: square gallery + balanced columns ---------- */
.pd-grid{align-items:stretch}
.pd-media{display:flex;flex-direction:column;padding-bottom:56px}
.pd-media .im{height:auto;aspect-ratio:1/1}
.pd-thumbs{margin-top:auto;padding-top:16px}
.pd-thumbs .tn{flex:0 0 calc(25% - 8px);aspect-ratio:1/1}
.pd-thumbs .tn img{height:100%}
@media (max-width:1180px){
.pd-media{position:static;padding-bottom:20px}
.pd-thumbs .tn{flex:0 0 calc(50% - 5px)}
}

/* ---------- 29. V11 · home product recommendations slider ---------- */
.rec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.rec-t{position:relative;padding-bottom:16px}
.rec-t:after{content:"";position:absolute;left:0;bottom:0;width:96px;height:3px;border-radius:2px;background:#C80000}
.rec-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rec-pill{border:1px solid var(--line);border-radius:999px;padding:11px 22px;font:600 13.5px var(--fh);color:var(--ink2);background:#fff}
.rec-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--blue-ll);border-radius:999px;padding:8px;margin-bottom:30px}
.rec-tab{border:0;background:none;border-radius:999px;padding:11px 22px;font:600 14.5px var(--fh);color:var(--ink2);cursor:pointer;transition:.24s var(--ease);white-space:nowrap}
.rec-tab:hover{color:var(--blue)}
.rec-tab.on{background:linear-gradient(135deg,var(--blue-dd),var(--blue));color:#fff;box-shadow:0 10px 22px rgba(3,82,162,.22)}
.rec-wrap{position:relative}
.rec-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px;scrollbar-width:none;-ms-overflow-style:none}
.rec-track::-webkit-scrollbar{display:none}
.rcard{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:.3s var(--ease)}
.rcard:hover{border-color:rgba(200,0,0,.55);box-shadow:var(--sh-h);transform:translateY(-4px)}
.rcard .rim{height:250px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;background:linear-gradient(135deg,var(--blue-l),#DCE9F7);border-radius:12px;overflow:hidden}
.rec-track .rcard .rim{background:none}
.rcard .rim img{max-width:88%;max-height:88%;object-fit:contain;transition:.6s var(--ease)}
.rcard:hover .rim img{transform:scale(1.05)}
.rcard h3{font-size:17px;line-height:1.45;margin-bottom:14px;min-height:52px}
.rcard .rchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:auto}
.rcard .chip.o{background:#fff;border:1px solid var(--line);color:var(--ink2)}
.rcard .rfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.rcard .rplus{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue);font:700 20px/1 var(--fh)}
.rec-nav{position:absolute;top:44%;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.97);color:var(--blue-dd);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh);z-index:3;transition:.24s var(--ease);transform:translateY(-50%)}
.rec-nav.prev{left:-26px}
.rec-nav.next{right:-26px}
.rec-nav:hover{background:var(--blue);color:#fff;border-color:transparent}
.rec-nav[disabled]{opacity:.3;cursor:not-allowed;box-shadow:none}
@media (max-width:1180px){
.rcard{flex:0 0 calc((100% - 24px)/2)}
.rec-nav.prev{left:-8px}
.rec-nav.next{right:-8px}
}
@media (max-width:640px){
.rec-tab{padding:9px 16px;font-size:13.5px}
.rcard{flex:0 0 86%;padding:20px}
.rcard .rim{height:200px}
.rec-nav{width:42px;height:42px;top:40%}
}

/* ---------- 30. V11 · home recommendations: header buttons + square product image + parameter pills ---------- */
.rec-cta{align-items:center}
.rec-pill{height:52px;display:inline-flex;align-items:center;padding:0 26px;border-radius:999px;background:var(--blue-ll);border-color:var(--line)}
.rec-cta .btn{height:52px;padding:0 28px;display:inline-flex;align-items:center}
.rcard .rim{aspect-ratio:1/1;height:auto}
.rcard .rim img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.rcard .rchips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:auto}
.rcard .rchips .chip.o{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:12px 14px;border-radius:50px;font:600 12.5px/1.35 var(--fh);background:var(--blue-ll);border:1px solid var(--line);color:var(--ink2)}
.rcard:hover .rchips .chip.o{border-color:rgba(200,0,0,.45)}
.rec-nav{top:50%;background:#fff;color:var(--ink2);box-shadow:0 10px 26px rgba(1,32,66,.16);border-color:var(--line)}
.rec-nav:hover{background:var(--blue);color:#fff;border-color:transparent}
@media (max-width:640px){
.rec-pill{height:46px;padding:0 18px;font-size:12.5px}
.rec-cta .btn{height:46px;padding:0 20px}
.rcard .rim{height:auto}
.rcard .rchips .chip.o{padding:10px 12px;font-size:12px}
}

/* ---------- 32. V11 · R&D page: banner removed + centred page intro ---------- */
.rd-hero{padding-top:clamp(150px,13vw,184px);padding-bottom:clamp(20px,2.2vw,30px)}
.rd-next{padding-top:clamp(40px,4.2vw,60px)}
.rd-crumb{justify-content:center;color:var(--ink3);margin-bottom:30px}
.rd-crumb a{color:var(--ink2)}
.rd-crumb a:hover{color:var(--blue)}
.rd-crumb b{color:var(--blue)}
.rd-ihead{text-align:center}
.rd-brand{font:800 clamp(30px,2.9vw,46px)/1.14 var(--fh);color:var(--ink);letter-spacing:-.8px}
.rd-tick{display:block;width:58px;height:3px;border-radius:2px;margin:22px auto 0;background:#C80000}
.rd-sub{max-width:1180px;margin:56px auto 0;text-align:center}
.rd-itxt{margin:44px auto 0;color:var(--ink2)}
.rd-itxt p{margin:0 0 14px}
@media (max-width:880px){
.rd-hero{padding-top:132px}
.rd-sub{margin-top:38px}
.rd-itxt{margin-top:28px}
}
@media (max-width:640px){
.rd-hero{padding-top:118px}
}

/* ---------- 33. V11 · R&D page: result blocks · photo background + bottom-right stat bar ---------- */
.rdres-list{display:flex;flex-direction:column;gap:32px;margin-top:32px}
.rdres{position:relative;display:flex;align-items:center;aspect-ratio:2.6/1;min-height:300px;border-radius:18px;overflow:hidden;background:linear-gradient(140deg,#06294F,var(--navy-d));background-size:cover;background-position:center 32%;box-shadow:var(--sh);transition:box-shadow .35s var(--ease)}
.rdres:hover{box-shadow:var(--sh-h)}
.rdres:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,26,54,.94),rgba(1,26,54,.6) 42%,rgba(1,26,54,.16) 76%)}
.rdres:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,26,54,.52),transparent 48%)}
.rdres-bms{background-image:url("../img/v11/rd-lab-bms.jpg"),url("../img/v5/video-bms-balancing.svg")}
.rdres-pack{background-image:url("../img/v11/rd-lab-pack.jpg"),url("../img/v5/scene-pack-line.svg")}
.rdres-txt{position:relative;z-index:2;max-width:56%;padding:0 30px 0 52px}
.rdres-tick{display:block;width:46px;height:3px;border-radius:2px;margin-bottom:16px;background:#C80000}
.rdres-cap{margin:0;color:#fff;font:700 clamp(20px,1.8vw,30px)/1.35 var(--fh);letter-spacing:-.4px;text-shadow:0 3px 22px rgba(1,20,42,.55)}
.rdres-p{margin:10px 0 0;color:rgba(255,255,255,.86);font-size:14px;line-height:1.6;text-shadow:0 2px 14px rgba(1,20,42,.55)}
.rdres-bar{position:absolute;z-index:3;right:0;bottom:0;width:60%;display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;padding:24px 30px 20px;background:linear-gradient(135deg,rgba(1,42,86,.94),rgba(3,82,162,.92));border-radius:18px 0 0 0;box-shadow:0 -16px 44px rgba(1,18,40,.34);backdrop-filter:blur(5px)}
.rdres-st{padding-left:16px;border-left:1px solid rgba(255,255,255,.18)}
.rdres-st:first-child{padding-left:0;border-left:0}
.rdres-st b{display:block;font:800 clamp(30px,2.9vw,46px)/1.02 var(--fh);color:#fff;letter-spacing:-1.6px}
.rdres-st b i{font-style:normal;font-size:.56em;vertical-align:super;color:var(--cyan-b)}
.rdres-st span{display:block;margin-top:6px;color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.5}
.rdres-note{margin:24px 0 0;color:var(--ink3);font-size:13.5px;line-height:1.75}
.rdres-note b{color:var(--ink2)}
@media (max-width:1180px){
.rdres{aspect-ratio:2.2/1}
.rdres-txt{padding:0 22px 0 34px}
.rdres-bar{width:66%;padding:22px 24px 18px}
.rdres-st b{font-size:32px}
}
@media (max-width:880px){
.rdres{display:block;aspect-ratio:auto;padding:28px 22px 0;background-position:center}
.rdres:before{background:linear-gradient(180deg,rgba(1,26,54,.92),rgba(1,26,54,.58) 55%,rgba(1,26,54,.88))}
.rdres:after{display:none}
.rdres-txt{max-width:none;padding:0}
.rdres-tick{margin-bottom:14px}
.rdres-cap{font-size:19px}
.rdres-p{font-size:13.5px}
.rdres-bar{position:static;width:auto;margin:22px -22px 0;padding:20px 22px 22px;grid-template-columns:repeat(2,1fr);gap:16px 14px;border-radius:0;box-shadow:none}
.rdres-st{padding-left:0;border-left:0}

/* ==========================================================================
   31. 移动端横向溢出治理（≤880px）
   症状：手机上页面被横向裁切（内容偏向一侧、另一侧留白），可左右滑动。
   成因：宽表格被强制 820px、单元格 nowrap，以及个别容器缺少 min-width:0，
        在窄屏下按内容最小宽度撑开，超出视口。
   处理：① 去掉表格的强制最小宽度、允许单元格换行；
        ② 结构容器统一 min-width:0 / max-width:100%；
        ③ 长串可断行；媒体元素不超过屏宽；
        ④ html/body 关闭横向滚动作为最后一道兜底。
   ========================================================================== */
html,body{overflow-x:hidden;max-width:100%}
.wrap,.wrap-nav,.phead-in,.sec,.phead,.band,.ctaband,.tail-band,.ft,.ft-top,.ft-bot-in,
.with-cat,.with-side,.grid,.sec-head,.scr-hd,.cat-panel,.cat-list,.cat-head,.cat-t,.cat-i,.cat-cta,
.icard,.icard-b,.card,.kv,.chips,.pager,.cta-actions,.drow,.hl-box,.hl-grid,.art,.form,.f-row,
.nav,.nav .dd,.nav .dd-in,.nav .dd-col,.nav .dd-feat,.nav .dd-feat-im{min-width:0;max-width:100%}
img,svg,video,canvas{max-width:100%}
p,li,h1,h2,h3,h4,span,a,div{overflow-wrap:break-word}
table.tbl{min-width:0}
.tbl th,.tbl td{white-space:normal}
.rdres-st b{font-size:30px}
.rdres-list{gap:26px}
}

/* ==========================================================================
   32. V12 · 产品页 / 场景页右侧产品网格：改用首页第 4 屏「产品推荐」卡片样式
   做法：卡片直接用第 4 屏的 .rcard 结构与第 29/30 节样式 ——
     白底 16 圆角卡、内缩的方形产品图（浅蓝渐变底、悬停图放大）、标题、
     参数药丸、页脚「Get a Quote」白底蓝字按钮 + 圆形「+」、悬停红描边并上浮。
   只补「放进 .grid 网格」后仍需要的三处差异：
   ① .icard-b 是卡片的正文包裹层，清掉它自带的 24/26/28 内边距，避免与外层 26 叠加
   ② 卡片里保留了一段产品描述（.icard-b > p），第 4 屏卡片没有，单独给字号与间距
   ③ 场景页图片块上有个 .tag 角标，原规则挂在 .icard .im 上，这里按原样接回
   作用域 .with-cat 只出现在 products.html / scenarios.html，首页第 4 屏不受影响；
   .rcard 的 flex-basis / scroll-snap 在 CSS 网格里本来就不生效，无需额外处理。
   ========================================================================== */
.with-cat .rcard .icard-b{padding:0;gap:0}
.with-cat .rcard p{margin:0 0 16px;color:var(--ink2);font-size:14.5px;line-height:1.7}
.with-cat .rcard .rim{position:relative}
.with-cat .rcard .rim .tag{position:absolute;top:14px;left:14px;background:rgba(3,82,162,.88);color:#fff;font:600 12px var(--fh);padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px)}

/* ---------- 32b. 产品网格卡片：恢复站内渐变描边边框 + 页脚「+」改品牌红底 ---------- */
/* 渐变边框：沿用站内既有素材 assets/img/v7/frame-border.svg（蓝色渐变描边），
   与改版前 .icard:after 完全同一条规则；卡片因此要 position:relative + overflow:hidden，
   让描边贴住圆角内缘；pointer-events:none，不影响整卡链接与「Get a Quote」点击 */
.with-cat .rcard{position:relative;overflow:hidden}
.with-cat .rcard:after{content:"";position:absolute;inset:0;border:18px solid transparent;border-image:url("../img/v7/frame-border.svg") 17 stretch;pointer-events:none;z-index:4;border-radius:inherit}
/* 页脚圆形「+」：品牌红底白字（红同 .btn-cta2 / 标题下划线的 #C80000） */
.with-cat .rcard .rplus{background:#C80000;border-color:#C80000;color:#fff}
/* 悬停加深，与首页第 4 屏「+」（v12.css 第 9 节 #products .rcard:hover .rplus）同款 */
.with-cat .rcard:hover .rplus{background:#A30000;border-color:#A30000}

/* ==========================================================================
   33. V12 · 产品页「电芯一体化」板块：改深色点阵样式（对齐参考图中的板块观感）
   · 底色：近黑蓝 + 顶部蓝色辉光（radial-gradient）；再叠一层白色点阵，
     用 mask 让它从中间清晰、向四周淡出
   · 版式：标题区居中（复用站内 .sec-head.center，红色小横线会自动移到右边），
     下面 4 列「圆形渐变图标 + 居中标题 + 居中说明」，不再用卡片盒子/渐变描边
   · 图标圆牌：白 → 淡红 → 品牌红的径向渐变，图标取深红 #A30000
   · 间距：列与列之间 64px（原 32px），按钮与上方内容之间 56px（原 32px）
   ========================================================================== */
.sec.mesh{background:radial-gradient(120% 88% at 50% 2%,#0A2C58 0%,#062546 38%,#02101F 76%,#010A18 100%)}
.sec.mesh:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.18) 1.2px,transparent 1.25px);background-size:24px 24px;-webkit-mask-image:radial-gradient(115% 82% at 50% 44%,#000 0%,rgba(0,0,0,.4) 58%,transparent 84%);mask-image:radial-gradient(115% 82% at 50% 44%,#000 0%,rgba(0,0,0,.4) 58%,transparent 84%)}
.sec.mesh:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 62% at 50% 0%,rgba(3,82,162,.42),transparent 72%),radial-gradient(48% 44% at 8% 94%,rgba(3,82,162,.32),transparent 70%)}
.sec.mesh>.wrap{position:relative;z-index:2}
.mesh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 64px}
.mesh-cta{margin-top:56px}
.mesh-item{text-align:center}
.mesh-ic{width:70px;height:70px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#A30000;background:radial-gradient(circle at 32% 26%,#fff 0%,#fff 30%,#F7DDDD 60%,#C80000 100%);box-shadow:0 16px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.55)}
.mesh-ic .ic{width:30px;height:30px}
.mesh-item h3{font-size:17px;margin-bottom:10px}
.mesh-item p{color:rgba(255,255,255,.68);font-size:14px;line-height:1.78;margin:0}
@media (max-width:1180px){
.mesh-grid{grid-template-columns:repeat(2,1fr);gap:44px 40px}
}
@media (max-width:640px){
.mesh-grid{grid-template-columns:1fr;gap:34px}
.mesh-cta{margin-top:44px}
.mesh-ic{width:60px;height:60px;margin-bottom:16px}
.mesh-ic .ic{width:26px;height:26px}
}

/* ==========================================================================
   34. V12 · 产品页「Why Partner Directly with a Cell Manufacturer」板块改版
   · 参考图：2×2 网格，每格「圆角图片（16:10）+ 细分隔线 + 加粗标题 + 灰色说明」
   · 标题区居中（.sec-head.center，overline 的红色小横线自动移到文字右侧）；
     H2 下的 96×3 红横线同样居中
   · 每个卡片标题（We Make the Cells 等）下加一条 56×3 的红色短横杠
   · 图片用站内既有 v5 场景插图（目前没有实拍素材，与其它卡片同风格）
   · 作用域 .reasons 只挂在 products.html 这一节，其它页面不受影响
   ========================================================================== */
.reasons .sec-head h2{position:relative;padding-bottom:18px}
.reasons .sec-head h2:after{content:"";position:absolute;left:50%;bottom:0;width:96px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
.reasons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:54px 44px}
.reason-im{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--blue-l),#DCE9F7)}
.reason-im img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s var(--ease)}
.reason:hover .reason-im img{transform:scale(1.04)}
.reason h3{position:relative;margin-top:24px;padding-top:18px;padding-bottom:14px;border-top:1px solid var(--line);font-size:18px}
.reason h3:after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:2px;background:#C80000}
.reason p{color:var(--ink2);font-size:14.5px;line-height:1.8;margin:12px 0 0}
@media (max-width:880px){
.reasons-grid{grid-template-columns:1fr;gap:34px}
.reason h3{margin-top:18px;padding-top:14px;padding-bottom:12px}
}

/* ==========================================================================
   35. V12 · 产品详情页：新增「Product Description」选项卡（默认展开）的样式
   · 面板内容 = 竖向拼接的产品详情长图（示范图片取自力朗中文站同型号产品页）
   · 宽度铺满 .wrap，图与图之间不留缝（原图本身就是连续的版面设计），
     只在长图首尾给圆角，与站内圆角风格一致
   ========================================================================== */
.pd-desc img{display:block;width:100%;height:auto;background:#fff}
.pd-desc img:first-child{border-radius:14px 14px 0 0}
.pd-desc img:last-child{border-radius:0 0 14px 14px}

/* ==========================================================================
   36. V12 · 关于我们页改版（参考 dalybms 公司简介以下 + defond 的视频区做法）
   · .rd-hero 复用 rd.html 的「无 banner 居中导语」版式（见第 30 节），
     这里只补导语里的加粗重点句 .rd-lead
   · .prof-mission：使命小卡（浅蓝底 + 左侧红条），呼应参考站的 Mission 块
   · 里程碑「三个成长阶段」：原「横向三阶段 · 顶部细线 + 红点」的 .tlh 版式已废弃，
     现改为参考 dalybms「历史发展」的滑片式时间轴（大号渐变年份 + 要点列表 + 配图 +
     底部轴线圆点控制条），样式集中在第 44 节
   · .vfilm：单个视频块 = 16:9 视频 + 白色圆形播放键遮罩（点一下才播）
   · 全球分布搬到页面底部（荣誉之后），复用已有 .gdist 组件 + .ticks 地区列表
   ========================================================================== */
.rd-lead{margin-top:18px;font-size:17.5px}
.hero-bg{position:relative;background-image:url("../img/prof/companybg.jpg");background-size:cover;background-position:center top;background-repeat:no-repeat}
.hero-bg .rd-itxt{max-width:none;text-align:center}
/* V17：Company Profile / PLB at a Glance 已从 banner 的 .hero-bg 里抽出来独立成块；
   按参考图给这一块加照片底 + 加高（浅色遮罩保证深色文字可读） */
.prof-split{position:relative;background:url("../img/v6/bg-factory-solar.jpg") center/cover no-repeat;min-height:clamp(430px,36vw,640px);display:flex;align-items:center}
.prof-split:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 46%,rgba(255,255,255,.76) 100%)}
.prof-split>.wrap{position:relative;z-index:2;width:100%}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.prof-title{position:relative;font-size:clamp(24px,2.1vw,32px);font-weight:700;line-height:1.2;color:var(--ink)}
.prof-title:after{content:"";display:block;width:106px;height:3px;background:#C80000;margin-top:22px}
.prof-col p{color:rgba(0,0,0,.78);font-size:16.5px;line-height:1.75;margin:0 0 14px}
.prof-col .prof-lead{margin:26px 0 18px}
.vfilm{position:relative;border-radius:20px;overflow:hidden;background:#02101F;box-shadow:var(--sh-h)}
.vfilm-v{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#02101F}
.vfilm-play{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:linear-gradient(180deg,rgba(1,26,54,.3),rgba(1,26,54,.72));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:.3s var(--ease)}
.vfilm-play:hover{background:linear-gradient(180deg,rgba(1,26,54,.2),rgba(1,26,54,.62))}
.vfilm-play[hidden]{display:none}
.vfilm-btn{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(0,0,0,.4);transition:.3s var(--ease)}
.vfilm-play:hover .vfilm-btn{transform:scale(1.06)}
.vfilm-play b{font:700 20px var(--font-h);color:#fff}
.vfilm-meta{font-size:14px;color:rgba(255,255,255,.78)}
/* 视频区：深色带 + 右侧章节列表（照参考图：当前章节亮色标题+说明，其余只列标题，细分隔线）
   V17：底色由中性近黑 #141416 改为站点深蓝 --blue-dd（#012A56，与 .sec.dark 同一色），
   和站内其它深色板块、以及视频遮罩的 rgba(1,26,54,…) 归到同一色系 */
.film-band{background:var(--blue-dd);color:rgba(255,255,255,.72)}
.film-h{color:#fff;font-size:clamp(30px,3vw,44px);font-weight:800;line-height:1.12;text-align:center;margin-bottom:clamp(28px,4.4vh,46px)}
.film-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3.6vw,58px);align-items:start}
.film-media{position:relative;border-radius:18px;overflow:hidden;background:#0B0B0D}
.film-list{border-top:1px solid rgba(255,255,255,.16)}
.film-i{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.16);padding:20px 0;cursor:pointer;color:inherit;font:inherit;transition:.24s var(--ease)}
.film-i h3{color:#fff;font-size:clamp(17px,1.4vw,20px);font-weight:700;margin:0;transition:.24s var(--ease)}
.film-i p{display:none;margin:12px 0 0;color:rgba(255,255,255,.62);font-size:14.5px;line-height:1.75}
.film-i:hover h3,.film-i.on h3{color:#F0A0A0}
.film-i.on p{display:block}
/* 企业荣誉：整卡可点击，点击弹出对应证书 */
[data-certs] .card{cursor:pointer}
[data-certs] .card:hover{border-color:rgba(200,0,0,.5);box-shadow:var(--sh-h);transform:translateY(-4px)}
[data-certs] .card:after{content:"View certificate";display:block;margin-top:12px;font:600 12.5px var(--fh);color:var(--cyan-d)}
[data-certs] .card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* 证书弹窗 */
.cert-c{max-width:720px;width:92%}
.cert-doc{background:#fff;border-radius:14px;padding:46px 42px;text-align:center;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 10px #FAFCFF}
.cert-brand{display:block;font:700 11.5px var(--fh);letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);margin-bottom:24px}
.cert-t{display:block;font:800 clamp(20px,2vw,27px) var(--fh);color:var(--blue-dd);line-height:1.35}
.cert-rule{display:block;width:96px;height:3px;border-radius:2px;background:#C80000;margin:22px auto}
.cert-note{margin:0;color:var(--ink3);font-size:13.5px;line-height:1.7}
.cert-note code{background:var(--soft);padding:2px 6px;border-radius:6px;font-size:12.5px}
/* 全球分布：地图铺在中间的地图区（该区居中的红色定位按钮就是东莞工厂），
   图片正中心即东莞位置 → 按钮与地图上的东莞严格重合；cover 填满该区，居中裁切不影响中心点 */
/* V17：地图底图改用 2200px 宽 WebP（原 786KB SVG → 113KB），透明度/覆盖方式不变 */
.gdist-map:before{content:"";position:absolute;inset:0;background:url("../img/prof/worldmap-dg.webp") center/cover no-repeat;opacity:.26;pointer-events:none}
.gdist-map>.globe{background:none}

/* ==========================================================================
   37. rd.html「研发三卡」（Forward-Looking Basic Research / Product Development /
   Process Technology Development）：按参考图改成「白圆角卡 + 渐变描边光晕 + 圆角方形图标块」
   · 去掉原来的 frame-border 渐变边框，改为渐变描边：首卡红调、其余蓝调（与各自图标块同色）
   · 图标块 54→64px、圆角 16：首卡固定品牌红底白图标（等同站内悬停态），其余浅蓝底蓝图标
   · 文案与图标 SVG 未改，只有样式（颜色按站内品牌色）
   ========================================================================== */
.rd-next .grid.g3>.card{border-image:none;border:1px solid transparent;border-radius:18px;padding:34px 32px;transition:.32s var(--ease);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(3,82,162,.60),rgba(3,82,162,.10) 46%,rgba(3,82,162,.48)) border-box;box-shadow:0 16px 38px rgba(3,82,162,.18)}
.rd-next .grid.g3>.card:hover{border-color:transparent;transform:translateY(-6px);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(200,0,0,.62),rgba(200,0,0,.12) 46%,rgba(200,0,0,.50)) border-box;box-shadow:0 22px 50px rgba(200,0,0,.30)}
.rd-next .grid.g3>.card .ic-b{width:64px;height:64px;border-radius:16px;border:0;margin-bottom:22px;background:var(--blue-ll);color:var(--blue)}
.rd-next .grid.g3>.card .ic-b .ic{width:28px;height:28px}
.rd-next .grid.g3>.card:first-child .ic-b{background:#C80000;color:#fff;box-shadow:0 12px 26px rgba(200,0,0,.28)}
.rd-next .grid.g3>.card h3{font-size:22px;margin-bottom:12px}
.rd-next .grid.g3>.card p{font-size:15px;line-height:1.8}
@media (max-width:880px){
.rd-next .grid.g3>.card{padding:26px 24px}
.rd-next .grid.g3>.card h3{font-size:20px}
}
/* rd.html：三支柱下方「三大核心研发中心」卡片行——补回标题后恢复该节常规上留白 */
/* rd.html 首屏：研发简介下方的两行补充说明（三大支柱 / 投入），与简介一起左对齐 */
.rd-meta{margin:26px auto 0;text-align:left}
.rd-meta p{margin:0 0 10px;color:var(--ink2);font-size:16px;line-height:1.7}
.rd-meta p:last-child{margin-bottom:0}
.rd-meta b{color:var(--ink)}
.rd-left .rd-itxt,.rd-left .rd-meta{text-align:left}
/* rd.html：专利成果块——沿用「照片 + 右下数据条」样式（.rdres）；
   照片放到 assets/img/v11/rd-lab-patent.jpg 即自动生效，当前回退到插画占位 */
.rdres-patent{background-image:url("../img/v11/rd-lab-patent.jpg"),url("../img/v5/scene-rd-lab.svg")}
/* 专利成果块：遮罩降到约 20%（左侧略深托住文字、右侧照片最亮），文字描影加强保可读 */
.rdres-patent:before{background:linear-gradient(90deg,rgba(1,26,54,.26),rgba(1,26,54,.18) 58%,rgba(1,26,54,.18))}
.rdres-patent:after{background:linear-gradient(0deg,rgba(1,26,54,.18),transparent 42%)}
.rdres-patent .rdres-cap{text-shadow:0 2px 6px rgba(1,16,34,.72),0 8px 34px rgba(1,16,34,.6)}
.rdres-patent .rdres-p{color:rgba(255,255,255,.92);text-shadow:0 2px 6px rgba(1,16,34,.7),0 6px 22px rgba(1,16,34,.45)}
/* 专利数据条：数字改白色、字号固定 48px（13 / 62 / 7 / 109），标签不变，仅这一块生效。
   注意：数字实际由内层 span[data-count] 承载，而 .rdres-st span 会直接命中它（12.5px / 78% 白），
   继承无法覆盖，所以内层 span 必须一并写进选择器 */
.rdres-patent .rdres-st b,.rdres-patent .rdres-st b span{font-size:48px;color:#fff}
@media (max-width:880px){
.film-grid{grid-template-columns:1fr;gap:28px}
.film-h{margin-bottom:24px}
.prof-grid{grid-template-columns:1fr;gap:34px}
.prof-title:after{margin-top:18px}
.prof-col .prof-lead{margin-top:22px}
.prof-col p{font-size:16px}
.vfilm-btn{width:64px;height:64px}
.vfilm-play b{font-size:17px}
}

/* ==========================================================================
   38. rd.html · PACK 研发实验室（参考牌结构：整幅照片带 + 居中标题 + 压边白卡）
   —— 照片带用 assets/img/v11/rd-lab-pack.jpg，标题居中；下方白卡压住照片带底边，
      放三项关键数据；再下方浅色细线面板放 8 大分类（数字即台/套数）与 8 个设备品牌
   ========================================================================== */
.pack-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(300px,30vw,440px);margin-top:48px;padding:62px 26px 112px;border-radius:18px;overflow:hidden;text-align:center;
background:linear-gradient(140deg,#06294F,var(--navy-d));background-image:url("../img/v11/rd-lab-pack.jpg"),linear-gradient(140deg,#06294F,var(--navy-d));background-size:cover;background-position:center;box-shadow:var(--sh)}
.pack-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,22,44,.12),rgba(1,22,44,.30))}
.pack-hero-in{position:relative;z-index:2;max-width:840px}
.pack-hero-tick{display:block;width:46px;height:3px;border-radius:2px;margin:0 auto 18px;background:#C80000}
.pack-hero-h{margin:0;color:#fff;font:800 clamp(28px,3.1vw,44px)/1.16 var(--fh);letter-spacing:-.6px;text-shadow:0 2px 6px rgba(1,16,34,.72),0 8px 34px rgba(1,16,34,.6)}
.pack-hero-s{margin:14px 0 0;color:rgba(255,255,255,.9);font-size:clamp(14px,1.15vw,17px);line-height:1.6;text-shadow:0 2px 6px rgba(1,16,34,.7),0 6px 22px rgba(1,16,34,.5)}
.pack-stats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);width:min(780px,74%);margin:-72px auto 0;padding:30px 8px;background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(1,26,54,.2)}
.pack-stat{padding:6px 24px;text-align:center;border-left:1px solid var(--line2)}
.pack-stat:first-child{border-left:0}
.pack-stat b{display:block}
.pack-stat b,.pack-stat b span{font:800 clamp(32px,3.2vw,46px)/1 var(--fh);color:#C80000;letter-spacing:-1.4px}
.pack-stat b i{font-style:normal;font-size:.42em;font-weight:700;color:var(--ink3);margin-left:5px;letter-spacing:0}
.pack-stat>span{display:block;margin-top:10px;font:600 13.5px/1.45 var(--fh);color:var(--ink2)}
.pack-detail{margin-top:34px;padding:28px 34px 26px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh)}
.pack-detail-h{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pack-detail-t{position:relative;padding-left:22px;font:700 13px var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pack-detail-t:before{content:"";position:absolute;left:0;top:50%;margin-top:-1px;width:14px;height:2px;background:#C80000}
.pack-detail-note{font:600 12.5px var(--fh);color:var(--ink3)}
.pack-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.pack-i{padding:20px 22px;border-left:1px solid var(--line2)}
.pack-i:nth-child(4n+1){border-left:0;padding-left:0}
.pack-i b{display:block;font:800 clamp(24px,2.2vw,30px)/1 var(--fh);color:#C80000;letter-spacing:-1px}
.pack-i>span{display:block;margin-top:9px;font:600 12.5px/1.45 var(--fh);color:var(--ink2)}
.pack-brandline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.pack-brandline-t{padding-right:8px;font:700 12px var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.pbrand{padding:6px 14px;border-radius:999px;background:var(--soft);border:1px solid var(--line2);font:600 12.5px var(--fh);color:var(--ink2);transition:.24s var(--ease)}
.pbrand:hover{border-color:rgba(200,0,0,.55);background:#fff;color:#C80000}
@media (max-width:1100px){
.pack-grid{grid-template-columns:repeat(3,1fr)}
.pack-i:nth-child(4n+1){border-left:1px solid var(--line2);padding-left:22px}
.pack-i:nth-child(3n+1){border-left:0;padding-left:0}
}
@media (max-width:880px){
.pack-hero{margin-top:36px;padding:48px 20px 96px}
.pack-stats{width:100%;margin:-66px auto 0;padding:22px 4px}
.pack-stat{padding:4px 12px}
.pack-stat>span{font-size:12px;margin-top:8px}
.pack-detail{padding:22px 20px}
.pack-detail-h{flex-direction:column;align-items:flex-start;gap:6px}
.pack-grid{grid-template-columns:repeat(2,1fr)}
.pack-i{padding:16px 18px}
.pack-i:nth-child(3n+1){border-left:1px solid var(--line2);padding-left:18px}
.pack-i:nth-child(2n+1){border-left:0;padding-left:0}
}

/* ==========================================================================
   39. manufacturing.html · 制造能力页（沿用 rd.html 版式）
   —— 核心数据照片带（工厂照）+ 工艺流程表 + 制造数据细线面板 + 影片带；
      .pack-detail 系列在此页复用为通用白色细线面板
   ========================================================================== */
.mfg-hero{margin-top:0;background-image:url("../img/v11/mfg-band.jpg"),linear-gradient(140deg,#06294F,var(--navy-d))}
/* 这一段紧跟首屏，收紧上边距（默认 .sec 上内边距 100.8px + .pack-hero 上外边距 48px 太空） */
.sec-band{padding-top:clamp(20px,2.2vw,34px)}
/* 白卡放 5 项数据（比 rd.html 的 3 项宽），数字相应小一档以免顶到分栏线 */
.mfg-stats{width:min(1240px,94%);grid-template-columns:repeat(5,1fr)}
.mfg-stats .pack-stat{padding:6px 18px}
.mfg-stats .pack-stat b,.mfg-stats .pack-stat b span{font-size:clamp(26px,2.6vw,38px)}
@media (max-width:1100px){
.mfg-stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:880px){
.mfg-stats{grid-template-columns:repeat(2,1fr)}
}
/* 制造数据：白卡左右居中、与照片底边重叠 100px（其余落在图片下方），卡内 3 列细线分栏 */
.mfg-facts{position:relative;display:flex;flex-direction:column;align-items:center}
.mfg-facts-im{width:100%;border-radius:18px;background-image:url("../img/v11/mfg-data.jpg");background-size:cover;background-position:center;aspect-ratio:1920/716;box-shadow:var(--sh)}
.mfg-facts-card{position:relative;z-index:2;margin:-100px 0 0;width:min(1180px,86%);padding:44px 48px 36px;background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(1,26,54,.22)}
.mfg-facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.mfg-fact{padding:16px 28px;border-left:1px solid var(--line2)}
.mfg-fact:nth-child(3n+1){border-left:0;padding-left:0}
.mfg-fact h3{margin:0 0 10px;font:700 16.5px/1.4 var(--fh);color:#C80000}
.mfg-fact p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink2)}
@media (max-width:1100px){
.mfg-facts-im{aspect-ratio:16/9}
.mfg-facts-card{width:94%;padding:32px 30px 26px}
.mfg-facts-grid{grid-template-columns:repeat(2,1fr)}
.mfg-fact{padding:14px 22px}
.mfg-fact:nth-child(3n+1){border-left:1px solid var(--line2);padding-left:22px}
.mfg-fact:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:880px){
.mfg-facts-im{aspect-ratio:16/10}
.mfg-facts-card{width:100%;margin:-26px 0 0;padding:26px 22px}
.mfg-facts-grid{grid-template-columns:1fr}
.mfg-fact{padding:16px 0;border-left:0;border-top:1px solid var(--line2)}
.mfg-fact:first-child{border-top:0;padding-top:0}
}
/* 影片带：满内容宽度（.wrap 的 --max 1460 减两侧 30px 内边距 = 1400），比例按 1400×785；
   窄屏按同比例缩放，不会压扁画面 */
.mfg-film{width:100%;aspect-ratio:1400/785;height:auto}
.mfg-film .vfilm-v{height:100%;aspect-ratio:auto}
/* 工艺流程段：标题居中后，副标题的 840px 上限会让它在 900px 居中头里偏左 30px，这里放开上限 */
.sec-proc .sec-sub{max-width:none}

/* ==========================================================================
   40. quality.html · 品质管理页（沿用 manufacturing.html 版式）
   —— 四阶段「照片带 + 压边白卡（4 列）」/ 23 项测试卡片 / 管控手段细线表 / 追溯白面板
   ========================================================================== */
.qlt-im{background-image:url("../img/v11/rd-lab-patent.jpg")}
/* 4 列版分栏细线（覆盖 3 列版的 nth-child 规则） */
.mfg-facts-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.mfg-facts-grid.cols-4 .mfg-fact:nth-child(3n+1){border-left:1px solid var(--line2);padding-left:28px}
.mfg-facts-grid.cols-4 .mfg-fact:nth-child(4n+1){border-left:0;padding-left:0}
@media (max-width:1100px){
.mfg-facts-grid.cols-4{grid-template-columns:repeat(2,1fr)}
.mfg-facts-grid.cols-4 .mfg-fact:nth-child(4n+1){border-left:1px solid var(--line2);padding-left:22px}
.mfg-facts-grid.cols-4 .mfg-fact:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:880px){
.mfg-facts-grid.cols-4 .mfg-fact{border-left:0;padding-left:0}
}

/* ==========================================================================
   41. contact.html · 联系我们页（版式参考 dalybms.com/contact-daly/）
   —— 居中标题（标题下红色分隔线）→ 工作时间胶囊 → 通栏团队照
      → 等宽联络信息栏 → 地图 → 通栏询盘表单；元件与配色全部复用站内既有定义
   ========================================================================== */
.sec-ct .sec-head{margin-bottom:34px}
/* 本页首屏的 banner 标题块已去掉（与标题区重复），主标题落在正文首段：语义用 h1，
   字号/字距沿用站内 h2 档，视觉与版式和上一版一致 */
.sec-ct .sec-head h1{position:relative;padding-bottom:20px;font-size:clamp(20px,min(2.45vw,3.9vh),34px);letter-spacing:-.2px}
/* 参考站：标题下一条居中分隔线 + 一行居中的服务时间小字 */
.sec-ct .sec-head h1:after{content:"";position:absolute;left:50%;bottom:0;width:88px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
/* 无 banner 首屏：上内边距沿用站内 .rd-hero 规格（给固定页眉留位）；下内边距比 .rd-hero
   默认值大，因为本段内容多（标题 + 工作时间 + 通栏照片 + 四栏联络信息 + 按钮 + 底行） */
.sec-ct.rd-hero{padding-bottom:clamp(64px,6vw,88px)}
.ct-hours{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px}
.ct-hours-i{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--sh);font:600 14px var(--fh);color:var(--blue-dd)}
.ct-hours-i .ic{color:var(--cyan)}
/* 参考站：标题区下放一张通栏公司照，这里同样整幅铺开 */
.ct-photo{margin-top:36px;border-radius:18px;overflow:hidden;background:var(--soft);box-shadow:var(--sh);aspect-ratio:1920/670}
.ct-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* 联络信息栏：参考站等宽三栏，这里按字段数排四栏，每栏标题下一条品牌红短线 */
.ct-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:48px}
.ct-col h3{position:relative;margin-bottom:14px;padding-bottom:12px;font-size:16.5px;border-bottom:1px solid var(--line)}
.ct-col h3:after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:2px;background:#C80000}
.ct-col p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink2)}
.ct-col b{color:var(--ink)}
.ct-col a{font-weight:600}
.ct-line{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:14px;color:var(--ink2)}
.ct-acts{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px}
/* 通栏询盘表单：参考站表单整幅铺开、字段两列一行（.form/.f-row 直接复用）
   这里不套 .card，避免卡片默认的上浮悬停动画作用在整张表单上 */
.ct-form{max-width:1180px;margin:0 auto;padding:42px 46px 34px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
.ct-form .f-note{text-align:center}
@media (max-width:1100px){
.ct-cols{grid-template-columns:repeat(2,1fr);gap:30px}
.ct-form{padding:34px 32px 28px}
}
@media (max-width:880px){
.ct-photo{aspect-ratio:16/10}
.ct-cols{grid-template-columns:1fr;gap:24px}
.ct-form{padding:26px 20px 20px}
}

/* ==========================================================================
   42. scenario-<industry>.html · 场景定制「二级行业内容页」
   （版式按用户提供的「全量子场景详情页」参考：首屏数据条 → 子场景吸顶索引 →
     逐个子场景「编号标题 + 导语 + 痛点/方案/对比表/典型型号卡 + 4 条方案优势」 →
     服务优势 / 信任数据 / 全系列规格与选型 / FAQ / CTA）
   —— 颜色、圆角、字体、阴影全部沿用站内 token，不引入新配色
   ========================================================================== */

/* --- 首屏数据条（.phead 深色底上 4 项关键数字） --- */
.sx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.sx-stat{padding-left:22px;border-left:1px solid rgba(255,255,255,.22)}
.sx-stat:first-child{padding-left:0;border-left:0}
.sx-stat b{display:block;font:800 clamp(24px,2.2vw,34px)/1.1 var(--fh);color:#F0A0A0;letter-spacing:-.5px}
.sx-stat span{display:block;margin-top:8px;font:600 12.5px var(--fh);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* --- 子场景索引条：紧随首屏的白色导航带（站点 body 为 overflow-x:hidden 的滚动容器，
       sticky 不会生效，故按参考站的做法做成静态索引；锚点由站内 scroll-padding-top 留位） --- */
.sx-nav{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(3,52,110,.06)}
.sx-nav-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:22px 0}
.sx-nav-h{flex:none;margin-right:4px;font:700 12px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.sx-nav-in a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 14.5px var(--fh);color:var(--ink2);transition:.22s}
.sx-nav-in a:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-ll)}
.sx-nav-in a i{font-style:normal;font-weight:800;color:var(--cyan-d)}
.sx-nav-in a.on,.sx-nav-in a.on:hover{background:linear-gradient(135deg,var(--blue-dd),var(--blue));border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(3,82,162,.22)}
.sx-nav-in a.on i{color:#F0A0A0}

/* --- 子场景标题：编号 + 标题 + 英文副题 + 导语 --- */
.sx-head{display:flex;gap:22px;align-items:flex-start}
.sx-num{flex:none;font:800 clamp(30px,3vw,44px)/1 var(--fh);letter-spacing:-1px;color:var(--cyan)}
.sx-head h2{margin:0}
.sx-sub{margin:12px 0 0;font:600 14px var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.sx-lead{margin:22px 0 0;max-width:1200px;font-size:16.5px;color:var(--ink2)}
.sx-lead b{color:var(--ink)}

/* --- 场景方案卡：痛点 / 方案 / 对比表 / 典型型号 ---
   列数按卡片数量自适应，避免末行留空位：3 张→一排 3 列，2 张→2 列，4 张→2×2（默认）
   同一行卡片用 subgrid 共享行轨道 → 各卡内部「痛点/方案/表格/典型型号」水平对齐 */
.sx-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;grid-auto-rows:auto}
.sx-cards:has(>.sx-card:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.sx-cards:has(>.sx-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
/* 末行不留孤卡：两列网格下若卡片数为奇数（且不是 3 张卡的 3 列情形），
   让最后一张横向铺满整行 —— 5 张 → 2+2+(整行)，7 张 → 2+2+2+(整行)。
   :nth-child(odd):last-child 等价于「总数为奇数」。 */
.sx-cards:has(>.sx-card:nth-child(odd):last-child):not(:has(>.sx-card:nth-child(3):last-child))>.sx-card:last-child{grid-column:1/-1}
.sx-cards>.sx-card{display:grid;grid-template-rows:subgrid;grid-row:span 5}
.sx-cards>.sx-card>.sx-models{margin-top:0;align-self:end}
/* V17：含「图片展示」卡时取消 subgrid 逐行对齐 —— 方形大图会把同排文字卡的头图一起拉高 */
.sx-cards:has(>.sx-card-pic){grid-template-rows:none}
.sx-cards:has(>.sx-card-pic)>.sx-card{display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none}
.sx-cards:has(>.sx-card-pic)>.sx-card>.sx-models{margin-top:auto;align-self:auto}
/* 表格保持自然高度（同行若有一张表行数更多，其余表不被拉伸） */
.sx-cards>.sx-card>.sx-tbl{align-self:start}
.sx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 30px 24px;box-shadow:var(--sh);transition:.32s var(--ease)}
.sx-card:hover{transform:translateY(-4px);box-shadow:var(--sh-h);border-color:rgba(200,0,0,.35)}
.sx-card h3{margin:0 0 18px;font-size:18px;line-height:1.45}
/* 痛点 / PLB 方案：参考站为「粗体标签 + 正文」，不加底色方框 */
.sx-blk{margin:0 0 18px;padding:0;border:0;background:none}
.sx-blk b{display:block;margin-bottom:7px;font:700 15px var(--fh);letter-spacing:0;text-transform:none;color:var(--ink)}
.sx-blk p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink2)}
.sx-blk.sol b{color:var(--cyan-d)}
/* 对比表：深蓝表头（白字）+ PLB 列浅底高亮 + 圆角（R 角）；
   字号/内边距收紧 → 单元格尽量 1-2 行，减少掉行 */
.sx-tbl{width:100%;margin:6px 0 18px;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;font-size:12.5px}
.sx-tbl th{padding:9px 12px;background:#1A3A5C;color:#fff;font:700 11px var(--fh);letter-spacing:.06em;text-transform:uppercase;text-align:left}
.sx-tbl th:first-child{width:30%}
.sx-tbl th:last-child{background:var(--cyan-d)}
.sx-tbl td{padding:9px 12px;border-top:1px solid var(--line2);vertical-align:top;color:var(--ink3);line-height:1.55}
.sx-tbl td:first-child{font-weight:600;color:var(--ink)}
.sx-tbl td:last-child{background:var(--cyan-l);font-weight:700;color:var(--cyan-d)}
.sx-models{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink2)}
.sx-models>b{margin-right:8px;font:700 11.5px var(--fh);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.sx-model{display:inline-block;margin:6px 6px 0 0;padding:4px 12px;border-radius:100px;background:var(--blue-l);color:var(--blue);font:600 12.5px var(--fh)}

/* --- 子场景详情页的区块标题：Professional Battery Solutions / Solution Advantages ---
   V17：标题统一居中，并加与站内其它居中标题一致的 96×3 红横线；
   与上一板块（场景卡 .sx-cards）之间加大间距
   V19：字号不再单独定义，统一继承 --h2（全站通用 H2 字号） */
.sx-h2{margin:0 0 26px;text-align:center;position:relative;padding-bottom:18px}
.sx-h2:after{content:"";position:absolute;left:50%;bottom:0;width:96px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
.sx-cards+.sx-h2{margin-top:clamp(88px,7.6vw,116px)}

/* V17：service 板块的 4 张承诺卡改为「上图下文」—— 每张卡顶部一张常规比例实拍图，
   下面承接原有文字（编号 / 标题 / 副题 / 说明 / 依据行）；只作用于 #service 内的卡，
   不影响「Solution Advantages」区块的同名卡片 */
#service .sx-adv{position:relative;padding:0;overflow:hidden}
/* 编号 1/2/3/4 改到图片左上角：绝对定位在卡内，浮在图片之上 */
#service .sx-adv-n{position:absolute;top:14px;left:14px;z-index:3;width:38px;height:38px;margin:0;box-shadow:0 10px 24px rgba(1,20,44,.34)}
#service .sx-adv-im{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--blue-l)}
#service .sx-adv-im img{display:block;width:100%;height:100%;object-fit:cover;transition:.55s var(--ease)}
#service .sx-adv:hover .sx-adv-im img{transform:scale(1.05)}
#service .sx-adv-b{display:flex;flex-direction:column;flex:1;padding:24px 22px 20px}

/* --- 方案优势：每个子场景末尾 4 张编号卡 --- */
.sx-advs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.sx-adv{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:14px;padding:24px 22px 20px;transition:.3s var(--ease)}
.sx-adv:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(200,0,0,.35)}
.sx-adv-n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:16px;border-radius:50%;background:var(--cyan);color:#fff;font:800 15px var(--fh)}
.sx-adv h4, .sx-adv h3{margin:0 0 6px;font-size:16px}
.sx-adv-sub{margin:0 0 10px;font:600 12.5px var(--fh);color:var(--blue)}
.sx-adv p{margin:0}
.sx-adv>p{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--ink2)}
/* 依据行：浅底 + 左侧色条（两端带 R 角）；统一预留 2 行高度并吸底，同事之间水平对齐 */
.sx-adv-spec{display:block;margin-top:auto;min-height:calc(2 * 1.7em + 20px);padding:10px 14px;border:0;border-left:3px solid var(--cyan);border-radius:8px;background:var(--blue-ll);font-size:12px;line-height:1.7;color:var(--ink2)}

/* --- 快速选型指南（参考站：小标题 + 3 行；放在全系列规格表之后） --- */
.sx-guide{margin-top:32px;padding:28px 30px;background:var(--blue-ll);border:1px solid var(--line);border-radius:16px}
.sx-guide-h{margin-bottom:16px;font:700 13px var(--fh);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sx-guide p{margin:0 0 12px;font-size:14.5px;line-height:1.85;color:var(--ink2)}
.sx-guide p:last-child{margin-bottom:0}
.sx-guide p b{color:var(--blue)}

/* --- 信任数据（4 项数字） --- */
.sx-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sx-trust>div{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 22px}
/* 数字与后缀（+ / %）同行、不换行；字号上调一档 */
.sx-trust .num{display:block;font-size:clamp(40px,4vw,56px);white-space:nowrap}
.sx-trust .num i{font-size:.5em;vertical-align:super}
.sx-trust h4, .sx-trust h3{margin:12px 0 6px;font-size:16px}
/* 说明文字统一预留 3 行高度：文字短时用空行补齐，
   使下方分隔线 + Source 行在四张卡上落在同一水平线（再配合吸底） */
.sx-trust p{margin:0;font-size:13.5px;color:var(--ink2)}
.sx-trust>div>p{margin:0 0 14px;min-height:calc(3 * 1.6em)}
/* 来源行：分隔线下的灰色小字；只作用于卡片直接子元素，避免命中数字里的 <i> */
.sx-trust>div>i{display:block;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-style:normal;font-size:12px;color:var(--ink3)}

/* --- 二级页（列表页）的子场景卡片：整卡可点，样式沿用 .sx-card --- */
a.sx-card{color:inherit;text-decoration:none}
a.sx-card:hover h3{color:var(--cyan-d)}
.sx-card>p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink2)}
.sx-linktop{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.sx-linktop .sx-num{font-size:26px}
.sx-linktop .sx-adv-sub{margin:0}
a.sx-card .sx-models{margin-top:18px;border-top:0;padding-top:0}
.sx-linkmore{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font:600 13.5px var(--fh);color:var(--cyan-d)}
a.sx-card:hover .sx-linkmore{color:var(--blue)}

/* --- 详情页面内的兄弟场景导航（复用索引条样式，静态） --- */
.sx-nav-in a i{color:var(--cyan-d)}

@media (max-width:1100px){
/* :has() 规则的优先级高于单类选择器，这里需一并覆盖，否则窄屏仍会排成 2/3 列 */
.sx-cards,.sx-cards:has(>.sx-card:nth-child(2):last-child),.sx-cards:has(>.sx-card:nth-child(3):last-child){grid-template-columns:1fr}
.sx-cards>.sx-card{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
.sx-cards>.sx-card>.sx-models{margin-top:auto;align-self:auto}
.sx-advs,.sx-trust{grid-template-columns:repeat(2,1fr)}
.sx-stats{grid-template-columns:repeat(2,1fr);gap:20px}
.sx-stat:nth-child(odd){padding-left:0;border-left:0}
.sx-head{gap:16px}
}
@media (max-width:880px){
.sx-nav-in{padding:11px 0}
.sx-nav-h{display:none}
.sx-num{font-size:28px}
.sx-lead{font-size:16px}
.sx-card{padding:22px 20px 18px}
.sx-card h3{font-size:17px}
.sx-advs,.sx-trust{grid-template-columns:1fr}
.sx-stats{gap:16px 20px}
.sx-stat b{font-size:26px}
.sx-stat span{font-size:12.5px}
/* 窄屏字号统一上调一档，保证可读性 */
.sx-blk b{font-size:16px}
.sx-blk p{font-size:15px}
.sx-tbl{font-size:12.5px}
.sx-tbl th{padding:9px 10px;font-size:10.5px}
.sx-tbl td{padding:10px}
.sx-models{font-size:13.5px}
.sx-model{margin-top:7px;padding:5px 13px;font-size:13px}
.sx-adv{padding:22px 20px 18px}
.sx-adv h4, .sx-adv h3{font-size:17px}
.sx-adv-sub{font-size:13px}
.sx-adv>p{font-size:14px}
.sx-adv-spec{font-size:12.5px}
.sx-trust>div{padding:22px 20px 18px}
.sx-trust h4, .sx-trust h3{font-size:17px}
.sx-trust>div>p{font-size:14px}
.sx-trust i{font-size:12.5px}
.sx-guide{padding:22px 20px}
.sx-guide p{font-size:14px}
.sx-h2{margin-bottom:16px}
.sx-cards+.sx-h2{margin-top:56px}
#service .sx-adv-b{padding:20px 18px 18px}
#service .sx-adv-im{aspect-ratio:16/10}
#service .sx-adv-n{top:12px;left:12px;width:34px;height:34px}
/* 长文案（首屏介绍）窄屏下字号略降、行距收紧 */
.phead-sub{font-size:15.5px;line-height:1.75}
}

/* ==========================================================================
   43. products.html · BMS 能力数据卡（改版：对齐参考图2 的排版与样式）
   —— 由原「白色圆角面板 + 三栏细线分栏」改为「三张独立描边卡片」：
      白底 / 1px 细描边 / 16px 圆角 / 轻投影，hover 轻微上浮；
      卡内顺序 = 圆角色块图标 + 加粗数字标题（h4）+ 灰色说明（p）；
      图标配色同参考图：首卡红底白图标，其余浅蓝底蓝图标；
      上方标题区复用站内既有 .sec-head.center（红横线自动移到文字右侧）
   ========================================================================== */
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
/* 上接 2×2「reason」网格：新增的居中标题区需要与网格拉开距离 */
.reasons-grid+.sec-head{margin-top:58px}
.pstat{position:relative;display:flex;flex-direction:column;padding:30px 28px 32px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(3,52,110,.06);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.pstat:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:#D6E3F2}
.pstat-ic{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin-bottom:20px;border-radius:14px;background:var(--blue-l);color:var(--blue)}
.pstat-ic .ic{width:26px;height:26px}
.pstat:first-child .pstat-ic{background:linear-gradient(135deg,#E02A20 0%,#C80000 100%);color:#fff;box-shadow:0 12px 26px rgba(200,0,0,.26)}
.pstat h4, .pstat h3{margin:0;font-size:clamp(28px,2.9vw,38px);font-weight:800;letter-spacing:-1px;line-height:1.12;color:var(--ink);white-space:nowrap}
.pstat h4 i, .pstat h3 i{font-style:normal;margin-left:4px;font-size:.6em;letter-spacing:-.5px;color:var(--cyan)}
.pstat p{margin:10px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink2)}
@media (max-width:1100px){
.pstats{gap:20px}
.pstat{padding:26px 22px 28px}
.pstat h4, .pstat h3{font-size:32px}
}
@media (max-width:880px){
.pstats{grid-template-columns:1fr;gap:16px;margin-top:26px}
.pstat{padding:24px 22px 26px}
.pstat h4, .pstat h3{font-size:30px}
}

/* ==========================================================================
   44. about.html · 里程碑「三个成长阶段」改版（对齐 dalybms「历史发展」板块）
   —— 参考 https://www.dalybms.com/about-us/ 的 Historical development：
      · 标题区沿用站内 .sec-head.center，H2 下补一条 96×3 居中红横线
      · 主区为滑片式：一屏一阶段 = 大号渐变红年份 + 阶段眉标 + 标题 + 红色三角要点
        + 右侧配图（复用站内 v5 插画）
      · 底部控制条：一条横向细灰线 + 三个「空心红圆点 + 年份标签」+ 左右圆形箭头；
        选中态圆点带红色光晕（用 box-shadow spread 实现，避免伪元素层叠遮挡）
      · 切换脚本内联在 about.html 末尾，不改动公共 v11b.js
   ========================================================================== */
.milestones .sec-head h2{position:relative;padding-bottom:18px}
.milestones .sec-head h2:after{content:"";position:absolute;left:50%;bottom:0;width:96px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
.tlh{position:relative}
.tlh-view{overflow:hidden}
.tlh-track{display:flex;transition:transform .7s var(--ease)}
.tlh-slide{flex:0 0 100%;min-width:0}
.tlh-inner{display:flex;align-items:center;gap:clamp(24px,3.2vw,52px)}
.tlh-time{flex:0 0 auto;font:600 clamp(34px,4.5vw,62px)/1.05 var(--fh);letter-spacing:-1.5px;white-space:nowrap;color:#C80000}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.tlh-time{background-image:linear-gradient(to right,#C80000,#F78B8B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.tlh-body{flex:1 1 auto;min-width:0}
.tlh-phase{display:block;font:800 12.5px var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.tlh-body h3{margin:0 0 12px;font-size:20px}
.tlh-list li{position:relative;padding-left:26px;color:var(--ink2);font-size:15px;line-height:1.75}
.tlh-list li+li{margin-top:8px}
.tlh-list li:before{content:"";position:absolute;left:2px;top:8px;border-color:transparent transparent transparent #C80000;border-style:solid;border-width:7px 12px}
.tlh-img{flex:0 0 33%;max-width:430px}
.tlh-img img{display:block;width:100%;height:auto;border-radius:14px}
.tlh-bar{position:relative;display:flex;align-items:flex-start;margin-top:70px}
.tlh-bar:before{content:"";position:absolute;top:6px;left:0;right:0;height:1px;background:#C9D3DF}
.tlh-nav{position:relative;flex:1 1 auto;display:flex;justify-content:space-between;margin:0 34px}
.tlh-dot{display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.tlh-circle{position:relative;display:block;width:12px;height:12px;border-radius:50%;background:#fff;
 box-shadow:inset 0 0 0 2px #C80000,0 0 0 0 rgba(200,0,0,0);transition:box-shadow .35s var(--ease)}
.tlh-dot.on .tlh-circle{box-shadow:inset 0 0 0 2px #C80000,0 0 0 9px rgba(200,0,0,.25)}
.tlh-year{display:block;margin-top:20px;font:400 15px var(--fb);color:var(--ink2);white-space:nowrap;transition:.3s var(--ease)}
.tlh-dot.on .tlh-year,.tlh-dot:hover .tlh-year{color:var(--ink)}
.tlh-dot.on .tlh-year{font-weight:700}
.tlh-btn{position:relative;flex:0 0 36px;width:36px;height:36px;margin-top:-12px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:#C80000;cursor:pointer;transition:.3s var(--ease)}
.tlh-btn:hover{background:rgba(200,0,0,.08)}
@media (max-width:1100px){
.tlh-inner{gap:28px}
.tlh-img{flex:0 0 36%}
}
@media (max-width:880px){
.tlh-inner{flex-direction:column;align-items:flex-start;gap:22px}
.tlh-time{font-size:40px}
.tlh-img{flex:0 0 auto;width:100%;max-width:100%}
.tlh-bar{margin-top:44px}
.tlh-nav{margin:0 12px}
.tlh-year{margin-top:16px;font-size:12.5px}
.tlh-btn{flex:0 0 28px;width:28px;height:28px;margin-top:-8px}
.tlh-btn .ic{width:15px;height:15px}
}

/* ==========================================================================
   45. scenarios.html · 一级分类首屏（对齐 dalybms 分类图块条 .cor_box）
   —— 参考 https://www.dalybms.com/electric-tricycle-bms/ 首屏：高图块 + 深色遮罩 +
      底部居中白色标签；鼠标悬停（或键盘聚焦）时该图块加宽、同排其它图块收窄，
      产生左右位移的过渡效果。
   —— 参考站选中块 40%、其余各约 12%（选中块宽 ≈ 普通块的 3.33 倍）。本站一级分类 12 个，
      排成「单排 12 块」：悬停项 flex-grow:3.4，其余各 1 → 选中块宽 ≈ 普通块的 3.4 倍，
      倍数与参考站一致（绝对占比因块数不同而不同）。
   —— 造型同参考站：图块之间 0 间距、0 圆角、无投影（贴合式整条）；
      hover 反馈只靠「加宽 + 图片轻微放大 + 遮罩加深」，不加浮起/阴影，
      避免零间距下相邻图块的阴影在接缝处压出暗带。
   —— 宽度变化交给 flex-grow 过渡（.6s），不做 width 动画，避免重排抖动。
   —— ≤880 按参考站自身的窄屏做法改为竖向堆叠通栏（触屏无悬停，故不做加宽）
   —— 源图取自力朗官网各一级分类页 og:image（宽幅实景图），16:9 裁切后自托管
   ========================================================================== */
/* V17 改版：图块条不再作为首屏 banner（不再铺满整行、不再紧贴导航），
   改为常规板块 —— 4 列自适应网格 + 圆角图卡 + 悬停轻抬，与其他板块间距一致 */
.catnav{padding-top:clamp(56px,5vw,78px);padding-bottom:clamp(56px,5vw,78px)}
.catnav .sec-head{margin-bottom:44px}
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:var(--max,1460px);margin:0 auto;padding:0 30px}
.catrow{display:contents}
.catcard{position:relative;height:224px;border-radius:14px;overflow:hidden;background:var(--navy-d);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.catcard img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.catcard:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(1,26,54,0) 42%,rgba(1,26,54,.34) 78%,rgba(1,26,54,.74) 100%);transition:background .35s var(--ease)}
.catcard-t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 16px;color:#fff;font:700 14px/1.35 var(--fh);letter-spacing:-.1px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.catcard:hover,.catcard:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px rgba(1,26,54,.22)}
.catcard:hover img,.catcard:focus-visible img{transform:scale(1.06)}
.catcard:hover:before,.catcard:focus-visible:before{background:linear-gradient(180deg,rgba(3,82,162,.10) 34%,rgba(1,26,54,.42) 78%,rgba(1,26,54,.80) 100%)}
@media (max-width:1180px){
.catgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:880px){
.catgrid{grid-template-columns:repeat(2,1fr);gap:16px}
.catcard{height:190px}
.catcard-t{padding:13px 12px 15px;font-size:13.5px}
}

/* V17 新增：产品/场景栏目统一的面包屑带（白底 + 左对齐面包屑，仅这一行）
   —— 与 products.html / product-detail.html 里的同名列写法一致，提到公共样式便于全站复用 */
.phead-plain{background:#fff;padding:132px 0 28px;position:relative}
.phead-plain .phead-in{max-width:var(--max,1460px);margin:0 auto;padding:0 30px}
.phead-plain .crumb{color:var(--ink3,#8695A8)}
.phead-plain .crumb a{color:var(--ink2,#475467)}
.phead-plain .crumb a:hover{color:var(--blue,#0352A2)}
.phead-plain .crumb b{color:var(--blue,#0352A2)}
.phead-plain .overline{color:var(--cyan-d,#A30000)}

/* V17 新增：场景页首屏长文案拆分 —— 标题带只留一句导语，
   其余文案移到紧随其后的 Overview 板块，两栏排版（复用站内 .sec-head.center 标题区） */
.sx-ov{padding-top:clamp(56px,5vw,78px)}
.sx-ov .sec-head{margin-bottom:34px}
.sx-ov-txt{max-width:1180px;margin:0 auto;columns:2;column-gap:48px}
.sx-ov-txt p{margin:0;color:var(--ink2);font-size:15px;line-height:1.85}
@media (max-width:880px){
.sx-ov-txt{columns:1}
}

/* ==========================================================================
   46. scenarios.html · 「Why Choose PLB」板块改版（对齐 dalybms Sufficient Reasons）
   —— 参考站版式：标题区居中、H2 下一条 96×3 红横线；卡片 =「上图 + 标题
      （标题下带 56×3 红横线）+ 灰字说明」，卡片无描边、两列排布；图片 16:10 圆角，
      hover 图片轻微放大。
   —— 原来的「大数字 + 描边卡片」版式（.grid.g5 / .num）在本板块不再使用。
   —— 顺带压掉「图块条」与「场景卡」两块之间的上下内距（.catnav / .apps），
      以及本板块的上内距，缩小整页内容间距。
   ========================================================================== */
.catnav{padding-bottom:clamp(56px,5vw,78px)}
.apps{padding-top:clamp(40px,3.4vw,54px)}
.why{padding-top:clamp(56px,5vw,78px)}
.why .sec-head h2{position:relative;padding-bottom:18px}
.why .sec-head h2:after{content:"";position:absolute;left:50%;bottom:0;width:96px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:46px 42px}
.why-card{display:flex;flex-direction:column}
.why-im{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--blue-l),#DCE9F7)}
.why-im img{display:block;width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.why-card:hover .why-im img{transform:scale(1.04)}
.why-card h3{position:relative;margin:22px 0 0;padding-bottom:14px;font-size:18px}
.why-card h3:after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:2px;background:#C80000}
.why-card p{margin:12px 0 0;color:var(--ink2);font-size:14.5px;line-height:1.8}
.why-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:52px}
@media (max-width:880px){
.why-grid{grid-template-columns:1fr;gap:32px}
.why-card h3{margin-top:16px;padding-bottom:12px}
.why-cta{margin-top:34px}
}

/* ==========================================================================
   47. 场景页「通用头首屏」（二、三级页面共用同一套头版式）
   —— 二/三级场景页首屏 = 一级分类图块条（.sec.catnav + .catgrid，样式见第 45 节）
      + 页面标题带。标题带内容改为居中（对齐参考站 dalybms 的页面标题样式）：
      H1 居中、其下一条 88×3 红横线、副标题与数据条一并居中。
   —— 标题带改为「主题宽度」的圆角卡片：限宽 var(--max)（=1460px）并左右留白、居中，
      四角 20px 圆角（.phead 自带 overflow:hidden，圆角能裁住底图）；
      内容居中：H1 居中、其下一条 88×3 红横线、面包屑/副标题/数据条一并居中。
   —— 因为上面已经有图块条，标题带不再需要为固定导航留 158px，上内距收紧。
   ========================================================================== */
.phead-c{max-width:var(--max);width:calc(100% - clamp(24px,4vw,60px));margin:0 auto;border-radius:20px;padding:clamp(70px,6.6vw,98px) 0}
.phead-c .phead-in{text-align:center}
.phead-c .crumb{justify-content:center}
.phead-c .overline{justify-content:center}
.phead-c h1{position:relative;padding-bottom:20px;font-size:clamp(24px,min(2.9vw,4.6vh),38px);max-width:1080px;margin-left:auto;margin-right:auto}
.phead-c h1:after{content:"";position:absolute;left:50%;bottom:0;width:88px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
.phead-c .phead-sub{margin-left:auto;margin-right:auto;max-width:1080px}
.phead-c .sx-stats{max-width:1080px;margin-left:auto;margin-right:auto}
/* 标题带底图换成实拍图（1200×388，偏亮：平均亮度 0.62）。
   底图透明度提到 .8 让实拍图看得见，同时把遮罩加深，保证白色文字可读。 */
.phead-c .bg{opacity:.8}
.phead-c:after{background:linear-gradient(100deg,rgba(1,26,54,.94) 6%,rgba(1,32,66,.80) 52%,rgba(2,53,106,.60) 100%)}

/* ==========================================================================
   48. scenario-engine-start.html · 子场景卡片顶部配图
   —— 每张卡在上方加一条 180px 配图带（用 ::before，不必改 HTML）：按卡片的
      链接地址匹配对应插画 assets/img/sx/*.svg（1600×1000，深蓝渐变 + 青色辉光，
      与站内 product-*.svg 同一套规范；示意性图形，非写实照片）。
   —— 卡片用的是 subgrid 逐行对齐，多了一行配图，所以 span 由 5 改为 6。
   ========================================================================== */
.sx-cards>.sx-card{grid-row:span 6}
/* V17：卡片头图改为常规比例（16:9），不再是 180px 的窄条裁切 */
.sx-card:before{content:"";display:block;aspect-ratio:16/9;margin:-30px -30px 20px;border-radius:15px 15px 0 0;background:var(--blue-l) center/cover no-repeat;transition:.35s var(--ease)}
.sx-card:hover:before{filter:brightness(1.08)}
/* V17：第二张卡 =「图片展示」模板（常规比例实拍图 + 标题 + 一句要点 + 典型型号），与其余文字卡模板区分 */
.sx-cards>.sx-card-pic{display:flex;flex-direction:column;grid-row:auto;padding:0;overflow:hidden}
.sx-card-pic:before{display:none}
.sx-card-pic .sx-pic{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--blue-l);transition:.5s var(--ease)}
.sx-card-pic:hover .sx-pic{transform:scale(1.02)}
.sx-pic-cap{display:flex;flex-direction:column;flex:1;padding:26px 30px 24px}
.sx-pic-cap h3{margin:0 0 12px}
.sx-pic-cap .sx-models{margin-top:auto}
.sx-card[href$="oem.html"]:before{background-image:url(../img/sx/oem.svg)}
.sx-card[href$="high-displacement.html"]:before{background-image:url(../img/sx/high-displacement.svg)}
.sx-card[href$="scooter.html"]:before{background-image:url(../img/sx/scooter.svg)}
.sx-card[href$="adv.html"]:before{background-image:url(../img/sx/adv.svg)}
.sx-card[href$="racing.html"]:before{background-image:url(../img/sx/racing.svg)}
.sx-card[href$="atv-utv.html"]:before{background-image:url(../img/sx/atv-utv.svg)}
.sx-card[href$="marine.html"]:before{background-image:url(../img/sx/marine.svg)}
.sx-card[href$="fleet.html"]:before{background-image:url(../img/sx/fleet.svg)}
.sx-card[href$="classic.html"]:before{background-image:url(../img/sx/classic.svg)}
.sx-card[href$="military.html"]:before{background-image:url(../img/sx/military.svg)}
@media (max-width:880px){
.sx-card:before{aspect-ratio:16/10}
.sx-card-pic .sx-pic{aspect-ratio:16/10}
.sx-pic-cap{padding:20px 20px 18px}
}

/* ==========================================================================
   49. 修复 · 一级产品卡 .rcard 的角标 (.tag) 未绝对定位
   —— .rcard .rim 是 flex 容器（内含 img + span.tag），但角标的「覆盖层」样式
      只写在 .icard .im .tag 上，选择器没覆盖 .rim。结果 .tag 成了普通 flex 子项：
      它挤占宽度、把图片压窄（右侧露出 .rim 的浅蓝底），自己又被 overflow:hidden
      从左边裁掉，标签显示不全。
   —— 修复：把 .rim 设为定位上下文，并给其直接子级 .tag 补上与 .icard .im .tag
      一致的覆盖层样式（绝对定位到左上角），图片即可重新铺满。
   ========================================================================== */
.rcard .rim{position:relative}
.rcard .rim>.tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(3,82,162,.88);color:#fff;font:600 12px var(--fh);padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px)}

/* ==========================================================================
   50. V17 · about.html 补上「Core Competence」与「Mission / Values / Vision」两块
   —— 版式照参考图，文字与图片全部沿用站内实际内容（v11 / v7 实拍素材）
   A. .comp（Core Competence / Continuous Innovation and Improvement）
      · 左栏文案 = overline + 大标题，标题下一条 118×3 的品牌红横线
      · 右栏 3 列照片拼图：第一行两张小图，左下一张跨两列的大图，
        右列一张跨两行的竖图，右下再一张小图；每张图左下角压白色小标题 + 深色渐变托底
      · 拼图下方 4 列数据条：红色大号数字 + 灰色说明，每列左侧一条细分隔线
   B. .mvv（Together, There Is a Future! → Mission / Values / Vision）
      · 照片底 + 深色遮罩 + 三栏居中白字，标题下补一条 96×3 居中红横线
      · 底色必须写成 .sec.mvv（两个类）才压得住第 4 节 .sec.dark 的底色
      · 图标 = 白圆牌 + 品牌红描边图标，对应参考图里「白圆底 + 红色图形」的做法
   ========================================================================== */
.comp-grid-wrap{display:grid;grid-template-columns:.86fr 1.6fr;gap:clamp(32px,5vw,76px);align-items:start}
.comp-copy h2{position:relative;padding-bottom:clamp(26px,3.4vw,52px);font-size:clamp(26px,2.5vw,38px);line-height:1.24}
.comp-copy h2:after{content:"";position:absolute;left:0;bottom:0;width:118px;height:3px;background:#C80000}
.comp-grid{display:grid;grid-template-columns:1fr 1fr 1.34fr;grid-auto-rows:clamp(132px,11.4vw,196px);gap:14px}
.comp-grid>br{display:none}
.comp-tile{position:relative;display:block;overflow:hidden;border-radius:14px;background:#0B1B33;text-decoration:none}
.comp-tile:nth-of-type(1){grid-area:1/1/2/2}
.comp-tile:nth-of-type(2){grid-area:1/2/2/3}
.comp-tile:nth-of-type(3){grid-area:2/1/4/3}
.comp-tile:nth-of-type(4){grid-area:1/3/3/4}
.comp-tile:nth-of-type(5){grid-area:3/3/4/4}
.comp-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s var(--ease)}
.comp-tile:hover img{transform:scale(1.05)}
.comp-tile span{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font:600 14.5px var(--fh);background:linear-gradient(0deg,rgba(2,11,26,.78),rgba(2,11,26,.32) 62%,transparent)}
.comp-tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.comp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,4.4vw,62px)}
.comp-stats>div{border-left:1px solid var(--line);padding:8px 22px 8px 24px}
.comp-stats b{display:block;font:800 clamp(26px,2.5vw,38px)/1.1 var(--fh);color:#C80000}
.comp-stats span{display:block;margin-top:12px;color:var(--ink2);font-size:14.5px;line-height:1.6}
.sec.mvv{padding:clamp(96px,9vw,150px) 0;background:var(--blue-dd) url("../img/v6/bg-home-dusk.jpg") center/cover no-repeat;color:rgba(255,255,255,.8)}
.sec.mvv:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,11,26,.88),rgba(2,17,36,.68) 46%,rgba(1,9,21,.9))}
.sec.mvv>.wrap{position:relative;z-index:2}
.sec.mvv .sec-head h2{position:relative;padding-bottom:18px}
.sec.mvv .sec-head h2:after{content:"";position:absolute;left:50%;bottom:0;width:96px;height:3px;border-radius:2px;background:#C80000;transform:translateX(-50%)}
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,56px)}
.mvv-i{text-align:center}
.mvv-ic{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#C80000;box-shadow:0 16px 38px rgba(1,16,34,.36)}
.mvv-ic .ic{width:34px;height:34px}
.mvv-i h3{color:#fff;font-size:17.5px;margin-bottom:12px}
.mvv-i p{margin:0;color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.78}
@media (max-width:1180px){
.comp-grid-wrap{grid-template-columns:1fr;gap:38px}
.comp-stats{grid-template-columns:1fr 1fr;gap:22px 0}
}
@media (max-width:880px){
.comp-copy h2{padding-bottom:24px}
.comp-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(120px,26vw,170px)}
.comp-tile:nth-of-type(3){grid-area:2/1/3/3}
.comp-tile:nth-of-type(4){grid-area:3/1/4/3}
.comp-tile:nth-of-type(5){grid-area:4/1/5/3}
.mvv-grid{grid-template-columns:1fr;gap:32px}
.mvv-ic{width:64px;height:64px;margin-bottom:16px}
}
@media (max-width:640px){
.comp-stats{grid-template-columns:1fr;gap:0}
.comp-stats>div{padding:16px 0 16px 20px}
}

/* ==========================================================================
   51. V17 · rd.html「Eight Core Analytical & Testing Instruments」改用「图片展示」版式
   —— 沿用第 48 节的「图片展示」模板：卡片 padding:0 + overflow:hidden，
      顶部一条常规比例配图（16:10，铺满卡宽、吃掉上部圆角），下面才是标题与一句要点
   —— 站内没有这 8 台仪器的实拍图，配图位先用「示意图形」占位：深蓝渐变 + 蓝色辉光 +
      细点阵 + 该仪器的大号线图标（与第 48 节、.sec.mesh 同一套观感，非写实照片）
   —— 以后有实拍图：把 .ic-b 换成 <img>（或按第 37 节 .rdres-patent 的写法，在
      background-image 里写「实拍图, 插画」两级回退），版式不用再改
   —— 选择器挂在栅格 .eq-cards 上，只影响 rd.html 这一块
   ========================================================================== */
.eq-cards>.card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.eq-cards>.card .ic-b{position:relative;flex:none;width:100%;height:auto;aspect-ratio:16/10;margin:0;border:0;border-radius:0;color:#fff;
 background:radial-gradient(120% 130% at 24% 16%,#0A2C58 0%,#062546 40%,#02101F 76%,#010A18 100%)}
.eq-cards>.card .ic-b:before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(58% 62% at 80% 14%,rgba(3,82,162,.55),transparent 72%),radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.3px);
 background-size:auto,22px 22px;background-repeat:no-repeat,repeat}
.eq-cards>.card .ic-b .ic{position:relative;z-index:2;width:62px;height:62px;stroke-width:1.05;opacity:.96}
/* 悬停：整块变红只适合小图标块（第 2 节 .card:hover .ic-b），这里改为图标微放大 */
.eq-cards>.card:hover .ic-b{box-shadow:none;background:radial-gradient(120% 130% at 24% 16%,#0A2C58 0%,#062546 40%,#02101F 76%,#010A18 100%)}
.eq-cards>.card:hover .ic-b .ic{transform:scale(1.08)}
.eq-cards>.card h4, .eq-cards>.card h3{padding:0 24px;margin-top:22px}
.eq-cards>.card p{margin:0;padding:6px 24px 26px}
@media (max-width:880px){
.eq-cards>.card .ic-b{aspect-ratio:16/9}
.eq-cards>.card h4, .eq-cards>.card h3{padding:0 20px;margin-top:18px}
.eq-cards>.card p{padding:6px 20px 22px}
}

/* ==========================================================================
   52. V17 · rd.html「Three Core R&D Centers」按对标样式改成「无卡片框 + 竖分隔线」三栏
   —— 对标样式：三列之间只有一条细分隔线，卡片本身没有边框/圆角/底色/阴影与悬停位移；
      图标放在列顶（纯线图标，不再套色块），下面跟标题与说明，整列居中
   —— 覆盖第 37 节的渐变描边卡 + 彩色图标块；配色仍走站内品牌色（首卡红、其余蓝）
   —— 窄屏（≤880px）栅格变单列，竖分隔线改成横向分隔线
   ========================================================================== */
.rd-next .grid.g3{gap:0}
.rd-next .grid.g3>.card{border:0;border-image:none;border-radius:0;background:none;box-shadow:none;padding:6px clamp(24px,3vw,46px);text-align:center}
.rd-next .grid.g3>.card+.card{border-left:1px solid var(--line)}
.rd-next .grid.g3>.card:hover{transform:none;border-color:transparent;background:none;box-shadow:none}
.rd-next .grid.g3>.card .ic-b{width:auto;height:auto;margin:0 auto 22px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--blue)}
.rd-next .grid.g3>.card:first-child .ic-b{background:none;color:#C80000;box-shadow:none}
.rd-next .grid.g3>.card .ic-b .ic{width:32px;height:32px;stroke-width:1.4}
.rd-next .grid.g3>.card:hover .ic-b{background:none;box-shadow:none}
.rd-next .grid.g3>.card:hover .ic-b .ic{transform:none}
.rd-next .grid.g3>.card h3{font-size:18px;margin-bottom:14px}
.rd-next .grid.g3>.card p{font-size:14.5px;line-height:1.9;color:var(--ink2)}
@media (max-width:880px){
.rd-next .grid.g3>.card{padding:0}
.rd-next .grid.g3>.card+.card{border-left:0;border-top:1px solid var(--line);margin-top:30px;padding-top:30px}
}

/* ==========================================================================
   53. V17 · rd.html「Three Core R&D Centers」按对标站 EVE 研发实力页三栏块重做
   —— 对标站实际取值（.t_d1k1li / .t_d1k1xin / .t_d1k1icon / .t_d1k1xin .t_ywh3 h3 /
      .t_d1k1xin .ywduan2 p）：
      · 面板：border-radius:10px; background:#f5fbf9（品牌色极浅底，无描边无阴影）；
        padding:50px 42px 70px
      · 栏间距：每栏左右各 15px → 两块面板之间 30px
      · 图标：52×50，下距 34px
      · 标题：24px 粗体 + 品牌色渐变字（它的绿→浅蓝），块下距 23px
      · 正文：16px / line-height:1.875 / #666，整体左对齐
   —— 本站按同一结构换自己的品牌蓝系：站内 33 处大面板都用 --blue-l 浅蓝底，
      浅红 --cyan-l 只用于小 chip / 表格高亮，所以这里不用红底 → 面板 var(--blue-l)、
      图标 var(--blue)、标题渐变 #023E7D→#3F9BE0（与第 44 节 .tlh-time 同一写法，
      包在 @supports 里，不支持渐变字时回退纯色标题）；三栏完全一致、无悬停位移
   —— 覆盖第 37 节渐变描边卡、第 52 节无框分隔线两种旧做法
   ========================================================================== */
.rd-next .grid.g3{gap:22px}
.rd-next .grid.g3>.card{border:0;border-radius:10px;background:var(--blue-l);box-shadow:none;text-align:left;
 padding:clamp(26px,2.6vw,34px) clamp(20px,2.2vw,28px) clamp(30px,3.2vw,40px)}
.rd-next .grid.g3>.card+.card{border-left:0}
.rd-next .grid.g3>.card:hover{transform:none;border-color:transparent;background:var(--blue-l);box-shadow:none}
.rd-next .grid.g3>.card .ic-b{width:48px;height:48px;margin:0 0 clamp(16px,1.5vw,22px);border:0;border-radius:0;background:none;box-shadow:none;color:var(--blue)}
.rd-next .grid.g3>.card:first-child .ic-b{background:none;color:var(--blue);box-shadow:none}
.rd-next .grid.g3>.card .ic-b .ic{width:42px;height:42px;stroke-width:1.3}
.rd-next .grid.g3>.card:hover .ic-b{background:none;box-shadow:none}
.rd-next .grid.g3>.card:hover .ic-b .ic{transform:none}
.rd-next .grid.g3>.card h3{font-size:clamp(18px,1.35vw,20px);font-weight:700;line-height:1.35;margin-bottom:clamp(14px,1.4vw,18px);color:var(--blue);display:inline-block}
.rd-next .grid.g3>.card p{font-size:14px;line-height:1.72;color:var(--ink2)}
/* Ability / Data / Value 三段：标签与正文同一行、段间 12px，不加分隔线 */
.rd-next .grid.g3>.card p+p{margin-top:12px}
.rd-next .grid.g3>.card .kv-h{display:inline-block;margin-right:6px;font:600 10px/1.3 var(--fh);letter-spacing:.16em;text-transform:uppercase;color:#0352A2;white-space:nowrap}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.rd-next .grid.g3>.card h3{background-image:linear-gradient(92deg,#023E7D,#0352A2 46%,#3F9BE0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
@media (max-width:880px){
.rd-next .grid.g3{gap:20px}
.rd-next .grid.g3>.card{padding:24px 20px 26px}
.rd-next .grid.g3>.card+.card{border-top:0;margin-top:0;padding-top:24px}
.rd-next .grid.g3>.card .ic-b{margin-bottom:18px}
.rd-next .grid.g3>.card .ic-b .ic{width:38px;height:38px}
.rd-next .grid.g3>.card h3{font-size:18px;margin-bottom:12px}
.rd-next .grid.g3>.card p{font-size:13.5px;line-height:1.7}
}

/* ==========================================================================
   54. V17 · rd.html：把「Eight Core Analytical & Testing Instruments」并进
   「Equipment & capability」面板（原独立板块已整块删除，内容并入该面板内）
   —— 面板内新增第二段：细线上分隔 + 小标题行（沿用 .pack-detail-t / .pack-detail-note）+
      4 列仪器清单（线图标 + 名称 + 一句说明，列间细竖线），与上方 8 格统计同一套版式
   —— 原来那条「Testing standards exceed …」脚注一并移进面板底部（.pack-eq-note）
   —— 断点跟随上方统计格：4 列 → 3 列未用（仪器 8 项）→ 2 列 → 1 列
   ========================================================================== */
.pack-sub{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.pack-sub-h{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px}
.pack-eq{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 0}
.pack-eq-i{padding:0 22px;border-left:1px solid var(--line2)}
.pack-eq-i:nth-child(4n+1){border-left:0;padding-left:0}
.pack-eq-i>.ic{width:26px;height:26px;color:var(--blue);stroke-width:1.4;margin-bottom:12px}
.pack-eq-i b{display:block;font:700 14.5px/1.4 var(--fh);color:var(--ink);letter-spacing:0}
.pack-eq-i>span{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--ink3)}
.pack-eq-note{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line2);font-size:13px;line-height:1.7;color:var(--ink3)}
@media (max-width:1180px){
.pack-eq{grid-template-columns:1fr 1fr;gap:26px 0}
.pack-eq-i:nth-child(4n+1){border-left:1px solid var(--line2);padding-left:22px}
.pack-eq-i:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:880px){
.pack-sub{margin-top:22px;padding-top:20px}
.pack-sub-h{flex-direction:column;align-items:flex-start;gap:8px}
.pack-eq{gap:22px 0}
.pack-eq-i{padding:0 16px}
.pack-eq-i:nth-child(2n+1){padding-left:0}
}
@media (max-width:640px){
.pack-eq{grid-template-columns:1fr}
.pack-eq-i{border-left:0;padding:0}
}

/* ==========================================================================
   55. V17 · rd.html：「Equipment & capability」与「Analytical equipment」合并成一个板块
   —— 结构：小标题区（.pack-head）→ 8 张仪器卡（复用第 51 节 .eq-cards 的深色面板卡，
      正好 8 张，对应「八大核心分析设备」）→ 一条能力摘要带（.pack-sub：小标题行 +
      8 类设备数量一行 + 品牌胶囊 + 标准说明）
   —— 原来的 8 格统计墙（.pack-grid / .pack-i）与面板内 8 项清单
      （第 54 节 .pack-eq / .pack-eq-i）已收进这条摘要带，规则保留但不再使用
   ========================================================================== */
.pack-head{margin-top:clamp(46px,5.4vw,76px);margin-bottom:clamp(26px,3vw,38px)}
.pack-cards{padding-bottom:clamp(30px,3.6vw,46px)}
.pack-cats{margin:0;padding-bottom:20px;font:600 13px/1.95 var(--fh);color:var(--ink2)}
.pack-cats b{color:#C80000;font-weight:800;margin-right:4px}
@media (max-width:880px){
.pack-head{margin-top:38px;margin-bottom:22px}
.pack-cards{padding-bottom:26px}
.pack-cats{font-size:12.5px;line-height:1.9}
}

/* ==========================================================================
   56. V17 · rd.html：合并板块的 8 张卡 = 8 类设备能力（不再用深色图标面板卡）
   —— 卡片仍是站内标准 .card（白底 + 细描边 + 悬停位移），内容改为
      「品牌红大号数字 + 加粗类别名」；4 列 → ≤880px 两列 → ≤640px 一列
   —— 8 台分析仪器降为同板块内的清单（复用第 54 节 .pack-eq / .pack-eq-i，
      与上方 8 格统计同一套版式）；第 51 节 .eq-cards、第 55 节 .pack-cats
      随之停用，规则保留
   ========================================================================== */
.cap-cards{gap:20px}
.cap-card{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:26px 24px;border-radius:14px}
.cap-card b{font:800 clamp(30px,3.1vw,42px)/1 var(--fh);color:#C80000;letter-spacing:-1.2px}
.cap-card span{font:600 14.5px/1.5 var(--fh);color:var(--ink)}
@media (max-width:880px){
.cap-cards{grid-template-columns:1fr 1fr;gap:14px}
.cap-card{padding:20px 18px}
.cap-card b{font-size:30px}
}
@media (max-width:640px){
.cap-cards{grid-template-columns:1fr}
}

/* ==========================================================================
   57. V17 · quality.html「Traceability」三栏加图片展示
   —— 三栏（Cell MES / PACK MES / Cell BDM）各加一条 16:10 实拍图：
      图在上、标题与说明在下，与站内「图片展示」卡（第 48 / 51 节）同一做法
   —— 图片用站内既有实拍素材（v11/mfg-data.jpg、v11/mfg-band.jpg、v11/rd-lab-patent.jpg）；
      列数（3 → 2 → 1 列）由 .mfg-facts-grid 原有断点接管，这里只管图本身
   ========================================================================== */
.mfg-fact-im{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--blue-l);margin-bottom:18px}
/* 图片尺寸统一：3 列布局下首栏没有左内距、其余栏左右各 28px，导致三栏内容宽度不等
   → 这里的做法照对标站的「栅格左右负边距 + 每栏等内距」：栅格左移 28px、首栏补回 28px 左内距，
     三栏内容宽度因此完全相同（三张图同宽同高），首栏文字仍与面板左缘对齐 */
@media (min-width:1101px){
.trace-grid{margin-left:-28px}
.trace-grid>.mfg-fact:first-child{padding-left:28px}
}
@media (max-width:640px){
.mfg-fact-im{aspect-ratio:16/9}
}

/* ==========================================================================
   59. V17 · 新闻卡头图改为常规照片比例 16:9（不再用固定高度的窄条裁切）
   —— 原 .ncard .im 固定 210px（窄屏 180px）高：卡片越宽图越扁，宽屏下约 2.1:1，
      已经不像照片；现统一为 16:9 常规比例（与第 48 节 .sx-card:before 的
      「常规比例」同一口径，宽窄屏一致，窄屏下略高于原来的 180px）
   —— 首页横向大卡 .ncard.feat 的高度仍由版面自适应，不套比例
   —— 影响页面：news.html、index.html（这两页的样式版本串已同步更换）
   ========================================================================== */
.ncard .im{height:auto;aspect-ratio:16/9}
.ncard.feat .im{aspect-ratio:auto}

/* ==========================================================================
   61. V17 · honors.html「13 Product Standards」证书弹窗（图片 + 有效期）
   —— 复用 about.html 的 #certmodal / .modal / .cert-c 弹窗骨架，这里只补：
      · .cert-c-shot / .cert-shot：A4 竖版的证书照片位（object-fit:contain，限高 62vh）
      · .cert-ph：扫描件尚未放入时的占位提示（由页面脚本写入具体文件路径）
      · .cert-meta / .cert-valid：弹窗下方证书名 + 有效期
   ========================================================================== */
.cert-c-shot{max-width:640px;width:92%;padding:0;background:none;box-shadow:none}
.cert-shot{position:relative;width:100%;aspect-ratio:1/1.414;max-height:min(62vh,660px);margin:0 auto;border-radius:14px;background:#fff;box-shadow:var(--sh-h);overflow:hidden;display:flex;align-items:center;justify-content:center}
.cert-shot img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.cert-ph{padding:26px;font-size:13px;line-height:1.8;color:var(--ink3);text-align:center}
.cert-meta{margin-top:16px;padding:18px 22px;background:#fff;border-radius:14px;box-shadow:var(--sh);text-align:center}
.cert-meta .cert-t{display:block;font:800 clamp(17px,1.6vw,21px) var(--fh);color:var(--blue-dd)}
.cert-valid{display:block;margin-top:8px;font:600 13.5px var(--fh);color:var(--ink2)}
.cert-valid b{color:#C80000}
@media (max-width:640px){
.cert-shot{aspect-ratio:1/1.3;max-height:none}
}

/* ==========================================================================
   62. V17 · manufacturing.html「Two Plants · One Standard」改为图片展示
   —— 原来两栏是「白卡 + 电池图标 + 勾选列表」；现在照参考图（about.html 的
      .comp 拼图块）改成「实拍图 + 图上压标题 + 下方勾选列表」，不再套白卡：
      · .plant-im：16:10 实拍图，底部深色渐变 + 白色 h3 标题（图片来自站内既有素材）
      · 列表沿用站内 .ticks，间距由 .plant .ticks 控制
   ========================================================================== */
.plant-grid{align-items:start}
.plant-im{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--blue-l);box-shadow:var(--sh)}
.plant-im img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s var(--ease)}
.plant:hover .plant-im img{transform:scale(1.04)}
.plant-im h3{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px 22px;color:#fff;font:700 clamp(17px,1.6vw,20px)/1.3 var(--fh);background:linear-gradient(0deg,rgba(2,11,26,.82),rgba(2,11,26,.34) 62%,transparent)}
.plant .ticks{margin-top:20px}
@media (max-width:880px){
.plant-im{aspect-ratio:16/9}
.plant-im h3{padding:14px 16px}
.plant .ticks{margin-top:16px}
}

/* ==========================================================================
   63. V17 · 首页 #story（Company Strength）4 张小卡内容居中
   —— 这块数据行原来是 .fl-col-content{align-items:flex-start;text-align:left}，
      图标圆牌、红色数字、灰色标签一律靠左；现按设计稿改为卡内居中。
   —— 结构（每张卡两层 .fl-col-content，必须打到内层才有效）：
        .fl-col-group-nested.fl-col-group-equal-height
          > .fl-col > .fl-col-content                    ← 外层（只是包住两行）
            > .fl-col-group-nested > .fl-col > .fl-col-content   ← 内层：①图标+数字 ②标签
      · 图标（.fl-icon 是 inline-flex 圆牌）靠 align-items:center 居中
      · 数字（.fl-heading）与标签（.fl-rich-text p）靠 text-align:center 居中
   —— 作用域：#story 是首页唯一使用 .fl-col-group-equal-height 的板块，不影响其它区块
   ========================================================================== */
#story .fl-col-group-nested.fl-col-group-equal-height > .fl-col > .fl-col-content > .fl-col-group-nested > .fl-col > .fl-col-content{align-items:center;text-align:center}
/* 2026-10-17 修正：上面的规则只让内容在「自身组宽」内居中，但两行的组宽不同——
   第一行（图标+数字）收缩为数字宽度、第二行（标签）为标签宽度，两者中心不重合。
   实测（1810px 视口）图标/数字中心比列中心左偏 31px 左右。
   ① 两行的 .fl-col-group-nested 撑满整列，使组宽都等于列宽；
      注意 v12.css 的 `.s2-photo .fl-col-group{width:auto!important}` 会压掉普通
      width:100%，因此这里必须同样带 !important（本规则带 #story，优先级更高）；
   ② 标签 <p> 自带内联 style="text-align:left"，需 !important 覆盖。
   结果：图标、数字、标签共用同一条垂直中轴。 */
#story .fl-col-group-nested.fl-col-group-equal-height > .fl-col > .fl-col-content > .fl-col-group-nested{width:100%!important;justify-content:center}
#story .fl-col-group-nested.fl-col-group-equal-height .fl-rich-text p{text-align:center!important}

/* ==========================================================================
   64. V17 · 首页「Product Recommendations」选项卡改为三大栏目 + 空态
   —— 分类改成 All Products / Standard 26650 Cells / Standard PACKs / Customization
      （与导航里产品三大类一致）：Standard PACKs 一个 tab 对应旧 ups / agv / mod
      三类卡（首页内联脚本已支持 data-cat 空格分隔多值匹配）
   —— 「Customization」目前没有产品卡，切到该分类时显示这条引导 + 询价按钮，
      由脚本按「筛选后可见卡数」切换 hidden，避免出现空白区域
   ========================================================================== */
.rec-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 26px;border:1px dashed var(--line);border-radius:16px;background:#fff;text-align:center}
.rec-empty p{margin:0;color:var(--ink2);font-size:15px;line-height:1.7}

/* ==========================================================================
   65. V17 · 移动端质检修复（headless Chrome 实测 24 页 × 375/320 两档宽度）
   A. 320px 下全站横向溢出 36px：页脚首列 .ft-about 恒为 336px（grid 列
      min-width:auto + .ft-soc 六枚 38px 图标 flex 不换行撑出 min-content）
      → 允许列收缩（min-width:0），社交图标与订阅框允许换行
   B. 底部固定条 .mobar 高 69px，但页面没为它留空间 → 页脚最后一行被压住
      → ≤880 给 .ft 补底部内距，并计入 iPhone 安全区
   C. products.html 的 .mesh-cta 按钮宽 400px 且 nowrap → 375px 下溢出 45px
      → 允许换行 + 限制最大宽 + 高度自适应（桌面端仍是一行 52px）
   D. 触控目标 <40px / 字号 <12px（实测每页 36–51 个、index 14 处）
      → burger / tlh-btn / rec-nav / rec-tab / ft-soc 补到 ≈44px；
        .hero-chip、.hero-scroll 字号补到 12px（.evb-lb 在 v12.css 第 24 节）
   ========================================================================== */
.mesh-cta .btn{max-width:100%;white-space:normal;line-height:1.3;height:auto;min-height:52px;padding:14px 30px;text-align:center}
.hero-chip,.hero-scroll{font-size:12px}
@media (max-width:880px){
.ft-about{min-width:0}
.ft-soc{flex-wrap:wrap}
.ft-news{flex-wrap:wrap}
.ft-news input{min-width:0;flex:1 1 130px}
.ft{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.ft-soc a{width:42px;height:42px}
.burger{padding:10px}
.tlh-btn{flex:0 0 40px;width:40px;height:40px;margin-top:-14px}
.rec-tab{padding-top:14px;padding-bottom:14px}
}
@media (max-width:640px){
.rec-nav{width:44px;height:44px}
}

/* 65b. 复测（320px 档）剩余 3 处横向溢出 —— 都是「列不能收缩 / 内容 min-content 过大」
   · about.html：.tlh-bar 里「箭头 40 + 导航 224 + 箭头 40」超出 320 的可用宽 280
     → 允许导航收缩，窄屏只显示当前阶段的年份，其余年份隐藏
   · news-detail.html：.with-side 的网格列 min-width:auto 被文章内容撑到 311
     → 允许列收缩（与页脚同一类修复）
   · 场景页：.sx-tbl 三列表在 320 下 min-content 超出 5px → 窄屏收紧单元格内距与字号 */
@media (max-width:1180px){
.with-side>*{min-width:0}
}
@media (max-width:640px){
.tlh-nav{min-width:0;margin:0 10px}
.tlh-year{display:none}
.tlh-dot.on .tlh-year{display:block;white-space:nowrap}
.sx-tbl{font-size:12px}
.sx-tbl th,.sx-tbl td{padding:8px 8px}
}

/* ==========================================================================
   66. V17 · contact.html：Google 地图改「点击加载」
   —— 原来 head/正文里直接嵌 Google Maps iframe，被墙或弱网时 iframe 长时间挂起，
      连带把页面 load 事件拖住（就是「加载超时/一直转圈」的典型成因）
   —— 现在默认只显示一个占位按钮（站内样式、零第三方请求），点击后才注入 iframe；
      高度沿用原 iframe 的 430 / 320（≤880）两档，版式不跳
   ========================================================================== */
.ct-map-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:430px;padding:24px;border:0;background:var(--blue-ll);color:var(--ink2);cursor:pointer;text-align:center;transition:.24s var(--ease)}
.ct-map-btn .ic{color:var(--blue)}
.ct-map-btn b{font:700 16px var(--fh);color:var(--ink)}
.ct-map-btn span{font-size:13px;color:var(--ink3)}
.ct-map-btn:hover{background:var(--blue-l)}
.ct-map-btn:focus-visible{outline:3px solid rgba(200,0,0,.6);outline-offset:-3px}
@media (max-width:880px){
.ct-map-btn{height:320px}
}



/* V19 CTA copy fit: compact, single-line where possible, left-aligned. */
.hd-r .btn-cta{font-size:12.5px;padding:0 18px;white-space:nowrap;text-align:left;justify-content:flex-start}
.cta-actions .btn{font-size:13px;padding:12px 20px;white-space:nowrap;text-align:left;justify-content:flex-start}
.cta-actions .cta-note{text-align:left}
.cat-cta .btn{font-size:9px!important;line-height:1.25;padding:6px 3px!important;letter-spacing:-.1px;white-space:nowrap;text-align:left;justify-content:flex-start;width:100%}
.consult-btns{flex-wrap:wrap;gap:8px}
.consult-btns .btn{font-size:11px;line-height:1.25;padding:8px 10px;white-space:nowrap;text-align:left;justify-content:flex-start}
@media(max-width:640px){.hd-r .btn-cta{font-size:11.5px;padding:0 14px}.cta-actions .btn{font-size:12px;padding:10px 14px}}

@media(min-width:1201px) and (max-width:1400px){.hd-r .btn-cta{font-size:10px!important;padding:0 6px!important}}

/* ==========================================================================
   57. V20 · 三处补充
   A. rd.html 三卡：图标 / 标题 / ABILITY / DATA / VALUE 五行跨栏水平对齐
      · 用 CSS subgrid 让三张卡的五个子元素共用同一组行轨道（每卡恰好 5 个子元素）
      · 行间距交给子元素自身 margin（row-gap:0），保持原有 12px 段落间距
      · 不支持 subgrid 的浏览器自动退回原布局；≤880px 单列时取消 subgrid
   B. manufacturing.html 新「Core Competence」版块：沿用 .comp 骨架，
      4 张拼图（第 3 张跨两列两行、第 4 张竖跨三行）+ 双行数据条
   C. manufacturing.html 首屏副标题：banner 内第一行小标题
   ========================================================================== */
@supports (grid-template-rows:subgrid){
.rd-next .grid.g3{grid-template-rows:repeat(5,auto);row-gap:0}
.rd-next .grid.g3>.card{display:grid;grid-template-rows:subgrid;grid-row:span 5}
}
@media (max-width:880px){
.rd-next .grid.g3{grid-template-rows:none}
.rd-next .grid.g3>.card{display:block;grid-row:auto}
}
.comp-grid.four>.comp-tile:nth-of-type(1){grid-area:1/1/2/2}
.comp-grid.four>.comp-tile:nth-of-type(2){grid-area:1/2/2/3}
.comp-grid.four>.comp-tile:nth-of-type(3){grid-area:2/1/4/3}
.comp-grid.four>.comp-tile:nth-of-type(4){grid-area:1/3/4/4}
.comp-stats.two span{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;margin-top:16px}
.comp-stats.two .cs-s{font-size:13.5px;font-weight:400;line-height:1.55;color:var(--ink2);margin-top:5px}
.page-banner-sub .pbs-lead{font-size:clamp(16px,1.3vw,19px);font-weight:600;line-height:1.5;color:#fff;margin-bottom:12px}
@media (max-width:880px){
.comp-grid.four{grid-template-columns:1fr 1fr}
.comp-grid.four>.comp-tile:nth-of-type(1),.comp-grid.four>.comp-tile:nth-of-type(2){grid-area:auto}
.comp-grid.four>.comp-tile:nth-of-type(3),.comp-grid.four>.comp-tile:nth-of-type(4){grid-area:auto/1/auto/3}
}

/* ==========================================================================
   58. V21 · manufacturing.html
   · .note-band：浅蓝底 + 4px 浅蓝左边线的「Why this matters」备注；
     .mfg-note 限定宽度与 Manufacturing Data 的白色数据卡（1180/86%）对齐
   · .mfg-film：视频卡上的长标题 / 长说明居中并限宽，避免压到画面边缘
   ========================================================================== */
.note-band{padding:clamp(20px,2.2vw,26px) clamp(22px,2.6vw,32px);
 border-left:4px solid #9CC7EF;border-radius:0 10px 10px 0;background:#F2F7FD}
.note-band p{margin:0;color:var(--ink2);font-size:15px;line-height:1.8}
.note-band b{color:var(--blue-dd);font-weight:700}
.mfg-note{width:min(1180px,86%);margin:clamp(24px,2.6vw,34px) auto 0}
.mfg-film .vfilm-play b{max-width:760px;text-align:center;line-height:1.3}
.mfg-film .vfilm-meta{max-width:680px;text-align:center;line-height:1.6}
/* quality.html：追溯三栏的实拍图统一规格 —— 固定同高 + 同宽（cover 裁切），
   不再受三栏左侧内距差异影响，三张图严格同尺寸 */
.trace-grid .mfg-fact-im{height:clamp(180px,15vw,250px);aspect-ratio:auto}
/* quality.html：四道质量闸门 2×2 卡片（卡内为「一句说明 + 分组清单」） */
.qgate{padding:28px 26px 24px}
.qgate h3{display:flex;align-items:flex-start;gap:10px;font-size:17px;line-height:1.45;margin-bottom:12px}
.qgate h3 .ic{flex:none;margin-top:2px;color:var(--blue)}
.qgate p{margin:0;font-size:14px;line-height:1.75;color:var(--ink2)}
.qgate .gate-h{margin:16px 0 10px;font:700 11.5px/1.4 var(--fh);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.qgate .ticks{margin:0}
.qgate .ticks li{font-size:14px;line-height:1.65;margin-bottom:8px;padding-left:28px}
.qgate .ticks li:before{width:17px;height:17px;top:2px}
.qgate .ticks li:last-child{margin-bottom:0}
/* 四道闸门改为横向轮播：一屏两张（≤880px 一屏一张），
   红色圆形翻页按钮浮在卡片区左右两侧、垂直居中 */
.qcar{position:relative}
/* 轨道要留出足够的内边距：overflow 在 padding box 处裁切，padding 太小会把卡片悬停阴影切掉 */
.qcar-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:12px 20px 64px}
.qcar-track::-webkit-scrollbar{display:none}
.qcar-track>.card{flex:0 0 calc(50% - 12px);scroll-snap-align:start}
.qcar-nav{position:absolute;left:0;right:0;top:12px;bottom:64px;margin:0;pointer-events:none}
.qcar-btn{position:absolute;top:50%;margin-top:-23px;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:#C80000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 26px rgba(200,0,0,.26);transition:.25s var(--ease);pointer-events:auto}
.qcar-btn:hover:not([disabled]){background:#A50000;transform:translateY(-2px);box-shadow:0 16px 30px rgba(200,0,0,.32)}
.qcar-btn[disabled]{background:#E7EBF1;color:#A7B1BF;box-shadow:none;cursor:default}
.qcar-btn[data-qcar-prev]{left:-22px}
.qcar-btn[data-qcar-next]{right:-22px}
@media (max-width:880px){
.qcar-track>.card{flex-basis:100%}
.qcar-track{padding:10px 14px 52px}
.qcar-nav{top:10px;bottom:52px}
.qcar-btn{width:40px;height:40px;margin-top:-20px}
.qcar-btn[data-qcar-prev]{left:4px}
.qcar-btn[data-qcar-next]{right:4px}
}
/* quality.html「6 Sigma Quality Management Framework」：图文卡，
   沿用 rd.html 八大仪器卡的深色图标面板 + 白底文字，正文再加缩写/全称两层 */
.sig-cards>.card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.sig-cards>.card .ic-b{position:relative;width:100%;height:auto;aspect-ratio:16/9;margin:0;border:0;border-radius:0;color:#fff;flex-direction:column;gap:12px;
 background:radial-gradient(120% 130% at 24% 16%,#0A2C58 0%,#062546 40%,#02101F 76%,#010A18 100%)}
.sig-cards>.card .ic-b:before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(58% 62% at 80% 14%,rgba(3,82,162,.55),transparent 72%),radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.3px);
 background-size:auto,22px 22px;background-repeat:no-repeat,repeat}
.sig-cards>.card .ic-b .ic{position:relative;z-index:2;width:38px;height:38px;stroke-width:1.2}
/* 悬停时保持深色面板（覆盖 .card:hover .ic-b 的整块变红），只做图标微放大 */
.sig-cards>.card:hover .ic-b{box-shadow:none;background:radial-gradient(120% 130% at 24% 16%,#0A2C58 0%,#062546 40%,#02101F 76%,#010A18 100%)}
.sig-cards>.card:hover .ic-b .ic{transform:scale(1.08)}
.sig-k{position:relative;z-index:2;display:block;padding:0 16px;text-align:center;font:600 10.5px/1.4 var(--fh);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.sig-body{padding:22px 24px 26px}
.sig-body h4, .sig-body h3{margin:0;font:800 clamp(22px,2vw,28px)/1.1 var(--fh);color:var(--blue);letter-spacing:-.4px}
.sig-body .sig-sub{display:block;margin-top:7px;font-size:13.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.sig-body p{margin:10px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink2)}
/* quality.html「Traceability in Action」：浅蓝面板 + 4 步流程卡 + 结论条 */
.tia{margin-top:26px;padding:26px 28px;background:#F2F7FD;border:1px solid #CFE1F3;border-radius:14px}
.tia h3{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.35;color:var(--blue-dd)}
.tia-scn{margin:8px 0 18px;font-size:14px;line-height:1.7;color:var(--ink2)}
.tia-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tia-step{background:#fff;border-radius:10px;padding:18px 14px;text-align:center;box-shadow:0 6px 18px rgba(1,26,54,.06)}
.tia-n{display:block;margin-bottom:8px;font:800 clamp(24px,2.2vw,30px)/1 var(--fh);color:var(--blue)}
.tia-step b{display:block;font-size:14px;line-height:1.4;color:var(--ink)}
.tia-s{display:block;margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.tia-foot{margin-top:14px;padding:14px 18px;background:#fff;border-radius:10px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--blue-dd);box-shadow:0 6px 18px rgba(1,26,54,.06)}
@media (max-width:880px){
.tia{padding:20px 18px}
.tia-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.tia-steps{grid-template-columns:1fr}
.tia-foot{font-size:12.5px}
}
@media (max-width:880px){
.sig-body{padding:18px 18px 22px}
}
@media (max-width:880px){
.qgate{padding:22px 18px}
}
@media (max-width:880px){
.note-band{padding:18px 18px 18px 20px;border-radius:0 8px 8px 0}
.note-band p{font-size:14px;line-height:1.75}
}

/* ==========================================================================
   59. products.html · Compare Products（选 2–4 个产品并排比参数）
   · .cmp-w 只是把 .rcard 包一层，让 Compare 开关能浮在卡片右上角（卡片本身是 <a>）
   · .cmp-bar 底部悬浮条；.cmp-modal 对比弹层
   ========================================================================== */
.cmp-w{position:relative;display:flex;flex-direction:column}
.cmp-w>.rcard{flex:1}
.cmp-t{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:7px;
 padding:7px 12px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.94);
 color:var(--ink2);font:600 12px var(--fh);cursor:pointer;transition:.2s var(--ease);backdrop-filter:blur(4px)}
.cmp-t:hover:not([disabled]){border-color:rgba(3,82,162,.5);color:var(--blue)}
.cmp-t .bx{width:14px;height:14px;border:1.6px solid currentColor;border-radius:4px;display:flex;align-items:center;justify-content:center;flex:none}
.cmp-t .bx svg{width:10px;height:10px;opacity:0}
.cmp-t.on{background:#C80000;border-color:#C80000;color:#fff;box-shadow:0 8px 20px rgba(200,0,0,.28)}
.cmp-t.on .bx svg{opacity:1}
.cmp-t[disabled]{opacity:.45;cursor:not-allowed}
.cmp-t.shake{animation:cmpShake .4s}
@keyframes cmpShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(2,17,36,.96);color:#fff;
 box-shadow:0 -14px 40px rgba(1,16,34,.35);transform:translateY(110%);transition:transform .32s var(--ease)}
.cmp-bar.on{transform:none}
.cmp-bar-in{max-width:1460px;margin:0 auto;padding:12px 30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cmp-bar-t{font:700 13.5px var(--fh)}
.cmp-bar-s{font-size:12.5px;color:rgba(255,255,255,.66);margin-top:3px}
.cmp-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.cmp-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:100px;
 background:rgba(255,255,255,.12);font-size:12.5px;max-width:100%}
.cmp-chip button{border:0;background:none;color:rgba(255,255,255,.8);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.cmp-chip button:hover{color:#fff}
.cmp-go{border:0;border-radius:100px;background:#C80000;color:#fff;font:700 13px var(--fh);padding:11px 22px;cursor:pointer;transition:.2s}
.cmp-go:hover:not([disabled]){background:#A50000}
.cmp-go[disabled]{background:rgba(255,255,255,.18);cursor:not-allowed}
.cmp-clear{border:1px solid rgba(255,255,255,.35);background:none;color:#fff;border-radius:100px;
 padding:10px 16px;font:600 12.5px var(--fh);cursor:pointer}
.cmp-clear:hover{border-color:#fff}
.cmp-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(1,12,26,.62)}
.cmp-modal.on{display:flex}
.cmp-dialog{background:#fff;border-radius:18px;width:min(1180px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 90px rgba(1,16,34,.4)}
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;border-bottom:1px solid var(--line)}
.cmp-head h3{margin:0;font-size:19px}
.cmp-x{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink2)}
.cmp-x:hover{color:#C80000}
.cmp-scroll{overflow:auto;padding:0 26px 26px}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.cmp-table th,.cmp-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{position:sticky;top:0;background:#fff;font:700 14px var(--fh);color:var(--blue);padding-top:20px}
.cmp-table tbody th{width:168px;color:var(--ink3);font-weight:600;white-space:nowrap}
.cmp-table td{color:var(--ink2)}
body.cmp-bar-on{padding-bottom:92px}
@media (max-width:880px){
.cmp-bar-in{padding:10px 16px;gap:10px}
.cmp-bar-s{display:none}
.cmp-t{top:10px;right:10px;padding:6px 10px;font-size:11.5px}
.cmp-scroll{padding:0 16px 20px}
.cmp-table tbody th{width:120px}
body.cmp-bar-on{padding-bottom:120px}
}

/* Mobile fixes: article/product pages must never expand the layout viewport */
@media (max-width:880px){
.with-side{grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;min-width:0}
.with-side>*{min-width:0;max-width:100%}
.art,.art-body,.side{min-width:0;max-width:100%}
.art-body .tbl-w{width:100%;max-width:100%;overflow-x:auto}
.art-body table{width:auto;min-width:680px}
.art-meta-row{flex-wrap:wrap;gap:12px}
.art-share{flex-wrap:wrap}
.ctaband{padding:30px 20px!important;gap:20px}
.ctaband h3{font-size:22px}
.ctaband p{font-size:14px}
.ctaband .cta-actions{flex-wrap:wrap;max-width:100%}
.ctaband .btn{white-space:normal;max-width:100%}
.cmp-chips{flex:1 1 100%;max-width:100%;overflow-x:auto}
.cmp-chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* Mobile one-line controls, video 16:9, certificate close */
@media (max-width:880px){
.tabs{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto}
.pd-foot{flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;gap:10px;scrollbar-width:none}
.pd-foot::-webkit-scrollbar{display:none}
.pd-foot .btn{flex:0 0 auto;width:auto!important;white-space:nowrap}
.post-type-archive-video .gimg,.tax-video_channel .gimg{aspect-ratio:16/9!important;height:auto!important}
.post-type-archive-video .icard .im,.tax-video_channel .icard .im{aspect-ratio:16/9!important;height:auto!important}
.post-type-archive-video .gimg b,.tax-video_channel .gimg b{font-size:15px!important;line-height:1.3;text-align:center;padding:0 12px}
.vplay-lg{width:62px!important;height:62px!important;min-width:62px;min-height:62px}
.vplay-lg svg{width:24px!important;height:24px!important}
}
.vplay{flex:0 0 auto!important;aspect-ratio:1/1;min-width:58px;min-height:58px}
.vplay svg{width:26px;height:26px;flex:0 0 auto}
.vplay-lg{min-width:82px;min-height:82px}
.vplay-lg svg{width:30px;height:30px}
.cert-c-shot .modal-x{z-index:60!important;background:#fff!important;color:#0F1F33!important;box-shadow:0 6px 18px rgba(0,0,0,.2)!important;border:1px solid var(--line)!important}


/* Mobile: filter chips stay on one line */
@media (max-width:880px){
.chips{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto}
}


/* Product detail: the content lead paragraph is intentionally smaller than the site lead */
.single-product .art-body .lead{font-size:15px;line-height:1.7;padding:16px 18px}
@media (max-width:640px){.single-product .art-body .lead{font-size:14.5px;line-height:1.65;padding:14px 16px}}



/* Mobile only: remove the decorative frame borders on the product detail page */
@media (max-width:640px){
.single-product .pd-media,
.single-product .ctaband,
.single-product .card:not(.ncard):not(.icard){border:0!important;border-image:none!important}
}


/* Product detail mobile polish: compact the banner intro, keep one title hierarchy */
@media (max-width:640px){
.single-product .page-banner-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.single-product .pd-side h2{font-size:20px}
}


/* Product detail mobile: align the overview grid with the rest of the content */
@media (max-width:640px){
.single-product .pd-grid{grid-template-columns:minmax(0,1fr)!important;padding:0 20px;box-sizing:border-box}
.single-product .pd-grid>.pd-media,.single-product .pd-grid>.pd-side{width:100%;max-width:100%;min-width:0}
}

/* WCAG AA: darken the orange "Hardware Advantages" label on white */
body .pd-adv .a3 b{color:#B45309}

/* Product media: 1:1 crop for the main image and gallery thumbnails */
.single-product .pd-media .im img{object-fit:cover}
.single-product .pd-thumbs .tn img{width:100%;height:100%;object-fit:cover}

/* Product Tags tab: restore the V19 chip/pill styling */
.pd-tags .chip{background:var(--blue-l);color:var(--blue);border:1px solid transparent}
.pd-tags .chip:nth-child(3n+2){background:var(--cyan-l);color:var(--cyan-d)}
.pd-tags .chip:nth-child(3n){background:#fff;color:var(--ink2);border-color:var(--line)}

/* Product media feature strip: center icon + label in each cell */
body .pd-feats>span{justify-content:center;text-align:center}

/* Product detail: slightly more generous body leading */
.pd-side .pd-lead{line-height:1.85}
.pd-adv p{line-height:1.8}

/* Coded product-description blocks (replace image-only description) */
.desc-wrap{display:grid;gap:22px}
.desc-block{border:1px solid var(--line);border-radius:14px;padding:26px 28px;background:#fff}
.desc-block>h3{margin:0 0 10px;font:800 clamp(18px,1.6vw,22px)/1.35 var(--fh);letter-spacing:-.2px;color:var(--ink)}
.desc-block>p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.9}
.desc-block .desc-note{margin:12px 0 0;color:var(--ink3);font-size:12.5px;line-height:1.75}
.desc-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
.desc-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.desc-table th,.desc-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.75}
.desc-table th{background:var(--soft);color:var(--ink);font-weight:700}
.desc-table td:first-child{color:var(--ink2);width:34%}
.desc-table td:last-child{color:var(--ink2)}
.desc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.desc-card{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--soft)}
.desc-card b{display:block;font:700 14px/1.45 var(--fh);color:var(--ink)}
.desc-card span{display:block;margin-top:6px;color:var(--ink3);font-size:12.5px;line-height:1.65}
.desc-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.desc-metric{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.desc-metric b{display:block;font:800 24px/1.15 var(--fh);color:var(--blue)}
.desc-metric span{display:block;margin-top:6px;color:var(--ink3);font-size:12.5px;line-height:1.6}
.desc-bars{display:grid;gap:12px;margin-top:16px}
.desc-bar{display:grid;grid-template-columns:170px 1fr 74px;gap:12px;align-items:center;font-size:13.5px;color:var(--ink2)}
.desc-bar i{display:block;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--blue),#4A9BE8);width:var(--w,50%)}
.desc-bar em{font-style:normal;color:var(--ink);text-align:right;font-weight:700}
@media(max-width:900px){.desc-cols,.desc-grid{grid-template-columns:1fr 1fr}.desc-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.desc-block{padding:20px 18px}.desc-cols,.desc-grid,.desc-metrics{grid-template-columns:1fr}.desc-bar{grid-template-columns:1fr;gap:6px}.desc-bar em{text-align:left}.desc-table{font-size:13px}}

/* Reference-style product description */
.pd-desc-head{max-width:920px;margin:0 0 24px}
.pd-desc-head h2{margin:0 0 8px;font:800 clamp(26px,2.4vw,34px)/1.2 var(--fh);letter-spacing:-.4px;color:var(--ink)}
.pd-desc-head p{margin:0;color:var(--ink3);font-size:15px;line-height:1.85}
.pd-key{background:#0B2447;color:#fff;border-radius:14px;padding:30px 34px;margin:0 0 40px}
.pd-key h3{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:800 22px/1.3 var(--fh);color:#fff}
.pd-key h3:before{content:"★";color:#E60012;font-size:20px;line-height:1}
.pd-key ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.pd-key li{position:relative;padding-left:28px;color:rgba(255,255,255,.92);font-size:14.5px;line-height:1.8}
.pd-key li:before{content:"✓";position:absolute;left:0;top:0;color:#22C55E;font-weight:800}
.pd-key b{color:#fff;font-weight:700;border-bottom:2px solid #E60012;padding-bottom:1px}
.pd-sec{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:38px 0}
.pd-sec.rev .pd-sec-media{order:1}
.pd-sec.rev .pd-sec-copy{order:2}
.pd-sec-copy h3{margin:0 0 12px;font:800 clamp(20px,1.9vw,26px)/1.25 var(--fh);letter-spacing:-.3px;color:var(--ink)}
.pd-sec-copy p{margin:0 0 16px;color:var(--ink2);font-size:14.5px;line-height:1.9}
.pd-sec-copy ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pd-sec-copy li{position:relative;padding-left:20px;color:var(--ink2);font-size:14px;line-height:1.8}
.pd-sec-copy li:before{content:"›";position:absolute;left:0;top:0;color:var(--cyan);font-weight:800}
.pd-sec-media{margin:0}
.pd-sec-media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--soft)}
.pd-sec-media figcaption{margin-top:9px;color:var(--ink3);font-size:12.5px;line-height:1.6;text-align:center}
.pd-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:14px}
.pd-spec-table{width:100%;border-collapse:collapse;font-size:14px}
.pd-spec-table th,.pd-spec-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;line-height:1.75}
.pd-spec-table th{font:700 13px var(--fh);letter-spacing:.04em;color:var(--ink);background:var(--soft)}
.pd-spec-table td:first-child{color:var(--ink3);width:38%}
.pd-spec-table td:last-child{color:var(--ink2)}
.pd-app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.pd-app{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--soft)}
.pd-app b{display:block;font:700 14px/1.45 var(--fh);color:var(--ink)}
.pd-app span{display:block;margin-top:6px;color:var(--ink3);font-size:12.5px;line-height:1.65}
.pd-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.pd-rel{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.pd-rel b{display:block;font:800 23px/1.15 var(--fh);color:var(--blue)}
.pd-rel span{display:block;margin-top:6px;color:var(--ink3);font-size:12.5px;line-height:1.6}
.pd-desc-cta{margin:28px 0 0}
@media(max-width:900px){.pd-sec{grid-template-columns:1fr;gap:24px;margin:30px 0}.pd-sec.rev .pd-sec-media,.pd-sec.rev .pd-sec-copy{order:0}.pd-sec-media img{aspect-ratio:4/3}.pd-spec-grid,.pd-app-grid,.pd-rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pd-key{padding:22px 20px}.pd-key li{font-size:13.5px}.pd-spec-grid,.pd-app-grid,.pd-rel-grid{grid-template-columns:1fr}.pd-sec-media img{aspect-ratio:1/1}}