Update styles.css

styles.css

@@ -7,33 +7,58 @@
 }
 
 body {
-    background: #f5f5f5;
-    color: #333;
-    line-height: 1.6;
+    background: #0f0f0f;
+    color: #fff;
+    overflow-x: hidden;
+}
+
+/* Кастомный курсор */
+.cursor {
+    width: 10px;
+    height: 10px;
+    background: #e74c3c;
+    border-radius: 50%;
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none;
+    transition: all 0.05s ease;
+}
+
+.cursor-follower {
+    width: 40px;
+    height: 40px;
+    border: 2px solid #e74c3c;
+    border-radius: 50%;
+    position: fixed;
+    z-index: 9998;
+    pointer-events: none;
+    transition: all 0.2s ease;
 }
 
 /* Контейнер */
 .container {
-    max-width: 1200px;
+    max-width: 1300px;
     margin: 0 auto;
     padding: 0 20px;
 }
 
 /* Шапка */
 header {
-    background: #fff;
+    background: rgba(20, 20, 20, 0.8);
+    backdrop-filter: blur(15px);
     padding: 20px 0;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 10;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .logo {
-    font-size: 28px;
-    font-weight: bold;
-    color: #e74c3c;
+    font-size: 36px;
+    font-weight: 900;
+    background: linear-gradient(45deg, #e74c3c, #f1c40f);
+    -webkit-background-clip: text;
+    color: transparent;
 }
 
 nav ul {
@@ -43,13 +68,13 @@ nav ul {
 
 nav ul li {
     display: inline;
-    margin-left: 20px;
+    margin-left: 30px;
 }
 
 nav ul li a {
     text-decoration: none;
-    color: #333;
-    font-weight: 500;
+    color: #fff;
+    font-weight: 700;
     transition: color 0.3s;
 }
 
@@ -60,167 +85,227 @@ nav ul li a:hover {
 /* Герой */
 .hero {
     height: 100vh;
-    background: linear-gradient(135deg, #ecf0f1, #dfe4ea);
+    position: relative;
     display: flex;
     align-items: center;
     text-align: center;
 }
 
+#webgl-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.hero .container {
+    z-index: 2;
+}
+
 .hero h2 {
-    font-size: 48px;
+    font-size: 72px;
     font-weight: 900;
-    letter-spacing: 2px;
-    margin-bottom: 20px;
-    animation: fadeIn 1s ease-in;
+    letter-spacing: 4px;
+    background: linear-gradient(45deg, #e74c3c, #f1c40f);
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: fadeInUp 1.2s ease-out;
 }
 
 .hero p {
-    font-size: 24px;
-    margin-bottom: 30px;
+    font-size: 28px;
+    margin: 20px 0 40px;
+    color: #ddd;
 }
 
 .cta-button {
-    padding: 15px 30px;
-    font-size: 18px;
-    background: #e74c3c;
+    padding: 20px 50px;
+    font-size: 22px;
+    background: linear-gradient(45deg, #e74c3c, #c0392b);
     color: #fff;
     border: none;
     border-radius: 50px;
     cursor: pointer;
-    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
-    transition: transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 15px 30px rgba(231, 76, 60, 0.6);
+    transition: all 0.3s ease;
 }
 
 .cta-button:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(231, 76, 60, 0.5);
+    transform: scale(1.1);
+    box-shadow: 0 20px 40px rgba(231, 76, 60, 0.8);
+}
+
+.voice-control {
+    margin-top: 20px;
+}
+
+#voice-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    padding: 10px 20px;
+    color: #fff;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+#voice-btn:hover {
+    background: rgba(231, 76, 60, 0.5);
 }
 
 /* Услуги */
 .services {
-    padding: 80px 0;
-    background: #fff;
+    padding: 120px 0;
 }
 
 .services h3 {
-    font-size: 36px;
+    font-size: 48px;
     text-align: center;
-    margin-bottom: 40px;
+    margin-bottom: 70px;
+    background: linear-gradient(45deg, #fff, #e74c3c);
+    -webkit-background-clip: text;
+    color: transparent;
 }
 
 .service-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
 }
 
 .service-card {
-    background: #ecf0f1;
-    padding: 20px;
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(15px);
+    padding: 40px;
     text-align: center;
-    font-size: 20px;
-    border-radius: 10px;
+    border-radius: 25px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     transition: transform 0.3s;
 }
 
-.service-card:hover {
-    transform: scale(1.05);
+.service-card h4 {
+    font-size: 28px;
+    margin-bottom: 15px;
+}
+
+.service-card p {
+    color: #ccc;
+    font-size: 18px;
 }
 
 /* О нас */
 .about {
-    padding: 80px 0;
-    background: #dfe4ea;
+    padding: 120px 0;
+    background: linear-gradient(135deg, #1f2a44, #0f0f0f);
     text-align: center;
 }
 
 .about h3 {
-    font-size: 36px;
-    margin-bottom: 20px;
+    font-size: 48px;
+    margin-bottom: 30px;
 }
 
 .about p {
-    font-size: 18px;
-    max-width: 800px;
-    margin: 0 auto;
+    font-size: 22px;
+    max-width: 900px;
+    margin: 0 auto 40px;
+    color: #ddd;
+}
+
+#tracking-demo {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+}
+
+#track-input {
+    padding: 15px;
+    font-size: 16px;
+    border: none;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+#tracking-demo button {
+    padding: 15px 30px;
+    background: #e74c3c;
+    border: none;
+    color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
 }
 
 /* Контакты */
 .contact {
-    padding: 80px 0;
-    background: #fff;
+    padding: 120px 0;
     text-align: center;
 }
 
 .contact h3 {
-    font-size: 36px;
-    margin-bottom: 40px;
+    font-size: 48px;
+    margin-bottom: 50px;
 }
 
 form {
     display: flex;
     flex-direction: column;
-    max-width: 500px;
+    max-width: 700px;
     margin: 0 auto;
-    gap: 15px;
+    gap: 25px;
 }
 
 input {
-    padding: 15px;
-    font-size: 16px;
+    padding: 20px;
+    font-size: 18px;
     border: none;
-    border-radius: 10px;
-    background: #ecf0f1;
-    box-shadow: inset 5px 5px 10px #d1d5d8, inset -5px -5px 10px #ffffff;
+    border-radius: 15px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    backdrop-filter: blur(10px);
+}
+
+input::placeholder {
+    color: #bbb;
 }
 
 .submit-button {
-    padding: 15px;
-    font-size: 18px;
-    background: #e74c3c;
+    padding: 20px;
+    font-size: 20px;
+    background: linear-gradient(45deg, #e74c3c, #f1c40f);
     color: #fff;
     border: none;
     border-radius: 50px;
     cursor: pointer;
-    transition: transform 0.3s;
+    transition: all 0.3s ease;
 }
 
 .submit-button:hover {
-    transform: translateY(-5px);
+    transform: scale(1.05);
+    box-shadow: 0 15px 30px rgba(231, 76, 60, 0.6);
 }
 
 /* Футер */
 footer {
-    padding: 20px 0;
-    background: #333;
-    color: #fff;
+    padding: 40px 0;
+    background: #080808;
     text-align: center;
+    color: #666;
 }
 
-/* Анимация */
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+/* Анимации */
+@keyframes fadeInUp {
+    from { transform: translateY(60px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
 }
 
 /* Адаптивность */
 @media (max-width: 768px) {
-    nav ul {
-        float: none;
-        text-align: center;
-        margin-top: 20px;
-    }
-
-    nav ul li {
-        display: block;
-        margin: 10px 0;
-    }
-
-    .hero h2 {
-        font-size: 32px;
-    }
-
-    .hero p {
-        font-size: 18px;
-    }
+    .hero h2 { font-size: 48px; }
+    .hero p { font-size: 20px; }
+    nav ul { float: none; text-align: center; margin-top: 20px; }
+    nav ul li { display: block; margin: 20px 0; }
+    .service-card { padding: 30px; }
 }