.faq-page{display:block}

.faq-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5);align-items:center}
.faq-hero-text{grid-column:span 5;display:flex;flex-direction:column;gap:var(--space-3);max-width:60ch}
.faq-hero-media{grid-column:span 7}

.faq-categories-head{text-align:center;max-width:70ch;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}
.faq-category-grid{margin-top:var(--space-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.faq-cat-card{display:flex;align-items:center;justify-content:center;padding:var(--space-4);border:var(--border-width) solid var(--border-metallic);background:var(--bg-secondary);font-family:var(--font-heading);text-transform:uppercase}
.faq-cat-card:hover{color:var(--accent-cyan)}

.faq-section h2{margin-bottom:var(--space-4)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.faq-item{border:var(--border-width) solid var(--border-metallic);background:var(--surface-elevated);display:flex;flex-direction:column}
.faq-question{padding:var(--space-4);text-align:left;font-family:var(--font-heading)}
.faq-answer{display:none;padding:0 var(--space-4) var(--space-4)}
.faq-item.active .faq-answer{display:block}
.faq-item.active .faq-question{color:var(--accent-cyan)}

.faq-image{margin-top:var(--space-5)}

.faq-tips-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}

.faq-quick-box{max-width:520px;margin-inline:auto;border:var(--border-width) solid var(--border-metallic);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}

.faq-cta-box{max-width:520px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-4);border:var(--border-width) solid var(--border-metallic);padding:var(--space-5);background:var(--bg-secondary)}

@media(max-width:1024px){
.faq-hero-grid{grid-template-columns:1fr}
.faq-hero-text,.faq-hero-media{grid-column:span 1}
.faq-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:768px){
.faq-grid{grid-template-columns:1fr}
.faq-tips-grid{grid-template-columns:1fr}
.faq-category-grid{grid-template-columns:1fr}
}