.navbar {
    background: #1a1a1a;
    color: #fff;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-flex { display: flex; justify-content: space-between; align-items: center; position: relative; }
.logo { font-weight: 800; letter-spacing: 1px; }

/* Toggle Logic */
.nav-toggle { display: none; }
.nav-toggle-label { cursor: pointer; display: block; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    display: block; background: #fff; height: 2px; width: 25px; position: relative; transition: all .2s;
}
.nav-toggle-label span::before { content: ''; margin-top: -8px; }
.nav-toggle-label span::after { content: ''; margin-top: 14px; }

/* Mobile Menu Links */
.nav-links {
    position: absolute; top: 100%; left: 0; width: 100%; background: #1a1a1a;
    list-style: none; transform: scale(1, 0); transform-origin: top; transition: transform 300ms ease-in-out;
}
.nav-links li { padding: 15px 20px; }
.nav-links a { color: #fff; text-decoration: none; font-size: 1.2rem; display: block; }

/* Reveal menu when checked */
.nav-toggle:checked ~ .nav-links { transform: scale(1, 1); }

/* Desktop View */
@media (min-width: 768px) {
    .nav-toggle-label { display: none; }
    .nav-links { position: static; display: flex; transform: scale(1, 1); background: none; width: auto; }
    .nav-links li { padding: 0 0 0 30px; }
}