@font-face {
    font-family: 'Space Grotesk';
    src: url('SpaceGrotesk/SpaceGrotesk-Bold.eot');
    src: url('SpaceGrotesk/SpaceGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
        url('SpaceGrotesk/SpaceGrotesk-Bold.woff2') format('woff2'),
        url('SpaceGrotesk/SpaceGrotesk-Bold.woff') format('woff'),
        url('SpaceGrotesk/SpaceGrotesk-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('SpaceGrotesk/SpaceGrotesk-Light.eot');
    src: url('SpaceGrotesk/SpaceGrotesk-Light.eot?#iefix') format('embedded-opentype'),
        url('SpaceGrotesk/SpaceGrotesk-Light.woff2') format('woff2'),
        url('SpaceGrotesk/SpaceGrotesk-Light.woff') format('woff'),
        url('SpaceGrotesk/SpaceGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('SpaceGrotesk/SpaceGrotesk-Medium.eot');
    src: url('SpaceGrotesk/SpaceGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
        url('SpaceGrotesk/SpaceGrotesk-Medium.woff2') format('woff2'),
        url('SpaceGrotesk/SpaceGrotesk-Medium.woff') format('woff'),
        url('SpaceGrotesk/SpaceGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('SpaceGrotesk/SpaceGrotesk-Regular.eot');
    src: url('SpaceGrotesk/SpaceGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
        url('SpaceGrotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
        url('SpaceGrotesk/SpaceGrotesk-Regular.woff') format('woff'),
        url('SpaceGrotesk/SpaceGrotesk-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('SpaceGrotesk/SpaceGrotesk-SemiBold.eot');
    src: url('SpaceGrotesk/SpaceGrotesk-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('SpaceGrotesk/SpaceGrotesk-SemiBold.woff2') format('woff2'),
        url('SpaceGrotesk/SpaceGrotesk-SemiBold.woff') format('woff'),
        url('SpaceGrotesk/SpaceGrotesk-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


body {
     font-family: "Roboto", sans-serif;
     font-size: 16px;
	 color:#FAF9F6;
}

img{
max-width: 100%; 
height: auto; 
display:inline-block;
vertical-align:top;
}

.modal-content{
background: #7456C5;
background: radial-gradient(circle, #16103A 0%, #7456C5 100%); 
color:#fff;
}
.modal-header,.modal-footer{
border:none;
}

.back-to-top {
    /* Позиционирование */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    
    /* Внешний вид */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background:#8C36CF;
    color:#fff;
    font-size: 24px;
    cursor: pointer;
    
    /* Эффекты */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    
    /* Для доступности */
    outline: none;
    
    /* Вырвынивание стрелочки на iphone */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.back-to-top:hover {
    background:#fff;
    color:#8C36CF;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.back-to-top:active {
    transform: translateY(-2px);
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#crumbs{
margin-bottom:40px;
position:relative;
z-index:1;
}
.breadcrumb{
background:none;
padding:15px 0 0;
color:#FAF9F6;
}
.breadcrumb-item + .breadcrumb-item::before,.breadcrumb-item.active{
color:#FAF9F6;   
}
.breadcrumb a{
text-decoration:none;
color:rgba(250, 249, 246, 0.6);
}
.breadcrumb a:hover{
text-decoration:underline;
}

.slide-wrapper{
position:relative;
padding:50px 0;
}

/** Carousel **/

.slide {
    position: relative;
    overflow: hidden;
    width: 100%;
}


.slide ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slide li {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

border-radius:25px;
overflow:hidden;
position: relative;
z-index: 1;
}
.slide li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */    
}
.slide li:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(102, 102, 102, 0) -14.41%, rgba(0, 0, 0, 0.9) 83.02%);
}
.slide li img{
width: 100%;
height: 100%;
min-height:600px;
object-fit: cover;
border-radius:25px;

}

/** Carousel Controls **/

.sprev,
.snext {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background:#fff;
    border-radius:20px;
    text-align: center;
    color: #34373e;
    text-decoration: none;
    padding:5px;
    font-size:20px;
}

.sprev:focus,.snext:focus,.sprev:hover,.snext:hover{
text-decoration: none;
}

.sprev {
    left: 10px;
}

.snext {
    right: 10px;
}
/** Carousel Pagination **/

.slide-pagination {
    position: absolute;
    z-index:1;
    bottom: 5px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.slide-pagination a {
    text-decoration: none;
    display: inline-block;
    height: 20px;
    width: 20px;
    background: #CECECE;
    color: #CECECE;
    border-radius: 10px;
    text-indent: -9999px;
    margin-right: 7px;
}

.slide-pagination a.active {
    background: #FFD447;
    color: #FFD447;
    opacity: 1;
}

/* Кастомные стили для аккордеона */
    .custom-accordion .accordion-item {
      background: rgba(255, 255, 255, 0.05); /* Градиент фона */
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      border:1px solid #999;
      border-radius: 8px !important; /* Скругление углов */
      margin-bottom: 15px; /* Отступ между плашками */
      box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      padding:0px 20px;
    }

    .custom-accordion .accordion-button {
      background: transparent;
      font-family:Unbounded;
      color: #FAF9F6;
      font-size: 20px;
      font-weight: 400;
      padding: 5px;
      box-shadow: none;
    }

    /* Состояние кнопки при фокусе и раскрытии */
    .custom-accordion .accordion-button:not(.collapsed),
    .custom-accordion .accordion-button:focus {
      color: #ffff;
      background: transparent;
      box-shadow: none;
    }

    /* Замена стандартной стрелки Bootstrap на фиолетовый плюс */
    .custom-accordion .accordion-button::after {
      content: '+';
      background-image: none;
      /* Использование стандартного шрифта для отображения плюса */
      font-family:Roboto;
      font-size: 60px;
      font-weight: 100;
      cursor: pointer;
      color: #8C36CF;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: none;
      transition: transform 0.3s ease;
      width: auto;
      height: auto;
    }

    /* Анимация вращения плюса при раскрытии (превращается в крестик) */
    .custom-accordion .accordion-button:not(.collapsed)::after {
      transform: rotate(45deg);
      color: #8C36CF;
    }

    /* Стили для контента внутри раскрытого элемента */
    .custom-accordion .accordion-body {
      color: #FAF9F6;
      background: rgba(25px, 25px, 25px, 0.1);
      padding: 0 5px 10px 5px;
      font-size: 16px;
    }

#gal img:hover{
opacity:0.8;
}
#gal a{
display:inline-block;
position:relative;
color:#fff;
}
#gal a span{
  display: block;
  background: rgba(0, 64, 118, 0.6);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 15px;
}

#key_top{
position:relative;
}
#key_top_img{
position:absolute;
right:0;
top:-80px;
max-height:800px;
}

#key_toper .h-100{
font-family:Unbounded;
font-weight:500;
border-radius:10px;
padding:30px 20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#key_toper .h-100:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */ 
}
#key_toper .h-100 b{
display:block;
font-family:"Space Grotesk";
font-size:48px;
font-weight:400;
margin-bottom:10px;
}

#key_opis{
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
padding:20px;
border-radius: 10px;
}
#key_opis .d-flex{
background: linear-gradient(180deg, #1060F4 0%, #004076 100%);
padding:5px;
border-radius:10px;
}
#key_opis .d-flex img{
margin-right:0 10px;
}
#key_opis .d-flex span{
font-family:Unbounded;
font-weight:500;
text-transform:uppercase;
}
#key_opis a{
color:#fff;
text-decoration:underline;
}
#key_opis a:hover{
text-decoration:none;
}

