body{margin:0;font-family:Arial,sans-serif;background:#f4f7fb;color:#0f172a;line-height:1.8;padding-bottom:80px}
.topbar{background:#d63b34;color:white;padding:10px;text-align:center;font-weight:bold;font-size:.82rem}
header{background:#04142c;position:sticky;top:0;z-index:999}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px}
.logo{font-size:2rem;font-weight:900;color:white;text-decoration:none}
.logo span{color:#f0c54a}
.desktop-menu{display:flex;gap:20px}
.desktop-menu a{color:white;text-decoration:none}
/* HEADER */

.site-header{
background:#04142c;
position:sticky;
top:0;
z-index:999;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px;
}

.logo{
font-size:2rem;
font-weight:900;
color:white;
text-decoration:none;
}

.logo span{
color:#f0c54a;
}

.desktop-menu{
display:flex;
gap:22px;
}

.desktop-menu a{
color:white;
text-decoration:none;
font-weight:500;
}

/* HAMBURGER */

.hamburger{
display:none;
font-size:2rem;
color:white;
cursor:pointer;
user-select:none;
}

/* MOBILE MENU */

.mobile-menu{
display:none;
flex-direction:column;
background:#0b1f40;
padding:10px 18px 20px;
}

.mobile-menu.active{
display:flex;
}

.mobile-menu a{
color:white;
text-decoration:none;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}

/* MOBILE */

@media(max-width:900px){

.desktop-menu{
display:none;
}

.hamburger{
display:block;
}
}

/* MOBILE MENU */

.mobile-menu{
display:none;
flex-direction:column;
background:#0b1f40;
padding:10px 18px 20px;
}

.mobile-menu.active{
display:flex;
}

.mobile-menu a{
color:white;
text-decoration:none;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.hero{padding:34px 20px;background:#04142c;color:white;text-align:center}
.hero h1{font-size:2rem;line-height:1.1}
.hero p{max-width:700px;margin:18px auto;color:#d1d5db}
.container{max-width:1200px;margin:auto;padding:34px 18px}
.feature{background:#0a2348;color:white;padding:30px;border-radius:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:white;padding:22px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card h3{margin:12px 0}
.tag{display:inline-block;padding:6px 12px;border-radius:30px;background:#fee2e2;color:#d63b34;font-size:.75rem;font-weight:bold}
.meta{font-size:.84rem;color:#667085;margin:8px 0}
.btn{display:inline-block;background:#d63b34;color:white;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:bold}
.article{max-width:860px;margin:auto;padding:45px 20px}
.article h1{font-size:2.5rem;line-height:1.1}
.takeaways{background:#fff;padding:22px;border-radius:18px;box-shadow:0 5px 20px rgba(0,0,0,.06);margin:24px 0}
.takeaways li{margin:10px 0}
.section-heading{font-size:1.5rem;margin-top:34px}
.quote{border-left:4px solid #d63b34;padding-left:18px;margin:26px 0;font-weight:bold;font-size:1.15rem}
.related{margin-top:40px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.newsletter{background:#0a2348;color:white;padding:28px;border-radius:22px;text-align:center;margin-top:40px}
footer{background:#04142c;color:white;padding:50px 20px;margin-top:50px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;max-width:1200px;margin:auto}
.footer-grid a{display:block;color:#d1d5db;text-decoration:none;margin-top:10px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 -5px 20px rgba(0,0,0,.08)}
.bottom-nav a{text-decoration:none;color:#111827;font-size:.72rem;font-weight:700}
@media(max-width:900px){.desktop-menu{display:none}.hamburger{display:block}.hero h1{font-size:1.7rem}.article h1{font-size:2rem}}

@media(max-width:900px){

.desktop-menu{
display:none;
}

.hamburger{
display:block;
}

}