@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600&display=swap");

:root {
    /* Цветовая палитра */
    --COLOR_PRIMARY: #97d1f1;
    --COLOR_BG_DARK: #0f0e18;
    --COLOR_BG_DARK_ALT: #0f1019;
    --COLOR_BG_DARK_ALT-2: #0e0e18;
    --COLOR_BG_DARK_LIGHT: #21252e;
    --COLOR_LINK: #597a8d;
    --COLOR_BG_SECTION: #2e394f;
    --COLOR_BG_SECTION_ALT: #2f3f5a;
    --COLOR_BG_SECTION_LIGHT: #cbdfff;
    --COLOR_TEXT_SECTION_LIGHT: #324972;
    --COLOR_ACCENT_BLUE: #2f67bb;
    --COLOR_DARK: #0b0b12;

    /* Типографика */
    --FONT_FAMILY_PRIMARY: "Roboto", sans-serif;

    /* Размеры */
    --WIDTH_CONTAINER: 1920px;
    --HEADER_HEIGHT: 45px;
    --FS-TEXT-DESK: 48px;
    --FS-TEXT-VH: 4vh;
    --FS-TEXT-TABLET: 32px;
    --FS-TEXT-MOBILE: 21px;
}

@media only screen and (max-width: 979.98px) {
    :root {
        --HEADER_HEIGHT: 52px;
    }
}

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

body {
    position: relative;
    min-width: 320px;
    width: 100%;
    height: auto;
    min-height: 100vh;
    font-family: var(--FONT_FAMILY_PRIMARY);
    background: var(--COLOR_BG_DARK);
    color: var(--COLOR_PRIMARY);
    overflow-x: hidden;
}
body::-webkit-scrollbar {
    width: 10px;
    height: 75px;
}

body::-webkit-scrollbar-track {
    background-color: transparent;
}

body::-webkit-scrollbar-thumb {
    background-color: #8eaad6;
    border-radius: 12px;
    cursor: pointer;
}

#smooth-content,
.hero > *,
.section > * {
    will-change: transform;
}

.container {
    width: 100%;
    height: 100%;
    max-width: var(--WIDTH_CONTAINER);
    margin: 0 auto;
}

h1 {
    margin: 0;
    font-size: 118px;
    font-weight: 100;
    line-height: 1;
    color: var(--COLOR_PRIMARY);
}

h2 {
    margin: 0;
    font-weight: 600;
    line-height: 1;
    color: var(--COLOR_PRIMARY);
    text-transform: uppercase;
}

a {
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.18px;
    color: var(--COLOR_LINK);
    text-decoration: none;
    transition: color 0.2s ease;
    outline: none;
}

a:hover,
a:active {
    color: var(--COLOR_PRIMARY);
}

button {
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--COLOR_PRIMARY);
    color: var(--COLOR_DARK);
    font-family: var(--FONT_FAMILY_PRIMARY);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.desktop-hidden {
    display: none;
}
.mobile-hidden {
    display: block;
}

/* Section Styles */
.section {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--HEADER_HEIGHT) + 1px);
}

.content--sticky {
    width: 100vw;
    position: sticky !important;
    top: calc(var(--HEADER_HEIGHT) - 1px) !important;
    min-height: calc(100dvh - var(--HEADER_HEIGHT) + 2px);
    height: calc(100dvh - var(--HEADER_HEIGHT) + 2px);
    overflow: hidden;
    will-change: transform, filter;
}

.video-block {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--HEADER_HEIGHT) + 2px);
    background: #0f0e18;
    will-change: transform;
    z-index: 2;
    padding-top: 104px;
}

