Update styles.css

styles.css

@@ -3,17 +3,17 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Inter', sans-serif;
+    font-family: 'Manrope', sans-serif;
 }
 
 body {
-    color: #1a1a1a;
-    background: #fff;
+    color: #fff;
+    background: #0a0a0a;
     overflow-x: hidden;
 }
 
 .container {
-    max-width: 1300px;
+    max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
 }
@@ -22,8 +22,8 @@ body {
 .header {
     position: fixed;
     width: 100%;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
+    background: rgba(10, 10, 10, 0.8);
+    backdrop-filter: blur(15px);
     padding: 20px 0;
     z-index: 1000;
     transition: padding 0.3s ease;
@@ -31,7 +31,7 @@ body {
 
 .header.scrolled {
     padding: 10px 0;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    background: rgba(10, 10, 10, 0.95);
 }
 
 .header .container {
@@ -43,11 +43,12 @@ body {
 .logo-img {
     height: 60px;
     width: auto;
+    filter: drop-shadow(0 0 10px rgba(255, 98, 0, 0.3));
     transition: transform 0.3s ease;
 }
 
 .logo-img:hover {
-    transform: scale(1.05);
+    transform: rotate(5deg) scale(1.05);
 }
 
 .nav {
@@ -56,7 +57,7 @@ body {
 }
 
 .nav a {
-    color: #1a1a1a;
+    color: #fff;
     text-decoration: none;
     margin-left: 40px;
     font-weight: 600;
@@ -86,42 +87,41 @@ body {
 
 .cta-btn {
     padding: 12px 30px;
-    background: #ff6200;
-    color: #fff;
+    background: rgba(255, 98, 0, 0.1);
+    border: 1px solid #ff6200;
+    color: #ff6200;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
-    transition: background 0.3s ease, transform 0.3s ease;
+    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
 }
 
 .cta-btn:hover {
-    background: #e65c00;
+    background: #ff6200;
+    color: #fff;
     transform: translateY(-2px);
 }
 
 /* Hero */
 .hero {
     height: 100vh;
-    background: linear-gradient(145deg, #ff6200 0%, #ff8c40 100%);
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    color: #fff;
-    position: relative;
     overflow: hidden;
 }
 
-.hero::before {
-    content: '';
+.canvas-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     z-index: 1;
+    background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 100%);
 }
 
 .hero .container {
@@ -130,26 +130,32 @@ body {
 }
 
 .hero-title {
-    font-size: clamp(3rem, 6vw, 5.5rem);
+    font-size: clamp(3.5rem, 7vw, 6rem);
     font-weight: 800;
     line-height: 1.1;
-    margin-bottom: 20px;
-    animation: slideIn 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    background: linear-gradient(45deg, #ff6200, #ff8c40);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 20px rgba(255, 98, 0, 0.3);
+    animation: glow 2s ease-in-out infinite alternate;
 }
 
 .hero-subtitle {
-    font-size: clamp(1.2rem, 2vw, 1.8rem);
+    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
     font-weight: 400;
-    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
     margin-bottom: 40px;
-    animation: fadeIn 1.5s ease-out 0.3s forwards;
+    animation: fadeIn 1.5s ease-out 0.5s forwards;
     opacity: 0;
 }
 
 .hero-btn {
     display: inline-block;
     padding: 15px 40px;
-    background: #fff;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid #ff6200;
+    backdrop-filter: blur(10px);
     color: #ff6200;
     text-decoration: none;
     border-radius: 50px;
@@ -161,48 +167,40 @@ body {
 .hero-btn:hover {
     background: #ff6200;
     color: #fff;
-    transform: translateY(-3px);
+    transform: scale(1.05);
 }
 
 /* Services */
 .services {
-    padding: 100px 0;
-    background: #fff;
+    padding: 120px 0;
+    background: #0a0a0a;
 }
 
 .section-title {
-    font-size: clamp(2.2rem, 4vw, 3.5rem);
+    font-size: clamp(2.5rem, 5vw, 4rem);
     font-weight: 800;
     text-align: center;
-    margin-bottom: 60px;
-    color: #1a1a1a;
-    position: relative;
-}
-
-.section-title::after {
-    content: '';
-    position: absolute;
-    width: 60px;
-    height: 4px;
-    background: #ff6200;
-    bottom: -15px;
-    left: 50%;
-    transform: translateX(-50%);
+    margin-bottom: 80px;
+    background: linear-gradient(45deg, #ff6200, #ff8c40);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 20px rgba(255, 98, 0, 0.3);
 }
 
 .services-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
     gap: 40px;
 }
 
 .service-card {
     padding: 40px;
-    background: #fff;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(15px);
     border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.4s ease;
-    text-align: left;
+    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
     position: relative;
     overflow: hidden;
 }
@@ -213,20 +211,19 @@ body {
     top: 0;
     left: 0;
     width: 100%;
-    height: 4px;
-    background: #ff6200;
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.4s ease;
+    height: 100%;
+    background: linear-gradient(45deg, rgba(255, 98, 0, 0.1), transparent);
+    opacity: 0;
+    transition: opacity 0.5s ease;
 }
 
 .service-card:hover::before {
-    transform: scaleX(1);
+    opacity: 1;
 }
 
 .service-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 
 .service-card h3 {
@@ -238,14 +235,14 @@ body {
 
 .service-card p {
     font-size: 1.1rem;
-    color: #666;
+    color: rgba(255, 255, 255, 0.7);
     margin-bottom: 20px;
 }
 
 .benefits {
     list-style: none;
     font-size: 1rem;
-    color: #333;
+    color: rgba(255, 255, 255, 0.9);
 }
 
 .benefits li {
@@ -257,15 +254,14 @@ body {
 
 /* Contact */
 .contact {
-    padding: 100px 0;
-    background: #1a1a1a;
-    color: #fff;
+    padding: 120px 0;
+    background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 100%);
     text-align: center;
 }
 
 .contact-text {
     font-size: 1.3rem;
-    opacity: 0.8;
+    color: rgba(255, 255, 255, 0.7);
     margin-bottom: 40px;
 }
 
@@ -278,39 +274,40 @@ body {
     border-radius: 50px;
     font-weight: 600;
     font-size: 1.1rem;
-    transition: background 0.3s ease, transform 0.3s ease;
+    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .contact-btn:hover {
     background: #e65c00;
-    transform: translateY(-3px);
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(255, 98, 0, 0.5);
 }
 
 /* Footer */
 .footer {
     padding: 30px 0;
-    background: #1a1a1a;
-    color: #fff;
+    background: #0a0a0a;
+    color: rgba(255, 255, 255, 0.5);
     text-align: center;
     font-size: 0.9rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Анимации */
-@keyframes slideIn {
-    from { opacity: 0; transform: translateY(50px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
+@keyframes glow {
+    from { text-shadow: 0 0 10px rgba(255, 98, 0, 0.3); }
+    to { text-shadow: 0 0 30px rgba(255, 98, 0, 0.7); }
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 .service-card {
     opacity: 0;
     transform: translateY(50px);
-    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .service-card.visible {
@@ -340,7 +337,7 @@ body {
     }
 
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 3rem;
     }
 
     .hero-subtitle {