:root{

    --navbar-transition:

        .35s cubic-bezier(.16,1,.3,1);

}

/* ======================================================
   NAVBAR FOUNDATION
====================================================== */

#spi-navbar{

    position:fixed;

    top:22px;

    left:0;

    width:100%;

    z-index:9999;

    transition:

        transform .45s ease,

        top .45s ease;

}

#spi-navbar .container{

    max-width:1380px;

    margin:auto;

    padding:0 24px;

}

.navbar{

    position:relative;

}

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

.navbar-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:36px;

    height:84px;

    padding:0 30px;

    border-radius:24px;

    transition:

        background .45s,

        backdrop-filter .45s,

        border-color .45s,

        box-shadow .45s,

        height .35s;
        
    overflow:hidden;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transform:translateZ(0);
    
    background:

        rgba(255,255,255,.22);

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

    border:1px solid rgba(255,255,255,.25);

}

#spi-navbar.scrolled .navbar-inner{

    background:

        rgba(255,255,255,.82);

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

    border:1px solid rgba(226,232,240,.8);

    box-shadow:

        0 20px 55px rgba(15,23,42,.14);
        
    height:72px;
    
    border-color:

        rgba(226,232,240,.9);

}

#spi-navbar.scrolled .navbar-button{

    box-shadow:

        0 18px 40px rgba(16,185,129,.32);

}

.navbar-button:focus{

    outline:2px solid rgba(16,185,129,.25);

    outline-offset:4px;

}

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

.navbar-logo{

    display:flex;

    align-items:center;

    gap:16px;

    text-decoration:none;

    flex-shrink:0;
    
    margin-right:20px;

}

.logo-image{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.logo-image img{
    
    display:block;

    max-width:100%;

    height:auto;

    object-fit:contain;

    transition:

        transform .4s ease;

}

.navbar-inner,
.mobile-menu,
.navbar-button,
.nav-link{

    will-change:transform;

}

.navbar-logo:hover img{

    transform:

        scale(1.08)

        rotate(-6deg);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-size:20px;

    font-weight:800;

    color:#0F172A;

    letter-spacing:-.5px;

    line-height:1.1;

    transition:.35s;

}

.logo-subtitle{

    margin-top:4px;

    font-size:12px;

    color:#64748B;

    letter-spacing:.6px;

    text-transform:uppercase;

}

.navbar-logo:hover .logo-title{

    color:#10B981;

}

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

.navbar-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    gap:12px;

    margin:0;

    list-style:none;
    
    margin-top: 25px;

    transform:translateY(4px);

}

.nav-item{
    
    position:relative;

    transition:

        transform .35s;

}

.nav-item:hover{

    transform:translateY(-2px);

}

.nav-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    border-radius:12px;

    text-decoration:none;

    color:#334155;

    font-size:15px;

    font-weight:600;

    letter-spacing:.2px;

    transition:

        color .35s,

        background .35s,

        transform .35s;
        
    font-family:inherit;

    -webkit-font-smoothing:antialiased;

}

.nav-link:hover{

    color:#10B981;

    background:rgba(16,185,129,.08);

    transform:translateY(-2px);

}

.nav-link:focus{

    outline:2px solid rgba(16,185,129,.25);

    outline-offset:3px;

}

.nav-link,

.nav-item{

    will-change:

        transform;

}

.nav-link.active{

    color:#10B981;

    background:rgba(16,185,129,.10);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:6px;

    width:0;

    height:3px;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            #10B981,

            #0EA5E9

        );

    transform:translateX(-50%);

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:24px;

}

.nav-link::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:12px;

    background:

        radial-gradient(

            rgba(16,185,129,.12),

            transparent 70%

        );

    opacity:0;

    transition:.35s;

}

.nav-link:hover::before{

    opacity:1;

}

#spi-navbar.scrolled .nav-link{

    color:#334155;

}

#spi-navbar.scrolled .nav-link:hover{

    color:#10B981;

}

#spi-navbar.scrolled .nav-link.active{

    color:#10B981;

}

