/* =========================================
   STATS — stats.css
   ========================================= */

/* ── DESKTOP GRID ────────────────────────── */

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
  padding-top:           24px;
  perspective:           1600px;
}

/* ── CARD ────────────────────────────────── */

.stat-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  padding:         24px 24px 22px;
  border-radius:   var(--radius-lg);
  background:      transparent;
  border:          1px solid transparent;
  overflow:        hidden;
  transform-style: preserve-3d;
  transition:
    transform    0.65s var(--ease-out),
    background   0.45s ease,
    box-shadow   0.45s ease,
    border-color 0.45s ease;
}

.stat-card::before {
  content:  "";
  position: absolute;
  inset:    0;
  background: linear-gradient(
    135deg,
    rgba(180,210,255,0.10),
    rgba(240,220,255,0.08),
    rgba(255,230,240,0.06)
  );
  opacity:        0;
  transition:     opacity 0.45s ease;
  pointer-events: none;
}

.stat-card:hover {
  transform:
    perspective(1400px)
    rotateX(4deg)
    rotateY(-4deg)
    translateY(-6px);
  background:   rgba(255,255,255,0.58);
  border-color: rgba(255,255,255,0.8);
  box-shadow:
    0 24px 48px rgba(100,160,255,0.10),
    0 8px 20px  rgba(0,0,0,0.04);
}

.stat-card:hover::before { opacity: 1; }

.stat-card > * {
  position:  relative;
  z-index:   2;
  transform: translateZ(24px);
}

/* ── LABEL ───────────────────────────────── */

.stat-card__label {
  font-size:      11px;
  letter-spacing: 0.32em;
  color:          var(--text-muted);
  text-transform: uppercase;
  margin-bottom:  4px;
}

/* ── VALUE ───────────────────────────────── */

.stat-card__value {
  font-size:      44px;
  line-height:    1;
  font-weight:    700;
  letter-spacing: -0.04em;
  color:          var(--text-primary);
}

/* ── DESCRIPTION ─────────────────────────── */

.stat-card__desc {
  font-size:   15px;
  line-height: 1.5;
  color:       var(--text-secondary);
}

/* ── RESPONSIVE — 1024px ─────────────────── */

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
  }
}

/* ── RESPONSIVE — 768px — MOBILE ─────────── */

@media (max-width: 768px) {

  .stats-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0;
    padding-top:           0;
    margin-top:            40px;
    border-top:            1px solid var(--border);
  }

  /* flat grid cells — no cards */
  .stat-card {
    padding:       32px 20px 28px;
    border-radius: 0;
    border:        none;
    border-bottom: 1px solid var(--border);
    background:    transparent;
  }

  /* right column divider */
  .stat-card:nth-child(even) {
    border-left: 1px solid var(--border);
  }

  /* last two — no bottom border on desktop scroll */
  .stat-card:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .stat-card__label {
    font-size:      10px;
    letter-spacing: 0.28em;
    margin-bottom:  12px;
  }

  .stat-card__value {
    font-size: 40px;
  }

  .stat-card__desc {
    font-size:   13px;
    margin-top:  4px;
    line-height: 1.4;
  }

  /* disable 3D tilt on mobile */
  .stat-card:hover {
    transform:    none;
    background:   transparent;
    box-shadow:   none;
    border-color: transparent;
  }

  .stat-card:nth-child(even):hover {
    border-left: 1px solid var(--border);
  }

  /* ── SCROLL REVEAL ──────────────────────── */

  /* bottom 2 cards hidden initially */
  .stat-card:nth-child(3),
  .stat-card:nth-child(4) {
    opacity:    0;
    transform:  translateY(24px);
    transition:
      opacity   0.6s var(--ease-out),
      transform 0.6s var(--ease-out);
  }

  .stat-card:nth-child(4) {
    transition-delay: 0.1s;
  }

  /* JS adds .is-visible */
  .stat-card.is-visible {
    opacity:   1;
    transform: translateY(0);
  }

}