#key_rab{
background:url(images/key/kub.webp);
background-position:bottom left;
background-repeat:no-repeat;
}
#key_rab #zag{
background: linear-gradient(90deg, #FFFFFF 0%, #FDBCFF 100%);
background-clip: border-box;
background-clip: text;
color: transparent;
}

#key_rab ul{
margin:0;
padding:0;
list-style-type:none;
}
#key_rab ul li{
  background-image: url(images/key/li.webp); /* путь к картинке */
  background-repeat: no-repeat; /* не повторять */
  background-position: 0 50%; /* выравниваем по центру по вертикали */
  padding-left: 35px; /* отступ для текста */
margin-bottom:20px;
}

#key_rab_in{
border-radius: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}

#key_rez_back{
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
padding:20px 20px 5px 20px;
border-radius: 10px;
font-size:18px;
}

#key_rez .h-100{
font-size:16px;
border-radius: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#key_rez .h-100 b{
display:block;
font-family:"Space Grotesk";
font-size:48px;
font-weight:400;
margin-bottom:10px;
}

#key_gal{
border-radius: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}

#key_ins{
border-radius: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#key_ins img{
margin-right:10px;
}


#mag_zad .h-100{
font-family:Unbounded;
font-weight:500;
text-transform:uppercase;
border-radius:10px;
padding:20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#mag_zad .h-100 img{
margin-bottom:10px;
}

#mag_faq{
background:url(images/usl/raz/sfera.webp);
background-position:right top;
background-repeat:no-repeat;
}

#mag_back{
background:url(images/usl/raz/back.webp);
background-position:center center;
background-repeat:no-repeat;
background-size: contain;
}

#raz_back{
background:url(images/usl/raz/back.webp);
background-position:top center;
background-repeat:no-repeat;
background-size:contain;
}


#raz_reh{
border-radius:10px;
padding:20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#raz_reh b{
display:block;
margin-bottom:20px;
font-size:20px;
font-family:Unbounded;
font-weight:normal;
}
#raz_reh ul{
margin:0;
padding:0;
list-style-type:none;
}
#raz_reh ul li{
  background-image: url(images/usl/raz/li.webp); /* путь к картинке */
  background-repeat: no-repeat; /* не повторять */
  background-position: 0 50%; /* выравниваем по центру по вертикали */
  padding-left: 35px; /* отступ для текста */
font-size:18px;
margin-bottom:20px;
}

#raz_poh{
border-radius:10px;
padding:20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#raz_poh img{
position:relative;
right:-50px;
margin-bottom:-80px;
}
#raz_text{
border-radius:10px;
padding:20px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}

#raz_tar{
background:url(images/usl/raz/sfera.webp);
background-repeat:no-repeat;
background-position:top left;
}
#raz_tar b{
display:block;
font-family:Unbounded;
font-size:20px;
font-weight:normal;
text-align:center;
margin-bottom:20px;
}
#raz_tar p{
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
background-clip: border-box;
background-clip: text;
color: transparent;
margin-bottom:20px;
font-size:24px;
font-weight:500;
}
#raz_tar ul{
padding-left:15px;
}
#raz_tar ul li::marker {
  color: #8C36CF;
}
#raz_tar .col-lg-4{
padding-top:35px;
padding-bottom:35px;
}
#raz_tar .h-100{
border-radius:10px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding:20px;
overflow:hidden;
position: relative;
z-index: 1;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#raz_tar .h-100:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */ 
}
#raz_tar .col-lg-4:nth-child(2) .h-100{
margin:-50px 0;
box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.2);
}
#raz_tar .col-lg-4:nth-child(2) .h-100:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 3px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 30%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */ 
}

