/* ============================================================
   B2B 定制独立站（service-b2b.html）专属增强样式
   原则：沿用 service.css 的设计语言（真实照片优先 / 深浅节奏交替 /
        发丝线分隔 / 降噪阴影），仅补足该页"banner 以下"的配图与层次。
   约定：类名统一 b2b- 前缀，避免与全局 style.css / service.css 冲突。
   ============================================================ */

/* ---------- 全幅影像带（沿用 sv-photo，仅换底图与压暗层次） ---------- */
.sv-photo.ph-b2b::before{background-image:url("../imgs/real/c3.jpg")}
/* 底图机械细节较密：左侧加深压暗，保证标题与数据可读 */
.sv-photo.ph-b2b::after{background:
  linear-gradient(100deg,rgba(7,15,38,.96) 0%,rgba(7,15,38,.92) 30%,rgba(7,15,38,.72) 58%,rgba(7,15,38,.4) 100%),
  linear-gradient(180deg,rgba(7,15,38,.28),rgba(7,15,38,.5))}
.sv-photo.ph-b2b h2 em{color:#9dc0ff}
.sv-photo.ph-b2b .kick{color:#a8c6ff;letter-spacing:.14em;font-weight:800;font-size:13px}
.sv-photo.ph-b2b .ps b{font-variant-numeric:tabular-nums}

/* ---------- 六大定制能力：左实拍图 + 右能力清单 ---------- */
.b2b-cap{display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center}
.b2b-cap-img{position:relative;margin:0;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 66px -26px rgba(23,43,99,.4),0 0 0 1px rgba(23,43,99,.05)}
.b2b-cap-img img{display:block;width:100%;height:428px;object-fit:cover}
.b2b-cap-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,18,44,.82),rgba(9,18,44,0) 58%)}
.b2b-cap-img figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#fff}
.b2b-cap-img figcaption b{display:block;font-size:19px;font-weight:800;letter-spacing:.01em}
.b2b-cap-img figcaption span{display:block;margin-top:4px;font-size:13px;color:#c5d4ef}

.b2b-cap-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.b2b-cap-list li{position:relative;display:grid;grid-template-columns:46px 1fr auto;gap:16px;align-items:center;
  background:#fff;border:1px solid #e9edf4;border-radius:16px;padding:16px 20px;
  box-shadow:0 8px 24px -20px rgba(23,43,99,.16);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.b2b-cap-list li:hover{transform:translateX(6px);
  box-shadow:0 20px 40px -20px rgba(23,43,99,.26);border-color:color-mix(in srgb,var(--sv-acc) 26%,#fff)}
.b2b-cap-list li>i{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--sv-acc);
  background:color-mix(in srgb,var(--sv-acc) 7%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sv-acc) 16%,#fff)}
.b2b-cap-list li>i svg{width:21px;height:21px}
.b2b-cap-list h4{margin:0 0 4px;font-size:16.5px;font-weight:800;color:var(--sv-ink);letter-spacing:.01em}
.b2b-cap-list p{margin:0;font-size:13.5px;line-height:1.6;color:var(--sv-mut)}
.b2b-cap-list li>b{align-self:center;font-size:13px;font-weight:800;color:#c3d0e6;letter-spacing:.08em}

/* ---------- 定制三线并行：每个面板配一张实拍图 ---------- */
.b2b-tabs .sv-panel.on{grid-template-columns:1.06fr .94fr;gap:20px}
.b2b-tabs .sv-panel.on .b2b-tab-img{grid-row:1 / span 2;position:relative;margin:0;border-radius:18px;overflow:hidden;
  min-height:272px;background:#eef2f9;box-shadow:0 22px 50px -26px rgba(23,43,99,.42)}
.b2b-tabs .sv-panel.on .b2b-tab-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b2b-tabs .sv-panel.on .b2b-tab-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,18,44,.88),rgba(9,18,44,0) 62%)}
.b2b-tabs .sv-panel.on .b2b-tab-img figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;color:#fff}
.b2b-tabs .sv-panel.on .b2b-tab-img figcaption b{display:block;font-size:16.5px;font-weight:800;letter-spacing:.01em}
.b2b-tabs .sv-panel.on .b2b-tab-img figcaption span{display:block;margin-top:3px;font-size:13px;color:#c8d6f0}

/* ---------- 四步交付：纵向时间轴 + 竖幅实拍 ---------- */
.b2b-flow{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.b2b-flow-list{margin:0;padding:0;list-style:none}
.b2b-flow-list li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;padding-bottom:28px}
.b2b-flow-list li::after{content:"";position:absolute;left:27px;top:56px;bottom:2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sv-acc) 55%,#fff),#e3ebf8)}
.b2b-flow-list li:last-child{padding-bottom:0}
.b2b-flow-list li:last-child::after{display:none}
.b2b-flow-list li>b{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-size:19px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--sv-acc),var(--sv-acc2));
  box-shadow:0 14px 28px -14px color-mix(in srgb,var(--sv-acc) 72%,transparent)}
.b2b-flow-list h4{margin:7px 0 6px;font-size:17px;font-weight:800;color:var(--sv-ink);letter-spacing:.01em}
.b2b-flow-list p{margin:0;font-size:14px;line-height:1.7;color:var(--sv-mut)}
.b2b-flow-img{position:relative;margin:0;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 66px -26px rgba(23,43,99,.4)}
.b2b-flow-img img{display:block;width:100%;height:452px;object-fit:cover}
.b2b-flow-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,18,44,.8),rgba(9,18,44,0) 56%)}
.b2b-flow-img figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#fff}
.b2b-flow-img figcaption b{display:block;font-size:18px;font-weight:800;letter-spacing:.01em}
.b2b-flow-img figcaption span{display:block;margin-top:4px;font-size:13px;color:#c5d4ef}

/* ---------- 响应式 ---------- */
@media(max-width:1020px){
  .b2b-cap,.b2b-flow{grid-template-columns:1fr;gap:32px}
  .b2b-cap-img img{height:320px}
  .b2b-flow-img img{height:340px}
  .b2b-tabs .sv-panel.on{grid-template-columns:1fr}
  .b2b-tabs .sv-panel.on .b2b-tab-img{grid-row:auto;min-height:224px}
}
@media(max-width:640px){
  .b2b-cap-img img{height:236px}
  .b2b-flow-img img{height:264px}
  .b2b-cap-list li{grid-template-columns:42px 1fr;gap:13px;padding:14px 16px}
  .b2b-cap-list li>b{display:none}
  .b2b-cap-list li>i{width:42px;height:42px;border-radius:11px}
  .b2b-flow-list li{grid-template-columns:48px 1fr;gap:14px;padding-bottom:24px}
  .b2b-flow-list li>b{width:48px;height:48px;font-size:17px;border-radius:14px}
  .b2b-flow-list li::after{left:23px;top:46px}
}