:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #07122a; color: #f8fbff; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% 0%, #123d74 0, #07122a 42rem); }
main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0; }
.hero { padding: 40px 0 30px; }
.eyebrow { color: #49e7ff; font-size: .78rem; font-weight: 700; letter-spacing: .16em; margin: 0 0 16px; }
h1 { font-size: clamp(2.3rem, 8vw, 4rem); letter-spacing: -.05em; line-height: 1; margin: 0 0 20px; }
h2 { color: #49e7ff; font-size: 1.2rem; margin: 42px 0 12px; }
h3 { font-size: 1rem; margin: 26px 0 8px; }
p, li { color: #c8d6ea; font-size: 1rem; line-height: 1.7; }
.lead { font-size: 1.2rem; max-width: 42rem; }
nav { display: grid; gap: 14px; margin-top: 36px; }
.features { display: grid; gap: 14px; margin-top: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.pills span { background: rgba(28, 108, 178, .28); border: 1px solid #2b75aa; border-radius: 999px; color: #cceeff; font-size: .88rem; font-weight: 700; padding: 8px 12px; }
.links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; }
.card { background: rgba(10, 31, 65, .86); border: 1px solid #1f508a; border-radius: 18px; color: inherit; display: grid; gap: 5px; padding: 24px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: #49e7ff; transform: translateY(-2px); }
.card span { color: #a9c5e6; }
a { color: #63e9ff; }
.meta { color: #8ba8ca; font-size: .9rem; }
footer { border-top: 1px solid #1f508a; margin-top: 48px; padding-top: 22px; }
@media (max-width: 540px) { main { width: min(100% - 32px, 760px); padding: 48px 0; } }