/* ============================================================
   Bitrix24 landing (page-bitrix24.php) — addons
   Explicit light colors to prevent dark-on-dark inheritance.
   ============================================================ */

.b24-section {
    position: relative;
}

/* --- Section intro / trust --- */
.b24-lead {
    color: rgba(255,255,255,0.8);
    font-size: 17px;
    line-height: 1.7;
    max-width: 820px;
    margin: 0 0 12px;
}
.b24-subnote {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    line-height: 1.6;
    max-width: 820px;
}

/* --- Packages (reuse pricing rows look) --- */
.b24-pack-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}
.b24-pack {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius-md, 14px);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}
.b24-pack::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff5e14, rgba(255,94,20,0.0));
}
.b24-pack-name {
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.b24-pack-price {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.b24-pack-price small {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
}
.b24-pack-desc {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Desktop (>=1025px): просторный вертикальный ритм карточек пакетов —
   заголовок/цена/описание разнесены, шаг сетки и отступ до кнопки больше */
@media (min-width: 1025px) {
	.b24-pack-list {
		gap: 20px;
		margin: 0 0 28px;
	}
	.b24-pack {
		padding: 26px 24px 24px;
		gap: 14px;
	}
	.b24-pack-price {
		margin: 0 0 4px;
	}
}

/* --- Industry / feature mini-cards --- */
.b24-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.b24-mini {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md, 14px);
    padding: 18px 20px;
}
.b24-mini-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.b24-mini-title svg { flex-shrink: 0; color: #ff5e14; }
.b24-mini p {
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* --- Why us check list --- */
.b24-why {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.b24-why li {
    position: relative;
    padding-left: 26px;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.55;
}
.b24-why li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 0;
    color: #ff5e14;
    font-weight: 700;
}
.b24-why li strong { color: #ffffff; }

/* --- SEO text block --- */
.b24-seo {
    max-width: 920px;
}
.b24-seo h3 {
    color: #ffffff;
    font-size: 21px;
    margin: 0 0 10px;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
}
.b24-seo h4 {
    color: #ffffff;
    font-size: 17px;
    margin: 18px 0 8px;
}
.b24-seo p {
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 12px;
}
.b24-seo ul {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.b24-seo li {
    position: relative;
    padding-left: 20px;
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.6;
}
.b24-seo li::before {
    content: '—';
    position: absolute; left: 0;
    color: #ff5e14;
    font-weight: 600;
}
.b24-seo strong { color: #ffffff; }
.b24-seo a { color: #ff5e14; }
/* --- FAQ (native details accordion) --- */
.b24-faq { max-width: 920px; }
.b24-faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md, 14px);
    margin-bottom: 10px;
    overflow: hidden;
}
.b24-faq-item[open] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,94,20,0.35);
}
.b24-faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
.b24-faq-item summary::-webkit-details-marker { display: none; }
.b24-faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: #ff5e14;
    transition: transform 0.2s ease;
}
.b24-faq-item[open] summary::after {
    content: '−';
}
.b24-faq-body {
    padding: 0 22px 18px;
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.7;
}
.b24-faq-body p { margin: 0 0 10px; }
.b24-faq-body p:last-child { margin: 0; }
.b24-faq-body strong { color: rgba(255,255,255,0.9); }

/* --- Cases placeholder --- */
.b24-cases-note {
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    line-height: 1.7;
    max-width: 820px;
}
.b24-cases-note a { color: #ff5e14; }

/* --- Hero small note --- */
.b24-hero-note {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    margin-top: 10px;
}

/* ============================================================
   Section-based scroll + alternating themes (page-id-81)
   ============================================================ */

/* Snap: desktop only */
@media (min-width: 1025px) and (pointer: fine) {
    html:has(body.page-id-81) {
        scroll-snap-type: y proximity;
    }
    body.page-id-81 .section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        scroll-margin-top: 64px;
    }
    /* fill viewport for short blocks */
    body.page-id-81 #b24-hero,
    body.page-id-81 #b24-cta {
        min-height: calc(100vh - 64px);
        display: flex;
        align-items: center;
    }
    body.page-id-81 #b24-hero .website-v2-hero-container,
    body.page-id-81 #b24-cta .container { width: 100%; }
}

/* Blue theme sections */
body.page-id-81 #b24-hero,
body.page-id-81 #b24-pains,
body.page-id-81 #b24-packages,
body.page-id-81 #b24-integrations,
body.page-id-81 #b24-why {
    background: linear-gradient(180deg, #0b0e20 0%, #0d0d20 55%, #0a0a18 100%);
}

/* Green theme sections */
body.page-id-81 #b24-features,
body.page-id-81 #b24-services,
body.page-id-81 #b24-industries,
body.page-id-81 #b24-process,
body.page-id-81 #b24-seo,
body.page-id-81 #b24-cta {
    background: linear-gradient(180deg, #08160f 0%, #0b1c13 55%, #07140d 100%);
}

/* Green cosmic backgrounds for the sections that carry them */
body.page-id-81 #b24-features .website-v2-services-cosmic-bg,
body.page-id-81 #b24-services .website-v2-services-cosmic-bg,
body.page-id-81 #b24-industries .website-v2-services-cosmic-bg,
body.page-id-81 #b24-seo .website-v2-services-cosmic-bg {
    background: radial-gradient(ellipse at 82% 18%, rgba(52, 211, 153, 0.10) 0%, transparent 45%),
                radial-gradient(ellipse at 15% 85%, rgba(74, 222, 128, 0.07) 0%, transparent 50%);
}
body.page-id-81 #b24-process .website-v2-process-cosmic-bg {
    background: radial-gradient(ellipse at 80% 20%, rgba(52, 211, 153, 0.10) 0%, transparent 45%),
                radial-gradient(ellipse at 20% 85%, rgba(74, 222, 128, 0.06) 0%, transparent 50%);
}
body.page-id-81 #b24-cta .website-v2-cta-cosmic-bg {
    background: radial-gradient(ellipse at 80% 20%, rgba(52, 211, 153, 0.10) 0%, transparent 45%),
                radial-gradient(ellipse at 20% 80%, rgba(74, 222, 128, 0.06) 0%, transparent 50%);
}

/* Mobile: no snap, no forced heights */
@media (max-width: 1024px) {
    body.page-id-81 .section {
        scroll-snap-align: none;
        min-height: 0;
    }
}

/* ============================================================
   Hero: Kanban visual (page-id-81)
   ============================================================ */

body.page-id-81 .website-v2-hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    width: 100%;
}
body.page-id-81 .website-v2-hero-content {
    flex: 1 1 520px;
    min-width: 0;
    max-width: 640px;
}

.b24-hero-visual {
    flex: 0 1 540px;
    min-width: 0;
    position: relative;
}

.b24-kanban {
    width: 100%;
    background: rgba(13, 13, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 90px rgba(74, 125, 255, 0.08);
    overflow: hidden;
}

.b24-kanban-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.b24-kanban-dots {
    display: inline-flex;
    gap: 6px;
}
.b24-kanban-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}
.b24-kanban-dots i:nth-child(1) { background: #ff5f57; }
.b24-kanban-dots i:nth-child(2) { background: #febc2e; }
.b24-kanban-dots i:nth-child(3) { background: #28c840; }
.b24-kanban-bar-title {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 0.03em;
}

.b24-kanban-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px;
    min-height: 250px;
}

.b24-kanban-col {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
}
.b24-kanban-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.b24-kanban-col--orange .b24-kanban-col-head { background: #ff5e14; }
.b24-kanban-col--blue .b24-kanban-col-head { background: #3d6ef7; }
.b24-kanban-col--green .b24-kanban-col-head { background: #17a85a; }
.b24-kanban-col-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 1px 8px;
}
.b24-kanban-col-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.b24-kanban-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.b24-kanban-card--ghost { opacity: 0.55; }
.b24-kanban-card--done {
    border-color: rgba(40, 200, 64, 0.45);
    color: #eaffef;
    background: rgba(40, 200, 64, 0.12);
}

/* Flying deal — one card, looped through the funnel */
.b24-kanban-flow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 14px;
}
.b24-kanban-flow-card {
    position: absolute;
    top: 62px;
    left: 0;
    width: calc(33.333% - 8px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: linear-gradient(135deg, rgba(255, 94, 20, 0.92), rgba(255, 122, 58, 0.85));
    border-radius: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 12px 28px rgba(255, 94, 20, 0.35);
    opacity: 0;
    animation: b24-deal-flow 7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.b24-kanban-flow-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: b24-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes b24-deal-flow {
    0%   { left: 0;  opacity: 0; transform: scale(0.92); }
    4%   { opacity: 1; }
    24%  { left: 0;  opacity: 1; transform: scale(1); }
    32%  { opacity: 0.9; }
    40%  { left: calc(33.333% + 1px); opacity: 1; transform: scale(1); }
    60%  { left: calc(33.333% + 1px); opacity: 1; }
    68%  { opacity: 0.9; }
    76%  { left: calc(66.666% + 2px); opacity: 1; }
    90%  { left: calc(66.666% + 2px); opacity: 1; }
    97%  { opacity: 0; }
    100% { left: 0; opacity: 0; transform: scale(0.92); }
}
@keyframes b24-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (max-width: 1199px) {
    body.page-id-81 .website-v2-hero-content { max-width: none; }
    .b24-hero-visual { display: none; }
}

/* --- Kanban v2: lighter & bigger columns, single deal card --- */
.b24-kanban-board {
    padding: 16px;
    gap: 14px;
    min-height: 340px;
}
.b24-kanban-col {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    min-height: 300px;
}
.b24-kanban-col-head {
    padding: 14px 16px;
    font-size: 15px;
}
.b24-kanban-col-count {
    font-size: 12px;
    padding: 2px 10px;
}
.b24-kanban-col-body {
    padding: 12px;
    min-height: 220px;
}

.b24-kanban-flow {
    padding: 0;
}
.b24-kanban-flow-card {
    top: 72px;
    width: calc(30% - 6px);
    min-width: 150px;
    max-width: 190px;
    padding: 13px 16px;
    font-size: 14px;
    border-radius: 11px;
    gap: 10px;
    box-shadow: 0 16px 34px rgba(255, 94, 20, 0.4);
}
.b24-kanban-flow-dot {
    width: 9px;
    height: 9px;
}

@keyframes b24-deal-flow {
    0%   { left: 4%;  opacity: 0; transform: scale(0.94); }
    5%   { opacity: 1; }
    24%  { left: 4%;  opacity: 1; transform: scale(1); }
    32%  { opacity: 0.92; }
    38%  { left: 36.5%; opacity: 1; transform: scale(1); }
    60%  { left: 36.5%; opacity: 1; }
    68%  { opacity: 0.92; }
    74%  { left: 69%;  opacity: 1; transform: scale(1); }
    90%  { left: 69%;  opacity: 1; }
    96%  { opacity: 0; }
    100% { left: 4%;  opacity: 0; transform: scale(0.94); }
}

/* --- Deal card v3: opaque white, multiline, amount on Pay stage --- */
.b24-kanban-flow-card {
    background: #ffffff;
    color: #0d1226;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    width: calc(30% - 8px);
    min-width: 150px;
    max-width: 210px;
}
.b24-kanban-flow-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.b24-kanban-flow-title {
    font-size: 14px;
    font-weight: 800;
    color: #0b0e1f;
    line-height: 1.2;
}
.b24-kanban-flow-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #ff5e14;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
}
.b24-kanban-flow-sub {
    font-size: 11.5px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.35;
}
.b24-kanban-flow-amount {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #0c8a4c;
    opacity: 0;
    animation: b24-amount-flow 7s linear infinite;
}
.b24-kanban-flow-amount i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #17a85a;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.b24-kanban-flow-amount i::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
@keyframes b24-amount-flow {
    0%, 70%   { opacity: 0; }
    73%, 91%  { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* --- Deal card v4: narrower, centered in columns, text wraps --- */
.b24-kanban-flow-card {
    width: calc(27% - 6px);
    min-width: 148px;
    max-width: 176px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    transform: translateX(-50%);
}
.b24-kanban-flow-card .b24-kanban-flow-title,
.b24-kanban-flow-card .b24-kanban-flow-sub,
.b24-kanban-flow-card .b24-kanban-flow-amount {
    white-space: normal;
    overflow: visible;
}
.b24-kanban-flow-sub { display: block; }

@keyframes b24-deal-flow {
    0%   { left: 17.5%; opacity: 0; }
    5%   { opacity: 1; }
    24%  { left: 17.5%; opacity: 1; }
    32%  { opacity: 0.92; }
    38%  { left: 50%;  opacity: 1; }
    60%  { left: 50%;  opacity: 1; }
    68%  { opacity: 0.92; }
    74%  { left: 82.5%; opacity: 1; }
    90%  { left: 82.5%; opacity: 1; }
    96%  { opacity: 0; }
    100% { left: 17.5%; opacity: 0; }
}

/* card lower, badge removed */
.b24-kanban-flow-card { top: 92px; }

/* --- Browser chrome more visible --- */
.b24-kanban-bar {
    gap: 12px;
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding: 10px 14px;
}
.b24-kanban-dots i {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.b24-kanban-url {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.b24-kanban-url svg {
    color: #28c840;
    flex-shrink: 0;
}
.b24-kanban-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 1;
}
.b24-kanban-controls i {
    font-style: normal;
}

/* --- Browser window stands out on dark hero --- */
.b24-kanban {
    background: linear-gradient(180deg, #1a1a3a 0%, #12122d 100%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07),
                0 0 80px rgba(100, 145, 255, 0.30),
                0 0 160px rgba(80, 120, 255, 0.12),
                0 34px 90px rgba(0, 0, 0, 0.55);
}
.b24-kanban-bar {
    background: rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* --- Status line: wait on first two columns, paid amount on last --- */
.b24-kanban-flow-status {
    position: relative;
    display: block;
    margin-top: 6px;
    min-height: 20px;
}
.b24-kanban-flow-wait,
.b24-kanban-flow-paid {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.b24-kanban-flow-wait {
    color: rgba(0, 0, 0, 0.5);
    animation: b24-status-wait 7s linear infinite;
}
.b24-kanban-flow-wait i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.35);
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.b24-kanban-flow-wait i::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    width: 2px;
    height: 5px;
    background: rgba(0, 0, 0, 0.35);
}
.b24-kanban-flow-paid {
    color: #0c8a4c;
    opacity: 0;
    animation: b24-status-paid 7s linear infinite;
}
.b24-kanban-flow-paid i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #17a85a;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.b24-kanban-flow-paid i::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

@keyframes b24-status-wait {
    0%, 58% { opacity: 1; }
    66%, 100% { opacity: 0; }
}
@keyframes b24-status-paid {
    0%, 68% { opacity: 0; }
    72%, 90% { opacity: 1; }
    94%, 100% { opacity: 0; }
}

/* payment line wraps inside the card */
.b24-kanban-flow-wait,
.b24-kanban-flow-paid {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    flex-wrap: wrap;
    row-gap: 2px;
}
.b24-kanban-flow-status { min-height: 34px; }

/* status: icon top-left, text in two lines */
.b24-kanban-flow-wait,
.b24-kanban-flow-paid {
    align-items: flex-start;
}
.b24-flow-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.b24-flow-line {
    display: block;
    white-space: nowrap;
}
.b24-flow-amt {
    font-size: 15px;
    font-weight: 800;
}
.b24-kanban-flow-status { min-height: 44px; }

/* hero labels & expert icon white */
body.page-id-81 .website-v2-hero-price-label {
    color: #ffffff;
}
body.page-id-81 .website-v2-hero-expert svg {
    color: #ffffff;
}

/* each section fills the viewport on desktop (one screen per section) */
@media (min-width: 1025px) and (pointer: fine) {
    body.page-id-81 .page-main > .section {
        min-height: calc(100vh - 64px);
    }
}

/* Features: 12 compact cards fit one screen */
body.page-id-81 #b24-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 36px;
    padding-bottom: 36px;
}
body.page-id-81 #b24-features .container {
    width: 100%;
}
body.page-id-81 #b24-features .website-v2-services-header {
    margin-bottom: 20px;
}
body.page-id-81 #b24-features .website-v2-services-title {
    font-size: clamp(24px, 3vw, 34px);
}
body.page-id-81 #b24-features .b24-lead {
    font-size: 14px;
    margin: 0;
}
body.page-id-81 #b24-features .website-v2-services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
}
body.page-id-81 #b24-features .website-v2-service-card {
    padding: 13px 15px;
}
body.page-id-81 #b24-features .website-v2-service-icon svg {
    width: 20px;
    height: 20px;
}
body.page-id-81 #b24-features .website-v2-service-card-title {
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 5px;
}
body.page-id-81 #b24-features .website-v2-service-card-desc {
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* features: 5 columns on wide desktop so 10 cards = 2 rows */
@media (min-width: 1300px) and (pointer: fine) {
    body.page-id-81 #b24-features .website-v2-services-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Features: full text visible, 3x3 grid on desktop */
body.page-id-81 #b24-features .website-v2-services-grid {
    grid-template-columns: repeat(3, 1fr);
}
body.page-id-81 #b24-features .website-v2-service-card-desc {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    font-size: 12.5px;
    line-height: 1.45;
}

/* pains: visible cards with problem + solution */
#b24-pains .b24-mini {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.b24-pain-solve {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    line-height: 1.5;
}
.b24-pain-solve span {
    color: #ff5e14;
    font-weight: 700;
    margin-right: 6px;
}

/* CRITICAL: content above decorative overlay layers */
body.page-id-81 #b24-pains > .container,
body.page-id-81 #b24-services > .container,
body.page-id-81 #b24-packages > .container,
body.page-id-81 #b24-industries > .container,
body.page-id-81 #b24-integrations > .container,
body.page-id-81 #b24-why > .container,
body.page-id-81 #b24-seo > .container,
body.page-id-81 #b24-features > .container {
    position: relative;
    z-index: 2;
}

