style: improve logo formatting and visual presentation

- Increase header logo size from 32px to 40px for better visibility
- Add professional styling with subtle shadows and borders
- Enhance hero section logo with larger size (96px) and better effects
- Add hover animations for improved user interaction
- Improve header layout with better spacing and minimum height
- Add responsive sizing for mobile devices

Author: timkrebs

_sass/_header.scss

@@ -11,7 +11,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: $spacing-md 0;
+    padding: $spacing-lg 0;
+    min-height: 60px;
   }
 
   .site-title {
@@ -27,9 +28,20 @@
     }
 
     .logo {
-      width: 32px;
-      height: 32px;
-      margin-right: $spacing-sm;
+      width: 40px;
+      height: 40px;
+      margin-right: $spacing-md;
+      border-radius: $border-radius;
+      box-shadow: 0 2px 8px rgba(50, 108, 229, 0.2);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      background-color: $white;
+      border: 2px solid rgba(50, 108, 229, 0.1);
+      
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 4px 12px rgba(50, 108, 229, 0.3);
+        border-color: rgba(50, 108, 229, 0.2);
+      }
     }
   }
 

_sass/_home.scss

@@ -14,8 +14,21 @@
     margin-bottom: $spacing-lg;
 
     img {
-      width: 80px;
-      height: 80px;
+      width: 96px;
+      height: 96px;
+      border-radius: $border-radius-lg;
+      box-shadow: 0 8px 24px rgba(50, 108, 229, 0.15);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-4px) scale(1.05);
+        box-shadow: 0 12px 32px rgba(50, 108, 229, 0.25);
+      }
+      
+      @media (max-width: $breakpoint-md) {
+        width: 80px;
+        height: 80px;
+      }
     }
   }