html {
            scroll-behavior: smooth;
        }

        .glass-effect {
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(12px);
        }

        .glass-panel {
            background: rgba(20, 20, 25, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        }

        .hero-gradient {
            background: radial-gradient(circle at top right, rgba(30, 33, 61, 0.8) 0%, #000000 70%);
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .b2b-gradient {
            background: linear-gradient(135deg, #1E213D 0%, #152417 100%);
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-15px) rotate(2deg);
            }
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        /* Subtle glowing border animation */
        .glow-border {
            position: relative;
        }

        .glow-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #8B2323, #1E213D, #2E4D31, #8B2323);
            z-index: -1;
            border-radius: inherit;
            background-size: 400%;
            animation: bg-pan 6s linear infinite;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }

        .glow-border:hover::before {
            opacity: 1;
        }

        @keyframes bg-pan {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes text-color-cycle {
            0%, 100% { color: #ED1C24; text-shadow: 0 0 30px rgba(237, 28, 36, 0.8), 0 0 10px rgba(237, 28, 36, 0.5); }
            11% { color: #F37021; text-shadow: 0 0 30px rgba(243, 112, 33, 0.8), 0 0 10px rgba(243, 112, 33, 0.5); }
            22% { color: #FFC900; text-shadow: 0 0 30px rgba(255, 201, 0, 0.8), 0 0 10px rgba(255, 201, 0, 0.5); }
            33% { color: #78D64B; text-shadow: 0 0 30px rgba(120, 214, 75, 0.8), 0 0 10px rgba(120, 214, 75, 0.5); }
            44% { color: #007A33; text-shadow: 0 0 30px rgba(0, 122, 51, 0.8), 0 0 10px rgba(0, 122, 51, 0.5); }
            55% { color: #41B6E6; text-shadow: 0 0 30px rgba(65, 182, 230, 0.8), 0 0 10px rgba(65, 182, 230, 0.5); }
            66% { color: #0033A0; text-shadow: 0 0 30px rgba(0, 51, 160, 0.8), 0 0 10px rgba(0, 51, 160, 0.5); }
            77% { color: #500778; text-shadow: 0 0 30px rgba(80, 7, 120, 0.8), 0 0 10px rgba(80, 7, 120, 0.5); }
            88% { color: #E11584; text-shadow: 0 0 30px rgba(225, 21, 132, 0.8), 0 0 10px rgba(225, 21, 132, 0.5); }
        }

        .animate-color-cycle {
            animation: text-color-cycle 12s linear infinite;
            display: inline-block;
            transition: all 0.5s ease;
        }

        .carousel-wrapper {
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
            cursor: grab;
        }

        .carousel-wrapper:active {
            cursor: grabbing;
        }

        .carousel-track {
            display: flex;
            gap: 1.5rem;
            width: max-content;
        }

        .carousel-card {
            flex-shrink: 0;
            width: 270px;
        }

        @media (max-width: 640px) {
            .carousel-card {
                width: 220px;
            }
        }

        .hero-float-1 { animation: float 6s ease-in-out infinite; }
        .hero-float-2 { animation: float 6s ease-in-out infinite; animation-delay: -2s; }
        .hero-float-3 { animation: float 6s ease-in-out infinite; animation-delay: -4s; }

        /* ===== Hero 3D Cylinder Carousel ===== */
        .hero-3d-scene {
            perspective: 900px;
            perspective-origin: 50% 50%;
            width: 100%;
            height: 480px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero-cylinder {
            width: 180px;
            height: 320px;
            position: relative;
            transform-style: preserve-3d;
            animation: hero-spin 28s linear infinite, hero-float-y 5s ease-in-out infinite;
        }

        .hero-3d-scene:hover .hero-cylinder {
            animation-play-state: paused;
        }

        @keyframes hero-spin {
            from { transform: rotateY(0deg); }
            to   { transform: rotateY(360deg); }
        }

        @keyframes hero-float-y {
            0%, 100% { margin-top: 0; }
            50%      { margin-top: -12px; }
        }

        .hero-cylinder-item {
            position: absolute;
            width: 150px;
            height: 280px;
            left: 50%;
            top: 50%;
            margin-left: -75px;
            margin-top: -140px;
            transition: filter 0.5s ease, transform 0.4s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backface-visibility: hidden;
        }

        .hero-cylinder-item img {
            width: 100%;
            height: auto;
            max-height: 240px;
            object-fit: contain;
            filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6));
            transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.4,0,0.2,1);
        }

        .hero-cylinder-item:hover img {
            transform: scale(1.18) translateY(-8px);
            filter: drop-shadow(0 20px 40px rgba(139,35,35,0.7)) drop-shadow(0 0 30px rgba(37,99,235,0.4));
        }

        .hero-cylinder-item .hero-case-label {
            margin-top: 8px;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: rgba(255,255,255,0.7);
            opacity: 0;
            transform: translateY(6px);
            transition: all 0.4s ease;
            text-shadow: 0 2px 8px rgba(0,0,0,0.8);
        }

        .hero-cylinder-item:hover .hero-case-label {
            opacity: 1;
            transform: translateY(0);
            color: #fff;
        }

        /* Center glow effect behind cylinder */
        .hero-3d-glow {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(139,35,35,0.4) 0%, rgba(37,99,235,0.25) 35%, rgba(46,77,49,0.15) 60%, transparent 75%);
            filter: blur(60px);
            animation: glow-pulse 4s ease-in-out infinite alternate;
            pointer-events: none;
        }

        @keyframes glow-pulse {
            from { opacity: 0.6; transform: scale(0.9); }
            to   { opacity: 1;   transform: scale(1.1); }
        }

        /* Reflection gradient */
        .hero-3d-reflection {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 60px;
            background: radial-gradient(ellipse at center, rgba(139,35,35,0.25) 0%, rgba(37,99,235,0.1) 40%, transparent 75%);
            filter: blur(15px);
            pointer-events: none;
        }

        @media (max-width: 1024px) {
            .hero-3d-scene {
                height: 400px;
            }
            .hero-cylinder {
                width: 140px;
                height: 260px;
            }
            .hero-cylinder-item {
                width: 120px;
                height: 230px;
                margin-left: -60px;
                margin-top: -115px;
            }
            .hero-cylinder-item img {
                max-height: 190px;
            }
        }

        @media (max-width: 640px) {
            .hero-3d-scene {
                height: 340px;
            }
            .hero-cylinder {
                width: 110px;
                height: 220px;
            }
            .hero-cylinder-item {
                width: 100px;
                height: 200px;
                margin-left: -50px;
                margin-top: -100px;
            }
            .hero-cylinder-item img {
                max-height: 160px;
            }
            .hero-3d-glow {
                width: 220px;
                height: 220px;
            }
        }

        /* Modal Scrollbar */
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #52525b; }

        /* ===== Mobile Orbit ===== */
        .mobile-orbit-container {
            /* Full container for orbit */
        }

        #mobile-orbit-track {
            animation: orbit-spin 30s linear infinite;
        }

        @keyframes orbit-spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        .mobile-orbit-wrapper {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0;
            height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-orbit-counter-anim {
            animation: orbit-counter-spin 30s linear infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
        }

        @keyframes orbit-counter-spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(-360deg); }
        }

        .mobile-orbit-item {
            position: absolute;
            width: 65px;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-orbit-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
        }