* {
  transition: background-color 0.25s ease, 
              color 0.25s ease, 
              border-color 0.25s ease;
}
        body { 
            -webkit-font-smoothing: antialiased; 
            -moz-osx-font-smoothing: grayscale;
            -webkit-tap-highlight-color: transparent;
            overscroll-behavior-y: none;
            transition: none;
        }
        
        svg {
  stroke: currentColor !important;
  fill: none !important;
}

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        
        /* Light Mode Defaults */
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(24px) saturate(200%);
            -webkit-backdrop-filter: blur(24px) saturate(200%);
            border: 1px solid rgba(0, 0, 0, 0.04);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
        }
        .glass-card:hover { border-color: rgba(0, 0, 0, 0.08); }

        /* Dark Mode Base */
        .dark .glass-card {
            background: rgba(8, 8, 12, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255,255,255,0.05);
        }
        .dark .glass-card:hover { border-color: rgba(255, 255, 255, 0.15); }

        /* Dynamic RGB Glow Engine for Dark Mode */
        .glow-card { position: relative; z-index: 1; }
        
        .dark .glow-card {
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.9), 
                0 0 45px rgba(var(--glow-rgb), 0.20), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        
        .dark .glow-card:hover {
            border-color: rgba(var(--glow-rgb), 0.5);
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.9), 
                0 0 70px rgba(var(--glow-rgb), 0.45), 
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        /* Mouse Spotlight Tracker */
        .glow-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--glow-rgb, 0,0,0), 0.05), transparent 40%);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            border-radius: inherit;
            z-index: 1; 
        }
        .dark .glow-card::after {
            background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--glow-rgb), 0.15), transparent 40%);
        }
        .glow-card:hover::after { opacity: 1; }
        .glow-card > * { position: relative; z-index: 10; }

        /* Slim Box Header Specific Glass */
        .slim-header-glass {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            will-change: transform, box-shadow;
        }
        .dark .slim-header-glass { background: rgba(5, 5, 8, 0.85); }

        /* Tactile Hardware Button Glow (Blue Theme) */
        .btn-glow {
            /* background: linear-gradient(180deg, #7C3AED 0%, #68c0db 100%); */
            background: linear-gradient(180deg, #7C3AED 0%, #5B21B6 100%);
box-shadow: 
  inset 0px 1px 0px rgba(255,255,255,0.4),
  inset 0px -2px 4px rgba(0,0,0,0.2),
  0px 8px 24px rgba(124, 58, 237, 0.4);
            color: white;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .btn-glow:hover:not(:disabled) {
            box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), inset 0px -2px 4px rgba(0, 0, 0, 0.2), 0px 12px 32px rgba(0, 112, 243, 0.6);
            transform: translateY(-1px);
        }
        .btn-glow:active:not(:disabled) {
            transform: translateY(1px) scale(0.98);
            box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 4px 12px rgba(0, 112, 243, 0.3);
        }

        .pt-safe { padding-top: max(1rem, env(safe-area-inset-top)); }
        .pb-safe { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }

        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .animate-marquee { animation: marquee 40s linear infinite; will-change: transform; }

        @keyframes ambient-breathe { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.05); } 100% { transform: rotate(360deg) scale(1); } }
        .animate-ambient { animation: ambient-breathe 25s ease-in-out infinite; will-change: transform; }
        
        .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .accordion-content { transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: max-height, opacity; }

        /* Blue-tinted Dark Grid */
     .hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: 60px 60px;

    /* 🔥 LIGHT MODE FIX */
    background-image: 
        linear-gradient(to right, rgba(0, 112, 243, 0.20) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 112, 243, 0.20) 1px, transparent 1px);

    mask-image: radial-gradient(ellipse 100% 100% at 50% 40%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 40%, black 40%, transparent 80%);
    transition: opacity 0.5s ease;
}

/* DARK MODE */
.dark .hero-grid-bg {
    background-image: 
        linear-gradient(to right, rgba(53, 179, 143, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 112, 243, 0.18) 1px, transparent 1px);

    animation: gridMove 20s linear infinite;
    will-change: background-position;
}
        @keyframes gridMove {
            0% { background-position: 0px 0px; }
            100% { background-position: 0px 60px; }
        }

        @keyframes textShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .animate-text-shimmer { background-size: 200% auto; animation: textShimmer 4s ease infinite; }

        @keyframes float-badge { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } }
        .animate-float-badge { animation: float-badge 4s ease-in-out infinite; }
    
    
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.animate-fadeIn {
    animation: fadeIn 0.1s ease;
}