:root {
    --orange: #FF7700;
    --asphalt: #302F2C;
    --paper: #EFEDE3;
    --ff: 'Zalando Sans Expanded', sans-serif;
    --pd: 'Playfair Display', 'sans-serif';
}
* {
    margin: 0;
    padding: 0;
 }

 body {
    background-color: var(--paper);
    min-height: 400vh;
    font-family: var(--ff);
    overflow-x: hidden !important;
}

/* ПЕРВЫЙ ЭКРАН НАЧАЛО */
.page-1 {
    width: 100%;
    height: 100vh;
    background-color: var(--asphalt);
}
.header-1 {
    display: flex;
    justify-content: space-between;
    padding: 4vh 5vw;
}
.status-block {
    display: flex;
    align-items: center;
    gap: 8px;
}
.coordinates {
    display: flex;
    color: var(--paper);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 40%;
}
.sys-on, .nal-coord {
    color: var(--paper);
    font-weight: 400;
    font-size: 12px;
    opacity: 60%;
    letter-spacing: 40%;
}
.point {
    border-radius: 50%;
    height: 6px;
    width: 6px;
    background-color: var(--orange);
}
.seven {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-weight: 500;
    padding-top: 40vh;
    color: var(--paper);
    font-size: 23vw;
}
.v-wrapper {
    position: relative;
    color: var(--orange);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
.v-sharp {
    position: absolute;
    top: 81%;
    width: 0.145em; 
    height: 0.145em;
    /* z-index: 1;  */
}
/* ПЕРВЫЙ ЭКРАН КОНЕЦ */



/* ВТОРОЙ ЭКРАН НАЧАЛО */
.page-2 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    background-color: var(--paper);
    position: relative;
}
.menu {
    display: flex;
    justify-content: space-between;
    position: absolute;
    letter-spacing: 30%;
    top: 5%;
    left: 3%;
    right: 3%;
    
}
.menu a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1vh;
    font-weight: 100;
    color: var(--asphalt);
}

.center-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    /* padding: 0 20px; */
}

.precision {
    position: relative;
    text-align: center;
    font-size: 8.6vw;
    font-weight: 400;
    letter-spacing: 50%;
    width: 100%;
    color: var(--asphalt);
    width: fit-content;
    display: flex;
}
/* .precision span {
    display: inline; 
} */

.tochka {
    color: var(--orange);
    position: absolute;
    left: 97%;
}
.tochnost {
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: 2vw;
    font-weight: 100;
    color: var(--asphalt);
    opacity: 10%;
}

/* ВТОРОЙ ЭКРАН КОНЕЦ */



/* ТРЕТИЙ ЭКРАН НАЧАЛО */
.page-3 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* background-color: var(--asphalt); */
    position: relative;

}
.num {
    font-size: 120vh;
    font-weight: 600;
    color: #e5e3da;
    opacity: 1;
    position: absolute;
    right: 5%;
}
.makeway {
    letter-spacing: 20%;
    position: absolute;
    right: 3vw;
    bottom: 14vh;
    list-style-type: none;
    font-weight: 300;
    font-size: 0.7vw;
}
.main-info {
    position: absolute;
    left: 10vw;
}
.title-info {
    max-width: 70%;
    font-family: var(--pd);
    font-weight: 200;
    letter-spacing: -2%;
    font-size: 4.4vw;
}
.other-info {
    max-width: 50%;
    font-weight: 300;
    letter-spacing: 20%;
    font-size: 1.25vw;
}
.leaner {
    height: 27px;
    /* background-color: white; */
    width: 20vw;
    border-bottom: 1px solid orange;
    margin-bottom: 20px;
    position: relative;
}
.leaner > div {
    width: 4px;
    height: 4px;
    background-color: var(--orange);
    position: absolute;
    bottom: -10%;
    left: -3%;
}
/* ТРЕТИЙ ЭКРАН КОНЕЦ */





/* ЧЕТВЕРТЫЙ ЭКРАН НАЧАЛО */
.page-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
    /* background-color: var(--asphalt); */
    background-color: #1C1D21;
    position: relative;
    
}
.lab {
    width: 100%;
    height: 100%;
    display: block;
    /* object-fit: contain; */
}
.maze-container {
    position: relative;
    max-height: 95vh; 
    max-width: 95vw;
    aspect-ratio: 1440 / 1024;
    margin: auto;
}

.maze-grid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    display: grid;
    grid-template-columns: repeat(22, 1fr);
    grid-template-rows: repeat(13, 1fr);
    
    pointer-events: none;
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
}

