/* Base */
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        overflow-x: hidden;
    }

    /* Scroll reveal base — content is visible by default, JS adds the hidden state */
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hero animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-up {
        animation-name: fadeInUp;
        animation-duration: 0.8s;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-fill-mode: both;
    }

    /* Navbar scroll state */
    .navbar-scrolled {
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    .navbar-scrolled #navbar a:not(.bg-teal-700) {
        color: #334155 !important;
    }

    /* Mobile menu */
    .mobile-menu-open {
        transform: translateX(0) !important;
    }

    /* Subtle line decorations */
    .thin-line {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, #cbd5e1, transparent);
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }
    ::-webkit-scrollbar-track {
        background: #f8fafc;
    }
    ::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

    /* Selection color */
    ::selection {
        background: #ccfbf1;
        color: #134e4a;
    }

    /* Input autofill */
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important;
        -webkit-text-fill-color: #1e293b !important;
    }
</style>