.loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #131314;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }
        .loader {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top: 4px solid #ffffff;
            animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            position: relative;
        }
        .loader::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top: 4px solid rgba(255, 255, 255, 0.3);
            animation: spin 2s linear infinite;
        }
        .loader::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .content {
            opacity: 0;
            transition: opacity 0.8s ease-in;
        }
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #131314;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #131337, #131337);
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #131337, #131337);
        }
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-image: url('https://vulpesdb.github.io/data/background/black-purple.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            overflow-x: hidden;
        }
        .wave-container {
            position: absolute;
            top: 860px;
            left: 0;
            width: 100%;
            height: 60px;
            overflow: hidden;
            z-index: -1;
        }
        .wave {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .heading {
            position: absolute;
            top: 125.3px;
            left: 50%;
            transform: translateX(-50%) translateY(50px);
            font-family: 'Lato', sans-serif;
            font-weight: 700;
            width: 1344.2px;
            height: 74px;
            text-align: center;
            font-size: 62px;
            color: white;
            opacity: 0;
            animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }
        .subheading {
            position: absolute;
            top: 199.3px;
            left: 50%;
            transform: translateX(-50%) translateY(50px);
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            width: 1704px;
            height: 38.1px;
            text-align: center;
            font-size: 32px;
            color: white;
            opacity: 0;
            animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
        }
        .feature-image-container {
            position: absolute;
            top: 254.6px;
            left: 50%;
            transform: translateX(-50%);
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        .feature-image {
            width: 1007px;
            height: 540.1px;
            object-fit: cover;
            border-radius: 37.8px;
            border: 3.2px solid white;
            opacity: 0;
            filter: blur(10px);
            transform: scale(0.9);
            animation: imageReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
            transition: box-shadow 0.8s cubic-bezier(0.03, 0.98, 0.52, 0.99);
            will-change: transform;
            user-select: none;
            -webkit-user-select: none;
            -webkit-user-drag: none;
            -webkit-touch-callout: none;
        }
        .feature-image.glowing {
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
        }
        .install-button {
            position: absolute;
            top: 821.8px;
            left: 50%;
            transform: translateX(-50%) scale(0.8);
            width: 123.2px;
            height: 36.7px;
            border: 2.8px solid white;
            background: transparent;
            border-radius: 18.35px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            animation: buttonPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
            transition: all 0.3s ease;
        }
        .install-button:hover {
            transform: translateX(-50%) scale(1.1);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
        }
        .install-text {
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            width: 123.2px;
            height: 36.7px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
        .scroll-arrow {
            position: absolute;
            top: 880px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            cursor : pointer;
            opacity: 0;
            animation: arrowFade 2s ease-in-out infinite, buttonPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
            z-index: 2;
        }
        .scroll-arrow::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-right: 3px solid white;
            border-bottom: 3px solid white;
            transform: rotate(45deg);
            left: 10px;
            top: 0;
        }
        .bottom-section {
            position: absolute;
            top: 920px;
            left: 0;
            width: 100%;
            background-color: #131314;
            min-height: 100vh;
            z-index: -2;
        }
        .play-text {
            position: absolute;
            top: 960px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Lato', sans-serif;
            font-weight: 700;
            font-size: 48.5px;
            color: white;
            text-align: center;
            width: 953.5px;
        }
        .video-container {
            position: absolute;
            top: 1040px; 
            left: 50%;
            transform: translateX(-50%);
            width: 1238px;
            height: 696.4px;
            overflow: hidden;
            border-radius: 20.2px;
            border: 4px solid white; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .video-container video {
            width: 100%;
            height: 100%;
            border-radius: 20.2px;
            pointer-events: none;
            object-fit: cover;
        }
        .video-container:hover {
            transform: translateX(-50%) scale(1.02); 
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); 
        }
        @keyframes arrowFade {
            0%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            50% {
                transform: translateX(-50%) translateY(10px);
            }
        }
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        @keyframes imageReveal {
            from {
                opacity: 0;
                transform: scale(0.9);
                filter: blur(10px);
            }
            to {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
            }
        }
        @keyframes buttonPop {
            0% {
                opacity: 0;
                transform: translateX(-50%) scale(0.8);
            }
            50% {
                opacity: 1;
                transform: translateX(-50%) scale(1.1);
            }
            100% {
                opacity: 1;
                transform: translateX(-50%) scale(1);
            }
        }
        .video-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top: 4px solid #ffffff;
            animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            display: none; 
        }