feat: vision page as manifesto

src/pages/vision.astro

@@ -1,211 +1,292 @@
 ---
 import AppLayout from '../layouts/AppLayout.astro';
+import ProjectLockup from '../components/ProjectLockup.astro';
 
 const user = Astro.locals.user;
 ---
 <AppLayout title="Vision" user={user}>
   <div class="page">
 
-    <header class="page-header">
+    <!-- ── Hero ───────────────────────────────────────────────────── -->
+    <header class="hero">
       <p class="label-sm eyebrow">Vision</p>
-      <h1 class="display-md page-title">Why this matters.</h1>
+      <h1 class="hero-headline">
+        A European platform for <em>sovereign AI.</em>
+      </h1>
     </header>
 
-    <div class="content">
+    <!-- ── The stakes ─────────────────────────────────────────────── -->
-
+    <section class="section stakes-section">
-      <!-- Fenja AI -->
+      <h2 class="section-heading label-sm">The stakes</h2>
-      <section class="section">
+      <div class="prose-column">
-        <h2 class="headline-md section-title">Fenja AI</h2>
+        <p class="body-lg">
-        <div class="prose">
+          Foreign governments can compel access to Europe's most sensitive data.
-          <p class="body-lg">
+          Foreign companies can cut off access to the AI that runs on it — overnight,
-            Fenja enables the safe, sovereign use of Artificial Intelligence in organisations
+          without warning, and with no recourse. Today, 97% of AI foundational model
-            where data is highly sensitive, operations are mission-critical, and strict data
+          usage falls outside EU jurisdiction. For hospitals, public authorities,
-            privacy is essential. We are building the premier solution for public authorities
+          defence contractors, and financial institutions, this is not an abstract risk.
-            and companies operating in heavily regulated industries — pharmaceuticals, critical
+          It is an active exposure.
-            infrastructure, finance — where standard AI solutions hosted on foreign-owned public
-            clouds are simply not a viable or compliant option.
-          </p>
-          <p class="body-lg">
-            Many organisations are eager to harness the transformative power of AI but cannot
-            accept the risk of their data, workflows, and critical functions becoming dependent
-            on external providers with foreign ownership and control. Fenja directly addresses
-            this gap by enabling highly advanced, customer-hosted AI within the client's own
-            secure infrastructure. Data remains under absolute, localised control while we
-            deliver the robust security, traceability, and documentation demanded by the market.
-          </p>
-          <p class="body-lg">
-            As the global demand for digital sovereignty accelerates, Fenja is positioned to
-            generate profound societal value. We are making cutting-edge AI safely usable in
-            the most critical of functions without ever compromising security or compliance.
-            Backed by investment from the Innovation Fund, we are accelerating product
-            development, executing high-impact pilot projects, and establishing foundational
-            customer cases. Our long-term ambition is to establish Fenja as the definitive
-            Danish and European platform for secure, locally controlled AI in regulated
-            environments.
-          </p>
-        </div>
-      </section>
-
-      <!-- Project Bifrost -->
-      <section class="section">
-        <h2 class="headline-md section-title">Project Bifrost</h2>
-        <div class="prose">
-          <p class="body-lg">
-            Project Bifrost is one of the first stones in the foundation of Denmark and the EU's
-            sovereign AI platform — a platform controlled by its customers, that understands not
-            just your business, but you and your department, and builds on that knowledge
-            automatically. Open-source LLMs in a modern, secure, customer-hosted environment.
-          </p>
-          <p class="body-lg statement">
-            This is Project Bifrost.
-          </p>
-        </div>
-      </section>
-
-      <!-- What comes after -->
-      <section class="section">
-        <h2 class="headline-md section-title">What comes after</h2>
-        <p class="body-md section-intro">
-          The current pilot is one chapter. The platform we are building toward is something
-          more ambitious. In reserved terms:
         </p>
