/* =========================================================
   FAQ SECTION — redesigned & responsive
   ========================================================= */

.faq-section {
   padding: clamp(48px, 8vw, 88px) 0;
   background: linear-gradient(180deg, #fff 0%, #fdf8fc 45%, #f8faf6 100%);
}

.faq-section__intro {
   max-width: 680px;
   margin: 0 auto clamp(28px, 5vw, 48px);
   text-align: center;
}

.faq-section__eyebrow {
   display: inline-block;
   margin: 0 0 12px;
   padding: 6px 14px;
   border-radius: 999px;
   background: rgba(211, 119, 176, 0.12);
   color: #b95794;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.faq-section__title {
   margin: 0 0 12px;
   font-size: clamp(1.5rem, 4.5vw, 2.125rem);
   font-weight: 800;
   line-height: 1.2;
   color: #1a1a2e;
   text-transform: none;
}

.faq-section__title span {
   position: relative;
   display: inline-block;
   color: #d377b0;
}

.faq-section__title span::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -4px;
   height: 3px;
   border-radius: 999px;
   background: linear-gradient(90deg, #d377b0, rgba(211, 119, 176, 0.35));
}

.faq-section__lead {
   margin: 0;
   font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
   line-height: 1.65;
   color: #6b7280;
}

.faq-section__layout {
   display: grid;
   grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
   gap: clamp(20px, 4vw, 36px);
   align-items: start;
}

.faq-section__visual-card {
   position: sticky;
   top: 96px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: clamp(20px, 4vw, 28px);
   border-radius: 22px;
   background: linear-gradient(165deg, #fff 0%, #fdf6fb 100%);
   border: 1px solid rgba(211, 119, 176, 0.16);
   box-shadow: 0 18px 48px rgba(211, 119, 176, 0.1);
}

.faq-section__illustration {
   display: block;
   width: min(100%, 220px);
   height: auto;
   margin: 0 auto;
}

.faq-section__visual-copy {
   text-align: center;
}

.faq-section__visual-title {
   margin: 0 0 8px;
   font-size: 1.05rem;
   font-weight: 700;
   color: #1a1a2e;
}

.faq-section__visual-text {
   margin: 0;
   font-size: 0.9375rem;
   line-height: 1.6;
   color: #6b7280;
}

.faq-accordion {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.faq-item {
   border-radius: 16px;
   background: #fff;
   border: 1px solid rgba(26, 26, 46, 0.08);
   box-shadow: 0 8px 24px rgba(26, 26, 46, 0.04);
   overflow: hidden;
   transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
   border-color: rgba(211, 119, 176, 0.25);
}

.faq-item.is-open {
   border-color: rgba(211, 119, 176, 0.35);
   box-shadow: 0 14px 32px rgba(211, 119, 176, 0.12);
}

.faq-item__trigger {
   width: 100%;
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 14px;
   padding: clamp(14px, 3vw, 18px) clamp(14px, 3vw, 20px);
   border: none;
   background: transparent;
   text-align: left;
   cursor: pointer;
   font: inherit;
}

.faq-item__index {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   height: 36px;
   border-radius: 10px;
   background: rgba(211, 119, 176, 0.1);
   color: #b95794;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.04em;
   flex-shrink: 0;
}

.faq-item.is-open .faq-item__index {
   background: #d377b0;
   color: #fff;
}

.faq-item__question {
   font-size: clamp(0.9375rem, 2.6vw, 1rem);
   font-weight: 700;
   line-height: 1.45;
   color: #1a1a2e;
   overflow-wrap: anywhere;
}

.faq-item__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #f3f4f6;
   color: #d377b0;
   flex-shrink: 0;
   transition: transform 0.3s ease, background 0.25s ease, color 0.25s ease;
}

.faq-item.is-open .faq-item__icon {
   transform: rotate(45deg);
   background: rgba(211, 119, 176, 0.12);
   color: #b95794;
}

.faq-item__panel {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.35s ease;
}

.faq-item.is-open .faq-item__panel {
   grid-template-rows: 1fr;
}

.faq-item__panel-inner {
   overflow: hidden;
}

.faq-item__panel-inner p {
   margin: 0;
   padding: 0 clamp(14px, 3vw, 20px) clamp(16px, 3vw, 20px);
   padding-left: calc(clamp(14px, 3vw, 20px) + 36px + 14px);
   font-size: clamp(0.875rem, 2.4vw, 0.9375rem);
   line-height: 1.75;
   color: #4b5563;
}

/* --- Tablet --- */
@media (max-width: 991px) {
   .faq-section__layout {
      grid-template-columns: 1fr;
   }

   .faq-section__visual-card {
      position: static;
      flex-direction: row;
      align-items: center;
      text-align: left;
   }

   .faq-section__illustration {
      width: min(34vw, 140px);
      margin: 0;
      flex-shrink: 0;
   }

   .faq-section__visual-copy {
      text-align: left;
   }
}

/* --- Mobile --- */
@media (max-width: 767px) {
   .faq-section {
      padding: 40px 0 56px;
   }

   .faq-section__visual-card {
      flex-direction: column;
      text-align: center;
   }

   .faq-section__illustration {
      width: min(56vw, 160px);
      margin: 0 auto;
   }

   .faq-section__visual-copy {
      text-align: center;
   }

   .faq-item__trigger {
      gap: 10px;
      align-items: flex-start;
   }

   .faq-item__index {
      min-width: 32px;
      height: 32px;
      font-size: 11px;
   }

   .faq-item__icon {
      width: 28px;
      height: 28px;
      font-size: 12px;
   }

   .faq-item__panel-inner p {
      padding-left: clamp(14px, 3vw, 20px);
   }
}

/* --- Very small screens --- */
@media (max-width: 380px) {
   .faq-item__trigger {
      grid-template-columns: auto 1fr auto;
   }

   .faq-item__question {
      font-size: 0.875rem;
   }
}