Fix Vue website to match HTML mockup styling

- Fix testimonial stars to display horizontally
- Make booking section buttons always visible
- Align footer Get in Touch section to the right
- Add proper video overlay gradients for text visibility
- Fix booking card visibility with white backgrounds
- Improve mobile responsiveness with smaller buttons
- Create 2x2 stats grid for mobile view
- Add Harbor Smith logo as favicon
- Remove scroll indicator from hero section
- Add animated counter for seafarers (0 to 100+)
- Center and resize mobile buttons properly

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/website/assets/css/voyage-layout.css

@@ -117,6 +117,7 @@ img {
     height: 20px;
     display: inline-block;
     margin-right: 8px;
+    flex-shrink: 0;
 }
 
 .spec-icon {
@@ -501,6 +502,16 @@ html {
 .stars {
     color: var(--warm-yellow);
     font-size: 1rem;
+    display: inline-flex;
+    gap: 2px;
+}
+
+/* Ensure stars icons display horizontally */
+.stars i,
+.story-content .stars i,
+.testimonial-highlight .stars i {
+    display: inline-block;
+    margin-right: 2px;
 }
 
 .hero-headline {
@@ -1090,7 +1101,20 @@ html {
 
 @media (max-width: 640px) {
   .service-stats {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);  /* 2x2 grid on mobile */
+    gap: 1rem;
+  }
+
+  .stat-item {
+    padding: 1rem;
+  }
+
+  .stat-item .stat-number {
+    font-size: 2rem;
+  }
+
+  .stat-item .stat-label {
+    font-size: 0.8rem;
   }
 }
 
@@ -1332,11 +1356,31 @@ html {
     transition: var(--transition);
 }
 
+/* Ensure non-featured cards always show with visible background */
+.booking-card:not(.featured) {
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid var(--white);
+}
+
+.booking-card:not(.featured) h3,
+.booking-card:not(.featured) p {
+    color: var(--primary-blue);
+}
+
+.booking-card:not(.featured) .booking-icon {
+    color: var(--warm-orange);
+}
+
 .booking-card:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-5px);
 }
 
+.booking-card:not(.featured):hover {
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-5px);
+}
+
 .booking-card.featured {
     background: var(--gradient-warm);
     border: none;
@@ -1362,18 +1406,29 @@ html {
 .btn-booking {
     width: 100%;
     padding: 0.75rem 1.5rem;
-    background: rgba(255, 255, 255, 0.2);
-    color: var(--white);
+    background: var(--white);
+    color: var(--primary-blue);
     border: 2px solid var(--white);
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Non-featured card buttons */
+.booking-card:not(.featured) .btn-booking {
+    background: var(--primary-blue);
+    color: var(--white);
+    border: 2px solid var(--primary-blue);
 }
 
 .btn-booking:hover {
-    background: var(--white);
-    color: var(--primary-blue);
+    background: var(--gradient-warm);
+    color: var(--white);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }
 
 .btn-booking.primary {
@@ -1401,12 +1456,22 @@ html {
 }
 
 .footer-content {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
+    display: flex;
+    justify-content: space-between;
     gap: var(--space-2xl);
     margin-bottom: var(--space-lg);
 }
 
+.footer-brand {
+    flex: 1;
+    max-width: 500px;
+}
+
+.footer-contact {
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
 .footer-brand h3 {
     font-family: var(--font-display);
     font-size: 2rem;
@@ -1582,23 +1647,84 @@ html {
 
 /* Responsive */
 @media (max-width: 768px) {
+    .hero-voyage {
+        padding: 60px 15px;
+        min-height: 100vh;
+    }
+
+    .hero-content {
+        padding: 0 15px;
+        overflow-x: hidden;
+    }
+
+    /* Responsive logo */
+    .hero-logo {
+        width: 100%;
+        max-width: 90%;
+        margin: 0 auto;
+    }
+
+    .hero-logo img {
+        height: auto;
+        max-height: 150px;
+        width: 100%;
+        max-width: 280px;
+        margin: 20px auto;
+        object-fit: contain;
+    }
+
     .hero-headline {
-        font-size: 3rem;
+        font-size: 2.25rem;
+        line-height: 1.2;
+        margin-bottom: 1rem;
+        padding: 0 10px;
     }
-    
+
     .hero-subtext {
-        font-size: 1rem;
+        font-size: 0.95rem;
+        padding: 0 10px;
+        margin-bottom: 1.5rem;
+        line-height: 1.6;
     }
-    
+
     .hero-actions {
         flex-direction: column;
         width: 100%;
-        padding: 0 var(--space-md);
+        padding: 0;
+        gap: 0.75rem;
+        align-items: center;
     }
-    
+
+    /* Smaller buttons on mobile */
     .btn-primary-warm,
     .btn-secondary-warm {
-        width: 100%;
+        width: 85%;
+        max-width: 260px;
+        padding: 0.65rem 1rem;
+        font-size: 0.875rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 0.5rem;
+    }
+
+    .btn-primary-warm .btn-icon,
+    .btn-secondary-warm .btn-icon {
+        font-size: 0.875rem;
+        width: 16px;
+        height: 16px;
+        margin-right: 0;
+    }
+
+    .trust-badge {
+        padding: 0.4rem 1rem;
+        font-size: 0.8rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .scroll-indicator {
+        display: none;
     }
     
     .welcome-content {