/* ShelfWay — от склада до полки.
   Мотив: стеллаж/полка. Жёлтая полоса = ценниковая планка на краю полки. */
:root {
  --ink: #14213d;
  --ink-soft: #3d4a63;
  --steel: #5b6b82;
  --rule: #d7dce4;
  --paper: #f6f7f9;
  --white: #ffffff;
  --label: #f2c230;        /* ценниковая планка */
  --label-ink: #3a2c00;
  --f1: #3e7cb1;           /* фейсинги */
  --f2: #6fa86a;
  --f3: #a7c7e7;
  --f4: #d98c3f;
  --f5: #8d6fb4;
  --ok: #2e7d4f;
  --err: #b3261e;
  --radius-s: 4px;
  --radius-m: 10px;
  --wrap: 1120px;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
}

img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--f1); }
:focus-visible { outline: 3px solid var(--f1); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Шапка */
.top {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em; text-decoration: none;
}
.logo-mark { width: 28px; height: 28px; }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--label); }
@media (max-width: 640px) {
  .nav { gap: 14px; font-size: 14px; }
  .nav .nav-contact { display: none; }
}

/* Типографика */
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; max-width: 17ch; text-wrap: balance; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; max-width: 22ch; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
.lead { font-size: clamp(18px, 2vw, 20px); color: var(--ink-soft); max-width: 56ch; }
.muted { color: var(--steel); font-size: 15px; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-s); border: 2px solid var(--ink);
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--white);
}
.btn:hover { background: var(--f1); border-color: var(--f1); color: var(--white); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Секции */
.section { padding: 72px 0; }
.section.white { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section h2 + .lead, .section h2 + p { margin-top: 14px; }
.section-head { margin-bottom: 36px; }
@media (max-width: 640px) { .section { padding: 52px 0; } }

/* HERO с полкой */
.hero { padding: 56px 0 64px; }
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
}
.hero .lead { margin-top: 20px; }
.hero .btns { margin-top: 32px; }
@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
}

/* Стеллаж: 3 полки, на каждой фейсинги, снизу жёлтая ценниковая планка */
.rack {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: 18px 18px 6px;
}
.shelf { position: relative; padding-bottom: 14px; margin-bottom: 12px; }
.shelf-goods { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.shelf::after {
  content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 10px;
  background: var(--label); border-radius: 2px;
}
.facing { flex: 1 1 0; border-radius: 3px 3px 1px 1px; }
.facing.c1 { background: var(--f1); }
.facing.c2 { background: var(--f2); }
.facing.c3 { background: var(--f3); }
.facing.c4 { background: var(--f4); }
.facing.c5 { background: var(--f5); }
.h1x { height: 100%; } .h2x { height: 82%; } .h3x { height: 66%; } .h4x { height: 52%; }
.rack-caption { font-size: 14px; color: var(--steel); padding: 2px 2px 12px; }

/* Сборка полки — единственная анимация при загрузке */
@media (prefers-reduced-motion: no-preference) {
  .rack.assemble .facing { animation: drop 520ms cubic-bezier(.2,.8,.2,1) both; }
  .rack.assemble .shelf:nth-child(2) .facing { animation-delay: 140ms; }
  .rack.assemble .shelf:nth-child(3) .facing { animation-delay: 280ms; }
  @keyframes drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Два направления */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; background: var(--white); }
.split > a {
  display: block; padding: 32px; text-decoration: none; color: var(--ink);
  border-top: 6px solid transparent;
}
.split > a + a { border-left: 1px solid var(--rule); }
.split > a:hover { border-top-color: var(--label); background: #fbfcfd; color: var(--ink); }
.split h3 { font-size: 24px; font-weight: 800; }
.split p { margin-top: 10px; color: var(--ink-soft); }
.split ul { margin: 18px 0 22px; padding-left: 20px; color: var(--ink-soft); }
.split li + li { margin-top: 6px; }
.split .go { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split > a + a { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Факты о себе — строки, а не карточки */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.facts div { border-top: 2px solid var(--ink); padding-top: 14px; }
.facts strong { display: block; font-size: 18px; font-weight: 600; }
.facts p { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; gap: 20px; } }

/* Шаги работы — настоящая последовательность */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 0 20px 0 0; position: relative; }
.steps li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white);
  font-weight: 700; margin-bottom: 14px;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 44px; right: 8px; height: 2px; background: var(--rule);
}
.steps strong { display: block; font-weight: 600; }
.steps p { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps li::after { display: none; }
}

