.how-it-works-section{padding:8rem 5%;background:linear-gradient(135deg,#fafbff,#f5f7ff);position:relative;overflow:hidden;font-family:Inter,sans-serif}.how-it-works-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="2" fill="rgba(139,92,246,0.1)"/></svg>');opacity:.4}.how-it-works-container{max-width:1400px;margin:0 auto;position:relative;z-index:1}.how-it-works-header{text-align:center;margin-bottom:4rem;position:relative}.how-it-works-header h2{font-size:3.5rem;font-weight:900;margin-bottom:1rem;color:#1f2937}.how-it-works-header h2 .highlight-text{background:linear-gradient(135deg,#8b5cf6,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.how-it-works-header p{font-size:1.3rem;color:#6b7280}.steps-away-badge{position:absolute;top:-30px;right:10%;font-family:Brush Script MT,cursive;font-size:1.8rem;color:#8b5cf6;transform:rotate(-5deg);animation:wiggle 3s ease-in-out infinite}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(-8deg)}}.steps-away-badge:after{content:"→";display:inline-block;margin-left:.5rem;animation:arrowBounce 1.5s ease-in-out infinite}@keyframes arrowBounce{0%,to{transform:translate(0)}50%{transform:translate(10px)}}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:4rem}.step-card{background:#fff;border:2px solid #e5e7eb;border-radius:30px;overflow:hidden;transition:all .5s cubic-bezier(.68,-.55,.265,1.55);opacity:0;transform:translateY(50px);box-shadow:0 10px 40px #0000000d}.step-card.visible{opacity:1;transform:translateY(0)}.step-card:hover{transform:translateY(-20px) scale(1.03);border-color:#8b5cf6;box-shadow:0 30px 80px #8b5cf633}.step-image{width:100%;height:280px;background:linear-gradient(135deg,#f0f4ff,#e0e7ff);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.step-card:nth-child(1) .step-image{background:linear-gradient(135deg,#fef3f2,#fee2e2)}.step-card:nth-child(2) .step-image{background:linear-gradient(135deg,#f0fdf4,#dcfce7)}.step-card:nth-child(3) .step-image{background:linear-gradient(135deg,#fffbeb,#fef3c7)}.step-illustration{font-size:8rem;animation:float 4s ease-in-out infinite}.step-card:nth-child(2) .step-illustration{animation-delay:.5s}.step-card:nth-child(3) .step-illustration{animation-delay:1s}.connect-mockup,.usage-mockup,.organized-mockup{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 20px 60px #00000026;width:100%;max-width:320px;font-family:Inter,sans-serif}.mockup-header{text-align:center;border-bottom:2px solid #f3f4f6;padding-bottom:1rem}.integration-option{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:12px;margin:.8rem 0;background:#f9fafb;transition:all .3s}.integration-option:hover{background:#f3f4f6;transform:translate(5px)}.integration-icon{width:45px;height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.integration-info{flex:1}.integration-name{font-size:.9rem;font-weight:700;color:#1f2937}.integration-status{font-size:.75rem;color:#6b7280}.integration-status.connected{color:#25d366;font-weight:700}.integration-badge{background:linear-gradient(135deg,#8b5cf6,#667eea);color:#fff;padding:.2rem .6rem;border-radius:12px;font-size:.65rem;font-weight:700}.usage-example{display:flex;align-items:center;gap:1rem;padding:.8rem;border-radius:10px;margin:.6rem 0;background:#f9fafb;transition:all .3s}.usage-example:hover{background:#f3f4f6;transform:translate(5px)}.usage-icon{width:40px;height:40px;background:linear-gradient(135deg,#8b5cf6,#667eea);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}.usage-text{flex:1}.usage-action{font-size:.85rem;font-weight:700;color:#1f2937}.usage-detail{font-size:.7rem;color:#6b7280;font-style:italic}.organized-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.stat-box{background:linear-gradient(135deg,#f9fafb,#f3f4f6);padding:1rem;border-radius:16px;display:flex;align-items:center;gap:1rem;transition:all .3s;box-shadow:0 4px 6px -1px #0000000d;border:1px solid rgba(243,244,246,.8)}.stat-box:hover{transform:scale(1.05);box-shadow:0 5px 20px #8b5cf633}.stat-icon{font-size:2rem}.stat-info{flex:1}.stat-number-small{font-size:1.3rem;font-weight:900;color:#8b5cf6;line-height:1}.stat-label-small{font-size:.65rem;color:#6b7280;font-weight:600}.organized-footer{text-align:center;margin-top:1rem;padding-top:1rem;border-top:2px solid #f3f4f6}.step-content{padding:2.5rem;text-align:center}.step-number{display:inline-block;width:55px;height:55px;background:linear-gradient(135deg,#8b5cf6,#667eea);color:#fff;border-radius:50%;font-size:1.8rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 10px 30px #8b5cf666;font-family:Inter,sans-serif}.step-content h3{font-size:2rem;font-weight:800;margin-bottom:1rem;color:#1f2937}.step-content p{font-size:1.05rem;color:#6b7280;line-height:1.8;margin-bottom:1.5rem}.feature-points{display:flex;flex-direction:column;gap:.6rem;text-align:left;max-width:280px;margin:0 auto}.feature-point{font-size:.9rem;color:#4b5563;padding:.5rem;background:#8b5cf60d;border-radius:8px;transition:all .3s}.feature-point:hover{background:#8b5cf61a;transform:translate(5px)}.step-tagline{margin-top:1.5rem;font-size:1.1rem;font-weight:700;color:#8b5cf6;font-style:italic;padding:1rem;background:#8b5cf60d;border-radius:12px;border-left:4px solid #8b5cf6}@media(max-width:968px){.steps-grid{grid-template-columns:1fr}.steps-away-badge{position:static;display:block;margin-bottom:1rem;transform:rotate(0)}.how-it-works-header h2{font-size:2.5rem}.step-content h3{font-size:1.5rem}}