From 0c23b289ac2f207bedfd604a6773917923570b04 Mon Sep 17 00:00:00 2001
From: langbart <lorenzo.longobardi@gmail.com>
Date: Fri, 3 Jul 2026 10:33:51 +0200
Subject: [PATCH] Refactor footer, header, and sidebar branding elements to
 simplify structure and enhance visual consistency. Removed logo images in
 favor of text branding, updated styles for improved alignment and
 responsiveness, and introduced a new brand mark SVG. Adjusted color variables
 for better visual coherence across components.

---
 components/layout/Footer.js                   |  9 +-
 components/layout/Footer.module.css           | 18 +---
 components/layout/Header.js                   | 14 +--
 components/layout/Header.module.css           | 30 +++++--
 components/layout/Sidebar.js                  |  6 +-
 components/layout/Sidebar.module.css          | 19 +++--
 components/sections/BlogPostClient.js         |  4 +-
 components/sections/EcosystemHeroSection.js   |  2 +-
 components/sections/HeroSection.js            |  2 +-
 public/assets/css/style.css                   | 13 ++-
 .../imgs/brand/worldfish-logo-color.svg       | 27 ------
 .../imgs/brand/worldfish-logo-white.svg       | 27 ------
 .../imgs/brand/worldfish-mark-white.svg       |  8 ++
 .../assets/scss/abstracts/_tokens-root.scss   |  9 +-
 public/assets/scss/abstracts/_variables.scss  |  4 +-
 styles/app.css                                | 85 -------------------
 styles/wf-components.css                      | 24 +++---
 17 files changed, 80 insertions(+), 221 deletions(-)
 delete mode 100644 public/assets/imgs/brand/worldfish-logo-color.svg
 delete mode 100644 public/assets/imgs/brand/worldfish-logo-white.svg
 create mode 100644 public/assets/imgs/brand/worldfish-mark-white.svg

diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index b55309b..64f83f2 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -13,13 +13,8 @@ const Footer = () => {
                     <div className="footer-top">
                         <div className="row">
                             <div className="col-md-4 col-sm-6 text-center text-md-start">
-                                <Link href="/" className={`d-flex ${styles.brandLink}`}>
-                                    <img
-                                        src="/assets/imgs/brand/worldfish-logo-white.svg"
-                                        alt="WorldFish"
-                                        className={styles.brandLogoImg}
-                                    />
-                                    <span className={styles.brandSuffix}>Digital</span>
+                                <Link href="/" className={`d-flex display-6 ${styles.brandLink}`}>
+                                    WorldFish Digital
                                 </Link>
                             </div>
                         </div>
diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css
index 99f7394..bd9a753 100644
--- a/components/layout/Footer.module.css
+++ b/components/layout/Footer.module.css
@@ -1,24 +1,8 @@
 .brandLink {
-  align-items: center;
-  gap: 10px;
   color: var(--wf-text-on-dark);
   text-decoration: none;
 }
 
-.brandLogoImg {
-  display: block;
-  height: 40px;
-  width: auto;
-}
-
-.brandSuffix {
-  font-family: var(--wf-font-body);
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--wf-text-on-dark-soft);
-  letter-spacing: -0.02em;
-}
-
-.brandLink:hover .brandSuffix {
+.brandLink:hover {
   color: var(--wf-color-accent);
 }
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 916694b..9ee802e 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -23,13 +23,17 @@ const Header = ({ menuOpen, onMobileNavToggle, headerStyle }) => {
                 <div className="main-header">
                     <div className={`header-left header-langgraph-inner ${styles.headerInner}`}>
                         <div className={`header-logo ${styles.headerLogo}`}>
-                            <Link href="/" className={`header-logo-link ${styles.logoLink}`}>
+                            <Link href="/" className="header-logo-link">
                                 <img
-                                    src="/assets/imgs/brand/worldfish-logo-white.svg"
-                                    alt="WorldFish"
-                                    className={styles.logoImg}
+                                    src="/assets/imgs/brand/worldfish-mark-white.svg"
+                                    alt=""
+                                    aria-hidden="true"
+                                    className={styles.headerMark}
                                 />
-                                <span className={styles.logoSuffix}>Digital</span>
+                                <span className={styles.headerLogoText}>
+                                    <span className="header-logo-line1">WorldFish</span>
+                                    <span className="header-logo-line2">Digital</span>
+                                </span>
                             </Link>
                         </div>
                         <nav
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css
index bdeb1ef..38d85af 100644
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@@ -108,25 +108,41 @@
   background-color: rgba(255, 255, 255, 0.06) !important;
 }
 
-.logoLink {
+.siteHeader :global(.header-logo-link) {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  line-height: 1.08;
   text-decoration: none !important;
+  font-family: var(--wf-font-body);
+  letter-spacing: -0.035em;
 }
 
-.logoImg {
+.headerMark {
   display: block;
-  height: 96px;
+  height: 38px;
   width: auto;
+  flex-shrink: 0;
 }
 
-.logoSuffix {
-  font-family: var(--wf-font-body);
+.headerLogoText {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.siteHeader :global(.header-logo-line1) {
+  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
+  font-weight: 700;
+  color: var(--wf-text-on-dark);
+}
+
+.siteHeader :global(.header-logo-line2) {
   font-size: clamp(1rem, 1.65vw, 1.15rem);
   font-weight: 600;
   color: var(--wf-text-on-dark-soft);
-  letter-spacing: -0.02em;
+  margin-top: 2px;
 }
 
 .siteHeader:global(.header-langgraph) :global(.nav-main-menu .sub-menu) {
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
index de0e628..3de4f2d 100644
--- a/components/layout/Sidebar.js
+++ b/components/layout/Sidebar.js
@@ -26,11 +26,7 @@ const Sidebar = ({ openClass, onClose }) => {
         >
             <div className={styles.drawerHeader}>
                 <Link href="/" className={styles.drawerWordmark} onClick={onClose}>
-                    <img
-                        src="/assets/imgs/brand/worldfish-logo-white.svg"
-                        alt="WorldFish"
-                        className={styles.drawerLogoImg}
-                    />
+                    <span className={styles.drawerWordmarkLine1}>WorldFish</span>
                     <span className={styles.drawerWordmarkLine2}>Digital</span>
                 </Link>
                 <button
diff --git a/components/layout/Sidebar.module.css b/components/layout/Sidebar.module.css
index 21c59ce..413741f 100644
--- a/components/layout/Sidebar.module.css
+++ b/components/layout/Sidebar.module.css
@@ -53,25 +53,26 @@
 
 .drawerWordmark {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1.08;
   text-decoration: none !important;
+  font-family: var(--wf-font-body);
+  letter-spacing: -0.035em;
   min-width: 0;
 }
 
-.drawerLogoImg {
-  display: block;
-  height: 28px;
-  width: auto;
-  flex-shrink: 0;
+.drawerWordmarkLine1 {
+  font-size: clamp(1.1rem, 3.5vw, 1.3rem);
+  font-weight: 700;
+  color: var(--wf-text-on-dark);
 }
 
 .drawerWordmarkLine2 {
-  font-family: var(--wf-font-body);
   font-size: clamp(0.95rem, 3vw, 1.05rem);
   font-weight: 600;
   color: var(--wf-text-on-dark-soft);
-  letter-spacing: -0.02em;
+  margin-top: 2px;
 }
 
 .closeBtn {
diff --git a/components/sections/BlogPostClient.js b/components/sections/BlogPostClient.js
index 5d88cbc..1a03149 100644
--- a/components/sections/BlogPostClient.js
+++ b/components/sections/BlogPostClient.js
@@ -96,8 +96,8 @@ export default function BlogPostClient({ post }) {
                     startOnLoad: false,
                     theme: 'neutral',
                     securityLevel: 'loose',
-                    fontFamily: 'Chivo',
-                    fontSize: 14,
+                    fontFamily: 'Roboto Condensed',
+                    fontSize: '14px',
                 });
                 setMermaidLoaded(true);
             });
diff --git a/components/sections/EcosystemHeroSection.js b/components/sections/EcosystemHeroSection.js
index be9fd15..abf798e 100644
--- a/components/sections/EcosystemHeroSection.js
+++ b/components/sections/EcosystemHeroSection.js
@@ -9,7 +9,7 @@ function EcosystemHeroSection({ data }) {
             <div className="wfEcosystemGrid" aria-hidden />
             <div className="container wfEcosystemContent">
                 <div className="row align-items-center">
-                    <div className="col-lg-12">
+                    <div className="col-lg-7 col-md-11">
                         {/* <div className="d-flex align-items-center gap-3 mb-30">
                             <span className="wfBadgeIcon">
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
diff --git a/components/sections/HeroSection.js b/components/sections/HeroSection.js
index 0687cb3..3a2a68d 100644
--- a/components/sections/HeroSection.js
+++ b/components/sections/HeroSection.js
@@ -37,7 +37,7 @@ function HeroSection({ data, onWatchVideo }) {
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-6 mb-50">
-                        <h1 className="display-3 wfTitleHero wfTitleHeroPeskas">
+                        <h1 className="display-3 wfTitleHero">
                             {headline}
                             <span className="wfAccentLine">{headlineHighlight}</span>
                         </h1>
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 40b7a89..d5c0be9 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -50,8 +50,8 @@ TABLE CONTENT
   --wf-font-xl: 20px;
   --wf-font-2xl: 22px;
   --wf-font-3xl: 58px;
-  --wf-color-primary: #1A4985;
-  --wf-color-secondary: #58AB47;
+  --wf-color-primary: #508FDA;
+  --wf-color-secondary: #8D99AE;
   --wf-color-success: #06D6A0;
   --wf-color-danger: #EF476F;
   --wf-color-warning: #FFD166;
@@ -89,8 +89,7 @@ TABLE CONTENT
   --wf-surface-submenu: rgba(14, 18, 28, 0.92);
   --wf-surface-deep: #00050a;
   --wf-surface-panel: #020813;
-  --wf-color-accent: #58ab47;
-  --wf-color-accent-title: #1a4985;
+  --wf-color-accent: #57b3d1;
   --wf-text-slate-50: #f8fafc;
   --wf-text-slate-200: #e2e8f0;
   --wf-text-slate-300: #cbd5e1;
@@ -101,9 +100,9 @@ TABLE CONTENT
   --wf-border-strong: rgba(255, 255, 255, 0.2);
   --wf-border-card: rgba(255, 255, 255, 0.08);
   --wf-border-image: rgba(255, 255, 255, 0.1);
-  --wf-border-accent-soft: rgba(88, 171, 71, 0.15);
-  --wf-border-accent-medium: rgba(88, 171, 71, 0.4);
-  --wf-glow-accent: rgba(88, 171, 71, 0.15);
+  --wf-border-accent-soft: rgba(87, 179, 209, 0.15);
+  --wf-border-accent-medium: rgba(87, 179, 209, 0.4);
+  --wf-glow-accent: rgba(87, 179, 209, 0.15);
   --wf-shadow-hero-media: 0 30px 60px rgba(0, 0, 0, 0.5);
   --wf-gradient-hero: linear-gradient(180deg, #020813 0%, #00050a 100%);
   --wf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
diff --git a/public/assets/imgs/brand/worldfish-logo-color.svg b/public/assets/imgs/brand/worldfish-logo-color.svg
deleted file mode 100644
index 138dedc..0000000
--- a/public/assets/imgs/brand/worldfish-logo-color.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated by Pixelmator Pro 3.5.6 -->
-<svg width="652" height="652" viewBox="0 0 652 652" xmlns="http://www.w3.org/2000/svg">
-    <g id="Group">
-        <path id="Path" fill="#1A4985" stroke="none" d="M 513.799988 456.299988 L 536 456.299988 L 536 431.299988 C 536 426.600006 536.799988 423.299988 538.5 421.399994 C 540.200012 419.600006 542.299988 418.600006 545 418.600006 C 547.400024 418.600006 549.299988 419.299988 550.700012 420.600006 C 552 422 552.700012 424.299988 552.700012 427.5 L 552.700012 456.200012 L 575 456.200012 L 575 423.100006 C 575 416.299988 573.299988 411.200012 569.799988 407.899994 C 566.299988 404.600006 561.599976 402.899994 555.5 402.899994 C 551.400024 402.899994 547.900024 403.5 544.900024 404.700012 C 541.900024 405.899994 538.900024 407.899994 535.900024 410.700012 L 535.900024 384.200012 L 513.700012 384.200012 L 513.700012 456.299988 Z"/>
-        <path id="path1" fill="#1A4985" stroke="none" d="M 456.5 453.399994 C 461 456.100006 468.5 457.5 479.100006 457.5 C 486.600006 457.5 492.5 456.700012 496.799988 455 C 501.100006 453.299988 504.299988 451.100006 506.299988 448.200012 C 508.299988 445.399994 509.299988 442.399994 509.299988 439.399994 C 509.299988 436.399994 508.299988 433.700012 506.399994 431.200012 C 504.5 428.700012 501.700012 426.799988 498.100006 425.5 C 494.5 424.200012 489 423.100006 481.700012 422.399994 C 476.799988 421.899994 473.700012 421.299988 472.200012 420.600006 C 470.799988 420 470 419 470 417.700012 C 470 416.600006 470.600006 415.600006 471.700012 414.799988 C 472.899994 414 474.700012 413.600006 477.200012 413.600006 C 479.700012 413.600006 481.799988 414.100006 483.5 415.200012 C 484.799988 416 485.700012 417.200012 486.200012 418.899994 L 507.200012 417 C 505.700012 413.600006 503.899994 410.899994 501.700012 408.899994 C 499.5 406.899994 496.799988 405.399994 493.5 404.5 C 490.200012 403.600006 485.100006 403.100006 478.200012 403.100006 C 471.700012 403.100006 466.5 403.700012 462.600006 404.899994 C 458.700012 406.100006 455.700012 408 453.399994 410.5 C 451.200012 413 450.100006 415.899994 450.100006 419.399994 C 450.100006 422.5 451.100006 425.299988 453.200012 427.799988 C 455.299988 430.299988 457.799988 432 460.799988 433 C 463.799988 434 469.100006 435.200012 476.799988 436.399994 C 482 437.200012 485.100006 437.899994 486.299988 438.399994 C 488 439.200012 488.799988 440.299988 488.799988 441.700012 C 488.799988 443 488.200012 444 486.899994 444.899994 C 485.299988 446 483 446.600006 480 446.600006 C 477.299988 446.600006 475.100006 446.100006 473.5 445.100006 C 471.899994 444.100006 470.600006 442.399994 469.700012 440.100006 L 447.700012 442 C 449.200012 446.899994 452 450.700012 456.5 453.399994"/>
-    </g>
-    <path id="path2" fill="#1A4985" stroke="none" d="M 419.100006 404.200012 L 441.299988 404.200012 L 441.299988 456.299988 L 419.100006 456.299988 Z"/>
-    <path id="path3" fill="#1A4985" stroke="none" d="M 419.100006 384.399994 L 441.299988 384.399994 L 441.299988 398 L 419.100006 398 Z"/>
-    <path id="path4" fill="#1A4985" stroke="none" d="M 351.100006 456.299988 L 376.100006 456.299988 L 376.100006 423.200012 L 407.299988 423.200012 L 407.299988 406.899994 L 376.100006 406.899994 L 376.100006 392.700012 L 412.5 392.700012 L 412.5 375.299988 L 351.100006 375.299988 Z"/>
-    <g id="g1">
-        <path id="path5" fill="#1A4985" stroke="none" d="M 319.5 439.799988 C 317.600006 441.799988 315.200012 442.799988 312.399994 442.799988 C 309.700012 442.799988 307.5 441.799988 305.700012 439.799988 C 303.899994 437.799988 303 434.700012 303 430.5 C 303 426 303.899994 422.700012 305.600006 420.799988 C 307.299988 418.899994 309.5 417.899994 312.100006 417.899994 C 315.100006 417.899994 317.5 418.899994 319.399994 420.899994 C 321.299988 422.899994 322.299988 425.899994 322.299988 430 C 322.399994 434.600006 321.399994 437.899994 319.5 439.799988 M 322.200012 384.399994 L 322.200012 409.399994 C 320 407.299988 317.5 405.700012 314.700012 404.700012 C 311.899994 403.600006 308.700012 403.100006 305.299988 403.100006 C 298.200012 403.100006 292.399994 405.399994 287.799988 410 C 283.200012 414.600006 280.899994 421.200012 280.899994 429.799988 C 280.899994 437.5 283 444.100006 287.100006 449.5 C 291.299988 454.899994 297.299988 457.600006 305.200012 457.600006 C 309.100006 457.600006 312.700012 456.799988 315.899994 455.299988 C 318.299988 454.200012 321 451.899994 323.899994 448.700012 L 323.899994 456.399994 L 344.600006 456.399994 L 344.600006 384.399994 L 322.200012 384.399994 Z"/>
-    </g>
-    <path id="path6" fill="#1A4985" stroke="none" d="M 252 384.399994 L 274.299988 384.399994 L 274.299988 456.399994 L 252 456.399994 Z"/>
-    <g id="g2">
-        <path id="path7" fill="#1A4985" stroke="none" d="M 199.899994 456.299988 L 222.199997 456.299988 L 222.199997 438.899994 C 222.199997 430.600006 223.300003 424.899994 225.600006 421.799988 C 227.199997 419.600006 229.5 418.600006 232.399994 418.600006 C 233.899994 418.600006 236 419.100006 238.600006 420.100006 L 245.5 405.799988 C 241.600006 404 238 403 234.699997 403 C 231.600006 403 229 403.700012 226.800003 405.100006 C 224.699997 406.5 222.600006 409 220.600006 412.700012 L 220.600006 404.100006 L 199.899994 404.100006 L 199.899994 456.299988 Z"/>
-        <path id="path8" fill="#1A4985" stroke="none" d="M 167.800003 440.700012 C 165.800003 442.899994 163.100006 444 159.899994 444 C 156.800003 444 154.100006 442.899994 152 440.700012 C 150 438.5 149 435 149 430.399994 C 149 425.799988 150.100006 422.399994 152.199997 420.200012 C 154.300003 418 157 416.799988 160.199997 416.799988 C 163.199997 416.799988 165.800003 417.899994 167.899994 420.100006 C 170 422.299988 171 425.700012 171 430.200012 C 170.899994 435 169.899994 438.5 167.800003 440.700012 M 186.100006 412.100006 C 180.199997 406.100006 171.399994 403 159.800003 403 C 149.699997 403 141.600006 405.600006 135.699997 410.700012 C 129.699997 415.899994 126.800003 422.399994 126.800003 430.399994 C 126.800003 438.899994 130.300003 445.799988 137.399994 451.100006 C 143.100006 455.399994 150.699997 457.5 160 457.5 C 170.399994 457.5 178.600006 454.899994 184.5 449.799988 C 190.399994 444.700012 193.399994 438.100006 193.399994 430.100006 C 193.199997 423 190.800003 417 186.100006 412.100006"/>
-    </g>
-    <path id="path9" fill="#1A4985" stroke="none" d="M 36.800003 455.899994 L 61.099998 455.899994 L 75.199997 404.899994 L 89.300003 455.899994 L 113.599998 455.899994 L 131.300003 374.899994 L 107.900002 374.899994 L 99.300003 420 L 86.800003 374.899994 L 63.5 374.899994 L 51 420.100006 L 42.5 374.899994 L 18.899994 374.899994 Z"/>
-    <g id="g3">
-        <path id="path10" fill="#58AB47" stroke="none" d="M 466.200012 359.5 C 466.200012 359.5 521.400024 309.399994 554.799988 300 C 581.799988 292.399994 597.900024 303.200012 601.700012 322.799988 C 607.400024 352.100006 587 379.600006 587 379.600006 C 587 379.600006 607.099976 332.5 581.599976 320.100006 C 563.299988 311.299988 537 321.700012 525.5 326.5 C 513.700012 331.399994 466.200012 359.5 466.200012 359.5"/>
-        <path id="path11" fill="#1A4985" stroke="none" d="M 495.899994 223.399994 C 495.899994 223.399994 523.299988 260.100006 498.399994 286.799988 C 477 309.799988 424.700012 303.700012 424.700012 303.700012 C 424.700012 303.700012 425.200012 225.700012 512.5 217.700012 C 534.400024 215.700012 583.5 216.700012 604.799988 273.100006 C 624.799988 326 586.799988 378.899994 586.799988 378.899994 C 586.799988 378.899994 602.200012 339.600006 583.299988 326.799988 C 549 303.299988 463 365.5 463 365.5 C 463 365.5 541 324.200012 572 341.200012 C 594.200012 353.299988 577 395.299988 577 395.299988 C 577 395.299988 637.299988 340.799988 613.200012 263.299988 C 604.700012 236 572.5 188.700012 508.100006 202.200012 C 410.600006 222.700012 419.799988 307.5 419.799988 307.5 C 419.799988 307.5 467 321.200012 493 304 C 514.200012 289.899994 517.700012 278 515.400024 261.200012 C 511.600006 233.600006 495.899994 223.399994 495.899994 223.399994"/>
-        <path id="path12" fill="#58AB47" stroke="none" d="M 546.299988 285.700012 C 552.299988 282.899994 553 271.700012 547.799988 260.799988 C 542.599976 249.899994 533.599976 243.399994 527.599976 246.200012 C 521.599976 249 520.900024 260.200012 526.099976 271.100006 C 531.299988 282 540.299988 288.5 546.299988 285.700012"/>
-        <path id="path13" fill="#58AB47" stroke="none" d="M 423.299988 312.200012 C 423.299988 312.200012 449.600006 320 485.200012 312.799988 C 511.100006 307.600006 542.299988 295.600006 561.200012 278.100006 C 597.400024 244.700012 587.700012 188.5 587.700012 188.5 C 587.700012 188.5 587 181.600006 591.400024 186.5 C 594.799988 190.200012 607.900024 228.5 584.900024 267.799988 C 570 293.299988 535.400024 309.399994 501.299988 316.5 C 458.899994 325.299988 426.399994 317.100006 423.299988 316.100006 C 420.100006 315.100006 418.100006 311.399994 423.299988 312.200012"/>
-        <path id="path14" fill="#1A4985" stroke="none" d="M 459.899994 273.200012 C 464.5 273.200012 468.299988 269.399994 468.299988 264.799988 C 468.299988 260.200012 464.5 256.399994 459.899994 256.399994 C 455.299988 256.399994 451.5 260.100006 451.5 264.799988 C 451.5 269.399994 455.299988 273.200012 459.899994 273.200012"/>
-    </g>
-</svg>
diff --git a/public/assets/imgs/brand/worldfish-logo-white.svg b/public/assets/imgs/brand/worldfish-logo-white.svg
deleted file mode 100644
index 69d9db0..0000000
--- a/public/assets/imgs/brand/worldfish-logo-white.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated by Pixelmator Pro 3.5.6 -->
-<svg width="652" height="652" viewBox="0 0 652 652" xmlns="http://www.w3.org/2000/svg">
-    <g id="Group">
-        <path id="Path" fill="#ffffff" stroke="none" d="M 513.799988 456.299988 L 536 456.299988 L 536 431.299988 C 536 426.600006 536.799988 423.299988 538.5 421.399994 C 540.200012 419.600006 542.299988 418.600006 545 418.600006 C 547.400024 418.600006 549.299988 419.299988 550.700012 420.600006 C 552 422 552.700012 424.299988 552.700012 427.5 L 552.700012 456.200012 L 575 456.200012 L 575 423.100006 C 575 416.299988 573.299988 411.200012 569.799988 407.899994 C 566.299988 404.600006 561.599976 402.899994 555.5 402.899994 C 551.400024 402.899994 547.900024 403.5 544.900024 404.700012 C 541.900024 405.899994 538.900024 407.899994 535.900024 410.700012 L 535.900024 384.200012 L 513.700012 384.200012 L 513.700012 456.299988 Z"/>
-        <path id="path1" fill="#ffffff" stroke="none" d="M 456.5 453.399994 C 461 456.100006 468.5 457.5 479.100006 457.5 C 486.600006 457.5 492.5 456.700012 496.799988 455 C 501.100006 453.299988 504.299988 451.100006 506.299988 448.200012 C 508.299988 445.399994 509.299988 442.399994 509.299988 439.399994 C 509.299988 436.399994 508.299988 433.700012 506.399994 431.200012 C 504.5 428.700012 501.700012 426.799988 498.100006 425.5 C 494.5 424.200012 489 423.100006 481.700012 422.399994 C 476.799988 421.899994 473.700012 421.299988 472.200012 420.600006 C 470.799988 420 470 419 470 417.700012 C 470 416.600006 470.600006 415.600006 471.700012 414.799988 C 472.899994 414 474.700012 413.600006 477.200012 413.600006 C 479.700012 413.600006 481.799988 414.100006 483.5 415.200012 C 484.799988 416 485.700012 417.200012 486.200012 418.899994 L 507.200012 417 C 505.700012 413.600006 503.899994 410.899994 501.700012 408.899994 C 499.5 406.899994 496.799988 405.399994 493.5 404.5 C 490.200012 403.600006 485.100006 403.100006 478.200012 403.100006 C 471.700012 403.100006 466.5 403.700012 462.600006 404.899994 C 458.700012 406.100006 455.700012 408 453.399994 410.5 C 451.200012 413 450.100006 415.899994 450.100006 419.399994 C 450.100006 422.5 451.100006 425.299988 453.200012 427.799988 C 455.299988 430.299988 457.799988 432 460.799988 433 C 463.799988 434 469.100006 435.200012 476.799988 436.399994 C 482 437.200012 485.100006 437.899994 486.299988 438.399994 C 488 439.200012 488.799988 440.299988 488.799988 441.700012 C 488.799988 443 488.200012 444 486.899994 444.899994 C 485.299988 446 483 446.600006 480 446.600006 C 477.299988 446.600006 475.100006 446.100006 473.5 445.100006 C 471.899994 444.100006 470.600006 442.399994 469.700012 440.100006 L 447.700012 442 C 449.200012 446.899994 452 450.700012 456.5 453.399994"/>
-    </g>
-    <path id="path2" fill="#ffffff" stroke="none" d="M 419.100006 404.200012 L 441.299988 404.200012 L 441.299988 456.299988 L 419.100006 456.299988 Z"/>
-    <path id="path3" fill="#ffffff" stroke="none" d="M 419.100006 384.399994 L 441.299988 384.399994 L 441.299988 398 L 419.100006 398 Z"/>
-    <path id="path4" fill="#ffffff" stroke="none" d="M 351.100006 456.299988 L 376.100006 456.299988 L 376.100006 423.200012 L 407.299988 423.200012 L 407.299988 406.899994 L 376.100006 406.899994 L 376.100006 392.700012 L 412.5 392.700012 L 412.5 375.299988 L 351.100006 375.299988 Z"/>
-    <g id="g1">
-        <path id="path5" fill="#ffffff" stroke="none" d="M 319.5 439.799988 C 317.600006 441.799988 315.200012 442.799988 312.399994 442.799988 C 309.700012 442.799988 307.5 441.799988 305.700012 439.799988 C 303.899994 437.799988 303 434.700012 303 430.5 C 303 426 303.899994 422.700012 305.600006 420.799988 C 307.299988 418.899994 309.5 417.899994 312.100006 417.899994 C 315.100006 417.899994 317.5 418.899994 319.399994 420.899994 C 321.299988 422.899994 322.299988 425.899994 322.299988 430 C 322.399994 434.600006 321.399994 437.899994 319.5 439.799988 M 322.200012 384.399994 L 322.200012 409.399994 C 320 407.299988 317.5 405.700012 314.700012 404.700012 C 311.899994 403.600006 308.700012 403.100006 305.299988 403.100006 C 298.200012 403.100006 292.399994 405.399994 287.799988 410 C 283.200012 414.600006 280.899994 421.200012 280.899994 429.799988 C 280.899994 437.5 283 444.100006 287.100006 449.5 C 291.299988 454.899994 297.299988 457.600006 305.200012 457.600006 C 309.100006 457.600006 312.700012 456.799988 315.899994 455.299988 C 318.299988 454.200012 321 451.899994 323.899994 448.700012 L 323.899994 456.399994 L 344.600006 456.399994 L 344.600006 384.399994 L 322.200012 384.399994 Z"/>
-    </g>
-    <path id="path6" fill="#ffffff" stroke="none" d="M 252 384.399994 L 274.299988 384.399994 L 274.299988 456.399994 L 252 456.399994 Z"/>
-    <g id="g2">
-        <path id="path7" fill="#ffffff" stroke="none" d="M 199.899994 456.299988 L 222.199997 456.299988 L 222.199997 438.899994 C 222.199997 430.600006 223.300003 424.899994 225.600006 421.799988 C 227.199997 419.600006 229.5 418.600006 232.399994 418.600006 C 233.899994 418.600006 236 419.100006 238.600006 420.100006 L 245.5 405.799988 C 241.600006 404 238 403 234.699997 403 C 231.600006 403 229 403.700012 226.800003 405.100006 C 224.699997 406.5 222.600006 409 220.600006 412.700012 L 220.600006 404.100006 L 199.899994 404.100006 L 199.899994 456.299988 Z"/>
-        <path id="path8" fill="#ffffff" stroke="none" d="M 167.800003 440.700012 C 165.800003 442.899994 163.100006 444 159.899994 444 C 156.800003 444 154.100006 442.899994 152 440.700012 C 150 438.5 149 435 149 430.399994 C 149 425.799988 150.100006 422.399994 152.199997 420.200012 C 154.300003 418 157 416.799988 160.199997 416.799988 C 163.199997 416.799988 165.800003 417.899994 167.899994 420.100006 C 170 422.299988 171 425.700012 171 430.200012 C 170.899994 435 169.899994 438.5 167.800003 440.700012 M 186.100006 412.100006 C 180.199997 406.100006 171.399994 403 159.800003 403 C 149.699997 403 141.600006 405.600006 135.699997 410.700012 C 129.699997 415.899994 126.800003 422.399994 126.800003 430.399994 C 126.800003 438.899994 130.300003 445.799988 137.399994 451.100006 C 143.100006 455.399994 150.699997 457.5 160 457.5 C 170.399994 457.5 178.600006 454.899994 184.5 449.799988 C 190.399994 444.700012 193.399994 438.100006 193.399994 430.100006 C 193.199997 423 190.800003 417 186.100006 412.100006"/>
-    </g>
-    <path id="path9" fill="#ffffff" stroke="none" d="M 36.800003 455.899994 L 61.099998 455.899994 L 75.199997 404.899994 L 89.300003 455.899994 L 113.599998 455.899994 L 131.300003 374.899994 L 107.900002 374.899994 L 99.300003 420 L 86.800003 374.899994 L 63.5 374.899994 L 51 420.100006 L 42.5 374.899994 L 18.899994 374.899994 Z"/>
-    <g id="g3">
-        <path id="path10" fill="#ffffff" stroke="none" d="M 466.200012 359.5 C 466.200012 359.5 521.400024 309.399994 554.799988 300 C 581.799988 292.399994 597.900024 303.200012 601.700012 322.799988 C 607.400024 352.100006 587 379.600006 587 379.600006 C 587 379.600006 607.099976 332.5 581.599976 320.100006 C 563.299988 311.299988 537 321.700012 525.5 326.5 C 513.700012 331.399994 466.200012 359.5 466.200012 359.5"/>
-        <path id="path11" fill="#ffffff" stroke="none" d="M 495.899994 223.399994 C 495.899994 223.399994 523.299988 260.100006 498.399994 286.799988 C 477 309.799988 424.700012 303.700012 424.700012 303.700012 C 424.700012 303.700012 425.200012 225.700012 512.5 217.700012 C 534.400024 215.700012 583.5 216.700012 604.799988 273.100006 C 624.799988 326 586.799988 378.899994 586.799988 378.899994 C 586.799988 378.899994 602.200012 339.600006 583.299988 326.799988 C 549 303.299988 463 365.5 463 365.5 C 463 365.5 541 324.200012 572 341.200012 C 594.200012 353.299988 577 395.299988 577 395.299988 C 577 395.299988 637.299988 340.799988 613.200012 263.299988 C 604.700012 236 572.5 188.700012 508.100006 202.200012 C 410.600006 222.700012 419.799988 307.5 419.799988 307.5 C 419.799988 307.5 467 321.200012 493 304 C 514.200012 289.899994 517.700012 278 515.400024 261.200012 C 511.600006 233.600006 495.899994 223.399994 495.899994 223.399994"/>
-        <path id="path12" fill="#ffffff" stroke="none" d="M 546.299988 285.700012 C 552.299988 282.899994 553 271.700012 547.799988 260.799988 C 542.599976 249.899994 533.599976 243.399994 527.599976 246.200012 C 521.599976 249 520.900024 260.200012 526.099976 271.100006 C 531.299988 282 540.299988 288.5 546.299988 285.700012"/>
-        <path id="path13" fill="#ffffff" stroke="none" d="M 423.299988 312.200012 C 423.299988 312.200012 449.600006 320 485.200012 312.799988 C 511.100006 307.600006 542.299988 295.600006 561.200012 278.100006 C 597.400024 244.700012 587.700012 188.5 587.700012 188.5 C 587.700012 188.5 587 181.600006 591.400024 186.5 C 594.799988 190.200012 607.900024 228.5 584.900024 267.799988 C 570 293.299988 535.400024 309.399994 501.299988 316.5 C 458.899994 325.299988 426.399994 317.100006 423.299988 316.100006 C 420.100006 315.100006 418.100006 311.399994 423.299988 312.200012"/>
-        <path id="path14" fill="#ffffff" stroke="none" d="M 459.899994 273.200012 C 464.5 273.200012 468.299988 269.399994 468.299988 264.799988 C 468.299988 260.200012 464.5 256.399994 459.899994 256.399994 C 455.299988 256.399994 451.5 260.100006 451.5 264.799988 C 451.5 269.399994 455.299988 273.200012 459.899994 273.200012"/>
-    </g>
-</svg>
diff --git a/public/assets/imgs/brand/worldfish-mark-white.svg b/public/assets/imgs/brand/worldfish-mark-white.svg
new file mode 100644
index 0000000..aaedd71
--- /dev/null
+++ b/public/assets/imgs/brand/worldfish-mark-white.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="412 178 230 222" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="WorldFish">
+    <path fill="#ffffff" stroke="none" d="M 466.200012 359.5 C 466.200012 359.5 521.400024 309.399994 554.799988 300 C 581.799988 292.399994 597.900024 303.200012 601.700012 322.799988 C 607.400024 352.100006 587 379.600006 587 379.600006 C 587 379.600006 607.099976 332.5 581.599976 320.100006 C 563.299988 311.299988 537 321.700012 525.5 326.5 C 513.700012 331.399994 466.200012 359.5 466.200012 359.5"/>
+    <path fill="#ffffff" stroke="none" d="M 495.899994 223.399994 C 495.899994 223.399994 523.299988 260.100006 498.399994 286.799988 C 477 309.799988 424.700012 303.700012 424.700012 303.700012 C 424.700012 303.700012 425.200012 225.700012 512.5 217.700012 C 534.400024 215.700012 583.5 216.700012 604.799988 273.100006 C 624.799988 326 586.799988 378.899994 586.799988 378.899994 C 586.799988 378.899994 602.200012 339.600006 583.299988 326.799988 C 549 303.299988 463 365.5 463 365.5 C 463 365.5 541 324.200012 572 341.200012 C 594.200012 353.299988 577 395.299988 577 395.299988 C 577 395.299988 637.299988 340.799988 613.200012 263.299988 C 604.700012 236 572.5 188.700012 508.100006 202.200012 C 410.600006 222.700012 419.799988 307.5 419.799988 307.5 C 419.799988 307.5 467 321.200012 493 304 C 514.200012 289.899994 517.700012 278 515.400024 261.200012 C 511.600006 233.600006 495.899994 223.399994 495.899994 223.399994"/>
+    <path fill="#ffffff" stroke="none" d="M 546.299988 285.700012 C 552.299988 282.899994 553 271.700012 547.799988 260.799988 C 542.599976 249.899994 533.599976 243.399994 527.599976 246.200012 C 521.599976 249 520.900024 260.200012 526.099976 271.100006 C 531.299988 282 540.299988 288.5 546.299988 285.700012"/>
+    <path fill="#ffffff" stroke="none" d="M 423.299988 312.200012 C 423.299988 312.200012 449.600006 320 485.200012 312.799988 C 511.100006 307.600006 542.299988 295.600006 561.200012 278.100006 C 597.400024 244.700012 587.700012 188.5 587.700012 188.5 C 587.700012 188.5 587 181.600006 591.400024 186.5 C 594.799988 190.200012 607.900024 228.5 584.900024 267.799988 C 570 293.299988 535.400024 309.399994 501.299988 316.5 C 458.899994 325.299988 426.399994 317.100006 423.299988 316.100006 C 420.100006 315.100006 418.100006 311.399994 423.299988 312.200012"/>
+    <path fill="#ffffff" stroke="none" d="M 459.899994 273.200012 C 464.5 273.200012 468.299988 269.399994 468.299988 264.799988 C 468.299988 260.200012 464.5 256.399994 459.899994 256.399994 C 455.299988 256.399994 451.5 260.100006 451.5 264.799988 C 451.5 269.399994 455.299988 273.200012 459.899994 273.200012"/>
+</svg>
diff --git a/public/assets/scss/abstracts/_tokens-root.scss b/public/assets/scss/abstracts/_tokens-root.scss
index 6773ac9..a6afa8e 100644
--- a/public/assets/scss/abstracts/_tokens-root.scss
+++ b/public/assets/scss/abstracts/_tokens-root.scss
@@ -61,8 +61,7 @@
   --wf-surface-submenu: rgba(14, 18, 28, 0.92);
   --wf-surface-deep: #00050a;
   --wf-surface-panel: #020813;
-  --wf-color-accent: #58ab47;
-  --wf-color-accent-title: #1a4985;
+  --wf-color-accent: #57b3d1;
   --wf-text-slate-50: #f8fafc;
   --wf-text-slate-200: #e2e8f0;
   --wf-text-slate-300: #cbd5e1;
@@ -73,9 +72,9 @@
   --wf-border-strong: rgba(255, 255, 255, 0.2);
   --wf-border-card: rgba(255, 255, 255, 0.08);
   --wf-border-image: rgba(255, 255, 255, 0.1);
-  --wf-border-accent-soft: rgba(88, 171, 71, 0.15);
-  --wf-border-accent-medium: rgba(88, 171, 71, 0.4);
-  --wf-glow-accent: rgba(88, 171, 71, 0.15);
+  --wf-border-accent-soft: rgba(87, 179, 209, 0.15);
+  --wf-border-accent-medium: rgba(87, 179, 209, 0.4);
+  --wf-glow-accent: rgba(87, 179, 209, 0.15);
   --wf-shadow-hero-media: 0 30px 60px rgba(0, 0, 0, 0.5);
   --wf-gradient-hero: linear-gradient(180deg, #020813 0%, #00050a 100%);
   --wf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
diff --git a/public/assets/scss/abstracts/_variables.scss b/public/assets/scss/abstracts/_variables.scss
index fc7941e..b8bfe2d 100644
--- a/public/assets/scss/abstracts/_variables.scss
+++ b/public/assets/scss/abstracts/_variables.scss
@@ -30,8 +30,8 @@ $color-green-100: #D4EEF6;
 $color-orange-900: #E29578;
 $color-orange-500: #FFDDD2;
 $color-orange-100: #FAEDE3;
-$color-primary: #1A4985;
-$color-secondary: #58AB47;
+$color-primary: #508FDA;
+$color-secondary: #8D99AE;
 $color-success: #06D6A0;
 $color-danger: #EF476F;
 $color-warning: #FFD166;
diff --git a/styles/app.css b/styles/app.css
index 36458fd..92a4755 100644
--- a/styles/app.css
+++ b/styles/app.css
@@ -216,91 +216,6 @@ body.wf-site .blog-content hr {
   border-top: 1px solid var(--wf-border-medium);
 }
 
-/* Markdown output has no size/rhythm of its own — scope headings and text to the
-   article scale instead of inheriting the 28-69px hero display sizes from h1-h6. */
-body.wf-site .wf-prose h1,
-body.wf-site .wf-prose h2,
-body.wf-site .wf-prose h3,
-body.wf-site .wf-prose h4,
-body.wf-site .wf-prose h5,
-body.wf-site .wf-prose h6,
-body.wf-site .blog-content h1,
-body.wf-site .blog-content h2,
-body.wf-site .blog-content h3,
-body.wf-site .blog-content h4,
-body.wf-site .blog-content h5,
-body.wf-site .blog-content h6 {
-  font-family: var(--wf-font-heading);
-  color: var(--wf-text-on-dark);
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-body.wf-site .wf-prose h1,
-body.wf-site .blog-content h1 {
-  font-size: 30px;
-  margin: 40px 0 16px;
-}
-
-body.wf-site .wf-prose h2,
-body.wf-site .blog-content h2 {
-  font-size: 24px;
-  margin: 36px 0 14px;
-}
-
-body.wf-site .wf-prose h3,
-body.wf-site .blog-content h3 {
-  font-size: 20px;
-  margin: 28px 0 12px;
-}
-
-body.wf-site .wf-prose h4,
-body.wf-site .blog-content h4 {
-  font-size: 17px;
-  margin: 22px 0 10px;
-}
-
-body.wf-site .wf-prose h5,
-body.wf-site .wf-prose h6,
-body.wf-site .blog-content h5,
-body.wf-site .blog-content h6 {
-  font-size: 15px;
-  margin: 18px 0 8px;
-}
-
-body.wf-site .wf-prose h1:first-child,
-body.wf-site .wf-prose h2:first-child,
-body.wf-site .wf-prose h3:first-child,
-body.wf-site .wf-prose h4:first-child,
-body.wf-site .blog-content h1:first-child,
-body.wf-site .blog-content h2:first-child,
-body.wf-site .blog-content h3:first-child,
-body.wf-site .blog-content h4:first-child {
-  margin-top: 0;
-}
-
-body.wf-site .wf-prose p,
-body.wf-site .wf-prose li,
-body.wf-site .blog-content p,
-body.wf-site .blog-content li {
-  font-size: 15px;
-  line-height: 1.7;
-}
-
-body.wf-site .wf-prose ul,
-body.wf-site .wf-prose ol,
-body.wf-site .blog-content ul,
-body.wf-site .blog-content ol {
-  padding-left: 1.25em;
-  margin-bottom: 16px;
-}
-
-body.wf-site .wf-prose strong,
-body.wf-site .blog-content strong {
-  color: var(--wf-text-on-dark);
-  font-weight: 600;
-}
-
 body.wf-site .wf-prose code,
 body.wf-site .blog-content code {
   background: rgba(255, 255, 255, 0.08);
diff --git a/styles/wf-components.css b/styles/wf-components.css
index c742b73..3d36ad8 100644
--- a/styles/wf-components.css
+++ b/styles/wf-components.css
@@ -55,11 +55,6 @@
   line-height: 1.1;
 }
 
-/* Peskas product hero only — 5px smaller than the shared .display-3 fluid size */
-.wfTitleHeroPeskas {
-  font-size: calc(1.525rem + 3.3vw - 5px);
-}
-
 .wfTitleHeroTight {
   color: var(--wf-text-slate-50);
   font-weight: 600;
@@ -71,13 +66,13 @@
 }
 
 .wfAccentLine {
-  color: var(--wf-color-accent-title);
+  color: var(--wf-color-accent);
   display: block;
   margin-top: 10px;
 }
 
 .wfAccentLineTight {
-  color: var(--wf-color-accent-title);
+  color: var(--wf-color-accent);
   display: block;
   margin-top: 4px;
 }
@@ -229,14 +224,14 @@
 }
 
 .wfImpactTagline {
-  color: var(--wf-color-accent-title);
+  color: var(--wf-color-accent);
   font-weight: 500;
   letter-spacing: -0.02em;
   font-size: 22px;
 }
 
 .wfEcosystemKicker {
-  color: var(--wf-color-accent-title);
+  color: var(--wf-color-accent);
   font-family: var(--wf-font-mono);
   font-size: 14px;
   letter-spacing: 0.05em;
@@ -450,6 +445,7 @@
 }
 
 .wfSubtitleWide {
+  max-width: 600px;
   line-height: 1.6;
   font-size: 20px;
   color: var(--wf-text-slate-300);
@@ -460,7 +456,7 @@
   position: relative;
   border-radius: 24px;
   border: 1px solid var(--wf-border-medium);
-  background: linear-gradient(90deg, rgba(88, 171, 71, 0.08), rgba(255, 255, 255, 0.02));
+  background: linear-gradient(90deg, rgba(87, 179, 209, 0.08), rgba(255, 255, 255, 0.02));
   padding: 60px;
   overflow: hidden;
   box-shadow: var(--wf-shadow-hero-media);
@@ -475,8 +471,8 @@
   align-items: center;
   justify-content: space-between;
   border: 1px solid var(--wf-border-accent-medium);
-  box-shadow: 0 0 40px rgba(88, 171, 71, 0.1);
-  background-image: radial-gradient(ellipse at top left, rgba(88, 171, 71, 0.1), transparent 50%);
+  box-shadow: 0 0 40px rgba(87, 179, 209, 0.1);
+  background-image: radial-gradient(ellipse at top left, rgba(87, 179, 209, 0.1), transparent 50%);
 }
 
 .wfCtaMax {
@@ -979,7 +975,7 @@
   border-radius: 16px;
   background-color: var(--wf-surface-panel);
   border: 1px solid var(--wf-border-accent-soft);
-  background-image: radial-gradient(circle at top left, rgba(88, 171, 71, 0.05), transparent 60%);
+  background-image: radial-gradient(circle at top left, rgba(87, 179, 209, 0.05), transparent 60%);
   transition:
     border-color 0.3s ease,
     box-shadow 0.3s ease;
@@ -988,7 +984,7 @@
 
 .wfPlatformCard:hover {
   border-color: var(--wf-border-accent-medium);
-  box-shadow: 0 0 40px rgba(88, 171, 71, 0.1);
+  box-shadow: 0 0 40px rgba(87, 179, 209, 0.1);
 }
 
 .wfPlatformDesc {