-        <ul class="after-list">
+        <p class="body-lg">
-          <li class="after-item">
+          For critical infrastructure, healthcare, defence, and finance, reliance on
-            <h3 class="headline-sm item-title">Full developer agentic experience</h3>
+          foreign-controlled AI is not a strategy. It is a vulnerability — one that
-            <p class="body-md item-body">
+          organisations can no longer afford to ignore as AI becomes central to how
-              A platform where developers can compose, orchestrate, and deploy AI agents that
+          decisions are made.
-              work within your infrastructure — deeply integrated, auditable, and under your control.
+        </p>
-            </p>
+      </div>
-          </li>
+      <blockquote class="pulled-quote">
-          <li class="after-item">
+        <p class="pulled-quote__text">We can't build our digital fortress on foreign clouds.</p>
-            <h3 class="headline-sm item-title">Agentic data extraction and analysis</h3>
+        <footer class="pulled-quote__attribution">— The imperative behind Project Bifrost</footer>
-            <p class="body-md item-body">
+      </blockquote>
-              Agents that move across your document corpus, surface connections, extract
+    </section>
-              structured information, and return findings with provenance intact.
+
-            </p>
+    <!-- ── What Fenja is building ─────────────────────────────────── -->
-          </li>
+    <section class="section">
-          <li class="after-item">
+      <h2 class="section-heading label-sm">What we are building</h2>
-            <h3 class="headline-sm item-title">Self-service agent work automation</h3>
+      <div class="prose-column">
-            <p class="body-md item-body">
+        <p class="body-lg">
-              Non-technical users define repeatable tasks in natural language. The platform
+          Fenja enables the safe, sovereign use of AI in organisations where data is
-              handles execution, scheduling, and audit — without IT involvement.
+          highly sensitive, operations are mission-critical, and strict privacy is
-            </p>
+          non-negotiable. We are building the solution for public authorities and
-          </li>
+          regulated industries — pharmaceuticals, critical infrastructure, finance —
-        </ul>
+          where standard AI hosted on foreign-owned public clouds is simply not
-      </section>
+          a compliant option.
+        </p>
+        <p class="body-lg">
+          The core proposition is direct: highly advanced, customer-hosted AI within
+          the client's own secure infrastructure. Data remains under absolute, localised
+          control. The AI understands the organisation's language, context, and structure.
+          Every response is traceable to its source documents. Nothing leaves the building.
+        </p>
+        <p class="body-lg">
+          As global demand for digital sovereignty accelerates, this becomes a matter of
+          strategic necessity. Backed by Innofounder, we are executing the first pilot
+          projects and building the foundational customer cases. The long-term ambition
+          is to establish Fenja as the definitive Danish and European platform for
+          locally controlled AI in regulated environments.
+        </p>
+      </div>
+    </section>
+
+    <!-- ── Project Bifrost in context ────────────────────────────── -->
+    <section class="section bifrost-context-section">
+      <div class="bifrost-lockup-col">
+        <ProjectLockup size="lg" alignment="left" showWordmark={false} />
+      </div>
+      <div class="bifrost-text-col">
+        <h2 class="section-heading label-sm">The first step</h2>
+        <div class="prose-column">
+          <p class="body-lg">
+            Project Bifrost is not a proof of concept in a lab. It is a working
+            collaboration with five organisations who are already operating in the
+            environments this platform is built for. Two are running paid pilots.
+            Three are on the Customer Advisory Board. All of them are shaping what
+            the platform becomes.
+          </p>
+          <p class="body-lg">
+            The trajectory is clear: from a working pilot → the Danish standard for
+            sovereign AI deployment → the foundation for EU-scale expansion. Project
+            Bifrost participants are at the beginning of that arc — helping to define
+            what it looks like at every step.
+          </p>
+        </div>
+        <div class="horizon-list">
+          <div class="horizon-item">
+            <span class="horizon-label label-sm">Now</span>
+            <p class="horizon-desc body-md">Pilot — five organisations shaping the first working version.</p>
+          </div>
+          <div class="horizon-item">
+            <span class="horizon-label label-sm">Next</span>
+            <p class="horizon-desc body-md">Danish standard — a proven, replicable sovereign AI deployment.</p>
+          </div>
+          <div class="horizon-item">
+            <span class="horizon-label label-sm">Further</span>
+            <p class="horizon-desc body-md">EU expansion — the platform for regulated AI across Europe.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Closing ─────────────────────────────────────────────────── -->
+    <section class="closing-section">
+      <p class="closing-text">
+        This is not a product that gets built in a boardroom.
+        It gets built with the organisations who will depend on it.
+        That is what Project Bifrost is for.
+      </p>
+    </section>
 
-    </div>
   </div>
 </AppLayout>
 
 <style>
   .page {
-    padding: var(--space-12) var(--space-20) var(--space-16);
     max-width: var(--content-max);
     margin: 0 auto;
+    padding: 0 var(--space-20) var(--space-16);
   }
 
-  /* ── Header ──────────────────────────────────────────────────────── */
+  /* ── Hero ────────────────────────────────────────────────────────── */
-  .page-header {
+  .hero {
-    margin-bottom: var(--space-12);
+    padding-top: var(--space-16);
-    max-width: 44rem;
+    padding-bottom: var(--space-12);
+    max-width: 52rem;
+    border-bottom: var(--ghost-border);
   }
 
   .eyebrow {
     letter-spacing: var(--tracking-wider);
     text-transform: uppercase;
     color: var(--on-surface-muted);
-    margin-bottom: var(--space-3);
+    margin-bottom: var(--space-4);
   }
 
-  .page-title {
+  .hero-headline {
-    margin: 0;
-  }
-
-  /* ── Content ─────────────────────────────────────────────────────── */
-  .content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-16);
-    max-width: 52rem;
-  }
-
-  /* ── Section ─────────────────────────────────────────────────────── */
-  .section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
-  }
-
-  .section-title {
     font-family: var(--font-serif);
+    font-size: var(--text-display-md);
     font-weight: 400;
-    letter-spacing: var(--tracking-snug);
+    letter-spacing: var(--tracking-tight);
-    margin: 0;
+    line-height: var(--leading-snug);
     color: var(--on-surface);
+    margin: 0;
   }
 
