fix: resize and rearrange hero landing illustrations for tablet and mobile screens

src/components/HeroSection.module.css

@@ -109,11 +109,10 @@
 .heroTitle {
   margin-bottom: clamp(8px, 1vw, 14px);
   color: var(--text-primary);
-  /* Scale title fluidly so it never overflows into illustration zones */
   font-size: clamp(32px, 5vw, 64px);
   line-height: 1.12;
   text-shadow: none;
-  white-space: nowrap;
+  /* Allow wrapping on smaller screens so text never clips */
 }
 
 /* ── Subtitle ───────────────────────────────────────────────── */
@@ -124,7 +123,6 @@
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  white-space: nowrap;
 }
 
 /* ── Action buttons ─────────────────────────────────────────── */
@@ -183,7 +181,6 @@
   font-size: clamp(11px, 1vw, 14px);
   font-weight: 500;
   line-height: 1.6;
-  white-space: nowrap;
 }
 
 [data-theme="dark"] .contactBar {
@@ -223,14 +220,44 @@
 /* ================================================================
    MOBILE  ≤ 640px
    ================================================================ */
-@media (max-width: 640px) {
+/* ================================================================
+   TABLET  501px – 1100px — match the illustration breakpoint
+   ================================================================ */
+@media (max-width: 1100px) and (min-width: 501px) {
+  .heroContent {
+    /* Top-anchor content so it sits nicely in the upper-center zone */
+    justify-content: flex-start;
+    padding-top: clamp(60px, 8vw, 90px);
+  }
+
+  .heroTitle {
+    /* Allow wrapping at tablet so text stays within the center zone */
+    max-width: 520px;
+  }
+
+  .contactBar {
+    /* Wrap contact items on narrow tablets */
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px 14px;
+  }
+
+  .contactDivider {
+    display: none;
+  }
+}
+
+/* ================================================================
+   MOBILE  ≤ 500px  (screensizes under 500px)
+   ================================================================ */
+@media (max-width: 500px) {
   .heroContentWrapper {
     height: auto;
-    min-height: 680px;
+    min-height: 520px;
   }
 
   .topBar {
-    padding-top: 18px;
+    padding: 16px 14px 0;
   }
 
   .iconButton {
@@ -239,47 +266,47 @@
   }
 
   .heroContent {
-    /* Switch to top-anchored layout on mobile */
     height: auto;
-    min-height: 680px;
-    padding: 72px 24px 40px;
+    min-height: 520px;
+    padding: 66px 16px 36px;
     justify-content: flex-start;
   }
 
   .heroTitle {
-    font-size: clamp(30px, 8.5vw, 42px);
+    font-size: clamp(26px, 7.8vw, 36px);
     white-space: normal;
-    max-width: 300px;
+    max-width: 270px;
     line-height: 1.15;
   }
 
   .heroSubtitle {
     white-space: normal;
-    max-width: 260px;
-    letter-spacing: 0.14em;
+    max-width: 250px;
+    font-size: 11px;
+    letter-spacing: 0.12em;
   }
 
   .actionButtons {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     width: 100%;
-    max-width: 320px;
-    gap: 8px;
+    max-width: 276px;
+    gap: 6px;
   }
 
   .heroButton {
     min-width: 0;
     width: auto;
-    height: 42px;
-    padding: 0 8px;
-    font-size: 13px;
+    height: 38px;
+    padding: 0 6px;
+    font-size: 12px;
   }
 
   .contactBar {
     flex-direction: column;
-    gap: 6px;
+    gap: 5px;
     white-space: normal;
-    font-size: 12px;
+    font-size: 11.5px;
   }
 
   .contactItem {