redesign the X# website with self-hosted typography and liquid glass motion

7 files changed, 1332 insertions, 151 deletions

diff --git a/frontend/public/fonts/AlfaSlabOne-Regular.woff2 b/frontend/public/fonts/AlfaSlabOne-Regular.woff2
new file mode 100644
index 0000000..2604c97
--- /dev/null
+++ b/frontend/public/fonts/AlfaSlabOne-Regular.woff2
diff --git a/frontend/public/fonts/FiraSans-Medium.woff2 b/frontend/public/fonts/FiraSans-Medium.woff2
new file mode 100644
index 0000000..cbaac82
--- /dev/null
+++ b/frontend/public/fonts/FiraSans-Medium.woff2
diff --git a/frontend/public/fonts/FiraSans-Regular.woff2 b/frontend/public/fonts/FiraSans-Regular.woff2
new file mode 100644
index 0000000..9754eed
--- /dev/null
+++ b/frontend/public/fonts/FiraSans-Regular.woff2
diff --git a/frontend/public/fonts/FiraSans-SemiBold.woff2 b/frontend/public/fonts/FiraSans-SemiBold.woff2
new file mode 100644
index 0000000..0b22ac9
--- /dev/null
+++ b/frontend/public/fonts/FiraSans-SemiBold.woff2
diff --git a/frontend/src/layouts/SiteLayout.astro b/frontend/src/layouts/SiteLayout.astro
index 3258ea2..c631220 100644
--- a/frontend/src/layouts/SiteLayout.astro
+++ b/frontend/src/layouts/SiteLayout.astro
@@ -20,6 +20,8 @@ const { title, description } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <meta name="theme-color" content="#0c111b" />
     <link rel="icon" type="image/png" href="/xsharp-logo.png" />
+    <link rel="preload" href="/fonts/AlfaSlabOne-Regular.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/FiraSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <title>{title}</title>
   </head>
   <body>
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 65c9564..3e3d280 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -4,82 +4,220 @@
 
 import SiteLayout from "../layouts/SiteLayout.astro";
 
-const pipeline = ["X#", "HIR", "MIR", "XLIL", "LLVM IR", "native .xse"];
+const pipeline = [
+  { short: "XS", label: "Source", detail: "syntax + AST" },
+  { short: "HI", label: "XHIR", detail: "typed intent" },
+  { short: "MI", label: "XMIR", detail: "control flow" },
+  { short: "LI", label: "XLIL", detail: "register IL" },
+  { short: "EX", label: ".xse", detail: "native output" },
+];
+
+const principles = [
+  {
+    number: "01",
+    title: "Inspect every layer",
+    text: "XHIR, XMIR, and XLIL are versioned text formats designed for people, tools, and other languages.",
+    icon: "layers",
+  },
+  {
+    number: "02",
+    title: "Keep the core modular",
+    text: "The C23 frontend and Rust compiler core meet through narrow boundaries instead of sharing backend state.",
+    icon: "modules",
+  },
+  {
+    number: "03",
+    title: "Finish in native code",
+    text: "Verified XLIL lowers through LLVM IR to object code and a platform-native .xse executable.",
+    icon: "native",
+  },
+];
 ---
 
 <SiteLayout
   title="X# programming language"
-  description="The official home of X#, a native programming language with a C23 and Rust compiler toolchain."
+  description="The official home of X#, a native programming language with inspectable compiler layers."
 >
-  <header class="site-header">
+  <div class="ambient" aria-hidden="true">
+    <span class="ambient-orb ambient-orb-a"></span>
+    <span class="ambient-orb ambient-orb-b"></span>
+    <span class="ambient-orb ambient-orb-c"></span>
+    <span class="noise"></span>
+  </div>
+
+  <header class="site-header glass-panel">
     <a class="brand" href="/" aria-label="X# home">
-      <img class="brand-mark" src="/xsharp-logo.webp" width="36" height="36" alt="" />
-      <span>xsharp-lang</span>
+      <img class="brand-mark" src="/xsharp-logo.webp" width="38" height="38" alt="" />
+      <span class="brand-name">X#</span>
+      <span class="brand-channel">language</span>
     </a>
     <nav aria-label="Primary navigation">
