/* --- Подключение шрифтов --- */
@font-face {
    font-family: "Bounded-ExtraLight";
    src: url("./fonts/Bounded/Bounded-ExtraLight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Bounded-SemiBold";
    src: url("./fonts/Bounded/Bounded-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Bounded-ExtraBold";
    src: url("./fonts/Bounded/Bounded-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Bounded-Light";
    src: url("./fonts/Bounded/Bounded-Light.otf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Nebula-Regular";
    src: url("./fonts/Nebula Font/Nebula-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
/* --- Базовые сбросы --- */
* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
button:focus-visible {
    outline: 2px solid #4a90e2 !important;
}
a {
    text-decoration: none;
}
/* Прелоадер */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FF6B00;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease, visibility 1s;
}
.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}
.preloader-content {
    text-align: center;
}
.preloader-logo {
    width: 360px;
    height: auto;
    animation: preloaderPulse 1.5s ease-in-out infinite;
}
@keyframes preloaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.7);
        opacity: 0.3;
    }
}
/* Мобильная шапка - скрыта на десктопе */
.mobile-header {
    display: none;
}

/* --- ОБЩИЕ СТИЛИ ДЛЯ ВИДЕО-ОБЕРТОК И PLAY-ИКОНКИ --- */
.video-thumb-wrapper {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    border-radius: 20px;
}
.video-thumb-wrapper .video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    transition: transform 0.5s ease;
}
.video-thumb-wrapper .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 5;
}
.video-thumb-wrapper:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
}
.video-thumb-wrapper:hover .video-thumb-img {
    transform: scale(1.03);
}