/* ======== Services: two columns + animated timeline ======== */
.b24-services2 {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}
.b24-services2-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.b24-svc {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    animation: b24-svc-on 18s linear infinite;
}
.b24-svc:nth-child(1) { animation-delay: 0s; }
.b24-svc:nth-child(2) { animation-delay: -3s; }
.b24-svc:nth-child(3) { animation-delay: -6s; }
.b24-svc:nth-child(4) { animation-delay: -9s; }
.b24-svc:nth-child(5) { animation-delay: -12s; }
.b24-svc:nth-child(6) { animation-delay: -15s; }
.b24-svc-num {
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #ff5e14;
    opacity: 0.9;
}
.b24-svc-body { min-width: 0; }
.b24-svc-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.3;
}
.b24-svc-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
@keyframes b24-svc-on {
    0%, 14% {
        background: rgba(255, 94, 20, 0.16);
        border-color: rgba(255, 94, 20, 0.55);
        box-shadow: 0 0 34px rgba(255, 94, 20, 0.14);
    }
    18%, 100% {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: none;
    }
}

/* Timeline column */
.b24-services2-right { position: relative; }
.b24-tl {
    position: relative;
    padding: 8px 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.b24-tl-rail {
    position: absolute;
    left: 13px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 94, 20, 0.5), rgba(255, 255, 255, 0.08));
}
.b24-tl-scan {
    position: absolute;
    left: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff5e14;
    box-shadow: 0 0 18px rgba(255, 94, 20, 0.9);
    animation: b24-scan 18s linear infinite;
}
.b24-tl-step {
    position: relative;
    padding-left: 34px;
}
.b24-tl-dot {
    position: absolute;
    left: 6px;
    top: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 94, 20, 0.7);
    background: rgba(255, 94, 20, 0.15);
}
.b24-tl-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.b24-tl-text b {
    color: #ffffff;
    font-size: 15px;
}
.b24-tl-text small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
}
@keyframes b24-scan {
    0%   { top: 12px; opacity: 1; }
    90%  { opacity: 1; }
    96%  { opacity: 0; }
    100% { top: calc(100% - 30px); opacity: 0; }
}

@media (max-width: 1024px) {
    .b24-services2 {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .b24-services2-right { display: none; }
}

/* ======== Services: equal heights + aligned unified timeline ======== */
.b24-services2 {
    align-items: stretch;
}
.b24-services2-left {
    justify-content: space-between;
}
.b24-services2-right {
    display: flex;
}
.b24-tl {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding: 6px 0 6px 0;
}
.b24-tl-rail {
    left: 13px;
    top: 12px;
    bottom: 12px;
}
.b24-tl-dot {
    left: 7px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 94, 20, 0.85);
    background: rgba(13, 13, 32, 0.9);
}
.b24-tl-scan {
    left: 7px;
    width: 14px;
    height: 14px;
}
.b24-tl-step {
    padding-left: 40px;
}
@keyframes b24-scan {
    0%   { top: 8px; opacity: 1; }
    92%  { opacity: 1; }
    97%  { opacity: 0; }
    100% { top: calc(100% - 34px); opacity: 0; }
}

/* scanner above node dots */
.b24-tl-scan {
    z-index: 3;
}
.b24-tl-dot {
    z-index: 1;
}

/* JS-driven highlight (top -> bottom), scanner synced */
.b24-svc {
    animation: none;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.b24-svc.is-active {
    background: rgba(255, 94, 20, 0.16);
    border-color: rgba(255, 94, 20, 0.55);
    box-shadow: 0 0 34px rgba(255, 94, 20, 0.14);
}
.b24-tl-scan {
    animation: none;
    transition: top 0.45s ease;
}

/* electric charge line between steps */
.b24-tl-charge {
    position: absolute;
    left: 13px;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, #ff5e14, rgba(255, 94, 20, 0.10));
    box-shadow: 0 0 12px rgba(255, 94, 20, 0.9);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}

/* Hero: fill the whole viewport (no gap at bottom) */
body.page-id-81 #b24-hero {
    min-height: 100vh;
}

/* Services: timeline same height as the cards list */
.b24-services2-right {
    display: flex;
    flex: 1;
    min-width: 0;
}
.b24-tl {
    flex: 1;
    width: 100%;
    justify-content: space-between;
}

/* timeline steps absolutely aligned to card centers (JS sets tops) */
.b24-services2-left {
    position: relative;
}
.b24-tl {
    display: block;
    padding: 0;
}
.b24-tl-step {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding-left: 44px;
    display: flex;
    align-items: center;
}
.b24-tl-dot {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
}
.b24-tl-text {
    display: flex;
    flex-direction: column;
}

/* Services block centered as a composition */
@media (min-width: 1025px) {
    .b24-services2 {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 64px;
    }
    .b24-services2-left {
        flex: 0 1 620px;
        width: 100%;
        max-width: 620px;
    }
    .b24-services2-right {
        flex: 0 0 300px;
        width: 300px;
    }
}

/* Services: centered header + compact to fit one screen */
body.page-id-81 #b24-services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
}
body.page-id-81 #b24-services .container { width: 100%; }
body.page-id-81 #b24-services .website-v2-services-header {
    text-align: center;
    margin-bottom: 18px;
}
body.page-id-81 #b24-services .website-v2-services-title-group {
    align-items: center;
}
body.page-id-81 #b24-services .website-v2-services-title {
    font-size: clamp(24px, 3vw, 34px);
}
body.page-id-81 #b24-services .b24-lead {
    margin: 8px auto 0;
    max-width: 760px;
}

body.page-id-81 #b24-services .b24-services2 {
    gap: 48px;
}
body.page-id-81 #b24-services .b24-svc {
    padding: 10px 14px;
    gap: 12px;
}
body.page-id-81 #b24-services .b24-svc-num {
    font-size: 20px;
}
body.page-id-81 #b24-services .b24-svc-title {
    font-size: 13.5px;
    margin-bottom: 2px;
}
body.page-id-81 #b24-services .b24-svc-desc {
    font-size: 12.5px;
    line-height: 1.4;
}
body.page-id-81 #b24-services .b24-services2-left {
    gap: 8px;
}
body.page-id-81 #b24-services .b24-tl-text b {
    font-size: 13.5px;
}
body.page-id-81 #b24-services .b24-tl-text small {
    font-size: 11.5px;
}

/* ============================================================
   Page design polish: rich per-section backgrounds & accents
   ============================================================ */

/* --- distinct base + glow per section --- */
body.page-id-81 #b24-features {
    background:
        radial-gradient(900px 520px at 88% 8%, rgba(45, 212, 191, 0.14), transparent 60%),
        radial-gradient(760px 480px at 6% 96%, rgba(96, 165, 250, 0.12), transparent 55%),
        linear-gradient(180deg, #08211d 0%, #0b241f 55%, #071a17 100%);
}
body.page-id-81 #b24-pains {
    background:
        radial-gradient(820px 460px at 8% 90%, rgba(255, 94, 20, 0.14), transparent 55%),
        radial-gradient(760px 440px at 92% 10%, rgba(74, 125, 255, 0.12), transparent 55%),
        linear-gradient(180deg, #10112b 0%, #0d0d20 55%, #0a0a1c 100%);
}
body.page-id-81 #b24-services {
    background:
        radial-gradient(820px 480px at 85% 6%, rgba(139, 92, 246, 0.16), transparent 55%),
        radial-gradient(700px 420px at 8% 92%, rgba(74, 125, 255, 0.12), transparent 55%),
        linear-gradient(180deg, #151330 0%, #11102b 55%, #0d0c22 100%);
}
body.page-id-81 #b24-packages {
    background:
        radial-gradient(900px 480px at 90% 8%, rgba(255, 185, 30, 0.12), transparent 55%),
        radial-gradient(720px 440px at 5% 92%, rgba(74, 125, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #101c33 0%, #0d1730 55%, #0a101f 100%);
}
body.page-id-81 #b24-industries {
    background:
        radial-gradient(860px 480px at 85% 8%, rgba(52, 211, 153, 0.14), transparent 55%),
        radial-gradient(700px 440px at 8% 92%, rgba(56, 189, 248, 0.10), transparent 55%),
        linear-gradient(180deg, #07231a 0%, #09231b 55%, #061812 100%);
}
body.page-id-81 #b24-integrations {
    background:
        radial-gradient(820px 460px at 88% 10%, rgba(56, 189, 248, 0.15), transparent 55%),
        radial-gradient(720px 440px at 6% 92%, rgba(45, 212, 191, 0.10), transparent 55%),
        linear-gradient(180deg, #06232a 0%, #08222b 55%, #051a20 100%);
}
body.page-id-81 #b24-process {
    background:
        radial-gradient(760px 460px at 85% 8%, rgba(167, 139, 250, 0.16), transparent 55%),
        radial-gradient(720px 440px at 10% 94%, rgba(74, 125, 255, 0.12), transparent 55%),
        linear-gradient(180deg, #171332 0%, #131030 55%, #0f0c26 100%);
}
body.page-id-81 #b24-why {
    background:
        radial-gradient(820px 460px at 90% 10%, rgba(52, 211, 153, 0.13), transparent 55%),
        radial-gradient(760px 440px at 6% 92%, rgba(96, 165, 250, 0.10), transparent 55%),
        linear-gradient(180deg, #0b2116 0%, #0d241a 55%, #081a11 100%);
}
body.page-id-81 #b24-seo {
    background:
        radial-gradient(860px 500px at 50% 0%, rgba(74, 125, 255, 0.10), transparent 60%),
        linear-gradient(180deg, #10131f 0%, #0d1020 55%, #0a0c18 100%);
}
body.page-id-81 #b24-cta {
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(255, 94, 20, 0.22), transparent 60%),
        radial-gradient(820px 500px at 90% 110%, rgba(124, 58, 237, 0.20), transparent 60%),
        linear-gradient(180deg, #1a1033 0%, #141034 55%, #0d0c28 100%);
}

/* cosmic layers follow their theme */
body.page-id-81 #b24-features .website-v2-services-cosmic-bg {
    background: radial-gradient(ellipse at 80% 15%, rgba(45, 212, 191, 0.10) 0%, transparent 45%),
                radial-gradient(ellipse at 15% 85%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
}
body.page-id-81 #b24-services .website-v2-services-cosmic-bg {
    background: radial-gradient(ellipse at 85% 10%, rgba(139, 92, 246, 0.12) 0%, transparent 45%),
                radial-gradient(ellipse at 12% 90%, rgba(74, 125, 255, 0.09) 0%, transparent 50%);
}
body.page-id-81 #b24-industries .website-v2-services-cosmic-bg {
    background: radial-gradient(ellipse at 85% 12%, rgba(52, 211, 153, 0.10) 0%, transparent 45%),
                radial-gradient(ellipse at 10% 88%, rgba(56, 189, 248, 0.07) 0%, transparent 50%);
}
body.page-id-81 #b24-integrations .website-v2-services-cosmic-bg {
    background: radial-gradient(ellipse at 85% 12%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
                radial-gradient(ellipse at 12% 88%, rgba(45, 212, 191, 0.07) 0%, transparent 50%);
}
body.page-id-81 #b24-process .website-v2-process-cosmic-bg {
    background: radial-gradient(ellipse at 85% 12%, rgba(167, 139, 250, 0.12) 0%, transparent 45%),
                radial-gradient(ellipse at 12% 88%, rgba(74, 125, 255, 0.09) 0%, transparent 50%);
}

/* --- floating glow orbs near section headers --- */
body.page-id-81 #b24-features .website-v2-services-header::before,
body.page-id-81 #b24-pains .website-v2-services-header::before,
body.page-id-81 #b24-services .website-v2-services-header::before,
body.page-id-81 #b24-packages .website-v2-services-header::before,
body.page-id-81 #b24-industries .website-v2-services-header::before,
body.page-id-81 #b24-integrations .website-v2-services-header::before,
body.page-id-81 #b24-process .website-v2-process-header::before,
body.page-id-81 #b24-why .website-v2-services-header::before,
body.page-id-81 #b24-seo .website-v2-services-header::before {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    right: 6%;
    top: -70px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(46px);
    opacity: 0.5;
    z-index: 0;
    animation: b24-orb 9s ease-in-out infinite alternate;
}
body.page-id-81 #b24-features .website-v2-services-header::before { background: rgba(45, 212, 191, 0.25); }
body.page-id-81 #b24-pains .website-v2-services-header::before { background: rgba(255, 94, 20, 0.22); animation-duration: 11s; }
body.page-id-81 #b24-services .website-v2-services-header::before { background: rgba(139, 92, 246, 0.26); animation-duration: 8s; }
body.page-id-81 #b24-packages .website-v2-services-header::before { background: rgba(255, 185, 30, 0.22); animation-duration: 12s; }
body.page-id-81 #b24-industries .website-v2-services-header::before { background: rgba(52, 211, 153, 0.24); animation-duration: 10s; }
body.page-id-81 #b24-integrations .website-v2-services-header::before { background: rgba(56, 189, 248, 0.24); animation-duration: 9s; }
body.page-id-81 #b24-process .website-v2-process-header::before { background: rgba(167, 139, 250, 0.26); animation-duration: 10s; }
body.page-id-81 #b24-why .website-v2-services-header::before { background: rgba(52, 211, 153, 0.20); animation-duration: 12s; }
body.page-id-81 #b24-seo .website-v2-services-header::before { background: rgba(96, 165, 250, 0.18); animation-duration: 13s; }

body.page-id-81 #b24-features .website-v2-services-header,
body.page-id-81 #b24-pains .website-v2-services-header,
body.page-id-81 #b24-services .website-v2-services-header,
body.page-id-81 #b24-packages .website-v2-services-header,
body.page-id-81 #b24-industries .website-v2-services-header,
body.page-id-81 #b24-integrations .website-v2-services-header,
body.page-id-81 #b24-process .website-v2-process-header,
body.page-id-81 #b24-why .website-v2-services-header,
body.page-id-81 #b24-seo .website-v2-services-header {
    position: relative;
}
body.page-id-81 #b24-services .website-v2-services-title-group,
body.page-id-81 #b24-packages .website-v2-services-title-group,
body.page-id-81 #b24-industries .website-v2-services-title-group,
body.page-id-81 #b24-integrations .website-v2-services-title-group,
body.page-id-81 #b24-why .website-v2-services-title-group,
body.page-id-81 #b24-seo .website-v2-services-title-group {
    position: relative;
    z-index: 1;
}

@keyframes b24-orb {
    from { transform: translate(0, 0) scale(1); opacity: 0.38; }
    to   { transform: translate(-34px, 22px) scale(1.12); opacity: 0.6; }
}

/* --- colorful accents on card grids by position --- */
body.page-id-81 #b24-pains .b24-mini:nth-child(1),
body.page-id-81 #b24-pains .b24-mini:nth-child(2),
body.page-id-81 #b24-pains .b24-mini:nth-child(3),
body.page-id-81 #b24-pains .b24-mini:nth-child(4),
body.page-id-81 #b24-pains .b24-mini:nth-child(5),
body.page-id-81 #b24-pains .b24-mini:nth-child(6) { border-left: 3px solid rgba(255, 94, 20, 0.55); }

body.page-id-81 #b24-industries .b24-mini:nth-child(1) { border-top: 2px solid #ff5e14; }
body.page-id-81 #b24-industries .b24-mini:nth-child(2) { border-top: 2px solid #4a7dff; }
body.page-id-81 #b24-industries .b24-mini:nth-child(3) { border-top: 2px solid #22c55e; }
body.page-id-81 #b24-industries .b24-mini:nth-child(4) { border-top: 2px solid #a855f7; }
body.page-id-81 #b24-industries .b24-mini:nth-child(5) { border-top: 2px solid #f5b301; }
body.page-id-81 #b24-industries .b24-mini:nth-child(6) { border-top: 2px solid #38bdf8; }

body.page-id-81 #b24-integrations .b24-mini:nth-child(1) .b24-mini-title { color: #7dd3fc; }
body.page-id-81 #b24-integrations .b24-mini:nth-child(2) .b24-mini-title { color: #86efac; }
body.page-id-81 #b24-integrations .b24-mini:nth-child(3) .b24-mini-title { color: #fcd34d; }
body.page-id-81 #b24-integrations .b24-mini:nth-child(4) .b24-mini-title { color: #c4b5fd; }
body.page-id-81 #b24-integrations .b24-mini:nth-child(5) .b24-mini-title { color: #fda4af; }
body.page-id-81 #b24-integrations .b24-mini:nth-child(6) .b24-mini-title { color: #a5f3fc; }

body.page-id-81 #b24-packages .b24-pack:nth-child(1) { border-color: rgba(255, 94, 20, 0.35); }
body.page-id-81 #b24-packages .b24-pack:nth-child(2) { border-color: rgba(34, 197, 94, 0.35); }
body.page-id-81 #b24-packages .b24-pack:nth-child(3) { border-color: rgba(74, 125, 255, 0.35); }
body.page-id-81 #b24-packages .b24-pack:nth-child(4) { border-color: rgba(168, 85, 247, 0.35); }

/* --- hover lift & glow --- */
body.page-id-81 .website-v2-service-card,
body.page-id-81 .b24-mini,
body.page-id-81 .b24-pack {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
body.page-id-81 .website-v2-service-card:hover,
body.page-id-81 .b24-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body.page-id-81 .b24-pack:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4);
}

