/*
 * SERP Expert 2.0.43 — каталог кейсов /kejsyi/ и страница кейса.
 * Макеты сняты при ширине 1355 px (контейнер 1200 px); размеры восстановлены по этой сетке.
 */

.se-cs {
    --cs-red: #cb0000;
    --cs-red-2: #e3151b;
    --cs-red-3: #a90006;
    --cs-navy: #071c31;
    --cs-ink: #101a2b;
    --cs-text: #47505f;
    --cs-muted: #7b8494;
    --cs-line: #e7eaef;
    --cs-bg: #f7f8fa;
    --cs-soft: #f4f5f8;
    --cs-pink: #fdeeee;
    --cs-radius: 14px;
    --cs-shadow: 0 10px 30px rgba(15, 26, 43, .06);
    --cs-font: var(--font-main, "Manrope", system-ui, sans-serif);
    --cs-head: var(--font-heading, "Raleway", "Manrope", system-ui, sans-serif);
    position: relative;
    overflow: hidden;
    background: #fff;
    color: var(--cs-ink);
    font-family: var(--cs-font);
}
.se-cs *, .se-cs *::before, .se-cs *::after { box-sizing: border-box; }
.se-cs .cs-wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
:where(.se-cs) ul, :where(.se-cs) ol { margin: 0; padding: 0; list-style: none; }
:where(.se-cs) li { margin: 0; padding: 0; }
.se-cs :where(.cs-wrap, .cs-sec, .cs-cat-hero, .cs-hero) li::before { content: none; }
.se-cs p { margin: 0; }
.se-cs a { color: inherit; }
.se-cs img { max-width: 100%; height: auto; }
.se-cs svg { display: block; flex: 0 0 auto; }
.se-cs a:focus-visible, .se-cs button:focus-visible, .se-cs input:focus-visible, .se-cs select:focus-visible, .se-cs summary:focus-visible { outline: 3px solid rgba(203, 0, 0, .3); outline-offset: 2px; }
.se-cs .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.se-cs [hidden] { display: none !important; }

/* ---------- Типографика ---------- */
.se-cs .cs-h1 { margin: 0; padding: 0; color: var(--cs-navy); font-family: var(--cs-head); font-size: 44px; line-height: 48px; font-weight: 900; letter-spacing: -.8px; text-transform: none; }
.se-cs .cs-h2 { margin: 0 0 12px; padding: 0; color: var(--cs-navy); font-family: var(--cs-head); font-size: 24px; line-height: 30px; font-weight: 900; letter-spacing: -.3px; text-transform: none; scroll-margin-top: 110px; }
.se-cs .cs-h3 { margin: 26px 0 14px; padding: 0 0 0 30px; position: relative; color: var(--cs-navy); font-family: var(--cs-head); font-size: 20px; line-height: 26px; font-weight: 800; text-transform: none; }
.se-cs .cs-h3::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 4px; border-radius: 2px; background: var(--cs-red); }
.se-cs .cs-lead { margin: -6px 0 16px; color: var(--cs-muted); font-size: 15px; line-height: 22px; }
.se-cs .cs-text p { margin: 0 0 8px; color: var(--cs-text); font-size: 15px; line-height: 22px; }
.se-cs .cs-text p:last-child { margin-bottom: 0; }
.se-cs .cs-text--narrow { max-width: 790px; }
.se-cs .cs-content { color: var(--cs-text); font-size: 15px; line-height: 24px; }
.se-cs .cs-content h2, .se-cs .cs-content h3 { margin: 22px 0 10px; color: var(--cs-navy); font-family: var(--cs-head); font-weight: 800; }
.se-cs .cs-content p { margin: 0 0 12px; }
.se-cs .cs-content ul { margin: 0 0 12px; padding-left: 20px; }
.se-cs .cs-content ul li { list-style: disc; margin-bottom: 4px; }
.se-cs .cs-content img { border-radius: 12px; }

