@layer components {
    .badge {
        @apply px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all duration-300 inline-flex items-center;
    }
    .badge-blue {
        @apply bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:bg-blue-500/20;
    }
    .badge-emerald {
        @apply bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20;
    }
    .badge-purple {
        @apply bg-purple-500/10 text-purple-400 border border-purple-500/20 hover:bg-purple-500/20;
    }
    .badge-orange {
        @apply bg-orange-500/10 text-orange-400 border border-orange-500/20 hover:bg-orange-500/20;
    }
    .badge-red {
        @apply bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20;
    }
    .badge-pink {
        @apply bg-pink-500/10 text-pink-400 border border-pink-500/20 hover:bg-pink-500/20;
    }
    .section-title {
        @apply text-3xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400;
    }

    /* Animations */
    .animate-reveal {
        opacity: 0;
        animation: reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes reveal {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }

    /* Accordion styles */
    details > summary {
        list-style: none;
        cursor: pointer;
    }
    details > summary::-webkit-details-marker {
        display: none;
    }
    details[open] summary .accordion-icon {
        transform: rotate(180deg);
    }
    .accordion-icon {
        transition: transform 0.3s ease;
    }
    details .accordion-content {
        animation: slideDown 0.3s ease-out;
    }

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