@media (prefers-color-scheme: dark) {
    body {
        background: var(--brand-dark-bg);
        color: var(--brand-text-light);
    }

    nav {
        background: #02070a;
        border-bottom-color: rgba(205,233,242,0.25);
        box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    }

    nav a {
        color: var(--brand-text-light);
    }

    nav a:hover,
    nav a:focus {
        color: var(--brand-accent);
    }

    section {
        background: transparent;
    }

    .service-card {
        background: #08151c;
        border-color: rgba(205,233,242,0.18);
        box-shadow: 0 10px 26px rgba(0,0,0,0.7);
    }

    .service-card:hover {
        border-color: var(--brand-leaf);
    }

    h2.heading-lg {
        color: var(--brand-light);
    }

    footer {
        background: #02070a;
    }

    button {
        background: var(--brand-accent);
        border-color: var(--brand-accent);
        box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    }

    button:hover {
        background: var(--brand-secondary);
        border-color: var(--brand-secondary);
    }

    .hero {
        color: var(--brand-text-light);
    }
}