*{padding:0;margin:0}
body {min-height: 100vh; grid-template-rows: auto 1fr auto; font-family: Inter, sans-serif;}
#detach-button-host{display:none !important; z-index: -1;}

a{text-decoration:none; margin: 0; padding: 0;}

.grid{display: grid;}
.contener{margin:0 auto; width:1240px}

.ai-c {align-items: center;}


/*Скролбар*/
html {overflow-y: auto; -webkit-overflow-scrolling: touch;}
::-webkit-scrollbar {background: #ccc;}
::-webkit-scrollbar-track {background: #ccc; border-radius: 5px;}
::-webkit-scrollbar-thumb {background: #ccc; border-radius: 5px; border: 2px solid transparent; background-clip: content-box;}
::-webkit-scrollbar-thumb:hover {background: darkred; background-clip: content-box;}
html {scrollbar-color: #ccc rgba(255, 255, 255, 0.2);}



/*видео на главной*/
.index .header-img video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index: 0;}
.index .header-img video::-webkit-media-controls {display:none !important;}
.index .header-img video::-webkit-media-controls-panel {display:none !important;}
.index .header-img video::-webkit-media-controls-play-button {display:none !important;}
.index .header-img video::-webkit-media-controls-start-playback-button {display:none !important;}
.header-img video,video[autoplay] { filter: none !important; -opera-shader: none !important;}


/*форма заявки*/
#loader{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 5; display: grid; place-items: center;}
.fon-close {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5;}
.icon-close{position: absolute; top: 20px; right: 20px; cursor: pointer;}
.zayavka{box-sizing: border-box; width: 450px; background: #fff; border-radius: 20px; z-index: 6; position: relative; padding: 25px;}
.zayavka h2{font-weight: 500; margin-bottom: 40px;}
.zayavka .labl{display: block; color: rgb(51 65 85); font-size:12px; margin: 15px 0 5px;}
.form-control{box-sizing: border-box; padding: 12px; font-size: 14px; border-radius: 5px; display: block; width: 100%; margin: 0 auto; background-color:#fff; border:1px solid #bbb; -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
textarea.form-control:focus, input.form-control:focus{border-color: #f18662; outline: none;}
textarea.form-control{resize: none !important;}
.zayavka .btn{grid-column-gap: 15px; justify-content: center; grid-template-columns: repeat(2, auto); background-color: #FF6347; cursor: pointer; color: #fff; padding: 15px 0; border-radius: 5px; margin-top: 20px; text-align: center;}
.zayavka .btn:hover{background-color: #dc2e0f;}
.zayavka .text{font-size: 12px; color: #aaa; margin-top: 20px;}
#error, #contact-error, #name-error{color: red; font-size: 12px;}
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover, 
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active {-webkit-background-clip: text; -webkit-text-fill-color: #000 !important; background-color: #fff !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s;}
@media (max-width:768px){
    .zayavka{width: 100vw; height: 100vh; border-radius: 0; position: relative;}
}

/*ГЛАВНАЯ*/
.index .header-img{background:#171717; width:100%; height: 100vh; min-height: 600px; transition:all 0.5s; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; overflow:hidden;}
.index .header-box{width: 100%; height: 100vh; z-index: 1; position: relative;}
/*ТОП-ПАНЕЛЬ*/
.index header .block1{backdrop-filter: blur(3px); background: rgba(255, 255, 255, 0.3);}
.index header .top{height: 110px; grid-template-columns: 1fr 1fr 1fr auto; grid-column-gap: auto; box-sizing: border-box; padding: 0 20px;}
.index header .logo-top {font: 56px "Oswald", sans-serif; text-transform: uppercase; color: #fff; padding: 0 30px; border-radius: 5px; animation: pulseBackground 2s ease-in-out infinite; transition: background 0.6s ease;}
.index header .logo-top span{color: rgb(249 115 22 / var(--tw-text-opacity, 1));}
.index header .logo-top:hover {animation: none; background: rgba(0, 0, 0, 0.3);}
.index header .info{font-weight: 500; font-family: 'Inter'; color: #000; font-size: 18px;}
.index header .info a{color: #000; display: block;}
.index header .info a:first-child{font-size: 24px; background: rgba(255, 255, 255, 0.3); margin-bottom: 5px; display: inline-block; padding: 2px 15px; border-radius: 10px;}
.index header .info a:first-child>div{grid-auto-flow: column; gap: 5px;}
.index header .info a:last-child{font-weight: 500; font-size: 14px; padding-left: 20px; display: grid; justify-content: start; grid-auto-flow: column; gap: 5px; align-items: end;}
.index header .btn{background-color: #FF6347; cursor: pointer; color: #fff; padding: 10px 25px; border-radius: 5px;}
.index header .btn:hover{background-color: #dc2e0f;}
/*логотип ЛИС*/
.index .block3{position: absolute; top: 230px; right: 430px;}
.index .block3>div{grid-template-columns: 1fr auto; gap: 20px; position: relative; color: #fff;}
.index .block3 h1 {font:60px "Oswald",sans-serif; color:#fff; line-height:1.2em;}
.index .block3 .sub{color:#fff;line-height:1.2em; text-transform: uppercase; margin-top: 10px;}
.index .block3 .lis{background: rgb(255, 255, 255, 0.2); aspect-ratio: 1/1; width: 100px; border-radius: 40px; position: relative;}
.index .block3 .fox-open{width: 100%;}
.index .block3 .fox-closed {animation: blink 4s infinite; width: 100%; position: absolute; top: 0; left: 0; opacity: 0;}
#terminal{width: 400px; color: #fff; min-height: 480px; height: calc(100% - 120px); font-size: 14px; font-weight: 300; box-sizing: border-box; padding: 20px; overflow: hidden; position: absolute; right: 0;}
#terminalContent{position: absolute; top: 10px; bottom: 10px; width: calc(100% - 40px); height: 100%;}
#terminalContent p{padding: 5px 0; margin: 0;}
/*меню*/
.index .block2{position: absolute; top: 120px; left: max(20px, calc((100% - 1200px) / 2));}
.index .block2 nav a{justify-content: start; grid-auto-flow: column; gap: 5px; color: #000; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(3px); padding: 5px 15px; border-radius: 5px;}
.index .block2 nav a:hover{text-decoration: underline;}
.index .block2 ul{list-style: none; height: 60px; justify-content: start; grid-auto-flow: column; align-items: center; gap: clamp(15px, 2vw, 40px);}
/*индикатор*/
.index .block4{width: 1000px; z-index: 1; align-items: end; position: absolute; bottom: 20px; left: 60px;}
.trek-box {grid-template-columns: repeat(4, 1fr); grid-column-gap: auto; gap: 30px; justify-content: space-evenly;}
.trek-box .item {background: rgb(0, 0, 0, 0.3); border-radius: 20px; display: block; text-decoration: none; position: relative;}
.trek-box .item img {width: 50%; margin: 20px auto; display: block; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.trek-box .item:hover img {transform: scaleX(0);}
.trek-box .item div {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0); color: #fff; font-size: 24px; font-weight: bold; background: rgba(255, 255, 255, 0.2); padding: 10px 30px; border-radius: 30px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; z-index: 3;}
.trek-box .item:hover div {transform: translate(-50%, -50%) scale(1);}
.trek-box .item h2 {font-size: 18px; text-align: center; color: #fff; padding-bottom: 20px; position: relative; z-index: 2;}
.futuristic-circles {position: relative; width: 100%; aspect-ratio: 1/1; cursor: pointer;}
.circle {position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.circle-1 {border: 2px solid; width: 100%; height: 100%; border-color: rgba(255, 255, 255, 0.3); border-right-color: transparent; animation: rotate-1 8s linear infinite;}
.circle-2 {border: 22px solid; width: 70%; height: 70%; border-color: rgba(0, 0, 0, 0.1); border-left-color: transparent; animation: rotate-2 5s linear infinite reverse;}
.circle-3 {border: 6px solid; width: 40%; height: 40%; border-color: rgba(255, 255, 255, 0.1); border-bottom-color: transparent; animation: rotate-3 3s linear infinite;}
/* Центральная иконка */
.center-icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px;}
.center-icon svg {width: 44px; height: 44px;}
.center-icon svg path {stroke: #ccc; transition: stroke 0.3s ease;}
.futuristic-circles:hover svg path {stroke: #fff;}
@media (max-width:1470px){
    #terminal{width: 350px;}
    .index .block4{width: 800px;}
    .index .block3{right: 380px;}
    .trek-box .item h2 {font-size: 16px;}    
}
@media (max-width:1240px){
    .index header .top{height: 90px;}
    .index header .logo-top {font: 46px "Oswald", sans-serif; padding: 0 25px;}
    .index header .info{font-size: 16px;}
    .index header .info a:first-child{font-size: 20px; margin-bottom: 3px; padding: 2px 12px;}
    .index header .info a:first-child svg{width: 18px;}
    .index .block2{top: 100px;}
    #terminal{height: calc(100% - 105px);}
    .index .block4{left: 20px; width: calc(100% - 380px);}
    .trek-box {grid-template-columns: repeat(3, 1fr);}
    .futuristic-circles{display: none;}
    .index .block2 nav a{font-size: 14px;}
}
@media (max-width:985px){
    .index header .top{grid-template-columns: 1fr 1fr auto;}
    .index header .info.text{display: none;}
    .index .block3{position: absolute; top: 230px; right: auto; left: calc(50% - 210px);}    
    #terminal{width: 100%; min-height: 150px; height: 150px; position: absolute; right: auto; left: calc(50% - 220px); top: 350px;}
    .index .header-img{min-height: 740px;}
    .futuristic-circles{display: block;}
    .trek-box {grid-template-columns: repeat(4, 1fr);}
    .index .block4{left: 40px; width: calc(100% - 80px);}
    .trek-box .item h2 {font-size: 1.5vw;}    
}
@media (max-width:768px){
    #terminal, .fert, .trek-box .item{display: none;}
    .trek-box {grid-template-columns: 1fr;}
    .futuristic-circles{width: 30%; margin: 0 auto;}
    .index .block3{top: calc(50vh - 50px);}
    .index .block4{bottom: 30px;} 
    .index header .top{grid-template-columns: 1fr auto;}
    .index .block2{padding: 0 20px; box-sizing: border-box; width: 100%; left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
    .index .block2::-webkit-scrollbar{display:none;}
    .index .block2 li:last-child{padding-right: 20px !important;}
}
@media (max-width:500px){
    .futuristic-circles{width: 40%;}
    .index header .top{grid-template-columns: 1fr; height: 200px; place-items: center; padding: 20px 0;}
    .index .block2{top: 220px;}
    .index header .info a:first-child{font-size: 30px; margin-bottom: 8px;}
    .index header .info a:first-child svg{width: 22px;}
    .index header .info a:last-child{padding-left: calc(50% - 70px);} 
    .index .block3>div{grid-template-columns: 1fr; gap: 10px; place-items: center;}
    .index .block3{top: 300px; left: calc(50% - 150px);}
    .index .block3 .sub{text-align: center; font-size: 20px;}    
}
/*анимация*/
@keyframes pulseBackground {/*логотип*/
    0%, 100% {background: rgba(0, 0, 0, 0);}
    50% {background: rgba(0, 0, 0, 0.4);}
}
@keyframes blink {/*глаза лиса*/
    0%, 95%, 100% {opacity: 0;}
    96%, 99% {opacity: 1;}
}
@keyframes rotate-1 {/*круги*/
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-2 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(-180deg); }
    50% { transform: translate(-50%, -50%) rotate(-360deg); }
    75% { transform: translate(-50%, -50%) rotate(-180deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes rotate-3 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(720deg); }
}


/*алгоритм работы*/
#process {padding: 96px 0; background-color: #fff; position: relative; overflow: hidden; }
#process .max-w-7xl { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
#process .text-center {text-align: center; margin-bottom: 4rem; }
#process .inline-block {display: grid; grid-auto-flow: column; gap: 5px; justify-content: center; align-items: center; padding: 0.25rem 1rem; font-size: 0.875rem; font-weight: 700; border-radius: 9999px; margin-bottom: 1rem; }
#process h2 {font-size: 2.25rem; font-weight: 900; color: #0f172a; margin-bottom: 1rem; }
#process .text-gradient { background: linear-gradient(135deg, #000 0%, #DC2626 50%, #000 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient 4s ease infinite; }
#process p.text-xl { font-size: 1.25rem; color: #64748b; max-width: 42rem; margin-left: auto; margin-right: auto; }
#process .grid {display: grid; gap: 2rem; }
#process .relative {position: relative; }
#process .text-center .relative.inline-block{ display: inline-block; margin-bottom: 1.5rem; }
#process .w-20.h-20 { width: 5rem; height: 5rem; background: linear-gradient(to bottom right, #ffedd5, #fed7aa); border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; transform: rotate(6deg); transition: transform 0.3s ease; }
#process .group:hover .w-20.h-20 { transform: rotate(0deg); }
#process .w-20.h-20 span { font-size: 1.875rem; font-weight: 900; color: #ea580c; }
#process .absolute.-top-2.-right-2 { position: absolute; top: -0.5rem; right: -0.5rem; width: 2rem; height: 2rem; background-color: #f97316; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; }
#process h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
#process .text-slate-500 { color: #64748b; }
#process .hidden.lg\:block { display: none; }
#process .mt-16 { margin-top: 4rem; }
#process a.inline-flex {display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; background-color: #0f172a; color: white; font-weight: 700; 
border-radius:0.5rem; transition: background-color 0.3s ease; cursor: pointer;}
#process a.inline-flex:hover { background-color: #ea580c;}
#process a.inline-flex svg {width: 1.25rem; height: 1.25rem; }
@media (min-width: 640px){
    #process h2 { font-size: 3rem; } 
    #process .max-w-7xl { padding: 0 1.5rem; } 
}
@media (min-width: 768px){ 
    #process .grid { grid-template-columns: repeat(2, 1fr); } 
}
@media (min-width: 1024px){
    #process .grid { grid-template-columns: repeat(4, 1fr); }
    #process .max-w-7xl { padding: 0 2rem; } 
    #process .hidden.lg\:block { display: block; position: absolute; top: 2.5rem; left: 100%; width: 100%; height: 0.125rem; background: linear-gradient(to right, #fdba74, transparent); transform: translateX(-2rem); } 
}
/*Отделы*/
.otdel{width: 100%; background: #232428;}
.otdel>div{padding: 50px;}
.otdel .item-box{grid-template-columns: repeat(3, 1fr); gap: 10vw;}
.otdel h2{text-align: center; color: #fff; font-size: 30px; text-transform: uppercase; margin: 20px 0 50px;}
.otdel .item{aspect-ratio: 1/1; background-size: cover !important; background-position: center center; background-repeat: no-repeat;}
.otdel .box{grid-template-columns: 40% 1fr; gap: 5vw;}
.otdel .box>div{grid-template-columns: repeat(3, 1fr); gap: 5vw;}
.otdel .box a{color: #aaa; transition: all 0.3s;} 
.otdel .box a img{width: 100%; opacity: 0.5; border-radius: 5px; transition: all 0.3s;}
.otdel .box a:hover{color: #fff;}
.otdel .box a:hover img{opacity: 1;}
.otdel .log{width: 100%;}
@media (max-width: 1200px){
    .otdel>div{padding: 4vw;}
    .otdel h2{font-size: 2.6vw;}
    .otdel .box{grid-template-columns: 35% 1fr; gap: 3vw;}
    .otdel .box>div{grid-template-columns: repeat(3, 1fr); gap: 2vw;}
    .otdel .box a{font-size: 1.4vw;}
}
@media (max-width: 640px){
    .otdel h2{font-size: 5vw; margin: 20px 0 20px;}
    .otdel .box{grid-template-columns: 1fr; gap: 3vw;}
    .otdel .box>div{grid-template-columns: 70%; gap: 5vw; justify-content: center;}
    .otdel .box a img{width: 100%; opacity: 1;}
    .otdel .box a{font-size: 5vw; color: #ccc;}
    .otdel>div{padding: 6vw 4vw 10vw;}
}
/*faq*/
#faq {padding: 96px 0; background-color: #ffffff; }
#faq .max-w-3xl {max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
#faq .text-center { text-align: center; margin-bottom: 4rem; }
#faq .inline-block {display: grid; grid-auto-flow: column; gap: 5px; justify-content: center; align-items: center; padding: 0.25rem 1rem; font-size: 0.875rem; font-weight: 700; border-radius: 9999px; margin-bottom: 1rem; }
#faq h2 { font-size: 2.25rem; font-weight: 900; color: #0f172a; margin-bottom: 1rem; }
#faq .text-gradient { background: linear-gradient(135deg, #000 0%, #DC2626 50%, #000 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient 4s ease infinite; }
#faq .space-y-4{ display: flex; flex-direction: column; gap: 1rem; }
#faq .faq-item{ cursor: pointer; }
#faq .faq-item .bg-slate-50{ background-color: #f8fafc; border-radius: 1rem; padding: 1.5rem; transition: all 0.3s ease; border: 1px solid #f1f5f9; }
#faq .faq-item .bg-slate-50:hover{ background-color: #f1f5f9; }
#faq .flex.items-center.justify-between{ display: flex; align-items: center; justify-content: space-between; }
#faq h3{ font-size: 1.125rem; font-weight: 700; color: #0f172a; }
#faq .faq-icon{ width: 1.5rem; height: 1.5rem; color: #f97316; transition: transform 0.3s ease; }
#faq .faq-item.faq-open .faq-icon{ transform: rotate(180deg); }
#faq .faq-answer{ max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: #475569; }
#faq .faq-item.faq-open .faq-answer{ max-height: 500px; }
#faq .faq-answer > div{ padding-top: 0; transition: padding-top 0.3s ease; }
#faq .faq-item.faq-open .faq-answer > div{ padding-top: 1rem; }
@media (min-width: 1024px){
    #faq .max-w-3xl { padding: 0 2rem; } 
}
@media (min-width: 640px){
    #faq .max-w-3xl { padding: 0 1.5rem; }
    #faq h2 { font-size: 3rem; } 
}

@media (max-width:1240px){
    .contener{width:100%;}
}