/* how-it-works.css — the 3-step "How it works" section. Loaded after main.css. */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:var(--maxw);margin:0 auto}
.steps>*{min-width:0}
.step{background:linear-gradient(180deg,var(--surface),rgba(20,40,60,.5));border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px;position:relative;transition:transform .3s ease,border-color .3s ease}
.step:hover{border-color:rgba(130,200,255,.4)}
.step--active{border-color:var(--magenta);box-shadow:0 0 0 1px rgba(220,70,195,.35)}
.step__n{font-family:var(--font-d);font-weight:700;font-size:15px;width:40px;height:40px;display:grid;place-items:center;
  border-radius:12px;color:#170a16;background:linear-gradient(180deg,var(--magenta-2),var(--magenta));margin-bottom:16px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px}

@media (prefers-reduced-motion: no-preference){
  .step:hover{transform:translateY(-4px)}
}
@media (max-width:920px){
  .steps{grid-template-columns:1fr}
}