.faq-page{display:block}

.faq-hero{position:relative;display:flex;justify-content:center;align-items:center;padding:80px 16px}
.faq-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.faq-hero-card{max-width:600px;text-align:center;display:flex;flex-direction:column;gap:16px}

.faq-nav-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;justify-items:center}
.faq-chip{padding:10px 16px;border-radius:999px;background:var(--color-bg-glass);position:relative}
.faq-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--gradient-border);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.faq-chip:hover{box-shadow:0 0 10px var(--color-accent-cyan)}

.faq-section{display:block}
.faq-narrow{max-width:800px}

.faq-accordion{display:flex;flex-direction:column;gap:16px}
.faq-item{display:flex;flex-direction:column;gap:12px}
.faq-question{font-family:var(--font-heading);text-align:left}
.faq-answer{display:none;color:var(--color-text-glass)}
.faq-item.active .faq-answer{display:block}
.faq-item.active{box-shadow:0 0 16px var(--color-accent-violet)}

.faq-cta{display:flex;justify-content:center}
.faq-cta-card{max-width:500px;margin:auto;text-align:center;display:flex;flex-direction:column;gap:16px}

.faq-help-box{max-width:600px;margin:auto;text-align:center}

@media(max-width:900px){
.faq-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:500px){
.faq-nav-grid{grid-template-columns:1fr}
.faq-hero{padding:60px 16px}
}