.mobile-bottom-nav {
    display: none;
}

@media (max-width: 800px) {
    body { padding-bottom: 78px; }
    .site-header .main-nav, .site-header .menu-toggle { display: none; }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 100;
        right: 10px;
        bottom: 10px;
        left: 10px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 7px 4px;
        border: 1px solid #e4def0;
        border-radius: 18px;
        background: rgba(255, 253, 248, .95);
        box-shadow: 0 8px 28px #251f481f;
        backdrop-filter: blur(14px);
    }

    .mobile-bottom-nav a {
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 4px 1px;
        color: #68637b;
        font-size: .62rem;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }

    .mobile-bottom-nav span { color: var(--purple); font-size: 1.2rem; line-height: 1.1; }
    .mobile-bottom-nav a:hover, .mobile-bottom-nav a:focus { color: var(--pink); }
}