diff --git a/mkdocs.yml b/mkdocs.yml
index 2fc74935a..62d7feabf 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -397,10 +397,8 @@ nav:
             - llms-full.txt: https://dstack.ai/llms-full.txt
             - skill.md: https://dstack.ai/skill.md
   - Case studies: blog/case-studies.md
-  - Benchmarks: blog/benchmarks.md
   - Blog:
       - blog/index.md
-  - Discord: https://discord.gg/u8SmfwPpMd" target="_blank
 #  - Changelog: https://github.com/dstackai/dstack/releases" target="_blank
 #  - GitHub: https://github.com/dstackai/dstack" target="_blank
 #  - Sign in: https://sky.dstack.ai" target="_blank
diff --git a/mkdocs/assets/stylesheets/cloudscape-docs.css b/mkdocs/assets/stylesheets/cloudscape-docs.css
index cabeb93b9..b9c7bec2e 100644
--- a/mkdocs/assets/stylesheets/cloudscape-docs.css
+++ b/mkdocs/assets/stylesheets/cloudscape-docs.css
@@ -204,15 +204,15 @@
     white-space: nowrap;
 }
 
-/* GitHub → outlined "GitHub" with a trailing external-link glyph (no star count). */
-[data-md-color-primary=white] .md-header__buttons .md-button--primary.github,
-[data-md-color-primary=white] .md-header__buttons .md-button--primary.github:hover {
-    background: transparent;
-    color: var(--cs-text);
-    border: 1px solid var(--cs-border);
+/* GitHub → filled (primary) "GitHub" with a trailing external-link glyph (no star count). */
+[data-md-color-primary=white] .md-header__buttons .md-button--primary.github {
+    background: var(--cs-text);
+    color: var(--cs-bg);
+    border: 1px solid var(--cs-text);
+    font-weight: 500 !important; /* filled primary uses 500; the outlined Try-Sky button stays 700 */
 }
 
-/* Gap between GitHub and Get started → 20px to match /old (was 5px). */
+/* Gap between GitHub and dstack Sky → 20px to match /old (was 5px). */
 .md-header__buttons .md-button.github {
     margin-right: 20px;
 }
@@ -235,138 +235,36 @@
     mask: var(--cs-ext-icon) center / contain no-repeat;
 }
 
