.how-it-works-section{contain:layout style;will-change:scroll-position;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);padding:100px 0;position:relative;overflow:hidden}.how-it-works-section:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#2563eb08 0%,#0000 50%),radial-gradient(circle at 80%,#2563eb08 0%,#0000 50%);position:absolute;inset:0;transform:translateZ(0)}.how-it-works-section .container{z-index:1;position:relative}.section-header{text-align:center;margin-bottom:60px}.section-title{color:#000;margin-bottom:16px;font-size:42px;font-weight:700;line-height:1.2}.section-subtitle{color:#64748b;max-width:600px;margin:0 auto;font-size:18px;line-height:1.6}.steps-grid{contain:layout;grid-template-columns:repeat(4,1fr);gap:30px;display:grid;position:relative;overflow:visible;transform:translateZ(0)}.step-card{text-align:center;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;background:#fff;border:1px solid #e2e8f0cc;border-radius:16px;padding:32px 24px;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.step-card:hover{border-color:#2563eb33;transform:translateY(-8px)translateZ(0);box-shadow:0 20px 25px -5px #00000014,0 10px 10px -5px #0000000a}.step-number-badge{z-index:100;pointer-events:auto;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .4s,box-shadow .4s;overflow:hidden;box-shadow:0 2px 8px #2563eb26;opacity:1!important;visibility:visible!important;width:48px!important;height:48px!important;display:flex!important;position:absolute!important;top:-20px!important;left:24px!important}.step-number-badge.inactive{opacity:1!important;background:#fff!important}.step-number-badge.active{transition:box-shadow .4s .4s,background .4s .4s;box-shadow:0 4px 16px #2563eb59;background:#2563eb!important}.step-number-badge:before{content:"";pointer-events:none;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-radius:50%;width:100%;height:100%;transition:transform .8s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;transform:translateY(100%);z-index:-1!important}.step-number-badge.active:before{transform:translateY(0)}@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.step-number{text-shadow:0 0 3px #fffc,0 0 6px #fff9,0 1px 2px #0003;pointer-events:none;min-width:20px;min-height:20px;line-height:1;transition:none;position:relative;color:#2563eb!important;z-index:10!important;opacity:1!important;visibility:visible!important;font-size:24px!important;font-weight:700!important;display:inline-block!important}.step-number-badge.active .step-number{text-shadow:0 0 4px #0006,0 1px 3px #0000004d,0 2px 6px #0003;pointer-events:none;color:#fff!important;z-index:10!important;opacity:1!important;visibility:visible!important}.step-number-badge.inactive .step-number{text-shadow:0 0 3px #ffffffe6,0 0 6px #ffffffb3,0 1px 2px #0000001a;pointer-events:none;color:#2563eb!important;opacity:1!important;visibility:visible!important;z-index:10!important}.step-card[data-step="3"] .step-number-badge,.step-number-badge[data-step-number="3"]{opacity:1!important;visibility:visible!important;display:flex!important}.step-card[data-step="3"] .step-number,.step-number-badge[data-step-number="3"] .step-number{opacity:1!important;visibility:visible!important;color:#2563eb!important;display:inline-block!important}.step-card[data-step="3"] .step-number-badge.active .step-number,.step-number-badge.active[data-step-number="3"] .step-number{color:#fff!important}.step-connector{z-index:0;background:linear-gradient(90deg,#cbd5e1 0%,#0000 100%);width:30px;height:2px;transition:background .6s;position:absolute;top:8px;right:-30px}.step-connector.active{background:linear-gradient(90deg,#2563eb 0%,#0000 100%)}.step-icon-container{justify-content:center;align-items:center;height:160px;margin:24px auto;display:flex;position:relative}.step-illustration{object-fit:contain;backface-visibility:hidden;will-change:transform,opacity;max-width:200px;transform:translateZ(0);width:auto!important;height:100%!important}.step-content{margin-top:16px}.step-title{color:#1e293b;margin-bottom:12px;font-size:20px;font-weight:700;line-height:1.3}.step-description{color:#64748b;margin:0;font-size:14px;line-height:1.6}@media (max-width:1200px){.steps-grid{grid-template-columns:repeat(2,1fr);gap:40px 30px}.step-connector,.step-card:nth-child(2n) .step-connector{display:none}}@media (max-width:768px){.how-it-works-section{padding:60px 0}.section-header{margin-bottom:40px}.section-title{font-size:32px}.section-subtitle{font-size:16px}.steps-grid{grid-template-columns:1fr;gap:30px;position:relative}.step-card{border-radius:12px;padding:28px 20px;box-shadow:0 2px 4px -1px #00000008;text-align:center!important}.step-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px #0000000f}.step-number-badge{justify-content:center;align-items:center;width:40px;height:40px;margin:0 auto 16px;display:flex;position:relative;top:auto;left:auto}.step-number-badge.active{animation:.5s ease-out badgePulseMobile}@keyframes badgePulseMobile{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.step-connector{display:none}.step-icon-container{height:120px;margin:12px auto}.step-illustration{max-width:160px!important}.step-title{margin-bottom:8px;font-size:16px}.step-description{font-size:13px;line-height:1.5}}@media (max-width:480px){.section-title{margin-bottom:12px;font-size:26px}.section-subtitle{font-size:14px}.section-header{margin-bottom:32px}.steps-grid{gap:24px}.step-card{border-radius:10px;padding:24px 16px}.step-card:hover{transform:translateY(-2px)}.step-number-badge{width:38px;height:38px;margin-bottom:12px}.step-number{font-size:18px}.step-icon-container{height:100px;margin:8px auto}.step-illustration{max-width:140px!important}.step-title{margin-bottom:6px;font-size:15px}.step-description{font-size:12px;line-height:1.4}}.step-number-badge[data-step-number]{opacity:1!important;visibility:visible!important;display:flex!important}.step-number-badge[data-step-number] .step-number{opacity:1!important;visibility:visible!important;color:#2563eb!important;display:block!important}.step-number-badge.active[data-step-number] .step-number{color:#fff!important}.step-card[data-step]{opacity:1!important;visibility:visible!important;display:block!important}