/* =============================== HOW — rail + synchro =============================== */
.how-rail{padding:24px;border-radius:16px;position:relative;overflow:hidden}
.how-steps{position:relative;display:grid;gap:10px;margin-top:12px}
@media (max-width:991.98px){
  .how-steps{grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
  .how-step{scroll-snap-align:start}
}
.how-step{
  display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;text-align:left;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--feal-text);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease
}
.how-step:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.how-step.active{background:rgba(24,178,165,.15);border-color:rgba(24,178,165,.35);box-shadow:0 0 0 1px rgba(24,178,165,.25),0 10px 30px rgba(0,0,0,.28)}
.how-num{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;font-weight:800;background:var(--feal-primary);color:#fff;box-shadow:0 0 18px rgba(24,178,165,.45)}
.how-copy strong{display:block;font-weight:700}
.how-copy small{display:block;color:var(--feal-muted)}
.how-progress{position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:999px;margin-top:10px;overflow:hidden}
.how-progress span{display:block;height:100%;width:33.333%;background:linear-gradient(90deg,var(--feal-primary),var(--feal-secondary));box-shadow:0 0 18px rgba(24,178,165,.6);transform:translateX(0%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media (min-width:992px){
  .how-steps{padding-left:18px}
  .how-progress{inset:0 auto 0 0;width:3px;height:auto;margin:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
  .how-progress span{width:100%;height:33.333%;transform:translateY(0%)}
}
.how-caption{text-align:center;margin-top:10px;color:var(--feal-muted);font-size:.95rem}


/* =============================== Swiper phone =============================== */
.demo-swiper{width:100%;padding:8px 0}
.phone-slide{
  aspect-ratio:1/1;max-width:420px;margin:0 auto;padding:10px;border-radius:28px;background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 34px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center
}
.phone-slide img{width:100%;height:100%;object-fit:contain;border-radius:20px;background:#fff}
.demo-swiper .swiper-button-prev,.demo-swiper .swiper-button-next{color:var(--feal-primary)}
.demo-swiper .swiper-pagination-bullet{background:var(--feal-secondary);opacity:.4}
.demo-swiper .swiper-pagination-bullet-active{opacity:1;transform:scale(1.15)}