:root { color-scheme: dark; font-family: "Segoe UI Variable", "Segoe UI", sans-serif; color: #f3f7fc; background: #06101d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 78% 5%, #17456b 0, #0a1e33 25%, #06101d 58%); }
main, footer { width: min(1120px, calc(100% - 40px)); margin: auto; }
.brand { display: flex; align-items: center; gap: 13px; width: fit-content; padding: 30px 0; color: #71d9ff; font-size: .84rem; font-weight: 750; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.brand img { width: 42px; height: 42px; }
.brand:hover, .brand:focus-visible, footer a:hover, footer a:focus-visible { color: #b7ecff; }
.hero { max-width: 830px; padding: 70px 0 80px; }
.eyebrow { color: #71d9ff; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 10px 0 22px; font-size: clamp(3rem, 8vw, 6.2rem); line-height: .96; letter-spacing: -.045em; }
.lede { max-width: 720px; color: #bed0e1; font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.55; }
.download { display: inline-block; margin-top: 24px; padding: 15px 22px; border-radius: 10px; color: #03121f; background: #69d5ff; box-shadow: 0 12px 34px #04101dbd; font-weight: 800; text-decoration: none; }
.download:hover, .download:focus-visible { background: #a2e7ff; transform: translateY(-1px); }
.fine { color: #88a1b9; font-size: .9rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps article, .boundary { padding: 25px; border: 1px solid #284762; border-radius: 16px; background: #0d2135dc; box-shadow: 0 20px 46px #0004; }
.steps b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #062035; background: #69d5ff; }
h2 { margin: 18px 0 8px; }
.steps p, .boundary p, li { color: #b7c9da; line-height: 1.55; }
.boundary { margin: 20px 0 70px; }
.boundary ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 28px; padding-left: 22px; }
footer { padding: 25px 0 45px; border-top: 1px solid #1d354a; color: #7892aa; }
footer a { color: inherit; }
@media (max-width: 760px) { .hero { padding: 35px 0 55px; } .steps { grid-template-columns: 1fr; } .boundary ul { grid-template-columns: 1fr; } }