diff --git a/src/components/hero/Hero.astro b/src/components/hero/Hero.astro
index 8bb905a..4c5f085 100644
--- a/src/components/hero/Hero.astro
+++ b/src/components/hero/Hero.astro
@@ -29,18 +29,22 @@ const {
     }
 
     <!-- Podtytuły (lista) -->
-    {subtitle && (
-      Array.isArray(subtitle)
-        ? (
-          <div class="fuz-hero-subtitles">
-            {subtitle.map((line, i) => (
-              <h2 class="fuz-hero-subtitle" style={`--delay:${i}`}>{line}</h2>
-            ))}
-          </div>
-        )
-        : (
-          <h2 class="fuz-hero-subtitle">{subtitle}</h2>
-        )
+    {subtitle && Array.isArray(subtitle) && (
+      <div class="fuz-hero-subtitles">
+
+        <!-- Pierwszy: H2 -->
+        <h2 class="fuz-hero-subtitle" style={`--delay:0`}>
+          {subtitle[0]}
+        </h2>
+
+        <!-- Reszta: <p> (dla SEO najlepsze) -->
+        {subtitle.slice(1).map((line, i) => (
+          <p class="fuz-hero-subline" style={`--delay:${i + 1}`}>
+            {line}
+          </p>
+        ))}
+
+      </div>
     )}
 
     <!-- Opis -->
diff --git a/src/styles/hero.css b/src/styles/hero.css
index 0da6f24..921ecbe 100644
--- a/src/styles/hero.css
+++ b/src/styles/hero.css
@@ -32,11 +32,19 @@
   animation-name: fade-in;
   animation-duration: 0.8s;
   animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
+  animation-fill-mode: forwards; 
 
   /* Opóźnienie zależne od numeru elementu */
-  animation-delay: calc(var(--delay) * 0.3s);
+  /* animation-delay: calc(var(--delay) * 0.3s); */
 }
+
+.fuz-hero-subline {
+    @apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
+    color: var(--fuz-text-subtle);
+    animation: fade-in 0.3s ease-out forwards;
+    animation-delay: calc(var(--delay) * 0.4s);
+}
+
 .fuz-hero-description {
   @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
   color: var(--fuz-text-subtle);