
            .project-card {
                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                position: relative;
                overflow: hidden;
                border-radius: 1.25rem;
            }

            .project-card:hover {
                transform: translateY(-12px) scale(1.015);
                box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.18);
            }

            .tech-tag {
                background: var(--badge-bg);
                color: var(--badge-text);
                padding: 0.35rem 0.85rem;
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 600;
                transition: all 0.3s ease;
                backdrop-filter: blur(4px);
            }

            .tech-tag:hover {
                background: var(--accent-primary);
                color: white;
                transform: translateY(-2px) scale(1.05);
            }

            .category-filter {
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                padding: 0.75rem 1.75rem;
            }

            .category-filter.active {
                background: var(--accent-primary) !important;
                color: white !important;
                border-color: transparent !important;
                box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.2);
            }

            .gradient-text {
                background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                background-size: 200% auto;
                animation: gradient-flow 6s ease infinite;
            }

            @keyframes gradient-flow {

                0%,
                100% {
                    background-position: 0% 50%;
                }

                50% {
                    background-position: 100% 50%;
                }
            }

            .line-clamp-3 {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