-/* Get started → /old's split button (dark primary main + caret) with a dropdown menu. */
-.md-header__buttons .cs-get-started {
-    position: relative;
-    display: inline-flex;
-    align-items: stretch;
-    margin-right: 5px;
-}
-
-[data-md-color-primary=white] .md-header__buttons .cs-get-started .md-button--primary,
-[data-md-color-primary=white] .md-header__buttons .cs-get-started .md-button--primary:hover {
-    background: var(--cs-text);
-    color: var(--cs-bg);
-    border: 1px solid var(--cs-text);
-    margin: 0;
-    /* Primary (filled) button uses 500 weight per design — the GitHub outline button stays 700. */
-    font-weight: 500 !important;
+/* Try dstack Sky → outlined (normal) pill with a trailing external-link glyph, sitting after
+   the now-filled GitHub button (the two swapped emphasis vs the old GitHub + Get started). */
+[data-md-color-primary=white] .md-header__buttons .md-button--primary.cs-try-sky {
+    background: transparent;
+    color: var(--cs-text);
+    border: 1px solid var(--cs-border);
 }
-
-/* Hover states (Cloudscape): the outlined GitHub button fills subtly (NOT black — landing.css
-   forces `background:black !important` on primary hover, so these need !important too); the dark
-   Get-started button lightens to the button-hover token. */
-[data-md-color-primary=white] .md-header__buttons .md-button--primary.github:hover {
+[data-md-color-primary=white] .md-header__buttons .md-button--primary.cs-try-sky:hover {
     background: var(--cs-hover) !important;
     border-color: var(--cs-border) !important;
     color: var(--cs-text) !important;
 }
-/* Hovering EITHER segment lights up BOTH (the whole pill reads as one button that opens the menu). */
-[data-md-color-primary=white] .md-header__buttons .cs-get-started:hover .md-button--primary {
-    background: var(--cs-btn-hover) !important;
-    border-color: var(--cs-btn-hover) !important;
-    color: var(--cs-bg) !important;
-}
-
-.md-header__buttons .cs-get-started__main {
-    border-radius: 12px 0 0 12px !important;
-    border-right: 0 !important;
-    cursor: pointer;
-    /* No separator now, so pull the caret in close to the label (was 18px + the toggle's 6px). */
-    padding-right: 6px !important;
-}
-
-/* No segment separator — the caret reads as part of the same button. */
-.md-header__buttons .cs-get-started__toggle {
-    border-radius: 0 12px 12px 0 !important;
-    padding: 0 6px !important;
-    border-left: 0 !important;
-    cursor: pointer;
-}
-
-.md-header__buttons .cs-get-started__toggle svg {
-    width: 18px;
-    height: 18px;
-    fill: currentColor;
-}
-
-/* Matches the new landing / old Get-started popup (cloudscape-overrides.css): fixed 300px, flat
-   (no shadow), a single 0.5px cs-text border, 12px radius clipped to rounded corners. */
-.md-header__buttons .cs-get-started__menu {
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    min-width: 300px;
-    padding: 8px 0;
-    display: flex;
-    flex-direction: column;
-    background: var(--cs-bg);
-    border: 0.5px solid var(--cs-text);
-    border-radius: 12px;
-    box-shadow: none;
-    overflow: hidden;
-    z-index: 1000;
-    /* Match the landing dropdown's subpixel smoothing (Material defaults to antialiased = thinner). */
-    -webkit-font-smoothing: auto;
-    -moz-osx-font-smoothing: auto;
-}
-
-.md-header__buttons .cs-get-started__menu[hidden] {
-    display: none;
-}
-
-/* Group headers ("Products" / "Login") → 15px / 300, ~5.5px vertical padding, like the landing. */
-.md-header__buttons .cs-get-started__group {
-    padding: 5.5px 16px;
-    font-size: 15px;
-    font-weight: 300;
-    color: var(--cs-text);
-}
-
-/* Items → 4px/16px padding; a 15/600 heading-color title with an optional description below. */
-.md-header__buttons .cs-get-started__menu a {
-    display: flex;
-    flex-direction: column;
-    padding: 4px 16px;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--cs-text);
-    text-decoration: none;
-}
-.md-header__buttons .cs-get-started__item-title {
-    color: var(--cs-nav-heading);
-}
-/* The generic external-link "↗" is an a::after rendered as a block, so the column flex dropped it
-   onto its own line below the description. Suppress it and put the icon inline after the TITLE
-   text instead (external items only), like the landing. */
-.md-header__buttons .cs-get-started__menu a::after {
-    content: none !important;
-    display: none !important;
-}
-.md-header__buttons .cs-get-started__menu a[target="_blank"] .cs-get-started__item-title::after {
+.md-header__buttons .md-button.cs-try-sky::after {
     content: "";
     display: inline-block;
-    width: 13px;
-    height: 13px;
-    margin-left: 5px;
-    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    margin-left: 6px;
+    flex: 0 0 auto;
     background-color: currentColor;
     -webkit-mask: var(--cs-ext-icon) center / contain no-repeat;
     mask: var(--cs-ext-icon) center / contain no-repeat;
 }
-/* Description: 13px / 300 / full text color (light weight reads muted) / 16px line-height, like
-   the landing's secondary text. */
-.md-header__buttons .cs-get-started__item-desc {
-    margin-top: 1.5px;
-    font-size: 13px;
-    font-weight: 300;
-    line-height: 16px;
-    color: var(--cs-text);
-    white-space: normal;
-}
 
-.md-header__buttons .cs-get-started__menu a:hover {
-    background: var(--cs-hover);
+/* GitHub hover: the filled GitHub button lightens to the button-hover token. landing.css forces
+   `background:black !important` on primary hover, so these need !important to win. */
+[data-md-color-primary=white] .md-header__buttons .md-button--primary.github:hover {
+    background: var(--cs-btn-hover) !important;
+    border-color: var(--cs-btn-hover) !important;
+    color: var(--cs-bg) !important;
 }
 
 /* Burger (desktop sidebar toggle) — far left, like /old. */
diff --git a/mkdocs/overrides/header-2.html b/mkdocs/overrides/header-2.html
index f6887a7a3..a38ef5d80 100644
--- a/mkdocs/overrides/header-2.html
+++ b/mkdocs/overrides/header-2.html
@@ -101,31 +101,7 @@
         </svg>
       </button>
       <a href="https://github.com/dstackai/dstack" target="_blank" class="md-button md-button--primary github external-skip">GitHub</a>
-      <div class="cs-get-started">
-        <button type="button" class="md-button md-button--primary cs-get-started__main" aria-haspopup="true" aria-expanded="false">Get started</button>
-        <button type="button" class="md-button md-button--primary cs-get-started__toggle" aria-label="Get started options" aria-expanded="false" aria-haspopup="true">
-          {% include ".icons/material/menu-down.svg" %}
-        </button>
-        <div class="cs-get-started__menu" hidden>
-          <span class="cs-get-started__group">Products</span>
-          <a href="{{ 'docs/installation/' | url }}">
-            <span class="cs-get-started__item-title">dstack</span>
-            <span class="cs-get-started__item-desc">The open-source control plane that works across clouds, Kubernetes, and on-prem.</span>
-          </a>
-          <a href="https://sky.dstack.ai" target="_blank">
-            <span class="cs-get-started__item-title">dstack Sky</span>
-            <span class="cs-get-started__item-desc">Access GPU marketplace, or bring your own clouds. Hosted by us.</span>
-          </a>
-          <a href="https://calendly.com/dstackai/discovery-call" target="_blank">
-            <span class="cs-get-started__item-title">dstack Enterprise</span>
-            <span class="cs-get-started__item-desc">Self-hosted with SSO, air-gapped setup, dedicated support, and more.</span>
-          </a>
-          <span class="cs-get-started__group">Login</span>
-          <a href="https://sky.dstack.ai" target="_blank">
-            <span class="cs-get-started__item-title">dstack Sky</span>
-          </a>
-        </div>
-      </div>
+      <a href="https://sky.dstack.ai" target="_blank" class="md-button md-button--primary cs-try-sky external-skip">dstack Sky</a>
     </div>
     <script>
       (function () {
@@ -134,19 +110,6 @@
             document.body.classList.toggle('cs-nav-collapsed');
             // The content column reflows (792↔960), so re-align the right rail's TOC offset.
             window.dispatchEvent(new Event('resize'));
-            return;
-          }
-          var menu = document.querySelector('.cs-get-started__menu');
-          if (!menu) return;
-          var triggers = document.querySelectorAll('.cs-get-started__main, .cs-get-started__toggle');
-          // Both segments open the popup (no default navigation).
-          if (e.target.closest('.cs-get-started__main, .cs-get-started__toggle')) {
-            var hidden = menu.hasAttribute('hidden');
-            menu.toggleAttribute('hidden', !hidden);
-            triggers.forEach(function (t) { t.setAttribute('aria-expanded', String(hidden)); });
-          } else if (!e.target.closest('.cs-get-started__menu')) {
-            menu.setAttribute('hidden', '');
-            triggers.forEach(function (t) { t.setAttribute('aria-expanded', 'false'); });
           }
         });
       })();
diff --git a/website/.gitignore b/website/.gitignore
index de4d1f007..311e030bb 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -1,2 +1,3 @@
 dist
 node_modules
+.vite
diff --git a/website/src/cloudscape-overrides.css b/website/src/cloudscape-overrides.css
index fcc988664..a1845b412 100644
--- a/website/src/cloudscape-overrides.css
+++ b/website/src/cloudscape-overrides.css
@@ -14,7 +14,6 @@
     not a breakage). Re-derive with:
       grep -roE '\-\-border-divider-section-width-[a-z0-9]+' node_modules/@cloudscape-design/components/container
       grep -roE '\-\-color-border-tabs-[a-z-]+-[a-z0-9]+'    node_modules/@cloudscape-design/components/tabs
-      grep -roE 'awsui_split-trigger-wrapper_[a-z0-9_]+'     node_modules/@cloudscape-design/components/button-dropdown
 */
 
 /* NB: Cloudscape defines these tokens on `body` inside `@layer awsui-base-theme`. Our
@@ -40,27 +39,6 @@ body {
   --color-text-expandable-section-hover-ojzwhd: var(--cs-text); /* FAQ: don't turn the question blue on hover */
 }
 
