/* =================================
   Site menu
================================= */

.site-menu {
    position: relative;
    z-index: 1000;

    width: 100%;

    background-color: var(--color-dark);
}

.site-menu__navbar {
    width: 100%;
    min-height: var(--menu-height);
    padding: 0;

    background-color: var(--color-dark);
}

.site-menu__container {
    width: 100%;
    min-height: var(--menu-height);
    padding-inline: var(--page-gutter);
}

.site-menu__logo-frame {
    flex: 0 0 auto;
}

.site-menu__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--menu-logo-width);
    height: var(--menu-logo-height);

    margin: 0;
    padding: 0;
}

.site-menu__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.site-menu__collapse {
    min-width: 0;
}

.site-menu__content {
    min-width: 0;
}

.site-menu__nav-frame {
    min-width: 0;
}

.site-menu__links {
    flex-wrap: nowrap;
    gap: var(--menu-link-gap);

    margin: 0;
    padding: 0;

    white-space: nowrap;
}

.site-menu__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 7px 0 !important;

    color: var(--color-light);

    font-family: "Manrope", sans-serif;
    font-size: clamp(14px, 1.1111vw, 16px);
    font-weight: 300;
    line-height: 22px;

    text-align: center;
    white-space: nowrap;

    transition: color var(--transition-base),
    opacity var(--transition-base);
}

.site-menu__link:hover,
.site-menu__link:focus {
    color: var(--color-white);
    opacity: 0.78;
}

.site-menu__link.is-active {
    color: var(--color-white);
}

.site-menu__action-frame {
    flex: 0 0 auto;
}

.site-menu__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--menu-button-width);
    min-width: var(--menu-button-width);
    height: var(--menu-button-height);

    padding: 15px 20px;

    border: 0;
    border-radius: var(--menu-button-radius);

    background-color: var(--color-primary);
    color: var(--color-white);

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    transition: background-color var(--transition-base),
    color var(--transition-base);
}

.site-menu__button:hover,
.site-menu__button:focus {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

.site-menu__toggler {
    flex: 0 0 auto;

    margin-left: auto;
    padding: 8px;

    border-color: rgb(255 255 255 / 20%);
}

.site-menu__toggler:focus {
    box-shadow: 0 0 0 3px rgb(37 99 235 / 25%);
}

@media (min-width: 1200px) {
    .site-menu__collapse {
        flex-grow: 1;
    }

    .site-menu__content {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: var(--menu-height);
    }

    .site-menu__nav-frame {
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;

        min-height: var(--menu-height);
    }

    .site-menu__action-frame {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        min-height: var(--menu-height);
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-menu__container {
        padding-inline: 20px;
    }

    .site-menu__content {
        gap: 16px;
    }

    .site-menu__links {
        gap: 10px;
    }

    .site-menu__link {
        font-size: 14px;
    }

    .site-menu__button {
        width: 158px;
        min-width: 158px;
        padding-inline: 14px;

        font-size: 15px;
    }
}

@media (max-width: 1199.98px) {
    .site-menu__container {
        min-height: var(--menu-mobile-height);
        flex-wrap: wrap;
    }

    .site-menu__navbar {
        min-height: var(--menu-mobile-height);
    }

    .site-menu__logo {
        width: 135px;
        height: auto;
    }

    .site-menu__collapse {
        flex-basis: 100%;
        width: 100%;

        border-top: 1px solid var(--color-border-dark);
    }

    .site-menu__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        padding-block: 18px 28px;
    }

    .site-menu__nav-frame {
        width: 100%;
    }

    .site-menu__links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        width: 100%;
    }

    .site-menu__link {
        justify-content: flex-start;

        width: 100%;
        min-height: 46px;
        padding: 12px 0 !important;

        font-size: 16px;
        text-align: left;
    }

    .site-menu__action-frame {
        width: 100%;
        margin-top: 18px;
    }

    .site-menu__button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .site-menu__logo {
        width: 125px;
    }
}


