body {
            background:
                radial-gradient(circle at 12% 10%, rgba(45, 212, 191, 0.12), transparent 24%),
                radial-gradient(circle at 88% 14%, rgba(56, 189, 248, 0.12), transparent 28%),
                linear-gradient(180deg, #06101d 0%, #08111f 42%, #040812 100%);
        }

        .light-card {
            background: rgba(255, 255, 255, 0.97);
            color: #1d1d1f;
        }

        .project-card {
            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(2, 10, 24, 0.6);
            backdrop-filter: blur(12px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            color: #e2e8f0;
        }

        .project-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(56, 189, 248, 0.2);
            border-color: rgba(56, 189, 248, 0.3);
        }

        .project-card img {
            transition: transform 0.6s ease;
        }

        .project-card:hover img {
            transform: scale(1.03);
        }

        .badge-dark {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
        }

        .badge-teal {
            background: rgba(45, 212, 191, 0.1);
            border: 1px solid rgba(45, 212, 191, 0.3);
            color: #5eead4;
        }

        .badge-orange {
            background: rgba(251, 146, 60, 0.1);
            border: 1px solid rgba(251, 146, 60, 0.3);
            color: #fdba74;
        }

        .badge-green {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #86efac;
        }

        .hero-gradient {
            background: radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.08), transparent 40%), radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.08), transparent 40%);
        }

        .section-title {
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: -0.02em;
        }

        .footer-dark {
            border-top: 1px solid rgba(148, 163, 184, 0.1);
            background: rgba(2, 6, 16, 0.8);
            backdrop-filter: blur(8px);
        }

        .nav-blur {
            background: rgba(4, 12, 24, 0.75);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(148, 163, 184, 0.15);
        }

        .btn-neon {
            background: rgba(45, 212, 191, 0.15);
            border: 1px solid rgba(45, 212, 191, 0.4);
            color: #5eead4;
            transition: all 0.2s ease;
        }

        .btn-neon:hover {
            background: rgba(45, 212, 191, 0.25);
            box-shadow: 0 0 25px rgba(45, 212, 191, 0.3);
        }
        
        .btn-ghost {
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #e2e8f0;
            transition: all 0.2s ease;
        }
        .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.4);
        }