/* Figma design fonts (Magistral/Evolventa/Involve) are commercial and unavailable.
   Load the closest free Cyrillic substitutes used across the public site:
   Montserrat (display) + Manrope (ui/body). @import keeps every page that links
   this refresh stylesheet (legacy blog articles etc.) on the same typography. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --cbfl-bg-surface: #ffffff;
    --cbfl-bg-canvas: #f7f8fa;
    --cbfl-bg-sunken: #f1f3f7;
    --cbfl-bg-inverse: #141821;
    --cbfl-text: #141821;
    --cbfl-text-secondary: #4e5562;
    --cbfl-text-tertiary: #6b7383;
    --cbfl-border: #e7eaf1;
    --cbfl-border-strong: #b8c0d0;
    --cbfl-focus: #404dfc;
    --cbfl-sky: #008ce4;
    --cbfl-success-soft: #e8f6d8;
    --cbfl-success: #3f660f;
    --cbfl-warning-soft: #fff6d8;
    --cbfl-warning: #8a6100;
    --cbfl-shadow: 0 20px 48px -12px rgba(10, 13, 18, 0.18);
    --cbfl-font-display: 'Montserrat', 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --cbfl-font-ui: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --cbfl-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

body {
    font-family: var(--cbfl-font-body) !important;
    color: var(--cbfl-text) !important;
    background: var(--cbfl-bg-canvas) !important;
}

a {
    color: var(--cbfl-focus) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

.container {
    max-width: 1312px !important;
    padding: 0 64px !important;
}

.bar,
.hero-inner,
.layout {
    max-width: 1312px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
}

header {
    position: sticky !important;
    height: 100px !important;
    background: var(--cbfl-bg-surface) !important;
    border-bottom: 1px solid var(--cbfl-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.bar {
    min-height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.header-inner {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
}

/* Header stretches full-width with 48px padding (Figma node 150-841) */
@media (min-width: 769px) {
    header .container,
    header .header-inner {
        max-width: none !important;
        width: 100% !important;
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
}

.logo,
.brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--cbfl-text) !important;
    text-decoration: none !important;
}

.logo-icon,
.mark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #01bffd 0%, #014ece 48%, #003ec6 100%) !important;
    color: #ffffff !important;
    font-family: var(--cbfl-font-display) !important;
    box-shadow: none !important;
}

.mark {
    display: inline-block !important;
    flex: 0 0 auto !important;
}

.logo-text,
.brand span:last-child {
    font-family: var(--cbfl-font-display) !important;
    font-size: 22px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--cbfl-text) !important;
}

.logo-text span {
    font-family: var(--cbfl-font-ui) !important;
    font-size: 7px !important;
    line-height: 10px !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    color: var(--cbfl-text-tertiary) !important;
}

nav {
    gap: 16px !important;
    justify-content: flex-start !important;
}

nav a,
.phone-header {
    font-family: var(--cbfl-font-ui) !important;
    color: var(--cbfl-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    border-radius: 10px !important;
}

nav a:hover,
.phone-header:hover {
    color: var(--cbfl-focus) !important;
    background: var(--cbfl-bg-sunken) !important;
}

.mobile-toggle span {
    background: var(--cbfl-text) !important;
}

.btn {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-family: var(--cbfl-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.hero {
    background: var(--cbfl-bg-surface) !important;
    border-bottom: 1px solid var(--cbfl-border) !important;
}

.hero-inner {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
}

.crumbs {
    margin: 0 0 24px !important;
    font-family: var(--cbfl-font-ui) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: var(--cbfl-text-tertiary) !important;
}

.crumbs a {
    color: var(--cbfl-text-tertiary) !important;
    text-decoration: none !important;
}

.hero h1,
h1 {
    max-width: 900px !important;
    margin: 0 0 18px !important;
    font-family: var(--cbfl-font-display) !important;
    font-size: 48px !important;
    line-height: 56px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--cbfl-bg-inverse) !important;
}

.lead,
.meta {
    font-family: var(--cbfl-font-body) !important;
    color: var(--cbfl-text-secondary) !important;
}

.lead {
    max-width: 820px !important;
    font-size: 18px !important;
    line-height: 28px !important;
}

.layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 316px !important;
    gap: 48px !important;
    padding-top: 48px !important;
    padding-bottom: 80px !important;
}

.content,
.article-content {
    border: 1px solid var(--cbfl-border) !important;
    border-radius: 18px !important;
    background: var(--cbfl-bg-surface) !important;
    box-shadow: none !important;
}

.content {
    padding: 48px 56px !important;
}

.content h2,
.content h3,
.toc strong,
.side-card strong,
.cta h2,
.faq summary {
    font-family: var(--cbfl-font-display) !important;
    letter-spacing: 0 !important;
    color: var(--cbfl-bg-inverse) !important;
}

.content h2 {
    margin: 48px 0 16px !important;
    font-size: 32px !important;
    line-height: 40px !important;
}

.content h3 {
    margin: 36px 0 12px !important;
    font-size: 24px !important;
    line-height: 32px !important;
}

.content p,
.content li,
.content td {
    font-family: var(--cbfl-font-body) !important;
    font-size: 16px !important;
    line-height: 28px !important;
    color: var(--cbfl-text-secondary) !important;
}

.content th {
    font-family: var(--cbfl-font-ui) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--cbfl-text-tertiary) !important;
    background: var(--cbfl-bg-sunken) !important;
}

