Step 002 complete. Step 003 needs verification

.gitignore

@@ -31,3 +31,5 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+tmp/

openspec/changes/step-003-navigation-bar/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-04-10

openspec/changes/step-003-navigation-bar/design.md

@@ -0,0 +1,111 @@
+## Context
+
+Step 002 produced a `BaseLayout.astro` that imports `Nav.astro` and `Footer.astro` stubs — both render nothing. The navigation bar is the first visible UI element needed on every page. It must:
+
+- Render correctly on a Midnight (`#102022`) dark background
+- Work at build time (Astro SSG — no server runtime)
+- Derive the current locale from the URL path (no runtime props)
+- Use zero client-side framework code
+
+Available assets confirmed:
+- `src/assets/logos/logo-wide.svg` — full "qumo" wordmark, paths filled with `#161616` (near-black — needs override)
+- `src/assets/icons/wum-arrow.svg` — chevron arrow, already `stroke="#f3f3f3"` (Snow — correct for dark nav)
+
+## Goals / Non-Goals
+
+**Goals:**
+- Fully functional `Nav.astro` replacing the empty stub
+- Logo visible on Midnight background
+- Three nav links + language switcher + Connect CTA
+- Scroll-triggered background transition (transparent → Midnight)
+- Mobile hamburger menu with open/close behavior
+- All text strings from `en.json` / `nl.json`
+
+**Non-Goals:**
+- Animated underline or hover effects beyond Tailwind utilities
+- Active page highlighting (deferred — pages don't exist yet to test against)
+- Dropdown sub-menus (not on staging site)
+- Separate `LanguageSwitcher.astro` component (simple enough to inline)
+
+## Decisions
+
+### 1. Logo: inline SVG with fill override
+
+**Decision:** Inline the `logo-wide.svg` SVG directly in `Nav.astro`. Change all `fill="#161616"` attributes to `fill="currentColor"`. Set `class="text-snow"` on the `<svg>` element so `currentColor` resolves to Snow (`#F3F3F3`).
+
+**Rationale:** The logo is a small, purely decorative SVG — inlining it avoids an extra HTTP request and allows CSS-controlled coloring without filters. `fill="currentColor"` + Tailwind text color is the idiomatic approach. An `<img>` tag cannot be recolored without CSS filters, which look worse.
+
+**Alternative considered:** `<Image>` component with a separate white-fill SVG asset. Rejected: requires maintaining two copies of the same logo.
+
+### 2. Locale detection: Astro.url at build time
+
+**Decision:** In `Nav.astro`, derive locale from `Astro.url.pathname`:
+```ts
+const isNl = Astro.url.pathname.startsWith('/nl');
+const locale = isNl ? 'nl' : 'en';
+const alternatePath = isNl
+  ? Astro.url.pathname.replace(/^\/nl/, '') || '/'
+  : '/nl' + Astro.url.pathname;
+```
+Pass `locale` to `getContent()` for nav strings. Use `alternatePath` for the language switcher link.
+
+**Rationale:** Astro SSG renders each page at build time with its own `Astro.url`. This approach is zero-JS, works for every route without configuration, and the prefix rule (`/nl/...` ↔ `/...`) holds for all routes on this site. Confirmed with user during explore session (Option B).
+
+**Alternative considered:** Prop threading from `BaseLayout` (Option A). Rejected by user — more verbose, non-standard for nav components.
+
+### 3. Scroll behavior: window scroll event + CSS class toggle
+
+**Decision:** A `<script>` tag in Nav adds/removes a `scrolled` class on the `<nav>` element when `window.scrollY > 20`. Tailwind's `data-scrolled` attribute or a direct class toggle drives the style change.
+
+Implementation approach — use a `data-scrolled` attribute to avoid class name conflicts:
+```js
+const nav = document.getElementById('main-nav');
+window.addEventListener('scroll', () => {
+  nav.dataset.scrolled = window.scrollY > 20 ? 'true' : 'false';
+}, { passive: true });
+```
+CSS: nav starts `bg-transparent`, transitions to `bg-midnight` when `data-scrolled="true"`. Use Tailwind's arbitrary variant: `data-[scrolled=true]:bg-midnight`.
+
+**Rationale:** Simple, no dependencies, no layout shift. `passive: true` avoids scroll jank. The `data-*` attribute approach keeps the JS–CSS contract explicit and avoids collisions with Tailwind's JIT-generated class names.
+
+**Alternative considered:** `IntersectionObserver` on a sentinel element. Unnecessary complexity for this use case — scroll position threshold is simpler and more predictable.
+
+### 4. Mobile menu: vanilla JS toggle with CSS transition
+
+**Decision:** The hamburger button toggles `aria-expanded` on itself and a corresponding `data-open` attribute on the mobile menu panel. CSS handles the visual transition (translate or max-height). A `<script>` tag wires up the toggle.
+
+```html
+<button id="menu-toggle" aria-expanded="false" aria-controls="mobile-menu">...</button>
+<div id="mobile-menu" class="... -translate-y-full data-[open]:translate-y-0 transition-transform">
+  ...
+</div>
+```
+
+**Rationale:** `aria-expanded` is the correct ARIA pattern for disclosure widgets. The `data-open` attribute drives CSS state without needing to manage class lists. `translate` transitions are GPU-accelerated and smooth.
+
+### 5. Nav content: `nav` key in en.json / nl.json
+
+**Decision:** Add a top-level `"nav"` key to both content files:
+```json
+"nav": {
+  "links": [
+    { "label": "Services", "href": "/#services" },
+    { "label": "AI Launchpad", "href": "/ai-launchpad" },
+    { "label": "About", "href": "/about" }
+  ],
+  "cta": "Connect",
+  "langSwitch": { "en": "EN", "nl": "NL" }
+}
+```
+NL links have the same hrefs with `/nl` prefix where needed; CTA becomes "Verbind".
+
+**Rationale:** Consistent with the `meta` key established in step 002. Keeps all user-visible text out of component markup.
+
+**Note on NL link hrefs:** The `/#services` anchor on the EN homepage becomes `/nl#services` in NL (no slash before `#`). The `href` values in `nl.json` must reflect this.
+
+## Risks / Trade-offs
+
+- **Logo SVG inlining grows component size** → The logo SVG is ~1.5KB. Acceptable for a component rendered on every page; Astro will inline it into each page's HTML at build time. If the logo is ever animated or reused frequently, extract to a dedicated `Logo.astro` component.
+- **Scroll behavior flickers on page load** → On slow connections the nav may briefly show transparent before JS runs. Mitigation: set `data-scrolled="false"` as the default HTML attribute so no flash occurs on initial render.
+- **Mobile menu accessibility** → `aria-expanded` and `aria-controls` are set, but focus trapping inside the open menu is not implemented in this step. Acceptable for now — full accessibility audit is a later concern.
+- **NL href construction** → The `alternatePath` logic strips the `/nl` prefix. If a page path ever starts with `/nl` for a reason other than locale (e.g. `/nl-tech`), it would be incorrectly treated as Dutch. This site has no such routes, so it's safe — but document the assumption.

openspec/changes/step-003-navigation-bar/proposal.md

@@ -0,0 +1,29 @@
+## Why
+
+The base layout shell (step 002) includes stub `Nav.astro` and `Footer.astro` components that render nothing. Every page is unusable without navigation — users can't move between pages, switch languages, or reach the contact CTA. Step 003 fills in the navigation bar, the primary wayfinding element present on every page of the site.
+
+## What Changes
+
+- **`src/components/Nav.astro`** — implement the full responsive navigation bar (currently an empty stub)
+- **`src/content/en.json`** — add `nav` key with link labels and CTA text
+- **`src/content/nl.json`** — add `nav` key with Dutch equivalents
+- No changes to `BaseLayout.astro` — it already imports `Nav.astro`
+
+## Capabilities
+
+### New Capabilities
+
+- `navigation`: Responsive nav bar with logo, page links, language switcher, and Connect CTA. Transparent on load, solid Midnight background on scroll. Mobile hamburger menu with slide-in drawer.
+
+### Modified Capabilities
+
+- `content-i18n`: Add `nav` section to both `en.json` and `nl.json` content files (new keys, no requirement changes to the existing meta section or the i18n helper).
+
+## Impact
+
+- `website/src/components/Nav.astro` — full implementation replaces stub
+- `website/src/content/en.json` — new `nav` key added
+- `website/src/content/nl.json` — new `nav` key added
+- Vanilla JS `<script>` tag in Nav handles scroll behavior and mobile menu toggle — no external dependencies
+- No SEO impact (nav is not indexed content, no structured data changes)
+- All pages that use `BaseLayout` automatically get the nav (no per-page changes needed)

openspec/changes/step-003-navigation-bar/specs/content-i18n/spec.md

@@ -0,0 +1,20 @@
+## ADDED Requirements
+
+### Requirement: Locale content JSON files contain nav strings
+`src/content/en.json` and `src/content/nl.json` SHALL each contain a top-level `"nav"` key with the following structure:
+- `links`: array of objects with `label: string` and `href: string` for each nav link
+- `cta`: string — label for the Connect CTA button
+- `ctaHref`: string — href for the Connect CTA button
+- `langSwitch`: object with `en: string` and `nl: string` labels for the language switcher
+
+#### Scenario: en.json nav section has correct structure
+- **WHEN** `src/content/en.json` is parsed as JSON
+- **THEN** it SHALL have a `nav` object containing `links` (array of 3 items with `label` and `href`), `cta` string, `ctaHref` string, and `langSwitch` object with `en` and `nl` keys
+
+#### Scenario: nl.json nav section has Dutch labels
+- **WHEN** `src/content/nl.json` is parsed as JSON
+- **THEN** `nav.links` SHALL contain Dutch labels ("Diensten", "AI Launchpad", "Over Ons"), `nav.cta` SHALL be "Verbind", and `nav.ctaHref` SHALL be "/nl/contact"
+
+#### Scenario: Build succeeds with nav strings added
+- **WHEN** `npm run build` is executed after adding `nav` keys to both JSON files
+- **THEN** the build SHALL complete without TypeScript errors

openspec/changes/step-003-navigation-bar/specs/navigation/spec.md

@@ -0,0 +1,93 @@
+## ADDED Requirements
+
+### Requirement: Nav renders logo linking to homepage
+The navigation bar SHALL display the Qumo wordmark logo (`logo-wide.svg` inlined as SVG) on the left side, wrapped in an `<a>` tag linking to the locale-appropriate homepage (`/` for EN, `/nl` for NL). The logo fill SHALL use `currentColor` so it inherits the Snow text color on the Midnight nav background.
+
+#### Scenario: Logo is visible on dark background
+- **WHEN** the page renders with `Nav.astro` included
+- **THEN** the logo SVG SHALL have `class="text-snow"` (or equivalent) so its paths render as Snow (`#F3F3F3`) on the Midnight background
+
+#### Scenario: Logo links to locale homepage
+- **WHEN** the user is on an English page and clicks the logo
+- **THEN** the browser SHALL navigate to `/`
+
+#### Scenario: Logo links to NL homepage on Dutch pages
+- **WHEN** the user is on a Dutch page (`/nl/...`) and clicks the logo
+- **THEN** the browser SHALL navigate to `/nl`
+
+---
+
+### Requirement: Nav renders three page links
+The navigation bar SHALL render three links: **Services** (→ `/#services`), **AI Launchpad** (→ `/ai-launchpad`), **About** (→ `/about`). Label text SHALL come from the `nav.links` array in the locale content JSON. On Dutch pages, links SHALL point to `/nl#services`, `/nl/ai-launchpad`, `/nl/about`.
+
+#### Scenario: EN nav links render with correct hrefs
+- **WHEN** the page locale is `en`
+- **THEN** the three links SHALL have `href` values `/#services`, `/ai-launchpad`, `/about` with labels "Services", "AI Launchpad", "About"
+
+#### Scenario: NL nav links render with correct hrefs
+- **WHEN** the page locale is `nl`
+- **THEN** the three links SHALL have `href` values `/nl#services`, `/nl/ai-launchpad`, `/nl/about` with labels "Diensten", "AI Launchpad", "Over Ons"
+
+---
+
+### Requirement: Nav renders Connect CTA button
+The navigation bar SHALL render a "Connect" CTA button on the right side linking to `/contact` (EN) or `/nl/contact` (NL), with the `wum-arrow.svg` chevron icon inline. The button SHALL be styled distinctly from nav links (border or background treatment matching the staging site).
+
+#### Scenario: Connect button links to contact page
+- **WHEN** the page locale is `en`
+- **THEN** a button or link with label "Connect" and `href="/contact"` SHALL be present in the nav
+
+#### Scenario: NL Connect button uses Dutch label and NL href
+- **WHEN** the page locale is `nl`
+- **THEN** the CTA SHALL display "Verbind" and link to `/nl/contact`
+
+---
+
+### Requirement: Nav renders language switcher
+The navigation bar SHALL render a language switcher that links to the alternate locale version of the current page. The current locale SHALL be shown as active/non-linked; the alternate SHALL be a clickable link.
+
+#### Scenario: EN page shows NL as switchable link
+- **WHEN** the current page is `/about`
+- **THEN** the language switcher SHALL show "EN" (active, non-linked) and "NL" linking to `/nl/about`
+
+#### Scenario: NL page shows EN as switchable link
+- **WHEN** the current page is `/nl/ai-launchpad`
+- **THEN** the language switcher SHALL show "NL" (active, non-linked) and "EN" linking to `/ai-launchpad`
+
+---
+
+### Requirement: Nav is fixed and transitions background on scroll
+The `<nav>` element SHALL be `position: fixed` at the top of the viewport with `z-index` above page content. On page load it SHALL have a transparent background. After the user scrolls more than 20px, it SHALL transition to a solid Midnight (`#102022`) background. The transition SHALL be smooth (CSS `transition-colors`).
+
+#### Scenario: Nav is transparent on page load
+- **WHEN** a page loads and `window.scrollY` is 0
+- **THEN** the nav background SHALL be transparent
+
+#### Scenario: Nav becomes solid after scrolling
+- **WHEN** the user scrolls more than 20px down the page
+- **THEN** the nav background SHALL be `bg-midnight` (solid `#102022`)
+
+#### Scenario: Nav returns to transparent when scrolled back to top
+- **WHEN** the user scrolls back to within 20px of the top
+- **THEN** the nav background SHALL return to transparent
+
+---
+
+### Requirement: Nav collapses to hamburger menu on mobile
+On viewports below `md` breakpoint (768px), the three nav links, language switcher, and Connect CTA SHALL be hidden. A hamburger button SHALL be shown. Clicking the hamburger SHALL reveal a full-width slide-in mobile menu containing all nav links, the language switcher, and the Connect CTA.
+
+#### Scenario: Desktop nav links are hidden on mobile
+- **WHEN** viewport width is below 768px
+- **THEN** the desktop nav links SHALL have `class` including `hidden` (or equivalent responsive class)
+
+#### Scenario: Hamburger button opens mobile menu
+- **WHEN** the hamburger button is clicked
+- **THEN** the mobile menu panel SHALL become visible and `aria-expanded="true"` SHALL be set on the button
+
+#### Scenario: Hamburger button closes mobile menu
+- **WHEN** the mobile menu is open and the hamburger button is clicked again
+- **THEN** the mobile menu SHALL close and `aria-expanded="false"` SHALL be set on the button
+
+#### Scenario: Mobile menu contains all nav items
+- **WHEN** the mobile menu is open
+- **THEN** it SHALL contain all three page links, the language switcher, and the Connect CTA

openspec/changes/step-003-navigation-bar/tasks.md

@@ -0,0 +1,36 @@
+## 1. Content strings
+
+- [x] 1.1 Add `nav` key to `website/src/content/en.json` with `links` array (Services/AI Launchpad/About with hrefs), `cta: "Connect"`, `ctaHref: "/contact"`, and `langSwitch: { en: "EN", nl: "NL" }`
+- [x] 1.2 Add `nav` key to `website/src/content/nl.json` with Dutch labels (Diensten/AI Launchpad/Over Ons), NL hrefs, `cta: "Verbind"`, `ctaHref: "/nl/contact"`
+
+## 2. Nav component — structure and content
+
+- [x] 2.1 Replace the stub in `website/src/components/Nav.astro` with a `<nav id="main-nav">` element: fixed position, full width, high z-index, with `data-scrolled="false"` attribute
+- [x] 2.2 Add locale detection from `Astro.url.pathname`: `const isNl = Astro.url.pathname.startsWith('/nl')` and derive `locale` and `alternatePath`
+- [x] 2.3 Call `getContent(locale)` and destructure `nav` strings for use in the template
+- [x] 2.4 Inline `logo-wide.svg` on the left side: change all `fill="#161616"` attributes to `fill="currentColor"`, wrap in `<a>` linking to locale homepage (`/` or `/nl`), add `class="text-snow"` to the `<svg>`
+- [x] 2.5 Render the three nav links from `nav.links` in the desktop layout (hidden on mobile via `hidden md:flex`)
+- [x] 2.6 Render the language switcher: show current locale as plain text, alternate as `<a href={alternatePath}>` — both using `nav.langSwitch` labels
+- [x] 2.7 Render the Connect CTA button: `<a href={nav.ctaHref}>` with label `{nav.cta}` and inlined `wum-arrow.svg` icon, styled with border/Snow treatment
+
+## 3. Nav component — mobile menu
+
+- [x] 3.1 Add hamburger button (3-line SVG icon) visible only on mobile (`md:hidden`), with `id="menu-toggle"`, `aria-expanded="false"`, `aria-controls="mobile-menu"`
+- [x] 3.2 Add mobile menu panel `<div id="mobile-menu">` with slide-in transition classes: starts translated off-screen, transitions to visible when `data-open` attribute is set
+- [x] 3.3 Populate mobile menu with the same nav links, language switcher, and Connect CTA (can share content strings already destructured)
+
+## 4. Nav component — JavaScript behaviors
+
+- [x] 4.1 Add `<script>` tag for scroll behavior: listen to `window.scroll` (passive), toggle `data-scrolled` attribute on `#main-nav` when `scrollY > 20`
+- [x] 4.2 Add CSS to `global.css` (or scoped `<style>` in Nav) for scroll state: `nav[data-scrolled="true"] { background-color: var(--color-midnight); }` with `transition: background-color 300ms ease`
+- [x] 4.3 Add `<script>` tag for mobile menu toggle: clicking `#menu-toggle` toggles `data-open` on `#mobile-menu` and flips `aria-expanded` on the button
+
+## 5. Verification
+
+- [x] 5.1 Run `cd website && npm run build` — build must succeed with no TypeScript errors
+- [x] 5.2 Run `npm run dev` and open the smoke-test page — confirm logo renders in Snow on Midnight background
+- [x] 5.3 Verify desktop layout: logo left, three links center, EN/NL + Connect right
+- [ ] 5.4 Verify scroll behavior: nav transparent at top, Midnight background after scrolling 20px
+- [x] 5.5 Resize browser to mobile width — confirm hamburger appears, desktop links hidden
+- [x] 5.6 Click hamburger — confirm mobile menu slides in with all nav items
+- [x] 5.7 Verify language switcher: on `/`, NL link points to `/nl`; on a future `/nl/about`, EN link would point to `/about`

openspec/specs/content-i18n/spec.md

@@ -34,6 +34,25 @@ Defines the content localisation system for the Qumo website, including the JSON
 - **WHEN** `getContent("fr")` or any unrecognized locale string is called
 - **THEN** the function SHALL return the parsed contents of `src/content/en.json`
 
+### Requirement: Locale content JSON files contain nav strings
+`src/content/en.json` and `src/content/nl.json` SHALL each contain a top-level `"nav"` key with the following structure:
+- `links`: array of objects with `label: string` and `href: string` for each nav link
+- `cta`: string — label for the Connect CTA button
+- `ctaHref`: string — href for the Connect CTA button
+- `langSwitch`: object with `en: string` and `nl: string` labels for the language switcher
+
+#### Scenario: en.json nav section has correct structure
+- **WHEN** `src/content/en.json` is parsed as JSON
+- **THEN** it SHALL have a `nav` object containing `links` (array of 3 items with `label` and `href`), `cta` string, `ctaHref` string, and `langSwitch` object with `en` and `nl` keys
+
+#### Scenario: nl.json nav section has Dutch labels
+- **WHEN** `src/content/nl.json` is parsed as JSON
+- **THEN** `nav.links` SHALL contain Dutch labels ("Diensten", "AI Launchpad", "Over Ons"), `nav.cta` SHALL be "Verbind", and `nav.ctaHref` SHALL be "/nl/contact"
+
+#### Scenario: Build succeeds with nav strings added
+- **WHEN** `npm run build` is executed after adding `nav` keys to both JSON files
+- **THEN** the build SHALL complete without TypeScript errors
+
 ### Requirement: Content files use static imports (no runtime fetch)
 The `i18n.ts` helper SHALL use static ES module imports (`import enContent from './en.json'`) rather than dynamic `fetch` or `fs.readFile`. This ensures type safety and tree-shaking at build time.
 

openspec/specs/navigation/spec.md

@@ -0,0 +1,87 @@
+## Purpose
+
+Defines the navigation bar component (`Nav.astro`) present on every page of the Qumo website. Covers logo, page links, language switcher, Connect CTA, scroll behavior, and mobile hamburger menu.
+
+## Requirements
+
+### Requirement: Nav renders logo linking to homepage
+The navigation bar SHALL display the Qumo wordmark logo (`logo-wide.svg` inlined as SVG) on the left side, wrapped in an `<a>` tag linking to the locale-appropriate homepage (`/` for EN, `/nl` for NL). The logo fill SHALL use `currentColor` so it inherits the Snow text color on the Midnight nav background.
+
+#### Scenario: Logo is visible on dark background
+- **WHEN** the page renders with `Nav.astro` included
+- **THEN** the logo SVG SHALL have `class="text-snow"` (or equivalent) so its paths render as Snow (`#F3F3F3`) on the Midnight background
+
+#### Scenario: Logo links to locale homepage
+- **WHEN** the user is on an English page and clicks the logo
+- **THEN** the browser SHALL navigate to `/`
+
+#### Scenario: Logo links to NL homepage on Dutch pages
+- **WHEN** the user is on a Dutch page (`/nl/...`) and clicks the logo
+- **THEN** the browser SHALL navigate to `/nl`
+
+### Requirement: Nav renders three page links
+The navigation bar SHALL render three links: **Services** (→ `/#services`), **AI Launchpad** (→ `/ai-launchpad`), **About** (→ `/about`). Label text SHALL come from the `nav.links` array in the locale content JSON. On Dutch pages, links SHALL point to `/nl#services`, `/nl/ai-launchpad`, `/nl/about`.
+
+#### Scenario: EN nav links render with correct hrefs
+- **WHEN** the page locale is `en`
+- **THEN** the three links SHALL have `href` values `/#services`, `/ai-launchpad`, `/about` with labels "Services", "AI Launchpad", "About"
+
+#### Scenario: NL nav links render with correct hrefs
+- **WHEN** the page locale is `nl`
+- **THEN** the three links SHALL have `href` values `/nl#services`, `/nl/ai-launchpad`, `/nl/about` with labels "Diensten", "AI Launchpad", "Over Ons"
+
+### Requirement: Nav renders Connect CTA button
+The navigation bar SHALL render a "Connect" CTA button on the right side linking to `/contact` (EN) or `/nl/contact` (NL), with the `wum-arrow.svg` chevron icon inline. The button SHALL be styled distinctly from nav links (border or background treatment matching the staging site).
+
+#### Scenario: Connect button links to contact page
+- **WHEN** the page locale is `en`
+- **THEN** a button or link with label "Connect" and `href="/contact"` SHALL be present in the nav
+
+#### Scenario: NL Connect button uses Dutch label and NL href
+- **WHEN** the page locale is `nl`
+- **THEN** the CTA SHALL display "Verbind" and link to `/nl/contact`
+
+### Requirement: Nav renders language switcher
+The navigation bar SHALL render a language switcher that links to the alternate locale version of the current page. The current locale SHALL be shown as active/non-linked; the alternate SHALL be a clickable link.
+
+#### Scenario: EN page shows NL as switchable link
+- **WHEN** the current page is `/about`
+- **THEN** the language switcher SHALL show "EN" (active, non-linked) and "NL" linking to `/nl/about`
+
+#### Scenario: NL page shows EN as switchable link
+- **WHEN** the current page is `/nl/ai-launchpad`
+- **THEN** the language switcher SHALL show "NL" (active, non-linked) and "EN" linking to `/ai-launchpad`
+
+### Requirement: Nav is fixed and transitions background on scroll
+The `<nav>` element SHALL be `position: fixed` at the top of the viewport with `z-index` above page content. On page load it SHALL have a transparent background. After the user scrolls more than 20px, it SHALL transition to a solid Midnight (`#102022`) background. The transition SHALL be smooth (CSS `transition-colors`).
+
+#### Scenario: Nav is transparent on page load
+- **WHEN** a page loads and `window.scrollY` is 0
+- **THEN** the nav background SHALL be transparent
+
+#### Scenario: Nav becomes solid after scrolling
+- **WHEN** the user scrolls more than 20px down the page
+- **THEN** the nav background SHALL be `bg-midnight` (solid `#102022`)
+
+#### Scenario: Nav returns to transparent when scrolled back to top
+- **WHEN** the user scrolls back to within 20px of the top
+- **THEN** the nav background SHALL return to transparent
+
+### Requirement: Nav collapses to hamburger menu on mobile
+On viewports below `md` breakpoint (768px), the three nav links, language switcher, and Connect CTA SHALL be hidden. A hamburger button SHALL be shown. Clicking the hamburger SHALL reveal a full-width slide-in mobile menu containing all nav links, the language switcher, and the Connect CTA.
+
+#### Scenario: Desktop nav links are hidden on mobile
+- **WHEN** viewport width is below 768px
+- **THEN** the desktop nav links SHALL have `class` including `hidden` (or equivalent responsive class)
+
+#### Scenario: Hamburger button opens mobile menu
+- **WHEN** the hamburger button is clicked
+- **THEN** the mobile menu panel SHALL become visible and `aria-expanded="true"` SHALL be set on the button
+
+#### Scenario: Hamburger button closes mobile menu
+- **WHEN** the mobile menu is open and the hamburger button is clicked again
+- **THEN** the mobile menu SHALL close and `aria-expanded="false"` SHALL be set on the button
+
+#### Scenario: Mobile menu contains all nav items
+- **WHEN** the mobile menu is open
+- **THEN** it SHALL contain all three page links, the language switcher, and the Connect CTA

website/src/assets/brand/asset-3.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240.99 95.44">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: none;
+      }
+
+      .cls-2 {
+        stroke: url(#linear-gradient);
+        stroke-miterlimit: 10;
+        stroke-width: .5px;
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" y="0" width="240.99" height="95.44" rx="2.38" ry="2.38"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="3.93" y1="-743.19" x2="252.13" y2="-743.19" gradientTransform="translate(555.48 663.37) rotate(-45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#5257e4"/>
+      <stop offset=".25" stop-color="#5955dd"/>
+      <stop offset="1" stop-color="#f71e3e"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g class="cls-3">
+      <path class="cls-2" d="M116.09,15.64l66.94,66.94c3.87,3.87,10.14,3.87,14.01,0L263.97,15.65l27.27,27.27-40.58,40.58c-4.33,4.33-10.21,6.77-16.34,6.77h-88.59c-6.13,0-12.01-2.43-16.34-6.77l-40.58-40.58,36.09,36.09L57.96,12.07c-3.87-3.87-10.14-3.87-14.01,0L-22.98,79l-27.27-27.27L-9.67,11.15C-5.33,6.82.54,4.38,6.67,4.38h88.59c6.13,0,12.01,2.43,16.34,6.77l40.58,40.58"/>
+    </g>
+  </g>
+</svg>

website/src/assets/brand/group-56.svg

@@ -0,0 +1,72 @@
+<svg id="Group_56" data-name="Group 56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="79.242" height="79.242" viewBox="0 0 79.242 79.242">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_116" data-name="Rectangle 116" width="79.242" height="79.242" fill="none"/>
+    </clipPath>
+    <clipPath id="clip-path-3">
+      <rect id="Rectangle_108" data-name="Rectangle 108" width="1.063" height="31.697" fill="none"/>
+    </clipPath>
+    <clipPath id="clip-path-4">
+      <rect id="Rectangle_109" data-name="Rectangle 109" width="23.165" height="23.165" fill="none"/>
+    </clipPath>
+    <clipPath id="clip-path-5">
+      <rect id="Rectangle_110" data-name="Rectangle 110" width="31.697" height="1.063" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_55" data-name="Group 55" clip-path="url(#clip-path)">
+    <g id="Group_54" data-name="Group 54">
+      <g id="Group_53" data-name="Group 53" clip-path="url(#clip-path)">
+        <g id="Group_34" data-name="Group 34" transform="translate(39.09 47.545)" opacity="0.35">
+          <g id="Group_33" data-name="Group 33">
+            <g id="Group_32" data-name="Group 32" clip-path="url(#clip-path-3)">
+              <line id="Line_10" data-name="Line 10" y1="31.697" transform="translate(0.532 0)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+        <g id="Group_37" data-name="Group 37" transform="translate(11.229 44.849)" opacity="0.25">
+          <g id="Group_36" data-name="Group 36">
+            <g id="Group_35" data-name="Group 35" clip-path="url(#clip-path-4)">
+              <line id="Line_11" data-name="Line 11" y1="22.413" x2="22.413" transform="translate(0.376 0.376)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+        <g id="Group_40" data-name="Group 40" transform="translate(0 39.089)" opacity="0.15">
+          <g id="Group_39" data-name="Group 39">
+            <g id="Group_38" data-name="Group 38" clip-path="url(#clip-path-5)">
+              <line id="Line_12" data-name="Line 12" x2="31.697" transform="translate(0 0.532)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+        <g id="Group_43" data-name="Group 43" transform="translate(11.229 11.229)" opacity="0.05">
+          <g id="Group_42" data-name="Group 42">
+            <g id="Group_41" data-name="Group 41" clip-path="url(#clip-path-4)">
+              <line id="Line_13" data-name="Line 13" x2="22.413" y2="22.413" transform="translate(0.376 0.376)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+        <line id="Line_14" data-name="Line 14" y2="31.697" transform="translate(39.621)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+        <g id="Group_46" data-name="Group 46" transform="translate(44.849 11.229)" opacity="0.8">
+          <g id="Group_45" data-name="Group 45">
+            <g id="Group_44" data-name="Group 44" clip-path="url(#clip-path-4)">
+              <line id="Line_15" data-name="Line 15" x1="22.413" y2="22.413" transform="translate(0.376 0.376)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+        <g id="Group_49" data-name="Group 49" transform="translate(47.545 39.09)" opacity="0.65">
+          <g id="Group_48" data-name="Group 48">
+            <g id="Group_47" data-name="Group 47" clip-path="url(#clip-path-5)">
+              <line id="Line_16" data-name="Line 16" x1="31.697" transform="translate(0 0.532)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+        <g id="Group_52" data-name="Group 52" transform="translate(44.849 44.849)" opacity="0.5">
+          <g id="Group_51" data-name="Group 51">
+            <g id="Group_50" data-name="Group 50" clip-path="url(#clip-path-4)">
+              <line id="Line_17" data-name="Line 17" x1="22.413" y1="22.413" transform="translate(0.376 0.376)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

website/src/assets/brand/group-65.svg

@@ -0,0 +1,31 @@
+<svg id="Group_65" data-name="Group 65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="119.759" height="119.758" viewBox="0 0 119.759 119.758">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_153" data-name="Rectangle 153" width="119.759" height="119.758" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_58" data-name="Group 58">
+    <g id="Group_57" data-name="Group 57" clip-path="url(#clip-path)">
+      <line id="Line_18" data-name="Line 18" y1="47.903" transform="translate(59.879 71.855)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+    </g>
+  </g>
+  <line id="Line_19" data-name="Line 19" y1="33.873" x2="33.873" transform="translate(17.538 68.348)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+  <g id="Group_60" data-name="Group 60">
+    <g id="Group_59" data-name="Group 59" clip-path="url(#clip-path)">
+      <line id="Line_20" data-name="Line 20" x2="47.903" transform="translate(0 59.88)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+    </g>
+  </g>
+  <line id="Line_21" data-name="Line 21" x2="33.873" y2="33.873" transform="translate(17.538 17.538)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+  <g id="Group_62" data-name="Group 62">
+    <g id="Group_61" data-name="Group 61" clip-path="url(#clip-path)">
+      <line id="Line_22" data-name="Line 22" y2="47.903" transform="translate(59.879 0)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+    </g>
+  </g>
+  <line id="Line_23" data-name="Line 23" x1="33.873" y2="33.873" transform="translate(68.347 17.538)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+  <g id="Group_64" data-name="Group 64">
+    <g id="Group_63" data-name="Group 63" clip-path="url(#clip-path)">
+      <line id="Line_24" data-name="Line 24" x1="47.903" transform="translate(71.855 59.879)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+    </g>
+  </g>
+  <line id="Line_25" data-name="Line 25" x1="33.873" y1="33.873" transform="translate(68.347 68.348)" fill="none" stroke="#f4f8fc" stroke-miterlimit="10" stroke-width="2"/>
+</svg>

website/src/assets/brand/group-68.svg

@@ -0,0 +1,11 @@
+<svg id="Group_68" data-name="Group 68" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="226.617" height="60.682" viewBox="0 0 226.617 60.682">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_174" data-name="Rectangle 174" width="226.617" height="60.681" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_67" data-name="Group 67" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Path_53" data-name="Path 53" d="M49.525,14.028V7.641H79.617v6.387H68.4V44.28H60.742V14.028ZM86.51,44.8a11.409,11.409,0,0,1-4.687-.915,7.56,7.56,0,0,1-3.256-2.735,8.208,8.208,0,0,1-1.182-4.544,8.023,8.023,0,0,1,.84-3.848,6.8,6.8,0,0,1,2.292-2.5,11.106,11.106,0,0,1,3.291-1.432,24.976,24.976,0,0,1,3.9-.678q2.4-.252,3.862-.466A5.478,5.478,0,0,0,93.7,27a1.493,1.493,0,0,0,.661-1.322v-.109a3.29,3.29,0,0,0-1.073-2.63,4.408,4.408,0,0,0-3.006-.93,5.336,5.336,0,0,0-3.275.913,4.2,4.2,0,0,0-1.61,2.254L78.353,24.6a9.573,9.573,0,0,1,2.11-4.328,10.105,10.105,0,0,1,4.062-2.827,15.533,15.533,0,0,1,5.8-1,17.63,17.63,0,0,1,4.383.535,11.5,11.5,0,0,1,3.738,1.665,8.084,8.084,0,0,1,2.594,2.9,8.732,8.732,0,0,1,.949,4.206V44.28H94.757V40.47h-.214a7.779,7.779,0,0,1-1.772,2.271,8.2,8.2,0,0,1-2.666,1.52,11.094,11.094,0,0,1-3.6.537m2.183-5.262a6.413,6.413,0,0,0,2.968-.661,5.228,5.228,0,0,0,2.021-1.826,4.7,4.7,0,0,0,.735-2.592V31.538a3.927,3.927,0,0,1-.984.43q-.608.179-1.377.34-.771.145-1.539.269l-1.4.2a9.45,9.45,0,0,0-2.343.626,3.8,3.8,0,0,0-1.557,1.163,2.831,2.831,0,0,0-.554,1.788,2.764,2.764,0,0,0,1.127,2.38,4.931,4.931,0,0,0,2.9.8M105.88,16.8h7.62V44.28h-7.62Zm3.829-3.543a4.146,4.146,0,0,1-2.918-1.127,3.661,3.661,0,0,1-1.2-2.737,3.582,3.582,0,0,1,1.2-2.7,4.108,4.108,0,0,1,2.918-1.146,4.035,4.035,0,0,1,2.9,1.146,3.552,3.552,0,0,1,1.217,2.7,3.629,3.629,0,0,1-1.217,2.737,4.071,4.071,0,0,1-2.9,1.127m7.882,41.324V16.8h7.515v4.616h.338a10.262,10.262,0,0,1,1.448-2.254,7.585,7.585,0,0,1,2.506-1.931,8.512,8.512,0,0,1,3.862-.787,10.334,10.334,0,0,1,5.548,1.574,10.854,10.854,0,0,1,4.06,4.7,17.941,17.941,0,0,1,1.522,7.855,18.222,18.222,0,0,1-1.484,7.762,11.029,11.029,0,0,1-4.009,4.777,10.286,10.286,0,0,1-5.653,1.61,8.808,8.808,0,0,1-3.774-.735,7.755,7.755,0,0,1-2.523-1.841,9.4,9.4,0,0,1-1.5-2.273h-.231V54.584Zm7.46-24.042a12.233,12.233,0,0,0,.68,4.276,6.37,6.37,0,0,0,1.967,2.844,5.384,5.384,0,0,0,6.28-.019,6.358,6.358,0,0,0,1.95-2.863,12.25,12.25,0,0,0,.678-4.24,12.156,12.156,0,0,0-.661-4.185,6.218,6.218,0,0,0-1.95-2.825,4.964,4.964,0,0,0-3.165-1.02,5.027,5.027,0,0,0-3.149.984,6.184,6.184,0,0,0-1.952,2.792,12.1,12.1,0,0,0-.678,4.255m26.223,24.042a14.606,14.606,0,0,1-2.72-.231,9.861,9.861,0,0,1-2.074-.556l1.717-5.688a9.366,9.366,0,0,0,2.414.447,3.064,3.064,0,0,0,1.879-.5,3.747,3.747,0,0,0,1.308-1.824l.447-1.163L144.387,16.8H152.4l5.688,20.18h.285l5.743-20.18h8.069l-10.68,30.449a12.8,12.8,0,0,1-2.093,3.862,8.613,8.613,0,0,1-3.31,2.561,11.619,11.619,0,0,1-4.83.911" transform="translate(54.43 6.097)" fill="#234b50"/>
+    <path id="Path_54" data-name="Path 54" d="M4.4,2.248A3.357,3.357,0,0,1,7.573,0H81.327a1.679,1.679,0,0,1,1.679,1.679,1.662,1.662,0,0,1-.094.554L78.607,14.546a3.358,3.358,0,0,1-3.172,2.246H1.681A1.678,1.678,0,0,1,.094,14.559ZM21.2,23.238a3.357,3.357,0,0,1,3.17-2.248H53.2a1.679,1.679,0,0,1,1.679,1.679,1.662,1.662,0,0,1-.094.554L50.478,35.535a3.36,3.36,0,0,1-3.17,2.248H18.474A1.679,1.679,0,0,1,16.794,36.1a1.662,1.662,0,0,1,.094-.554Zm9.33,20.99a3.357,3.357,0,0,1,3.17-2.248H45.74a1.679,1.679,0,0,1,1.679,1.679,1.662,1.662,0,0,1-.094.554L43.016,56.527a3.36,3.36,0,0,1-3.17,2.246H27.8a1.679,1.679,0,0,1-1.679-1.679,1.662,1.662,0,0,1,.094-.554Z" transform="translate(0 0)" fill="#234b50"/>
+  </g>
+</svg>

website/src/assets/brand/group-70.svg

@@ -0,0 +1,13 @@
+<svg id="Group_70" data-name="Group 70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="262.226" height="63.803" viewBox="0 0 262.226 63.803">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_175" data-name="Rectangle 175" width="262.226" height="63.802" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_69" data-name="Group 69" clip-path="url(#clip-path)">
+    <path id="Path_55" data-name="Path 55" d="M199.149,32.4q0-12.063-6.88-12.4a12.921,12.921,0,0,0-5.34.878,7.822,7.822,0,0,0-2.8,1.481v19.2q4.4,2.762,7.811,2.563,7.21-.478,7.213-11.72m5.658.334a17.06,17.06,0,0,1-2.886,10.174,10.638,10.638,0,0,1-8.931,4.71,15.84,15.84,0,0,1-8.866-2.692V62.375L179.2,60.62V21.893a11.011,11.011,0,0,1,3.106-2.562A21.313,21.313,0,0,1,192.985,16.7l.07.07a9.793,9.793,0,0,1,8.85,4.71q2.9,4.385,2.9,11.25Zm30.07,11.45q0,8.22-1.647,11.386t-6.3,5.05a24.149,24.149,0,0,1-8.15,1.62l-.814-3.1a39.051,39.051,0,0,0,6.266-1.211,8.279,8.279,0,0,0,4.92-3.7q1.082-2.026,1.076-7.746V45.2a25.275,25.275,0,0,1-10.577,2.288,9.723,9.723,0,0,1-6.4-2.288,7.783,7.783,0,0,1-3.1-6.33V18.389l4.92-1.685V37.316A6.264,6.264,0,0,0,217.2,42.4a8.053,8.053,0,0,0,5.518,1.717,13.8,13.8,0,0,0,7.24-2.627V17.446h4.92V44.185Zm19.207,3.165q-.809.068-1.62.07a9.682,9.682,0,0,1-6.5-1.992,6.879,6.879,0,0,1-2.32-5.507V20.542h-3.37v-3.1h3.37V9.227l4.915-1.749v9.97h5.528v3.1h-5.528V39.787q0,2.771,1.485,3.92a7.518,7.518,0,0,0,4.043,1.082v2.562Zm29.791-.4h-4.92V27.955A8.978,8.978,0,0,0,277.6,22.97a4.916,4.916,0,0,0-4.334-2.358q-3.383,0-8.462,3.569V46.947h-4.92V1.55L264.808,0V20.677a17.142,17.142,0,0,1,10.309-3.435,8.217,8.217,0,0,1,6.331,2.627,9.249,9.249,0,0,1,2.428,6.535V46.947Zm26.151-15.32a15.111,15.111,0,0,0-1.756-7.66,7.346,7.346,0,0,0-6.465-3.892q-8.091.468-8.086,11.585a19.059,19.059,0,0,0,1.69,8.51q2.164,4.353,6.493,4.285Q310.026,44.389,310.027,31.626Zm5.389.032a17.5,17.5,0,0,1-3.37,10.982,12.12,12.12,0,0,1-10.239,4.915A11.878,11.878,0,0,1,291.7,42.64a17.735,17.735,0,0,1-3.3-10.982,15.677,15.677,0,0,1,3.569-10.443,12.3,12.3,0,0,1,9.905-4.511,12.5,12.5,0,0,1,9.975,4.511A15.675,15.675,0,0,1,315.415,31.659Zm28.207,15.288H338.7V26.878a6.712,6.712,0,0,0-1.986-5.157,7.218,7.218,0,0,0-5.292-1.782,11.829,11.829,0,0,0-6.669,2.288v24.72h-4.92V21.619a24.248,24.248,0,0,1,7.816-4.037,23.873,23.873,0,0,1,5.932-.877,15.363,15.363,0,0,1,3.3.339,9.488,9.488,0,0,1,4.715,2.492,6.592,6.592,0,0,1,2.024,4.85Z" transform="translate(-100.277)" fill="#234b50"/>
+    <path id="Path_56" data-name="Path 56" d="M30.331,3.932a42.174,42.174,0,0,0-7.076.6c-6.266,1.107-7.4,3.424-7.4,7.7v5.644H30.659v1.881H10.293a9.246,9.246,0,0,0-9.251,7.508,27.68,27.68,0,0,0,0,15.05C2.1,46.7,4.609,49.825,8.913,49.825H14V43.059a9.41,9.41,0,0,1,9.251-9.2H38.046a7.46,7.46,0,0,0,7.4-7.525v-14.1c0-4.013-3.386-7.028-7.4-7.7A46.2,46.2,0,0,0,30.331,3.932ZM22.323,8.471A2.822,2.822,0,1,1,19.544,11.3,2.81,2.81,0,0,1,22.323,8.471Z" transform="translate(0 -2.2)" fill="#234b50"/>
+    <path id="Path_57" data-name="Path 57" d="M67.436,39.867v6.576a9.5,9.5,0,0,1-9.251,9.389H43.394a7.554,7.554,0,0,0-7.4,7.525v14.1c0,4.014,3.49,6.374,7.4,7.525a24.77,24.77,0,0,0,14.791,0c3.728-1.079,7.4-3.252,7.4-7.525V71.814H50.8V69.933H72.993c4.3,0,5.907-3,7.4-7.508,1.546-4.638,1.481-9.1,0-15.049-1.064-4.284-3.095-7.508-7.4-7.508ZM59.117,75.576a2.822,2.822,0,1,1-2.779,2.813,2.795,2.795,0,0,1,2.779-2.813" transform="translate(-20.139 -22.308)" fill="#234b50"/>
+    <path id="Path_58" data-name="Path 58" d="M571.676,21.959h.862v-5.41h2.043V15.9h-4.95v.645h2.044v5.41m3.671,0h.737V17.018l1.6,4.941h.82l1.667-4.924v4.925h.8V15.9h-1.064l-1.822,5.187L576.536,15.9h-1.189v6.055" transform="translate(-318.749 -8.899)" fill="#234b50"/>
+  </g>
+</svg>

website/src/assets/brand/group-71.svg

@@ -0,0 +1,10 @@
+<svg id="Group_71" data-name="Group 71" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30.302" height="30.222" viewBox="0 0 30.302 30.222">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_7" data-name="Rectangle 7" width="30.302" height="30.221" fill="#234b50"/>
+    </clipPath>
+  </defs>
+  <g id="Group_5" data-name="Group 5" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Path_20" data-name="Path 20" d="M29.937,15.933,15.962,29.908a1.165,1.165,0,0,1-1.646-1.646L26.3,16.274H1.165a1.165,1.165,0,0,1,0-2.329H26.3L14.316,1.958A1.165,1.165,0,0,1,15.962.312L29.937,14.287a1.146,1.146,0,0,1,.047,1.63.041.041,0,0,1-.047.016" transform="translate(0 0.001)" fill="#234b50"/>
+  </g>
+</svg>

website/src/assets/brand/group-78.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="290.291" height="70" viewBox="0 0 290.291 70">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_964" data-name="Rectangle 964" width="290.291" height="70" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_78" data-name="Group 78" clip-path="url(#clip-path)">
+    <path id="Path_95" data-name="Path 95" d="M69.5,37.262V17.321a2.609,2.609,0,0,0-2.773-2.575H57.536a2.977,2.977,0,0,1-2.8-3V2.773A2.772,2.772,0,0,0,51.965,0H32.74a8.71,8.71,0,0,0-6.157,2.551L14.567,14.567l-.174.174L2.551,26.583A8.71,8.71,0,0,0,0,32.74V52.681a2.6,2.6,0,0,0,2.773,2.556h8.963a2.988,2.988,0,0,1,3.011,2.8V67.23A2.6,2.6,0,0,0,17.309,70H36.762a8.71,8.71,0,0,0,6.157-2.551l9.317-9.32a1.473,1.473,0,0,1,2.513,1.042v8.118A2.711,2.711,0,0,0,57.46,70H70.9a2.709,2.709,0,0,0,2.708-2.711V57.96A2.708,2.708,0,0,0,70.9,55.252H58.672a1.472,1.472,0,0,1-1.04-2.513l9.317-9.32A8.7,8.7,0,0,0,69.5,37.262M14.751,51.934V18.492a3.742,3.742,0,0,1,3.741-3.741h32.94a3.317,3.317,0,0,1,3.318,3.318V51.934a3.317,3.317,0,0,1-3.318,3.318H18.068a3.317,3.317,0,0,1-3.318-3.318" transform="translate(0 0)" fill="#f3f3f3"/>
+    <path id="Path_96" data-name="Path 96" d="M118.606,14.269V9.157h-2.068V8.234H121.7v.923h-2.066v5.112Zm3.913,0V8.234h1.93l1.468,5.083h.167l1.464-5.083h1.935v6.035h-1.038V9.157h-.162l-1.495,5.112H125.21l-1.495-5.112h-.164v5.112Z" transform="translate(160.811 11.362)" fill="#f3f3f3"/>
+    <path id="Path_97" data-name="Path 97" d="M84.792,46.77a1.655,1.655,0,0,1-.167-2.166,25.458,25.458,0,0,0,4.917-15.546C89.542,14.494,79.087,4.1,64.313,4.1s-25.22,10.391-25.22,24.956c0,14.7,10.455,25.032,25.22,25.032A26.1,26.1,0,0,0,79.7,49.423l4.677,4.667h7.739ZM64.313,48.8c-11.188,0-19.2-8.273-19.2-19.737S53.125,9.4,64.313,9.4,83.45,17.609,83.45,29.059a20.434,20.434,0,0,1-3.922,12.449l-10.4-10.4A4.428,4.428,0,0,0,66,29.815H60.077L75.617,45.344a19.254,19.254,0,0,1-11.3,3.451" transform="translate(53.944 5.661)" fill="#f3f3f3"/>
+    <path id="Path_98" data-name="Path 98" d="M92.768,10.556V43.994h-5.5V39.424h-.662a12.156,12.156,0,0,1-10.462,5.762c-8.541,0-13.906-6.159-13.906-14.7V10.556h5.5V30.485c0,5.7,3.31,9.734,9.072,9.734a10.258,10.258,0,0,0,10.462-10.2V10.556Z" transform="translate(85.889 14.566)" fill="#f3f3f3"/>
+    <path id="Path_99" data-name="Path 99" d="M77.03,44.762V11.325h5.3v4.436h.662A10.834,10.834,0,0,1,92.723,10a12.153,12.153,0,0,1,10.924,6.49h.6a12.593,12.593,0,0,1,11.19-6.423c7.88,0,13.508,6.093,13.508,14.767V44.762h-5.5v-20c0-5.7-3.644-9.8-8.675-9.8-5.364,0-9.139,4.105-9.139,9.8v20h-5.5v-20c0-5.9-3.444-9.8-8.608-9.8-5.431,0-9.006,3.905-9.006,9.8v20Z" transform="translate(106.294 13.797)" fill="#f3f3f3"/>
+    <path id="Path_100" data-name="Path 100" d="M100.814,28.158c0-10.526,7.418-18.011,17.944-18.011,10.462,0,17.944,7.485,17.944,18.011,0,10.6-7.482,18.078-17.944,18.078-10.526,0-17.944-7.482-17.944-18.078m30.394,0c0-7.549-5.231-13.044-12.449-13.044-7.282,0-12.447,5.5-12.447,13.044,0,7.613,5.164,13.111,12.447,13.111,7.218,0,12.449-5.5,12.449-13.111" transform="translate(139.113 14.001)" fill="#f3f3f3"/>
+  </g>
+</svg>

website/src/assets/brand/number-1.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 747.88 379.48">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" x="0" width="747.88" height="379.48"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="1101.67" y1="-4813.07" x2="1778.51" y2="-4813.07" gradientTransform="translate(2760.64 4606.93) rotate(-45)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#5257e4"/>
+      <stop offset=".25" stop-color="#5955dd"/>
+      <stop offset="1" stop-color="#f71e3e"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g class="cls-3">
+      <path class="cls-2" d="M685.97,303.06h-241.59c-17.01,0-33.01-6.63-45.04-18.66L204.56,89.62c-4.97-4.97-11.59-7.71-18.62-7.71s-13.65,2.74-18.62,7.71L-15.68,272.62l-75.33-75.33L20.14,86.15c12.03-12.03,28.03-18.66,45.04-18.66h241.59c17.01,0,33.01,6.63,45.04,18.66l194.78,194.78c10.27,10.26,26.97,10.26,37.25,0l183-183,75.33,75.33-111.14,111.14c-12.03,12.03-28.03,18.66-45.04,18.66ZM326.79,209.93l73.51,73.51c11.77,11.77,27.43,18.26,44.08,18.26h241.59c16.65,0,32.31-6.48,44.08-18.26l110.18-110.18-73.4-73.4-182.03,182.03c-10.8,10.8-28.37,10.8-39.17,0l-194.78-194.78c-11.77-11.77-27.43-18.26-44.08-18.26H65.18c-16.65,0-32.31,6.48-44.08,18.26l-110.18,110.18L-15.68,270.69,166.35,88.66c5.23-5.23,12.19-8.11,19.59-8.11s14.35,2.88,19.59,8.11l121.27,121.27Z"/>
+    </g>
+  </g>
+</svg>

website/src/assets/brand/number-2.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 747.88 379.48">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" width="747.88" height="379.48"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="-98.06" y1="185.28" x2="835.1" y2="185.28" gradientTransform="translate(737.03 370.55) rotate(-180)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#5257e4"/>
+      <stop offset=".25" stop-color="#5955dd"/>
+      <stop offset="1" stop-color="#f71e3e"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g class="cls-3">
+      <path class="cls-2" d="M58.12,67.49h241.59c17.01,0,33.01,6.63,45.04,18.66l194.78,194.78c4.97,4.97,11.59,7.71,18.62,7.71s13.65-2.74,18.62-7.71l183-183,75.33,75.33-111.14,111.14c-12.03,12.03-28.03,18.66-45.04,18.66h-241.59c-17.01,0-33.01-6.63-45.04-18.66L197.5,89.62c-10.27-10.26-26.97-10.26-37.25,0L-22.74,272.62l-75.33-75.33L13.08,86.15c12.03-12.03,28.03-18.66,45.04-18.66ZM417.3,160.63l-73.51-73.51c-11.77-11.77-27.43-18.26-44.08-18.26H58.12c-16.65,0-32.31,6.48-44.08,18.26l-110.18,110.18,73.4,73.4L159.29,88.66c10.8-10.8,28.37-10.8,39.17,0l194.78,194.78c11.77,11.77,27.43,18.26,44.08,18.26h241.59c16.65,0,32.31-6.48,44.08-18.26l110.18-110.18-73.4-73.4-182.03,182.03c-5.23,5.23-12.19,8.11-19.59,8.11s-14.35-2.88-19.59-8.11l-121.27-121.27Z"/>
+    </g>
+  </g>
+</svg>

website/src/assets/brand/number-3.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 747.88 379.48">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" width="747.88" height="379.48"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="-105.62" y1="-1170.13" x2="827.54" y2="-1170.13" gradientTransform="translate(1.6 1356.21)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#5257e4"/>
+      <stop offset=".25" stop-color="#5955dd"/>
+      <stop offset="1" stop-color="#f71e3e"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g class="cls-3">
+      <path class="cls-2" d="M672.96,303.86h-241.59c-17.01,0-33.01-6.63-45.04-18.66L191.55,90.42c-4.97-4.97-11.59-7.71-18.62-7.71s-13.65,2.74-18.62,7.71L-28.69,273.42l-75.33-75.33L7.12,86.95c12.03-12.03,28.03-18.66,45.04-18.66h241.59c17.01,0,33.01,6.63,45.04,18.66l194.78,194.78c10.27,10.26,26.97,10.26,37.25,0l183-183,75.33,75.33-111.14,111.14c-12.03,12.03-28.03,18.66-45.04,18.66ZM313.78,210.73l73.51,73.51c11.77,11.77,27.43,18.26,44.08,18.26h241.59c16.65,0,32.31-6.48,44.08-18.26l110.18-110.18-73.4-73.4-182.03,182.03c-10.8,10.8-28.37,10.8-39.17,0l-194.78-194.78c-11.77-11.77-27.43-18.26-44.08-18.26H52.17c-16.65,0-32.31,6.48-44.08,18.26l-110.18,110.18,73.4,73.4L153.34,89.46c5.23-5.23,12.19-8.11,19.59-8.11,7.4,0,14.35,2.88,19.59,8.11l121.27,121.27Z"/>
+    </g>
+  </g>
+</svg>

website/src/assets/cloud/hetzner.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.45 22.25">
+  <defs>
+    <style type="text/css">
+      .cls-1{fill:#d50c2d}
+    </style>
+  </defs>
+ <path class="cls-1" d="M174.05,14.12a10.22,10.22,0,0,0,4.53-2l0,0a6.15,6.15,0,0,0,1.68-4.78,7.71,7.71,0,0,0-1.14-4.06A6.47,6.47,0,0,0,173.84.09l-1.09,0L170.2,0,158.66,0c-.7,0-1,.29-1,1V21.22c0,.7.29,1,1,1h3c.7,0,1-.29,1-1v-6.7h3.67a3.48,3.48,0,0,1,2.17.91l5.82,5.85a3.08,3.08,0,0,0,2,.92h4.47c.7,0,.87-.41.38-.91Zm-.76-4.3H162.64V4.72h10.65a2.13,2.13,0,0,1,1.87,2.15v.79A2.14,2.14,0,0,1,173.29,9.82Z"/>
+ <path class="cls-1" d="M153,17.52H136.47V13.35h13.19c.7,0,1-.29,1-1V9.92c0-.7-.29-1-1-1h-13.2V4.76H153c.7,0,1-.29,1-1V1c0-.7-.29-1-1-1H132.38c-.7,0-1,.29-1,1V21.24c0,.7.29,1,1,1H153c.7,0,1-.29,1-1V18.51C154,17.81,153.67,17.52,153,17.52Z"/>
+ <path class="cls-1" d="M127.73,7.3a7.25,7.25,0,0,0-1.13-4A6.61,6.61,0,0,0,121.24,0L106.08,0c-.71,0-1,.29-1,1V21.22c0,.7.29,1,1,1h3.26c.7,0,1-.28,1-1V4.73l8.78,0c1.87,0,3.69,1.24,3.69,3.11V21.24c0,.7.29,1,1,1h2.95c.71,0,1-.29,1-1Z"/>
+ <path class="cls-1" d="M100.47,17.39l-14.25,0L100.5,4.84a2.57,2.57,0,0,0,1-1.84V1c0-.7-.3-1-1-1H79.83c-.7,0-1,.29-1,1V3.77c0,.7.29,1,1,1H93.08L79.79,17.24a2.62,2.62,0,0,0-1,1.84v2.17c0,.7.29,1,1,1l20.65,0c.7,0,1-.29,1-1V18.38C101.46,17.68,101.17,17.39,100.47,17.39Z"/>
+ <path class="cls-1" d="M74.19,0H53.55c-.71,0-1,.28-1,1V3.76c0,.7.28,1,1,1h7.78V21.24c0,.7.29,1,1,1h3.3c.7,0,1-.29,1-1V4.75h7.57c.7,0,1-.29,1-1V1C75.18.32,74.89,0,74.19,0Z"/>
+ <path class="cls-1" d="M47.91,17.52H31.41V13.35H44.6c.7,0,1-.29,1-1V9.92c0-.7-.28-1-1-1H31.41V4.76h16.5c.7,0,1-.29,1-1V1c0-.7-.29-1-1-1H27.33c-.7,0-1,.29-1,1V21.24c0,.7.29,1,1,1H47.91c.7,0,1-.29,1-1V18.51C48.9,17.81,48.61,17.52,47.91,17.52Z"/>
+ <path class="cls-1" d="M21.63,0H18.52c-.7,0-1,.29-1,1V8.87H5.13V1c0-.7-.29-1-1-1H1C.29,0,0,.29,0,1V21.25c0,.71.29,1,1,1H4.13c.7,0,1-.28,1-1v-8h12.4v8c0,.7.29,1,1,1h3.11c.7,0,1-.29,1-1V1C22.62.32,22.33,0,21.63,0Z"/>
+</svg>

website/src/assets/cloud/hostinger.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="katman_1" x="0px" y="0px" style="enable-background:new 0 0 186 126;" xml:space="preserve" transform="rotate(0) scale(1, 1)" viewBox="18 48 150 30">
+<style type="text/css">.st0 { fill: #6747c7; }</style>
+<path class="st0" d="M63.1,56.9h2.8v12.5h-2.8v-5.3h-4.7v5.3h-2.8V56.9h2.8v4.8h4.7V56.9z"/>
+<path class="st0" d="M72.5,63.1c0,0.6,0.1,1.2,0.2,1.7c0.2,0.5,0.4,0.9,0.6,1.3c0.3,0.4,0.6,0.6,1,0.8c0.4,0.2,0.9,0.3,1.4,0.3&#10;&#9;c0.5,0,1-0.1,1.4-0.3c0.4-0.2,0.8-0.5,1-0.8c0.3-0.4,0.5-0.8,0.6-1.3c0.2-0.5,0.2-1,0.2-1.7c0-0.6-0.1-1.2-0.2-1.7&#10;&#9;c-0.2-0.5-0.4-0.9-0.6-1.3c-0.3-0.4-0.6-0.6-1-0.8c-0.4-0.2-0.9-0.3-1.4-0.3c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.8,0.5-1,0.8&#10;&#9;c-0.3,0.4-0.5,0.8-0.6,1.3C72.6,62,72.5,62.5,72.5,63.1z M82,63.1c0,1.1-0.2,2-0.5,2.8c-0.3,0.8-0.8,1.5-1.3,2c-0.6,0.5-1.2,1-2,1.2&#10;&#9;c-0.8,0.3-1.6,0.4-2.5,0.4c-0.9,0-1.7-0.1-2.4-0.4c-0.8-0.3-1.4-0.7-2-1.2c-0.6-0.5-1-1.2-1.3-2c-0.3-0.8-0.5-1.7-0.5-2.8&#10;&#9;c0-1.1,0.2-2,0.5-2.8c0.3-0.8,0.8-1.5,1.4-2c0.6-0.6,1.2-1,2-1.2c0.8-0.3,1.5-0.4,2.4-0.4c0.9,0,1.7,0.1,2.4,0.4&#10;&#9;c0.8,0.3,1.4,0.7,2,1.2c0.6,0.6,1,1.2,1.3,2C81.9,61.1,82,62.1,82,63.1z"/>
+<path class="st0" d="M89.1,67.2c0.4,0,0.7,0,1-0.1c0.3-0.1,0.5-0.2,0.6-0.3c0.2-0.1,0.3-0.2,0.3-0.4c0.1-0.2,0.1-0.3,0.1-0.5&#10;&#9;c0-0.4-0.2-0.7-0.6-1c-0.4-0.3-1-0.6-2-0.9c-0.4-0.1-0.8-0.3-1.2-0.5c-0.4-0.2-0.8-0.4-1.1-0.7c-0.3-0.3-0.6-0.6-0.8-1&#10;&#9;c-0.2-0.4-0.3-0.9-0.3-1.5s0.1-1.1,0.3-1.6c0.2-0.5,0.5-0.9,0.9-1.2c0.4-0.3,0.9-0.6,1.4-0.7c0.6-0.2,1.2-0.3,1.9-0.3&#10;&#9;c0.8,0,1.6,0.1,2.2,0.3c0.6,0.2,1.1,0.4,1.5,0.6l-0.8,2.2c-0.3-0.2-0.7-0.3-1.2-0.5C91,59.1,90.5,59,89.9,59c-0.7,0-1.2,0.1-1.5,0.3&#10;&#9;c-0.3,0.2-0.4,0.5-0.4,0.9c0,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.3,0.3,0.5,0.4c0.2,0.1,0.4,0.2,0.7,0.3c0.3,0.1,0.5,0.2,0.9,0.3&#10;&#9;c0.6,0.2,1.2,0.5,1.7,0.7c0.5,0.2,0.9,0.5,1.2,0.8c0.3,0.3,0.6,0.7,0.7,1.1c0.2,0.4,0.2,0.9,0.2,1.5c0,1.2-0.4,2.1-1.2,2.7&#10;&#9;c-0.8,0.6-2.1,1-3.7,1c-0.6,0-1.1,0-1.5-0.1c-0.4-0.1-0.8-0.1-1.2-0.2c-0.3-0.1-0.6-0.2-0.9-0.3c-0.2-0.1-0.5-0.2-0.6-0.3l0.8-2.2&#10;&#9;c0.4,0.2,0.8,0.4,1.4,0.5C87.6,67.1,88.3,67.2,89.1,67.2z"/>
+<path class="st0" d="M106.4,56.9v2.4h-3.8v10.1h-2.8V59.3h-3.8v-2.4H106.4z"/>
+<path class="st0" d="M109.6,69.4h2.8V56.9h-2.8V69.4z"/>
+<path class="st0" d="M125,69.4c-0.8-1.4-1.7-2.8-2.6-4.2c-0.9-1.4-1.9-2.7-3-3.9v8.2h-2.8V56.9h2.3c0.4,0.4,0.8,0.9,1.3,1.5&#10;&#9;c0.5,0.6,1,1.2,1.5,1.8c0.5,0.7,1,1.3,1.5,2c0.5,0.7,1,1.4,1.4,2v-7.4h2.8v12.5H125z"/>
+<path class="st0" d="M137.6,59.1c-1.3,0-2.3,0.4-2.8,1.1c-0.6,0.7-0.9,1.7-0.9,3c0,0.6,0.1,1.2,0.2,1.7c0.1,0.5,0.4,0.9,0.6,1.3&#10;&#9;c0.3,0.4,0.6,0.6,1.1,0.8c0.4,0.2,0.9,0.3,1.5,0.3c0.3,0,0.6,0,0.8,0c0.2,0,0.4,0,0.6-0.1v-4.3h2.8v6.2c-0.3,0.1-0.9,0.3-1.6,0.4&#10;&#9;c-0.7,0.1-1.7,0.2-2.8,0.2c-0.9,0-1.8-0.1-2.6-0.4c-0.8-0.3-1.4-0.7-2-1.3c-0.5-0.6-1-1.2-1.3-2c-0.3-0.8-0.4-1.7-0.4-2.8&#10;&#9;c0-1,0.2-2,0.5-2.8c0.3-0.8,0.8-1.5,1.3-2c0.6-0.6,1.2-1,2-1.3c0.8-0.3,1.6-0.4,2.4-0.4c0.6,0,1.1,0,1.6,0.1&#10;&#9;c0.5,0.1,0.9,0.2,1.2,0.3c0.3,0.1,0.6,0.2,0.8,0.3c0.2,0.1,0.4,0.2,0.5,0.3l-0.8,2.2c-0.4-0.2-0.8-0.4-1.3-0.5&#10;&#9;C138.8,59.1,138.2,59.1,137.6,59.1z"/>
+<path class="st0" d="M145.5,69.4V56.9h8.4v2.4h-5.6v2.4h5V64h-5v3h6v2.4H145.5z"/>
+<path class="st0" d="M161.6,59.1c-0.2,0-0.4,0-0.5,0c-0.2,0-0.3,0-0.5,0v3.4h0.8c1.1,0,1.8-0.1,2.3-0.4c0.5-0.3,0.7-0.7,0.7-1.3&#10;&#9;c0-0.6-0.2-1-0.7-1.3C163.2,59.3,162.5,59.1,161.6,59.1z M161.4,56.8c1.9,0,3.3,0.3,4.3,1c1,0.7,1.5,1.7,1.5,3.1&#10;&#9;c0,0.9-0.2,1.6-0.6,2.1c-0.4,0.5-1,1-1.7,1.3c0.3,0.3,0.5,0.7,0.8,1.1c0.3,0.4,0.6,0.8,0.8,1.3c0.3,0.4,0.5,0.9,0.8,1.4&#10;&#9;c0.3,0.5,0.5,0.9,0.7,1.4h-3.1c-0.2-0.4-0.5-0.8-0.7-1.2c-0.2-0.4-0.5-0.8-0.7-1.2c-0.2-0.4-0.5-0.8-0.7-1.1c-0.2-0.4-0.5-0.7-0.7-1&#10;&#9;h-1.4v4.6h-2.8V57.1c0.6-0.1,1.2-0.2,1.9-0.3C160.3,56.8,160.9,56.8,161.4,56.8z"/>
+<path class="st0" d="M18,62V48l7.1,3.8v6.3l9.4,0l7.2,3.9H18z M36.4,57v-9l7.3,3.7v9.5L36.4,57z M36.4,74.1v-6.3l-9.5,0&#10;&#9;c0,0-7.3-4-7.3-4L43.7,64v14L36.4,74.1z M18,74.1l0-9.2l7.1,4.1v8.7L18,74.1z"/>
+</svg>

website/src/assets/cloud/microsoft-azure.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.92 15.24"><path d="M9.1054 14.4308a3735.905 3735.905 0 004.6413-.8214l.0436-.0093-2.3874-2.8397c-1.313-1.5618-2.3873-2.8457-2.3873-2.853 0-.014 2.4651-6.8025 2.479-6.8267.0046-.008 1.6822 2.8883 4.0666 7.021 2.2323 3.869 4.0727 7.059 4.0898 7.0889l.0311.0543-7.5871-.001-7.5872-.001 4.5976-.8121zm29.0959-.6868c-1.155-.074-1.8266-.7316-2.0046-1.9626-.0474-.3274-.0476-.336-.0524-2.4617l-.0047-2.0575h1.0223l.004 1.99c.0036 1.7937.0059 2.004.023 2.1301.0696.5121.2082.8565.444 1.1036.1888.1978.4098.3137.7157.3751.1444.029.555.029.6865.0001.3101-.0682.5587-.2032.778-.4224.25-.2498.4348-.6043.5243-1.005l.0301-.1352.0034-2.0069.0033-2.0069h1.0437v6.3098H40.385v-.5005c0-.3401-.0037-.4994-.0116-.4967-.0064.0021-.033.0427-.059.0902-.178.3245-.4745.6214-.7994.8002-.3895.2143-.78.2906-1.3137.2564zm11.7224-.005c-.4077-.0307-.837-.1709-1.1878-.388-.7395-.4573-1.177-1.2113-1.3052-2.249-.0443-.359-.0496-.8414-.0126-1.1465.0826-.6817.3505-1.351.732-1.8288.0978-.1224.3197-.3443.4421-.442a2.7544 2.7544 0 011.1284-.5387c.2393-.0523.6608-.0769.915-.0533.6388.0592 1.2242.3599 1.622.8332.4043.481.6265 1.153.6549 1.9804.0044.1297.0055.357.0024.5052l-.0057.2695-2.237.0028-2.2371.0028v.0999c0 .3039.0738.65.2016.9445.1101.254.2997.5313.455.6655.3183.2752.7078.4399 1.1341.4795.158.0147.561-.0008.741-.0285.514-.079 1.0025-.2805 1.397-.5763a3.4082 3.4082 0 01.0988-.0723c.0115-.0072.0143.0837.014.466l-.0004.4749-.1057.0654c-.4464.276-.9577.4533-1.499.5196-.1617.0198-.7545.0287-.9478.0141zm1.947-4.0055c0-.5091-.2146-1.0746-.5182-1.3658-.2166-.2078-.4785-.3348-.7899-.383-.1473-.0228-.4577-.014-.613.0173-.3283.0664-.5998.2107-.8367.4447-.2492.2463-.4361.5455-.5536.8863-.0423.1226-.0917.3238-.107.4358l-.0074.0533h3.4257zm-30.3454 3.847c.0026-.0078.7623-2.0034 1.6881-4.4348l1.6834-4.4208h1.0817l.0449.115c.1371.3517 3.37 8.745 3.37 8.7494 0 .0028-.259.0052-.5754.0051l-.5754-.0001-.466-1.2405-.466-1.2406h-3.752l-.0164.0421c-.009.0232-.208.5814-.4424 1.2404l-.426 1.1984-.5767.0002c-.4564.0001-.5756-.0028-.5718-.0139zm5.443-3.414c0-.002-.3136-.852-.6969-1.889-.717-1.94-.757-2.0567-.8137-2.3682-.0265-.146-.04-.15-.0558-.0168-.0112.0952-.06.3084-.0978.4266-.0187.0587-.3415.9448-.7174 1.9693-.376 1.0244-.6835 1.8668-.6835 1.8721 0 .0053.6896.0096 1.5325.0096s1.5325-.0016 1.5325-.0035zm2.7731 3.2664v-.1615l1.8692-2.5695 1.8691-2.5695-1.6923-.0057-1.6923-.0056-.003-.4294-.0029-.4295h4.8954v.2901l-1.8693 2.5835c-1.0282 1.421-1.8694 2.586-1.8694 2.5889 0 .0029.8311.0053 1.8469.0053h1.8469v.8645h-5.1983zm13.7162.1541c-.0041-.0041-.0075-1.4289-.0075-3.1661V7.2622h1.0217v.6512c0 .3582.0043.6512.0097.6512.0053 0 .0301-.0586.0552-.1303.1149-.3283.314-.6351.5707-.879.2311-.2196.4953-.351.8071-.4013.0876-.014.1617-.0168.3368-.0122.22.0057.335.0218.4688.0655l.042.0138v1.0605l-.1206-.0604c-.2132-.1067-.4236-.149-.6765-.1358-.1646.0085-.2726.0297-.4042.079a1.2788 1.2788 0 00-.6437.5258c-.2222.3544-.3806.8099-.4273 1.2286-.0084.0751-.0133.687-.0153 1.8933l-.003 1.7824h-.5032c-.2768 0-.5066-.0034-.5107-.0075zM0 13.5648c0-.004 1.1249-1.9567 2.4998-4.3394l2.4998-4.3322 2.9132-2.4447C9.515 1.1039 10.8303.002 10.8356 0c.0052-.002-.0158.051-.0469.1178-.031.0669-1.4545 3.1201-3.1633 6.785l-3.107 6.6635-2.2592.0029C1.0167 13.5708 0 13.5688 0 13.5648z" fill="#0089d6"/></svg>

website/src/assets/icons/brain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#f3f3f3" viewBox="0 0 256 256"><path d="M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z"></path></svg>

website/src/assets/icons/dots-three-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#f3f3f3" viewBox="0 0 256 256"><path d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144ZM48,96a32,32,0,1,0,32,32A32,32,0,0,0,48,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,48,144ZM208,96a32,32,0,1,0,32,32A32,32,0,0,0,208,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,208,144Z"></path></svg>

website/src/assets/icons/eu-flag.svg

@@ -0,0 +1,55 @@
+<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:ns1="http://sozi.baierouge.fr" id="svg1092" sodipodi:docname="eu_flag_ok.svg" inkscape:export-filename="c:\joanna\Gfx\drawings_vector\admin\thumbs\HASH\eu_flag_ok.png" sodipodi:version="0.32" inkscape:export-xdpi="24.202694" version="1.0" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:export-ydpi="24.202694" inkscape:version="0.46" sodipodi:docbase="C:\temp\kbtemp\work" viewBox="0.04 0.05 728.68 494.48">
+  <sodipodi:namedview id="base" bordercolor="#666666" inkscape:pageshadow="2" inkscape:guide-bbox="true" pagecolor="#ffffff" inkscape:zoom="1.1070333" inkscape:window-width="1024" showgrid="false" borderopacity="1.0" inkscape:current-layer="svg1092" inkscape:cx="287.70588" inkscape:cy="327.11439" inkscape:window-y="88" inkscape:window-x="110" inkscape:window-height="678" inkscape:pageopacity="0.0" showguides="true"/>
+  <g id="g11182" inkscape:export-ydpi="11.000000" inkscape:export-xdpi="11.000000" inkscape:export-filename="C:\temp\kbtemp\work\euflag.png" transform="matrix(1.1457 0 0 1.1457 -218.65 -119.5)">
+    <rect id="flag_rectangle" style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;fill:#000099" height="430.43" width="634.85" y="104.93" x="191.46" inkscape:label="flag_rectangle"/>
+    <path id="flag_star" sodipodi:r2="9.1000004" style="stroke-opacity:.20886;fill-rule:evenodd;stroke:#e6f32e;stroke-width:1pt;fill:#ffcc00" sodipodi:type="star" d="m507.83 186.28l-13.81-10.36-14.41 10.29 5.59-16.33-14.23-10.53 17.25 0.27 5.61-16.79 5.09 16.49 17.7 0.15-14.12 9.93 5.33 16.88z" sodipodi:r1="24" inkscape:flatsided="false" sodipodi:arg1="0.9451007" sodipodi:arg2="1.5434192" transform="translate(153.72 151.39)" inkscape:randomized="0" sodipodi:cy="166.82816" sodipodi:cx="493.77145" inkscape:rounded="0" inkscape:label="flag_star" sodipodi:sides="5"/>
+    <use id="use10441" xlink:href="#flag_star" transform="translate(-18.714 -69.819)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10444" xlink:href="#use10441" transform="translate(-49.665 -50.385)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10445" xlink:href="#use10444" transform="translate(-69.819 -19.434)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10446" xlink:href="#use10445" transform="translate(-69.099 18.714)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10447" xlink:href="#use10446" transform="translate(-51.824 50.385)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10448" xlink:href="#use10447" transform="translate(-18.714 69.819)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10449" xlink:href="#use10448" transform="translate(18.714 71.259)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10450" xlink:href="#use10449" transform="translate(50.385 51.824)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10451" xlink:href="#use10450" transform="translate(69.819 18.714)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10452" xlink:href="#use10451" transform="translate(69.819 -18.714)" height="744.09448" width="1052.3622" y="0" x="0"/>
+    <use id="use10453" xlink:href="#use10452" transform="translate(51.824 -51.824)" height="744.09448" width="1052.3622" y="0" x="0"/>
+  </g>
+  <metadata>
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
+        <dc:publisher>
+          <cc:Agent rdf:about="http://openclipart.org/">
+            <dc:title>Openclipart</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:title>Flag of European Union</dc:title>
+        <dc:date>2009-04-05T07:21:12</dc:date>
+        <dc:description>Flag of European Union by HASH(0x89c79d4). From old OCAL site.</dc:description>
+        <dc:source>https://openclipart.org/detail/24073/flag-of-european-union-by-anonymous-24073</dc:source>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Anonymous</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>europe</rdf:li>
+            <rdf:li>european union</rdf:li>
+            <rdf:li>flag</rdf:li>
+            <rdf:li>sign</rdf:li>
+            <rdf:li>symbol</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+      </cc:Work>
+      <cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
+        <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
+        <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
+        <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>

website/src/assets/icons/globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"></path></svg>

website/src/assets/icons/info-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="51" height="51" viewBox="0 0 51 51">
+  <g id="Group_85" data-name="Group 85" transform="translate(-596 -8278)">
+    <g id="Ellipse_19" data-name="Ellipse 19" transform="translate(596 8278)" fill="none" stroke="#f3f3f3" stroke-width="1">
+      <circle cx="25.5" cy="25.5" r="25.5" stroke="none"/>
+      <circle cx="25.5" cy="25.5" r="25" fill="none"/>
+    </g>
+    <line id="Line_44" data-name="Line 44" y2="21" transform="translate(621.5 8296)" fill="none" stroke="#f3f3f3" stroke-width="2"/>
+    <line id="Line_44" data-name="Line 44" y2="3" transform="translate(621.5 8290)" fill="none" stroke="#f3f3f3" stroke-width="2"/>
+  </g>
+</svg>

website/src/assets/icons/pause-circle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#555" d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,1.39534884 C5.24778239,1.39534884 1.39534884,5.24778239 1.39534884,10 C1.39534884,14.7522176 5.24778239,18.6046512 10,18.6046512 C14.7522176,18.6046512 18.6046512,14.7522176 18.6046512,10 C18.6046512,5.24778239 14.7522176,1.39534884 10,1.39534884 Z M8.05611421,5.45454545 C8.43267199,5.45454545 8.73793239,5.75980585 8.73793239,6.13636364 L8.73793239,13.4084582 C8.73793239,13.7850159 8.43267199,14.0902763 8.05611421,14.0902763 C7.67955643,14.0902763 7.37429603,13.7850159 7.37429603,13.4084582 L7.37429603,6.13636364 C7.37429603,5.75980585 7.67955643,5.45454545 8.05611421,5.45454545 Z M12.6015688,5.45454545 C12.9781265,5.45454545 13.2833869,5.75980585 13.2833869,6.13636364 L13.2833869,13.4084582 C13.2833869,13.7850159 12.9781265,14.0902763 12.6015688,14.0902763 C12.225011,14.0902763 11.9197506,13.7850159 11.9197506,13.4084582 L11.9197506,6.13636364 C11.9197506,5.75980585 12.225011,5.45454545 12.6015688,5.45454545 Z"/>
+</svg>

website/src/assets/icons/play-button.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 60 60" xml:space="preserve">
+<g>
+	<path d="M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30
+		c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15
+		C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z"/>
+	<path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30
+		S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>
+</g>
+</svg>

website/src/assets/icons/plus-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="51" height="51" viewBox="0 0 51 51">
+  <g id="Group_85" data-name="Group 85" transform="translate(-596 -8278)">
+    <g id="Ellipse_19" data-name="Ellipse 19" transform="translate(596 8278)" fill="none" stroke="#f3f3f3" stroke-width="1">
+      <circle cx="25.5" cy="25.5" r="25.5" stroke="none"/>
+      <circle cx="25.5" cy="25.5" r="25" fill="none"/>
+    </g>
+    <line id="Line_44" data-name="Line 44" y2="21" transform="translate(621.5 8293)" fill="none" stroke="#f3f3f3" stroke-width="1"/>
+    <line id="Line_45" data-name="Line 45" x2="21" transform="translate(611.5 8303.5)" fill="none" stroke="#f3f3f3" stroke-width="1"/>
+  </g>
+</svg>

website/src/assets/icons/right-arrow-qumo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.487" height="22.145" viewBox="0 0 12.487 22.145">
+  <path id="Path_63" data-name="Path 63" d="M1446.874,1154.541l10.365,10.365-10.365,10.365" transform="translate(-1446.167 -1153.834)" fill="none" stroke="currentColor" stroke-width="2"/>
+</svg>

website/src/assets/icons/rocket-launch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#f3f3f3" viewBox="0 0 256 256"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"></path></svg>

website/src/assets/icons/wum-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.486" height="22.145" viewBox="0 0 12.486 22.145">
+  <path id="Path_10" data-name="Path 10" d="M1446.874,1154.541l10.365,10.365-10.365,10.365" transform="translate(-1446.167 -1153.834)" fill="none" stroke="currentColor" stroke-width="2"/>
+</svg>

website/src/assets/logos/logo-wide.svg

@@ -0,0 +1,7 @@
+<svg width="70" height="36" viewBox="0 0 70 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.2446 17.0815L67.2075 17.1187C67.4677 16.4125 67.988 16.1523 68.434 16.1523C69.0659 16.1523 69.6234 16.6355 69.6234 17.3417C69.6234 17.4904 69.6234 17.6762 69.5491 17.8992C68.2482 21.2444 65.4977 22.9541 62.8216 23.2143C61.5951 25.2957 59.588 26.8196 56.726 26.8196C52.6375 26.8196 50.8163 23.586 50.8163 20.055C50.8163 15.7063 53.5668 10.8744 58.1756 10.8744C59.1791 10.8744 60.034 11.0975 60.7402 11.3948C62.8216 12.1753 64.1597 14.8886 64.1597 17.7877C64.1597 18.7169 64.0853 19.6461 63.8623 20.5382C65.2376 20.055 66.5384 18.9399 67.2446 17.0815ZM59.4765 13.9222V13.8851C58.6588 13.8851 58.1756 14.9629 58.1756 16.2638C58.1756 18.1594 59.2163 19.9063 60.8517 20.5382C61.1119 19.7205 61.2234 18.7913 61.2234 17.7134C61.2234 15.632 60.5915 13.9222 59.4765 13.9222ZM56.7632 24.1063C57.8039 24.1063 58.8446 23.6603 59.6623 22.7311C57.2464 21.6532 55.7225 19.1258 55.7225 16.7098C55.7225 15.8921 55.8712 15.0373 56.0942 14.2939C54.6075 15.5205 53.7526 17.9364 53.7526 20.055C53.7526 22.8054 55.0535 24.1063 56.7632 24.1063Z" fill="#161616"/>
+<path d="M51.3901 17.0815L51.3529 17.1187C51.6131 16.4125 52.0591 16.1152 52.5051 16.1152C53.137 16.1152 53.7688 16.6727 53.7688 17.3789C53.7688 17.5647 53.7317 17.7134 53.6573 17.8992C52.2078 21.4302 50.052 25.5559 46.5954 27.9718L46.5211 28.7152C46.1122 33.1754 43.845 36.0001 40.983 36.0001C38.8272 36.0001 37.5635 34.5134 37.5635 32.7665C37.5635 29.6072 40.7971 28.455 43.8078 26.5223C43.8821 25.7417 43.9193 24.8497 43.9564 23.8461C42.4697 25.4815 40.8715 26.1506 39.4591 26.1506C36.6343 26.1506 34.3299 23.8461 34.3299 20.3152C34.3299 14.8886 37.898 11.3205 41.875 11.3205H41.9122C44.6255 11.3205 47.5246 12.77 47.5246 15.3718C47.5246 16.2267 47.1529 20.8727 46.8556 24.478C48.8626 22.5824 50.5352 19.4975 51.3901 17.0815ZM39.8679 23.4745C41.2432 23.4745 43.1016 22.6196 44.2538 18.4196C44.4396 17.4904 44.5511 16.6727 44.514 15.7063C44.291 14.7028 43.4361 14.1081 42.2095 14.1081C39.6821 14.1081 37.2662 16.524 37.2662 20.2037C37.2662 22.4338 38.3069 23.4745 39.8679 23.4745ZM41.2803 33.2869H41.3175C42.098 33.2869 42.9529 32.7665 43.5104 29.4214C41.875 30.3877 40.3511 31.3541 40.3511 32.5063C40.3511 32.9895 40.7228 33.2869 41.2803 33.2869Z" fill="#161616"/>
+<path d="M34.9823 17.0815L34.9452 17.1187C35.2053 16.4125 35.7257 16.1523 36.1717 16.1523C36.8036 16.1523 37.3611 16.6355 37.3611 17.3417C37.3611 17.4904 37.3611 17.6762 37.2868 17.8992C35.9859 21.2444 33.2354 22.9541 30.5593 23.2143C29.3328 25.2957 27.3257 26.8196 24.4637 26.8196C20.3752 26.8196 18.554 23.586 18.554 20.055C18.554 15.7063 21.3044 10.8744 25.9133 10.8744C26.9168 10.8744 27.7717 11.0975 28.4779 11.3948C30.5593 12.1753 31.8974 14.8886 31.8974 17.7877C31.8974 18.7169 31.823 19.6461 31.6 20.5382C32.9753 20.055 34.2761 18.9399 34.9823 17.0815ZM27.2142 13.9222V13.8851C26.3965 13.8851 25.9133 14.9629 25.9133 16.2638C25.9133 18.1594 26.954 19.9063 28.5894 20.5382C28.8496 19.7205 28.9611 18.7913 28.9611 17.7134C28.9611 15.632 28.3292 13.9222 27.2142 13.9222ZM24.5009 24.1063C25.5416 24.1063 26.5823 23.6603 27.4 22.7311C24.9841 21.6532 23.4602 19.1258 23.4602 16.7098C23.4602 15.8921 23.6089 15.0373 23.8319 14.2939C22.3452 15.5205 21.4903 17.9364 21.4903 20.055C21.4903 22.8054 22.7912 24.1063 24.5009 24.1063Z" fill="#161616"/>
+<path d="M20.4429 15.9083C19.9225 15.9083 19.4765 16.1685 19.1791 16.8747C18.2128 19.3278 16.2056 23.4907 14.1613 23.4907C12.8741 23.4907 11.878 23.1996 10.8714 22.9054C9.84348 22.605 8.80467 22.3013 7.43378 22.3013C6.95058 22.3013 6.28154 22.3757 5.64967 22.4872C7.55325 19.8914 8.26439 16.7477 8.95347 10.8054C7.65601 10.7228 6.6006 10.4831 5.83132 10.241C5.00967 17.7775 4.07661 20.6511 0.669037 23.4907C0.22301 23.8624 0 24.3828 0 24.9032C0 25.7209 0.706212 26.4271 1.59827 26.4271C1.89562 26.4271 2.23013 26.3156 2.56465 26.1669C4.46027 25.312 5.6125 25.089 7.02492 25.089C7.92309 25.089 8.99783 25.3459 10.1485 25.6208C11.4739 25.9376 12.9 26.2784 14.2729 26.2784C17.2835 26.2784 19.2535 23.3421 21.4464 17.6552C21.558 17.4694 21.5951 17.2464 21.5951 17.0605C21.5951 16.3543 21.0376 15.9083 20.4429 15.9083Z" fill="#161616"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.02004 8.70287C6.69313 8.93784 7.74395 9.2114 9.10638 9.29233L9.32939 9.29222C13.5295 9.29222 16.28 6.6904 16.28 3.56821C16.28 1.56109 14.7189 0 12.5259 0C9.58957 0 7.54529 2.00712 6.50456 5.98419C5.20365 5.27798 4.3116 4.01424 3.86557 2.41598C3.64255 1.63543 3.15936 1.15223 2.49031 1.15223C1.6726 1.15223 1.15223 1.78411 1.15223 2.63899C1.15223 5.16648 3.12219 7.58245 6.02136 8.69752C6.02092 8.6993 6.02048 8.70109 6.02004 8.70287ZM9.5524 6.57889C10.1099 4.01424 11.002 2.78767 12.1914 2.78767C12.8233 2.78767 13.2321 3.15936 13.2321 3.8284C13.2321 5.05497 11.9312 6.50455 9.5524 6.57889Z" fill="#161616"/>
+</svg>

website/src/assets/patterns/about-pattern.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1832" height="1832" viewBox="0 0 1832 1832">
+  <g id="Group_76" data-name="Group 76" transform="translate(-543 -329)" opacity="0.5">
+    <g id="Ellipse_3" data-name="Ellipse 3" transform="translate(543 329)" fill="none" stroke="#f3f3f3" stroke-width="1">
+      <circle cx="916" cy="916" r="916" stroke="none"/>
+      <circle cx="916" cy="916" r="915.5" fill="none"/>
+    </g>
+    <g id="Ellipse_4" data-name="Ellipse 4" transform="translate(767 553)" fill="none" stroke="#f3f3f3" stroke-width="1">
+      <circle cx="692" cy="692" r="692" stroke="none"/>
+      <circle cx="692" cy="692" r="691.5" fill="none"/>
+    </g>
+    <g id="Ellipse_5" data-name="Ellipse 5" transform="translate(978 764)" fill="none" stroke="#f3f3f3" stroke-width="1">
+      <circle cx="481" cy="481" r="481" stroke="none"/>
+      <circle cx="481" cy="481" r="480.5" fill="none"/>
+    </g>
+    <g id="Ellipse_6" data-name="Ellipse 6" transform="translate(1169 955)" fill="none" stroke="#f3f3f3" stroke-width="1">
+      <circle cx="290" cy="290" r="290" stroke="none"/>
+      <circle cx="290" cy="290" r="289.5" fill="none"/>
+    </g>
+  </g>
+</svg>

website/src/assets/patterns/values-pat-1.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="237.359" height="237.359" viewBox="0 0 237.359 237.359">
+  <g id="Layer_1" data-name="Layer 1" transform="translate(237.359 0.125) rotate(90)">
+    <g id="Group_73" data-name="Group 73" transform="translate(0.25)">
+      <path id="Path_64" data-name="Path 64" d="M237.234,236.984H142.219a38.2,38.2,0,0,1-27.053-11.208L11.458,122.068A38.231,38.231,0,0,1,.25,95.016V0" transform="translate(-0.25)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+      <path id="Path_65" data-name="Path 65" d="M38.83,0V156.737a16.414,16.414,0,0,0,16.407,16.407h156.7" transform="translate(25.044)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+    </g>
+  </g>
+</svg>

website/src/assets/patterns/values-pat-2.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="237.359" height="237.359" viewBox="0 0 237.359 237.359">
+  <g id="Layer_1" data-name="Layer 1" transform="translate(237.234 237.359) rotate(180)">
+    <g id="Group_73" data-name="Group 73" transform="translate(0.25)">
+      <path id="Path_64" data-name="Path 64" d="M237.234,236.984H142.219a38.2,38.2,0,0,1-27.053-11.208L11.458,122.068A38.231,38.231,0,0,1,.25,95.016V0" transform="translate(-0.25)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+      <path id="Path_65" data-name="Path 65" d="M38.83,0V156.737a16.414,16.414,0,0,0,16.407,16.407h156.7" transform="translate(25.044)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+    </g>
+  </g>
+</svg>

website/src/assets/patterns/values-pat-3.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="237.359" height="237.359" viewBox="0 0 237.359 237.359">
+  <g id="Layer_1" data-name="Layer 1" transform="translate(0.125)">
+    <g id="Group_73" data-name="Group 73" transform="translate(0.25)">
+      <path id="Path_64" data-name="Path 64" d="M237.234,236.984H142.219a38.2,38.2,0,0,1-27.053-11.208L11.458,122.068A38.231,38.231,0,0,1,.25,95.016V0" transform="translate(-0.25)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+      <path id="Path_65" data-name="Path 65" d="M38.83,0V156.737a16.414,16.414,0,0,0,16.407,16.407h156.7" transform="translate(25.044)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+    </g>
+  </g>
+</svg>

website/src/assets/patterns/values-pat-4.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="237.359" height="237.359" viewBox="0 0 237.359 237.359">
+  <g id="Layer_1" data-name="Layer 1" transform="translate(0 237.234) rotate(-90)">
+    <g id="Group_73" data-name="Group 73" transform="translate(0.25)">
+      <path id="Path_64" data-name="Path 64" d="M237.234,236.984H142.219a38.2,38.2,0,0,1-27.053-11.208L11.458,122.068A38.231,38.231,0,0,1,.25,95.016V0" transform="translate(-0.25)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+      <path id="Path_65" data-name="Path 65" d="M38.83,0V156.737a16.414,16.414,0,0,0,16.407,16.407h156.7" transform="translate(25.044)" fill="none" stroke="#f3f3f3" stroke-miterlimit="10" stroke-width="0.75"/>
+    </g>
+  </g>
+</svg>

website/src/components/Footer.astro

@@ -1,3 +1,3 @@
 ---
-// A later step will implement this component
+// Step 004 will implement this component
 ---

website/src/components/Nav.astro

@@ -1,3 +1,205 @@
 ---
-// Step 003 will implement this component
+import { getContent } from '../content/i18n';
+import qumoLogoUrl from '../assets/logos/qumo-logo.svg?url';
+
+const pathname = Astro.url.pathname;
+const isNl = pathname.startsWith('/nl');
+const locale = isNl ? 'nl' : 'en';
+const alternatePath = isNl
+  ? pathname.replace(/^\/nl/, '') || '/'
+  : pathname === '/' ? '/nl' : '/nl' + pathname;
+
+const { nav } = getContent(locale);
+const homeHref = isNl ? '/nl' : '/';
 ---
+
+<nav
+  id="main-nav"
+  class="fixed top-0 left-0 right-0 z-50 transition-colors duration-300"
+>
+  <div class="max-w-7xl mx-auto px-6 lg:px-8 h-20 flex items-center justify-between">
+
+    <!-- Logo -->
+    <a href={homeHref} aria-label="Qumo — home" class="flex-shrink-0">
+      <img
+        src={qumoLogoUrl}
+        alt="Qumo"
+        width="289"
+        height="70"
+        class="h-7 w-auto"
+        loading="eager"
+      />
+    </a>
+
+    <!-- Desktop nav links -->
+    <ul class="hidden md:flex items-center gap-8 list-none m-0 p-0">
+      {nav.links.map(link => (
+        <li>
+          <a
+            href={link.href}
+            class="text-snow/70 hover:text-snow text-sm uppercase tracking-label transition-colors duration-200"
+          >
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+
+    <!-- Desktop right: language switcher + Connect CTA -->
+    <div class="hidden md:flex items-center gap-6">
+
+      <!-- Language switcher -->
+      <div class="flex items-center gap-2 text-sm font-medium">
+        {locale === 'en' ? (
+          <>
+            <span class="text-snow">{nav.langSwitch.en}</span>
+            <span class="text-snow/30">|</span>
+            <a href={alternatePath} class="text-snow/50 hover:text-snow transition-colors duration-200">{nav.langSwitch.nl}</a>
+          </>
+        ) : (
+          <>
+            <a href={alternatePath} class="text-snow/50 hover:text-snow transition-colors duration-200">{nav.langSwitch.en}</a>
+            <span class="text-snow/30">|</span>
+            <span class="text-snow">{nav.langSwitch.nl}</span>
+          </>
+        )}
+      </div>
+
+      <!-- Connect CTA -->
+      <a
+        href={nav.ctaHref}
+        class="flex items-center gap-3 border border-snow/40 hover:border-snow text-snow text-sm uppercase tracking-label px-5 py-2.5 transition-colors duration-200"
+      >
+        {nav.cta}
+        <!-- wum-arrow inline with currentColor -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 12.486 22.145" aria-hidden="true">
+          <path d="M1446.874,1154.541l10.365,10.365-10.365,10.365" transform="translate(-1446.167 -1153.834)" fill="none" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      </a>
+    </div>
+
+    <!-- Mobile hamburger button -->
+    <button
+      id="menu-toggle"
+      aria-expanded="false"
+      aria-controls="mobile-menu"
+      aria-label="Toggle navigation menu"
+      class="md:hidden text-snow p-2 -mr-2"
+    >
+      <!-- Hamburger icon (shown when menu closed) -->
+      <svg class="icon-hamburger" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+      <!-- Close icon (shown when menu open) -->
+      <svg class="icon-close" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+
+  </div>
+</nav>
+
+<!-- Mobile menu overlay -->
+<div
+  id="mobile-menu"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Navigation menu"
+  class="fixed inset-0 bg-midnight z-40 flex flex-col px-6 pt-24 pb-10 -translate-y-full transition-transform duration-300 ease-in-out md:hidden overflow-y-auto"
+>
+  <!-- Mobile nav links -->
+  <ul class="flex flex-col divide-y divide-snow/10 list-none m-0 p-0">
+    {nav.links.map(link => (
+      <li>
+        <a
+          href={link.href}
+          class="block py-5 text-snow text-xl font-bold uppercase tracking-heading hover:text-snow/70 transition-colors duration-200"
+        >
+          {link.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+
+  <!-- Mobile: language switcher -->
+  <div class="mt-10 flex items-center gap-3 text-sm font-medium">
+    {locale === 'en' ? (
+      <>
+        <span class="text-snow">{nav.langSwitch.en}</span>
+        <span class="text-snow/30">|</span>
+        <a href={alternatePath} class="text-snow/50">{nav.langSwitch.nl}</a>
+      </>
+    ) : (
+      <>
+        <a href={alternatePath} class="text-snow/50">{nav.langSwitch.en}</a>
+        <span class="text-snow/30">|</span>
+        <span class="text-snow">{nav.langSwitch.nl}</span>
+      </>
+    )}
+  </div>
+
+  <!-- Mobile: Connect CTA -->
+  <a
+    href={nav.ctaHref}
+    class="mt-6 flex items-center gap-3 border border-snow/40 text-snow text-sm uppercase tracking-label px-5 py-4 w-fit hover:border-snow transition-colors duration-200"
+  >
+    {nav.cta}
+    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 12.486 22.145" aria-hidden="true">
+      <path d="M1446.874,1154.541l10.365,10.365-10.365,10.365" transform="translate(-1446.167 -1153.834)" fill="none" stroke="currentColor" stroke-width="2"/>
+    </svg>
+  </a>
+</div>
+
+<style>
+  /* Mobile menu: open state — Tailwind v4 uses CSS `translate` property, not `transform` */
+  #mobile-menu[data-open] {
+    translate: 0 0;
+  }
+
+  /* Hamburger / close icon toggle */
+  #menu-toggle[aria-expanded="true"] .icon-hamburger {
+    display: none;
+  }
+  #menu-toggle[aria-expanded="false"] .icon-close {
+    display: none;
+  }
+</style>
+
+<script>
+  // Scroll behavior: transparent → midnight after 20px
+  const nav = document.getElementById('main-nav');
+  if (nav) {
+    const updateScrollState = () => {
+      nav.classList.toggle('bg-midnight', window.scrollY > 20);
+    };
+    window.addEventListener('scroll', updateScrollState, { passive: true });
+    updateScrollState(); // apply correct state immediately on load
+  }
+
+  // Mobile menu toggle
+  const toggle = document.getElementById('menu-toggle') as HTMLButtonElement | null;
+  const menu = document.getElementById('mobile-menu');
+  if (toggle && menu) {
+    toggle.addEventListener('click', () => {
+      const isOpen = toggle.getAttribute('aria-expanded') === 'true';
+      const willOpen = !isOpen;
+      toggle.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
+      if (willOpen) {
+        menu.dataset.open = '';
+        document.body.style.overflow = 'hidden'; // prevent background scroll
+      } else {
+        delete menu.dataset.open;
+        document.body.style.overflow = '';
+      }
+    });
+
+    // Close menu when a nav link is clicked
+    menu.querySelectorAll('a').forEach(link => {
+      link.addEventListener('click', () => {
+        toggle.setAttribute('aria-expanded', 'false');
+        delete menu.dataset.open;
+        document.body.style.overflow = '';
+      });
+    });
+  }
+</script>

website/src/content/en.json

@@ -4,5 +4,15 @@
     "defaultTitle": "Qumo — Data & AI for Dutch MKB",
     "defaultDescription": "Qumo helps Dutch mid-market companies turn data into decisions. From BI dashboards to AI-powered workflows, we make data work for your business.",
     "defaultOgImage": ""
+  },
+  "nav": {
+    "links": [
+      { "label": "Services", "href": "/#services" },
+      { "label": "AI Launchpad", "href": "/ai-launchpad" },
+      { "label": "About", "href": "/about" }
+    ],
+    "cta": "Connect",
+    "ctaHref": "/contact",
+    "langSwitch": { "en": "EN", "nl": "NL" }
   }
 }

website/src/content/nl.json

@@ -4,5 +4,15 @@
     "defaultTitle": "Qumo — Data & AI voor Nederlands MKB",
     "defaultDescription": "Qumo helpt Nederlandse middelgrote bedrijven data omzetten in beslissingen. Van BI-dashboards tot AI-gedreven workflows — wij laten data werken voor uw bedrijf.",
     "defaultOgImage": ""
+  },
+  "nav": {
+    "links": [
+      { "label": "Diensten", "href": "/nl#services" },
+      { "label": "AI Launchpad", "href": "/nl/ai-launchpad" },
+      { "label": "Over Ons", "href": "/nl/about" }
+    ],
+    "cta": "Verbind",
+    "ctaHref": "/nl/contact",
+    "langSwitch": { "en": "EN", "nl": "NL" }
   }
 }

website/src/styles/global.css

@@ -1,18 +1,74 @@
 @import "tailwindcss";
 
 @theme {
+  /* ─── Colors ─────────────────────────────────────────────────────────────── */
   --color-midnight: #102022;
   --color-snow: #F3F3F3;
+
+  /*
+   * brand-blue and brand-red are GRADIENT ENDPOINTS ONLY.
+   * Never use them as standalone flat colors — always via --gradient-brand.
+   */
   --color-brand-blue: #5257E4;
   --color-brand-red: #F71E3E;
 
+  /* ─── Typography: font families ──────────────────────────────────────────── */
   --font-archia: "Archia", ui-sans-serif, system-ui, sans-serif;
+
+  /* ─── Typography: font sizes ─────────────────────────────────────────────── */
+  /*
+   * Tailwind's default scale (text-xs → text-9xl) covers general use.
+   * These semantic aliases map to the Qumo heading hierarchy.
+   */
+  --text-display: 4.5rem;      /* Hero heading — desktop */
+  --text-display--line-height: 1.05;
+  --text-headline: 3rem;       /* Section headings (h2) */
+  --text-headline--line-height: 1.1;
+  --text-subheading: 1.75rem;  /* Card titles, sub-headings (h3) */
+  --text-subheading--line-height: 1.2;
+  --text-label: 0.75rem;       /* Uppercase labels / tags */
+  --text-label--line-height: 1;
+
+  /* ─── Typography: letter spacing ─────────────────────────────────────────── */
+  /*
+   * Tailwind defaults: tight (-0.025em), normal (0em), wide (0.025em),
+   * wider (0.05em), widest (0.1em).
+   * Brand heading style uses uppercase + medium tracking:
+   */
+  --tracking-heading: 0.06em;  /* Qumo uppercase headings */
+  --tracking-label: 0.12em;    /* Uppercase label / tag text */
+
+  /* ─── Typography: font weights ───────────────────────────────────────────── */
+  /*
+   * Tailwind defaults (font-thin → font-black) cover all weights.
+   * Archia weights available: Thin (100), Light (300), Regular (400),
+   * Medium (500), SemiBold (600), Bold (700).
+   * No custom weight overrides needed — use font-semibold / font-bold.
+   */
 }
 
+/* ─── Gradient ──────────────────────────────────────────────────────────────
+ * Defined in :root (not @theme) because Tailwind processes @theme as raw
+ * values and can't resolve var() references at extraction time.
+ * Always reference color tokens — never hardcode hex values here.
+ * ─────────────────────────────────────────────────────────────────────────── */
 :root {
-  --gradient-brand: linear-gradient(135deg, #5257E4, #F71E3E);
+  --gradient-brand: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-red));
 }
 
+/* ─── Gradient utilities ─────────────────────────────────────────────────── */
+@utility bg-brand-gradient {
+  background-image: var(--gradient-brand);
+}
+
+@utility text-brand-gradient {
+  background: var(--gradient-brand);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ─── Font faces ─────────────────────────────────────────────────────────── */
 @font-face {
   font-family: "Archia";
   src: url("../assets/fonts/archia/archia-thin-webfont.woff2") format("woff2");