/* ===================================================================================================
   ВИТРИННЫЙ СЛОЙ — публичные страницы Olista (брендбук §8; заказ KisaPs/Center.Design#57)

   Поверх design.css, а не вместо: те же токены цвета, те же гарнитуры, тот же словарь .ds-*. Подключается
   ТОЛЬКО публичными страницами (главная olista.ru, страницы продуктов, страница Конструктора гостю)
   ПОСЛЕ design.css:

       <link rel="stylesheet" href="/_content/Center.Design/design.css" />
       <link rel="stylesheet" href="/_content/Center.Design/public.css" />

   Рабочие места его не грузят: плотному интерфейсу витринная типографика не нужна, а вес — лишний.

   Имена — префикс mk- («маркетинг»), и это граница, а не вкус: словарь .ds-* — шесть имён рабочего
   экрана, седьмое заводится замером (брендбук §7). Витрине свои имена, и в рабочем месте их не бывает.

   Цвета градиента (--mk-glow/--mk-mid/--mk-deep) объявлены в design.css рядом с акцентом приложения:
   оттенок объявляется ОДИН раз. Здесь только то, что от приложения не зависит.

   Движение: общее правило prefers-reduced-motion в design.css гасит всё, в том числе вращение колец и
   бегущие события. Появление при прокрутке — механизм design.js (data-ds-reveal), второго нет.
   =================================================================================================== */

:root {
    /* Витринная типографика — Geologica 700–800, крупнее рабочих --ds-h1 30. Только здесь. */
    --mk-display-xl: clamp(56px, 9vw, 132px);
    --mk-display-l: clamp(40px, 5.2vw, 76px);
    --mk-tracking-xl: -0.045em;
    --mk-tracking-l: -0.04em;
    --mk-lead: clamp(18px, 1.7vw, 21px);

    /*
        Витринная тёмная полоса — темнее --ds-bg тёмной темы (#121815): лента работ и блоки возможностей
        должны оставаться полосой и на тёмной странице. От темы не зависит.
    */
    --mk-ink: #0b100d;
    --mk-ink-2: #161d1a;
    --mk-ink-line: #2a3430;
    --mk-ink-text: #eef1ec;
    --mk-ink-muted: #9aa59d;

    /* Радиусы витрины: 28 — плитки бенто и карточки чисел, 40 — полосы призыва. */
    --mk-radius-xl: 28px;
    --mk-radius-band: 40px;

    --mk-page: 1240px;
    --mk-gutter: clamp(16px, 3vw, 32px);
    --mk-section: clamp(64px, 9vw, 104px);
    --mk-shadow: 0 30px 80px -30px rgb(15 21 18 / 35%);
    --mk-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --mk-shadow: 0 30px 80px -30px rgb(0 0 0 / 80%); }
}

:root[data-theme="dark"] { --mk-shadow: 0 30px 80px -30px rgb(0 0 0 / 80%); }

.mk-wrap {
    max-width: var(--mk-page);
    margin-inline: auto;
    padding-inline: var(--mk-gutter);
}

.mk-section { padding-block: var(--mk-section); }

/* ---------- Заголовки ---------- */

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 12.5px/1 var(--ds-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

.mk-eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-accent-fill);
}

/*
    Главная: заголовок растёт с окном до --mk-display-xl, но не шире своей колонки (19cqi — самое длинное
    слово заголовка главной, «свободно», при 800 весе занимает около пяти кеглей). Замер витрины
    2026-09-30: на 1440 чистые 9vw давали 130px и слово вылезало из колонки на соседние кольца.
*/
.mk-display {
    margin: 22px 0 0;
    font: 800 max(40px, min(var(--mk-display-xl), 19cqi))/.9 var(--ds-font-display);
    letter-spacing: var(--mk-tracking-xl);
    text-wrap: balance;
    overflow-wrap: normal;
    hyphens: manual;
}

