body { font-family: "DM Sans", sans-serif; }

:root {
  --bg: #fdf2f8;
  --text: #0f172a;
  --muted: #475569;
  --surface: #ffffff;
  --surface-border: #fbcfe8;
  --accent: #db2777;
  --accent-dark: #be185d;
  --accent-light: #fce7f3;
  --accent-contrast: #ffffff;
  --pill-bg: #fce7f3;
  --pill-text: #be185d;
  --hairline: #fbcfe8;
  --header: #ffffff;
  --shadow: 219, 39, 119;
}

body {
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

main { flex-grow: 1; padding-bottom: 82px; }
@media (min-width: 768px) { main { padding-bottom: 0; } }

.t-head { color: var(--text); }
.t-body { color: var(--muted); }
.accent { color: var(--accent); }
.surface { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; }
.surface-grad { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); color: var(--accent-contrast); }
.hairline { border-color: var(--hairline); }
.btn-accent { background: var(--accent); color: var(--accent-contrast); transition: all 0.2s; }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px); }
.icon-chip { background: var(--pill-bg); color: var(--accent); }
.stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }

.swipe-stack { position: relative; width: 100%; aspect-ratio: 3/4; max-width: 380px; margin: 0 auto; }
.swipe-card {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 25px 50px -12px rgba(var(--shadow), 0.4);
  will-change: transform, opacity;
}
.swipe-card img { width: 100%; height: 100%; object-fit: cover; }
.swipe-card.from-left { animation: swipe-from-left 96s infinite linear; }
.swipe-card.from-right { animation: swipe-from-right 96s infinite linear; }
@keyframes swipe-from-left {
  0% { transform: translateX(-130%) rotate(-14deg); opacity: 0; }
  1% { transform: translateX(-130%) rotate(-14deg); opacity: 0; }
  2.6% { transform: translateX(0) rotate(0); opacity: 1; }
  3.6% { transform: translateX(0) rotate(0); opacity: 1; }
  4.4% { transform: translateX(130%) rotate(14deg); opacity: 0; }
  100% { transform: translateX(130%) rotate(14deg); opacity: 0; }
}
@keyframes swipe-from-right {
  0% { transform: translateX(130%) rotate(14deg); opacity: 0; }
  1% { transform: translateX(130%) rotate(14deg); opacity: 0; }
  2.6% { transform: translateX(0) rotate(0); opacity: 1; }
  3.6% { transform: translateX(0) rotate(0); opacity: 1; }
  4.4% { transform: translateX(-130%) rotate(-14deg); opacity: 0; }
  100% { transform: translateX(-130%) rotate(-14deg); opacity: 0; }
}

.card-icon {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px -4px rgba(var(--shadow), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  animation-duration: 96s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.card-icon-heart { top: 16px; right: 16px; color: var(--accent); animation-name: card-icon-heart; }
.card-icon-chat { top: 16px; left: 16px; color: var(--accent-dark); animation-name: card-icon-chat; }
@keyframes card-icon-heart {
  0%, 2.6% { transform: scale(1) rotate(0); }
  2.75% { transform: scale(1.2) rotate(-14deg); }
  2.95% { transform: scale(1.2) rotate(14deg); }
  3.15% { transform: scale(1.2) rotate(-14deg); }
  3.35% { transform: scale(1.2) rotate(14deg); }
  3.55%, 100% { transform: scale(1) rotate(0); }
}
@keyframes card-icon-chat {
  0%, 2.6% { transform: scale(1) rotate(0); }
  2.8% { transform: scale(1.15) rotate(12deg); }
  3% { transform: scale(1.15) rotate(-12deg); }
  3.2% { transform: scale(1.15) rotate(12deg); }
  3.4% { transform: scale(1.15) rotate(-12deg); }
  3.55%, 100% { transform: scale(1) rotate(0); }
}

.tag-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  border: 1px solid var(--surface-border);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s;
}
.tag-cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.tag-cta .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }

.alt-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 22px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--accent-dark);
  border: 2px solid var(--surface-border);
  font-weight: 800;
  font-size: 14px;
  transition: all 0.2s;
}
.alt-cta:hover { border-color: var(--accent); transform: translateY(-1px); }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--pill-bg);
  color: var(--accent-dark);
  border: 1px solid var(--surface-border);
  font-size: 12px;
  font-weight: 800;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.2s infinite;
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--surface-border);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 25px -10px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 768px) { .sticky-cta { display: none; } }

.scarcity-bar {
  background: var(--pill-bg);
  border-bottom: 1px solid var(--surface-border);
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
}
.scarcity-bar .spot-count { color: var(--accent); font-weight: 900; padding: 0 6px; }
.clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  color: var(--accent-dark);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
}

.prose h2 { color: var(--text); font-weight: 800; font-size: 1.35rem; margin: 1.6rem 0 0.6rem; }
.prose p { margin: 0.75rem 0; }
.prose ul { margin: 0.75rem 0 0.75rem 1.1rem; list-style: disc; }
.prose li { margin: 0.35rem 0; }
.prose a { color: var(--accent-dark); font-weight: 700; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary .chev { transform: rotate(180deg); }
.chev { transition: transform 0.2s; }

.hero-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.01em;
  transition: all 0.2s;
  animation: heroBob 2.6s ease-in-out infinite;
}
.hero-cta::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: conic-gradient(from var(--angle, 0deg), var(--accent), var(--accent-light), #fde047, var(--accent-light), var(--accent));
  z-index: -1;
  animation: rotateBorder 2.2s linear infinite;
}
.hero-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: conic-gradient(from var(--angle, 0deg), var(--accent), var(--accent-light), #fde047, var(--accent-light), var(--accent));
  z-index: -2;
  filter: blur(16px);
  opacity: 0.55;
  animation: rotateBorder 2.2s linear infinite;
}
.hero-cta:hover { transform: translateY(-3px) scale(1.05); animation: none; }
.hero-cta .flame { display: inline-block; font-size: 20px; animation: shakeFlame 0.55s ease-in-out infinite; }
.hero-cta .pulse { width: 9px; height: 9px; border-radius: 9999px; background: #fde047; box-shadow: 0 0 14px #fde047; animation: pulse 1.2s infinite; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rotateBorder { to { --angle: 360deg; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shakeFlame { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.1); } }
@keyframes heroBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

#toast-stack {
  position: fixed;
  bottom: 92px;
  left: 12px;
  right: 12px;
  max-width: 280px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 768px) {
  #toast-stack { bottom: 16px; left: 16px; right: auto; }
}
.toast {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 12px 28px -8px rgba(var(--shadow), 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn 0.35s ease-out, toastOut 0.4s ease-in 4s forwards;
}
.toast .dot { width: 7px; height: 7px; border-radius: 9999px; background: #10b981; flex-shrink: 0; }
@keyframes toastIn { from { transform: translateX(-120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(-120%); opacity: 0; } }