/* ============================================
   ПЛАВНЫЙ СКРОЛЛ
   ============================================ */
html {
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   ШУМОВОЙ ОВЕРЛЕЙ
   ============================================ */
.noise {
    background: url('https://static.tildacdn.com/tild6463-6432-4632-b834-373237633663/noise.svg');
    opacity: 0.1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
}

/* ============================================
   ТЁМНАЯ АНИМИРОВАННАЯ КНОПКА
   ============================================ */
:root {
    --btn-gradient-border: conic-gradient(from 0 at 50% 50%, rgb(245 100 228 / 50%) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(196 86 249 / 50%) 360deg);
    --btn-gradient-border-hover: conic-gradient(from 0 at 50% 50%, rgba(255,255,255,.5) 0deg, rgba(255,255,255,0) 60deg, rgba(255,255,255,0) 310deg, rgba(255,255,255,.5) 360deg);
    --btn-gradient-bg: conic-gradient(from 0 at 50% 50%, rgba(255,255,255,0.3) 0deg, rgba(255,255,255,0) 60deg, rgba(255,255,255,0.3) 280deg, rgba(255,255,255,0.3) 180deg);
    --btn-gradient-border-size: 1px solid;
    --btn-gradient-border-color: #666666;
    --btn-gradient-border-color-hover: #666666;
    --btn-gradient-bg-opacity: 0.1;
    --btn-gradient-bg-opacity-hover: 0.4;
    --btn-gradient-border-radius: 100px;
}

.btn-wrapper {
    width: 100%;
    height: 100%;
    border: var(--btn-gradient-border-size);
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    border-radius: var(--btn-gradient-border-radius);
    transform: translate(-50%, -50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: clear;
    pointer-events: none !important;
}

.btn-bg-wrapper {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    border-radius: var(--btn-gradient-border-radius);
    z-index: -1;
    transform: translate(-50%, -50%);
}

.btn-gradient-animation .tn-atom {
    transition: color 0.4s, background-color 0.4s !important;
}

.btn-gradient-animation .btn-gradient,
.btn-gradient-animation .btn-gradient-bg {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: borderTurn 2.5s infinite linear;
    will-change: transform;
}

.btn-gradient-animation .btn-gradient {
    background: var(--btn-gradient-border-color);
    background-image: var(--btn-gradient-border);
    z-index: -1;
    transition: background 0.4s, background-image 0.4s;
}

.btn-gradient-animation .btn-gradient-bg {
    opacity: var(--btn-gradient-bg-opacity);
    background-image: var(--btn-gradient-bg);
    z-index: -2;
    transition: opacity 0.4s;
}

.btn-gradient-animation:hover .btn-gradient {
    background: var(--btn-gradient-border-color-hover);
    background-image: var(--btn-gradient-border-hover);
}

.btn-gradient-animation:hover .btn-gradient-bg {
    opacity: var(--btn-gradient-bg-opacity-hover);
}

@keyframes borderTurn {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 767px) {
    .btn-gradient-animation .btn-gradient,
    .btn-gradient-animation .btn-gradient-bg {
        animation: none;
    }
}

/* ============================================
   СВЕТЛАЯ АНИМИРОВАННАЯ КНОПКА (-1)
   ============================================ */
:root {
    --btn-gradient-border-1: conic-gradient(from 0 at 50% 50%, rgb(196 117 255) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(167 110 255) 360deg);
    --btn-gradient-border-hover-1: conic-gradient(from 0 at 50% 50%, rgb(243 0 247) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(255 0 199) 360deg);
    --btn-gradient-bg-1: conic-gradient(from 0 at 50% 50%, rgb(255 146 231) 0deg, rgb(215 164 253) 60deg, rgb(255 146 231) 280deg, rgb(255 146 231) 180deg);
    --btn-gradient-border-size-1: 1.15px solid;
    --btn-gradient-border-color-1: #dfdfdf;
    --btn-gradient-border-color-hover-1: #d5baff;
    --btn-gradient-bg-opacity-1: 0.1;
    --btn-gradient-bg-opacity-hover-1: 0.15;
    --btn-gradient-border-radius-1: 100px;
}

.btn-wrapper-1 {
    pointer-events: none !important;
    width: 100%;
    height: 100%;
    border: var(--btn-gradient-border-size-1);
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    border-radius: var(--btn-gradient-border-radius-1);
    transform: translate(-50%, -50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: clear;
}

.btn-bg-wrapper-1 {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    border-radius: var(--btn-gradient-border-radius-1);
    z-index: -1;
    transform: translate(-50%, -50%);
}

.btn-gradient-animation-1 .tn-atom {
    transition: color 0.4s, background-color 0.4s !important;
}

.btn-gradient-animation-1 .btn-gradient-1,
.btn-gradient-animation-1 .btn-gradient-bg-1 {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: borderTurn-1 2.5s infinite linear;
    will-change: transform;
}

.btn-gradient-animation-1 .btn-gradient-1 {
    background: var(--btn-gradient-border-color-1);
    background-image: var(--btn-gradient-border-1);
    z-index: -1;
    transition: background 0.4s, background-image 0.4s;
}

.btn-gradient-animation-1 .btn-gradient-bg-1 {
    opacity: var(--btn-gradient-bg-opacity-1);
    background-image: var(--btn-gradient-bg-1);
    z-index: -2;
    transition: opacity 0.4s;
}

.btn-gradient-animation-1:hover .btn-gradient-1 {
    background: var(--btn-gradient-border-color-hover-1);
    background-image: var(--btn-gradient-border-hover-1);
}

.btn-gradient-animation-1:hover .btn-gradient-bg-1 {
    opacity: var(--btn-gradient-bg-opacity-hover-1);
}

@keyframes borderTurn-1 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 767px) {
    .btn-gradient-animation-1 .btn-gradient-1,
    .btn-gradient-animation-1 .btn-gradient-bg-1 {
        animation: none;
    }
}

/* ============================================
   ПОДМЕНЮ
   ============================================ */
.uc-submenu-hide-1 .t396__artboard,
.uc-submenu-hide-2 .t396__artboard,
.uc-submenu-hide-3 .t396__artboard,
.uc-submenu-hide-4 .t396__artboard,
.uc-submenu-hide-5 .t396__artboard,
.uc-submenu-hide-6 .t396__artboard {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
}

.overlay-bg-sub {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 996;
    background: var(--SubColor);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    backdrop-filter: var(--SubBlur);
    -webkit-backdrop-filter: var(--SubBlur);
}

@media (max-width: 767px) {
    .overlay-bg-sub {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.overlay-bg-sub.active {
    opacity: 1;
    pointer-events: all;
}

.art-slide {
    z-index: 997;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0.4s;
    will-change: transform, opacity;
}

.art-slide.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
}

.uc-submenu-hide {
    position: fixed;
    z-index: 998;
    width: 100%;
}

.uc-menu-sub {
    position: fixed;
    z-index: 999;
}

.uc-menu-sub.in-view .tn-atom {
    pointer-events: all !important;
}

/* ============================================
   ГЛАВНОЕ МЕНЮ
   ============================================ */
body, .t-body, html {
    margin: 0 !important;
    padding: 0 !important;
}

#allrecords,
.t-records,
.t-rec:first-child,
.t-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.icon-menu {
    z-index: 999 !important;
    cursor: pointer;
}

.icon-menu .tn-atom {
    color: #000000 !important;
    transition: color 0.3s ease !important;
}

.icon-menu:hover .tn-atom {
    color: #356DD1 !important;
}

.icon-menu.menu-open .tn-atom {
    color: #ffffff !important;
}

.icon-menu.menu-open:hover .tn-atom {
    color: #356DD1 !important;
}

.logo-1,
.logo-2 {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.logo-1 {
    opacity: 1 !important;
    visibility: visible !important;
}

.logo-2 {
    opacity: 0 !important;
    visibility: hidden !important;
}

.logo-1.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.logo-2.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.uc-menu-header {
    position: relative !important;
    z-index: 9999;
    margin: 0 !important;
    padding: 0 !important;
}

.uc-menu-header .t396__artboard {
    z-index: 99;
    position: var(--MenuPosition);
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 1367px) {
    .uc-menu-header .t396__artboard { position: var(--HeaderPosition); }
}

@media (max-width: 1366px) and (min-width: 769px) {
    .uc-menu-header .t396__artboard { position: var(--HeaderPosition1024); }
}

@media (max-width: 768px) and (min-width: 481px) {
    .uc-menu-header .t396__artboard { position: var(--HeaderPosition768); }
}

@media (max-width: 480px) {
    .uc-menu-header .t396__artboard { position: var(--HeaderPosition480); }
}

.NavBlock {
    position: fixed;
    width: 110vw !important;
    height: 100vh;
    z-index: 310;
    overflow: hidden;
    transition: transform 1200ms cubic-bezier(0.9, 0.27, 0.2, 0.9);
    will-change: transform;
}

.NavBlock.show {
    transition: transform 500ms cubic-bezier(0.9, 0.27, 0.2, 0.9);
}

.NavBlock .t396__artboard {
    width: 110vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden;
    clip-path: path('M0 0H1920V1H0V0Z');
    transform: translate(0px, -464.5px) rotate(-17deg) scale(1.5, 1.5);
    transition: clip-path 1.2s, transform 1.2s;
    transition-delay: 0s;
    will-change: transform, clip-path;
}

.NavBlock.show .t396__artboard {
    clip-path: path('M0 0H1920V1080H0V0Z');
    transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    overflow-y: scroll;
    transition-delay: 0.3s;
    transition-duration: 1.2s;
}

@media (max-width: 550px) {
    .NavBlock .t396__artboard {
        transform: translate(-100px, -464.5px) rotate(-17deg) scale(1.5, 1.5);
    }
    .NavBlock.show .t396__artboard {
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }
}

.NavActive {
    height: 100vh !important;
    overflow: hidden !important;
}

.Trigger {
    z-index: 3050 !important;
}

.overlay_menu_inside .tn-atom {
    opacity: 1;
    background: #0d0e13;
    transition: opacity 0.5s;
}

.overlay_menu_inside_anim {
    opacity: 0 !important;
    transition-delay: 0.5s !important;
    transition-duration: 0.7s !important;
}

.uc-transform-block {
    overflow: hidden !important;
}

.block-show,
.content-show {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 0.3s;
}

.content-hide,
.block-hide {
    opacity: 0;
    pointer-events: none;
    transition-duration: 0.3s;
}

/* ============================================
   ПРИЛИПАЮЩИЙ ФУТЕР
   ============================================ */
.uc-sticky-footer {
    contain: layout;
}

.uc-sticky-footer .t396__artboard {
    position: fixed;
    bottom: 0;
    width: 100%;
    will-change: transform;
    z-index: 100;
}

/* ============================================
   ФИКСИРОВАННАЯ ШАПКА
   ============================================ */
@media screen and (min-width: 768px) {
    .uc-fix-header {
        position: fixed;
        top: 0;
        z-index: 999;
        width: 100%;
        will-change: transform;
    }
}

/* ============================================
   КАСТОМНЫЙ СКРОЛЛБАР
   ============================================ */
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}

@-moz-document url-prefix() {
    html { scrollbar-width: none; }
}

@media (max-width: 767px) {
    .custom-wrapper-md {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {

    .custom-wrapper-md {
        width: 30px;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        pointer-events: all;
        background: transparent;
        z-index: 9999;
    }

    .custom-scrollbar-md {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        height: var(--ScrollbarHeight);
        width: var(--ThumbWidth);
        margin-right: var(--ScrollbarPaddingRight);
        background: var(--ScrollbarColor);
        overflow: hidden;
        transition: width 0.3s;
    }

    .custom-wrapper-md:hover .custom-scrollbar-md,
    .custom-wrapper-md:active .custom-scrollbar-md {
        width: var(--ThumbWidthActive);
    }

    .custom-scrollbar-thumb-md {
        width: 100%;
        background-color: var(--ThumbColor);
        background-size: cover;
        border-radius: var(--ThumbBorder);
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(0);
        will-change: transform;
        opacity: var(--ThumbOpacity);
        transition: opacity 0.7s;
        cursor: grab;
        user-select: none;
    }

    .custom-scrollbar-thumb-md:active {
        cursor: grabbing;
    }

    .custom-scrollbar-thumb-md:hover,
    .custom-wrapper-md:hover .custom-scrollbar-thumb-md {
        opacity: var(--ThumbOpacityActive);
    }

    .custom-scrollbar-thumb-md.hide {
        opacity: 0;
    }

    .uc-scroll-md {
        z-index: 999;
        position: fixed;
        width: 100%;
        height: 100%;
        pointer-events: none;
        top: 0;
    }

    .uc-scroll-md .custom-scrollbar-md {
        pointer-events: all;
    }
}

/* ============================================
   3D КАРТОЧКА ПРИ СКРОЛЛЕ
   ============================================ */
.t396__elem[class*="scroll-twist-card-anim-"],
[class^="scroll-twist-wrapper-inside-"],
[class^="scroll-twist-card-before-wrapper-"],
[class^="scroll-twist-card-after-wrapper-"],
[class^="scroll-twist-card-before-wrapper-"] div,
[class^="scroll-twist-card-after-wrapper-"] div,
.t396__elem[class*="scroll-twist-card-after-"],
.t396__elem[class*="scroll-twist-card-before-"],
[class^="scroll-twist-"] {
    perspective: 2000px;
    transform-style: preserve-3d;
}

[class^="scroll-twist-wrapper-inside-"],
[class^="scroll-twist-card-before-wrapper-"],
[class^="scroll-twist-card-after-wrapper-"],
[class^="scroll-twist-card-before-wrapper-"] div,
[class^="scroll-twist-card-after-wrapper-"] div,
.t396__elem[class*="scroll-twist-card-after-"],
.t396__elem[class*="scroll-twist-card-before-"],
[class^="scroll-twist-inside-"] {
    backface-visibility: hidden;
}

[class^="scroll-twist-wrapper-"],
[class^="scroll-twist-wrapper-inside-"],
[class^="scroll-twist-"] {
    width: 100%;
    height: 100%;
}

[class^="scroll-twist-"] {
    position: absolute;
    left: 0;
    top: 0;
}

[class^="scroll-twist-card-before-wrapper-"],
[class^="scroll-twist-card-after-wrapper-"] {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.t396__elem[class*="scroll-twist-content-after-"] {
    zoom: 0 !important;
}

[class^="scroll-twist-card-before-"],
[class^="scroll-twist-card-after-"] {
    backface-visibility: hidden;
    zoom: 0 !important;
}

[class^="scroll-twist-card-before-wrapper-"] div,
[class^="scroll-twist-card-after-wrapper-"] div,
.t396__elem[class*="scroll-twist-card-after-"],
.t396__elem[class*="scroll-twist-card-before-"] {
    zoom: 0 !important;
}

[class^="scroll-twist-card-after-wrapper-"],
.t396__elem[class*="scroll-twist-card-after-"] {
    transform: rotateY(-180deg);
}

[class^="scroll-twist-card-before-"] .tn-atom,
[class^="scroll-twist-card-after-"] .tn-atom {
    backface-visibility: hidden;
}

/* ============================================
   FLIP-КАРТОЧКИ
   ============================================ */
.t396__elem[class*="card-flip-wrapper-main-"] {
    cursor: pointer !important;
}

[class^="card-flip-wrapper-face-"],
[class^="card-flip-wrapper-back-"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1);
}

.t396__elem[class*="card-flip-content-face-"],
.t396__elem[class*="card-flip-content-back-"] {
    zoom: 0 !important;
}

[class^="card-flip-wrapper-back-"] {
    transform: perspective(1500px) rotateY(-180deg);
}

[class^="card-flip-wrapper-face-"] {
    transform: perspective(1500px) rotateY(0deg);
}

[class*="card-flip-wrapper-main-active-"] [class^="card-flip-wrapper-face-"] {
    transform: perspective(1500px) rotateY(180deg);
}

[class*="card-flip-wrapper-main-active-"] [class^="card-flip-wrapper-back-"] {
    transform: perspective(1500px) rotateY(0deg);
}

/* ============================================
   СЧЁТЧИК
   ============================================ */
@keyframes transform-number {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.counter .tn-atom:after {
    content: '';
}

.counter {
    overflow: hidden;
    animation: transform-number 3.2s cubic-bezier(0.98, 0.12, 0.18, 1.03);
    animation-fill-mode: forwards;
    animation-delay: 0.4s;
    animation-direction: normal;
    opacity: 0;
    transition-duration: 0.5s;
}

.counter-view {
    opacity: 1;
}

.counter-plus .tn-atom:after {
    content: '+';
}

.counter-k .tn-atom:after {
    content: '';
}

/* ============================================
   АККОРДЕОН
   ============================================ */
:root {
    --BGColorPassive: #F0F0F0;
    --BGImgPassive: url('');
    --IconsColorPassive: #000;
    --BGColorHover: #356DD1;
    --BGImgHover: url('');
    --IconsColorHover: #fff;
    --BGColorActive: #356DD1;
    --BGImgActive: url('');
    --IconsColorActive: #fff;
    --IconsBorderRadius: 100px;
    --IconsWidth: 9px;
    --IconsHeight: 1px;
    --IconsPadding: 10px;
    --IconsBorderSize: 0px;
    --IconsBorderColorPassive: transparent;
    --IconsBorderColorHover: transparent;
    --IconsBorderColorActive: transparent;
}

.accord-line-inside {
    transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
    opacity: 1;
    transition-delay: 0s;
}

.accord-line-inside-active {
    opacity: 0;
    transition-delay: 0.7s;
    height: 150% !important;
}

.accordionTrigger {
    cursor: pointer;
}

/* height управляется через JS */
.uc-accordion-content {
    overflow: hidden;
    height: 0;
}

.accordion-icon-inside {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

.accordion-icon-inside span {
    width: var(--IconsWidth);
    height: var(--IconsHeight);
    background-color: var(--IconsColorPassive);
    position: absolute;
    transition: background-color 300ms cubic-bezier(0.77, 0, 0.175, 1),
                transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.accordion-icon-inside span:nth-child(1) {
    transform: rotate(90deg);
}

.accordion-icon-inside:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--IconsBorderRadius);
    border: var(--IconsBorderSize) solid var(--IconsBorderColorPassive);
    background-image: var(--BGImgPassive);
    background-size: cover;
    background-color: var(--BGColorPassive);
    padding: var(--IconsPadding);
    position: absolute;
    top: 50%;
    z-index: -1;
    transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1),
                background-image 400ms cubic-bezier(0.77, 0, 0.175, 1),
                border 400ms cubic-bezier(0.77, 0, 0.175, 1);
    transform: translate(-50%, -50%);
    left: 50%;
}

.accordion-icon-hover .accordion-icon-inside:after {
    border: var(--IconsBorderSize) solid var(--IconsBorderColorHover);
    background-image: var(--BGImgHover) !important;
    background-color: var(--BGColorHover);
}

.accordion-icon-hover .accordion-icon-inside span {
    background-color: var(--IconsColorHover);
}

.accordion-icon-active .accordion-icon-inside:after {
    border: var(--IconsBorderSize) solid var(--IconsBorderColorActive);
    background-image: var(--BGImgActive) !important;
    background-color: var(--BGColorActive);
}

.accordion-icon-active span {
    background-color: var(--IconsColorActive);
}

.accordion-icon-active span:nth-child(1) {
    transform: rotate(0deg);
}