-  .section-intro {
+  .hero-headline em {
-    color: var(--on-surface-variant);
+    font-weight: 700;
-    margin: 0;
+    font-style: italic;
+  }
+
+  /* ── Sections ────────────────────────────────────────────────────── */
+  .section {
+    padding: var(--space-12) 0;
+    border-bottom: var(--ghost-border);
+  }
+
+  .section-heading {
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--on-surface-muted);
+    margin-bottom: var(--space-6);
   }
 
   /* ── Prose ───────────────────────────────────────────────────────── */
-  .prose {
+  .prose-column {
     display: flex;
     flex-direction: column;
     gap: var(--space-5);
+    max-width: 44rem;
   }
 
-  .prose .body-lg {
+  .prose-column .body-lg {
     margin: 0;
     color: var(--on-surface-variant);
     line-height: var(--leading-relaxed);
-    max-width: var(--reading-max);
   }
 
-  .statement {
+  /* ── Pulled quote ────────────────────────────────────────────────── */
-    font-family: var(--font-serif);
+  .stakes-section {
-    font-size: var(--text-headline-sm) !important;
+    display: flex;
-    font-weight: 700;
+    flex-direction: column;
-    font-style: italic;
+    gap: var(--space-8);
-    color: var(--on-surface) !important;
-    letter-spacing: var(--tracking-snug);
   }
 
-  /* ── After list ──────────────────────────────────────────────────── */
+  .pulled-quote {
-  .after-list {
-    list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 0 0 0 var(--space-6);
+    border-left: 3px solid var(--secondary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    max-width: 44rem;
+  }
+
+  .pulled-quote__text {
+    font-family: var(--font-serif);
+    font-size: var(--text-display-md);
+    font-style: italic;
+    font-weight: 400;
+    letter-spacing: var(--tracking-tight);
+    line-height: var(--leading-snug);
+    color: var(--on-surface-variant);
+    margin: 0;
+  }
+
+  .pulled-quote__attribution {
+    font-family: var(--font-sans);
+    font-size: var(--text-label-md);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--on-surface-muted);
+  }
+
+  /* ── Bifrost context — two-column ───────────────────────────────── */
+  .bifrost-context-section {
+    display: grid;
+    grid-template-columns: 14rem 1fr;
+    gap: var(--space-10);
+    align-items: start;
+  }
+
+  .bifrost-lockup-col {
+    padding-top: var(--space-7);
+  }
+
+  .bifrost-text-col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+  }
+
+  .bifrost-text-col .section-heading {
+    margin-bottom: var(--space-4);
+  }
+
+  /* ── Horizon list ────────────────────────────────────────────────── */
+  .horizon-list {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
 
-  .after-item {
+  .horizon-item {
-    padding: var(--space-6) 0;
+    display: grid;
-    display: flex;
+    grid-template-columns: 4.5rem 1fr;
-    flex-direction: column;
+    gap: var(--space-4);
-    gap: var(--space-3);
+    align-items: baseline;
+    padding: var(--space-4) 0;
     border-top: var(--ghost-border);
   }
-  .after-item:last-child {
+  .horizon-item:last-child {
     border-bottom: var(--ghost-border);
   }
 
-  .item-title {
+  .horizon-label {
-    font-family: var(--font-serif);
+    letter-spacing: var(--tracking-wider);
-    font-weight: 400;
+    text-transform: uppercase;
-    letter-spacing: var(--tracking-snug);
+    color: var(--on-surface-muted);
-    margin: 0;
+    font-weight: 600;
-    color: var(--on-surface);
   }
 
-  .item-body {
+  .horizon-desc {
-    margin: 0;
     color: var(--on-surface-variant);
-    max-width: var(--reading-max);
+    margin: 0;
     line-height: var(--leading-relaxed);
   }
+
+  /* ── Closing ─────────────────────────────────────────────────────── */
+  .closing-section {
+    padding: var(--space-16) 0 var(--space-12);
+    max-width: 44rem;
+  }
+
+  .closing-text {
+    font-family: var(--font-serif);
+    font-size: var(--text-headline-md);
+    font-weight: 400;
+    font-style: italic;
+    letter-spacing: var(--tracking-snug);
+    line-height: var(--leading-relaxed);
+    color: var(--on-surface-variant);
+    margin: 0;
+  }
 </style>