diff --git a/app/assets/scss/_layout.scss b/app/assets/scss/_layout.scss
index b5c2978..ef7ec36 100644
--- a/app/assets/scss/_layout.scss
+++ b/app/assets/scss/_layout.scss
@@ -59,6 +59,7 @@
 .nav-links a {
   text-decoration: none;
   color: var(--color-text-muted);
+  font-family: var(--font-mono);
   font-size: 0.95rem;
   font-weight: 500;
   transition: color 0.3s ease;
diff --git a/app/assets/scss/base.scss b/app/assets/scss/base.scss
index 7829bd5..8fe7d99 100644
--- a/app/assets/scss/base.scss
+++ b/app/assets/scss/base.scss
@@ -4,15 +4,33 @@
 @use 'utilities';
 
 :root {
-  --color-bg: #050816;
-  --color-bg-secondary: #0d111d;
-  --color-terminal: rgba(13, 17, 23, 0.85);
-  --color-text: #fff;
-  --color-text-muted: #9ca3af;
-  --color-accent: #00f5ff;
-  --color-error: #f85149;
-  --color-success: #3fb950;
-  --color-glass-border: rgba(0, 245, 255, 0.2);
+  // Canonical MCTL design tokens, vendored from @mctlhq/tokens (the same
+  // dependency-free pattern mctl-telegram and mctl-instruments use). Keep the
+  // existing --color-* variable names so consumers don't all need rewiring;
+  // only the values change — from the old #050816/#00f5ff fork to the
+  // canonical ink/cyan palette and the hairline (not glow) aesthetic.
+  --color-bg: #0a0b0d;            // ink
+  --color-bg-secondary: #0f1114;  // ink2 / elevated
+  --color-card: #15181d;          // ink3 / card
+  --color-terminal: rgba(21, 24, 29, 0.85);
+  --color-text: #e6e7e9;          // fg
+  --color-text-muted: #a4a8ae;    // fg2
+  --color-text-subtle: #6b7079;   // fg3
+  --color-accent: #00e5ff;        // cyan
+  --color-accent-highlight: #7df2ff;
+  --color-error: #ff6b6b;         // status bad
+  --color-success: #7cf2a4;       // status ok
+  --color-warn: #f5a524;          // status warn
+  --color-line: #1f242b;          // hairline
+  --color-line-strong: #2a313a;
+  // Borders are neutral hairlines, not cyan, in the canonical language.
+  --color-glass-border: var(--color-line);
+  --color-accent-soft: rgba(0, 229, 255, 0.1);
+  // Elevation is shadow-light; hover lifts on a hairline + a quiet drop, no glow.
+  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.48);
+
+  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
+  --font-editorial: 'Instrument Serif', Georgia, serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
   --container-width: 1400px;
   --container-width-md: 1200px;
@@ -32,8 +50,9 @@ html {
 }
 
 body {
+  position: relative;
   font-size: 14px;
-  font-family: var(--font-mono);
+  font-family: var(--font-display);
   background-color: var(--color-bg);
   color: var(--color-text);
   line-height: 1.6;
@@ -46,6 +65,24 @@ body {
   }
 }
 
+// Ambient background: a faint neutral blueprint grid — engineering texture,
+// not a glow. Recoloured from cyan to a hairline tone to match the design
+// system's restraint; fixed so it stays put while content scrolls.
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
+  background-size: 56px 56px, 56px 56px;
+  // Fade the grid out toward the bottom so it reads as atmosphere, not a table.
+  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
+  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -65,7 +102,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: 32px;
-  font-weight: 800;
+  font-weight: 700;
   text-align: center;
   color: #fff;
   margin-bottom: 1.5rem;
@@ -83,7 +120,7 @@ h1 {
 
 h2 {
   font-size: 28px;
-  font-weight: 800;
+  font-weight: 700;
 
   @media (min-width: 768px) {
     font-size: 36px;
diff --git a/app/components/main/HeroBlock.vue b/app/components/main/HeroBlock.vue
index 735b75c..f79cd6e 100644
--- a/app/components/main/HeroBlock.vue
+++ b/app/components/main/HeroBlock.vue
@@ -6,16 +6,54 @@ const { t } = useI18n()
   <section class="hero-block">
     <div class="hero-block__glow"></div>
     <BaseContainer size="md">
-      <h1>
-        {{ t('hero.title') }}
-      </h1>
-      <p class="hero-block__description" v-html="t('hero.subtitle')" />
-      <BaseButton
-        size="lg"
-        @click="$router.push({ hash: '#request-access' })"
-      >
-        {{ t('hero.cta') }}
-      </BaseButton>
+      <div class="hero-block__intro">
+        <span class="hero-block__badge">
+          <span class="hero-block__badge-dot"></span>
+          {{ t('hero.badge') }}
+        </span>
+        <h1>
+          {{ t('hero.title') }}
+        </h1>
+        <p class="hero-block__description" v-html="t('hero.subtitle')" />
+        <div class="hero-block__actions">
+          <BaseButton
+            size="lg"
+            @click="$router.push({ hash: '#request-access' })"
+          >
+            {{ t('hero.cta') }}
+          </BaseButton>
+          <a class="hero-block__secondary" href="/docs">
+            {{ t('hero.cta_secondary') }}
+            <span aria-hidden="true">&#8594;</span>
+          </a>
+        </div>
+      </div>
+
+      <div class="hero-terminal" aria-hidden="true">
+        <div class="hero-terminal__bar">
+          <span class="hero-terminal__dot hero-terminal__dot--red"></span>
+          <span class="hero-terminal__dot hero-terminal__dot--amber"></span>
+          <span class="hero-terminal__dot hero-terminal__dot--green"></span>
+          <span class="hero-terminal__title">mctl &mdash; deploy</span>
+        </div>
+        <div class="hero-terminal__body">
+          <p class="hero-terminal__line">
+            <span class="hero-terminal__prompt">$</span> git push origin main
+          </p>
+          <p class="hero-terminal__line hero-terminal__line--muted">
+            &rarr; building image &middot; running tests &middot; generating manifests
+          </p>
+          <p class="hero-terminal__line hero-terminal__line--ok">
+            &check; deployed to <span class="hero-terminal__accent">my-team</span> namespace
+          </p>
+          <p class="hero-terminal__line">
+            <span class="hero-terminal__prompt">$</span> mctl ask <span class="hero-terminal__str">"roll my-app back to v1.4.2"</span>
+          </p>
+          <p class="hero-terminal__line hero-terminal__line--ok">
+            &check; rollback live at <span class="hero-terminal__accent">app.mctl.ai</span><span class="hero-terminal__cursor"></span>
+          </p>
+        </div>
+      </div>
     </BaseContainer>
   </section>
 </template>
@@ -24,7 +62,7 @@ const { t } = useI18n()
 .hero-block {
   position: relative;
   padding: 60px 0;
-  height: calc(100vh - var(--header-height));
+  min-height: calc(100vh - var(--header-height));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,9 +74,40 @@ const { t } = useI18n()
     font-size: clamp(2.5rem, 4.5vw, 4.25rem);
   }
 
+  &__intro {
+    position: relative;
+    z-index: 1;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1.75rem;
+    padding: 0.4rem 0.9rem;
+
+    font-size: 0.75rem;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--color-accent);
+
+    background: var(--color-accent-soft);
+    border: 1px solid var(--color-glass-border);
+    border-radius: 999px;
+  }
+
+  &__badge-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    box-shadow: 0 0 8px var(--color-accent);
+    animation: heroPulse 2s ease-in-out infinite;
+  }
+
   &__description {
     max-width: 900px;
-    margin: 0 auto 48px;
+    margin: 0 auto 40px;
     text-align: center;
     font-size: 18px;
     color: var(--color-text-muted);
@@ -49,16 +118,141 @@ const { t } = useI18n()
     }
   }
 
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+  }
+
+  &__secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    color: var(--color-text-muted);
+    font-weight: 500;
+    transition: color 0.25s ease, gap 0.25s ease;
+
+    span {
+      transition: transform 0.25s ease;
+    }
+
+    &:hover {
+      color: var(--color-accent);
+
+      span {
+        transform: translateX(4px);
+      }
+    }
+  }
+
   &__glow {
     position: absolute;
-    top: 20%;
+    top: 18%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 60vw;
-    height: 60vw;
-    background: radial-gradient(circle, rgba(0, 245, 255, 0.1) 0%, transparent 70%);
+    width: 70vw;
+    height: 70vw;
+    max-width: 900px;
+    max-height: 900px;
+    // Quiet ambient wash — restrained per the design system's hairline language.
+    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 65%);
     z-index: 0;
     pointer-events: none;
   }
 }