/* Features: icon left, text right, bigger type */
body.page-id-81 #b24-features .website-v2-service-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 14px 16px;
}
body.page-id-81 #b24-features .website-v2-service-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    margin: 0;
}
body.page-id-81 #b24-features .website-v2-service-card-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    margin: 0;
}
body.page-id-81 #b24-features .website-v2-service-card-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    line-height: 1.45;
}

/* Features v2: wider gap icon-text, bigger type */
body.page-id-81 #b24-features .website-v2-service-card {
    grid-template-columns: 42px 1fr;
    column-gap: 18px;
    row-gap: 5px;
    padding: 15px 17px;
}
body.page-id-81 #b24-features .website-v2-service-icon svg {
    width: 24px;
    height: 24px;
}
body.page-id-81 #b24-features .website-v2-service-card-title {
    font-size: 16px;
    line-height: 1.25;
}
body.page-id-81 #b24-features .website-v2-service-card-desc {
    font-size: 13.5px;
    line-height: 1.5;
}

/* Features: multi-color icons with neuron glow */
body.page-id-81 #b24-features .website-v2-service-card:nth-child(1) { --c: #ff5e14; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(2) { --c: #4a7dff; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(3) { --c: #22c55e; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(4) { --c: #a855f7; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(5) { --c: #f5b301; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(6) { --c: #38bdf8; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(7) { --c: #fb7185; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(8) { --c: #2dd4bf; }
body.page-id-81 #b24-features .website-v2-service-card:nth-child(9) { --c: #e879f9; }
body.page-id-81 #b24-features .website-v2-service-icon svg {
    stroke: var(--c, #ff5e14);
    color: var(--c, #ff5e14);
    transition: filter 0.35s ease, transform 0.35s ease;
}
body.page-id-81 #b24-features .website-v2-service-icon svg.b24-lit {
    filter: drop-shadow(0 0 8px var(--c, #ff5e14)) drop-shadow(0 0 18px var(--c, #ff5e14));
    transform: scale(1.16);
}

/* ===== Entrance animations ===== */
/* Hero: rise-in for text, slide-in for the browser visual */
@keyframes b24-in-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}
@keyframes b24-in-right {
    from { opacity: 0; transform: translateX(46px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}
body.page-id-81 #b24-hero .website-v2-hero-badge   { animation: b24-in-up .6s ease .05s both; }
body.page-id-81 #b24-hero .website-v2-hero-title   { animation: b24-in-up .7s ease .14s both; }
body.page-id-81 #b24-hero .website-v2-hero-subtitle { animation: b24-in-up .7s ease .22s both; }
body.page-id-81 #b24-hero .website-v2-hero-prices  { animation: b24-in-up .7s ease .3s both; }
body.page-id-81 #b24-hero .website-v2-hero-cta-group { animation: b24-in-up .7s ease .38s both; }
body.page-id-81 #b24-hero .b24-hero-visual       { animation: b24-in-right .85s cubic-bezier(.2,.7,.3,1.05) .42s both; }

/* Features: header + wave of cards when section enters viewport */
@keyframes b24-feat-head {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes b24-feat-card {
    from { opacity: 0; transform: translateY(36px) scale(0.93); }
    to   { opacity: 1; transform: none; }
}
body.page-id-81 #b24-features.pd-in .website-v2-services-header {
    animation: b24-feat-head .6s ease .05s both;
}
body.page-id-81 #b24-features.pd-in .website-v2-service-card {
    animation: b24-feat-card .55s cubic-bezier(.2,.7,.3,1.15) both;
}
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(1) { animation-delay: .1s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(2) { animation-delay: .17s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(3) { animation-delay: .24s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(4) { animation-delay: .31s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(5) { animation-delay: .38s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(6) { animation-delay: .45s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(7) { animation-delay: .52s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(8) { animation-delay: .59s; }
body.page-id-81 #b24-features.pd-in .website-v2-service-card:nth-child(9) { animation-delay: .66s; }

/* ===== Pains: flip cards ===== */
.b24-pains-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
}
.b24-pain {
    position: relative;
    height: 205px;
    perspective: 1100px;
    cursor: pointer;
}
.b24-pain-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.b24-pain.flipped .b24-pain-inner {
    transform: rotateY(180deg);
}
.b24-pain-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.b24-pain-front {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-top: 3px solid var(--ac, #ff5e14);
}
.b24-pain-back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--ac, #ff5e14);
    justify-content: center;
}
.b24-pain:nth-child(1) { --ac: #ff5e14; }
.b24-pain:nth-child(2) { --ac: #4a7dff; }
.b24-pain:nth-child(3) { --ac: #22c55e; }
.b24-pain:nth-child(4) { --ac: #a855f7; }
.b24-pain:nth-child(5) { --ac: #f5b301; }
.b24-pain:nth-child(6) { --ac: #38bdf8; }
.b24-pain:nth-child(7) { --ac: #fb7185; }
.b24-pain:nth-child(8) { --ac: #2dd4bf; }
.b24-pain-num {
    color: var(--ac);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.b24-pain-title {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}
.b24-pain-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
}
.b24-pain-solve-label {
    color: var(--ac);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.b24-pain-solve {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* electricity dot between cards */
.b24-pain-tok {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff5e14;
    box-shadow: 0 0 0 5px rgba(255, 94, 20, 0.16), 0 0 28px rgba(255, 94, 20, 0.95);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* entrance */
@keyframes b24-pain-head {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes b24-pain-in {
    from { opacity: 0; transform: translateY(26px) scale(0.95); }
    to   { opacity: 1; transform: none; }
}
#b24-pains.b24-ready .website-v2-services-header {
    animation: b24-pain-head 0.6s ease both;
}
.b24-pain { opacity: 0; }
#b24-pains.b24-ready .b24-pain {
    animation: b24-pain-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.05) both;
}
#b24-pains.b24-ready .b24-pain:nth-child(1) { animation-delay: 0.08s; }
#b24-pains.b24-ready .b24-pain:nth-child(2) { animation-delay: 0.16s; }
#b24-pains.b24-ready .b24-pain:nth-child(3) { animation-delay: 0.24s; }
#b24-pains.b24-ready .b24-pain:nth-child(4) { animation-delay: 0.32s; }
#b24-pains.b24-ready .b24-pain:nth-child(5) { animation-delay: 0.40s; }
#b24-pains.b24-ready .b24-pain:nth-child(6) { animation-delay: 0.48s; }
#b24-pains.b24-ready .b24-pain:nth-child(7) { animation-delay: 0.56s; }
#b24-pains.b24-ready .b24-pain:nth-child(8) { animation-delay: 0.64s; }

@media (max-width: 900px) {
    .b24-pains-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .b24-pains-grid { grid-template-columns: 1fr; }
}

/* Pains: compact cards + background energy */
body.page-id-81 #b24-pains {
    padding-top: 20px;
    padding-bottom: 20px;
}
body.page-id-81 #b24-pains .website-v2-services-header {
    margin-bottom: 14px;
}
body.page-id-81 #b24-pains .website-v2-services-title {
    font-size: clamp(22px, 2.6vw, 32px);
}
body.page-id-81 #b24-pains .b24-lead {
    font-size: 13.5px;
}
.b24-pains-grid {
    width: 100%;
    max-width: none;
    gap: 10px;
}
.b24-pain {
    height: 158px;
}
.b24-pain-face {
    padding: 12px 14px;
    border-radius: 12px;
}
.b24-pain-num {
    font-size: 11px;
    margin-bottom: 6px;
}
.b24-pain-title {
    font-size: 13.5px;
    line-height: 1.25;
    margin-bottom: 6px;
}
.b24-pain-text {
    font-size: 12px;
    line-height: 1.45;
}
.b24-pain-solve-label {
    font-size: 10px;
    margin-bottom: 6px;
}
.b24-pain-solve {
    font-size: 14px;
    line-height: 1.45;
}

/* background electricity (behind cards) */
#b24-pains {
    position: relative;
}
#b24-pains .container {
    position: relative;
    z-index: 1;
}
.b24-pain-energy {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.b24-pain-energy.on {
    opacity: 1;
}
.b24-energy-base {
    stroke: rgba(255, 94, 20, 0.18);
    stroke-width: 1.5;
}
.b24-energy-flow {
    stroke: #ff5e14;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 4 12;
    animation: b24-energy-run 0.9s linear infinite;
}
.b24-energy-spark {
    fill: #ffe8db;
    filter: drop-shadow(0 0 6px #ff5e14) drop-shadow(0 0 14px #ff5e14);
}
@keyframes b24-energy-run {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -32; }
}
.b24-pain-tok {
    display: none;
}

/* Pains: disable svg/tok leftovers, gold sweep on solution side */
.b24-pain-energy,
.b24-pain-tok {
    display: none;
}
.b24-pain-back {
    overflow: hidden;
}
.b24-pain-back::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 209, 102, 0.20) 50%, transparent 60%);
    transform: translateX(120%) skewX(-14deg);
    opacity: 0;
    pointer-events: none;
}
.b24-pain.flipped.pain-shine .b24-pain-back::after {
    animation: b24-gold-sweep 0.85s ease-out forwards;
}
@keyframes b24-gold-sweep {
    0%   { opacity: 0; transform: translateX(120%) skewX(-14deg); }
    10%  { opacity: 1; }
    80%  { opacity: 0.85; }
    100% { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
}

/* ===== Pains as messenger dialog ===== */
.pd-wrap {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 18px;
    align-items: stretch;
    max-width: 1120px;
    margin: 0 auto;
}
.pd-problems {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-prob {
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.pd-prob:hover {
    border-color: rgba(255, 94, 20, 0.45);
    transform: translateX(2px);
}
.pd-prob.active {
    background: rgba(255, 94, 20, 0.13);
    border-color: #ff5e14;
    color: #ffffff;
}
.pd-prob-num {
    color: #ff5e14;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}
.pd-prob-t {
    font-size: 12.5px;
    line-height: 1.3;
}

.pd-chat {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: min(540px, 62vh);
}
.pd-chat-head {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}
.pd-chat-ava {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5e14, #ff8a3a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}
.pd-chat-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.pd-chat-meta b { color: #ffffff; font-size: 14px; }
.pd-chat-meta small { color: rgba(255, 255, 255, 0.55); font-size: 11px; display: flex; align-items: center; gap: 5px; }
.pd-chat-meta small i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; animation: pd-online 1.6s ease-in-out infinite; }
@keyframes pd-online { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.pd-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-chat-body::-webkit-scrollbar { width: 6px; }
.pd-chat-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.pd-msg {
    max-width: 78%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.pd-msg-c {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.09);
    border-bottom-left-radius: 4px;
    color: rgba(255, 255, 255, 0.92);
}
.pd-msg-m {
    align-self: flex-end;
    background: linear-gradient(135deg, #ff5e14, #ff7a3a);
    border-bottom-right-radius: 4px;
    color: #ffffff;
}
.pd-typing {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 12px 14px;
    display: inline-flex;
    gap: 4px;
}
.pd-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    animation: pd-blink 1s ease-in-out infinite;
}
.pd-typing i:nth-child(2) { animation-delay: .2s; }
.pd-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes pd-blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

.pd-chat-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}
.pd-chat-send {
    color: #ff5e14;
    font-size: 16px;
}

/* entrance */
@keyframes pd-fade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
#b24-pains .pd-problems,
#b24-pains .pd-chat { opacity: 0; }
#b24-pains.b24-ready .pd-problems,
#b24-pains.b24-ready .pd-chat {
    animation: pd-fade .6s ease both;
}
#b24-pains.b24-ready .pd-chat { animation-delay: .12s; }

@media (max-width: 900px) {
    .pd-wrap {
        grid-template-columns: 1fr;
    }
    .pd-problems {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .pd-prob { flex: 1 1 44%; }
    .pd-chat { height: 440px; }
}

/* avatars + message rows */
.pd-chat-ava img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}
.pd-chat-ava {
    overflow: hidden;
}
.pd-row {
    display: flex;
    gap: 7px;
    align-items: flex-end;
    width: 100%;
}
.pd-row-c { justify-content: flex-start; }
.pd-row-m { justify-content: flex-end; }
.pd-mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pd-mini-c {
    background: #4b5563;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}
.pd-mini-m {
    background: linear-gradient(135deg, #ff5e14, #ff8a3a);
}
.pd-mini-m img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}
.pd-chat-body .pd-msg {
    margin: 0;
}

/* favicon-style avatars + sender captions */
.pd-chat-ava {
    background: #000000;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.pd-mini-m {
    background: #000000;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.pd-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: 80%;
    min-width: 0;
}
.pd-col-end {
    align-items: flex-end;
}
.pd-sender {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.pd-msg {
    max-width: 100%;
}

/* fixed participants captions; hide per-message labels */
.pd-chat-whos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.14);
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    letter-spacing: 0.02em;
}
.pd-chat-whos-me {
    color: #ffb27a;
}
.pd-sender {
    display: none;
}
.pd-col {
    gap: 4px;
}

/* messenger section full width of site content */
.pd-wrap {
    width: 100%;
    max-width: none;
    grid-template-columns: 360px 1fr;
    gap: 20px;
}
.pd-prob-t {
    font-size: 13px;
}
.pd-chat {
    height: min(620px, 72vh);
}

/* chat wallpaper (subtle) + chat scroll isolation */
.pd-chat {
    background: #0d0d20;
}
.pd-chat-body {
    background-color: #0c0c1c;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.030) 1px, transparent 1.7px),
        radial-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1.5px),
        radial-gradient(420px 260px at 12% 8%, rgba(74, 125, 255, 0.06), transparent 60%),
        radial-gradient(420px 260px at 90% 95%, rgba(255, 94, 20, 0.05), transparent 60%);
    background-size: 26px 26px, 13px 13px, 100% 100%, 100% 100%;
}
.pd-chat-head {
    background: rgba(13, 13, 32, 0.9);
}
.pd-chat-input {
    background: rgba(13, 13, 32, 0.85);
}

/* dialogue end marker */
.pd-end {
    align-self: center;
    margin: 6px 0 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.pd-end::before,
.pd-end::after {
    content: '';
    height: 1px;
    width: 34px;
    background: rgba(255, 255, 255, 0.14);
}

/* real chat input + consent card */
.pd-chat-input {
    gap: 8px;
    padding: 9px 12px;
}
#pd-chat-field {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 9px 14px;
    color: #ffffff;
    font-size: 13.5px;
    outline: none;
}
#pd-chat-field::placeholder { color: rgba(255, 255, 255, 0.4); }
#pd-chat-field:focus { border-color: #ff5e14; }
.pd-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff5e14, #ff7a3a);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pd-consent {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    width: 100%;
    min-width: 280px;
    max-width: 360px;
}
.pd-consent-title {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
}
.pd-crow {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    padding: 8px 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.35;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.pd-cbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.pd-crow.on { border-color: #ff5e14; background: rgba(255, 94, 20, 0.12); }
.pd-crow.on .pd-cbox {
    background: #ff5e14;
    border-color: #ff5e14;
}
.pd-crow.on .pd-cbox::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    line-height: 1;
}
.pd-crow-txt { display: block; }
.pd-consent-send {
    width: 100%;
    margin-top: 2px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff5e14, #ff7a3a);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.pd-consent-send:disabled {
    opacity: 0.6;
    cursor: default;
}

/* blinking caret in typing indicator */
.pd-typing-caret {
    width: 2px;
    height: 13px;
    background: #ff7a3a;
    display: inline-block;
    margin-left: 4px;
    animation: pd-caret 1s steps(1) infinite;
    vertical-align: middle;
}
@keyframes pd-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* consents side by side */
.pd-consent-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pd-crow {
    align-items: flex-start;
    height: 100%;
}

/* blinking caret inside the user input (invites to type) */
.pd-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}
#pd-chat-field {
    width: 100%;
}
.pd-input-caret {
    position: absolute;
    left: 15px; /* = border 1px + padding-left 14px → native caret x */
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: #ff7a3a;
    opacity: 0;
    pointer-events: none;
}
.pd-input-caret.on {
    animation: pd-caret 1s steps(1) infinite;
}
/* ============================================================
   Hero → конфигуратор: приглашающий мост внизу секции
   Появляется с задержкой, чтобы не отвлекать от H1/CTA.
   ============================================================ */
.b24-hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	max-width: calc(100vw - 32px);
	opacity: 0;
	animation: b24-scroll-reveal 0.7s ease 1.6s both;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}

.b24-hero-scroll:hover,
.b24-hero-scroll:focus-visible {
	color: #ffffff;
}

/* Muted glass circle with a light arrow inside */
.b24-hero-scroll-arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.13);
	border: 1px solid rgba(255, 255, 255, 0.38);
	color: rgba(255, 255, 255, 0.92);
	animation: b24-scroll-nudge 2.6s ease-in-out infinite;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.b24-hero-scroll-arrow svg {
	display: block;
}

/* Gentle expand-ring, only on hover/focus */
.b24-hero-scroll-arrow::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	opacity: 0;
	pointer-events: none;
}

.b24-hero-scroll:hover .b24-hero-scroll-arrow,
.b24-hero-scroll:focus-visible .b24-hero-scroll-arrow {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

.b24-hero-scroll:hover .b24-hero-scroll-arrow::before,
.b24-hero-scroll:focus-visible .b24-hero-scroll-arrow::before {
	animation: b24-scroll-ping 1.7s ease-out infinite;
}

@keyframes b24-scroll-reveal {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes b24-scroll-nudge {
	0%, 100% { transform: translateY(0);   }
	50%      { transform: translateY(4px); }
}

@keyframes b24-scroll-ping {
	0%   { transform: scale(1);     opacity: 0.85; }
	70%  { transform: scale(1.55);  opacity: 0; }
	100% { transform: scale(1.55);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.b24-hero-scroll {
		opacity: 1;
		animation: none;
	}
	.b24-hero-scroll-arrow {
		animation: none;
	}
	.b24-hero-scroll-arrow::before {
		opacity: 0;
		animation: none;
	}
}

@media (max-width: 767px) {
	.b24-hero-scroll {
		bottom: 10px;
		font-size: 13px;
		gap: 8px;
	}
	.b24-hero-scroll-arrow {
		width: 32px;
		height: 32px;
	}
	.b24-hero-scroll-arrow svg {
		width: 16px;
		height: 16px;
	}
}




/* ============================================================
   B24: Интерактивная воронка продаж (demo kanban)
   ============================================================ */
.b24f {
	position: relative;
	z-index: 2;
}

.b24f-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.b24f-hint {
	margin: 0;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 13.5px;
	line-height: 1.5;
}

.b24f-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.b24f-add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.b24f-reset {
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-style: dotted;
	cursor: pointer;
	padding: 6px 2px;
	transition: color 0.2s ease;
}

.b24f-reset:hover { color: rgba(255, 255, 255, 0.85); }

.b24f-board {
	display: flex;
	align-items: stretch;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 2px 10px;
	height: clamp(400px, 62vh, 560px);
	-webkit-overflow-scrolling: touch;
}

.b24f-col {
	flex: 1 1 0;
	min-width: 200px;
	min-height: 0;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.b24f-col--over {
	border-color: var(--b24f-c);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 2px var(--b24f-c), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.b24f-col-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	color: #ffffff;
	flex-shrink: 0;
}

.b24f-col-num {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	opacity: 0.75;
}

.b24f-col-title {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.b24f-col-count {
	margin-left: auto;
	flex-shrink: 0;
	min-width: 22px;
	text-align: center;
	background: rgba(0, 0, 0, 0.22);
	border-radius: 20px;
	padding: 2px 7px;
	font-size: 12px;
	font-weight: 800;
}

.b24f-col-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 8px;
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 94, 20, 0.5) rgba(255, 255, 255, 0.06);
}
.b24f-col-body::-webkit-scrollbar {
	width: 6px;
}
.b24f-col-body::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
}
.b24f-col-body::-webkit-scrollbar-thumb {
	background: rgba(255, 94, 20, 0.5);
	border-radius: 6px;
}
.b24f-col-body::-webkit-scrollbar-thumb:hover {
	background: #ff5e14;
}

.b24f-col-sum {
	padding: 6px 10px 8px;
	flex-shrink: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.4);
	font-size: 11.5px;
}

.b24f-col-empty {
	padding: 10px 6px;
	color: rgba(255, 255, 255, 0.22);
	font-size: 12.5px;
	text-align: center;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 10px;
}

.b24f-card {
	position: relative;
	background: #ffffff;
	color: #0b0e1f;
	border-radius: 9px;
	padding: 8px 10px;
	cursor: grab;
	user-select: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.b24f-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.b24f-card:focus-visible {
	outline: 2px solid #ff5e14;
	outline-offset: 2px;
}

.b24f-card--drag {
	opacity: 0.35;
	cursor: grabbing;
}

.b24f-card--win {
	border: 1px solid rgba(23, 168, 90, 0.5);
}

.b24f-card--win .b24f-card-name {
	padding-right: 20px;
}

.b24f-card--win::after {
	content: '✓';
	position: absolute;
	top: 6px;
	right: 8px;
	color: #17a85a;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

.b24f-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.b24f-card-name {
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.25;
}

.b24f-card-contact {
	margin-top: 3px;
	font-size: 11px;
	color: rgba(0, 0, 0, 0.55);
	line-height: 1.35;
}

.b24f-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px 6px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.b24f-chip {
	background: #eef1f8;
	color: #3a4158;
	border-radius: 20px;
	padding: 2px 9px;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.b24f-card-amount {
	margin-left: auto;
	max-width: 100%;
	font-size: 13px;
	font-weight: 800;
	color: #ff5e14;
	white-space: nowrap;
}

.b24f-fly {
	position: fixed;
	z-index: 1200;
	width: 210px;
	pointer-events: none;
	opacity: 0.92;
	transform: rotate(2deg);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.b24f-stats {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.b24f-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 13px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.b24f-stat--work .b24f-stat-lbl { color: #7aa7ff; }
.b24f-stat--won .b24f-stat-lbl { color: #4ade80; }
.b24f-stat--lost .b24f-stat-lbl { color: #f87171; }

.b24f-stat-lbl {
	font-weight: 700;
}

.b24f-stat-val {
	color: rgba(255, 255, 255, 0.55);
}

.b24f-stat--lost {
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.b24f-stat--lost:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.16);
}

.b24f-arrow {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	transition: transform 0.2s ease;
}

.b24f-arrow--open {
	transform: rotate(180deg);
}

.b24f-lost-panel {
	margin-top: 12px;
	border: 1px solid rgba(248, 113, 113, 0.22);
	background: rgba(248, 113, 113, 0.06);
	border-radius: 14px;
	padding: 14px 16px;
}

.b24f-lost-head {
	font-size: 13px;
	font-weight: 700;
	color: #fca5a5;
	margin-bottom: 10px;
}

.b24f-lost-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 6px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 13px;
}

.b24f-lost-row:first-of-type { border-top: 0; }

.b24f-lost-name { font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.b24f-lost-reason { color: rgba(255, 255, 255, 0.45); font-size: 12.5px; }

.b24f-lost-actions {
	margin-left: auto;
	display: flex;
	gap: 14px;
}

.b24f-link {
	background: none;
	border: 0;
	padding: 0;
	color: #7aa7ff;
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.b24f-link--danger { color: #f87171; }

/* ---------- modal ---------- */
.b24f-overlay {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(5, 7, 18, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.b24f-modal {
	width: min(600px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #13152c;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	padding: 20px 22px;
}

.b24f-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.b24f-modal-head h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	color: #ffffff;
}

.b24f-modal-close {
	background: rgba(255, 255, 255, 0.07);
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.b24f-modal-close:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

.b24f-modal-body {}

.b24f-field {
	display: block;
	margin-bottom: 12px;
}

.b24f-field span {
	display: block;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12.5px;
}

.b24f-input {
	width: 100%;
	box-sizing: border-box;
	background: #0c0e20;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

.b24f-input:focus {
	outline: none;
	border-color: #ff5e14;
}

.b24f-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.b24f-modal-foot {
	margin-top: 8px;
}

.b24f-modal-foot-row {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.b24f-lost-zone {
	padding: 12px;
	border: 1px solid rgba(248, 113, 113, 0.25);
	background: rgba(248, 113, 113, 0.06);
	border-radius: 12px;
}

.b24f-btn-danger {
	background: rgba(248, 113, 113, 0.12);
	border: 1px solid rgba(248, 113, 113, 0.4);
	color: #fca5a5;
	border-radius: 10px;
	padding: 9px 14px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.b24f-btn-danger:hover {
	background: rgba(248, 113, 113, 0.22);
	color: #ffffff;
}

.b24f-lost-reasons {
	margin-top: 12px;
}

.b24f-lost-reasons-title {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 700;
}

.b24f-reason {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13.5px;
	cursor: pointer;
}

.b24f-reason input {
	accent-color: #f87171;
}

.b24f-confirm-lost {
	margin-top: 10px;
	background: #ef4444;
	border-color: #ef4444;
}

.b24f-note {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13.5px;
}

.b24f-note--ok {
	background: rgba(23, 168, 90, 0.12);
	border: 1px solid rgba(23, 168, 90, 0.35);
	color: #86efac;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
	.b24f-col {
		flex: 0 0 236px;
		min-width: 0;
	}
}

@media (max-width: 767px) {
	.b24f-toolbar {
		align-items: flex-start;
	}
	.b24f-grid2 {
		grid-template-columns: 1fr;
	}
	.b24f-lost-actions {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}
	.b24f-modal {
		padding: 16px;
	}
}
/* ---------- b24f: ТЗ из конфигуратора ---------- */
.b24f-spec-bar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: -4px 0 14px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 94, 20, 0.35);
	background: rgba(255, 94, 20, 0.10);
	border-radius: 12px;
	font-size: 13px;
}

.b24f-spec-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.b24f-spec-note {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13.5px;
	line-height: 1.5;
}

.b24f-spec-badge {
	background: #ff5e14;
	color: #ffffff;
	font-weight: 700;
	font-size: 11.5px;
	padding: 3px 10px;
	border-radius: 20px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.b24f-spec-info {
	color: rgba(255, 255, 255, 0.8);
}

.b24f-spec-back {
	margin-left: auto;
	color: #ffb58a;
	white-space: nowrap;
}

.b24f-spec-fields {
	margin: -4px 0 12px;
	padding: 10px 12px;
	border: 1px dashed rgba(255, 94, 20, 0.35);
	border-radius: 10px;
}

.b24f-spec-fields-title {
	margin: 0 0 8px;
	color: #ffb58a;
	font-size: 12.5px;
	font-weight: 700;
}

.b24f-spec-fields-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.b24f-spec-field-chip {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.75);
	border-radius: 20px;
	padding: 2px 9px;
	font-size: 12px;
}

@media (max-width: 767px) {
	.b24f-spec-back {
		margin-left: 0;
	}
}
/* hidden-attribute должен работать для flex-элементов */
.b24f-spec-bar[hidden] {
	display: none !important;
}
/* ---------- b24f-board: тонкий скроллбар в стиле сайта ---------- */
.b24f-board {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 94, 20, 0.55) rgba(255, 255, 255, 0.05);
}
.b24f-board::-webkit-scrollbar {
	height: 8px;
}
.b24f-board::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 8px;
}
.b24f-board::-webkit-scrollbar-thumb {
	background: rgba(255, 94, 20, 0.55);
	border-radius: 8px;
}
.b24f-board::-webkit-scrollbar-thumb:hover {
	background: #ff5e14;
}
.b24f-board::-webkit-scrollbar-corner {
	background: transparent;
}/* ---------- b24f: выбор воронки (демо/ТЗ) ---------- */
.b24f-variant-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.b24f-variant-lbl {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}

.b24f-variant {
	background: #0c0e20;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.b24f-variant:focus {
	outline: none;
	border-color: #ff5e14;
}

.b24f-variant option {
	background: #13152c;
	color: #ffffff;
}

.b24f-variant option.b24f-variant-opt-spec {
	color: #ffb58a;
}

@media (max-width: 767px) {
	.b24f-variant-wrap {
		width: 100%;
	}
	.b24f-variant {
		flex: 1;
	}
}.b24f-col-body .b24f-card,
.b24f-col-body .b24f-col-empty {
	flex-shrink: 0;
}/* ============================================================
   B24 Funnel: секция-экран — канбан заканчивается у нижнего края
   ============================================================ */
body.page-id-81 #b24-funnel.section {
	display: flex;
	flex-direction: column;
	padding: 0;
	min-height: calc(100vh - 64px);
}

#b24-funnel .container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 30px 15px 30px;
}

#b24-funnel .website-v2-services-header {
	margin-bottom: 14px;
	flex-shrink: 0;
}

#b24-funnel .website-v2-services-title {
	font-size: 38px;
	line-height: 1.18;
	margin-bottom: 6px;
}

#b24-funnel .b24-lead {
	font-size: 14px;
	line-height: 1.5;
	max-width: 940px;
	margin-bottom: 0;
}

#b24-funnel .b24f {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

#b24-funnel .b24f-toolbar {
	flex-shrink: 0;
	margin-bottom: 12px;
}

#b24-funnel .b24f-hint {
	font-size: 12.5px;
	max-width: 640px;
}

#b24-funnel .b24f-spec-bar {
	flex-shrink: 0;
	margin: 0 0 12px;
}

#b24-funnel .b24f-board {
	flex: 1 1 auto;
	height: calc(100vh - 400px);
	min-height: 240px;
	max-height: none;
	overflow-y: hidden;
}

#b24-funnel .b24f-stats {
	flex-shrink: 0;
	margin-top: 8px;
}

#b24-funnel .b24f-lost-panel {
	max-height: 190px;
	overflow-y: auto;
	margin-top: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 94, 20, 0.5) rgba(255, 255, 255, 0.06);
}

@media (max-width: 1024px) {
	body.page-id-81 #b24-funnel.section {
		min-height: 0;
	}
	#b24-funnel .container {
		padding: 24px 15px 26px;
	}
	#b24-funnel .b24f-board {
		min-height: 420px;
		max-height: none;
	}
}

@media (max-width: 767px) {
	#b24-funnel .website-v2-services-title {
		font-size: 28px;
	}
	#b24-funnel .b24f-board {
		min-height: 470px;
	}
}/* ---------- b24f: полупрозрачные кнопки скролла стадии ---------- */
.b24f-scroll {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	height: 18px;
	margin: 0 6px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.65);
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s ease, color 0.2s ease;
}

.b24f-scroll.is-visible {
	display: flex;
}

.b24f-scroll:hover {
	background: rgba(255, 255, 255, 0.26);
	color: #ffffff;
}

.b24f-scroll:focus-visible {
	outline: 2px solid #ff5e14;
	outline-offset: 1px;
}/* ============================================================
   B24: Смарт-процессы — что это и примеры (виджет)
   ============================================================ */
#b24-smart {
	position: relative;
}

