/* ============================================
   systems.css — Extension Systems
   ============================================ */
.systems{background:#fff}
.system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top: clamp(30px, 2.60vw, 50px);}
.system{position:relative;overflow:hidden;transition:transform .45s ease,filter .45s ease}
.system:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.system img{aspect-ratio: 3 / 4;object-fit: cover;width: 100%;}
.system-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;}
.system-copy h3{color:#fff;margin-bottom: 10px;}
.system-copy p{color:#ddd;font-size: clamp(12px, 0.73vw, 14px);}

@media(min-width:992px){
.system:hover{transform:translateY(-8px);filter:saturate(1.06)}
}

@media(max-width:991px){
  .system-grid{grid-template-columns:1fr 1fr;gap: 10px;}
}

@media(max-width:576px){
  .system-copy {left: 15px;right: 15px;bottom: 15px;}
}