/* css/counters.css
   Counter section for BillboardBug — dark bg, white text, responsive grid
*/
:root{
  --c-bg: #0D1E32 !important;
  --c-foreground: #ffffff;
  --c-accent: #7c5cff;
  --c-muted: rgba(255,255,255,0.72);
  --radius: 12px;
  --pad: 28px;
  --maxw: 1200px;
  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.counters-section{
  background: var(--c-bg) !important;
  color: var(--c-foreground);
  padding: 64px 20px;
  overflow: hidden;
  position: relative;
  font-family: var(--ff-sans);
}

/* subtle decorative top accent */
.counters-section::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,0.18), rgba(52,72,197,0.18));
  opacity: 0.9;
}

.counters-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* header */
.counters-head{ text-align:center; max-width:960px; margin:0 auto; }
.counters-head h2{
  font-size:28px; margin:0; font-weight:700; color:var(--c-foreground);
  letter-spacing:-0.01em;
}
.counters-head .counters-sub{
  margin-top:10px; color:var(--c-muted); font-size:15px; line-height:1.5;
}

/* grid */
.counters-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top:12px;
  align-items:stretch;
}
@media(min-width:720px){
  .counters-grid{ grid-template-columns: repeat(3, 1fr); gap:24px; }
}

/* card */
.counter-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  padding:22px;
  border-radius: var(--radius);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform .32s cubic-bezier(.2,.9,.26,1), box-shadow .32s;
}
.counter-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 50px rgba(6,9,18,0.28); }

/* value */
.counter-value{
  font-weight:800;
  font-size:34px;
  color: #0D9AFF;
  letter-spacing:-0.01em;
  display:inline-block;
  min-height:40px;
}
@media(min-width:880px){
  .counter-value{ font-size:40px; }
}

/* label */
.counter-label{
  margin-top:8px;
  color:var(--c-muted);
  font-size:14px;
  font-weight:600;
}

/* plus sign styling (if used via ::after on formatted numbers) */
.counter-value.plus::after{
  content: "+";
  margin-left:6px;
  font-size:22px;
  vertical-align:top;
  color:var(--c-foreground);
  opacity:0.95;
}

/* Optional small shimmer for attention */
.counter-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 40%, rgba(255,255,255,0.02) 100%);
  mix-blend-mode: overlay;
  border-radius: var(--radius);
  opacity:0.6;
}

/* compact spacing for small screens */
@media(max-width:420px){
  .counters-section{ padding:36px 12px; }
  .counters-head h2{ font-size:22px; }
  .counter-value{ font-size:28px; }
}