/* Welcome page — focused styles replacing the inherited Tailwind bundle. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  color-scheme: dark;
}
body {
  background: radial-gradient(circle at 82% 7%, #174c83 0, transparent 30rem), linear-gradient(145deg, #0b2449, #07142e 65%, #0d3156);
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.125rem;
  line-height: 1.625;
  min-height: 100vh;
}
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.text-center { text-align: center; }
.mb-8 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

#main-content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: rgba(4, 17, 39, .48);
  border: 1px solid rgba(157, 206, 255, .16);
  border-radius: .75rem;
  box-shadow: 0 24px 70px rgba(2, 10, 29, .25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#main-content:focus { outline: none; }
#main-content h1 {
  margin: 0 0 2.5rem;
  padding: 0;
  color: #fff;
  font: 700 clamp(2rem, 4vw, 3.1rem)/1.15 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-align: center;
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1));
}
.welcome-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 15px;
  color: #eef7ff;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.025em;
}
.welcome-step-title span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 39px;
  height: 39px;
  padding: 0 8px;
  border-radius: 11px;
  background: #ffd22e;
  color: #101b32;
  font-size: .86rem;
  font-weight: 850;
}
#main-content .banner-zoom {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(157, 206, 255, .28);
  border-radius: 19px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
  transition: transform .5s ease, box-shadow .5s ease;
  will-change: transform;
  transform: translateZ(0);
}
#main-content .banner-zoom:hover { transform: none; }
#main-content .btn-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  overflow: hidden;
  min-height: 48px;
  padding: 12px 23px;
  border-radius: 11px;
  background: #0565ff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
#main-content .btn-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%);
  transition: width .6s, height .6s;
}
#main-content .btn-glow:hover::before { width: 300px; height: 300px; }
#main-content a:focus-visible { outline: 3px solid #ffd22e; outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: #7c3aed;
  color: #fff;
  border-radius: 4px;
}
.skip-link:focus {
  z-index: 10001;
  width: auto;
  height: auto;
  padding: 12px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: #ffd22e;
  color: #101b32;
  font: 700 15px/1.2 ui-sans-serif, system-ui, sans-serif;
}
#confetti-canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
@media (min-width: 769px) and (max-width: 1024px) {
  #main-content { max-width: 90%; }
}
@media (max-width: 768px) {
  #main-content { max-width: 100%; margin: 0; padding: 1.5rem 1rem; }
  #main-content h1 { font-size: 1.75rem; margin-bottom: 1.5rem; padding: 0 .5rem; }
  #main-content .btn-glow { width: 100%; }
  .mb-8 { margin-bottom: 1rem; }
  .text-xl { font-size: 1rem; }
}
@media (max-width: 640px) {
  #main-content { width: calc(100% - 24px); max-width: none; margin: 12px; padding: 22px 14px; }
  #main-content h1 { font-size: 1.5rem; line-height: 1.18; margin-bottom: 28px; }
  .welcome-step-title { align-items: flex-start; gap: 8px; line-height: 1.35; }
  .welcome-step-title span { min-width: 34px; height: 34px; }
  #main-content .banner-zoom { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}