@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&display=swap');

.svpa-stats{
  --svpa-stats-bg:linear-gradient(135deg,#b50d0d 0%,#e31010 50%,#b50d0d 100%);
  --svpa-stats-grid-color:rgba(0,0,0,.12);
  --svpa-stats-grid-size:56px;
  --svpa-stats-divider:rgba(255,255,255,.15);
  --svpa-stats-n-color:#ffffff;
  --svpa-stats-l-color:rgba(255,255,255,.75);
  --svpa-stats-wrap-max:1340px;

  padding:80px 0;
  background:var(--svpa-stats-bg);
  position:relative;
  overflow:hidden;
  font-family:'Orbitron',monospace;
}
.svpa-stats *,
.svpa-stats *::before,
.svpa-stats *::after{box-sizing:border-box;}

.svpa-stats::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,var(--svpa-stats-grid-color) 0,var(--svpa-stats-grid-color) 1px,transparent 1px,transparent var(--svpa-stats-grid-size)),
    repeating-linear-gradient(90deg,var(--svpa-stats-grid-color) 0,var(--svpa-stats-grid-color) 1px,transparent 1px,transparent var(--svpa-stats-grid-size));
}
.svpa-stats-wrap{ position:relative; max-width:var(--svpa-stats-wrap-max); margin:0 auto; padding:0 28px; }
/* `minmax(0, 1fr)` instead of plain `1fr` so the cells can shrink below
   their min-content width — without this, the huge Orbitron numbers force
   the grid wider than the viewport on mobile and the right column gets clipped. */
.svpa-stats-grid{ position:relative; display:grid; grid-template-columns:repeat(var(--svpa-stats-cols,4),minmax(0,1fr)); }
.svpa-stat{
  text-align:center;
  padding:24px 16px;
  border-right:1px solid var(--svpa-stats-divider);
  min-width:0;
}
.svpa-stat-n,.svpa-stat-l{
  /* Allow long words/numbers to break instead of forcing the cell wider. */
  overflow-wrap:anywhere;
  word-break:break-word;
}
.svpa-stat:last-child{ border-right:none; }
.svpa-stat-n{
  font-family:'Orbitron',monospace;
  font-size:clamp(3rem,6vw,5rem);
  font-weight:900;
  color:var(--svpa-stats-n-color);
  letter-spacing:2px;line-height:1;
  display:block;
}
.svpa-stat-l{
  font-family:'Orbitron',monospace;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--svpa-stats-l-color);
  margin-top:8px;display:block;
}

.svpa-stats-sr{opacity:0;transform:translateY(36px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.svpa-stats.svpa-stats-vis .svpa-stats-sr{opacity:1;transform:none;}
.svpa-stats-d1{transition-delay:.08s;} .svpa-stats-d2{transition-delay:.16s;}
.svpa-stats-d3{transition-delay:.24s;} .svpa-stats-d4{transition-delay:.32s;}

@media (max-width:880px){
  /* Force 2 columns at this breakpoint only when the user hasn't set a
     responsive `columns` value; otherwise the widget's own `--svpa-stats-cols`
     wins via Elementor's per-device CSS (more specific selector). */
  .svpa-stats-grid{ grid-template-columns:repeat(var(--svpa-stats-cols,2),minmax(0,1fr)); }
  .svpa-stat{ padding:20px 10px; }
  .svpa-stat:nth-child(2n){ border-right:none; }
  .svpa-stat:nth-child(-n+2){ border-bottom:1px solid var(--svpa-stats-divider); }
  .svpa-stat-n{ font-size:clamp(2rem,10vw,3.4rem); letter-spacing:1px; }
  .svpa-stat-l{ font-size:.55rem; letter-spacing:.12em; }
}
@media (max-width:480px){
  .svpa-stats{ padding:60px 0; }
  .svpa-stats-wrap{ padding:0 16px; }
  .svpa-stat{ padding:16px 6px; }
  .svpa-stat-n{ font-size:clamp(1.7rem,11vw,2.6rem); letter-spacing:.5px; }
  .svpa-stat-l{ font-size:.5rem; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce){
  .svpa-stats *{ transition:none !important; animation:none !important; }
  .svpa-stats-sr{ opacity:1; transform:none; }
}