diff --git a/doc/20-HTMX-LEARNING.md b/doc/20-HTMX-LEARNING.md
new file mode 100644
index 0000000..b4bbeed
--- /dev/null
+++ b/doc/20-HTMX-LEARNING.md
@@ -0,0 +1,502 @@
+# HTMX Learning Guide
+
+**Last Updated**: December 2024
+
+## Overview
+
+This document explains HTMX patterns used in this CV website project, with practical examples from the codebase. Use this as a learning resource for understanding HTMX concepts.
+
+## Table of Contents
+
+1. [Core Concepts](#core-concepts)
+2. [Out-of-Band Swaps (OOB)](#out-of-band-swaps-oob)
+3. [Language Switch Pattern](#language-switch-pattern)
+4. [Toggle Patterns](#toggle-patterns)
+5. [Contact Form Pattern](#contact-form-pattern)
+6. [Skeleton Loaders](#skeleton-loaders)
+7. [Common Attributes Reference](#common-attributes-reference)
+
+---
+
+## Core Concepts
+
+### What is HTMX?
+
+HTMX allows you to build modern user interfaces with simple HTML attributes instead of JavaScript. It extends HTML with attributes that enable:
+
+- **AJAX requests** from any element (not just links/forms)
+- **Partial page updates** without full page reloads
+- **CSS transitions** on swaps
+- **WebSocket/SSE** support
+
+### Basic Example
+
+```html
+<!-- Button that fetches content and replaces a target -->
+<button hx-get="/api/content"
+        hx-target="#content-area"
+        hx-swap="innerHTML">
+    Load Content
+</button>
+
+<div id="content-area">
+    <!-- Content will be replaced here -->
+</div>
+```
+
+---
+
+## Out-of-Band Swaps (OOB)
+
+### The Problem
+
+Normal HTMX swaps can only update ONE target element. But what if you need to update MULTIPLE elements with a single request?
+
+**Example**: When switching languages, we need to update:
+- Language selector buttons (show which is active)
+- Page 1 content (header, experience, education)
+- Page 2 content (awards, projects, courses)
+- Footer
+
+### The Solution: `hx-swap-oob`
+
+OOB (Out-of-Band) swaps let you update ANY element on the page by including it in your response with a matching `id`.
+
+```html
+<!-- Server response can include multiple elements -->
+<!-- Main response goes to hx-target -->
+<div>Main content here</div>
+
+<!-- OOB elements update by matching ID -->
+<div id="sidebar" hx-swap-oob="outerHTML">
+    New sidebar content
+</div>
+
+<div id="notification" hx-swap-oob="innerHTML">
+    5 new messages
+</div>
+```
+
+### OOB Swap Types
+
+| Attribute | Effect |
+|-----------|--------|
+| `hx-swap-oob="true"` | Replace inner HTML |
+| `hx-swap-oob="innerHTML"` | Replace inner HTML |
+| `hx-swap-oob="outerHTML"` | Replace entire element including itself |
+| `hx-swap-oob="beforebegin"` | Insert before element |
+| `hx-swap-oob="afterend"` | Insert after element |
+
+---
+
+## Language Switch Pattern
+
+**File**: `templates/language-switch.html`
+
+This is the most complex HTMX pattern in the project - updating the entire CV content when switching languages.
+
+### How It Works
+
+1. **User clicks language button** (EN or ES)
+2. **HTMX sends request** to `/switch-language?lang=es`
+3. **Server renders new content** for both pages in the selected language
+4. **OOB swaps update** both page containers atomically
+
+### The Template Structure
+
+```html
+<!-- templates/language-switch.html -->
+
+<!-- First: Update language selector buttons (OOB) -->
+<div id="language-selector-container" hx-swap-oob="outerHTML">
+    <button class="lang-btn {{if eq .Lang "en"}}active{{end}}"
+            hx-post="/switch-language?lang=en">EN</button>
+    <button class="lang-btn {{if eq .Lang "es"}}active{{end}}"
+            hx-post="/switch-language?lang=es">ES</button>
+</div>
+
+<!-- Second: Update Page 1 content (OOB) -->
+<div id="cv-inner-content-page-1"
+     class="cv-page-content-wrapper"
+     hx-swap-oob="outerHTML"
+     _="on htmx:afterSettle wait 100ms then remove .loading from me">
+
+    {{template "title-badges" .}}
+
+    <div class="page-content">
+        <!-- Left Sidebar -->
+        <aside class="cv-sidebar cv-sidebar-left">
+            {{range .SkillsLeft}}
+            <section>{{.Category}}: {{range .Items}}{{.}}{{end}}</section>
+            {{end}}
+        </aside>
+
+        <!-- Main Content -->
+        <main class="cv-main">
+            {{template "section-header" .}}
+            {{template "section-education" .}}
+            {{template "section-experience" .}}
+        </main>
+    </div>
+</div>
+
+<!-- Third: Update Page 2 content (OOB) -->
+<div id="cv-inner-content-page-2"
+     class="cv-page-content-wrapper"
+     hx-swap-oob="outerHTML"
+     _="on htmx:afterSettle wait 100ms then remove .loading from me">
+
+    {{template "title-badges" .}}
+
+    <div class="page-content">
+        <!-- Main Content -->
+        <main class="cv-main">
+            {{template "section-awards" .}}
+            {{template "section-projects" .}}
+            {{template "section-courses" .}}
+        </main>
+
+        <!-- Right Sidebar -->
+        <aside class="cv-sidebar cv-sidebar-right">
+            {{range .SkillsRight}}
+            <section>{{.Category}}: {{range .Items}}{{.}}{{end}}</section>
+            {{end}}
+        </aside>
+    </div>
+
+    {{template "cv-footer" .}}
+</div>
+```
+
+### Why Two Separate Page Divs?
+
+The CV is designed as a **2-page printable document**:
+
+| Page 1 | Page 2 |
+|--------|--------|
+| Header | Awards |
+| Education | Projects |
+| Skills Summary | Courses |
+| Experience | Languages |
+| Left Sidebar (Skills) | References |
+| | Right Sidebar (More Skills) |
+| | Footer |
+
+Each page has its own layout grid and sidebar positioning, so they need separate containers.
+
+### The Hyperscript Integration
+
+```html
+_="on htmx:afterSettle wait 100ms then remove .loading from me"
+```
+
+This hyperscript:
+1. Listens for `htmx:afterSettle` event (content fully swapped)
+2. Waits 100ms (for CSS transitions)
+3. Removes `.loading` class (hides skeleton, shows content)
+
+### Visual Flow
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  User clicks "ES"                                        │
+└─────────────────────────────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────┐
+│  hx-post="/switch-language?lang=es"                      │
+│  hx-target="#cv-content"                                 │
+│  hx-swap="none"  ← Response body ignored for main swap   │
+└─────────────────────────────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────┐
+│  Server Response Contains:                               │
+│                                                          │
+│  1. Language selector    (hx-swap-oob="outerHTML")       │
+│  2. Page 1 content       (hx-swap-oob="outerHTML")       │
+│  3. Page 2 content       (hx-swap-oob="outerHTML")       │
+└─────────────────────────────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────┐
+│  HTMX matches IDs and swaps all three simultaneously     │
+│  → Atomic update, no flicker                             │
+└─────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Toggle Patterns
+
+### Pattern: `hx-swap="none"` + Cookies
+
+Toggles (length, theme, icons) don't need server-rendered content because:
+1. The server just needs to **set a cookie**
+2. The frontend uses **hyperscript** to toggle UI state
+
+```html
+<!-- Toggle button -->
+<button hx-post="/toggle/length"
+        hx-swap="none"
+        _="on htmx:afterRequest toggle .cv-short .cv-long on #cv-container">
+    Toggle Length
+</button>
+```
+
+### Server Handler
+
+```go
+// Returns 204 No Content - body is ignored anyway
+func (h *CVHandler) ToggleLength(w http.ResponseWriter, r *http.Request) {
+    // Toggle cookie value
+    prefs := middleware.GetPreferences(r)
+    newLength := "long"
+    if prefs.CVLength == "long" {
+        newLength = "short"
+    }
+
+    // Set cookie
+    middleware.SetPreferenceCookie(w, "cv-length", newLength)
+
+    // Return 204 - no body needed
+    w.WriteHeader(http.StatusNoContent)
+}
+```
+
+### Why This Works
+
+1. `hx-swap="none"` tells HTMX to **ignore the response body**
+2. The **cookie gets set** (browser handles this automatically)
+3. **Hyperscript handles UI** changes locally
+4. On **next page load**, server reads cookie and renders correctly
+
+---
+
+## Contact Form Pattern
+
+**File**: `templates/partials/contact/contact-form.html`
+
+### Pattern: `hx-target` + Partial Replacement
+
+```html
+<form hx-post="/api/contact"
+      hx-target="#contact-form-container"
+      hx-swap="innerHTML"
+      hx-indicator="#contact-spinner">
+
+    <input type="email" name="email" required>
+    <textarea name="message" required></textarea>
+
+    <button type="submit">
+        Send
+        <span id="contact-spinner" class="htmx-indicator">...</span>
+    </button>
+</form>
+```
+
+### Server Responses
+
+**Success**: Returns success partial
+```html
+<!-- templates/partials/contact/contact-success.html -->
+<div class="contact-success">
+    <iconify-icon icon="mdi:check-circle"></iconify-icon>
+    <p>Message sent successfully!</p>
+</div>
+```
+
+**Error**: Returns error partial
+```html
+<!-- templates/partials/contact/contact-error.html -->
+<div class="contact-error">
+    <iconify-icon icon="mdi:alert-circle"></iconify-icon>
+    <p>{{.ErrorMessage}}</p>
+</div>
+```
+
+### The `hx-indicator` Pattern
+
+```html
+hx-indicator="#contact-spinner"
+```
+
+HTMX automatically:
+1. Adds `.htmx-request` class to indicator during request
+2. Shows spinner via CSS: `.htmx-indicator { display: none } .htmx-request .htmx-indicator { display: inline }`
+
+---
+
+## Skeleton Loaders
+
+### Pattern: CSS Class Toggle with Hyperscript
+
+The skeleton loader system uses a **dual-state structure**:
+
+```html
+<div class="component-wrapper">
+    <!-- Real content - visible by default -->
+    <div class="actual-content">
+        <h1>John Smith</h1>
+        <p>Software Engineer</p>
+    </div>
+
+    <!-- Skeleton - hidden by default -->
+    <div class="skeleton-content">
+        <div class="skeleton skeleton-name"></div>
+        <div class="skeleton skeleton-text"></div>
+    </div>
+</div>
+```
+
+### CSS State Control
+
+```css
+/* Default: Show content, hide skeleton */
+.component-wrapper .actual-content { opacity: 1; }
+.component-wrapper .skeleton-content { opacity: 0; pointer-events: none; }
+
+/* Loading: Hide content, show skeleton */
+.component-wrapper.loading .actual-content { opacity: 0; }
+.component-wrapper.loading .skeleton-content { opacity: 1; }
+```
+
+### Triggering Loading State
+
+Before language switch:
+```javascript
+// Add .loading to show skeletons
+document.querySelectorAll('.cv-page-content-wrapper').forEach(el => {
+    el.classList.add('loading');
+});
+```
+
+After content loads (via hyperscript):
+```html
+_="on htmx:afterSettle wait 100ms then remove .loading from me"
+```
+
+---
+
+## Common Attributes Reference
+
+### Request Attributes
+
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| `hx-get` | GET request | `hx-get="/api/data"` |
+| `hx-post` | POST request | `hx-post="/api/submit"` |
+| `hx-put` | PUT request | `hx-put="/api/update/1"` |
+| `hx-delete` | DELETE request | `hx-delete="/api/item/1"` |
+
+### Target & Swap Attributes
+
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| `hx-target` | Element to update | `hx-target="#results"` |
+| `hx-swap` | How to swap content | `hx-swap="innerHTML"` |
+| `hx-swap-oob` | Out-of-band swap | `hx-swap-oob="outerHTML"` |
+
+### Swap Values
+
+| Value | Effect |
+|-------|--------|
+| `innerHTML` | Replace inner HTML (default) |
+| `outerHTML` | Replace entire element |
+| `beforebegin` | Insert before element |
+| `afterbegin` | Insert at start of element |
+| `beforeend` | Insert at end of element |
+| `afterend` | Insert after element |
+| `none` | Don't swap (use for side effects only) |
+
+### Trigger Attributes
+
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| `hx-trigger` | Event to trigger request | `hx-trigger="click"` |
+| `hx-indicator` | Loading indicator | `hx-indicator="#spinner"` |
+| `hx-confirm` | Confirmation dialog | `hx-confirm="Are you sure?"` |
+
+### Special Triggers
+
+```html
+<!-- Trigger on input with 500ms debounce -->
+hx-trigger="input changed delay:500ms"
+
+<!-- Trigger on scroll into view -->
+hx-trigger="revealed"
+
+<!-- Trigger on page load -->
+hx-trigger="load"
+
+<!-- Trigger on intersection observer -->
+hx-trigger="intersect"
+```
+
+---
+
+## Best Practices Learned
+
+### 1. Use OOB for Multi-Element Updates
+
+Instead of multiple requests, use OOB swaps:
+
+```html
+<!-- Server returns multiple elements in one response -->
+<div id="main-content">Updated main</div>
+<div id="sidebar" hx-swap-oob="outerHTML">Updated sidebar</div>
+<div id="notification" hx-swap-oob="innerHTML">New notification</div>
+```
+
+### 2. Use `hx-swap="none"` for Side Effects
+
+When you only need server-side effects (cookies, database), skip the swap:
+
+```html
+<button hx-post="/api/favorite"
+        hx-swap="none"
+        _="on htmx:afterRequest toggle .favorited on me">
+```
+
+### 3. Combine HTMX + Hyperscript
+
+HTMX handles server communication; hyperscript handles local UI:
+
+```html
+<button hx-post="/toggle/theme"
+        hx-swap="none"
+        _="on htmx:afterRequest
+           toggle .dark-theme .light-theme on body">
+```
+
+### 4. Use CSS for Loading States
+
+Instead of JavaScript spinners:
+
+```html
+<button hx-indicator=".spinner">
+    Submit <span class="spinner htmx-indicator">...</span>
+</button>
+```
+
+```css
+.htmx-indicator { display: none; }
+.htmx-request .htmx-indicator { display: inline; }
+```
+
+### 5. Return Proper HTTP Status Codes
+
+- `200 OK` - Success with content
+- `204 No Content` - Success, no body needed
+- `422 Unprocessable Entity` - Validation errors
+- HTMX handles these gracefully
+
+---
+
+## Further Reading
+
+- [HTMX Documentation](https://htmx.org/docs/)
+- [Hyperscript Documentation](https://hyperscript.org/docs/)
+- [HTMX Examples](https://htmx.org/examples/)
+- Project doc: `doc/2-MODERN-WEB-TECHNIQUES.md` - Full techniques reference
+- Project doc: `doc/4-HYPERSCRIPT-RULES.md` - Hyperscript patterns
diff --git a/internal/middleware/security.go b/internal/middleware/security.go
index 7625451..d9f32e3 100644
--- a/internal/middleware/security.go
+++ b/internal/middleware/security.go
@@ -30,7 +30,7 @@ func SecurityHeaders(next http.Handler) http.Handler {
 
 		// Content Security Policy (comprehensive)
 		csp := "default-src 'self'; " +
-			"script-src 'self' 'unsafe-inline' https://unpkg.com https://cdn.jsdelivr.net https://matomo.morenorub.io; " +
+			"script-src 'self' 'unsafe-inline' https://unpkg.com https://cdn.jsdelivr.net https://esm.sh https://matomo.morenorub.io; " +
 			"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
 			"font-src 'self' https://fonts.gstatic.com; " +
 			"img-src 'self' data: https:; " +
diff --git a/templates/index.html b/templates/index.html
index 20b413d..b4bf6ad 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,342 +1,6 @@
 <!DOCTYPE html>
 <html lang="{{if eq .Lang "es"}}es{{else}}en{{end}}">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <!-- Primary Meta Tags -->
-    <title>{{.CV.Personal.Name}} - {{.CV.SEO.PageTitle}}</title>
-    <meta name="title" content="{{.CV.Personal.Name}} - {{.CV.SEO.MetaTitle}}">
-    <meta name="description" content="{{.CV.Personal.Title}} | {{.CV.SEO.MetaDescription}}">
-    <meta name="keywords" content="{{.CV.Personal.Name}}, {{.CV.SEO.Keywords}}">
-    <meta name="author" content="{{.CV.Personal.Name}}">
-    <meta name="robots" content="index, follow">
-    <link rel="canonical" href="{{.CanonicalURL}}">
-
-    <!-- Hreflang tags for international SEO -->
-    <link rel="alternate" hreflang="en" href="{{.AlternateEN}}">
-    <link rel="alternate" hreflang="es" href="{{.AlternateES}}">
-    <link rel="alternate" hreflang="x-default" href="https://juan.andres.morenorub.io/?lang=en">
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="profile">
-    <meta property="og:url" content="{{.CV.Personal.Website}}">
-    <meta property="og:title" content="{{.CV.Personal.Name}} - {{.CV.SEO.MetaTitle}}">
-    <meta property="og:description" content="{{.CV.Personal.Title}} | {{.CV.SEO.OgDescription}}">
-    <meta property="og:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
-    <meta property="og:locale" content="{{if eq .Lang "es"}}es_ES{{else}}en_US{{end}}">
-    <meta property="og:site_name" content="{{.CV.Personal.Name}}">
-    <meta property="profile:first_name" content="{{.CV.Personal.FirstName}}">
-    <meta property="profile:last_name" content="{{.CV.Personal.LastName}}">
-    <meta property="profile:username" content="{{.CV.Personal.Username}}">
-
-    <!-- Social Media Card (Generic) -->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="{{.CV.Personal.Name}} - {{.CV.SEO.MetaTitle}}">
-    <meta name="twitter:description" content="{{.CV.Personal.Title}}">
-    <meta name="twitter:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
-
-    <!-- HTMX Configuration -->
-    <meta name="htmx-config" content='{"timeout":5000,"defaultSwapStyle":"innerHTML","defaultSwapDelay":0,"defaultSettleDelay":20}'>
-
-    <!-- FOUC Prevention: Inline critical CSS + Apply color theme before page render -->
-    <!-- Critical theme variables inlined to prevent flash of unstyled content -->
-    <style>
-      /* Light theme (default) - critical variables only */
-      :root {
-        --page-bg: #d6d6d6;
-        --paper-bg: #ffffff;
-        --text-primary: #1a1a1a;
-        --sidebar-bg: #d1d4d2;
-      }
-      /* Dark theme - critical variables only */
-      [data-color-theme="dark"] {
-        --page-bg: #3a3a3a;
-        --paper-bg: #1a1a1a;
-        --text-primary: #e0e0e0;
-        --sidebar-bg: #3a3d3e;
-      }
-      /* Auto theme follows system preference */
-      @media (prefers-color-scheme: dark) {
-        [data-color-theme="auto"] {
-          --page-bg: #3a3a3a;
-          --paper-bg: #1a1a1a;
-          --text-primary: #e0e0e0;
-          --sidebar-bg: #3a3d3e;
-        }
-      }
-      /* Apply critical styles immediately */
-      html { background-color: var(--page-bg); }
-      body { color: var(--text-primary); }
-    </style>
-    <script>
-    (function() {
-      // First-time visitors ALWAYS get light theme (paper aesthetic)
-      // Users can switch to dark/auto and their preference is saved
-      let theme = localStorage.getItem('color-theme-mode') || 'light';
-      document.documentElement.setAttribute('data-color-theme', theme);
-    })();
-    </script>
-
-    <!-- Device Detection - Detect real mobile devices vs desktop browser -->
-    <script src="/static/js/device-detection.js"></script>
-
-    <!-- HTMX with SRI (Subresource Integrity) -->
-    <script src="https://unpkg.com/htmx.org@1.9.10"
-            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
-            crossorigin="anonymous"></script>
-
-    <!-- Hyperscript Functions - Must load BEFORE hyperscript library -->
-    <!-- NOTE: cv-functions.js removed - hyperscript def statements are globally available -->
-    <!-- ✅ NO def limit with latest hyperscript - organized by category -->
-    <script type="text/hyperscript" src="/static/hyperscript/utils._hs"></script>
-    <script type="text/hyperscript" src="/static/hyperscript/toggles._hs"></script>
-    <script type="text/hyperscript" src="/static/hyperscript/hover-sync._hs"></script>
-    <script type="text/hyperscript" src="/static/hyperscript/keyboard._hs"></script>
-    <script type="text/hyperscript" src="/static/hyperscript/zoom._hs"></script>
-    <script type="text/hyperscript" src="/static/hyperscript/pdf-modal._hs"></script>
-
-    <!-- Color Theme System (JavaScript - hyperscript had parsing issues with colons in strings) -->
-    <script src="/static/js/color-theme.js"></script>
-
-    <!-- NOTE: footer-buttons-interaction.js removed - moved to hyperscript on footer element -->
-    <!-- NOTE: scroll-at-bottom-handler.js removed - duplicate of handleScroll() in utils._hs -->
-
-    <!-- Hyperscript - Declarative event handling for enhanced interactivity -->
-    <script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
-
-    <!-- Ninja Keys - CMD+K Command Bar -->
-    <script type="module" src="https://unpkg.com/ninja-keys?module"></script>
-
-    <!-- Iconify - Load synchronously for immediate rendering -->
-    <!-- Using unpkg CDN (more reliable than code.iconify.design) -->
-    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
-
-    <!-- CSS - Conditional loading: bundled in production, modular in development -->
-    {{if .IsProduction}}
-    <link rel="stylesheet" href="/static/dist/bundle.min.css">
-    {{else}}
-    <link rel="stylesheet" href="/static/css/main.css">
-    {{end}}
-    <!-- Print styles - loaded separately, only applied when printing -->
-    <link rel="stylesheet" href="/static/css/print.css" media="print">
-
-    <!-- Fonts with Preload -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
-
-    <!-- Structured Data (JSON-LD) - Enhanced for AI-era SEO -->
-    <!-- Person Schema -->
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "Person",
-      "@id": "{{.CV.Personal.Website}}/#person",
-      "name": "{{.CV.Personal.Name}}",
-      "givenName": "{{.CV.Personal.FirstName}}",
-      "familyName": "{{.CV.Personal.LastName}}",
-      "jobTitle": "{{.CV.Personal.Title}}",
-      "description": "{{.CV.Summary}}",
-      "url": "{{.CV.Personal.Website}}",
-      "image": "{{.CV.Personal.Website}}/static/images/profile.jpg",
-      "email": "{{.CV.Personal.Email}}",
-      "telephone": "{{.CV.Personal.Phone}}",
-      "birthDate": "{{.CV.Personal.DateOfBirth}}",
-      "birthPlace": {
-        "@type": "Place",
-        "name": "{{.CV.Personal.PlaceOfBirth}}"
-      },
-      "nationality": {
-        "@type": "Country",
-        "name": "{{.CV.Personal.Citizenship}}"
-      },
-      "address": {
-        "@type": "PostalAddress",
-        "addressLocality": "{{.CV.Personal.Location}}",
-        "addressCountry": "ES"
-      },
-      "sameAs": [
-        "{{.CV.Personal.LinkedIn}}",
-        "{{.CV.Personal.GitHub}}",
-        "{{.CV.Personal.Domestika}}"
-      ],
-      "alumniOf": {
-        "@type": "CollegeOrUniversity",
-        "name": "Universidad de Extremadura",
-        "address": {
-          "@type": "PostalAddress",
-          "addressLocality": "Cáceres",
-          "addressCountry": "ES"
-        }
-      },
-      "knowsAbout": [
-        "Web Development",
-        "SAP Customer Data Cloud",
-        "React",
-        "Node.js",
-        "Go",
-        "HTMX",
-        "AI-Assisted Development",
-        "Full Stack Development",
-        "Authentication Systems",
-        "GDPR Compliance",
-        "Identity Management"
-      ],
-      "knowsLanguage": [
-        {
-          "@type": "Language",
-          "name": "Spanish",
-          "alternateName": "es"
-        },
-        {
-          "@type": "Language",
-          "name": "English",
-          "alternateName": "en"
-        },
-        {
-          "@type": "Language",
-          "name": "Portuguese",
-          "alternateName": "pt"
-        }
-      ],
-      "worksFor": [
-        {
-          "@type": "Organization",
-          "name": "Olympic Broadcasting Services",
-          "url": "https://www.obs.tv/"
-        },
-        {
-          "@type": "Organization",
-          "name": "LIV Golf",
-          "url": "https://www.livgolf.com/"
-        }
-      ],
-      "hasOccupation": [
-        {{- range $i, $exp := .CV.Experience}}{{if $i}},{{end}}
-        {
-          "@type": "Occupation",
-          "name": "{{$exp.Position}}",
-          "occupationLocation": {
-            "@type": "Place",
-            "name": "{{$exp.Location}}"
-          },
-          "description": "{{$exp.ShortDescription}}",
-          "skills": "{{range $j, $tech := $exp.Technologies}}{{if $j}}, {{end}}{{$tech}}{{end}}"
-        }
-        {{- end}}
-      ]
-    }
-    </script>
-
-    <!-- WebSite Schema -->
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "WebSite",
-      "@id": "{{.CV.Personal.Website}}/#website",
-      "name": "{{.CV.Personal.Name}} - Professional CV",
-      "url": "{{.CV.Personal.Website}}",
-      "description": "Interactive curriculum vitae of {{.CV.Personal.Name}}, {{.CV.Personal.Title}}",
-      "inLanguage": ["en", "es"],
-      "author": {
-        "@id": "{{.CV.Personal.Website}}/#person"
-      },
-      "potentialAction": {
-        "@type": "SearchAction",
-        "target": "{{.CV.Personal.Website}}/?lang={search_term_string}",
-        "query-input": "required name=search_term_string"
-      }
-    }
-    </script>
-
-    <!-- BreadcrumbList Schema -->
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "BreadcrumbList",
-      "itemListElement": [
-        {
-          "@type": "ListItem",
-          "position": 1,
-          "name": "Home",
-          "item": "{{.CV.Personal.Website}}"
-        },
-        {
-          "@type": "ListItem",
-          "position": 2,
-          "name": "CV {{if eq .Lang "es"}}(Español){{else}}(English){{end}}",
-          "item": "{{.CV.Personal.Website}}/?lang={{.Lang}}"
-        }
-      ]
-    }
-    </script>
-
-    <!-- ProfilePage Schema (for CV/Resume) -->
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "ProfilePage",
-      "mainEntity": {
-        "@id": "{{.CV.Personal.Website}}/#person"
-      },
-      "dateCreated": "2024-01-01",
-      "dateModified": "{{.CV.Meta.LastUpdated}}",
-      "name": "{{.CV.Personal.Name}} - Curriculum Vitae",
-      "description": "{{.CV.SEO.MetaDescription}}",
-      "inLanguage": "{{.Lang}}"
-    }
-    </script>
-
-    <!-- EducationalOccupationalCredential Schema -->
-    {{range .CV.Education}}
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "EducationalOccupationalCredential",
-      "name": "{{.Degree}}",
-      "description": "{{.Field}}",
-      "educationalLevel": "Bachelor's Degree",
-      "credentialCategory": "degree",
-      "recognizedBy": {
-        "@type": "CollegeOrUniversity",
-        "name": "{{.Institution}}",
-        "address": {
-          "@type": "PostalAddress",
-          "addressLocality": "{{.Location}}"
-        }
-      },
-      "dateCreated": "{{.EndDate}}"
-    }
-    </script>
-    {{end}}
-
-    <!-- Course Schemas -->
-    {{range .CV.Courses}}
-    <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "Course",
-      "name": "{{.Title}}",
-      "description": "{{if .ShortDescription}}{{.ShortDescription}}{{else}}{{.Description}}{{end}}",
-      "provider": {
-        "@type": "Organization",
-        "name": "{{.Institution}}"
-      },
-      "hasCourseInstance": {
-        "@type": "CourseInstance",
-        "courseMode": "onsite",
-        "location": {
-          "@type": "Place",
-          "name": "{{.Location}}"
-        }
-      },
-      "timeRequired": "{{.Duration}}"
-    }
-    </script>
-    {{end}}
-</head>
+{{template "head" .}}
 <body {{if .ThemeClean}}class="theme-clean"{{end}}
       _="on load call initScrollBehavior()
          on scroll from window call handleScroll()
@@ -351,29 +15,35 @@
            if (event.key is 'i' or event.key is 'I') and noMod and not skip then halt the event then call handleToggleShortcut('iconToggle', 'iconToggleMenu') end
            if (event.key is 'v' or event.key is 'V') and noMod and not skip then halt the event then call handleToggleShortcut('themeToggle', 'themeToggleMenu') end
          end">
-    <!-- Top anchor for back-to-top link -->
-    <div id="top"></div>
 
+    <!-- ============================================ -->
+    <!-- TOP NAVIGATION & CONTROLS                   -->
+    <!-- ============================================ -->
+    <div id="top"></div>
     {{template "action-bar" .}}
     {{template "hamburger-menu" .}}
     {{template "color-theme-switcher" .}}
 
-    <!-- Zoom Wrapper (for zoom functionality) -->
+    <!-- ============================================ -->
+    <!-- MAIN CV CONTENT                             -->
+    <!-- ============================================ -->
     <div id="zoom-wrapper" class="zoom-wrapper">
-        <!-- CV Content Container -->
         <div class="cv-container">
             {{template "cv-content.html" .}}
         </div>
-    </div> <!-- End zoom-wrapper -->
+    </div>
 
+    <!-- ============================================ -->
+    <!-- PAGE FOOTER & NOTIFICATIONS                 -->
+    <!-- ============================================ -->
     {{template "page-footer" .}}
-
     {{template "error-toast" .}}
     {{template "pdf-toast" .}}
 
-    <!-- iOS-style blur backdrop for mobile buttons -->
+    <!-- ============================================ -->
+    <!-- FLOATING BUTTONS                            -->
+    <!-- ============================================ -->
     <div class="fixed-buttons-backdrop no-print"></div>
-
     {{template "back-to-top" .}}
     {{template "info-button" .}}
     {{template "download-button" .}}
@@ -382,35 +52,19 @@
     {{template "zoom-toggle-button" .}}
     {{template "shortcuts-button" .}}
     {{template "cmd-k-button" .}}
+
+    <!-- ============================================ -->
+    <!-- MODALS                                      -->
+    <!-- ============================================ -->
     {{template "info-modal" .}}
     {{template "shortcuts-modal" .}}
     {{template "pdf-modal" .}}
     {{template "contact-modal" .}}
     {{template "zoom-control" .}}
 
-    <!-- CMD+K Command Bar -->
-    <ninja-keys id="cmd-k-bar" placeholder="Type a command or search..." hideBreadcrumbs openHotkey="cmd+k,ctrl+k"></ninja-keys>
-
-    <!-- External JavaScript - CSP Compliant -->
-    <script src="/static/js/main.js"></script>
-    <script src="/static/js/ninja-keys-init.js"></script>
-
-    <!-- Matomo Analytics - First-party subdomain to bypass ad blockers -->
-    <script>
-        var _paq = window._paq = window._paq || [];
-        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function() {
-            var u="https://matomo.morenorub.io/";
-            _paq.push(['setTrackerUrl', u+'matomo.php']);
-            _paq.push(['setSiteId', '4']);
-            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.async=true;
-            g.src=u+'matomo.js';
-            s.parentNode.insertBefore(g,s);
-        })();
-    </script>
-    <!-- End Matomo Code -->
+    <!-- ============================================ -->
+    <!-- SCRIPTS & ANALYTICS                         -->
+    <!-- ============================================ -->
+{{template "body-scripts" .}}
 </body>
 </html>
diff --git a/templates/partials/layout/body-scripts.html b/templates/partials/layout/body-scripts.html
new file mode 100644
index 0000000..774bf43
--- /dev/null
+++ b/templates/partials/layout/body-scripts.html
@@ -0,0 +1,93 @@
+{{define "body-scripts"}}
+    <!-- CMD+K Command Bar - Lazy loaded placeholder -->
+    <div id="cmd-k-container"></div>
+
+    <!-- External JavaScript - CSP Compliant -->
+    <script src="/static/js/main.js"></script>
+
+    <!-- Ninja Keys Lazy Loader - Only loads when CMD+K is pressed -->
+    <script>
+    (function() {
+      let ninjaLoaded = false;
+      let ninjaLoading = false;
+
+      async function loadNinjaKeys() {
+        if (ninjaLoaded || ninjaLoading) return;
+        ninjaLoading = true;
+
+        // Use esm.sh with bundle option to reduce module requests
+        await import('https://esm.sh/ninja-keys@1.2.2?bundle');
+
+        // Create the ninja-keys element
+        const container = document.getElementById('cmd-k-container');
+        const ninjaKeys = document.createElement('ninja-keys');
+        ninjaKeys.id = 'cmd-k-bar';
+        ninjaKeys.placeholder = 'Type a command or search...';
+        ninjaKeys.hideBreadcrumbs = true;
+        container.appendChild(ninjaKeys);
+
+        // Load the initialization script
+        const script = document.createElement('script');
+        script.src = '/static/js/ninja-keys-init.js';
+        document.body.appendChild(script);
+
+        ninjaLoaded = true;
+        ninjaLoading = false;
+
+        // Open the palette after a brief delay for initialization
+        setTimeout(() => {
+          if (ninjaKeys.open) ninjaKeys.open();
+        }, 100);
+      }
+
+      function openNinjaKeys() {
+        const nk = document.getElementById('cmd-k-bar');
+        if (nk && typeof nk.open === 'function') {
+          nk.open();
+        }
+      }
+
+      // Listen for CMD+K / Ctrl+K
+      document.addEventListener('keydown', function(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+          e.preventDefault();
+          if (ninjaLoaded) {
+            openNinjaKeys();
+          } else {
+            loadNinjaKeys();
+          }
+        }
+      });
+
+      // Also handle click on cmd-k button
+      document.addEventListener('click', function(e) {
+        if (e.target.closest('#cmd-k-button, .cmd-k-trigger')) {
+          e.preventDefault();
+          if (ninjaLoaded) {
+            openNinjaKeys();
+          } else {
+            loadNinjaKeys();
+          }
+        }
+      });
+    })();
+    </script>
+
+    <!-- Matomo Analytics - First-party subdomain to bypass ad blockers -->
+    <script>
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u="https://matomo.morenorub.io/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '4']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.async=true;
+            g.src=u+'matomo.js';
+            s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    <!-- End Matomo Code -->
+{{end}}
diff --git a/templates/partials/layout/head-fonts.html b/templates/partials/layout/head-fonts.html
new file mode 100644
index 0000000..f19331e
--- /dev/null
+++ b/templates/partials/layout/head-fonts.html
@@ -0,0 +1,7 @@
+{{define "head-fonts"}}
+    <!-- Fonts with Preload -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
+{{end}}
diff --git a/templates/partials/layout/head-fouc-prevention.html b/templates/partials/layout/head-fouc-prevention.html
new file mode 100644
index 0000000..36531ba
--- /dev/null
+++ b/templates/partials/layout/head-fouc-prevention.html
@@ -0,0 +1,40 @@
+{{define "head-fouc-prevention"}}
+    <!-- FOUC Prevention: Inline critical CSS + Apply color theme before page render -->
+    <!-- Critical theme variables inlined to prevent flash of unstyled content -->
+    <style>
+      /* Light theme (default) - critical variables only */
+      :root {
+        --page-bg: #d6d6d6;
+        --paper-bg: #ffffff;
+        --text-primary: #1a1a1a;
+        --sidebar-bg: #d1d4d2;
+      }
+      /* Dark theme - critical variables only */
+      [data-color-theme="dark"] {
+        --page-bg: #3a3a3a;
+        --paper-bg: #1a1a1a;
+        --text-primary: #e0e0e0;
+        --sidebar-bg: #3a3d3e;
+      }
+      /* Auto theme follows system preference */
+      @media (prefers-color-scheme: dark) {
+        [data-color-theme="auto"] {
+          --page-bg: #3a3a3a;
+          --paper-bg: #1a1a1a;
+          --text-primary: #e0e0e0;
+          --sidebar-bg: #3a3d3e;
+        }
+      }
+      /* Apply critical styles immediately */
+      html { background-color: var(--page-bg); }
+      body { color: var(--text-primary); }
+    </style>
+    <script>
+    (function() {
+      // First-time visitors ALWAYS get light theme (paper aesthetic)
+      // Users can switch to dark/auto and their preference is saved
+      let theme = localStorage.getItem('color-theme-mode') || 'light';
+      document.documentElement.setAttribute('data-color-theme', theme);
+    })();
+    </script>
+{{end}}
diff --git a/templates/partials/layout/head-scripts.html b/templates/partials/layout/head-scripts.html
new file mode 100644
index 0000000..55edb5e
--- /dev/null
+++ b/templates/partials/layout/head-scripts.html
@@ -0,0 +1,34 @@
+{{define "head-scripts"}}
+    <!-- Device Detection - Detect real mobile devices vs desktop browser -->
+    <script src="/static/js/device-detection.js"></script>
+
+    <!-- HTMX with SRI (Subresource Integrity) -->
+    <script src="https://unpkg.com/htmx.org@1.9.10"
+            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
+            crossorigin="anonymous"></script>
+
+    <!-- Hyperscript Functions - Must load BEFORE hyperscript library -->
+    <!-- NOTE: cv-functions.js removed - hyperscript def statements are globally available -->
+    <!-- ✅ NO def limit with latest hyperscript - organized by category -->
+    <script type="text/hyperscript" src="/static/hyperscript/utils._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/toggles._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/hover-sync._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/keyboard._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/zoom._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/pdf-modal._hs"></script>
+
+    <!-- Color Theme System (JavaScript - hyperscript had parsing issues with colons in strings) -->
+    <script src="/static/js/color-theme.js"></script>
+
+    <!-- NOTE: footer-buttons-interaction.js removed - moved to hyperscript on footer element -->
+    <!-- NOTE: scroll-at-bottom-handler.js removed - duplicate of handleScroll() in utils._hs -->
+
+    <!-- Hyperscript - Declarative event handling for enhanced interactivity -->
+    <script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
+
+    <!-- Ninja Keys - Lazy loaded on CMD+K (see body-scripts for loader) -->
+
+    <!-- Iconify - Load synchronously for immediate rendering -->
+    <!-- Using unpkg CDN (more reliable than code.iconify.design) -->
+    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
+{{end}}
diff --git a/templates/partials/layout/head-structured-data.html b/templates/partials/layout/head-structured-data.html
new file mode 100644
index 0000000..ca99618
--- /dev/null
+++ b/templates/partials/layout/head-structured-data.html
@@ -0,0 +1,211 @@
+{{define "head-structured-data"}}
+    <!-- Structured Data (JSON-LD) - Enhanced for AI-era SEO -->
+    <!-- Person Schema -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Person",
+      "@id": "{{.CV.Personal.Website}}/#person",
+      "name": "{{.CV.Personal.Name}}",
+      "givenName": "{{.CV.Personal.FirstName}}",
+      "familyName": "{{.CV.Personal.LastName}}",
+      "jobTitle": "{{.CV.Personal.Title}}",
+      "description": "{{.CV.Summary}}",
+      "url": "{{.CV.Personal.Website}}",
+      "image": "{{.CV.Personal.Website}}/static/images/profile.jpg",
+      "email": "{{.CV.Personal.Email}}",
+      "telephone": "{{.CV.Personal.Phone}}",
+      "birthDate": "{{.CV.Personal.DateOfBirth}}",
+      "birthPlace": {
+        "@type": "Place",
+        "name": "{{.CV.Personal.PlaceOfBirth}}"
+      },
+      "nationality": {
+        "@type": "Country",
+        "name": "{{.CV.Personal.Citizenship}}"
+      },
+      "address": {
+        "@type": "PostalAddress",
+        "addressLocality": "{{.CV.Personal.Location}}",
+        "addressCountry": "ES"
+      },
+      "sameAs": [
+        "{{.CV.Personal.LinkedIn}}",
+        "{{.CV.Personal.GitHub}}",
+        "{{.CV.Personal.Domestika}}"
+      ],
+      "alumniOf": {
+        "@type": "CollegeOrUniversity",
+        "name": "Universidad de Extremadura",
+        "address": {
+          "@type": "PostalAddress",
+          "addressLocality": "Cáceres",
+          "addressCountry": "ES"
+        }
+      },
+      "knowsAbout": [
+        "Web Development",
+        "SAP Customer Data Cloud",
+        "React",
+        "Node.js",
+        "Go",
+        "HTMX",
+        "AI-Assisted Development",
+        "Full Stack Development",
+        "Authentication Systems",
+        "GDPR Compliance",
+        "Identity Management"
+      ],
+      "knowsLanguage": [
+        {
+          "@type": "Language",
+          "name": "Spanish",
+          "alternateName": "es"
+        },
+        {
+          "@type": "Language",
+          "name": "English",
+          "alternateName": "en"
+        },
+        {
+          "@type": "Language",
+          "name": "Portuguese",
+          "alternateName": "pt"
+        }
+      ],
+      "worksFor": [
+        {
+          "@type": "Organization",
+          "name": "Olympic Broadcasting Services",
+          "url": "https://www.obs.tv/"
+        },
+        {
+          "@type": "Organization",
+          "name": "LIV Golf",
+          "url": "https://www.livgolf.com/"
+        }
+      ],
+      "hasOccupation": [
+        {{- range $i, $exp := .CV.Experience}}{{if $i}},{{end}}
+        {
+          "@type": "Occupation",
+          "name": "{{$exp.Position}}",
+          "occupationLocation": {
+            "@type": "Place",
+            "name": "{{$exp.Location}}"
+          },
+          "description": "{{$exp.ShortDescription}}",
+          "skills": "{{range $j, $tech := $exp.Technologies}}{{if $j}}, {{end}}{{$tech}}{{end}}"
+        }
+        {{- end}}
+      ]
+    }
+    </script>
+
+    <!-- WebSite Schema -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "@id": "{{.CV.Personal.Website}}/#website",
+      "name": "{{.CV.Personal.Name}} - Professional CV",
+      "url": "{{.CV.Personal.Website}}",
+      "description": "Interactive curriculum vitae of {{.CV.Personal.Name}}, {{.CV.Personal.Title}}",
+      "inLanguage": ["en", "es"],
+      "author": {
+        "@id": "{{.CV.Personal.Website}}/#person"
+      },
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": "{{.CV.Personal.Website}}/?lang={search_term_string}",
+        "query-input": "required name=search_term_string"
+      }
+    }
+    </script>
+
+    <!-- BreadcrumbList Schema -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "{{.CV.Personal.Website}}"
+        },
+        {
+          "@type": "ListItem",
+          "position": 2,
+          "name": "CV {{if eq .Lang "es"}}(Español){{else}}(English){{end}}",
+          "item": "{{.CV.Personal.Website}}/?lang={{.Lang}}"
+        }
+      ]
+    }
+    </script>
+
+    <!-- ProfilePage Schema (for CV/Resume) -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "ProfilePage",
+      "mainEntity": {
+        "@id": "{{.CV.Personal.Website}}/#person"
+      },
+      "dateCreated": "2024-01-01",
+      "dateModified": "{{.CV.Meta.LastUpdated}}",
+      "name": "{{.CV.Personal.Name}} - Curriculum Vitae",
+      "description": "{{.CV.SEO.MetaDescription}}",
+      "inLanguage": "{{.Lang}}"
+    }
+    </script>
+
+    <!-- EducationalOccupationalCredential Schema -->
+    {{range .CV.Education}}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "EducationalOccupationalCredential",
+      "name": "{{.Degree}}",
+      "description": "{{.Field}}",
+      "educationalLevel": "Bachelor's Degree",
+      "credentialCategory": "degree",
+      "recognizedBy": {
+        "@type": "CollegeOrUniversity",
+        "name": "{{.Institution}}",
+        "address": {
+          "@type": "PostalAddress",
+          "addressLocality": "{{.Location}}"
+        }
+      },
+      "dateCreated": "{{.EndDate}}"
+    }
+    </script>
+    {{end}}
+
+    <!-- Course Schemas -->
+    {{range .CV.Courses}}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Course",
+      "name": "{{.Title}}",
+      "description": "{{if .ShortDescription}}{{.ShortDescription}}{{else}}{{.Description}}{{end}}",
+      "provider": {
+        "@type": "Organization",
+        "name": "{{.Institution}}"
+      },
+      "hasCourseInstance": {
+        "@type": "CourseInstance",
+        "courseMode": "onsite",
+        "location": {
+          "@type": "Place",
+          "name": "{{.Location}}"
+        }
+      },
+      "timeRequired": "{{.Duration}}"
+    }
+    </script>
+    {{end}}
+{{end}}
diff --git a/templates/partials/layout/head-styles.html b/templates/partials/layout/head-styles.html
new file mode 100644
index 0000000..a5b568e
--- /dev/null
+++ b/templates/partials/layout/head-styles.html
@@ -0,0 +1,10 @@
+{{define "head-styles"}}
+    <!-- CSS - Conditional loading: bundled in production, modular in development -->
+    {{if .IsProduction}}
+    <link rel="stylesheet" href="/static/dist/bundle.min.css">
+    {{else}}
+    <link rel="stylesheet" href="/static/css/main.css">
+    {{end}}
+    <!-- Print styles - loaded separately, only applied when printing -->
+    <link rel="stylesheet" href="/static/css/print.css" media="print">
+{{end}}
diff --git a/templates/partials/layout/head.html b/templates/partials/layout/head.html
new file mode 100644
index 0000000..8170518
--- /dev/null
+++ b/templates/partials/layout/head.html
@@ -0,0 +1,47 @@
+{{define "head"}}
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Primary Meta Tags -->
+    <title>{{.CV.Personal.Name}} - {{.CV.SEO.PageTitle}}</title>
+    <meta name="title" content="{{.CV.Personal.Name}} - {{.CV.SEO.MetaTitle}}">
+    <meta name="description" content="{{.CV.Personal.Title}} | {{.CV.SEO.MetaDescription}}">
+    <meta name="keywords" content="{{.CV.Personal.Name}}, {{.CV.SEO.Keywords}}">
+    <meta name="author" content="{{.CV.Personal.Name}}">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="{{.CanonicalURL}}">
+
+    <!-- Hreflang tags for international SEO -->
+    <link rel="alternate" hreflang="en" href="{{.AlternateEN}}">
+    <link rel="alternate" hreflang="es" href="{{.AlternateES}}">
+    <link rel="alternate" hreflang="x-default" href="https://juan.andres.morenorub.io/?lang=en">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="profile">
+    <meta property="og:url" content="{{.CV.Personal.Website}}">
+    <meta property="og:title" content="{{.CV.Personal.Name}} - {{.CV.SEO.MetaTitle}}">
+    <meta property="og:description" content="{{.CV.Personal.Title}} | {{.CV.SEO.OgDescription}}">
+    <meta property="og:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
+    <meta property="og:locale" content="{{if eq .Lang "es"}}es_ES{{else}}en_US{{end}}">
+    <meta property="og:site_name" content="{{.CV.Personal.Name}}">
+    <meta property="profile:first_name" content="{{.CV.Personal.FirstName}}">
+    <meta property="profile:last_name" content="{{.CV.Personal.LastName}}">
+    <meta property="profile:username" content="{{.CV.Personal.Username}}">
+
+    <!-- Social Media Card (Generic) -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="{{.CV.Personal.Name}} - {{.CV.SEO.MetaTitle}}">
+    <meta name="twitter:description" content="{{.CV.Personal.Title}}">
+    <meta name="twitter:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
+
+    <!-- HTMX Configuration -->
+    <meta name="htmx-config" content='{"timeout":5000,"defaultSwapStyle":"innerHTML","defaultSwapDelay":0,"defaultSettleDelay":20}'>
+
+{{template "head-fouc-prevention" .}}
+{{template "head-scripts" .}}
+{{template "head-styles" .}}
+{{template "head-fonts" .}}
+{{template "head-structured-data" .}}
+</head>
+{{end}}
diff --git a/templates/partials/modals/contact-modal.html b/templates/partials/modals/contact-modal.html
index 5b2f743..46c2726 100644
--- a/templates/partials/modals/contact-modal.html
+++ b/templates/partials/modals/contact-modal.html
@@ -17,7 +17,7 @@
                if responseDiv set responseDiv.innerHTML to ''
              end">
     <div class="info-modal-content">
