/* ===== HOW IT WORKS PAGE ===== */

/* --- Page Header --- */
.hiw-header{
  padding:100px 0 56px;
  text-align:center;
  background:var(--c-bg-alt);
  border-bottom:1px solid var(--c-border);
}
.hiw-header h1{margin-bottom:16px;font-size:2.5rem}
.hiw-header .subtitle{
  max-width:640px;
  margin:0 auto;
  color:var(--c-text-muted);
  font-size:1.15rem;
}

/* --- Timeline --- */
.timeline{
  position:relative;
  display:flex;
  justify-content:center;
  gap:0;
  padding:32px 0;
}

/* Connecting line (horizontal on desktop) */
.timeline::before{
  content:'';
  position:absolute;
  top:44px;
  left:calc(50% - 340px);
  right:calc(50% - 340px);
  height:3px;
  background:var(--c-border);
  z-index:0;
}

.timeline-step{
  position:relative;
  flex:1;
  max-width:320px;
  text-align:center;
  padding:0 20px;
  z-index:1;
}

.timeline-num{
  width:64px;
  height:64px;
  background:var(--c-gradient);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  font-weight:700;
  color:var(--c-bg);
  margin:0 auto 24px;
  position:relative;
  box-shadow:0 0 0 6px var(--c-bg),0 0 24px rgba(0,217,255,.25);
}

.timeline-step h3{
  font-size:1.25rem;
  margin-bottom:12px;
}

.timeline-step p{
  color:var(--c-text-muted);
  font-size:.95rem;
  line-height:1.6;
}

.timeline-detail{
  margin-top:16px;
  display:inline-block;
  padding:6px 16px;
  background:rgba(0,255,136,.1);
  border-radius:50px;
  font-size:.8rem;
  font-weight:600;
  color:var(--c-green);
}

/* --- Process Detail Cards --- */
.process-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.process-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:32px;
  transition:var(--transition);
}
.process-card:hover{
  border-color:var(--c-cyan);
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.process-card-icon{
  width:48px;
  height:48px;
  background:rgba(0,217,255,.1);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:20px;
}

.process-card h3{
  font-size:1.15rem;
  margin-bottom:12px;
}

.process-card p{
  color:var(--c-text-muted);
  font-size:.95rem;
  line-height:1.6;
}

.process-card ul{
  margin-top:12px;
}

.process-card ul li{
  padding:6px 0;
  color:var(--c-text-muted);
  font-size:.9rem;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.process-card ul li::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--c-green);
  border-radius:50%;
  flex-shrink:0;
  margin-top:8px;
}

/* --- Requirements Checklist --- */
.requirements{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:40px;
}

.requirements h2{
  font-size:1.5rem;
  margin-bottom:8px;
}

.requirements > p{
  color:var(--c-text-muted);
  margin-bottom:24px;
}

.req-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.req-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  background:rgba(0,217,255,.04);
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:var(--transition);
}

.req-item:hover{
  border-color:var(--c-border);
}

.req-check{
  width:28px;
  height:28px;
  background:var(--c-gradient);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:700;
  color:var(--c-bg);
  flex-shrink:0;
}

.req-text strong{
  display:block;
  color:var(--c-white);
  font-size:.95rem;
  margin-bottom:2px;
}

.req-text span{
  color:var(--c-text-muted);
  font-size:.85rem;
}

/* --- Info Card (single-column highlight) --- */
.info-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:32px;
  transition:var(--transition);
}

.info-card:hover{
  border-color:var(--c-cyan);
}

.info-card h3{
  font-size:1.15rem;
  margin-bottom:12px;
}

.info-card p{
  color:var(--c-text-muted);
  font-size:.95rem;
  line-height:1.6;
}

.info-card ul{
  margin-top:12px;
}

.info-card ul li{
  padding:6px 0;
  color:var(--c-text-muted);
  font-size:.9rem;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.info-card ul li::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--c-green);
  border-radius:50%;
  flex-shrink:0;
  margin-top:8px;
}

/* --- CTA Section --- */
.hiw-cta{
  background:var(--c-gradient);
  border-radius:var(--radius-lg);
  padding:56px 48px;
  text-align:center;
}

.hiw-cta h2{
  color:var(--c-bg);
  margin-bottom:12px;
}

.hiw-cta p{
  color:rgba(26,26,46,.7);
  margin-bottom:28px;
  font-size:1.1rem;
}

.hiw-cta .btn{
  background:var(--c-bg);
  color:var(--c-white);
}
.hiw-cta .btn:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

.hiw-cta-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.hiw-cta-buttons .btn-outline{
  background:transparent;
  color:var(--c-bg);
  border:2px solid var(--c-bg);
}
.hiw-cta-buttons .btn-outline:hover{
  background:rgba(26,26,46,.15);
}

/* ===== RESPONSIVE: 768px ===== */
@media(max-width:768px){
  .hiw-header{padding:72px 0 40px}
  .hiw-header h1{font-size:2rem}

  /* Vertical timeline */
  .timeline{
    flex-direction:column;
    align-items:stretch;
    padding:24px 0;
    gap:40px;
  }

  .timeline::before{
    top:0;
    bottom:0;
    left:32px;
    right:auto;
    width:3px;
    height:auto;
  }

  .timeline-step{
    max-width:none;
    text-align:left;
    padding:0 0 0 80px;
  }

  .timeline-num{
    position:absolute;
    left:0;
    top:0;
    width:56px;
    height:56px;
    font-size:1.4rem;
    margin:0;
    box-shadow:0 0 0 5px var(--c-bg),0 0 20px rgba(0,217,255,.2);
  }

  .timeline-detail{
    display:inline-block;
  }

  .process-cards{grid-template-columns:1fr}
  .req-grid{grid-template-columns:1fr}
  .hiw-cta{padding:40px 24px}
}

/* ===== RESPONSIVE: 480px ===== */
@media(max-width:480px){
  .hiw-header{padding:56px 0 32px}
  .hiw-header h1{font-size:1.65rem}
  .hiw-header .subtitle{font-size:1rem}

  .timeline-step{padding-left:68px}
  .timeline::before{left:26px}
  .timeline-num{
    width:48px;
    height:48px;
    font-size:1.2rem;
  }

  .requirements{padding:24px}
  .process-card{padding:24px}
  .info-card{padding:24px}

  .hiw-cta-buttons{flex-direction:column}
  .hiw-cta-buttons .btn{width:100%}
}