:root { color-scheme: dark; font-family: 'Segoe UI', sans-serif; color: #f0faf9; background: #080e11; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 38%, #123f4560, transparent 55%), #080e11; position: relative; }
body::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(transparent, black 30%, transparent); }
.header { width: min(100%, 1280px); margin: 0 auto; padding: 24px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.logo { display: block; width: 190px; height: 54px; overflow: hidden; }
.logo img { display: block; width: 100%; height: auto; position: relative; top: 50%; transform: translateY(-50%); filter: brightness(0) invert(1); }
.logo:focus-visible { outline: 2px solid #70ddd0; outline-offset: 6px; border-radius: 4px; }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: #b9cece; border: 1px solid #ffffff18; background: #ffffff04; padding: 10px 15px; border-radius: 100px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #b4f6dc; box-shadow: 0 0 12px #85ffcd80; }
.content { flex: 1; width: min(100%, 960px); margin: 0 auto; padding: 25px 28px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.eyebrow { margin: 0 0 22px; color: #81d9cf; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(40px, 6.8vw, 78px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; }
h1 span { background: linear-gradient(100deg, #e6faf5 5%, #78ddc6 48%, #60c7de); color: transparent; background-clip: text; }
.description { max-width: 470px; margin: 26px 0 0; font-size: 16px; line-height: 1.85; color: #9fb3b8; text-wrap: balance; }
.launch-note { margin-top: 35px; padding: 17px 28px; border: 1px solid #8cdbc924; background: linear-gradient(120deg, #78ddc609, #ffffff03); border-radius: 14px; font-size: 13px; line-height: 1.8; color: #cee5df; }
.launch-note span { display: block; color: #98b1b3; font-size: 12px; }
.footer { position: relative; padding: 24px; text-align: center; font-size: 10px; line-height: 1.8; letter-spacing: .6px; color: #91aaad; }
.footer span { padding: 0 8px; }
@media (max-width: 480px) { .header { padding: 20px; gap: 12px; } .logo { width: 145px; height: 42px; } .status { font-size: 11px; padding: 8px 10px; } .content { padding: 25px 20px 40px; } .description { font-size: 15px; } .launch-note { padding: 14px 16px; } }
/* Reveal the original blue XP while keeping SOCIAL legible on the dark background. */
.logo { position: relative; }
.logo img.logo-color { position: absolute; left: 0; filter: none; clip-path: polygon(67% 0, 100% 0, 100% 100%, 66.5% 100%, 66.5% 70%, 70.5% 55%, 70.5% 45%, 67% 28.5%); opacity: 0; transition: opacity 180ms ease; }
.logo:hover img.logo-color, .logo:focus-visible img.logo-color { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo img.logo-color { transition: none; } }