/* ===============================
   FAQ — AnareusCZ Light Premium (Off-white + Lime)
   Переписано под стилистику твоего сайта:
   - светлый фон, мягкие карточки, лайм-акценты
   - pill-hover как в шапке/кнопках
   - аккуратный плюс/минус в “deep green” контейнере
   - без неоновых теней/темного стекла
=============================== */

.faq{
  /* Local palette aligned to your site */
  --bg:        #F3F5F0;
  --card:      rgba(255,255,255,.78);
  --card-2:    rgba(255,255,255,.62);
  --ink:       #0D140F;
  --muted:     rgba(13,20,15,.62);
  --line:      rgba(13,20,15,.12);

  --lime:      #B9EF40;
  --lime-2:    #9FE93A;
  --lime-soft: rgba(185,239,64,.22);

  --deep:      #13301B;
  --deep-2:    #0D2616;

  --shadow:    0 20px 50px rgba(13,20,15,.12);
  --shadow2:   0 14px 34px rgba(13,20,15,.10);

  background: transparent; /* общий фон сайта */
}

/* Header */
.faq__head{
  text-align:center;
  position:relative;
}

.faq__sub{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

/* Premium lime line (как в твоих акцентах) */
.faq__tricolore{
  height: 6px;
  width: 170px;
  margin: 14px auto 0;
  border-radius: 999px;
  overflow:hidden;
  background: linear-gradient(
    90deg,
    rgba(13,20,15,.20),
    var(--lime),
    rgba(13,20,15,.18)
  );
  box-shadow: 0 12px 26px rgba(13,20,15,.08);
}
.faq__tricolore .it{ display:none; }

/* List */
.faq-list{
  display:grid;
  gap: 12px;
}

/* Card */
.faq-item{
  background: var(--card);
  border: 1px solid rgba(13,20,15,.10);
  border-radius: 24px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.faq-item:hover{
  transform: translateY(-2px);
  border-color: rgba(13,20,15,.16);
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 340px at 20% 0%, rgba(185,239,64,.16), transparent 58%),
    var(--card);
}

/* Question button */
.faq-question{
  width: 100%;
  padding: 16px 56px 16px 18px;
  text-align:left;

  background: transparent;
  border: none;
  cursor:pointer;

  font-weight: 900;
  position:relative;

  display:flex;
  align-items:center;
  gap: 10px;

  color: rgba(13,20,15,.92);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;

  transition: background .22s ease;
}

/* subtle hover background like pill */
.faq-item:hover .faq-question{
  background: rgba(185,239,64,.10);
}

/* Icon container (deep green capsule) */
.faq-icon{
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);

  width: 28px;
  height: 28px;
  border-radius: 10px;

  background: linear-gradient(180deg, var(--deep), var(--deep-2));
  border: 1px solid rgba(13,20,15,.18);

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 14px 30px rgba(13,20,15,.18);
}

/* plus/minus lines */
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  width: 12px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
  transition: opacity .18s ease, transform .18s ease;
}

.faq-icon::after{ transform: rotate(90deg); }

/* Active state */
.faq-question.active{
  background: rgba(185,239,64,.12);
}

.faq-question.active .faq-icon{
  background: linear-gradient(180deg, rgba(185,239,64,.92), rgba(159,233,58,.90));
  border-color: rgba(13,20,15,.10);
  box-shadow:
    0 18px 44px rgba(185,239,64,.20),
    0 16px 30px rgba(13,20,15,.12);
}

.faq-question.active .faq-icon::before,
.faq-question.active .faq-icon::after{
  background: rgba(13,20,15,.92);
}

.faq-question.active .faq-icon::after{
  opacity: 0; /* превращаем + в − */
}

/* Answer */
.faq-answer{
  max-height: 0;
  overflow:hidden;
  padding: 0 18px;
  border-top: 1px solid transparent;

  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;

  opacity: 0;
  transition:
    max-height .18s ease,
    padding .22s ease,
    border-color .22s ease,
    opacity .22s ease;
}

.faq-answer.open{
  max-height: 320px;
  padding: 10px 18px 16px;
  border-top-color: rgba(13,20,15,.10);
  opacity: 1;
}

/* A11y: focus */
.faq-question:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(185,239,64,.35);
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 640px){
  .faq-icon{
    width: 26px;
    height: 26px;
    border-radius: 9px;
  }
  .faq-question{
    padding: 15px 52px 15px 16px;
  }
}