/* 及核官网 · jihe 独立版 v17.1 新增层
   ─────────────────────────────────────────────────────────
   1. 通屏 banner（.pbnr）——每个子页一张「财务既视感」动态图表
   2. 图表动效基元（.brow / .bcol / .bring / .bdot）——沿用 site.css 动效网关
   3. 平台对接墙（.pwall）——分组 logo 墙
   4. 案例分类筛选（.cfilter）
   设计基线延续首页：浅底 + 大留白 + 1px 细线 + 零 box-shadow + 12 阶字号。
   ───────────────────────────────────────────────────────── */

/* ═══════════ 1. 通屏 banner ═══════════ */
.pbnr{position:relative;overflow:hidden;padding:60px 0 64px;background:var(--bg2);border-bottom:1px solid var(--line)}
.pbnr__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line2) 1px,transparent 1px),
                   linear-gradient(180deg,var(--line2) 1px,transparent 1px);
  background-size:88px 46px}
.pbnr__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(880px 480px at 6% -18%,rgba(1,216,182,.15),transparent 64%)}
.pbnr__in{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr 1fr;gap:54px;align-items:center}
.pbnr__l{max-width:680px}
.pbnr__tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--f12);letter-spacing:1.4px;color:var(--brand-d);
  background:var(--brand-l);border-radius:999px;padding:6px 14px}
.pbnr__t{font-size:var(--f40);letter-spacing:.5px;margin-top:18px}
.pbnr__s{font-size:var(--f16);color:var(--t3);line-height:1.9;margin-top:16px;max-width:620px}
.pbnr__k{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pbnr__k span{font-size:var(--f12);color:var(--t2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.pbnr__r{max-width:588px;width:100%;margin-left:auto}

/* banner 数据卡（财务既视感：白底 + 细线 + 表格金额） */
.bcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 16px}
.bcard__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line2);margin-bottom:14px}
.bcard__hd h3{font-size:var(--f14);font-weight:500;color:var(--t1)}
.bcard__hd span{font-size:var(--f12);color:var(--t4)}
.bcard__svg{width:100%;height:auto;display:block}
.bcard__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:var(--f12);color:var(--t4);font-variant-numeric:tabular-nums}
.bcard__ft b{color:var(--brand-d);font-weight:600}

/* ═══════════ 2. 图表动效基元（与 site.css 同网关） ═══════════ */
.bfade{opacity:1;transition:opacity .5s ease var(--d,0s)}
html.anim .bfade{opacity:0}
html.anim .play .bfade{opacity:1}

.brow{transform-box:fill-box;transform-origin:left center;transition:transform .8s cubic-bezier(.22,.8,.3,1) var(--d,0s)}
html.anim .brow{transform:scaleX(0)}
html.anim .play .brow{transform:scaleX(1)}

.bcol{transform-box:fill-box;transform-origin:center bottom;transition:transform .85s cubic-bezier(.22,.8,.3,1) var(--d,0s)}
html.anim .bcol{transform:scaleY(0)}
html.anim .play .bcol{transform:scaleY(1)}

.bring{transition:stroke-dashoffset 1.05s cubic-bezier(.22,.8,.3,1) var(--d,.18s)}
html.anim .bring{stroke-dashoffset:100}
html.anim .play .bring{stroke-dashoffset:0}

.bdot{transform-box:fill-box;transform-origin:center;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1) var(--d,0s),opacity .4s ease var(--d,0s)}
html.anim .bdot{opacity:0;transform:scale(0)}
html.anim .play .bdot{opacity:1;transform:scale(1)}

.bpop{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.34,1.4,.5,1) var(--d,.5s),opacity .45s ease var(--d,.5s)}
html.anim .bpop{opacity:0;transform:scale(.72)}
html.anim .play .bpop{opacity:1;transform:scale(1)}

/* reduce：只去位移/缩放，保留淡入 */
html.reduce .brow,html.reduce .bcol,html.reduce .bdot,html.reduce .bpop{transform:none}
@media (prefers-reduced-motion:reduce){
  .brow,.bcol,.bring,.bdot,.bpop,.bfade{transition-duration:.22s}
}

