:root{
	--bg:#f4f7fb;
	--card:#ffffff;
	--accent-1:#6ea8fe;
	--accent-2:#5ec6a7;
	--text:#112;
}
*{box-sizing:border-box}
body{
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg,var(--bg),#eef4fb);
	color:var(--text);
	margin:0;padding:0;line-height:1.45;
}
.container{max-width:980px;margin:24px auto;padding:0 20px 48px}
header{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;padding:26px;border-radius:10px}
header h1{font-size:2rem;margin:0}
.subtitle{margin:6px 0 0 0;font-size:0.95rem;opacity:0.95}
.topnav{margin-top:12px}
.topnav a{color:#fff;margin:0 10px;text-decoration:none;font-weight:600;padding:6px 10px;border-radius:8px;display:inline-block;transition:background .18s}
.topnav a:hover{background:rgba(255,255,255,0.12)}

.hero-wrap{margin-top:18px;border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(15,30,60,0.08);position:relative}
.hero{width:100%;display:block}
.hero-content{position:absolute;left:36px;top:28px;color:#fff;max-width:62%;}
.hero-content h1{font-size:2.2rem;margin:0}
.hero-content .subtitle{margin:6px 0 10px 0;opacity:0.95}
.hero-content .topnav a{background:rgba(255,255,255,0.08);padding:6px 10px;border-radius:8px}
.hero-content .topnav a:hover{background:rgba(255,255,255,0.16)}

main{margin-top:18px}
section{background:var(--card);border-radius:10px;padding:18px;margin:16px 0;box-shadow:0 6px 16px rgba(16,32,64,0.04);border:1px solid rgba(15,30,60,0.03)}

h2{color:var(--accent-1);margin-top:0}
h3{color:var(--accent-2)}
ul{line-height:1.6}
.small{font-size:0.88rem;color:#556}

footer{opacity:0.9;text-align:center;margin-top:8px}