feat(branding): add official Mediusa Clinic OS favicon suite, high-resolution OG social card, and update navbar vector logo

public/brand/mediusa-logo.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 100" width="450" height="100">
+  <defs>
+    <linearGradient id="fullMedGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1d3d"/>
+      <stop offset="100%" stop-color="#040915"/>
+    </linearGradient>
+    <filter id="fullMedGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#00b4f8" flood-opacity="0.7"/>
+    </filter>
+  </defs>
+  <!-- Mark -->
+  <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#fullMedGrad)" stroke="#00b4f8" stroke-width="5" filter="url(#fullMedGlow)"/>
+  <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+  <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+  <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="50" cy="38" r="4.5" fill="#00b4f8" filter="url(#fullMedGlow)"/>
+  <!-- Typography -->
+  <text x="114" y="60" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-weight="900" font-size="34" letter-spacing="-0.5px">
+    <tspan fill="#ffffff">MEDIUS</tspan><tspan fill="#00b4f8">A</tspan>
+    <tspan fill="#38bdf8" font-size="26" font-weight="800" dx="10">CLINIC OS</tspan>
+  </text>
+</svg>

public/brand/mediusa-mark.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="medGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1d3d"/>
+      <stop offset="100%" stop-color="#040915"/>
+    </linearGradient>
+    <filter id="medGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="0" stdDeviation="3.5" flood-color="#00b4f8" flood-opacity="0.8"/>
+    </filter>
+  </defs>
+  <!-- Squircle container -->
+  <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#medGrad)" stroke="#00b4f8" stroke-width="5" filter="url(#medGlow)"/>
+  <!-- Hospital Cross Silhouette -->
+  <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <!-- Medical Plus Badge -->
+  <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+  <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+  <!-- Bold White M Monogram -->
+  <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" 
+        fill="none" 
+        stroke="#ffffff" 
+        stroke-width="8" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"/>
+  <!-- Center pulse accent dot -->
+  <circle cx="50" cy="38" r="4.5" fill="#00b4f8" filter="url(#medGlow)"/>
+</svg>

public/favicon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="medGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1d3d"/>
+      <stop offset="100%" stop-color="#040915"/>
+    </linearGradient>
+    <filter id="medGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="0" stdDeviation="3.5" flood-color="#00b4f8" flood-opacity="0.8"/>
+    </filter>
+  </defs>
+  <!-- Squircle container -->
+  <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#medGrad)" stroke="#00b4f8" stroke-width="5" filter="url(#medGlow)"/>
+  <!-- Hospital Cross Silhouette -->
+  <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <!-- Medical Plus Badge -->
+  <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+  <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+  <!-- Bold White M Monogram -->
+  <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" 
+        fill="none" 
+        stroke="#ffffff" 
+        stroke-width="8" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"/>
+  <!-- Center pulse accent dot -->
+  <circle cx="50" cy="38" r="4.5" fill="#00b4f8" filter="url(#medGlow)"/>
+</svg>

public/icon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="medGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1d3d"/>
+      <stop offset="100%" stop-color="#040915"/>
+    </linearGradient>
+    <filter id="medGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="0" stdDeviation="3.5" flood-color="#00b4f8" flood-opacity="0.8"/>
+    </filter>
+  </defs>
+  <!-- Squircle container -->
+  <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#medGrad)" stroke="#00b4f8" stroke-width="5" filter="url(#medGlow)"/>
+  <!-- Hospital Cross Silhouette -->
+  <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <!-- Medical Plus Badge -->
+  <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+  <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+  <!-- Bold White M Monogram -->
+  <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" 
+        fill="none" 
+        stroke="#ffffff" 
+        stroke-width="8" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"/>
+  <!-- Center pulse accent dot -->
+  <circle cx="50" cy="38" r="4.5" fill="#00b4f8" filter="url(#medGlow)"/>
+</svg>

public/logo.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 100" width="450" height="100">
+  <defs>
+    <linearGradient id="fullMedGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1d3d"/>
+      <stop offset="100%" stop-color="#040915"/>
+    </linearGradient>
+    <filter id="fullMedGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#00b4f8" flood-opacity="0.7"/>
+    </filter>
+  </defs>
+  <!-- Mark -->
+  <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#fullMedGrad)" stroke="#00b4f8" stroke-width="5" filter="url(#fullMedGlow)"/>
+  <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+  <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+  <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="50" cy="38" r="4.5" fill="#00b4f8" filter="url(#fullMedGlow)"/>
+  <!-- Typography -->
+  <text x="114" y="60" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-weight="900" font-size="34" letter-spacing="-0.5px">
+    <tspan fill="#ffffff">MEDIUS</tspan><tspan fill="#00b4f8">A</tspan>
+    <tspan fill="#38bdf8" font-size="26" font-weight="800" dx="10">CLINIC OS</tspan>
+  </text>
+</svg>

