/* Premium fintech pass: dark navy / gold identity (matches the investor
   deck), replacing the earlier light slate/emerald theme. Colors are also
   registered with Tailwind's Play CDN config (see the <script> block in
   each HTML page) so utility classes like `bg-navy2` / `text-gold` work
   throughout the markup — this file only holds what utilities can't do. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:wght@500;600;700&display=swap");

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.font-serif-display {
  font-family: "Newsreader", Georgia, serif;
}

/* Subtle navy/gold aurora wash instead of the previous emerald/sky/violet
   one — same technique (three low-opacity radial gradients), recolored so
   the hero reads as premium dark fintech rather than a generic SaaS site. */
.hero-glow {
  background:
    radial-gradient(55% 55% at 15% 0%, rgba(201, 162, 39, 0.10) 0%, rgba(201, 162, 39, 0) 70%),
    radial-gradient(50% 55% at 90% 10%, rgba(27, 47, 94, 0.55) 0%, rgba(27, 47, 94, 0) 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(201, 162, 39, 0.06) 0%, rgba(201, 162, 39, 0) 70%);
}

/* ---- Gradient text, decorative blobs, floating card ------ */

/* Emphasis word/phrase treatment for headlines — used sparingly (one
   phrase per headline, not whole sentences) so it still reads as a real
   accent rather than a gimmick. Gold-forward gradient instead of the old
   emerald/sky/violet one. */
.text-gradient {
  background: linear-gradient(120deg, #e4c767 0%, #c9a227 60%, #8a6f1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Soft, large, blurred color fields placed behind hero/CTA content —
   purely decorative (aria-hidden, pointer-events: none in the markup),
   never behind anything that needs to stay legible on its own. Parent
   needs `relative overflow-hidden` for these to stay clipped to their
   section. */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.float {
  animation: float 6s ease-in-out infinite;
}

/* "Most popular" pricing card — a soft animated glow behind a solid card,
   instead of the previous flat 2px border, so the recommended plan reads
   as genuinely highlighted rather than just outlined. */
@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}
.glow-ring {
  position: absolute;
  inset: -2px;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #e4c767, #c9a227, #8a6f1a);
  z-index: -1;
  animation: glow-pulse 4s ease-in-out infinite;
}

/* ---- Redesign pass: reveal-on-scroll (script.js) ------------------------
   Starts every `.reveal` element faded and slightly lowered; script.js
   adds `.is-visible` the first time it scrolls into view. Kept to a small,
   consistent rise (12px) and a quick-but-not-instant duration so a page
   full of these doesn't feel like a slideshow. Respects reduced-motion by
   skipping straight to the visible state. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helpers for grids of reveal elements (feature cards, pricing
   tiers, steps) — small, capped delays so a 6-item grid still finishes
   settling well under a second. */
.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.16s;
}
.reveal-delay-3 {
  transition-delay: 0.24s;
}
.reveal-delay-4 {
  transition-delay: 0.32s;
}
.reveal-delay-5 {
  transition-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .float {
    animation: none;
  }
  .glow-ring {
    animation: none;
  }
}

/* Premium-polish pass: a soft default shadow (not just the on-hover one
   below) so cards read as slightly raised even at rest, matching the
   two-layer hairline+spread treatment the app itself uses for its own
   Card component. translateY + a slightly stronger shadow on hover/press
   for tactile depth. */
.card-hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -18px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.18);
}
.card-hover:active {
  transform: translateY(-1px) scale(0.99);
}

/* Dark-surface counterpart of .card-hover — used on the navy background
   cards (features, screenshots, pricing, security). A soft black spread
   for depth plus a faint gold-tinted glow on hover, instead of the
   light-theme's slate shadow which would be invisible against navy. */
.card-hover-dark {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 28px -16px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-hover-dark:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 162, 39, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 32px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 162, 39, 0.08);
}
.card-hover-dark:active {
  transform: translateY(-1px) scale(0.99);
}

.bar {
  transition: height 0.6s ease;
}

/* Mobile nav toggle, no framework JS needed */
#mobile-nav:not(.open) {
  display: none;
}

/* ---- Premium-polish pass: site-wide micro-interactions ------------------
   Every link/button on the site was snapping instantly between hover
   states (no transition was ever declared outside of .card-hover) — this
   one rule smooths all of them at once instead of hand-adding a Tailwind
   `transition-colors` utility to every individual button/link across all
   7 pages. Also adds a consistent focus-visible ring, which none of these
   elements had before (a real accessibility gap, not just cosmetic), and
   a subtle press-down scale on button-styled links (anything with a
   background color and rounded corners — i.e. the CTAs, not plain text
   nav/footer links, which shouldn't visually "press"). */
a,
button {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 2px;
}
a[class*="rounded-lg"][class*="bg-"]:active,
button[class*="rounded-lg"][class*="bg-"]:active {
  transform: scale(0.98);
}

/* ---- Page-to-page transitions --------------------------------------------
   Native cross-document View Transitions (Chromium 126+/recent Safari —
   see https://developer.mozilla.org/docs/Web/API/View_Transition_API):
   this one declaration is all a static multi-page site needs for a
   cross-fade between pages, no JavaScript at all. Browsers without support
   just keep their normal instant navigation — nothing to feature-detect or
   fall back manually for. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}