/* ==========================================================
   ANLYA 企业官网样式
   设计基调：深色科技感 Hero + 浅底内容区，单一强调色
   ========================================================== */
:root{
  --acc:#00A2BB;          /* 主强调 视频青 */
  --acc-d:#00778A;
  --acc-l:#3EDCF0;
  --kvm:#7B45D6;          /* KVM 反向通道 */
  --hot:#E8712F;          /* 热门标记 */
  --ink:#0C1922;          /* 主文字 */
  --ink2:#3A4C57;         /* 次文字 */
  --mute:#7C909C;         /* 辅助 */
  --line:#E1EAEF;
  --bg:#FFFFFF;
  --bg2:#F5F9FB;          /* 浅色分区 */
  --dark:#0A1620;         /* 深色分区 */
  --dark2:#0E2430;
  --tint:#E8F5F8;
  --radius:12px;
  --wrap:1200px;
  --shadow:0 18px 44px -26px rgba(12,25,34,.28);
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,
         "PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);font-size:16px;line-height:1.7;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}

/* 跳转到主内容：无障碍 */
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--acc);
  color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- 顶栏 ---------- */
.hdr{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:28px;height:66px}
/* 菜单栏 logo：用户 10-30 设计的图（原图 543×158，4K 175% 屏下仍够清晰） */
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:40px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  padding:9px 14px;border-radius:8px;font-size:14.5px;font-weight:500;
  color:var(--ink2);transition:.16s;white-space:nowrap;
}
.nav a:hover{background:var(--tint);color:var(--acc-d)}
.nav a.on{color:var(--acc-d);font-weight:700}
/* 顶栏「产品中心」下拉（10-30）：电脑端悬停 / 聚焦展开，按品类分栏列出型号 */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd>a{padding-right:4px}
.dd-t{display:flex;align-items:center;justify-content:center;width:22px;height:30px;margin-left:-2px;border:0;
  background:none;color:var(--ink2);cursor:pointer;border-radius:6px}
.dd-t svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.dd-p{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);padding-top:10px;z-index:60;
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s}
.dd-in{display:grid;grid-template-columns:repeat(2,minmax(190px,auto));gap:6px 30px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:18px 22px 14px;box-shadow:0 24px 48px -24px rgba(12,25,34,.35)}
.nav-dd:hover .dd-p,.nav-dd:focus-within .dd-p,.nav-dd.open .dd-p{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dd:hover .dd-t svg,.nav-dd.open .dd-t svg{transform:rotate(180deg)}
.dd-in.w{grid-template-columns:repeat(3,minmax(210px,auto))}
.nav .dd-c a{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 0;border-radius:0;color:var(--ink2)}
.nav .dd-c a:hover{background:none;color:var(--acc-d)}
.nav .dd-c .dd-k{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.nav .dd-in.w .dd-k{font-family:var(--mono)}
.nav .dd-c small{font-size:12px;color:var(--mute);font-weight:500;white-space:nowrap}
.nav .dd-c a:hover small{color:var(--acc-d)}
.nav .dd-c .dd-h{display:block;font-family:var(--font);font-weight:700;color:var(--ink);font-size:13.5px;
  border-bottom:1px solid var(--line);padding:5px 0 7px;margin-bottom:3px}
.nav .dd-c em{font-style:normal;font-family:var(--font);font-size:10.5px;font-weight:700;color:#fff;background:#E8712F;
  padding:1px 6px;border-radius:99px}
.nav a.dd-all{grid-column:1/-1;margin-top:8px;padding:10px 0 2px;border-top:1px solid var(--line);border-radius:0;
  font-size:13.5px;font-weight:600;color:var(--acc-d)}
.nav a.dd-all:hover{background:none}
.hdr-act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lang{
  display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.lang button{
  padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--mute);
  font-family:var(--mono);transition:.16s;
}
.lang button.on{background:var(--acc);color:#fff}
.lang button:not(.on):hover{background:var(--bg2);color:var(--ink)}
.burger{display:none;width:42px;height:42px;border-radius:8px;
  align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--ink);
  position:relative;transition:.2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
  transition:.2s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg)}
.burger.open span::after{top:0;transform:rotate(-45deg)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 24px;
  border-radius:9px;font-size:15px;font-weight:600;transition:.18s;
  white-space:nowrap;
}
.btn-p{background:var(--acc);color:#fff;box-shadow:0 8px 22px -12px rgba(0,162,187,.7)}
.btn-p:hover{background:var(--acc-d);transform:translateY(-1px)}
.btn-o{border:1.5px solid rgba(255,255,255,.34);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-g{border:1.5px solid var(--line);color:var(--ink2)}
.btn-g:hover{border-color:var(--acc);color:var(--acc-d);background:var(--tint)}
.btn-sm{padding:9px 16px;font-size:13.5px}

/* ---------- Hero ----------
   背景三层：底色渐变 → 背景层（光晕 / 图片 / 视频，后台可换）→ 网格
   --hero-img 由服务端按后台设置写入，首屏直接带图，不等 JS */
.hero{
  position:relative;overflow:hidden;color:#EAF6FA;isolation:isolate;--ov:.6;
  background:
    radial-gradient(90% 120% at 82% 12%, rgba(0,162,187,.3) 0%, transparent 58%),
    linear-gradient(145deg,#0A1620 0%,#0C2632 48%,#081520 100%);
}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:var(--hero-img,none) center/cover no-repeat}
.hero-bg .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg video.hbg{opacity:0;transition:opacity .9s ease}
.hero-bg video.hbg.on{opacity:1}
/* 有图或视频时加暗化遮罩，保证文字对比度；左侧更暗，文字区更清楚 */
.hero.has-media .hero-bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,21,32,calc(var(--ov) + .18)) 0%,
    rgba(8,21,32,var(--ov)) 55%,rgba(8,21,32,calc(var(--ov) - .12)) 100%)}
.hero.has-media .aur{display:none}
/* 默认背景：两团缓慢漂移的光晕，纯 CSS 零下载，只动 transform */
.aur{position:absolute;border-radius:50%;will-change:transform;pointer-events:none}
.aur.a1{width:640px;height:640px;top:-260px;right:-140px;
  background:radial-gradient(circle,rgba(0,162,187,.42) 0,rgba(0,162,187,0) 66%);
  animation:aur1 20s ease-in-out infinite alternate}
