*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#0f172a;--accent:#8b5cf6;--accent-hover:#a78bfa;--bg:#f8fafc;--card:#fff;--text:#0f172a;--text-muted:#64748b;--radius:12px;--shadow:0 2px 8px rgba(0,0,0,0.06)}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.7;font-size:17px}
a{color:var(--accent);text-decoration:none}
.container{max-width:800px;margin:0 auto;padding:0 24px}
.header{background:var(--primary);padding:16px 0;position:sticky;top:0;z-index:100}
.header .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-1px}
.logo .accent{color:var(--accent)}
.nav a{color:#cbd5e1;margin-left:20px;font-size:.93rem;transition:color .2s}
.nav a:hover{color:var(--accent)}
.hero{text-align:center;padding:80px 0 60px}
.hero h1{font-size:2.8rem;font-weight:800;line-height:1.2;margin-bottom:16px}
.hero .accent{color:var(--accent)}
.hero-sub{color:var(--text-muted);max-width:550px;margin:0 auto 32px;font-size:1.15rem}
.btn-primary{display:inline-block;padding:12px 28px;border-radius:50px;background:var(--accent);color:#fff;font-weight:600;transition:transform .2s}
.btn-primary:hover{transform:translateY(-2px);color:#fff}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:24px}
.post-card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:transform .2s}
.post-card:hover{transform:translateY(-3px)}
.post-card h3{font-size:1.1rem;color:var(--primary);margin-bottom:8px}
.post-card p{color:var(--text-muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-date{font-size:.82rem;color:var(--text-muted);margin-top:12px;display:block}
.post-single{background:var(--card);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow);margin-top:24px}
.post-header{margin-bottom:24px}
.post-header h1{font-size:1.8rem;line-height:1.3}
.post-content{font-size:1.05rem;line-height:1.8}
.post-content h2{font-size:1.4rem;margin:32px 0 16px;color:var(--primary)}
.post-content p{margin-bottom:16px}
.post-content ul{margin:12px 0 16px 24px}
.post-content li{margin-bottom:6px}
.post-content code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:.9em}
.post-content pre{background:var(--primary);color:#e2e8f0;padding:20px;border-radius:var(--radius);overflow-x:auto;margin:16px 0}
.cta{text-align:center;padding:60px 0}
.cta h2{font-size:1.6rem;margin-bottom:12px}
.cta p{color:var(--text-muted);margin-bottom:20px}
.newsletter-form{display:flex;gap:12px;max-width:400px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter-form input[type=email]{flex:1;min-width:200px;padding:12px 18px;border-radius:50px;border:none;font-size:.95rem;outline:none;background:#fff;color:var(--primary);box-shadow:0 0 0 1px #e2e8f0}
.newsletter-form button{padding:12px 24px;border-radius:50px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;transition:transform .2s}
.newsletter-form button:hover{transform:translateY(-2px)}
.note{color:var(--text-muted);font-size:.82rem;margin-top:8px}
footer{background:var(--primary);padding:32px 0;margin-top:60px;text-align:center}
.footer-logo{font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:6px}
.footer-logo .accent{color:var(--accent)}
.footer-desc{color:#94a3b8;font-size:.88rem;max-width:400px;margin:0 auto 16px}
.footer-bottom{color:#64748b;font-size:.82rem}
.error-page{text-align:center;padding:100px 0}
.error-page h1{font-size:4rem;font-weight:800;color:var(--accent);margin-bottom:16px}
.error-page p{color:var(--text-muted);font-size:1.1rem;margin-bottom:24px}
@media(max-width:640px){.hero h1{font-size:2rem}.posts-grid{grid-template-columns:1fr}}