/* =====================================================================
   新乡网站建设 · xinxiang.css （T3 布局模板）
   布局：居中引入+四项数据条 / 产业编号列表行(左缩略图) / 深色2x2坑带 /
        竖版时间轴沟通流程 / 编号式问答 / chips城市互链
   ===================================================================== */

/* ---------- 横幅 ---------- */
.banner-city{background-image:url('../images/banner-city.jpg')}

/* ---------- 主诉求：居中引入 + 数据 ---------- */
.xx-intro{background:#fff}
.xx-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1000px;margin:10px auto 0;
  background:var(--c-grad);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
}
.xx-stat{padding:34px 20px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.15)}
.xx-stat:last-child{border-right:none}
.xx-stat b{display:block;font-size:32px;font-weight:800;line-height:1.1}
.xx-stat span{font-size:13px;color:#D6E2F6;margin-top:6px;display:block}

/* ---------- 产业：编号列表行 ---------- */
.xx-industry{background:var(--c-ice-2)}
.xx-ind-list{display:grid;gap:22px}
.xx-ind-row{
  display:grid;grid-template-columns:70px 260px 1fr;gap:28px;align-items:center;
  background:#fff;border-radius:var(--radius-lg);padding:26px 30px;box-shadow:var(--shadow);
  transition:all var(--trans);
}
.xx-ind-row:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.xx-ind-num{
  font-size:34px;font-weight:800;color:var(--c-ice);line-height:1;
  -webkit-text-stroke:1.5px var(--c-accent);text-align:center;
}
.xx-ind-row img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%}
.xx-ind-body h3{font-size:19px;margin-bottom:8px}
.xx-ind-body p{color:var(--c-text-2);font-size:14.5px;margin-bottom:8px}
.xx-ind-body a{font-weight:700;color:var(--c-accent);font-size:14.5px}

/* ---------- 坑：深色2x2带 ---------- */
.xx-pit{background:var(--c-dark);color:#D6E2F6;position:relative;overflow:hidden}
.xx-pit::before{content:"";position:absolute;left:-100px;top:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%)}
.xx-pit-head{position:relative;z-index:2}
.xx-pit-eyebrow{background:rgba(255,255,255,.12);color:#AFC6EC}
.xx-pit-head h2{color:#fff}
.xx-pit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:2}
.xx-pit-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:28px 30px;transition:all var(--trans);
}
.xx-pit-card:hover{background:rgba(37,99,235,.25);transform:translateY(-4px)}
.xx-pit-card h3{color:#fff;font-size:18px;margin-bottom:8px}
.xx-pit-card p{color:#B9C9E8;font-size:14.5px}

/* ---------- 沟通流程：竖版时间轴 ---------- */
.xx-flow{background:#fff}
.xx-timeline{max-width:720px;margin:0 auto;position:relative;padding-left:0}
.xx-timeline::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:2px;background:var(--c-line)}
.xx-tl-item{position:relative;padding-left:46px;margin-bottom:26px}
.xx-tl-item:last-child{margin-bottom:0}
.xx-tl-dot{
  position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;
  background:#fff;border:5px solid var(--c-accent);box-shadow:0 0 0 4px var(--c-ice);
}
.xx-tl-card{background:var(--c-ice-2);border-radius:14px;padding:22px 26px;border:1px solid var(--c-line)}
.xx-tl-step{font-size:12.5px;font-weight:800;letter-spacing:1.5px;color:var(--c-accent)}
.xx-tl-card h3{font-size:17px;margin:6px 0 6px}
.xx-tl-card p{color:var(--c-text-2);font-size:14.5px}
.xx-tl-card a{color:var(--c-accent);font-weight:600}

/* ---------- FAQ：编号式问答 ---------- */
.xx-faq{background:var(--c-ice-2)}
.xx-faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px}
.xx-faq-item{
  display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:start;
  background:#fff;border-radius:14px;padding:24px 28px;box-shadow:var(--shadow);
  border-left:4px solid var(--c-accent);
}
.xx-faq-item b{font-size:15px;font-weight:800;color:var(--c-accent);padding-top:2px}
.xx-faq-item h3{font-size:16.5px;margin-bottom:6px}
.xx-faq-item p{color:var(--c-text-2);font-size:14.5px}
.xx-faq-item p a{color:var(--c-accent);font-weight:600}

/* ---------- 城市互链：chips ---------- */
.xx-cities{background:#fff;padding-top:70px;padding-bottom:70px}
.xx-city-chips{display:flex;flex-wrap:wrap;gap:14px}
.xx-city-chips a{
  background:var(--c-ice);color:var(--c-primary);border-radius:999px;padding:11px 24px;
  font-weight:600;font-size:14.5px;transition:all var(--trans);
}
.xx-city-chips a:hover{background:var(--c-grad);color:#fff;transform:translateY(-3px);box-shadow:0 8px 18px rgba(37,99,235,.28)}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .xx-stats{grid-template-columns:1fr 1fr}
  .xx-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.15)}
  .xx-ind-row{grid-template-columns:1fr;gap:16px}
  .xx-ind-num{text-align:left}
  .xx-pit-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .xx-stats{grid-template-columns:1fr}
  .xx-faq-item{grid-template-columns:1fr;gap:8px}
}