/*Обнуление*/
 * {
     padding: 0;
     margin: 0;
     border: 0;
}
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 :focus, :active {
     outline: none;
}
 a:focus, a:active {
     outline: none;
}
 nav, footer, header, aside {
     display: block;
}
 html, body {
     height: 100%;
     width: 100%;
     font-size: 100%;
     line-height: 1;
     font-size: 14px;
     -ms-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
}
 input, button, textarea {
     font-family: inherit;
}
 input::-ms-clear {
     display: none;
}
 button {
     cursor: pointer;
}
 button::-moz-focus-inner {
     padding: 0;
     border: 0;
}
 a, a:visited {
     text-decoration: none;
}
 a:hover {
     text-decoration: none;
}
 ul li {
     list-style: none;
}
 img {
     vertical-align: top;
}
 h1, h2, h3, h4, h5, h6 {
     font-size: inherit;
     font-weight: 400;
}
/*--------------------*/


body {
    background-color: #03050a;
}
.wrapper {
    position: relative;
    width: 100%;
    min-width: 100dvw;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
}

.content_wrapper{
    position: relative;
    width: 100dvw;
    height: 177.78dvw;
}



.fone{
    position: absolute;
    left: -15%;
    top: -15%;
    width: 130%;
    height: 130%;
    background: 
        url('../img/rays_1080x1920.svg?v=2026.09.006') center / cover no-repeat,
        url('../img/fone_1080x1920.jpg?v=2026.09.006') center / cover no-repeat;
}

.fone.point{
    background:
        url('../img/point_1080x1920.svg?v=2026.09.006') center / cover no-repeat,
        url('../img/rays_1080x1920.svg?v=2026.09.006') center / cover no-repeat,
        url('../img/fone_1080x1920.jpg?v=2026.09.006') center / cover no-repeat;
}

.spotlight {
    position: absolute;
    left: 20.65%;
    top: 52%;
    width: 31%;
    height: 8%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.55) 30%,
      rgba(255,255,255,0.15) 55%,
      rgba(255,255,255,0) 75%
    );
    mix-blend-mode: overlay;
    animation: sweep 6s ease-in-out infinite;
}

@keyframes sweep {
    0%   { left: 20%; }
    50%  { left: 80%; }
    100% { left: 20%; }
}


.main-player{
    position: absolute;
    left: 40.56%;
    top: 60.05%;
    width: 18.89%;
    height: 10.63%;
}

.main-player img{
    width: 100%;
    height: auto;
    transition: filter 0.3s ease;
}

.main-player img:hover {
    filter: drop-shadow(0 0 min(1dvw, 1dvh) #404040);
}

.logo{
    position: absolute;
    right: 0;
    bottom: 1.15%;
    width: 40.56%;
    height: 16.46%;
}

.logo img{
    width: 100%;
    height: auto;
}

.contacts{
    position: absolute;
    left: 0;
    bottom: 4.22%;
    width: 75.46%;
    height: 21.56%;
    background: url('../img/contacts_1080x1920.svg?v=2026.09.006') center / cover no-repeat;
    display: flex;
    transition: filter 0.3s ease;
}

.contacts:hover{
    filter: drop-shadow(0 0 min(1dvw, 1dvh) #404040);
}

.contacts > div {
    flex: 1;
    opacity: 0;
}

.contacts a {
    display: block;
    width: 100%;
    height: 100%;

}


@media(max-aspect-ratio: 927/1920){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100dvw;
        height: 177.78dvw;
    }
}

@media (min-aspect-ratio: 1080/1920) and (max-aspect-ratio: 1394/1920){
    .content_wrapper{
        margin: 0 auto;
        width: 56.25dvh;
        height: 100dvh;
    }
}

@media (min-aspect-ratio: 1395/1920) and (max-aspect-ratio: 1920/1480){
    .logo{
        right: 0;
        bottom: 7.71%;
        width: 41.41%;
        height: 22.71%;
    }
    .contacts{
        left: 0;
        bottom: 8.28%;
        width: 41.46%;
        height: 21.25%;
        background: url('../img/contacts_1920x1920.svg?v=2026.09.006') center / cover no-repeat;
    }
    .main-player{
        left: 44.69%;
        top: 77.19%;
        width: 10.63%;
        height: 10.63%;
    }
    .fone{
        background: 
            url('../img/rays_1920x1920.svg?v=2026.09.006') center / cover no-repeat,
            url('../img/fone_1920x1920.jpg?v=2026.09.006') center / cover no-repeat;
    }

    .fone.point{
        background:
            url('../img/point_1920x1920.svg?v=2026.09.006') center / cover no-repeat,
            url('../img/rays_1920x1920.svg?v=2026.09.006') center / cover no-repeat,
            url('../img/fone_1920x1920.jpg?v=2026.09.006') center / cover no-repeat;
    }
    .spotlight {
        top: 54%;
        width: 35%;
    }
}

@media (min-aspect-ratio: 1920/1480){
    .logo{
        right: 0;
        bottom: 0.93%;
        width: 30.52%;
        height: 25.28%;
    }
    .contacts{
        left: 0;
        bottom: 1.48%;
        width: 27.45%;
        height: 23.61%;
        background: url('../img/contacts_1920x1080.svg?v=2026.09.006') center / cover no-repeat;
    }
    .main-player{
        left: 44.17%;
        top: 79.17%;
        width: 10.63%;
        height: 18.89%;
    }
    .fone{
        background: 
            url('../img/rays_1920x1080.svg?v=2026.09.006') center / cover no-repeat,
            url('../img/fone_1920x1080.jpg?v=2026.09.006') center / cover no-repeat;
    }

    .fone.point{
        background:
            url('../img/point_1920x1080.svg?v=2026.09.006') center / cover no-repeat,
            url('../img/rays_1920x1080.svg?v=2026.09.006') center / cover no-repeat,
            url('../img/fone_1920x1080.jpg?v=2026.09.006') center / cover no-repeat;
    }
    .spotlight {
        top: 67%;
        width: 31%;
        height: 11%;
    }

}

@media (min-aspect-ratio: 1395/1920) and (max-aspect-ratio: 1/1){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100dvw;
        height: 100dvw;
    }
    .fone{
        left: -15%;
        top: -15%;
        width: 130%;
        height: 130%;
    }
}


@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1920/1480){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100dvh;
        height: 100dvh;
    }
    .fone{
        left: -15%;
        top: -15%;
        width: 130%;
        height: 130%;
    }
}

@media (min-aspect-ratio: 1920/1480) and (max-aspect-ratio: 1920/1080){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100dvw;
        height: 56.25dvw;
    }
    .fone{
        left: -15%;
        top: -15%;
        width: 130%;
        height: 130%;
    }
}

@media (min-aspect-ratio: 1920/1080){
    .content_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 177.78dvh;
        height: 100dvh;
    }
    .fone{
        left: -15%;
        top: -15%;
        width: 130%;
        height: 130%;
    }
}