From 62b093a5572920005ad4c6c2122c17bf8a0d2cde Mon Sep 17 00:00:00 2001
From: maxnorm <maxnorm@hotmail.com>
Date: Sat, 21 Mar 2026 11:58:29 -0400
Subject: [PATCH] improve landing

---
 website/package-lock.json                     |  11 +
 website/package.json                          |   1 +
 website/src/components/home/CtaSection.js     |  62 ++--
 .../src/components/home/FeaturesSection.js    |  29 +-
 website/src/components/home/StatsSection.js   |  32 +-
 .../components/home/codeShowcase.module.css   | 238 ++++++++++++--
 .../src/components/home/ctaSection.module.css | 258 +++++++++++++--
 .../home/featuresSection.module.css           | 297 ++++++++++++++++--
 .../components/home/statsSection.module.css   | 257 +++++++++++++--
 website/src/css/variables.css                 |   9 +
 website/src/pages/index.js                    |   2 +-
 11 files changed, 1046 insertions(+), 150 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index 6a2f9a72..c9136ca8 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -28,6 +28,7 @@
       "devDependencies": {
         "@docusaurus/module-type-aliases": "3.9.2",
         "@docusaurus/types": "3.9.2",
+        "@fontsource/geist-sans": "^5.2.5",
         "@fontsource/inter": "^5.2.8"
       },
       "engines": {
@@ -4623,6 +4624,16 @@
         "node": ">=20.0"
       }
     },
+    "node_modules/@fontsource/geist-sans": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz",
+      "integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@fontsource/inter": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
diff --git a/website/package.json b/website/package.json
index 7c24befb..36fdd53c 100644
--- a/website/package.json
+++ b/website/package.json
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.9.2",
     "@docusaurus/types": "3.9.2",
