/* FinSight.ai, shared styles (small supplement to Tailwind CDN) */

:root { color-scheme: light dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular numerals for any data figure */
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Nav links (kept here so the header markup is byte-for-byte identical
        across every page; the active state is applied by site.js) ---- */
.nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.925rem;
  font-weight: 500;
  color: rgb(51 65 85);           /* slate-700 */
  transition: color .15s ease, background-color .15s ease;
}
.dark .nav-link { color: rgb(203 213 225); } /* slate-300 */
.nav-link:hover { color: rgb(15 23 42); background: rgb(241 245 249); }
.dark .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-link-active { color: rgb(21 99 245) !important; }
.dark .nav-link-active { color: rgb(137 198 255) !important; }
.nav-link-active::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #2f84ff, #0e4ee1);
}

/* ---- Gradient mesh / glow backdrops ---- */
.mesh {
  background-image:
    radial-gradient(45rem 30rem at 12% -10%, rgba(47,132,255,.18), transparent 60%),
    radial-gradient(40rem 30rem at 95% 0%, rgba(20,180,170,.14), transparent 55%),
    radial-gradient(50rem 40rem at 50% 120%, rgba(21,99,245,.12), transparent 60%);
}
.dark .mesh {
  background-image:
    radial-gradient(45rem 30rem at 12% -10%, rgba(47,132,255,.22), transparent 60%),
    radial-gradient(40rem 30rem at 95% 0%, rgba(20,200,190,.16), transparent 55%),
    radial-gradient(50rem 40rem at 50% 120%, rgba(21,99,245,.18), transparent 60%);
}
.glow { filter: drop-shadow(0 18px 40px rgba(21,99,245,.18)); }

/* Light glassmorphism surface */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,.08);
}
.dark .glass {
  background: rgba(13,18,34,.6);
  border: 1px solid rgba(255,255,255,.08);
}

/* Grid texture for hero/visual panels */
.grid-fade {
  background-image:
    linear-gradient(to right, rgba(99,116,150,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99,116,150,.12) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 30%, #000 40%, transparent 100%);
}

/* ---- Scroll reveal (respect prefers-reduced-motion via site.js gate) ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-on .reveal[data-delay="1"] { transition-delay: .08s; }
.reveal-on .reveal[data-delay="2"] { transition-delay: .16s; }
.reveal-on .reveal[data-delay="3"] { transition-delay: .24s; }
.reveal-on .reveal[data-delay="4"] { transition-delay: .32s; }
/* When JS disabled or reduced motion: show everything */
html:not(.reveal-on) .reveal { opacity: 1; transform: none; }

/* ---- FAQ accordion ---- */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.faq-panel > div { overflow: hidden; }
.faq-item[open-state="true"] .faq-panel { grid-template-rows: 1fr; }
.faq-item[open-state="true"] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .25s ease; }

/* ---- Honeypot: visually hidden but not type=hidden ---- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Card hover micro-interaction */
.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-4px); }

/* Buttons */
.btn-press { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-press:active { transform: translateY(1px) scale(.99); }

/* Marquee for logo strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 28s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid #2f84ff;
  outline-offset: 2px;
  border-radius: 6px;
}