/* ==========================================================================
   AUTHIFY — Trust & Scale (Scene 04)
   Animated statistics + ambient network visualisation.
   ========================================================================== */

.stats{
  position: relative;
  background: var(--color-bg);
}

.stats__panel{
  position: relative;
  padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.stats__panel::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}
.stats__panel .section-header{
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.stats__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stat{ display: flex; flex-direction: column; gap: var(--space-3xs); }
.stat__value{
  font-size: var(--text-3xl);
  font-weight: 200;
  letter-spacing: var(--tracking-tight);
}
.stat__label{ font-size: var(--text-sm); color: var(--color-text-muted); }

.stats__visual{
  position: relative;
  z-index: 1;
  margin-top: var(--space-2xl);
  height: min(52vw, 420px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--gold-400) 16%, transparent), transparent 70%),
    var(--color-bg-elevated);
  overflow: hidden;
}
#network-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; cursor: none; }

@media (max-width: 900px){
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
}