diff --git a/README.md b/README.md
index 7d5b97e84..f7f572780 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,8 @@ Using WebP (for smaller images) or AVIF (for >80 kiB due to larger overhead) may
 * `brew install libavif` (see [GitHub Project Page](https://github.com/AOMediaCodec/libavif?tab=readme-ov-file#installation) for other installation methods)
   * Example (lossless): `avifenc -l input.png output.avif`
   * Example (lossy): `avifenc --qcolor 70 --qalpha 100 --depth 8 input.png output.avif`
+  * Example (lossy, mostly transparent image): `avifenc --qcolor 60 --qalpha 50 --depth 10 -s 0 input.png output.avif`
+  * Alpha is coded separately. For an image with large transparent areas, `--qalpha 100` can be most of the file, and a lower `--qalpha` (around 50) shrinks it several times over with no visible difference. Speed `-s 0` is slow but gives the smallest file.
 * `brew install libwebm`
   * Example (lossless): `cwebp -preset drawing -lossless -z 6 -metadata all input.png -o output.webp`
   * Example (lossy): `cwebp -preset drawing -q 90 -alpha_q 100 -metadata all input.png -o output.webp`
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 7a75b3730..423793222 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,9 +1,96 @@
 /* custom classes: */
 .header-bg {
-  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, rgb(4.31% 5.88% 9.02%) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
+  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, var(--color-dark) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
   background-size: auto 100%;
 }
 
+/* Two stacked icons per slot; `.is-locked` on the .finder-hero root, set by
+   script, picks the visible face. */
+.finder-swap-icon {
+  @apply relative inline-flex flex-none size-5;
+}
+
+.finder-swap-icon i,
+.finder-swap-icon img {
+  @apply absolute inset-0 flex items-center justify-center object-contain;
+  transition: opacity 0.4s ease;
+}
+
+.finder-hero.is-locked .finder-when-unlocked,
+.finder-hero:not(.is-locked) .finder-when-locked {
+  opacity: 0;
+}
+
+.finder-hero.is-locked .finder-flap-name {
+  @apply font-mono text-[13px] text-gray-600;
+}
+
+/* The title-bar path flips as one whole panel between its locked and unlocked
+   label instead of per-letter flapping. */
+.finder-path {
+  @apply inline-flex min-w-0 perspective-[400px];
+}
+
+.finder-path-inner {
+  @apply transform-3d transition-transform duration-600 ease-in-out;
+}
+
+.finder-path-front,
+.finder-path-back {
+  @apply backface-hidden;
+}
+
+.finder-path-back,
+.finder-hero:not(.is-locked) .finder-path-inner {
+  @apply rotate-x-180;
+}
+
+/* Crossfade rotator for exactly three children: the :nth-child delays carve the
+   12s cycle into three 4s slots, so a fourth child fades in on top of the first. */
+.idp-swap {
+  display: inline-grid;
+  place-items: center;
+}
+
+/* Every delay is shifted by -0.48s, the length of the 4% fade-in, so the first
+   child is already opaque on load instead of fading in. */
+.idp-swap > * {
+  grid-area: 1 / 1;
+  opacity: 0;
+  animation: idp-cycle 12s infinite backwards;
+  animation-delay: -0.48s;
+}
+
+.idp-swap > :nth-child(2) {
+  animation-delay: 3.52s;
+}
+
+.idp-swap > :nth-child(3) {
+  animation-delay: 7.52s;
+}
+
+@keyframes idp-cycle {
+  0% { opacity: 0; }
+  4% { opacity: 1; }
+  33% { opacity: 1; }
+  37% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ad-pulse {
+    display: none;
+  }
+
+  .idp-swap > * {
+    animation: none;
+  }
+
+  .idp-swap > :first-child {
+    opacity: 1;
+  }
+}
+
 .container-prose {
   @apply w-full mx-auto;
   max-width: 768px;
@@ -34,22 +121,22 @@
   @apply bg-secondary border-secondary text-white;
 }
 
-.btn-tertiary2 {
-  @apply bg-tertiary2 border-tertiary2 text-white;
+.btn-hub {
+  @apply bg-hub border-hub text-white;
 }
 
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-secondary:hover,
 .btn-secondary:focus,
-.btn-tertiary2:hover,
-.btn-tertiary2:focus {
+.btn-hub:hover,
+.btn-hub:focus {
   @apply text-white transition transform duration-200 ease-in-out shadow-md -translate-y-px;
 }
 
 .btn-primary:disabled,
 .btn-secondary:disabled,
-.btn-tertiary2:disabled {
+.btn-hub:disabled {
   @apply shadow-none translate-y-0;
 }
 
@@ -62,6 +149,15 @@
   @apply bg-primary text-white transition transform duration-200 ease-in-out;
 }
 
+.btn-outline-hub {
+  @apply border border-hub text-hub;
+}
+
+.btn-outline-hub:hover,
+.btn-outline-hub:focus {
+  @apply bg-hub text-white transition transform duration-200 ease-in-out;
+}
+
 .btn-outline-secondary {
   @apply border border-secondary text-secondary;
 }
@@ -99,6 +195,10 @@
   @apply text-primary no-underline hover:underline;
 }
 
+.text-link-hub {
+  @apply text-hub no-underline hover:underline;
+}
+
 .font-h1 {
   @apply font-headline font-medium text-3xl md:text-4xl leading-tight text-balance;
 }
diff --git a/assets/css/hero.css b/assets/css/hero.css
index 5831b4e1f..e0a75ab4a 100644
--- a/assets/css/hero.css
+++ b/assets/css/hero.css
@@ -52,7 +52,7 @@
 
   .hero-aura-secondary {
     right: -12%;
-    background: radial-gradient(circle, color-mix(in srgb, var(--color-tertiary2) 14%, transparent) 0%, transparent 70%);
+    background: radial-gradient(circle, color-mix(in srgb, var(--color-hub) 14%, transparent) 0%, transparent 70%);
   }
 
   /* Uses the same `container` constraint as the content sections below, so the
@@ -70,7 +70,7 @@
   }
 
   .hero-panel-primary   { --accent: var(--color-primary); }
-  .hero-panel-secondary { --accent: var(--color-tertiary2); }
+  .hero-panel-secondary { --accent: var(--color-hub); }
 
   .hero-panel-content {
     @apply flex-1 flex flex-col items-center;
@@ -142,7 +142,7 @@
      - encrypted vault / key    → secondary (teal) — the right segment */
   .hero-cryp-link   { stroke: var(--color-primary); }
 
-  .hero-hub-link { stroke: var(--color-tertiary2); }
+  .hero-hub-link { stroke: var(--color-hub); }
 
   /* Anchor: the icon/logo is centered on its declared point so the connecting
      dashed lines (drawn to that point) pass through the disc's centre. The label
@@ -167,9 +167,9 @@
   }
 
   .hero-hub-scene {
-    --scene-accent: var(--color-tertiary2);
+    --scene-accent: var(--color-hub);
     --scene-disc: #f1f6fb;
-    --scene-token: var(--color-tertiary2);
+    --scene-token: var(--color-hub);
     --scene-glow: color-mix(in srgb, var(--color-gray-600) 40%, transparent);
     --scene-cycle: 10s;
   }
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 405d23a2e..e16b0104d 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -113,7 +113,7 @@
   --color-primary-l2: #ebf5eb;
   --color-secondary: #008a7b;
   --color-tertiary: #005e71;
-  --color-tertiary2: #354960;
+  --color-hub: #354960;
   --color-dark: #1e2b33;
 
   --font-*: initial;
diff --git a/assets/js/finder-hero.js b/assets/js/finder-hero.js
new file mode 100644
index 000000000..5061bd68e
--- /dev/null
+++ b/assets/js/finder-hero.js
@@ -0,0 +1,94 @@
+"use strict";
+
+/* One interval drives both halves of the effect: the per-element split-flap
+   text here, and the `.is-locked` icon and panel swap done in CSS. */
+
+class FinderFlap {
+  constructor(el) {
+    this.el = el;
+    this.lockedText = el.dataset.locked;
+    this.unlockedText = el.dataset.unlocked;
+    this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    this.raf = null;
+  }
+
+  show(locked) {
+    const newText = locked ? this.lockedText : this.unlockedText;
+    const oldText = this.el.textContent;
+    const length = Math.max(oldText.length, newText.length);
+    this.queue = [];
+    for (let i = 0; i < length; i++) {
+      const from = oldText[i] || '';
+      const to = newText[i] || '';
+      const start = Math.floor(i * 0.8);
+      const end = start + 8 + Math.floor(Math.random() * 8);
+      this.queue.push({ from, to, start, end, char: null });
+    }
+    cancelAnimationFrame(this.raf);
+    this.frame = 0;
+    this.update();
+  }
+
+  update() {
+    let output = '';
+    let complete = 0;
+    for (const item of this.queue) {
+      if (this.frame >= item.end) {
+        complete++;
+        output += item.to;
+      } else if (this.frame >= item.start) {
+        if (!item.char || Math.random() < 0.35) {
+          item.char = this.chars[Math.floor(Math.random() * this.chars.length)];
+        }
+        output += item.char;
+      } else {
+        output += item.from;
+      }
+    }
+    this.el.textContent = output;
+    if (complete < this.queue.length) {
+      this.frame++;
+      this.raf = requestAnimationFrame(() => this.update());
+    }
+  }
+}
+
+function initFinderHero() {
+  const root = document.querySelector('.finder-hero');
+  if (!root) {
+    return;
+  }
+  const flapElements = root.querySelectorAll('.finder-flap');
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    root.classList.remove('is-locked');
+    flapElements.forEach((el) => {
+      el.textContent = el.dataset.unlocked;
+    });
+    return;
+  }
+  const flaps = Array.from(flapElements, (el) => new FinderFlap(el));
+  const providers = [
+    { name: 'Google Drive', src: '/img/clouds/google-drive.svg' },
+    { name: 'iCloud Drive', src: '/img/clouds/icloud.svg' },
+    { name: 'OneDrive', src: '/img/clouds/onedrive.svg' },
+    { name: 'Dropbox', src: '/img/clouds/dropbox.svg' },
+  ];
+  const providerName = root.querySelector('[data-finder-provider-name]');
+  const providerIcon = root.querySelector('[data-finder-provider-icon]');
+  let providerIndex = 0;
+  let locked = true;
+  setInterval(() => {
+    locked = !locked;
+    if (locked) {
+      providerIndex = (providerIndex + 1) % providers.length;
+      providerName.textContent = providers[providerIndex].name;
+      providerIcon.src = providers[providerIndex].src;
+    }
+    root.classList.toggle('is-locked', locked);
+    flaps.forEach((flap, index) => {
+      setTimeout(() => flap.show(locked), index * 140);
+    });
+  }, 5000);
+}
+
+initFinderHero();
diff --git a/content/for-individuals.de.html b/content/for-individuals.de.html
index 82885156c..81e49ae00 100644
--- a/content/for-individuals.de.html
+++ b/content/for-individuals.de.html
@@ -1,4 +1,6 @@
 ---
 title: "Cryptomator"
 type: for-individuals
+darkNav: true
+flushHero: true
 ---
diff --git a/content/for-individuals.en.html b/content/for-individuals.en.html
index 82885156c..81e49ae00 100644
--- a/content/for-individuals.en.html
+++ b/content/for-individuals.en.html
@@ -1,4 +1,6 @@
 ---
 title: "Cryptomator"
 type: for-individuals
+darkNav: true
+flushHero: true
 ---
diff --git a/content/for-teams.de.html b/content/for-teams.de.html
index ec6251bd3..003d60f51 100644
--- a/content/for-teams.de.html
+++ b/content/for-teams.de.html
@@ -1,5 +1,8 @@
 ---
 title: "Cryptomator Hub"
 type: for-teams
+hubNav: true
+darkNav: true
+flushHero: true
 aliases: ["/hub"]
 ---
diff --git a/content/for-teams.en.html b/content/for-teams.en.html
index ec6251bd3..003d60f51 100644
--- a/content/for-teams.en.html
+++ b/content/for-teams.en.html
@@ -1,5 +1,8 @@
 ---
 title: "Cryptomator Hub"
 type: for-teams
+hubNav: true
+darkNav: true
+flushHero: true
 aliases: ["/hub"]
 ---
diff --git a/i18n/de.yaml b/i18n/de.yaml
index f6f722a8e..433a45c32 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -223,13 +223,64 @@
 - id: for_individuals_header_title
   translation: "Deine Daten in der Cloud gehören dir allein"
 - id: for_individuals_header_description
-  translation: "Daten in der Cloud sind oft nicht ausreichend geschützt. Cryptomator verschlüsselt deine Dokumente, Fotos und persönlichen Dateien mit wenigen Klicks – so hast nur du Zugriff. Niemand sonst."
+  translation: "Cryptomator verschlüsselt deine Dokumente, Fotos und persönlichen Dateien mit wenigen Klicks – so hast nur du Zugriff. Niemand sonst."
 - id: for_individuals_header_cta
   translation: "Jetzt herunterladen"
 - id: for_individuals_header_cta_description
   translation: "Verfügbar für Windows, macOS, Linux, Android und iOS."
-- id: for_individuals_header_woman_laptop_alt
-  translation: "Person, die vor einem Laptop sitzt, während Cryptobot neben der Person auf den Laptop zeigt"
+- id: for_individuals_header_link
+  translation: "So funktioniert's"
+
+- id: for_individuals_finder_locked_path_suffix
+  translation: " › Tresor"
+- id: for_individuals_finder_unlocked_path
+  translation: "Dein Laufwerk › Tresor"
+- id: for_individuals_finder_col_name
+  translation: "Name"
+- id: for_individuals_finder_col_size
+  translation: "Größe"
+- id: for_individuals_finder_col_modified
+  translation: "Geändert"
+- id: for_individuals_finder_file_1_name
+  translation: "Urlaubsfotos"
+- id: for_individuals_finder_file_1_modified
+  translation: "Heute, 09:41"
+- id: for_individuals_finder_file_2_name
+  translation: "Steuererklärung-2025.pdf"
+- id: for_individuals_finder_file_2_size
+  translation: "2,4 MB"
+- id: for_individuals_finder_file_2_modified
+  translation: "Gestern, 18:07"
+- id: for_individuals_finder_file_3_name
+  translation: "Reisepass-Scan.jpg"
+- id: for_individuals_finder_file_3_size
+  translation: "1,8 MB"
+- id: for_individuals_finder_file_3_modified
+  translation: "12.07.2026"
+- id: for_individuals_finder_file_4_name
+  translation: "Finanzen.xlsx"
+- id: for_individuals_finder_file_4_size
+  translation: "96 KB"
+- id: for_individuals_finder_file_4_modified
+  translation: "08.07.2026"
+- id: for_individuals_finder_file_5_name
+  translation: "Mietvertrag.pdf"
+- id: for_individuals_finder_file_5_size
+  translation: "640 KB"
+- id: for_individuals_finder_file_5_modified
+  translation: "27.06.2026"
+- id: for_individuals_finder_file_6_name
+  translation: "Bewerbung.docx"
+- id: for_individuals_finder_file_6_size
+  translation: "88 KB"
+- id: for_individuals_finder_file_6_modified
+  translation: "05.06.2026"
+- id: for_individuals_hero_pill
+  translation: "Ende-zu-Ende verschlüsselt – nur du hast den Schlüssel"
+- id: for_individuals_finder_items
+  translation: "6 Objekte"
+- id: for_individuals_stats_title
+  translation: "Vertraut von Millionen weltweit"
 
 - id: for_individuals_downloads_title
   translation: "4M+"
@@ -401,11 +452,45 @@
 - id: hub_header_title
   translation: "Souveräne Zusammenarbeit in der Cloud"
 - id: hub_header_description
-  translation: "Cryptomator Hub verschlüsselt deine vertraulichen Unternehmensdaten wie personenbezogene Kundendaten oder interne Geschäftsdokumente – DSGVO-konform, einfach und unter deiner Kontrolle."
+  translation: "Cryptomator Hub verschlüsselt die vertraulichen Daten deines Unternehmens – DSGVO-konform, einfach und unter deiner Kontrolle."
 - id: hub_header_managed_cta
-  translation: "Jetzt anmelden"
+  translation: "Kostenlos testen"
 - id: hub_header_managed_cta_description
   translation: "Startet eure kostenlose 30-Tage-Testversion noch heute, keine Kreditkarte erforderlich."
+- id: hub_header_link
+  translation: "So funktioniert's"
+- id: hub_hero_scene_vault
+  translation: "Gemeinsamer Tresor"
+- id: hub_hero_card_vault_name
+  translation: "Finanzen"
+- id: hub_hero_group_name
+  translation: "Team Buchhaltung"
+- id: hub_hero_group_subtitle
+  translation: "Gruppe · 8 Mitglieder"
+- id: hub_hero_tile_audit
+  translation: "Audit-Log"
+- id: hub_hero_tile_devices
+  translation: "Geräte"
+- id: hub_hero_ad_row_users
+  translation: "128 Benutzer"
+- id: hub_hero_ad_row_groups
+  translation: "12 Gruppen"
+- id: hub_hero_node_revoked
+  translation: "Zugriff entzogen"
+- id: hub_hero_audit_row_1
+  translation: "Zugriff erteilt · Lena"
+- id: hub_hero_audit_row_2
+  translation: "Gerät registriert · Jonas"
+- id: hub_hero_audit_row_3
+  translation: "Zugriff entzogen · Michael"
+- id: hub_hero_row_owner_desc
+  translation: "CFO"
+- id: hub_hero_tag_external
+  translation: "Extern"
+- id: hub_hero_tag_owner
+  translation: "Owner"
+- id: hub_hero_row_external_desc
+  translation: "Steuerberaterin"
 - id: hub_header_group_magic_alt
   translation: "Cryptobot verbindet eine Gruppe von Menschen mit seinen magischen Fähigkeiten durch Zero-Knowledge-Verschlüsselung"
 
@@ -432,6 +517,12 @@
   translation: "Ladet euren Tresor über Cryptomator Hub herunter und öffnet ihn direkt in der Cryptomator App als bestehenden Tresor. Statt ein Passwort einzugeben, erfolgt die Authentifizierung sicher über Hub – so bleibt alles geschützt und trotzdem komfortabel zugänglich."
 - id: hub_workflow_step_3_alt
   translation: "Cryptomator-App-Oberfläche mit mehreren Tresoren"
+- id: hub_workflow_step_4_title
+  translation: "4. Lückenlos nachvollziehbar"
+- id: hub_workflow_step_4_description
+  translation: "Wer hat wann welchen Tresor entsperrt, ein Gerät registriert oder Zugriff erhalten? Das Audit-Log protokolliert alle sicherheitsrelevanten Ereignisse. Compliance-Nachweise gibt es damit auf Knopfdruck."
+- id: hub_workflow_step_4_alt
+  translation: "Audit-Log in Cryptomator Hub mit protokollierten Ereignissen"
 
 - id: hub_features_title
   translation: "Warum Cryptomator Hub?"
@@ -781,6 +872,38 @@
 - id: hub_demo_contact_us_button
   translation: "Kontaktiere uns"
 
+# Hub CE Registration
+- id: hub_ce_registration_description
+  translation: "Registriere deine Cryptomator-Hub-Instanz für eine kostenlose Community-Edition-Lizenz."
+
+- id: hub_ce_registration_steps_title
+  translation: "Schritt <span x-text=\"feedbackData.currentStep + 1\"></span> von <span x-text=\"steps.length\"></span>"
+- id: hub_ce_registration_steps_next
+  translation: "Weiter"
+
+- id: hub_ce_registration_step_1_nav_title
+  translation: "E-Mail-Adresse"
+- id: hub_ce_registration_step_1_title
+  translation: "Wie lautet deine E-Mail-Adresse?"
+- id: hub_ce_registration_step_1_email_placeholder
+  translation: "E-Mail-Adresse"
+
+- id: hub_ce_registration_step_2_confirmation_nav_title
+  translation: "Bestätigung"
+- id: hub_ce_registration_step_2_confirmation_title
+  translation: "Bitte bestätige deine E-Mail-Adresse"
+- id: hub_ce_registration_step_2_instructions
+  translation: "Wir senden eine Bestätigungs-E-Mail an <span x-text=\"submitData.email\"></span>"
+- id: hub_ce_registration_step_2_check_email
+  translation: "Bitte prüfe deine E-Mails."
+
+- id: hub_ce_registration_step_3_license_nav_title
+  translation: "Lizenzschlüssel"
+- id: hub_ce_registration_step_3_license_title
+  translation: "Deine Community-Edition-Lizenz"
+- id: hub_ce_registration_step_3_success
+  translation: "Deine E-Mail-Adresse wurde erfolgreich verifiziert. Kehre zu deiner Hub-Instanz zurück, sie holt deinen Lizenzschlüssel automatisch ab."
+
 # Hub Managed
 - id: hub_managed_description
   translation: "Beantrage Zugang zu einer Managed-Instanz von Cryptomator Hub und hol dein Team mit der clientseitigen Verschlüsselung für deinen Cloud-Speicher an Bord."
diff --git a/i18n/en.yaml b/i18n/en.yaml
index f04e047c6..f7f7b33a5 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -223,13 +223,64 @@
 - id: for_individuals_header_title
   translation: "Keep your cloud data truly yours"
 - id: for_individuals_header_description
-  translation: "Data in the cloud is often not sufficiently protected. Cryptomator encrypts your documents, photos, and personal files with just a few clicks – ensuring that only you have access. No one else."
+  translation: "Cryptomator encrypts your documents, photos, and personal files in just a few clicks – so only you have access. No one else."
 - id: for_individuals_header_cta
   translation: "Download Now"
 - id: for_individuals_header_cta_description
   translation: "Available for Windows, macOS, Linux, Android, and iOS."
-- id: for_individuals_header_woman_laptop_alt
-  translation: "Person sitting in front of a laptop while Cryptobot next to the person is pointing at the laptop"
+- id: for_individuals_header_link
+  translation: "See how it works"
+
+- id: for_individuals_finder_locked_path_suffix
+  translation: " › Vault"
+- id: for_individuals_finder_unlocked_path
+  translation: "Your Drive › Vault"
+- id: for_individuals_finder_col_name
+  translation: "Name"
+- id: for_individuals_finder_col_size
+  translation: "Size"
+- id: for_individuals_finder_col_modified
+  translation: "Date Modified"
+- id: for_individuals_finder_file_1_name
+  translation: "Vacation Photos"
+- id: for_individuals_finder_file_1_modified
+  translation: "Today, 9:41 AM"
+- id: for_individuals_finder_file_2_name
+  translation: "Tax-Return-2025.pdf"
+- id: for_individuals_finder_file_2_size
+  translation: "2.4 MB"
+- id: for_individuals_finder_file_2_modified
+  translation: "Yesterday, 6:07 PM"
+- id: for_individuals_finder_file_3_name
+  translation: "Passport-Scan.jpg"
+- id: for_individuals_finder_file_3_size
+  translation: "1.8 MB"
+- id: for_individuals_finder_file_3_modified
+  translation: "07/12/2026"
+- id: for_individuals_finder_file_4_name
+  translation: "Finances.xlsx"
+- id: for_individuals_finder_file_4_size
+  translation: "96 KB"
+- id: for_individuals_finder_file_4_modified
+  translation: "07/08/2026"
+- id: for_individuals_finder_file_5_name
+  translation: "Lease-Agreement.pdf"
+- id: for_individuals_finder_file_5_size
+  translation: "640 KB"
+- id: for_individuals_finder_file_5_modified
+  translation: "06/27/2026"
+- id: for_individuals_finder_file_6_name
+  translation: "Resume.docx"
+- id: for_individuals_finder_file_6_size
+  translation: "88 KB"
+- id: for_individuals_finder_file_6_modified
+  translation: "06/05/2026"
+- id: for_individuals_hero_pill
+  translation: "End-to-end encrypted – only you hold the key"
+- id: for_individuals_finder_items
+  translation: "6 items"
+- id: for_individuals_stats_title
+  translation: "Trusted by millions worldwide"
 
 - id: for_individuals_downloads_title
   translation: "4M+"
@@ -401,11 +452,45 @@
 - id: hub_header_title
   translation: "Secure collaboration in the cloud"
 - id: hub_header_description
-  translation: "Cryptomator Hub encrypts your company's confidential data, from personal customer information to internal documents – fully GDPR-compliant, simple to use, and always under your control."
+  translation: "Cryptomator Hub encrypts your company's confidential data – GDPR-compliant, simple to use, and always under your control."
 - id: hub_header_managed_cta
-  translation: "Sign Up Now"
+  translation: "Start Free Trial"
 - id: hub_header_managed_cta_description
   translation: "Start your free 30-day trial today, no credit card required."
+- id: hub_header_link
+  translation: "See how it works"
+- id: hub_hero_scene_vault
+  translation: "Shared Vault"
+- id: hub_hero_card_vault_name
+  translation: "Finance"
+- id: hub_hero_group_name
+  translation: "Accounting Team"
+- id: hub_hero_group_subtitle
+  translation: "Group · 8 members"
+- id: hub_hero_tile_audit
+  translation: "Audit Log"
+- id: hub_hero_tile_devices
+  translation: "Devices"
+- id: hub_hero_ad_row_users
+  translation: "128 users"
+- id: hub_hero_ad_row_groups
+  translation: "12 groups"
+- id: hub_hero_node_revoked
+  translation: "Access revoked"
+- id: hub_hero_audit_row_1
+  translation: "Access granted · Lena"
+- id: hub_hero_audit_row_2
+  translation: "Device registered · Jonas"
+- id: hub_hero_audit_row_3
+  translation: "Access revoked · Michael"
+- id: hub_hero_row_owner_desc
+  translation: "CFO"
+- id: hub_hero_tag_external
+  translation: "External"
+- id: hub_hero_tag_owner
+  translation: "Owner"
+- id: hub_hero_row_external_desc
+  translation: "Tax Advisor"
 - id: hub_header_group_magic_alt
   translation: "Cryptobot connects a group of people with its magical abilities through zero-knowledge encryption"
 
@@ -432,6 +517,12 @@
   translation: "Download your vault via Cryptomator Hub and open it directly in the Cryptomator app as an existing vault. Instead of entering a password, authentication is securely handled through Hub – keeping everything protected while ensuring easy access."
 - id: hub_workflow_step_3_alt
   translation: "Cryptomator app interface with multiple vaults"
+- id: hub_workflow_step_4_title
+  translation: "4. Fully Traceable"
+- id: hub_workflow_step_4_description
+  translation: "Who unlocked which vault, registered a device, or was granted access, and when? The audit log records all security-relevant events and gives you compliance evidence at the push of a button."
+- id: hub_workflow_step_4_alt
+  translation: "Audit log in Cryptomator Hub with recorded events"
 
 - id: hub_features_title
   translation: "Why Cryptomator Hub?"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5c520002c..4fa615c2b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,7 +7,7 @@
     {{ block "preloads" . }}
       <!-- optional additional page-specific preloads -->
     {{ end }}
-    <link rel="preload" fetchpriority="low" as="image" href="/img/logo.svg" type="image/svg+xml">
+    <link rel="preload" fetchpriority="low" as="image" href="{{ if partial "hub-nav.html" . }}/img/zero-knowledge-bot.svg{{ else }}/img/logo.svg{{ end }}" type="image/svg+xml">
     <link rel="preload" fetchpriority="low" href="/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" fetchpriority="low" href="/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <meta property="og:url" content="{{ partial "canonical-url.html" . }}">
@@ -49,14 +49,7 @@
       <meta property="og:locale:alternate" content="{{ replace .Language.Locale "-" "_" }}" />
     {{ end }}
     <meta name="apple-itunes-app" content="app-id=1560822163">
-    {{ if hugo.IsDevelopment }}
-      {{ $css := resources.Get "css/main.css" | css.TailwindCSS }}
-      <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="screen" />
-    {{ else }}
-      {{ $tailwindOpts := dict "minify" true }}
-      {{ $css := resources.Get "css/main.css" | css.TailwindCSS $tailwindOpts | fingerprint }}
-      <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" media="screen" />
-    {{ end }}
+    {{ partial "page-css.html" "css/main.css" }}
     {{ block "styles" . }}
       <!-- optional additional page-specific stylesheets, loaded after the main stylesheet -->
     {{ end }}
@@ -107,23 +100,13 @@
     {{- if $showAnniversaryBanner -}}
       {{ partial "anniversary-banner.html" . }}
     {{- end -}}
-    {{- $showThinStrip := or $showWebinarBanner $showSaleBanner -}}
     {{- $flushHero := or .IsHome .Params.flushHero -}}
-    {{- $topPadding := cond $flushHero "" "pt-12" -}}
-    {{- if and $showThinStrip (not $showAnniversaryBanner) -}}
-      {{- $topPadding = cond $flushHero "" "pt-24 md:pt-18" -}}
-    {{- else if and (not $showThinStrip) $showAnniversaryBanner -}}
-      {{- $topPadding = cond $flushHero "" "pt-28 md:pt-24" -}}
-    {{- else if and $showThinStrip $showAnniversaryBanner -}}
-      {{- $topPadding = cond $flushHero "" "pt-40 md:pt-32" -}}
-    {{- end -}}
-    {{- /* The webinar banner hides itself client-side when no webinar is live/upcoming; collapse its reserved padding to match. */ -}}
-    {{- $webinarIsThinStrip := and $showWebinarBanner (not $showSaleBanner) -}}
-    {{- $paddingNoStrip := cond $flushHero "" "pt-12" -}}
-    {{- if $showAnniversaryBanner -}}
-      {{- $paddingNoStrip = cond $flushHero "" "pt-28 md:pt-24" -}}
+    {{- $wrapperClasses := "bg-gray-100 min-h-[80vh]" -}}
+    {{- $wrapperAttrs := printf "class=\"%s\"" $wrapperClasses | safeHTMLAttr -}}
+    {{- if not $flushHero -}}
+      {{- $wrapperAttrs = partial "banner-padding.html" (dict "context" . "classes" $wrapperClasses "base" "pt-12" "thinStrip" "pt-24 md:pt-18" "anniversary" "pt-28 md:pt-24" "both" "pt-40 md:pt-32") -}}
     {{- end -}}
-    <div class="bg-gray-100 min-h-[80vh]{{ if not $webinarIsThinStrip }} {{ $topPadding }}{{ end }}"{{ if $webinarIsThinStrip }} :class="webinar.state === 'none' ? '{{ $paddingNoStrip }}' : '{{ $topPadding }}'"{{ end }}>
+    <div {{ $wrapperAttrs }}>
     <!-- Code that all your templates share, like a header -->
     {{ block "main" . }}
       <!-- The part of the page that begins to differ between templates -->
diff --git a/layouts/downloads/list.html b/layouts/downloads/list.html
index e08603941..5c2b8cd6f 100644
--- a/layouts/downloads/list.html
+++ b/layouts/downloads/list.html
@@ -30,7 +30,7 @@
       </div>
       <div class="w-full md:w-2/3 lg:w-3/5">
         <div class="flex items-center mb-4">
-          <img src="/img/zero-knowledge-bot.svg" class="h-7 aspect-988/877" alt="Logo"/>
+          <img src="/img/zero-knowledge-bot.svg" class="h-7 aspect-988/877" alt=""/>
           <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
         </div>
         <h2 class="font-h2 text-white mb-4">{{ i18n "hub_header_title" . | safeHTML }}</h2>
diff --git a/layouts/for-individuals/single.html b/layouts/for-individuals/single.html
index b871b534a..7e5010a14 100644
--- a/layouts/for-individuals/single.html
+++ b/layouts/for-individuals/single.html
@@ -1,40 +1,115 @@
 {{ define "preloads" }}
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/downloads/">
+  <link rel="preload" fetchpriority="high" as="image" href="/img/home/header-background.avif" type="image/avif">
+  {{- /* Rotation icons for the finder hero; google-drive.svg is the initial src in the markup. */ -}}
+  <link rel="prefetch" href="/img/clouds/icloud.svg">
+  <link rel="prefetch" href="/img/clouds/onedrive.svg">
+  <link rel="prefetch" href="/img/clouds/dropbox.svg">
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section class="flex items-center md:min-h-[66vh]">
-    <header class="container flex items-center py-12 md:py-16 lg:py-20">
-      <div class="hidden pr-6 md:block md:w-1/3 lg:w-2/5">
-        <img data-src="/img/home/woman-laptop.png" class="lazyload object-scale-down mx-auto lg:w-3/4" alt="{{ i18n "for_individuals_header_woman_laptop_alt" . }}"/>
-      </div>
-      <div class="w-full md:w-2/3 lg:w-3/5">
-        <div class="flex flex-wrap items-center gap-4 mb-4">
-          <div class="flex items-center">
-            <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt="Logo"/>
-            <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR</span>
+  {{- /* baseof emits no padding for flush heroes, so the hero self-clears the fixed nav + banners. */ -}}
+  <header {{ partial "banner-padding.html" (dict "context" . "classes" "header-bg bg-dark bg-center bg-repeat-x relative" "base" "pt-16") }}>
+    <div class="container flex flex-col items-center text-center text-white pt-6 md:pt-8">
+    {{ if .Site.Params.paddleDesktopSalePriceId }}
+    <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white mb-6">
+      {{ i18n "for_individuals_header_kicker_sale" . }}
+    </div>
+    {{ end }}
+    <h1 class="font-headline font-medium text-4xl md:text-5xl leading-tight tracking-tight text-balance mb-5">{{ i18n "for_individuals_header_title" . | safeHTML }}</h1>
+    <p class="text-lg leading-relaxed text-balance text-gray-300 max-w-2xl mb-6">{{ i18n "for_individuals_header_description" . | safeHTML }}</p>
+    <div class="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4">
+      <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary text-lg min-w-[16rem] py-3" data-umami-event="for-individuals-header-cta">{{ i18n "for_individuals_header_cta" . }}</a>
+      <a href="#how-it-works" class="group inline-flex items-center gap-1.5 text-sm text-gray-300 no-underline hover:text-white" data-umami-event="for-individuals-header-how-it-works">
+        {{ i18n "for_individuals_header_link" . }}
+        <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true"></i>
+      </a>
+    </div>
+    <p class="text-sm text-gray-400">{{ i18n "for_individuals_header_cta_description" . | safeHTML }}</p>
+    {{ if .Site.Params.paddleDesktopSalePriceId }}
+    <p class="text-sm text-gray-400 mt-2">* {{ i18n "pricing_discount_note" }}</p>
+    {{ end }}
+    </div>
+
+    {{ partial "hero-wave.html" }}
+    {{- $finderRow := "grid grid-cols-[minmax(0,1fr)_4.5rem_6.5rem] md:grid-cols-[minmax(0,1fr)_5rem_8.5rem] gap-3 items-center px-5" -}}
+    <div class="finder-hero is-locked relative z-10 mt-16 md:mt-20 -mb-20 md:-mb-24 w-full max-w-xl mx-auto px-4 md:px-0">
+      <div class="relative text-left">
+        <div class="absolute inset-x-0 -top-12 flex justify-center gap-10 translate-x-12 pointer-events-none" aria-hidden="true">
+          <div class="relative w-20 h-24 rounded-md bg-white shadow-md ring-1 ring-black/5 -rotate-6 p-2.5 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_14px,100%_100%,0_100%)]">
+            <span class="absolute top-0 right-0 w-3.5 h-3.5 bg-gray-200 rounded-bl-md"></span>
+            <div class="h-1.5 w-9 rounded bg-gray-200 mb-2 mt-1"></div>
+            <div class="h-1.5 w-12 rounded bg-gray-100 mb-2"></div>
+            <div class="h-1.5 w-7 rounded bg-gray-100 mb-2"></div>
+            <div class="h-1.5 w-10 rounded bg-gray-100"></div>
           </div>
-          {{ if .Site.Params.paddleDesktopSalePriceId }}
-          <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white">
-            {{ i18n "for_individuals_header_kicker_sale" . }}
+          <div class="relative w-20 h-24 rounded-md bg-white shadow-md ring-1 ring-black/5 rotate-3 mt-1.5 p-2.5">
+            <span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[9px] ring-2 ring-white" aria-hidden="true"><i class="fa-solid fa-lock"></i></span>
+            <p class="font-mono text-[7px] leading-[1.8] tracking-wide break-all text-center m-0 mt-1"><span class="text-gray-500">Zk5r7q.c9r</span><br/><span class="text-gray-400">9M3t8J1cRw</span><br/><span class="text-gray-400">4xA6vB_pZk</span></p>
           </div>
-          {{ end }}
         </div>
-        <h1 class="font-h1 mb-6">{{ i18n "for_individuals_header_title" . | safeHTML }}</h1>
-        <p class="lead mb-6">{{ i18n "for_individuals_header_description" . | safeHTML }}</p>
-        <div class="flex flex-col md:flex-row gap-6 mb-4">
-          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="for-individuals-header-cta">{{ i18n "for_individuals_header_cta" . }}</a>
+
+        <div class="relative z-10 rounded-2xl bg-white shadow-xl ring-1 ring-black/5 overflow-hidden">
+          <div class="flex items-center gap-1.5 px-5 pt-4" aria-hidden="true">
+            <span class="h-2.5 w-2.5 rounded-full bg-[#ff5f57]"></span>
+            <span class="h-2.5 w-2.5 rounded-full bg-[#febc2e]"></span>
+            <span class="h-2.5 w-2.5 rounded-full bg-[#28c840]"></span>
+          </div>
+          <div class="flex items-center gap-3 px-5 pt-3 pb-3.5 border-b border-gray-100">
+            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gray-100">
+              <span class="finder-swap-icon"><img src="/img/clouds/google-drive.svg" class="finder-when-locked" data-finder-provider-icon alt="" aria-hidden="true"/><img src="/img/logo.svg" class="finder-when-unlocked" alt="" aria-hidden="true"/></span>
+            </span>
+            <div class="min-w-0">
+              <span class="finder-path font-headline font-medium text-gray-800 leading-tight">
+                <span class="finder-path-inner inline-grid">
+                  <span class="finder-path-front col-start-1 row-start-1 truncate"><span data-finder-provider-name>Google Drive</span>{{ i18n "for_individuals_finder_locked_path_suffix" }}</span>
+                  <span class="finder-path-back col-start-1 row-start-1 truncate">{{ i18n "for_individuals_finder_unlocked_path" }}</span>
+                </span>
+              </span>
+              <p class="text-xs text-gray-500 leading-tight">{{ i18n "for_individuals_finder_items" }}</p>
+            </div>
+            <span class="finder-swap-icon ml-auto text-gray-400"><i class="fa-solid fa-lock finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-lock-open finder-when-unlocked" aria-hidden="true"></i></span>
+          </div>
+          <div class="{{ $finderRow }} py-1.5 text-xs text-gray-500 border-b border-gray-100">
+            <span>{{ i18n "for_individuals_finder_col_name" }}</span>
+            <span class="text-right">{{ i18n "for_individuals_finder_col_size" }}</span>
+            <span>{{ i18n "for_individuals_finder_col_modified" }}</span>
+          </div>
+          {{- $finderFiles := slice
+            (dict "key" "for_individuals_finder_file_1" "name" "T6KQ3ZVW9J2RXA5M4YD7CB" "folder" true "icon" "fa-folder text-secondary")
+            (dict "key" "for_individuals_finder_file_2" "name" "ZK5R7Q2W9M3T8J1C4XA6VB.c9r" "folder" false "icon" "fa-file-pdf text-red-400")
+            (dict "key" "for_individuals_finder_file_3" "name" "P8W2NM4KQ7ZR5TC1J9XY3A.c9r" "folder" false "icon" "fa-file-image text-secondary")
+            (dict "key" "for_individuals_finder_file_4" "name" "C4XJ9A1MT5ZK2Q8RW6VN0B.c9r" "folder" false "icon" "fa-file-excel text-primary")
+            (dict "key" "for_individuals_finder_file_5" "name" "V0BN6W3RQ8ZT2MK5AJ7XC9.c9r" "folder" false "icon" "fa-file-pdf text-red-400")
+            (dict "key" "for_individuals_finder_file_6" "name" "X9AT4CJ1WQ6ZK3RB8MV2N5.c9r" "folder" false "icon" "fa-file-word text-hub")
+          -}}
+          <ul class="divide-y divide-gray-100 text-sm text-gray-700 pb-4">
+            {{- range $file := $finderFiles }}
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid {{ if $file.folder }}fa-folder{{ else }}fa-file{{ end }} text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid {{ $file.icon }} finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="{{ $file.name }}" data-unlocked="{{ i18n (printf "%s_name" $file.key) }}">{{ $file.name }}</span>
+              </span>
+              {{- if $file.folder }}
+              <span class="text-right text-gray-500">&mdash;</span>
+              {{- else }}
+              <span class="finder-flap text-right text-gray-500" data-locked="&mdash;" data-unlocked="{{ i18n (printf "%s_size" $file.key) }}">&mdash;</span>
+              {{- end }}
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n (printf "%s_modified" $file.key) }}">&mdash;</span>
+            </li>
+            {{- end }}
+          </ul>
+        </div>
+
+        <div class="absolute z-20 -bottom-4 left-1/2 -translate-x-1/2 inline-flex items-center gap-2 w-max max-w-[calc(100vw-2.5rem)] justify-center text-center md:whitespace-nowrap rounded-full bg-white px-4 py-2 text-xs font-medium text-gray-700 shadow-lg ring-1 ring-black/5">
+          <i class="fa-solid fa-key text-primary" aria-hidden="true"></i> {{ i18n "for_individuals_hero_pill" }}
+        </div>
       </div>
