:root {
    --c-primary: #104ddb;
    --c-navy: #0b2a8f;
    --c-text: #1b1f2a;
    --c-muted: #5b6475;
    --c-border: #cfd8ee;
    --c-topbar: #f4f6fa;
    --c-soft: #e8efff;
    --c-footer: #061a5c;

    --c-ink: #101828;
    --c-blue: #175cff;
    --c-blue-25: #f2f6ff;
    --c-blue-50: #eaf1ff;
    --c-blue-75: #dce7ff;
    --c-blue-100: #c9d8ff;
    --c-blue-200: #9ebbff;
    --c-blue-tint: rgba(23, 92, 255, .1);
    --c-grey-200: #e4e7ec;
    --c-grey-300: #d0d5dd;
    --c-grey-400: #98a2b3;
    --c-grey-500: #667085;
    --c-grey-600: #475467;
    --c-grey-700: #344054;
    --c-surface: #f4f7fb;
    --c-green-700: #108b00;
    --c-gold: #f5d76e;
    --c-navy-900: #011f6d;
    --c-navy-700: #002ea1;
    --c-blue-bright: #0049f8;
    --c-blue-10: #f5f8ff;
    --c-blue-5: #f9fbff;
    --c-blue-40: #edf3ff;
    --c-blue-focus: rgba(23, 92, 255, .35);
    --c-section: #ebf3ff;
    --c-section-light: #fafcfe;
    --c-outline: #d7dfec;
    --c-line: #e6ebf4;
    --c-neutral-200: #eaeaea;
    --c-neutral-900: #171717;
    --c-grey-50: #f7f9fc;
    --c-hero-light: #d4e7fc;
    --c-footer-link: #c9d3ee;
    --c-world-default: #2f6bff;
    --world-pattern-bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 440'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='180' y='290' width='28' height='170' rx='14' fill='url(%23g)'/%3E%3Crect x='265' y='225' width='28' height='235' rx='14' fill='url(%23g)'/%3E%3Crect x='350' y='155' width='28' height='305' rx='14' fill='url(%23g)'/%3E%3Crect x='435' y='85' width='28' height='375' rx='14' fill='url(%23g)'/%3E%3Crect x='520' y='15' width='28' height='445' rx='14' fill='url(%23g)'/%3E%3C/svg%3E");
    --world-pattern-circles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='white'%3E%3Ccircle cx='400' cy='200' r='110' stroke-opacity='.16' stroke-width='64'/%3E%3Ccircle cx='400' cy='200' r='210' stroke-opacity='.11' stroke-width='64'/%3E%3Ccircle cx='400' cy='200' r='310' stroke-opacity='.07' stroke-width='64'/%3E%3C/g%3E%3C/svg%3E");
    --world-pattern-stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 440'%3E%3Cg stroke='white' stroke-linecap='round'%3E%3Cpath d='M120 520 L440 -60' stroke-opacity='.12' stroke-width='36'/%3E%3Cpath d='M240 520 L560 -60' stroke-opacity='.2' stroke-width='42'/%3E%3Cpath d='M350 520 L670 -60' stroke-opacity='.26' stroke-width='46'/%3E%3Cpath d='M450 520 L770 -60' stroke-opacity='.16' stroke-width='32'/%3E%3Cpath d='M160 340 L280 120' stroke-opacity='.16' stroke-width='24'/%3E%3C/g%3E%3C/svg%3E");
    --world-pattern-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 440' preserveAspectRatio='none'%3E%3Cg fill='white'%3E%3Cpath d='M600 0 C500 110 520 220 400 290 C300 345 230 390 120 440 L600 440 Z' fill-opacity='.14'/%3E%3Cpath d='M600 120 C530 200 510 290 420 340 C350 380 290 405 220 440 L600 440 Z' fill-opacity='.16'/%3E%3Cpath d='M600 240 C555 300 520 350 455 385 C410 410 370 425 330 440 L600 440 Z' fill-opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
    --c-success: #1f8a4c;
    --c-danger: #d92d20;
    --c-live: #16a34a;
    --c-bur: #137692;
    --c-bur-50: #e8f2f5;
    --c-kfs: #008d3d;
    --c-kfs-50: #e6f4ec;
    --c-live-50: #f0fdf4;
    --c-sky-100: #e0f2fe;
    --c-skeleton: #eef2f7;
    --c-skeleton-shine: var(--c-grey-50);
    --c-neutral-100: #f5f5f5;
    --c-neutral-300: #d4d4d4;
    --c-success-50: #e8f6ee;
    --c-success-500: #12b76a;
    --c-success-700: #11643a;
    --c-danger-50: #fdecea;
    --c-border-light: #dbe3f2;

    --font-body: "TT Commons Pro", Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-text: "Open Sans", system-ui, sans-serif;
    --font-ui: Inter, system-ui, sans-serif;
    --font-display: Manrope, system-ui, sans-serif;

    --radius: 8px;
    --container: 1400px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--c-text);
    background: #fff;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--c-blue);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.site-main:focus {
    outline: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.site-main > .container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
}

