@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

:root { color-scheme: dark; font-family: Manrope, Arial, sans-serif; background: #0a1020; color: #f3f7ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 72% 28%, #2a5ee930 0, transparent 24rem), radial-gradient(circle at 20% 88%, #04caa027 0, transparent 28rem), #0a1020; }
body::before, body::after { content: ""; position: fixed; border: 1px solid #9fc3ff20; border-radius: 50%; pointer-events: none; }
body::before { width: 64vw; height: 64vw; right: -25vw; top: -35vw; }
body::after { width: 42vw; height: 42vw; left: -22vw; bottom: -28vw; }
main { width: min(88vw, 760px); padding: clamp(2.6rem, 8vw, 7rem) 0; position: relative; }
.eyebrow { margin: 0 0 1.3rem; color: #73f5c5; text-transform: uppercase; letter-spacing: .15em; font: 500 .72rem/1.4 "DM Mono", monospace; }
h1 { margin: 0; letter-spacing: -.085em; font-size: clamp(4rem, 15vw, 9.5rem); font-weight: 800; line-height: .78; }
.lead { max-width: 36rem; margin: 2.3rem 0; color: #cad5ec; font-size: clamp(1.1rem, 2.2vw, 1.38rem); line-height: 1.6; }
.modules { display: flex; flex-wrap: wrap; gap: .55rem; }
.modules span { padding: .48rem .76rem; border: 1px solid #9fc3ff38; border-radius: 999px; background: #15203a8c; color: #dfe9ff; font: 500 .78rem/1 "DM Mono", monospace; }
.status { margin-top: 3.4rem; color: #8191af; font-size: .83rem; }
@media (max-width: 560px) { h1 { letter-spacing: -.075em; } .lead { margin: 1.8rem 0; } }