/* ============================================================
   huanbao.css · 环保节能行业网站建设
   视觉语言：居中对称 + 圆环图标 + 深色 FAQ 通栏
   点缀色：翠绿 #059669
   ============================================================ */

.banner-huanbao{background-image:url('../images/banner-value.jpg')}

/* ---------- 圆环图标痛点 ---------- */
.hb-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1020px;margin:0 auto;text-align:center}
.hb-ring h3{font-size:18.5px;margin:20px 0 10px}
.hb-ring p{color:var(--c-text-2);font-size:14.5px;line-height:1.75}
.hb-ring-circle{
  width:104px;height:104px;margin:0 auto;border-radius:50%;
  background:linear-gradient(#ECFDF5,#D1FAE5);border:2px solid #A7F3D0;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:all var(--trans);
}
.hb-ring-circle::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px dashed #6EE7B7;opacity:.6;transition:transform var(--trans);
}
.hb-ring:hover .hb-ring-circle{transform:translateY(-6px);box-shadow:0 16px 34px rgba(5,150,105,.18)}
.hb-ring:hover .hb-ring-circle::after{transform:rotate(45deg)}
.hb-ring-circle svg{width:44px;height:44px;fill:#059669}

/* ---------- 怎么做：左右图文 ---------- */
.hb-howsec{background:var(--c-ice-2)}
.hb-howwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hb-howtext h2{font-size:clamp(24px,2.8vw,33px);margin:10px 0 20px;line-height:1.35}
.hb-howtext p{color:var(--c-text-2);margin-bottom:14px;font-size:15.5px;line-height:1.8}
.hb-howtext p b{color:var(--c-primary)}
.hb-howtext .btn{margin-top:10px}
.hb-howmedia img{border-radius:18px;box-shadow:var(--shadow)}

/* ---------- 功能四格 ---------- */
.hb-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hb-feat{
  text-align:center;padding:34px 22px;background:#fff;border-radius:18px;
  border:1px solid var(--c-line);transition:all var(--trans);
}
.hb-feat:hover{box-shadow:var(--shadow-lg);border-color:#6EE7B7;transform:translateY(-5px)}
.hb-feat svg{width:38px;height:38px;fill:#059669;margin-bottom:16px}
.hb-feat b{display:block;font-size:17px;color:var(--c-primary);margin-bottom:8px}
.hb-feat p{color:var(--c-text-2);font-size:13.5px;line-height:1.7}

/* ---------- 案例：叠图 ---------- */
.hb-casusec{background:var(--c-ice-2)}
.hb-cases{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hb-case{position:relative;border-radius:18px;overflow:hidden;display:block;box-shadow:var(--shadow)}
.hb-case img{width:100%;transition:transform .6s ease}
.hb-case:hover img{transform:scale(1.05)}
.hb-case-mask{
  position:absolute;left:0;right:0;bottom:0;padding:24px 26px;
  background:linear-gradient(to top,rgba(6,60,45,.94) 0%,rgba(6,60,45,.4) 70%,transparent);
}
.hb-case-mask h3{color:#fff;font-size:19px;margin-bottom:6px}
.hb-case-mask p{color:#D1FAE5;font-size:14px;line-height:1.6}

/* ---------- FAQ 深色带 ---------- */
.hb-faqband{
  background:linear-gradient(135deg,#064E3B 0%,#065F46 60%,#047857 100%);
  padding:96px 0;
}
.hb-faq-head{text-align:center;margin-bottom:48px}
.hb-faq-head h2{color:#fff;font-size:clamp(26px,3.2vw,38px)}
.sec-eyebrow.light{background:rgba(167,243,208,.16);color:#A7F3D0}
.sec-eyebrow.light::before{background:#A7F3D0}
.hb-faqlist{max-width:820px;margin:0 auto;display:grid;gap:14px}
.hb-faq-item{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:20px 26px;
}
.hb-faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;color:#ECFDF5;font-size:16px;cursor:pointer;list-style:none;
}
.hb-faq-item summary::-webkit-details-marker{display:none}
.hb-faq-item summary i{
  width:10px;height:10px;border-right:2px solid #6EE7B7;border-bottom:2px solid #6EE7B7;
  transform:rotate(45deg);transition:transform var(--trans);flex-shrink:0;margin-top:-4px;
}
.hb-faq-item[open] summary i{transform:rotate(-135deg)}
.hb-faq-item p{margin-top:12px;color:#A7F3D0;font-size:15px;line-height:1.8}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hb-rings{grid-template-columns:1fr;gap:44px}
  .hb-howwrap{grid-template-columns:1fr;gap:36px}
  .hb-feats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hb-feats{grid-template-columns:1fr}
  .hb-cases{grid-template-columns:1fr}
  .hb-faqband{padding:64px 0}
}