+
+// Terminal mockup — gives the hero a concrete focal point and shows
+// the core "push / ask AI / live" loop in the product's own voice.
+.hero-terminal {
+  position: relative;
+  z-index: 1;
+  max-width: 640px;
+  margin: 4rem auto 0;
+
+  text-align: left;
+  background: var(--color-terminal);
+  border: 1px solid var(--color-glass-border);
+  border-radius: 12px;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  box-shadow: var(--shadow-card-hover);
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 0.03);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  &__dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+
+    &--red { background: #ff5f56; }
+    &--amber { background: #ffbd2e; }
+    &--green { background: #27c93f; }
+  }
+
+  &__title {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    letter-spacing: 0.5px;
+  }
+
+  &__body {
+    padding: 1.5rem 1.5rem 1.75rem;
+    // Body inherits the page's Geist now; force mono so the terminal reads
+    // as a terminal.
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    line-height: 1.9;
+
+    @media (max-width: 480px) {
+      font-size: 0.72rem;
+    }
+  }
+
+  &__line {
+    margin: 0;
+
+    &--muted { color: var(--color-text-muted); }
+    &--ok { color: var(--color-success); }
+  }
+
+  &__prompt { color: var(--color-accent); }
+  &__accent { color: var(--color-accent); }
+  &__str { color: #ffbd2e; }
+
+  &__cursor {
+    display: inline-block;
+    width: 8px;
+    height: 1em;
+    margin-left: 4px;
+    vertical-align: text-bottom;
+    background: var(--color-accent);
+    animation: heroBlink 1.1s step-end infinite;
+  }
+}
+
+@keyframes heroPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.85); }
+}
+
+@keyframes heroBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-block__badge-dot,
+  .hero-terminal__cursor { animation: none; }
+}
 </style>
