/* ==========================================================================
   xiangcheng.html · 项城市属地服务页
   骨架：Hero → 双列对照（需求 vs 方案）→ 本地案例卡 → 流程 → 承诺 → 邻县 → CTA
   专属前缀 .pg-xc
   ========================================================================== */

/* ---------- Hero ---------- */
.pg-xc .xc-hero{ padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px)); }
.pg-xc .xc-hero-grid{ display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,50px);align-items:center; }
.pg-xc .xc-hero-txt h1{ font-size:clamp(30px,4.2vw,46px); }
.pg-xc .xc-hero-cta{ display:flex;flex-wrap:wrap;gap:14px;margin-top:26px; }
.pg-xc .xc-hero-img img{ width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);border:4px solid #fff;object-fit:cover; }

/* ---------- 双列对照表 ---------- */
.pg-xc .xc-table-wrap{ overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-md); }
.pg-xc .xc-table{
  width:100%;border-collapse:collapse;background:var(--surface);
  table-layout:fixed;min-width:680px;
}
.pg-xc .xc-table th,.pg-xc .xc-table td{
  padding:20px 22px;text-align:left;vertical-align:top;word-wrap:break-word;
  border-bottom:1px solid var(--line);
}
.pg-xc .xc-table thead th{
  background:var(--grad-brand);color:#fff;font-size:16px;
}
.pg-xc .xc-table .col-demand{ width:38%; }
.pg-xc .xc-table .col-arrow{ width:10%;text-align:center; }
.pg-xc .xc-table .col-solution{ width:52%; }
.pg-xc .xc-table tbody tr{ transition:background .3s; }
.pg-xc .xc-table tbody tr:hover{ background:var(--purple-mist); }
.pg-xc .xc-table td b{ display:block;font-size:15px;margin-bottom:4px; }
.pg-xc .xc-table td span{ font-size:13px;color:var(--ink-3); }
.pg-xc .xc-table .col-arrow svg{ width:26px;height:26px;color:var(--pink-deep); }

/* ---------- 本地案例卡 ---------- */
.pg-xc .xc-case-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.pg-xc .xc-case{ overflow:hidden;display:flex;flex-direction:column; }
.pg-xc .xc-case img{ width:100%;height:200px;object-fit:cover; }
.pg-xc .xc-case-body{ padding:22px;display:flex;flex-direction:column;gap:10px;flex:1; }
.pg-xc .xc-case-body h3{ font-size:18px; }
.pg-xc .xc-case-body p{ font-size:14px;color:var(--ink-3);flex:1; }
.pg-xc .xc-case-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--purple-deep);
}
.pg-xc .xc-case-link svg{ width:15px;height:15px;transition:transform .3s; }
.pg-xc .xc-case-link:hover svg{ transform:translateX(4px); }