#raz_tar .h-100 ul li{
margin:10px 0;
}
#raz_tar .col-lg-4:nth-child(2) .h-100 ul li{
margin:20px 0;
}

#mag_tar span{
display:inline-block;
background: linear-gradient(180deg, #1060F4 0%, #004076 100%);
padding:2px 30px;
border-radius:25px;
color:#fff;
font-size:12px;
text-transform:uppercase;
position:absolute;
top:-10px;
left:50%;
margin-left:-66px;
}
#mag_tar b{
display:block;
font-family:Unbounded;
font-size:20px;
font-weight:normal;
text-align:center;
margin-bottom:20px;
}
#mag_tar p{
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
background-clip: border-box;
background-clip: text;
color: transparent;
margin-bottom:20px;
font-size:24px;
font-weight:500;
}
#mag_tar ul{
padding-left:15px;
}
#mag_tar ul li::marker {
  color: #8C36CF;
}
#mag_tar .col-lg-4{
padding-top:35px;
padding-bottom:35px;
}
#mag_tar .h-100{
border-radius:10px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding:20px;
position: relative;
z-index: 1;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#mag_tar .h-100:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */ 
}
#mag_tar .col-lg-4:nth-child(2) .h-100{
margin:-50px 0;
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
color:#fff;
}
#mag_tar .col-lg-4:nth-child(2) .h-100 p{
color:#fff;
}
#mag_tar .col-lg-4:nth-child(2) .h-100 #but{
background: linear-gradient(90deg, #FFFFFF 0%, #FDBCFF 100%);
color:#1F2A44;
}
#mag_tar .col-lg-4:nth-child(2) .h-100 #but:hover{
background: linear-gradient(90deg, #FDBCFF 0%, #FFFFFF 100%);
}


#mag_tar .h-100 ul li{
margin:10px 0;
}
#mag_tar .col-lg-4:nth-child(2) .h-100 ul li{
margin:20px 0;
}

#raz_preim.mag_preim{
margin:130px 0 0;
}

#raz_preim .col-lg-3,#raz_preim .col-lg-4{
padding-top:15px;
padding-bottom:15px;
}
#raz_preim img{
margin-right:10px;
}
#raz_preim i{
font-family:"Space Grotesk";
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
background-clip: border-box;
background-clip: text;
color: transparent;
line-height:36px;
font-size:36px;
font-weight:600;
font-style:normal;
}
#raz_preim span{
font-family:Unbounded;
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
background-clip: border-box;
background-clip: text;
color: transparent;
font-weight:500;
text-transform:uppercase;
}
#raz_preim .h-100{
border-radius:10px;
/*background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);*/
padding:20px;
overflow:hidden;
position: relative;
z-index: 1;
/*box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);*/
}
#raz_preim .h-100:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */ 
}


#stat_top{
font-size:18px;
}
#stat_top p{
color:rgba(250, 249, 246, 0.6);
}
#stat_top ul{
margin:50px 0 0;
padding:0;
list-style-type:none;
}
#stat_top ul li{
display:inline-block;
margin:5px 10px 5px 0;
}
#stat_top ul li img{
margin:-2px 5px 0 0;
}

#stat_right{
border-radius:10px;
padding:20px;
margin-bottom:30px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#stat_right b{
display:block;
margin-bottom:10px;
font-family:Unbounded;
font-weight:500;
text-transform:uppercase;
}
#stat_right ul{
margin:0;
padding:0;
list-style-type:none;
}
#stat_right ul li a{
display:block;
color:#FAF9F6;
border-radius:10px;
padding:5px;
text-decoration:none;
}
#stat_right ul li a:hover{
background: linear-gradient(180deg, #1060F4 0%, #004076 100%);
}
#stat_right span{
position:absolute;
right:0;
top:0;
width:130px;
}

#stat_form{
background:url(images/kont/t_back.webp);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
border-radius:10px;
padding:20px;
font-size:18px;
}

#por div div{
min-height:285px;
border-radius:10px;
border: 1px solid rgba(250, 249, 246, 0.6);
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
overflow:hidden;
position: relative;
z-index: 1;
padding:5px;
color: rgba(250, 249, 246, 0.6);
}
#por div div img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius:10px;
}
#por div div span{
display:block;
background: rgba(0, 64, 118, 0.6);
position:absolute;
bottom:5px;
left:5px;
right:5px;
padding:20px 50px 20px 20px;
}
#por div div b{
display:inline-block;
font-family: Unbounded;
font-weight:400;
font-size:20px;
margin-bottom:10px;
color:#FAF9F6;
}
#por div div span a{
display:block;
position:absolute;
right:10px;
top:50%;
margin-top:-20px;
width:40px;
height:40px;
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
border:1px solid;
padding:2px 7px;
border-radius:20px;
color:#FAF9F6;
font-size:24px;
text-decoration:none;
}
#por div div span a:hover{
background: linear-gradient(180deg, #8C36CF 0%, #65A8EF 100%);
}

