/* =============================================
   stats.css — Animated counter stats bar
   ============================================= */

#stats {
  padding: 60px 80px;
  background: var(--bg);
  border-top: 1px solid var(--bg1);
  border-bottom: 1px solid var(--bg1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.stat {
  text-align: center;
  position: relative;
}
.stat::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--bg2);
}
.stat:last-child::after { display: none; }

.stat-label {
  font-size: 10px;
  color: var(--fg2);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 32px;
  line-height: 1;
}
.stat-unit {
  font-size: 12px;
  color: var(--fg2);
  margin-top: 5px;
}

/* Each stat gets its own glow colour */
.stat:nth-child(1) .stat-value { color: var(--yellow-b); text-shadow: 0 0 15px var(--yellow); }
.stat:nth-child(2) .stat-value { color: var(--green-b);  text-shadow: 0 0 15px var(--green);  }
.stat:nth-child(3) .stat-value { color: var(--blue-b);   text-shadow: 0 0 15px var(--blue);   }
.stat:nth-child(4) .stat-value { color: var(--orange-b); text-shadow: 0 0 15px var(--orange); }

@media (max-width: 900px) {
  #stats { padding: 40px 24px; }
}
@media (max-width: 600px) {
  #stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat-value { font-size: 22px; }
}