-      <p class="font-p">{{ i18n "for_individuals_header_cta_description" . | safeHTML }}</p>
-      {{ if .Site.Params.paddleDesktopSalePriceId }}
-      <p class="text-sm mt-6">
-        * {{ i18n "pricing_discount_note" }}
-      </p>
-      {{ end }}
-    </header>
-  </section>
+    </div>
+  </header>
 
-  <section class="container py-12 text-center">
+  <section class="container pt-32 md:pt-40 pb-16 md:pb-20 text-center">
+    <h2 class="text-sm font-medium uppercase tracking-widest text-gray-500 mb-10">{{ i18n "for_individuals_stats_title" }}</h2>
     <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
       <div>
         <h2 class="font-bold text-2xl lg:text-3xl leading-relaxed">{{ i18n "for_individuals_downloads_title" }}</h2>
@@ -59,36 +134,42 @@ <h2 class="font-bold text-2xl lg:text-3xl leading-relaxed">{{ i18n "for_individu
     </div>
   </section>
 
-  <section class="container py-12">
-    <div class="flex flex-wrap mb-24">
-      <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
-        <img data-src="/img/for-individuals/screenshot-1.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_1_alt" }}"/>
-      </figure>
-      <div class="w-full md:w-1/2 md:pl-6">
-        <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_1_title" }}</h2>
-        <p class="lead">{{ i18n "for_individuals_workflow_step_1_description" }}</p>
-      </div>
-    </div>
+  <section id="how-it-works" class="mt-10 md:mt-12 scroll-mt-24">
+    <div class="h-12 md:h-16 bg-linear-to-b from-gray-100 to-white" aria-hidden="true"></div>
+    <div class="bg-white">
+      <div class="container pb-16 md:pb-20">
+        <div class="flex flex-wrap mb-24">
+          <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
+            <img data-src="/img/for-individuals/screenshot-1.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_1_alt" }}"/>
+          </figure>
+          <div class="w-full md:w-1/2 md:pl-6">
+            <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_1_title" }}</h2>
+            <p class="lead">{{ i18n "for_individuals_workflow_step_1_description" }}</p>
+          </div>
+        </div>
     
