/* ===========================
   FAQ 2026 — ORIGINAL ANIMATION PRESERVED
   (Your animation, timing, motion stays unchanged)
=========================== */
:root{
  --faq26-bg0: #070A12;
  --faq26-bg1: #0B1024;
  --faq26-text: rgba(255,255,255,.86);
  --faq26-dim: rgba(255,255,255,.58);
  --faq26-line: rgba(255,255,255,.12);

  --faq26-cyan: #28E0FF;
  --faq26-lilac:#9AA7FF;
  --faq26-orange:#FFA62B;

  --faq26-radius: 22px;
  --faq26-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.faq26{
  position: relative;
  padding: clamp(56px, 6vw, 96px) 0;
  
  overflow: hidden;
  color: var(--faq26-text);
}

.faq26__bg{
  position:absolute;
  inset:-40%;
 
  filter: blur(70px);
  opacity: .35;
  animation: faq26Float 10s ease-in-out infinite;
  pointer-events:none;
}

@keyframes faq26Float{
  0%,100%{ transform: translate3d(-2%, -1%, 0) rotate(-6deg) scale(1.02); }
  50%{ transform: translate3d(2%, 1%, 0) rotate(6deg) scale(1.06); }
}

.faq26__container{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.faq26__head{
  display:grid;
  /* gap: 12px; */
  /* margin-bottom: 22px; */
}

.faq26__pill{
  display:inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--faq26-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

.faq26__title{
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  margin: 0;
}

.faq26__sub{
  margin: 0;
  color: var(--faq26-dim);
  max-width: 62ch;
}

.faq26__grid{
  display:grid;
  gap: 14px;
  /* margin-top: 18px; */
}

/* Card */
.faq26__card{
  position: relative;
  border-radius: var(--faq26-radius);
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--faq26-shadow);
  overflow: hidden;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 16px 16px 16px 18px;
  transform: translateZ(0);
}

/* gradient “neon edge” */
.faq26__card::before{
  content:"";
  position:absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--faq26-radius);
  background: linear-gradient(90deg,
    rgba(40,224,255,.55),
    rgba(154,167,255,.45),
    rgba(255,166,43,.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .55;
  pointer-events:none;
}

.faq26__shine{
  position:absolute;
  inset: -40% -20% auto -20%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 60%);
  transform: translate3d(-20%, -20%, 0) rotate(12deg);
  opacity: .25;
  pointer-events:none;
  transition: opacity .35s ease;
}

.faq26__card:hover .faq26__shine{ opacity: .38; }

/* Content */
.faq26__content{
  position: relative;
  min-height: 76px;
  display:grid;
  align-content:center;
  padding-right: 8px;
}

/* Question / Answer layers */
.faq26__q,
.faq26__a{
  position: absolute;
  inset: 0;
  display:grid;
  align-content:center;
  gap: 6px;
  padding-right: 4px;
  will-change: transform, opacity, filter;
  transition:
    transform .55s cubic-bezier(.2,.9,.2,1),
    opacity .45s ease,
    filter .55s ease;
}

.faq26__q{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0px);
}

.faq26__a{
  opacity: 0;
  transform: translate3d(14px, 10px, 0) scale(.985);
  filter: blur(10px);
}

.faq26__step{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.faq26__qText{
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.2;
}

.faq26__hint{
  margin: 0;
  color: var(--faq26-dim);
  font-size: 13px;
}

.faq26__aTitle{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.faq26__aText{
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.45;
  max-width: 78ch;
}

.faq26__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.faq26__chip{
  font-size: 12px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Toggle button */
.faq26__toggle{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  position: relative;
  overflow:hidden;
  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease;
}

.faq26__toggle::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(closest-side, rgba(40,224,255,.22), transparent 60%);
  opacity: 0;
  transition: opacity .28s ease;
}

.faq26__toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(40,224,255,.35);
  background: rgba(0,0,0,.10);
}
.faq26__toggle:hover::before{ opacity: 1; }

.faq26__arrow{
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255,255,255,.86);
  
  transform: rotate(45deg);
  transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
}

/* OPEN STATE (answer visible) */
.faq26__card.is-open{
  border-color: rgba(40,224,255,.24);
}

.faq26__card.is-open .faq26__q{
  opacity: 0;
  transform: translate3d(-18px, -10px, 0) scale(.985);
  filter: blur(10px);
}

.faq26__card.is-open .faq26__a{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0px);
}

.faq26__card.is-open .faq26__arrow{
  transform: rotate(225deg);
}

/* height animation via JS measured height */
.faq26__content{
  transition: height .55s cubic-bezier(.2,.9,.2,1);
  height: 76px; /* will be overridden by JS */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq26__bg{ animation: none; }
  .faq26__q,.faq26__a,.faq26__toggle,.faq26__content{ transition: none !important; }
}

