.faq-hero-grid { align-items: center; gap: var(--space-24); }
.faq-hero-copy { max-width: 640px; }
.faq-title { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.faq-intro { max-width: 620px; }
.faq-cta-group { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
.faq-hero-media-inner { display: flex; flex-direction: column; gap: var(--space-10); }
.faq-hero-media-tag { align-self: flex-start; }
.faq-hero-media-text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.faq-hero-suits { display: flex; gap: var(--space-6); font-size: 1.5rem; margin-top: var(--space-4); }

.faq-layout-grid { align-items: flex-start; gap: var(--space-24); }
.faq-sidebar-title { font-size: var(--font-size-lg); margin-bottom: var(--space-8); }
.faq-nav { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-16); }
.faq-nav-link { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: rgba(10, 11, 18, 0.7); color: var(--color-text-muted); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast); }
.faq-nav-link:hover { background: var(--color-primary-soft); color: var(--gray-50); border-color: rgba(211, 180, 106, 0.5); transform: translateY(-1px); }
.faq-nav-link[aria-pressed="true"] { background: radial-gradient(circle at 0 0, rgba(179, 24, 43, 0.6), rgba(5, 6, 8, 0.95)); color: #fff; border-color: rgba(211, 180, 106, 0.8); }

.faq-sidebar-card { margin-top: var(--space-8); }
.faq-sidebar-card-title { margin-bottom: var(--space-6); }
.faq-sidebar-actions { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }

.faq-content { display: flex; flex-direction: column; gap: var(--space-10); }
.faq-list { display: flex; flex-direction: column; gap: var(--space-8); }
.faq-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); cursor: pointer; }
.faq-question { font-size: var(--font-size-lg); margin-right: var(--space-4); }
.faq-toggle { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(211, 180, 106, 0.6); background: rgba(5, 6, 8, 0.7); display: flex; align-items: center; justify-content: center; color: var(--color-gold); font-size: var(--font-size-md); transition: background var(--transition-normal), transform var(--transition-fast), border-color var(--transition-normal); }
.faq-toggle-icon { display: inline-block; transform-origin: center; transition: transform var(--transition-normal); }
.faq-toggle[aria-expanded="true"] { background: var(--color-primary-soft); border-color: rgba(179, 24, 43, 0.9); }
.faq-toggle[aria-expanded="true"] .faq-toggle-icon { transform: rotate(45deg); }

.faq-answer { margin-top: var(--space-8); display: none; gap: var(--space-10); }
.faq-answer-media { max-width: 260px; flex-shrink: 0; }
.faq-image-wrapper { border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(211, 180, 106, 0.35); box-shadow: var(--shadow-soft); }
.faq-image { width: 100%; height: 100%; object-fit: cover; }
.faq-answer-text p + p { margin-top: var(--space-4); }

.faq-item.is-open .faq-answer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr); }
.faq-item.is-open .faq-answer-media:only-child { max-width: none; }

.faq-bottom-cta { padding-top: var(--space-24); padding-bottom: var(--space-32); }
.faq-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.faq-bottom-text h2 { margin-bottom: var(--space-4); }
.faq-bottom-text p { max-width: 560px; }
.faq-bottom-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }

@media (max-width: 960px) {
  .faq-hero-grid { grid-template-columns: 1fr; }
  .faq-layout-grid { grid-template-columns: 1fr; }
  .faq-sidebar { order: -1; }
  .faq-item.is-open .faq-answer { display: block; }
  .faq-answer-media { max-width: none; margin-bottom: var(--space-8); }
  .faq-bottom-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .faq-cta-group { flex-direction: column; align-items: stretch; }
  .faq-item-header { align-items: center; }
  .faq-question { font-size: var(--font-size-md); }
}