/* ═══════════════════════════════════════════════════════════════════════════
   СТРАНИЦА «О КОМПАНИИ» — инженерный паспорт
   ═══════════════════════════════════════════════════════════════════════════
   Страница жила на универсальном шаблоне и выглядела как ещё одна услуга.
   Здесь другая задача: показать, как устроена работа. Метафора — технический
   документ: чертёжная сетка, штамп с реквизитами, шкала лет с засечками,
   спецификация принципов. Палитра штатная (бумага, чернила, кислота, хвоя).
   ═════════════════════════════════════════════════════════════════════════ */

.ab {
    --ab-line: rgba(8, 9, 11, .12);
    --ab-grid: rgba(8, 9, 11, .045);
    background: var(--paper);
}

.ab__in {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gut);
}

/* Секции разделяются линией, а не воздухом: документ, а не лендинг. */
/* Ритм секций единый. Раньше база давала 86px, а пять секций были переопределены
   на 64px — на странице получалось случайное чередование 86/86/64/86/64/64/86/64,
   которое читается как сбой вёрстки, а не как иерархия. */
.ab > section { padding: clamp(2.75rem, 5.5vw, 5rem) 0; border-top: 1px solid var(--ab-line); }
.ab > section:first-child { border-top: 0; }

.ab__sec {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
}

/* ── титул ────────────────────────────────────────────────────────────────
   Чертёжная сетка на фоне: миллиметровка, но еле различимая — она задаёт
   ощущение документа и не мешает читать.                                   */
.ab__title {
    position: relative;
    padding-top: clamp(2.5rem, 5vw, 4rem) !important;
    background-image:
        repeating-linear-gradient(to right, var(--ab-grid) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(to bottom, var(--ab-grid) 0 1px, transparent 1px 40px);
}

.ab__stamp {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    background: var(--ab-line);
    border: 1px solid var(--ink);
}

.ab__stamp span {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem .875rem;
    background: var(--paper);
    font-family: var(--mono);
    font-size: .8125rem;
    color: var(--ink);
}

.ab__stamp b {
    font-family: var(--mono);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--soft);
}

.ab__kicker {
    margin: 0 0 .75rem;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lit);
}

.ab__h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6.5vw, 7rem);
    font-weight: 800;
    line-height: .93;
    letter-spacing: -.04em;
}

.ab__lead {
    max-width: 52ch;
    margin: 1.5rem 0 0;
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--soft);
}

/* ── цифры ────────────────────────────────────────────────────────────── */
.ab__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    list-style: none;
    background: var(--ab-line);
    border: 1px solid var(--ab-line);
}

.ab__facts li {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: clamp(1.125rem, 2vw, 1.75rem);
    background: var(--paper);
}

.ab__facts b {
    font-family: var(--mono);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--green);
}

.ab__fl { font-size: .9375rem; font-weight: 600; }
.ab__fn { font-size: .8125rem; color: var(--soft); }

/* ── шкала лет ────────────────────────────────────────────────────────────
   Засечки как на линейке: год — метка, событие — подпись. Горизонталь
   на широком экране, вертикаль на узком.                                   */
.tl {
    display: grid;
    /* Колонок ровно столько, сколько записей в $dz_about_timeline (сейчас 4).
       Было repeat(5): пятая колонка пустая, шкала съезжала на 236px влево,
       а линейка тянулась правее последней засечки и обрывалась в никуда.
       Добавляется год — правится и это число, шаблон и вёрстка идут парой. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ink);
}

.tl__i {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.75rem 1.25rem 0 0;
}

/* засечка на шкале */
.tl__i::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 2px;
    height: 1.125rem;
    background: var(--ink);
}

.tl__i:hover::before { background: var(--lit); height: 1.75rem; transition: height .18s; }

.tl__y {
    font-family: var(--mono);
    font-size: 1.125rem;
    color: var(--lit);
}

.tl__t { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.tl__d { font-size: .875rem; line-height: 1.5; color: var(--soft); }

/* ── спецификация принципов ───────────────────────────────────────────── */
.spec { margin: 0; }

.spec__row {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.5rem 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--ab-line);
}

.spec__row:first-child { border-top: 0; }

.spec dt {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.spec__n {
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 400;
    color: var(--soft);
}

.spec dd {
    margin: 0;
    max-width: 64ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--soft);
}

/* ── стек ─────────────────────────────────────────────────────────────── */
.stk {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--ab-line);
    border: 1px solid var(--ab-line);
}

.stk__g { padding: clamp(1.125rem, 2vw, 1.625rem); background: var(--paper); }

.stk__h {
    margin: 0 0 .875rem;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--soft);
}

.stk__l { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; }

.stk__l li {
    padding: .3125rem .625rem;
    border: 1px solid var(--ab-line);
    font-family: var(--mono);
    font-size: .8125rem;
    color: var(--ink);
    transition: border-color .15s, background-color .15s;
}

.stk__l li:hover { border-color: var(--ink); background: rgba(200, 245, 63, .28); }

