/* ===================================
   RYTHON DESIGN SYSTEM
=================================== */

:root{

--primary:#2563EB;
--primary-dark:#1747C9;

--secondary:#081B4B;

--text:#475569;

--white:#ffffff;

--light:#F8FBFF;

--border:#E7EEF9;

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

--radius:18px;

--container:1280px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:#fff;

color:var(--secondary);

overflow-x:hidden;

}

.container{

max-width:1400px;

margin:auto;

padding:0 40px;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

}

section{

position:relative;

padding:100px 0;

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

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

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

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

    border-bottom:1px solid rgba(8,27,75,.07);

    transition:
        background .3s ease,
        box-shadow .3s ease;

}


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

.nav{

    position:relative;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    width:auto;

    height:42px;

}


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

.main-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-left:auto;

}

.menu{

    display:flex;

    align-items:center;

    gap:32px;

    margin:0;

    padding:0;

    list-style:none;

}

.menu li{

    margin:0;

    padding:0;

    list-style:none;

}

.menu a{

    position:relative;

    display:block;

    padding:28px 0;

    color:#334155;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:color .25s ease;

}

.menu a:hover,
.menu a.active{

    color:#2563EB;

}


/* Active underline */

.menu a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:18px;

    width:0;
    height:2px;

    border-radius:10px;

    background:#2563EB;

    transform:translateX(-50%);

    transition:width .25s ease;

}

.menu a:hover::after,
.menu a.active::after{

    width:22px;

}


/*==========================================================
    DESKTOP PARTNER BUTTON
==========================================================*/

.partner-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    min-height:48px;

    padding:0 23px;

    border-radius:13px;

    background:#2563EB;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(37,99,235,.20);

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

}

.partner-btn:hover{

    color:#ffffff;

    background:#1747C9;

    transform:translateY(-2px);

    box-shadow:
        0 15px 32px rgba(37,99,235,.28);

}


/*==========================================================
    MOBILE CTA
==========================================================*/

.mobile-partner-btn{

    display:none;

}


/*==========================================================
    MENU TOGGLE
==========================================================*/

.menu-toggle{

    display:none;

    width:46px;
    height:46px;

    padding:0;

    border:1px solid #E7EEF9;

    border-radius:13px;

    background:#F8FBFF;

    color:#081B4B;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;

}

.menu-toggle:hover{

    background:#EEF5FF;

    border-color:#CFE0FF;

    color:#2563EB;

}

.menu-toggle svg{

    width:23px;
    height:23px;

}


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

@media (max-width:1100px){

    .nav{

        height:72px;

    }


    /* Toggle visible */

    .menu-toggle{

        display:flex;

        order:3;

    }


    /* Desktop CTA hidden */

    .partner-btn{

        display:none;

    }


    /* Navigation Panel */

    .main-nav{

        position:absolute;

        top:calc(100% + 12px);

        left:20px;
        right:20px;

        display:block;

        margin:0;

        padding:14px;

        border:1px solid #E7EEF9;

        border-radius:20px;

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

        box-shadow:
            0 25px 60px rgba(8,27,75,.14);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:translateY(-12px);

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

    }


    /* Open Menu */

    .main-nav.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);

    }


    /* Menu Stack */

    .menu{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:2px;

    }

    .menu li{

        width:100%;

    }

    .menu a{

        width:100%;

        padding:14px 16px;

        border-radius:11px;

        color:#334155;

        font-size:15px;

    }

    .menu a:hover,
    .menu a.active{

        color:#2563EB;

        background:#F3F7FF;

    }


    /* Remove desktop underline */

    .menu a::after{

        display:none;

    }


    /* Mobile Partner CTA */

    .mobile-partner-btn{

        display:flex;

        align-items:center;

        justify-content:space-between;

        width:100%;

        margin-top:12px;

        padding:15px 17px;

        border-radius:12px;

        background:#2563EB;

        color:#ffffff;

        font-size:15px;

        font-weight:700;

        text-decoration:none;

    }

    .mobile-partner-btn:hover{

        color:#ffffff;

        background:#1747C9;

    }

}


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

@media (max-width:576px){

    .nav{

        height:68px;

    }

    .logo img{

        height:36px;

    }

    .menu-toggle{

        width:43px;
        height:43px;

    }

    .main-nav{

        left:12px;
        right:12px;

        top:calc(100% + 8px);

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

        overflow-y:auto;

        border-radius:17px;

        padding:10px;

    }

    .menu a{

        padding:12px 14px;

        font-size:14px;

    }

    .mobile-partner-btn{

        padding:14px;

        font-size:14px;

    }

}


/*==========================================================
    BODY LOCK
==========================================================*/

body.menu-open{

    overflow:hidden;

}


/*==========================================================
    SECTION SCROLL OFFSET
==========================================================*/

section{

    scroll-margin-top:90px;

}

@media (max-width:1100px){

.main-nav .menu{
    display:flex !important;
    flex-direction:column !important;
}

.main-nav{
    z-index:999999 !important;
}

}

/* =========================================
   HEADER CTA ALIGNMENT FIX
========================================= */

.header .nav {
    display: flex;
    align-items: center !important;
}

.header .partner-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;

    height: 42px;
    padding: 0 20px !important;
    margin: 0 !important;

    line-height: 1 !important;
    vertical-align: middle;
}

.header .partner-btn svg {
    width: 17px;
    height: 17px;
    display: block;
    flex-shrink: 0;
    margin: 0 !important;
}

.header .main-nav,
.header .menu {
    display: flex;
    align-items: center !important;
}

/* =========================================
   HEADER CTA — MOBILE/TABLET FINAL
========================================= */

@media (max-width:1100px){

    /* Keep top Partner CTA visible */
    .header .nav > .partner-btn{
        display:inline-flex !important;
    }

}


/* Small phones */
@media (max-width:576px){

    .header .nav{
        gap:10px;
    }

    .header .nav > .partner-btn{
        height:42px !important;
        min-height:42px;

        padding:0 15px !important;

        font-size:13px;
        border-radius:12px;
    }

    .header .nav > .partner-btn svg{
        width:16px;
        height:16px;
    }

}