/* =================================
   Site footer
================================= */

.site-footer {
    margin-top: auto;

    background-color: var(--color-dark);
    color: var(--color-light);
}

.site-footer__container {
    width: 100%;
    padding-inline: var(--page-gutter);
}

.site-footer__content {
    padding-block: clamp(56px, 5vw, 72px) 40px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;

    margin-bottom: 24px;

    text-decoration: none;
}

.site-footer__logo img {
    display: block;

    width: 145px;
    height: auto;
}

.site-footer__description {
    max-width: 440px;
    margin-bottom: 0;

    color: var(--color-text-dark-secondary);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}

.site-footer__title {
    margin-bottom: 20px;

    color: var(--color-white);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer__link,
.site-footer__contact {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    color: var(--color-text-dark-secondary);

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;

    text-decoration: none;

    transition: color var(--transition-base),
    opacity var(--transition-base);
}

.site-footer__link:hover,
.site-footer__link:focus,
.site-footer__contact:hover,
.site-footer__contact:focus {
    color: var(--color-white);
}

.site-footer__address {
    color: var(--color-text-dark-secondary);

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
}

.site-footer__divider {
    margin-block: 40px 24px;

    border-color: var(--color-border-dark);
    opacity: 1;
}


.site-footer__copyright,
.site-footer__policy {
    color: var(--color-text-dark-secondary);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
}

.site-footer__policy {
    text-decoration: none;

    transition: color var(--transition-base);
}

.site-footer__policy:hover,
.site-footer__policy:focus {
    color: var(--color-white);
}

@media (max-width: 991.98px) {
    .site-footer__description {
        max-width: 560px;
    }
}

@media (max-width: 575.98px) {
    .site-footer__content {
        padding-block: 48px 32px;
    }

    .site-footer__logo img {
        width: 130px;
    }

    .site-footer__divider {
        margin-top: 32px;
    }
}


/* =================================
   Shared lending styles
================================= */

:root,
[data-bs-theme="light"] {
    --brand-blue: #2563eb;
    --brand-blue-light: #60a5fa;
    --brand-cyan: #06b6d4;
    --brand-green: #16a34a;
    --brand-green-light: #4ade80;

    --brand-dark: #0f172a;
    --brand-dark-deep: #0b1220;
    --brand-light: #f8fafc;
    --brand-border: #cbd5e1;
    --brand-white: #ffffff;

    --brand-blue-soft: rgba(37, 99, 235, 0.10);
    --brand-cyan-soft: rgba(6, 182, 212, 0.10);
    --brand-green-soft: rgba(22, 163, 74, 0.10);

    --brand-blue-border: rgba(37, 99, 235, 0.24);
    --brand-cyan-border: rgba(6, 182, 212, 0.24);
    --brand-green-border: rgba(22, 163, 74, 0.24);

    --bs-body-color: var(--brand-dark);
    --bs-body-bg: var(--brand-white);
    --bs-secondary-color: rgba(15, 23, 42, 0.68);
    --bs-tertiary-bg: var(--brand-light);
    --bs-border-color: var(--brand-border);

    --bs-primary: var(--brand-blue);
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-bg-subtle: var(--brand-blue-soft);
    --bs-primary-border-subtle: var(--brand-blue-border);
    --bs-primary-text-emphasis: var(--brand-blue);

    --bs-success: var(--brand-green);
    --bs-success-rgb: 22, 163, 74;
    --bs-success-bg-subtle: var(--brand-green-soft);
    --bs-success-border-subtle: var(--brand-green-border);
    --bs-success-text-emphasis: var(--brand-green);

    --bs-info: var(--brand-cyan);
    --bs-info-rgb: 6, 182, 212;
    --bs-info-bg-subtle: var(--brand-cyan-soft);
    --bs-info-border-subtle: var(--brand-cyan-border);
    --bs-info-text-emphasis: var(--brand-cyan);

    --bs-link-color: var(--brand-blue);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-hover-color-rgb: 15, 23, 42;

    --site-header-height: 0px;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 80px;
}


/* =================================
   Bootstrap palette overrides
================================= */

.btn-primary {
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark-deep);
    --bs-btn-active-border-color: var(--brand-dark-deep);
    --bs-btn-disabled-bg: var(--brand-blue);
    --bs-btn-disabled-border-color: var(--brand-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-color: var(--brand-white);
    --bs-btn-hover-bg: var(--brand-blue);
    --bs-btn-hover-border-color: var(--brand-blue);
    --bs-btn-active-color: var(--brand-white);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-outline-success {
    --bs-btn-color: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: var(--brand-white);
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-active-color: var(--brand-white);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-light {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-bg: var(--brand-light);
    --bs-btn-border-color: var(--brand-light);
    --bs-btn-hover-color: var(--brand-dark);
    --bs-btn-hover-bg: var(--brand-white);
    --bs-btn-hover-border-color: var(--brand-border);
    --bs-btn-active-bg: var(--brand-white);
    --bs-btn-active-border-color: var(--brand-border);
}

.text-brand-success {
    color: var(--brand-green);
}


/* =================================
   Reusable accents
================================= */

.brand-accent-blue,
.home-accent-blue {
    --accent-color: var(--brand-blue);
    --accent-soft: var(--brand-blue-soft);
    --accent-border: var(--brand-blue-border);

    --home-accent: var(--brand-blue);
    --home-accent-soft: var(--brand-blue-soft);
    --home-accent-border: var(--brand-blue-border);
}

.brand-accent-cyan,
.home-accent-cyan {
    --accent-color: var(--brand-cyan);
    --accent-soft: var(--brand-cyan-soft);
    --accent-border: var(--brand-cyan-border);

    --home-accent: var(--brand-cyan);
    --home-accent-soft: var(--brand-cyan-soft);
    --home-accent-border: var(--brand-cyan-border);
}

.brand-accent-green,
.home-accent-green {
    --accent-color: var(--brand-green);
    --accent-soft: var(--brand-green-soft);
    --accent-border: var(--brand-green-border);

    --home-accent: var(--brand-green);
    --home-accent-soft: var(--brand-green-soft);
    --home-accent-border: var(--brand-green-border);
}

.brand-icon {
    color: var(--accent-color, var(--brand-blue));
}


/* =================================
   Page anchor navigation
================================= */

.page-anchor-nav {
    border-color: var(--brand-border) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.page-anchor-section {
    position: sticky !important;
    top: var(--site-header-height);
    z-index: 1020;

    background-color: rgba(248, 250, 252, 0.94);
    border-bottom: 1px solid rgba(203, 213, 225, 0.65);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.page-anchor-section .page-anchor-nav {
    background-color: rgba(255, 255, 255, 0.96) !important;
}

.page-anchor-section .overflow-auto {
    scrollbar-width: none;
}

.page-anchor-section .overflow-auto::-webkit-scrollbar {
    display: none;
}

@media (max-width: 991.98px) {
    .page-anchor-section {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .page-anchor-section .page-anchor-nav {
        border-radius: 0.75rem !important;
    }

    .page-anchor-section .btn {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
    }
}

/* =================================
   Shared light cards
   Home directions + website cards
================================= */

.home-direction-card,
.website-card {
    color: var(--brand-dark);
    background-color: var(--brand-white);
    border: 1px solid var(--brand-border);

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px rgba(15, 23, 42, 0.06);

    transition: transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.home-direction-card:hover,
.website-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-border, var(--home-accent-border, var(--brand-blue-border)));

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06),
    0 18px 40px rgba(15, 23, 42, 0.10);
}

.home-direction-icon,
.website-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;
    flex-shrink: 0;

    color: var(--accent-color, var(--home-accent, var(--brand-blue)));
    background-color: var(--accent-soft, var(--home-accent-soft, var(--brand-blue-soft)));

    font-size: 2rem;
    line-height: 1;
}

.home-direction-text,
.website-card-text {
    color: rgba(15, 23, 42, 0.68);
    line-height: 1.5;
}

.home-direction-tag,
.website-card-tag {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    padding: 0.4rem 0.7rem;

    color: var(--accent-color, var(--home-accent, var(--brand-blue)));
    background-color: var(--accent-soft, var(--home-accent-soft, var(--brand-blue-soft)));
    border: 1px solid var(--accent-border, var(--home-accent-border, var(--brand-blue-border)));
    border-radius: 0.5rem;

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}


/* =================================
   Service / version cards
================================= */

.service-card,
.versions-panel,
.version-card {
    background-color: var(--brand-white);
    border-color: var(--brand-border) !important;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.05);
}

.service-card,
.version-card {
    transition: transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.service-card:hover,
.version-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue-border) !important;

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05),
    0 16px 32px rgba(15, 23, 42, 0.08);
}

