:root {
    color-scheme: dark;
    font-family: Arial, Helvetica, sans-serif;
    color: #f6f8ff;
    background: #070d3b;
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-width: 320px; min-height: 100vh; min-height: 100svh; margin: 0; overflow-x: hidden; }
a { color: inherit; }
a:hover, button:hover, [role="button"]:hover { text-decoration: none !important; }
a:focus-visible { outline: 2px solid #57cdf2; outline-offset: 6px; }

.site-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 56% 43%, #10215b 0%, #0b174c 35%, #070d3b 77%); }
.background-glow { position: absolute; width: 66vw; height: 70vh; left: -15vw; bottom: -40vh; border-radius: 50%; background: #11175b; filter: blur(48px); }
.background-blob { position: absolute; display: block; opacity: .55; }
.background-blob-top { width: 420px; height: 330px; left: -105px; top: -215px; border-radius: 48% 52% 64% 36% / 52% 48% 52% 48%; background: linear-gradient(150deg, #033d6a, #07113c 72%); transform: rotate(-22deg); }
.background-blob-bottom { width: 390px; height: 265px; left: 27%; bottom: -190px; border-radius: 46% 54% 37% 63% / 60% 35% 65% 40%; background: linear-gradient(130deg, #b069cc, #6d00e9 80%); transform: rotate(-24deg); filter: blur(1px); }

.page-shell { position: relative; display: flex; flex-direction: column; width: min(100% - 80px, 1140px); min-height: 100vh; min-height: 100svh; margin: auto; }
.site-header { display: flex; align-items: center; min-height: 92px; }
.brand { font-size: 23px; line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.brand-dot { color: #53c9f1; }
.site-main { flex: 1; display: flex; align-items: center; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; width: 100%; min-height: 650px; gap: 20px; }
.hero-copy { position: relative; z-index: 2; padding: 30px 0 64px; }
.eyebrow { display: inline-block; margin-bottom: 28px; color: #58c6ef; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(50px, 5.3vw, 76px); line-height: 1.08; font-weight: 400; letter-spacing: -.04em; text-shadow: 0 2px 18px #070d3b35; }
.hero-code { font-size: clamp(150px, 20vw, 260px); line-height: .9; font-weight: 500; letter-spacing: -.09em; }
.hero-description { margin: 28px 0 0; color: #b7bfdc; font-size: 18px; line-height: 1.55; }

.hero-art { position: relative; width: 100%; height: 600px; pointer-events: none; }
.orb { position: absolute; display: block; filter: saturate(1.1); }
.orb-purple { width: 390px; height: 430px; top: 60px; right: 50px; border-radius: 58% 42% 56% 44% / 40% 45% 55% 60%; background: radial-gradient(circle at 24% 28%, #a65ac8 0%, #8134c5 45%, #470bc4 82%); transform: rotate(27deg); opacity: .84; }
.orb-cyan { width: 325px; height: 300px; right: 135px; bottom: 16px; border-radius: 61% 39% 35% 65% / 50% 60% 40% 50%; background: radial-gradient(circle at 30% 24%, #4bd3ee, #2c9cdb 55%, #366ad0 100%); transform: rotate(29deg); opacity: .9; mix-blend-mode: screen; }
.orb-blue-small { width: 120px; height: 112px; left: -48px; top: 120px; border-radius: 58% 42% 62% 38% / 43% 58% 42% 57%; background: radial-gradient(circle at 32% 25%, #58d1ee, #276cb6 78%); transform: rotate(-28deg); opacity: .83; }
.orb-violet-small { width: 105px; height: 100px; right: 0; top: 167px; border-radius: 53% 47% 42% 58% / 43% 60% 40% 57%; background: radial-gradient(circle at 32% 20%, #ca49ee, #7900df 76%); opacity: .9; }
.orb-top { width: 130px; height: 115px; right: -110px; top: -74px; border-radius: 58% 42% 45% 55% / 49% 59% 41% 51%; background: linear-gradient(140deg, #47c8df, #204f9e); transform: rotate(20deg); opacity: .47; }

.site-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 76px; color: #a5b0d0; font-size: 13px; }
.not-found { position: relative; z-index: 2; padding: 100px 0; }
.not-found h1 { font-size: clamp(52px, 6vw, 84px); }
.not-found p { margin: 26px 0; color: #b7bfdc; font-size: 18px; }
.not-found a { color: #62ccef; text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 900px) {
    .page-shell { width: min(100% - 48px, 720px); }
    .hero { min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 40px 0 65px; }
    .hero-copy { padding: 32px 0 0; }
    .hero-art { width: min(100%, 560px); height: 400px; margin: -5px auto 0; }
    .orb-purple { top: 12px; right: 65px; width: 290px; height: 325px; }
    .orb-cyan { width: 255px; height: 225px; bottom: 0; right: 130px; }
    .orb-blue-small { left: 25px; top: 40px; width: 90px; height: 85px; }
    .orb-violet-small { right: 23px; top: 97px; width: 78px; height: 74px; }
    .orb-top { right: 0; top: -28px; }
}
@media (max-width: 560px) {
    .page-shell { width: calc(100% - 40px); }
    .site-header { min-height: 80px; }
    .brand { font-size: 20px; }
    .hero { padding: 18px 0 38px; }
    .hero-copy { padding: 40px 0 0; }
    .eyebrow { font-size: 10px; margin-bottom: 24px; }
    h1 { font-size: clamp(44px, 11vw, 60px); }
    .hero-code { font-size: clamp(150px, 37vw, 185px); }
    .hero-description { margin-top: 24px; font-size: 15px; }
    .hero-art { height: 300px; margin-top: 10px; }
    .orb-purple { top: 5px; right: 20px; width: 225px; height: 250px; }
    .orb-cyan { width: 188px; height: 170px; bottom: 0; right: 67px; }
    .orb-blue-small { left: 0; top: 65px; width: 62px; height: 58px; }
    .orb-violet-small { right: 0; top: 90px; width: 65px; height: 62px; }
    .orb-top { display: none; }
    .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; min-height: 72px; font-size: 11px; }
    .background-blob-bottom { left: -60px; bottom: -210px; }
}