*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

/* SECTION */
.how-we-work-section{
  padding:90px 20px;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.12), transparent 35%),
    linear-gradient(135deg, #f7f8fb 0%, #ffffff 100%);
}

.how-we-work-container{
  max-width:1100px;
  margin:auto;
}

/* HEADER */
.how-we-work-header{
  max-width:680px;
  margin-bottom:60px;
}

.how-we-work-title{
  font-size:clamp(2rem,5vw,3.2rem);
  margin-bottom:15px;
}

.how-we-work-subtitle{
  color:#555;
  line-height:1.7;
}

/* TIMELINE */
.how-we-work-timeline{
  display:grid;
  gap:25px;
  position:relative;
}

.how-we-work-timeline::before{
  content:"";
  position:absolute;
  left:30px;
  top:10px;
  bottom:10px;
  width:2px;
  background:linear-gradient(#2563eb,#93c5fd);
}

/* STEP */
.how-we-work-step{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
}

.how-we-work-step-number{
  width:70px;
  height:70px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  font-weight:bold;
}

.how-we-work-step-content{
  background:#fff;
  padding:25px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

/* 🔥 RIGHT ANIMATION */
.how-we-work-animate{
  opacity:0;
  transform:translateX(80px); /* from RIGHT */
  transition:all 0.7s ease;
}

.how-we-work-animate.show{
  opacity:1;
  transform:translateX(0);
}

/* DELAYS */
.delay-1{transition-delay:0.2s;}
.delay-2{transition-delay:0.4s;}
.delay-3{transition-delay:0.6s;}

/* RESPONSIVE */
@media(max-width:700px){
  .how-we-work-step{
    grid-template-columns:1fr;
  }

  .how-we-work-timeline::before{
    display:none;
  }
}