/*
 * AquaForge Animated Counters
 */

.af-counters {
  background-color: var(--af-ice, #F5F8FA);
  padding: 48px 20px;
}

.af-counters__grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.af-counter {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.af-counter__number {
  font-family: var(--af-font-sans);
  font-size: 48px;
  font-weight: 700;
  color: var(--af-cyan, #2EC4D4);
  line-height: 1;
}

.af-counter__suffix {
  font-family: var(--af-font-sans);
  font-size: 48px;
  font-weight: 700;
  color: var(--af-cyan, #2EC4D4);
  line-height: 1;
}

.af-counter__static {
  font-family: var(--af-font-sans);
  font-size: 36px;
  font-weight: 700;
  color: var(--af-cyan, #2EC4D4);
  line-height: 1;
}

.af-counter__label {
  font-size: 14px;
  color: var(--af-slate, #64748B);
  line-height: 1.4;
  margin-top: 8px;
  max-width: 200px;
}

/* Responsive */
@media (width <= 600px) {
  .af-counters__grid {
    flex-direction: column;
    gap: 32px;
  }

  .af-counter__number,
  .af-counter__suffix {
    font-size: 36px;
  }

  .af-counter__static {
    font-size: 28px;
  }
}