#b24-smart .website-v2-services-header {
	margin-bottom: 18px;
}

#b24-smart .b24-lead {
	margin-bottom: 0;
}

.sp-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.sp-benefit {
	padding: 12px 14px;
}

.sp-benefit {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sp-benefit b {
	color: #ffb58a;
	font-size: 14.5px;
}

.sp-benefit span {
	color: rgba(255, 255, 255, 0.6);
	font-size: 12.5px;
	line-height: 1.45;
}

.sp-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sp-tab {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.75);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sp-tab:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.sp-tab.is-active {
	background: #ff5e14;
	border-color: #ff5e14;
	color: #ffffff;
}

.sp-tab:focus-visible {
	outline: 2px solid #ff5e14;
	outline-offset: 2px;
}

.sp-pane {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 18px;
	padding: 22px 24px;
}

.sp-pane-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.sp-pane-head h3 {
	margin: 0;
	color: #ffffff;
	font-size: 21px;
}

.sp-statuses {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.sp-status {
	border-radius: 999px;
	padding: 3px 11px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
}

.sp-status--1 { background: #ff5e14; }
.sp-status--2 { background: #f59e0b; color: #1a1206; }
.sp-status--3 { background: #17a85a; }
.sp-status--4 { background: #ef4444; }

.sp-lead {
	margin: 12px 0 18px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14.5px;
	line-height: 1.55;
	max-width: 900px;
}

.sp-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 18px;
}

.sp-col {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 14px 16px;
}

.sp-col-title {
	color: rgba(255, 255, 255, 0.45);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sp-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.sp-col li {
	position: relative;
	padding-left: 16px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13.5px;
	line-height: 1.4;
}

.sp-col li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff5e14;
	box-shadow: 0 0 8px rgba(255, 94, 20, 0.8);
}

.sp-demo {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 14px;
}

.sp-demo-title {
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 10px;
}

.sp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	padding: 9px 14px;
	margin-bottom: 6px;
	font-size: 13.5px;
}

.sp-row span:first-child {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

.sp-row span:nth-child(2) {
	color: rgba(255, 255, 255, 0.5);
}

.sp-row em {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
}

.sp-ok { background: rgba(23, 168, 90, 0.18); color: #6ee7a0; border: 1px solid rgba(23, 168, 90, 0.4); }
.sp-warn { background: rgba(245, 158, 11, 0.16); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.4); }
.sp-alert { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }

@media (max-width: 767px) {
	.sp-cols {
		grid-template-columns: 1fr;
	}
	.sp-pane {
		padding: 16px;
	}
	.sp-pane-head {
		align-items: flex-start;
	}
}/* ---------- B24 smart-process: живой виджет справочников ---------- */
.sp-widget {
	position: relative;
}

.sp-widget-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.sp-widget-title {
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	font-weight: 700;
}

.sp-widget-note {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
}

.sp-widget-pane {
	padding: 0;
	background: transparent;
	border: 0;
}

.sp-widget-caption {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 12px;
	max-width: 900px;
}

.sp-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-row--btn {
	width: 100%;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.sp-row--btn:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 94, 20, 0.4);
}

/* ============================================================
   B24: BI-аналитика и живой демо-дашборд (b24bi)
   ============================================================ */
#b24-bi { position: relative; z-index: 2; }
#b24-bi .container { position: relative; z-index: 3; }

.b24bi-about {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}
.b24bi-about-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	padding: 14px 15px;
}
.b24bi-about-ic {
	flex: 0 0 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #ffb58a;
	background: rgba(255, 94, 20, 0.12);
	border: 1px solid rgba(255, 94, 20, 0.25);
}
.b24bi-about-card > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.b24bi-about-card b { color: #ffffff; font-size: 14px; font-weight: 700; }
.b24bi-about-card > div > span { color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.5; }

/* ---------- окно дашборда ---------- */
.b24bi-frame {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(26, 25, 52, 0.94), rgba(13, 13, 32, 0.92));
	box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.65);
	padding: 15px 16px 13px;
	margin: 0 0 26px;
	overflow: hidden;
}
.b24bi-frame::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 94, 20, 0.55), transparent);
}

