diff --git a/README.md b/README.md
index a50719b..33408f6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 <div align="center">
 
-<img src="assets/logo.png" alt="Blindfold — Your AI Agent Can't Leak The API Key It Never Had" width="560" />
+<h1>🛡️ Blindfold</h1>
+
+<p><strong>Your AI agent can't leak the API key it never had.</strong></p>
 
 [![npm version](https://img.shields.io/npm/v/@fiscalmindset/blindfold?style=for-the-badge&color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/@fiscalmindset/blindfold)
 [![Built on Terminal 3](https://img.shields.io/badge/built%20on-Terminal%203-6e44ff?style=for-the-badge)](https://terminal3.io)
@@ -13,7 +15,7 @@
 npm i -g @fiscalmindset/blindfold && blindfold signup --email you@example.com
 ```
 
-[**📦 Install**](#installation) &nbsp;·&nbsp; [**📊 Interactive Presentation**](https://fiscalmindset.github.io/Blindfold/) &nbsp;·&nbsp; [**⚡ Quickstart**](#quickstart)
+[**🌐 Live site**](https://blindfold-rho.vercel.app) &nbsp;·&nbsp; [**📦 Install**](#installation) &nbsp;·&nbsp; [**📊 Interactive Presentation**](https://fiscalmindset.github.io/Blindfold/) &nbsp;·&nbsp; [**⚡ Quickstart**](#quickstart)
 
 <br/>
 
diff --git a/assets/logo.png b/assets/logo.png
deleted file mode 100644
index ed640d2..0000000
Binary files a/assets/logo.png and /dev/null differ
diff --git a/docs/index.html b/docs/index.html
index 7458696..0b22779 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -346,6 +346,39 @@
       margin-top: 20px;
     }
 
+    /* hero + closing shield mark (replaces logo.png, consistent 🛡️ brand) */
+    .hero-mark {
+      font-size: 96px;
+      line-height: 1;
+      margin-bottom: 18px;
+      filter: drop-shadow(0 10px 30px rgba(37, 99, 235, 0.35));
+      animation: slideUp 0.8s ease-out 0.05s both;
+    }
+    .hero-title {
+      font-size: 5rem;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      margin: 0 0 14px;
+      background: linear-gradient(90deg, #2563EB, #7c3aed);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: slideUp 0.8s ease-out 0.1s both;
+    }
+    .hero-tag {
+      font-size: 1.5rem;
+      color: #444;
+      max-width: 640px;
+      margin: 0 auto;
+      animation: fadeIn 0.8s ease-out 0.3s both;
+    }
+    .close-mark {
+      font-size: 54px;
+      line-height: 1;
+      margin-bottom: 10px;
+      filter: drop-shadow(0 8px 20px rgba(37, 99, 235, 0.3));
+    }
+
     /* ── 1024px ───────────────────────────────── */
     @media (max-width: 1024px) {
       .diagram   { font-size: 0.9rem; padding: 20px; }
@@ -360,6 +393,10 @@
       h2 { font-size: 1.8rem; }
       p  { font-size: 1.1rem; }
 
+      .hero-mark { font-size: 72px; margin-bottom: 12px; }
+      .hero-title { font-size: 3.2rem; }
+      .hero-tag { font-size: 1.15rem; }
+
       .split-screen { grid-template-columns: 1fr; gap: 12px; }
 
       .slide {
@@ -389,15 +426,11 @@
       }
       .slide-content { max-width: 100%; padding: 4px 0; margin-top: 0; }
 
-      /* Hero logo */
-      img[src*="logo.png"] {
-        max-width: 240px !important;
-        max-height: 120px !important;
-        height: auto !important;
-        width: auto !important;
-        margin: 0 0 16px 0 !important;
-        object-fit: contain !important;
-      }
+      /* Hero shield mark */
+      .hero-mark { font-size: 58px; margin-bottom: 10px; }
+      .hero-title { font-size: 2.4rem; }
+      .hero-tag { font-size: 0.95rem; }
+      .close-mark { font-size: 40px; }
 
       img[src*="avatars.githubusercontent.com"] {
         width: 55px !important;
@@ -458,6 +491,21 @@
       #slide8 .demo-output     { max-height: 100px; font-size: 0.55rem; padding: 6px; margin: 4px 0; }
       #slide8 .slide8-footer   { display: none; } /* footer hidden on phones — panels say it all */
     }
+
+    /* ── landscape phones / short viewports ───── */
+    @media (max-height: 520px) and (orientation: landscape) {
+      .slide { padding: 14px 26px; justify-content: center; }
+      .slide-content { padding: 4px 0; }
+      .hero-mark { font-size: 46px; margin-bottom: 6px; }
+      .hero-title { font-size: 2.2rem; margin-bottom: 6px; }
+      .hero-tag { font-size: 0.9rem; }
+      h1 { font-size: 2rem; margin-bottom: 12px; }
+      h2 { font-size: 1.5rem; margin-bottom: 12px; }
+      p  { font-size: 0.9rem; margin: 6px 0; }
+      .badge { margin-bottom: 6px; }
+      .diagram, .code-block { margin: 10px 0; }
+      .controls { padding: 8px 16px; }
+    }
   </style>
 </head>
 <body>
@@ -493,8 +541,9 @@
       <!-- SLIDE 1: HERO -->
       <div class="slide active">
         <div class="slide-content">
-          <img src="assets/logo.png" alt="Blindfold Logo"
-               style="height: 180px; margin-bottom: 30px; object-fit: contain;" />
+          <div class="hero-mark">🛡️</div>
+          <h1 class="hero-title">Blindfold</h1>
+          <p class="hero-tag">Your AI agent can't leak the API key it never had.</p>
 
           <div style="margin-top: 24px;">
             <div class="badge">Built on Terminal 3</div>
@@ -878,8 +927,8 @@ <h2>What's Actually Protected</h2>
       <!-- SLIDE 12: CLOSING -->
       <div class="slide">
         <div class="slide-content">
-          <img src="assets/logo.png" alt="Blindfold Logo"
-               style="height: 90px; margin-bottom: 16px; object-fit: contain;" />
+          <div class="close-mark">🛡️</div>
+          <h2 style="font-size: 2rem; margin-bottom: 10px;">Blindfold</h2>
 
           <p style="font-size: 1.3rem; color: #555; margin: 12px 0 16px; line-height: 1.5;">
             <em>The only durable fix is that the key is never in the agent's context.</em>