/* Акцентное слово главной — градиент по оттенкам листа, воды и неба (краски фона, не текста: заголовок крупный). */
.mk-display em {
    font-style: normal;
    background: linear-gradient(100deg, #1d7d3e, #047879 45%, #0070a6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Тёмная тема — те же три оттенка тёмной формулы (--ds-accent-fill тёмной темы, брендбук §3). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mk-display em { background-image: linear-gradient(100deg, #7ccd8e, #3bcfcf 45%, #69c1fc); }
}

:root[data-theme="dark"] .mk-display em { background-image: linear-gradient(100deg, #7ccd8e, #3bcfcf 45%, #69c1fc); }

/*
    Страница продукта: заголовок от ширины СВОЕЙ колонки (правило 3 заказа). Размер — cqi, перенос внутри
    слова запрещён: «верстальщик|а» было следствием overflow-wrap, а не нехватки места. Самое длинное слово
    влезает, потому что кегль считается от колонки, а не от окна.
*/
.mk-hero-copy { container-type: inline-size; }

.mk-title {
    margin: 20px 0 0;
    font: 800 clamp(30px, 11.5cqi, 76px)/.98 var(--ds-font-display);
    letter-spacing: var(--mk-tracking-xl);
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.mk-title em { font-style: normal; color: var(--ds-accent); }

.mk-h2 {
    margin: 0;
    font: 700 var(--mk-display-l)/1 var(--ds-font-display);
    letter-spacing: var(--mk-tracking-l);
    text-wrap: balance;
    overflow-wrap: normal;
}

.mk-lead {
    max-width: 540px;
    margin: 26px 0 34px;
    font-size: var(--mk-lead);
    line-height: 1.5;
    color: var(--ds-muted);
}

.mk-note { margin: 18px 0 0; font-size: 14px; color: var(--ds-muted); }

.mk-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.mk-arrow { display: inline-block; transition: transform 200ms var(--mk-ease); }
.mk-hero a:hover > .mk-arrow, .mk-cta a:hover > .mk-arrow, .mk-mix-out a:hover > .mk-arrow, .mk-tile:hover .mk-more .mk-arrow { transform: translateX(4px); }

/* ---------- Герой ---------- */

.mk-hero { padding-block: 72px 48px; overflow: hidden; }

/* Герой продукта — мягкая подсветка оттенком приложения в углу изображения. */
.mk-hero.ds-app {
    background:
        radial-gradient(80% 90% at 85% 10%, color-mix(in oklab, var(--ds-accent-fill) 18%, var(--ds-bg)) 0%, transparent 60%),
        var(--ds-bg);
}

.mk-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.mk-hero-grand .mk-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 24px; }

.mk-hero-grid > * { min-width: 0; }

.mk-shot {
    display: block;
    width: 100%;
    border: 1px solid var(--ds-line);
    border-radius: 16px;
    background: var(--ds-surface);
    box-shadow: 0 20px 40px -24px rgb(0 0 0 / 35%);
    object-fit: cover;
    object-position: top;
}

/* ---------- Кольца роста ---------- */

.mk-rings {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 600 / 624;
    margin-inline-start: auto;
}

.mk-rings svg { width: 100%; height: 100%; overflow: visible; }

.mk-rings circle {
    fill: none;
    stroke: var(--ds-accent-fill);
    stroke-width: 15;
    stroke-linecap: round;
    /* Поворот дуги по формуле знака — ЗДЕСЬ, от центра колец, одним механизмом у всех колец. Раньше угол
       стоял SVG-атрибутом rotate(T 300 312), а у вращающихся колец ещё и transform-origin 300 312: атрибут
       становится CSS transform и тоже считается от transform-origin, центр учитывался дважды, и кольца
       уезжали на текст героя (заказ Core KisaPs/Center.Design#71). */
    transform-box: view-box;
    transform-origin: 300px 312px;
    transform: rotate(var(--mk-turn, 0deg));
    animation: mk-grow 1.8s var(--mk-ease) both;
}

/*
    Вращение идёт поверх поворота дуги: анимируется отдельное свойство rotate, а не transform, и от того же
    transform-origin — начальный угол знака сохраняется.
*/
.mk-rings circle.mk-spin { animation: mk-grow 1.8s var(--mk-ease) both, mk-turn 100s linear infinite; }
.mk-rings circle.mk-spin-rev { animation: mk-grow 1.8s var(--mk-ease) both, mk-turn 150s linear infinite reverse; }

/* Подпись в центре — на подложке и с переносом (правило 4 заказа): длинное имя не обрезается. */
.mk-rings-label {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    width: min(46%, 230px);
    padding: 12px 14px;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    background: color-mix(in oklab, var(--ds-bg) 88%, transparent);
    box-shadow: 0 0 0 1px var(--ds-line);
    backdrop-filter: blur(6px);
    text-align: center;
    pointer-events: none;
}

.mk-rings-label b {
    display: block;
    font: 700 clamp(15px, 1.7vw, 21px)/1.15 var(--ds-font-display);
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.mk-rings-label span {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--ds-muted);
}

.mk-event {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--mk-shadow);
    font: 600 14px/1 var(--ds-font);
    white-space: nowrap;
    animation: mk-float 6s ease-in-out infinite;
}

.mk-event b { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-accent-fill); }
.mk-event-1 { inset-inline-start: -4%; top: 4%; }
.mk-event-2 { inset-inline-end: -2%; bottom: 18%; animation-delay: -2s; }
.mk-event-3 { inset-inline-start: 0; bottom: 2%; animation-delay: -4s; }

/* ---------- Бенто продуктов ---------- */

.mk-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.mk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 270px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    border-radius: var(--mk-radius-xl);
    background: var(--ds-surface);
    color: var(--ds-text);
    text-decoration: none;
    transition: transform 250ms var(--mk-ease), box-shadow 250ms var(--mk-ease);
}