/* ---------- 服务流程 ---------- */
.pg-xc .xc-flow-row{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.pg-xc .xc-flow-step{
  padding:26px 22px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center;
}
.pg-xc .xc-flow-step .n{
  display:inline-flex;width:44px;height:44px;border-radius:50%;
  align-items:center;justify-content:center;font-weight:800;color:#fff;
  background:var(--grad-purple);margin-bottom:14px;
}
.pg-xc .xc-flow-step h3{ font-size:17px;margin-bottom:8px; }
.pg-xc .xc-flow-step p{ font-size:13px;color:var(--ink-3); }

/* ---------- 服务承诺 ---------- */
.pg-xc .xc-promise-box{ padding:clamp(28px,4vw,44px);text-align:center; }
.pg-xc .xc-promise-box h2{ font-size:clamp(22px,3vw,32px);margin-bottom:16px; }
.pg-xc .xc-promise-box p{ max-width:760px;margin:0 auto 22px;color:var(--ink-2); }
.pg-xc .xc-promise-tags{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; }

/* ---------- 邻县互链 ---------- */
.pg-xc .xc-city-tags{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }
.pg-xc .xc-city-tags .tag{ font-size:14px;padding:9px 20px; }

/* ---------- CTA ---------- */
.pg-xc .xc-cta{ padding-block:var(--sec-pad); }
.pg-xc .xc-cta-inner{
  background:linear-gradient(135deg,#EDE6FC,#DDF1FD);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(30px,5vw,56px);text-align:center;
}
.pg-xc .xc-cta-inner h2{ font-size:clamp(24px,3.4vw,36px);margin-bottom:12px; }
.pg-xc .xc-cta-inner > p{ color:var(--ink-3);margin-bottom:24px; }
.pg-xc .xc-cta-btns{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:26px; }
.pg-xc .xc-cta-form{ max-width:680px;margin:0 auto;text-align:left; }

/* ---------- 数据条 ---------- */
.pg-xc .xc-stats{ background:var(--grad-brand);padding:clamp(34px,4vw,50px) 0; }
.pg-xc .xc-stats-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center; }
.pg-xc .xc-stat .num{ font-size:clamp(28px,3.6vw,42px);font-weight:800;color:#fff; }
.pg-xc .xc-stat .lbl{ font-size:14px;color:rgba(255,255,255,.92);margin-top:4px; }

/* ---------- 区块7：需求方案对照 ---------- */
.pg-xc .xc-map-grid{ display:grid;gap:16px;max-width:920px;margin:0 auto; }
.pg-xc .xc-map-row{ display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch; }
.pg-xc .xc-map-need,.pg-xc .xc-map-sol{ padding:20px 22px;border-radius:var(--r-lg); }
.pg-xc .xc-map-need{ background:#FFF1F7;border:1px solid var(--line); }
.pg-xc .xc-map-sol{ background:var(--purple-mist);border:1px solid var(--line); }
.pg-xc .xc-map-need h3,.pg-xc .xc-map-sol h3{ font-size:13px;letter-spacing:.05em;margin-bottom:8px;color:var(--ink-2); }
.pg-xc .xc-map-need p,.pg-xc .xc-map-sol p{ font-size:14px;color:var(--ink-3); }
.pg-xc .xc-map-arrow{ display:flex;align-items:center;font-size:22px;color:var(--purple);font-weight:700; }

/* ---------- 区块8：常见问题 ---------- */
.pg-xc .xc-faq-list{ display:grid;gap:14px;max-width:860px;margin:0 auto; }
.pg-xc .xc-faq-item{ padding:20px 24px; }
.pg-xc .xc-faq-item summary{
  cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pg-xc .xc-faq-item summary::-webkit-details-marker{ display:none; }
.pg-xc .xc-faq-item summary::after{
  content:"+";flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--pink-soft);color:var(--pink-deep);font-weight:700;transition:transform .3s;
}
.pg-xc .xc-faq-item[open] summary::after{ transform:rotate(45deg); }
.pg-xc .xc-faq-item p{ margin-top:12px;font-size:14px;color:var(--ink-3); }

/* ---------- 区块7：本地服务说明 ---------- */
.pg-xc .xc-note-wrap{ max-width:860px; }
.pg-xc .xc-note-wrap h2{ font-size:clamp(22px,3vw,30px);margin-bottom:16px; }
.pg-xc .xc-note-wrap p{ font-size:15px;color:var(--ink-3);line-height:1.9;margin-bottom:14px; }

/* ---------- 响应式：1024 ---------- */
@media (max-width:1024px){
  .pg-xc .xc-hero-grid{ grid-template-columns:1fr; }
  .pg-xc .xc-case-grid{ grid-template-columns:1fr; }
  .pg-xc .xc-flow-row{ grid-template-columns:1fr 1fr; }
}
/* ---------- 响应式：768 ---------- */
@media (max-width:768px){
  .pg-xc .xc-flow-row{ grid-template-columns:1fr; }
}
/* ---------- 响应式：480 ---------- */
@media (max-width:480px){
  .pg-xc .xc-hero-cta .btn{ width:100%; }
  .pg-xc .xc-cta-btns .btn{ width:100%; }
  .pg-xc .xc-map-row{ grid-template-columns:1fr; }
  .pg-xc .xc-map-arrow{ justify-content:center;transform:rotate(90deg); }
}

/* 自动生成：hero 光晕球变体（原 style= 迁移） */
.orb-a{width:200px;height:200px;background:#FFD6EA;top:16%;right:-50px}