/* Главная страница: то, что инлайновым атрибутом выразить НЕЛЬЗЯ.

   Разметка лендинга перенесена с макета дословно, вместе с её инлайновыми
   стилями — CSP сайта разрешает атрибут `style=`, но запрещает блок стилей на
   странице (`style-src 'self'; style-src-attr 'unsafe-inline'`). Значит здесь
   лежит ровно остаток: кадры анимаций, состояния :hover и :focus-visible,
   узкий экран и метрики общей шапки, подогнанные под макет. Ничего, что можно
   было бы написать атрибутом, сюда не переносится — иначе появится второе
   место, где страница решает, как ей выглядеть.

   Палитра НЕ дублируется: цвета макета совпадают с токенами `site.css`
   один в один, и разметка несёт их в атрибутах. */

/* ── кадры ──────────────────────────────────────────────────────────────── */
@keyframes lineIn {
  from { opacity: 0; clip-path: inset(0 0 110% 0); transform: translateY(14px); }
  to   { opacity: 1; clip-path: inset(-20% -20% -20% -20%); transform: none; }
}
@keyframes glowDrift {
  0%   { transform: translate3d(-4%, 0, 0) scale(1);    opacity: .5; }
  50%  { transform: translate3d(6%, -3%, 0) scale(1.12); opacity: .85; }
  100% { transform: translate3d(-4%, 0, 0) scale(1);    opacity: .5; }
}
@keyframes swapIn   { from { opacity: 0; transform: translate(-7px, 7px); } to { opacity: 1; transform: none; } }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes flashBad { 0%, 62% { color: #74737e; } 70% { color: #e293b4; } 78% { color: #74737e; } 86%, 100% { color: #e293b4; } }
@keyframes markPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── появление при прокрутке ────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* БЕЗ СКРИПТОВ СТРАНИЦА ОСТАЁТСЯ ЧИТАЕМОЙ. Начальная прозрачность — это ставка
   на то, что скрипт снимет её; если скриптов нет, ставка проигрывает и половина
   страницы становится невидимой. `scripting: none` закрывает случай выключенного
   JS, а `landing.js` дополнительно показывает всё сразу, если браузер не знает
   IntersectionObserver. Две разных причины — две разных страховки. */
@media (scripting: none) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  body.v2 *, body.v2 *::before, body.v2 *::after { animation: none !important; }
}

/* ── состояния, которых у атрибута нет ──────────────────────────────────── */
.hv-text:hover      { color: #e8e7ec; }
.hv-muted:hover     { color: #a9a8b3; }
.hv-tint:hover      { background: #1c1c20; }
.hv-btn:hover       { background: #242134; }
.hv-btn-ghost:hover { color: #e8e7ec; border-color: #3d3d45; }
.hv-btn-glow:hover  { background: #242134; box-shadow: 0 0 22px rgba(179,160,234,.28); }
.hv-row:hover       { background: #1c1c20; box-shadow: inset 2px 0 0 #b3a0ea; }
.hv-cell:hover      { background: #1c1c20; box-shadow: inset 2px 0 0 #b3a0ea, 1px 0 0 #232329, 0 1px 0 #232329; }
.fc-accent:focus    { border-color: #b3a0ea; }

/* Клавиатурный фокус виден ВЕЗДЕ. Инлайновые стили макета гасят рамку у кнопок
   и ссылок, и без этого правила страницу нельзя пройти с клавиатуры. */
body.v2 a:focus-visible,
body.v2 button:focus-visible,
body.v2 summary:focus-visible,
body.v2 input:focus-visible,
body.v2 select:focus-visible { outline: 2px solid #b3a0ea; outline-offset: 2px; }

/* ── вкладки: видимое состояние и есть aria-состояние ─────────────────────
   ОБА состояния живут здесь, а не в атрибуте разметки. Инлайновый `style`
   сильнее любого селектора, поэтому, пока «невыбранный» вид стоял атрибутом,
   правило для выбранной вкладки не срабатывало никогда: все пять выглядели
   одинаково, и переключение было не видно вовсе. */
body.v2 [role="tab"] { background: transparent; color: #74737e; }
body.v2 [role="tab"][aria-selected="true"] { background: #242134; color: #cec0f2; }

/* ── вопросы ────────────────────────────────────────────────────────────── */
body.v2 summary::-webkit-details-marker { display: none; }
body.v2 .faq-mark::after { content: "+"; }
body.v2 details[open] .faq-mark::after { content: "−"; color: #b3a0ea; }

/* ── общая шапка и подвал под метрики макета ────────────────────────────── */
body.v2 .frame      { max-width: 1400px; overflow-x: clip; }
body.v2 header.top  { padding: 0 36px; height: 72px; background: rgba(23,23,26,.88);
                      backdrop-filter: blur(14px); z-index: 30; }
body.v2 .brand svg  { width: 24px; height: 24px; }
body.v2 .brand b    { font-size: 19px; }
body.v2 .brand svg rect + rect { animation: swapIn 1.2s cubic-bezier(.2,.7,.2,1) both; }

/* Полоса прочитанного. Узел создаёт landing.js: в разметке общей шапки его нет,
   а шапка общая для всего сайта, где полосе делать нечего. */
body.v2 .scroll-line {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, rgba(179,160,234,0), #b3a0ea);
  box-shadow: 0 0 12px rgba(179,160,234,.55); transition: width .12s linear;
}

/* ── конфигуратор: строки вердиктов создаёт скрипт ──────────────────────── */
body.v2 .cfg-verdict {
  display: grid; grid-template-columns: 92px minmax(0,220px) minmax(0,1fr); gap: 16px;
  align-items: baseline; padding: 14px 0; border-top: 1px solid #232329;
  font-size: 14px; line-height: 1.6;
}
body.v2 .cfg-verdict b     { color: #cfced6; }
body.v2 .cfg-verdict span:last-child { color: #8f8e99; }
body.v2 .cfg-mark {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em;
}
body.v2 .cfg-mark.yes { color: #93cfaa; }
body.v2 .cfg-mark.no  { color: #dcbd85; }

/* ── узкий экран ────────────────────────────────────────────────────────── */
/* Сетки макета заданы атрибутом и фиксированы в колонках, поэтому здесь
   единственное место на странице, где `!important` уместен: перебить инлайн
   иначе нечем. */
@media (max-width: 760px) {
  body.v2 .gap-row     { grid-template-columns: minmax(0,1fr) 88px 88px !important; }
  body.v2 .demo-panes  { grid-template-columns: minmax(0,1fr) !important; }
  body.v2 .demo-panes > div:first-child { border-right: 0 !important;
                                          border-bottom: 1px solid #2b2b31; }
  body.v2 .faq-grid    { grid-template-columns: minmax(0,1fr) !important; }
  body.v2 #signup-form { grid-template-columns: minmax(0,1fr) !important; }
  body.v2 .cfg-verdict { grid-template-columns: minmax(0,1fr); gap: 6px; }
}
@media (max-width: 700px) {
  body.v2 section     { padding-left: 20px !important; padding-right: 20px !important; }
  body.v2 header.top,
  body.v2 footer      { padding-left: 20px; padding-right: 20px; }
  body.v2 .frame      { border-left: 0; border-right: 0; }
}

/* ── герой: узлы создаёт landing.js, поэтому их оформление живёт здесь ───── */
.hero-dialog { display: flex; flex-direction: column; gap: 18px; }

.hero-bubble {
  opacity: 0; transform: translateY(10px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1),
              border-color .75s;
  border-left: 1px solid #2b2b31; padding-left: 14px;
}
.hero-bubble.is-shown { opacity: 1; transform: none; }
.hero-bubble--muted.is-lit,
.hero-bubble--accent.is-lit { border-left-color: #b3a0ea; }
.hero-bubble--green.is-lit  { border-left-color: #93cfaa; }

.hero-bubble-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em;
  margin-bottom: 7px;
}
.hero-bubble--muted  .hero-bubble-label { color: #74737e; }
.hero-bubble--accent .hero-bubble-label { color: #b3a0ea; }
.hero-bubble--green  .hero-bubble-label { color: #93cfaa; }

.hero-bubble-body {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.85; color: #cfced6;
}
.hero-prose { font-family: Inter, system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; color: #cfced6; }
.hero-prose--dim { font-size: 14px; color: #8f8e99; }

/* Обе версии значения лежат в одной ячейке grid: ширина берётся по длинной,
   поэтому при подмене строка не дёргается. */
.hero-token { display: inline-grid; vertical-align: baseline; text-align: left; }
.hero-token > span {
  grid-area: 1 / 1; padding: 2px 4px; border-radius: 2px; white-space: pre-wrap;
  transition: opacity .8s cubic-bezier(.4,0,.2,1), background .8s, color .8s;
}
.hero-token-real { opacity: 1; color: #cfced6; background: transparent; }
.hero-token-fake { opacity: 0; color: #cec0f2; background: rgba(179,160,234,.18); }
.hero-token.is-found   .hero-token-real { color: #e5aec6; background: rgba(226,147,180,.16); }
.hero-token.is-swapped .hero-token-real { opacity: 0; }
.hero-token.is-swapped .hero-token-fake { opacity: 1; }

.hero-record { display: grid; gap: 9px; }
.hero-record-row {
  display: grid; grid-template-columns: minmax(0,88px) minmax(0,1fr); gap: 12px;
  align-items: baseline; opacity: 0; transform: translateY(6px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.hero-dialog.is-filed .hero-record-row { opacity: 1; transform: none; }
.hero-record-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em;
  color: #5c5c66; text-transform: uppercase;
}
.hero-record-value {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #93cfaa; line-height: 1.5;
}

/* ── демо: смена примера читается как смена примера ──────────────────────── */
.demo-swap { animation: fadeSwap .5s cubic-bezier(.2,.7,.2,1) both; white-space: pre-wrap; }