/* =====================================================
   PSIX INVEST — HEADER ONLY
===================================================== */


.psix-site-header{

    position:sticky;

    z-index:1000;

    top:0;

    width:100%;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid #edf0f5;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


/* =====================================================
   INNER
===================================================== */


.psix-header-inner{

    width:100%;

    max-width:1540px;

    min-height:88px;

    margin:0 auto;

    padding:
        0 30px;

    display:flex;

    align-items:center;

    gap:34px;

}


/* =====================================================
   LOGO
===================================================== */


.psix-header-logo{

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    color:#101828;

    font-size:30px;

    font-weight:900;

    letter-spacing:-1.3px;

}


.psix-logo-main{

    color:#101828;

}


.psix-logo-accent{

    color:#2867ed;

}


.psix-header-logo-wrap{

    flex-shrink:0;

    display:flex;

    align-items:center;

}


.psix-header-logo-wrap .custom-logo-link{

    display:inline-flex;

    align-items:center;

    line-height:0;

}


.psix-header-logo-wrap .custom-logo{

    display:block;

    width:auto;

    height:46px;

    max-width:240px;

    object-fit:contain;

    object-position:left center;

}


/* =====================================================
   DESKTOP NAVIGATION
===================================================== */


.psix-desktop-nav{

    position:relative;

    top:7px;

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:8px;

}


.psix-nav-link{

    position:relative;

    min-height:46px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:
        0 16px;

    border:0;

    border-radius:12px;

    background:
        transparent;

    color:#344054;

    font-size:15px;

    line-height:1;

    font-weight:800;

    white-space:nowrap;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease;

}


.psix-nav-link:hover{

    color:#2867ed;

    background:#f4f7ff;

}


.psix-nav-link.is-active{

    color:#2867ed;

    background:
        rgba(40,103,237,.08);

}


/* =====================================================
   DROPDOWNS
===================================================== */


.psix-nav-dropdown{

    position:relative;

}


.psix-nav-chevron{

    display:inline-block;

    margin-top:-1px;

    color:#98a2b3;

    font-size:12px;

    transition:
        transform .2s ease;

}


.psix-nav-dropdown:hover
.psix-nav-chevron{

    transform:
        rotate(180deg);

}


.psix-nav-dropdown-menu{

    position:absolute;

    top:
        calc(100% + 12px);

    left:50%;

    width:330px;

    padding:10px;

    transform:
        translateX(-50%)
        translateY(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    border:
        1px solid #e7ebf2;

    border-radius:20px;

    background:#ffffff;

    box-shadow:
        0 22px 60px
        rgba(15,23,42,.14);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

}


/* мостик между кнопкой и выпадающим меню */

.psix-nav-dropdown-menu::before{

    content:"";

    position:absolute;

    top:-14px;

    right:0;

    left:0;

    height:14px;

}


.psix-nav-dropdown:hover
.psix-nav-dropdown-menu,

.psix-nav-dropdown:focus-within
.psix-nav-dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);

}


.psix-nav-dropdown-menu-wide{

    width:360px;

}


.psix-nav-dropdown-menu a{

    display:grid;

    grid-template-columns:
        36px minmax(0,1fr);

    gap:12px;

    align-items:start;

    padding:
        14px;

    border-radius:14px;

    transition:
        background .2s ease;

}


.psix-nav-dropdown-menu a:hover,

.psix-nav-dropdown-menu a.is-active{

    background:#f4f7ff;

}


.psix-dropdown-number{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:
        rgba(40,103,237,.09);

    color:#2867ed;

    font-size:11px;

    font-weight:900;

}


.psix-nav-dropdown-menu strong{

    display:block;

    margin-bottom:4px;

    color:#101828;

    font-size:14px;

    line-height:1.25;

}


.psix-nav-dropdown-menu small{

    display:block;

    color:#7c879d;

    font-size:12px;

    line-height:1.4;

}


/* =====================================================
   TELEGRAM
===================================================== */


