Update styles.css

styles.css

@@ -37,7 +37,7 @@ body {
     height: 100%;
     z-index: -1;
     pointer-events: none;
-    mix-blend-mode: screen; /* Улучшает сочетание с фоном */
+    mix-blend-mode: screen;
 }
 
 .container {
@@ -86,6 +86,19 @@ header {
     animation: fadeIn 4s ease-in-out;
 }
 
+.header-cream {
+    width: 20%;
+    max-width: 300px;
+    margin-top: 3rem;
+    filter: drop-shadow(0 0 30px rgba(0, 255, 204, 0.8));
+    animation: floatHeader 8s infinite ease-in-out;
+}
+
+@keyframes floatHeader {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+}
+
 @keyframes fadeIn {
     0% { opacity: 0; transform: translateY(30px); }
     100% { opacity: 0.9; transform: translateY(0); }
@@ -115,7 +128,7 @@ header {
 }
 
 .layer-1 {
-    background: url('cream.png') no-repeat center/contain; /* Замените на реальное изображение */
+    background: url('cream.png') no-repeat center/contain;
     filter: drop-shadow(0 0 70px rgba(0, 255, 204, 1)) brightness(1.4);
     animation: holoFloat 12s infinite ease-in-out;
 }
@@ -230,6 +243,11 @@ header {
         font-size: 1.8rem;
     }
 
+    .header-cream {
+        width: 40%;
+        max-width: 200px;
+    }
+
     .hero {
         flex-direction: column;
         text-align: center;
@@ -272,6 +290,11 @@ header {
         font-size: 1.4rem;
     }
 
+    .header-cream {
+        width: 50%;
+        max-width: 150px;
+    }
+
     .hero-text h2 {
         font-size: 2rem;
     }