/* ---------- Кнопки, ссылки, метки ---------- */
.se-cs .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 24px; border: 1.5px solid transparent; border-radius: 22px; font: 700 14px/1.1 var(--cs-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.se-cs .cs-btn svg { width: 17px; height: 17px; stroke-width: 2.2; }
.se-cs .cs-btn--red { background: linear-gradient(180deg, var(--cs-red-2) 0, var(--cs-red-3) 100%); box-shadow: 0 10px 22px rgba(169, 0, 6, .22); color: #fff; }
.se-cs .cs-btn--red:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.se-cs .cs-btn--outline { border-color: #e98a8c; background: #fff; color: var(--cs-red); }
.se-cs .cs-btn--outline:hover { border-color: var(--cs-red); background: #fff6f6; color: var(--cs-red); }
.se-cs .cs-btn--sm { min-height: 38px; padding: 0 18px; font-size: 13px; }
.se-cs .cs-btn--block { width: 100%; }
.se-cs .cs-more { display: inline-flex; align-items: center; gap: 8px; color: var(--cs-red); font-size: 14px; font-weight: 800; text-decoration: none; }
.se-cs .cs-more svg { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .2s ease; }
.se-cs .cs-more:hover svg { transform: translateX(3px); }
.se-cs .cs-more--sm { font-size: 13px; }
.se-cs .cs-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 14px; border-radius: 14px; background: #eef0f3; color: var(--cs-text); font-size: 13px; font-weight: 600; }
.se-cs .cs-pill.is-red { background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); color: #fff; }

.se-cs .cs-svc { display: inline-flex; align-items: center; gap: 8px; color: var(--cs-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.se-cs .cs-svc i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; font-style: normal; }
.se-cs .cs-svc i svg { width: 14px; height: 14px; stroke-width: 2.2; }
.se-cs .cs-svc.tone-red i { background: linear-gradient(180deg, #ef2a30, #c40009); }
.se-cs .cs-svc.tone-green i { background: linear-gradient(180deg, #1c9c7a, #0d7a5c); }
.se-cs .cs-svc.tone-orange i { background: linear-gradient(180deg, #ffa43a, #ef7b0f); }
.se-cs .cs-svc.tone-blue i { background: linear-gradient(180deg, #3c6ff0, #1f4fc8); }

/* ---------- Декор: розовые пятна, окна, самолётик ---------- */
.se-cs .cs-blob { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 196, 196, .85), rgba(255, 220, 220, .35) 60%, rgba(255, 255, 255, 0) 72%); pointer-events: none; }
.se-cs .cs-win { position: absolute; display: block; width: 190px; height: 126px; padding: 14px 14px 0; border-radius: 10px; background: #fff; box-shadow: 0 20px 40px rgba(16, 26, 43, .12); }
.se-cs .cs-win::before { content: ""; display: block; width: 40px; height: 5px; margin-bottom: 10px; border-radius: 3px; background: linear-gradient(90deg, #e3151b 0 6px, transparent 6px 10px, #f39b9d 10px 16px, transparent 16px 20px, #d9dce2 20px); }
.se-cs .cs-win em { display: block; height: 5px; margin-bottom: 7px; border-radius: 3px; background: #e7e9ee; }
.se-cs .cs-win em:nth-of-type(2) { width: 70%; }
.se-cs .cs-win b { display: block; width: 50%; height: 6px; margin-bottom: 8px; border-radius: 3px; background: var(--cs-red-2); }
.se-cs .cs-win__screen { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 52px; border-radius: 8px; background: linear-gradient(135deg, #5873c9 0, #2c4594 100%); overflow: hidden; }
.se-cs .cs-win__screen i { position: absolute; left: 10px; top: 12px; width: 46%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.se-cs .cs-win__screen i + i { top: 24px; width: 30%; background: rgba(255, 255, 255, .5); }
.se-cs .cs-plane { position: absolute; width: 110px; height: auto; filter: drop-shadow(0 16px 20px rgba(169, 0, 6, .25)); }

/* =========================================================================
 * Каталог
 * ====================================================================== */

.se-cs--catalog { background: linear-gradient(180deg, #fbfbfc 0, #f7f8fa 340px, #f7f8fa 100%); }
.cs-cat-hero { position: relative; padding: 42px 0 34px; overflow: hidden; }
.cs-cat-hero .breadcrumbs { display: flex; flex-wrap: wrap; margin: 0 0 14px; padding: 0; }
.se-cs .breadcrumbs li { margin: 0; padding: 0; color: var(--cs-muted); font-size: 13px; line-height: 18px; list-style: none; }
.se-cs .breadcrumbs li a { color: var(--cs-muted); text-decoration: none; }
.se-cs .breadcrumbs li a:hover { color: var(--cs-red); }
.se-cs .breadcrumbs li::after { content: "/"; display: inline-block; position: static; width: auto; height: auto; margin: 0 7px; background: none; color: #b5bcc7; transform: none; }
.se-cs .breadcrumbs li:last-child::after { content: none; }
.cs-cat-hero__sub { max-width: 560px; margin-top: 12px !important; color: var(--cs-text); font-size: 19px; line-height: 27px; }
.cs-cat-hero__decor { position: absolute; z-index: 0; right: max(0px, calc((100vw - 1240px) / 2 - 40px)); top: -6px; width: 560px; height: 230px; pointer-events: none; }
.cs-cat-hero__decor .cs-blob--1 { right: 20px; top: -50px; width: 330px; height: 330px; }
.cs-cat-hero__decor .cs-blob--2 { left: 30px; top: 70px; width: 200px; height: 200px; }
.cs-cat-hero__decor .cs-blob--3 { right: 220px; bottom: -60px; width: 160px; height: 160px; }
.cs-cat-hero__decor .cs-win--3 { left: 250px; top: 18px; transform: rotate(10deg) skewY(-6deg); opacity: .9; }
.cs-cat-hero__decor .cs-win--2 { left: 200px; top: 36px; transform: rotate(10deg) skewY(-6deg); }
.cs-cat-hero__decor .cs-win--1 { left: 140px; top: 60px; transform: rotate(10deg) skewY(-6deg); }
.cs-cat-hero__decor .cs-plane { right: 60px; top: 30px; width: 116px; }

.cs-cat { position: relative; z-index: 1; padding-bottom: 34px; }
.cs-toolbar { padding: 14px; border: 1px solid var(--cs-line); border-radius: 16px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.se-cs .cs-tab { flex: 0 1 196px; min-height: 36px; margin: 0; padding: 0 16px; border: 1px solid var(--cs-line); border-radius: 9px; background: #fff; color: var(--cs-ink); font: 600 13.5px/1.1 var(--cs-font); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.se-cs .cs-tab:hover { border-color: #f1b1b2; color: var(--cs-red); }
.se-cs .cs-tab.is-active { border-color: transparent; background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); color: #fff; box-shadow: 0 8px 18px rgba(169, 0, 6, .2); }
.cs-toolbar__row { display: flex; gap: 12px; margin-top: 14px; }
.cs-search { position: relative; display: flex; flex: 1; align-items: center; margin: 0; }
.cs-search svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--cs-muted); }
.se-cs .cs-search input { width: 100%; height: 40px; margin: 0; padding: 0 14px 0 42px; border: 1px solid #dfe3e9; border-radius: 9px; background: #fff; color: var(--cs-ink); font: 400 14px/1 var(--cs-font); box-shadow: none; }
.se-cs .cs-search input::placeholder { color: #9aa2ae; }
.se-cs .cs-search input:focus, .se-cs .cs-sort select:focus { border-color: var(--cs-red); outline: none; box-shadow: 0 0 0 3px rgba(203, 0, 0, .1); }
.cs-sort { position: relative; display: block; flex: 0 0 208px; margin: 0; }
.se-cs .cs-sort select { width: 100%; height: 40px; margin: 0; padding: 0 36px 0 14px; border: 1px solid #dfe3e9; border-radius: 9px; background: #fff; color: var(--cs-ink); font: 600 13.5px/1 var(--cs-font); appearance: none; -webkit-appearance: none; cursor: pointer; }
.cs-sort__chev { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; color: var(--cs-ink); transform: translateY(-50%) rotate(90deg); pointer-events: none; }
.se-cs .cs-filters-btn { display: none; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 14px; border: 1px solid #dfe3e9; border-radius: 9px; background: #fff; color: var(--cs-ink); font: 700 13.5px/1 var(--cs-font); cursor: pointer; }
.cs-filters-btn svg { width: 17px; height: 17px; }
.cs-filters-btn b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cs-red); color: #fff; font-size: 11px; }

.cs-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 24px; margin-top: 22px; align-items: start; }
.cs-layout.no-filters { grid-template-columns: minmax(0, 1fr); }
.cs-filters { padding: 18px 16px 22px; border-radius: 16px; background: #f1f2f5; }
.cs-filters__head { display: none; }
.se-cs .cs-filter { margin: 0; padding: 0 0 16px; border: 0; border-bottom: 1px solid #e1e4ea; min-width: 0; }
.se-cs .cs-filter + .cs-filter { padding-top: 18px; }
.se-cs .cs-filter__title { float: left; width: 100%; margin: 0 0 10px; padding: 0; color: var(--cs-navy); font-family: var(--cs-head); font-size: 16px; line-height: 22px; font-weight: 900; }
.cs-filter__list { clear: both; display: grid; gap: 2px; }
.cs-cat.is-js .cs-filter__list li.is-extra { display: none; }
.cs-cat.is-js .cs-filter.is-open .cs-filter__list li.is-extra { display: block; }
.se-cs .cs-check { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; color: var(--cs-ink); font-size: 14px; line-height: 18px; cursor: pointer; }
.se-cs .cs-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.se-cs .cs-check__box { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 19px; height: 19px; border: 1.5px solid #c9ced7; border-radius: 5px; background: #fff; color: transparent; transition: background .15s ease, border-color .15s ease; }
.se-cs .cs-check__box svg { width: 13px; height: 13px; stroke-width: 3; }
.se-cs .cs-check input:checked + .cs-check__box { border-color: var(--cs-red); background: var(--cs-red); color: #fff; }
.se-cs .cs-check input:focus-visible + .cs-check__box { outline: 3px solid rgba(203, 0, 0, .3); outline-offset: 2px; }
.se-cs .cs-check:hover .cs-check__box { border-color: var(--cs-red); }
.se-cs .cs-filter__all { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--cs-red); font: 700 13px/1 var(--cs-font); cursor: pointer; }
.se-cs .cs-filter__all svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s ease; }
.se-cs .cs-filter.is-open .cs-filter__all svg { transform: rotate(-90deg); }
.cs-filters__actions { display: grid; justify-items: center; gap: 14px; margin-top: 22px; }
.se-cs .cs-filters__actions .cs-btn { min-height: 42px; border-radius: 14px; }
.se-cs .cs-filters__reset { color: var(--cs-red); font-size: 14px; font-weight: 800; text-decoration: none; }
.se-cs .cs-filters__backdrop { display: none; }

.cs-results { min-width: 0; }
.cs-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.se-cs .cs-results__head .cs-h2 { margin: 0; font-size: 24px; line-height: 30px; }
.cs-results__count { color: var(--cs-muted); font-size: 12.5px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; transition: opacity .2s ease; }
.cs-grid[aria-busy="true"] { opacity: .45; pointer-events: none; }
.cs-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: #fff; box-shadow: var(--cs-shadow); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.cs-card:hover { box-shadow: 0 18px 40px rgba(15, 26, 43, .11); transform: translateY(-2px); }
.se-cs .cs-card__media { display: block; aspect-ratio: 307 / 128; background: #eef0f3; overflow: hidden; }
.se-cs .cs-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cs-card:hover .cs-card__media img { transform: scale(1.03); }
.cs-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #c6ccd5; }
.cs-card__ph svg { width: 42px; height: 42px; }
.cs-card__body { display: flex; flex: 1; flex-direction: column; padding: 13px 14px 16px; }
.cs-card__meta { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.cs-card__plus { padding: 2px 7px; border-radius: 8px; background: #eef0f3; color: var(--cs-text); font-size: 11px; font-weight: 700; }
.cs-card__ind { margin-left: auto; padding: 3px 9px; border-radius: 7px; background: #f1f2f5; color: var(--cs-muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
.se-cs .cs-card__title { margin: 10px 0 0; padding: 0; color: var(--cs-ink); font-family: var(--cs-font); font-size: 16px; line-height: 21px; font-weight: 800; text-transform: none; }
.se-cs .cs-card__title a { text-decoration: none; }
.se-cs .cs-card__title a:hover { color: var(--cs-red); }
.se-cs .cs-card__task { margin-top: 6px; color: var(--cs-muted); font-size: 13.5px; line-height: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.cs-card__chips span { padding: 3px 11px; border-radius: 11px; background: #f1f2f5; color: var(--cs-text); font-size: 12px; line-height: 16px; }
.se-cs .cs-card__res { margin-top: 10px; color: var(--cs-text); font-size: 13.5px; line-height: 19px; }
.cs-card__res b { color: var(--cs-ink); }
.cs-card .cs-more { margin-top: auto; padding-top: 12px; }

.cs-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; border: 1px dashed #d8dce3; border-radius: var(--cs-radius); background: #fff; color: var(--cs-muted); text-align: center; }
.cs-state svg { width: 34px; height: 34px; color: #c3c9d2; }
.cs-state b { color: var(--cs-ink); font-size: 17px; }
.cs-state .cs-btn { margin-top: 8px; }
.cs-state--error { flex-direction: row; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; padding: 16px; border-style: solid; border-color: #f3c2c3; background: #fff6f6; color: var(--cs-red-3); }
.cs-state--error svg { color: var(--cs-red); width: 22px; height: 22px; }
.cs-state--error .cs-btn { margin-top: 0; }

.cs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.se-cs .cs-pager__more { min-width: 160px; min-height: 40px; border-radius: 20px; }
.cs-pages ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.se-cs .cs-pages__item { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; background: transparent; color: var(--cs-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease; }
.se-cs a.cs-pages__item:hover { background: #fff; color: var(--cs-red); box-shadow: var(--cs-shadow); }
.se-cs .cs-pages__item.is-current { background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); color: #fff; box-shadow: 0 8px 18px rgba(169, 0, 6, .22); }
.se-cs .cs-pages__next { background: #fff; color: var(--cs-red); box-shadow: var(--cs-shadow); }
.cs-pages__next svg { width: 18px; height: 18px; stroke-width: 2.4; }
.cs-pages__dots { padding: 0 4px; color: var(--cs-muted); }

/* Баннер «Обсудим ваш проект» */
.cs-banner-sec { padding: 6px 0 40px; }
.cs-banner { position: relative; display: flex; align-items: center; min-height: 190px; padding: 34px 76px; border-radius: 18px; background: linear-gradient(90deg, #fdeceb 0, #fdf3f2 55%, #fbf4f4 100%); overflow: hidden; }
.cs-banner__copy { position: relative; z-index: 1; max-width: 520px; }
.se-cs .cs-banner__title { margin: 0; padding: 0; color: var(--cs-red); font-family: var(--cs-head); font-size: 30px; line-height: 36px; font-weight: 900; text-transform: none; }
.se-cs .cs-banner__text { margin-top: 8px; color: var(--cs-text); font-size: 17px; line-height: 25px; }
.cs-banner .cs-btn { margin-top: 18px; min-width: 210px; }
.cs-banner__decor { position: absolute; right: 120px; top: 0; bottom: 0; width: 460px; pointer-events: none; }
.cs-banner__decor .cs-blob--1 { right: 40px; top: -30px; width: 240px; height: 240px; }
.cs-banner__decor .cs-blob--2 { left: -10px; top: 90px; width: 140px; height: 140px; }
.cs-banner__decor .cs-win--3 { left: 170px; top: 6px; transform: rotate(10deg) skewY(-6deg); }
.cs-banner__decor .cs-win--2 { left: 130px; top: 20px; transform: rotate(10deg) skewY(-6deg); }
.cs-banner__decor .cs-win--1 { left: 90px; top: 40px; transform: rotate(10deg) skewY(-6deg); }
.cs-banner__decor .cs-plane { right: -30px; top: 10px; width: 120px; }

/* Общие блоки внизу: FAQ как на главной — с фото. */
.se-cs .se-faq--compact .se-faq-promo__img { display: block; }
.se-cs .se-faq--compact .se-faq-promo__card { margin-top: -4px; }
.se-cs--catalog .se-faq { background: transparent; }

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

.cs-hero { position: relative; padding: 18px 0 0; background: linear-gradient(180deg, #fdfdfe 0, #fff 100%); }
.cs-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 30px; }
.cs-hero__top .breadcrumbs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.se-cs .cs-allcases { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #fff; box-shadow: var(--cs-shadow); color: var(--cs-red); font-size: 13px; font-weight: 700; text-decoration: none; }
.cs-allcases svg { width: 15px; height: 15px; stroke-width: 2.4; }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); gap: 10px; align-items: center; min-height: 360px; }
.cs-hero__grid.no-media { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 20px 0 30px; }
.cs-hero__copy { position: relative; z-index: 2; padding: 14px 0 20px; }
.cs-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px !important; }
.se-cs .cs-hero__lead { max-width: 500px; margin-top: 12px; color: var(--cs-text); font-size: 16px; line-height: 24px; }
.cs-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.cs-hero__chips span { padding: 4px 13px; border-radius: 13px; background: #f0f2f5; color: var(--cs-text); font-size: 13px; }
.cs-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.cs-hero__btns .cs-btn { min-width: 180px; }
.cs-hero__media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.cs-hero__media img { position: relative; z-index: 1; display: block; width: 100%; max-height: 380px; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(16, 26, 43, .16)); }
.cs-hero__media .cs-blob--1 { left: 6%; top: 8%; width: 46%; aspect-ratio: 1; height: auto; }
.cs-hero__media .cs-blob--2 { right: -2%; top: -6%; width: 40%; aspect-ratio: 1; height: auto; }
.cs-hero__media .cs-blob--3 { right: 10%; bottom: -10%; width: 34%; aspect-ratio: 1; height: auto; }

.se-cs .cs-pass { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0 0; padding: 16px 24px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); }
.se-cs .cs-pass .cs-pass__lead dt { color: var(--cs-navy); font-family: var(--cs-head); font-size: 16px; line-height: 20px; font-weight: 900; }
.cs-pass__lead { flex: 0 0 auto; margin-right: 6px; }
.cs-pass__item { flex: 1 1 0; min-width: 118px; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.cs-pass__icon { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--cs-line); border-radius: 9px; color: var(--cs-muted); }
.cs-pass__icon svg { width: 18px; height: 18px; }
.se-cs .cs-pass dt { margin: 0; color: var(--cs-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.se-cs .cs-pass dd { margin: 0; color: var(--cs-ink); font-size: 13.5px; line-height: 18px; font-weight: 600; }
.se-cs .cs-pass dd a { color: var(--cs-red); text-decoration: none; }

.cs-anchors { margin-top: 16px; border-bottom: 1px solid var(--cs-line); overflow-x: auto; scrollbar-width: none; }
.cs-anchors::-webkit-scrollbar { display: none; }
.cs-anchors ul { display: flex; gap: 4px; }
.se-cs .cs-anchors a { position: relative; display: block; padding: 10px 20px 12px; color: var(--cs-text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.se-cs .cs-anchors a:hover { color: var(--cs-red); }
.se-cs .cs-anchors a.is-active { color: var(--cs-red); }
.se-cs .cs-anchors a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--cs-red); }

.cs-sec { padding: 12px 0 18px; scroll-margin-top: 100px; }
.cs-intro { display: grid; grid-template-columns: minmax(0, 1fr) 343px; gap: 30px; align-items: start; }
.se-cs .cs-intro { padding-top: 28px; }
.cs-intro.no-toc { grid-template-columns: minmax(0, 1fr); }
.cs-intro .cs-sec { padding: 0 0 18px; }
.cs-toc { position: sticky; top: 100px; padding: 20px 22px 16px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); }
.se-cs .cs-toc__title { margin-bottom: 8px; color: var(--cs-navy); font-family: var(--cs-head); font-size: 20px; line-height: 26px; font-weight: 900; }
.se-cs .cs-toc a { position: relative; display: block; padding: 6px 0 6px 22px; color: var(--cs-text); font-size: 14px; line-height: 19px; text-decoration: none; }
.se-cs .cs-toc a::before { content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: #c9ced7; }
.se-cs .cs-toc a:hover, .se-cs .cs-toc a.is-active { color: var(--cs-ink); }
.se-cs .cs-toc a.is-active::before { background: var(--cs-red); box-shadow: 0 0 0 3px rgba(203, 0, 0, .12); }

.cs-taskcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs-taskcard { padding: 18px 20px; border-radius: 14px; background: #f5f6f8; }
.se-cs .cs-taskcard__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--cs-navy); font-family: var(--cs-font); font-size: 16px; font-weight: 800; text-transform: none; }
.cs-taskcard__title span { color: var(--cs-red); }
.cs-taskcard__title svg { width: 26px; height: 26px; }
.cs-list { display: grid; gap: 9px; }
.cs-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--cs-text); font-size: 14px; line-height: 20px; }
.cs-list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--cs-red); stroke-width: 3; }
.cs-list--dot i { flex: 0 0 auto; width: 7px; height: 7px; margin: 7px 4px 0 5px; border-radius: 50%; background: var(--cs-red); }

.cs-sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.cs-sol { display: flex; gap: 22px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-sol__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 14px; background: var(--cs-pink); color: var(--cs-red); }
.cs-sol__icon svg { width: 36px; height: 36px; stroke-width: 1.7; }
.cs-sol__copy b { display: flex; gap: 14px; color: var(--cs-ink); font-size: 16px; line-height: 21px; font-weight: 800; }
.cs-sol__copy b em { color: var(--cs-red); font-style: normal; }
.cs-sol__copy span { display: block; margin-top: 6px; padding-left: 38px; color: var(--cs-muted); font-size: 13.5px; line-height: 19px; }

.cs-works { display: grid; gap: 14px; }
.cs-work { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 20px; padding: 14px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-work.no-media { grid-template-columns: minmax(0, 1fr); }
.cs-work__copy { display: flex; gap: 20px; padding: 8px 4px 8px 8px; }
.cs-work__num { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 6px 14px rgba(169, 0, 6, .25); }
.se-cs .cs-work__title { margin: 6px 0 8px; color: var(--cs-ink); font-family: var(--cs-font); font-size: 16px; font-weight: 800; text-transform: none; }
.cs-work__copy p { color: var(--cs-text); font-size: 14px; line-height: 21px; }
.se-cs .cs-work__cap { margin-top: 8px; color: var(--cs-muted); font-size: 12.5px; }
.cs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.se-cs .cs-gallery__item { position: relative; display: block; border-radius: 10px; background: #eef0f4; overflow: hidden; aspect-ratio: 360 / 128; }
.se-cs .cs-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s ease; }
.cs-gallery__item:hover img { transform: scale(1.03); }
.cs-gallery__zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(16, 26, 43, .18); color: var(--cs-ink); }
.cs-gallery__zoom svg { width: 20px; height: 20px; }

.cs-sec--devices { padding-top: 20px; overflow: hidden; }
.cs-devices { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center; }
.cs-devices__copy .cs-text p { font-size: 15px; }
.se-cs .cs-devices__media { position: relative; display: block; }
.se-cs .cs-devices__media::before { content: ""; position: absolute; left: -6%; top: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 196, .7), rgba(255, 255, 255, 0) 70%); }
.se-cs .cs-devices__media img { position: relative; display: block; width: 100%; max-height: 260px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(16, 26, 43, .14)); }

/* Результат проекта (тёмный блок + таблица) */
.cs-sec--full { padding: 0 0 26px; }
.cs-results-dark { padding: 26px 0 30px; background: var(--cs-navy); }
.cs-results-dark.has-table { padding-bottom: 104px; }
.se-cs .cs-results-dark .cs-h2 { color: #fff; }
.cs-reslist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-res { display: flex; gap: 22px; align-items: center; padding: 22px 22px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.cs-res__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff3a3f, #c20008); color: #fff; box-shadow: 0 0 0 6px rgba(227, 21, 27, .14), 0 0 28px rgba(227, 21, 27, .45); }
.cs-res__icon svg { width: 28px; height: 28px; stroke-width: 2.2; }
.cs-res__copy b { display: block; color: #fff; font-size: 15.5px; font-weight: 800; }
.cs-res__copy span { display: block; margin-top: 6px; color: #b7c2cf; font-size: 13.5px; line-height: 19px; }
.cs-restable { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: -84px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(16, 26, 43, .12); }
.cs-restable.has-note { grid-template-columns: minmax(0, 1fr) 256px; }
.se-cs .cs-restable__note { display: flex; gap: 14px; align-self: start; padding: 18px; border-radius: 12px; background: #f5f6f8; color: var(--cs-muted); font-size: 13.5px; line-height: 20px; }
.cs-restable__note svg { width: 22px; height: 22px; color: var(--cs-muted); }

.cs-table-wrap { overflow-x: auto; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; }
.se-cs .cs-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13.5px; line-height: 19px; }
.se-cs .cs-table th, .se-cs .cs-table td { padding: 9px 14px; border: 0; border-bottom: 1px solid var(--cs-line); color: var(--cs-text); text-align: left; vertical-align: top; }
.se-cs .cs-table thead th { background: #f5f6f8; color: var(--cs-ink); font-size: 13px; font-weight: 700; }
.se-cs .cs-table tbody th { color: var(--cs-ink); font-weight: 700; }
.se-cs .cs-table tr:last-child th, .se-cs .cs-table tr:last-child td { border-bottom: 0; }
.se-cs .cs-table td + td, .se-cs .cs-table th + td, .se-cs .cs-table thead th + th { border-left: 1px solid var(--cs-line); }

/* Как проверили результат */
.cs-check-head { display: flex; justify-content: space-between; gap: 30px; }
.se-cs .cs-check-head__src { flex: 0 0 210px; margin-top: 30px; color: var(--cs-muted); font-size: 13px; line-height: 19px; }
.se-cs .cs-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.se-cs .cs-checks .cs-item, .se-cs .cs-feats .cs-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-item__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: var(--cs-pink); color: var(--cs-red); }
.cs-item__icon svg { width: 20px; height: 20px; }
.cs-item__copy b { display: block; color: var(--cs-ink); font-size: 14px; line-height: 19px; font-weight: 800; }
.cs-item__copy b em { color: var(--cs-red); font-style: normal; }
.cs-item__copy span { display: block; margin-top: 4px; color: var(--cs-muted); font-size: 12.5px; line-height: 18px; }
.se-cs .cs-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.se-cs .cs-feats .cs-item { align-items: center; padding: 18px; }
.se-cs .cs-feats .cs-item__icon { width: 56px; height: 56px; border-radius: 50%; }
.se-cs .cs-feats .cs-item__icon svg { width: 26px; height: 26px; }
.se-cs .cs-feats .cs-item__copy b { font-size: 15px; }

/* Команда */
.cs-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-member { display: flex; gap: 18px; align-items: center; padding: 12px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); }
.se-cs .cs-member__photo { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 16px; background: #eef1f5; object-fit: cover; object-position: top center; }
.cs-member__photo.is-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--cs-red); font-size: 28px; font-weight: 800; }
.cs-member__copy { display: flex; flex-direction: column; min-width: 0; }
.cs-member__role { color: var(--cs-ink); font-size: 16px; line-height: 21px; font-weight: 800; }
.cs-member__name { margin-top: 2px; color: var(--cs-text); font-size: 13px; font-weight: 600; }
.cs-member__text { margin: 6px 0 8px; color: var(--cs-muted); font-size: 13px; line-height: 18px; }

/* Выводы, следующий шаг, отзыв */
.cs-concl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 265px; gap: 30px; align-items: start; }
.cs-concl .cs-text p { font-size: 14px; line-height: 21px; }
.cs-next { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; background: var(--cs-pink); }
.cs-next__icon { color: var(--cs-red); }
.cs-next__icon svg { width: 28px; height: 28px; }
.cs-next b { color: var(--cs-red); font-size: 15px; font-weight: 800; }
.cs-next > span:not(.cs-next__icon) { color: var(--cs-text); font-size: 13px; line-height: 18px; }
.se-cs .cs-next .cs-more { padding: 0; border: 0; background: none; font-family: var(--cs-font); cursor: pointer; }
.cs-review { position: relative; margin: 22px 0 0; padding: 24px 28px 22px 84px; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-review__mark { position: absolute; left: 22px; top: 20px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding-top: 14px; border-radius: 12px; background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); color: #fff; font: 800 42px/1 Georgia, serif; }
.cs-review blockquote { margin: 0; padding: 0; border: 0; }
.cs-review blockquote p { color: var(--cs-ink); font-size: 15px; line-height: 23px; font-weight: 600; }
.cs-review figcaption { margin-top: 12px; color: var(--cs-muted); font-size: 13px; }
.cs-review figcaption b { display: block; color: var(--cs-ink); font-size: 14px; }

/* Подготовка, обновление, поделиться */
.cs-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding: 16px 0 18px; border-bottom: 1px solid var(--cs-line); }
.cs-meta__info { display: flex; flex-wrap: wrap; gap: 6px 40px; color: var(--cs-text); font-size: 13px; }
.cs-meta__info b { font-weight: 600; color: var(--cs-ink); }
.cs-meta__info a { color: var(--cs-text); }
.cs-share { display: flex; align-items: center; gap: 12px; }
.cs-share__label { color: var(--cs-ink); font-size: 13px; font-weight: 600; }
.se-cs .cs-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; color: #fff; transition: filter .2s ease; }
.se-cs .cs-share__btn:hover { filter: brightness(1.1); color: #fff; }
.cs-share__btn svg { width: 20px; height: 20px; }
.cs-share__btn.is-tg { background: #2aa3df; }
.cs-share__btn.is-vk { background: #4b5566; }
.se-cs .cs-share__copy { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 18px; border: 1px solid var(--cs-line); border-radius: 18px; background: #fff; color: var(--cs-text); font: 600 13px/1 var(--cs-font); cursor: pointer; }
.cs-share__copy svg { width: 16px; height: 16px; }
.se-cs .cs-share__copy.is-done { border-color: #9ad6ae; color: #17803d; }

/* Похожие кейсы */
.cs-similar { padding: 22px 0 34px; }
.cs-similar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.se-cs .cs-similar__head .cs-h2 { margin: 0; }
.cs-similar__nav { display: flex; flex-wrap: wrap; gap: 10px; }
.se-cs .cs-navbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid var(--cs-line); border-radius: 18px; background: #fff; color: var(--cs-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.cs-navbtn svg { width: 15px; height: 15px; color: var(--cs-red); stroke-width: 2.4; }
.se-cs .cs-navbtn:hover { border-color: #f1b1b2; color: var(--cs-red); }
.se-cs .cs-navbtn.is-red { border-color: transparent; background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); color: #fff; }
.cs-simgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.se-cs .cs-sim__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--cs-line); border-radius: 14px; background: #fff; box-shadow: var(--cs-shadow); text-decoration: none; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.cs-sim__link:hover { box-shadow: 0 18px 40px rgba(15, 26, 43, .11); transform: translateY(-2px); }
.cs-sim__media { display: block; aspect-ratio: 384 / 120; background: #eef0f3; overflow: hidden; }
.cs-sim__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-sim__body { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 52px 16px 22px; }
.cs-sim__body .cs-svc { color: var(--cs-red); font-size: 12px; }
.cs-sim__body .cs-svc i { width: 18px; height: 18px; border-radius: 50%; }
.cs-sim__body .cs-svc i svg { width: 11px; height: 11px; }
.cs-sim__title { color: var(--cs-ink); font-size: 15.5px; line-height: 20px; font-weight: 800; }
.cs-sim__arrow { position: absolute; right: 22px; top: 50%; color: var(--cs-red); }
.cs-sim__arrow svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* ---------- Сменные блоки направлений ---------- */
.cs-module { position: relative; }
.cs-module > .cs-h3:first-child { margin-top: 0; }

/* Разработка: экраны в рамках устройств */
.cs-screens { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 26px; padding: 6px 0 4px; }
.cs-screen { display: flex; flex-direction: column; align-items: center; margin: 0; }
.cs-screen figcaption { margin-top: 12px; color: var(--cs-ink); font-size: 14px; font-weight: 600; text-align: center; }
.se-cs .cs-screen__frame { position: relative; display: block; overflow: hidden; background: #fff; }
.cs-screen__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-screen.is-desktop { flex: 1 1 520px; max-width: 600px; }
.cs-screen.is-desktop .cs-screen__frame { width: 100%; aspect-ratio: 16 / 10; border: 12px solid #1b1f27; border-bottom-width: 14px; border-radius: 14px 14px 4px 4px; }
.cs-screen.is-desktop::after { content: ""; order: 1; display: block; width: 112%; height: 12px; margin-top: -2px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #d6d9df, #aeb3bc); }
.cs-screen.is-desktop figcaption { order: 2; }
.cs-screen.is-mobile { flex: 0 1 190px; }
.cs-screen.is-mobile .cs-screen__frame { width: 190px; aspect-ratio: 9 / 18.5; border: 8px solid #1b1f27; border-radius: 26px; }
.cs-screen.is-none { flex: 1 1 300px; }
.cs-screen.is-none .cs-screen__frame { width: 100%; border-radius: 12px; box-shadow: var(--cs-shadow); }

/* SEO */
.cs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.cs-step { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-step + .cs-step::before { content: ""; position: absolute; left: -20px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #9aa2ae; border-right: 2px solid #9aa2ae; transform: translateY(-50%) rotate(45deg); }
.cs-step__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cs-pink); color: var(--cs-red); }
.cs-step__icon svg { width: 24px; height: 24px; }
.cs-step__copy em { display: block; color: var(--cs-red); font-size: 12px; font-style: normal; font-weight: 700; }
.cs-step__copy b { display: block; color: var(--cs-ink); font-size: 14px; font-weight: 800; }
.cs-step__copy span { display: block; margin-top: 4px; color: var(--cs-muted); font-size: 12.5px; line-height: 17px; }
.se-cs .cs-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.se-cs .cs-metrics.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-metric { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; box-shadow: var(--cs-shadow); }
.cs-metric__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cs-pink); color: var(--cs-red); }
.cs-metric__icon svg { width: 28px; height: 28px; }
.cs-metric__copy { display: flex; flex-direction: column; min-width: 0; }
.cs-metric__name { color: var(--cs-ink); font-size: 14px; font-weight: 800; }
.cs-metric__value { margin-top: 6px; color: var(--cs-red); font-family: var(--cs-head); font-size: 26px; line-height: 30px; font-weight: 900; }
.cs-metric__before, .cs-metric__note, .cs-metric__src { margin-top: 4px; color: var(--cs-muted); font-size: 12.5px; line-height: 17px; }
.cs-metric__src { color: #9aa2ae; font-size: 11.5px; }
.cs-chart { margin: 16px 0 0; padding: 16px 18px 10px; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; }
.cs-chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cs-chart__head b { position: relative; padding-left: 16px; color: var(--cs-ink); font-size: 15px; font-weight: 800; }
.cs-chart__head b::before { content: ""; position: absolute; left: 0; top: 5px; border: 5px solid transparent; border-left: 7px solid var(--cs-red); }
.cs-chart__head span { color: var(--cs-muted); font-size: 12.5px; }
.cs-chart__svg { width: 100%; height: auto; }
.cs-chart__grid { stroke: #e9ecf1; stroke-width: 1; }
.cs-chart__tick { fill: #8a93a2; font-size: 13px; font-family: var(--cs-font); }
.cs-chart__line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.cs-chart__line.s0, .cs-chart__legend .s0 i { stroke: var(--cs-red); background: var(--cs-red); }
.cs-chart__line.s1, .cs-chart__legend .s1 i { stroke: #071c31; background: #071c31; }
.cs-chart__line.s2, .cs-chart__legend .s2 i { stroke: #8a93a2; background: #8a93a2; }
.cs-chart__dot { stroke: #fff; stroke-width: 1.5; }
.cs-chart__dot.s0 { fill: var(--cs-red); } .cs-chart__dot.s1 { fill: #071c31; } .cs-chart__dot.s2 { fill: #8a93a2; }
.cs-chart__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; color: var(--cs-text); font-size: 12.5px; }
.cs-chart__legend li { display: flex; align-items: center; gap: 6px; }
.cs-chart__legend i { width: 14px; height: 3px; border-radius: 2px; }
.cs-srcline { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 !important; color: var(--cs-muted); font-size: 13px; }
.cs-srcline b { color: var(--cs-ink); font-weight: 600; }
.cs-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px !important; padding: 14px 16px; border-radius: 12px; background: #f5f6f8; color: var(--cs-text); font-size: 13.5px; line-height: 20px; }
.cs-note svg { width: 20px; height: 20px; color: var(--cs-muted); }
.cs-module .cs-table-wrap { margin-top: 14px; }

/* Реклама: превью объявлений */
.cs-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-ad { padding: 12px; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; box-shadow: var(--cs-shadow); }
.se-cs .cs-ad__channel { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cs-ink); font-size: 14px; font-weight: 800; }
.cs-ad__channel i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--cs-red); box-shadow: inset 0 0 0 4px var(--cs-red), inset 0 0 0 6px #fff; }
.cs-ad__box { position: relative; padding: 10px; border: 1px solid #eef0f3; border-radius: 10px; background: #fcfcfd; }
.cs-ad__search { display: flex; align-items: stretch; height: 30px; border: 2px solid #ffd43b; border-radius: 7px; overflow: hidden; background: #fff; }
.cs-ad__search span { flex: 1; padding: 0 8px; color: var(--cs-ink); font-size: 12.5px; line-height: 26px; }
.cs-ad__search em { padding: 0 12px; background: #ffd43b; color: var(--cs-ink); font-size: 12px; font-style: normal; font-weight: 700; line-height: 26px; }
.cs-ad__serp { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.cs-ad__link { color: #1a47c8; font-size: 13.5px; line-height: 18px; font-weight: 600; }
.cs-ad__line { display: flex; align-items: center; gap: 6px; color: #1b8a3e; font-size: 12px; }
.se-cs .cs-ad__badge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #eef7df; color: #2e7d1a; font-size: 10.5px; font-style: normal; font-weight: 700; }
.cs-ad__badge--corner { position: absolute; left: 16px; bottom: 14px; background: rgba(255, 255, 255, .9); color: var(--cs-muted); }
.cs-ad__text { color: var(--cs-text); font-size: 12px; line-height: 17px; }
.cs-ad__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: center; }
.cs-ad__img { display: block; border-radius: 8px; background: #eef0f3; overflow: hidden; aspect-ratio: 1.2; }
.cs-ad__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-ad__copy { display: flex; flex-direction: column; gap: 6px; }
.cs-ad__copy b { color: var(--cs-ink); font-size: 14px; line-height: 18px; font-weight: 800; }
.cs-ad__price { color: var(--cs-ink); font-size: 16px; font-weight: 800; }
.cs-ad__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 6px; background: var(--cs-red); color: #fff; font-size: 12px; font-weight: 700; }

/* Поддержка: до / после */
.cs-bas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs-ba { position: relative; margin: 0; padding-top: 14px; }
.se-cs .cs-ba__label { position: absolute; z-index: 2; left: 20px; top: 0; padding: 6px 16px; border-radius: 15px; color: #fff; font-size: 13px; font-weight: 700; }
.cs-ba.is-before .cs-ba__label { background: linear-gradient(180deg, var(--cs-red-2), var(--cs-red-3)); }
.cs-ba.is-after .cs-ba__label { background: var(--cs-navy); }
.cs-ba__win { border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; box-shadow: var(--cs-shadow); overflow: hidden; }
.cs-ba__win > .cs-ba__shot, .cs-ba__win > .cs-ba__body { aspect-ratio: 16 / 7; }
.cs-ba__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid #eef0f3; background: #f7f8fa; }
.cs-ba__bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.cs-ba__bar i:nth-child(2) { background: #febc2e; }
.cs-ba__bar i:nth-child(3) { background: #d6d9df; }
.cs-ba__bar span { flex: 1; height: 12px; margin-left: 10px; border-radius: 6px; background: #eceef2; }
.se-cs .cs-ba__shot { display: block; aspect-ratio: 16 / 7; }
.cs-ba__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-ba__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; overflow: hidden; padding: 20px; text-align: center; }
.cs-ba__icon svg { width: 36px; height: 36px; color: var(--cs-ink); }
.cs-ba.is-after .cs-ba__icon svg { color: #17803d; }
.cs-ba__body b { color: var(--cs-ink); font-size: 16px; font-weight: 800; }
.cs-ba__body span { color: var(--cs-muted); font-size: 12.5px; }
.cs-table-wrap.is-log .cs-table tbody th { white-space: nowrap; }

/* ---------- Просмотр изображений ---------- */
.cs-lightbox { position: fixed; z-index: 3000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 50px 70px; background: rgba(7, 15, 26, .92); }
.cs-lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; margin: 0; }
.cs-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 140px); border-radius: 8px; background: #fff; object-fit: contain; }
.cs-lightbox__cap { color: #e3e8ef; font: 500 14px/1.4 var(--cs-font, sans-serif); text-align: center; }
.cs-lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.cs-lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.cs-lightbox__btn svg { width: 22px; height: 22px; }
.cs-lightbox__close { right: 18px; top: 18px; }
.cs-lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.cs-lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.cs-lightbox__count { position: absolute; left: 20px; top: 26px; color: #b7c2cf; font: 600 13px/1 var(--cs-font, sans-serif); }

/* =========================================================================
 * Адаптив
 * ====================================================================== */

@media (max-width: 1180px) {
    .se-cs .cs-pass { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .cs-pass__lead { grid-column: 1 / -1; }
    .cs-pass__item { min-width: 0; }
    .cs-cat-hero__decor { opacity: .55; right: -120px; }
    .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-intro { grid-template-columns: minmax(0, 1fr) 290px; }
    .se-cs .cs-checks, .se-cs .cs-metrics.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-step:nth-child(odd)::before { display: none; }
    .cs-concl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cs-next { grid-column: 1 / -1; }
    .cs-work { grid-template-columns: 340px minmax(0, 1fr); }
    .cs-banner__decor { right: -60px; opacity: .6; }
}

@media (max-width: 960px) {
    .se-cs .cs-h1 { font-size: 38px; line-height: 44px; }
    .cs-layout { grid-template-columns: minmax(0, 1fr); }
    .se-cs .cs-filters-btn { display: inline-flex; }
    .cs-filters { position: fixed; z-index: 2600; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); border-radius: 0 18px 18px 0; background: #fff; box-shadow: 20px 0 60px rgba(7, 28, 49, .2); overflow-y: auto; transform: translateX(-105%); visibility: hidden; transition: transform .25s ease, visibility .25s ease; }
    .cs-cat.is-filters-open .cs-filters { transform: none; visibility: visible; }
    .cs-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .cs-filters__head b { color: var(--cs-navy); font-family: var(--cs-head); font-size: 20px; font-weight: 900; }
    .se-cs .cs-filters__close { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f1f2f5; color: var(--cs-ink); cursor: pointer; }
    .cs-filters__close svg { width: 18px; height: 18px; }
    .se-cs .cs-filters__backdrop { position: fixed; z-index: 2590; inset: 0; display: block; margin: 0; padding: 0; border: 0; background: rgba(7, 28, 49, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
    .cs-cat.is-filters-open .cs-filters__backdrop { opacity: 1; visibility: visible; }
    .cs-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .cs-hero__media { min-height: 0; order: 2; padding-bottom: 10px; }
    .cs-hero__media img { max-height: 320px; }
    .cs-intro { grid-template-columns: minmax(0, 1fr); }
    .cs-toc { position: static; order: -1; }
    .cs-sols, .cs-reslist, .cs-team, .cs-simgrid, .cs-ads, .cs-feats { grid-template-columns: minmax(0, 1fr); }
    .se-cs .cs-feats, .se-cs .cs-metrics { grid-template-columns: minmax(0, 1fr); }
    .cs-work { grid-template-columns: minmax(0, 1fr); }
    .cs-devices { grid-template-columns: minmax(0, 1fr); }
    .cs-restable.has-note { grid-template-columns: minmax(0, 1fr); }
    .cs-check-head { flex-direction: column; gap: 0; }
    .se-cs .cs-check-head__src { flex: none; margin: 0 0 6px; }
    .cs-bas { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .cs-banner { padding: 30px 28px; }
    .cs-banner__decor { display: none; }
    .cs-cat-hero__decor { display: none; }
}

@media (max-width: 640px) {
    .se-cs .cs-wrap { padding: 0 16px; }
    .se-cs .cs-h1 { font-size: 30px; line-height: 36px; letter-spacing: -.4px; }
    .se-cs .cs-h2 { font-size: 22px; line-height: 28px; }
    .cs-cat-hero { padding: 24px 0 22px; }
    .cs-cat-hero__sub { font-size: 16px; line-height: 23px; }
    .cs-cat-hero__decor { display: none; }
    .cs-tabs { flex-wrap: nowrap; margin: 0 -14px; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; }
    .cs-tabs::-webkit-scrollbar { display: none; }
    .se-cs .cs-tab { flex: 0 0 auto; }
    .cs-toolbar__row { flex-wrap: wrap; }
    .cs-search { flex: 1 1 100%; }
    .cs-sort { flex: 1 1 0; }
    .cs-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-results__head { flex-direction: column; gap: 2px; }
    .cs-pager { flex-direction: column; gap: 14px; }
    .se-cs .cs-pager__more { width: 100%; }
    .se-cs .cs-banner__title { font-size: 25px; line-height: 30px; }
    .cs-hero__top { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
    .cs-hero__btns .cs-btn { flex: 1 1 100%; }
    .se-cs .cs-pass { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; }
    .cs-pass__lead { grid-column: 1 / -1; }
    .cs-taskcards, .se-cs .cs-checks, .se-cs .cs-metrics, .se-cs .cs-metrics.is-4, .cs-steps, .cs-concl { grid-template-columns: minmax(0, 1fr); }
    .cs-step + .cs-step::before { display: none; }
    .cs-sol { gap: 14px; }
    .cs-sol__icon { width: 58px; height: 58px; }
    .cs-sol__copy span { padding-left: 0; }
    .cs-gallery { grid-template-columns: minmax(0, 1fr); }
    .cs-member { align-items: flex-start; }
    .se-cs .cs-member__photo { width: 80px; height: 80px; }
    .cs-meta { flex-direction: column; align-items: flex-start; }
    .cs-share { flex-wrap: wrap; }
    .cs-similar__nav { width: 100%; }
    .se-cs .cs-navbtn { flex: 1 1 auto; justify-content: center; }
    .cs-screen.is-mobile { flex-basis: 150px; }
    .cs-screen.is-mobile .cs-screen__frame { width: 150px; }
    .cs-review { padding: 70px 18px 18px; }
    .cs-lightbox { padding: 60px 10px; }
    .cs-lightbox__prev, .cs-lightbox__next { top: auto; bottom: 14px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .se-cs *, .se-cs *::before, .se-cs *::after { transition: none !important; }
}
html.cs-lock { overflow: hidden; }
.cs-lightbox[hidden] { display: none; }