/* ── основатель ───────────────────────────────────────────────────────── */
/* Левая колонка держит ширину текста: who__txt обрезан по 60ch (~590px), а
   1fr растягивал колонку до ~850px — треть строки уходила в пустоту, и блок
   «08 · Кто отвечает» читался как разреженный. Остаток ширины уходит в
   разрыв, штамп-подпись прижимается к правому краю листа. */
.who { display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 18rem); gap: clamp(1.5rem, 3vw, 3rem); justify-content: space-between; }

.who__name { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.who__role { margin: .5rem 0 1.25rem; font-family: var(--mono); font-size: .875rem; color: var(--lit); }
.who__txt { margin: 0 0 1.75rem; max-width: 60ch; font-size: 1rem; line-height: 1.65; color: var(--soft); }

.who__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.who__tel {
    font-family: var(--mono);
    font-size: .9375rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ab-line);
}

.who__tel:hover { border-color: var(--ink); }

/* Штамп-подпись: угловой блок как на чертеже. */
.who__sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    min-height: 12rem;
    padding: 1.5rem;
    border: 2px solid var(--ink);
}

.who__sign span {
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
}

.who__sign b {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ink);
}

/* ── призыв ───────────────────────────────────────────────────────────── */
.ab__cta { background: var(--ink) !important; color: var(--paper); }
.ab__cta h2 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 3.4vw, 3rem); letter-spacing: -.02em; }
.ab__cta p { margin: 0 0 1.75rem; max-width: 56ch; color: rgba(237, 237, 234, .72); line-height: 1.6; }
.ab__cta-acts { display: flex; flex-wrap: wrap; gap: .875rem; }
.ab__cta .btn--o { color: var(--paper); border-color: rgba(237, 237, 234, .4); }
.ab__cta .btn--o:hover { background: var(--paper); color: var(--ink); }

/* ── адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ab__stamp, .ab__facts, .stk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .who { grid-template-columns: minmax(0, 1fr); }
    .who__sign { min-height: 9rem; }
}

@media (max-width: 640px) {
    .ab__stamp, .ab__facts, .stk, .tl { grid-template-columns: minmax(0, 1fr); }
    .tl__i { padding: 1.25rem 0 1.25rem 1rem; border-left: 2px solid var(--ink); }
    .tl { border-top: 0; }
    .tl__i::before { top: 0; left: -2px; width: 1rem; height: 2px; }
}

/* Появление блоков на скролле — только если человек не просил их выключить. */
@media (prefers-reduced-motion: no-preference) {
    .ab .tl__i,
    .ab .spec__row,
    .ab .stk__g,
    .ab__facts li {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .ab .is-seen { opacity: 1; transform: none; }
}

/* ═══ О КОМПАНИИ 2026-08-19: порядок работы, отличия, результаты, фильтр ═══
   Страница отвечала «кто мы» и молчала о том, что будет после письма и чем
   эта команда отличается от соседней. Новые блоки держат ту же метафору
   технического паспорта: нумерованные разделы, моно-подписи, никаких
   декоративных карточек ради карточек. */

/* ── порядок работы ── */
/* Ритм секций: правило .ab > section (вес 0,1,1) перебивало одиночный класс
   (0,1,0), и весь плотный ритм блоков 2026-08-19 не применялся — все 11
   секций шли одинаковыми полосами по 6rem. Возвращаем задуманное селектором
   той же весовой категории: блоки-таблицы со своей рамкой и внутренними
   отступами получают 4rem, воздушные разделы остаются на 6rem. */
/* .ab__flow: отдельный отступ снят — ритм задаёт .ab > section */
.flow {
    counter-reset: fl;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: #08090b1f;
    border: 1px solid #08090b1f;
}
.flow__i {
    counter-increment: fl;
    display: grid;
    grid-template-columns: 3rem minmax(150px, .7fr) minmax(110px, .35fr) minmax(0, 1.8fr);
    gap: clamp(.6rem, 1.8vw, 1.5rem);
    align-items: baseline;
    padding: clamp(.9rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
    background: var(--paper);
}
.flow__i::before {
    content: counter(fl, decimal-leading-zero);
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    color: var(--lit);
}
.flow__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.flow__d {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lit);
}
.flow__x { font-size: .9375rem; line-height: 1.55; color: #08090bbd; }

/* ── отличия ── */
/* .ab__diff: отдельный отступ снят — ритм задаёт .ab > section */
.diff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1px;
    background: #08090b1f;
    border: 1px solid #08090b1f;
}
.diff__i { padding: clamp(1.25rem, 2.4vw, 1.6rem); background: var(--paper); }
.diff__n {
    display: block;
    margin-bottom: .55rem;
    font-family: var(--mono);
    font-size: .65625rem;
    letter-spacing: .16em;
    color: var(--lit);
}
.diff__t { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.diff__d { margin: 0; font-size: .9375rem; line-height: 1.58; color: #08090bbd; }

/* ── результаты клиентов ── */
/* .ab__proof: отдельный отступ снят — ритм задаёт .ab > section */
.proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: #EDEDEA26;
    border: 1px solid #EDEDEA26;
}
.proof__i {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: clamp(1.15rem, 2.4vw, 1.5rem);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    transition: background .18s ease;
}
.proof__i:hover { background: #12141a; }
.proof__v {
    font-family: var(--mono);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1;
    color: var(--acid);
}
.proof__l { font-size: .875rem; line-height: 1.4; color: #EDEDEAd6; }
.proof__w {
    margin-top: auto;
    padding-top: .5rem;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .06em;
    color: #EDEDEA85;
}
.proof__i:hover .proof__w { color: var(--acid); }
.proof__note {
    margin: .9rem 0 0;
    font-family: var(--mono);
    font-size: .6875rem;
    line-height: 1.6;
    color: var(--soft);
}

/* ── кому подходим ── */
/* .ab__fit: отдельный отступ снят — ритм задаёт .ab > section */
.fit {
    display: grid;
    /* Ровно две колонки — «сработаемся» и «лучше не начинать».
       auto-fit нарезал третий трек и гасил его в 0px: раскладка держалась
       на схлопывании пустого трека, а не на разметке. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #08090b1f;
    border: 1px solid #08090b1f;
}
.fit__c { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--paper); }
.fit__h {
    margin: 0 0 1rem;
    font-family: var(--mono);
    font-size: .65625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.fit__c--yes .fit__h { color: var(--lit); }
.fit__c--no .fit__h { color: var(--soft); }
.fit__c ul { margin: 0; padding: 0; list-style: none; }
.fit__c li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .7rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: #08090bc4;
}
.fit__c li::before {
    position: absolute;
    left: 0;
    top: -.05em;
    font-family: var(--mono);
    font-size: .9375rem;
}
.fit__c--yes li::before { content: '+'; color: var(--lit); font-weight: 700; }
.fit__c--no li::before { content: '–'; color: #08090b52; }

/* ── вопросы ── */
/* .ab__faq: отдельный отступ снят — ритм задаёт .ab > section */
.abq {
    display: grid;
    gap: 1px;
    background: #08090b1f;
    border: 1px solid #08090b1f;
}
.abq details { background: var(--paper); }
.abq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2.2vw, 1.25rem);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
    cursor: pointer;
    list-style: none;
}
.abq summary::-webkit-details-marker { display: none; }
.abq summary::after { content: '+'; font-family: var(--mono); font-size: 1.25rem; color: var(--lit); }
.abq details[open] summary::after { content: '–'; }
.abq p {
    margin: 0;
    padding: 0 clamp(1rem, 2.2vw, 1.25rem) clamp(1rem, 2.2vw, 1.25rem);
    max-width: 78ch;
    font-size: .9375rem;
    line-height: 1.65;
    color: #08090bc4;
}

/* ── куда дальше ── */
/* Навигация «куда дальше» — хвост страницы, а не ещё один раздел: своей
   верхней линейки не держит. Рамка .ab__in и border-top секции стояли
   вплотную и давали двойной волосок в 2px. */
.ab > .ab__next { padding: 0 0 clamp(2.5rem, 5vw, 4rem); border-top: 0; }
.ab__next .ab__in {
    display: grid;
    /* Три ссылки в разметке — три колонки. auto-fit при 1179px контента
       нарезал четыре трека и гасил последний в 0px. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #08090b1f;
    border: 1px solid #08090b1f;
}
.nxt {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: clamp(1.15rem, 2.4vw, 1.6rem);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: background .18s ease;
}
.nxt:hover { background: var(--ink); color: var(--paper); }
.nxt__k {
    font-family: var(--mono);
    font-size: .65625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lit);
}
.nxt:hover .nxt__k { color: var(--acid); }
.nxt__t { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }

@media (max-width: 760px) {
    .flow__i { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .flow__d { grid-column: 2; }
    .flow__x { grid-column: 2; }
    /* Три карточки «куда дальше» в две колонки давали сироту и пустую
       ячейку — на узком экране разворачиваем в столбец. */
    .ab__next .ab__in { grid-template-columns: minmax(0, 1fr); }
}

/* ── FIX 2026-08-24: сетки без дыр + чипы стека как ссылки ──────────────
   auto-fit при 5-6 карточках оставлял пустые ячейки, сквозь которые
   просвечивал фон-подложка gap-сетки (серая дыра в «Чем отличаемся»).
   Колонки фиксированные — ряды всегда полные: diff 6 карт = 3×2 / 2×3 / 1,
   proof 4 карты = 4 / 2×2 / 1. */
.diff  { grid-template-columns: repeat(3, 1fr); }
.proof { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
    .diff  { grid-template-columns: repeat(2, 1fr); }
    .proof { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    .diff  { grid-template-columns: 1fr; }
    .proof { grid-template-columns: 1fr; }
    /* .fit больше не auto-fit — колонку на узком экране схлопываем руками.
       Порог тот же, на котором auto-fit(minmax(300px)) ломался сам. */
    .fit   { grid-template-columns: 1fr; }
}

/* Чип стека целиком кликабелен; пунктир — аффорданс ссылки. */
.stk__l li a {
    display: block;
    margin: -.3125rem -.625rem;
    padding: .3125rem .625rem;
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #08090b59;
    text-underline-offset: 3px;
}
.stk__l li:hover a {
    text-decoration-style: solid;
    text-decoration-color: var(--ink, #08090b);
}