/* landing/how.css — the dark→warm gradient bridge and the "How it works" band
   (4 animated step visuals + shared section heading styles used across bands). */

/* ═══ GRADIENT BRIDGE ═══ */
.bridge{height:120px;background:linear-gradient(to bottom,var(--dark) 0%,var(--warm) 100%)}

/* ═══ HOW IT WORKS ═══ */
.how{background:var(--warm);padding:6rem 2.5rem 7rem}
.section-eyebrow{font-size:0.68rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper);text-align:center;margin-bottom:1rem}
.section-h{font-family:var(--font-d);font-weight:800;font-size:3.4rem;letter-spacing:-0.03em;line-height:1;text-align:center;color:var(--ink);max-width:18ch;margin:0 auto}
.section-h em{font-style:italic;color:var(--copper);font-weight:400}
.section-sub{font-size:1.05rem;color:#5C5040;line-height:1.6;max-width:52ch;margin:1.2rem auto 0;text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:4rem;max-width:1100px;margin-left:auto;margin-right:auto}
.step{display:flex;flex-direction:column;align-items:center;gap:0.9rem;position:relative}
.step::after{content:'';position:absolute;top:56px;left:calc(50% + 48px);right:calc(-50% + 48px);height:1px;background:repeating-linear-gradient(to right,var(--warm3) 0 5px,transparent 5px 10px)}
.step:last-child::after{display:none}

.step-visual{
  width:96px;height:96px;border-radius:20px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(45,38,32,0.2);
  flex-shrink:0;
}
.step-visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 30%,rgba(182,108,69,0.15),transparent 60%);
}

.sv1-chip{
  width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(182,108,69,0.6);
  background:rgba(182,108,69,0.1);
  display:grid;place-items:center;position:relative;z-index:1;
}
.sv1-chip span{font-size:1.1rem}
.sv1-ring{
  position:absolute;border-radius:50%;
  border:1.5px solid rgba(182,108,69,0.4);
  animation:sv-ring 2.4s ease-out infinite;
}
.sv1-ring:nth-child(1){width:52px;height:52px;animation-delay:0s}
.sv1-ring:nth-child(2){width:68px;height:68px;animation-delay:0.6s}
.sv1-ring:nth-child(3){width:84px;height:84px;animation-delay:1.2s}
@keyframes sv-ring{
  0%{opacity:0.7;transform:scale(0.8)}
  100%{opacity:0;transform:scale(1.2)}
}

.sv2-screen{
  width:68px;background:rgba(249,244,235,0.08);border-radius:6px;
  padding:7px;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;
}
.sv2-line{height:4px;border-radius:2px;background:rgba(249,244,235,0.25)}
.sv2-line.active{background:var(--copper);animation:sv-type 2s ease-in-out infinite}
.sv2-cursor{
  width:2px;height:10px;background:var(--copper);border-radius:1px;
  animation:sv-blink 1s ease-in-out infinite;
  display:inline-block;
}
@keyframes sv-type{0%,100%{width:30%}50%{width:75%}}
@keyframes sv-blink{0%,100%{opacity:1}50%{opacity:0}}

.sv3-phone{
  width:32px;height:52px;border-radius:6px;
  border:2px solid rgba(249,244,235,0.4);
  background:rgba(249,244,235,0.06);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  animation:sv-phone-tap 3s ease-in-out infinite;
}
.sv3-ping{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:var(--copper);top:-4px;right:-4px;
  animation:sv-ping 1.5s ease-out infinite;
}
.sv3-ping::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--copper);
  animation:sv-ping-ring 1.5s ease-out infinite;
}
@keyframes sv-phone-tap{0%,30%,100%{transform:translateY(0)}15%{transform:translateY(6px)}}
@keyframes sv-ping{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes sv-ping-ring{0%{transform:scale(1);opacity:0.8}100%{transform:scale(2.5);opacity:0}}

.sv4-wrap{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.sv4-dot{
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(249,244,235,0.4);
  background:rgba(249,244,235,0.08);
  flex-shrink:0;
}
.sv4-dot.active{background:var(--copper);border-color:var(--copper);animation:sv4-pulse 1.6s ease-in-out infinite}
@keyframes sv4-pulse{0%,100%{box-shadow:0 0 0 0 rgba(182,108,69,0.4)}50%{box-shadow:0 0 0 8px rgba(182,108,69,0)}}
.sv4-line{
  flex:1;height:2px;background:rgba(249,244,235,0.15);position:relative;overflow:hidden;border-radius:1px;
}
.sv4-line::after{
  content:'';position:absolute;inset-y:0;left:-100%;width:100%;
  background:linear-gradient(to right,transparent,var(--copper),transparent);
  animation:sv4-flow 2s ease-in-out infinite;
}
@keyframes sv4-flow{0%{left:-100%}100%{left:100%}}

.step-num-wrap{display:flex;justify-content:center}
.step-num{
  width:36px;height:36px;border-radius:50%;
  background:rgba(45,38,32,0.06);border:1px solid var(--warm3);
  color:var(--muted);
  font-family:var(--font-d);font-weight:800;font-size:0.85rem;
  display:grid;place-items:center;
}
.step-h{font-family:var(--font-d);font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;color:var(--ink);text-align:center}
.step-p{font-size:0.86rem;color:#5C5040;line-height:1.55;text-align:center}