/* ============================================================
   AxenChat — общие стили маркетингового сайта (wwwroot/web/*.html)
   Дизайн-токены синхронизированы с /index (Figma-лендинг).
   Подключается после bootstrap.min.css (CDN).
   Консольный SCSS (wwwroot/scss) здесь НЕ используется:
   лендинги самостоятельны и не зависят от сборки консоли.
   ============================================================ */

:root {
    --ac-purple: #6366f1;
    --ac-purple-deep: #4f46e5;
    --ac-purple-dark: #1e1b4b;
    --ac-purple-mid: #312e81;
    --ac-indigo-700: #3730a3;
    --ac-cyan-bright: #38bdf8;
    --ac-cyan-btn: #0ea5e9;
    --ac-yellow: #fbbf24;
    --ac-orange: #f97316;
    --ac-orange-light: #fb923c;
    --ac-orange-dark: #ea580c;
    --ac-pink: #e879f9;
    --ac-green: #10b981;
    --ac-text: #0f172a;
    --ac-muted: #475569;
    --ac-muted-soft: #64748b;
    --ac-line: #e2e8f0;
    --ac-surface: #f1f5f9;
    --ac-surface-soft: #f8fafc;
    --ac-radius-lg: 28px;
    --ac-radius-md: 22px;
    --ac-radius-sm: 14px;
    --ac-radius-pill: 100px;
    --ac-page-max: 1356px;
    --ac-section-gap: 2.25rem;
}

@media (min-width: 992px) {
    :root {
        --ac-section-gap: 4rem;
    }
}

body {
    font-family: "Onest", system-ui, sans-serif;
    color: var(--ac-text);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Каркас страницы ─────────────────────────────────────────── */

.ac-page {
    max-width: var(--ac-page-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}

.ac-page-outer {
    display: flex;
    flex-direction: column;
    gap: var(--ac-section-gap);
    flex: 1;
}

main#main {
    display: flex;
    flex-direction: column;
    gap: var(--ac-section-gap);
}

.ac-font-display {
    font-family: "Unbounded", system-ui, sans-serif;
}

a {
    color: var(--ac-purple-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ac-purple-dark);
}

/* ── Шапка ───────────────────────────────────────────────────── */

.ac-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 0 0 var(--ac-radius-md) var(--ac-radius-md);
    padding: 14px 24px;
    box-shadow: 0 4px 32px rgba(30, 27, 75, 0.3);
}

@media (min-width: 992px) {
    .ac-header {
        padding: 14px 32px;
    }
}

.ac-logo-wrap {
    width: 133px;
    height: 40px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.ac-logo-wrap img {
    position: absolute;
    height: 665%;
    width: 133%;
    max-width: none;
    left: -16%;
    top: -63%;
    object-fit: cover;
}

.ac-header .nav-link {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 500;
    padding: 0.4rem 0;
    transition: opacity 0.18s;
}

.ac-header .nav-link:hover,
.ac-header .nav-link:focus,
.ac-header .nav-link.show {
    color: #fff;
    opacity: 0.78;
}

.ac-header .nav-link[aria-current="page"] {
    color: var(--ac-orange-light);
}

.ac-header .navbar-toggler {
    padding: 0.25rem 0.5rem;
}

.ac-header .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.ac-nav-dropdown {
    border: none;
    border-radius: var(--ac-radius-sm);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    padding: 10px;
    min-width: 288px;
    margin-top: 0.5rem;
}

.ac-nav-dropdown .dropdown-item {
    border-radius: 10px;
    padding: 9px 12px;
    white-space: normal;
    color: var(--ac-text);
}

.ac-nav-dropdown .dropdown-item:hover,
.ac-nav-dropdown .dropdown-item:focus {
    background: var(--ac-surface);
    color: var(--ac-purple-dark);
}

.ac-nav-dropdown .dropdown-item strong {
    display: block;
    font-weight: 600;
    font-size: 0.9688rem;
    line-height: 1.35;
}

.ac-nav-dropdown .dropdown-item span {
    display: block;
    font-size: 0.8125rem;
    color: var(--ac-muted-soft);
    line-height: 1.35;
    margin-top: 1px;
}

.ac-nav-dropdown .dropdown-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ac-muted-soft);
    font-weight: 600;
    padding: 8px 12px 4px;
}