-    <div class="flex flex-wrap mb-24 md:flex-row-reverse">
-      <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pl-6">
-        <img data-src="/img/for-individuals/screenshot-2.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_2_alt" }}"/>
-      </figure>
-      <div class="w-full md:w-1/2 md:pr-6">
-        <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_2_title" }}</h2>
-        <p class="lead">{{ i18n "for_individuals_workflow_step_2_description" }}</p>
-      </div>
-    </div>
+        <div class="flex flex-wrap mb-24 md:flex-row-reverse">
+          <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pl-6">
+            <img data-src="/img/for-individuals/screenshot-2.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_2_alt" }}"/>
+          </figure>
+          <div class="w-full md:w-1/2 md:pr-6">
+            <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_2_title" }}</h2>
+            <p class="lead">{{ i18n "for_individuals_workflow_step_2_description" }}</p>
+          </div>
+        </div>
     
-    <div class="flex flex-wrap">
-      <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
-        <img data-src="/img/for-individuals/screenshot-3.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_3_alt" }}"/>
-      </figure>
-      <div class="w-full md:w-1/2 md:pl-6">
-        <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_3_title" }}</h2>
-        <p class="lead">{{ i18n "for_individuals_workflow_step_3_description" }}</p>
+        <div class="flex flex-wrap">
+          <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
+            <img data-src="/img/for-individuals/screenshot-3.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_3_alt" }}"/>
+          </figure>
+          <div class="w-full md:w-1/2 md:pl-6">
+            <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_3_title" }}</h2>
+            <p class="lead">{{ i18n "for_individuals_workflow_step_3_description" }}</p>
+          </div>
+        </div>
       </div>
     </div>
+    <div class="h-16 md:h-24 bg-linear-to-t from-gray-100 to-white" aria-hidden="true"></div>
   </section>
 
   <section class="container py-12">
@@ -213,6 +294,8 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h
 {{ end }}
 {{ define "script" }}
   {{ if hugo.IsDevelopment }}
+    {{ $finderJs := resources.Get "js/finder-hero.js" }}
+    <script type="text/javascript" src="{{ $finderJs.RelPermalink }}" defer></script>
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
@@ -220,6 +303,8 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
     <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" defer></script>
   {{ else }}
+    {{ $finderJs := resources.Get "js/finder-hero.js" | minify | fingerprint }}
+    <script type="text/javascript" src="{{ $finderJs.RelPermalink }}" integrity="{{ $finderJs.Data.Integrity }}" defer></script>
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
diff --git a/layouts/for-teams/single.html b/layouts/for-teams/single.html
index 945611101..e39feae0f 100644
--- a/layouts/for-teams/single.html
+++ b/layouts/for-teams/single.html
@@ -1,28 +1,152 @@
 {{ define "preloads" }}
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/hub/managed/">
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/hub/self-hosted/">
+  <link rel="preload" fetchpriority="high" as="image" href="/img/home/header-background.avif" type="image/avif">
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section class="flex items-center md:min-h-[66vh]">
-    <header class="container flex items-center py-12 md:py-16 lg:py-20">
-      <div class="hidden pr-6 md:block md:w-1/3 lg:w-2/5">
-        <img data-src="/img/hub/group-magic.png" class="lazyload object-scale-down mx-auto lg:w-3/4" alt="{{ i18n "hub_header_group_magic_alt" . }}"/>
+  {{- /* baseof emits no padding for flush heroes, so the hero self-clears the fixed nav + banners. */ -}}
+  <div {{ partial "banner-padding.html" (dict "context" . "classes" "header-bg bg-dark bg-center bg-repeat-x relative overflow-x-clip pb-24 md:pb-32" "base" "pt-16") }}>
+    <header class="container flex flex-col items-center text-center text-white pt-6 md:pt-8">
+      <h1 class="font-headline font-medium text-4xl md:text-5xl leading-tight tracking-tight text-balance mb-5">{{ i18n "hub_header_title" . | safeHTML }}</h1>
+      <p class="text-lg leading-relaxed text-balance text-gray-300 max-w-2xl mb-6">{{ i18n "hub_header_description" . | safeHTML }}</p>
+      <div class="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4">
+        <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary text-lg min-w-[16rem] py-3" data-umami-event="hub-header-managed-cta">{{ i18n "hub_header_managed_cta" . }}</a>
+        <a href="#introduction" class="group inline-flex items-center gap-1.5 text-sm text-gray-300 no-underline hover:text-white" data-umami-event="hub-header-how-it-works">
+          {{ i18n "hub_header_link" . }}
+          <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true"></i>
+        </a>
       </div>
-      <div class="w-full md:w-2/3 lg:w-3/5">
-        <div class="flex items-center mb-4">
-          <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt="Logo"/>
-          <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
-        </div>
-        <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
-        <p class="lead mb-6">{{ i18n "hub_header_description" . | safeHTML }}</p>
-        <div class="flex flex-col md:flex-row gap-6 mb-4">
-          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="hub-header-managed-cta">{{ i18n "hub_header_managed_cta" . }}</a>
+      <p class="text-sm text-gray-400">{{ i18n "hub_header_managed_cta_description" . | safeHTML }}</p>
+
+      <div class="relative mt-8 mb-6 h-[200px] md:h-[368px]">
+        <div class="absolute left-1/2 top-0 -translate-x-1/2 w-[720px] h-[400px] origin-top scale-[0.5] md:scale-100">
+          <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 720 400" aria-hidden="true">
+            <path d="M360 175 C330 105 288 55 248 40" class="stroke-white/60" fill="none" stroke-width="1.5"/>
+            <path d="M360 175 C390 105 432 55 472 40" class="stroke-white/60" fill="none" stroke-width="1.5"/>
+            <path d="M360 175 C280 168 175 140 112 118" class="stroke-white/60" fill="none" stroke-width="1.5"/>
+            <path d="M360 175 C420 195 470 235 492 272" class="stroke-white/60" fill="none" stroke-width="1.5"/>
+            <path d="M360 168 C430 160 490 158 553 160" class="stroke-white/60" fill="none" stroke-width="2" stroke-dasharray="0.1 7" stroke-linecap="round" opacity="0.8"/>
+            <path d="M332 302 C305 300 275 296 246 292" fill="none" stroke="url(#severed-ad)" stroke-width="2" stroke-dasharray="0.1 7" stroke-linecap="round"/>
+            <path d="M388 302 C415 300 445 296 474 292" class="stroke-white/60" fill="none" stroke-width="2" stroke-dasharray="0.1 7" stroke-linecap="round" opacity="0.8"/>
+            {{- /* opacity="0" hides the dot until its motion animation places it; without it the dot flashes at the SVG origin on load. */ -}}
+            <circle class="ad-pulse fill-white/70" r="2.5" opacity="0">
+              <animateMotion dur="3.5s" repeatCount="indefinite" path="M388 302 C415 300 445 296 474 292"/>
+              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.15;0.8;1" dur="3.5s" repeatCount="indefinite"/>
+            </circle>
+            <defs>
+              {{- /* Tailwind has no stop-color utility, so the stops take the color via currentColor. */ -}}
+              <linearGradient id="severed-ad" class="text-white" gradientUnits="userSpaceOnUse" x1="332" y1="302" x2="246" y2="292">
+                <stop offset="0" stop-color="currentColor" stop-opacity="0.8"/>
+                <stop offset="0.85" stop-color="currentColor" stop-opacity="0"/>
+              </linearGradient>
+              <linearGradient id="severed" class="text-white" gradientUnits="userSpaceOnUse" x1="360" y1="175" x2="238" y2="270">
+                <stop offset="0" stop-color="currentColor" stop-opacity="0.6"/>
+                <stop offset="0.85" stop-color="currentColor" stop-opacity="0"/>
+              </linearGradient>
+            </defs>
+            <path d="M360 175 C305 195 258 232 238 270" fill="none" stroke="url(#severed)" stroke-width="1.5" stroke-dasharray="4 5"/>
+            <path d="M270 222 L278 230 M278 222 L270 230" class="stroke-white/60" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+
+          <div class="absolute left-[360px] top-[175px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10">
+            <span class="absolute -top-10 left-1/2 -translate-x-1/2 flex gap-2 pointer-events-none" aria-hidden="true">
+              <span class="relative block w-12 h-14 bg-white shadow-sm ring-1 ring-black/5 -rotate-6 p-1.5 [clip-path:polygon(0_0,calc(100%-10px)_0,100%_10px,100%_100%,0_100%)]">
+                <span class="absolute top-0 right-0 w-[10px] h-[10px] bg-gray-300 [clip-path:polygon(0_0,0_100%,100%_100%)]"></span>
+                <span class="block h-1 w-6 rounded bg-gray-200 mb-1 mt-1"></span>
+                <span class="block h-1 w-8 rounded bg-gray-100 mb-1"></span>
+                <span class="block h-1 w-5 rounded bg-gray-100"></span>
+              </span>
+              <span class="relative block w-12 h-14 rotate-3 mt-1">
+                <span class="absolute inset-0 flex items-center justify-center bg-white shadow-sm ring-1 ring-black/5 [clip-path:polygon(0_0,calc(100%-10px)_0,100%_10px,100%_100%,0_100%)]">
+                  <span class="absolute top-0 right-0 w-[10px] h-[10px] bg-gray-300 [clip-path:polygon(0_0,0_100%,100%_100%)]"></span>
+                  <span class="block font-mono text-[6px] leading-[1.7] tracking-wide text-gray-400 text-center">Zk5r7q<br/>.c9r</span>
+                </span>
+                <span class="absolute -top-1.5 -left-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-white text-[8px] ring-2 ring-white"><i class="fa-solid fa-lock"></i></span>
+              </span>
+            </span>
+            <span class="relative flex flex-col items-center justify-center rounded-2xl bg-white shadow-xl ring-1 ring-black/5 px-6 py-4">
+              <span class="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-black/5" aria-hidden="true">
+                <span class="idp-swap"><img src="/img/clouds/sharepoint.svg" class="h-3.5 w-3.5" alt=""/><img src="/img/clouds/onedrive.svg" class="h-3 w-auto" alt=""/><img src="/img/clouds/google-drive.svg" class="h-3.5 w-auto" alt=""/></span>
+              </span>
+              <i class="fa-solid fa-lock text-hub text-3xl" aria-hidden="true"></i>
+              <span class="mt-2 text-xs font-semibold text-gray-700 leading-tight">{{ i18n "hub_hero_card_vault_name" }}</span>
+              <span class="text-[10px] text-gray-500 leading-tight">{{ i18n "hub_hero_scene_vault" }}</span>
+            </span>
+          </div>
+
+          <div class="absolute left-[220px] top-[55px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-32 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-1.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-white leading-tight">Anna</span>
+            <span class="text-[10px] text-gray-300 leading-tight">{{ i18n "hub_hero_row_owner_desc" }}</span>
+            <span class="mt-1 rounded border border-white/40 bg-white/10 px-1 text-[8px] uppercase tracking-wide text-white">{{ i18n "hub_hero_tag_owner" }}</span>
+          </div>
+
+          <div class="absolute left-[500px] top-[55px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-32 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-3.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-white leading-tight">Lena</span>
+            <span class="text-[10px] text-gray-300 leading-tight">{{ i18n "hub_hero_row_external_desc" }}</span>
+            <span class="mt-1 rounded border border-white/40 bg-white/10 px-1 text-[8px] uppercase tracking-wide text-white">{{ i18n "hub_hero_tag_external" }}</span>
+          </div>
+
+          <div class="absolute left-[85px] top-[160px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-28 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-2.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-white leading-tight">Jonas</span>
+            <div class="relative mt-2 w-full rounded-lg bg-white shadow-sm ring-1 ring-gray-200 p-2.5 text-left">
+              <span class="absolute -top-[5px] left-1/2 -translate-x-1/2 h-2.5 w-2.5 rotate-45 bg-white border-t border-l border-gray-200" aria-hidden="true"></span>
+              <div class="flex items-center gap-1.5 mb-2 text-[9px] font-semibold uppercase tracking-wide text-gray-400"><i class="fa-solid fa-laptop" aria-hidden="true"></i>Jonas' {{ i18n "hub_hero_tile_devices" }}</div>
+              <div class="flex items-center gap-1.5 mb-1 text-[9px] text-gray-500"><i class="fa-solid fa-laptop text-[8px] text-gray-300" aria-hidden="true"></i>MacBook Pro<i class="fa-solid fa-check text-[7px] text-primary ml-auto" aria-hidden="true"></i></div>
+              <div class="flex items-center gap-1.5 text-[9px] text-gray-500"><i class="fa-solid fa-mobile-screen text-[8px] text-gray-300" aria-hidden="true"></i>iPhone 15<i class="fa-solid fa-check text-[7px] text-primary ml-auto" aria-hidden="true"></i></div>
+            </div>
+          </div>
+
+          <div class="absolute left-[505px] top-[310px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-32 text-center">
+            <span class="relative">
+              <span class="flex w-14 h-14 items-center justify-center rounded-full bg-[#ebedef] text-hub text-lg ring-4 ring-white shadow-md"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-white leading-tight">{{ i18n "hub_hero_group_name" }}</span>
+            <span class="text-[10px] text-gray-300 leading-tight">{{ i18n "hub_hero_group_subtitle" }}</span>
+          </div>
+
+          <div class="absolute left-[360px] top-[320px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-44 text-center">
+            <span class="flex w-14 h-14 items-center justify-center rounded-full bg-[#ebedef] text-hub text-lg ring-4 ring-white shadow-md"><i class="fa-solid fa-sitemap" aria-hidden="true"></i></span>
+            <span class="mt-1.5 text-xs font-medium text-white leading-tight idp-swap"><span>Active Directory</span><span>Entra ID</span><span>Okta</span></span>
+            <span class="text-[10px] text-gray-300 leading-tight">{{ i18n "hub_hero_ad_row_users" }} · {{ i18n "hub_hero_ad_row_groups" }}</span>
+          </div>
+
+          <div class="absolute left-[215px] top-[310px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-36 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-4.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md grayscale opacity-60" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-400 text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-xmark" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-gray-300 leading-tight">Michael</span>
+            <span class="text-[10px] text-gray-400 leading-tight">{{ i18n "hub_hero_node_revoked" }}</span>
+          </div>
+
+          <div class="absolute left-[635px] top-[160px] -translate-x-1/2 -translate-y-1/2 z-10 w-40">
+            <div class="rounded-lg bg-white shadow-sm ring-1 ring-gray-200 p-2.5 text-left">
+              <div class="flex items-center gap-1.5 mb-2 text-[9px] font-semibold uppercase tracking-wide text-gray-400"><i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i>{{ i18n "hub_hero_tile_audit" }}</div>
+              <div class="flex items-center gap-1.5 mb-1 text-[9px] text-gray-500"><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70"></span>{{ i18n "hub_hero_audit_row_1" }}</div>
+              <div class="flex items-center gap-1.5 mb-1 text-[9px] text-gray-500"><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70"></span>{{ i18n "hub_hero_audit_row_2" }}</div>
+              <div class="flex items-center gap-1.5 text-[9px] text-gray-500"><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-gray-300"></span>{{ i18n "hub_hero_audit_row_3" }}</div>
+            </div>
+          </div>
+
         </div>
