/* 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; }
}

/* ---------------------------------------------------------------------------
   Mobile nav

   The section links used to be `hidden sm:inline`, so a phone visitor could
   reach nothing but the waitlist button — and most visitors arrive from
   Instagram, on a phone. A disclosure panel rather than a full-screen overlay:
   the page is short enough that a dropdown is all it needs.
--------------------------------------------------------------------------- */
#mobile-nav[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   FAQ

   Native <details>/<summary> rather than a JS accordion: keyboard and screen
   reader behaviour comes free, and it still renders open-able with JS off.
   The default disclosure triangle is removed in favour of the drawn chevron.
--------------------------------------------------------------------------- */
.faq-item > summary {
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item[open] > summary .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}