@media (min-width: 768px) {
    .service-card-title {
        min-height: 58px;
    }
}


/* =================================
   Multi-card carousels
================================= */

.bitrix-multi-carousel {
    width: 100%;
    overflow: hidden;
}

.bitrix-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 1rem;

    width: 100%;
    padding: 2px 2px 12px;

    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
}

.bitrix-carousel-track::-webkit-scrollbar {
    display: none;
}


/* =================================
   Dark setting cards
================================= */

.bitrix-settings-section {
    color: var(--brand-light);
    background-color: var(--brand-dark-deep);
}

.bitrix-settings-description {
    color: var(--brand-border);
}

.bitrix-setting-card {
    color: var(--brand-light);
    background-color: var(--brand-dark);
    border: 1px solid rgba(203, 213, 225, 0.16);

    box-shadow: 0 1px 0 rgba(248, 250, 252, 0.04) inset,
    0 8px 24px rgba(11, 18, 32, 0.28);

    transition: transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.bitrix-setting-card:hover {
    transform: translateY(-4px);
    border-color: rgba(96, 165, 250, 0.48);

    box-shadow: 0 1px 0 rgba(248, 250, 252, 0.05) inset,
    0 16px 34px rgba(11, 18, 32, 0.42);
}

.bitrix-setting-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    color: var(--brand-blue-light);
    background-color: rgba(96, 165, 250, 0.10);

    font-size: 38px;
    line-height: 1;
}

