@charset "utf-8";
/* ============================================================
   绍凤科技官网 样式系统
   配色采样自 Logo 与印刷画册
   浅色简约 + 深浅结合（首页深，内容浅）
   ============================================================ */

:root {
  /* 品牌蓝家族 */
  --blue: #0040A0;
  --blue-d: #002A85;
  --blue-l: #0A5AE0;
  --blue-xl: #E8F0FE;
  /* 画册彩带色 */
  --gold2: #E0C000;
  --gold: #E0A000;
  --gold-l: #F0B820;
  --leaf: #A0C080;
  --orange: #E06020;
  --rose: #E0A0A0;
  --red: #E00000;
  /* 中性色 */
  --ink: #141A22;
  --gray: #5B6472;
  --line: #E3E8EF;
  --bg: #FAFBFD;
  /* 深色区 */
  --dk: #10233F;
  --dk2: #17304F;
  --dkt: #E4EBF5;
  --dkd: #8598B5;
  --ln: #1E3050;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font: 15px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ===== 容器 =====
   设计基准 1920 宽（此时内容区 1824 = 两侧各留 48）。
   容器本身 width:100%，且不设上限：
     小于 1920 的屏幕自然收窄（1600/1366 笔电、平板、手机）；
     大于 1920 的屏幕（2K/带鱼屏）继续铺满，只保留 48px 边距；
   留白与字号靠下方 @media 按「由宽到窄」调，不需要逐档改 max-width。
*/
.wrap { width: 100%; margin: 0 auto; padding: 0 48px; }

/* ===== 品牌彩带 ===== */
.ribbon {
  height: 4px;
  background: linear-gradient(90deg,
    #E00000 0%, #E06020 14%, #E0C000 28%, #8FC0E0 45%,
    #0040A0 62%, #0050C8 74%, #A0C080 90%, #6FAF50 100%);
}

/* ===== 顶部信息条 ===== */
.topbar { background: var(--blue); color: #fff; font-size: 13px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar a { color: #fff; text-decoration: none; opacity: .9; }
.topbar a:hover { opacity: 1; }

/* ===== 主导航 ===== */
.nav {
  background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }

.brand { display: flex; align-items: center; }
/* 官方 Logo 图（static/img/logo.png，白底，直接放白底导航条上）
   高度固定、宽度自适应，比例锁 560:248 不被拉伸 */
.brand-logo { display: block; height: 46px; width: auto; }

.menu { display: flex; gap: 34px; }
.menu > li { position: relative; }
.menu > li > a {
  display: block; font-size: 17px; font-weight: 500; padding: 8px 0;
  color: var(--ink); position: relative; letter-spacing: .3px;
}
.menu > li > a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--blue); transition: width .25s;
}
.menu > li > a:hover::after, .menu > li.on > a::after { width: 100%; }
.menu > li.on > a { color: var(--blue); font-weight: 600; }

/* 二级下拉 */
.menu .sub {
  position: absolute; left: 50%; transform: translate(-50%, 6px); top: 100%;
  min-width: 190px;
  background: #fff; border: 1px solid var(--line); border-radius: 0 0 10px 10px;
  border-top: 2px solid var(--blue);
  padding: 8px 0; opacity: 0; visibility: hidden;
  transition: .22s;
  box-shadow: 0 14px 34px rgba(0, 40, 100, .13);
}
/* 悬停展开只属于桌面。这条规则的选择器 (0,3,1) 比手机端的 `.menu .sub` 更具体，
   如果不限宽度，在抽屉里鼠标划过主栏目时会把整个子菜单 translate(-50%,0) 甩到左边
   （752px 宽的子菜单左移 376px，文字正好被拉出可视区，只剩虚线）。
   手机端是点击展开，本来也不需要 hover。 */
@media (min-width: 961px) {
  .menu > li:hover .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

  /* 只有"没有悬停浮层"的下拉才允许内部滚动（如解决方案的 11 个行业）。
     有浮层的不能加 overflow —— 右侧浮层会被容器裁掉一截。
     产品中心这类改成浮层后顶层面只剩 3 条，本来也就不需要滚动。 */
  .menu .sub.nv-flat {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 缩进体现层级：第二级 20px 起，每深一级 +14px。
     必须放在 min-width 断点里 —— 选择器 (0,3,1) 比手机端的 `.menu .sub a` 更具体，
     不加断点会把抽屉里的左内边距也顶掉。 */
  .menu .sub a.nv-d2 { padding-left: 34px; }
  .menu .sub a.nv-d3 { padding-left: 48px; }
  .menu .sub a.nv-d4 { padding-left: 62px; }
  .menu .sub a.nv-d5 { padding-left: 76px; }
  .menu .sub a.nv-d6 { padding-left: 90px; }

  /* 有子栏目的一级：只多留上边距和上一组分开（首组除外）。
     字体/字号/颜色/字重全部与普通项一致 —— 这些组头本身就是可跳转的栏目
     （新闻动态 → news.php、科学计算与仿真软件 → product.php?cat=11、
      网络通信产品 → product.php?cat=12），不能再用灰字小字号压成不可点的标签。 */
  .menu .sub a.nv-kids { padding-top: 14px; }
  .menu .sub a.nv-kids:first-child { padding-top: 10px; }

  /* ===== 二级项的悬停浮层 =====
     第二级栏目自己有子栏目时，子栏目不再平铺在下拉里，而是收进右侧浮层，
     鼠标移到这一项才展开。顶层面下拉因此只剩干净的二三级入口。
     浮层内部更深层级按缩进平铺，不继续套娃（产品中心有 5 层，层层右弹会溢出屏幕）。 */
  .menu .sub .nv-sub { position: relative; }
  .menu .sub .nv-fly {
    position: absolute; left: 100%; top: -9px;   /* -9px 抵消 .sub 的 8px 上内边距 + 1px 边框 */
    min-width: 200px;
    background: #fff; border: 1px solid var(--line);
    border-top: 2px solid var(--blue); border-radius: 0 10px 10px 0;
    padding: 8px 0; box-shadow: 0 14px 34px rgba(0, 40, 100, .13);
    opacity: 0; visibility: hidden; transform: translateX(6px);
    transition: .18s; z-index: 6;
  }
  /* 贴近屏幕右缘时由 JS 加 .flip，改成向左弹 */
  .menu .sub .nv-sub.flip > .nv-fly {
    left: auto; right: 100%; border-radius: 10px 0 0 10px;
  }
  /* 悬停 / 键盘聚焦到这一项时展开浮层 */
  .menu .sub .nv-sub:hover > .nv-fly,
  .menu .sub .nv-sub:focus-within > .nv-fly {
    opacity: 1; visibility: visible; transform: translateX(0);
  }
  /* 展开时二级项本身的视觉变化：蓝字 + 淡蓝底 + 左竖条，箭头转向并前移 */
  .menu .sub .nv-sub:hover > a.nv-flyp,
  .menu .sub .nv-sub:focus-within > a.nv-flyp {
    color: var(--blue); background: var(--blue-xl); border-left-color: var(--blue);
  }
  .menu .sub .nv-sub:hover > a.nv-flyp::after { border-color: var(--blue); transform: rotate(-45deg) translate(2px, -2px); }
}
.menu .sub a {
  display: block; font-size: 15px; padding: 10px 20px; color: var(--ink);
  border-left: 3px solid transparent; transition: .18s; white-space: nowrap;
  position: relative;
}
/* 浮层父项的右侧箭头：告诉用户"这一项还能展开" */
.menu .sub a.nv-flyp::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 2px solid #93A3B8; border-bottom: 2px solid #93A3B8;
  transform: rotate(-45deg); transition: .18s;
}
.menu .sub a:hover { color: var(--blue); border-left-color: var(--blue); background: var(--blue-xl); }

/* 站内搜索入口：导航条右侧的放大镜输入框。
   之前站里没有搜索，读者只能一页页翻列表翻不到想要的内容。 */
.nav-search { display: flex; align-items: center; }
.nav-search input {
  width: 132px; height: 34px; padding: 0 32px 0 12px;
  border: 1px solid var(--line); border-radius: 17px; background: #F7F9FC;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  transition: width .22s, border-color .18s, background .18s;
  -webkit-appearance: none; appearance: none;
}
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search input:focus {
  width: 190px; outline: none; background: #fff; border-color: var(--blue-l);
}
.nav-search input::placeholder { color: #9AA7B8; }
.nav-search button {
  margin-left: -30px; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: #8C9AAD;
  transition: color .18s;
}
.nav-search button:hover { color: var(--blue); }
@media (max-width: 1200px) {
  .nav-search input { width: 104px; }
  .nav-search input:focus { width: 160px; }
}
@media (max-width: 960px) {
  .nav-search input { display: none; }
  .nav-search button { margin-left: 0; width: 34px; height: 34px; }
}

.nav-cta {
  display: flex; align-items: center; gap: 14px;
}
.btn-apply {
  background: var(--red); color: #fff !important; padding: 9px 20px;
  border-radius: 4px; font-size: 14px;
}
.btn-apply:hover { background: #c00000; }

.burger {
  display: none; font-size: 24px; background: none;
  border: 0; cursor: pointer; color: var(--ink); line-height: 1;
}

/* 移动端二级菜单的展开箭头：桌面走 hover，不显示这个按钮 */
.sub-toggle { display: none; }

/* ===== 深色页头（内页） ===== */
/* 详情页 / 静态页头部：与列表页 .phero 同一套深蓝版式
   （金色小标签 → 大标题 → 描述），全站头部一个样。 */
.phead {
  background: linear-gradient(120deg, #10233F 0%, #1B3E75 55%, #245AA5 100%);
  color: #E4EBF5;
  position: relative; overflow: hidden; padding: 60px 0 54px;
}
.phead::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
}
.phead::after {
  content: ""; position: absolute; right: -90px; top: -110px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,201,77,.13), transparent 70%);
}
.phead .wrap { position: relative; z-index: 2; }
/* 详情页标题上方的上下文标签：方案/案例=所属行业，产品=所属产品线。
   与 .phero-tag 同一视觉（浅底 + 金字 + 圆角药丸）。 */
.phead-tag {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: #FFC94D;
  font-size: 14.5px; line-height: 1.6; font-weight: 500;
  letter-spacing: .5px;
  padding: 4px 16px; border-radius: 20px;
  margin-bottom: 14px;
}
.phead h1 { font-size: 36px; font-weight: 700; letter-spacing: -.4px; color: #fff; margin: 0; }
.phead p { margin-top: 14px; color: #9DB0CC; font-size: 16.5px; max-width: 780px; line-height: 1.9; }

/* 列表页顶部大图 Banner（各一级菜单共用，图片来自后台「广告位」）：
   铺满宽度，四边用遮罩 + 上下渐隐自然过渡到深蓝 #10233F，
   避免 banner 与下方 hero 之间出现硬边。
   --bn-fade 控制底部渐隐的目标色，不同底色的图各自指定。
   max-height 是给后台随便上传的图兜底：1140×240 的产品横幅正好用满，
   万一传了竖图也不会把首屏顶掉。 */
.sol-banner,
.topbanner { position: relative; background: #10233F; overflow: hidden; --bn-fade: #10233F; }
.sol-banner .sol-banner-img,
.topbanner .topbanner-img {
  display: block; width: 100%; max-width: 1920px; margin: 0 auto;
  height: auto; max-height: 420px; object-fit: cover;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 30%, #000 55%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image: radial-gradient(120% 130% at 50% 30%, #000 55%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.sol-banner .sol-banner-fade,
.topbanner .topbanner-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, transparent, var(--bn-fade) 88%);
  pointer-events: none;
}
.sol-banner .sol-banner-top,
.topbanner .topbanner-top {
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(16,35,63,.55), rgba(16,35,63,0));
  pointer-events: none;
}
@media (max-width: 900px) {
  .sol-banner .sol-banner-img,
  .topbanner .topbanner-img { min-height: 132px; object-fit: cover; object-position: center 38%; }
}
/* 窄屏时 banner 图被 object-fit 拉高，底部渐隐要跟着加长，否则与下方深蓝 hero 之间露硬边 */
@media (max-width: 900px) {
  .sol-banner .sol-banner-fade,
  .topbanner .topbanner-fade { height: 58%; }
}

/* ===== 面包屑 ===== */
.crumb { background: #fff; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--gray); }
.crumb .wrap { padding-top: 13px; padding-bottom: 13px; }
.crumb a { color: var(--gray); }
.crumb a:hover { color: var(--blue); }
.crumb i { font-style: normal; margin: 0 8px; color: #C8D0DA; }
.crumb .cur { color: var(--ink); }

/* ===== 通用区块 ===== */
.sec { padding: 66px 0; }
.sec-white { background: #fff; }

/* 双栏栅格：左文右图。左栏固定占更多空间（1.05 : .95）。
   之前这些页面用的是行内 grid-template-columns + fixed gap，
   窄屏下两栏不会塌成单栏，标题被压成一列竖排字，这里统一收口。 */
.g2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) {
  .g2 { grid-template-columns: 1fr; gap: 34px; }
}

/* 等宽双栏卡片：窄屏塌成单列，避免卡片被压扁 */
.g2c { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) {
  .g2c { grid-template-columns: 1fr; }
}

.sec-t { text-align: center; margin-bottom: 40px; }
.sec-t .tag {
  display: inline-block; background: var(--blue-xl); color: var(--blue);
  font-size: 14.5px; font-weight: 500; letter-spacing: .5px;
  padding: 5px 18px; border-radius: 20px; margin-bottom: 14px;
}
.sec-t h2 { font-size: 30px; font-weight: 700; letter-spacing: -.3px; }
.sec-t p { color: var(--gray); font-size: 16px; margin-top: 12px; }

/* ===== 首页 Hero ===== */
/* 底部留白：原先 hero 下方紧跟一条统计栏，现在统计栏已移除，
   底距加大，让 hero 与第一屏白色区块之间有更舒展的呼吸感 */
.hero {
  background: var(--dk); color: var(--dkt);
  position: relative; overflow: hidden; padding: 56px 0 78px;
}
.hero-title { font-size: 38px; line-height: 1.28; font-weight: 700; letter-spacing: -.5px; }
.hero-lead { margin-top: 16px; font-size: 16.5px; color: var(--dkd); max-width: 660px; }
/* 首屏文案区整体居中（slogan/大标题/导语/按钮）。
   限宽 900 居中而非铺满：标题两行约 700px，导语限 660，留白对称不松散；
   下方 STEP 能力条带是独立通栏组件，不随此居中。 */
.hero-copy { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-copy .hero-lead { margin-left: auto; margin-right: auto; }
.hero-btns { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 1600px) { .hero { padding: 76px 0 96px; } }

/* ===== 内页主体上下留白 =====
   原先是各页 inline padding:44px 0 66px，抽成类后大屏可一起放大 */
.page-pad { padding: 40px 0 66px; }
@media (min-width: 1600px) { .page-pad { padding: 56px 0 84px; } }

/* ===== 标题分隔（内容页）===== */
.chd { font-size: 22px; font-weight: 700; margin-bottom: 16px; padding-left: 13px; border-left: 4px solid var(--blue); }

/* ===== 按钮 ===== */
.btn {
  display: inline-block; background: var(--blue-l); color: #fff !important;
  padding: 12px 28px; border-radius: 5px; font-size: 15.5px; font-weight: 500;
  transition: .25s; border: 0; cursor: pointer; text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,90,224,.32); }
.btn-gold { background: linear-gradient(96deg, var(--gold), var(--gold-l)); color: #3A2600 !important; }
.btn-gold:hover { box-shadow: 0 10px 26px rgba(224,160,0,.34); }
.btn-red { background: var(--red); }
.btn-o { background: transparent; border: 1px solid var(--line); color: var(--ink) !important; }
.btn-o:hover { border-color: var(--blue); color: var(--blue) !important; box-shadow: none; }

/* 深色背景专用按钮
   .btn / .btn-o 是浅底方案：蓝底白字、蓝字蓝框。
   放到深色区块（首页 Hero 背景图上）会因背景同色而看不清，
   悬停时尤其明显 —— 这里给出反色版。 */
.btn-o-d {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.55);
  color: #fff !important;
}
.btn-o-d:hover {
  background: #fff; border-color: #fff; color: var(--blue) !important; box-shadow: none;
}
.btn-sm { padding: 8px 18px; font-size: 14px; }

/* ===== 产品卡 ===== */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
/* 详情页「相关产品」：auto-fill 会按容器宽度排满轨道，取 4 个时右侧留空位。
   auto-fit 会把空轨道折叠，3 个 / 4 个都能铺满整行 */
.pgrid.pgrid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  overflow: hidden; transition: .28s; display: flex; flex-direction: column;
}
.pcard::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .28s;
}
.pcard { position: relative; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,40,100,.1); }
.pcard:hover::before { transform: scaleX(1); }
.pcard .ph { height: 190px; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; }
.pcard .ph img { width: 100%; height: 100%; object-fit: contain; }
.pcard .body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.pcard h3, .pcard h4 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.pcard .model { font-size: 12.5px; color: var(--blue); letter-spacing: .3px; margin-bottom: 9px; }
.pcard .desc { color: var(--gray); font-size: 14px; flex: 1; min-height: 44px; }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); background: #fff; }
.pcard .go { color: var(--blue); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
/* 无图时的占位：浅灰底 + 图标，避免看起来像坏图 */
.pcard .ph:empty, .pcard .ph img[src=""] { background: #FAFBFD; }
.pcard .ph:empty::after { content: "暂无图片"; color: #A8B2C0; font-size: 13px; }
.pcard .go svg { width: 14px; height: 14px; stroke: var(--blue); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pcard:hover .go svg { transform: translateX(4px); }

.tagline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tagline span { font-size: 12px; background: var(--bg); color: var(--blue-d); padding: 3px 9px; border-radius: 4px; border: 1px solid var(--line); }

.flag { position: absolute; right: 0; top: 0; background: var(--gold); color: #3A2600; font-size: 11.5px; padding: 4px 12px; border-radius: 0 11px 0 8px; font-weight: 600; z-index: 2; }

/* ===== 标签筛选 ===== */
.tabs { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 30px; }
.tabs a {
  padding: 7px 18px; border-radius: 20px; border: 1px solid var(--line);
  background: #fff; font-size: 14px; color: var(--gray); transition: .2s;
}
.tabs a:hover, .tabs a.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ===== 左侧树 ===== */
.layout2 { display: grid; grid-template-columns: 234px 1fr; gap: 36px; align-items: start; }
/* sticky 侧栏必须自带高度上限，否则展开多级后底部永远够不到 */
.side {
  position: sticky; top: 90px; max-height: calc(100dvh - 112px);
  display: flex; flex-direction: column;
}
.side-t { font-size: 13px; color: var(--gray); letter-spacing: 1px; margin-bottom: 11px; padding-left: 13px; flex: 0 0 auto; }
.side > form, .side .side-box { flex: 0 0 auto; }
/* 树的可视框：限高滚动 + 底部渐隐提示「下面还有」 */
.tree-box { position: relative; flex: 0 1 auto; min-height: 0; display: flex; margin-bottom: 14px; }
.tree-box::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 46px;
  background: linear-gradient(rgba(255,255,255,0), #fff 72%);
  border-radius: 0 0 9px 9px; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.tree-box.more::after { opacity: 1; }
.tree-box::before {
  content: ""; position: absolute; left: 50%; bottom: 5px; z-index: 2;
  width: 8px; height: 8px; margin-left: -4px; pointer-events: none;
  border-right: 1.5px solid #8D99A8; border-bottom: 1.5px solid #8D99A8;
  transform: rotate(45deg); opacity: 0; transition: opacity .2s;
}
.tree-box.more::before { opacity: 1; animation: treeMore 1.5s ease-in-out infinite; }
@keyframes treeMore {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(3px) rotate(45deg); }
}
.tree {
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #C9D2DE transparent;
  flex: 1 1 auto; min-height: 0;
}
.tree::-webkit-scrollbar { width: 8px; }
.tree::-webkit-scrollbar-track { background: transparent; }
.tree::-webkit-scrollbar-thumb { background: #C9D2DE; border-radius: 4px; }
.tree::-webkit-scrollbar-thumb:hover { background: #A9B4C4; }
.tree a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 15px; font-size: 14.5px; line-height: 1.25;
  border-bottom: 1px solid var(--line); transition: .2s;
}
.tree a em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree a span { font-size: 12px; opacity: .7; flex: 0 0 auto; }
.tree > a:last-child, .tree .tch:last-child > a:last-child { border-bottom: 0; }

/* 层级：缩进 + 字号 + 字色逐级递减，一/二/三级一眼可分 */
.tree a.lv1 { font-weight: 600; padding-top: 9px; padding-bottom: 9px; }
.tree a.lv2 { padding-left: 29px; font-size: 14px; }
.tree a.lv3 { padding-left: 45px; font-size: 13.5px; color: #47525F; }
.tree a.lv4 { padding-left: 61px; font-size: 13px; color: #5A6572; }
.tree .tch { background: #FCFDFF; }
.tree .tch .tch { background: #F8FAFD; }
/* 后台已勾选「前台显示」但暂无产品的分类：保留入口，数字置灰提示为空 */
.tree a.zero em { color: #9AA7B8; }
.tree a.zero span { opacity: .35; }
.tree a.zero.on { background: linear-gradient(96deg, #8A97A8, #A8B4C2); }
/* 外链型栏目（type=3）：不是分类，没有产品计数，行尾淡箭头区分 */
.tree a .pg-a { font-size: 15px; opacity: .4; line-height: 1; }

/* 分类介绍：栏目同 slug 的单页正文（如「数字孪生」）显示在产品列表上方，
   与产品卡片同宽；后台清空单页正文该块自动消失 */
.cat-intro {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: 8px; padding: 18px 22px; margin-bottom: 20px;
  font-size: 15px; line-height: 1.95; color: #3A4756;
}
.cat-intro h2, .cat-intro h3 { font-size: 17px; line-height: 1.5; margin: 16px 0 8px; color: #1B2733; }
.cat-intro h2:first-child, .cat-intro h3:first-child { margin-top: 0; }
.cat-intro p { margin: 0 0 10px; }
.cat-intro p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .cat-intro { padding: 15px 16px; font-size: 14.5px; line-height: 1.85; }
}

.tree a:hover { background: var(--bg); color: var(--blue); }
.tree a.on { background: linear-gradient(96deg, var(--blue), var(--blue-l)); color: #fff; font-weight: 500; }

.side-box { background: var(--dk); color: var(--dkt); border-radius: 9px; padding: 20px; position: relative; overflow: hidden; }
.side-box::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(224,160,0,.18), transparent 70%); }
.side-box b { display: block; font-size: 15px; color: #fff; margin-bottom: 7px; position: relative; }
.side-box p { font-size: 13.5px; color: var(--dkd); margin-bottom: 14px; position: relative; }
.side-box a {
  display: block; text-align: center;
  background: linear-gradient(96deg, var(--gold), var(--gold-l));
  color: #3A2600; padding: 10px; border-radius: 5px; font-size: 14.5px; font-weight: 600; position: relative;
}

/* ===== 分组标题 ===== */
.grp { margin-top: 44px; }
.grp:first-child { margin-top: 0; }
.grp-t { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.grp-t i { width: 4px; height: 17px; background: var(--gold); border-radius: 2px; flex: 0 0 4px; }
.grp-t b { font-size: 18px; font-weight: 600; }
.grp-t span { font-size: 13px; color: var(--gray); }

/* ===== 分页 ===== */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 44px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 36px; height: 36px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 5px;
  background: #fff; font-size: 14px; color: var(--gray); transition: .2s;
}
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager .cur { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 500; }
.pager .dis { opacity: .45; }
.pager .dots { border: 0; background: none; }
.pager .info { margin-left: 10px; border: 0; background: none; font-size: 13px; color: var(--gray); }

/* ===== 深色 CTA ===== */
.cta-band {
  background: var(--dk); color: var(--dkt); padding: 54px 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(660px 290px at 86% 10%, rgba(0,64,160,.28), transparent 62%),
    radial-gradient(460px 250px at 6% 96%, rgba(224,160,0,.10), transparent 60%);
}
/* 内容整体居中：与方案页「没找到您需要的方案」那行提示保持同一种对齐方式。
   原先 space-between 会把按钮甩到屏幕最右，1920 上标题与按钮相隔 1500px 以上。 */
.cta-band .wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; max-width: 1120px; margin: 0 auto; text-align: center; position: relative;
}
.cta-band .wrap > div { max-width: 100%; }
/* 两个按钮并排居中，去掉 inline 间距，改用 gap 控制 */
.cta-band .wrap > div:last-child { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band h3 { font-size: 25px; font-weight: 700; }
.cta-band p { color: var(--dkd); margin-top: 8px; }
.btn-w { background: #fff; color: var(--blue) !important; padding: 12px 28px; border-radius: 5px; font-size: 15.5px; font-weight: 500; }
.btn-w-o { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff !important; padding: 12px 28px; border-radius: 5px; font-size: 15.5px; }
.btn-w-o:hover { border-color: var(--gold); color: #FFC94D !important; }

/* ===== 页脚 ===== */
.foot { background: var(--dk); color: var(--dkd); padding: 46px 0 24px; font-size: 14px; }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.1fr 1.1fr; gap: 32px; margin-bottom: 30px; }
.foot h5 { color: #fff; font-size: 15px; margin-bottom: 13px; font-weight: 600; }
.foot a { color: var(--dkd); display: block; margin-bottom: 8px; transition: .2s; }
.foot a:hover { color: #FFC94D; }
.foot .en { font-size: 12px; letter-spacing: .4px; opacity: .68; }
.foot .bt { border-top: 1px solid var(--ln); padding-top: 18px; text-align: center; font-size: 13px; color: #8FA3BF; }
.foot .bt a { display: inline; color: #8FA3BF; margin: 0 2px; }
.foot .bt a:hover { color: #FFC94D; }

/* ===== 内容页排版 ===== */
.prose { font-size: 15.5px; line-height: 1.9; color: #333; }
.prose h2 { font-size: 21px; font-weight: 700; margin: 30px 0 14px; padding-left: 12px; border-left: 4px solid var(--blue); }
.prose h3 { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }
/* 正文小节标题：产品详情「详细说明」里用 h4 分节（脚本编辑器 / 多语言支持 / GPU 计算…）。
   h4 默认继承正文 15.5px，且全局 reset 把 margin 归零，小节和普通段落长得一模一样，
   整篇读下来像是没有结构的流水账 */
.prose h4 { font-size: 17px; font-weight: 700; color: #12233d; margin: 30px 0 10px; line-height: 1.6; }
.prose p { margin-bottom: 15px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
/* 全局把 ul/ol 的 list-style 归零了（导航等用途），正文列表要恢复符号，
   否则条目只剩缩进、看不出是列表 */
.prose ul { list-style: disc outside; }
.prose ol { list-style: decimal outside; }
.prose li { padding-left: 2px; }
.prose li { margin-bottom: 7px; }
.prose img { border-radius: 8px; margin: 12px 0; max-width: 100%; height: auto; }
/* 中文正文一行 45~52 字最好读（15.5px ≈ 860px）。
   之前按 1920 设计稿放到 900/1120，宽屏上一行 70 多字，眼睛回到下一行容易串行 */
.prose p, .prose ul, .prose ol, .prose h2, .prose h3, .prose h4 { max-width: 860px; }
/* 详情/阅读类页面的内容框（body.page-detail，见各详情页）
   面包屑 / 页头 / 正文 / 侧栏用同一个框，左右边缘对齐。
   框宽在 1920 屏上决定了「正文有多宽」：1200 时主栏只有 800，左右各空 360，
   正文挤在中间、侧栏停在页面中部，右侧大片留白。
   放到 1520 后侧栏收到 300，主栏 ≈ 1076、正文 1060（16px 一行约 66 字）。
   上限同时受 100% 约束：屏宽不足 1520 时自然收窄（见各断点的 .wrap padding）。 */
/* CTA 已改为整体居中 + 1120 限宽（见 .cta-band .wrap），不再跟随正文 1520 框 */
/* 版心宽 --dw、行宽 --prose 都集中在文件末尾的「宽屏详情页」一段定义，
   这里只引用；改宽窄只改那一处，不会再出现「版心放开了、行宽还卡在 1060」 */
body.page-detail .crumb .wrap,
body.page-detail .phead .wrap,
body.page-detail .page-pad > .wrap {
  max-width: var(--dw, 1520px); margin-left: auto; margin-right: auto;
}
/* 详情页正文行宽：随加宽的版心同步放宽，但仍留住上限，
   避免 2K/带鱼屏上一行 80 多字。普通 .prose（列表/独立页）保持 860 不变 */
body.page-detail .prose p,
body.page-detail .prose ul,
body.page-detail .prose ol,
body.page-detail .prose h2,
body.page-detail .prose h3,
body.page-detail .prose h4 { max-width: var(--prose, 1060px); }
/* 资讯详情：标题与封面。
   封面原来是左侧浮动小图（float:left 300px，正文绕排）——用户反馈「缩略图在正文左边不美观」，
   且纵向缩略图（列表图只有 238×288）压成小图后与正文互相干扰。现改为正文顶部通栏大图：
   横向图按原比例完整显示；纵向图受 max-height 截断（object-fit:cover 居中裁），
   不会把一篇文章拉成两屏高。封面对不上内容的（如 stock 肖像）走后台清空 thumb，
   详情页即纯文字、列表页显示占位色块，与 id=6 处理一致。 */
.nd-title { font-size: 30px; font-weight: 700; line-height: 1.38; letter-spacing: -.4px; margin-bottom: 18px; }
.nd-cover { width: 100%; border-radius: 12px; overflow: hidden; margin: 0 0 26px; background: #F2F5F9; }
.nd-cover img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; }
.nd-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* 卡片标题是 nowrap + 省略号，栅格项必须允许收缩，否则长标题会顶破整列 */
.nd-rel > * { min-width: 0; }
@media (min-width: 1600px) { .nd-title { font-size: 34px; } }
@media (max-width: 1200px) { .nd-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .nd-rel { grid-template-columns: minmax(0, 1fr); }
  .nd-title { font-size: 23px; }
  .nd-cover { margin: 0 0 18px; }
  .nd-cover img { max-height: 220px; }
}
/* ===== 产品详情正文排版：把「概述 → 特点 → 参数 → 说明」串成一篇 =====
   章节间距、导语字号、列表圆点、参数容器集中在这里，
   页面模板里不再一节写一个 inline style（那种写法每加一节就多一套间距）。 */
.dsec { margin-bottom: 36px; }
.dsec:last-of-type { margin-bottom: 30px; }

/* 概述：作为文章导语，比常规正文大一号、颜色浅一档 */
.dlead { margin: 0; color: var(--gray); font-size: 16px; line-height: 1.9; }

/* 核心特点：圆点列表，字号与导语一致，避免一节一个字号 */
.dfeat {
  margin: 0 0 10px; padding-left: 20px; position: relative;
  color: var(--gray); font-size: 15.5px; line-height: 1.85;
}
.dfeat:last-child { margin-bottom: 0; }
.dfeat i {
  position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); display: block;
}

/* 技术参数：轻边框容器，与文章同宽 */
.dspec { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 22px; }
/* 正文里的视频默认按素材原宽（1280/1920）渲染，会把详情页主栏撑破，
   必须显式约束在容器宽度内 */
.prose video, .prose iframe {
  display: block; width: 100%; max-width: 100%; height: auto;
  border-radius: 8px; margin: 12px 0; background: #000;
}
/* 栅格项默认 min-width:auto，宽内容（视频/长表格）会顶开整列 */
.detail-wrap > main { min-width: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--bg); font-weight: 600; }

/* ===== 表单 ===== */
.form { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 30px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 8px; font-weight: 500; }
.field label i { color: var(--red); font-style: normal; margin-left: 3px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 14px; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font-family: inherit; color: var(--ink); transition: .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-xl);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .tip { font-size: 12.5px; color: var(--gray); margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.alert { padding: 13px 18px; border-radius: 7px; margin-bottom: 22px; font-size: 14.5px; }
.alert-ok { background: #E8F5EC; color: #0A6B2D; border: 1px solid #B8E0C4; }
.alert-err { background: #FCEBEB; color: #A31515; border: 1px solid #F0C2C2; }
.alert-info { background: var(--blue-xl); color: var(--blue-d); border: 1px solid #C5DAFB; }

/* ===== 详情页 ===== */
.detail-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: start; }
.aside { position: sticky; top: 90px; }
.dbox { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; margin-bottom: 18px; }
.dbox h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 13px; }
.dbox li { color: var(--gray); font-size: 14px; margin-bottom: 8px; padding-left: 14px; position: relative; list-style: none; }
.dbox li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.dbox-alt { background: var(--dk); border-color: var(--dk); color: var(--dkt); position: relative; overflow: hidden; }
.dbox-alt::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(0,64,160,.32), transparent 70%); }
.dbox-alt h4 { color: #fff; position: relative; }
.dbox-alt p { color: var(--dkd); font-size: 14px; margin-bottom: 15px; position: relative; }
.dbox-alt .btn { display: block; text-align: center; background: linear-gradient(96deg, var(--gold), var(--gold-l)); color: #3A2600; padding: 11px; border-radius: 5px; font-size: 15px; font-weight: 600; position: relative; }

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.gal figure { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gal img { width: 100%; height: 130px; object-fit: cover; }
/* 只有一张时是整幅信息图，缩略图裁切会把图上的字切没；
   width:auto 保证小图按原始尺寸居中显示，不被硬拉大糊掉 */
.gal.gal-single { grid-template-columns: 1fr; }
.gal.gal-single figure {
  background: #F7F9FC; padding: 18px;
  display: flex; align-items: center; justify-content: center;
}
.gal.gal-single img {
  width: auto; height: auto; max-width: 100%; max-height: 620px;
  object-fit: contain; border-radius: 6px;
}

.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 16px 0; }
.spec-table td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { color: var(--gray); width: 38%; }
.spec-table td:last-child { font-weight: 500; }

/* ===== 空状态 ===== */
.empty { text-align: center; padding: 70px 20px; color: var(--gray); }
.empty svg { width: 60px; height: 60px; stroke: #C8D0DA; fill: none; stroke-width: 1.5; margin: 0 auto 18px; }
.empty p { font-size: 15px; }

/* ===== 响应式 =====
   设计基准 1920（内容区 1824），容器不设上限，超大屏继续铺满：
     ≥2100  2K / 带鱼屏        留白 48，字号与图高再上一档
     1800~2099  1920 设计稿    留白 48
     1600~1799  15/16 寸笔电   留白 40，字号降一档
     1201~1499  1366/1440 笔电 留白 32
     ≤1200  平板（竖屏单列）
     ≤720   手机
     ≤380   小屏手机
   注意：min-width 与 max-width 混排时，写在后面的同权重规则会覆盖前面的，
   所以下面按「由宽到窄」排列，≥2100 必须写在 ≥1800 之后。
   ========================================= */

/* ≥1800：1920 设计稿原始比例 */
@media (min-width: 1800px) {
  .pgrid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
  .layout2 { grid-template-columns: 300px 1fr; gap: 48px; }
  .detail-wrap { grid-template-columns: 1fr 300px; gap: 48px; }
  .foot .cols { gap: 40px; }
  .pcard .ph { height: 210px; }
  .pcard h3, .pcard h4 { font-size: 18px; }
  .sec { padding: 88px 0; }
  .sec-t h2 { font-size: 36px; }
  .sec-t p { font-size: 17px; }
  .hero-title { font-size: 44px; }
  .phead { padding: 66px 0 58px; }
  .phead h1 { font-size: 40px; }
  .prose { font-size: 16px; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .news-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 26px; }
  /* 底栏字号：宽屏只调间距不放字，是「页面很宽但页脚字很小」的根源，这里补上 */
  .foot { font-size: 15px; }
  .foot h5 { font-size: 16.5px; }
  .foot .en { font-size: 12.5px; }
  .foot .bt { font-size: 14px; }
}

/* ≥2100：2K / 带鱼屏。容器不再有上限，留白仍是 48，
   这里只把字号、图高、正文行宽抬一档，避免「页面很宽但内容很小」 */
@media (min-width: 2100px) {
  .hero { padding: 96px 0 116px; }
  .hero-title { font-size: 54px; }
  .hero-lead { font-size: 18px; max-width: 800px; }
  .phead { padding: 72px 0 62px; }
  .phead h1 { font-size: 46px; }
  .phead p { font-size: 17.5px; max-width: 880px; }
  .sec { padding: 104px 0; }
  .sec-t h2 { font-size: 44px; }
  .sec-t p { font-size: 19px; }
  .page-pad { padding: 64px 0 96px; }
  .prose { font-size: 17px; }
  /* 行宽 / 版心宽度由末尾「宽屏详情页」一段的 --dw、--prose 统一控制，
     这里不再单独写死，否则两处打架（以前就出现过版心 1680、行宽还卡 1140） */
  .detail-wrap { grid-template-columns: 1fr 340px; gap: 52px; }
  .nd-title { font-size: 40px; }
  .nd-cover img { max-height: 560px; }
  .pcard .ph { height: 250px; }
  .pcard h3, .pcard h4 { font-size: 19px; }
  .pdhero > div { height: 540px; }
  /* 底栏字号再抬一档：2K / 带鱼屏上与其他组件同步放大 */
  .foot { font-size: 16px; }
  .foot h5 { font-size: 18px; }
  .foot .en { font-size: 13.5px; }
  .foot .bt { font-size: 15px; }
}

/* 1600~1799：15/16 寸笔电 —— 内容铺满 1600，留白收到 40 */
@media (max-width: 1799px) {
  .wrap { padding: 0 40px; }
  .pgrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
  .layout2 { grid-template-columns: 270px 1fr; gap: 40px; }
  .detail-wrap { grid-template-columns: 1fr 290px; gap: 40px; }
  .foot .cols { gap: 34px; }
  .sec { padding: 76px 0; }
  .sec-t h2 { font-size: 32px; }
  .hero-title { font-size: 40px; }
  .phead h1 { font-size: 36px; }
}

/* 1201~1499：1366 / 1440 笔电 */
@media (max-width: 1499px) {
  .wrap { padding: 0 32px; }
  .pgrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .layout2 { grid-template-columns: 250px 1fr; gap: 34px; }
  .detail-wrap { grid-template-columns: 1fr 270px; gap: 32px; }
  .foot .cols { gap: 28px; }
  .sec { padding: 68px 0; }
  .sec-t h2 { font-size: 29px; }
  .hero-title { font-size: 36px; }
  .phead h1 { font-size: 32px; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .news-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
}

/* ≤1200：平板（iPad 横竖屏、安卓平板）—— 侧栏收进正文下方，卡片两列 */
@media (max-width: 1200px) {
  .layout2 { grid-template-columns: 1fr; gap: 26px; }
  /* 单栏时侧栏不再粘顶，树回到自然高度，不做内部滚动 */
  .side { position: static; max-height: none; display: block; }
  .side .tree { overflow: visible; max-height: none; }
  .detail-wrap { grid-template-columns: 1fr; gap: 30px; }
  .aside {
    position: static;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px; align-items: start;
  }
  .aside .dbox { margin-bottom: 0; }
  .foot .cols { grid-template-columns: 1fr 1fr 1fr; }
  .pgrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  .news-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
  .sec { padding: 56px 0; }
  .sec-t h2 { font-size: 26px; }
  .hero-title { font-size: 32px; }
  .phead h1 { font-size: 30px; }
}

/* 平板竖屏 ≤960：七个一级菜单 + 34px 间距在 768 宽放不下会折行，
   提前收进汉堡菜单（只影响导航，不影响排版）

   移动端抽屉的三个要点（上一版三个都写错了）：
   1) top 用 100% 贴着导航底边，不再写死 70px —— 顶部还有 38px 信息条，
      导航底边实际在 108~113，写死 70 会把 Logo 和「申请试用」压掉一半；
   2) 高度用 --navh（JS 实测的导航底边）算，导航吸顶后正好铺到屏幕底部；
   3) 二级菜单默认收起，点行尾箭头展开 —— 全站 60 多个子链接一次性摊开
      有 1700px 高，等于把一份网站地图糊在脸上。 */
@media (max-width: 960px) {
  .menu { display: none; }
  .menu.open {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 2px 18px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(0, 24, 64, .14);
    max-height: calc(100vh - var(--navh, 108px));
    max-height: calc(100dvh - var(--navh, 108px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* 一级行用两列网格：左边链接、右边箭头。
     箭头不能再绝对定位到 li 上 —— li 展开后高度包含整个子菜单，
     箭头会被拉到子菜单中部（上一版就跑到「船舶海洋」那一行去了）。 */
  .menu > li {
    display: grid; grid-template-columns: 1fr auto; align-items: stretch;
    border-bottom: 1px solid var(--line);
  }
  .menu > li > a {
    grid-column: 1;
    display: flex; align-items: center;
    padding: 14px 0; border-bottom: 0;
    font-size: 16px; letter-spacing: 0; min-width: 0;
  }
  /* 桌面端的下划线动画在抽屉里没意义；.on 的规则更具体，要一起关掉 */
  .menu > li > a::after,
  .menu > li.on > a::after { display: none; }

  /* 手风琴箭头 */
  .sub-toggle {
    display: block; position: relative;
    grid-column: 2; grid-row: 1; width: 44px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .sub-toggle::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -6px 0 0 -4px;
    border-right: 2px solid #93A3B8; border-bottom: 2px solid #93A3B8;
    transform: rotate(45deg); transition: transform .2s;
  }
  .menu > li.expanded > .sub-toggle::before { transform: rotate(-135deg); margin-top: -1px; }

  /* 二级：默认收起，展开时横跨两列 */
  .menu .sub {
    display: none;
    grid-column: 1 / -1; grid-row: 2;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 10px 14px; background: none;
  }
  .menu > li.expanded > .sub { display: block; }
  .menu .sub a {
    padding: 11px 0; border-bottom: 1px dashed var(--line);
    font-size: 14.5px; white-space: normal;
  }
  /* 抽屉里也用缩进体现层级（步进比桌面小，屏幕窄）*/
  .menu .sub a.nv-d2 { padding-left: 14px; }
  .menu .sub a.nv-d3 { padding-left: 28px; }
  .menu .sub a.nv-d4 { padding-left: 42px; }
  .menu .sub a.nv-d5 { padding-left: 56px; }
  .menu .sub a.nv-d6 { padding-left: 70px; }
  /* 有子栏目的一级多留上边距，和上一组分开 */
  .menu .sub a.nv-kids { padding-top: 14px; }
  .menu .sub a.nv-kids:first-child { padding-top: 11px; }
  /* 悬停浮层在触摸端没有意义：改成内联平铺，和普通子项一样缩进，
     抽屉里点一下就能看到全部层级，不依赖 hover */
  .menu .sub .nv-fly {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 4px 14px; background: none; min-width: 0; z-index: auto;
  }
  .menu .sub a.nv-flyp::after { display: none; }

  .burger { display: block; font-size: 22px; }
  .topbar .wrap > span:first-child { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}

/* 抽屉打开时：锁住页面滚动 */
body.nav-open { overflow: hidden; }

@media (max-width: 720px) {
  .wrap { padding: 0 18px; }

  .sec { padding: 44px 0; }
  .sec-t h2 { font-size: 22px; }
  .sec-t p { font-size: 14.5px; }
  .hero-title { font-size: 27px; }
  .phead { padding: 36px 0 32px; }
  .phead h1 { font-size: 24px; }
  .phead p { font-size: 14.5px; }
  .pgrid { grid-template-columns: 1fr; gap: 16px; }
  .aside { display: block; }
  .aside .dbox { margin-bottom: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .cta-band .wrap { flex-direction: column; align-items: center; }
  .cta-band h3 { font-size: 21px; }
  .btn, .btn-w, .btn-w-o { display: block; text-align: center; margin: 0 0 11px; }
  .foot .cols { grid-template-columns: 1fr; gap: 24px; }
  .form { padding: 22px 18px; }
  .pager { gap: 4px; }
  .pager a, .pager span { min-width: 32px; height: 32px; padding: 0 8px; font-size: 13px; }
  .pager .info { display: none; }

  /* 表格类内容横向滚动，避免撑破视口 */
  .prose table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* 技术参数是「标签 + 值」两列，值往往较长（如「层级嵌套、并行状态、entry / during / exit 动作」），
     窄屏横滑会把值裁在屏幕外，改成换行更好读 */
  .spec-table { white-space: normal; table-layout: fixed; }
  .spec-table td { padding: 10px 12px 10px 0; word-break: break-word; }
  .spec-table td:first-child { width: 34%; }
  .prose table td, .prose table th { white-space: normal; min-width: 120px; }

  /* 长串（邮箱、型号、地址）不撑破 */
  .foot p, .prose, .pcard .desc, .phead p { overflow-wrap: break-word; word-break: break-word; }

  /* 表单控件字号 ≥16px，iOS Safari 才不会自动放大页面 */
  .field input, .field textarea, .field select { font-size: 16px; }
}

/* 超窄屏（iPhone SE / 小屏安卓，CSS 视口约 320px） */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .sec { padding: 38px 0; }
  .sec-t h2 { font-size: 20px; }
  .phead h1 { font-size: 21px; }
  .brand-logo { height: 38px; }
  .pcard .body { padding: 18px 16px; }
  .pcard .ph { height: 170px; }
  .tabs a { padding: 6px 14px; font-size: 13px; }
  .pager a, .pager span { min-width: 28px; height: 30px; padding: 0 6px; font-size: 12px; }
  .btn-apply { padding: 8px 14px; font-size: 13px; }
}

/* 横屏手机：屏幕矮，控制 Hero 与区块留白 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { display: none; }
  .sec { padding: 32px 0; }
}
/* ===== 区块标题下的「全部XX」链接 ===== */
/* 「全部新闻 →」胶囊
   配色取自官方 Logo 羽尖的金黄：浅金底 + 金色描边 + 深棕字，
   与上方蓝色小标签形成冷暖对比；悬停时实心金色反白。
   （若要换成红色系，把 --gold / --gold-l 三处改为 var(--red) 即可） */
.sec-more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 16px; padding: 8px 22px;
  border: 1px solid var(--gold); border-radius: 22px;
  background: #FFF8E8;
  color: #8A5A00; font-size: 14px; font-weight: 500; text-decoration: none;
  transition: .2s;
}
.sec-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec-more:hover {
  background: linear-gradient(96deg, var(--gold), var(--gold-l));
  border-color: var(--gold-l); color: #3A2600;
  box-shadow: 0 8px 20px rgba(224,160,0,.28);
}

/* ===== 新闻列表：图片卡片 ===== */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.news-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit; transition: .24s;
}
.news-card:hover { border-color: var(--blue); box-shadow: 0 12px 30px rgba(0, 64, 160, .10); transform: translateY(-2px); }
.news-card .nc-ph { position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.news-card .nc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.news-card:hover .nc-ph img { transform: scale(1.04); }
/* 没有缩略图时的渐变占位，避免出现灰色破图 */
.news-card .nc-ph-bg { position: absolute; inset: 0; }
.news-card .nc-ph-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .92); font-size: 26px; font-weight: 700; letter-spacing: 4px;
}
.news-card .nc-tag {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 4px;
  background: rgba(8, 16, 31, .62); color: #fff; font-size: 12px; letter-spacing: .5px;
  backdrop-filter: blur(2px);
}
.news-card .nc-body { padding: 18px 20px 16px; display: flex; flex-direction: column; flex: 1; }
.news-card .nc-body h3 {
  font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card .nc-body p {
  color: var(--gray); font-size: 13.8px; line-height: 1.8; margin-bottom: 14px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card .nc-meta {
  display: flex; align-items: center; gap: 14px; font-size: 12.8px; color: #63748C;
  padding-top: 12px; border-top: 1px solid #F0F3F7;
}
.news-card .nc-go { margin-left: auto; color: var(--blue); font-weight: 500; }

/* ===== 首页新闻：主推大图 + 右侧文字列表 ===== */
/* 内容框收窄居中：1920 及以上不再铺满整屏（与详情页 1520 同宽），
   否则左侧大图会到 1300px、右侧文字离图 300 多像素，整块看着发散。
   视口小于 1520 时自动退化为铺满，不影响笔记本与手机。 */
.news-lead-wrap {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 34px; align-items: stretch;
  max-width: 1520px; margin-left: auto; margin-right: auto;
}
/* 栅格项默认 min-width:auto，右侧标题 white-space:nowrap 会把整列顶宽，
   手机端就会横向溢出；这里放开收缩 */
.news-lead-wrap > * { min-width: 0; }
.news-side { display: flex; flex-direction: column; min-width: 0; }
.news-lead {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit; transition: .24s;
}
.news-lead:hover { border-color: var(--blue); box-shadow: 0 14px 34px rgba(0, 64, 160, .11); }
.news-lead .nl-ph { position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.news-lead .nl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
.news-lead:hover .nl-ph img { transform: scale(1.03); }
.news-lead .nl-ph-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0B3C8C, #1E6FD9);
}
.news-lead .nl-ph-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92); font-size: 28px; font-weight: 700; letter-spacing: 6px;
}
.news-lead .nl-tag {
  position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 4px;
  background: rgba(8,16,31,.64); color: #fff; font-size: 12.5px; letter-spacing: .5px;
}
.news-lead .nl-body { padding: 22px 26px 24px; }
.news-lead .nl-date { font-size: 12.5px; color: #63748C; }
.news-lead .nl-body h3 {
  font-size: 21px; font-weight: 700; line-height: 1.45; margin: 9px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-lead { display: flex; flex-direction: column; height: 100%; }
.news-lead .nl-body { display: flex; flex-direction: column; flex: 1; }
.news-lead .nl-body p {
  color: var(--gray); font-size: 14.5px; line-height: 1.85; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.news-lead .nl-go {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue); font-size: 14.5px; font-weight: 500;
}
.news-lead .nl-go svg { transition: transform .2s; }
.news-lead:hover .nl-go svg { transform: translateX(4px); }

/* 右侧列表 */
.news-side-item {
  position: relative; display: flex; align-items: center; gap: 14px;
  flex: 1;                       /* 四条等分整列高度，与左侧大图卡上下对齐 */
  padding: 16px 4px 16px 16px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: .2s;
}
/* 内容在各自格子里垂直居中：原先 align-items:flex-start 会让文字全贴顶，
   最后一条下方空出一大块，四条看起来「上重下轻」 */
.news-side-item:first-child { padding-top: 16px; }
.news-side-item:last-child { border-bottom: 0; padding-bottom: 16px; }
.nsi-bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(.3);
  width: 3px; height: 26px; border-radius: 2px; background: var(--blue);
  opacity: 0; transition: .2s;
}
.news-side-item:hover .nsi-bar { opacity: 1; transform: translateY(-50%) scaleY(1); }
.nsi-main { flex: 1; min-width: 0; }
.nsi-meta { display: block; font-size: 12px; color: #63748C; margin-bottom: 5px; }
.nsi-meta em {
  font-style: normal; color: var(--blue); background: var(--blue-xl);
  padding: 2px 7px; border-radius: 3px; margin-right: 8px;
}
.nsi-title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; font-weight: 500; line-height: 1.5; transition: color .2s;
}
.news-side-item:hover .nsi-title { color: var(--blue); }
.nsi-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; color: var(--gray); margin-top: 6px; line-height: 1.75;
}
.nsi-arrow {
  width: 17px; height: 17px; flex: 0 0 17px;
  fill: none; stroke: var(--blue);
  stroke-width: 2; opacity: 0; transform: translateX(-4px); transition: .2s;
}
.news-side-item:hover .nsi-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
  .news-lead-wrap { grid-template-columns: 1fr; gap: 22px; }
  .news-lead .nl-body { padding: 18px 20px 20px; }
  .news-lead .nl-body h3 { font-size: 18px; }
}

/* ===== 详情页分享条 ===== */
/* 统一放在正文末尾（template/share.php），分隔线示意「正文到此结束」 */
.article-share {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.sf-share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0; padding-top: 0;
}
.sf-share .ss-label { font-size: 13px; color: var(--gray); margin-right: 2px; }
.sf-share .ss-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer;
  transition: .2s; padding: 0; text-decoration: none;
}
.sf-share .ss-btn svg { fill: currentColor; stroke: none; }
.sf-share .ss-wx { color: #07C160; }
.sf-share .ss-qq { color: #12B7F5; }
.sf-share .ss-wb { color: #E6162D; }
.sf-share .ss-link { color: #8598B5; }
.sf-share .ss-btn:hover { border-color: currentColor; box-shadow: 0 4px 12px rgba(0,40,100,.10); transform: translateY(-1px); }
.sf-share .ss-tip { font-size: 13px; }
@media (max-width: 480px) { .sf-share .ss-label { display: none; } }

/* 微信扫码弹窗 */
.ss-mask {
  position: fixed; inset: 0; z-index: 1200; background: rgba(6,14,28,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ss-mask[hidden] { display: none; }
.ss-dialog {
  background: #fff; border-radius: 14px; padding: 30px 28px; text-align: center;
  max-width: 300px; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.ss-dialog b { display: block; font-size: 16px; margin-bottom: 16px; color: #141A22; }
.ss-dialog .ss-qr { display: flex; justify-content: center; margin-bottom: 14px; }
.ss-dialog p { font-size: 13px; color: #8598B5; margin-bottom: 16px; }
.ss-dialog button {
  padding: 8px 26px; border: 0; border-radius: 20px; background: #E8F0FE;
  color: var(--blue); font-size: 14px; cursor: pointer;
}
.ss-dialog button:hover { background: var(--blue); color: #fff; }

/* 新闻页搜索条 */
.news-search { display: flex; gap: 8px; }
.news-search input {
  flex: 1; padding: 11px 15px; font-size: 14.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 7px;
}
.news-search button {
  padding: 11px 24px; background: var(--blue); color: #fff;
  border: 0; border-radius: 7px; cursor: pointer; font-size: 14.5px;
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 方案/案例卡片的封面图
 *
 * 图是 1600x900（16:9），卡片宽约 466px，完整显示需要约 262px 高。
 * 原来固定 height:150px + object-fit:cover 会裁掉 43%，
 * 导致图上的大字标题被切一半。
 * 现在改用 aspect-ratio 自适应宽度 + contain 完整显示。
 */
.pcard .ph { overflow: hidden; }
.pcard .ph img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: #F5F9FF;
}
.pcard:hover .ph img { transform: scale(1.03); }
.pcard .ph { position: relative; }
/* 封面图上的行业角标 */
.pcard .ph .ind-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--blue);
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
}
/* 有封面图的卡片：容器按 16:9 自适应 */
.pcard.has-cover .ph { height: auto; aspect-ratio: 16 / 9; padding: 0; }
/* 无封面图的卡片：保持原来的固定高度底色块 */
.pcard.no-cover .ph { height: 150px; background: linear-gradient(135deg, #E8F0FE, #F5F9FF); }

/* ===== 宽屏详情页：右侧「关联框」外移到版心外侧的留白里 =====
   问题：1920 屏上版心 1520，正文 1060 结束在 1308，右侧关联框 1372~1672，
   紧贴正文右缘（gap 仅 64），而页面右侧还空着 248 —— 卡片像是被正文挤在中间，
   读者视线一走到行尾就撞上卡片边框，长文阅读容易累。
   做法：只把 .detail-wrap 整体向右加宽（负 margin-right），让 1fr 主栏吃掉
   这份余量、侧栏跟着落到接近视口右缘的位置。正文行宽仍是 1060（不放大字号、
   不拉长行），变的是「正文 — 关联框」之间的呼吸间距（64 → 约 190）。
   外推量按屏宽计算，且上限卡在版心外留白之内，任何宽度都不会产生横向滚动条：
     1920 → 128（卡片右缘留约 120）；1800 → 68；≤1660 自动归零，等于什么都没变。
   卡片本身、sticky 跟随、询价与产品线全部保留，功能不受影响。 */
   --dw   版心宽（面包屑 / 页头 / 正文 / 侧栏共用的那个框）
   --prose 正文行宽（段落、标题；图与组件跟主栏同宽）

   1920 及以下沿用 1520 / 1060。
   再往上按屏宽分档抬：2K（2560）上如果还锁 1520，正文只占屏幕 44%，
   和一级菜单那种整屏铺开的版式落差太大 —— 读者会觉得「内容缩在中间一条」。
   分档而不是一次放到最大，是为了让 2100~2400 的屏不至于又变成另一种极端。
     2100+ → 版心 1800 / 行宽 1300
     2400+ → 版心 2040 / 行宽 1460（2560 屏上一行约 80 字，字号同步抬到 18px）
   版心宽度反过来决定 .detail-wrap 外推量（上限 132），任何宽度都不会横向滚动。 */
body.page-detail { --dw: 1520px; --prose: 1060px; }
@media (min-width: 2100px) { body.page-detail { --dw: 1800px; --prose: 1300px; } }
@media (min-width: 2400px) { body.page-detail { --dw: 2040px; --prose: 1460px; } }
@media (min-width: 2400px) {
  /* 行宽到 1460 还配 17px 会显得字小、行稀，字号跟着抬一档；
     侧栏同步加宽，免得正文行尾和关联框之间空出一大片 */
  .prose { font-size: 18px; line-height: 1.95; }
  .detail-wrap { grid-template-columns: 1fr 380px; gap: 56px; }
}
@media (min-width: 1500px) {
  body.page-detail .detail-wrap {
    margin-right: calc(-1 * clamp(0px, (100vw - var(--dw)) / 2 - 72px, 132px));
  }
  /* 主栏吃掉外推出来的余量后，.dspec / 正文插图 / 表格会跟着变宽，
     与文字宽度脱节。把内容列本身钉住，图、参数框、正文同宽。 */
  body.page-detail .detail-wrap > main { max-width: var(--prose, 1060px); }
  /* 移出版心后卡片四周是页面留白，加一层极淡投影让它「浮」着，
     与版心内那种贴边卡片区分开（颜色取标题深蓝的低透明度，不用灰） */
  body.page-detail .aside .dbox { box-shadow: 0 8px 28px rgba(16, 35, 70, .07); }
}

/* ===== 正文「分类切换」组件：物理元件库七类元件 =====
   源站是凡科 tabpack（点标签切下面整块图 + 说明）。搬到正文里时不能依赖
   模板逻辑——后台 content 是纯 textarea 存 HTML，所以结构自包含，
   只靠 data-amlib 标记 + footer 里一段 15 行的 JS 切 class。
   视觉沿用站内的浅灰底 + 1px 边框卡片，激活态用品牌深蓝（--blue）。 */
.amlib { margin: 24px 0 30px; }
.amlib-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.amlib-tab {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 14.5px; line-height: 1;
  padding: 11px 20px; border-radius: 6px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.amlib-tab:hover { border-color: var(--blue); color: var(--blue); }
.amlib-tab.is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.amlib-tab:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.amlib-panel { display: none; }
.amlib-panel.is-on {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 30px; align-items: center;
  background: #F7F9FC; border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 28px;
}
.amlib-fig { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.amlib-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 4px; }
.amlib-copy h5 { font-size: 16px; font-weight: 600; color: var(--blue); margin: 0 0 10px; line-height: 1.6; }
.amlib-copy p { margin: 0 0 9px; max-width: 100%; font-size: 14.5px; line-height: 1.85; color: var(--gray); }
.amlib-copy p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .amlib-panel.is-on { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
}
@media (max-width: 560px) {
  .amlib-nav { gap: 6px; }
  .amlib-tab { padding: 10px 13px; font-size: 13.5px; }
  .amlib-fig { padding: 8px; }
}

/* ===== 正文「分类切换」组件：八大物理域元件符号条 =====
   与 .amlib 共用一套交互（data-amstrip，footer 里同一个 initTabs），
   差别在面板内容：这里是一张 4257×657 的横向元件符号长图，
   容器给横向滚动，窄屏也不会把符号压成小点。 */
.amstrip { margin: 22px 0 34px; }
.amstrip-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.amstrip-tab {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 14.5px; line-height: 1;
  padding: 11px 20px; border-radius: 6px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.amstrip-tab:hover { border-color: var(--blue); color: var(--blue); }
.amstrip-tab.is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.amstrip-tab:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.amstrip-panel { display: none; }
.amstrip-panel.is-on { display: block; }
.amstrip-frame {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 10px 12px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.amstrip-frame img { display: block; width: 100%; min-width: 760px; height: auto; margin: 0; }
.amstrip-hint { display: none; margin: 9px 0 0; font-size: 12.5px; color: var(--gray); }
.amstrip.has-scroll .amstrip-hint { display: block; }
.amstrip-frame::-webkit-scrollbar { height: 8px; }
.amstrip-frame::-webkit-scrollbar-thumb { background: #CBD5E6; border-radius: 4px; }
.amstrip-frame::-webkit-scrollbar-track { background: #F1F4F9; border-radius: 4px; }
@media (max-width: 560px) {
  .amstrip-nav { gap: 6px; }
  .amstrip-tab { padding: 10px 13px; font-size: 13.5px; }
  .amstrip-frame { padding: 6px 8px; }
  .amstrip-frame img { min-width: 680px; }
}

/* ===== 正文「一维物理建模」原理图（产品 1091） =====
   源站把那句说明烤进截图里：5040 宽的图上字号约 56px，缩到正文宽度只剩 3~4px，
   等于一段读不了的糊字。这里把蓝底说明拆成真文字，截图只留原理图画布
   （原图裁掉说明块后 5040×1720）。画布底色 #F2F2F2 和卡片同色，接缝看不出来。 */
.amsim { background: #F2F2F2; border-radius: 18px; padding: 30px 34px 18px; margin: 22px 0 30px; }
/* 注意两个类名要连 body.page-detail 一起写：正文段落的
   `body.page-detail .prose p { max-width: var(--prose) }` 权重更高，
   只写 .prose .amsim-note 会被它盖掉，蓝底卡又会拉满整行 */
body.page-detail .prose .amsim-note,
.prose .amsim-note {
  max-width: 48%; margin: 0 0 4px;
  background: #1E7BA8; color: #fff; border-radius: 16px;
  padding: 18px 24px; font-size: 1em; line-height: 1.85;
}
.amsim img { width: 100%; height: auto; border-radius: 6px; margin: 0; }

/* ===== 正文「分类切换」组件：八大物理域元件库（产品 1091 物理建模） =====
   源站 anymath h-col-143 的 tabpack（id=1164）：8 个物理域标签，点一个，
   下面整条元件符号图换成该物理域的。
   和 .amlib / .amstrip 共用 footer 里的 initTabs（data-amdom），
   面板里是一张 2560×395 的符号长图（6.5:1），按主栏宽度铺满。
   8 张图合计约 870KB，所以只有第一个面板直接给 src，其余挂在 data-src 上，
   切到那一格才下载（initTabs 里统一处理），避免一进页面就拉全量。 */
.amdom { margin: 26px 0 36px; }
.amdom-lead { margin: 0 0 16px; font-size: 14.5px; line-height: 1.8; color: var(--gray); }
.amdom-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.amdom-tab {
  position: relative;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #CFE1F2; background: #fff; color: #14476B;
  font-family: inherit; font-size: 15px; line-height: 1;
  padding: 12px 22px; border-radius: 9px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.amdom-tab:hover { border-color: var(--blue-l); color: var(--blue); }
.amdom-tab.is-on {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 64, 160, .22);
}
/* 激活标签下的小三角，指向下面的面板（源站也是这个指向） */
.amdom-tab.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--blue); border-bottom: 0;
}
.amdom-tab:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.amdom-panel { display: none; }
.amdom-panel.is-on { display: block; }
.amdom-frame {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 14px 18px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.amdom-frame img { display: block; width: 100%; min-width: 720px; height: auto; margin: 0; }
.amdom-frame::-webkit-scrollbar { height: 8px; }
.amdom-frame::-webkit-scrollbar-thumb { background: #CBD5E6; border-radius: 4px; }
.amdom-frame::-webkit-scrollbar-track { background: #F1F4F9; border-radius: 4px; }
.amdom-hint { display: none; margin: 10px 0 0; font-size: 12.5px; color: var(--gray); }
.amdom.has-scroll .amdom-hint { display: block; }
@media (max-width: 900px) {
  .amsim { padding: 22px 20px 14px; }
  .prose .amsim-note, body.page-detail .prose .amsim-note { max-width: 100%; font-size: 15px; padding: 15px 18px; }
  .amdom-tab { padding: 11px 17px; font-size: 14px; }
  .amdom-frame { padding: 10px 12px; }
}
@media (max-width: 560px) {
  .amsim { padding: 16px 14px 10px; border-radius: 14px; }
  .prose .amsim-note, body.page-detail .prose .amsim-note { font-size: 14px; padding: 13px 16px; border-radius: 12px; }
  .amdom { margin: 20px 0 28px; }
  .amdom-nav { gap: 7px; }
  .amdom-tab { padding: 10px 13px; font-size: 13.5px; border-radius: 8px; }
  .amdom-frame img { min-width: 660px; }
}

/* ===== 正文「开发环境」交互组件：左五个入口 / 右演示媒体 =====
   源站 anymath h-col-149 的 tabpack（id=1479）是左竖排入口 + 右图/视频。
   这里自包含成一段 HTML（data-amdev），JS 复用 initTabs 切 class，
   蓝底 #4390B4 与浅蓝激活态 #78C1E7 沿用源站配色。 */
.amdev {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: 26px; align-items: start;
  background: #4390B4; border-radius: 22px;
  padding: 28px 30px; margin: 24px 0 32px;
}
.amdev-nav { display: flex; flex-direction: column; gap: 6px; }
.amdev-tab {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 10px 12px; border: 0; background: none;
  border-radius: 10px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.35;
  color: #fff; transition: background .18s;
}
.amdev-tab:hover { background: rgba(255, 255, 255, .16); }
.amdev-tab.is-on { background: #78C1E7; }
.amdev-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.amdev-ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px;
  background: #fff; display: grid; place-items: center;
}
.amdev-ico img { width: 24px; height: 24px; display: block; margin: 0; border-radius: 0; }
.amdev-main { min-width: 0; }
.amdev-panel { display: none; }
.amdev-panel.is-on { display: block; }
.amdev-media {
  margin: 0 0 16px; border-radius: 12px; overflow: hidden;
  background: #0E1620; line-height: 0;
}
.amdev-media img,
.amdev-media video {
  display: block; width: 100%; height: auto;
  margin: 0; border-radius: 0; background: #0E1620;
}
/* 视频预载为 none 时浏览器不知道尺寸，先用海报的宽高比占位，避免切换时高度跳动 */
.amdev-media-video { position: relative; }
.amdev-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9); background: rgba(10, 22, 32, .45);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .18s, opacity .2s, visibility .2s;
  padding: 0; font-family: inherit;
}
.amdev-play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  border-left: 21px solid #fff;
}
.amdev-play:hover { background: rgba(10, 22, 32, .65); }
.amdev-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.amdev-media.is-playing .amdev-play { opacity: 0; visibility: hidden; }
@media (max-width: 560px) {
  .amdev-play { width: 56px; height: 56px; }
  .amdev-play::before { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
}
.amdev-media video { aspect-ratio: 1280 / 611; }
.amdev-copy p {
  margin: 0 0 12px; max-width: none;
  font-size: 15px; line-height: 1.9; color: #fff;
}
.amdev-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1080px) {
  .amdev { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px; border-radius: 18px; }
  .amdev-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .amdev-tab { width: auto; flex: 1 1 44%; font-size: 15px; padding: 8px 10px; gap: 10px; }
  .amdev-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; }
  .amdev-ico img { width: 20px; height: 20px; }
}
@media (max-width: 560px) {
  .amdev { padding: 14px 12px; }
  .amdev-tab { flex: 1 1 100%; font-size: 14.5px; }
  .amdev-copy p { font-size: 14px; }
}

/* ===== 正文「集成与设备」生态伙伴卡片 =====
   源站 anymath h-col-148：六组彩色面板，每板若干条「logo + 说明」，
   没有交互，纯静态排版。面板底色用 --amint-bg 行内传入，
   和上方 h4 的小色块一一对应。 */
.amint {
  background: var(--amint-bg, #F7F9FC);
  border-radius: 20px;
  padding: 4px 32px 8px;
  margin: 0 0 34px;
}
.amint-item {
  display: grid; grid-template-columns: 212px minmax(0, 1fr);
  gap: 30px; align-items: center; padding: 24px 0;
}
.amint-item + .amint-item { border-top: 1px solid rgba(255, 255, 255, .75); }
.amint-logo {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 10px 12px;
  background: #fff; border-radius: 12px;
}
.amint-logo.is-sq { height: 172px; }
.prose .amint-logo img {
  display: block; width: 100%; height: 100%;
  margin: 0; border-radius: 0; object-fit: contain;
}
.prose .amint-txt p {
  margin: 0; max-width: none;
  font-size: 15px; line-height: 1.88; color: #31383F;
}
.prose .amint-txt p + p { margin-top: 15px; }
.prose .amint-txt .amint-lead { color: #141D2B; font-weight: 500; }
.prose .amint-txt ol { margin: 8px 0 0 22px; max-width: none; }
.prose .amint-txt li {
  margin: 0 0 4px; font-size: 15px; line-height: 1.88; color: #31383F;
}
.prose .amint-txt li:last-child { margin-bottom: 0; }
.prose h4.amint-head {
  display: flex; align-items: center; gap: 11px;
  font-size: 19px; margin: 36px 0 14px; padding: 0;
}
.prose h4.amint-head::before {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--amint-bg, #1E5FA8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09);
}
@media (max-width: 900px) {
  .amint { padding: 2px 18px 6px; border-radius: 16px; margin-bottom: 26px; }
  .amint-item { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 0; }
  .amint-logo { width: 186px; height: 88px; }
  .amint-logo.is-sq { width: 172px; height: 172px; }
  .prose .amint-txt p,
  .prose .amint-txt li { font-size: 14.5px; }
}
@media (max-width: 560px) {
  .amint { padding: 2px 14px 4px; }
  .amint-logo { width: 158px; height: 76px; padding: 8px 10px; }
  .amint-logo.is-sq { width: 140px; height: 140px; }
  .prose h4.amint-head { font-size: 17px; margin-top: 28px; }
}

/* ===== 正文「代码生成」：从模型到硬件实现 =====
   源站 anymath h-col-147。方案优势 / 应用领域在源站本来就是静态排版
   （不是 tab、不分页），这里照搬成一整屏静态内容，读者一屏往下读完。 */
.amhero {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px; align-items: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 30px; margin: 6px 0 34px;
}
.prose .amhero-txt h4 { margin: 0 0 12px; font-size: 26px; line-height: 1.35; }
.prose .amhero-txt p { margin: 0; font-size: 16px; color: var(--gray); max-width: none; }
.prose .amhero-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }

/* 方案优势：两栏静态列表 */
.amadv {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 52px; margin: 20px 0 34px;
}
.amadv-item { min-width: 0; }
.amadv-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.prose .amadv-ico {
  flex: 0 0 38px; width: 38px; height: 38px; margin: 0;
  object-fit: contain; border-radius: 0;
}
.prose .amadv-h span { font-size: 17px; font-weight: 700; color: #12233D; line-height: 1.45; }
.prose .amadv-item p { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.88; color: var(--gray); }

/* 应用领域：浅灰底上的白卡九宫格 */
.amapp {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; padding: 22px; margin: 20px 0 34px;
  background: #F4F6F9; border-radius: 18px;
}
.amapp-item { background: #fff; border-radius: 14px; padding: 24px 20px; }
.prose .amapp-ico {
  display: block; width: 44px; height: 44px; margin: 0 0 14px;
  object-fit: contain; border-radius: 0;
}
.prose .amapp-item h5 { font-size: 16.5px; font-weight: 700; color: #12233D; margin: 0 0 9px; line-height: 1.45; }
.prose .amapp-item p { margin: 0; max-width: none; font-size: 13.8px; line-height: 1.82; color: var(--gray); }

/* ===== 正文「电力行业元件库」：8 类元件分类切换 =====
   源站 anymath h-col-118。每个分类下是一句说明 + 一组「符号图 + 元件名」，
   与 .amlib / .amdom 共用 footer 里的 initTabs（data-ampwlib）。
   43 张符号图单张只有 2~5KB，直接 src + lazy，不必挂 data-src。 */
.ampwlib {
  margin: 22px 0 34px; padding: 18px 22px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.ampwlib-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ampwlib-tab {
  position: relative;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #D5E3F1; background: #F7FAFD; color: #14476B;
  font-family: inherit; font-size: 13.5px; line-height: 1;
  padding: 10px 16px; border-radius: 8px; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}
.ampwlib-tab:hover { border-color: var(--blue-l); color: var(--blue); }
.ampwlib-tab.is-on {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px rgba(0, 64, 160, .2);
}
.ampwlib-tab.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--blue); border-bottom: 0;
}
.ampwlib-tab:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.ampwlib-panel { display: none; }
.ampwlib-panel.is-on { display: block; }
body.page-detail .prose .ampwlib-intro {
  max-width: none; margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: var(--gray);
}
.ampwlib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 4px 10px;
}
.ampwlib-item { padding: 8px 4px 6px; text-align: center; }
.prose .ampwlib-item img {
  display: block; width: 100%; height: 86px; margin: 0 0 8px;
  object-fit: contain; border-radius: 0; background: transparent;
}
.prose .ampwlib-item span { display: block; font-size: 12.5px; line-height: 1.5; color: #3B4A5E; }
@media (max-width: 900px) {
  .ampwlib { padding: 15px 16px 16px; }
  .ampwlib-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .prose .ampwlib-item img { height: 72px; }
}
/* 2K/宽屏：主栏到 1300~1460 后 6 格会被拉得很开，符号显得偏小，抬一档 */
@media (min-width: 1500px) {
  .ampwlib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .prose .ampwlib-item img { height: 104px; }
  .prose .ampwlib-item span { font-size: 13px; }
}
@media (max-width: 560px) {
  .ampwlib { padding: 13px 12px 14px; margin: 18px 0 28px; }
  .ampwlib-nav { gap: 6px; }
  .ampwlib-tab { padding: 9px 12px; font-size: 12.5px; border-radius: 7px; }
  .ampwlib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prose .ampwlib-item img { height: 62px; }
  .prose .ampwlib-item span { font-size: 11.5px; }
}

/* 开发流程末端的硬件实拍：图 + 深色条说明 */
.prose .amhw-lead { margin: 26px 0 12px; font-size: 14.5px; color: var(--gray); }
.amhw {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 0 0 6px;
}
.amhw-item {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.prose .amhw-item img {
  display: block; width: 100%; height: 148px; padding: 12px;
  margin: 0; border-radius: 0; object-fit: contain; background: #fff;
}
.amhw-item figcaption {
  background: #343A40; color: #fff;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.5; text-align: center;
}
@media (max-width: 900px) {
  .amhero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px; }
  .prose .amhero-txt h4 { font-size: 22px; }
  .amhero-fig { max-width: 360px; }
  .amadv { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .amapp { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .amhw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .amhero { padding: 18px; border-radius: 14px; }
  .prose .amhero-txt h4 { font-size: 20px; }
  .prose .amhero-txt p { font-size: 14.5px; }
  .amapp { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .amapp-item { padding: 20px 18px; }
  .amhw { grid-template-columns: minmax(0, 1fr); }
  .prose .amhw-item img { height: 140px; }
}

/* ===== 正文「有限状态机库」=====
   源站 anymath h-col-146。应用场景 5 项、丰富功能 5 项在源站是 tab，
   这里按要求全部静态铺开，一屏读完，不切页。 */
.fsm-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 40px; align-items: center;
  background: linear-gradient(120deg, #F3F8FD 0%, #E8F1FB 100%);
  border-radius: 20px; padding: 30px 36px; margin: 6px 0 34px;
}
.prose .fsm-tagline {
  margin: 0 0 10px; max-width: none;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #4A7EA8;
}
.prose .fsm-hero-txt h4 {
  margin: 0; max-width: none;
  font-size: 25px; font-weight: 700; line-height: 1.4; color: #12233D;
}
.prose .fsm-hero-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }

/* 有限状态机有什么作用：左图右文 */
.fsm-what {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
  margin: 18px 0 34px;
}
.prose .fsm-what-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 10px; }
.prose .fsm-what-txt p { margin: 0; max-width: none; font-size: 15.5px; line-height: 1.95; color: var(--gray); }

/* 应用场景：5 张白卡（3 + 2） */
.fsm-sc {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 18px 0 36px;
}
.fsm-sc-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 22px 26px;
}
.prose .fsm-sc-ico {
  display: block; width: 42px; height: 42px; margin: 0 0 16px;
  object-fit: contain; border-radius: 0;
}
.prose .fsm-sc-item h5 { margin: 0 0 10px; font-size: 16.5px; font-weight: 700; color: #1B6FA8; line-height: 1.45; }
.prose .fsm-sc-item p { margin: 0; max-width: none; font-size: 13.8px; line-height: 1.85; color: var(--gray); }

/* 优势：左侧竖线时间轴 + 图标节点（线按条分段，不穿过图标） */
.fsm-adv { position: relative; margin: 20px 0 36px; padding-left: 66px; }
.fsm-adv-item { position: relative; padding-bottom: 34px; }
.fsm-adv-item:last-child { padding-bottom: 0; }
/* 图标中心在 -42px，线宽 2px → left:-43px */
.fsm-adv-item:not(:last-child)::before {
  content: ""; position: absolute; left: -43px; top: 54px; bottom: 0;
  width: 2px; background: #CFE1F2;
}
.prose .fsm-adv-ico {
  position: absolute; left: -66px; top: -4px;
  width: 48px; height: 48px; margin: 0;
  object-fit: contain; border-radius: 0;
}
.prose .fsm-adv-h {
  margin: 6px 0 10px; max-width: none;
  font-size: 18px; font-weight: 700; color: #12233D; line-height: 1.5;
}
.prose .fsm-adv-item > p { margin: 0 0 14px; max-width: none; font-size: 14.8px; line-height: 1.9; color: var(--gray); }
.fsm-adv-fig { margin: 0; }
.prose .fsm-adv-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 10px; }
.prose .fsm-adv-fig.is-narrow img { max-width: 430px; }

/* 浅蓝提示条 */
.prose .fsm-note {
  margin: 0 0 22px; max-width: none;
  background: #EAF2FB; border-left: 4px solid #1B6FA8; border-radius: 10px;
  padding: 15px 22px; font-size: 14.8px; line-height: 1.9; color: #1E3D5C;
}
/* 深蓝强调条 */
.prose .fsm-banner {
  margin: 30px 0 34px; max-width: none;
  background: linear-gradient(120deg, #0E5C92, #1B7EB8);
  border-radius: 12px; padding: 17px 26px;
  font-size: 16px; font-weight: 600; line-height: 1.7; color: #fff; text-align: center;
}

/* 丰富实用功能：2 列白卡 + 蓝色圆点 */
.fsm-feat {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 0 0 6px;
}
.fsm-feat-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px 22px;
}
.prose .fsm-feat-item h5 {
  position: relative; margin: 0 0 8px; padding-left: 15px;
  font-size: 15.8px; font-weight: 700; color: #1B6FA8; line-height: 1.55;
}
.prose .fsm-feat-item h5::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #4FA3DC, #1B6FA8);
}
.prose .fsm-feat-item p { margin: 0; max-width: none; font-size: 13.8px; line-height: 1.85; color: var(--gray); }

/* 高效调试：两列卡，第三张通栏 */
.fsm-debug {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: 18px 0 36px;
}
.fsm-debug-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 22px 18px;
}
.fsm-debug-item.is-wide { grid-column: 1 / -1; }
.prose .fsm-debug-item h5 { margin: 0 0 14px; font-size: 15.5px; font-weight: 700; color: #12233D; line-height: 1.5; }
.prose .fsm-debug-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 8px; background: #F7F9FC; }

/* 内置组件 / 自动代码生成等整幅大图 */
.fsm-fig { margin: 8px 0 8px; }
.prose .fsm-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 12px; }

@media (max-width: 900px) {
  .fsm-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px; }
  .fsm-hero-fig { max-width: 330px; }
  .prose .fsm-hero-txt h4 { font-size: 21px; }
  .fsm-what { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fsm-sc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsm-adv { padding-left: 58px; }
  .fsm-adv-item:not(:last-child)::before { left: -39px; top: 50px; }
  .prose .fsm-adv-ico { left: -58px; width: 44px; height: 44px; }
  .fsm-debug { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fsm-hero { padding: 20px 18px; border-radius: 16px; }
  .prose .fsm-hero-txt h4 { font-size: 19px; }
  .fsm-sc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fsm-sc-item { padding: 20px 18px; }
  .fsm-adv { padding-left: 52px; }
  .fsm-adv-item:not(:last-child)::before { left: -35px; top: 46px; }
  .prose .fsm-adv-ico { left: -52px; width: 40px; height: 40px; }
  .prose .fsm-adv-h { font-size: 16.5px; }
  .fsm-feat { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fsm-feat-item { padding: 18px 18px 20px; }
  .fsm-banner { font-size: 14.5px; padding: 15px 18px; }
  .fsm-debug-item { padding: 18px 16px 14px; }
}

/* ===== 正文图片点击放大（lightbox） =====
   footer.php 里统一绑定，产品/方案/案例等任何 .prose 正文都生效。
   JS 会给够大的图加 .can-zoom，小图标（<140px）不接管。 */
.prose img.can-zoom { cursor: zoom-in; }
.imgview {
  position: fixed; inset: 0; z-index: 9998;
  display: none; flex-direction: column;
  background: rgba(8, 13, 21, .965);
}
.imgview.is-open { display: flex; }
.imgview-stage {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 26px 82px;
  cursor: zoom-out;
  -webkit-overflow-scrolling: touch;
}
.imgview-stage img {
  display: block; margin: auto;
  max-width: none; max-height: none;
  background: #fff; border-radius: 0;
  box-shadow: 0 14px 60px rgba(0, 0, 0, .55);
  cursor: default;
  transition: opacity .18s ease;
}
.imgview-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 7px; border-radius: 999px;
  background: rgba(28, 38, 52, .86);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
}
.imgview-bar button {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 36px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent;
  color: #EAF1F8; font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.imgview-bar button:hover { background: rgba(255, 255, 255, .14); }
.imgview-bar button:focus-visible { outline: 2px solid #7FB6E8; outline-offset: 1px; }
.imgview-bar .imgview-count { padding: 0 8px; font-size: 12.5px; color: #9FB2C6; }
.imgview-close {
  position: fixed; right: 20px; top: 16px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(28, 38, 52, .86); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.imgview-close:hover { background: rgba(60, 78, 100, .9); }
.imgview-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(28, 38, 52, .7); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: none;
}
.imgview.has-group .imgview-nav { display: flex; align-items: center; justify-content: center; }
.imgview-nav:hover { background: rgba(60, 78, 100, .9); }
.imgview-prev { left: 16px; }
.imgview-next { right: 16px; }
body.view-open { overflow: hidden; }
@media (max-width: 560px) {
  .imgview-stage { padding: 56px 12px 78px; }
  .imgview-nav { width: 38px; height: 38px; }
  .imgview-close { right: 12px; top: 12px; width: 36px; height: 36px; }
  .imgview-bar button { min-width: 36px; height: 32px; padding: 0 9px; font-size: 12.5px; }
}

/* ===== 行业导航网格（解决方案总览）=====
   行业数由后台栏目决定，11 个时 4 列 → 4+4+3、6 列 → 6+5，
   比 auto-fill 在 1920 屏排出 5+5+1 的孤行更整齐 */
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
@media (min-width: 1100px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1700px) { .ind-grid { grid-template-columns: repeat(6, 1fr); } }

/* ===== 正文「数字系统」：h-col-119 =====
   源站是三栏并排的三个能力域，1440 下每栏文字只有 170px 宽，中文读起来
   一顿一顿的。这里改成纵向堆叠：每个域左图 + 标签、右文，
   文字列宽回到 600px 以上；示例图排在域块下方，整宽显示、不做轮播。 */
.amd-split {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px; align-items: center; margin: 14px 0 34px;
}
.amd-split.is-rev { grid-template-columns: 380px minmax(0, 1fr); }
.prose .amd-split p { margin: 0 0 14px; max-width: none; }
.prose .amd-split p:last-child { margin-bottom: 0; }
.prose .amd-split-fig { margin: 0; }
.prose .amd-split-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 0;
}

/* 优势 / 功能要点：两栏圆点列表，不用卡片，保持轻 */
.amd-points { display: grid; gap: 18px 44px; margin: 16px 0 26px; }
.amd-points-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amd-point { position: relative; padding-left: 19px; }
.amd-point::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 7px; height: 7px; border-radius: 50%; background: #2E86C1;
}
.prose .amd-point p { margin: 0; max-width: none; }

/* 能力域：左图 + 标签胶囊，右文 + 示例图 */
.amd-dom {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 34px; align-items: start; margin: 16px 0 30px;
}
.prose .amd-dom-pic {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 0;
}
/* 标签按源站的等宽三列排，字数不同的胶囊也右对齐 */
.amd-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.amd-tags span {
  background: #EAF4FB; color: #1B5F86; border-radius: 999px;
  padding: 6px 8px; font-size: 12.5px; line-height: 1.35; text-align: center;
}
.amd-dom-main p:last-child { margin-bottom: 0; }

/* 正文内 h3：比 h2 轻一档（不抢方案概述的蓝竖线），用蓝色小方块点出章节 */
.prose h3.amd-h3 {
  position: relative; font-size: 20px; font-weight: 700;
  color: #12233D; margin: 38px 0 14px; padding-left: 18px; line-height: 1.5;
}
.prose h3.amd-h3::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; border-radius: 2px; background: #2E86C1;
}
/* 域的示例图 / 模型图排在域块之下、跨出两栏：
   缩在 288 宽的文字列里，1200 宽的仿真框图会糊成一团色块 */
.amd-dom + .amd-wide { margin-top: 4px; }

/* 整宽图：UI 截图、流程图、仿真模型，点击可放大（全站 lightbox 接管） */
.amd-wide { margin: 18px 0 30px; }
.amd-wide + .amd-wide { margin-top: -6px; }
.amd-wide.amd-w-md { max-width: 900px; }
.amd-wide.amd-w-sm { max-width: 620px; margin-left: auto; margin-right: auto; }
.prose .amd-wide img {
  display: block; width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.amd-wide figcaption {
  margin-top: 10px; font-size: 13px; color: var(--gray); text-align: center;
}

@media (max-width: 1080px) {
  .amd-split, .amd-split.is-rev { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .amd-split.is-rev .amd-split-fig { order: 2; }
  .amd-split-fig { max-width: 460px; }
  .amd-dom { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .amd-dom-side { display: flex; align-items: center; gap: 22px; }
  .prose .amd-dom-pic { flex: 0 0 180px; width: 180px; }
  .amd-tags { margin-top: 0; max-width: 340px; }
  .prose h3.amd-h3 { font-size: 19px; margin: 32px 0 12px; }
}
@media (max-width: 720px) {
  .amd-points-2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .amd-dom-side { display: block; }
  .prose .amd-dom-pic { width: 160px; margin: 0 auto; }
  .amd-tags { margin-top: 14px; max-width: none; }
  .amd-tags span { font-size: 12px; padding: 5px 6px; }
  .prose h3.amd-h3 { font-size: 18px; margin: 28px 0 10px; padding-left: 16px; }
  .prose h3.amd-h3::before { width: 7px; height: 7px; }
  .amd-wide figcaption { font-size: 12px; }
}

/* 列表只有一个卡片时，auto-fit 会把空轨道折叠、卡片被拉成整行横条，
   封面图（通常 2.x:1）裁到 10:1 只剩一条色带。单卡时按卡片宽度排，
   不影响多卡场景。h-col-119「数字系统」是该行业唯一方案，就是这种情况 */
.pgrid:has(> .pcard:only-child) { grid-template-columns: minmax(300px, 360px); }

/* ===== 正文「飞机制造」：h-col-140（方案 17） =====
   源站把「覆盖全研发流程」做成一个圆角白卡：上面三张带图标的小卡，
   下面一张横向流程图；再往下是「应用」的 5 张卡和「专业模块库」的 5 个标签页
   （每页一句话说明 + 一组模型框图，3~5 张不等）。
   这里沿用同样的信息顺序：白卡压掉内层卡片边框，避免卡中卡；
   模块库的框图统一 176px 高居中，长宽比差异很大的图不会把行高撑歪。 */
.amair-flow {
  margin: 20px 0 34px; padding: 26px 28px 24px;
  border: 1px solid var(--line); border-radius: 18px; background: #fff;
}
.amair-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.amair-point { min-width: 0; }
.prose .amair-ico {
  display: block; width: 26px; height: 26px; margin: 0 0 12px;
  object-fit: contain; border-radius: 0;
}
.prose .amair-point p { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.9; color: #3B4A5E; }

.amair-flowfig { margin: 24px 0 0; padding-top: 22px; border-top: 1px dashed #E2EAF4; }
.prose .amair-flowfig img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.amair-flowfig figcaption { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--gray); text-align: center; }

/* 专业模块库：5 个标签页，每页「一句说明 + 一组等高的模型框图」 */
.amair-lib { margin: 20px 0 36px; }
.amair-lib-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.amair-lib-tab {
  position: relative;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #D5E3F1; background: #F7FAFD; color: #14476B;
  font-family: inherit; font-size: 13.5px; line-height: 1;
  padding: 11px 18px; border-radius: 8px; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}
.amair-lib-tab:hover { border-color: var(--blue-l); color: var(--blue); }
.amair-lib-tab.is-on {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px rgba(0, 64, 160, .2);
}
.amair-lib-tab.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--blue); border-bottom: 0;
}
.amair-lib-tab:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.amair-lib-panel { display: none; }
.amair-lib-panel.is-on { display: block; }
body.page-detail .prose .amair-lib-cap {
  max-width: none; margin: 0 0 14px; font-size: 14.5px; line-height: 1.8; color: var(--gray);
}
.amair-lib-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; padding: 20px 22px; background: #F3F3F3; border-radius: 14px;
}
.amair-cell {
  display: flex; align-items: center; justify-content: center; height: 176px;
}
.prose .amair-cell img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%; margin: 0;
  border-radius: 0; background: transparent;
}

@media (max-width: 900px) {
  .amair-flow { padding: 20px 18px; border-radius: 14px; }
  .amair-points { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .prose .amair-ico { width: 24px; height: 24px; margin-bottom: 9px; }
  .amair-lib-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 14px; }
  .amair-cell { height: 130px; }
}
@media (max-width: 560px) {
  .amair-lib-tab { padding: 10px 13px; font-size: 13px; }
  .amair-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amair-cell { height: 104px; }
  .amair-flowfig figcaption { font-size: 12px; }
}

/* hero 的紧凑版：文案只有两三行时，360px 的配图会把卡片撑得很空，
   收窄配图列并限制文案行宽（h-col-140 的飞机制造首屏就是这种情况） */
.amhero.is-tight {
  grid-template-columns: minmax(0, 34em) 320px;
  justify-content: center; gap: 56px;
}
body.page-detail .prose .amhero.is-tight .amhero-txt p { max-width: 34em; }
/* 配图本身是白底方图，铺在浅灰卡片上会露一块亮方的边；
   给它一个白圆角底当“产品图块”，边就变成设计的一部分 */
body.page-detail .prose .amhero.is-tight .amhero-fig {
  background: #fff; border-radius: 16px; overflow: hidden;
}
@media (max-width: 900px) {
  .amhero.is-tight { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 正文「航天」：h-col-120（方案 48） =====
   源站结构：首屏（航天 + 卫星插图）→「覆盖全研发流程」白卡（三张带图标小卡 +
   一张横流程图）→「火箭技术设计中的应用」6 张卡 →「近地和星际航天器研发中的应用」
   3 个板块（1 个整宽 + 2 个半宽），每个板块是图标 + 标题 + 若干条要点。
   这里沿用同样的信息顺序，第三个板块用 .amsec 承载：整宽卡内部要点分两栏。 */
.amsec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 34px; }
.amsec-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
}
.amsec-card.is-wide { grid-column: 1 / -1; }
.amsec-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.prose .amsec-ico { flex: 0 0 30px; width: 30px; height: 30px; margin: 0; object-fit: contain; border-radius: 0; }
.prose .amsec-h span { font-size: 16.5px; font-weight: 700; color: #12233D; line-height: 1.45; }
.amsec-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 32px;
  margin: 0; padding: 0; list-style: none;
}
.amsec-card:not(.is-wide) .amsec-list { grid-template-columns: minmax(0, 1fr); }
.prose .amsec-list li {
  position: relative; padding-left: 16px;
  font-size: 14px; line-height: 1.85; color: #3B4A5E;
}
.prose .amsec-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue-l);
}
@media (max-width: 900px) {
  .amsec { grid-template-columns: minmax(0, 1fr); }
  .amsec-list { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

/* ===== 正文「汽车行业」：h-col-116（方案 19） =====
   源站每个项目都是同一套结构：标题 → 一句话说明 → 一张整宽配图 →
   「待解决任务」两栏（带圆形小图标）→ 一张白卡列出该方案的能力点。
   统一成 .amproj：任务两栏 + 能力白卡。 */
.amproj { margin: 0 0 40px; }
.amproj:last-child { margin-bottom: 8px; }
.prose h4.amproj-h {
  margin: 0 0 8px; font-size: 19px; font-weight: 700; color: #12233D;
  display: flex; align-items: center; gap: 10px;
}
.prose h4.amproj-h::before {
  content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--blue);
}
.prose .amproj-p { margin: 0 0 18px; max-width: none; font-size: 14.5px; line-height: 1.9; color: var(--gray); }
.amproj-fig { margin: 0 0 20px; }
.prose .amproj-fig img {
  display: block; width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.amtask-h { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #12233D; }
.amtask {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 36px;
  margin: 0 0 18px; padding: 0; list-style: none;
}
.prose .amtask li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.8; color: #3B4A5E; }
.prose .amtask-ico {
  position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  margin: 0; object-fit: contain; border-radius: 0;
}
.amfeat {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 28px;
  margin: 0; padding: 20px 24px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.amfeat li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.8; color: #3B4A5E; }
.amfeat li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-l);
}
@media (max-width: 900px) {
  .amtask { grid-template-columns: minmax(0, 1fr); }
  .amfeat { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 18px; }
}
@media (max-width: 560px) {
  .amfeat { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 正文「AnyMath 私有化版」：h-col-141（产品 1090） =====
   源站是长页：首屏（图标 + 标题 + 说明 + 4 个标签 + 右侧插画）→「什么是私有化版」
   淡蓝说明块 →「应用环境」2 张白卡 →「闭环网络」两张彩色卡（蓝 / 绿）→
   「解决方案架构」整宽图 →「基础设施能力」4 张卡（部署/管理/信息安全/运维）→
   「性能对比」整宽图 →「适应行业」6 个行业。 */
.ampv-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: center;
  margin: 0 0 34px;
}
.prose .ampv-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 13px; color: var(--blue); font-weight: 600;
}
.prose .ampv-badge img { width: 22px; height: 22px; margin: 0; object-fit: contain; border-radius: 0; }
.prose .ampv-hero h4 { margin: 0 0 10px; font-size: 28px; line-height: 1.3; }
.prose .ampv-hero p { margin: 0 0 8px; max-width: none; font-size: 15px; line-height: 1.85; color: var(--gray); }
.prose .ampv-hero .ampv-sub { font-size: 17px; font-weight: 700; color: #12233D; margin-bottom: 12px; }
.ampv-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 16px 0 0; }
.ampv-pill {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 14px; font-size: 13.5px; color: #3B4A5E;
}
.prose .ampv-pill img { flex: 0 0 15px; width: 15px; height: 15px; margin: 0; object-fit: contain; border-radius: 0; }
.prose .ampv-hero-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 16px; background: #fff;
}
.ampv-lead {
  margin: 0 0 30px; padding: 24px 28px; border-radius: 16px;
  background: linear-gradient(135deg, #EAF2FE, #F6FAFF); border: 1px solid #D8E6FA;
}
.prose .ampv-lead h4 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: #12233D; }
.prose .ampv-lead p { margin: 0 0 10px; max-width: none; font-size: 14.5px; line-height: 1.9; color: #3B4A5E; }
.prose .ampv-lead p:last-child { margin-bottom: 0; }
.ampv-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 30px; }
.ampv-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.ampv-list { margin: 0; padding: 0; list-style: none; }
.prose .ampv-list li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.8; color: #3B4A5E;
}
.prose .ampv-list li:last-child { margin-bottom: 0; }
.prose .ampv-list.has-ico li { padding-left: 0; }
.prose .ampv-list.has-ico li::before { display: none; }
.prose .ampv-list li img { display: inline-block; width: 14px; height: 14px; margin: 0 7px 0 0; vertical-align: -2px; object-fit: contain; border-radius: 0; }
.prose .ampv-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-l);
}
.ampv-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 30px; }
.ampv-duo .ampv-card { color: #fff; border: none; }
.ampv-duo .ampv-card.is-blue { background: #1D5C99; }
.ampv-duo .ampv-card.is-green { background: #14874A; }
.prose .ampv-duo .ampv-list li { color: rgba(255, 255, 255, .94); }
.prose .ampv-duo .ampv-list li::before { background: rgba(255, 255, 255, .7); }
.ampv-fig { margin: 18px 0 30px; }
.prose .ampv-fig img {
  display: block; width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.ampv-infra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 30px; }
.ampv-infra .ampv-card { padding: 18px 18px 20px; }
.prose .ampv-infra-ico { display: block; width: 34px; height: 34px; margin: 0 0 10px; object-fit: contain; border-radius: 0; }
.prose .ampv-infra h5 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--blue); }
.ampv-ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 30px; }
.prose .ampv-ind-ico { display: block; width: 30px; height: 30px; margin: 0 0 10px; object-fit: contain; border-radius: 0; }
.prose .ampv-ind h5 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #12233D; }
.prose .ampv-ind p { margin: 0; max-width: none; font-size: 13.5px; line-height: 1.8; color: var(--gray); }
@media (max-width: 1100px) {
  .ampv-infra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ampv-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ampv-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ampv-hero-fig { max-width: 420px; }
  .ampv-2col, .ampv-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ampv-pills { grid-template-columns: minmax(0, 1fr); }
  .ampv-infra, .ampv-ind { grid-template-columns: minmax(0, 1fr); }
  .prose .ampv-hero h4 { font-size: 23px; }
}


/* ===== 吸顶分类标签栏（解决方案总览页 / 案例页共用 sf_cat_bar） ===== */
.cat-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* .nav 本身是 sticky;top:0;height:70px，所以分类栏吸在它正下方 */
  position: sticky;
  top: 70px;
  z-index: 90;
}
.cat-bar .wrap {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-bar .wrap::-webkit-scrollbar { display: none; }
.cat-bar-item {
  padding: 14px 16px;
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--gray);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cat-bar-item:hover { color: var(--blue); border-bottom-color: var(--blue); }
.cat-bar-item.on { color: var(--blue); font-weight: 500; border-bottom-color: var(--blue); }
.cat-bar-n {
  font-size: 12px;
  color: var(--blue);
  background: rgba(46, 134, 222, .1);
  border-radius: 9px;
  padding: 0 6px;
  line-height: 17px;
  min-width: 18px;
  text-align: center;
}
@media (max-width: 720px) {
  .cat-bar-item { padding: 11px 12px; font-size: 13.5px; }
}


/* ===== 统一页面头部（.phero）=====
   参照「关于我们」页的版式：金色小标签 + 大标题 + 描述。
   之前列表页用 .phead（浅色、无标签），详情页又用 .phead-tag（金框黄字），
   一站三套头部。现在 .phead 也走这套深蓝 hero，全站头部一个版式。 */
.phero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #10233F 0%, #1B3E75 55%, #245AA5 100%);
  color: #E4EBF5;
  padding: 60px 0 54px;
}
.phero::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
}
.phero::after {
  content: ""; position: absolute; right: -90px; top: -110px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,201,77,.13), transparent 70%);
}
.phero .wrap { position: relative; z-index: 2; }

/* 金色小标签：头部第一行，标明这是哪个板块 */
.phero-tag {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: #FFC94D;
  font-size: 14.5px; line-height: 1.6; font-weight: 500;
  letter-spacing: .5px;
  padding: 4px 16px; border-radius: 20px;
}
.phero h1 {
  font-size: 36px; font-weight: 700; letter-spacing: -.4px;
  color: #fff; margin: 14px 0 0;
}
.phero p {
  margin-top: 14px; font-size: 16.5px; color: #9DB0CC;
  max-width: 780px; line-height: 1.9;
}
.phero-meta {
  margin-top: 20px; font-size: 13px; color: #9FB0C6;
}
.phero-meta b { color: #FFC94D; font-size: 16px; }

/* 列表页 hero 里的图标方块：白描边 + 行业主题色，比之前的纯白方块更协调 */
.phero-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 48px;
}
.phero-ico svg {
  width: 26px; height: 26px; fill: none; stroke: #fff;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.phero-title { display: flex; align-items: center; gap: 16px; }

@media (min-width: 1280px) {
  .phero { padding: 66px 0 58px; }
  .phero h1 { font-size: 40px; }
}
@media (min-width: 2100px) {
  .phero { padding: 72px 0 62px; }
  .phero h1 { font-size: 46px; }
  .phero p { font-size: 17.5px; max-width: 880px; }
}
@media (max-width: 640px) {
  .phero { padding: 40px 0 36px; }
  .phero h1 { font-size: 27px; }
  .phero p { font-size: 15.5px; }
}


/* ===== 导航下拉：当前所在栏目的高亮（2026-10-22）=====
   下拉里的链接统一用 var(--ink) 深色（原来是 var(--gray) 灰字，一级菜单和
   二级菜单一深一浅，看着像二级菜单不可点）。当前页面对应的那一项加 .on：
   左边竖条 + 品牌蓝 + 淡蓝底，和一级菜单 .on 的蓝色下划线同一套语言，
   读者一眼能看出「我在哪一级」。手机端同一规则生效（抽屉里也是竖条）。 */
.menu .sub a.on {
  color: var(--blue); font-weight: 600;
  border-left-color: var(--blue); background: var(--blue-xl);
}

/* ===== 关于我们 · 公司简介标签（tag-strong）=====
   全站唯一不在 .sec-t 里的 .tag（g2 左栏布局，原为裸文本 15px/无背景），
   这里补一份左对齐药丸样式；字号 17px，比 .sec-t .tag（14.5px）大一级，
   与 30px 页面标题的层级匹配，且与同页「新闻动态」「服务承诺」标签语言一致 */
.tag-strong {
  display: inline-block; background: var(--blue-xl); color: var(--blue);
  font-size: 17px; font-weight: 500; letter-spacing: .5px;
  padding: 6px 20px; border-radius: 20px; margin-bottom: 14px;
}

/* ===== 底栏首末两列对称内缩（2026-10-23）=====
   用户反馈「两边应该对称，且没必要太靠边」：品牌栏与联系方式栏原来紧贴 .wrap 的
   48px 内边距（1440 档 32px），宽屏下相对上方限宽正文显得伸出太靠边。
   现给首末两列加等量内缩，两端留空一致；≤720 单列堆叠时取消——
   否则只有第一/最后一块缩进， stacked 列表里反而别扭。 */
.foot .cols > :first-child { padding-left: 36px; }
.foot .cols > :last-child { padding-right: 36px; }
@media (max-width: 720px) {
  .foot .cols > :first-child,
  .foot .cols > :last-child { padding-left: 0; padding-right: 0; }
}

/* ===== 底栏末栏右对齐：两端对齐（2026-10-23）=====
   「联系方式」栏已删除（完整联系信息以「联系我们」页为准），末栏变为「关于」。
   宽屏下末栏文字右对齐，与首栏左缘形成两端对齐——首栏 logo 距屏缘 84px、
   末栏链接文字距屏缘同为 84px（36px 列内缩 + 48px wrap 内边距），
   消除原「联系方式」栏文字左对齐、右缘空 189px 的视觉不对等。
   ≤1200 三列 / ≤720 单列时恢复左对齐：末栏不在行尾，右对齐会悬在中间。 */
.foot .cols > :last-child { text-align: right; }
@media (max-width: 1200px) {
  .foot .cols > :last-child { text-align: left; }
}

/* ===== 品牌栏服务热线 + 详情页底栏与正文同宽（2026-10-23）=====
   1) 品牌栏去掉介绍段落改服务热线（用户要求），金色大号字与深蓝底对比鲜明；
   2) 详情页底栏「和上面文章内容宽度对齐」：详情页正文版心是 --dw
      （1520/1800/2040 分档），底栏 .wrap 限到同宽并居中，首末栏撤掉 36px 内缩，
      左右缘与正文严格同线。非详情页正文是全宽铺满，底栏维持全宽 + 首末栏内缩，
      各自对齐自己的正文，互不影响。 */
.foot .hotline { margin-top: 2px; }
.foot .hotline span { display: block; font-size: 12.5px; color: var(--dkd); opacity: .75; margin-bottom: 3px; letter-spacing: 1px; }
.foot .hotline b { display: block; font-size: 21px; font-weight: 600; color: #FFC94D; letter-spacing: .5px; line-height: 1.25; }
body.page-detail .foot .wrap { max-width: var(--dw, 1520px); margin-left: auto; margin-right: auto; }
body.page-detail .foot .cols > :first-child { padding-left: 0; }
body.page-detail .foot .cols > :last-child { padding-right: 0; }

/* ============================================================
 * 技术资料下载页 download.php（2026-10-23）
 * 会员门槛三态：游客（注册/登录入口）/ 待审核 / 已停用
 * ============================================================ */
.dl-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.dl-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #F4F8FE, #fff);
  border-bottom: 1px solid var(--line);
}
.dl-ext {
  flex: none;
  min-width: 58px;
  padding: 7px 10px;
  text-align: center;
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .5px;
  border-radius: 6px;
}
.dl-ext-sm { min-width: 44px; padding: 4px 7px; font-size: 11px; border-radius: 4px; }
.dl-file-t { min-width: 0; }
.dl-file-t b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.45;
}
.dl-file-t span { display: block; font-size: 13px; color: var(--gray); margin-top: 4px; }

.dl-card .spec-table { margin: 0; }
.dl-card .spec-table td { font-size: 14px; }

.dl-act { padding: 22px 24px 24px; border-top: 1px solid var(--line); }
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  height: 46px;
  padding: 0 30px;
  background: var(--blue);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 6px;
  text-decoration: none;
  transition: .2s;
}
.dl-btn:hover { background: var(--blue-d); }
.dl-tip { font-size: 12.5px; color: var(--gray); margin-top: 12px; }

/* 门槛提示框：游客 / 待审核 / 已停用 三态 */
.dl-gate {
  background: var(--blue-xl, #E8F0FE);
  border: 1px solid #C9DCF8;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 20px 22px;
}
.dl-gate b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.dl-gate p { font-size: 14px; color: var(--gray); line-height: 1.8; }
.dl-gate-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.dl-gate-note { font-size: 12.5px; color: var(--gray); margin-top: 12px; opacity: .85; }
.dl-gate-warn {
  background: #FFFBF0;
  border-color: #F0DCAA;
  border-left-color: var(--gold);
}
.dl-gate-off {
  background: #FEF3F3;
  border-color: #F5D2D2;
  border-left-color: var(--red);
}

/* 从 act=file 被拦回时顶部的一条说明 */
.dl-alert {
  background: #FFF3F3;
  border: 1px solid #F5C6C6;
  color: #C0392B;
  font-size: 13.5px;
  padding: 11px 14px;
  border-radius: 6px;
  margin-bottom: 20px;
}

/* 其他技术资料列表 */
.dl-others { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dl-other {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 18px;
  text-decoration: none;
  transition: .2s;
}
.dl-other:hover { border-color: var(--blue); background: #F7FAFF; }
.dl-other-t {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-other-p {
  flex: none;
  max-width: 40%;
  font-size: 12.5px;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-arrow { flex: none; color: var(--gray); font-size: 15px; }
.dl-other:hover .dl-arrow { color: var(--blue); }

@media (max-width: 720px) {
  .dl-file { padding: 16px; gap: 11px; }
  .dl-file-t b { font-size: 14.5px; }
  .dl-act { padding: 18px 16px 20px; }
  .dl-btn { width: 100%; }
  .dl-gate { padding: 16px; }
  .dl-other { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; }
  .dl-other-t { flex-basis: 100%; white-space: normal; }
  .dl-other-p { max-width: none; }
  .dl-arrow { margin-left: auto; }
}

/* ===== 下载中心列表视图（download.php 不带 id，2026-10-23） ===== */
/* 会员状态条：正常会员（绿，区别于游客蓝/待审核黄/停用红） */
.dl-gate-ok {
  background: #F2FBF6;
  border-color: #CBEAD8;
  border-left-color: #2BA46B;
}
/* 关键词搜索 */
.dl-search { display: flex; gap: 10px; align-items: center; margin: 22px 0 6px; }
.dl-search input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--ink); background: #fff;
}
.dl-search input:focus { border-color: var(--blue); outline: none; }
.dl-search .btn { height: 42px; padding: 0 22px; }
.dl-search-reset { font-size: 13px; color: var(--gray); white-space: nowrap; }
.dl-search-reset:hover { color: var(--blue); }
/* 分组小标题 + 计数药丸 */
.dl-total { font-size: 13px; color: var(--gray); margin: 14px 0 4px; }
.dl-group-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 12px; font-size: 18px; font-weight: 600; color: var(--ink);
}
.dl-group-h a { color: var(--ink); }
.dl-group-h a:hover { color: var(--blue); }
.dl-count {
  font-size: 12px; font-weight: 400; color: var(--gray);
  background: #F2F5F9; border-radius: 10px; padding: 2px 9px;
}
@media (max-width: 720px) {
  .dl-search { flex-wrap: wrap; }
  .dl-search input { flex-basis: 100%; }
  .dl-group-h { font-size: 16.5px; margin-top: 24px; }
}

/* ============================================================
 * [data-sfgrid] 兜底规则（2026-10-23 修复单列 bug）
 * footer.php 的栅格美化 JS 会先删掉内联 grid-template-columns 再测量，
 * .pgrid 有下面的规则接手，而 [data-sfgrid] 此前只有 parts.php 的内联样式，
 * 内联被删后容器塌成隐式单列（每个产品卡独占一行）。
 * 值与 parts.php 内联保持一致：auto-fit + minmax(230px,1fr)。
 * ============================================================ */
[data-sfgrid] { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

/* ============================================================
 * 案例页「相关产品」紧凑版式（2026-10-23）
 * 用户要求：一个产品不占一行，一行 8 个产品位，放不下时自适应折两行。
 * 纯 CSS 分档、不加 data-sfgrid —— 栅格美化 JS 的 fitCols 会为了
 * 「末行填满」强制改列数（8 个产品在 7 列宽屏会被压成 4 列），
 * 紧凑位要的是稳定 8 列，不走那套逻辑。
 * ============================================================ */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px)  { .rp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .rp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .rp-grid { grid-template-columns: repeat(8, 1fr); } }

.rp-cell {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 10px 14px; transition: .2s; min-width: 0;
}
.rp-cell:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(20, 60, 120, .08); transform: translateY(-2px); }
.rp-cell .rp-img {
  width: 100%; height: 76px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; overflow: hidden;
}
.rp-cell .rp-img img { max-width: 100%; max-height: 76px; object-fit: contain; }
.rp-cell .rp-model {
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px; margin-bottom: 3px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-cell .rp-name {
  font-size: 12px; color: var(--gray); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
/* 无封面产品：型号充当主视觉，图片区留白收窄 */
.rp-cell .rp-img:empty { height: 8px; margin-bottom: 6px; }

/* ============================================================
 * 页脚 v2（2026-10-24 改版）
 * 原布局问题（实测 1440）：2fr+4×1fr+2×1.1fr 让后两栏宽 15px，
 * 网格是歪的；末栏单独右对齐破了左基线；品牌栏占 289px 只用
 * 150px；栏底参差 65px。v2 = 270px 名片 + 6 栏等宽 + 全左对齐。
 * 旧规则在文件前段，这里靠"后写覆盖"调整，不改动上面的历史样式。
 * ============================================================ */
:root { --dk3: #0A1626; }

.foot {
  background: var(--dk3);
  color: var(--dkd);
  font-size: 14px;
  padding: 46px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.foot .cols {
  display: grid;
  grid-template-columns: 270px repeat(6, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 0;
  align-items: start;
}
/* 撤掉 2026-10-23 的「首末两列 36px 对称内缩」和「末栏右对齐」 */
.foot .cols > :first-child { padding-left: 0; }
.foot .cols > :last-child { padding-right: 0; text-align: left; }
.foot .cols > div { min-width: 0; }

/* ---- 品牌名片 ---- */
/* 内部两组：简介（含二维码）/ 联系方式。桌面纵向堆叠，窄屏横向摊开。 */
.foot .fcard { display: flex; flex-direction: column; }
.foot .fcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.foot .fcard-id { display: flex; align-items: center; gap: 11px; }
.foot .fcard-id img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px; background: #fff; }
.foot .fcard-nm b { display: block; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: .4px; line-height: 1.25; }
.foot .fcard-nm span { display: block; font-size: 10px; letter-spacing: 1.7px; color: #6C84A4; margin-top: 3px; }
.foot .fcard-sg { font-size: 12.5px; color: #6E86A6; line-height: 1.75; margin: 0 0 18px; }
.foot .fcard-rule { height: 1px; background: rgba(255, 255, 255, .09); margin-bottom: 16px; }
.foot .fcard-tel { margin-bottom: 14px; }
.foot .fcard-tel span { display: block; font-size: 12px; letter-spacing: 1.6px; color: #7E91AC; margin-bottom: 5px; }
.foot .fcard-tel b { display: block; font-size: 23px; font-weight: 600; line-height: 1.1; letter-spacing: .6px; }
.foot .fcard-tel b a { display: inline; margin: 0; color: var(--gold); font-size: inherit; letter-spacing: inherit; }
.foot .fcard-tel b a:hover { color: #fff; }
.foot .fcard-row { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.65; color: #8FA3BF; margin-bottom: 9px; }
.foot .fcard-row svg { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; opacity: .5; }
.foot .fcard-row a { display: inline; margin: 0; color: #8FA3BF; }
.foot .fcard-row a:hover { color: var(--gold); }
/* 二维码：与 logo 同一行放右上角，名片高度因此只比链接栏高约 40px */
.foot .fcard-qr { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.foot .fcard-qr img { width: 72px; height: 72px; border-radius: 5px; background: #fff; }
.foot .fcard-qr span { font-size: 10.5px; color: #6E86A6; letter-spacing: .5px; line-height: 1; }

/* ---- 链接栏 ---- */
.foot .fcol { display: flex; flex-direction: column; }
.foot h5 { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .2px; margin: 0 0 18px; padding-bottom: 13px; position: relative; }
/* 标题下的金色短线：7 个标题长得一样是最难扫读的地方，加锚点 */
.foot h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 2px; background: var(--gold); border-radius: 1px; }
.foot .fcol > a { color: var(--dkd); display: block; font-size: 14px; line-height: 1.6; margin-bottom: 9px; transition: color .18s ease, transform .18s ease; }
.foot .fcol > a:hover { color: var(--gold); transform: translateX(2px); }
/* 「查看全部」尾巴：短发丝线 + 弱化字号，读作这栏的出口而不是第 6 个链接。
   注意两点：① 不能用 margin-top:auto（会让 4 项栏的尾巴被甩到栏底成孤立一行）；
   ② 分隔线用 34px 的 ::before 而不是 border-top——三列布局下栏宽 300px，
   border-top 会拉成一条贯穿整栏的长横线，像表格分隔。 */
.foot .fcol > a.tail { margin-top: 12px; padding-top: 0; font-size: 13px; color: #7C90AE; }
.foot .fcol > a.tail::before { content: ""; display: block; width: 34px; height: 1px; background: rgba(255, 255, 255, .14); margin-bottom: 10px; }
.foot .fcol > a.tail:hover { transform: none; }

/* ---- 版权条 ---- */
.foot .bt {
  margin-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 18px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 12.5px; color: #6E86A6; text-align: left;
}
.foot .bt .sp { opacity: .35; margin: 0 7px; }
.foot .bt a { display: inline; margin: 0; color: #6E86A6; font-size: 12.5px; }
.foot .bt a:hover { color: var(--gold); }
.foot .bt .bt-r { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

/* 断点：由宽到窄，全部重写（旧断点在前，必须在这里覆盖） */
@media (max-width: 1240px) {
  .foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
  /* 名片通栏：否则 7 项塞 3 列会剩一个孤儿。
     「简介 | 联系方式」横向摊开，避免名片独占一整行（1024 下曾撑到 1061px 高）。 */
  .foot .fcard {
    grid-column: 1 / -1; max-width: none;
    display: grid; grid-template-columns: 1.15fr 1fr;
    gap: 0 36px; align-items: start;
  }
  .foot .fcard-contact .fcard-rule { display: none; }
  .foot .fcard-sg { margin-bottom: 0; }
}
@media (max-width: 780px) {
  .foot { font-size: 15px; padding: 38px 0 0; }
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
  .foot .fcard { grid-template-columns: 1fr; gap: 14px 0; }
  .foot .fcard-contact .fcard-rule { display: block; margin-bottom: 14px; }
  .foot h5 { font-size: 16px; margin-bottom: 15px; padding-bottom: 11px; }
  .foot .fcol > a { font-size: 15px; }
  .foot .fcol > a.tail { font-size: 14px; }
  .foot .bt { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; line-height: 1.8; }
  .foot .bt .bt-r { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 480px) {
  .foot .fcard-top { align-items: flex-start; }
  .foot .fcard-id { gap: 9px; }
  .foot .fcard-nm b { font-size: 17px; }
  .foot .fcard-qr img { width: 66px; height: 66px; }
}
@media (min-width: 1800px) {
  .foot { font-size: 15px; }
  .foot h5 { font-size: 16.5px; }
  .foot .fcol > a { font-size: 15px; }
  .foot .bt, .foot .bt a { font-size: 13.5px; }
}
@media (min-width: 2100px) {
  .foot { font-size: 16px; }
  .foot h5 { font-size: 18px; }
  .foot .fcol > a { font-size: 16px; }
  .foot .cols { grid-template-columns: 300px repeat(6, minmax(0, 1fr)); gap: 30px; }
  .foot .bt, .foot .bt a { font-size: 14px; }
}

/* ============================================================
 * HTML 站点地图 sitemap.php（2026-10-24）
 * 目的是"一次能看全 + 一次能爬全"，所以用分组卡片 + 多列清单，
 * 不用折叠组件（折叠内容对爬虫和屏幕阅读器都不友好）。
 * ============================================================ */
.smap { display: flex; flex-direction: column; gap: 18px; }
.smap-sec { background: #fff; border-radius: 12px; padding: 26px 30px 30px; box-shadow: 0 2px 14px rgba(16, 35, 63, .05); }
.smap-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.smap-h h2 { font-size: 20px; font-weight: 700; color: #12233d; margin: 0; padding-left: 12px; border-left: 4px solid var(--blue); line-height: 1.2; }
.smap-h a { font-size: 13.5px; color: var(--blue); white-space: nowrap; }
.smap-h a:hover { color: var(--gold); }
.smap-grp { margin-top: 22px; }
.smap-grp h3 { font-size: 15.5px; font-weight: 600; color: #12233d; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.smap-grp h3 a { color: #12233d; }
.smap-grp h3 a:hover { color: var(--blue); }
.smap-grp h3 em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #7A8DA8; background: #F1F5FA; border-radius: 20px; padding: 2px 8px; line-height: 1.5; }
.smap-list { list-style: none; margin: 0; padding: 0; }
.smap-list li { margin: 0; }
.smap-list a { display: block; font-size: 14px; line-height: 1.55; color: #45566E; padding: 4px 0; border-bottom: 1px dashed transparent; transition: .16s; }
.smap-list a:hover { color: var(--blue); border-bottom-color: #D8E2EE; }
.smap-cols { columns: 4; column-gap: 28px; }
.smap-cols li { break-inside: avoid; }
.smap-sec > .smap-list { margin-top: 20px; }
.smap-foot { margin-top: 22px; text-align: center; font-size: 13px; color: #7A8DA8; }
.smap-foot a { color: var(--blue); }
@media (max-width: 1400px) { .smap-cols { columns: 3; } }
@media (max-width: 960px) { .smap-cols { columns: 2; } .smap-sec { padding: 22px 20px 24px; } }
@media (max-width: 620px) {
  .smap-cols { columns: 1; }
  .smap-h { flex-direction: column; align-items: flex-start; gap: 6px; }
  .smap-h h2 { font-size: 18px; }
  .smap-sec { padding: 20px 16px 22px; border-radius: 10px; }
}

/* 站点地图：标题右侧的条目数 + 分类导航药丸 */
.smap-n { font-size: 12.5px; font-weight: 500; color: #7A8DA8; background: #F1F5FA; border-radius: 20px; padding: 2px 9px; margin-left: 9px; vertical-align: 3px; }
.smap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.smap-chips a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #3C4F6B; background: #F4F7FB; border: 1px solid #E3EAF3; border-radius: 20px; padding: 5px 12px; transition: .16s; }
.smap-chips a:hover { background: #EAF1FA; border-color: #CFDDEE; color: var(--blue); }
.smap-chips a i { font-style: normal; font-size: 11px; color: #8A9CB4; }
.smap-chips + .smap-list { margin-top: 16px; }

/* ===== 超大屏 ≥2300：2560×1440 及 4K（浏览器窗口最大化时 CSS 宽就是 2560）=====
   以前容器不设上限、只留 48px 边距，1920 是设计基准所以没事，
   但 2560 上内容区被拉到 2464px，实测出的四个问题：
     1) 正文单行 85 个汉字（--prose 1460），眼睛扫行会串行；
     2) 首页只有 4 张产品卡，auto-fit 把它们撑到 598px 宽，像放大镜；
     3) 新闻 9 条/页被 auto-fit 排成 7 列 → 7+2，右侧空出 5 个位置；
     4) 底栏 6 栏各 331px 而内容只有 130px，链接像散落的点。
   处理思路不是"把字放大"，而是让版心收回来：限宽 2280（内容区 2184，
   两侧留白 140），再把列表页列数按「每页条数能否整除」钉死。
   1920 及以下完全不受影响。 */
@media (min-width: 2300px) {

  /* 版心：两侧留白从 48 增加到 140，超宽屏上不再顶天立地。
     margin:0 auto 在 .wrap 基础规则里已有，这里只加上限。 */
  .wrap { max-width: 2280px; }

  /* --- 首页平铺区块 ---------------------------------------------------
     方案 8 条、案例 8 条（index.php 的 limit），4 列正好两行；
     新闻 5 条，5 列正好一行。以前 auto-fit 会把 8 条排成 5+3。 */
  .sec .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .sec .news-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }

  /* --- 列表页 ---------------------------------------------------------
     产品 12 条/页 → 4 列三行（主栏 1832 宽下每卡 440px，是 1920 设计稿
     351px 的等比放大；6 列会掉到 285px，产品名容易折行）；
     解决方案 44 套全量展示 → 4 列正好 11 行，不留空位；
     新闻 12 条/页 → 6 列两行，每卡 343px，与 1920 下 5 列 348px 密度一致。
     这三处都能被每页条数整除，footer.php 里那段「凑满最后一行」的
     列数改写脚本 (fitCols) 就不会再介入——以前案例页 9 条 ÷ 4 列
     除不尽，被它强制改成 3 列 711px，卡片宽得没法看。 */
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .news-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; }
  .layout2 .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* --- 首页产品组必须留在最后 ------------------------------------------
     它的父级同时是 .sec 和 .grp，与上面 .sec .pgrid 同权重；
     按分类分组后每组条数 1~8 不等，钉死列数会留出大片空格，
     所以这里覆盖回自适应（同权重靠顺序取胜）。 */
  .grp .pgrid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

  /* 详情页 / 列表页侧栏：主栏宽了容易显得侧栏细，同步加宽 */
  .detail-wrap { grid-template-columns: 1fr 340px; gap: 56px; }
  .layout2 { grid-template-columns: 300px 1fr; gap: 52px; }
}

/* 详情页版心与正文行宽。
   ≥2400 的 --dw:2040 / --prose:1460 是按"填满 2K"算的，但 17px 汉字在
   1460px 宽度下每行 86 个字，实测评测时读起来会串行；而主栏 1788px 里
   正文只占 66%，右侧留白 470px 又显得空。
   这里把版心收到 1800（主栏 1404），正文 1240（约 73 字/行），
   正文占主栏 88%，左右都不空。 */
@media (min-width: 2300px) {
  body.page-detail { --dw: 1800px; --prose: 1240px; }
  body.page-detail .prose p,
  body.page-detail .prose ul,
  body.page-detail .prose ol,
  body.page-detail .prose h4 { max-width: var(--prose, 1240px); }
}

/* 顶部横幅在超宽屏的接缝。
   banner 图本身 1140×240（后台可换），CSS 限宽 1920 居中，
   2560 视口下左右各留 320px 纯色 #10233F，图的内容边缘与纯色块
   之间是一刀直边，很显眼。加一层左右向内的渐变把它化开——
   中间 64% 全透明，不影响图片本体。 */
@media (min-width: 2300px) {
  .topbanner::after,
  .sol-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right,
      var(--bn-fade) 0%,
      rgba(16,35,63,0) 18%,
      rgba(16,35,63,0) 82%,
      var(--bn-fade) 100%);
  }
}

/* ============================================================
   UI 视觉升级 v3 · 2026-10-24
   ------------------------------------------------------------
   主题：「暮光工程」（Dusk Engineering）
     · 科技感 —— 深海军蓝底 + 青蓝冷光 + 工程网格 + 等宽数字
     · 生活气息 —— 落日琥珀暖光、暖白纸感底色、柔和大圆角与暖阴影
     · 交互 —— 滚动渐显、卡片浮起、按钮流光、首屏视差与跟手微光

   设计原则（三条，避免以后越改越花）：
     1) 冷色管「专业」，暖色管「人情」。暖色只出现在强调点和悬停态，
        面积不超过一屏的 8%，否则会从"科技"掉进"促销"。
     2) 层次靠光影，不靠描边。卡片用两层阴影（贴地 + 远投）代替重边框。
     3) 动效只做「位移 ≤ 8px + 透明度」，时长 300~800ms，
        并全部受 prefers-reduced-motion 管束。

   这一整段只追加、不覆盖任何旧规则；与旧规则冲突时靠"后写优先"生效。
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 深色层级：从近黑到品牌蓝，用于深色区块的渐变过渡 */
  --ui-navy-0: #060F1C;
  --ui-navy-1: #0B1B30;
  --ui-navy-2: #122B4C;
  --ui-navy-3: #1B4478;
  /* 暖色：落日的三个层次 */
  --ui-warm: #E9A05B;
  --ui-warm-l: #F5CE96;
  --ui-warm-d: #C4772F;
  /* 冷光：青蓝，用于科技感高光 */
  --ui-cyan: #5FD0E8;
  --ui-cyan-d: #2C9DBE;
  --ui-rose: #D9738B;
  /* 浅色面 */
  --ui-paper: #FAF9F6;   /* 暖白纸感（2026-10-26 试过奶杏 #FAF0E0 / #FBF4E8，最终回退到这里） */
  /* 同步把旧的 --bg 也拨到暖白：它还在 .tagline span / .prose th /
     .news-card 占位底 / .tree 悬停 等处使用，不一起改会留下"冷灰斑块" */
  --bg: #FAF9F6;
  --ui-ink: #0F1A2B;
  --ui-ink-2: #46536A;
  /* 等宽数字：STEP / 编号 / 型号用它，比正文更有"仪器感" */
  --ui-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ui-r: 16px;
  --ui-r-sm: 10px;
  /* 两层阴影：第一层贴地，第二层远投，比单层更接近真实光照 */
  --ui-e1: 0 1px 2px rgba(11, 27, 48, .04), 0 8px 20px -16px rgba(11, 27, 48, .40);
  --ui-e2: 0 2px 6px rgba(11, 27, 48, .05), 0 26px 52px -26px rgba(11, 27, 48, .45);
  --ui-ease: cubic-bezier(.22, .68, .32, 1);
}

body {
  background: var(--ui-paper);
  color: #16202F;
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
::selection { background: rgba(233, 160, 91, .30); color: #23160A; }
:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 3px; border-radius: 6px; }

/* 滚动条：细一点、暖一点，和纸感底色同一族 */
html { scrollbar-color: #C6CCD8 #F2EFE9; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #F2EFE9; }
::-webkit-scrollbar-thumb {
  background: #C6CCD8; border-radius: 8px; border: 3px solid #F2EFE9;
}
::-webkit-scrollbar-thumb:hover { background: #A9B3C4; }

/* ---------- 2. 阅读进度条（顶部 2px 渐变色带） ---------- */
.ui-progress {
  position: fixed; left: 0; top: 0; z-index: 9000;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue-l), var(--ui-cyan) 55%, var(--ui-warm));
  box-shadow: 0 0 12px rgba(95, 208, 232, .55);
  transition: width .12s linear;
  pointer-events: none;
}

/* ---------- 3. 滚动渐显 ----------
   用 translate 属性而不是 transform：卡片 hover 的 transform 就不会被它覆盖。
   类名带 ui- 前缀，避免撞旧样式。 */
.ui-rv {
  opacity: 0; translate: 0 22px;
  transition: opacity .8s var(--ui-ease), translate .8s var(--ui-ease);
}
.ui-rv.on { opacity: 1; translate: none; }

/* ---------- 4. 顶栏与导航 ---------- */
/* 顶部信息条：从纯品牌蓝改成两端收深的渐变，视觉上更像一条"机台铭牌" */
.topbar {
  background: linear-gradient(90deg, #07182C 0%, #0E2C52 52%, #07182C 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 12.5px; letter-spacing: .3px;
}
.topbar .wrap { height: 40px; }
.topbar span { opacity: .92; }

/* 导航：半透明 + 背景模糊，滚动时内容从下方穿过，比"实心白条"更轻 */
.nav {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(15, 26, 43, .07);
  transition: background .3s, box-shadow .3s;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 34px -28px rgba(11, 27, 48, .55);
}
.menu > li > a { font-size: 16px; color: #1B2735; }
.menu > li > a::after {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-l), var(--ui-cyan));
  box-shadow: 0 0 10px rgba(95, 208, 232, .45);
}
.nav-search input {
  border-radius: 999px; background: rgba(240, 243, 248, .85);
  border-color: rgba(15, 26, 43, .06);
}
.nav-search input:focus {
  background: #fff; border-color: rgba(10, 90, 224, .45);
  box-shadow: 0 0 0 4px rgba(10, 90, 224, .08);
}
/* 申请试用：从刺眼的纯红改成暖珊瑚渐变，红的分量还在，但不再和整站调性打架 */
.btn-apply {
  background: linear-gradient(120deg, #E8553F, #F2894A);
  border-radius: 999px; font-weight: 500; letter-spacing: .3px;
  box-shadow: 0 8px 20px -10px rgba(232, 85, 63, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .25s var(--ui-ease), box-shadow .25s;
}
.btn-apply:hover {
  background: linear-gradient(120deg, #EE5F45, #F79B57);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(232, 85, 63, .9);
}

/* ---------- 5. 首页首屏 ---------- */
.hero { background: var(--ui-navy-1); }
.hero .wrap { position: relative; z-index: 3; }
/* 照片压一点饱和度、提一点对比：原图偏"办公室日常"，压暗后更接近黄昏 */
.sf-hero-slide { filter: saturate(.86) contrast(1.06) brightness(.92); }

/* 暮光叠色：右上冷光、左下暖光、中间一点玫红，再压上下暗角 */
.hero-wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 80% 0%, rgba(58, 140, 255, .34), transparent 62%),
    radial-gradient(780px 440px at 4% 100%, rgba(233, 160, 91, .26), transparent 62%),
    radial-gradient(560px 340px at 48% 46%, rgba(196, 64, 120, .12), transparent 68%),
    linear-gradient(180deg, rgba(6, 15, 28, .62) 0%, rgba(6, 15, 28, .34) 42%, rgba(6, 15, 28, .80) 100%);
}
/* 跟手微光：默认藏在中间偏上，鼠标进入首屏后开始跟随（JS 写 --mx / --my） */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .7s var(--ui-ease);
  background: radial-gradient(380px 380px at var(--mx, 50%) var(--my, 32%),
              rgba(245, 206, 150, .18), rgba(245, 206, 150, 0) 70%);
}
.hero:hover .hero-glow { opacity: 1; }
/* 工程网格：只在上半部显影，像一张摊开的图纸 */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 24%, #000, transparent 76%);
          mask-image: radial-gradient(circle at 50% 24%, #000, transparent 76%);
}

.hero-copy { max-width: 940px; }
/* slogan 改成细字距的"铭牌"排版，两侧各一段渐隐横线 */
.hero-eyebrow { margin-bottom: 20px; }
.hero-eyebrow b {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 3px;
  color: var(--ui-warm-l);
}
.hero-eyebrow b::before,
.hero-eyebrow b::after {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 206, 150, .85));
}
.hero-eyebrow b::after { background: linear-gradient(90deg, rgba(245, 206, 150, .85), transparent); }

.hero-title {
  font-size: 38px; line-height: 1.24; letter-spacing: -1px;
  color: #fff; text-shadow: 0 2px 34px rgba(0, 0, 0, .38);
}
/* 关键词渐变：冷（青蓝）→ 暖（琥珀），一句标题里完成"技术 → 人"的过渡 */
.hero-hl {
  background: linear-gradient(96deg, #8FD0FF 0%, #BEE9FF 40%, #F6D89F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { color: rgba(228, 235, 245, .80); font-size: 16.5px; }
.hero-btns { margin-top: 32px; gap: 13px; }

/* 四段能力条：玻璃面板 + 等宽 step 编号 + 细分隔线 */
.hero-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 44px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--ui-r); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.hstep {
  position: relative; padding: 20px 22px 22px;
  transition: background .35s var(--ui-ease);
}
.hstep:hover { background: rgba(255, 255, 255, .07); }
.hstep b { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.hstep b i {
  display: block; font-style: normal; font-family: var(--ui-mono);
  font-size: 10.5px; letter-spacing: 1.8px; color: var(--ui-warm-l);
  margin-bottom: 6px; opacity: .9;
}
.hstep span { display: block; font-size: 13px; line-height: 1.72; color: rgba(228, 235, 245, .62); }
/* 分隔线用伪元素而不是 border：能做成上下渐隐，不会切到面板边缘 */
.hstep em {
  position: absolute; right: 0; top: 20px; bottom: 20px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
}

@media (min-width: 1600px) {
  .hero-title { font-size: 50px; }
  .hero-lead { font-size: 17.5px; }
}
@media (min-width: 2100px) {
  .hero-title { font-size: 58px; }
}
@media (max-width: 900px) {
  .hero-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .hstep em { display: none; }
  .hstep { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .hstep:nth-child(2n) { border-right: 0; }
  .hero-eyebrow b { letter-spacing: 2px; font-size: 13px; }
  .hero-eyebrow b::before, .hero-eyebrow b::after { width: 18px; }
}
@media (max-width: 560px) {
  /* 手机上也保持两列：四条一排竖下来会把首屏拉长到 1100px，
     两列两行刚好一屏内看完"建模→求解→代码→实测" */
  .hstep { padding: 16px 15px 18px; }
  .hstep b { font-size: 14px; }
  .hstep span { font-size: 12.5px; line-height: 1.66; }
  .hero-title { font-size: 29px; letter-spacing: -.4px; }
  .hero-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-btns .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
  .hero-btns .btn-o-d { grid-column: 1 / -1; }
}

/* ---------- 6. 区块标题 ---------- */
.sec-t { margin-bottom: 44px; }
/* 小标签：暖琥珀色调 + 前面的发光小圆点，替代原来"淡蓝药丸 + 蓝字"
   （蓝色标签在蓝色主色的站里读起来像链接，暖色才像"栏目标记"） */
.sec-t .tag {
  background: rgba(233, 160, 91, .10);
  border: 1px solid rgba(233, 160, 91, .30);
  color: #9A5B1B;
  font-size: 12.5px; font-weight: 600; letter-spacing: 2px;
  padding: 5px 15px 5px 13px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.sec-t .tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-warm), var(--ui-warm-d));
  box-shadow: 0 0 0 3px rgba(233, 160, 91, .16);
}
.sec-t h2 { color: var(--ui-ink); letter-spacing: -.5px; }
.sec-t p { color: #5C6980; }
/* 「全部方案 →」：从静态金框按钮改成中性描边，悬停才实心，减少一屏里的抢眼色块 */
.sec-more {
  background: #fff; border-color: rgba(15, 26, 43, .12); color: #26344A;
  border-radius: 999px; padding: 9px 22px;
  transition: .3s var(--ui-ease);
}
.sec-more:hover {
  background: linear-gradient(120deg, #12233D, #1B4478);
  border-color: transparent; color: #fff;
  box-shadow: 0 14px 26px -14px rgba(11, 27, 48, .8);
}

/* ---------- 7. 按钮 ---------- */
.btn {
  position: relative; overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(120deg, #0A5AE0 0%, #2F7CF0 52%, #0A5AE0 100%);
  box-shadow: 0 10px 24px -12px rgba(10, 90, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .20);
  letter-spacing: .3px;
  transition: transform .28s var(--ui-ease), box-shadow .28s var(--ui-ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(10, 90, 224, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn:active { transform: translateY(0) scale(.99); }
/* 流光：一条斜向高光在悬停时从左扫到右，只扫一次 */
.btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg); transition: left .65s var(--ui-ease);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn-gold {
  background: linear-gradient(120deg, #E9A24E, #F4C978 55%, #E9A24E);
  box-shadow: 0 10px 24px -12px rgba(196, 119, 47, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-gold:hover { box-shadow: 0 18px 32px -14px rgba(196, 119, 47, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }

.btn-o { background: #fff; border-color: rgba(15, 26, 43, .13); }
.btn-o:hover { background: #F5F8FF; border-color: rgba(10, 90, 224, .45); box-shadow: none; }
.btn-o-d {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-o-d:hover {
  background: rgba(255, 255, 255, .96); color: var(--ui-navy-1) !important;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8);
}
.btn-sm { padding: 9px 20px; }

/* ---------- 8. 卡片（产品 / 方案 / 案例共用 .pcard） ---------- */
.pcard {
  border: 1px solid rgba(15, 26, 43, .075);
  border-radius: var(--ui-r);
  box-shadow: var(--ui-e1);
  transition: transform .45s var(--ui-ease), box-shadow .45s var(--ui-ease), border-color .3s;
}
.pcard::before {
  height: 3px;
  background: linear-gradient(90deg, var(--blue-l), var(--ui-cyan) 55%, var(--ui-warm));
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: rgba(10, 90, 224, .20);
  box-shadow: var(--ui-e2), 0 0 0 1px rgba(10, 90, 224, .05);
}
/* 图片区：加一层极淡的径向"打光"，产品白底图不再像贴在白纸上的剪贴画 */
.pcard .ph {
  background:
    radial-gradient(120% 90% at 50% 8%, #FFFFFF 0%, #F7FAFF 58%, #F1F5FB 100%);
  border-bottom: 1px solid rgba(15, 26, 43, .055);
}
.pcard .ph img { transition: transform .6s var(--ui-ease); }
.pcard:hover .ph img { transform: scale(1.035); }
.pcard .body { padding: 20px 22px 18px; }
.pcard h3, .pcard h4 { font-size: 17px; color: #101B2B; letter-spacing: -.2px; line-height: 1.55; }
.pcard .model {
  font-family: var(--ui-mono); font-size: 11.5px; letter-spacing: .6px;
  color: var(--ui-cyan-d); opacity: .95;
}
.pcard .desc { color: #5C6980; }
.pcard .foot { border-top-color: rgba(15, 26, 43, .06); }
.pcard .go { color: var(--blue); }
.pcard:hover .go { color: var(--blue-l); }
.pcard .flag {
  background: linear-gradient(120deg, var(--ui-warm), var(--ui-warm-l));
  color: #4A2C08; box-shadow: 0 6px 14px -8px rgba(196, 119, 47, .9);
}
/* 封面图（方案 / 案例）：16:9 通栏，悬停轻微推近 */
.pcard.has-cover .ph { background: #EEF3FA; }
.pcard.has-cover .ph img { object-fit: cover; }

/* ---------- 9. 新闻卡 ---------- */
.news-card {
  border: 1px solid rgba(15, 26, 43, .075);
  border-radius: var(--ui-r);
  box-shadow: var(--ui-e1);
  transition: transform .4s var(--ui-ease), box-shadow .4s var(--ui-ease), border-color .3s;
}
.news-card:hover {
  border-color: rgba(10, 90, 224, .18);
  box-shadow: var(--ui-e2);
  transform: translateY(-5px);
}
.news-card .nc-tag {
  border-radius: 999px; padding: 4px 12px;
  background: rgba(8, 16, 31, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.news-card .nc-body h3 { color: #101B2B; letter-spacing: -.2px; }
.news-card:hover .nc-body h3 { color: var(--blue); }
.news-card .nc-meta { border-top-color: rgba(15, 26, 43, .06); }

/* ---------- 10. 首页行业卡（index.php 的 .indcard） ---------- */
.indcard {
  position: relative; display: block; overflow: hidden;
  background: #fff; border: 1px solid rgba(15, 26, 43, .075);
  border-radius: var(--ui-r); padding: 26px 26px 58px;
  box-shadow: var(--ui-e1); color: inherit;
  transition: transform .42s var(--ui-ease), box-shadow .42s var(--ui-ease), border-color .3s;
}
/* 悬停时右上角浮起一团暖光，是整站"生活气息"的主要落点之一 */
.indcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(233, 160, 91, .16), transparent 62%),
    radial-gradient(320px 200px at 0% 100%, rgba(95, 208, 232, .10), transparent 66%);
  opacity: 0; transition: opacity .45s var(--ui-ease);
}
.indcard:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 90, 224, .16);
  box-shadow: var(--ui-e2);
}
.indcard:hover::before { opacity: 1; }
.indcard-n {
  position: relative; display: block; margin-bottom: 16px;
  font-family: var(--ui-mono); font-size: 12px; letter-spacing: 1.5px;
  color: rgba(15, 26, 43, .22);
}
.indcard h4 {
  position: relative; display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 600; color: #101B2B;
  letter-spacing: -.2px; margin-bottom: 10px;
}
.indcard h4 i {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
  background: linear-gradient(135deg, var(--ui-warm), var(--ui-warm-d));
  box-shadow: 0 0 0 4px rgba(233, 160, 91, .14);
}
.indcard p { position: relative; color: #5C6980; font-size: 14px; line-height: 1.85; }
.indcard-go {
  position: absolute; right: 22px; bottom: 22px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(15, 26, 43, .12);
  display: flex; align-items: center; justify-content: center;
  transition: .32s var(--ui-ease);
}
.indcard-go svg {
  width: 14px; height: 14px; fill: none; stroke: #26344A;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: .32s var(--ui-ease);
}
.indcard:hover .indcard-go {
  background: linear-gradient(120deg, var(--blue-l), #2F7CF0);
  border-color: transparent;
  box-shadow: 0 10px 20px -10px rgba(10, 90, 224, .9);
}
.indcard:hover .indcard-go svg { stroke: #fff; transform: translateX(2px); }

/* ---------- 11. 深色页头（列表页 .phero / 详情页 .phead） ---------- */
.phero, .phead {
  background:
    radial-gradient(1100px 420px at 84% -14%, rgba(95, 208, 232, .20), transparent 62%),
    radial-gradient(860px 380px at 2% 118%, rgba(233, 160, 91, .18), transparent 62%),
    linear-gradient(116deg, #071426 0%, #102A4E 52%, #1C4680 100%);
}
.phero::before, .phead::before {
  opacity: .62;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 24% 30%, #000, transparent 80%);
          mask-image: radial-gradient(circle at 24% 30%, #000, transparent 80%);
}
/* 右上角改成"光环"：径向暖光 + 一圈极细的描边，比实心圆更有仪器感 */
.phero::after, .phead::after {
  width: 520px; height: 520px; right: -140px; top: -180px;
  background: radial-gradient(circle, rgba(245, 206, 150, .16), transparent 68%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.phero h1, .phead h1 { letter-spacing: -.8px; text-shadow: 0 2px 24px rgba(0, 0, 0, .30); }
.phero p, .phead p { color: rgba(196, 211, 232, .86); }
.phero-tag, .phead-tag {
  background: rgba(233, 160, 91, .14);
  border: 1px solid rgba(233, 160, 91, .32);
  color: var(--ui-warm-l);
  letter-spacing: 1.2px; font-size: 12.5px;
  padding: 5px 14px;
}
.phero-ico {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 28px -18px rgba(0, 0, 0, .9);
}
.phero-meta b { color: var(--ui-warm-l); font-family: var(--ui-mono); }

/* 详情页头：右侧补一组同心刻度环作装饰（纯 CSS，不加结构） */
.phead { padding-right: 0; }
.phead .wrap { position: relative; }
.phead .wrap::after {
  content: ""; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0deg 0.6deg, transparent 0.6deg 12deg),
    radial-gradient(circle, transparent 58%, rgba(255, 255, 255, .07) 58.5%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 78%);
          mask-image: radial-gradient(circle, #000 62%, transparent 78%);
  opacity: .55;
}
@media (max-width: 1100px) { .phead .wrap::after { display: none; } }

/* ---------- 12. 面包屑 ---------- */
.crumb { background: rgba(255, 255, 255, .72); border-bottom-color: rgba(15, 26, 43, .06); }
.crumb a:hover { color: var(--blue-l); }

/* ---------- 13. 详情页正文 ---------- */
.chd {
  padding-left: 14px; border-left: 0;
  position: relative; color: #0F1B2D; letter-spacing: -.3px;
}
.chd::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--blue-l), var(--ui-cyan) 62%, var(--ui-warm));
}
.prose h2 {
  border-left: 0; padding-left: 14px; position: relative;
  color: #0F1B2D; letter-spacing: -.3px;
}
.prose h2::before {
  content: ""; position: absolute; left: 0; top: .16em; bottom: .16em; width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--blue-l), var(--ui-cyan) 70%, var(--ui-warm));
}
.prose h4 { color: #12233D; }
.prose a { color: var(--blue); }
/* 正文链接的虚下划线只加在文字链接上：图片链接（<a><img></a>）不能加，
   否则图下方会出现一条蓝线，看着像图片边框 */
.prose p a, .prose li a, .prose td a { border-bottom: 1px solid rgba(10, 90, 224, .25); }
.prose p a:hover, .prose li a:hover, .prose td a:hover {
  border-bottom-color: var(--blue-l); color: var(--blue-l);
}
.prose blockquote {
  margin: 20px 0; padding: 16px 22px;
  background: linear-gradient(120deg, #FFF8EF, #FFFDF9);
  border-left: 3px solid var(--ui-warm);
  border-radius: 0 12px 12px 0;
  color: #4A3B2A; font-size: 15.5px;
}
.dsec { margin-bottom: 40px; }
.dlead { color: #4C5A70; }
.dfeat i { background: linear-gradient(135deg, var(--blue-l), var(--ui-cyan)); }
/* 参数表：表头暖白 + 斑马纹，长表格更容易横着读 */
.dspec {
  border-color: rgba(15, 26, 43, .08); border-radius: 14px;
  box-shadow: var(--ui-e1); padding: 2px 22px;
}
.prose th { background: #FCFAF6; color: #26344A; font-weight: 600; }
.prose tr:hover td { background: #FAFCFF; }

/* ---------- 14. 侧栏 / 树 / 选项卡 / 分页 / 表单 ---------- */
.tree { border-color: rgba(15, 26, 43, .08); border-radius: 14px; box-shadow: var(--ui-e1); }
.tree a:hover { background: #F7FAFF; }
.tree a.on {
  background: linear-gradient(96deg, #0B3E93, #1F6BE0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.side-box {
  background:
    radial-gradient(240px 160px at 100% 0%, rgba(233, 160, 91, .22), transparent 66%),
    linear-gradient(150deg, var(--ui-navy-1), #16375F 70%, #1B4478);
  border-radius: 16px; box-shadow: 0 24px 50px -30px rgba(11, 27, 48, .9);
}
.side-box a {
  background: linear-gradient(120deg, #E9A24E, #F4C978);
  border-radius: 999px; letter-spacing: .3px;
  box-shadow: 0 10px 22px -12px rgba(196, 119, 47, .95);
  transition: .25s var(--ui-ease);
}
.side-box a:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(196, 119, 47, 1); }

.tabs a { border-radius: 999px; background: #fff; border-color: rgba(15, 26, 43, .09); }
.tabs a:hover {
  border-color: rgba(10, 90, 224, .35); color: var(--blue);
  transform: translateY(-1px); background: #fff;
}
.tabs a.on {
  background: linear-gradient(120deg, var(--blue-l), #2F7CF0);
  border-color: transparent;
  box-shadow: 0 10px 22px -14px rgba(10, 90, 224, .95);
}
.pager a, .pager span { border-radius: 10px; border-color: rgba(15, 26, 43, .09); }
.pager .cur {
  background: linear-gradient(120deg, var(--blue-l), #2F7CF0);
  border-color: transparent;
  box-shadow: 0 10px 20px -12px rgba(10, 90, 224, .95);
}

.form {
  border-color: rgba(15, 26, 43, .08); border-radius: var(--ui-r);
  box-shadow: var(--ui-e1);
}
.field input, .field textarea, .field select {
  border-radius: 10px; border-color: rgba(15, 26, 43, .12);
  background: #FDFDFC;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  background: #fff; border-color: rgba(10, 90, 224, .55);
  box-shadow: 0 0 0 4px rgba(10, 90, 224, .09);
}

.cat-intro {
  border-radius: 14px; border-color: rgba(15, 26, 43, .08);
  border-left: 3px solid var(--ui-warm);
  background: linear-gradient(120deg, #FFFCF7, #FFFFFF 46%);
  box-shadow: var(--ui-e1);
}
.grp-t i { background: linear-gradient(180deg, var(--ui-warm), var(--ui-warm-d)); }

/* ---------- 15. CTA 条 ---------- */
.cta-band {
  background:
    radial-gradient(900px 380px at 86% -30%, rgba(95, 208, 232, .16), transparent 60%),
    radial-gradient(760px 360px at 4% 130%, rgba(233, 160, 91, .16), transparent 62%),
    linear-gradient(112deg, #071426 0%, #0F2747 56%, #1A4276 100%);
}
.cta-band h3 { font-size: 26px; letter-spacing: -.5px; }
.cta-band p { color: rgba(196, 211, 232, .82); }
.btn-w { border-radius: 999px; color: #10233F !important; box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .9); }
.btn-w-o { border-radius: 999px; border-color: rgba(255, 255, 255, .38); }
.btn-w-o:hover { border-color: var(--ui-warm-l); color: var(--ui-warm-l) !important; }

/* ---------- 16. 页脚 ---------- */
.foot { position: relative; }
/* 顶部一道暖冷渐隐的金线，把 CTA 与页脚"缝"起来 */
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 206, 150, .40), rgba(95, 208, 232, .28), transparent);
}
.foot a { transition: color .22s, transform .26s var(--ui-ease); }
.foot a:hover { color: var(--ui-warm-l); transform: translateX(2px); }
.foot .bt a:hover { transform: none; }
.fcard-qr img {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 28px -18px rgba(0, 0, 0, .9);
  transition: box-shadow .3s;
}
.fcard-qr:hover img { box-shadow: 0 0 0 1px rgba(245, 206, 150, .5), 0 16px 30px -16px rgba(0, 0, 0, 1); }

/* ---------- 17. 站点地图 ---------- */
.smap-sec {
  border-radius: var(--ui-r);
  border: 1px solid rgba(15, 26, 43, .06);
  box-shadow: var(--ui-e1);
  transition: box-shadow .35s var(--ui-ease), border-color .3s;
}
.smap-sec:hover { box-shadow: var(--ui-e2); border-color: rgba(10, 90, 224, .12); }
.smap-h h2 { border-left: 0; padding-left: 14px; position: relative; }
.smap-h h2::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--blue-l), var(--ui-cyan) 68%, var(--ui-warm));
}
.smap-chips a { border-radius: 999px; background: #FBFAF7; border-color: rgba(15, 26, 43, .08); }
.smap-chips a:hover { background: #F4F8FF; border-color: rgba(10, 90, 224, .22); }

/* ---------- 18. 无障碍：尊重"减少动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-rv { opacity: 1 !important; translate: none !important; }
  .ui-progress { display: none; }
  .hero-glow { display: none; }
  .pcard, .news-card, .indcard, .btn, .btn-apply, .foot a, .smap-sec { transition: none !important; }
  .pcard:hover, .news-card:hover, .indcard:hover, .btn:hover { transform: none !important; }
  .btn::after { display: none; }
}

/* ============================================================
   19. 产品详情首屏：左文右图（2026-10-24 UI v3 补）
   ------------------------------------------------------------
   改版前的 `.phead` 只有「标签 + 标题 + 型号」三行靠左，
   在 1520 版心里右侧空出近 900px 纯蓝，产品图要滚到下面才看得到。
   现在右侧放一张白底产品图（封面图），深蓝底与白色相框形成对比，
   首屏就能"看见产品"。没有封面图时该列不输出，自动退回单栏。
   ============================================================ */
.phead-prod .phead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: 64px; align-items: center;
}
.phead-prod .phead-main { min-width: 0; }
/* 型号做成"仪表读数"式的小胶囊：等宽字 + 琥珀色 MODEL 前缀 */
.phead-model {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: 16px; padding: 6px 15px;
  font-family: var(--ui-mono); font-size: 13px; letter-spacing: .6px;
  color: rgba(232, 240, 250, .92);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
}
.phead-model i {
  font-style: normal; font-size: 9.5px; letter-spacing: 2.2px;
  color: rgba(245, 206, 150, .92);
}
.phead-prod .phead-main p { margin-top: 14px; }

.phead-shot { position: relative; display: flex; align-items: center; justify-content: center; }
/* 背后一圈暖冷混合的柔光，让白卡片"浮"在深蓝上而不是贴上去 */
.phead-shot::before {
  content: ""; position: absolute; inset: -12%;
  background:
    radial-gradient(60% 60% at 72% 18%, rgba(245, 206, 150, .30), transparent 70%),
    radial-gradient(60% 60% at 22% 88%, rgba(95, 208, 232, .26), transparent 70%);
  filter: blur(18px); pointer-events: none;
}
.phead-shot-in {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: 26px;
  border-radius: 20px; background: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(15, 26, 43, .04);
}
.phead-shot-in img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(15, 26, 43, .18));
}
/* 有产品图时不显示 phead 的刻度环，避免和相框叠在一起 */
.phead-prod .wrap::after { display: none; }

@media (max-width: 1100px) {
  .phead-prod .phead-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .phead-shot { display: none; }   /* 小屏优先保证标题与概述可见 */
}

/* ============================================================
   20. 关于我们：栏目标签与业务能力卡（2026-10-24 UI v3 补）
   ------------------------------------------------------------
   .tag-strong 是全站唯一不在 .sec-t 里的 .tag，原来是淡蓝药丸，
   和首页暖琥珀的栏目标签不是一套。这里统一成同一族（暖色 + 圆点）。
   业务能力卡原来写死内联样式 + onmouseover 改边框，改成 .bizcard。
   ============================================================ */
.tag-strong {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(233, 160, 91, .10);
  border: 1px solid rgba(233, 160, 91, .30);
  color: #9A5B1B;
  font-size: 13.5px; font-weight: 600; letter-spacing: 2px;
  padding: 6px 16px 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
}
.tag-strong::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-warm), var(--ui-warm-d));
  box-shadow: 0 0 0 3px rgba(233, 160, 91, .16);
}

.bizcard {
  position: relative; display: block; overflow: hidden;
  background: #fff; border: 1px solid rgba(15, 26, 43, .075);
  border-radius: 14px; padding: 22px 20px 24px;
  color: inherit; box-shadow: var(--ui-e1);
  transition: transform .4s var(--ui-ease), box-shadow .4s var(--ui-ease), border-color .3s;
}
.bizcard::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 160, 91, .16), transparent 70%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.bizcard:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 90, 224, .18);
  box-shadow: var(--ui-e2);
}
.bizcard:hover::after { opacity: 1; }
.bizcard-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, rgba(10, 90, 224, .10), rgba(95, 208, 232, .16));
  color: var(--blue); font-family: var(--ui-mono); font-size: 14px; font-weight: 700;
}
.bizcard h4 { margin: 14px 0 8px; font-size: 16.5px; font-weight: 600; color: #101B2B; }
.bizcard p { color: #5C6980; font-size: 13.5px; line-height: 1.8; }

/* ============================================================
   21. 零散组件的色调校正（2026-10-24 UI v3 补）
   ============================================================ */
/* 型号字：原来的 #2C9DBE 在白底上对比只有 3:1，11.5px 的小字读起来发虚，
   压深到 #1B7E9C（约 4.6:1）既保留"仪表数字"的青色，又不牺牲可读性 */
.pcard .model { color: #1B7E9C; }

/* 键值表（案例信息 / 产品参数）：左边标签列 38% 太宽，值列被挤成窄条；
   收到 24%，并给行加悬停底色，长表横读不串行 */
.spec-table td { padding: 12px 0; }
.spec-table td:first-child { width: 24%; color: #5C6980; padding-right: 22px; }
.spec-table td:last-child { color: #16202F; }
.spec-table tr:hover td { background: #FBFCFF; }

/* 下载中心的会员提示块：原来是一整片高饱和淡蓝，在暖白页面上像另一套配色。
   改成蓝→白的斜向浅渐变 + 14px 圆角，信息属性不变，视觉归队 */
.dl-gate {
  background: linear-gradient(122deg, #F1F7FF 0%, #FBFDFF 58%, #fff 100%);
  border: 1px solid rgba(10, 90, 224, .12);
  border-left: 3px solid var(--blue-l);
  border-radius: 14px;
  box-shadow: var(--ui-e1);
}
.dl-gate b { color: #12233D; }
.dl-gate-warn {
  background: linear-gradient(122deg, #FFF9EE 0%, #FFFDF8 60%, #fff 100%);
  border-color: rgba(233, 160, 91, .30);
  border-left-color: var(--ui-warm);
}
.dl-gate-off {
  background: linear-gradient(122deg, #FFF5F2 0%, #FFFCFB 60%, #fff 100%);
  border-color: rgba(224, 85, 63, .22);
  border-left-color: #E8553F;
}

/* 空状态图标：灰蓝 → 暖灰，和纸感底色同一族 */
.empty svg { stroke: #C9CBD0; }

/* 图片放大层的工具条：跟主色系统一（原来是纯黑半透明） */
.imgview-bar button { border-radius: 999px; }

/* 下载中心的搜索框：输入框原来是 8px 直角，右边按钮是胶囊，两者不成对。
   统一成胶囊（和导航栏搜索框同一形态），并给输入框一层极淡的投影，
   避免它在白色页面上"陷"进去 */
.dl-search input {
  border-radius: 999px; padding: 0 20px;
  border-color: rgba(15, 26, 43, .10);
  box-shadow: var(--ui-e1);
  transition: border-color .2s, box-shadow .2s;
}
.dl-search input:focus {
  border-color: rgba(10, 90, 224, .50);
  box-shadow: 0 0 0 4px rgba(10, 90, 224, .09);
}

/* 关于我们右侧业务卡：放在纯白区块里，白卡 + 白底几乎看不到边界，
   加一层极浅的暖色渐变让卡片"立"起来 */
.bizcard { background: linear-gradient(158deg, #FFFFFF 0%, #FDFBF7 100%); }

/* ---------- 22. 导航下拉（2026-10-24 UI v3 补） ----------
   原来是 2px 品牌蓝顶边 + 直角下沿，像一块"挂上去的公告板"。
   改成：顶部 2px 蓝→青→暖渐变细线（和首屏、登录卡同一套），
   下沿 14px 圆角，阴影分两层，悬停项左侧竖条保留。 */
.menu .sub {
  border: 1px solid rgba(15, 26, 43, .07);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 10px 0;
  box-shadow: 0 26px 54px -28px rgba(11, 27, 48, .55), 0 2px 8px rgba(11, 27, 48, .05);
}
.menu .sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue-l), var(--ui-cyan) 58%, var(--ui-warm));
  border-radius: 2px;
}
.menu .sub a { transition: .2s var(--ui-ease); }

/* ---------- 23. 只有标题的页头收紧（2026-10-24 UI v3 补） ----------
   产品中心 / 解决方案这类列表页，页头里只有「标签 + 标题」两行，
   却按「标签 + 标题 + 描述 + 计数」的完整高度留白（184px），
   加上 303px 的横幅，正文被推到 487px 以下——900 高的笔电上首屏看不到内容。
   用 :has() 判断"没有描述也没有计数"，把上下内边距收到 40/34。
   不支持 :has() 的浏览器保持原样，只是没这层优化，不会塌版。
   这里必须 !important：有横幅时 PHP 会给 .phero 写内联 padding（让 banner
   底部渐隐与 hero 底色无缝衔接），内联样式优先级高于任何选择器。 */
.phero:not(:has(p)):not(:has(.phero-meta)) { padding: 40px 0 34px !important; }
@media (min-width: 1280px) {
  .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 44px 0 38px !important; }
}
@media (max-width: 640px) {
  .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 30px 0 26px !important; }
}

/* ============================================================
 * 产品卡栅格：从 auto-fit 改成「定点列数」（2026-10-24 二次返修）
 *
 * 为什么改：auto-fit 的逻辑是「有多少张卡就把行填满」——首页某个分类
 * 只有 8 张、甚至 1 张时，卡片会被撑到 528~598px 宽，图片区被拉成
 * 一条扁带，整块像被放大镜照着。产品卡的正确行为是"卡随格子定宽，
 * 格子随视口定数量"，卡片自己不参与抢空间。
 *
 * 列数按「卡片宽度落在 300~370」来定（50 岁上下的客户看小字吃力，
 * 所以下限守 300，不为了塞更多列把卡做小）：
 *   ≤699   1 列（手机，卡宽 = 屏宽 - 32）
 *   700~899 2 列
 *   900~1199 3 列
 *   1200~1639 4 列 → 1440 下 322px
 *   1640~2039 5 列 → 1920 下 344px
 *   ≥2040    6 列 → 2560 下 344px
 * 选择器把 .sec/.grp/.layout2 的旧规则一并接管，避免同权重被老规则反超。
 * ============================================================ */
@media (max-width: 699px) {
  .pgrid, .sec .pgrid, .grp .pgrid, .layout2 .pgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .pgrid, .sec .pgrid, .grp .pgrid, .layout2 .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .pgrid, .sec .pgrid, .grp .pgrid, .layout2 .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1200px) and (max-width: 1639px) {
  .pgrid, .sec .pgrid, .grp .pgrid, .layout2 .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1640px) {
  .pgrid, .sec .pgrid, .grp .pgrid, .layout2 .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
}

/* 行业卡片只有 4 张，且是纯文字卡（无图片区），固定 4 列；
   按产品数列数会在 2560 下留两个空格，看起来像少了一张。 */
.ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 899px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 559px) { .ind-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* 版心封顶 1720：1920 与 2560 上不再把内容继续拉宽。
   为什么不是"越大越好"：各组产品数固定为 4 / 8 条，只有 4 列能排满
   （6 列→6+2、5 列→5+3 都会在末行留洞）；既然列数上不去，把版心
   继续拉宽就只是把卡片吹大。封顶后卡宽 392（1440 下 322，比例一致），
   图片区 200→260，观感是"整体等比放大"而不是"被撑开"。
   这条必须写在 2300 那条 max-width:2280 之后，靠顺序覆盖。 */
@media (min-width: 1600px) {
  .wrap { max-width: 1720px; }
}

/* 卡片图高跟着列宽走：≥2040 六列时卡宽 344，图区 240 是 1.43（接近 4:3），
   保持原值即可；这里只把 1200~1639 的 4 列、卡宽 322 的图区略降，
   免得窄卡配 210 高的图显得头重脚轻。 */
@media (min-width: 1200px) and (max-width: 1639px) { .pcard .ph { height: 200px; } }
@media (min-width: 1640px) { .pcard .ph { height: 260px; } }

/* ============================================================
 * 首页产品中心：一级栏目的分组标题
 * 旧版只有一根 4px 金条 + 18px 分类名，和下面的卡片挤在一起分不清层级；
 * 新版给分类名做 h3 + 分类页链接，右侧并排二级栏目（首页到深层页面的
 * 最短内链），最右是「查看全部」。基线对齐，长短不一也不会歪。
 * ============================================================ */
.grp-t {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 16px; margin-bottom: 20px; padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.grp-h { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.2px; line-height: 1.45; }
.grp-h a { display: inline-flex; align-items: center; gap: 9px; color: #101B2B; text-decoration: none; transition: color .18s; }
.grp-h a::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px; flex: 0 0 4px;
  background: linear-gradient(180deg, var(--ui-warm, #E9A05B), var(--gold));
}
.grp-h a:hover { color: var(--blue); }
.grp-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--gray); }
.grp-sub a { position: relative; padding-left: 12px; color: var(--gray); text-decoration: none; transition: color .18s; }
.grp-sub a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: #C6D0DF; transform: translateY(-50%);
}
.grp-sub a:hover { color: var(--blue); }
.grp-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 500; color: var(--blue); text-decoration: none; white-space: nowrap;
}
.grp-more svg { transition: transform .2s; }
.grp-more:hover svg { transform: translateX(3px); }

@media (max-width: 899px) {
  .grp-t { gap: 4px 12px; margin-bottom: 16px; padding-bottom: 11px; }
  .grp-h { font-size: 17.5px; }
  .grp-sub { font-size: 12.5px; }
  /* 手机上二级栏目换行到第二排，不再和「查看全部」抢右侧 */
  .grp-more { margin-left: 0; }
}

/* 单页型一级栏目入口（type=2）：不占产品卡位置，只做一条横排入口 */
.grp-entry { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.grp-entry a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; color: inherit; text-decoration: none;
  transition: border-color .22s, box-shadow .22s, transform .22s var(--ui-ease, ease);
}
.grp-entry b { font-size: 15.5px; font-weight: 600; color: #101B2B; }
.grp-entry span { font-size: 13px; color: var(--gray); }
.grp-entry svg { color: var(--blue); margin-left: 2px; }
.grp-entry a:hover { border-color: var(--blue); box-shadow: 0 10px 26px rgba(0, 64, 160, .09); transform: translateY(-2px); }
@media (max-width: 640px) {
  .grp-entry { margin-top: 32px; }
  .grp-entry a { width: 100%; justify-content: space-between; }
  .grp-entry span { margin-left: auto; }
}

/* ============================================================
   2560 原生横幅 · 2026-10-24
   ------------------------------------------------------------
   背景：三张横幅原为 1600×500 / 1140×240 / 1400×295，在 2560 视口下被
   放大 1.37~1.68 倍，插值只会更糊；且 .topbanner-img 限宽 1920，
   两侧各留 320px 纯色块，以前靠一条 ::after 渐变遮住 —— 那是治标。
   现在按 2560 原生像素重新合成（脚本 tools/make_banners.py），图片本身
   铺满视口宽度，两侧不再有纯色块，::after 也就没必要了。

   底部渐隐同时从 46% 收到 30%：新图底边已经精确收口到 --bn-fade
   (#10233F)，不需要那么长的遮罩；收短后画面下方能多露约 100px。
   （移动端不动：那里 object-fit: cover 会裁掉底边收口，仍需要长遮罩）
   ============================================================ */
.topbanner .topbanner-img,
.sol-banner .sol-banner-img { max-width: 100%; max-height: 560px; }
.topbanner .topbanner-top,
.sol-banner .sol-banner-top {
  height: 15%;
  background: linear-gradient(to bottom, rgba(16,35,63,.42), rgba(16,35,63,0));
}
@media (min-width: 901px) {
  .topbanner .topbanner-fade,
  .sol-banner .sol-banner-fade { height: 30%; }
}
/* 图已铺满，超宽屏不再需要左右向内的渐变补丁 */
@media (min-width: 2300px) {
  .topbanner::after,
  .sol-banner::after { background: none; }
}

/* 首屏底图换成 2560 原生合成图（天际线 / 地平线 / 倒影）之后，
   原来那三层暗角把照片压到只剩 8/255 的亮度 —— 图做得再细也看不见。
   实测标题对比度 17:1、导语 8.4:1，远高于 WCAG AA 的 4.5:1，余量充足，
   因此把压暗收一档，让天际线透出来；正文区仍由图片自身的中间压暗兜底。 */
.hero-wash {
  background:
    radial-gradient(900px 460px at 80% 0%, rgba(58, 140, 255, .30), transparent 62%),
    radial-gradient(780px 440px at 4% 100%, rgba(233, 160, 91, .24), transparent 62%),
    radial-gradient(560px 340px at 48% 46%, rgba(196, 64, 120, .10), transparent 68%),
    linear-gradient(180deg, rgba(6, 15, 28, .40) 0%, rgba(6, 15, 28, .16) 42%, rgba(6, 15, 28, .60) 100%);
}

/* ============================================================
   解决方案横幅 · 动效层（2026-10-24）
   ------------------------------------------------------------
   原 1400×295 的 GIF 里，右侧「数据驱动」徽章外圈有一圈点绕着地球缓转
   （62 帧 × 160ms ≈ 10 秒一圈），这就是用户想保留的动画效果。但 2560 视口
   下那张 GIF 要放大 1.37 倍必糊，做成 2560×540 的动图又要 3~10MB。
   所以底图仍是 2560 原生合成图，动效单独叠一层 SVG：
     · 矢量，任何 DPI 都锐利，整层 4KB
     · 三层轨道半径/转速/方向都不同，读起来是"运转"而不是一个平转盘
     · 坐标写死 2560×540，preserveAspectRatio=slice ≡ object-fit:cover，
       宽高比变化时圆环始终钉在右侧那块青蓝光区上
   ============================================================ */
.bn-anim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bn-anim svg { display: block; width: 100%; height: 100%;
  /* 2026-10-25：同一层里可能有两个 SVG（产品横幅 = 交叉点 + 蜂窝格）。
     原来 svg 是块级流，第二个会被排到第一块下面、又被 .topbanner 的
     overflow:hidden 裁掉（表现为特效完全不出现）。改成层内绝对定位叠加。 */
  position: absolute; inset: 0; }

/* 旋转中心写死成 SVG 用户坐标（2300+/170 是圆环圆心）：
   fill-box 对"三个点的组"会取偏掉的 bbox 中心，圆环会绕圈打晃 */
.bn-ring { transform-box: view-box; transform-origin: 2317px 170px; }
/* 原 GIF 是 10 秒一圈（36°/s）。主环取 12s（30°/s）：点环本身是旋转对称的，
   真正让人看出"在转"的是环上的亮带与彗尾，30°/s 下每 2 秒偏 60°，扫一眼就成立。
   外环反向、内层光点更快，三层错开才有纵深 */
.bn-ring-a { animation: bn-spin 12s linear infinite; }
.bn-ring-b { animation: bn-spin 24s linear infinite reverse; }
.bn-ring-c { animation: bn-spin 9s linear infinite; }

.bn-core { transform-box: fill-box; transform-origin: center; animation: bn-breathe 3.8s ease-in-out infinite; }

/* 汇流光点：周期 62（2 实 + 60 空），一条线上只出现 4~5 颗，
   位移 -124 = 两个整周期，循环无跳变；三条错开 1/3 拍 */
.bn-flows { pointer-events: none; }
.bn-flow { stroke-dasharray: 2 60; animation: bn-flow 4s linear infinite; }
.bn-flow-2 { animation-delay: -1.33s; }
.bn-flow-3 { animation-delay: -2.66s; }

@keyframes bn-spin { to { transform: rotate(360deg); } }
@keyframes bn-breathe {
  0%, 100% { opacity: .55; transform: scale(.88); }
  50%      { opacity: 1;   transform: scale(1.22); }
}
@keyframes bn-flow { to { stroke-dashoffset: -124; } }

/* 手机端：banner 在这里是居中裁切，圆环会被切掉一半；顺带省电 */
@media (max-width: 900px) { .bn-anim { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .bn-ring-a, .bn-ring-b, .bn-ring-c, .bn-core, .bn-flow { animation: none; }
}

/* 注：经线不做自转。椭圆的"旋转"转到 90° 就变成横着的纬线，读起来像一根
   指针在扫，而不是地球在转（真地球是经线宽度在变，不是方向在变）。
   原 GIF 里地球也是静止的，动的是外圈点 —— 保持同一逻辑。 */

/* ==================================================================
   会员登录 / 注册页（2026-10-25：从独立布局改为走全站公用头尾）
   ——原来这页自带一套 <head> + 内联样式、没有导航和页脚，站内任何地方
     点「会员登录」都像跳到了站外。现在只保留「内容区」这套视觉：
     暖白纸底 + 左蓝右琥珀双色柔光 + 背景波纹 + 白卡 18px 圆角，
     外面套公用 nav / footer。
   ——顶部原来的「品牌 logo + 返回首页」条已删，品牌入口由导航承担。
   ================================================================== */
.lg-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 84% -12%, #E9F2FF 0%, rgba(233, 242, 255, 0) 62%),
    radial-gradient(760px 460px at 4% 112%, #FCF0E0 0%, rgba(252, 240, 224, 0) 64%),
    /* 用变量而非字面量：以后调全站底色时登录页自动跟随，不会自成一块冷色区 */
    var(--ui-paper);
  padding: 58px 16px 78px;
}
.lg-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.lg-main { position: relative; z-index: 2; display: flex; justify-content: center; }
.lg-card {
  position: relative; width: 100%; max-width: 400px;
  background: #fff; border-radius: 18px; padding: 40px 38px 30px;
  border: 1px solid rgba(15, 26, 43, .06);
  box-shadow: 0 30px 70px -42px rgba(11, 27, 48, .55), 0 2px 6px rgba(11, 27, 48, .04);
  overflow: hidden;
}
/* 顶部渐变细条：蓝 → 青 → 暖，和首页首屏的暮光同一套色 */
.lg-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-l), var(--ui-cyan, #5FD0E8) 55%, var(--ui-warm, #E9A05B));
}
.lg-card h1 { font-size: 20px; font-weight: 700; color: #16202E; margin: 0 0 26px; letter-spacing: -.3px; }
.lg-lab { display: block; font-size: 13px; color: #5A6B82; margin-bottom: 8px; }
.lg-lab i { color: #E03A3A; font-style: normal; margin-right: 3px; }
.lg-tabs { display: flex; gap: 18px; margin-bottom: 18px; }
.lg-tabs label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #44546B; cursor: pointer; }
.lg-tabs input { accent-color: var(--blue); }
.lg-in {
  width: 100%; height: 42px; border: 1px solid #E1E7EF; border-radius: 10px;
  padding: 0 13px; font-size: 14px; color: #1A2231; background: #FDFDFC;
  transition: border-color .2s, box-shadow .2s, background .2s; outline: none;
  font-family: inherit;
}
.lg-in:focus { background: #fff; border-color: rgba(10, 90, 224, .55); box-shadow: 0 0 0 4px rgba(10, 90, 224, .09); }
.lg-field { margin-bottom: 16px; }
.lg-row { display: flex; gap: 10px; }
.lg-row .lg-in { flex: 1; }
.lg-cap { width: 118px; height: 42px; border: 1px solid #E1E7EF; border-radius: 10px; cursor: pointer; background: #fff; }
.lg-cap:hover { border-color: rgba(10, 90, 224, .45); }
.lg-check { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: #5A6B82; margin: 14px 0 18px; cursor: pointer; }
.lg-check input { margin-top: 3px; accent-color: var(--blue); }
.lg-check a { color: var(--blue); text-decoration: none; }
.lg-submit {
  width: 100%; height: 44px; border: 0; border-radius: 999px;
  background: linear-gradient(120deg, #0A5AE0 0%, #2F7CF0 52%, #0A5AE0 100%);
  color: #fff; font-size: 15px; letter-spacing: 2px; cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(10, 90, 224, .95), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .25s cubic-bezier(.22, .68, .32, 1), box-shadow .25s;
  font-family: inherit;
}
.lg-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -14px rgba(10, 90, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.lg-submit:active { transform: translateY(0); }
.lg-foot { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid #EDF1F6; font-size: 13px; }
.lg-foot a { color: var(--blue); text-decoration: none; }
.lg-foot span { color: #8A99AD; }
.lg-err { background: #FFF4F0; border: 1px solid #F6CDBD; color: #B4451F; font-size: 13px;
  padding: 9px 13px; border-radius: 10px; margin-bottom: 16px; }
.lg-extra { display: none; }
.lg-extra.on { display: block; }
/* 注册页「补充资料」分节标题 */
.lg-sec { margin: 20px 0 14px; padding-top: 16px; border-top: 1px dashed #E3E8EF;
  font-size: 13px; color: #8A94A6; letter-spacing: .5px; }
@media (max-width: 640px) {
  .lg-hero { padding: 34px 14px 52px; }
  .lg-card { padding: 30px 22px 24px; border-radius: 16px; }
}

/* ==================================================================
   404 页（2026-10-25 新增，404.php）
   版式与全站一致：暖白底、卡片化入口、胶囊按钮；渐变数字用站点主色
   （蓝 → 青 → 暖）而不是纯蓝，和首屏暮光是同一套。
   ================================================================== */
.pg-404 { background: var(--bg); padding: 74px 16px 88px; }
.pg-404 .box { max-width: 900px; margin: 0 auto; text-align: center; }
.pg-404 .code {
  font-size: clamp(66px, 11vw, 128px); font-weight: 800; line-height: .92;
  letter-spacing: -4px; margin: 0;
  background: linear-gradient(120deg, var(--blue) 0%, var(--ui-cyan, #5FD0E8) 52%, var(--ui-warm, #E9A05B) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.pg-404 h1 { font-size: clamp(19px, 2.4vw, 25px); font-weight: 700; margin: 16px 0 10px; color: var(--ink, #16202E); }
.pg-404 .desc { font-size: 15px; line-height: 1.85; color: var(--gray); margin: 0 auto 26px; max-width: 560px; }
.pg-404 .q404 { display: flex; gap: 10px; max-width: 470px; margin: 0 auto 34px; }
.pg-404 .q404 input {
  flex: 1; height: 46px; border: 1px solid var(--line); border-radius: 999px;
  padding: 0 20px; font-size: 14.5px; background: #fff; outline: none; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.pg-404 .q404 input:focus { border-color: rgba(10, 90, 224, .55); box-shadow: 0 0 0 4px rgba(10, 90, 224, .08); }
.pg-404 .q404 button {
  height: 46px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(120deg, #0A5AE0, #2F7CF0); color: #fff; font-size: 14.5px;
  font-family: inherit; box-shadow: 0 12px 24px -14px rgba(10, 90, 224, .9);
  transition: transform .25s, box-shadow .25s;
}
.pg-404 .q404 button:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(10, 90, 224, .85); }
.pg-404 .links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; }
.pg-404 .links a {
  display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; text-decoration: none; transition: transform .28s, box-shadow .28s, border-color .28s;
}
.pg-404 .links a:hover { transform: translateY(-2px); border-color: rgba(10, 90, 224, .35); box-shadow: var(--ui-e2, 0 18px 40px -30px rgba(11, 27, 48, .6)); }
.pg-404 .links b { display: block; font-size: 14.5px; color: var(--ink, #16202E); margin-bottom: 4px; }
.pg-404 .links span { font-size: 12.5px; color: var(--gray); }
.pg-404 .tel { margin-top: 26px; font-size: 14px; color: var(--gray); }
.pg-404 .tel b { color: var(--blue); font-size: 16px; letter-spacing: .5px; }
@media (max-width: 860px) { .pg-404 .links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .pg-404 { padding: 46px 16px 60px; }
  .pg-404 .links { grid-template-columns: 1fr; }
  .pg-404 .q404 { flex-direction: column; }
  .pg-404 .q404 button { width: 100%; }
}

/* ============================================================
   数字孪生栏目介绍（product.php?cat=80 的 .cat-intro 内）
   业务框架两段 + 演示视频 + 关键技术图。只在该栏目用到。
   ============================================================ */
.cat-intro .dt-lead { font-size: 15.5px; }
.cat-intro .dt-fork {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 18px 0 20px;
}
.cat-intro .dt-fork > div {
  background: #fff; border: 1px solid rgba(15, 26, 43, .08);
  border-radius: 12px; padding: 15px 18px;
}
.cat-intro .dt-fork b { display: block; font-size: 15px; color: #101B2B; margin-bottom: 6px; }
.cat-intro .dt-fork p { margin: 0; font-size: 14px; line-height: 1.85; color: #5C6980; }
.cat-intro .dt-media {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start;
}
.cat-intro .dt-media figure { margin: 0; }
.cat-intro .dt-media video,
.cat-intro .dt-media img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid rgba(15, 26, 43, .09);
  background: #0B1B30; object-fit: cover;
}
.cat-intro .dt-media img { background: #fff; object-fit: contain; }
.cat-intro .dt-media figcaption {
  margin-top: 9px; font-size: 12.5px; line-height: 1.7; color: #8A94A6;
}
@media (max-width: 860px) {
  .cat-intro .dt-fork, .cat-intro .dt-media { grid-template-columns: 1fr; }
  .cat-intro .dt-fork { margin: 14px 0 16px; }
}


/* ==================================================================
   一级栏目横幅 v5（2026-10-25）
   —— 首页：把解决方案那套「数据带 + 数字核心」放大到首屏，点环 + 悬停流光
   —— 解决方案：六个行业线稿（复用 INDUSTRIES 那套路径），悬停亮起 + 光点落轨
   —— 产品中心：网络交叉点悬停出涟漪
   —— 应用案例：原首页天际线构图
   坐标一律按 2560 宽写死；slice 与 background-size:cover 是同一套映射，
   所以换宽度时圆环/柱顶不会跑位。
   ================================================================== */

/* 横幅层与图片同框：img 是 max-width:1920 居中，层必须跟着居中 ——
   否则 1920 以上屏幕整层会右偏（2560 下实测偏 259px，环就不在光上了） */
.sol-banner .bn-anim,
.topbanner .bn-anim {
  left: 0; right: 0; width: 100%; max-width: 100%;
  transform: none;
}

/* ---------- 首页首屏 ---------- */
.bn-hero .bn-ring { transform-origin: 1830px 205px; }
.bn-hero .bn-core { animation-duration: 4.4s; }

.bn-flow-base { fill: none; stroke: #7FDDEF; stroke-width: 1; stroke-opacity: .12; }
.bn-flow-h {
  fill: none; stroke: #BFEFFA; stroke-width: 1.8; stroke-linecap: round;
  stroke-opacity: 0; stroke-dasharray: 2 58;
}

/* 热区层：首屏文案块 z-index 3 盖在动效层上，热区必须放到 4 才收得到 hover。
   整层 pointer-events:none，只有热区小圆开 all，不影响文案选中与按钮点击 */
.bn-hits { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bn-hits svg { display: block; width: 100%; height: 100%; }
.bn-hot { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }

/* hover 状态由 ui.js 打到 .hero 上：跨了 z-index 层，兄弟选择器够不着 */
.hero.bn-h1 .bn-flow-h1,
.hero.bn-h2 .bn-flow-h2,
.hero.bn-h3 .bn-flow-h3 { stroke-opacity: .9; animation: bn-flow-120 2.2s linear infinite; }
.hero.bn-h1 .bn-core,
.hero.bn-h2 .bn-core,
.hero.bn-h3 .bn-core { animation-duration: 1.5s; }
@keyframes bn-flow-120 { to { stroke-dashoffset: -120; } }

/* ---------- 解决方案：六个行业图形 ---------- */
.bn-ind .bn-glyph {
  fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-opacity: .86; transition: stroke-opacity .3s ease;
}
.bn-ind .bn-halo { opacity: .9; transition: opacity .3s ease; }
.bn-ind .bn-rail {
  fill: none; stroke: #BFEFFA; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 3 45; stroke-opacity: .12;
}
.bn-ind .bn-hot:hover ~ .bn-glyph { stroke-opacity: 1; }
.bn-ind .bn-hot:hover ~ .bn-halo { opacity: 1; }
.bn-ind .bn-hot:hover ~ .bn-rail { stroke-opacity: .85; animation: bn-rail 1.5s linear infinite; }
@keyframes bn-rail { to { stroke-dashoffset: -96; } }

/* ---------- 产品中心：网络交叉点 ---------- */
.bn-node .bn-nod { fill: #EAF8FD; opacity: .5; transition: opacity .25s ease; }
.bn-node .bn-rip {
  fill: none; stroke: #BFEFFA; stroke-width: 1.4; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.bn-node .bn-hot:hover ~ .bn-nod { opacity: 1; }
.bn-node .bn-hot:hover ~ .bn-rip { animation: bn-rip 1.6s ease-out infinite; }
.bn-node .bn-hot:hover ~ .bn-rip-2 { animation-delay: .8s; }
@keyframes bn-rip {
  0%   { opacity: .80; transform: scale(.6); }
  70%  { opacity: .16; transform: scale(2.8); }
  100% { opacity: 0;   transform: scale(3.4); }
}

/* 关掉系统动画时：只留静态结构，所有流光/涟漪停住 */
@media (prefers-reduced-motion: reduce) {
  .bn-flow-h, .bn-rail, .bn-rip { animation: none; }
  .bn-hero .bn-ring-a, .bn-hero .bn-ring-b, .bn-hero .bn-ring-c { animation: none; }
}

/* 环心热区：悬停核心 → 三条汇流同时跑，读作「所有数据都往这里汇」 */
.hero.bn-h0 .bn-flow-h { stroke-opacity: .92; animation: bn-flow-120 2.2s linear infinite; }
.hero.bn-h0 .bn-core { animation-duration: 1.3s; }

/* ---------- 应用案例：上行光点 ---------- */
/* 光点沿楼顶往上跑：0% 在柱底、100% 到柱顶，位移由元素上的 --dy 给
   （每根柱子高度不同，写死一个全局位移会对不上柱顶） */
.bn-up {
  opacity: 0;
  animation: bn-up 9.5s linear infinite;
}
@keyframes bn-up {
  0%   { opacity: 0;    transform: translateY(0); }
  12%  { opacity: .92;  transform: translateY(calc(var(--dy, -200px) * .12)); }
  74%  { opacity: .52;  transform: translateY(calc(var(--dy, -200px) * .78)); }
  100% { opacity: 0;    transform: translateY(var(--dy, -200px)); }
}
@media (prefers-reduced-motion: reduce) { .bn-up { animation: none; opacity: .5; } }

/* ---------- 解决方案：六个行业图形（HTML 版，2026-10-25 重做） ----------
   为什么不用 SVG 坐标层：原版把图标画在 2560×540 的 viewBox 里，靠
   transform + scale + vector-effect="non-scaling-stroke" 定位，个别 Edge
   版本上首尾两个不绘制（Chromium 各尺寸实测正常，但用户的机器上就是缺）。
   现在改成普通 HTML 元素 + 百分比定位，位置来自底图簇心（x/2560、y/540），
   只依赖布局引擎，不依赖任何 SVG 变换。 */
.bn-ind-layer {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  width: 100%; max-width: 100%; transform: none;
  z-index: 1; pointer-events: none;
}
.bn-ind {
  position: absolute; top: 48%; transform: translate(-50%, -50%);
  width: max(16px, 2.4%); aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: auto; cursor: crosshair;
}
/* 暗底垫片：亮光区上的橙/青图形也能读出来 */
.bn-ind::before {
  content: ''; position: absolute; inset: -7%; border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 16, 31, .34) 0%, rgba(4, 16, 31, .16) 52%, rgba(4, 16, 31, 0) 74%);
  pointer-events: none;
}
.bn-ind svg {
  position: relative; width: 100%; height: 100%; display: block;
  fill: none; stroke: currentColor; stroke-width: .92;   /* 见下方「1px 细线」阶梯 */
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .92; transition: opacity .28s ease;
  /* 同色微光 + 一层极淡的暗影：细线在亮光区上也能立住 */
  filter: drop-shadow(0 0 3px var(--glow, rgba(150, 225, 245, .45)))
          drop-shadow(0 1px 2px rgba(3, 12, 24, .50));
}
.bn-ind:hover svg { opacity: 1; }
/* 悬停：一道短光从图标往下落到底部基线（保留原来的动效语义） */
.bn-ind::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 200%; transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(191,239,250,.9), rgba(191,239,250,0));
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.bn-ind:hover::after { animation: bn-rail-fade 1.6s ease-in-out infinite; }
@keyframes bn-rail-fade { 0%, 100% { opacity: .18; } 50% { opacity: .92; } }
@media (prefers-reduced-motion: reduce) {
  .bn-ind:hover::after { animation: none; opacity: .55; }
}
@media (max-width: 900px) { .bn-ind-layer { display: none; } }

/* 分类栏目正文（.cat-intro）里的列表：原来只定义了 h2/h3/p，
   后台把卖点写成 <ul> 时用浏览器默认样式会缩进过大、行距挤，这里补齐 */
.cat-intro ul, .cat-intro ol { margin: 0 0 12px 18px; padding: 0; }
.cat-intro li { margin: 0 0 6px; padding-left: 2px; }
.cat-intro li:last-child { margin-bottom: 0; }
.cat-intro ul:last-child, .cat-intro ol:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .cat-intro ul, .cat-intro ol { margin-left: 15px; }
}

/* 修正上面一条：站点第 46 行把 ul/ol 全局 list-style 归零（导航等要用），
   正文列表必须显式恢复符号；且 outside 的符号画在 padding 区里，
   padding 为 0 时看不见 —— 缩进要放回 padding-left */
.cat-intro ul { list-style: disc outside; }
.cat-intro ol { list-style: decimal outside; }
.cat-intro ul, .cat-intro ol { margin-left: 0; padding-left: 20px; }

/* ==================================================================
   横幅高度三档（2026-10-25）
   ----------------------------------------------------------------
   读者往下滚之前，第一屏给出的「分量」应该是有层级的：
     ① 首页首屏        678px（1920 视口）—— 门面，不动
     ② 解决方案 / 产品中心 / 应用案例   315px 横幅 + 106px 标题条 ≈ 421px
     ③ 服务支持 / 关于我们 / 联系我们等  190~290px（只有深蓝页头，无大图）
   做法不是重新画图，也不是把图缩放：底图仍是 2560×540 的设计，
   这里用 object-fit:cover + object-position:center bottom 把**顶部 120px 的纯天空**
   裁掉，可视高度变成 2560×420。裁顶不裁底 —— 数据带、地平线、图标带、
   上行光柱全在下半部，一个像素都不动，所以动效层只需按「底部对齐」换算一次：
     · 解决方案的 HTML 图标：top 39.5% → 22.2%（(0.395×540−120)/420）
     · 案例 / 产品的 SVG 层：viewBox 0 0 2560 540 → 0 120 2560 420（坐标不用改）
   改带宽必须同步这两处，否则图标与底图分家。
   ================================================================== */
@media (min-width: 901px) {
  .topbanner .topbanner-img,
  .sol-banner .sol-banner-img {
    aspect-ratio: 2560 / 445;
    height: auto;
    /* 超宽屏（>3400）不能让 max-height 把比例压扁，否则 cover 会多裁、
       动效层与底图错位 */
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }
  /* 标题条同时收紧：上 46→24、下 54→34，标题整体上移 22px */
  .topbanner + .phero,
  .sol-banner + .phero { padding-top: 24px; padding-bottom: 34px; }
}

/* 横幅页的标题条再收一档（2026-10-25）
   ----------------------------------------------------------------
   横幅高度已从 405 压到 315（见本文件末尾「横幅高度三档」），标题条的
   上下留白也同步收紧：两块加起来 649 → 421，正文提前 228px 露头。
   为什么必须写在这条之后：上面 .phero:not(:has(p)):not(:has(.phero-meta))
   用了 !important（要压过 PHP 写的内联 padding），这里选择器多加一级
   「+ .phero」，用权重压过它，同层 !important 比权重。 */
.sol-banner + .phero:not(:has(p)):not(:has(.phero-meta)),
.topbanner + .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 12px 0 30px !important; }
@media (min-width: 1280px) {
  .sol-banner + .phero:not(:has(p)):not(:has(.phero-meta)),
  .topbanner + .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 12px 0 30px !important; }
}
@media (max-width: 640px) {
  .sol-banner + .phero:not(:has(p)):not(:has(.phero-meta)),
  .topbanner + .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 10px 0 24px !important; }
}

/* 底部渐隐收成一条「保险丝」（2026-10-25）
   ----------------------------------------------------------------
   横幅可视高度裁到 2560×445 之后，切线上那一行像素本身已经是 #10233F
   （实测三种图 445 行均值 RGB ≈ 24/41/64，与页头底色差 <10/255）。
   原来的 30% 渐隐会把图案底线（数据带刻度、产品横幅的工程图横线）一起压掉，
   所以只留 11%，作用仅仅是抹平那不到 10 级的台阶。 */
@media (min-width: 901px) {
  .topbanner .topbanner-fade,
  .sol-banner .sol-banner-fade {
    height: 11%;
    background: linear-gradient(to bottom, transparent, var(--bn-fade) 100%);
  }
}

/* ==================================================================
   横幅页标题条：压到贴着横幅（2026-10-25 第二轮）
   ----------------------------------------------------------------
   用户指着横幅下面那条深蓝带说「这里显得多余，标题上移」。
   量下来这块 119px（1082 视口）：标题上方 26px（12 padding + 行高半 leading），
   标题行盒 63px（字号 36、行高 1.75 —— 行距把盒子撑得很虚），
   行盒下方还有 30px padding。三段都是空的。
   改成：
     · padding 8 / 16（标题基本贴在横幅下沿）
     · h1 行高 1.75 → 1.2（36px 字号的盒子 63 → 43；1280+ 是 40px 字号，盒子 48）
   → 119px ⇒ 72px，且各宽度同高（行高最终由 48px 图标决定）。
   注意：这是「横幅页」专属，无图栏目页（服务支持 / 关于我们）不动。
   ================================================================== */
@media (min-width: 901px) {
  .sol-banner + .phero:not(:has(p)):not(:has(.phero-meta)),
  .topbanner + .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 8px 0 8px !important; }
  .sol-banner + .phero h1,
  .topbanner + .phero h1 { line-height: 1.2; }
  /* 页头变矮后，右上那颗 460px 的金色柔光圆（.phero::after）只剩一条弧形在
     右下角晃，像误加的色块 —— 横幅页收掉，无图页头保留 */
  .sol-banner + .phero::after,
  .topbanner + .phero::after { display: none; }
}
@media (max-width: 900px) {
  .sol-banner + .phero:not(:has(p)):not(:has(.phero-meta)),
  .topbanner + .phero:not(:has(p)):not(:has(.phero-meta)) { padding: 10px 0 18px !important; }
  .sol-banner + .phero h1,
  .topbanner + .phero h1 { line-height: 1.2; }
}

/* sf_hero 给 .phero-title 写死了内联 margin-top:14px（原意是让标题离金色标签远一点）。
   横幅页的标题条里没有标签，这 14px 纯留给空气 —— 收掉，标题再上移 14px。 */
.sol-banner + .phero .phero-title,
.topbanner + .phero .phero-title { margin-top: 0 !important; }

/* ==================================================================
   解决方案：竖线顶端的「流水光点」（2026-10-25）
   ----------------------------------------------------------------
   底图里每根竖线的顶端都有一颗粒子（make_banners.py 的 vbars 在
   hh > 0.6·hmax 时画的）。这里把 56 根竖线的顶点用同一套坐标复刻成
   会呼吸的光点，延迟按 x 位置排（--d = −(x/2560)×6.4s）——
   于是同一时刻只有一小段（约 8 颗）是亮的，亮点像一道光沿着柱顶
   从左流到右，一圈 6.4 秒，读起来是"流水"而不是"一起闪"。
   坐标由 PHP 按 vbars(seed=51..56) 原样复算，改图必须同步那些 left/top。
   ================================================================== */
.bn-tip {
  position: absolute;
  width: max(4px, .30%); aspect-ratio: 1;
  margin: -.15% 0 0 -.15%;          /* 以点中心对齐坐标（% 按容器宽度算，等于自身一半） */
  border-radius: 50%;
  background: #8FE2F7;            /* 静止与尾巴：偏青 */
  box-shadow: 0 0 9px rgba(150, 228, 250, .90), 0 0 22px rgba(90, 195, 240, .58);
  opacity: .16; transform: scale(.6);
  animation: bn-tip 7.8s linear infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
@keyframes bn-tip {
  0%   { opacity: .18; transform: scale(.55); background-color: #7FD6F0; }  /* 静止微光 */
  66%  { opacity: .20; transform: scale(.60); background-color: #8FE0F5; }  /* 起势（几乎不动） */
  70%  { opacity: 1;   transform: scale(1.55); background-color: #FFFFFF; } /* 波峰纯白 */
  75%  { opacity: .72; transform: scale(1.30); background-color: #D8F6FE; } /* 尾巴 1：近白 */
  81%  { opacity: .48; transform: scale(1.04); background-color: #B6EDFB; } /* 尾巴 2 */
  88%  { opacity: .30; transform: scale(.86);  background-color: #8FE2F7; } /* 尾巴 3：转青 */
  94%  { opacity: .22; transform: scale(.68);  background-color: #84DAF2; } /* 尾巴 4：青到快没了 */
  100% { opacity: .18; transform: scale(.55);  background-color: #7FD6F0; } /* 归位 */
}
/* 系统关掉动画时：光点留在原位、保持一条安静的高光线，不闪 */
@media (prefers-reduced-motion: reduce) {
  .bn-tip { animation: none; opacity: .55; transform: none; }
}

/* ==================================================================
   六个行业图标：1px 极细线（2026-10-25）
   ----------------------------------------------------------------
   SVG 的 stroke-width 用的是 viewBox 单位（0 0 24 24），图标盒子宽度
   随视口走（max(16px, 2.4%)），所以同一个 stroke-width 在不同宽度下
   画出来的实际线宽完全不同 —— 1920 下 1.1 单位 ≈ 2.1px（用户说"沉"），
   1082 下只有 1.2px。
   要让**实际线宽恒为 1px**，就得按图标盒子尺寸反算：
     stroke(单位) = 24 / 盒子px ≈ 24 / (0.024 × 视口宽) = 1000 / 视口宽
   下面按视口分档给出这个值（1920 → 0.52、1440 → 0.69、1082 → 0.92…）。
   注意：不要用 vector-effect="non-scaling-stroke" —— 个别 Edge 版本
   在这条路径上会让图形整块不绘制（2026-10-25 踩过，见 solution.php 注释）。
   ================================================================== */
.bn-ind svg { stroke-width: .92; }                      /* 901–1199 */
@media (min-width: 1200px) { .bn-ind svg { stroke-width: .83; } }
@media (min-width: 1440px) { .bn-ind svg { stroke-width: .69; } }
@media (min-width: 1600px) { .bn-ind svg { stroke-width: .62; } }
@media (min-width: 1920px) { .bn-ind svg { stroke-width: .52; } }
@media (min-width: 2300px) { .bn-ind svg { stroke-width: .43; } }
/* 悬停：只提亮，不换色（同色微光已经把这层"亮起来"的语感给了） */
.bn-ind:hover svg { opacity: 1; }

/* ==================================================================
   产品横幅：蜂窝晶格的涟漪（2026-10-25 建，2026-10-26 修方向）
   ----------------------------------------------------------------
   底图中部那片蜂窝是用 hex_lattice 画的，静态看只是一张底纹。
   这里在它上面复刻 77 个多边形（坐标同源，格线严丝合缝），让光从
   格阵中心 (880,237) 一圈圈往外扩 —— 和左侧的蜂窝图腾呼应。

   【10-26 修方向】上一版把"最亮"放在关键帧 66%，配合 product.php 里
   --d = -12 + 9.6×(r/rmax) 的负延迟，实际算出的是
     外圈 t_lit = 5.52s，中心 t_lit = 7.92s
   —— 外圈先亮、往中心收缩，方向正好反了；而且 0~66% 全是底纹，
   12 秒里有 8.5 秒完全静止，看着像"偶尔闪一下"。
   关键在 t_lit ≡ d (mod 12)：把最亮挪到 0%，同一套 --d 就变成
     中心 t_lit = 0s，外圈 t_lit = 9.6s
   从中心向外扩 9.6 秒，剩下的时间靠 0→24% 的余辉自然过渡。
   → 77 个 --d 一个都不用改，只改关键帧。改延迟前请先验算这一条，
     符号一错方向就反过来。

   · 用元素级 opacity 而不是 stroke-opacity：填充也跟着亮一档，
     像"格子被点亮"而不是"线变粗"
   · 底纹 5%、峰值 100%（填充只有 22%，所以仍是细线发光），对比 20:1
   · linear 必须保留：--d 与 r 线性对应，匀速才能让"亮带"和光环同步
   ================================================================== */
.bn-hex {
  fill: rgba(190, 240, 255, .32);
  stroke: #E8FBFF;
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: .05;
  animation: bn-hex 12s linear infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
@keyframes bn-hex {
  0%        { opacity: calc(1 * var(--a, 1));      stroke-width: 1.90; }  /* 涟漪前沿刚好经过：整格点亮 */
  6%        { opacity: calc(.55 * var(--a, 1));    stroke-width: 1.45; }  /* 余辉 1 */
  16%       { opacity: calc(.22 * var(--a, 1));    stroke-width: 1.16; }  /* 余辉 2 */
  28%       { opacity: calc(.07 * var(--a, 1));    stroke-width: 1.1;  }  /* 余辉 3 */
  38%, 100% { opacity: .05;                        stroke-width: 1.1;  }  /* 回到底纹，等下一轮 */
}
@media (prefers-reduced-motion: reduce) {
  .bn-hex { animation: none; opacity: .16; }
}

/* 涟漪光环：与蜂窝格的相位同源（都按到 (880,237) 的距离排），一个圆从中心
   长到 r=467（格阵外沿），越往外越淡。12 秒一圈里 9.6 秒在扩散（0→80%），
   剩下 2.4 秒归零、静场 —— 80% 与 80.01% 两个关键帧是"瞬时复位"，
   没有它圆会倒着缩回去。
   r 用 CSS 几何属性动画（Chrome/Edge 79+ 支持）；不支持时圆不动，
   只是少一圈光环，格子涟漪照旧。 */
.bn-rip-ring {
  fill: none;
  stroke: #CFEFFF;
  stroke-width: 1.6;
  opacity: 0;
  animation: bn-ring-rip 12s linear infinite;
}
@keyframes bn-ring-rip {
  0%     { r: 0;   opacity: 0;   }
  1%     { r: 6;   opacity: .58; }   /* 从中心炸开，一上来就看得见 */
  80%    { r: 467; opacity: .07; }   /* 9.6s 推到格阵外沿 */
  80.01% { r: 0;   opacity: 0;   }   /* 瞬时复位，避免倒缩 */
  100%   { r: 0;   opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .bn-rip-ring { animation: none; opacity: 0; }
}

/* ===== AnyMath 分类总览（product.php?cat=44 右侧「分类介绍」块）=====
   这一块是全站唯一结构化成组的分类介绍（其它分类仍是纯段落），
   所以样式统一用 .cat-intro .amov-* 收口，不会漏到数字孪生 / CNC 那几页。
   写在文件末尾、靠更高权重压 .cat-intro h2 / .cat-intro p 的老规则。 */

/* 行宽：这一页的卡片、九宫格、四窗口都是通栏的，正文段落再收 880
   就会在右边空出一条，和上下元素对不齐（导语尤其明显：第二行只剩半句）。
   2026-10-26 起取消限宽，正文跟随列宽。 */
.cat-intro .amov-lead {
  font-size: 16px; line-height: 1.95; color: #2B3A4D; margin: 0 0 20px;
}

/* --- 三大优势：三列等宽，底色比白卡低一档，避免「白上白」看不出边界 --- */
.cat-intro .amov-adv {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin: 0 0 18px;
}
.cat-intro .amov-adv-i {
  background: #F6F9FD; border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px 17px;
}
.cat-intro .amov-adv-i h3 {
  margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.4; color: #12233D;
}
.cat-intro .amov-adv-i h3 span {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 500; color: var(--blue); letter-spacing: .02em;
}
.cat-intro .amov-adv-i p { margin: 0; font-size: 13.8px; line-height: 1.8; color: #46566B; }

/* --- 典型应用：一行药丸，跟物理域那组共用 .amov-pills --- */
.cat-intro .amov-app {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  background: #F6F9FD; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 4px;
}
.cat-intro .amov-app-t {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #12233D; letter-spacing: .04em;
}
.cat-intro .amov-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.cat-intro .amov-pills li {
  margin: 0; padding: 8px 14px;
  font-size: 13.5px; line-height: 1; color: #34435A;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
}

/* --- 区段标题：左侧竖条，比 cat-intro 自带的 17px h2 更稳 --- */
.cat-intro .amov-h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 30px 0 10px; padding: 0; border: 0;
  font-size: 19px; font-weight: 700; line-height: 1.4; color: #12233D;
}
.cat-intro .amov-h2::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, var(--blue-l), var(--blue));
}
.cat-intro .amov-sub { margin: 0 0 16px; font-size: 14px; color: var(--gray); }

/* --- 平台组成：2 列卡片，整块可点，卡角挂编号 --- */
.cat-intro .amov-mods {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0 0 26px;
}
.cat-intro .amov-mod {
  position: relative; display: block;
  padding: 15px 54px 16px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cat-intro .amov-mod:hover {
  border-color: #BFD3EE; box-shadow: 0 6px 18px rgba(0, 64, 160, .10);
  transform: translateY(-2px);
}
.cat-intro .amov-mod-n {
  position: absolute; top: 13px; right: 15px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #C7D8EE;
}
.cat-intro .amov-mod-t { display: block; margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #12233D; }
.cat-intro .amov-mod-d { display: block; font-size: 13.2px; line-height: 1.75; color: #55647A; }
.cat-intro .amov-mod.is-cta {
  padding-right: 18px;
  background: linear-gradient(135deg, #F3F7FD, #EAF1FB); border-color: #CFE0F5;
}
.cat-intro .amov-mod-a { display: inline-block; margin-top: 9px; font-size: 13.5px; font-weight: 600; color: var(--blue); }

/* --- 界面两张并排：宽度各半，1210 的列宽下每张约 574 --- */
.cat-intro .amov-figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 0 0 28px;
}
.cat-intro .amov-figs figure { margin: 0; }
.cat-intro .amov-figs img {
  display: block; width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line); border-radius: 8px;
}
.cat-intro .amov-figs figcaption { margin-top: 8px; font-size: 12.8px; line-height: 1.6; color: var(--gray); }

/* --- 收口联系条 --- */
.cat-intro .amov-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin: 24px 0 0; padding: 16px 18px;
  background: #F6F9FD; border: 1px solid var(--line); border-radius: 10px;
}
.cat-intro .amov-note p { flex: 1 1 300px; margin: 0; font-size: 13.8px; line-height: 1.75; color: #46566B; }
.cat-intro .amov-note a {
  flex: 0 0 auto; padding: 10px 18px; border-radius: 6px;
  font-size: 13.5px; font-weight: 600; line-height: 1;
  color: var(--blue); border: 1px solid var(--blue); text-decoration: none;
  transition: background .18s, color .18s;
}
.cat-intro .amov-note a:last-child { background: var(--blue); color: #fff; }
.cat-intro .amov-note a:last-child:hover { background: var(--blue-d); border-color: var(--blue-d); }
.cat-intro .amov-note a:first-child:hover { background: var(--blue-xl); }

@media (max-width: 1024px) {
  .cat-intro .amov-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-intro .amov-adv-i:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .cat-intro .amov-lead { font-size: 15px; line-height: 1.9; }
  .cat-intro .amov-adv,
  .cat-intro .amov-mods,
  .cat-intro .amov-figs { grid-template-columns: minmax(0, 1fr); }
  .cat-intro .amov-adv-i:last-child { grid-column: auto; }
  .cat-intro .amov-h2 { font-size: 17px; margin-top: 24px; }
  .cat-intro .amov-mod { padding: 14px 44px 15px 15px; }
  /* 窄屏上「典型应用」标签会和药丸抢同一行，摆在一行开头更清楚 */
  .cat-intro .amov-app { gap: 9px; }
  .cat-intro .amov-app-t { flex: 1 1 100%; }
  .cat-intro .amov-note a { flex: 1 1 auto; text-align: center; }
}

/* ===== 窄屏横向溢出修复（2026-10-26）=====
   「分类介绍」块里嵌了 amdom / amstrip 这类富组件：它们的框内图设了
   min-width（720 / 760）用来触发「框内横向滚动」。但 product.php 的主列是
   .layout2 的 1fr，最小的自动宽度等于 min-content —— 图的最小宽度会一路
   顶到列宽，整页多出横向滚动条（实测 390 视口溢出 350px、768 溢出 58px，
   受影响的是 cat=63「动态建模环境」，因为它的介绍里有 amdom）。
   放开 main 的最小宽度，滚动就回到框内，符合原设计意图。 */
.layout2 > main { min-width: 0; }
.cat-intro { overflow-wrap: break-word; }

/* ==========================================================================
   纯正文栏目（2026-10-26）
   product.php 的 $catSolo：这个栏目下面既没有子栏目、也没有产品，只有一段正文。
   这时不再左右分栏，正文独占版心；左侧产品树与「暂无产品」空态都不再输出，
   页面就是一张干净的内容页 —— 「建个栏目只写段介绍」才是一步到位。
   只追加，不动上面 .layout2 的基础规则：各处 media query 里只调
   grid-template-columns、不碰 display，所以下面的 display:block 不会被反超。
   ========================================================================== */
.layout2.is-solo { display: block; }
.layout2.is-solo > aside { display: none; }

/* 整段没有 HTML 标签（后台直接敲的纯文字）：收一个阅读宽度并居中，
   否则一行横跨 1700px，眼睛回行会串行。带结构的正文（图文卡片）照旧通栏。 */
.layout2.is-solo .cat-intro.is-plain {
  max-width: 76ch; margin-left: auto; margin-right: auto;
  padding: 26px 32px;
}
/* 窄屏：上面的 padding 权重比 720 断点里的 .cat-intro 高，得单独收回来，
   否则 390 视口下正文两侧各吃掉 32px */
@media (max-width: 720px) {
  .layout2.is-solo .cat-intro.is-plain { padding: 16px 17px; }
}

/* ==========================================================================
   AnyMath 总览页 v2（2026-10-26）：九宫格界面图 + 元件库矩阵 + 分组小卡
   内容源：tools/anymath_intro.html（写库前先改这份，再跑 tools/anymath_load.php）
   图片有两套：*.webp 是 1000px 显示版，*-big.png 是点击放大用的原图。
   ========================================================================== */

/* --- 界面一览：三列九格，点任意一张走全站 lightbox 看原图 --- */
.cat-intro .amov-grid9 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 14px 0 26px;
}
.cat-intro .amov-shot {
  position: relative; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cat-intro .amov-shot:hover {
  border-color: #BFD3EE;
  box-shadow: 0 8px 22px rgba(0, 64, 160, .12);
  transform: translateY(-2px);
}
.cat-intro .amov-shot img {
  display: block; width: 100%; height: auto;
  margin: 0; border: 0; border-radius: 0;
  transition: transform .35s ease;
}
.cat-intro .amov-shot:hover img { transform: scale(1.025); }
.cat-intro .amov-shot figcaption {
  position: relative;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--line);
  background: #FBFCFE;
  font-size: 12.8px; line-height: 1.5; color: #3B4A5E;
  text-align: center;
}
/* 悬停角标：不做图片上的常驻遮罩，免得盖住截图里的界面元素 */
.cat-intro .amov-shot::after {
  content: "点击放大";
  position: absolute; top: 9px; right: 9px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(16, 35, 63, .84); color: #fff;
  font-size: 11.5px; line-height: 1; letter-spacing: .02em;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.cat-intro .amov-shot:hover::after { opacity: 1; transform: none; }

/* --- 元件库矩阵：整幅通栏，图内模块名小，靠点击放大看 --- */
.cat-intro .amov-matrix { margin: 16px 0 28px; }
.cat-intro .amov-matrix img {
  display: block; width: 100%; height: auto; margin: 0;
  /* 原来是 #0B1220：图是带透明通道的，转 webp 时丢 alpha，阴影变纯黑，
     左右就露出两道黑边。图已改白底合成，底色跟着改白，不再有黑框。 */
  background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.cat-intro .amov-matrix img:hover {
  border-color: #BFD3EE; box-shadow: 0 8px 22px rgba(0, 64, 160, .12);
}
.cat-intro .amov-matrix figcaption {
  margin-top: 9px;
  font-size: 12.8px; line-height: 1.65; color: var(--gray);
}

/* --- 科学计算：四张小卡（数据分析 / 可视化 / 程序设计 / 模型集成） --- */
.cat-intro .amov-cols4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 14px 0 6px;
}
.cat-intro .amov-col {
  padding: 13px 15px 14px;
  background: #F6F9FD; border: 1px solid var(--line); border-radius: 10px;
}
.cat-intro .amov-col b { display: block; margin-bottom: 5px; font-size: 14.5px; color: #12233D; }
.cat-intro .amov-col span { display: block; font-size: 13px; line-height: 1.65; color: #55647A; }

/* --- 工程科学计算特性：两列勾选清单 --- */
.cat-intro .amov-feat-t {
  margin: 16px 0 0; font-size: 13px; font-weight: 700;
  color: #12233D; letter-spacing: .04em;
}
.cat-intro .amov-feat {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 20px; margin: 10px 0 4px; padding: 0; list-style: none;
}
.cat-intro .amov-feat li {
  position: relative; margin: 0; padding-left: 21px;
  font-size: 14px; line-height: 1.7; color: #3A4756;
}
.cat-intro .amov-feat li::before {
  content: ""; position: absolute; left: 1px; top: .58em;
  width: 10px; height: 5px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* --- 集成与代码生成：两张并排说明卡 --- */
.cat-intro .amov-duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 14px 0 4px;
}
.cat-intro .amov-duo-i {
  padding: 16px 18px 17px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.cat-intro .amov-duo-i h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: #12233D; }
.cat-intro .amov-duo-i p { margin: 0 0 9px; font-size: 13.8px; line-height: 1.8; color: #46566B; }
.cat-intro .amov-duo-i p:last-child { margin-bottom: 0; }
.cat-intro .amov-duo-i ul { margin: 0; padding: 0; list-style: none; }
.cat-intro .amov-duo-i ul li {
  position: relative; margin: 0 0 7px; padding-left: 14px;
  font-size: 13.8px; line-height: 1.8; color: #46566B;
}
.cat-intro .amov-duo-i ul li:last-child { margin-bottom: 0; }
.cat-intro .amov-duo-i ul li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 4px; height: 4px; border-radius: 50%; background: #9FB6D2;
}

/* --- lightbox 接管分类正文里的图（原先只认 .prose） --- */
.cat-intro img.can-zoom { cursor: zoom-in; }

@media (max-width: 1200px) {
  .cat-intro .amov-grid9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-intro .amov-cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cat-intro .amov-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cat-intro .amov-grid9,
  .cat-intro .amov-feat { grid-template-columns: minmax(0, 1fr); }
  .cat-intro .amov-feat-t { margin-top: 14px; }
  .cat-intro .amov-shot figcaption { padding: 8px 10px; }
  /* 触屏没有 hover，角标改成常驻一小行，别让人以为图就只能看这么小 */
  .cat-intro .amov-shot::after {
    position: static; display: block; margin: 0;
    padding: 6px 10px 7px; border-radius: 0;
    background: #EFF4FB; color: var(--blue);
    font-size: 11.5px; text-align: center;
    opacity: 1; transform: none;
  }
}

/* ==========================================================================
   AnyMath 总览页 v3（2026-10-26 晚）
   1) 顶部工具链表：科学计算 → 工程仿真 → 代码生成，两块可点跳到本页章节
   2) 应用：图标卡（原站图标照搬），替掉原来的一行药丸
   3) 科学计算：操作界面图（左三右三标签 + 截图），放在「工程科学计算特性」之后
   4) 动态建模：四窗口（物理 / 离散 / 连续 / 状态机），交互复用 footer 的 initTabs
   5) 独特的数学核心那段原文，收成引文块（文字一字未改）
   只追加不覆盖：上面 .cat-intro .amov-* 的老规则靠顺序被这里压。
   ========================================================================== */

/* --- 锚点落点：吸顶头约 74px，留 84 让标题不被压住 --- */
.cat-intro .amov-h2 { scroll-margin-top: 84px; }
/* 跳过来时给标题垫一层淡蓝，眼睛能立刻找到落点（不做动画，免打扰） */
.cat-intro .amov-h2:target {
  background: #E9F2FC; border-radius: 6px; box-shadow: 0 0 0 7px #E9F2FC;
}

/* --- 工具链表：三个节点 + 箭头，前两个是链接 --- */
.cat-intro .amov-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 44px minmax(0, 1.04fr);
  align-items: center;
  /* 上内边距给圆形图标留位置：图标 top:-29 压出框顶，不留白会被上文挤住 */
  margin: 4px 0 10px; padding: 30px 0 0;
}
/* 两块方框：内容垂直居中，圆形图标压在框顶外沿（原站就是这种「帽子」做法） */
.cat-intro .amov-flow-i,
.cat-intro .amov-flow-out {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 14px 16px; min-height: 132px;
  border-radius: 14px; text-align: center; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cat-intro .amov-flow-i { border: 2px solid #9FB0E8; background: #F2EFFC; }
.cat-intro .amov-flow-mb { border-color: #8DC4EA; background: #E9F5FD; }
.cat-intro .amov-flow-out {
  border: 2px solid #5BA9D8; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding-top: 16px;
}
.cat-intro .amov-flow-i b,
.cat-intro .amov-flow-out b {
  display: block; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: #172A46;
}
.cat-intro .amov-flow-ico {
  position: absolute; top: -29px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 12px rgba(24, 72, 140, .16);
  display: grid; place-items: center;
}
.cat-intro .amov-flow-pill {
  /* 钉在框底：两块方框的标题就落在同一水平线上，不会被这颗按钮顶歪 */
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 7px 15px; border-radius: 6px; background: #2C6FC4; color: #fff;
  font-size: 12.5px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.cat-intro .amov-flow-tiles { display: flex; gap: 10px; }
.cat-intro .amov-flow-tiles i {
  width: 46px; height: 46px; border-radius: 10px; background: #1B7FC4;
  display: grid; place-items: center;
}
.cat-intro .amov-flow-i:hover,
.cat-intro .amov-flow-out:hover {
  border-color: #2C6FC4;
  box-shadow: 0 8px 20px rgba(0, 64, 160, .14);
  transform: translateY(-2px);
}
.cat-intro .amov-flow-i:focus-visible,
.cat-intro .amov-flow-out:focus-visible {
  outline: 2px solid #2C6FC4; outline-offset: 3px;
}
.cat-intro .amov-flow-arrow,
.cat-intro .amov-flow-chev {
  display: grid; place-items: center; height: 100%;
}
.cat-intro .amov-flow-note {
  margin: 0 0 22px; font-size: 12.8px; line-height: 1.6; color: var(--gray); text-align: center;
}

/* --- 应用：图标卡（原站图标照搬），四列两行 8 条正好装满 --- */
.cat-intro .amov-apps {
  display: block; margin: 0 0 6px;
}
.cat-intro .amov-apps-t {
  display: block; margin: 0 0 9px;
  font-size: 13px; font-weight: 700; color: #12233D; letter-spacing: .04em;
}
.cat-intro .amov-apps ul {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.cat-intro .amov-apps li {
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; margin: 0; padding: 9px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: 13.4px; line-height: 1.35; color: #26374D;
  transition: border-color .18s, box-shadow .18s;
}
.cat-intro .amov-apps li:hover {
  border-color: #BFD3EE; box-shadow: 0 5px 14px rgba(0, 64, 160, .08);
}
.cat-intro .amov-apps li img {
  flex: 0 0 auto; width: 36px; height: 36px; margin: 0; border: 0;
  object-fit: contain;
}

/* --- 操作界面：左三右三标签 + 中间截图，连线用 ::after/::before 画 --- */
.cat-intro .amov-ide {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0 26px; margin: 20px 0 26px;
}
.cat-intro .amov-ide-side { display: flex; flex-direction: column; gap: 20px; }
.cat-intro .amov-ide-l { align-items: flex-end; }
.cat-intro .amov-ide-r { align-items: flex-start; }
.cat-intro .amov-ide-side span {
  position: relative; display: block; padding: 9px 16px; white-space: nowrap;
  background: #fff; border: 1.5px solid #7FB2DC; border-radius: 9px;
  font-size: 13.4px; font-weight: 600; line-height: 1; color: #1B5C93;
  box-shadow: 0 2px 6px rgba(24, 72, 140, .08);
}
.cat-intro .amov-ide-l span::after {
  content: ""; position: absolute; right: -26px; top: 50%; width: 26px; height: 1.5px;
  background: #A9C6E2;
}
.cat-intro .amov-ide-l span::before {
  content: ""; position: absolute; right: -29px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: #2C8FD0;
}
.cat-intro .amov-ide-r span::after {
  content: ""; position: absolute; left: -26px; top: 50%; width: 26px; height: 1.5px;
  background: #A9C6E2;
}
.cat-intro .amov-ide-r span::before {
  content: ""; position: absolute; left: -29px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: #2C8FD0;
}
.cat-intro .amov-ide-shot img {
  display: block; width: 100%; height: auto; margin: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(26, 54, 93, .12);
}
.cat-intro .amov-ide figcaption {
  grid-column: 1 / -1; margin-top: 16px;
  font-size: 12.8px; line-height: 1.7; color: var(--gray); text-align: center;
}

/* --- 原文引文块（独特的数学核心） --- */
.cat-intro .amov-quote {
  margin: 12px 0 16px; padding: 14px 18px;
  background: #F6F9FD; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
  font-size: 14.5px; line-height: 1.9; color: #2B3A4D;
}

/* --- 四窗口：左侧编号竖排，右侧内容切换 --- */
.cat-intro .amsw {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
  margin: 12px 0 26px; padding: 14px;
  background: #F8FAFD; border: 1px solid var(--line); border-radius: 12px;
}
.cat-intro .amsw-nav { display: grid; gap: 10px; align-content: start; }
.cat-intro .amsw-tab {
  display: block; width: 100%; margin: 0; padding: 13px 8px 14px;
  background: #fff; border: 1px solid #D6E2F0; border-radius: 10px;
  font: inherit; text-align: center; cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.cat-intro .amsw-tab i {
  display: block; font-style: normal; font-size: 16px; font-weight: 700;
  letter-spacing: .04em; color: #B9CBE0;
}
.cat-intro .amsw-tab b { display: block; margin-top: 3px; font-size: 13.2px; font-weight: 600; color: #3A4756; }
.cat-intro .amsw-tab:hover { border-color: #9FC0E4; background: #F4F8FE; }
.cat-intro .amsw-tab.is-on {
  background: linear-gradient(180deg, #155379, #0F3F63);
  border-color: #0F3F63; box-shadow: 0 6px 16px rgba(16, 60, 100, .22);
}
.cat-intro .amsw-tab.is-on i { color: rgba(255, 255, 255, .62); }
.cat-intro .amsw-tab.is-on b { color: #fff; }
.cat-intro .amsw-tab:focus-visible { outline: 2px solid #2C8FD0; outline-offset: 2px; }
.cat-intro .amsw-panes { min-width: 0; }
.cat-intro .amsw-panel { display: none; }
.cat-intro .amsw-panel.is-on { display: block; }
.cat-intro .amsw-shot { margin: 0 0 12px; }
.cat-intro .amsw-shot img {
  display: block; width: 100%; height: auto; margin: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 9px;
}
.cat-intro .amsw-shot figcaption { margin-top: 7px; font-size: 12.6px; line-height: 1.6; color: var(--gray); }
.cat-intro .amsw-panel p { margin: 0 0 10px; font-size: 14px; line-height: 1.85; color: #3A4756; }
.cat-intro .amsw-panel .amsw-lib {
  margin: 13px 0 6px; font-size: 12.8px; font-weight: 700;
  color: #12233D; letter-spacing: .03em;
}
.cat-intro .amsw-panel ul { margin: 0; padding-left: 18px; }
.cat-intro .amsw-panel li { margin: 0 0 4px; font-size: 13.6px; line-height: 1.8; color: #46566B; }
.cat-intro .amsw-panel li:last-child { margin-bottom: 0; }

/* --- 窄屏 --- */
@media (max-width: 900px) {
  .cat-intro .amov-flow {
    grid-template-columns: minmax(0, 1fr); gap: 22px;
    padding: 30px 0 0;
  }
  .cat-intro .amov-flow-arrow,
  .cat-intro .amov-flow-chev { display: none; }
  .cat-intro .amov-flow-i,
  .cat-intro .amov-flow-out { min-height: 0; padding: 32px 14px 16px; }
  /* 窄屏逐块上下排，框高由内容撑开：把底部让给钉住的「物理建模」 */
  .cat-intro .amov-flow-mb { padding-bottom: 56px; }

  .cat-intro .amov-apps { display: block; }
  .cat-intro .amov-apps ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cat-intro .amov-ide { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cat-intro .amov-ide-shot { order: 1; }
  .cat-intro .amov-ide-side {
    order: 2; flex-direction: row; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: center;
  }
  .cat-intro .amov-ide-r { order: 3; }
  .cat-intro .amov-ide-side span { padding: 7px 11px; font-size: 12.4px; }
  .cat-intro .amov-ide-side span::after,
  .cat-intro .amov-ide-side span::before { display: none; }
  /* 单列后 figcaption 默认 order:0 会跑到图上面，明确排到最后 */
  .cat-intro .amov-ide figcaption { order: 4; margin-top: 2px; }

  .cat-intro .amsw { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .cat-intro .amsw-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .cat-intro .amsw-tab { padding: 9px 4px 10px; }
  .cat-intro .amsw-tab i { font-size: 13px; }
  .cat-intro .amsw-tab b { font-size: 12px; }
}
@media (max-width: 480px) {
  /* 390 上仍排两列：8 条挤成一列要翻两屏，卡里的人名也没长到必须独占一行 */
  .cat-intro .amov-apps ul { gap: 8px; }
  .cat-intro .amov-apps li { gap: 8px; padding: 8px 10px; min-height: 52px; font-size: 12.6px; }
  .cat-intro .amov-apps li img { width: 30px; height: 30px; }
  .cat-intro .amsw-tab b { font-size: 11.5px; }
}
/* 减速偏好下也不做位移动画，只留描边变化 */
@media (prefers-reduced-motion: reduce) {
  .cat-intro .amov-flow-i,
  .cat-intro .amov-flow-out,
  .cat-intro .amov-apps li,
  .cat-intro .amsw-tab { transition: border-color .01s, box-shadow .01s; }
  .cat-intro .amov-flow-i:hover,
  .cat-intro .amov-flow-out:hover { transform: none; }
}

/* 2026-10-27：AnyMath 总览页把「集成与代码生成」拆成两节（集成与设备 / 代码生成及烧录），
   每节只剩一张卡，用 amov-duo-1 让它撑满整行，避免右侧空半列。 */
.cat-intro .amov-duo-1 { grid-template-columns: minmax(0, 1fr); }

/* ===== 2026-10-27：AnyMath 总览页「集成与设备」= 原站同栏目整块内容 =====
   结构：生态示意（COM / CAN / UDP / VISA 四通道 + 中心 AnyMath）→ 六类可对接系统，共 27 张卡片；
   图片在 uploads/images/anymath/jcx/jcx-01..27.webp（原站素材重压，白色底已合成）。 */
.cat-intro .jcx-hub {
  display: grid; grid-template-columns: minmax(0, 1fr) 236px minmax(0, 1fr);
  grid-template-areas: "qa core qb" "qc core qd";
  gap: 14px; margin: 16px 0 14px;
}
.cat-intro .jcx-q1 { grid-area: qa; }
.cat-intro .jcx-q2 { grid-area: qb; }
.cat-intro .jcx-q3 { grid-area: qc; }
.cat-intro .jcx-q4 { grid-area: qd; }
.cat-intro .jcx-q {
  padding: 14px 16px 15px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
}
.cat-intro .jcx-q-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 9px; }
.cat-intro .jcx-q-h b { font-size: 15px; font-weight: 800; letter-spacing: .6px; color: var(--blue); }
.cat-intro .jcx-q-h span { font-size: 11.5px; color: var(--gray); }
.cat-intro .jcx-q ul { margin: 0; padding: 0; list-style: none; }
.cat-intro .jcx-q li {
  position: relative; padding-left: 15px; margin: 0 0 6px;
  font-size: 13px; line-height: 1.65; color: #3C4B60;
}
.cat-intro .jcx-q li:last-child { margin-bottom: 0; }
.cat-intro .jcx-q li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: #BBD0EC;
}
.cat-intro .jcx-hub-core {
  grid-area: core; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 20px 16px; text-align: center;
  background: linear-gradient(180deg, #F4F8FF, #fff 62%);
  border: 1px solid #D8E4F6; border-radius: 14px;
  box-shadow: 0 10px 26px -20px rgba(0, 64, 160, .6);
}
.cat-intro .jcx-core-ico { margin-bottom: 2px; opacity: .9; }
.cat-intro .jcx-core-logo { font-size: 20px; font-weight: 800; letter-spacing: .4px; color: var(--blue); }
.cat-intro .jcx-core-t { font-size: 13px; font-weight: 600; color: #12233D; }
.cat-intro .jcx-core-b { font-size: 11.5px; line-height: 1.7; color: var(--gray); }

.cat-intro .jcx-sec {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 12px; padding: 0;
  font-size: 15.5px; font-weight: 700; color: #12233D;
}
.cat-intro .jcx-sec::before {
  content: ""; flex: 0 0 auto; width: 3px; height: 15px;
  border-radius: 2px; background: var(--blue);
}
.cat-intro .jcx-sec i {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--gray);
  padding: 1px 8px; background: #F2F5F9; border-radius: 20px;
}
.cat-intro .jcx-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px; margin: 0 0 4px;
}
.cat-intro .jcx-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cat-intro .jcx-card:hover {
  border-color: #C9D8EE; transform: translateY(-2px);
  box-shadow: 0 14px 28px -22px rgba(16, 42, 80, .55);
}
.cat-intro .jcx-card-media {
  display: flex; align-items: center; justify-content: center;
  height: 158px; padding: 10px 12px; background: #fff;
}
.cat-intro .jcx-card-media img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.cat-intro .jcx-card-main { padding: 13px 15px 15px; }
.cat-intro .jcx-card-main h4 {
  margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #12233D;
}
.cat-intro .jcx-card-main p { margin: 0 0 7px; font-size: 12.8px; line-height: 1.78; color: #46566B; }
.cat-intro .jcx-card-main p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .cat-intro .jcx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cat-intro .jcx-hub {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "core" "qa" "qb" "qc" "qd";
  }
}
@media (max-width: 699px) {
  .cat-intro .jcx-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-intro .jcx-card-media { height: 140px; }
}

/* ==========================================================================
   AnyMath 总览：通栏配图（2026-10-27）
   代码生成链路 / 开发板支持 / 微处理器支持 / RITM 硬件在环，四张产品资料原图。
   图上的题名已裁掉，靠上面的段首句与 figcaption 表达，避免与正文标题重复。
   外观沿用 .amov-shot（白卡 + 顶部悬停「点击放大」角标 + 图下说明条），
   这里只补通栏外边距——.amov-shot 原本是为九宫格写的，margin:0 贴着上下段落。
   ========================================================================== */
.cat-intro .amov-shot--wide { margin: 16px 0 24px; }
/* 九宫格里的说明只有一行，居中好看；通栏这张说明常写到两三行，居中会读得别扭，改左对齐 */
.cat-intro .amov-shot--wide figcaption { text-align: left; padding: 10px 14px 11px; }
@media (max-width: 699px) {
  .cat-intro .amov-shot--wide { margin: 14px 0 20px; }
  .cat-intro .amov-shot--wide figcaption { padding: 9px 11px 10px; }
}

/* ==========================================================================
   AnyMath「动态建模环境」栏目头图（2026-10-27）
   版式照搬原站该栏目首屏：左边标题 + 三条要点，右边蓝色插图。
   图是原站原图（自带圆角与图内文字），这里只管两栏布局与要点样式。
   ========================================================================== */
.cat-intro .amb-hero {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 44px;
  align-items: center;
  margin: 2px 0 36px;
}
.cat-intro .amb-hero-txt h2 {
  margin: 0 0 20px;
  font-size: 27px;
  line-height: 1.32;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .3px;
}
.cat-intro .amb-hero-txt h2 .amb-hero-brand { color: var(--blue); }
.cat-intro .amb-hero-txt ul { margin: 0; padding: 0; list-style: none; }
.cat-intro .amb-hero-txt li {
  position: relative;
  margin: 0 0 13px;
  padding-left: 19px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--gray);
}
.cat-intro .amb-hero-txt li:last-child { margin-bottom: 0; }
.cat-intro .amb-hero-txt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .63em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.cat-intro .amb-hero-fig { margin: 0; }
.cat-intro .amb-hero-fig img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  .cat-intro .amb-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 28px; }
  .cat-intro .amb-hero-txt h2 { font-size: 24px; margin-bottom: 16px; }
  .cat-intro .amb-hero-fig { max-width: 620px; }
}

/* ==========================================================================
   「集成与设备」生态伙伴卡片：补 .cat-intro 版（2026-10-27）
   这套 .amint 样式原本只写了 .prose 前缀（产品详情页 1095 能用），
   但栏目页（product.php?cat=67 集成与设备，sf_page am-148）的正文容器是
   .cat-intro，.prose 规则全部落空，后果：
     ① .amint-logo img 只剩全局 max-width:100%，420x144 的图被压成
        188x144（横压 55%），GitFlic 的熊头、T-FLEX 的字都变形；
        360x360 的方形图更惨，被压成 188x360（横压 48%）。
     ② h4.amint-head 吃不到 19px / flex / 色块 ::before，退成 15px 粗体。
     ③ .amint-txt 的 15px/1.88 行距也没了。
   这里按 .cat-intro 前缀原样镜像一份（iron rule：只追加，不动上面的规则）。
   注意 img 用 width/height 100% + object-fit:contain —— 和 .prose 版保持一致，
   靠 contain 保比例，方形图（.is-sq）在 172px 高的框里也居中不变形。 */
.cat-intro .amint-logo img {
  display: block; width: 100%; height: 100%;
  margin: 0; border-radius: 0; object-fit: contain;
}
.cat-intro .amint-txt p {
  margin: 0; max-width: none;
  font-size: 15px; line-height: 1.88; color: #31383F;
}
.cat-intro .amint-txt p + p { margin-top: 15px; }
.cat-intro .amint-txt .amint-lead { color: #141D2B; font-weight: 500; }
.cat-intro .amint-txt ol { margin: 8px 0 0 22px; max-width: none; }
.cat-intro .amint-txt li {
  margin: 0 0 4px; font-size: 15px; line-height: 1.88; color: #31383F;
}
.cat-intro .amint-txt li:last-child { margin-bottom: 0; }
.cat-intro h4.amint-head {
  display: flex; align-items: center; gap: 11px;
  font-size: 19px; margin: 36px 0 14px; padding: 0;
}
.cat-intro h4.amint-head::before {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--amint-bg, #1E5FA8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09);
}
@media (max-width: 900px) {
  .cat-intro .amint-txt p,
  .cat-intro .amint-txt li { font-size: 14.5px; }
}
@media (max-width: 560px) {
  .cat-intro h4.amint-head { font-size: 17px; margin-top: 28px; }
}

/* ===== .ampv-*（私有化部署栏目页 h-col-141）在 .cat-intro 容器下的镜像规则 =====
   原规则全写在 .prose 前缀下（产品详情页容器），而「私有化部署」是分类栏目页、
   正文容器是 .cat-intro，导致：badge/pill/list 的小图标被全局 max-width:100%
   撑成容器宽（badge 图 609×609、pill 图 297px 宽），hero 的 28px 标题、
   17px 副标题、list 圆点与间距全部丢失，整页版式塌成普通文字堆。
   此处只追加 .cat-intro 前缀镜像，不动原 .prose 规则（产品 1090 详情页仍靠它）。 */
.cat-intro .ampv-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 13px; color: var(--blue); font-weight: 600;
}
.cat-intro .ampv-badge img { width: 22px; height: 22px; margin: 0; object-fit: contain; border-radius: 0; }
.cat-intro .ampv-hero h4 { margin: 0 0 10px; font-size: 28px; line-height: 1.3; }
.cat-intro .ampv-hero p { margin: 0 0 8px; max-width: none; font-size: 15px; line-height: 1.85; color: var(--gray); }
.cat-intro .ampv-hero .ampv-sub { font-size: 17px; font-weight: 700; color: #12233D; margin-bottom: 12px; }
.cat-intro .ampv-pill img { flex: 0 0 15px; width: 15px; height: 15px; margin: 0; object-fit: contain; border-radius: 0; }
.cat-intro .ampv-hero-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 16px; background: #fff;
}
.cat-intro .ampv-lead h4 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: #12233D; }
.cat-intro .ampv-lead p { margin: 0 0 10px; max-width: none; font-size: 14.5px; line-height: 1.9; color: #3B4A5E; }
.cat-intro .ampv-lead p:last-child { margin-bottom: 0; }
.cat-intro .ampv-list li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.8; color: #3B4A5E;
}
.cat-intro .ampv-list li:last-child { margin-bottom: 0; }
.cat-intro .ampv-list.has-ico li { padding-left: 0; }
.cat-intro .ampv-list.has-ico li::before { display: none; }
.cat-intro .ampv-list li img { display: inline-block; width: 14px; height: 14px; margin: 0 7px 0 0; vertical-align: -2px; object-fit: contain; border-radius: 0; }
.cat-intro .ampv-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-l);
}
.cat-intro .ampv-duo .ampv-list li { color: rgba(255, 255, 255, .94); }
.cat-intro .ampv-duo .ampv-list li::before { background: rgba(255, 255, 255, .7); }
.cat-intro .ampv-fig img {
  display: block; width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.cat-intro .ampv-infra-ico { display: block; width: 34px; height: 34px; margin: 0 0 10px; object-fit: contain; border-radius: 0; }
.cat-intro .ampv-infra h5 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--blue); }
.cat-intro .ampv-ind-ico { display: block; width: 30px; height: 30px; margin: 0 0 10px; object-fit: contain; border-radius: 0; }
.cat-intro .ampv-ind h5 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #12233D; }
.cat-intro .ampv-ind p { margin: 0; max-width: none; font-size: 13.5px; line-height: 1.8; color: var(--gray); }
@media (max-width: 560px) {
  .cat-intro .ampv-hero h4 { font-size: 23px; }
}

/* ===== .amb-hero 在 .prose 容器下的镜像规则（产品 1091 详情页） =====
   amb-hero 原规则只写了 .cat-intro 前缀（栏目页容器），而产品详情页正文在
   .prose 里，直接搬结构会落空；且 .prose 有自己的一套全局规则要重置：
   - .prose h2 带蓝色渐变竖条 ::before + 14px 缩进 + max-width:860px
   - .prose ul 是 disc 符号 + 22px 左边距
   - .prose img 有 8px 圆角 + 12px 上下边距
   此处镜像 .cat-intro 版的版式（4fr/5fr 两栏 + gap44），并把上述重置掉。 */
.prose .amb-hero {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 44px;
  align-items: center;
  margin: 2px 0 36px;
}
.prose .amb-hero-txt h2 {
  margin: 0 0 20px;
  padding-left: 0;
  border-left: 0;
  font-size: 27px;
  line-height: 1.32;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .3px;
  max-width: none;
}
.prose .amb-hero-txt h2::before { display: none; }
.prose .amb-hero-txt h2 .amb-hero-brand { color: var(--blue); }
.prose .amb-hero-txt ul { margin: 0; padding: 0; list-style: none; max-width: none; }
.prose .amb-hero-txt li {
  position: relative;
  margin: 0 0 13px;
  padding-left: 19px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--gray);
}
.prose .amb-hero-txt li:last-child { margin-bottom: 0; }
.prose .amb-hero-txt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .63em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.prose .amb-hero-fig { margin: 0; }
.prose .amb-hero-fig img {
  display: block; width: 100%; height: auto;
  margin: 0; border-radius: 0; max-width: none; background: #fff;
}
@media (max-width: 899px) {
  .prose .amb-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 28px; }
  .prose .amb-hero-txt h2 { font-size: 24px; margin-bottom: 16px; }
  .prose .amb-hero-fig { max-width: 620px; }
}

/* ===== 分类栏目正文（.cat-intro）阅读优化：2026-10-27 =====
   问题：栏目正文的小节标题用的是裸 <h4>，此前 .cat-intro 里没有任何 h2/h3/h4
   规则，h4 直接落到浏览器默认（1em 粗体），且全局 reset 把它的上下 margin
   归零 —— 标题与正文同为 15px、间距为 0，整页看着像一大段连续文字，
   读者很难分辨段落层级。
   做法：正文 15 → 16px（行高 1.95 → 2），三级标题统一放大并给出成体系的
   上下留白（越上层留白越多），标题颜色加深到 #101B2B。
   只追加、不改原规则；各组件自带的标题（.amint-head / .jcx-sec /
   .amov-h2 / .amov-adv-i h3 / .ampv-hero h4 / .jcx-card-main h4 …）权重更高，
   不受影响。 */
.cat-intro {
  font-size: 16px; line-height: 2;
  padding: 24px 28px 26px;
}
.cat-intro h2, .cat-intro h3, .cat-intro h4 {
  color: #101B2B; font-weight: 700; letter-spacing: .01em;
}
.cat-intro h2 { font-size: 23px; line-height: 1.45; margin: 40px 0 16px; }
.cat-intro h3 { font-size: 21px; line-height: 1.5;  margin: 34px 0 14px; }
.cat-intro h4 { font-size: 19px; line-height: 1.55; margin: 32px 0 12px; }
.cat-intro h2:first-child,
.cat-intro h3:first-child,
.cat-intro h4:first-child { margin-top: 0; }
.cat-intro p { margin: 0 0 14px; }
.cat-intro p:last-child { margin-bottom: 0; }
.cat-intro li { margin-bottom: 8px; }
.cat-intro li:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .cat-intro { font-size: 15px; line-height: 1.9; padding: 18px 16px 20px; }
  .cat-intro h2 { font-size: 20px; margin: 28px 0 12px; }
  .cat-intro h3 { font-size: 19px; margin: 26px 0 11px; }
  .cat-intro h4 { font-size: 17.5px; margin: 24px 0 10px; }
  .cat-intro p { margin-bottom: 12px; }
  .cat-intro li { margin-bottom: 7px; }
}
@media (max-width: 560px) {
  .cat-intro h2 { font-size: 19px; }
  .cat-intro h3 { font-size: 18px; }
  .cat-intro h4 { font-size: 17px; }
}

/* ===== 分类栏目正文（.cat-intro）图片比例保护：2026-10-27 =====
   全局只有 `img { max-width: 100% }`，**没有 height:auto**（`.prose img` 才是
   `max-width:100%; height:auto`）。栏目页正文里的 <img> 带着 HTML width/height
   属性，宽度被 max-width 压到栏宽后高度仍是属性值 →
   ① 宽图（如流程长图 3966×5056）被压成 1017×5056，纵向拉长 74%；
   ② 窄图（如 538×351 缩到 360 宽）横向压扁 33%；
   ③ 「已适配硬件」450×332 的实拍图缩到 326 宽后高度不变，横压 27.5%。
   这里给栏目正文兜一个 height:auto；组件自己写死高度的（
   .amint-logo / .jcx-card-media / .amhw-item 等，权重 0,2,x）不受影响。 */
.cat-intro img { height: auto; }

/* 「已适配的目标硬件」九宫格：原规则只写在 .prose 下，栏目页（cat=66）缺样式，
   补 .cat-intro 镜像（450×332 等实拍图统一按 148px 高 contain，白底不裁切） */
.cat-intro .amhw-lead { margin: 26px 0 12px; font-size: 14.5px; color: var(--gray); }
.cat-intro .amhw-item {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.cat-intro .amhw-item img {
  display: block; width: 100%; height: 148px; padding: 12px;
  margin: 0; border-radius: 0; object-fit: contain; background: #fff;
}
.cat-intro .amhw-item figcaption {
  background: #343A40; color: #fff;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.5; text-align: center;
}
@media (max-width: 560px) {
  .cat-intro .amhw-item img { height: 140px; }
}

/* ===== 字号阶梯与阅读层级（2026-10-27 · 实机 2560 反馈）=====
   用户实机在 2560px 屏上看：正文偏小、h4 与正文几乎同大、标题层级分不开。
   实测到的真问题：
     ① 正文容器（.prose / .cat-intro）内混用 12.8 / 13 / 13.4 / 13.5 / 13.6 /
        13.8 / 14 / 14.5 / 15 / 16 / 18px 共 11 档字号，同一屏上大小不一；
     ② AnyMath 总览页（cat=44）h3 只有 15.5px、卡片 h4 只有 14px，
        比 16px 正文还小 —— 标题层级倒挂，读者分不清哪里是新章节；
     ③ 产品详情 id=1090 正文只有 14.5px，而 id=1091/1186 是 16~18px，
        同类页面字号不统一；
     ④ 2560 屏下 2400+ 断点把正文抬到 18px，但行宽同时放到 1460，
        一行 80 字，眼睛跟不住行尾。

   本节用一套变量统一全站：
     正文 17px（≥1900）/ 16.5（≥1600）/ 16（其余，手机不再缩小）
     h2  27 / 26 / 25 / 23 / 22 / 20 / 19
     h3  24 / 23 / 22.5 / 21 / 20 / 19 / 18
     h4  21 / 21 / 20.5 / 19 / 18.5 / 18 / 17.5
   中文正文低于 15px 在手机上很难读，所以手机端钉在 16px 只缩标题。

   只追加、不改原规则；组件自带的高权重标题（.amb-hero-txt h2 等）不动，
   需要归位的一个个在同权重下重写。 */

:root {
  --fs-body: 16px;
  --fs-lh: 1.9;
  --fs-h2: 24px;
  --fs-h3: 22px;
  --fs-h4: 20px;            /* 1366~1599：原来 19px 只比正文大 1.19 倍，
                               标题看着像加粗了一行的正文，抬到 1.25 倍 */
  --fs-card: 14px;          /* 卡片内摘要 */
  --fs-card-t: 16px;        /* 卡片标题 */
  --fs-meta: 12.5px;        /* 型号 / 计数 / 图注等元信息下限 */
}
@media (min-width: 1600px) {
  :root { --fs-body: 16.5px; --fs-lh: 1.95; --fs-h2: 25px; --fs-h3: 22.5px;
          --fs-h4: 20.5px; --fs-card: 14.5px; --fs-card-t: 16.5px; }
}
@media (min-width: 1900px) {
  :root { --fs-body: 17px; --fs-lh: 2; --fs-h2: 26px; --fs-h3: 23px;
          --fs-h4: 21px; --fs-card: 14.5px; --fs-card-t: 17px; }
}
@media (min-width: 2400px) {
  :root { --fs-body: 17px; --fs-lh: 2; --fs-h2: 27px; --fs-h3: 24px;
          --fs-h4: 21px; --fs-card: 15px; --fs-card-t: 17px; }
}
@media (max-width: 1365px) {
  :root { --fs-body: 16px; --fs-lh: 1.9; --fs-h2: 23px; --fs-h3: 21px;
          --fs-h4: 19.5px; --fs-card: 14px; --fs-card-t: 16px; }
}
@media (max-width: 1023px) {          /* 平板 */
  :root { --fs-body: 16px; --fs-lh: 1.88; --fs-h2: 22px; --fs-h3: 20px;
          --fs-h4: 18.5px; --fs-card: 14px; --fs-card-t: 16px; }
}
@media (max-width: 768px) {           /* 手机 */
  :root { --fs-body: 16px; --fs-lh: 1.85; --fs-h2: 20px; --fs-h3: 19px;
          --fs-h4: 18px; --fs-card: 14px; --fs-card-t: 15.5px; }
}
@media (max-width: 430px) {
  :root { --fs-h2: 19px; --fs-h3: 18px; --fs-h4: 17.5px; }
}

/* --- 容器与三级标题统一走变量 --- */
.prose, .cat-intro { font-size: var(--fs-body); line-height: var(--fs-lh); }
.prose h2, .cat-intro h2 { font-size: var(--fs-h2); }
.prose h3, .cat-intro h3 { font-size: var(--fs-h3); }
.prose h4, .cat-intro h4 { font-size: var(--fs-h4); }

/* --- AnyMath 总览页（cat=44）：小节标题此前 19px、卡片标题 14px，层级倒挂 --- */
.cat-intro .amov-h2 { font-size: var(--fs-h2); }
.cat-intro .jcx-sec { font-size: var(--fs-h3); }
.cat-intro .jcx-card-main h4 { font-size: var(--fs-card-t); line-height: 1.45; }
/* 42 段生态伙伴说明，原来只有 12.8px，是整页最难读的一块 */
.cat-intro .jcx-card-main p { font-size: var(--fs-card); }
.cat-intro .jcx-core-logo { font-size: 21px; }
.cat-intro .jcx-core-b { font-size: var(--fs-meta); line-height: 1.7; }
.cat-intro .jcx-q-h span { font-size: var(--fs-meta); }
.cat-intro .jcx-sec i { font-size: var(--fs-meta); }
.cat-intro .amsw-panel p { font-size: 15px; }
.cat-intro .amsw-panel li { font-size: 14px; }
.cat-intro .amsw-tab b { font-size: 13.5px; }
.cat-intro .amov-adv-i p { font-size: 15px; }
.cat-intro .amov-adv-i h3 { font-size: 17px; }
.cat-intro .amov-duo-i h3 { font-size: 17px; }
.cat-intro .amov-duo-i p, .cat-intro .amov-duo-i li { font-size: 15px; }
.cat-intro .amov-note p { font-size: 14.5px; }
.cat-intro .amov-apps li { font-size: 14px; }
.cat-intro .amov-pills li { font-size: 14px; }
.cat-intro .amhw-lead { font-size: 15px; }
.cat-intro .amhw-item figcaption { font-size: 13px; }

/* --- 集成与设备（cat=67）：正文 15px 提到基准，小节标题归到 h4 梯度 --- */
.prose .amint-txt p, .cat-intro .amint-txt p { font-size: var(--fs-body); }
.prose .amint-txt li, .cat-intro .amint-txt li { font-size: var(--fs-body); }
.prose h4.amint-head, .cat-intro h4.amint-head { font-size: var(--fs-h4); }
.prose .amint-txt .amint-lead, .cat-intro .amint-txt .amint-lead { font-size: var(--fs-body); }

/* --- 私有化部署（cat=62 / 产品 1090）：两套容器都要写，否则一侧落空 --- */
.cat-intro .ampv-lead p, .prose .ampv-lead p { font-size: var(--fs-body); }
.cat-intro .ampv-lead h4, .prose .ampv-lead h4 { font-size: var(--fs-h4); }
.cat-intro .ampv-card p, .prose .ampv-card p { font-size: 14.5px; }
.cat-intro .ampv-card h5, .prose .ampv-card h5 { font-size: 15.5px; }
.cat-intro .ampv-list li, .prose .ampv-list li { font-size: 15px; }
.cat-intro .ampv-hero p, .prose .ampv-hero p { font-size: 16.5px; }
.cat-intro .ampv-hero .ampv-sub, .prose .ampv-hero .ampv-sub { font-size: 18px; }
.cat-intro .ampv-infra p, .prose .ampv-infra p { font-size: 15px; }
.cat-intro .ampv-ind p, .prose .ampv-ind p { font-size: 14.5px; }

/* --- 代码生成及烧录（cat=66）：h5 小标题 13.28px 太小 --- */
.cat-intro .amapp-item h5, .prose .amapp-item h5 { font-size: 15.5px; }
.cat-intro .amapp-item p, .prose .amapp-item p { font-size: 15px; }

/* --- 产品详情（.prose）：正文里零散的 14.5px 段落补到基准 --- */
.prose .amdom p, .prose .amdom-lead { font-size: var(--fs-body); }

/* --- 首页 STEP 区：标号 10.5px、说明 13px，在 58px 主标题旁边像脚注 ---
   标号抬到 11.5px，说明 13 → 14px 并把不透明度 .62 → .74（深底上更实）。 */
.hstep b i { font-size: 11.5px; }
.hstep span { font-size: 14px; color: rgba(228, 235, 245, .74); }

/* --- 窄屏回退：组件字号在大屏放大后，手机上按同一比例回落 --- */
@media (max-width: 900px) {
  .cat-intro .amov-h2 { font-size: var(--fs-h2); }
  .cat-intro .jcx-sec { font-size: var(--fs-h3); }
  .cat-intro .jcx-card-main h4 { font-size: 15.5px; }
  .cat-intro .jcx-card-main p { font-size: 14px; }
  .cat-intro .amsw-panel p { font-size: 14px; }
  .cat-intro .amov-adv-i p, .cat-intro .amov-duo-i p { font-size: 14.5px; }
}
@media (max-width: 768px) {
  .prose, .cat-intro { font-size: 16px; line-height: 1.85; }
  .prose h2, .cat-intro h2 { font-size: 20px; }
  .prose h3, .cat-intro h3 { font-size: 19px; }
  .prose h4, .cat-intro h4 { font-size: 18px; }
  .cat-intro .jcx-card-main h4 { font-size: 15.5px; }
  .cat-intro .jcx-card-main p { font-size: 14px; }
  .cat-intro .ampv-hero .ampv-sub { font-size: 17px; }
  .cat-intro .ampv-hero h4 { font-size: 23px; }
}
@media (max-width: 430px) {
  .prose h2, .cat-intro h2 { font-size: 19px; }
  .prose h3, .cat-intro h3 { font-size: 18px; }
  .prose h4, .cat-intro h4 { font-size: 17.5px; }
}

/* --- 补两条漏网的固定字号：AnyMath 总览导语（16px）、产品详情 h3.amd-h3（20px）---
   .amd-h3 原先在 720px 断点里降到 18px，这里统一走变量（变量在手机上也是 18px），
   两处不会再各写一套数字。 */
.cat-intro .amov-lead { font-size: var(--fs-body); line-height: var(--fs-lh); }
.prose h3.amd-h3 { font-size: var(--fs-h3); }

/* --- 图注与面包屑：随正文字号一起抬一档 ---
   图注原来是 12.5px / #94A3B5，在 #FAF9F6 上对比只有 2.44:1，远低于
   WCAG AA 的 4.5:1，2560 屏上几乎看不清。统一到 #63748C（4.7:1）。
   内联写死颜色的图注（旧站导入的案例正文）已单独改过内容。 */
.prose figure figcaption,
.cat-intro figure figcaption { color: #63748C; }
.crumb, .crumb a, .crumb span { font-size: 14px; }
@media (max-width: 768px) { .crumb, .crumb a, .crumb span { font-size: 13px; } }

/* 产品头部的「MODEL」标号只有 9.5px，是整站最小的文字，抬到 11px 保住读取 */
.phead-model i { font-size: 11px; letter-spacing: 1.8px; }

/* ============================================================
   侧栏 .dbox 列表（2026-10-29）
   product-detail.php / solution-detail.php 的侧栏原来把 <li> 直接写在
   <div class="dbox"> 里，缺 <ul>，HTML 不合规（屏幕阅读器不认这是列表）。
   补上 <ul> 后要清掉浏览器默认的 40px 缩进和项目符号：
   圆点由 .dbox li::before 画，缩进由 .dbox li 的 padding-left:14px 给。
   ============================================================ */
.dbox ul { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   产品图集 ≥2 张：改为 2 列等大方格（2026-10-29）
   ------------------------------------------------------------
   起因：1165「野战光缆」要放 4 张 800×800 的芯数截面图（2/4/6/12 芯）。
   原来的 .gal 是「minmax(150px,1fr) + height:130px + object-fit:cover」的
   缩略图墙，方图放进去只截到中间一条横带，图上的标题和右侧引线标注全被
   裁掉 —— 等于毁图。全站原来没有任何产品放过 2 张以上图集（查库：0 个），
   所以这个分支一直没被验证过。
   现在：≥2 张时走 2 列，格子锁 1:1 且 contain —— 方图正好填满、非方图
   留白但不裁切。单图仍走 .gal-single（整幅不裁），互不影响。
   ============================================================ */
.gal.gal-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gal.gal-grid figure {
  background: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.gal.gal-grid img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain;
}
@media (max-width: 700px) {
  /* 手机上两列每格只有 165px，图内标注会糊成一片，退回单列 */
  .gal.gal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   正文等大方图 2×2 并排：.prose .fig4（2026-10-29）
   ------------------------------------------------------------
   适用「同一产品的等大方图对照」，如 1165 野战光缆的 2/4/6/12 芯
   截面图（都是 800×800）。竖排一张一屏，四张就四屏，读者没法对照。
   为什么不做成「单段多图自动 2 列」：全站已有 5 个产品在一个 <p> 里
   连排 2~3 张图（1100/1101/1102 含 1600×2267 竖长海报，1131 含
   824×243 横幅条），一刀切两列会把它们排乱。所以只给需要方格图的
   地方挂这个类，其他页面零影响。
   不设 max-width：产品页正文列宽约 1050px，图区跟着列宽走才能和文字左右对齐
   （设 860 反而比文字窄 190px，右侧空出一截）。
   手机 ≤700px 退回单列：两列时每格仅 210px，图内标注会糊。
   ============================================================ */
.prose .fig4 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin: 18px 0;
}
.prose .fig4 img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; margin: 0; background: #fff; border-radius: 8px;
}
@media (max-width: 700px) {
  .prose .fig4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   第58批 · 栏目页（.cat-intro）补 AnyMath 组件样式镜像（2026-11-01）
   问题：product.php?cat=62~69 的正文容器是 .cat-intro，而 .fsm-* / .amadv-* /
        .amhero-* / .amdom-* / .amapp-ico 这些组件的尺寸与排版规则只写在
        .prose 前缀下（产品详情页容器）→ 栏目页里规则全部落空：
          · .fsm-sc-ico 失去 42px 限制，102~125px 的图标按原尺寸铺开
          · .fsm-adv-ico 失去 48px + 绝对定位，160px 图标挤在标题上方
          · 卡片 h5/p 退成 .cat-intro 的通用字号
   做法：按 .cat-intro 前缀原样镜像一份（iron rule：只追加，不动上面的规则）。
   覆盖：cat=62 私有化部署 / 63 动态建模环境 / 64 物理元件库 / 65 有限状态机库 /
        66 代码生成及烧录 / 67 集成与设备 / 68 版本与部署 / 69 科学计算 /
        82 精密设备及仪器包装。
   ========================================================================== */

.cat-intro .amsim-note {
  max-width: 48%; margin: 0 0 4px; background: #1E7BA8; color: #fff; border-radius: 16px; padding: 18px 24px; font-size: 1em; line-height: 1.85;
}

.cat-intro .amhero-txt h4 {
  margin: 0 0 12px; font-size: 26px; line-height: 1.35;
}

.cat-intro .amhero-txt p {
  margin: 0; font-size: 16px; color: var(--gray); max-width: none;
}

.cat-intro .amhero-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 0;
}

.cat-intro .amadv-ico {
  flex: 0 0 38px; width: 38px; height: 38px; margin: 0; object-fit: contain; border-radius: 0;
}

.cat-intro .amadv-h span {
  font-size: 17px; font-weight: 700; color: #12233D; line-height: 1.45;
}

.cat-intro .amadv-item p {
  margin: 0; max-width: none; font-size: 14.5px; line-height: 1.88; color: var(--gray);
}

.cat-intro .amapp-ico {
  display: block; width: 44px; height: 44px; margin: 0 0 14px; object-fit: contain; border-radius: 0;
}

.cat-intro .fsm-tagline {
  margin: 0 0 10px; max-width: none; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #4A7EA8;
}

.cat-intro .fsm-hero-txt h4 {
  margin: 0; max-width: none; font-size: 25px; font-weight: 700; line-height: 1.4; color: #12233D;
}

.cat-intro .fsm-hero-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 0;
}

.cat-intro .fsm-what-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 10px;
}

.cat-intro .fsm-what-txt p {
  margin: 0; max-width: none; font-size: 15.5px; line-height: 1.95; color: var(--gray);
}

.cat-intro .fsm-sc-ico {
  display: block; width: 42px; height: 42px; margin: 0 0 16px; object-fit: contain; border-radius: 0;
}

.cat-intro .fsm-sc-item h5 {
  margin: 0 0 10px; font-size: 16.5px; font-weight: 700; color: #1B6FA8; line-height: 1.45;
}

.cat-intro .fsm-sc-item p {
  margin: 0; max-width: none; font-size: 13.8px; line-height: 1.85; color: var(--gray);
}

.cat-intro .fsm-adv-ico {
  position: absolute; left: -66px; top: -4px; width: 48px; height: 48px; margin: 0; object-fit: contain; border-radius: 0;
}

.cat-intro .fsm-adv-h {
  margin: 6px 0 10px; max-width: none; font-size: 18px; font-weight: 700; color: #12233D; line-height: 1.5;
}

.cat-intro .fsm-adv-item > p {
  margin: 0 0 14px; max-width: none; font-size: 14.8px; line-height: 1.9; color: var(--gray);
}

.cat-intro .fsm-adv-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 10px;
}

.cat-intro .fsm-adv-fig.is-narrow img {
  max-width: 430px;
}

.cat-intro .fsm-note {
  margin: 0 0 22px; max-width: none; background: #EAF2FB; border-left: 4px solid #1B6FA8; border-radius: 10px; padding: 15px 22px; font-size: 14.8px; line-height: 1.9; color: #1E3D5C;
}

.cat-intro .fsm-banner {
  margin: 30px 0 34px; max-width: none; background: linear-gradient(120deg, #0E5C92, #1B7EB8); border-radius: 12px; padding: 17px 26px; font-size: 16px; font-weight: 600; line-height: 1.7; color: #fff; text-align: center;
}

.cat-intro .fsm-feat-item h5 {
  position: relative; margin: 0 0 8px; padding-left: 15px; font-size: 15.8px; font-weight: 700; color: #1B6FA8; line-height: 1.55;
}

.cat-intro .fsm-feat-item h5::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #4FA3DC, #1B6FA8);
}

.cat-intro .fsm-feat-item p {
  margin: 0; max-width: none; font-size: 13.8px; line-height: 1.85; color: var(--gray);
}

.cat-intro .fsm-debug-item h5 {
  margin: 0 0 14px; font-size: 15.5px; font-weight: 700; color: #12233D; line-height: 1.5;
}

.cat-intro .fsm-debug-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 8px; background: #F7F9FC;
}

.cat-intro .fsm-fig img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: 12px;
}

.cat-intro .amdom p,
.cat-intro .amdom-lead {
  font-size: var(--fs-body);
}

@media (max-width: 900px) {
  .cat-intro .amsim-note {
    max-width: 100%; font-size: 15px; padding: 15px 18px;
  }
  .cat-intro .amhero-txt h4 {
    font-size: 22px;
  }
  .cat-intro .fsm-hero-txt h4 {
    font-size: 21px;
  }
  .cat-intro .fsm-adv-ico {
    left: -58px; width: 44px; height: 44px;
  }
}

@media (max-width: 560px) {
  .cat-intro .amsim-note {
    font-size: 14px; padding: 13px 16px; border-radius: 12px;
  }
  .cat-intro .amhero-txt h4 {
    font-size: 20px;
  }
  .cat-intro .amhero-txt p {
    font-size: 14.5px;
  }
  .cat-intro .fsm-hero-txt h4 {
    font-size: 19px;
  }
  .cat-intro .fsm-adv-ico {
    left: -52px; width: 40px; height: 40px;
  }
  .cat-intro .fsm-adv-h {
    font-size: 16.5px;
  }
}

/* ================= 第 60 批：任务要点列表圆点 =================
   原来每个 <li> 里放一个 <img class="amtask-ico">，6 个文件名指向同一张
   1200×1200 的图，按 16×16 显示。改为 CSS 背景图：位置、尺寸、外观不变，
   少 6 个图片请求，也去掉纯装饰的图片标签。 */
.prose .amtask li::before,
.cat-intro .amtask li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("/uploads/images/anymath/h116-05.webp") left top / contain no-repeat;
}
.cat-intro .amtask li { position: relative; padding-left: 24px; }