/* ═══════════════════════════════════════════════════════════════════
   SKILLS
═══════════════════════════════════════════════════════════════════ */
#skills{background:var(--bg-2);}
.skills-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line);
}
.skill-card{
  background:var(--bg-2);padding:2.2rem;
  display:flex;flex-direction:column;gap:1.3rem;
  transition:background .35s;position:relative;
}
.skill-card:hover{background:var(--bg-3);}
.skill-card-head{display:flex;align-items:center;gap:.85rem;}
.skill-card-icon{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);
}
.skill-card-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5;}
.skill-card-name{
  font-size:.78rem;letter-spacing:.25em;text-transform:uppercase;
  font-weight:600;color:var(--gray-100);
}
.skill-tags{display:flex;flex-wrap:wrap;gap:.45rem;}
.skill-tag{
  font-size:.7rem;font-family:var(--font-m);padding:.4rem .8rem;
  border:1px solid var(--line);color:var(--gray-100);
  transition:all .25s;letter-spacing:.03em;
}
.skill-tag:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-2px);
}