/* ==========================
   HEADER
========================== */

#siteHeader{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:9999;

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

    backdrop-filter:blur(16px);

    border-bottom:1px solid #f1f1f7;

    transition:.3s ease;
}

#siteHeader.scrolled{

    box-shadow:
    0 10px 35px rgba(0,0,0,.06);
}

/* ==========================
   CONTAINER
========================== */

.container{

    max-width:1380px;

    margin:auto;

    padding:0 24px;
}

/* ==========================
   HEADER LAYOUT
========================== */

#siteHeader .container{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

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

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    flex-shrink:0;
}

.logo img{

    height:48px;

    width:auto;

    display:block;
}

/* ==========================
   DESKTOP MENU
========================== */

.desktop-nav{

    margin-left:auto;
    margin-right:auto;
}

.desktop-nav ul{

    list-style:none;

    display:flex;

    align-items:center;

    gap:42px;
}

.desktop-nav a{

    color:#232323;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.25s ease;

    position:relative;
}

.desktop-nav a:hover{

    color:#6D4AFF;
}

.desktop-nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;
    left:0;

    width:0;

    height:2px;

    background:#6D4AFF;

    transition:.3s ease;
}

.desktop-nav a:hover::after{

    width:100%;
}

/* ==========================
   RIGHT SECTION
========================== */

.header-right{

    display:flex;

    align-items:center;

    gap:18px;
}

/* ==========================
   LOGIN
========================== */

.login-btn{

    text-decoration:none;

    color:#1f2937;

    font-size:14px;

    font-weight:600;

    transition:.25s;
}

.login-btn:hover{

    color:#6D4AFF;
}

/* ==========================
   CTA BUTTON
========================== */

.start-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:13px 24px;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #6D4AFF,
    #8B5CFF,
    #A855F7
    );

    background-size:300% 300%;

    animation:growksyGradient 6s ease infinite;

    box-shadow:
    0 10px 25px rgba(109,74,255,.35);

    transition:.35s ease;
}

.start-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 16px 35px rgba(109,74,255,.45);
}

.start-btn:before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
    );

    transition:.8s;
}

.start-btn:hover:before{

    left:100%;
}

@keyframes growksyGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

/* ==========================
   MOBILE BUTTON
========================== */

#menuToggle{

    display:none;

    width:42px;
    height:42px;

    border:none;

    background:none;

    cursor:pointer;
}

#menuToggle span{

    display:block;

    width:24px;
    height:2px;

    background:#111827;

    margin:5px auto;

    border-radius:10px;

    transition:.3s;
}

/* ==========================
   MOBILE MENU
========================== */

#mobileMenu{

    position:fixed;

    top:82px;
    left:-100%;

    width:280px;

    height:calc(100vh - 82px);

    background:#fff;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

    z-index:9998;

    padding:20px;
}

#mobileMenu.active{

    left:0;
}

#mobileMenu a{

    display:block;

    text-decoration:none;

    color:#222;

    font-size:15px;

    font-weight:600;

    padding:14px 0;

    border-bottom:1px solid #f3f3f3;
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:991px){

    .desktop-nav{

        display:none;
    }

    #menuToggle{

        display:block;
    }

    .login-btn{

        display:none;
    }

    .start-btn{

        display:none;
    }

    #siteHeader .container{

        height:72px;
    }

    .logo img{

        height:42px;
    }

    #mobileMenu{

        top:72px;

        height:calc(100vh - 72px);
    }
}
/* ==========================
   DROPDOWN
========================== */

.has-dropdown{

    position:relative;
}

.has-dropdown > a i{

    font-size:11px;

    margin-left:6px;
}

.dropdown-menu{

    position:absolute;

    top:55px;
    left:50%;

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

    min-width:260px;

    background:#fff;

    border-radius:20px;

    padding:10px;

    opacity:0;

    visibility:hidden;

    transition:.25s ease;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    border:1px solid #f3f3f3;
}

.has-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

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

.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:14px;

    text-decoration:none;

    color:#222;
}

.dropdown-menu a:hover{

    background:#f7f5ff;

    color:#6D4AFF;
}

.dropdown-menu i{

    width:18px;
}

/* ==========================
   SHINING BUTTON
========================== */

.start-btn{

    overflow:hidden;
}

.start-btn::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:50%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
    );

    transform:skewX(-25deg);

    animation:
    shineMove 4s infinite;
}

@keyframes shineMove{

    0%{
        left:-120%;
    }

    30%{
        left:150%;
    }

    100%{
        left:150%;
    }
}

/* ==========================
   MOBILE MENU
========================== */

.mobile-menu-title{

    font-size:12px;

    font-weight:700;

    color:#8a8a8a;

    text-transform:uppercase;

    margin-top:18px;

    margin-bottom:5px;
}

.mobile-cta{

    display:block;

    text-align:center;

    margin-top:20px;

    background:
    linear-gradient(
    135deg,
    #6D4AFF,
    #A855F7
    );

    color:#fff !important;

    border:none !important;

    border-radius:14px;

    padding:14px !important;
}
/* ==========================
   STATUS INDICATOR
========================== */

.status-link{

    display:flex !important;

    align-items:center;

    gap:8px;
}

.status-dot{

    position:relative;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22c55e;

    flex-shrink:0;
}

.status-dot::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    background:
    rgba(34,197,94,.35);

    animation:
    statusPulse 2s infinite;
}

@keyframes statusPulse{

    0%{

        transform:scale(.5);

        opacity:1;
    }

    100%{

        transform:scale(2);

        opacity:0;
    }
}
.status-link{

    color:#16a34a !important;
}