Spaces:

Denzel1989
/

me-cod

Running

App Files Files Community

Denzel1989 commited on May 15, 2025

Commit

9fe9403

verified ·

1 Parent(s): 8b7f0a7

Add 2 files

Browse files

Files changed (2) hide show

index.html +533 -141
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NAVI SYSTEMS | Автоэлектроника будущего</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -123,29 +123,192 @@
       margin-bottom: 1rem;
     }
-    /* Упрощенная версия звездного фона */
-    #stars {
-      position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: -1;
-      background: #0f0f0f;
       overflow: hidden;
     }
-    .star {
       position: absolute;
-      background: white;
       border-radius: 50%;
-      animation: twinkle var(--duration) infinite ease-in-out;
-      opacity: 0;
     }
-    @keyframes twinkle {
-      0%, 100% { opacity: 0; }
-      50% { opacity: var(--opacity); }
     }
   </style>
 </head>
@@ -159,10 +322,21 @@
 <!-- Star Background -->
 <div id="stars"></div>
 <!-- Navigation -->
-<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-blur-md">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex items-center justify-between h-16">
       <div class="flex items-center">
         <div class="flex-shrink-0">
           <span class="text-2xl font-bold">
@@ -177,7 +351,7 @@
           <a href="#advantages" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Преимущества</a>
           <a href="#steps" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Этапы</a>
           <a href="#contact" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Контакты</a>
-          <a href="tel:+79181364222" class="ml-4 flex items-center text-red-400 hover:text-red-300">
             <i class="fas fa-phone-alt mr-2"></i>
             +7 918 136-42-22
           </a>
@@ -192,13 +366,13 @@
   </div>
   <!-- Mobile menu -->
-  <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 backdrop-blur-lg">
     <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-      <a href="#services" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Услуги</a>
-      <a href="#advantages" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Преимущества</a>
-      <a href="#steps" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Этапы</a>
-      <a href="#contact" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400">Контакты</a>
-      <a href="tel:+79181364222" class="block px-3 py-2 text-base font-medium text-red-400 hover:text-red-300">
         <i class="fas fa-phone-alt mr-2"></i>
         +7 918 136-42-22
       </a>
@@ -214,18 +388,18 @@
   </div>
   <div class="relative z-10 px-4 sm:px-6 lg:px-8 py-20 text-center max-w-4xl mx-auto" data-aos="fade-up">
-    <h1 class="text-5xl md:text-6xl font-extrabold mb-6">
       <span class="text-red-500 text-glow">NAVI</span>
       <span class="text-white">SYSTEMS</span>
     </h1>
-    <p class="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
-      Инновационные решения по автоэлектронике и навигации. Превратите свой автомобиль в технологичный центр на колесах.
     </p>
     <div class="flex flex-col sm:flex-row justify-center gap-4">
-      <a href="#services" class="btn-primary px-8 py-4 rounded-lg font-bold text-lg">
         <i class="fas fa-tools mr-2"></i> Наши услуги
       </a>
-      <a href="#contact" class="px-8 py-4 rounded-lg font-bold text-lg border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-black transition-all">
         <i class="fas fa-phone-alt mr-2"></i> Консультация
       </a>
     </div>
@@ -242,79 +416,97 @@
 <section id="services" class="py-20 bg-gradient-to-b from-black to-gray-900">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
-      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
         <span class="text-red-500">Наши</span> услуги
       </h2>
-      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
-        Полный спектр услуг по модернизации и обслуживанию автомобильной электроники
       </p>
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       <!-- Service 1 -->
-      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="100">
         <div class="feature-icon">
           <i class="fas fa-language"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Русификация мультимедиа</h3>
         <p class="text-gray-400">
-          Полный перевод интерфейса, адаптация радиочастот для российского рынка, обновление карт для Европы и СНГ.
         </p>
       </div>
       <!-- Service 2 -->
-      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="200">
         <div class="feature-icon">
           <i class="fas fa-map-marked-alt"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Навигация & карты</h3>
         <p class="text-gray-400">
-          Установка NAV-блоков, актуальные обновления картографических данных, интеграция онлайн-сервисов трафика.
         </p>
       </div>
       <!-- Service 3 -->
-      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="300">
         <div class="feature-icon">
           <i class="fas fa-camera"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Камеры 360° / парктроники</h3>
         <p class="text-gray-400">
-          Системы кругового обзора 5D, интеллектуальные парктроники с цветовой индикацией, штатная интеграция без повреждений.
         </p>
       </div>
       <!-- Service 4 -->
-      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="100">
         <div class="feature-icon">
           <i class="fas fa-volume-up"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Аудио-апгрейд</h3>
         <p class="text-gray-400">
-          Профессиональные DSP-процессоры, Hi-Fi акустические системы, компактные сабвуферы скрытого монтажа.
         </p>
       </div>
       <!-- Service 5 -->
-      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="200">
         <div class="feature-icon">
           <i class="fas fa-code"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Диагностика & кодирование</h3>
         <p class="text-gray-400">
-          Профессиональное оборудование для диагностики и программирования, адаптация под российские условия (мили → км, °F → °C).
         </p>
       </div>
       <!-- Service 6 -->
-      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20" data-aos="fade-up" data-aos-delay="300">
         <div class="feature-icon">
           <i class="fas fa-microchip"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">ГУ NAVI SYSTEMS</h3>
         <p class="text-gray-400">
-          Мультимедийные системы на Android с поддержкой CarPlay, полная интеграция с CAN-шиной автомобиля, голосовое управление.
         </p>
       </div>
     </div>
   </div>
@@ -324,48 +516,98 @@
 <section id="advantages" class="py-20 bg-gray-900">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
-      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
         Почему <span class="text-red-500">выбирают нас</span>
       </h2>
-      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
         Профессионализм, качество и индивидуальный подход к каждому клиенту
       </p>
     </div>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
       <!-- Advantage 1 -->
-      <div class="bg-card rounded-xl p-8 text-center" data-aos="fade-up" data-aos-delay="100">
-        <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
           <i class="fas fa-award text-2xl text-white"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">10+ лет опыта</h3>
         <p class="text-gray-400">
-          С 2013 года мы реализовали более 5,000 успешных проектов по модернизации автомобилей
         </p>
       </div>
       <!-- Advantage 2 -->
-      <div class="bg-card rounded-xl p-8 text-center" data-aos="fade-up" data-aos-delay="200">
-        <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
           <i class="fas fa-shield-alt text-2xl text-white"></i>
         </div>
-        <h3 class="text-xl font-bold text-white mb-3">Гарантия 12 месяцев</h3>
         <p class="text-gray-400">
-          На все оборудование и работы предоставляется расширенная гарантия сроком на 1 год
         </p>
       </div>
       <!-- Advantage 3 -->
-      <div class="bg-card rounded-xl p-8 text-center" data-aos="fade-up" data-aos-delay="300">
-        <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
           <i class="fas fa-check-circle text-2xl text-white"></i>
         </div>
-        <h3 class="text-xl font-bold text-white mb-3">Проверенные решения</h3>
         <p class="text-gray-400">
-          Мы используем только проверенное оборудование, прошедшее наши стендовые испытания
         </p>
       </div>
     </div>
   </div>
 </section>
@@ -373,49 +615,94 @@
 <section id="steps" class="py-20 bg-black">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
-      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
         <span class="text-red-500">4 шага</span> к идеальному результату
       </h2>
