Update styles.css

styles.css

@@ -50,7 +50,7 @@ body {
 
 header {
     text-align: center;
-    padding: 8rem 0 4rem;
+    padding: 8rem 0;
 }
 
 .cosmo-title {
@@ -86,51 +86,77 @@ 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); }
 }
 
-.main-cream {
-    width: 35%;
-    max-width: 450px;
-    height: auto;
-    background: url('cream.png') no-repeat center/contain; /* Замените на реальное изображение */
+.hero {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5rem 0;
+    flex-wrap: wrap;
+    gap: 6rem;
+}
+
+.cosmo-product {
+    width: 50%;
+    height: 45rem;
     position: relative;
-    margin: 5rem auto 0;
-    filter: drop-shadow(0 0 50px rgba(0, 255, 204, 0.9)) brightness(1.3);
     transform-style: preserve-3d;
-    transition: transform 0.8s ease, filter 0.8s ease;
-    animation: creamFloat 12s infinite ease-in-out, creamGlow 6s infinite ease-in-out;
+    transition: transform 0.8s ease;
 }
 
-.main-cream:hover, .main-cream.active {
-    transform: translateY(-40px) rotateZ(10deg) translateZ(70px);
-    filter: drop-shadow(0 0 80px rgba(0, 255, 204, 1)) brightness(1.6);
+.holo-layer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
 }
 
-@keyframes creamFloat {
-    0%, 100% { transform: translateY(0) rotateZ(0deg) translateZ(0); }
-    50% { transform: translateY(-30px) rotateZ(5deg) translateZ(50px); }
+.layer-1 {
+    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;
 }
 
-@keyframes creamGlow {
-    0%, 100% { filter: drop-shadow(0 0 50px rgba(0, 255, 204, 0.9)) brightness(1.3); }
-    50% { filter: drop-shadow(0 0 70px rgba(255, 0, 122, 0.9)) brightness(1.5); }
+.layer-2 {
+    background: radial-gradient(circle, rgba(0, 255, 204, 0.6), transparent 70%);
+    filter: blur(25px);
+    animation: holoPulse 6s infinite ease-in-out;
 }
 
-.hero {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5rem 0;
-    flex-wrap: wrap;
-    gap: 6rem;
+.layer-3 {
+    background: radial-gradient(circle, rgba(255, 0, 122, 0.4), transparent 70%);
+    filter: blur(15px);
+    animation: holoPulse 8s infinite ease-in-out reverse;
+}
+
+@keyframes holoFloat {
+    0%, 100% { transform: translateY(0) rotateZ(5deg) translateZ(0); }
+    50% { transform: translateY(-50px) rotateZ(-5deg) translateZ(150px); }
+}
+
+@keyframes holoPulse {
+    0%, 100% { opacity: 0.6; transform: scale(1); }
+    50% { opacity: 0.9; transform: scale(1.15); }
 }
 
 .hero-text {
-    width: 100%;
-    text-align: center;
+    width: 45%;
 }
 
 .hero-text h2 {
@@ -217,15 +243,26 @@ header {
         font-size: 1.8rem;
     }
 
-    .main-cream {
-        width: 50%;
-        max-width: 250px;
+    .header-cream {
+        width: 40%;
+        max-width: 200px;
     }
 
     .hero {
+        flex-direction: column;
+        text-align: center;
         padding: 3rem 0;
     }
 
+    .cosmo-product {
+        width: 90%;
+        height: 30rem;
+    }
+
+    .hero-text {
+        width: 100%;
+    }
+
     .hero-text h2 {
         font-size: 3rem;
     }
@@ -253,9 +290,9 @@ header {
         font-size: 1.4rem;
     }
 
-    .main-cream {
-        width: 60%;
-        max-width: 200px;
+    .header-cream {
+        width: 50%;
+        max-width: 150px;
     }
 
     .hero-text h2 {