/* ============================================================
   Stat-Cards (#why) — Holographic „Instrument-Panel"-Port.
   Rotierende Holo-Conic-Edge + Dark-Glass + HUD-Ecken + Shimmer +
   animierte Gradient-Zahl. Scoped auf #why (überschreibt das cards.css-
   Frame für .stat-card). Fonts brand-treu (Outfit/JetBrains Mono).
   ============================================================ */
@property --holo-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

#why .stat-card {
  --holo-phase: 0s;
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  padding: 36px 34px 32px;
  border-radius: 22px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 12px 32px rgba(139, 92, 246, 0.14),
    0 4px 12px rgba(255, 61, 129, 0.06);
}
/* Layer A — rotierende Holo-Conic-Edge */
#why .stat-card::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: 23.5px; z-index: -3;
  background: conic-gradient(from var(--holo-angle),
    var(--color-s), var(--color-e), var(--color-a), var(--color-k), var(--color-t), var(--color-s));
  animation: holo-spin 20s linear infinite;
  animation-delay: var(--holo-phase);
  filter: blur(0.5px) saturate(1.05);
  opacity: 0.65;
}
/* Layer B — Dark-Glass-Fill */
#why .stat-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 22px; z-index: -2;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(255, 61, 129, 0.08), transparent 60%),
    radial-gradient(120% 90% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
    linear-gradient(160deg, rgba(15, 11, 38, 0.96) 0%, rgba(11, 8, 32, 0.94) 60%, rgba(20, 10, 36, 0.92) 100%);
}
@keyframes holo-spin { to { --holo-angle: 360deg; } }

/* HUD-Eckklammern */
#why .stat__corners { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#why .stat__corners i {
  position: absolute; width: 16px; height: 16px;
  border-color: rgba(240, 238, 230, 0.28); border-style: solid; border-width: 0;
}
#why .stat__corners i.tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
#why .stat__corners i.tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
#why .stat__corners i.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
#why .stat__corners i.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }

/* Travelling Shimmer */
#why .stat__shimmer { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; pointer-events: none; z-index: 1; }
#why .stat__shimmer::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 36%;
  transform: translateX(-180%) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07) 50%, transparent);
  animation: stat-shimmer 9s ease-in-out infinite; animation-delay: var(--holo-phase);
  mix-blend-mode: overlay;
}
@keyframes stat-shimmer {
  0% { transform: translateX(-180%) skewX(-22deg); }
  55%, 100% { transform: translateX(320%) skewX(-22deg); }
}

/* Readout-Strip */
#why .stat__readout {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 22px;
}
#why .stat__readout .pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-a); box-shadow: 0 0 6px var(--color-a);
  animation: stat-live-pulse 2.4s ease-in-out infinite;
}
@keyframes stat-live-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
#why .stat__readout .idx { margin-left: auto; color: var(--ink-muted); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }

/* Grosse animierte Gradient-Zahl (nutzt bestehende .stat-num + Count-up-Span) */
#why .stat-num {
  position: relative; z-index: 3;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.04em;
  margin: 0 0 22px; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(90deg,
    var(--color-a) 0%, #B86CCB 18%, var(--color-k) 35%, var(--color-t) 52%,
    var(--color-k) 70%, #B86CCB 85%, var(--color-a) 100%);
  background-size: 300% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: stat-num-cycle 14s linear infinite; animation-delay: var(--holo-phase);
  text-shadow: 0 12px 48px rgba(139, 92, 246, 0.22);
}
@keyframes stat-num-cycle { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

#why .stat-title {
  position: relative; z-index: 3;
  margin: 0 0 12px; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.012em; color: var(--ink-primary);
}
#why .stat-desc {
  position: relative; z-index: 3;
  margin: 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: var(--ink-muted);
}
#why .stat-source {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-faint);
}
#why .stat-source::before {
  content: 'src'; padding: 2px 6px; border-radius: 4px;
  background: rgba(139, 92, 246, 0.10); border: 1px solid rgba(139, 92, 246, 0.22);
  color: var(--color-a); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 9.5px;
}

@media (prefers-reduced-motion: reduce) {
  #why .stat-card::before, #why .stat__shimmer::before, #why .stat-num, #why .stat__readout .pulse { animation: none; }
  #why .stat-num { background-position: 50% 50%; }
}