.table-wrap,
.table-wrapper {
    border: 1px solid var(--cbfl-border) !important;
    border-radius: 16px !important;
    overflow: auto !important;
}

.note,
.warning {
    border: 1px solid var(--cbfl-border) !important;
    border-left-width: 4px !important;
    border-radius: 16px !important;
    background: var(--cbfl-bg-canvas) !important;
}

.note {
    border-left-color: var(--cbfl-focus) !important;
}

.warning {
    border-left-color: #f0b400 !important;
    background: var(--cbfl-warning-soft) !important;
}

.toc,
.side-card {
    top: 124px !important;
    border: 1px solid var(--cbfl-border) !important;
    border-radius: 18px !important;
    background: var(--cbfl-bg-surface) !important;
    box-shadow: none !important;
}

.toc a,
.related a {
    color: var(--cbfl-text-secondary) !important;
    text-decoration: none !important;
}

.toc a:hover,
.related a:hover {
    color: var(--cbfl-focus) !important;
}

.cta {
    border-radius: 24px !important;
    background: linear-gradient(106.44deg, #01bffd 2.54%, #014ece 34.85%, #003ec6 55.4%, #009bed 80.62%) !important;
    color: #ffffff !important;
}

.cta h2,
.cta p {
    color: #ffffff !important;
}

.cta a {
    min-height: 44px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--cbfl-focus) !important;
    font-family: var(--cbfl-font-display) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.faq details {
    border-top: 1px solid var(--cbfl-border) !important;
}

.faq summary {
    min-height: 48px !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

.btn-primary,
.btn-gold {
    background: var(--cbfl-focus) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-gold:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(64, 77, 252, 0.22) !important;
}

.header-inner nav > a.btn-primary {
    background: #ffffff !important;
    color: var(--cbfl-sky) !important;
    border: 1.5px solid var(--cbfl-sky) !important;
    box-shadow: none !important;
}

.header-inner nav > a.btn-primary:hover {
    background: #f8fbff !important;
    color: var(--cbfl-sky) !important;
    border-color: var(--cbfl-sky) !important;
    box-shadow: none !important;
}

.header-inner nav > button.btn-gold {
    background: var(--cbfl-sky) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--cbfl-sky) !important;
    box-shadow: none !important;
}

.header-inner nav > button.btn-gold:hover {
    background: var(--cbfl-sky) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.article-hero {
    padding: 56px 0 72px !important;
    background: var(--cbfl-bg-surface) !important;
    border-bottom: 1px solid var(--cbfl-border) !important;
}

.breadcrumbs {
    height: 56px !important;
    margin: -56px 0 56px !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--cbfl-font-ui) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: var(--cbfl-text-tertiary) !important;
}

.breadcrumbs a,
.breadcrumbs .sep,
.breadcrumbs .current {
    color: var(--cbfl-text-tertiary) !important;
}

.breadcrumbs a:hover {
    color: var(--cbfl-focus) !important;
}

.article-hero h1 {
    max-width: 880px !important;
    margin: 0 0 16px !important;
    font-family: var(--cbfl-font-display) !important;
    font-size: 48px !important;
    line-height: 56px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--cbfl-bg-inverse) !important;
}

.article-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    font-family: var(--cbfl-font-body) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--cbfl-text-secondary) !important;
}

.article-meta strong {
    color: var(--cbfl-text) !important;
}

.article-content {
    max-width: 880px !important;
    padding: 56px 64px 80px !important;
    background: var(--cbfl-bg-surface) !important;
}

.article-content h2 {
    margin: 48px 0 16px !important;
    font-family: var(--cbfl-font-ui) !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -0.25px !important;
    color: var(--cbfl-bg-inverse) !important;
}