-        <button class="info-modal-close" onclick="document.getElementById('contact-modal').close()" aria-label="{{.UI.ContactModal.Close}}">
+        <button class="info-modal-close" commandfor="contact-modal" command="close" aria-label="{{.UI.ContactModal.Close}}">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
         </button>
 
diff --git a/templates/partials/modals/info-modal.html b/templates/partials/modals/info-modal.html
index 8ff57fd..9111e61 100644
--- a/templates/partials/modals/info-modal.html
+++ b/templates/partials/modals/info-modal.html
@@ -3,7 +3,7 @@
 <dialog id="info-modal" class="info-modal no-print"
         _="on click call closeOnBackdrop(me, event)">
     <div class="info-modal-content">
-        <button class="info-modal-close" onclick="document.getElementById('info-modal').close()" aria-label="{{.UI.PdfModal.Close}}">
+        <button class="info-modal-close" commandfor="info-modal" command="close" aria-label="{{.UI.PdfModal.Close}}">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
         </button>
 
diff --git a/templates/partials/modals/pdf-modal.html b/templates/partials/modals/pdf-modal.html
index 9172127..0b6984c 100644
--- a/templates/partials/modals/pdf-modal.html
+++ b/templates/partials/modals/pdf-modal.html
@@ -19,7 +19,8 @@
 
         <!-- Close Button -->
         <button class="info-modal-close"
