/* =====================================================================
   komanda.css — страница «Команда» /komanda (редизайн 28.10.2026, доводка 29.10.2026).
   Структура по референсу noboring-finance.ru/about (поблочно), оформление — наше:
   #0a0a0a, белый, мятный #00E5A4 / #00B884, Inter, шкала typography.css, первый экран zvk-hero.

   Блоки (только про команду): первый экран (основатели без фона справа от текста) →
   цифры (3 карточки) → ценности (3 равные карточки, как на /cennosti) → кто за что отвечает
   (бенто с вырезками + «Сообщество») → как мы работаем (путь «Код Персонала» из 5 этапов) →
   история (тёмная карточка: текст + этапы 01–03) → карточки команды (3D-карусель как на главной, пререндер из data/team.json) →
   «Работать вместе» (тёмный призыв).
   Приёмы: стеклянные подписи (Apple), бенто; команда — общая
   3D-карусель главной (VengeanceUI perspective-carousel, MIT): team-carousel.css + team-carousel.js.
   ===================================================================== */

#team-page {
    --km-ink: #0a0a0a; --km-ink-2: #3b4552; --km-mute: #5a6a7a; --km-line: #e6eaf0;
    --km-mint: #00E5A4; --km-mint-dark: #00B884; --km-mint-ink: #00805c; --km-soft: #f5f7fa;
    --km-r: clamp(24px, 2.6vw, 32px);
    --km-ease: cubic-bezier(.32, .72, 0, 1);
}
.km-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .km-wrap { padding: 0 32px; } }
#team-page :is(h1, h2, h3) { hyphens: none !important; -webkit-hyphens: none !important; overflow-wrap: normal !important; word-break: normal !important; }

.km-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--km-mint-dark); }
.km-eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--km-mint); box-shadow: 0 0 0 4px rgba(0, 229, 164, .15); }
.km-eyebrow--dark { color: var(--km-mint); }
.km-head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 52px); }
.km-head--center { margin-inline: auto; text-align: center; }
.km-head--center .km-eyebrow { justify-content: center; }
/* заголовок слева, ссылка «Все …» справа на одной линии с низом текста */
.km-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.km-head--split > div { max-width: 720px; }
.km-head--split > .km-link { flex: none; }
#team-page .km-h2 { margin: 0 !important; color: var(--km-ink); text-wrap: balance; }
.km-head .km-sub { margin: 16px 0 0; color: var(--km-ink-2); text-wrap: pretty; }
.km-head--center .km-sub { margin-inline: auto; max-width: 640px; }

