@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,700&display=swap');
        
        :root {
            scroll-behavior: smooth;
            --bg-dark: #0a0a0a;
            --bg-light: #ffffff;
            --text-dark: #f0f0f0;
            --text-light: #333333;
            --accent-primary: #3b82f6;
            --accent-secondary: #8b5cf6;
            --bento-bg-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            --bento-bg-light: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.03) 100%);
            --bento-border-dark: rgba(255, 255, 255, 0.08);
            --bento-border-light: rgba(0, 0, 0, 0.08);
            --nav-blur-bg-dark: rgba(10, 10, 10, 0.8);
            --nav-blur-bg-light: rgba(255, 255, 255, 0.9);
            --tag-bg-dark: rgba(255, 255, 255, 0.05);
            --tag-bg-light: rgba(0, 0, 0, 0.05);
            --profile-frame-bg-dark: #1a1a1a;
            --profile-frame-bg-light: #f0f0f0;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-dark);
            overflow-x: hidden;
            letter-spacing: -0.01em;
            transition: background-color 0.4s ease, color 0.4s ease;
            perspective: 1000px; /* Added for 3D tilt effects */
        }
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 2px 2px, rgba(255,255,255,0.02) 1px, transparent 0);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: -1;
        }
        .light-theme .grid-bg {
            background-image: 
                radial-gradient(circle at 2px 2px, rgba(0,0,0,0.03) 1px, transparent 0);
        }
        .light-theme {
            background-color: var(--bg-light);
            color: var(--text-light);
            --accent-primary: #2563eb;
            --accent-secondary: #7c3aed;
        }
        .light-theme a {
            color: var(--accent-primary);
        }
        .light-theme a:hover,
        .light-theme .hover\:text-white:hover {
            color: var(--accent-secondary) !important;
        }
        .bento-card {
            background: var(--bento-bg-dark);
            border: 1px solid var(--bento-border-dark);
            border-radius: 24px;
            transition: transform 0.1s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
            color: var(--text-dark);
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        .bento-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.05), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
            pointer-events: none;
        }
        .bento-card:hover::before {
            transform: translateX(100%);
        }
        .bento-card:hover { 
            border-color: var(--accent-primary);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            background: rgba(255, 255, 255, 0.04);
        }
        .light-theme .bento-card:hover {
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
            background: #ffffff;
        }
        .bento-card h4 {
            color: var(--text-dark);
            transition: color 0.3s ease, transform 0.3s ease;
            transform: translateZ(20px); /* Lift text in 3D */
        }
        .bento-card p {
            transform: translateZ(10px);
        }
        .bento-card:hover h4 {
            color: var(--accent-primary);
        }

        /* Hero Background Animations */
        #hero-canvas {
            position: absolute; /* Restricted to hero section */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        .hero-bg-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
            z-index: -2;
            pointer-events: none;
        }
        .light-theme .hero-bg-glow {
            background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
        }

        .hero-content {
            position: relative;
            z-index: 10;
        }
        .bento-card span {
            color: var(--text-dark);
        }
        .light-theme .bento-card {
            background: var(--bento-bg-light);
            border-color: var(--bento-border-light);
            color: var(--text-light);
        }
        .light-theme .bento-card h4 {
            color: var(--text-light);
        }
        .light-theme .bento-card span {
            color: var(--text-light);
        }
        .bento-card:hover { 
            border-color: rgba(255, 255, 255, 0.15); 
            background: rgba(255, 255, 255, 0.03); 
        }
        .light-theme .bento-card:hover {
            border-color: rgba(0, 0, 0, 0.15);
            background: rgba(0, 0, 0, 0.03);
        }
        .nav-blur { 
            background: var(--nav-blur-bg-dark); 
            backdrop-filter: blur(12px); 
            border-bottom: 1px solid var(--bento-border-dark); 
        }
        .light-theme .nav-blur {
            background: var(--nav-blur-bg-light);
            border-bottom-color: var(--bento-border-light);
        }
        .tag { 
            background: var(--tag-bg-dark); 
            padding: 4px 12px; 
            border-radius: 6px; 
            font-size: 11px; 
            font-weight: 500; 
            color: #a0a0a0; 
        }
        .light-theme .tag {
            background: var(--tag-bg-light);
            color: #505050;
        }
        .profile-frame { 
            position: relative; 
            overflow: hidden; 
            border-radius: 24px; 
            background: var(--profile-frame-bg-dark); 
            aspect-ratio: 4/5; 
        }
        .light-theme .profile-frame {
            background: var(--profile-frame-bg-light);
        }
        .profile-image { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            filter: grayscale(100%) contrast(1.1); 
            transition: filter 0.5s ease; 
        }
        .profile-frame:hover .profile-image { 
            filter: grayscale(0%) contrast(1); 
        }

        /* Highlights Carousel Styles */
        .carousel-container {
            width: 100%;
            overflow-x: auto;
            display: flex;
            gap: 24px;
            padding: 20px 0 40px;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
            scroll-snap-type: x mandatory;
        }
        .carousel-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        .highlight-card {
            flex: 0 0 500px;
            height: 281px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px;
            background-size: cover;
            background-position: center;
        }
        .highlight-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }
        .highlight-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
            z-index: 1;
        }
        .highlight-card h3 {
            position: relative;
            z-index: 2;
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 500;
            margin: 0;
            line-height: 1.4;
        }
        .highlight-card .card-category {
            position: relative;
            z-index: 2;
            color: var(--accent-primary);
            font-size: 0.75rem;
            text-transform: uppercase;
    
            margin-bottom: 8px;
            font-weight: 600;
        }