

.faq-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px,5vw,80px); align-items: start; }

.faq-nav { position: sticky; top: calc(var(--header-h) + 30px); display: grid; gap: 6px; }
.faq-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; font-size: 0.9rem; font-weight: 550; color: var(--ink-2); transition: all 0.25s; }
.faq-nav a i { color: var(--accent); font-size: 0.8rem; width: 18px; }
.faq-nav a:hover { background: var(--surface); color: var(--ink); padding-left: 20px; }

.faq-group { margin-bottom: clamp(40px,6vw,70px); scroll-margin-top: calc(var(--header-h) + 30px); }
.faq-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.faq-group__head .icon-chip { margin-bottom: 0; }
.faq-group__head h2 { font-family: var(--font-display); font-size: clamp(1.4rem,2.6vw,2rem); margin: 0; font-weight: 550; }

.faq-ask { background: var(--dark); border-radius: var(--radius-xl); padding: clamp(32px,5vw,60px); color: #f2ecdd; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,60px); align-items: center; }
.faq-ask__panel { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-l); padding: clamp(24px,3vw,36px); }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-nav { position: static; display: flex; overflow-x: auto; padding-bottom: 10px; }
  .faq-nav a { white-space: nowrap; }
  .faq-ask { grid-template-columns: 1fr; }
}
