/* StockSense — custom styles (modern dark theme) */

:root { --green: #22C55E; }

html, body { background: #07090d; }
body { overflow-x: hidden; }

/* Nav: transparent over hero, dark translucent once scrolled */
#nav .nav-link { color: #93a1b3; transition: color .2s; }
#nav .nav-link:hover { color: #fff; }
#nav.scrolled { background: rgba(7,9,13,.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }

/* Hero copy fades + lifts slightly as the video scrubs */
#hero-copy { will-change: opacity, transform; }

/* Mobile: no scroll-scrub — the hero is a single full-screen autoplaying loop.
   Collapse the tall scrub track so there's no dead scrolling. */
@media (max-width: 768px) {
  #hero-track { height: 100svh !important; }
  #hero-track > div { height: 100svh !important; }
}

/* Glassmorphism cards */
.glass {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  transition: border-color .3s, background .3s;
}
.glass:hover { border-color: rgba(34,197,94,.4); background: rgba(255,255,255,.05); }
.feat-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* Signal-weight bars: fill when revealed */
.bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #22C55E); transition: width 1.1s cubic-bezier(.22,1,.36,1); transition-delay: .15s; }
.reveal.in .bar-fill { width: var(--w); }

/* Browser-frame mockup (dark) */
.browser-frame { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); background: #07090d; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0f141c; border-bottom: 1px solid rgba(255,255,255,.08); }
.browser-bar .dot { width: 11px; height: 11px; border-radius: 999px; display: inline-block; }
.browser-url { margin-left: 12px; font-size: 12px; color: #93a1b3; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 3px 12px; }

/* FAQ accordion */
.faq { padding: 20px 4px; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: #e8edf4; font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 12px; color: #93a1b3; font-size: 15px; line-height: 1.6; max-width: 62ch; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal.in .bar-fill, .bar-fill { transition: none; width: var(--w); }
  #hero-copy { opacity: 1 !important; transform: none !important; }
}