/* ═══════════════════════════════════════════
   03 — SKILLS
═══════════════════════════════════════════ */
#skills {
  padding:120px 72px;
  border-top:1px solid var(--border);
}
.skills-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; }
.tab-row { display:flex; gap:0; }
.tab-btn {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  padding:10px 22px; border:1px solid var(--border); color:var(--muted);
  background:transparent; cursor:none;
  transition:color .2s,background .2s,border-color .2s;
}
.tab-btn:last-child { border-right:1px solid var(--border); }
.tab-btn.active { color:var(--amber); background:rgba(var(--amber-rgb),.06); border-color:var(--amber-dim); }
.tab-btn:hover:not(.active) { color:var(--text); }
.skill-panel { display:none; }
.skill-panel.active { display:block; }
.skills-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.skill-card {
  background:var(--bg); padding:24px 28px;
  transition:background .3s, transform .25s, box-shadow .3s;
  position:relative; overflow:hidden;
  border-bottom:2px solid transparent;
}
.skill-card:hover {
  background:var(--bg2);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  border-bottom-color:var(--amber);
}
.sk-head {
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.sk-icon {
  width:36px; height:36px; border:1px solid var(--amber-dim);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family:'DM Mono',monospace; font-size:11px; color:var(--amber); letter-spacing:1px;
  background:var(--amber-glow);
  transition:background .3s, border-color .3s;
}
.sk-icon-original {
  width: 36px;
  height: 36px;
}
.skill-card:hover .sk-icon {
  border-color:var(--amber);
  background:rgba(var(--amber-rgb),.18);
}
.sk-name {
  font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1px;
  flex:1; line-height:1.2;
}
.sk-yrs {
  font-family:'DM Mono',monospace; font-size:9px; color:var(--amber);
  letter-spacing:2px; text-transform:uppercase; flex-shrink:0;
  border:1px solid var(--amber-dim);
  background:var(--amber-glow);
  padding:4px 10px;
  transition:background .3s, border-color .3s;
}
.skill-card:hover .sk-yrs {
  border-color:var(--amber);
  background:rgba(var(--amber-rgb),.18);
}
.sk-desc {
  font-family:'DM Mono',monospace; font-size:10px; color:var(--muted);
  line-height:1.7; letter-spacing:.5px;
}
.tags-cloud { margin-top:48px; display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.5px;
  color:var(--muted); padding:6px 14px; border:1px solid var(--border);
  text-transform:uppercase; transition:border-color .2s,color .2s;
  cursor:none;
}
.tag-chip:hover { border-color:var(--amber-dim); color:var(--amber); }