@layer layout {
    /* Main Landing Page Container */
    .l-home-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: var(--color-bg-base);
    }

    /* Skip link positioning */
    .c-skip-link {
        position: absolute;
        top: -100px;
        left: var(--spacing-4);
        background: var(--color-primary);
        color: var(--color-text-light);
        padding: var(--spacing-3) var(--spacing-6);
        border-radius: var(--radius-md);
        z-index: 999;
        transition: top 0.2s ease;
    }

    .c-skip-link:focus {
        top: var(--spacing-4);
        outline: var(--outline-ring);
    }

    /* Global Header Nav Bar */
    .l-nav-header {
        position: sticky;
        top: 0;
        z-index: 300;
        background-color: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-bg-border);
        box-shadow: var(--shadow-sm);
    }

    .l-nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-6);
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .c-logo-link {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

    .c-global-nav-list {
        display: flex;
        list-style: none;
        gap: var(--spacing-6);
        margin: 0;
        padding: 0;
    }

    .c-global-nav-link {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-muted);
        padding: var(--spacing-2) var(--spacing-3);
        border-radius: var(--radius-sm);
        transition: var(--transition-base);
    }

    .c-global-nav-link:hover {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
        text-decoration: none;
    }

    .c-global-nav-link--active {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
        border-bottom: 2px solid var(--color-primary);
    }

    /* Footer styles */
    .l-footer {
        background-color: var(--color-bg-surface);
        border-top: 1px solid var(--color-bg-border);
        padding: var(--spacing-12) 0;
        margin-top: auto;
    }

    .l-footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-6);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-8);
    }

    .l-footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-8);
    }

    .l-footer-col {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .l-footer-col-title {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-main);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .l-footer-col-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .l-footer-link {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    .l-footer-link:hover {
        color: var(--color-primary);
    }

    .l-footer-bottom {
        border-top: 1px solid var(--color-bg-border);
        padding-top: var(--spacing-6);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-4);
        text-align: center;
    }

    .c-footer-copy {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .l-nav-inner {
            flex-direction: column;
            height: auto;
            padding: var(--spacing-4) var(--spacing-6);
            gap: var(--spacing-4);
        }

        .c-global-nav-list {
            width: 100%;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--spacing-2);
        }
    }
}