* {
    padding: 0;
    margin: 0;
    border: 0;
}

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

*::after,
*::before {
    display: inline-block;
}

ul li {
    list-style: none;
}

body,
html {
    height: 100%;
    min-width: 320px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-color: #0080E5 #D9D9D9;
}

html.is-locked,
html.is-locked body {
    overflow: hidden;
    overscroll-behavior: none;
    /* по желанию: touch-action: none;  // немного помогает на мобильных */
}

#mobileMenu {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

a {
    text-decoration: none;
    color: inherit;
}


body {
    font-family: "Inter", sans-serif;
    background-color: #F6F7F9;
    color: #4F5B68;
    font-style: normal;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 145%;
}

@media(max-width: 67.5rem) {
    body {
        font-size: 1rem;
        line-height: 170%;
    }
}

.container {
    max-width: 105rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 2.5rem;
}

@media (max-width: 87.5rem) {
    .container {
        padding: 0 1rem;
    }
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wrapper>main {
    flex: 1 1 auto;
}

.wrapper>* {
    min-width: 0;
}

.d-flex {
    display: flex;
}

a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.313rem 4.625rem;
    gap: 10px;
    border-radius: 8px;
    background: #0080E5;
    color: #FFF;
    font-family: "Inter";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 128, 229, .24), 0 1px 2px rgba(0, 0, 0, .04);
    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .12s ease;
}

a.btn:hover {
    color: #FFF;
    box-shadow: 0 10px 28px rgba(0, 128, 229, .35), 0 3px 8px rgba(0, 0, 0, .08);
}

a.btn.btn-long {
    padding: 1.313rem 7.75rem;
}

@media (max-width: 48rem) {
    a.btn {
        font-size: 1.125rem;
        padding: 0.75rem 4rem;
    }

    a.btn.btn-long {
        padding: 0.75rem 4rem;
    }
}

@media (max-width: 26.875rem) {
    a.btn {
        display: flex;
    }
}

a.login {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: #DAF0FF;
    color: #000E19;
    padding: 1rem 2rem;
    border-radius: 8px;
    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .12s ease;
}

a.login:hover {
    box-shadow: 0 10px 28px rgba(0, 128, 229, .35), 0 3px 8px rgba(0, 0, 0, .08);
}

a.disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 8px;
    border: 3px solid #D9D9D9;
    color: #D9D9D9;
    background-color: #ffffff;
}



header {
    padding: 3rem 0;
    background-color: #ffffff;
    position: relative;
}

header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    animation: fadeDown 0.3s ease forwards;
    z-index: 12;
    padding: 1.5rem 0;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 67.5rem) {
    header {
        padding: 1.563rem 0;
        position: fixed;
        z-index: 10;
        width: 100%;
    }

    header.scrolled {
        padding: 1.563rem 0;
    }
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

a.logo {
    font-family: "ABeeZee", sans-serif;
    position: relative;
    z-index: 10;
    font-size: 2.25rem;
    color: #121212;
    text-decoration: none;
}

a.logo strong {
    font-family: "Inter", sans-serif;
    font-weight: 800;
}


@media (max-width: 67.5rem) {
    .logo img {
        max-width: 6.25rem;
    }
}

header nav {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}

.nav-links {
    display: none;
}

::placeholder {
    color: #C4C4C4;
}


/* header nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 0.3s;
}
 */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auth-buttons a.btn {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.auth-buttons-mobile {
    display: none;
}

.menu-toggle {
    display: none;
    width: 32px;
    height: 32px;
    position: relative;
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 2px;
    background: #858383;
    border-radius: 2px;
    transform-origin: 50% 50%;
    transition:
        transform 0.25s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}

.menu-toggle span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 8px));
}

.menu-toggle span:nth-child(2) {
    transform: translate(-50%, -50%);
}

.menu-toggle span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 8px));
}


.menu-toggle:hover span {
    background: #0080E5;
}

.menu-toggle.active span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #3A3A3A;
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: #3A3A3A;
}

@media (max-width: 67.5rem) {
    a.logo {
        font-size: 1.5rem;
    }

    header nav {
        display: none;
        flex-direction: column;
        background: #eaf4fd;
        position: fixed;
        top: 76px;
        right: 0;
        width: 100%;
        padding: 1rem 0 5rem;
        height: 100vh;
        z-index: 9;
        justify-content: space-between;
    }

    header nav.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 10;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
    }

    .nav-links li {
        width: 100%;
        transition: all 0.3s ease;
        padding: 1.25rem;
        border-bottom: 1px solid #D9D9D9;
    }

    header nav a {
        color: #4F5B68;
        font-family: "Inter";
        font-size: 1.5rem;
        font-weight: 500;
        line-height: normal;
        text-decoration: none;
    }

    .nav-links li:hover {
        background: #0080E5;
    }

    .nav-links li:hover a {
        color: #ffffff;
    }

    .menu-search {
        padding: 1.438rem 1rem 2.188rem;
    }

    .item-search {
        position: relative;
        height: 47px;
        width: 100%;
        border-radius: 100px;
    }

    .item-search input {
        border: 0;
        outline: none;
        font-size: 1.25rem;
        height: 47px;
        width: 100%;
        border-radius: 100px;
        background-color: #ffffff;
        padding-left: 23px;
        padding-right: 38px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21.0002 21L16.6602 16.66' stroke='%23DDE0E4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z' stroke='%23DDE0E4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 97% 50%;
    }

    .auth-buttons {
        display: none;

    }

    .auth-buttons-mobile {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .auth-buttons-mobile {
        color: #4F5B68;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: 100%;
        padding: 1rem 1rem;
    }

    .auth-buttons-mobile span {
        display: inline-block;
        margin: 0 5px;
    }

    .auth-buttons-mobile a.btn {
        padding: 0.75rem 1.5rem;
        margin-left: auto;
    }
}

@media(max-width: 26.875rem) {
    header nav a {
        font-size: 1rem;
    }
}

/*Title*/
.section-title {
    color: #000E19;
    text-align: center;
    font-family: "Inter";
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 2.75rem;
}

.section-title .highlight {
    position: relative;
    color: #0080e5;
    display: inline-block;
    z-index: 1;
}

.section-title span {
    color: #0080e5;
}

.section-title .highlight::after {
    content: '';
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 0.01em;
    background: url("../img/text-highlight.png");
    background-size: cover;
    width: 101%;
    height: 22px;
    z-index: -1;
    border-radius: 0.2em;
    background-repeat: no-repeat;
    transform: translateX(-50%);
}

