body {
            font-family: 'Inter', sans-serif;
            background-color: #2a2a3a; /* Dark elegant purple/gray */
            color: #f3f4f6;
        }

        /* *{
            z-index: 1;
        } */

        .logo{
            width: 40px;
            height: 40px;
            transition: 0.6 ease-in-out all;
            &&:hover{
                scale: 1.04;
            }
        }

        

        footer .logo{
            display: block;
            width: 64px;
            height: 64px;
        }

        /* FONTS */

        h2{
            font-size: 36px!important;
        }

        h3{
            font-size: 30px!important;
        }

        #why-us .text-4xl{
            font-size: 28px!important;
        }

        #pricing .text-4xl{
            font-size: 28px!important;
        }

        .container{
            width: 1140px !important;
            max-width: 95%;
        }
        .gradient-text {
            background: linear-gradient(to right, #ec4899, #d8b4fe, #fbcfe8); /* Pink/Purple/Cream */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glassmorphism-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .swiper-button-next, .swiper-button-prev {
            color: #d8b4fe; /* Purple */
        }
        .swiper-pagination-bullet-active {
            background: #ec4899; /* Pink */
        }
        .faq-item .answer {
            max-height: 0;
            overflow: hidden;
            /* transition: all 0.2s ease-out; */
        }
        .faq-item.open .answer {
            max-height: 500px; /* Adjust as needed */
            padding-bottom: 1.5rem; /* Corresponds to pb-6 */
        }
        .faq-icon {
            position: relative;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        .faq-icon::before,
        .faq-icon::after {
            content: '';
            position: absolute;
            background-color: #ec4899; /* Pink */
            transition: all 0.2s ease-in;
        }
        .faq-icon::before { /* Horizontal line */
            top: 50%;
            margin-top: -1px;
            left: 0;
            width: 100%;
            height: 2px;
        }
        .faq-icon::after { /* Vertical line */
            top: 0;
            left: 50%;
            margin-left: -1px;
            width: 2px;
            height: 100%;
        }
        .faq-item.open .faq-icon::after {
            transform: rotate(90deg);
            opacity: 0;
        }
        /* For TOC Swiper */
        .toc-swiper .swiper-slide {
            width: auto;
        }
        .toc-swiper .swiper-scrollbar {
            background: rgba(255,255,255,0.1);
        }
        .toc-swiper .swiper-scrollbar-drag {
            background: #ec4899; /* Pink */
        }

        #home{
            position: relative;
            &&::after{
            position: absolute;
            background: linear-gradient(90deg,rgba(42, 42, 58, 1) 1%, rgba(42, 42, 58, 0.98) 18%, rgba(209, 40, 124, 0.05) 38%, rgba(209, 40, 124, 0) 59%, rgba(62, 42, 66, 0.438) 74%,rgba(42, 42, 58, 0.99) 80%, rgba(62, 42, 66, 1) 94%)
            , 
            linear-gradient(183deg,rgba(42, 42, 58, 1) 0%, rgba(42, 42, 58, 0) 5%, rgba(42, 42, 58, 0.363) 93%, rgba(42, 42, 58, 1) 100%);
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            content: '';
            z-index: -1;
        }
        }

        .home-bg{
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 100%;
            transform: scale(-1, 1);
            z-index: -2;
        }

        .home-bg img{
            position: relative;
            width: auto;
            height: 100%;
            padding-left: 15%;
            object-fit: cover;
        }

        

        /* Custom Button Press Effect */
        .btn-press {
            transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
        }
        .btn-press:active {
            transform: scale(0.97);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
        }

        /* Hero Animation */
        @keyframes float {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -45%) scale(1.05); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
        .hero-blur-animate {
            animation: float 8s ease-in-out infinite;
        }
        
        /* Mobile Menu & Burger Animation */
        #mobile-menu {
    position: absolute; /* 👈 Вынимаем из потока */
    top: 100%;       /* 👈 Позиционируем сразу под хедером */
    left: 0;         /* 👈 Растягиваем по ширине */
    right: 0;    
    transition: all ease-in-out 0.5s;    /* 👈 Растягиваем по ширине */
    
    /* Ваши существующие стили остаются */
    transition: max-height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
        #mobile-menu.is-active {
            max-height: unset;
            min-height: 100vh; /* A safe large value */
            padding-bottom: 1rem; /* Corresponds to pb-4 */
        }
        .burger-button {
            position: relative;
            width: 24px;
            height: 24px;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 100;
        }
        .burger-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            border-radius: 2px;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, top 0.3s ease-in-out;
        }
        .burger-line.top { top: 4px; }
        .burger-line.middle { top: 11px; }
        .burger-line.bottom { top: 18px; }

        header.menu-open .burger-line.top {
            transform: rotate(45deg);
            top: 11px;
        }
        header.menu-open .burger-line.middle {
            opacity: 0;
        }
        header.menu-open .burger-line.bottom {
            transform: rotate(-45deg);
            top: 11px;
        }

        .border-slate-800{
            border-color: rgb(106 114 128)!important;
        }

        footer .container{
            padding-bottom: 1rem!important;
        }

        .duration-300{
            object-position: 50% 18%!important;
            object-fit: cover!important;
        }

        .swiper-wrapper{
            padding-bottom: 16px;
        }

        .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
            width: 100%!important;
            left: 0!important;
        }

        @media (max-width: 768px){
            .mobile-invis{
                display: none;
            }

            .grid-cols-2{
                grid-template-columns: 1fr!important;
            }

            #why-us .flex{
                flex-direction: column!important;
                align-items: center;
                text-align: center;
            }

            .space-x-4 > :not([hidden]) ~ :not([hidden]){
                margin-left: 0!important;
            }

            .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
                bottom: 18px!important;
            }

            /* FONTS */

        h2{
            font-size: 30px!important;
        }

        h3{
            font-size: 24px!important;
        }

        #why-us .text-4xl{
            font-size: 22px!important;
        }

        #pricing .text-4xl{
            font-size: 22px!important;
        }

        img{
            justify-self: center;
        }

        .home-bg img{
            display: none;
        }

        #home::after{
            display: none;
        }

        footer .space-x-4{
            gap: 0.6rem;
        }

        }

        .user-gallery{
            position: relative;
        }

        .user-gallery .swiper-wrapper{
            padding-bottom: 0;
        }

        .user-gallery::after{
            position: absolute;
            display: inline;
            background: linear-gradient(90deg,rgba(42, 42, 58, 1) 12%, rgba(57, 42, 58, 0) 20%, rgba(57, 42, 58, 0) 80%, rgba(42, 42, 58, 1) 88%);
            top: 0;
            right: 0;
            content: '';
            height: 100%;
            width: 100%;
            pointer-events: none;
            user-select: none;
            z-index: 1;
        }

        @media (max-width: 768px) {
            .user-gallery::after{
                background: linear-gradient(90deg,rgba(42, 42, 58, 1) 6%, rgba(57, 42, 58, 0) 40%, rgba(57, 42, 58, 0) 70%, rgba(42, 42, 58, 1) 94%);                
            }
        }