/* VODA Network Stats 1.0.0
   Component-scoped styling: no global heading, paragraph, or WP theme overrides. */
.voda-stats,
.voda-stats-single {
  --voda-navy: #142745;
  --voda-navy-2: #1a3455;
  --voda-lime: #bbff8e;
  --voda-cyan: #00cfdf;
  --voda-text: #fff;
  --voda-muted: #d5e0eb;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--voda-text);
}
.voda-stats *, .voda-stats *::before, .voda-stats *::after,
.voda-stats-single *, .voda-stats-single *::before, .voda-stats-single *::after { box-sizing: border-box; }

.voda-stats {
  position: relative;
  width: min(100%, 1280px);
  margin: 20px auto 28px;
  padding: 67px 48px 61px;
  overflow: hidden;
  border-radius: 21px;
  background: linear-gradient(115deg, #152a4a 0%, #152745 52%, #1c3658 100%);
  box-shadow: 0 15px 28px rgba(16, 38, 66, .14);
  isolation: isolate;
}
.voda-stats::before {
  content: '';
  position: absolute;
  inset: -45% auto auto -12%;
  width: 46%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(38, 88, 140, .16), transparent 65%);
  z-index: -1;
}
.voda-stats__inner { position: relative; max-width: 1180px; margin: 0 auto; }
.voda-stats__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: clamp(29px, 3.1vw, 43px) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  letter-spacing: -.035em;
  text-align: center;
}
.voda-stats__brand-dots {
  position: relative;
  width: 36px;
  height: 33px;
  flex: none;
  display: inline-block;
  transform: rotate(-8deg);
}
.voda-stats__brand-dots i { position: absolute; display: block; border-radius: 50%; background: var(--voda-cyan); }
.voda-stats__brand-dots i:nth-child(1) { width: 12px; height: 12px; top: 2px; left: 1px; }
.voda-stats__brand-dots i:nth-child(2) { width: 12px; height: 12px; top: 16px; left: 12px; }
.voda-stats__brand-dots i:nth-child(3) { width: 12px; height: 12px; top: 0; right: 1px; }
.voda-stats__subtitle {
  color: #fff !important;
  opacity: .95;
  margin: 0 auto 35px !important;
  max-width: 800px;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
  text-align: center;
  font-weight: 500;
}
.voda-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  margin: 0 auto;
}
.voda-stats__metric {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 14px;
  gap: 16px;
  border-right: 1.5px solid rgba(0, 211, 229, .85);
}
.voda-stats__metric:last-child { border-right: 0; }
.voda-stats__icon {
  width: 59px;
  height: 59px;
  flex: 0 0 59px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(210, 231, 251, .15);
  color: #fff;
}
.voda-stats__icon svg { width: 31px; height: 31px; overflow: visible; }
.voda-stats__google-g { color: #fff; font-size: 35px; line-height: 1; font-weight: 800; font-family: Arial, sans-serif; }
.voda-stats__metric-copy { min-width: 0; text-align: left; }
.voda-stats__number {
  color: var(--voda-lime) !important;
  font-size: clamp(29px, 3.45vw, 49px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.voda-stats__label {
  margin-top: 7px;
  color: #fff !important;
  font-weight: 800;
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.35;
}
.voda-stats__footnote {
  margin: 35px auto 0 !important;
  max-width: 1050px;
  color: var(--voda-muted) !important;
  font-size: 11px;
  line-height: 1.55;
  font-style: italic;
  text-align: center;
}
.voda-stats-single {
  display: inline-flex;
  flex-direction: column;
  gap: 14px;
  min-width: min(100%, 280px);
  max-width: 100%;
  padding: 25px 27px;
  background: var(--voda-navy);
  border-radius: 19px;
  box-shadow: 0 12px 22px rgba(16, 38, 66, .14);
}
.voda-stats-single .voda-stats__metric {
  justify-content: flex-start;
  padding: 0;
  border-right: 0;
}
.voda-stats-single__note { display: block; color: var(--voda-muted); font-size: 10px; line-height: 1.4; font-style: italic; }
.voda-stats-unavailable { padding: 12px 16px; border: 1px solid #b8ceda; background: #f1f7fc; color: #142745; }

@media (max-width: 1100px) {
  .voda-stats { padding: 58px 28px 55px; }
  .voda-stats__metric { gap: 11px; padding: 0 11px; }
  .voda-stats__icon { width: 48px; height: 48px; flex-basis: 48px; }
  .voda-stats__icon svg { width: 25px; height: 25px; }
  .voda-stats__google-g { font-size: 30px; }
  .voda-stats__number { font-size: clamp(25px, 3.1vw, 38px); }
}
@media (max-width: 760px) {
  .voda-stats { width: 100%; padding: 40px 20px 37px; border-radius: 17px; }
  .voda-stats__heading { font-size: clamp(25px, 5vw, 35px) !important; gap: 8px; }
  .voda-stats__brand-dots { transform: rotate(-8deg) scale(.75); margin-left: -6px; }
  .voda-stats__subtitle { margin-bottom: 27px !important; }
  .voda-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .voda-stats__metric { min-height: 109px; padding: 13px 9px; gap: 10px; justify-content: flex-start; }
  .voda-stats__metric:nth-child(2) { border-right: 0; }
  .voda-stats__metric:nth-child(n+3) { border-top: 1px solid rgba(0, 211, 229, .5); }
  .voda-stats__number { font-size: clamp(25px, 5.6vw, 40px); }
  .voda-stats__label { font-size: 12px; }
  .voda-stats__footnote { margin-top: 24px !important; }
}
@media (max-width: 440px) {
  .voda-stats { padding: 36px 13px; }
  .voda-stats__metric { flex-direction: column; text-align: center; justify-content: center; gap: 6px; padding: 14px 6px; }
  .voda-stats__metric-copy { text-align: center; }
  .voda-stats__icon { width: 43px; height: 43px; flex: 0 0 43px; }
  .voda-stats__number { font-size: clamp(25px, 8vw, 37px); }
  .voda-stats__label { font-size: 11px; margin-top: 4px; }
  .voda-stats-single .voda-stats__metric { flex-direction: row; text-align: left; }
  .voda-stats-single .voda-stats__metric-copy { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .voda-stats, .voda-stats-single { scroll-behavior: auto; }
}