.steps {
    position: relative;
    margin-top: 3.5rem;
}

.steps::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 211, 238, 0.32) 8%,
        rgba(99, 102, 241, 0.32) 50%,
        rgba(192, 132, 252, 0.32) 92%,
        transparent 100%);
}

.step-row {
    display: grid;
    grid-template-columns: 1fr 76px 1fr;
    align-items: center;
}

.step-row + .step-row { margin-top: 3.25rem; }

.step-visual { grid-column: 1; grid-row: 1; }
.step-node { grid-column: 2; grid-row: 1; display: grid; place-items: center; }
.step-copy { grid-column: 3; grid-row: 1; padding-left: 0.75rem; }

.step-row:nth-child(even) .step-visual { grid-column: 3; }
.step-row:nth-child(even) .step-copy {
    grid-column: 1;
    padding-left: 0;
    padding-right: 0.75rem;
    text-align: right;
}

.step-number {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    color: #06121a;
}

.step-number-1 { background: linear-gradient(135deg, #7dd3fc, #22d3ee); box-shadow: 0 10px 30px rgba(34, 211, 238, 0.28); }
.step-number-2 { background: linear-gradient(135deg, #67e8f9, #818cf8); box-shadow: 0 10px 30px rgba(56, 189, 248, 0.28); }
.step-number-3 { background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.28); color: #fff; }
.step-number-4 { background: linear-gradient(135deg, #a78bfa, #8b5cf6); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.28); color: #fff; }
.step-number-5 { background: linear-gradient(135deg, #d8b4fe, #c084fc); box-shadow: 0 10px 30px rgba(192, 132, 252, 0.28); }

.step-title {
    font-size: 1.3rem;
    font-weight: 650;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}

.step-link {
    display: inline;
    color: #67e8f9;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(103, 232, 249, 0.55);
    padding-bottom: 0.05em;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.step-link:hover {
    color: #a5f3fc;
    border-bottom-color: rgba(165, 243, 252, 0.9);
}

.step-text {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    max-width: 30rem;
}

.step-row:nth-child(even) .step-text { margin-left: auto; }

.step-anim { padding: 1.1rem; }

.step-anim svg {
    display: block;
    width: 100%;
    height: auto;
}

.step-anim * {
    animation-duration: var(--dur, 7s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.step-anim.is-idle * { animation-play-state: paused; }

.step-1 { --dur: 7s; }
.step-2 { --dur: 9s; }
.step-3 { --dur: 10s; }
.step-4 { --dur: 8s; }
.step-5 { --dur: 7s; }

.step-anim text {
    font-size: 8px;
    font-weight: 500;
    fill: rgba(233, 237, 247, 0.6);
}

.step-anim .scene { opacity: 1; animation-name: step-scene; }

.step-anim .panel {
    fill: rgba(255, 255, 255, 0.03);
    stroke: rgba(255, 255, 255, 0.07);
}

.step-anim .field {
    fill: rgba(255, 255, 255, 0.05);
    stroke: rgba(255, 255, 255, 0.08);
}

.step-anim .field-focus {
    fill: none;
    stroke: rgba(34, 211, 238, 0.6);
    stroke-width: 1.4;
}

.step-anim .ph { fill: rgba(233, 237, 247, 0.28); }
.step-anim .val { fill: #e9edf7; clip-path: inset(0 0 0 0); }
.step-anim .caret { fill: #67e8f9; animation-name: caret-blink; animation-duration: 1s; animation-timing-function: linear; }
.step-anim .caret-wrap { opacity: 1; }

.step-anim .lbl {
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    fill: rgba(233, 237, 247, 0.34);
}

.step-anim .rule { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }

.step-anim .btn {
    fill: rgba(34, 211, 238, 0.16);
    stroke: rgba(34, 211, 238, 0.5);
    transform-box: fill-box;
    transform-origin: center;
}

.step-anim .btn-ok {
    fill: rgba(52, 211, 153, 0.18);
    stroke: rgba(52, 211, 153, 0.7);
    opacity: 1;
}

.step-anim .btn-label {
    text-anchor: middle;
    font-size: 9.5px;
    font-weight: 650;
    fill: #a5f3fc;
    opacity: 0;
}

.step-anim .pay-btn {
    transform-box: fill-box;
    transform-origin: center;
}

.step-anim .spinner {
    fill: none;
    stroke: #67e8f9;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 16 41;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.step-anim .check {
    fill: none;
    stroke: #6ee7b7;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 31;
    stroke-dashoffset: 0;
    opacity: 1;
}

.step-anim .cursor {
    fill: #ffffff;
    stroke: rgba(5, 7, 13, 0.6);
    stroke-width: 0.7;
    transform-box: fill-box;
    transform-origin: 0 0;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes step-scene {
    0% { opacity: 0; }
    3%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.step-1 .title {
    text-anchor: middle;
    font-size: 13px;
    font-weight: 700;
    fill: #ffffff;
}

.step-1 .hint { text-anchor: middle; font-size: 7.5px; fill: rgba(233, 237, 247, 0.3); }
.step-1 .hint-link { fill: rgba(103, 232, 249, 0.75); font-weight: 600; }
.step-1 .eye { fill: none; stroke: rgba(233, 237, 247, 0.3); stroke-width: 1.1; }
.step-1 .eye-pupil { fill: rgba(233, 237, 247, 0.3); }

.step-1 .val-a, .step-1 .val-b { font-size: 9px; }
.step-1 .val-b { letter-spacing: 0.08em; }
.step-1 .ph-a, .step-1 .ph-b { font-size: 9px; }

.step-1 .focus-a { opacity: 0; animation-name: s1-focus-a; }
.step-1 .focus-b { opacity: 0; animation-name: s1-focus-b; }
.step-1 .ph-a { opacity: 0; animation-name: s1-ph-a; }
.step-1 .ph-b { opacity: 0; animation-name: s1-ph-b; }
.step-1 .val-a { animation-name: s1-val-a; animation-timing-function: steps(9, end); }
.step-1 .val-b { animation-name: s1-val-b; animation-timing-function: steps(8, end); }
.step-1 .caret-a { opacity: 0; animation-name: s1-caret-a; }
.step-1 .caret-b { opacity: 0; animation-name: s1-caret-b; }
.step-1 .btn, .step-1 .pay-btn { animation-name: s1-press; }
.step-1 .btn-label { animation-name: s1-label; }
.step-1 .btn-ok { animation-name: s1-ok; }
.step-1 .check { animation-name: s1-check; }
.step-1 .cursor { animation-name: s1-cursor; }

.step-1 .spinner {
    animation-name: s1-spin-show, spin;
    animation-duration: var(--dur), 0.9s;
    animation-timing-function: ease, linear;
}

@keyframes s1-focus-a { 0%, 8% { opacity: 0; } 11%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes s1-focus-b { 0%, 37% { opacity: 0; } 40%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes s1-ph-a { 0%, 11% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes s1-ph-b { 0%, 41% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes s1-val-a { 0%, 12% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes s1-val-b { 0%, 42% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes s1-caret-a { 0%, 11% { opacity: 0; } 13%, 35% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes s1-caret-b { 0%, 41% { opacity: 0; } 43%, 61% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes s1-press { 0%, 64% { transform: scale(1); } 67% { transform: scale(0.95); } 71%, 100% { transform: scale(1); } }
@keyframes s1-label { 0%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes s1-spin-show { 0%, 68% { opacity: 0; } 72%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes s1-ok { 0%, 82% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes s1-check {
    0%, 84% { opacity: 0; stroke-dashoffset: 31; }
    87% { opacity: 1; stroke-dashoffset: 31; }
    94%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes s1-cursor {
    0%, 4% { opacity: 0; transform: translate(150px, 196px); }
    9% { opacity: 1; transform: translate(150px, 62px); }
    11% { opacity: 1; transform: translate(150px, 62px) scale(0.82); }
    13%, 34% { opacity: 1; transform: translate(150px, 62px); }
    37% { opacity: 1; transform: translate(150px, 100px); }
    39% { opacity: 1; transform: translate(150px, 100px) scale(0.82); }
    41%, 60% { opacity: 1; transform: translate(150px, 100px); }
    64% { opacity: 1; transform: translate(200px, 142px); }
    66% { opacity: 1; transform: translate(200px, 142px) scale(0.82); }
    69%, 92% { opacity: 1; transform: translate(200px, 142px); }
    97%, 100% { opacity: 0; transform: translate(200px, 142px); }
}

.step-2 .ph-from, .step-2 .ph-to, .step-2 .ph-epic { font-size: 9px; }
.step-2 .pick-name { font-size: 9px; font-weight: 600; fill: #e9edf7; }
.step-2 .val-epic { font-size: 9px; }
.step-2 .chev { fill: none; stroke: rgba(233, 237, 247, 0.35); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.step-2 .lbl-total { font-size: 9px; font-weight: 600; fill: rgba(233, 237, 247, 0.45); }
.step-2 .total { text-anchor: end; font-size: 17px; font-weight: 800; transform-box: fill-box; transform-origin: center; }
.step-2 .total-a { fill: rgba(233, 237, 247, 0.3); opacity: 0; animation-name: s2-total-a; }
.step-2 .total-b { fill: #67e8f9; opacity: 1; animation-name: s2-total-b; }

.step-2 .dd { transform-box: fill-box; transform-origin: top center; opacity: 0; }
.step-2 .dd-panel {
    fill: rgba(14, 20, 36, 0.92);
    stroke: rgba(255, 255, 255, 0.1);
}
.step-2 .dd-opt { font-size: 8px; fill: rgba(233, 237, 247, 0.72); }
.step-2 .dd-hl { fill: rgba(34, 211, 238, 0.16); stroke: rgba(34, 211, 238, 0.45); opacity: 0; }

.step-2 .ph-from { opacity: 0; animation-name: s2-ph-from; }
.step-2 .ph-to { opacity: 0; animation-name: s2-ph-to; }
.step-2 .pick-from { opacity: 1; animation-name: s2-pick-from; }
.step-2 .pick-to { opacity: 1; animation-name: s2-pick-to; }
.step-2 .dd-from { animation-name: s2-dd-from; }
.step-2 .dd-from .dd-hl { animation-name: s2-hl-from; }
.step-2 .dd-to { animation-name: s2-dd-to; }
.step-2 .dd-to .dd-hl { animation-name: s2-hl-to; }
.step-2 .focus-epic { opacity: 0; animation-name: s2-focus-epic; }
.step-2 .ph-epic { opacity: 0; animation-name: s2-ph-epic; }
.step-2 .val-epic { animation-name: s2-val-epic; animation-timing-function: steps(12, end); }
.step-2 .caret-epic { opacity: 1; animation-name: s2-caret-epic; }
.step-2 .cursor { animation-name: s2-cursor; }

@keyframes s2-ph-from { 0%, 23% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes s2-ph-to { 0%, 42% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes s2-pick-from { 0%, 23% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes s2-pick-to { 0%, 42% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes s2-dd-from {
    0%, 9% { opacity: 0; transform: scaleY(0.55); }
    12%, 25% { opacity: 1; transform: scaleY(1); }
    28%, 100% { opacity: 0; transform: scaleY(0.55); }
}
@keyframes s2-dd-to {
    0%, 31% { opacity: 0; transform: scaleY(0.55); }
    34%, 43% { opacity: 1; transform: scaleY(1); }
    46%, 100% { opacity: 0; transform: scaleY(0.55); }
}
@keyframes s2-hl-from {
    0%, 13% { opacity: 0; transform: translateY(0); }
    15%, 17% { opacity: 1; transform: translateY(0); }
    19%, 21% { opacity: 1; transform: translateY(26px); }
    23%, 26% { opacity: 1; transform: translateY(52px); }
    29%, 100% { opacity: 0; transform: translateY(52px); }
}
@keyframes s2-hl-to {
    0%, 35% { opacity: 0; transform: translateY(0); }
    37%, 39% { opacity: 1; transform: translateY(0); }
    41%, 44% { opacity: 1; transform: translateY(26px); }
    47%, 100% { opacity: 0; transform: translateY(26px); }
}
@keyframes s2-focus-epic { 0%, 49% { opacity: 0; } 52%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes s2-ph-epic { 0%, 52% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes s2-val-epic { 0%, 53% { clip-path: inset(0 100% 0 0); } 72%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes s2-caret-epic { 0%, 52% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes s2-total-a { 0%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes s2-total-b {
    0%, 42% { opacity: 0; transform: scale(0.6); }
    47% { opacity: 1; transform: scale(1.22); }
    52%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes s2-cursor {
    0%, 4% { opacity: 0; transform: translate(90px, 196px); }
    8% { opacity: 1; transform: translate(140px, 38px); }
    10% { opacity: 1; transform: translate(140px, 38px) scale(0.82); }
    12% { opacity: 1; transform: translate(140px, 38px); }
    15%, 17% { opacity: 1; transform: translate(64px, 72px); }
    19%, 21% { opacity: 1; transform: translate(64px, 98px); }
    23% { opacity: 1; transform: translate(64px, 124px); }
    25% { opacity: 1; transform: translate(64px, 124px) scale(0.82); }
    27% { opacity: 1; transform: translate(64px, 124px); }
    30% { opacity: 1; transform: translate(298px, 38px); }
    32% { opacity: 1; transform: translate(298px, 38px) scale(0.82); }
    34% { opacity: 1; transform: translate(298px, 38px); }
    37%, 39% { opacity: 1; transform: translate(222px, 72px); }
    41% { opacity: 1; transform: translate(222px, 98px); }
    43% { opacity: 1; transform: translate(222px, 98px) scale(0.82); }
    45% { opacity: 1; transform: translate(222px, 98px); }
    49% { opacity: 1; transform: translate(180px, 98px); }
    51% { opacity: 1; transform: translate(180px, 98px) scale(0.82); }
    53%, 94% { opacity: 1; transform: translate(180px, 98px); }
    98%, 100% { opacity: 0; transform: translate(180px, 98px); }
}

.step-3 .avatar { fill: rgba(129, 140, 248, 0.22); stroke: rgba(129, 140, 248, 0.5); }
.step-3 .avatar-letter { text-anchor: middle; font-size: 10px; font-weight: 700; fill: #c7d2fe; }
.step-3 .chat-name { font-size: 9.5px; font-weight: 650; fill: #ffffff; }
.step-3 .chat-status { font-size: 7.5px; fill: rgba(110, 231, 183, 0.85); }
.step-3 .online-dot { fill: #34d399; }
.step-3 .input-bar { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.07); }
.step-3 .send { fill: rgba(34, 211, 238, 0.16); stroke: rgba(34, 211, 238, 0.45); }
.step-3 .send-icon { fill: #67e8f9; }

.step-3 .bub-me { fill: rgba(34, 211, 238, 0.16); stroke: rgba(34, 211, 238, 0.34); }
.step-3 .bub-them { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.1); }
.step-3 .bub-text { font-size: 7.5px; fill: rgba(233, 237, 247, 0.88); }
.step-3 .dot { fill: rgba(233, 237, 247, 0.6); animation-name: s3-dot; animation-duration: 1.2s; }
.step-3 .dot-2 { animation-delay: 0.15s; }
.step-3 .dot-3 { animation-delay: 0.3s; }

.step-3 .msg { transform-box: fill-box; }
.step-3 .msgs { transform: translateY(-48px); animation-name: s3-scroll; }
.step-3 .msg-1 { opacity: 1; animation-name: s3-msg-1; }
.step-3 .msg-2 { opacity: 1; animation-name: s3-msg-2; }
.step-3 .msg-3 { opacity: 1; animation-name: s3-msg-3; }
.step-3 .msg-4 { opacity: 1; animation-name: s3-msg-4; }
.step-3 .msg-5 { opacity: 1; animation-name: s3-msg-5; }
.step-3 .msg-6 { opacity: 1; animation-name: s3-msg-6; }
.step-3 .typing-1 { opacity: 0; animation-name: s3-typing-1; }
.step-3 .typing-2 { opacity: 0; animation-name: s3-typing-2; }

@keyframes s3-scroll {
    0%, 52% { transform: translateY(0); }
    58%, 72% { transform: translateY(-22px); }
    78%, 100% { transform: translateY(-48px); }
}
@keyframes s3-msg-1 { 0%, 7% { opacity: 0; transform: translateY(8px); } 11%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes s3-msg-2 { 0%, 17% { opacity: 0; transform: translateY(8px); } 21%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes s3-msg-3 { 0%, 27% { opacity: 0; transform: translateY(8px); } 31%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes s3-msg-4 { 0%, 43% { opacity: 0; transform: translateY(8px); } 47%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes s3-msg-5 { 0%, 54% { opacity: 0; transform: translateY(8px); } 58%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes s3-msg-6 { 0%, 71% { opacity: 0; transform: translateY(8px); } 75%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes s3-typing-1 { 0%, 33% { opacity: 0; } 36%, 41% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes s3-typing-2 { 0%, 61% { opacity: 0; } 64%, 69% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes s3-dot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2.5px); }
}

.step-4 .pcard {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(129, 140, 248, 0.35);
}
.step-4 .chip { fill: url(#s4-chip); }
.step-4 .brand-a { fill: rgba(99, 102, 241, 0.7); }
.step-4 .brand-b { fill: rgba(192, 132, 252, 0.55); }
.step-4 .ph-num, .step-4 .val-num { font-size: 15px; letter-spacing: 0.02em; }
.step-4 .val-date, .step-4 .val-cvv { font-size: 11px; }
.step-4 .micro {
    font-size: 6px;
    font-weight: 600;
    letter-spacing: 0.12em;
    fill: rgba(233, 237, 247, 0.3);
}
.step-4 .micro-end, .step-4 .val-cvv { text-anchor: end; }

.step-4 .pay-card { opacity: 1; animation-name: s4-card; }
.step-4 .focus-num { opacity: 0; animation-name: s4-focus-num; }
.step-4 .focus-date { opacity: 0; animation-name: s4-focus-date; }
.step-4 .focus-cvv { opacity: 0; animation-name: s4-focus-cvv; }
.step-4 .ph-num { opacity: 0; animation-name: s4-ph-num; }
.step-4 .val-num { animation-name: s4-val-num; animation-timing-function: steps(4, end); }
.step-4 .val-date { animation-name: s4-val-date; animation-timing-function: steps(5, end); }
.step-4 .val-cvv { animation-name: s4-val-cvv; animation-timing-function: steps(3, end); }
.step-4 .btn, .step-4 .pay-btn { animation-name: s4-press; }
.step-4 .btn-label { animation-name: s4-label; }
.step-4 .btn-ok { animation-name: s4-ok; }
.step-4 .check { animation-name: s4-check; }
.step-4 .cursor { animation-name: s4-cursor; }

.step-4 .spinner {
    animation-name: s4-spin-show, spin;
    animation-duration: var(--dur), 0.9s;
    animation-timing-function: ease, linear;
}

@keyframes s4-card {
    0%, 3% { opacity: 0; transform: translateY(20px); }
    14%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes s4-focus-num { 0%, 15% { opacity: 0; } 18%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes s4-focus-date { 0%, 32% { opacity: 0; } 35%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes s4-focus-cvv { 0%, 46% { opacity: 0; } 49%, 56% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes s4-ph-num { 0%, 19% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes s4-val-num { 0%, 18% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes s4-val-date { 0%, 35% { clip-path: inset(0 100% 0 0); } 44%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes s4-val-cvv { 0%, 49% { clip-path: inset(0 100% 0 0); } 56%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes s4-press { 0%, 62% { transform: scale(1); } 65% { transform: scale(0.95); } 69%, 100% { transform: scale(1); } }
@keyframes s4-label { 0%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes s4-spin-show { 0%, 66% { opacity: 0; } 70%, 80% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes s4-ok { 0%, 80% { opacity: 0; } 88%, 100% { opacity: 1; } }
@keyframes s4-check {
    0%, 82% { opacity: 0; stroke-dashoffset: 31; }
    85% { opacity: 1; stroke-dashoffset: 31; }
    93%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes s4-cursor {
    0%, 6% { opacity: 0; transform: translate(170px, 196px); }
    14% { opacity: 1; transform: translate(238px, 84px); }
    16% { opacity: 1; transform: translate(238px, 84px) scale(0.82); }
    18%, 32% { opacity: 1; transform: translate(238px, 84px); }
    35% { opacity: 1; transform: translate(106px, 126px); }
    37% { opacity: 1; transform: translate(106px, 126px) scale(0.82); }
    39%, 46% { opacity: 1; transform: translate(106px, 126px); }
    49% { opacity: 1; transform: translate(286px, 126px); }
    51% { opacity: 1; transform: translate(286px, 126px) scale(0.82); }
    53%, 60% { opacity: 1; transform: translate(286px, 126px); }
    63% { opacity: 1; transform: translate(214px, 174px); }
    65% { opacity: 1; transform: translate(214px, 174px) scale(0.82); }
    68%, 92% { opacity: 1; transform: translate(214px, 174px); }
    97%, 100% { opacity: 0; transform: translate(214px, 174px); }
}

.step-5 .chip rect { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.09); }
.step-5 .chip text { text-anchor: middle; font-size: 8px; font-weight: 650; }
.step-5 .chip-1 text { fill: rgba(251, 191, 36, 0.85); }
.step-5 .chip-2 text { fill: rgba(165, 180, 252, 0.92); }
.step-5 .chip-3 text { fill: rgba(110, 231, 183, 0.95); }
.step-5 .chip-3 rect { fill: rgba(52, 211, 153, 0.12); stroke: rgba(52, 211, 153, 0.4); }
.step-5 .chip-1 { opacity: 0; animation-name: s5-chip-1; }
.step-5 .chip-2 { opacity: 0; animation-name: s5-chip-2; }
.step-5 .chip-3 { opacity: 1; animation-name: s5-chip-3; }

.step-5 .eta { text-anchor: end; font-size: 8.5px; fill: rgba(233, 237, 247, 0.4); }
.step-5 .eta-a { opacity: 0; animation-name: s5-eta-a; }
.step-5 .eta-b { fill: rgba(110, 231, 183, 0.8); opacity: 1; animation-name: s5-eta-b; }

.step-5 .rank-name {
    text-anchor: middle;
    font-size: 8.5px;
    font-weight: 600;
    fill: rgba(233, 237, 247, 0.55);
}

.step-5 .rank-from,
.step-5 .rank-to { transform-box: fill-box; transform-origin: center; }
.step-5 .rank-from { opacity: 0.5; animation-name: s5-rank-from; }
.step-5 .rank-to { opacity: 1; animation-name: s5-rank-to; }

.step-5 .arrow {
    fill: none;
    stroke: rgba(165, 180, 252, 0.75);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation-name: s5-arrow;
    animation-duration: 1.6s;
}
.step-5 .ar-2 { animation-delay: 0.18s; }
.step-5 .ar-3 { animation-delay: 0.36s; }

.step-5 .sparkle {
    fill: #f0abfc;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation-name: s5-spark;
}
.step-5 .sp-2 { animation-delay: 0.12s; }
.step-5 .sp-3 { animation-delay: 0.24s; }

.step-5 .pct { text-anchor: end; font-size: 9px; font-weight: 700; fill: rgba(233, 237, 247, 0.55); }
.step-5 .pct-1 { opacity: 0; animation-name: s5-pct-1; }
.step-5 .pct-2 { opacity: 0; animation-name: s5-pct-2; }
.step-5 .pct-3 { opacity: 0; animation-name: s5-pct-3; }
.step-5 .pct-4 { opacity: 0; animation-name: s5-pct-4; }
.step-5 .pct-5 { fill: #6ee7b7; opacity: 1; animation-name: s5-pct-5; }

.step-5 .bar-track { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.05); }
.step-5 .bar-fill {
    fill: url(#s5-bar);
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(1);
    animation-name: s5-fill;
    animation-timing-function: linear;
}
.step-5 .runner {
    fill: #ffffff;
    stroke: rgba(192, 132, 252, 0.75);
    stroke-width: 2;
    transform: translateX(296px);
    animation-name: s5-runner;
    animation-timing-function: linear;
}

.step-5 .log-box { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.08); }
.step-5 .log { font-size: 8px; fill: rgba(233, 237, 247, 0.72); }
.step-5 .log-1 { opacity: 0; animation-name: s5-log-1; }
.step-5 .log-2 { opacity: 0; animation-name: s5-log-2; }
.step-5 .log-3 { fill: rgba(233, 237, 247, 0.88); opacity: 1; animation-name: s5-log-3; }

.step-5 .log-dot { transform-box: fill-box; transform-origin: center; }
.step-5 .dot-live {
    fill: #67e8f9;
    opacity: 0;
    animation-name: s5-dot-live, s5-dot-pulse;
    animation-duration: var(--dur), 1.4s;
}
.step-5 .dot-done { fill: #34d399; opacity: 1; animation-name: s5-dot-done; }

@keyframes s5-chip-1 { 0%, 14% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes s5-chip-2 { 0%, 16% { opacity: 0; } 20%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes s5-chip-3 { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes s5-eta-a { 0%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes s5-eta-b { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes s5-fill { 0%, 8% { transform: scaleX(0); } 66%, 100% { transform: scaleX(1); } }
@keyframes s5-runner { 0%, 8% { transform: translateX(0); } 66%, 100% { transform: translateX(296px); } }
@keyframes s5-pct-1 { 0%, 14% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes s5-pct-2 { 0%, 15% { opacity: 0; } 17%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes s5-pct-3 { 0%, 31% { opacity: 0; } 33%, 47% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes s5-pct-4 { 0%, 48% { opacity: 0; } 50%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes s5-pct-5 { 0%, 64% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes s5-rank-to {
    0%, 64% { opacity: 0.18; transform: scale(0.85); }
    72% { opacity: 1; transform: scale(1.12); }
    78%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes s5-rank-from {
    0%, 66% { opacity: 1; transform: scale(1); }
    76%, 100% { opacity: 0.5; transform: scale(0.92); }
}
@keyframes s5-arrow {
    0%, 100% { opacity: 0.25; }
    40% { opacity: 0.95; }
}
@keyframes s5-spark {
    0%, 70% { opacity: 0; transform: scale(0.2); }
    78% { opacity: 1; transform: scale(1); }
    90%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes s5-log-1 { 0%, 8% { opacity: 0; } 12%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes s5-log-2 { 0%, 42% { opacity: 0; } 46%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes s5-log-3 { 0%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes s5-dot-live { 0%, 6% { opacity: 0; } 10%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes s5-dot-done { 0%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes s5-dot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

@media (max-width: 900px) {
    .steps::before { display: none; }
    .steps { margin-top: 2.5rem; }

    .step-row { grid-template-columns: 1fr; justify-items: center; }
    .step-row + .step-row { margin-top: 2.5rem; }

    .step-row .step-node,
    .step-row:nth-child(even) .step-node { grid-column: 1; grid-row: auto; order: 1; margin-bottom: 1rem; }

    .step-row .step-visual,
    .step-row:nth-child(even) .step-visual { grid-column: 1; grid-row: auto; order: 2; width: 100%; }

    .step-row .step-copy,
    .step-row:nth-child(even) .step-copy {
        grid-column: 1;
        grid-row: auto;
        order: 3;
        text-align: center;
        padding: 1.25rem 0 0;
    }

    .step-row:nth-child(even) .step-text { margin-left: auto; }
    .step-text { margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .step-anim * { animation: none !important; }
}