.km-sec { padding: clamp(64px, 8vw, 112px) 0; background: #fff; }
.km-sec--soft { background: var(--km-soft); }

.km-link { display: inline-flex; align-items: center; gap: 8px; color: var(--km-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.km-link span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--km-ink); color: #fff; transition: transform .45s var(--km-ease), background .3s, color .3s; }
.km-link svg { width: 15px; height: 15px; }
.km-link:hover span { transform: translateX(4px); background: var(--km-mint); color: var(--km-ink); }

/* ---------- 1. Первый экран: текст слева, основатели справа на нижней кромке ---------- */
.km-hero.zvk-hero { padding-bottom: 0; }
.km-hero .km-wrap { display: flex; flex-direction: column; }
.km-hero__top { display: grid; gap: 24px; }
:root body .km-hero h1.zvk-hero__title { margin: 0 !important; }
.km-hero .zvk-hero__lead { margin-top: 20px; }
.km-hero__aside { display: grid; gap: 20px; justify-items: start; }
.km-hero__tag { display: inline-flex; align-items: center; gap: 12px; margin: 0; max-width: 430px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--km-ink); text-align: left; }
.km-hero__tag-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--km-ink); color: var(--km-mint); }
.km-hero__tag-ic svg { width: 20px; height: 20px; }
.km-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* сцена: первый основатель впереди и крупнее, второй за ним правее; без подписей (имена — в alt) */
.km-stage { container-type: inline-size; position: relative; margin-top: 32px; }
.km-stage__row {
    --h: min(460px, calc(100cqi / (.88 + (var(--n, 2) - 1) * .48)));
    position: relative; isolation: isolate; list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: flex-end; height: var(--h);
}
.km-stage__row::before { /* мягкое мятное свечение за фигурами — внутри блока */
    content: ""; position: absolute; z-index: -1; left: 50%; bottom: -38%; width: 112%; aspect-ratio: 1.5;
    transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 229, 164, .38), rgba(0, 229, 164, .12) 55%, rgba(0, 229, 164, 0));
    pointer-events: none;
}
.km-fig { position: relative; z-index: var(--z, 1); flex: none; height: calc(var(--h) * .94); }
.km-fig--lead { height: var(--h); }
.km-fig + .km-fig { margin-left: calc(var(--h) * -.34); }
.km-fig__in { position: relative; display: block; height: 100%; color: inherit; text-decoration: none; }
a.km-fig__in img { transition: transform .6s var(--km-ease); transform-origin: 50% 100%; }
a.km-fig__in:hover img, a.km-fig__in:focus-visible img { transform: scale(1.02); }
a.km-fig__in:focus-visible { outline: 2px solid var(--km-mint-dark); outline-offset: 4px; border-radius: 12px; }
.km-fig picture { display: contents; }
.km-fig img {
    display: block; height: 100%; width: auto; max-width: none;
    filter: drop-shadow(0 22px 34px rgba(10, 10, 10, .22));
}

@media (min-width: 980px) {
    /* текстовая колонка по ширине кнопок, фигуры — сразу за ней (~32px), справа остаётся узор */
    .km-hero .km-wrap {
        display: grid; grid-template-columns: minmax(0, 490px) minmax(0, 1fr); grid-template-rows: auto 1fr;
        column-gap: 32px;
    }
    .km-stage__row { justify-content: flex-start; }
    @media (max-width: 1179px) {
        .km-hero .km-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 24px; }
    }
    .km-hero #breadcrumbsContainer { grid-area: 1 / 1; }
    .km-hero__top { grid-area: 2 / 1; align-self: center; gap: 28px; padding-bottom: clamp(52px, 6vw, 84px); }
    /* сцена — правая колонка на всю высоту, фигуры у её левого края */
    .km-stage { grid-area: 1 / 2 / 3 / 3; align-self: end; margin: 0; }
    .km-stage__row { --h: min(600px, calc(100cqi / (.88 + (var(--n, 2) - 1) * .48))); }
}
@media (max-width: 599px) {
    .km-stage__row { --h: calc(100cqi / (.86 + (var(--n, 2) - 1) * .5)); }
    .km-fig + .km-fig { margin-left: calc(var(--h) * -.34); }
    .km-stage { order: 2; margin-top: 20px; }
}