-                onclick="document.getElementById('pdf-modal').close()"
+                commandfor="pdf-modal"
+                command="close"
                 aria-label="{{.UI.PdfModal.Close}}">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
         </button>
diff --git a/templates/partials/modals/shortcuts-modal.html b/templates/partials/modals/shortcuts-modal.html
index 01e9e9d..2caffdd 100644
--- a/templates/partials/modals/shortcuts-modal.html
+++ b/templates/partials/modals/shortcuts-modal.html
@@ -3,7 +3,7 @@
 <dialog id="shortcuts-modal" class="info-modal no-print"
         _="on click call closeOnBackdrop(me, event)">
     <div class="info-modal-content">
-        <button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{.UI.ShortcutsModal.Close}}">
+        <button class="info-modal-close" commandfor="shortcuts-modal" command="close" aria-label="{{.UI.ShortcutsModal.Close}}">
             <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
         </button>
 
diff --git a/templates/partials/navigation/action-buttons.html b/templates/partials/navigation/action-buttons.html
index bb0857b..cd91816 100644
--- a/templates/partials/navigation/action-buttons.html
+++ b/templates/partials/navigation/action-buttons.html
@@ -4,7 +4,8 @@
     <button
         id="action-bar-pdf-btn"
         class="action-btn pdf-btn has-tooltip"