-        <p class="font-p">{{ i18n "hub_header_managed_cta_description" . | safeHTML }}</p>
       </div>
     </header>
-  </section>
+    {{ partial "hero-wave.html" }}
+  </div>
 
   {{ $walbuschPage := .Site.GetPage (printf "/success-stories/walbusch.%s.html" .Language.Lang) }}
   {{ if $walbuschPage }}
@@ -40,7 +164,7 @@ <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
         </cite>
       </p>
       <p class="font-p">
-        <a href="{{ $walbuschPage.RelPermalink }}" class="text-link" data-umami-event="hub-success-story-link">
+        <a href="{{ $walbuschPage.RelPermalink }}" class="text-link-hub" data-umami-event="hub-success-story-link">
           {{ i18n "success_story_read_link" . }} <i class="fa-solid fa-arrow-right"></i>
         </a>
       </p>
@@ -50,7 +174,7 @@ <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
 
   <section class="container py-12">
     <header class="text-center">
-      <h2 id="introduction" class="font-h2 mb-4">{{ i18n "hub_video_title" . }}</h2>
+      <h2 id="introduction" class="font-h2 mb-4 scroll-mt-24">{{ i18n "hub_video_title" . }}</h2>
       <p class="font-p mb-4">{{ i18n "hub_video_description" . }}</p>
     </header>
 
@@ -64,7 +188,7 @@ <h2 id="introduction" class="font-h2 mb-4">{{ i18n "hub_video_title" . }}</h2>
   <section class="container py-12">
     <div class="flex flex-wrap mb-24">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
-        <img data-src="/img/hub/screenshot-1.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_1_alt" }}"/>
+        <img data-src="/img/hub/workflow-1-vaults.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_1_alt" }}"/>
       </figure>
       <div class="w-full md:w-1/2 md:pl-6">
         <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_1_title" }}</h2>
@@ -74,7 +198,7 @@ <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_1_title" }}</h2>
     
     <div class="flex flex-wrap mb-24 md:flex-row-reverse">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pl-6">
-        <img data-src="/img/hub/screenshot-2.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_2_alt" }}"/>
+        <img data-src="/img/hub/workflow-2-access.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_2_alt" }}"/>
       </figure>
       <div class="w-full md:w-1/2 md:pr-6">
         <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_2_title" }}</h2>
@@ -84,13 +208,23 @@ <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_2_title" }}</h2>
     
     <div class="flex flex-wrap">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
-        <img data-src="/img/hub/screenshot-3.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_3_alt" }}"/>
+        <img data-src="/img/hub/workflow-3-unlock.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_3_alt" }}"/>
       </figure>
       <div class="w-full md:w-1/2 md:pl-6">
         <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_3_title" }}</h2>
         <p class="lead">{{ i18n "hub_workflow_step_3_description" }}</p>
       </div>
     </div>
+
+    <div class="flex flex-wrap mt-24 md:flex-row-reverse">
+      <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pl-6">
+        <img data-src="/img/hub/workflow-4-audit.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_4_alt" }}"/>
+      </figure>
+      <div class="w-full md:w-1/2 md:pr-6">
+        <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_4_title" }}</h2>
+        <p class="lead">{{ i18n "hub_workflow_step_4_description" }}</p>
+      </div>
+    </div>
   </section>
 
   <section class="container py-12">
