body { 
    font-family: "Segoe UI", Roboto, sans-serif; 
    color: #e2e8f0; 
    background: #0a0f1c; 
    overflow-x: hidden; 
    margin:0; 
    padding:0;
}

canvas#bgCanvas {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    z-index:0;
    background: radial-gradient(circle at top left,#0a0f1c,#1e293b);
}

.site-header {
    position: relative;
    z-index: 2;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:1rem 2rem;
}

.logo h1 {
    font-size:2rem;
    color:#38bdf8;
    text-shadow:0 0 20px rgba(56,189,248,0.8);
}

.blog {
    position:relative;
    z-index:2;
    max-width:1200px;
    margin:2rem auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
    padding:0 1rem;
    width:90%;
}

.blog-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(12px);
    background: rgba(15,23,42,0.75);
    box-shadow:0 8px 50px rgba(0,0,0,0.7);
    transition: transform 0.3s, box-shadow 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow:0 10px 35px rgba(0,0,0,0.8);
}

.blog-card h3 {
    font-size:1.5rem;
    margin-bottom:0.5rem;
    color:#38bdf8;
}

.blog-card p { font-size:1rem; color:#cbd5e1; }

.blog-card a {
    display:block;
    margin-top:1rem;
    padding:0.8rem 0;
    font-weight:bold;
    font-size:1rem;
    text-align:center;
    border-radius:1rem;
    background: rgba(15,23,42,0.85);
    color:#38bdf8;
    border:1px solid rgba(56,189,248,0.6);
    box-shadow:0 4px 12px rgba(56,189,248,0.3);
    transition: all 0.3s ease;
}

.blog-card a:hover {
    transform: translateY(-2px);
    background: rgba(56,189,248,0.2);
    color:#10b981;
}