/* ============================================================
   FAQ (28.09.2026): слева заголовок и кнопка «Задать вопрос»,
   справа список <details>. Первый вопрос открыт — видно, что это
   раскрывается. Плюс превращается в минус поворотом.
   ============================================================ */
.faq__inner{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:clamp(28px, 4vw, 80px);
  align-items:start;
}
.faq__head{ position:sticky; top:calc(var(--header-h, 90px) + 24px); }
.faq__head .section__sub{ margin-top:clamp(10px, 1vw, 16px); max-width:26rem; }
.faq__btn{ margin-top:clamp(20px, 2vw, 30px); }

/* картинка под кнопкой: кадры на белом, поэтому multiply — белое сливается с фоном.
   Размер ограничен и высотой окна: голова липкая и должна влезать целиком. */
.faq__art{
  position:relative;
  width:min(100%, 380px, 42vh);
  aspect-ratio:1;
  margin-top:clamp(20px, 2.4vw, 40px);
  mix-blend-mode:multiply;
}
.faq__art img, .faq__art canvas{ position:absolute; inset:0; width:100%; height:100%; }
.faq__art canvas{ opacity:0; transition:opacity .4s var(--ease); }
.faq__art.is-live canvas{ opacity:1; }
.faq__art.is-live img{ opacity:0; }
/* ≤ 1100 px голова не липнет: картинка стоит над списком по центру и проигрывает
   превращение один раз, когда вышла в кадр (faq.js, облегчённые кадры m00…) */
@media (max-width: 1100px){ .faq__art{ width:min(64vw, 300px); margin:clamp(20px, 5vw, 32px) auto 0; } }

.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  position:relative;
  display:block;
  padding:clamp(18px, 1.6vw, 24px) 56px clamp(18px, 1.6vw, 24px) 0;
  font:560 clamp(16px, 1.2vw, 20px)/1.35 var(--font);
  color:var(--fg);
  cursor:pointer;
  list-style:none;
  transition:color .25s var(--ease);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:focus-visible{ outline:2px solid var(--accent-1); outline-offset:4px; border-radius:6px; }
