:root {
  --welcome-ink: #0f172a;
  --welcome-muted: #64748b;
  --welcome-surface: rgba(255, 255, 255, 0.92);
  --welcome-accent: #2563eb;
}

.welcome-page {
  min-height: 100dvh;
  margin: 0;
  color: var(--welcome-ink);
  background:
    radial-gradient(ellipse 80% 60% at 10% 10%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(14, 165, 233, 0.16), transparent 50%),
    linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #e2e8f0 100%);
}

.welcome-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.welcome-card {
  width: min(28rem, 100%);
  padding: 2.25rem 2rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 1rem;
  background: var(--welcome-surface);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  text-align: center;
  backdrop-filter: blur(8px);
}

.welcome-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  background: var(--welcome-accent);
  color: #fff;
  font-size: 1.45rem;
}

.welcome-brand {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.welcome-tagline {
  margin: 0.55rem 0 0;
  color: var(--welcome-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.75rem;
}

.welcome-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.65rem;
  font-weight: 600;
}

.welcome-footnote {
  margin: 1.35rem 0 0;
  color: var(--welcome-muted);
  font-size: 0.8rem;
}