.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-panel {
            background: rgba(52, 53, 55, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .bioluminescent-gradient {
            background: linear-gradient(45deg, #673de6, #00daf3);
        }
        .abyssal-glow {
            box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.4);
        }
        
        /* Scroll Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* FAQ Accordion */
        .faq-item input:checked ~ .faq-content {
            max-height: 500px;
            margin-top: 1rem;
            opacity: 1;
        }
        .faq-item input:checked ~ label .arrow {
            transform: rotate(180deg);
            color: #00daf3;
        }
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0, 1, 0, 1);
            opacity: 0;
        }

        /* Responsive fixes */
        /* Ensure images and media scale down on small screens */
        img, .glass-panel img {
            max-width: 100%;
            height: auto;
        }

        /* Prevent overly large fixed widths */
        .w-500 {
            width: 100%;
            max-width: 500px;
        }

        /* Tweak container padding for small screens */
        @media (max-width: 640px) {
            nav { padding-left: 1rem; padding-right: 1rem; }
            .container { padding-left: 1rem; padding-right: 1rem; }
            .text-5xl { font-size: 2rem; }
            .md\:text-7xl { font-size: 2.5rem; }
            .text-xl { font-size: 0.95rem; }
            .glass-panel.p-10 { padding: 1rem; }
            /* Contact panel reduced padding for small screens */
            .glass-panel.p-16 { padding: 1rem; }
            .rounded-2xl { border-radius: 0.5rem; }
            .reveal { transform: translateY(12px); }
        }

        /* Navigation: show compact layout on small screens */
        @media (max-width: 768px) {
            nav .md\:flex { display: none; }
            nav { padding-left: 1rem; padding-right: 1rem; }
            .bioluminescent-gradient.px-6 { padding-left: 0.75rem; padding-right: 0.75rem; }
        }

        /* Hamburger button styles */
        .hamburger { display:inline-block; width:24px; height:18px; position:relative }
        .hamburger .line { display:block; position:absolute; left:0; right:0; height:2px; background:var(--tw-text-opacity,1) ; background-color: currentColor; transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .25s ease, top .35s cubic-bezier(.2,.9,.3,1); }
        .hamburger .line-1 { top:0; }
        .hamburger .line-2 { top:8px; }
        .hamburger .line-3 { top:16px; }

        /* when open, animate into X */
        .mobile-open .hamburger .line-1 { transform: translateY(8px) rotate(45deg); }
        .mobile-open .hamburger .line-2 { opacity:0; transform: scaleX(0); }
        .mobile-open .hamburger .line-3 { transform: translateY(-8px) rotate(-45deg); }

        /* Mobile menu slide animation */
        #mobile-menu { transform: translateY(-10px); opacity:0; transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .25s ease; }
        #mobile-menu.show { transform: translateY(0); opacity:1; }

        /* menu inner styles */
        #mobile-menu .p-4 a { padding: 0.75rem 0.5rem; display:block; border-radius: .5rem; color: var(--on-surface); }
        #mobile-menu .p-4 a:hover { background: rgba(255,255,255,0.02); color: var(--tertiary); }

        /* Accessible visually-hidden class for sr-only */
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

        /* FAQ accordion content smoother on small screens */
        @media (max-width: 640px) {
            .faq-item { padding: 0.75rem; }
            .faq-content { font-size: 0.95rem; }
            .faq-item label .arrow { font-size: 1.6rem; }
        }

        /* Contact form specific tweaks */
        .glass-panel .md\:w-1\/2, .glass-panel .md\:w-1\/2 * {
            box-sizing: border-box;
        }
        .glass-panel a {
            word-break: break-word;
        }
        .glass-panel form .space-y-8 > div { margin-bottom: 0.6rem; }
        .glass-panel form input, .glass-panel form textarea {
            font-size: 0.95rem;
        }

        /* Make contact panel stretch and relax */
        #contact .glass-panel {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0.5rem;
            border-radius: 1rem;
        }

        #contact .glass-panel > div, #contact .glass-panel > .md\:w-1\/2 {
            width: 100%;
            padding: 1rem;
        }

        /* On medium+ screens keep two columns but reduce padding */
        @media (min-width: 768px) {
            #contact .glass-panel {
                flex-direction: row;
                padding: 1rem;
            }
            #contact .glass-panel > div { padding: 2rem; }
        }

        /* Make form inputs more compact */
        #contact form input, #contact form textarea, #contact form button {
            width: 100%;
        }

        /* Reduce the large heading spacing inside contact */
        #contact h2 { margin-bottom: 0.5rem; }