* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FF2E93, #FFD23F, #4FC3F7);
  background-size: 300% 300%;
  animation: shift 8s ease infinite;
  font-family: 'Poppins', system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

@keyframes shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.banner {
  background: #2B1332;
  color: #FFD23F;
  text-align: center;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 1rem;
}

.banner a {
  color: #FFD23F;
  text-decoration: underline wavy;
  text-underline-offset: 4px;
}

.banner a:hover { color: white; }

.wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

h1 {
  font-family: 'Bungee', system-ui, sans-serif;
  color: white;
  font-size: clamp(2rem, 8vw, 4rem);
  text-shadow: 4px 4px 0 #2B1332;
  margin: 0 0 10px;
  transform: rotate(-2deg);
}

.wink { display: inline-block; animation: bounce 1.2s ease-in-out infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

.sub {
  color: #2B1332;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.big-email-btn {
  background: #2B1332;
  color: #FFD23F;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 0 #180a1c;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.big-email-btn:hover {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #180a1c;
}

.big-email-btn:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}