.prod-hero{position:relative;margin-top:0;height:38vh;min-height:260px;color:#fff;overflow:hidden;background:url("../image/2.webp") center/cover no-repeat}
.prod-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,40,.55),rgba(10,20,40,.55))}
.hero-inner{position:relative;z-index:2;height:100%}
.hero-title{position:absolute;left:60px;bottom:30px;font-size:30px;font-weight:800}
.cat-nav{background:#0ac;color:#fff}
.cat-nav .container{display:flex;gap:10px;align-items:center}
.cat-pill{display:inline-block;padding:10px 14px;background:rgba(255,255,255,.12);border-radius:999px;color:#fff;transition:transform .16s ease, background .16s ease}
.cat-pill:hover{transform:scale(1.06);background:rgba(255,255,255,.20)}
.section{padding:60px 0}
.section h2{font-size:24px;font-weight:800;color:#0b2f4a;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#f7fbff;border-radius:12px;padding:12px;transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:scale(1.04);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.pic{width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#fff}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.name{font-weight:700;color:#0b2f4a;text-align:center;margin-top:8px}
.desc{text-align:center;color:#4a5a6a;font-size:13px;margin-top:4px}

@media (max-width:960px){
  .hero-title{left:24px}
  .grid{grid-template-columns:1fr}
}