-        onclick="document.getElementById('pdf-modal').showModal()"
+        commandfor="pdf-modal"
+        command="show-modal"
         aria-label="{{.UI.Widgets.ActionButtons.DownloadPdf}}"
         data-tooltip="{{.UI.Widgets.ActionButtons.DownloadPdf}}"
         _="on mouseenter call syncPdfHover(true)
@@ -23,10 +24,9 @@
         {{.UI.Widgets.ActionButtons.PrintFriendly}}
     </button>
     <button
-        class="action-btn search-btn has-tooltip"
+        class="action-btn search-btn has-tooltip cmd-k-trigger"
         aria-label="{{.UI.Widgets.ActionButtons.SearchAriaLabel}}"
-        data-tooltip="{{.UI.Widgets.ActionButtons.Search}}"
-        _="on click set #cmd-k-bar's @open to true">
+        data-tooltip="{{.UI.Widgets.ActionButtons.Search}}">
         <iconify-icon icon="mdi:magnify" width="24" height="24"></iconify-icon>
         {{.UI.Widgets.ActionButtons.Search}}
     </button>
diff --git a/templates/partials/navigation/hamburger-menu.html b/templates/partials/navigation/hamburger-menu.html
index c5ac521..9620131 100644
--- a/templates/partials/navigation/hamburger-menu.html
+++ b/templates/partials/navigation/hamburger-menu.html
@@ -177,7 +177,8 @@
             </div>
 
             <button class="menu-action-btn menu-pdf-btn"
