/* ════════════════════════════════════════
   FAQ.CSS — Frequently Asked Questions
════════════════════════════════════════ */

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

.faq-wrap {
  max-width: 720px; margin: 3rem auto 0;
  display: flex; flex-direction: column; gap: .6rem;
}

/* FAQ Item */
.faq-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s;
}
.faq-item.open { border-color: rgba(0,229,255,.2); }

/* Question */
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; cursor: pointer;
  font-weight: 600; font-size: .93rem; transition: color .2s; gap: 1rem;
}
.faq-q:hover { color: var(--cyan); }
.faq-q svg {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--text3); transition: transform .3s, color .2s;
}
.faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--cyan); }
.faq-item.open .faq-q { color: var(--cyan); }

/* Answer */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s; }
.faq-item.open .faq-a { max-height: 300px; padding: 0 1.3rem 1.1rem; }
.faq-a p { font-size: .875rem; color: var(--text2); line-height: 1.75; }

/* Responsive */
@media (max-width: 768px) {
  .faq-wrap { margin-top: 2rem; }
  .faq-q { font-size: .875rem; padding: 1rem 1.1rem; }
}