.how-section{
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: #faf3de;
}

.how-section .container{
  display:flex;
  flex-direction:column;
  gap:40px;
  max-width:1200px;
  margin:0 auto;
  padding:0 15px;
}

@media (min-width:992px){
  .how-section .container{
    flex-direction:row;
    align-items:flex-end;
    padding:0 30px;
  }
}

.content-wrapper{
  flex:1.5;
  padding-top:40px;
}

.header-section{ margin-bottom:3.5rem; }

.header-section .label{
  font-weight:700;
  font-size:1.25rem;
  text-transform:uppercase;
}

.header-section .title{
  font-weight:600;
  font-size:2.25rem;
  line-height:1.2;
  margin:1rem 0;
}
@media (min-width:768px){
  .header-section .title{ font-size:3rem; }
}
.header-section .subtitle{
  color:#4a5568;
  font-size:1.125rem;
}

/* Cards grid (DIV based) */
.cards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem .5rem;
}

@media (min-width:768px){
  .cards-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Card base */
.card{
  position:relative;
  overflow:visible;
}

.card-inner{
  padding:1rem;
  background:#fff;
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 6px rgba(0,0,0,.10);
  min-height:120px;

  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}

.card-title{
  margin:0 0 .5rem 0;
  font-weight:600;
  font-size:1.1rem;
  color:#111;
  transition:transform .25s ease;
}

.card-text{ margin:0; font-size:.95rem; color:#4a5568; }

/* Same offsets you had */
@media (min-width:768px){
  .card-1{ margin-bottom:12rem; }
  .card-2{ margin-top:11rem; }
  .card-3{ margin-bottom:11rem; }
  .card-4{ margin-top:8rem; }
}

/* Hover pop animation */
@keyframes popBounce{
  0%{ transform:translateY(0) scale(1); }
  55%{ transform:translateY(-10px) scale(1.03); }
  80%{ transform:translateY(-6px) scale(1.02); }
  100%{ transform:translateY(-8px) scale(1.025); }
}

.card:hover .card-inner,
.card:focus-within .card-inner{
  animation: popBounce .35s cubic-bezier(.2,.8,.2,1) both;
  box-shadow:0 22px 55px rgba(0,0,0,.16);
  border-color:rgba(0,0,0,.12);
}

.card:hover .card-title{ transform:translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .card:hover .card-inner,
  .card:focus-within .card-inner{
    animation:none !important;
    transform:translateY(-8px) scale(1.02);
  }
}

/* Phone side */
.phone-wrapper{
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  width:100%;
  order:-1;
}
@media (min-width:992px){ .phone-wrapper{ order:0; } }

.phone-mockup{
  background:#333;
  border:10px solid #222;
  border-radius:40px;
  box-shadow:0 20px 25px rgba(0,0,0,.25);
  width:100%;
  max-width:300px;
  height:550px;
  margin:0;
  overflow:hidden;
  position:relative;
  z-index:10;
}
.phone-mockup::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:15px;
  background:#222;
  border-radius:0 0 10px 10px;
  z-index:20;
}
.phone-screen{
  width:100%;
  height:100%;
  padding:20px 15px;
  background:#faf3df;
  overflow-y:auto;
}
.phone-header{
  text-align:center;
  font-size:1rem;
  font-weight:700;
  color:#4a5568;
  margin-bottom:20px;
}
.phone-card{
  background:#fff;
  border-radius:12px;
  padding:15px;
  margin-bottom:15px;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.phone-card-title{ font-weight:600; color:#1a202c; margin-bottom:5px; }
.phone-card-amount{ font-size:1.5rem; font-weight:700; color:#007bff; margin-bottom:10px; }
.phone-card-btn{
  display:block;
  width:100%;
  padding:8px;
  background:#007bff;
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  transition:background-color .2s ease;
}
.phone-card-btn:hover{ background:#0056b3; }

/* Decorative circle */
.float-circle{
  position:absolute;
  top:50px;
  right:5%;
  width:150px;
  height:150px;
  background:#e0e7ff;
  border-radius:50%;
  opacity:.5;
  z-index:5;
  pointer-events:none;
  display:none;
}
@media (min-width:992px){ .float-circle{ display:block; } }