/* Only what Tailwind's utility classes can't express cleanly:
   keyframe animations and the hero's gradient-mesh / dot-grid background. */

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  background-color: #0D0F1A;
}

.toggle-btn.is-active {
  background: #fff;
  color: #0D0F1A;
}

.font-mono-brand {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Hero background: a dark base with two soft blurred gradient blobs plus a
   faint dot-grid, layered so the invoice-card mockup and copy read clearly
   on top. */
.hero-mesh {
  background-color: #0D0F1A;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(99, 102, 241, 0.35), transparent 40%),
    radial-gradient(circle at 82% 12%, rgba(37, 99, 235, 0.30), transparent 38%),
    radial-gradient(circle at 60% 85%, rgba(99, 102, 241, 0.18), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: auto, auto, auto, 28px 28px;
}

@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(-1.5deg); }
}

.animate-float {
  animation: float-y 6s ease-in-out infinite;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
}

.reveal.is-visible {
  animation: fade-in-up 0.7s ease-out forwards;
}

/* Staggered delays for grid children revealed together */
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.15s; }
.reveal-3 { animation-delay: 0.25s; }
.reveal-4 { animation-delay: 0.05s; }
.reveal-5 { animation-delay: 0.15s; }
.reveal-6 { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .animate-float { animation: none; }
  .reveal { opacity: 1; animation: none !important; }
}