Hero, zmiana wielu h2 na

src/components/hero/Hero.astro

@@ -29,18 +29,22 @@ const {
     }
 
     <!-- Podtytuły (lista) -->
-    {subtitle && (
-      Array.isArray(subtitle)
-        ? (
+    {subtitle && Array.isArray(subtitle) && (
       <div class="fuz-hero-subtitles">
-            {subtitle.map((line, i) => (
-              <h2 class="fuz-hero-subtitle" style={`--delay:${i}`}>{line}</h2>
+
+        <!-- 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>
-        )
-        : (
-          <h2 class="fuz-hero-subtitle">{subtitle}</h2>
-        )
     )}
 
     <!-- Opis -->

src/styles/hero.css

@@ -35,8 +35,16 @@
   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);