#ii{
position:absolute;
bottom:10px;
color: rgba(250, 249, 246, 0.2);
font-size: 11px;
}

#o404{
position: relative; 
overflow: hidden;
background:none;
min-height: 100vh;
background:url(images/404.webp);
background-repeat: no-repeat;
background-position:top center;
background-attachment: fixed;
background-size: cover;
}

#kont_back{
position:relative;
overflow:hidden;
/*padding:150px 0 70px;
margin:-120px auto 0;*/
padding:150px 0 40px;
margin:-90px auto 0;
max-width:1920px;
}
/*#kont_back:after{
content:"";
display:block;
width:498px;
height:553px;
background:url(images/kont/back.webp);
position:absolute;
right:20%;
margin-right:-250px;
}*/
#kont_form{
position:relative;
z-index:1;
color:#1F2A44;
border-radius:10px;
padding:20px;
margin:10px 0;
background: rgba(250, 249, 246, 0.6);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}

#t_back{
background:url(images/kont/t_back.webp);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
border-radius:10px;
padding:10px 15px;
font-size:20px;
}
#soc_back .col-xl-6{
margin:15px 0;
}
#soc_back .col-xl-6 div{
background:url(images/kont/soc_back.webp);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
padding:15px;
margin:0 15px;
font-size:20px;
border-radius:10px;
}
#zag.line:after{
font-family: 'Space Grotesk';
content:"";
display:block;
height:1px;
width:100%;
background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

#port{
position:absolute;
left:0;
right:0;
bottom:20px;
z-index:2;
font-size:24px;
margin:20px;
}
#port #line{
margin:10px 0;
}
#port_opis{
padding:20px;
border-radius:25px;
border: 1px solid transparent;
background: 
    linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%) padding-box, 
    linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box;
}

#port_opis a{
display:inline-block;
margin:20px 0;
border-radius:35px;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
padding:20px;
font-weight:500;
font-size:20px;
text-transform:uppercase;
text-decoration:none;
background:#FAF9F6;
color:#1F2A44;
}
#port_opis a:hover{
background:#8C36CF;
color:#FAF9F6;
}

#flr_menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#flr_menu ul li{
display:inline;
}
#flr_menu ul li a{
display:inline-block;
border:1px solid #FAF9F6;
padding:10px 15px;
border-radius:100px;
color:#FAF9F6;
font-size:24px;
text-decoration:none;
margin:10px;
}
#flr_menu ul li a:after{
content:"";
display:inline-block;
background:url(images/port/sort.webp);
width:17px;
height:12px;
margin-left:10px;
}
#flr_menu ul li a:hover{
text-decoration:underline;
}
#flr_menu ul li:last-child a{
border:none;
color:rgba(250, 249, 246, 0.6);
}
#flr_menu ul li:last-child a:after{
display:none;
}

#blog{
margin:10px 0;
}
#blog div div{
min-height:234px;
border-radius:25px;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
position: relative;
}
#blog div div img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius:10px;
}
#blog div div span{
display:inline-block;
padding:5px 8px;
font-size:16px;
border-radius:100px;
background: linear-gradient(180deg, #1060F4 0%, #004076 100%);
position:absolute;
top:10px;
left:10px;
}
#blog div div a{
color:#FAF9F6;
font-size:16px;
text-decoration:none;
position:absolute;
top:50px;
left:10px;
right:10px;
}
#blog div div a:hover{
color: rgba(250, 249, 246, 0.6);
}
#blog div div div.d-flex{
position:absolute;
bottom:10px;
left:10px;
right:10px;
color:#FAF9F6;
font-size:16px;
text-decoration:none;
min-height:auto;
box-shadow:none;
}
#blog div div div.d-flex div{
min-height:auto;
box-shadow:none;
}

#blog_back{
background: url(images/blog/kub.webp);
background-position: left 170px top -30px;
background-repeat: no-repeat;
}

#blog_soc{
background: linear-gradient(90deg, #FFFFFF 0%, #FDBCFF 100%);
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2);
border-radius:25px;
padding:5px 10px;
font-size:30px;
}
#blog_soc i{
background: linear-gradient(180deg, #1060F4 0%, #004076 100%);
background-clip: border-box;
background-clip: text;
color: transparent;
font-style: normal;
}
#blog_soc a:hover{
opacity:0.8;
}

#blog_pop{
display:inline-block;
border-radius:10px;
padding:10px;
margin:10px 0;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
}
#blog_pop ul{
margin:0;
padding:0;
list-style-type:none;
}
#blog_pop ul li a{
display:inline-block;
margin:5px 0;
color:#FAF9F6;
font-size:16px;
text-decoration:none;
}
#blog_pop ul li a i{
color:#1F2A44;
margin-left:5px;
}
#blog_pop ul li a:hover{
text-decoration:underline;
}

#blog_menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#blog_menu ul li{
display:inline;
}
#blog_menu ul li a{
display:inline-block;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%);
padding:5px 10px;
border-radius:100px;
color:#1F2A44;
font-size:16px;
text-decoration:none;
}
#blog_menu ul li a:hover{
background: linear-gradient(180deg, #1060F4 0%, #004076 100%);
color:#FAF9F6;
}


#blog_rez{
margin:60px 0;
white-space: nowrap;
}


