/* TryLucid — тёмный hero (лучи-прожекторы WebGL + «кокпит» карточек) поверх светлых секций.
   Палитра: ink #131722 · bg #F6F8FB · key #6D5BF6 · акцент лучей #7FB4FF · Claude #D97757 */

@font-face { font-family: 'Golos Text'; font-weight: 600; font-display: swap; src: url(fonts/golos-text-600.woff2) format('woff2'); }
@font-face { font-family: 'Golos Text'; font-weight: 800; font-display: swap; src: url(fonts/golos-text-800.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-400.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/manrope-700.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url(fonts/jetbrains-mono-600.woff2) format('woff2'); }

:root {
  --ink: #131722;
  --ink-soft: #4B5364;
  --bg: #F6F8FB;
  --card: #FFFFFF;
  --line: #E2E8F2;
  --key: #6D5BF6;
  --key-dark: #5343D6;
  /* кнопочная система (2026-07-31): у кнопок ровно два фиолетовых исполнения —
     градиент --btn-grad (полноразмерные primary) и flat --key (микро: chip-active, icon) */
  --btn-grad: linear-gradient(120deg, #7B6BFF, #6D5BF6);
  --btn-shadow: 0 6px 20px rgba(109,91,246,.35);
  --btn-shadow-hover: 0 10px 28px rgba(109,91,246,.5);
  /* единый размер секционных заголовков главной (2026-07-31, «в едином стиле») */
  --h2-main: clamp(30px, 4.6vw, 52px);
  --display: 'Golos Text', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--body); color: var(--ink); background: var(--bg); line-height: 1.6; }
h1, h2, h3 { text-wrap: balance; }
/* мобильное меню открыто — фон не скроллится (класс ставит site.js) */
html.menu-open, html.menu-open body { overflow: hidden; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
a { color: var(--key-dark); }
code { font-family: var(--mono); font-size: 0.85em; }
:focus-visible { outline: 3px solid var(--key); outline-offset: 2px; border-radius: 4px; }
/* visually-hidden: текст только для скринридеров */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- hero: тёмный экран с живым «дымным» фоном ---------- */
.hero { position: relative; background: #0A0C13; color: #F2F4FA; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 60px 0 40px; }  /* нижний паддинг: карточки-преимущества не прилипают к краю секции */
/* на высоких экранах свободная высота делится поровну: над заголовком и над кокпитом (белой полосы снизу нет) */
.hero .hero-center { margin-top: auto; margin-bottom: auto; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
#smoke { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
#smoke.on { opacity: 1; }
#smoke.on ~ .blob { display: none; }
.blob { position: absolute; display: block; width: 55vw; height: 55vw; border-radius: 50%; filter: blur(90px); opacity: .5; }
.blob.b1 { background: radial-gradient(circle, #6D5BF6 0%, transparent 65%); top: -18%; left: -12%; }
.blob.b2 { background: radial-gradient(circle, #17456B 0%, transparent 65%); bottom: -25%; right: -10%; }
.blob.b3 { background: radial-gradient(circle, #D97757 0%, transparent 62%); top: 32%; left: 48%; width: 34vw; height: 34vw; opacity: .28; }
@media (prefers-reduced-motion: no-preference) {
  .blob.b1 { animation: drift1 26s ease-in-out infinite alternate; }
  .blob.b2 { animation: drift2 32s ease-in-out infinite alternate; }
  .blob.b3 { animation: drift3 22s ease-in-out infinite alternate; }
  @keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.15); } }
  @keyframes drift2 { to { transform: translate(-12vw, -8vh) scale(1.1); } }
  @keyframes drift3 { to { transform: translate(-10vw, 12vh) scale(.85); } }
}

/* шапка: центрированная пилюля-навигация (по референсу) */
.top { position: relative; z-index: 2; display: flex; justify-content: center; padding: 22px 16px 0; }
.pill-nav { display: flex; align-items: center; gap: 26px; background: rgba(14,16,24,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 8px 10px 8px 22px; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.logo { font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; }
.logo span { color: #A79BFF; }
.pill-nav .nav-link { text-decoration: none; color: rgba(242,244,250,.75); font-weight: 700; font-size: 15px; }
.pill-nav .nav-link:hover { color: #fff; }
.pill-cta { background: #fff; color: #0A0C13; text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 10px 20px; }
.pill-cta:hover { background: #E8E4FF; }

.hero-center { position: relative; z-index: 1; text-align: center; margin: 0 auto; padding-top: clamp(20px, 3.5vh, 44px); max-width: 1280px; }
h1 { font-size: clamp(34px, 5vw, 64px); margin-bottom: 14px; letter-spacing: -0.02em; }
h1 .key-word { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}
.key-word { font-style: normal; background: linear-gradient(100deg, #A79BFF, #6D5BF6 55%, #D97757); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.65; color: rgba(242,244,250,.86); text-shadow: 0 1px 14px rgba(6,7,12,.55); max-width: 72ch; margin: 0 auto 22px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn .ico { opacity: .65; margin-right: 8px; font-weight: 400; }

/* endpoint-пилюля: базовый адрес API */
.endpoint { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; background: rgba(16,19,28,.66); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 6px 6px 16px; backdrop-filter: blur(10px); }
.ep-label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(242,244,250,.62); }
.endpoint code { font-family: var(--mono); font-size: 13.5px; color: #CFE0F4; }
/* яркая белая кнопка «Получить доступ» в пилюле */
.ep-cta { display: inline-flex; align-items: center; font-family: var(--body); font-weight: 700; font-size: 15px; color: #12131A; background: #fff; border-radius: 999px; padding: 10px 20px; text-decoration: none; white-space: nowrap; }  /* вид LIGHT, размер M */
.ep-caret { display: inline-block; width: 8px; height: 1.05em; background: #A99BFF; margin: 0 1px 0 2px; vertical-align: -2px; border-radius: 1px; animation: epBlink 1.05s steps(1) infinite; }
@keyframes epBlink { 50% { opacity: 0; } }
.ep-cta:hover { background: #E8E4FF; }
/* телефон: подпись BASE URL видна, URL — своя пилюля, кнопка отдельно на всю ширину */
@media (max-width: 640px) {
  .endpoint { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; background: none; border: 0; padding: 0; backdrop-filter: none; }
  .ep-label { display: block; text-align: center; font-size: 10.5px; }
  .endpoint code { display: block; font-size: 13px; text-align: center; background: rgba(16,19,28,.66); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 11px 16px; }
  .ep-cta { justify-content: center; padding: 12px 20px; }
}
/* невысокие ноутбучные экраны: ужимаем отступы hero */
@media (max-height: 800px) and (min-width: 861px) {
  .hero-center { padding-top: 12px; }
  .endpoint { margin-top: 10px; padding-top: 4px; padding-bottom: 4px; }
}

/* ---------- Buttons: единая система (5 видов; консилиум 2026-07-31) ----------
   PRIMARY (фиолетовый градиент) · LIGHT (белая) · GHOST (призрачная) · CHIP (мини) · ICON (.c-go a).
   Размер L = 14px 30px/16px (секционные CTA), M = 10px 20px/15px (шапка/пилюли).
   Общие интеракции всех кнопок — transition + :active-отклик: */
.btn, .pill-cta, .nav-login, .ep-cta, .pyr-btn, .lf-submit, .cat2-btn {
  transition: transform .15s ease, background-color .18s ease, border-color .18s ease, color .18s ease, filter .18s ease, box-shadow .2s ease; }
.btn:active, .pill-cta:active, .nav-login:active, .ep-cta:active, .pyr-btn:active, .lf-submit:active, .cat2-btn:active { transform: translateY(0) scale(.98); }
.btn { display: inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; font-family: var(--body); }
.btn-light { background: #fff; color: #0A0C13; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.btn-light:hover { background: #E8E4FF; }
.btn-primary { background: var(--btn-grad); color: #fff; box-shadow: var(--btn-shadow); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
.btn-m { padding: 10px 20px; font-size: 15px; }  /* размер M (как кнопки шапки) */

/* карточки-«деки» — используются в hero-cards на первом экране */
.deck-card { background: rgba(16,19,28,.66); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.card-pad { padding: 16px 18px; }
.deck-title { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: rgba(242,244,250,.88); }
.card-pad .deck-title { margin-bottom: 8px; }
.ico-t { width: 18px; height: 18px; margin-left: auto; color: rgba(242,244,250,.5); flex: none; }
.deck-text { font-size: 13.5px; line-height: 1.5; color: rgba(242,244,250,.6); }
/* ряд из 3 карточек-преимуществ на первом экране (стиль кокпит-карточек) */
.hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 34px auto 0; text-align: left; }
.hero-cards .deck-card { padding: 18px 20px; }
@media (max-width: 720px) { .hero-cards { grid-template-columns: 1fr; max-width: 420px; } }
/* ---------- Поставщики: сетка брендов ---------- */
.providers { position: relative; overflow: hidden; padding: 96px 0;
  /* непрозрачный фон — перекрывает сетку dark-flow, сохраняя мягкое свечение */
  background: radial-gradient(1100px 520px at 12% -6%, rgba(109,91,246,.13), transparent 60%), radial-gradient(900px 480px at 108% 22%, rgba(70,110,255,.07), transparent 55%), #0A0C13; }
.providers > .wrap { position: relative; z-index: 1; }
.pyr-meta { grid-area: 2 / 1 / 3 / -1; font-size: 11px; color: var(--ink-soft); text-align: left; line-height: 1.35; }
.pyr-tile.is-soon .pyr-meta .soon-pill { margin-top: 0; }
.prov-h { text-align: center; font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 16px; }
.prov-sub { text-align: center; max-width: 64ch; margin-left: auto; margin-right: auto; }
/* ---- деловая сетка провайдеров (пирамида/лучи/глифы убраны 2026-07-30: «слишком пафосно») ---- */
.pgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 920px; margin: 38px auto 0; }
/* название и знак — в ОДНУ строку, название первым, знак справа (указание Босса 2026-08-01).
   Раскладка сеткой: в разметке знак идёт первым, место ему задаёт grid-area — HTML не трогаем. */
.pyr-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 6px; width: 206px; padding: 18px 16px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); text-decoration: none; color: #fff; transition: transform .18s ease, border-color .2s ease, background .2s ease; }
.pyr-tile:hover { transform: translateY(-2px); border-color: var(--brand-line); background: rgba(255,255,255,.05); }
/* знаки берём из lobe-icons как есть: свою покраску и цветную плашку не применяем (указание Босса 2026-08-01).
   color нужен монохромным знакам (Anthropic/OpenAI/xAI на currentColor) — цветные его игнорируют. */
.pyr-logo { grid-area: 1 / 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.pyr-logo svg { width: 22px; height: 22px; }
/* OpenAI — по просьбе Босса (2026-08-01) единственный знак в фирменном зелёном.
   Знак монохромный (currentColor), цвет берём из --brand самой плитки (#10A37F) — живёт в одном месте.
   Остальные монохромные (Anthropic, xAI) остаются белыми: цветных версий их марок не существует. */
.pyr-tile[href*="openai"] .pyr-logo { color: var(--brand); }
/* Anthropic — по просьбе Босса (2026-08-01): плашка залита фирменным оранжевым (--brand плитки, #D97757),
   знак чёрный. Так марку подаёт и сама Anthropic. Рамку красим туда же — белая обводка спорила бы с заливкой. */
.pyr-tile[href*="anthropic"] .pyr-logo { color: #000; background: var(--brand); border-color: var(--brand); }
.pyr-name { grid-area: 1 / 1; font-family: var(--display); font-weight: 800; font-size: 15px; color: #fff; text-align: left; }
.prov-cta-row { text-align: center; margin-top: 36px; }
.pyr-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 700; font-size: 16px; color: #fff; background: var(--btn-grad); border: 0; border-radius: 999px; padding: 14px 30px; text-decoration: none; box-shadow: var(--btn-shadow); }  /* вид PRIMARY, размер L */
.pyr-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
@media (max-width: 640px) {
  .providers { padding: 56px 0 48px; }
  .pgrid { gap: 10px; margin-top: 28px; }
  .pyr-tile { width: calc(50% - 5px); padding: 14px 12px 12px; column-gap: 8px; row-gap: 4px; }
  .pyr-logo { width: 34px; height: 34px; border-radius: 10px; }
  .pyr-logo svg { width: 19px; height: 19px; }
  .pyr-name { font-size: 13px; }
  .pyr-meta { font-size: 10.5px; }
  .prov-cta-row { margin-top: 26px; }
  .pyr-btn { width: 100%; justify-content: center; padding: 13px 30px; font-size: 15px; }
}
.soon-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 2px 9px; }
/* ---------- Каталог моделей (2-й экран) ---------- */
.catalog2 { position: relative; background: #0A0C13; padding: 96px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
/* сетка-текстура (клеточка) — перенесена сюда, на «Широкую линейку» */
.catalog2::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
}
.catalog2 > .wrap { position: relative; z-index: 1; }
.cat2-h { font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; color: #fff; text-align: center; margin-bottom: 16px; }
.cat2-note { color: rgba(242,244,250,.6); font-size: 15px; max-width: 72ch; margin: 14px auto 30px; line-height: 1.6; text-align: center; }
.cat2-note a, .cat2-subnote a { color: #A99BFF; }
.cat2-subhead { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; margin: 42px 0 6px; }
.sub-ico { flex: none; width: 20px; height: 20px; color: #A79BFF; }
.cat2-subhead:first-of-type { margin-top: 6px; }
.cat2-subnote { color: rgba(242,244,250,.55); font-size: 14px; max-width: 78ch; margin: 0 0 20px; line-height: 1.6; }
/* Шапка категории каталога (материалы Босса, 2026-08-04): слева заголовок+описание,
   справа на той же линии — пример работы моделей категории, НАД рядом карточек.
   Медиа в своей натуральной пропорции (без кропа): картинки 16:9, видео 21:9. */
.cat2-sec { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; align-items: center; margin: 46px 0 20px; }
.cat2-sec:first-of-type { margin-top: 10px; }
.cat2-sec .cat2-subhead { margin: 0 0 8px; }
.cat2-sec .cat2-subnote { margin: 0; max-width: 62ch; }
.cat2-sec-media { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: #14171F; line-height: 0; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.cat2-sec-media img, .cat2-sec-media video { display: block; width: 100%; height: auto; }
/* Плеер видео-примера (2026-08-04, просьба Босса): свои элементы управления в фирменном
   фиолетовом — нативный <video controls> рисует браузер, в стиль сайта его не привести. */
.cat2-player { position: relative; }
.cat2-player video { cursor: pointer; }
/* Панель скрыта, пока на видео не навели: показывает её класс .vp-show (vplayer.js),
   и она же сама уходит после паузы бездействия — как в ютубе. :focus-within — страховка
   для клавиатуры: дотабались до кнопки — панель видно и без мыши. */
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 26px 12px 11px; line-height: 1;
  background: linear-gradient(180deg, rgba(8,10,16,0), rgba(8,10,16,.55) 45%, rgba(8,10,16,.85));
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.cat2-player.vp-show .vp-bar, .cat2-player:has(:focus-visible) .vp-bar { opacity: 1; transform: none; pointer-events: auto; }
/* именно :focus-visible, а не :focus-within — после клика МЫШЬЮ фокус остаётся на кнопке,
   и панель не пряталась бы никогда (поймано при проверке 2026-08-04) */
.vp-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.vp-btn:hover { background: rgba(255,255,255,.22); }
.vp-btn svg { width: 13px; height: 13px; fill: currentColor; }
.vp-play { background: var(--btn-grad); box-shadow: var(--btn-shadow); }   /* главная кнопка — фирменный градиент */
.vp-play:hover { background: var(--btn-grad); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px); }
.vp-btn:active { transform: translateY(0) scale(.94); }
.vp-seek { flex: 1 1 auto; min-width: 40px; height: 4px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, #8B7BFF var(--p, 0%), rgba(255,255,255,.24) var(--p, 0%)); }
.vp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(109,91,246,.45); cursor: pointer; }
.vp-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(109,91,246,.45); cursor: pointer; }
.vp-seek:focus-visible { outline: 2px solid #A99BFF; outline-offset: 4px; }
.vp-time { flex: none; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.vp-big { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--btn-grad); box-shadow: var(--btn-shadow); color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none; transform: scale(.9); transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.vp-big svg { width: 26px; height: 26px; fill: currentColor; }  /* оптический сдвиг — внутри самого пути, полем не двигаем */
.vp-big:hover { box-shadow: var(--btn-shadow-hover); }
.cat2-player.is-paused .vp-big { opacity: 1; pointer-events: auto; transform: none; }
.cat2-player:fullscreen { display: grid; place-items: center; border-radius: 0; border: 0; background: #05070C; }
.cat2-player:fullscreen video { width: auto; max-width: 100vw; max-height: 100vh; }
@media (prefers-reduced-motion: reduce) { .vp-btn, .vp-big, .vp-bar { transition: none; } }
@media (max-width: 360px) { .vp-time { display: none; } }   /* совсем узкий экран: время уступает место перемотке */
.cat2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat2-card { display: flex; flex-direction: column; background: #14171F; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 20px; transition: border-color .2s ease, transform .2s ease; }  /* непрозрачный фон — клетка-сетка секции не просвечивает */
.cat2-card:hover { transform: translateY(-2px); border-color: rgba(139,123,255,.32); }
.cat2-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.cat2-logo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.cat2-logo svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity .18s ease; }
/* По наведению на карточку знак становится цветным (указание Босса 2026-08-02):
   монохромный и цветной лежат в одной ячейке грида и кросс-фейдятся.
   У OpenAI и Grok цветных версий в наборе нет — OpenAI подсвечиваем фирменным зелёным,
   Grok остаётся монохромным (фирменного цвета у марки не существует). */
.cat2-logo .ic-color { opacity: 0; }
.cat2-card:hover .cat2-logo[data-swap] .ic-mono { opacity: 0; }  /* ТОЛЬКО там, где есть чем подменить:
     без [data-swap] знак у OpenAI и Grok гас в ноль и пропадал — цветной версии у них нет */
.cat2-card:hover .cat2-logo .ic-color { opacity: 1; }
.cat2-card:hover .cat2-logo[data-icon="openai"] { color: #10A37F; transition: color .18s ease; }
@media (prefers-reduced-motion: reduce) { .cat2-logo svg { transition: none; } }
.cat2-vendor { display: block; font-size: 11px; color: rgba(242,244,250,.5); text-transform: uppercase; letter-spacing: .05em; }
.cat2-name { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Резерв под вторую строку СНЯТ (2026-08-02): после сокращения «Nano Banana 2» все девять
   названий стали однострочными, и резерв висел пустой строкой — Босс это и заметил.
   Клэмп на 2 строки оставлен как страховка: длинное имя в будущем не развалит ряд. */
.cat2-desc { font-size: 13.5px; color: rgba(242,244,250,.72); line-height: 1.55; margin-bottom: 8px;
  min-height: calc(2 * 1.55em); }  /* резерв под две строки: «Для чего» стартует с одной высоты у всех карточек ряда */
.cat2-for { font-size: 13px; color: rgba(242,244,250,.55); line-height: 1.5; margin: 0; }  /* без прижатия к низу — иначе у коротких карточек дыра посередине */
.cat2-for b { color: rgba(242,244,250,.82); font-weight: 700; }
.cat2-foot { display: none; }  /* нижние надписи (цена + перк) убраны по запросу Босса */
.cat2-price { font-weight: 800; color: #fff; font-size: 15px; white-space: nowrap; }
.cat2-price em { font-style: normal; font-weight: 500; font-size: 11px; color: rgba(242,244,250,.5); }
.cat2-perk { font-size: 11.5px; color: #A99BFF; text-align: right; }
.cat2-soon { display: flex; align-items: center; gap: 14px; background: #12151C; border: 1px dashed rgba(255,255,255,.14); border-radius: 14px; padding: 16px 20px; }
.cat2-soon-badge { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A99BFF; background: rgba(109,91,246,.14); border: 1px solid rgba(139,123,255,.35); border-radius: 999px; padding: 3px 11px; }
.cat2-soon-h { font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; }
.cat2-soon-p { font-size: 13px; color: rgba(242,244,250,.6); line-height: 1.5; margin-top: 2px; }
.cat2-more { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14px; color: #A99BFF; text-decoration: none; }
.cat2-more:hover { text-decoration: underline; }
.cat2-btn { display: inline-flex; align-items: center; margin-top: 20px; font-family: var(--display); font-weight: 700; font-size: 14px; color: #C9BEFF; background: linear-gradient(180deg, #19192F, #121221); border: 1px solid rgba(139,123,255,.32); border-radius: 999px; padding: 12px 26px; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; }  /* сплошной фон (тот же тон, что был rgba) — клетка не просвечивает */
.cat2-btn:hover { color: #fff; background: var(--btn-grad); border-color: transparent; transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }  /* hover = PRIMARY (outline-вариант) */
@media (max-width: 900px) {
  .cat2-grid { grid-template-columns: 1fr 1fr; }
  .cat2-sec { grid-template-columns: 1fr; gap: 16px; margin: 32px 0 18px; }   /* медиа уходит под заголовок */
  .cat2-sec .cat2-subnote { max-width: 100%; }
}
@media (max-width: 620px) { .cat2-grid { grid-template-columns: 1fr; } }

/* ---------- Для бизнеса: инфраструктура (сетка 2×2) ---------- */
.biz-infra { text-align: center; }
.sec.biz-infra { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 76px 0;
  /* деловой фон: глубокий сине-стальной с мягким верхним свечением */
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(96,116,214,.14), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(70,100,180,.08), transparent 60%),
    linear-gradient(180deg, #0C1019 0%, #0A0C13 62%); }
.sec.biz-infra > .wrap { position: relative; z-index: 1; }
/* красивое разделение сверху: тонкая светящаяся линия + мягкое сияние */
.sec.biz-infra::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139,123,255,.5) 24%, rgba(96,150,255,.5) 76%, transparent); }
.sec.biz-infra::after { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 72%; max-width: 720px; height: 200px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(100,124,224,.2), transparent 70%); }
.biz-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--key-dark); margin-bottom: 12px; }
.biz-infra .biz-h { font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 16px; }
.biz-lead { color: var(--ink-soft); max-width: 64ch; margin: 0 auto 34px; line-height: 1.6; font-size: 16px; }
.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.biz-card { display: flex; align-items: stretch; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.biz-card:hover { transform: translateY(-2px); border-color: rgba(139,123,255,.35); }
/* левая визуальная панель (готова под фото: заменить background на url(...)) */
/* заглушка под фото (пустое поле «Ожидает фото»); под реальное фото — background:url(...) + скрыть плейсхолдер */
.biz-visual { flex: none; width: 150px; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(139,123,255,.10), rgba(139,123,255,.03)); border-right: 1px solid var(--line); }
/* неоновый подсвет за знаком: в покое скрыт, проявляется при наведении на карточку (указание Босса 2026-08-03) */
.biz-visual::before { content: ''; position: absolute; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, rgba(139,123,255,.30), transparent 68%); filter: blur(4px); pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.biz-card:hover .biz-visual::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .biz-visual::before { transition: none; } }
/* контурные значки вместо эмодзи (указание Босса 2026-08-01): viewBox 24, обводка currentColor, толщина 2 */
.biz-ico { position: relative; width: 46px; height: 46px; color: #A79BFF; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.biz-body { padding: 18px 22px; }
.biz-body h3 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 7px; }
.biz-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 760px) { .biz-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .biz-card { flex-direction: column; } .biz-visual { width: 100%; height: 110px; } }

/* ---------- #why: тот же стиль, что у бизнес-блока (полноэкранный фон + карточки-плитки) ---------- */
.sec.why2 { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 0 40px; text-align: center;
  /* тёмная палитра (как в .dark-flow) — чтобы .biz-card/.biz-body выглядели ровно как у бизнес-блока */
  --card: #161B2A; --line: rgba(255,255,255,.09); --ink: #EEF1F8; --ink-soft: #9AA3B8; --key-dark: #A99BFF;
  color: var(--ink);
  /* фон «для разработчиков»: глубокий индиго-фиолет с мягким верхним свечением (сиблинг делового экрана) */
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(139,123,255,.16), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(96,120,230,.08), transparent 60%),
    linear-gradient(180deg, #0D0B1A 0%, #0A0912 62%); }
.sec.why2 > .wrap { position: relative; z-index: 1; }
.sec.why2::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139,123,255,.5) 24%, rgba(96,150,255,.5) 76%, transparent); }
.sec.why2::after { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 72%; max-width: 720px; height: 200px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(120,110,235,.22), transparent 70%); }
.why2 .why2-h { font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; color: #fff; }
.why2 .why2-h .lucid { color: #A79BFF; }
.why2 .biz-lead { margin-bottom: 24px; }

/* Экран для разработчиков на ноутбучных высотах (указание Босса 2026-08-02: «подрежь, чтобы влезло»).
   База влезает от ~900px. Ниже — второй ярус: главный вес даёт заголовок в три строки по 52px (172px),
   поэтому здесь он мельче; верхний отступ секции НЕ трогаем — он держит заголовок ниже фиксированной
   шапки (61px). Скоуп min-width:761px — мобильный слой снимает min-height:100vh вовсе. */
@media (min-width: 761px) and (max-height: 880px) {
  .sec.why2 { padding: 34px 0 16px; }
  .why2 .why2-h { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 8px; }
  .why2 .biz-lead { margin-bottom: 14px; }
  .why2 .biz-grid { gap: 10px; }
  .why2 .biz-body { padding: 13px 18px; }
}

/* таблица цен на главной (в тёмной секции) */

/* страницы поставщиков */
.soon-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px; text-align: center; max-width: 640px; margin: 0 auto; }
.soon-card h2 { margin: 14px 0 10px; }
.soon-card p { color: var(--ink-soft); max-width: 54ch; margin: 0 auto 20px; line-height: 1.65; }
.soon-pill-lg { font-size: 12px; padding: 4px 14px; }

/* ---------- модели ---------- */
.models { padding: 72px 0 24px; }
.section-sub { color: var(--ink-soft); margin-bottom: 26px; }
.model-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.model { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ray, var(--key)); border-radius: 14px; padding: 18px 20px; }
.model-head { display: flex; align-items: center; gap: 10px; }
/* плашка знака нейтральная: значки теперь цветные из lobe-icons (указание Босса 2026-08-02),
   на залитой фирменным цветом подложке они мутнели. color задан для монохромных марок
   (Anthropic/OpenAI/xAI) — на светлой странице они должны быть тёмными, а не белыми. */
.m-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #15171E; background: rgba(20,24,36,.05); border: 1px solid var(--line); }
.m-ic svg { display: block; }
.model-name { font-family: var(--display); font-weight: 800; font-size: 18px; }
.model code { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; margin: 8px 0 10px; font-size: 13px; }
.model p { color: var(--ink-soft); font-size: 14.5px; }
.copy-id { cursor: pointer; transition: border-color .2s; }
.copy-id:hover, .copy-id:focus-visible { border-color: var(--key); }
/* галочка зарезервирована всегда (visibility) — при копировании нет сдвига ширины */
.copy-id::after { content: ' ✓'; visibility: hidden; color: #0E7A4F; }
.copy-id.copied::after { visibility: visible; }
.c-id .copy-id::after { color: #58D98A; }
/* в тёмном каталоге у ID нет рамки — hover показываем цветом и подчёркиванием */
.c-id .copy-id:hover, .c-id .copy-id:focus-visible { color: #fff; text-decoration: underline; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.m-chips span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ---------- подключение ---------- */
.connect { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 90px 0;
  /* фон «быстрого старта»: тёмный с код-акцентом (тил + фиолет) */
  background:
    radial-gradient(1000px 500px at 50% 0%, rgba(88,196,176,.1), transparent 60%),
    radial-gradient(820px 620px at 2% 100%, rgba(109,91,246,.1), transparent 60%),
    linear-gradient(180deg, #0B0F14 0%, #0A0C13 62%); }
.connect > .wrap { position: relative; z-index: 1; }
.connect h2 { font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 16px; }
/* разделение сверху: светящаяся линия (тил→фиолет) + мягкое сияние */
.connect::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(88,214,138,.5) 26%, rgba(139,123,255,.5) 74%, transparent); }
.connect::after { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 72%; max-width: 720px; height: 200px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(96,180,180,.16), transparent 70%); }
.connect-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
/* Правая колонка выравнивается по БУКВАМ «Быстрый старт», а не по боксу заголовка:
   у h2 52px/57.2 над буквами 16px «воздуха» (half-leading + разница ascent шрифта и глифа),
   из-за него блок «4 Начните работу» торчал выше строки. Замер: буквы 321px, кружок был 305px. */
.qs-right { padding-top: 16px; }
/* Быстрый старт (4 шага + анимированный терминал) */
.qs-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.qs-step { display: flex; gap: 15px; }
.qs-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--key); color: #fff; font-family: var(--mono); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.qs-body h3 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.qs-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.qs-body .btn { margin-top: 11px; }
.qs-note { display: inline-block; margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.qs-cmd { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 13px; color: #cdd6e0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 12px; }
.qs-step-final { margin-bottom: 16px; }
.qs-term { background: #0C0F16; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.42); }
.qs-term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.qs-term-bar i { width: 11px; height: 11px; border-radius: 50%; }
.qs-term-bar i:nth-child(1){background:#FF5F57}.qs-term-bar i:nth-child(2){background:#FEBC2E}.qs-term-bar i:nth-child(3){background:#28C840}
.qs-term-bar span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: #7a8090; }
.qs-term-body { margin: 0; padding: 16px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #cdd6e0; white-space: pre-wrap; min-height: 330px; overflow-x: auto; }  /* 330px = финальная высота допечатанного кода+ответа: терминал не растёт во время печати */
.qs-caret { display: inline-block; width: 7px; height: 14px; background: #A99BFF; vertical-align: text-bottom; margin-left: 1px; animation: qsblink 1.1s steps(1) infinite; }
@keyframes qsblink { 50% { opacity: 0; } }
.qs-resp { color: #58D98A; }
.qs-cta { margin-top: 20px; }
@media (max-width: 760px) { .qs-term-body { min-height: 330px; } .qs-step-final { margin-top: 8px; } }
.steps { margin: 20px 0 18px 0; padding-left: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 48px; margin-bottom: 18px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--key); color: #fff; font-family: var(--mono); font-weight: 600; display: grid; place-items: center; font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { position: relative; overflow: hidden; padding: 96px 0; text-align: center;
  /* фон FAQ: мягкий фиолетово-сиреневый акцент */
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(150,112,230,.12), transparent 60%),
    linear-gradient(180deg, #0D0B17 0%, #0A0C13 55%); }
.faq > .wrap { position: relative; z-index: 1; }
.faq::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(180,130,255,.5) 26%, rgba(139,123,255,.5) 74%, transparent); }
.faq::after { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 72%; max-width: 720px; height: 200px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(160,120,235,.18), transparent 70%); }
.faq h2 { font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; color: #fff; margin-bottom: 32px; }
.faq-list { max-width: 820px; margin: 0 auto; border-top: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); padding: 0 22px; transition: border-color .2s, background .2s; }
.faq details[open] { border-color: rgba(150,123,255,.38); background: rgba(139,123,255,.05); }
.faq summary { position: relative; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 16px; padding: 18px 40px 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--key-dark); }
.fa-body { padding: 0 0 20px; color: var(--ink-soft); font-size: 14.5px; max-width: 74ch; line-height: 1.6; }

/* ---------- заявка ----------
   селекторы заскоуплены как section.lead: на подстраницах есть <p class="lead">
   (лид-абзац page-hero) — без скоупа он наследовал 100vh+градиент секции */
/* Посадка якорей: у html стоит scroll-padding-top:72px, и это ровно та схема, которую просил
   Босс (2026-08-02) — шапка, под ней линия секции, отступ, заголовок. Ничего не подъедается.
   Прежнее правило scroll-margin-top:-72px сажало полноэкранные секции вплотную к верху окна
   (линия уходила под шапку) — снято. */

section.lead { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 0 48px;
  /* финальный CTA — насыщенный брендовый фиолетовый фон */
  background:
    radial-gradient(1100px 560px at 50% 0%, rgba(109,91,246,.17), transparent 60%),
    radial-gradient(760px 640px at 100% 100%, rgba(139,123,255,.1), transparent 60%),
    linear-gradient(180deg, #100C1E 0%, #0A0C13 60%); }
section.lead > .wrap { position: relative; z-index: 1; }
section.lead::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(169,155,255,.55) 26%, rgba(139,123,255,.55) 74%, transparent); }
section.lead::after { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 76%; max-width: 760px; height: 220px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(120,100,240,.22), transparent 70%); }
section.lead h2 { font-size: var(--h2-main); line-height: 1.1; letter-spacing: -0.015em; color: #fff; margin-bottom: 12px; }
.lead-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }
/* левая колонка */
.lead-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #A99BFF; margin-bottom: 14px; }
.lead-sub { color: rgba(242,244,250,.68); max-width: 44ch; font-size: 15.5px; line-height: 1.65; margin-bottom: 22px; }
.lead-steps-h { font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 12px; }
.lead-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lead-step { display: flex; gap: 14px; align-items: flex-start; }
.lead-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; background: rgba(139,123,255,.18); border: 1px solid rgba(139,123,255,.5); }
.lead-step-b h3 { font-size: 15px; font-weight: 800; color: #fff; margin: 2px 0 4px; }
.lead-step-b p { font-size: 13.5px; color: rgba(242,244,250,.55); line-height: 1.5; max-width: 42ch; }
.lead-note { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 13px 16px; margin-bottom: 14px; }
.lead-note-ic { flex: none; color: #A99BFF; } .lead-note-ic svg { width: 22px; height: 22px; display: block; }
.lead-note span { font-size: 13.5px; color: rgba(242,244,250,.66); line-height: 1.55; }
.lead-assure { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(242,244,250,.66); }
.lead-assure-ic { display: inline-flex; color: #3DDC97; } .lead-assure-ic svg { width: 17px; height: 17px; }
/* правая колонка — форма-карточка */
.lead-form { background: rgba(18,21,33,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 22px 22px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.5); backdrop-filter: blur(10px); }
.lf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lf-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 3px; }
/* правая часть шапки формы: часы, под ними «* Все поля обязательны» (указание Босса 2026-08-02) */
.lf-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lf-subtitle { font-size: 13px; color: rgba(242,244,250,.5); text-align: right; }
.lf-eta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(242,244,250,.55); white-space: nowrap; }
.lf-eta-ic { display: inline-flex; color: #A99BFF; } .lf-eta-ic svg { width: 15px; height: 15px; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-lbl { font-weight: 700; font-size: 13.5px; color: rgba(242,244,250,.85); }
.req { color: #FF6B66; font-weight: 700; }
.lead-form input, .lead-form textarea { font-family: var(--body); font-size: 15px; padding: 12px 14px; border: 1.5px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(10,12,19,.6); color: #fff; transition: border-color .18s, box-shadow .18s; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(242,244,250,.55); }
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--key); box-shadow: 0 0 0 3px rgba(109,91,246,.18); }
.lf-hint { font-size: 12px; color: rgba(242,244,250,.6); }
/* Телефон: серый пример номера сразу после «+7 » (просьба Босса 2026-08-04).
   Обычный placeholder тут не работает — в поле уже лежит значение «+7 ».
   Приём: подсказка кладётся поверх поля и начинается с НЕВИДИМОГО «+7 » —
   браузер сам отмеряет его тем же шрифтом, и пример встаёт точно за префиксом. */
.lf-phone { position: relative; display: block; }
.lf-phone input { width: 100%; }
.lf-ghost { position: absolute; left: 15.5px; top: 50%; transform: translateY(-50%);  /* 14px padding + 1.5px рамка */
  font-family: var(--body); font-size: 15px; color: rgba(242,244,250,.34); white-space: nowrap;
  pointer-events: none; user-select: none; transition: opacity .15s ease; }
.lf-ghost i { visibility: hidden; font-style: normal; }
.lf-phone:focus-within .lf-ghost, .lf-phone.is-filled .lf-ghost { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lf-ghost { transition: none; } }
.lf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.lf-chip { font-family: var(--body); font-weight: 600; font-size: 13px; color: rgba(242,244,250,.72); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.lf-chip:hover { border-color: rgba(139,123,255,.5); color: #fff; }
.lf-chip.active { background: var(--key); border-color: transparent; color: #fff; }  /* единый active-токен вида CHIP (как .tab.act) */
.lead-form textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
/* название поля и счётчик — одной строкой; счётчик вне data-edit, иначе санитайзер CMS его срежет */
.lf-lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lf-counter { font-family: var(--mono); font-size: 12px; color: rgba(242,244,250,.6); flex: none; }
/* вид LIGHT, модификатор BLOCK: r:12 под поля формы, белая тень (чёрная на тёмном невидима) */
.lf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-family: var(--body); font-weight: 700; font-size: 16px; color: #12131A; background: #fff; border: 0; border-radius: 12px; padding: 15px 24px; cursor: pointer; box-shadow: 0 8px 26px rgba(255,255,255,.16); }
.lf-submit:hover { background: #E8E4FF; }

/* Секция заявки должна помещаться в один экран (указание Босса 2026-08-01).
   База уже поджата и влезает при высоте окна от ~900px. Ниже — второй ярус для
   ноутбучных 800px: подрезаем только отступы и высоту textarea, размеры шрифтов
   и полей не трогаем. Скоуп min-width:761px — чтобы не конфликтовать с мобильным
   слоем, который снимает min-height:100vh вовсе. */
@media (min-width: 761px) and (max-height: 880px) {
  section.lead { padding: 24px 0 16px; }
  .lead-form { padding: 16px 16px 16px; gap: 8px; }
  .lead-form textarea { min-height: 62px; }
  .lead-sub { margin-bottom: 16px; }
  .lead-steps { gap: 11px; margin-bottom: 16px; }
  .lead-note { padding: 11px 14px; margin-bottom: 11px; }
}
.lf-submit:disabled { opacity: .6; cursor: default; transform: none; }
/* Согласие на обработку ПДн — по 152-ФЗ это активное действие: галочка, изначально СНЯТАЯ,
   обязательная. Прежняя формулировка «нажимая кнопку…» такого действия не даёт. */
.lf-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: rgba(242,244,250,.6); text-align: left; line-height: 1.5; cursor: pointer; }
.lf-consent input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--key); cursor: pointer; }
.lf-consent a { color: #A99BFF; }
@media (max-width: 620px) { .lf-row { grid-template-columns: 1fr; } .lf-head { flex-direction: column; gap: 6px; } .lead-form { padding: 22px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: 14px; min-height: 1.4em; }
.form-status.ok { color: #0E7A4F; }
.form-status.err { color: #B4231F; }

/* ---------- футер ---------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 0; color: var(--ink-soft); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 30px; }
.foot-logo { color: var(--ink); font-size: 19px; }
.foot-logo span { color: var(--key-dark); }
.foot-brand p { margin-top: 10px; max-width: 34ch; line-height: 1.55; }
.foot-col { display: grid; gap: 8px; align-content: start; justify-items: start; }
.foot-col .foot-h { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.foot-col a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.foot-col a:hover { color: var(--key-dark); }
.foot-col code { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 12.5px; }
.foot-note { font-size: 13px; line-height: 1.5; }
/* Чат поддержки в подвале: знак Telegram + подпись (указание Босса 2026-08-02) */
.foot-tg { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 700; }  /* в колонке «Разделы»: тот же вес, что у соседних ссылок */
.site-foot a.foot-tg { color: rgba(242,244,250,.8); text-decoration: none; }
.site-foot a.foot-tg:hover { color: #fff; }
.foot-tg svg { flex: none; color: #29A9EB; }
.foot-bottom { border-top: 1px solid var(--line); padding: 16px 24px 18px; font-size: 13px; margin: 0 auto; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- страница «Модели»: тёмный каталог-таблица ---------- */
.page-dark { background: #0A0C13; color: #F2F4FA; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: 60px; }
.page-dark .crumbs { color: rgba(242,244,250,.5); padding-top: 20px; }
.page-dark .crumbs a { color: rgba(242,244,250,.5); }
.page-dark .crumbs span { color: rgba(242,244,250,.85); }
.cat-h1 { font-size: clamp(28px, 4vw, 40px); color: #fff; margin: 10px 0 8px; }
.cat-lead { color: rgba(242,244,250,.66); font-size: 16px; max-width: 64ch; margin-bottom: 22px; line-height: 1.6; }
.cat-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.btn-ghost-dark { background: rgba(255,255,255,.06); color: #fff; border: 1.5px solid rgba(255,255,255,.25); }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,.5); }
.page-dark .top { padding-bottom: 6px; }
.logo-link { text-decoration: none; }
.pill-nav a[aria-current="page"] { color: #fff; }
.catalog { flex: 1; width: 100%; padding-top: 26px; padding-bottom: 60px; }
.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cat-tabs { display: flex; gap: 8px; background: rgba(16,19,28,.66); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px; }
.tab { font-family: var(--body); font-weight: 700; font-size: 14.5px; color: rgba(242,244,250,.65); background: none; border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.tab.act { background: var(--key); color: #fff; }
.tab:disabled { cursor: default; opacity: .45; }
.cat-tabs a.tab { display: inline-block; text-decoration: none; transition: background .2s, color .2s; }
.cat-sec { scroll-margin-top: 84px; margin-bottom: 30px; }
.cat-cta { flex: none; }
/* поиск по моделям (страница «Все модели») */
.cat-search { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.cat-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(242,244,250,.45); pointer-events: none; }
.cat-search input { width: 100%; font-family: var(--body); font-size: 14.5px; color: #fff; background: rgba(16,19,28,.66); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 9px 16px 9px 38px; transition: border-color .18s, box-shadow .18s; }
.cat-search input::placeholder { color: rgba(242,244,250,.45); }
.cat-search input:focus { outline: none; border-color: rgba(139,123,255,.5); box-shadow: 0 0 0 3px rgba(109,91,246,.15); }
.cat-empty { text-align: center; color: rgba(242,244,250,.6); padding: 30px 0 8px; font-size: 15px; }
.cat-empty a { color: #A99BFF; }

.cat-card { background: rgba(16,19,28,.8); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 6px 6px 10px; box-shadow: 0 22px 54px rgba(0,0,0,.45); }
.cat-note { text-align: center; font-size: 13.5px; font-style: italic; color: rgba(242,244,250,.6); padding: 14px 18px 10px; }
.table-scroll { overflow-x: auto; }
.cat-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.cat-table--gen { min-width: 720px; }  /* 5 колонок вместо 8 — не растягиваем до скролла раньше времени */
.cat-table th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,244,250,.5); text-align: left; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cat-table td { padding: 16px 12px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14.5px; vertical-align: middle; }
.cat-table tbody tr:last-child td { border-bottom: 0; }
.cat-table tbody tr { transition: background .2s; }
.cat-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* флекс — на внутренней обёртке, td остаётся табличной ячейкой (семантика для скринридеров) */
.c-model-in { display: flex; align-items: center; gap: 12px; }
.c-model b { font-weight: 700; color: #fff; }
.mono-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-style: normal; color: #fff; background: #1D222E; border: 1px solid rgba(255,255,255,.14); }
.mono-ic svg { display: block; }

/* ЗНАКИ В КАТАЛОГАХ И СПИСКАХ — это знаки МОДЕЛЕЙ, а не провайдеров
   (Claude, Gemini, Grok, Nano Banana, DALL·E имеют собственные марки в lobe-icons).
   Большинство приходит цветными и подачи не требует. Монохромна только марка OpenAI —
   ей задаём фирменный зелёный; Grok тоже монохромен и берёт цвет контекста
   (белый на тёмных таблицах, тёмный на светлых страницах провайдеров).
   Плашка везде нейтральная: цветной знак на залитой подложке мутнеет. */
.mono-ic[data-icon="openai"],
.m-ic[data-icon="openai"] { color: #10A37F; }
/* «Широкая линейка» на главной — витрина, там знаки МОНОХРОМНЫЕ (указание Босса 2026-08-02):
   зелёная подача OpenAI сюда не распространяется, все марки идут белым по currentColor. */

/* Шапка страницы провайдера (.m-vend) — там знак ПРОВАЙДЕРА, подача как на плитках главной */
.m-vend[data-vendor="openai"] { color: #10A37F; }
.m-vend[data-vendor="anthropic"] { color: #D97757; }
.c-id code { font-size: 12.5px; color: rgba(242,244,250,.72); background: none; white-space: nowrap; }  /* id не рвём посреди слова — иначе claude-haiku-4-5-20251001 в 4 строки */
.c-id .c-note { font-family: var(--mono); }  /* второй id (Fast-режим) — тем же моноширинным */
.c-price .chip { display: inline-block; font-size: 12.5px; font-weight: 700; color: #CFE0F4; background: rgba(127,180,255,.12); border: 1px solid rgba(127,180,255,.25); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.c-num { font-weight: 700; color: rgba(242,244,250,.85); white-space: nowrap; }
/* каталог: карточек больше нет, изображения и видео — такие же таблицы (указание Босса 2026-08-02) */
.c-desc { color: rgba(242,244,250,.72); font-size: 13.5px; line-height: 1.5; min-width: 190px; }
/* «Провайдер:» отдельной строкой, чтобы название модели не разрывалось (указание Босса 2026-08-02) */
/* название модели в таблице — ссылка на её страницу, если такая есть (указание Босса 2026-08-02:
   ссылки на models/*.html убраны из подвала, выход на них теперь из таблицы) */
.c-mlink { color: inherit; text-decoration: none; }
.c-mlink:hover { color: #A79BFF; text-decoration: underline; text-underline-offset: 3px; }
.c-mvend { display: block; font-weight: 600; font-size: 11.5px; letter-spacing: .04em; color: rgba(242,244,250,.55); margin-bottom: 2px; }
.c-model-in b { min-width: 132px; }
.c-note { display: block; font-size: 11.5px; color: rgba(242,244,250,.5); margin-top: 3px; white-space: nowrap; }
/* приписка ПОД ЦЕНОЙ переносится: с nowrap она распирала «Цена Input» до 204px против 73px
   у «Цена Output» и сжимала столбец ID до 100px (id ломался на 4 строки) */
.c-price .c-note { white-space: normal; }
.c-flag { font-size: 15px; }
.c-flag.yes { color: #58D98A; }
.c-flag.no { color: #E0655F; }
.c-go a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; background: var(--key); color: #fff; text-decoration: none; font-family: var(--body); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .18s ease; }  /* текст «Подключить» вместо стрелки (микро-flat вид системы) */
.c-go a:hover { background: var(--key-dark); }

.foot-dark { border-top: 1px solid rgba(255,255,255,.1); color: rgba(242,244,250,.55); }
.foot-dark .foot-brand p { color: rgba(242,244,250,.55); }
.foot-dark .foot-col .foot-h { color: rgba(242,244,250,.5); }
.foot-dark .foot-col a { color: rgba(242,244,250,.85); }
.foot-dark .foot-col a:hover { color: #A79BFF; }
.foot-dark .foot-col code { background: rgba(16,19,28,.8); border-color: rgba(255,255,255,.14); color: #CFE0F4; }
.foot-dark .foot-bottom { border-top-color: rgba(255,255,255,.1); }

@media (max-width: 700px) {
  .cat-bar { flex-direction: column; align-items: stretch; }
  .cat-cta { text-align: center; }
  .cat-search { max-width: none; }
}

/* ======================================================================
   ЕДИНАЯ НАВИГАЦИЯ (site.js) — фиксированная тёмная шапка на всех страницах
   ====================================================================== */
.site-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(10,12,19,.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; }
.site-top.scrolled { background: rgba(10,12,19,.92); border-bottom-color: rgba(255,255,255,.1); }
.site-nav { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 24px; height: 60px; }
.site-logo { font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; margin-right: 12px; }
.site-logo span { color: #A79BFF; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: rgba(242,244,250,.78); font-weight: 700; font-size: 14.5px; padding: 9px 13px; border-radius: 9px; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.act > .nav-link { color: #fff; }
.nav-caret { width: 15px; height: 15px; opacity: .6; transition: transform .2s; }
.nav-drop { position: absolute; top: calc(100% + 4px); left: 0; min-width: 210px; background: #12151F; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.has-menu:hover .nav-drop, .has-menu:focus-within .nav-drop { opacity: 1; visibility: visible; transform: none; }
.has-menu:hover .nav-caret, .has-menu:focus-within .nav-caret { transform: rotate(180deg); }
/* невидимый мост над дропдауном — закрывает 4px-щель между пунктом и панелью (мышь не «роняет» меню) */
.nav-drop::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-drop a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: rgba(242,244,250,.82); font-weight: 600; font-size: 14px; }
.nav-drop a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-cta { margin-left: auto; flex: none; }
.nav-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.nav-actions .nav-cta { margin-left: 0; }
.nav-login { flex: none; background: var(--btn-grad); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 10px 20px; box-shadow: var(--btn-shadow); }  /* вид PRIMARY, размер M */
.nav-login:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
.nav-cta-mob { display: none; }
.nav-burger { display: none; margin-left: auto; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; justify-content: center; align-items: center; }
.nav-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
.site-top.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-top.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.site-top.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* backdrop-filter/transform на предке ломают position:fixed у панели → на мобиле убираем фильтр;
     без blur полупрозрачность даёт «грязь» — шапка непрозрачная в обоих состояниях */
  .site-top, .site-top.scrolled { backdrop-filter: none; background: #0A0C13; }
  .nav-burger { display: flex; margin-left: 0; order: 3; }
  .nav-cta { display: none; }
  /* в баре остаётся компактный «Войти», лид-CTA — первым в меню */
  .nav-actions { display: flex; order: 2; margin-left: auto; margin-right: 2px; }
  .nav-actions .nav-cta { display: none; }
  .nav-login { font-size: 13.5px; padding: 8px 15px; box-shadow: none; }
  .nav-list { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #0A0C13; padding: 10px 20px 28px; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; }
  .site-top.nav-open .nav-list { transform: none; }
  .nav-item { border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-link { display: flex; width: 100%; font-size: 16px; padding: 15px 4px; justify-content: space-between; border-radius: 0; }
  .nav-link:hover { background: none; }
  .nav-item.act > .nav-link { color: #A79BFF; }
  .nav-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 10px 16px; display: none; }
  .nav-drop a { color: rgba(242,244,250,.62); font-size: 14.5px; padding: 10px 8px; }
  .nav-item.open .nav-drop { display: block; }
  .nav-item.open .nav-caret { transform: rotate(180deg); }
  .nav-cta-mob { display: block; margin-top: 14px; border-bottom: 0; }
  .nav-cta-mob + .nav-cta-mob { margin-top: 10px; }
  .nav-cta-mob .btn { display: block; width: 100%; text-align: center; box-shadow: none; }
}

/* ---------- единый футер (site.js) ---------- */
.site-foot { background: #0A0F1C; color: rgba(242,244,250,.6); padding: 54px 0 0; margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); }
.site-foot .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.site-foot .foot-logo { color: #fff; }
.site-foot .foot-brand p { color: rgba(242,244,250,.6); max-width: 30ch; }
.foot-ep { display: inline-block; margin-top: 12px; background: rgba(16,19,28,.9); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 4px 10px; font-family: var(--mono); font-size: 12.5px; color: #CFE0F4; }
.site-foot .foot-h { color: rgba(242,244,250,.5); }
.site-foot .foot-col a { color: rgba(242,244,250,.82); }
.site-foot .foot-col a:hover { color: #A79BFF; }
.site-foot .foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); max-width: 1200px; }
.foot-legal a { color: rgba(242,244,250,.6); }
@media (max-width: 860px) { .site-foot .foot-grid { grid-template-columns: 1fr 1fr; } }
/* на телефоне колонки ссылок остаются в 2 столбца (футер вдвое короче), бренд — на всю ширину */
@media (max-width: 540px) {
  .site-foot { padding-top: 40px; }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .site-foot .foot-brand { grid-column: 1 / -1; }
  .site-foot .foot-col { gap: 2px; }
  .site-foot .foot-col a { padding: 6px 0; }
}

/* ======================================================================
   КОНТЕНТНЫЕ СТРАНИЦЫ (docs / pricing / solutions / integrations / модели …)
   ====================================================================== */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: 60px; }
.page main { flex: 1; }
.crumbs { font-size: 13px; color: var(--ink-soft); padding: 18px 0 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; display: inline-block; padding: 8px 2px; margin: -8px -2px; }
.crumbs a:hover { color: var(--key-dark); }
.crumbs span { color: var(--ink); }

/* компактный hero вложенной страницы — тёмная полоса */
.page-hero { background: #0A0C13; color: #F2F4FA; padding: 40px 0 48px; position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #A79BFF; margin-bottom: 12px; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 48px); color: #fff; max-width: 20ch; }
.page-hero .lead { font-size: clamp(16px, 1.9vw, 19px); color: rgba(242,244,250,.72); max-width: 60ch; margin-top: 14px; line-height: 1.6; }
.page-hero .hero-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero .crumbs { color: rgba(242,244,250,.5); padding-top: 0; margin-bottom: 16px; }
.page-hero .crumbs a { color: rgba(242,244,250,.5); }
.page-hero .crumbs span { color: rgba(242,244,250,.85); }

/* лента якорных чипов в hero документации (мобильная навигация по длинной странице) */
.docs-toc { display: flex; gap: 8px; overflow-x: auto; margin-top: 22px; padding-bottom: 4px; scrollbar-width: none; }
.docs-toc::-webkit-scrollbar { display: none; }
.docs-toc a { flex: none; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: rgba(242,244,250,.75); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: border-color .2s, color .2s; }
.docs-toc a:hover { border-color: rgba(139,123,255,.5); color: #fff; }

/* сворачиваемые код-примеры (docs): вторичные языки убраны под details */
.code-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--key-dark); padding: 10px 0; }
.code-fold > summary::-webkit-details-marker { display: none; }
.code-fold > summary::before { content: '▸'; font-size: 12px; transition: transform .2s; }
.code-fold[open] > summary::before { transform: rotate(90deg); }
.code-fold > .code-block { margin-top: 6px; }

/* секции контента */
.sec { padding: 56px 0; }
.sec-tight { padding: 36px 0; }
.sec.alt { background: #FFFFFF; }  /* заметная зебра: фон страницы — var(--bg) #F6F8FB */
.sec h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 10px; }
.sec .sec-sub { color: var(--ink-soft); font-size: 16px; max-width: 62ch; margin-bottom: 28px; line-height: 1.6; }
.prose { max-width: 68ch; }
.prose p { margin-bottom: 14px; color: var(--ink); line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 16px 20px; }
.prose li { margin-bottom: 7px; line-height: 1.6; }
.prose h3 { font-size: 20px; margin: 26px 0 10px; }
.prose code { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: .88em; }

/* сетка карточек-фич */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.feat-card .fi { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(109,91,246,.1); border: 1px solid rgba(109,91,246,.28); color: var(--key-dark); margin-bottom: 14px; }
.feat-card .fi svg { width: 21px; height: 21px; }
.feat-card h3 { font-size: 17px; margin-bottom: 8px; }
.feat-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feat-grid, .feat-grid.cols-2 { grid-template-columns: 1fr; } }

/* callout / примечание */
.callout { background: rgba(109,91,246,.06); border: 1px solid rgba(109,91,246,.22); border-left: 3px solid var(--key); border-radius: 12px; padding: 16px 20px; font-size: 14.5px; color: var(--ink); line-height: 1.6; }
.callout.warn { background: rgba(217,119,87,.07); border-color: rgba(217,119,87,.3); border-left-color: #D97757; }
.callout b { color: var(--ink); }
.ph { display: inline; white-space: normal; background: #FFF3E0; border: 1px dashed #E0A155; border-radius: 5px; padding: 0 6px; font-size: .9em; color: #9A5B12; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* код-блок на контентных страницах */
.code-block { background: #171B26; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(19,23,34,.18); }
.code-block .cb-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size: 12px; color: #8B93A7; }
.code-block pre { padding: 14px 16px; overflow-x: auto; margin: 0; }
.code-block code { color: #E6EAF2; font-size: 13px; line-height: 1.6; font-family: var(--mono); }
/* внутри .prose чип-стиль строчного кода не должен протекать в код-блоки */
.prose .code-block code { background: none; border: 0; padding: 0; font-size: 13px; border-radius: 0; }

/* превью-секции на главной: ссылки-карточки, чипы интеграций */
.section-more { margin-top: 22px; }
.section-more a { font-weight: 700; text-decoration: none; }
.section-more a:hover { text-decoration: underline; }
.link-card { text-decoration: none; color: inherit; display: block; transition: border-color .2s, transform .2s, box-shadow .2s; }
.link-card:hover { border-color: var(--key); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(19,23,34,.1); }
.link-card h3 { color: var(--ink); }
.link-card h3::after { content: '→'; margin-left: 7px; color: var(--key-dark); }
.int-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.int-chip { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-family: var(--mono); font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s; }
.int-chip:hover { border-color: var(--key); background: rgba(109,91,246,.04); }
.int-more { color: var(--key-dark); border-style: dashed; }
.int-note { font-size: 13.5px; color: var(--ink-soft); max-width: 70ch; line-height: 1.6; }
.int-note a { color: var(--key-dark); }

/* страница модели: id-чип + иконка вендора */
.model-idchip { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; background: rgba(16,19,28,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 16px 7px 14px; }
.model-idchip span { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,244,250,.5); }
.model-idchip code { font-family: var(--mono); font-size: 14px; color: #CFE0F4; }
.m-vend { display: inline-grid; place-items: center; vertical-align: middle; }
.m-vend svg { width: 15px; height: 15px; }
.eyebrow .m-vend svg { color: #A79BFF; }

/* таблицы документации */
.doc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.doc-table th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 11px 14px; border-bottom: 2px solid var(--line); }
.doc-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.doc-table td code { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 12.5px; }
.doc-table tbody tr:hover, .doc-table tbody tr:hover { background: rgba(109,91,246,.03); }
.tc-y { color: #0E7A4F; font-weight: 700; }
.tc-n { color: #B4231F; font-weight: 700; }
.doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .doc-cols { grid-template-columns: 1fr; } }

/* CTA-полоса */
.cta-band { background: #0A0C13; color: #fff; padding: 52px 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(242,244,250,.7); max-width: 52ch; margin: 8px auto 22px; }

/* ---------- адаптив ---------- */
@media (max-width: 860px) {
  .connect-grid, .lead-grid { grid-template-columns: 1fr; }
  .qs-right { padding-top: 0; }  /* колонки встали друг под друга — выравнивать по заголовку нечего */
  .pill-nav { gap: 16px; }
  .pill-nav .nav-link { display: none; }
  .blob { filter: blur(60px); }
}

/* ============ Тёмная нижняя полоса (models → lead): продолжает первый экран ============ */
.dark-flow {
  /* тёмная палитра — переопределяет переменные для всех вложенных секций и формы */
  --bg: #0E1220;
  --card: #161B2A;
  --line: rgba(255,255,255,.09);
  --ink: #EEF1F8;
  --ink-soft: #9AA3B8;
  --key-dark: #A99BFF;
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(109,91,246,.12), transparent 60%),
    radial-gradient(900px 480px at 108% 22%, rgba(70,110,255,.07), transparent 55%),
    #0A0C13;
}
/* текстура-сетка на фоне, гаснет к верху и низу полосы */
.dark-flow::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
/* мягкий разделитель-переход сверху — граница с блоком преимуществ */
.dark-flow::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(109,91,246,.10), transparent);
  border-top: 1px solid rgba(255,255,255,.07);
}
/* чередование под-секций — мягкое «разделение экранов» */
.dark-flow .sec.alt { background: #0C0F1A; }
/* статусы формы ярче на тёмном */
.dark-flow .form-status.ok { color: #3DDC97; }
.dark-flow .form-status.err { color: #FF6B66; }

/* ======================================================================
   МОБИЛЬНЫЙ СЛОЙ — сводная адаптация ≤700/≤640px (2026-07-30)
   ====================================================================== */
/* страница «Модели»: табы одной строкой со скроллом, таблица без второстепенных колонок */
@media (max-width: 700px) {
  /* табы — отдельные пилюли без общего контейнера: обрезанный третий таб торчит
     из-за края и сам подсказывает, что ряд скроллится */
  .cat-tabs { overflow-x: auto; scrollbar-width: none; background: none; border: 0; padding: 0 0 4px; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs .tab { flex: none; white-space: nowrap; background: rgba(16,19,28,.66); border: 1px solid rgba(255,255,255,.12); }
  .cat-tabs .tab.act { background: var(--key); border-color: transparent; }
  .cat-table { min-width: 0; }
  /* LLM (8 колонок) на телефоне: Модель · Вход · Выход · → (ID по буквам в столбик бесполезен — он есть на страницах моделей и в pricing) */
  .cat-table--llm th:nth-child(8) { font-size: 0; }
  .cat-table--llm th:nth-child(2), .cat-table--llm td:nth-child(2),
  .cat-table--llm th:nth-child(5), .cat-table--llm td:nth-child(5),
  .cat-table--llm th:nth-child(6), .cat-table--llm td:nth-child(6),
  .cat-table--llm th:nth-child(7), .cat-table--llm td:nth-child(7) { display: none; }
  /* Изображения/видео (5 колонок): Модель · флаг · Цена · → — прячем только ID (длинный код в столбик нечитаем) */
  .cat-table--gen th:nth-child(5) { font-size: 0; }
  .cat-table--gen th:nth-child(2), .cat-table--gen td:nth-child(2) { display: none; }
  .cat-table th { padding: 10px 6px; font-size: 10px; }
  .cat-table td { padding: 12px 6px; font-size: 13px; }
  .c-model-in { gap: 8px; }
  .mono-ic { width: 30px; height: 30px; }
  .c-go a { padding: 10px 12px; font-size: 12px; }  /* тап-таргет ≥40px по высоте */
  /* Влезаем в 360px без горизонтального скролла, но название модели держим в 1-2 строки.
     Идёт ПОСЛЕ общих .cat-table th/td и .c-go a — иначе те перебьют padding.
     Замер на 390px: без этого блока #llm вылезает на 170px, #images на 14px. */
  .cat-table th, .cat-table td { padding-left: 3px; padding-right: 3px; }
  .cat-table th { font-size: 9px; }
  .cat-table .c-note { display: none; }            /* мелкие приписки под ценой — на телефоне только шум */
  .cat-table .c-go a { padding: 10px 9px; }
  .cat-table--llm .c-model-in b { min-width: 92px; }   /* резерв под имя: 132 → 92 */
  .cat-table--gen .c-model-in b { min-width: 78px; }   /* у 5-колоночных места меньше — 78 */
  .cat-table--gen .c-price em { display: block; font-size: 11px; }  /* единицу измерения — на свою строку */
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }

  /* вертикальный ритм: секции не растягиваем на 100vh, паддинги плотнее */
  .sec { padding: 40px 0; }
  .sec.why2, .sec.biz-infra, .connect, section.lead { min-height: 0; padding: 56px 0; }
  .faq { padding: 60px 0; }
  .catalog2 { padding: 54px 0 48px; }
  .models { padding: 54px 0 20px; }
  .page-hero { padding: 30px 0 40px; }

  /* юридические страницы: плотный документ вместо разреженных секций */
  body[data-page="privacy"] .sec, body[data-page="terms"] .sec { padding: 20px 0; }

  /* hero главной: CTA должна попадать в первый экран */
  .hero-center { padding-top: 10px; }
  h1 { font-size: 32px; }
  .hero-sub { font-size: 15.5px; margin-bottom: 16px; }

  /* типографика больших секционных заголовков */
  .prov-h, .cat2-h, .why2 .why2-h, .biz-infra .biz-h, .connect h2, .faq h2, section.lead h2 { font-size: 29px; }
  .biz-h .key-word { white-space: nowrap; }

  /* CTA-группы: аккуратные полноширинные стопки */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .cat-actions { flex-direction: column; }
  .cat-actions .btn { width: 100%; text-align: center; }
  .cat2-btn { display: flex; justify-content: center; width: 100%; }
  a.qs-cta { display: block; width: 100%; text-align: center; }

  /* каталог на главной: карточки плотнее, мёртвый низ убран */
  .cat2-card { padding: 16px 16px 14px; }
  .cat2-for { margin: 0; }
  .cat2-subhead { margin-top: 28px; }

  /* бизнес/why-карточки: компактная строка вместо высокой эмодзи-панели */
  .biz-card { flex-direction: row; align-items: stretch; }
  .biz-visual { width: 72px; height: auto; border-right: 1px solid var(--line); }
  .biz-visual::before { width: 50px; height: 50px; }
  .biz-ico { width: 29px; height: 29px; }
  .biz-body { padding: 15px 16px 15px 14px; }
  .biz-body h3 { font-size: 16px; }
  .biz-lead { font-size: 15px; margin-bottom: 24px; }

  /* быстрый старт */
  .qs-term-body { min-height: 0; font-size: 12px; }
  .qs-steps { gap: 18px; }

  /* цены на главной */

  /* код-блоки */
  .code-block code { font-size: 12.5px; }

  /* таблицы документации: ужимаемся без горизонтального скролла */
  .doc-table { min-width: 0; }
  .doc-table th { font-size: 10.5px; padding: 9px 8px; letter-spacing: .03em; }
  .doc-table td { padding: 10px 8px; font-size: 13.5px; }
  /* длинные code-токены без дефисов (choices[].message.content) не должны распирать колонку;
     дефисные id по-прежнему переносятся по дефисам — anywhere срабатывает только как последний резерв */
  .doc-table td code { -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: anywhere; }
  .doc-table td:first-child code { overflow-wrap: normal; white-space: nowrap; }  /* короткие коды (200/401) не рвать */

  /* тонкий видимый скроллбар как аффорданс горизонтального скролла кода/таблиц */
  .code-block pre, .table-scroll { scrollbar-width: thin; scrollbar-color: rgba(139,123,255,.4) transparent; }
  .code-block pre::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height: 4px; }
  .code-block pre::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb { background: rgba(139,123,255,.4); border-radius: 2px; }

  /* блог/глоссарий: компактные карточки */
  body[data-page="blog"] .feat-card { padding: 16px 18px; }
  body[data-page="blog"] .feat-grid { gap: 10px; }

  /* заявка */
  .lead-grid { gap: 30px; }
}