<!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>


    <section class="py-20 border-t border-gray-800" x-data="{ activeFeature: null }">
        <div class="max-w-7xl mx-auto px-6">
            <!-- Enhanced Header -->
            <div class="space-y-4 group text-center mb-16">
                <h2 class="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-b from-white from-10% via-white via-50% to-white/40 to-90% bg-clip-text text-transparent group-hover:scale-[1.02] transition-transform duration-500">
                    <span x-show="language === 'hu'">Többet szeretnél?</span>
                    <span x-show="language === 'en'">Want More?</span>
                </h2>
                <p class="text-xl text-white/60">
                    <span x-show="language === 'hu'">Fedezd fel funkcióinkat és használd ki a legtöbbet</span>
                    <span x-show="language === 'en'">Explore our features and make the most of it</span>
                </p>
            </div>

            <!-- Features Display -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Smart Navigation -->
                <div class="relative group" 
                    @mouseenter="activeFeature = 'navigation'" 
                    @mouseleave="activeFeature = null"
                    :class="{ 'lg:scale-105 z-10': activeFeature === 'navigation' }">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-blue-400/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    <div class="relative h-full p-8 rounded-2xl bg-gray-900/50 border border-gray-800 group-hover:border-blue-500/50 backdrop-blur-sm transition-all duration-500">
                        <!-- Icon -->
                        <div class="mb-8 relative">
                            <div class="absolute inset-0 bg-blue-500/20 rounded-xl blur-xl transition-opacity duration-500 opacity-0 group-hover:opacity-100"></div>
                            <div class="relative w-16 h-16 bg-blue-500/10 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-solid fa-compass text-blue-400 text-2xl"></i>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="space-y-4">
                            <h3 class="text-xl font-semibold">
                                <span x-show="language === 'hu'">Intelligens Navigáció</span>
                                <span x-show="language === 'en'">Smart Navigation</span>
                            </h3>
                            <p class="text-gray-400 transition-all duration-300 ease-in-out"
                            :class="{ 'line-clamp-3': activeFeature !== 'navigation' }">
                                <span x-show="language === 'hu'">Automatikusan megmutatjuk a leggyorsabb utat barátaidhoz. Valós idejű frissítésekkel és forgalmi információkkal ellátva, hogy mindig pontosan tudhasd, mikor érkezel.</span>
                                <span x-show="language === 'en'">We automatically show the fastest route to your friends. With real-time updates and traffic information so you always know exactly when you'll arrive.</span>
                            </p>

                            <!-- Feature List -->
                            <div class="overflow-hidden transition-all duration-500"
                                :style="activeFeature === 'navigation' ? 'max-height: 200px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                                <ul class="space-y-3 pt-4 border-t border-gray-800">
                                    <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ések</span>
                                        <span x-show="language === 'en'">Real-time updates</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Forgalmi információk</span>
                                        <span x-show="language === 'en'">Traffic information</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Alternatív útvonalak</span>
                                        <span x-show="language === 'en'">Alternative routes</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Learn More Button -->
                        <div class="absolute bottom-8 left-8 right-8 overflow-hidden transition-all duration-500"
                            :style="activeFeature === 'navigation' ? 'max-height: 50px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                            <button class="w-full py-3 px-4 rounded-xl bg-blue-500/10 hover:bg-blue-500/20 backdrop-blur-sm border border-blue-500/20 transition-all duration-300 flex items-center justify-center gap-2 group">
                                <span x-show="language === 'hu'">Részletek</span>
                                <span x-show="language === 'en'">Learn More</span>
                                <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Smart Notifications -->
                <div class="relative group" 
                    @mouseenter="activeFeature = 'notifications'" 
                    @mouseleave="activeFeature = null"
                    :class="{ 'lg:scale-105 z-10': activeFeature === 'notifications' }">
                    <!-- Similar structure with purple theme -->
                    <div class="absolute inset-0 bg-gradient-to-r from-purple-600/20 to-purple-400/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    <div class="relative h-full p-8 rounded-2xl bg-gray-900/50 border border-gray-800 group-hover:border-purple-500/50 backdrop-blur-sm transition-all duration-500">
                        <!-- Icon -->
                        <div class="mb-8 relative">
                            <div class="absolute inset-0 bg-purple-500/20 rounded-xl blur-xl transition-opacity duration-500 opacity-0 group-hover:opacity-100"></div>
                            <div class="relative w-16 h-16 bg-purple-500/10 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-solid fa-bell text-purple-400 text-2xl"></i>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="space-y-4">
                            <h3 class="text-xl font-semibold">
                                <span x-show="language === 'hu'">Okos Értesítések</span>
                                <span x-show="language === 'en'">Smart Notifications</span>
                            </h3>
                            <p class="text-gray-400 transition-all duration-300 ease-in-out"
                            :class="{ 'line-clamp-3': activeFeature !== 'notifications' }">
                                <span x-show="language === 'hu'">Személyre szabható értesítések, amelyekkel mindig naprakész információid lesznek barátaid helyzetéről. Állítsd be a távolság alapú riasztásokat.</span>
                                <span x-show="language === 'en'">Customizable notifications that keep you up to date with your friends' locations. Set up distance-based alerts.</span>
                            </p>

                            <!-- Feature List -->
                            <div class="overflow-hidden transition-all duration-500"
                                :style="activeFeature === 'notifications' ? 'max-height: 200px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                                <ul class="space-y-3 pt-4 border-t border-gray-800">
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Távolság alapú riasztások</span>
                                        <span x-show="language === 'en'">Distance-based alerts</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Személyre szabható értesítések</span>
                                        <span x-show="language === 'en'">Customizable notifications</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 értesítések</span>
                                        <span x-show="language === 'en'">Group notifications</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Learn More Button -->
                        <div class="absolute bottom-8 left-8 right-8 overflow-hidden transition-all duration-500"
                            :style="activeFeature === 'notifications' ? 'max-height: 50px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                            <button class="w-full py-3 px-4 rounded-xl bg-purple-500/10 hover:bg-purple-500/20 backdrop-blur-sm border border-purple-500/20 transition-all duration-300 flex items-center justify-center gap-2 group">
                                <span x-show="language === 'hu'">Részletek</span>
                                <span x-show="language === 'en'">Learn More</span>
                                <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Battery Friendly -->
                <div class="relative group" 
                    @mouseenter="activeFeature = 'battery'" 
                    @mouseleave="activeFeature = null"
                    :class="{ 'lg:scale-105 z-10': activeFeature === 'battery' }">
                    <!-- Similar structure with green theme -->
                    <div class="absolute inset-0 bg-gradient-to-r from-green-600/20 to-green-400/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    <div class="relative h-full p-8 rounded-2xl bg-gray-900/50 border border-gray-800 group-hover:border-green-500/50 backdrop-blur-sm transition-all duration-500">
                        <!-- Icon -->
                        <div class="mb-8 relative">
                            <div class="absolute inset-0 bg-green-500/20 rounded-xl blur-xl transition-opacity duration-500 opacity-0 group-hover:opacity-100"></div>
                            <div class="relative w-16 h-16 bg-green-500/10 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                <i class="fa-solid fa-battery-full text-green-400 text-2xl"></i>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="space-y-4">
                            <h3 class="text-xl font-semibold">
                                <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 transition-all duration-300 ease-in-out"
                            :class="{ 'line-clamp-3': activeFeature !== 'battery' }">
                                <span x-show="language === 'hu'">Optimalizált működés az akkumulátor kímélése érdekében. Használd egész nap anélkül, hogy az akkumulátorod lemerülne.</span>
                                <span x-show="language === 'en'">Optimized operation to save battery life. Use it all day without draining your battery.</span>
                            </p>

                            <!-- Feature List -->
                            <div class="overflow-hidden transition-all duration-500"
                                :style="activeFeature === 'battery' ? 'max-height: 200px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                                <ul class="space-y-3 pt-4 border-t border-gray-800">
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Intelligens GPS használat</span>
                                        <span x-show="language === 'en'">Smart GPS usage</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Adaptív frissítés</span>
                                        <span x-show="language === 'en'">Adaptive refresh</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-green-400"></i>
                                        <span x-show="language === 'hu'">Energiatakarékos mód</span>
                                        <span x-show="language === 'en'">Power saving mode</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Learn More Button -->
                        <div class="absolute bottom-8 left-8 right-8 overflow-hidden transition-all duration-500"
                            :style="activeFeature === 'battery' ? 'max-height: 50px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                            <button class="w-full py-3 px-4 rounded-xl bg-green-500/10 hover:bg-green-500/20 backdrop-blur-sm border border-green-500/20 transition-all duration-300 flex items-center justify-center gap-2 group">
                                <span x-show="language === 'hu'">Részletek</span>
                                <span x-show="language === 'en'">Learn More</span>
                                <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Activities Section -->
    <section class="py-20 border-t border-gray-800" x-data="{ activeCard: null }">
        <div class="max-w-7xl mx-auto px-6">
            <!-- Enhanced Header -->
            <div class="space-y-4 group text-center mb-16">
                <h2 class="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-b from-white from-10% via-white via-50% to-white/40 to-90% bg-clip-text text-transparent group-hover:scale-[1.02] transition-transform duration-500">
                    <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-xl text-white/60">
                    <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>

            <!-- Interactive Cards Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 perspective-1000">
                <!-- Festivals Card -->
                <div class="group relative h-[400px] cursor-pointer hover:z-10"
                    @mouseenter="activeCard = 'festival'"
                    @mouseleave="activeCard = null">
                    <!-- Card Container with 3D Effect -->
                    <div class="absolute inset-0 rounded-2xl transition-all duration-500"
                        :class="{ 'md:scale-110': activeCard === 'festival' }">
                        <!-- Image Container -->
                        <div class="absolute inset-0 rounded-2xl overflow-hidden">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent z-10 transition-opacity duration-500"
                                :class="{ 'opacity-90': activeCard === 'festival', 'opacity-70': activeCard !== 'festival' }"></div>
                            <img src="fesztival.jpg" alt="Festival" 
                                class="w-full h-full object-cover transition-transform duration-700 scale-105"
                                :class="{ 'scale-125': activeCard === 'festival' }"/>
                        </div>

                        <!-- Content Overlay -->
                        <div class="absolute inset-0 p-8 z-20 flex flex-col justify-end transition-transform duration-500"
                            :class="{ 'translate-y-0': activeCard === 'festival', 'translate-y-4': activeCard !== 'festival' }">
                            <!-- Icon and Title -->
                            <div class="flex items-center gap-4 mb-4">
                                <div class="w-14 h-14 rounded-xl bg-blue-500/20 backdrop-blur-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                    <span class="text-2xl">🎪</span>
                                </div>
                                <h3 class="text-2xl font-bold bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">
                                    <span x-show="language === 'hu'">Fesztiválok</span>
                                    <span x-show="language === 'en'">Festivals</span>
                                </h3>
                            </div>

                            <!-- Description -->
                            <div class="space-y-4">
                                <p class="text-white/90 leading-relaxed"
                                :class="{ 'opacity-100': activeCard === 'festival', 'opacity-70 line-clamp-2': activeCard !== 'festival' }">
                                    <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>

                                <!-- Feature List (Only visible on hover) -->
                                <ul class="space-y-2 text-white/70 overflow-hidden transition-all duration-500"
                                    :class="{ 'max-h-40 opacity-100': activeCard === 'festival', 'max-h-0 opacity-0': activeCard !== 'festival' }">
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-blue-400"></i>
                                        <span x-show="language === 'hu'">Valós idejű követés</span>
                                        <span x-show="language === 'en'">Real-time tracking</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-blue-400"></i>
                                        <span x-show="language === 'hu'">Találkozópont kijelölés</span>
                                        <span x-show="language === 'en'">Meeting point marking</span>
                                    </li>
                                    <li class="flex items-center gap-2">
                                        <i class="fa-solid fa-check text-blue-400"></i>
                                        <span x-show="language === 'hu'">Offline térképek</span>
                                        <span x-show="language === 'en'">Offline maps</span>
                                    </li>
                                </ul>

                                <!-- Learn More Button -->
                                <div class="overflow-hidden transition-all duration-500"
                                    :class="{ 'max-h-20 opacity-100': activeCard === 'festival', 'max-h-0 opacity-0': activeCard !== 'festival' }">
                                    <button class="w-full py-3 px-4 rounded-xl bg-blue-500/10 hover:bg-blue-500/20 backdrop-blur-sm border border-blue-500/20 transition-all duration-300 flex items-center justify-center gap-2 group">
                                        <span x-show="language === 'hu'">Tudj meg többet</span>
                                        <span x-show="language === 'en'">Learn More</span>
                                        <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Decorative Elements -->
                        <div class="absolute top-6 right-6 flex items-center gap-2 text-white/40 overflow-hidden transition-all duration-500"
                            :class="{ 'translate-y-0 opacity-100': activeCard === 'festival', '-translate-y-4 opacity-0': activeCard !== 'festival' }">
                            <i class="fa-solid fa-arrows-up-down text-sm"></i>
                            <span class="text-xs">Scroll for more</span>
                        </div>
                    </div>

                    <!-- Background Glow -->
                    <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-[1rem] opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500 -z-10"></div>
                </div>

                <!-- City Meetups Card -->
                <div class="group relative h-[400px] cursor-pointer hover:z-10"
                @mouseenter="activeCard = 'city'"
                @mouseleave="activeCard = null">
                <!-- Card Container with 3D Effect -->
                <div class="absolute inset-0 rounded-2xl transition-all duration-500"
                    :class="{ 'md:scale-110': activeCard === 'city' }">
                <!-- Image Container -->
                <div class="absolute inset-0 rounded-2xl overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent z-10 transition-opacity duration-500"
                            :class="{ 'opacity-90': activeCard === 'city', 'opacity-70': activeCard !== 'city' }"></div>
                    <img src="varos.png" alt="City" 
                            class="w-full h-full object-cover transition-transform duration-700 scale-105"
                            :class="{ 'scale-125': activeCard === 'city' }"/>
                </div>

                <!-- Content Overlay -->
                <div class="absolute inset-0 p-8 z-20 flex flex-col justify-end transition-transform duration-500"
                        :class="{ 'translate-y-0': activeCard === 'city', 'translate-y-4': activeCard !== 'city' }">
                    <!-- Icon and Title -->
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-14 h-14 rounded-xl bg-purple-500/20 backdrop-blur-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                            <span class="text-2xl">🚇</span>
                        </div>
                        <h3 class="text-2xl font-bold bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">
                            <span x-show="language === 'hu'">Városi találkozók</span>
                            <span x-show="language === 'en'">City Meetups</span>
                        </h3>
                    </div>

                    <!-- Description -->
                    <div class="space-y-4">
                        <p class="text-white/90 leading-relaxed"
                            :class="{ 'opacity-100': activeCard === 'city', 'opacity-70 line-clamp-2': activeCard !== 'city' }">
                            <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>

                        <!-- Feature List -->
                        <ul class="space-y-2 text-white/70 overflow-hidden transition-all duration-500"
                            :class="{ 'max-h-40 opacity-100': activeCard === 'city', 'max-h-0 opacity-0': activeCard !== 'city' }">
                            <li class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-purple-400"></i>
                                <span x-show="language === 'hu'">Valós idejű érkezési idő</span>
                                <span x-show="language === 'en'">Real-time ETA</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-purple-400"></i>
                                <span x-show="language === 'hu'">Tömegközlekedési információk</span>
                                <span x-show="language === 'en'">Public transport info</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-purple-400"></i>
                                <span x-show="language === 'hu'">Automatikus értesítések</span>
                                <span x-show="language === 'en'">Automatic notifications</span>
                            </li>
                        </ul>

                        <!-- Learn More Button -->
                        <div class="overflow-hidden transition-all duration-500"
                                :class="{ 'max-h-20 opacity-100': activeCard === 'city', 'max-h-0 opacity-0': activeCard !== 'city' }">
                            <button class="w-full py-3 px-4 rounded-xl bg-purple-500/10 hover:bg-purple-500/20 backdrop-blur-sm border border-purple-500/20 transition-all duration-300 flex items-center justify-center gap-2 group">
                                <span x-show="language === 'hu'">Tudj meg többet</span>
                                <span x-show="language === 'en'">Learn More</span>
                                <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Decorative Elements -->
                <div class="absolute top-6 right-6 flex items-center gap-2 text-white/40 overflow-hidden transition-all duration-500"
                        :class="{ 'translate-y-0 opacity-100': activeCard === 'city', '-translate-y-4 opacity-0': activeCard !== 'city' }">
                    <i class="fa-solid fa-arrows-up-down text-sm"></i>
                    <span class="text-xs">Scroll for more</span>
                </div>
                </div>

                <!-- Background Glow -->
                <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-[1rem] opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500 -z-10"></div>
                </div>

                <!-- Hiking Card -->
                <div class="group relative h-[400px] cursor-pointer hover:z-10"
                @mouseenter="activeCard = 'hiking'"
                @mouseleave="activeCard = null">
                <!-- Card Container with 3D Effect -->
                <div class="absolute inset-0 rounded-2xl transition-all duration-500"
                    :class="{ 'md:scale-110': activeCard === 'hiking' }">
                <!-- Image Container -->
                <div class="absolute inset-0 rounded-2xl overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent z-10 transition-opacity duration-500"
                            :class="{ 'opacity-90': activeCard === 'hiking', 'opacity-70': activeCard !== 'hiking' }"></div>
                    <img src="kirandulas.jpg" alt="Hiking" 
                            class="w-full h-full object-cover transition-transform duration-700 scale-105"
                            :class="{ 'scale-125': activeCard === 'hiking' }"/>
                </div>

                <!-- Content Overlay -->
                <div class="absolute inset-0 p-8 z-20 flex flex-col justify-end transition-transform duration-500"
                        :class="{ 'translate-y-0': activeCard === 'hiking', 'translate-y-4': activeCard !== 'hiking' }">
                    <!-- Icon and Title -->
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-14 h-14 rounded-xl bg-green-500/20 backdrop-blur-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                            <span class="text-2xl">🏃</span>
                        </div>
                        <h3 class="text-2xl font-bold bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">
                            <span x-show="language === 'hu'">Túrázás & Sport</span>
                            <span x-show="language === 'en'">Hiking & Sports</span>
                        </h3>
                    </div>

                    <!-- Description -->
                    <div class="space-y-4">
                        <p class="text-white/90 leading-relaxed"
                            :class="{ 'opacity-100': activeCard === 'hiking', 'opacity-70 line-clamp-2': activeCard !== 'hiking' }">
                            <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>

                        <!-- Feature List -->
                        <ul class="space-y-2 text-white/70 overflow-hidden transition-all duration-500"
                            :class="{ 'max-h-40 opacity-100': activeCard === 'hiking', 'max-h-0 opacity-0': activeCard !== 'hiking' }">
                            <li class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span x-show="language === 'hu'">Offline térképek</span>
                                <span x-show="language === 'en'">Offline maps</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span x-show="language === 'hu'">SOS jelzés</span>
                                <span x-show="language === 'en'">SOS signal</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span x-show="language === 'hu'">Útvonal követés</span>
                                <span x-show="language === 'en'">Route tracking</span>
                            </li>
                        </ul>

                        <!-- Learn More Button -->
                        <div class="overflow-hidden transition-all duration-500"
                                :class="{ 'max-h-20 opacity-100': activeCard === 'hiking', 'max-h-0 opacity-0': activeCard !== 'hiking' }">
                            <button class="w-full py-3 px-4 rounded-xl bg-green-500/10 hover:bg-green-500/20 backdrop-blur-sm border border-green-500/20 transition-all duration-300 flex items-center justify-center gap-2 group">
                                <span x-show="language === 'hu'">Tudj meg többet</span>
                                <span x-show="language === 'en'">Learn More</span>
                                <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Decorative Elements -->
                <div class="absolute top-6 right-6 flex items-center gap-2 text-white/40 overflow-hidden transition-all duration-500"
                        :class="{ 'translate-y-0 opacity-100': activeCard === 'hiking', '-translate-y-4 opacity-0': activeCard !== 'hiking' }">
                    <i class="fa-solid fa-arrows-up-down text-sm"></i>
                    <span class="text-xs">Scroll for more</span>
                </div>
                </div>

                <!-- Background Glow -->
                <div class="absolute -inset-1 bg-gradient-to-r from-green-600 to-emerald-600 rounded-[1rem] opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500 -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <div class="py-20 overflow-hidden">
        <div class="max-w-7xl mx-auto px-6">
            <!-- Standardized Header -->
            <div class="space-y-4 group text-center mb-16">
                <h2 class="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-b from-white from-10% via-white via-50% to-white/40 to-90% bg-clip-text text-transparent group-hover:scale-[1.02] transition-transform duration-500">
                    <span x-show="language === 'hu'">Egyszerű, mégis hatékony</span>
                    <span x-show="language === 'en'">Simple Yet Powerful</span>
                </h2>
                <p class="text-xl text-white/60">
                    <span x-show="language === 'hu'">Ismerkedj meg a Spotsync funkcióival közelebbről</span>
                    <span x-show="language === 'en'">Get to know Spotsync's features up close</span>
                </p>
            </div>

            <!-- Interactive Feature Display -->
            <div class="relative">
                <!-- Features and App Preview -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
                    <!-- Left Column - Features -->
                    <div class="relative z-10 space-y-6" x-data="{ activeFeature: 'navigation' }">
                        <!-- Smart Navigation -->
                        <div @mouseover="activeFeature = 'navigation'" @click="activeFeature = 'navigation'"
                            :class="{ 'scale-105 border-blue-500/50 bg-blue-500/5': activeFeature === 'navigation' }"
                            class="group p-6 bg-gray-800/30 backdrop-blur-xl rounded-2xl border border-gray-800 hover:border-blue-500/50 transition-all duration-500 cursor-pointer">
                            <div class="flex gap-6">
                                <div class="relative">
                                    <div class="absolute inset-0 bg-blue-500/20 rounded-xl blur-xl group-hover:opacity-100 opacity-0 transition-opacity duration-500"></div>
                                    <div class="relative w-14 h-14 bg-blue-500/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-500">
                                        <i class="fa-solid fa-compass text-blue-400 text-2xl"></i>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <h3 class="font-semibold text-xl">
                                        <span x-show="language === 'hu'">Intelligens Navigáció</span>
                                        <span x-show="language === 'en'">Smart Navigation</span>
                                    </h3>
                                    <p class="text-gray-400 leading-relaxed">
                                        <span x-show="language === 'hu'">Automatikusan megmutatjuk a leggyorsabb utat barátaidhoz, nincs több találgatás vagy várakozás. Valós idejű frissítésekkel.</span>
                                        <span x-show="language === 'en'">We automatically show the fastest route to your friends with no more guessing or waiting. With real-time updates.</span>
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Feature Details (appears on hover/active) -->
                            <div class="mt-4 overflow-hidden transition-all duration-500"
                                :class="activeFeature === 'navigation' ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'">
                                <div class="pt-4 border-t border-gray-700/50">
                                    <ul class="space-y-2 text-sm 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'">Valós idejű közlekedési információk</span>
                                            <span x-show="language === 'en'">Real-time traffic information</span>
                                        </li>
                                        <li class="flex items-center gap-2">
                                            <i class="fa-solid fa-check text-green-400"></i>
                                            <span x-show="language === 'hu'">Alternatív útvonalak</span>
                                            <span x-show="language === 'en'">Alternative routes</span>
                                        </li>
                                        <li class="flex items-center gap-2">
                                            <i class="fa-solid fa-check text-green-400"></i>
                                            <span x-show="language === 'hu'">Érkezési idő becslés</span>
                                            <span x-show="language === 'en'">ETA prediction</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Smart Notifications -->
                        <div @mouseover="activeFeature = 'notifications'" @click="activeFeature = 'notifications'"
                            :class="{ 'scale-105 border-purple-500/50 bg-purple-500/5': activeFeature === 'notifications' }"
                            class="group p-6 bg-gray-800/30 backdrop-blur-xl rounded-2xl border border-gray-800 hover:border-purple-500/50 transition-all duration-500 cursor-pointer">
                            <div class="flex gap-6">
                                <div class="relative">
                                    <div class="absolute inset-0 bg-purple-500/20 rounded-xl blur-xl group-hover:opacity-100 opacity-0 transition-opacity duration-500"></div>
                                    <div class="relative w-14 h-14 bg-purple-500/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-500">
                                        <i class="fa-solid fa-bell text-purple-400 text-2xl"></i>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <h3 class="font-semibold text-xl">
                                        <span x-show="language === 'hu'">Okos Értesítések</span>
                                        <span x-show="language === 'en'">Smart Notifications</span>
                                    </h3>
                                    <p class="text-gray-400 leading-relaxed">
                                        <span x-show="language === 'hu'">Személyre szabható értesítések, amelyek mindig naprakészen tartanak a barátaid helyzetével kapcsolatban.</span>
                                        <span x-show="language === 'en'">Customizable notifications that keep you up to date with your friends' locations.</span>
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Feature Details -->
                            <div class="mt-4 overflow-hidden transition-all duration-500"
                                :class="activeFeature === 'notifications' ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'">
                                <div class="pt-4 border-t border-gray-700/50">
                                    <ul class="space-y-2 text-sm 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'">Távolság alapú riasztások</span>
                                            <span x-show="language === 'en'">Distance-based alerts</span>
                                        </li>
                                        <li class="flex items-center gap-2">
                                            <i class="fa-solid fa-check text-green-400"></i>
                                            <span x-show="language === 'hu'">Testreszabható értesítések</span>
                                            <span x-show="language === 'en'">Customizable notifications</span>
                                        </li>
                                        <li class="flex items-center gap-2">
                                            <i class="fa-solid fa-check text-green-400"></i>
                                            <span x-show="language === 'hu'">Intelligens riasztási rendszer</span>
                                            <span x-show="language === 'en'">Smart alert system</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Battery Friendly -->
                        <div @mouseover="activeFeature = 'battery'" @click="activeFeature = 'battery'"
                            :class="{ 'scale-105 border-green-500/50 bg-green-500/5': activeFeature === 'battery' }"
                            class="group p-6 bg-gray-800/30 backdrop-blur-xl rounded-2xl border border-gray-800 hover:border-green-500/50 transition-all duration-500 cursor-pointer">
                            <div class="flex gap-6">
                                <div class="relative">
                                    <div class="absolute inset-0 bg-green-500/20 rounded-xl blur-xl group-hover:opacity-100 opacity-0 transition-opacity duration-500"></div>
                                    <div class="relative w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-500">
                                        <i class="fa-solid fa-battery-full text-green-400 text-2xl"></i>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <h3 class="font-semibold text-xl">
                                        <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 leading-relaxed">
                                        <span x-show="language === 'hu'">Optimalizált működés az akkumulátor kímélése érdekében, hogy egész nap használhasd az alkalmazást.</span>
                                        <span x-show="language === 'en'">Optimized operation to save battery life so you can use the app all day long.</span>
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Feature Details -->
                            <div class="mt-4 overflow-hidden transition-all duration-500"
                                :class="activeFeature === 'battery' ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'">
                                <div class="pt-4 border-t border-gray-700/50">
                                    <ul class="space-y-2 text-sm 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'">Intelligens GPS használat</span>
                                            <span x-show="language === 'en'">Smart GPS usage</span>
                                        </li>
                                        <li class="flex items-center gap-2">
                                            <i class="fa-solid fa-check text-green-400"></i>
                                            <span x-show="language === 'hu'">Adaptív frissítési gyakoriság</span>
                                            <span x-show="language === 'en'">Adaptive refresh rate</span>
                                        </li>
                                        <li class="flex items-center gap-2">
                                            <i class="fa-solid fa-check text-green-400"></i>
                                            <span x-show="language === 'hu'">Energiatakarékos üzemmód</span>
                                            <span x-show="language === 'en'">Power saving mode</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column - App Preview -->
                    <div class="relative lg:h-[600px] flex items-center justify-center">
                        <!-- Animated Background -->
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 blur-3xl transition-all duration-500"
                            :class="{
                                'from-blue-500/20 to-blue-500/5': activeFeature === 'navigation',
                                'from-purple-500/20 to-purple-500/5': activeFeature === 'notifications',
                                'from-green-500/20 to-green-500/5': activeFeature === 'battery'
                            }">
                        </div>
                        
                        <!-- App Screenshot -->
                        <div class="relative group">
                            <div class="absolute -inset-1 bg-gradient-to-r from-blue-600/50 to-purple-600/50 rounded-[2.5rem] blur-xl opacity-0 group-hover:opacity-60 transition-all duration-500"></div>
                            <img src="appshowcase.png" alt="App Interface" 
                                class="relative w-full max-w-[300px] rounded-[2rem] shadow-2xl transition-all duration-500 group-hover:scale-105"
                                :class="{
                                    'rotate-1': activeFeature === 'navigation',
                                    '-rotate-1': activeFeature === 'notifications',
                                    'rotate-0': activeFeature === 'battery'
                                }"/>
                        </div>
                    </div>
                </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>

    <!-- <div id="download" class="relative py-32 overflow-hidden">
        <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 from-10% via-white via-50% to-white/40 to-90% 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> -->

    <section class="py-20 border-t border-gray-800" id="pricing">
        <div class="max-w-7xl mx-auto px-6">
            <div class="space-y-4 group text-center mb-5">
                <h2 class="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-b from-white from-10% via-white via-50% to-white/40 to-90% bg-clip-text text-transparent group-hover:scale-[1.02] transition-transform duration-500">
                    <span x-show="language === 'hu'">Válassz csomagot</span>
                    <span x-show="language === 'en'">Choose a Plan</span>
                </h2>
                <p class="text-xl text-white/60">
                    <span x-show="language === 'hu'">Találd meg a számodra megfelelő csomagot</span>
                    <span x-show="language === 'en'">Find the perfect plan for you</span>
                </p>
            </div>
    
            <!-- Pricing Cards with Blur Overlay -->
            <div class="relative grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                <!-- Blur Overlay -->
                <div class="absolute inset-0 backdrop-blur-md z-10 flex items-center justify-center bg-black/40">
                    <div class="text-center p-8 backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10">
                        <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 mb-4">
                            <span class="text-sm font-medium text-blue-400">Coming Soon</span>
                        </div>
                        <div class="text-2xl font-bold mb-2">
                            <span x-show="language === 'hu'">Hamarosan</span>
                            <span x-show="language === 'en'">Coming Soon</span>
                        </div>
                        <p class="text-gray-400">
                            <span x-show="language === 'hu'">Az árak hamarosan elérhetőek lesznek</span>
                            <span x-show="language === 'en'">Pricing will be available soon</span>
                        </p>
                    </div>
                </div>
    
                <!-- Basic Plan -->
                <div class="group p-8 rounded-2xl border border-white/10 bg-gradient-to-b from-gray-900 to-gray-900/50 hover:border-blue-500/50 transition-all relative overflow-hidden">
                    <!-- Gradient Background -->
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    
                    <div class="relative">
                        <div class="flex items-center gap-4 mb-6">
                            <div class="p-3 bg-blue-500/10 rounded-xl">
                                <i class="fa-solid fa-rocket text-blue-400 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">Basic</h3>
                                <div class="text-3xl font-bold">$9.99<span class="text-lg text-gray-400">/mo</span></div>
                            </div>
                        </div>
                        
                        <ul class="space-y-4 mb-8">
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Feature 1</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Feature 2</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Feature 3</span>
                            </li>
                        </ul>
                    </div>
                </div>
    
                <!-- Pro Plan -->
                <div class="group p-8 rounded-2xl border border-white/10 bg-gradient-to-b from-gray-900 to-gray-900/50 hover:border-purple-500/50 transition-all relative overflow-hidden">
                    <!-- Gradient Background -->
                    <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    
                    <div class="relative">
                        <!-- Popular Badge -->
                        <div class="absolute -top-8 -right-8 w-32 h-32 overflow-hidden">
                            <div class="absolute top-0 left-0 w-8 h-32 bg-purple-500/20 transform rotate-45 translate-x-12"></div>
                        </div>
    
                        <div class="flex items-center gap-4 mb-6">
                            <div class="p-3 bg-purple-500/10 rounded-xl">
                                <i class="fa-solid fa-crown text-purple-400 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">Pro</h3>
                                <div class="text-3xl font-bold">$19.99<span class="text-lg text-gray-400">/mo</span></div>
                            </div>
                        </div>
                        
                        <ul class="space-y-4 mb-8">
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Everything in Basic</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Pro Feature 1</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Pro Feature 2</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <i class="fa-solid fa-check text-green-400"></i>
                                <span>Pro Feature 3</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-32 overflow-hidden" id="beta">
        <div class="relative max-w-7xl mx-auto px-6">
            <div class="space-y-4 group text-center mb-5">
                <h2 class="text-5xl md:text-6xl font-bold tracking-tight bg-gradient-to-b from-white from-10% via-white via-50% to-white/40 to-90% bg-clip-text text-transparent group-hover:scale-[1.02] transition-transform duration-500">
                    <span x-show="language === 'hu'">Segítenél nekünk?</span>
                    <span x-show="language === 'en'">Want to Help Us?</span>
                </h2>
                <p class="text-xl text-white/60">
                    <span x-show="language === 'hu'">Csatlakozz a béta programhoz és formáld velünk a jövőt</span>
                    <span x-show="language === 'en'">Join the beta program and shape the future with us</span>
                </p>
            </div>
    
            <!-- Beta Application Form -->
            <div class="max-w-2xl mx-auto">
                <form x-data="{ /* your x-data here */ }" class="space-y-8">
                    <div class="backdrop-blur-xl bg-white/5 p-8 rounded-2xl border border-white/10 space-y-6">
                        <!-- Name and Email -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                    <span x-show="language === 'hu'">Teljes Név</span>
                                    <span x-show="language === 'en'">Full Name</span>
                                    <span class="text-red-400">*</span>
                                </label>
                                <input type="text" required
                                       class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"/>
                            </div>
                            <div>
                                <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                    <span>Email</span>
                                    <span class="text-red-400">*</span>
                                </label>
                                <input type="email" required
                                       class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"/>
                            </div>
                        </div>
    
                        <!-- Phone and Reason -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                    <span x-show="language === 'hu'">Telefonszám</span>
                                    <span x-show="language === 'en'">Phone Number</span>
                                    <span class="text-gray-500 text-xs">
                                        (<span x-show="language === 'hu'">opcionális</span>
                                        <span x-show="language === 'en'">optional</span>)
                                    </span>
                                </label>
                                <input type="tel"
                                       class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"/>
                            </div>
                            <div>
                                <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                    <span x-show="language === 'hu'">Miért szeretnél csatlakozni?</span>
                                    <span x-show="language === 'en'">Why do you want to join?</span>
                                    <span class="text-red-400">*</span>
                                </label>
                                <input type="text" required
                                       class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"/>
                            </div>
                        </div>
    
                        <!-- Experience -->
                        <div>
                            <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                <span x-show="language === 'hu'">Van tapasztalatod hasonló alkalmazásokkal?</span>
                                <span x-show="language === 'en'">Do you have experience with similar apps?</span>
                                <span class="text-gray-500 text-xs">
                                    (<span x-show="language === 'hu'">opcionális</span>
                                    <span x-show="language === 'en'">optional</span>)
                                </span>
                            </label>
                            <textarea rows="3"
                                     class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"></textarea>
                        </div>
    
                        <!-- How would you use -->
                        <div>
                            <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                <span x-show="language === 'hu'">Hogyan használnád a Spotsyncet?</span>
                                <span x-show="language === 'en'">How would you use Spotsync?</span>
                                <span class="text-red-400">*</span>
                            </label>
                            <textarea required rows="3"
                                     class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"></textarea>
                        </div>
                    </div>
    
                    <!-- Submit Button -->
                    <button type="submit"
                            class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center gap-2 group relative">
                        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative flex items-center gap-2">
                            <i class="fa-solid fa-paper-plane"></i>
                            <span x-show="language === 'hu'">Jelentkezés Beküldése</span>
                            <span x-show="language === 'en'">Submit Application</span>
                        </div>
                    </button>
                </form>
            </div>
        </div>
    </section>
    

    <!-- 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;
        }

        .perspective-1000 {
            perspective: 1000px;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
    </style>
</body>
</html>