#usl div div{
min-height:285px;
border-radius:25px;
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
overflow:hidden;
position: relative;
z-index: 1;
}
#usl div div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */    
}
#usl div div img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius:25px;
}
#usl div div b{
display:block;
font-family: Unbounded;
font-size:28px;
font-weight:500;
text-transform:uppercase;
position:absolute;
top:0;
padding:20px;
width:100%;
}
#usl div div a{
display:block;
position:absolute;
bottom:0;
padding:20px;
color:#FAF9F6;
font-size:24px;
text-decoration:none;
width:100%;
}
#usl div div a i{
margin-right:5px;
}
#usl div div a:hover{
color: rgba(250, 249, 246, 0.6);
}

#etap{
background:url(images/usl/raz/etap.webp);
background-repeat:no-repeat;
background-position:left top;
min-width:196px;
min-height:610px;
}
#etap li{
margin:80px 0;
}
#etap li:nth-child(1){
margin-left:140px;
}
#etap li:nth-child(2){
margin-left:20px;
}
#etap li:nth-child(3){
margin-left:190px;
}
#etap li:nth-child(4){
margin-left:190px;
}
#etap li:nth-child(5){
margin-left:70px;
}
#etap li:nth-child(6){
margin-left:150px;
}

#srok{
display: flex; 
align-items: center;
margin-bottom:30px;
}
#srok .num{
white-space:nowrap;
margin-left: auto;
}
#line{
height:1px;
width:100%;
background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

#top_back{
background-color:#102f7e;
background-image:url(images/top2.webp);
background-position:top center;
background-repeat:no-repeat;
min-height:1150px;
position:relative;
}

#top_raz{
background-color:#02042c;
background-image:url(images/usl/raz/top.webp);
background-position:top center;
background-repeat:no-repeat;
min-height:1079px;
position:relative;
}
#top_mag{
background-color:#050549;
background-image:url(images/usl/mag/top.webp);
background-position:top center;
background-repeat:no-repeat;
min-height:1079px;
position:relative;
}

#logo{
/*margin-left:-50px;*/
display:inline-block;
margin:20px 0;
}

#menu{
display:inline-block;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius:100px;
padding:0 10px;
}
#menu ul li a{
display:inline-block;
border-radius: 100px;
padding:5px 10px;
margin:0 5px;
color:#FAF9F6;
font-size:16px;
text-transform:uppercase;
}
#menu ul li a:hover, #menu ul li.active a{
color:#1F2A44;
background: #FAF9F6;
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
}
#menu #logo{
position:absolute;
margin:auto;
/*left:-40px;
top:-45px;*/
left:5px;
z-index:1;
}


#zvon{
display:inline-block;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius:60px;
padding:10px;
}
#zvon a{
font-family: Unbounded;
display:inline-block;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
padding:10px 20px;
color:#FAF9F6;
font-size:16px;
font-weight:500;
text-transform:uppercase;
text-decoration:none;
border: 1px solid transparent;
background: 
    linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%) padding-box, 
    linear-gradient(0deg, #FFFFFF 0%, #999999 100%) border-box;

}
#zvon a:hover{
background: 
    linear-gradient(180deg, #8C36CF 0%, #65A8EF 100%) padding-box, 
    linear-gradient(0deg, #999999 0%, #FFFFFF 100%) border-box;
}

#slogan{
margin:40px 0 20px;
position:relative;
z-index:2;
}
#slogan span{
color: rgba(250, 249, 246, 0.6);
font-size:12px;
}
#slogan b{
font-family: Unbounded;
color:#FAF9F6;
font-size:44px;
text-transform:uppercase;
}
#slogan b i{
background: linear-gradient(90deg, #FFFFFF 0%, #FDBCFF 100%);
background-clip: text;
color: transparent;
font-style:normal;
}
#slogan p{
margin:40px 0;
color:rgba(250, 249, 246, 0.6);
font-size:18px;
}

#slogan_kont{
color:rgba(250, 249, 246, 0.6);
font-size:20px;
padding-bottom:20px;
}
#slogan_kont span{
display:block;
margin-bottom:10px;
font-size:18px;
}
#slogan_kont p{
font-family: Unbounded;
margin-bottom:10px;
}

#slogan_menu div{
display:inline-block;
vertical-align:top;
margin-right:20px;
margin-bottom:10px;
text-align:center;
position:relative;
z-index:2;
}
#slogan_menu span{
color:rgba(250, 249, 246, 0.6);
font-size:12px;
}
#slogan_menu div a{
font-family: Unbounded;
display:inline-block;
border-radius:35px;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
padding:20px;
color:#FAF9F6;
font-weight:500;
font-size:16px;
text-transform:uppercase;
text-decoration:none;
border: 1px solid transparent;
background: 
    linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%) padding-box, 
    linear-gradient(0deg, #FFFFFF 0%, #999999 100%) border-box;

}
#slogan_menu div a:hover{
background: 
    linear-gradient(180deg, #8C36CF 0%, #65A8EF 100%) padding-box, 
    linear-gradient(0deg, #999999 0%, #FFFFFF 100%) border-box;
}
#slogan_menu div a i{
margin-left:10px;
}
#slogan_menu div:last-child a{
background:#FAF9F6;
color:#1F2A44;
}
#slogan_menu div:last-child a:hover{
background:#8C36CF;
color:#FAF9F6;
}

