/* ==========================================================================
   Кобза — витрина.

   Замысел: продукт — конструктор страниц, поэтому основа макета сама
   построена на модульной сетке. Сетка видна в первом экране бледными
   линиями, на неё «встают» блоки в живой демонстрации, по ней же
   выровнены секции. Приём один, работает на смысл, а не украшает.

   Тёмная полоса шапки и подвала зажимает светлую страницу между двумя
   плотными краями — так лист выглядит листом, а не бесконечной лентой.

   Шрифты только системные: сайт продаёт независимость от чужой
   инфраструктуры, подключать сторонний CDN было бы странно.
   ========================================================================== */

:root {
  --ink:        #0C1220;
  --ink-2:      #161E31;
  --ink-3:      #263049;
  --body:       #39445A;
  --muted:      #6E7A91;
  --line:       #E4E8F0;
  --line-soft:  #EFF2F7;
  --bg:         #F6F7FB;
  --card:       #FFFFFF;
  --accent:     #4B3BF0;
  --accent-2:   #8B7BFF;
  --accent-ink: #2E22A8;
  --accent-soft:#EEEBFE;
  --ok:         #2E7D4F;
  --danger:     #C2453C;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PT Sans", "Liberation Sans", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --wrap: 1180px;
  --r: 8px;
  --r-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body.ks {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ks-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.ks-wrap--narrow { max-width: 720px; }
.ks-wrap--mid { max-width: 880px; }
.ks-center { text-align: center; }

.ks-skip { position: absolute; left: -9999px; }
.ks-skip:focus { left: 0; top: 0; background: var(--accent); color: #fff; padding: 12px 20px; z-index: 100; }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.ks-head { position: sticky; top: 0; z-index: 50; background: var(--ink); }
.ks-head__in { display: flex; align-items: center; gap: 30px; height: 84px; }

.ks-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.ks-brand__n { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
/* Латинская Z в названии — фирменная деталь, подсвечиваем акцентом. */
.ks-brand__n i { font-style: normal; color: var(--accent-2); }
.ks-foot__brand i { font-style: normal; color: var(--accent-2); }

.ks-nav { display: flex; gap: 26px; margin-right: auto; }
.ks-nav a { color: #99A3B8; text-decoration: none; font-size: 15px; }
.ks-nav a:hover { color: #fff; }
.ks-nav a[aria-current] { color: #fff; }

/* Скачивание — главное действие сайта, поэтому живёт в шапке всегда. */
.ks-get {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: var(--r); font-weight: 650; font-size: 15px;
  box-shadow: 0 4px 14px rgba(75, 59, 240, .38);
}
.ks-get:hover { background: #5A4BFF; color: #fff; }
.ks-get__v { font-size: 12px; font-weight: 600; opacity: .72; font-variant-numeric: tabular-nums; }

.ks-acc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--ink-3); border-radius: 50%; color: #99A3B8; text-decoration: none;
}
.ks-acc:hover { border-color: var(--accent-2); color: #fff; }

.ks-burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 11px 8px; }
.ks-burger span { display: block; height: 2px; background: #fff; margin: 5px 0; transition: transform .16s; }
.ks-burger.is-x span:first-child { transform: translateY(7px) rotate(45deg); }
.ks-burger.is-x span:last-child { transform: translateY(-7px) rotate(-45deg); }

.logo { display: block; flex: none; }
.ks-brand .logo { color: #fff; }

/* --------------------------------------------------------------------------
   Первый экран
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--card); overflow: hidden; border-bottom: 1px solid var(--line); }

/* Сетка — та самая, по которой продукт собирает страницы. */
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.hero__aura {
  position: absolute; top: -280px; left: 50%; transform: translateX(-46%);
  width: 1100px; height: 620px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,123,255,.20), rgba(75,59,240,.06) 58%, transparent 76%);
}

.hero__in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4.4fr);
  gap: 48px; align-items: center;
  padding-top: 70px; padding-bottom: 74px;
}
.hero__text, .hero__art { min-width: 0; }

.hero__badge {
  display: inline-block; font-size: 13.5px; font-weight: 650; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: 7px 16px; margin: 0 0 22px;
}
.hero__h {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.04; letter-spacing: -.042em; font-weight: 800;
  margin: 0 0 22px; color: var(--ink);
}
.hero__p { font-size: 18px; color: var(--muted); margin: 0 0 32px; max-width: 30em; }
.hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__second { font-size: 15.5px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(75,59,240,.3); }
.hero__second:hover { border-color: var(--accent); }
.hero__note { font-size: 13.5px; color: #939DB0; margin: 22px 0 0; max-width: 30em; }

/* Иллюстрация инструмента: продукт называется кобзой, и это стоит показать. */
.hero__art { position: relative; display: flex; justify-content: center; }
.hero__art img { position: relative; width: 100%; max-width: 330px; height: auto; }
.hero__blob {
  position: absolute; inset: 6% -12% 2% -12%; border-radius: 50% 50% 46% 54% / 44% 40% 60% 56%;
  background: linear-gradient(150deg, #E7E3FE 0%, #DCEAFB 46%, #D8F3EC 100%);
}

.slab {
  display: inline-flex; flex-direction: column; gap: 1px;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 15px 32px; border-radius: 12px;
  box-shadow: 0 10px 26px rgba(75,59,240,.34);
  transition: transform .14s, box-shadow .14s, background .14s;
}
.slab:hover { background: #5A4BFF; color: #fff; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(75,59,240,.42); }
.slab:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(75,59,240,.34); }
.slab__main { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.slab__sub { font-size: 12.5px; font-weight: 500; opacity: .78; }
.slab--big { padding: 18px 38px; border-radius: 14px; }
.slab--big .slab__main { font-size: 21px; }

/* --------------------------------------------------------------------------
   Цветные плитки
   -------------------------------------------------------------------------- */
.tiles { padding: 26px 0 10px; }
.tiles__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile {
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 22px; padding: 30px 30px 0; min-height: 330px; overflow: hidden; position: relative;
}
.tile--mint { background: linear-gradient(158deg, #D9F3EC 0%, #E8F6F1 100%); }
.tile--lav  { background: linear-gradient(158deg, #E6E1FD 0%, #EFECFE 100%); }
.tile--dark { background: linear-gradient(158deg, #171F33 0%, #232C45 100%); }
.tile__t h2 { font-size: 21px; line-height: 1.22; letter-spacing: -.025em; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.tile__t p { font-size: 15.5px; color: #55607A; margin: 0 0 16px; }
.tile__l { font-size: 14.5px; font-weight: 650; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid rgba(46,34,168,.28); }
.tile__l:hover { border-color: var(--accent-ink); }
.tile--dark .tile__t h2 { color: #fff; }
.tile--dark .tile__t p { color: #A7B0C4; }
.tile--dark .tile__l { color: var(--accent-2); border-color: rgba(139,123,255,.4); }
.tile__i { display: block; width: 152px; height: auto; margin: 18px auto -14px; }

/* --------------------------------------------------------------------------
   Попробуйте прямо здесь
   -------------------------------------------------------------------------- */
.try__in { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.try__text { min-width: 0; }
.try__again {
  background: none; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14.5px; color: var(--muted); padding: 10px 20px; cursor: pointer;
}
.try__again:hover { border-color: var(--accent); color: var(--accent); }

/* --- Живая сборка страницы ------------------------------------------------ */
.demo {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(12,18,32,.04), 0 24px 60px rgba(12,18,32,.12);
}
.demo__chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #FCFCFE;
}
.demo__tab { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.demo__state { font-size: 12.5px; color: var(--muted); }
.demo__state.is-live { color: var(--accent); }

.demo__body { display: grid; grid-template-columns: 132px 1fr; gap: 0; }
.demo__palette {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 12px;
  border-right: 1px solid var(--line); background: #FBFBFE;
}
.pill {
  background: var(--card); border: 1px solid var(--line); color: var(--body);
  border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 11px; cursor: pointer; text-align: left;
  transition: border-color .14s, color .14s, background .14s;
}
.pill:hover { border-color: var(--accent-2); color: var(--ink); }
.pill.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.demo__page {
  padding: 14px; height: 320px; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 10px;
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--card);
}
.demo__page::-webkit-scrollbar { width: 5px; }
.demo__page::-webkit-scrollbar-thumb { background: #D7DCE6; border-radius: 3px; }
.demo__empty { margin: auto; color: #A2ABBC; font-size: 14px; text-align: center; }

/* Указатель ведёт по палитре при первом показе — видно, что тут можно нажимать. */
.demo__cursor {
  position: absolute; top: 0; left: 0; width: 18px; height: 18px; opacity: 0;
  border: 2px solid var(--accent); border-radius: 50%; background: rgba(75,59,240,.16);
  pointer-events: none; transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .2s;
  z-index: 4;
}
.demo__cursor.is-on { opacity: 1; }
.demo__cursor.is-tap { animation: tap .3s ease-out; }
@keyframes tap {
  0% { box-shadow: 0 0 0 0 rgba(75,59,240,.45); }
  100% { box-shadow: 0 0 0 14px rgba(75,59,240,0); }
}

/* Блок «встаёт» на страницу: короткий подъём и рамка выделения, как в редакторе. */
.mb-slot {
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1);
  border-radius: 6px;
}
.mb-slot.is-in { opacity: 1; transform: none; }
.mb-slot.is-fresh { box-shadow: 0 0 0 2px var(--accent); }

.mb { display: block; }
.mb--cover { background: linear-gradient(122deg, #E7E4FF, #F4F6FA); border-radius: 6px; padding: 18px; }
.mb__h { display: block; height: 13px; width: 60%; border-radius: 3px; background: #8E93B5; margin-bottom: 8px; }
.mb__sub { display: block; height: 8px; width: 42%; border-radius: 3px; background: #B4B9D2; margin-bottom: 12px; }
.mb__btn { display: block; height: 21px; width: 96px; border-radius: 5px; background: var(--accent); }

.mb--text { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px; }
.mb__l { display: block; height: 8px; border-radius: 3px; background: #E6EAF1; }
.mb__l--s { width: 56%; }

.mb--docs { display: flex; flex-direction: column; gap: 6px; }
.mb__doc { display: block; height: 27px; border-radius: 5px; background: #F4F6FA; border-left: 3px solid var(--accent-2); }

.mb--staff { display: flex; gap: 10px; }
.mb__p { display: block; flex: 1; height: 56px; border-radius: 6px; background: #F4F6FA; position: relative; }
.mb__p::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #CFD5E4;
}
.mb__p::after {
  content: ""; position: absolute; bottom: 10px; left: 20%; right: 20%; height: 6px;
  border-radius: 3px; background: #DFE4EE;
}

.mb--news { display: flex; gap: 9px; }
.mb__n { display: block; flex: 1; height: 60px; border-radius: 6px; background: #F4F6FA; position: relative; overflow: hidden; }
.mb__n::before { content: ""; position: absolute; inset: 0 0 42% 0; background: #DEE3EE; }
.mb__n::after { content: ""; position: absolute; bottom: 11px; left: 8px; right: 8px; height: 6px; border-radius: 3px; background: #DFE4EE; }

.mb--contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb__map { display: block; height: 76px; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #EDF0F6 0 9px, #F5F7FA 9px 18px); }
.mb__lines { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.mb__lines b { display: block; height: 8px; border-radius: 3px; background: #E6EAF1; }
.mb__lines b:nth-child(2) { width: 74%; }
.mb__lines b:nth-child(3) { width: 52%; }

/* --------------------------------------------------------------------------
   Полоса требований
   -------------------------------------------------------------------------- */
.specs { background: var(--card); border-bottom: 1px solid var(--line); }
.specs__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 24px 28px; }
.specs__i { padding-left: 14px; border-left: 2px solid var(--accent); }
.specs__i b { display: block; color: var(--ink); font-size: 15px; font-weight: 700; margin-bottom: 1px; }
.specs__i span { display: block; color: var(--muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Общее для секций
   -------------------------------------------------------------------------- */
.ks-sec { padding: 86px 0; }
.ks-sec--wash { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.ks-h1 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 0 0 18px; color: var(--ink); }
.ks-h2 { font-size: clamp(26px, 3.1vw, 36px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 0 0 20px; color: var(--ink); }
.ks-lead { font-size: 18px; color: var(--muted); margin: 0 0 34px; max-width: 34em; }
.ks-lead--tight { margin-bottom: 26px; }
.ks-quiet { font-size: 14.5px; color: #9AA4B6; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); }
.ks-quiet:hover { color: #fff; }
.ks-note { font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Возможности — карточки разного веса, а не одинаковая сетка
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 28px 26px; overflow: hidden; position: relative;
}
.card--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; padding-right: 0; }
.card--mint { background: linear-gradient(158deg, #D9F3EC 0%, #EBF8F4 100%); border-color: #C6E9DF; }
.card--sky  { background: linear-gradient(158deg, #DDEAFC 0%, #EEF4FD 100%); border-color: #CADDF6; }
.card--peach{ background: linear-gradient(158deg, #FCE7DA 0%, #FDF2EB 100%); border-color: #F6D6C3; }
.card--dark { background: linear-gradient(158deg, #171F33 0%, #232C45 100%); border-color: transparent; }

.card__b { min-width: 0; }
.card h3 { font-size: 19px; line-height: 1.24; letter-spacing: -.025em; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.card p { font-size: 15.5px; color: #55607A; margin: 0 0 12px; }
.card p:last-of-type { margin-bottom: 0; }
.card--wide h3 { font-size: 23px; }
.card--dark h3 { color: #fff; }
.card--dark p { color: #A7B0C4; }
.card__l {
  display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 650;
  color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid rgba(46,34,168,.28);
}
.card__l:hover { border-color: var(--accent-ink); }
.card--dark .card__l { color: var(--accent-2); border-color: rgba(139,123,255,.4); }
.card__code { font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.card__img { flex: none; width: 168px; height: auto; align-self: flex-end; margin-bottom: -26px; }

/* --------------------------------------------------------------------------
   Блоки: миниатюра показывает, что блок делает, лучше любого описания
   -------------------------------------------------------------------------- */
.bplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bp {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px 0; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.bp:hover { border-color: var(--accent-2); box-shadow: 0 10px 26px rgba(12,18,32,.07); }
.bp__head { margin-bottom: 14px; }
.bp__n { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.bp__d { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; min-height: 2.8em; }

/* Каркас миниатюры: серые прямоугольники, акцент только там, где он есть в блоке. */
.bp__prev {
  position: relative; height: 108px; border-radius: 10px 10px 0 0;
  border: 1px solid var(--line); border-bottom: 0; background: #FCFCFE;
  padding: 12px; overflow: hidden;
}
.bp__prev::before, .bp__prev::after { content: ""; position: absolute; }

/* Обложка: крупная плашка с заголовком */
.bp__prev--cover::before { inset: 12px; border-radius: 6px; background: linear-gradient(120deg, #E4E9F2, #F2F5F9); }
.bp__prev--cover::after { left: 24px; top: 44px; width: 96px; height: 9px; border-radius: 3px; background: #A8B3C4; box-shadow: 0 16px 0 -2px #C6CEDB; }

/* Текст: строки абзаца */
.bp__prev--text::before { left: 12px; right: 12px; top: 20px; height: 8px; border-radius: 3px; background: #E3E8EF;
  box-shadow: 0 16px 0 #E3E8EF, 0 32px 0 #E3E8EF; }
.bp__prev--text::after { left: 12px; top: 84px; width: 54%; height: 8px; border-radius: 3px; background: #E3E8EF; }

/* Заголовок: крупная строка с линией под ней */
.bp__prev--heading::before { left: 14px; top: 34px; width: 62%; height: 15px; border-radius: 4px; background: #9AA5B6; }
.bp__prev--heading::after { left: 14px; right: 14px; top: 62px; height: 2px; background: var(--accent); }

/* Колонки: две равные колонки */
.bp__prev--columns::before { left: 12px; top: 16px; bottom: 16px; width: 44%; border-radius: 6px; background: #EDF1F6; }
.bp__prev--columns::after { right: 12px; top: 16px; bottom: 16px; width: 44%; border-radius: 6px; background: #EDF1F6; }

/* Карточки: сетка 2×2 */
.bp__prev--cards::before { left: 12px; top: 14px; width: 44%; height: 36px; border-radius: 5px; background: #EDF1F6;
  box-shadow: 0 46px 0 #EDF1F6; }
.bp__prev--cards::after { right: 12px; top: 14px; width: 44%; height: 36px; border-radius: 5px; background: #EDF1F6;
  box-shadow: 0 46px 0 #EDF1F6; }

/* Документы: строки файлов с акцентной засечкой */
.bp__prev--docs::before { left: 12px; right: 12px; top: 18px; height: 20px; border-radius: 5px; background: #F0F3F8;
  border-left: 3px solid var(--accent-2); box-shadow: 0 28px 0 #F0F3F8, 0 56px 0 #F0F3F8; }
.bp__prev--docs::after { display: none; }

/* Сотрудники: два портрета */
.bp__prev--staff::before { left: 26px; top: 24px; width: 26px; height: 26px; border-radius: 50%; background: #CFD6E2;
  box-shadow: 0 38px 0 -4px #E3E8EF; }
.bp__prev--staff::after { right: 26px; top: 24px; width: 26px; height: 26px; border-radius: 50%; background: #CFD6E2;
  box-shadow: 0 38px 0 -4px #E3E8EF; }

/* Лента: карточка новости с картинкой */
.bp__prev--news::before { left: 12px; top: 16px; width: 46%; height: 42px; border-radius: 5px; background: #DFE5EE; }
.bp__prev--news::after { right: 12px; top: 20px; width: 42%; height: 8px; border-radius: 3px; background: #E3E8EF;
  box-shadow: 0 16px 0 #E3E8EF, 0 32px 0 -1px #EAEEF3; }

/* Галерея: три снимка в ряд */
.bp__prev--gallery::before { left: 12px; top: 24px; width: 28%; height: 44px; border-radius: 5px; background: #E3E8EF;
  box-shadow: 66px 0 0 #E3E8EF; }
.bp__prev--gallery::after { right: 12px; top: 24px; width: 28%; height: 44px; border-radius: 5px; background: #E3E8EF; }

/* Вопросы: строки с плюсами */
.bp__prev--faq::before { left: 12px; right: 12px; top: 18px; height: 18px; border-radius: 5px; background: #F0F3F8;
  box-shadow: 0 26px 0 #F0F3F8, 0 52px 0 #F0F3F8; }
.bp__prev--faq::after { right: 22px; top: 25px; width: 8px; height: 2px; background: var(--accent-2);
  box-shadow: 0 26px 0 var(--accent-2), 0 52px 0 var(--accent-2); }

/* Контакты: карта и строки */
.bp__prev--contacts::before { left: 12px; top: 16px; bottom: 16px; width: 44%; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #E7ECF3 0 7px, #F1F4F8 7px 14px); }
.bp__prev--contacts::after { right: 12px; top: 26px; width: 40%; height: 8px; border-radius: 3px; background: #E3E8EF;
  box-shadow: 0 16px 0 -1px #E9EDF3, 0 32px 0 -2px #EDF0F5; }

/* Призыв: кнопка акцентным цветом */
.bp__prev--cta::before { inset: 20px 14px; border-radius: 8px; background: #F0F3F8; }
.bp__prev--cta::after { left: 50%; top: 46px; transform: translateX(-50%); width: 88px; height: 22px;
  border-radius: 6px; background: var(--accent); }

/* Цитата: кавычка и строки курсивом */
.bp__prev--quote::before { left: 16px; top: 22px; width: 3px; height: 52px; border-radius: 2px; background: var(--accent-2); }
.bp__prev--quote::after { left: 30px; right: 14px; top: 30px; height: 8px; border-radius: 3px; background: #E3E8EF;
  box-shadow: 0 16px 0 #E3E8EF, 0 32px 0 -2px #EAEEF3; }

/* Разделитель: воздух и линия */
.bp__prev--divider::before { left: 14px; right: 14px; top: 24px; height: 8px; border-radius: 3px; background: #EDF1F6; }
.bp__prev--divider::after { left: 34px; right: 34px; top: 54px; height: 2px; background: var(--line); }

/* --------------------------------------------------------------------------
   Порядок действий — нумерация здесь оправдана: это последовательность
   -------------------------------------------------------------------------- */
.path { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.path__i { counter-increment: p; padding-top: 48px; position: relative; }
.path__i::before {
  content: counter(p); position: absolute; top: 0; left: 0; width: 32px; height: 32px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.path__i::after { content: ""; position: absolute; top: 16px; left: 42px; right: -28px; height: 1px; background: var(--line); }
.path__i:last-child::after { display: none; }
.path__i h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.015em; color: var(--ink); }
.path__i p { margin: 0; font-size: 15px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Забрать дистрибутив — плотная тёмная плашка посреди светлой страницы
   -------------------------------------------------------------------------- */
.grab { padding: 0 0 86px; }
.grab__in {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
  background: linear-gradient(150deg, #171F33 0%, #232C45 100%); color: #fff; border-radius: 22px; padding: 52px 56px;
  max-width: var(--wrap); margin: 0 auto;
}
.grab__h { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.03em; font-weight: 800; margin: 0 0 14px; }
.grab__p { font-size: 17px; color: #A7B0C4; margin: 0 0 10px; }
.grab__notes { font-size: 15px; color: #8A94AB; margin: 0 0 10px; padding-left: 14px; border-left: 2px solid var(--accent-2); }
.grab__req { font-size: 14px; color: #6F7A91; margin: 0; }
.grab__act { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* --------------------------------------------------------------------------
   Цена
   -------------------------------------------------------------------------- */
.price { display: grid; grid-template-columns: 1fr 390px; gap: 56px; align-items: start; }
.price__after { font-size: 15.5px; color: var(--muted); padding-left: 18px; border-left: 2px solid var(--accent-2); margin: 0; }
.price__card { background: linear-gradient(158deg, #EFECFE 0%, #F7F6FE 100%); border: 1px solid #DFD9FB; border-radius: 22px; padding: 32px; box-shadow: 0 18px 44px rgba(12,18,32,.07); }
.price__n { font-size: 54px; font-weight: 800; letter-spacing: -.045em; margin: 0; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.price__n span { font-size: 26px; font-weight: 700; margin-left: 6px; color: var(--muted); }
.price__u { font-size: 15px; color: var(--muted); margin: 8px 0 22px; }
.price__list { list-style: none; margin: 0 0 24px; padding: 0; }
.price__list li { position: relative; padding: 10px 0 10px 27px; font-size: 15.5px; border-top: 1px solid var(--line-soft); }
.price__list li::before {
  content: ""; position: absolute; left: 3px; top: 18px; width: 10px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.price__pay { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* --------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
  list-style: none; cursor: pointer; padding: 21px 42px 21px 0; position: relative;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.018em; color: var(--ink);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: ""; position: absolute; right: 8px; top: 28px; width: 9px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .15s;
}
.faq__i[open] summary::after { transform: rotate(-135deg); top: 32px; }
.faq__i p { margin: 0 0 22px; color: var(--muted); font-size: 16.5px; max-width: 56em; }

/* --------------------------------------------------------------------------
   Вопрос разработчику
   -------------------------------------------------------------------------- */
.ask { padding: 46px 0 90px; }
.ask__panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start;
  background: var(--ink); color: #fff; border-radius: 20px; padding: 56px 56px 52px;
}
.ask__glow {
  position: absolute; top: -220px; right: -140px; width: 620px; height: 520px;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,123,255,.34), rgba(75,59,240,.10) 58%, transparent 74%);
}
.ask__left { position: relative; min-width: 0; }
.ask__h { font-size: clamp(27px, 3.2vw, 38px); letter-spacing: -.032em; font-weight: 800; margin: 0 0 14px; color: #fff; }
.ask__p { font-size: 17px; color: #A7B0C4; margin: 0 0 30px; max-width: 26em; }

/* Контакт — строка с иконкой: почта и телефон равноправны с формой,
   а не спрятаны мелким шрифтом под ней. */
.ask__row {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 14px 16px; margin-bottom: 10px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  transition: background .15s, border-color .15s;
}
.ask__row:hover { background: rgba(139,123,255,.14); border-color: var(--accent-2); }
.ask__ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(139,123,255,.18); color: var(--accent-2);
}
.ask__rt { min-width: 0; }
.ask__rt b { display: block; font-size: 17px; font-weight: 650; color: #fff; letter-spacing: -.015em; word-break: break-word; }
.ask__rt i { display: block; font-style: normal; font-size: 13px; color: #8791A6; margin-top: 2px; }

.ask__hints { list-style: none; margin: 26px 0 0; padding: 0; }
.ask__hints li {
  position: relative; padding: 6px 0 6px 22px; font-size: 14.5px; color: #97A1B4;
}
.ask__hints li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 4px;
  border-left: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); transform: rotate(-45deg);
}

.ask__form {
  position: relative; background: var(--card); border-radius: 16px; padding: 28px;
  color: var(--body); box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.ask__ft { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
.askf { display: block; margin-bottom: 16px; }
.askf__l { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.askf__i {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 16px; background: var(--card); color: var(--body);
}
.askf__i::placeholder { color: #A2ABBC; }
.askf__i:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(75,59,240,.16); }
.askf__i--area { resize: vertical; line-height: 1.5; }
.ask__fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }

.ks-hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   Кнопки и сообщения
   -------------------------------------------------------------------------- */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: var(--r); font-size: 16px; font-weight: 650;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.ks-btn--solid { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(75,59,240,.3); }
.ks-btn--solid:hover { background: #5A4BFF; color: #fff; }
.ks-btn--wide { width: 100%; }

.ks-flash { padding: 14px 18px; border-radius: var(--r); margin: 22px 0; font-size: 15.5px; border: 1px solid; }
.ks-flash--ok { background: #EDF7F0; border-color: #BEE0C9; color: #1E5C36; }
.ks-flash--error { background: #FDEEEC; border-color: #F2C5BE; color: #8C2A1E; }

/* --------------------------------------------------------------------------
   Внутренние страницы: шапка, оглавление, текст
   -------------------------------------------------------------------------- */
.phead { position: relative; background: var(--card); border-bottom: 1px solid var(--line); overflow: hidden; }
.phead__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(110% 100% at 20% 0%, #000 22%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 100% at 20% 0%, #000 22%, transparent 72%);
}
.phead__in { position: relative; padding: 66px 28px 56px; max-width: 900px; margin: 0 auto; }
.phead__h { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; margin: 0 0 20px; color: var(--ink); }
.phead__p { font-size: 18.5px; color: var(--muted); margin: 0 0 26px; max-width: 40em; }
.phead__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.phead__meta span {
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: 6px 14px;
}

.pbody { padding: 56px 0 90px; }
.pbody__in { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 56px; align-items: start; }

.toc { position: sticky; top: 110px; }
.toc__t { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 12px; }
.toc__nav { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc__nav a {
  font-size: 14.5px; color: var(--muted); text-decoration: none;
  padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent;
}
.toc__nav a:hover { color: var(--accent); border-left-color: var(--accent); }

.prose { min-width: 0; }
.prose p { font-size: 16.8px; margin: 0 0 16px; }
.prose > p:first-child { margin-top: 0; }
/* Красим только обычные ссылки в тексте. Без :not([class]) это правило
   перебивало цвет кнопки — она оказывалась акцентной по акцентному фону,
   и текст проявлялся лишь при наведении. */
.prose a:not([class]) { color: var(--accent); }

.psec { padding-bottom: 12px; margin-bottom: 46px; }
.psec + .psec { border-top: 1px solid var(--line); padding-top: 46px; }
.psec__h { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.16; letter-spacing: -.03em; font-weight: 800; color: var(--ink); margin: 0 0 18px; scroll-margin-top: 110px; }
.psec__h3 { font-size: 18px; letter-spacing: -.02em; font-weight: 700; color: var(--ink); margin: 30px 0 12px; }

/* Пары «термин — объяснение»: плотнее списка, читается быстрее абзацев. */
.kv { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0; margin: 22px 0; }
.kv dt {
  font-size: 15.5px; font-weight: 700; color: var(--ink);
  padding: 14px 20px 14px 0; border-top: 1px solid var(--line);
}
.kv dd { font-size: 16px; color: var(--muted); padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.kv--tight dt, .kv--tight dd { padding-top: 11px; padding-bottom: 11px; font-size: 15.5px; }

.callout {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 24px 0;
}
.callout p { margin: 0; font-size: 16px; color: #34306B; }
.callout--warn { background: #FDF0EE; border-left-color: var(--danger); }
.callout--warn p { color: #8C2A1E; }

.steps { list-style: none; counter-reset: st; margin: 22px 0; padding: 0; }
.steps li {
  counter-increment: st; position: relative; padding: 0 0 18px 46px;
  font-size: 16.5px; color: var(--muted);
}
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.steps b { color: var(--ink); font-weight: 700; }

.tbl { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15.5px; }
.tbl th {
  text-align: left; padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--card); border-bottom: 1px solid var(--line);
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.tbl tr td:first-child { color: var(--ink); font-weight: 600; }

.code {
  background: var(--ink); color: #D5DCEA; border-radius: 12px; padding: 20px 22px;
  overflow-x: auto; margin: 22px 0; font-size: 13.5px; line-height: 1.65;
}
.code code { background: none; color: inherit; padding: 0; font-family: var(--mono); }

.ticks { list-style: none; margin: 0 0 16px; padding: 0; }
.ticks li { position: relative; padding: 7px 0 7px 26px; font-size: 15.5px; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 15px; width: 10px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

/* Крупная плашка с ценой в начале страницы */
.pricebox {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--card); margin-bottom: 46px; box-shadow: 0 18px 44px rgba(12,18,32,.07);
}
.pricebox__l { padding: 32px; border-right: 1px solid var(--line); background: #FBFBFE; }
.pricebox__n { font-size: 50px; font-weight: 800; letter-spacing: -.045em; margin: 0; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pricebox__n span { font-size: 25px; font-weight: 700; margin-left: 5px; color: var(--muted); }
.pricebox__u { font-size: 15px; color: var(--muted); margin: 8px 0 22px; }
.pricebox__note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
.pricebox__r { padding: 32px; }
.pricebox__t { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.pricebox__small { font-size: 14px; color: var(--muted); margin: 12px 0 0; }

/* Призыв в конце внутренней страницы */
.pcta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px 32px; margin-top: 20px;
}
.pcta__h { font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); margin: 0 0 4px; }
.pcta__p { font-size: 15.5px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Внутренние страницы: остальное
   -------------------------------------------------------------------------- */
.ks-list, .ks-ol { padding-left: 22px; }
.ks-list li, .ks-ol li { margin-bottom: 9px; }
.ks-sec p + .ks-h2, .ks-sec ul + .ks-h2, .ks-sec ol + .ks-h2, .ks-sec div + .ks-h2 { margin-top: 48px; }
code { font-family: var(--mono); font-size: .87em; background: var(--accent-soft); color: var(--accent-ink); padding: 2px 6px; border-radius: 4px; }

.ks-price { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: 0 18px 44px rgba(12,18,32,.07); }
.ks-price--flat { margin-bottom: 14px; }
.ks-price__head { margin-bottom: 22px; }
.ks-price__n { display: block; font-size: 50px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ks-price__p { display: block; font-size: 15px; color: var(--muted); margin-top: 8px; }

/* --------------------------------------------------------------------------
   Вход и регистрация
   -------------------------------------------------------------------------- */
.ks-gate { max-width: 440px; margin: 0 auto; }
.ks-gate--wide { max-width: 660px; }
.ks-gate__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 38px; box-shadow: 0 18px 44px rgba(12,18,32,.07); }
.ks-gate__t { font-size: 29px; font-weight: 800; letter-spacing: -.032em; margin: 0 0 6px; color: var(--ink); }
.ks-gate__s { font-size: 15px; color: var(--muted); margin: 0 0 26px; }
.ks-gate__sub { font-size: 16px; font-weight: 700; margin: 26px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink); }
.ks-gate__alt { font-size: 15px; color: var(--muted); text-align: center; margin: 20px 0 0; }
.ks-gate__alt a { color: var(--accent); }

.ks-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ks-field { display: block; margin-bottom: 18px; }
.ks-field > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.ks-field small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.ks-field input, .ks-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 16px; background: var(--card); color: var(--body);
}
.ks-field input:focus, .ks-field textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(75,59,240,.16);
}

/* --------------------------------------------------------------------------
   Подвал
   -------------------------------------------------------------------------- */
.ks-foot { background: var(--ink); color: #808BA0; padding: 58px 0 30px; font-size: 14.5px; }
.ks-foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--ink-3); }
.ks-foot__brand { color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; }
.ks-foot__h { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.ks-foot__t { margin: 0 0 6px; line-height: 1.5; }
.ks-foot__col a { display: block; color: #97A1B4; text-decoration: none; margin-bottom: 8px; }
.ks-foot__col a:hover { color: var(--accent-2); }
.ks-foot__c { font-size: 13px; color: #5A6478; margin: 22px 0 0; }

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 60px; }
  .price { grid-template-columns: 1fr; gap: 34px; }
  .ask__in { grid-template-columns: 1fr; gap: 40px; }
  .blocks { grid-template-columns: repeat(3, 1fr); }
  .specs__in { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .grab__in { border-radius: 0; padding: 44px 28px; }
  .grab { padding-bottom: 0; }
}

@media (max-width: 860px) {
  .ks-nav {
    position: absolute; top: 84px; left: 0; right: 0; display: none;
    flex-direction: column; gap: 0; background: var(--ink-2);
  }
  .ks-nav.is-open { display: flex; }
  .ks-nav a { padding: 15px 28px; border-top: 1px solid var(--ink-3); }
  .ks-burger { display: block; }
  .ks-head__in { gap: 10px; }
  .ks-brand { margin-right: auto; }

  .feat { grid-template-columns: 1fr; gap: 34px; }
  .feat__big--alt { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 34px; }
  .feat__list { grid-template-columns: 1fr; margin-top: 34px; }
  .path { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .path__i::after { display: none; }
  .grab__in { grid-template-columns: 1fr; gap: 30px; }
  .grab__act { align-items: flex-start; }
  .ks-form__row { grid-template-columns: 1fr; }
  .ks-foot__in { grid-template-columns: 1fr 1fr; }
  .ks-sec { padding: 62px 0; }
}

@media (max-width: 620px) {
  body.ks { font-size: 16px; }
  .ks-wrap { padding: 0 18px; }
  .blocks { grid-template-columns: 1fr 1fr; }
  .specs__in { grid-template-columns: 1fr; padding: 20px 18px; }
  .path { grid-template-columns: 1fr; }
  .ks-foot__in { grid-template-columns: 1fr; }
  .ks-get__v { display: none; }
  .ks-acc { width: 36px; height: 36px; }
  .ask__form { padding: 22px; }
  .demo__body { grid-template-columns: 1fr; }
  .demo__palette { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .demo__page { height: 250px; }
  .slab { width: 100%; align-items: center; }
  .hero__cta { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .slab:hover, .slab:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Адаптив внутренних страниц и блока вопроса
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .pbody__in { grid-template-columns: 1fr; gap: 34px; }
  .toc { position: static; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--card); }
  .toc__nav { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; border-left: 0; }
  .toc__nav a { padding: 4px 0; margin-left: 0; border-left: 0; border-bottom: 1px solid transparent; }
  .toc__nav a:hover { border-left: 0; border-bottom-color: var(--accent); }
  .ask__panel { grid-template-columns: 1fr; gap: 36px; padding: 44px 36px; }
  .pricebox { grid-template-columns: 1fr; }
  .pricebox__l { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-top: 1px solid var(--line); }
  .kv dd { padding-top: 6px; border-top: 0; }
  .phead__in { padding: 44px 18px 40px; }
  .pbody { padding: 34px 0 60px; }
  .ask__panel { padding: 32px 22px; border-radius: 16px; }
  .ask { padding-bottom: 60px; }
  .pcta { padding: 22px; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 9px 10px; }
  .code { padding: 16px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Адаптив: плитки, иллюстрация, демонстрация
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: 1fr; gap: 34px; }
  .hero__art { max-width: 300px; margin: 0 auto; }
  .tiles__in { grid-template-columns: 1fr; gap: 16px; }
  .tile { min-height: 0; flex-direction: row; align-items: center; padding: 28px 28px 28px 30px; gap: 20px; }
  .tile__i { width: 116px; margin: 0; flex: none; }
  .try__in { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .ks-head__in { height: 70px; }
  .ks-nav { top: 70px; }
  .ks-brand__n { font-size: 21px; }
  .tile { flex-direction: column; align-items: flex-start; text-align: left; }
  .tile__i { width: 132px; margin: 16px auto -10px; }
  .hero__badge { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Адаптив: карточки возможностей и миниатюры блоков
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--wide { grid-column: span 2; }
  .bplist { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; flex-direction: column; align-items: flex-start; padding-right: 28px; }
  .card__img { width: 132px; align-self: center; margin-bottom: -26px; }
  .bplist { grid-template-columns: repeat(2, 1fr); }
  .ask { padding-top: 30px; }
}

@media (max-width: 560px) {
  .bplist { grid-template-columns: 1fr; }
  .bp__d { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Кнопки не должны перекрашиваться контекстными правилами страницы.
   Селектор с тегом даёт ту же специфичность, что у .prose a, а правило
   идёт последним — значит выигрывает при равенстве.
   -------------------------------------------------------------------------- */
a.ks-btn--solid, a.ks-btn--solid:hover, a.slab, a.slab:hover { color: #fff; }
a.slab--wait, a.slab--wait:hover { color: #C4CCD6; }