.bitrix-setting-text {
    color: var(--brand-border);
    font-size: 1rem;
    line-height: 1.4;
}

.bitrix-setting-link,
.bitrix-setting-link-light {
    display: inline-flex;
    align-items: center;

    font-size: 1rem;
    text-decoration: none;
    transition: color 160ms ease;
}

.bitrix-setting-link {
    color: var(--brand-blue-light);
}

.bitrix-setting-link:hover {
    color: var(--brand-light);
}

.bitrix-setting-link-light {
    color: var(--brand-blue);
}

.bitrix-setting-link-light:hover {
    color: var(--brand-dark);
}

.bitrix-setting-link i,
.bitrix-setting-link-light i {
    transition: transform 160ms ease;
}

.bitrix-setting-link:hover i,
.bitrix-setting-link-light:hover i {
    transform: translateX(4px);
}

.bitrix-carousel-control,
.bitrix-carousel-control-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;
}

.bitrix-carousel-control {
    color: var(--brand-light);
    border-color: rgba(203, 213, 225, 0.35);
}

.bitrix-carousel-control:hover {
    color: var(--brand-dark);
    background-color: var(--brand-light);
    border-color: var(--brand-light);
}

.bitrix-carousel-control-light {
    color: var(--brand-dark);
    background-color: var(--brand-white);
    border-color: var(--brand-border);
}

