.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap);
}

.project-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  display: flex; flex-direction: column;
  transition: border-color var(--transition), transform var(--transition);
}
.project-card:hover { border-color: rgba(59,130,246,0.5); transform: translateY(-4px); }

.project-card-top {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 1.25rem;
}
.project-icon { font-size: 1.8rem; }

.project-links { display: flex; gap: 0.75rem; }
.project-links a { color: var(--slate); transition: color var(--transition); display: flex; align-items: center; }
.project-links a:hover { color: var(--white); }
.project-links svg { width: 18px; height: 18px; }

.project-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }
.project-desc  { font-size: 0.875rem; color: var(--slate); flex: 1; margin-bottom: 1.25rem; line-height: 1.6; }

.project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  font-size: 0.72rem; font-family: var(--font-display);
  color: var(--blue); background: rgba(59,130,246,0.1);
  border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; font-weight: 500;
}