:root { color-scheme: dark; font-family: Inter, Arial, sans-serif; background: #090b0e; color: #f1f8fa; }
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 32%, #102934 0, #090b0e 56%); }
    main { width: min(100%, 680px); padding: clamp(30px, 6vw, 68px); border: 1px solid #285263; background: #0b151a; }
    .brand { display: inline-flex; align-items: center; gap: 14px; color: #f1f8fa; text-decoration: none; letter-spacing: .13em; font-family: Orbitron, Arial, sans-serif; font-size: clamp(15px, 2.5vw, 22px); }
    .brand img { width: 45px; height: 45px; object-fit: contain; }
    .brand b { font-weight: 500; background: linear-gradient(110deg, #52e4f2, #db4bd7); color: transparent; background-clip: text; }
    .eyebrow { margin: 55px 0 13px; color: #76bfcb; font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .17em; text-transform: uppercase; }
    h1 { margin: 0; font-size: clamp(30px, 6vw, 54px); line-height: 1.05; letter-spacing: -.04em; font-weight: 600; }
    p { color: #afc4ca; font-size: 17px; line-height: 1.6; }
    nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    nav a { min-width: 130px; display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; padding: 15px 17px; border: 1px solid #307386; color: #e9f8fa; text-decoration: none; font-weight: 600; }
    nav a:hover, nav a:focus-visible { border-color: #52e4f2; background: #123440; outline: none; }
    nav a span { color: #52e4f2; }