.stats-wrapper{
  display:flex;
  justify-content:space-evenly;
  align-items:flex-start;
  flex-wrap:no-wrap;
  font-family:Inter,sans-serif;
  padding:32px 0;
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:max-content;
  opacity:0;
  transform:translateY(16px);
  
  /* THIS IS THE FIX: 
    We read the "--animation-delay" variable.
    The 'var()' function includes a fallback (0s) just in case.
  */
  animation: fadeUp .4s ease forwards var(--animation-delay, 0s);
}

.stat-divider {
    background: #EAECF0;
    width: 1px;
align-self: stretch;
}

.stat-content {
    align-items: center;
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: 12px;
}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* icon + number on same baseline */
.stat-top{
  display:flex;
  flex-direction: column;
  /* 'left' is not a valid value for align-items. Use 'flex-start'. */
  align-items: flex-start;
  gap:4px;
}

.stat-icon{color:#0b1625;display:inline-flex}
.stat-icon__svg svg,.stat-icon__i{
  width:2.25rem;height:2.25rem;line-height:1;fill:currentColor;display:block
}

.stat-number{font-size:36px;font-weight:600;color:#0b1625;line-height:1.2}
.stat-title{font-size:18px;color:#0b1625;margin-top:6px}

/* line matches content width, with comfortable spacing */
.stat-line{
  border-bottom:4px solid #1468B8;
  width:100%;
  margin-top:14px;          /* more space from text */
}

/* mobile: center */
@media (max-width:900px){
    .stats-wrapper {
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
    }
    .stat-item {
        align-items: center;
        text-align: center;
        margin: 16px auto;
    }
  .stat-content {
    flex-direction: column;
}
  .stat-top{flex-direction:column;gap:6px}
  .stat-line{width:80px;margin-left:auto;margin-right:auto}
}