:root {
    --nav-height: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav {
    display: none;
    position: fixed;
    bottom: calc(16px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 6px;
    justify-content: space-around;
    align-items: center;
    gap: 2px;
    width: calc(100% - 32px);
    max-width: 440px;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    transition: all var(--dur-base) var(--ease-out);
    flex: 1;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font-family: var(--font-mono);
}

.bottom-nav .nav-item .material-icons-round { font-size: 20px; }

.bottom-nav .nav-item .nav-label {
    font-size: 0.6rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
}

.bottom-nav .nav-item.active-nav {
    color: var(--accent-ink);
    background: var(--accent);
}

.bottom-nav .nav-item:active { transform: scale(0.95); }

@media (max-width: 968px) {
    html, body { overflow-x: clip !important; max-width: 100vw !important; }

    .bottom-nav { display: flex !important; }

    body { padding-bottom: calc(var(--nav-height) + 60px + var(--safe-bottom)); }

    .navbar .nav-inner { padding: 0 5%; }

    .hero, .work, .about, .stack, .contact { padding-left: 5%; padding-right: 5%; }
}

@media (max-width: 480px) {
    .bottom-nav { padding: 5px; border-radius: var(--radius-sm); }
    .bottom-nav .nav-item { padding: 7px 2px; }
    .bottom-nav .nav-item .material-icons-round { font-size: 18px; }
    .bottom-nav .nav-item .nav-label { font-size: 0.55rem; }
}

@media (min-width: 1400px) {
    .container, .hero-inner, .work-inner, .about-inner, .stack-inner, .contact-inner, .footer-inner, .nav-inner {
        max-width: 1400px;
    }
}

@supports not (backdrop-filter: blur(20px)) {
    .navbar, .bottom-nav { background: var(--bg-primary) !important; backdrop-filter: none !important; }
}

input, textarea, select { font-size: 16px; }

@media (min-width: 969px) {
    input, textarea, select { font-size: var(--fs-sm); }
}