.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;background:#fff;border:2px solid #cbd5e1;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .4s;display:flex;position:absolute;top:-20px;left:24px;overflow:hidden;box-shadow:0 2px 8px #2563eb26}.step-number-badge.inactive{background:#fff;border-color:#cbd5e1}.step-number-badge.active{background:#2563eb;border-color:#2563eb;box-shadow:0 4px 16px #2563eb59}.step-number{color:#64748b;z-index:10;pointer-events:none;font-size:24px;font-weight:700;line-height:1;transition:color .4s;position:relative}.step-number-badge.active .step-number{color:#fff}.step-icon-container{justify-content:center;align-items:center;height:160px;margin:24px auto;display:flex;position:relative}.step-illustration{-o-object-fit:contain;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}}@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-card[data-step]{opacity:1!important;visibility:visible!important;display:block!important}
