:root{--navy:#071b33;--blue:#1769e0;--cyan:#38bdf8;--ink:#172033;--muted:#5c677b;--line:#dce4ef;--shadow:0 16px 40px rgba(7,27,51,.12)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);line-height:1.7}
.container{width:min(1000px,calc(100% - 40px));margin:auto}
.topbar{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{text-decoration:none;color:inherit}
.brand strong{display:block;color:var(--navy);letter-spacing:.12em}
.brand span{font-size:.8rem;color:var(--muted)}
.button{padding:12px 20px;background:var(--blue);color:#fff;text-decoration:none;border-radius:7px}
.hero{padding:160px 0 80px;color:#fff;background:radial-gradient(circle at 82% 28%,rgba(56,189,248,.28),transparent 24%),linear-gradient(135deg,var(--navy),#0b2548 55%,#102e54)}
.hero h1{font-size:clamp(2.8rem,5vw,4.8rem)}
.content{padding:80px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:45px;box-shadow:var(--shadow)}
h2{color:var(--navy);margin:28px 0 12px}
ul{margin-left:24px}
footer{background:#061528;color:#cbd9ea;padding:50px 0;margin-top:40px}