/*
 * SERP Expert 2.0.68 — «Создаем и продвигаем сайты на CMS» (главная, #cms) по макету 1536×1024.
 * На десктопе все размеры = размер макета × --u, где --u = ширина контента / 1405 (ширина сетки карточек в макете).
 * Ниже — свои размеры для планшета (≤1023) и телефона (≤767).
 */

.se-ex.scm {
    --w: min(1220px, calc(100vw - 40px));
    --u: calc(var(--w) / 1405);
    --scm-red: #e2030a;
    --scm-ink: #050a1c;
    --scm-muted: #586378;
    --scm-head: var(--font-heading, "Raleway", "Manrope", system-ui, sans-serif);
    --scm-font: var(--font-main, "Manrope", system-ui, sans-serif);
    position: relative;
    overflow: hidden;
    padding: calc(var(--u) * 107) 20px calc(var(--u) * 51);
    background: #fcfcfd;
    color: var(--scm-ink);
    font-family: var(--scm-font);
    isolation: isolate;
}
.scm *, .scm *::before, .scm *::after { box-sizing: border-box; }
.scm__inner { position: relative; z-index: 1; width: var(--w); max-width: 1220px; margin: 0 auto; }

/* ---------- Декор ---------- */
.scm__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scm__deco > span { position: absolute; display: block; }
.scm__dots { background-image: radial-gradient(circle, #dfe3ea 1.4px, transparent 1.7px); }
.scm__dots--tl { left: calc(var(--s) * -9); top: calc(var(--s) * 36); width: calc(var(--s) * 118); height: calc(var(--s) * 141); background-size: calc(var(--s) * 23.6) calc(var(--s) * 23.6); --s: calc(100vw / 1536); }
.scm__dots--br { right: calc(var(--s) * -8); bottom: calc(var(--s) * 45); width: calc(var(--s) * 104); height: calc(var(--s) * 110); background-size: calc(var(--s) * 21) calc(var(--s) * 22.5); --s: calc(100vw / 1536); }
.scm__ball { --s: calc(100vw / 1536); background: center / contain no-repeat; }
.scm__ball--tr { right: calc(var(--s) * 30); top: calc(var(--s) * 35); width: calc(var(--s) * 94); height: calc(var(--s) * 94); background-image: url("../images/cms/ball-1.webp"); }
.scm__ball--bl { left: calc(var(--s) * 21); bottom: calc(var(--s) * 86); width: calc(var(--s) * 82); height: calc(var(--s) * 82); background-image: url("../images/cms/ball-2.webp"); }
.scm__arc { --s: calc(100vw / 1536); border-radius: 50%; }
.scm__arc--tr { left: calc(var(--s) * 1338); top: calc(var(--s) * -712); width: calc(var(--s) * 924); height: calc(var(--s) * 924); border: 1px solid rgba(238, 120, 140, .22); background: radial-gradient(circle at 30% 70%, rgba(252, 226, 231, .7), rgba(253, 236, 240, .35) 60%, rgba(255, 244, 246, .2)); }
.scm__arc--br { left: calc(var(--s) * 1330); top: calc(var(--s) * 730); width: calc(var(--s) * 940); height: calc(var(--s) * 940); border: 1px solid rgba(238, 120, 140, .2); background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 78%, rgba(251, 222, 228, .32) 98%, rgba(255, 255, 255, 0) 100%); }
.scm__arc--bl { left: calc(var(--s) * -780); top: calc(var(--s) * 560); width: calc(var(--s) * 1060); height: calc(var(--s) * 1060); border: 1px solid rgba(238, 120, 140, .2); background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 66%, rgba(251, 218, 225, .35) 97%, rgba(255, 255, 255, 0) 100%); }
.scm__glow { --s: calc(100vw / 1536); border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 205, 214, .55), rgba(252, 225, 231, .25) 55%, rgba(255, 255, 255, 0)); }
.scm__glow--tr { right: calc(var(--s) * -40); top: calc(var(--s) * -50); width: calc(var(--s) * 260); height: calc(var(--s) * 260); }
.scm__glow--bl { left: calc(var(--s) * -80); bottom: calc(var(--s) * 10); width: calc(var(--s) * 260); height: calc(var(--s) * 240); }