@media(max-width: 67.5rem) {
    .section-title {
        font-size: 2rem;
        margin-bottom: 1.5rem !important;
    }

    .section-title .highlight::after {
        height: 11px;
    }
}

@media(max-width: 26.875rem) {
    .section-title {
        font-size: 1.5rem;
    }

}

/*Hero*/
.hero {
    background-color: #ffffff;
    padding: 6.25rem 0;
}

.hero-info {
    flex: 1 1 50%;
    max-width: 45.688rem;
    width: 100%;
}

.hero .d-flex {
    justify-content: space-between;
    width: 100%;
    align-items: start;
    gap: 1rem;
}

.hero .section-title {
    font-size: 5.5rem;
    text-align: left;
    margin-bottom: 4rem;
}

.hero p {
    margin-bottom: 3.75rem;
}

.hero-btn {
    display: flex;
    justify-content: flex-start;
    gap: 1.25rem;
    align-items: center;
}

.hero .hero-img img {
    max-width: 49.375rem;
}

.hero-img {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}



.active-users {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

.active-users strong {
    color: #4F5B68;
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: normal;
}

.active-users p {
    display: block;
    color: #4F5B68;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.user-icons {
    display: flex;
    align-items: center;
    position: relative;
    width: 109px;
    height: 57px;
}

.user-icons__item {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    /* белая обводка вокруг */
}

.user-icons__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-icons__item--first {
    left: 0;
    z-index: 1;
}


.user-icons__item--second {
    left: 27px;
    z-index: 2;
}

.user-icons__item--third {
    left: 54px;
    z-index: 3;
}

@media(max-width: 80rem) {
    .hero .section-title {
        font-size: 4rem;
    }

    .hero .hero-img img {
        width: 100%;
    }
}

@media(max-width: 67.5rem) {
    .hero .section-title {
        font-size: 2.75rem;
    }
}

@media(max-width: 55rem) {
    .hero {
        padding: 6.25rem 0 5rem;
    }

    .hero .d-flex {
        flex-direction: column;
        gap: 2rem;
    }

    .hero p {
        margin-bottom: 1.5rem;
    }

    .hero .btn {
        padding: 0.75rem 1.25rem;
    }

    .active-users {
        gap: 0.5rem;
    }

    .user-icons__item {
        width: 35px;
        height: 35px;
    }

    .user-icons__item--second {
        left: 15px;
    }

    .user-icons__item--third {
        left: 27px;
    }

    .user-icons {
        width: 70px;
    }

    .active-users strong {
        font-size: 1rem;
    }

    .active-users p {
        margin-bottom: 0;
        font-size: 0.875rem;
    }
}

@media(max-width: 26.875rem) {
    .hero .section-title {
        font-size: 2.2rem;
    }
}

/*Benefits section*/
.benefits-section {
    padding: 4rem 0 9rem;
}

.benefits-section .section-title {
    max-width: 51.875rem;
    margin: 0 auto 6rem;
}


.benefits-wrapper {
    max-width: 93.375rem;
    margin: 0 auto;
}

.benefits-wrapper .d-flex {
    display: flex;
    justify-content: center;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 3rem;
}

.benefits-left {
    max-width: 51.75rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.benefits-right {
    max-width: 38.625rem;
    width: 100%;
}

.accurate-card {
    overflow: hidden;
    max-height: 38.125rem;
}

.benefit-card {
    background: #fff;
    border-radius: 24px;
    padding: 2.438rem 2.813rem 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}



.benefit-card__title {
    color: #0080E5;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.125rem;
}

.benefit-card__desc {
    font-size: 1.5rem;
    color: #4F5B68;
    margin-bottom: 3.125rem;
    line-height: 2.4rem;
}

.benefit-card__image {
    width: 100%;
}


.tips-card {
    padding: 2.438rem 0.625rem 1.25rem 3.75rem;
    position: relative;
}

.tips-grid {
    display: flex;
    gap: 10px;
    width: 100%;
}

.tips-card .benefit-card__desc {
    margin-bottom: 0;
}

.tips-right .benefit-card__image img {
    position: relative;
    right: 40px;
    top: 40px;
}


.tips-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card-planning {
    flex-direction: row;
    padding-bottom: 0;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
}

.card-planning .benefit-card__desc {
    margin-bottom: 4.375rem;
}

.card-plannig__img {
    margin-bottom: 1rem;
}

.card-planning__right img {
    position: relative;
    bottom: -7px;
}

.card-planning-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: auto;
}

@media (max-width: 90rem) {
    .tips-card .tips-grid {
        flex-direction: column !important;
    }

    .tips-illust {
        position: absolute;
        z-index: 2;
        right: 65px;
        top: 209px;
    }

    .tips-right .benefit-card__image img {
        right: inherit;
    }

    .tips-card {
        padding: 2.438rem 1.938rem 1.25rem 1.938rem;
    }

    .tips-illust img {
        max-width: 100px;
    }

    .tips-right {
        position: relative;
    }

    .benefit-card__image img {
        width: 60%;
        margin: 0 auto;
        display: block;
    }

    .card-planning__right img {
        width: 100%;
    }

    .card-planning .benefit-card__desc {
        margin-bottom: 2rem;
    }

    .card-plannig__img {
        max-width: 31.25rem;
        width: 100%;
        margin: 0 auto;
    }

    .benefit-card {
        align-items: center;
    }
}

/*1080*/
@media (max-width: 67.5rem) {
    .benefit-card__title {
        font-size: 1.75rem;
    }

    .benefits-section {
        padding: 2.813rem 0 5rem;
    }

    .benefit-card__desc {
        margin-bottom: 1rem;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .benefit-card {
        padding: 1.5rem 1rem 0;
        overflow: hidden;
    }


}

@media(max-width: 26.875rem) {
    .benefit-card__title {
        font-size: 1.4rem;
    }

    .benefit-card__image img {
        width: 90%;
        margin: 0 auto;
        display: block;
    }
}

/*991*/
@media (max-width: 61.938rem) {
    .tips-card {
        width: 100%;
        height: auto;
    }


    .benefits-wrapper .d-flex {
        flex-direction: column;
    }

    .benefits-left,
    .benefits-right {
        max-width: 100%;
        width: 100%;
    }

    .benefits-left .benefit-card:nth-child(1) {
        order: 1;
    }

    .benefits-right .benefit-card {
        order: 2;
    }

    .benefits-left .benefit-card:nth-child(2) {
        order: 3;
    }

    .card-planning {
        flex-direction: column;
        align-items: center;
    }

    .tips-illust {
        position: absolute;
        z-index: 2;
        right: 24%;
        top: 24%;
    }

}

@media(max-width: 26.875rem) {
    .tips-illust {
        position: absolute;
        z-index: 2;
        right: 6%;
        top: 33%;
    }
}

/*lenders-section*/
.lenders-section {
    padding: 6.25rem 0;
    text-align: center;
    background: #FFF;
}

.lenders-section .section-title {
    margin-bottom: 2.063rem;
}

.lenders-section__img {
    position: relative;
    margin-bottom: 2rem;
}

.lenders-section__img img {
    max-width: 64.313rem;
    width: 100%;
}

.lenders-section .section-desc {
    max-width: 74.313rem;
    margin: 0 auto 3.125rem;
}

.lenders-section .label {
    position: absolute;
    color: #4F5B68;
    font-family: "Caveat", cursive;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    gap: 4px;
    align-items: stretch;
}

.lenders-section .label-1 {
    top: 2%;
    left: 15%;
}

.lenders-section .label-1 svg {
    position: relative;
    top: 5px;
}

.lenders-section .label-2 {
    top: 10%;
    right: 12%;
}

.lenders-section .label-3 {
    top: 42%;
    left: 7%;
    text-align: left;
}

.lenders-section .label-3 svg {
    position: relative;
    left: -5px;
}

.lenders-section .label-4 {
    top: 48%;
    right: 8%;
    text-align: left;
}

@media (max-width: 90rem) {
    .lenders-section .label-1 {
        left: 7%;
    }

    .lenders-section .label-4 {
        right: 0;
    }

    .lenders-section .label-3 {
        left: 0;
    }

    .lenders-section .label-2 {
        top: 8%;
        right: 3%;
    }

    .lenders-section__img img {
        width: 80%;
    }
}

@media (max-width: 67.5rem) {
    .lenders-section__img img {
        width: 65%;
    }

    .lenders-section {
        padding: 2.75rem 0 3.75rem;
    }

    .lenders-section .section-desc {
        margin: 0 auto 1.5rem;
    }
}

@media (max-width: 48rem) {
    .lenders-section .label {
        font-size: 1.5rem;
    }

    .lenders-section .label svg {
        position: absolute;
        max-width: 25px;
    }

    .lenders-section__img img {
        width: 100%;
    }

    .lenders-section__img {
        padding: 6.25rem 0;
    }

    .lenders-section .label-1 {
        left: 6%;
        top: 12%;
        max-width: 17%;
    }

    .lenders-section .label-1 svg {
        top: inherit;
        right: -34px;
        bottom: 0;
    }

    .lenders-section .label-2 {
        max-width: 17%;
        text-align: left;
        right: 6%;
    }

    .lenders-section .label-2 svg {
        left: -29px;
        top: 10px;
    }

    .lenders-section .label-3 {
        bottom: 7%;
        top: inherit;
        left: 6%;
        text-align: right;
    }

    .lenders-section .label-3 svg {
        top: -27px;
        left: 106%;
        right: 0;
    }

    .lenders-section .label-4 {
        top: inherit;
        bottom: 7%;
        right: 10%;
    }

    .lenders-section .label-4 br {
        display: none;
    }

    .lenders-section .label-4 svg {
        position: relative;
        top: -24px;
    }
}


/*keys-section*/
.keys-section {
    text-align: center;
    padding: 5.938rem 0;
}

@media (max-width: 67.5rem) {
    .keys-section {
        padding: 2.875rem 0 3.25rem;
    }
}


/* ===== Block: keys ===== */
.keys {
    position: relative;
    max-width: 94.625rem;
    margin: 0 auto 3.125rem;
    width: 100%;
}

.keys__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

/* layout desktop */
.keys__grid {
    display: grid;
    grid-template-columns: 27rem 1fr;
    gap: 2rem;
    align-items: stretch;
    border-radius: 31px;
    background: #FFF;
}

/* nav */
.keys__nav {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 4rem;
    padding: .25rem 0;
    margin-top: 3.688rem;
    margin-left: 3.75rem;
    margin-bottom: 3.688rem;
}

.keys__tab {
    cursor: pointer;
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    color: #000E19;
    position: relative;
    padding-right: 3.25rem;
    text-align: left;
}

/* активный таб */
#keys-1:checked~.keys__grid .keys__nav label[for="keys-1"],
#keys-2:checked~.keys__grid .keys__nav label[for="keys-2"],
#keys-3:checked~.keys__grid .keys__nav label[for="keys-3"],
#keys-4:checked~.keys__grid .keys__nav label[for="keys-4"] {
    color: #fff;
    border-radius: 100px;
    background: #0080E5;
    display: inline-flex;
    align-items: center;
    max-width: 31.875rem;
    padding: 1.813rem 0.688rem 1.813rem 1.5rem;
    box-shadow: 0 .75rem 2rem rgba(0, 128, 229, .25);
    min-width: 510px;
    z-index: 5;
}

.keys__tab::after {
    content: "";
    position: absolute;
    right: 0.688rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4.875rem;
    height: 4.875rem;
    border-radius: 100%;
    background: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30' fill='none'%3E%3Cpath d='M33.4142 16.4142C34.1953 15.6332 34.1953 14.3668 33.4142 13.5858L20.6863 0.857864C19.9052 0.0768156 18.6389 0.0768156 17.8579 0.857864C17.0768 1.63891 17.0768 2.90524 17.8579 3.68629L29.1716 15L17.8579 26.3137C17.0768 27.0948 17.0768 28.3611 17.8579 29.1421C18.6389 29.9232 19.9052 29.9232 20.6863 29.1421L33.4142 16.4142ZM0 15V17H32V15V13H0V15Z' fill='%234F5B68'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}



#keys-1:checked~.keys__grid .keys__nav label[for="keys-1"]::after,
#keys-1:checked~.keys__grid .keys__nav label[for="keys-1"]::before,
#keys-2:checked~.keys__grid .keys__nav label[for="keys-2"]::after,
#keys-2:checked~.keys__grid .keys__nav label[for="keys-2"]::before,
#keys-3:checked~.keys__grid .keys__nav label[for="keys-3"]::after,
#keys-3:checked~.keys__grid .keys__nav label[for="keys-3"]::before,
#keys-4:checked~.keys__grid .keys__nav label[for="keys-4"]::after,
#keys-4:checked~.keys__grid .keys__nav label[for="keys-4"]::before {
    display: block
}

/* stage + slides */
.keys__stage {
    position: relative;
    max-height: 42rem;
    display: grid;
    border-radius: 31px;
    background: #DAF0FF;
}

.keys__slide {
    grid-area: 1/1;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#keys-1:checked~.keys__grid .keys__slide[data-for="keys-1"],
#keys-2:checked~.keys__grid .keys__slide[data-for="keys-2"],
#keys-3:checked~.keys__grid .keys__slide[data-for="keys-3"],
#keys-4:checked~.keys__grid .keys__slide[data-for="keys-4"] {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

@media (max-width: 87.5rem) {
    .keys__slide img {
        max-width: 100%;
        width: 100%;
    }

    .keys__nav {
        gap: 1rem;
        margin-top: 2rem;
        margin-left: 1rem;
        margin-bottom: 2rem;
    }

    #keys-1:checked~.keys__grid .keys__nav label[for="keys-1"],
    #keys-2:checked~.keys__grid .keys__nav label[for="keys-2"],
    #keys-3:checked~.keys__grid .keys__nav label[for="keys-3"],
    #keys-4:checked~.keys__grid .keys__nav label[for="keys-4"] {
        min-width: 440px;
    }

}

/* ===== Mobile ===== */
@media (max-width: 55.625rem) {

    /* 890px */
    .keys__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem
    }

    .keys__nav {
        margin-top: 0.2rem;
        margin-left: 0.2rem;
        margin-bottom: 0.2rem;
        flex-direction: column;
        gap: .75rem;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .keys__tab {
        font-size: 1.5rem;
        max-width: none;
        padding: 0.75rem 3rem 0.75rem 3rem;
        background-color: #95C9F3;
        color: #FFF;
        border-radius: 100px;
        width: auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M9 18.5L15 12.5L9 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: 94% 50%;
        background-repeat: no-repeat;
    }

    #keys-1:checked~.keys__grid .keys__nav label[for="keys-1"], #keys-2:checked~.keys__grid .keys__nav label[for="keys-2"], #keys-3:checked~.keys__grid .keys__nav label[for="keys-3"], #keys-4:checked~.keys__grid .keys__nav label[for="keys-4"] {
        padding: 0.75rem 3rem 0.75rem 3rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M9 18.5L15 12.5L9 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: 94% 50%;
        background-repeat: no-repeat;
    }

    #keys-1:checked~.keys__grid .keys__nav label[for="keys-1"], #keys-2:checked~.keys__grid .keys__nav label[for="keys-2"], #keys-3:checked~.keys__grid .keys__nav label[for="keys-3"], #keys-4:checked~.keys__grid .keys__nav label[for="keys-4"] {
        min-width: auto;
    }

    .keys__tab::after {
        display: none !important;
    }

    .keys__stage {
        min-height: 20rem
    }

    .keys__canvas {
        padding: 1rem
    }

    .keys__card {
        border-radius: 1rem
    }
}