-/* 3) Split ButtonDropdown ("Get started"): close the gap before the arrow (a 2px
-      margin on the main segment) and drop the main action's trailing padding so the
-      label and arrow sit flush. ButtonDropdown has no `style` prop, so this targets its
-      scoped classes by stable prefix (hash-independent). */
-/* !important is required: Cloudscape boosts its own rules' specificity with a :not(#\9)
-   trick, which an attribute selector can't otherwise outrank. */
-[class*='awsui_split-trigger-wrapper'] > [class*='awsui_trigger-item']:not(:last-child) > [class*='awsui_trigger-button'] {
-  margin-inline-end: 0 !important; /* close the 2px gap before the arrow */
-  padding-inline-end: 16px !important; /* breathing room between the label and the divider */
-}
-/* Match the other top-nav buttons' height (see menuButtonStyle, 7px block). */
-[class*='awsui_split-trigger-wrapper'] [class*='awsui_trigger-button'] {
-  padding-block: 7px !important;
-}
-/* Subtle 0.5px divider between the two segments — a hair lighter/darker than the fill
-   so the split reads, without breaking the single-button look. (Hover stays per-segment,
-   which is Cloudscape's default and the better affordance here.) */
-[class*='awsui_split-trigger-wrapper'] > [class*='awsui_trigger-item']:not(:first-child) > [class*='awsui_trigger-button'] {
-  border-inline-start: 0.5px solid var(--cs-seg-divider) !important;
-}
-
 /* 4) Content tabs.
    a) Full-height vertical separators between tabs (default insets them 12px top/bottom).
       `inset-block: 0` spans only the container's padding box, leaving a 1px gap at top/bottom
@@ -80,87 +58,6 @@ body {
   border-inline: 0 !important;
 }
 
-/* 5) Dropdown menu popups (the "Get started" and "Resources" menus). Targeted by stable
-      class prefix so the rules apply wherever the popup renders.
-   a) Fixed width, flat (no drop-shadow), and a single uniform 0.5px border on all four
-      sides. By default Cloudscape draws top/bottom on the wrapper (1px) and left/right on
-      a ::after — so we set the wrapper border ourselves and drop the ::after layer. */
-[class*='awsui_dropdown-content-wrapper'] {
-  inline-size: 300px !important;
-  box-shadow: none !important;
-  border: 0.5px solid var(--cs-text) !important;
-  border-radius: 12px !important; /* rounded popup */
-  overflow: hidden; /* clip the menu items to the rounded corners */
-}
-[class*='awsui_dropdown-content-wrapper']::after {
-  border: 0 !important;
-}
-/* b) Group headers ("Products" / "Login"). lighter (300) and a touch smaller
-      (15px) in the full text color (no longer muted). */
-[class*='awsui_header_16mm3'] {
-  font-weight: 300 !important;
-  font-size: 15px !important;
-  color: var(--cs-text) !important;
-  padding-inline: 16px !important;
-}
-/* c) Items: bold label (matching the group weight), tighter horizontal padding aligned
-      with the header. The description below keeps its normal/muted styling. */
-[class*='awsui_menu-item'] {
-  padding-inline: 16px !important;
-}
-[class*='awsui_menu-item'] [class*='awsui_main-row'] {
-  font-weight: 600;
-  font-size: 15px; /* (Cloudscape's default popup label is 14px) */
-}
-/* The hovered item still picked up a border in dark mode (the token override didn't hold
-   there), so force it off on the highlighted item itself (the cue is the bg tint). */
-[class*='awsui_item-element'][class*='awsui_highlighted'] {
-  border-color: transparent !important;
-}
-/* Popup item descriptions: normal text color (not muted), 13px / weight 300. A hair of
-   separation (1.5px) from the label above so the two lines don't read as one block. */
-[class*='awsui_secondary-text'] {
-  color: var(--cs-text) !important;
-  margin-block-start: 1.5px;
-  font-size: 13px !important;
-  font-weight: 300 !important;
-}
-/* A little breathing room at the top and bottom of the popup (inside the border). Placed on
-   the first/last rows rather than on the list itself, so a hovered first/last item's
-   background fills that space instead of leaving a thin un-highlighted strip against the
-   border (the hover tint is painted on the item-element, which is what carries the padding). */
-[class*='awsui_options-list'] {
-  padding-block: 0 !important;
-  /* Cloudscape pulls the list 1px into the wrapper border (decrease-block-margin) to overlap
-     its default 1px divider. With our single hairline border that just lets a hovered
-     first/last item's fill paint over the border (most visible in dark mode) — so sit the
-     list flush inside the border instead. */
-  margin-block: 0 !important;
-}
-[class*='awsui_options-list'] > :first-child {
-  padding-block-start: 6px !important;
-}
-/* Last item — flat list (ButtonDropdown without groups, e.g. the Resources menu). */
-[class*='awsui_options-list'] > [class*='awsui_item-element']:last-child {
-  padding-block-end: 6px !important;
-}
-/* Last item — grouped list: the last item inside the last category (e.g. "Get started"). */
-[class*='awsui_options-list'] > [class*='awsui_category']:last-child [class*='awsui_item-element']:last-child {
-  padding-block-end: 6px !important;
-}
-/* d) Push the external-link icon to the right edge of the item. It's rendered inline at
-      the end of the label, so make the label row fill the width and flex the icon out.
-      Scoped under `awsui_main-row` (dropdown-item only) so it doesn't affect the external
-      icons in SideNavigation, which share the `awsui_external-icon` class. */
-[class*='awsui_main-row'] > :first-child {
-  display: flex !important;
-  flex: 1 1 auto !important;
-  align-items: center;
-}
-[class*='awsui_main-row'] [class*='awsui_external-icon'] {
-  margin-inline-start: auto !important;
-}
-
 /* 6) FAQ accordion (ExpandableSection): faint background tint on hover that covers the
       whole block (question + answer) uniformly. Tint the section root, then neutralize
       every inner background (header + content both carry their own white bg) so only the
@@ -199,8 +96,7 @@ body {
 
 /* Primary (filled) buttons use 500 weight per design — outline/normal buttons keep their weight.
    Applies app-wide (new landing + /old). */
