.circle-stat {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 120px;
  height: 120px;
  margin: 0 auto;

  border-radius: 50%;
  border: 2px solid #a8ff00;

  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: #000;
}

/* Circle that “draws in” (stroke animates around) – use with .circle-draw-in wrapper */
.circle-draw-in {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-draw-in-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.circle-draw-in-ring circle {
  stroke-dasharray: 427;
  stroke-dashoffset: 427;
  animation: circle-draw-in 0.9s ease-out forwards;
}

.circle-draw-in:nth-child(2) .circle-draw-in-ring circle {
  animation-delay: 0.55s;
}

.circle-draw-in:nth-child(3) .circle-draw-in-ring circle {
  animation-delay: 1.1s;
}

@keyframes circle-draw-in {
  to {
    stroke-dashoffset: 0;
  }
}

.circle-draw-in-content {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 8px;
}

/* Large draw-in circle (e.g. About slide) – stroke dash matches r=138 */
.circle-draw-in--large {
  width: 42vmin;
  height: 42vmin;
}

.circle-draw-in--large .circle-draw-in-ring circle {
  stroke-dasharray: 867;
  stroke-dashoffset: 867;
}