/* =====================================================================
   商丘网站建设 · shangqiu.css
   布局：分栏主诉求(图文+浮动角标) / 三产业图卡横排 / 四坑卡2x2 / 深蓝服务半径带 / FAQ手风琴 / 城市互链
   ===================================================================== */

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

/* ---------- 主诉求分栏 ---------- */
.sq-why{background:var(--c-white)}
.sq-why-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.sq-why-media{position:relative}
.sq-why-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover}
.sq-why-media::after{content:"";position:absolute;inset:-18px 18px 18px -18px;border:2px solid var(--c-ice);border-radius:var(--radius-lg);z-index:-1}
.sq-why-tag{
  position:absolute;left:-24px;bottom:30px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  padding:18px 24px;border-left:5px solid var(--c-accent);
}
.sq-why-tag b{display:block;font-size:30px;font-weight:800;color:var(--c-primary);line-height:1.1}
.sq-why-tag span{font-size:13px;color:var(--c-muted)}
.sq-why-text h2{font-size:clamp(24px,2.8vw,34px);margin:0 0 18px;line-height:1.35}
.sq-why-text p{color:var(--c-text-2);margin-bottom:16px}
.sq-why-text .btn{margin-top:10px}

/* ---------- 产业方案三卡 ---------- */
.sq-industry{background:var(--c-ice-2)}
.sq-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sq-ind-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans);display:flex;flex-direction:column}
.sq-ind-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.sq-ind-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.sq-ind-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.sq-ind-body h3{font-size:19px;margin-bottom:10px}
.sq-ind-body p{color:var(--c-text-2);font-size:14.5px;flex:1}
.sq-ind-body a{margin-top:16px;font-weight:700;color:var(--c-accent);font-size:14.5px}
.sq-ind-body a:hover{letter-spacing:.5px}

/* ---------- 常踩四坑 ---------- */
.sq-pit{background:#fff}
.sq-pit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sq-pit-card{
  position:relative;background:var(--c-ice-2);border-radius:var(--radius-lg);padding:30px 30px 26px;
  border:1px solid var(--c-line);transition:all var(--trans);
}
.sq-pit-card:hover{border-color:var(--c-accent);background:#fff;box-shadow:var(--shadow)}
.sq-pit-no{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#EF4444,#F59E0B);border-radius:999px;padding:4px 14px;margin-bottom:14px;letter-spacing:1px}
.sq-pit-card h3{font-size:19px;margin-bottom:8px}
.sq-pit-card p{color:var(--c-text-2);font-size:14.5px}

/* ---------- 服务半径深蓝带 ---------- */
.sq-range{background:var(--c-dark);color:#D6E2F6;position:relative;overflow:hidden}
.sq-range::before{content:"";position:absolute;right:-140px;top:-140px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.4),transparent 70%)}
.sq-range-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.sq-range-text h2{color:#fff;font-size:clamp(24px,2.8vw,32px);margin-bottom:16px}
.sq-range-text p{color:#B9C9E8;margin-bottom:14px}
.sq-range-call{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.btn-line-light{border:2px solid rgba(255,255,255,.4);color:#fff;padding:13px 30px;border-radius:999px;font-weight:600;transition:all var(--trans)}
.btn-line-light:hover{background:#fff;color:var(--c-primary)}
.sq-range-list{display:grid;gap:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:30px 30px}
.sq-range-list li{display:flex;align-items:center;gap:12px;font-weight:600;color:#E6EEFB;font-size:15.5px}
.sq-range-list svg{width:20px;height:20px;fill:var(--c-accent-2);flex-shrink:0}

/* ---------- FAQ ---------- */
.faq-sec{background:#fff}
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--c-ice-2);border:1px solid var(--c-line);border-radius:14px;overflow:hidden;transition:all var(--trans)}
.faq-item[open]{background:#fff;box-shadow:var(--shadow);border-color:var(--c-accent)}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 24px;font-weight:700;color:var(--c-primary);font-size:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--c-accent);transition:transform var(--trans);flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 24px 20px;color:var(--c-text-2);font-size:14.5px}
.faq-item p a{color:var(--c-accent);font-weight:600}

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

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .sq-why-wrap,.sq-range-inner{grid-template-columns:1fr;gap:40px}
  .sq-ind-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .sq-ind-grid,.sq-pit-grid{grid-template-columns:1fr}
  .sq-why-tag{left:12px;bottom:12px;padding:12px 18px}
  .sq-why-tag b{font-size:22px}
}