-      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
         Наш процесс работы обеспечивает максимальное качество и удовлетворенность клиента
       </p>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-      <!-- Step 1 -->
-      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
-        <div class="text-red-500 text-3xl font-bold mb-4">1</div>
-        <h3 class="text-xl font-bold text-white mb-3">Консультация</h3>
-        <p class="text-gray-400">
-          Анализ вашего автомобиля и потребностей. Подбор оптимального решения.
-        </p>
-      </div>
-      <!-- Step 2 -->
-      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
-        <div class="text-red-500 text-3xl font-bold mb-4">2</div>
-        <h3 class="text-xl font-bold text-white mb-3">Установка</h3>
-        <p class="text-gray-400">
-          Монтаж оборудования сертифицированными специалистами с сохранением гарантии.
-        </p>
-      </div>
-      <!-- Step 3 -->
-      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
-        <div class="text-red-500 text-3xl font-bold mb-4">3</div>
-        <h3 class="text-xl font-bold text-white mb-3">Тестирование</h3>
-        <p class="text-gray-400">
-          Полная проверка всех систем. Подробный инструктаж по использованию.
-        </p>
-      </div>
-      <!-- Step 4 -->
-      <div class="bg-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="400">
-        <div class="text-red-500 text-3xl font-bold mb-4">4</div>
-        <h3 class="text-xl font-bold text-white mb-3">Поддержка</h3>
-        <p class="text-gray-400">
-          Бесплатные консультации и обновления ПО. Помощь в решении вопросов.
-        </p>
       </div>
     </div>
   </div>
@@ -425,34 +712,37 @@
 <section id="contact" class="py-20 bg-gradient-to-b from-gray-900 to-black">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
-      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">
         <span class="text-red-500">Свяжитесь</span> с нами
       </h2>
-      <p class="text-lg text-gray-400 max-w-3xl mx-auto">
         Оставьте заявку и мы подберем для вас оптимальное решение
       </p>
     </div>
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
-      <div class="bg-card rounded-xl p-8" data-aos="fade-right">
         <h3 class="text-2xl font-bold text-white mb-6">Контактная информация</h3>
         <div class="space-y-6">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                 <i class="fas fa-map-marker-alt text-white"></i>
               </div>
             </div>
             <div class="ml-4">
               <h4 class="text-lg font-semibold text-white">Адрес</h4>
               <p class="text-gray-400">ул. 1 Мая 493/22, Краснодар</p>
             </div>
           </div>
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                 <i class="fas fa-phone-alt text-white"></i>
               </div>
             </div>
@@ -461,12 +751,15 @@
               <p class="text-gray-400">
                 <a href="tel:+79181364222" class="hover:text-red-400 transition-colors">+7 918 136-42-22</a>
               </p>
             </div>
           </div>
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                 <i class="fas fa-envelope text-white"></i>
               </div>
             </div>
@@ -475,12 +768,15 @@
               <p class="text-gray-400">
                 <a href="mailto:info@navisystems.ru" class="hover:text-red-400 transition-colors">info@navisystems.ru</a>
               </p>
             </div>
           </div>
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                 <i class="fas fa-clock text-white"></i>
               </div>
             </div>
@@ -489,10 +785,28 @@
               <p class="text-gray-400">Пн-Пт: 9:00 - 19:00<br>Сб: 10:00 - 17:00<br>Вс: выходной</p>
             </div>
           </div>
         </div>
       </div>
-      <div class="bg-card rounded-xl p-8" data-aos="fade-left">
         <h3 class="text-2xl font-bold text-white mb-6">Форма обратной связи</h3>
         <form id="contact-form" class="space-y-6">
@@ -506,12 +820,46 @@
             <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all" placeholder="+7 (___) ___-__-__">
           </div>
           <div>
             <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Сообщение</label>
-            <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"></textarea>
           </div>
-          <button type="submit" class="w-full btn-primary py-4 rounded-lg font-bold text-lg">
             <i class="fas fa-paper-plane mr-2"></i> Отправить заявку
           </button>
         </form>
@@ -521,37 +869,67 @@
 </section>
 <!-- Footer -->
-<footer class="bg-black py-12">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex flex-col md:flex-row justify-between items-center">
-      <div class="mb-6 md:mb-0">
         <span class="text-2xl font-bold">
           <span class="text-red-500">NAVI</span>
           <span class="text-white">SYSTEMS</span>
         </span>
-        <p class="text-gray-500 mt-2">Автоэлектроника будущего</p>
       </div>
-      <div class="flex space-x-6">
-        <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
-          <i class="fab fa-vk text-xl"></i>
-        </a>
-        <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
-          <i class="fab fa-telegram text-xl"></i>
-        </a>
-        <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
-          <i class="fab fa-instagram text-xl"></i>
-        </a>
       </div>
     </div>
-    <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
       <p class="text-gray-500 text-sm mb-4 md:mb-0">
         © 2023 NAVI SYSTEMS. Все права защищены.
       </p>
-      <a href="tel:+79181364222" class="text-gray-400 hover:text-red-500 transition-colors">
-        <i class="fas fa-phone-alt mr-2"></i> +7 918 136-42-22
-      </a>
     </div>
   </div>
 </footer>
@@ -578,42 +956,56 @@
     }, 500);
   });
-  // Simple star background
-  function createStars() {
-    const starsContainer = document.getElementById('stars');
-    const starsCount = 100;
-    for (let i = 0; i < starsCount; i++) {
-      const star = document.createElement('div');
-      star.className = 'star';
       // Random properties
-      const size = Math.random() * 3;
       const posX = Math.random() * 100;
-      const posY = Math.random() * 100;
-      const opacity = Math.random() * 0.8 + 0.2;
-      const duration = Math.random() * 3 + 2;
-      star.style.width = `${size}px`;
-      star.style.height = `${size}px`;
-      star.style.left = `${posX}%`;
-      star.style.top = `${posY}%`;
-      star.style.setProperty('--opacity', opacity);
-      star.style.setProperty('--duration', `${duration}s`);
-      starsContainer.appendChild(star);
     }
   }
   // Form submission
   document.getElementById('contact-form').addEventListener('submit', function(e) {
     e.preventDefault();
-    alert('Спасибо за вашу заявку! Мы свяжемся с вами в ближайшее время.');
-    this.reset();
   });
-  // Initialize stars
-  createStars();
 </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Denzel1989/me-cod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NAVI SYSTEMS | Автоэлектроника премиум класса</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
       margin-bottom: 1rem;
     }
