/* Custom Styles & Animation Enhancements */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #0F172A;
    background-color: #F8FAFC;
    overflow-x: hidden;
    min-width: 320px;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

.max-w-7xl {
    width: min(100%, 1280px);
    max-width: min(92vw, 1280px);
}

@media (min-width: 1800px) {
    .max-w-7xl {
        max-width: 1400px;
    }
}

/* Navbar Scrolled State Styling */
header.scrolled {
    background-color: rgba(5, 11, 20, 0.98) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#mobile-menu {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 640px) {
    #navbar .max-w-7xl {
        gap: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}