/* ============================================================
   xinxiang-guide.html · H1全幅图Banner + B4大图+浮动卡 +
   C2工业窗格 + B5阶梯错落 + 深色需求带 + F2问答卡
   ============================================================ */

/* ---------- 题头 H1 全幅图 Banner ---------- */
.xx-hero{
  position:relative;min-height:460px;
  padding-top:calc(var(--header-h) + 60px);
  padding-bottom:70px;overflow:hidden;background:var(--green-900);
}
.xx-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.xx-hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,33,24,.5),rgba(15,33,24,.85));
}
.xx-hero-inner{position:relative;z-index:2;max-width:760px}
.xx-hero h1{font-size:clamp(38px,5.5vw,60px);color:var(--cream-50);margin:16px 0 12px}
.xx-hero-inner > p{color:var(--cream-200);font-size:16.5px;line-height:1.9}
.xx-hero .crumb a{color:var(--brass-light)}

/* ---------- B4 大图+浮动信息卡 ---------- */
.xx-overview{background:var(--cream-50)}
.overview-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.overview-media{position:relative}
.overview-media img{width:100%;height:360px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.overview-float{
  position:absolute;right:-20px;bottom:-30px;max-width:280px;
  background:var(--brown-800);color:var(--cream-100);
  padding:20px 22px;border-left:4px solid var(--brass);
  box-shadow:var(--shadow-md);
}
.overview-float h4{color:var(--brass-light);font-size:15px;margin-bottom:6px}
.overview-float p{font-size:13px;line-height:1.7}
.overview-body h2{font-size:clamp(24px,3vw,34px);margin:6px 0 14px}
.overview-body p{color:var(--ink-soft);line-height:1.9;margin-bottom:12px}

/* ---------- C2 工业窗格区县 ---------- */
.xx-county{border-top:1px solid var(--line)}
.county-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.county-cell{
  display:block;background:var(--cream-50);border:1.5px solid var(--brown-700);
  padding:22px 20px;transition:all .25s ease;position:relative;
}
.county-cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brass);
}
.county-cell:hover{background:var(--brown-800);transform:translateY(-4px)}
.county-cell:hover h3{color:var(--brass-light)}
.county-cell:hover p{color:var(--cream-200)}
.county-cell h3{font-size:19px;color:var(--brown-800);margin-bottom:6px}
.county-cell p{font-size:13.5px;color:var(--muted)}
.county-note{margin-top:18px;font-size:13.5px;color:var(--muted)}
.county-note a{color:var(--green-700);text-decoration:underline}

/* ---------- B5 阶梯错落 ---------- */
.xx-industry{background:var(--cream-50)}
.industry-stair{display:grid;gap:40px}
.ind-item{
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--cream-100);padding:24px;border-radius:var(--r-md);
}
.ind-item:nth-child(2){margin-left:60px}
.ind-item img{width:100%;height:260px;object-fit:cover;border-radius:var(--r-sm)}
.ind-body h3{font-size:21px;margin-bottom:10px;color:var(--brown-800)}
.ind-body p{color:var(--ink-soft);line-height:1.9;font-size:14.5px}

/* ---------- 企业需求深色带 ---------- */
.xx-demand{
  background:
    repeating-linear-gradient(90deg,rgba(210,176,120,.05) 0 1px,transparent 1px 56px),
    var(--green-900);
}
.xx-demand .sec-head h2{color:var(--cream-50)}
.demand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.demand-cell{
  background:rgba(251,247,236,.05);border:1px solid var(--line-dark);
  padding:24px;border-top:3px solid var(--brass);
}
.demand-cell h3{color:var(--brass-light);font-size:18px;margin-bottom:8px}
.demand-cell p{color:var(--cream-200);font-size:14px;line-height:1.8}
.demand-cta{text-align:center}

/* ---------- F2 问答卡 ---------- */
.xx-faq{background:var(--cream-50)}
.faq2-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.faq2-card{
  background:var(--cream-100);border-left:4px solid var(--brass);
  padding:24px 22px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.faq2-card h3{font-size:17px;color:var(--brown-800);margin-bottom:8px}
.faq2-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- CTA ---------- */
.xx-cta{border-top:4px solid var(--brass);text-align:center}
.xx-cta-inner{padding:20px 0}
.xx-cta-inner h2{color:var(--cream-50);font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.xx-cta-inner p{color:var(--cream-200);margin-bottom:20px}
.xx-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .overview-wrap{grid-template-columns:1fr}
  .overview-float{position:static;max-width:none;margin-top:12px}
  .county-grid{grid-template-columns:1fr 1fr}
  .ind-item{grid-template-columns:1fr}
  .ind-item:nth-child(2){margin-left:0}
  .demand-grid,.faq2-grid{grid-template-columns:1fr}
}

/* ---------- 扩充：本地场景 ---------- */
.xx-scene{border-top:1px solid var(--line)}
.scene-list{max-width:880px}
.scene-row{
  display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:start;
  padding:18px 0;border-bottom:1px dashed var(--line);
}
.scene-tag{
  display:inline-block;text-align:center;padding:6px 0;
  background:var(--brass);color:var(--brown-900);
  font-size:13px;font-weight:600;
}
.scene-row p{color:var(--ink-soft);line-height:1.9;font-size:14.5px}

/* ---------- 扩充：相关服务 ---------- */
.xx-relate{background:var(--cream-50)}
.xx-relate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xx-relate-cell{
  display:block;background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:22px 20px;transition:all .25s ease;
}
.xx-relate-cell:hover{background:var(--brown-800);transform:translateY(-4px)}
.xx-relate-cell:hover h3{color:var(--brass-light)}
.xx-relate-cell:hover p{color:var(--cream-200)}
.xx-relate-cell h3{font-size:16px;color:var(--brown-800);margin-bottom:6px}
.xx-relate-cell p{font-size:13.5px;color:var(--muted);line-height:1.7}

@media (max-width:900px){
  .scene-row{grid-template-columns:1fr}
  .xx-relate-grid{grid-template-columns:1fr 1fr}
}

/* ---------- 扩充：说明段 ---------- */
.lc-note,.cl-note,.fy-note,.xx-note,.jz-note,.kt-note,.kd-note,.tx-note{background:var(--cream-50)}
.lc-note .narrow,.cl-note .narrow,.fy-note .narrow,.xx-note .narrow,.jz-note .narrow,.kt-note .narrow,.kd-note .narrow,.tx-note .narrow{max-width:820px}
.note-body p{color:var(--ink-soft);line-height:2;margin-bottom:14px;font-size:15.5px}