:root {
            /* Dark Theme (Default) */
            --bg-color: #131313;
            --card-bg: #0F0F0F;
            --subtle-bg: #1a1a1a;
            --text-main: #ffffff;
            --text-muted: #9ca3af;
            --border-color: rgba(255, 255, 255, 0.05);
            --nav-bg: rgba(19, 19, 19, 0.75);
            --glass-border: rgba(255, 255, 255, 0.05);
            --noise-opacity: 0.008;
            --blob-opacity: 0.14;
            --blob-1: 59, 130, 246;
            --blob-2: 16, 185, 129;
            --marquee-grad: #131313;
        }

        [data-theme="light"] {
            /* Light Theme */
            --bg-color: #fafafa;
            --card-bg: #ffffff;
            --subtle-bg: #f3f4f6;
            --text-main: #111827;
            --text-muted: #4b5563;
            --border-color: rgba(0, 0, 0, 0.08);
            --nav-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(0, 0, 0, 0.05);
            --noise-opacity: 0.02;
            --blob-opacity: 0.07;
            --blob-1: 59, 130, 246;
            --blob-2: 99, 102, 241;
            --marquee-grad: #fafafa;
        }

        body {
            font-family: 'Lato', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            overflow-x: hidden;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        /* Added to prevent mobile scroll issues */
        html {
            overflow-x: hidden;
            width: 100%;
            background-color: var(--bg-color);
        }

        html[dir="rtl"] body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
        }

        .bg-noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%; /* Changed from 100vw to 100% */
            height: 100vh;
            pointer-events: none;
            z-index: 50;
            opacity: var(--noise-opacity);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-color); }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #555; }

        .glass-nav {
            background: var(--nav-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--glass-border);
        }

        .gradient-text {
            background: linear-gradient(to bottom right, var(--text-main) 30%, var(--text-muted));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bento-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }
        
        .bento-card:hover {
            border-color: var(--text-muted);
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -20px rgba(0,0,0,0.1);
        }

        .glow-blob {
            position: absolute;
            background: radial-gradient(circle, rgba(var(--blob-1), var(--blob-opacity)) 0%, rgba(var(--blob-1), 0) 72%);
            border-radius: 50%;
            filter: blur(95px);
            z-index: -1;
            pointer-events: none;
        }

        .fixed .glow-blob:nth-child(2) {
            background: radial-gradient(circle, rgba(var(--blob-2), calc(var(--blob-opacity) * 0.75)) 0%, rgba(var(--blob-2), 0) 72%);
            filter: blur(110px);
        }

        .bento-card:hover img { transform: scale(1.05); }
        .bento-card img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

        .cta-button { position: relative; overflow: hidden; }
        .cta-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }
        .cta-button:hover::after { left: 100%; }

        .hover-image-btn {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }

        .hover-image-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('../images/hover/hover-image.webp');
            background-size: cover;
            background-position: center;
            opacity: 0;
            transform: scale(1.08);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: none;
            z-index: 0;
            filter: saturate(0.9) contrast(1.05);
        }

        .hover-image-btn:hover::before {
            opacity: 0.28;
            transform: scale(1);
        }

        .hover-image-btn > * {
            position: relative;
            z-index: 1;
        }

        .nav-link { position: relative; }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: var(--text-main);
            transition: width 0.3s ease;
        }
        body[dir="rtl"] .nav-link::after { left: auto; right: 0; }
        .nav-link:hover::after { width: 100%; }

        .marquee-overlay-left {
            background: linear-gradient(to right, var(--bg-color), transparent);
        }
        .marquee-overlay-right {
            background: linear-gradient(to left, var(--bg-color), transparent);
        }

        .marquee-viewport {
            overflow: hidden;
        }

        .marquee-track {
            display: flex;
            width: max-content;
            will-change: transform;
            animation: logo-marquee 24s linear infinite;
        }

        .marquee-set {
            display: flex;
            align-items: center;
            gap: 5.5rem;
            flex: 0 0 auto;
        }

        @keyframes logo-marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
        }
        
        /* Logo Loop Images - Logic Updated for Visibility */
        .logo-img {
            width: 120px;
            height: 40px;
            object-fit: contain;
            flex: 0 0 auto;
            opacity: 0.5;
            transition: all 0.3s;
            filter: grayscale(100%) brightness(1.2); 
        }
        
        [data-theme="light"] .logo-img {
            filter: grayscale(100%) invert(1);
        }

        .logo-img:hover {
            opacity: 0.6;
            filter: grayscale(0%) brightness(1);
        }

        [data-theme="light"] .logo-img:hover {
             filter: grayscale(0%) invert(1);
        }

        /* Ensure hero/content reveal works even if Tailwind runtime animation utility is unavailable */
        @keyframes slideUpNative {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .animate-slide-up {
            animation: slideUpNative 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }