diff --git a/demo/saas_visible.html b/demo/saas_visible.html
index 8d38e08..f2418e4 100644
--- a/demo/saas_visible.html
+++ b/demo/saas_visible.html
@@ -447,9 +447,42 @@
.pipe-arrow { display: none; }
.layer { grid-template-columns: 1fr; }
}
-
+ .product-surface-bridge {
+ position: relative; z-index: 5;
+ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
+ gap: 0.55rem 1rem;
+ padding: 0.55rem 0.9rem;
+ border-bottom: 1px solid rgba(127, 211, 208, 0.18);
+ background:
+ linear-gradient(90deg, rgba(127, 211, 208, 0.08), transparent 50%),
+ rgba(3, 6, 10, 0.96);
+ font-family: Inter, system-ui, sans-serif;
+ }
+ .product-surface-bridge strong {
+ font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7fd3d0;
+ }
+ .product-surface-bridge nav { display: flex; flex-wrap: wrap; gap: 0.55rem 0.9rem; }
+ .product-surface-bridge a {
+ font-family: "JetBrains Mono", ui-monospace, monospace;
+ font-size: 0.72rem; color: #a8b4bf;
+ border-bottom: 1px solid transparent;
+ }
+ .product-surface-bridge a:hover { color: #e8eef6; border-bottom-color: rgba(127,211,208,0.55); }
+ .product-surface-bridge a[aria-current="true"] { color: #9be7e4; }
+
+
+