/* bf-pubnav.css — the landing's top bar for the other public pages (feature
   pages, rules). Same look as the header in index.html, scoped to .bf-pubnav so
   it never touches a page's own header, .logo or .btn styles.
   Markup: <header class="bf-pubnav" id="navbar"> … </header>, plus bf-pubnav.js
   for the shrink-on-scroll state. */
.bf-pubnav {
    --pn-primary: #00d4ff;
    --pn-text: #f5f5f7;
    --pn-muted: #86868b;
    --pn-blur: blur(64px) saturate(180%) brightness(1.05);
    --pn-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --pn-spring: cubic-bezier(0.25, 1.2, 0.3, 1);
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 48px), 1200px);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    background: rgba(15, 15, 18, 0.45);
    backdrop-filter: var(--pn-blur);
    -webkit-backdrop-filter: var(--pn-blur);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 212, 255, 0.05);
    z-index: 1000;
    transition: all 0.4s var(--pn-smooth);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
}
html.bf-lite .bf-pubnav,
html.bf-lite .bf-pubnav.scrolled { background: #0f0f13 !important; }
.bf-pubnav.scrolled {
    top: 12px;
    background: rgba(8, 8, 10, 0.75);
    padding: 12px 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 15px 30px rgba(0, 0, 0, 0.8);
}
.bf-pubnav .pn-logo { display: flex; align-items: center; height: 38px; width: 42px; flex-shrink: 0; margin-right: 24px; }
.bf-pubnav .pn-logo svg { height: 100%; width: 42px; }
.bf-pubnav .pn-links { display: flex; gap: 8px; }
.bf-pubnav .pn-links a {
    color: var(--pn-muted);
    text-decoration: none;
    font-family: 'Blastron', sans-serif;
    font-weight: 700;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 18px;
    border-radius: 100px;
    transition: all 0.3s var(--pn-smooth);
}
.bf-pubnav .pn-links a:hover { color: var(--pn-text); background: rgba(255, 255, 255, 0.05); }
.bf-pubnav .pn-auth { display: flex; gap: 12px; }
.bf-pubnav .pn-btn {
    padding: 12px 24px;
    font-family: 'Blastron', sans-serif;
    font-weight: 700;
    font-size: 0.78em;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--pn-spring);
    white-space: nowrap;
}
.bf-pubnav .pn-login {
    background: rgba(255, 255, 255, 0.03);
    color: var(--pn-text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bf-pubnav .pn-login:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); transform: scale(1.02); }
.bf-pubnav .pn-join {
    background: var(--pn-primary);
    color: #000;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(0, 212, 255, 0.3);
}
.bf-pubnav .pn-join:hover { background: #33e0ff; transform: scale(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 30px rgba(0, 212, 255, 0.5); }
.bf-pubnav .pn-join:active { transform: scale(0.98); }

@media (max-width: 1000px) {
    .bf-pubnav .pn-links { display: none; }
    .bf-pubnav .pn-auth { gap: 8px; }
    .bf-pubnav .pn-btn { padding: 10px 16px; font-size: 0.7em; }
    .bf-pubnav { width: calc(100% - 32px); padding: 10px 12px 10px 20px; }
    .bf-pubnav.scrolled { padding: 10px 12px 10px 20px; }
}
@media (max-width: 480px) {
    .bf-pubnav .pn-join { display: none; }
}