.how-it-works-container{background:var(--bg);min-height:100vh;color:var(--fg);font-family:var(--font-inter),system-ui,sans-serif}.works-nav{z-index:50;-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);background:#0a0a0ab3;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0}.nav-home{color:var(--muted);font-size:.82rem;text-decoration:none;transition:color .2s}.nav-home:hover{color:var(--fg)}.nav-logo{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.025em;color:var(--fg);font-size:1rem;font-weight:700}.works-hero{text-align:center;border-bottom:1px solid var(--hairline);background-image:linear-gradient(#f5f5f30a 1px,#0000 1px),linear-gradient(90deg,#f5f5f30a 1px,#0000 1px);background-size:80px 80px;padding:8rem 2rem 5rem;position:relative}.works-hero:after{content:"";pointer-events:none;background:radial-gradient(closest-side at 50% 0,#c084fc2e,#0000 60%);position:absolute;inset:0}.works-hero .hero-content{z-index:1;max-width:1100px;margin:0 auto;position:relative}.works-hero h1{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.035em;color:var(--fg);margin-bottom:1.5rem;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:700;line-height:.95}.works-hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.6}.works-content{max-width:1400px;margin:0 auto;padding:6rem 2rem}.works-content section{margin-bottom:7rem}.works-content section>h2{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.035em;color:var(--fg);margin-bottom:3rem;font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:.95}.comparison-grid{background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;grid-template-columns:1fr 1fr;gap:1px;display:grid;overflow:hidden}@media (max-width:768px){.comparison-grid{grid-template-columns:1fr}}.comparison-card{background:var(--bg);padding:2.5rem}.comparison-card .card-header{border-bottom:1px solid var(--hairline);align-items:center;gap:.75rem;margin-bottom:1.75rem;padding-bottom:1.25rem;display:flex}.comparison-card .card-header svg{width:1.5rem;height:1.5rem}.comparison-card .card-header h3{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);margin:0;font-size:1.5rem;font-weight:600}.comparison-card.old-way .card-header svg{color:#ef4444e6}.comparison-card.new-way .card-header svg{color:var(--accent)}.problem-list,.benefit-list{flex-direction:column;gap:1rem;display:flex}.problem-item,.benefit-item{border:1px solid var(--hairline);background:var(--surface);border-radius:12px;align-items:flex-start;gap:.875rem;padding:1rem;transition:border-color .3s;display:flex}.problem-item:hover,.benefit-item:hover{border-color:#f5f5f326}.problem-item svg,.benefit-item svg{width:1.125rem;height:1.125rem;color:var(--muted);flex-shrink:0;margin-top:.2rem}.benefit-item svg{color:var(--accent)}.problem-item strong,.benefit-item strong{font-family:var(--font-space-grotesk),system-ui,sans-serif;color:var(--fg);margin-bottom:.25rem;font-size:.95rem;font-weight:600;display:block}.problem-item p,.benefit-item p{color:var(--muted);margin:0;font-size:.85rem;line-height:1.5}.flow-container{background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;grid-template-columns:repeat(3,1fr);gap:1px;display:grid;overflow:hidden}@media (max-width:900px){.flow-container{grid-template-columns:1fr}}.flow-step{background:var(--bg);padding:2.5rem;position:relative}.flow-step .step-number{border:1px solid var(--hairline);letter-spacing:.1em;width:2rem;height:2rem;color:var(--accent);font-variant-numeric:tabular-nums;border-radius:999px;justify-content:center;align-items:center;margin-bottom:1.25rem;font-size:.7rem;font-weight:600;display:inline-flex}.flow-step .step-icon-large{margin-bottom:1.25rem;font-size:2.5rem;line-height:1}.flow-step h3{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);margin:0 0 1.25rem;font-size:1.4rem;font-weight:600;line-height:1.2}.step-details p{color:var(--fg);margin:0 0 .5rem;font-size:.875rem}.step-details ul{flex-direction:column;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none;display:flex}.step-details li{color:var(--muted);font-size:.875rem;line-height:1.55}.step-visual{border-top:1px solid var(--hairline);flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem;padding-top:1.25rem;display:flex}.visual-box{text-align:center;border:1px solid var(--hairline);background:var(--surface);width:100%;color:var(--fg);font-family:var(--font-space-grotesk),system-ui,sans-serif;border-radius:10px;padding:.75rem 1rem;font-size:.95rem}.visual-box.highlight{color:var(--accent);background:#c084fc14;border-color:#c084fc66}.arrow-down{color:var(--muted);font-size:.85rem}.code-box{border:1px solid var(--hairline);background:var(--surface);text-align:center;border-radius:12px;width:100%;padding:1.25rem}.code-label{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.5rem;font-size:.68rem}.code-value{color:var(--accent);letter-spacing:.05em;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:.9rem}.verification-checks{border-top:1px solid var(--hairline);flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1.25rem;display:flex}.check-box{text-align:left;border-radius:999px;padding:.625rem .875rem;font-size:.8rem}.check-box.verified{color:#4ade80f2;background:#22c55e14;border:1px solid #22c55e40}.story-card{border:1px solid var(--hairline);background:var(--surface);border-radius:24px;padding:3rem;position:relative;overflow:hidden}.story-card:before{content:"";pointer-events:none;background:radial-gradient(closest-side at 100% 0,#c084fc1a,#0000 60%);position:absolute;inset:0}.story-header{align-items:center;gap:1rem;margin-bottom:2.5rem;display:flex;position:relative}.avatar{border:1px solid var(--hairline);background:var(--surface);border-radius:999px;justify-content:center;align-items:center;width:4rem;height:4rem;font-size:3rem;line-height:1;display:flex}.story-header h3{font-family:var(--font-space-grotesk),system-ui,sans-serif;color:var(--fg);margin:0 0 .25rem;font-size:1.4rem;font-weight:600}.story-header p{color:var(--muted);margin:0;font-size:.875rem}.story-timeline{padding-left:1.5rem;position:relative}.story-timeline:before{content:"";background:var(--hairline);width:1px;position:absolute;top:0;bottom:0;left:.25rem}.timeline-item{padding-bottom:2rem;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-dot{background:var(--accent);border-radius:999px;width:.625rem;height:.625rem;position:absolute;top:.5rem;left:-1.5rem;box-shadow:0 0 0 3px #c084fc1f}.timeline-content h4{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.015em;color:var(--fg);margin:0 0 .5rem;font-size:1.1rem;font-weight:600}.timeline-content p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.6}.code-example{border:1px solid var(--hairline);background:var(--surface);color:var(--muted);border-radius:8px;margin-top:.75rem;padding:.75rem 1rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:.82rem}.code-example strong{color:var(--accent)}.result-badge{border-radius:999px;margin-top:.75rem;padding:.5rem .875rem;font-size:.78rem;font-weight:500;display:inline-block}.result-badge.success{color:#4ade80f2;background:#22c55e1f;border:1px solid #22c55e4d}.blockchain-explainer{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;display:grid}@media (max-width:900px){.blockchain-explainer{grid-template-columns:1fr;gap:2.5rem}}.wall-container{border:1px solid var(--hairline);background:var(--surface);border-radius:16px;flex-direction:column;gap:.75rem;padding:2rem;display:flex;position:relative}.wall-block{border:1px solid var(--hairline);color:var(--fg);background:#0a0a0a80;border-radius:10px;padding:1rem 1.25rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:.9rem}.wall-copies{text-align:center;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:.75rem;font-size:.7rem}.explainer-content h3{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);margin:0 0 1.75rem;font-size:1.4rem;font-weight:600}.magic-features{flex-direction:column;gap:1rem;display:flex}.magic-item{border:1px solid var(--hairline);background:var(--surface);border-radius:12px;align-items:flex-start;gap:1rem;padding:1.25rem;transition:border-color .3s,background .3s;display:flex}.magic-item:hover{background:var(--surface-hi);border-color:#c084fc4d}.magic-item svg{width:1.25rem;height:1.25rem;color:var(--accent);flex-shrink:0;margin-top:.15rem}.magic-item strong{font-family:var(--font-space-grotesk),system-ui,sans-serif;color:var(--fg);margin-bottom:.25rem;font-size:1rem;font-weight:600;display:block}.magic-item p{color:var(--muted);margin:0;font-size:.9rem;line-height:1.5}.powers-grid{background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;grid-template-columns:repeat(3,1fr);gap:1px;display:grid;overflow:hidden}@media (max-width:900px){.powers-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.powers-grid{grid-template-columns:1fr}}.power-card{background:var(--bg);padding:2.25rem;transition:background .3s}.power-card:hover{background:var(--surface-hi)}.power-icon{margin-bottom:1rem;font-size:2rem;line-height:1}.power-card h3{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.015em;color:var(--fg);margin:0 0 .75rem;font-size:1.25rem;font-weight:600}.power-card p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.6}.stats-grid{grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-bottom:1.5rem;display:grid}@media (max-width:768px){.stats-grid{grid-template-columns:1fr}.stat-arrow{display:none}}.stat-card{background:var(--surface);border:1px solid var(--hairline);text-align:center;border-radius:16px;padding:2rem}.stat-label{text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:.5rem;font-size:.68rem}.stat-value{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-bottom:.5rem;font-size:clamp(2rem,4vw,2.75rem);font-weight:700;line-height:.95}.stat-value.old{color:var(--muted)}.stat-value.new{color:var(--fg)}.stat-desc{color:var(--muted);font-size:.85rem}.stat-arrow{color:var(--accent);font-size:1.5rem;font-weight:200}.works-cta{text-align:center;border:1px solid var(--hairline);background:var(--surface);border-radius:24px;padding:4rem 2rem;position:relative;overflow:hidden}.works-cta:before{content:"";pointer-events:none;background:radial-gradient(closest-side at 50% 0,#c084fc26,#0000 60%);position:absolute;inset:0}.works-cta h2{font-family:var(--font-space-grotesk),system-ui,sans-serif;letter-spacing:-.035em;color:var(--fg);margin:0 0 1rem;font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:.95;position:relative}.works-cta p{color:var(--muted);margin:0 0 2rem;font-size:1.05rem;position:relative}.cta-buttons{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex;position:relative}.btn-primary,.btn-secondary{font-size:.95rem;font-weight:500;font-family:var(--font-inter),system-ui,sans-serif;border-radius:999px;align-items:center;gap:.5rem;padding:.85rem 1.75rem;text-decoration:none;transition:background .3s,color .3s,border-color .3s;display:inline-flex}.btn-primary{background:var(--accent);color:var(--bg);border:1px solid var(--accent)}.btn-primary:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}.btn-secondary{color:var(--fg);border:1px solid var(--hairline);background:0 0}.btn-secondary:hover{border-color:var(--accent)}.btn-primary.large,.btn-secondary.large{padding:1rem 2rem;font-size:1rem}.works-footer{border-top:1px solid var(--hairline);text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;padding:2.5rem 2rem;font-size:.78rem}.works-footer p{margin:0 0 1rem}.footer-links{align-items:center;gap:1rem;font-size:.78rem;display:inline-flex}.footer-links a{color:var(--muted);text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--fg)}.footer-links span{color:var(--hairline)}
