body {
    background-color: #060B22;
    color: #B6BFD7;
    scroll-behavior: smooth;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #171d1d;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3c494a;
    border-radius: 10px;
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.glass-card {
    background: linear-gradient(
        180deg,
        rgba(19, 28, 52, 0.95) 0%,
        rgba(13, 22, 48, 0.9) 100%
    );

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(36, 48, 77, 0.9);
    border-radius: 12px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.section-anchor {
    scroll-margin-top: 100px;
}

/* Mobile specific adjustments */
@media (max-width: 1024px) {
    #SideNavBar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    #SideNavBar.active {
        transform: translateX(0);
    }
    #TopAppBar {
        margin-left: 0 !important;
    }
    main {
        margin-left: 0 !important;
    }
}

/* Specific mobile breakpoint for 3-column deployment stack */
@media (max-width: 768px) {
    .deployment-grid {
        grid-template-columns: 1fr;
    }
}