FAQ пусть всплывают окошки с текстом при наведении на них

index.html

@@ -88,14 +88,36 @@
             transform: translateY(-2px);
             box-shadow: 0 10px 30px rgba(0, 212, 255, 0.5);
         }
-.faq-answer {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+        .faq-item {
+            position: relative;
         }
-        .faq-answer.open {
-            max-height: 500px;
-            padding: 1.5rem 1.5rem 0;
+        .faq-answer {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            z-index: 50;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #3b82f6;
+            border-radius: 0.75rem;
+            padding: 1rem;
+            margin-top: 0.5rem;
+            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+        }
+        .faq-item:hover .faq-answer {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+        .faq-question {
+            cursor: pointer;
+        }
+        .faq-question svg {
+            display: none;
         }
 </style>
 </head>
@@ -481,99 +503,89 @@
     <section id="faq" class="py-20 px-6 bg-dark-card">
         <div class="container mx-auto max-w-6xl">
             <h2 class="text-4xl font-bold text-center mb-12">FAQ</h2>
-            <div class="grid md:grid-cols-2 gap-4">
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Как работает технология клонирования голоса?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Наша технология анализирует аудиообразец длительностью от 30 секунд, выделяет уникальные характеристики голоса и создает цифровую модель. Затем эта модель используется для синтеза новой речи с сохранением интонаций и тембра оригинала.
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Как работает технология клонирования голоса?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Наша технология анализирует аудиообразец длительностью от 30 секунд, выделяет уникальные характеристики голоса и создает цифровую модель. Затем эта модель используется для синтеза новой речи с сохранением интонаций и тембра оригинала.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Какие форматы файлов поддерживаются?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Мы поддерживаем импорт аудио в форматах MP3, WAV, M4A, FLAC. Экспорт генерированной речи доступен в MP3, WAV, OGG. Максимальный размер файла для загрузки - 50MB.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Какие форматы файлов поддерживаются?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Мы поддерживаем импорт аудио в форматах MP3, WAV, M4A, FLAC. Экспорт генерированной речи доступен в MP3, WAV, OGG. Максимальный размер файла для загрузки - 50MB.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Можно ли использовать сгенерированный голос в коммерческих целях?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Да, все тарифные планы включают коммерческую лицензию на использование сгенерированного аудио. Вы можете использовать его в подкастах, видео, рекламных материалах и других коммерческих проектах.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Можно ли использовать сгенерированный голос в коммерческих целях?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Да, все тарифные планы включают коммерческую лицензию на использование сгенерированного аудио. Вы можете использовать его в подкастах, видео, рекламных материалах и других коммерческих проектах.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Как быстро генерируется аудио?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Стандартный TTS синтез занимает в среднем 2-3 секунды на 1000 символов. Клонирование голоса требует дополнительного времени на обработку образца (обычно 1-2 минуты), после чего синтез происходит с той же скоростью.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Как быстро генерируется аудио?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Стандартный TTS синтез занимает в среднем 2-3 секунды на 1000 символов. Клонирование голоса требует дополнительного времени на обработку образца (обычно 1-2 минуты), после чего синтез происходит с той же скоростью.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Какое качество аудио я получу?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Мы генерируем аудио в высоком качестве 44.1kHz, 16-bit стерео. При клонировании голоса качество зависит от исходного аудиообразца - чем лучше качество исходника, тем точнее будет результат.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Какое качество аудио я получу?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Мы генерируем аудио в высоком качестве 44.1kHz, 16-bit стерео. При клонировании голоса качество зависит от исходного аудиообразца - чем лучше качество исходника, тем точнее будет результат.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Можно ли отменить подписку?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Да, вы можете отменить подписку в любой момент в личном кабинете. Доступ к платным функциям сохранится до конца оплаченного периода.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Можно ли отменить подписку?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Да, вы можете отменить подписку в любой момент в личном кабинете. Доступ к платным функциям сохранится до конца оплаченного периода.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Есть ли API для разработчиков?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Да, мы предоставляем RESTful API с подробной документацией. API доступен в тарифах "Стандарт" и "Максимум". Вы можете интегрировать наши возможности в ваши приложения, сайты или сервисы.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Есть ли API для разработчиков?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Да, мы предоставляем RESTful API с подробной документацией. API доступен в тарифах "Стандарт" и "Максимум". Вы можете интегрировать наши возможности в ваши приложения, сайты или сервисы.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Как обеспечить конфиденциальность данных?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Все данные передаются по зашифрованному протоколу HTTPS. Мы не храним ваши тексты и аудиофайлы дольше необходимого для обработки. Ваша информация никогда не передается третьим лицам.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Как обеспечить конфиденциальность данных?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Все данные передаются по зашифрованному протоколу HTTPS. Мы не храним ваши тексты и аудиофайлы дольше необходимого для обработки. Ваша информация никогда не передается третьим лицам.
                     </div>
                 </div>
-<div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Можно ли настроить эмоциональную окраску голоса?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer p-6 pt-0 text-gray-400">
-Да, в расширенных настройках вы можете выбрать эмоциональную окраску: нейтральный, радостный, грустный, энергичный, спокойный. Также можно调节 скорость речи и высоту тона.
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Можно ли настроить эмоциональную окраску голоса?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
+                        Да, в расширенных настройках вы можете выбрать эмоциональную окраску: нейтральный, радостный, грустный, энергичный, спокойный. Также можно调节 скорость речи и высоту тона.
                     </div>
                 </div>
-                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg overflow-hidden">
-                    <button class="faq-question w-full p-6 text-left flex items-center justify-between hover:bg-dark-bg/50 transition">
-                        <span class="font-semibold">Что делать, если результат меня не устраивает?</span>
-                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform"></i>
-                    </button>
-                    <div class="faq-answer hidden p-6 pt-0 text-gray-400">
+                <div class="faq-item bg-dark-bg border border-dark-border rounded-lg p-6 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
+                    <div class="faq-question">
+                        <span class="font-semibold text-lg">Что делать, если результат меня не устраивает?</span>
+                    </div>
+                    <div class="faq-answer text-gray-300 text-sm">
                         Вы можете перегенерировать аудио с другими настройками или выбрать другой голос. Если проблема сохраняется, наша техподдержка поможет найти оптимальное решение для вашей задачи.
                     </div>
                 </div>
             </div>
-        </div>
+</div>
     </section>
 
     <!-- Footer -->
@@ -677,32 +689,6 @@
             const randomText = randomTexts[Math.floor(Math.random() * randomTexts.length)];
             document.getElementById('clone-text').value = randomText;
         });
-        // FAQ Accordion
-        document.querySelectorAll('.faq-question').forEach(button => {
-            button.addEventListener('click', () => {
-                const answer = button.nextElementSibling;
-                const icon = button.querySelector('svg');
-                const isOpen = answer.classList.contains('open');
-                
-                // Close all other answers
-                document.querySelectorAll('.faq-answer').forEach(a => {
-                    a.classList.remove('open');
-                    a.style.paddingTop = '0';
-                    a.style.paddingBottom = '0';
-                });
-                document.querySelectorAll('.faq-question svg').forEach(i => {
-                    i.classList.remove('rotate-180');
-                });
-                
-                // Toggle current answer
-                if (!isOpen) {
-                    answer.classList.add('open');
-                    answer.style.paddingTop = '0';
-                    answer.style.paddingBottom = '1.5rem';
-                    icon.classList.add('rotate-180');
-                }
-            });
-        });
 // Smooth scroll for navigation links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {