.proj-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn { padding: 8px 22px; border-radius: 100px; border: 2px solid var(--border); background: #fff; font-size: 0.88rem; font-weight: 600; color: var(--text-muted); transition: var(--transition); cursor: pointer; }
.filter-btn.active, .filter-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.proj-item { border-radius: var(--radius-lg); overflow: hidden; position: relative; min-height: 320px; cursor: pointer; transition: var(--transition); }
.proj-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.proj-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-item .project-overlay { opacity: 0; transition: var(--transition); }
.proj-item:hover .project-overlay { opacity: 1; }
@media(max-width:1024px){ .proj-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px){ .proj-grid{grid-template-columns:1fr;} }