.maze-grid div {
    pointer-events: auto; /* Возвращаем кликабельность тексту */
    color: rgba(255, 255, 255, 0.6);
    
}
.seven-center {
    grid-column: 9 / 15; 
    grid-row: 6 / 9;
    display: flex;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-size: 4vh;
    letter-spacing: 1vw;
    opacity: 50%;
    font-weight: 400;
    padding-left: 1vw; /* Выравнивание по центру*/
    transform: translateY(1vh);
}
.contact-tg, .contact-inst, .architect, .contact-email {
    font-size: 1.3vh;
    letter-spacing: 5%;
    font-weight: 400;
    opacity: 40%;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    pointer-events: auto;
}
.contact-tg {
    grid-column: 2 / 9; 
    grid-row: 9; 
    align-self: flex-end; transform: translateY(2vh);
    justify-self: start;
    
}
.contact-inst {
    grid-column: 16 / 22;
    grid-row: 3; 
    align-self: center; transform: translateY(0.5vh);
    justify-self: center;
    text-align: center;
}
.architect {
    grid-column: 4 / 8;
    grid-row: 4;
    align-self: center; transform: translateY(-0.7vh);
    justify-self: center;
    text-align: center;

    letter-spacing: 20%;
    
}
.contact-email {
    grid-column: 15 / 21;
    grid-row: 11;
    align-self: flex-end;
    justify-self: center;
    text-align: center;
}


.footer-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 2%;
}
.header-info {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 6%;
    right: 0;
    position: relative;
}
.phrase, .est {
    font-size: 1.3vh;
    color: var(--paper);
    opacity: 10%;
    letter-spacing: 20%;
    font-weight: 400;
}

.arrow {
    position: absolute;
    display: inline-block;
    transform: rotate(90deg);
    color: var(--orange);
    left: 6.4%; top: 2.5%;
}
.a-1 {
    grid-row: 2;
    grid-column: 2;
    align-self: center; transform: rotate(90deg) translateX(-1vh) translateY(0vh) ;
    color: var(--orange);
}
.a-2 {
    grid-row: 7;
    
    align-self: flex-end; transform: translateX(-3vh) translateY(-1vh) ;
    color: var(--orange);
}
.a-3 {
    grid-column: 22;
    grid-row: 5;
    align-self: flex-start; transform: rotate(180deg) translateY(-0.9vh) translateX(-3vh);
    color: var(--orange);
}
.a-4 {
    grid-column: 9;
    grid-row: 13;
    align-self: flex-start; transform: rotate(-90deg) translateY(-0vh) translateX(-0vh);
    color: var(--orange);
}
/* ЧЕТВЕРТЫЙ ЭКРАН КОНЕЦ */


















/* АДАПТИВ ПОД МИНИ ТЕЛЕФОНЫ НАЧАЛО */

@media (min-width: 130px) {
    html, body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
    }

    /* ПЕРВЫЙ ЭКРАН НАЧАЛО */
    .page-1 {
        display: block;
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        width: 100%;
    }
    .page-1::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
        
        border: 1px solid rgba(255, 255, 255, 0.1); 
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 20%,
            transparent 50%,
            black 80%,
            transparent 100%
        );
        
        pointer-events: none; 
        z-index: 1;
    }
    .page-1::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        /* Ссылка на картинку */
        background-image: url('img/noise.png'); 
        background-repeat: repeat;
        background-size: 200px;
        
        pointer-events: none;    /* Чтобы можно было нажимать на кнопки под шумом */
        z-index: 100;            /* Шум должен быть НАД всеми слоями */
    }
    .seven-wrapper {
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        pointer-events: none;
    }
    .seven-outline {
        position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        font-size: 23vw; /* Поменять вот тут когда буду делать анимацю со скроллом */
        width: 100%; text-align: center;
        color: transparent;
        -webkit-text-stroke: 1px var(--paper);
        opacity: 0.1;
        z-index: 1;
        
    }
    .seven {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding-top: 0;
        width: 100%;
        font-size: 20vw;
    }
    .seven::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        height: 150px;
        width: 100px;
        background-color: var(--orange);
        opacity: 70%;
        border-radius: 50%;
        filter: blur(50px);
        z-index: -1;
    }

    .sys-on, .nal-coord {
        font-size: 2vw;
    }
    .page-1 {
        display: block; 
        padding: 0;
    }

    .mobile-top-left, 
    .mobile-bottom-right, 
    .mobile-bottom-left {
        position: absolute;
        font-size: 8px;
        font-weight: 200;
        letter-spacing: 20%;
        opacity: 60%;
        z-index: 2;
    }

    .mobile-top-left {
        top: 40px;
        left: 40px;
    }

    .mobile-bottom-left {
        bottom: 40px;
        left: 40px;
        letter-spacing: 40% !important;  
        opacity: 40%;      
    }

    .mobile-bottom-right {
        bottom: 40px;
        right: 40px;
        text-align: right;
    }

    .header-1 {
        display: none;
    }
    /* ПЕРВЫЙ ЭКРАН КОНЕЦ */





    /* ВТОРОЙ ЭКРАН НАЧАЛО */
    /* .precision {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 30vw;
        line-height: 0.85; 
        letter-spacing: 0;
        position: relative;
    }

    .precision span {
        display: block;
    }
    .orange-dot {
        position: absolute;
        right: 2.5%;
        bottom: 5%;
        width: 15px;
        height: 15px;
    } */
    /* ВТОРОЙ ЭКРАН КОНЕЦ */





    /* ТРЕТИЙ ЭКРАН НАЧАЛО */

    /* ТРЕТИЙ ЭКРАН КОНЕЦ */





    /* ЧЕТВЕРТЫЙ ЭКРАН НАЧАЛО */

    /* ЧЕТВЕРТЫЙ ЭКРАН КОНЕЦ */
    

}

