body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a;
            color: #e2e8f0;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1e293b; }
        ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #6366f1; }

        /* Reveal on scroll animation */
        .reveal {
            position: relative;
            transform: translateY(100px);
            opacity: 0;
            transition: 1s all ease;
        }
        .reveal.active { transform: translateY(0); opacity: 1; }

        /* Base card style */
        .content-card {
            background-color: #1e293b;
            border: 1px solid #334155;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(79, 70, 229, 0.4);
        }
        
        /* Innovative Project Card Style */
        .project-card {
            background-color: #1e293b;
            border: 1px solid #334155;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .project-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(79, 70, 229, 0.5);
        }
        .project-card ul {
            list-style-position: inside;
        }
        .project-card li::marker {
            color: #6366f1;
            font-size: 1.2em;
        }


        /* Animated gradient background */
        .hero-gradient {
            position: relative;
            overflow: hidden;
            background: linear-gradient(-45deg, #0f172a, #1e3a8a, #312e81, #0f172a);
            background-size: 400% 400%;
            animation: gradient 20s ease infinite;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        #particles-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }