/* ===== FAQ — Neon Glass (Amigurumis) ===== */

/* Палитра под твой сайт */
.faq{
  --violet:   #b000ff;
  --pink:     #ff3fd4;

  --ink:      rgba(255,255,255,.92);
  --muted:    rgba(255,255,255,.70);

  --paper:    transparent;
  --stroke:   rgba(255,255,255,.12);
  --glass-brd:rgba(255,255,255,.16);
  --chip:     rgba(176,0,255,.10);
}

/* секция */
.faq{
  padding: 64px 0;
  background: transparent;
  position: relative;
}



.faq__head{
  text-align:center;
  margin-bottom: 22px;
  position:relative;
  z-index:1;
}

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

/* фиолетово-розовая линия */
.faq__tricolore{
  display:flex;
  height:6px;
  width:160px;
  margin:14px auto 0;
  border-radius:999px;
  overflow:hidden;
  background: linear-gradient(
    90deg,
    rgba(176,0,255,.95),
    rgba(255,63,212,.95)
  );
  box-shadow: 0 0 26px rgba(176,0,255,.55);
}
.faq__tricolore .it{ display:none; }

/* список */
.faq-list{
  display:grid;
  gap:14px;
  margin-top: 22px;
  position:relative;
  z-index:1;
}

/* карточка */
.faq-item{
  background: rgba(255,255,255,.04);
  border:1px solid var(--glass-brd);
  border-radius:18px;

  box-shadow:
    0 18px 48px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);

  overflow:hidden;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  transition:
    box-shadow .3s ease,
    border-color .3s ease,
    transform .3s ease,
    background .3s ease;
}

.faq-item:hover{
  border-color: rgba(176,0,255,.28);
  box-shadow:
    0 26px 68px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 34px rgba(176,0,255,.18);
  transform: translateY(-3px);
  background: rgba(255,255,255,.06);
}

/* вопрос */
.faq-question{
  width:100%;
  padding:18px 56px 18px 20px;
  text-align:left;
  background: transparent;
  border:none;
  cursor:pointer;

  font-weight:800;
  font-family: Inter, "Manrope", system-ui, sans-serif;
  color: var(--ink);

  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}

.faq-item:hover .faq-question{
  background: rgba(255,255,255,.02);
}

/* иконка + / - */
.faq-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);

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

  background:
    linear-gradient(
      135deg,
      rgba(176,0,255,.35),
      rgba(255,63,212,.22)
    );

  border:1px solid rgba(255,255,255,.18);

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

  box-shadow:
    inset 0 4px 12px rgba(176,0,255,.28),
    0 0 18px rgba(176,0,255,.35);
}

.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  width:12px;
  height:2px;
  background: var(--ink);
  border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}

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

.faq-question.active .faq-icon::after{
  opacity:0;
}

.faq-question.active .faq-icon{
  background:
    linear-gradient(
      135deg,
      rgba(176,0,255,.55),
      rgba(255,63,212,.38)
    );
  box-shadow:
    inset 0 4px 14px rgba(176,0,255,.42),
    0 0 26px rgba(176,0,255,.45);
}

/* ответ */
.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 20px;

  border-top:1px solid transparent;
  color: var(--muted);

  transition:
    max-height .22s ease,
    padding .25s ease,
    border-color .25s ease,
    opacity .25s ease;

  opacity:0;
}

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

/* адаптив */
@media (max-width: 640px){
  .faq{
    padding:48px 0;
  }
  .faq-icon{
    width:24px;
    height:24px;
    border-radius:7px;
  }
}