@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .bg-gradient-orange {
        background: linear-gradient(135deg, #FF7A00 0%, #FFB300 100%);
    }
    .card-hover {
        transition: all 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .btn-hover {
        transition: all 0.2s ease;
    }
    .btn-hover:hover {
        transform: translateY(-2px);
    }
    .nav-scrolled {
        @apply bg-white shadow-md;
    }
    .gradient-text {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
    }
}

.faq-answer {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.faq-answer:not(.hidden) {
    opacity: 1;
}