From 3ce152d7562214b8613065ddac2b6c52948db607 Mon Sep 17 00:00:00 2001
From: Roman Mazuryk <romazuryk@gmail.com>
Date: Fri, 31 Jul 2026 22:29:29 +0200
Subject: [PATCH 1/2] feat: reposition portfolio around AI workflow audits

---
 src/assets/css/about.css                  | 133 ++++++++++++--
 src/assets/css/market-pages.css           | 200 ++++++++++++++++++----
 src/components/AIWorkflowDetailPage.jsx   |   3 +-
 src/components/AIWorkflowLibrary.jsx      |   4 +-
 src/components/About.jsx                  | 179 ++++++++++---------
 src/components/AboutPage.jsx              |  37 ++--
 src/components/ContactPage.jsx            |   5 +-
 src/components/Hero.jsx                   |   4 +-
 src/components/MarketPages.jsx            |  32 +---
 src/components/ORIntegrationProofPage.jsx |   4 +-
 src/components/ProofOfWorkPage.jsx        |   4 +-
 src/components/ServicesPage.jsx           |   4 +-
 src/components/common/TypewriterTitle.jsx |  26 +++
 src/locales/en.js                         |  38 ++--
 14 files changed, 483 insertions(+), 190 deletions(-)
 create mode 100644 src/components/common/TypewriterTitle.jsx

diff --git a/src/assets/css/about.css b/src/assets/css/about.css
index e05370e..f638ae1 100644
--- a/src/assets/css/about.css
+++ b/src/assets/css/about.css
@@ -33,7 +33,7 @@
   display: inline-flex;
   align-items: center;
   margin-bottom: 0.7rem;
-  color: var(--accent-medtech);
+  color: var(--about-accent, var(--accent-ai));
   font-size: 11px;
   font-weight: 850;
   letter-spacing: 0.16em;
@@ -71,20 +71,48 @@
 
 .about__panel,
 .about__section-card {
+  --about-accent: var(--accent-ai);
+  --about-soft: var(--accent-ai-soft);
+  --about-glow-x: 100%;
+  --about-glow-y: 0;
+
   position: relative;
   overflow: hidden;
   padding: 1.15rem 1.15rem 1rem;
-  border: 1px solid var(--system-border);
+  border: 1px solid color-mix(in srgb, var(--about-accent) 24%, var(--system-border));
   border-radius: var(--radius);
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(520px 220px at var(--about-glow-x) var(--about-glow-y), var(--about-soft), transparent 66%),
     linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.62)),
     var(--panel);
-  background-size: 28px 28px, 28px 28px, auto, auto;
+  background-size: 28px 28px, 28px 28px, auto, auto, auto;
   box-shadow: var(--shadow);
 }
 
+.about__section-card--implementation {
+  --about-accent: var(--accent-medtech);
+  --about-soft: var(--accent-medtech-soft);
+}
+
+.about__section-card--cool {
+  --about-accent: var(--accent-ai);
+  --about-soft: var(--accent-ai-soft);
+}
+
+.about__section-card--warm {
+  --about-accent: var(--accent-fullstack);
+  --about-soft: var(--accent-fullstack-soft);
+}
+
+.about__section-card--foundation {
+  --about-accent: var(--accent-fullstack);
+  --about-soft: var(--accent-fullstack-soft);
+  --about-glow-x: 0;
+  --about-glow-y: 100%;
+}
+
 .about__panel::before,
 .about__section-card::before,
 .about__cta::before,
@@ -93,7 +121,7 @@
   position: absolute;
   inset: 0 auto 0 0;
   width: 3px;
-  background: linear-gradient(180deg, var(--accent-medtech), transparent);
+  background: linear-gradient(180deg, var(--about-accent, var(--accent-ai)), transparent);
 }
 
 .about__panel {
@@ -137,6 +165,10 @@
   gap: 0.5rem;
 }
 
+.about__icon {
+  color: var(--about-accent, var(--accent-ai));
+}
+
 .about__subtitle {
   font-size: 1.5rem;
   color: var(--accent-medtech);
@@ -199,7 +231,7 @@
 }
 
 .about__check-list svg {
-  color: var(--accent-medtech);
+  color: var(--about-accent, var(--accent-ai));
   flex-shrink: 0;
   margin-top: 3px;
 }
@@ -286,35 +318,106 @@
 }
 
 .about__value-card {
+  --about-card-accent: var(--accent-ai);
+  --about-card-soft: var(--accent-ai-soft);
+
   position: relative;
   padding: 1.15rem;
-  border: 1px solid var(--system-border);
+  border: 1px solid color-mix(in srgb, var(--about-card-accent) 26%, var(--system-border));
   border-radius: var(--radius);
-  background: color-mix(in srgb, var(--panel) 88%, transparent);
+  background:
+    radial-gradient(340px 160px at 100% 0, var(--about-card-soft), transparent 68%),
+    color-mix(in srgb, var(--panel) 88%, transparent);
   box-shadow: none;
 }
 
+.about__value-card::before,
+.about__role-card::before {
+  content: "";
+  position: absolute;
+  inset: 12px auto 12px 0;
+  width: 3px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--about-card-accent), transparent);
+}
+
+.about__value-card--1 {
+  --about-card-accent: var(--accent-ai);
+  --about-card-soft: var(--accent-ai-soft);
+}
+
+.about__value-card--2 {
+  --about-card-accent: var(--brand-2);
+  --about-card-soft: var(--surface-cool);
+}
+
+.about__value-card--3 {
+  --about-card-accent: var(--accent-medtech);
+  --about-card-soft: var(--accent-medtech-soft);
+}
+
 .about__value-card h4,
 .about__role-card h4 {
   margin: 0 0 8px;
-  color: var(--text);
+  color: color-mix(in srgb, var(--about-card-accent, var(--about-accent, var(--accent-ai))) 20%, var(--text));
 }
 
 .about__role-card {
+  --about-card-accent: var(--accent-ai);
+  --about-card-soft: var(--accent-ai-soft);
+
   position: relative;
   display: grid;
   gap: 12px;
   align-content: start;
   padding: 1.15rem;
-  border: 1px solid var(--system-border);
+  border: 1px solid color-mix(in srgb, var(--about-card-accent) 26%, var(--system-border));
   border-radius: var(--radius);
-  background: color-mix(in srgb, var(--panel) 88%, transparent);
+  background:
+    radial-gradient(340px 160px at 100% 0, var(--about-card-soft), transparent 68%),
+    color-mix(in srgb, var(--panel) 88%, transparent);
+}
+
+.about__role-card:nth-child(1) {
+  --about-card-accent: var(--accent-ai);
+  --about-card-soft: var(--accent-ai-soft);
+}
+
+.about__role-card:nth-child(2) {
+  --about-card-accent: var(--accent-fullstack);
+  --about-card-soft: var(--accent-fullstack-soft);
+}
+
+.about__role-card:nth-child(3) {
+  --about-card-accent: var(--accent-medtech);
+  --about-card-soft: var(--accent-medtech-soft);
 }
 
 .about__role-card .btn {
   width: fit-content;
 }
 
+.about__foundation-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.about__foundation-item {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 7px 10px;
+  border: 1px solid color-mix(in srgb, var(--accent-fullstack) 26%, var(--tag-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent-fullstack-soft) 72%, var(--panel));
+  color: var(--muted-strong);
+  font-size: 12px;
+  font-weight: 760;
+  line-height: 1.35;
+}
+
 .about__proof-links {
   display: grid;
   gap: 10px;
@@ -341,6 +444,9 @@
 }
 
 .about__cta {
+  --about-accent: var(--accent-ai);
+  --about-soft: var(--accent-ai-soft);
+
   position: relative;
   overflow: hidden;
   display: flex;
@@ -348,14 +454,15 @@
   justify-content: space-between;
   gap: 18px;
   padding: 1.15rem;
-  border: 1px solid var(--system-border);
+  border: 1px solid color-mix(in srgb, var(--about-accent) 28%, var(--system-border));
   border-radius: var(--radius);
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(520px 220px at 100% 0, var(--about-soft), transparent 66%),
     linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.62)),
     var(--panel);
-  background-size: 28px 28px, 28px 28px, auto, auto;
+  background-size: 28px 28px, 28px 28px, auto, auto, auto;
   box-shadow: var(--shadow);
 }
 
@@ -441,7 +548,7 @@
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    radial-gradient(520px 220px at 100% 0, var(--accent-medtech-soft), transparent 66%),
+    radial-gradient(520px 220px at var(--about-glow-x, 100%) var(--about-glow-y, 0), var(--about-soft, var(--accent-ai-soft)), transparent 66%),
     var(--card-bg);
 }
 