@media (min-width: 992px) {
    .ac-nav-dropdown-wide {
        min-width: 560px;
    }

    .ac-nav-dropdown-wide .ac-nav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 8px;
    }
}

/* ── Кнопки ──────────────────────────────────────────────────── */

.ac-btn-cta {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.5;
    padding: 11px 32px;
    border-radius: var(--ac-radius-pill);
    border: none;
    box-shadow: 0 4px 24px rgba(249, 115, 22, 0.45);
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.ac-btn-cta:hover,
.ac-btn-cta:focus-visible {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.55);
}

.ac-btn-cta-sm {
    padding: 8px 22px;
    font-size: 0.9688rem;
}

.ac-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 10px 28px;
    border-radius: var(--ac-radius-pill);
    transition: background 0.18s, border-color 0.18s;
}

.ac-btn-ghost:hover,
.ac-btn-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

.ac-btn-outline {
    background: #fff;
    color: var(--ac-purple-deep);
    border: 1.5px solid var(--ac-purple);
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 10px 28px;
    border-radius: var(--ac-radius-pill);
    transition: background 0.18s, color 0.18s;
}

.ac-btn-outline:hover,
.ac-btn-outline:focus-visible {
    background: var(--ac-purple-deep);
    border-color: var(--ac-purple-deep);
    color: #fff;
}

/* ── Хлебные крошки ──────────────────────────────────────────── */

.ac-breadcrumb {
    font-size: 0.875rem;
    color: var(--ac-muted-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-breadcrumb li + li::before {
    content: "/";
    color: var(--ac-line);
}

.ac-breadcrumb a {
    color: var(--ac-muted-soft);
    text-decoration: none;
}

.ac-breadcrumb a:hover {
    color: var(--ac-purple-deep);
    text-decoration: underline;
}

.ac-breadcrumb [aria-current="page"] {
    color: var(--ac-text);
    font-weight: 500;
}

/* ── Бейджи статуса функции ──────────────────────────────────── */

.ac-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 14px;
    border-radius: var(--ac-radius-pill);
    letter-spacing: 0.01em;
}

.ac-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ac-badge-live {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.ac-badge-lab {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
}

.ac-badge-service {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ac-purple-deep);
}

.ac-badge-soon {
    background: var(--ac-surface);
    color: var(--ac-muted);
}

.ac-badge-on-dark {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ── Hero ────────────────────────────────────────────────────── */

.ac-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    border-radius: var(--ac-radius-lg);
    overflow: hidden;
    position: relative;
}

.ac-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 70% 35%, rgba(99, 102, 241, 0.42) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.ac-hero-bg {
    position: absolute;
    inset: -60% -19% -17% -13%;
    pointer-events: none;
    opacity: 0.45;
    z-index: 1;
}

.ac-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-hero-inner {
    position: relative;
    z-index: 2;
    padding: 40px 28px 44px;
}

@media (min-width: 992px) {
    .ac-hero-inner {
        padding: 56px 48px 60px;
    }
}

.ac-hero-eyebrow {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ac-cyan-bright);
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}

.ac-hero h1 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.625rem, 3.4vw, 2.875rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 20ch;
    margin: 0;
}

.ac-hero h1.ac-hero-h1-wide {
    max-width: 28ch;
}

.ac-hero-lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 62ch;
    margin-top: 1.25rem;
}

.ac-hero-hint {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ac-orange-light);
    margin-bottom: 0.75rem;
}

.ac-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 1.75rem;
}

.ac-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ac-hero-fact {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ac-hero-fact b {
    color: #fff;
    font-weight: 600;
}

/* ── Заголовки секций ────────────────────────────────────────── */

.ac-h2 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ac-text);
    margin: 0;
}

.ac-h3 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--ac-text);
    margin: 0;
}

.ac-lead {
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.65;
    color: var(--ac-muted);
    max-width: 72ch;
}