.video-block__video {
    position: absolute;
    /* inset: 0; */
    /* min-width: 100%; */
    /* width: 100%; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    object-fit: contain;
    margin: auto;
    margin-top: 0;
    z-index: 1;
}

.video-block__text {
    position: absolute;
    bottom: clamp(40px, 16vh, 300px);
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 40px 0;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.video-block__text--visible {
    opacity: 1;
}

.video-block__text-content {
    font-weight: 100;
    font-size: clamp(var(--FS-TEXT-MOBILE), var(--FS-TEXT-VH), var(--FS-TEXT-DESK));
    line-height: 1.1;
    color: var(--COLOR_PRIMARY);
    margin: 0;
}

.video-block__text-content span {
    font-weight: 500;
}

.video-block--vip {
    background-color: #2f394e;
    z-index: 3;
}

.video-block--dom {
    background-color: #8eaad6;
}

.video-block--vip .video-block__text,
.video-block--dom .video-block__text {
    padding: 0 40px 0;
    bottom: clamp(30px, 4vh, 48px);
}

.video-block--vip .video-block__text-content {
    max-width: 788px;
    margin: auto;
}

.video-block--dom .video-block__text-content {
    max-width: 920px;
    margin: auto;
    color: #122038;
    font-weight: 200;
}

.video-block--dom .video-block__text-content span {
    font-weight: 400;
}

/* Section Labels */
.section-label {
    position: sticky;
    width: fit-content;
    right: 0;
    top: calc(104px + var(--HEADER_HEIGHT));
    background-color: var(--COLOR_BG_SECTION_ALT);
    color: var(--COLOR_PRIMARY);
    display: flex;
    align-items: center;
    padding: clamp(12px, 1.9vh, 20px) 30px clamp(12px, 1.9vh, 20px) 24px;
    border-radius: 12px 0 0 12px;
    z-index: 100;
    pointer-events: none;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: calc(-104px - var(--HEADER_HEIGHT) - 82px);
}

.section-label.__dark {
    background-color: var(--COLOR_BG_DARK_ALT-2);
}

.section-label.__light {
    background-color: var(--COLOR_BG_SECTION_LIGHT);
    color: var(--COLOR_TEXT_SECTION_LIGHT);
}

.section-label__text {
    font-size: clamp(28px, 3.89vh, 42px);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--COLOR_BG_DARK_LIGHT);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 72px;
    padding: 14px 120px;
    width: 100%;
}
.header__nav-menu {
    display: flex;
    gap: 52px;
    align-items: center;
}

.nav-link.active {
    color: var(--COLOR_PRIMARY);
}