/* ---------- 2. Цифры ---------- */
.km-sec--facts { padding: clamp(28px, 3.4vw, 44px) 0 0; }
.km-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .km-facts { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.km-fact {
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
    min-height: 220px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--km-r);
    background: #fff; border: 1px solid var(--km-line); box-shadow: 0 30px 60px -50px rgba(10, 10, 10, .45);
}
.km-facts > li:not(.km-fact) { display: flex; }
.km-facts > li > a.km-fact { flex: 1; }
.km-fact > :first-child { margin-bottom: auto; }
.km-fact__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; background: rgba(0, 229, 164, .16); color: var(--km-mint-ink); }
.km-fact__ic svg { width: 32px; height: 32px; stroke-width: 1.8; }
.km-fact__ic--dark { background: rgba(0, 229, 164, .14); color: var(--km-mint); }
.km-fact__val { font-size: clamp(48px, 5.4vw, 72px); font-weight: 700; line-height: .95; letter-spacing: -.045em; color: var(--km-ink); }
.km-fact__unit { font-size: .4em; font-weight: 700; letter-spacing: -.02em; margin-left: 8px; }
.km-fact__txt { max-width: 280px; font-size: 15px; line-height: 1.45; color: var(--km-ink-2); }
.km-fact__faces { display: flex; align-items: center; gap: 12px; }
.km-fact__faces ul { list-style: none; display: flex; margin: 0; padding: 0; }
.km-fact__faces li + li { margin-left: -12px; }
.km-fact__faces { min-height: 64px; }
.km-fact__faces img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; background: #e8ecf2; }
.km-fact__faces span { font-size: 12.5px; line-height: 1.3; color: var(--km-mute); max-width: 120px; }
.km-fact--dark { background: var(--km-ink); border-color: var(--km-ink); text-decoration: none; transition: transform .45s var(--km-ease); }
.km-fact--dark::before { content: ""; position: absolute; z-index: -1; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 229, 164, .3), rgba(0, 229, 164, 0)); pointer-events: none; }
.km-fact--dark:hover { transform: translateY(-3px); }
.km-fact--dark .km-fact__val { color: #fff; }
.km-fact--dark .km-fact__txt { color: rgba(255, 255, 255, .72); }
.km-fact__go { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--km-mint); color: var(--km-ink); transition: transform .45s var(--km-ease); }
.km-fact__go svg { width: 16px; height: 16px; }
.km-fact--dark:hover .km-fact__go { transform: translateY(3px); }

/* ---------- 3. Ценности: три равные карточки (как на /cennosti) ---------- */
.km-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .km-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.km-values > li { display: flex; }
.km-value {
    position: relative; overflow: hidden; isolation: isolate; flex: 1; display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(24px, 2.6vw, 32px); border-radius: var(--km-r); background: #fff; border: 1px solid var(--km-line);
    color: var(--km-ink); text-decoration: none; box-shadow: 0 30px 60px -50px rgba(10, 10, 10, .45);
    transition: transform .5s var(--km-ease), border-color .3s, box-shadow .5s;
}
.km-value::before { /* мятное пятно в углу — проявляется при наведении */
    content: ""; position: absolute; z-index: -1; right: -30%; top: -45%; width: 75%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 229, 164, .22), rgba(0, 229, 164, 0)); opacity: 0; transition: opacity .5s;
}
.km-value:hover, .km-value:focus-visible { transform: translateY(-4px); border-color: var(--km-mint); box-shadow: 0 34px 64px -44px rgba(0, 184, 132, .55); }
.km-value:hover::before, .km-value:focus-visible::before { opacity: 1; }
.km-value__top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: clamp(24px, 3vw, 36px); }
.km-value__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(0, 229, 164, .16); color: var(--km-mint-ink); transition: background .3s, color .3s; }
.km-value__ic svg { width: 26px; height: 26px; }
.km-value:hover .km-value__ic, .km-value:focus-visible .km-value__ic { background: var(--km-mint); color: var(--km-ink); }
.km-value__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--km-line); font-size: 14px; font-weight: 700; color: var(--km-mute); }
#team-page .km-value h3 { margin: 0 0 6px !important; color: var(--km-ink); }
.km-value__kicker { display: block; margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--km-mint-ink); }
.km-value p.km-value__text { margin: 0 0 24px; color: var(--km-ink-2); text-wrap: pretty; }
.km-value__go { margin-top: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--km-soft); color: var(--km-ink); transition: transform .45s var(--km-ease), background .3s; }
.km-value__go svg { width: 16px; height: 16px; }
.km-value:hover .km-value__go, .km-value:focus-visible .km-value__go { background: var(--km-mint); transform: translateX(4px); }

