:root { color-scheme: light; font-family: Georgia, 'Times New Roman', serif; color: #17324d; background: #eff4f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 10%, #fff 0, #eff4f6 42%, #dce9ed 100%); }
main { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.card { width: min(100%, 42rem); padding: clamp(2rem, 8vw, 4.5rem); background: rgba(255, 255, 255, .94); border: 1px solid #c1d3db; border-radius: 1rem; box-shadow: 0 1.25rem 4rem rgba(23, 50, 77, .13); text-align: center; }
.eyebrow { margin: 0 0 1rem; color: #55768c; font: 700 .78rem/1.2 system-ui, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; color: #1f446b; font-size: clamp(2.5rem, 9vw, 4.6rem); line-height: .98; }
.subtitle { margin: 1.4rem 0 .7rem; font: 600 1.2rem/1.4 system-ui, sans-serif; color: #315d75; }
p:not(.eyebrow) { max-width: 35rem; margin: .7rem auto; font-size: 1.08rem; line-height: 1.65; }
nav { display: grid; gap: .75rem; margin-top: 2rem; }
a { display: block; padding: .85rem 1rem; border: 1px solid #6c99ab; border-radius: .45rem; color: #17324d; font: 600 .96rem/1.35 system-ui, sans-serif; text-decoration: none; }
a:hover, a:focus-visible { background: #1f446b; border-color: #1f446b; color: #fff; outline: none; }
@media (max-width: 32rem) { main { padding: 1rem; } .card { padding: 2.25rem 1.5rem; } }