/* ── Кнопка-«біла» ──────────────────────────────────────────────────────── */
.btn--white {
    color:      var(--blue-500);
    background: var(--neutral-0);
}

.btn--white:hover {
    box-shadow: 0 6px 16px rgba(0, 38, 89, .24);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sol-hero {
    position:   relative;
    min-height: 680px;
    padding:    40px 0 80px;
    overflow:   hidden;
    color:      var(--text-inverse);
    background: #0f2961;
}

.sol-hero__media {
    position: absolute;
    inset:    0;
}

.sol-hero__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.sol-hero__media::after {
    position:   absolute;
    inset:      0;
    background: linear-gradient(90deg, rgba(8, 31, 89, .9) 0%, rgba(8, 31, 89, .6) 35%, rgba(8, 31, 89, 0) 60%);
    content:    '';
}

.sol-hero .container {
    position: relative;
}

.sol-hero__text {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            28px;
    max-width:      720px;
}

.sol-crumbs__list {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px 8px;
    font-size:   14px;
    line-height: 1.4;
    font-weight: 500;
}

.sol-crumbs__item {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
}

.sol-crumbs__item:not(:last-child)::after {
    content: '/';
}

.sol-crumbs__link {
    color:           inherit;
    text-decoration: none;
}

.sol-crumbs__link:hover { text-decoration: underline; }

.sol-crumbs__current { font-weight: 600; }

.sol-hero__tag {
    margin-top:    40px;
    padding:       7px 14px;
    border-radius: var(--radius-pill);
    font-size:     14px;
    line-height:   20px;
    font-weight:   600;
    background:    rgba(255, 255, 255, .16);
}

.sol-hero__title {
    font-size:   52px;
    line-height: 60px;
    font-weight: 700;
    color:       var(--text-inverse);
}

.sol-hero__lead {
    font-size:   18px;
    line-height: 30px;
    color:       #dbe8f7;
}

.sol-hero__lead strong {
    font-weight: 600;
    color:       var(--text-inverse);
}

.sol-hero__buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
}

/* ── Тіло сторінки ──────────────────────────────────────────────────────── */
.sol-body {
    padding: 56px 0 80px;
}