/* ======================================================
   NAVBAR ACTIONS
====================================================== */

.navbar-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:18px;

    flex-shrink:0;

}

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

.navbar-button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 24px;

    border-radius:16px;

    overflow:hidden;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    color:#FFFFFF;

    background:linear-gradient(
        135deg,
        #10B981 0%,
        #059669 100%
    );

    box-shadow:

        0 14px 35px rgba(16,185,129,.28);

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}

.navbar-button span{

    position:relative;

    z-index:2;

}

.navbar-button svg{

    width:18px;

    height:18px;

    position:relative;

    z-index:2;

    transition:

        transform .35s;

}

.navbar-button:hover{

    transform:

        translateY(-3px);

    box-shadow:

        0 22px 45px rgba(16,185,129,.38);

}

.navbar-button:hover svg{

    transform:translateX(5px);

}

.navbar-button,

.navbar-button svg{

    will-change:

        transform;

}

.navbar-button::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:translateX(-170%);

    transition:transform .8s;

}

.navbar-button:hover::before{

    transform:translateX(170%);

}

.navbar-button::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:18px;

    background:

        radial-gradient(

            rgba(16,185,129,.18),

            transparent 70%

        );

    opacity:0;

    transition:.35s;

}

.navbar-button:hover::after{

    opacity:1;

}

/* ======================================================
   SCROLLED STATE
====================================================== */

#spi-navbar.scrolled{

    top:12px;

}

/* ======================================================
   HAMBURGER
====================================================== */

.navbar-toggle{

    width:52px;

    height:52px;

    display:none;

    align-items:center;

    justify-content:center;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:14px;

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

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

    transition:

        all .35s ease;

}

.navbar-toggle span{

    position:absolute;

    width:24px;

    height:2px;

    border-radius:50px;

    background:#0F172A;

    transition:

        all .35s cubic-bezier(.16,1,.3,1);

}

.navbar-toggle span:nth-child(1){

    transform:translateY(-8px);

}

.navbar-toggle span:nth-child(2){

    transform:translateY(0);

}

.navbar-toggle span:nth-child(3){

    transform:translateY(8px);

}

.navbar-toggle:hover{

    background:

        rgba(16,185,129,.10);

}

.navbar-toggle.active span:nth-child(1){

    transform:rotate(45deg);

}

.navbar-toggle.active span:nth-child(2){

    opacity:0;

}

.navbar-toggle.active span:nth-child(3){

    transform:rotate(-45deg);

}

#spi-navbar.scrolled .navbar-toggle{

    background:

        rgba(248,250,252,.95);

}

/* ======================================================
   OVERLAY
====================================================== */

.navbar-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.35);

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9980;

}

.navbar-overlay.active{

    opacity:1;

    visibility:visible;
    
    pointer-events:auto;

}

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

.mobile-menu{

    position:fixed;

    top:110px;

    left:50%;

    transform:

        translateX(-50%)

        translateY(-25px);

    width:calc(100% - 32px);

    max-width:430px;

    border-radius:24px;

    background:

        rgba(255,255,255,.90);

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

    border:1px solid rgba(226,232,240,.9);

    box-shadow:

        0 30px 70px rgba(15,23,42,.15);

    opacity:0;

    visibility:hidden;

    transition:

        all .40s cubic-bezier(.16,1,.3,1);

    z-index:9991;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    transform:

        translateX(-50%)

        translateY(0);
        
    pointer-events:auto;

}

.mobile-menu-inner{

    display:flex;

    flex-direction:column;

    padding:24px;

    gap:10px;

}

.mobile-link{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:16px 18px;

    border-radius:14px;

    text-decoration:none;

    color:#334155;

    font-size:16px;

    font-weight:600;

    transition:

        all .30s ease;

}

.mobile-link:hover{

    background:

        rgba(16,185,129,.08);

    color:#10B981;

    transform:translateX(5px);

}

.mobile-link.active{

    background:

        rgba(16,185,129,.10);

    color:#10B981;

}