/*keys-section*/
.works-section {
    text-align: center;
    padding: 6.25rem 0;
    background-color: #ffffff;
}

@media (max-width: 67.5rem) {
    .works-section {
        padding: 3rem 0;
    }
}

.works-section__wrap {
    position: relative;
    display: grid;
    row-gap: 9rem;
    /* ~144px */
    max-width: 70.563rem;
    /* 1413px */
    margin: 5rem auto 3rem;
}

/* road */
.works-section__road {
    max-width: 35.625rem;
    height: 2462px;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.works-section__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.works-section__path {
    stroke: #3A3A3A;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 8 8;
    fill: none;
    vector-effect: non-scaling-stroke;
}

/* шаг */
.works-section__step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: center;
    text-align: left;
}

.works-section__step--right .works-section__content {
    order: 2;
}

.works-section__step--right .works-section__media {
    order: 1;
}


.works-card {
    max-width: 29.625rem;
    /* 24px */
    padding: 1.25rem 1.5rem 1.25rem 1.9rem;
    /* 20–24px */
    margin-left: 1rem;
}

.works-card__title {
    margin: 0 0 .5rem;
    color: #0080E5;
    /* 40px / 116% */
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 116%;
    /* 46.4px */
    text-transform: capitalize;
}

.works-card__text {
    margin: 0;
    color: #3A3A3A;
    font-size: 1.5rem;
    line-height: 160%;
    text-transform: capitalize;
}