.sol-body .container {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.sol-head {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.sol-head__text {
    font-size:   16px;
    line-height: 24px;
    color:       #6a7480;
}

.sol-offers,
.sol-rows {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.sol-link {
    font-size:       16px;
    line-height:     24px;
    font-weight:     600;
    color:           var(--blue-500);
    text-decoration: none;
}

.sol-link:hover { text-decoration: underline; }

/* Вимоги (схема «offers») */
.sol-reqs {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   16px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.sol-req {
    display:       flex;
    gap:           18px;
    padding:       24px;
    border-radius: 24px;
    background:    var(--bg-subtle);
}

.sol-req__icon {
    display:         inline-flex;
    flex:            0 0 auto;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   16px;
    background:      var(--neutral-0);
}

.sol-req__text {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    min-width:      0;
}

.sol-req__title {
    font-size:   18px;
    line-height: 26px;
    font-weight: 600;
    color:       var(--neutral-900);
}

.sol-req__note {
    font-size:   15px;
    line-height: 22px;
    color:       #6a7480;
}

/* Дві великі картки (схема «offers») */
.sol-offers__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   24px;
}

.sol-offer {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    border-radius:  32px;
    background:     var(--bg-subtle);
}

.sol-offer__media {
    height: 340px;
}

.sol-offer__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.sol-offer__body {
    display:        flex;
    flex:           1;
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
    padding:        32px 36px 36px;
}

.sol-offer__title {
    font-size:   32px;
    line-height: 40px;
    font-weight: 700;
    color:       var(--neutral-900);
}

.sol-offer__text {
    font-size:   17px;
    line-height: 28px;
    color:       #525b65;
}

.sol-offer__text strong {
    font-weight: 600;
    color:       var(--neutral-900);
}

.sol-stats {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   12px;
    width:                 100%;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.sol-stat {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        16px 18px;
    border-radius:  18px;
    background:     var(--neutral-0);
}

.sol-stat__value {
    font-size:   24px;
    line-height: 30px;
    font-weight: 700;
    color:       var(--blue-500);
}

.sol-stat__label {
    font-size:   14px;
    line-height: 20px;
    color:       #6a7480;
}

.sol-offer .sol-link { margin-top: auto; }

/* Горизонтальні картки (схема «rows») */
.sol-rows__list {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.sol-row {
    display:       flex;
    overflow:      hidden;
    border-radius: 32px;
    background:    var(--bg-subtle);
}

.sol-row__media {
    flex:   0 0 640px;
    width:  640px;
    height: 360px;
}

.sol-row__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.sol-row__body {
    display:         flex;
    flex:            1;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: center;
    gap:             18px;
    min-width:       0;
    padding:         40px 56px;
}

.sol-row__title {
    font-size:   32px;
    line-height: 40px;
    font-weight: 700;
    color:       var(--neutral-900);
}

.sol-row__text {
    font-size:   17px;
    line-height: 28px;
    color:       #525b65;
}

.sol-row .sol-link { margin-top: 10px; }

/* Банер-перехід на парну сторінку */
.sol-banner {
    position:      relative;
    display:       flex;
    align-items:   center;
    min-height:    340px;
    padding:       40px 72px;
    overflow:      hidden;
    border-radius: 32px;
    background:    #0f2961;
}

.sol-banner__image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.sol-banner::after {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(90deg, rgba(var(--overlay, 0, 0, 0), .85) 0%, rgba(var(--overlay, 0, 0, 0), .5) 32%, rgba(var(--overlay, 0, 0, 0), 0) 62%);
    content:        '';
    pointer-events: none;
}

.sol-banner:not([style])::after { display: none; }

.sol-banner__content {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
    max-width:      748px;
}

.sol-banner__title {
    font-size:   32px;
    line-height: 40px;
    font-weight: 700;
    color:       var(--text-inverse);
}

.sol-banner--dark .sol-banner__title { color: var(--blue-700); }

@media (max-width: 1279px) {
    .sol-hero__title {
        font-size:   44px;
        line-height: 52px;
    }

    .sol-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sol-row__media {
        flex-basis: 44%;
        width:      44%;
    }

    .sol-row__body { padding: 32px 36px; }

    .sol-banner { padding: 40px 48px; }
}

@media (max-width: 1023px) {
    .sol-hero {
        min-height: 520px;
        padding:    32px 0 56px;
    }

    .sol-hero__media::after { background: linear-gradient(90deg, rgba(8, 31, 89, .88) 0%, rgba(8, 31, 89, .55) 70%, rgba(8, 31, 89, .35) 100%); }

    .sol-offers__grid { grid-template-columns: 1fr; }

    .sol-row { flex-direction: column; }

    .sol-row__media {
        flex-basis: auto;
        width:      100%;
        height:     auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .sol-hero {
        min-height: 0;
        padding:    24px 0 40px;
    }

    .sol-hero__text { gap: 20px; }

    .sol-hero__tag { margin-top: 12px; }

    .sol-hero__title {
        font-size:   34px;
        line-height: 42px;
    }

    .sol-hero__lead {
        font-size:   16px;
        line-height: 26px;
    }

    .sol-hero__buttons {
        flex-direction: column;
        align-items:    stretch;
        width:          100%;
    }

    .sol-body { padding: 32px 0 56px; }

    .sol-body .container { gap: 28px; }

    .sol-reqs { grid-template-columns: 1fr; }

    .sol-offer__media { height: 220px; }

    .sol-offer__body {
        padding: 24px 20px;
        gap:     20px;
    }

    .sol-offer__title,
    .sol-row__title {
        font-size:   24px;
        line-height: 32px;
    }

    .sol-offer__text,
    .sol-row__text {
        font-size:   16px;
        line-height: 26px;
    }

    .sol-stats { grid-template-columns: 1fr; }

    .sol-row__body { padding: 24px 20px; }

    .sol-banner {
        min-height: 0;
        padding:    32px 24px;
    }

    .sol-banner__title {
        font-size:   24px;
        line-height: 32px;
    }

    .sol-banner__content .btn {
        height:      auto;
        min-height:  56px;
        padding-block: 12px;
        white-space: normal;
        text-align:  center;
    }
}