/* Custom styles beyond Tailwind */

    html {
        scroll-behavior: smooth;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Nav scroll state */
    #nav.scrolled {
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    #nav.scrolled .nav-logo-text {
        color: #0f172a !important;
    }

    #nav.scrolled .nav-logo-sub {
        color: #64748b !important;
    }

    /* Hero image parallax */
    #top .absolute.inset-0 img {
        will-change: transform;
    }

    /* Mobile menu transitions */
    #mobileMenu {
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Subtle card hover glow */
    .group:hover .group-hover\:bg-teal-100 {
        background-color: #ccfbf1;
    }

    /* Focus styles */
    a:focus-visible, button:focus-visible {
        outline: 2px solid #0d9488;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Selection color */
    ::selection {
        background-color: #99f6e4;
        color: #042f2e;
    }