/* Блок «4 шага до денег» с анимацией пути заявки (вариант светлый C). Цикл 14 с, синхронно с SVG. */
.put { border-radius: var(--r); background: linear-gradient(90deg, #f3f8f1, #fbfbf7 55%, #fdf5e2); border: 1px solid rgba(255,255,255,.8); overflow: hidden; }
.put__anim { height: 240px; overflow: hidden; }
.put__svg { display: block; width: 100%; height: 100%; }
.put__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 0 22px; }
.put__s { padding: 4px 22px 0; text-align: center; }
.put__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-main); color: #fff; font-weight: 800; font-size: 15px; }
.put__s h3 { font-size: 17px; font-weight: 700; margin: 10px 0 0; }
.put__s p { margin: 6px auto 0; font-size: 14px; color: var(--muted); max-width: 250px; }
.put__s .put__n { animation: put-n1 14s ease infinite; }
@keyframes put-n1 { 0%, 2%, 19% { background: var(--c-accent); color: var(--c-main); transform: scale(1.12); } 21% { background: var(--c-main); color: #fff; transform: scale(1); } }
.put__s:nth-child(1) .put__n { animation-name: put-n1; }
@keyframes put-n2 { 0% { background: var(--c-main); color: #fff; transform: scale(1); } 20% { background: var(--c-main); color: #fff; transform: scale(1); } 22%, 45% { background: var(--c-accent); color: var(--c-main); transform: scale(1.12); } 47% { background: var(--c-main); color: #fff; transform: scale(1); } }
.put__s:nth-child(2) .put__n { animation-name: put-n2; }
@keyframes put-n3 { 0% { background: var(--c-main); color: #fff; transform: scale(1); } 46% { background: var(--c-main); color: #fff; transform: scale(1); } 48%, 71% { background: var(--c-accent); color: var(--c-main); transform: scale(1.12); } 73% { background: var(--c-main); color: #fff; transform: scale(1); } }
.put__s:nth-child(3) .put__n { animation-name: put-n3; }
@keyframes put-n4 { 0% { background: var(--c-main); color: #fff; transform: scale(1); } 72% { background: var(--c-main); color: #fff; transform: scale(1); } 74%, 99% { background: var(--c-accent); color: var(--c-main); transform: scale(1.12); } 100% { background: var(--c-main); color: #fff; transform: scale(1); } }
.put__s:nth-child(4) .put__n { animation-name: put-n4; }
@media (max-width: 767px) {
  .put__anim { height: auto; }
  .put__svg { width: 250%; height: auto; animation: put-pan 14s ease-in-out infinite; }
  .put__steps { grid-template-columns: 1fr; gap: 14px; padding: 6px 18px 20px; }
  .put__s { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; text-align: left; padding: 0; }
  .put__n { grid-row: span 2; }
  .put__s h3 { margin: 4px 0 0; } .put__s p { margin: 2px 0 0; max-width: none; }
}
@keyframes put-pan { 0%, 12% { transform: translateX(0); } 22%, 42% { transform: translateX(-17.5%); } 50%, 66% { transform: translateX(-42.5%); } 76%, 95% { transform: translateX(-60%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .put__svg, .put__n { animation: none !important; } }