/* Custom styles to match the theme and add creativity */
        body {
            font-family: 'Inter', sans-serif;
            background: radial-gradient(circle at top left, rgba(29, 78, 216, 0.15) 0%, transparent 40%),
                        radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.15) 0%, transparent 40%),
                        #0a0a0a; /* Dark background */
            color: #e2e8f0; /* Light text color */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Subtle glow effect for interactive elements */
        .glow-on-hover:hover {
            box-shadow: 0 0 10px rgba(29, 78, 216, 0.5), 0 0 20px rgba(168, 85, 247, 0.5);
            transition: box-shadow 0.3s ease-in-out;
        }

        /* Custom scrollbar for a sleek look */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #1a1a1a;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #3b82f6, #a855f7); /* Blue to purple gradient */
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #2563eb, #9333ea);
        }

        /* Page-specific overrides for Projects page */

        /* consistent project card image sizing (responsive) */
        .project-image {
            width: 100%;
            height: 220px; /* default card image height */
            object-fit: cover;
            display: block;
        }

        /* Slightly smaller on tablets */
        @media (max-width: 768px) {
            .project-image { height: 180px; }
        }

        /* Smaller on phones */
        @media (max-width: 480px) {
            .project-image { height: 140px; }
        }

        /* Apply card utility and polish per-project */
        .project-card { /* apply generic .card via markup or keep here */
            /* minimal override so pages don't need to repeat styles */
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .project-card .meta {
            margin-top: 0.75rem;
            display:flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }

        /* ensure images have a nice placeholder effect */
        .project-image {
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            filter: saturate(1.02);
            transition: transform .4s ease, filter .4s;
        }
        .project-image.loading { filter: blur(6px) saturate(.8); transform: scale(1.02); }
        .project-image.loaded { filter: none; transform: none; }