@layer utilities {
    .floating-island {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 10px 10px 25px rgba(168, 174, 180, 0.25), -10px -10px 25px rgba(255, 255, 255, 0.9);
    }
}

body { 
    font-family: 'Manrope', sans-serif; 
    background-color: #f2f7fe; 
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Tactical Minimalism Shadows */
.neumorphic-extruded {
    background: #f2f7fe;
    box-shadow: 8px 8px 20px rgba(168, 174, 180, 0.3), -8px -8px 20px rgba(255, 255, 255, 1.0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neumorphic-extruded:hover {
    box-shadow: 4px 4px 10px rgba(168, 174, 180, 0.3), -4px -4px 10px rgba(255, 255, 255, 1.0);
    transform: scale(0.99);
}

.neumorphic-inset {
    background: #f2f7fe;
    box-shadow: inset 8px 8px 20px rgba(168, 174, 180, 0.3), inset -8px -8px 20px rgba(255, 255, 255, 1.0);
}

.neumorphic-recessed {
    box-shadow: inset 8px 8px 16px rgba(168, 174, 180, 0.3), 
                inset -8px -8px 16px rgba(255, 255, 255, 1.0);
}

/* Floating Island Navbar specific styling */
.floating-island {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 10px 10px 25px rgba(168, 174, 180, 0.25), -10px -10px 25px rgba(255, 255, 255, 0.9);
}

/* Button specific gradients & interactions */
.cta-button {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    box-shadow: 6px 6px 15px rgba(99, 102, 241, 0.25), -6px -6px 15px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}
.cta-button:hover {
    box-shadow: 3px 3px 8px rgba(99, 102, 241, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.9);
    transform: translateY(1px);
}
.cta-button:active {
    box-shadow: inset 4px 4px 8px rgba(99, 102, 241, 0.2);
    transform: scale(0.96);
}

/* Tonal shift sections */
.surface-shift {
    background-color: #ebf1f9; /* surface-container-low */
}

/* Text alignment / styles */
.headline-lg {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.label-md {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

/* Hide scrollbar for clean look */
::-webkit-scrollbar { width: 0px; background: transparent; }