@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --scrollTop: 0px;
    --lim: 600px;
    --vx: 0.6;
    --vy: 0.0005;
}

html {
    overflow-x: hidden;
}

body {
    background: linear-gradient(0deg, #FFFFFF 7.02%, #CEEBFF 22.16%, #CEEBFF 74.46%, #FFFFFF 100%);
    backdrop-filter: blur(200px);
    position: relative;


}

.container {
    padding: 0 !important;
}

nav {
    position: sticky !important;
    top: 0;
    right: 0;
    z-index: 9999;
}

.logo {
    width: 54px;
    display: none;
}

.custom-toggler .navbar-toggler-icon {
    display: none;
}

.custom-toggler .icon-close {
    display: none;
}

.custom-toggler[aria-expanded="true"] .icon-burger {
    display: none;
}

.custom-toggler[aria-expanded="true"] .icon-close {
    display: inline-block;
}

.navbar-toggler {
    border: none !important;
    z-index: 9999;
}


.navbar-toggler:focus {
    box-shadow: none !important;
}

.navbar-collapse.show {
    background: url(../img/burger-bg.png) center/cover no-repeat;
    margin-top: -4.5rem;
    padding-top: 4.5rem;
    min-height: calc(100vh + 4.5rem);
    position: absolute;
    top: 0rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9990;
}

.navbar-nav {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 46px;
}

.nav-link {
    font-family: "Fira Sans";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #2E506A;
    padding: 0 !important;
    position: relative;
    display: inline-block;
}

.nav-link:hover {
    border-bottom: none;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 42px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    opacity: 1;
}

.hero {
    min-height: calc(100vh + 4.5rem);
    position: relative;
    margin-top: -4.5rem;
}

.hero .content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 4;
    padding-top: 4.5rem;
    min-height: 100vh;
    width: 100%;
}

.hero .content img {
    width: 128px;
    transform-origin: center top;
    transform: scale(clamp(0.6, calc(1 - (var(--scrollTop) / 300px) * 0.8), 1));
    transition: var(--transition);
    will-change: transform;
}

.content {
    will-change: transform;
}

.hero .layer__base {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate3d(0, calc(var(--scrollTop) / 1.3), 0);
    will-change: transform, opacity;
}

body.about-in-view .hero .layer__base {
    opacity: calc(1 - (clamp(0px, calc(var(--scrollTop) - 700px), 900px) / 900px));
    transition: none;
}

.hero .layer__base img {
    min-height: 100vh;
    position: absolute;
    left: 30%;
    top: 0;
    transform:
        translateX(-50%) scale(clamp(1,
                calc(1.3 - (min(var(--scrollTop, 0px), 600px) / 600px) * 0.3),
                1.3));
    will-change: transform;
}

.hero .layer__middle {
    z-index: 3;
    position: absolute;
    overflow-x: hidden;
    top: 30vh;
    right: 0;
    width: 100%;
    height: 100%;

}

.hero .layer__middle img {
    width: 200%;
    right: -40%;
    transform: translate3d(calc(-1 * min(var(--scrollTop, 0px), var(--lim)) * var(--vx)),
            calc(-1 * min(var(--scrollTop, 0px), var(--lim)) * var(--vy)),
            0);
    will-change: transform;
}


.hero .layer__bottom {
    z-index: 2;
    position: absolute;
    overflow-x: hidden;
    bottom: -70%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate3d(0, calc(var(--scrollTop) / 1.4), 0);
    will-change: transform, opacity, bottom;
    transition: none;
}


.hero .layer__bottom img {
    width: 200%;
    height: 100%;
    left: -40%;
    transform: translateX(-50%);
}


.about {
    background: url(../img/aboutright.png) top right no-repeat;
    min-height: 100vh;
}

