.how-it-works{padding:100px 0;background:linear-gradient(180deg,#fff 0,#fef3f2 50%,#fff7ed 100%);position:relative;overflow:hidden}.how-it-works::before{content:'';position:absolute;width:800px;height:800px;background:radial-gradient(circle,rgba(249,115,22,.06) 0,transparent 70%);border-radius:50%;top:-300px;right:-300px;animation:25s ease-in-out infinite float}.how-it-works::after{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,.05) 0,transparent 70%);border-radius:50%;bottom:-200px;left:-200px;animation:20s ease-in-out infinite reverse float}@keyframes float{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(40px,-40px) rotate(120deg)}66%{transform:translate(-30px,30px) rotate(240deg)}}.section-container{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:1}.how-it-works .section-header{text-align:center;margin-bottom:80px}.how-it-works .section-badge{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,#f97316 0,#ea580c 100%);border-radius:50px;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:24px;box-shadow:0 8px 24px rgba(249,115,22,.3);animation:2.5s ease-in-out infinite pulse}@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(249,115,22,.3)}50%{transform:scale(1.03);box-shadow:0 10px 28px rgba(249,115,22,.45)}}.how-it-works .section-title{font-size:56px;font-weight:900;color:#1a1a1a;margin-bottom:20px;line-height:1.15}.how-it-works .section-title .gradient{background:linear-gradient(135deg,#f97316 0,#ea580c 50%,#dc2626 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block}.how-it-works .section-subtitle{font-size:19px;color:#6b7280;max-width:700px;margin:0 auto;line-height:1.7}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}.step-card{position:relative;background:#fff;border-radius:24px;overflow:hidden;transition:.4s cubic-bezier(.4, 0, .2, 1);cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.04)}.step-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#f97316 0,#ea580c 100%);opacity:0;transition:opacity .4s;z-index:1}.step-card:hover::before{opacity:.95}.step-card:hover{transform:translateY(-12px);box-shadow:0 24px 48px rgba(249,115,22,.2),0 12px 24px rgba(0,0,0,.1);border-color:rgba(249,115,22,.2)}.step-number{position:absolute;top:20px;left:20px;width:56px;height:56px;background:linear-gradient(135deg,#f97316 0,#ea580c 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#fff;box-shadow:0 8px 20px rgba(249,115,22,.4),inset 0 -2px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);transition:.4s cubic-bezier(.4, 0, .2, 1);z-index:10}.step-card:hover .step-number{transform:scale(1.1) rotate(5deg);background:#fff;color:#f97316;box-shadow:0 10px 24px rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.15)}.step-image{width:100%;height:280px;display:flex;align-items:center;justify-content:center;padding:60px 30px 30px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(249,115,22,.04) 0,transparent 100%);z-index:2}.step-image img{width:100%;height:100%;object-fit:contain;transition:.5s cubic-bezier(.34, 1.56, .64, 1);filter:drop-shadow(0 8px 24px rgba(0, 0, 0, .1))}.step-card:hover .step-image img{transform:scale(1.05) translateY(-8px);filter:drop-shadow(0 12px 32px rgba(255, 255, 255, .3)) brightness(1.1)}.step-card h3,.step-card p{padding:0 24px;position:relative;z-index:2}.step-title{font-size:22px;font-weight:800;color:#1a1a1a;margin-bottom:12px;text-align:center;transition:.3s;line-height:1.3}.step-card:hover .step-title{color:#fff;transform:translateY(-2px)}.step-description{font-size:15px;color:#6b7280;line-height:1.6;text-align:center;margin:0;padding-bottom:28px;transition:.3s}.step-card:hover .step-description{color:rgba(255,255,255,.95)}.step-card::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:4px;background:linear-gradient(90deg,transparent,#f97316,transparent);opacity:0;transition:opacity .3s;z-index:2}.step-card:hover::after{opacity:.6}.step-card:first-child .step-image{background:linear-gradient(180deg,rgba(249,115,22,.05) 0,transparent 100%)}.step-card:nth-child(2) .step-image{background:linear-gradient(180deg,rgba(59,130,246,.05) 0,transparent 100%)}.step-card:nth-child(3) .step-image{background:linear-gradient(180deg,rgba(16,185,129,.05) 0,transparent 100%)}.step-card:nth-child(4) .step-image{background:linear-gradient(180deg,rgba(139,92,246,.05) 0,transparent 100%)}@media (max-width:1200px){.steps-grid{grid-template-columns:repeat(2,1fr);gap:28px}.how-it-works .section-title{font-size:48px}}@media (max-width:768px){.how-it-works{padding:80px 0}.how-it-works .section-title{font-size:40px}.how-it-works .section-subtitle{font-size:17px}.steps-grid{grid-template-columns:1fr;gap:32px;max-width:450px;margin:0 auto}.step-card{border-radius:20px}.step-image{height:260px}}@media (max-width:480px){.how-it-works{padding:60px 0}.how-it-works .section-title{font-size:36px}.how-it-works .section-subtitle{font-size:16px}.step-number{width:48px;height:48px;font-size:20px;top:16px;left:16px}.step-title{font-size:20px}.step-description{font-size:14px}.step-image{height:220px;padding:50px 20px 20px}}@media (prefers-reduced-motion:reduce){.how-it-works::after,.how-it-works::before,.step-card,.step-card::after,.step-card::before,.step-image img,.step-number{animation:none!important;transition:none!important}.step-card:hover{transform:none}}.step-card.will-animate{opacity:0;transform:translateY(30px) scale(.96);transition:opacity .6s ease-out,transform .6s ease-out}.step-card.animate-in{opacity:1;transform:translateY(0) scale(1)}.step-card:first-child.will-animate{transition-delay:0s}.step-card:nth-child(2).will-animate{transition-delay:0.1s}.step-card:nth-child(3).will-animate{transition-delay:0.2s}.step-card:nth-child(4).will-animate{transition-delay:0.3s}@media (prefers-reduced-motion:reduce){.step-card.will-animate{opacity:1;transform:none;transition:none}}