*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:#1a5276;--color-accent:#2980b9;--color-text:#2c3e50;--color-text-muted:#7f8c8d;--color-bg:#ffffff;--color-bg-alt:#f8f9fa;--color-border:#dee2e6;--font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;--max-width:1200px;--border-radius:8px}html{scroll-behavior:smooth}body{font-family:var(--font-system);color:var(--color-text);background:var(--color-bg);line-height:1.6;font-size:16px}.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}h1{font-size:2rem;line-height:1.3;margin-bottom:1rem}h1,h2{color:var(--color-primary)}h2{font-size:1.5rem;line-height:1.4;margin:2rem 0 1rem}h3{font-size:1.2rem;color:var(--color-primary);margin:1.5rem 0 .75rem}p{line-height:1.8}ol,p,ul{margin-bottom:1rem}ol,ul{padding-left:1.5rem}li{margin-bottom:.4rem;line-height:1.7}a{color:var(--color-accent)}a:hover{text-decoration:underline}article h2{border-left:4px solid var(--color-accent);padding-left:.75rem}.btn{display:inline-block;padding:.6rem 1.25rem;background:var(--color-accent);color:#fff;border-radius:var(--border-radius);font-weight:600;transition:background .2s}.btn,.btn:hover{text-decoration:none}.btn:hover{background:var(--color-primary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:1.5rem;gap:1.5rem;margin:2rem 0}.article-list{display:grid;grid-gap:1rem;gap:1rem;margin:1rem 0}.article-link-card{display:block;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:1rem 1.25rem;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}.article-link-card:hover{border-color:var(--color-accent);box-shadow:0 2px 8px rgba(41,128,185,.15);text-decoration:none}.article-link-card h3{margin:0 0 .3rem;color:var(--color-primary);font-size:1rem}.article-link-card p{margin:0;font-size:.875rem;color:var(--color-text-muted)}.hero{background:linear-gradient(135deg,#1a5276,#2980b9);color:#fff;padding:4rem 1.5rem;text-align:center}.hero h1{color:#fff;font-size:2.5rem;margin-bottom:1rem}.hero p{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:600px;margin:0 auto 1.5rem}@media (max-width:768px){h1{font-size:1.6rem}h2{font-size:1.3rem}.hero h1{font-size:1.8rem}.card-grid{grid-template-columns:1fr}}