public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Mediusa Clinic OS",
+  "short_name": "Mediusa OS",
+  "description": "Hospital-Grade Practice Management Platform",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#060d1d",
+  "theme_color": "#060d1d",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/app/icon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="medGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1d3d"/>
+      <stop offset="100%" stop-color="#040915"/>
+    </linearGradient>
+    <filter id="medGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="0" stdDeviation="3.5" flood-color="#00b4f8" flood-opacity="0.8"/>
+    </filter>
+  </defs>
+  <!-- Squircle container -->
+  <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#medGrad)" stroke="#00b4f8" stroke-width="5" filter="url(#medGlow)"/>
+  <!-- Hospital Cross Silhouette -->
+  <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+  <!-- Medical Plus Badge -->
+  <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+  <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+  <!-- Bold White M Monogram -->
+  <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" 
+        fill="none" 
+        stroke="#ffffff" 
+        stroke-width="8" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"/>
+  <!-- Center pulse accent dot -->
+  <circle cx="50" cy="38" r="4.5" fill="#00b4f8" filter="url(#medGlow)"/>
+</svg>

src/app/layout.tsx

@@ -1,10 +1,56 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import './globals.css';
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://mediusa-clinic-os.pages.dev'),
   title: 'Mediusa Clinic OS — Hospital-Grade Practice Management Platform',
   description:
     'Clinical-grade, high-speed practice management platform for chiropractors, physical therapy, and wellness clinics. HIPAA compliant scheduling, paperless intake, ambient AI clinical notes, and billing.',
+  manifest: '/site.webmanifest',
+  icons: {
+    icon: [
+      { url: '/favicon.ico', sizes: 'any' },
+      { url: '/favicon.svg', type: 'image/svg+xml' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
+    ],
+    shortcut: ['/favicon.ico'],
+  },
+  openGraph: {
+    title: 'Mediusa Clinic OS — Hospital-Grade Practice Management Platform',
+    description:
+      'Clinical-grade, high-speed practice management platform for chiropractors, physical therapy, and wellness clinics. HIPAA compliant scheduling, paperless intake, ambient AI clinical notes, and billing.',
+    url: 'https://mediusa-clinic-os.pages.dev',
+    siteName: 'Mediusa Clinic OS',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'Mediusa Clinic OS Logo and Platform',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Mediusa Clinic OS — Hospital-Grade Practice Management Platform',
+    description:
+      'Clinical-grade, high-speed practice management platform for chiropractors, physical therapy, and wellness clinics. HIPAA compliant scheduling, paperless intake, ambient AI clinical notes, and billing.',
+    images: ['/og-image.png'],
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: '#060d1d',
+  width: 'device-width',
+  initialScale: 1,
 };
 
 export default function RootLayout({
@@ -14,9 +60,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="h-full antialiased overflow-x-hidden">
+      <head>
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+      </head>
       <body className="min-h-full flex flex-col bg-slate-50 text-slate-900 font-sans selection:bg-sky-500 selection:text-white transition-colors duration-200 overflow-x-hidden">
         {children}
       </body>
     </html>
   );
 }
+

src/app/page.tsx

@@ -617,9 +617,23 @@ export default function Home() {
             {/* Left Cluster: Hospital Brand & Clinic Identity */}
             <div className="flex items-center gap-2.5 shrink-0">
               <div className="flex items-center gap-2">
-                <span className="w-8 h-8 rounded-lg bg-sky-700 flex items-center justify-center font-black text-xs text-white shadow-xs">
+                <div className="w-8 h-8 shrink-0 rounded-lg overflow-hidden shadow-xs">
-                  +M
+                  <svg viewBox="0 0 100 100" className="w-full h-full">
-                </span>
+                    <defs>
+                      <linearGradient id="navMedGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stopColor="#0a1d3d"/>
+                        <stop offset="100%" stopColor="#040915"/>
+                      </linearGradient>
+                    </defs>
+                    <rect x="7" y="7" width="86" height="86" rx="26" fill="url(#navMedGrad)" stroke="#00b4f8" strokeWidth="5"/>
+                    <rect x="42" y="20" width="16" height="60" rx="5" fill="#00b4f8" opacity="0.18"/>
+                    <rect x="20" y="42" width="60" height="16" rx="5" fill="#00b4f8" opacity="0.18"/>
+                    <rect x="25" y="24" width="14" height="4.5" rx="2" fill="#38bdf8"/>
+                    <rect x="29.75" y="19.25" width="4.5" height="14" rx="2" fill="#38bdf8"/>
+                    <path d="M 27 73 L 27 43 L 50 61 L 73 43 L 73 73" fill="none" stroke="#ffffff" strokeWidth="8" strokeLinecap="round" strokeLinejoin="round"/>
+                    <circle cx="50" cy="38" r="4.5" fill="#00b4f8"/>
+                  </svg>
+                </div>
                 <div>
                   <div className="text-xs font-black tracking-tight text-slate-900 flex items-center gap-1.5">
                     <span>MEDIUSA CLINIC OS</span>