-      <a href="https://github.com/xss-lang/xs-project">Compiler</a>
+      <a href="#pipeline">Pipeline</a>
       <a href="https://github.com/xss-lang/xs-project/tree/main/Spec">Specification</a>
-      <a href="https://github.com/xss-lang/website">Source</a>
+      <a class="nav-source" href="https://github.com/xss-lang/xs-project">
+        GitHub
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 12 12 4m-6 0h6v6" /></svg>
+      </a>
     </nav>
   </header>
 
   <main>
     <section class="hero">
-      <p class="eyebrow">Native by design · readable at every layer</p>
-      <h1>A language built to make the whole compiler visible.</h1>
-      <p class="lede">
-        X# is an evolving native programming language with a modular compiler, human-readable intermediate formats,
-        and an LLVM path to portable executables.
-      </p>
-      <div class="actions">
-        <a class="button primary" href="https://github.com/xss-lang/xs-project">Explore the compiler</a>
-        <a class="button secondary" href="https://github.com/xss-lang/xs-project/tree/main/Spec/Programs">
-          Read example programs
-        </a>
+      <div class="hero-copy">
+        <div class="status-pill glass-panel">
+          <span class="status-light"></span>
+          Native compiler in active development
+        </div>
+        <h1>See the language <em>all the way down.</em></h1>
+        <p class="lede">
+          X# is a native programming language built around explicit compiler stages, readable intermediate formats,
+          and a direct path from source to platform executable.
+        </p>
+        <div class="actions">
+          <a class="button primary" href="https://github.com/xss-lang/xs-project">
+            Explore the compiler
+            <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 4 6 6-6 6" /></svg>
+          </a>
+          <a class="button secondary glass-panel" href="https://github.com/xss-lang/xs-project/tree/main/Spec/Programs">
+            View examples
+          </a>
+        </div>
+        <div class="hero-facts" aria-label="Project facts">
+          <div><strong>0</strong><span>IR format version</span></div>
+          <div><strong>C23 + Rust</strong><span>compiler foundation</span></div>
+          <div><strong>.xse</strong><span>native artifact</span></div>
+        </div>
+      </div>
+
+      <div class="hero-visual" aria-label="Animated X# compiler pipeline visualization">
+        <div class="visual-glow"></div>
+        <div class="orbit orbit-wide" aria-hidden="true"></div>
+        <div class="orbit orbit-tight" aria-hidden="true"></div>
+        <div class="orbit-dot orbit-dot-a" aria-hidden="true"></div>
+        <div class="orbit-dot orbit-dot-b" aria-hidden="true"></div>
+
+        <div class="compiler-core glass-panel">
+          <span class="core-scan" aria-hidden="true"></span>
+          <img src="/xsharp-logo.webp" width="132" height="132" alt="X#" />
+          <span>compiler core</span>
+        </div>
+
+        <div class="floating-node node-source glass-panel">
+          <span class="node-icon">&#123; &#125;</span>
+          <span><strong>source.xs</strong><small>parsed</small></span>
+        </div>
+        <div class="floating-node node-ir glass-panel">
+          <span class="node-icon">%r</span>
+          <span><strong>XLIL v0</strong><small>verified</small></span>
+        </div>
+        <div class="floating-node node-native glass-panel">
+          <span class="node-icon">▶</span>
+          <span><strong>native.xse</strong><small>linked</small></span>
+        </div>
+
+        <div class="build-console glass-panel">
+          <div class="console-bar">
+            <span></span><span></span><span></span>
+            <strong>xs build</strong>
+          </div>
+          <div class="console-body">
+            <p><span>01</span><code>parse</code><i>done</i></p>
+            <p><span>02</span><code>lower → xlil</code><i>done</i></p>
+            <p><span>03</span><code>link → app.xse</code><i class="pulse-text">ready</i></p>
+          </div>
+        </div>
       </div>
-      <pre class="code-card" aria-label="X# example"><code>{`fn main() -> Long {
-    value := add(20, 22);
-    value
-}`}</code></pre>
     </section>
 