.psix-header-telegram{

    position:relative;

    top:7px;

    flex-shrink:0;

    min-height:48px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:
        0 23px;

    border-radius:999px;

    background:#2867ed;

    color:#ffffff;

    font-size:15px;

    line-height:1;

    font-weight:900;

    box-shadow:
        0 8px 22px
        rgba(40,103,237,.22);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.psix-header-telegram:hover{

    transform:
        translateY(-2px);

    background:#1957df;

    box-shadow:
        0 12px 28px
        rgba(40,103,237,.30);

}


.psix-telegram-icon{

    font-size:16px;

}


/* =====================================================
   MOBILE NAV
===================================================== */


.psix-mobile-nav{

    position:relative;

    display:none;

}


.psix-mobile-nav summary{

    list-style:none;

}


.psix-mobile-nav summary::-webkit-details-marker{

    display:none;

}


.psix-mobile-menu-button{

    width:46px;

    height:46px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border:
        1px solid #e2e7ef;

    border-radius:13px;

    background:#ffffff;

    cursor:pointer;

}


.psix-mobile-menu-button span{

    width:19px;

    height:2px;

    border-radius:10px;

    background:#101828;

    transition:
        transform .2s ease,
        opacity .2s ease;

}


/* X WHEN OPEN */


.psix-mobile-nav[open]
.psix-mobile-menu-button
span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);

}


.psix-mobile-nav[open]
.psix-mobile-menu-button
span:nth-child(2){

    opacity:0;

}


.psix-mobile-nav[open]
.psix-mobile-menu-button
span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);

}


.psix-mobile-menu{

    position:absolute;

    top:
        calc(100% + 14px);

    right:0;

    width:
        min(360px, calc(100vw - 30px));

    max-height:
        calc(100vh - 110px);

    overflow-y:auto;

    padding:12px;

    border:
        1px solid #e7ebf2;

    border-radius:22px;

    background:#ffffff;

    box-shadow:
        0 24px 70px
        rgba(15,23,42,.18);

}


.psix-mobile-menu > a{

    display:block;

    padding:
        14px 16px;

    border-radius:12px;

    color:#344054;

    font-size:15px;

    font-weight:800;

}


.psix-mobile-menu > a:hover{

    background:#f4f7ff;

    color:#2867ed;

}


.psix-mobile-section{

    margin:
        8px 0;

    padding:
        12px;

    border-radius:16px;

    background:#f7f9fc;

}


.psix-mobile-section-title{

    margin:
        2px 5px 8px;

    color:#98a2b3;

    font-size:11px;

    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.psix-mobile-section a{

    display:block;

    padding:
        10px 7px;

    color:#344054;

    font-size:14px;

    font-weight:700;

}


.psix-mobile-section a:hover{

    color:#2867ed;

}


.psix-mobile-menu
.psix-mobile-telegram{

    margin-top:10px;

    padding:
        14px 18px;

    text-align:center;

    border-radius:999px;

    background:#2867ed;

    color:#ffffff;

}


.psix-mobile-menu
.psix-mobile-telegram:hover{

    color:#ffffff;

    background:#1957df;

}


/* =====================================================
   MEDIUM DESKTOP
===================================================== */


@media(max-width:1200px){


    .psix-header-inner{

        gap:20px;

    }


    .psix-desktop-nav{

        gap:2px;

    }


    .psix-nav-link{

        padding:
            0 10px;

        font-size:14px;

    }


    .psix-header-telegram{

        padding:
            0 18px;

        font-size:14px;

    }


}


/* =====================================================
   MOBILE / TABLET
===================================================== */


@media(max-width:980px){


    .psix-site-header{

        background:#ffffff;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        box-shadow:
            0 4px 18px rgba(15,23,42,.06);

        isolation:isolate;

    }


    .psix-header-inner{

        background:#ffffff;

        min-height:76px;

        padding:
            0 20px;

    }


    .psix-desktop-nav{

        display:none;

    }


    .psix-header-telegram{

        display:none;

    }


    .psix-mobile-nav{

        display:block;

        margin-left:auto;

    }


    .psix-header-logo{

        font-size:27px;

    }


    .psix-header-logo-wrap .custom-logo{

        height:40px;

        max-width:210px;

    }


}


/* =====================================================
   SMALL MOBILE
===================================================== */


@media(max-width:520px){


    .psix-header-inner{

        padding:
            0 15px;

    }


    .psix-header-logo{

        font-size:25px;

    }


    .psix-header-logo-wrap .custom-logo{

        height:36px;

        max-width:180px;

    }


    .psix-mobile-menu{

        position:fixed;

        top:86px;

        right:12px;

        left:12px;

        width:auto;

        max-height:
            calc(100vh - 100px);

    }


}