* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #04102e; color: #fff; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 15% 20%, rgba(0,105,255,.28), transparent 32rem),
              radial-gradient(circle at 85% 80%, rgba(255,123,0,.16), transparent 26rem),
              linear-gradient(135deg, #03091c 0%, #08215c 58%, #06132f 100%);
}
.redirect-card {
  width: min(100%, 540px); padding: clamp(28px, 6vw, 54px); text-align: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 24px;
  background: rgba(5,16,43,.78); box-shadow: 0 24px 80px rgba(0,0,0,.38); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 24px; line-height: 1; transform: skew(-7deg); }
.brand-name { font-size: clamp(19px,4vw,28px); font-weight: 900; font-style: italic; letter-spacing: -1.2px; color: #f4f8ff; }
.brand-number { font-size: clamp(48px,10vw,72px); font-weight: 1000; font-style: italic; letter-spacing: -5px; color: #ff8a00; text-shadow: 3px 4px 0 #0754cf, 0 0 24px rgba(255,138,0,.22); }
.live-mark { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(72,154,255,.4); border-radius: 999px; color: #b9d7ff; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.live-mark span { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px rgba(255,59,48,.8); }
h1 { margin: 25px 0 12px; font-size: clamp(27px,5vw,38px); line-height: 1.12; letter-spacing: -.8px; }
.description { max-width: 390px; margin: 0 auto; color: #c5d0e8; font-size: 16px; line-height: 1.65; }
.description strong { color: #fff; }
.countdown { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin: 26px 0 14px; }
#seconds { color: #ff9a16; font-size: 48px; font-weight: 900; font-variant-numeric: tabular-nums; }
.countdown-label { color: #b9c8e4; font-size: 14px; }
.progress-track { width: 100%; height: 6px; overflow: hidden; margin-bottom: 28px; border-radius: 99px; background: rgba(255,255,255,.13); }
.progress-bar { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0877ff,#ff9100); transition: width 1s linear; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 23px; border-radius: 12px; background: linear-gradient(100deg,#0877ff,#0752d5); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 10px 26px rgba(0,87,255,.25); transition: transform .2s ease,filter .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.button:focus-visible { outline: 3px solid #ff9a16; outline-offset: 4px; }
.footer-note { margin: 24px 0 0; color: #7f91b5; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; } }
