diff --git a/src/components/ECGAnimation.tsx b/src/components/ECGAnimation.tsx
index dd2db48..81964be 100644
--- a/src/components/ECGAnimation.tsx
+++ b/src/components/ECGAnimation.tsx
@@ -414,13 +414,11 @@ export function ECGAnimation({ onComplete, startPosition }: ECGAnimationProps) {
       }
 
       // Calculate viewport and head screen position
-      let headSX: number
-      let viewOff: number
       const headSXEcg = HEAD_SCREEN_RATIO * vw
-      
+
       // Simple continuous scrolling - viewport follows head when it exceeds 75% of screen
-      viewOff = Math.max(0, headWX - headSXEcg)
-      headSX = headWX - viewOff
+      const viewOff = Math.max(0, headWX - headSXEcg)
+      const headSX = headWX - viewOff
 
       // Calculate fade alpha
       let fadeAlpha = 1
diff --git a/src/index.css b/src/index.css
index 3280205..b69f04e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,80 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Premium UI fonts — Elvaro Grotesque (primary) */
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff') format('woff');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Elvaro Grotesque';
+  src: url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff2') format('woff2'),
+       url('/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Premium UI fonts — Blumir (alternative) */
+@font-face {
+  font-family: 'Blumir';
+  src: url('/Fonts/blumir-font-family/WOFF/Blumir-VF.woff2') format('woff2-variations'),
+       url('/Fonts/blumir-font-family/WOFF/Blumir-VF.woff') format('woff-variations');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
   /* Original design system tokens (for boot/ECG phases) */
   --bg: #FFFFFF;
@@ -41,7 +115,8 @@
   --pmr-alert-text: #92400E;
   --pmr-radius: 4px;
   --pmr-radius-login: 12px;
-  --font-inter: 'Inter', system-ui, sans-serif;
+  --font-ui: 'Elvaro Grotesque', system-ui, sans-serif;
+  --font-ui-alt: 'Blumir', system-ui, sans-serif;
   --font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
 }
 
@@ -69,8 +144,11 @@ body {
   .font-mono {
     font-family: 'Fira Code', monospace;
   }
-  .font-inter {
-    font-family: var(--font-inter);
+  .font-ui {
+    font-family: var(--font-ui);
+  }
+  .font-ui-alt {
+    font-family: var(--font-ui-alt);
   }
   .font-geist-mono {
     font-family: var(--font-geist-mono);
@@ -78,7 +156,7 @@ body {
   .pmr-theme {
     background-color: var(--pmr-content);
     color: var(--pmr-text-primary);
-    font-family: var(--font-inter);
+    font-family: var(--font-ui);
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 32503df..83287d3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -58,14 +58,17 @@ export default {
         primary: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
         secondary: ['Inter Tight', 'system-ui', 'sans-serif'],
         mono: ['Fira Code', 'monospace'],
-        inter: ['Inter', 'system-ui', 'sans-serif'],
+        ui: ['Elvaro Grotesque', 'system-ui', 'sans-serif'],
+        'ui-alt': ['Blumir', 'system-ui', 'sans-serif'],
         geist: ['Geist Mono', 'Fira Code', 'monospace'],
       },
       boxShadow: {
         'sm': '0 1px 3px rgba(0,0,0,0.06)',
         'md': '0 4px 12px rgba(0,0,0,0.08)',
         'lg': '0 8px 24px rgba(0,0,0,0.1)',
-        'pmr': '0 1px 2px rgba(0,0,0,0.03)',
+        'pmr': '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)',
+        'pmr-hover': '0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04)',
+        'pmr-banner': '0 2px 8px rgba(0,0,0,0.12)',
       },
       borderRadius: {
         'card': '4px',