.mobile-link+.mobile-link{

    border-top:

        1px solid rgba(226,232,240,.55);

}

.mobile-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:16px;

    padding:16px;

    border-radius:16px;

    text-decoration:none;

    color:#FFFFFF;

    font-weight:700;

    background:

        linear-gradient(

            135deg,

            #10B981,

            #059669

        );

    box-shadow:

        0 15px 35px rgba(16,185,129,.28);

    transition:.35s;

}

.mobile-button:hover{

    transform:translateY(-2px);

}

.mobile-button svg{

    width:18px;

    height:18px;

    transition:.35s;

}

.mobile-button:hover svg{

    transform:translateX(5px);

}

.mobile-menu,
.navbar-overlay{

    pointer-events:none;

}

.navbar-inner{

    box-shadow:

        0 8px 30px rgba(15,23,42,.04);

}

#spi-navbar,

.navbar-inner{

    will-change:

        transform,

        background;

}

#spi-navbar{

    padding-left:env(safe-area-inset-left);

    padding-right:env(safe-area-inset-right);

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1400px){

    #spi-navbar .container{

        max-width:1400px;

    }

    .navbar-inner{

        padding:0 36px;

    }

    .navbar-menu{

        gap:18px;

    }

}

@media (max-width:1399px){

    .navbar-inner{

        padding:0 28px;

    }

    .navbar-menu{

        gap:10px;

    }

    .nav-link{

        padding:12px 16px;

    }

}

@media (max-width:1200px){

    .navbar-inner{

        gap:20px;

    }

    .navbar-logo{

        margin-right:0;

    }

    .navbar-actions{

        margin-left:0;

    }

    .nav-link{

        font-size:14px;

    }

    .navbar-button{

        padding:14px 20px;

        font-size:14px;

    }

}

@media (min-width:1025px){

    .navbar-menu{

        display:flex;

    }
    
    .mobile-menu,

    .navbar-overlay{

        display:none !important;

    }

}

@media (max-width:1024px){

    .navbar-menu{

        display:none;

    }

    .navbar-button{

        display:none;

    }

    .navbar-toggle{

        display:flex;

    }
    
    #spi-navbar{

        top:16px;

    }

    .navbar-inner{

        height:74px;

        padding:0 20px;

        border-radius:20px;

    }

    .logo-image{

        width:52px;

        height:52px;

    }

    .logo-title{

        font-size:18px;

    }
    
    .mobile-menu{

        display:block;
    
    }
    
    .navbar-overlay{
    
        display:block;
    
    }

}

@media (max-width:768px){

    #spi-navbar{

        top:12px;

    }

    #spi-navbar .container{

        padding:0 16px;

    }

    .navbar-inner{

        height:70px;

        padding:0 18px;

    }

    .logo-image{

        width:48px;

        height:48px;

    }

    .logo-title{

        font-size:17px;

    }

    .logo-subtitle{

        font-size:11px;

    }

    .mobile-menu{

        top:92px;

    }

}

@media (max-width:576px){

    .navbar-inner{

        height:66px;

        padding:0 16px;

        border-radius:18px;

    }

    .logo-image{

        width:44px;

        height:44px;

    }

    .logo-title{

        font-size:15px;

    }

    .logo-subtitle{

        display:none;

    }

    .navbar-toggle{

        width:46px;

        height:46px;

    }

    .mobile-menu{

        width:calc(100% - 24px);

        top:84px;

        border-radius:20px;

    }

    .mobile-menu-inner{

        padding:20px;

    }

}

@media (max-width:380px){

    .logo-title{

        font-size:14px;

    }

    .logo-image{

        width:40px;

        height:40px;

    }

    .navbar-inner{

        padding:0 14px;

    }

    .mobile-link{

        padding:14px 16px;

        font-size:15px;

    }

}

@media (hover:hover){

    .nav-link:hover{

        transform:translateY(-2px);

    }

    .navbar-button:hover{

        transform:translateY(-3px);

    }

    .mobile-link:hover{

        transform:translateX(5px);

    }

}

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}