@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
    --primary:        #3b82f6;
    --primary-glow:   rgba(59, 130, 246, 0.25);
    --secondary:      #60a5fa;
    --accent:         #93c5fd;

    --bg:             #061224;
    --bg-deep:        #030d1c;

    --glass:          rgba(6, 16, 36, 0.82);
    --glass-border:   rgba(255, 255, 255, 0.07);
    --glass-shine:    rgba(255, 255, 255, 0.04);

    --text:           #f0f6ff;
    --text-muted:     #7ea9d4;
    --text-dim:       rgba(255, 255, 255, 0.45);

    --radius-lg:      24px;
    --radius-md:      16px;
    --radius-sm:      10px;

    --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── BASE ───────────────────────────────────────────── */
body {
    background: var(--bg-deep);
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;

    /* subtle radial ambient light */
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    background-attachment: fixed;
}

/* ─── NAVBAR ─────────────────────────────────────────── */
.navbar {
    width: 95%;
    height: 88px;
    margin: 22px auto;
    padding: 0 32px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    /* layered glass with a very faint top shine */
    background:
        linear-gradient(180deg, var(--glass-shine) 0%, transparent 60%),
        var(--glass);

    border: 1px solid var(--glass-border);
    border-top-color: rgba(255, 255, 255, 0.12); /* top-edge highlight */

    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);

    border-radius: var(--radius-lg);

    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.06) inset,   /* inner top shine */
        0 12px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 0 60px var(--primary-glow);

    position: relative;
    z-index: 100;
}

/* ─── LOGO ───────────────────────────────────────────── */
.logo-section {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.logo-section img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-section h2 {
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;

    /* subtle gradient on the wordmark */
    background: linear-gradient(135deg, #ffffff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-section span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ─── NAV LINKS ──────────────────────────────────────── */
.nav-links {
    display: flex;
    list-style: none;
    gap: 5px;                   /* tighter gap; padding does the breathing room */
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    position: relative;
    white-space: nowrap;
}

/* pill hover */
.nav-links a:hover {
    color: var(--text);
    background: rgba(59, 130, 246, 0.1);
}

/* active / current page pill */
.nav-links a.active {
    color: var(--secondary);
    background: rgba(59, 130, 246, 0.14);
}

/* animated underline kept but more refined */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 99px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

/* ─── ACTIONS ────────────────────────────────────────── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ─── LOGIN BUTTON ───────────────────────────────────── */
.login-btn {
    text-decoration: none;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 12px 28px;
    border-radius: var(--radius-md);

    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;

    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.4),
        0 4px 16px rgba(37, 99, 235, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-position 0.6s ease;

    position: relative;
    overflow: hidden;
}

/* shimmer sweep on hover */
.login-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.6),
        0 8px 28px rgba(59, 130, 246, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.login-btn:hover::before {
    transform: translateX(100%);
}

.login-btn:active {
    transform: translateY(0);
}

/* ─── THEME TOGGLE ───────────────────────────────────── */
.theme-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 17px;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    display: grid;
    place-items: center;
}

.theme-toggle:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--text);
    transform: rotate(15deg);
}

/* ─── DIVIDER between theme & login ─────────────────── */
.nav-divider {
    width: 1px;
    height: 28px;
    background: var(--glass-border);
    border-radius: 99px;
}

/* ─── HAMBURGER ──────────────────────────────────────── */
.hamburger {
    display: none;
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    width: 42px;
    height: 42px;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), border-color var(--transition);
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
}

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

@media (min-width:1600px){

    .navbar{
        width:90%;
        max-width:1700px;
        padding:0 50px;
    }

    .logo-section img{
        width:90px;
        height:90px;
    }

    .logo-text h2{
        font-size:1.7rem;
    }

    .logo-text span{
        font-size:12px;
    }

    .nav-links{
        gap:10px;
    }

    .nav-links a{
        font-size:1rem;
        padding:10px 18px;
    }

}