/* ---------- 4. Чем занимается команда: бенто + «Сообщество» ---------- */
.km-dirs { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1180px) { .km-dirs { grid-template-columns: 2fr 1fr; gap: 18px; } }
/* 700–1179: «Сообщество» под левой частью — 3 + 2 без пустых ячеек */
@media (min-width: 700px) and (max-width: 1179px) { .km-dirs .km-comm { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .km-comm__title { grid-column: 1 / -1; } .km-comm a { grid-column: span 2; } .km-comm a:nth-last-child(-n + 2) { grid-column: span 3; } }
.km-dirs__main { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .km-dirs__main { grid-template-columns: 1fr 1fr; gap: 18px; } }
.km-dcard {
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
    min-height: 300px; padding: clamp(24px, 2.6vw, 32px); padding-right: 50%; border-radius: var(--km-r);
    color: var(--km-ink); text-decoration: none; background: #fff; border: 1px solid var(--km-line);
    transition: transform .5s var(--km-ease), box-shadow .5s;
}
.km-dcard:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -48px rgba(0, 128, 92, .55); }
.km-dcard--wide { grid-column: 1 / -1; min-height: 340px; padding-right: 50%; background: var(--km-ink); border-color: var(--km-ink); color: #fff; }
.km-dcard--wide::before { content: ""; position: absolute; z-index: -2; right: -6%; bottom: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 229, 164, .55), rgba(0, 229, 164, 0)); }
.km-dcard--mint { background: var(--km-mint); border-color: var(--km-mint); }
.km-dcard--soft { background: #eef2f6; border-color: #eef2f6; }
.km-dcard__tag { display: inline-flex; margin: 0 0 14px; padding: 5px 10px; border-radius: 999px; background: rgba(10, 10, 10, .08); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.km-dcard--wide .km-dcard__tag { background: rgba(255, 255, 255, .1); color: var(--km-mint); }
#team-page .km-dcard h3 { margin: 0 0 10px !important; color: inherit; }
#team-page .km-dcard--wide h3 { font-size: clamp(26px, 2.8vw, 36px) !important; line-height: 1.1 !important; letter-spacing: -.025em !important; }
.km-dcard p.km-dcard__text { margin: 0; color: inherit; opacity: .78; }
.km-dcard__who { margin-top: auto; padding-top: 18px; font-size: 13px; line-height: 1.35; opacity: .7; }
.km-dcard__who b { display: block; font-size: 14px; opacity: 1; }
.km-dcard__cut { position: absolute; z-index: -1; right: 0; bottom: 0; height: 80%; width: auto; max-width: 52%; object-fit: contain; object-position: right bottom; pointer-events: none; transition: transform .7s var(--km-ease); }
.km-dcard--wide .km-dcard__cut { right: 4%; height: 100%; max-width: 50%; }
.km-dcard:hover .km-dcard__cut { transform: scale(1.03); transform-origin: 50% 100%; }
/* малые карточки: одна рамка у всех вырезок (пропорции самой узкой — Парипа 617×900), заполнение по высоте —
   фигуры одного масштаба, макушки на одной линии, один отступ справа; у широкой вырезки срезаются края плеч */
/* текст — на всю ширину карточки, фигура — внизу справа, место под неё держит только подпись с именем
   (узкая колонка текста «в два слова» смотрелась несуразно — замечание владельца 27.10.2026) */
.km-dcard:not(.km-dcard--wide) { --fig-h: 236px; --fig-r: .686; min-height: 420px; padding-right: clamp(24px, 2.6vw, 32px); }
.km-dcard--soft:not(.km-dcard--wide) { --fig-r: .891; } /* вырезка Анастасии 802×900, Парипы 617×900 */
.km-dcard:not(.km-dcard--wide) h3 { padding-right: 52px; }
.km-dcard:not(.km-dcard--wide) .km-dcard__who { padding-right: calc(var(--fig-h) * var(--fig-r) - 4px); }
.km-dcard:not(.km-dcard--wide) .km-dcard__cut { right: 6px; height: var(--fig-h); width: auto; max-width: none; object-fit: contain; object-position: 50% 100%; }
@media (min-width: 521px) and (max-width: 899px) { .km-dcard:not(.km-dcard--wide) { --fig-h: 200px; min-height: 400px; } }
.km-dcard__go { position: absolute; z-index: 2; top: clamp(20px, 2.4vw, 28px); right: clamp(20px, 2.4vw, 28px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(10, 10, 10, .08); transition: transform .45s var(--km-ease), background .3s; }
.km-dcard--wide .km-dcard__go { background: var(--km-mint); color: var(--km-ink); }
.km-dcard__go svg { width: 16px; height: 16px; }
.km-dcard:hover .km-dcard__go { transform: rotate(-45deg); }
@media (max-width: 520px) {
    .km-dcard, .km-dcard--wide { padding-right: clamp(24px, 2.6vw, 32px); padding-bottom: 0; min-height: 0; }
    .km-dcard__cut, .km-dcard--wide .km-dcard__cut { position: relative; right: auto; height: auto; width: 50%; max-width: none; margin: 8px -4px 0 auto; align-self: flex-end; }
    .km-dcard:not(.km-dcard--wide) { padding-right: clamp(24px, 2.6vw, 32px); min-height: 0; }
    .km-dcard:not(.km-dcard--wide) .km-dcard__who { padding-right: 0; }
    .km-dcard:not(.km-dcard--wide) .km-dcard__cut { position: relative; right: auto; height: 200px; width: auto; margin: 8px 2px 0 auto; align-self: flex-end; }
    .km-dcard__who { padding-top: 14px; }
}
.km-comm { align-self: stretch; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--km-r); background: var(--km-soft); border: 1px solid var(--km-line); }
@media (min-width: 1180px) { .km-comm a { flex: 1; } }
.km-comm__title { margin: 4px 6px 4px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--km-mute); }
.km-comm a { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 18px 18px 18px 20px; border-radius: 20px; background: #fff; color: var(--km-ink); text-decoration: none; box-shadow: 0 16px 36px -30px rgba(10, 10, 10, .5); transition: transform .45s var(--km-ease), box-shadow .45s; }
.km-comm a:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(0, 128, 92, .6); }
.km-comm a > span:first-child { display: grid; gap: 4px; }
.km-comm b { font-size: 16px; font-weight: 700; line-height: 1.3; }
.km-comm small { font-size: 13.5px; line-height: 1.4; color: var(--km-mute); }
.km-comm__pic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--km-ink); color: var(--km-mint); }
.km-comm__pic img { width: 100%; height: 100%; object-fit: cover; }
.km-comm__pic--icon { background: #fff; border: 1px solid var(--km-line); }
.km-comm__pic--icon img { width: 30px; height: 30px; object-fit: contain; }
.km-comm__pic svg { width: 28px; height: 28px; }
/* площадки — в фирменных цветах, как .social-pill (site-chrome.css): один квадрат, глиф ~56 % */
.km-comm__pic:is(.km-comm__pic--vk, .km-comm__pic--max, .km-comm__pic--dzen) { color: #fff; border: 0; }
.km-comm__pic:is(.km-comm__pic--vk, .km-comm__pic--max, .km-comm__pic--dzen) :is(svg, img) { width: 36px; height: 36px; object-fit: contain; }
.km-comm__pic--vk { background: #0077FF; }
.km-comm__pic--max { background: linear-gradient(135deg, #2DD9FF, #4B54E8 55%, #A62BD9); }
.km-comm__pic--dzen { background: #000; }
.km-comm__pic--books { background: #e9f9f2; }
.km-comm__pic--books img { object-fit: contain; padding: 4px; }

/* ---------- 5. Как мы работаем: путь «Код Персонала» из 5 этапов (стиль этапов главной) ---------- */
.km-path { --gap: 14px; --dot: 36px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.km-path::before { /* линия-прогресс: от центра первой точки до центра последней */
    content: ""; position: absolute; top: calc(var(--dot) / 2 - 1.5px); height: 3px; border-radius: 3px;
    left: calc((100% - 4 * var(--gap)) / 10); right: calc((100% - 4 * var(--gap)) / 10);
    background: linear-gradient(90deg, var(--km-mint), var(--km-mint-dark));
}
.km-path__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.km-path__dot {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%;
    background: #fff; border: 2px solid var(--km-mint-dark); color: var(--km-ink); font-size: 14px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 6px #fff;
}
.km-path__item:first-child .km-path__dot { background: var(--km-mint); border-color: var(--km-mint); }
.km-step {
    position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 22px 20px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--km-line);
    color: var(--km-ink); text-decoration: none; box-shadow: 0 30px 60px -50px rgba(10, 10, 10, .45);
    transition: transform .5s var(--km-ease), border-color .3s, box-shadow .5s;
}
.km-step:hover, .km-step:focus-visible { transform: translateY(-4px); border-color: var(--km-mint); box-shadow: 0 34px 64px -44px rgba(0, 184, 132, .55); }
.km-step__num { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 28px; background: var(--km-mint); color: var(--km-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.km-step__title { margin-top: 6px; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.km-step__sub { font-size: 13.5px; line-height: 1.4; color: var(--km-mute); }
.km-step__go { margin-top: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--km-soft); color: var(--km-ink); transition: transform .45s var(--km-ease), background .3s; }
.km-step__go svg { width: 15px; height: 15px; }
.km-step:hover .km-step__go, .km-step:focus-visible .km-step__go { background: var(--km-mint); transform: translateX(4px); }
.km-step--free { overflow: hidden; isolation: isolate; background: var(--km-ink); border-color: var(--km-ink); color: #fff; }
.km-step--free::before { content: ""; position: absolute; z-index: 0; inset: auto -30% -60% auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 229, 164, .35), rgba(0, 229, 164, 0)); pointer-events: none; }
.km-step--free > * { position: relative; }
.km-step--free .km-step__sub { color: var(--km-mint); font-weight: 600; }
.km-step--free .km-step__go { background: var(--km-mint); }
.km-step--free:hover { border-color: var(--km-ink); }
.km-vac {
    display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: clamp(20px, 2.4vw, 28px) auto 0;
    padding: 8px 8px 8px 8px; border-radius: 999px; background: var(--km-soft); border: 1px solid var(--km-line);
    color: var(--km-ink-2); font-size: 15px; line-height: 1.3; text-decoration: none; transition: border-color .3s, background .3s;
}
.km-vac b { color: var(--km-ink); font-weight: 700; margin-left: -6px; }
.km-vac__ic, .km-vac__go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.km-vac__ic { background: var(--km-ink); color: var(--km-mint); }
.km-vac__go { margin-left: 4px; background: #fff; color: var(--km-ink); transition: transform .45s var(--km-ease), background .3s; }
.km-vac svg { width: 14px; height: 14px; }
.km-vac:hover { border-color: var(--km-mint); background: #fff; }
.km-vac:hover .km-vac__go { background: var(--km-mint); transform: translateX(3px); }
@media (min-width: 900px) and (max-width: 1100px) { .km-path { --gap: 10px; } .km-step { padding: 18px 14px 16px; } .km-step__title { font-size: 15.5px; } .km-step__sub { font-size: 13px; } }
@media (max-width: 899px) { /* вертикальный путь: линия слева, карточки столбиком */
    .km-path { grid-template-columns: 1fr; --gap: 12px; }
    .km-path::before { content: none; }
    .km-path__item { flex-direction: row; align-items: stretch; gap: 14px; }
    .km-path__dot { margin-top: 18px; }
    .km-path__item:not(:last-child)::after {
        content: ""; position: absolute; left: calc(var(--dot) / 2 - 1.5px); width: 3px;
        top: calc(18px + var(--dot) / 2); bottom: calc(-1 * (var(--gap) + 18px + var(--dot) / 2));
        background: linear-gradient(var(--km-mint), var(--km-mint-dark));
    }
    .km-step { padding: 18px 64px 18px 18px; gap: 6px; }
    .km-step__title { margin-top: 4px; }
    .km-step__go { position: absolute; right: 16px; top: 50%; margin: -17px 0 0; }
    .km-step:hover .km-step__go, .km-step:focus-visible .km-step__go { transform: translateX(3px); }
    .km-vac { width: 100%; }
    .km-vac__go { margin-left: auto; }
}

/* ---------- 6. История: компактная тёмная карточка — текст и кнопка слева, этапы 01–03 справа ---------- */
.km-story { --zvk-tex-opacity: .6; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--km-r); background: var(--km-ink); color: #fff; }
.km-story::after { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -55%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 229, 164, .22), rgba(0, 229, 164, 0)); pointer-events: none; }
.km-story__top { display: grid; grid-template-columns: 1fr; gap: 28px 56px; padding: clamp(28px, 4.4vw, 56px); }
@media (min-width: 980px) { .km-story__top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }
.km-story__top > div { display: flex; flex-direction: column; align-items: flex-start; }
#team-page .km-story .km-h2 { color: #fff; }
.km-story__cap { display: block; margin-top: 14px; max-width: 420px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.km-story__btn { margin-top: 28px; }
.km-story__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: st; }
.km-story__steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.km-story__steps li::before { counter-increment: st; content: "0" counter(st); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 229, 164, .14); color: var(--km-mint); font-size: 14px; font-weight: 700; }
.km-story__steps b { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; }
.km-story__steps span { display: block; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
@media (max-width: 640px) { .km-story__btn { width: 100%; } }

/* ---------- 7. Команда: 3D-карусель, как на главной (assets/css/team-carousel.css, пререндер из data/team.json) ---------- */
#komanda .pc { margin-top: 0; }

/* ---------- 8. Работать вместе: ровная сетка, одинаковые поля ---------- */
.km-join {
    --pad: clamp(28px, 4.4vw, 56px);
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 1fr; border-radius: var(--km-r); color: #fff;
    background: radial-gradient(70% 110% at 100% 0%, rgba(0, 229, 164, .24), rgba(0, 229, 164, 0) 60%), radial-gradient(50% 80% at 0% 100%, rgba(0, 229, 164, .1), rgba(0, 229, 164, 0) 60%), #0a0a0a;
}
@media (min-width: 900px) { .km-join { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 360px); } }
.km-join__text { display: flex; flex-direction: column; align-items: flex-start; padding: var(--pad); }
#team-page .km-join .km-h2 { color: #fff; }
.km-join__text p { max-width: 600px; margin: 16px 0 0; color: rgba(255, 255, 255, .72); }
.km-join__text p a { color: #fff; text-decoration: none; border-bottom: 1.5px solid var(--km-mint); white-space: nowrap; }
.km-join__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.km-join__media { position: relative; display: none; }
@media (min-width: 900px) { .km-join__media { display: block; } }
.km-join__media::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -10%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 229, 164, .42), rgba(0, 229, 164, 0)); }
/* вырезка Захара: стоит на нижней кромке, не шире своей колонки */
.km-join__media img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: calc(100% - var(--pad) * .5); width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }

@media (max-width: 640px) {
    .km-cta .btn, .km-join__cta .btn { width: 100%; }
    .km-facts .km-fact { min-height: 190px; }
    .km-fact__ic { width: 56px; height: 56px; border-radius: 17px; }
    .km-fact__ic svg { width: 28px; height: 28px; }
    .km-fact__faces { min-height: 56px; }
    .km-fact__faces img { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    #team-page * { transition: none !important; }
    .km-value:hover, .km-step:hover, .km-dcard:hover, .km-fact--dark:hover { transform: none; }
}
@media print { .km-stage__row::before { display: none; } }