/* How-it-works steps */
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:56px;
  position:relative
}

.steps::before {
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:52px;
  height:1px;
  background:var(--bl);
  opacity:.6
}

.step {
  text-align:center;
  position:relative
}

.step .ic {
  margin:0 auto 12px;
  border-radius:50%;
  width:44px;
  height:44px;
  position:relative;
  z-index:1
}

.step .mono {
  color:#528ab5;
  font-size:10px;
  display:block;
  margin-bottom:8px
}

.step .ic {
  transition:.35s
}

.step:hover .ic {
  box-shadow:0 0 24px #00e1ff88;
  border-color:var(--cy)
}

.steps::before {
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.6s cubic-bezier(.6,0,.2,1) .3s
}

.steps.in::before {
  transform:none
}