body {
    font-family: 'Inter', sans-serif;
    background-color: #1e3a8a; /* Tailwind bg-blue-950 */
    color: #f3f4f6; /* Tailwind text-gray-100 */
    overflow-x: hidden;
}

.text-gradient {
    background-image: linear-gradient(to right, #fde047, #fde68a);

    /* Standard property */
    background-clip: text;

    /* WebKit-specific (Chrome, Safari, Edge) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Fallback for unsupported browsers */
    color: #fde047;
}


.logo-filter {
    filter: grayscale(100%) brightness(200%);
}

.nav-link:hover {
    color: #fde047;
    text-shadow: 0 0 5px #fde047, 0 0 10px #fde047;
}

.active-nav-link {
    color: #facc15;       /* Tailwind text-yellow-400 */
    font-weight: bold;     /* Tailwind font-bold */
    border-bottom: 2px solid #facc15; /* Tailwind border-b-2 border-yellow-400 */
}

/* Styles for the slide-in animation */
.hidden-section {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.visible-section {
    opacity: 1;
    transform: translateY(0);
}

/* Hero and header background */
.hero-bg-container {
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
}

/* Mobile sidebar specific styles */
#mobile-menu {
    transform: translateX(-100%);
}
.menu-open #mobile-menu {
    transform: translateX(0);
}
.menu-open #backdrop {
    display: block;
}
/* No new custom CSS needed, as the new `hero-text-shadow` is inline in the <style> block of the HTML for better control. */