diff --git a/src/index.css b/src/index.css
index 1c98a37..22547ac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -997,6 +997,187 @@ button {
   cursor: pointer;
 }
 
+/* Product UI Frame Specific Sub-elements (Dark Mode) */
+.ui-main-panel {
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: #0B1015;
+}
+
+.ui-card-top-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.sub-caption {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: var(--teal-vibrant);
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+.ui-action-title {
+  font-size: 19px;
+  font-weight: 700;
+  color: #FFFFFF;
+  margin: 0;
+  line-height: 1.25;
+}
+
+.score-badge-circle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-subtle);
+  padding: 6px 12px;
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+}
+
+.score-num {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--teal-vibrant);
+  line-height: 1;
+}
+
+.score-lbl {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--ink-muted);
+  line-height: 1.3;
+  text-transform: uppercase;
+}
+
+.ui-issue-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(200, 129, 31, 0.08);
+  border: 1px solid rgba(227, 164, 74, 0.25);
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  flex-wrap: wrap;
+}
+
+.ui-pill-warning {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--amber-vibrant);
+  background: rgba(200, 129, 31, 0.2);
+  padding: 2px 7px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ui-issue-text {
+  font-size: 12.5px;
+  color: #F0F4F8;
+  font-weight: 500;
+}
+
+.diff-col {
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+}
+
+.diff-col.suggested {
+  border-color: rgba(63, 182, 174, 0.35);
+  background: rgba(63, 182, 174, 0.04);
+}
+
+.diff-header {
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--ink-muted);
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.code-block {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-secondary);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+}
+
+.code-block.highlight-code {
+  color: var(--teal-vibrant);
+  font-weight: 600;
+}
+
+.ui-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-subtle);
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.connected-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  font-family: var(--font-mono);
+}
+
+.status-live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #27C93F;
+  box-shadow: 0 0 6px rgba(39, 201, 63, 0.6);
+}
+
+/* Agency Client Items */
+.agency-client-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.agency-client-row.selected {
+  background: rgba(63, 182, 174, 0.12);
+  border-color: var(--teal-vibrant);
+}
+
+.agency-client-domain {
+  font-weight: 600;
+  font-size: 13.5px;
+  color: #FFFFFF;
+}
+
 /* ==========================================================================
    AGENCY PAIN POINTS & CALCULATOR
    ========================================================================== */
