/* ==========================================================================
   Береста CRM — сайт berestacrm.ru.

   Масштаб: вся вёрстка в rem, а корневой размер растёт вместе с шириной окна
   (0.65vw — как на kotplatform.ru). На 1440 корень 9.36px, на 1920 — 12.48px:
   страница на любом мониторе выглядит одинаково, просто крупнее или мельче.
   На узких экранах корень фиксируется, иначе текст стал бы нечитаемым.
   ========================================================================== */

html { font-size: max(8px, 0.65vw); }
@media (max-width: 62rem) { html { font-size: 9px; } }
@media (max-width: 40rem) { html { font-size: 10px; } }
@media print                { html { font-size: 11px; } }

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* Запасной шрифт с метриками Inter: пока Inter грузится, текст набран
   Arial того же размера, и при подмене строки не прыгают (CLS). */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 107.1%;
    ascent-override: 90.4%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

:root {
    /* Основной цвет. На странице его переопределяет цвет из lk
       («Сайт» → «Внешний вид»): layout.php выводит те же переменные. */
    --brand: #2563eb;            /* синий — как основной цвет системы (--accent в CRM) */
    --brand-dark: #1d4ed8;
    --brand-light: #3b82f6;
    --brand-soft: #eff4ff;
    --brand-soft-2: #f6f9ff;
    --brand-rgb: 37, 99, 235;
    --brand-2: #4f46e5;          /* второй цвет для градиентов */

    --ink: #101828;
    --ink-2: #344054;
    --muted: #5d6b82;
    --faint: #8a94a6;
    --line: #e4e7ec;
    --line-soft: #f0f2f5;
    --bg: #ffffff;
    --bg-2: #f7f8fb;
    --dark: #0b1020;
    --dark-2: #161d33;
    --shade: 16, 24, 40;         /* цвет теней */

    --amber: #b45309;
    --amber-soft: #fef3e2;
    --red: #b91c1c;
    --red-soft: #fdeceb;
    --blue: #1d4ed8;
    --blue-soft: #eaf0fe;
    --violet: #6d28d9;
    --violet-soft: #f1ecfe;
    --green: #047857;
    --green-soft: #e6f6ef;

    --font: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', Consolas, monospace;

    --r: 2rem;
    --r-sm: 1.2rem;
    --r-lg: 3rem;
    /* Тени в два слоя: короткая даёт контур, длинная — мягкий объём. */
    --shadow-sm: 0 .1rem .2rem rgba(var(--shade), .05), 0 .1rem .3rem rgba(var(--shade), .06);
    --shadow: 0 .2rem .4rem -.2rem rgba(var(--shade), .06), 0 1.2rem 2.4rem -.6rem rgba(var(--shade), .1);
    --shadow-lg: 0 .4rem .8rem -.4rem rgba(var(--shade), .08), 0 2.4rem 4.8rem -1.2rem rgba(var(--shade), .18);
    --shadow-brand: 0 .6rem 1.6rem -.6rem rgba(var(--brand-rgb), .55);
    --wrap: 138rem;
    --head-h: 7.2rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 9rem; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--font); font-size: 1.4rem; line-height: 1.6;
    -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01';
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration-color: rgba(var(--brand-rgb), .3); text-underline-offset: .2em; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: 5rem; line-height: 1.12; }
h2 { font-size: 3.6rem; }
h3 { font-size: 1.95rem; font-weight: 700; letter-spacing: -.01em; }
p, ul, ol { margin: 0; }
small { font-size: 1.25rem; }
code, .mono { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: .25rem solid var(--brand-light); outline-offset: .25rem; border-radius: .5rem; }
.i { width: 1.9rem; height: 1.9rem; flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 2.4rem; }
.skip { position: absolute; left: -999rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: #fff; padding: 1rem 1.6rem; border-radius: .8rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* ------------------------------------------------------------------ Кнопки */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
    padding: 1.2rem 2.2rem; border-radius: .95rem; border: .1rem solid transparent;
    font-size: 1.45rem; font-weight: 600; line-height: 1.2; text-decoration: none;
    cursor: pointer; white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn .i { width: 1.7rem; height: 1.7rem; }
/* Кнопки плоские: сплошной цвет, без теней и объёма. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-primary:active { background: var(--brand-dark); }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--dark-2); color: #fff; }
.btn-lg { padding: 1.85rem 3.4rem; font-size: 1.7rem; border-radius: 1.1rem; }
.btn-sm { padding: .85rem 1.6rem; font-size: 1.35rem; border-radius: .8rem; }
/* Стрелка в кнопке чуть уезжает вперёд при наведении. */
.btn .go { transition: transform .18s; }
.btn:hover .go { transform: translateX(.35rem); }

/* ------------------------------------------------------------------- Шапка */
.head {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(1.2rem);
    border-bottom: .1rem solid transparent; transition: border-color .2s, box-shadow .2s, background .2s;
}
/* Прокрученная шапка почти непрозрачна — размывать под ней нечего, а
   фильтр фона браузер пересчитывает на каждый кадр прокрутки и держит
   под него отдельный слой во весь экран. Убираем его там, где он не виден. */
.head.scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 1rem 2.4rem -1.6rem rgba(var(--shade), .35); background: rgba(255, 255, 255, .97); backdrop-filter: none; }
.head-in { display: flex; align-items: center; gap: 2rem; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: .9rem; font-size: 1.95rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.brand-mark {
    width: 3.2rem; height: 3.2rem; border-radius: .9rem; display: grid; place-items: center;
    background: var(--brand); color: #fff;
    font-size: 1.7rem; font-weight: 800;
}
.brand b { color: var(--brand); }
.nav { display: flex; align-items: center; gap: .2rem; margin: 0 auto; }
.nav > a, .nav > .drop > button {
    display: inline-flex; align-items: center; gap: .4rem; padding: .9rem 1.3rem; border: 0; background: none;
    font: inherit; font-size: 1.5rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
    border-radius: .9rem; cursor: pointer; transition: color .15s, background .15s;
}
.nav > a:hover, .nav > .drop > button:hover { color: var(--ink); background: var(--bg-2); }
.nav > a.on { color: var(--brand-dark); font-weight: 600; }
.nav .drop { position: relative; }
.nav .drop > button .i { width: 1.3rem; height: 1.3rem; color: var(--faint); transition: transform .2s; }
.nav .drop[aria-expanded="true"] > button { color: var(--ink); background: var(--bg-2); }
.nav .drop[aria-expanded="true"] > button .i { transform: rotate(180deg); }

/* Выпадающий список: между кнопкой и меню есть «мостик» — меню не закрывается,
   пока мышь до него доезжает. */
.drop-menu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, .6rem);
    min-width: 42rem; padding: 1.4rem; margin-top: .8rem;
    background: #fff; border: .1rem solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s, transform .18s, visibility .18s;
}
.drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -1.6rem; height: 1.6rem; }
.nav .drop[aria-expanded="true"] .drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.drop-menu a {
    display: flex; gap: 1.2rem; padding: 1.1rem 1.2rem; border-radius: 1.2rem;
    text-decoration: none; color: var(--ink); transition: background .15s, transform .15s;
}
.drop-menu a:hover { background: var(--brand-soft-2); transform: translateX(.3rem); }
.drop-menu .i { width: 2.1rem; height: 2.1rem; color: var(--brand); margin-top: .2rem; }
.drop-menu b { display: block; font-size: 1.5rem; font-weight: 650; }
.drop-menu span { display: block; font-size: 1.3rem; color: var(--muted); line-height: 1.45; }
.head-cta { display: flex; align-items: center; gap: .8rem; }
.burger {
    display: none; width: 4.4rem; height: 4.4rem; align-items: center; justify-content: center;
    border: .1rem solid var(--line); border-radius: 1.1rem; background: #fff; color: var(--ink); cursor: pointer;
}
.burger .i { width: 2.2rem; height: 2.2rem; }
.nav > a.only-mob { display: none; }

/* --------------------------------------------------------------- Структура */
.sec { padding: 9.5rem 0; position: relative; }
/* Секции за пределами экрана браузер может не считать и не рисовать. На
   странице длиной в десятки тысяч точек это главная статья расхода памяти.

   `auto` во втором свойстве важно: после первого показа браузер запоминает
   настоящую высоту секции, и полоса прокрутки перестаёт прыгать. Поиск по
   странице и переходы по якорям работают — браузер раскрывает нужное сам. */
.sec:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 60rem;
}
.sec-sm { padding: 5rem 0 7rem; }
.sec-tint { background: var(--bg-2); }
.sec-dark { background: var(--dark); color: #d5dbea; }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.head-block { max-width: 78rem; margin-bottom: 5rem; }
.head-block.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.8rem;
    padding: .7rem 1.5rem; border-radius: 999px; background: var(--brand-soft);
    color: var(--brand-dark); font-size: 1.35rem; font-weight: 600;
}
.eyebrow::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; background: var(--brand); flex: none; }
.eyebrow .i { width: 1.6rem; height: 1.6rem; }
.sec-dark .eyebrow { background: rgba(255, 255, 255, .1); color: #a5b4fc; }
.sec-dark .eyebrow::before { background: #a5b4fc; }
.lead { margin-top: 1.4rem; font-size: 1.75rem; line-height: 1.6; color: var(--muted); }
.sec-dark .lead { color: #a3acc2; }
.hl { color: var(--brand); }
.grid { display: grid; gap: 1.8rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem; align-items: center; }

/* ----------------------------------------------------------- Первый экран */
.hero { position: relative; overflow: clip; isolation: isolate; }
/* Фон героя живёт бесконечной анимацией, и пока она идёт, браузер держит
   под него отдельный слой — даже когда герой давно уехал вверх. Ставим на
   паузу, как только он ушёл с экрана: класс вешает site.js. */
.hero.off::before, .hero.off::after, .hero.off .float, .hero.off .hl { animation-play-state: paused; }
.hero .split { align-items: center; }
/* Живой фон: два цветных пятна медленно плывут и меняют размер. */
.hero::before {
    content: ''; position: absolute; z-index: -2; inset: -24rem -16rem auto -16rem; height: 80rem; pointer-events: none;
    background:
        radial-gradient(36rem 28rem at 20% 32%, rgba(var(--brand-rgb), .2), transparent 70%),
        radial-gradient(40rem 30rem at 80% 10%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 70%),
        radial-gradient(30rem 24rem at 60% 70%, rgba(var(--brand-rgb), .1), transparent 70%);
    animation: aurora 16s ease-in-out infinite alternate;
    filter: saturate(1.2);
}
@keyframes aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3rem, 2rem, 0) scale(1.08); }
    100% { transform: translate3d(-3rem, 1rem, 0) scale(1.04); }
}
/* Сетка на фоне тихо едет — едва заметно, но страница «дышит». */
.hero::after {
    content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .55;
    background-image: linear-gradient(rgba(var(--shade), .04) .1rem, transparent .1rem),
                      linear-gradient(90deg, rgba(var(--shade), .04) .1rem, transparent .1rem);
    background-size: 6rem 6rem;
    -webkit-mask-image: radial-gradient(60rem 40rem at 50% 20%, #000, transparent 75%);
    mask-image: radial-gradient(60rem 40rem at 50% 20%, #000, transparent 75%);
    animation: grid-pan 24s linear infinite;
}
@keyframes grid-pan { to { background-position: 6rem 6rem, 6rem 6rem; } }

/* Появление по очереди: подпись, заголовок, текст, кнопки, строка доверия. */
.hero-in { animation: hero-in .8s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }
@keyframes hero-in { from { opacity: 0; transform: translateY(2rem); filter: blur(.4rem); } to { opacity: 1; transform: none; filter: none; } }
.hero .hl {
    background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand));
    background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: hl-flow 6s linear infinite;
}
@keyframes hl-flow { to { background-position: -200% 0; } }