.ac-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.ac-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ac-purple-deep);
}

.ac-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ac-muted);
}

.ac-body p:last-child {
    margin-bottom: 0;
}

/* ── Карточки ────────────────────────────────────────────────── */

.ac-card {
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-md);
    padding: 26px;
    height: 100%;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.ac-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ac-card-link:hover,
.ac-card-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
    border-color: rgba(99, 102, 241, 0.55);
    color: inherit;
}

.ac-card-dark.ac-card-link:hover,
.ac-card-dark.ac-card-link:focus-visible {
    color: #fff;
    border-color: transparent;
}

.ac-card-soft {
    background: var(--ac-surface-soft);
    border-color: transparent;
}

/* Акцентная карточка — «наш» вариант в сравнениях, рекомендуемый тариф и т.п. */
.ac-card-accent {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 12px 36px rgba(99, 102, 241, 0.12);
}

.ac-card-dark {
    background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%);
    border-color: transparent;
    color: #fff;
}

.ac-card-dark .ac-h3,
.ac-card-dark h3 {
    color: #fff;
}

.ac-card-dark .ac-body,
.ac-card-dark p {
    color: rgba(255, 255, 255, 0.82);
}

/* Светлая карточка внутри тёмной сохраняет тёмный текст. */
.ac-card-dark .ac-card-soft .ac-h3,
.ac-card-dark .ac-card-soft h3 {
    color: var(--ac-text);
}

.ac-card-dark .ac-card-soft,
.ac-card-dark .ac-card-soft .ac-body,
.ac-card-dark .ac-card-soft p,
.ac-card-dark .ac-card-soft .ac-plain-list,
.ac-card-dark .ac-card-soft .ac-check-list li {
    color: var(--ac-muted);
}

.ac-card-more {
    margin-top: auto;
    padding-top: 14px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ac-purple-deep);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ac-card-more::after {
    content: "→";
    transition: transform 0.18s;
}

.ac-card-link:hover .ac-card-more::after {
    transform: translateX(3px);
}

.ac-icon-tile {
    width: 46px;
    height: 46px;
    border-radius: var(--ac-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(56, 189, 248, 0.16));
}

.ac-icon-tile .ac-ico {
    width: 24px;
    height: 24px;
}

.ac-icon-tile-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(251, 191, 36, 0.18));
}

.ac-icon-tile-cyan {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(16, 185, 129, 0.16));
}

.ac-icon-tile-pink {
    background: linear-gradient(135deg, rgba(232, 121, 249, 0.16), rgba(99, 102, 241, 0.16));
}

/* ── Иконки (inline SVG в data-URI: без внешних библиотек) ───── */

.ac-ico {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: -0.15em;
}

.ac-i-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.ac-i-cross {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.ac-i-partial {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

.ac-i-ai {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9z'/%3E%3Cpath d='M18 16.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E");
}

.ac-i-chat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H8l-4 3v-4.5A8 8 0 0 1 13 4a8 8 0 0 1 8 8z'/%3E%3Cpath d='M9 11h8M9 14.5h5'/%3E%3C/svg%3E");
}

.ac-i-chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16V11M12.5 16V7M17 16v-3.5'/%3E%3C/svg%3E");
}

.ac-i-radar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 12l6-5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%234f46e5' stroke='none'/%3E%3C/svg%3E");
}

.ac-i-pen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5l4 4L8 20H4v-4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
}

.ac-i-book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M8 7.5h8M8 11h6'/%3E%3C/svg%3E");
}

.ac-i-megaphone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5v3l14 5V5.5z'/%3E%3Cpath d='M17 9.5a3 3 0 0 1 0 5'/%3E%3Cpath d='M6 14v4.5a2 2 0 0 0 4 0V15.4'/%3E%3C/svg%3E");
}

.ac-i-telegram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4L2.5 11.2l5.2 1.8L21 4z'/%3E%3Cpath d='M21 4l-3 15-6.3-4.2L21 4z'/%3E%3Cpath d='M7.7 13l.4 5 3.6-3.2'/%3E%3C/svg%3E");
}

.ac-i-shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V6z'/%3E%3Cpath d='M8.8 12l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E");
}

.ac-i-users {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M16 5.2a3.4 3.4 0 0 1 0 6.6M18 20c0-2.4-.9-4.2-2.4-5.2'/%3E%3C/svg%3E");
}

.ac-i-plug {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5'/%3E%3Cpath d='M6 8h12v3a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
}

.ac-i-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.4l3.4 2'/%3E%3C/svg%3E");
}

.ac-i-target {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%234f46e5' stroke='none'/%3E%3C/svg%3E");
}

.ac-i-bulb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 1 3.6 10.8V17H8.4v-3.2A6 6 0 0 1 12 3z'/%3E%3C/svg%3E");
}

.ac-i-rocket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5c3.5.6 6.4 3.5 7 7L12 19l-4-4z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.6'/%3E%3Cpath d='M8 15l-3.5 1.5L6 20.5 8 19'/%3E%3C/svg%3E");
}

.ac-i-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
}

.ac-i-globe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.6 3.8 9S14.5 18.5 12 21c-2.5-2.5-3.8-5.6-3.8-9S9.5 5.5 12 3z'/%3E%3C/svg%3E");
}

.ac-i-handshake {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12.5l4-4 3 1 2.5 2.5'/%3E%3Cpath d='M21.5 12.5l-4-4-3.5 1L12 12l2.5 2.5 2-1.5 2 2'/%3E%3Cpath d='M6.5 8.5L9 6h6l2.5 2.5'/%3E%3C/svg%3E");
}

/* ── Список с галочками ──────────────────────────────────────── */

.ac-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ac-check-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ac-muted);
}

.ac-check-list li::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.ac-check-list li b,
.ac-check-list li strong {
    color: var(--ac-text);
    font-weight: 600;
}

.ac-check-list-dark li {
    color: rgba(255, 255, 255, 0.85);
}

.ac-check-list-dark li b,
.ac-check-list-dark li strong {
    color: #fff;
}

.ac-check-list-dark li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.ac-plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ac-muted);
    line-height: 1.6;
}

.ac-plain-list li {
    padding-left: 18px;
    position: relative;
}

.ac-plain-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ac-purple);
}

/* ── Шаги ────────────────────────────────────────────────────── */

.ac-steps {
    list-style: none;
    counter-reset: ac-step;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ac-step {
    counter-increment: ac-step;
    position: relative;
    padding: 22px 24px 22px 72px;
    background: var(--ac-surface-soft);
    border-radius: var(--ac-radius-md);
    border: 1px solid var(--ac-line);
}

.ac-step::before {
    content: counter(ac-step);
    position: absolute;
    left: 22px;
    top: 21px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ac-purple-deep), var(--ac-purple));
    color: #fff;
    font-family: "Unbounded", system-ui, sans-serif;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ac-step h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--ac-text);
}

.ac-step p {
    margin: 0;
    color: var(--ac-muted);
    line-height: 1.6;
}

.ac-step-note {
    display: block;
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--ac-muted-soft);
}

/* ── Таблица сравнения ───────────────────────────────────────── */

.ac-compare-wrap {
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-md);
    overflow-x: auto;
    background: #fff;
}

.ac-compare {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.9688rem;
}

.ac-compare caption {
    caption-side: top;
    padding: 18px 22px 0;
    text-align: left;
    color: var(--ac-muted-soft);
    font-size: 0.875rem;
}

.ac-compare th,
.ac-compare td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ac-line);
    line-height: 1.5;
}

.ac-compare thead th {
    background: var(--ac-surface-soft);
    font-weight: 600;
    color: var(--ac-text);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.ac-compare thead th.ac-col-us {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(56, 189, 248, 0.12));
    color: var(--ac-purple-dark);
}

.ac-compare tbody th {
    font-weight: 500;
    color: var(--ac-text);
    width: 38%;
}

.ac-compare td.ac-col-us {
    background: rgba(99, 102, 241, 0.05);
}

.ac-compare tbody tr:last-child th,
.ac-compare tbody tr:last-child td {
    border-bottom: none;
}

.ac-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ac-muted);
}

.ac-mark .ac-ico {
    width: 18px;
    height: 18px;
}

/* ── Выноски ─────────────────────────────────────────────────── */

.ac-callout {
    border-radius: var(--ac-radius-md);
    padding: 22px 24px;
    background: var(--ac-surface-soft);
    border: 1px solid var(--ac-line);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.ac-callout .ac-ico {
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.ac-callout h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.ac-callout p {
    margin: 0;
    color: var(--ac-muted);
    line-height: 1.65;
}

.ac-callout p + p {
    margin-top: 10px;
}

.ac-callout-honest {
    background: rgba(249, 115, 22, 0.07);
    border-color: rgba(249, 115, 22, 0.3);
}

.ac-callout-info {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.28);
}

/* Плейсхолдер вместо непроверенной цифры/кейса — не выдумываем метрики */
.ac-placeholder {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.16) 0 6px, rgba(148, 163, 184, 0.07) 6px 12px);
    border: 1px dashed rgba(100, 116, 139, 0.5);
    color: var(--ac-muted-soft);
    font-size: 0.9375em;
    font-style: normal;
}

/* ── Три опоры на главной ────────────────────────────────────── */

.ac-pillar {
    text-align: left;
}

.ac-pillar-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-family: "Unbounded", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ac-purple-deep);
    background: rgba(99, 102, 241, 0.12);
    margin-bottom: 14px;
}

.ac-pillar h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.ac-pillar p {
    margin: 0;
    color: var(--ac-muted);
    line-height: 1.65;
}

/* ── Пустая полоса логотипов (не заполнять вымышленными) ─────── */

.ac-logo-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .ac-logo-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.ac-logo-slot {
    min-height: 72px;
    border: 1.5px dashed var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background: repeating-linear-gradient(135deg, var(--ac-surface-soft) 0 8px, #fff 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ac-muted-soft);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
}

/* ── Черновик статьи (Content Studio) ────────────────────────── */

.ac-draft {
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-md);
    padding: 28px 28px 32px;
}

.ac-draft-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 18px;
    font-size: 0.8125rem;
    color: var(--ac-muted-soft);
}

.ac-draft h3 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.ac-draft .ac-prose {
    max-width: none;
}

/* ── Полоса метрик ───────────────────────────────────────────── */

.ac-metrics {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ac-metric {
    background: var(--ac-surface-soft);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    padding: 20px 22px;
}

.ac-metric-value {
    font-family: "Unbounded", system-ui, sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ac-purple-dark);
    display: block;
    margin-bottom: 6px;
}

.ac-metric-label {
    font-size: 0.9375rem;
    color: var(--ac-muted);
    line-height: 1.45;
}

/* ── Аккордеон (FAQ) ─────────────────────────────────────────── */

.ac-accordion .accordion-item {
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm) !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.ac-accordion .accordion-button {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--ac-text);
    background: #fff;
    padding: 18px 22px;
}

.ac-accordion .accordion-button:not(.collapsed) {
    background: var(--ac-surface-soft);
    color: var(--ac-purple-dark);
    box-shadow: none;
}

.ac-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.2);
}

.ac-accordion .accordion-body {
    color: var(--ac-muted);
    line-height: 1.7;
    padding: 4px 22px 20px;
}

/* ── Финальный CTA ───────────────────────────────────────────── */

.ac-cta-band {
    background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 55%, #1e1b4b 100%);
    border-radius: var(--ac-radius-lg);
    padding: 40px 28px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 992px) {
    .ac-cta-band {
        padding: 52px 48px;
    }
}

.ac-cta-band-deco {
    position: absolute;
    inset: -40% -10% auto -10%;
    opacity: 0.14;
    pointer-events: none;
}

.ac-cta-band-deco img {
    width: 100%;
    height: auto;
}

.ac-cta-band-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.ac-cta-band h2 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    line-height: 1.24;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}

.ac-cta-band p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0.875rem 0 0;
}

.ac-cta-band .ac-hero-actions {
    justify-content: center;
}