/* 静态终值（?noanim= 截图验收 / 脚本异常兜底）—— 必须最后写 */
html.noanim .brow,html.noanim .bcol,html.noanim .bdot,html.noanim .bpop{transform:none!important}
html.noanim .bring{stroke-dashoffset:0!important}
html.noanim .bdot{opacity:1!important}
html.noanim .bpop{opacity:1!important}
html.noanim .bfade{opacity:1!important}

/* ═══════════ 3. 平台对接墙 ═══════════ */
.pwall{display:grid;gap:26px}
.pwall__g{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:22px 24px 24px}
.pwall__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:15px;border-bottom:1px solid var(--line2);margin-bottom:18px}
.pwall__h b{font-size:var(--f16);color:var(--t1);font-weight:500}
.pwall__h em{font-style:normal;font-size:var(--f22);color:var(--brand-d);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.pwall__h em i{font-style:normal;font-size:var(--f14);margin-left:1px}
.pwall__h span{font-size:var(--f12);color:var(--t4)}
.pwall__t{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.pwall__i{display:flex;align-items:center;justify-content:center;height:64px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);
  transition:border-color .2s,background-color .2s}
.pwall__i:hover{border-color:var(--brand);background:var(--brand-l2)}
.pwall__i svg{width:88%;height:auto;max-height:28px;display:block}
.pwall__ct{display:flex;align-items:center;gap:9px;padding:0 6px}
.pwall__ct i{flex:0 0 22px;height:22px;border-radius:5px;background:var(--brand-l);color:var(--brand-d);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;font-style:normal}
.pwall__ct span{font-size:var(--f12);color:var(--t3);line-height:1.5}

/* ═══════════ 4. 案例分类筛选 ═══════════ */
.cfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.cfilter button{height:40px;padding:0 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--t3);font-size:var(--f14);cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s}
.cfilter button:hover{border-color:var(--brand);color:var(--brand-d)}
.cfilter button.is-on{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.cfilter button i{font-style:normal;margin-left:6px;opacity:.7;font-variant-numeric:tabular-nums}
.cg__c[data-cat]{cursor:pointer}
.cg__c[hidden]{display:none}

/* ═══════════ 5. 通用补充区块 ═══════════ */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kpi2{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.kpi2__i{padding:22px 20px;border-right:1px solid var(--line)}
.kpi2__i:last-child{border-right:0}
.kpi2__n{font-size:var(--f30);color:var(--t1);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.kpi2__n i{font-style:normal;font-size:var(--f16);color:var(--brand-d);margin-left:2px}
.kpi2__l{font-size:var(--f12);color:var(--t4);margin-top:8px}
.dl2{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dl2__c{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--bg)}
.dl2__k{font-size:var(--f12);color:var(--brand-d);letter-spacing:.6px}
.dl2__c h4{font-size:var(--f16);margin:9px 0}
.dl2__c p{font-size:var(--f14);color:var(--t3);line-height:1.85}

/* 对比矩阵表：末列不做金额右对齐 */
table.tbl--mx th:last-child,table.tbl--mx td:last-child{text-align:left;font-variant-numeric:normal}
table.tbl--mx td{vertical-align:top;line-height:1.8;font-size:var(--f14)}
table.tbl--mx th,table.tbl--mx td{padding:16px 18px}

/* 5 步流程条 */
.steps--5{grid-template-columns:repeat(5,1fr)}
.steps--5 .steps__i:nth-child(5){border-right:0}

@media (max-width:1080px){
  .steps--5{grid-template-columns:repeat(3,1fr)}
  .steps--5 .steps__i:nth-child(3){border-right:0}
  .pbnr__in{grid-template-columns:1fr;gap:38px}
  .pbnr__r{max-width:640px;margin:0 auto}
  .pwall__t{grid-template-columns:repeat(4,1fr)}
  .kpi2,.dl2{grid-template-columns:repeat(2,1fr)}
  .kpi2__i:nth-child(2n){border-right:0}
  .g6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .pbnr{padding:38px 0 44px}
  .pbnr__t{font-size:var(--f28)}
  .pwall__t{grid-template-columns:repeat(2,1fr)}
  .kpi2,.dl2,.g2{grid-template-columns:1fr}
  .kpi2__i{border-right:0;border-bottom:1px solid var(--line)}
  .g6{grid-template-columns:repeat(2,1fr)}
}