/* Снимок наклоняется вслед за курсором (скрипт пишет --rx/--ry). */
.hero-shot { position: relative; margin: 2.4rem 2.6rem; perspective: 140rem; animation: shot-in 1s .25s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes shot-in { from { opacity: 0; transform: translateY(3rem) scale(.96); } to { opacity: 1; transform: none; } }
.hero-shot > figure { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.22, .61, .36, 1); transform-style: preserve-3d; }
.hero-shot > figure .shot { box-shadow: var(--shadow-lg), 0 0 0 .1rem rgba(var(--brand-rgb), .08); }
.hero-shot::before {
    content: ''; position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 4rem; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--brand-rgb), .35), transparent);
    filter: blur(3rem); opacity: .7;
}

/* Плашки вокруг снимка — что система делает сама. */
.float {
    position: absolute; display: inline-flex; align-items: center; gap: .8rem; z-index: 2;
    padding: 1rem 1.5rem; border-radius: 1.4rem; background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(.8rem); color: var(--ink); font-size: 1.35rem; font-weight: 600;
    box-shadow: var(--shadow); border: .1rem solid rgba(255, 255, 255, .7);
    animation: float-in .6s cubic-bezier(.34, 1.56, .64, 1) both, float 6s ease-in-out infinite;
}
.float .i { width: 1.8rem; height: 1.8rem; color: var(--brand); }
.float.f1 { top: -2.2rem; left: -2.2rem; animation-delay: .7s, .7s; }
.float.f2 { top: 42%; right: -3rem; animation-delay: .9s, 2.1s; }
.float.f3 { bottom: -2.2rem; left: 4rem; animation-delay: 1.1s, 3.1s; }
@keyframes float-in { from { opacity: 0; transform: scale(.6) translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.9rem; } }
/* Живое событие: текст меняется, точка пульсирует. */
.live { gap: 1rem; min-width: 26rem; }
.live-dot { position: relative; width: 1rem; height: 1rem; border-radius: 50%; background: #22c55e; flex: none; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.live-text { display: grid; }
.live-text small { font-size: 1.15rem; color: var(--faint); font-weight: 500; }
.live-text b { font-weight: 650; transition: opacity .25s, transform .25s; }
.live-text.swap b, .live-text.swap small { opacity: 0; transform: translateY(.6rem); }

.proof { display: flex; align-items: center; gap: 2.2rem; margin-top: 3rem; flex-wrap: wrap; }
.proof-item { display: flex; align-items: center; gap: .8rem; font-size: 1.35rem; color: var(--muted); }
.proof-item .i { width: 1.8rem; height: 1.8rem; color: var(--brand); }

/* ----------------------------------------------------------------- Карточки */
.card { background: #fff; border: .1rem solid var(--line); border-radius: var(--r); padding: 2.6rem; }
.card-tint { background: var(--bg-2); border-color: transparent; }
.card h3 { margin-bottom: .8rem; }
.card p { color: var(--muted); font-size: 1.4rem; }
.card-ic {
    width: 4.6rem; height: 4.6rem; border-radius: 1.4rem; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-dark); margin-bottom: 1.8rem;
    transition: transform .2s, box-shadow .2s;
}
.card-ic .i { width: 2.2rem; height: 2.2rem; }
.card-ic.amber { background: var(--amber-soft); color: var(--amber); }
.card-ic.blue { background: var(--blue-soft); color: var(--blue); }
.card-ic.violet { background: var(--violet-soft); color: var(--violet); }
.card-ic.red { background: var(--red-soft); color: var(--red); }
.card:hover .card-ic, a.card:hover .card-ic { transform: translateY(-.2rem) scale(1.05); box-shadow: 0 .8rem 1.6rem -.8rem rgba(var(--brand-rgb), .35); }
.card-link { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem; font-size: 1.4rem; font-weight: 600; text-decoration: none; color: var(--brand-dark); }
.card-link .i { width: 1.6rem; height: 1.6rem; transition: transform .18s; }
.card-link:hover .i { transform: translateX(.4rem); }
a.card { display: block; text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s, transform .18s; }
a.card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-.3rem); }