.mk-tile > * { min-width: 0; position: relative; }

.mk-tile::before {
    content: "";
    position: absolute;
    inset: auto -30% -60% auto;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--ds-accent-fill) 22%, transparent), transparent 70%);
    pointer-events: none;
}

.mk-tile:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow); }

.mk-tile h3 {
    margin: 0;
    font: 700 clamp(22px, 2.2vw, 28px)/1.1 var(--ds-font-display);
    letter-spacing: -.03em;
}

.mk-tile p { margin: 0; max-width: 42ch; color: var(--ds-muted); }
.mk-tile .mk-shot, .mk-tile-visual { margin-top: 12px; }
.mk-tile .mk-shot { aspect-ratio: 16 / 9; }

.mk-more {
    display: inline-flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-weight: 600;
    color: var(--ds-accent);
    text-decoration: none;
}

/* Плитка — article с одной ссылкой (без вложенного интерактива): «Подробнее» растянута на всю плитку,
   живой фрагмент лежит выше и остаётся нажимаемым. */
.mk-tile > .mk-more { position: static; }
.mk-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mk-tile > .mk-tile-visual { z-index: 1; }
.mk-tile:has(.mk-more:focus-visible) { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.mk-more:focus-visible { outline: none; }

/* Имя плитки для читалки: ссылка звучит «Подробнее: CRM», а не восемь одинаковых «Подробнее». */
.mk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mk-span-2 { grid-column: span 2; }
.mk-span-3 { grid-column: span 3; }
.mk-span-4 { grid-column: span 4; }
.mk-span-6 { grid-column: span 6; }
.mk-tall { grid-row: span 2; }

/* ---------- Полоса призыва ---------- */

.mk-cta {
    position: relative;
    margin: 0 var(--mk-gutter) 96px;
    padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 72px);
    overflow: hidden;
    border-radius: var(--mk-radius-band);
    /* Глоу — в правом верхнем углу, под знаком; текст слева лежит на середине и глубине. */
    background: radial-gradient(120% 140% at 100% 0%, var(--mk-glow) 0%, var(--mk-mid) 45%, var(--mk-deep) 100%);
    color: #ffffff;
}

.mk-cta h2 {
    position: relative;
    max-width: 780px;
    margin: 0;
    font: 800 var(--mk-display-l)/1 var(--ds-font-display);
    letter-spacing: var(--mk-tracking-l);
    text-wrap: balance;
}

.mk-cta p {
    position: relative;
    max-width: 560px;
    margin: 22px 0 34px;
    font-size: clamp(17px, 1.6vw, 20px);
}