-                    onclick="document.getElementById('pdf-modal').showModal()"
+                    commandfor="pdf-modal"
+                    command="show-modal"
                     _="on mouseenter call syncPdfHover(true)
                        on mouseleave call syncPdfHover(false)">
                 <iconify-icon icon="catppuccin:pdf" width="20" height="20"></iconify-icon>
@@ -193,7 +194,8 @@
             </button>
 
             <button class="menu-action-btn menu-contact-btn"
-                    onclick="document.getElementById('contact-modal').showModal()">
+                    commandfor="contact-modal"
+                    command="show-modal">
                 <iconify-icon icon="mdi:email-outline" width="20" height="20"></iconify-icon>
                 <span>{{.UI.Widgets.ActionButtons.Contact}}</span>
             </button>
diff --git a/templates/partials/widgets/cmd-k-button.html b/templates/partials/widgets/cmd-k-button.html
index cfe9649..238f0b4 100644
--- a/templates/partials/widgets/cmd-k-button.html
+++ b/templates/partials/widgets/cmd-k-button.html
@@ -1,11 +1,11 @@
 {{define "cmd-k-button"}}
 <!-- CMD+K Command Bar Button (Fixed Left - Last) -->
+<!-- Uses lazy loading - ninja-keys loads on first click -->
 <button
     id="cmd-k-button"