.aur.a2{width:520px;height:520px;bottom:-300px;left:6%;
  background:radial-gradient(circle,rgba(123,69,214,.26) 0,rgba(123,69,214,0) 66%);
  animation:aur2 26s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate3d(-120px,90px,0) scale(1.12)}}
@keyframes aur2{to{transform:translate3d(160px,-70px,0) scale(.9)}}
/* 背景射频网格 */
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(62,220,240,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(62,220,240,.07) 1px,transparent 1px);
  background-size:52px 52px;
  mask:radial-gradient(70% 62% at 66% 38%,#000 8%,transparent 74%);
}
/* 首屏 banner：整图展示，不裁不压暗。10-30 新图是带支架的显示器（约 1.24:1，支架两侧透明），
   所以不再给矩形底色和盒阴影（会在透明处露出一块深色方框），改用沿图形边缘的 drop-shadow；
   宽度限制在 960px 居中，否则竖向太高，标题被挤到第二屏 */
.hero-banner{position:relative;padding-top:28px}
.hero-banner picture,.hero-banner img{display:block;width:100%;height:auto}
.hero-banner picture{max-width:960px;margin:0 auto}
.hero-banner img{aspect-ratio:2792/2253;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
.hero-in{position:relative;padding-top:40px;padding-bottom:30px;display:grid;
  grid-template-columns:1fr;gap:28px;align-items:center}
.hero-copy{max-width:820px}
.hero-foot{position:relative;padding-bottom:58px}
.hero-foot .hero-stats{grid-template-columns:repeat(4,1fr)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc-l);
  font-family:var(--mono);margin-bottom:17px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--acc-l)}
.hero h1{font-size:clamp(34px,4.6vw,55px);line-height:1.14;font-weight:800;
  letter-spacing:-.02em;margin-bottom:19px}
.hero h1 em{font-style:normal;color:var(--acc-l)}
.hero p.lead{font-size:16.5px;line-height:1.82;color:#A9C9D4;max-width:56ch;
  margin-bottom:30px}