-    <section class="pipeline" aria-labelledby="pipeline-title">
-      <div>
-        <p class="eyebrow">Compiler pipeline</p>
-        <h2 id="pipeline-title">High-level intent, inspectable lowering.</h2>
+    <section id="pipeline" class="pipeline-section">
+      <div class="section-heading">
+        <div>
+          <p class="eyebrow">A visible compiler</p>
+          <h2>One language.<br />Every transformation.</h2>
+        </div>
+        <p>
+          Each boundary has a defined responsibility. Higher layers never borrow LLVM semantics, and lower layers never
+          invent source-language behavior.
+        </p>
       </div>
-      <ol>
+
+      <div class="pipeline-track glass-panel">
+        <div class="track-line" aria-hidden="true"><span></span></div>
         {pipeline.map((stage, index) => (
-          <li>
-            <span>{String(index + 1).padStart(2, "0")}</span>
-            <strong>{stage}</strong>
-          </li>
+          <article class="pipeline-stage">
+            <div class="stage-glyph"><span>{stage.short}</span></div>
+            <small>{String(index + 1).padStart(2, "0")}</small>
+            <h3>{stage.label}</h3>
+            <p>{stage.detail}</p>
+          </article>
         ))}
-      </ol>
+      </div>
+    </section>
+
+    <section class="showcase">
+      <div class="code-window glass-panel">
+        <div class="window-top">
+          <div><span></span><span></span><span></span></div>
+          <p>Sources/main.xs</p>
+          <span class="window-badge">X#</span>
+        </div>
+        <pre><code>{`fn add(a: Long, b: Long) -> Long {
+    a + b
+}
+
+fn main() -> Long {
+    answer := add(20, 22);
+    answer
+}`}</code></pre>
+        <div class="code-shine" aria-hidden="true"></div>
+      </div>
+
+      <div class="showcase-copy">
+        <p class="eyebrow">Readable at both ends</p>
+        <h2>Expressive source.<br />Predictable output.</h2>
+        <p>
+          Tail expressions, nominal types, explicit module boundaries, and native artifacts belong to one coherent
+          pipeline—not a collection of disconnected tools.
+        </p>
+        <a class="text-link" href="https://github.com/xss-lang/xs-project/tree/main/Spec/Programs">
+          Browse complete programs <span>→</span>
+        </a>
+      </div>
     </section>
 
     <section class="principles" aria-labelledby="principles-title">
-      <p class="eyebrow">What exists today</p>
-      <h2 id="principles-title">An implementation in motion, with explicit boundaries.</h2>
+      <div class="section-heading compact">
+        <div>
+          <p class="eyebrow">Compiler principles</p>
+          <h2 id="principles-title">Built with boundaries.</h2>
+        </div>
+      </div>
       <div class="cards">
