From 7e3f0e6ada132756e79519f5b563e8485eace1fa Mon Sep 17 00:00:00 2001
From: Arlind Ukshini <quka93@gmail.com>
Date: Fri, 24 Apr 2026 10:54:47 +0200
Subject: [PATCH] hero: drop eyebrow, tighten type, indent copy column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "Meet Fenja AI" eyebrow removed — headline + wordmark pairing
  is enough to anchor the scene.
- Type scale reduced inside #hero: title clamp(1.65rem, 4vw, 3.4rem)
  (was clamp(2rem, 5.1vw, 4.4rem) via --step-hero), lede
  clamp(1rem, 1.7vw, 1.4rem). Reads calmer and keeps the headline
  from overshadowing the lede.
- .hero-copy gets padding-left: clamp(2rem, 8vw, 8rem) so the text
  block floats in the same way the wordmark does in its column —
  symmetric breathing room on both sides of the viewport rather
  than the copy hugging the left edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 protected/index.html | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/protected/index.html b/protected/index.html
index bea0851..8528ee8 100644
--- a/protected/index.html
+++ b/protected/index.html
@@ -849,7 +849,22 @@
     padding-top: 0;
   }
   #page-overview #hero .hero-copy {
-    max-width: 62ch;
+    /* Indent from the left so the text block floats with breathing
+       room on both sides of the viewport, mirroring the space that
+       the right-column wordmark has around it. */
+    padding-left: clamp(2rem, 8vw, 8rem);
+    max-width: 58ch;
+  }
+  /* Tighter type specifically inside the hero — the lockup reads
+     clearer when the headline isn't shouting at 4.4rem. */
+  #page-overview #hero .hero-title {
+    font-size: clamp(1.65rem, 4vw, 3.4rem);
+    line-height: 1.08;
+  }
+  #page-overview #hero .hero-lede {
+    font-size: clamp(1rem, 1.7vw, 1.4rem);
+    line-height: 1.45;
+    max-width: 44ch;
   }
 
   /* Right-column wordmark — sized to match the welcome page's
@@ -2481,11 +2496,11 @@ html {
        ============================================================ -->
   <section id="hero" class="scene" aria-labelledby="hero-title">
     <div class="hero-wrap">
-      <!-- Left column: eyebrow + headline + lede + foot row. The
-           right column (.hero-mark) holds the Fenja wordmark,
-           mirroring the welcome page's right-side lockup. -->
+      <!-- Left column: headline + lede + foot row. The right column
+           (.hero-mark) holds the Fenja wordmark, mirroring the
+           welcome page's right-side lockup. No eyebrow here — the
+           headline + logo pairing is enough to anchor the scene. -->
       <div class="hero-copy">
-        <div class="eyebrow" data-reveal>Meet Fenja AI</div>
         <h1 id="hero-title" class="hero-title" data-reveal-lines>
           Trusted &amp; <em>Sovereign AI</em><br/>
           built in Denmark, for <em>Europe.</em>