.gh-stats-card {
  margin-top: 28px;
}

.gh-stats-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8892a4);
  margin-bottom: 24px;
}

.skills-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
}

.skill-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.skill-circle-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.skill-circle-wrap svg {
  transform: rotate(-90deg);
  width: 80px;
  height: 80px;
}

.skill-circle-wrap .track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 6;
}

.skill-circle-wrap .progress {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 201; /* 2 * π * 32 ≈ 201 */
  stroke-dashoffset: 201;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-circle-wrap .skill-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-circle-wrap .skill-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.skill-percent {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.skill-label {
  font-size: 11px;
  color: var(--text-muted, #8892a4);
  font-weight: 500;
  text-align: center;
}
/* Animate when in view */
.skill-circle-wrap .progress {
  stroke-dashoffset: 201; /* start hidden */
  transition: none; /* no transition until animated class added */
  .skill-icon img.icon-mask {
    width: 28px;
    height: 28px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}
.skill-icon img.icon-white {
  filter: brightness(0) invert(1);
}

.skill-circle-wrap.animated .progress {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes spin-in {
  from {
    stroke-dashoffset: 201;
  }
}