/* ── Подвал ──────────────────────────────────────────────────── */

.ac-footer {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: var(--ac-radius-md) var(--ac-radius-md) 0 0;
    padding: 36px 28px 24px;
    margin-top: var(--ac-section-gap);
}

@media (min-width: 992px) {
    .ac-footer {
        padding: 40px 32px 24px;
    }
}

.ac-footer-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.ac-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ac-footer-nav a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: color 0.15s;
}

.ac-footer-nav a:hover,
.ac-footer-nav a:focus {
    color: #fff;
    text-decoration: underline;
}

.ac-footer-bottom {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
}

.ac-footer-copy {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.ac-footer-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s;
}

.ac-footer-link:hover {
    color: #fff;
}

/* ── Формы (заявка, инструменты) ─────────────────────────────── */

.ac-form-card {
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-md);
    padding: 26px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
}

.ac-form-card .form-label {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--ac-text);
}

.ac-form-card .form-control,
.ac-form-card .form-select {
    border-radius: 12px;
    border-color: var(--ac-line);
    padding: 11px 14px;
}

.ac-form-card .form-control:focus,
.ac-form-card .form-select:focus {
    border-color: var(--ac-purple);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.16);
}

.ac-form-hint {
    font-size: 0.8125rem;
    color: var(--ac-muted-soft);
    margin-top: 6px;
}

/* ── Модалка заявки (генерируется site.js) ───────────────────── */

.ac-modal-lead .modal-content {
    border-radius: var(--ac-radius-md);
    overflow: hidden;
    border: none;
}

.ac-modal-lead-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    padding: 26px 28px;
    position: relative;
}

.ac-modal-lead-hero h2 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    padding-right: 32px;
}

.ac-modal-lead-hero p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    margin: 8px 0 0;
    line-height: 1.5;
}

.ac-modal-lead-hero .btn-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.ac-modal-lead .modal-body {
    padding: 24px 28px 28px;
}

.ac-modal-lead .form-label {
    font-weight: 500;
    font-size: 0.9375rem;
}

.ac-modal-lead .form-control {
    border-radius: 12px;
    padding: 11px 14px;
}

.ac-modal-lead .form-control:focus {
    border-color: var(--ac-purple);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.16);
}

/* ── Прочее ──────────────────────────────────────────────────── */

.ac-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ac-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--ac-radius-pill);
    background: var(--ac-surface);
    color: var(--ac-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

a.ac-pill:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ac-purple-deep);
}

.ac-pill .ac-ico {
    width: 18px;
    height: 18px;
}

.ac-quote {
    border-left: 3px solid var(--ac-purple);
    padding: 4px 0 4px 20px;
    color: var(--ac-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0;
}

.ac-quote footer {
    font-size: 0.875rem;
    color: var(--ac-muted-soft);
    margin-top: 8px;
}

.ac-divider {
    height: 1px;
    background: var(--ac-line);
    border: none;
    margin: 0;
    opacity: 1;
}

.ac-toc {
    background: var(--ac-surface-soft);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    padding: 20px 24px;
}

.ac-toc ol {
    margin: 0;
    padding-left: 20px;
    color: var(--ac-muted);
    line-height: 1.8;
}

.ac-prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ac-muted);
    max-width: 76ch;
}

.ac-prose h2 {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    color: var(--ac-text);
    letter-spacing: -0.01em;
    margin: 2.25rem 0 1rem;
}

.ac-prose h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--ac-text);
    margin: 1.75rem 0 0.75rem;
}

.ac-prose h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ac-text);
    margin: 1.5rem 0 0.6rem;
}

.ac-prose ul,
.ac-prose ol {
    padding-left: 22px;
}

.ac-prose li {
    margin-bottom: 8px;
}

.ac-prose code {
    background: var(--ac-surface);
    color: var(--ac-purple-dark);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9375em;
}

.ac-prose pre {
    background: var(--ac-purple-dark);
    color: #e0e7ff;
    padding: 18px 20px;
    border-radius: var(--ac-radius-sm);
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.ac-prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.ac-skip-link:focus {
    z-index: 1080;
}