.intro{position:relative;width:100%;height:var(--app-height);overflow:hidden;margin-top:calc(var(--136) * -1);}

.intro-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index: 888;}
.intro-bg img{display:block;width:100%;height:100%;object-fit:cover;}
/*.intro-bg:after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--black);opacity:.6;}*/



.intro-3d{position:absolute;top:0;left:0;width:100%;height:100%;}


.intro-content{position:absolute;top:0;left:0;width:100%;height:100%;padding-top:calc(var(--120) + var(--6));padding-bottom:var(--60);}
.intro-content .content-container,.intro-content .row{height:100%;}





.intro-text{padding-left:var(--16);}
.intro-collapse{max-width:calc(var(--470) + var(--16));}
.intro-collapse p, .intro-collapse span{font-weight: 500;font-size:1.125em;line-height:1.25em;}




.intro-menu{position:relative;width:var(--440);margin: auto 0;}

.intro-menu-bg{position:absolute;top:50%;left:50%;width:140%;height:140%;mix-blend-mode:color-dodge;transform:translate(-50%,-50%);isolation:isolate;pointer-events:none;}
.intro-menu-bg img{display:block;width:100%;height:100%;object-fit:contain;}
.intro-menu ul{display:flex;flex-direction:column;gap:10px 0;}
.intro-menu ul li{}

.intro-menu ul li a{display:block;width:100%;padding-right:var(--24);}

.intro-sub-menu{position:absolute;top:0;left:100%;visibility:hidden;width:var(--440);transition:opacity .5s 0s,visibility 0s .5s;}
.intro-menu ul li:hover .intro-sub-menu{visibility:visible;transition:opacity .5s 0s,visibility 0s 0s;}

.intro-sub-menu li{transform:translateX(var(--16));opacity:0;transition:transform .5s, opacity .5s;transition-delay:0s;}



.intro-menu ul li:hover .intro-sub-menu li{transform:translateX(0);opacity:1;}

.intro-menu ul li:hover .intro-sub-menu li:nth-child(1){transition-delay:.1s;}
.intro-menu ul li:hover .intro-sub-menu li:nth-child(2){transition-delay:.2s;}
.intro-menu ul li:hover .intro-sub-menu li:nth-child(3){transition-delay:.3s;}
.intro-menu ul li:hover .intro-sub-menu li:nth-child(4){transition-delay:.4s;}
.intro-menu ul li:hover .intro-sub-menu li:nth-child(5){transition-delay:.5s;}





@media (max-width: 767px){
  .intro-menu{width:100%;}

  /* отключаем hover‑приёмы, управляем через JS */
  .intro-menu ul li:hover .intro-sub-menu,
  .intro-menu ul li:hover .intro-sub-menu li{transition:none;}

  .intro-sub-menu{
    position:static;       /* ADDED */
    left:auto;top:auto;
    width:100%;
    height:0;              /* ADDED */
    opacity:0;             /* ADDED */
    visibility:hidden;     /* ADDED */
    overflow:hidden;       /* ADDED */
    transition:none;       /* ADDED */
  }

  /* подпункты сразу видимы, анимация только на контейнере */
  .intro-sub-menu li{
    transform:none;
    opacity:1;
    transition:none;
  }
  .intro-menu ul li a {
	padding-right: 0;
  }

  .but {
	width: 100%;
  }

  /* раскрытый пункт */
  .intro-menu ul li.expanded>.intro-sub-menu{visibility:visible;}
}




/* Хедер только для главной, по центру */
.page-home .header .logo {
    display: block;
    height: calc(var(--36) + var(--1));

}

.page-home .header .logo svg {
    margin: 0 auto;
}


.intro-3d,
.intro-collapse,
.intro-menu,
.intro-title,
.footer-wrap,
.footer-trigger {
    pointer-events: auto;
}

.intro-content {
    pointer-events: none;
}

.intro-toggle {
    align-items: center;
    justify-content: center;
    margin-top: var(--10);
    gap: var(--10);
    cursor: pointer;
}

.intro-toggle svg {
    transition: transform 0.6s ease-in-out;
    transform: rotate(0deg);

}

.intro-toggle__active svg {
    transform: rotate(180deg);
}



.intro .footer-wrap,
.content .footer-wrap {
    z-index: 9999;
}

@media (max-width:1441px) {
    .intro-title h1 {
        font-size: 2.375em;

    }

    .but-inner span {
        font-size: 1.25em;
        padding: 0 var(--8) 0 var(--30);

    }

    .intro-collapse p,
    .intro-collapse span {
        font-size: 1em;
    }

    /* Не понятно как лучше. Если резиново, то мелко. А так крупно :( */
    /* .intro-collapse p, .intro-collapse span {
        font-size: 16px;
     }
     .intro-title h1 {
        font-size: 38px;
     } */
    .intro-collapse {
        max-width: calc(var(--470) - var(--36));
    }

    .intro-title {
        padding: var(--12) 0 var(--12) var(--10);
    }

    .intro-title-plus i {
        width: var(--10);
        height: var(--10);
    }
}


@media (max-width:767.98px) {
    .page-home .header {
        padding: var(--20) 0;
    }

    .page-home .header .logo {
        height: calc(var(--20) + var(--2));
    }



    .intro-menu-bg {
        display: none;
    }
    .intro-content .content-container .row {
        gap: var(--160);
    }

    .intro-title {
        padding: var(--12) var(--6) var(--12) var(--10);
        margin-bottom: 10px;
    }

    .intro {
        margin-top: calc((var(--60) + var(--6)) * -1);
    }

    .page-home .content-container {
        padding-left: var(--24);
        padding-right: var(--24);

    }

    .intro-menu .intro-sub-menu ul {
        padding-left: var(--30);
        margin-top: var(--6);
    }

    

    .but-inner span {
        padding: 0 var(--8) 0 var(--36);

    }

    .intro-text {
        height: 0;
        padding-left: 0;
    }

    .intro-title h1 {
        font-size: 1.875em;
    }

    .intro-collapse p,
    .intro-collapse span {
        font-size: 0.875em;
    }



    .intro {
        height: auto;
    }

    .intro-content {
        position: relative;
    }

    .intro-collapse {
        position: relative;
        z-index: 1;
    }

    

    .intro .footer-wrap {
        position: relative;
        bottom: unset;
        overflow: hidden;
    }

    .intro .mb-60 {
        margin-bottom: 0;
        padding-bottom: 0;
    }


    .intro {
        min-height: var(--app-height);
    }
    .page-home .content {
        padding-top: calc(var(--60) + var(--1) + var(--6));
    }
    .intro-content {
        padding-bottom: 0;
        padding-top: calc(var(--60) + var(--1) + var(--6));
        display: flex;
        flex-direction: column;
min-height: var(--app-height);
    }
    .intro-content .content-container {
        flex-grow: 1;
        padding-bottom: var(--30);
    }
}



/* Loader */
.loader {
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
	visibility:visible;
	opacity:1;

}
.intro-bg{
	visibility:visible;
	opacity:1;

}


.loader svg {
    animation: rotate 1.5s linear infinite;
    width: 71px;
    height: 71px;
}

.loader-text {font-weight: 500;font-size:1.375em;white-space: nowrap;}
@media (max-width: 1440.98px) {
    .loader-text {font-size: 1.125em;}
    
}
@media (max-width: 767.98px) {
    .loader-text {font-size: 1em;}
    .loader svg {
        width: 61px;
        height: 61px;
    }

}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@media (orientation: landscape) and (max-width:767.98px){
    .page-home .header {
        padding: 20px 0;

    }
    .page-home .header .logo {
        height: 20px;
    }
    
}