/* ============================================================
   营销型长页面共享扩展样式  page-long.css
   ---------------------------------------------------------
   适用：案例详情页 / 产品详情页 / 解决方案页（共 34+ 个长页面）
   依赖：style.css（必须先加载）
   组件：
   01. KPI 多维指标网格（.kpi-grid）
   02. 实施前后对比双栏（.ba-compare）
   03. 典型场景卡（.scen-tile）
   04. 底部相关推荐卡（.rel-cards）
   05. 中段软性 CTA（.cta-quiet）
   06. FAQ 折手风琴外层（.faq-wrap）
   07. 规格表（.spec-table，从 page-products.css 迁入）
   08. 产品对比表（.compare-table，从 page-products.css 迁入）
   09. 响应式断点
   ============================================================ */

/* ============ 01. KPI 多维指标网格 ============ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}
.kpi-card{background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:26px 22px;text-align:center;box-shadow:0 10px 26px rgba(22,80,140,.05);transition:all var(--transition);position:relative;overflow:hidden}
.kpi-card::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(47,124,246,.08),transparent 70%)}
.kpi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.kpi-card .kpi-num{display:block;font-size:32px;font-weight:800;line-height:1.15;margin-bottom:8px;background:linear-gradient(135deg,var(--c-primary),var(--c-green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card:nth-child(even) .kpi-num{background:linear-gradient(135deg,var(--c-green-deep),var(--c-primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card .kpi-label{font-size:13.5px;color:var(--c-body);line-height:1.6}

/* ============ 02. 实施前后对比双栏 ============ */
.ba-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.ba-col{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:32px 28px;position:relative;overflow:hidden;transition:all var(--transition)}
.ba-col:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.ba-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.ba-col.is-before{background:linear-gradient(180deg,#fff,#fef4f2)}
.ba-col.is-before::before{background:#e26d5c}
.ba-col.is-after{background:linear-gradient(180deg,#fff,#f0fbf6)}
.ba-col.is-after::before{background:var(--c-green)}
.ba-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:1px;padding:7px 16px;border-radius:40px;margin-bottom:18px}
.ba-col.is-before .ba-badge{background:#fde6e1;color:#c1493b}
.ba-col.is-after .ba-badge{background:var(--c-green-soft);color:var(--c-green-deep)}
.ba-col h4{font-size:18px;margin-bottom:14px;color:var(--c-ink)}
.ba-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ba-col ul li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--c-body);line-height:1.8}
.ba-col ul li svg{flex:0 0 auto;width:18px;height:18px;margin-top:3px}
.ba-col.is-before ul li svg{color:#c1493b}
.ba-col.is-after ul li svg{color:var(--c-green)}

/* ============ 03. 典型场景卡 ============ */
.scen-tile{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:28px 24px;transition:all var(--transition);position:relative;overflow:hidden;height:100%}
.scen-tile::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--c-primary),var(--c-green));opacity:0;transition:opacity var(--transition)}
.scen-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.scen-tile:hover::before{opacity:1}
.scen-tile .scen-tile-num{font-size:32px;font-weight:800;line-height:1;color:var(--c-primary-soft);margin-bottom:14px;display:block}
.scen-tile h4{font-size:17px;margin-bottom:10px}
.scen-tile p{font-size:13.8px;color:var(--c-body);line-height:1.85}
.scen-tile .scen-tag{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;color:var(--c-primary);background:var(--c-primary-soft);padding:5px 14px;border-radius:30px;font-weight:600}

/* ============ 04. 底部相关推荐卡 ============ */
.rel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rel-card{background:#fff;border:1px solid var(--c-line);border-radius:18px;overflow:hidden;transition:all var(--transition);display:flex;flex-direction:column}
.rel-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.rel-card .rc-img{position:relative;height:180px;overflow:hidden}
.rel-card .rc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.rel-card:hover .rc-img img{transform:scale(1.06)}
.rel-card .rc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(21,42,63,.35))}
.rel-card .rc-tag{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.94);color:var(--c-primary);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px}
.rel-card .rc-body{padding:22px 22px 20px;flex:1;display:flex;flex-direction:column}
.rel-card .rc-body h4{font-size:17px;margin-bottom:10px;line-height:1.5}
.rel-card .rc-body p{font-size:13.5px;color:var(--c-body);line-height:1.85;flex:1}
.rel-card .rc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px dashed var(--c-line);font-size:13px;color:var(--c-muted)}
.rel-card .rc-meta a{color:var(--c-primary);font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:gap var(--transition)}
.rel-card .rc-meta a:hover{gap:9px}

/* ============ 05. 中段软性 CTA ============ */
.cta-quiet{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,var(--c-primary-mist),var(--c-green-mist));border:1px solid var(--c-line);border-radius:20px;padding:30px 36px;position:relative;overflow:hidden}
.cta-quiet::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(47,124,246,.08),transparent 70%)}
.cta-quiet > *{position:relative;z-index:2}
.cta-quiet .ctaq-copy h3{font-size:21px;margin-bottom:6px}
.cta-quiet .ctaq-copy p{font-size:14.5px;color:var(--c-body)}
.cta-quiet .ctaq-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ============ 06. FAQ 折手风琴外层 ============ */
.faq-wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-wrap .acc-item{margin-bottom:0}

/* ============ 07. 规格表（从 page-products.css 迁入） ============ */
.spec-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--c-line)}
.spec-table th,.spec-table td{padding:16px 20px;font-size:14px;text-align:left}
.spec-table thead th{background:linear-gradient(90deg,var(--c-primary),var(--c-green));color:#fff;font-weight:600}
.spec-table tbody tr:nth-child(even){background:var(--c-bg)}
.spec-table tbody th{color:var(--c-ink);font-weight:600;width:220px;background:#f2f7fc}
.spec-table tbody td{color:var(--c-body)}

/* ============ 08. 产品对比表（从 page-products.css 迁入） ============ */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:18px;overflow:hidden;border:1px solid var(--c-line);background:#fff}
.compare-table th,.compare-table td{padding:15px 18px;font-size:14px;text-align:center}
.compare-table thead th{background:var(--c-ink);color:#fff}
.compare-table thead th.hl{background:linear-gradient(90deg,var(--c-primary),var(--c-green))}
.compare-table tbody td.hl{background:var(--c-primary-mist);color:var(--c-primary-deep);font-weight:600}
.compare-table tbody tr:nth-child(even) td{background:var(--c-bg)}
.compare-table tbody tr:nth-child(even) td.hl{background:var(--c-primary-mist)}
.compare-table td.ok{color:var(--c-green)}
.compare-table td.no{color:#c93b3b}
.compare-table td.ok::before{content:"✓ ";font-weight:700}
.compare-table td.no::before{content:"✗ ";font-weight:700}
.table-wrap{overflow-x:auto;border-radius:18px;-webkit-overflow-scrolling:touch}

/* ============ 09. 响应式断点 ============ */
@media (max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:992px){
  .ba-compare{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .rel-cards{grid-template-columns:repeat(2,1fr)}
  .cta-quiet{flex-direction:column;align-items:flex-start;padding:26px 24px}
  .cta-quiet .ctaq-btns{width:100%}
  .cta-quiet .ctaq-btns .btn{flex:1}
}
@media (max-width:768px){
  .spec-table,.compare-table{display:block;overflow-x:auto;white-space:nowrap}
  .table-wrap{overflow-x:auto}
}
@media (max-width:680px){
  .kpi-grid,.rel-cards,.ba-compare{grid-template-columns:1fr}
  .scen-tile{padding:24px 20px}
}