/* ai.asa-tech.kz — ASA Technology
   Светлая основа. Тёмная «экранная» гамма — только в полосе демонстрации и подвале:
   в ней клиент увидит систему на показе. */

:root {
  /* светлая */
  --ground: #EEF1F2;
  --surface: #FFFFFF;
  --ink: #172026;
  --ink-2: #4A5A63;
  --line-l: #D8DFE2;
  --accent: #0E6474;
  --accent-dark: #0A4F5C;
  --accent-tint: #D3E6E9;
  --accent-mid: #8DBBC3;
  --bad-ink: #B3261E;
  /* тёмная (экран) */
  --navy: #0A1530;
  --navy-2: #0D1B3D;
  --panel: #16254F;
  --line: #273C72;
  --sky: #C0D5EE;
  --sky-2: #8FA6CC;
  --lime: #A7C700;

  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-ctl: 8px;
  --r-panel: 14px;
  --gutter: 16px;
  --t: 160ms;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p, figure, dl, dd { margin: 0; }
strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------- Секции ---------- */

.section { padding-block: 80px; }
.section--ground { background: var(--ground); }
@media (min-width: 960px) {
  .section { padding-block: 128px; }
  .section--tight { padding-block: 96px; }
}

/* Заголовок секции: слева h2, справа лид — на одной линии */
.head { margin-bottom: 48px; }
.head h2 {
  font-size: clamp(1.875rem, 1.25rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
.lead {
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}
@media (min-width: 960px) {
  .head {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 72px;
  }
  .head .lead { margin-top: 6px; }
  .head--solo { margin-bottom: 0; }
}

.text-lg {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  max-width: 54ch;
}
.head--solo .text-lg { margin-top: 20px; }
@media (min-width: 960px) { .head--solo .text-lg { margin-top: 4px; } }

.note {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 54ch;
}

.after {
  margin-top: 40px;
  color: var(--ink-2);
  max-width: 60ch;
}

.takeaway {
  margin-top: 72px;
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 34ch;
}
@media (min-width: 960px) {
  .takeaway { margin-left: calc((100% - 48px) * 5 / 12 + 48px); }
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 16px 30px;
  border-radius: var(--r-ctl);
  border: 0;
  font: 600 1.0625rem/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t);
}
.btn--primary, .btn--accent { background: var(--accent); color: #fff; }
.btn--primary:hover, .btn--accent:hover { background: var(--accent-dark); }
.btn[disabled] { opacity: 0.7; cursor: progress; }
@media (max-width: 479px) { .btn { width: 100%; } }

/* ---------- Блок 1. Первый экран ---------- */

.hero { background: var(--ground); }
.hero__inner {
  display: flex;
  flex-direction: column;
  min-height: min(84vh, 860px);
  padding-top: 24px;
  padding-bottom: 56px;
}
.brand { font-weight: 500; font-size: 1.0625rem; }
.hero__body { margin-top: auto; padding-top: 72px; }

.hero h1 {
  font-size: clamp(2.5rem, 0.9rem + 6.4vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero__was, .hero__now { display: block; }
.hero__was { font-weight: 400; color: var(--ink-2); }
.hero__now { font-weight: 600; color: var(--ink); max-width: 15ch; }

.hero__foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line-l);
  display: grid;
  gap: 32px;
}
.hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__note { margin-top: 12px; font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 960px) {
  .hero__foot { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
  .hero__cta { justify-self: end; text-align: right; }
}

/* ---------- Блок 2. Уровни: ступени снизу вверх ---------- */

.levels { display: grid; gap: 40px; }
.level { display: flex; flex-direction: column; }
.level__title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.level p { color: var(--ink-2); max-width: 46ch; }

/* ступень: на телефоне — полоса растущей ширины над текстом */
.level__num {
  order: -1;
  display: flex;
  align-items: flex-end;
  height: 56px;
  padding: 0 0 8px 14px;
  margin-bottom: 20px;
  border-radius: 6px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}
.level--1 .level__num { width: 34%; background: var(--accent-tint); color: var(--accent); }
.level--2 .level__num { width: 67%; background: var(--accent-mid); color: var(--ink); }
.level--3 .level__num { width: 100%; background: var(--accent); color: #fff; }

/* на мониторе — три колонки, ступени внизу растут слева направо */
@media (min-width: 900px) {
  .levels {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 8px;
    align-items: stretch;
  }
  .level { padding-right: 24px; }
  .level__num {
    order: 1;
    width: 100% !important;
    margin: auto 0 0;
    padding: 0 0 16px 20px;
    font-size: 3.5rem;
  }
  .level p { margin-bottom: 32px; }
  .levels { border-bottom: 2px solid var(--ink); padding-bottom: 0; }
  .level__num { border-radius: 6px 6px 0 0; }
  .level--1 .level__num { height: 96px; }
  .level--2 .level__num { height: 176px; }
  .level--3 .level__num { height: 256px; }
}

/* ---------- Блок 3. Штатное расписание ---------- */

.staff__dept {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  margin-bottom: 48px;
}
.staff__name {
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: 8px;
}
.staff__list > div {
  padding-block: 14px;
  border-bottom: 1px solid var(--line-l);
}
.staff__list > div:last-child { border-bottom: 0; }
.staff__list dt { font-weight: 500; }
.staff__list dd { color: var(--ink-2); margin-top: 2px; }

@media (min-width: 960px) {
  .staff__dept {
    display: grid;
    grid-template-columns: 3fr 9fr;
    gap: 48px;
    margin-bottom: 56px;
  }
  .staff__name { margin: 14px 0 0; }
  .staff__list > div {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: 32px;
  }
  .staff__list dd { margin-top: 0; }
}

/* ---------- Блок 4. Устройство ---------- */

.rules {
  display: grid;
  gap: 0 48px;
  counter-reset: rule;
}
@media (min-width: 760px) { .rules { grid-template-columns: 1fr 1fr; } }
.rules li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 56px 1fr;
  padding-block: 28px;
  border-top: 1px solid var(--line-l);
}
.rules li::before {
  content: counter(rule);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}
.rules p { color: var(--ink-2); }
.rules strong { color: var(--ink); }

/* ---------- Блок 6. Демонстрация — экранная гамма ---------- */

.section--screen {
  background: var(--navy);
  color: var(--sky);
}
.section--screen .lead { color: var(--sky-2); }
.section--screen :focus-visible { outline-color: var(--lime); }

.agenda {
  display: grid;
  gap: 0 32px;
  counter-reset: part;
  margin-bottom: 56px;
}
@media (min-width: 700px) { .agenda { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .agenda { grid-template-columns: repeat(4, 1fr); } }
.agenda li {
  counter-increment: part;
  padding-block: 24px 32px;
  border-top: 1px solid var(--line);
}
.agenda li::before {
  content: counter(part);
  display: block;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--lime);
  margin-bottom: 20px;
}
.agenda h3 { font-size: 1.1875rem; line-height: 1.3; color: var(--sky); margin-bottom: 8px; }
.agenda p { color: var(--sky-2); }

.btn--screen { background: var(--lime); color: var(--navy); }
.btn--screen:hover { background: #B8D81A; }

/* ---------- Блок 7. Цены ---------- */

.prices {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}
.prices th {
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-l);
}
.prices td {
  padding: 28px 0;
  vertical-align: baseline;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-l);
}
.prices td:first-child { padding-right: 32px; max-width: 46ch; }
.prices td strong { color: var(--ink); font-size: 1.1875rem; font-weight: 600; display: block; margin-bottom: 4px; }
.prices .mono { font-family: var(--mono); white-space: nowrap; color: var(--ink); }
.prices td:nth-child(2) { padding-right: 32px; font-size: 1rem; }
.prices .price { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; color: var(--accent); }
.prices th:nth-child(3), .prices td:nth-child(3) { text-align: right; }

@media (max-width: 719px) {
  .prices, .prices thead, .prices tbody, .prices tr, .prices td { display: block; }
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prices tr { padding-block: 24px; border-bottom: 1px solid var(--line-l); }
  .prices td { padding: 0; border: 0; }
  .prices td:first-child { padding: 0 0 16px; }
  .prices td:nth-child(2), .prices td:nth-child(3) {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    text-align: left; padding: 6px 0 0;
  }
  .prices td:nth-child(2)::before, .prices td:nth-child(3)::before {
    content: attr(data-label);
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--ink-2);
  }
}

/* ---------- Блок 8. Данные ---------- */

.data { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .data { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}

.flow { display: grid; gap: 0; }
.flow__box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px;
  border-radius: var(--r-panel);
}
.flow__box--in { background: var(--surface); border: 1px solid var(--line-l); }
.flow__box--out { border: 1.5px dashed #8A9AA3; }
.flow__cap { flex-basis: 100%; font-weight: 600; margin-bottom: 4px; }
.flow__item {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--ground);
  font-size: 0.9375rem;
}
.flow__box--out .flow__item { background: var(--accent-tint); color: var(--accent-dark); }
.flow__pipe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0 10px 28px;
  color: var(--accent);
  font-size: 0.9375rem;
}
.flow__pipe span { color: var(--ink-2); }
.flow__pipe svg { flex: none; }

.bullets li {
  padding-block: 18px;
  border-top: 1px solid var(--line-l);
  color: var(--ink-2);
}
.bullets li:first-child { border-top: 2px solid var(--ink); }
.bullets strong { color: var(--ink); }

/* ---------- Блок 9. Граница: шкала от ИИ к человеку ---------- */

.scale { border-top: 2px solid var(--ink); }
.scale__ends {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
}
.scale__row {
  display: grid;
  gap: 14px;
  padding-block: 20px 24px;
  border-bottom: 1px solid var(--line-l);
}
.scale__row p { color: var(--ink-2); max-width: 64ch; }
.scale__row strong { color: var(--ink); }
.scale__track {
  position: relative;
  height: 14px;
  background: linear-gradient(var(--line-l), var(--line-l)) center / 100% 2px no-repeat;
}
.scale__track i {
  position: absolute;
  top: 0;
  left: calc(var(--pos) / 3 * (100% - 14px));
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
}
@media (min-width: 960px) {
  .scale__ends { width: calc((100% - 48px) * 5 / 12); }
  .scale__row {
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
  }
}

.statement {
  margin-top: 96px;
  font-size: clamp(2rem, 1rem + 4vw, 4.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

/* ---------- Блок 11. Заявка ---------- */

.lead-grid { display: grid; gap: 40px; }
.lead-grid h2 {
  font-size: clamp(1.875rem, 1.25rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
@media (min-width: 960px) {
  .lead-grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}

.card {
  background: var(--ground);
  border-radius: 16px;
  padding: 28px 20px;
}
@media (min-width: 640px) { .card { padding: 40px; } }

.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: 1rem; }
.field__opt { font-weight: 400; color: var(--ink-2); }

.field input[type="text"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  font: 400 1.0625rem/1.4 var(--font);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #8A9AA3;
  border-radius: var(--r-ctl);
  padding: 13px 14px;
  min-height: 52px;
  transition: border-color var(--t);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field input::placeholder { color: #6B7B84; }
.field [aria-invalid="true"] { border-color: var(--bad-ink) !important; box-shadow: 0 0 0 1px var(--bad-ink); }
.field__err { color: var(--bad-ink); font-size: 0.9375rem; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 4px 12px; }
.field--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.field--check label { font-weight: 400; cursor: pointer; }
.field--check .field__err { grid-column: 2; }

.form__status {
  padding: 14px 16px;
  border-radius: var(--r-ctl);
  background: #FBEDEC;
  color: var(--bad-ink);
}
.form .btn { justify-self: start; margin-top: 4px; }

.form__success {
  padding: 24px;
  border-radius: var(--r-ctl);
  background: var(--surface);
  border-left: 4px solid var(--accent);
  font-size: 1.125rem;
}
.form__success:focus { outline: none; }

/* ---------- Логотип ---------- */

.brand img { display: block; height: 78px; width: auto; }
@media (min-width: 960px) { .brand img { height: 92px; } }
.footer__logo { margin-bottom: 14px; }
.footer__logo img { display: block; height: 62px; width: auto; }

/* ---------- Примеры систем (кейсы) ---------- */

.section--figures { background: var(--surface); }
.cases { display: grid; gap: 56px; }
.case { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .case { grid-template-columns: 7fr 5fr; gap: 40px; }
  .case:nth-child(even) .case__shot { order: 2; }
}
.case__shot {
  display: block;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--ground);
  border: 1px solid var(--line-l);
  line-height: 0;
  transition: border-color var(--t);
}
.case__shot:hover { border-color: var(--accent-mid); }
.case__shot img { width: 100%; height: auto; display: block; }
.case__shot--plain {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-style: dashed;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
}
.case__tag {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.case__body h3 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.case__body h3 a { text-decoration: none; }
.case__body h3 a:hover { color: var(--accent); }
.case__body p { color: var(--ink-2); max-width: 52ch; }
.case__roles {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--ink);
  border-top: 1px solid var(--line-l);
  padding-top: 14px;
}
.case__more { margin-top: 18px; }
.case__more a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-mid);
  padding-bottom: 2px;
}
.case__more a:hover { border-bottom-color: var(--accent); }

/* ---------- Страница кейса ---------- */

.case-top { background: var(--ground); padding-block: 28px 72px; }
.case-top .brand img { height: 56px; }
.back {
  display: inline-block;
  margin-top: 28px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
}
.back:hover { color: var(--accent); }
.case-h1 {
  margin-top: 36px;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.case-sub {
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink-2);
  max-width: 60ch;
}
.case-meta {
  margin-top: 32px;
  display: grid;
  gap: 20px;
  border-top: 1px solid var(--line-l);
  padding-top: 20px;
}
@media (min-width: 760px) { .case-meta { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.case-meta dt { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.case-meta dd { margin-top: 6px; font-weight: 500; }

.screens { display: grid; gap: 56px; }
.screen { display: grid; gap: 20px; }
.screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-panel);
  border: 1px solid var(--line-l);
}
.screen h3 { font-size: 1.375rem; line-height: 1.25; }
.screen p { color: var(--ink-2); max-width: 64ch; margin-top: 10px; }
.screen__steps { margin-top: 16px; display: grid; gap: 10px; }
.screen__steps li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.screen__steps li::before {
  counter-increment: st;
  content: counter(st);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen__steps { counter-reset: st; }
.caveat {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-ctl);
  background: var(--ground);
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 72ch;
}

/* ---------- Было — стало ---------- */

.change { display: grid; gap: 0; }
@media (min-width: 900px) { .change { grid-template-columns: 1fr 1fr; gap: 0 48px; } }
.ch { padding-block: 28px 32px; border-top: 1px solid var(--line-l); }
.ch:first-child, .ch:nth-child(2) { border-top: 2px solid var(--ink); }
@media (max-width: 899px) { .ch:nth-child(2) { border-top-width: 1px; } }
.ch h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 16px; }
.ch p { color: var(--ink-2); max-width: 46ch; }
.ch p + p { margin-top: 12px; }
.ch span {
  display: inline-block;
  min-width: 56px;
  margin-right: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ch__was span { color: var(--ink-3, #7B8A92); }
.ch__now span { color: var(--accent); }
.ch__now { color: var(--ink); }

/* ---------- Отрасли ---------- */

.fields { display: grid; gap: 24px; }
@media (min-width: 900px) { .fields { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.field-card {
  background: var(--ground);
  border-radius: var(--r-panel);
  padding: 28px 24px 30px;
}
.field-card--live { background: var(--accent); color: #fff; }
.field-card__tag {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.field-card--live .field-card__tag { color: var(--accent-tint); }
.field-card h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }
.field-card__sub { margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.field-card--live .field-card__sub { color: var(--accent-tint); }
.ticks { margin-top: 20px; display: grid; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.field-card--live .ticks li { color: #EAF5F7; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.field-card--live .ticks li::before { background: var(--accent-tint); }

/* ---------- Этапы работы ---------- */

.steps { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.steps li {
  display: grid;
  gap: 8px 48px;
  padding-block: 28px 30px;
  border-bottom: 1px solid var(--line-l);
}
@media (min-width: 860px) {
  .steps li { grid-template-columns: 160px minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
}
.steps__term {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent);
  white-space: nowrap;
}
.steps h3 { font-size: 1.25rem; line-height: 1.25; }
.steps p:last-child { color: var(--ink-2); max-width: 60ch; }

/* ---------- Подвал ---------- */

.footer {
  background: var(--navy);
  color: var(--sky-2);
  padding-block: 56px;
  font-size: 0.9875rem;
}
.footer__inner { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 5fr 7fr; gap: 48px; } }
.footer p + p { margin-top: 6px; }
.footer__brand { font-weight: 500; color: var(--sky); }
.footer .muted { color: var(--sky-2); }
.footer a { color: var(--sky); text-decoration: none; border-bottom: 1px solid var(--line); }
.footer a:hover { border-bottom-color: var(--lime); }
.footer :focus-visible { outline-color: var(--lime); }
.footer__copy { grid-column: 1 / -1; font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Окно 1С с обработкой «Спросить 1С» (вёрстка, не картинка) ---------- */

.w1c {
  border: 1px solid #D9C56A;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(14, 100, 116, 0.16);
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #333;
}
.w1c .top {
  background: #FBE796;
  padding: 8px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #E3CF74;
  font-size: 12.5px;
  color: #4A4A4A;
}
.w1c .top b { color: #C8102E; font-size: 15px; }
.w1c .body { display: grid; grid-template-columns: 150px 1fr; min-height: 360px; }
.w1c .side { background: #FBEC9F; padding: 10px 0; border-right: 1px solid #EAD77F; }
.w1c .side div { padding: 6px 14px; color: #444; white-space: nowrap; }
.w1c .side .on { background: #FFF6C9; font-weight: 700; }
.w1c .main { padding: 14px 16px; min-width: 0; }
.w1c .title { font-size: 18px; margin: 0 0 10px; color: #222; }
.w1c .chat {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-x: auto;
}
.w1c .q { background: #EEF4F7; border-radius: 8px; padding: 7px 11px; font-weight: 600; margin-bottom: 7px; }
.w1c .v { margin: 5px 0 7px; }
.w1c table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.w1c td, .w1c th { border: 1px solid #D5DEE2; padding: 4px 7px; text-align: left; }
.w1c th { background: #F3F6F8; }
.w1c td.n { text-align: right; white-space: nowrap; }
.w1c td.bad { color: #B3261E; font-weight: 700; white-space: nowrap; }
.w1c td.okk { color: #22703A; font-weight: 600; }
.w1c td.ck { text-align: center; font-size: 15px; color: #0B6E99; }
.w1c td.in { color: #22703A; }
.w1c td i { color: #6B7A80; font-style: normal; font-size: 12px; }
.w1c tr.off td { color: #9AA5A9; }
.w1c tr.off td.bad { color: #B3261E; }
.w1c tr.off td.okk { color: #22703A; }
.w1c .cf {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.5px;
  padding: 0 7px;
  border-radius: 8px;
  background: #E3F4EA;
  color: #1F7A4D;
  font-weight: 600;
}
.w1c .cf.mid { background: #FFF3D6; color: #8A6100; }
.w1c .go {
  display: inline-block;
  margin-top: 10px;
  background: #0B6E99;
  color: #fff;
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 700;
}
.w1c .gonote { color: #6B7A80; font-size: 12px; }
.w1c .ask { display: flex; gap: 6px; margin-top: 10px; }
.w1c .ask div { flex: 1; border: 1px solid #ccc; border-radius: 3px; padding: 7px 9px; color: #999; }
.w1c .ask span {
  background: #FBD63C;
  border: 1px solid #D8B21C;
  border-radius: 3px;
  padding: 7px 14px;
  font-weight: 700;
  color: #333;
}
.w1c-cap { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
@media (max-width: 860px) {
  .w1c .body { grid-template-columns: 1fr; }
  .w1c .side { display: none; }
}

/* карточка кейса с живым макетом вместо скриншота */
.case__shot--live { padding: 20px; background: var(--surface); display: block; line-height: 1.4; }
.case__shot--live .w1c { box-shadow: 0 10px 30px rgba(14,100,116,.12); }


/* ---------- Правки по дизайн-аудиту (12.11.2026) ---------- */

/* Заголовки не оставляют одинокое слово на последней строке, абзацы — висячие строки */
h1, h2, h3, .takeaway, .statement { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Цифры в одинаковых разрядах: в таблицах и показателях не «пляшут» */
.mono, .steps__term, .prices .mono, .w1c td.n { font-variant-numeric: tabular-nums; }

/* Ссылка для клавиатуры: видна только при переходе табом */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-ctl) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }

/* Нажатие кнопки ощущается физически */
.btn { transition: background-color var(--t), transform var(--t); }
.btn:active { transform: translateY(1px); }

/* Карточки отзываются на курсор: тень в тон фона, а не серая */
.field-card {
  transition: transform var(--t), box-shadow var(--t);
}
.field-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 100, 116, 0.10);
}
.field-card--live:hover { box-shadow: 0 12px 28px rgba(14, 100, 116, 0.28); }

/* Экран кейса слегка приподнимается при наведении — видно, что по нему можно кликнуть */
.case__shot { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.case__shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(14, 100, 116, 0.12);
}

/* Строки списков в кейсе подсвечиваются, чтобы глаз не терял строку */
.steps li { transition: background-color var(--t); }
.steps li:hover { background: rgba(14, 100, 116, 0.03); }

/* Подпись под макетом 1С — тем же тоном, что остальные пояснения */
.w1c-cap { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .field-card:hover, .case__shot:hover { transform: none; }
}

/* ---------- Кнопки проектов в блоке «Примеры систем» ---------- */

.pswitch__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
}
.pbtn {
  appearance: none;
  border: 1px solid var(--line-l);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 1rem/1.2 var(--font);
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.pbtn:hover { border-color: var(--accent-mid); color: var(--ink); }
.pbtn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
@media (max-width: 639px) {
  .pswitch__btns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pswitch__btns::-webkit-scrollbar { display: none; }
  .pbtn { padding: 10px 16px; font-size: 0.9375rem; }
}

.panel-case { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) {
  .panel-case { grid-template-columns: 5fr 7fr; gap: 48px; }
}
.panel-case[hidden] { display: none; }
.panel-case__text h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.panel-case__text > p { color: var(--ink-2); max-width: 52ch; }
.panel-case__sub {
  margin-top: 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.panel-case .ticks { margin-top: 14px; }
.panel-case__shot {
  display: block;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--line-l);
  background: var(--ground);
  line-height: 0;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.panel-case__shot:hover {
  border-color: var(--accent-mid);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(14, 100, 116, 0.12);
}
.panel-case__shot img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .panel-case__shot:hover { transform: none; } }

/* Экран не растягивается шире своего размера — иначе текст на нём мылится.
   Ширину ограничиваем по атрибуту width: при width:auto картинки с отложенной
   загрузкой схлопываются в точку и не загружаются вовсе (13.11.2026). */
.screen img, .panel-case__shot img, .case__shot img {
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: block;
}
.screen img[width="800"], .panel-case__shot img[width="800"], .case__shot img[width="800"] { max-width: 820px; }
.screen img[width="700"] { max-width: 720px; }