body {
            font-family: 'Inter', sans-serif;
            background-color: #111827; /* Fallback background */
            color: #d1d5db;
            overflow-x: hidden;
        }
        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        .glass-effect {
            background: rgba(17, 24, 39, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .form-input {
            background-color: #1f2937;
            border-color: #4b5563;
        }
        .form-input:focus {
            outline: none;
            border-color: #38bdf8;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.4);
        }
        .active-nav {
            color: #38bdf8;
            font-weight: 600;
        }

        /* --- Nav Link Effects --- */
        .nav-link {
            position: relative;
            padding-bottom: 6px; /* Space for the underline */
        }
        /* The underline bar */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #38bdf8; /* sky-400 */
            transform: scaleX(0); /* Start hidden */
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }
        /* Hover effect: underline grows from right to left */
        .nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        /* Active link effect: underline is always visible and full-width */
        .nav-link.active-nav::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        /* --- End Nav Link Effects --- */

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Project Card Enhancements --- */
        .project-grid {
            perspective: 1500px;
        }
        .project-card {
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
        }
        /* No 3D tilt on mobile for better usability */
        @media (min-width: 768px) {
            .project-card:hover {
                transform: translateY(-10px) rotateX(8deg) rotateY(4deg);
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
            }
        }
        .project-card-content { position: relative; z-index: 2; }
        .project-card img { transition: transform 0.4s ease-out; }
        .project-card:hover img { transform: scale(1.05); }
        .project-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a855f7 72deg, #f43f5e 144deg, #eab308 216deg, #84cc16 288deg, #2a8af6 360deg);
            z-index: 0; opacity: 0; animation: rotating-glow 4s linear infinite; transition: opacity 0.4s ease-out;
        }
        .project-card:hover::before { opacity: 1; }
        .project-card::after {
            content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
            background: #1e293b; border-radius: 0.5rem; z-index: 1;
        }
        @keyframes rotating-glow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        /* End Project Card Enhancements */

        /* --- Responsive Timeline --- */
        .timeline-container { position: relative; max-width: 1000px; margin: 0 auto; }
        /* Desktop timeline bar */
        .timeline-container::after { content: ''; position: absolute; width: 4px; background-color: #374151; top: 0; bottom: 0; left: 50%; margin-left: -2px; border-radius: 2px; }
        .timeline-item { padding: 10px 40px; position: relative; width: 50%; }
        .timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; right: -10px; background-color: #111827; border: 4px solid #38bdf8; top: 28px; border-radius: 50%; z-index: 1; }
        .timeline-left { left: 0; }
        .timeline-right { left: 50%; }
        .timeline-left::before { content: " "; height: 0; position: absolute; top: 32px; width: 0; z-index: 1; right: 30px; border: medium solid #374151; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #374151; }
        .timeline-right::before { content: " "; height: 0; position: absolute; top: 32px; width: 0; z-index: 1; left: 30px; border: medium solid #374151; border-width: 10px 10px 10px 0; border-color: transparent #374151 transparent transparent; }
        .timeline-right::after { left: -10px; }
        .timeline-content { padding: 20px 30px; position: relative; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(56, 189, 248, 0.1); }
        
        /* Mobile timeline adjustments */
        @media screen and (max-width: 768px) {
            .timeline-container::after { left: 20px; }
            .timeline-item { width: 100%; padding-left: 60px; padding-right: 15px; }
            .timeline-item::before { left: 45px; border-width: 10px 10px 10px 0; border-color: transparent #374151 transparent transparent; }
            .timeline-left::after, .timeline-right::after { left: 10px; }
            .timeline-right { left: 0%; }
        }
        /* End Responsive Timeline */

        /* --- Skills Marquee --- */
        .skills-marquee { width: 100%; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); }
        .skills-track { display: flex; width: calc(250px * 14); animation: scroll 40s linear infinite; } /* Width adjusted for more items */
        .skills-marquee:hover .skills-track { animation-play-state: paused; }
        .skill-item { width: 250px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 20px; gap: 1rem; transition: transform 0.3s ease; }
        .skill-item:hover { transform: scale(1.1); }
        .skill-item svg { width: 48px; height: 48px; }
        @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } /* Adjusted for more items */