.bitrix-carousel-control-light:hover {
    color: var(--brand-white);
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.bitrix-carousel-track > .bitrix-setting-card,
.bitrix-carousel-track > .bitrix-setting-card-light {
    flex: 0 0 84%;
    min-height: 340px;
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .bitrix-carousel-track > .bitrix-setting-card,
    .bitrix-carousel-track > .bitrix-setting-card-light {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (min-width: 992px) {
    .bitrix-carousel-track > .bitrix-setting-card,
    .bitrix-carousel-track > .bitrix-setting-card-light {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (min-width: 1200px) {
    .bitrix-carousel-track > .bitrix-setting-card,
    .bitrix-carousel-track > .bitrix-setting-card-light {
        flex-basis: calc((100% - 3rem) / 4);
    }
}


/* =================================
   Light setting / integration cards
================================= */

.bitrix-settings-light-section {
    color: var(--brand-dark);
    background-color: var(--brand-light);
}

.bitrix-settings-light-description {
    color: rgba(15, 23, 42, 0.68);
}

.bitrix-setting-card-light {
    color: var(--brand-dark);
    background-color: var(--brand-white);
    border: 1px solid var(--brand-border);

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px rgba(15, 23, 42, 0.06);

    transition: transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.bitrix-setting-card-light:hover {
    transform: translateY(-4px);
    border-color: var(--integration-accent-border, var(--brand-blue-border));

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06),
    0 18px 40px rgba(15, 23, 42, 0.10);
}

.bitrix-setting-icon-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 80px;
    height: 80px;

    color: var(--integration-accent, var(--brand-blue));
    background-color: var(--integration-accent-soft, var(--brand-blue-soft));

    font-size: 38px;
    line-height: 1;

    transition: color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.bitrix-setting-card-light:hover .bitrix-setting-icon-light {
    transform: scale(1.04);
}

.bitrix-setting-text-light {
    color: rgba(15, 23, 42, 0.68);
    font-size: 1rem;
    line-height: 1.45;
}

.integration-card,
.integration-accent-blue {
    --integration-accent: var(--brand-blue);
    --integration-accent-soft: var(--brand-blue-soft);
    --integration-accent-border: var(--brand-blue-border);
}

.integration-accent-cyan {
    --integration-accent: var(--brand-cyan);
    --integration-accent-soft: var(--brand-cyan-soft);
    --integration-accent-border: var(--brand-cyan-border);
}

.integration-accent-green {
    --integration-accent: var(--brand-green);
    --integration-accent-soft: var(--brand-green-soft);
    --integration-accent-border: var(--brand-green-border);
}

.integration-card .bitrix-setting-icon-light {
    color: var(--integration-accent);
    background-color: var(--integration-accent-soft);
}

.integration-card:hover {
    border-color: var(--integration-accent-border);
}


/* =================================
   Approach cards
================================= */

.approach-label {
    color: var(--brand-blue);
    font-size: 1rem;
}

.approach-card {
    background-color: var(--brand-white);
    border-color: var(--brand-border) !important;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 5px 14px rgba(15, 23, 42, 0.05);

    transition: transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.approach-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue-border) !important;

    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05),
    0 12px 28px rgba(15, 23, 42, 0.08);
}

.approach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    color: var(--brand-blue);
    background-color: var(--brand-blue-soft);

    font-size: 28px;
    line-height: 1;
}


/* =================================
   Solution / project cards
================================= */

.solution-featured-card,
.project-featured-card {
    padding: 1.5rem;

    background-color: var(--brand-white);
    border: 1px solid var(--accent-border, var(--brand-blue-border));
    border-radius: 1.5rem;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 30px rgba(15, 23, 42, 0.05);

    transition: transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.solution-featured-card:hover,
.project-featured-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color, var(--brand-blue));

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05),
    0 18px 40px rgba(15, 23, 42, 0.08);
}