@@ -1919,6 +2100,32 @@ input[type=range].agency-slider::-webkit-slider-thumb {
 
 @media (max-width: 600px) {
   .hero { padding: 36px 16px 48px; }
+  .hero-copy h1 { font-size: 38px; line-height: 1.15; margin-bottom: 16px; }
+  .hero-copy > p { font-size: 15.5px; line-height: 1.55; max-width: 100%; word-break: normal; overflow-wrap: break-word; }
+  .hero-audit-form, .audit-form {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 8px;
+    gap: 8px;
+  }
+  .hero-audit-form button, .audit-form button {
+    width: 100%;
+    justify-content: center;
+  }
+  .hero-trust-metrics {
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: flex-start;
+  }
+  .hero-pain-callout {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .audit-demo-presets {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
   .bento-grid, .feature-grid, .pricing-cards-grid, .pricing-grid, .articles { grid-template-columns: 1fr; }
   .footer-inner { grid-template-columns: 1fr; }
   .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
@@ -2257,11 +2464,194 @@ body.theme-light::before {
 }
 
 /* Hero Mockup Workbench in Light Mode */
+[data-theme="light"] .product-ui-frame,
+[data-theme="light"] .product-ui,
 [data-theme="light"] .hero-mockup-window,
+.theme-light .product-ui-frame,
+.theme-light .product-ui,
 .theme-light .hero-mockup-window {
-  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06);
+  background: #FFFFFF !important;
+  border-color: rgba(15, 23, 42, 0.12) !important;
+  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
 }
 
+[data-theme="light"] .ui-window-bar,
+.theme-light .ui-window-bar {
+  background: #F8FAFC !important;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
+}
+
+[data-theme="light"] .ui-url-badge,
+.theme-light .ui-url-badge {
+  background: #FFFFFF !important;
+  border-color: rgba(15, 23, 42, 0.12) !important;
+  color: #334155 !important;
+}
+
+[data-theme="light"] .ui-status-tag,
+.theme-light .ui-status-tag {
+  background: rgba(14, 110, 106, 0.1) !important;
+  color: #0E6E6A !important;
+  font-weight: 600;
+}
+
+[data-theme="light"] .ui-rail,
+.theme-light .ui-rail {
+  background: #F8FAFC !important;
+  border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
+}
+
+[data-theme="light"] .ui-rail-icon,
+.theme-light .ui-rail-icon {
+  color: #64748B !important;
+}
+
+[data-theme="light"] .ui-rail-icon.active,
+.theme-light .ui-rail-icon.active {
+  color: #0E6E6A !important;
+  background: #FFFFFF !important;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
+}
+
+[data-theme="light"] .ui-main-panel,
+.theme-light .ui-main-panel {
+  background: #FFFFFF !important;
+}
+
+[data-theme="light"] .sub-caption,
+.theme-light .sub-caption {
+  color: #0E6E6A !important;
+  font-weight: 700 !important;
+}
+
+[data-theme="light"] .ui-action-title,
+.theme-light .ui-action-title {
+  color: #0F172A !important;
+}
+
+[data-theme="light"] .score-badge-circle,
+.theme-light .score-badge-circle {
+  background: #F8FAFC !important;
+  border-color: rgba(15, 23, 42, 0.1) !important;
+}
+
+[data-theme="light"] .score-num,
+.theme-light .score-num {
+  color: #0E6E6A !important;
+}
+
+[data-theme="light"] .score-lbl,
+.theme-light .score-lbl {
+  color: #64748B !important;
+}
+
+[data-theme="light"] .ui-issue-box,
+.theme-light .ui-issue-box {
+  background: rgba(200, 129, 31, 0.08) !important;
+  border-color: rgba(200, 129, 31, 0.28) !important;
+}
+
+[data-theme="light"] .ui-pill-warning,
+.theme-light .ui-pill-warning {
+  background: #C8811F !important;
+  color: #FFFFFF !important;
+}
+
+[data-theme="light"] .ui-issue-text,
+.theme-light .ui-issue-text {
+  color: #0F172A !important;
+}
+
+[data-theme="light"] .diff-col,
+.theme-light .diff-col {
+  background: #F8FAFC !important;
+  border-color: rgba(15, 23, 42, 0.1) !important;
+}
+
+[data-theme="light"] .diff-col.suggested,
+.theme-light .diff-col.suggested {
+  border-color: rgba(14, 110, 106, 0.3) !important;
+  background: rgba(14, 110, 106, 0.04) !important;
+}
+
+[data-theme="light"] .diff-header,
+.theme-light .diff-header {
+  color: #64748B !important;
+}
+
+[data-theme="light"] .code-block,
+.theme-light .code-block {
+  color: #334155 !important;
+}
+
+[data-theme="light"] .code-block.highlight-code,
+.theme-light .code-block.highlight-code {
+  color: #0E6E6A !important;
+}
+
+[data-theme="light"] .ui-card-footer,
+.theme-light .ui-card-footer {
+  border-color: rgba(15, 23, 42, 0.08) !important;
+}
+
+[data-theme="light"] .connected-status,
+.theme-light .connected-status {
+  color: #64748B !important;
+}
+
+[data-theme="light"] .ui-simulate-btn,
+.theme-light .ui-simulate-btn {
+  background: #C8811F !important;
+  color: #FFFFFF !important;
+}
+
+[data-theme="light"] .ui-simulate-btn:hover,
+.theme-light .ui-simulate-btn:hover {
+  background: #A36412 !important;
+}
+
+/* Agency Workspace in Light Mode */
+[data-theme="light"] .agency-client-row,
+.theme-light .agency-client-row {
+  background: #F8FAFC !important;
+  border-color: rgba(15, 23, 42, 0.08) !important;
+}
+
+[data-theme="light"] .agency-client-row.selected,
+.theme-light .agency-client-row.selected {
+  background: rgba(14, 110, 106, 0.08) !important;
+  border-color: #0E6E6A !important;
+}
+
+[data-theme="light"] .agency-client-domain,
+.theme-light .agency-client-domain {
+  color: #0F172A !important;
+}
+
+/* Comparison Table in Light Mode */
+[data-theme="light"] .compare-table th,
+.theme-light .compare-table th {
+  background: #F1F5F9 !important;
+  color: #0F172A !important;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
+}
+
+[data-theme="light"] .compare-table td,
+.theme-light .compare-table td {
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
+  color: #334155 !important;
+}
+
+[data-theme="light"] .compare-table th.col-crawlerx,
+[data-theme="light"] .compare-table td.col-crawlerx,
+.theme-light .compare-table th.col-crawlerx,
+.theme-light .compare-table td.col-crawlerx {
+  background: rgba(14, 110, 106, 0.06) !important;
+  border-left: 1.5px solid rgba(14, 110, 106, 0.25) !important;
+  border-right: 1.5px solid rgba(14, 110, 106, 0.25) !important;
+}
+
+
 /* Cards & Bento in Light Mode */
 [data-theme="light"] .bento-card,
 [data-theme="light"] .feature-card,
diff --git a/src/pages/AgenciesPage.jsx b/src/pages/AgenciesPage.jsx
index 6fe6ab9..5e56d6f 100644
--- a/src/pages/AgenciesPage.jsx
+++ b/src/pages/AgenciesPage.jsx
@@ -102,22 +102,12 @@ export default function AgenciesPage() {
                   <div 
                     key={idx}
                     onClick={() => setSelectedClient(client)}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      padding: '12px 14px',
-                      borderRadius: '8px',
-                      background: selectedClient.domain === client.domain ? 'rgba(63, 182, 174, 0.12)' : 'rgba(255, 255, 255, 0.03)',
-                      border: selectedClient.domain === client.domain ? '1px solid var(--teal-vibrant)' : '1px solid var(--border-subtle)',
-                      cursor: 'pointer',
-                      transition: 'all 0.15s ease'
-                    }}
+                    className={`agency-client-row ${selectedClient.domain === client.domain ? 'selected' : ''}`}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                       <Globe size={16} color={selectedClient.domain === client.domain ? 'var(--teal-vibrant)' : 'var(--ink-muted)'} />
                       <div>
-                        <div style={{ fontWeight: 600, fontSize: '13.5px', color: '#FFFFFF' }}>{client.domain}</div>
+                        <div className="agency-client-domain">{client.domain}</div>
                         <div style={{ fontSize: '11px', color: 'var(--ink-muted)' }}>{client.pages} pages · {client.keywords} keywords</div>
                       </div>
                     </div>