-    class="fixed-btn cmd-k-btn no-print has-tooltip"
+    class="fixed-btn cmd-k-btn no-print has-tooltip cmd-k-trigger"
     aria-label="{{.UI.CmdK.Button.AriaLabel}}"
-    data-tooltip="{{.UI.CmdK.Button.Tooltip}}"
-    _="on click set #cmd-k-bar's @open to true">
+    data-tooltip="{{.UI.CmdK.Button.Tooltip}}">
     <iconify-icon icon="mdi:text-box-search-outline"></iconify-icon>
 </button>
 {{end}}
diff --git a/templates/partials/widgets/contact-button.html b/templates/partials/widgets/contact-button.html
index edc6821..08c4d5a 100644
--- a/templates/partials/widgets/contact-button.html
+++ b/templates/partials/widgets/contact-button.html
@@ -1,9 +1,11 @@
 {{define "contact-button"}}
 <!-- Contact Button (Fixed Left) -->
+<!-- Uses HTML Invoker Commands API: commandfor + command="show-modal" -->
 <button
     id="contact-button"
     class="fixed-btn contact-btn no-print has-tooltip"
-    onclick="document.getElementById('contact-modal').showModal()"
+    commandfor="contact-modal"
+    command="show-modal"
     aria-label="{{.UI.Widgets.Contact.AriaLabel}}"
     data-tooltip="{{.UI.Widgets.Contact.Tooltip}}">
     <iconify-icon icon="mdi:email-outline"></iconify-icon>
diff --git a/templates/partials/widgets/info-button.html b/templates/partials/widgets/info-button.html
index faede72..75b4d59 100644
--- a/templates/partials/widgets/info-button.html
+++ b/templates/partials/widgets/info-button.html
@@ -1,9 +1,11 @@
 {{define "info-button"}}
 <!-- Info Button (Bottom Left) -->
+<!-- Uses HTML Invoker Commands API: commandfor + command="show-modal" -->
 <button id="info-button" class="info-button no-print has-tooltip"
         aria-label="{{.UI.Widgets.Info.AriaLabel}}"
         data-tooltip="{{.UI.Widgets.Info.Tooltip}}"
-        onclick="document.getElementById('info-modal').showModal()">
+        commandfor="info-modal"
+        command="show-modal">
     <iconify-icon icon="mdi:information-outline"></iconify-icon>
 </button>
 {{end}}
diff --git a/templates/partials/widgets/shortcuts-button.html b/templates/partials/widgets/shortcuts-button.html
index 73b3fd8..e487ffa 100644
--- a/templates/partials/widgets/shortcuts-button.html
+++ b/templates/partials/widgets/shortcuts-button.html
@@ -1,9 +1,11 @@
 {{define "shortcuts-button"}}
 <!-- Keyboard Shortcuts Button (Fixed Left) -->
+<!-- Uses HTML Invoker Commands API: commandfor + command="show-modal" -->
 <button
     id="shortcuts-button"
     class="fixed-btn shortcuts-btn no-print has-tooltip"
-    onclick="document.getElementById('shortcuts-modal').showModal()"
+    commandfor="shortcuts-modal"
+    command="show-modal"
     aria-label="{{.UI.Widgets.Shortcuts.AriaLabel}}"
     data-tooltip="{{.UI.Widgets.Shortcuts.Tooltip}}">
     <iconify-icon icon="mdi:keyboard-outline"></iconify-icon>
