:root{--p1:#1D4ED8;--p2:#2563EB;--grad:linear-gradient(135deg,#1D4ED8 0%,#2563EB 100%);--white:#fff;--bg:#f5f7fb;--ink:#0F172A;--ink-60:#475569;--ink-20:#E2E8F0;--green:#16A34A;--accent:#06B6D4;--radius:16px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Nunito',sans-serif;color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Merriweather',serif;line-height:1.3}
a{color:var(--p1);text-decoration:none}
.nav{background:var(--white);border-bottom:1px solid var(--ink-20);padding:14px 0}
.nav .c{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:'Merriweather',serif;font-weight:900;font-size:1.1rem;color:var(--ink);text-decoration:none}
.nav-logo span{color:var(--p1)}
.nav-btn{background:var(--grad);color:var(--white)!important;padding:10px 22px;border-radius:50px;font-weight:800;font-size:.85rem}
.hero-a{background:var(--grad);padding:56px 0;color:var(--white);text-align:center}
.hero-a h1{font-size:1.9rem;max-width:800px;margin:0 auto 12px;color:#fff}
.hero-a .meta{font-size:.88rem;opacity:.8}
.article{max-width:780px;margin:0 auto;padding:48px 24px}
.article h2{font-size:1.4rem;margin:36px 0 12px;color:var(--p1)}
.article h3{font-size:1.1rem;margin:24px 0 8px;color:var(--ink)}
.article p{margin-bottom:16px;color:var(--ink-60);font-size:.95rem}
.article ul,.article ol{padding-left:24px;margin-bottom:16px}
.article li{margin-bottom:8px;color:var(--ink-60);font-size:.95rem}
.article strong{color:var(--ink)}
.article table{width:100%;border-collapse:collapse;margin:20px 0}
.article th,.article td{border:1px solid var(--ink-20);padding:10px 14px;font-size:.88rem;text-align:left}
.article th{background:var(--bg);font-weight:700;color:var(--ink)}
.article td{color:var(--ink-60)}
.callout{background:var(--bg);border-left:4px solid var(--p1);padding:16px 20px;margin:20px 0;border-radius:0 var(--radius) var(--radius) 0}
.callout p{margin:0;color:var(--ink)}
.tip{background:#e8f8ef;border-left:4px solid var(--green);padding:16px 20px;margin:20px 0;border-radius:0 var(--radius) var(--radius) 0}
.tip p{margin:0;color:var(--ink)}
.cta-box{background:var(--grad);color:var(--white);padding:36px;border-radius:var(--radius);text-align:center;margin:40px 0}
.cta-box h3{font-size:1.3rem;margin-bottom:12px;color:#fff}
.cta-box p{opacity:.9;margin-bottom:20px;font-size:.95rem}
.cta-box a{display:inline-block;background:var(--white);color:var(--p1);padding:14px 32px;border-radius:50px;font-weight:800}
.related{margin:48px 0 0}
.related h3{font-size:1.2rem;margin-bottom:20px;text-align:center}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{border:1px solid var(--ink-20);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;background:#fff}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(29,78,216,.16)}
.rel-card .top{background:var(--grad);padding:18px;color:var(--white);font-size:.85rem;font-weight:700;min-height:70px;display:flex;align-items:flex-end}
.rel-card .bot{padding:14px;font-size:.82rem;color:var(--ink-60)}
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:32px 0;text-align:center;font-size:.8rem}
.footer a{color:rgba(255,255,255,.6)}
@media(max-width:700px){.hero-a h1{font-size:1.4rem}.related-grid{grid-template-columns:1fr}}