:root{--bg-color: #0a0a0c;--text-color: #e0e0e0;--text-dim: #a0a0a0;--accent-color: #3b82f6;--accent-hover: #2563eb;--card-bg: #16161a;--border-color: #2a2a2e;--code-bg: #1e1e24;--font-main: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "Fira Code", "Courier New", monospace;--transition-fast: .2s ease;--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-main);line-height:1.6;overflow-x:hidden}.container{max-width:1000px;margin:0 auto;padding:0 1.5rem}section{padding:6rem 0;border-bottom:1px solid var(--border-color)}h1,h2,h3{font-weight:700;letter-spacing:-.02em}h1{font-size:3.5rem;line-height:1.1}h2{font-size:2.2rem;margin-bottom:2rem;color:#fff}h3{font-size:1.4rem;margin-bottom:1rem;color:var(--accent-color)}p{color:var(--text-dim);font-size:1.1rem;margin-bottom:1.5rem;max-width:700px}.hero{height:90vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;top:20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);z-index:-1}.hero .tagline{color:var(--accent-color);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.9rem;margin-bottom:1rem}.hero h1{margin-bottom:1.5rem;background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.arch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.arch-card{background:var(--card-bg);border:1px solid var(--border-color);padding:2rem;border-radius:12px;transition:var(--transition-fast)}.arch-card:hover{border-color:var(--accent-color);transform:translateY(-5px)}pre{background:var(--code-bg);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color);overflow-x:auto;font-family:var(--font-mono);font-size:.95rem;margin:1.5rem 0;position:relative}code{color:#fff}.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.8rem;color:var(--text-dim);text-transform:uppercase}.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.8,.2,1)}.reveal.active{opacity:1;transform:translateY(0)}footer{padding:4rem 0;background:#050507;border-top:1px solid var(--border-color);text-align:center}.disclaimer{font-size:.85rem;color:#555;margin-top:2rem}.demo-box{background:var(--card-bg);border:1px solid var(--border-color);padding:2.5rem;border-radius:12px;margin-top:2rem}.input-group{display:flex;gap:1rem;margin-bottom:2rem}input[type=text]{flex:1;background:var(--bg-color);border:1px solid var(--border-color);color:#fff;padding:.8rem 1.2rem;border-radius:8px;font-family:var(--font-main);outline:none;transition:border-color var(--transition-fast)}input[type=text]:focus{border-color:var(--accent-color)}.demo-status{display:none;flex-direction:column;gap:.8rem;margin:1.5rem 0}.status-step{font-size:.9rem;color:var(--text-dim);display:flex;align-items:center;gap:10px;opacity:.5;transition:opacity .3s ease}.status-step span{width:24px;height:24px;background:var(--code-bg);border:1px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem}.status-step.active{opacity:1;color:#fff}.status-step.active span{border-color:var(--accent-color);color:var(--accent-color)}.demo-result.hidden{display:none}.demo-result{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}button{background:var(--accent-color);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)}button:hover{background:var(--accent-hover)}.btn-small{padding:.5rem 1rem;font-size:.85rem;margin-top:1rem}.secondary{background:var(--code-bg);border:1px solid var(--border-color);margin-left:.5rem}.secondary:hover{background:var(--border-color)}.demo-actions{display:flex;align-items:center}@media(max-width:768px){h1{font-size:2.5rem}section{padding:4rem 0}}