/* =====================================================================
   网站安全防护 · 页面独立样式 anquan.css
   模块原创设计：同心圆防护盾主视觉 / 六层防护徽章卡 / 清单+监控图 / 深色体检块
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-anquan{background-image:url('../images/banner-tech.jpg')}

/* ---------- 防护盾总览 ---------- */
.shield-sec{background:var(--c-ice-2)}
.shield-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.shield-visual{display:flex;justify-content:center}
.shield-core{
  width:260px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,#1B3A6B 0%,#2563EB 100%);
  clip-path:polygon(50% 0,93% 18%,93% 62%,50% 100%,7% 62%,7% 18%);
  box-shadow:0 24px 60px rgba(27,58,107,.35);position:relative;
}
.shield-core::before{
  content:"";position:absolute;inset:14px;border:1.5px solid rgba(255,255,255,.25);
  clip-path:polygon(50% 0,93% 18%,93% 62%,50% 100%,7% 62%,7% 18%);
}
.shield-core svg{width:74px;height:74px;fill:#fff}
.shield-core span{color:#DCE8FC;font-size:15px;font-weight:700;letter-spacing:2px}
.shield-text h2{font-size:clamp(22px,2.6vw,30px);margin:12px 0 16px}
.shield-text p{color:var(--c-text-2);margin-bottom:14px}

/* ---------- 六层防护 ---------- */
.layer-sec{background:#fff}
.layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.layer-card{
  position:relative;background:var(--c-ice-2);border-radius:var(--radius-lg);padding:32px 26px 26px;
  transition:transform var(--trans),box-shadow var(--trans),background var(--trans);overflow:hidden;
}
.layer-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c-grad);
}
.layer-card:hover{transform:translateY(-8px);background:#fff;box-shadow:var(--shadow-lg)}
.layer-no{
  display:inline-block;font-size:13px;font-weight:800;color:#fff;background:var(--c-primary);
  padding:4px 12px;border-radius:6px;margin-bottom:14px;letter-spacing:1px;
}
.layer-card h3{font-size:18px;margin-bottom:10px}
.layer-card p{font-size:14px;color:var(--c-text-2);line-height:1.75}

/* ---------- 监测清单 ---------- */
.watch-sec{background:var(--c-ice-2)}
.watch-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.watch-body h2{font-size:clamp(22px,2.6vw,30px);margin:12px 0 22px}
.watch-list{display:grid;gap:14px}
.watch-list li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--c-text-2);line-height:1.6;background:#fff;border-radius:12px;padding:14px 18px;box-shadow:0 4px 12px rgba(27,58,107,.05)}
.watch-list li svg{width:20px;height:20px;fill:#10B981;flex-shrink:0;margin-top:2px}
.watch-media img{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-lg)}

/* ---------- 免费体检 ---------- */
.checkup-sec{background:var(--c-dark);background-image:radial-gradient(circle at 15% 30%,rgba(37,99,235,.25),transparent 45%)}
.checkup-box{max-width:820px;margin:0 auto;text-align:center}
.checkup-box h2{color:#fff;font-size:clamp(22px,2.8vw,32px);margin-bottom:16px}
.checkup-box>p{color:#C7D6F2;font-size:15px;line-height:1.9;max-width:680px;margin:0 auto 30px}
.checkup-row{display:flex;justify-content:center;gap:0;margin-bottom:30px;flex-wrap:wrap}
.checkup-row div{padding:0 42px;border-right:1px solid rgba(255,255,255,.14)}
.checkup-row div:last-child{border-right:none}
.checkup-row b{display:block;font-size:30px;font-weight:800;color:#fff;line-height:1.1}
.checkup-row span{font-size:13px;color:#8FA4C8}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .layer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:992px){
  .shield-wrap,.watch-wrap{grid-template-columns:1fr;gap:36px}
  .shield-core{width:210px;height:240px}
  .shield-core svg{width:56px;height:56px}
}
@media (max-width:640px){
  .layer-grid{grid-template-columns:1fr}
  .checkup-row div{padding:10px 20px;border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
}