:root{--bg:#f8fafc;--bg-secondary:#fff;--text-main:#0f172a;--text-muted:#64748b;--border:#e2e8f0;--hover-bg:#f1f5f9;--accent:#6366f1;--accent-hover:#4f46e5;--accent-glow:rgba(99,102,241,.15);--font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#020617;--bg-secondary:#0f172a;--text-main:#f8fafc;--text-muted:#94a3b8;--border:#1e293b;--hover-bg:#1e293b;--accent:#818cf8;--accent-hover:#a5b4fc;--accent-glow:rgba(129,140,248,.15)}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg);background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:32px 32px;background-position:-16px -16px;color:var(--text-main);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.abstract-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden;pointer-events:none}a{color:inherit;text-decoration:none}.container{max-width:900px;margin:0 auto;padding:0 1.5rem}.header{padding:2rem 0;margin-bottom:2rem}.header-inner{display:flex;justify-content:space-between;align-items:center}.header-brand{font-weight:700;font-size:1.125rem;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text-main),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-nav a{color:var(--text-muted);font-size:.9375rem;font-weight:500;transition:color .2s}.header-nav a:hover{color:var(--accent)}@keyframes fadeUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeUp .7s cubic-bezier(.16,1,.3,1) forwards;opacity:0}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.hero-container{position:relative;overflow:hidden;padding:4rem 0;margin-bottom:2rem;display:flex;align-items:center}.hero-text{position:relative;z-index:2;flex:1 1}.page-title{font-size:3rem;font-weight:800;letter-spacing:-.04em;margin-bottom:.75rem;line-height:1.1}.page-description{color:var(--text-muted);font-size:1.125rem;max-width:450px}.hero-graphic{position:absolute;right:10%;top:50%;transform:translateY(-50%);width:320px;height:320px;opacity:.8;pointer-events:none;z-index:1}@media (max-width:768px){.hero-graphic{right:-20%;opacity:.3}}.hero-circle{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes spin-reverse{0%{transform:translate(-50%,-50%) rotate(1turn)}to{transform:translate(-50%,-50%) rotate(0deg)}}.hero-circle-1{width:120px;height:120px;border:1px dashed var(--accent);opacity:.6;animation:spin 20s linear infinite}.hero-circle-2{width:220px;height:220px;border:1px solid var(--border);border-top-color:var(--accent);animation:spin-reverse 25s linear infinite}.hero-circle-3{width:320px;height:320px;border-left-color:var(--border);border-bottom:1px solid var(--border);border-right-color:var(--border);border-top:1px solid var(--border);border-left:1px solid var(--text-muted);border-right:1px solid var(--text-muted);animation:spin 30s linear infinite}@keyframes pulse-dot{0%,to{opacity:.2;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 var(--accent-glow)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 20px var(--accent)}}.hero-circle-4{width:12px;height:12px;background:var(--accent);animation:pulse-dot 4s ease-in-out infinite}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:1.5rem;gap:1.5rem}.card{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--border);border-radius:12px;transition:all .3s cubic-bezier(.16,1,.3,1)}.card,.card:hover{background-color:var(--bg-secondary)}.card:hover{border-color:var(--accent);box-shadow:0 8px 30px var(--accent-glow);transform:translateY(-2px)}.card-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between;letter-spacing:-.02em;transition:color .2s ease}.card-title svg{width:18px;height:18px;transition:transform .3s ease,color .3s ease;color:var(--text-muted)}.card:hover .card-title{color:var(--accent)}.card:hover .card-title svg{transform:translateX(4px);color:var(--accent);opacity:1}.card-desc{line-height:1.5}.back-link,.card-desc{color:var(--text-muted);font-size:.9375rem}.back-link{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;font-weight:500;transition:color .2s ease}.back-link:hover{color:var(--accent)}.demo-content{margin-top:3rem;padding:4rem 2rem;border:1px dashed var(--border);border-radius:12px;text-align:center;color:var(--text-muted);background-color:var(--bg-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;transition:border-color .3s ease,box-shadow .3s ease}.demo-content:hover{border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow)}@keyframes pulse-wireframe{0%,to{opacity:.4;transform:scale(1);color:var(--text-muted)}50%{opacity:1;transform:scale(1.05);color:var(--accent)}}.wireframe-graphic{animation:pulse-wireframe 3s ease-in-out infinite}