.article-content h3 {
    margin: 36px 0 12px !important;
    font-family: var(--cbfl-font-display) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    color: var(--cbfl-bg-inverse) !important;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content li {
    font-family: var(--cbfl-font-body) !important;
    font-size: 16px !important;
    line-height: 28px !important;
    color: var(--cbfl-text-secondary) !important;
}

.article-content strong {
    color: var(--cbfl-text) !important;
}

.info-block,
.warning-block {
    border: 1px solid var(--cbfl-border) !important;
    border-left-width: 4px !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    background: var(--cbfl-bg-canvas) !important;
}

.info-block {
    border-left-color: var(--cbfl-focus) !important;
}

.warning-block {
    border-left-color: #f0b400 !important;
    background: var(--cbfl-warning-soft) !important;
}

.article-table {
    border: 1px solid var(--cbfl-border) !important;
    border-radius: 18px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}

.article-table th {
    background: var(--cbfl-bg-sunken) !important;
    color: var(--cbfl-text-tertiary) !important;
    font-family: var(--cbfl-font-ui) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.article-table td {
    background: var(--cbfl-bg-surface) !important;
    border-bottom: 1px solid var(--cbfl-border) !important;
    color: var(--cbfl-text-secondary) !important;
    font-family: var(--cbfl-font-body) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.related-section,
.faq-section {
    padding: 72px 0 !important;
    background: var(--cbfl-bg-canvas) !important;
}

.related-section h2,
.faq-section h2,
.cta-section h2 {
    font-family: var(--cbfl-font-ui) !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -0.25px !important;
    color: var(--cbfl-bg-inverse) !important;
}

.related-card {
    border: 1px solid var(--cbfl-border) !important;
    border-radius: 16px !important;
    background: var(--cbfl-bg-surface) !important;
    box-shadow: none !important;
}

.related-card:hover {
    border-color: var(--cbfl-focus) !important;
    box-shadow: 0 14px 34px -22px rgba(64, 77, 252, 0.55) !important;
}

.related-card h3,
.faq-question {
    font-family: var(--cbfl-font-display) !important;
    color: var(--cbfl-bg-inverse) !important;
}

.related-card p,
.faq-answer-inner {
    font-family: var(--cbfl-font-body) !important;
    color: var(--cbfl-text-secondary) !important;
}

.faq-item {
    border-bottom: 1px solid var(--cbfl-border) !important;
}

.faq-question::after {
    color: var(--cbfl-focus) !important;
}

.cta-section {
    padding: 80px 0 !important;
    background: linear-gradient(106.44deg, #01bffd 2.54%, #014ece 34.85%, #003ec6 55.4%, #009bed 80.62%) !important;
}

.cta-section h2,
.cta-section p {
    color: #ffffff !important;
}

footer {
    padding: 48px 0 32px !important;
    background: var(--cbfl-bg-surface) !important;
    border-top: 1px solid var(--cbfl-border) !important;
    color: var(--cbfl-text-secondary) !important;
}

footer .bar,
footer .layout {
    min-height: auto !important;
}

footer h4,
footer .logo-text {
    color: var(--cbfl-text) !important;
}

footer a,
.footer-brand p,
.footer-bottom {
    color: var(--cbfl-text-secondary) !important;
}

.footer-bottom {
    border-top: 1px solid var(--cbfl-border) !important;
}

@media (max-width: 768px) {
    .container {
        padding: 0 18px !important;
    }

    .bar,
    .hero-inner,
    .layout {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    header,
    .header-inner {
        height: auto !important;
    }

    .bar {
        min-height: auto !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .hero h1,
    h1 {
        font-size: 38px !important;
        line-height: 44px !important;
    }

    .layout {
        display: block !important;
        padding-top: 32px !important;
        padding-bottom: 64px !important;
    }

    .content {
        padding: 32px 20px !important;
    }

    .toc,
    .side-card {
        position: static !important;
        margin-bottom: 18px !important;
    }

    .header-inner {
        padding: 14px 0 !important;
        align-items: flex-start !important;
    }

    nav.open {
        top: 72px !important;
        background: var(--cbfl-bg-surface) !important;
        border-top: 1px solid var(--cbfl-border) !important;
        box-shadow: var(--cbfl-shadow) !important;
    }

    .article-hero {
        padding: 40px 0 48px !important;
    }

    .breadcrumbs {
        margin: 0 0 24px !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }

    .article-hero h1 {
        font-size: 38px !important;
        line-height: 44px !important;
    }

    .article-content {
        padding: 48px 18px 64px !important;
    }

    .article-content h2,
    .related-section h2,
    .faq-section h2,
    .cta-section h2 {
        font-size: 30px !important;
        line-height: 38px !important;
    }
}