.works-section__media {
    display: grid;
    place-items: start;
}

.works-section__img {
    display: block;
    max-width: 37.5rem;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 0.4rem;
}

.works-section__num {
    --size: 6.75rem;
    /* 108px */
    position: absolute;
    width: var(--size);
    height: var(--size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0080E5;
    color: #fff;
    font-size: 4rem;
    font-weight: 700;
    box-shadow: 0 22px 40px rgba(0, 128, 229, .25);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.num--tl .works-section__num {
    left: 0;
    top: -1.5rem;
    transform: translate(-50%, -50%);
}

.num--ml .works-section__num {
    left: -20px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.num--mr .works-section__num {
    left: 50.5%;
    top: 30px;
    transform: translate(-50%, -50%);
}

.num--bl .works-section__num {
    left: 0;
    bottom: 0;
    transform: translate(-50%, 0);
}

.media-how-2 {
    max-width: 45.25rem;
    position: relative;
    top: -92px;
    left: -94px;
}

.media-how-2 img {
    max-width: 100%;
}

.works-card-how-2 {
    position: relative;
    top: -90px;
    left: 50px;
}

.works-section__step.third-line {
    top: -161px;
}

.works-section__step.fourth-line {
    top: -264px;
}

.works-section__step.fourth-line img {
    max-width: 24.375rem;
    margin: 0 auto;
}

.works-section__step.fifth-line {
    margin-top: -431px;
    padding-left: 40px;
}

.works-section__step.fifth-line img {
    max-width: 27.438rem;
}

.works-m {
    display: none
}

/* ───── adaptive ───── */
@media (max-width: 75rem) {
    .num--tl .works-section__num {
        left: 40px;
    }

    .num--ml .works-section__num {
        left: 40px;
        top: 9%;
    }

    .num--bl .works-section__num {
        left: 40px;
        bottom: 0;
        top: 0;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 67.5rem) {
    .works-section__step.third-line {
        top: -113px;
    }

    .works-section__step.fourth-line {
        top: -194px;
    }

    .works-section__step.fifth-line {
        margin-top: -330px;
        padding-left: 40px;
    }

    .works-card__title {
        font-size: 1.5rem;
    }

}

@media (max-width: 65rem) {
    .works-section__step.third-line {
        top: -45px;
    }

    .works-section__step.fourth-line {
        top: -108px;
        left: 54px;
    }

    .works-section__step.fifth-line {
        margin-top: -189px;
        padding-left: 40px;
    }

    .works-card {
        max-width: 400px;
    }
}

@media (max-width: 61.938rem) {
    .works-section__wrap {
        display: none;
    }

    .works-m {
        display: block;
        max-width: 26.875rem;
        margin: 0 auto 2rem;
    }

    .works-m__head {
        display: flex;
        align-items: center;
        gap: .875rem;
        margin-bottom: 1rem;
        flex-direction: column;
    }

    .works-m__num {
        width: 2.625rem;
        height: 2.625rem;
        font-size: 1.5rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #0080E5;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 16px 32px rgba(0, 128, 229, .25);
        flex: 0 0 auto;
    }

    .works-m__title {
        margin: 0;
        color: #0080E5;
        font-size: 1.75rem;
        line-height: normal;
        /* 26px / 116% */
    }

    .works-m__viewport {
        overflow: hidden;
    }

    .works-m__track {
        display: flex;
        transition: transform .45s cubic-bezier(.2, .7, .2, 1);
        will-change: transform;
    }

    .works-m__slide {
        min-width: 100%;
        opacity: .6;
        transition: opacity .3s ease;
    }

    .works-m__slide.is-active {
        opacity: 1
    }

    .works-m__img {
        display: block;
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: 1rem;
        padding: .75rem;
        margin: 0 auto .75rem;
    }

    .works-m__text {
        margin: 0;
        color: #53657A;
        text-align: center;
        font: 400 1rem/1.6 "Inter", system-ui, sans-serif;
        /* 16/160% */
    }

    .works-m__dots {
        --dot: 0.938rem;
        /* ~12px */
        --gap: .6rem;
        /* ~8px  */
        position: relative;
        display: flex;
        justify-content: center;
        gap: var(--gap);
        padding-block: .25rem;
    }

    .works-m__dot {
        inline-size: var(--dot);
        block-size: var(--dot);
        border-radius: 50%;
        background: #D9E4F2;
        border: 0;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    .works-m__slider {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(var(--dot) * 2);
        height: calc(var(--dot) + .2rem);
        background: #0080E5;
        border-radius: 999px;
        box-shadow: 0 12px 24px rgba(0, 128, 229, .25);
        transform: translate3d(0, -50%, 0);
        transition: transform .45s cubic-bezier(.2, .7, .2, 1);
        z-index: 2;
        pointer-events: none;
    }
}

@media (max-width: 26.875rem) {
    .works-m__title {
        font-size: 1.2rem;
    }
}


/*pricing-section*/
.pricing-section {
    text-align: center;
    padding: 4rem 0;
    background: #FFF;
}

.pricing-section .section-desc {
    max-width: 64.125rem;
    margin: 0 auto 5rem;
}

.pricing-section .container {
    max-width: 113.75rem;
}

.pricing-section .section-desc span {
    color: #0080E5;
}

@media (max-width: 67.5rem) {
    .pricing-section {
        padding: 3rem 0;
    }
}

/* ===== Pricing (BEM) — rem ===== */

.pricing {
    background: #fff;
    /* 1px */
    border-radius: 24px;
    /* 14px */
    box-shadow: 0 13px 55px 0 rgba(0, 0, 0, 0.15);
    /* 0 8px 24px */
    overflow: hidden;
}

.pricing__scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 1rem;
    padding-right: 1rem;
}

.pricing__head {
    display: flex;
    justify-content: space-between;
    /* 320px */
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}

.pricing__head .head-cell-w {
    max-width: 17.5rem;
    width: 100%;
}

.pricing__head .pricing__head-cell:first-child {
    margin-right: auto;
}

.pricing__scroll .btn {
    font-size: 1.75rem;
    margin-top: 1rem;
    text-transform: uppercase;
    padding: 0.875rem 3.125rem;
    font-weight: 700;
    display: inline-flex;
    border-radius: 8px;
    background: #7B848E;
    cursor: pointer;
}

.pricing__head-cell.is-col-hover .btn {
    background: #0080E5;
}

.pricing__head-cell {
    padding: 2rem 0.75rem 1.125rem;
    /* 16px 12px 18px */
    border-left: 0.0625rem solid transparent;
    /* 1px */
    border-bottom: 0.0625rem solid transparent;
    border-top: 4px solid transparent;
    /* 1px */
    background: #fff;
    text-align: center;
}

.pricing__head-cell:first-child {
    border-left: none;
    text-align: left
}

/* Заголовки/цены */
.pricing__plan-name {
    font-size: 3rem;
    font-weight: 800;
    color: #000E19;
}

/* 22px */
.pricing__price {
    margin-top: 1.2rem;
    font-weight: 800;
    font-size: 2.5rem;
    color: #000E19;
}

.pricing__price small {
    font-size: 2rem;
    font-weight: 400
}

.pricing__row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    /* 320px */
    min-height: 4.8rem;
}

.pricing__row.footer-btn .pricing__cell {
    padding: 2.813rem 0;
    min-height: 8rem;
    background-color: #ffffff;
}

.pricing__row.footer-btn .btn.opacity-0 {
    opacity: 0;
    transition: opacity .2s ease;
    background: #0080E5;
}

.pricing:not(.is-hover) .pricing__row.footer-btn [data-col="1"] .btn.opacity-0 {
    opacity: 1;
}

.pricing.is-hover .pricing__row.footer-btn [data-col].is-col-hover .btn.opacity-0 {
    opacity: 1;
}




.pricing__cell {
    /* 52px */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-top: 0.0625rem solid #d9e4f2;
    background: #fff;
    width: 100%;
    min-height: 4.8rem;
    font-size: 1.75rem;
}

.pricing__cell:first-child {
    justify-content: flex-start;
    border-left: none;
    padding: 0.2rem 1rem;
    margin-right: auto;
    text-align: left;
    /* 14px 18px */
}

.pricing__row .pricing__cell:nth-child(2),
.pricing__row .pricing__cell:nth-child(3),
.pricing__row .pricing__cell:nth-child(4),
.pricing__row .pricing__cell:nth-child(5) {
    max-width: 17.5rem;
}


.pricing__row:nth-child(even) .pricing__cell {
    background: #f9fbff
}

.pricing__row--sep .pricing__cell {
    /* 1px */
    background: #fff;
}

.pricing__row--section .pricing__cell {
    background: #fff
}

.pricing__cell--section {
    font-size: 2rem;
    font-weight: 700;
    color: #0080E5;
    text-transform: capitalize;
}

.pricing__badge {
    font-weight: 700;
    font-size: 1.75rem;
    white-space: nowrap;
    color: #27a10d;
}

/* 14px */

.pricing__check {
    width: 2rem;
    height: 2rem;
    /* 22px */
    position: relative;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cg clip-path='url(%23clip0_0_1019)'%3E%3Cpath d='M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z' fill='%2336C003'/%3E%3Cpath d='M8.96002 15.2002L13.12 19.3602L22.4 11.2002' stroke='white' stroke-width='4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_0_1019'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.pricing__row--sep {
    border-top: 1.5px solid #3A3A3A;
}

.pricing.is-hover .pricing__cell[data-col].is-col-hover,
.pricing.is-hover .pricing__head-cell[data-col].is-col-hover {
    box-shadow: 0 14px 30px 0 rgba(0, 128, 229, 0.15);
    background: #C8E6FF;
    /* 3px */
}

.pricing.is-hover .pricing__head-cell[data-col].is-col-hover {
    border-top: 4px solid #0080E5;
    border-right: 1px solid #0080E5;
    border-left: 1px solid #0080E5;
}

.pricing.is-hover .pricing__cell[data-col].is-col-hover {
    border-right: 1px solid #0080E5;
    border-left: 1px solid #0080E5;
}

.pricing:not(.is-hover) .pricing__row.footer-btn [data-col].is-active .btn.opacity-0 {
    opacity: 1;
}

.pricing.is-hover .pricing__row.footer-btn [data-col].is-col-hover {
    border-bottom: 0.0625rem solid #0080E5;
}

@media(max-width: 100rem) {
    .pricing__plan-name {
        font-size: 2rem;
    }

    .pricing__cell--section {
        font-size: 1.5rem;
    }

    .pricing__badge {
        font-size: 1.2rem;
    }

    .pricing__cell {
        font-size: 1.2rem;
    }

    .pricing__head .head-cell-w {
        max-width: 13.75rem;
    }

    .pricing__row .pricing__cell:nth-child(2), .pricing__row .pricing__cell:nth-child(3), .pricing__row .pricing__cell:nth-child(4), .pricing__row .pricing__cell:nth-child(5) {
        max-width: 13.75rem;
    }

    .pricing__head-cell {
        padding: 2rem 0.2rem 1.125rem;
    }

    .pricing__cell {
        padding: 0.75rem 0.2rem;
    }

    .pricing__price {
        font-size: 1.5rem;
    }

    .pricing__scroll .btn {
        font-size: 1rem;
        padding: 0.875rem 2.125rem;
    }
}

@media(max-width: 75rem) {
    .pricing__head .head-cell-w {
        max-width: 10rem;
    }

    .pricing__row .pricing__cell:nth-child(2), .pricing__row .pricing__cell:nth-child(3), .pricing__row .pricing__cell:nth-child(4), .pricing__row .pricing__cell:nth-child(5) {
        max-width: 10rem;
    }

    .pricing__badge {
        font-size: 1rem;
    }
}


.pricing-m {
    display: none;
}

@media (max-width:55.625rem) {

    /* 890px */
    .pricing {
        display: none;
    }

    .pricing-m {
        display: block;
        padding-top: 1rem;
        max-width: 26rem;
        margin: 0 auto;
    }

    .pricing-section .section-desc {
        margin-bottom: 0;
    }

}

.pricing-m__tabs {
    display: flex;
    margin: 0 auto 1rem;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.15);
    z-index: 5;
}

.pricing-m__tab {
    flex: 1 1 auto;
    font-size: 1rem;
    padding: 1.563rem 0.5rem;
    border: 1px solid #d9e4f2;
    background: #fff;
    font-weight: 700;
    color: #7B848E;
}

.pricing-m__tab.is-active {
    background: #0080E5;
    color: #fff;
    border-color: #0080E5;
}

.pricing-m__card {
    border: 1px solid #d9e4f2;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .08);
    margin: 0 auto 1.25rem;
    padding-top: 0.75rem;
    position: relative;
}

.pricing-m__card::before {
    content: "";
    position: absolute;
    top: -0.625rem;
    left: 10%;
    width: 1.75rem;
    height: 1rem;
    transform: translateX(-50%);
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, .06);
    border-radius: 0 0 .125rem .125rem;
}

.pricing-m__card a.btn {
    display: inline-flex;
    background: #36C003;
    padding: 0.75rem 2.5rem;
}

.pricing-m__card .d-flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.pricing-m__pricebox {
    padding: 1rem 1rem 1.25rem;
    text-align: center;
    border-radius: 20px;
    background: rgba(149, 201, 243, 0.20);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.pricing-m__price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .25rem;
    line-height: 1;
    margin-bottom: .75rem;
    color: #0080E5;
}

.pricing-m__currency {
    font-size: 1.5rem;
    font-weight: 400;
    transform: translateY(-1.25rem);
}

.pricing-m__major {
    font-size: 2.75rem;
    font-weight: 800;
}

.pricing-m__cents {
    font-size: 1.25rem;
    font-weight: 400;
    transform: translateY(-.35rem);
}

.pricing-m__period {
    font-size: .9375rem;
    font-weight: 400;
    color: #0080E5;
    transform: translateY(-.1rem);
}

.pricing-m__select {
    display: inline-flex;
    justify-content: center;
    width: 10.5rem;
}

.pricing-m__summary {
    margin: .75rem auto 0;
    max-width: 16rem;
    font-size: 0.875rem;
    color: #7B848E;
    line-height: normal;
}

.pricing-m__title {
    margin: 1rem 1rem .5rem;
    font-weight: 500;
    color: #4F5B68;
}

.pricing-m__list {
    margin: 0 0.4rem 1rem;
    padding: 0;
    list-style: none;
}

.pricing-m__list li {
    padding: .2rem 0;
    font-size: 1rem;
    color: #4F5B68;
    text-align: left;
    gap: 0.5rem;
}

.pricing-m__list li::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0_114_831)'%3E%3Cpath d='M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z' fill='%2336C003'/%3E%3Cpath d='M5.04004 8.55005L7.38004 10.89L12.6 6.30005' stroke='white' stroke-width='2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_114_831'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* Read more */
.pricing-m__panel .pricing-m__card:not(.is-open) .pricing-m__list li:nth-child(n+4) {
    display: none;
}

.pricing-m__more {
    width: 100%;
    border-top: 1px solid #eef3fa;
    padding: .75rem;
    font-weight: 600;
    color: #586d86;
    background: #f9fbff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* панели */
.pricing-m__panel {
    display: none;
}

.pricing-m__panel.is-active {
    display: block;
}

/*offers-section*/

/* ===== Offers (Explore loan offers) ===== */
.offers-section {
    padding: 3rem 0;
    background: #FFF;
}

.offers-section .container {
    max-width: 87.25rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    border-radius: 20px;
    background: #F6F7F9;
    /* 24px */
    padding: 2.813rem;
}

.offers__content {
    flex: 1 1 58%;
}

.offers__title {
    margin: 0 0 1rem;
    font-size: 3rem;
    font-weight: 600;
    color: #000E19;
    white-space: nowrap;
    line-height: 160%;
}

.offers__accent {
    color: #0080E5;
}

.offers__lead {
    margin: 0 0 1rem;
    max-width: 44.188rem;
    font-size: 1.5rem;
    line-height: 166%;
    color: #4F5B68;
}

/* Чек-лист */
.offers__list {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    max-width: 34rem;
}

.offers__list li {
    font-size: 1.5rem;
    position: relative;
    padding-left: 2.5rem;
    color: #000E19;
    line-height: 1.55;
}

.offers__list li+li {
    margin-top: .5rem;
}

.offers__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1rem;
    width: 2.188rem;
    height: 2.188rem;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 30 36' fill='none'%3E%3Cg clip-path='url(%23clip0_0_765)'%3E%3Cmask id='mask0_0_765' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='36'%3E%3Cpath d='M30 0H0V36H30V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_0_765)'%3E%3Cpath d='M30.0001 17.9757C30.0001 15.9431 29.1077 14.0256 27.5939 12.8206C27.7689 10.7931 27.0438 8.80688 25.6063 7.36812C24.1689 5.93187 22.1876 5.20812 20.2601 5.42438C17.7426 2.22938 12.3039 2.16938 9.84512 5.38062C7.81512 5.20062 5.83137 5.92938 4.39386 7.36812C2.95761 8.80563 2.23262 10.7931 2.45012 12.7144C-0.744881 15.2319 -0.806132 20.6706 2.40636 23.1306C2.23137 25.1582 2.95637 27.1443 4.39386 28.5831C5.83137 30.0194 7.81512 30.7457 9.74012 30.5268C12.2576 33.7218 17.6964 33.7818 20.1551 30.5706C22.1801 30.7406 24.1675 30.0219 25.6063 28.5831C27.0426 27.1457 27.7675 25.1582 27.55 23.2368C29.1076 21.9269 30.0001 20.0082 30.0001 17.9757ZM21.9251 16.1831L16.0014 21.8931C14.5476 23.3444 12.1689 23.3319 10.7151 21.8769L7.90011 19.262C7.39512 18.7919 7.36512 18.0006 7.83512 17.4957C8.30637 16.9895 9.09887 16.9619 9.60137 17.4306L12.4489 20.0769C12.9714 20.5982 13.7614 20.5968 14.2489 20.1081L20.1888 14.3819C20.6864 13.9044 21.4776 13.9181 21.9564 14.4144C22.4364 14.9106 22.4214 15.7044 21.9251 16.1831Z' fill='%230080E5'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_0_765'%3E%3Crect width='30' height='36' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.offers__media {
    flex: 1 1 42%;
    position: relative;
    text-align: right;
}

.offers__img {
    height: auto;
    display: block;
    margin-left: auto;
}

.offers__badge {
    position: absolute;
    left: -20%;
    bottom: 12%;
    width: 10.188rem;
    height: 10.188rem;
    border-radius: 50%;
    background: #0080E5;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    transform: rotate(-15deg);
    box-shadow: 0 .75rem 1.75rem rgba(0, 128, 229, .25);
}

.offers__badge em {
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
    line-height: 146%;
}


@media (max-width:90rem) {
    .offers__img {
        max-width: 100%;
    }

    .offers__badge {
        left: -20%;
        bottom: 0;
    }

    .offers__title {
        white-space: inherit;
    }
}

@media (max-width:62rem) {
    .offers-section .container {
        gap: 1.5rem;
    }

    .offers__title {
        font-size: 2rem;
        line-height: normal;
    }

    .offers__lead {
        font-size: 1rem;
        line-height: normal;
    }

    .offers__media,
    .offers__content {
        flex: 1 1 50%;
    }
}

@media (max-width:48rem) {
    .offers-section .container {
        flex-direction: column-reverse;
        text-align: center;
        padding: 1rem;
    }

    .offers-section .offers__badge {
        display: none;
    }

    .offers__content, .offers__media {
        max-width: 25rem;
        flex-basis: auto;
        width: 100%;
    }

    .offers__list li {
        font-size: 1.25rem;
        text-align: left;
    }

    .offers__list li::before {
        top: -5px;
    }
}


/* ===== Secure & Trial ===== */
.secure-section {
    background-color: #ffffff;
    padding: 5rem 0 2rem;
}

.secure__emblem {
    position: relative;
    margin: 0 auto;
    text-align: center;
    margin-top: -60px;
}

.secure__shield {
    position: relative;
    z-index: 1;

}

.trial {
    display: flex;
    justify-content: center;
}

.trial__card {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
    width: 100%;
    max-width: 87.25rem;
    /* ~1024px */
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 4px 140px 0 rgba(0, 0, 0, 0.15);
    padding: 3rem 1rem 3rem 1rem;
    margin-bottom: -12rem;
}

.trial__left {
    max-width: 20.5rem;
    width: 100%;
    text-align: center;
}

.trial__price {
    margin: 0 0 .5rem;
    line-height: 1;
    color: #0080E5;
}

.trial__price-currency {
    font-size: 7.5rem;
    font-weight: 700;
    vertical-align: top;
}

.trial__price-major {
    font-size: 7.5rem;
    font-weight: 700;
}

.trial__sub {
    margin: .5rem auto 1.25rem;
    color: #4F5B68;
    font-size: 1.2rem;
    max-width: 17.875rem;
    font-weight: 500;
    line-height: normal;
}

.trial__btn {
    padding: 0.75rem 2rem;
}

.trial__divider {
    width: .0625rem;
    height: 100%;
    background: linear-gradient(#D9E4F2, #D9E4F2) left/100% 80% no-repeat;
    border-radius: .0625rem;
}

.trial__right {
    max-width: 54rem;
    width: 100%;
}

.trial__headline {
    margin: 0 0 .875rem;
    font-size: 2.2rem;
    color: #000;
    font-weight: 600;
    line-height: normal;
}

.trial__headline span {
    color: #0080E5;
}

.trial__headline strong {
    font-weight: 600;
}

.trial__text {
    max-width: 44rem;
    margin: 0 0 .875rem;
    color: #4F5B68;
    font-size: 2rem;
    font-weight: 500;
    line-height: 160%;
}

.trial__text .trial__link {
    font-weight: 800;
}

.trial__chat {
    margin: 0;
    color: #4F5B68;
}

.trial__link {
    color: #0080E5;
}

.trial__art {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    width: 16rem;
    max-width: 35%;
    pointer-events: none;
}

.trial__art img {
    width: 100%;
    height: auto;
    display: block;
}


@media (max-width: 80rem) {
    .trial__art {
        right: .5rem;
        bottom: .25rem;
        width: 14rem;
        max-width: 11%;
    }
}

@media (max-width: 67.5rem) {
    .secure-section {
        padding: 1rem 0 3rem;
    }

    .secure__emblem img {
        width: 100%;
    }
}

@media (max-width: 48rem) {
    .secure__title {
        font-size: 3rem;
    }

    .trial__card {
        flex-direction: column;
        gap: 1rem;
        padding: 7rem 1rem 2rem;
    }

    .trial__divider {
        display: none;
    }

    .trial__art {
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        margin: .5rem auto 0;
        right: inherit;
        max-width: 120px;
    }

    .trial__left, .trial__right {
        text-align: center;
    }

    .trial__text,
    .trial__headline {
        font-size: 1.5rem;
    }

    .trial__headline strong {
        display: block;
    }
}

@media (max-width: 26.875rem) {

    .trial__text,
    .trial__headline {
        font-size: 1rem;
    }
}

/* ====== LEGAL (BEM, rem) ====== */
.legal {
    padding-top: 17rem;
}


.legal__title {
    margin: 0 0 2rem;
    text-align: center;
    font-size: 3rem;
    font-weight: 400;
    color: #000E19;

}

.legal__brand-bold {
    font-weight: 800
}

.legal__lead {
    max-width: 80.25rem;
    margin: 0 auto 1.75rem;
    text-align: center;
    color: #4F5B68;
    font-size: 1.25rem;
    line-height: 157%;
    font-weight: 500;
}

.legal__nav {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    margin: 0 0 1.25rem;
    border-bottom: 0.0625rem solid #3A3A3A;
    border-top: 0.0625rem solid #3A3A3A;
}

.legal__nav-link {
    font-size: 1.5rem;
    position: relative;
    text-decoration: none;
    color: #3A3A3A;
    font-weight: 500;
    line-height: 205%;
}


.legal__nav-link:hover {
    color: #0080E5
}

.legal__nav-link:hover::after {
    background: #0080E5
}

.legal__content {
    color: #4F5B68;
    font-size: 1.25rem;
    line-height: 157%;
    font-weight: 500;
}

.legal__content p {
    margin: 0 0 1rem;
}

.legal__subtitle {
    margin: 3rem 0;
    font-size: 1.5rem;
    color: #3A3A3A;
}

.legal__disclosures {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 0.5rem;
}

.legal__disc {
    padding: 1.25rem 1rem 1.5rem;
    border-right: 1px solid #3A3A3A;
    min-height: 10.5rem
}

.legal__disc:last-child {
    border-right: none
}

.legal__disc-title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
    line-height: 157%;
    color: #4F5B68;
}

.legal__disc-text {
    margin: 0;
    color: #4F5B68;
    font-size: 1.25rem;
    line-height: 157%;
}

.legal__footer .container {
    max-width: 98.563rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 0.0625rem solid #3A3A3A;
    padding-bottom: 2rem;
}

.legal__copy {
    color: #4F5B68;
    font-size: 1.5rem
}

.legal__brands {
    display: flex;
    align-items: center;
    gap: 1rem
}

.legal__brand {
    height: 1.25rem;
    display: block
}

.legal__brand.visa {
    width: 3.2rem
}

.legal__brand.mc {
    width: 3rem
}



@media (max-width:62rem) {
    .legal {
        padding-top: 13rem;
    }

    .legal__disclosures {
        grid-template-columns: repeat(2, 1fr)
    }

    .legal__disc:nth-child(2) {
        border-right: none
    }

    .legal__disc:nth-child(4) {
        border-right: none
    }
}

@media (max-width: 48rem) {
    .legal__title {
        font-size: 2rem;
    }

    .legal__nav-link {
        font-size: 1.25rem;
    }

    .legal__lead {
        font-size: 1rem;
        line-height: 157%;
    }

    .legal__content {
        font-size: 1rem;
        line-height: 157%;
    }

    .legal__disc-text {
        font-size: 1rem;
        line-height: 157%;
    }

    .legal__disc-title {
        font-size: 1.125rem;
    }

    .legal__disc {
        padding: 1rem;
    }

    .legal__copy {
        font-size: 1rem;
    }
}

@media (max-width:36rem) {
    .legal__inner {
        padding: 2rem 1rem
    }

    .legal__disclosures {
        grid-template-columns: 1fr
    }

    .legal__disc {
        border-right: none;
        padding-left: 0;
    }

    .legal__disc:last-child {
        border-bottom: none
    }

    .legal__footer {
        flex-direction: column;
        align-items: flex-start
    }

    .legal__brands {
        display: none;
    }

    .legal__footer .container {
        justify-content: center;
    }
}