/* ================= Laptop ================= */

@media (max-width:1400px){

    .navbar{
        width:96%;
        padding:0 24px;
    }

    .logo-section img{
        width:72px;
        height:72px;
    }

    .logo-text h2{
        font-size:1.3rem;
    }

    .logo-text span{
        font-size:11px;
    }

    .nav-links{
        gap:4px;
    }

    .nav-links a{
        padding:8px 10px;
        font-size:.88rem;
    }

}

/* ================= Tablet ================= */

@media (max-width:992px){

    .navbar{

        width:95%;
        padding:12px 18px;
        min-height:78px;
        margin:18px auto;
        border-radius:18px;

    }

    .nav-links{
        display:none;
    }

    .login-btn{
        display:none;
    }

    .nav-divider{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    .mobile-menu{
        width:100%;
        left:50%;
    }

    .logo-section{
        gap:10px;
    }

    .logo-section img{
        width:60px;
        height:60px;
    }

    .logo-text h2{
        font-size:1.1rem;
    }

    .logo-text span{
        font-size:10px;
    }

}

/* ================= Mobile ================= */

@media (max-width:768px){

    .navbar{

        width:95%;
        padding:10px 16px;
        min-height:72px;

    }

    .logo-section img{
        width:52px;
        height:52px;
    }

    .logo-text h2{
        font-size:1rem;
    }

    .logo-text span{
        font-size:8px;
    }

    .theme-toggle,
    .hamburger{

        width:40px;
        height:40px;

    }

    .mobile-menu a{

        padding:15px 20px;
        font-size:.95rem;

    }

}

/* ================= Small Mobile ================= */

@media (max-width:576px){

    .navbar{

        width:96%;
        padding:10px 14px;

    }

    .logo-section img{

        width:46px;
        height:46px;

    }

    .logo-text h2{

        font-size:.9rem;

    }

    .logo-text span{

        display:none;

    }

    .theme-toggle,
    .hamburger{

        width:36px;
        height:36px;

    }

}

/* ================= Extra Small ================= */

@media (max-width:400px){

    .navbar{

        width:97%;
        padding:10px;

    }

    .logo-section img{

        width:40px;
        height:40px;

    }

    .logo-text h2{

        font-size:.78rem;

    }

}

/* ================= Very Small ================= */

@media (max-width:340px){

    .logo-section img{

        width:36px;
        height:36px;

    }

    .logo-text h2{

        font-size:.72rem;

    }

}

/* ================= Landscape ================= */

@media (max-height:500px) and (orientation:landscape){

    .mobile-menu{

        max-height:70vh;
        overflow-y:auto;

    }

}

/* ================= Desktop ================= */

@media (min-width:993px){

    .mobile-menu{

        display:none !important;

    }

}
/* ===========================================================
   MOBILE MENU - BASE STYLES
=========================================================== */

.header{
    position: relative;
    z-index: 999;
}

.navbar{
    position: relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Hide hamburger on desktop */

.hamburger{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    outline:none;
    cursor:pointer;
    border-radius:12px;
    background:transparent;
    color:#fff;
    font-size:24px;
    transition:.35s;
}

.hamburger:hover{
    background:rgba(255,255,255,.08);
}

.hamburger.active{
    transform:rotate(180deg);
}

/* Mobile Menu */

.mobile-menu{

    position:absolute;

    top:calc(100% + 10px);

    left:50%;

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

    width:95%;

    background:#0f172a;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.25);

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.35s ease;

    z-index:9999;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

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

}

.mobile-menu a{

    color:#fff;

    text-decoration:none;

    padding:16px 24px;

    font-weight:500;

    transition:.3s;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-menu a:last-child{

    border-bottom:none;

}

.mobile-menu a:hover{

    background:#2563eb;

    padding-left:34px;

}

.mobile-login{

    color:#38bdf8 !important;

    font-weight:700;

}