:root {
  color-scheme: dark;
  --night: #020817;
  --sky: #38a0ff;
  --pale-sky: #8ed2ff;
  --lime: #b8ef55;
  --text: #f8fbff;
  --muted: #8b98aa;
  --mono: "JetBrains Mono", monospace;
  --sans: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
}

.page-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

.ambient, .ambient > div { position: absolute; inset: 0; pointer-events: none; }
.ambient { z-index: -1; overflow: hidden; }
.deep-wash { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(30, 88, 180, .28), transparent 65%); }
.blue-bloom { inset: -25% auto auto 50% !important; width: 110vmin; height: 80vmin; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(56, 150, 255, .14), transparent 62%); filter: blur(48px); }
.lime-bloom { inset: auto auto -33% 8% !important; width: 90vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(163, 230, 53, .06), transparent 60%); filter: blur(48px); }
.edge-bloom { inset: 30% -10% auto auto !important; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(56, 130, 246, .09), transparent 60%); filter: blur(48px); }
.court-lines { opacity: .05; background-image: linear-gradient(to right, rgba(148, 197, 255, .5) 1px, transparent 1px); background-size: 120px 100%; }
.vignette { background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(2, 8, 23, .85) 100%); }
.top-line { position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .4), transparent); }

.hero { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }
.logo-wrap { position: relative; }
.logo-wrap img { display: block; width: clamp(112px, 15vw, 160px); height: clamp(112px, 15vw, 160px); border-radius: 16px; object-fit: cover; box-shadow: 0 20px 60px -15px rgba(56, 150, 255, .35); }
.logo-glow { position: absolute; z-index: -1; inset: -15%; border-radius: 50%; background: radial-gradient(circle, rgba(56, 160, 255, .22), rgba(163, 230, 53, .07) 45%, transparent 70%); filter: blur(24px); animation: logo-glow 7s ease-in-out infinite; }
.corner { position: absolute; width: 24px; height: 24px; }
.top-left { top: -20px; left: -20px; border-top: 1px solid rgba(56, 189, 248, .5); border-left: 1px solid rgba(56, 189, 248, .5); }
.top-right { top: -20px; right: -20px; border-top: 1px solid rgba(56, 189, 248, .5); border-right: 1px solid rgba(56, 189, 248, .5); }
.bottom-left { bottom: -20px; left: -20px; border-bottom: 1px solid rgba(190, 242, 100, .4); border-left: 1px solid rgba(190, 242, 100, .4); }
.bottom-right { right: -20px; bottom: -20px; border-right: 1px solid rgba(190, 242, 100, .4); border-bottom: 1px solid rgba(190, 242, 100, .4); }
.eyebrow, .message small, .status, footer { font-family: var(--mono); text-transform: uppercase; }
.eyebrow { margin: 48px 0 0; color: rgba(125, 211, 252, .8); font-size: 12px; font-weight: 500; letter-spacing: .55em; }
h1 { max-width: 900px; margin: 24px 0 0; font-size: clamp(40px, 6.5vw, 64px); line-height: 1.08; letter-spacing: -.02em; }
h1 span { background: linear-gradient(90deg, #7dd3fc, #38a0ff, #bef264); -webkit-background-clip: text; background-clip: text; color: transparent; }
.description { max-width: 590px; margin: 28px 0 0; color: var(--muted); font-size: 18px; font-weight: 300; line-height: 1.65; }
.divider { display: flex; align-items: center; gap: 12px; margin-top: 56px; }
.divider span { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .5)); }
.divider span:last-child { background: linear-gradient(90deg, rgba(56, 189, 248, .5), transparent); }
.divider i { width: 4px; height: 4px; transform: rotate(45deg); background: rgba(190, 242, 100, .7); }
.message { margin-top: 48px; }
.message p { margin: 0; color: #dce5ef; font-size: 20px; font-weight: 500; letter-spacing: .02em; }
.message small { display: block; margin-top: 16px; color: #687486; font-size: 11px; letter-spacing: .4em; }
.status { display: inline-flex; align-items: center; gap: 12px; margin-top: 56px; padding: 10px 20px; border: 1px solid rgba(56, 189, 248, .2); border-radius: 999px; background: rgba(56, 189, 248, .04); color: rgba(186, 230, 253, .9); font-size: 11px; letter-spacing: .35em; }
.status-dot, .status-dot i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.status-dot { position: relative; }
.status-dot i { position: absolute; animation: pulse-ring 2.4s cubic-bezier(.22, 1, .36, 1) infinite; }
footer { position: relative; z-index: 1; padding: 16px 24px 32px; text-align: center; color: #4b5668; font-size: 10px; letter-spacing: .3em; }
footer p { margin: 0; }
.fade-up { opacity: 0; animation: fade-up .9s cubic-bezier(.22, 1, .36, 1) var(--delay) forwards; }

@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes logo-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes pulse-ring { from { transform: scale(1); opacity: .5; } to { transform: scale(2.4); opacity: 0; } }
@keyframes ambient-a { 0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); } 50% { transform: translate3d(5%, 6%, 0) scale(1.12); } }
@keyframes ambient-b { 0%, 100% { transform: translate3d(4%, 6%, 0) scale(1.08); } 50% { transform: translate3d(-5%, -5%, 0) scale(1); } }
.ambient-a { animation: ambient-a 26s ease-in-out infinite; }
.ambient-b { animation: ambient-b 32s ease-in-out infinite; }

@media (max-width: 600px) {
  .hero { padding: 64px 20px; }
  .eyebrow { margin-top: 42px; font-size: 10px; letter-spacing: .42em; }
  .description { font-size: 16px; }
  .message p { font-size: 18px; }
  .message small, .status { font-size: 9px; letter-spacing: .25em; }
  .status { max-width: 100%; padding: 10px 14px; }
  .divider, .status { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-a, .ambient-b, .logo-glow, .status-dot i, .fade-up { animation: none; }
  .fade-up { opacity: 1; }
}