/* ============================================================
   SKILLS — WHITE WITH MARQUEE
   ============================================================ */
#skills {
  background: var(--light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#skills .container:first-child { padding-bottom: 0; }

/* Marquee ticker */
.marquee-wrap {
  overflow: hidden;
  border-top: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  padding: 1.1rem 0;
  margin-bottom: 4rem;
  background: var(--light);
}
.marquee-inner {
  display: flex;
  width: max-content;
}
.marquee-track {
  display: flex; align-items: center; gap: 1.5rem;
  flex-shrink: 0; padding-right: 1.5rem;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.marquee-track span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee-dot {
  color: var(--violet) !important;
  font-size: .6rem !important;
}

.skills-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
}

/* Pixel-style skill category cards */
.skill-category {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 6px; padding: 1.5rem;
  transition: all .15s ease;
  position: relative;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,.07);
}
.skill-category:hover {
  border-color: var(--violet);
  box-shadow: 4px 4px 0 0 var(--violet);
  transform: translate(-1px, -1px);
}

.skill-cat-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 1.1rem; line-height: 1.6;
  display: flex; align-items: center; gap: .4rem;
}
.skill-cat-title::before {
  content: '✦';
  font-size: .7em;
  opacity: .7;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.skill-tag {
  padding: .3rem .7rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600;
  background: var(--white); color: var(--text);
  border: 1.5px solid var(--border);
  transition: all .15s; cursor: default;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,.05);
}
.skill-tag:hover {
  background: var(--violet-soft); color: var(--violet);
  border-color: var(--violet);
  box-shadow: 2px 2px 0 0 var(--violet);
  transform: translate(-1px,-1px);
}

/* Language colours */
.skill-tag.rust  { background: #fff1ee; color: #c2410c; border-color: #fed7aa; }
.skill-tag.go    { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.skill-tag.js    { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.skill-tag.ts    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.skill-tag.py    { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.skill-tag.php   { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }
.skill-tag.html  { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.skill-tag.css   { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }

.skill-tag.node  { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.skill-tag.api   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.skill-tag.gql   { background: #fdf2f8; color: #9d174d; border-color: #f9a8d4; }
.skill-tag.ws    { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.skill-tag.dom   { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.skill-tag.fw    { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }

.skill-tag.sys   { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.skill-tag.sec   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.skill-tag.algo  { background: #f8fafc; color: #334155; border-color: #cbd5e1; }
.skill-tag.conc  { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.skill-tag.mem   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.skill-tag.async { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }

.skill-tag.git   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.skill-tag.linux { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.skill-tag.sql   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.skill-tag.docker{ background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.skill-tag.vsc   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }