/* TOP BAR */
.topbar{height:42px;background:var(--primary);color:#fff;font-size:14px;position:relative;z-index:1001}
.topbar__wrapper{height:42px;display:flex;align-items:center;justify-content:space-between}
.topbar__info,.topbar__social{display:flex;align-items:center;gap:22px}
.topbar a{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;transition:.25s}
.topbar a:hover{opacity:.8}

/* HEADER */
.header{
    position:fixed;
    top:42px;
    right:0;
    left:0;
    z-index:1000;
    padding:14px 0;
}
.header__wrapper{display:grid;grid-template-columns:240px 1fr auto;align-items:center;gap:28px;padding:14px 24px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.65);box-shadow:0 10px 30px rgba(15,23,42,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center}
.logo img{display:block;height:82px;max-width:220px;width:auto;object-fit:contain}

/* NAV */
.desktop-nav{display:flex;justify-content:center}
.desktop-nav ul{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none}
.desktop-nav a{position:relative;display:block;padding:8px 3px;color:var(--primary);font-weight:700;text-decoration:none;white-space:nowrap}
.desktop-nav a::after{content:"";position:absolute;right:0;bottom:1px;width:0;height:3px;background:var(--secondary);border-radius:20px;transition:.25s}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--secondary)}
.desktop-nav a:hover::after,.desktop-nav a.active::after{width:100%}
.mobile-only{display:none}

/* ACTIONS */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.header-actions .btn{white-space:nowrap}

/* REGISTER */
.register-menu{position:relative}
.register-dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:12px;background:#fff;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;z-index:1010}
.register-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.register-card{display:flex;align-items:center;gap:16px;padding:16px;border-radius:14px;text-decoration:none;transition:.25s}
.register-card:hover{background:#f6f9ff;transform:translateX(-4px)}
.register-icon{width:52px;height:52px;border-radius:14px;background:#8fc63f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.register-card strong{display:block;color:#233a8b;margin-bottom:4px;font-size:1rem}
.register-card span{display:block;color:#777;font-size:.85rem;line-height:1.6}

/* MOBILE BUTTON */
.menu-toggle{display:none;position:relative;width:48px;height:48px;border:0;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.10);cursor:pointer;z-index:1003}
.menu-toggle span{position:absolute;right:12px;width:24px;height:2px;background:var(--primary);border-radius:10px;transition:.25s}
.menu-toggle span:nth-child(1){top:16px}.menu-toggle span:nth-child(2){top:23px}.menu-toggle span:nth-child(3){top:30px}
.menu-toggle.active span:nth-child(1){top:23px;transform:rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){top:23px;transform:rotate(-45deg)}

.menu-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;transition:.3s;z-index:998;pointer-events:none}
.menu-overlay.active{opacity:1;visibility:visible;pointer-events:auto}
body.menu-open{overflow:hidden}

@media (max-width:768px){

    .desktop-nav{
        position:fixed;
        top:0;
        right:0;

        display:block;

        width:min(82vw, 340px);
        height:100vh;

        padding:100px 24px 30px;

        background:#fff;

        box-shadow:-12px 0 35px rgba(15,23,42,.16);

        transform:translateX(105%);
        visibility:hidden;

        transition:
            transform .3s ease,
            visibility .3s ease;

        z-index:1002;

        overflow-y:auto;
    }

    .desktop-nav.active{
        transform:translateX(0);
        visibility:visible;
    }

    .desktop-nav ul{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;

        gap:0;

        width:100%;
        margin:0;
        padding:0;
    }

    .desktop-nav li{
        display:block;
        width:100%;
        margin:0;
    }

    .desktop-nav a{
        display:block;

        width:100%;
        padding:15px 8px;

        border-bottom:1px solid #eef2f7;

        font-size:16px;
        text-align:right;
        white-space:normal;
    }

    .desktop-nav a::after{
        display:none;
    }

    .mobile-only{
        display:block;
    }

    .menu-toggle{
        display:block;
        z-index:1003;
    }

}
@media(max-width:480px){.logo img{height:52px;max-width:145px}.menu-toggle{width:44px;height:44px}.desktop-nav{width:86vw}}