:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050b16;
  color: #f4f8ff;
}

* { box-sizing: border-box; }

body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #050b16; }

.stage { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(27, 93, 151, .25), transparent 36rem), linear-gradient(145deg, #071522, #050b16 65%); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: linear-gradient(rgba(108, 171, 227, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 171, 227, .08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.ambient { position: absolute; z-index: -1; border-radius: 999px; filter: blur(12px); opacity: .5; pointer-events: none; }
.ambient-one { width: 24rem; height: 24rem; top: -10rem; left: -8rem; background: #0c7990; }
.ambient-two { width: 20rem; height: 20rem; right: -9rem; bottom: -8rem; background: #2747a6; }
.panel { width: min(100%, 720px); padding: clamp(28px, 6vw, 68px); border: 1px solid rgba(142, 201, 241, .2); border-radius: 28px; background: linear-gradient(145deg, rgba(17, 35, 56, .9), rgba(7, 16, 30, .9)); box-shadow: 0 28px 90px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .06); text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #9edffc; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ce3af; box-shadow: 0 0 16px #4ce3af; }
.rule { width: 72px; height: 1px; margin: 28px auto; background: linear-gradient(90deg, transparent, #69c9f2, transparent); }
h1 { margin: 0; font-size: clamp(3rem, 12vw, 7.2rem); font-weight: 900; letter-spacing: -.07em; line-height: .88; text-wrap: balance; }
h1 em { color: #6fd5f5; font-style: normal; text-shadow: 0 0 34px rgba(111, 213, 245, .25); }
.subtitle { max-width: 34rem; margin: 28px auto 0; color: #a9bad0; font-size: clamp(.95rem, 2vw, 1.1rem); line-height: 1.6; }
.meta { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; color: #7188a4; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.meta-separator { color: #4eaccb; }

@media (max-width: 480px) { .stage { padding: 16px; } .panel { border-radius: 22px; padding: 36px 22px; } h1 { font-size: clamp(2.7rem, 16vw, 4.4rem); } .meta { flex-wrap: wrap; justify-content: center; gap: 8px; } }