diff --git a/tests/mjs/75-html-invoker-commands.test.mjs b/tests/mjs/75-html-invoker-commands.test.mjs
new file mode 100644
index 0000000..babd747
--- /dev/null
+++ b/tests/mjs/75-html-invoker-commands.test.mjs
@@ -0,0 +1,240 @@
+#!/usr/bin/env bun
+/**
+ * HTML INVOKER COMMANDS API TEST
+ * ==============================
+ * Tests the new HTML commandfor/command attributes for modals:
+ * - Buttons have commandfor and command attributes
+ * - command="show-modal" opens dialogs
+ * - command="close" closes dialogs
+ * - No onclick handlers for modal operations
+ *
+ * Browser support: Chrome/Edge 135+, Firefox Nightly, Safari TP
+ * @see https://developer.chrome.com/blog/command-and-commandfor
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testInvokerCommands() {
+  console.log('🎯 HTML INVOKER COMMANDS API TEST\n');
+  console.log('='.repeat(70));
+
+  const browser = await chromium.launch({ headless: process.env.HEADLESS === 'true' });
+  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+  const testResults = [];
+
+  await page.goto(URL);
+  await page.waitForTimeout(2000);
+
+  // ========================================================================
+  // TEST 1: Buttons have commandfor and command attributes
+  // ========================================================================
+  console.log('\n1️⃣  Testing buttons have commandfor/command attributes...');
+
+  const buttonsWithCommand = await page.evaluate(() => {
+    const buttons = document.querySelectorAll('[commandfor]');
+    return Array.from(buttons).map(btn => ({
+      id: btn.id || btn.className.split(' ')[0],
+      commandfor: btn.getAttribute('commandfor'),
+      command: btn.getAttribute('command'),
+      hasOnclick: btn.hasAttribute('onclick')
+    }));
+  });
+
+  console.log(`   Found ${buttonsWithCommand.length} buttons with commandfor attribute:`);
+  buttonsWithCommand.forEach(btn => {
+    console.log(`   - ${btn.id}: commandfor="${btn.commandfor}" command="${btn.command}" onclick=${btn.hasOnclick}`);
+  });
+
+  const hasCommandButtons = buttonsWithCommand.length >= 6; // At least 6 modal buttons
+  console.log(`   ${hasCommandButtons ? '✅ PASS' : '❌ FAIL'} - At least 6 buttons use commandfor`);
+  testResults.push({ test: 'Buttons have commandfor attributes', passed: hasCommandButtons });
+
+  // ========================================================================
+  // TEST 2: No onclick for showModal/close
+  // ========================================================================
+  console.log('\n2️⃣  Testing no onclick handlers for modal operations...');
+
+  const noOnclickForModals = buttonsWithCommand.every(btn => !btn.hasOnclick);
+  console.log(`   All command buttons without onclick: ${noOnclickForModals}`);
+  console.log(`   ${noOnclickForModals ? '✅ PASS' : '❌ FAIL'} - No onclick handlers on command buttons`);
+  testResults.push({ test: 'No onclick on command buttons', passed: noOnclickForModals });
+
+  // ========================================================================
+  // TEST 3: Info button opens info-modal
+  // ========================================================================
+  console.log('\n3️⃣  Testing info button opens modal via command attribute...');
+
+  const infoButton = await page.$('#info-button');
+  if (infoButton) {
+    const infoAttrs = await page.$eval('#info-button', el => ({
+      commandfor: el.getAttribute('commandfor'),
+      command: el.getAttribute('command')
+    }));
+    console.log(`   Info button: commandfor="${infoAttrs.commandfor}" command="${infoAttrs.command}"`);
+
+    // Click the button
+    await infoButton.click();
+    await page.waitForTimeout(500);
+
+    const infoModalOpen = await page.evaluate(() => {
+      const modal = document.getElementById('info-modal');
+      return modal && modal.hasAttribute('open');
+    });
+
+    console.log(`   Info modal opened: ${infoModalOpen}`);
+    console.log(`   ${infoModalOpen ? '✅ PASS' : '❌ FAIL'} - command="show-modal" works`);
+    testResults.push({ test: 'command="show-modal" opens dialog', passed: infoModalOpen });
+
+    // Test close button
+    if (infoModalOpen) {
+      const closeButton = await page.$('#info-modal [command="close"]');
+      if (closeButton) {
+        await closeButton.click();
+        await page.waitForTimeout(300);
+
+        const modalClosed = await page.evaluate(() => {
+          const modal = document.getElementById('info-modal');
+          return modal && !modal.hasAttribute('open');
+        });
+
+        console.log(`   Info modal closed: ${modalClosed}`);
+        console.log(`   ${modalClosed ? '✅ PASS' : '❌ FAIL'} - command="close" works`);
+        testResults.push({ test: 'command="close" closes dialog', passed: modalClosed });
+      } else {
+        console.log('   ⚠️  Close button with command="close" not found');
+        await page.keyboard.press('Escape');
+        testResults.push({ test: 'command="close" closes dialog', passed: false });
+      }
+    }
+  } else {
+    console.log('   ⚠️  Info button not found');
+    testResults.push({ test: 'command="show-modal" opens dialog', passed: false });
+    testResults.push({ test: 'command="close" closes dialog', passed: false });
+  }
+
+  // ========================================================================
+  // TEST 4: Contact button opens contact-modal
+  // ========================================================================
+  console.log('\n4️⃣  Testing contact button opens modal...');
+
+  const contactButton = await page.$('#contact-button');
+  if (contactButton) {
+    await contactButton.click();
+    await page.waitForTimeout(500);
+
+    const contactModalOpen = await page.evaluate(() => {
+      const modal = document.getElementById('contact-modal');
+      return modal && modal.hasAttribute('open');
+    });
+
+    console.log(`   Contact modal opened: ${contactModalOpen}`);
+    console.log(`   ${contactModalOpen ? '✅ PASS' : '❌ FAIL'} - Contact modal opens`);
+    testResults.push({ test: 'Contact modal opens via command', passed: contactModalOpen });
+
+    // Close with ESC
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(300);
+  } else {
+    console.log('   ⚠️  Contact button not found');
+    testResults.push({ test: 'Contact modal opens via command', passed: false });
+  }
+
+  // ========================================================================
+  // TEST 5: Shortcuts button opens shortcuts-modal
+  // ========================================================================
+  console.log('\n5️⃣  Testing shortcuts button opens modal...');
+
+  const shortcutsButton = await page.$('#shortcuts-button');
+  if (shortcutsButton) {
+    await shortcutsButton.click();
+    await page.waitForTimeout(500);
+
+    const shortcutsModalOpen = await page.evaluate(() => {
+      const modal = document.getElementById('shortcuts-modal');
+      return modal && modal.hasAttribute('open');
+    });
+
+    console.log(`   Shortcuts modal opened: ${shortcutsModalOpen}`);
+    console.log(`   ${shortcutsModalOpen ? '✅ PASS' : '❌ FAIL'} - Shortcuts modal opens`);
+    testResults.push({ test: 'Shortcuts modal opens via command', passed: shortcutsModalOpen });
+
+    // Close with ESC
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(300);
+  } else {
+    console.log('   ⚠️  Shortcuts button not found');
+    testResults.push({ test: 'Shortcuts modal opens via command', passed: false });
+  }
+
+  // ========================================================================
+  // TEST 6: PDF button in action bar opens pdf-modal
+  // ========================================================================
+  console.log('\n6️⃣  Testing PDF action button opens modal...');
+
+  const pdfActionButton = await page.$('#action-bar-pdf-btn');
+  if (pdfActionButton) {
+    const pdfAttrs = await page.$eval('#action-bar-pdf-btn', el => ({
+      commandfor: el.getAttribute('commandfor'),
+      command: el.getAttribute('command')
+    }));
+    console.log(`   PDF button: commandfor="${pdfAttrs.commandfor}" command="${pdfAttrs.command}"`);
+
+    await pdfActionButton.click();
+    await page.waitForTimeout(500);
+
+    const pdfModalOpen = await page.evaluate(() => {
+      const modal = document.getElementById('pdf-modal');
+      return modal && modal.hasAttribute('open');
+    });
+
+    console.log(`   PDF modal opened: ${pdfModalOpen}`);
+    console.log(`   ${pdfModalOpen ? '✅ PASS' : '❌ FAIL'} - PDF modal opens via command`);
+    testResults.push({ test: 'PDF modal opens via command', passed: pdfModalOpen });
+
+    // Close with ESC
+    await page.keyboard.press('Escape');
+    await page.waitForTimeout(300);
+  } else {
+    console.log('   ⚠️  PDF action button not found');
+    testResults.push({ test: 'PDF modal opens via command', passed: false });
+  }
+
+  // ========================================================================
+  // FINAL SUMMARY
+  // ========================================================================
+  console.log("\n" + "=".repeat(70));
+  console.log("📊 TEST SUMMARY\n");
+
+  const totalTests = testResults.length;
+  const passedTests = testResults.filter(r => r.passed).length;
+  const failedTests = totalTests - passedTests;
+
+  testResults.forEach(result => {
+    console.log(`   ${result.passed ? '✅' : '❌'} ${result.test}`);
+  });
+
+  console.log(`\n   Total: ${passedTests}/${totalTests} tests passed`);
+  console.log("=".repeat(70) + "\n");
+
+  if (failedTests === 0) {
+    console.log("🎉 ALL HTML INVOKER COMMANDS TESTS PASSED!");
+  } else {
+    console.log("⚠️  SOME TESTS FAILED - See details above");
+    console.log("   Note: command/commandfor requires Chrome 135+, Edge 135+, Firefox Nightly, Safari TP");
+  }
+
+  // Auto-close after tests if HEADLESS env is set
+  if (process.env.HEADLESS === 'true') {
+    await browser.close();
+    process.exit(failedTests === 0 ? 0 : 1);
+  } else {
+    console.log("\nBrowser will stay open for manual inspection.");
+    console.log("Press Ctrl+C when done.\n");
+    await new Promise(() => {}); // Keep browser open
+  }
+}
+
+await testInvokerCommands();
diff --git a/tests/mjs/76-cmd-k-lazy-loading.test.mjs b/tests/mjs/76-cmd-k-lazy-loading.test.mjs
new file mode 100644
index 0000000..3b99b72
--- /dev/null
+++ b/tests/mjs/76-cmd-k-lazy-loading.test.mjs
@@ -0,0 +1,256 @@
+#!/usr/bin/env bun
+/**
+ * CMD+K LAZY LOADING TEST
+ * =======================
+ * Tests that ninja-keys is lazy-loaded only when needed:
+ * - No ninja-keys element on initial page load
+ * - No esm.sh/ninja-keys loaded initially
+ * - CMD+K triggers dynamic import
+ * - ninja-keys element created and opened
+ * - Subsequent uses don't reload
+ *
+ * This optimization reduces initial page load by ~15 module requests
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testCmdKLazyLoading() {
+  console.log('🚀 CMD+K LAZY LOADING TEST\n');
+  console.log('='.repeat(70));
+
+  const browser = await chromium.launch({ headless: process.env.HEADLESS === 'true' });
+  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
+  const page = await context.newPage();
+
+  const testResults = [];
+  const networkRequests = [];
+
+  // Monitor network requests
+  page.on('request', request => {
+    const url = request.url();
+    if (url.includes('ninja-keys') || url.includes('esm.sh')) {
+      networkRequests.push({
+        url,
+        timestamp: Date.now(),
+        type: request.resourceType()
+      });
+    }
+  });
+
+  await page.goto(URL);
+  await page.waitForTimeout(2000);
+
+  const initialRequestCount = networkRequests.length;
+  console.log(`   Initial ninja-keys/esm.sh requests: ${initialRequestCount}`);
+
+  // ========================================================================
+  // TEST 1: No ninja-keys element on initial load
+  // ========================================================================
+  console.log('\n1️⃣  Testing no ninja-keys on initial load...');
+
+  const ninjaKeysOnLoad = await page.evaluate(() => {
+    const nk = document.getElementById('cmd-k-bar');
+    return {
+      exists: !!nk,
+      tagName: nk?.tagName || 'N/A'
+    };
+  });
+
+  console.log(`   ninja-keys element exists: ${ninjaKeysOnLoad.exists}`);
+  const noInitialElement = !ninjaKeysOnLoad.exists;
+  console.log(`   ${noInitialElement ? '✅ PASS' : '❌ FAIL'} - No ninja-keys element on initial load`);
+  testResults.push({ test: 'No ninja-keys element on initial load', passed: noInitialElement });
+
+  // ========================================================================
+  // TEST 2: No esm.sh requests on initial load
+  // ========================================================================
+  console.log('\n2️⃣  Testing no esm.sh requests on initial load...');
+
+  const noInitialRequests = initialRequestCount === 0;
+  console.log(`   esm.sh requests before interaction: ${initialRequestCount}`);
+  console.log(`   ${noInitialRequests ? '✅ PASS' : '❌ FAIL'} - No ninja-keys loaded initially`);
+  testResults.push({ test: 'No esm.sh requests on initial load', passed: noInitialRequests });
+
+  // ========================================================================
+  // TEST 3: Container element exists for lazy loading
+  // ========================================================================
+  console.log('\n3️⃣  Testing container element exists...');
+
+  const containerExists = await page.evaluate(() => {
+    const container = document.getElementById('cmd-k-container');
+    return !!container;
+  });
+
+  console.log(`   cmd-k-container exists: ${containerExists}`);
+  console.log(`   ${containerExists ? '✅ PASS' : '❌ FAIL'} - Container ready for lazy loading`);
+  testResults.push({ test: 'Container element exists', passed: containerExists });
+
+  // ========================================================================
+  // TEST 4: CMD+K triggers lazy load
+  // ========================================================================
+  console.log('\n4️⃣  Testing CMD+K triggers lazy load...');
+
+  const requestsBeforeCmdK = networkRequests.length;
+
+  // Press CMD+K (Mac) or Ctrl+K (Windows/Linux)
+  await page.keyboard.press('Meta+k');
+  await page.waitForTimeout(3000); // Wait for module to load and custom element to register
+
+  const requestsAfterCmdK = networkRequests.length;
+  const newRequests = requestsAfterCmdK - requestsBeforeCmdK;
+
+  console.log(`   Requests before CMD+K: ${requestsBeforeCmdK}`);
+  console.log(`   Requests after CMD+K: ${requestsAfterCmdK}`);
+  console.log(`   New esm.sh requests: ${newRequests}`);
+
+  const lazyLoadTriggered = newRequests > 0;
+  console.log(`   ${lazyLoadTriggered ? '✅ PASS' : '❌ FAIL'} - CMD+K triggers module load`);
+  testResults.push({ test: 'CMD+K triggers lazy load', passed: lazyLoadTriggered });
+
+  // ========================================================================
+  // TEST 5: ninja-keys element created after CMD+K
+  // ========================================================================
+  console.log('\n5️⃣  Testing ninja-keys element created...');
+
+  const ninjaKeysAfterCmdK = await page.evaluate(() => {
+    const nk = document.getElementById('cmd-k-bar');
+    if (!nk) return { exists: false, tagName: 'N/A', isOpen: false };
+    // ninja-keys uses shadow DOM with .modal.visible class
+    const shadow = nk.shadowRoot;
+    const modal = shadow?.querySelector('.modal');
+    return {
+      exists: true,
+      tagName: nk.tagName,
+      isOpen: modal?.classList?.contains('visible') || false
+    };
+  });
+
+  console.log(`   ninja-keys exists: ${ninjaKeysAfterCmdK.exists}`);
+  console.log(`   ninja-keys tag: ${ninjaKeysAfterCmdK.tagName}`);
+  console.log(`   ninja-keys open: ${ninjaKeysAfterCmdK.isOpen}`);
+
+  const elementCreated = ninjaKeysAfterCmdK.exists && ninjaKeysAfterCmdK.tagName === 'NINJA-KEYS';
+  console.log(`   ${elementCreated ? '✅ PASS' : '❌ FAIL'} - ninja-keys element created`);
+  testResults.push({ test: 'ninja-keys element created', passed: elementCreated });
+
+  // Close ninja-keys
+  await page.keyboard.press('Escape');
+  await page.waitForTimeout(300);
+
+  // ========================================================================
+  // TEST 6: Subsequent CMD+K doesn't reload module
+  // ========================================================================
+  console.log('\n6️⃣  Testing subsequent CMD+K doesn\'t reload...');
+
+  const requestsBeforeSecond = networkRequests.length;
+
+  // Press CMD+K again
+  await page.keyboard.press('Meta+k');
+  await page.waitForTimeout(500);
+
+  const requestsAfterSecond = networkRequests.length;
+  const additionalRequests = requestsAfterSecond - requestsBeforeSecond;
+
+  console.log(`   Requests before 2nd CMD+K: ${requestsBeforeSecond}`);
+  console.log(`   Requests after 2nd CMD+K: ${requestsAfterSecond}`);
+  console.log(`   Additional requests: ${additionalRequests}`);
+
+  const noReload = additionalRequests === 0;
+  console.log(`   ${noReload ? '✅ PASS' : '❌ FAIL'} - No module reload on subsequent use`);
+  testResults.push({ test: 'No module reload on subsequent use', passed: noReload });
+
+  // Close ninja-keys
+  await page.keyboard.press('Escape');
+  await page.waitForTimeout(300);
+
+  // ========================================================================
+  // TEST 7: Button click also triggers lazy load
+  // ========================================================================
+  console.log('\n7️⃣  Testing button click works with lazy-loaded ninja-keys...');
+
+  const cmdKButton = await page.$('#cmd-k-button');
+  if (cmdKButton) {
+    await cmdKButton.click();
+    await page.waitForTimeout(1000);
+
+    const openAfterClick = await page.evaluate(() => {
+      const nk = document.getElementById('cmd-k-bar');
+      if (!nk) return false;
+      // ninja-keys uses shadow DOM with .modal.visible class
+      const shadow = nk.shadowRoot;
+      const modal = shadow?.querySelector('.modal');
+      return modal?.classList?.contains('visible') || false;
+    });
+
+    console.log(`   ninja-keys opened via button: ${openAfterClick}`);
+    console.log(`   ${openAfterClick ? '✅ PASS' : '❌ FAIL'} - Button click opens ninja-keys`);
+    testResults.push({ test: 'Button click opens ninja-keys', passed: openAfterClick });
+
+    await page.keyboard.press('Escape');
+  } else {
+    console.log('   ⚠️  CMD+K button not found');
+    testResults.push({ test: 'Button click opens ninja-keys', passed: false });
+  }
+
+  // ========================================================================
+  // TEST 8: esm.sh used instead of unpkg (no redirect chains)
+  // ========================================================================
+  console.log('\n8️⃣  Testing esm.sh CDN used (no 302 redirects)...');
+
+  const esmShRequests = networkRequests.filter(r => r.url.includes('esm.sh'));
+  const unpkgRequests = networkRequests.filter(r => r.url.includes('unpkg.com/ninja-keys'));
+
+  console.log(`   esm.sh requests: ${esmShRequests.length}`);
+  console.log(`   unpkg ninja-keys requests: ${unpkgRequests.length}`);
+
+  const usesEsmSh = esmShRequests.length > 0 && unpkgRequests.length === 0;
+  console.log(`   ${usesEsmSh ? '✅ PASS' : '❌ FAIL'} - Uses esm.sh CDN (pre-bundled)`);
+  testResults.push({ test: 'Uses esm.sh CDN (no redirects)', passed: usesEsmSh });
+
+  // ========================================================================
+  // FINAL SUMMARY
+  // ========================================================================
+  console.log("\n" + "=".repeat(70));
+  console.log("📊 TEST SUMMARY\n");
+
+  const totalTests = testResults.length;
+  const passedTests = testResults.filter(r => r.passed).length;
+  const failedTests = totalTests - passedTests;
+
+  testResults.forEach(result => {
+    console.log(`   ${result.passed ? '✅' : '❌'} ${result.test}`);
+  });
+
+  console.log(`\n   Total: ${passedTests}/${totalTests} tests passed`);
+
+  // Show all network requests for debugging
+  if (networkRequests.length > 0) {
+    console.log('\n   Network requests (ninja-keys/esm.sh):');
+    networkRequests.forEach((r, i) => {
+      console.log(`     ${i + 1}. ${r.url.substring(0, 80)}...`);
+    });
+  }
+
+  console.log("=".repeat(70) + "\n");
+
+  if (failedTests === 0) {
+    console.log("🎉 ALL CMD+K LAZY LOADING TESTS PASSED!");
+    console.log("   Initial page load has NO ninja-keys overhead!");
+  } else {
+    console.log("⚠️  SOME TESTS FAILED - See details above");
+  }
+
+  // Auto-close after tests if HEADLESS env is set
+  if (process.env.HEADLESS === 'true') {
+    await browser.close();
+    process.exit(failedTests === 0 ? 0 : 1);
+  } else {
+    console.log("\nBrowser will stay open for manual inspection.");
+    console.log("Press Ctrl+C when done.\n");
+    await new Promise(() => {}); // Keep browser open
+  }
+}
+
+await testCmdKLazyLoading();