diff --git a/src/assets/css/market-pages.css b/src/assets/css/market-pages.css
index 9fc2613..d877b10 100644
--- a/src/assets/css/market-pages.css
+++ b/src/assets/css/market-pages.css
@@ -1512,13 +1512,48 @@
 }
 
 .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--accent-fullstack);
+  --fullstack-flow-soft: var(--accent-fullstack-soft);
+
   position: relative;
   z-index: 1;
   min-width: 0;
   padding: 12px 10px;
-  border: 1px solid var(--system-border);
+  border: 1px solid color-mix(in srgb, var(--fullstack-flow-accent) 30%, var(--system-border));
   border-radius: 12px;
-  background: color-mix(in srgb, var(--panel) 90%, transparent);
+  background:
+    radial-gradient(180px 100px at 100% 0, var(--fullstack-flow-soft), transparent 68%),
+    color-mix(in srgb, var(--panel) 90%, transparent);
+}
+
+.fullstack-hero-map__step:nth-child(1) .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--brand-2);
+  --fullstack-flow-soft: var(--surface-cool);
+}
+
+.fullstack-hero-map__step:nth-child(2) .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--accent-ai);
+  --fullstack-flow-soft: var(--accent-ai-soft);
+}
+
+.fullstack-hero-map__step:nth-child(3) .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--accent-fullstack);
+  --fullstack-flow-soft: var(--accent-fullstack-soft);
+}
+
+.fullstack-hero-map__step:nth-child(4) .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--accent-medtech);
+  --fullstack-flow-soft: var(--accent-medtech-soft);
+}
+
+.fullstack-hero-map__step:nth-child(5) .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--brand-warm);
+  --fullstack-flow-soft: var(--surface-warm);
+}
+
+.fullstack-hero-map__step:nth-child(6) .fullstack-hero-map__node {
+  --fullstack-flow-accent: var(--accent-fullstack-2);
+  --fullstack-flow-soft: var(--surface-cool);
 }
 
 .fullstack-hero-map__node span {
@@ -1528,8 +1563,8 @@
   height: 28px;
   margin-bottom: 9px;
   border-radius: 999px;
-  background: var(--accent-fullstack-soft);
-  color: var(--accent-fullstack);
+  background: var(--fullstack-flow-soft);
+  color: var(--fullstack-flow-accent);
   font-size: 11px;
   font-weight: 900;
 }
@@ -1561,15 +1596,21 @@
 .fullstack-workflow-card,
 .fullstack-project-card,
 .fullstack-capability-card {
+  --fullstack-card-accent: var(--accent-fullstack);
+  --fullstack-card-soft: var(--accent-fullstack-soft);
+  --fullstack-card-glow-x: 100%;
+  --fullstack-card-glow-y: 0;
+
   position: relative;
   overflow: hidden;
-  border: 1px solid var(--system-border);
+  border: 1px solid color-mix(in srgb, var(--fullstack-card-accent) 24%, var(--system-border));
   border-radius: 14px;
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(360px 170px at var(--fullstack-card-glow-x) var(--fullstack-card-glow-y), var(--fullstack-card-soft), transparent 70%),
     color-mix(in srgb, var(--panel) 90%, transparent);
-  background-size: 24px 24px, 24px 24px, auto;
+  background-size: 24px 24px, 24px 24px, auto, auto;
   box-shadow: var(--shadow);
 }
 
@@ -1581,13 +1622,38 @@
   position: absolute;
   inset: 0 auto 0 0;
   width: 3px;
-  background: linear-gradient(180deg, var(--accent-fullstack), transparent);
+  background: linear-gradient(180deg, var(--fullstack-card-accent), transparent);
 }
 
 .fullstack-stack-card {
   padding: 18px;
 }
 
+.fullstack-stack-card:nth-child(1) {
+  --fullstack-card-accent: var(--accent-fullstack);
+  --fullstack-card-soft: var(--accent-fullstack-soft);
+}
+
+.fullstack-stack-card:nth-child(2) {
+  --fullstack-card-accent: var(--brand-2);
+  --fullstack-card-soft: var(--surface-cool);
+}
+
+.fullstack-stack-card:nth-child(3) {
+  --fullstack-card-accent: var(--accent-medtech);
+  --fullstack-card-soft: var(--accent-medtech-soft);
+}
+
+.fullstack-stack-card:nth-child(4) {
+  --fullstack-card-accent: var(--brand-warm);
+  --fullstack-card-soft: var(--surface-warm);
+}
+
+.fullstack-stack-card:nth-child(5) {
+  --fullstack-card-accent: var(--accent-ai);
+  --fullstack-card-soft: var(--accent-ai-soft);
+}
+
 .fullstack-stack-card h3,
 .fullstack-workflow-card h3,
 .fullstack-project-card h3,
@@ -1599,6 +1665,7 @@
 
 .fullstack-stack-card h3 {
   margin-bottom: 12px;
+  color: color-mix(in srgb, var(--fullstack-card-accent) 22%, var(--text));
   font-size: 16px;
 }
 
@@ -1610,6 +1677,13 @@
   gap: 8px;
 }
 
+.fullstack-stack-card .feature-pill,
+.fullstack-project-card__stack .feature-pill {
+  --system-accent: var(--fullstack-card-accent);
+  --system-accent-soft: var(--fullstack-card-soft);
+  border-color: color-mix(in srgb, var(--fullstack-card-accent) 26%, var(--tag-border));
+}
+
 .fullstack-workflow-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1618,11 +1692,26 @@
 
 .fullstack-workflow-card {
   padding: 18px;
-  background:
-    linear-gradient(var(--grid-line) 1px, transparent 1px),
-    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    radial-gradient(260px 150px at 100% 0, var(--accent-fullstack-soft), transparent 70%),
-    color-mix(in srgb, var(--panel) 90%, transparent);
+}
+
+.fullstack-workflow-card:nth-child(1) {
+  --fullstack-card-accent: var(--brand-2);
+  --fullstack-card-soft: var(--surface-cool);
+}
+
+.fullstack-workflow-card:nth-child(2) {
+  --fullstack-card-accent: var(--accent-fullstack);
+  --fullstack-card-soft: var(--accent-fullstack-soft);
+}
+
+.fullstack-workflow-card:nth-child(3) {
+  --fullstack-card-accent: var(--accent-medtech);
+  --fullstack-card-soft: var(--accent-medtech-soft);
+}
+
+.fullstack-workflow-card:nth-child(4) {
+  --fullstack-card-accent: var(--brand-warm);
+  --fullstack-card-soft: var(--surface-warm);
 }
 
 .fullstack-workflow-card span,
@@ -1630,7 +1719,7 @@
 .fullstack-project-card__status {
   display: inline-flex;
   width: fit-content;
-  color: var(--accent-fullstack);
+  color: var(--fullstack-card-accent);
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 0.14em;
@@ -1639,6 +1728,7 @@
 
 .fullstack-workflow-card h3 {
   margin-top: 10px;
+  color: color-mix(in srgb, var(--fullstack-card-accent) 20%, var(--text));
   font-size: 18px;
 }
 
@@ -1660,20 +1750,36 @@
   padding: 20px;
 }
 
