/* ============================================================
   SECTION 6 — faq.css
   "Need Answers?" accordion FAQ
   Exact replica of reference screenshot
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════════════════════════ */
.faq-section {
  position  : relative;
  background: #05050e;
  padding   : 100px 0 110px;
  overflow  : hidden;
}

/* ══════════════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════════════ */
.faq-container {
  max-width: 860px;
  margin   : 0 auto;
  padding  : 0 40px;
}

/* ══════════════════════════════════════════════════════════
   HEADER — large centered title + subtitle
══════════════════════════════════════════════════════════ */
.faq-header {
  text-align   : center;
  margin-bottom: 52px;

  opacity  : 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.faq-header.visible { opacity: 1; transform: translateY(0); }

.faq-title {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(2.6rem, 7vw, 5rem);
  font-weight   : 800;
  letter-spacing: -0.035em;
  line-height   : 1.05;
  color         : #ffffff;
  margin        : 0 0 16px;
}

.faq-subtitle {
  font-family  : 'Inter', sans-serif;
  font-size    : 0.92rem;
  font-weight  : 400;
  color        : rgba(255,255,255,0.38);
  line-height  : 1.6;
  max-width    : 420px;
  margin       : 0 auto;
}

/* ══════════════════════════════════════════════════════════
   ACCORDION LIST
══════════════════════════════════════════════════════════ */
.faq-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
  display   : flex;
  flex-direction: column;
  gap       : 10px;

  opacity  : 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1) 0.10s,
              transform 0.75s cubic-bezier(0.16,1,0.3,1) 0.10s;
}
.faq-list.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   ACCORDION ITEM
══════════════════════════════════════════════════════════ */
.faq-item {
  background   : rgba(255,255,255,0.028);
  border       : 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow     : hidden;
  transition   : background 0.25s ease, border-color 0.25s ease;
}
.faq-item:hover {
  background  : rgba(255,255,255,0.042);
  border-color: rgba(255,255,255,0.11);
}
.faq-item.open {
  background  : rgba(255,255,255,0.042);
  border-color: rgba(124,58,237,0.22);
}

/* ── Question row (button) ── */
.faq-question {
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 20px;
  padding        : 22px 26px;
  background     : none;
  border         : none;
  cursor         : pointer;
  text-align     : left;
}

.faq-question-text {
  font-family   : 'Inter', sans-serif;
  font-size     : 0.97rem;
  font-weight   : 500;
  color         : rgba(255,255,255,0.88);
  line-height   : 1.4;
  flex          : 1;
  letter-spacing: -0.005em;
}

.faq-num {
  font-family   : 'Inter', sans-serif;
  font-size     : 0.78rem;
  font-weight   : 600;
  color         : rgba(255,255,255,0.28);
  letter-spacing: 0.04em;
  margin-right  : 14px;
  flex-shrink   : 0;
}

/* ── Plus / × icon button ── */
.faq-toggle {
  width          : 34px;
  height         : 34px;
  border-radius  : 50%;
  border         : 1px solid rgba(255,255,255,0.12);
  background     : rgba(255,255,255,0.04);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  position       : relative;
  transition     : background 0.22s ease,
                   border-color 0.22s ease,
                   transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* Plus icon — two lines */
.faq-toggle::before,
.faq-toggle::after {
  content      : '';
  position     : absolute;
  background   : rgba(255,255,255,0.60);
  border-radius: 2px;
  transition   : transform 0.35s cubic-bezier(0.16,1,0.3,1),
                 opacity  0.25s ease;
}
.faq-toggle::before { width: 12px; height: 1.5px; }
.faq-toggle::after  { width: 1.5px; height: 12px; }

/* Rotate × on open */
.faq-item.open .faq-toggle {
  background  : rgba(124,58,237,0.15);
  border-color: rgba(124,58,237,0.35);
}
.faq-item.open .faq-toggle::before { transform: rotate(45deg); }
.faq-item.open .faq-toggle::after  { transform: rotate(45deg); }

/* ── Answer panel — smooth height reveal ── */
.faq-answer {
  overflow  : hidden;
  max-height: 0;
  transition: max-height 0.42s cubic-bezier(0.16,1,0.3,1),
              opacity    0.30s ease;
  opacity   : 0;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  opacity   : 1;
}

.faq-answer-inner {
  padding      : 0 26px 22px calc(26px + 14px + 1.6rem); /* aligns under question text */
  font-family  : 'Inter', sans-serif;
  font-size    : 0.875rem;
  font-weight  : 400;
  color        : rgba(255,255,255,0.42);
  line-height  : 1.70;
  letter-spacing: 0.004em;
}

/* ══════════════════════════════════════════════════════════
   CTA BUTTON — below accordion, links to form section
══════════════════════════════════════════════════════════ */
.faq-cta-wrap {
  text-align : center;
  margin-top : 52px;
}

.faq-cta-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  padding        : 14px 36px;
  background     : linear-gradient(135deg, rgba(124,58,237,0.22) 0%, rgba(91,33,182,0.15) 100%);
  border         : 1px solid rgba(124,58,237,0.40);
  border-radius  : 999px;
  color          : #ffffff;
  font-family    : 'Inter', sans-serif;
  font-size      : 0.92rem;
  font-weight    : 600;
  letter-spacing : -0.005em;
  cursor         : pointer;
  backdrop-filter: blur(12px);
  text-decoration: none;
  transition     : background 0.28s ease, border-color 0.28s ease,
                   transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease;
  box-shadow     : 0 4px 20px rgba(124,58,237,0.15);
}
.faq-cta-btn:hover {
  background  : linear-gradient(135deg, rgba(124,58,237,0.38) 0%, rgba(91,33,182,0.28) 100%);
  border-color: rgba(124,58,237,0.65);
  transform   : translateY(-2px);
  box-shadow  : 0 8px 32px rgba(124,58,237,0.30);
  color       : #ffffff;
}
.faq-cta-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-section        { padding: 80px 0 90px; }
  .faq-container      { padding: 0 20px; }
  .faq-header         { margin-bottom: 40px; }
  .faq-title          { font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .faq-question       { padding: 18px 20px; }
  .faq-answer-inner   { padding: 0 20px 18px 20px; }
}

@media (max-width: 480px) {
  .faq-section        { padding: 64px 0 76px; }
  .faq-container      { padding: 0 14px; }
  .faq-title          { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .faq-question-text  { font-size: 0.875rem; }
  .faq-answer-inner   { font-size: 0.82rem; }
  .faq-num            { display: none; }
}