html { scroll-behavior: smooth; }
        body {
            background: #060606;
            color: #fafafa;
            overflow-x: hidden;
        }

        /* Animated background orbs */
        .orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(60px);
            pointer-events: none;
            z-index: 0;
            will-change: transform;
        }
        .orb-1 {
            width: 500px; height: 500px;
            background: rgba(99, 102, 241, 0.08);
            top: -150px; left: -150px;
            animation: float1 25s ease-in-out infinite;
        }
        .orb-2 {
            width: 400px; height: 400px;
            background: rgba(168, 85, 247, 0.06);
            bottom: -100px; right: -100px;
            animation: float2 30s ease-in-out infinite;
        }
        .orb-3 {
            width: 350px; height: 350px;
            background: rgba(245, 158, 11, 0.05);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            animation: float3 20s ease-in-out infinite;
        }
        @keyframes float1 {
            0%, 100% { transform: translate(0, 0); }
            33% { transform: translate(100px, 80px); }
            66% { transform: translate(-50px, 120px); }
        }
        @keyframes float2 {
            0%, 100% { transform: translate(0, 0); }
            33% { transform: translate(-80px, -60px); }
            66% { transform: translate(60px, -100px); }
        }
        @keyframes float3 {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.3); }
        }

        /* Noise texture overlay */
        .noise {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0.025;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 256px 256px;
        }

        /* Card styles */
        .bento-card {
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 24px;
            padding: 32px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .bento-card:hover {
            background: rgba(255, 255, 255, 0.045);
            border-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-4px);
        }

        /* Gradient border glow on hero card */
        .hero-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 25px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(168,85,247,0.1), rgba(245,158,11,0.25));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        /* Skills marquee */
        .marquee-container {
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
        }
        .marquee-track {
            display: flex;
            gap: 12px;
            animation: marquee 45s linear infinite;
            width: max-content;
        }
        @keyframes marquee { to { transform: translateX(-50%); } }

        .skill-chip {
            padding: 10px 20px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 100px;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 500;
            color: #a1a1aa;
            transition: all 0.3s ease;
        }
        .skill-chip:hover {
            background: rgba(255,255,255,0.08);
            color: #fafafa;
            border-color: rgba(255,255,255,0.15);
        }

        /* Scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Project logo zoom: idle = zoomed in (cropped), hover = zoom out (full logo) */
        .project-logo {
            transform: scale(1.5);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .project-logo.logo-subtle {
            transform: scale(1.08);
        }
        .bento-card:hover .project-logo {
            transform: scale(1);
        }

        /* Gradient text */
        .gradient-text {
            background: linear-gradient(135deg, #818cf8, #a78bfa, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Status pulse */
        .pulse-dot {
            width: 8px; height: 8px;
            background: #10b981;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
        }
        .pulse-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.3);
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0; transform: scale(2.2); }
        }

        /* Arrow animation */
        .arrow-link .arrow {
            transition: transform 0.3s ease;
            display: inline-block;
        }
        .arrow-link:hover .arrow {
            transform: translate(3px, -3px);
        }

        /* Photo card */
        .photo-card img {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .photo-card:hover img {
            transform: scale(1.04);
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #060606; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

        /* Inner glow on social/action buttons */
        .action-btn {
            transition: all 0.3s ease;
        }
        .action-btn:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.15);
            color: #fff;
        }

        /* Theme toggle button */
        .theme-toggle {
            width: 32px; height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.1);
            background: transparent;
            color: #a1a1aa;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 13px;
        }
        .theme-toggle:hover { color: #fafafa; border-color: rgba(255,255,255,0.2); }
        .theme-toggle .fa-moon { display: none; }
        html.light .theme-toggle .fa-sun { display: none; }
        html.light .theme-toggle .fa-moon { display: inline; }

        /* Smooth theme transition */
        body { transition: background-color 0.3s ease, color 0.3s ease; }

        /* ===== LIGHT MODE ===== */
        html.light body {
            background: #f5f5f5;
            color: #18181b;
        }

        /* Orbs */
        html.light .orb-1 { background: rgba(99, 102, 241, 0.1); }
        html.light .orb-2 { background: rgba(168, 85, 247, 0.08); }
        html.light .orb-3 { background: rgba(245, 158, 11, 0.06); }
        html.light .noise { opacity: 0.012; }

        /* Cards */
        html.light .bento-card {
            background: rgba(255, 255, 255, 0.65);
            border-color: rgba(0, 0, 0, 0.07);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        html.light .bento-card:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(0, 0, 0, 0.12);
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }

        html.light .hero-card::before {
            background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.06), rgba(245,158,11,0.12));
        }

        /* Gradient text - deeper for light bg contrast */
        html.light .gradient-text {
            background: linear-gradient(135deg, #4f46e5, #7c3aed, #d97706);
            -webkit-background-clip: text;
            background-clip: text;
        }

        /* Skill chips */
        html.light .skill-chip {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
            color: #52525b;
        }
        html.light .skill-chip:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #18181b;
            border-color: rgba(0, 0, 0, 0.15);
        }

        /* Action buttons */
        html.light .action-btn {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
            color: #52525b;
        }
        html.light .action-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(0, 0, 0, 0.15);
            color: #18181b;
        }

        /* Theme toggle in light mode */
        html.light .theme-toggle {
            border-color: rgba(0, 0, 0, 0.1);
            color: #71717a;
        }
        html.light .theme-toggle:hover {
            color: #18181b;
            border-color: rgba(0, 0, 0, 0.2);
        }

        /* Tailwind utility overrides — text */
        html.light .text-zinc-300 { color: #3f3f46; }
        html.light .text-zinc-400 { color: #52525b; }
        html.light .text-zinc-500 { color: #71717a; }
        html.light .text-zinc-600 { color: #a1a1aa; }
        html.light .text-emerald-400 { color: #059669; }

        /* Tailwind utility overrides — backgrounds */
        html.light .bg-zinc-800\/80 { background-color: rgba(228, 228, 231, 0.8); }
        html.light .bg-zinc-900\/50 { background-color: rgba(244, 244, 245, 0.5); }
        html.light .bg-zinc-900\/60 { background-color: rgba(244, 244, 245, 0.6); }
        html.light .bg-zinc-800 { background-color: #e4e4e7; }

        /* Tailwind utility overrides — borders */
        html.light .border-zinc-700 { border-color: #d4d4d8; }
        html.light .border-zinc-800 { border-color: #e4e4e7; }

        /* Tailwind hover overrides */
        html.light .hover\:text-white:hover { color: #18181b; }
        html.light .hover\:border-zinc-500:hover { border-color: #a1a1aa; }
        html.light .hover\:border-zinc-600:hover { border-color: #71717a; }
        html.light .group:hover .group-hover\:text-white { color: #18181b; }

        /* Invert primary buttons (white on dark → dark on light) */
        html.light nav .bg-white { background: #18181b; color: #fafafa; }
        html.light nav .bg-white:hover { background: #27272a; }
        html.light .hero-card .bg-white { background: #18181b; color: #fafafa; }
        html.light .hero-card .bg-white:hover { background: #27272a; }

        /* Scrollbar */
        html.light ::-webkit-scrollbar-track { background: #f5f5f5; }
        html.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
        html.light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

@media (max-width: 480px) {
    nav .bento-card {
        gap: 2px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    nav .bento-card a:not(.bg-white) {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
    }
}