.b24bi-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 2px 2px 14px;
}
.b24bi-window {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 7px 12px;
	border-radius: 12px;
}
.b24bi-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.b24bi-dot--r { background: #ff5f57; }
.b24bi-dot--y { background: #febc2e; }
.b24bi-dot--g { background: #28c840; }
.b24bi-win-title {
	margin-left: 4px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
}
.b24bi-title-wrap { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.b24bi-h-title {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.01em;
}
.b24bi-live { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.b24bi-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	animation: b24bi-live-pulse 1.8s ease-out infinite;
}
@keyframes b24bi-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
	70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
#b24bi-clock { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); }

.b24bi-period {
	display: flex;
	gap: 2px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.07);
	padding: 3px;
	border-radius: 12px;
}
.b24bi-period-btn {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: 9px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.b24bi-period-btn:hover { color: rgba(255, 255, 255, 0.85); }
.b24bi-period-btn.is-active { background: rgba(255, 94, 20, 0.18); color: #ffb58a; }
/* ---------- KPI-карточки ---------- */
.b24bi-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.b24bi-kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
	padding: 13px 14px 12px;
	overflow: hidden;
}
.b24bi-kpi::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 94, 20, 0.55), rgba(255, 94, 20, 0));
}
.b24bi-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b24bi-kpi-lbl {
	color: rgba(255, 255, 255, 0.5);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.b24bi-kpi-delta {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	color: #4ade80;
	background: rgba(23, 168, 90, 0.14);
	border: 1px solid rgba(23, 168, 90, 0.25);
	border-radius: 999px;
	padding: 2px 8px;
}
.b24bi-kpi-val {
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: clamp(19px, 1.8vw, 25px);
	font-weight: 800;
	color: #ffffff;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.b24bi-kpi-sub { color: rgba(255, 255, 255, 0.42); font-size: 11.5px; line-height: 1.4; }
.b24bi-kpi-sub b { color: rgba(255, 255, 255, 0.75); font-weight: 600; }

@keyframes b24bi-pop {
	0% { color: #ffffff; }
	40% { color: #ffc8a3; text-shadow: 0 0 16px rgba(255, 94, 20, 0.55); }
	100% { color: #ffffff; text-shadow: none; }
}
.b24bi-kpi-val.b24bi-pop { animation: b24bi-pop 0.7s ease; }

.b24bi-plan { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.b24bi-plan-txt { color: rgba(255, 255, 255, 0.42); font-size: 11px; }
.b24bi-plan-txt b { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.b24bi-plan-track {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.09);
	overflow: hidden;
}
.b24bi-plan-track i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff5e14, #ffb58a);
	transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.b24bi-plan-track i.is-done { background: linear-gradient(90deg, #17a85a, #4ade80); }
/* ---------- панели и график ---------- */
.b24bi-main,
.b24bi-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
	gap: 12px;
	margin-bottom: 12px;
}
.b24bi-bottom { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
.b24bi-panel {
	min-width: 0;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
	padding: 13px 15px 12px;
}
.b24bi-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.b24bi-panel-title { margin: 0; font-size: 13.5px; font-weight: 700; color: #ffffff; }
.b24bi-panel-cap { margin: 2px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.4); }
.b24bi-total {
	flex-shrink: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 15px;
	font-weight: 800;
	color: #ffb58a;
	font-variant-numeric: tabular-nums;
}

.b24bi-chartbox { position: relative; height: 198px; margin-top: 4px; }
.b24bi-chartbox svg { width: 100%; height: 100%; display: block; overflow: visible; }
.b24bi-chart-grid line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.b24bi-chart-line { fill: none; stroke: #ff5e14; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 94, 20, 0.4)); }
.b24bi-chart-dot { fill: #ffb58a; stroke: #ff5e14; stroke-width: 1.5; }
.b24bi-chart-halo { fill: none; stroke: rgba(255, 94, 20, 0.35); stroke-width: 1.5; animation: b24bi-halo 1.6s ease-out infinite; transform-origin: center; }
@keyframes b24bi-halo {
	0% { opacity: 0.9; }
	50% { opacity: 0.15; }
	100% { opacity: 0.9; }
}

/* ---------- воронка (пончик) ---------- */
.b24bi-donut-wrap { display: flex; align-items: center; gap: 18px; padding: 2px 0 2px; }
.b24bi-donut { position: relative; width: 132px; height: 132px; flex: none; }
.b24bi-donut::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(var(--b24bi-conic, rgba(255, 255, 255, 0.08) 0% 100%));
	-webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 61%);
	mask: radial-gradient(farthest-side, transparent 60%, #000 61%);
}
.b24bi-donut-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
}
.b24bi-donut-center b {
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 21px;
	font-weight: 800;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}
.b24bi-donut-center span { font-size: 10.5px; color: rgba(255, 255, 255, 0.45); }

.b24bi-legend { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.b24bi-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.b24bi-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.b24bi-legend-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b24bi-legend b { font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; width: 30px; text-align: right; }
.b24bi-legend em { font-style: normal; width: 34px; text-align: right; font-size: 11px; color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }
/* ---------- команда ---------- */
.b24bi-mgrs { display: flex; flex-direction: column; gap: 7px; }
.b24bi-mgr {
	display: grid;
	grid-template-columns: 20px 30px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 8px 11px;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.b24bi-mgr.is-leader { background: rgba(255, 94, 20, 0.07); border-color: rgba(255, 94, 20, 0.28); }
.b24bi-mgr-rank { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.3); text-align: center; }
.b24bi-mgr.is-leader .b24bi-mgr-rank { color: #ffb58a; }
.b24bi-mgr-ava {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	font-size: 10.5px;
	font-weight: 800;
}
.b24bi-mgr-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.b24bi-mgr-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.b24bi-mgr-line b { font-size: 13px; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b24bi-mgr-amt { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #ffb58a; font-variant-numeric: tabular-nums; }
.b24bi-mgr-meta { font-size: 10.5px; color: rgba(255, 255, 255, 0.42); }
.b24bi-mgr-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.b24bi-mgr-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff5e14, #ffb58a); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.b24bi-mgr.is-leader .b24bi-mgr-bar i { background: linear-gradient(90deg, #17a85a, #4ade80); }
.b24bi-mgr-pct { width: 42px; text-align: right; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }

/* ---------- лента событий ---------- */
.b24bi-feed { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 296px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 94, 20, 0.4) rgba(255, 255, 255, 0.05); }
.b24bi-feed-item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	gap: 9px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 8px 11px;
}
.b24bi-feed-item.is-new { animation: b24bi-feed-in 0.5s ease, b24bi-feed-new 2.2s ease; }
@keyframes b24bi-feed-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes b24bi-feed-new {
	0% { background: rgba(255, 94, 20, 0.16); border-color: rgba(255, 94, 20, 0.5); }
	100% { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); }
}
.b24bi-feed-ic {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
}
.b24bi-feed--lead .b24bi-feed-ic { background: rgba(255, 94, 20, 0.16); color: #ff8b4d; }
.b24bi-feed--move .b24bi-feed-ic { background: rgba(59, 110, 247, 0.18); color: #7aa0ff; }
.b24bi-feed--win .b24bi-feed-ic { background: rgba(23, 168, 90, 0.16); color: #4ade80; }
.b24bi-feed--pay .b24bi-feed-ic { background: rgba(6, 182, 212, 0.16); color: #22d3ee; }
.b24bi-feed-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.b24bi-feed-txt { font-size: 12.5px; color: rgba(255, 255, 255, 0.88); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b24bi-feed-meta { font-size: 10.5px; color: rgba(255, 255, 255, 0.42); font-variant-numeric: tabular-nums; }
.b24bi-feed-amt { font-size: 12.5px; font-weight: 800; color: #ffb58a; font-variant-numeric: tabular-nums; white-space: nowrap; }

.b24bi-demo-note { margin: 12px 2px 0; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.38); text-align: center; }
/* ---------- направления дашбордов ---------- */
.b24bi-services { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 4px 0 24px; }
.b24bi-services-title { margin: 0; font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 15px; font-weight: 700; color: #ffffff; }
.b24bi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.b24bi-chip {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.78);
	font-size: 12.5px;
	line-height: 1.35;
	padding: 6px 13px;
	border-radius: 999px;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.b24bi-chip:hover { border-color: rgba(255, 94, 20, 0.45); background: rgba(255, 94, 20, 0.09); color: #ffb58a; }

/* ---------- CTA ---------- */
.b24bi-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: linear-gradient(120deg, rgba(255, 94, 20, 0.11), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 94, 20, 0.24);
	border-radius: 18px;
	padding: 18px 20px;
}
.b24bi-cta-text { max-width: 780px; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
.b24bi-cta-text b { display: block; margin-bottom: 4px; font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 17px; line-height: 1.3; color: #ffffff; }

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
	.b24bi-main,
	.b24bi-bottom { grid-template-columns: 1fr; }
	.b24bi-feed { max-height: 250px; }
}
@media (max-width: 620px) {
	.b24bi-frame { padding: 12px 11px 10px; border-radius: 16px; }
	.b24bi-top { gap: 10px; }
	.b24bi-title-wrap { order: 3; width: 100%; }
	.b24bi-kpi-val { white-space: normal; }
	.b24bi-donut-wrap { gap: 12px; }
	.b24bi-cta-row { padding: 15px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.b24bi-live-dot,
	.b24bi-chart-halo,
	.b24bi-feed-item.is-new,
	.b24bi-kpi-val.b24bi-pop { animation: none !important; }
	.b24bi-mgr-bar i,
	.b24bi-plan-track i { transition: none !important; }
}

/* ============================================================
   B24: BI-дашборд — фильтры и компактная раскладка (v1.1)
   ============================================================ */
/* ---------- панель фильтров ---------- */
.b24bi-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 2px 10px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
}
.b24bi-fgrp { display: flex; align-items: center; gap: 7px; }
.b24bi-fgrp--push { margin-left: auto; }
.b24bi-fgrp-name { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.b24bi-fselect {
	background: #0c0e20;
	color: #ffffff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 26px 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	cursor: pointer;
	max-width: 180px;
}
.b24bi-fselect:hover { border-color: rgba(255, 255, 255, 0.28); }
.b24bi-fselect:focus { outline: none; border-color: rgba(255, 94, 20, 0.6); }
.b24bi-fselect option { background: #0c0e20; color: #ffffff; }

.b24bi-speed {
	display: flex;
	gap: 2px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.07);
	padding: 2px;
	border-radius: 9px;
}
.b24bi-speed-btn {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.b24bi-speed-btn:hover { color: rgba(255, 255, 255, 0.85); }
.b24bi-speed-btn.is-active { background: rgba(255, 94, 20, 0.18); color: #ffb58a; }
.b24bi-filters-hint { font-size: 10.5px; color: rgba(255, 255, 255, 0.32); }
/* ============================================================
   B24: BI — секция «в один экран» (v1.2)
   Шрифты секции и заголовка — стандартные, как на сайте.
   Высота сокращена структурно: убраны текстовые блоки и панели,
   график и лента событий стоят в одну строку под KPI.
   ============================================================ */
#b24-bi.section { padding: 22px 0; }

#b24-bi .website-v2-services-header { margin-bottom: 12px; }
#b24-bi .b24-lead { margin-bottom: 0; max-width: 960px; }

#b24-bi .b24bi-frame { padding: 12px 14px 12px; margin: 0; border-radius: 16px; }
#b24-bi .b24bi-top { padding-bottom: 8px; }
#b24-bi .b24bi-filters { margin: 0 2px 8px; padding: 6px 10px; }

#b24-bi .b24bi-kpis { gap: 8px; margin-bottom: 8px; }
#b24-bi .b24bi-kpi { padding: 10px 12px 10px; border-radius: 14px; gap: 4px; }

/* Отчёты: график + лента в одной строке */
#b24-bi .b24bi-main {
	grid-template-columns: minmax(0, 1.9fr) minmax(300px, 400px);
	grid-template-rows: minmax(180px, min(27vh, 330px));
	align-items: stretch;
	gap: 8px;
	margin: 0;
}
#b24-bi .b24bi-panel { padding: 10px 12px 9px; border-radius: 12px; }
#b24-bi .b24bi-panel--chart,
#b24-bi .b24bi-panel--feed { display: flex; flex-direction: column; }
#b24-bi .b24bi-panel-head { margin-bottom: 6px; }
#b24-bi .b24bi-chartbox {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	margin-top: 0;
}
#b24-bi .b24bi-feed {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	margin-top: 2px;
}

#b24-bi .b24bi-note {
	margin: 10px 2px 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
	max-width: 1100px;
}

@media (max-width: 1040px) {
	#b24-bi .b24bi-main { grid-template-columns: 1fr; grid-template-rows: auto auto; }
	#b24-bi .b24bi-chartbox { min-height: 200px; }
	#b24-bi .b24bi-feed { min-height: 150px; max-height: 230px; }
}
@media (max-height: 860px) and (min-height: 801px) {
	#b24-bi.section { padding: 16px 0; }
	#b24-bi .website-v2-services-header { margin-bottom: 10px; }
	#b24-bi .b24bi-main { grid-template-rows: minmax(165px, 22vh); }
	#b24-bi .b24bi-frame { padding: 10px 12px 10px; }
	#b24-bi .b24bi-kpi { padding: 8px 10px 8px; }
}
@media (max-height: 800px) {
	#b24-bi.section { padding: 6px 0; }
	#b24-bi .website-v2-services-header { margin-bottom: 8px; }
	#b24-bi .b24bi-main { grid-template-rows: minmax(150px, 19vh); }
	#b24-bi .b24bi-kpi { padding: 7px 10px 8px; }
	#b24-bi .b24bi-frame { padding: 10px 12px 10px; }
}
@media (max-width: 620px) {
	#b24-bi .b24bi-filters { gap: 6px 10px; padding: 7px 10px; }
	#b24-bi .b24bi-filters-hint { display: none; }
	#b24-bi .b24bi-fgrp { width: 100%; justify-content: space-between; }
	#b24-bi .b24bi-fselect { max-width: none; flex: 1; }
	#b24-bi .b24bi-kpi-val { white-space: normal; }
}










.sp-row--btn:focus-visible {
	outline: 2px solid #ff5e14;
	outline-offset: 2px;
}

.sp-row--btn span:nth-child(2) {
	flex: 1 1 auto;
}

.sp-widget-foot {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
}

/* модальная карточка элемента */
.sp-card-status {
	margin-bottom: 12px;
}

.sp-detail {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 10px 16px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 13.5px;
	line-height: 1.45;
}

.sp-detail-k {
	color: rgba(255, 255, 255, 0.5);
}

.sp-detail-v {
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 600px) {
	.sp-detail {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}
	.sp-row--btn span:nth-child(2) {
		flex-basis: 100%;
	}
}/* ---------- смарт-процессы: карточки-табы процессов ---------- */
#b24-smart .sp-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.sp-tab-card {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	font-family: inherit;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	padding: 12px 14px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.8);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-tab-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
	transform: translateY(-1px);
}

.sp-tab-card:focus-visible {
	outline: 2px solid #ff5e14;
	outline-offset: 2px;
}

.sp-tab-card.is-active {
	background: rgba(255, 255, 255, 0.1);
	border-color: #ff5e14;
	box-shadow: 0 0 0 1px #ff5e14, 0 12px 26px rgba(0, 0, 0, 0.25);
}

.sp-tab-card.is-active .sp-tab-icon {
	box-shadow: 0 0 18px rgba(255, 94, 20, 0.25);
}

.sp-tab-icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.07);
}

.sp-tab-card--fin .sp-tab-icon { background: rgba(255, 94, 20, 0.16); color: #ff8b50; }
.sp-tab-card--docs .sp-tab-icon { background: rgba(61, 110, 247, 0.16); color: #8fb0ff; }
.sp-tab-card--dealers .sp-tab-icon { background: rgba(23, 168, 90, 0.16); color: #4ade80; }

.sp-tab-card .sp-tab-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sp-tab-card b {
	font-size: 14.5px;
	color: #ffffff;
	font-weight: 700;
	line-height: 1.2;
}

.sp-tab-card small {
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
}

/* компактнее преимущества, убираем воздух после лида */
#b24-smart .sp-benefit {
	padding: 12px 14px;
}

@media (max-width: 900px) {
	#b24-smart .sp-tabs {
		grid-template-columns: 1fr;
	}
}/* ---------- смарт-процессы v2: заголовок, табы-папки, таблица ---------- */
#b24-smart .sp-widget-head {
	margin-bottom: 14px;
}

.sp-widget-title {
	font-size: 19px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 700;
	margin: 0 0 4px;
}

.sp-widget-note {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

#b24-smart .sp-tabs {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0 12px -1px;
	padding: 0 2px;
}

#b24-smart .sp-tab-card {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px 12px 0 0;
	background: rgba(10, 12, 24, 0.72);
	opacity: 0.55;
	padding: 10px 14px;
	flex: 1 1 180px;
	transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#b24-smart .sp-tab-card:hover {
	opacity: 0.8;
	transform: none;
}

#b24-smart .sp-tab-card.is-active {
	opacity: 1;
	background: #161a33;
	border-color: rgba(255, 255, 255, 0.28);
	border-bottom-color: #161a33;
	box-shadow: none;
}

#b24-smart .sp-widget-pane {
	background: #161a33;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0 14px 14px 14px;
	padding: 16px;
}

/* таблица-справочник */
.sp-grid-head,
.sp-grid-row {
	display: grid;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}

.sp-grid-head {
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-grid-row {
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	text-align: left;
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.sp-grid-row:last-child {
	border-bottom: 0;
}

.sp-grid-row:hover {
	background: rgba(255, 255, 255, 0.05);
}

.sp-grid-row:focus-visible {
	outline: 2px solid #ff5e14;
	outline-offset: -2px;
}

.sp-th {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-td {
	color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-grid-row em {
	justify-self: start;
}

/* бейдж статуса: единая «пилюля» и в таблице, и в карточке элемента */
.sp-grid-row em,
.sp-card-status span {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	border-radius: 999px;
	padding: 2px 10px;
	display: inline-block;
}

.sp-card-status {
	display: flex;
	align-items: center;
}

@media (max-width: 900px) {
	#b24-smart .sp-tabs {
		margin: 0 0 8px;
	}
	#b24-smart .sp-tab-card {
		border-radius: 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}
	#b24-smart .sp-tab-card.is-active {
		border-bottom-color: rgba(255, 255, 255, 0.28);
	}
	#b24-smart .sp-widget-pane {
		border-radius: 14px;
	}
	.sp-table {
		overflow-x: auto;
	}
	.sp-grid-head,
	.sp-grid-row {
		min-width: 760px;
	}
}
/* ============================================================
   B24: Бизнес-процессы и роботы — демо согласования (b24bp)
   ============================================================ */
#b24-bp { position: relative; z-index: 2; }
#b24-bp .container { position: relative; z-index: 3; }
#b24-bp.section { padding: 22px 0; }
#b24-bp .website-v2-services-header { margin-bottom: 12px; }
#b24-bp .b24-lead { margin-bottom: 0; max-width: 1000px; }

.b24bp-frame {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(26, 25, 52, 0.94), rgba(13, 13, 32, 0.92));
	box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.6);
	padding: 12px 14px 12px;
	margin: 0;
	overflow: hidden;
}
.b24bp-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 0 10px;
}
.b24bp-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.b24bp-h-title {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
}
.b24bp-live { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.b24bp-live b { color: #ffb58a; font-weight: 700; }

.b24bp-body {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
	gap: 10px;
	align-items: stretch;
}
.b24bp-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.b24bp-log {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	padding: 10px 11px 8px;
}
.b24bp-log-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.b24bp-log-head span { font-size: 11px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }

.b24bp-log-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 250px;
	flex: 0 0 auto;
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 94, 20, 0.55) rgba(255, 255, 255, 0.06);
	scrollbar-gutter: stable;
}
.b24bp-log-list::-webkit-scrollbar { width: 8px; }
.b24bp-log-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 8px; }
.b24bp-log-list::-webkit-scrollbar-thumb { background: rgba(255, 94, 20, 0.55); border-radius: 8px; }
.b24bp-log-list::-webkit-scrollbar-thumb:hover { background: #ff5e14; }
.b24bp-log-item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 11px;
	padding: 7px 10px;
}
.b24bp-log-item.is-new { animation: b24bi-feed-in 0.4s ease, b24bi-feed-new 1.8s ease; }
.b24bp-log-ic {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
}
.b24bp-log--start .b24bp-log-ic { background: rgba(59, 110, 247, 0.18); color: #7aa0ff; }
.b24bp-log--work .b24bp-log-ic,
.b24bp-log--wait .b24bp-log-ic { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.b24bp-log--wait .b24bp-log-ic { color: #7aa0ff; background: rgba(59, 110, 247, 0.14); }
.b24bp-log--approve .b24bp-log-ic,
.b24bp-log--pay .b24bp-log-ic { background: rgba(23, 168, 90, 0.16); color: #4ade80; }
.b24bp-log--clarify .b24bp-log-ic { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
.b24bp-log--decline .b24bp-log-ic { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.b24bp-log-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.b24bp-log-body b { font-size: 12px; font-weight: 700; color: #ffffff; }
.b24bp-log-body span { font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.62); }
.b24bp-log-item time { font-size: 10px; color: rgba(255, 255, 255, 0.35); font-variant-numeric: tabular-nums; }

.b24bp-doc {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	padding: 11px 12px 10px;
}
.b24bp-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b24bp-doc-top b { font-size: 14px; font-weight: 700; color: #ffffff; }
.b24bp-doc-top span {
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 17px;
	font-weight: 800;
	color: #ffb58a;
	font-variant-numeric: tabular-nums;
}
.b24bp-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px 18px;
	margin: 9px 0 0;
}
.b24bp-fields div { min-width: 0; }
.b24bp-fields dt { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.b24bp-fields dd { margin: 1px 0 0; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b24bp-track { display: flex; gap: 6px; flex-wrap: wrap; }
.b24bp-step {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 1 1 auto;
	min-width: 0;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 11px;
	padding: 5px 9px;
	transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.b24bp-step i {
	flex: 0 0 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-style: normal;
	font-size: 10px;
	font-weight: 800;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.6);
}
.b24bp-step-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.b24bp-step-txt b { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b24bp-step-txt small { font-size: 9.5px; color: rgba(255, 255, 255, 0.38); }
.b24bp-step.is-todo { opacity: 0.55; }
.b24bp-step.is-current {
	background: rgba(255, 94, 20, 0.1);
	border-color: rgba(255, 94, 20, 0.5);
	box-shadow: 0 0 0 1px rgba(255, 94, 20, 0.15);
	opacity: 1;
}
.b24bp-step.is-current i { background: rgba(255, 94, 20, 0.9); color: #ffffff; }
.b24bp-step.is-done { background: rgba(23, 168, 90, 0.08); border-color: rgba(23, 168, 90, 0.4); opacity: 1; }
.b24bp-step.is-done i { background: #17a85a; color: #ffffff; }

.b24bp-now {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(140deg, rgba(255, 94, 20, 0.09), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 94, 20, 0.24);
	border-radius: 14px;
	padding: 11px 12px;
}
.b24bp-ava {
	flex: 0 0 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 800;
}
.b24bp-now-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.b24bp-now-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.b24bp-now-head b { font-size: 14px; font-weight: 700; color: #ffffff; }
.b24bp-now-badge {
	font-size: 10px;
	font-weight: 700;
	color: #ffb58a;
	background: rgba(255, 94, 20, 0.15);
	border: 1px solid rgba(255, 94, 20, 0.3);
	border-radius: 999px;
	padding: 2px 9px;
	white-space: nowrap;
}
.b24bp-now-role { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }
.b24bp-now-status { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.b24bp-work { display: none; gap: 3px; margin-left: auto; align-self: flex-start; }
.b24bp-now.is-working .b24bp-work { display: inline-flex; }
.b24bp-work i { width: 5px; height: 5px; border-radius: 50%; background: #ffb58a; animation: b24bp-dot 1s ease-in-out infinite; }
.b24bp-work i:nth-child(2) { animation-delay: 0.18s; }
.b24bp-work i:nth-child(3) { animation-delay: 0.36s; }
@keyframes b24bp-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.b24bp-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	padding: 8px 10px;
}
.b24bp-scen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.b24bp-scen-lbl { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.b24bp-scen-btn {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.7);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 9px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.b24bp-scen-btn:hover { border-color: rgba(255, 94, 20, 0.4); }
.b24bp-scen-btn.is-active { background: rgba(255, 94, 20, 0.18); border-color: rgba(255, 94, 20, 0.5); color: #ffb58a; }
.b24bp-scen-btn:disabled { opacity: 0.45; cursor: default; }
.b24bp-run { display: flex; align-items: center; gap: 8px; }
.b24bp-start { display: inline-flex; align-items: center; gap: 7px; }
.b24bp-again {
	background: rgba(255, 94, 20, 0.08);
	border: 1px solid rgba(255, 94, 20, 0.4);
	color: #ffb58a;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 10px;
	cursor: pointer;
}
.b24bp-again:hover { background: rgba(255, 94, 20, 0.16); }
.b24bp-start[hidden], .b24bp-again[hidden], .b24bp-result[hidden] { display: none; }

.b24bp-result {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-direction: column;
	border-radius: 14px;
	padding: 11px 13px;
	background: rgba(23, 168, 90, 0.09);
	border: 1px solid rgba(23, 168, 90, 0.35);
}
.b24bp-result.is-bad { background: rgba(239, 68, 68, 0.09); border-color: rgba(239, 68, 68, 0.35); }
.b24bp-result b { font-size: 15px; font-weight: 800; color: #ffffff; }
.b24bp-result.is-ok b::before { content: '✓ '; color: #4ade80; }
.b24bp-result.is-bad b::before { content: '✕ '; color: #fca5a5; }
.b24bp-result span { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); }
.b24bp-controls { position: relative; }
.b24bp-controls.is-ask .b24bp-scen,
.b24bp-controls.is-ask .b24bp-run { opacity: 0; visibility: hidden; }
.b24bp-ask {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(150deg, rgba(23, 22, 48, 0.99), rgba(13, 13, 32, 0.99));
	border: 1px solid rgba(59, 110, 247, 0.45);
	border-radius: 14px;
	padding: 6px 8px;
	z-index: 2;
}
.b24bp-ask[hidden] { display: none; }
.b24bp-ask textarea {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	background: #0c0e20;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #ffffff;
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 10px;
	resize: none;
	box-sizing: border-box;
}
.b24bp-ask textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.b24bp-ask textarea:focus { outline: none; border-color: rgba(255, 94, 20, 0.6); }
.b24bp-ask .btn { flex: 0 0 auto; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; }
.b24bp-ask .btn[disabled] { opacity: 0.5; }
.b24bp-ask-title,
.b24bp-ask-row,
.b24bp-ask-hint { display: none; }

@media (max-width: 1040px) {
	.b24bp-body { grid-template-columns: 1fr; }
	.b24bp-log { min-height: 190px; }
}
@media (max-width: 620px) {
	.b24bp-fields { grid-template-columns: 1fr; }
	.b24bp-controls { justify-content: center; }
	.b24bp-run { width: 100%; justify-content: center; }
	.b24bp-now { align-items: flex-start; }
}
@media (max-height: 860px) and (min-height: 801px) {
	#b24-bp.section { padding: 16px 0; }
	#b24-bp .website-v2-services-header { margin-bottom: 10px; }
}
@media (max-height: 800px) {
	#b24-bp.section { padding: 6px 0; }
	#b24-bp .website-v2-services-header { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.b24bp-log-item.is-new,
	.b24bp-work i { animation: none !important; }
}

@media (max-height: 740px) {
	#b24-bp.section { padding: 2px 0; }
	#b24-bp .website-v2-services-header { margin-bottom: 6px; }
	#b24-bp .b24bp-frame { padding: 8px 10px 8px; }
	#b24-bp .b24bp-doc { padding: 7px 9px; }
	#b24-bp .b24bp-now { padding: 6px 8px; gap: 9px; }
	#b24-bp .b24bp-ava { width: 36px; height: 36px; flex-basis: 36px; }
	#b24-bp .b24bp-controls { padding: 6px 8px; }
	#b24-bp .b24bp-log { padding: 8px 9px 6px; }
	#b24-bp .b24bp-main { gap: 6px; }
}


#b24-bp .b24bi-note { color: #ffffff; }

@media (max-height: 860px) {
	.b24bp-log-list { height: 220px; }
}
@media (max-height: 800px) {
	.b24bp-log-list { height: 195px; }
}
@media (max-height: 740px) {
	.b24bp-log-list { height: 160px; }
}

/* ============================================================
   B24: Портал изнутри — 25 возможностей (b24p) — плоская сетка 4×7
   Секция больше не занимает экран: разделы-вкладки, поиск, счётчик
   и пустое состояние убраны. Все инструменты видны сразу сеткой
   в 4 колонки, клик по карточке открывает подробное описание в модалке.
   ============================================================ */
#b24-portal.section {
	display: block;
	padding: 22px 0;
	height: auto;
	min-height: 0;
}

#b24-portal {
	position: relative;
	z-index: 2;
}

#b24-portal .container {
	position: relative;
	z-index: 3;
	padding: 0 15px;
}

/* подсветка космоса: фиолетово-бирюзовая, чтобы отличать секцию от соседних */
#b24-portal .website-v2-services-cosmic-bg {
	background:
		radial-gradient(ellipse at 84% 10%, rgba(139, 92, 246, 0.12) 0%, transparent 45%),
		radial-gradient(ellipse at 10% 90%, rgba(45, 212, 191, 0.09) 0%, transparent 50%),
		linear-gradient(170deg, #0a0a1a 0%, #0d0d20 20%, #0d1218 60%, #0a0a16 100%);
}

#b24-portal .website-v2-services-header {
	margin-bottom: 14px;
}

#b24-portal .website-v2-services-title {
	font-size: 38px;
	line-height: 1.18;
	margin-bottom: 6px;
}

#b24-portal .b24-lead {
	font-size: 14px;
	line-height: 1.5;
	max-width: 1080px;
	margin-bottom: 0;
}

/* ссылка «что мы уже сделали» в лиде секции */
.b24-content-link {
	color: #c4b5fd;
	text-decoration: none;
	border-bottom: 1px solid rgba(196, 181, 253, 0.35);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.b24-content-link:hover,
.b24-content-link:focus-visible {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.7);
}

/* ---------- окно портала ---------- */
.b24p-frame {
	position: relative;
	padding: 12px 14px 14px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(26, 25, 52, 0.94), rgba(13, 13, 32, 0.92));
	box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.6);
}

.b24p-top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 10px;
}

.b24p-top .b24bi-window {
	flex: 0 0 auto;
}

.b24p-count {
	flex: 0 0 auto;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.12);
	color: #c4b5fd;
}

/* подсказка «нажмите на карточку» прижимается к правому краю шапки окна */
.b24p-hint {
	flex: 1 1 220px;
	margin: 0;
	text-align: right;
	font-size: 12px;
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.45);
}
/* ---------- сетка карточек: 4 колонки ---------- */
.b24p-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

/* ---------- карточка возможности: иконка и название в одну строку ---------- */
.b24p-item {
	position: relative;
	display: flex;
	/* Компактная строка: пояснение к инструменту живёт в модалке,
	   поэтому в списке остаётся только название рядом с иконкой. */
	min-height: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.035);
	overflow: hidden;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.b24p-item:hover {
	border-color: rgba(139, 92, 246, 0.45);
	background: rgba(139, 92, 246, 0.07);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.8);
}

.b24p-item.is-open {
	border-color: rgba(139, 92, 246, 0.55);
	background: rgba(139, 92, 246, 0.08);
}

.b24p-item-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 9px 10px;
	text-align: left;
	font-family: inherit;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
}

.b24p-item-btn:focus-visible {
	outline: 2px solid #8b5cf6;
	outline-offset: -2px;
}

.b24p-item-ico {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.06);
	color: #9fd7ff;
	transition: background 0.2s ease, color 0.2s ease;
}

.b24p-item:hover .b24p-item-ico,
.b24p-item.is-open .b24p-item-ico {
	background: rgba(139, 92, 246, 0.22);
	color: #ffffff;
}

.b24p-item-main {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.b24p-item-title {
	/* Длинные официальные названия («Приложения из Битрикс24 Маркетплейса»)
	   переносим максимум на две строки, чтобы сетка оставалась ровной. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}

/* Пояснение в карточке не показываем: его текст уходит подзаголовком
   в модалку (скрипт читает .b24p-item-hint по textContent). */
.b24p-item-hint {
	display: none;
}

.b24p-item-more {
	/* «+» стоит в потоке строки у правого края — маркер «открыть описание» */
	position: static;
	flex: 0 0 20px;
	margin-left: auto;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.5);
	transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.b24p-item:hover .b24p-item-more {
	background: rgba(139, 92, 246, 0.25);
	color: #ffffff;
}

/* открытая карточка: «+» поворачивается в «×» */
.b24p-item.is-open .b24p-item-more {
	transform: rotate(45deg);
	background: rgba(139, 92, 246, 0.3);
	color: #ffffff;
}
/* ---------- плитка-переход: чего нет в коробке ---------- */
.b24p-fill {
	/* 25 карточек — это 6 полных рядов по 4 и одна карточка в седьмом;
	   плитка закрывает три оставшиеся ячейки, ряд остаётся ровным. */
	grid-column: span 3;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	padding: 9px 14px;
	border: 1px dashed rgba(139, 92, 246, 0.45);
	border-radius: 12px;
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.12), rgba(45, 212, 191, 0.06));
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s ease;
}

.b24p-fill:hover,
.b24p-fill:focus-visible {
	border-color: rgba(139, 92, 246, 0.8);
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.2), rgba(45, 212, 191, 0.1));
	transform: translateY(-2px);
}

.b24p-fill-ico {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(139, 92, 246, 0.22);
	color: #ffffff;
}

.b24p-fill-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.b24p-fill-text b {
	font-size: 12.5px;
	font-weight: 700;
	color: #ffffff;
}

.b24p-fill-text span {
	font-size: 11.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.55);
}

.b24p-fill-arrow {
	margin-left: auto;
	font-size: 18px;
	line-height: 1;
	color: #c4b5fd;
	transition: transform 0.2s ease;
}

.b24p-fill:hover .b24p-fill-arrow {
	transform: translateX(4px);
}

/* ---------- подвал окна: заявка на внедрение ---------- */
.b24p-foot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.b24p-foot-text {
	flex: 1 1 420px;
	min-width: 0;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

.b24p-foot-text b {
	font-size: 13px;
	color: #ffffff;
}

.b24p-foot-text span {
	display: block;
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.42);
}

.b24p-foot-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.b24p-foot-cta .btn {
	white-space: nowrap;
}

.b24p-foot-back {
	font-size: 12.5px;
	color: #c4b5fd;
	text-decoration: none;
	border-bottom: 1px solid rgba(196, 181, 253, 0.35);
}

.b24p-foot-back:hover,
.b24p-foot-back:focus-visible {
	color: #ffffff;
	border-color: #ffffff;
}

/* ---------- появление карточек ---------- */
/* Задержку задаёт PHP: --b24p-d = (номер колонки × 60ms), поэтому ряды
   «догоняют» друг друга по горизонтали. Общую задержку animations-v2.js
   (индекс × 80ms) гасим: на 26 карточках последняя ждала бы появления
   больше двух секунд. Сама анимация включается классом .v2-visible. */
#b24-portal .v2-stagger-item {
	opacity: 1;
	transform: none;
	transition-delay: 0ms !important;
}

#b24-portal .v2-stagger-item.v2-visible {
	animation: b24p-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	animation-delay: var(--b24p-d, 0ms);
}

@keyframes b24p-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- подробное описание: лежит в пункте скрытым, показывается в модалке ---------- */
.b24p-item-detail {
	display: none;
}

.b24p-item-btn[aria-haspopup='dialog'] .b24p-item-more {
	transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

/* ---------- модальное окно возможности ---------- */
.b24p-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(6, 6, 16, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	/* visibility переключаем мгновенно при открытии (иначе не встаёт фокус)
	   и с задержкой при закрытии, чтобы успела отыграть плавность. */
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.b24p-modal-overlay.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.b24p-modal {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: min(84vh, 720px);
	padding: 26px 30px 24px;
	border: 1px solid rgba(139, 92, 246, 0.32);
	border-radius: 20px;
	background: linear-gradient(160deg, #16152e 0%, #0d0d20 60%, #0e1118 100%);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(139, 92, 246, 0.07);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: scale(0.96) translateY(12px);
	transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
	scrollbar-width: thin;
	scrollbar-color: rgba(139, 92, 246, 0.5) rgba(255, 255, 255, 0.06);
}

.b24p-modal-overlay.active .b24p-modal {
	transform: scale(1) translateY(0);
}

.b24p-modal::-webkit-scrollbar { width: 6px; }
.b24p-modal::-webkit-scrollbar-track { background: transparent; }
.b24p-modal::-webkit-scrollbar-thumb {
	background: rgba(139, 92, 246, 0.4);
	border-radius: 3px;
}

.b24p-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.b24p-modal-close:hover,
.b24p-modal-close:focus-visible {
	background: rgba(139, 92, 246, 0.22);
	border-color: rgba(139, 92, 246, 0.5);
	color: #ffffff;
}

.b24p-modal-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-right: 44px;
	margin-bottom: 14px;
}

.b24p-modal-ico {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(139, 92, 246, 0.18);
	color: #ffffff;
}

.b24p-modal-ico svg {
	width: 20px;
	height: 20px;
}

.b24p-modal-cat {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #c4b5fd;
}

.b24p-modal-title {
	margin: 3px 0 4px;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

.b24p-modal-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
}

.b24p-modal-body {
	font-size: 14px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

.b24p-modal-body p {
	margin: 0 0 12px;
}

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

.b24p-modal-body b {
	color: rgba(255, 255, 255, 0.9);
}

.b24p-d-lead {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.82);
}

.b24p-d-use {
	padding: 12px 14px;
	border-left: 2px solid #8b5cf6;
	border-radius: 0 12px 12px 0;
	background: rgba(139, 92, 246, 0.09);
	color: rgba(255, 255, 255, 0.82);
}

.b24p-d-h {
	margin: 16px 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.b24p-d-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 7px;
}

.b24p-d-list li {
	position: relative;
	padding-left: 20px;
}

.b24p-d-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8b5cf6;
}

.b24p-d-effect {
	color: rgba(255, 255, 255, 0.78);
}

.b24p-d-tech {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
}

.b24p-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.b24p-modal-cta {
	padding: 10px 20px;
	font-size: 14px;
}

.b24p-modal-link {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.b24p-modal-link:hover,
.b24p-modal-link:focus-visible {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

/* Пока модалка открыта — страница не прокручивается, а плавающие виджеты
   у нижнего края экрана уступают место оверлею.
   Причина та же, что и в блоке b24a ниже: !important нужен против
   responsive.css (`@media (max-width: 1024px) .page-main { overflow-y: auto
   !important }`), а виджеты рисуются поверх оверлея, потому что тот заперт
   внутри стека секции (#b24-portal { z-index: 2 }). */
html.b24p-modal-on .page-main,
html.b24p-modal-on body {
	overflow: hidden !important;
}

html.b24p-modal-on .floating-panel,
html.b24p-modal-on .chat-widget,
html.b24p-modal-on .chat-bubble {
	visibility: hidden;
}

@media (max-width: 700px) {
	.b24p-modal-overlay { padding: 12px; }
	.b24p-modal { padding: 22px 18px 18px; border-radius: 16px; }
	.b24p-modal-title { font-size: 18px; }
	.b24p-modal-body { font-size: 13.5px; }
	.b24p-modal-cta { width: 100%; justify-content: center; }
	.b24p-modal-link { width: 100%; text-align: center; }
}

@media (max-height: 700px) {
	.b24p-modal { max-height: 92vh; padding: 18px 22px 16px; }
}

/* ---------- адаптив: та же сетка, но меньше колонок ---------- */
@media (max-width: 1023px) {
	#b24-portal .website-v2-services-title {
		font-size: 32px;
	}
	/* 3 колонки: 25 карточек — 8 полных рядов и одна карточка в девятом */
	.b24p-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.b24p-fill {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	#b24-portal .container {
		padding: 0 12px;
	}
	#b24-portal .website-v2-services-title {
		font-size: 27px;
	}
	#b24-portal .b24-lead {
		font-size: 13px;
	}
	.b24p-frame {
		padding: 10px;
		border-radius: 14px;
	}
	.b24p-top {
		gap: 8px;
	}
	/* подсказка уходит под шапку окна — справа ей уже не хватает места */
	.b24p-hint {
		flex-basis: 100%;
		text-align: left;
	}
	.b24p-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.b24p-item {
		min-height: 0;
	}
	.b24p-item-btn {
		padding: 9px 9px;
	}
	.b24p-item-title {
		font-size: 12px;
	}
	.b24p-fill {
		min-height: 0;
	}
	.b24p-foot {
		gap: 12px;
	}
	.b24p-foot-text {
		flex-basis: 100%;
	}
}

/* Телефон: одна колонка-список — иконка слева, название справа. */
@media (max-width: 560px) {
	#b24-portal .website-v2-services-title {
		font-size: 23px;
	}
	#b24-portal .b24-lead {
		font-size: 12.5px;
	}
	.b24p-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.b24p-item {
		min-height: 0;
	}
	.b24p-item-btn {
		gap: 9px;
		padding: 8px 9px;
	}
	.b24p-item-ico {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}
	.b24p-fill {
		flex-wrap: wrap;
	}
	.b24p-fill-text span {
		font-size: 11px;
	}
	.b24p-foot-cta {
		width: 100%;
	}
	.b24p-foot-cta .btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	#b24-portal .v2-stagger-item.v2-visible {
		animation: none !important;
	}
	.b24p-item,
	.b24p-item-ico,
	.b24p-item-more,
	.b24p-fill,
	.b24p-fill-arrow {
		transition: none !important;
	}
}

/* ============================================================
   B24: Своё приложение под ваш процесс (b24a) — #b24-custom-app
   Секция идёт сразу после #b24-portal: «в коробке этого нет —
   значит, пишем приложение». Плитка показывает только иконку и
   название, подробное описание (лид, «зачем», «что внутри»,
   эффект, стек) открывается в модальном окне #b24aModal.
   Внешних ссылок на примеры нет: приложения живут внутри
   портала, демо показывает команда на созвоне.
   Под сеткой — CTA «нужного приложения ещё нет?».
   Вертикальный ритм секции намеренно просторный — блок
   «вертикальные расстояния» ниже.
   ============================================================ */

#b24-custom-app {
	position: relative;
	z-index: 2;
	scroll-margin-top: 64px;
}