.mk-cta-mark {
    position: absolute;
    inset-inline-end: -110px;
    top: -80px;
    width: min(600px, 70vw);
    color: #ffffff;
    opacity: .28;
}

/* Светлая кнопка на градиенте: белая заливка, текст — глубина оттенка. */
.mk-btn-light {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 16px;
    background: #ffffff;
    color: var(--mk-deep);
    font: 600 16px/1 var(--ds-font);
    text-decoration: none;
    white-space: nowrap;
}

.mk-btn-light:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---------- Тёмная полоса ---------- */

.mk-ink {
    padding-block: clamp(72px, 10vw, 110px);
    background: var(--mk-ink);
    color: var(--mk-ink-text);
}

.mk-ink p { color: var(--mk-ink-muted); }

/* ---------- Движение ---------- */

@keyframes mk-grow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mk-turn { to { rotate: 360deg; } }
@keyframes mk-float { 50% { transform: translateY(-8px); } }

/* ---------- Лента работ (WorkMarquee) ---------- */

.mk-marquee {
    overflow: hidden;
    white-space: nowrap;
    border-block: 1px solid var(--ds-line);
    background: var(--ds-surface);
}

.mk-marquee-track {
    display: inline-flex;
    gap: 44px;
    padding-block: 18px;
    font: 500 clamp(18px, 2vw, 22px)/1 var(--ds-font-display);
    letter-spacing: -.02em;
    animation: mk-slide 45s linear infinite;
}

.mk-marquee-track span { display: inline-flex; align-items: center; gap: 44px; }
.mk-marquee-track span::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ds-accent);
}

@keyframes mk-slide { to { transform: translateX(-50%); } }

/* ---------- Сделано в Olista (MadeInOlista) ---------- */

.mk-made {
    padding-block: var(--mk-section);
    overflow: hidden;
    background: var(--mk-ink);
    color: var(--mk-ink-text);
}

.mk-made h2 {
    margin: 18px 0 0;
    font: 700 var(--mk-display-l)/1 var(--ds-font-display);
    letter-spacing: var(--mk-tracking-l);
}

.mk-made p { max-width: 560px; margin: 20px 0 0; color: var(--mk-ink-muted); }
.mk-made .mk-eyebrow { color: var(--mk-ink-muted); }
.mk-reel-box { margin-top: 48px; overflow: hidden; }

.mk-reel {
    display: flex;
    gap: 24px;
    width: max-content;
    padding-inline: 24px;
    animation: mk-reel 70s linear infinite;
}

.mk-reel:hover, .mk-reel-box:focus-within .mk-reel { animation-play-state: paused; }
.mk-reel-box:focus-visible { outline: 2px solid var(--mk-ink-text); outline-offset: 4px; }

/* Без движения лента стоит, и карточки за краем окна иначе недостижимы: её прокручивают (ревизия #65).
   Клавиатура доходит стрелками — у коробки tabindex. */
@media (prefers-reduced-motion: reduce) {
    .mk-reel-box { overflow-x: auto; }
    .mk-reel { animation: none; }
}

.mk-reel figure {
    flex: none;
    width: min(480px, 78vw);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mk-ink-line);
    border-radius: 20px;
    background: var(--mk-ink);
    box-shadow: 0 40px 80px -30px #000;
    transform: rotate(var(--mk-tilt, 0deg));
    transition: transform 300ms var(--mk-ease);
}

.mk-reel figure:hover { transform: rotate(0deg) scale(1.03); }
.mk-reel img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.mk-reel figcaption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--mk-ink-muted);
}

.mk-reel figcaption b { font-weight: 600; color: var(--mk-ink-text); }

@keyframes mk-reel { to { transform: translateX(calc(-50% - 12px)); } }

/* ---------- Числа и шаги (FactGrid, StepList) ---------- */

.mk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.mk-fact {
    padding: 34px;
    border: 1px solid var(--ds-line);
    border-radius: var(--mk-radius-xl);
    background: var(--ds-surface);
}

