:root{--primary:#2563EB;--primary-dark:#1D4ED8;--primary-light:#3B82F6;--primary-subtle:#EFF6FF;--bg:#F8FAFC;--bg-white:#FFFFFF;--bg-dark:#0F172A;--bg-alt:#F1F5F9;--text-primary:#0F172A;--text-secondary:#475569;--text-muted:#94A3B8;--text-inverse:#FFFFFF;--success:#10B981;--warning:#F59E0B;--error:#EF4444;--border:#E2E8F0;--border-dark:#CBD5E1;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text-primary);background:var(--bg)}.progress-bar{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--border);z-index:1000}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width .1s ease-out}.nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-2xl);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:100}.back-link{display:flex;align-items:center;gap:var(--space-sm);color:var(--primary);text-decoration:none;font-weight:500;font-size:var(--font-size-sm);transition:all .2s ease}.back-link svg{width:18px;height:18px}.back-link:hover{color:var(--primary-dark);transform:translateX(-4px)}.nav-links{display:flex;gap:var(--space-xl)}.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:color .2s ease}.nav-links a.active,.nav-links a:hover{color:var(--primary)}.hero{min-height:100vh;padding:120px var(--space-3xl) var(--space-4xl);display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-4xl);align-items:center;max-width:1400px;margin:0 auto;position:relative}.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.hero-content{position:relative;z-index:1}.hero-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.tag{padding:var(--space-xs) var(--space-md);background:var(--primary-subtle);color:var(--primary);font-size:var(--font-size-sm);font-weight:500;border-radius:20px}.hero-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-lg);line-height:1.1}.hero-subtitle{font-size:var(--font-size-xl);color:var(--text-secondary);margin-bottom:var(--space-2xl);line-height:1.6}.hero-subtitle strong{color:var(--text-primary)}.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}.metric{text-align:center;padding:var(--space-lg);background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.metric-value{display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--primary)}.metric-label{font-size:var(--font-size-sm);color:var(--text-muted)}.hero-visual{position:relative;z-index:1}.browser-frame{background:var(--bg-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;border:1px solid var(--border)}.browser-frame.large{max-width:1000px;margin:0 auto}.browser-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-alt);border-bottom:1px solid var(--border)}.browser-dots{display:flex;gap:6px}.browser-dots span{width:12px;height:12px;border-radius:50%;background:var(--border-dark)}.browser-dots span:first-child{background:#ef4444}.browser-dots span:nth-child(2){background:#f59e0b}.browser-dots span:last-child{background:#10b981}.browser-url{flex:1;padding:var(--space-sm) var(--space-md);background:var(--bg-white);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--text-muted);font-family:monospace}.browser-content{background:var(--bg-alt)}.browser-content img{width:100%;display:block}.section{padding:var(--space-4xl) var(--space-3xl);max-width:1200px;margin:0 auto}.section-dark{background:var(--bg-dark);color:var(--text-inverse);max-width:100%;padding-left:calc((100% - 1200px)/ 2 + var(--space-3xl));padding-right:calc((100% - 1200px)/ 2 + var(--space-3xl))}.section-dark .section-title{color:var(--text-inverse)}.section-dark .section-number{color:var(--primary-light)}.section-alt{background:var(--bg-alt);max-width:100%;padding-left:calc((100% - 1200px)/ 2 + var(--space-3xl));padding-right:calc((100% - 1200px)/ 2 + var(--space-3xl))}.section-header{margin-bottom:var(--space-3xl)}.section-number{display:inline-block;font-size:var(--font-size-sm);font-weight:600;color:var(--primary);margin-bottom:var(--space-sm)}.section-title{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary)}.context-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-3xl)}.context-main .lead{font-size:var(--font-size-xl);color:var(--text-primary);margin-bottom:var(--space-lg)}.context-main .lead strong{color:var(--primary)}.context-main p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.context-sidebar{display:flex;flex-direction:column;gap:var(--space-lg)}.context-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm)}.context-card h4{font-size:var(--font-size-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-md)}.context-card ul{list-style:none}.context-card li{padding:var(--space-xs) 0;color:var(--text-primary);font-size:var(--font-size-sm)}.problem-statement{margin-bottom:var(--space-3xl)}.problem-lead{font-size:var(--font-size-xl);color:rgba(255,255,255,.9);max-width:800px}.problem-lead strong{color:var(--warning)}.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);margin-bottom:var(--space-3xl)}.problem-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all .3s ease}.problem-card:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}.problem-icon{width:48px;height:48px;background:rgba(239,68,68,.2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-lg)}.problem-icon svg{width:24px;height:24px;stroke:var(--error)}.problem-card h4{font-size:var(--font-size-base);font-weight:600;color:var(--text-inverse);margin-bottom:var(--space-sm)}.problem-card p{font-size:var(--font-size-sm);color:rgba(255,255,255,.7)}.problem-quote{max-width:800px;margin:0 auto;text-align:center}.problem-quote blockquote{font-size:var(--font-size-xl);font-style:italic;color:rgba(255,255,255,.9);position:relative;padding:var(--space-xl) 0}.problem-quote blockquote::before{content:'"';font-size:80px;position:absolute;top:-20px;left:-40px;color:var(--primary-light);opacity:.3;font-family:Georgia,serif}.solution-intro{margin-bottom:var(--space-3xl)}.solution-intro .lead{font-size:var(--font-size-xl);color:var(--text-secondary);max-width:800px}.solution-intro .lead strong{color:var(--primary)}.solution-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-bottom:var(--space-4xl)}.principle{display:flex;gap:var(--space-lg)}.principle-number{width:40px;height:40px;background:var(--primary);color:var(--text-inverse);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.principle-content h4{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.principle-content p{font-size:var(--font-size-sm);color:var(--text-secondary)}.solution-screenshot{margin-top:var(--space-3xl)}.screenshot-caption{text-align:center;margin-top:var(--space-lg);font-size:var(--font-size-sm);color:var(--text-muted)}.feature-block{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-3xl);align-items:center;margin-bottom:var(--space-4xl)}.feature-block.reverse{grid-template-columns:1.2fr 1fr}.feature-block.reverse .feature-content{order:2}.feature-block.reverse .feature-image{order:1}.feature-tag{display:inline-block;padding:var(--space-xs) var(--space-md);background:var(--primary);color:var(--text-inverse);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-sm);margin-bottom:var(--space-md)}.feature-content h3{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md)}.feature-content p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.feature-content p strong{color:var(--text-primary)}.feature-list{list-style:none}.feature-list li{padding:var(--space-sm) 0;padding-left:var(--space-xl);position:relative;color:var(--text-secondary)}.feature-list li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--success);border-radius:50%}.feature-image .browser-frame{box-shadow:var(--shadow-lg)}.features-extra{margin-top:var(--space-3xl);padding-top:var(--space-3xl);border-top:1px solid var(--border)}.features-extra h3{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xl)}.extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}.extra-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all .3s ease}.extra-item:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}.extra-icon{width:40px;height:40px;background:var(--primary-subtle);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md)}.extra-icon svg{width:20px;height:20px;stroke:var(--primary)}.extra-item h4{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.extra-item p{font-size:var(--font-size-sm);color:var(--text-muted)}.impact-grid{display:flex;flex-direction:column;gap:var(--space-xl);margin-bottom:var(--space-3xl)}.impact-card{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-xl);align-items:center;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl)}.impact-after,.impact-before{padding:var(--space-lg)}.impact-label{display:inline-block;font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-sm)}.impact-before .impact-label{color:var(--error)}.impact-after .impact-label{color:var(--success)}.impact-after p,.impact-before p{color:var(--text-secondary)}.impact-arrow{width:48px;height:48px;background:var(--primary-subtle);border-radius:50%;display:flex;align-items:center;justify-content:center}.impact-arrow svg{width:24px;height:24px;stroke:var(--primary)}.reflection-box{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:var(--text-inverse);padding:var(--space-3xl);border-radius:var(--radius-xl)}.reflection-box h3{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--space-lg)}.reflection-box p{font-size:var(--font-size-lg);line-height:1.7;opacity:.95;margin-bottom:var(--space-lg)}.reflection-box p:last-child{margin-bottom:0}.reflection-box strong{color:var(--warning)}.stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl)}.stack-category{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--space-xl)}.stack-category h4{font-size:var(--font-size-sm);font-weight:600;color:var(--primary-light);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-md)}.stack-category ul{list-style:none}.stack-category li{padding:var(--space-xs) 0;color:rgba(255,255,255,.8);font-size:var(--font-size-sm)}.footer{text-align:center;padding:var(--space-3xl);background:var(--bg-white);border-top:1px solid var(--border)}.footer-back{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--primary);text-decoration:none;font-weight:500;padding:var(--space-md) var(--space-xl);border:2px solid var(--primary);border-radius:var(--radius-md);transition:all .2s ease;margin-bottom:var(--space-lg)}.footer-back svg{width:18px;height:18px}.footer-back:hover{background:var(--primary);color:var(--text-inverse);transform:translateX(-4px)}.footer-text{color:var(--text-muted);font-size:var(--font-size-sm)}.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}@media (max-width:1024px){.hero{grid-template-columns:1fr;gap:var(--space-2xl);padding-top:100px}.hero-metrics{grid-template-columns:repeat(2,1fr)}.context-grid{grid-template-columns:1fr}.problem-grid{grid-template-columns:repeat(2,1fr)}.solution-principles{grid-template-columns:1fr}.feature-block,.feature-block.reverse{grid-template-columns:1fr}.feature-block.reverse .feature-content,.feature-block.reverse .feature-image{order:unset}.extra-grid{grid-template-columns:repeat(2,1fr)}.stack-grid{grid-template-columns:repeat(2,1fr)}.impact-card{grid-template-columns:1fr;text-align:center}.impact-arrow{margin:0 auto;transform:rotate(90deg)}.nav-links{display:none}.section-alt,.section-dark{padding-left:var(--space-xl);padding-right:var(--space-xl)}}@media (max-width:640px){.section{padding:var(--space-2xl) var(--space-lg)}.hero{padding:80px var(--space-lg) var(--space-2xl)}.hero-title{font-size:var(--font-size-2xl)}.hero-subtitle{font-size:var(--font-size-base)}.hero-metrics{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.metric{padding:var(--space-md)}.section-title{font-size:var(--font-size-xl)}.extra-grid,.problem-grid,.stack-grid{grid-template-columns:1fr}.nav{padding:var(--space-md) var(--space-lg)}}