.solution-icon,
.project-featured-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    color: var(--accent-color, var(--brand-blue));
    background-color: var(--accent-soft, var(--brand-blue-soft));
    border-radius: 1.25rem;

    font-size: 1.9rem;
    line-height: 1;
}

.solution-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 180px;
    height: 100%;
    padding: 0.75rem;
    overflow: hidden;

    background-color: var(--brand-light);
    border: 1px solid var(--brand-border);
    border-radius: 1.25rem;
}

.solution-preview img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 280px;

    object-fit: contain;
    border-radius: 0.75rem;
}

.solution-mini-card,
.project-mini-card {
    height: 100%;
    padding: 1.25rem;

    background-color: var(--brand-white);
    border-color: var(--brand-border) !important;
    border-radius: 1rem;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);

    transition: transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.solution-mini-card:hover,
.project-mini-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-blue-border) !important;

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04),
    0 10px 24px rgba(15, 23, 42, 0.05);
}

.solution-mini-icon,
.project-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    flex-shrink: 0;

    color: var(--accent-color, var(--brand-blue));
    background-color: var(--accent-soft, var(--brand-blue-soft));
    border-radius: 0.9rem;

    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
}

.solution-mini-link,
.project-mini-link {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;

    width: fit-content;
    padding: 0;

    color: var(--accent-color, var(--brand-blue));
    background: none;
    border: 0;

    font-weight: 500;
    text-align: left;
    text-decoration: none;

    transition: color 160ms ease;
}

.solution-mini-link:hover,
.project-mini-link:hover {
    color: var(--brand-dark);
}

.solution-mini-link i,
.project-mini-link i {
    transition: transform 160ms ease;
}

.solution-mini-link:hover i,
.project-mini-link:hover i {
    transform: translateX(4px);
}

#toggleMoreSolutions i {
    transition: transform 180ms ease;
}

#toggleMoreSolutions.is-open i {
    transform: rotate(180deg);
}


/* =================================
   Price cards
================================= */

.price-card {
    position: relative;
    overflow: hidden;

    background-color: var(--brand-white);
    border-color: var(--brand-border) !important;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.05);

    transition: transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.price-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;
    content: "";
    background-color: var(--accent-color, var(--brand-blue));
}

.price-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color, var(--brand-blue)) !important;

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05),
    0 16px 36px rgba(15, 23, 42, 0.09);
}

.price-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    flex-shrink: 0;

    color: var(--accent-color, var(--brand-blue));
    background-color: var(--accent-soft, var(--brand-blue-soft));

    font-size: 1.65rem;
    line-height: 1;
}

.price-card-value {
    line-height: 1.1;
}

.price-card-details {
    display: inline-flex;
    align-items: center;
    width: fit-content;

    padding: 0;
    border: 0;
    background: transparent;

    color: var(--brand-blue);
    font-weight: 600;
    text-align: left;

    transition: color 160ms ease;
}

.price-card-details:hover,
.price-card-details:focus-visible {
    color: var(--brand-dark);
}

.price-card-details i {
    transition: transform 160ms ease;
}

.price-card-details:hover i,
.price-card-details:focus-visible i {
    transform: translateX(4px);
}


/* =================================
   Price details modal
================================= */

.price-details-modal {
    border: 1px solid var(--brand-border);
    border-radius: 1.5rem;
    overflow: hidden;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.price-details-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
}

.price-details-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    flex-shrink: 0;

    color: var(--brand-blue);
    background-color: var(--brand-blue-soft);
    border-radius: 1rem;

    font-size: 1.5rem;
    line-height: 1;
}

.price-details-modal-list li {
    position: relative;
    padding-left: 1.65rem;

    color: var(--bs-secondary-color);
    line-height: 1.45;
}

.price-details-modal-list li::before {
    position: absolute;
    top: 0.08rem;
    left: 0;

    content: "\F26B";

    color: var(--brand-green);
    font-family: "bootstrap-icons";
    font-size: 1rem;
    line-height: 1.45;
}