.site-main > .container > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.site-main > .container > .ce-layout-10,
.site-main > .container > .frame-layout-10 {
    grid-column: span 3;
    margin-top: 24px;
}

.site-main > .container > .ce-layout-11,
.site-main > .container > .frame-layout-11 {
    grid-column: span 4;
}

.site-main > .container > .ce-layout-12,
.site-main > .container > .frame-layout-12 {
    grid-column: span 2;
}

.section {
    margin-top: 90px;
}

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.section-head__label {
    padding: 8px 24px;
    border-radius: 20px;
    background: var(--c-ink);
    color: #fff;
    font-family: var(--font-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-head__title {
    margin: 0;
    color: var(--c-ink);
    font-size: 46px;
    font-weight: 700;
    line-height: 58px;
}

.section-head__title span {
    color: var(--c-blue);
}

.section-head__text {
    max-width: 600px;
    color: var(--c-grey-600);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 24px;
}

.section-head__text p {
    margin: 0;
}

.section-head__text strong {
    color: var(--c-ink);
}

.section-head__text a {
    color: var(--c-blue);
    text-decoration: none;
}

.section-head__text a:hover {
    text-decoration: underline;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    min-height: 60px;
    padding: 20px 24px;
    border: 1px solid;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.hero-btn--primary {
    border-color: #dceeff;
    background: var(--c-blue);
    color: #fff;
    font-size: 14px;
}

.hero-btn--primary:hover {
    background: var(--c-primary);
}

.hero-btn--secondary {
    border-color: var(--c-blue-100);
    background: var(--c-blue-50);
    color: var(--c-blue);
    font-family: inherit;
    font-size: 16px;
}

.hero-btn--secondary:hover {
    border-color: var(--c-blue-200);
    background: var(--c-blue-75);
    color: var(--c-primary);
}

.icon-arrow {
    width: 12px;
    height: 10px;
    flex: none;
}

.frame-type-text header h2 {
    margin: 32px 0 40px;
    font-size: 46px;
    font-weight: 500;
    line-height: 55.2px;
}

.frame-type-text p {
    margin: 0 0 24px;
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 24px;
}

.frame-type-image figure {
    margin: 0;
}

.frame-type-image .ce-gallery,
.frame-type-image .ce-outer,
.frame-type-image .ce-inner,
.frame-type-image .ce-row,
.frame-type-image .ce-column {
    float: none;
    width: 100%;
    margin: 0;
}

.frame-type-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 40px;
}

@media (max-width: 860px) {
    .site-main > .container {
        display: block;
    }

    .section {
        margin-top: 56px;
    }

    .section-head__title,
    .frame-type-text header h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

@media (max-width: 520px) {
    .hero-btn {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 52px;
        padding: 14px 20px;
    }
}