.header {
    position: fixed; top: 0; left: 0; right: 0;
    height: 80px; /* Slightly taller to accommodate bigger icons */
    background: rgba(55, 150, 131, 0.95);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    z-index: 1000; display: flex; justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-container {
    width: 100%; max-width: 1100px; display: flex;
    justify-content: space-between; align-items: center; padding: 0 20px;
}

.nav-links { display: flex; gap: 15px; }

.nav-button {
    position: relative;
    width: 52px; height: 52px; /* Bigger button area */
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.15); border-radius: 14px; transition: 0.3s;
    text-decoration: none;
}

/* BIGGER ICONS */
.nav-button img { height: 28px; width: auto; filter: brightness(0) invert(1); transition: 0.3s; }

/* HOVER TOOLTIP STYLE */
.nav-label {
    position: absolute;
    bottom: -35px; /* Appears below the icon */
    background: var(--dark, #053642);
    color: white;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
}

.nav-button:hover .nav-label {
    opacity: 1;
    transform: translateY(5px);
}

.nav-button:hover, .nav-button.active { background: var(--dark, #053642); transform: translateY(-2px); }

.site-title { color: white; font-family: 'Anton'; font-size: 1.3rem; text-transform: uppercase; }

@media (max-width: 700px) {
    .site-title { display: none; }
    .nav-links { width: 100%; justify-content: space-around; }
    .nav-label { display: none; } /* Hide labels on mobile to save space */
}