#slogan_calc{
margin:60px 0 70px;
}
#slogan_calc div{
display:inline-block;
margin-right:30px;
}
#slogan_calc div b{
font-family: 'Space Grotesk';
font-weight:600;
font-size:64px;
line-height:70px;
color:rgba(250, 249, 246, 0.6);
}
#slogan_calc div b i{
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
background-clip: text;
color: transparent;
font-style:normal;
}
#slogan_calc div span{
color:rgba(250, 249, 246, 0.6);
}

#page{
/*background: linear-gradient(180deg, #483AA4 0%, #7456C5 50%, #16103A 85%, #16103A 100%);*/

  background-image: 
    /* 1. Базовое затемнение снизу */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%),
    
    /* 2. Центральный темный радиальный слой */
    radial-gradient(ellipse at 50% 32.17%, rgba(27, 32, 58, 0.4) 0%, rgba(27, 32, 58, 0) 67.83%),
    
    /* 3. Фиолетовое свечение справа-снизу */
    radial-gradient(ellipse at 57.05% 70.33%, rgba(155, 77, 255, 0) 0%, rgba(155, 77, 255, 0.25) 111.72%),
    
    /* 4. Розовое свечение в верхнем правом углу */
    radial-gradient(ellipse 52.78% 68.89% at 90.87% 14.78%, rgba(255, 45, 149, 0.35) 0%, rgba(255, 45, 149, 0) 100%),
    
    /* 5. Голубое свечение в левом нижнем углу */
    radial-gradient(ellipse 65.44% 71.11% at -7.15% 115.44%, rgba(22, 191, 255, 0.4) 0%, rgba(22, 191, 255, 0) 100%),
    
    /* 6. Основной фоновый линейный градиент */
    linear-gradient(248.66deg, #44204E 0%, #0E2747 100%);

/*overflow:hidden;*/
overflow: clip;
}

#main{
background:url(images/back.webp);
background-position:bottom center;
background-size:cover;
overflow:hidden;
}
#main_top{
height:200px;
margin-bottom:-200px;
background: linear-gradient(180deg,rgba(15, 14, 42, 1) 0%, rgba(15, 14, 42, 0) 100%);
}

#zag{
font-family: Unbounded;
font-size:40px;
font-weight:500;
text-transform:uppercase;
margin-bottom:25px;
}

#zag.star{
display:inline-block;
position:relative;
padding-left:35px;
padding-right:35px;
}
#zag.star:before{
content:"";
display:inline-block;
position:absolute;
left:0;
top:50%;
margin-top:-12px;
width:24px;
height:24px;
background:url(images/zag.webp);
}
#zag.star:after{
content:"";
display:inline-block;
position:absolute;
right:0;
top:50%;
margin-top:-12px;
width:24px;
height:24px;
background:url(images/zag.webp);
}

#but_back span{
color:rgba(250, 249, 246, 0.6);
font-size:12px;
}

#but{
font-family: Unbounded;
display:inline-block;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
border-radius:35px;
padding:16px;
color:#FAF9F6;
font-weight:500;
font-size:16px;
text-transform:uppercase;
text-decoration:none;
border: 1px solid transparent;
background: 
    linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%) padding-box, 
    linear-gradient(0deg, #FFFFFF 0%, #999999 100%) border-box;
}
#but:hover{
background: 
    linear-gradient(180deg, #8C36CF 0%, #65A8EF 100%) padding-box, 
    linear-gradient(0deg, #999999 0%, #FFFFFF 100%) border-box;
}

#ak .header-view, #ak .content-view{
border-radius:10px;
background: rgba(0, 64, 118, 0.4);
padding:5px 20px;
overflow:hidden;
position: relative;
z-index: 1;
}
#ak .header-view:before, #ak .content-view:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */    
}



/* Состояния по умолчанию */
#ak .content-view { display: none; position: relative; }
#ak .header-view { display: flex; align-items: center; animation: fadeIn 0.3s ease;}

/* Когда блок активирован */
#ak .item.active .header-view { display: none; } /* Скрываем заголовок полностью */
#ak .item.active .content-view { display: flex; align-items: center; animation: fadeIn 0.3s ease; padding-bottom:50px;}

/* Стили как на макете */
#ak .num {
font-family: 'Space Grotesk';
color:rgba(250, 249, 246, 0.6);
font-size:128px;
line-height:128px;
margin:0 20px -50px 0;
}
#ak .item:first-child .num{
margin-right:40px;
}
#ak .plus, #ak .close { 
margin-left: auto; 
font-size: 70px;
font-weight:100;
cursor: pointer; 
color:#8C36CF;
padding-left:20px;
}
#ak .text{
font-family: Unbounded;
font-size:20px;
font-weight:normal;
margin:0 20px;
}
#ak #but{
margin:auto;
white-space: nowrap;
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

#rez{
background:url(images/rez/ball.webp);
background-position:right top;
background-repeat:no-repeat;
}

#rez div div{
display:block;
padding:20px;
border-radius:10px;
background: linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%);
min-height:130px;
}
#rez i{
font-family: 'Space Grotesk';
font-weight:medium;
float:left;
font-size:128px;
font-weight:600;
font-style:normal;
line-height:70px;
margin-top:-50px;
color:rgba(250, 249, 246, 0.8);
}
#rez i em{
font-family: "Roboto";
display:block;
color:rgba(250, 249, 246, 0.6);
font-size:12px;
font-weight:400;
font-style:normal;
}
#rez p{
margin-left:90px;
}
#rez p b{
font-family: Unbounded;
display:block;
font-size:20px;
font-weight:normal;
margin:5px 0 45px;
}
#rez p span{
font-size:18px;
font-weight:400;
font-style:normal;
}