/* --- ДЕСКТОПНАЯ ВЕРСИЯ (>= 1801px) --- */
@media (min-width: 1801px) {
    html, body {
        height: 100%;
        overflow: hidden;
        position: fixed;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
        color: #ffffff;
        font-family: "Bounded-ExtraLight", Helvetica, sans-serif;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }
    html {
        -ms-content-zooming: none;
        -ms-touch-action: pan-y pinch-zoom;
    }
    .frame {
        background-color: #000000;
        width: 1920px;
        height: auto;
        position: relative;
        margin: 0 auto;
        transform-origin: top center;
        opacity: 0;
        transition: opacity 1.5s ease;
        padding-bottom: 120px;
    }
    .frame.visible {
        opacity: 1;
    }
    /* Скрываем языковой переключатель */
    .frame .language-switcher {
        display: none;
    }
    /* Если экран больше 1920px - оставляем как есть (scale 1) */
    @media (min-width: 1920px) {
        .frame {
            /* Убираем глобальное сжатие для широких экранов, чтобы текст не становился микроскопическим */
        }
    }
    /* Если экран от 1801px до 1919px - применяем сжатие */
    @media (min-width: 1801px) and (max-width: 1919px) {
        .frame {
            transform: scale(calc(100vw / 1920));
        }

        body {
            background-color: #000000;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            overflow: hidden;
        }
        .frame {
            margin: 0 auto;
        }
    }
    /* Десктопные позиции элементов для 1801px+ */
    .frame .video {
        position: absolute;
        top: 41px;
        left: 50px;
        width: 1820px;
        height: 709px;
        display: flex;
    }
    .frame .hero-video {
        width: 1820px;
        height: 709px;
        object-fit: cover;
        border-radius: 61px;
    }
    .frame .nav-contact {
        position: absolute;
        top: 1028px;
        left: 177px;
        z-index: 10;
    }
    .frame .text-wrapper {
        display: inline-block;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #000000;
        font-size: 62px;
        letter-spacing: 0;
        text-decoration: none;
        transition: transform 0.4s ease, color 0.4s ease;
    }
    .frame .text-wrapper:hover {
        transform: scale(1.05);
        color: #333333;
    }
    .frame .video-2 {
        position: absolute;
        top: 1115px;
        left: 826px;
        width: 1044px;
        height: 522px;
    }
    .frame .video-3 {
        position: absolute;
        top: 1713px;
        left: 1048px;
        width: 822px;
        height: 440px;
    }
    .frame .video-2:hover,
    .frame .video-3:hover {
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    }
    .frame .element-nano {
        position: absolute;
        top: 1245px;
        left: 50px;
        width: 670px;
        height: 335px;
    }
    .frame .element-df-nano-k {
        position: absolute;
        top: 1713px;
        left: 54px;
        width: 879px;
        height: 440px;
    }
    .frame .element-nano:hover,
    .frame .element-df-nano-k:hover {
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    }
    .frame .p {
        position: absolute;
        top: 2330px;
        left: 296px;
        height: 221px;
        display: flex;
        align-items: center;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-size: 178px;
        letter-spacing: 18px;
        line-height: 1;
        white-space: nowrap;
    }
    .frame .span {
        font-weight: 200;
        color: #000000;
    }
    .frame .text-wrapper-4 {
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #000000;
    }
    .frame .text-wrapper-5 {
        font-family: "Bounded-ExtraBold", Helvetica;
        font-weight: 800;
        color: #ffffff;
    }
    .frame .text-wrapper-6 {
        position: absolute;
        top: 2490px;
        left: 144px;
        font-family: "Bounded-ExtraBold", Helvetica;
        font-weight: 800;
        color: #ffffff;
        font-size: 211px;
        letter-spacing: 21px;
        line-height: 1;
        white-space: nowrap;
    }
    .frame .youtube-reels-shorts {
        position: absolute;
        top: 2370px;
        left: 1378px;
        width: 377px;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #ffffff;
        font-size: 21px;
        letter-spacing: 2px;
        line-height: 26px;
    }
    .frame .img-3 {
        position: absolute;
        top: 2879px;
        left: 52px;
        width: 1818px;
        height: 709px;
        object-fit: cover;
        border-radius: 61px;
        transition: transform 0.6s ease;
    }
    .frame .img-3:hover {
        transform: scale(1.02);
    }
    .frame .logo {
        position: absolute;
        top: 3469px;
        left: 801px;
        width: 319px;
        height: 119px;
    }
    .frame .img-2 {
        position: absolute;
        top: 3726px;
        left: 1376px;
        width: 442px;
        height: 589px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .photo-2 {
        position: absolute;
        top: 3791px;
        left: 708px;
        width: 586px;
        height: 781px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .photo-3 {
        position: absolute;
        top: 3726px;
        left: 102px;
        width: 512px;
        height: 681px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .photo-4 {
        position: absolute;
        top: 5371px;
        left: 108px;
        width: 651px;
        height: 666px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .photo-8 {
        position: absolute;
        top: 5371px;
        left: 825px;
        width: 999px;
        height: 666px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .dsc {
        position: absolute;
        top: 4659px;
        left: 1173px;
        width: 651px;
        height: 664px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .dsc-2 {
        position: absolute;
        top: 4659px;
        left: 108px;
        width: 999px;
        height: 666px;
        object-fit: cover;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }
    .frame .img-2:hover,
    .frame .photo-2:hover,
    .frame .photo-3:hover,
    .frame .photo-4:hover,
    .frame .photo-8:hover,
    .frame .dsc:hover,
    .frame .dsc-2:hover {
        transform: scale(1.03);
    }
    .frame .clients-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 3643px;
        left: 0;
        width: 100%;
    }
    .frame .clients-list li {
        position: absolute;
        top: 0;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #ffffff;
        font-size: 22px;
        transition: color 0.4s ease;
    }
    .frame .clients-list li:hover {
        color: #FF6B00;
    }
    .frame .text-wrapper-7 { left: 477px; }
    .frame .text-wrapper-8 { left: 590px; }
    .frame .text-wrapper-9 { left: 730px; }
    .frame .text-wrapper-10 { left: 942px; }
    .frame .text-wrapper-11 { left: 1140px; }
    .frame .text-wrapper-12 { left: 1274px; }
    .frame .text-wrapper-13 { left: 1359px; }
    .frame .back-1 {
        position: absolute;
        width: 529px;
        height: 165px;
        top: 982px;
        left: 85px;
    }
    .frame .back-2 {
        position: absolute;
        width: 630px;
        height: 244px;
        top: 2306px;
        left: 202px;
    }
    .frame .back-3 {
        position: absolute;
        width: 1070px;
        height: 367px;
        top: 4436px;
        left: -120px;
    }
    .frame .back-4 {
        position: absolute;
        width: 1500px;
        height: 499px;
        top: 4150px;
        left: 760px;
    }
    .frame .back-5 {
        position: absolute;
        width: 879px;
        height: 271px;
        top: 6116px;
        left: 505px;
    }
    .frame .text-wrapper-17 {
        position: absolute;
        top: 6198px;
        left: 669px;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #000000;
        font-size: 101px;
        letter-spacing: 0;
        text-decoration: none;
        transition: transform 0.3s ease, letter-spacing 0.3s ease;
    }
    .frame .text-wrapper-17:hover {
        transform: scale(1.02);
        letter-spacing: 2px;
    }
    .frame .element-samal-video {
        position: absolute;
        top: 6419px;
        left: 56px;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #ffffff;
        font-size: 19px;
    }
    .frame .text-wrapper-14,
    .frame .text-wrapper-15,
    .frame .text-wrapper-16 {
        position: absolute;
        top: 6419px;
        font-family: "Bounded-Light", Helvetica;
        font-weight: 300;
        color: #ffffff;
        font-size: 35px;
        text-decoration: none;
        transition: color 0.4s ease, transform 0.4s ease;
    }
    .frame .text-wrapper-14 { left: 1114px; }
    .frame .text-wrapper-15 { left: 1212px; }
    .frame .text-wrapper-16 { left: 1468px; }
    .frame .text-wrapper-14:hover,
    .frame .text-wrapper-15:hover,
    .frame .text-wrapper-16:hover {
        color: #FF6B00;
        transform: translateY(-4px);
    }
    .frame .hero-logo-main {
        position: absolute;
        top: 536px;
        left: 311px;
        font-family: "Nebula-Regular", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 317px;
        line-height: 1;
        white-space: nowrap;
    }
    .frame .hero-logo-sub {
        position: absolute;
        top: 808px;
        left: 319px;
        font-family: "Nebula-Regular", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 109px;
        line-height: 1;
        white-space: nowrap;
    }
}
/* --- ПРОМЕЖУТОЧНАЯ ВЕРСИЯ (769px - 1800px) - все уменьшено в 2 раза --- */
@media (min-width: 769px) and (max-width: 1800px) {
    html, body {
        height: 100%;
        overflow: hidden;
        position: fixed;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
        color: #ffffff;
        font-family: "Bounded-ExtraLight", Helvetica, sans-serif;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }
    html {
        -ms-content-zooming: none;
        -ms-touch-action: pan-y pinch-zoom;
    }
    .frame {
        background-color: #000000;
        width: 960px; /* 1920 / 2 */
        height: auto; /* 7978 / 2 */
        position: relative;
        margin: 0 auto;
        transform-origin: top center;
        opacity: 0;
        transition: opacity 1.5s ease;
    }
    .frame.visible {
        opacity: 1;
    }
    /* Скрываем языковой переключатель */
    .frame .language-switcher {
        display: none;
    }
    /* Десктопные позиции элементов, уменьшенные в 2 раза */
    .frame .video {
        position: absolute;
        top: 20px; /* 41 / 2 ≈ 20.5 */
        left: 25px; /* 50 / 2 */
        width: 910px; /* 1820 / 2 */
        height: 355px; /* 709 / 2 ≈ 354.5 */
        display: flex;
    }
    .frame .hero-video {
        width: 910px;
        height: 355px;
        object-fit: cover;
        border-radius: 31px; /* 61 / 2 ≈ 30.5 */
    }
    .frame .nav-contact {
        position: absolute;
        top: 514px; /* 1028 / 2 */
        left: 89px; /* 177 / 2 ≈ 88.5 */
        z-index: 10;
    }
    .frame .text-wrapper {
        display: inline-block;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #000000;
        font-size: 31px; /* 62 / 2 */
        letter-spacing: 0;
        text-decoration: none;
        transition: transform 0.4s ease, color 0.4s ease;
    }
    .frame .text-wrapper:hover {
        transform: scale(1.05);
        color: #333333;
    }
    .frame .video-2 {
        position: absolute;
        top: 558px; /* 1115 / 2 ≈ 557.5 */
        left: 413px; /* 826 / 2 */
        width: 522px; /* 1044 / 2 */
        height: 261px; /* 522 / 2 */
    }
    .frame .video-3 {
        position: absolute;
        top: 857px; /* 1713 / 2 ≈ 856.5 */
        left: 524px; /* 1048 / 2 */
        width: 411px; /* 822 / 2 */
        height: 220px; /* 440 / 2 */
    }
    .frame .video-2:hover,
    .frame .video-3:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* 30/2, 60/2 */
    }
    .frame .element-nano {
        position: absolute;
        top: 623px; /* 1245 / 2 ≈ 622.5 */
        left: 25px; /* 50 / 2 */
        width: 335px; /* 670 / 2 */
        height: 168px; /* 335 / 2 ≈ 167.5 */
    }
    .frame .element-df-nano-k {
        position: absolute;
        top: 857px; /* 1713 / 2 */
        left: 27px; /* 54 / 2 */
        width: 440px; /* 879 / 2 ≈ 439.5 */
        height: 220px; /* 440 / 2 */
    }
    .frame .element-nano:hover,
    .frame .element-df-nano-k:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    }
    .frame .p {
        position: absolute;
        top: 1165px; /* 2330 / 2 */
        left: 148px; /* 296 / 2 */
        height: 111px; /* 221 / 2 ≈ 110.5 */
        display: flex;
        align-items: center;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-size: 89px; /* 178 / 2 */
        letter-spacing: 9px; /* 18 / 2 */
        line-height: 1;
        white-space: nowrap;
    }
    .frame .span {
        font-weight: 200;
        color: #000000;
    }
    .frame .text-wrapper-4 {
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #000000;
    }
    .frame .text-wrapper-5 {
        font-family: "Bounded-ExtraBold", Helvetica;
        font-weight: 800;
        color: #ffffff;

    }
    .frame .text-wrapper-6 {
        position: absolute;
        top: 1245px; /* 2490 / 2 */
        left: 66px; /* 144 / 2 */
        font-family: "Bounded-ExtraBold", Helvetica;
        font-weight: 800;
        color: #ffffff;
        font-size: 106px; /* 211 / 2 ≈ 105.5 */
        letter-spacing: 11px; /* 21 / 2 ≈ 10.5 */
        line-height: 1;
        white-space: nowrap;
    }
    .frame .youtube-reels-shorts {
        position: absolute;
        top: 1178px; /* 2394 / 2 */
        left: 689px; /* 1378 / 2 */
        width: 189px; /* 377 / 2 ≈ 188.5 */
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #ffffff;
        font-size: 11px; /* 21 / 2 ≈ 10.5 */
        letter-spacing: 1px;
        line-height: 13px; /* 26 / 2 */
    }
    .frame .img-3 {
        position: absolute;
        top: 1440px; /* 2879 / 2 ≈ 1439.5 */
        left: 26px; /* 52 / 2 */
        width: 909px; /* 1818 / 2 */
        height: 355px; /* 709 / 2 ≈ 354.5 */
        object-fit: cover;
        border-radius: 31px;
        transition: transform 0.6s ease;
    }
    .frame .img-3:hover {
        transform: scale(1.02);
    }
    .frame .logo {
        position: absolute;
        top: 1735px; /* 3469 / 2 ≈ 1734.5 */
        left: 401px; /* 801 / 2 ≈ 400.5 */
        width: 160px; /* 319 / 2 ≈ 159.5 */
        height: 60px; /* 119 / 2 ≈ 59.5 */
    }
    .frame .img-2 {
        position: absolute;
        top: 1863px; /* 3726 / 2 */
        left: 688px; /* 1376 / 2 */
        width: 221px; /* 442 / 2 */
        height: 295px; /* 589 / 2 ≈ 294.5 */
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .photo-2 {
        position: absolute;
        top: 1896px; /* 3791 / 2 ≈ 1895.5 */
        left: 354px; /* 708 / 2 */
        width: 293px; /* 586 / 2 */
        height: 391px; /* 781 / 2 ≈ 390.5 */
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .photo-3 {
        position: absolute;
        top: 1863px; /* 3726 / 2 */
        left: 51px; /* 102 / 2 */
        width: 256px; /* 512 / 2 */
        height: 341px; /* 681 / 2 ≈ 340.5 */
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .photo-4 {
        position: absolute;
        top: 2686px; /* 5371 / 2 ≈ 2685.5 */
        left: 54px; /* 108 / 2 */
        width: 326px; /* 651 / 2 ≈ 325.5 */
        height: 333px; /* 666 / 2 */
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .photo-8 {
        position: absolute;
        top: 2686px;
        left: 413px; /* 825 / 2 ≈ 412.5 */
        width: 500px; /* 999 / 2 ≈ 499.5 */
        height: 333px;
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .dsc {
        position: absolute;
        top: 2330px; /* 4659 / 2 ≈ 2329.5 */
        left: 587px; /* 1173 / 2 ≈ 586.5 */
        width: 326px; /* 651 / 2 ≈ 325.5 */
        height: 332px; /* 664 / 2 */
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .dsc-2 {
        position: absolute;
        top: 2330px;
        left: 54px; /* 108 / 2 */
        width: 500px; /* 999 / 2 ≈ 499.5 */
        height: 333px;
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.5s ease;
    }
    .frame .img-2:hover,
    .frame .photo-2:hover,
    .frame .photo-3:hover,
    .frame .photo-4:hover,
    .frame .photo-8:hover,
    .frame .dsc:hover,
    .frame .dsc-2:hover {
        transform: scale(1.03);
    }
    .frame .clients-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 1822px; /* 3643 / 2 ≈ 1821.5 */
        left: 0;
        width: 100%;
    }
    .frame .clients-list li {
        position: absolute;
        top: 0;
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #ffffff;
        font-size: 11px; /* 22 / 2 */
        transition: color 0.4s ease;
    }
    .frame .clients-list li:hover {
        color: #FF6B00;
    }
    .frame .text-wrapper-7 { left: 239px; } /* 477 / 2 ≈ 238.5 */
    .frame .text-wrapper-8 { left: 295px; } /* 590 / 2 */
    .frame .text-wrapper-9 { left: 365px; } /* 730 / 2 */
    .frame .text-wrapper-10 { left: 471px; } /* 942 / 2 */
    .frame .text-wrapper-11 { left: 570px; } /* 1140 / 2 */
    .frame .text-wrapper-12 { left: 637px; } /* 1274 / 2 */
    .frame .text-wrapper-13 { left: 680px; } /* 1359 / 2 ≈ 679.5 */
    .frame .back-1 {
        position: absolute;
        width: 265px; /* 529 / 2 ≈ 264.5 */
        height: 83px; /* 165 / 2 ≈ 82.5 */
        top: 491px; /* 982 / 2 */
        left: 43px; /* 85 / 2 ≈ 42.5 */
    }
    .frame .back-2 {
        position: absolute;
        width: 315px; /* 630 / 2 */
        height: 122px; /* 244 / 2 */
        top: 1153px; /* 2306 / 2 */
        left: 101px; /* 202 / 2 */
    }
    .frame .back-3 {
        position: absolute;
        width: 535px; /* 1070 / 2 */
        height: 184px; /* 367 / 2 ≈ 183.5 */
        top: 2218px; /* 4436 / 2 */
        left: -60px; /* -120 / 2 */
    }
    .frame .back-4 {
        position: absolute;
        width: 750px; /* 1500 / 2 */
        height: 250px; /* 499 / 2 ≈ 249.5 */
        top: 2075px; /* 4150 / 2 */
        left: 380px; /* 760 / 2 */
    }
    .frame .back-5 {
        position: absolute;
        width: 440px; /* 879 / 2 ≈ 439.5 */
        height: 136px; /* 271 / 2 ≈ 135.5 */
        top: 3058px; /* 6116 / 2 */
        left: 253px; /* 505 / 2 ≈ 252.5 */
    }
    .frame .text-wrapper-17 {
        position: absolute;
        top: 3099px; /* 6198 / 2 */
        left: 335px; /* 669 / 2 ≈ 334.5 */
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #000000;
        font-size: 51px; /* 101 / 2 ≈ 50.5 */
        letter-spacing: 0;
        text-decoration: none;
        transition: transform 0.3s ease, letter-spacing 0.3s ease;
    }
    .frame .text-wrapper-17:hover {
        transform: scale(1.02);
        letter-spacing: 1px; /* 2 / 2 */
    }
    .frame .element-samal-video {
        position: absolute;
        top: 3210px; /* 6419 / 2 ≈ 3209.5 */
        left: 28px; /* 56 / 2 */
        font-family: "Bounded-ExtraLight", Helvetica;
        font-weight: 200;
        color: #ffffff;
        font-size: 10px; /* 19 / 2 ≈ 9.5 */
    }
    .frame .text-wrapper-14,
    .frame .text-wrapper-15,
    .frame .text-wrapper-16 {
        position: absolute;
        top: 3210px;
        font-family: "Bounded-Light", Helvetica;
        font-weight: 300;
        color: #ffffff;
        font-size: 18px; /* 35 / 2 ≈ 17.5 */
        text-decoration: none;
        transition: color 0.4s ease, transform 0.4s ease;
    }
    .frame .text-wrapper-14 { left: 557px; } /* 1114 / 2 */
    .frame .text-wrapper-15 { left: 606px; } /* 1212 / 2 */
    .frame .text-wrapper-16 { left: 734px; } /* 1468 / 2 */
    .frame .text-wrapper-14:hover,
    .frame .text-wrapper-15:hover,
    .frame .text-wrapper-16:hover {
        color: #FF6B00;
        transform: translateY(-2px); /* 4 / 2 */
    }
    .frame .hero-logo-main {
        position: absolute;
        top: 268px; /* 536 / 2 */
        left: 156px; /* 311 / 2 ≈ 155.5 */
        font-family: "Nebula-Regular", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 159px; /* 317 / 2 ≈ 158.5 */
        line-height: 1;
        white-space: nowrap;
    }
    .frame .hero-logo-sub {
        position: absolute;
        top: 404px; /* 808 / 2 */
        left: 160px; /* 319 / 2 ≈ 159.5 */
        font-family: "Nebula-Regular", Helvetica;
        font-weight: 400;
        color: #ffffff;
        font-size: 55px; /* 109 / 2 ≈ 54.5 */
        line-height: 1;
        white-space: nowrap;
    }
    
    /* Адаптация play-icon для промежуточной версии */
    .video-thumb-wrapper .play-icon {
        width: 40px;
        height: 40px;
    }
    .video-thumb-wrapper {
        border-radius: 10px;
    }
    .video-thumb-wrapper .video-thumb-img {
        border-radius: 10px;
    }
}
/* --- МОБИЛЬНАЯ ВЕРСИЯ (<= 768px) --- */
@media (max-width: 768px) {
    html {
        overflow-x: hidden;
    }

    body {
        background-color: #000000;
        color: #ffffff;
        font-family: "Bounded-ExtraLight", Helvetica, sans-serif;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        min-height: 100vh;
        padding: 0 20px;
    }
    .preloader {
        height: 100% !important; /* Было: 100% - теперь 600px */
        /* Или используйте: height: 50vh; - для 50% высоты экрана */
    }

    .preloader .preloader-logo {
        width: 240px !important; /* Уменьшаем размер логотипа */
        height: 100% !important;
    }
    /* Мобильная шапка - скрываем полностью */
    .mobile-header {
        display: none !important;
    }
    /* Основной контейнер */
    .frame {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        margin: 20px auto 40px !important;
        padding: 0 !important;
        max-width: 500px !important;
        padding-bottom: 120px;
    }
    /* Скрываем десктопную навигацию */
    .frame .nav-contact {
        display: none !important;
    }
    .frame .language-switcher {
        display: none !important;
    }
    /* Скрываем декоративные элементы */
    .frame .back-1,
    .frame .back-2,
    .frame .back-3,
    .frame .back-4,
    .frame .back-5 {
        display: none !important;
    }
    /* Герой-видео */
    .frame .video {
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        order: 1 !important;
    }
    .frame .hero-video {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        display: block !important;
    }
    /* Единый блок логотипа */
    .frame .hero-logo-main {
        position: relative !important;
        top: -85px !important;
        left: 50% !important;
        transform: translateX(calc(-50% + 5px)) !important;
        font-family: "Nebula-Regular", Helvetica !important;
        font-weight: 400 !important;
        color: #ffffff !important;
        font-size: 69px !important;
        line-height: 0.8 !important;
        text-align: center !important;
        white-space: nowrap !important;
        display: inline-block !important;
        width: auto !important;
        order: 2 !important;
        z-index: 5 !important;
        margin-bottom: 0 !important;
    }
    .frame .hero-logo-sub {
        position: relative !important;
        top: -115px !important;
        left: 50% !important;
        transform: translateX(calc(-50% + 3px)) !important;
        font-family: "Nebula-Regular", Helvetica !important;
        font-weight: 400 !important;
        color: #ffffff !important;
        font-size: 24px !important;
        line-height: 0.8 !important;
        text-align: center !important;
        white-space: nowrap !important;
        display: inline-block !important;
        width: auto !important;
        order: 3 !important;
        z-index: 5 !important;
        margin-bottom: 0px !important;
    }
    /* Все видео и фото - без обрезки, с сохранением пропорций */
    .frame .video-2 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        cursor: pointer !important;
        order: 6 !important;
        margin-top: -120px !important;  /* Уменьшить дистанцию до логотипа */
    }
    .frame .element-nano {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        cursor: pointer !important;
        order: 7 !important;
    }
    .frame .video-3 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        cursor: pointer !important;
        order: 8 !important;
    }
    .frame .element-df-nano-k {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        cursor: pointer !important;
        order: 9 !important;
    }
    /* Широкое портфолио */
    .frame .img-3 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 13 !important;
    }
    /* Фотографии портфолио - показываем полностью */
    .frame .photo-3 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 15 !important;
    }
    .frame .img-2 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 16 !important;
    }
    .frame .photo-2 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 17 !important;
    }
    .frame .dsc-2 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 18 !important;
    }
    .frame .dsc {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 19 !important;
    }
    .frame .photo-4 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 20 !important;
    }
    .frame .photo-8 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 20px !important;
        top: auto !important;
        left: auto !important;
        order: 21 !important;
    }
    /* Блок "Что мы делаем" */
    .frame .p {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        display: block !important;
        font-family: "Bounded-ExtraLight", Helvetica !important;
        font-size: 48px !important;
        letter-spacing: 2px !important;
        line-height: 0.7 !important;
        white-space: normal !important;
        text-align: center !important;
        order: 10 !important;
        margin: 20px 0 0 !important;
        word-spacing: -8px !important;
    }
    .frame .span {
        font-weight: 200 !important;
        color: #ffffff !important;
    }
    .frame .text-wrapper-4 {
        font-family: "Bounded-ExtraLight", Helvetica !important;
        font-weight: 200 !important;
        color: #ffffff !important;
    }
    .frame .text-wrapper-5 {
        font-family: "Bounded-ExtraBold", Helvetica !important;
        font-weight: 800 !important;
        color: #FF6B00 !important;
    }
    .frame .text-wrapper-6 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        font-family: "Bounded-ExtraBold", Helvetica !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        font-size: 52px !important;
        letter-spacing: 3px !important;
        line-height: 0.7 !important;
        white-space: normal !important;
        text-align: center !important;
        order: 11 !important;
        margin: -5px 0 0 !important;
    }
    /* Список услуг */
    .frame .youtube-reels-shorts {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        font-family: "Bounded-ExtraLight", Helvetica !important;
        font-weight: 200 !important;
        color: #ffffff !important;
        font-size: 18px !important;
        letter-spacing: 2px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        order: 12 !important;
        margin: 10px 0 !important;
    }
    /* Логотип - скрываем мерцающий в середине страницы */
    .frame .logo {
        display: none !important;
    }
    /* Клиенты */
    .frame .clients-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        order: 22 !important;
    }
    .frame .clients-list li {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        font-family: "Bounded-ExtraLight", Helvetica !important;
        font-weight: 200 !important;
        color: #ffffff !important;
        font-size: 16px !important;
        white-space: nowrap !important;
    }
    /* Контактная ссылка - уменьшена */
    .frame .text-wrapper-17 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        font-family: "Bounded-ExtraLight", Helvetica !important;
        font-weight: 200 !important;
        color: #FF6B00 !important;
        font-size: 48px !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        display: block !important;
        order: 23 !important;
        margin: 40px 0 20px !important;
    }
    /* Футер - убрана строчка site made by */
    .frame .element-samal-video {
        display: none !important;
    }
    .frame .text-wrapper-14,
    .frame .text-wrapper-15,
    .frame .text-wrapper-16 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        font-family: "Bounded-Light", Helvetica !important;
        font-weight: 300 !important;
        color: #ffffff !important;
        font-size: 28px !important;
        text-decoration: none !important;
        display: inline-block !important;
        margin: 8px 12px !important;
        order: 25 !important;
        text-align: center !important;
    }
    .frame .text-wrapper-14:active,
    .frame .text-wrapper-15:active,
    .frame .text-wrapper-16:active {
        color: #FF6B00 !important;
    }
    
    /* Мобильная адаптация play-icon */
    .video-thumb-wrapper {
        border-radius: 20px !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
    }
    .video-thumb-wrapper .video-thumb-img {
        border-radius: 20px !important;
        object-fit: contain !important;
    }
    .video-thumb-wrapper .play-icon {
        width: 50px !important;
        height: 50px !important;
    }
}
/* --- Модальное окно (общее) --- */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.video-modal.active {
    display: block;
}
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 1200px;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.modal-close:hover {
    background: rgba(255, 107, 0, 0.8);
}
#modalVideo {
    width: 100%;
    display: block;
    max-height: 85vh;
}
.video-trigger {
    cursor: pointer;
}
/* --- АНИМАЦИИ --- */
.animate-fade-in,
.animate-fade-in-up,
.animate-fade-in-down,
.animate-fade-in-left,
.animate-fade-in-right,
.animate-fade-in-scale,
.animate-fade-in-stagger,
.animate-fade-in-back {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.animate-fade-in.visible {
    opacity: 1;
}
.animate-fade-in-up {
    transform: translateY(40px);
}
.animate-fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-fade-in-down {
    transform: translateY(-40px);
}
.animate-fade-in-down.visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-fade-in-left {
    transform: translateX(-40px);
}
.animate-fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.animate-fade-in-right {
    transform: translateX(40px);
}
.animate-fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.animate-fade-in-scale {
    transform: scale(0.9);
}
.animate-fade-in-scale.visible {
    opacity: 1;
    transform: scale(1);
}
.animate-fade-in-back {
    transform: scale(0.95);
}
.animate-fade-in-back.visible {
    opacity: 1;
    transform: scale(1);
}
.animate-fade-in-stagger {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: calc(var(--stagger-index, 0) * 0.06s);
}
.animate-fade-in-stagger.visible {
    opacity: 1;
    transform: translateY(0);
}
.pulse-animation {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.pulse-animation-slow {
    animation: pulseSlow 3.5s ease-in-out infinite;
}
@keyframes pulseSlow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.92);
    }
}
.parallax {
    transition: transform 0.3s ease-out;
    will-change: transform;
}
/* --- MEDIA QUERY ДЛЯ ДЕСКТОПОВ (ПАРАЛЛАКС) --- */
@media (min-width: 769px) {
    .parallax {
        will-change: transform;
        transition: transform 0.3s ease-out;
    }
}
/* --- HOVER ЭФФЕКТЫ ДЛЯ ДЕСКТОПОВ --- */
@media (min-width: 769px) {
    .frame .video-2:hover,
    .frame .video-3:hover {
        transform: scale(1.03);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    }
    .frame .element-nano:hover,
    .frame .element-df-nano-k:hover {
        transform: scale(1.03);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    }
    .frame .img-2:hover,
    .frame .photo-2:hover,
    .frame .photo-3:hover,
    .frame .photo-4:hover,
    .frame .photo-8:hover,
    .frame .dsc:hover,
    .frame .dsc-2:hover {
        transform: scale(1.03);
    }
    .frame .text-wrapper:hover {
        transform: scale(1.05);
        color: #333333;
    }
    .frame .text-wrapper-17:hover {
        transform: scale(1.02);
        letter-spacing: 2px;
    }
    .frame .text-wrapper-14:hover,
    .frame .text-wrapper-15:hover,
    .frame .text-wrapper-16:hover {
        color: #FF6B00;
        transform: translateY(-4px);
    }
    .frame .clients-list li:hover {
        color: #FF6B00;
    }
}
/* --- HOVER ЭФФЕКТЫ ДЛЯ МОБИЛЬНЫХ --- */
@media (max-width: 768px) {
    .frame .img-3:active {
        transform: scale(1.02);
    }
    .frame .video-2:active,
    .frame .video-3:active,
    .frame .element-nano:active,
    .frame .element-df-nano-k:active {
        transform: scale(1.03);
    }
    .frame .text-wrapper-14:active,
    .frame .text-wrapper-15:active,
    .frame .text-wrapper-16:active {
        color: #FF6B00;
    }
}
/* --- ДОСТУПНОСТЬ: FOCUS-VISIBLE --- */
.video-trigger:focus-visible {
    outline: 2px solid #FF6B00;
    outline-offset: 2px;
}
.footer-spacer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 150px;  /* регулируйте это значение — это ваш "воздух" */
    pointer-events: none;
    opacity: 0;
}