*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#333;line-height:1.7}
.container{width:90%;max-width:1100px;margin:auto}
.hero{background:linear-gradient(135deg,#0056b3,#0b79d0);color:#fff;text-align:center;padding:60px 20px}
.hero h1{font-size:42px;margin-bottom:10px}
.hero p{font-size:18px}
.toc,.card{background:#fff;border-radius:10px;padding:25px;margin:25px 0;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.toc ol{padding-left:20px}
.toc a{text-decoration:none;color:#0056b3}
.toc a:hover{text-decoration:underline}
.card h2{color:#0056b3;margin-bottom:15px;border-bottom:2px solid #e8eef8;padding-bottom:8px}
.card ul{padding-left:20px}
footer{background:#002b5c;color:#fff;text-align:center;padding:20px;margin-top:40px}
@media(max-width:768px){
.hero h1{font-size:32px}
.hero p{font-size:16px}
.container{width:95%}
}