-.fullstack-project-card:nth-child(2n) {
-  background:
-    linear-gradient(var(--grid-line) 1px, transparent 1px),
-    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    radial-gradient(360px 170px at 100% 0, color-mix(in srgb, var(--accent-fullstack-2) 12%, transparent), transparent 70%),
-    color-mix(in srgb, var(--panel) 91%, transparent);
+.fullstack-project-card:nth-child(1) {
+  --fullstack-card-accent: var(--accent-fullstack);
+  --fullstack-card-soft: var(--accent-fullstack-soft);
 }
 
-.fullstack-project-card:nth-child(3n) {
-  background:
-    linear-gradient(var(--grid-line) 1px, transparent 1px),
-    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    radial-gradient(360px 170px at 0 100%, var(--accent-fullstack-soft), transparent 70%),
-    color-mix(in srgb, var(--panel) 91%, transparent);
+.fullstack-project-card:nth-child(2) {
+  --fullstack-card-accent: var(--brand-2);
+  --fullstack-card-soft: var(--surface-cool);
+}
+
+.fullstack-project-card:nth-child(3) {
+  --fullstack-card-accent: var(--accent-medtech);
+  --fullstack-card-soft: var(--accent-medtech-soft);
+}
+
+.fullstack-project-card:nth-child(4) {
+  --fullstack-card-accent: var(--accent-ai);
+  --fullstack-card-soft: var(--accent-ai-soft);
+}
+
+.fullstack-project-card:nth-child(5) {
+  --fullstack-card-accent: var(--brand-warm);
+  --fullstack-card-soft: var(--surface-warm);
+}
+
+.fullstack-project-card:nth-child(6) {
+  --fullstack-card-accent: var(--accent-fullstack-2);
+  --fullstack-card-soft: var(--surface-cool);
+  --fullstack-card-glow-x: 0;
+  --fullstack-card-glow-y: 100%;
 }
 
 .fullstack-project-card--compact {
@@ -1688,13 +1794,14 @@
 
 .fullstack-project-card__status {
   padding: 5px 8px;
-  border: 1px solid color-mix(in srgb, var(--accent-fullstack) 34%, var(--border));
+  border: 1px solid color-mix(in srgb, var(--fullstack-card-accent) 34%, var(--border));
   border-radius: 999px;
-  background: var(--accent-fullstack-soft);
+  background: var(--fullstack-card-soft);
   letter-spacing: 0.08em;
 }
 
 .fullstack-project-card h3 {
+  color: color-mix(in srgb, var(--fullstack-card-accent) 18%, var(--text));
   font-size: 21px;
 }
 
@@ -1727,9 +1834,9 @@
   gap: 6px;
   min-height: 32px;
   padding: 7px 10px;
-  border: 1px solid color-mix(in srgb, var(--accent-fullstack) 30%, var(--border));
+  border: 1px solid color-mix(in srgb, var(--fullstack-card-accent) 30%, var(--border));
   border-radius: 999px;
-  background: var(--accent-fullstack-soft);
+  background: var(--fullstack-card-soft);
   color: var(--text);
   font-size: 13px;
   font-weight: 850;
@@ -1737,8 +1844,8 @@
 }
 
 .fullstack-project-card__links a:hover {
-  border-color: color-mix(in srgb, var(--accent-fullstack) 56%, var(--border-hover));
-  background: color-mix(in srgb, var(--accent-fullstack-soft) 78%, var(--panel-hover));
+  border-color: color-mix(in srgb, var(--fullstack-card-accent) 56%, var(--border-hover));
+  background: color-mix(in srgb, var(--fullstack-card-soft) 78%, var(--panel-hover));
 }
 
 .fullstack-capability-grid {
@@ -1749,7 +1856,38 @@
   padding: 18px;
 }
 
+.fullstack-capability-card:nth-child(1) {
+  --fullstack-card-accent: var(--accent-fullstack);
+  --fullstack-card-soft: var(--accent-fullstack-soft);
+}
+
+.fullstack-capability-card:nth-child(2) {
+  --fullstack-card-accent: var(--accent-medtech);
+  --fullstack-card-soft: var(--accent-medtech-soft);
+}
+
+.fullstack-capability-card:nth-child(3) {
+  --fullstack-card-accent: var(--brand-2);
+  --fullstack-card-soft: var(--surface-cool);
+}
+
+.fullstack-capability-card:nth-child(4) {
+  --fullstack-card-accent: var(--accent-ai);
+  --fullstack-card-soft: var(--accent-ai-soft);
+}
+
+.fullstack-capability-card:nth-child(5) {
+  --fullstack-card-accent: var(--accent-fullstack-2);
+  --fullstack-card-soft: var(--surface-cool);
+}
+
+.fullstack-capability-card:nth-child(6) {
+  --fullstack-card-accent: var(--brand-warm);
+  --fullstack-card-soft: var(--surface-warm);
+}
+
 .fullstack-capability-card h3 {
+  color: color-mix(in srgb, var(--fullstack-card-accent) 18%, var(--text));
   font-size: 17px;
 }
 
diff --git a/src/components/AIWorkflowDetailPage.jsx b/src/components/AIWorkflowDetailPage.jsx
index 4135ef0..9fff2d5 100644
--- a/src/components/AIWorkflowDetailPage.jsx
+++ b/src/components/AIWorkflowDetailPage.jsx
@@ -17,6 +17,7 @@ import { getWorkflowBySlug } from "../data/aiWorkflows.js";
 import { useTranslation } from "../context/LangContext.jsx";
 import StatusBadge from "./StatusBadge.jsx";
 import PageHero from "./common/PageHero.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 
 const AUDIT_HREF = "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request";
 
@@ -105,7 +106,7 @@ export default function AIWorkflowDetailPage({ slug }) {
     <div className="ai-workflow-detail">
       <PageHero
         eyebrow={t("site.aiWorkflow.detail.heroEyebrow")}
-        title={title}
+        title={<TypewriterTitle text={title} />}
         subtitle={summary}
         primaryCta={{ label: t("site.cta.startAudit"), href: AUDIT_HREF }}
         secondaryCta={{ label: t("site.aiWorkflow.detail.back"), href: "/ai-workflow", icon: <ArrowLeft size={15} className="icon ml-1" aria-hidden="true" /> }}
diff --git a/src/components/AIWorkflowLibrary.jsx b/src/components/AIWorkflowLibrary.jsx
index d9da81d..823e4c6 100644
--- a/src/components/AIWorkflowLibrary.jsx
+++ b/src/components/AIWorkflowLibrary.jsx
@@ -16,6 +16,7 @@ import { aiWorkflowExamples, workflowCategories } from "../data/aiWorkflows.js";
 import { useTranslation } from "../context/LangContext.jsx";
 import StatusBadge from "./StatusBadge.jsx";
 import PageHero from "./common/PageHero.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 
 const AUDIT_HREF = "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request";
 
@@ -153,12 +154,13 @@ export default function AIWorkflowLibrary() {
       return haystack.includes(problemFilter.toLowerCase());
     })
     .slice(0, 4);
+  const heroTitle = t("site.aiWorkflow.hero.title");
 
   return (
     <div className="ai-workflow-page">
       <PageHero
         eyebrow={t("site.aiWorkflow.hero.eyebrow")}
-        title={t("site.aiWorkflow.hero.title")}
+        title={<TypewriterTitle text={heroTitle} />}
         subtitle={t("site.aiWorkflow.hero.subtitle")}
         primaryCta={{ label: t("site.aiWorkflow.hero.primary"), href: "#medtech-clinical-or-workflows", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
         secondaryCta={{ label: t("site.cta.startAudit"), href: AUDIT_HREF }}
diff --git a/src/components/About.jsx b/src/components/About.jsx
index bd840e3..b0fc428 100644
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@@ -3,72 +3,67 @@ import {
   ArrowRight,
   BriefcaseBusiness,
   CheckCircle2,
+  Code2,
   ClipboardCheck,
   Layers,
   ShieldCheck,
   Users,
   Workflow,
 } from "lucide-react";
-import { useTranslation } from "../context/LangContext.jsx";
 
 const IMPLEMENTATION_AREAS = [
-  "Operating room surgical lights and video integration",
-  "OR video/audio routing, recording, and surgical workflow support",
-  "Medical gas pendants for OR and ICU environments",
-  "Hyperbaric chamber implementation",
-  "Surgical collaboration and education workflows",
-  "Medical equipment delivery, installation, training, support, and handover",
-  "Coordination between hospitals, vendors, technical teams, and decision-makers",
+  "OR and clinical workflow environments",
+  "Medical equipment implementation and handover",
+  "Stakeholder coordination across hospitals, vendors, and technical teams",
+  "Documentation, training, support, and visibility gaps",
+  "Judgment about where human review must remain",
 ];
 
 const EXPERIENCE_GIVES = [
-  "Practical understanding of how hospital workflows break",
-  "Sensitivity to documentation, ownership, handover, and visibility gaps",
-  "Ability to translate operational complexity into product requirements",
-  "Better judgment about where AI can help and where human review must remain",
-  "Credibility in MedTech, HealthTech, implementation, product, and workflow roles",
+  "Understands where workflows break",
+  "Designs for ownership, review, and handover",
+  "Translates messy operational context into system requirements",
+  "Avoids over-automating high-risk workflows",
 ];
 
 const FOCUS_CARDS = [
   {
-    title: "Product & workflow systems",
+    title: "AI-assisted delivery",
     text:
-      "Turning operational complexity into product concepts, requirements, dashboards, SOPs, and handover-ready systems.",
+      "Using AI to accelerate workflow discovery, prototyping, documentation, and implementation support while keeping human judgment visible.",
   },
   {
-    title: "AI-assisted delivery",
+    title: "Product & workflow systems",
     text:
-      "Using AI to accelerate discovery, prototyping, documentation, and implementation support without replacing human judgment.",
+      "Turning operational complexity into product concepts, requirements, dashboards, SOPs, and handover-ready systems.",
   },
   {
-    title: "MedTech and regulated operations",
+    title: "Regulated operations proof",
     text:
-      "Applying workflow-first thinking to HealthTech, MedTech, pharma logistics, clinical operations, and implementation-heavy B2B environments.",
+      "Using MedTech and regulated-operations experience as trust proof for high-friction workflows, not as the primary commercial identity.",
   },
 ];
 
-const HIRING_ROLES = [
+const PROBLEM_SPACES = [
+  "AI Workflow Opportunity Audit",
+  "Prototype Sprint",
+  "Internal Assistant / SOP System",
+  "Dashboard or workflow tool",
+];
+
+const EMPLOYMENT_ROLES = [
   "AI Product Manager",
   "Technical Product Manager",
   "Product Operations Lead",
   "MedTech / HealthTech Product Manager",
-  "Implementation / Solutions Product roles",
 ];
 
-const PROBLEM_SPACES = [
-  "MedTech implementation workflows",
-  "OR / hospital workflow systems",
+const PROOF_AREAS = [
   "Documentation and handover systems",
   "Operational dashboards",
   "Compliance-aware workflow automation",
-];
-
-const COMPANY_PATHS = [
-  "AI Workflow Audit",
-  "Product Discovery Sprint",
-  "Workflow Prototype Support",
-  "SOP / documentation systems",
-  "Operator-in-residence support",
+  "MedTech implementation workflows",
+  "OR / hospital workflow systems",
 ];
 
 const MEDTECH_MILESTONES = [
@@ -81,6 +76,14 @@ const MEDTECH_MILESTONES = [
   "Hospital equipment handover and training projects",
 ];
 
+const TECH_FOUNDATION = [
+  "Master's in Software Development",
+  "Applied AI automation and workflow systems",
+  "AI-assisted development",
+  "Full-stack product implementation",
+  "Continuous learning through practical demos, prototypes, and documentation",
+];
+
 function CheckList({ items }) {
   return (
     <ul className="about__check-list">
@@ -95,17 +98,15 @@ function CheckList({ items }) {
 }
 
 export default function About() {
-  const { t } = useTranslation();
-  const implementationAreasValue = t("site.about.implementation.areas");
-  const experienceGivesValue = t("site.about.implementation.gives");
-  const focusCardsValue = t("site.about.focus.cards");
-  const roleCardsValue = t("site.about.role.cards");
-  const milestonesValue = t("site.about.milestones.items");
-  const implementationAreas = Array.isArray(implementationAreasValue) ? implementationAreasValue : IMPLEMENTATION_AREAS;
-  const experienceGives = Array.isArray(experienceGivesValue) ? experienceGivesValue : EXPERIENCE_GIVES;
-  const focusCards = Array.isArray(focusCardsValue) ? focusCardsValue : FOCUS_CARDS;
-  const roleCards = Array.isArray(roleCardsValue) ? roleCardsValue : [];
-  const milestones = Array.isArray(milestonesValue) ? milestonesValue : MEDTECH_MILESTONES;
+  const implementationAreas = IMPLEMENTATION_AREAS;
+  const experienceGives = EXPERIENCE_GIVES;
+  const focusCards = FOCUS_CARDS;
+  const roleCards = [
+    { title: "For consulting clients", items: PROBLEM_SPACES },
+    { title: "For product and employment roles", items: EMPLOYMENT_ROLES },
+    { title: "Where regulated proof helps", items: PROOF_AREAS },
+  ];
+  const milestones = MEDTECH_MILESTONES;
 
   return (
     <section id="about" className="section container about">
@@ -114,7 +115,7 @@ export default function About() {
           <div className="about__photo">
             <img
               src="/images/profile.jpg"
-              alt={t("about.profileAlt")}
+              alt="Roman Mazuryk portrait"
               className="about__photo-img"
               loading="lazy"
               decoding="async"
@@ -124,31 +125,49 @@ export default function About() {
           </div>
 
           <div className="about__section-card">
-            <div className="about__eyebrow">{t("site.about.background.eyebrow")}</div>
+            <div className="about__eyebrow">Background</div>
             <h3 className="about__heading">
               <Layers size={18} className="icon about__icon" />
-              {t("site.about.background.title")}
+              A practical operator foundation
+            </h3>
+            <p className="about__text">My work sits between operational reality and product structure: understanding where workflows break, then designing AI-assisted systems that make the work clearer, reviewable, and easier to execute.</p>
+          </div>
+        </div>
+
+        <div className="about__row reveal">
+          <div className="about__section-card about__section-card--foundation">
+            <div className="about__eyebrow">Technical foundation</div>
+            <h3 className="about__heading">
+              <Code2 size={18} className="icon about__icon" />
+              Technical Foundation & Continuous AI Learning
             </h3>
-            <p className="about__text">{t("site.about.background.text")}</p>
+            <p className="about__text">
+              Alongside hands-on product and implementation work, I'm completing a Master's in Software Development and continuously deepening my applied AI skills across automation, AI-assisted development, workflow systems, and practical deployment.
+            </p>
+            <div className="about__foundation-list" aria-label="Technical foundation and AI learning areas">
+              {TECH_FOUNDATION.map((item) => (
+                <span className="about__foundation-item" key={item}>{item}</span>
+              ))}
+            </div>
           </div>
         </div>
 
         <div className="about__row reveal">
           <div className="about__section-card about__section-card--implementation">
-            <div className="about__eyebrow">{t("site.about.implementation.eyebrow")}</div>
+            <div className="about__eyebrow">Regulated operations proof</div>
             <h3 className="about__heading">
               <ClipboardCheck size={18} className="icon about__icon" />
-              {t("site.about.implementation.title")}
+              Regulated operations experience that improves AI system design
             </h3>
-            <p className="about__text">{t("site.about.implementation.text")}</p>
+            <p className="about__text">This experience matters because AI workflow systems fail when they ignore real constraints: handovers, ownership, documentation, training, exceptions, and review points.</p>
 
             <div className="about__implementation-grid">
               <div>
-                <h4>{t("site.about.implementation.areasTitle")}</h4>
+                <h4>Strongest proof points</h4>
                 <CheckList items={implementationAreas} />
               </div>
               <div>
-                <h4>{t("site.about.implementation.givesTitle")}</h4>
+                <h4>How it improves AI workflow design</h4>
                 <CheckList items={experienceGives} />
               </div>
             </div>
@@ -157,28 +176,28 @@ export default function About() {
 
         <div className="about__row reveal">
           <div className="about__section-card about__section-card--cool">
-            <div className="about__eyebrow">{t("site.about.philosophy.eyebrow")}</div>
+            <div className="about__eyebrow">Operating philosophy</div>
             <h3 className="about__heading">
               <Workflow size={18} className="icon about__icon" />
-              {t("site.about.philosophy.title")}
+              Operator-first, AI-assisted
             </h3>
             <p className="about__text about__text--large">
-              {t("site.about.philosophy.text")}
+              I do not start from what AI can do. I start from where the workflow breaks, where risk appears, and what system should exist.
             </p>
-            <p className="about__text">{t("site.about.philosophy.support")}</p>
+            <p className="about__text">AI is the acceleration layer: useful for discovery, prototyping, documentation, and delivery, but the workflow logic, ownership, and review model must stay clear.</p>
           </div>
         </div>
 
         <div className="about__row reveal">
           <div className="about__section-card">
-            <div className="about__eyebrow">{t("site.about.focus.eyebrow")}</div>
+            <div className="about__eyebrow">Current focus</div>
             <h3 className="about__heading">
               <BriefcaseBusiness size={18} className="icon about__icon" />
-              {t("site.about.focus.title")}
+              Where this experience translates today
             </h3>
             <div className="about__focus-grid">
-              {focusCards.map((card) => (
-                <article className="about__value-card" key={card.title}>
+              {focusCards.map((card, index) => (
+                <article className={`about__value-card about__value-card--${index + 1}`} key={card.title}>
                   <h4>{card.title}</h4>
                   <p className="about__text">{card.text}</p>
                 </article>
@@ -189,34 +208,34 @@ export default function About() {
 
         <div className="about__row reveal">
           <div className="about__section-card about__section-card--warm">
-            <div className="about__eyebrow">{t("site.about.role.eyebrow")}</div>
+            <div className="about__eyebrow">Role fit</div>
             <h3 className="about__heading">
               <ShieldCheck size={18} className="icon about__icon" />
-              {t("site.about.role.title")}
+              Where this background creates value
             </h3>
-            <p className="about__text">{t("site.about.role.intro")}</p>
+            <p className="about__text">My strongest fit is AI workflow systems for operations-heavy teams, backed by product judgment, regulated-operations credibility, and implementation proof.</p>
             <div className="about__role-grid">
               <article className="about__role-card">
-                <h4>{roleCards?.[0]?.title || "For product and operations teams"}</h4>
-                <CheckList items={roleCards?.[0]?.items || HIRING_ROLES} />
-                <a href="/proof-of-work" className="btn btn--primary">
-                  {t("site.cta.viewProof")} <ArrowRight size={15} className="icon ml-1" />
+                <h4>{roleCards[0].title}</h4>
+                <CheckList items={roleCards[0].items} />
+                <a href="/contact" className="btn btn--primary">
+                  Discuss a Workflow <ArrowRight size={15} className="icon ml-1" />
                 </a>
               </article>
 
               <article className="about__role-card">
-                <h4>{roleCards?.[1]?.title || "Best-fit problem spaces"}</h4>
-                <CheckList items={roleCards?.[1]?.items || PROBLEM_SPACES} />
-                <a href="/ai-workflow" className="btn btn--ghost">
-                  {t("site.cta.exploreAiWorkflows")}
+                <h4>{roleCards[1].title}</h4>
+                <CheckList items={roleCards[1].items} />
+                <a href="/proof-of-work" className="btn btn--ghost">
+                  View Proof of Work
                 </a>
               </article>
 
               <article className="about__role-card">
-                <h4>{roleCards?.[2]?.title || "For companies"}</h4>
-                <CheckList items={roleCards?.[2]?.items || COMPANY_PATHS} />
-                <a href="/collaborate" className="btn btn--ghost">
-                  {t("site.cta.workWithMe")}
+                <h4>{roleCards[2].title}</h4>
+                <CheckList items={roleCards[2].items} />
+                <a href="/medtech" className="btn btn--ghost">
+                  View Trust Proof
                 </a>
               </article>
             </div>
@@ -225,7 +244,7 @@ export default function About() {
 
         <div className="about__row reveal">
           <details className="about__timeline">
-            <summary>{t("site.about.milestones.title")}</summary>
+            <summary>Selected regulated-operations milestones</summary>
             <ol>
               {milestones.map((milestone) => (
                 <li key={milestone}>{milestone}</li>
@@ -237,15 +256,15 @@ export default function About() {
         <div className="about__row reveal">
           <div className="about__cta">
             <div>
-              <div className="about__eyebrow">{t("site.nextStep")}</div>
-              <h3>{t("site.about.final.title")}</h3>
+              <div className="about__eyebrow">Next step</div>
+              <h3>Discuss one workflow worth fixing</h3>
             </div>
             <div className="about__cta-actions">
               <a href="/contact" className="btn btn--primary">
-                {t("site.cta.contact")} <Users size={15} className="icon ml-1" />
+                Discuss a Workflow <Users size={15} className="icon ml-1" />
               </a>
               <a href="/proof-of-work" className="btn btn--ghost">
-                {t("site.cta.viewProof")}
+                View Proof of Work
               </a>
             </div>
           </div>
diff --git a/src/components/AboutPage.jsx b/src/components/AboutPage.jsx
index c82fc2f..25965ae 100644
--- a/src/components/AboutPage.jsx
+++ b/src/components/AboutPage.jsx
@@ -1,37 +1,50 @@
 import { ArrowRight } from "lucide-react";
-import { useTranslation } from "../context/LangContext.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 import { ArtifactMap, FeaturePill, PageHero } from "./system/SystemVisuals.jsx";
 import About from "./About.jsx";
 
 const aboutArtifact = {
   inputLabel: "Background",
   outputLabel: "Operating model",
-  inputs: ["MedTech implementation", "Product / project ownership", "AI-assisted delivery"],
-  outputs: ["Workflow systems", "Structured handover", "Product proof"],
+  inputs: [
+    { label: "Product & workflow systems", accent: "ai" },
+    { label: "AI-assisted delivery", accent: "ai" },
+    { label: "Regulated implementation experience", accent: "medtech" },
+  ],
+  outputs: [
+    { label: "Workflow discovery", accent: "ai" },
+    { label: "Human-reviewed AI systems", accent: "ai" },
+    { label: "Prototype-to-delivery proof", accent: "fullstack" },
+  ],
 };
 
-const aboutPills = ["Operator context", "Workflow states", "Product logic", "AI-assisted build"];
+const aboutPills = [
+  { label: "AI workflow systems", accent: "ai" },
+  { label: "Product judgment", accent: "ai" },
+  { label: "Full-stack delivery", accent: "fullstack" },
+  { label: "Regulated operations proof", accent: "medtech" },
+];
 
 export default function AboutPage() {
-  const { t } = useTranslation();
+  const title = "I turn messy workflows into practical AI-assisted systems";
 
   return (
     <>
       <PageHero
         eyebrow="About"
-        title="Operator, Product Thinker, and AI-Enhanced Builder"
-        subtitle="I combine MedTech implementation experience, product/project management, AI automation, and full-stack development to build practical workflow systems."
-        primaryCta={{ label: "Explore MedTech Proof", href: "/medtech", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
-        secondaryCta={{ label: t("site.cta.contact"), href: "/contact" }}
+        title={<TypewriterTitle text={title} />}
+        subtitle="I help operations-heavy teams turn fragmented processes into practical AI-assisted systems, combining product strategy, workflow analysis, AI automation, and full-stack delivery. My MedTech background adds real-world judgment from regulated, high-friction environments."
+        primaryCta={{ label: "Explore AI Workflows", href: "/ai-workflow", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
+        secondaryCta={{ label: "View Proof of Work", href: "/proof-of-work" }}
         scrollTargetId="about"
       >
         <div className="market-page__hero-extra">
           <div className="market-page__pill-list">
-            {aboutPills.map((pill) => <FeaturePill accent="medtech" key={pill}>{pill}</FeaturePill>)}
+            {aboutPills.map((pill) => <FeaturePill accent={pill.accent} key={pill.label}>{pill.label}</FeaturePill>)}
           </div>
           <ArtifactMap
-            accent="medtech"
-            title="MedTech implementation and product ownership become workflow systems"
+            accent="ai"
+            title="Background becomes workflow discovery, reviewed AI systems, and delivery proof"
             {...aboutArtifact}
           />
         </div>
diff --git a/src/components/ContactPage.jsx b/src/components/ContactPage.jsx
index 83b3c5d..908c679 100644
--- a/src/components/ContactPage.jsx
+++ b/src/components/ContactPage.jsx
@@ -1,4 +1,5 @@
 import { CalendarCheck, BriefcaseBusiness } from "lucide-react";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 import { ArtifactMap, FeaturePill, PageHero } from "./system/SystemVisuals.jsx";
 import Contact from "./Contact.jsx";
 
@@ -12,11 +13,13 @@ const contactArtifact = {
 const contactPills = ["AI Workflow Audit", "One workflow to automate", "Prototype sprint", "Regulated operations"];
 
 export default function ContactPage() {
+  const title = "Discuss One Workflow to Automate";
+
   return (
     <>
       <PageHero
         eyebrow="Contact"
-        title="Discuss One Workflow to Automate"
+        title={<TypewriterTitle text={title} />}
         subtitle="Use this page to start an AI Workflow Opportunity Audit, scope an automation pilot, or discuss a prototype that turns one fragmented process into a practical system."
         primaryCta={{ label: "Book an AI Workflow Audit", href: "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request", icon: <CalendarCheck size={15} className="icon ml-1" aria-hidden="true" /> }}
         secondaryCta={{ label: "Choose Contact Path", href: "#contact", icon: <BriefcaseBusiness size={15} className="icon ml-1" aria-hidden="true" /> }}
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 8193de1..d978dd5 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -2,15 +2,17 @@ import React from "react";
 import { Linkedin, Github, FileDown } from "lucide-react";
 import { useTranslation } from "../context/LangContext.jsx";
 import PageHero from "./common/PageHero.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 
 const Hero = () => {
   const { t } = useTranslation();
+  const title = t("site.home.hero.title");
 
   return (
     <PageHero
       id="home"
       eyebrow={t("site.home.hero.eyebrow")}
-      title={t("site.home.hero.title")}
+      title={<TypewriterTitle text={title} />}
       subtitle={t("site.home.hero.subtitle")}
       primaryCta={{ label: t("site.cta.viewProof"), href: "/proof-of-work" }}
       secondaryCta={{ label: t("site.cta.exploreAiWorkflows"), href: "/ai-workflow" }}
diff --git a/src/components/MarketPages.jsx b/src/components/MarketPages.jsx
index eff4d64..ebd32ec 100644
--- a/src/components/MarketPages.jsx
+++ b/src/components/MarketPages.jsx
@@ -18,6 +18,7 @@ import {
   SystemCard,
   WorkflowMap,
 } from "./system/SystemVisuals.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 import { getProjectsByCategory, projectCategories } from "../data/projects.js";
 
 const EMAIL = "romazuryk@proton.me";
@@ -595,33 +596,6 @@ function PillList({ items, accent = "ai" }) {
   );
 }
 
-function TypewriterTitle({ text }) {
-  let charIndex = 0;
-  const words = text.split(" ");
-
-  return (
-    <span className="home-typewriter-title" aria-label={text}>
-      {words.map((word, wordIndex) => (
-        <span className="home-typewriter-title__word" aria-hidden="true" key={`${word}-${wordIndex}`}>
-          {Array.from(word).map((char) => {
-            const currentIndex = charIndex;
-            charIndex += 1;
-            return (
-              <span
-                className="home-typewriter-title__char"
-                style={{ "--char-index": currentIndex }}
-                key={`${char}-${currentIndex}`}
-              >
-                {char}
-              </span>
-            );
-          })}
-        </span>
-      ))}
-    </span>
-  );
-}
-
 function HomeHeroVisual() {
   return (
     <div className="home-system-visual system-accent--ai" aria-label="Fragmented inputs become structured outputs">
@@ -1253,11 +1227,13 @@ export function MedTechPage() {
 }
 
 export function FullStackPage() {
+  const fullstackTitle = "From Audit to Working System";
+
   return (
     <div className="market-page market-page--fullstack">
       <PageHero
         eyebrow="Implementation proof"
-        title="From Audit to Working System"
+        title={<TypewriterTitle text={fullstackTitle} />}
         subtitle="I can move from workflow discovery to prototype, internal tool, dashboard, automation, or deployed custom application using modern full-stack tools and AI-assisted development workflows."
         primaryCta={{ label: "View Selected Projects", href: "#fullstack-projects" }}
         secondaryCta={{ label: "Book an AI Workflow Audit", href: `mailto:${EMAIL}?subject=AI%20Workflow%20Audit%20Request`, icon: <Mail size={15} className="icon ml-1" aria-hidden="true" /> }}
diff --git a/src/components/ORIntegrationProofPage.jsx b/src/components/ORIntegrationProofPage.jsx
index 451cd19..a7f5a8d 100644
--- a/src/components/ORIntegrationProofPage.jsx
+++ b/src/components/ORIntegrationProofPage.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ArrowRight } from "lucide-react";
 import { useTranslation } from "../context/LangContext.jsx";
 import PageHero from "./common/PageHero.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 import StatusBadge from "./StatusBadge.jsx";
 
 const complexityElements = [
@@ -71,12 +72,13 @@ export default function ORIntegrationProofPage() {
   const complexity = Array.isArray(complexityValue) ? complexityValue : complexityElements;
   const cards = Array.isArray(cardsValue) ? cardsValue : proofCards;
   const opportunities = Array.isArray(opportunitiesValue) ? opportunitiesValue : futureOpportunities;
+  const heroTitle = t("site.orProof.hero.title");
 
   return (
     <div className="proof-page or-proof-page">
       <PageHero
         eyebrow={t("site.orProof.hero.eyebrow")}
-        title={t("site.orProof.hero.title")}
+        title={<TypewriterTitle text={heroTitle} />}
         subtitle={t("site.orProof.hero.subtitle")}
         primaryCta={{ label: t("site.cta.exploreAiWorkflows"), href: "/ai-workflow", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
         secondaryCta={{ label: t("site.cta.workWithMe"), href: "/collaborate" }}
diff --git a/src/components/ProofOfWorkPage.jsx b/src/components/ProofOfWorkPage.jsx
index 2d29907..fa55c6e 100644
--- a/src/components/ProofOfWorkPage.jsx
+++ b/src/components/ProofOfWorkPage.jsx
@@ -4,6 +4,7 @@ import { aiWorkflowExamples, getWorkflowBySlug } from "../data/aiWorkflows.js";
 import { useTranslation } from "../context/LangContext.jsx";
 import StatusBadge from "./StatusBadge.jsx";
 import PageHero from "./common/PageHero.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 
 const AI_WORKFLOW_SLUGS = [
   "medtech-implementation-handoff-assistant",
@@ -331,12 +332,13 @@ export default function ProofOfWorkPage() {
   const secondaryWorkflows = aiWorkflowExamples.filter(
     (workflow) => workflow.visibility === "secondary" && !primarySlugs.has(workflow.slug)
   );
+  const heroTitle = t("site.proof.hero.title");
 
   return (
     <div className="proof-page">
       <PageHero
         eyebrow={t("site.proof.hero.eyebrow")}
-        title={t("site.proof.hero.title")}
+        title={<TypewriterTitle text={heroTitle} />}
         subtitle={t("site.proof.hero.subtitle")}
         primaryCta={{ label: t("site.proof.hero.primary"), href: "#featured-domain-proof", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
         secondaryCta={{ label: t("site.cta.exploreAiWorkflows"), href: "/ai-workflow" }}
diff --git a/src/components/ServicesPage.jsx b/src/components/ServicesPage.jsx
index db9e1e9..1db31cf 100644
--- a/src/components/ServicesPage.jsx
+++ b/src/components/ServicesPage.jsx
@@ -11,6 +11,7 @@ import {
 } from "lucide-react";
 import { useTranslation } from "../context/LangContext.jsx";
 import PageHero from "./common/PageHero.jsx";
+import TypewriterTitle from "./common/TypewriterTitle.jsx";
 
 const AUDIT_HREF = "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request";
 
@@ -148,13 +149,14 @@ export default function ServicesPage() {
   }));
   const selectedService = localizedServices.find((service) => service.id === selectedServiceId) || localizedServices[0];
   const SelectedIcon = selectedService.icon;
+  const heroTitle = t("site.services.hero.title");
 
   return (
     <div className="services-page">
       <PageHero
         id="services"
         eyebrow={t("site.services.hero.eyebrow")}
-        title={t("site.services.hero.title")}
+        title={<TypewriterTitle text={heroTitle} />}
         subtitle={t("site.services.hero.subtitle")}
         primaryCta={{ label: t("site.cta.startAudit"), href: AUDIT_HREF, icon: <CalendarCheck size={16} className="icon ml-1" aria-hidden="true" /> }}
         secondaryCta={{ label: t("site.cta.viewAiExamples"), href: "/ai-workflow", icon: <ArrowRight size={15} className="icon ml-1" aria-hidden="true" /> }}
diff --git a/src/components/common/TypewriterTitle.jsx b/src/components/common/TypewriterTitle.jsx
new file mode 100644
index 0000000..66b5aae
--- /dev/null
+++ b/src/components/common/TypewriterTitle.jsx
@@ -0,0 +1,26 @@
+export default function TypewriterTitle({ text }) {
+  const words = String(text || "").split(" ");
+  let charIndex = 0;
+
+  return (
+    <span className="home-typewriter-title" aria-label={text}>
+      {words.map((word, wordIndex) => (
+        <span className="home-typewriter-title__word" aria-hidden="true" key={`${word}-${wordIndex}`}>
+          {Array.from(word).map((char) => {
+            const currentIndex = charIndex;
+            charIndex += 1;
+            return (
+              <span
+                className="home-typewriter-title__char"
+                style={{ "--char-index": currentIndex }}
+                key={`${char}-${currentIndex}`}
+              >
+                {char}
+              </span>
+            );
+          })}
+        </span>
+      ))}
+    </span>
+  );
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index b48d48e..c233e8e 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -606,23 +606,23 @@ export default {
     },
     about: {
       hero: {
-        eyebrow: "MEDTECH IMPLEMENTATION / PRODUCT SYSTEMS / AI-ASSISTED DELIVERY",
-        title: "From MedTech implementation to product and workflow systems",
-        subtitle: "My background is in real-world MedTech implementation: operating room systems, hospital stakeholders, equipment handover, and operational coordination. Today I translate that experience into product concepts, workflow systems, and AI-assisted delivery.",
+        eyebrow: "AI SYSTEMS CONSULTANT / WORKFLOW AUTOMATION / REGULATED OPERATIONS",
+        title: "I turn messy workflows into practical AI-assisted systems",
+        subtitle: "I help operations-heavy teams turn fragmented processes into practical AI-assisted systems, combining product strategy, workflow analysis, AI automation, and full-stack delivery. My MedTech background adds real-world judgment from regulated, high-friction environments.",
       },
       background: {
         eyebrow: "Background",
         title: "A practical operator foundation",
-        text: "My work sits between implementation reality and product structure: understanding how teams actually coordinate work, then shaping clearer systems around that reality.",
+        text: "My work sits between operational reality and product structure: understanding where workflows break, then designing AI-assisted systems that make the work clearer, reviewable, and easier to execute.",
       },
       implementation: {
-        eyebrow: "Domain credibility",
-        title: "Real-world MedTech implementation experience",
-        text: "Before moving into product systems and AI-assisted workflows, I spent more than a decade working close to real MedTech implementation: hospital environments, operating rooms, medical equipment projects, stakeholder coordination, training, support, and handover.",
-        areasTitle: "Selected implementation areas",
-        givesTitle: "What this experience gives me",
-        areas: ["Operating room surgical lights and video integration", "OR video/audio routing, recording, and surgical workflow support", "Medical gas pendants for OR and ICU environments", "Hyperbaric chamber implementation", "Surgical collaboration and education workflows", "Medical equipment delivery, installation, training, support, and handover", "Coordination between hospitals, vendors, technical teams, and decision-makers"],
-        gives: ["Practical understanding of how hospital workflows break", "Sensitivity to documentation, ownership, handover, and visibility gaps", "Ability to translate operational complexity into product requirements", "Better judgment about where AI can help and where human review must remain", "Credibility in MedTech, HealthTech, implementation, product, and workflow roles"],
+        eyebrow: "Regulated operations proof",
+        title: "Regulated operations experience that improves AI system design",
+        text: "This experience matters because AI workflow systems fail when they ignore real constraints: handovers, ownership, documentation, training, exceptions, and review points.",
+        areasTitle: "Strongest proof points",
+        givesTitle: "How it improves AI workflow design",
+        areas: ["OR and clinical workflow environments", "Medical equipment implementation and handover", "Stakeholder coordination across hospitals, vendors, and technical teams", "Documentation, training, support, and visibility gaps", "Judgment about where human review must remain"],
+        gives: ["Understands where workflows break", "Designs for ownership, review, and handover", "Translates messy operational context into system requirements", "Avoids over-automating high-risk workflows"],
       },
       philosophy: {
         eyebrow: "Operating philosophy",
@@ -634,26 +634,26 @@ export default {
         eyebrow: "Current focus",
         title: "Where this experience translates today",
         cards: [
+          { title: "AI-assisted delivery", text: "Using AI to accelerate workflow discovery, prototyping, documentation, and implementation support while keeping human judgment visible." },
           { title: "Product & workflow systems", text: "Turning operational complexity into product concepts, requirements, dashboards, SOPs, and handover-ready systems." },
-          { title: "AI-assisted delivery", text: "Using AI to accelerate discovery, prototyping, documentation, and implementation support without replacing human judgment." },
-          { title: "MedTech and regulated operations", text: "Applying workflow-first thinking to HealthTech, MedTech, pharma logistics, clinical operations, and implementation-heavy B2B environments." },
+          { title: "Regulated operations proof", text: "Using MedTech and regulated-operations experience as trust proof for high-friction workflows, not as the primary commercial identity." },
         ],
       },
       role: {
         eyebrow: "Role fit",
         title: "Where this background creates value",
-        intro: "My strongest fit is at the intersection of MedTech domain experience, product/system thinking, and AI-assisted execution.",
+        intro: "My strongest fit is AI workflow systems for operations-heavy teams, backed by product judgment, regulated-operations credibility, and implementation proof.",
         cards: [
-          { title: "For product and operations teams", items: ["AI Product Manager", "Technical Product Manager", "Product Operations Lead", "MedTech / HealthTech Product Manager", "Implementation / Solutions Product roles"] },
-          { title: "Best-fit problem spaces", items: ["MedTech implementation workflows", "OR / hospital workflow systems", "Documentation and handover systems", "Operational dashboards", "Compliance-aware workflow automation"] },
-          { title: "For companies", items: ["AI Workflow Audit", "Product Discovery Sprint", "Workflow Prototype Support", "SOP / documentation systems", "Operator-in-residence support"] },
+          { title: "For consulting clients", items: ["AI Workflow Opportunity Audit", "Prototype Sprint", "Internal Assistant / SOP System", "Dashboard or workflow tool"] },
+          { title: "For product and employment roles", items: ["AI Product Manager", "Technical Product Manager", "Product Operations Lead", "MedTech / HealthTech Product Manager"] },
+          { title: "Where regulated proof helps", items: ["Documentation and handover systems", "Operational dashboards", "Compliance-aware workflow automation", "MedTech implementation workflows", "OR / hospital workflow systems"] },
         ],
       },
       milestones: {
-        title: "Selected MedTech implementation milestones",
+        title: "Selected regulated-operations milestones",
         items: ["First EP lab implementation support in Ukraine", "Surgical lights and OR video integration projects", "Hyperbaric chamber implementation", "Medical gas pendant implementations for OR/ICU", "Integrated OR video/audio systems", "Surgical education and collaboration workflow concepts", "Hospital equipment handover and training projects"],
       },
-      final: { title: "Talk roles, workflows, or one system worth fixing" },
+      final: { title: "Discuss one workflow worth fixing" },
     },
     contact: {
       hero: {

From 623d4ac04f012f16f740a9d427ce197cd2d3b1d1 Mon Sep 17 00:00:00 2001
From: Roman Mazuryk <romazuryk@gmail.com>
Date: Fri, 31 Jul 2026 22:48:14 +0200
Subject: [PATCH 2/2] style: clarify contact page intent tones

---
 src/assets/css/contact.css     | 148 ++++++++++++++++++++++++++++++---
 src/components/ContactPage.jsx |  23 +++--
 2 files changed, 155 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/contact.css b/src/assets/css/contact.css
index 3570272..51632c4 100644
--- a/src/assets/css/contact.css
+++ b/src/assets/css/contact.css
@@ -17,6 +17,47 @@
   pointer-events: none;
 }
 
+.contact-hero__extra .artifact-map {
+  --system-accent: var(--accent-ai);
+  --system-accent-2: var(--accent-medtech);
+  --system-accent-soft: var(--accent-ai-soft);
+  border-color: color-mix(in srgb, var(--accent-ai) 24%, var(--system-border));
+  background:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(440px 180px at 0 0, var(--accent-ai-soft), transparent 68%),
+    radial-gradient(420px 180px at 100% 0, var(--accent-medtech-soft), transparent 68%),
+    radial-gradient(360px 160px at 100% 100%, var(--accent-fullstack-soft), transparent 70%),
+    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.66)),
+    var(--panel);
+  background-size: 28px 28px, 28px 28px, auto, auto, auto, auto, auto;
+}
+
+.contact-hero__extra .artifact-map__rail {
+  background-image: linear-gradient(90deg, transparent, var(--accent-ai) 16%, var(--accent-medtech) 58%, var(--accent-fullstack) 86%, transparent);
+  opacity: 0.32;
+}
+
+.contact-hero__extra .artifact-map__group:first-of-type .artifact-map__label {
+  color: var(--accent-ai);
+}
+
+.contact-hero__extra .artifact-map__group--output .artifact-map__label {
+  color: var(--accent-medtech);
+}
+
+.contact-hero__extra .artifact-map__transform {
+  color: var(--accent-medtech);
+}
+
+.contact-hero__extra .artifact-map__transform span:first-child {
+  background-image: linear-gradient(180deg, var(--accent-ai) 45%, transparent 0);
+}
+
+.contact-hero__extra .artifact-map__transform span:last-child {
+  background-image: linear-gradient(180deg, var(--accent-medtech) 45%, transparent 0);
+}
+
 .contact__grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
@@ -39,6 +80,7 @@
 
 .contact__path {
   --contact-path-accent: var(--accent-ai);
+  --contact-path-accent-2: var(--accent-ai-2);
   --contact-path-soft: var(--accent-ai-soft);
   position: relative;
   overflow: hidden;
@@ -50,25 +92,29 @@
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.62)),
+    radial-gradient(360px 170px at 100% 0, var(--contact-path-soft), transparent 68%),
+    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.66)),
     var(--panel);
-  background-size: 28px 28px, 28px 28px, auto, auto;
+  background-size: 28px 28px, 28px 28px, auto, auto, auto;
   box-shadow: var(--shadow);
   transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
 }
 
 .contact__path--ai {
   --contact-path-accent: var(--accent-ai);
+  --contact-path-accent-2: var(--accent-ai-2);
   --contact-path-soft: var(--accent-ai-soft);
 }
 
 .contact__path--medtech {
   --contact-path-accent: var(--accent-medtech);
+  --contact-path-accent-2: var(--accent-medtech-2);
   --contact-path-soft: var(--accent-medtech-soft);
 }
 
 .contact__path--fullstack {
   --contact-path-accent: var(--accent-fullstack);
+  --contact-path-accent-2: var(--accent-fullstack-2);
   --contact-path-soft: var(--accent-fullstack-soft);
 }
 
@@ -78,7 +124,7 @@
   position: absolute;
   inset: 0 auto 0 0;
   width: 3px;
-  background: linear-gradient(180deg, var(--contact-path-accent, var(--accent-ai)), transparent);
+  background: linear-gradient(180deg, var(--contact-path-accent, var(--accent-ai)), var(--contact-path-accent-2, var(--accent-ai-2)), transparent);
 }
 
 .contact__path::after {
@@ -98,6 +144,16 @@
   color: var(--contact-path-accent);
 }
 
+.contact__path > svg {
+  width: 34px;
+  height: 34px;
+  padding: 8px;
+  border: 1px solid color-mix(in srgb, var(--contact-path-accent) 34%, var(--system-border));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--contact-path-soft) 78%, var(--panel));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--contact-path-soft) 54%, transparent);
+}
+
 .contact__path strong {
   color: var(--text);
 }
@@ -134,21 +190,30 @@
 }
 
 .contact__panel, .contact__form {
+  --contact-panel-accent: var(--accent-medtech);
+  --contact-panel-accent-2: var(--accent-ai);
+  --contact-panel-soft: var(--accent-medtech-soft);
   position: relative;
   overflow: hidden;
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.62)),
+    radial-gradient(420px 190px at 100% 0, var(--contact-panel-soft), transparent 68%),
+    radial-gradient(300px 150px at 0 100%, color-mix(in srgb, var(--accent-fullstack-soft) 70%, transparent), transparent 70%),
+    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.66)),
     var(--panel);
-  background-size: 28px 28px, 28px 28px, auto, auto;
+  background-size: 28px 28px, 28px 28px, auto, auto, auto, auto;
   border: 1px solid var(--system-border);
   border-radius: var(--radius);
   padding: 18px;
   box-shadow: var(--shadow);
 }
 
-.contact__subtitle { color: var(--accent-ai); margin: 0 0 8px; }
+.contact__panel::before {
+  background: linear-gradient(180deg, var(--contact-panel-accent), var(--contact-panel-accent-2), transparent);
+}
+
+.contact__subtitle { color: var(--contact-panel-accent); margin: 0 0 8px; }
 .contact__text { color: var(--muted); margin: 0 0 12px; }
 .contact__best-for {
   margin: -4px 0 16px 18px;
@@ -157,11 +222,39 @@
   display: grid;
   gap: 8px;
 }
+.contact__best-for li::marker {
+  color: var(--contact-panel-accent);
+}
 .contact__best-for .contact__text { margin: 0; }
 
 .contact__info { display: grid; gap: 10px; }
-.contact__row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
-.contact__label { color: var(--muted); }
+.contact__row {
+  --contact-row-accent: var(--accent-ai);
+  --contact-row-soft: var(--accent-ai-soft);
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid color-mix(in srgb, var(--contact-row-accent) 22%, var(--system-border));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--contact-row-soft) 66%, var(--panel));
+}
+.contact__row:nth-child(2) {
+  --contact-row-accent: var(--accent-medtech);
+  --contact-row-soft: var(--accent-medtech-soft);
+}
+.contact__row:nth-child(3) {
+  --contact-row-accent: var(--accent-fullstack);
+  --contact-row-soft: var(--accent-fullstack-soft);
+}
+.contact__label {
+  color: color-mix(in srgb, var(--contact-row-accent) 38%, var(--muted));
+  font-weight: 760;
+}
+.contact__label .icon {
+  color: var(--contact-row-accent);
+}
 .contact__value { display: flex; align-items: center; gap: 10px; }
 .link-like { color: var(--accent-ai); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
 .contact__copied { opacity: 0; transform: translateY(2px); transition: .2s; color: #7ed321; font-size: 12px; }
@@ -169,11 +262,25 @@
 
 .contact__socials { display: flex; flex-wrap: wrap; gap: 8px; }
 .contact__social {
+  --contact-social-accent: var(--accent-fullstack);
+  --contact-social-soft: var(--accent-fullstack-soft);
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 10px; border-radius: 10px;
-  border: 1px solid var(--system-border); background: var(--panel); color: var(--text);
+  border: 1px solid color-mix(in srgb, var(--contact-social-accent) 28%, var(--system-border));
+  background: color-mix(in srgb, var(--contact-social-soft) 68%, var(--panel));
+  color: var(--text);
+}
+.contact__social:first-child {
+  --contact-social-accent: var(--accent-ai);
+  --contact-social-soft: var(--accent-ai-soft);
+}
+.contact__social svg {
+  color: var(--contact-social-accent);
+}
+.contact__social:hover {
+  background: color-mix(in srgb, var(--contact-social-soft) 88%, var(--panel-hover));
+  border-color: color-mix(in srgb, var(--contact-social-accent) 44%, var(--border-hover));
 }
-.contact__social:hover { background: var(--panel-hover); border-color: var(--border-hover); }
 
 .field { display: grid; gap: 6px; margin-bottom: 12px; }
 .field label { color: var(--text); font-weight: 600; }
@@ -218,7 +325,18 @@
   background:
     linear-gradient(var(--grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
-    radial-gradient(520px 220px at 100% 0, var(--contact-path-soft, var(--accent-ai-soft)), transparent 66%),
+    radial-gradient(520px 220px at 100% 0, var(--contact-path-soft, var(--contact-panel-soft, var(--accent-ai-soft))), transparent 66%),
+    radial-gradient(320px 170px at 0 100%, color-mix(in srgb, var(--contact-path-accent-2, var(--contact-panel-accent-2, var(--accent-ai-2))) 10%, transparent), transparent 72%),
+    var(--card-bg);
+}
+
+[data-theme="dark"] .contact-hero__extra .artifact-map {
+  background:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(460px 190px at 0 0, var(--accent-ai-soft), transparent 70%),
+    radial-gradient(420px 190px at 100% 0, var(--accent-medtech-soft), transparent 70%),
+    radial-gradient(360px 170px at 100% 100%, var(--accent-fullstack-soft), transparent 72%),
     var(--card-bg);
 }
 
@@ -241,6 +359,14 @@
     width: 100%;
     justify-content: center;
   }
+
+  .contact-hero__extra .artifact-map__transform span:first-child {
+    background-image: linear-gradient(90deg, var(--accent-ai) 45%, transparent 0);
+  }
+
+  .contact-hero__extra .artifact-map__transform span:last-child {
+    background-image: linear-gradient(90deg, var(--accent-medtech) 45%, transparent 0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/ContactPage.jsx b/src/components/ContactPage.jsx
index 908c679..9940659 100644
--- a/src/components/ContactPage.jsx
+++ b/src/components/ContactPage.jsx
@@ -6,11 +6,24 @@ import Contact from "./Contact.jsx";
 const contactArtifact = {
   inputLabel: "Intent",
   outputLabel: "Next path",
-  inputs: ["Workflow audit", "Automation pilot", "Prototype idea"],
-  outputs: ["Focused scope", "Proof route", "Implementation conversation"],
+  inputs: [
+    { label: "Workflow audit", accent: "ai" },
+    { label: "Automation pilot", accent: "fullstack" },
+    { label: "Prototype idea", accent: "fullstack" },
+  ],
+  outputs: [
+    { label: "Focused scope", accent: "ai" },
+    { label: "Proof route", accent: "medtech" },
+    { label: "Implementation conversation", accent: "fullstack" },
+  ],
 };
 
-const contactPills = ["AI Workflow Audit", "One workflow to automate", "Prototype sprint", "Regulated operations"];
+const contactPills = [
+  { label: "AI Workflow Audit", accent: "ai" },
+  { label: "One workflow to automate", accent: "ai" },
+  { label: "Prototype sprint", accent: "fullstack" },
+  { label: "Regulated operations", accent: "medtech" },
+];
 
 export default function ContactPage() {
   const title = "Discuss One Workflow to Automate";
@@ -26,9 +39,9 @@ export default function ContactPage() {
         visualType="contact"
         scrollTargetId="contact"
       >
-        <div className="market-page__hero-extra">
+        <div className="market-page__hero-extra contact-hero__extra">
           <div className="market-page__pill-list">
-            {contactPills.map((pill) => <FeaturePill accent="ai" key={pill}>{pill}</FeaturePill>)}
+            {contactPills.map((pill) => <FeaturePill accent={pill.accent} key={pill.label}>{pill.label}</FeaturePill>)}
           </div>
           <ArtifactMap
             accent="ai"