#rez div:nth-child(2) div{
border-radius:10px;
background: rgba(150, 21, 197, 0.2);
padding:5px 20px;
overflow:hidden;
position: relative;
z-index: 1;
}
#rez div:nth-child(2) div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */    
}

#rez div:nth-child(3) div{
background:url(images/rez/left.webp);
background-size: cover;
opacity:0.8;
}
#rez div:nth-child(5) div{
background:url(images/rez/right.webp);
background-size: cover;
opacity:0.8;
}

#voz{
background:url(images/kub.webp);
background-position:right top 20px;
background-repeat:no-repeat;
padding-bottom:50px;
}
#voz div div{
min-height:230px;
border-radius:25px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2);
position: relative;
}
#voz div div b{
font-family: Unbounded;
display:block;
margin-bottom:10px;
font-size:20px;
font-weight:normal;
}
#voz div div span{
font-size:18px;
}
#voz div div a{
display:block;
position:absolute;
bottom:5px;
color: rgba(250, 249, 246, 0.6);
font-size:14px;
text-decoration:none;
}
#voz div div a i{
margin-left:5px;
}
#voz div div a:hover{
color:#fff;
}

#pro_menu{
position:relative;
}
#pro_menu.star:after{
content:"";
display:block;
width:318px;
height:212px;
background:url(images/pro/star.webp);
background-repeat:no-repeat;
position:absolute;
right:-150px;
top:-90px;
overflow:hidden;
}
#pro_menu.blog ul{
display: flex;
align-items: center;
}
#pro_menu.blog ul li a{
white-space: nowrap;
}
#pro_menu ul{
list-style-type:none;
margin:0;
padding:0;
}
#pro_menu ul li{
display:inline;
}
#pro_menu ul li a{
display:inline-block;
padding:15px;
margin:5px;
color:#FAF9F6;
text-decoration:none;
border-radius:100px;
background: rgba(31, 42, 68, 0.6);
overflow:hidden;
position: relative;
z-index: 1;
}
#pro_menu ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */    
}
#pro_menu ul li a:hover{
color:#1F2A44;
background: linear-gradient(90deg, #FFFFFF 0%, #FDBCFF 100%);
}

#pro{
border-radius:10px;
background: rgba(0, 64, 118, 0.4);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
padding:10px 20px;
overflow:hidden;
position: relative;
z-index: 1;
}
#pro:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px; /* Должен совпадать с родительским */
  /* 2. Настройка градиента рамки */
  border: 1px solid transparent; /* Толщина рамки */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 239, 239, 0) 100%) border-box; /* Градиент */
  /* 3. Магия для просвечивания фона */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1; /* Рамка под контентом */ 
}

        /* Текстовый блок */
        .label-sm {font-size: 18px; margin-bottom: 5px; color:rgba(250, 249, 246, 0.6);}
        .project-name {font-size: 36px; font-weight: 500; text-transform: uppercase; line-height: 1;}
        .project-link {color:#1060F4; text-decoration: none; font-size:16px;}
        .project-link:before {content:"";display:inline-block;background:url(images/port/link.webp);width:24px;height:24px;margin:0 5px -7px 0;}
        .stats-box { margin-top: 40px; display: flex; gap: 30px; }
        .stat-col { flex: 1; }
        .stat-label { font-family: Unbounded;font-size: 16px; color: rgba(250, 249, 246, 0.8); }
        .stat-label.pink { color:#8C36CF; }
        .stat-list { list-style: none; padding: 0;}
        .stat-list li{margin:10px 0;}

        .btn-main {
            font-family: Unbounded;
            display:inline-block;
            border-radius:30px;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
            padding:15px;
            margin-top:20px;
            font-weight:500;
            font-size:16px;
            text-transform:uppercase;
            text-decoration:none;
            background:#FAF9F6;
            color:#1F2A44;
        }
        .btn-main:hover{
            background:#8C36CF;
            color:#FAF9F6;
        }
        .btn-main i{
            margin-left:10px;
        }

        /* Центральное фото */
        #main-pic {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2);
            transition: opacity 0.4s ease;
        }

        /* Правая колонка */
        .promo-desc { font-size: 20px; margin-bottom: 40px; line-height: 1.3; }

        /* Миниатюры (Следующие блоки) */
        .thumb-card {
            width: 130px;
            height: 90px;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid rgba(255,255,255,0.1);
            opacity:0.6;
            transition: 0.3s;
        }
        .thumb-card:hover { border-color: #fff; transform: scale(1.05); }
        .thumb-card img { width: 100%; height: 100%; object-fit: cover; }

        /* Навигация */
        .nav-dot {
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        .nav-dot:hover { opacity:0.6; }
        
        .counter-wrap {font-family: 'Space Grotesk';color: rgba(250, 249, 246, 0.6); font-size:48px; display: flex; align-items: baseline; }
        .num-active { color:#8C36CF; font-size:72px;}
        .num-sep {  margin: 0 10px; }


#zag.form{
position:relative;
}
#zag.form:before{
content:"";
display:block;
width:219px;
height:146px;
background:url(images/form/star.webp);
background-repeat:no-repeat;
position:absolute;
left:-100px;
top:-10px;
overflow:hidden;
}

#form div div{
min-height:330px;
padding:20px;
position:relative;
z-index:1;
border-radius:10px;
border: 1px solid transparent;
background: 
    linear-gradient(180deg, #65A8EF 0%, #8C36CF 100%) padding-box, 
    linear-gradient(180deg, rgba(153, 153, 153, 0) 0%, #FFFFFF 100%) border-box;
}
#form div:last-child div{

border: 1px solid transparent;
background: 
    url(images/form/back.webp) padding-box, 
    linear-gradient(180deg, #FFFFFF 0%, rgba(153, 153, 153, 0) 100%) border-box;
    
    
background-repeat:no-repeat;
background-size:cover;
background-position:right top;
}

#seogin{
font-size: 18vw;
line-height:100%;
font-weight:700;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0.11%, rgba(16, 14, 46, 0.3) 73.89%);
background-clip: text;
color: transparent;
}
#seogin span{
background:none;
background: linear-gradient(0deg, #16103A 30.17%, #9615C5 100%);
background-clip: text;
color: transparent;
}

#niz{
padding-bottom:15px;
}
#niz a{
color:#FAF9F6;
text-decoration:none;
}
#niz a:hover{
color:#1060F4;
}