/* Пакеты — таблица-прайс, как ценник */
.prices { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; }
.prices th, .prices td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prices thead th { font-size: 14px; color: var(--steel); font-weight: 600; background: var(--paper); }
.prices tbody tr:last-child td { border-bottom: 0; }
.prices td:first-child { font-weight: 700; white-space: nowrap; }
.prices .price { white-space: nowrap; font-weight: 800; font-size: 19px; }
.prices .price span { display: inline-block; background: var(--label); color: var(--label-ink); padding: 2px 8px; border-radius: 2px; }
.prices .term { white-space: nowrap; color: var(--ink-soft); }
@media (max-width: 720px) {
  .prices thead { display: none; }
  .prices, .prices tbody, .prices tr, .prices td { display: block; width: 100%; }
  .prices tr { border-bottom: 1px solid var(--rule); padding: 14px 0; }
  .prices tbody tr:last-child { border-bottom: 0; }
  .prices td { border: 0; padding: 4px 18px; }
  .prices td:first-child { font-size: 18px; }
}
.note { margin-top: 16px; }

/* Боли / пункты в две колонки */
.list2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; margin: 0; padding: 0; list-style: none; }
.list2 li { padding-left: 28px; position: relative; }
.list2 li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 6px; background: var(--label); border-radius: 1px; }
.list2 strong { display: block; font-weight: 600; }
.list2 span { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 720px) { .list2 { grid-template-columns: 1fr; } }

/* Калькулятор */
.calc {
  display: grid; grid-template-columns: 1fr 320px; gap: 0;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden;
}
.calc-form { padding: 28px; display: grid; gap: 18px; }
.calc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.calc-tabs button {
  font: 600 15px/1 var(--font); padding: 11px 16px; border-radius: var(--radius-s);
  border: 1.5px solid var(--rule); background: var(--white); color: var(--ink-soft); cursor: pointer;
}
.calc-tabs button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field input[type="number"], .field select, .field input[type="text"], .field input[type="tel"], .field textarea {
  font: 400 17px/1.4 var(--font); color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: var(--radius-s); background: var(--white); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--f1); outline: none; box-shadow: 0 0 0 3px rgba(62,124,177,.18); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.calc-out {
  background: var(--ink); color: var(--white); padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.calc-out .sum { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.calc-out .sum-label { color: #b9c3d6; font-size: 15px; }
.calc-out dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 15px; color: #d6dceb; }
.calc-out dd { margin: 0; text-align: right; color: var(--white); }
.calc-out .btn { background: var(--label); border-color: var(--label); color: var(--label-ink); }
.calc-out .btn:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } .row2 { grid-template-columns: 1fr; } }

/* До / после (ритейл) */
.ba { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 24px; }
.ba-switch { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--radius-s); overflow: hidden; margin-bottom: 20px; }
.ba-switch button { font: 600 15px/1 var(--font); padding: 11px 18px; border: 0; background: var(--white); color: var(--ink); cursor: pointer; }
.ba-switch button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.ba-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.ba .rack { border: 0; padding: 0; }
.ba-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ba-notes li { padding-left: 28px; position: relative; color: var(--ink-soft); }
.ba-notes li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 6px; border-radius: 1px; background: var(--err); }
.ba[data-state="after"] .ba-notes li::before { background: var(--ok); }
.ba-notes [data-after] { display: none; }
.ba[data-state="after"] .ba-notes [data-before] { display: none; }
.ba[data-state="after"] .ba-notes [data-after] { display: list-item; }
@media (prefers-reduced-motion: no-preference) { .ba .facing { transition: height 380ms ease, background-color 380ms ease, flex-grow 380ms ease; } }
@media (max-width: 820px) { .ba-grid { grid-template-columns: 1fr; } }

