Update styles.css

styles.css

@@ -7,58 +7,70 @@
 }
 
 body {
-    background: #0f0f0f;
+    background: #0a0a0a;
     color: #fff;
     overflow-x: hidden;
+    line-height: 1.6;
 }
 
 /* Кастомный курсор */
 .cursor {
-    width: 10px;
-    height: 10px;
-    background: #e74c3c;
+    width: 12px;
+    height: 12px;
+    background: radial-gradient(circle, #ff6b6b, #e74c3c);
     border-radius: 50%;
     position: fixed;
     z-index: 9999;
     pointer-events: none;
     transition: all 0.05s ease;
+    box-shadow: 0 0 15px rgba(231, 76, 60, 0.7);
 }
 
 .cursor-follower {
-    width: 40px;
-    height: 40px;
-    border: 2px solid #e74c3c;
+    width: 50px;
+    height: 50px;
+    border: 2px solid #ff6b6b;
     border-radius: 50%;
     position: fixed;
     z-index: 9998;
     pointer-events: none;
     transition: all 0.2s ease;
+    background: rgba(231, 76, 60, 0.1);
+}
+
+/* Скрытие курсора на мобильных */
+@media (max-width: 768px) {
+    .cursor, .cursor-follower {
+        display: none;
+    }
 }
 
 /* Контейнер */
 .container {
-    max-width: 1300px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 0 20px;
+    padding: 0 30px;
 }
 
 /* Шапка */
 header {
-    background: rgba(20, 20, 20, 0.8);
-    backdrop-filter: blur(15px);
-    padding: 20px 0;
+    background: rgba(10, 10, 10, 0.9);
+    backdrop-filter: blur(20px);
+    padding: 25px 0;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 10;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
 }
 
 .logo {
-    font-size: 36px;
+    font-size: 42px;
     font-weight: 900;
-    background: linear-gradient(45deg, #e74c3c, #f1c40f);
+    background: linear-gradient(135deg, #ff6b6b, #f1c40f);
     -webkit-background-clip: text;
     color: transparent;
+    text-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
 }
 
 nav ul {
@@ -68,18 +80,35 @@ nav ul {
 
 nav ul li {
     display: inline;
-    margin-left: 30px;
+    margin-left: 40px;
 }
 
 nav ul li a {
     text-decoration: none;
     color: #fff;
     font-weight: 700;
-    transition: color 0.3s;
+    font-size: 18px;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+nav ul li a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background: #ff6b6b;
+    bottom: -5px;
+    left: 0;
+    transition: width 0.3s ease;
+}
+
+nav ul li a:hover::after {
+    width: 100%;
 }
 
 nav ul li a:hover {
-    color: #e74c3c;
+    color: #ff6b6b;
 }
 
 /* Герой */
@@ -89,6 +118,7 @@ nav ul li a:hover {
     display: flex;
     align-items: center;
     text-align: center;
+    background: radial-gradient(circle at center, rgba(40, 40, 40, 0.3), #0a0a0a);
 }
 
 #webgl-bg {
@@ -98,6 +128,7 @@ nav ul li a:hover {
     width: 100%;
     height: 100%;
     z-index: 1;
+    opacity: 0.8;
 }
 
 .hero .container {
@@ -105,207 +136,243 @@ nav ul li a:hover {
 }
 
 .hero h2 {
-    font-size: 72px;
+    font-size: 80px;
     font-weight: 900;
-    letter-spacing: 4px;
-    background: linear-gradient(45deg, #e74c3c, #f1c40f);
+    letter-spacing: 5px;
+    background: linear-gradient(135deg, #ff6b6b, #f1c40f);
     -webkit-background-clip: text;
     color: transparent;
-    animation: fadeInUp 1.2s ease-out;
+    animation: fadeInUp 1.5s ease-out;
+    text-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
 }
 
 .hero p {
-    font-size: 28px;
-    margin: 20px 0 40px;
-    color: #ddd;
+    font-size: 32px;
+    margin: 25px 0 50px;
+    color: #eee;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }
 
 .cta-button {
-    padding: 20px 50px;
-    font-size: 22px;
-    background: linear-gradient(45deg, #e74c3c, #c0392b);
+    padding: 25px 60px;
+    font-size: 24px;
+    background: linear-gradient(135deg, #ff6b6b, #e74c3c);
     color: #fff;
     border: none;
     border-radius: 50px;
     cursor: pointer;
-    box-shadow: 0 15px 30px rgba(231, 76, 60, 0.6);
-    transition: all 0.3s ease;
-}
-
-.cta-button:hover {
-    transform: scale(1.1);
-    box-shadow: 0 20px 40px rgba(231, 76, 60, 0.8);
+    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.7);
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: hidden;
 }
 
-.voice-control {
-    margin-top: 20px;
+.cta-button::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transition: all 0.6s ease;
+    transform: translate(-50%, -50%);
 }
 
-#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;
+.cta-button:hover::before {
+    width: 300px;
+    height: 300px;
 }
 
-#voice-btn:hover {
-    background: rgba(231, 76, 60, 0.5);
+.cta-button:hover {
+    transform: translateY(-5px) scale(1.05);
+    box-shadow: 0 20px 50px rgba(255, 107, 107, 0.9);
 }
 
 /* Услуги */
 .services {
-    padding: 120px 0;
+    padding: 150px 0;
+    background: linear-gradient(to bottom, #0a0a0a, #141414);
 }
 
 .services h3 {
-    font-size: 48px;
+    font-size: 54px;
     text-align: center;
-    margin-bottom: 70px;
-    background: linear-gradient(45deg, #fff, #e74c3c);
+    margin-bottom: 80px;
+    background: linear-gradient(135deg, #fff, #ff6b6b);
     -webkit-background-clip: text;
     color: transparent;
+    text-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
 }
 
 .service-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 40px;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 50px;
 }
 
 .service-card {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(15px);
-    padding: 40px;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
+    padding: 50px;
     text-align: center;
-    border-radius: 25px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: transform 0.3s;
+    border-radius: 30px;
+    border: 1px solid rgba(255, 107, 107, 0.2);
+    transition: all 0.4s ease;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.service-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.3);
 }
 
 .service-card h4 {
-    font-size: 28px;
-    margin-bottom: 15px;
+    font-size: 32px;
+    margin-bottom: 20px;
+    color: #ff6b6b;
 }
 
 .service-card p {
-    color: #ccc;
-    font-size: 18px;
+    color: #ddd;
+    font-size: 20px;
 }
 
 /* О нас */
 .about {
-    padding: 120px 0;
-    background: linear-gradient(135deg, #1f2a44, #0f0f0f);
+    padding: 150px 0;
+    background: linear-gradient(135deg, #1f2a44, #0a0a0a);
     text-align: center;
 }
 
 .about h3 {
-    font-size: 48px;
-    margin-bottom: 30px;
+    font-size: 54px;
+    margin-bottom: 40px;
+    color: #fff;
 }
 
 .about p {
-    font-size: 22px;
-    max-width: 900px;
-    margin: 0 auto 40px;
-    color: #ddd;
+    font-size: 24px;
+    max-width: 1000px;
+    margin: 0 auto 50px;
+    color: #eee;
 }
 
 #tracking-demo {
     display: flex;
-    gap: 20px;
+    gap: 25px;
     justify-content: center;
 }
 
 #track-input {
-    padding: 15px;
-    font-size: 16px;
+    padding: 18px;
+    font-size: 18px;
     border: none;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
     color: #fff;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
 #tracking-demo button {
-    padding: 15px 30px;
-    background: #e74c3c;
+    padding: 18px 40px;
+    background: linear-gradient(135deg, #ff6b6b, #e74c3c);
     border: none;
     color: #fff;
-    border-radius: 10px;
+    border-radius: 12px;
     cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+#tracking-demo button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.5);
 }
 
 /* Контакты */
 .contact {
-    padding: 120px 0;
+    padding: 150px 0;
+    background: #0a0a0a;
     text-align: center;
 }
 
 .contact h3 {
-    font-size: 48px;
-    margin-bottom: 50px;
+    font-size: 54px;
+    margin-bottom: 60px;
+    background: linear-gradient(135deg, #fff, #ff6b6b);
+    -webkit-background-clip: text;
+    color: transparent;
 }
 
 form {
     display: flex;
     flex-direction: column;
-    max-width: 700px;
+    max-width: 800px;
     margin: 0 auto;
-    gap: 25px;
+    gap: 30px;
 }
 
 input {
-    padding: 20px;
-    font-size: 18px;
+    padding: 25px;
+    font-size: 20px;
     border: none;
-    border-radius: 15px;
-    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.05);
     color: #fff;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(15px);
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+}
+
+input:focus {
+    outline: none;
+    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
 }
 
 input::placeholder {
-    color: #bbb;
+    color: #ccc;
 }
 
 .submit-button {
-    padding: 20px;
-    font-size: 20px;
-    background: linear-gradient(45deg, #e74c3c, #f1c40f);
+    padding: 25px;
+    font-size: 22px;
+    background: linear-gradient(135deg, #ff6b6b, #f1c40f);
     color: #fff;
     border: none;
     border-radius: 50px;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.4s ease;
+    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.6);
 }
 
 .submit-button:hover {
-    transform: scale(1.05);
-    box-shadow: 0 15px 30px rgba(231, 76, 60, 0.6);
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.8);
 }
 
 /* Футер */
 footer {
-    padding: 40px 0;
-    background: #080808;
+    padding: 50px 0;
+    background: #050505;
     text-align: center;
-    color: #666;
+    color: #777;
+    font-size: 16px;
 }
 
 /* Анимации */
 @keyframes fadeInUp {
-    from { transform: translateY(60px); opacity: 0; }
+    from { transform: translateY(80px); opacity: 0; }
     to { transform: translateY(0); opacity: 1; }
 }
 
 /* Адаптивность */
 @media (max-width: 768px) {
-    .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; }
+    .hero h2 { font-size: 56px; }
+    .hero p { font-size: 24px; }
+    .cta-button { padding: 20px 50px; font-size: 20px; }
+    nav ul { float: none; text-align: center; margin-top: 25px; }
+    nav ul li { display: block; margin: 25px 0; }
+    .services h3, .about h3, .contact h3 { font-size: 42px; }
+    .service-card { padding: 40px; }
 }