:root {
  --bg: #07111b;
  --card: rgba(12, 29, 44, 0.9);
  --text: #f7fbff;
  --muted: #a9bac9;
  --line: rgba(151, 199, 232, 0.16);
  --blue: #159ff3;
  --orange: #ff6b35;
  --green: #36d99a;
  --heading: "Fredoka", ui-rounded, system-ui, sans-serif;
  --body: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 1.25rem;
  place-items: center;
  background:
    radial-gradient(circle at 15% 12%, rgba(21, 159, 243, 0.18), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(255, 107, 53, 0.12), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: var(--body);
}

.transition-card {
  width: min(100%, 43rem);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--card);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.035);
  text-align: center;
}

.brand { display: inline-flex; align-items: center; gap: 0.72rem; color: var(--text); font-family: var(--heading); font-weight: 700; text-decoration: none; }
.brand img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.eyebrow { margin: 2.2rem 0 0.65rem; color: var(--blue); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--heading); font-size: clamp(2.4rem, 8vw, 4.7rem); letter-spacing: -0.045em; line-height: 0.98; }
.copy { max-width: 34rem; margin: 1.15rem auto 0; color: var(--muted); font-size: clamp(0.92rem, 2vw, 1.05rem); }
.continue-link { display: inline-flex; margin-top: 1.8rem; border: 1px solid rgba(21, 159, 243, 0.5); border-radius: 999px; padding: 0.82rem 1.15rem; align-items: center; gap: 0.65rem; background: linear-gradient(135deg, #1aacf9, #087dce); box-shadow: 0 0.85rem 2.1rem rgba(0, 125, 205, 0.25); color: #fff; font-weight: 700; text-decoration: none; }
.continue-link:hover { filter: brightness(1.1); }
.continue-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.countdown { margin: 0.9rem 0 0; color: #71889b; font-size: 0.7rem; }
.signal { display: flex; width: 3.6rem; margin: 1.6rem auto 0; gap: 0.45rem; justify-content: center; }
.signal i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); animation: light-up 1.2s ease-in-out infinite; }
.signal i:nth-child(2) { animation-delay: 0.18s; }
.signal i:nth-child(3) { animation-delay: 0.36s; }
@keyframes light-up { 0%, 70%, 100% { background: var(--line); } 35% { background: var(--green); box-shadow: 0 0 1rem rgba(54, 217, 154, 0.75); } }
@media (prefers-reduced-motion: reduce) { .signal i { animation: none; background: var(--green); } }