@@ -101,8 +235,8 @@ <h2 id="features" class="font-h2 mb-4">{{ i18n "hub_features_title" . }}</h2>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-key text-primary"></i> {{ i18n "hub_features_feature_1_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-hub">
+          <h3 class="font-h3"><i class="fa-solid fa-key text-hub"></i> {{ i18n "hub_features_feature_1_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_1_description" . | safeHTML }}</p>
@@ -110,8 +244,8 @@ <h3 class="font-h3"><i class="fa-solid fa-key text-primary"></i> {{ i18n "hub_fe
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-shield-check text-primary"></i> {{ i18n "hub_features_feature_2_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-hub">
+          <h3 class="font-h3"><i class="fa-solid fa-shield-check text-hub"></i> {{ i18n "hub_features_feature_2_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_2_description" . | safeHTML }}</p>
@@ -119,8 +253,8 @@ <h3 class="font-h3"><i class="fa-solid fa-shield-check text-primary"></i> {{ i18
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-lock-alt text-primary"></i> {{ i18n "hub_features_feature_3_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-hub">
+          <h3 class="font-h3"><i class="fa-solid fa-lock-alt text-hub"></i> {{ i18n "hub_features_feature_3_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_3_description" . | safeHTML }}</p>
@@ -128,8 +262,8 @@ <h3 class="font-h3"><i class="fa-solid fa-lock-alt text-primary"></i> {{ i18n "h
       </div>
 
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-cloud text-primary"></i> {{ i18n "hub_features_feature_4_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-hub">
+          <h3 class="font-h3"><i class="fa-solid fa-cloud text-hub"></i> {{ i18n "hub_features_feature_4_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_4_description" . | safeHTML }}</p>
@@ -137,8 +271,8 @@ <h3 class="font-h3"><i class="fa-solid fa-cloud text-primary"></i> {{ i18n "hub_
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-code text-primary"></i> {{ i18n "hub_features_feature_5_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-hub">
+          <h3 class="font-h3"><i class="fa-solid fa-code text-hub"></i> {{ i18n "hub_features_feature_5_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_5_description" . | safeHTML }}</p>
@@ -146,8 +280,8 @@ <h3 class="font-h3"><i class="fa-solid fa-code text-primary"></i> {{ i18n "hub_f
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-shield-alt text-primary"></i> {{ i18n "hub_features_feature_6_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-hub">
+          <h3 class="font-h3"><i class="fa-solid fa-shield-alt text-hub"></i> {{ i18n "hub_features_feature_6_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_6_description" . | safeHTML }}</p>
@@ -160,7 +294,7 @@ <h3 class="font-h3"><i class="fa-solid fa-shield-alt text-primary"></i> {{ i18n
     <div class="max-w-3xl mx-auto">
       <h2 id="pricing-plans" class="font-h2 mb-4">{{ i18n "hub_pricing_title" . }}</h2>
       <p class="font-p mb-4">{{ i18n "hub_pricing_description" . }}</p>
-      <a href="{{ .Site.LanguagePrefix }}/pricing/" role="button" class="btn btn-primary px-8" data-umami-event="hub-pricing">
+      <a href="{{ .Site.LanguagePrefix }}/pricing/" role="button" class="btn btn-hub px-8" data-umami-event="hub-pricing">
         {{ i18n "hub_pricing_button" . }}
       </a>
     </div>
@@ -171,9 +305,9 @@ <h2 id="deployment" class="text-center font-h2 mb-4">{{ i18n "hub_deployment_tit
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div class="flex flex-col white-box ring-2 ring-secondary">
-        <div class="flex justify-between items-center p-4 border-b border-primary">
+        <div class="flex justify-between items-center p-4 border-b border-hub">
           <h3 class="font-h3">
-            <i class="fa-solid fa-cloud text-primary"></i> {{ i18n "pricing_hub_managed_title" . }}
+            <i class="fa-solid fa-cloud text-hub"></i> {{ i18n "pricing_hub_managed_title" . }}
           </h3>
           <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-secondary text-white">
             <i class="fa-solid fa-star"></i>
@@ -187,29 +321,29 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
             </h4>
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "hub_deployment_managed_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "hub_deployment_managed_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "hub_deployment_managed_benefit_3" . }}</span>
               </li>
             </ul>
           </div>
-          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary w-full lg:w-96" data-umami-event="hub-deployment-managed-cta">
+          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-hub w-full lg:w-96" data-umami-event="hub-deployment-managed-cta">
             {{ i18n "pricing_hub_managed_cta" . }}
           </a>
         </div>
       </div>
 
       <div class="flex flex-col white-box">
-        <div class="p-4 border-b border-primary">
+        <div class="p-4 border-b border-hub">
           <h3 class="font-h3">
-            <i class="fa-solid fa-server text-primary"></i> {{ i18n "pricing_hub_self_hosted_title" . }}
+            <i class="fa-solid fa-server text-hub"></i> {{ i18n "pricing_hub_self_hosted_title" . }}
           </h3>
         </div>
         <div class="flex flex-col justify-between h-full gap-8 px-4 py-8">
@@ -219,20 +353,20 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
             </h4>
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "hub_deployment_self_hosted_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "hub_deployment_self_hosted_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "hub_deployment_self_hosted_benefit_3" . }}</span>
               </li>
             </ul>
           </div>
-          <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-primary w-full lg:w-96" data-umami-event="hub-deployment-self-hosted-cta">
+          <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-hub w-full lg:w-96" data-umami-event="hub-deployment-self-hosted-cta">
             {{ i18n "pricing_hub_self_hosted_cta" . }}
           </a>
         </div>
@@ -264,7 +398,7 @@ <h2 id="faq" class="font-h2 mb-4">{{ i18n "faq_title" . }}</h2>
   <section class="container text-center py-12">
     <h2 id="contact" class="font-h2 mb-4">{{ i18n "hub_contact_us_title" . }}</h2>
     <p class="font-p mb-4">{{ i18n "hub_contact_us_description" . | safeHTML }}</p>
-    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8" data-umami-event="hub-contact-us">
+    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-hub px-8" data-umami-event="hub-contact-us">
       <i class="fa-solid fa-envelope"></i> {{ i18n "hub_contact_us_button" . }}
     </a>
   </section>
@@ -276,7 +410,7 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "hub_newsletter_title" . }}</h2
       <p class="font-p mb-4">{{ i18n "hub_newsletter_instruction" . | safeHTML }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
         <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow input-box rounded-r-none focus:border-secondary" placeholder="{{ i18n "hub_newsletter_email_placeholder" }}" required/>
-        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="hub-newsletter-form">
+        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-hub rounded-l-none px-4" data-umami-event="hub-newsletter-form">
           <i :class="{'fa-envelope': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "hub_newsletter_subscribe" }}
         </button>
 
@@ -292,8 +426,8 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "hub_newsletter_title" . }}</h2
     </div>
 
     <div class="flex justify-center gap-2">
-      <a class="text-gray-600 hover:text-primary" href="https://mastodon.online/@cryptomator" aria-label="Cryptomator on Mastodon" target="_blank" rel="noopener" data-umami-event="hub-mastodon"><i class="fa-brands fa-mastodon text-2xl"></i></a>
-      <a class="text-gray-600 hover:text-primary" href="https://www.linkedin.com/company/skymatic/" aria-label="Skymatic on LinkedIn" target="_blank" rel="noopener" data-umami-event="hub-linkedin"><i class="fa-brands fa-linkedin text-2xl"></i></a>
+      <a class="text-gray-600 hover:text-hub" href="https://mastodon.online/@cryptomator" aria-label="Cryptomator on Mastodon" target="_blank" rel="noopener" data-umami-event="hub-mastodon"><i class="fa-brands fa-mastodon text-2xl"></i></a>
+      <a class="text-gray-600 hover:text-hub" href="https://www.linkedin.com/company/skymatic/" aria-label="Skymatic on LinkedIn" target="_blank" rel="noopener" data-umami-event="hub-linkedin"><i class="fa-brands fa-linkedin text-2xl"></i></a>
     </div>
   </section>
 {{ end }}
diff --git a/layouts/hub-billing/single.html b/layouts/hub-billing/single.html
index 352614c37..110e18137 100644
--- a/layouts/hub-billing/single.html
+++ b/layouts/hub-billing/single.html
@@ -59,7 +59,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
                     {{ i18n "hub_billing_createsession_found_description" . }}
                     <span x-text="subscriptionData.redactedEmail" class="font-medium whitespace-nowrap"></span>
                   </p>
-                  <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64">
+                  <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-hub w-full md:w-64">
                     <i :class="{'fa-paper-plane': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_billing_createsession_submit" . }}
                   </button>
@@ -73,7 +73,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
                   </p>
                   <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
                     <input x-model="subscriptionData.email" :required="subscriptionData.needsEmail" type="email" class="grow rounded-l border-gray-300 focus:ring-0 focus:border-secondary" placeholder="{{ i18n "hub_billing_createsession_email_placeholder" . }}"/>
-                    <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4">
+                    <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-hub rounded-l-none px-4">
                       <i :class="{'fa-paper-plane': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                       {{ i18n "hub_billing_createsession_submit" . }}
                     </button>
@@ -122,7 +122,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
             {{ i18n "hub_billing_loadfailed_description" . }}
           </p>
           <p class="text-sm text-red-600 mb-4" x-text="subscriptionData.errorMessage"></p>
-          <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8">
+          <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-hub px-8">
             <i class="fa-solid fa-envelope"></i> {{ i18n "hub_contact_us_button" . }}
           </a>
         </div>
@@ -159,7 +159,7 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   {{ i18n "hub_billing_manage_status_quantity_description" . }}: <span x-text="subscriptionData.details.seats"></span>
                 </p>
                 <p class="mt-2">
-                  <button type="button" :disabled="subscriptionData.details.status == 'CANCELLED' || subscriptionData.inProgress" @click.prevent="hubSubscription.openChangeSeatsModal()" class="text-xs text-btn text-primary">
+                  <button type="button" :disabled="subscriptionData.details.status == 'CANCELLED' || subscriptionData.inProgress" @click.prevent="hubSubscription.openChangeSeatsModal()" class="text-xs text-btn text-hub">
                     <i class="fa-solid fa-arrows-v"></i>
                     {{ i18n "hub_billing_manage_status_quantity_action" . }}
                   </button>
@@ -186,11 +186,11 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   </div>
                 </template>
                 <p x-show="subscriptionData.details.processor == 'PADDLE_CLASSIC'" class="mt-2">
-                  <button type="button" x-show="subscriptionData.details.status == 'ACTIVE' || subscriptionData.details.status == 'TRIAL'" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.pause()" class="text-xs text-btn text-primary">
+                  <button type="button" x-show="subscriptionData.details.status == 'ACTIVE' || subscriptionData.details.status == 'TRIAL'" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.pause()" class="text-xs text-btn text-hub">
                     <i class="fa-solid fa-pause"></i>
                     {{ i18n "hub_billing_manage_next_payment_pause_action" . }}
                   </button>
-                  <button type="button" x-show="subscriptionData.details.status == 'PAUSED'" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.askForRestartConfirmation()" class="text-xs text-btn text-primary">
+                  <button type="button" x-show="subscriptionData.details.status == 'PAUSED'" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.askForRestartConfirmation()" class="text-xs text-btn text-hub">
                     <i class="fa-solid fa-play"></i>
                     {{ i18n "hub_billing_manage_next_payment_restart_action" . }}
                   </button>
@@ -209,7 +209,7 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   {{ i18n "hub_billing_manage_payment_info_invoice" . }}
                 </p>
                 <p x-show="subscriptionData.details.processor == 'PADDLE_CLASSIC'" class="mt-2">
-                  <button type="button" :disabled="subscriptionData.inProgress || subscriptionData.details.status == 'CANCELLED'" @click.prevent="hubSubscription.updatePaymentMethod('{{ .Site.Language.Lang }}')" class="text-xs text-btn text-primary">
+                  <button type="button" :disabled="subscriptionData.inProgress || subscriptionData.details.status == 'CANCELLED'" @click.prevent="hubSubscription.updatePaymentMethod('{{ .Site.Language.Lang }}')" class="text-xs text-btn text-hub">
                     <i class="fa-solid fa-external-link"></i>
                     {{ i18n "hub_billing_manage_payment_info_update_action" . }}
                   </button>
@@ -229,9 +229,9 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   <div class="p-4">
                     <div class="md:flex md:items-start">
                       <div class="shrink-0 text-center">
-                        <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+                        <div class="fa-stack text-2xl text-hub/15 md:text-xl">
                           <i class="fa-solid fa-circle fa-stack-2x"></i>
-                          <i class="fa-solid fa-play fa-stack-1x text-primary"></i>
+                          <i class="fa-solid fa-play fa-stack-1x text-hub"></i>
                         </div>
                       </div>
                       <div class="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
@@ -245,8 +245,8 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="restart-m
                       </div>
                     </div>
                   </div>
-                  <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-                    <button :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.restart()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                  <div class="border-t border-hub p-4 md:flex md:flex-row-reverse md:items-center">
+                    <button :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.restart()" type="button" class="btn btn-hub shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                       <i :class="{'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                       {{ i18n "hub_billing_manage_modal_confirm" . }}
                     </button>
@@ -268,9 +268,9 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="restart-m
                   <div class="p-4">
                     <div class="md:flex md:items-start">
                       <div class="shrink-0 text-center">
-                        <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+                        <div class="fa-stack text-2xl text-hub/15 md:text-xl">
                           <i class="fa-solid fa-circle fa-stack-2x"></i>
-                          <i class="fa-solid fa-arrows-v fa-stack-1x text-primary"></i>
+                          <i class="fa-solid fa-arrows-v fa-stack-1x text-hub"></i>
                         </div>
                       </div>
                       <div class="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
@@ -301,13 +301,13 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                                   {{ i18n "hub_billing_manage_change_quantity_confirmation_increase_warning" . }}
                                 </p>
                                 <p class="font-p mb-4">
-                                  <i class="fa-solid fa-calendar text-primary"></i>
+                                  <i class="fa-solid fa-calendar text-hub"></i>
                                   {{ i18n "hub_billing_manage_next_payment_date_description" . }}: <span x-text="subscriptionData.changeSeatsModal.nextPayment ? new Date(subscriptionData.changeSeatsModal.nextPayment.date).toLocaleDateString('{{ .Site.Language.Lang }}') : '…'"></span>
                                 </p>
                               </div>
                             </template>
                             <p x-show="subscriptionData.details.processor == 'ESPOCRM'" class="font-p mb-4">
-                              <i class="fa-solid fa-file-invoice text-primary"></i>
+                              <i class="fa-solid fa-file-invoice text-hub"></i>
                               {{ i18n "hub_billing_manage_change_quantity_confirmation_increase_warning_invoice" . }}
                             </p>
                           </div>
@@ -326,20 +326,20 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                           <template x-if="subscriptionData.details.processor == 'ESPOCRM' && subscriptionData.changeSeatsModal.invoicePreview">
                             <div>
                               <p x-show="subscriptionData.changeSeatsModal.invoicePreview.prorated_amount > 0" class="font-p mb-4">
-                                <i class="fa-solid fa-money-bill text-primary"></i>
+                                <i class="fa-solid fa-money-bill text-hub"></i>
                                 {{ i18n "hub_billing_manage_change_quantity_confirmation_prorated_invoice" . }}: <span class="font-bold" x-text="Number(subscriptionData.changeSeatsModal.invoicePreview.prorated_amount).toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: subscriptionData.changeSeatsModal.invoicePreview.currency })"></span>{{ $inclVat }}
                               </p>
                               <p x-show="subscriptionData.changeSeatsModal.invoicePreview.credited_amount > 0" class="font-p mb-4">
-                                <i class="fa-solid fa-money-bill text-primary"></i>
+                                <i class="fa-solid fa-money-bill text-hub"></i>
                                 {{ i18n "hub_billing_manage_change_quantity_confirmation_credited_invoice" . }}: <span class="font-bold" x-text="Number(subscriptionData.changeSeatsModal.invoicePreview.credited_amount).toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: subscriptionData.changeSeatsModal.invoicePreview.currency })"></span>{{ $inclVat }}
                               </p>
                               {{/* no VAT note here: available credit pools the account's credit notes, which need not share this subscription's tax */}}
                               <p x-show="subscriptionData.changeSeatsModal.invoicePreview.available_credit > 0" class="font-p mb-4">
-                                <i class="fa-solid fa-info-circle text-primary"></i>
+                                <i class="fa-solid fa-info-circle text-hub"></i>
                                 {{ i18n "hub_billing_manage_change_quantity_confirmation_available_credit_invoice" . }}: <span class="font-bold" x-text="Number(subscriptionData.changeSeatsModal.invoicePreview.available_credit).toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: subscriptionData.changeSeatsModal.invoicePreview.currency })"></span>
                               </p>
                               <p class="font-p mb-4">
-                                <i class="fa-solid fa-rotate text-primary"></i>
+                                <i class="fa-solid fa-rotate text-hub"></i>
                                 {{ i18n "hub_billing_manage_change_quantity_confirmation_new_recurring_invoice" . }}: <span class="font-bold" x-text="Number(subscriptionData.changeSeatsModal.invoicePreview.recurring_amount).toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: subscriptionData.changeSeatsModal.invoicePreview.currency })"></span>
                               </p>
                             </div>
@@ -348,13 +348,13 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                       </div>
                     </div>
                   </div>
-                  <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-                    <button x-show="!subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.quantity == subscriptionData.details.seats" @click.prevent="hubSubscription.askForChangeSeatsConfirmation()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                  <div class="border-t border-hub p-4 md:flex md:flex-row-reverse md:items-center">
+                    <button x-show="!subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.quantity == subscriptionData.details.seats" @click.prevent="hubSubscription.askForChangeSeatsConfirmation()" type="button" class="btn btn-hub shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                       <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                       {{ i18n "hub_billing_manage_modal_continue" . }}
                     </button>
                     {{/* Paddle Classic fills nextPayment and EspoCRM fills invoicePreview, so a quote arrived when either is set. The customer must not commit a change whose price the page cannot show. */}}
-                    <button x-show="subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.inProgress || !(subscriptionData.changeSeatsModal.invoicePreview || subscriptionData.changeSeatsModal.nextPayment)" @click.prevent="hubSubscription.changeQuantity()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                    <button x-show="subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.inProgress || !(subscriptionData.changeSeatsModal.invoicePreview || subscriptionData.changeSeatsModal.nextPayment)" @click.prevent="hubSubscription.changeQuantity()" type="button" class="btn btn-hub shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                       <i :class="{'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                       {{ i18n "hub_billing_manage_modal_confirm" . }}
                     </button>
@@ -429,7 +429,7 @@ <h3 class="label-uppercase mb-4" id="invoice-checkout-modal-title">
                             <p class="text-sm text-red-600 mb-2">
                               {{ i18n "hub_billing_checkout_invoice_price_error" . }}
                             </p>
-                            <button type="button" @click.prevent="hubSubscription.loadInvoicePrice()" class="text-sm text-btn text-primary">
+                            <button type="button" @click.prevent="hubSubscription.loadInvoicePrice()" class="text-sm text-btn text-hub">
                               <i class="fa-solid fa-rotate-right"></i>
                               {{ i18n "hub_billing_checkout_invoice_price_retry" . }}
                             </button>
@@ -516,8 +516,8 @@ <h3 class="label-uppercase mb-4" id="invoice-checkout-modal-title">
                         </div>
                       </div>
                     </div>
-                    <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-                      <button id="invoice-buy-button" :disabled="subscriptionData.inProgress || !acceptTerms || !subscriptionData.invoicePrice || subscriptionData.invoicePriceLoading" @click.prevent="hubSubscription.startInvoiceCheckout()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                    <div class="border-t border-hub p-4 md:flex md:flex-row-reverse md:items-center">
+                      <button id="invoice-buy-button" :disabled="subscriptionData.inProgress || !acceptTerms || !subscriptionData.invoicePrice || subscriptionData.invoicePriceLoading" @click.prevent="hubSubscription.startInvoiceCheckout()" type="button" class="btn btn-hub shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                         <i :class="{'fa-file-invoice': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                         {{ i18n "hub_billing_checkout_invoice_submit" . }}
                       </button>
@@ -549,8 +549,8 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
             </div>
             <div class="hidden md:block"></div>
             <div x-show="subscriptionData.oldLicense && !subscriptionData.customBilling?.managed" class="flex flex-col white-box">
-              <div class="p-4 border-b border-primary">
-                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
+              <div class="p-4 border-b border-hub">
+                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub mb-4">
                   {{ i18n "hub_billing_checkout_community_title" . }}
                 </h2>
                 <div x-show="!subscriptionData.customBilling?.override?.prices" class="lg:h-[22px]"></div>
@@ -567,15 +567,15 @@ <h3 class="font-h3 mb-4 md:mb-0">
                     {{ i18n "hub_billing_checkout_community_subtitle" . }}
                   </h3>
                   <div class="mb-4 md:my-auto lg:max-w-sm">
-                    <div class="fa-stack text-5xl text-primary-l2 mb-4">
+                    <div class="fa-stack text-5xl text-hub/15 mb-4">
                       <i class="fa-solid fa-circle fa-stack-2x"></i>
-                      <i class="fa-solid fa-people-group fa-stack-1x text-primary"></i>
+                      <i class="fa-solid fa-people-group fa-stack-1x text-hub"></i>
                     </div>
                     <p class="font-p">
                       {{ i18n "hub_billing_checkout_community_cta" . }}
                     </p>
                   </div>
-                  <a :href="`{{ "hub/register" | relLangURL }}#oldLicense=${encodeURIComponent(subscriptionData.oldLicense)}&returnUrl=${encodeURIComponent(subscriptionData.returnUrl)}`" role="button" class="btn btn-primary w-full">
+                  <a :href="`{{ "hub/register" | relLangURL }}#oldLicense=${encodeURIComponent(subscriptionData.oldLicense)}&returnUrl=${encodeURIComponent(subscriptionData.returnUrl)}`" role="button" class="btn btn-hub w-full">
                     <i class="fa-solid fa-user-plus"></i>
                     {{ i18n "hub_billing_checkout_community_action" . }}
                   </a>
@@ -583,15 +583,15 @@ <h3 class="font-h3 mb-4 md:mb-0">
               </div>
             </div>
             <div class="white-box">
-              <div class="p-4 border-b border-primary">
-                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
+              <div class="p-4 border-b border-hub">
+                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub mb-4">
                   {{ i18n "hub_billing_checkout_standard_title" . }}
                 </h2>
                 <div x-show="!subscriptionData.customBilling?.override?.prices" class="flex items-center gap-2">
                   <span class="uppercase tracking-wide text-xs font-bold cursor-pointer" :class="subscriptionData.billingInterval === 'monthly' ? 'text-gray-700' : 'text-gray-500'" @click="if (subscriptionData.paymentMethod !== 'invoice') subscriptionData.billingInterval = 'monthly'">
                     {{ i18n "hub_billing_monthly" . }}
                   </span>
-                  <button type="button" class="relative inline-flex h-4 w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-1 focus:ring-primary focus:ring-offset-1" role="switch" :disabled="subscriptionData.paymentMethod === 'invoice'" :class="subscriptionData.paymentMethod === 'invoice' && 'opacity-50 cursor-not-allowed'" @click.prevent="if (subscriptionData.paymentMethod !== 'invoice') subscriptionData.billingInterval = subscriptionData.billingInterval === 'monthly' ? 'yearly' : 'monthly'">
+                  <button type="button" class="relative inline-flex h-4 w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-hub transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-1 focus:ring-hub focus:ring-offset-1" role="switch" :disabled="subscriptionData.paymentMethod === 'invoice'" :class="subscriptionData.paymentMethod === 'invoice' && 'opacity-50 cursor-not-allowed'" @click.prevent="if (subscriptionData.paymentMethod !== 'invoice') subscriptionData.billingInterval = subscriptionData.billingInterval === 'monthly' ? 'yearly' : 'monthly'">
                     <span class="sr-only">Toggle billing interval</span>
                     <span aria-hidden="true" class="pointer-events-none inline-block size-3 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out" :class="subscriptionData.billingInterval === 'monthly' ? 'translate-x-0' : 'translate-x-4'"></span>
                   </button>
@@ -682,7 +682,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
                       <p x-show="!subscriptionData.customBilling?.managed" class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_terms_and_privacy" | safeHTML)) }}</p>
                       {{ $cardChallengeUrl := printf "%s/billing/paddle-classic/checkout/challenge" .Site.Params.apiBaseUrl }}
                       {{ partial "captcha.html" (dict "challengeUrl" $cardChallengeUrl "captchaPayload" "subscriptionData.cardCaptcha" "captchaState" "captchaState" "ref" "cardCaptcha") }}
-                      <button :disabled="subscriptionData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
+                      <button :disabled="subscriptionData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-hub w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
                         <i :class="{'fa-shopping-cart': !subscriptionData.inProgress, 'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                         {{ i18n "hub_billing_checkout_standard_submit" . }}
                       </button>
@@ -698,7 +698,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
                     <p class="text-xs text-gray-600 mb-4">
                       {{ i18n "hub_billing_checkout_invoice_non_eu_hint" . }}
                     </p>
-                    <button type="button" @click.prevent="hubSubscription.openInvoiceCheckoutModal()" class="btn btn-primary w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
+                    <button type="button" @click.prevent="hubSubscription.openInvoiceCheckoutModal()" class="btn btn-hub w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
                       <i class="fa-solid fa-shopping-cart" aria-hidden="true"></i>
                       {{ i18n "hub_billing_checkout_standard_submit" . }}
                     </button>
@@ -708,8 +708,8 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
               </div>
             </div>
             <div class="flex flex-col white-box">
-              <div class="p-4 border-b border-primary">
-                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
+              <div class="p-4 border-b border-hub">
+                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub mb-4">
                   {{ i18n "hub_billing_checkout_enterprise_title" . }}
                 </h2>
                 <div x-show="!subscriptionData.customBilling?.override?.prices" class="lg:h-[22px]"></div>
@@ -726,15 +726,15 @@ <h3 class="font-h3 mb-4 md:mb-0">
                     {{ i18n "hub_billing_checkout_enterprise_subtitle" . }}
                   </h3>
                   <div class="mb-4 md:my-auto lg:max-w-sm">
-                    <div class="fa-stack text-5xl text-primary-l2 mb-4">
+                    <div class="fa-stack text-5xl text-hub/15 mb-4">
                       <i class="fa-solid fa-circle fa-stack-2x"></i>
-                      <i class="fa-solid fa-building fa-stack-1x text-primary"></i>
+                      <i class="fa-solid fa-building fa-stack-1x text-hub"></i>
                     </div>
                     <p class="font-p">
                       {{ i18n "hub_billing_checkout_enterprise_cta" . }}
                     </p>
                   </div>
-                  <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-primary w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
+                  <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-hub w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
                     <i class="fa-solid fa-envelope"></i>
                     {{ i18n "hub_billing_checkout_enterprise_action" . }}
                   </a>
@@ -766,11 +766,11 @@ <h2 class="font-h2 mb-4 mt-24">{{ i18n "faq_title" . }}</h2>
             <h1 class="font-h1">{{ .Title }}</h1>
           </header>
           <p class="font-p mb-4">
-            <i class="fa-solid fa-circle-check text-primary"></i>
+            <i class="fa-solid fa-circle-check text-hub"></i>
             {{ i18n "hub_billing_checkout_success_description" . }}
           </p>
           <p x-show="subscriptionData.paymentMethod == 'invoice'" class="font-p mb-4">
-            <i class="fa-solid fa-file-invoice text-primary"></i>
+            <i class="fa-solid fa-file-invoice text-hub"></i>
             {{ i18n "hub_billing_checkout_success_invoice_description" . }}
           </p>
           {{ partial "hub-license-block.html" . }}
diff --git a/layouts/hub-demo/single.html b/layouts/hub-demo/single.html
index 5809ba7f5..d9e940e98 100644
--- a/layouts/hub-demo/single.html
+++ b/layouts/hub-demo/single.html
@@ -40,7 +40,7 @@ <h3 class="font-h3">
           </h3>
           <dl class="grid auto-cols-min gap-x-4 mx-auto font-p">
             <dt class="text-right col-start-1">{{ i18n "hub_demo_success_url" }}:</dt>
-            <dd class="text-left col-start-2"><a class="text-link" :href="feedbackData.url" x-text="feedbackData.url" target="_blank" rel="noopener"></a></dd>
+            <dd class="text-left col-start-2"><a class="text-link-hub" :href="feedbackData.url" x-text="feedbackData.url" target="_blank" rel="noopener"></a></dd>
 
             <dt class="text-right col-start-1">{{ i18n "hub_demo_success_username" }}:</dt>
             <dd class="text-left col-start-2"><code x-text="feedbackData.username"></code></dd>
@@ -61,7 +61,7 @@ <h3 class="font-h3">
         <p class="font-p mb-4">
           {{ i18n "hub_demo_instruction" }}
         </p>
-        <button :disabled="feedbackData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" x-cloak>
+        <button :disabled="feedbackData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-hub w-full md:w-64" x-cloak>
           <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "hub_demo_submit" }}
         </button>
         {{ $challengeUrl := printf "%s/connect/store/challenge" .Site.Params.apiBaseUrl }}
@@ -74,7 +74,7 @@ <h3 class="font-h3">
   <section class="container text-center py-12">
     <h2 class="font-h2 mb-4">{{ i18n "hub_demo_contact_us_title" . }}</h2>
     <p class="font-p mb-4">{{ i18n "hub_demo_contact_us_description" . | safeHTML }}</p>
-    <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-primary px-8">
+    <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-hub px-8">
       <i class="fa-solid fa-envelope"></i> {{ i18n "hub_demo_contact_us_button" . }}
     </a>
   </section>
diff --git a/layouts/hub-managed/single.html b/layouts/hub-managed/single.html
index a5c1c11d3..1e276c0af 100644
--- a/layouts/hub-managed/single.html
+++ b/layouts/hub-managed/single.html
@@ -24,7 +24,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                       <a href="#" class="group" @click.prevent="feedbackData.currentStep = index" :data-umami-event="`hub-managed-nav-step-${index + 1}`">
                         <span class="flex items-center gap-3">
                           <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
-                            <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <svg class="w-full h-full text-hub group-hover:text-dark" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                               <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                             </svg>
                           </div>
@@ -37,10 +37,10 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                     <template x-if="index === feedbackData.currentStep">
                       <div class="flex items-center gap-3" aria-current="step">
                         <div class="relative flex w-5 h-5 shrink-0 items-center justify-center" aria-hidden="true">
-                          <span class="absolute w-4 h-4 rounded-full bg-primary-l2"></span>
-                          <span class="relative block w-2 h-2 rounded-full bg-primary"></span>
+                          <span class="absolute w-4 h-4 rounded-full bg-hub/15"></span>
+                          <span class="relative block w-2 h-2 rounded-full bg-hub"></span>
                         </div>
-                        <p class="hidden md:block font-p text-sm font-medium text-primary" x-text="step"></p>
+                        <p class="hidden md:block font-p text-sm font-medium text-hub" x-text="step"></p>
                       </div>
                     </template>
 
@@ -72,7 +72,7 @@ <h2 class="font-h2 mb-6">
                 <input type="email" id="email" class="block input-box w-full mb-8" placeholder="{{ i18n "hub_managed_step_1_email_placeholder" }}" x-init="$el.focus()" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateEmail()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-step-1">
+                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateEmail()" class="btn btn-hub w-full md:w-64" data-umami-event="hub-managed-step-1">
                     <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_steps_next" }}
                   </button>
@@ -101,7 +101,7 @@ <h2 class="font-h2 mb-6">
                 <input type="text" class="block input-box w-full mb-8" :value="submitData.subdomain ? subdomainToURL(submitData.subdomain) : 'https://<{{ i18n "hub_managed_step_2_subdomain_placeholder" }}>.{{ .Site.Params.hubManagedDomain }}'" readonly>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateSubdomain()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-step-2">
+                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateSubdomain()" class="btn btn-hub w-full md:w-64" data-umami-event="hub-managed-step-2">
                     <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_steps_next" }}
                   </button>
@@ -126,7 +126,7 @@ <h2 class="font-h2 mb-6">
                 <input type="number" id="quantity" min="1" max="10000" step="1" class="block input-box w-full mb-8" placeholder="{{ i18n "hub_managed_step_3_quantity_placeholder" }}" x-init="$el.focus()" x-model="submitData.quantity" @blur="$el.classList.add('show-invalid')" required>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress" @click.prevent="submitData.quantity > 0 && submitData.quantity < 3 ? lowQuantityModalIsOpen = true : hubManaged.validateQuantity()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-step-3">
+                  <button :disabled="feedbackData.inProgress" @click.prevent="submitData.quantity > 0 && submitData.quantity < 3 ? lowQuantityModalIsOpen = true : hubManaged.validateQuantity()" class="btn btn-hub w-full md:w-64" data-umami-event="hub-managed-step-3">
                     <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_steps_next" }}
                   </button>
@@ -168,7 +168,7 @@ <h2 class="font-h2 mb-6">
                     <span class="font-p text-sm text-gray-500">
                       {{ i18n "hub_managed_step_4_phone" }}
                     </span>
-                    <a x-show="submitData.phone == null" href="#" class="font-p text-link text-sm" @click.prevent="submitData.phone = ''">
+                    <a x-show="submitData.phone == null" href="#" class="font-p text-link-hub text-sm" @click.prevent="submitData.phone = ''">
                       <i class="fa-solid fa-plus-circle"></i>
                       {{ i18n "hub_managed_step_4_phone_add" }}
                     </a>
@@ -178,7 +178,7 @@ <h2 class="font-h2 mb-6">
                     <span class="font-p text-sm text-gray-500">
                       {{ i18n "hub_managed_step_4_message" }}
                     </span>
-                    <a x-show="submitData.message == null" href="#" class="font-p text-link text-sm" @click.prevent="submitData.message = ''">
+                    <a x-show="submitData.message == null" href="#" class="font-p text-link-hub text-sm" @click.prevent="submitData.message = ''">
                       <i class="fa-solid fa-plus-circle"></i>
                       {{ i18n "hub_managed_step_4_message_add" }}
                     </a>
@@ -193,7 +193,7 @@ <h2 class="font-h2 mb-6">
                 </p>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
+                  <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-hub w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
                     <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_step_4_submit" }}
                   </button>
@@ -229,7 +229,7 @@ <h3 class="font-h3">
   <section class="container text-center pt-12 pb-24">
     <h2 class="font-h2 mb-4">{{ i18n "hub_managed_contact_us_title" . }}</h2>
     <p class="font-p mb-4">{{ i18n "hub_managed_contact_us_description" . | safeHTML }}</p>
-    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8" data-umami-event="hub-managed-contact-us">
+    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-hub px-8" data-umami-event="hub-managed-contact-us">
       <i class="fa-solid fa-envelope"></i> {{ i18n "hub_managed_contact_us_button" . }}
     </a>
   </section>
diff --git a/layouts/hub-register/single.html b/layouts/hub-register/single.html
index d9f4a4f04..31cbbb2b4 100644
--- a/layouts/hub-register/single.html
+++ b/layouts/hub-register/single.html
@@ -23,7 +23,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                   <a href="#" class="group" @click.prevent="feedbackData.currentStep = index" :data-umami-event="`hub-managed-nav-step-${index + 1}`">
                     <span class="flex items-center gap-3">
                       <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
-                        <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <svg class="w-full h-full text-hub group-hover:text-dark" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                           <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                         </svg>
                       </div>
@@ -35,7 +35,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                 <template x-if="index < feedbackData.currentStep &amp;&amp; (feedbackData.success || feedbackData.emailSent)">
                   <span class="flex items-center gap-3">
                     <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
-                      <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <svg class="w-full h-full text-hub group-hover:text-dark" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                       </svg>
                     </div>
@@ -47,10 +47,10 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                 <template x-if="index === feedbackData.currentStep">
                   <div class="flex items-center gap-3" aria-current="step">
                     <div class="relative flex w-5 h-5 shrink-0 items-center justify-center" aria-hidden="true">
-                      <span class="absolute w-4 h-4 rounded-full bg-primary-l2"></span>
-                      <span class="relative block w-2 h-2 rounded-full bg-primary"></span>
+                      <span class="absolute w-4 h-4 rounded-full bg-hub/15"></span>
+                      <span class="relative block w-2 h-2 rounded-full bg-hub"></span>
                     </div>
-                    <p class="hidden md:block font-p text-sm font-medium text-primary" x-text="step"></p>
+                    <p class="hidden md:block font-p text-sm font-medium text-hub" x-text="step"></p>
                   </div>
                 </template>
 
@@ -83,7 +83,7 @@ <h2 class="font-h2 mb-6">
               <input type="email" id="email" class="block input-box w-full mb-8" placeholder="{{ i18n "hub_ce_registration_step_1_email_placeholder" }}" x-init="$el.focus()" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
               <div class="mt-auto">
                 <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                <button :disabled="feedbackData.inProgress || !submitData.hubId || !submitData.returnUrl" @click.prevent="hubCE.validateEmail()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-step-1">
+                <button :disabled="feedbackData.inProgress || !submitData.hubId || !submitData.returnUrl" @click.prevent="hubCE.validateEmail()" class="btn btn-hub w-full md:w-64" data-umami-event="hub-ce-registration-step-1">
                   <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                   {{ i18n "hub_ce_registration_steps_next" }}
                 </button>
@@ -111,7 +111,7 @@ <h2 class="font-h2 mb-6">
               </p>
               <div class="mt-auto">
                 <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
+                <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-hub w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
                   <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                   {{ i18n "hub_managed_step_4_submit" }}
                 </button>
@@ -159,11 +159,11 @@ <h2 class="font-h2 mb-6">
 
               <div class="mt-auto">
                 <!-- Disabled while the challenge is solved and the registration request runs -->
-                <button x-show="!(feedbackData.sessionVerified &amp;&amp; feedbackData.registered)" disabled class="btn btn-primary w-full md:w-64">
+                <button x-show="!(feedbackData.sessionVerified &amp;&amp; feedbackData.registered)" disabled class="btn btn-hub w-full md:w-64">
                   <i x-show="!feedbackData.errorMessage" class="fa-solid fa-spinner fa-spin mr-2" aria-hidden="true"></i>
                   {{ i18n "hub_billing_manage_license_key_transfer_action" }}
                 </button>
-                <a x-show="feedbackData.sessionVerified &amp;&amp; feedbackData.registered" :href="submitData.returnUrl + '?session=' + encodeURIComponent(submitData.session)" class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-return-to-hub">
+                <a x-show="feedbackData.sessionVerified &amp;&amp; feedbackData.registered" :href="submitData.returnUrl + '?session=' + encodeURIComponent(submitData.session)" class="btn btn-hub w-full md:w-64" data-umami-event="hub-ce-registration-return-to-hub">
                   <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                   {{ i18n "hub_billing_manage_license_key_transfer_action" }}
                 </a>
diff --git a/layouts/hub-self-hosted/single.html b/layouts/hub-self-hosted/single.html
index 0ac46ab7e..298959c54 100644
--- a/layouts/hub-self-hosted/single.html
+++ b/layouts/hub-self-hosted/single.html
@@ -12,9 +12,9 @@ <h2 id="components" class="font-h2 mb-4">{{ i18n "hub_self_hosted_components_tit
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div class="white-box">
-          <div class="p-4 border-b border-primary">
+          <div class="p-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="fa-solid fa-vault text-primary"></i> {{ i18n "hub_self_hosted_components_hub_title" . }}
+              <i class="fa-solid fa-vault text-hub"></i> {{ i18n "hub_self_hosted_components_hub_title" . }}
             </h3>
           </div>
           <div class="p-4">
@@ -23,9 +23,9 @@ <h3 class="font-h3">
         </div>
 
         <div class="white-box">
-          <div class="p-4 border-b border-primary">
+          <div class="p-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="fa-solid fa-fingerprint text-primary"></i> {{ i18n "hub_self_hosted_components_keycloak_title" . }}
+              <i class="fa-solid fa-fingerprint text-hub"></i> {{ i18n "hub_self_hosted_components_keycloak_title" . }}
             </h3>
           </div>
           <div class="p-4">
@@ -34,9 +34,9 @@ <h3 class="font-h3">
         </div>
 
         <div class="white-box">
-          <div class="p-4 border-b border-primary">
+          <div class="p-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="fa-solid fa-database text-primary"></i> {{ i18n "hub_self_hosted_components_database_title" . }}
+              <i class="fa-solid fa-database text-hub"></i> {{ i18n "hub_self_hosted_components_database_title" . }}
             </h3>
           </div>
           <div class="p-4">
@@ -54,14 +54,14 @@ <h2 id="deployment-options" class="font-h2 mb-4">{{ i18n "hub_self_hosted_option
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <!-- LOCAL TEST -->
         <div class="flex flex-col white-box">
-          <div class="p-4 border-b border-primary">
+          <div class="p-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="fa-solid fa-laptop-code text-primary"></i> {{ i18n "hub_self_hosted_options_local_title" . }}
+              <i class="fa-solid fa-laptop-code text-hub"></i> {{ i18n "hub_self_hosted_options_local_title" . }}
             </h3>
           </div>
           <div class="flex flex-col justify-between h-full gap-8 p-4">
             <p class="font-p">{{ i18n "hub_self_hosted_options_local_description" . }}</p>
-            <a href="https://github.com/cryptomator/hub/blob/develop/deploy/compose/local/README.md" target="_blank" rel="noopener" role="button" class="btn btn-outline-primary w-full" data-umami-event="hub-self-hosted-compose-local-guide">
+            <a href="https://github.com/cryptomator/hub/blob/develop/deploy/compose/local/README.md" target="_blank" rel="noopener" role="button" class="btn btn-outline-hub w-full" data-umami-event="hub-self-hosted-compose-local-guide">
               <i class="fa-brands fa-github"></i> {{ i18n "hub_self_hosted_options_cta" . }}
             </a>
           </div>
@@ -69,14 +69,14 @@ <h3 class="font-h3">
 
         <!-- DOCKER COMPOSE (PROD) -->
         <div class="flex flex-col white-box">
-          <div class="p-4 border-b border-primary">
+          <div class="p-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="fa-brands fa-docker text-primary"></i> {{ i18n "hub_self_hosted_options_compose_title" . }}
+              <i class="fa-brands fa-docker text-hub"></i> {{ i18n "hub_self_hosted_options_compose_title" . }}
             </h3>
           </div>
           <div class="flex flex-col justify-between h-full gap-8 p-4">
             <p class="font-p">{{ i18n "hub_self_hosted_options_compose_description" . }}</p>
-            <a href="https://github.com/cryptomator/hub/blob/develop/deploy/compose/prod/README.md" target="_blank" rel="noopener" role="button" class="btn btn-outline-primary w-full" data-umami-event="hub-self-hosted-compose-prod-guide">
+            <a href="https://github.com/cryptomator/hub/blob/develop/deploy/compose/prod/README.md" target="_blank" rel="noopener" role="button" class="btn btn-outline-hub w-full" data-umami-event="hub-self-hosted-compose-prod-guide">
               <i class="fa-brands fa-github"></i> {{ i18n "hub_self_hosted_options_cta" . }}
             </a>
           </div>
@@ -84,14 +84,14 @@ <h3 class="font-h3">
 
         <!-- KUBERNETES -->
         <div class="flex flex-col white-box">
-          <div class="p-4 border-b border-primary">
+          <div class="p-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="fa-solid fa-dharmachakra text-primary"></i> {{ i18n "hub_self_hosted_options_kubernetes_title" . }}
+              <i class="fa-solid fa-dharmachakra text-hub"></i> {{ i18n "hub_self_hosted_options_kubernetes_title" . }}
             </h3>
           </div>
           <div class="flex flex-col justify-between h-full gap-8 p-4">
             <p class="font-p">{{ i18n "hub_self_hosted_options_kubernetes_description" . }}</p>
-            <a href="https://github.com/cryptomator/hub/blob/develop/deploy/helm/prod/README.md" target="_blank" rel="noopener" role="button" class="btn btn-outline-primary w-full" data-umami-event="hub-self-hosted-helm-prod-guide">
+            <a href="https://github.com/cryptomator/hub/blob/develop/deploy/helm/prod/README.md" target="_blank" rel="noopener" role="button" class="btn btn-outline-hub w-full" data-umami-event="hub-self-hosted-helm-prod-guide">
               <i class="fa-brands fa-github"></i> {{ i18n "hub_self_hosted_options_cta" . }}
             </a>
           </div>
@@ -106,7 +106,7 @@ <h3 class="font-h3">
     <section class="text-center py-12">
       <h2 class="font-h2 mb-4">{{ i18n "hub_self_hosted_contact_us_title" . }}</h2>
       <p class="font-p mb-4 max-w-3xl mx-auto">{{ i18n "hub_self_hosted_contact_us_description" . }}</p>
-      <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-primary px-8" data-umami-event="hub-self-hosted-contact-us">
+      <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-hub px-8" data-umami-event="hub-self-hosted-contact-us">
         <i class="fa-solid fa-envelope"></i> {{ i18n "hub_self_hosted_contact_us_button" . }}
       </a>
     </section>
diff --git a/layouts/index.html b/layouts/index.html
index e27de1009..7f934dcd1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,8 +4,6 @@
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/downloads/">
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/hub/managed/">
   <link rel="preload" fetchpriority="high" as="image" href="/img/for-individuals/screenshot-1.png" type="image/png">
-  <link rel="preload" fetchpriority="low" as="image" href="/img/hub/screenshot-1.png" type="image/png">
-  <link rel="preload" fetchpriority="low" as="image" href="/img/hub/screenshot-2.png" type="image/png">
   <link rel="preload" fetchpriority="auto" href="/fonts/opensans-regular.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" fetchpriority="auto" href="/fonts/opensans-medium.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" fetchpriority="auto" href="/fonts/opensans-bold.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -15,31 +13,11 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "styles" }}
-  {{ if hugo.IsDevelopment }}
-    {{ $heroCss := resources.Get "css/hero.css" | css.TailwindCSS }}
-    <link rel="stylesheet" href="{{ $heroCss.RelPermalink }}" media="screen" />
-  {{ else }}
-    {{ $tailwindOpts := dict "minify" true }}
-    {{ $heroCss := resources.Get "css/hero.css" | css.TailwindCSS $tailwindOpts | fingerprint }}
-    <link rel="stylesheet" href="{{ $heroCss.RelPermalink }}" integrity="{{ $heroCss.Data.Integrity }}" media="screen" />
-  {{ end }}
+  {{ partial "page-css.html" "css/hero.css" }}
 {{ end }}
 {{ define "main" }}
-  {{- /* baseof emits no padding for flush heroes, so the hero self-clears the fixed nav + banners; desktop padding already covers all banner combos, so only the mobile value scales below */ -}}
-  {{- $showWebinarBanner := .Scratch.Get "webinarBannerActive" -}}
-  {{- $showSaleBanner := .Scratch.Get "saleBannerActive" -}}
-  {{- $showAnniversaryBanner := .Scratch.Get "anniversaryBannerActive" -}}
-  {{- $showThinStrip := or $showWebinarBanner $showSaleBanner -}}
-  {{- $heroTopPad := "pt-16" -}}
-  {{- if and $showThinStrip $showAnniversaryBanner -}}
-    {{- $heroTopPad = "pt-40" -}}
-  {{- else if or $showThinStrip $showAnniversaryBanner -}}
-    {{- $heroTopPad = "pt-28" -}}
-  {{- end -}}
-  {{- /* The webinar banner hides itself client-side when no webinar is live/upcoming; collapse its reserved padding to match (mirrors baseof.html). */ -}}
-  {{- $webinarIsThinStrip := and $showWebinarBanner (not $showSaleBanner) -}}
-  {{- $heroPadNoStrip := cond $showAnniversaryBanner "pt-28" "pt-16" -}}
-  <header class="hero-split-contrast relative overflow-hidden{{ if not $webinarIsThinStrip }} {{ $heroTopPad }}{{ end }} md:pt-24 lg:pt-24"{{ if $webinarIsThinStrip }} :class="webinar.state === 'none' ? '{{ $heroPadNoStrip }}' : '{{ $heroTopPad }}'"{{ end }}>
+  {{- /* baseof emits no padding for flush heroes, so the hero self-clears the fixed nav + banners. */ -}}
+  <header {{ partial "banner-padding.html" (dict "context" . "classes" "hero-split-contrast relative overflow-hidden" "base" "pt-16 md:pt-24") }}>
     <div class="hero-aura-wrap absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
       <div class="hero-aura hero-aura-primary"></div>
       <div class="hero-aura hero-aura-secondary"></div>
@@ -109,7 +87,7 @@ <h2 class="text-primary">CRYPTOMATOR</h2>
 
       <!-- CRYPTOMATOR HUB -->
       <section class="hero-panel hero-panel-secondary">
-        <span class="inline-flex whitespace-nowrap px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">{{ i18n "home_hero_card_our_team" }}</span>
+        <span class="inline-flex whitespace-nowrap px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-hub/10 text-hub">{{ i18n "home_hero_card_our_team" }}</span>
         <div class="hero-scene hero-hub-scene">
           <svg class="hero-scene-links" viewBox="0 0 320 180" aria-hidden="true">
             <path class="hero-hub-link" d="M40 90 L160 30 L280 90 L160 150 Z"/>
@@ -152,12 +130,12 @@ <h2 class="text-primary">CRYPTOMATOR</h2>
           </div>
         </div>
         <div class="hero-panel-content">
-          <h2 class="text-tertiary2">CRYPTOMATOR HUB</h2>
+          <h2 class="text-hub">CRYPTOMATOR HUB</h2>
           <p class="hero-panel-description text-base text-gray-600 leading-relaxed mb-6">{{ i18n "home_hero_hub_description" }}</p>
-          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" class="btn btn-tertiary2 min-w-[16rem] py-3" data-umami-event="home-hero-teams-cta">
+          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" class="btn btn-hub min-w-[16rem] py-3" data-umami-event="home-hero-teams-cta">
             {{ i18n "home_hero_hub_cta" }}
           </a>
-          <a href="{{ .Site.LanguagePrefix }}/for-teams/" class="group inline-flex items-center gap-1.5 mt-4 text-sm text-gray-600 no-underline hover:text-tertiary2" data-umami-event="home-hero-teams-link">
+          <a href="{{ .Site.LanguagePrefix }}/for-teams/" class="group inline-flex items-center gap-1.5 mt-4 text-sm text-gray-600 no-underline hover:text-hub" data-umami-event="home-hero-teams-link">
             {{ i18n "home_hero_hub_link" }}
             <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true"></i>
           </a>
@@ -185,7 +163,7 @@ <h2 id="get-started" class="text-center font-h2 mb-4">{{ i18n "home_get_started_
         <div class="flex justify-between items-center p-4 border-b border-primary">
           <h3>
             <div class="flex items-center">
-              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt=""/>
               <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
             </div>
           </h3>
@@ -220,14 +198,13 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
       </div>
     
       <div class="flex flex-col white-box">
-        <div class="flex justify-between items-center p-4 border-b border-tertiary2">
+        <div class="flex justify-between items-center p-4 border-b border-hub">
           <h3>
             <div class="flex items-center">
-              <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-              <span class="font-headline font-bold text-tertiary2 pb-px">CRYPTOMATOR HUB</span>
+              {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
             </div>
           </h3>
-          <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
+          <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub">
             {{ i18n "home_get_started_for_teams_title" . }}
           </div>
         </div>
@@ -238,20 +215,20 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
             </h4>
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "home_get_started_for_teams_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "home_get_started_for_teams_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "home_get_started_for_teams_benefit_3" . }}</span>
               </li>
             </ul>
           </div>
-          <a href="{{ .Site.LanguagePrefix }}/for-teams/" role="button" class="btn btn-tertiary2 w-full lg:w-96" data-umami-event="home-get-started-teams-cta">
+          <a href="{{ .Site.LanguagePrefix }}/for-teams/" role="button" class="btn btn-hub w-full lg:w-96" data-umami-event="home-get-started-teams-cta">
             {{ i18n "home_get_started_for_teams_cta" . }}
           </a>
         </div>
diff --git a/layouts/partials/banner-padding.html b/layouts/partials/banner-padding.html
new file mode 100644
index 000000000..cbbaf3dc8
--- /dev/null
+++ b/layouts/partials/banner-padding.html
@@ -0,0 +1,33 @@
+{{- /* Returns the element's class attributes with the top padding that clears
+   the fixed nav and the active banners. The webinar banner hides itself
+   client-side. When it is the only strip, the padding assumes the strip, which
+   is the state before Alpine runs, and an Alpine :class on the body's webinar
+   state swaps in the no-strip padding once the banner reports none. Context:
+   "context" (the page), "classes" (the element's other classes), "base", and
+   optionally "thinStrip", "anniversary", and "both", which default to a flush
+   hero's clearance. */ -}}
+{{- $showWebinarBanner := .context.Scratch.Get "webinarBannerActive" -}}
+{{- $showSaleBanner := .context.Scratch.Get "saleBannerActive" -}}
+{{- $showAnniversaryBanner := .context.Scratch.Get "anniversaryBannerActive" -}}
+{{- $showThinStrip := or $showWebinarBanner $showSaleBanner -}}
+{{- $thinStrip := .thinStrip | default "pt-28 md:pt-28" -}}
+{{- $anniversary := .anniversary | default "pt-40 md:pt-32" -}}
+{{- $both := .both | default "pt-40 md:pt-40" -}}
+{{- $padding := .base -}}
+{{- if and $showThinStrip $showAnniversaryBanner -}}
+  {{- $padding = $both -}}
+{{- else if $showThinStrip -}}
+  {{- $padding = $thinStrip -}}
+{{- else if $showAnniversaryBanner -}}
+  {{- $padding = $anniversary -}}
+{{- end -}}
+{{- $attrs := printf "class=\"%s %s\"" .classes $padding -}}
+{{- if and $showWebinarBanner (not $showSaleBanner) -}}
+  {{- $paddingNoStrip := cond $showAnniversaryBanner $anniversary .base -}}
+  {{- /* Only the tokens that differ enter the Alpine object, so a token both
+     paddings share stays in the static class and is never removed. */ -}}
+  {{- $onlyNoStrip := delimit (complement (split $padding " ") (split $paddingNoStrip " ")) " " -}}
+  {{- $onlyStrip := delimit (complement (split $paddingNoStrip " ") (split $padding " ")) " " -}}
+  {{- $attrs = printf `%s :class="{ '%s': webinar.state === 'none', '%s': webinar.state !== 'none' }"` $attrs $onlyNoStrip $onlyStrip -}}
+{{- end -}}
+{{- return ($attrs | safeHTMLAttr) -}}
diff --git a/layouts/partials/hero-wave.html b/layouts/partials/hero-wave.html
new file mode 100644
index 000000000..0debf684f
--- /dev/null
+++ b/layouts/partials/hero-wave.html
@@ -0,0 +1,4 @@
+{{- /* text-gray-100 must match the body wrapper's bg-gray-100 in baseof.html. */ -}}
+<svg class="absolute -bottom-px inset-x-0 w-full h-16 md:h-24 text-gray-100 pointer-events-none" viewBox="0 0 1440 120" preserveAspectRatio="none" fill="currentColor" aria-hidden="true">
+  <path d="M0,88 C320,112 640,56 920,68 C1140,78 1300,96 1440,78 L1440,120 L0,120 Z"/>
+</svg>
diff --git a/layouts/partials/hub-license-block.html b/layouts/partials/hub-license-block.html
index 1fe57395f..a1bb6b9c7 100644
--- a/layouts/partials/hub-license-block.html
+++ b/layouts/partials/hub-license-block.html
@@ -7,10 +7,10 @@ <h2 class="font-h2 mb-4 mt-12">
       {{ i18n "hub_billing_manage_license_key_instruction" . }}
     </p>
     <textarea x-model="subscriptionData.token" class="input-box w-full text-sm md:text-base leading-relaxed break-all" rows="6" readonly></textarea>
-    <button x-show="!subscriptionData.token && !subscriptionData.needsTokenRefresh" :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.errorMessage = ''; hubSubscription.refreshToken()" class="btn btn-primary text-center w-full md:w-64 mt-4">
+    <button x-show="!subscriptionData.token && !subscriptionData.needsTokenRefresh" :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.errorMessage = ''; hubSubscription.refreshToken()" class="btn btn-hub text-center w-full md:w-64 mt-4">
       {{ i18n "hub_billing_manage_license_key_retry_action" . }}
     </button>
-    <button x-show="subscriptionData.token && subscriptionData.returnUrl" :disabled="subscriptionData.inProgress" class="btn btn-primary text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
+    <button x-show="subscriptionData.token && subscriptionData.returnUrl" :disabled="subscriptionData.inProgress" class="btn btn-hub text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
       {{ i18n "hub_billing_manage_license_key_transfer_action" . }}
     </button>
     <p x-show="subscriptionData.needsTokenRefresh && subscriptionData.inProgress" class="text-sm text-gray-600 mt-4">
diff --git a/layouts/partials/hub-managed-low-quantity.html b/layouts/partials/hub-managed-low-quantity.html
index db084389e..5bbc7e919 100644
--- a/layouts/partials/hub-managed-low-quantity.html
+++ b/layouts/partials/hub-managed-low-quantity.html
@@ -7,9 +7,9 @@
         <div class="p-4">
           <div class="md:flex md:items-start">
             <div class="shrink-0 text-center">
-              <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+              <div class="fa-stack text-2xl text-hub/15 md:text-xl">
                 <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-solid fa-lightbulb-on fa-stack-1x text-primary"></i>
+                <i class="fa-solid fa-lightbulb-on fa-stack-1x text-hub"></i>
               </div>
             </div>
             <div class="mt-3 text-center md:ml-4 md:mt-0 md:text-left">
@@ -32,8 +32,8 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="low-quant
             </div>
           </div>
         </div>
-        <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+        <div class="border-t border-hub p-4 md:flex md:flex-row-reverse md:items-center">
+          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-hub shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
             {{ i18n "hub_managed_low_quantity_submit" }}
           </a>
           <button type="button" class="btn btn-outline-gray-500 shrink-0 w-full md:w-auto" @click.prevent="{{ .isOpen }} = false">
diff --git a/layouts/partials/hub-nav.html b/layouts/partials/hub-nav.html
new file mode 100644
index 000000000..b840308b7
--- /dev/null
+++ b/layouts/partials/hub-nav.html
@@ -0,0 +1 @@
+{{- return (or .Params.hubNav (hasPrefix .RelPermalink (printf "%s/hub/" .Site.LanguagePrefix)) (eq .Type "solutions")) -}}
diff --git a/layouts/partials/hub-wordmark.html b/layouts/partials/hub-wordmark.html
new file mode 100644
index 000000000..481e9e1b1
--- /dev/null
+++ b/layouts/partials/hub-wordmark.html
@@ -0,0 +1,5 @@
+{{- /* Hub brand lockup; context is the logo's class string ("" renders the
+   wordmark alone). The logo is decorative next to its own wordmark, hence
+   the empty alt. */ -}}
+{{- with . }}<img src="/img/zero-knowledge-bot.svg" class="{{ . }} aspect-988/877" alt=""/>{{ end -}}
+<span class="font-headline font-bold text-hub pb-px">CRYPTOMATOR HUB</span>
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 9425561c3..5aff3c9d4 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -3,6 +3,7 @@
 {{- $hoverBorderColor := cond .Params.darkNav "hover:border-white" "hover:border-primary" -}}
 {{- $backgroundColor := cond .Params.darkNav "bg-dark" "bg-white" -}}
 {{- $currentRelPermalink := .RelPermalink -}}
+{{- $productPage := or (in .RelPermalink "/downloads") (in .RelPermalink "/for-individuals") (in .RelPermalink "/for-teams") -}}
 <nav class="w-full max-h-screen {{ $textColor }} fixed {{ $backgroundColor }} shadow-sm z-50">
   {{- if .Scratch.Get "saleBannerActive" -}}
   <div class="nav-promo-strip w-full bg-primary text-center text-sm text-white p-0.5">
@@ -37,8 +38,14 @@
       </button>
 
       <a class="flex items-center hover:no-underline p-2 lg:mr-2" href="{{ .Site.LanguagePrefix }}/">
-        <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt="Logo"/>
-        <span class="{{ if not (or (in .RelPermalink "/downloads") (in .RelPermalink "/for-individuals") (in .RelPermalink "/for-teams")) }}hidden{{ end }} md:block font-headline font-bold ml-2 pb-px">CRYPTOMATOR</span>
+        {{- $hubNav := partial "hub-nav.html" . -}}
+        {{- $wordmarkOnMobile := or $productPage $hubNav -}}
+        {{ if $hubNav }}
+        <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt=""/>
+        {{ else }}
+        <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt=""/>
+        {{ end }}
+        <span class="{{ if not $wordmarkOnMobile }}sr-only md:not-sr-only md:ml-2 {{ end }}font-headline font-bold{{ if and $hubNav (not .Params.darkNav) }} text-hub{{ end }} ml-2 pb-px">CRYPTOMATOR{{ if $hubNav }} HUB{{ end }}</span>
       </a>
 
       <ul class="hidden lg:flex items-stretch list-none m-0">
@@ -128,7 +135,7 @@
         </li>
       </ul>
 
-      {{ if not (or (in .RelPermalink "/downloads") (in .RelPermalink "/for-individuals") (in .RelPermalink "/for-teams")) -}}
+      {{ if not $productPage -}}
       <ul class="flex items-stretch list-none m-0">
         <li class="flex items-center mx-2">
           <a href="{{ .Site.LanguagePrefix }}/#get-started" role="button" class="self-center btn btn-primary py-1" data-umami-event="nav-cta">{{ i18n "nav_cta" . }}</a>
diff --git a/layouts/partials/page-css.html b/layouts/partials/page-css.html
new file mode 100644
index 000000000..a52952fa3
--- /dev/null
+++ b/layouts/partials/page-css.html
@@ -0,0 +1,9 @@
+{{- /* Context is the asset path: {{ partial "page-css.html" "css/hero.css" }} */ -}}
+{{ if hugo.IsDevelopment }}
+  {{ $css := resources.Get . | css.TailwindCSS }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="screen" />
+{{ else }}
+  {{ $tailwindOpts := dict "minify" true }}
+  {{ $css := resources.Get . | css.TailwindCSS $tailwindOpts | fingerprint }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" media="screen" />
+{{ end }}
diff --git a/layouts/pricing/single.html b/layouts/pricing/single.html
index 52db0ea8f..25746d077 100644
--- a/layouts/pricing/single.html
+++ b/layouts/pricing/single.html
@@ -58,11 +58,11 @@ <h2 class="text-center font-h2 mb-4">
           <div class="flex justify-between items-center p-4 border-b border-primary">
             <h3>
               <div class="flex items-center">
-                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt=""/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
               </div>
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary/10 text-primary">
               {{ i18n "pricing_individual_title" . }}
             </div>
           </div>
@@ -159,14 +159,13 @@ <h3>
 
         {{/* Standard Card */}}
         <div class="white-box" :class="hosting === 'managed' && 'ring-2 ring-secondary'">
-          <div class="flex justify-between items-center p-4 border-b border-primary">
+          <div class="flex justify-between items-center p-4 border-b border-hub">
             <h3>
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-                <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
               </div>
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub">
               {{ i18n "pricing_hub_standard_title" . }}
             </div>
           </div>
@@ -183,41 +182,41 @@ <h3>
             <p class="text-sm md:text-base lg:text-lg text-gray-500 mb-4">
               {{ i18n "pricing_hub_standard_price_description" . }}
             </p>
-            <a x-show="hosting === 'managed'" href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary w-full" data-umami-event="pricing-hub-standard-managed-cta">
+            <a x-show="hosting === 'managed'" href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-hub w-full" data-umami-event="pricing-hub-standard-managed-cta">
               {{ i18n "pricing_hub_managed_cta" . }}
             </a>
-            <a x-show="hosting === 'self-hosted'" href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-primary w-full" data-umami-event="pricing-hub-standard-self-hosted-cta">
+            <a x-show="hosting === 'self-hosted'" href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-hub w-full" data-umami-event="pricing-hub-standard-self-hosted-cta">
               {{ i18n "pricing_hub_self_hosted_cta" . }}
             </a>
           </div>
           <div class="px-4 py-8">
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-plus text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-plus text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_3" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_4" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_5" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-primary' : 'fa-times text-red-600'"></i></span>
+                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-hub' : 'fa-times text-red-600'"></i></span>
                 <span :class="hosting === 'self-hosted' && 'text-gray-500'">{{ i18n "pricing_hub_standard_managed_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-primary' : 'fa-times text-red-600'"></i></span>
+                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-hub' : 'fa-times text-red-600'"></i></span>
                 <span :class="hosting === 'self-hosted' && 'text-gray-500'">{{ i18n "pricing_hub_standard_managed_benefit_2" . }}</span>
               </li>
             </ul>
@@ -226,14 +225,13 @@ <h3>
 
         {{/* Enterprise Card */}}
         <div class="white-box">
-          <div class="flex justify-between items-center p-4 border-b border-primary">
+          <div class="flex justify-between items-center p-4 border-b border-hub">
             <h3>
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-                <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
               </div>
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub">
               {{ i18n "pricing_hub_enterprise_title" . }}
             </div>
           </div>
@@ -247,7 +245,7 @@ <h3>
             <p class="text-sm md:text-base lg:text-lg text-gray-500 mb-4">
               {{ i18n "pricing_hub_enterprise_price_description" . }}
             </p>
-            <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-primary w-full" data-umami-event="pricing-hub-enterprise-cta">
+            <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-hub w-full" data-umami-event="pricing-hub-enterprise-cta">
               <i class="fa-solid fa-envelope"></i>
               {{ i18n "pricing_hub_enterprise_cta" . }}
             </a>
@@ -255,26 +253,26 @@ <h3>
           <div class="px-4 py-8">
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-plus text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-plus text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_1" . }}</span>
               </li>
               <li class="flex items-center">
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_2" . }}</span>
-                <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-primary-l2 text-dark ml-2">
+                <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-hub/10 text-hub ml-2">
                   {{ i18n "coming_soon" . }}
                 </span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_3" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_4" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_5" . }}</span>
               </li>
             </ul>
@@ -286,11 +284,11 @@ <h3>
       <section class="mt-8 mb-4">
         <div class="white-box">
           {{/* Mobile: card header (matches other pricing cards) */}}
-          <div class="md:hidden flex justify-between items-center p-4 border-b border-primary">
+          <div class="md:hidden flex justify-between items-center p-4 border-b border-hub">
             <h3>
-              <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+              {{ partial "hub-wordmark.html" "" }}
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-hub/10 text-hub">
               {{ i18n "pricing_hub_community_title" . }}
             </div>
           </div>
@@ -298,7 +296,7 @@ <h3>
           <div class="md:hidden p-4 border-b border-gray-200">
             <p class="font-p mb-6">{{ i18n "pricing_hub_community_subtitle" . }}</p>
             <p class="font-bold text-2xl leading-relaxed">{{ i18n "pricing_free" . }}</p>
-            <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-primary w-full mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
+            <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-hub w-full mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
               {{ i18n "pricing_hub_self_hosted_cta" . }}
             </a>
           </div>
@@ -306,11 +304,11 @@ <h3>
           <div class="md:hidden px-4 py-8">
             <ul role="list" class="fa-ul text-sm ml-7 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_community_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-hub"></i></span>
                 <span>{{ i18n "pricing_hub_community_benefit_2" . }}</span>
               </li>
             </ul>
@@ -320,28 +318,27 @@ <h3>
             <div class="flex-1">
               <div class="flex items-center gap-3 mb-3">
                 <div class="flex items-center">
-                  <img src="/img/zero-knowledge-bot.svg" class="h-8 mr-2 aspect-988/877" alt="Logo"/>
-                  <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                  {{ partial "hub-wordmark.html" "h-8 mr-2" }}
                 </div>
-                <div class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+                <div class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub">
                   {{ i18n "pricing_hub_community_title" . }}
                 </div>
               </div>
               <p class="font-p mb-4">{{ i18n "pricing_hub_community_subtitle" . }}</p>
               <div class="flex flex-wrap gap-x-6 gap-y-2 text-base">
                 <div class="flex items-center gap-2">
-                  <i class="fa-solid fa-check text-primary"></i>
+                  <i class="fa-solid fa-check text-hub"></i>
                   <span>{{ i18n "pricing_hub_community_benefit_1" . }}</span>
                 </div>
                 <div class="flex items-center gap-2">
-                  <i class="fa-solid fa-check text-primary"></i>
+                  <i class="fa-solid fa-check text-hub"></i>
                   <span>{{ i18n "pricing_hub_community_benefit_2" . }}</span>
                 </div>
               </div>
             </div>
             <div class="shrink-0 flex flex-col items-end text-right">
               <p class="font-bold text-3xl lg:text-4xl leading-relaxed">{{ i18n "pricing_free" . }}</p>
-              <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-primary px-8 mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
+              <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-hub px-8 mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
                 {{ i18n "pricing_hub_self_hosted_cta" . }}
               </a>
             </div>
@@ -374,10 +371,10 @@ <h2 class="font-h2">{{ i18n "faq_title" . }}</h2>
           <div>
             <h3 class="flex items-center gap-3 mb-4">
               <div class="flex items-center">
-                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt=""/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
               </div>
-              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary/10 text-primary">
                 {{ i18n "pricing_faq_individual_badge" . }}
               </div>
             </h3>
@@ -398,10 +395,9 @@ <h3 class="flex items-center gap-3 mb-4">
           <div>
             <h3 class="flex items-center gap-3 mb-4">
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-                <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
               </div>
-              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-hub/10 text-hub">
                 {{ i18n "pricing_faq_teams_badge" . }}
               </div>
             </h3>
diff --git a/layouts/solutions/list.html b/layouts/solutions/list.html
index 46668ada7..a5d9dd2c2 100644
--- a/layouts/solutions/list.html
+++ b/layouts/solutions/list.html
@@ -13,29 +13,29 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
             <figure class="h-48 w-full relative flex-shrink-0">
             {{ if .Params.comingsoon }}
               <div class="absolute top-4 left-4 z-20">
-                <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-primary text-primary bg-transparent">
+                <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-hub text-hub bg-transparent">
                   <i class="fa-solid fa-hourglass-half"></i>
                   <span>{{ i18n "coming_soon" . }}</span>
                 </div>
               </div>
-              <div class="w-full h-full bg-primary-l2 opacity-50 flex items-center justify-center">
-                <i class="{{ $iconClass }} text-primary text-5xl opacity-60"></i>
+              <div class="w-full h-full bg-hub/10 opacity-50 flex items-center justify-center">
+                <i class="{{ $iconClass }} text-hub text-5xl opacity-60"></i>
               </div>
             {{ else }}
               <a href="{{ .RelPermalink }}" class="block h-full group">
-                <div class="w-full h-full bg-primary-l2 flex items-center justify-center group-hover:bg-primary/90 transition-colors duration-300">
-                  <i class="{{ $iconClass }} text-primary group-hover:text-white text-5xl opacity-80 transition-colors duration-300"></i>
+                <div class="w-full h-full bg-hub/10 flex items-center justify-center group-hover:bg-hub/90 transition-colors duration-300">
+                  <i class="{{ $iconClass }} text-hub group-hover:text-white text-5xl opacity-80 transition-colors duration-300"></i>
                 </div>
               </a>
             {{ end }}
             </figure>
 
             <div class="p-6 {{ if .Params.comingsoon }}opacity-70{{ end }} flex-1 flex flex-col">
-              <h2 class="font-h2 mb-4 {{ if not .Params.comingsoon }}group-hover:text-primary transition-colors duration-200{{ end }}">
+              <h2 class="font-h2 mb-4 {{ if not .Params.comingsoon }}group-hover:text-hub transition-colors duration-200{{ end }}">
                 {{ if .Params.comingsoon }}
                   <span class="text-gray-600">{{ .Params.cardtitle }}</span>
                 {{ else }}
-                  <a class="text-link" href="{{ .RelPermalink }}">{{ .Params.cardtitle }}</a>
+                  <a class="text-link-hub" href="{{ .RelPermalink }}">{{ .Params.cardtitle }}</a>
                 {{ end }}
               </h2>
               <p class="font-p leading-relaxed {{ if .Params.comingsoon }}text-gray-500{{ else }}text-gray-700{{ end }} flex-1">
@@ -52,7 +52,7 @@ <h3 class="font-h2 mb-4 text-dark">{{ i18n "solutions_contact_title" . }}</h3>
       <p class="font-p text-gray-700 mb-6 max-w-2xl mx-auto">
         {{ i18n "solutions_contact_description" . }}
       </p>
-      <a href="/contact-sales/" class="btn btn-outline-primary px-8">
+      <a href="{{ .Site.LanguagePrefix }}/contact-sales/" class="btn btn-outline-hub px-8">
         <i class="fa-solid fa-envelope mr-2"></i>
         {{ i18n "solutions_contact_button" . }}
       </a>
diff --git a/layouts/solutions/single.html b/layouts/solutions/single.html
index e5bba49cc..70b385d42 100644
--- a/layouts/solutions/single.html
+++ b/layouts/solutions/single.html
@@ -4,16 +4,15 @@
       <div class="max-w-4xl mx-auto">
         <div class="flex flex-wrap items-center justify-center gap-4 mb-6">
           <div class="flex items-center">
-            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt="Logo"/>
-            <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+            {{ partial "hub-wordmark.html" "h-8 mr-2" }}
           </div>
-          <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">{{ .Title }}</span>
+          <span class="bg-hub text-white px-3 py-1 rounded-full text-sm font-medium">{{ .Title }}</span>
         </div>
         <h1 class="font-h1 mb-6">{{ .Params.hero_title | default .Title }}</h1>
         <p class="lead mb-8 max-w-4xl mx-auto">{{ .Params.hero_description | default .Description | safeHTML }}</p>
         <div class="flex flex-col md:flex-row gap-6 mb-6 justify-center">
-          <a href="{{ .Site.LanguagePrefix }}/for-teams/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="solutions-get-started">{{ i18n "solutions_hero_get_started" . }}</a>
-          <a href="{{ .Site.LanguagePrefix }}/book-a-demo/" role="button" class="btn btn-outline-primary text-lg w-full md:w-64" data-umami-event="solutions-book-demo">{{ i18n "solutions_hero_book_demo" . }}</a>
+          <a href="{{ .Site.LanguagePrefix }}/for-teams/" role="button" class="btn btn-hub text-lg w-full md:w-64" data-umami-event="solutions-get-started">{{ i18n "solutions_hero_get_started" . }}</a>
+          <a href="{{ .Site.LanguagePrefix }}/book-a-demo/" role="button" class="btn btn-outline-hub text-lg w-full md:w-64" data-umami-event="solutions-book-demo">{{ i18n "solutions_hero_book_demo" . }}</a>
         </div>
       </div>
     </header>
@@ -29,9 +28,9 @@ <h2 class="font-h2 mb-4">{{ .Params.use_cases_title | default "Use Cases" }}</h2
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
         {{ range .Params.use_cases }}
         <div class="white-box">
-          <div class="px-6 py-4 border-b border-primary">
+          <div class="px-6 py-4 border-b border-hub">
             <h3 class="font-h3">
-              <i class="{{ .icon | default "fa-solid fa-building" }} text-primary mr-2"></i>
+              <i class="{{ .icon | default "fa-solid fa-building" }} text-hub mr-2"></i>
               {{ .title }}
             </h3>
           </div>
@@ -40,7 +39,7 @@ <h3 class="font-h3">
             <ul class="space-y-2">
               {{ range .features }}
               <li class="flex items-start">
-                <i class="fa-solid fa-check text-primary mt-1 mr-2 flex-shrink-0"></i>
+                <i class="fa-solid fa-check text-hub mt-1 mr-2 flex-shrink-0"></i>
                 <span class="font-p text-sm">{{ . }}</span>
               </li>
               {{ end }}
@@ -71,7 +70,7 @@ <h3 class="font-h2 mb-6">{{ .title }}</h3>
         <ul class="space-y-3">
           {{ range .details }}
           <li class="flex items-start">
-            <i class="fa-solid fa-check text-primary mt-1 mr-3 flex-shrink-0"></i>
+            <i class="fa-solid fa-check text-hub mt-1 mr-3 flex-shrink-0"></i>
             <span class="font-p">{{ . }}</span>
           </li>
           {{ end }}
@@ -97,7 +96,7 @@ <h3 class="font-h2 mb-6">{{ .title }}</h3>
         <ul class="space-y-3">
           {{ range .details }}
           <li class="flex items-start">
-            <i class="fa-solid fa-arrow-right text-primary mt-1 mr-3 flex-shrink-0"></i>
+            <i class="fa-solid fa-arrow-right text-hub mt-1 mr-3 flex-shrink-0"></i>
             <span class="font-p">{{ . }}</span>
           </li>
           {{ end }}
@@ -121,26 +120,26 @@ <h2 class="font-h2 mb-4">{{ .Params.success_stories_title }}</h2>
         <figure class="aspect-video relative">
           {{ if .comingsoon }}
             <div class="absolute top-4 left-4 z-20">
-              <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-primary text-primary bg-transparent">
+              <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-hub text-hub bg-transparent">
                 <i class="fa-solid fa-hourglass-half"></i>
                 <span>{{ i18n "coming_soon" . }}</span>
               </div>
             </div>
-            <div class="w-full h-full bg-primary-l2 opacity-50 flex items-center justify-center">
-              <i class="fa-solid fa-image text-primary text-4xl opacity-60"></i>
+            <div class="w-full h-full bg-hub/10 opacity-50 flex items-center justify-center">
+              <i class="fa-solid fa-image text-hub text-4xl opacity-60"></i>
             </div>
           {{ else }}
-            <div class="w-full h-full bg-primary-l2 flex items-center justify-center">
-              <i class="fa-solid fa-image text-primary text-4xl opacity-80"></i>
+            <div class="w-full h-full bg-hub/10 flex items-center justify-center">
+              <i class="fa-solid fa-image text-hub text-4xl opacity-80"></i>
             </div>
           {{ end }}
         </figure>
         <div class="p-6 {{ if .comingsoon }}opacity-70{{ end }}">
-          <h3 class="font-h2 mb-4 {{ if not .comingsoon }}group-hover:text-primary transition-colors duration-200{{ end }}">
+          <h3 class="font-h2 mb-4 {{ if not .comingsoon }}group-hover:text-hub transition-colors duration-200{{ end }}">
             {{ if .comingsoon }}
               <span class="text-gray-600">{{ .title }}</span>
             {{ else }}
-              <span class="text-link">{{ .title }}</span>
+              <span class="text-link-hub">{{ .title }}</span>
             {{ end }}
           </h3>
           <p class="font-p leading-relaxed {{ if .comingsoon }}text-gray-500{{ else }}text-gray-700{{ end }}">{{ .description | safeHTML }}</p>
@@ -180,7 +179,7 @@ <h2 id="faq" class="font-h2 mb-4">{{ i18n "faq_title" $ }}</h2>
   <section class="container text-center py-12">
     <h2 id="contact" class="font-h2 mb-4">{{ i18n "solutions_single_contact_title" . }}</h2>
     <p class="font-p text-gray-700 mb-6 max-w-3xl mx-auto">{{ i18n "solutions_single_contact_description" . | safeHTML }}</p>
-    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8" data-umami-event="solutions-implementation-contact">
+    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-hub px-8" data-umami-event="solutions-implementation-contact">
       <i class="fa-solid fa-envelope"></i> {{ i18n "solutions_single_contact_button" . }}
     </a>
   </section>
diff --git a/static/img/clouds/dropbox.svg b/static/img/clouds/dropbox.svg
new file mode 100644
index 000000000..4ceb780ea
--- /dev/null
+++ b/static/img/clouds/dropbox.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 43 40" xmlns="http://www.w3.org/2000/svg">
+<path fill="#0061ff" d="M12.6 0 0 8.3l8.7 7 12.8-7.9zM0 22.1l12.6 8.3 8.9-7.3-12.8-7.9zm21.5 1 8.9 7.3 12.6-8.3-8.7-6.9zM43 8.3 30.4 0l-8.9 7.4 12.8 7.9zM21.5 24.7l-8.9 7.3-3.8-2.5v2.8L21.5 40l12.7-7.7v-2.8l-3.8 2.5z"/>
+</svg>
diff --git a/static/img/clouds/google-drive.svg b/static/img/clouds/google-drive.svg
new file mode 100644
index 000000000..7907720b5
--- /dev/null
+++ b/static/img/clouds/google-drive.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0-1.2 4.5h27.5z" fill="#00ac47"/>
+<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z" fill="#ea4335"/>
+<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>
diff --git a/static/img/clouds/icloud.svg b/static/img/clouds/icloud.svg
new file mode 100644
index 000000000..cd83f9f86
--- /dev/null
+++ b/static/img/clouds/icloud.svg
@@ -0,0 +1,48 @@
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   viewBox="0 0 80 52"
+   version="1.1"
+   id="svg2">
+  <defs
+     id="defs57">
+    <pattern
+       y="0"
+       x="0"
+       height="6"
+       width="6"
+       patternUnits="userSpaceOnUse"
+       id="EMFhbasepattern" />
+    <linearGradient
+       xlink:href="#linearGradient1070"
+       id="linearGradient1072"
+       x1="-108.90347"
+       y1="2124.834"
+       x2="-1137.1982"
+       y2="2110.6506"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.07740541,0,0,0.07740541,88.373952,-128.02586)" />
+    <linearGradient
+       id="linearGradient1070">
+      <stop
+         style="stop-color:#3e82f4;stop-opacity:1"
+         offset="0"
+         id="stop1066" />
+      <stop
+         style="stop-color:#93dcf7;stop-opacity:1"
+         offset="1"
+         id="stop1068" />
+    </linearGradient>
+  </defs>
+  <g
+     id="#ffffffff"
+     transform="translate(0,-1089)" />
+  <g
+     id="#2acbffff-4"
+     transform="matrix(0.74035173,0,0,0.75447038,-840.95699,-775.15387)"
+     style="fill:#00ff00" />
+  <path
+     style="opacity:1;fill:url(#linearGradient1072);fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 45.864371,0.751258 A 21.518704,21.518704 0 0 0 27.127725,11.764594 11.804325,11.804325 0 0 0 21.976186,10.573131 11.804325,11.804325 0 0 0 10.35494,20.48888 16.255137,16.255137 0 0 0 0.37795502,35.481798 16.255137,16.255137 0 0 0 16.640956,51.721206 16.255137,16.255137 0 0 0 18.679799,51.57426 h 45.187983 a 15.130063,15.202083 0 0 0 0.712824,0.03447 15.130063,15.202083 0 0 0 0.679264,-0.03447 h 1.082164 V 51.49383 A 15.130063,15.202083 0 0 0 79.703385,36.406573 V 36.3774 A 15.130063,15.202083 0 0 0 67.386251,21.477308 21.518704,21.518704 0 0 0 45.864371,0.751258 Z"
+     id="rect955" />
+</svg>
diff --git a/static/img/clouds/onedrive.svg b/static/img/clouds/onedrive.svg
new file mode 100644
index 000000000..f961628b7
--- /dev/null
+++ b/static/img/clouds/onedrive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5.5 32 20.5"><g id="STYLE_COLOR"><path d="M12.20245,11.19292l.00031-.0011,6.71765,4.02379,4.00293-1.68451.00018.00068A6.4768,6.4768,0,0,1,25.5,13c.14764,0,.29358.0067.43878.01639a10.00075,10.00075,0,0,0-18.041-3.01381C7.932,10.00215,7.9657,10,8,10A7.96073,7.96073,0,0,1,12.20245,11.19292Z" fill="#0364b8"/><path d="M12.20276,11.19182l-.00031.0011A7.96073,7.96073,0,0,0,8,10c-.0343,0-.06805.00215-.10223.00258A7.99676,7.99676,0,0,0,1.43732,22.57277l5.924-2.49292,2.63342-1.10819,5.86353-2.46746,3.06213-1.28859Z" fill="#0078d4"/><path d="M25.93878,13.01639C25.79358,13.0067,25.64764,13,25.5,13a6.4768,6.4768,0,0,0-2.57648.53178l-.00018-.00068-4.00293,1.68451,1.16077.69528L23.88611,18.19l1.66009.99438,5.67633,3.40007a6.5002,6.5002,0,0,0-5.28375-9.56805Z" fill="#1490df"/><path d="M25.5462,19.18437,23.88611,18.19l-3.80493-2.2791-1.16077-.69528L15.85828,16.5042,9.99475,18.97166,7.36133,20.07985l-5.924,2.49292A7.98889,7.98889,0,0,0,8,26H25.5a6.49837,6.49837,0,0,0,5.72253-3.41556Z" fill="#28a8ea"/></g></svg>
diff --git a/static/img/clouds/sharepoint.svg b/static/img/clouds/sharepoint.svg
new file mode 100644
index 000000000..d2676da0a
--- /dev/null
+++ b/static/img/clouds/sharepoint.svg
@@ -0,0 +1,41 @@
+<svg version="1.1" id="Livello_1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1992.333 1946"
+	 enable-background="new 0 0 1992.333 1946" xml:space="preserve">
+<circle fill="#036C70" cx="1019.333" cy="556" r="556"/>
+<circle fill="#1A9BA1" cx="1482.667" cy="1065.667" r="509.667"/>
+<circle fill="#37C6D0" cx="1088.833" cy="1552.167" r="393.833"/>
+<path opacity="0.1" enable-background="new    " d="M1112,501.79v988.753c-0.23,34.357-21.05,65.222-52.82,78.303
+	c-10.116,4.279-20.987,6.484-31.97,6.487H695.463c-0.463-7.877-0.463-15.29-0.463-23.167c-0.154-7.734,0.155-15.47,0.927-23.167
+	c8.48-148.106,99.721-278.782,235.837-337.77v-86.18c-302.932-48.005-509.592-332.495-461.587-635.427
+	c0.333-2.098,0.677-4.195,1.034-6.289c2.306-15.626,5.556-31.099,9.73-46.333h546.27C1073.964,417.178,1111.822,455.036,1112,501.79
+	z"/>
+<path opacity="0.2" enable-background="new    " d="M980.877,463.333H471.21c-51.486,302.386,151.908,589.256,454.293,640.742
+	c9.156,1.559,18.35,2.888,27.573,3.986c-143.633,68.11-248.3,261.552-257.196,420.938c-0.771,7.697-1.081,15.433-0.927,23.167
+	c0,7.877,0,15.29,0.463,23.167c0.836,15.574,2.85,31.063,6.023,46.333h279.39c34.357-0.23,65.222-21.05,78.303-52.82
+	c4.279-10.115,6.485-20.987,6.487-31.97V548.123C1065.443,501.387,1027.613,463.537,980.877,463.333z"/>
+<path opacity="0.2" enable-background="new    " d="M980.877,463.333H471.21c-51.475,302.414,151.95,589.297,454.364,640.773
+	c6.186,1.053,12.389,2.001,18.607,2.844c-139,73.021-239.543,266-248.254,422.05h284.95c46.681-0.353,84.437-38.109,84.79-84.79
+	V548.123C1065.489,501.369,1027.631,463.511,980.877,463.333z"/>
+<path opacity="0.2" enable-background="new    " d="M934.543,463.333H471.21c-48.606,285.482,130.279,560.404,410.977,631.616
+	C775.901,1216.384,710.711,1368.301,695.927,1529h238.617c46.754-0.178,84.612-38.036,84.79-84.79V548.123
+	C1019.308,501.306,981.361,463.359,934.543,463.333z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="177.0788" y1="1551.0284" x2="842.2545" y2="398.9716" gradientTransform="matrix(1 0 0 -1 0 1948)">
+	<stop  offset="0" style="stop-color:#058F92"/>
+	<stop  offset="0.5" style="stop-color:#038489"/>
+	<stop  offset="1" style="stop-color:#026D71"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M84.929,463.333h849.475c46.905,0,84.929,38.024,84.929,84.929v849.475
+	c0,46.905-38.024,84.929-84.929,84.929H84.929c-46.905,0-84.929-38.024-84.929-84.929V548.262
+	C0,501.357,38.024,463.333,84.929,463.333z"/>
+<path fill="#FFFFFF" d="M379.331,962.621c-19.903-13.202-36.528-30.777-48.604-51.384c-11.701-21.542-17.533-45.781-16.912-70.288
+	c-1.042-33.181,10.155-65.586,31.46-91.045c22.388-25.49,51.326-44.366,83.678-54.581c36.871-12.136,75.49-18.116,114.304-17.699
+	c51.043-1.865,102.015,5.272,150.583,21.082v106.567c-21.103-12.784-44.088-22.166-68.11-27.8
+	c-26.065-6.392-52.81-9.597-79.647-9.545c-28.3-1.039-56.419,4.913-81.871,17.329c-19.65,8.475-32.392,27.807-32.433,49.206
+	c-0.08,12.981,4.907,25.481,13.9,34.843c10.622,11.037,23.187,20.021,37.067,26.503c15.444,7.691,38.611,17.916,69.5,30.673
+	c3.401,1.075,6.716,2.407,9.915,3.985c30.401,11.881,59.729,26.344,87.663,43.229c21.154,13.043,38.908,30.924,51.801,52.171
+	c13.218,24.085,19.625,51.315,18.533,78.767c1.509,34.066-8.913,67.591-29.468,94.798c-20.488,25.012-47.88,43.446-78.767,53.005
+	c-36.329,11.387-74.245,16.892-112.312,16.309c-34.154,0.155-68.258-2.635-101.933-8.34c-28.434-4.653-56.182-12.807-82.612-24.279
+	v-112.358c25.264,18.043,53.489,31.529,83.4,39.847c29.81,9.289,60.798,14.251,92.018,14.734c28.895,1.83,57.739-4.291,83.4-17.699
+	c17.976-10.144,28.909-29.358,28.449-49.994c0.12-14.359-5.56-28.158-15.753-38.271c-12.676-12.444-27.352-22.671-43.414-30.256
+	c-18.533-9.267-45.824-21.483-81.871-36.65C432.618,993.951,405.161,979.594,379.331,962.621z"/>
+</svg>
diff --git a/static/img/home/header-background.avif b/static/img/home/header-background.avif
index 9225d40aa..0285c3c36 100644
Binary files a/static/img/home/header-background.avif and b/static/img/home/header-background.avif differ
diff --git a/static/img/home/header-background.png b/static/img/home/header-background.png
index 9369ef533..93570982f 100644
Binary files a/static/img/home/header-background.png and b/static/img/home/header-background.png differ
diff --git a/static/img/hub/avatar-1.svg b/static/img/hub/avatar-1.svg
new file mode 100644
index 000000000..17f86f798
--- /dev/null
+++ b/static/img/hub/avatar-1.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#ebf5eb"/>
+    <path d="M19.5 26 Q19.5 14 32 14 Q44.5 14 44.5 26 L44.5 41 Q44.5 45 40 45 H24 Q19.5 45 19.5 41 Z" fill="#2f4f4f"/>
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#1e2b33"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#f2c9a7"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#f2c9a7"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#2f4f4f"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-2.svg b/static/img/hub/avatar-2.svg
new file mode 100644
index 000000000..afc130f19
--- /dev/null
+++ b/static/img/hub/avatar-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#e8eef4"/>
+    
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#49b04a"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#e0ac69"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#e0ac69"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#1e2b33"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-3.svg b/static/img/hub/avatar-3.svg
new file mode 100644
index 000000000..79418e0ff
--- /dev/null
+++ b/static/img/hub/avatar-3.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#eef4f0"/>
+    
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#008a7b"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#eab68a"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#eab68a"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#233042"/>
+    <circle cx="32" cy="13.5" r="4.5" fill="#233042"/>
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-4.svg b/static/img/hub/avatar-4.svg
new file mode 100644
index 000000000..0eddf573d
--- /dev/null
+++ b/static/img/hub/avatar-4.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#f1f3f5"/>
+    
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#354960"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#c68642"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#c68642"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#14202b"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/screenshot-2.png b/static/img/hub/screenshot-2.png
deleted file mode 100644
index 888d59c04..000000000
Binary files a/static/img/hub/screenshot-2.png and /dev/null differ
diff --git a/static/img/hub/screenshot-3.png b/static/img/hub/screenshot-3.png
deleted file mode 100644
index 19cce3cf2..000000000
Binary files a/static/img/hub/screenshot-3.png and /dev/null differ
diff --git a/static/img/hub/workflow-1-vaults.png b/static/img/hub/workflow-1-vaults.png
new file mode 100644
index 000000000..8fe4c11d9
Binary files /dev/null and b/static/img/hub/workflow-1-vaults.png differ
diff --git a/static/img/hub/workflow-2-access.png b/static/img/hub/workflow-2-access.png
new file mode 100644
index 000000000..e970d1645
Binary files /dev/null and b/static/img/hub/workflow-2-access.png differ
diff --git a/static/img/hub/workflow-3-unlock.png b/static/img/hub/workflow-3-unlock.png
new file mode 100644
index 000000000..3e26f4714
Binary files /dev/null and b/static/img/hub/workflow-3-unlock.png differ
diff --git a/static/img/hub/workflow-4-audit.png b/static/img/hub/workflow-4-audit.png
new file mode 100644
index 000000000..26cf176cf
Binary files /dev/null and b/static/img/hub/workflow-4-audit.png differ