/* ---------------------------------------------------------------- Снимки UI */
.shot { display: block; position: relative; border-radius: var(--r); border: .1rem solid var(--line); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.shot img { width: 100%; }
.shot-bar { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; background: var(--bg-2); border-bottom: .1rem solid var(--line-soft); }
.shot-bar i { width: .9rem; height: .9rem; border-radius: 50%; background: #d6dbe4; }
.shot-bar span { margin-left: .8rem; font-size: 1.2rem; color: var(--faint); font-family: var(--mono); }
a.shot { text-decoration: none; color: inherit; cursor: zoom-in; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.shot:hover { box-shadow: var(--shadow-lg); border-color: var(--brand); transform: translateY(-.3rem); }
.shot-zoom {
    position: absolute; right: 1.2rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .6rem;
    padding: .7rem 1.2rem; border-radius: 999px; background: rgba(var(--shade), .84); color: #fff;
    font-size: 1.25rem; font-weight: 600; opacity: 0; transform: translateY(.4rem); transition: opacity .2s, transform .2s;
}
.shot-zoom .i { width: 1.5rem; height: 1.5rem; }
a.shot:hover .shot-zoom, a.shot:focus-visible .shot-zoom { opacity: 1; transform: none; }
.shot-cap { margin-top: 1.1rem; font-size: 1.3rem; color: var(--muted); }
figure { margin: 0; }

/* --------------------------------------------------------- Просмотр снимка */
.lb {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.2rem; padding: clamp(1rem, 3vh, 3rem); background: rgba(8, 12, 24, .92); opacity: 0; transition: opacity .18s;
}
.lb.on { opacity: 1; }
.lb img { max-width: min(100%, 160rem); max-height: 78vh; border-radius: 1.2rem; box-shadow: var(--shadow-lg); background: #fff; }
.lb-cap { color: #d5dbea; font-size: 1.4rem; font-weight: 600; text-align: center; max-width: 80rem; }
.lb-close, .lb-nav {
    position: absolute; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 2rem; cursor: pointer; transition: background .15s, transform .15s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-close { top: 2rem; right: 2rem; }
.lb-nav.prev { left: 2rem; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 2rem; top: 50%; transform: translateY(-50%); }
.lb-nav.prev:hover, .lb-nav.next:hover { transform: translateY(-50%) scale(1.08); }
.lb-count { color: #8b95ad; font-size: 1.25rem; letter-spacing: .04em; }
body.lb-open { overflow: hidden; }

/* ------------------------------------------------------------------ Списки */
.checks { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.checks li { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.45rem; }
.checks .i { width: 1.8rem; height: 1.8rem; margin-top: .3rem; color: var(--brand); }
.bullets { padding-left: 2rem; color: var(--muted); font-size: 1.4rem; display: grid; gap: .6rem; }

/* -------------------------------------------------------------------- Шаги */
.steps { counter-reset: s; display: grid; gap: 2.4rem; }
.step { position: relative; padding-left: 6rem; }
.step::before {
    counter-increment: s; content: counter(s); position: absolute; left: 0; top: -.2rem;
    width: 4.2rem; height: 4.2rem; border-radius: 1.3rem; background: var(--brand-soft); color: var(--brand-dark);
    display: grid; place-items: center; font-weight: 800; font-size: 1.6rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: 1.4rem; }

/* ------------------------------------------------------------------ Цифры */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; }
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.4rem; }
.stat { padding: 2rem 2.2rem; border-radius: 1.6rem; background: var(--bg-2); }
.stat b { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.stat span { font-size: 1.3rem; color: var(--muted); }
.sec-dark .stat { background: rgba(255, 255, 255, .05); }
.sec-dark .stat b { color: #fff; }
.sec-dark .stat span { color: #a3acc2; }
.funnel .card { text-align: center; }
.funnel-num { display: block; font-size: 3.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.funnel span { font-size: 1.3rem; color: var(--muted); }

/* ------------------------------------------------------------------ Тарифы */
.plans { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: .1rem solid var(--line); border-radius: var(--r); padding: 2.8rem; transition: transform .2s, box-shadow .2s; }
.plan:hover { transform: translateY(-.3rem); box-shadow: var(--shadow); }
.plan.best { border-color: var(--brand); box-shadow: 0 0 0 .1rem var(--brand), var(--shadow); }
.plan-tag { position: absolute; top: -1.2rem; left: 2.8rem; padding: .4rem 1.2rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: 1.2rem; font-weight: 700; }
.plan-price { margin: 1.2rem 0 .4rem; font-size: 3.4rem; font-weight: 800; letter-spacing: -.03em; }
.plan-price small { font-size: 1.4rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .checks { margin: 2rem 0; }
.plan .btn { margin-top: auto; width: 100%; }

/* ---------------------------------------------------------------- Вопросы */
.faq { display: grid; gap: .9rem; max-width: 90rem; }
.faq details { border: .1rem solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .15s, box-shadow .15s; }
.faq details[open] { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; justify-content: space-between; gap: 1.6rem; align-items: center; padding: 1.8rem 2.2rem; font-size: 1.55rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: .9rem; height: .9rem; border-right: .2rem solid var(--faint); border-bottom: .2rem solid var(--faint); transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: .4rem; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding: 0 2.2rem 2rem; color: var(--muted); font-size: 1.4rem; }

/* -------------------------------------------------------------- Форма заявки */
.lead-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42rem); gap: 5rem; align-items: center; }
.form { display: grid; gap: 1.4rem; background: #fff; border-radius: var(--r); padding: 2.8rem; box-shadow: var(--shadow); }
.field { display: grid; gap: .5rem; }
.field label { font-size: 1.3rem; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea {
    width: 100%; padding: 1.2rem 1.4rem; border: .1rem solid var(--line); border-radius: 1.1rem;
    font: inherit; font-size: 1.45rem; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 .3rem var(--brand-soft); }
.field textarea { resize: vertical; min-height: 8rem; }
.form .hp { position: absolute; left: -999rem; }
.form-note { font-size: 1.2rem; color: var(--faint); line-height: 1.5; }
.form-msg { display: none; padding: 1.2rem 1.4rem; border-radius: 1.1rem; font-size: 1.4rem; }
.form-msg.ok { display: block; background: var(--brand-soft); color: var(--brand-dark); }
.form-msg.err { display: block; background: var(--red-soft); color: var(--red); }

/* ------------------------------------------------------------------ Новости */
.posts { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card .cover { aspect-ratio: 16 / 9; background: var(--bg-2) center / cover no-repeat; }
.post-card .body { padding: 2rem 2.2rem 2.4rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.post-meta { display: flex; gap: .9rem; align-items: center; font-size: 1.2rem; color: var(--faint); flex-wrap: wrap; }
.tag { padding: .3rem .9rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 1.2rem; font-weight: 600; }
.post-card h3 { font-size: 1.85rem; }
.post-card p { color: var(--muted); font-size: 1.4rem; }
.pager { display: flex; gap: .8rem; justify-content: center; margin-top: 3.5rem; }
.filters { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.filters a { padding: .8rem 1.6rem; border-radius: 999px; border: .1rem solid var(--line); font-size: 1.35rem; text-decoration: none; color: var(--ink-2); transition: border-color .15s, background .15s, color .15s; }
.filters a:hover { border-color: var(--brand); color: var(--brand-dark); }
.filters a.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------- Документ */
.crumbs { display: flex; flex-wrap: wrap; gap: .6rem; font-size: 1.3rem; color: var(--faint); padding: 2rem 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-dark); }
.prose { max-width: 82rem; font-size: 1.65rem; line-height: 1.75; }
.prose h2 { font-size: 2.6rem; margin: 4rem 0 1.6rem; }
.prose h3 { font-size: 2rem; margin: 3rem 0 1.2rem; }
.prose p, .prose ul, .prose ol, .prose figure, .prose blockquote { margin-bottom: 2rem; }
.prose ul, .prose ol { padding-left: 2.6rem; }
.prose li { margin-bottom: .6rem; }
.prose img { border-radius: var(--r); border: .1rem solid var(--line); }
.prose figcaption { margin-top: .9rem; font-size: 1.35rem; color: var(--muted); }
.prose blockquote { margin-left: 0; padding: 1.6rem 2.2rem; border-left: .3rem solid var(--brand); background: var(--bg-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); }
.prose a { font-weight: 500; }

/* -------------------------------------------------------------------- Подвал */
.foot { background: var(--dark); color: #a3acc2; padding: 7rem 0 3.5rem; font-size: 1.4rem; }
.foot a { color: #e0e5f0; text-decoration: none; transition: color .15s; }
.foot a:hover { color: #fff; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 4rem; }
.foot h4 { color: #fff; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.8rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 1rem; }
.foot .brand { color: #fff; }
.foot-contacts { display: grid; gap: 1rem; margin-top: 2rem; }
.foot-contacts a, .foot-contacts span { display: inline-flex; align-items: center; gap: .9rem; }
.foot-contacts .i { width: 1.8rem; height: 1.8rem; color: #a5b4fc; }
.foot-social { display: flex; gap: .9rem; margin-top: 2.2rem; }
.foot-social a { width: 4rem; height: 4rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .07); display: grid; place-items: center; transition: background .15s, transform .15s; }
.foot-social a:hover { background: var(--brand); color: #fff; transform: translateY(-.2rem); }
.foot-bottom { margin-top: 5rem; padding-top: 2.6rem; border-top: .1rem solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; justify-content: space-between; font-size: 1.3rem; color: #7d879e; }

/* -------------------------------------------------------------- Полоса CTA */
.cta {
    border-radius: var(--r-lg); color: #fff; padding: 5rem; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; align-items: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--dark) 0%, #1b1f4b 55%, var(--brand-dark) 130%);
}
.cta::after {
    content: ''; position: absolute; inset: auto -10rem -20rem auto; width: 50rem; height: 50rem; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--brand-rgb), .4), transparent);
}
.cta > * { position: relative; }
.cta h2 { color: #fff; }
.cta p { color: #b4bdd6; margin-top: 1.2rem; font-size: 1.55rem; }
.cta-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------------------------------------------------- Согласие и cookie */
.consent { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.3rem; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.consent input { flex: none; width: 1.8rem; height: 1.8rem; margin: .1rem 0 0; accent-color: var(--brand); cursor: pointer; }
.cookie {
    position: fixed; z-index: 90; left: 2rem; right: 2rem; bottom: 2rem; max-width: 72rem; margin: 0 auto;
    display: flex; gap: 2rem; align-items: center; padding: 1.6rem 2rem; border-radius: var(--r);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(1.2rem); box-shadow: var(--shadow-lg);
    border: .1rem solid var(--line); font-size: 1.35rem; color: var(--ink-2);
    animation: cookie-in .5s cubic-bezier(.22, .61, .36, 1) both;
}
.cookie[hidden] { display: none; }
.cookie p { flex: 1; }
.cookie-actions { display: flex; gap: .8rem; flex: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }

/* Бургер из трёх полосок превращается в крестик. */
.burger { position: relative; }
.burger span { position: absolute; left: 1.2rem; right: 1.2rem; height: .2rem; border-radius: .2rem; background: currentColor; transition: transform .25s, opacity .2s, top .25s; }
.burger span:nth-child(1) { top: 1.45rem; }
.burger span:nth-child(2) { top: 2.1rem; }
.burger span:nth-child(3) { top: 2.75rem; }
.head.open .burger span:nth-child(1) { top: 2.1rem; transform: rotate(45deg); }
.head.open .burger span:nth-child(2) { opacity: 0; }
.head.open .burger span:nth-child(3) { top: 2.1rem; transform: rotate(-45deg); }
.nav-foot { display: none; }
.head-cta .sm { display: none; }
/* ------------------------------------------------------- Движение и вкладки */
.rv { opacity: 0; transform: translateY(1.6rem); }
.rv-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1); }
.grid > .rv:nth-child(2) { transition-delay: .06s; }
.grid > .rv:nth-child(3) { transition-delay: .12s; }
.grid > .rv:nth-child(4) { transition-delay: .18s; }
.grid > .rv:nth-child(5) { transition-delay: .24s; }
.grid > .rv:nth-child(6) { transition-delay: .3s; }

/* Без JavaScript вкладки не работают — тогда их не показываем, а экраны идут подряд. */
.tabs { display: none; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.tabs-ready .tabs { display: flex; }
.tab-pane + .tab-pane { margin-top: 2.6rem; }
.tabs-ready .tab-pane + .tab-pane { margin-top: 0; }
.tab {
    display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.8rem; border-radius: 999px;
    border: .1rem solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 1.35rem;
    font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.tab:hover { border-color: var(--brand); color: var(--brand-dark); }
.tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-pane { animation: tab-in .3s ease both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.tab-note { margin-top: 1.4rem; color: var(--muted); font-size: 1.4rem; }

/* ------------------------------------------------------- Страница модуля */
/* Содержимое приходит из панели: сколько будет выгод и снимков, заранее
   неизвестно, поэтому и список, и галерея тянутся сами. */
.mod-price {
    margin-top: 2.4rem; padding: 1.8rem 2.2rem; border-radius: var(--r);
    border: .1rem solid var(--line); background: var(--bg-2); font-size: 1.5rem;
}
.mod-price strong { font-size: 1.9rem; }
.checks-wide { grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 1.6rem 3rem; }
.mod-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr)); gap: 2.4rem; }
.mod-gallery figcaption {
    padding: 1.2rem 1.6rem; border-top: .1rem solid var(--line-soft);
    color: var(--muted); font-size: 1.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .rv, .rv-in { opacity: 1; transform: none; transition: none; }
    .tab-pane, .float, .hero::before, .hero::after, .hero-in, .hero-shot, .hero .hl, .live-dot::after, .cookie { animation: none; }
    .hero-shot > figure { transform: none; }
    * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- Адаптивность */
@media (max-width: 78rem) {
    .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 62rem) {
    :root { --head-h: 6.4rem; }
    .nav, .head-cta .btn-line { display: none; }
    .burger { display: inline-flex; }
    .head-in { gap: 1rem; }
    .head-cta { margin-left: auto; }
    .brand { font-size: 1.8rem; }
    .brand-mark { width: 3rem; height: 3rem; }
    .head-cta .lg { display: none; }
    .head-cta .sm { display: inline; }
    /* Меню на весь экран под шапкой: крупные пункты, разделы раскрываются по нажатию. */
    /* backdrop-filter делает шапку контейнером для position: fixed — меню
       тогда растягивалось бы по высоте шапки, а не экрана. */
    .head.open { background: #fff; box-shadow: 0 .1rem 0 var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .head.open .nav {
        display: flex; position: fixed; left: 0; right: 0; top: var(--head-h); bottom: 0; margin: 0;
        flex-direction: column; align-items: stretch; gap: .2rem;
        padding: 1.6rem 2rem calc(2rem + env(safe-area-inset-bottom)); background: #fff;
        overflow-y: auto; overscroll-behavior: contain; animation: menu-in .25s ease both;
    }
    @keyframes menu-in { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: none; } }
    .head.open .nav .drop { width: 100%; border-bottom: .1rem solid var(--line-soft); }
    .head.open .nav .drop > button, .head.open .nav > a {
        width: 100%; justify-content: space-between; font-size: 1.9rem; font-weight: 600; color: var(--ink);
        padding: 1.5rem .4rem; border-radius: 0; background: none;
    }
    .head.open .nav > a { border-bottom: .1rem solid var(--line-soft); }
    .head.open .nav > a.on { color: var(--brand); }
    .head.open .nav .drop > button .i { width: 1.8rem; height: 1.8rem; }
    .head.open .drop-menu {
        position: static; transform: none; min-width: 0; margin: 0 0 1rem; padding: .4rem;
        border: 0; border-radius: 1.4rem; background: var(--bg-2); box-shadow: none;
        display: none; opacity: 1; visibility: visible; pointer-events: auto;
    }
    .head.open .drop[aria-expanded="true"] .drop-menu { display: block; }
    .head.open .drop-menu a { padding: 1.2rem; }
    .head.open .drop-menu a:hover { transform: none; }
    .head.open .drop-menu span span { display: none; }
    .head.open .nav-foot { display: grid; gap: 1rem; margin-top: auto; padding-top: 2.4rem; }
    .head.open .nav-foot .btn { width: 100%; padding: 1.6rem; font-size: 1.7rem; }
    .nav-foot-contact { text-align: center; font-size: 1.5rem; color: var(--muted); }
    .nav-foot-contact a { color: var(--ink); font-weight: 600; text-decoration: none; }
    html.menu-open { overflow: hidden; }
    .split, .lead-box { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
    .cta { grid-template-columns: minmax(0, 1fr); padding: 3.5rem; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .float { display: none; }
    .hero-shot { margin: 0; }
    .sec { padding: 7rem 0; }
    h1 { font-size: 4.2rem; }
    h2 { font-size: 3.1rem; }
    .cookie { flex-direction: column; align-items: stretch; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; }
    .cookie-actions .btn { flex: 1; }
}
@media (max-width: 40rem) {
    .sec { padding: 5.5rem 0; }
    .sec-sm { padding: 3rem 0 4.5rem; }
    .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
    .foot-top { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .card { padding: 2.2rem; }
    .cta { padding: 2.6rem; border-radius: var(--r); }
    h1 { font-size: 3.4rem; }
    h2 { font-size: 2.6rem; }
    .lead { font-size: 1.6rem; }
    .hero .cta-actions .btn, .cta .cta-actions .btn { flex: 1 1 100%; }
    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-stats .stat:last-child { grid-column: span 2; }
    .lb-nav { width: 3.6rem; height: 3.6rem; }
    .lb img { max-height: 66vh; }
}


/* ==========================================================================
   «Система в работе» — вкладки и крупные карточки со снимками разделов
   ========================================================================== */
.sc-h { font-size: 4rem; margin-bottom: 3rem; letter-spacing: -.02em; }
.sc-tabs { display: inline-flex; flex-wrap: wrap; gap: .4rem; padding: .6rem; border-radius: 2.2rem; background: var(--bg-2); margin-bottom: 2.4rem; }
.sc-tab { border: 0; background: none; cursor: pointer; font: inherit; font-size: 1.5rem; font-weight: 500; color: var(--muted);
    padding: 1.2rem 2.6rem; border-radius: 1.6rem; transition: color .15s, background .15s, box-shadow .15s; }
.sc-tab:hover { color: var(--ink); }
.sc-tab.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 .2rem .8rem rgba(var(--shade), .08); }
.sc-tab:focus-visible { outline: .2rem solid var(--brand); outline-offset: .2rem; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sc-grid[hidden] { display: none; }
.sc-card { position: relative; overflow: hidden; border-radius: 2.6rem; min-height: 24rem; padding: 2.6rem; display: flex; flex-direction: column;
    justify-content: space-between; align-items: flex-start; color: #fff; text-decoration: none; background: #111827; isolation: isolate; }
.sc-card.is-tall { min-height: 37.5rem; }
.sc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; z-index: -2;
    transform: scale(1.02); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sc-card::after { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 14, 28, .18) 0%, rgba(10, 14, 28, .35) 45%, rgba(10, 14, 28, .86) 100%); }
.sc-card:hover .sc-img { transform: scale(1.06); }
.sc-pill { display: inline-flex; align-items: center; gap: .9rem; padding: 1.1rem 2.2rem; border-radius: 999px; font-size: 1.9rem; font-weight: 700;
    letter-spacing: -.01em; color: #111827; background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); }
.sc-pill .i { width: 2.2rem; height: 2.2rem; color: var(--brand); }
.sc-title { font-size: 3rem; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; max-width: 52rem; text-wrap: balance; }
.sc-card:not(.is-tall) .sc-title { font-size: 2.6rem; }
.sc-cta { position: relative; overflow: hidden; margin-top: 1rem; padding: 3.4rem 3.4rem 3.4rem 3.2rem; border-radius: 2.6rem; display: flex;
    align-items: center; justify-content: space-between; gap: 3rem; background: linear-gradient(110deg, var(--brand-soft) 0%, #f5f8ff 60%, #e8f0ff 100%); }
.sc-cta::before, .sc-cta::after { content: ''; position: absolute; border-radius: 50%; background: rgba(var(--brand-rgb), .07); pointer-events: none; }
.sc-cta::before { width: 34rem; height: 34rem; right: 18rem; top: -14rem; }
.sc-cta::after { width: 46rem; height: 46rem; right: -14rem; top: 2rem; }
.sc-cta > * { position: relative; z-index: 1; }
.sc-cta h3 { font-size: 3rem; margin-bottom: 1rem; letter-spacing: -.015em; }
.sc-cta p { font-size: 1.5rem; color: var(--ink-2); max-width: 64rem; }
@media (max-width: 62rem) {
    .sc-h { font-size: 3rem; }
    .sc-grid { grid-template-columns: 1fr; }
    .sc-card, .sc-card.is-tall { min-height: 28rem; }
    .sc-title, .sc-card:not(.is-tall) .sc-title { font-size: 2.3rem; }
    .sc-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .sc-tab { white-space: nowrap; padding: 1rem 1.8rem; }
    .sc-cta { flex-direction: column; align-items: flex-start; padding: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .sc-img { transition: none; } }


/* ==========================================================================
   Большое меню «Возможности»
   ========================================================================== */
.nav .drop.is-mega { position: static; }
.drop-menu.mega { width: min(118rem, calc(100vw - 6rem)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 26rem; gap: .4rem 2rem;
    padding: 2.4rem; left: 50%; }
.mega-col { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mega-h { font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 1.2rem .6rem; }
.mega-promo { display: flex !important; flex-direction: column; gap: .6rem; padding: 1.6rem !important; border-radius: 1.8rem;
    background: linear-gradient(160deg, var(--brand-soft) 0%, #f5f8ff 100%); color: var(--ink); text-decoration: none; }
.mega-promo:hover { transform: none !important; background: linear-gradient(160deg, #e3ecff 0%, #f0f5ff 100%) !important; }
.mega-promo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 1rem;
    box-shadow: 0 .6rem 1.6rem rgba(var(--shade), .14); margin-bottom: .6rem; }
.mega-promo b { font-size: 1.6rem !important; }
.mega-promo > span { font-size: 1.3rem; color: var(--muted); }
.mega-promo i { font-style: normal; font-weight: 650; font-size: 1.4rem; color: var(--brand); margin-top: auto; }
@media (max-width: 62rem) {
    .drop-menu.mega { width: auto; grid-template-columns: 1fr; padding: .4rem 0; }
    .mega-promo { display: none !important; }
}


/* ==========================================================================
   Надёжность и «окупается»
   ========================================================================== */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rel-card { padding: 2.8rem; border-radius: 2.4rem; background: var(--bg-2); }
.rel-ic { width: 5rem; height: 5rem; border-radius: 1.4rem; display: grid; place-items: center; background: #fff; color: var(--brand);
    box-shadow: 0 .2rem .8rem rgba(var(--shade), .06); margin-bottom: 2rem; }
.rel-ic .i { width: 2.4rem; height: 2.4rem; }
.rel-card h3 { font-size: 2rem; margin-bottom: .8rem; letter-spacing: -.01em; }
.rel-card p { font-size: 1.45rem; color: var(--muted); line-height: 1.55; }
.roi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: center; padding: 4.4rem;
    border-radius: 2.8rem; background: linear-gradient(120deg, var(--brand-soft) 0%, #f5f8ff 55%, #eaf1ff 100%); }
.roi h2 { font-size: 3.6rem; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.roi-text p { font-size: 1.6rem; color: var(--ink-2); margin-bottom: 2.8rem; max-width: 56rem; }
.roi-nums { display: grid; gap: 1rem; }
.roi-nums div { display: flex; align-items: baseline; gap: 1.6rem; padding: 1.8rem 2.2rem; border-radius: 1.8rem; background: #fff; }
.roi-nums b { font-size: 4rem; font-weight: 750; letter-spacing: -.03em; color: var(--brand); min-width: 11rem; }
.roi-nums span { font-size: 1.5rem; color: var(--ink-2); }
.foot-h2 { margin-top: 2.4rem; }
@media (max-width: 62rem) {
    .rel-grid { grid-template-columns: 1fr; }
    .roi { grid-template-columns: 1fr; padding: 2.6rem; }
    .roi h2 { font-size: 2.8rem; }
}


/* ==========================================================================
   Статьи: крупные карточки, широкая первая, страница с карточкой демо
   ========================================================================== */
.news-tabs { margin: 0 0 3rem; }
.news-tabs .sc-tab { text-decoration: none; display: inline-block; }
.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 2rem; }
.post-card { display: flex; flex-direction: column; gap: 1.6rem; padding: 0; border: 0; background: none; box-shadow: none; text-decoration: none; color: var(--ink); }
.post-card .cover { display: block; aspect-ratio: 16 / 10; border-radius: 2.4rem; background: var(--bg-2) center / cover no-repeat;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.post-card:hover .cover { transform: translateY(-.4rem); box-shadow: 0 1.6rem 3.2rem -1.6rem rgba(var(--shade), .35); }
.post-card .cover.is-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem; }
.post-card .cover.is-art .i { width: 3.6rem; height: 3.6rem; }
.post-card .cover.is-art b { font-size: 1.6rem; font-weight: 650; }
.post-card .cover.is-art::after { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; right: -12%; bottom: -30%; background: rgba(255, 255, 255, .45); }
.cover.is-blue { background: linear-gradient(135deg, #dbe7ff, #eef3ff); color: var(--blue); }
.cover.is-violet { background: linear-gradient(135deg, #e9e1ff, #f4f0ff); color: var(--violet); }
.cover.is-green { background: linear-gradient(135deg, #d7f3e6, #edfaf3); color: var(--green); }
.cover.is-amber { background: linear-gradient(135deg, #fde7c8, #fff4e3); color: var(--amber); }
.post-card .body { padding: 0 .4rem; display: flex; flex-direction: column; gap: .8rem; }
.post-card h3 { font-size: 2.1rem; line-height: 1.3; letter-spacing: -.01em; transition: color .15s; }
.post-card:hover h3 { color: var(--brand); }
.post-card p { color: var(--muted); font-size: 1.45rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card.is-wide { grid-column: span 2; }
.post-card.is-wide .cover { aspect-ratio: 16 / 7.5; }
.post-card.is-wide h3 { font-size: 2.8rem; }
.post-wrap { display: grid; grid-template-columns: minmax(0, 85.5rem) minmax(0, 30rem); gap: 6rem; align-items: start; justify-content: space-between; }
.post-cover { margin: 3.8rem 0; border-radius: 2.4rem; overflow: hidden; }
.post-side { position: sticky; top: calc(var(--head-h) + 3rem); }
.post-side-card { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.8rem; border-radius: 2.4rem;
    background: linear-gradient(160deg, var(--brand-soft) 0%, #f5f8ff 100%); }
.post-side-card b { font-size: 2rem; letter-spacing: -.01em; }
.post-side-card p { font-size: 1.4rem; color: var(--ink-2); margin-bottom: .6rem; }
.post-side-card .rel-ic { margin-bottom: .4rem; }
@media (max-width: 62rem) {
    .posts { grid-template-columns: 1fr; }
    .post-card.is-wide { grid-column: auto; }
    .post-card.is-wide .cover { aspect-ratio: 16 / 10; }
    .post-card.is-wide h3 { font-size: 2.2rem; }
    .post-wrap { grid-template-columns: 1fr; gap: 3rem; }
    .post-side { position: static; }
}

/* ==========================================================================
   Тарифы: срок со скидкой, карточки, калькулятор, сравнение
   ========================================================================== */
.pr-head { margin-bottom: 2.4rem; }
.pr-periods-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 3.2rem; }
.pr-periods { margin-bottom: 0; }
.pr-off { display: inline-block; margin-left: .4rem; padding: .1rem .7rem; border-radius: 999px; font-size: 1.2rem; font-weight: 700;
    background: #dcfce7; color: #15803d; }
.pr-hint { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.45rem; color: var(--ink-2); }
.pr-hint .i { width: 1.8rem; height: 1.8rem; color: #f59e0b; }
.pr-plans { grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); }
.pr-plans .plan { padding: 3rem 2.6rem; }
.pr-plans .plan h3 { font-size: 2.2rem; }
.plan-desc { font-size: 1.4rem; color: var(--muted); margin-top: .6rem; min-height: 4.2rem; }
.pr-plans .plan-price { margin: 1.6rem 0 .2rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .8rem; }
.plan-old { font-size: 1.6rem; font-weight: 500; color: var(--faint); letter-spacing: 0; width: 100%; }
.plan-old[hidden] { display: none; }
.plan-sub { font-size: 1.35rem; color: var(--muted); min-height: 2rem; }
.plan-save { display: inline-flex; align-self: flex-start; margin-top: .8rem; padding: .3rem 1rem; border-radius: 999px;
    background: #dcfce7; color: #15803d; font-size: 1.3rem; font-weight: 650; }
.plan-save[hidden] { display: none; }
.pr-plans .plan .btn { margin: 2rem 0 0; width: 100%; }
.pr-plans .plan .checks { margin: 2.2rem 0 0; }

.pr-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: 3.2rem; margin-top: 6.4rem; padding: 4rem;
    border-radius: 2.8rem; background: var(--bg-2); align-items: start; }
.pr-calc h2, .pr-compare h2 { font-size: 3.2rem; letter-spacing: -.02em; margin-bottom: .8rem; }
.pr-step { display: flex; align-items: center; gap: 1rem; margin: 2.8rem 0 1.2rem; font-size: 1.7rem; }
.pr-step-n { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff;
    font-size: 1.4rem; font-weight: 700; }
.pr-step-note { margin-left: auto; font-size: 1.35rem; color: var(--muted); font-weight: 400; }
.pr-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.pr-opt { position: relative; cursor: pointer; }
.pr-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pr-opt span { display: flex; flex-direction: column; gap: .2rem; padding: 1.4rem 1.6rem; border-radius: 1.6rem; background: #fff;
    border: .15rem solid var(--line); transition: border-color .15s, box-shadow .15s; }
.pr-opt b { font-size: 1.6rem; }
.pr-opt small { font-size: 1.3rem; color: var(--muted); }
.pr-opt:hover span { border-color: var(--brand-light); }
.pr-opt input:checked + span { border-color: var(--brand); box-shadow: 0 0 0 .1rem var(--brand); }
.pr-opt input:focus-visible + span { outline: .2rem solid var(--brand); outline-offset: .2rem; }
.pr-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: .8rem; }
.pr-mod { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: #fff; cursor: pointer;
    border: .1rem solid var(--line-soft); transition: opacity .15s; }
.pr-mod input { width: 1.8rem; height: 1.8rem; accent-color: var(--brand); flex: none; }
.pr-mod-name { flex: 1; font-size: 1.5rem; font-weight: 550; }
.pr-mod-price { font-size: 1.3rem; color: var(--muted); white-space: nowrap; }
.pr-mod.is-in .pr-mod-price { color: #15803d; font-weight: 600; }
.pr-mod.is-off { opacity: .5; cursor: default; }

.pr-sum { position: sticky; top: calc(var(--head-h, 7rem) + 2rem); display: flex; flex-direction: column; gap: 1.2rem; padding: 3rem;
    border-radius: 2.4rem; background: #fff; box-shadow: 0 1.6rem 4rem -2rem rgba(var(--shade), .25); }
.pr-sum-k { font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pr-sum-big { font-size: 4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pr-sum-big small { font-size: 1.5rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pr-sum-rows { display: grid; gap: .8rem; padding: 1.6rem 0; border-top: .1rem solid var(--line-soft); border-bottom: .1rem solid var(--line-soft); }
.pr-sum-rows div { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.45rem; color: var(--ink-2); }
.pr-sum-rows div[hidden] { display: none; }
.pr-sum-rows b { font-weight: 600; color: var(--ink); text-align: right; }
.pr-sum-rows .is-total { font-size: 1.6rem; padding-top: .8rem; border-top: .1rem dashed var(--line); }
.pr-sum-rows .is-total b { font-size: 1.9rem; }
.pr-sum-save { padding: 1rem 1.4rem; border-radius: 1.2rem; background: #dcfce7; color: #15803d; font-size: 1.4rem; font-weight: 600; }
.pr-sum-save[hidden] { display: none; }
.pr-sum .btn { width: 100%; }
.pr-sum-note { font-size: 1.25rem; color: var(--muted); }

.pr-compare { margin-top: 6.4rem; }
.pr-table-wrap { overflow-x: auto; border-radius: 2rem; border: .1rem solid var(--line); background: #fff; margin-top: 2rem; }
.pr-table { width: 100%; border-collapse: collapse; min-width: 64rem; font-size: 1.45rem; }
.pr-table th, .pr-table td { padding: 1.3rem 1.6rem; text-align: center; border-bottom: .1rem solid var(--line-soft); }
.pr-table th:first-child, .pr-table td:first-child { text-align: left; color: var(--ink-2); position: sticky; left: 0; background: #fff; }
.pr-table thead th { font-size: 1.7rem; padding-top: 2rem; padding-bottom: 2rem; }
.pr-table .is-best { background: var(--brand-soft-2); }
.pr-table thead .is-best { color: var(--brand); }
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-yes .i { width: 2rem; height: 2rem; color: #16a34a; }
.pr-no { color: var(--faint); }
.pr-plus { font-size: 1.3rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 62rem) {
    .pr-calc { grid-template-columns: 1fr; padding: 2.4rem 1.6rem; border-radius: 2rem; }
    .pr-sum { position: static; }
    .pr-calc h2, .pr-compare h2 { font-size: 2.6rem; }
    .pr-periods { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .pr-periods .sc-tab { text-align: center; padding-left: .6rem; padding-right: .6rem; }
    .plan-desc { min-height: 0; }
}


/* ==========================================================================
   Общие блоки в новом стиле (как на главной и в тарифах): крупные заголовки,
   карточки без рамок на мягком фоне с белой плиткой значка, снимки на
   цветной подложке, вопросы и заявка — скруглёнными панелями.
   ========================================================================== */
.sec { padding: 8.5rem 0; }
.head-block h2, .split > div > h2, .lead-box h2 { font-size: 4rem; letter-spacing: -.025em; }
.head-block .lead { max-width: 70rem; }
.head-block.center .lead { margin-left: auto; margin-right: auto; }

/* Карточки: на белом — мягкий серый фон, на сером — белые. Без рамок. */
.card { border-color: transparent; border-radius: 2.4rem; padding: 2.8rem; }
.sec:not(.sec-tint):not(.sec-dark) .card:not(.card-tint):not(.post-card) { background: var(--bg-2); }
.card-tint { background: var(--bg-2); }
.sec-tint .card, .sec-tint .card-tint { background: #fff; }
.card h3 { font-size: 2rem; letter-spacing: -.01em; }
.card p { font-size: 1.45rem; line-height: 1.55; }
.card-ic { width: 5rem; height: 5rem; border-radius: 1.4rem; background: #fff; color: var(--brand);
    box-shadow: 0 .2rem .8rem rgba(var(--shade), .06); margin-bottom: 2rem; }
.sec-tint .card-ic { background: var(--brand-soft); box-shadow: none; }
.card-ic.amber { background: #fff; color: #d97706; }
.card-ic.blue { background: #fff; color: var(--blue); }
.card-ic.violet { background: #fff; color: var(--violet); }
.card-ic.red { background: #fff; color: #dc2626; }
.sec-tint .card-ic.amber { background: var(--amber-soft); }
.sec-tint .card-ic.blue { background: var(--blue-soft); }
.sec-tint .card-ic.violet { background: var(--violet-soft); }
.sec-tint .card-ic.red { background: var(--red-soft); }
a.card:hover { border-color: transparent; background: #fff !important; box-shadow: 0 1.6rem 3.2rem -1.6rem rgba(var(--shade), .3); }

/* Блок «текст + снимок»: снимок на цветной подложке, как витрина на главной. */
.f-stage { position: relative; padding: 3.2rem; border-radius: 2.8rem; overflow: hidden;
    background: linear-gradient(140deg, var(--brand-soft) 0%, #f5f8ff 55%, #e9efff 100%); }
.sec-tint .f-stage { background: linear-gradient(140deg, #fff 0%, #f3f6ff 60%, #e8eeff 100%); }
.f-stage::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; right: -18%; top: -30%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--brand-rgb), .16), transparent); pointer-events: none; }
.f-stage > figure { position: relative; }
.f-stage .shot { border-color: transparent; box-shadow: 0 2rem 4rem -2rem rgba(var(--shade), .35); }
.f-stage.is-violet { background: linear-gradient(140deg, var(--violet-soft) 0%, #f7f4ff 60%, #efe9ff 100%); }
.f-stage.is-green { background: linear-gradient(140deg, var(--green-soft) 0%, #f3fbf7 60%, #e3f5ec 100%); }
.f-stage.is-amber { background: linear-gradient(140deg, var(--amber-soft) 0%, #fffaf2 60%, #fdf0dc 100%); }

/* Полоса с цифрами. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.kpi { padding: 2.6rem 2.8rem; border-radius: 2.4rem; background: var(--bg-2); }
.sec-tint .kpi { background: #fff; }
.kpi b { display: block; font-size: 4.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--brand); }
.kpi span { display: block; margin-top: .8rem; font-size: 1.45rem; color: var(--ink-2); line-height: 1.45; }

/* «Смотрите также»: крупные карточки-ссылки со стрелкой. */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1rem; }
.related a { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2.8rem 7rem 2.8rem 2.8rem; border-radius: 2.4rem;
    background: var(--bg-2); color: var(--ink); text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; }
.sec-tint .related a { background: #fff; }
.related a:hover { background: #fff; box-shadow: 0 1.6rem 3.2rem -1.6rem rgba(var(--shade), .3); transform: translateY(-.3rem); }
.related b { font-size: 2rem; letter-spacing: -.01em; }
.related p { font-size: 1.45rem; color: var(--muted); line-height: 1.55; }
.related .rel-go { position: absolute; top: 2.4rem; right: 2.4rem; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); transition: background .2s, color .2s; }
.related a:hover .rel-go { background: var(--brand); color: #fff; }
.related .rel-go .i { width: 1.8rem; height: 1.8rem; }

/* Призыв: скругление побольше, как у панелей на главной. */
.cta { border-radius: 2.8rem; padding: 5.6rem; }
.cta h2 { font-size: 3.8rem; letter-spacing: -.025em; }

/* Вопросы: мягкие плашки, открытая — белая с тенью. */
.faq { gap: .8rem; }
.faq details { border: 0; border-radius: 1.8rem; background: var(--bg-2); }
.sec-tint .faq details { background: #fff; }
.faq details[open] { background: #fff; box-shadow: 0 1.2rem 3rem -1.6rem rgba(var(--shade), .3); }
.faq summary { padding: 2.2rem 2.6rem; font-size: 1.65rem; }
.faq .faq-body { padding: 0 2.6rem 2.4rem; font-size: 1.5rem; line-height: 1.6; }

/* Заявка — панелью с мягким градиентом. */
.lead-sec .lead-box { padding: 5rem; border-radius: 2.8rem;
    background: linear-gradient(120deg, var(--brand-soft) 0%, #f5f8ff 55%, #eaf1ff 100%); }
.lead-sec .form { border-radius: 2.4rem; box-shadow: 0 2rem 4rem -2.4rem rgba(var(--shade), .35); }

@media (max-width: 62rem) {
    .head-block h2, .split > div > h2, .lead-box h2 { font-size: 3rem; }
    .f-stage { padding: 1.6rem; border-radius: 2rem; }
    .cta { padding: 3.2rem 2.4rem; border-radius: 2.2rem; }
    .cta h2 { font-size: 2.8rem; }
    .lead-sec .lead-box { padding: 2.6rem 1.8rem; border-radius: 2.2rem; }
    .kpi b { font-size: 3.6rem; }
}


/* ==========================================================================
   Возможности: плитки разделов и вкладки групп
   ========================================================================== */
.ft-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ft-tile { position: relative; display: flex; flex-direction: column; gap: 1rem; min-height: 26rem; padding: 2.8rem; border-radius: 2.6rem;
    text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.ft-tile:hover { transform: translateY(-.4rem); box-shadow: 0 2rem 4rem -2rem rgba(var(--shade), .35); }
.ft-tile::after { content: ''; position: absolute; width: 70%; aspect-ratio: 1; right: -25%; bottom: -35%; border-radius: 50%;
    background: rgba(255, 255, 255, .5); pointer-events: none; }
.ft-tile.is-blue { background: linear-gradient(150deg, #dbe7ff, #f0f5ff); }
.ft-tile.is-violet { background: linear-gradient(150deg, #e9e1ff, #f6f2ff); }
.ft-tile.is-green { background: linear-gradient(150deg, #d7f3e6, #effaf5); }
.ft-tile.is-amber { background: linear-gradient(150deg, #fde7c8, #fff6e8); }
.ft-ic { width: 5rem; height: 5rem; border-radius: 1.4rem; display: grid; place-items: center; background: #fff; color: var(--brand);
    box-shadow: 0 .2rem .8rem rgba(var(--shade), .06); margin-bottom: 1rem; }
.ft-tile.is-violet .ft-ic { color: var(--violet); }
.ft-tile.is-green .ft-ic { color: var(--green); }
.ft-tile.is-amber .ft-ic { color: #d97706; }
.ft-ic .i { width: 2.4rem; height: 2.4rem; }
.ft-tile b { font-size: 2.2rem; letter-spacing: -.015em; line-height: 1.2; }
.ft-tile > span:not(.ft-ic) { font-size: 1.45rem; color: var(--ink-2); line-height: 1.55; }
.ft-tile i { margin-top: auto; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink);
    position: relative; z-index: 1; transition: background .2s, color .2s; }
.ft-tile:hover i { background: var(--ink); color: #fff; }
.ft-tile i .i { width: 1.8rem; height: 1.8rem; }
.ft-tabs { margin-bottom: 3rem; }
@media (max-width: 75rem) { .ft-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
    .ft-tiles { grid-template-columns: 1fr; }
    .ft-tile { min-height: 0; }
    .ft-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .ft-tabs .sc-tab { white-space: nowrap; }
}


/* ==========================================================================
   Модули: каталог с разделами и шаги подключения
   ========================================================================== */
.md-tabs { margin-bottom: 2.4rem; }
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.md-card { display: flex; flex-direction: column; gap: .9rem; padding: 2.8rem; border-radius: 2.4rem; background: var(--bg-2);
    color: var(--ink); text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; }
.md-card[hidden] { display: none; }
a.md-card:hover { background: #fff; box-shadow: 0 1.6rem 3.2rem -1.6rem rgba(var(--shade), .3); transform: translateY(-.3rem); }
.md-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.md-top .card-ic { margin-bottom: 0; }
.md-price { padding: .5rem 1.2rem; border-radius: 999px; background: #fff; font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.md-price.is-free { background: #dcfce7; color: #15803d; }
.md-card h3 { font-size: 2rem; letter-spacing: -.01em; }
.md-card p { font-size: 1.45rem; color: var(--muted); line-height: 1.55; }
.md-plans { font-size: 1.3rem; color: var(--brand-dark); font-weight: 600; }
.md-card .card-link { margin-top: auto; padding-top: .6rem; }
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.step-card { display: flex; flex-direction: column; gap: 1rem; padding: 2.8rem; border-radius: 2.4rem; background: #fff; }
.sec:not(.sec-tint) .step-card { background: var(--bg-2); }
.step-card b { font-size: 2rem; letter-spacing: -.01em; }
.step-card p { font-size: 1.45rem; color: var(--muted); line-height: 1.55; }
.step-n { width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff;
    font-size: 1.8rem; font-weight: 800; }
@media (max-width: 75rem) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
    .md-grid, .steps-row { grid-template-columns: 1fr; }
    .md-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .md-tabs .sc-tab { white-space: nowrap; }
}


/* ==========================================================================
   Статья: прогресс чтения, оглавление, «поделиться», Telegram
   ========================================================================== */
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: .3rem; z-index: 60; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform-origin: left; transform: scaleX(0); }
.prose h2 { scroll-margin-top: calc(var(--head-h, 7rem) + 2rem); }
.post-side { display: flex; flex-direction: column; gap: 1.2rem; }
.post-toc { display: flex; flex-direction: column; gap: .2rem; padding: 2.2rem; border-radius: 2.4rem; background: var(--bg-2); }
.post-toc b { font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: .8rem; }
.post-toc a { padding: .7rem 1rem; border-radius: 1rem; font-size: 1.4rem; line-height: 1.4; color: var(--ink-2); text-decoration: none;
    border-left: .2rem solid transparent; transition: background .15s, color .15s; }
.post-toc a:hover { background: #fff; color: var(--ink); }
.post-toc a.on { background: #fff; color: var(--brand-dark); font-weight: 600; border-left-color: var(--brand); }
.share { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 4rem; padding-top: 2.4rem; border-top: .1rem solid var(--line-soft); }
.share > span { font-size: 1.4rem; font-weight: 600; color: var(--muted); margin-right: .6rem; }
.share a, .share button { display: inline-flex; align-items: center; gap: .8rem; height: 4.4rem; min-width: 4.4rem; justify-content: center; padding: 0 1.2rem;
    border: 0; border-radius: 1.2rem; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 1.4rem; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s; }
.share a:hover, .share button:hover { background: var(--brand); color: #fff; }
.share .i { width: 2rem; height: 2rem; }
.share button b { font-weight: 600; }
.post-tg { display: flex; align-items: center; gap: 1.4rem; padding: 2rem 2.2rem; border-radius: 2.4rem; text-decoration: none; color: var(--ink);
    background: linear-gradient(140deg, #e3f2fd, #f2f9ff); transition: transform .2s; }
.post-tg:hover { transform: translateY(-.2rem); }
.post-tg .i { width: 3.4rem; height: 3.4rem; color: #229ed9; flex: none; }
.post-tg span { display: flex; flex-direction: column; gap: .2rem; font-size: 1.3rem; color: var(--muted); }
.post-tg b { font-size: 1.55rem; color: var(--ink); }
@media (max-width: 62rem) { .post-toc { display: none; } }


/* ==========================================================================
   Партнёрам и контакты
   ========================================================================== */
.pt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pt-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .6rem; padding: 3rem; border-radius: 2.6rem; }
.pt-tile::after { content: ''; position: absolute; width: 60%; aspect-ratio: 1; right: -20%; bottom: -35%; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.pt-tile.is-blue { background: linear-gradient(150deg, #dbe7ff, #f0f5ff); }
.pt-tile.is-green { background: linear-gradient(150deg, #d7f3e6, #effaf5); }
.pt-tile.is-violet { background: linear-gradient(150deg, #e9e1ff, #f6f2ff); }
.pt-tile b { font-size: 5.2rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-top: .6rem; }
.pt-tile strong { font-size: 1.7rem; }
.pt-tile > span:not(.ft-ic) { font-size: 1.45rem; color: var(--ink-2); line-height: 1.55; position: relative; z-index: 1; }
.pt-tile.is-green .ft-ic { color: var(--green); }
.pt-tile.is-violet .ft-ic { color: var(--violet); }
.pt-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc.pt-calc { padding: 4rem; border-radius: 2.8rem; background: linear-gradient(120deg, var(--brand-soft) 0%, #f5f8ff 55%, #eaf1ff 100%); border: 0; }
.pc.pt-calc h2 { font-size: 3.6rem; letter-spacing: -.025em; }
.pt-know { margin-top: 1rem; padding: 3.2rem; border-radius: 2.4rem; background: #fff; }
.pt-know h3 { font-size: 2.2rem; margin-bottom: 1.8rem; }
.ct-msgr { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.ct-msgr a { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; border-radius: 999px; background: #fff;
    color: var(--ink); text-decoration: none; font-size: 1.4rem; font-weight: 600; transition: background .15s, color .15s; }
.ct-msgr a:hover { background: var(--brand); color: #fff; }
.ct-msgr .i { width: 1.8rem; height: 1.8rem; }
.sec:not(.sec-tint) .ct-req { background: linear-gradient(120deg, var(--brand-soft) 0%, #f5f8ff 100%) !important; }
@media (max-width: 75rem) { .pt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
    .pt-tiles, .pt-steps { grid-template-columns: 1fr; }
    .pt-tile b { font-size: 4.2rem; }
    .pc.pt-calc { padding: 2.4rem 1.8rem; }
    .pc.pt-calc h2 { font-size: 2.8rem; }
}


/* ==========================================================================
   404
   ========================================================================== */
.nf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5rem; align-items: center; padding: 5rem; border-radius: 2.8rem;
    background: linear-gradient(120deg, var(--brand-soft) 0%, #f5f8ff 55%, #eaf1ff 100%); }
.nf-num { font-size: 16rem; font-weight: 800; letter-spacing: -.06em; line-height: .9;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 62rem) {
    .nf { grid-template-columns: 1fr; gap: 1.6rem; padding: 3rem 2rem; }
    .nf-num { font-size: 9rem; }
}


/* ==========================================================================
   Хлебные крошки — внутри первого экрана
   Раньше они стояли отдельной полосой, и цветной фон шапки страницы
   начинался под ними с резким краем. Теперь первая секция заезжает под
   крошки, и её фон идёт от самого верха.
   ========================================================================== */
.crumbs-bar { position: relative; z-index: 3; height: 5.4rem; }
.crumbs-bar .crumbs { padding-top: 2rem; }
.crumbs-bar + .sec-sm,
.crumbs-bar + .read-bar + .sec-sm { margin-top: -5.4rem; padding-top: 10.4rem; }
.crumbs a { color: var(--muted); }
.crumbs > span:last-child { color: var(--ink-2); }


/* ==========================================================================
   Шапка как у крупных сервисов: меню слева за логотипом, справа мягкая
   «Войти» и синяя «Начать использовать»; меню разделов — панелью на всю
   ширину под шапкой, страница за ней затемняется.
   ========================================================================== */
.head-in { gap: 1.2rem; }
.nav { margin: 0 0 0 2.4rem; gap: .1rem; }
.nav > a, .nav > .drop > button { font-size: 1.45rem; padding: .9rem 1.2rem; border-radius: 1.2rem; color: var(--ink); }
.nav > .drop > button.on, .nav > a.on { color: var(--brand); font-weight: 500; }
.head-cta { margin-left: auto; }
.btn-soft { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.btn-soft:hover { background: #dde8ff; color: var(--brand-dark); }
.btn-head { height: 4rem; padding: 0 1.6rem; border-radius: 1.2rem; font-size: 1.4rem; font-weight: 500; }

/* Панель меню — от края до края, под шапкой. */
.nav .drop.is-mega { position: static; }
.drop-menu.mega { position: absolute; left: 0; right: 0; top: 100%; width: auto; min-width: 0; margin: 0; padding: 0; transform: translateY(-.6rem);
    display: block; border: 0; border-top: .1rem solid var(--line-soft); border-radius: 0 0 2.4rem 2.4rem; box-shadow: 0 2.4rem 4.8rem -2.4rem rgba(var(--shade), .35); }
.nav .drop.is-mega[aria-expanded="true"] .drop-menu.mega { transform: none; }
.drop-menu.mega::before { top: -1.2rem; height: 1.2rem; }
.mega-in { max-width: var(--wrap); margin: 0 auto; padding: 2.4rem 2.4rem 2rem; display: grid;
    grid-template-columns: 30rem repeat(2, minmax(0, 1fr)); gap: 1rem 3.2rem; }
.mega-col { display: flex; flex-direction: column; gap: .2rem; }
.mega-h { font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: .4rem 1.2rem .8rem; }
.drop-menu.mega .mega-col a { align-items: flex-start; gap: 1.2rem; }
.drop-menu.mega .mega-col a:hover { transform: none; background: var(--bg-2); }
.mega-ic { width: 4rem; height: 4rem; border-radius: 1.1rem; display: grid; place-items: center; background: var(--bg-2); flex: none; transition: background .15s; }
.drop-menu.mega .mega-col a:hover .mega-ic { background: #fff; }
.drop-menu.mega .mega-ic .i { margin: 0; width: 2rem; height: 2rem; }
.mega-promo { display: flex !important; flex-direction: column; gap: .8rem; padding: 2.4rem !important; border-radius: 2rem; overflow: hidden;
    color: var(--ink) !important; text-decoration: none; position: relative; min-height: 26rem; }
.mega-promo:hover { transform: none !important; }
.mega-promo.is-blue { background: linear-gradient(150deg, #dbe7ff, #f0f5ff) !important; }
.mega-promo.is-violet { background: linear-gradient(150deg, #e9e1ff, #f6f2ff) !important; }
.mega-promo.is-green { background: linear-gradient(150deg, #d7f3e6, #effaf5) !important; }
.mega-promo-k { display: inline-block !important; align-self: flex-start; padding: .3rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .7);
    font-size: 1.15rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2) !important; }
.mega-promo b { font-size: 2rem !important; letter-spacing: -.015em; line-height: 1.25; }
.mega-promo > span:not(.mega-promo-k) { font-size: 1.35rem; color: var(--ink-2) !important; }
.mega-promo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; border-radius: 1rem; margin-top: .4rem;
    box-shadow: 0 1rem 2rem -1rem rgba(var(--shade), .35); }
.mega-promo i { margin-top: auto; font-style: normal; font-weight: 650; font-size: 1.4rem; color: var(--brand); }
.mega-foot { border-top: .1rem solid var(--line-soft); }
.mega-foot-in { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem 2.4rem; display: flex; justify-content: flex-end; gap: 2.4rem; }
.drop-menu.mega .mega-foot a { display: inline; padding: 0; font-size: 1.35rem; font-weight: 600; color: var(--ink-2); }
.drop-menu.mega .mega-foot a:hover { background: none; color: var(--brand); transform: none; }
/* Затемнение страницы под открытым меню. */
.head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(var(--shade), .28);
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: -1; }
.head:has(.drop.is-mega[aria-expanded="true"])::after { opacity: 1; }

@media (max-width: 62rem) {
    .head-cta .btn-soft { display: none; }
    .head::after { display: none; }
    .head.open .drop-menu.mega { position: static; border-radius: 1.4rem; box-shadow: none; transform: none; }
    .mega-in { display: flex; flex-direction: column; padding: .4rem; gap: .2rem; }
    .mega-promo, .mega-foot, .mega-h { display: none !important; }
    .nav-foot .btn-soft { display: flex; }
}


/* ==========================================================================
   Тарифы — конструктор: карточки тарифов с лимитами, модули с «Подробнее»
   ========================================================================== */
.pr-plans-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.pr-plan { position: relative; cursor: pointer; display: flex; }
.pr-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pr-plan-in { position: relative; flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: 2.2rem 2rem; border-radius: 2rem;
    background: #fff; border: .15rem solid var(--line); transition: border-color .15s, box-shadow .15s; }
.pr-plan:hover .pr-plan-in { border-color: var(--brand-light); }
.pr-plan input:checked + .pr-plan-in { border-color: var(--brand); box-shadow: 0 0 0 .1rem var(--brand), 0 1.6rem 3.2rem -2rem rgba(var(--brand-rgb), .5); }
.pr-plan input:focus-visible + .pr-plan-in { outline: .2rem solid var(--brand); outline-offset: .3rem; }
.pr-plan-tag { position: absolute; top: -1.1rem; left: 1.8rem; padding: .3rem 1rem; border-radius: 999px; background: var(--brand); color: #fff;
    font-size: 1.15rem; font-weight: 700; }
.pr-plan b { font-size: 2rem; letter-spacing: -.015em; }
.pr-plan-price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.pr-plan-price small { font-size: 1.3rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pr-plan-desc { font-size: 1.3rem; color: var(--muted); line-height: 1.45; }
.pr-plan-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; padding-top: 1.2rem; border-top: .1rem solid var(--line-soft); }
.pr-plan-list > span { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.3rem; color: var(--ink-2); line-height: 1.4; }
.pr-plan-list .i { width: 1.6rem; height: 1.6rem; color: var(--brand); flex: none; margin-top: .1rem; }
.pr-mod { display: flex; align-items: center; gap: .6rem; padding: .6rem .6rem .6rem 1.4rem; }
.pr-mod-pick { flex: 1; display: flex; align-items: center; gap: 1.2rem; cursor: pointer; min-width: 0; }
.pr-mod-more { flex: none; border: 0; background: var(--brand-soft); color: var(--brand); font: inherit; font-size: 1.25rem; font-weight: 600;
    padding: .6rem 1.1rem; border-radius: 1rem; cursor: pointer; transition: background .15s; }
.pr-mod-more:hover { background: #dde8ff; }
.pr-mod.is-off .pr-mod-pick { cursor: default; }
.pr-mod.is-off .pr-mod-more { opacity: 1; }

/* Окно «Подробнее» */
.mm { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 2rem; }
.mm[hidden] { display: none; }
.mm-back { position: absolute; inset: 0; background: rgba(var(--shade), .45); }
.mm-box { position: relative; width: min(60rem, 100%); max-height: calc(100vh - 4rem); overflow-y: auto; padding: 3.2rem; border-radius: 2.4rem;
    background: #fff; box-shadow: 0 3rem 6rem -2rem rgba(var(--shade), .5); animation: mm-in .2s ease both; }
@keyframes mm-in { from { opacity: 0; transform: translateY(1rem) scale(.98); } to { opacity: 1; transform: none; } }
.mm-x { position: absolute; top: 1.4rem; right: 1.4rem; width: 4rem; height: 4rem; border: 0; border-radius: 50%; background: var(--bg-2);
    font-size: 2.2rem; line-height: 1; cursor: pointer; color: var(--ink-2); }
.mm-head { display: flex; flex-direction: column; gap: .6rem; padding-right: 4rem; margin-bottom: 1.4rem; }
.mm-head b { font-size: 2.6rem; letter-spacing: -.02em; }
.mm-price { align-self: flex-start; padding: .4rem 1.2rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 1.4rem; font-weight: 700; }
.mm-box p { font-size: 1.5rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 1.2rem; }
.mm-lead { font-size: 1.7rem !important; color: var(--ink) !important; }
.mm-h { font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 1.6rem 0 1rem; }
.mm-cover { width: 100%; border-radius: 1.4rem; margin: 1rem 0 1.6rem; box-shadow: 0 1rem 2.4rem -1.4rem rgba(var(--shade), .35); }
.mm-plans { color: var(--brand-dark) !important; font-weight: 600; }
.mm-note { font-size: 1.35rem !important; color: var(--muted) !important; padding: 1.2rem 1.4rem; border-radius: 1.2rem; background: var(--bg-2); }
.mm-foot { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
body.mm-open { overflow: hidden; }
@media (max-width: 48rem) {
    .mm { padding: 0; align-items: end; }
    .mm-box { border-radius: 2.4rem 2.4rem 0 0; padding: 2.6rem 2rem calc(2rem + env(safe-area-inset-bottom)); max-height: 88vh; }
    .pr-mod { flex-wrap: wrap; }
}
/* В колонке конструктора тесно: тарифы — по два в ряд, модули — пошире. */
.pr-calc .pr-plans-pick { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); }
.pr-calc .pr-mods { grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); }
.pr-mod-name { min-width: 0; }
.pr-calc .pr-plans-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .pr-calc .pr-plans-pick, .pr-calc .pr-mods { grid-template-columns: 1fr; } }


/* ==========================================================================
   Главная: шапка по центру, снимок под текстом, интеграции сеткой
   ========================================================================== */
.hero-center .hc-text { max-width: 96rem; margin: 0 auto; text-align: center; }
.hero-center h1 { font-size: 6rem; letter-spacing: -.035em; }
.hero-center .lead { max-width: 76rem; margin-left: auto; margin-right: auto; font-size: 1.9rem; }
.hero-center .cta-actions { justify-content: center; margin-top: 3.6rem; }
.hero-center .proof { justify-content: center; }
.hc-badges { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.hc-badges span { padding: .6rem 1.4rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark);
    font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hero-center .hero-shot { max-width: 112rem; margin: 5.6rem auto 0; }
.ig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ig-tile { display: flex; align-items: center; gap: 1.4rem; padding: 1.8rem 2rem; border-radius: 1.8rem; background: #fff;
    transition: transform .2s, box-shadow .2s; }
.ig-tile:hover { transform: translateY(-.2rem); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(var(--shade), .3); }
.ig-ic { width: 4.4rem; height: 4.4rem; flex: none; border-radius: 1.2rem; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ig-ic .i { width: 2.2rem; height: 2.2rem; }
.ig-t { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ig-t b { font-size: 1.55rem; line-height: 1.25; }
.ig-t span { font-size: 1.25rem; color: var(--muted); }
.ig-foot { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 3.2rem; }
@media (max-width: 75rem) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 62rem) {
    .hero-center h1 { font-size: 3.8rem; }
    .hero-center .lead { font-size: 1.6rem; }
    .hero-center .hero-shot { margin-top: 3.2rem; }
    .hc-badges span:nth-child(3) { display: none; }
}
@media (max-width: 48rem) { .ig-grid { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------ Утилиты
   Вместо style-атрибутов в разметке: отступы, задержки появления, раскладки. */
.mt-2xs { margin-top: .5rem; } .mt-xs { margin-top: 1rem; } .mt-s { margin-top: 1.43rem; } .mt-m { margin-top: 1.9rem; }
.mt-l { margin-top: 2.85rem; } .mt-xl { margin-top: 3.33rem; } .mt-2xl { margin-top: 3.8rem; } .mb-s { margin-bottom: 1.43rem; }
.fs-l { font-size: 1.78rem; } .gap-xl { gap: 4.75rem; } .order-2 { order: 2; }
.mw-read { max-width: 85.5rem; } .mw-narrow { max-width: 53rem; } .mw-41 { max-width: 41.8rem; }
.stack-m { display: grid; gap: 1.9rem; align-content: start; } .stack-s { display: grid; gap: .71rem; }
.row-m { display: flex; gap: 1.9rem; flex-wrap: wrap; }
.iline { display: inline-flex; gap: .95rem; align-items: center; } .iline-top { display: inline-flex; gap: .95rem; align-items: flex-start; }
.head-block.head-row { display: flex; justify-content: space-between; align-items: end; gap: 1.9rem; max-width: none; }
.dl-0 { --d: 0s; } .dl-08 { --d: .08s; } .dl-16 { --d: .16s; } .dl-24 { --d: .24s; } .dl-32 { --d: .32s; } .dl-4 { --d: .4s; } .dl-48 { --d: .48s; }

/* Вопрос — заголовок h3 внутри summary: выглядит как раньше. */
.faq-q { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: 0; line-height: inherit; margin: 0; }

/* ==========================================================================
   Чаты: макет виджета, цели вкладками, шаги
   ========================================================================== */
.cx-stage { position: relative; max-width: 100rem; margin: 5rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 38rem; gap: 0; align-items: end; }
.cx-site { border-radius: 2rem; background: #fff; box-shadow: 0 2.4rem 5rem -2.4rem rgba(var(--shade), .35); overflow: hidden; margin-right: -6rem; min-height: 40rem; }
.cx-bar { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.4rem; background: var(--bg-2); }
.cx-bar i { width: .9rem; height: .9rem; border-radius: 50%; background: #d6dbe4; }
.cx-bar span { margin-left: .8rem; font-size: 1.2rem; color: var(--faint); }
.cx-page { padding: 3rem; display: grid; gap: 1.2rem; }
.cx-page b { height: 3.2rem; width: 60%; border-radius: .8rem; background: #e5ebf5; }
.cx-page i { height: 1.2rem; width: 85%; border-radius: .6rem; background: #eef2f8; }
.cx-page i.s { width: 50%; }
.cx-page em { height: 8rem; border-radius: 1.2rem; background: linear-gradient(135deg, #eef3ff, #f6f8fc); }
.cm { position: relative; z-index: 2; display: flex; flex-direction: column; border-radius: 2rem; background: #fff; overflow: hidden;
    box-shadow: 0 3rem 6rem -2.4rem rgba(var(--shade), .45); --cm: var(--brand); }
.cm.is-violet { --cm: #7c3aed; } .cm.is-green { --cm: #059669; } .cm.is-amber { --cm: #d97706; }
.cm-head { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; background: var(--cm); color: #fff; }
.cm-ava { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .25);
    font-weight: 700; flex: none; color: #fff; }
.cm-who { display: flex; flex-direction: column; flex: 1; } .cm-who b { font-size: 1.5rem; } .cm-who small { font-size: 1.2rem; opacity: .85; }
.cm-x { opacity: .8; font-size: 1.8rem; }
.cm-body { display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; background: #f6f7fb; min-height: 24rem; }
.cm-msg { max-width: 82%; padding: 1rem 1.3rem; border-radius: 1.4rem; font-size: 1.35rem; line-height: 1.45; animation: cm-in .4s both; }
.cm-msg.is-in { align-self: flex-start; background: #fff; border-bottom-left-radius: .4rem; box-shadow: 0 .1rem .3rem rgba(var(--shade), .06); }
.cm-msg.is-out { align-self: flex-end; background: var(--cm); color: #fff; border-bottom-right-radius: .4rem; }
.cm-sys { align-self: center; font-size: 1.2rem; color: var(--muted); background: #fff; padding: .5rem 1rem; border-radius: 999px; text-align: center; animation: cm-in .4s both; }
.cm-sys b { color: var(--ink); }
.cm-chips { display: flex; gap: .5rem; flex-wrap: wrap; animation: cm-in .4s both; }
.cm-chips span { padding: .6rem 1.1rem; border-radius: 999px; border: .1rem solid var(--cm); color: var(--cm); font-size: 1.25rem; background: #fff; }
.cm-body > :nth-child(1) { animation-delay: .2s; } .cm-body > :nth-child(2) { animation-delay: .6s; } .cm-body > :nth-child(3) { animation-delay: 1s; }
.cm-body > :nth-child(4) { animation-delay: 1.4s; } .cm-body > :nth-child(5) { animation-delay: 1.8s; } .cm-body > :nth-child(6) { animation-delay: 2.2s; }
@keyframes cm-in { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.cm-input { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.6rem; border-top: .1rem solid var(--line-soft); color: var(--faint); font-size: 1.3rem; }
.cm-input i { font-style: normal; color: var(--cm); }
.cx-pop { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; border-radius: 1.4rem; background: #fff;
    box-shadow: 0 1.2rem 2.8rem -1.2rem rgba(var(--shade), .4); font-size: 1.3rem; font-weight: 600; animation: cm-in .5s both; }
.cx-pop .i { width: 1.8rem; height: 1.8rem; color: var(--brand); }
.cx-pop-1 { left: 4rem; top: 8rem; animation-delay: 1.2s; } .cx-pop-2 { left: 10rem; bottom: 5rem; animation-delay: 2.6s; }
.cx-tabs-wrap { display: flex; justify-content: center; }
.cx-tabs { margin-bottom: 3.2rem; }
.cx-goal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42rem); gap: 5rem; align-items: center; padding: 4rem;
    border-radius: 2.8rem; background: linear-gradient(120deg, var(--brand-soft) 0%, #f5f8ff 55%, #eaf1ff 100%); }
.cx-goal[hidden] { display: none; }
.cx-goal h3 { font-size: 3rem; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 1.4rem; }
.cx-goal p { font-size: 1.6rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 2rem; }
.cx-goal-art { position: relative; }
.cx-invite { position: absolute; z-index: 3; left: -4rem; top: -2.4rem; display: flex; gap: 1rem; align-items: flex-start; max-width: 30rem; padding: 1.2rem 1.4rem;
    border-radius: 1.6rem; background: #fff; box-shadow: 0 1.6rem 3.2rem -1.6rem rgba(var(--shade), .45); font-size: 1.3rem; line-height: 1.45; animation: cm-in .5s .3s both; }
.cx-invite .cm-ava { background: #7c3aed; }
.cx-invite b { display: block; font-size: 1.35rem; }
.cx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cx-steps > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 2.8rem 2rem; border-radius: 2.4rem; background: #fff; }
.cx-n { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--brand);
    background: conic-gradient(var(--brand) var(--p, 25%), var(--brand-soft) 0); position: relative; margin-bottom: .6rem; }
.cx-n::before { content: ''; position: absolute; inset: .5rem; border-radius: 50%; background: #fff; }
.cx-n { isolation: isolate; } .cx-n::before { z-index: -1; }
.cx-steps > div:nth-child(2) .cx-n { --p: 50%; } .cx-steps > div:nth-child(3) .cx-n { --p: 75%; } .cx-steps > div:nth-child(4) .cx-n { --p: 100%; }
.cx-steps b { font-size: 1.8rem; letter-spacing: -.01em; }
.cx-steps p { font-size: 1.4rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 62rem) {
    .cx-stage { grid-template-columns: 1fr; margin-top: 3rem; }
    .cx-site { display: none; }
    .cx-pop { display: none; }
    .cx-goal { grid-template-columns: 1fr; padding: 2.4rem 1.8rem; gap: 3rem; }
    .cx-goal h3 { font-size: 2.4rem; }
    .cx-invite { left: 0; top: -2rem; }
    .cx-steps { grid-template-columns: 1fr 1fr; }
    .cx-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .cx-tabs .sc-tab { white-space: nowrap; }
}
@media (max-width: 40rem) { .cx-steps { grid-template-columns: 1fr; } }


/* Главная: строка-ключ над заголовком (часть H1) и крупные плашки вместо снимка. */
.h1-kicker { display: block; margin-bottom: 1.2rem; font-size: 2rem; font-weight: 700; letter-spacing: 0; color: var(--brand); }
.hc-floats { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.6rem; margin: 4.4rem auto 0; max-width: 110rem; }
.hcf { display: inline-flex; align-items: center; gap: 1.2rem; padding: 1.6rem 2.2rem; border-radius: 1.8rem; background: #fff;
    color: var(--ink); font-size: 1.7rem; font-weight: 650; box-shadow: 0 1.6rem 3.6rem -1.8rem rgba(var(--shade), .35), 0 0 0 .1rem rgba(var(--brand-rgb), .06);
    animation: float 6s ease-in-out infinite; }
.hcf:nth-child(2) { animation-delay: 1.2s; } .hcf:nth-child(3) { animation-delay: 2.4s; } .hcf:nth-child(4) { animation-delay: 3.6s; }
.hcf .i { width: 2.4rem; height: 2.4rem; color: var(--brand); }
.hcf.live { min-width: 30rem; }
.hcf .live-dot { width: 1.2rem; height: 1.2rem; }
.hcf .live-text small { font-size: 1.3rem; }
.hcf .live-text b { font-size: 1.7rem; }
@media (max-width: 62rem) {
    .h1-kicker { font-size: 1.6rem; }
    .hc-floats { margin-top: 3rem; gap: 1rem; }
    .hcf { font-size: 1.45rem; padding: 1.2rem 1.6rem; }
    .hcf.live { min-width: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hcf { animation: none; } }

/* Тарифы в конструкторе: три — в ряд, четыре — по два. */
.pr-calc .pr-plans-pick.cols-1 { grid-template-columns: 1fr; }
.pr-calc .pr-plans-pick.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-calc .pr-plans-pick.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-calc .pr-plans-pick.cols-3 .pr-plan-in { padding: 2rem 1.6rem; }
.pr-calc .pr-plans-pick.cols-3 .pr-plan-price { font-size: 2.3rem; }
@media (max-width: 75rem) { .pr-calc .pr-plans-pick.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .pr-calc .pr-plans-pick[class*="cols-"] { grid-template-columns: 1fr; } }

.pr-calc-plans { grid-column: 1 / -1; }
.pr-calc-plans .pr-step { margin-top: 0; }
.pr-calc-plans + .pr-calc-main .pr-step:first-child { margin-top: 0; }