#b24-custom-app .container {
	position: relative;
	z-index: 3;
}

/* подсветка космоса: оранжево-бирюзовая — «то, чего нет в коробке» */
#b24-custom-app .website-v2-services-cosmic-bg {
	background:
		radial-gradient(ellipse at 12% 6%, rgba(255, 94, 20, 0.11) 0%, transparent 46%),
		radial-gradient(ellipse at 88% 94%, rgba(45, 212, 191, 0.08) 0%, transparent 50%),
		linear-gradient(172deg, #0a0a16 0%, #110f1d 45%, #0a0f14 100%);
}

#b24-custom-app .website-v2-services-header {
	margin-bottom: 28px;
}

#b24-custom-app .website-v2-services-title {
	font-size: 34px;
	line-height: 1.18;
	margin-bottom: 12px;
}

#b24-custom-app .b24-lead {
	font-size: 14.5px;
	line-height: 1.6;
	max-width: 1080px;
	margin-bottom: 0;
}

/* ---------- появление блоков: задержку задаёт PHP (--b24a-d), включает .v2-visible ---------- */
#b24-custom-app .v2-stagger-item {
	opacity: 1;
	transform: none;
}

#b24-custom-app .v2-stagger-item.v2-visible {
	animation: b24a-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	animation-delay: var(--b24a-d, 0ms);
}

@keyframes b24a-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* ---------- «что мы уже разработали» ---------- */
.b24a-done {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.b24a-done-head {
	margin: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #ffffff;
}

.b24a-done-hint {
	margin: -6px 0 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- плитки приложений: только иконка и название ---------- */
.b24a-cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.b24a-case {
	--b24a-accent: 255, 94, 20;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(26, 25, 52, 0.72), rgba(13, 13, 32, 0.72));
	transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.b24a-case--news { --b24a-accent: 255, 94, 20; }
.b24a-case--smm { --b24a-accent: 45, 212, 191; }
.b24a-case--yoga { --b24a-accent: 167, 139, 250; }
.b24a-case--fin { --b24a-accent: 74, 222, 128; }
.b24a-case--hr { --b24a-accent: 96, 165, 250; }
.b24a-case--sites { --b24a-accent: 236, 72, 153; }

.b24a-case:hover,
.b24a-case:focus-within {
	border-color: rgba(var(--b24a-accent), 0.5);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}

/* вся плитка — одна кнопка: клик открывает описание в модальном окне */
.b24a-case-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 20px 18px;
	border: 0;
	border-radius: 15px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.b24a-case-btn:focus-visible {
	outline: 2px solid rgb(var(--b24a-accent));
	outline-offset: 2px;
}

.b24a-case-ico {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: rgba(var(--b24a-accent), 0.16);
	color: rgb(var(--b24a-accent));
	transition: background 0.22s ease, color 0.22s ease;
}

.b24a-case:hover .b24a-case-ico,
.b24a-case:focus-within .b24a-case-ico {
	background: rgba(var(--b24a-accent), 0.26);
	color: #ffffff;
}

.b24a-case-ico svg {
	width: 20px;
	height: 20px;
}

.b24a-case-title {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

/* «+» — подсказка, что за плиткой есть подробности */
.b24a-case-more {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.55);
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.b24a-case:hover .b24a-case-more,
.b24a-case:focus-within .b24a-case-more {
	border-color: rgba(var(--b24a-accent), 0.6);
	background: rgba(var(--b24a-accent), 0.18);
	color: #ffffff;
}

/* скрытая оболочка: разметку отсюда JS копирует в модальное окно */
.b24a-case-detail { display: none; }

/* ---------- CTA: приложения под процесс ещё нет ---------- */
.b24a-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px 26px;
	flex-wrap: wrap;
	padding: 22px 24px;
	border: 1px solid rgba(255, 94, 20, 0.28);
	border-radius: 16px;
	background:
		radial-gradient(ellipse at 0% 0%, rgba(255, 94, 20, 0.14) 0%, transparent 58%),
		linear-gradient(160deg, rgba(28, 24, 40, 0.8), rgba(13, 13, 26, 0.8));
}

.b24a-cta-text {
	margin: 0;
	max-width: 760px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.b24a-cta-text b {
	color: #ffffff;
}

.b24a-cta-text span {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
}

.b24a-cta-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.b24a-cta-link {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.b24a-cta-link:hover,
.b24a-cta-link:focus-visible {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

/* ---------- модальное окно описания приложения ---------- */
.b24a-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(6, 6, 16, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	/* visibility переключаем мгновенно при открытии (иначе не встаёт фокус)
	   и с задержкой при закрытии, чтобы успела отыграть плавность. */
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.b24a-modal-overlay.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.b24a-modal {
	/* accent приложения подставляется плиткой; здесь — базовый оранжевый,
	   чтобы ссылки в подвале окна не остались без цвета */
	--b24a-accent: 255, 94, 20;
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: min(84vh, 720px);
	padding: 30px 32px 28px;
	border: 1px solid rgba(255, 94, 20, 0.3);
	border-radius: 20px;
	background: linear-gradient(160deg, #16152e 0%, #0d0d20 60%, #0e1118 100%);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 94, 20, 0.07);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: scale(0.96) translateY(12px);
	transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 94, 20, 0.5) rgba(255, 255, 255, 0.06);
}

.b24a-modal-overlay.active .b24a-modal {
	transform: scale(1) translateY(0);
}

.b24a-modal::-webkit-scrollbar { width: 6px; }
.b24a-modal::-webkit-scrollbar-track { background: transparent; }
.b24a-modal::-webkit-scrollbar-thumb {
	background: rgba(255, 94, 20, 0.4);
	border-radius: 3px;
}

.b24a-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.b24a-modal-close:hover,
.b24a-modal-close:focus-visible {
	background: rgba(255, 94, 20, 0.22);
	border-color: rgba(255, 94, 20, 0.5);
	color: #ffffff;
}

.b24a-modal-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-right: 44px;
	margin-bottom: 18px;
}

.b24a-modal-ico {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(255, 94, 20, 0.18);
	color: #ffffff;
}

.b24a-modal-ico svg {
	width: 20px;
	height: 20px;
}

.b24a-modal-cat {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fdba74;
}

.b24a-modal-title {
	margin: 3px 0 4px;
	font-family: var(--font-heading, 'Space Grotesk', sans-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

.b24a-modal-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
}


.b24a-modal-body {
	font-size: 14px;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.72);
}

.b24a-modal-body p {
	margin: 0 0 14px;
}

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

.b24a-modal-body b {
	color: rgba(255, 255, 255, 0.9);
}

/* лид описания — первое, что читает человек в окне */
.b24a-d-lead {
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.84);
}

/* «зачем это приложение» — второй абзац, спокойнее лида */
.b24a-d-why {
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.b24a-d-h {
	margin: 22px 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.b24a-d-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.b24a-d-list li {
	position: relative;
	padding-left: 20px;
	line-height: 1.6;
}

.b24a-d-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(var(--b24a-accent));
}

/* эффект — финальный абзац перед стеком, читается как вывод */
.b24a-d-impact {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid rgba(var(--b24a-accent), 0.28);
	border-radius: 12px;
	background: rgba(var(--b24a-accent), 0.08);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

.b24a-d-tech {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-left: 2px solid #ff5e14;
	border-radius: 0 12px 12px 0;
	background: rgba(255, 94, 20, 0.09);
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

.b24a-d-tech b {
	color: rgba(255, 255, 255, 0.85);
}

.b24a-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.b24a-modal-cta {
	padding: 10px 20px;
	font-size: 14px;
}

.b24a-modal-note {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
}

/* Внешних ссылок «открыть приложение» здесь нет: плитки ведут только
   в описание, а демо приложений показывает команда на созвоне. */

/* Пока модалка открыта — страница не прокручивается, а плавающие виджеты
   у нижнего края экрана уступают место оверлею.

   !important — против responsive.css:
   `@media (max-width: 1024px) { .page-main { overflow-y: auto !important } }`.
   Там !important бьёт инлайновый style.overflow, который ставит lockPage(),
   поэтому на мобильном страница продолжала прокручиваться под модалкой.
   Наш селектор специфичнее (html + класс + класс), с равным !important
   он выигрывает — и только при открытой модалке.

   Виджеты (.floating-panel, .chat-widget — z-index: 999, .chat-bubble —
   9998) живут в базовом контексте наложения, а оверлей заперт внутри
   своего: #b24-custom-app { z-index: 2 }. Поэтому панель рисовалась поверх
   оверлея, хотя была уже inert (setBackgroundInert) — видимая, но мёртвая.
   visibility, а не display: не воюет с `display: flex !important`
   из responsive.css и снимается вместе с классом. */
html.b24a-modal-on .page-main,
html.b24a-modal-on body {
	overflow: hidden !important;
}

html.b24a-modal-on .floating-panel,
html.b24a-modal-on .chat-widget,
html.b24a-modal-on .chat-bubble {
	visibility: hidden;
}

/* ---------- планшет и мобильные ---------- */
@media (max-width: 1439px) and (min-width: 1025px) {
	.b24a-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	#b24-custom-app .website-v2-services-title { font-size: 26px; }
	#b24-custom-app .b24-lead { font-size: 13.5px; }
	.b24a-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b24a-cta { align-items: flex-start; }
}

@media (max-width: 700px) {
	#b24-custom-app .website-v2-services-title { font-size: 22px; }
	.b24a-done-head { font-size: 16px; }
	.b24a-cases { grid-template-columns: minmax(0, 1fr); }
	.b24a-case-title { font-size: 15px; }
	.b24a-cta { padding: 20px; }
	.b24a-cta-actions { width: 100%; }
	.b24a-cta-actions .btn { width: 100%; justify-content: center; }
	.b24a-modal-overlay { padding: 12px; }
	.b24a-modal { padding: 24px 20px 22px; border-radius: 16px; }
	.b24a-modal-title { font-size: 18px; }
	.b24a-modal-body { font-size: 13.5px; }
	.b24a-d-h { margin: 18px 0 8px; }
	.b24a-d-list { gap: 9px; margin-bottom: 14px; }
	.b24a-d-impact { padding: 12px 14px; }
	.b24a-modal-cta { width: 100%; justify-content: center; }
	.b24a-modal-note { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	#b24-custom-app .v2-stagger-item.v2-visible { animation: none !important; }
	.b24a-case,
	.b24a-case-ico,
	.b24a-case-more,
	.b24a-cta-link,
	.b24a-modal-overlay,
	.b24a-modal { transition: none !important; }
}

/* ============================================================
   CTA + подвал — единый блок в один экран (page-id-81)
   ============================================================
   Финальная секция «Давайте обсудим ваш проект на Битрикс24» и подвал
   объединены в один визуальный блок:

     1) фон подвала продолжает фон CTA-секции: её градиент заканчивается
        цветом #0d0c28, а фиолетовое свечение (820x500 @ 90% 110%)
        дорисовывается в подвале тем же радиальным градиентом, центр
        которого смещён на -54px (≈10% высоты CTA-секции выше её низа).
        Итог — на стыке нет ни цветового шва, ни обрыва свечения;
     2) отступы обеих частей сжаты, и блок рассчитан так, чтобы
        секция + подвал целиком помещались на одном экране:
        min-height CTA = 100vh − 64px (фиксированная шапка) − высота подвала.

   --b24-footer-h — фактическая высота компактного подвала (замер
   .deploy/_probe-cta-footer.expr.js: 377px до правки → ~305px после).
   Если менять padding/шрифты подвала — обновить и это значение.
   ============================================================ */

body.page-id-81 {
	--b24-footer-h: 305px;
}

/* Шов: подвал продолжает фон CTA-секции (её градиент внизу = #0d0c28) */
body.page-id-81 #site-footer {
	padding: 32px 0 20px;
	background:
		radial-gradient(820px 500px at 90% -54px, rgba(124, 58, 237, 0.20), transparent 60%),
		linear-gradient(180deg, #0d0c28 0%, #0a0922 60%, #08071c 100%);
}

/* Секция = экран минус шапка и подвал (содержимое центрируется по вертикали) */
@media (min-width: 1025px) and (pointer: fine) {
	body.page-id-81 #b24-cta {
		min-height: calc(100vh - 64px - var(--b24-footer-h));
	}
}

/* CTA — компактнее */
body.page-id-81 #b24-cta .cta-wrapper { padding: 26px 0 24px; gap: 36px; }
body.page-id-81 #b24-cta .cta-title { font-size: 28px; margin-bottom: 8px; }
body.page-id-81 #b24-cta .cta-text { margin-bottom: 16px; }
body.page-id-81 #b24-cta .cta-contacts { gap: 4px; }
body.page-id-81 #b24-cta .cta-phone { font-size: 24px; margin-bottom: 6px; }
body.page-id-81 #b24-cta .cta-form { padding: 20px 24px 18px; }
body.page-id-81 #b24-cta .cta-form .form-group { margin-bottom: 10px; }
body.page-id-81 #b24-cta .cta-form .form-input { padding: 10px 12px; }
body.page-id-81 #b24-cta .cta-form .form-checkboxes { margin-top: 12px; margin-bottom: 12px; }
body.page-id-81 #b24-cta .cta-form .btn-full { padding-top: 14px; padding-bottom: 14px; }

/* Подвал — компактнее (визуально один блок с CTA) */
body.page-id-81 #site-footer .footer-grid { margin-bottom: 24px; }
body.page-id-81 #site-footer .footer-title { margin-bottom: 12px; }
body.page-id-81 #site-footer .footer-menu { gap: 8px; }
body.page-id-81 #site-footer .footer-phone,
body.page-id-81 #site-footer .footer-email { margin-bottom: 6px; }
body.page-id-81 #site-footer .footer-social { margin-top: 10px; }
body.page-id-81 #site-footer .footer-bottom { padding-top: 16px; }

/* Планшет/мобильные: высоту не фиксируем, но сохраняем компенсацию
   нижней панели связи (.floating-panel ≈ 51px), как в responsive.css */
@media (max-width: 1024px) {
	body.page-id-81 #b24-cta .cta-wrapper { padding: 24px 0; gap: 28px; }
	body.page-id-81 #site-footer { padding: 28px 0 calc(20px + 51px); }
}

/* ============================================================
   Разные фоны секций — чтобы лендинг не сливался в один тон
   ============================================================
   До этой правки у 11 секций подряд (builder → bp) стоял один и тот же
   дефолтный слой .website-v2-services-cosmic-bg
   (linear-gradient(170deg, #0a0a1a 0%, #0d0d20 20%, #0d1218 60%, #0a0a16 100%)),
   а у pains / packages / partner / certificates / about / faq — такой же
   дефолт. При прокрутке страница читалась как одно бесконечное полотно.

   Здесь каждой секции задан свой оттенок: базовый градиент + два
   радиальных свечения-ориентира. Красим именно декоративный слой
   (.website-v2-services-cosmic-bg / .about-cosmic-bg:
   position: absolute; inset: 0; z-index: 0), потому что он лежит поверх
   фона секции и именно он рисует картинку, а контент (.container идёт
   выше — z-index: 2/3) не затрагивается.

   Порядок в разметке и доминирующий оттенок (по кругу, чтобы соседи
   не совпадали):
     hero — синий (свой фон, не трогаем)
     builder — фирменный синий Битрикс24
     funnel — бирюза · smart — фиолет · bi — янтарь · bp — небо
     portal — индиго · custom-app — тёплый оранж
     pains — оранж+синий · services — фиолет (не трогаем, уже задан)
     packages — янтарь+синий · partner — изумруд · certificates — сапфир
     about — индиго-виолет · faq — графит с бирюзой
     cta — оранж+фиолет (не трогаем: к нему сшит подвал)

   #faq — единственная секция без своего декоративного слоя, поэтому
   фон задан на самой секции (с !important против faq.css:
   `background-color: #0d0d20 !important`).
   ============================================================ */

/* builder — «Возможности Битрикс24 / соберите свою CRM»: фирменный синий */
body.page-id-81 #b24-builder .website-v2-services-cosmic-bg {
	background:
		radial-gradient(900px 520px at 82% 6%, rgba(74, 125, 255, 0.18) 0%, transparent 55%),
		radial-gradient(760px 460px at 8% 94%, rgba(56, 189, 248, 0.09) 0%, transparent 55%),
		linear-gradient(172deg, #0c1434 0%, #0a1028 55%, #080c1e 100%);
}

/* funnel — «Воронка продаж»: бирюза живой демо-доски */
body.page-id-81 #b24-funnel .website-v2-services-cosmic-bg {
	background:
		radial-gradient(880px 500px at 84% 10%, rgba(45, 212, 191, 0.15) 0%, transparent 55%),
		radial-gradient(720px 440px at 6% 92%, rgba(56, 189, 248, 0.09) 0%, transparent 55%),
		linear-gradient(172deg, #07202a 0%, #061a23 55%, #05141b 100%);
}

/* smart — «Смарт-процессы»: фиолет (справочники вместо Excel) */
body.page-id-81 #b24-smart .website-v2-services-cosmic-bg {
	background:
		radial-gradient(880px 520px at 86% 12%, rgba(139, 92, 246, 0.16) 0%, transparent 55%),
		radial-gradient(720px 440px at 8% 94%, rgba(74, 125, 255, 0.10) 0%, transparent 55%),
		linear-gradient(172deg, #150f2e 0%, #110c26 55%, #0c0819 100%);
}

/* bi — «BI-аналитика»: янтарь (цифры и дашборды) */
body.page-id-81 #b24-bi .website-v2-services-cosmic-bg {
	background:
		radial-gradient(900px 520px at 84% 8%, rgba(255, 185, 30, 0.13) 0%, transparent 55%),
		radial-gradient(700px 440px at 8% 94%, rgba(139, 92, 246, 0.09) 0%, transparent 55%),
		linear-gradient(172deg, #171223 0%, #12101f 55%, #0d0b17 100%);
}

/* bp — «Бизнес-процессы и роботы»: небесно-синий */
body.page-id-81 #b24-bp .website-v2-services-cosmic-bg {
	background:
		radial-gradient(880px 500px at 82% 10%, rgba(56, 189, 248, 0.15) 0%, transparent 55%),
		radial-gradient(720px 440px at 8% 92%, rgba(74, 125, 255, 0.10) 0%, transparent 55%),
		linear-gradient(172deg, #08202e 0%, #071a26 55%, #05131c 100%);
}

/* portal — «25 инструментов портала»: индиго (было почти дефолтное) */
body.page-id-81 #b24-portal .website-v2-services-cosmic-bg {
	background:
		radial-gradient(880px 500px at 84% 10%, rgba(139, 92, 246, 0.14) 0%, transparent 55%),
		radial-gradient(720px 440px at 10% 90%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
		linear-gradient(172deg, #0f1030 0%, #0b0c26 55%, #080919 100%);
}

/* custom-app — «Чего нет в коробке»: тёплый оранж (было почти дефолтное) */
body.page-id-81 #b24-custom-app .website-v2-services-cosmic-bg {
	background:
		radial-gradient(880px 500px at 12% 6%, rgba(255, 94, 20, 0.16) 0%, transparent 55%),
		radial-gradient(720px 440px at 88% 94%, rgba(45, 212, 191, 0.08) 0%, transparent 55%),
		linear-gradient(172deg, #1a1210 0%, #130e10 55%, #0d0a0c 100%);
}

/* pains — «Знакомые проблемы»: оранж+синий (фон секции был закрыт дефолтным слоем) */
body.page-id-81 #b24-pains .website-v2-services-cosmic-bg {
	background:
		radial-gradient(820px 460px at 8% 90%, rgba(255, 94, 20, 0.14) 0%, transparent 55%),
		radial-gradient(760px 440px at 92% 10%, rgba(74, 125, 255, 0.12) 0%, transparent 55%),
		linear-gradient(172deg, #10112b 0%, #0d0d20 55%, #0a0a1c 100%);
}

/* packages — «Пакеты и цены»: янтарь+синий (то же — фон был закрыт) */
body.page-id-81 #b24-packages .website-v2-services-cosmic-bg {
	background:
		radial-gradient(900px 480px at 90% 8%, rgba(255, 185, 30, 0.13) 0%, transparent 55%),
		radial-gradient(720px 440px at 5% 92%, rgba(74, 125, 255, 0.10) 0%, transparent 55%),
		linear-gradient(172deg, #101c33 0%, #0d1730 55%, #0a101f 100%);
}

/* partner — «Официальный партнёр 1С-Битрикс»: изумруд (знак доверия) */
body.page-id-81 #b24-partner .website-v2-services-cosmic-bg {
	background:
		radial-gradient(860px 480px at 80% 12%, rgba(52, 211, 153, 0.13) 0%, transparent 55%),
		radial-gradient(700px 440px at 10% 90%, rgba(74, 125, 255, 0.09) 0%, transparent 55%),
		linear-gradient(172deg, #07211a 0%, #061c16 55%, #041511 100%);
}

/* certificates — «Сертификаты и обучение»: сапфир */
body.page-id-81 #b24-certificates .website-v2-services-cosmic-bg {
	background:
		radial-gradient(880px 480px at 84% 10%, rgba(74, 125, 255, 0.13) 0%, transparent 55%),
		radial-gradient(700px 440px at 8% 92%, rgba(139, 92, 246, 0.09) 0%, transparent 55%),
		linear-gradient(172deg, #0e1730 0%, #0b1226 55%, #080d1b 100%);
}

/* about — «О компании»: индиго-виолет.
   Свечения .about-cosmic-bg::before (индиго) остаются сверху — они сюда
   только добавляются, поэтому альфы умеренные. */
body.page-id-81 #about .about-cosmic-bg {
	background:
		radial-gradient(880px 500px at 80% 18%, rgba(76, 66, 190, 0.16) 0%, transparent 55%),
		radial-gradient(720px 460px at 14% 86%, rgba(60, 50, 160, 0.11) 0%, transparent 55%),
		linear-gradient(172deg, #140f30 0%, #100c26 55%, #0b081b 100%);
}

/* faq — «Частые вопросы»: графит с бирюзой.
   Единственная секция без своего декоративного слоя, поэтому фон ставим
   на саму секцию; !important — против faq.css `background-color: #0d0d20 !important`. */
body.page-id-81 #faq.faq-section {
	background:
		radial-gradient(860px 480px at 88% 8%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
		radial-gradient(700px 440px at 10% 92%, rgba(74, 125, 255, 0.08) 0%, transparent 55%),
		linear-gradient(172deg, #0a1a1e 0%, #08151a 55%, #061015 100%) !important;
}

/* ============================================================================
   МОБИЛЬНАЯ ЧИТАЕМОСТЬ — страница «Битрикс24» (≤767px)
   Аудит 01.10.2026 при 390×844: 49 правил с font-size < 12px + постоянная обрезка
   текста (ellipsis) в таблице смарт-процесса и в кнопке генерации.
   Минимальный размер текста на мобильных — 12px; поясняющие подписи — 12.5px.
   Блок намеренно размещён последним в файле: он должен перекрывать прежние
   мобильные «уплотнения», включая @media (max-width: 560px) в этом же файле.
   Классы .b24b-* определены в prod-файле b24-builder.css (mu-плагин, без @media),
   поэтому переопределяются селекторами с #b24-builder — по специфичности.
   ============================================================================ */
@media (max-width: 767px) {
	/* --- Билдер «Возможности Битрикс24» (.b24b-*) --- */
	#b24-builder .b24b-lead-badge,
	#b24-builder .b24b-lead-trust {
		font-size: 12px;
	}
	#b24-builder .b24b-pill,
	#b24-builder .b24b-ai-badge {
		font-size: 12px;
		padding: 3px 9px;
	}
	#b24-builder .b24b-ai-note,
	#b24-builder .b24b-result-note,
	#b24-builder .b24b-result-cta-hint {
		font-size: 12.5px;
	}
	#b24-builder .b24b-field-hint {
		font-size: 12px;
		margin-top: 7px;
	}
	#b24-builder .b24b-cta-note,
	#b24-builder .b24b-tool-q,
	#b24-builder .b24b-layout-side .b24b-lead-form .form-checkbox-label {
		font-size: 12px;
	}
	#b24-builder .b24b-gen {
		flex-wrap: wrap;
	}
	#b24-builder .b24b-gen .btn {
		flex: 1 1 100%;
		min-width: 0;
		white-space: normal;
	}

	/* --- Дашборд/BI (.b24bi-*) --- */
	.b24bi-kpi-lbl,
	.b24bi-feed-meta,
	.b24bi-mgr-meta,
	.b24bi-mgr-ava,
	.b24bi-donut-center span,
	.b24bi-filters-hint,
	.b24bi-kpi-delta,
	.b24bi-plan-txt,
	.b24bi-legend em,
	.b24bi-mgr-rank,
	.b24bi-fgrp-name {
		font-size: 12px;
	}
	.b24bi-kpi-sub,
	.b24bi-panel-cap {
		font-size: 12.5px;
	}

	/* --- Канбан-воронка (.b24f-*) --- */
	.b24f-scroll,
	.b24f-col-num,
	.b24f-chip,
	.b24f-card-contact,
	.b24f-arrow {
		font-size: 12px;
	}
	.b24f-col-sum,
	.b24f-spec-badge {
		font-size: 12.5px;
	}

	/* --- Демо бизнес-процессов (.b24bp-*) --- */
	.b24bp-step-txt small,
	.b24bp-fields dt,
	.b24bp-log-item time,
	.b24bp-now-badge,
	.b24bp-log-head span,
	.b24bp-scen-lbl {
		font-size: 12px;
	}
	.b24bp-step i {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
		font-size: 12px;
	}
	.b24bp-log-body span,
	.b24bp-now-role,
	.b24bp-step-txt b {
		font-size: 12.5px;
	}
	.b24bp-step-txt b {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* --- Таблица смарт-процесса (.sp-*) --- */
	.sp-grid-head,
	.sp-status,
	.sp-col-title,
	.sp-grid-row em,
	.sp-card-status span,
	.sp-row em {
		font-size: 12px;
	}
	.sp-th,
	.sp-td {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* --- Возможности, модальные окна, канбан, боли --- */
	.b24p-fill-text span,
	.b24p-count,
	.b24p-modal-cat,
	.b24a-modal-cat,
	.b24-kanban-flow-tag,
	.b24-kanban-flow-sub,
	.b24-kanban-flow-amount i::after,
	.b24-kanban-flow-paid i::after,
	.b24-kanban-col-count,
	.b24-pain-num,
	.b24-pain-solve-label {
		font-size: 12px;
	}

	/* --- Таймлайн и чат-виджет --- */
	body.page-id-81 #b24-services .b24-tl-text small {
		font-size: 12.5px;
	}
	.pd-chat-whos,
	.pd-chat-meta small {
		font-size: 12px;
	}

	/* --- Панель контактов (.floating-*) ---
	   Источник 10px — assets/css/responsive.css, который грузится ПОСЛЕ этого файла,
	   поэтому перебиваем специфичностью селектора-обёртки .floating-panel. */
	.floating-panel .floating-btn,
	.floating-panel .floating-btn span {
		font-size: 12px;
		line-height: 1.15;
	}

	/* --- Бейдж «Партнёр 1С-Битрикс» (bitrix24-certificates.css, 11px) --- */
	.b24-partner-badge {
		font-size: 12px;
	}

	/* --- Подписи согласия на обработку данных (cta.css .cta-form — 11px) --- */
	#b24-builder .form-checkbox-label,
	#b24-builder .form-checkbox-label a,
	.cta-form .form-checkboxes .form-checkbox-label,
	.cta-form .form-checkboxes .form-checkbox-label a {
		font-size: 12px;
	}

	/* --- Cookie-баннер ФЗ-152 (плагин: @media (max-width: 600px) → 11px) ---
	   Плагин грузится 3-м, этот файл — 23-м, поэтому при равной специфичности
	   (0,1,0) побеждает более позднее правило; обёртку .fz152-banner не используем —
	   в живой разметке кнопки лежат вне элемента с этим классом. */
	.fz152-text,
	.fz152-policy-btn,
	.fz152-accept-btn {
		font-size: 12px;
	}
}