-[class*='awsui_variant-primary'],
-.site-get-started [class*='awsui_trigger-button'] {
+[class*='awsui_variant-primary'] {
   font-weight: 500 !important;
 }
 
diff --git a/website/src/components/SiteFooter.tsx b/website/src/components/SiteFooter.tsx
index c8625fe08..dbb8c83a3 100644
--- a/website/src/components/SiteFooter.tsx
+++ b/website/src/components/SiteFooter.tsx
@@ -66,7 +66,7 @@ const footerColumns: FooterColumn[] = [
     heading: 'Company',
     links: [
       { label: 'Blog', href: BLOG_URL },
-      { label: 'Talk to us', href: 'https://calendly.com/dstackai/discovery-call', external: true },
+      { label: 'Get a demo', href: 'https://calendly.com/dstackai/discovery-call', external: true },
       { label: 'Terms of service', href: TERMS_URL },
       { label: 'Privacy policy', href: PRIVACY_URL },
     ],
diff --git a/website/src/components/SiteNavigation.tsx b/website/src/components/SiteNavigation.tsx
index 28b99d46d..8fe7eda1b 100644
--- a/website/src/components/SiteNavigation.tsx
+++ b/website/src/components/SiteNavigation.tsx
@@ -1,66 +1,190 @@
-import { useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Button from '@cloudscape-design/components/button';
-import ButtonDropdown, { ButtonDropdownProps } from '@cloudscape-design/components/button-dropdown';
+import Icon from '@cloudscape-design/components/icon';
 import SideNavigation, { SideNavigationProps } from '@cloudscape-design/components/side-navigation';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import { menuButtonStyle } from '../cloudscape-theme';
 import { ThemeToggle } from './ThemeToggle';
 import { asset } from '../asset';
-import { BLOG_URL, DOCS_URL, ROUTES, docsUrl } from '../routes';
+import { BLOG_URL, DOCS_URL, ROUTES } from '../routes';
 import { ThemeMode } from '../theme';
 
 const dstackGithubUrl = 'https://github.com/dstackai/dstack';
+const dstackGithubApiUrl = 'https://api.github.com/repos/dstackai/dstack';
 const externalIconAriaLabel = 'External link icon';
 
+// Compact star count: 1340 → "1.3k", 12000 → "12k", 980 → "980".
+function formatStars(count: number): string {
+  if (count < 1000) return String(count);
+  const thousands = count / 1000;
+  return `${thousands >= 10 ? Math.round(thousands) : Number(thousands.toFixed(1))}k`;
+}
+
+// Monochrome product glyphs for the "Products" menu (GitHub mark also doubles as the star badge).
+const GithubGlyph = () => (
+  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+  </svg>
+);
+const CloudUploadGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M4 14.899A6 6 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973" />
+    <path d="M12 12v8" />
+    <path d="m8 16 4-4 4 4" />
+  </svg>
+);
+const FingerprintGlyph = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M12 10a2 2 0 0 0-2 2c0 1.5.4 3 1 4.3" />
+    <path d="M12 6.5A5.5 5.5 0 0 0 6.5 12c0 2 .4 3.5 1.1 5" />
+    <path d="M12 14v3.5" />
+    <path d="M15.6 8.4A5.5 5.5 0 0 1 17.5 12c0 2.2-.5 4.3-1.3 6" />
+    <path d="M12 3a9 9 0 0 0-9 9" />
+    <path d="M21 12a9 9 0 0 0-3-6.7" />
+  </svg>
+);
+
 // Primary links in the desktop top navigation (plain same-origin MkDocs links). The blog
-// categories are listed individually (Case studies / Benchmarks / Blog) to mirror the docs
+// categories are listed individually (Case studies / Blog) to mirror the docs
 // header tabs — no "Resources" dropdown.
 const audienceNavItems: Array<{ label: string; href: string }> = [
   { label: 'Docs', href: DOCS_URL },
   { label: 'Case studies', href: `${BLOG_URL}/case-studies/` },
-  { label: 'Benchmarks', href: `${BLOG_URL}/benchmarks/` },
   { label: 'Blog', href: BLOG_URL },
 ];
 
-// "Get started" dropdown items. secondaryText is shown under each label.
-const productDropdownItems: ButtonDropdownProps.Items = [
-  {
-    text: 'Products',
-    items: [
-      { id: 'open-source', text: 'dstack', secondaryText: 'The open-source control plane that works across clouds, Kubernetes, and on-prem.', href: docsUrl('installation') },
-      { id: 'sky-product', text: 'dstack Sky', secondaryText: 'Access GPU marketplace, or bring your own clouds. Hosted by us.', href: 'https://sky.dstack.ai', external: true, externalIconAriaLabel },
-      { id: 'enterprise', text: 'dstack Enterprise', secondaryText: 'Self-hosted with SSO, air-gapped setup, dedicated support, and more.', href: 'https://calendly.com/dstackai/discovery-call', external: true, externalIconAriaLabel },
-    ],
-  },
-  {
-    text: 'Login',
-    items: [
-      { id: 'sky-login', text: 'dstack Sky', href: 'https://sky.dstack.ai', external: true, externalIconAriaLabel },
-    ],
-  },
+type ProductLink = {
+  id: string;
+  text: string;
+  secondaryText: string;
+  href: string;
+  external?: boolean;
+  icon: ReactNode;
+};
+
+// The products. products[0] (open-source) is featured at the top of the "Products" menu; the rest
+// follow as rows. Reused by the standalone top-nav hover menu and the mobile nav's "Products"
+// section.
+const products: ProductLink[] = [
+  { id: 'open-source', text: 'dstack', secondaryText: 'The open-source control plane that works across clouds, Kubernetes, and on-prem.', href: DOCS_URL, icon: <GithubGlyph /> },
+  { id: 'sky-product', text: 'dstack Sky', secondaryText: 'Access GPU marketplace, or bring your own clouds. Hosted and managed by us.', href: 'https://sky.dstack.ai', external: true, icon: <CloudUploadGlyph /> },
+  { id: 'enterprise', text: 'Enterprise', secondaryText: 'Self-hosted with SSO, air-gapped setup, dedicated support, and more.', href: 'https://calendly.com/dstackai/discovery-call', external: true, icon: <FingerprintGlyph /> },
 ];
 
 // Items for the mobile slide-out navigation. The blog categories are top-level links (mirroring
 // the flattened desktop nav), not a "Resources" section.
 const mobileNavigationItems: SideNavigationProps.Item[] = [
-  { type: 'link', text: 'Docs', href: DOCS_URL },
-  { type: 'link', text: 'Case studies', href: `${BLOG_URL}/case-studies/` },
-  { type: 'link', text: 'Benchmarks', href: `${BLOG_URL}/benchmarks/` },
-  { type: 'link', text: 'Blog', href: BLOG_URL },
-  { type: 'link', text: 'GitHub', href: dstackGithubUrl, external: true, externalIconAriaLabel },
   {
     type: 'section',
-    text: 'Get started',
+    text: 'Products',
     defaultExpanded: true,
-    items: [
-      { type: 'link', text: 'dstack', href: docsUrl('installation'), external: true, externalIconAriaLabel },
-      { type: 'link', text: 'dstack Sky', href: 'https://sky.dstack.ai', external: true, externalIconAriaLabel },
-      { type: 'link', text: 'dstack Enterprise', href: 'https://calendly.com/dstackai/discovery-call', external: true, externalIconAriaLabel },
-    ],
+    items: products.map((p): SideNavigationProps.Item => ({
+      type: 'link',
+      text: p.text,
+      href: p.href,
+      ...(p.external ? { external: true, externalIconAriaLabel } : {}),
+    })),
   },
+  { type: 'link', text: 'Docs', href: DOCS_URL },
+  { type: 'link', text: 'Case studies', href: `${BLOG_URL}/case-studies/` },
+  { type: 'link', text: 'Blog', href: BLOG_URL },
+  { type: 'link', text: 'GitHub', href: dstackGithubUrl, external: true, externalIconAriaLabel },
+  { type: 'link', text: 'dstack Sky', href: 'https://sky.dstack.ai', external: true, externalIconAriaLabel },
 ];
 
+// Standalone "Products" top-nav menu. The popup opens on hover (and on keyboard focus) and
+// closes once the pointer/focus leaves both the trigger and the popup. The trigger reads like
+// the plain text links beside it — no dropdown caret. A short close delay (hover-intent, below)
+// lets the pointer cross the gap from trigger to popup without the menu dropping.
+function ProductsHoverMenu() {
+  const [open, setOpen] = useState(false);
+  // Hover-intent: leaving the trigger schedules a close, but re-entering the wrapper (e.g. moving
+  // onto the popup, which is a child) cancels it — so the small gap between trigger and popup
+  // doesn't drop the menu.
+  const closeTimer = useRef<number | undefined>(undefined);
+  const openMenu = () => {
+    window.clearTimeout(closeTimer.current);
+    setOpen(true);
+  };
+  const scheduleClose = () => {
+    window.clearTimeout(closeTimer.current);
+    closeTimer.current = window.setTimeout(() => setOpen(false), 150);
+  };
+
+  // GitHub star count for the open-source repo, fetched once the menu first opens. Best-effort:
+  // if the API is rate-limited or errors, the badge simply doesn't render.
+  const [stars, setStars] = useState<number | null>(null);
+  const starsFetched = useRef(false);
+  useEffect(() => {
+    if (!open || starsFetched.current) return;
+    starsFetched.current = true;
+    fetch(dstackGithubApiUrl)
+      .then(response => (response.ok ? response.json() : null))
+      .then(data => {
+        if (data && typeof data.stargazers_count === 'number') setStars(data.stargazers_count);
+      })
+      .catch(() => {});
+  }, [open]);
+
+  return (
+    <div
+      className="site-hover-menu"
+      onMouseEnter={openMenu}
+      onMouseLeave={scheduleClose}
+      onFocus={openMenu}
+      onBlur={event => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setOpen(false);
+        }
+      }}
+    >
+      <button type="button" className="site-menu-button site-hover-menu__trigger" aria-haspopup="true" aria-expanded={open}>
+        Products
+        <svg className="site-hover-menu__caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M4 6.5 8 10.5 12 6.5" />
+        </svg>
+      </button>
+      {open && (
+        <div className="site-products-menu" role="menu">
+          {/* Open-source featured on the brand gradient; the whole panel links to install. */}
+          <a className="site-products-menu__feat" role="menuitem" href={products[0].href}>
+            {stars !== null && (
+              <span className="site-products-menu__gh" aria-label={`${stars} GitHub stars`}>
+                <GithubGlyph />
+                {formatStars(stars)}
+              </span>
+            )}
+            <span className="site-products-menu__feat-name">{products[0].text}</span>
+            <span className="site-products-menu__feat-desc">{products[0].secondaryText}</span>
+            <span className="site-products-menu__feat-cta">Documentation</span>
+          </a>
+          <div className="site-products-menu__list">
+            {products.slice(1).map(product => (
+              <a
+                key={product.id}
+                role="menuitem"
+                className="site-products-menu__row"
+                href={product.href}
+                {...(product.external ? { target: '_blank', rel: 'noreferrer' } : {})}
+              >
+                <span className="site-products-menu__ic">{product.icon}</span>
+                <div className="site-products-menu__rbody">
+                  <span className="site-products-menu__name">
+                    {product.text}
+                    {product.external && <Icon name="external" />}
+                  </span>
+                  <span className="site-products-menu__desc">{product.secondaryText}</span>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // Global top navigation. On the Old page it also renders the trigger that toggles
 // that page's side navigation drawer (state owned by the App layout).
 export function SiteNavigation({
@@ -86,22 +210,6 @@ export function SiteNavigation({
     setMobileNavigationOpen(false);
   };
 
-  // Scroll to the "Get started" section, navigating home first if we're on another page.
-  const scrollToResources = () => {
-    const target = document.getElementById('resources');
-    if (target) {
-      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      return;
-    }
-
-    go(ROUTES.HOME);
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        document.getElementById('resources')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      });
-    });
-  };
-
   return (
     <header className={`site-nav ${isHome ? 'site-nav--home' : ''} ${isOldPage ? 'site-nav--old' : ''} ${mobileNavigationOpen ? 'site-nav--mobile-open' : ''}`}>
       <div className="site-nav__inner">
@@ -131,6 +239,8 @@ export function SiteNavigation({
         </button>
         <nav className="site-menu" aria-label="Global">
           <SpaceBetween direction="horizontal" size="l" alignItems="center">
+            {/* Standalone "Products" hover menu — a flat list of the three products. Sits before "Docs". */}
+            <ProductsHoverMenu />
             {audienceNavItems.map(item => (
               <a key={item.label} className="site-menu-link" href={item.href}>
                 {item.label}
@@ -140,6 +250,7 @@ export function SiteNavigation({
                tablet/mobile it moves to the footer (the whole nav collapses into the burger menu). */}
             <ThemeToggle theme={theme} onToggle={onToggleTheme} className="theme-toggle--header" />
             <Button
+              variant="primary"
               href={dstackGithubUrl}
               target="_blank"
               iconAlign="right"
@@ -148,13 +259,15 @@ export function SiteNavigation({
             >
               GitHub
             </Button>
-            <ButtonDropdown
-              className="site-get-started"
-              items={productDropdownItems}
-              ariaLabel="Get started options"
-              mainAction={{ text: 'Get started', onClick: scrollToResources }}
-              variant="primary"
-            />
+            <Button
+              href="https://sky.dstack.ai"
+              target="_blank"
+              iconAlign="right"
+              iconName="external"
+              style={menuButtonStyle}
+            >
+              dstack Sky
+            </Button>
           </SpaceBetween>
         </nav>
         <div className="site-mobile-spacer" aria-hidden="true" />
diff --git a/website/src/pages/Home/ExploreSection.tsx b/website/src/pages/Home/ExploreSection.tsx
index ed37bde82..a160bd5f5 100644
--- a/website/src/pages/Home/ExploreSection.tsx
+++ b/website/src/pages/Home/ExploreSection.tsx
@@ -3,13 +3,11 @@ import yamlHighlight from '@cloudscape-design/code-view/highlight/yaml';
 import Button from '@cloudscape-design/components/button';
 import Container from '@cloudscape-design/components/container';
 import Icon from '@cloudscape-design/components/icon';
-import SpaceBetween from '@cloudscape-design/components/space-between';
 import Table from '@cloudscape-design/components/table';
 import Tabs from '@cloudscape-design/components/tabs';
 import { mainButtonStyle } from '../../cloudscape-theme';
 import { AlternatingDocBlock } from '../../components/AlternatingDocBlock';
 import { ArchitectureDiagram } from '../../components/ArchitectureDiagram';
-import { DashedBorder } from '../../components/DashedBorder';
 import { highlightTerms } from '../../components/highlightTerms';
 import { docsUrl } from '../../routes';
 import {
@@ -22,10 +20,10 @@ import {
 
 // Core orchestration primitives shown in the "AI-native orchestration" block.
 const keyConcepts = [
-  { name: 'Fleets', href: docsUrl('concepts/fleets'), description: 'Provision and manage clusters across clouds, Kubernetes, and on-prem.' },
-  { name: 'Dev environments', href: docsUrl('concepts/dev-environments'), description: 'Launch dev environments to be accessed by agents or from your IDE.' },
-  { name: 'Tasks', href: docsUrl('concepts/tasks'), description: 'Run training and batch jobs across a single node or clusters.' },
-  { name: 'Services', href: docsUrl('concepts/services'), description: 'Deploy model inference as secure and scalable endpoints.' },
+  { name: 'Fleets', label: 'Cloud & on-prem', href: docsUrl('concepts/fleets'), description: 'Provision and manage clusters across clouds, Kubernetes, and on-prem.' },
+  { name: 'Dev environments', label: 'Development', href: docsUrl('concepts/dev-environments'), description: 'Launch dev environments to be accessed by agents or from your IDE.' },
+  { name: 'Tasks', label: 'Training and batch', href: docsUrl('concepts/tasks'), description: 'Run training and batch jobs across a single node or clusters.' },
+  { name: 'Services', label: 'Model inference', href: docsUrl('concepts/services'), description: 'Deploy model inference as secure and scalable endpoints.' },
 ];
 
 // Rough per-GPU/hour ranges across backends, in the spirit of `dstack offer --group-by gpu`.
@@ -97,7 +95,6 @@ export function ExploreSection() {
         }
         title="Bring your own clouds"
         imageFirst
-        action={<Button href={docsUrl('concepts/backends')} style={mainButtonStyle}>Backends</Button>}
       >
         dstack natively integrates with the major GPU clouds and automates provisioning of clusters.
         <br />
@@ -119,12 +116,6 @@ export function ExploreSection() {
           />
         }
         title="Bring on-prem clusters"
-        action={
-          <SpaceBetween direction="horizontal" size="xs">
-            <Button href={docsUrl('concepts/backends/#kubernetes')} style={mainButtonStyle}>Kubernetes</Button>
-            <Button href={docsUrl('concepts/fleets/#ssh-fleets')} style={mainButtonStyle}>SSH fleets</Button>
-          </SpaceBetween>
-        }
       >
         Have an existing Kubernetes cluster? Point dstack to the kubeconfig, and dstack
         will schedule workloads on it as it was a cloud cluster.
@@ -149,9 +140,11 @@ function KeyConceptsBlock() {
             // arrow. Kept as a real <a> (open-in-new-tab / SEO) rather than Cloudscape's
             // onClick-only ActionCard component.
             <a className="media-card concept-card" href={concept.href} key={concept.name}>
-              <DashedBorder />
-              <span className="concept-card__arrow" aria-hidden="true"><Icon name="angle-right" /></span>
-              <h3>{concept.name}</h3>
+              <span className="concept-card__label">{concept.label}</span>
+              <h3>
+                {concept.name}
+                <span className="concept-card__arrow" aria-hidden="true"><Icon name="angle-right" /></span>
+              </h3>
               <p>{highlightTerms(concept.description)}</p>
             </a>
           ))}
@@ -173,7 +166,7 @@ function GpuMarketplaceBlock() {
       visual={<GpuMarketplaceTable />}
       title="Access marketplace GPUs"
       imageFirst
-      action={<Button href="https://sky.dstack.ai" variant="primary" target="_blank" iconName="external" iconAlign="right" style={mainButtonStyle}>Sign up</Button>}
+      action={<Button href="https://sky.dstack.ai" target="_blank" iconName="external" iconAlign="right" style={mainButtonStyle}>Try dstack Sky</Button>}
     >
       Don't have your own cloud accounts or on-prem clusters? No problem. You can access compute
       through dstack Sky, our hosted GPU marketplace.
diff --git a/website/src/pages/Home/FaqSection.tsx b/website/src/pages/Home/FaqSection.tsx
index c8b094952..66916e8e1 100644
--- a/website/src/pages/Home/FaqSection.tsx
+++ b/website/src/pages/Home/FaqSection.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Button from '@cloudscape-design/components/button';
 import ExpandableSection from '@cloudscape-design/components/expandable-section';
+import SpaceBetween from '@cloudscape-design/components/space-between';
 import { mainButtonStyle } from '../../cloudscape-theme';
 import { AlternatingDocBlock } from '../../components/AlternatingDocBlock';
 import { highlightTerms } from '../../components/highlightTerms';
@@ -48,9 +49,14 @@ export function FaqSection() {
         }
         title="FAQ"
         action={
-          <Button variant="primary" href="https://discord.gg/u8SmfwPpMd" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
-            Discord
-          </Button>
+          <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="primary" href="https://calendly.com/dstackai/discovery-call" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
+              Get a demo
+            </Button>
+            <Button href="https://discord.gg/u8SmfwPpMd" target="_blank" iconAlign="right" iconName="external" style={mainButtonStyle}>
+              Discord
+            </Button>
+          </SpaceBetween>
         }
       >
         Have questions, or need help? Reach out to us on Discord or directly.
diff --git a/website/src/pages/Home/GetStartedSection.tsx b/website/src/pages/Home/GetStartedSection.tsx
index 92eafeb23..1832baa15 100644
--- a/website/src/pages/Home/GetStartedSection.tsx
+++ b/website/src/pages/Home/GetStartedSection.tsx
@@ -41,6 +41,7 @@ export function GetStartedSection() {
         imageFirst
         action={
           <SpaceBetween direction="horizontal" size="xs">
+            <Button variant="primary" href={docsUrl('installation')} style={mainButtonStyle}>Install open-source</Button>
             <Button href={docsUrl('quickstart')} style={mainButtonStyle}>Quickstart</Button>
           </SpaceBetween>
         }
@@ -68,10 +69,10 @@ export function GetStartedSection() {
             </article>
             <article className="figma-card">
               <div>
-                <h3>dstack Enterprise</h3>
+                <h3>Enterprise</h3>
                 <p>Self-hosted with SSO, air-gapped setup, dedicated support, and more.</p>
                 <Button href="https://calendly.com/dstackai/discovery-call" target="_blank" iconName="external" iconAlign="right" style={mainButtonStyle}>
-                  Talk to us
+                  Get a demo
                 </Button>
               </div>
             </article>
diff --git a/website/src/pages/Home/HomePage.tsx b/website/src/pages/Home/HomePage.tsx
index 5c03d02e4..d44dc09cb 100644
--- a/website/src/pages/Home/HomePage.tsx
+++ b/website/src/pages/Home/HomePage.tsx
@@ -2,7 +2,7 @@ import Button from '@cloudscape-design/components/button';
 import { heroButtonStyle } from '../../cloudscape-theme';
 import { highlightTerms } from '../../components/highlightTerms';
 import { images, ThemedImage } from '../../data/images';
-import { DOCS_URL } from '../../routes';
+import { docsUrl } from '../../routes';
 import { ExploreSection } from './ExploreSection';
 import { FaqSection } from './FaqSection';
 import { GetStartedSection } from './GetStartedSection';
@@ -19,9 +19,6 @@ function ThemedHeroImage({ image }: { image: ThemedImage }) {
 }
 
 export function HomePage() {
-  const scrollToResources = () =>
-    document.getElementById('resources')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
   return (
     <main className="home-main">
       <section className="home-hero">
@@ -44,11 +41,11 @@ export function HomePage() {
             )}
           </p>
           <div className="home-hero__actions">
-            <Button variant="primary" onClick={scrollToResources} style={heroButtonStyle}>
-              Get started
+            <Button variant="primary" href={docsUrl('installation')} style={heroButtonStyle}>
+              Install open-source
             </Button>
-            <Button href={DOCS_URL} style={heroButtonStyle}>
-              View docs
+            <Button href="https://sky.dstack.ai" target="_blank" iconName="external" iconAlign="right" style={heroButtonStyle}>
+              Try dstack Sky
             </Button>
           </div>
         </div>
diff --git a/website/src/styles.css b/website/src/styles.css
index f450216c9..62ab5b9d4 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -309,29 +309,152 @@ p {
   border: 2px solid #879596;
 }
 
-/* "Resources" top-nav dropdown (ResourcesHoverMenu): make the ButtonDropdown trigger read
-   like the plain text menu links (.site-menu-link) — no border/background, bold 16px label,
-   underline on hover — rather than the bordered "normal" button look. */
-.site-menu-dropdown-wrap {
+/* "Products" top-nav hover menu. The trigger (.site-hover-menu__trigger) inherits the plain
+   text-link look from .site-menu-button; the popup opens on hover and is anchored to the
+   trigger. Continuity across the trigger→popup gap is handled by a close delay in JS
+   (hover-intent), so no visual bridge is needed here. */
+.site-hover-menu {
+  position: relative;
   display: inline-flex;
   align-items: center;
 }
-.site-menu-dropdown [class*='awsui_button'] {
-  border-color: transparent !important;
-  background: transparent !important;
-  color: var(--cs-text) !important;
-  font-size: 16px !important; /* match the .site-menu-link items (e.g. Documentation) */
-  font-weight: 700 !important;
-  padding: 10px 0 !important; /* no horizontal padding — matches the text links */
+
+/* Dropdown caret on the Products trigger — rotates 180° while the menu is open. */
+.site-hover-menu__caret {
+  width: 12px;
+  height: 12px;
+  opacity: 0.7;
+  transition: transform 0.15s ease;
 }
-.site-menu-dropdown [class*='awsui_button']:hover {
-  background: transparent !important;
-  text-decoration: underline;
-  text-underline-offset: 0.2em;
+.site-hover-menu__trigger[aria-expanded='true'] .site-hover-menu__caret {
+  transform: rotate(180deg);
+}
+
+/* "Products" popup: the open-source product featured on the brand gradient (with its live
+   GitHub star count), then dstack Sky & Enterprise as rows. Anchored to the trigger; flat with a
+   single 0.5px cs-text border and 12px radius, matching the landing's popup geometry. */
+.site-products-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 1000;
+  width: 360px;
+  padding: 6px;
+  background: var(--cs-bg);
+  border: 0.5px solid var(--cs-text);
+  border-radius: 12px;
+}
+
+/* Featured open-source panel — brand gradient; the whole panel links to the docs. */
+.site-products-menu__feat {
+  position: relative;
+  display: block;
+  padding: 14px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1e40ff, #8b2fd0);
+  color: #fff;
+  text-decoration: none;
+}
+.site-products-menu__feat-name {
+  display: block;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
+.site-products-menu__feat-desc {
+  display: block;
+  margin: 8px 0 13px;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 13px;
+  line-height: 1.5;
+}
+/* The "Documentation" button. Hovering anywhere on the featured panel changes the button's
+   background (only the button reacts, not the whole section). */
+.site-products-menu__feat-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 14px;
+  border-radius: 8px;
+  background: #fff;
+  color: #16191f;
+  font-size: 12.5px;
+  font-weight: 600;
+  transition: background-color 0.15s ease;
+}
+.site-products-menu__feat:hover .site-products-menu__feat-cta {
+  background: #e9ebef;
+}
+
+/* Live GitHub star count, top-right of the featured panel (only shown once the API responds). */
+.site-products-menu__gh {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #fff;
+  font-size: 12.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.site-products-menu__gh svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* dstack Sky & Enterprise rows. */
+.site-products-menu__list {
+  display: flex;
+  flex-direction: column;
+  margin-top: 6px;
+}
+.site-products-menu__row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 11px 10px;
+  border-radius: 9px;
+  color: var(--cs-text);
+  text-decoration: none;
 }
-/* The menu opens on hover, so the dropdown caret is redundant — hide it. */
-.site-menu-dropdown [class*='awsui_button'] [class*='awsui_icon'] {
-  display: none !important;
+.site-products-menu__row:hover {
+  background: var(--cs-hover);
+}
+.site-products-menu__ic {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  border: 0.5px solid var(--cs-text);
+  color: var(--cs-text);
+}
+.site-products-menu__ic svg {
+  width: 20px;
+  height: 20px;
+}
+.site-products-menu__rbody {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.site-products-menu__name {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--cs-text);
+  font-size: 15px;
+  font-weight: 600;
+}
+.site-products-menu__desc {
+  display: block;
+  margin-top: 3px;
+  color: color-mix(in srgb, var(--cs-text) 68%, var(--cs-muted));
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .home-hero {
@@ -859,11 +982,14 @@ p {
   font-size: 17px;
 }
 
-/* Action-card (concept) descriptions are a step smaller than normal text. Higher specificity
-   than `.doc-alternating p` so it wins (the cards sit inside an alternating block). This is the
-   shared small-text size (--font-small), reused for quotes, FAQ answers, and popup descriptions. */
+/* Concept-card descriptions: muted, 14px (a step down from the standard small text) since they
+   sit in a dense card grid. Higher specificity than `.doc-alternating p` so it wins (the cards
+   sit inside an alternating block). */
 .concept-grid .media-card p {
-  font-size: var(--font-small);
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--cs-muted);
 }
 
 /* "Vendor-agnostic, open-source" architecture diagram (components/ArchitectureDiagram.tsx),
@@ -1143,26 +1269,61 @@ p {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--card-gap);
+  padding: 8px;
+  border: 1px solid var(--cs-border);
+  border-radius: 12px;
 }
 
-/* Each concept card is a whole-card link to the docs: text-colored (not link-blue),
-   no underline, with a subtle background on hover to signal it's clickable. */
+/* Each concept card is a whole-card link to the docs: an uppercase label (with a small gradient
+   dot), a tight title, and muted copy inside the landing's dotted outline — the shared
+   <DashedBorder> / .arch-dash, matching the architecture-diagram pills above. Faint fill on
+   hover, and the arrow slides. */
 .concept-grid .media-card {
   display: block;
-  position: relative; /* for the arrow + the dotted border overlay */
+  position: relative; /* for the arrow, label dot, and dotted overlay */
   color: var(--cs-text);
   text-decoration: none !important;
-  transition: background 0.15s ease;
-  border: none; /* dotted outline is drawn by the shared <DashedBorder> (.arch-dash) instead */
+  background: transparent;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 18px 18px;
+  transition: background-color 0.15s ease;
 }
 
-.concept-grid .media-card:hover {
-  background: var(--cs-hover);
+/* ActionCard-style navigation arrow on the title row (aligned with Fleets / Dev environments /
+   …) — hidden until hover, then fades in and slides right. No background change on hover; the
+   arrow alone signals interactivity. */
+.concept-card__arrow {
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--cs-text);
+  opacity: 0;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.concept-grid .media-card:hover .concept-card__arrow {
+  opacity: 1;
+  transform: translateX(4px);
+}
+
+/* Uppercase category label above the title — black and light weight for a delicate look. */
+.concept-card__label {
+  display: block;
+  margin-bottom: 11px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--cs-text);
 }
 
 .concept-grid .media-card h3 {
-  font-size: var(--font-card-heading);
-  padding-right: 44px; /* clear the arrow */
+  display: flex;
+  align-items: center;
+  margin: 0 0 6px;
+  padding: 0;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 /* Quote author name reuses the card-heading size. */
@@ -1170,15 +1331,6 @@ p {
   font-size: var(--font-card-heading) !important;
 }
 
-/* ActionCard-style navigation arrow, top-right. */
-.concept-card__arrow {
-  position: absolute;
-  top: 16px;
-  right: 18px;
-  display: inline-flex;
-  color: var(--cs-text);
-}
-
 /* Product cards reusing the figma-card style. Used inside an AlternatingDocBlock
    visual slot, so it stays vertically centered (no top margin). */
 .product-grid {
@@ -1187,7 +1339,7 @@ p {
   gap: var(--card-gap);
 }
 
-/* Two-up variant: dstack Sky and dstack Enterprise side by side. */
+/* Two-up variant: dstack Sky and Enterprise side by side. */
 .product-grid--pair {
   grid-template-columns: repeat(2, 1fr);
 }