<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotsync - Barátaid mindig csak egy kattintásnyira</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
    ::-webkit-scrollbar {
        width: 14px;
        background-color: #090A0B;
    }

    ::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.02);
        border-radius: 7px;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, rgba(79, 70, 229, 0.4), rgba(147, 51, 234, 0.4));
        border-radius: 7px;
        border: 3px solid #090A0B;
        transition: all 0.2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(to bottom, rgba(79, 70, 229, 0.6), rgba(147, 51, 234, 0.6));
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(147, 51, 234, 0.4) rgba(255, 255, 255, 0.02);
    }

    @supports (scrollbar-color: auto) {
        * {
            scrollbar-color: rgba(147, 51, 234, 0.4) rgba(255, 255, 255, 0.02);
        }
    }
</style>
<body x-data="{ 
    language: 'hu', 
    mobileMenuOpen: false,
    scrolled: false,
    languageOpen: false
}" 
@scroll.window="scrolled = window.pageYOffset > 20"
class="bg-[#090A0B] text-white">
    <!-- Animated Background -->
    <div class="fixed inset-0 -z-10 overflow-hidden">
        <div class="absolute top-0 left-1/4 w-[800px] h-[800px] bg-blue-500/10 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
        <div class="absolute top-1/2 right-1/4 w-[800px] h-[800px] bg-purple-500/10 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
        <div class="absolute -bottom-8 left-1/3 w-[800px] h-[800px] bg-pink-500/10 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    <nav class="fixed top-0 inset-x-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4">
            <div class="relative rounded-2xl border border-white/10 transition-all duration-300"
                 :class="scrolled ? 'bg-black/80 shadow-lg backdrop-blur-lg' : 'bg-transparent'">
                <!-- Promo Banner -->
                <div class="rounded-t-2xl bg-gradient-to-r from-indigo-600/80 to-purple-600/80 backdrop-blur-xl border-b border-white/10">
                    <div class="px-4 py-2">
                        <div class="text-center text-sm text-white/90">
                            <span x-show="language === 'hu'" class="font-medium">🎉 Korlátozott ideig!</span>
                            <span x-show="language === 'en'" class="font-medium">🎉 Limited Time Offer!</span>
                            <span class="hidden sm:inline" x-show="language === 'hu'"> — Használd a </span>
                            <span class="hidden sm:inline" x-show="language === 'en'"> — Get 20% off with code </span>
                            <span class="font-mono font-bold">SPOT20</span>
                            <span class="hidden sm:inline" x-show="language === 'hu'"> kódot 20% kedvezményért</span>
                        </div>
                    </div>
                </div>

                <!-- Main Navigation -->
                <div class="px-4 sm:px-6 py-2">
                    <div class="flex items-center justify-between h-16">
                        <!-- Logo -->
                        <a href="/" class="flex items-center gap-3 group">
                            <img src="https://cdn.spotsync.hu/brand/logo_white.png" alt="Logo" 
                                 class="h-8 sm:h-9 group-hover:scale-110 transition-transform duration-300"/>
                            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">
                                Spotsync
                            </span>
                        </a>

                        <!-- Desktop Navigation -->
                        <div class="hidden md:flex items-center gap-8">
                            <a href="#features" class="text-gray-400 hover:text-white transition-colors flex items-center group">
                                <i class="fa-solid fa-star-half-stroke text-sm group-hover:scale-110 transition-all"></i>
                                <span x-show="language === 'hu'" class="ml-2">Funkciók</span>
                                <span x-show="language === 'en'" class="ml-2">Features</span>
                            </a>
                            <a href="#pricing" class="text-gray-400 hover:text-white transition-colors flex items-center group">
                                <i class="fa-solid fa-tag text-sm group-hover:scale-110 transition-all"></i>
                                <span x-show="language === 'hu'" class="ml-2">Árak</span>
                                <span x-show="language === 'en'" class="ml-2">Pricing</span>
                            </a>
                            <a href="#download" class="text-gray-400 hover:text-white transition-colors flex items-center group">
                                <i class="fa-solid fa-download text-sm group-hover:scale-110 transition-all"></i>
                                <span x-show="language === 'hu'" class="ml-2">Letöltés</span>
                                <span x-show="language === 'en'" class="ml-2">Download</span>
                            </a>
                        </div>

                        <!-- Desktop Actions -->
                        <div class="hidden md:flex items-center gap-4">
                            <!-- Language Selector -->
                            <div class="relative" @click.away="languageOpen = false">
                                <button @click="languageOpen = !languageOpen" 
                                        class="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-white/10 border border-white/10 hover:border-white/20 transition-all">
                                    <div class="w-5 h-5 relative">
                                        <div x-show="language === 'hu'" class="w-5 h-5">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-full">
                                                <path fill="#436F4D" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
                                                <path fill="#FFF" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,580.75 C821.17,665.97 650.97,635.17 478.74,608.72 C323.53,584.88 166.58,564.15 8,643.25 L8,195.25"/>
                                                <path fill="#CD2A3E" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,356.75 C821.17,441.97 650.97,411.17 478.74,384.72 C323.53,360.88 166.58,340.15 8,419.25 L8,195.25"/>
                                            </svg>
                                        </div>
                                        <div x-show="language === 'en'" class="w-5 h-5">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-full">
                                                <defs/>
                                                <path fill="#00247d" d="M8,195.25 L8,867.25 C178.83,782.03 349.03,812.83 521.26,839.28 C676.47,863.12 833.42,883.85 992,804.75 L992,132.75 C821.17,217.97 650.97,187.17 478.74,160.72 C323.53,136.88 166.58,116.15 8,195.25"/>
                                                <path fill="#fff" d="M8,195.25 C44.33,177.13 80.6,164.15 118.01,155.13 C244.08,211.08 370.02,315.98 500,424.87 C626.04,358.31 752.3,292.44 881.99,172.87 C918.3,164.11 954.58,151.42 992,132.75 L992,207.88 C865.87,356.97 739.9,442.95 610.01,515.83 C735.76,617.03 862.3,705.77 992,729.62 L992,804.75 C955.67,822.87 919.4,835.85 881.99,844.87 C755.92,788.92 629.98,684.02 500,575.13 C373.96,641.69 247.7,707.56 118.01,827.13 C81.7,835.89 45.42,848.58 8,867.25 L8,792.12 C134.13,643.03 260.1,557.05 389.99,484.17 C264.24,382.97 137.7,294.23 8,270.38 L8,195.25"/>
                                                <path fill="#cf142b" d="M500,500 L500,449.91 C638.13,376.97 776.58,304.91 918.66,162.63 C942.86,154.87 967.05,145.2 992,132.75 C829.45,324.89 667.32,411.64 500,500 L573.34,511 C711.11,624.39 849.88,728.53 992,754.66 L992,804.75 C829.5,774.88 667.53,640.34 500,500 L500,550.09 C361.87,623.03 223.42,695.09 81.34,837.37 C57.14,845.13 32.95,854.8 8,867.25 C170.55,675.11 332.68,588.36 500,500 L426.66,489 C288.89,375.61 150.12,271.47 8,245.34 L8,195.25 C170.5,225.12 332.47,359.66 500,500"/>
                                                <path fill="#fff" d="M582,176.2 L582,400.2 C716.98,418.61 852.97,426.1 992,356.75 L992,580.75 C856.54,648.33 721.54,643.23 582,624.2 L582,848.2 C527.88,840.79 473.76,831.43 418,823.8 L418,599.8 C283.02,581.39 147.03,573.9 8,643.25 L8,419.25 C143.46,351.67 278.46,356.77 418,375.8 L418,151.8 C472.12,159.21 526.24,168.57 582,176.2"/>
                                                <path fill="#cf142b" d="M549.2,171.51 L549.2,440.31 C694.92,461.9 841.91,476.42 992,401.55 L992,535.95 C845.67,608.95 699.93,597.04 549.2,574.71 L549.2,843.51 L450.8,828.49 L450.8,559.69 C305.08,538.1 158.09,523.58 8,598.45 L8,464.05 C154.33,391.05 300.07,402.96 450.8,425.29 L450.8,156.49 L549.2,171.51"/>
                                                <path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <span x-show="language === 'hu'" class="text-sm">Magyar</span>
                                    <span x-show="language === 'en'" class="text-sm">English</span>
                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
                                    :class="{ 'rotate-180': languageOpen }"></i>
                                </button>

                                <!-- Language Dropdown -->
                                <div x-show="languageOpen" 
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 scale-95"
                                    x-transition:enter-end="opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 scale-100"
                                    x-transition:leave-end="opacity-0 scale-95"
                                    class="absolute right-0 mt-2 w-48 rounded-lg bg-black/90 border border-white/10 backdrop-blur-xl overflow-hidden">
                                    <div class="p-1">
                                        <button @click="language = 'hu'; languageOpen = false" 
                                                class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/10 transition-colors"
                                                :class="language === 'hu' ? 'bg-white/10' : ''">
                                            <div class="w-5 h-5">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-full">
                                                    <path fill="#436F4D" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
                                                    <path fill="#FFF" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,580.75 C821.17,665.97 650.97,635.17 478.74,608.72 C323.53,584.88 166.58,564.15 8,643.25 L8,195.25"/>
                                                    <path fill="#CD2A3E" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,356.75 C821.17,441.97 650.97,411.17 478.74,384.72 C323.53,360.88 166.58,340.15 8,419.25 L8,195.25"/>
                                                </svg>
                                            </div>
                                            <span class="text-sm">Magyar</span>
                                            <div x-show="language === 'hu'" class="w-1.5 h-1.5 rounded-full bg-blue-500 ml-auto"></div>
                                        </button>

                                        <button @click="language = 'en'; languageOpen = false"
                                                class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/10 transition-colors"
                                                :class="language === 'en' ? 'bg-white/10' : ''">
                                            <div class="w-5 h-5">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-full">
                                                    <defs/>
                                                    <path fill="#00247d" d="M8,195.25 L8,867.25 C178.83,782.03 349.03,812.83 521.26,839.28 C676.47,863.12 833.42,883.85 992,804.75 L992,132.75 C821.17,217.97 650.97,187.17 478.74,160.72 C323.53,136.88 166.58,116.15 8,195.25"/>
                                                    <path fill="#fff" d="M8,195.25 C44.33,177.13 80.6,164.15 118.01,155.13 C244.08,211.08 370.02,315.98 500,424.87 C626.04,358.31 752.3,292.44 881.99,172.87 C918.3,164.11 954.58,151.42 992,132.75 L992,207.88 C865.87,356.97 739.9,442.95 610.01,515.83 C735.76,617.03 862.3,705.77 992,729.62 L992,804.75 C955.67,822.87 919.4,835.85 881.99,844.87 C755.92,788.92 629.98,684.02 500,575.13 C373.96,641.69 247.7,707.56 118.01,827.13 C81.7,835.89 45.42,848.58 8,867.25 L8,792.12 C134.13,643.03 260.1,557.05 389.99,484.17 C264.24,382.97 137.7,294.23 8,270.38 L8,195.25"/>
                                                    <path fill="#cf142b" d="M500,500 L500,449.91 C638.13,376.97 776.58,304.91 918.66,162.63 C942.86,154.87 967.05,145.2 992,132.75 C829.45,324.89 667.32,411.64 500,500 L573.34,511 C711.11,624.39 849.88,728.53 992,754.66 L992,804.75 C829.5,774.88 667.53,640.34 500,500 L500,550.09 C361.87,623.03 223.42,695.09 81.34,837.37 C57.14,845.13 32.95,854.8 8,867.25 C170.55,675.11 332.68,588.36 500,500 L426.66,489 C288.89,375.61 150.12,271.47 8,245.34 L8,195.25 C170.5,225.12 332.47,359.66 500,500"/>
                                                    <path fill="#fff" d="M582,176.2 L582,400.2 C716.98,418.61 852.97,426.1 992,356.75 L992,580.75 C856.54,648.33 721.54,643.23 582,624.2 L582,848.2 C527.88,840.79 473.76,831.43 418,823.8 L418,599.8 C283.02,581.39 147.03,573.9 8,643.25 L8,419.25 C143.46,351.67 278.46,356.77 418,375.8 L418,151.8 C472.12,159.21 526.24,168.57 582,176.2"/>
                                                    <path fill="#cf142b" d="M549.2,171.51 L549.2,440.31 C694.92,461.9 841.91,476.42 992,401.55 L992,535.95 C845.67,608.95 699.93,597.04 549.2,574.71 L549.2,843.51 L450.8,828.49 L450.8,559.69 C305.08,538.1 158.09,523.58 8,598.45 L8,464.05 C154.33,391.05 300.07,402.96 450.8,425.29 L450.8,156.49 L549.2,171.51"/>
                                                    <path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
                                                </svg>
                                            </div>
                                            <span class="text-sm">English</span>
                                            <div x-show="language === 'en'" class="w-1.5 h-1.5 rounded-full bg-blue-500 ml-auto"></div>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Try Now Button -->
                            <a href="#" 
                               class="inline-flex items-center px-6 py-2 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 transition-all duration-300">
                                <i class="fa-solid fa-rocket mr-2"></i>
                                <span x-show="language === 'hu'">Kipróbálás</span>
                                <span x-show="language === 'en'">Try Now</span>
                            </a>
                        </div>

                        <!-- Mobile menu button -->
                        <button @click="mobileMenuOpen = !mobileMenuOpen"
                                class="md:hidden rounded-lg p-2 hover:bg-white/10 transition-colors">
                            <i class="fa-solid fa-bars text-xl" x-show="!mobileMenuOpen"></i>
                            <i class="fa-solid fa-xmark text-xl" x-show="mobileMenuOpen"></i>
                        </button>
                    </div>
                </div>

                <!-- Mobile menu -->
                <div x-show="mobileMenuOpen"
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 scale-95"
                     x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 scale-95"
                     class="absolute inset-x-0 top-full mt-2 rounded-xl overflow-hidden backdrop-blur-xl border border-white/10 bg-black/60 transform origin-top">
                    
                    <div class="p-2">
                        <!-- Navigation Links -->
                        <div class="space-y-1 p-1">
                            <a href="#features" class="flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors">
                                <i class="fa-solid fa-star-half-stroke w-5"></i>
                                <span x-show="language === 'hu'">Funkciók</span>
                                <span x-show="language === 'en'">Features</span>
                            </a>
                            <a href="#pricing" class="flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors">
                                <i class="fa-solid fa-tag w-5"></i>
                                <span x-show="language === 'hu'">Árak</span>
                                <span x-show="language === 'en'">Pricing</span>
                            </a>
                            <a href="#download" class="flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors">
                                <i class="fa-solid fa-download w-5"></i>
                                <span x-show="language === 'hu'">Letöltés</span>
                                <span x-show="language === 'en'">Download</span>
                            </a>
                        </div>

                        <!-- Divider -->
                        <div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent my-2"></div>

                        <!-- Language Selection -->
                        <div class="p-3">
                            <p class="text-xs uppercase tracking-wider text-white/50 mb-2">
                                <span x-show="language === 'hu'">Nyelv</span>
                                <span x-show="language === 'en'">Language</span>
                            </p>
                            <div class="grid grid-cols-2 gap-2">
                                <button @click="language = 'hu'; mobileMenuOpen = false" 
                                        class="flex items-center justify-center gap-2 p-3 rounded-lg text-sm text-center transition-all duration-200"
                                        :class="language === 'hu' ? 'bg-white/10 text-white' : 'text-white/60 hover:bg-white/5'">
                                    <div class="w-5 h-5">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-full">
                                            <path fill="#436F4D" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
                                            <path fill="#FFF" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,580.75 C821.17,665.97 650.97,635.17 478.74,608.72 C323.53,584.88 166.58,564.15 8,643.25 L8,195.25"/>
                                            <path fill="#CD2A3E" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,356.75 C821.17,441.97 650.97,411.17 478.74,384.72 C323.53,360.88 166.58,340.15 8,419.25 L8,195.25"/>
                                        </svg>
                                    </div>
                                    <span>Magyar</span>
                                </button>
                        
                                <button @click="language = 'en'; mobileMenuOpen = false"
                                        class="flex items-center justify-center gap-2 p-3 rounded-lg text-sm text-center transition-all duration-200"
                                        :class="language === 'en' ? 'bg-white/10 text-white' : 'text-white/60 hover:bg-white/5'">
                                    <div class="w-5 h-5">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" class="w-full h-full">
                                            <defs/>
                                            <path fill="#00247d" d="M8,195.25 L8,867.25 C178.83,782.03 349.03,812.83 521.26,839.28 C676.47,863.12 833.42,883.85 992,804.75 L992,132.75 C821.17,217.97 650.97,187.17 478.74,160.72 C323.53,136.88 166.58,116.15 8,195.25"/>
                                            <path fill="#fff" d="M8,195.25 C44.33,177.13 80.6,164.15 118.01,155.13 C244.08,211.08 370.02,315.98 500,424.87 C626.04,358.31 752.3,292.44 881.99,172.87 C918.3,164.11 954.58,151.42 992,132.75 L992,207.88 C865.87,356.97 739.9,442.95 610.01,515.83 C735.76,617.03 862.3,705.77 992,729.62 L992,804.75 C955.67,822.87 919.4,835.85 881.99,844.87 C755.92,788.92 629.98,684.02 500,575.13 C373.96,641.69 247.7,707.56 118.01,827.13 C81.7,835.89 45.42,848.58 8,867.25 L8,792.12 C134.13,643.03 260.1,557.05 389.99,484.17 C264.24,382.97 137.7,294.23 8,270.38 L8,195.25"/>
                                            <path fill="#cf142b" d="M500,500 L500,449.91 C638.13,376.97 776.58,304.91 918.66,162.63 C942.86,154.87 967.05,145.2 992,132.75 C829.45,324.89 667.32,411.64 500,500 L573.34,511 C711.11,624.39 849.88,728.53 992,754.66 L992,804.75 C829.5,774.88 667.53,640.34 500,500 L500,550.09 C361.87,623.03 223.42,695.09 81.34,837.37 C57.14,845.13 32.95,854.8 8,867.25 C170.55,675.11 332.68,588.36 500,500 L426.66,489 C288.89,375.61 150.12,271.47 8,245.34 L8,195.25 C170.5,225.12 332.47,359.66 500,500"/>
                                            <path fill="#fff" d="M582,176.2 L582,400.2 C716.98,418.61 852.97,426.1 992,356.75 L992,580.75 C856.54,648.33 721.54,643.23 582,624.2 L582,848.2 C527.88,840.79 473.76,831.43 418,823.8 L418,599.8 C283.02,581.39 147.03,573.9 8,643.25 L8,419.25 C143.46,351.67 278.46,356.77 418,375.8 L418,151.8 C472.12,159.21 526.24,168.57 582,176.2"/>
                                            <path fill="#cf142b" d="M549.2,171.51 L549.2,440.31 C694.92,461.9 841.91,476.42 992,401.55 L992,535.95 C845.67,608.95 699.93,597.04 549.2,574.71 L549.2,843.51 L450.8,828.49 L450.8,559.69 C305.08,538.1 158.09,523.58 8,598.45 L8,464.05 C154.33,391.05 300.07,402.96 450.8,425.29 L450.8,156.49 L549.2,171.51"/>
                                            <path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
                                        </svg>
                                    </div>
                                    <span>English</span>
                                </button>
                            </div>
                        </div>

                        <!-- Try Now Button -->
                        <div class="p-3">
                            <a href="#" class="flex items-center justify-center gap-2 w-full p-3 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium hover:from-blue-500 hover:to-purple-500 transition-colors">
                                <i class="fa-solid fa-rocket"></i>
                                <span x-show="language === 'hu'">Kipróbálás</span>
                                <span x-show="language === 'en'">Try Now</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="h-20"></div>

    <!-- Hero Section -->
    <section class="relative pt-32 pb-20">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col items-center text-center">
                <!-- Hero Badge -->
                <div class="inline-flex items-center px-4 py-1.5 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-full group hover:from-blue-500/20 hover:to-purple-500/20 transition-all duration-300 mb-8">
                    <span class="text-sm font-medium text-blue-400 flex items-center gap-2 group-hover:scale-105 transition-transform">
                        <i class="fa-solid fa-location-dot"></i>
                        <span x-show="language === 'hu'">Találkozz könnyedén</span>
                        <span x-show="language === 'en'">Meet Effortlessly</span>
                    </span>
                </div>

                <!-- Hero Title -->
                <h1 class="text-4xl sm:text-6xl md:text-7xl font-bold tracking-tight mb-6">
                    <span x-show="language === 'hu'" 
                          class="bg-gradient-to-b from-white via-white to-white/40 bg-clip-text text-transparent">
                        Barátaid mindig csak<br/>egy kattintásnyira
                    </span>
                    <span x-show="language === 'en'"
                          class="bg-gradient-to-b from-white via-white to-white/40 bg-clip-text text-transparent">
                        Your Friends Are Just<br/>A Click Away
                    </span>
                </h1>

                <!-- Hero Description -->
                <p class="text-lg md:text-xl text-white/60 max-w-2xl mb-12">
                    <span x-show="language === 'hu'">
                        Valós idejű helymegosztás egyszerűen és biztonságosan. Találkozz barátaiddal stressz nélkül.
                    </span>
                    <span x-show="language === 'en'">
                        Real-time location sharing made simple and secure. Meet your friends without the stress.
                    </span>
                </p>

                <!-- Download Buttons -->
                <div class="flex flex-col sm:flex-row gap-4">
                    <!-- App Store -->
                    <a href="#" class="group relative">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur opacity-75 group-hover:opacity-100 transition duration-200"></div>
                        <div class="relative flex items-center gap-4 px-8 py-4 bg-[#0A0B0C] rounded-xl border border-white/10 hover:border-white/20 transition duration-200">
                            <i class="fa-brands fa-apple text-2xl group-hover:scale-110 transition duration-200"></i>
                            <div class="text-left">
                                <div class="text-xs text-white/60">Download on the</div>
                                <div class="font-medium">App Store</div>
                            </div>
                        </div>
                    </a>

                    <!-- Google Play -->
                    <a href="#" class="group relative">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl blur opacity-75 group-hover:opacity-100 transition duration-200"></div>
                        <div class="relative flex items-center gap-4 px-8 py-4 bg-[#0A0B0C] rounded-xl border border-white/10 hover:border-white/20 transition duration-200">
                            <i class="fa-brands fa-google-play text-2xl group-hover:scale-110 transition duration-200"></i>
                            <div class="text-left">
                                <div class="text-xs text-white/60">GET IT ON</div>
                                <div class="font-medium">Google Play</div>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Stats Section -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-20 w-full">
                    <!-- Active Users -->
                    <div class="p-6 bg-gray-800/50 backdrop-blur-xl rounded-xl border border-gray-700/50 hover:border-blue-500/50 transition duration-200 group">
                        <div class="flex items-start gap-4">
                            <div class="p-3 bg-blue-500/10 rounded-lg">
                                <i class="fa-solid fa-users text-blue-400 text-xl"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">1M+</div>
                                <div class="text-sm text-gray-400">
                                    <span x-show="language === 'hu'">Felhasználó</span>
                                    <span x-show="language === 'en'">Users</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Countries -->
                    <div class="p-6 bg-gray-800/50 backdrop-blur-xl rounded-xl border border-gray-700/50 hover:border-purple-500/50 transition duration-200 group">
                        <div class="flex items-start gap-4">
                            <div class="p-3 bg-purple-500/10 rounded-lg">
                                <i class="fa-solid fa-earth-europe text-purple-400 text-xl"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">150+</div>
                                <div class="text-sm text-gray-400">
                                    <span x-show="language === 'hu'">Ország</span>
                                    <span x-show="language === 'en'">Countries</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Shared Routes -->
                    <div class="p-6 bg-gray-800/50 backdrop-blur-xl rounded-xl border border-gray-700/50 hover:border-green-500/50 transition duration-200 group">
                        <div class="flex items-start gap-4">
                            <div class="p-3 bg-green-500/10 rounded-lg">
                                <i class="fa-solid fa-route text-green-400 text-xl"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">10M+</div>
                                <div class="text-sm text-gray-400">
                                    <span x-show="language === 'hu'">Megosztott út</span>
                                    <span x-show="language === 'en'">Shared Trips</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Rating -->
                    <div class="p-6 bg-gray-800/50 backdrop-blur-xl rounded-xl border border-gray-700/50 hover:border-yellow-500/50 transition duration-200 group">
                        <div class="flex items-start gap-4">
                            <div class="p-3 bg-yellow-500/10 rounded-lg">
                                <i class="fa-solid fa-star text-yellow-400 text-xl"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">4.9</div>
                                <div class="text-sm text-gray-400">
                                    <span x-show="language === 'hu'">Értékelés</span>
                                    <span x-show="language === 'en'">Rating</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <div id="features" class="py-20 border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    <span x-show="language === 'hu'">Minden ami kell a tökéletes találkozáshoz</span>
                    <span x-show="language === 'en'">Everything You Need for Perfect Meetups</span>
                </h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    <span x-show="language === 'hu'">Egyszerű, de hatékony funkciók, hogy mindig tudd, hol vannak a barátaid</span>
                    <span x-show="language === 'en'">Simple yet powerful features to always know where your friends are</span>
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature Cards -->
                <div class="group p-8 border border-gray-800 rounded-2xl bg-gradient-to-b from-gray-900 to-gray-900/50 hover:border-blue-500/50 transition-all">
                    <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-map-pin text-blue-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">
                        <span x-show="language === 'hu'">Precíz helymeghatározás</span>
                        <span x-show="language === 'en'">Precise Location</span>
                    </h3>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">GPS alapú követés</span>
                            <span x-show="language === 'en'">GPS-based tracking</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Méteres pontosság</span>
                            <span x-show="language === 'en'">Meter accuracy</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Valós idejű frissítés</span>
                            <span x-show="language === 'en'">Real-time updates</span>
                        </li>
                    </ul>
                </div>

                <div class="group p-8 border border-gray-800 rounded-2xl bg-gradient-to-b from-gray-900 to-gray-900/50 hover:border-purple-500/50 transition-all">
                    <div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-user-group text-purple-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">
                        <span x-show="language === 'hu'">Csoportos követés</span>
                        <span x-show="language === 'en'">Group Tracking</span>
                    </h3>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Korlátlan csoportméret</span>
                            <span x-show="language === 'en'">Unlimited group size</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Egyedi csoportbeállítások</span>
                            <span x-show="language === 'en'">Custom group settings</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Csoportos chat</span>
                            <span x-show="language === 'en'">Group chat</span>
                        </li>
                    </ul>
                </div>

                <div class="group p-8 border border-gray-800 rounded-2xl bg-gradient-to-b from-gray-900 to-gray-900/50 hover:border-green-500/50 transition-all">
                    <div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-shield-halved text-green-400 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">
                        <span x-show="language === 'hu'">Adatvédelem</span>
                        <span x-show="language === 'en'">Privacy</span>
                    </h3>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Végponti titkosítás</span>
                            <span x-show="language === 'en'">End-to-end encryption</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Időzített megosztás</span>
                            <span x-show="language === 'en'">Timed sharing</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-check text-green-400"></i>
                            <span x-show="language === 'hu'">Részletes jogosultságok</span>
                            <span x-show="language === 'en'">Detailed permissions</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Preview Section -->
    <div class="py-20">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
                <div class="space-y-8">
                    <h2 class="text-3xl md:text-4xl font-bold">
                        <span x-show="language === 'hu'">Egyszerű, mégis hatékony</span>
                        <span x-show="language === 'en'">Simple Yet Powerful</span>
                    </h2>
                    <div class="space-y-6">
                        <!-- Feature List -->
                        <div class="flex gap-4 p-4 bg-gray-800/30 rounded-xl border border-gray-800">
                            <div class="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-compass text-blue-400"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold mb-1">
                                    <span x-show="language === 'hu'">Intelligens Navigáció</span>
                                    <span x-show="language === 'en'">Smart Navigation</span>
                                </h3>
                                <p class="text-gray-400 text-sm">
                                    <span x-show="language === 'hu'">Automatikusan megmutatjuk a leggyorsabb utat barátaidhoz</span>
                                    <span x-show="language === 'en'">We automatically show the fastest route to your friends</span>
                                </p>
                            </div>
                        </div>

                        <div class="flex gap-4 p-4 bg-gray-800/30 rounded-xl border border-gray-800">
                            <div class="w-10 h-10 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-bell text-purple-400"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold mb-1">
                                    <span x-show="language === 'hu'">Okos Értesítések</span>
                                    <span x-show="language === 'en'">Smart Notifications</span>
                                </h3>
                                <p class="text-gray-400 text-sm">
                                    <span x-show="language === 'hu'">Értesítünk amikor barátaid a közelben vannak</span>
                                    <span x-show="language === 'en'">We notify you when friends are nearby</span>
                                </p>
                            </div>
                        </div>

                        <div class="flex gap-4 p-4 bg-gray-800/30 rounded-xl border border-gray-800">
                            <div class="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-battery-full text-green-400"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold mb-1">
                                    <span x-show="language === 'hu'">Akkumulátor Kímélő</span>
                                    <span x-show="language === 'en'">Battery Friendly</span>
                                </h3>
                                <p class="text-gray-400 text-sm">
                                    <span x-show="language === 'hu'">Optimalizált működés az akkumulátor kímélése érdekében</span>
                                    <span x-show="language === 'en'">Optimized operation to save battery life</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 blur-3xl"></div>
                    <img src="appshowcase.png" alt="App Interface" class="relative shadow-xl"/>
                </div>
            </div>
        </div>
    </div>

    <div class="py-20 border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    <span x-show="language === 'hu'">Találkozz bárhol, bármikor</span>
                    <span x-show="language === 'en'">Meet Anywhere, Anytime</span>
                </h2>
                <p class="text-gray-400">
                    <span x-show="language === 'hu'">A Spotsync minden helyzetben segít</span>
                    <span x-show="language === 'en'">Spotsync helps in every situation</span>
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Festivals -->
                <div class="group relative overflow-hidden rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 to-black/20 z-10"></div>
                    <img src="fesztival.jpg" alt="Festival" class="w-full h-[400px] object-cover group-hover:scale-105 transition-transform duration-500"/>
                    <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                                <span class="text-2xl">🎪</span>
                            </div>
                            <h3 class="text-xl font-semibold">
                                <span x-show="language === 'hu'">Fesztiválok</span>
                                <span x-show="language === 'en'">Festivals</span>
                            </h3>
                        </div>
                        <p class="text-gray-300">
                            <span x-show="language === 'hu'">Ne vessz el a Balaton Sound vagy a Sziget tömegében. Lásd pontosan merre vannak a barátaid, még a legnagyobb bulik közepette is.</span>
                            <span x-show="language === 'en'">Don't get lost in the crowd at Balaton Sound or Sziget Festival. See exactly where your friends are, even in the biggest parties.</span>
                        </p>
                    </div>
                </div>
        
                <!-- City Meetups -->
                <div class="group relative overflow-hidden rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 to-black/20 z-10"></div>
                    <img src="varos.png" alt="City" class="w-full h-[400px] object-cover group-hover:scale-105 transition-transform duration-500"/>
                    <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
                                <span class="text-2xl">🚇</span>
                            </div>
                            <h3 class="text-xl font-semibold">
                                <span x-show="language === 'hu'">Városi találkozók</span>
                                <span x-show="language === 'en'">City Meetups</span>
                            </h3>
                        </div>
                        <p class="text-gray-300">
                            <span x-show="language === 'hu'">Utazz nyugodtan tömegközlekedéssel, a barátaid látják pontosan mikor érsz oda. Nincs több felesleges várakozás.</span>
                            <span x-show="language === 'en'">Travel with ease by public transport, your friends can see exactly when you'll arrive. No more unnecessary waiting.</span>
                        </p>
                    </div>
                </div>
        
                <!-- Group Activities -->
                <div class="group relative overflow-hidden rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 to-black/20 z-10"></div>
                    <img src="kirandulas.jpg" alt="Group" class="w-full h-[400px] object-cover group-hover:scale-105 transition-transform duration-500"/>
                    <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                                <span class="text-2xl">🏃</span>
                            </div>
                            <h3 class="text-xl font-semibold">
                                <span x-show="language === 'hu'">Túrázás & Sport</span>
                                <span x-show="language === 'en'">Hiking & Sports</span>
                            </h3>
                        </div>
                        <p class="text-gray-300">
                            <span x-show="language === 'hu'">Túrázz biztonságban! Ha valaki letér az ösvényről vagy más úton halad, könnyedén egymásra találtok.</span>
                            <span x-show="language === 'en'">Hike safely! If someone takes a different path, you can easily find each other.</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Download CTA with Animation -->
    <div id="download" class="relative py-32 overflow-hidden">
        <!-- Content -->
        <div class="relative max-w-7xl mx-auto px-6">
            <div class="flex flex-col items-center text-center space-y-8">
                <div class="space-y-4 group">
                    <h2 class="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-b from-white to-white/60 bg-clip-text text-transparent group-hover:scale-[1.02] transition-transform duration-500">
                        <span x-show="language === 'hu'">Készen állsz?</span>
                        <span x-show="language === 'en'">Ready?</span>
                    </h2>
                    <p class="text-xl text-white/60">
                        <span x-show="language === 'hu'">Csatlakozz most és találd meg barátaidat</span>
                        <span x-show="language === 'en'">Join now and find your friends</span>
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row items-center gap-6 pt-8">
                    <a href="#" class="group relative">
                        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative flex items-center gap-4 px-8 py-4 bg-[#0A0B0C] rounded-xl border border-white/10 hover:border-white/20 transition duration-500">
                            <i class="fa-brands fa-apple text-2xl group-hover:scale-110 transition duration-500"></i>
                            <div class="text-left">
                                <div class="text-xs text-white/60">Download on the</div>
                                <div class="font-medium text-white">App Store</div>
                            </div>
                        </div>
                    </a>

                    <a href="#" class="group relative">
                        <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative flex items-center gap-4 px-8 py-4 bg-[#0A0B0C] rounded-xl border border-white/10 hover:border-white/20 transition duration-500">
                            <i class="fa-brands fa-google-play text-2xl group-hover:scale-110 transition duration-500"></i>
                            <div class="text-left">
                                <div class="text-xs text-white/60">GET IT ON</div>
                                <div class="font-medium text-white">Google Play</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer with subtle animations -->
    <footer class="relative border-t border-white/5">
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div>
        
        <div class="relative max-w-7xl mx-auto">
            <div class="px-6 py-16">
                <!-- Main Footer Content -->
                <div class="flex flex-col md:flex-row items-center justify-between gap-12">
                    <!-- Logo and Tagline -->
                    <div class="flex items-center gap-6 group">
                        <div class="relative">
                            <div class="absolute -inset-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur-lg opacity-0 group-hover:opacity-60 transition duration-500"></div>
                            <img src="https://cdn.spotsync.hu/brand/logo_white.png" alt="Logo" class="relative h-10 group-hover:scale-110 transition duration-500"/>
                        </div>
                        <div>
                            <div class="text-xl font-semibold">Spotsync</div>
                            <div class="text-white/60">
                                <span x-show="language === 'hu'">Barátaid mindig csak egy kattintásnyira</span>
                                <span x-show="language === 'en'">Your friends are just a click away</span>
                            </div>
                        </div>
                    </div>

                    <!-- Social Links -->
                    <div class="flex gap-6">
                        <a href="#" class="group relative">
                            <div class="absolute -inset-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur-lg opacity-0 group-hover:opacity-60 transition duration-500"></div>
                            <div class="relative w-10 h-10 flex items-center justify-center rounded-full bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition duration-500">
                                <i class="fa-brands fa-instagram text-xl group-hover:scale-110 transition duration-500"></i>
                            </div>
                        </a>
                        <a href="#" class="group relative">
                            <div class="absolute -inset-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur-lg opacity-0 group-hover:opacity-60 transition duration-500"></div>
                            <div class="relative w-10 h-10 flex items-center justify-center rounded-full bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition duration-500">
                                <i class="fa-brands fa-discord text-xl group-hover:scale-110 transition duration-500"></i>
                            </div>
                        </a>
                        <a href="#" class="group relative">
                            <div class="absolute -inset-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur-lg opacity-0 group-hover:opacity-60 transition duration-500"></div>
                            <div class="relative w-10 h-10 flex items-center justify-center rounded-full bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition duration-500">
                                <i class="fa-brands fa-facebook text-xl group-hover:scale-110 transition duration-500"></i>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Bottom Links -->
                <div class="mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-6">
                    <div class="text-white/40 text-sm">
                        <span x-show="language === 'hu'">&copy; 2024 Spotsync</span>
                        <span x-show="language === 'en'">&copy; 2024 Spotsync</span>
                    </div>
                    
                    <div class="flex gap-8">
                        <a href="#" class="text-white/60 hover:text-white transition duration-300">
                            <span x-show="language === 'hu'">Adatvédelem</span>
                            <span x-show="language === 'en'">Privacy</span>
                        </a>
                        <a href="#" class="text-white/60 hover:text-white transition duration-300">
                            <span x-show="language === 'hu'">Feltételek</span>
                            <span x-show="language === 'en'">Terms</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <style>
        @keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
            animation: blob 7s infinite;
        }
        .animation-delay-2000 {
            animation-delay: 2s;
        }
        .animation-delay-4000 {
            animation-delay: 4s;
        }
    </style>
</body>
</html>