/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-inline: auto; }
.faq-item { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color .25s; }
.faq-item.open { border-color: var(--accent); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
  color: var(--ink); text-align: left; transition: color .2s;
}
.faq-q:hover { color: var(--accent); }
.faq-item.open .faq-q { color: var(--accent); }
.faq-icon { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-2); display: grid; place-items: center; flex: none; transition: background .25s, border-color .25s; }
.faq-icon svg { width: 12px; height: 12px; transition: transform .3s; }
.faq-item.open .faq-icon { background: var(--accent); border-color: var(--accent); }
.faq-item.open .faq-icon svg { color: #fff; transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.faq-item.open .faq-body { max-height: 400px; }
.faq-body p { padding: 0 22px 20px; font-size: 15px; color: var(--ink-2); line-height: 1.7; }


#faq { background: var(--bg-2); }