html {
    scroll-behavior: smooth;
}
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #ffffff;
    color: #1d1d1f;
}
.header-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.5rem center;
    background-size: 1.25rem;
}
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0;
}
.mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}
.mobile-menu.is-open {
    transform: translateX(0);
}
.menu-backdrop {
    transition: opacity 0.3s ease-in-out;
}
code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}
.desktop-submenu {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup-backdrop {
    transition: opacity 0.3s ease-in-out;
}
.popup-container {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.chat-widget {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.chat-bubble {
    max-width: 85%;
    word-wrap: break-word;
}
/* Typing indicator animation */
.typing-indicator span {
    height: 8px;
    width: 8px;
    float: left;
    margin: 0 1px;
    background-color: #9E9EA1;
    display: block;
    border-radius: 50%;
    opacity: 0.4;
    animation: 1s blink infinite .3333s;
}
.typing-indicator span:nth-child(2) {
    animation-delay: .6666s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: .9999s;
}
@keyframes blink {
    50% {
        opacity: 1;
    }
}