.logo {
    height: 17px;
    width: 33px;
    overflow: hidden;
}
.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.burger-button {
    display: none;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    width: 24px;
    height: 24px;
    padding: 7px 4px;
    background-color: transparent;
    border: none;
    outline: none;
}
.burger-button:active,
.burger-button:hover {
    background-color: transparent;
}
.burger-button__line {
    top: 50%;
    display: block;
    margin-top: -1px;
    transition-property: transform;
    transition-duration: 75ms;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.burger-button__line:after,
.burger-button__line:before {
    content: "";
    display: block;
}

.burger-button__line,
.burger-button__line:after,
.burger-button__line:before {
    position: absolute;
    width: 16px;
    height: 1px;
    background-color: #fff;
    border-radius: 2px;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.burger-button__line:before {
    top: -5px;
    transition-property: opacity, top;
    transition-duration: 75ms;
    transition-timing-function: ease;
}

.burger-button__line:after {
    bottom: -5px;
    transition-property: transform, bottom;
    transition-duration: 75ms;
    transition-timing-function: ease-out;
}

.burger-button--open .burger-button__line {
    transform: rotate(45deg);
    transition-property: transform;
    transition-duration: 75ms;
    transition-timing-function: 0.12s;
}

.burger-button--open .burger-button__line:before {
    top: 0;
    opacity: 0;
    transition-property: opacity, top;
    transition-duration: 75ms;
    transition-timing-function: ease;
}

.burger-button--open .burger-button__line:after {
    bottom: 0;
    transform: rotate(-90deg);
    transition-property: transform, bottom;
    transition-duration: 75ms;
    transition-timing-function: 0.12s;
}

.burger-button--open {
    position: relative;
    z-index: 101;
}

/* Hero Block */
.hero {
    position: relative;
    width: 100%;
    height: 100vh !important;
    top: 0 !important;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.hero * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.hero img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}
.hero .container {
    max-width: calc(var(--WIDTH_CONTAINER) + 80px);
    padding: var(--HEADER_HEIGHT) 40px 0;
    display: flex;
}
.hero__inner {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-height: 889px;
    margin: auto;
    padding: clamp(40px, 12.17vh, 73px) 0;
}

.hero__devices {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 100%;
    flex: 1 1 auto;
    max-width: var(--WIDTH_CONTAINER);
    max-height: 889px;
    /* max-height: clamp(400px, 46.3vh, 889px);
    min-height: clamp(300px, 31.25vh, 600px); */
    z-index: 1;
    pointer-events: none;
    margin: auto 0;
}

.hero__ellipse {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 2638px;
    height: 339px;
    margin: auto;
    border-radius: 2638px;
    background: linear-gradient(90deg, rgba(14, 35, 63, 0.3) 0%, #0e233f 50%, rgba(14, 35, 63, 0.3) 100%);
    filter: blur(61px);
}

.hero__device {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 1648px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1648 / 889;
    object-fit: contain;
}

.hero__device-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.hero__device--on {
    opacity: 0;
    z-index: 1;
    animation: fadeIn 0.8s ease-in-out 2s forwards;
}

.hero__device--off { 
    animation: fadeOut 0.3s ease-in-out 2.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.hero__headline {
    position: absolute;
    top: clamp(55px, 5.3vh, 130px);
    transform: translateX(7px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 100%;
}

.hero__logo-wrapper {
    height: clamp(56px, 12.55vh, 114px);
    max-height: 114px;
    width: auto;
    max-width: calc(100% - 60px);
}

.hero__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.hero__subtitle {
    position: absolute;
    bottom: clamp(20px, 6.9vh, 50px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: 100;
    font-size: clamp(44px, 5.7vw, 118px);
    line-height: 1.45;
    color: var(--COLOR_PRIMARY);
    letter-spacing: clamp(3.5px, 1.42vw, 13.6px);
    text-transform: uppercase;
    white-space: pre-wrap;
    margin: 0;
    z-index: 2;
    width: 100%;
}

@media only screen and (max-width: 1439.98px) {
    .hero__subtitle {
        bottom: clamp(35px, 3.65vh, 55px);
        font-size: clamp(42px, 7vh, 80px);
        letter-spacing: clamp(3.4px, 0.6vw, 9px);
    }
}

@media only screen and (max-height: 720px) {
    .hero__ellipse {
        display: none;
    }
}

@media only screen and (max-width: 979.98px) {
    .mobile-fade-up {
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 0.8s ease-out, transform 0.6s ease-out;
    }

    .mobile-fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .desktop-hidden {
        display: block;
    }
    .mobile-hidden {
        display: none;
    }
    .section {
        height: calc(100dvh - var(--HEADER_HEIGHT));
    }
    .content--sticky {
        top: 0 !important;
        width: 100%;
    }
    .container,
    .hero .container {
        padding: clamp(20px, 8vh, 60px) 16px;
    }
    .header {
        justify-content: space-between;
        padding: 14px 24px;
    }
    .hero__inner {
        height: calc(100% - var(--HEADER_HEIGHT));
        /* margin-top: var(--HEADER_HEIGHT); */
        display: flex;
        padding: 0;
    }
    .logo {
        z-index: 101;
    }

    .burger-button {
        display: inline-block;
    }

    .header__nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 24px;
        padding: 80px 24px 24px;
        width: 100%;
        height: 100vh;
        background-color: var(--COLOR_BG_DARK_LIGHT);
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
        overflow-y: auto;
    }

    .header__nav-menu--open {
        transform: translateX(0);
    }

    .header__nav-menu .nav-link {
        font-size: 18px;
        padding: 12px 0;
        width: 100%;
    }
    .hero__ellipse {
        display: none;
    }
    .hero__headline {
        position: static;
        transform: none;
    }
    .hero__devices {
        max-height: 480px;
        position: static;
        margin: 0;
    }
    .hero__device {
        max-width: 100%;
        max-height: 100%;
        inset: auto;
    }
    .hero__subtitle {
        position: static;
        transform: none;
    }
    .hero__logo-wrapper {
        height: clamp(56px, 9vh, 114px);
    }

    /* Все секции кроме hero должны быть на высоту контента */
    .section:not(.hero):not(.footer-section) {
        height: auto;
        min-height: auto;
        padding-top: 0;
        z-index: 2;
    }

    .video-block {
        height: auto;
        min-height: 50vh;
        margin-top: 0;
        background-color: #0F1019;
        padding: 60px 0 40px !important;
        z-index: 3 !important;
    }

    /* без этого возникает баг-полоска между блоками */
    .video-block ~ .content-section {
        margin-top: -1px;
    }

    .video-block--vip {
        background: linear-gradient(180deg, #324058 34.13%, #2c394f 64.9%, #2e394f 100%);
    }

    .video-block--dom {
        background: linear-gradient(180deg, #abc2e8 16.02%, #8eaad6 62.98%);
    }

    .video-block__video {
        position: absolute;
        top: 60px;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: auto;
        margin: 0;
        min-height: auto;
        aspect-ratio: 16/9;
    }

    .video-block__text {
        bottom: 40px;
        padding: 52px 30px 0;
    }

    .video-block--vip .video-block__text,
    .video-block--dom .video-block__text {
        padding: 52px 20px 0;
        bottom: 40px;
    }

    .video-block__text-content {
        font-weight: 300;
        font-size: var(--FS-TEXT-TABLET);
        line-height: 1.15;
    }

    
    .video-block__text-content span {
        font-weight: 300 !important;
    }

    .video-block--dom .video-block__text-content, 
    .video-block--dom .video-block__text-content span {
        font-weight: 400 !important;
    }

    .club-section {
        min-height: auto;
    }

    .club-section__inner {
        min-height: auto;
        padding-bottom: 60px;
    }

    .section-label {
        top: 84px;
        padding: 8px 18px 8px 12px;
        border-radius: 6px 0 0 6px;
        margin-top: calc(84px - var(--HEADER_HEIGHT));
        margin-bottom: calc(-84px - var(--HEADER_HEIGHT) - 32px);
    }

    .section-label__text {
        font-size: 28px;
    }
}

@media only screen and (max-width: 575.98px) {
    .hero__devices {
        max-height: 186px;
    }

    .hero__device {
        aspect-ratio: 344 / 186;
    }

    .hero__logo-wrapper {
        height: 56px;
        max-width: 100%;
        transform: translateX(5px);
    }

    .hero__subtitle {
        font-size: 44px;
        font-weight: 200;
        line-height: 1.45;
        letter-spacing: 3.5px;
        padding: 0 4px;
        margin-top: -8px;
    }

    .section-label__text {
        font-size: 14px;
    }
    .video-block__text-content {
        font-size: var(--FS-TEXT-MOBILE);
    }
}

/* Content Section - общие стили для всех content-секций */
.content-section {
    /* padding-top: var(--HEADER_HEIGHT); */
    min-height: calc(100dvh - var(--HEADER_HEIGHT) + 1px);
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}

.content-section__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

.content-section__wrapper {
    height: fit-content;
    margin: auto;
    position: relative;
}

.content-section__text {
    position: absolute;
    max-width: clamp(350px, 67%, 647px);
    width: 100%;
    font-size: clamp(var(--FS-TEXT-MOBILE), var(--FS-TEXT-VH), var(--FS-TEXT-DESK));
    font-weight: 100;
    line-height: 1.1;
    color: var(--COLOR_PRIMARY);
    text-align: right;
    z-index: 2;
}

.content-section__text--bold {
    font-weight: 400;
}

.content-section__images {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
}

.content-section__mobile-img {
    display: none;
    max-width: 100%;
}

.content-section__image {
    position: relative;
    opacity: 1;
    width: auto;
}

.content-section__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    object-position: top;
}

.content-section__line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1920px;
    width: 100vw;
    height: 96px;
}

.content-section__blur {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    min-width: 1920px;
    width: 100%;
    height: 96px;
    background-color: var(--COLOR_ACCENT_BLUE);
    opacity: 0.1;
    filter: blur(20px);
}

.content-section__gradient {
    position: absolute;
    left: 50%;
    top: 45px;
    transform: translateX(-50%);
    min-width: 1920px;
    width: 100%;
    height: 14px;
    filter: blur(12px);
}

.content-section__shadow {
    position: absolute;
    z-index: 1;
}

.content-section__shadow-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mask-image: url("../assets/content-shadow.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #cbdfff;
}

/* Специфичные стили для Club Section */
.club-section {
    background-color: #0f0e18;
    z-index: 2;
}

.club-section .content-section__text {
    left: -20%;
    top: clamp(40px, 12vh, 130px);
}

.club-section .content-section__wrapper {
    top: -9vh;
}

.club-section .content-section__images {
    left: clamp(100px, 12.8vh, 139px);
    top: clamp(60px, 9.3vh, 102px);
}

.club-section .content-section__mobile-img {
    aspect-ratio: 327 / 344;
}

.club-section .content-section__line {
    /* top: clamp(168px, 26vh, 280px); */
    top: clamp(160px, 34vh, 335px);
    /* top: clamp(76px, 10vh, 160px); */
}

.club-section .content-section__gradient {
    background: linear-gradient(90deg, #122038 20%, #2F67BB 50%, #122038 80%);
}

.club-section .content-section__shadow {
    left: 8%;
    top: clamp(-1px, -3vh, -16px);
    width: auto;
    height: clamp(460px, 100vh, 1100px);
    aspect-ratio: 853 / 782;
}

.club-section .content-section__shadow-img {
    background-color: #2f67bb;
}

/* Специфичные стили для VIP Section */
.vip-section {
    background-color: var(--COLOR_BG_SECTION);
}

.vip-section .content-section__wrapper {
    top: -13vh;
}

.vip-section .content-section__text {
    left: 3%;
    max-width: 43%;
    top: clamp(60px, 7.5vh, 100px);
}

.vip-section .content-section__images {
    left: 0px;
    top: clamp(30px, 6.3vh, 70px);
}

.vip-section .content-section__mobile-img {
    aspect-ratio: 327 / 327;
}

.vip-section .content-section__line {
    /* top: clamp(150px, 22vh, 270px); */
    top: clamp(150px, 40vh, 400px);
}

.vip-section .content-section__gradient {
    background: linear-gradient(90deg, #324972 20%, #97D1F1 50%, #324972 80%);
}

.vip-section .content-section__shadow {
    left: 15%;
    top: 3%;
    /* width: 943px;
    height: 882px; */
    width: auto;
    height: clamp(460px, 100vh, 1100px);
    aspect-ratio: 853 / 782;
    z-index: 0;
}

.vip-section .content-section__shadow-img {
    background-color: #2f67bb;
}

/* Специфичные стили для Dom Section */
.dom-section {
    background-color: #8eaad6;
    z-index: 3;
}

.dom-section .content-section__wrapper {
    top: -7vh;
}

.dom-section .content-section__text {
    left: -25%;
    top: clamp(40px, 13vh, 130px);
    max-width: clamp(350px, 72%, 672px);
    color: #122038;
    font-weight: 200;
}

.dom-section .content-section__images {
    left: clamp(100px, 12.8vh, 139px);
    top: clamp(60px, 9.3vh, 102px);
}

.dom-section .content-section__mobile-img {
    aspect-ratio: 327 / 341;
}

.dom-section .content-section__line {
    top: clamp(160px, 34vh, 335px)
}

.dom-section .content-section__gradient {
    background: linear-gradient(90deg, #b6c5dd 20%, #c9d4e3 50%, #b6c5dd 80%);
}

.dom-section .content-section__shadow {
    left: 8%;
    /* top: -12%;
    width: 943px;
    height: 822px; */
    color: #d9d9d9;
    top: clamp(-1px, -3vh, -16px);
    width: auto;
    height: clamp(460px, 100vh, 1100px);
    aspect-ratio: 853 / 782;
}

/* Специфичные стили для изображений */
.club-section__image--pad {
    left: -7px;
    height: clamp(454px, 70vh, 757px);
    z-index: 3;
    aspect-ratio: 566/757;
}

.club-section__image--smart {
    left: clamp(10px, 2.8vw, 70px);
    margin-top: clamp(134px, 21.5vh, 224px);
    height: clamp(393px, 60vh, 655px);
    z-index: 4;
    aspect-ratio: 336/655;
}

.vip-section__image--controller {
    left: clamp(-10%, -9.7vw, -5%);
    top: clamp(140px, 22.1vh, 239px);
    height: clamp(340px, 52.5vh, 567px);
    z-index: 1;
    aspect-ratio: 566 / 567;
}

.vip-section__image--pad {
    left: 0;
    top: clamp(120px, 19vh, 209px);
    height: clamp(413px, 64vh, 689px);
    z-index: 2;
    aspect-ratio: 516 / 689;
}

.vip-section__image--smart {
    left: 48%;
    top: 0;
    height: clamp(392px, 62.5vh, 674px);
    z-index: 4;
    aspect-ratio: 334 / 674;
}

.dom-section__image--pad {
    left: 10px;
    height: clamp(454px, 70vh, 756px);
    z-index: 3;
    aspect-ratio: 566/756;
}

.dom-section__image--smart {
    left: 75px;
    /* margin-top: clamp(130px, 20vh, 210px); */
    margin-top: clamp(130px, 23.5vh, 240px);
    height: clamp(393px, 60vh, 654px);
    z-index: 4;
    aspect-ratio: 314/654;
}

@media only screen and (max-width: 1220.98px) {
    .club-section .content-section__wrapper {
        top: -13vh;
    }
    .dom-section .content-section__wrapper {
        top: -16vh;
    }
    .club-section .content-section__images {
        top: clamp(60px, 21.5vh, 280px);
        left: 20%;
    }
    .dom-section .content-section__images {
        top: clamp(60px, 21.5vh, 280px);
        left: 25%;
    }
    .content-section__text, .club-section .content-section__text, .dom-section .content-section__text {
        top: clamp(3px, 22vh, 212px);
        left: -17%;
    }
    .club-section .content-section__line {
        top: clamp(168px, 36vh, 307px);
    }
}

@media only screen and (max-width: 979.98px) {
    .content-section .container {
        padding: 40px 24px;
    }

    .content-section__inner {
        min-height: fit-content;
    }

    .content-section__line {
        min-width: 100%;
        width: 100%;
    }

    .content-section__wrapper {
        top: 0 !important;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 52px;
    }

    .content-section__images,
    .club-section .content-section__images {
        display: none;
    }

    .content-section__mobile-img {
        display: block;
    }

    .vip-section__images {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .content-section__image {
        position: relative;
    }

    .club-section {
        background-color: #0F1019;
    }

    .club-section__image--pad {
        left: auto;
        right: 15px;
        height: auto;
        max-width: 61%;
    }

    .club-section__image--smart {
        height: auto;
        max-width: 38%;
        left: 15px;
        margin-top: 89px;
        aspect-ratio: 126/262;
    }

    .content-section__background {
        display: none;
    }

    .content-section__text {
        position: static;
        text-align: center;
        font-size: var(--FS-TEXT-TABLET);
        max-width: calc(100% - 20px);
        font-weight: 300;
    }

    .club-section .content-section__text,
    .vip-section .content-section__text,
    .dom-section .content-section__text {
        max-width: 100%;
    }

    .content-section__text--bold {
        font-weight: 300;
    }

    .dom-section .content-section__text, .dom-section .content-section__text--bold {
        font-weight: 400;
    }

    .vip-section__image--controller {
        left: auto;
        width: 40%;
        max-width: 226px;
        height: auto;
        aspect-ratio: 566/567;
    }

    .vip-section__image--pad {
        left: auto;
        width: 35%;
        max-width: 206px;
        height: auto;
        aspect-ratio: 516/689;
    }

    .vip-section__image--smart {
        left: auto;
        width: 25%;
        max-width: 126px;
        height: auto;
        aspect-ratio: 314/654;
    }
}

@media only screen and (max-width: 575.98px) {
    .club-section__image--pad {
        right: 15px;
        height: 303px;
    }

    .club-section__image--smart {
        height: 262px;
        left: 15px;
    }

    .content-section__text {
        font-size: var(--FS-TEXT-MOBILE);
    }

    .vip-section__image--controller {
        width: 35%;
        max-width: 180px;
    }

    .vip-section__image--pad {
        width: 30%;
        max-width: 155px;
    }

    .vip-section__image--smart {
        width: 20%;
        max-width: 100px;
    }
}

/* Catalog Section */
.catalog-section {
    background-color: var(--COLOR_DARK);
    position: relative;
    overflow: hidden;
}

.catalog-section__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 6.7vh, 73px);
    min-height: 100vh;
    padding: clamp(50px, 9.6vh, 104px) 0 clamp(60px, 10.1vh, 110px);
}

.catalog-section__images {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.catalog-section__images::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(270deg, rgba(11, 11, 18, 0.4) 0%, #ffffff00 50%, rgba(11, 11, 18, 0.4) 100%); */
    background: linear-gradient(90deg,rgba(11, 11, 18, 0.8) 0%, #ffffff00 19%, #ffffff00 82%, rgba(11, 11, 18, 0.8) 100%);;
}

.catalog-section__image {
    flex: 1;
    width: 100%;
    height: auto;
    overflow: hidden;
    pointer-events: none;
    position: relative;
    max-width: 100vw;
}

.catalog-section__marquee {
    display: flex;
    height: 100%;
    will-change: transform;
    animation: marquee 150s linear infinite;
    /* Оптимизация для Firefox без конфликта с анимацией */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* width: fit-content только для Chrome/WebKit браузеров, не для Firefox */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    .catalog-section__marquee {
        width: fit-content;
    }
}
@-moz-document url-prefix() {
    .catalog-section__marquee {
        width: auto;
    }
}

.catalog-section__marquee--reverse {
    animation: marquee-reverse 150s linear infinite;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Оптимизация для изображений внутри marquee */
.catalog-section__marquee .catalog-section__img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.catalog-section__marquee .catalog-section__img:first-of-type {
    padding-right: 6px;
}

.catalog-section__img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    flex-shrink: 0;
    display: block;
}

.catalog-section__text {
    font-size: clamp(var(--FS-TEXT-MOBILE), var(--FS-TEXT-VH), var(--FS-TEXT-DESK));
    font-weight: 100;
    line-height: 1.1;
    color: var(--COLOR_PRIMARY);
    text-align: center;
}

.catalog-section__text span {
    font-weight: 400;
}

@media only screen and (max-width: 979.98px) {
    .catalog-section__inner {
        padding: 60px 0;
        min-height: auto;
        gap: 52px;
    }

    .catalog-section__images {
        gap: 6px;
        position: relative;
    }
    
    .catalog-section__images::after {
        background: linear-gradient(270deg, rgba(11, 11, 18, 0.4) 23.66%, #ffffff00 50.07%, rgba(11, 11, 18, 0.4) 76.48%);
    }

    .catalog-section__image {
        width: 100%;
        max-height: 100px;
    }

    .catalog-section__marquee {
        animation-duration: 60s;
    }

    .catalog-section__marquee--reverse {
        animation-duration: 70s;
    }

    .catalog-section__img {
        max-height: 100px;
        width: auto;
        height: 100%;
    }

    .catalog-section__text {
        padding: 0 20px;
        font-size: var(--FS-TEXT-TABLET);
        font-weight: 300;
        line-height: 1.15;
    }

    .catalog-section__text span {
        font-weight: 300;
    }
}

@media only screen and (max-width: 575.98px) {
    .catalog-section__text {
        font-size: var(--FS-TEXT-MOBILE);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0) translateZ(0);
    }
    100% {
        transform: translateX(-50%) translateZ(0);
    }
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(-50%) translateZ(0);
    }
    100% {
        transform: translateX(0) translateZ(0);
    }
}

/* Slider Section */
.slider-section {
    background-color: var(--COLOR_DARK);
    position: relative;
    overflow: hidden;
}

.slider-section--second {
    background: var(--COLOR_BG_DARK);
}

.slider-section .container {
    position: relative;
    padding: clamp(30px, 7.7vh, 72px) clamp(30px, 2.8vw, 150px) clamp(30px, 9.6vh, 106px);
    z-index: 1;
    height: 100%;
}

.slider-section__inner {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.slider-section__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    height: 100%;
}

.slider-section__slider-wrapper {
    width: 100%;
    height: 100%;
    max-height: clamp(500px, 73vh, 813px);
    position: relative;
    --shadow-width: 66%;
}

.slider-section__slider-wrapper::before {
    content: "";
    display: block;
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--shadow-width);
    height: 70%;
    background: #121f36;
    filter: blur(56px);
    pointer-events: none;
    z-index: 0;
}

.slider-section--second .slider-section__slider-wrapper::before {
    display: none;
}

.slider-section__swiper {
    width: 100%;
    height: 100%;
    max-height: 100%;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: visible !important;
    z-index: 1;
}

.slider-section__slide {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(10px, 2.8vh, 36px);
    transition-property: transform, opacity !important;
}

.slider-section__image {
    position: relative;
    width: fit-content;
    max-width: 80%;
    max-height: calc(100% - clamp(30px, 5.7vh, 60px));
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.slider-section__img,
.slider-section__image picture {
    width: 100%;
    max-width: 1269px;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    aspect-ratio: 64/41;
    z-index: 1;
}

.slider-section__navigation {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: clamp(-65px, -4vh, -20px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    pointer-events: none;
}

.slider-section__arrow {
    width: 88px;
    height: 88px;
    color: var(--COLOR_PRIMARY);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: color 0.3s ease;
}

.slider-section__arrow:hover {
    color: #665fe9;
}

.slider-section__arrow:disabled {
    color: #597a8d;
}

.slider-section__arrow svg {
    width: 100%;
    height: 100%;
}

.slider-section__arrow--prev {
    margin-left: 0;
}

.slider-section__arrow--next {
    margin-right: 0;
}

.slider-section__pagination {
    --swiper-pagination-top: clamp(20px, 5.2vh, 56px);
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1.1vh, 12px);
    z-index: 10;
}

.slider-section__pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    aspect-ratio: 1/1;
    background-color: transparent;
    opacity: 1;
    border: 1px solid rgba(151, 209, 241, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-section__pagination .swiper-pagination-bullet:hover {
    border-color: #97d1f1;
}

.slider-section__pagination .swiper-pagination-bullet-active {
    background: rgba(151, 209, 241, 0.25);
}

.slider-section__line {
    width: 100%;
    max-width: 100vw;
    height: 96px;
    position: absolute;
    inset: 0;
    top: clamp(-220px, -16vh, -102px);
    margin: auto;
}

.slider-section--second .slider-section__line--first-only {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(-150px, -16vh, -102px);
    /* top: 25dvh;
    margin: 0; */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.slider-section--second .slider-section__line--first-only.visible {
    opacity: 1;
    pointer-events: auto;
}

.slider-section__line::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 96px;
    background-color: var(--COLOR_ACCENT_BLUE);
    opacity: 0.1;
    filter: blur(20px);
}

.slider-section__line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45px;
    transform: translateX(-50%);
    width: 100%;
    height: 14px;
    background: linear-gradient(90deg, #122038 20%, #2f67bb 50%, #122038 80%);
    filter: blur(12px);
}

.slider-section__text {
    font-size: clamp(var(--FS-TEXT-MOBILE), var(--FS-TEXT-VH), var(--FS-TEXT-DESK));
    font-weight: 100;
    line-height: 1.1;
    color: var(--COLOR_PRIMARY);
    text-align: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.slider-section__text span {
    font-weight: 400;
}


@media only screen and (max-width: 979.98px) {
    .slider-section--second {
        background: var(--COLOR_DARK);
    }

    .slider-section .container {
        padding: 60px 40px;
    }

    .slider-section__swiper .swiper-wrapper {
        flex-direction: column;
        transform: none !important;
        height: auto;
    }

    .slider-section__slider-wrapper {
        max-height: 100%;
    }

    .slider-section__slide {
        height: auto !important;
        gap: 52px;
        margin-bottom: 80px;
    }

    .slider-section__slide.mobile-hidden {
        display: none !important;
    }

    .slider-section--second .slider-section__slide {
        margin-bottom: 100px;
    }
    .slider-section--second .slider-section__slide:last-of-type {
        margin-bottom: 0;
    }

    .slider-section--second .slider-section__slide {
        gap: 32px;
    }
    .slider-section--second .slider-section__slide:first-of-type .slider-section__image {
        padding: 0 24px;
    }

    .slider-section__slide:last-child {
        margin-bottom: 0;
    }

    .slider-section__image {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        flex: none;
    }

    .slider-section__image picture {
        aspect-ratio: 125 / 67;
    }

    .slider-section__img {
        max-width: 100%;
    }

    .slider-section__navigation,
    .slider-section__pagination,
    .slider-section__line,
    .slider-section__image::before {
        display: none;
    }

    .slider-section__text {
        font-size: var(--FS-TEXT-TABLET);
        font-weight: 300;
        line-height: 1.15;
        padding: 0 8px;
    }

    .slider-section--second .slider-section__text {
        padding: 0 20px;
    }

    .slider-section__text span {
        font-weight: 300;
    }
}

@media only screen and (max-width: 575.98px) {
    .slider-section .container {
        padding: 40px 12px 64px;
    }
    .slider-section--second .container {
        padding: 40px 0;
    }
    .slider-section__text {
        font-size: var(--FS-TEXT-MOBILE);
    }
}

/* Footer Section */
.footer-section {
    background-color: var(--COLOR_DARK);
    position: relative;
    overflow: hidden;
    min-height: calc(100dvh - var(--HEADER_HEIGHT));
}

.footer-section__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 5.5vh, 60px) 40px;
}

.footer-section__device {
    position: relative;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(70px, 13.6vh, 150px);
    z-index: 2;
}

.footer-section__device::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: calc(100% + 40px);
    height: 80%;
    background: #101e38;
    filter: blur(100px);
    top: -27px;
    left: -20px;
}

.footer-section__device-img {
    width: 100%;
    max-width: 1019px;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    aspect-ratio: 1000/579;
    z-index: 2;
}

.footer-section__button {
    position: absolute;
    bottom: -21px;
    left: 0;
    right: 0;
    margin: auto;
    width: 256px;
    height: 95px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.3s ease;
}

.footer-section__button::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: 103%;
    height: 100%;
    background-image: url("../assets/button-shadow.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

.footer-section__button-path {
    transition: opacity 0.3s ease;
}

.footer-section__button-path--hover {
    opacity: 0;
}

.footer-section__button:hover .footer-section__button-path--hover {
    opacity: 1;
}

.footer-section__button-shadow {
    display: none;
}

.footer-section__button svg {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.footer-section__button-text {
    position: absolute;
    z-index: 2;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--COLOR_DARK);
    text-transform: uppercase;
    pointer-events: none;
}

.footer-section__social {
    display: flex;
    gap: 54px;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.footer-section__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.footer-section__social-link svg {
    flex-shrink: 0;
    color: #344855;
    transition: color 0.3s ease;
}
.footer-section__social-link:hover svg {
    flex-shrink: 0;
    color: #ef3456;
}
.footer-section__social-link.--youtube:hover svg {
    color: #ff0002;
}
.footer-section__social-link.--vk:hover svg {
    color: #0277ff;
}
.footer-section__social-link.--telegram:hover svg {
    color: #24a1dd;
}
.footer-section__social-link.--dzen:hover svg {
    color: #93337e;
}

.footer-section__line {
    position: absolute;
    left: 50%;
    top: 37%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100vw;
    height: 96px;
}

.footer-section__line::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 96px;
    background-color: var(--COLOR_ACCENT_BLUE);
    opacity: 0.1;
    filter: blur(20px);
}

.footer-section__line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45px;
    transform: translateX(-50%);
    width: 100%;
    height: 14px;
    background: linear-gradient(90deg, #122038 20%, #2f67bb 50%, #122038 80%);
    filter: blur(12px);
}

@media only screen and (max-width: 979.98px) {
    .footer-section {
        height: 100%;
        display: flex;
        align-items: center;
        min-height: calc(100dvh - var(--HEADER_HEIGHT));
        z-index: 10;
    }
    .footer-section__inner {
        padding: 60px 20px;
    }

    .footer-section__device {
        margin-bottom: 50px;
    }

    .footer-section__device::before,
    .footer-section__line {
        display: none;
    }

    .footer-section__button-shadow {
        display: block;
        transform: scale(1.53) translateX(1px) translateY(10px);
    }

    .footer-section__button::before {
        display: none;
    }

    .footer-section__button {
        width: 168px;
        height: 62px;
    }

    .footer-section__button-text {
        font-size: 31.5px;
    }

    .footer-section__social {
        gap: 16px;
        width: 100%;
        max-width: 335px;
        justify-content: center;
        margin-top: 78px;
    }

    .footer-section__social-link svg {
        width: 40px;
        height: 40px;
    }
}