/* =============================================================
   FAQ accordion
   ============================================================= */

#faq { background: var(--color-bg); }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: #fff; border-radius: var(--radius-card); margin-bottom: 12px;
  border: 1px solid var(--color-border); overflow: hidden;
  border-left: 3px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .2s ease;
}
.faq-item:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}
.faq-item.active {
  border-left-color: var(--color-primary);
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.faq-item.active:hover {
  background: var(--color-primary-soft);
}
.faq-q {
  width: 100%; text-align: left; padding: 22px 24px; font-size: 16px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  color: var(--color-black); background: transparent; cursor: pointer;
  font-family: var(--font-family);
  transition: color .2s ease;
}
.faq-item:hover .faq-q { color: var(--color-primary-dark); }
.faq-q .faq-num {
  font-size: 13px; font-weight: 800; color: var(--color-primary);
  margin-right: 4px; opacity: .5; font-variant-numeric: tabular-nums;
  transition: opacity .2s ease;
}
.faq-item:hover .faq-q .faq-num,
.faq-item.active .faq-q .faq-num { opacity: 1; }
.faq-q .icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .2s ease, color .2s ease;
}
.faq-item.active .faq-q .icon {
  transform: rotate(180deg);
  background: var(--color-primary); color: #fff;
}
.faq-item.active .faq-q { color: var(--color-primary-dark); }
.faq-a-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq-item.active .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a {
  overflow: hidden;
}
.faq-a-inner {
  padding: 0 24px 0 24px; color: var(--color-text-muted); font-size: 15px; line-height: 1.7;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease .05s, transform .3s ease .05s, padding .35s ease;
}
.faq-item.active .faq-a-inner {
  padding: 0 24px 24px 24px; opacity: 1; transform: translateY(0);
}