+    /* Premium cars background */
+    .cars-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -2;
+      overflow: hidden;
+    }
+    .car {
+      position: absolute;
+      filter: drop-shadow(0 0 10px rgba(255, 59, 59, 0.3));
+      opacity: 0.2;
+      transition: all 1s ease;
+      z-index: 1;
+      object-fit: cover;
+      object-position: center;
+      border-radius: 8px;
+      box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+    }
+    .car-1 {
+      top: 10%;
+      left: 5%;
+      width: 350px;
+      height: 200px;
+      animation: float 15s ease-in-out infinite;
+    }
+    .car-2 {
+      top: 25%;
+      right: 5%;
+      width: 400px;
+      height: 220px;
+      animation: float 18s ease-in-out infinite 2s;
+    }
+    .car-3 {
+      bottom: 15%;
+      left: 10%;
+      width: 450px;
+      height: 250px;
+      animation: float 20s ease-in-out infinite 4s;
+    }
+    .car-4 {
+      bottom: 20%;
+      right: 8%;
+      width: 320px;
+      height: 180px;
+      animation: float 16s ease-in-out infinite 3s;
+    }
+    @keyframes float {
+      0%, 100% {
+        transform: translateY(0) rotate(0deg);
+      }
+      50% {
+        transform: translateY(-20px) rotate(2deg);
+      }
+    }
+    /* New premium styles */
+    .premium-border {
+      position: relative;
+    }
+    .premium-border::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 1px;
+      background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,59,59,0.5), rgba(255,255,255,0.2));
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+    }
+    .section-title {
+      position: relative;
+      display: inline-block;
+    }
+    .section-title::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background: linear-gradient(90deg, var(--primary), transparent);
+    }
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .car-1, .car-2, .car-3, .car-4 {
+        width: 250px;
+        height: 140px;
+        opacity: 0.15;
+      }
+      .car-1 {
+        top: 15%;
+        left: 5%;
+      }
+      .car-2 {
+        top: 30%;
+        right: 5%;
+      }
+      .car-3 {
+        bottom: 20%;
+        left: 10%;
+      }
+      .car-4 {
+        bottom: 25%;
+        right: 8%;
+      }
+    }
+    /* Floating particles */
+    .particles {
+      position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: -1;
       overflow: hidden;
     }
