*{margin:0;padding:0;box-sizing:border-box}html,body{background:#0a0e27;color:#e0e6ff;font-family:'Roboto',sans-serif;line-height:1.6}body{padding:20px}.wrapper{max-width:1000px;margin:0 auto}.header{text-align:center;padding:3rem 0 2rem}.logo{font-size:2.5rem;font-weight:700;margin-bottom:0.5rem;color:#fff}.tagline{color:#a0a8cc;font-size:0.9rem}.main{padding:2rem 0}.hero{text-align:center;padding:3rem 2rem;border:1px solid #2a3f7f;margin-bottom:2rem;background:linear-gradient(135deg,#0d1e3f,#1a2a4a)}.hero h2{font-size:2rem;margin-bottom:1rem}.hero p{color:#a0a8cc;margin-bottom:1.5rem}.code-block{background:#000;border:1px solid #2a3f7f;padding:1rem;text-align:left;margin:0 auto;max-width:400px;border-radius:4px}.code-block code{font-family:'Inconsolata',monospace;color:#7dd3fc;font-size:0.9rem}.features{margin:3rem 0}.features h2{font-size:1.8rem;margin-bottom:2rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.card{background:#1a2a4a;border:1px solid #2a3f7f;padding:1.5rem;transition:all 300ms}.card:hover{border-color:#4f9eff;background:#0d1e3f}.card h3{color:#7dd3fc;margin-bottom:0.5rem}.card p{color:#a0a8cc;font-size:0.9rem}.footer-section{text-align:center;padding:2rem 0}.btn{padding:0.8rem 2rem;background:#4f9eff;color:#000;border:none;font-weight:700;cursor:pointer;font-size:1rem;transition:all 300ms}.btn:hover{background:#7dd3fc}@media(max-width:768px){.hero{padding:2rem 1rem}.grid{grid-template-columns:1fr}}