/* ═══════════════════════════════════════════════════════════════════
   PROJECTS
═══════════════════════════════════════════════════════════════════ */
#projects{background:var(--bg);}
.projects-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:4rem;flex-wrap:wrap;gap:2rem;
}
.projects-meta{
  font-size:.75rem;font-family:var(--font-m);color:var(--gray-200);
  display:flex;align-items:center;gap:.5rem;
}
.projects-meta strong{color:var(--accent);font-weight:500;}

.projects-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
}
.project-card{
  background:var(--bg);padding:2.5rem;
  display:flex;flex-direction:column;gap:1.3rem;
  transition:background .35s;position:relative;overflow:hidden;
  min-height:380px;
}
.project-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:translateX(-100%);transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.project-card:hover{background:var(--bg-2);}
.project-card:hover::before{transform:translateX(100%);}
.project-card.featured{
  background:linear-gradient(135deg,var(--bg-2) 0%,var(--bg) 100%);
  border:1px solid rgba(0,212,255,.18);
}
.project-card.featured::after{
  content:'FEATURED';position:absolute;top:1.3rem;right:1.3rem;
  font-size:.58rem;letter-spacing:.35em;font-family:var(--font-m);
  color:var(--accent);background:rgba(0,212,255,.08);
  padding:.3rem .65rem;border:1px solid rgba(0,212,255,.25);
}
.project-num{
  font-size:.62rem;letter-spacing:.35em;font-family:var(--font-m);
  color:var(--gray-400);
}
.project-title{
  font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--white);
  letter-spacing:-.01em;
}
.project-desc{
  font-size:.78rem;color:var(--gray-200);font-family:var(--font-m);
  line-height:1.8;flex:1;
}
.project-tech{display:flex;flex-wrap:wrap;gap:.4rem;}
.project-tech-tag{
  font-size:.6rem;font-family:var(--font-m);padding:.25rem .55rem;
  border:1px solid var(--line);color:var(--gray-300);letter-spacing:.05em;
}
.project-link{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-top:auto;
  font-family:var(--font-m);transition:gap .3s;
}
.project-link:hover{gap:.85rem;}
.project-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}

.project-card.span-2{grid-column:span 2;}