.site-nav {
    position: sticky; top: 0; z-index: 100;
    background: #0f3b2e; padding: 0 24px; height: 60px;
    display: flex; align-items: center;
}
.site-nav .container {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    max-width: 1100px;
}
.site-nav .logo { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.site-nav .logo span { color: #a8e6cf; }

#nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; width: 28px; height: 20px; position: relative; }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block; position: absolute; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: 0.3s;
}
.nav-toggle-label span { top: 9px; }
.nav-toggle-label span::before { content: ''; top: -8px; }
.nav-toggle-label span::after { content: ''; top: 8px; }

#nav-toggle:checked ~ .nav-menu { left: 0; opacity: 1; pointer-events: auto; }
#nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
#nav-toggle:checked ~ .nav-toggle-label span::before { top: 0; transform: rotate(45deg); }
#nav-toggle:checked ~ .nav-toggle-label span::after { top: 0; transform: rotate(-45deg); }

.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; white-space: nowrap; }
.nav-menu a:hover { color: #a8e6cf; }
.nav-menu a.active { color: #a8e6cf; font-weight: 700; }

.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 4px; }
.nav-dropdown > a::after {
    content: ''; display: inline-block; width: 5px; height: 5px;
    border-right: 1.5px solid rgba(255,255,255,0.6);
    border-bottom: 1.5px solid rgba(255,255,255,0.6);
    transform: rotate(45deg); margin-top: -3px; transition: transform 0.2s;
}
.nav-dropdown:hover > a::after { transform: rotate(-135deg); margin-top: 1px; }

.nav-dropdown-content {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; border-radius: 12px; padding: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
    transform: translateY(8px);
}
.nav-dropdown:hover .nav-dropdown-content { opacity: 1; pointer-events: auto; transform: translateY(4px); }
.nav-dropdown-content a { display: block; padding: 10px 14px; border-radius: 8px; color: #1a1a2e; font-size: 0.88rem; transition: background 0.2s; white-space: nowrap; }
.nav-dropdown-content a:hover { background: #f3f4f6; color: #0f3b2e; }

.nav-overlay { display: none; }

@media (max-width: 768px) {
    .nav-toggle-label { display: block; }
    .nav-menu {
        position: fixed; top: 60px; left: -100%;
        width: 100%; height: calc(100vh - 60px);
        flex-direction: column; align-items: stretch; gap: 0;
        background: #0f3b2e; padding: 16px 24px;
        opacity: 0; pointer-events: none;
        transition: left 0.3s, opacity 0.3s;
        overflow-y: auto;
    }
    .nav-menu a { display: block; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 1.1rem; }
    .nav-dropdown-content {
        position: static; opacity: 1; pointer-events: auto;
        transform: none; box-shadow: none;
        background: rgba(255,255,255,0.06);
        border-radius: 8px; margin: 2px 0 6px;
        padding: 4px 0 4px 20px; display: none;
    }
    .nav-dropdown.open .nav-dropdown-content { display: block; }
    .nav-dropdown > a::after {
        content: '+'; border: none; width: auto; height: auto;
        font-size: 1.3rem; font-weight: 700;
        transform: none; margin-top: 0; color: rgba(255,255,255,0.6);
    }
    .nav-dropdown.open > a::after { content: '−'; }
    .nav-dropdown-content a { color: rgba(255,255,255,0.7); padding: 12px 0; font-size: 0.98rem; }
    .nav-dropdown-content a:hover { background: transparent; color: #a8e6cf; }
    .nav-overlay {
        display: block; position: fixed; top: 60px; left: 0;
        width: 100%; height: calc(100vh - 60px);
        background: rgba(0,0,0,0.4); z-index: -1;
        opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    #nav-toggle:checked ~ .nav-overlay { opacity: 1; pointer-events: auto; }
}

.breadcrumbs { color: #6b7280; font-size: 0.85rem; margin-bottom: 12px; }
.breadcrumbs a { color: #0f3b2e; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

footer {
    background: #0f3b2e; color: rgba(255,255,255,0.6);
    padding: 40px 0; text-align: center; font-size: 0.9rem;
}
footer a { color: #a8e6cf; text-decoration: none; }
footer a:hover { text-decoration: underline; }