diff --git a/app/components/main/PricingSection.vue b/app/components/main/PricingSection.vue
index 8818534..a345720 100644
--- a/app/components/main/PricingSection.vue
+++ b/app/components/main/PricingSection.vue
@@ -44,7 +44,10 @@ const plans = [
     :title="t('pricing.title')"
     container-size="md"
   >
-    <ul class="pricing-section__plans">
+    <ul
+      class="pricing-section__plans"
+      :class="{ 'pricing-section__plans--single': plans.length === 1 }"
+    >
       <li
         v-for="plan in plans"
         :key="plan.titleKey"
@@ -62,6 +65,14 @@ const plans = [
         />
       </li>
     </ul>
+
+    <p v-reveal class="pricing-section__custom">
+      {{ t('pricing.custom.note') }}
+      <a href="#contact" class="pricing-section__custom-link">
+        {{ t('pricing.custom.cta') }}
+        <span aria-hidden="true">&#8594;</span>
+      </a>
+    </p>
   </BaseSection>
 </template>
 
@@ -79,13 +90,51 @@ const plans = [
     }
   }
 
+  &__plans--single {
+    max-width: 440px;
+    margin: 0 auto;
+  }
+
   &__plans-item {
     flex: 1;
     max-width: 400px;
   }
 
+  &__plans--single &__plans-item {
+    max-width: 440px;
+  }
+
   &__card {
     height: 100%;
   }
+
+  &__custom {
+    margin-top: 2.5rem;
+    text-align: center;
+    color: var(--color-text-muted);
+    font-size: 0.95rem;
+  }
+
+  &__custom-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-left: 0.5rem;
+
+    color: var(--color-accent);
+    font-weight: 500;
+    transition: gap 0.25s ease;
+
+    span { transition: transform 0.25s ease; }
+
+    &:hover span { transform: translateX(4px); }
+  }
+
+  @media (max-width: 600px) {
+    &__custom-link {
+      margin-left: 0;
+      margin-top: 0.25rem;
+    }
+  }
 }
 </style>
diff --git a/app/components/shared/BaseCard.vue b/app/components/shared/BaseCard.vue
index cab905e..1e890cf 100644
--- a/app/components/shared/BaseCard.vue
+++ b/app/components/shared/BaseCard.vue
@@ -29,13 +29,34 @@ defineProps<Props>();
 
   background-color: var(--card-bg);
   border-radius: 8px;
-  border: 1px solid rgba(0, 245, 255, 0.2);
-  transition: all 0.3s ease;
+  border: 1px solid var(--color-glass-border);
+  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   overflow: hidden;
 
