* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8e53 50%, #ff6b9d 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Georgia', serif;
  overflow: hidden;
  position: relative;
}
.hearts-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.float-heart {
  position: absolute;
  bottom: -50px;
  animation: floatUp linear forwards;
  user-select: none;
}
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-110vh) rotate(20deg); opacity: 0; }
}
.card {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, #fff0f5, #ffe4f0);
  border-radius: 24px;
  padding: 4px;
  box-shadow: 0 20px 60px rgba(180,0,80,0.35), 0 0 0 4px #ff6b9d, 0 0 0 8px #ffadd0;
  max-width: 560px; width: 90vw;
  animation: popIn 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes popIn {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.card-inner { background: linear-gradient(160deg, #fff8fb, #fff0f7); border-radius: 20px; padding: 36px 32px; text-align: center; }
.top-logos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.logo-box { background: linear-gradient(135deg, #ff6b9d, #ff8e53); color: white; border-radius: 12px; padding: 10px 20px; font-size: 13px; font-weight: bold; box-shadow: 0 4px 12px rgba(255,107,157,0.4); }
.logo-box span { font-size: 14px; }
.plus { font-size: 28px; color: #ff6b9d; font-weight: bold; }
.heart-big { font-size: 72px; animation: heartbeat 1.2s ease-in-out infinite; display: block; margin: 8px 0; }
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}
h1 { font-size: 2rem; color: #c0005a; margin-bottom: 16px; text-shadow: 1px 1px 3px rgba(192,0,90,0.2); }
.recipients { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.recipient { background: linear-gradient(135deg, #ff6b9d, #c0005a); color: white; border-radius: 50px; padding: 8px 22px; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(192,0,90,0.35); }
.amp { font-size: 1.5rem; color: #ff6b9d; font-weight: bold; }
.message { color: #6b002e; line-height: 1.75; font-size: 0.97rem; }
.message p { margin-bottom: 12px; }
.message strong { color: #c0005a; }
.sign-off { margin-top: 20px; font-size: 1.05rem; color: #8b0040; font-style: italic; }
.bottom-hearts { font-size: 1.5rem; margin-top: 16px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }