.material-symbols-outlined {
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}
.material-symbols-outlined[data-weight="fill"] {
    font-variation-settings: 'FILL' 1;
}
body {
    min-height: max(884px, 100dvh);
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-animate {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .scroll-animate.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .chat-bubble-animate {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .chat-bubble-animate.is-visible {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    .typing-indicator {
        display: inline-flex;
        gap: 2px;
    }
    .typing-indicator span {
        width: 4px;
        height: 4px;
        background: #999;
        border-radius: 50%;
        animation: bounce 1.4s infinite ease-in-out both;
    }
    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
    @keyframes bounce {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1); }
    }
}

.shimmer-btn {
    position: relative;
    overflow: hidden;
}
.shimmer-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(30deg);
    animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}
.faq-content.open {
    grid-template-rows: 1fr;
}
.faq-content > div {
    overflow: hidden;
}

.sticky-nav {
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-nav.is-visible {
    transform: translateY(0);
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-entrance {
        opacity: 0;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Button Micro-interactions */
    .btn-interactive {
        position: relative;
        overflow: hidden;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    }
    .btn-interactive:hover {
        transform: translateY(-2px) scale(1.02);
    }
    .btn-interactive:active {
        transform: translateY(0) scale(0.96);
    }
    .btn-interactive::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
        transform: rotate(30deg) translateX(-100%);
        transition: transform 0.6s ease;
        pointer-events: none;
    }
    .btn-interactive:hover::after {
        transform: rotate(30deg) translateX(100%);
    }
}