/* АДАПТИВ ПОД МИНИ ТЕЛЕФОНЫ КОНЕЦ */


@media (min-width: 530px) and (max-width: 768px) {
    .sys-on, .nal-coord {
        font-size: 10px;
    }
    .tochnost {
        opacity: 0.6 !important;
    }
}

@media (min-width: 768px) {
    .sys-on, .nal-coord {
        font-size: 11px !important;
    }
    .seven::before {
        width: 180px;
        height: 120px;

        filter: blur(60px);
    }
}

@media (min-width: 1024px) {
    .seven {
        font-size: 23vw;
    }
    .seven::before {
        width: 210px;
        height: 140px;

        filter: blur(70px);
    }
    .mobile-bottom-right {
        top: 40px;
        right: 40px;
        text-align: right;
    }
    .mobile-bottom-left {
        left: 50%; bottom: 20px;
        transform: translateX(-50%);
        text-align: center;
        white-space: nowrap;
    }
}


/* ВТОРОЙ ЭКРАН НАЧАЛО */
@media (max-width: 425px) {
    .center-info {
        /* padding-left: 10%; */
        position: relative;
        width: 100%;
        height: 115vw;
    }
    .menu {
        right: 7%; left: 7%;
    }
    .precision {
        display: flex !important;      
        flex-direction: column;
        align-items: flex-start;
        font-size: 30vw;
        line-height: 0.8;
        width: 80%;
        letter-spacing: 0 !important; 
        position: absolute;
        left: 7%;
        top: 15%;
    }
    .precision span {
        display: inline !important;
        letter-spacing: 20%; 
        left: 5%;   
    }
    .cis {
        letter-spacing: 20% !important;
        padding-left: 8px;
    }
    .tochka {
        left: 96% !important;
        /* right: 20%; */
        color: #EFEDE3;
    }
    .tochnost {
        position: absolute;
        right: 10%; 
        top: 40%; 
        
        /* НАСТОЯЩИЙ ВЕРТИКАЛЬНЫЙ ТЕКСТ: */
        writing-mode: vertical-rl;
        text-orientation: sideways; /* Кладет буквы на бок, как при rotate(90deg) */
        
        font-size: 4.5vw !important;
        letter-spacing: 2.2em; 
        opacity: 1 !important;
    }

    .tochnost span {
        opacity: 0.5;
    }

    .tochnost span.n {
        color: var(--orange);
        opacity: 1 !important;
    }
    
    
    
}
/* ВТОРОЙ ЭКРАН КОНЕЦ */





/* ТРЕТИЙ ЭКРАН НАЧАЛО */

@media (max-width: 768px){
    .num {
        font-size: 70vh;
        position: absolute;
        right: -20%;
        top: 3%;
        z-index: 2;
        
    }
    .makeway {
        font-size: 2vw !important;
        top: 10vh;
        left: 11vw;
        line-height: 12px;
    }
    .main-info {
        top: 30%;
    }
    .title-info {
        max-width: 100%;
        font-size: 8vw;
    }
    .above-7 {
        position: relative;
        z-index: 3;
    }
    .hidden-m {
        position: relative;
        z-index: 1;
        display: inline-block;
    }
    .leaner {
        width: 64vw;
        margin-bottom: 20px;
        height: 0px;
    }
    .leaner > div {
        top: 0%;
        left: -8%;
    }
    .other-info {
        max-width: 100%;
        font-size: 3vw;
        letter-spacing: 20%;
    }
    .oi-1 {
        margin-top: 230px;
    }
    
}
/* ТРЕТИЙ ЭКРАН КОНЕЦ */