chore: more UI fixes

styles/globals.scss

@@ -105,7 +105,6 @@ strong {
     background: var(--color-accent);
     color: var(--color-primary);
     padding: 0.25rem 0.75rem;
-    border: 1px solid var(--color-primary);
     border-radius: var(--radius-sm);
   }
 }
@@ -150,32 +149,80 @@ strong {
 
 // HERO SECTION
 .hero {
-  display: grid;
-  grid-template-columns: 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--spacing-2xl);
-  align-items: center;
   width: 100%;
 }
 
+.hero-main {
+  display: flex;
+  gap: var(--spacing-2xl);
+  align-items: center;
+}
+
 .hero-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
 }
 
 .hero-title {
-  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-size: clamp(1.75rem, 5vw, 3.5rem);
   font-weight: 800;
   line-height: 1.2;
   color: var(--color-primary);
   animation: fadeInUp 0.6s ease forwards;
   opacity: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+
+  @media (max-width: 767px) {
+    font-size: clamp(1.5rem, 6vw, 2rem);
+    gap: 0.35rem;
+  }
 
   .highlight {
     background: var(--color-accent);
     color: var(--color-primary);
     padding: 0 0.5rem;
     border-bottom: 2px solid var(--color-primary);
+
+    @media (max-width: 767px) {
+      padding: 0 0.35rem;
+      border-bottom: 1px solid var(--color-primary);
+    }
+  }
+
+  .animated-name-wrapper {
+    display: inline-block;
+    min-width: 0;
+    text-align: left;
+
+    @media (max-width: 767px) {
+      text-align: left;
+    }
+  }
+
+  .animated-name {
+    display: inline-block;
+    transition: opacity 0.5s ease-in-out;
+    white-space: nowrap;
+
+    @media (max-width: 767px) {
+      font-size: 0.95em;
+    }
+
+    &.fade-out {
+      opacity: 0;
+    }
+
+    &.fade-in {
+      opacity: 1;
+    }
   }
 }
 
@@ -333,13 +380,19 @@ strong {
 }
 
 @keyframes heartbeat {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
   }
-  10%, 30% {
+
+  10%,
+  30% {
     transform: scale(1.1);
   }
-  20%, 40% {
+
+  20%,
+  40% {
     transform: scale(1);
   }
 }
@@ -547,10 +600,13 @@ strong {
 }
 
 @keyframes badgePulse {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transform: scale(1);
   }
+
   50% {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     transform: scale(1.05);
@@ -561,6 +617,7 @@ strong {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -625,12 +682,10 @@ strong {
   .skeleton-header,
   .skeleton-rate,
   .skeleton-badge {
-    background: linear-gradient(
-      90deg,
-      var(--color-surface) 0%,
-      var(--color-border) 50%,
-      var(--color-surface) 100%
-    );
+    background: linear-gradient(90deg,
+        var(--color-surface) 0%,
+        var(--color-border) 50%,
+        var(--color-surface) 100%);
     background-size: 200% 100%;
     animation: shimmer 1.5s ease-in-out infinite;
     border-radius: var(--radius-sm);
@@ -657,6 +712,7 @@ strong {
   0% {
     background-position: -200% 0;
   }
+
   100% {
     background-position: 200% 0;
   }
@@ -725,16 +781,16 @@ strong {
     padding: 0 var(--spacing-xl);
   }
 
-  .hero {
-    grid-template-columns: 1.2fr 1fr;
+  .hero-main {
+    flex-direction: row;
   }
 
   .hero-content {
-    order: 1;
+    flex: 1.2;
   }
 
   .hero-image-wrapper {
-    order: 2;
+    flex: 1;
   }
 
   .rates-header {
@@ -758,16 +814,12 @@ strong {
     display: none;
   }
 
-  .hero {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-content {
-    order: 2;
+  .hero-main {
+    flex-direction: column-reverse;
   }
 
   .hero-image-wrapper {
-    order: 1;
+    width: 100%;
     margin-bottom: var(--spacing-lg);
   }