:root{ --accent:#0b6eff; --bg:#f7f8fb; --card:#fff; --muted:#666; --maxw:1100px; }
*{box-sizing:border-box} body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; margin:0; background:var(--bg); color:#111; line-height:1.6;}
.container{max-width:var(--maxw); margin:28px auto; padding:0 18px;}
.header{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.logo{width:48px;height:48px;background:linear-gradient(135deg,var(--accent),#07b39b);border-radius:10px;display:inline-grid;place-items:center;color:#fff;font-weight:700;}
.nav a{margin-left:12px;text-decoration:none;color:var(--muted);font-weight:600;}
.hero{background:var(--card);padding:24px;border-radius:12px;box-shadow:0 6px 18px rgba(28,45,60,0.06);display:grid;grid-template-columns:1fr;gap:16px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px;}
.card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 4px 14px rgba(18,33,52,0.04);}
.footer{margin-top:28px;color:var(--muted);font-size:14px;text-align:center;padding:18px 0;}
.article-list a{display:block;text-decoration:none;color:var(--accent);font-weight:700;margin-bottom:8px;}
.meta{color:var(--muted);font-size:13px;}
@media(min-width:800px){ .hero{grid-template-columns:1fr 340px;} h1{font-size:32px;} }