#niz_zag{
color:rgba(250, 249, 246, 0.6);
margin-bottom:5px;
}
#niz_menu ul{
list-style-type:none;
padding:0;
margin:0;
}
#niz_menu ul li a{
display:inline-block;
margin-bottom:5px;
}
#niz_menu ul li a:hover,#niz_menu ul li.active a{
color:#1060F4;
}

#soc{
font-size:24px;
}
#soc a{
color:#8C36CF;
}


@media (max-width:1400px){

#usl div div b{
font-size:24px;
}

#stat_form #zag{
font-size:30px;
}

#top_raz{
background:url(images/usl/raz/top1140.webp);
background-position:top center;
background-size:cover;
min-height:776px;  
}
#top_mag{
background:url(images/usl/mag/top1140.webp);
background-position:top center;
background-size:cover;
min-height:776px;  
}

#raz_preim.mag_preim{
margin:auto;
}

#mag_zad .h-100{
font-size:13px;   
}

#mag_toper .h-100{
font-size:13px;   
}

#mag_toper .h-100 b,#key_toper .h-100 b,#key_rez .h-100 b{
font-size:32px;   
}

#key_toper .h-100,#key_rez .h-100{
font-size:14px;
}

#key_top_img{
position:absolute;
right:0;
top:50px;
max-height:550px;
}

}

@media (max-width:1200px){

#menu{
margin-top:10px;
border-radius:10px;
display:block;
position:relative;
}
#menu ul li a{
color:#fff;
border-radius:0;
padding:0;
margin:5px;
text-transform:none;
font-size:20px;
font-weight:500;
}
#menu ul li a:hover,#menu ul li.active a{
background:none;
color:#ccc;
box-shadow:none;
}



#slogan_calc div b{
font-family: 'Space Grotesk';
font-size:50px;
line-height:55px;
}

#ak .num {
font-size:80px;
line-height:80px;
margin:0 5px -70px 0;
}
#ak .item:first-child .num{
margin-right:20px;
}
#ak .text{
font-size:20px;
margin:0 10px;
}
#ak #but{
font-size:16px;   
}
#blog_rez{
white-space: normal;
}

/*#kont_back:after{
content:"";
display:block;
width:498px;
height:553px;
background:url(images/kont/back.webp);
position:absolute;
right:20%;
margin-right:-250px;
top:320px;
}*/

#usl div div b{
font-size:20px;
}
#usl div div a{
font-size:16px;
}

#top_raz{
background:url(images/usl/raz/top960.webp);
background-position:top center;
background-size:cover;
min-height:664px;  
}
#top_mag{
background:url(images/usl/mag/top960.webp);
background-position:top center;
background-size:cover;
min-height:664px;  
}

#key_top_img{
position:absolute;
right:0;
top:0;
max-height:480px;
}

}

@media (max-width:992px){
#top_back{
background:url(images/topm.webp);
background-position:top right;
background-size:cover;
min-height:932px;  
}
#o404{
position: relative; 
overflow: hidden;
background:none;
min-height: 100vh;
background:url(images/404.webp);
background-repeat: no-repeat;
background-position:top right -300px;
background-attachment: fixed;
background-size: cover;
}
#pro_menu.blog ul{
display:block;
}
#pro_menu.blog ul li{
display:flex;
align-items: center;
}
#pro_menu.blog ul li #line{
width:50%;
}
#pro_menu.blog ul li a{
width:100%;
}

#slogan_in b{
font-size:32px;
}
#slogan_in p{
font-size:14px;
}

#zag,#slogan b{
font-size:24px;
}

#top_raz{
background:url(images/usl/raz/top390.webp);
background-position:top center;
background-size:cover;
min-height:794px;  
}
#top_mag{
background:url(images/usl/mag/top390.webp);
background-position:top center;
background-size:cover;
min-height:794px;  
}

#mag_zad .h-100{
font-size:11px;   
}

#key_top_img{
position:static;
right:0;
top:0;
max-height:300px;
}

}

@media (max-width:576px){
#ak .num {
display:none;
}
#ak #but{
font-size:12px;
}
#raz_poh img{
right:0;
}

}