/* Responsive */
@media (max-width: 720px){
  .faq26__card{
    grid-template-columns: 1fr;
  }
  .faq26__toggle{
    width: 100%;
    height: 44px;
    border-radius: 16px;
  }
}

/* =========================================================
   YOUR SITE ADAPTATION (without changing animation)
   Desktop: light background + dark text
   Mobile: keep dark neon as original
========================================================= */

/* DESKTOP LIGHT THEME (>= 721px) */
@media (min-width: 721px){
  .faq26{
    background: transparent;
    color: rgba(15,23,32,.92);
  }

  /* keep moving blob but make it softer on white */
  .faq26__bg{
    opacity: .22; /* does NOT change speed/animation */
  }

  .faq26__pill{
    border: 1px solid rgba(15,23,32,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
    color: rgba(15,23,32,.78);
    box-shadow: 0 12px 34px rgba(15,23,32,.10);
  }

  .faq26__title{ color: rgba(15,23,32,.92); }
  .faq26__sub{ color: rgba(15,23,32,.62); }

  .faq26__card{
    border: 1px solid rgba(15,23,32,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.54));
    box-shadow: 0 18px 60px rgba(15,23,32,.12);
  }

  .faq26__step{ color: rgba(15,23,32,.55); }
  .faq26__hint{ color: rgba(15,23,32,.62); }

  .faq26__aTitle{ color: rgba(15,23,32,.62); }
  .faq26__aText{ color: rgba(15,23,32,.78); }

  .faq26__chip{
    color: rgba(15,23,32,.72);
    border: 1px solid rgba(15,23,32,.10);
    background: rgba(255,255,255,.55);
  }

  /* toggle becomes dark button on desktop, but we DO NOT change transitions */
  .faq26__toggle{
    border: 1px solid rgba(15,23,32,.14);
    background: linear-gradient(180deg, rgba(15,23,32,.96), rgba(15,23,32,.82));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .faq26__arrow{
    border-right-color: rgba(255,255,255,.92);
    border-top-color: rgba(255,255,255,.92);
  }

  /* keep open border logic but match desktop tone */
  .faq26__card.is-open{
    border-color: rgba(15,23,32,.16);
  }
}

/* MOBILE (<= 720px): original dark neon remains (no override needed) */
/* ===== Arrow: default DOWN, open UP ===== */
.faq26__arrow{
  width: 14px;
  height: 14px;

  /* делаем "галочку/chevron" через right+bottom */
  border-right: 2px solid rgba(255,255,255,.86);
  border-bottom: 2px solid rgba(255,255,255,.86);

  /* вниз */
  transform: rotate(45deg);

  /* скорость/кривая оставлены как у тебя */
  transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
}

/* OPEN = вверх */
.faq26__card.is-open .faq26__arrow{
  transform: rotate(-135deg);
}
/* =========================================================
   MOBILE LIGHT (match site concept)
   - no dark background on mobile
   - light glass cards, dark text
========================================================= */
@media (max-width: 520px){
.faq26__arrow {
  border-top: none;
}
  .faq26{
    background: transparent; /* важно: убираем тёмную заливку */
    color: rgba(15,23,32,.92);
  }

  /* фон-blob оставляем (анимацию не меняем), но делаем светлее */
  .faq26__bg{
    opacity: .18; /* только прозрачность, скорость/анимация без изменений */
  }

  .faq26__pill{
    border: 1px solid rgba(15,23,32,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
    color: rgba(15,23,32,.78);
    box-shadow: 0 12px 34px rgba(15,23,32,.10);
  }

  .faq26__title{ color: rgba(15,23,32,.92); }
  .faq26__sub{ color: rgba(15,23,32,.62); }

  .faq26__card{
    border: 1px solid rgba(15,23,32,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
    box-shadow: 0 18px 60px rgba(15,23,32,.12);
  }

  .faq26__step{ color: rgba(15,23,32,.55); }
  .faq26__qText{ color: rgba(15,23,32,.92); }
  .faq26__hint{ color: rgba(15,23,32,.62); }

  .faq26__aTitle{ color: rgba(15,23,32,.62); }
  .faq26__aText{ color: rgba(15,23,32,.78); }

  .faq26__chip{
    color: rgba(15,23,32,.72);
    border: 1px solid rgba(15,23,32,.10);
    background: rgba(255,255,255,.55);
  }

  /* Toggle кнопка на мобилке: тёмная (как твои dark buttons на desktop) */
  .faq26__toggle{
    border: 1px solid rgba(15,23,32,.14);
    background: linear-gradient(180deg, rgba(15,23,32,.96), rgba(15,23,32,.82));
    box-shadow: 0 14px 40px rgba(15,23,32,.18);
  }

  /* Стрелка на мобилке — белая на тёмной кнопке */
  .faq26__arrow{
    border-right-color: rgba(255,255,255,.92);
    border-bottom-color: rgba(255,255,255,.92);
  }

  /* Чтобы было понятно, что кликабельно */
  .faq26__card{
    cursor: pointer;
  }
}