/* Демо-сайты */
.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.demo { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 22px; }
.demo .mock { height: 120px; border-radius: var(--radius-s); margin-bottom: 16px; position: relative; overflow: hidden; }
.demo .mock i { position: absolute; display: block; border-radius: 2px; }
.demo p { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 820px) { .demos { grid-template-columns: 1fr; } }

/* Форма заявки */
.lead-box {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start;
}
.lead-box form { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 28px; display: grid; gap: 16px; }
.lead-box textarea { min-height: 110px; resize: vertical; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 15px; min-height: 22px; }
.form-status.ok { color: var(--ok); font-weight: 600; }
.form-status.err { color: var(--err); font-weight: 600; }
.consent { font-size: 13px; color: var(--steel); }
@media (max-width: 860px) { .lead-box { grid-template-columns: 1fr; gap: 28px; } }

/* Подвал */
.foot { background: var(--ink); color: #c9d1e1; padding: 44px 0; font-size: 15px; }
.foot .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.foot a { color: var(--white); }
.foot strong { color: var(--white); display: block; margin-bottom: 8px; }
.foot .logo { color: var(--white); }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr; } }

/* Калькулятор: панели, флажки, состав цены, учтённые условия */
.calc-pane { display: grid; gap: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.calc { grid-template-columns: 1fr 360px; }
.calc-out .sum { font-variant-numeric: tabular-nums; }
.sum-note { margin-top: 8px; font-size: 14px; color: #b9c3d6; }
.mix-bar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.12); }
.mix-bar i { display: block; height: 100%; transition: flex-grow 500ms cubic-bezier(.2,.8,.2,1); flex: 0 0 auto; }
.mix-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #d6dceb; }
.mix-legend li { display: flex; align-items: center; gap: 6px; }
.mix-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.applied { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.applied li { font-size: 13px; line-height: 1.3; padding: 5px 9px; border-radius: 3px; background: rgba(255,255,255,.1); color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .applied li { animation: chip 300ms ease both; }
  @keyframes chip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }

/* Коэффициенты */
.coefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: k;
  border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--white); overflow: hidden; }
.coefs li { counter-increment: k; padding: 20px 18px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; }
.coefs li:nth-child(5n) { border-right: 0; }
.coefs li:nth-last-child(-n+5) { border-bottom: 0; }
.coefs li::before { content: "k" counter(k); display: inline-block; font-size: 13px; font-weight: 700; color: var(--label-ink);
  background: var(--label); padding: 1px 7px; border-radius: 2px; margin-bottom: 10px; }