.price-details-extra {
    background-color: var(--brand-light);
    border-color: var(--brand-border) !important;
}

.price-details-extra-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: var(--brand-blue);
    background-color: var(--brand-blue-soft);

    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .price-details-modal .p-4 {
        padding: 1.25rem !important;
    }

    .price-details-modal .h3 {
        font-size: 1.35rem;
    }
}


/* =================================
   Arrow-link behavior shared by pages
================================= */

.home-direction-link,
.home-solution-link,
.home-about-card .bi-arrow-right {
    transition: color 160ms ease,
    transform 160ms ease;
}

.home-direction-link i,
.home-solution-link i {
    transition: transform 160ms ease;
}

.home-direction-link:hover i,
.home-solution-link:hover i,
.home-about-card:hover .bi-arrow-right {
    transform: translateX(4px);
}


/* =================================
   Reduced motion
================================= */

@media (prefers-reduced-motion: reduce) {
    .home-direction-card,
    .home-direction-link,
    .home-direction-link i,
    .website-card,
    .service-card,
    .version-card,
    .bitrix-setting-card,
    .bitrix-setting-link,
    .bitrix-setting-link i,
    .bitrix-setting-card-light,
    .bitrix-setting-icon-light,
    .bitrix-setting-link-light,
    .bitrix-setting-link-light i,
    .approach-card,
    .solution-featured-card,
    .project-featured-card,
    .solution-mini-card,
    .project-mini-card,
    .solution-mini-link i,
    .project-mini-link i,
    #toggleMoreSolutions i,
    .price-card,
    .price-card-details,
    .price-card-details i {
        transition: none;
    }

    .home-direction-card:hover,
    .website-card:hover,
    .service-card:hover,
    .version-card:hover,
    .bitrix-setting-card:hover,
    .bitrix-setting-card-light:hover,
    .bitrix-setting-card-light:hover .bitrix-setting-icon-light,
    .approach-card:hover,
    .solution-featured-card:hover,
    .project-featured-card:hover,
    .solution-mini-card:hover,
    .project-mini-card:hover,
    .price-card:hover {
        transform: none;
    }
}

/* =================================
   Multicolor accents
================================= */

.approach-card[class*="brand-accent-"]:hover {
    border-color: var(--accent-border, var(--brand-blue-border)) !important;
}

.approach-card[class*="brand-accent-"] .approach-icon {
    color: var(--accent-color, var(--brand-blue));
    background-color: var(--accent-soft, var(--brand-blue-soft));
}


/* Dark cards */

.bitrix-setting-card[class*="brand-accent-"]:hover {
    border-color: var(--accent-color, var(--brand-blue)) !important;
}

.bitrix-setting-card[class*="brand-accent-"] .bitrix-setting-icon {
    color: var(--accent-color, var(--brand-blue));
    background-color: var(--accent-soft, var(--brand-blue-soft));
}

.bitrix-setting-card[class*="brand-accent-"] .bitrix-setting-link {
    color: var(--accent-color, var(--brand-blue));
}

.bitrix-setting-card[class*="brand-accent-"] .bitrix-setting-link:hover,
.bitrix-setting-card[class*="brand-accent-"] .bitrix-setting-link:focus {
    color: var(--brand-light);
}


/* Prices */

.price-card[class*="brand-accent-"]::before {
    background-color: var(--accent-color, var(--brand-blue));
}

.price-card[class*="brand-accent-"]:hover {
    border-color: var(--accent-color, var(--brand-blue)) !important;
}

.price-card[class*="brand-accent-"] .price-card-icon {
    color: var(--accent-color, var(--brand-blue));
    background-color: var(--accent-soft, var(--brand-blue-soft));
}


/* Mini solution/project cards */

.solution-mini-card[class*="brand-accent-"]:hover,
.project-mini-card[class*="brand-accent-"]:hover {
    border-color: var(--accent-border, var(--brand-blue-border)) !important;
}