.how-it-works-container{background:#f8f9fa;min-height:100vh}.works-nav{z-index:100;background:#fff;border-bottom:1px solid #e9ecef;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:sticky;top:0;box-shadow:0 2px 4px #0000000d}.nav-home{color:#667eea;background:#f8f9fa;border-radius:8px;padding:8px 20px;font-weight:600;text-decoration:none;transition:all .3s}.nav-home:hover{background:#e9ecef}.nav-logo{color:#333;font-size:1.2em;font-weight:700}.works-hero{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:100px 40px}.hero-content h1{margin-bottom:20px;font-size:3em;font-weight:700}.hero-content p{opacity:.95;font-size:1.4em}.works-content{max-width:1200px;margin:0 auto;padding:60px 40px}.works-content section{margin-bottom:100px}.works-content h2{color:#333;text-align:center;margin-bottom:50px;font-size:2.5em;font-weight:700}.comparison-grid{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:40px;display:grid}.comparison-card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 10px 40px #0000001a}.comparison-card.old-way{border-top:5px solid #dc3545}.comparison-card.new-way{border-top:5px solid #28a745}.card-header{align-items:center;gap:15px;margin-bottom:30px;display:flex}.card-header h3{margin:0;font-size:1.8em}.old-way .card-header{color:#dc3545}.new-way .card-header{color:#28a745}.problem-list,.benefit-list{flex-direction:column;gap:20px;display:flex}.problem-item,.benefit-item{background:#f8f9fa;border-radius:12px;gap:15px;padding:15px;transition:all .3s;display:flex}.problem-item:hover,.benefit-item:hover{transform:translate(5px);box-shadow:0 4px 15px #0000001a}.problem-item{border-left:4px solid #dc3545}.benefit-item{border-left:4px solid #28a745}.problem-item strong,.benefit-item strong{color:#333;margin-bottom:5px;font-size:1.1em;display:block}.problem-item p,.benefit-item p{color:#666;font-size:.95em}.flow-container{flex-direction:column;gap:60px;display:flex}.flow-step{background:#fff;border-radius:20px;padding:50px;position:relative;box-shadow:0 10px 40px #0000001a}.step-number{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:2em;font-weight:700;display:flex;position:absolute;top:-20px;left:50px;box-shadow:0 4px 15px #667eea66}.step-icon-large{text-align:center;margin-bottom:20px;font-size:4em}.flow-step h3{color:#333;text-align:center;margin-bottom:30px;font-size:2em}.step-details{background:#f8f9fa;border-radius:15px;margin-bottom:30px;padding:30px}.step-details p{color:#333;margin-bottom:15px;font-weight:600}.step-details ul{margin:0;padding:0;list-style:none}.step-details li{color:#666;border-bottom:1px solid #e9ecef;padding:10px 0;font-size:1.1em}.step-details li:last-child{border-bottom:none}.step-visual{flex-direction:column;align-items:center;gap:15px;display:flex}.visual-box{color:#333;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:12px;padding:20px 40px;font-size:1.2em;font-weight:600;box-shadow:0 4px 15px #0000001a}.visual-box.highlight{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.arrow-down{color:#667eea;font-size:2em}.code-box{color:#fff;text-align:center;background:#1e1e1e;border-radius:15px;padding:30px}.code-label{opacity:.7;margin-bottom:15px;font-size:.9em}.code-value{color:#4ade80;letter-spacing:2px;font-family:monospace;font-size:1.5em;font-weight:700}.verification-checks{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;display:grid}.check-box{text-align:center;border-radius:10px;padding:15px;font-size:1.1em;font-weight:600}.check-box.verified{color:#155724;background:#d4edda;border:2px solid #c3e6cb}.story-container{max-width:800px;margin:0 auto}.story-card{background:#fff;border-radius:20px;padding:40px;box-shadow:0 10px 40px #0000001a}.story-header{border-bottom:2px solid #f8f9fa;align-items:center;gap:20px;margin-bottom:40px;padding-bottom:30px;display:flex}.avatar{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:3em;display:flex}.story-header h3{color:#333;margin:0;font-size:1.8em}.story-header p{color:#666;margin:5px 0 0;font-size:1.1em}.story-timeline{padding-left:40px;position:relative}.story-timeline:before{content:"";background:linear-gradient(#667eea 0%,#764ba2 100%);width:3px;position:absolute;top:0;bottom:0;left:15px}.timeline-item{margin-bottom:40px;position:relative}.timeline-dot{background:#667eea;border:3px solid #fff;border-radius:50%;width:15px;height:15px;position:absolute;top:0;left:-32px;box-shadow:0 0 0 3px #667eea}.timeline-content h4{color:#333;margin-bottom:10px;font-size:1.3em}.timeline-content p{color:#666;margin-bottom:15px;line-height:1.6}.code-example{background:#f8f9fa;border-radius:8px;margin-top:15px;padding:15px;font-family:monospace}.result-badge{border-radius:50px;margin-top:10px;padding:10px 20px;font-weight:700;display:inline-block}.result-badge.success{color:#155724;background:#d4edda;border:2px solid #c3e6cb}.blockchain-explainer{background:#fff;border-radius:20px;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:50px;display:grid;box-shadow:0 10px 40px #0000001a}.wall-container{text-align:center}.wall-block{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;margin-bottom:15px;padding:20px;font-weight:600;box-shadow:0 4px 15px #667eea66}.wall-copies{color:#666;margin-top:20px;font-style:italic}.explainer-content h3{color:#333;margin-bottom:25px;font-size:1.5em}.magic-features{flex-direction:column;gap:20px;display:flex}.magic-item{align-items:start;gap:15px;display:flex}.magic-item svg{color:#667eea;flex-shrink:0}.magic-item strong{color:#333;margin-bottom:5px;display:block}.magic-item p{color:#666}.powers-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;display:grid}.power-card{text-align:center;background:#fff;border-radius:20px;padding:40px;transition:all .3s;box-shadow:0 10px 40px #0000001a}.power-card:hover{transform:translateY(-10px);box-shadow:0 20px 60px #00000026}.power-icon{margin-bottom:20px;font-size:4em}.power-card h3{color:#333;margin-bottom:15px;font-size:1.5em}.power-card p{color:#666;line-height:1.6}.stats-grid{flex-wrap:wrap;justify-content:center;align-items:center;gap:30px;margin-bottom:40px;display:flex}.stat-card{text-align:center;background:#fff;border-radius:20px;min-width:250px;padding:40px;box-shadow:0 10px 40px #0000001a}.stat-label{color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px;font-size:.9em}.stat-value{margin-bottom:10px;font-size:3em;font-weight:700}.stat-value.old{color:#dc3545}.stat-value.new{color:#28a745}.stat-desc{color:#666;font-size:1.1em}.stat-arrow{color:#667eea;font-size:3em}.works-cta{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:30px;margin-top:100px;padding:80px}.works-cta h2{color:#fff;margin-bottom:20px;font-size:3em}.works-cta p{opacity:.95;margin-bottom:40px;font-size:1.3em}.cta-buttons{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.btn-primary,.btn-secondary{border-radius:12px;align-items:center;gap:10px;padding:18px 40px;font-size:1.2em;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.btn-primary{color:#667eea;background:#fff;box-shadow:0 4px 15px #0003}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px #0000004d}.btn-secondary{color:#fff;background:0 0;border:2px solid #fff}.btn-secondary:hover{color:#667eea;background:#fff}.works-footer{color:#fff;text-align:center;background:#2d3748;margin-top:80px;padding:40px}.footer-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;margin-top:15px;display:flex}.footer-links a{color:#fff;opacity:.8;text-decoration:none;transition:opacity .3s}.footer-links a:hover{opacity:1}@media (max-width:768px){.works-nav{padding:15px 20px}.nav-logo{font-size:1em}.works-hero{padding:60px 20px}.hero-content h1{font-size:2em}.hero-content p{font-size:1.1em}.works-content{padding:40px 20px}.works-content h2{font-size:2em}.comparison-grid{grid-template-columns:1fr}.flow-step{padding:30px 20px}.blockchain-explainer{grid-template-columns:1fr;padding:30px}.powers-grid{grid-template-columns:1fr}.stats-grid{flex-direction:column}.stat-arrow{transform:rotate(90deg)}.works-cta{padding:50px 20px}.works-cta h2{font-size:2em}.cta-buttons{flex-direction:column}.btn-primary,.btn-secondary{justify-content:center;width:100%}}