.coefs strong { display: block; font-weight: 600; line-height: 1.3; }
.coefs span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 980px) {
  .coefs { grid-template-columns: repeat(2, 1fr); }
  .coefs li, .coefs li:nth-child(5n), .coefs li:nth-last-child(-n+5) { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .coefs li:nth-child(2n) { border-right: 0; }
  .coefs li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Графики */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .charts { grid-template-columns: 1fr; } }
.chart { margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 22px 22px 18px; min-width: 0; }
.section.white .chart { background: var(--paper); }
.chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.chart figcaption strong { font-weight: 600; font-size: 17px; line-height: 1.3; }
.chart .tag { font-size: 12px; color: var(--steel); border: 1px solid var(--rule); border-radius: 2px; padding: 1px 7px; white-space: nowrap; background: var(--white); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.chart-legend li { display: flex; align-items: center; gap: 7px; }
.chart-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: var(--c); }

/* Столбцы */
.cols { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; height: 220px; align-items: end;
  padding-top: 26px; border-bottom: 2px solid var(--ink); }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.col i { display: block; width: 100%; max-width: 54px; height: var(--h); background: var(--f1); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.col.pre i { background: #b8c2d1; }
.col b { font-size: 15px; font-weight: 700; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.col.pre b { color: var(--steel); }
.cols-x { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--steel); text-align: center; }
.split-mark { position: absolute; top: 0; bottom: -2px; width: 0; border-left: 2px dashed rgba(58,44,0,.5); }
.split-mark span { position: absolute; top: 0; left: 6px; font-size: 12px; font-weight: 600; color: var(--label-ink); background: var(--label);
  padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
.split-mark.left span { left: auto; right: 6px; }

/* Линия */
.line-wrap { position: relative; }
.line-svg { width: 100%; height: 230px; overflow: visible; }
.line-svg .grid { stroke: var(--rule); stroke-width: 1; }
.line-svg .area { fill: var(--f2); opacity: .16; }
.line-svg .path { fill: none; stroke: var(--f2); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.line-svg .path.pre { stroke: #9aa6b8; }
.line-svg .dot { fill: var(--white); stroke: var(--f2); stroke-width: 2.5; }
.line-svg .dot.pre { stroke: #9aa6b8; }
.line-svg text { font: 500 12px var(--font); fill: var(--steel); }
.line-svg .val { font-weight: 700; font-size: 13px; fill: var(--ink); }
.line-svg .mark { stroke: var(--label-ink); stroke-width: 2; stroke-dasharray: 5 4; opacity: .55; }
.line-svg .mark-label { fill: var(--label); }
.line-svg .mark-text { font-weight: 600; fill: var(--label-ink); }
.line-delta { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.line-delta b { color: var(--ok); }

/* Пары и воронка: горизонтальные полосы */
.hbars { display: grid; gap: 14px; }
.hrow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.hrow > span { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hpair { display: grid; gap: 4px; }
.hbar { display: flex; align-items: center; gap: 8px; height: 18px; }
.hbar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 0 3px 3px 0; transform-origin: left; min-width: 3px; }
.hbar b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart.wide .hrow { grid-template-columns: 180px 1fr; }
.chart.wide .hbar { height: 22px; }
.chart-note { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 560px) { .hrow, .chart.wide .hrow { grid-template-columns: 1fr; gap: 6px; } }

/* Появление графиков при прокрутке (только если работает JS и пользователь не отключил анимацию) */
@media (prefers-reduced-motion: no-preference) {
  .js .chart .col i { transition: transform 800ms cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 90ms); }
  .js .chart .hbar i { transition: transform 900ms cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 110ms); }
  .js .chart .col b, .js .chart .hbar b { transition: opacity 400ms ease; transition-delay: calc(var(--i) * 90ms + 500ms); }
  .js .chart .path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms ease; }
  .js .chart .path.post { transition-delay: 1000ms; }
  .js .chart .area, .js .chart .dot, .js .chart .val, .js .chart .split-mark, .js .chart .mark-g { transition: opacity 500ms ease; }
  .js .chart .area { transition-delay: 1700ms; }
  .js .chart .dot { transition-delay: calc(var(--i) * 110ms + 200ms); }
  .js .chart .val { transition-delay: 2300ms; }
  .js .chart .split-mark, .js .chart .mark-g { transition-delay: 700ms; }

  .js .chart:not(.is-in) .col i { transform: scaleY(0); }
  .js .chart:not(.is-in) .hbar i { transform: scaleX(0); }
  .js .chart:not(.is-in) .col b, .js .chart:not(.is-in) .hbar b,
  .js .chart:not(.is-in) .area, .js .chart:not(.is-in) .dot, .js .chart:not(.is-in) .val,
  .js .chart:not(.is-in) .split-mark, .js .chart:not(.is-in) .mark-g { opacity: 0; }
  .js .chart:not(.is-in) .path { stroke-dashoffset: 1; }
}
.line-over { position: absolute; inset: 0; pointer-events: none; }
.ldot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--f2); }
.ldot.pre { border-color: #9aa6b8; }
.lval { position: absolute; transform: translateX(-10%); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lval.end { transform: translateX(-90%); color: var(--ok); }
.lmark { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--label-ink);
  background: var(--label); padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .chart .ldot { transition: opacity 300ms ease, transform 300ms ease; transition-delay: calc(var(--i) * 110ms + 150ms); }
  .js .chart .lval, .js .chart .lmark, .js .chart .line-delta, .js .chart .chart-note { transition: opacity 500ms ease; transition-delay: 1600ms; }
  .js .chart .lmark { transition-delay: 700ms; }
  .js .chart:not(.is-in) .ldot { opacity: 0; transform: scale(.4); }
  .js .chart:not(.is-in) .lval, .js .chart:not(.is-in) .lmark,
  .js .chart:not(.is-in) .line-delta, .js .chart:not(.is-in) .chart-note { opacity: 0; }
}

.line-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--steel); }
.line-x span { width: 2ch; text-align: center; }

.list2.one { grid-template-columns: 1fr; align-content: start; gap: 14px; }

/* Страница ассортимента */
.hero-chart { background: var(--white); }
.pareto .zone-l { font-weight: 800; font-size: 15px; fill: var(--steel); opacity: .7; }
.pareto .path { stroke: var(--f1); stroke-width: 3.5; }
.pareto .pdot { fill: var(--white); stroke: var(--f1); stroke-width: 3; }
.pareto .mark-text { font-weight: 700; font-size: 13px; fill: var(--ink); }
.line-svg.pareto { height: auto; aspect-ratio: 2 / 1; }
.analyses { counter-reset: k; }
.analyses li::before { content: counter(k); }
.abcxyz { display: grid; grid-template-columns: 130px repeat(3, 1fr); gap: 8px; }
.ax-head, .ax-row { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.ax-head { justify-content: center; text-align: center; padding: 4px 6px 8px; flex-direction: column; gap: 2px; }
.ax-head b, .ax-row b { font-size: 22px; color: var(--ink); font-weight: 800; }
.ax-cell { border-radius: var(--radius-s); padding: 14px 16px; display: grid; gap: 4px; align-content: start; border: 1px solid transparent; }
.ax-cell b { font-size: 18px; font-weight: 800; }
.ax-cell span { font-size: 14.5px; line-height: 1.45; }
.ax-cell.keep { background: #e4f1e6; border-color: #c7e1cc; }
.ax-cell.watch { background: #fdf4d8; border-color: #f2e2a6; }
.ax-cell.cut { background: #f8e3e1; border-color: #eec5c1; }
@media (prefers-reduced-motion: no-preference) {
  .js .abcxyz .ax-cell { transition: opacity 450ms ease, transform 450ms ease; transition-delay: calc(var(--i) * 70ms); }
  .js .abcxyz:not(.is-in) .ax-cell { opacity: 0; transform: translateY(8px); }
}
@media (max-width: 720px) {
  .abcxyz { grid-template-columns: 1fr 1fr 1fr; }
  .ax-corner, .ax-row { display: none; }
  .ax-head { font-size: 12px; }
  .ax-cell { padding: 10px; }
  .ax-cell span { font-size: 13px; }
}
.data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.data-grid div { border-top: 2px solid var(--ink); padding-top: 12px; }
.data-grid p { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 860px) { .data-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .data-grid { grid-template-columns: 1fr; } }
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--white); padding: 0 18px; }
.section.white .faq details { background: var(--paper); }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--steel); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 16px; color: var(--ink-soft); }
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } }
.split { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } .split > a + a { border-left: 0; border-top: 1px solid var(--rule); } }
@media (max-width: 640px) { .nav { gap: 12px; font-size: 13.5px; } }
.logo-mark { flex: none; }
.nav a { white-space: nowrap; }
@media (max-width: 560px) {
  .top .wrap { flex-wrap: wrap; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .nav { width: 100%; justify-content: space-between; font-size: 14px; }
}