@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/agent-endpoints/agent-endpoints.js

@@ -1,8 +1,11 @@
 import { LitElement, html, nothing } from "lit";
+import '../button/button.js';
 import { tokens } from "../../tokens/tokens.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import agentEndpointsCSS from "./agent-endpoints.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
+import "../icons/arrow-right-icon.js";
 
 class AgentEndpoints extends LitElement {
   static properties = {
@@ -13,7 +16,7 @@ class AgentEndpoints extends LitElement {
     assistants : { type: Array }  // [{ label: String, href: String, icon: String }]
   };
 
-  static styles = [tokens, agentEndpointsCSS];
+  static styles = [tokens, ensembleCSS, agentEndpointsCSS];
 
   constructor() {
     super();
@@ -26,9 +29,9 @@ class AgentEndpoints extends LitElement {
 
   render() {
     return html`
-      <div class="bd-agentendpoints-wrapper">
+      <div class="bd-ensemble bd-agentendpoints-wrapper">
         ${this.eyebrow
-          ? html`<bd-p kind="regular" font-weight="var(--typography-fontWeight-semibold, 600)" class="bd-agentendpoints-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
+          ? html`<bd-p variant="regular" font-weight="semibold" class="bd-agentendpoints-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
           : nothing}
 
         ${this.title
@@ -36,7 +39,7 @@ class AgentEndpoints extends LitElement {
           : nothing}
 
         ${this.description
-          ? html`<bd-p kind="regular" class="bd-agentendpoints-description"><slot name="description">${this.description}</slot></bd-p>`
+          ? html`<bd-p variant="regular" class="bd-agentendpoints-description"><slot name="description">${this.description}</slot></bd-p>`
           : nothing}
 
         ${this.endpoints && this.endpoints.length
@@ -44,10 +47,16 @@ class AgentEndpoints extends LitElement {
               <div class="bd-agentendpoints-row">
                 ${this.endpoints.map(
                   (ep) => html`
-                    <a class="button--outline-white" href=${ep.href} target="_blank" rel="noopener noreferrer">
-                      <span class="bd-agentendpoints-arrow" aria-hidden="true">→</span>
+                    <bd-button-link
+                      class="bd-agentendpoints-pill"
+                      href=${ep.href}
+                      target="_blank"
+                      size="sm"
+                      variant="tertiary"
+                    >
+                      <bd-arrow-right-icon class="bd-agentendpoints-arrow" size="xs" aria-hidden="true"></bd-arrow-right-icon>
                       <span class="bd-agentendpoints-mono">${ep.label}</span>
-                    </a>
+                    </bd-button-link>
                   `
                 )}
               </div>
@@ -59,19 +68,20 @@ class AgentEndpoints extends LitElement {
               <div class="bd-agentendpoints-row">
                 ${this.assistants.map(
                   (a) => html`
-    <a
-      class="button--outline-white"
-      href=${a.href}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="${a.label} (opens in new tab)"
-    >
-      ${a.icon
-        ? html`<img src=${a.icon} alt="" class="bd-agentendpoints-icon" width="20" height="20" loading="lazy" />`
-        : nothing}
-      <span>${a.label}</span>
-    </a>
-  `
+                    <bd-button-link
+                      class="bd-agentendpoints-pill"
+                      href=${a.href}
+                      target="_blank"
+                      size="sm"
+                      variant="tertiary"
+                      label="${a.label} (opens in new tab)"
+                    >
+                      ${a.icon
+                        ? html`<img src=${a.icon} alt="" class="bd-agentendpoints-icon" width="20" height="20" loading="lazy" />`
+                        : nothing}
+                      <span>${a.label}</span>
+                    </bd-button-link>
+                  `
                 )}
               </div>
             `

package/src/components/agent-endpoints/agent-endpoints.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import "./agent-endpoints.js";
 
 export default {
-  title     : "Components/Agent Endpoints",
+  title     : "Modules/Agent Endpoints",
   component : "bd-agent-endpoints",
   tags      : ["autodocs"],
   parameters: {

package/src/components/ai-guardian-demo.stories.js

@@ -44,7 +44,7 @@ function aiGuardianBody() {
       <bd-button-link
         slot="primary-button"
         label="Download BETA Today"
-        kind="primary"
+        variant="primary"
         size="md"
         font-size="18px"
         font-weight="600"
@@ -53,7 +53,7 @@ function aiGuardianBody() {
       <bd-button-link
         slot="secondary-button"
         label="See how it works"
-        kind="primary-outline"
+        variant="primary-outline"
         size="md"
         font-size="18px"
         font-weight="600"
@@ -75,7 +75,7 @@ function aiGuardianBody() {
     </bd-header-code>
 
     <section>
-      <div style="max-width: 1200px; margin: 0 auto;">
+      <div class="bd-container">
         <bd-quick-answer
           label="Quick answer"
           text="Bitdefender AI Guardian is a security layer for autonomous AI agents on macOS. It inspects what an agent does — tool calls, file access, prompts, skills — and returns a verdict of allowed, flagged or blocked against a policy baseline you set. It targets prompt injection, MCP tool poisoning, credential leakage and unauthorised actions. Currently in open BETA."
@@ -88,7 +88,7 @@ function aiGuardianBody() {
       </div>
     </section>
 
-    <div style="max-width: 1200px; margin: 0 auto;">
+    <div>
       <bd-anchor-nav
         aria-label="Page sections"
         cta-label="Download BETA Today"
@@ -110,7 +110,7 @@ function aiGuardianBody() {
       </bd-anchor-nav>
 
       <section id="anchor-1-section" style="margin-top: 0; padding-top: 0;">
-        <div style="padding: 48px 24px 24px;">
+        <div style="padding-block: 48px 24px;">
           <bd-overview
             title="What is AI Guardian?"
             description="AI Guardian is a Bitdefender security product that helps protect people and organisations from the risks of autonomous AI agents — prompt injection, unsafe tool use, data leakage, and unauthorised actions. It adds a baseline security model of policies, permissions, and auditing, guardrails for tool execution, and monitoring and response workflows."
@@ -125,7 +125,7 @@ function aiGuardianBody() {
       </section>
 
       <section id="anchor-2-section">
-        <div style="padding: 24px;">
+        <div style="padding-block: 24px;">
           <bd-compatibility-table
             title="What does AI Guardian work with?"
             description="AI Guardian attaches to the agent runtime on macOS, so coverage follows what an agent does on the machine rather than which vendor built it."
@@ -142,7 +142,7 @@ function aiGuardianBody() {
       </section>
 
       <section id="anchor-3-section">
-        <div style="padding: 24px 24px 48px;">
+        <div style="padding-block: 24px 48px;">
           <bd-bento-grid
             eyebrow="Protection"
             title="What does AI Guardian protect against?"
@@ -175,7 +175,7 @@ function aiGuardianBody() {
           </bd-bento-grid>
         </div>
 
-        <div style="padding: 0 24px 48px;">
+        <div style="padding-block: 0 48px;">
           <bd-comparison-panel
             title="What it is, and what it isn't"
             description="AI Guardian secures the actions an AI agent takes. It is not a traditional antivirus, a network VPN, or a chatbot content filter."
@@ -223,7 +223,7 @@ function aiGuardianBody() {
       </section>
 
       <section id="anchor-5-section">
-        <div style="padding: 24px 24px 48px;">
+        <div style="padding-block: 24px 48px;">
           <bd-compatibility-table
             variant="outcome"
             title="The same agent, with and without AI Guardian"
@@ -240,9 +240,9 @@ function aiGuardianBody() {
       </section>
 
       <section id="anchor-6-section">
-        <div style="padding: 24px 24px 48px;">
-          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">Coverage against agentic AI risk categories</bd-h>
-          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+        <div style="padding-block: 24px 48px;">
+          <bd-h as="h2" fontWeight="bold" style="margin: 0 0 8px;">Coverage against agentic AI risk categories</bd-h>
+          <bd-p variant="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
             How AI Guardian maps to the risk categories the industry is standardising on for agentic applications.
           </bd-p>
 
@@ -260,16 +260,16 @@ function aiGuardianBody() {
             ></bd-compatibility-table>
           </bd-accordion-item>
 
-          <bd-p kind="small" style="color: var(--color-neutral-500); margin-top: 16px;">
+          <bd-p variant="small" style="color: var(--color-neutral-500); margin-top: 16px;">
             Category naming follows OWASP Top 10 for Agentic Applications (2026).
           </bd-p>
         </div>
       </section>
 
       <section id="anchor-7-section">
-        <div style="padding: 24px 24px 48px;">
-          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">How it runs</bd-h>
-          <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
+        <div style="padding-block: 24px 48px;">
+          <bd-h as="h2" fontWeight="bold" style="margin: 0 0 8px;">How it runs</bd-h>
+          <bd-p variant="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
             AI Guardian installs from a signed macOS installer and runs as a background service; the rows below list how it installs, where analysis happens, and what the BETA costs.
           </bd-p>
 
@@ -385,7 +385,7 @@ function aiGuardianBody() {
         <bd-button-link
           slot="primary-button"
           label="Download BETA Today"
-          kind="white"
+          variant="white"
           size="md"
           strong
         >Download BETA Today</bd-button-link>
@@ -393,7 +393,7 @@ function aiGuardianBody() {
         <bd-button-link
           slot="secondary-button"
           label="Read the docs"
-          kind="outline-white"
+          variant="outline-white"
           size="md"
           strong
         >Read the docs</bd-button-link>
@@ -421,8 +421,8 @@ function aiGuardianBody() {
       </section>
 
       <section id="legal">
-        <div style="max-width: 1200px; margin: 0 auto; padding: 24px;">
-          <bd-p kind="small" style="color: var(--color-neutral-500); border-top: 1px solid var(--color-neutral-100); max-width: 90ch; padding-top: var(--spacing-4)">
+        <div class="bd-container" style="padding-block: 24px;">
+          <bd-p variant="small" style="color: var(--color-neutral-500); border-top: 1px solid var(--color-neutral-100); max-width: 90ch; padding-top: var(--spacing-4)">
             No security product guarantees complete protection. Effectiveness depends on configuration, runtime environment and the type of agents used. Features and availability may vary. Initially available on macOS, with further platforms to follow.
           </bd-p>
         </div>
@@ -446,7 +446,7 @@ function skillScannerBody() {
       <bd-button-link
         slot="primary-button"
         label="Install now"
-        kind="primary"
+        variant="primary"
         size="md"
         font-size="18px"
         font-weight="600"
@@ -455,7 +455,7 @@ function skillScannerBody() {
       <bd-button-link
         slot="secondary-button"
         label="View on GitHub"
-        kind="primary-outline"
+        variant="primary-outline"
         size="md"
         font-size="18px"
         font-weight="600"
@@ -483,7 +483,7 @@ function skillScannerBody() {
     </bd-header-code>
 
     <section>
-      <div style="max-width: 1200px; margin: 0 auto;">
+      <div class="bd-container">
         <bd-quick-answer
           label="Quick answer"
           text='Agent Skill Scanner is a Bitdefender agent skill that audits another agent skill before you install or trust it. It walks every file, runs 71 behavioural detectors across 16 threat categories, extracts 18 indicator types, and returns an LLM-generated report with a risk level, summary and per-file findings. Install it with "npx skills add bitdefender/agent-skill-scanner", from GitHub, or as a zip archive.'
@@ -577,7 +577,7 @@ function skillScannerBody() {
       <section id="anchor-3-section">
         <div style="padding: 24px 24px 48px;">
           <bd-p kind="normal" style="color: var(--color-blue-500); font-weight: 600; margin: 0 0 8px;">Detection coverage</bd-p>
-          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">What it detects</bd-h>
+          <bd-h as="h2" fontWeight="bold" style="margin: 0 0 8px;">What it detects</bd-h>
           <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px; max-width: 72ch">
             Agent Skill Scanner runs 71 behavioural detectors across 16 threat categories, including code execution, obfuscation, reverse shells, crypto-mining, persistence, time bombs and stealth natural-language directives. It also extracts 18 indicator types from every text file: URLs, IPs, base64 blobs, dangerous shell commands, secret env-var names and invisible Unicode characters among them.
           </bd-p>
@@ -622,32 +622,32 @@ function skillScannerBody() {
           >
             <bd-bento-item title="Layered analysis" tone="tint">
               <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-              <bd-p color="var(--color-neutral-600)">Local indicator extraction feeds a server-side LLM that produces the report: a risk level, a plain-language summary, and per-file findings. Enough to decide, without wading through raw indicators.</bd-p>
+              <bd-p color="muted">Local indicator extraction feeds a server-side LLM that produces the report: a risk level, a plain-language summary, and per-file findings. Enough to decide, without wading through raw indicators.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item title="Deep archive inspection">
               <bd-guide-icon slot="icon" width="32" height="32" color="#006DFF"></bd-guide-icon>
-              <bd-p color="var(--color-neutral-600)">The scanner recursively unpacks .zip, .tar.gz, .tar.bz2, .tar, .7z and .rar up to 10 levels deep, with limits of 500 MB uncompressed and 10,000 entries per archive. It skips symlinks rather than following them.</bd-p>
+              <bd-p color="muted">The scanner recursively unpacks .zip, .tar.gz, .tar.bz2, .tar, .7z and .rar up to 10 levels deep, with limits of 500 MB uncompressed and 10,000 entries per archive. It skips symlinks rather than following them.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item title="Prose-aware detection">
               <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-              <bd-p color="var(--color-neutral-600)">Natural-language threats hidden in SKILL.md instructions (stealth exfiltration, covert actions, keyword and counter triggers) are first-class detections.</bd-p>
+              <bd-p color="muted">Natural-language threats hidden in SKILL.md instructions (stealth exfiltration, covert actions, keyword and counter triggers) are first-class detections.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item title="Semantic embeddings">
               <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-              <bd-p color="var(--color-neutral-600)">The scanner computes local sentence embeddings (all-MiniLM-L6-v2, ONNX) to support the analysis. They run on your machine, and you can disable them.</bd-p>
+              <bd-p color="muted">The scanner computes local sentence embeddings (all-MiniLM-L6-v2, ONNX) to support the analysis. They run on your machine, and you can disable them.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item title="Privacy-respecting default">
               <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-              <bd-p color="var(--color-neutral-600)">In scan mode the scanner transmits only hashes, extracted indicators and metadata off the machine.</bd-p>
+              <bd-p color="muted">In scan mode the scanner transmits only hashes, extracted indicators and metadata off the machine.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item title="Flexible targets" tone="dark">
               <bd-family-icon slot="icon" width="32" height="32" color="#60a5fa"></bd-family-icon>
-              <bd-p color="#ffffffb8">Scan a directory, an installed skill by name, a .zip archive, or a URL. The skill resolves whatever you refer to in plain language.</bd-p>
+              <bd-p color="inverse">Scan a directory, an installed skill by name, a .zip archive, or a URL. The skill resolves whatever you refer to in plain language.</bd-p>
             </bd-bento-item>
           </bd-bento-grid>
         </div>
@@ -724,29 +724,29 @@ function skillScannerBody() {
             <bd-h as="h3" style="margin: 0 0 16px;">The contract the agent is held to</bd-h>
             <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;">
               <li style="display: flex; align-items: flex-start; gap: 12px;">
-                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
                 <bd-p kind="regular" style="margin:0;">Scan mode is the default: a casual request never uploads your files.</bd-p>
               </li>
               <li style="display: flex; align-items: flex-start; gap: 12px;">
-                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
                 <bd-p kind="regular" style="margin:0;">Submit is opt-in only: the agent won't upload the full archive unless you explicitly ask.</bd-p>
               </li>
               <li style="display: flex; align-items: flex-start; gap: 12px;">
-                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
                 <bd-p kind="regular" style="margin:0;">The agent relays, it doesn't overrule: it presents the backend's report and never substitutes its own verdict.</bd-p>
               </li>
               <li style="display: flex; align-items: flex-start; gap: 12px;">
-                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
                 <bd-p kind="regular" style="margin:0;">Errors are surfaced as they are: on failure you get the specific reason.</bd-p>
               </li>
               <li style="display: flex; align-items: flex-start; gap: 12px;">
-                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+                <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
                 <bd-p kind="regular" style="margin:0;">Self-updates are Ed25519-signature-verified against a key pinned in the client, staged with path-traversal-safe extraction, and rolled back automatically on failure.</bd-p>
               </li>
             </ul>
           </div>
 
-          <div style="background: var(--color-yellow-50, #fffbeb); border: 1px solid var(--color-yellow-300, #fcd34d); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800, #92400e); margin-top: 24px;">
+          <div style="background: var(--color-yellow-50); border: 1px solid var(--color-yellow-300); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800); margin-top: 24px;">
             <bd-p kind="small" style="margin:0;">A scan that returns no findings means no known threat patterns were detected — not that the skill is safe.</bd-p>
           </div>
         </bd-install-options>
@@ -922,12 +922,12 @@ function vpnBody() {
 
       <span
         slot="annotation-top"
-        style="display: inline-flex; align-items: center; background: var(--color-blue-50, #eaf2ff); border: 1px solid var(--color-blue-200, #bcd7ff); color: var(--color-blue-600, #1d5fd6); font-family: var(--typography-fontFamily-mono, monospace); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap;"
+        style="display: inline-flex; align-items: center; background: var(--color-blue-50); border: 1px solid var(--color-blue-200); color: var(--color-blue-600); font-family: var(--typography-fontFamily-mono); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap;"
       >exit: frankfurt · server IP</span>
 
       <span
         slot="annotation-bottom"
-        style="display: inline-flex; align-items: center; background: var(--color-green-50, #e9faf0); border: 1px solid var(--color-green-200, #b7ecc9); color: var(--color-green-700, #1b7f42); font-family: var(--typography-fontFamily-mono, monospace); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap;"
+        style="display: inline-flex; align-items: center; background: var(--color-green-50); border: 1px solid var(--color-green-200); color: var(--color-green-700); font-family: var(--typography-fontFamily-mono); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap;"
       >tunnel closed — session cleared</span>
 
       <bd-terminal-message
@@ -999,33 +999,33 @@ function vpnBody() {
             description="Each protection is structural: every request the agent routes through Bitdefender's MCP tools gets it automatically, with no setting to remember."
           >
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">01</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">IP masking</bd-h>
-              <bd-p color="var(--color-neutral-600)">When your agent reaches a site, it sees the VPN server's exit IP. Not your home address or IP-based location.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">01</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">IP masking</bd-h>
+              <bd-p color="muted">When your agent reaches a site, it sees the VPN server's exit IP. Not your home address or IP-based location.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">02</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Per-prompt encryption</bd-h>
-              <bd-p color="var(--color-neutral-600)">Every request opens its own encrypted tunnel from your device to Bitdefender, so whoever runs the Wi-Fi you're on can't read what the agent sends.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">02</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Per-prompt encryption</bd-h>
+              <bd-p color="muted">Every request opens its own encrypted tunnel from your device to Bitdefender, so whoever runs the Wi-Fi you're on can't read what the agent sends.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">03</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Session isolation</bd-h>
-              <bd-p color="var(--color-neutral-600)">Each tunnel closes the moment the prompt ends. If a site sees two of your agent's requests, it has no network-level way to tell they came from the same prompt.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">03</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Session isolation</bd-h>
+              <bd-p color="muted">Each tunnel closes the moment the prompt ends. If a site sees two of your agent's requests, it has no network-level way to tell they came from the same prompt.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">04</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Clean-IP browsing</bd-h>
-              <bd-p color="var(--color-neutral-600)">Every request exits on the VPN server's IP rather than the same home address every time, useful for QA and monitoring work that needs a neutral, non-residential vantage point.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">04</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Clean-IP browsing</bd-h>
+              <bd-p color="muted">Every request exits on the VPN server's IP rather than the same home address every time, useful for QA and monitoring work that needs a neutral, non-residential vantage point.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">05</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Regional routing</bd-h>
-              <bd-p color="var(--color-neutral-600)">Need to see a page the way a visitor from a specific country would? Route that one request through a Bitdefender server there, just for that prompt.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">05</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Regional routing</bd-h>
+              <bd-p color="muted">Need to see a page the way a visitor from a specific country would? Route that one request through a Bitdefender server there, just for that prompt.</bd-p>
             </bd-bento-item>
           </bd-bento-grid>
         </div>
@@ -1041,18 +1041,18 @@ function vpnBody() {
             description="VPN for AI Agents is aimed at people running agents that reach the open web — for research, QA, or comparison tasks — and want the traffic to be private and encrypted, without changing how the agent works."
           >
             <bd-bento-item>
-              <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">IP privacy toward the sites you reach</bd-h>
-              <bd-p color="var(--color-neutral-600)">If your agent sends dozens of requests a day, none of them carry your home IP, which makes it harder for sites to correlate requests to a single household, whether it's a research task or a run of price comparisons across competitors.</bd-p>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">IP privacy toward the sites you reach</bd-h>
+              <bd-p color="muted">If your agent sends dozens of requests a day, none of them carry your home IP, which makes it harder for sites to correlate requests to a single household, whether it's a research task or a run of price comparisons across competitors.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">QA on geolocalized pages</bd-h>
-              <bd-p color="var(--color-neutral-600)">Your team ships a pricing page with different content for five countries. Route the agent through the German exit and check that version renders the way a visitor there would actually see it.</bd-p>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">QA on geolocalized pages</bd-h>
+              <bd-p color="muted">Your team ships a pricing page with different content for five countries. Route the agent through the German exit and check that version renders the way a visitor there would actually see it.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <bd-h as="h5" font-weight="700" style="margin: 0 0 8px;">Agents on untrusted networks</bd-h>
-              <bd-p color="var(--color-neutral-600)">You're running a research agent from a conference or a café. The tunnel encrypts what it sends, so whoever runs that Wi-Fi can't read it.</bd-p>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Agents on untrusted networks</bd-h>
+              <bd-p color="muted">You're running a research agent from a conference or a café. The tunnel encrypts what it sends, so whoever runs that Wi-Fi can't read it.</bd-p>
             </bd-bento-item>
           </bd-bento-grid>
 
@@ -1093,25 +1093,25 @@ function vpnBody() {
             description="Setup happens once. Protection happens every prompt, without the user thinking about it."
           >
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">01</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Install & sign in</bd-h>
-              <bd-p color="var(--color-neutral-600)">Download the macOS installer and run it. VPN for AI Agents runs as a lightweight macOS component you install once, no separate app to manage. First run: choose which agents to protect, consent to telemetry, sign in once.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">01</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Install & sign in</bd-h>
+              <bd-p color="muted">Download the macOS installer and run it. VPN for AI Agents runs as a lightweight macOS component you install once, no separate app to manage. First run: choose which agents to protect, consent to telemetry, sign in once.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">02</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Restart to activate</bd-h>
-              <bd-p color="var(--color-neutral-600)">Claude Desktop, Cursor, Codex, or OpenCode restarts once to pick up the new MCP configuration. No files to edit, nothing else to configure.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">02</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Restart to activate</bd-h>
+              <bd-p color="muted">Claude Desktop, Cursor, Codex, or OpenCode restarts once to pick up the new MCP configuration. No files to edit, nothing else to configure.</bd-p>
             </bd-bento-item>
 
             <bd-bento-item>
-              <span slot="icon" style="color: var(--color-blue-500, #006DFF); font-weight: 700; font-family: var(--typography-fontFamily-mono, monospace); font-size: 14px; letter-spacing: 0.05em;">03</span>
-              <bd-h as="h5" fontWeight="700" style="margin: 0 0 8px;">Automatic for every MCP call</bd-h>
-              <bd-p color="var(--color-neutral-600)">The tunnel opens when the agent calls a Bitdefender tool and closes when the prompt ends. No cookies, cache, or session state carries over to the next prompt, and idle containers close on their own.</bd-p>
+              <span slot="icon" style="color: var(--color-blue-500); font-weight: 700; font-family: var(--typography-fontFamily-mono); font-size: 14px; letter-spacing: 0.05em;">03</span>
+              <bd-h as="h5" fontWeight="bold" style="margin: 0 0 8px;">Automatic for every MCP call</bd-h>
+              <bd-p color="muted">The tunnel opens when the agent calls a Bitdefender tool and closes when the prompt ends. No cookies, cache, or session state carries over to the next prompt, and idle containers close on their own.</bd-p>
             </bd-bento-item>
           </bd-bento-grid>
 
-          <div style="background: var(--color-yellow-50, #fffbeb); border: 1px solid var(--color-yellow-300, #fcd34d); border-radius: var(--radius-xl, 12px); padding: 16px 20px; color: var(--color-yellow-800, #92400e); margin-top: 24px;">
+          <div style="background: var(--color-yellow-50); border: 1px solid var(--color-yellow-300); border-radius: var(--radius-xl); padding: 16px 20px; color: var(--color-yellow-800); margin-top: 24px;">
             <bd-p kind="small" style="margin:0;">External beta on macOS. Downloads the macOS beta installer (.dmg). Windows to follow.</bd-p>
           </div>
         </div>
@@ -1120,7 +1120,7 @@ function vpnBody() {
                 <section id="anchor-5-section">
         <div style="padding: 24px 24px 48px;">
           <bd-p kind="normal" style="color: var(--color-blue-500); font-weight: 600; margin: 0 0 8px;">System requirements</bd-p>
-          <bd-h as="h2" font-weight="700" style="margin: 0 0 8px;">What it needs to run</bd-h>
+          <bd-h as="h2" fontWeight="bold" style="margin: 0 0 8px;">What it needs to run</bd-h>
           <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0 0 24px;">
             The floor is set by the container engine that isolates each prompt, not by the VPN itself. Figures are from the beta build.
           </bd-p>
@@ -1263,12 +1263,12 @@ function vpnBody() {
           strong
         >Download for macOS</bd-button-link>
 
-        <bd-p slot="footer" kind="small" font-family="var(--typography-fontFamily-mono, monospace)" style="color: rgba(255,255,255,0.9); max-width: 700px;">
+        <bd-p slot="footer" kind="small" font-family="mono" style="color: rgba(255,255,255,0.9); max-width: 700px;">
           <strong>Contact &amp; feedback.</strong> Questions or feedback about the beta? Email us at
           <a href="mailto:vpn-for-agents-feedback@bitdefender.com" style="color: #fff; text-decoration: underline;">vpn-for-agents-feedback@bitdefender.com</a>.
         </bd-p>
 
-        <bd-p slot="footer" kind="small" font-family="var(--typography-fontFamily-mono, monospace)" style="color: rgba(255,255,255,0.7); max-width: 900px;">
+        <bd-p slot="footer" kind="small" font-family="mono" style="color: rgba(255,255,255,0.7); max-width: 900px;">
           Your AI agent decides when to use the VPN. Bitdefender cannot guarantee every request is routed through it. No security product guarantees complete protection. Features and availability may vary. Initially available on macOS, with Windows to follow.
         </bd-p>
       </bd-cta-banner>
@@ -1318,44 +1318,44 @@ function sharedFooter() {
       </div>
 
       <div slot="nav">
-        <bd-link href="/consumer/" kind="light">For Consumer</bd-link>
-        <bd-link href="/small-business/" kind="light">For Small Business</bd-link>
-        <bd-link href="/business/" kind="light">For Enterprise</bd-link>
-        <bd-link href="/partners/" kind="light">For Partners</bd-link>
+        <bd-link href="/consumer/" variant="light">For Consumer</bd-link>
+        <bd-link href="/small-business/" variant="light">For Small Business</bd-link>
+        <bd-link href="/business/" variant="light">For Enterprise</bd-link>
+        <bd-link href="/partners/" variant="light">For Partners</bd-link>
       </div>
 
       <bd-footer-links-group slot="quick-links" title="Quick links">
-        <bd-link href="/ai-guardian/" kind="light">AI Guardian</bd-link>
-        <bd-link href="/docs/" kind="light">Documentation</bd-link>
-        <bd-link href="/agent-skill-scanner/" kind="light">Agent Skill Scanner</bd-link>
-        <bd-link href="https://www.bitdefender.com" kind="light">bitdefender.com</bd-link>
+        <bd-link href="/ai-guardian/" variant="light">AI Guardian</bd-link>
+        <bd-link href="/docs/" variant="light">Documentation</bd-link>
+        <bd-link href="/agent-skill-scanner/" variant="light">Agent Skill Scanner</bd-link>
+        <bd-link href="https://www.bitdefender.com" variant="light">bitdefender.com</bd-link>
       </bd-footer-links-group>
 
       <bd-footer-links-group slot="quick-links" title="For agents">
-        <bd-link href="/llms.txt" kind="light">llms.txt</bd-link>
-        <bd-link href="/llms-full.txt" kind="light">llms-full.txt</bd-link>
-        <bd-link href="/index.md" kind="light">index.md</bd-link>
-        <bd-link href="/sitemap.xml" kind="light">Sitemap</bd-link>
-        <bd-link href="/robots.txt" kind="light">robots.txt</bd-link>
+        <bd-link href="/llms.txt" variant="light">llms.txt</bd-link>
+        <bd-link href="/llms-full.txt" variant="light">llms-full.txt</bd-link>
+        <bd-link href="/index.md" variant="light">index.md</bd-link>
+        <bd-link href="/sitemap.xml" variant="light">Sitemap</bd-link>
+        <bd-link href="/robots.txt" variant="light">robots.txt</bd-link>
       </bd-footer-links-group>
 
       <div slot="secondary-nav">
-        <bd-link href="/legal/" kind="light">Legal</bd-link>
+        <bd-link href="/legal/" variant="light">Legal</bd-link>
         <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
-        <bd-link href="/privacy-policy/" kind="light">Privacy Policy</bd-link>
+        <bd-link href="/privacy-policy/" variant="light">Privacy Policy</bd-link>
         <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
-        <bd-link href="/company/" kind="light">Company</bd-link>
+        <bd-link href="/company/" variant="light">Company</bd-link>
         <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
-        <bd-link href="/support/" kind="light">Support</bd-link>
+        <bd-link href="/support/" variant="light">Support</bd-link>
         <bd-divider-vertical color="white" opacity="0.4"></bd-divider-vertical>
-        <bd-link href="#" kind="light">Cookie settings</bd-link>
+        <bd-link href="#" variant="light">Cookie settings</bd-link>
       </div>
 
       <div slot="address" style="color:#fff; opacity:0.85; font-size:14px;">
         © 2001–2026 Bitdefender
       </div>
 
-      <div slot="copyright" style="max-width: 1200px; color: rgba(255,255,255,0.75); font-size: 12px; line-height: 1.5;">
+      <div slot="copyright" style="color: rgba(255,255,255,0.75); font-size: 12px; line-height: 1.5;">
         Bitdefender trademarks and registered trademarks are the property of Bitdefender or its affiliates. Claude and Claude Code are trademarks of Anthropic. ChatGPT and Codex are trademarks of OpenAI. Gemini and Google are trademarks of Google LLC. Copilot and Microsoft are trademarks of Microsoft Corporation. Perplexity is a trademark of Perplexity AI, Inc. Hermes Agent is a mark of Nous Research. The OpenClaw and opencode marks are the property of their owners. All other names and marks are the property of their respective owners. Third-party names and logos on this page, including those on the buttons that open an assistant, are used for identification only. Their use does not imply any affiliation with, sponsorship by, or endorsement from those owners.
       </div>
     </bd-footer>