.integration_hero {
    position: relative;
    background:
        linear-gradient(90deg, rgba(4, 44, 66, 0.97), rgba(0, 100, 145, 0.88)),
        url("res/img/banner_1.png") center / cover no-repeat;
}

.integration_hero::after {
    position: absolute;
    right: 7%;
    bottom: -1px;
    width: 310px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 0;
    content: "";
    clip-path: polygon(0 42%, 50% 0, 100% 42%, 100% 100%, 0 100%);
}

.integration_hero .page_hero_inner {
    position: relative;
    z-index: 1;
}

.integration_hero_actions {
    margin-top: 34px;
}

.integration_hero .button_primary {
    background: #0092c7;
}

.si_services {
    background: #ffffff;
}

.service_steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.service_step {
    min-height: 340px;
    box-sizing: border-box;
    padding: 30px;
    border: 1px solid #dbe6eb;
    border-radius: 10px;
    background: #f8fbfc;
}

.service_step_header {
    display: flex;
    margin-bottom: 42px;
    align-items: flex-start;
    justify-content: space-between;
}

.service_step_header span {
    color: #1685b4;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.1em;
}

.service_step_header img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    opacity: 0.72;
}

.service_step h3 {
    margin: 0 0 14px;
    color: #12394e;
    font-size: 1.4rem;
}

.service_step p {
    margin: 0;
    color: #536572;
    line-height: 1.62;
}

.si_platform {
    overflow: hidden;
    background: #062f46;
    color: #ffffff;
}

.si_platform_inner {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 86px;
    align-items: center;
}

.ha_mark {
    position: relative;
    display: flex;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(135, 220, 250, 0.3);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0, 153, 211, 0.26), transparent 70%);
}

.ha_mark::before,
.ha_mark::after {
    position: absolute;
    border: 1px solid rgba(135, 220, 250, 0.11);
    border-radius: 50%;
    content: "";
}

.ha_mark::before {
    inset: -34px;
}

.ha_mark::after {
    inset: -68px;
}

.ha_mark span {
    color: #76daf9;
    font-size: 4.7rem;
    font-weight: 780;
    letter-spacing: -0.06em;
}

.ha_mark small {
    margin-left: 12px;
    color: #dceef5;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.05;
}

.si_platform .eyebrow {
    color: #c4d9e2;
}

.si_platform h2 {
    margin: 0 0 24px;
    font-size: clamp(2.2rem, 4.7vw, 4.2rem);
    font-weight: 100;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.si_platform p {
    max-width: 760px;
    margin: 0 0 18px;
    color: #bed4df;
    line-height: 1.7;
}

.si_platform .si_platform_lead {
    color: #ffffff;
    font-size: 1.22rem;
    font-weight: 540;
}

.si_scope {
    background: #eef4f7;
}

.scope_grid {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
}

.scope_grid li {
    position: relative;
    padding: 20px 24px 20px 57px;
    border: 1px solid #d7e4e9;
    border-radius: 7px;
    background: #ffffff;
    color: #173c50;
    font-size: 1.05rem;
    font-weight: 620;
}

.scope_grid li::before {
    position: absolute;
    top: 50%;
    left: 23px;
    width: 18px;
    height: 18px;
    border: 2px solid #1b8dbc;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
}

.scope_grid li::after {
    position: absolute;
    top: 50%;
    left: 30px;
    width: 6px;
    height: 3px;
    border-bottom: 2px solid #1b8dbc;
    border-left: 2px solid #1b8dbc;
    content: "";
    transform: translateY(-65%) rotate(-45deg);
}

.si_projects {
    background: #ffffff;
}

.si_projects_inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: 90px;
    align-items: center;
}

.si_projects_visual {
    position: relative;
    height: 290px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(145deg, #e7f4f9, #cde8f3);
}

.building_line {
    position: absolute;
    bottom: 0;
    border: 3px solid #137da9;
    border-bottom: 0;
    opacity: 0.72;
}

.building_line_one {
    left: 12%;
    width: 44%;
    height: 56%;
    clip-path: polygon(0 35%, 50% 0, 100% 35%, 100% 100%, 0 100%);
}

.building_line_two {
    right: 12%;
    width: 37%;
    height: 76%;
    clip-path: polygon(0 28%, 50% 0, 100% 28%, 100% 100%, 0 100%);
}

.building_line_three {
    left: 45%;
    width: 3px;
    height: 100%;
    border: 0;
    background: repeating-linear-gradient(to bottom, #137da9 0 7px, transparent 7px 15px);
}

.si_projects h2 {
    margin: 0 0 20px;
    color: #153c50;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.si_projects p {
    margin: 0;
    color: #536572;
    font-size: 1.12rem;
    line-height: 1.7;
}

@media screen and (max-width: 1040px) {
    .service_steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service_step {
        min-height: 300px;
    }
}

@media screen and (max-width: 780px) {
    .si_platform_inner,
    .si_projects_inner {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .ha_mark {
        width: 210px;
        height: 210px;
        margin: 24px auto;
    }

    .scope_grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 560px) {
    .service_steps {
        grid-template-columns: 1fr;
    }

    .service_step {
        min-height: 0;
    }
}