/* ============================================
   SECTION 2 — STATS / TRUST BAR
   Mobile-first | 1-col → 2-col (480px) → 3-col (1024px)
   ============================================ */

/* ── SECTION WRAPPER ── */
.stats {
  position: relative;
  background: linear-gradient(180deg, #0A0D16 0%, #111827 100%);
  padding: 52px 20px;
}

/* 2px cyan accent line — clear visual break from hero */
.stats-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #00D4FF 20%,
    #00D4FF 80%,
    transparent 100%
  );
}

/* ── SECTION HEADING ── */
.stats-header {
  text-align: center;
  margin-bottom: 20px;
}

.stats-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 28px;
  text-transform: uppercase;
  color: #F0F4FF;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.stats-h2__cyan { color: #00D4FF; }

/* Hide br on mobile — let text wrap naturally */
.stats-h2 br { display: none; }

.stats-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #B8CAD8;
  max-width: 580px;
  margin: 0 auto 8px;
  line-height: 1.75;
  text-align: center;
  background: #111827;
  border: 1px solid rgba(245,197,24,0.22);
  border-top: 2px solid #F5C518;
  border-radius: 8px;
  padding: 20px 28px;
  box-shadow: 0 0 24px rgba(245,197,24,0.07), 0 4px 20px rgba(0,0,0,0.4);
}

/* ── GRID — 2 column even on small mobile (better use of space) ── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── STAT CARD ── */
.stat-card {
  background: #0C1220;
  border: 1px solid #1C2A3A;
  border-radius: 8px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.45s ease;

  /* entrance animation — starts hidden */
  opacity: 0;
  transform: translateY(14px);
}

.stat-card.stat-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .stat-card:hover {
    border-color: rgba(0,212,255,0.35);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,212,255,0.12), 0 4px 16px rgba(0,0,0,0.35);
  }
  .stat-card:has(.stat-num--gold):hover {
    border-color: rgba(245,197,24,0.35);
    box-shadow: 0 10px 40px rgba(245,197,24,0.1), 0 4px 16px rgba(0,0,0,0.35);
  }
}

/* Colored left accent border per card type */
.stat-card:has(.stat-num--cyan) {
  border-left: 3px solid rgba(0, 212, 255, 0.75);
}
.stat-card:has(.stat-num--gold) {
  border-left: 3px solid rgba(245, 197, 24, 0.75);
}

/* ── NUMBER ── */
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  line-height: 1;
  display: block;
  margin-bottom: 2px;
  letter-spacing: 1px;
}

.stat-num--cyan { color: #00D4FF; }
.stat-num--gold { color: #F5C518; }

/* ── LABEL ── */
.stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--iptv-muted);
  display: block;
  margin-bottom: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
  width: 100%;
}

/* ── DESCRIPTION ── */
.stat-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--iptv-muted);
  line-height: 1.55;
  margin: 0;
}

/* ══════════════════════════════════════════
   SMALL MOBILE — < 390px (2-col, compact)
══════════════════════════════════════════ */
@media (max-width: 389px) {
  .stats { padding: 44px 16px; }
  .stats-h2 { font-size: 24px; }
  .stats-sub { font-size: 14px; }
  .stats-header { margin-bottom: 24px; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 14px 12px; }
  .stat-num { font-size: 36px; }
  .stat-label { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 6px; }
  .stat-desc { font-size: 14px; }
}

/* ══════════════════════════════════════════
   SMALL TABLET — 480px+  (keep 2-col, bigger)
══════════════════════════════════════════ */
@media (min-width: 480px) {

  .stats { padding: 52px 20px; }

  .stats-h2 { font-size: 32px; }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .stat-num { font-size: 44px; }

  .stat-desc { font-size: 14px; }
}

/* ══════════════════════════════════════════
   TABLET — 640px+
══════════════════════════════════════════ */
@media (min-width: 640px) {

  .stats { padding: 64px 32px; }

  .stats-h2 { font-size: 38px; }

  .stats-header { margin-bottom: 24px; }

  .stat-card { padding: 22px 20px; }

  .stat-num { font-size: 50px; }

  .stat-label { font-size: 10px; }

  .stat-desc { font-size: 14px; }
}

/* ══════════════════════════════════════════
   DESKTOP — 1024px+  (3-column grid)
══════════════════════════════════════════ */
@media (min-width: 1024px) {

  .stats { padding: 80px 40px; }

  .stats-h2 { font-size: 52px; }
  .stats-h2 br { display: inline; }

  .stats-sub { font-size: 15px; }

  .stats-header { margin-bottom: 28px; }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .stat-card { padding: 32px 28px; }

  .stat-num { font-size: 64px; }

  .stat-label { font-size: 11px; letter-spacing: 2.5px; }

  .stat-desc { font-size: 14px; }
}