body { margin:0; font-family: Arial, sans-serif; background:#f5f7fa; }
.header { display:flex; justify-content:space-between; align-items:center; padding:15px 30px; background:white; box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.logo-img { height:55px; }
nav a { margin-left:20px; text-decoration:none; font-weight:600; color:#0C4A6E; }
.hero { text-align:center; padding:120px 20px; background:#dcefff; }
.hero h1 { font-size:48px; margin-bottom:10px; }
.btn { display:inline-block; padding:12px 22px; background:#0C4A6E; color:white; border-radius:6px; margin-top:20px; text-decoration:none; }
.section { max-width:1100px; margin:40px auto; background:white; padding:40px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.card-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px;}
.card { background:#f9fbff; padding:20px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.fade-in { opacity:0; transform:translateY(20px); transition:1s; }
.fade-in.visible { opacity:1; transform:translateY(0); }