.mk-fact b {
    display: block;
    font: 800 clamp(64px, 7vw, 92px)/.9 var(--ds-font-display);
    letter-spacing: -.05em;
    color: var(--ds-accent);
}

.mk-fact h3 { margin: 16px 0 8px; font-size: 22px; }
.mk-fact p, .mk-steps p { margin: 0; color: var(--ds-muted); }

.mk-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mk-step;
}

.mk-steps::before {
    content: "";
    position: absolute;
    inset: 28px 28px auto;
    height: 2px;
    background: linear-gradient(90deg, var(--mk-glow), var(--ds-accent), var(--mk-deep));
}

.mk-steps li { position: relative; padding-right: 32px; }

.mk-steps li::before {
    counter-increment: mk-step;
    content: counter(mk-step);
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border: 2px solid var(--ds-text);
    border-radius: 50%;
    background: var(--ds-surface);
    font: 700 22px/1 var(--ds-font-display);
}

.mk-steps h3 { margin: 0 0 8px; font-size: 24px; }

/* ---------- Подбор связки (BundlePicker) ----------
   Без скрипта: строка связки видна, когда отмечен вариант, несущий её ключ. Правило — на каждый ключ
   PlatformAppKeys.All; клетка PublicPagesContractTests держит их в согласии. */

.mk-mix {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
    gap: 24px;
}

.mk-mix > * { min-width: 0; }
.mk-mix-groups { display: grid; gap: 22px; }
.mk-mix-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-mix-group legend { margin-bottom: 10px; padding: 0; font: 700 18px/1.2 var(--ds-font-display); }
.mk-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.mk-opt {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 2px solid var(--ds-line);
    border-radius: 14px;
    background: var(--ds-surface);
    font-weight: 600;
    cursor: pointer;
}

.mk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mk-opt:has(input:checked) { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.mk-opt:has(input:focus-visible) { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

.mk-mix-out {
    display: grid;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--ds-line);
    border-radius: var(--mk-radius-xl);
    background: var(--ds-surface);
}

.mk-mix-row {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-left: 4px solid var(--ds-accent-fill);
    border-radius: 10px;
    background: var(--ds-bg);
}

.mk-mix-row span { color: var(--ds-muted); font-size: 14px; }

.mk-mix:has(.mk-pick-olista:checked) .mk-mix-row[data-app="olista"],
.mk-mix:has(.mk-pick-sitebuilder:checked) .mk-mix-row[data-app="sitebuilder"],
.mk-mix:has(.mk-pick-crm:checked) .mk-mix-row[data-app="crm"],
.mk-mix:has(.mk-pick-center-ai:checked) .mk-mix-row[data-app="center-ai"],
.mk-mix:has(.mk-pick-analytics:checked) .mk-mix-row[data-app="analytics"],
.mk-mix:has(.mk-pick-connectors:checked) .mk-mix-row[data-app="connectors"],
.mk-mix:has(.mk-pick-lowcode:checked) .mk-mix-row[data-app="lowcode"],
.mk-mix:has(.mk-pick-planville:checked) .mk-mix-row[data-app="planville"] { display: flex; }

/* ---------- Телефон ---------- */

@media (max-width: 720px) {
    .mk-hero { padding-block: 40px 32px; }
    .mk-hero-grid, .mk-hero-grand .mk-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .mk-rings { margin-inline: auto; max-width: 420px; }
    .mk-event { font-size: 12.5px; padding: 7px 11px; }
    .mk-bento { grid-template-columns: 1fr 1fr; }
    .mk-span-3, .mk-span-4, .mk-span-6 { grid-column: span 2; }
    .mk-tall { grid-row: auto; }
    .mk-cta { margin-inline: 12px; border-radius: var(--mk-radius-xl); }
    .mk-btn-light { white-space: normal; }
    .mk-facts, .mk-mix { grid-template-columns: 1fr; }
    .mk-steps { grid-template-columns: 1fr; gap: 28px; }
    .mk-steps::before { display: none; }
}

@media (max-width: 480px) {
    .mk-bento { grid-template-columns: 1fr; }
    .mk-span-2, .mk-span-3, .mk-span-4, .mk-span-6 { grid-column: auto; }
}