
/* ==========================================================
   DIGITAL CATALYST — SHARP STATS BANNER
   Matches the supplied reference design.
   ========================================================== */

.stats-section.dc-flow-section{
  position:relative;
  padding:24px 0 22px;
  background:#fff !important;
  overflow:hidden;
}

.stats-section.dc-flow-section > .container{
  position:relative;
  z-index:2;
}

.dc-stats-banner{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100%;
  min-height:178px;
  overflow:hidden !important;
  border:1px solid #e8ecee !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 16% 50%,rgba(0,162,167,.045),transparent 25%),
    radial-gradient(circle at 50% 50%,rgba(112,190,73,.035),transparent 25%),
    radial-gradient(circle at 84% 50%,rgba(247,150,62,.045),transparent 25%),
    #fff !important;
  box-shadow:
    0 18px 42px rgba(16,16,18,.055),
    0 2px 8px rgba(16,16,18,.025) !important;
}

.dc-stats-banner::before{
  display:none !important;
  content:none !important;
}

.dc-stat{
  position:relative;
  z-index:2;
  display:flex !important;
  align-items:center;
  min-width:0;
  min-height:178px;
  padding:30px 48px !important;
  background:transparent !important;
}

.dc-stat + .dc-stat{
  border-left:1px solid #e2e6e8 !important;
}

.dc-stat-icon{
  position:relative;
  flex:0 0 64px;
  width:64px !important;
  height:64px !important;
  display:grid !important;
  place-items:center;
  margin:0 28px 0 0 !important;
  border:1px solid transparent;
  border-radius:20px !important;
  box-shadow:none !important;
  transition:
    transform .3s cubic-bezier(.2,.75,.25,1),
    box-shadow .3s ease;
}

.dc-stat-icon svg{
  width:29px !important;
  height:29px !important;
  stroke-width:1.8;
}

.dc-stat:hover .dc-stat-icon{
  transform:translateY(-3px) scale(1.035) !important;
}

.dc-stat-teal .dc-stat-icon{
  color:#12A89E;
  background:linear-gradient(145deg,rgba(18,168,158,.12),rgba(18,168,158,.055)) !important;
  border-color:rgba(18,168,158,.07);
  box-shadow:
    0 10px 24px rgba(18,168,158,.13),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.dc-stat-green .dc-stat-icon{
  color:#70BE49;
  background:linear-gradient(145deg,rgba(112,190,73,.14),rgba(112,190,73,.055)) !important;
  border-color:rgba(112,190,73,.08);
  box-shadow:
    0 10px 24px rgba(112,190,73,.13),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.dc-stat-orange .dc-stat-icon{
  color:#F5A623;
  background:linear-gradient(145deg,rgba(245,166,35,.16),rgba(245,166,35,.06)) !important;
  border-color:rgba(245,166,35,.09);
  box-shadow:
    0 10px 24px rgba(245,166,35,.14),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.dc-stat-icon svg{
  stroke:currentColor !important;
  fill:none;
}

.dc-stat-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.dc-stat .stat-number{
  margin:0 !important;
  color:#101820 !important;
  font-family:"Poppins",sans-serif !important;
  font-size:clamp(1.65rem,2.15vw,2.05rem) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.045em;
  white-space:nowrap;
}

.dc-stat .stat-label{
  margin:7px 0 0 !important;
  color:#66717d !important;
  font-family:"Inter",sans-serif !important;
  font-size:clamp(.88rem,1.1vw,1rem) !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  white-space:nowrap;
}

.dc-stat .stat-label span{
  padding:0 5px;
}

.dc-stat .stat-accent{
  display:block;
  width:68px;
  height:4px;
  margin-top:17px;
  border-radius:999px;
}

.dc-stat-teal .stat-accent{
  background:#12A89E;
}

.dc-stat-green .stat-accent{
  background:#70BE49;
}

.dc-stat-orange .stat-accent{
  background:#F5A623;
}

.dc-stat .stat-caption{
  margin:11px 0 0 !important;
  color:#657486 !important;
  font-family:"Poppins",sans-serif !important;
  font-size:.62rem !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  letter-spacing:.20em !important;
  white-space:nowrap;
}

.dc-stats-arc{
  position:absolute;
  z-index:1;
  width:185px;
  height:185px;
  border:26px solid transparent;
  border-radius:50%;
  pointer-events:none;
  opacity:.72;
}

.dc-stats-arc-left{
  left:-92px;
  bottom:-102px;
  border-color:rgba(0,162,167,.14);
}

.dc-stats-arc-right{
  right:-92px;
  bottom:-102px;
  border-color:rgba(247,150,62,.15);
}

/* Tablet */
@media (max-width:1100px){
  .dc-stat{
    padding:28px 28px !important;
  }

  .dc-stat-icon{
    flex-basis:58px;
    width:58px !important;
    height:58px !important;
    margin-right:20px !important;
    border-radius:18px !important;
  }

  .dc-stat-icon svg{
    width:26px !important;
    height:26px !important;
  }

  .dc-stat .stat-caption{
    letter-spacing:.14em !important;
  }
}

/* Mobile */
@media (max-width:768px){
  .stats-section.dc-flow-section{
    padding:24px 0 24px;
  }

  .dc-stats-banner{
    grid-template-columns:1fr !important;
    min-height:0;
    border-radius:20px !important;
  }

  .dc-stat{
    min-height:132px;
    padding:25px 24px !important;
  }

  .dc-stat + .dc-stat{
    border-left:0 !important;
    border-top:1px solid #e7ebed !important;
  }

  .dc-stat-icon{
    flex-basis:56px;
    width:56px !important;
    height:56px !important;
    margin-right:18px !important;
    border-radius:17px !important;
  }

  .dc-stat .stat-number{
    font-size:1.55rem !important;
  }

  .dc-stat .stat-label{
    font-size:.88rem !important;
  }

  .dc-stat .stat-accent{
    width:58px;
    height:3px;
    margin-top:13px;
  }

  .dc-stat .stat-caption{
    margin-top:8px !important;
    font-size:.55rem !important;
    letter-spacing:.14em !important;
  }

  .dc-stats-arc{
    display:none;
  }
}

@media (max-width:480px){
  .stats-section.dc-flow-section{
    padding:18px 0 26px;
  }

  .dc-stat{
    min-height:118px;
    padding:21px 18px !important;
  }

  .dc-stat-icon{
    flex-basis:50px;
    width:50px !important;
    height:50px !important;
    margin-right:15px !important;
    border-radius:15px !important;
  }

  .dc-stat-icon svg{
    width:23px !important;
    height:23px !important;
  }

  .dc-stat .stat-number{
    font-size:1.38rem !important;
    letter-spacing:-.035em;
  }

  .dc-stat .stat-label{
    margin-top:5px !important;
    font-size:.79rem !important;
  }

  .dc-stat .stat-caption{
    font-size:.48rem !important;
    letter-spacing:.11em !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .dc-stat-icon{
    transition:none !important;
  }
}
