body {
    background-color: #05030d;
    color: #F3F1F7;
    overflow-x: hidden;
}

/* Custom Responsive Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #05030d;
}
::-webkit-scrollbar-thumb {
    background: #100b26;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9D57F5;
}

/* Custom Equalizer Soundwave Keyframe Animations */
@keyframes sound-wave-1 {
    0%, 100% { height: 4px; }
    50% { height: 16px; }
}
@keyframes sound-wave-2 {
    0%, 100% { height: 14px; }
    50% { height: 6px; }
}
@keyframes sound-wave-3 {
    0%, 100% { height: 8px; }
    50% { height: 18px; }
}

.animate-bar-1 { animation: sound-wave-1 0.8s ease-in-out infinite; }
.animate-bar-2 { animation: sound-wave-2 0.5s ease-in-out infinite; }
.animate-bar-3 { animation: sound-wave-3 0.7s ease-in-out infinite; }
.bar-paused { animation-play-state: paused !important; height: 3px !important; }

/* Cinematic Large Layout Proportions for Navigation Across All Pages */
#navbar-placeholder {
height: 104px !important;
transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* FIX: Exclude the mobile menu from forced height constraints to prevent vertical cutoff */
#navbar-placeholder > div:not(#mobile-menu) {
height: 104px !important;
}

#navbar-placeholder img {
height: 52px !important; /* Premium larger logo proportions */
}

#navbar-placeholder .nav-link {
font-size: 15px !important; /* Cinematic spacing */
letter-spacing: 0.15em !important;
}

#navbar-placeholder button {
transform: scale(1.12); /* Proportional layout scaling */
}

#navbar-placeholder a[data-translate="ctaContact"] {
padding: 10px 28px !important;
font-size: 13px !important;
}

/* Custom Navigation Dot Indicators */
.nav-link.active-dot::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #B482FD;
    box-shadow: 0 0 8px #B482FD;
}

/* Atmospheric Bioluminescent Glow Layers */
.glow-sphere {
    filter: blur(140px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

.text-glow {
    text-shadow: 0 0 25px rgba(180, 130, 253, 0.6);
}

.glass-panel {
    background: rgba(10, 7, 28, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(180, 130, 253, 0.12);
}

.ocean-light {
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse at top, rgba(141, 87, 245, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.interactive-fade-container:hover .brand-outline-glow {
    opacity: 1;
    filter: drop-shadow(0 0 15px #9D57F5);
}

.webgl {
    z-index: -999;
}