.about .cont {
    position: absolute;
    z-index: 4;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about .cont h1 {
    font-family: "Raleway";
    font-weight: 400;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 2%;
    text-align: center;
    color: #2E506A;
    margin-bottom: 24px;
}

.about .about-content__text {
    padding: 0px 16px;

}

.about .about-content__text h2 {
    font-family: "Inter";
    font-weight: 900;
    font-style: Black;
    color: #2E506A;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    margin-bottom: 22px;
}

.about .about-content__text p {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    color: #2E506A;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: center;

}

.about .counter {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.about .counter .counter-elem .count {
    font-family: "Inter";
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 40px;
    background: linear-gradient(90deg, #6464B9 0%, #4986A4 85.58%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 4px;
}

.about .counter .counter-elem .text {
    font-family: "Inter";
    background: #000000CC;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;

}

.about .buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 38px;
}

.about .buttons .blue-btn,
.candidats .button,
.job .button,
.job-tab-panels .button,
form button {
    background: linear-gradient(90deg, #6193FF 0%, #7AD2FF 85.58%);
    border-radius: 16px;
    border: none;
    padding: 12px;
    text-align: center;
    font-family: "Raleway";
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    color: #000000;
    text-decoration: none;
    width: 232px;
    pointer-events: auto;
    cursor: pointer;
}

.about .buttons .blue-btn:hover,
.about .buttons .white-btn:hover,
.candidats .button:hover,
.job .button:hover,
.job-tab-panels .button:hover,
form button:hover,
.job-tabs .content .top .toForm:hover {
    background-image: url(../img/hero-bottom.png), linear-gradient(0deg, #B6CADE, #E0ECF8);
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 50%, center;
    background-size: 200% 200%, cover;
    transition: border-color .2s ease, box-shadow .2s ease;
    animation: bg-orbit 2.2s linear infinite;
    border: 1px solid #0000001A;
}

@keyframes bg-orbit {
    0% {
        background-position: 55% 49%;
    }

    25% {
        background-position: 51% 50%;
    }

    50% {
        background-position: 45% 51%;
    }

    75% {
        background-position: 51% 50%;
    }

    100% {
        background-position: 55% 49%;
    }
}

.about .buttons .white-btn {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #0000001A;
    padding: 12px;
    text-align: center;
    font-family: "Raleway";
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    color: #000000;
    text-decoration: none;
    width: 232px;
    pointer-events: auto;
}

.counter .count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum"1;
}

.bg {
    min-height: 60vh;
    width: 100%;
    position: relative;
    margin-top: -50px;
    padding-top: 50px;
}

.bg .content {
    background: url(../img/hero-right.png)center/contain no-repeat;
    min-height: 60vh;
}


.bg .layers .layer-top {
    position: absolute;
    z-index: 2;
    overflow-x: hidden;
    top: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}




.bg .layers .layer-top img {
    width: 300%;
    transform: translate3d(-40%, -10px, 0);
}

.bg .layers .layer-middle {
    position: absolute;
    z-index: 2;
    overflow-x: hidden;
    top: 0;

}

.bg .layers .layer-middle img {
    width: 300%;
}

.bg .layers .layer-bottom {
    position: absolute;
    z-index: 3;
    overflow-x: hidden;
    bottom: -90%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.bg .layers .layer-bottom img {
    width: 320%;
    transform: translate3d(-40%, 0, 0);
}

body[data-section="candidats"] .bg .layers .layer-bottom {
    --delta: calc(var(--scrollTop, 0px) - var(--sectionScrollStart, 0px));
    --d-fast: clamp(0px, var(--delta), 200px);
    --d-rest: max(0px, calc(var(--delta) - 200px));
    transform: translate3d(0, calc(var(--d-fast) * 1.4 + var(--d-rest)), 0);
    will-change: transform;
}

.bg .layers .layer-bottom3 {
    position: absolute;
    z-index: 3;
    overflow-x: hidden;
    top: 0%;
    transform: translate3d(0, calc(max(0px, var(--scrollTop) - 1200px) / 1.3), 0);
    will-change: transform;
}

.bg .layers .layer-bottom3 img {
    width: 300%;
    transform: translate3d(-20%, 0, 0);
}

.bg .layers .layer-mauntin {
    position: absolute;
    z-index: 3;
    /* overflow: hidden; */
    height: 100vh;
    --candDelta: clamp(0px, calc(var(--scrollTop, 0px) - var(--candStart, 0px)), var(--candLen, 0px));
    --candFast: clamp(0px, var(--candDelta), 400px);
    --candRest: max(0px, calc(var(--candDelta) - 400px));
    --candY: calc(var(--candFast) * 1.2 + var(--candRest));
    --jobDelta: clamp(0px, calc(var(--scrollTop, 0px) - var(--jobStart, 0px)), var(--jobLen, 0px));
    --jobFast: clamp(0px, var(--jobDelta), 20px);
    --jobRest: max(0px, calc(var(--jobDelta) - 20px));
    --jobD: calc(var(--jobFast) * 1.6 + var(--jobRest));
    transform: translate3d(0, calc(var(--candY) + var(--jobD)), 0);
    will-change: transform;
}

.bg .layers .layer-mauntin img {
    width: 100%;
    height: auto;
    --exitStart: calc(var(--jobLen) - (var(--vh) * 1));
    --tail: clamp(0px, calc(var(--jobDelta) - var(--exitStart)), calc(var(--vh) * 1));
    transform: translate3d(calc(30% - var(--jobD) * 0.45 - var(--tail) * 0.60),
            calc(var(--jobD) * 0.25 + var(--tail) * 1.20),
            0);
    will-change: transform;
}


.bg .layers .layer-bottom2 img {
    width: 420%;
    transform: translate3d(-40%, 0, 0);
}

.bg .layers .layer-bottom2 {
    position: absolute;
    z-index: 2;
    overflow-x: hidden;
    bottom: -70%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

body[data-section="candidats"] .bg .layers .layer-bottom2 {
    --delta: calc(var(--scrollTop, 0px) - var(--sectionScrollStart, 0px));
    --d-fast: clamp(0px, var(--delta), 200px);
    --d-rest: max(0px, calc(var(--delta) - 200px));
    transform: translate3d(0, calc(var(--d-fast) * 0.5 + var(--d-rest)), 0);
    will-change: transform;
}




.candidats {
    margin-top: 100px;
    min-height: 280vh;
}

.candidats .content {
    padding: 40px 16px;
    z-index: 4;
    position: absolute;
}

.candidats .left {
    min-height: 100vh;
}

.candidats .left h2 {
    font-family: "Raleway";
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #2E506A;
    margin-bottom: 16px;
}

.candidats .left .points {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2E506A;
}

.candidats .left .tegs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.candidats .left .tegs__item {
    background: #0000000D;
    border: 1px solid #0000001A;
    padding: 7px 12px;
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    vertical-align: middle;
    border-radius: 999px;
}

.candidats .left .tegs__item p {
    margin-bottom: 0;
}

.candidats .right {
    border: 1px solid #0000001A;
    border-radius: 20px;
    backdrop-filter: blur(16px);
    padding: 32px 16px;
}

.candidats .right h2 {
    font-family: "Inter";
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 30px;
    vertical-align: middle;
    color: #2E506A;
    margin-bottom: 16px;
}

.candidats .right .vac-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.candidats .right .vac-list__item h3 {
    font-family: "Inter";
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #000000;
}

.candidats .right .vac-list__item li {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    color: #000000BF;

}

.candidats .button {
    margin-top: 24px;
}

.job {
    min-height: 120vh;

}

.job .content {
    padding: 40px 16px;
    z-index: 5;
    position: absolute;
}

.job .left h2 {
    font-family: "Raleway";
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #2E506A;
    margin-bottom: 11px;
}

.job .left .points {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2E506A;
}

.job .right {
    border: 1px solid #0000001A;
    border-radius: 20px;
    backdrop-filter: blur(16px);
    padding: 32px 16px;
}

.job .right h2 {
    font-family: "Inter";
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 30px;
    vertical-align: middle;
    color: #2E506A;
    margin-bottom: 16px;
}

.job .right .tegs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.job .right .tegs__item {
    background: #0000000D;
    border: 1px solid #0000001A;
    padding: 7px 12px;
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    vertical-align: middle;
    border-radius: 999px;
}

.job .right .tegs__item p {
    margin-bottom: 0;
}

.job .right .small {
    font-family: "Inter";
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    background: #000000B2;
    margin-top: 18px;
    margin-bottom: 18px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job .left,
.job .right {
    position: relative;
}

.job .right .tegs__item {
    opacity: 0;
    top: -12px;
    position: relative;
}

.bg2 {
    min-height: 10vh;
    width: 100%;
    position: relative;
    margin-top: -50px;
    padding-top: 50px;
    --d: max(0px, calc(var(--scrollTop, 0px) - 3000px));
}

.bg2 .layer-storm {
    position: absolute;
    z-index: 0;
    overflow-x: hidden;
    top: -100vh;
    transform: translate3d(0, calc(var(--d) * 0.58), 0);
    will-change: transform;
}

.bg2 .layer-storm img {
    width: 100%;
    min-width: 100vw;
}

.bg2 .layer-top {
    position: absolute;
    z-index: 2;
    top: -160vh;
    overflow-x: hidden;
    min-height: 50vh;
    transform: translate3d(0, calc(var(--d) * 0.62), 0);
    will-change: transform;
}

.bg2 .layer-top img {
    width: 400%;
    height: 100%;
    transform: translate3d(-30%, 0, 0);
}

.bg2 .layer-top2 {
    position: absolute;
    z-index: 2;
    top: calc(-100vh - 340px);
    overflow-x: hidden;
    min-height: 30vh;
    transform: translate3d(0, calc(var(--d) * -0.7), 0);
    will-change: transform;
}

.bg2 .layer-top2 img {
    width: 600%;
    height: 100%;
    transform: translate3d(-40%, 0, 0);
}

.bg2 .layer-top3 {
    position: absolute;
    z-index: 2;
    top: -30vh;
    overflow-x: hidden;
    transform: translate3d(0, calc(var(--d) * -0.4), 0);
    min-height: 60vh;
}

.bg2 .layer-top3 img {
    width: 300%;
    height: 100%;
    transform: translate3d(-40%, 0, 0);
}

.bg2 .layer-middle {
    position: absolute;
    z-index: 3;
    top: 20vh;
    left: 0;
    width: 100%;
    height: 40vh;
    overflow-x: hidden;
    will-change: transform;
}

.layer-middle-active .bg2 .layer-middle {
    --t: var(--midT, 0);
    --seg: 0.333333;
    --t1: clamp(0, var(--t), var(--seg));
    --t2: clamp(0, calc(var(--t) - var(--seg)), var(--seg));
    --t3: clamp(0, calc(var(--t) - var(--seg) - var(--seg)), var(--seg));
    --n1: calc(var(--t1) * 3);
    --n2: calc(var(--t2) * 3);
    --n3: calc(var(--t3) * 3);
    --Y: calc(300px * ((-1.00 * var(--n1)) + (1.30 * var(--n2)) + (1.00 * var(--n3))));
    transform: translate3d(0, var(--Y), 0);
}

.bg2 .layer-middle .layer-middle__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260vw;
    height: 60vh;
    transform-origin: 50% 50%;
    will-change: transform;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.layer-middle-active .bg2 .layer-middle .layer-middle__img {
    --imgX: calc(300px * ((-0.20 * var(--n1)) + (0.30 * var(--n2)) + (-0.40 * var(--n3))));
    --imgRot: calc((60deg * var(--n2)) + (-180deg * var(--n3)));
    transform:
        translate3d(calc(-50% + var(--imgX)), -50%, 0) rotate(var(--imgRot)) scale(1.05);
}

.bg2 .layer-middle {
    position: absolute;
    z-index: 3;
    top: 20vh;
    overflow-x: hidden;
    height: 60vh;

}

.bg2 .layer-middle img {
    width: 300%;
    min-height: 400px;
    transform: translate3d(-60%, 0, 0);
}

.bg2 .layer-middle {
    --d: max(0px, calc(var(--scrollTop, 0px) - var(--midStart, 0px)));
    transform: translate3d(0, var(--d), 0);
}

.bg2 .layer-middle img {
    --seg: var(--vh, 100vh);
    --s1: clamp(0px, var(--d), var(--seg));
    --s2: clamp(0px, calc(var(--d) - var(--seg)), var(--seg));
    --s3: clamp(0px, calc(var(--d) - calc(var(--seg) * 2)), var(--seg));
    --n1: calc(var(--s1) / var(--seg));
    --n2: calc(var(--s2) / var(--seg));
    --n3: calc(var(--s3) / var(--seg));
    --imgX: calc((80px * var(--n1)) + (-160px * var(--n2)) + (-160px * var(--n3)));
    --imgRot: calc((20deg * var(--n1)) + (-20deg * var(--n2)) + (-20deg * var(--n3)));
    transform:
        translate3d(calc(-60% + var(--imgX)), 0, 0) rotate(var(--imgRot));
}

.bg2 .layer-middle2 {
    position: absolute;
    z-index: 2;
    top: -20vh;
    overflow-x: hidden;
    --d2: max(0px, calc(var(--scrollTop, 0px) - var(--mid2Start, 0px)));
    transform: translate3d(0, var(--d2), 0);
    will-change: transform;
}

.bg2 .layer-middle2 img {
    width: 200%;
    transform: translateX(-40%);
}

.bg2 .layer-bottom {
    position: absolute;
    z-index: 3;
    top: -10vh;
    height: 60vh;
    overflow: hidden;
    --d: max(0px, calc(var(--scrollTop, 0px) - var(--midStart, 0px)));
    transform: translate3d(0, var(--d), 0);
    will-change: transform;
}

.bg2 .layer-bottom img {
    width: 200%;
    --xShift: calc(min(var(--d), 1200px) * 0.1);
    transform:
        translate3d(calc(-20% - var(--xShift)),
            40%,
            0) rotate(20deg);
    will-change: transform;
}

.bg2 .layer-bottom2 {
    position: absolute;
    z-index: 3;
    top: 30vh;
    height: 80vh;
    overflow: hidden;
    --d: max(0px, calc(var(--scrollTop, 0px) - var(--midStart, 0px)));
    transform: translate3d(0, var(--d), 0);
    will-change: transform;
}

.bg2 .layer-bottom2 img {
    width: 400%;
    transform-origin: 50% 50%;
    will-change: transform;
    --seg: var(--vh, 100vh);
    --s1: clamp(0px, var(--d), var(--seg));
    --s2: clamp(0px, calc(var(--d) - var(--seg)), var(--seg));
    --s3: clamp(0px, calc(var(--d) - (var(--seg) * 2)), var(--seg));
    --n1: calc(var(--s1) / var(--seg));
    --n2: calc(var(--s2) / var(--seg));
    --n3: calc(var(--s3) / var(--seg));
    --A: 120px;
    --B: 220px;
    --imgX: calc((-1 * var(--A) * var(--n1)) + (var(--B) * var(--n2)) + (0px * var(--n3)));
    --rotHold: min(1, calc(var(--n1) + var(--n2)));
    --imgRot: calc((-10deg * var(--rotHold)) + (20deg * var(--n3)));
    transform:
        translate3d(calc(-40% + var(--imgX)), 0, 0) rotate(var(--imgRot));
}

.bg2 .layer-bottom3 {
    position: absolute;
    z-index: 3;
    top: 40vh;
    height: 40vh;
    overflow: hidden;
    --d3: max(0px, calc(var(--scrollTop, 0px) - var(--bot3Start, 0px)));
    transform: translate3d(0, calc(var(--d3) * 1.5), 0);
    will-change: transform;
    width: 100%;
}

.bg2 .layer-bottom3 img {
    width: 300%;
    height: 200px;
    transform: translateX(-10%);
    pointer-events: none;
}

.job-tabs {
    min-height: 160vh;
}

.job-tabs .content {
    position: absolute;
    z-index: 5;
    padding: 40px 16px;
}

.job-tabs .content .top h2 {
    font-family: "Raleway";
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #2E506A;
}

.job-tabs .content .job-tabs-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 40px;
}

.job-tabs .content .job-tabs-buttons .tab {
    background: #0000000D;
    border: 1px solid #0000001A;
    padding: 7px 12px;
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    vertical-align: middle;
    border-radius: 999px;
    cursor: pointer;
}

.job-tabs .content .job-tabs-buttons .tab.active {
    background: linear-gradient(90deg, #6193FF 0%, #7AD2FF 85.58%);
    border: 1px solid #0000001A;
}

.job-tab-panels {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.job-tab-panels .panel {
    display: none;
    border: 1px solid #0000001A;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    padding: 24px;
}

.job-tab-panels .panel .title {
    font-family: "Inter";
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    vertical-align: middle;
    background: #000000BF;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.job-tab-panels .panel .job-title {
    font-family: "Inter";
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    color: #000;
    margin-bottom: 12px;
}

.job-tab-panels .panel .tegs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.job-tab-panels .panel .tegs .teg {
    background: #0000000D;
    border: 1px solid #0000001A;
    padding: 7px 12px;
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    vertical-align: middle;
    border-radius: 999px;
}

.garanty {
    min-height: 100vh;

}

.garanty .content {
    position: absolute;
    z-index: 5;
    width: 100%;
    padding: 40px 16px;
}

.garanty .content h2 {
    font-family: "Raleway";
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #2E506A;
    margin-bottom: 16px;
}

.garanty .content p {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-bottom: 24px;
}

.garanty .content .points {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.garanty .content .points .point {
    border: 1px solid #0000001A;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    padding: 28px 24px;
}

.garanty .content .points .point h3 {
    background: #2E506A;
    font-family: "Inter";
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}

.garanty .content .points .point p {
    font-family: "Inter";
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    vertical-align: middle;
    background: #000000BF;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact {
    min-height: 160vh;
    position: relative;
}

.contact .contact-bg {
    position: absolute;
    z-index: 0;
    top: 0vh;
    overflow-x: hidden;
}

.contact .contact-bg img {
    width: 100vw;
}

.contact .layer-bottom {
    position: absolute;
    z-index: 1;
    top: -100px;
    overflow-x: hidden;
}

.contact .layer-bottom img {
    width: 300%;
    height: 200px;
    transform: translateX(-10%);
    pointer-events: none;
}


.contact {
    --contactDelta: max(0px, calc(var(--scrollTop, 0px) - var(--contactStart, 0px)));
}

.contact .contact-bg {
    transform: translate3d(0, calc(var(--contactDelta) * 1.1), 0);
    will-change: transform;
}

.contact .layer-bottom {
    transform: translate3d(0, var(--contactDelta), 0);
    will-change: transform;
    width: 100%;
}

.contact .content {
    position: absolute;
    z-index: 5;
    width: 100%;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact .content .contact-text h2 {
    font-family: "Raleway";
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #2E506A;
    margin-bottom: 16px;
}

.contact .content .contact-text p {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    color: #2E506A;
    margin-bottom: 0px;
}

.contact .content .contact-text a {
    color: #2E506A;

}

.contact .content .form-section {
    border: 1px solid #0000001A;
    border-radius: 20px;
    backdrop-filter: blur(16px);
    padding: 32px 24px;
}

.form-section .buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 32px auto;
}

.form-section .buttons .button {
    background: #0000000D;
    border: 1px solid #0000001A;
    padding: 8px 12px;
    font-family: "Raleway";
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    border-radius: 14px;
    width: 180px;
    text-align: center;
    cursor: pointer;
}

.form-section .buttons .button.active {
    background: linear-gradient(90deg, #6194FF 0%, #7AD2FF 100%);
    border: 1px solid linear-gradient(90deg, #6194FF 0%, #7AD2FF 100%);
}

.form-section .forms form {
    display: none;
    position: relative;
    flex-direction: column;
    margin-top: 40px;
    gap: 12px;
}

.form-section .forms form .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-section .forms form button {
    margin: 0 auto;
}

.form-section .forms form .form-field span {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    color: #000;
}

.form-section .forms form .form-field input,
.form-section .forms form .form-field textarea {
    border: 1px solid #0000001A;
    border-radius: 12px;
    padding: 14px;
    font-family: "Arial";
    font-weight: 400;
    font-size: 13.3px;
    line-height: 100%;
    vertical-align: middle;

}

.form-section .forms form .form-field input::placeholder,
.form-section .forms form .form-field textarea::placeholder {
    background: #00000080;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.contact .contact-text,
section.contact .form-section {
    position: relative;
    opacity: 0;
    will-change: transform, opacity, top;
}

section.contact .contact-text {
    top: 40px;
    z-index: 1;
}

section.contact .form-section {
    top: -40px;
    z-index: 2;
}

.footer {
    margin-top: 100px;
    padding-bottom: 100px;
    text-align: center;
    font-family: "Inter";
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    text-align: center;

}

.switch-slide {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 220ms linear, transform 220ms ease-out;
    will-change: transform, opacity;
}

.switch-slide.in {
    opacity: 1;
    transform: translateX(0);
}



@media (max-width: 991px) {
    body[data-section="bg"] .bg .layers .layer-top {
        --d: clamp(0px, calc(var(--scrollTop, 0px) - var(--sectionScrollStart, 0px)), 800px);
        transform: translate3d(0, calc(var(--d) * 0.9), 0);
    }
}

@media (min-width:550px) {
    .hero .layer__base img {
        left: 40%;
    }

    .hero .layer__middle {
        overflow: hidden;
    }

    .bg2 .layer-middle2,
    .bg2 .layer-middle,
    .bg2 .layer-bottom3,
    .bg2 .layer-bottom,
    .bg2 .layer-bottom2 {
        height: 100vh;
        overflow: hidden;
    }

    .contact .layer-bottom {
        width: 100%;
    }

    .about {
        min-height: 60vh;
    }

    .about .cont {
        min-height: 60vh;
    }

    .bg {
        min-height: 20vh;
        top: -250px;
    }

    .candidats {
        min-height: 140vh;
        margin-top: 0;
    }

    .candidats .left {
        min-height: 40vh;
    }

    .bg .layers .layer-mauntin {
        height: 100vh;
        --candDelta: clamp(0px, calc(var(--scrollTop, 0px) - var(--candStart, 0px)), var(--candLen, 0px));
        --candFast: clamp(0px, var(--candDelta), 100px);
        --candRest: max(0px, calc(var(--candDelta) - 100px));
        --candY: calc(var(--candFast) * 1.9 + var(--candRest));
        --jobDelta: clamp(0px, calc(var(--scrollTop, 0px) - var(--jobStart, 0px)), var(--jobLen, 0px));
        --jobFast: clamp(0px, var(--jobDelta), 20px);
        --jobRest: max(0px, calc(var(--jobDelta) - 20px));
        --jobD: calc(var(--jobFast) * 1.4 + var(--jobRest));
        transform: translate3d(0,
                calc(var(--candY) + var(--jobD) * 1),
                0);
        will-change: transform;
    }

    .bg2 .layer-bottom3 {
        display: none;
    }

    .bg2 .layer-storm {
        top: -100vh;
    }

    .bg2 .layer-top2 {
        top: calc(-100vh - 340px);
    }

    .bg2 .layer-middle {
        height: unset;
    }

    .bg2 .layer-middle img {
        --seg: var(--vh, 100vh);
    }

    .bg2 .layer-bottom2 {
        height: unset;
    }

    .bg2 .layer-bottom2 img {
        --seg: var(--vh, 100vh);
    }

    .job {
        min-height: 80vh;
    }

    .job-tabs {
        min-height: 120vh;
    }

    .garanty {
        min-height: 60vh;
    }

    .contact {
        min-height: 100vh;
    }
}



@media(min-width:992px) {

    nav {
        position: fixed !important;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        padding: 0 !important;
    }

    .hero {
        margin-top: -124px;
    }

    .about {
        min-height: 60vh;
    }

    .about .cont h1 {
        font-size: 56px;
        line-height: 64px;
        margin-bottom: 56px;
        margin: 0px auto 56px;
    }

    .about .about-content__text {
        padding: 0px 24px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .about .about-content__text p {
        font-size: 18px;
    }

    .about .counter {
        display: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0px 24px;
    }

    .about .counter .counter-elem .count {
        font-size: 40px;
        margin-bottom: 8px;
    }

    .about .counter .counter-elem .text {
        font-size: 16px;

    }

    .about .buttons {
        flex-direction: row;
        gap: 12px;
        margin-top: 38px;
    }

    .about .buttons .blue-btn,
    .candidats .button,
    .job .button,
    .job-tab-panels .button,
    form button {
        font-size: 18px;
    }

    .about .buttons .white-btn {
        font-size: 18px;
    }

    .candidats {
        min-height: 100vh;
    }

    .candidats .content {
        padding: 40px 24px;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .candidats .content .left,
    .candidats .content .right {
        width: 48%;
    }

    .candidats .left h2 {
        font-size: 48px;
        line-height: 64px;
        margin-bottom: 12px;
    }

    .candidats .left .tegs {
        margin-bottom: 48px;
    }

    .candidats .right .vac-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 80px;
    }


    .candidats .button {
        margin-top: 0px;
    }

    .job {
        min-height: 60vh;
        margin-top: 200px;
    }

    .job .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    .job .left,
    .job .right {
        width: 48%;
    }

    .job .right .tegs-list,
    .job .right .small {
        max-width: 430px;
    }

    .job .left h2 {
        font-family: "Raleway";
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
        color: #2E506A;
        margin-bottom: 11px;
    }

    .job .left .points {
        font-family: "Inter";
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #2E506A;
    }

    .job .right {
        border: 1px solid #0000001A;
        border-radius: 20px;
        backdrop-filter: blur(16px);
        padding: 32px 16px;
    }

    .job .right h2 {
        font-family: "Inter";
        font-weight: 700;
        font-style: Bold;
        font-size: 20px;
        line-height: 30px;
        vertical-align: middle;
        color: #2E506A;
        margin-bottom: 16px;
    }

    .job .right .tegs {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .job .right .tegs__item {
        background: #0000000D;
        border: 1px solid #0000001A;
        padding: 7px 12px;
        font-family: "Inter";
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        vertical-align: middle;
        border-radius: 999px;
    }

    .job .right .tegs__item p {
        margin-bottom: 0;
    }

    .job-tabs {
        min-height: 100vh;
        height: auto;
    }

    .job-tabs .content {
        height: 100%;
        width: 100%;
        max-width: 1400px;
        left: 50%;
        transform: translateX(-50%);
    }

    .job-tabs .content .top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .job-tabs .content .top .toForm {
        border: 1px solid #0000001A;
        border-radius: 16px;
        padding: 17px;
        width: 160px;
        font-family: "Inter";
        font-weight: 700;
        font-style: Bold;
        font-size: 16px;
        line-height: 24px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
    }

    .job-tab-panels {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 17px;
    }

    .job-tab-panels .panel {
        width: 402px;
    }

    .job-tab-panels .panel .tegs {
        margin-bottom: 34px;
    }

    .garanty {
        min-height: 100vh;

    }

    .garanty .content {
        left: 50%;
        transform: translateX(-50%);
        max-width: 1400px;
        width: 100%;
    }

    .garanty .content h2 {
        font-size: 48px;
        line-height: 64px;
        margin-bottom: 24px;
    }

    .garanty .content p {
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 40px;
    }

    .garanty .content .points {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .garanty .content .points .point {
        width: 48%;
        padding: 39px 24px;
    }

    .contact {
        min-height: 100vh;
        position: relative;
    }

    .contact .content {
        width: 100%;
        max-width: 1400px;
        left: 50%;
        transform: translateX(-50%);
    }

    .contact .content .form-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .contact .contact-bg {
        position: absolute;
        z-index: 0;
        top: 0vh;
        overflow-x: hidden;
        width: 1100vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .contact .contact-bg img {
        width: 100vw;
    }

    .contact .layer-bottom {
        position: absolute;
        z-index: 1;
        top: -100px;
        overflow-x: hidden;
    }

    .contact .layer-bottom img {
        width: 300%;
        height: 200px;
        transform: translateX(-10%);
        pointer-events: none;
    }

    .contact {
        --contactDelta: max(0px, calc(var(--scrollTop, 0px) - var(--contactStart, 0px)));
    }

    .contact .content .contact-text {
        width: 40%;
    }

    .contact .content .contact-text h2 {
        font-size: 48px;
        line-height: 64px;
        margin-bottom: 24px;
    }

    .contact .content .form-section {
        width: 50%;
        padding: 48px;
    }

    .form-section .buttons {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        margin: unset;
    }

    .form-section .forms form {
        gap: 5px;
    }

    .form-section .forms form button {
        margin: 40px 0px 0px 0px;
    }

    .hero .layer__base {
        width: 100vw;
        height: 100%;
        min-height: 200vh;
        position: absolute;
        overflow: hidden;
        z-index: 1;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translate3d(0, calc(var(--scrollTop) / 1.19), 0);
        will-change: transform;
    }

    body.about-in-view .hero .layer__base {
        opacity: 1;
    }

    .hero .layer__base img.img1 {
        width: 100%;
        min-height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        transform: unset;
    }

    .hero .layer__base img.img2 {
        width: 100%;
        min-height: 100vh;
        position: absolute;
        top: 100vh;
        left: 0;
        transform: unset;
    }

    .hero .layer__bottom2 {
        width: 100vw;
        height: 300px;
        position: absolute;
        top: calc(100vh - 100px);
        left: 0;
        overflow: hidden;
        z-index: 2;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translate3d(0, calc(var(--scrollTop) / 1.19), 0);
        will-change: transform;
    }

    .hero .layer__bottom2 img {
        width: 140vw;
        height: 300px;
        position: absolute;
        top: 0;
        left: -20vw;
        transform: unset;
    }

    .hero .layer__bottom3 {
        width: 100vw;
        height: 300px;
        position: absolute;
        top: calc(100vh - 150px);
        left: 0;
        overflow: hidden;
        z-index: 2;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translate3d(0, calc(var(--scrollTop) / 1.19), 0);
        will-change: transform;
    }

    .hero .layer__bottom3 img {
        width: 140vw;
        height: 300px;
        position: absolute;
        top: 0;
        left: -20vw;
        transform: unset;
    }

    .hero .layer__middle {
        z-index: 3;
        position: absolute;
        overflow-x: hidden;
        top: 30vh;
        right: 0;
        width: 100%;
        height: 100vh;

    }

    .hero .layer__middle img {
        width: 200%;
        height: 90vh;
        transform: translate3d(calc(-1 * min(var(--scrollTop, 0px), var(--lim)) * var(--vx)),
                calc(-1 * min(var(--scrollTop, 0px), var(--lim)) * var(--vy)),
                0);
        will-change: transform;
    }


    .hero .layer__bottom {
        z-index: 2;
        position: absolute;
        overflow-x: hidden;
        bottom: -60%;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        transform: translate3d(0, calc(var(--scrollTop) / 1.8), 0);
        will-change: transform, opacity, bottom;
        transition: none;
        opacity: 0.8;
    }


    .hero .layer__bottom img {
        width: 100%;
        height: 100%;
        left: 0;
        transform: unset;
    }

    .bg {
        min-height: 20vh;
        width: 100%;
        position: relative;
        margin-top: -50px;
        padding-top: 50px;
    }

    .bg .content {
        background: url(../img/hero-right.png)center/contain no-repeat;
        min-height: 20vh;
    }

    .bg .layers .layer-top {
        position: absolute;
        z-index: 3;
        overflow-x: hidden;
        height: 600px;
        width: 100%;
        top: -10vh;
        will-change: transform;
        --lead: 200px;
        --d: max(0px, calc(var(--scrollTop, 0px) - var(--topStart, 0px) + var(--lead)));
        transform: translate3d(0, calc(var(--d) * 0.8), 0);
    }

    .bg .layers .layer-top img {
        height: 500px;
        width: auto;
        will-change: transform;
        transform: translateX(calc(var(--d) * 0.12));
    }

    .bg .layers .layer-top2 {
        position: absolute;
        z-index: 3;
        overflow-x: hidden;
        height: 600px;
        width: 100%;
        top: 0vh;
        will-change: transform;
        --lead: 200px;
        --d: max(0px, calc(var(--scrollTop, 0px) - var(--topStart, 0px) + var(--lead)));
        transform: translate3d(0, calc(var(--d) * 0.9), 0);
    }

    .bg .layers .layer-top2 img {
        height: 500px;
        width: auto;
        will-change: transform;
        transform: translateX(calc(var(--d) * -0.3));
    }


    .bg .layers .layer-middle {
        width: 100%;
        position: absolute;
        z-index: 2;
        overflow-x: hidden;
        top: 0;

    }

    .bg .layers .layer-middle img {
        width: 300%;
    }

    .bg .layers .layer-bottom {
        display: none;

    }

    .bg .layers .layer-bottom3 {
        width: 100%;
        position: absolute;
        z-index: 2;
        overflow-x: hidden;
        top: 0%;
        transform: translate3d(0, calc(max(0px, var(--scrollTop) - 1200px) / 1.3), 0);
        will-change: transform;
    }

    .bg .layers .layer-bottom3 img {
        width: 300%;
        transform: translate3d(-20%, 0, 0);
    }

    .bg .layers .layer-mauntin {
        position: absolute;
        z-index: 2;
        overflow: hidden;
        height: 300px;
        width: 100%;
        will-change: transform, opacity;
        --lead: 560px;
        --d: clamp(0px, calc(var(--scrollTop, 0px) - var(--mntStart, 0px) + var(--lead)), 99999px);
        transform: translate3d(0, calc(var(--d) * 0.9), 0);
        --jobReady: calc(clamp(0px, var(--jobStart, 0px), 1px) / 1px);
        --fadePre: 600px;
        --fadeLenBase: 300px;
        --fadeLen: clamp(300px, var(--fadeLenBase), 60vh);
        --fadeStartAbs: calc(var(--jobStart, 0px) - var(--fadePre));
        --fadeDelta: max(0px, calc(var(--scrollTop, 0px) - var(--fadeStartAbs)));
        --p: min(1, calc(var(--fadeDelta) / var(--fadeLen)));
        opacity: calc(1 - (var(--p) * var(--jobReady))) !important;
    }

    .bg .layers .layer-mauntin img {
        width: auto;
        height: 280px;
        transform: none;
    }

    .bg .layers .layer-bottom2 img {
        display: none;

    }

    .contact .contact-bg {
        display: none;
    }

    .contact .layer-bottom {
        display: none;
    }

    section.running-line {
        position: absolute;
        z-index: 5;
        width: 100%;
        overflow: hidden;
        border: 1px solid #FFFFFF;
        box-shadow: 0px 0px 4px 0px #00000040;
        padding: 34px 50px;
    }

    .marquee {
        position: relative;
        white-space: nowrap;
        margin: 0;
        font-family: "Inter";
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        vertical-align: middle;

    }

    /* доріжки */
    .marquee .track {
        display: inline-block;
        padding-right: 3rem;
        will-change: transform;
        --startmarq: 0%;
        animation: rl-marquee var(--rl-duration, 22s) linear infinite;
    }

    .marquee .track:nth-child(2) {
        --startmarq: 100%;
    }

    @keyframes rl-marquee {
        from {
            transform: translateX(var(--startmarq));
        }

        to {
            transform: translateX(calc(var(--startmarq) - 100%));
        }
    }

    .bg2 .layer-cloud {
        position: absolute;
        z-index: 4;
        top: -60vh;
        width: 100%;
        --cloudD: max(0px, calc(var(--scrollTop, 0px) - var(--cloudStart, 0px)));
        transform: translate3d(0, calc(var(--cloudD) * 1), 0);
        will-change: transform;
    }

    .bg2 .layer-cloud img {
        width: 100%;
        max-height: 70vh;
    }

    .bg2 .layer-top {
        position: absolute;
        z-index: 3;
        top: -80vh;
        overflow-x: hidden;
        min-height: 50vh;
        will-change: transform;
        --lead2: 100px;
        --d2: max(0px, calc(var(--scrollTop, 0px) - var(--top2Start, 0px) + var(--lead2)));
        transform: translate3d(0, calc(var(--d2) * 1.4), 0);
    }

    .bg2 .layer-top img {
        width: 100vw;
        height: 100%;
        will-change: transform;
        --xMax2: 900px;
        --x2: min(var(--xMax2), calc(var(--d2) * 0.6));
        transform: translate3d(calc(10% - var(--x2)), 0, 0);
    }

    .bg2 .layer-top2 {
        position: absolute;
        z-index: 3;
        top: -55vh;
        overflow-x: hidden;
        min-height: 50vh;
        will-change: transform;
        --lead2: 100px;
        --d2: max(0px, calc(var(--scrollTop, 0px) - var(--top2Start, 0px) + var(--lead2)));
        transform: translate3d(0, calc(var(--d2) * 1.4), 0);
    }

    .bg2 .layer-top2 img {
        width: 100vw;
        height: 100%;
        will-change: transform;
        transform: translateX(-10%);
        --xMax2: 900px;
        --x2: min(var(--xMax2), calc(var(--d2) * 0.1));
        transform: translate3d(calc(-10% + var(--x2)), 0, 0);
    }

    .bg2 .layer-top3 {
        position: absolute;
        z-index: 3;
        top: 30vh;
        overflow-x: hidden;
        min-height: 50vh;
        will-change: transform;
        --lead3: 600px;
        --d3: max(0px, calc(var(--scrollTop, 0px) - var(--top3Start, 0px) + var(--lead3)));
        transform: translate3d(0, calc(var(--d3) * 1), 0);
    }

    .bg2 .layer-top3 img {
        width: 100vw;
        height: 100%;
        will-change: transform;
        --xMax3: 2000px;
        --x3: min(var(--xMax3), calc(var(--d3) * 0.6));
        transform: translate3d(calc(20% + var(--x3)), 0, 0);
    }

    .bg2 .layer-middle {
        position: absolute;
        z-index: 3;
        top: 70vh;
        overflow-x: hidden;
        min-height: 50vh;
        will-change: transform;
        --lead3: 600px;
        --d3: max(0px, calc(var(--scrollTop, 0px) - var(--top3Start, 0px) + var(--lead3)));
        transform: translate3d(0, calc(var(--d3) * 0.4), 0);
    }

    .bg2 .layer-middle img {
        width: 100vw;
        height: 100%;
        will-change: transform;
        transform: translate3d(-30%, 0, 0);
    }

    .bg2 .layer-middle2,
    .bg2 .layer-bottom,
    .bg2 .layer-bottom2,
    .bg2 .layer-bottom3,
    .bg2 .layer-storm {
        display: none;
    }

}