* { box-sizing: border-box; }
    html { color-scheme: dark; }
    body {
      margin: 0; min-height: 100vh; display: grid; place-items: center;
      color: #EBEFF4; font: 15px/1.65 Inter, system-ui, sans-serif; letter-spacing: -.01em;
      background:
        radial-gradient(1000px 560px at 50% -14%, rgba(90,162,255,.16), transparent 64%),
        radial-gradient(820px 520px at 88% 112%, rgba(140,120,255,.12), transparent 60%),
        linear-gradient(180deg, #050506, #000);
      text-align: center; padding: 28px;
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
    .wrap { max-width: 560px; display: grid; justify-items: center; }
    .orb { position: relative; width: 150px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 30px;
      background:
        radial-gradient(closest-side at 50% 42%, rgb(255 255 255 / .95), rgb(160 205 255 / .55) 14%, transparent 38%),
        radial-gradient(closest-side at 63% 62%, rgb(83 177 255 / .6), transparent 56%),
        radial-gradient(closest-side at 36% 38%, rgb(32 128 255 / .55), transparent 58%),
        radial-gradient(closest-side at 50% 50%, #0E2148 55%, #06102A 98%);
      border: 2px solid rgb(64 150 255 / .85);
      box-shadow: 0 0 70px rgb(32 128 255 / .4), 0 0 26px rgb(83 177 255 / .32), inset 0 0 46px rgb(40 120 255 / .42);
      animation: float 7s ease-in-out infinite;
    }
    .orb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%;
      background: conic-gradient(from 0deg, transparent 0 40deg, rgb(160 210 255 / .6) 80deg, transparent 130deg, rgb(83 177 255 / .5) 210deg, transparent 260deg, rgb(134 207 245 / .45) 320deg, transparent 360deg);
      filter: blur(9px); animation: spin 7s linear infinite; }
    .orb::after { content: ""; position: absolute; inset: -8%; border-radius: 50%;
      background: repeating-conic-gradient(rgb(83 160 255 / .32) 0 2deg, transparent 2deg 9deg);
      mask-image: radial-gradient(closest-side, transparent 42%, black 62%, transparent 78%);
      animation: spin 26s linear infinite reverse; opacity: .55; }
    @keyframes spin { to { rotate: 360deg; } }
    @keyframes float { 50% { translate: 0 -8px; } }
    .logo { height: 40px; margin-bottom: 26px; }
    .pill { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .18em; color: #53B1FF; border: 1px solid rgb(32 128 255 / .4); border-radius: 999px; padding: 6px 16px; margin-bottom: 18px; background: rgb(32 128 255 / .07); }
    h1 { font-family: Archivo, Inter, sans-serif; font-size: clamp(28px, 6vw, 44px); font-weight: 680; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 14px; }
    h1 b { color: #53B1FF; font-weight: 680; }
    p.sub { color: #9AA8C4; margin: 0 0 30px; max-width: 46ch; }
    form { display: flex; gap: 9px; width: 100%; max-width: 430px; }
    input[type=email] { flex: 1; min-width: 0; height: 48px; border-radius: 13px; border: 1px solid rgb(255 255 255 / .16); background: rgb(0 0 0 / .3); color: #EBEFF4; padding: 0 16px; font: inherit; outline: 0; transition: .18s ease; }
    input[type=email]:focus { border-color: rgb(32 128 255 / .6); box-shadow: 0 0 0 3px rgb(32 128 255 / .15); }
    button { height: 48px; padding: 0 22px; border: 0; border-radius: 13px; font: inherit; font-weight: 650; color: white; cursor: pointer;
      background: linear-gradient(180deg, #6aabff, #2f6bd8); box-shadow: 0 8px 26px rgb(60 120 255 / .28); transition: .16s ease; }
    button:hover { transform: translateY(-1px); }
    .hp { position: absolute; left: -5000px; }
    .msg { min-height: 22px; margin-top: 12px; font-size: 13px; color: #7CE3A8; }
    .msg.err { color: #FC8985; }
    .foot { margin-top: 42px; color: #67759B; font-size: 12px; display: flex; gap: 18px; align-items: center; }
    .foot a { color: #8FB8E8; text-decoration: none; }
    .foot a:hover { text-decoration: underline; }