+  // Accent sheen that lights up along the top edge on hover.
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover {
+    border-color: var(--color-accent);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-card-hover);
+
+    &::after { opacity: 1; }
+  }
+
   &--highlighted {
     border-color: var(--color-accent);
-    box-shadow: 0 0 30px rgba(0, 245, 255, 0.2);
+    box-shadow: 0 0 30px var(--color-accent-soft);
   }
 
   &--dark {
@@ -48,14 +69,14 @@ defineProps<Props>();
       left: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(135deg, rgba(0, 245, 255, 0.05) 0%, transparent 50%);
+      background: linear-gradient(135deg, var(--color-accent-soft) 0%, transparent 50%);
       opacity: 0;
       transition: opacity 0.4s ease;
     }
 
     &:hover {
       border-color: var(--color-accent);
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 245, 255, 0.1);
+      box-shadow: var(--shadow-card-hover);
 
       &::before {
         opacity: 1;
diff --git a/app/components/shared/BaseSection.vue b/app/components/shared/BaseSection.vue
index dfa508d..dc93347 100644
--- a/app/components/shared/BaseSection.vue
+++ b/app/components/shared/BaseSection.vue
@@ -30,6 +30,7 @@ defineProps<Props>();
     margin-bottom: 16px;
 
     text-align: center;
+    font-family: var(--font-mono);
     font-size: .8rem;
     letter-spacing: 2px;
     color: var(--color-accent);
@@ -37,9 +38,23 @@ defineProps<Props>();
   }
 
   &__title {
+    position: relative;
     margin-bottom: 48px;
+    padding-bottom: 1.25rem;
     text-align: center;
     letter-spacing: -1px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 56px;
+      height: 3px;
+      border-radius: 3px;
+      background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
+    }
   }
 }
 </style>
diff --git a/app/composables/useI18n.ts b/app/composables/useI18n.ts
index 24ac7d7..2d47a65 100644
--- a/app/composables/useI18n.ts
+++ b/app/composables/useI18n.ts
@@ -29,9 +29,11 @@ const translations: Record<string, Record<string, string>> = {
     'nav.burger_label': 'Toggle menu',
 
     // Hero
+    'hero.badge': 'Self-service Kubernetes platform',
     'hero.title': 'Kubernetes without building a platform team',
     'hero.subtitle': '<span class="logo-m">M</span><span class="highlight-ctl">CTL</span> gives growing product teams self-service Kubernetes with GitOps, secrets, and team isolation built in.<br>No tickets. No waiting. Production-ready from day one.',
     'hero.cta': 'Request Access',
+    'hero.cta_secondary': 'Read the docs',
 
     // Request Access Form
     'form.title': 'Request Access',
@@ -146,6 +148,8 @@ const translations: Record<string, Record<string, string>> = {
     'pricing.starter.f5': 'Community support',
     'pricing.starter.f6': 'Community MCP access',
     'pricing.starter.cta': 'Request Access',
+    'pricing.custom.note': 'Outgrowing the free tier?',
+    'pricing.custom.cta': 'Talk to us about a custom plan',
     'pricing.pro.badge': 'Popular',
     'pricing.pro.title': 'Professional',
     'pricing.pro.price': 'Contact Us',
@@ -227,9 +231,11 @@ const translations: Record<string, Record<string, string>> = {
     'nav.burger_label': '\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043c\u0435\u043d\u044e',
 
     // Hero
+    'hero.badge': 'Self-service \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 Kubernetes',
     'hero.title': 'Kubernetes \u0431\u0435\u0437 DevOps-\u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043e\u0432 \u0432 \u0448\u0442\u0430\u0442\u0435',
     'hero.subtitle': '<span class="logo-m">M</span><span class="highlight-ctl">CTL</span> \u0434\u0430\u0451\u0442 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c Kubernetes \u0441 GitOps, \u0441\u0435\u043a\u0440\u0435\u0442\u0430\u043c\u0438 \u0438 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0435\u0439 \u2014 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<br>\u0411\u0435\u0437 \u0442\u0438\u043a\u0435\u0442\u043e\u0432. \u0411\u0435\u0437 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0439. \u0413\u043e\u0442\u043e\u0432\u043e \u043a \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0443 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0434\u043d\u044f.',
     'hero.cta': '\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f',
+    'hero.cta_secondary': '\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f',
 
     // Request Access Form
     'form.title': '\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f',
@@ -344,6 +350,8 @@ const translations: Record<string, Record<string, string>> = {
     'pricing.starter.f5': '\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430',
     'pricing.starter.f6': 'Community MCP',
     'pricing.starter.cta': '\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f',
+    'pricing.custom.note': '\u041f\u0435\u0440\u0435\u0440\u0430\u0441\u0442\u0430\u0435\u0442\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444?',
+    'pricing.custom.cta': '\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u043d',
     'pricing.pro.badge': '\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e',
     'pricing.pro.title': 'Professional',
     'pricing.pro.price': '\u041e\u0431\u0441\u0443\u0434\u0438\u043c',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 176adac..d656850 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -34,7 +34,7 @@ export default defineNuxtConfig({
         { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
         {
           rel: 'stylesheet',
-          href: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap',
+          href: 'https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap',
         },
       ],
     },