:root {
  --coral: #ff5e5b;
  --gold: #ffd93d;
  --ink: #0e0b16;
  --cream: #fdf8f0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Bricolage Grotesque", sans-serif; }

/* Tailwind arbitrary font class fallback */
.font-\[Bricolage_Grotesque\] { font-family: "Bricolage Grotesque", sans-serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }

/* ---- Confetti ---- */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ---- Hero staggered entrance ---- */
.hero-item {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-item:nth-child(1) { animation-delay: 0.05s; }
.hero-item:nth-child(2) { animation-delay: 0.18s; }
.hero-item:nth-child(3) { animation-delay: 0.32s; }
.hero-item:nth-child(4) { animation-delay: 0.46s; }
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Price badge pulse ---- */
.price-badge {
  animation: pulseBadge 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.6);
}
@keyframes pulseBadge {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.06); }
}

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Benefit card hover lift ---- */
.benefit-card:hover {
  transform: translateY(-6px);
  border-color: var(--coral);
  box-shadow: 0 18px 40px -18px rgba(255, 94, 91, 0.5);
}

/* ---- Success bounce ---- */
.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes bounceIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* textarea resize */
textarea { resize: vertical; min-height: 80px; }