-        <article>
-          <h3>Modular compiler</h3>
-          <p>C23 owns the working frontend and LLVM boundary. Rust grows typed HIR, MIR, analysis, and XLIL.</p>
-        </article>
-        <article>
-          <h3>Textual IRs</h3>
-          <p>XHIR, XMIR, and XLIL remain versioned, human-readable formats instead of opaque compiler internals.</p>
-        </article>
-        <article>
-          <h3>Native output</h3>
-          <p>The current supported subset lowers through LLVM to object files and native <code>.xse</code> executables.</p>
-        </article>
+        {principles.map((item) => (
+          <article class="principle-card glass-panel">
+            <div class={`principle-icon ${item.icon}`} aria-hidden="true"><span></span><i></i><b></b></div>
+            <span class="card-number">{item.number}</span>
+            <h3>{item.title}</h3>
+            <p>{item.text}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+
+    <section class="closing glass-panel">
+      <div class="closing-orb" aria-hidden="true"></div>
+      <div>
+        <p class="eyebrow">Follow the implementation</p>
+        <h2>The compiler is open.</h2>
+        <p>Read the source, inspect the formats, and watch each native milestone land.</p>
       </div>
+      <a class="button primary" href="https://github.com/xss-lang/xs-project">Open repository</a>
     </section>
   </main>
 
   <footer>
-    <span>X# is open source.</span>
+    <a class="footer-brand" href="/"><img src="/xsharp-logo.webp" width="32" height="32" alt="" /> X#</a>
+    <span>Native language · visible compiler</span>
     <a href="https://github.com/xss-lang/website">Website source · AGPL-3.0-or-later</a>
   </footer>
 </SiteLayout>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 1b74a4d..57f140c 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,11 +1,61 @@
 /* SPDX-FileCopyrightText: 2026 Leitwolf <xs-lang.chess031@slmails.com> */
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
+@font-face {
+  font-family: "Alfa Slab One";
+  src: url("/fonts/AlfaSlabOne-Regular.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Fira Sans";
+  src: url("/fonts/FiraSans-Regular.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: url("/fonts/FiraSans-Medium.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  src: url("/fonts/FiraSans-SemiBold.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Consolas Local";
+  src: local("Consolas");
+  font-display: swap;
+}
+
 :root {
   color-scheme: dark;
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-  color: #eef3ff;
-  background: #090d15;
+  --font-display: "Alfa Slab One", "Fira Sans";
+  --font-body: "Fira Sans";
+  --font-code: "Consolas Local", "Consolas", "Fira Sans";
+  --ink: #f7f3ff;
+  --muted: #b8b1c7;
+  --quiet: #81798f;
+  --violet: #a970ff;
+  --violet-bright: #c69cff;
+  --cyan: #6de7dd;
+  --pink: #ff78be;
+  --night: #090711;
+  --panel: rgb(27 21 39 / 56%);
+  --panel-edge: rgb(255 255 255 / 13%);
+  font-family: var(--font-body);
+  color: var(--ink);
+  background: var(--night);
   font-synthesis: none;
 }
 
@@ -13,77 +63,224 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   min-width: 20rem;
   min-height: 100vh;
+  overflow-x: hidden;
   background:
-    radial-gradient(circle at 78% 5%, rgb(65 101 181 / 22%), transparent 32rem),
-    radial-gradient(circle at 8% 42%, rgb(44 190 172 / 10%), transparent 30rem),
-    #090d15;
+    radial-gradient(circle at 52% -10%, rgb(113 51 160 / 18%), transparent 38rem),
+    linear-gradient(180deg, #0b0813 0%, #090711 48%, #0d0814 100%);
 }
 
 a {
   color: inherit;
 }
 
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ambient {
+  position: fixed;
+  z-index: -2;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.ambient::before {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgb(255 255 255 / 2.5%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px);
+  background-size: 4rem 4rem;
+  mask-image: linear-gradient(to bottom, black, transparent 74%);
+  content: "";
+}
+
+.ambient-orb {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.32;
+  filter: blur(6rem);
+  animation: liquid-drift 18s ease-in-out infinite alternate;
+}
+
+.ambient-orb-a {
+  top: 6rem;
+  right: -8rem;
+  width: 32rem;
+  height: 32rem;
+  background: #8437e9;
+}
+
+.ambient-orb-b {
+  top: 48rem;
+  left: -14rem;
+  width: 34rem;
+  height: 34rem;
+  background: #0caeaa;
+  animation-delay: -7s;
+}
+
+.ambient-orb-c {
+  right: 15%;
+  bottom: -12rem;
+  width: 28rem;
+  height: 28rem;
+  background: #c52e85;
+  animation-delay: -12s;
+}
+
+.noise {
+  position: absolute;
+  inset: 0;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
+}
+
+.glass-panel {
+  border: 1px solid var(--panel-edge);
+  background:
+    linear-gradient(145deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%)),
+    var(--panel);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 8%),
+    0 1.5rem 5rem rgb(0 0 0 / 22%);
+  backdrop-filter: blur(1.25rem) saturate(135%);
+}
+
 .site-header,
 main,
 footer {
-  width: min(74rem, calc(100% - 2rem));
+  width: min(76rem, calc(100% - 2rem));
   margin-inline: auto;
 }
 
 .site-header {
-  min-height: 5rem;
+  position: sticky;
+  z-index: 20;
+  top: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid #263149;
+  min-height: 4.5rem;
+  margin-top: 1rem;
+  padding: 0.65rem 0.75rem 0.65rem 1rem;
+  border-radius: 1.15rem;
 }
 
 .brand {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.7rem;
   align-items: center;
-  font-weight: 700;
   text-decoration: none;
 }
 
 .brand-mark {
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: 0.65rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 0.7rem;
   object-fit: cover;
+  box-shadow: 0 0 1.5rem rgb(188 91 255 / 30%);
+}
+
+.brand-name {
+  font-family: var(--font-display);
+  font-size: 1.15rem;
+  letter-spacing: 0.02em;
+}
+
+.brand-channel {
+  padding-left: 0.7rem;
+  border-left: 1px solid rgb(255 255 255 / 16%);
+  color: var(--quiet);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
 }
 
 nav {
   display: flex;
-  gap: 1.5rem;
+  gap: 0.25rem;
+  align-items: center;
 }
 
-nav a,
-footer a {
-  color: #b8c3d9;
-  text-underline-offset: 0.3rem;
+nav a {
+  padding: 0.65rem 0.85rem;
+  border-radius: 0.7rem;
+  color: #c8c1d3;
+  font-size: 0.88rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 180ms ease, background 180ms ease;
+}
+
+nav a:hover {
+  color: #fff;
+  background: rgb(255 255 255 / 7%);
 }
 
-nav a:hover,
-footer a:hover {
+nav .nav-source {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+  margin-left: 0.25rem;
   color: #fff;
+  background: rgb(255 255 255 / 9%);
+}
+
+.nav-source svg {
+  width: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
 }
 
 .hero {
-  padding: 7rem 0 5rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1.04fr) minmax(28rem, 0.96fr);
+  gap: 3rem;
+  align-items: center;
+  min-height: 48rem;
+  padding: 6.5rem 0 5rem;
 }
 
-.eyebrow {
-  margin: 0 0 1rem;
-  color: #69e2cf;
+.hero-copy {
+  position: relative;
+  z-index: 2;
+  animation: rise-in 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.status-pill {
+  display: inline-flex;
+  gap: 0.65rem;
+  align-items: center;
+  padding: 0.55rem 0.8rem;
+  border-radius: 99rem;
+  color: #d8d1e4;
   font-size: 0.78rem;
-  font-weight: 800;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.035em;
+}
+
+.status-light {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: var(--cyan);
+  box-shadow: 0 0 0 0 rgb(109 231 221 / 45%);
+  animation: status-pulse 2.3s ease-out infinite;
 }
 
 h1,
@@ -93,157 +290,1001 @@ p {
   text-wrap: balance;
 }
 
+h1,
+h2 {
+  font-family: var(--font-display);
+  font-weight: 400;
+}
+
 h1 {
-  max-width: 13ch;
-  margin: 0;
-  font-size: clamp(3.2rem, 9vw, 7.2rem);
-  line-height: 0.94;
-  letter-spacing: -0.065em;
+  max-width: 11.8ch;
+  margin: 1.7rem 0 0;
+  font-size: clamp(3.3rem, 6.6vw, 6.1rem);
+  line-height: 0.98;
+  letter-spacing: -0.035em;
+}
+
+h1 em {
+  display: block;
+  color: transparent;
+  background: linear-gradient(100deg, var(--violet-bright), #f18bca 52%, var(--cyan));
+  background-clip: text;
+  font-style: normal;
 }
 
 .lede {
-  max-width: 43rem;
-  margin: 2rem 0;
-  color: #b8c3d9;
-  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
-  line-height: 1.65;
+  max-width: 39rem;
+  margin: 1.8rem 0;
+  color: var(--muted);
+  font-size: clamp(1.03rem, 1.7vw, 1.22rem);
+  line-height: 1.68;
 }
 
 .actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.8rem;
+  gap: 0.75rem;
 }
 
 .button {
-  padding: 0.8rem 1rem;
-  border: 1px solid #3b4967;
-  border-radius: 0.65rem;
+  display: inline-flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0.8rem 1.05rem;
+  border-radius: 0.8rem;
+  font-size: 0.92rem;
+  font-weight: 600;
   text-decoration: none;
-  font-weight: 700;
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+}
+
+.button svg {
+  width: 1.1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
 }
 
 .primary {
-  border-color: #69e2cf;
-  color: #071019;
-  background: #69e2cf;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #bd8bff;
+  color: #12091d;
+  background: linear-gradient(120deg, #caa5ff, #ef92cd 58%, #86ece1);
+  box-shadow: 0 0.9rem 2.8rem rgb(169 112 255 / 22%);
+}
+
+.primary::before {
+  position: absolute;
+  top: -50%;
+  left: -45%;
+  width: 35%;
+  height: 200%;
+  transform: rotate(20deg);
+  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 48%), transparent);
+  content: "";
+  animation: button-shine 5s ease-in-out infinite;
+}
+
+.secondary {
+  color: #eee8f6;
 }
 
 .secondary:hover {
-  border-color: #7788aa;
-  background: #111827;
+  border-color: rgb(198 156 255 / 38%);
 }
 
-.code-card {
-  margin: 4rem 0 0;
-  padding: 1.5rem;
-  overflow-x: auto;
-  border: 1px solid #28344c;
+.hero-facts {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2.6rem;
+}
+
+.hero-facts div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.28rem;
+}
+
+.hero-facts strong {
+  font-family: var(--font-code);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.hero-facts span {
+  color: var(--quiet);
+  font-size: 0.72rem;
+}
+
+.hero-visual {
+  position: relative;
+  min-height: 38rem;
+  isolation: isolate;
+  animation: rise-in 1s 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.visual-glow {
+  position: absolute;
+  z-index: -2;
+  top: 5rem;
+  left: 50%;
+  width: 24rem;
+  height: 24rem;
+  transform: translateX(-50%);
+  border-radius: 45% 55% 62% 38% / 45% 35% 65% 55%;
+  background: linear-gradient(135deg, #843bf0, #de3d9a 58%, #1cc6bc);
+  opacity: 0.42;
+  filter: blur(4.5rem);
+  animation: liquid-morph 10s ease-in-out infinite alternate;
+}
+
+.orbit {
+  position: absolute;
+  z-index: -1;
+  top: 6rem;
+  left: 50%;
+  border: 1px solid rgb(211 173 255 / 18%);
+  border-radius: 50%;
+  transform: translateX(-50%) rotate(-12deg);
+}
+
+.orbit-wide {
+  width: 31rem;
+  height: 24rem;
+}
+
+.orbit-tight {
+  top: 8rem;
+  width: 23rem;
+  height: 20rem;
+  transform: translateX(-50%) rotate(28deg);
+  border-color: rgb(103 232 221 / 14%);
+}
+
+.orbit-dot {
+  position: absolute;
+  z-index: 1;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 1.5rem 0.25rem var(--violet);
+}
+
+.orbit-dot-a {
+  top: 7.1rem;
+  left: 17%;
+  animation: float-dot 5s ease-in-out infinite;
+}
+
+.orbit-dot-b {
+  top: 25rem;
+  right: 13%;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--cyan);
+  box-shadow: 0 0 1.5rem 0.2rem var(--cyan);
+  animation: float-dot 5s -2.4s ease-in-out infinite reverse;
+}
+
+.compiler-core {
+  position: absolute;
+  top: 8.8rem;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  width: 16rem;
+  height: 16rem;
+  overflow: hidden;
+  transform: translateX(-50%);
+  border-radius: 4.5rem 6rem 4.8rem 6.5rem;
+  animation: core-float 6s ease-in-out infinite, core-shape 11s ease-in-out infinite alternate;
+}
+
+.compiler-core::before {
+  position: absolute;
+  inset: 1rem;
+  border: 1px solid rgb(255 255 255 / 11%);
+  border-radius: inherit;
+  content: "";
+}
+
+.compiler-core img {
+  width: 8.25rem;
+  height: 8.25rem;
+  border-radius: 2rem;
+  box-shadow: 0 1.5rem 3rem rgb(15 4 25 / 45%);
+}
+
+.compiler-core > span:last-child {
+  position: absolute;
+  bottom: 1.3rem;
+  color: rgb(255 255 255 / 66%);
+  font-family: var(--font-code);
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.core-scan {
+  position: absolute;
+  z-index: -1;
+  width: 150%;
+  height: 2rem;
+  background: linear-gradient(180deg, transparent, rgb(130 241 232 / 18%), transparent);
+  animation: scan 4s linear infinite;
+}
+
+.floating-node {
+  position: absolute;
+  z-index: 3;
+  display: flex;
+  gap: 0.7rem;
+  align-items: center;
+  min-width: 9.5rem;
+  padding: 0.7rem;
+  border-radius: 0.95rem;
+  animation: node-float 4.8s ease-in-out infinite;
+}
+
+.node-source {
+  top: 4.5rem;
+  left: 0;
+}
+
+.node-ir {
+  top: 16rem;
+  right: -0.5rem;
+  animation-delay: -1.6s;
+}
+
+.node-native {
+  top: 27rem;
+  left: 1.2rem;
+  animation-delay: -3.1s;
+}
+
+.node-icon {
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 0.65rem;
+  color: var(--cyan);
+  background: rgb(255 255 255 / 5%);
+  font-family: var(--font-code);
+  font-size: 0.75rem;
+}
+
+.floating-node > span:last-child {
+  display: flex;
+  flex-direction: column;
+  gap: 0.18rem;
+}
+
+.floating-node strong {
+  font-family: var(--font-code);
+  font-size: 0.72rem;
+  font-weight: 400;
+}
+
+.floating-node small {
+  color: var(--quiet);
+  font-size: 0.65rem;
+}
+
+.build-console {
+  position: absolute;
+  z-index: 4;
+  right: 0;
+  bottom: 0.25rem;
+  width: min(22rem, 75%);
+  overflow: hidden;
   border-radius: 1rem;
-  color: #dbe5f8;
-  background: rgb(12 17 27 / 82%);
-  box-shadow: 0 2rem 6rem rgb(0 0 0 / 25%);
-  font: 1rem/1.7 ui-monospace, "Cascadia Code", monospace;
+  transform: rotate(-1.5deg);
+}
+
+.console-bar,
+.window-top {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  min-height: 2.5rem;
+  padding: 0 0.85rem;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  background: rgb(255 255 255 / 3%);
+}
+
+.console-bar > span,
+.window-top div span {
+  width: 0.48rem;
+  height: 0.48rem;
+  border-radius: 50%;
+  background: #ff749f;
+}
+
+.console-bar > span:nth-child(2),
+.window-top div span:nth-child(2) {
+  background: #f3bd66;
+}
+
+.console-bar > span:nth-child(3),
+.window-top div span:nth-child(3) {
+  background: #67ddba;
+}
+
+.console-bar strong {
+  margin-left: auto;
+  color: var(--quiet);
+  font-family: var(--font-code);
+  font-size: 0.66rem;
+  font-weight: 400;
+}
+
+.console-body {
+  padding: 0.7rem 0.85rem 0.8rem;
+}
+
+.console-body p {
+  display: grid;
+  grid-template-columns: 1.5rem 1fr auto;
+  gap: 0.55rem;
+  margin: 0;
+  padding: 0.32rem 0;
+  font-family: var(--font-code);
+  font-size: 0.68rem;
+}
+
+.console-body p > span {
+  color: #655d72;
+}
+
+.console-body code {
+  font-family: inherit;
 }
 
-.pipeline,
+.console-body i {
+  color: var(--cyan);
+  font-style: normal;
+}
+
+.pulse-text {
+  animation: text-pulse 1.8s ease-in-out infinite;
+}
+
+.pipeline-section,
+.showcase,
 .principles {
-  padding: 5rem 0;
-  border-top: 1px solid #263149;
+  padding: 7rem 0;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+}
+
+.section-heading {
+  display: grid;
+  grid-template-columns: 1fr 0.7fr;
+  gap: 4rem;
+  align-items: end;
+  margin-bottom: 3.5rem;
+}
+
+.section-heading.compact {
+  grid-template-columns: 1fr;
+}
+
+.eyebrow {
+  margin: 0 0 1rem;
+  color: var(--violet-bright);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.17em;
+  text-transform: uppercase;
 }