/* ============================================================
   小程序开发 xcx.css
   布局特征：左右交错图文场景 + 斑马纹对比表 + 深色圆形步骤带 +
   图右文左案例引导
   ============================================================ */
.banner-value{background-image:url('../images/banner-value.jpg');background-size:cover;background-position:center}

/* ---------- 场景：交错图文 ---------- */
.xcx-scene{background:var(--c-ice-2)}
.xcx-scene-row{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  margin-bottom:56px;
}
.xcx-scene-row:last-child{margin-bottom:0}
.xcx-scene-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.xcx-flip .xcx-scene-media{order:2}
.xcx-flip .xcx-scene-text{order:1}
.xcx-scene-text h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:14px}
.xcx-scene-text p{color:var(--c-text-2);margin-bottom:12px;font-size:15px}

/* ---------- 对比表：斑马纹 ---------- */
.xcx-vs{background:var(--c-white)}
.xcx-vs-table{
  max-width:880px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--c-line);
}
.xcx-vs-row{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;align-items:center}
.xcx-vs-row>div{padding:18px 26px;font-size:14.5px}
.xcx-vs-row:nth-child(even){background:var(--c-ice-2)}
.xcx-vs-row>div:first-child{font-weight:700;color:var(--c-text);background:#fff}
.xcx-vs-row:nth-child(even)>div:first-child{background:var(--c-ice-2)}
.xcx-vs-row .hot{font-weight:700;color:var(--c-accent)}
.xcx-vs-head{background:var(--c-dark)}
.xcx-vs-head>div{color:#fff;font-weight:700;font-size:16px;padding-top:24px;padding-bottom:24px}
.xcx-vs-head>div:first-child{background:var(--c-dark);color:#AFC6EC;font-weight:500}

/* ---------- 圆形步骤（深色带） ---------- */
.xcx-flow{background:var(--c-dark);background-image:radial-gradient(circle at 50% 0%,rgba(37,99,235,.25),transparent 55%)}
.xcx-flow .sec-head h2{color:#fff}
.xcx-flow .sec-head p{color:#AFC6EC}
.xcx-flow-circle{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:960px;margin:0 auto;text-align:center}
.xcx-circle{
  width:74px;height:74px;border-radius:50%;background:var(--c-grad);color:#fff;
  font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;box-shadow:0 0 0 8px rgba(37,99,235,.18);
}
.xcx-flow-item h3{color:#fff;font-size:16.5px;margin-bottom:8px}
.xcx-flow-item p{font-size:13.5px;color:#AFC6EC;margin:0}

/* ---------- 案例引导：图左文右 ---------- */
.xcx-case{background:var(--c-ice-2)}
.xcx-case-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.xcx-case-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.xcx-case-text h2{font-size:clamp(22px,2.6vw,32px);margin:12px 0 16px}
.xcx-case-text p{color:var(--c-text-2);margin-bottom:22px;font-size:15px}
.xcx-case-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .xcx-scene-row{grid-template-columns:1fr;gap:28px;margin-bottom:44px}
  .xcx-flip .xcx-scene-media{order:0}
  .xcx-flip .xcx-scene-text{order:0}
  .xcx-flow-circle{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .xcx-case-wrap{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .xcx-flow-circle{grid-template-columns:1fr}
  .xcx-vs-row>div{padding:14px 14px;font-size:13px}
}