@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&display=swap");

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; background: #17070a; color: #fff8f8; font-family: Manrope, Arial, sans-serif; }
.stage {
  isolation: isolate; position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 24px;
  background: radial-gradient(circle at 48% 20%, #74273b 0, transparent 33%), radial-gradient(circle at 77% 90%, #4e1823 0, transparent 38%), linear-gradient(135deg, #17070a 0%, #35101a 48%, #16090b 100%);
}
.stage::before { position: absolute; z-index: -1; width: 140%; height: 140%; content: ""; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle, #000 0%, transparent 62%); transform: rotate(-10deg); }
.aurora { position: absolute; z-index: -1; border-radius: 50%; filter: blur(58px); mix-blend-mode: screen; will-change: transform, opacity; }
.aurora--one { width: 38rem; height: 38rem; top: -20rem; left: -17rem; background: #e83755; opacity: .68; animation: float-one 20s ease-in-out infinite alternate; }
.aurora--two { width: 34rem; height: 34rem; right: -16rem; bottom: -17rem; background: #9e0a27; opacity: .65; animation: float-two 24s ease-in-out infinite alternate; }
.aurora--three { width: 20rem; height: 20rem; right: 12%; top: 9%; background: #23966a; opacity: .15; animation: float-three 18s ease-in-out infinite alternate; }
.stage::after { position: absolute; z-index: -1; width: 24rem; height: 24rem; bottom: -12rem; left: 25%; content: ""; border-radius: 50%; background: #ff5c71; filter: blur(72px); opacity: .18; mix-blend-mode: screen; animation: float-four 22s ease-in-out infinite alternate; will-change: transform, opacity; }
.glass-card { position: relative; width: min(100%, 560px); min-height: 530px; padding: 42px 48px 36px; overflow: hidden; border: 1px solid rgba(255,220,224,.30); border-radius: 32px; background: linear-gradient(120deg, rgba(255,239,241,.17), rgba(255,255,255,.055)); box-shadow: 0 28px 80px rgba(0,0,0,.40), inset 0 1px 1px rgba(255,255,255,.24); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); }
.glass-card::before { position: absolute; top: 0; right: 0; left: 0; height: 44%; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.14), transparent); }
.card-glow { position: absolute; top: -150px; right: -130px; width: 310px; height: 310px; border-radius: 50%; background: rgba(255,146,158,.18); filter: blur(20px); }
.status, .eyebrow, .footer-text { position: relative; font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .15em; }
.status { display: inline-flex; align-items: center; gap: 8px; color: #d8f8e6; }
.status-dot { width: 8px; height: 8px; border-radius: 100%; background: #5bea9e; box-shadow: 0 0 0 4px rgba(91,234,158,.12), 0 0 16px #5bea9e; animation: blink 2s ease-in-out infinite; }
.signal { position: absolute; top: 44px; right: 48px; display: flex; align-items: end; gap: 3px; height: 18px; }
.signal i { display: block; width: 3px; border-radius: 3px; background: rgba(255,255,255,.76); }.signal i:nth-child(1) { height: 5px; }.signal i:nth-child(2) { height: 9px; }.signal i:nth-child(3) { height: 14px; }.signal i:nth-child(4) { height: 18px; background: #70edaa; }
.eyebrow { margin: 104px 0 13px; color: rgba(255,255,255,.66); }
h1 {
  position: relative;
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-size: clamp(48px, 16vw, 112px);
  font-weight: 800;
  letter-spacing: -.095em;
  line-height: .74;
  text-shadow: 0 3px 16px rgba(0,0,0,.18);
}h1 span { color: transparent; background: linear-gradient(105deg, #fff 12%, #ffc5cc 48%, #ff889a 90%); background-clip: text; -webkit-background-clip: text; }
.message { position: relative; max-width: 270px; margin: 39px 0 0; color: rgba(255,255,255,.84); font-size: 15px; font-weight: 500; line-height: 1.6; }
.divider { height: 1px; margin: 48px 0 17px; background: linear-gradient(90deg, rgba(255,255,255,.46), rgba(255,255,255,.08)); }
.footer-text { color: rgba(255,255,255,.48); font-size: 9px; }
@keyframes float-one { 0% { transform: translate3d(0, 0, 0) scale(1); } 45% { transform: translate3d(15vw, 11vh, 0) scale(1.16); } 100% { transform: translate3d(28vw, 3vh, 0) scale(.96); } }
@keyframes float-two { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-18vw, -13vh, 0) scale(1.18); } 100% { transform: translate3d(-5vw, -25vh, 0) scale(1.03); } }
@keyframes float-three { 0% { transform: translate3d(0, 0, 0) scale(.88); opacity: .08; } 48% { transform: translate3d(-17vw, 16vh, 0) scale(1.24); opacity: .2; } 100% { transform: translate3d(8vw, 29vh, 0) scale(.95); opacity: .11; } }
@keyframes float-four { 0% { transform: translate3d(-12vw, 0, 0) scale(.8); opacity: .08; } 55% { transform: translate3d(13vw, -33vh, 0) scale(1.22); opacity: .22; } 100% { transform: translate3d(31vw, -8vh, 0) scale(.9); opacity: .13; } }
@keyframes blink { 50% { opacity: .42; box-shadow: 0 0 0 6px rgba(91,234,158,0), 0 0 7px #5bea9e; } }
@media (max-width: 520px) { .stage { padding: 16px; } .glass-card { min-height: 500px; padding: 32px 29px 29px; border-radius: 26px; } .signal { top: 34px; right: 29px; } .eyebrow { margin-top: 111px; } .message { margin-top: 43px; } }
@media (prefers-reduced-motion: reduce) { .aurora, .stage::after, .status-dot { animation: none; } }