:root { color-scheme: light; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f8fc; color: #17233b; line-height: 1.65; }
a { color: #1456a7; text-underline-offset: 3px; }
a:hover { color: #0c3873; }
header { background: #11213f; color: #fff; }
.topbar { max-width: 980px; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; }
.brand { color: #fff; font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.brand span { color: #9cd7fc; }
nav { display: flex; gap: 19px; flex-wrap: wrap; }
nav a { color: #e9f1fe; font-size: 14px; }
.hero { max-width: 980px; margin: auto; padding: 50px 24px 62px; }
.eyebrow { color: #8ecff7; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
h1 { font-size: clamp(32px, 5vw, 49px); margin: 10px 0 15px; line-height: 1.16; letter-spacing: -.035em; }
.hero p { max-width: 720px; color: #dce8f9; font-size: 18px; margin: 0; }
main { max-width: 980px; margin: auto; padding: 42px 24px 65px; }
.panel { background: white; border: 1px solid #e3e9f2; border-radius: 15px; padding: 28px 32px; margin: 0 0 20px; box-shadow: 0 8px 24px rgba(17,33,63,.04); }
h2 { font-size: 22px; letter-spacing: -.018em; line-height: 1.3; margin: 0 0 14px; }
h3 { font-size: 17px; margin-bottom: 6px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.container-intro { font-size: 17px; color: #3a4960; margin: 0 0 26px; }
ul, ol { padding-left: 22px; }
li { margin: 8px 0; }
.note { border-left: 4px solid #2d82cb; background: #edf5ff; border-radius: 0 9px 9px 0; padding: 15px 18px; margin: 20px 0; }
.meta { color: #64748b; font-size: 14px; }
footer { border-top: 1px solid #e1e8f2; background: #fff; }
.foot-inner { max-width: 980px; margin: auto; padding: 27px 24px; display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; font-size: 14px; color: #52657c; }
.foot-inner a { margin-right: 14px; }
@media (max-width: 600px) { .topbar { padding: 18px; } .hero { padding: 38px 18px 44px; } main { padding: 24px 14px 45px; } .panel { padding: 22px 20px; } }