/* ---------- Заголовок ---------- */
.scm__head { position: relative; padding-left: calc(var(--u) * 30); }
.scm__headtext { min-width: 0; padding-right: calc(var(--u) * 150); }
.se-ex .scm__eyebrow { margin: 0 0 0 calc(var(--u) * 3); color: var(--scm-red); font: 700 max(11px, calc(var(--u) * 14.5)) / 1 var(--scm-font); letter-spacing: .115em; text-transform: uppercase; }
.se-ex .scm__title { margin: calc(var(--u) * 15) 0 0; padding: 0; color: var(--scm-ink); font-family: var(--scm-font); font-size: calc(var(--u) * 62); line-height: 1.1; font-weight: 760; letter-spacing: -.0645em; text-transform: none; }
.se-ex .scm__subtitle { margin: calc(var(--u) * 5) 0 0 calc(var(--u) * 1); color: var(--scm-muted); font: 400 calc(var(--u) * 31) / 1.2 var(--scm-font); letter-spacing: -.025em; }

.scm__nav { position: absolute; top: calc(var(--u) * 52); right: calc(var(--u) * 31); display: flex; gap: calc(var(--u) * 10); }
.scm__nav[hidden] { display: none; }
.se-ex .scm__arrow { display: grid; place-items: center; width: calc(var(--u) * 53); height: calc(var(--u) * 53); margin: 0; padding: 0; border: 1px solid #e4e7ed; border-radius: 50%; background: #fff; color: #1d2638; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(20, 30, 70, .08); cursor: pointer; transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.se-ex .scm__arrow svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.se-ex .scm__arrow--next { border-color: transparent; background: linear-gradient(180deg, #ea0a1a, #d5000f); color: #fff; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(226, 3, 10, .26); }
.se-ex .scm__arrow:hover:not(:disabled) { transform: translateY(-1px); }
.se-ex .scm__arrow:disabled { opacity: .45; cursor: default; }
.se-ex .scm__arrow:focus-visible, .scm__btn:focus-visible, .scm-card a:focus-visible, .se-ex .scm__dotbtn:focus-visible { outline: 3px solid rgba(226, 3, 10, .3); outline-offset: 3px; }

/* ---------- Карточки ---------- */
.se-ex .scm__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 17); margin: calc(var(--u) * 33) 0 0; padding: 0; list-style: none; }
.se-ex .scm-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: calc(var(--u) * 509); margin: 0; padding: 0; border-radius: calc(var(--u) * 14); background: #fff; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 38) rgba(25, 40, 85, .07), 0 0 0 1px rgba(25, 40, 85, .025); transition: box-shadow .2s ease, transform .2s ease; }
.se-ex .scm-card::before { content: none; }
.se-ex .scm-card[hidden] { display: none; }
.se-ex .scm-card:hover { box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 44) rgba(25, 40, 85, .11), 0 0 0 1px rgba(25, 40, 85, .03); transform: translateY(-2px); }
.scm-card__head { display: flex; align-items: center; gap: calc(var(--u) * 21); height: calc(var(--u) * 74); margin: calc(var(--u) * 21.5) calc(var(--u) * 14) 0 calc(var(--u) * 28); }
.scm-card__logo { display: grid; place-items: center; flex: 0 0 calc(var(--u) * 74); width: calc(var(--u) * 74); height: calc(var(--u) * 74); }
.scm-card__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scm-card__logo--mono span { display: grid; place-items: center; width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-radius: 50%; background: var(--mono, #1b3a6b); color: #fff; font: 800 calc(var(--u) * 21) / 1 var(--scm-font); letter-spacing: -.02em; }
.se-ex .scm-card__name { min-width: 0; margin: 0; padding: 0; color: var(--scm-ink); font: 800 max(19px, calc(var(--u) * 29)) / 1.2 var(--scm-font); letter-spacing: -.025em; position: relative; top: calc(var(--u) * 1); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scm-card__link { color: inherit; text-decoration: none; }
.scm-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.scm-card__window { position: relative; flex: 0 0 auto; height: calc(var(--u) * 288); margin: calc(var(--u) * 17.5) calc(var(--u) * 17) 0; overflow: hidden; border: 1px solid #e6e9ef; border-radius: calc(var(--u) * 9); background: #fff; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(25, 40, 85, .07); }
.scm-card__bar { display: flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 17); padding-left: calc(var(--u) * 10); background: #eceff3; }
.scm-card__bar i { display: block; width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); border-radius: 50%; background: #e94b5b; }
.scm-card__bar i:nth-child(2) { background: #f4c045; }
.scm-card__bar i:nth-child(3) { background: #4fbe74; }
.scm-card__shot { display: block; width: 100%; height: calc(100% - var(--u) * 17); object-fit: cover; object-position: top center; transition: transform .4s ease; }
.scm-card:hover .scm-card__shot { transform: scale(1.02); }
.se-ex .scm-card__caption { margin: calc(var(--u) * 20) calc(var(--u) * 14) 0; color: var(--scm-ink); font: 500 max(13px, calc(var(--u) * 16)) / 1.25 var(--scm-font); letter-spacing: -.025em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scm-card__foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin: auto calc(var(--u) * 25) calc(var(--u) * 20) calc(var(--u) * 36); }
.se-ex .scm-card__links { position: relative; z-index: 2; display: flex; align-items: center; gap: 0 calc(var(--u) * 20); margin: 0; color: var(--scm-muted); font: 400 max(13px, calc(var(--u) * 15)) / 1.5 var(--scm-font); letter-spacing: -.034em; white-space: nowrap; }
.scm-card__links a { color: inherit; text-decoration: none; transition: color .15s ease; }
.scm-card__links a:hover { color: var(--scm-red); }
.scm-card__dot { color: #8a93a6; font-weight: 700; }
.scm-card__go { display: grid; flex: 0 0 auto; width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--scm-red); transition: transform .2s ease; }
.scm-card__go svg { width: 100%; height: 100%; }
.scm-card:hover .scm-card__go { transform: translateX(3px); }

/* Схема окна, если для платформы нет скриншота */
.scm-card__skeleton { position: relative; display: block; height: calc(100% - var(--u) * 17); background: #fff; }
.scm-card__skeleton i { position: absolute; display: block; border-radius: calc(var(--u) * 3); background: #eef1f5; }
.scm-sk__nav { left: 6%; right: 6%; top: calc(var(--u) * 14); height: calc(var(--u) * 8); }
.scm-sk__h { left: 6%; width: 40%; top: calc(var(--u) * 58); height: calc(var(--u) * 14); background: #dfe4ec !important; }
.scm-sk__h--2 { top: calc(var(--u) * 80); width: 32%; }
.scm-sk__t { left: 6%; width: 38%; top: calc(var(--u) * 110); height: calc(var(--u) * 7); }
.scm-sk__btn { left: 6%; width: 28%; top: calc(var(--u) * 136); height: calc(var(--u) * 20); background: var(--mono, #1b3a6b) !important; opacity: .85; }
.scm-sk__img { right: 6%; width: 42%; top: calc(var(--u) * 44); height: calc(var(--u) * 132); background: linear-gradient(135deg, #eef1f6, #e2e7ef) !important; }
.scm-sk__row { left: 6%; right: 6%; top: calc(var(--u) * 196); height: calc(var(--u) * 52); background: #f3f5f8 !important; }

/* ---------- Пагинация ---------- */
.scm__pager { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 28); margin-top: calc(var(--u) * 32); }
.scm__pager[hidden] { display: none; }
.scm__dots-nav { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.se-ex .scm__dotbtn { width: calc(var(--u) * 15); height: calc(var(--u) * 11); margin: 0; padding: 0; border: 0; border-radius: calc(var(--u) * 6); background: #d6dae3; cursor: pointer; transition: width .2s ease, background .2s ease; }
.se-ex .scm__dotbtn.is-active { width: calc(var(--u) * 38); height: calc(var(--u) * 10); background: var(--scm-red); }
.scm__count { color: #525c71; font: 400 max(13px, calc(var(--u) * 17)) / 1 var(--scm-font); letter-spacing: .01em; }

/* ---------- Плашка «Не знаете, какую платформу выбрать?» ---------- */
.scm__help { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: calc(var(--u) * 1117); max-width: 100%; min-height: calc(var(--u) * 119); margin: calc(var(--u) * 16) auto 0; padding: calc(var(--u) * 10) calc(var(--u) * 78) calc(var(--u) * 10) calc(var(--u) * 82); border: 1px solid #eef0f4; border-radius: calc(var(--u) * 16); background: rgba(255, 255, 255, .86); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(25, 40, 85, .06); }
.scm__pager[hidden] + .scm__help { margin-top: calc(var(--u) * 50); }
.scm__help-text { min-width: 0; }
.se-ex .scm__help-title { margin: calc(var(--u) * 6) 0 0; color: var(--scm-ink); font: 800 calc(var(--u) * 25.5) / 1.2 var(--scm-font); letter-spacing: -.065em; }
.se-ex .scm__help-sub { margin: calc(var(--u) * 7) 0 0; color: var(--scm-muted); font: 400 max(14px, calc(var(--u) * 17.5)) / 1.3 var(--scm-font); letter-spacing: .025em; }
.se-ex .scm__btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: calc(var(--u) * 15); width: calc(var(--u) * 261); height: calc(var(--u) * 59); margin: calc(var(--u) * 6) 0 0; padding: 0 0 0 calc(var(--u) * 33); border: 0; border-radius: calc(var(--u) * 8); background: linear-gradient(180deg, #ea0620, #d2010f); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 28) rgba(226, 3, 10, .22); color: #fff; font: 600 max(14px, calc(var(--u) * 15.4)) / 1 var(--scm-font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s ease, transform .2s ease; }
.se-ex .scm__btn svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); transition: transform .2s ease; }
.se-ex .scm__btn:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.se-ex .scm__btn:hover svg { transform: translateX(3px); }

/* ---------- Узкий десктоп: текст не меньше читаемого, поэтому чуть плотнее ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .scm-card__foot { margin-left: calc(var(--u) * 26); margin-right: calc(var(--u) * 18); }
    .se-ex .scm-card__links { gap: 0 7px; font-size: 12.5px; }
    .se-ex .scm__btn { width: auto; min-width: calc(var(--u) * 261); padding: 0 22px; }
}

/* ---------- Планшет ---------- */
@media (max-width: 1023px) {
    .se-ex.scm { --w: calc(100vw - 40px); padding: 64px 20px 48px; }
    .scm__head { padding-left: 0; }
    .scm__headtext { padding-right: 130px; }
    .se-ex .scm__eyebrow { font-size: 14px; letter-spacing: .16em; }
    .se-ex .scm__title { margin-top: 12px; font-size: 44px; }
    .se-ex .scm__subtitle { margin-top: 6px; font-size: 22px; }
    .scm__nav { top: auto; bottom: 4px; right: 0; gap: 10px; }
    .se-ex .scm__arrow { width: 48px; height: 48px; }
    .se-ex .scm__arrow svg { width: 22px; height: 22px; }
    .se-ex .scm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
    .se-ex .scm-card { height: auto; border-radius: 14px; }
    .scm-card__head { gap: 16px; height: 64px; margin: 20px 16px 0 20px; }
    .scm-card__logo { flex-basis: 64px; width: 64px; height: 64px; }
    .scm-card__logo--mono span { width: 54px; height: 54px; font-size: 18px; }
    .se-ex .scm-card__name { font-size: 26px; }
    .scm-card__window { height: auto; aspect-ratio: 306 / 288; margin: 18px 18px 0; border-radius: 9px; }
    .scm-card__bar { gap: 5px; height: 18px; padding-left: 10px; }
    .scm-card__bar i { width: 6px; height: 6px; }
    .scm-card__shot, .scm-card__skeleton { height: calc(100% - 18px); }
    .se-ex .scm-card__caption { margin: 18px 16px 0; font-size: 18px; white-space: normal; }
    .scm-card__foot { margin: 16px 24px 20px 24px; }
    .se-ex .scm-card__links { gap: 0 14px; font-size: 17px; }
    .scm-card__go { width: 22px; height: 22px; }
    .scm__pager { gap: 22px; margin-top: 28px; }
    .scm__dots-nav { gap: 10px; }
    .se-ex .scm__dotbtn { width: 14px; height: 10px; border-radius: 5px; }
    .se-ex .scm__dotbtn.is-active { width: 34px; height: 10px; }
    .scm__count { font-size: 16px; }
    .scm__help { width: 100%; min-height: 0; margin-top: 24px; padding: 24px 28px; border-radius: 16px; }
    .scm__pager[hidden] + .scm__help { margin-top: 40px; }
    .se-ex .scm__help-title { font-size: 23px; }
    .se-ex .scm__help-sub { margin-top: 6px; font-size: 17px; }
    .se-ex .scm__btn { width: auto; height: 54px; padding: 0 28px; gap: 14px; border-radius: 8px; font-size: 17px; }
    .se-ex .scm__btn svg { width: 20px; height: 20px; }
    .scm__ball--tr { right: 14px; top: 18px; width: 52px; height: 52px; }
    .scm__ball--bl { left: -16px; bottom: 140px; width: 48px; height: 48px; }
    .scm__dots--tl, .scm__dots--br { --s: .6px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
    .se-ex.scm { --w: calc(100vw - 32px); padding: 48px 16px 40px; }
    .scm__headtext { padding-right: 0; }
    .se-ex .scm__eyebrow { font-size: 12px; letter-spacing: .14em; }
    .se-ex .scm__title { margin-top: 10px; font-size: 32px; line-height: 1.12; }
    .se-ex .scm__subtitle { font-size: 18px; }
    .scm__nav { position: static; justify-content: flex-end; margin-top: 16px; }
    .se-ex .scm__arrow { width: 44px; height: 44px; }
    .se-ex .scm__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
    .scm-card__head { height: 58px; margin: 18px 14px 0 16px; gap: 14px; }
    .scm-card__logo { flex-basis: 58px; width: 58px; height: 58px; }
    .se-ex .scm-card__name { font-size: 24px; }
    .scm-card__window { margin: 16px 16px 0; }
    .se-ex .scm-card__caption { font-size: 17px; }
    .scm-card__foot { margin: 14px 20px 18px; }
    .se-ex .scm-card__links { font-size: 16px; }
    .scm__help { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 20px; text-align: left; }
    .se-ex .scm__help-title { font-size: 20px; }
    .se-ex .scm__help-sub { font-size: 15px; }
    .se-ex .scm__btn { width: 100%; height: 52px; font-size: 16px; }
    .scm__ball--tr { right: -10px; top: 10px; width: 40px; height: 40px; }
    .scm__ball--bl { display: none; }
    .scm__deco > .scm__dots--br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .se-ex .scm-card, .scm-card__shot, .scm-card__go, .se-ex .scm__btn, .se-ex .scm__arrow { transition: none; }
}