:root {
--bg: #f5f9ff;
--card: #ffffff;
--ink: #11243b;
--muted: #53657a;
--line: #e2eaf3;
--brand: #2f4ec9;
--brand-2: #1aa184;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: "Public Sans", "Segoe UI", sans-serif;
color: var(--ink);
background:
radial-gradient(820px 320px at 10% -10%, rgba(47, 78, 201, 0.15), transparent 70%),
radial-gradient(700px 260px at 100% 0, rgba(26, 161, 132, 0.14), transparent 68%),
var(--bg);
}

a {
color: var(--brand);
}

.page {
max-width: 980px;
margin: 0 auto;
padding: 28px 18px 60px;
}

.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--muted);
}

.hero {
margin-top: 24px;
background: linear-gradient(130deg, #17308f, #2f4ec9 55%, #1b82ab);
color: #fff;
border-radius: 18px;
padding: 36px 28px;
box-shadow: 0 18px 42px rgba(23, 48, 143, 0.24);
}

.hero h1 {
margin: 0;
font-size: clamp(30px, 5vw, 44px);
line-height: 1.1;
}

.hero p {
max-width: 760px;
margin: 14px 0 0;
line-height: 1.65;
font-size: 17px;
}

.cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 20px;
}

.btn {
text-decoration: none;
display: inline-flex;
align-items: center;
padding: 11px 16px;
border-radius: 12px;
font-weight: 700;
}

.btn.primary {
background: #fff;
color: #17308f;
}

.btn.secondary {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.24);
}

.section {
margin-top: 24px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px;
}

.section h2 {
margin: 0;
font-size: 24px;
}

.section p {
margin: 12px 0 0;
color: var(--muted);
line-height: 1.66;
}

.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}

.tile {
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
background: #fbfdff;
}

.tile h3 {
margin: 0;
font-size: 18px;
}

.tile p {
margin: 8px 0 0;
color: var(--muted);
}

.related {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.related a {
text-decoration: none;
background: #eef4ff;
border: 1px solid #d8e4fa;
color: #2343ba;
border-radius: 999px;
padding: 7px 12px;
font-size: 14px;
font-weight: 600;
}

.footer-note {
margin-top: 20px;
font-size: 14px;
color: var(--muted);
}

@media (max-width: 780px) {
.grid {
grid-template-columns: 1fr;
}

.hero {
padding: 28px 20px;
}
}