/* Skills Section */
.skills-grid { display:flex; flex-wrap:wrap; gap:.65rem .75rem; }
.skill-item { background:rgba(255,255,255,.03); border:1px solid var(--color-border); padding:.55rem .75rem; border-radius: var(--radius-ui); font-size:.7rem; font-weight:600; letter-spacing:.4px; display:inline-flex; gap:.5rem; align-items:center; position:relative; box-shadow:var(--shadow-sm); line-height:1.15; white-space:nowrap; }
.skill-item span:last-child { display:inline-block; }
.skill-item span.icon { width:26px; height:26px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid var(--color-border); border-radius:var(--radius-ui); font-size:.85rem; }
.skill-item:hover { background:#242c36; color: var(--color-accent); }
/* New grouped layout */
.skills-groups { display:grid; gap:2.25rem 2rem; margin-top:1.25rem; }
.skills-intro { max-width:58ch; margin:0 0 1.25rem; color:var(--color-text-dim); }
.skill-group { display:flex; flex-direction:column; gap:.85rem; }
.skill-group-title { font-size:1rem; letter-spacing:.5px; font-weight:700; display:flex; align-items:center; gap:.55rem; padding:0 .25rem; }
.skill-group-title::before { content:""; width:24px; height:2px; background:var(--color-border); border-radius:3px; }
.group-icon { font-size:1.05rem; filter:grayscale(.2); }
.skill-group:nth-child(1) .skill-group-title { color:var(--color-accent); }
.skill-group:nth-child(2) .skill-group-title { color:var(--color-highlight, #6fb5ff); }
.skill-list { display:flex; flex-wrap:wrap; gap:.6rem .7rem; }
/* Item refinements */
.skill-item { transition:background .2s ease, transform .18s ease, color .2s ease; }
.skill-item .icon { background:transparent; border:none; width:auto; height:auto; font-size:.9rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; color:var(--color-accent); filter:grayscale(.1); }
.skill-group:nth-child(2) .skill-item .icon { color:var(--color-highlight, #6fb5ff); }
.skill-item:hover { transform:translateY(-2px); box-shadow:0 4px 10px -4px rgba(0,0,0,.4); }
@media (min-width: 800px) {
	.skills-groups { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 799px) {
	.skill-group-title { font-size:.95rem; }
	.skill-item { font-size:.68rem; }
}
