/* 
   27F. FAQ SECTION (Figma 410-34017)
 */
.faq-section {
  position: relative;
  background: #0a0a0a;
  padding: 100px 0 120px;
  overflow: hidden;
}

/* Two-column layout */
.faq-layout {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* Left side */
.faq-left {
  flex-shrink: 0;
  width: 400px;
}

.faq-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.faq-badge-dot { width: 21px; height: 21px; flex-shrink: 0; }

.faq-badge-label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  color: #fff;
  line-height: 1;
}

.faq-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  fo;
  /* font-size: 64px; */
  color: #fff;
  line-height: 1.1;
  letter-spacing: -2.56px;
  margin: 0;
  font-size: clamp(1.8rem, 3.8vw, 4.5rem);
}

.faq-gradient-text {
  background: linear-gradient(to right, #be3933, #8a4f8e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Right side — accordion */
.faq-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Accordion item */
.faq-item {
 /* background: rgba(255, 255, 255, 0.1);
  border: 2.8px solid #be3933;*/
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2.8px solid transparent;
  background-image: 
    linear-gradient(#111, #111), 
    linear-gradient(135deg, #8a2be2, #ff4d6d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.faq-item:hover {
  border-color: #d76f00;
}

.faq-item--open {
  border-color: #be3933;
  box-shadow: 0 8px 32px rgba(190, 57, 51, 0.15);
}

/* Trigger button */
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-question {
  flex: 1;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #fff;
  line-height: 1.3;
}

/* Toggle icons */
.faq-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.35s ease;
}

.faq-icon--minus { display: none; }
.faq-icon--plus  { display: block; }

.faq-item--open .faq-icon--minus { display: block; }
.faq-item--open .faq-icon--plus  { display: none; }

/* Answer panel — animated max-height */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item--open .faq-answer {
  max-height: 300px;
}

.faq-answer-inner {
  padding: 0 24px 20px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 991.98px) {
  .faq-section { padding: 60px 0 60px; }
  .faq-layout { flex-direction: column; gap: 40px; }
  .faq-left { width: 100%;text-align: center; }
  .faq-badge-row {justify-content: center;}
  .tml-card {padding: 3.8px;}
  .faq-badge-label { font-size: 24px; }
  .faq-question { font-size: 18px; }
  .faq-icon { width: 40px; height: 40px; }
}

@media (max-width: 575.98px) {
  .faq-badge-label { font-size: 20px; }
  .faq-heading { font-size: 22px; }
  .faq-question { font-size: 16px; }
  .faq-trigger { padding: 16px; gap: 12px; }
  .faq-answer-inner { padding: 0 16px 16px; font-size: 14px; }
  .faq-icon { width: 36px; height: 36px; }
  .faq-right { gap: 12px; }
}
/* ══════════════════════════════════════════════════════════
   7. FAQ SECTION (Figma 410-42342)
══════════════════════════════════════════════════════════ */
.mfaq-section {
  /* background: #010101; */
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.mfaq-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* ── Left: heading ─────────────────────────────────────── */
.mfaq-left {
  flex: 0 0 35%;
  position: sticky;
  top: 120px;
}

.mfaq-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mfaq-dot {
  width: 21px;
  height: 21px;
}

.mfaq-badge span {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  color: #fff;
}

.mfaq-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.8vw, 4.5rem);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -2.56px;
  margin: 0;
}

.mfaq-gradient {
  background: linear-gradient(to right, #be3933, #8a4f8e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Right: accordion */
.mfaq-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.mfaq-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: background 0.3s ease;
  border: 2.8px solid transparent;
  background-image: linear-gradient(#111, #111), linear-gradient(135deg, #8a2be2, #ff4d6d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.mfaq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding:20px 24px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.mfaq-question {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #fff;
  flex: 1;
  line-height: 1.3;
}
.mfaq-item:hover {
    border-color: #d76f00;
}
.mfaq-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  position: relative;
}

.mfaq-icon-minus,
.mfaq-icon-plus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Default: show plus, hide minus */
.mfaq-icon-minus { opacity: 0; transform: rotate(-90deg); }
.mfaq-icon-plus  { opacity: 1; transform: rotate(0); }

/* Open: show minus, hide plus */
.mfaq-item--open .mfaq-icon-minus { opacity: 1; transform: rotate(0); }
.mfaq-item--open .mfaq-icon-plus  { opacity: 0; transform: rotate(90deg); }

/* ── Answer panel ──────────────────────────────────────── */
.mfaq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 24px;
}

.mfaq-item--open .mfaq-answer {
  max-height: 300px;
  padding: 0 24px 24px;
}

.mfaq-answer p {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  line-height: 1.65;
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .mfaq-section { padding: 70px 0; }
  .mfaq-layout { flex-direction: column; gap: 40px; }
  .mfaq-left { position: relative; top: auto; flex: none; text-align: center; }
  .mfaq-title { font-size: 44px; }
  .mfaq-badge { justify-content: center; }
  .mfaq-question { font-size: 20px; }
  .mfaq-icon { width: 48px; height: 48px; }
}

@media (max-width: 575.98px) {
  .mfaq-title { font-size: 34px; letter-spacing: -1.5px; }
  .mfaq-badge span { font-size: 24px; }
  .mfaq-item { border-radius: 16px; }
  .mfaq-trigger { padding: 18px; gap: 12px; }
  .mfaq-question { font-size: 17px; }
  .mfaq-icon { width: 40px; height: 40px; }
  .mfaq-answer { padding: 0 18px; }
  .mfaq-item--open .mfaq-answer { padding: 0 18px 18px; }
}