:root { color-scheme: dark; --accent: #74f7ff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
#background, .shade { position: fixed; inset: 0; }
#background { background-color: #000; background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.02); transition: opacity .35s ease; }
.shade { background: linear-gradient(90deg, rgba(2,4,7,.9), rgba(2,4,7,.48) 56%, rgba(2,4,7,.72)), linear-gradient(0deg, rgba(2,4,7,.78), transparent 55%); }
main { position: relative; z-index: 1; min-height: calc(100vh - 46px); width: min(1100px, calc(100% - 48px)); margin: auto; padding: clamp(90px, 18vh, 190px) 0 80px; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font: 700 12px/1.2 monospace; letter-spacing: .24em; text-transform: uppercase; }
h1 { max-width: 900px; margin: 0; font-size: clamp(64px, 14vw, 170px); line-height: .78; letter-spacing: -.065em; text-transform: uppercase; }
.status { margin: 30px 0 38px; color: rgba(255,255,255,.67); font-size: clamp(16px, 2vw, 23px); letter-spacing: .08em; text-transform: uppercase; }
.back { display: inline-block; padding: 13px 18px; border: 1px solid rgba(116,247,255,.38); color: var(--accent); text-decoration: none; text-transform: uppercase; font: 700 12px/1 monospace; letter-spacing: .12em; backdrop-filter: blur(8px); }
.back:hover { background: rgba(116,247,255,.12); }
.items { display: none; }
footer { position: relative; z-index: 1; min-height: 46px; display: flex; gap: 26px; align-items: center; padding: 0 24px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.48); background: rgba(2,4,7,.66); font: 11px/1 monospace; letter-spacing: .1em; }
footer span:last-child { margin-left: auto; color: var(--accent); }
@media (max-width: 620px) { main { width: calc(100% - 30px); } footer { gap: 10px; padding: 0 15px; font-size: 9px; } footer span:nth-child(2) { display: none; } }