/* Exact navigation rules from the approved landing page. */
/* NAV */
.topnav { position: sticky; top: 0; z-index: 200; background: rgba(251,253,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 10px; }
.brand-logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo-mark { width: 38px; height: 38px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--blue) 0%, #3b82f6 100%); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px rgba(37,99,235,.32); }
.brand-logo-name { font-size: 15px; font-weight: 700; color: var(--text-1); line-height: 1.2; letter-spacing: -.2px; }
.brand-logo-sub { font-size: 11px; color: var(--text-3); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a.nlink { font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: color .15s; }
.nav-links a.nlink:hover { color: var(--text-1); }
.btn-nav-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: #fff; padding: 9px 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 700; box-shadow: var(--sh-sm); transition: transform .15s var(--ease-out), background .15s, box-shadow .15s; white-space: nowrap; }
.btn-nav-cta:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: var(--sh-md); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1.5px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-card); color: var(--text-1); font-size: 16px; cursor: pointer; }
.mobile-nav-panel { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(12,17,29,.4); }
.mobile-nav-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(78vw, 320px); background: var(--bg-card); box-shadow: var(--sh-hv); padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 4px; animation: slideIn .22s var(--ease-out) both; }
@keyframes slideIn { from { transform: translateX(16px); opacity: 0; } }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mobile-nav-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-hover); color: var(--text-2); font-size: 15px; cursor: pointer; }
.mobile-nav-sheet a.nlink { padding: 13px 6px; font-size: 15px; font-weight: 600; color: var(--text-1); border-bottom: 1px solid var(--border); }
.mobile-nav-sheet .btn-nav-cta { justify-content: center; margin-top: 14px; padding: 13px 18px; font-size: 14px; }
body.nav-open { overflow: hidden; }
body.nav-open .mobile-nav-panel { display: block; }


.auth-page .wrap {max-width:1180px;margin:0 auto;padding:0 30px}.auth-page .topnav-inner{padding:14px 0}
@media(max-width:1024px){.auth-page .nav-links{display:none}.auth-page .nav-toggle{display:flex}}
@media(min-width:1025px){.auth-page .mobile-nav-panel{display:none!important}}
@media(max-width:560px){.auth-page .wrap{padding:0 16px}}
@media(max-width:380px){.auth-page .brand-logo-sub{display:none}}