@repobit/dex-system-design 0.24.18 → 0.24.20

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.20](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.19...@repobit/dex-system-design@0.24.20) (2026-09-24)
+
+### Bug Fixes
+
+* **DEX-1014:** new adjustments for Card component
+
+
+## [0.24.19](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.18...@repobit/dex-system-design@0.24.19) (2026-09-23)
+
+### Bug Fixes
+
+* **DEX-1014:** adjustments for AI Bitdefender
+
+
 ## [0.24.18](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.17...@repobit/dex-system-design@0.24.18) (2026-09-23)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.18",
+  "version": "0.24.20",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -76,8 +76,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.34",
-    "@repobit/dex-store-elements": "2.1.4",
+    "@repobit/dex-store": "1.6.36",
+    "@repobit/dex-store-elements": "2.1.6",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "a4dee375b21a421ee8d7c7afae913250def584c6"
+  "gitHead": "c5b184f2837dad5acab88a931b12d3d51121ed57"
 }

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

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import "./accordion/accordion-bg.js";
 import "./accordion/accordion.js";
 import "./agent-endpoints/agent-endpoints.js";
@@ -576,7 +576,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-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-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.
@@ -620,11 +620,6 @@ function skillScannerBody() {
           <bd-bento-grid
             title="How it works"
           >
-            <!--
-              Iconițele exacte din poză (stive/layers, scut+lupă, eprubetă,
-              ceas, lacăt deschis, lupă+insectă) nu există în setul curent de
-              iconițe -- am ales cele mai apropiate semantic ca placeholder.
-            -->
             <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>
@@ -883,15 +878,433 @@ function skillScannerBody() {
         </div>
       </bd-agent-endpoints>
     </section>
-
-    <!--
-      TODO: daca mai exista sectiuni sub asta pentru Skill Scanner,
-      se adauga cand vine continutul.
-    -->
   `;
 }
 
+function vpnBody() {
+  return html`
+    <bd-header-code
+      variant="tint"
+      eyebrow="Privacy for autonomous AI agents"
+      title="Bitdefender VPN for AI Agents"
+      description="Each prompt gets a fresh, disposable container scoped to a specific location, so your agent's traffic isn't tied to your home connection or your personal IP."
+      meta-spec="macOS 13+ · Apple silicon (M1 or later) · 31 MB"
+      .metaFacts=${[
+        { label: "PLATFORM", value: "macOS" },
+        { label: "STATUS", value: "External beta" },
+        { label: "PRICE", value: "Free during beta" },
+        { label: "MADE BY", value: "Bitdefender" },
+        { label: "WINDOWS", value: "To follow" }
+      ]}
+    >
+      <span slot="breadcrumb">Bitdefender AI</span>
+      <span slot="breadcrumb">vpn-for-agents</span>
+
+      <bd-button-link
+        slot="primary-button"
+        label="Download for macOS"
+        kind="primary"
+        size="md"
+        font-size="18px"
+        font-weight="600"
+      >Download for macOS</bd-button-link>
+
+      <bd-button-link
+        slot="secondary-button"
+        label="See how it works"
+        kind="primary-outline"
+        size="md"
+        font-size="18px"
+        font-weight="600"
+      >See how it works</bd-button-link>
+
+      <span slot="badge">EXTERNAL BETA</span>
+
+      <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;"
+      >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;"
+      >tunnel closed — session cleared</span>
+
+      <bd-terminal-message
+        slot="terminal-content"
+        show-titlebar
+        variant="flush"
+        caption="// illustrative — every connection closes when the prompt ends"
+        .lines=${[
+          { type: "title", text: "VPN for AI Agents · connection log", live: true },
+          { type: "row", label: "MCP", text: "vpn_connect(location: frankfurt)", badge: "Open", badgeColor: "green" },
+          { type: "row", label: "REQUEST", text: "agent reaches insurer-compare.com", badge: "Server IP", badgeColor: "green" },
+          { type: "row", label: "NETWORK", text: "hotel Wi-Fi, unencrypted", badge: "Protected", badgeColor: "green" },
+          { type: "row", label: "MCP", text: "vpn_safefetch(location: frankfurt, url: insurer-compare.com)", badge: "Scanned", badgeColor: "amber" },
+          { type: "row", label: "MCP", text: "vpn_disconnect(location: frankfurt) — prompt ends", badge: "Closed — session cleared", badgeColor: "neutral" }
+        ]}
+      ></bd-terminal-message>
+    </bd-header-code>
+
+    <section>
+      <div style="max-width: 1200px; margin: 0 auto;">
+        <bd-quick-answer
+          label="Quick answer"
+          text="Bitdefender VPN for AI Agents is a macOS VPN scoped to AI-agent traffic. Each prompt gets its own container, scoped to a specific location and destroyed when the prompt ends, so no cookies, cache, or session state carries over. It covers what Claude Desktop, Cursor, Codex, and OpenCode route through Bitdefender's MCP tools. Free with no traffic caps during beta, currently in external beta."
+        ></bd-quick-answer>
+      </div>
+    </section>
+
+    <div style="max-width: 1200px; margin: 0 auto;">
+      <bd-anchor-nav
+        aria-label="VPN for AI Agents sections"
+        sticky-top="65px"
+        .items=${[
+          { title: "Overview" },
+          { title: "Protection" },
+          { title: "Use cases" },
+          { title: "How it works" },
+          { title: "Requirements" },
+          { title: "Why trust it" },
+          { title: "FAQ" }
+        ]}
+        style="margin-bottom: 0;"
+      >
+      </bd-anchor-nav>
+
+      <section id="anchor-1-section" style="margin-top: 0; padding-top: 0;">
+        <div style="padding: 48px 24px 24px;">
+          <bd-overview
+            title="What is VPN for AI Agents?"
+            description="VPN for AI Agents routes what Claude Desktop, Cursor, Codex, and OpenCode send over the network through Bitdefender's VPN servers instead of yours. Each prompt opens its own connection, exits on the VPN server's IP, and disappears the moment the prompt ends. No cookies, cache, or session state carries over to the next prompt. Requests the agent makes with its own built-in tools, outside Bitdefender's MCP server, are not routed through the VPN."
+            .facts=${[
+              { label: "CATEGORY", value: "Agent privacy & networking" },
+              { label: "PLATFORM", value: "macOS (initial)" },
+              { label: "RUNS AS", value: "Broker + MCP server" },
+              { label: "AGENTS", value: "Claude Desktop, Cursor, Codex, OpenCode" },
+              { label: "MODEL", value: "Free during beta, no traffic caps" }
+            ]}
+          ></bd-overview>
+        </div>
+      </section>
+
+      <section id="anchor-2-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-bento-grid
+            variant="equal"
+            equal-columns="3"
+            background="tint"
+            eyebrow="Protection"
+            title="What does VPN for AI Agents protect against?"
+            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>
+            </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>
+            </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>
+            </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>
+            </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>
+            </bd-bento-item>
+          </bd-bento-grid>
+        </div>
+      </section>
+
+      <section id="anchor-3-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-bento-grid
+            variant="equal"
+            equal-columns="3"
+            eyebrow="Who it's for"
+            title="Built for agents that act on your behalf"
+            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-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-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-bento-item>
+          </bd-bento-grid>
+
+          <bd-p kind="regular" style="color: var(--color-neutral-500); font-style: italic; margin-top: 24px; max-width: 90ch;">
+            VPN for AI Agents changes the network path a request takes, not the rules of the site it reaches. It isn't a workaround for anyone's terms of service — more on that below.
+          </bd-p>
+        </div>
+
+        <bd-comparison-panel
+          variant="dark"
+          title="What it is, and what it isn't"
+          description="VPN for AI Agents secures the network path your agent's traffic takes. It is not a device-wide VPN, a content filter, or a way to hide what the agent is doing from the AI provider."
+          positive-title="VPN for AI Agents is"
+          negative-title="VPN for AI Agents is not"
+          .positiveItems=${[
+            "A VPN scoped to agent traffic only — Claude Desktop, Cursor, Codex, and OpenCode.",
+            "A fresh, isolated container per prompt — not a persistent tunnel.",
+            "IP masking for every request routed through it.",
+            "Free during beta, and standalone.",
+            "Built for macOS first."
+          ]}
+          .negativeItems=${[
+            "A device-wide VPN — the browser and other apps are unaffected.",
+            "A way to hide prompts from the AI provider — the model behind your agent still receives prompts and account identity as normal.",
+            "A guarantee every request is protected — only traffic the agent sends through Bitdefender's MCP tools is covered.",
+            "An always-on tunnel — it opens and closes with each prompt.",
+            "A way to bypass a site's terms of service, rate limits, or an existing IP ban — those decisions belong to the destination site, not to Bitdefender."
+          ]}
+        ></bd-comparison-panel>
+      </section>
+      <section id="anchor-4-section">
+        <div style="padding: 24px 24px 48px;">
+          <bd-bento-grid
+            variant="equal"
+            equal-columns="3"
+            eyebrow="How it works"
+            title="Arrives quietly, protects automatically"
+            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>
+            </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>
+            </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>
+            </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;">
+            <bd-p kind="small" style="margin:0;">External beta on macOS. Downloads the macOS beta installer (.dmg). Windows to follow.</bd-p>
+          </div>
+        </div>
+      </section>
+
+                <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-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>
 
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
+            <bd-compatibility-table
+              variant="light"
+              background="bordered"
+              light-columns="1"
+              title="Minimum"
+              .rows=${[
+                { label: "macOS", value: "13 or later" },
+                { label: "Processor", value: "Apple silicon" },
+                { label: "Memory", value: "8 GB" },
+                { label: "Free disk", value: "About 10 GB" },
+                { label: "Max exit locations at once", value: "4" }
+              ]}
+            ></bd-compatibility-table>
+
+            <bd-compatibility-table
+              variant="light"
+              background="bordered"
+              light-columns="1"
+              title="Recommended for testing"
+              .rows=${[
+                { label: "macOS", value: "15 or later" },
+                { label: "Processor", value: "Apple silicon" },
+                { label: "Memory", value: "16 GB or more" },
+                { label: "Free disk", value: "About 10 GB" },
+                { label: "Max exit locations at once", value: "8" }
+              ]}
+            ></bd-compatibility-table>
+          </div>
+
+          <bd-p kind="regular" style="color: var(--color-neutral-500); font-style: italic; margin-top: 24px;">
+            Intel Macs are not supported.
+          </bd-p>
+        </div>
+      </section>
+      <section id="anchor-6-section">
+        <bd-trust-panel
+          eyebrow="Why trust it"
+          title="Built by Bitdefender"
+          description="VPN for AI Agents is made by Bitdefender, the company that has protected people and organisations since 2001. The figures and recognitions below describe Bitdefender the company — not VPN for AI Agents, which is in external beta."
+          link-label="Why millions trust Bitdefender"
+          link-href="#"
+          .stats=${[
+            { value: "50B+", label: "threats blocked every year" },
+            { value: "580+", label: "technology patents" },
+            { value: "170+", label: "countries protected" },
+            { value: "15+", label: "years of AI-driven security" },
+            { value: "50%+", label: "of employees work in R&D" },
+            { value: "30+", label: "law-enforcement partnerships" }
+          ]}
+          .cards=${[
+            {
+              eyebrow    : "Brand partnership",
+              title      : "Trusted by Ferrari as cybersecurity partner",
+              description: "A partnership born from a passion for high performance and technological innovation — Bitdefender supports Ferrari with Advanced Threat Intelligence to improve detection and response to cyber threats.",
+              linkLabel  : "Learn more",
+              linkHref   : "#"
+            },
+            {
+              eyebrow    : "Brand recognition",
+              title      : "Award-winning security software you can trust. Always.",
+              description: "Consistently top-ranked by the world's leading independent testing labs and tech publications.",
+              linkLabel  : "Learn more",
+              linkHref   : "#"
+            }
+          ]}
+        >
+          <span slot="card-1-logos" style="font-weight:700; color:#006DFF; font-size:18px;">Bitdefender</span>
+          <span slot="card-1-logos" style="font-size:12px; color:#374151; font-weight:600;">FERRARI TEAM PARTNER</span>
+
+          <bd-pc-mag-icon slot="card-2-logos" height="32"></bd-pc-mag-icon>
+          <bd-av-comparatives-icon slot="card-2-logos" height="32"></bd-av-comparatives-icon>
+          <bd-top-product-icon slot="card-2-logos" height="32"></bd-top-product-icon>
+          <bd-best-brands-icon slot="card-2-logos" height="32"></bd-best-brands-icon>
+          <bd-laurel-icon slot="card-2-logos" height="32"></bd-laurel-icon>
+        </bd-trust-panel>
+      </section>
+
+            <section id="anchor-7-section" class="faq">
+        <bd-accordion-bg title="Questions about agent privacy">
+          <bd-accordion-bg-item title="Does VPN for AI Agents hide my prompts from Claude or Anthropic?">
+            <bd-p>No. It protects the network path your agent's requests take, not the conversation itself. The model behind your agent still receives the user's prompts and account identity as normal.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Will it slow my agent down?">
+            <bd-p>Each request opens a fresh, isolated tunnel, so there is some per-connection overhead. Real latency numbers will be published after the external beta period, based on actual usage.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="How is this different from a normal VPN?">
+            <bd-p>A classic VPN keeps one persistent connection open across everything you do. VPN for AI Agents opens a new, isolated container per prompt and closes it when the prompt ends, so consecutive prompts can't be linked together.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Does it work on Windows?">
+            <bd-p>VPN for AI Agents runs on macOS at launch, with Windows to follow.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="How much does it cost?">
+            <bd-p>Free during beta, with no traffic caps. It's a standalone product with its own sign-in, with no dependency on any other Bitdefender subscription. Pricing decisions, if any, will follow real usage data.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Can I use this to get around a site's terms of service or an IP ban?">
+            <bd-p>No. VPN for AI Agents changes the network path a request takes, not the rules of the site it reaches. Using it to evade rate limits, bans, or scraping restrictions is against Bitdefender's acceptable use policy and can result in the account losing access to the beta.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Which exit location does the VPN use?">
+            <bd-p>If you don't specify a location in your prompt, the agent automatically picks the closest or optimal location based on latency. If you explicitly request a country or region, the agent honors it, as long as the target site isn't geo-blocked.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="What happens if the tunnel fails?">
+            <bd-p>The request is dropped inside the isolated container; there's no automatic fallback to your own IP. Depending on the situation, the agent may retry with a different exit location, abandon the request, or ask you directly whether you want to continue without the VPN.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="What happens to telemetry data?">
+            <bd-p>Telemetry collection and use are covered by Bitdefender's Privacy Policy.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="Do you offer team features (SSO, MDM, central configuration)?">
+            <bd-p>Not at this stage — the current beta is designed for individual developers and freelancers, not organisations.</bd-p>
+          </bd-accordion-bg-item>
+
+          <bd-accordion-bg-item title="What exactly does &quot;external beta&quot; mean?">
+            <bd-p>The external beta starts on September 16 and runs for one month, during which we collect feedback from users (freelance developers and AI early adopters). Current commercial terms are those of the standard consumer EULA.</bd-p>
+          </bd-accordion-bg-item>
+        </bd-accordion-bg>
+      </section>
+            <bd-cta-banner
+        title="Give your agent an exit that disappears"
+        description="VPN for AI Agents is now in external beta on macOS, with Windows to follow."
+        caption="Downloads the macOS beta installer (.dmg)."
+      >
+        <bd-button-link
+          slot="primary-button"
+          label="Download for macOS"
+          kind="white"
+          size="md"
+          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;">
+          <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;">
+          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>
+            <section id="anchor-8-section">
+        <bd-agent-endpoints
+          eyebrow="For AI agents and assistants"
+          title="Machine-readable endpoints"
+          description="This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:"
+          .endpoints=${[
+            { label: "/llms.txt", href: "/llms.txt" },
+            { label: "/llms-full.txt", href: "/llms-full.txt" },
+            { label: "/vpn-for-agents/index.md", href: "/vpn-for-agents/index.md" },
+            { label: "/sitemap.xml", href: "/sitemap.xml" },
+            { label: "/robots.txt", href: "/robots.txt" }
+          ]}
+        >
+          <div slot="rows" style="border-top: 1px solid var(--color-neutral-100); margin-top: 24px; padding-top: 24px;">
+            <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0;">
+              By using Bitdefender VPN for AI Agents, you confirm that you are over 16 years old and you have read and agreed to Bitdefender's
+              <bd-link href="#" kind="primary">End User License Agreement</bd-link>
+              and
+              <bd-link href="#" kind="primary">Privacy Policy</bd-link>.
+            </bd-p>
+          </div>
+
+          <div slot="rows" style="border-top: 1px solid var(--color-neutral-100); margin-top: 24px; padding-top: 24px;">
+            <bd-p kind="regular" style="color: var(--color-neutral-700); margin: 0;">
+              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>
+          </div>
+        </bd-agent-endpoints>
+      </section>
+  
+    </div>
+  `;
+}
 function sharedFooter() {
   return html`
     <bd-footer>
@@ -950,9 +1363,9 @@ function sharedFooter() {
 }
 
 // ---------------------------------------------------------------------------
-// Wrapper interactiv: ține starea "activeTab" și intercepta click-ul pe
-// page-switcher (preventDefault pe anchor-ul intern) în loc să lase browserul
-// să navigheze la un URL care nu există în Storybook (de-asta dădea 404).
+// Wrapper interactiv: ține starea "activeTab" (acum 3 stări) și interceptează
+// click-ul pe page-switcher (preventDefault pe anchor-ul intern) în loc să
+// lase browserul să navigheze la un URL care nu există în Storybook.
 // ---------------------------------------------------------------------------
 
 class AiGuardianSkillScannerDemo extends LitElement {
@@ -960,20 +1373,15 @@ class AiGuardianSkillScannerDemo extends LitElement {
     activeTab: { state: true }
   };
 
-  // light DOM: evenimentul de click (composed) tot ajunge aici din shadow-ul
-  // intern al bd-page-switcher / bd-link, deci putem intercepta navigarea.
   createRenderRoot() {
     return this;
   }
 
   constructor() {
     super();
-    this.activeTab = "ai-guardian";
+    this.activeTab = "ai-guardian"; // "ai-guardian" | "skill-scanner" | "vpn"
   }
 
-  // Folosim fragmente "#..." în loc de căi reale (/ai-guardian/, /agent-skill-scanner/):
-  // un fragment nu navighează niciodată către altă pagină, deci nu poate da 404,
-  // indiferent cum gestionează bd-link intern click-ul.
   _onNavClick(event) {
     const path = event.composedPath();
     const anchor = path.find(
@@ -988,22 +1396,28 @@ class AiGuardianSkillScannerDemo extends LitElement {
     } else if (href === "#skill-scanner") {
       event.preventDefault();
       this.activeTab = "skill-scanner";
+    } else if (href === "#vpn") {
+      event.preventDefault();
+      this.activeTab = "vpn";
     }
   }
 
   render() {
-    const isAiGuardian = this.activeTab === "ai-guardian";
+    const tab = this.activeTab;
 
     return html`
       <div @click=${this._onNavClick}>
         <bd-page-switcher
           .items=${[
-            { title: "AI Guardian", href: "#ai-guardian", active: isAiGuardian },
-            { title: "Skill Scanner", href: "#skill-scanner", active: !isAiGuardian }
+            { title: "AI Guardian", href: "#ai-guardian", active: tab === "ai-guardian" },
+            { title: "Skill Scanner", href: "#skill-scanner", active: tab === "skill-scanner" },
+            { title: "VPN for AI Agents", href: "#vpn", active: tab === "vpn" }
           ]}
         ></bd-page-switcher>
 
-        ${isAiGuardian ? aiGuardianBody() : skillScannerBody()}
+        ${tab === "ai-guardian" ? aiGuardianBody() : nothing}
+        ${tab === "skill-scanner" ? skillScannerBody() : nothing}
+        ${tab === "vpn" ? vpnBody() : nothing}
 
         ${sharedFooter()}
       </div>
@@ -1025,15 +1439,15 @@ export default {
     docs  : {
       description: {
         component: `
-Interactive demo: sticky top-level product nav (\`AI Guardian\` / \`Skill Scanner\`)
-switches, in place, between two full "pages" without any real navigation —
-clicking a tab intercepts the anchor click and swaps local state instead of
-following the href (which has no route in Storybook and would 404).
+Interactive demo: sticky top-level product nav (\`AI Guardian\` / \`Skill Scanner\` /
+\`VPN for AI Agents\`) switches, in place, between three full "pages" without any real
+navigation — clicking a tab intercepts the anchor click and swaps local state instead
+of following the href (which has no route in Storybook and would 404).
 
-Both anchor-nav bars use \`sticky-top="65px"\` so they pin themselves *below*
+Both/all anchor-nav bars use \`sticky-top="65px"\` so they pin themselves *below*
 the sticky page-switcher instead of overlapping it once scrolled. That value
 is an estimate — measure bd-page-switcher's real rendered height in DevTools
-and adjust if the two bars still overlap or leave a gap.
+and adjust if the bars still overlap or leave a gap.
 
 **AI Guardian** page: \`bd-header-code\`, \`bd-quick-answer\`, sticky \`bd-anchor-nav\`
 (9 items) wrapping \`bd-overview\`, \`bd-compatibility-table\` (default variant), the
@@ -1053,7 +1467,14 @@ for "Privacy", a \`bd-trust-panel\` + \`bd-accordion-bg\` FAQ (7 questions) unde
 "FAQ", a \`bd-cta-banner\`, and \`bd-agent-endpoints\` with legal copy in its
 \`rows\` slot.
 
-Both pages share the same \`bd-footer\` at the bottom.
+**VPN for AI Agents** page: a \`bd-header-code\` using \`variant="tint"\` (light-blue
+gradient + perspective floor grid + stacked-card rings behind the terminal),
+a bordered "EXTERNAL BETA" badge, a breadcrumb, a facts/spec row via the
+\`meta\` slot, and two floating annotation pills around the terminal. Only
+the hero has been provided so far — the rest of the page follows the same
+pattern as the other two once that content is supplied.
+
+Both/all pages share the same \`bd-footer\` at the bottom.
         `
       }
     }
@@ -1061,6 +1482,6 @@ Both pages share the same \`bd-footer\` at the bottom.
 };
 
 export const Default = {
-  name  : "AI Guardian ↔ Skill Scanner (interactive)",
+  name  : "AI Guardian ↔ Skill Scanner ↔ VPN (interactive)",
   render: () => html`<demo-ai-guardian-skill-scanner></demo-ai-guardian-skill-scanner>`
 };

package/src/components/bento-grid/bento-grid.css.js

@@ -1,10 +1,21 @@
 import { css } from "lit";
 
 export default css`
-  :host {
+    :host {
     display: block;
     width: 100%;
     box-sizing: border-box;
+    max-width: 1290px;
+    margin-inline: auto;
+  }
+
+  /* === BACKGROUND VARIANT — section-level tint, applied to the whole
+     component (header + track), not per-card. Padding compensates so the
+     tinted area doesn't hug the header/cards edge-to-edge. === */
+  :host([background="tint"]) {
+    background-color: var(--color-blue-50, #f0f6ff);
+    border-radius: var(--radius-2xl, 24px);
+    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
   }
 
   /* === HEADER (eyebrow / title / description) === */