+    .particle {
       position: absolute;
+      background: rgba(255, 255, 255, 0.8);
       border-radius: 50%;
+      animation: float-particle linear infinite;
+    }
+    @keyframes float-particle {
+      0% {
+        transform: translateY(0) translateX(0);
+        opacity: 0;
+      }
+      10% {
+        opacity: 1;
+      }
+      90% {
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-100vh) translateX(100px);
+        opacity: 0;
+      }
+    }
+    /* Hover effects */
+    .hover-scale {
+      transition: transform 0.3s ease;
+    }
+    .hover-scale:hover {
+      transform: scale(1.03);
+    }
+    /* Custom scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
     }
+    ::-webkit-scrollbar-track {
+      background: var(--dark);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--primary);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--primary-dark);
     }
   </style>
 </head>
 <!-- Star Background -->
 <div id="stars"></div>
+<!-- Particles Background -->
+<div class="particles" id="particles"></div>
+<!-- Premium Cars Background -->
+<div class="cars-bg">
+  <img src="https://www.mercedes-benz.com/content/dam/brandhub/mbsocialcar/mbsocialcar-mercedes-amg-gt-r/Mercedes-Benz-AMG-GT-R-Widescreen.jpg" alt="Mercedes AMG GT" class="car car-1 hover-scale">
+  <img src="https://www.bmw.com/content/dam/bmw/marketBMWCOM/bmw_com/categories/automotive-life/bmw-m-automobiles/bmw-m8-gran-coupe/bmw-m8-gran-coupe-sp-desktop.jpg" alt="BMW M8" class="car car-2 hover-scale">
+  <img src="https://www.audi.com/content/dam/gbp2/experience-audi/models-and-technology/concept-cars/audi-pb18-e-tron/1920x1080/1920x1080-teaser-01.jpg" alt="Audi PB18 e-tron" class="car car-3 hover-scale">
+  <img src="https://www.porsche.com/international/_india_/modelstart/all/911-gt3-rs/911-gt3-rs-modelimage-sideshot/thumbnails/911-gt3-rs-modelimage-sideshot.jpg" alt="Porsche 911 GT3 RS" class="car car-4 hover-scale">
+</div>
 <!-- Navigation -->
+<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-gray-800">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-20">
       <div class="flex items-center">
         <div class="flex-shrink-0">
           <span class="text-2xl font-bold">
           <a href="#advantages" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Преимущества</a>
           <a href="#steps" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Этапы</a>
           <a href="#contact" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Контакты</a>
+          <a href="tel:+79181364222" class="ml-4 flex items-center text-red-400 hover:text-red-300 bg-black bg-opacity-50 px-4 py-2 rounded-lg border border-gray-700 hover:border-red-500 transition-all">
             <i class="fas fa-phone-alt mr-2"></i>
             +7 918 136-42-22
           </a>
   </div>
   <!-- Mobile menu -->
+  <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 backdrop-blur-lg border-t border-gray-800">
     <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+      <a href="#services" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md">Услуги</a>
+      <a href="#advantages" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md">Преимущества</a>
+      <a href="#steps" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md">Этапы</a>
+      <a href="#contact" class="block px-3 py-2 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md">Контакты</a>
+      <a href="tel:+79181364222" class="block px-3 py-2 text-base font-medium text-red-400 hover:text-red-300 bg-gray-900 rounded-md">
         <i class="fas fa-phone-alt mr-2"></i>
         +7 918 136-42-22
       </a>
   </div>
   <div class="relative z-10 px-4 sm:px-6 lg:px-8 py-20 text-center max-w-4xl mx-auto" data-aos="fade-up">
+    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6">
       <span class="text-red-500 text-glow">NAVI</span>
       <span class="text-white">SYSTEMS</span>
     </h1>
+    <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
+      Премиальные решения для автомобилей класса люкс. Технологии будущего уже сегодня.
     </p>
     <div class="flex flex-col sm:flex-row justify-center gap-4">
+      <a href="#services" class="btn-primary px-8 py-4 rounded-lg font-bold text-lg hover-scale">
         <i class="fas fa-tools mr-2"></i> Наши услуги
       </a>
+      <a href="#contact" class="px-8 py-4 rounded-lg font-bold text-lg border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-black transition-all hover-scale">
         <i class="fas fa-phone-alt mr-2"></i> Консультация
       </a>
     </div>
 <section id="services" class="py-20 bg-gradient-to-b from-black to-gray-900">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title">
         <span class="text-red-500">Наши</span> услуги
       </h2>
+      <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+        Эксклюзивные решения для автомобилей премиум-класса
       </p>
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       <!-- Service 1 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="100">
         <div class="feature-icon">
           <i class="fas fa-language"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Русификация мультимедиа</h3>
         <p class="text-gray-400">
+          Полный перевод интерфейса для премиальных моделей, адаптация радиочастот, обновление карт для Европы и СНГ.
         </p>
+        <div class="mt-4">
+          <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Mercedes, BMW, Audi</span>
+        </div>
       </div>
       <!-- Service 2 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="200">
         <div class="feature-icon">
           <i class="fas fa-map-marked-alt"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Навигация & карты</h3>
         <p class="text-gray-400">
+          Установка NAV-блоков премиум класса, актуальные обновления карт, интеграция онлайн-сервисов трафика.
         </p>
+        <div class="mt-4">
+          <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Porsche, Lexus, Land Rover</span>
+        </div>
       </div>
       <!-- Service 3 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="300">
         <div class="feature-icon">
           <i class="fas fa-camera"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Камеры 360° / парктроники</h3>
         <p class="text-gray-400">
+          Системы кругового обзора 5D для премиальных авто, интеллектуальные парктроники с цветовой индикацией.
         </p>
+        <div class="mt-4">
+          <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Все модели</span>
+        </div>
       </div>
       <!-- Service 4 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="100">
         <div class="feature-icon">
           <i class="fas fa-volume-up"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Аудио-апгрейд</h3>
         <p class="text-gray-400">
+          Профессиональные DSP-процессоры, Hi-Fi акустические системы премиум класса, компактные сабвуферы.
         </p>
+        <div class="mt-4">
+          <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Burmester, B&O, Mark Levinson</span>
+        </div>
       </div>
       <!-- Service 5 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="200">
         <div class="feature-icon">
           <i class="fas fa-code"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">Диагностика & кодирование</h3>
         <p class="text-gray-400">
+          Профессиональное оборудование для диагностики и программирования премиальных автомобилей.
         </p>
+        <div class="mt-4">
+          <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Все бренды</span>
+        </div>
       </div>
       <!-- Service 6 -->
+      <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="300">
         <div class="feature-icon">
           <i class="fas fa-microchip"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">ГУ NAVI SYSTEMS</h3>
         <p class="text-gray-400">
+          Эксклюзивные мультимедийные системы на Android с поддержкой CarPlay, полная интеграция с CAN-шиной.
         </p>
+        <div class="mt-4">
+          <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Эксклюзив</span>
+        </div>
       </div>
     </div>
   </div>
 <section id="advantages" class="py-20 bg-gray-900">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title">
         Почему <span class="text-red-500">выбирают нас</span>
       </h2>
+      <p class="text-xl text-gray-400 max-w-3xl mx-auto">
         Профессионализм, качество и индивидуальный подход к каждому клиенту
       </p>
     </div>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
       <!-- Advantage 1 -->
+      <div class="bg-card rounded-xl p-8 text-center premium-border hover-scale" data-aos="fade-up" data-aos-delay="100">
+        <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6">
           <i class="fas fa-award text-2xl text-white"></i>
         </div>
         <h3 class="text-xl font-bold text-white mb-3">10+ лет опыта</h3>
         <p class="text-gray-400">
+          С 2013 года мы реализовали более 5,000 успешных проектов по модернизации премиальных автомобилей
         </p>
       </div>
       <!-- Advantage 2 -->
+      <div class="bg-card rounded-xl p-8 text-center premium-border hover-scale" data-aos="fade-up" data-aos-delay="200">
+        <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6">
           <i class="fas fa-shield-alt text-2xl text-white"></i>
         </div>
+        <h3 class="text-xl font-bold text-white mb-3">Гарантия 24 месяца</h3>
         <p class="text-gray-400">
+          На все оборудование и работы предоставляется расширенная гарантия сроком на 2 года
         </p>
       </div>
       <!-- Advantage 3 -->
+      <div class="bg-card rounded-xl p-8 text-center premium-border hover-scale" data-aos="fade-up" data-aos-delay="300">
+        <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6">
           <i class="fas fa-check-circle text-2xl text-white"></i>
         </div>
+        <h3 class="text-xl font-bold text-white mb-3">Эксклюзивные решения</h3>
         <p class="text-gray-400">
+          Мы используем только проверенное оборудование премиум класса, адаптированное для люксовых автомобилей
         </p>
       </div>
     </div>
+    <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-right">
+        <h3 class="text-2xl font-bold text-white mb-6">Наши клиенты</h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Mercedes-Logo.svg/2560px-Mercedes-Logo.svg.png" alt="Mercedes" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/2048px-BMW.svg.png" alt="BMW" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Audi-Logo_2016.svg/1200px-Audi-Logo_2016.svg.png" alt="Audi" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Porsche_logo.svg/1200px-Porsche_logo.svg.png" alt="Porsche" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Lexus_Logo_2020.svg/1200px-Lexus_Logo_2020.svg.png" alt="Lexus" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Land_Rover_logo.svg/1200px-Land_Rover_logo.svg.png" alt="Land Rover" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+        </div>
+      </div>
+      <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-left">
+        <h3 class="text-2xl font-bold text-white mb-6">Наши партнеры</h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Alpine_Logo.svg/1200px-Alpine_Logo.svg.png" alt="Alpine" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Pioneer_logo.svg/1200px-Pioneer_logo.svg.png" alt="Pioneer" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Kenwood_logo.svg/1200px-Kenwood_logo.svg.png" alt="Kenwood" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Bose_logo.svg/1200px-Bose_logo.svg.png" alt="Bose" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Harman_logo.svg/1200px-Harman_logo.svg.png" alt="Harman" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+          <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Focal_logo.svg/1200px-Focal_logo.svg.png" alt="Focal" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
 <section id="steps" class="py-20 bg-black">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title">
         <span class="text-red-500">4 шага</span> к идеальному результату
       </h2>
+      <p class="text-xl text-gray-400 max-w-3xl mx-auto">
         Наш процесс работы обеспечивает максимальное качество и удовлетворенность клиента
       </p>
     </div>
+    <div class="relative">
+      <!-- Timeline line -->
+      <div class="hidden md:block absolute left-1/2 top-0 h-full w-1 bg-gradient-to-b from-red-500 to-transparent transform -translate-x-1/2"></div>
+      <div class="space-y-8 md:space-y-16">
+        <!-- Step 1 -->
+        <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="100">
+          <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
+            <h3 class="text-2xl font-bold text-white mb-3">Консультация</h3>
+            <p class="text-gray-400">
+              Детальный анализ вашего автомобиля и потребностей. Подбор оптима��ьного решения с учетом особенностей модели.
+            </p>
+          </div>
+          <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0">
+            1
+          </div>
+          <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0">
+            <div class="bg-card rounded-xl p-6 premium-border hover-scale">
+              <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Consultation" class="w-full h-48 object-cover rounded-lg mb-4">
+              <p class="text-sm text-gray-400 italic">Персональный подход к каждому клиенту</p>
+            </div>
+          </div>
+        </div>
+        <!-- Step 2 -->
+        <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="200">
+          <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-1 md:order-none md:text-right">
+            <div class="bg-card rounded-xl p-6 premium-border hover-scale">
+              <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Installation" class="w-full h-48 object-cover rounded-lg mb-4">
+              <p class="text-sm text-gray-400 italic">Профессиональный монтаж с сохранением гарантии</p>
+            </div>
+          </div>
+          <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0">
+            2
+          </div>
+          <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0 order-first md:order-none">
+            <h3 class="text-2xl font-bold text-white mb-3">Установка</h3>
+            <p class="text-gray-400">
+              Монтаж оборудования сертифицированными специалистами с использованием профессионального инструмента.
+            </p>
+          </div>
+        </div>
+        <!-- Step 3 -->
+        <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="300">
+          <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
+            <h3 class="text-2xl font-bold text-white mb-3">Тестирование</h3>
+            <p class="text-gray-400">
+              Полная проверка всех систем в различных режимах работы. Подробный инструктаж по использованию.
+            </p>
+          </div>
+          <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0">
+            3
+          </div>
+          <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0">
+            <div class="bg-card rounded-xl p-6 premium-border hover-scale">
+              <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Testing" class="w-full h-48 object-cover rounded-lg mb-4">
+              <p class="text-sm text-gray-400 italic">Тщательное тестирование всех функций</p>
+            </div>
+          </div>
+        </div>
+        <!-- Step 4 -->
+        <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="400">
+          <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-1 md:order-none md:text-right">
+            <div class="bg-card rounded-xl p-6 premium-border hover-scale">
+              <img src="https://images.unsplash.com/photo-1590658268037-6bf12165ee8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Support" class="w-full h-48 object-cover rounded-lg mb-4">
+              <p class="text-sm text-gray-400 italic">Круглосуточная поддержка клиентов</p>
+            </div>
+          </div>
+          <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0">
+            4
+          </div>
+          <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0 order-first md:order-none">
+            <h3 class="text-2xl font-bold text-white mb-3">Поддержка</h3>
+            <p class="text-gray-400">
+              Бесплатные консультации и обновления ПО. Помощь в решении любых вопросов. Персональный менеджер.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 <section id="contact" class="py-20 bg-gradient-to-b from-gray-900 to-black">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title">
         <span class="text-red-500">Свяжитесь</span> с нами
       </h2>
+      <p class="text-xl text-gray-400 max-w-3xl mx-auto">
         Оставьте заявку и мы подберем для вас оптимальное решение
       </p>
     </div>
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+      <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-right">
         <h3 class="text-2xl font-bold text-white mb-6">Контактная информация</h3>
         <div class="space-y-6">
           <div class="flex items-start">
             <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center">
                 <i class="fas fa-map-marker-alt text-white"></i>
               </div>
             </div>
             <div class="ml-4">
               <h4 class="text-lg font-semibold text-white">Адрес</h4>
               <p class="text-gray-400">ул. 1 Мая 493/22, Краснодар</p>
+              <a href="#" class="text-red-400 hover:text-red-300 text-sm mt-1 inline-block">
+                <i class="fas fa-map-marked-alt mr-1"></i> Посмотреть на карте
+              </a>
             </div>
           </div>
           <div class="flex items-start">
             <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center">
                 <i class="fas fa-phone-alt text-white"></i>
               </div>
             </div>
               <p class="text-gray-400">
                 <a href="tel:+79181364222" class="hover:text-red-400 transition-colors">+7 918 136-42-22</a>
               </p>
+              <p class="text-gray-400 mt-1">
+                <a href="tel:+78612222222" class="hover:text-red-400 transition-colors">+7 861 222-22-22</a>
+              </p>
             </div>
           </div>
           <div class="flex items-start">
             <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center">
                 <i class="fas fa-envelope text-white"></i>
               </div>
             </div>
               <p class="text-gray-400">
                 <a href="mailto:info@navisystems.ru" class="hover:text-red-400 transition-colors">info@navisystems.ru</a>
               </p>
+              <p class="text-gray-400 mt-1">
+                <a href="mailto:support@navisystems.ru" class="hover:text-red-400 transition-colors">support@navisystems.ru</a>
+              </p>
             </div>
           </div>
           <div class="flex items-start">
             <div class="flex-shrink-0">
+              <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center">
                 <i class="fas fa-clock text-white"></i>
               </div>
             </div>
               <p class="text-gray-400">Пн-Пт: 9:00 - 19:00<br>Сб: 10:00 - 17:00<br>Вс: выходной</p>
             </div>
           </div>
+          <div class="pt-4">
+            <h4 class="text-lg font-semibold text-white mb-3">Мы в соцсетях</h4>
+            <div class="flex space-x-4">
+              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all">
+                <i class="fab fa-vk"></i>
+              </a>
+              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all">
+                <i class="fab fa-telegram"></i>
+              </a>
+              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all">
+                <i class="fab fa-instagram"></i>
+              </a>
+              <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all">
+                <i class="fab fa-youtube"></i>
+              </a>
+            </div>
+          </div>
         </div>
       </div>
+      <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-left">
         <h3 class="text-2xl font-bold text-white mb-6">Форма обратной связи</h3>
         <form id="contact-form" class="space-y-6">
             <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all" placeholder="+7 (___) ___-__-__">
           </div>
+          <div>
+            <label for="car-model" class="block text-sm font-medium text-gray-300 mb-1">Модель автомобиля</label>
+            <select id="car-model" name="car-model" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all">
+              <option value="">Выберите модель</option>
+              <option value="mercedes">Mercedes-Benz</option>
+              <option value="bmw">BMW</option>
+              <option value="audi">Audi</option>
+              <option value="porsche">Porsche</option>
+              <option value="lexus">Lexus</option>
+              <option value="landrover">Land Rover</option>
+              <option value="other">Другая марка</option>
+            </select>
+          </div>
+          <div>
+            <label for="service" class="block text-sm font-medium text-gray-300 mb-1">Интересующая услуга</label>
+            <select id="service" name="service" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all">
+              <option value="">Выберите услугу</option>
+              <option value="rus">Русификация мультимедиа</option>
+              <option value="navi">Навигация и карты</option>
+              <option value="camera">Камеры 360° / парктроники</option>
+              <option value="audio">Аудио-апгрейд</option>
+              <option value="coding">Диагностика и кодирование</option>
+              <option value="other">Другая услуга</option>
+            </select>
+          </div>
           <div>
             <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Сообщение</label>
+            <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all" placeholder="Опишите ваши пожелания..."></textarea>
           </div>
+          <div class="flex items-center">
+            <input id="agree" name="agree" type="checkbox" class="w-4 h-4 text-red-600 bg-gray-700 border-gray-600 rounded focus:ring-red-500">
+            <label for="agree" class="ml-2 text-sm text-gray-400">
+              Я согласен с <a href="#" class="text-red-400 hover:underline">политикой конфиденциальности</a>
+            </label>
+          </div>
+          <button type="submit" class="w-full btn-primary py-4 rounded-lg font-bold text-lg hover-scale">
             <i class="fas fa-paper-plane mr-2"></i> Отправить заявку
           </button>
         </form>
 </section>
 <!-- Footer -->
+<footer class="bg-black py-12 border-t border-gray-800">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+      <div>
         <span class="text-2xl font-bold">
           <span class="text-red-500">NAVI</span>
           <span class="text-white">SYSTEMS</span>
         </span>
+        <p class="text-gray-500 mt-4">Автоэлектроника премиум класса</p>
+        <div class="flex space-x-4 mt-4">
+          <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
+            <i class="fab fa-vk text-xl"></i>
+          </a>
+          <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
+            <i class="fab fa-telegram text-xl"></i>
+          </a>
+          <a href="#" class="text-gray-400 hover:text-red-500 transition-colors">
+            <i class="fab fa-instagram text-xl"></i>
+          </a>
+        </div>
       </div>
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Услуги</h3>
+        <ul class="space-y-2">
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Русификация</a></li>
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Навигация</a></li>
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Камеры 360°</a></li>
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Аудио-апгрейд</a></li>
+        </ul>
+      </div>
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Компания</h3>
+        <ul class="space-y-2">
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">О нас</a></li>
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Отзывы</a></li>
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Блог</a></li>
+          <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Вакансии</a></li>
+        </ul>
+      </div>
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Контакты</h3>
+        <ul class="space-y-2">
+          <li class="text-gray-400">ул. 1 Мая 493/22, Краснодар</li>
+          <li><a href="tel:+79181364222" class="text-gray-400 hover:text-red-500 transition-colors">+7 918 136-42-22</a></li>
+          <li><a href="mailto:info@navisystems.ru" class="text-gray-400 hover:text-red-500 transition-colors">info@navisystems.ru</a></li>
+          <li class="text-gray-400">Пн-Пт: 9:00 - 19:00</li>
+        </ul>
       </div>
     </div>
+    <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
       <p class="text-gray-500 text-sm mb-4 md:mb-0">
         © 2023 NAVI SYSTEMS. Все права защищены.
       </p>
+      <div class="flex space-x-6">
+        <a href="#" class="text-gray-500 hover:text-red-500 text-sm transition-colors">Политика конфиденциальности</a>
+        <a href="#" class="text-gray-500 hover:text-red-500 text-sm transition-colors">Условия использования</a>
+      </div>
     </div>
   </div>
 </footer>
     }, 500);
   });
+  // Create particles
+  function createParticles() {
+    const particlesContainer = document.getElementById('particles');
+    const particleCount = 30;
+    for (let i = 0; i < particleCount; i++) {
+      const particle = document.createElement('div');
+      particle.className = 'particle';
       // Random properties
+      const size = Math.random() * 2 + 1;
       const posX = Math.random() * 100;
+      const delay = Math.random() * 5;
+      const duration = Math.random() * 10 + 10;
+      particle.style.width = `${size}px`;
+      particle.style.height = `${size}px`;
+      particle.style.left = `${posX}%`;
+      particle.style.animationDelay = `${delay}s`;
+      particle.style.animationDuration = `${duration}s`;
+      particlesContainer.appendChild(particle);
     }
   }
   // Form submission
   document.getElementById('contact-form').addEventListener('submit', function(e) {
     e.preventDefault();
+    // Show success message
+    const form = this;
+    const originalButton = form.querySelector('button[type="submit"]');
+    const originalHtml = originalButton.innerHTML;
+    originalButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Отправка...';
+    originalButton.disabled = true;
+    setTimeout(function() {
+      originalButton.innerHTML = '<i class="fas fa-check mr-2"></i> Отправлено!';
+      setTimeout(function() {
+        originalButton.innerHTML = originalHtml;
+        originalButton.disabled = false;
+        form.reset();
+      }, 2000);
+    }, 1500);
   });
+  // Initialize particles
+  createParticles();
 </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Denzel1989/me-cod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,2 +1,4 @@
 <!DOCTYPE html> <html lang="ru"> <head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width,initial-scale=1.0" />   <title>NAVI SYSTEMS | Автоэлектроника будущего</title>    <!-- Google-шрифт -->   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />    <!-- AOS (анимация появления) -->   <link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet"/>    <style>     /* ======= ПЕРЕМЕННЫЕ ======= */     :root{       --bg:#0f0f0f;       --card:#181818b3;            /* glass-card α */       --red:#ff3b3b;       --white:#ffffff;       --glow:0 0 12px #ff3b3b,0 0 24px #ff3b3b66;     }     /* ======= ОБНУЛЕНИЕ ======= */     *{box-sizing:border-box;margin:0;padding:0}     html{scroll-behavior:smooth}     body{       font-family:"Inter",sans-serif;       background:var(--bg);       color:var(--white);       line-height:1.6;       overflow-x:hidden;     }     h1,h2,h3{font-weight:800}     a{color:var(--red);text-decoration:none}     button,input,textarea{font-family:inherit}      /* ======= ПРЕЛОАДЕР ======= */     #preloader{       position:fixed;inset:0;background:var(--bg);display:flex;       justify-content:center;align-items:center;z-index:9999;     }     .logo-pre{       width:120px;height:120px;border-radius:50%;       border:3px solid transparent;border-top:3px solid var(--red);       animation:spin 1.4s linear infinite,glow 2s ease-in-out infinite alternate;       position:relative;     }     .logo-pre::after{       content:"AI";position:absolute;inset:0;display:flex;       justify-content:center;align-items:center;font-size:2rem;       color:var(--white);font-weight:800;     }     @keyframes spin{to{transform:rotate(360deg)}}     @keyframes glow{to{filter:drop-shadow(var(--glow))}}      /* ======= BACKGROUND-PARTICLES ======= */     #stars{       position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;       background:#0f0f0f;     }      /* ======= ТОП-БАР ======= */     .topbar{       position:fixed;top:0;left:0;width:100%;padding:8px 20px;       backdrop-filter:blur(10px);background:rgba(15,15,15,.6);       display:flex;justify-content:flex-end;z-index:50     }     .topbar a{color:var(--red);font-weight:600}      /* ======= HERO ======= */     .hero{       min-height:100vh;display:flex;flex-direction:column;       align-items:center;justify-content:center;text-align:center;       padding:120px 20px 80px;position:relative;overflow:hidden     }     .hero h1{       font-size:3.4rem;letter-spacing:1px;margin-bottom:14px;       text-shadow:var(--glow)     }     .hero .brand .navi{color:var(--red)}     .hero .brand .systems{color:var(--white)}     .hero p{max-width:650px;margin-bottom:46px}      /* ======= КНОПКИ ======= */     .btn{       display:inline-block;padding:15px 38px;border-radius:10px;       background:var(--red);color:#000;font-weight:600;letter-spacing:.5px;       box-shadow:0 0 10px #ff3b3b80;transition:transform .25s,box-shadow .25s     }     .btn:hover{transform:scale(1.07);box-shadow:var(--glow)}      /* ======= GLASS-КАРТОЧКИ ======= */     .grid{display:grid;gap:28px;margin-top:40px}     @media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}     .card{       background:var(--card);border-radius:14px;padding:28px;       backdrop-filter:blur(12px);border:1px solid #ffffff1a;       transition:transform .4s,box-shadow .4s     }     .card:hover{transform:translateY(-8px);box-shadow:var(--glow)}      /* ======= STEPS ======= */     .steps{display:grid;gap:22px;margin-top:28px}     .steps div{background:var(--card);padding:20px;border-radius:8px;border-left:6px solid var(--red)}      /* ======= CONTACT ======= */     .contact-box{       background:var(--card);backdrop-filter:blur(10px);       border-radius:14px;padding:34px;display:flex;flex-direction:column;gap:18px     }     .contact-box input,.contact-box textarea{       background:#272727;border:none;border-radius:8px;padding:14px;color:var(--white)     }      /* ======= FOOTER ======= */     footer{       background:#161616;text-align:center;padding:32px 15px;       font-size:.9rem;color:#888     }     footer a{color:var(--red)}      /* SMALL UTILITIES */     .section{padding:90px 20px;max-width:1100px;margin:auto}     h2.section-title{text-align:center;font-size:2.2rem;margin-bottom:28px;text-shadow:0 0 6px #ff3b3b55}   </style> </head> <body>  <!-- === PRELOADER === --> <div id="preloader"><div class="logo-pre"></div></div>  <!-- === STAR-PARTICLES CANVAS === --> <canvas id="stars"></canvas>  <!-- === TOP-BAR TEL === --> <div class="topbar">   <a href="tel:+79181364222">📞 +7 918 136-42-22</a> </div>  <!-- === HERO === --> <header class="hero">   <h1 class="brand" data-aos="zoom-in" data-aos-duration="1200">     <span class="navi">NAVI</span> <span class="systems">SYSTEMS</span>   </h1>   <p data-aos="fade-up" data-aos-delay="200">     Инновационные решения по автоэлектронике и навигации.<br>     Адрес: <strong>ул. 1 Мая 493/22</strong> — звоните <a href="tel:+79181364222">+7 918 136-42-22</a>   </p>   <a href="#services" class="btn" data-aos="fade-up" data-aos-delay="400">Посмотреть услуги</a> </header>  <!-- === УСЛУГИ === --> <section id="services" class="section" data-aos="fade-up">   <h2 class="section-title">Наши сервиса</h2>   <div class="grid">     <div class="card"><h3>Русификация мультимедиа</h3><p>Перевод интерфейса, шаг FM, карты для Европы и СНГ.</p></div>     <div class="card"><h3>Навигация & карты</h3><p>Установка NAV-блоков, актуальные обновления, онлайн-трафик.</p></div>     <div class="card"><h3>Камеры 360° / парктроники</h3><p>5D-обзор, помощь при парковке, штатная интеграция.</p></div>     <div class="card"><h3>Аудио-апгрейд</h3><p>DSP, hi-fi акустика, невидимые сабвуферы.</p></div>     <div class="card"><h3>Диагностика & кодирование</h3><p>Оборудование pro-уровня, миля → км, °F → °C.</p></div>     <div class="card"><h3>ГУ NAVI SYSTEMS</h3><p>Android / CarPlay, полная поддержка CAN-шины.</p></div>   </div> </section>  <!-- === ПРЕИМУЩЕСТВА === --> <section class="section" data-aos="fade-up">   <h2 class="section-title">Почему мы</h2>   <div class="grid">     <div class="card"><h3>10+ лет на рынке</h3><p>С 2013 года — более 5 000 проектов.</p></div>     <div class="card"><h3>Гарантия 12 мес.</h3><p>На оборудование и установку.</p></div>     <div class="card"><h3>Только проверенные бренды</h3><p>Каждая позиция проходит наши стенд-тесты.</p></div>   </div> </section>  <!-- === ЭТАПЫ === --> <section class="section" data-aos="fade-up">   <h2 class="section-title">4 шага к результату</h2>   <div class="steps">     <div><strong>1. Подбор</strong> — решение под вашу марку и комплектацию.</div>     <div><strong>2. Установка</strong> — монтаж без потери дилерской гарантии.</div>     <div><strong>3. Проверка</strong> — тест, обучение владельца.</div>     <div><strong>4. Поддержка</strong> — обновления и помощь 24/7.</div>   </div> </section>  <!-- === CONTACT === --> <section id="contact" class="section" data-aos="fade-up">   <h2 class="section-title">Быстрая заявка</h2>   <form class="contact-box" onsubmit="tgLead(event)">     <input id="name" placeholder="Ваше имя" required/>     <input id="phone" placeholder="Телефон / Telegram" value="+7 918 136-42-22"/>     <textarea id="msg" rows="4" placeholder="Что интересует?"></textarea>     <button type="submit" class="btn">Отправить</button>   </form>   <p style="text-align:center;margin-top:22px;">или пишите в TG <a href="https://t.me/Denis_2024" target="_blank">@Denis_2024</a></p> </section>  <!-- === FOOTER === --> <footer>   © 2025 <span class="brand"><span class="navi">NAVI</span> <span class="systems">SYSTEMS</span></span> |   ул. 1 Мая 493/22 | +7 918 136-42-22 </footer>  <!-- ===== SCRIPTS ===== --> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script>   AOS.init({once:true,duration:800});    /* --- TG lead --- */   function tgLead(e){     e.preventDefault();     const n=document.getElementById('name').value.trim();     const p=document.getElementById('phone').value.trim();     const m=document.getElementById('msg').value.trim();     const text=encodeURIComponent(       `Заявка с сайта NAVI SYSTEMS:%0AИмя: ${n}%0AКонтакт: ${p}%0AСообщение: ${m}`     );     window.open(`https://t.me/share/url?url=&text=${text}`,'_blank');     e.target.reset();alert('Спасибо! Мы свяжемся в ближайшее время.');   }    /* --- Preloader fade-out --- */   window.addEventListener('load',()=>{document.getElementById('preloader').style.display='none'});    /* --- Simple star-particles --- */   const canvas=document.getElementById('stars'),ctx=canvas.getContext('2d');   let w,h,stars=[];   function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight}   window.onresize=resize;resize();   for(let i=0;i<120;i++){     stars.push({x:Math.random()*w,y:Math.random()*h,r:Math.random()*1.2+0.2,dx:(Math.random()-.5)*0.3,dy:(Math.random()-.5)*0.3});   }   function draw(){     ctx.clearRect(0,0,w,h);     ctx.fillStyle="#ffffff22";     stars.forEach(s=>{       s.x+=s.dx;s.y+=s.dy;       if(s.x<0||s.x>w)s.dx*=-1;if(s.y<0||s.y>h)s.dy*=-1;       ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,Math.PI*2);ctx.fill();     });     requestAnimationFrame(draw);   }draw(); </script> </body> </html>  чат отредактируй код под свои возможности и напиши сайт.
-Не загружается найди ошибку исправь.

 <!DOCTYPE html> <html lang="ru"> <head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width,initial-scale=1.0" />   <title>NAVI SYSTEMS | Автоэлектроника будущего</title>    <!-- Google-шрифт -->   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />    <!-- AOS (анимация появления) -->   <link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet"/>    <style>     /* ======= ПЕРЕМЕННЫЕ ======= */     :root{       --bg:#0f0f0f;       --card:#181818b3;            /* glass-card α */       --red:#ff3b3b;       --white:#ffffff;       --glow:0 0 12px #ff3b3b,0 0 24px #ff3b3b66;     }     /* ======= ОБНУЛЕНИЕ ======= */     *{box-sizing:border-box;margin:0;padding:0}     html{scroll-behavior:smooth}     body{       font-family:"Inter",sans-serif;       background:var(--bg);       color:var(--white);       line-height:1.6;       overflow-x:hidden;     }     h1,h2,h3{font-weight:800}     a{color:var(--red);text-decoration:none}     button,input,textarea{font-family:inherit}      /* ======= ПРЕЛОАДЕР ======= */     #preloader{       position:fixed;inset:0;background:var(--bg);display:flex;       justify-content:center;align-items:center;z-index:9999;     }     .logo-pre{       width:120px;height:120px;border-radius:50%;       border:3px solid transparent;border-top:3px solid var(--red);       animation:spin 1.4s linear infinite,glow 2s ease-in-out infinite alternate;       position:relative;     }     .logo-pre::after{       content:"AI";position:absolute;inset:0;display:flex;       justify-content:center;align-items:center;font-size:2rem;       color:var(--white);font-weight:800;     }     @keyframes spin{to{transform:rotate(360deg)}}     @keyframes glow{to{filter:drop-shadow(var(--glow))}}      /* ======= BACKGROUND-PARTICLES ======= */     #stars{       position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;       background:#0f0f0f;     }      /* ======= ТОП-БАР ======= */     .topbar{       position:fixed;top:0;left:0;width:100%;padding:8px 20px;       backdrop-filter:blur(10px);background:rgba(15,15,15,.6);       display:flex;justify-content:flex-end;z-index:50     }     .topbar a{color:var(--red);font-weight:600}      /* ======= HERO ======= */     .hero{       min-height:100vh;display:flex;flex-direction:column;       align-items:center;justify-content:center;text-align:center;       padding:120px 20px 80px;position:relative;overflow:hidden     }     .hero h1{       font-size:3.4rem;letter-spacing:1px;margin-bottom:14px;       text-shadow:var(--glow)     }     .hero .brand .navi{color:var(--red)}     .hero .brand .systems{color:var(--white)}     .hero p{max-width:650px;margin-bottom:46px}      /* ======= КНОПКИ ======= */     .btn{       display:inline-block;padding:15px 38px;border-radius:10px;       background:var(--red);color:#000;font-weight:600;letter-spacing:.5px;       box-shadow:0 0 10px #ff3b3b80;transition:transform .25s,box-shadow .25s     }     .btn:hover{transform:scale(1.07);box-shadow:var(--glow)}      /* ======= GLASS-КАРТОЧКИ ======= */     .grid{display:grid;gap:28px;margin-top:40px}     @media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}     .card{       background:var(--card);border-radius:14px;padding:28px;       backdrop-filter:blur(12px);border:1px solid #ffffff1a;       transition:transform .4s,box-shadow .4s     }     .card:hover{transform:translateY(-8px);box-shadow:var(--glow)}      /* ======= STEPS ======= */     .steps{display:grid;gap:22px;margin-top:28px}     .steps div{background:var(--card);padding:20px;border-radius:8px;border-left:6px solid var(--red)}      /* ======= CONTACT ======= */     .contact-box{       background:var(--card);backdrop-filter:blur(10px);       border-radius:14px;padding:34px;display:flex;flex-direction:column;gap:18px     }     .contact-box input,.contact-box textarea{       background:#272727;border:none;border-radius:8px;padding:14px;color:var(--white)     }      /* ======= FOOTER ======= */     footer{       background:#161616;text-align:center;padding:32px 15px;       font-size:.9rem;color:#888     }     footer a{color:var(--red)}      /* SMALL UTILITIES */     .section{padding:90px 20px;max-width:1100px;margin:auto}     h2.section-title{text-align:center;font-size:2.2rem;margin-bottom:28px;text-shadow:0 0 6px #ff3b3b55}   </style> </head> <body>  <!-- === PRELOADER === --> <div id="preloader"><div class="logo-pre"></div></div>  <!-- === STAR-PARTICLES CANVAS === --> <canvas id="stars"></canvas>  <!-- === TOP-BAR TEL === --> <div class="topbar">   <a href="tel:+79181364222">📞 +7 918 136-42-22</a> </div>  <!-- === HERO === --> <header class="hero">   <h1 class="brand" data-aos="zoom-in" data-aos-duration="1200">     <span class="navi">NAVI</span> <span class="systems">SYSTEMS</span>   </h1>   <p data-aos="fade-up" data-aos-delay="200">     Инновационные решения по автоэлектронике и навигации.<br>     Адрес: <strong>ул. 1 Мая 493/22</strong> — звоните <a href="tel:+79181364222">+7 918 136-42-22</a>   </p>   <a href="#services" class="btn" data-aos="fade-up" data-aos-delay="400">Посмотреть услуги</a> </header>  <!-- === УСЛУГИ === --> <section id="services" class="section" data-aos="fade-up">   <h2 class="section-title">Наши сервиса</h2>   <div class="grid">     <div class="card"><h3>Русификация мультимедиа</h3><p>Перевод интерфейса, шаг FM, карты для Европы и СНГ.</p></div>     <div class="card"><h3>Навигация & карты</h3><p>Установка NAV-блоков, актуальные обновления, онлайн-трафик.</p></div>     <div class="card"><h3>Камеры 360° / парктроники</h3><p>5D-обзор, помощь при парковке, штатная интеграция.</p></div>     <div class="card"><h3>Аудио-апгрейд</h3><p>DSP, hi-fi акустика, невидимые сабвуферы.</p></div>     <div class="card"><h3>Диагностика & кодирование</h3><p>Оборудование pro-уровня, миля → км, °F → °C.</p></div>     <div class="card"><h3>ГУ NAVI SYSTEMS</h3><p>Android / CarPlay, полная поддержка CAN-шины.</p></div>   </div> </section>  <!-- === ПРЕИМУЩЕСТВА === --> <section class="section" data-aos="fade-up">   <h2 class="section-title">Почему мы</h2>   <div class="grid">     <div class="card"><h3>10+ лет на рынке</h3><p>С 2013 года — более 5 000 проектов.</p></div>     <div class="card"><h3>Гарантия 12 мес.</h3><p>На оборудование и установку.</p></div>     <div class="card"><h3>Только проверенные бренды</h3><p>Каждая позиция проходит наши стенд-тесты.</p></div>   </div> </section>  <!-- === ЭТАПЫ === --> <section class="section" data-aos="fade-up">   <h2 class="section-title">4 шага к результату</h2>   <div class="steps">     <div><strong>1. Подбор</strong> — решение под вашу марку и комплектацию.</div>     <div><strong>2. Установка</strong> — монтаж без потери дилерской гарантии.</div>     <div><strong>3. Проверка</strong> — тест, обучение владельца.</div>     <div><strong>4. Поддержка</strong> — обновления и помощь 24/7.</div>   </div> </section>  <!-- === CONTACT === --> <section id="contact" class="section" data-aos="fade-up">   <h2 class="section-title">Быстрая заявка</h2>   <form class="contact-box" onsubmit="tgLead(event)">     <input id="name" placeholder="Ваше имя" required/>     <input id="phone" placeholder="Телефон / Telegram" value="+7 918 136-42-22"/>     <textarea id="msg" rows="4" placeholder="Что интересует?"></textarea>     <button type="submit" class="btn">Отправить</button>   </form>   <p style="text-align:center;margin-top:22px;">или пишите в TG <a href="https://t.me/Denis_2024" target="_blank">@Denis_2024</a></p> </section>  <!-- === FOOTER === --> <footer>   © 2025 <span class="brand"><span class="navi">NAVI</span> <span class="systems">SYSTEMS</span></span> |   ул. 1 Мая 493/22 | +7 918 136-42-22 </footer>  <!-- ===== SCRIPTS ===== --> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script>   AOS.init({once:true,duration:800});    /* --- TG lead --- */   function tgLead(e){     e.preventDefault();     const n=document.getElementById('name').value.trim();     const p=document.getElementById('phone').value.trim();     const m=document.getElementById('msg').value.trim();     const text=encodeURIComponent(       `Заявка с сайта NAVI SYSTEMS:%0AИмя: ${n}%0AКонтакт: ${p}%0AСообщение: ${m}`     );     window.open(`https://t.me/share/url?url=&text=${text}`,'_blank');     e.target.reset();alert('Спасибо! Мы свяжемся в ближайшее время.');   }    /* --- Preloader fade-out --- */   window.addEventListener('load',()=>{document.getElementById('preloader').style.display='none'});    /* --- Simple star-particles --- */   const canvas=document.getElementById('stars'),ctx=canvas.getContext('2d');   let w,h,stars=[];   function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight}   window.onresize=resize;resize();   for(let i=0;i<120;i++){     stars.push({x:Math.random()*w,y:Math.random()*h,r:Math.random()*1.2+0.2,dx:(Math.random()-.5)*0.3,dy:(Math.random()-.5)*0.3});   }   function draw(){     ctx.clearRect(0,0,w,h);     ctx.fillStyle="#ffffff22";     stars.forEach(s=>{       s.x+=s.dx;s.y+=s.dy;       if(s.x<0||s.x>w)s.dx*=-1;if(s.y<0||s.y>h)s.dy*=-1;       ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,Math.PI*2);ctx.fill();     });     requestAnimationFrame(draw);   }draw(); </script> </body> </html>  чат отредактируй код под свои возможности и напиши сайт.
+Не загружается найди ошибку исправь.
+Вставь в фон автомобили премиум класса привлекающие взор
+улучши дизайн сайта и изображения автомобилей премиум класса на сайте