/* cyber.css — 仅 Cyber 系页（body.cyber / body.cyber.prod-grid）专属规则 */

html[data-lang="en"] .cyber .mn .hb{padding:0 16px}

html[data-lang="en"] .cyber .mn .hb .hl{font-size:11px;font-weight:700;line-height:1.25;letter-spacing:0;margin:0}

html[data-lang="en"] .cyber .mn .hb .hn{font-size:16px;line-height:1.05;margin:3px 0}

html[data-lang="en"] .cyber .mn .hb .hd{font-size:9px;line-height:1.3;margin:0}

/* ===== 步骤卡/核心能力/价值卡英文适配（#0083 续）：EN 模式收紧字号/行高 =====
   仅 html[data-lang="en"] 生效。步骤卡(.adv)标题栏与正文、核心能力(.feat)要点、
   技术优势(.adv)卡片在英文下更长，需压缩以避免撑开换行导致高度不齐。 */
html[data-lang="en"] .cyber .adv .head{font-size:13px;line-height:1.3}

html[data-lang="en"] .cyber .adv .head .no{width:20px;height:20px;font-size:11px}

html[data-lang="en"] .cyber .adv .d{font-size:12px;line-height:1.55;padding:10px 12px}

html[data-lang="en"] .cyber .adv .d b{font-size:11px;margin-bottom:4px}

html[data-lang="en"] .cyber .feat .f ul li{font-size:12.5px;line-height:1.55}

/* EN 切换时覆盖 .cyber EN 规则对卡内布局的影响（保持本形态不变） */
html[data-lang="en"] .cyber.prod-grid .mn .hb{padding:0}

html[data-lang="en"] .cyber.prod-grid .mn .hb .hl{font-size:16.5px;line-height:1.35;margin:0;padding:15px 14px 0}

html[data-lang="en"] .cyber.prod-grid .mn .hb .hn{font-size:22px;line-height:1.15;margin:5px 0 13px;padding:0 14px}

html[data-lang="en"] .cyber.prod-grid .mn .hb .hd{font-size:12px;line-height:1.65;margin:0}

/* ===== 子页 subhero 幽灵按钮可读性修复（#0094）=====
   病根：.hero-acts .btn-ghost 是为「深色 Hero」设计的白字+透明底（见第 57 行），
   但 .subhero 背景是浅灰 var(--bg2)，白字落浅底对比度仅 1.06:1 ≈ 完全不可见。
   修法：在 subhero 作用域内还原为白底蓝字（对比度 4.79:1，达 WCAG 2.2 AA）。
   作用域仅 .subhero，深色 CTA（.cta）与深色 Hero 的白字幽灵按钮不受影响。
   本条为全局修复，一次性覆盖全部产品子页（此前仅 CyberAIDD 用 .cyber 作用域单独修过）。 */
.subhero .hero-acts .btn-ghost{background:#fff;color:var(--blue);border-color:var(--blue)}

.cyber .qa{position:relative;max-width:840px;margin:26px auto 0}

.cyber .qa::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:var(--line);margin-left:-1px}

.cyber .ti{position:relative;width:50%;box-sizing:border-box;padding-bottom:22px;min-width:0;overflow:hidden}

.cyber .ti:last-child{padding-bottom:0}

.cyber .ti.left{left:0;padding-right:32px}

.cyber .ti.right{left:50%;padding-left:32px}

.cyber .ti .node{position:absolute;top:11px;width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--blue);z-index:2}

.cyber .ti.left .node{right:-8px}

.cyber .ti.right .node{left:-8px}

.cyber .qab{border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px 16px;transition:.18s}

.cyber .qab:hover{box-shadow:0 6px 16px rgba(1,118,195,.12)}

.cyber .qab .qt{display:flex;gap:10px;align-items:flex-start}

.cyber .qab .qno{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:var(--blue);color:#fff;font-size:12px;font-weight:800}

.cyber .qab .qx{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.5;margin:0}

.cyber .qab .qa2{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:1px dashed #eef1f5}

.cyber .qab .ano{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:rgba(1,118,195,.10);color:var(--blue);font-size:12px;font-weight:800}

.cyber .qab .ax{font-size:13px;color:var(--sub);line-height:1.8;margin:0}

.cyber .subhero .hero-acts .btn-ghost{background:#fff;color:var(--blue);border-color:var(--blue)}

.cyber .subhero .hero-acts .btn-ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

.cyber .cta .hero-acts .btn-ghost{color:#fff;border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.10)}

.cyber .cta .hero-acts .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

.cyber .subhero{text-align:center}

.cyber .subhero .pos{margin-left:auto;margin-right:auto}

.cyber .subhero .hero-acts{justify-content:center}

.cyber .block h2{text-align:center}

.cyber .block .lede{text-align:center;margin-left:auto;margin-right:auto}

.cyber .mol{position:relative;width:920px;height:500px;margin:24px auto 8px}

.cyber .mol-bonds{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}

.cyber .mol-bonds line{stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;opacity:.5}

.cyber .mn{position:absolute;width:165px;height:190px;margin:-95px 0 0 -82.5px;z-index:1}

.cyber .mn .hx{position:absolute;inset:0;background:transparent;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:background .18s}

.cyber .mn .hx::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:inset .18s}

.cyber .mn:hover .hx{background:var(--blue-d)}
.cyber .mn:hover .hx::before{inset:2px}
/* #124 蜂窝边线统一：7 个六边形的边由本层一次性绘制，共享边去重只画一次 → 拼接处不再加倍。
   背景：原实现每个 .hx 各自 inset:2px 内缩画 2px 蓝边，相邻时两条 2px 并肩 → 拼接处 4px。
   ⚠️ 边线务必画在 .mn 之上（z-index:4 > .mn 的 1），才不会被六边形白底盖住内半边。 */
.cyber .mol-grid{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.cyber .mol-grid path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cyber.prod-grid .mol-grid{display:none}

.cyber .mn .hb{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22px}

.cyber .mn .hb .hl{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.5px;line-height:1.4}

.cyber .mn .hb .hn{font-size:19px;font-weight:800;color:var(--blue);line-height:1.15;margin:6px 0 5px;letter-spacing:-.5px}

.cyber .mn .hb .hd{font-size:10px;color:var(--sub);line-height:1.5}

.cyber .mn.n1{left:213px;top:179px}

.cyber .mn.n2{left:378px;top:179px}

.cyber .mn.n3{left:543px;top:179px}

.cyber .mn.n4{left:708px;top:179px}

.cyber .mn.n5{left:295.5px;top:321.5px}

.cyber .mn.n6{left:460.5px;top:321.5px}

.cyber .mn.n7{left:625.5px;top:321.5px}

/* ===== 非 CyberAIDD 产品子页（body.cyber.prod-grid）：编号矩形数据卡（#019，参照用户截图）=====
   形态：3列自适应网格 / 白底圆角卡 / 左上蓝色序号+标签+数值 / 底部描述色块（奇数蓝底白字、偶数浅灰底，nth-child 交错）。 */
.cyber.prod-grid .mol{position:static;width:auto;height:auto;margin:24px auto 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;justify-items:center}

.cyber.prod-grid .mol-bonds{display:none}

.cyber.prod-grid .mn{position:relative;left:auto!important;top:auto!important;width:100%;max-width:300px;height:auto;aspect-ratio:auto;margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}

.cyber.prod-grid .mn .hx{display:none}

.cyber.prod-grid .mn .hb{position:static;inset:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:center;padding:0;flex:1}

.cyber.prod-grid .mn .hb .hl{padding:15px 14px 0;font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:0;line-height:1.35;text-align:center}

.cyber.prod-grid .mn .hb .hn{font-size:22px;font-weight:800;color:var(--blue);line-height:1.15;margin:5px 0 13px;padding:0 14px;text-align:center;letter-spacing:-.5px}

.cyber.prod-grid .mn .hb .hd{flex:1;padding:11px 14px;font-size:12px;line-height:1.65;text-align:center;letter-spacing:0}

.cyber.prod-grid .mn:nth-child(odd) .hd{background:var(--blue);color:#fff}

.cyber.prod-grid .mn:nth-child(even) .hd{background:#EEF2F6;color:#555}

/* 技术优势与价值：折角色块卡（#029，参照用户截图+与核心数据指标同色系：奇数位蓝/偶数位浅灰交替，3列×2行） */
.cyber.prod-grid .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 16px;justify-items:center;margin-top:20px;counter-reset:vc}

.cyber.prod-grid .vcard{position:relative;width:100%;max-width:400px;display:flex;gap:12px;align-items:center;padding:16px 20px 16px 14px;background:var(--g1);counter-increment:vc}

.cyber.prod-grid .vcard::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 20px 20px 0;border-color:transparent var(--fold) transparent transparent}

.cyber.prod-grid .vcard .vb{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}

.cyber.prod-grid .vcard .vb::before{content:counter(vc);color:var(--num)}

.cyber.prod-grid .vcard .vinfo{flex:1;min-width:0}

.cyber.prod-grid .vcard .vt{font-size:14px;font-weight:700;color:#fff;line-height:1.4;text-align:left;margin-bottom:4px}

.cyber.prod-grid .vcard .vd{font-size:12px;line-height:1.65;color:rgba(255,255,255,.92);text-align:left}

/* 偶数位（灰底）：深色字与深色徽章数字 */
.cyber.prod-grid .vcard:nth-child(even) .vt{color:#333}

.cyber.prod-grid .vcard:nth-child(even) .vd{color:#555}

/* 配色：与核心数据指标同色系——奇数位 #0176c3 蓝，偶数位 #EEF2F6 浅灰；折角取同色系深色 */
.cyber.prod-grid .vcard:nth-child(odd){--g1:#0176c3;--fold:#0266a8;--num:#0176c3}

.cyber.prod-grid .vcard:nth-child(even){--g1:#EEF2F6;--fold:#B8C2CC;--num:#0266a8}

@media(max-width:640px){
  .cyber .qa::before{left:8px;margin-left:0}
  .cyber .ti{width:100%;left:0 !important;padding:0 0 18px 30px}
  .cyber .ti.left{padding-right:0}
  .cyber .ti.left .node,.cyber .ti.right .node{left:1px;right:auto}
}

@media(max-width:980px){.cyber.prod-grid .mol{grid-template-columns:repeat(3,1fr)}.cyber.prod-grid .vgrid{grid-template-columns:repeat(3,1fr)}}

@media(max-width:640px){.cyber.prod-grid .mol{grid-template-columns:repeat(2,1fr);gap:12px}.cyber.prod-grid .vgrid{grid-template-columns:1fr;gap:12px}}

@media(max-width:640px){
  .cyber .mol{grid-template-columns:repeat(2,1fr);gap:12px}
  .cyber .mn .hb{padding:0 12px}
  .cyber .mn .hb .hl{font-size:11.5px}
  .cyber .mn .hb .hn{font-size:17px}
  .cyber .mn .hb .hd{font-size:9.5px}
}

/* CyberAIDD（plain-cyber）分子结构 hero 为固定 920px 绝对定位画布，375px 会横向溢出。
   仅在 plain-cyber 页隐藏（用 :not(.prod-grid) 隔离，避免误伤已响应式的 prod-grid 兄弟页数据卡网格）。 */
@media(max-width:640px){
  .cyber:not(.prod-grid) .mol{display:none}
}


/* #046 数据项 ≤4 的 prod-grid 页（PatentPro / TrialPro）：auto-fit+1fr 会算出超大列，
   卡片被 justify-items:center 推到两端、中间出现大空档。收紧为固定 300px 轨 + 整体居中。
   仅 .mol-tight 生效，DevicePro(5)/InvestPro(6) 走原 1fr 逻辑，视觉零变化。 */
.cyber.prod-grid .mol.mol-tight{grid-template-columns:repeat(auto-fit,300px);justify-content:center;justify-items:stretch}
@media(max-width:980px){
  .cyber.prod-grid .mol.mol-tight{grid-template-columns:repeat(auto-fit,300px)}
}
@media(max-width:640px){
  .cyber.prod-grid .mol.mol-tight{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));justify-content:stretch}
}
/* ============================================================
   #124b/#125 641~980 档：蜂窝由「绝对定位图形」切为「网格卡片」
   背景：#124 给边线新增了 .mol-grid（按 920×500 固定几何绘制的绝对定位层）。
   本档若沿用该几何，会与 grid 排布的实际卡片位置错开 → 故本档关闭 SVG 层，
   改由 .hx 自绘边线（本档卡片之间不再贴合，不存在 #124 的边线加倍问题）。
   ⚠️ 必须写在 cyber.css 末尾：common.css 里的同名 ≤980 规则特异性相同但先加载，
      会被本文件（后加载）的常态规则覆盖，只能在此覆盖回来。
   ⚠️ 下限取 641px：≤640 由既有规则整体隐藏 .mol
      （.cyber:not(.prod-grid) .mol{display:none}），此处不得越过，否则改变既有行为。
   ⚠️ max-width:560px / 3 列 → 每格约 177px（≈桌面版 165px），卡内字号无需调整。
   ⚠️ 用 flex+wrap 而非 grid：7 张卡按 3 列排为 3+3+1，grid 会让末行孤卡左对齐；
      flex 的 justify-content:center 使末行自动居中（与牌墙「不留孤卡」的一贯口径一致），
      且卡数变化时无需改代码。
   ============================================================ */
@media(min-width:641px) and (max-width:980px){
  .cyber:not(.prod-grid) .mol{
    position:static;width:auto;height:auto;max-width:560px;margin:24px auto 10px;
    display:flex;flex-wrap:wrap;justify-content:center;gap:16px
  }
  .cyber:not(.prod-grid) .mol-bonds,
  .cyber:not(.prod-grid) .mol-grid{display:none}
  .cyber:not(.prod-grid) .mn{
    position:relative;left:auto !important;top:auto !important;
    width:calc((100% - 32px)/3);height:auto;aspect-ratio:165/190;margin:0
  }
  .cyber:not(.prod-grid) .mn .hx{background:var(--blue)}
  .cyber:not(.prod-grid) .mn .hx::before{inset:2px}
  .cyber:not(.prod-grid) .mn .hb{padding:0 18px}
}