.faq__icon{
  position:absolute; right:4px; top:50%;
  width:34px; height:34px; margin-top:-17px;
  border-radius:50%;
  background:var(--accent-wash);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:1.8px; margin:-.9px 0 0 -6px;
  background:var(--accent-1); border-radius:2px;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.faq__icon::after{ transform:rotate(90deg); }
.faq__item[open] .faq__icon{ background:var(--accent-1); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after{ background:#fff; }
.faq__item[open] .faq__icon::after{ transform:rotate(0deg); }
.faq__a{
  margin:0;
  padding:0 56px clamp(20px, 1.8vw, 28px) 0;
  max-width:62ch;
  font-size:clamp(14.5px, 1.02vw, 16.5px); line-height:1.65;
  color:var(--fg-lead);
}
@media (hover:hover) and (pointer:fine){ .faq__q:hover{ color:var(--accent-1); } }

/* ---------- ночной FAQ: между ночной землёй и ночным подвалом ----------
   Фон — ровно цвет, которым кончается земля ночью и начинается подвал
   (#0b1630), поэтому швов нет ни сверху, ни снизу. Звёзды — те же, что в подвале. */
.faq--night{
  position:relative; isolation:isolate;
  margin-top:0;
  padding-block:clamp(56px, 6vw, 110px) clamp(40px, 4vw, 72px);
  background:#0b1630;
  color:#dfe7f5;
}
.faq--night::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 18% 30%, #fff 99%, transparent),
    radial-gradient(1px 1px at 36% 70%, rgba(255,255,255,.7) 99%, transparent),
    radial-gradient(1.5px 1.5px at 52% 14%, rgba(255,255,255,.9) 99%, transparent),
    radial-gradient(1px 1px at 74% 58%, rgba(255,255,255,.6) 99%, transparent),
    radial-gradient(1px 1px at 88% 24%, #fff 99%, transparent);
  background-size:560px 300px;
  opacity:.6;
  animation:night-twinkle 6s ease-in-out infinite alternate;
}
/* 29.09.2026: цвета ночи — от токенов темы, а не голубые навсегда. Иначе на 1С
   (янтарь) ночной заголовок оставался голубым: стили собираются по алфавиту,
   faq.css идёт после c1-theme.css и перебивал его. Для голубой темы — те же
   #a9d8ff и #6bc1ff, что были. */
.faq--night .eyebrow{ color:#a9d8ff; color:color-mix(in srgb, var(--accent-2) 55%, #fff); }
.faq--night .h2{ color:#fff; }
.faq--night .h2 em{ color:var(--accent-2); }
.faq--night .section__sub{ color:rgba(223,231,245,.72); }
/* у .btn--outline белый фон — на ночи кнопка прозрачная со светлой рамкой */
.faq--night .faq__btn{ background:rgba(255,255,255,.04); color:#fff; border-color:rgba(var(--accent-rgb),.6); }
.faq--night .faq__btn:hover{ background:rgba(var(--accent-rgb),.18); color:#fff; border-color:var(--accent-2); }
.faq--night .faq__list, .faq--night .faq__item{ border-color:rgba(255,255,255,.12); }
.faq--night .faq__q{ color:#fff; }
.faq--night .faq__a{ color:rgba(223,231,245,.72); }
.faq--night .faq__icon{ background:rgba(255,255,255,.08); }
.faq--night .faq__icon::before, .faq--night .faq__icon::after{ background:var(--accent-2); }
.faq--night .faq__item[open] .faq__icon{ background:var(--accent-1); }
@media (hover:hover) and (pointer:fine){ .faq--night .faq__q:hover{ color:var(--accent-2); } }
/* картинка «? → ✓» на ночи: кадры на чёрном, «экран» убирает чёрное — стекло светится */
/* 29.09.2026: у кадров своя прозрачность (tools/unscreen.py), смешивание не нужно —
   screen внутри липкой головы всё равно не доставал до фона секции */
.faq--night .faq__art{ mix-blend-mode:normal; }
@media (prefers-reduced-motion:reduce){ .faq--night::before{ animation:none; } }
@media (max-width: 1100px){
  .faq__inner{ grid-template-columns:minmax(0, 1fr); }
  .faq__head{ position:static; }
}
@media (prefers-reduced-motion:reduce){ .faq__icon, .faq__icon::before, .faq__icon::after{ transition:none; } }

/* 29.09.2026: кадры с прозрачностью (tools/unscreen.py) — края растушёваны, чтобы блики на полу
   не обрывались прямой линией по краю кадра */
.faq__art{
  -webkit-mask:radial-gradient(62% 58% at 50% 48%, #000 62%, transparent 100%);
          mask:radial-gradient(62% 58% at 50% 48%, #000 62%, transparent 100%);
}

/* ---- сумерки над ночным FAQ (29.09.2026) ----
   На главной FAQ стоит после ночной земли — шва нет. На страницах услуг
   перед ним светлая карточка заявки, и ночь начиналась прямой линией.
   faq_fade в странице: верх секции — переход от фона страницы через лёгкий
   оттенок акцента в ночь, контент опущен ниже перехода. */
.faq--fade{ --dusk:clamp(110px, 12vw, 200px); padding-top:calc(clamp(56px, 6vw, 110px) + var(--dusk)); }
.faq--fade::after{
  content:""; position:absolute; left:0; right:0; top:0; height:var(--dusk);
  z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    var(--dusk-from, var(--bg)) 0%,
    color-mix(in srgb, var(--accent-1) 14%, var(--dusk-from, var(--bg))) 28%,
    color-mix(in srgb, var(--accent-1) 10%, #1a2850) 66%,   /* сумеречный синий: 22% акцента давали у янтаря грязно-коричневую полосу */
    rgba(11,22,48,0) 100%);
}
/* на старых страницах услуг перед FAQ стоит карточка заявки на сером фоне (#f7f9fc,
   ai-lead.css) — сумерки начинаются с её цвета, иначе по кромке шла светлая полоска */
.lead-sect + .faq--fade{ --dusk-from:#f7f9fc; }