Add OwlBoard logo

src/routes/+page.svelte

@@ -28,7 +28,12 @@ const isVerifiedRecently = (dateVal: string | null) => {
 
 <div class="page-wrapper">
     <header class="main-header">
-        <h1>ROUTE_DB</h1>
+        <div class="brand-container">
+            <img src="https://owlboard.info/images/logo/wide_logo.svg" alt="OwlBoard Logo" class="main-logo" />
+            <div class="brand-text">
+                <h1>Routes</h1>
+                <p class="sub-brand">by OwlBoard</p>
+            </div>
         <div class="search-container">
             <input 
                 type="text" 
@@ -93,14 +98,56 @@ const isVerifiedRecently = (dateVal: string | null) => {
         margin-bottom: 1.5rem;
     }
 
-    h1 {
+.brand-container {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .main-logo {
+        /* Adjust height to fit your logo's aspect ratio */
+        height: 48px; 
+        width: auto;
+        display: block;
+    }
+
+    .brand-text h1 {
         font-size: 1.5rem;
         font-weight: 900;
+        margin: 0;
+        line-height: 1;
         letter-spacing: -0.05em;
-        margin: 0 0 1rem 0;
         font-style: italic;
     }
 
+    .sub-brand {
+        font-size: 0.65rem;
+        font-weight: 800;
+        color: #94a3b8;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        margin: 0.2rem 0 0 0;
+    }
+
+    /* Desktop layout adjustment */
+    @media (min-width: 640px) {
+        .main-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 3rem;
+        }
+
+        .brand-container {
+            margin-bottom: 0;
+        }
+
+        .main-logo {
+            height: 56px;
+        }
+    }
+
     .search-input {
         width: 100%;
         padding: 0.8rem 1rem;