.how-it-works .step-card {
    opacity: 1;
    transform: none;
    transition: box-shadow 200ms ease;
}
.how-it-works .step-card:hover { box-shadow: 0 16px 36px #3f356c0a; }
.how-it-works .section-header { margin-bottom: 3rem; }
.how-it-works .step-illustration {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 300 / 210;
    margin: 0 auto 1.25rem;
}
.how-it-works .step-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.how-it-works .step-number { width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 14px; }
.how-it-works .step-card h3 { font-size: 1.15rem; }
.steps-ui-heading { fill: #46516b; font-size: 12px; font-weight: 650; }
.steps-ui-label { fill: #667086; font-size: 10px; font-weight: 500; }
.steps-ui-muted { fill: #929bb0; font-size: 10px; }
.steps-ui-small { font-size: 8.5px; font-weight: 550; }
.steps-format-text { fill: #796b9c; font-size: 10px; font-weight: 650; }
.steps-button-text { fill: white; font-size: 10px; font-weight: 600; }

.steps-select-cursor, .steps-layer-cursor, .steps-export-cursor { opacity: 0; }
.steps-selection { transform-origin: 74px 86px; }
.steps-format-dxf, .steps-generate-label, .steps-export-progress, .steps-preview-placeholder { opacity: 0; }
.steps-export-progress { transform-origin: 89px 142px; }
.steps-export-button { transform-origin: 150px 165px; }

.how-it-works[data-enhanced="true"] .steps-animated {
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-play-state: paused;
}
.how-it-works[data-enhanced="true"] [data-playing="true"] .steps-animated { animation-play-state: running; }
.how-it-works[data-enhanced="true"] .steps-selection { animation-name: steps-select; }
.how-it-works[data-enhanced="true"] .steps-select-cursor { animation-name: steps-select-cursor; }
.how-it-works[data-enhanced="true"] .steps-selection-label { animation-name: steps-selection-label; }
.how-it-works[data-enhanced="true"] .steps-option-buildings { animation-name: steps-option-buildings; }
.how-it-works[data-enhanced="true"] .steps-option-water { animation-name: steps-option-water; }
.how-it-works[data-enhanced="true"] .steps-option-green { animation-name: steps-option-green; }
.how-it-works[data-enhanced="true"] .steps-layer-cursor { animation-name: steps-layer-cursor; }
.how-it-works[data-enhanced="true"] .steps-format-dxf { animation-name: steps-format-dxf; }
.how-it-works[data-enhanced="true"] .steps-format-svg { animation-name: steps-format-svg; }
.how-it-works[data-enhanced="true"] .steps-generate-label { animation-name: steps-generate-label; }
.how-it-works[data-enhanced="true"] .steps-download-label, .how-it-works[data-enhanced="true"] .steps-export-check { animation-name: steps-download-label; }
.how-it-works[data-enhanced="true"] .steps-export-cursor { animation-name: steps-export-cursor; }
.how-it-works[data-enhanced="true"] .steps-export-progress { animation-name: steps-export-progress; }
.how-it-works[data-enhanced="true"] .steps-export-button { animation-name: steps-export-button; }
.how-it-works[data-enhanced="true"] .steps-export-diagram { animation-name: steps-export-preview; }
.how-it-works[data-enhanced="true"] .steps-preview-placeholder { animation-name: steps-generate-label; }

@keyframes steps-select {
    0%, 12% { opacity: 0; transform: scale(.01); }
    15% { opacity: 1; transform: scale(.01); }
    35%, 86% { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes steps-select-cursor {
    0%, 5% { opacity: 0; transform: translate(257px, 38px); }
    9% { opacity: 1; transform: translate(257px, 38px); }
    15% { opacity: 1; transform: translate(74px, 86px); }
    35%, 41% { opacity: 1; transform: translate(211px, 172px); }
    47%, 100% { opacity: 0; transform: translate(217px, 178px); }
}
@keyframes steps-selection-label {
    0%, 35% { opacity: 0; transform: translateY(3px); }
    40%, 86% { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes steps-option-buildings { 0%, 16% { opacity: 0; } 21%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes steps-option-water { 0%, 32% { opacity: 0; } 37%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes steps-option-green { 0%, 48% { opacity: 0; } 53%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes steps-layer-cursor {
    0%, 8% { opacity: 0; transform: translate(34px, 58px); }
    12%, 23% { opacity: 1; transform: translate(34px, 58px); }
    30%, 39% { opacity: 1; transform: translate(34px, 118px); }
    46%, 55% { opacity: 1; transform: translate(34px, 148px); }
    60%, 100% { opacity: 0; transform: translate(45px, 158px); }
}
@keyframes steps-format-dxf { 0%, 16% { opacity: 1; } 21%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes steps-format-svg { 0%, 16% { opacity: 0; } 21%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes steps-generate-label { 0%, 55% { opacity: 1; } 60%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes steps-download-label { 0%, 55% { opacity: 0; transform: translateY(2px); } 60%, 86% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes steps-export-cursor {
    0%, 8% { opacity: 0; transform: translate(114px, 43px); }
    12%, 23% { opacity: 1; transform: translate(114px, 43px); }
    32%, 39% { opacity: 1; transform: translate(158px, 165px); }
    44%, 60% { opacity: 0; transform: translate(171px, 180px); }
    65%, 72% { opacity: 1; transform: translate(158px, 165px); }
    78%, 100% { opacity: 0; transform: translate(174px, 180px); }
}
@keyframes steps-export-button { 0%, 32%, 38%, 65%, 71%, 100% { transform: scale(1); } 35%, 68% { transform: scale(.96); } }
@keyframes steps-export-preview { 0%, 55% { opacity: 0; transform: translateY(3px); } 60%, 86% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes steps-export-progress {
    0%, 37% { opacity: 0; transform: scaleX(.01); }
    40% { opacity: 1; transform: scaleX(.01); }
    56% { opacity: 1; transform: scaleX(1); }
    60%, 100% { opacity: 0; transform: scaleX(1); }
}
@media (max-width: 1024px) {
    .how-it-works .steps-grid { max-width: 420px; margin: 0 auto; gap: 24px; }
}
@media (max-width: 480px) {
    .how-it-works .step-card { padding: 24px 20px; }
    .how-it-works .step-illustration { max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
    .how-it-works .steps-animated { animation: none !important; }
    .how-it-works .step-card { transition: none; }
}