/* faq.css — hero, filter chips, reveals for /faq */

html { scroll-behavior: smooth; }

.n7g-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--navi-ease), transform .8s var(--navi-ease);
}
.n7g-reveal.is-in { opacity: 1; transform: none; }

/* Hero — shared n7g-hero pattern (pricing / about) */
.n7g-hero {
  position: relative;
  min-height: 780px;
  display: grid;
  place-items: center;
  padding: 150px var(--navi-pad) 100px;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  background: #0b0b20;
}
.n7g-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0b0b20;
}
.n7g-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .85s var(--navi-ease), transform 1.1s var(--navi-ease);
}
.n7g-hero__bg img:nth-child(2) { object-position: center 42%; }
.n7g-hero__bg img.is-active {
  opacity: 1;
  transform: scale(1);
}
.n7g-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 28, .88) 0%, rgba(10, 10, 28, .58) 28%, rgba(10, 10, 28, .72) 62%, rgba(8, 8, 22, .96) 100%),
    radial-gradient(70% 60% at 18% 88%, rgba(99, 159, 255, .22), transparent 66%),
    radial-gradient(55% 50% at 92% 8%, rgba(16, 16, 41, .55), transparent 70%);
}
.n7g-hero__in {
  position: relative;
  z-index: 2;
  width: min(960px, 100%);
}
.n7g-hero h1 {
  margin-top: 18px;
  color: #fafafa;
  font-family: var(--navi-font);
  font-size: clamp(46px, 7.2vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.n7g-hero h1 .g {
  background: linear-gradient(92deg, #dce6fd, #639fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.n7g-hero__sub {
  max-width: 680px;
  margin: 26px auto 0;
  color: rgba(220, 230, 253, .88);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.55;
}
.n7g-hero__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.n7g-hero__actions .navi-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .36);
}

@media (prefers-reduced-motion: reduce) {
  .n7g-hero__bg img {
    transition: none;
    transform: none;
  }
  .n7g-hero__bg img.is-active { transform: none; }
}

.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  position: sticky;
  top: 72px;
  z-index: 5;
  padding: 10px 0 14px;
  background: linear-gradient(180deg, var(--navi-deep) 70%, rgba(16, 16, 41, 0));
}

.faq-filters__btn {
  appearance: none;
  border: 1px solid rgba(220, 230, 253, .18);
  background: rgba(255, 255, 255, .04);
  color: var(--navi-muted-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.faq-filters__btn:hover {
  color: var(--navi-off-white);
  border-color: rgba(220, 230, 253, .35);
}
.faq-filters__btn[aria-pressed="true"] {
  color: var(--navi-ink);
  background: var(--navi-pastel-blue);
  border-color: transparent;
}
.faq-filters__btn:focus-visible {
  outline: 2px solid var(--navi-light-blue);
  outline-offset: 2px;
}

.n7g-faq__list { margin-top: 28px; }

.n7g-q.is-filtered-out { display: none; }

.faq-empty {
  display: none;
  margin-top: 28px;
  color: var(--navi-muted-dark);
  font-weight: 300;
  font-size: 16px;
}
.faq-empty.is-visible { display: block; }

@media (max-width: 700px) {
  .faq-filters { top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .n7g-reveal { opacity: 1 !important; transform: none !important; }
}