Update styles.css

styles.css

@@ -3,17 +3,17 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
 body {
-    line-height: 1.6;
     color: #1a1a1a;
     background: #fff;
+    overflow-x: hidden;
 }
 
 .container {
-    max-width: 1200px;
+    max-width: 1300px;
     margin: 0 auto;
     padding: 0 20px;
 }
@@ -22,15 +22,16 @@ body {
 .header {
     position: fixed;
     width: 100%;
-    background: #fff;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
     padding: 20px 0;
     z-index: 1000;
-    transition: background 0.3s;
+    transition: padding 0.3s ease;
 }
 
 .header.scrolled {
-    background: #fff;
+    padding: 10px 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 }
 
 .header .container {
@@ -40,16 +41,43 @@ body {
 }
 
 .logo-img {
-    height: 50px;
+    height: 60px;
     width: auto;
+    transition: transform 0.3s ease;
+}
+
+.logo-img:hover {
+    transform: scale(1.05);
+}
+
+.nav {
+    display: flex;
+    align-items: center;
 }
 
 .nav a {
     color: #1a1a1a;
     text-decoration: none;
-    margin-left: 30px;
+    margin-left: 40px;
     font-weight: 600;
-    transition: color 0.3s;
+    font-size: 1.1rem;
+    position: relative;
+    transition: color 0.3s ease;
+}
+
+.nav a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background: #ff6200;
+    bottom: -5px;
+    left: 0;
+    transition: width 0.3s ease;
+}
+
+.nav a:hover::after {
+    width: 100%;
 }
 
 .nav a:hover {
@@ -57,194 +85,235 @@ body {
 }
 
 .cta-btn {
-    padding: 12px 25px;
+    padding: 12px 30px;
     background: #ff6200;
-    border: none;
-    border-radius: 50px;
     color: #fff;
+    text-decoration: none;
+    border-radius: 50px;
     font-weight: 600;
-    cursor: pointer;
-    transition: transform 0.3s, background 0.3s;
+    font-size: 1rem;
+    transition: background 0.3s ease, transform 0.3s ease;
 }
 
 .cta-btn:hover {
-    transform: scale(1.05);
     background: #e65c00;
+    transform: translateY(-2px);
 }
 
 /* Hero */
 .hero {
     height: 100vh;
-    background: linear-gradient(135deg, #ff6200 0%, #ff8c40 100%);
+    background: linear-gradient(145deg, #ff6200 0%, #ff8c40 100%);
     display: flex;
     align-items: center;
+    justify-content: center;
     text-align: center;
     color: #fff;
     position: relative;
     overflow: hidden;
 }
 
+.hero::before {
+    content: '';
+    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;
+}
+
+.hero .container {
+    position: relative;
+    z-index: 2;
+}
+
 .hero-title {
-    font-size: clamp(2.5rem, 5vw, 4rem);
-    font-weight: 700;
+    font-size: clamp(3rem, 6vw, 5.5rem);
+    font-weight: 800;
+    line-height: 1.1;
     margin-bottom: 20px;
-    animation: fadeInUp 1s ease-out;
+    animation: slideIn 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
 
 .hero-subtitle {
-    font-size: clamp(1rem, 2vw, 1.5rem);
-    margin-bottom: 30px;
+    font-size: clamp(1.2rem, 2vw, 1.8rem);
+    font-weight: 400;
     opacity: 0.9;
+    margin-bottom: 40px;
+    animation: fadeIn 1.5s ease-out 0.3s forwards;
+    opacity: 0;
 }
 
 .hero-btn {
     display: inline-block;
-    padding: 15px 30px;
+    padding: 15px 40px;
     background: #fff;
     color: #ff6200;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
-    transition: background 0.3s, color 0.3s;
+    font-size: 1.1rem;
+    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
 }
 
 .hero-btn:hover {
     background: #ff6200;
     color: #fff;
+    transform: translateY(-3px);
 }
 
 /* Services */
 .services {
-    padding: 80px 0;
-    background: #f9f9f9;
-    text-align: center;
+    padding: 100px 0;
+    background: #fff;
 }
 
-.services h2 {
-    font-size: clamp(2rem, 3vw, 3rem);
-    margin-bottom: 50px;
+.section-title {
+    font-size: clamp(2.2rem, 4vw, 3.5rem);
+    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%);
 }
 
 .services-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 30px;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 40px;
 }
 
 .service-card {
-    padding: 30px;
+    padding: 40px;
     background: #fff;
-    border-radius: 15px;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-    transition: transform 0.4s ease, box-shadow 0.4s ease;
+    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;
+    position: relative;
+    overflow: hidden;
+}
+
+.service-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: #ff6200;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s ease;
+}
+
+.service-card:hover::before {
+    transform: scaleX(1);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }
 
 .service-card h3 {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
+    font-weight: 600;
     color: #ff6200;
     margin-bottom: 15px;
 }
 
+.service-card p {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 20px;
+}
+
 .benefits {
     list-style: none;
+    font-size: 1rem;
     color: #333;
-    font-size: 0.95rem;
-    margin-top: 15px;
 }
 
 .benefits li {
-    margin-bottom: 10px;
-}
-
-/* Portfolio */
-.portfolio {
-    padding: 80px 0;
-    background: #fff;
-    text-align: center;
-}
-
-.portfolio h2 {
-    font-size: clamp(2rem, 3vw, 3rem);
-    margin-bottom: 50px;
-}
-
-.portfolio-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
-}
-
-.portfolio-item {
-    height: 200px;
-    background: #f1f1f1;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    border-radius: 10px;
-    transition: background 0.3s;
-}
-
-.portfolio-item:hover {
-    background: #e0e0e0;
+    gap: 8px;
 }
 
 /* Contact */
 .contact {
-    padding: 80px 0;
-    background: #ff6200;
+    padding: 100px 0;
+    background: #1a1a1a;
     color: #fff;
     text-align: center;
 }
 
-.contact h2 {
-    font-size: clamp(2rem, 3vw, 3rem);
-    margin-bottom: 20px;
+.contact-text {
+    font-size: 1.3rem;
+    opacity: 0.8;
+    margin-bottom: 40px;
 }
 
 .contact-btn {
     display: inline-block;
-    padding: 15px 30px;
-    background: #fff;
-    color: #ff6200;
+    padding: 15px 40px;
+    background: #ff6200;
+    color: #fff;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 600;
-    transition: background 0.3s, color 0.3s;
+    font-size: 1.1rem;
+    transition: background 0.3s ease, transform 0.3s ease;
 }
 
 .contact-btn:hover {
-    background: #ff8c40;
-    color: #fff;
+    background: #e65c00;
+    transform: translateY(-3px);
 }
 
 /* Footer */
 .footer {
-    padding: 20px 0;
+    padding: 30px 0;
     background: #1a1a1a;
     color: #fff;
     text-align: center;
+    font-size: 0.9rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Анимации */
-@keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(50px); }
-    to { opacity: 1; transform: translateY(0); }
+@keyframes slideIn {
+    from { opacity: 0; transform: translateY(50px) scale(0.95); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
-.service-card, .portfolio-item {
+.service-card {
     opacity: 0;
     transform: translateY(50px);
-    transition: opacity 0.5s ease, transform 0.5s ease;
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
 
-.service-card.visible, .portfolio-item.visible {
+.service-card.visible {
     opacity: 1;
     transform: translateY(0);
 }
@@ -252,22 +321,26 @@ body {
 /* Адаптивность */
 @media (max-width: 768px) {
     .header .container {
-        flex-direction: column;
-        gap: 20px;
+        flex-wrap: wrap;
+        gap: 15px;
+        justify-content: center;
     }
 
     .nav {
-        display: flex;
         flex-direction: column;
-        text-align: center;
+        gap: 15px;
     }
 
     .nav a {
-        margin: 10px 0;
+        margin-left: 0;
+    }
+
+    .logo-img {
+        height: 50px;
     }
 
     .hero-title {
-        font-size: 2rem;
+        font-size: 2.5rem;
     }
 
     .hero-subtitle {
@@ -277,4 +350,15 @@ body {
     .services-grid {
         grid-template-columns: 1fr;
     }
+
+    .service-card {
+        padding: 30px;
+    }
+}
+
+@media (max-width: 480px) {
+    .cta-btn, .hero-btn, .contact-btn {
+        padding: 12px 30px;
+        font-size: 0.95rem;
+    }
 }