/* AIFlowGen — custom CSS layered on top of Tailwind utilities.
   Keep this file small: only what cannot be expressed inline as Tailwind classes
   (multi-state transitions, gradients on text, dot-grid bg, etc.). */

/* =========================================================
   GLOBAL
   ========================================================= */

/* Smooth-scroll for in-page anchor links.
   scroll-padding-top accounts for the 64px fixed nav so a target
   section's heading isn't hidden under it after the jump. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

#site-nav {
  transition:
    background-color 300ms ease,
    border-color     300ms ease,
    backdrop-filter  300ms ease,
    box-shadow       300ms ease;
  background-color: transparent;
  border-bottom: 1px solid transparent;
}

/* Default state (over the dark hero): white-ish text */
#site-nav .nav-link,
#site-nav .logo-rest {
  color: rgba(255, 255, 255, 0.85);
  transition: color 200ms ease;
}
#site-nav .nav-link:hover {
  color: #ffffff;
}
#site-nav #menu-toggle {
  color: rgba(255, 255, 255, 0.9);
}

/* Scrolled state: solid white background, dark text, subtle bottom border */
#site-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
#site-nav.scrolled .nav-link,
#site-nav.scrolled .logo-rest {
  color: rgba(10, 10, 11, 0.7);
}
#site-nav.scrolled .nav-link:hover,
#site-nav.scrolled .logo-rest {
  color: rgba(10, 10, 11, 1);
}
#site-nav.scrolled #menu-toggle {
  color: rgba(10, 10, 11, 0.85);
}

/* When the mobile menu is open we want the nav to look "solid" too,
   even if we haven't scrolled, so the white panel below it isn't floating. */
#site-nav.menu-open {
  background-color: #ffffff;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
#site-nav.menu-open .nav-link,
#site-nav.menu-open .logo-rest,
#site-nav.menu-open #menu-toggle {
  color: rgba(10, 10, 11, 0.9);
}

/* =========================================================
   HERO BACKGROUND EFFECTS
   ========================================================= */

/* Faint grid of dots, masked so it fades softly at the edges. */
.hero-dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 35%, transparent 85%);
}

/* A single soft blue→violet radial glow centered behind the headline.
   Two stacked ellipses give a slightly richer falloff than one. */
.hero-glow {
  background:
    radial-gradient(ellipse 55% 38% at 50% 42%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(ellipse 38% 26% at 50% 52%, rgba(59, 130, 246, 0.16), transparent 70%);
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */

/* Hide the default disclosure marker on <summary> so we can use our own chevron. */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

/* Rotate the chevron when the <details> is open. */
.faq-item[open] .faq-chevron { transform: rotate(180deg); }