.site-header{background:#1a1a2e;padding:1rem 0;border-bottom:1px solid #333}
.site-header .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:bold;color:#a855f7;text-decoration:none}
.site-header nav a{color:#e0e0e0;text-decoration:none}
.hero{background:linear-gradient(135deg,#1a1a2e,#2d1b4e);padding:4rem 2rem;text-align:center;border-radius:0 0 2rem 2rem}
.hero h1{color:#fff;margin-bottom:1rem}
.hero p{color:#b0b0b0;max-width:600px;margin:0 auto 2rem;font-size:1.1rem}
.cta-button{display:inline-block;background:linear-gradient(135deg,#a855f7,#6366f1);color:white;padding:1rem 2rem;border-radius:50px;text-decoration:none;font-weight:bold;transition:transform .2s}
.cta-button:hover{transform:scale(1.05)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;padding:2rem 0}
.blog-card{background:#1e1e2e;border:1px solid #333;border-radius:1rem;padding:1.5rem;text-decoration:none;transition:border-color .2s,transform .2s}
.blog-card:hover{border-color:#a855f7;transform:translateY(-2px)}
.blog-card h3{color:#e0e0e0;margin:0;font-size:1rem}
footer{text-align:center;padding:2rem;color:#666;border-top:1px solid #333;margin-top:2rem}
footer a{color:#a855f7}
@media(max-width:768px){.container{padding:0 1rem}.hero{padding:2rem 1rem}}