+    "@fontsource/geist-sans": "^5.2.5",
     "@fontsource/inter": "^5.2.8"
   },
   "browserslist": {
diff --git a/website/src/components/home/CtaSection.js b/website/src/components/home/CtaSection.js
index beae437e..43904d10 100644
--- a/website/src/components/home/CtaSection.js
+++ b/website/src/components/home/CtaSection.js
@@ -1,30 +1,52 @@
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
-import Icon from '../ui/Icon';
 import styles from './ctaSection.module.css';
 
 export default function CtaSection() {
   return (
-    <section className={styles.ctaSection}>
-      <div className="container">
-        <div className={styles.ctaContent}>
-          <Heading as="h2" className={styles.ctaTitle}>
-            Ready to build with Compose?
-          </Heading>
-          <p className={styles.ctaDescription}>
-            Start creating modular, maintainable smart contracts with our comprehensive documentation.
-          </p>
-          <div className={styles.ctaButtons}>
-            <Link to="/docs" className={clsx(styles.ctaButton, styles.ctaPrimary)}>
-              <span>Get Started</span>
-              <Icon name="arrow-right" size={20} />
-            </Link>
-            {/*
-            <Link to="/docs/getting-started/quick-start" className={clsx(styles.ctaButton, styles.ctaSecondaryLight)}>
-              <span>View Quick Start</span>
-            </Link>
-            */}
+    <section className={styles.ctaSection} aria-labelledby="cta-heading">
+      <div className={clsx('container', styles.ctaContainer)}>
+        <div className={styles.ctaBanner}>
+          <div className={styles.ctaGlowTop} aria-hidden="true" />
+          <div className={styles.ctaGlowBottom} aria-hidden="true" />
+          <div className={styles.ctaArc} aria-hidden="true" />
+          <div className={styles.ctaHighlight} aria-hidden="true" />
+          <div className={styles.ctaNoise} aria-hidden="true" />
+
+          <div className={styles.ctaInner}>
+            <Heading as="h2" id="cta-heading" className={styles.ctaTitle}>
+              Ready to build with Compose?
+            </Heading>
+            <p className={styles.ctaDescription}>
+              Start building your next smart contract system.
+            </p>
+            <div className={styles.ctaActions}>
+              <Link to="/docs" className={clsx(styles.ctaButton, styles.ctaPrimaryLight)}>
+                <span>Get started</span>
+                <svg
+                  className={styles.ctaButtonIcon}
+                  width={20}
+                  height={20}
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  focusable="false">
+                  <path
+                    d="M7.5 5L12.5 10L7.5 15"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </Link>
+              <Link
+                to="/docs/getting-started/installation"
+                className={clsx(styles.ctaButton, styles.ctaSecondaryOutline)}>
+                Installation
+              </Link>
+            </div>
           </div>
         </div>
       </div>
diff --git a/website/src/components/home/FeaturesSection.js b/website/src/components/home/FeaturesSection.js
index a47a2146..33a873fb 100644
--- a/website/src/components/home/FeaturesSection.js
+++ b/website/src/components/home/FeaturesSection.js
@@ -1,41 +1,40 @@
 import Heading from '@theme/Heading';
-import Icon from '../ui/Icon';
 import styles from './featuresSection.module.css';
 
 export default function FeaturesSection() {
   const features = [
     {
-      icon: 'read-first',
+      kicker: 'Design principle',
       title: 'Read First',
       description: 'Code written to be understood first, not just executed. Every facet is self-contained and readable top-to-bottom.',
       link: '/docs/design/written-to-be-read',
     },
     {
-      icon: 'diamond-native',
+      kicker: 'ERC-2535',
       title: 'Diamond-Native',
       description: 'Built specifically for ERC-2535 Diamonds. Deploy facets once, reuse them across multiple diamonds onchain.',
       link: '/docs/foundations/diamond-contracts',
     },
     {
-      icon: 'composition',
+      kicker: 'Architecture',
       title: 'Composition Over Inheritance',
       description: 'Combine deployed facets instead of inheriting contracts. Build systems from simple, reusable pieces.',
       link: '/docs/design/design-for-composition',
     },
     {
-      icon: 'simplicity',
+      kicker: 'SCOP',
       title: 'Intentional Simplicity',
       description: 'Smart Contract Oriented Programming (SCOP) - designed specifically for smart contracts, not general software.',
       link: '/docs/design',
     },
     {
-      icon: 'library',
+      kicker: 'Roadmap',
       title: 'On-chain Standard Library',
       description: '(In the future) Access verified, audited facets deployed on multiple blockchains.',
       link: '/docs/foundations/onchain-contract-library',
     },
     {
-      icon: 'community',
+      kicker: 'Ecosystem',
       title: 'Community-Driven',
       description: 'Built with love by the community. Join us in creating the standard library for ERC-2535 Diamonds.',
       link: '/docs/contribution/how-to-contribute',
@@ -68,13 +67,19 @@ export default function FeaturesSection() {
               key={feature.title}
               className={styles.featureCardLink}
             >
-              <div className={styles.featureCard}>
-                <div className={styles.featureIcon}>
-                  <Icon name={feature.icon} size={32} />
-                </div>
+              <article className={styles.featureCard}>
+                <header className={styles.featureMeta}>
+                  <span className={styles.featureKicker}>{feature.kicker}</span>
+                </header>
                 <h3 className={styles.featureTitle}>{feature.title}</h3>
                 <p className={styles.featureDescription}>{feature.description}</p>
-              </div>
+                <span className={styles.featureHint}>
+                  <span className={styles.featureHintLabel}>Open in docs</span>
+                  <span className={styles.featureHintArrow} aria-hidden="true">
+                    →
+                  </span>
+                </span>
+              </article>
             </a>
           ))}
         </div>
diff --git a/website/src/components/home/StatsSection.js b/website/src/components/home/StatsSection.js
index e52bd665..be8297dc 100644
--- a/website/src/components/home/StatsSection.js
+++ b/website/src/components/home/StatsSection.js
@@ -10,25 +10,27 @@ export default function StatsSection() {
   });
 
   const stats = [
-    { label: 'Open Source', value: 'MIT', icon: 'scroll' },
-    { label: 'Diamond Standard', value: 'ERC-2535', icon: 'diamond' },
-    { label: 'Contributors', value: contributorsValue, icon: 'community' },
-    { label: 'Built with Love', value: 'Community', icon: 'heart' },
+    {label: 'Open Source', value: 'MIT', icon: 'scroll'},
+    {label: 'Diamond Standard', value: 'ERC-2535', icon: 'diamond'},
+    {label: 'Contributors', value: contributorsValue, icon: 'community'},
+    {label: 'Built with Love', value: 'Community', icon: 'heart'},
   ];
 
   return (
-    <section className={styles.statsSection}>
+    <section className={styles.statsSection} aria-label="Project highlights">
       <div className="container">
-        <div className={styles.statsGrid}>
-          {stats.map((stat, idx) => (
-            <div key={idx} className={styles.statCard}>
-              <div className={styles.statIcon}>
-                <Icon name={stat.icon} size={32} />
-              </div>
-              <div className={styles.statValue}>{stat.value}</div>
-              <div className={styles.statLabel}>{stat.label}</div>
-            </div>
-          ))}
+        <div className={styles.statsRail}>
+          <ul className={styles.statsList}>
+            {stats.map((stat) => (
+              <li key={stat.label} className={styles.statItem}>
+                <span className={styles.statIcon} aria-hidden="true">
+                  <Icon name={stat.icon} size={26} />
+                </span>
+                <span className={styles.statValue}>{stat.value}</span>
+                <span className={styles.statLabel}>{stat.label}</span>
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
     </section>
diff --git a/website/src/components/home/codeShowcase.module.css b/website/src/components/home/codeShowcase.module.css
index cccc0c68..8cab9255 100644
--- a/website/src/components/home/codeShowcase.module.css
+++ b/website/src/components/home/codeShowcase.module.css
@@ -1,27 +1,146 @@
 /* Code Showcase Section */
 
-.showcaseSection { padding: 4rem 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); position: relative; overflow: hidden; }
+.showcaseSection { padding: 4rem 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); position: relative; overflow-x: clip; }
 
-.showcaseGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1400px; margin: 0 auto; }
+/* minmax(0, 1fr) + min-width: 0 — without this, the code column's min-content width
+   equals the longest pre line and blows out the grid on narrow / zoomed viewports. */
+.showcaseGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 4rem;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.showcaseContent,
+.showcaseCode {
+  min-width: 0;
+}
 
 .showcaseContent { padding: 0 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
 .showcaseBadge { display: inline-block; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(96,165,250,0.1)); border: 1px solid rgba(59,130,246,0.2); border-radius: 9999px; color: var(--compose-primary-500); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.5rem; }
 .showcaseTitle { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; }
-.showcaseDescription { font-size: 1.125rem; line-height: 1.8; color: #64748b; margin-bottom: 2.5rem; }
+.showcaseDescription { font-size: 1.125rem; line-height: 1.8; color: #334155; margin-bottom: 2.5rem; }
+
+.showcaseFeatures {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 2.5rem;
+  width: 100%;
+  max-width: 600px;
+  align-self: stretch;
+  margin-left: auto;
+  margin-right: auto;
+  align-items: stretch;
+  box-sizing: border-box;
+}
+
+.showcaseFeature {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1.5rem;
+  border-radius: 1rem;
+  overflow: hidden;
+  isolation: isolate;
+  text-align: left;
+  text-decoration: none;
+  color: inherit;
+  background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 55%, #f8fafc 100%);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
+    0 14px 32px -16px rgba(15, 23, 42, 0.12);
+  transition:
+    border-color var(--motion-duration-normal) var(--motion-ease-standard),
+    box-shadow var(--motion-duration-normal) var(--motion-ease-standard),
+    transform var(--motion-duration-normal) var(--motion-ease-standard);
+}
+
+.showcaseFeature::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.1), transparent 55%);
+  opacity: 0;
+  transition: opacity var(--motion-duration-normal) var(--motion-ease-standard);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.showcaseFeature:hover {
+  border-color: rgba(59, 130, 246, 0.28);
+  box-shadow:
+    0 0 0 1px rgba(59, 130, 246, 0.1) inset,
+    0 20px 40px -18px rgba(37, 99, 235, 0.2);
+  transform: translateX(8px);
+}
+
+.showcaseFeature:hover::after {
+  opacity: 1;
+}
+
+.showcaseFeatureIcon {
+  position: relative;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 0.75rem;
+  color: var(--compose-primary-500);
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.14), rgba(37, 99, 235, 0.06));
+  border: 1px solid rgba(59, 130, 246, 0.22);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
+}
 
-.showcaseFeatures { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; width: 100%; max-width: 600px; }
-.showcaseFeature { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: white; border: 1px solid #e2e8f0; border-radius: 1rem; transition: all 0.25s ease; text-align: left; text-decoration: none; color: inherit; }
-.showcaseFeature:hover { border-color: #cbd5e1; box-shadow: 0 8px 20px rgba(0,0,0,0.06); transform: translateX(8px); }
-.showcaseFeatureIcon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.1)); border-radius: 0.75rem; color: var(--compose-primary-500); flex-shrink: 0; }
 .showcaseFeatureIcon svg { width: 24px; height: 24px; }
-.showcaseFeature h4 { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; }
-.showcaseFeature p { font-size: 0.9375rem; color: #64748b; margin: 0; line-height: 1.6; }
+
+.showcaseFeature > div:last-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.showcaseFeature h4 {
+  position: relative;
+  z-index: 1;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 0.25rem;
+}
+
+.showcaseFeature p {
+  position: relative;
+  z-index: 1;
+  font-size: 0.9375rem;
+  color: #334155;
+  margin: 0;
+  line-height: 1.6;
+}
 
 .showcaseLink { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; background: linear-gradient(135deg, var(--compose-primary-500), var(--compose-primary-600)); color: white; font-weight: 600; border-radius: 0.75rem; text-decoration: none; transition: all var(--motion-duration-normal) var(--motion-ease-standard); box-shadow: 0 4px 14px rgba(59,130,246,0.4); }
 .showcaseLink:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,0.5); color: white; }
 
