.hpbc-services { margin-bottom: 30px; }
.hpbc-services-title { font-weight: 800; text-align: center; margin-bottom: 6px; }
.hpbc-services-subtitle { text-align: center; color: #6c757d; margin-bottom: 20px; }

.hpbc-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.hpbc-service-card { position: relative; background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.04); transition: transform .2s ease, box-shadow .2s ease; border: 1px solid #f0f0f5; overflow: hidden; }
.hpbc-service-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.05); }

.hpbc-service-accent { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(67,97,238,0.06), rgba(72,149,239,0.04)); pointer-events: none; }
.hpbc-service-thumb { position: relative; margin-bottom: 12px; border-radius: 10px; overflow: hidden; height: 180px; }
.hpbc-service-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hpbc-service-name { position: relative; margin: 0 0 8px; font-weight: 700; color: #212529; }
.hpbc-service-desc { position: relative; margin: 0; color: #495057; }

@media (max-width: 1024px) {
  .hpbc-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hpbc-services-grid { grid-template-columns: 1fr; }
}