/* Home page: "How it works" section (.hiw-section) */

.hiw-section,
.hiw-section .section-content,
.hiw-section .row,
.hiw-section .col {
  overflow: visible !important;
}

.hiw-section .row {
  position: relative;
}

/* Cards */
.hiw-section .col {
  position: relative;
  z-index: 1;
}

.hiw-section .col-inner {
  position: relative;
  z-index: 1;
  background: #fff !important;
  border-radius: 28px !important;
  padding: 40px 35px !important;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
  .hiw-section .col-inner:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.18),
                0 18px 36px -18px rgba(0, 0, 0, 0.12);
  }
}

/* Keep real content above the big number */
.hiw-section .col-inner > * {
  position: relative;
  z-index: 1;
}

/* Big faded step numbers */
.hiw-section .col-inner::after {
  position: absolute;
  top: 18px;
  right: 30px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: #f3f3f5;
  pointer-events: none;
  z-index: 0;
}

.hiw-section .col:nth-child(1) .col-inner::after { content: "01"; }
.hiw-section .col:nth-child(2) .col-inner::after { content: "02"; }
.hiw-section .col:nth-child(3) .col-inner::after { content: "03"; }

/* Connector lines between cards */
.hiw-section .col:nth-child(1)::after,
.hiw-section .col:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 80px;
  right: -40px;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: #e1e1ea;
  z-index: 0;
}

@media (max-width: 849px) {
  .hiw-section .col::after {
    display: none;
  }
}