-.showcaseCode { position: relative; padding: 0 2rem; }
-.codeWindow { background: #1e293b; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05); transition: all var(--motion-duration-normal) var(--motion-ease-standard); }
+.showcaseCode { position: relative; padding: 0 2rem; width: 100%; max-width: 100%; }
+.codeWindow {
+  background: #1e293b;
+  border-radius: 1.25rem;
+  overflow: hidden;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05);
+  transition: all var(--motion-duration-normal) var(--motion-ease-standard);
+}
 .codeWindow:hover { transform: translateY(-4px); box-shadow: 0 35px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05); }
 .codeWindowHeader { display: flex; align-items: center; padding: 1rem 1.5rem; background: #0f172a; border-bottom: 1px solid rgba(255,255,255,0.05); }
 .codeWindowDots { display: flex; gap: 0.5rem; margin-right: auto; }
@@ -30,48 +149,73 @@
 .codeWindowDots span:nth-child(2) { background: #f59e0b; }
 .codeWindowDots span:nth-child(3) { background: #10b981; }
 .codeWindowTitle { font-family: var(--ifm-font-family-monospace); font-size: 0.875rem; color: #94a3b8; font-weight: 500; }
-.codeWindowContent { padding: 2rem; margin: 0; font-family: var(--ifm-font-family-monospace); font-size: 0.9375rem; line-height: 1.7; color: #e2e8f0; overflow-x: auto; background: #1e293b; white-space: pre; max-width: 100%; scrollbar-width: thin; scrollbar-color: #475569 #1e293b; }
+.codeWindowContent {
+  padding: 2rem;
+  margin: 0;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: #e2e8f0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: contain;
+  background: #1e293b;
+  white-space: pre;
+  tab-size: 2;
+  scrollbar-width: thin;
+  scrollbar-color: #475569 #1e293b;
+}
 .codeWindowContent::-webkit-scrollbar { height: 8px; }
 .codeWindowContent::-webkit-scrollbar-track { background: #1e293b; }
 .codeWindowContent::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
 .codeWindowContent::-webkit-scrollbar-thumb:hover { background: #64748b; }
 
-/* Responsive */
-@media screen and (max-width: 1024px) {
-  .showcaseGrid { grid-template-columns: 1fr; gap: 3rem; }
-  .showcaseContent, .showcaseCode { padding: 0 1rem; }
+/* Responsive — stack before the two-column layout gets cramped */
+@media screen and (max-width: 1100px) {
+  .showcaseGrid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    align-items: stretch;
+  }
+  .showcaseContent,
+  .showcaseCode {
+    padding: 0 1rem;
+  }
 }
 @media screen and (max-width: 768px) {
   .showcaseSection { padding: 5rem 0; }
   .showcaseSection .container { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; width: 100%; }
-  .showcaseGrid { grid-template-columns: 1fr; gap: 2.5rem; justify-items: center; margin: 0 auto; width: 100%; }
+  .showcaseGrid { grid-template-columns: 1fr; gap: .5rem; justify-items: stretch; margin: 0 auto; width: 100%; }
   .showcaseContent { padding: 0 1.5rem; width: 100%; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
   .showcaseTitle { font-size: 1.875rem; text-align: center; }
   .showcaseDescription { font-size: 1rem; margin-bottom: 2rem; text-align: center; }
-  .showcaseFeatures { gap: 1rem; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; }
+  .showcaseFeatures { gap: 1rem; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: stretch; }
   .showcaseLink { margin-left: auto; margin-right: auto; }
   .showcaseFeature { padding: 1.25rem; flex-direction: row; }
   .showcaseFeature:hover { transform: translateX(4px); }
   .showcaseFeatureIcon { width: 40px; height: 40px; }
   .showcaseFeature h4 { font-size: 1rem; }
   .showcaseFeature p { font-size: 0.875rem; }
-  .showcaseCode { padding: 0 1rem; width: 100%; max-width: 100%; margin: 0 auto; display: flex; justify-content: center; }
-  .codeWindow { max-width: 100%; width: 100%; margin: 0 auto; }
+  .showcaseCode { padding: 0 1rem; width: 100%; max-width: 100%; margin: 0 auto; min-width: 0; align-self: stretch; }
+  .codeWindow { max-width: 100%; width: 100%; margin: 0 auto; min-width: 0; }
   .codeWindowContent { padding: 1.5rem; font-size: 0.8125rem; line-height: 1.6; }
 }
 @media screen and (max-width: 480px) {
   .showcaseSection { padding: 3rem 0; }
   .showcaseSection .container { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; width: 100%; max-width: 100%; }
-  .showcaseGrid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; width: 100%; margin: 0 auto; padding: 0; }
+  .showcaseGrid { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2.5rem; width: 100%; margin: 0 auto; padding: 0; }
   .showcaseContent { padding: 0 1rem; width: 100%; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
   .showcaseTitle { font-size: 1.5rem; text-align: center; }
   .showcaseDescription { font-size: 0.9375rem; text-align: center; }
-  .showcaseFeatures { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; }
-  .showcaseFeature { width: 100%; max-width: calc(100% - 2rem); }
+  .showcaseFeatures { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: stretch; }
+  .showcaseFeature { width: 100%; max-width: 100%; }
   .showcaseBadge { font-size: 0.75rem; padding: 0.375rem 0.875rem; margin-left: auto; margin-right: auto; }
   .showcaseLink { margin-left: auto; margin-right: auto; }
-  .showcaseCode { padding: 0 1rem; width: 100%; max-width: 100%; margin: 0 auto; display: flex; justify-content: center; }
-  .codeWindow { border-radius: 1rem; width: 100%; max-width: calc(100vw - 2rem); margin: 0 auto; }
+  .showcaseCode { padding: 0 1rem; width: 100%; max-width: 100%; margin: 0 auto; min-width: 0; align-self: stretch; }
+  .codeWindow { border-radius: 1rem; width: 100%; max-width: min(100%, calc(100vw - 2rem)); margin: 0 auto; min-width: 0; }
   .codeWindowHeader { padding: 0.75rem 1rem; }
   .codeWindowTitle { font-size: 0.75rem; }
   .codeWindowDots span { width: 10px; height: 10px; }
@@ -82,7 +226,47 @@
 [data-theme='dark'] .showcaseSection { background: var(--compose-bg-900); }
 [data-theme='dark'] .showcaseTitle { color: #ffffff; }
 [data-theme='dark'] .showcaseDescription { color: rgba(255,255,255,0.7); }
-[data-theme='dark'] .showcaseFeature { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
-[data-theme='dark'] .showcaseFeature:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
+[data-theme='dark'] .showcaseFeature {
+  background: linear-gradient(
+    155deg,
+    rgba(30, 41, 59, 0.85) 0%,
+    rgba(15, 23, 42, 0.65) 55%,
+    rgba(10, 14, 26, 0.5) 100%
+  );
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-color: rgba(148, 163, 184, 0.14);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
+    0 1px 0 rgba(255, 255, 255, 0.05) inset,
+    0 20px 44px -22px rgba(0, 0, 0, 0.55);
+}
+
+[data-theme='dark'] .showcaseFeature::after {
+  background: radial-gradient(120% 80% at 100% 0%, rgba(96, 165, 250, 0.18), transparent 58%);
+}
+
+[data-theme='dark'] .showcaseFeature:hover {
+  border-color: rgba(96, 165, 250, 0.32);
+  box-shadow:
+    0 0 0 1px rgba(59, 130, 246, 0.15) inset,
+    0 0 32px -6px rgba(59, 130, 246, 0.25),
+    0 24px 48px -24px rgba(0, 0, 0, 0.65);
+}
+
+[data-theme='dark'] .showcaseFeatureIcon {
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(15, 23, 42, 0.35));
+  border-color: rgba(96, 165, 250, 0.26);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .showcaseFeature {
+    transition: border-color var(--motion-duration-fast) ease, box-shadow var(--motion-duration-fast) ease;
+  }
+  .showcaseFeature:hover {
+    transform: none;
+  }
+}
 [data-theme='dark'] .showcaseFeature h4 { color: #ffffff; }
 [data-theme='dark'] .showcaseFeature p { color: rgba(255,255,255,0.7); }
diff --git a/website/src/components/home/ctaSection.module.css b/website/src/components/home/ctaSection.module.css
index 90ca4042..daf18497 100644
--- a/website/src/components/home/ctaSection.module.css
+++ b/website/src/components/home/ctaSection.module.css
@@ -1,37 +1,239 @@
-/* CTA Section */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap');
 
-.ctaSection { padding: 5rem 0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); position: relative; }
+/* Fluid aurora banner — Compose blues (reference: centered pill CTAs + curved glow) */
 
-.ctaContent { max-width: 800px; margin: 0 auto; text-align: center; padding: 4rem 2rem; background: white; border: 1px solid #e2e8f0; border-radius: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
-.ctaTitle { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; text-align: center; }
-.ctaDescription { font-size: 1.125rem; line-height: 1.7; color: #64748b; margin-bottom: 2.5rem; text-align: center; }
-.ctaButtons { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
+.ctaSection {
+  position: relative;
+  /* No bottom padding — flows into stats on same --home-band-bg */
+  padding: 2.5rem 0 2.5rem;
+  background: var(--home-band-bg);
+}
+
+.ctaContainer {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.ctaBanner {
+  position: relative;
+  overflow: hidden;
+  border-radius: 2rem;
+  padding: clamp(2.5rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
+  text-align: center;
+  isolation: isolate;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
+    0 12px 28px -12px rgba(15, 23, 42, 0.28),
+    0 4px 14px rgba(37, 99, 235, 0.12);
+  /* Deep navy field + cyan “valley” (U-shaped luminance like reference, blue theme) */
+  background:
+    radial-gradient(ellipse 95% 72% at 50% 58%, rgba(56, 189, 248, 0.55) 0%, rgba(59, 130, 246, 0.25) 42%, transparent 68%),
+    radial-gradient(ellipse 80% 50% at 50% 18%, rgba(15, 23, 42, 0.95) 0%, transparent 62%),
+    radial-gradient(ellipse 80% 50% at 50% 88%, rgba(15, 23, 42, 0.98) 0%, transparent 58%),
+    linear-gradient(165deg, #0f172a 0%, #1e3a8a 38%, #172554 62%, #0f172a 100%);
+}
+
+.ctaGlowTop {
+  position: absolute;
+  inset: -30% -10% auto -10%;
+  height: 70%;
+  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(30, 64, 175, 0.5), transparent 72%);
+  pointer-events: none;
+}
+
+.ctaGlowBottom {
+  position: absolute;
+  inset: auto -15% -35% -15%;
+  height: 65%;
+  background: radial-gradient(ellipse 75% 60% at 50% 100%, rgba(30, 58, 138, 0.55), transparent 70%);
+  pointer-events: none;
+}
+
+/* Bright sweeping arc (sky band) */
+.ctaArc {
+  position: absolute;
+  left: 50%;
+  top: 42%;
+  width: 140%;
+  height: 85%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    ellipse 50% 42% at 50% 50%,
+    rgba(125, 211, 252, 0.5) 0%,
+    rgba(96, 165, 250, 0.22) 45%,
+    transparent 72%
+  );
+  filter: blur(36px);
+  pointer-events: none;
+  opacity: 0.95;
+  animation: ctaArcDrift 18s ease-in-out infinite alternate;
+}
+
+@keyframes ctaArcDrift {
+  0% {
+    transform: translate(-50%, -48%) scale(1);
+    opacity: 0.9;
+  }
+  100% {
+    transform: translate(-50%, -52%) scale(1.04);
+    opacity: 1;
+  }
+}
+
+/* Thin luminous rim on the arc (reference highlight) */
+.ctaHighlight {
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  top: 36%;
+  height: 38%;
+  border-radius: 50%;
+  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
+  opacity: 0.45;
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+
+.ctaNoise {
+  position: absolute;
+  inset: 0;
+  opacity: 0.2;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.ctaInner {
+  position: relative;
+  z-index: 1;
+  max-width: 36rem;
+  margin: 0 auto;
+}
+
+.ctaTitle {
+  font-family: 'Outfit', var(--ifm-font-family-base);
+  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: #ffffff;
+  margin: 0 0 1rem;
+  text-wrap: balance;
+}
+
+.ctaDescription {
+  margin: 0 auto 1.75rem;
+  font-size: clamp(0.95rem, 2vw, 1.0625rem);
+  line-height: 1.65;
+  color: rgba(255, 255, 255, 0.88);
+  max-width: 32rem;
+}
+
+.ctaActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem 1rem;
+}
+
+.ctaButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.85rem 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: var(--ifm-font-family-base);
+  border-radius: 9999px;
+  text-decoration: none;
+  border: 2px solid transparent;
+  transition:
+    transform var(--motion-duration-normal) var(--motion-ease-standard),
+    box-shadow var(--motion-duration-normal) var(--motion-ease-standard),
+    background var(--motion-duration-normal) var(--motion-ease-standard),
+    border-color var(--motion-duration-normal) var(--motion-ease-standard),
+    color var(--motion-duration-normal) var(--motion-ease-standard);
+}
+
+/* Solid light pill (reference primary) — dark label on white */
+.ctaPrimaryLight {
+  color: #0f172a;
+  background: #ffffff;
+  border-color: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.ctaPrimaryLight:hover {
+  color: #020617;
+  background: #f8fafc;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
+}
+
+.ctaButtonIcon {
+  flex-shrink: 0;
+  display: block;
+  color: inherit;
+  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
+}
 
-.ctaButton { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 0.75rem; text-decoration: none; transition: all var(--motion-duration-normal) var(--motion-ease-standard); border: 2px solid transparent; white-space: nowrap; }
-.ctaPrimary { background: linear-gradient(135deg, var(--compose-primary-500) 0%, var(--compose-primary-600) 100%); color: white; box-shadow: 0 4px 14px rgba(59,130,246,0.4), 0 1px 3px rgba(0,0,0,0.12); }
-.ctaPrimary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,0.5), 0 4px 8px rgba(0,0,0,0.12); color: white; }
-.ctaSecondaryLight { background: rgba(59,130,246,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #1e40af; border: 2px solid rgba(59,130,246,0.3); }
-.ctaSecondaryLight:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.5); transform: translateY(-2px); color: #1e40af; }
+.ctaPrimaryLight:hover .ctaButtonIcon {
+  transform: translateX(4px);
+}
+
+/* Outline / glass pill (reference secondary) */
+.ctaSecondaryOutline {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
 
-.ctaButton:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; border-radius: 8px; }
+.ctaSecondaryOutline:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.85);
+  transform: translateY(-2px);
+}
 
-/* Responsive */
-@media screen and (max-width: 768px) {
-  .ctaSection { padding: 5rem 0; }
-  .ctaContent { padding: 3rem 1.5rem; border-radius: 1.5rem; }
-  .ctaTitle { font-size: 1.875rem; margin-bottom: 1rem; }
-  .ctaDescription { font-size: 1rem; margin-bottom: 2rem; }
-  .ctaButtons { flex-direction: column; gap: 0.75rem; }
-  .ctaButtons .ctaButton { width: 100%; max-width: 320px; }
+.ctaButton:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 3px;
 }
+
 @media screen and (max-width: 480px) {
-  .ctaContent { padding: 2.5rem 1.25rem; }
+  .ctaActions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .ctaButton {
+    width: 100%;
+    max-width: 280px;
+  }
 }
 
-/* Dark mode */
-[data-theme='dark'] .ctaSection { background: var(--compose-bg-900); }
-[data-theme='dark'] .ctaContent { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
-[data-theme='dark'] .ctaTitle { color: #ffffff; }
-[data-theme='dark'] .ctaDescription { color: rgba(255,255,255,0.7); }
-[data-theme='dark'] .ctaSecondaryLight { background: rgba(255,255,255,0.05); color: #ffffff; border: 2px solid rgba(255,255,255,0.15); }
-[data-theme='dark'] .ctaSecondaryLight:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #ffffff; }
+[data-theme='dark'] .ctaBanner {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
+    0 14px 36px -20px rgba(0, 0, 0, 0.4),
+    0 0 24px -8px rgba(59, 130, 246, 0.2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ctaBanner,
+  .ctaArc {
+    animation: none;
+  }
+
+  .ctaPrimaryLight:hover,
+  .ctaSecondaryOutline:hover {
+    transform: none;
+  }
+
+  .ctaPrimaryLight:hover .ctaButtonIcon {
+    transform: none;
+  }
+}
diff --git a/website/src/components/home/featuresSection.module.css b/website/src/components/home/featuresSection.module.css
index 88de1509..cc8f0898 100644
--- a/website/src/components/home/featuresSection.module.css
+++ b/website/src/components/home/featuresSection.module.css
@@ -1,47 +1,290 @@
-/* Features Section */
+/* Features Section — faceted glass cards */
 
-.featuresSection { padding: 4rem 0; background: #ffffff; position: relative; }
+.featuresSection {
+  padding: 1rem 0 4rem 0;
+  background: #ffffff;
+  position: relative;
+  isolation: isolate;
+}
+
+.sectionHeader {
+  text-align: center;
+  max-width: 760px;
+  margin: 0 auto 5rem;
+  position: relative;
+  z-index: 1;
+}
+.sectionBadge {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 9999px;
+  color: var(--compose-primary-500);
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+}
+.sectionTitle {
+  font-size: clamp(2.25rem, 5vw, 2.5rem);
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: #0f172a;
+  margin-bottom: 1.5rem;
+}
+.sectionSubtitle {
+  font-size: clamp(1rem, 2vw, 1.2rem);
+  line-height: 1.7;
+  color: #334155;
+  margin: 0;
+}
+
+.featuresGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
+  max-width: 1280px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.featureCardLink {
+  display: block;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+  border-radius: 1.25rem;
+}
+
+.featureCard {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 2rem 2.25rem;
+  border-radius: 1.25rem;
+  overflow: hidden;
+  isolation: isolate;
+  /* Light: paper + crisp edge */
+  background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 55%, #f8fafc 100%);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 1px 0 rgba(255, 255, 255, 0.9) inset,
+    0 22px 44px -18px rgba(15, 23, 42, 0.12),
+    0 4px 12px rgba(15, 23, 42, 0.04);
+  transition:
+    border-color var(--motion-duration-normal) var(--motion-ease-standard),
+    box-shadow var(--motion-duration-normal) var(--motion-ease-standard),
+    transform var(--motion-duration-normal) var(--motion-ease-standard);
+}
+
+.featureMeta {
+  margin-bottom: 1rem;
+  position: relative;
+  z-index: 1;
+}
 
-.sectionHeader { text-align: center; max-width: 760px; margin: 0 auto 5rem; }
-.sectionBadge { display: inline-block; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.1)); border: 1px solid rgba(59,130,246,0.2); border-radius: 9999px; color: var(--compose-primary-500); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.5rem; }
-.sectionTitle { font-size: clamp(2.25rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; }
-.sectionSubtitle { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.7; color: #64748b; margin: 0; }
+.featureKicker {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #475569;
+}
 
-.featuresGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; max-width: 1280px; margin: 0 auto; }
+.featureTitle {
+  position: relative;
+  z-index: 1;
+  font-size: 1.3125rem;
+  font-weight: 750;
+  letter-spacing: -0.025em;
+  line-height: 1.22;
+  color: #0f172a;
+  margin: 0 0 0.65rem;
+}
 
-.featureCardLink { display: block; height: 100%; text-decoration: none; color: inherit; }
+.featureDescription {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  font-size: 0.96875rem;
+  line-height: 1.65;
+  color: #334155;
+  margin: 0 0 1rem;
+}
 
-.featureCard { position: relative; height: 100%; display: flex; flex-direction: column; padding: 2.5rem; background: white; border: 1px solid #e2e8f0; border-radius: 1.25rem; transition: all var(--motion-duration-normal) var(--motion-ease-standard); overflow: hidden; }
-.featureCard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--compose-primary-500), #60a5fa); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-duration-normal) ease; }
-.featureCard:hover { border-color: #cbd5e1; box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.03); transform: translateY(-4px); }
-.featureCard:hover::before { transform: scaleX(1); }
+.featureHint {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  /* Blue-800 on light surfaces — readable at small size without opacity fade */
+  color: #1e40af;
+  transition:
+    color var(--motion-duration-normal) var(--motion-ease-standard),
+    text-decoration-color var(--motion-duration-normal) var(--motion-ease-standard);
+}
 
-.featureIcon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.1)); border-radius: 1rem; margin-bottom: 1.5rem; color: var(--compose-primary-500); }
-.featureIcon svg { width: 28px; height: 28px; }
+.featureHintArrow {
+  display: inline-block;
+  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
+}
 
-.featureTitle { font-size: 1.375rem; font-weight: 700; color: #0f172a; margin: 0 0 1rem; line-height: 1.3; }
-.featureDescription { flex: 1; font-size: 1rem; line-height: 1.7; color: #64748b; margin: 0; }
+.featureCard:hover .featureHint {
+  color: #1d4ed8;
+}
+
+.featureCard:hover .featureHintArrow {
+  transform: translateX(5px);
+}
+
+/* Facet highlight sweep (top edge) */
+.featureCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--compose-primary-500) 22%,
+    #60a5fa 55%,
+    rgba(96, 165, 250, 0.35) 100%
+  );
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: 2;
+}
+
+/* Cool radial bloom on hover */
+.featureCard::after {
+  content: '';
+  position: absolute;
+  inset: -40% -20% auto -20%;
+  height: 85%;
+  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.14), transparent 72%);
+  opacity: 0;
+  transition: opacity var(--motion-duration-normal) var(--motion-ease-standard);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.featureCard:hover {
+  border-color: rgba(59, 130, 246, 0.28);
+  box-shadow:
+    0 0 0 1px rgba(59, 130, 246, 0.12) inset,
+    0 28px 56px -20px rgba(37, 99, 235, 0.18),
+    0 12px 28px rgba(15, 23, 42, 0.08);
+  transform: translateY(-5px);
+}
+
+.featureCard:hover::before {
+  transform: scaleX(1);
+}
+
+.featureCard:hover::after {
+  opacity: 1;
+}
 
 /* Responsive */
 @media screen and (max-width: 1024px) {
   .featuresGrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
 }
 @media screen and (max-width: 768px) {
-  .featuresSection { padding: 5rem 0; }
+  .featuresSection { padding: 2rem 0 4rem 0; }
   .sectionHeader { margin-bottom: 3rem; }
   .sectionTitle { font-size: 2rem; margin-bottom: 1rem; }
   .sectionSubtitle { font-size: 1rem; }
   .featuresGrid { grid-template-columns: 1fr; gap: 1.25rem; }
-  .featureCard { padding: 2rem; }
-  .featureIcon { width: 48px; height: 48px; }
-  .featureIcon svg { width: 24px; height: 24px; }
-  .featureTitle { font-size: 1.25rem; }
+  .featureCard { padding: 1.75rem 1.5rem 2rem; }
+  .featureMeta { margin-bottom: 0.9rem; }
+  .featureTitle { font-size: 1.1875rem; }
   .featureDescription { font-size: 0.9375rem; }
 }
 
-/* Dark mode */
-[data-theme='dark'] .featuresSection { background: var(--compose-bg-900); }
-[data-theme='dark'] .featureCard { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
-[data-theme='dark'] .featureCard:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
-[data-theme='dark'] .sectionTitle, [data-theme='dark'] .featureTitle { color: #ffffff; }
-[data-theme='dark'] .sectionSubtitle, [data-theme='dark'] .featureDescription { color: rgba(255,255,255,0.7); }
+/* Dark mode — higher contrast glass, visible facet edge */
+[data-theme='dark'] .featuresSection {
+  background: var(--compose-bg-900);
+}
+
+[data-theme='dark'] .featureCard {
+  background: linear-gradient(
+    155deg,
+    rgba(30, 41, 59, 0.92) 0%,
+    rgba(15, 23, 42, 0.72) 48%,
+    rgba(10, 14, 26, 0.55) 100%
+  );
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-color: rgba(148, 163, 184, 0.14);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 28px 56px -24px rgba(0, 0, 0, 0.65),
+    0 0 0 1px rgba(59, 130, 246, 0.06);
+}
+
+[data-theme='dark'] .featureCard::after {
+  background: radial-gradient(closest-side, rgba(96, 165, 250, 0.22), transparent 70%);
+}
+
+[data-theme='dark'] .featureCard:hover {
+  border-color: rgba(96, 165, 250, 0.35);
+  box-shadow:
+    0 0 0 1px rgba(59, 130, 246, 0.2) inset,
+    0 1px 0 rgba(255, 255, 255, 0.09) inset,
+    0 0 40px -8px rgba(59, 130, 246, 0.35),
+    0 32px 64px -28px rgba(0, 0, 0, 0.75);
+}
+
+[data-theme='dark'] .featureKicker {
+  color: rgba(148, 163, 184, 0.85);
+}
+
+[data-theme='dark'] .featureHint {
+  color: #93c5fd;
+  opacity: 0.5;
+}
+
+[data-theme='dark'] .featureCard:hover .featureHint {
+  color: #4189F7;
+  opacity: 0.95;
+}
+
+[data-theme='dark'] .sectionTitle,
+[data-theme='dark'] .featureTitle {
+  color: #ffffff;
+}
+
+[data-theme='dark'] .sectionSubtitle,
+[data-theme='dark'] .featureDescription {
+  color: rgba(226, 232, 240, 0.82);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .featureCard {
+    transition: border-color var(--motion-duration-fast) ease, box-shadow var(--motion-duration-fast) ease;
+  }
+  .featureCard:hover {
+    transform: none;
+  }
+  .featureCard::before {
+    transition: transform 0.01ms;
+  }
+  .featureHintArrow {
+    transition: none;
+  }
+}
diff --git a/website/src/components/home/statsSection.module.css b/website/src/components/home/statsSection.module.css
index c1422d00..1672fd7f 100644
--- a/website/src/components/home/statsSection.module.css
+++ b/website/src/components/home/statsSection.module.css
@@ -1,30 +1,247 @@
 /* Stats Section */
 
-.statsSection { padding: 6rem 0; background: var(--compose-bg-900); position: relative; overflow: hidden; }
-.statsSection::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(59,130,246,0.1), transparent); pointer-events: none; }
+.statsSection {
+  position: relative;
+  padding: 0;
+  background: var(--home-band-reverse-bg);
+  overflow: hidden;
+}
+
+/* Same flat band as CTA wrapper — no overlay tint (avoids a visible seam) */
+
+.statsRail {
+  position: relative;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 2.5rem 0 2.75rem;
+  /* No top border / hairline — continues CTA band without demarcation */
+}
+
+.statsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0;
+}
+
+@media screen and (min-width: 960px) {
+  .statsList {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.statItem {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  padding: 1.75rem 1.25rem 1.5rem;
+  isolation: isolate;
+  animation: statsFadeUp 0.65s var(--motion-ease-standard) both;
+}
+
+.statItem:nth-child(1) {
+  animation-delay: 0.04s;
+}
+.statItem:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.statItem:nth-child(3) {
+  animation-delay: 0.16s;
+}
+.statItem:nth-child(4) {
+  animation-delay: 0.22s;
+}
+
+/* Mobile: row dividers between stacked pairs */
+.statItem:nth-child(-n + 2) {
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.statItem:nth-child(odd) {
+  border-right: 1px solid rgba(148, 163, 184, 0.1);
+}
 
-/* 2 col on mobile/tablet -> 4 col on desktop; never 3+1 orphan */
-.statsGrid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
 @media screen and (min-width: 960px) {
-  .statsGrid { grid-template-columns: repeat(4, 1fr); }
+  .statItem:nth-child(-n + 2) {
+    border-bottom: none;
+  }
+
+  .statItem:nth-child(odd) {
+    border-right: none;
+  }
+
+  .statItem:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 18%;
+    bottom: 18%;
+    right: 0;
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      transparent,
+      rgba(148, 163, 184, 0.22) 18%,
+      rgba(148, 163, 184, 0.22) 82%,
+      transparent
+    );
+  }
 }
 
-.statCard { position: relative; text-align: center; padding: 3rem 2rem; background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; transition: all var(--motion-duration-normal) var(--motion-ease-standard); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; }
-.statCard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #60a5fa, var(--compose-primary-500), var(--compose-primary-600)); opacity: 0; transition: opacity var(--motion-duration-normal) ease; }
-.statCard:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
-.statCard:hover::before { opacity: 1; }
+.statIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  color: rgba(147, 197, 253, 0.92);
+  opacity: 0.92;
+  transition:
+    color var(--motion-duration-normal) var(--motion-ease-standard),
+    transform var(--motion-duration-normal) var(--motion-ease-standard),
+    opacity var(--motion-duration-normal) var(--motion-ease-standard);
+}
 
-.statIcon { font-size: 3rem; margin-bottom: 1.25rem; display: block; filter: grayscale(0); transition: transform var(--motion-duration-normal) ease; }
-.statCard:hover .statIcon { transform: scale(1.1); }
-.statValue { font-size: clamp(1.75rem, 2.2vw, 2.5rem); font-weight: 900; background: linear-gradient(135deg, #60a5fa 0%, var(--compose-primary-500) 50%, var(--compose-primary-600) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.75rem; line-height: 1; white-space: nowrap; word-break: keep-all; }
-.statLabel { font-size: 1rem; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: 0.025em; }
+.statItem:hover .statIcon {
+  color: var(--compose-primary-500);
+  opacity: 1;
+  transform: translateY(-2px);
+}
+
+.statValue {
+  font-size: clamp(1.5rem, 2.1vw, 2.15rem);
+  font-weight: 800;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  margin-bottom: 0.65rem;
+  background: linear-gradient(
+    135deg,
+    #93c5fd 0%,
+    var(--compose-primary-500) 42%,
+    var(--compose-primary-600) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  white-space: nowrap;
+}
+
+.statLabel {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: rgba(148, 163, 184, 0.88);
+  line-height: 1.35;
+  max-width: 100%;
+  padding-inline: 0.125rem;
+  text-wrap: balance;
+  transition: color var(--motion-duration-normal) var(--motion-ease-standard);
+}
+
+.statItem:hover .statLabel {
+  color: rgba(203, 213, 225, 0.95);
+}
+
+@keyframes statsFadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .statItem {
+    animation: none;
+  }
+
+  .statItem:hover .statIcon {
+    transform: none;
+  }
+}
 
-/* Responsive */
 @media screen and (max-width: 768px) {
-  .statsSection { padding: 4rem 0; }
-  .statsGrid { gap: 1.25rem; }
-  .statCard { padding: 2rem 1rem; }
-  .statIcon { font-size: 2.5rem; margin-bottom: 1rem; }
-  .statValue { font-size: 2rem; }
-  .statLabel { font-size: 0.875rem; }
+  .statsSection {
+    padding: 0 0 3.5rem;
+  }
+
+  [data-theme='light'] .statsSection {
+    padding: 0 0 3.25rem;
+  }
+
+  .statsRail {
+    padding: 2rem 0 2.25rem;
+  }
+
+  .statItem {
+    padding: 1.5rem 0.75rem 1.35rem;
+  }
+
+  .statValue {
+    font-size: 1.5rem;
+  }
+
+  .statLabel {
+    font-size: 0.8rem;
+    letter-spacing: 0.12em;
+  }
+}
+
+/* Light theme — rail spacing only; bg stays --home-band-bg */
+[data-theme='light'] .statsRail {
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+
+[data-theme='light'] .statItem:nth-child(-n + 2) {
+  border-bottom-color: rgba(15, 23, 42, 0.1);
+}
+
+[data-theme='light'] .statItem:nth-child(odd) {
+  border-right-color: rgba(15, 23, 42, 0.1);
+}
+
+@media screen and (min-width: 960px) {
+  [data-theme='light'] .statItem:not(:last-child)::after {
+    background: linear-gradient(
+      180deg,
+      transparent,
+      rgba(15, 23, 42, 0.1) 22%,
+      rgba(15, 23, 42, 0.1) 78%,
+      transparent
+    );
+  }
+}
+
+[data-theme='light'] .statIcon {
+  color: #64748b;
+  opacity: 1;
+}
+
+[data-theme='light'] .statItem:hover .statIcon {
+  color: #2563eb;
+}
+
+[data-theme='light'] .statValue {
+  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 38%, #3b82f6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+[data-theme='light'] .statLabel {
+  color: #2d3239;
+  letter-spacing: 0.11em;
+}
+
+[data-theme='light'] .statItem:hover .statLabel {
+  color: #1c1e21;
 }
diff --git a/website/src/css/variables.css b/website/src/css/variables.css
index 881ffe08..7bd4acbe 100644
--- a/website/src/css/variables.css
+++ b/website/src/css/variables.css
@@ -59,6 +59,10 @@
   --compose-primary-500: #3b82f6; /* ifm primary */
   --compose-primary-600: #2563eb;
 
+  /* Homepage CTA + stats — one continuous band (light) */
+  --home-band-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
+  --home-band-reverse-bg: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
+
   /* Hero gradient - Blue focused (lighter for docs title readability on white) */
   --hero-gradient: linear-gradient(135deg, var(--compose-primary-500) 0%, #1e40af 100%);
   --hero-gradient-alt: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
@@ -138,6 +142,11 @@
   --compose-primary-500: #60a5fa;
   --compose-primary-600: #3b82f6;
 
+  /* Homepage CTA + stats — reversed gradients meet at same hue (mirrors light band) */
+  --home-band-bg: linear-gradient(180deg, var(--compose-bg-900) 0%, #0c1323 100%);
+  /* CTA bottom (#0c1323) must equal stats top — same as light reverse-bg, not duplicate of --home-band-bg */
+  --home-band-reverse-bg: linear-gradient(180deg, #0c1323 0%, var(--compose-bg-900) 100%);
+
   /* Hero gradient - dark blue */
   --hero-gradient: linear-gradient(135deg, var(--compose-bg-900) 0%, var(--compose-bg-800) 100%);
   --hero-gradient-alt: linear-gradient(135deg, var(--compose-bg-800) 0%, #334155 100%);
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 1ca1882a..88a0a440 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -16,8 +16,8 @@ export default function Home() {
       <main>
         <FeaturesSection />
         <CodeShowcase />
-        <StatsSection />
         <CtaSection />
+        <StatsSection />
       </main>
     </Layout>
   );