.hero-btns{display:flex;gap:13px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.stat{
  background:rgba(255,255,255,.055);border:1px solid rgba(62,220,240,.22);
  border-radius:var(--radius);padding:21px 22px;backdrop-filter:blur(3px);
  transition:.2s;
}
.stat:hover{background:rgba(255,255,255,.09);border-color:rgba(62,220,240,.44);
  transform:translateY(-2px)}
.stat b{display:block;font-size:31px;font-weight:800;color:var(--acc-l);
  line-height:1;letter-spacing:-.01em}
.stat span{display:block;font-size:12.5px;color:#9FC2CE;margin-top:9px;line-height:1.45}

/* ---------- 通用分区 ---------- */
.sec{padding:78px 0}
.sec.alt{background:var(--bg2)}
.sec.dk{background:var(--dark);color:#EAF6FA}
.sec-hd{max-width:74ch;margin-bottom:38px}
.sec-hd.mid{margin-left:auto;margin-right:auto;text-align:center}
.kicker{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);font-family:var(--mono);margin-bottom:12px;
}
.sec h2{font-size:clamp(25px,3vw,35px);line-height:1.24;font-weight:800;
  letter-spacing:-.015em;margin-bottom:14px}
.sec.dk h2{color:#fff}
.sec-hd p{font-size:16px;color:var(--ink2);line-height:1.8}
.sec.dk .sec-hd p{color:#A9C9D4}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g5 .card{padding:24px 20px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;transition:.2s;display:flex;flex-direction:column;gap:11px;
}
.card:hover{border-color:var(--acc);box-shadow:var(--shadow);transform:translateY(-3px)}
.card .ico{
  width:44px;height:44px;border-radius:10px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;color:var(--acc-d);
  margin-bottom:5px;
}
.card .ico svg{width:23px;height:23px}
.card h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--ink2);line-height:1.74}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.chip{
  font-size:11.5px;font-weight:600;font-family:var(--mono);padding:4px 9px;
  border-radius:5px;background:var(--tint);color:var(--acc-d);
  border:1px solid rgba(0,162,187,.2);white-space:nowrap;
}
.chip.k{background:#F1EAFC;color:#5D2BB0;border-color:rgba(123,69,214,.2)}
.chip.h{background:#FDEEE4;color:#B4551C;border-color:rgba(232,113,47,.22)}
/* 距离方案：顶部选产品型号，卡片显示 TX + RX + Wi-Fi 组合 */
.sku-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.sku-bar .sku-lbl{font-size:13px;font-weight:700;color:var(--ink2);margin-right:4px}
.sku-bar button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 15px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);transition:.16s}
.sku-bar button b{font:800 15px var(--mono)}
.sku-bar button small{font:600 11.5px var(--mono);color:var(--mute)}
.sku-bar button:hover{border-color:var(--acc)}
.sku-bar button.on{border-color:var(--acc);background:var(--tint);box-shadow:0 0 0 3px rgba(0,162,187,.14)}
.sku-bar button.on b{color:var(--acc-d)}
.sku-bar .sku-note{flex-basis:100%;text-align:center;font-size:12.5px;color:var(--mute)}
.combo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 12.5px var(--mono);color:var(--ink2)}
.combo span{padding:3px 8px;border-radius:6px;background:var(--bg2);border:1px solid var(--line)}
.combo span.w{background:var(--tint);color:var(--acc-d);border-color:rgba(0,162,187,.25)}
.combo i{font-style:normal;color:var(--mute)}
.mod-grp{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:18px;font-weight:800;
  margin:30px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.mod-grp:first-child{margin-top:0}
.mod-grp small{font-size:13px;font-weight:500;color:var(--mute)}
.card.wired .combo span.w{background:#F1EAFC;color:#5D2BB0;border-color:rgba(123,69,214,.25)}
.card.wired h3{color:#5D2BB0!important}
.mod-na{font-size:14px;color:var(--ink2);background:var(--bg2);border:1px dashed var(--line);
  border-radius:10px;padding:16px 18px}
.badge{
  display:inline-block;font-size:11px;font-weight:700;padding:4px 9px;
  border-radius:99px;background:var(--hot);color:#fff;letter-spacing:.04em;
}
.badge.q{background:var(--acc)}

/* ---------- 产品卡 ---------- */
.pcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s;display:flex;flex-direction:column;
}
.pcard:hover{border-color:var(--acc);box-shadow:var(--shadow);transform:translateY(-3px)}
.pcard .fig{
  aspect-ratio:16/10;background:linear-gradient(140deg,#F0F7F9,#E2EFF3);
  display:flex;align-items:center;justify-content:center;padding:22px;
  border-bottom:1px solid var(--line);position:relative;
}
.pcard .fig img,.pcard .fig svg{max-height:100%;width:auto}
.pcard .role{
  position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:11px;
  font-weight:700;padding:4px 9px;border-radius:5px;background:var(--acc);color:#fff;
}
.pcard .bd{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard .sku{font-family:var(--mono);font-size:12px;color:var(--mute);font-weight:600}
.pcard h3{font-size:18.5px;font-weight:700;line-height:1.35}
.pcard p{font-size:14.5px;color:var(--ink2);line-height:1.7}
.pcard .more{
  margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--acc-d);
  display:inline-flex;align-items:center;gap:6px;
}
.pcard:hover .more{gap:10px}

/* ---------- 链路框图 ---------- */
.flow{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;
}
.flow .nd{
  flex:1 1 0;min-width:96px;border:1.5px solid var(--line);border-radius:9px;
  background:#fff;padding:12px 9px;text-align:center;font-size:13px;font-weight:600;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}
.flow .nd.m{border-color:var(--acc);border-width:2px;background:var(--tint);
  color:var(--acc-d)}
.flow .nd.air{border-style:dashed;border-color:var(--acc);color:var(--acc);
  background:#fff;flex:0 0 auto;min-width:78px}
.flow .nd.k{border-color:var(--kvm);background:#F1EAFC;color:#5D2BB0}
.flow .ar{
  flex:0 0 auto;width:30px;display:flex;align-items:center;justify-content:center;
  color:var(--acc);font-size:16px;font-weight:700;
}
.flow .ar.k{color:var(--kvm)}

/* ---------- 两种工作模式示意图 ----------
   宽屏用 SVG 横向图；窄屏 SVG 字太小，换成竖排的步骤列表 */
.mode-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mode-tag{font:800 12.5px var(--mono);letter-spacing:.06em;color:#fff;background:var(--acc);
  padding:4px 10px;border-radius:6px}
.mode-tag.b{background:#5D2BB0}
.mdiag{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 14px;margin:0 0 14px}
.mdiag svg{width:100%;height:auto;display:block}
.mdiag text{font-family:var(--font);text-anchor:middle;fill:var(--ink)}
.mdiag .t1{font-size:17px;font-weight:800}
.mdiag .t2{font-size:14px;font-weight:600;fill:var(--ink2)}
.mdiag .t3{font-size:12.5px;font-family:var(--mono);fill:var(--mute)}
.mdiag .md-box rect{fill:#fff;stroke:var(--line);stroke-width:1.5}
.mdiag .md-box.m rect{fill:var(--tint);stroke:var(--acc);stroke-width:2}
.mdiag .md-box.m .t1{fill:var(--acc-d)}
.mdiag .md-box.n rect{fill:#fff;stroke:#7B8C96;stroke-width:1.5;stroke-dasharray:5 4}
.mdiag .md-air path{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round}
.mdiag .md-air .w2{opacity:.55}
.mdiag .md-air .air{fill:var(--acc-d)}
.mdiag .md-lane line{stroke-width:2.4}
.mdiag .md-lane.v line{stroke:var(--acc)}
.mdiag .md-lane.k line{stroke:var(--kvm);stroke-dasharray:7 5}
.mdiag .lg{font-size:13px;font-weight:700}
.mdiag .lg.v{fill:var(--acc-d)}
.mdiag .lg.k{fill:#5D2BB0}
.mdiag .md-cable{fill:none;stroke:#4C5F6B;stroke-width:3;stroke-linejoin:round}
.mdiag .md-fiber{fill:none;stroke:#E8712F;stroke-width:4;stroke-linecap:round}
.mdiag .fb{fill:#B4551C;font-weight:600}
.mdiag .or{font-size:13px;font-weight:700;fill:var(--mute)}
.md-leg{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--ink2)}
.md-leg span{display:inline-flex;align-items:center;gap:7px}
.md-leg span::before{content:"";width:22px;height:0;border-top:2.5px solid var(--acc)}
.md-leg .k::before{border-top:2.5px dashed var(--kvm)}
.md-leg .n::before{width:9px;height:9px;border:0;border-radius:50%;background:#E8712F}
.md-tall{display:none;list-style:none;margin:0;padding:0}
.md-tall li{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;
  text-align:center;position:relative;margin-bottom:22px}
.md-tall li:last-child{margin-bottom:0}
.md-tall li:not(:last-child)::after{content:"⇅";position:absolute;left:50%;bottom:-21px;
  transform:translateX(-50%);color:var(--acc);font-weight:700}
.md-tall li.m{background:var(--tint);border-color:var(--acc);border-width:2px}
.md-tall li.air{border-style:dashed;border-color:var(--acc)}
.md-tall li.net{border-style:dashed;border-color:#7B8C96}
.md-tall b{display:block;font-size:14.5px}
.md-tall small{display:block;font:12px var(--mono);color:var(--mute);margin-top:2px}
.md-tall em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--mute);margin:7px 0}
/* 900 px 以下 SVG 最小字号不到 10 px，看不清，改为竖排列表 */
@media (max-width:900px){
  .mdiag .md-wide{display:none}
  .md-tall{display:block}
}

/* ---------- 规格表 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th{
  background:var(--acc-d);color:#fff;text-align:left;padding:13px 16px;
  font-size:13.5px;font-weight:700;
}
.tbl td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink2)}
.tbl tbody tr:nth-child(odd){background:var(--bg2)}
.tbl td:first-child{font-weight:600;color:var(--ink);width:36%}
.tbl .mono{font-family:var(--mono);font-size:13.5px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 产品中心「无线视频模块对照」：所有列等宽、居中。
   列宽由 products.html 的 cmp() 按最长单元格算出来（--cw），整表宽 = 列数 × 列宽，
   比容器窄时居中，比容器宽时在 .tbl-wrap 里横向滚动。只作用于这张表，不影响产品页规格表 */
.tbl.tbl-cmp{table-layout:fixed;width:calc(var(--cw,160px) * var(--cols,7));max-width:none;margin:0 auto}
.tbl.tbl-cmp th,.tbl.tbl-cmp td{width:var(--cw,160px);text-align:center;vertical-align:middle;
  padding:12px 12px;line-height:1.55;word-break:break-word}
.tbl.tbl-cmp tbody th{width:var(--cw,160px);font-weight:600;color:var(--ink);background:transparent;border-top:1px solid var(--line);font-size:14.5px}
.tbl.tbl-cmp th a{color:inherit;text-decoration:none}
.tbl.tbl-cmp th a:hover{text-decoration:underline}
.tbl.tbl-cmp th .badge{display:inline-block}
/* 手机版对照卡片：宽屏隐藏，窄屏（表格放不下）替代表格 */
.cmp-cards{display:none}
@media (max-width:820px){
  .cmp-wide{display:none}
  .cmp-cards{display:grid;gap:14px}
  .cmc-tabs{display:flex;gap:8px;position:sticky;top:64px;z-index:2;background:var(--bg2);padding:6px 0}
  .cmc-tabs button{flex:1;padding:11px 8px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
    font:700 15px var(--mono);color:var(--ink2);cursor:pointer}
  .cmc-tabs button[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
  /* 有 JS 时只显示选中的系列；没 JS（爬虫）全显示 */
  .js-on .cmp-cards .cmc{display:none}
  .js-on .cmp-cards .cmc.on{display:block}
  html:not(.js-on) .cmc-tabs{display:none}
  .cmc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .cmc-h{display:grid;grid-template-columns:1fr;background:var(--ink);color:#fff}
  .cmc.two .cmc-h{grid-template-columns:1fr 1fr}
  .cmc-sku{display:flex;flex-direction:column;padding:12px 14px;color:#fff;text-decoration:none}
  .cmc.two .cmc-sku+.cmc-sku{border-left:1px solid rgba(255,255,255,.14)}
  .cmc-sku b{font:800 17px var(--mono);color:#3EDCF0}
  .cmc-sku span{font-size:12px;color:#9FB8C2;margin-top:2px}
  .cmc-r{display:grid;grid-template-columns:1fr;gap:2px 12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13.5px}
  .cmc-r:nth-child(even){background:var(--bg2)}
  .cmc-k{font-size:12px;color:var(--mute);font-weight:600}
  .cmc.two .cmc-r:not(.same){grid-template-columns:1fr 1fr}
  .cmc.two .cmc-r:not(.same) .cmc-k{grid-column:1 / -1}
  .cmc-v{font-family:var(--mono);color:var(--ink);line-height:1.5;word-break:break-word}
  .cmc.two .cmc-r:not(.same) .cmc-v+.cmc-v{border-left:1px solid var(--line);padding-left:12px}
}

/* ---------- 表单 ---------- */
.form{display:grid;gap:17px}
.f2{grid-template-columns:repeat(2,1fr)}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:13.5px;font-weight:600;color:var(--ink)}
.fld label i{color:#D64545;font-style:normal;margin-left:2px}
.fld input,.fld select,.fld textarea{
  font-family:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);transition:.16s;width:100%;
}
.fld textarea{min-height:124px;resize:vertical;line-height:1.7}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,162,187,.13)}
.fld .hint{font-size:12.5px;color:var(--mute)}
.fld.err input,.fld.err select,.fld.err textarea{border-color:#D64545}
.fld .msg{font-size:12.5px;color:#D64545;display:none}
.fld.err .msg{display:block}
.note{
  background:var(--tint);border-left:4px solid var(--acc);border-radius:8px;
  padding:15px 18px;font-size:14px;color:var(--acc-d);line-height:1.7;
}
.alert{padding:14px 18px;border-radius:9px;font-size:14.5px;font-weight:600;display:none}
.alert.ok{background:#E6F6EF;color:#0F7A54;border:1px solid #BFE8D6;display:block}
.alert.no{background:#FDECEC;color:#B03030;border:1px solid #F5C9C9;display:block}

/* ---------- CTA 区 ---------- */
.cta{
  background:linear-gradient(135deg,var(--acc-d) 0%,#005E6E 52%,#004A58 100%);
  color:#fff;border-radius:16px;padding:48px 44px;position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:rgba(62,220,240,.15);
}
.cta h2{font-size:clamp(23px,2.6vw,31px);color:#fff;margin-bottom:12px;position:relative}
.cta p{font-size:16px;color:#C9EAF0;max-width:62ch;margin-bottom:26px;position:relative}
.cta .btn{position:relative}
.cta .btn-p{background:#fff;color:var(--acc-d)}
.cta .btn-p:hover{background:#EAF6FA}

/* 定制能力条 */
.custom-bar{
  background:var(--tint);border:1.5px solid rgba(0,162,187,.3);
  border-radius:var(--radius);padding:24px 28px;text-align:center;
}
.custom-bar h3{font-size:17px;font-weight:700;color:var(--acc-d);margin-bottom:9px}
.custom-bar p{font-size:14.5px;color:var(--ink2);line-height:1.8;max-width:92ch;
  margin:0 auto}

/* ---------- 页脚 ---------- */
.ftr{background:var(--dark);color:#8FB0BD;padding:56px 0 28px;font-size:14px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;
  padding-bottom:34px;border-bottom:1px solid rgba(143,176,189,.17)}
.ftr h4{font-size:13px;font-weight:700;color:#fff;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:15px}
.ftr a{color:#8FB0BD;transition:.16s;display:block;padding:4px 0}
.ftr a:hover{color:var(--acc-l)}
.ftr .fb b{font-size:22px;font-weight:800;letter-spacing:.14em;color:var(--acc-l);
  display:block;margin-bottom:5px}
.ftr .fb span{font-size:12px;font-family:var(--mono);color:#6B8B98;
  letter-spacing:.06em;display:block;margin-bottom:14px}
.ftr .fb p{font-size:13.5px;line-height:1.8;max-width:38ch}
.ftr-btm{padding-top:22px;display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;
  color:#6B8B98;align-items:center}
.ftr-btm .r{margin-left:auto}
/* 手机页脚（10-30 用户：「底部导航栏太长了，重新排版缩短」）：
   原来四栏一栏一行竖排，390 宽手机上约 910px 高。现在品牌一行、导航和品类左右两栏、联系方式一行横排，
   链接只缩字号和间距，一个都没删（页脚链接也是爬虫的入口） */
@media (max-width:820px){
  .ftr{padding:30px 0 18px;font-size:13px}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:18px 16px;padding-bottom:18px}
  .ftr .fb{grid-column:1/-1}
  .ftr .fb b{font-size:18px;margin-bottom:2px}
  .ftr .fb span{margin-bottom:6px;font-size:11px}
  .ftr .fb p{font-size:12.5px;line-height:1.6;max-width:none}
  .ftr .fb p+p{display:none}
  .ftr h4{font-size:12px;margin-bottom:6px}
  .ftr .fn a,.ftr .fc a{padding:3px 0}
  .ftr .fk{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
  .ftr .fk h4{width:100%;margin-bottom:2px}
  .ftr .fk span{padding:0 !important}
  .ftr .fk a{padding:9px 0 !important}
  .ftr-btm{padding-top:12px;gap:6px 14px;font-size:12px}
  .ftr-btm .r{margin-left:0}
}

/* ---------- 滚动渐显 ----------
   .rv 只由 JS 加在首屏以下的元素上：爬虫和无 JS 环境看到的永远是完整内容 */
.rv{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.hdr{transition:box-shadow .2s,background .2s}
.hdr.scrolled{box-shadow:0 10px 28px -20px rgba(12,25,34,.45);background:rgba(255,255,255,.95)}
.mode-h{font-size:17px;font-weight:700;margin:0 0 12px}
/* 首屏以下的区块延后渲染，长页面滚动更顺 */
.home .sec{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* ---------- 关键事实条 ---------- */
.proof{background:#fff;border-bottom:1px solid var(--line)}
.proof-in{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.proof-in>div{padding:24px 18px;display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--line)}
.proof-in>div:first-child{border-left:0;padding-left:0}
.proof b{font:800 clamp(19px,2vw,25px) var(--mono);color:var(--acc-d);letter-spacing:-.02em;white-space:nowrap}
.proof span{font-size:13px;color:var(--ink2);line-height:1.45}
@media (max-width:1024px){.proof-in{grid-template-columns:repeat(3,1fr)}
  .proof-in>div:nth-child(4){border-left:0;padding-left:0}}
@media (max-width:520px){.proof-in{grid-template-columns:1fr 1fr}
  .proof-in>div{padding:16px 12px;border-left:0;border-top:1px solid var(--line)}
  .proof-in>div:nth-child(odd){padding-left:0}
  .proof-in>div:nth-child(-n+2){border-top:0}
  .proof-in>div:last-child{grid-column:1/-1}}

/* ---------- 方案详情页 ---------- */
.phd #s-badge{margin-bottom:12px}
.sd-pain{position:relative;padding-top:26px}
.sd-n{font:800 13px var(--mono);color:#E8712F;letter-spacing:.06em}
.sd-pain h3{margin-top:2px}
.sd-flow{margin-bottom:26px}
.sd-sol .card h3{color:var(--acc-d)}
.sd-tags{grid-column:1/-1;margin-top:4px}
.sd-sel{list-style:none;counter-reset:s;margin:0;padding:0}
.sd-sel li{counter-increment:s;position:relative;padding:12px 0 12px 40px;border-bottom:1px solid var(--line);
  font-size:15px;color:var(--ink2);line-height:1.75}
.sd-sel li::before{content:counter(s);position:absolute;left:0;top:13px;width:26px;height:26px;border-radius:50%;
  background:var(--tint);color:var(--acc-d);font:700 13px/26px var(--mono);text-align:center}
/* ---------- 产品详情正文（product-render.js） ---------- */
.pd-intro p{font-size:16px;color:var(--ink2);line-height:1.9;margin:0 0 14px}
.pd-sub{font-size:17px;font-weight:700;margin:6px 0 12px}
.pd-ov .chips{padding-top:0}
.pd-ov .chip{font-size:13px;padding:6px 11px}
.mdiag .md-box.me rect{fill:#00A2BB;stroke:#00778A}
.mdiag .md-box.me text,.mdiag .md-box.me .t1{fill:#fff}
.md-leg .me::before{width:12px;height:12px;border:0;border-radius:3px;background:var(--acc)}
.md-leg .lo::before{border-top:2.5px solid #E8712F}
.pd-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.pd-cmp-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pd-cmp-col.on{border:2px solid var(--acc)}
.pd-cmp-h{display:flex;align-items:baseline;gap:12px;padding:16px 20px;background:var(--bg2);border-bottom:1px solid var(--line)}
.pd-cmp-h b{font:800 24px var(--mono);color:var(--acc-d)}
.pd-cmp-h span{font:600 13px var(--mono);color:var(--mute)}
.pd-cmp-h em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--acc);padding:3px 9px;border-radius:5px}
.pd-cmp-r{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid var(--line);font-size:14.5px}
.pd-cmp-r:first-of-type{border-top:0}
.pd-cmp-r span{color:var(--mute)}
.pd-cmp-r b{color:var(--ink);text-align:right}
.mdiag .md-lane .lo{stroke:#E8712F}
.mdiag .pd-lo{fill:#B4551C}
.mdiag .pd-k{text-anchor:start;fill:var(--acc-d)}
.mdiag text.pd-r{text-anchor:start}
.mdiag .pd-sep{stroke:var(--line);stroke-dasharray:4 5}
.pd-note{font-size:14.5px;color:var(--ink2);line-height:1.8;margin:6px 0 0}
.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;align-items:start}
.pd-grp h3{font-size:17px;font-weight:700;margin:0 0 10px;padding-left:10px;border-left:3px solid var(--acc)}
.pd-grp .tbl th{text-align:left;font-weight:600;color:var(--ink);width:30%;padding:11px 14px;
  border-top:1px solid var(--line);background:none;font-size:14px;vertical-align:top}
.pd-grp .tbl td{padding:11px 14px;font-size:14px;line-height:1.65}
.pd-grp .tbl td.tbd{color:var(--mute)}
.pd-outline svg{max-width:820px;margin:0 auto}
.mdiag .pd-pcb{fill:#1F5E3A;stroke:#123A24;stroke-width:2}
.mdiag .pd-shield{fill:#C9D3D8;stroke:#9AA8AF;stroke-width:1.5}
.mdiag .pd-fing rect{fill:#D9A93B}
.mdiag .pd-hole{fill:#fff;stroke:#D9A93B;stroke-width:4}
.mdiag .pd-dim line{stroke:var(--ink2);stroke-width:1.4}
.mdiag .pd-dt{fill:var(--ink)}
.mdiag text.pd-on{fill:#DDE8E2}
@media (max-width:820px){
  .pd-cmp,.pd-specs{grid-template-columns:1fr}
  .pd-grp .tbl th{width:38%}
}
/* 手机上环出示意图缩到字看不清，上面的对比卡已写明区别，隐藏 */
@media (max-width:600px){.pd-lo-fig{display:none}}
.sol-card .more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--acc-d)}
.sol-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 手机端方案卡片（10-30 用户：「框框在手机端看有点长，缩小点改成 2 列」）：
   首页方案开发、方案页底部「其他方案应用」、产品页相关方案都用这套卡片。
   两列时每格只有约 160px 宽，痛点长句放不下，只留标签、标题和「查看详情」；痛点在详情页里看 */
@media (max-width:820px){
  .grid.sol-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .sol-card{padding:14px 13px 13px;gap:6px;border-radius:10px}
  .sol-card .badge{font-size:10.5px;padding:2px 7px}
  .sol-card h3{font-size:14.5px !important;line-height:1.4;margin-top:2px !important}
  .sol-card p{display:none}
  .sol-card .more{font-size:12.5px;padding-top:4px}
  .sol-card:hover{transform:none}
}

/* ---------- 推荐组合（距离方案板块最下方）----------
   宽屏两栏：左边型号组合 + 按钮，右边参数；窄屏上下排 */
.sel-r{margin-top:26px;background:linear-gradient(160deg,#0C2632,#0A1620);color:#EAF6FA;
  border-radius:16px;padding:26px 28px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:36px;align-items:start}
.sel-r:empty{display:none}
.sel-r .sr-hd{grid-column:1/-1}
.sel-r .sr-l{grid-column:1;grid-row:2/span 10;display:flex;flex-direction:column}
.sel-r .sr-rows{grid-column:2;grid-row:2/span 10}
/* 距离卡片可点选 */
.card.pick{cursor:pointer;position:relative}
.card.pick:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.card.pick.on{border-color:var(--acc);border-width:2px;box-shadow:0 0 0 4px rgba(0,162,187,.14),var(--shadow)}
.card.pick.wired.on{border-color:#7B45D6;box-shadow:0 0 0 4px rgba(123,69,214,.16),var(--shadow)}
.card.pick.on::after{content:"✓";position:absolute;top:12px;right:14px;width:24px;height:24px;border-radius:50%;
  background:var(--acc);color:#fff;font:700 13px/24px var(--font);text-align:center}
.card.pick.wired.on::after{background:#7B45D6}
.mod-tip{text-align:center;font-size:13px;color:var(--mute);margin-top:16px}
.sr-hd{display:flex;align-items:center;gap:10px;font:700 12px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-l);margin-bottom:14px}
.sr-set{display:flex;align-items:stretch;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sr-set>a,.sr-set>span{flex:1 1 0;min-width:84px;border:1px solid rgba(62,220,240,.3);border-radius:10px;
  padding:10px 11px;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.04);transition:.16s}
.sr-set>a:hover{border-color:var(--acc-l);background:rgba(62,220,240,.08)}
.sr-set small{font:600 10.5px var(--mono);color:#7FB4C4;letter-spacing:.08em}
.sr-set b{font:700 14px var(--mono);color:#fff;word-break:break-all}
.sr-set i{align-self:center;font-style:normal;color:#7FB4C4;font-weight:700}
.sr-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid rgba(143,176,189,.16);font-size:14px}
.sr-row span{color:#9FC2CE}
.sr-row b{color:#fff;font-weight:600;text-align:right}
.sr-warn{font-size:13px;color:#FFC9A3;background:rgba(232,113,47,.12);border-radius:8px;padding:9px 11px;margin-top:12px}
.sr-act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.sr-act .btn-g{border-color:rgba(255,255,255,.3);color:#fff}
.sr-act .btn-g:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}

/* ---------- 评估到量产 ---------- */
.jrny{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:j;position:relative}
.jrny::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:2px;
  background:linear-gradient(90deg,rgba(62,220,240,.5),rgba(123,69,214,.5))}
.jrny li{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(62,220,240,.18);
  border-radius:14px;padding:22px 20px;margin-top:0}
.jrny .jn{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  font:800 14px var(--mono);color:#0A1620;background:var(--acc-l);margin:-44px 0 14px;
  box-shadow:0 0 0 6px var(--dark)}
.jrny h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px}
.jrny p{font-size:14px;color:#A9C9D4;line-height:1.75}
.jrny-cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
#journey .jrny{padding-top:22px}

/* ---------- 一键置顶 / 置底悬浮键（fx.js 生成） ---------- */
.fab-nav{position:fixed;right:16px;bottom:24px;z-index:45;display:flex;flex-direction:column;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s}
.fab-nav.on{opacity:1;visibility:visible;transform:none}
.fab{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);cursor:pointer;
  background:rgba(10,22,32,.82);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:background .16s,opacity .2s,transform .2s}
.fab:hover{background:var(--acc-d)}
.fab:focus-visible{outline:2px solid var(--acc-l);outline-offset:2px}
.fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fab.off{opacity:0;pointer-events:none;transform:scale(.8);height:0;margin-top:-8px;border-width:0}
@media (max-width:820px){
  .fab-nav{right:12px;bottom:18px}
  .fab{width:40px;height:40px}
  /* 产品页底部有询价条，悬浮键抬到询价条上面 */
  .fab-nav.lift{bottom:82px}
}
@media print{.fab-nav{display:none}}

/* ---------- 术语百科 / 型号对比（glossary.html / compare.html，wiki-render.js） ---------- */
.wk-wrap{max-width:860px;margin:0 auto}
.wk-aka{display:block;margin-top:10px;font-size:14px;color:var(--mute)}
.wk-body{font-size:16px;line-height:1.9;color:var(--ink2)}
.wk-body h2{font-size:22px;font-weight:700;color:var(--ink);margin:34px 0 12px}
.wk-body h2:first-child{margin-top:0}
.wk-body h3{font-size:17.5px;font-weight:700;color:var(--ink);margin:22px 0 8px}
.wk-body p{margin:0 0 14px}
.wk-in{margin:28px 0 6px}
.wk-in b{display:block;margin-bottom:4px;color:var(--ink)}
.wk-in p{margin:0}
.wk-faq{margin-top:34px}
.wk-faq h2{font-size:22px;font-weight:700;margin-bottom:14px}
.wk-tbl{overflow-x:auto;margin:6px 0 8px;border:1px solid var(--line);border-radius:10px}
.wk-tbl table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.6}
.wk-tbl th,.wk-tbl td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.wk-tbl thead th{background:var(--bg2);font-weight:700;color:var(--ink);white-space:nowrap}
.wk-tbl thead a{color:var(--acc-d)}
.wk-tbl tbody th{font-weight:600;color:var(--ink);width:22%;min-width:110px}
.wk-tbl tr.diff td,.wk-tbl tr.diff th{background:#FFF7EE}
.wk-tbl tr:last-child th,.wk-tbl tr:last-child td{border-bottom:0}
.wk-tip{font-size:13px;color:var(--mute);margin-bottom:10px}
.wk-choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:6px 0 10px}
.wk-choose .card{padding:18px 20px}
.wk-choose p{margin:0 0 8px;font-size:15px}
.wk-choose b{color:var(--acc-d);font-size:15.5px}
.wk-list .card{display:flex;flex-direction:column}
.wk-list .card h3{font-size:18px;margin-bottom:8px}
.wk-list .card p{font-size:14.5px;color:var(--ink2);margin-bottom:12px}
.wk-rel{margin-top:0;gap:10px}
/* .chip 默认不换行，对比标题很长，手机上会把页面撑宽 → 这里允许换行 */
.wk-rel .chip{font-size:14px;padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;white-space:normal;max-width:100%;line-height:1.45;font-family:var(--font)}
.wk-tbl table{min-width:0}
/* 手机：表格竖排，每行一张卡，格子前面显示列名（型号 / 方案），不用左右滑 */
@media (max-width:640px){
  .wk-tbl{border:0;overflow:visible}
  .wk-tbl table,.wk-tbl tbody,.wk-tbl tr,.wk-tbl th,.wk-tbl td{display:block;width:100%}
  .wk-tbl thead{display:none}
  .wk-tbl tbody tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:4px 0;background:#fff}
  .wk-tbl tbody th{border:0;padding:9px 12px 4px;width:auto;min-width:0;font-size:14px}
  .wk-tbl td{border:0;padding:4px 12px 8px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}
  .wk-tbl td::before{content:attr(data-th);font-weight:600;color:var(--mute);font-size:12.5px;font-family:var(--mono)}
  .wk-tbl tr.diff{background:#FFF7EE}
}
.wk-sh{font-size:16px;font-weight:700;margin:6px 0 12px}
.wk-sh+.chips{margin-bottom:22px}
@media (max-width:640px){.wk-body{font-size:15.5px}.wk-body h2,.wk-faq h2{font-size:20px}.wk-tbl table{font-size:13.5px}.wk-tbl th,.wk-tbl td{padding:9px 10px}}

/* ---------- 悬浮咨询（fx.js 生成，后台「推广设置」可关） ---------- */
.cdock{position:fixed;right:16px;bottom:24px;z-index:46}
.fab-nav.with-cd{bottom:84px}
.cd-btn{display:flex;align-items:center;gap:7px;height:46px;padding:0 18px 0 14px;border-radius:23px;border:0;cursor:pointer;
  background:#07C160;color:#fff;font:600 14.5px var(--font);box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.cd-btn:hover{background:#06AD56}
.cd-btn:focus-visible{outline:2px solid var(--acc-l);outline-offset:2px}
.cd-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cd-pan{position:absolute;right:0;bottom:58px;width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 16px;box-shadow:0 24px 50px -20px rgba(12,25,34,.45);display:flex;flex-direction:column;gap:8px;text-align:center}
.cd-pan[hidden]{display:none}
.cd-pan>b{font-size:15px;color:var(--ink)}
.cd-h,.cd-t{font-size:12.5px;color:var(--mute)}
.cd-pan img{width:160px;height:160px;margin:4px auto 0;border-radius:8px;border:1px solid var(--line);object-fit:contain}
.cd-x{position:absolute;right:6px;top:4px;width:36px;height:36px;border:0;background:none;font-size:22px;color:var(--mute);cursor:pointer}
.cd-row{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.cd-row b{color:var(--ink)}
.cd-copy{height:32px;padding:0 12px;border-radius:7px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;font-size:13px}
.cd-a{display:block;padding:10px;border-radius:9px;border:1px solid var(--line);color:var(--acc-d);font-weight:600;font-size:14px}
.cd-a.p{background:var(--acc-d);color:#fff;border-color:var(--acc-d)}
@media (max-width:820px){
  .cdock{right:12px;bottom:18px}
  .cdock.lift{bottom:82px}
  .fab-nav.with-cd{bottom:76px}
  .fab-nav.lift.with-cd{bottom:140px}
  /* 手机上只留圆形图标，不挡正文 */
  .cd-btn{width:50px;height:50px;padding:0;justify-content:center;border-radius:50%}
  .cd-btn span{display:none}
  .cd-btn svg{width:24px;height:24px}
}
@media print{.cdock{display:none}}
@media (max-width:820px){body.typing .cdock,body.typing .fab-nav{display:none}}

/* ---------- 产品页手机常驻询价条 ---------- */
.sticky-cta{display:none}
@media (max-width:820px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;
    gap:12px;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
    box-shadow:0 -10px 24px -18px rgba(12,25,34,.4)}
  .sticky-cta b{font:700 15px var(--mono);color:var(--ink)}
  body:has(.sticky-cta) .ftr{padding-bottom:84px}
  .sel-r{grid-template-columns:1fr;padding:22px}
  .sel-r .sr-l,.sel-r .sr-rows{grid-column:1;grid-row:auto}
  .sel-r .sr-rows{margin-top:16px}
  .jrny{grid-template-columns:1fr 1fr;row-gap:36px}
  .jrny::before{display:none}
}
@media (max-width:520px){
  .jrny{grid-template-columns:1fr}
}


/* 面包屑 */
.crumb{font-size:13.5px;color:var(--mute);padding:20px 0 0}
.crumb a:hover{color:var(--acc-d)}
.crumb span{margin:0 7px;opacity:.5}

/* 页头（内页） */
.phd{background:var(--bg2);border-bottom:1px solid var(--line);padding:38px 0 42px;
  position:relative;isolation:isolate}
.phd h1{font-size:clamp(27px,3.4vw,39px);font-weight:800;letter-spacing:-.02em;
  margin-bottom:12px}
.phd p{font-size:16.5px;color:var(--ink2);max-width:76ch;line-height:1.8}
/* 后台给该页设了背景图时，服务端给 .phd 加 .img 并写入 --phd-img */
.phd.img{background:#0A1620 var(--phd-img) center/cover no-repeat;border-bottom:0;
  padding:64px 0 66px;color:#EAF6FA}
.phd.img::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,21,32,.86),rgba(8,21,32,.55))}
.phd.img p{color:#C3DCE4}
.phd.img .crumb,.phd.img .crumb a{color:#A9C9D4}
.phd.img #cat-nav .chip{background:rgba(255,255,255,.1);color:#EAF6FA;border-color:rgba(255,255,255,.22)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-in{padding-top:32px;padding-bottom:22px}
  .hero-foot .hero-stats{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g5{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:820px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:66px 0 auto;flex-direction:column;gap:0;background:#fff;
    border-bottom:1px solid var(--line);padding:10px 24px 18px;display:none;
    box-shadow:0 18px 30px -22px rgba(12,25,34,.3);max-height:calc(100vh - 66px);
    overflow-y:auto;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--line);border-radius:0}
  /* 手机：下拉变成折叠菜单里的二级列表，点右侧箭头展开 */
  .nav-dd{flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .nav-dd>a{flex:1;border-bottom:0;padding-right:4px}
  .dd-t{width:44px;height:44px;margin:0}
  .dd-p{position:static;transform:none;padding:0;width:100%;display:none;opacity:1;visibility:visible}
  .nav-dd:hover .dd-p,.nav-dd:focus-within .dd-p{transform:none}
  .nav-dd.open .dd-p{display:block}
  .nav-dd:hover .dd-t svg{transform:none}
  .nav-dd.open .dd-t svg{transform:rotate(180deg)}
  .dd-in,.dd-in.w{grid-template-columns:1fr;gap:2px;border:0;box-shadow:none;border-radius:0;padding:2px 0 14px 10px;background:none}
  .nav .dd-c a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:0}
  .nav .dd-c .dd-k{font-size:13.5px}
  .nav .dd-c small{font-size:11.5px;text-align:right;white-space:normal}
  .nav .dd-c .dd-h{padding:8px 0 5px;margin-top:4px}
  .nav a.dd-all{border-bottom:0;padding:10px 0 0}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .sec{padding:58px 0}
  .cta{padding:36px 26px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .tbl td:first-child{width:42%}
  .tbl.tbl-cmp tbody th{width:var(--cw,160px)}
}
@media (max-width:520px){
  .hero-foot .hero-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:16px}
  .stat b{font-size:25px}
  .logo img{height:34px}
  .flow{flex-direction:column}
  .flow .ar{width:100%;height:26px;transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ---------- SEO 静态块 ----------
   服务端注入、供爬虫读取的正文。JS 渲染完成后隐藏，
   避免用户看到与动态内容重复的文字。
   不用 display:none 直接写死，是为了在 JS 失效时仍可阅读。 */
#seo-static{max-width:var(--wrap);margin:0 auto;padding:24px;font-size:15px;
  line-height:1.8;color:var(--ink2)}
#seo-static h1{font-size:28px;color:var(--ink);margin-bottom:12px}
#seo-static h2{font-size:20px;color:var(--ink);margin:22px 0 10px}
#seo-static h3{font-size:16px;color:var(--ink);margin:16px 0 6px}
#seo-static ul{margin:10px 0 10px 22px}
#seo-static li{margin-bottom:6px}
#seo-static table{border-collapse:collapse;margin:10px 0}
#seo-static th,#seo-static td{border:1px solid var(--line);padding:7px 11px;
  text-align:left;font-size:14px}
html.js-on #seo-static{display:none}

/* 页脚备案号（国内节点显示） */
.ftr-btm a{display:inline;padding:0;color:#8FB0BD;text-decoration:none}
.ftr-btm a:hover{color:var(--acc-l);text-decoration:underline}

/* ---------- 技术支持页：FAQ 与资料卡 ---------- */
.faq{border:1px solid var(--line);border-radius:10px;margin-bottom:11px;background:#fff;
  overflow:hidden;transition:border-color .16s,box-shadow .16s}
.faq[open]{border-color:rgba(0,162,187,.45);box-shadow:var(--shadow)}
.faq summary{padding:17px 20px;font-size:16px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:11px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:400;
  color:var(--mute);transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg);color:var(--acc)}
.faq .fq{color:var(--acc);font-family:var(--mono);font-size:13px;font-weight:700;flex:0 0 auto}
.faq .fa{padding:0 20px 19px 50px;font-size:14.5px;color:var(--ink2);line-height:1.85}
.doc-req{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--acc-d)}
.doc-req:hover{color:var(--acc)}
@media (max-width:640px){.faq .fa{padding-left:20px}}

/* ---------- 404 ---------- */
.nf{text-align:center;padding-top:40px;padding-bottom:40px}
.nf h1{font-size:clamp(28px,4vw,42px);font-weight:800;margin:6px 0 12px}
.nf p{color:var(--ink2);max-width:52ch;margin:0 auto 26px}
.nf-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* 产品不存在：只保留页头 */
.nf-prod > section:not(.phd){display:none}
body:has(.nf-prod) .sticky-cta{display:none}

/* 11-01 手机端审计：小字（<12px）放大到 12px 以上，点击区域至少 40px 高（苹果建议 44pt，这里按 40 起） */
@media (max-width:820px){
  .lang button{padding:10px 13px;font-size:13.5px;min-height:40px}
  .badge,.badge.q{font-size:12px;padding:5px 10px}
  .pcard .role{font-size:12px;padding:5px 10px}
  .sr-set small{font-size:12px}
  .nav .dd-c em{font-size:12px}
  .ftr .fb span{font-size:12px;letter-spacing:.03em}
  .ftr a{padding:10px 0;font-size:15px}
  .ftr-btm a{display:inline-block;padding:10px 0}
  .nav .dd-c a{padding:10px 0}
  .nav a.dd-all{padding:12px 0 4px}
  a[href^="mailto:"]{display:inline-block;padding:9px 0}
}