diff --git a/app/contribute/contribute-view.tsx b/app/contribute/contribute-view.tsx
index 43351be6..23252f52 100644
--- a/app/contribute/contribute-view.tsx
+++ b/app/contribute/contribute-view.tsx
@@ -5,6 +5,7 @@ import { ContributeHero } from "@/components/contribute/contribute-hero";
 import { ContributionCard } from "@/components/contribute/contribution-card";
 import { ContributionEmptyState } from "@/components/contribute/contribution-empty-state";
 import { ContributionHint } from "@/components/contribute/contribution-hint";
+import { CursorGlow } from "@/components/ui/cursor-glow";
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -39,24 +40,26 @@ export default function ContributeView({ cards }: { cards: ContributionCardData[
 
       <div className="relative z-10 mx-auto max-w-[90rem] px-4 pb-24 sm:px-6 lg:px-8">
         {cards.length > 0 ? (
-          <m.div
-            animate="visible"
-            className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
-            initial="hidden"
-            variants={containerVariants}
-          >
-            {cards.map((card, index) => (
-              <ContributionCard
-                actionText={card.actionText}
-                color={card.color}
-                description={card.description}
-                href={card.href}
-                icon={card.icon || "HelpCircle"}
-                key={card.id || index}
-                title={card.title}
-              />
-            ))}
-          </m.div>
+          <CursorGlow>
+            <m.div
+              animate="visible"
+              className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+              initial="hidden"
+              variants={containerVariants}
+            >
+              {cards.map((card, index) => (
+                <ContributionCard
+                  actionText={card.actionText}
+                  color={card.color}
+                  description={card.description}
+                  href={card.href}
+                  icon={card.icon || "HelpCircle"}
+                  key={card.id || index}
+                  title={card.title}
+                />
+              ))}
+            </m.div>
+          </CursorGlow>
         ) : (
           <ContributionEmptyState />
         )}
diff --git a/app/docs/view.tsx b/app/docs/view.tsx
index 3e62284b..0e76fece 100644
--- a/app/docs/view.tsx
+++ b/app/docs/view.tsx
@@ -8,6 +8,7 @@ import { DocsBackground } from "@/components/docs/view/docs-background";
 import { DocsCard } from "@/components/docs/view/docs-card";
 import { DocsHeader } from "@/components/docs/view/docs-header";
 import Cta from "@/components/shared/cta-section";
+import { CursorGlow } from "@/components/ui/cursor-glow";
 import { DOC_PROJECTS } from "@/lib/docs-projects";
 
 export function DocsView() {
@@ -44,16 +45,18 @@ export function DocsView() {
       <DocsHeader />
 
       <div className="relative z-10 mx-auto max-w-[90rem] px-4 pb-6 sm:px-6 lg:px-8">
-        <motion.div
-          animate="visible"
-          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
-          initial="hidden"
-          variants={containerVariants}
-        >
-          {DOC_PROJECTS.map((project) => (
-            <DocsCard key={project.path} project={project} />
-          ))}
-        </motion.div>
+        <CursorGlow>
+          <motion.div
+            animate="visible"
+            className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+            initial="hidden"
+            variants={containerVariants}
+          >
+            {DOC_PROJECTS.map((project) => (
+              <DocsCard key={project.path} project={project} />
+            ))}
+          </motion.div>
+        </CursorGlow>
 
         <div className="relative mt-20">
           <div className="absolute top-full left-1/2 -z-10 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/10 blur-3xl filter will-change-transform md:h-[600px] md:w-[600px] dark:bg-blue-500/5" />
diff --git a/app/globals.css b/app/globals.css
index e05a418e..8f8ce6e9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -372,3 +372,1096 @@ pre[class*="language-"] {
 pre[class*="language-"] {
   color: var(--prism-text) !important;
 }
+
+/* EternalCode 2026 visual system */
+:root {
+  color-scheme: light;
+  --ec-bg: #f7f7f2;
+  --ec-panel: #fdfdf9;
+  --ec-panel-strong: #eeeee7;
+  --ec-footer: #efefe8;
+  --ec-text: #171914;
+  --ec-muted: rgb(23 25 20 / 0.66);
+  --ec-faint: rgb(23 25 20 / 0.46);
+  --ec-line: rgb(23 25 20 / 0.14);
+  --ec-soft: rgb(23 25 20 / 0.065);
+  --ec-accent: #3b82f6;
+  --ec-accent-text: #1d4ed8;
+  --ec-accent-ink: #ffffff;
+  --ec-nav: rgb(247 247 242 / 0.9);
+  --ec-code: #171a15;
+  --ec-code-text: #f3f5ec;
+  --ec-glow: rgb(59 130 246 / 0.18);
+  --ec-glow-core: rgb(59 130 246 / 0.34);
+}
+
+.dark {
+  color-scheme: dark;
+  --ec-bg: #0d0f0d;
+  --ec-panel: #141713;
+  --ec-panel-strong: #090b09;
+  --ec-footer: #080a08;
+  --ec-text: #f1f3ea;
+  --ec-muted: rgb(241 243 234 / 0.62);
+  --ec-faint: rgb(241 243 234 / 0.42);
+  --ec-line: rgb(241 243 234 / 0.12);
+  --ec-soft: rgb(255 255 255 / 0.06);
+  --ec-accent: #60a5fa;
+  --ec-accent-text: #60a5fa;
+  --ec-accent-ink: #07111f;
+  --ec-nav: rgb(11 13 12 / 0.84);
+  --ec-code: #080a08;
+  --ec-code-text: #f4f5ef;
+  --ec-glow: rgb(96 165 250 / 0.17);
+  --ec-glow-core: rgb(96 165 250 / 0.32);
+}
+
+html {
+  scroll-behavior: smooth;
+  background: var(--ec-bg);
+}
+body {
+  background: var(--ec-bg);
+  color: var(--ec-text);
+  font-family: var(--font-manrope), sans-serif;
+}
+::selection {
+  background: var(--ec-accent);
+  color: var(--ec-accent-ink);
+}
+.site-shell {
+  min-height: 100vh;
+  overflow: hidden;
+  background: var(--ec-bg);
+  color: var(--ec-text);
+}
+.site-nav {
+  border: 1px solid var(--ec-line);
+  border-radius: 1.1rem;
+  background: var(--ec-nav);
+  box-shadow: 0 18px 60px rgb(0 0 0 / 0.12);
+  backdrop-filter: blur(18px);
+}
+.nav-link {
+  border-radius: 999px;
+  padding: 0.55rem 0.9rem;
+  color: var(--ec-muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+  transition: 0.2s ease;
+}
+.nav-link:hover,
+.nav-link-active {
+  background: var(--ec-soft);
+  color: var(--ec-text);
+}
+.section-shell {
+  width: min(100% - 2rem, 92rem);
+  margin-inline: auto;
+}
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  opacity: 0.48;
+  background-image:
+    linear-gradient(var(--ec-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--ec-line) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: linear-gradient(to bottom, black 20%, transparent 90%);
+}
+.eyebrow,
+.section-kicker {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.68rem;
+  line-height: 1;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ec-muted);
+}
+.section-kicker span,
+.hero-title span,
+.text-link {
+  color: var(--ec-accent-text);
+}
+.status-dot {
+  display: inline-block;
+  width: 0.45rem;
+  height: 0.45rem;
+  flex: none;
+  border-radius: 50%;
+  background: var(--ec-accent);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--ec-accent) 65%, transparent);
+}
+.hero-title {
+  max-width: 65rem;
+  margin-top: 1.7rem;
+  font-size: clamp(3.3rem, 8vw, 8.2rem);
+  font-weight: 600;
+  line-height: 0.88;
+  letter-spacing: -0.075em;
+}
+.primary-action,
+.secondary-action,
+.pill-link,
+.text-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  font-size: 0.82rem;
+  font-weight: 700;
+  transition: 0.2s ease;
+}
+.primary-action {
+  min-height: 3.2rem;
+  border-radius: 999px;
+  padding: 0 1.35rem;
+  background: var(--ec-accent);
+  color: var(--ec-accent-ink);
+}
+.primary-action:hover {
+  filter: brightness(1.04);
+  transform: translateY(-2px);
+}
+.secondary-action,
+.pill-link {
+  min-height: 3.2rem;
+  border: 1px solid var(--ec-line);
+  border-radius: 999px;
+  padding: 0 1.25rem;
+  color: var(--ec-muted);
+}
+.secondary-action:hover,
+.pill-link:hover {
+  border-color: color-mix(in srgb, var(--ec-text) 28%, transparent);
+  color: var(--ec-text);
+}
+.project-card,
+.ec-card {
+  border-color: var(--ec-line);
+  background-color: var(--ec-panel);
+  color: var(--ec-text);
+}
+.project-card {
+  display: block;
+  min-height: 31rem;
+  border-width: 1px;
+  border-radius: 1.75rem;
+  padding: 1.5rem;
+  overflow: hidden;
+  transition:
+    transform 0.35s ease,
+    border-color 0.35s ease,
+    box-shadow 0.35s ease;
+}
+.project-card:hover {
+  transform: translateY(-6px);
+  border-color: color-mix(in srgb, var(--ec-text) 25%, transparent);
+  box-shadow: 0 22px 55px rgb(0 0 0 / 0.1);
+}
+.project-icon {
+  display: grid;
+  width: 3.25rem;
+  height: 3.25rem;
+  place-items: center;
+  border-radius: 1rem;
+  background: var(--ec-soft);
+  color: var(--ec-text);
+}
+.project-blue {
+  background-image: radial-gradient(
+    circle at 15% 20%,
+    color-mix(in srgb, var(--ec-accent) 20%, transparent),
+    transparent 38%
+  );
+}
+.project-blue .project-icon {
+  color: var(--ec-accent-text);
+}
+.project-violet {
+  background-image: radial-gradient(
+    circle at 15% 20%,
+    rgb(37 99 235 / 0.16),
+    transparent 38%
+  );
+}
+.project-violet .project-icon {
+  color: #2563eb;
+}
+.project-cyan {
+  background-image: radial-gradient(
+    circle at 15% 20%,
+    rgb(14 165 233 / 0.15),
+    transparent 38%
+  );
+}
+.project-cyan .project-icon {
+  color: #0284c7;
+}
+.display-title {
+  max-width: 46rem;
+  font-size: clamp(2.55rem, 5vw, 5rem);
+  font-weight: 600;
+  line-height: 0.98;
+  letter-spacing: -0.06em;
+}
+.code-panel {
+  overflow: hidden;
+  border: 1px solid var(--ec-line);
+  border-radius: 1.25rem;
+  background: var(--ec-code);
+  color: var(--ec-code-text);
+  box-shadow: 0 30px 80px rgb(0 0 0 / 0.16);
+}
+.terminal-caret {
+  display: inline-block;
+  width: 0.5rem;
+  height: 1rem;
+  margin-left: 0.2rem;
+  vertical-align: middle;
+  background: var(--ec-accent);
+  animation: blink 1s steps(2) infinite;
+}
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+.cta-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 3rem;
+  border-radius: 2rem;
+  padding: clamp(2rem, 6vw, 5rem);
+  background: var(--ec-accent);
+  color: var(--ec-accent-ink);
+}
+.cta-button {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.65rem;
+  border-radius: 999px;
+  padding: 1rem 1.25rem;
+  background: var(--ec-accent-ink);
+  color: white;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+.cursor-glow {
+  position: relative;
+}
+.cursor-glow [data-glow-card] {
+  --card-glow-x: 50%;
+  --card-glow-y: 50%;
+  --card-glow-opacity: 0;
+  isolation: isolate;
+  position: relative;
+  overflow: hidden;
+}
+.cursor-glow [data-glow-card]::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  left: var(--card-glow-x);
+  top: var(--card-glow-y);
+  width: 19rem;
+  height: 19rem;
+  border-radius: 999px;
+  opacity: var(--card-glow-opacity);
+  background: radial-gradient(
+    circle,
+    var(--ec-glow-core),
+    var(--ec-glow) 42%,
+    transparent 72%
+  );
+  filter: blur(24px);
+  transform: translate(-50%, -50%);
+  transition: opacity 0.22s ease;
+  will-change: left, top, opacity;
+}
+.cursor-glow [data-glow-card] > :not([class*="absolute"]) {
+  position: relative;
+  z-index: 1;
+}
+
+main > div:not(.site-shell),
+main > section {
+  background-color: var(--ec-bg) !important;
+  color: var(--ec-text);
+}
+.bg-gray-50,
+.bg-light-gray-100 {
+  background-color: var(--ec-bg) !important;
+}
+.bg-white {
+  background-color: var(--ec-panel) !important;
+}
+.border-gray-200,
+.border-white\/10 {
+  border-color: var(--ec-line) !important;
+}
+.text-gray-900,
+.text-gray-800 {
+  color: var(--ec-text) !important;
+}
+.text-gray-600,
+.text-gray-500 {
+  color: var(--ec-muted) !important;
+}
+.bg-blue-600 {
+  background-color: var(--ec-accent) !important;
+  color: var(--ec-accent-ink) !important;
+}
+.text-blue-600 {
+  color: var(--ec-accent-text) !important;
+}
+.rounded-xl,
+.rounded-2xl {
+  border-radius: 1.1rem;
+}
+.prose {
+  --tw-prose-body: var(--ec-muted);
+  --tw-prose-headings: var(--ec-text);
+  --tw-prose-links: var(--ec-accent);
+  --tw-prose-bold: var(--ec-text);
+  --tw-prose-code: var(--ec-accent);
+}
+
+@media (min-width: 768px) {
+  .cta-panel {
+    flex-direction: row;
+    align-items: end;
+  }
+}
+@media (max-width: 640px) {
+  .project-card {
+    min-height: 27rem;
+  }
+}
+@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
+  .cursor-glow-blob {
+    display: none;
+  }
+}
+
+.code-panel [class*="text-white/"] {
+  color: rgb(255 255 255 / 0.48) !important;
+}
+
+/* Minimal Minecraft hero */
+.hero-minimal {
+  position: relative;
+  display: grid;
+  min-height: 92svh;
+  place-items: center;
+  overflow: hidden;
+  border-bottom: 1px solid var(--ec-line);
+  padding: 9rem 1rem 5rem;
+}
+.hero-minimal::before {
+  content: "";
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  width: min(56rem, 90vw);
+  height: 24rem;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--ec-accent) 9%, transparent);
+  filter: blur(100px);
+  transform: translateX(-50%);
+}
+.hero-minimal-inner {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.hero-minimal-title {
+  max-width: 70rem;
+  margin-top: 1.7rem;
+  font-size: clamp(3.8rem, 9vw, 8.5rem);
+  font-weight: 600;
+  line-height: 0.88;
+  letter-spacing: -0.075em;
+}
+.hero-minimal-title span {
+  color: var(--ec-accent-text);
+}
+.hero-minimal-lead {
+  max-width: 43rem;
+  margin-top: 2rem;
+  color: var(--ec-muted);
+  font-size: clamp(1rem, 1.5vw, 1.18rem);
+  line-height: 1.75;
+}
+.hero-minimal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+}
+.hero-minimal-scroll {
+  position: absolute;
+  z-index: 3;
+  bottom: 1.2rem;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--ec-faint);
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.58rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transform: translateX(-50%);
+  transition: color 0.2s ease;
+}
+.hero-minimal-scroll:hover {
+  color: var(--ec-text);
+}
+@media (max-width: 640px) {
+  .hero-minimal {
+    min-height: 88svh;
+    padding-top: 8rem;
+  }
+  .hero-minimal-title {
+    font-size: clamp(3.25rem, 16vw, 5.2rem);
+  }
+  .hero-minimal-scroll {
+    display: none;
+  }
+}
+
+/* EternalCore product page */
+.ec-project-page {
+  overflow: hidden;
+  background: var(--ec-bg);
+  color: var(--ec-text);
+}
+.ec-project-hero {
+  position: relative;
+  min-height: 100svh;
+  overflow: hidden;
+  border-bottom: 1px solid var(--ec-line);
+  padding-top: 9rem;
+}
+.ec-project-hero::before {
+  content: "";
+  position: absolute;
+  width: 46rem;
+  height: 46rem;
+  right: -14rem;
+  top: 5rem;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--ec-accent) 13%, transparent),
+    transparent 68%
+  );
+}
+.ec-project-hero-layout {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  min-height: calc(100svh - 12rem);
+  align-items: center;
+  gap: clamp(3rem, 7vw, 7rem);
+  padding-bottom: 5rem;
+}
+.ec-project-copy {
+  max-width: 48rem;
+}
+.ec-project-copy h1 {
+  max-width: 54rem;
+  margin-top: 1.6rem;
+  font-size: clamp(3.8rem, 7.5vw, 7.6rem);
+  font-weight: 600;
+  line-height: 0.9;
+  letter-spacing: -0.072em;
+}
+.ec-project-copy h1 span {
+  color: var(--ec-accent-text);
+}
+.ec-project-copy > p {
+  max-width: 42rem;
+  margin-top: 1.7rem;
+  color: var(--ec-muted);
+  font-size: clamp(1rem, 1.4vw, 1.18rem);
+  line-height: 1.75;
+}
+.ec-project-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 2rem;
+}
+.ec-project-note {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin-top: 2rem;
+  color: var(--ec-faint);
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.62rem;
+}
+.ec-project-note svg {
+  color: var(--ec-accent-text);
+}
+.ec-project-visual {
+  width: 100%;
+  max-width: 44rem;
+  justify-self: end;
+}
+.ec-project-banner-frame {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: 1px solid var(--ec-line);
+  border-radius: 1.8rem;
+  background: var(--ec-panel);
+  box-shadow: 0 40px 100px rgb(3 10 24 / 0.18);
+}
+.ec-project-banner-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(145deg, transparent 52%, rgb(2 6 23 / 0.38));
+}
+.ec-project-banner-chip {
+  position: absolute;
+  border: 1px solid rgb(255 255 255 / 0.18);
+  border-radius: 999px;
+  padding: 0.5rem 0.7rem;
+  background: rgb(5 10 20 / 0.62);
+  color: white;
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.58rem;
+  backdrop-filter: blur(12px);
+}
+.ec-chip-top {
+  top: 1rem;
+  right: 1rem;
+}
+.ec-chip-bottom {
+  right: 1rem;
+  bottom: 1rem;
+}
+.ec-project-scroll {
+  position: absolute;
+  z-index: 3;
+  bottom: 1.2rem;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--ec-faint);
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.58rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  transform: translateX(-50%);
+}
+.ec-capabilities {
+  padding-block: 8rem;
+}
+.ec-section-intro {
+  max-width: 55rem;
+}
+.ec-section-intro h2 {
+  margin-top: 1.5rem;
+  font-size: clamp(2.8rem, 5.4vw, 5.7rem);
+  font-weight: 600;
+  line-height: 0.96;
+  letter-spacing: -0.06em;
+}
+.ec-section-intro > p {
+  max-width: 42rem;
+  margin-top: 1.5rem;
+  color: var(--ec-muted);
+  line-height: 1.75;
+}
+.ec-capability-grid {
+  display: grid;
+  gap: 1px;
+  margin-top: 4rem;
+  overflow: hidden;
+  border: 1px solid var(--ec-line);
+  border-radius: 1.6rem;
+  background: var(--ec-line);
+}
+.ec-capability {
+  display: flex;
+  min-height: 15rem;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 1.5rem;
+  background: var(--ec-panel);
+}
+.ec-capability svg {
+  color: var(--ec-accent-text);
+}
+.ec-capability strong {
+  margin-top: 3rem;
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: clamp(2.5rem, 5vw, 4.5rem);
+  font-weight: 500;
+  letter-spacing: -0.07em;
+}
+.ec-capability span {
+  max-width: 12rem;
+  color: var(--ec-muted);
+  font-size: 0.72rem;
+  line-height: 1.5;
+}
+.ec-showcase-section {
+  border-block: 1px solid var(--ec-line);
+  padding-block: 8rem;
+  background: var(--ec-panel-strong);
+}
+.ec-section-intro-wide {
+  max-width: 67rem;
+}
+.ec-showcase-list {
+  display: flex;
+  flex-direction: column;
+  gap: 9rem;
+  margin-top: 7rem;
+}
+.ec-showcase-row {
+  display: grid;
+  align-items: center;
+  gap: clamp(2rem, 7vw, 7rem);
+}
+.ec-showcase-copy {
+  max-width: 29rem;
+}
+.ec-showcase-copy > span {
+  color: var(--ec-accent-text);
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.ec-showcase-copy h3 {
+  margin-top: 1rem;
+  font-size: clamp(2.25rem, 4vw, 4.4rem);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.055em;
+}
+.ec-showcase-copy p {
+  margin-top: 1.3rem;
+  color: var(--ec-muted);
+  line-height: 1.75;
+}
+.ec-showcase-copy a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  color: var(--ec-accent-text);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+.ec-gif-frame {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: 1px solid var(--ec-line);
+  border-radius: 1.7rem;
+  background: #080b10;
+  box-shadow: 0 28px 70px rgb(3 10 24 / 0.16);
+}
+.ec-gif-frame::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+}
+.ec-gif-blue {
+  box-shadow: 0 28px 80px rgb(37 99 235 / 0.14);
+}
+.ec-gif-indigo {
+  box-shadow: 0 28px 80px rgb(79 70 229 / 0.14);
+}
+.ec-gif-sky {
+  box-shadow: 0 28px 80px rgb(14 165 233 / 0.14);
+}
+.ec-mini-gallery {
+  display: grid;
+  gap: 1rem;
+  margin-top: 9rem;
+}
+.ec-mini-card {
+  overflow: hidden;
+  border: 1px solid var(--ec-line);
+  border-radius: 1.25rem;
+  background: var(--ec-panel);
+}
+.ec-mini-image {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  background: #080b10;
+}
+.ec-mini-card > div:last-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1rem;
+  color: var(--ec-muted);
+  font-size: 0.7rem;
+}
+.ec-mini-card svg {
+  color: var(--ec-accent-text);
+}
+.ec-config-section {
+  display: grid;
+  align-items: center;
+  gap: clamp(3rem, 8vw, 8rem);
+  padding-block: 10rem;
+}
+.ec-config-copy {
+  max-width: 34rem;
+}
+.ec-config-copy h2 {
+  margin-top: 1.4rem;
+  font-size: clamp(2.7rem, 5vw, 5.3rem);
+  font-weight: 600;
+  line-height: 0.97;
+  letter-spacing: -0.06em;
+}
+.ec-config-copy > p {
+  margin-top: 1.4rem;
+  color: var(--ec-muted);
+  line-height: 1.75;
+}
+.ec-config-copy ul {
+  display: grid;
+  gap: 0.8rem;
+  margin-top: 2rem;
+}
+.ec-config-copy li {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: var(--ec-muted);
+  font-size: 0.78rem;
+}
+.ec-config-copy li svg {
+  color: var(--ec-accent-text);
+}
+.ec-config-preview {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--ec-line);
+  border-radius: 1.5rem;
+  background: var(--ec-code);
+  box-shadow: 0 35px 85px rgb(3 10 24 / 0.2);
+}
+.ec-config-window-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgb(255 255 255 / 0.1);
+  padding: 0.9rem 1rem;
+  color: rgb(255 255 255 / 0.45);
+  font-family: var(--font-jetbrains-mono), monospace;
+  font-size: 0.6rem;
+}
+.ec-config-code {
+  height: 36rem;
+  overflow: hidden;
+  padding: 1rem;
+  mask-image: linear-gradient(to bottom, black 76%, transparent);
+}
+.ec-config-code pre {
+  margin: 0 !important;
+  background: transparent !important;
+}
+.ec-project-cta {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 3rem;
+  margin-bottom: 8rem;
+  border-radius: 2rem;
+  padding: clamp(2rem, 6vw, 5rem);
+  background: linear-gradient(135deg, #2563eb, #4338ca);
+  color: white;
+}
+.ec-project-cta .section-kicker {
+  color: rgb(255 255 255 / 0.65);
+}
+.ec-project-cta .section-kicker span {
+  color: white;
+}
+.ec-project-cta h2 {
+  max-width: 52rem;
+  margin-top: 1.3rem;
+  font-size: clamp(2.7rem, 5vw, 5.5rem);
+  font-weight: 600;
+  line-height: 0.97;
+  letter-spacing: -0.06em;
+}
+.ec-project-cta-actions {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: 0.7rem;
+}
+.ec-project-cta .primary-action {
+  background: white;
+  color: #111827;
+}
+.ec-project-cta .secondary-action {
+  border-color: rgb(255 255 255 / 0.25);
+  color: white;
+}
+@media (min-width: 768px) {
+  .ec-capability-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .ec-mini-gallery {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1024px) {
+  .ec-project-hero-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(31rem, 0.85fr);
+  }
+  .ec-showcase-row {
+    grid-template-columns: 0.7fr 1.3fr;
+  }
+  .ec-showcase-reverse {
+    grid-template-columns: 1.3fr 0.7fr;
+  }
+  .ec-showcase-reverse .ec-showcase-copy {
+    order: 2;
+  }
+  .ec-showcase-reverse .ec-gif-frame {
+    order: 1;
+  }
+  .ec-config-section {
+    grid-template-columns: 0.75fr 1.25fr;
+  }
+}
+@media (max-width: 1023px) {
+  .ec-project-hero {
+    padding-top: 8rem;
+  }
+  .ec-project-visual {
+    max-width: none;
+    justify-self: stretch;
+  }
+  .ec-config-preview {
+    transform: none !important;
+  }
+  .ec-project-cta {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .ec-project-cta-actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+@media (max-width: 640px) {
+  .ec-project-copy h1 {
+    font-size: clamp(3.3rem, 15vw, 5rem);
+  }
+  .ec-capabilities,
+  .ec-showcase-section,
+  .ec-config-section {
+    padding-block: 6rem;
+  }
+  .ec-showcase-list {
+    gap: 6rem;
+    margin-top: 5rem;
+  }
+  .ec-mini-gallery {
+    margin-top: 6rem;
+  }
+  .ec-config-code {
+    height: 30rem;
+  }
+  .ec-project-scroll {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ec-project-copy,
+  .ec-project-visual,
+  .ec-config-preview {
+    transform: none !important;
+  }
+}
+
+/* Clean community CTA */
+.cta-panel-clean {
+  position: relative;
+  overflow: visible;
+  align-items: end;
+  background: linear-gradient(135deg, #2563eb, #4338ca);
+  color: white;
+}
+.cta-wumpus-column {
+  display: flex;
+  width: 13rem;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  align-self: stretch;
+  justify-content: flex-end;
+}
+.cta-wumpus {
+  position: relative;
+  display: grid;
+  width: 13.25rem;
+  height: 15.25rem;
+  margin-top: -3rem;
+  place-items: end center;
+}
+.cta-wumpus-glow {
+  position: absolute;
+  right: 1.75rem;
+  bottom: 1rem;
+  left: 1.75rem;
+  height: 3.75rem;
+  border-radius: 50%;
+  background: rgb(96 165 250 / 0.62);
+  filter: blur(28px);
+  transition:
+    transform 0.35s ease,
+    opacity 0.35s ease;
+}
+.cta-wumpus-image {
+  position: relative;
+  z-index: 1;
+  width: auto;
+  height: 15.75rem;
+  object-fit: contain;
+  filter: drop-shadow(0 18px 22px rgb(15 23 42 / 0.22));
+  transform: translateY(-0.9rem) rotate(-1deg);
+  transform-origin: 50% 80%;
+  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.cta-wumpus:hover .cta-wumpus-image {
+  transform: translateY(-1.35rem) rotate(1.5deg) scale(1.025);
+}
+.cta-wumpus:hover .cta-wumpus-glow {
+  opacity: 0.9;
+  transform: scale(1.12);
+}
+.cta-button-clean {
+  width: 100%;
+  min-width: 12rem;
+  justify-content: center;
+  background: white;
+  color: #172554;
+  box-shadow: 0 14px 35px rgb(15 23 42 / 0.2);
+}
+.cta-button-clean:hover {
+  background: #eff6ff;
+  transform: translateY(-2px);
+}
+
+/* EternalCore minimal pass */
+.ec-project-hero::before {
+  width: 38rem;
+  height: 38rem;
+  opacity: 0.65;
+}
+.ec-project-banner-frame {
+  border-radius: 1.25rem;
+  box-shadow: 0 24px 60px rgb(3 10 24 / 0.12);
+}
+.ec-project-banner-overlay,
+.ec-project-banner-chip {
+  display: none;
+}
+.ec-capabilities {
+  padding-block: 7rem;
+}
+.ec-capability {
+  min-height: 12rem;
+}
+.ec-showcase-section {
+  padding-block: 7rem;
+  background: var(--ec-bg);
+}
+.ec-showcase-list {
+  gap: 7rem;
+  margin-top: 5rem;
+}
+.ec-showcase-row {
+  padding-block: 1rem;
+}
+.ec-gif-frame {
+  border-radius: 1.25rem;
+  box-shadow: none;
+}
+.ec-gif-blue,
+.ec-gif-indigo,
+.ec-gif-sky {
+  box-shadow: none;
+}
+.ec-mini-gallery {
+  display: none;
+}
+.ec-config-section {
+  padding-block: 8rem;
+}
+.ec-config-preview {
+  border-radius: 1.25rem;
+  box-shadow: 0 24px 60px rgb(3 10 24 / 0.14);
+}
+.ec-project-cta {
+  margin-bottom: 7rem;
+  border: 1px solid var(--ec-line);
+  background: var(--ec-panel);
+  color: var(--ec-text);
+}
+.ec-project-cta .section-kicker {
+  color: var(--ec-muted);
+}
+.ec-project-cta .section-kicker span {
+  color: var(--ec-accent-text);
+}
+.ec-project-cta .primary-action {
+  background: var(--ec-accent);
+  color: var(--ec-accent-ink);
+}
+.ec-project-cta .secondary-action {
+  border-color: var(--ec-line);
+  color: var(--ec-muted);
+}
+@media (max-width: 767px) {
+  .cta-panel-clean {
+    align-items: flex-start;
+  }
+  .cta-wumpus-column {
+    width: 100%;
+  }
+  .cta-wumpus {
+    width: 11.5rem;
+    height: 12.75rem;
+    margin-top: -1rem;
+  }
+  .cta-wumpus-image {
+    height: 13.25rem;
+  }
+  .cta-button-clean {
+    width: 100%;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 8054d389..eeaddaf3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from "next";
-import { JetBrains_Mono, Poppins } from "next/font/google";
+import { JetBrains_Mono, Manrope } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import "./globals.css";
 import "lenis/dist/lenis.css";
@@ -15,13 +15,12 @@ import { Providers } from "./providers";
 export const dynamic = "force-static";
 export const revalidate = 5;
 
-const poppins = Poppins({
-  weight: ["400", "500", "600", "700"],
+const manrope = Manrope({
   subsets: ["latin"],
   display: "swap",
   preload: true,
   fallback: ["system-ui", "arial"],
-  variable: "--font-poppins",
+  variable: "--font-manrope",
 });
 
 const jetbrainsMono = JetBrains_Mono({
@@ -36,8 +35,8 @@ export const viewport: Viewport = {
   maximumScale: 5,
   userScalable: true,
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#eff1f5" },
-    { media: "(prefers-color-scheme: dark)", color: "#0d1117" },
+    { media: "(prefers-color-scheme: light)", color: "#0b0d0c" },
+    { media: "(prefers-color-scheme: dark)", color: "#0b0d0c" },
   ],
 };
 
@@ -108,12 +107,12 @@ export default function RootLayout({
 }>) {
   return (
     <html
-      className={`${poppins.variable} ${jetbrainsMono.variable}`}
+      className={`${manrope.variable} ${jetbrainsMono.variable}`}
       lang="en"
       suppressHydrationWarning
     >
       <body
-        className={`${poppins.className} relative min-h-screen overflow-x-hidden bg-light-gray-100 antialiased dark:bg-gray-900`}
+        className={`${manrope.className} relative min-h-screen overflow-x-hidden bg-[var(--ec-bg)] text-[var(--ec-text)] antialiased`}
       >
         <OrganizationSchema />
         <Providers>
@@ -124,7 +123,7 @@ export default function RootLayout({
             easing="ease"
             height={3}
             initialPosition={0.08}
-            shadow="0 0 10px #3b82f6,0 0 5px #3b82f6"
+            shadow="0 0 10px #3b82f6"
             showSpinner={false}
             speed={200}
           />
@@ -132,7 +131,7 @@ export default function RootLayout({
             <Navbar />
           </header>
 
-          <main className="pt-20" id="main-content" tabIndex={-1}>
+          <main id="main-content" tabIndex={-1}>
             {children}
           </main>
 
diff --git a/app/notification-generator/page.tsx b/app/notification-generator/page.tsx
index d1245b4b..37422c6f 100644
--- a/app/notification-generator/page.tsx
+++ b/app/notification-generator/page.tsx
@@ -62,7 +62,7 @@ export default function NotificationGeneratorPage() {
     <MotionSection className="w-full">
       <div className="mb-12 text-center">
         <SlideIn delay={0.1} direction="down">
-          <h1 className="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text font-extrabold text-4xl text-transparent tracking-tight md:text-6xl dark:from-white dark:to-gray-300">
+          <h1 className="font-semibold text-5xl text-[var(--ec-text)] tracking-[-0.06em] md:text-7xl">
             Notification Generator
           </h1>
         </SlideIn>
diff --git a/app/projects/eternalcombat/page.tsx b/app/projects/eternalcombat/page.tsx
index 365a298e..3b39e63c 100644
--- a/app/projects/eternalcombat/page.tsx
+++ b/app/projects/eternalcombat/page.tsx
@@ -20,12 +20,12 @@ export default function EternalCombatPage() {
   const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.95]);
 
   return (
-    <div className="relative min-h-screen bg-white text-gray-900 selection:bg-red-500/30 dark:bg-gray-950 dark:text-white">
+    <div className="relative min-h-screen bg-[var(--ec-bg)] text-[var(--ec-text)] selection:bg-red-500/30">
       {/* Background Decor */}
       <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
         <FacadePattern className="absolute inset-0 h-full opacity-30 dark:opacity-10" />
         <div className="absolute top-0 right-0 h-[500px] w-[500px] rounded-full bg-red-500/5 p-20 mix-blend-multiply blur-[100px] dark:mix-blend-screen" />
-        <div className="absolute top-20 left-0 h-[400px] w-[400px] rounded-full bg-orange-500/5 p-20 mix-blend-multiply blur-[100px] dark:mix-blend-screen" />
+        <div className="absolute top-20 left-0 h-[400px] w-[400px] rounded-full bg-sky-500/5 p-20 mix-blend-multiply blur-[100px] dark:mix-blend-screen" />
       </div>
 
       <div className="relative z-10 mx-auto max-w-[90rem] px-4 sm:px-6 lg:px-8" ref={targetRef}>
@@ -42,9 +42,9 @@ export default function EternalCombatPage() {
                   <Swords className="h-3 w-3" />
                   PvP Evolved
                 </div>
-                <h1 className="mb-6 font-extrabold text-4xl text-gray-900 leading-[1.1] tracking-tight md:text-5xl lg:text-6xl dark:text-white">
+                <h1 className="mb-6 font-extrabold text-4xl text-[var(--ec-text)] leading-[1.1] tracking-tight md:text-5xl lg:text-6xl">
                   Combat Logging, <br />
-                  <span className="bg-gradient-to-r from-red-500 via-orange-500 to-red-500 bg-clip-text text-transparent">
+                  <span className="bg-gradient-to-r from-red-500 via-sky-500 to-red-500 bg-clip-text text-transparent">
                     Solved Forever.
                   </span>
                 </h1>
@@ -103,7 +103,7 @@ export default function EternalCombatPage() {
                   <div className="hidden h-8 w-px bg-gray-200 sm:block dark:bg-gray-800" />
 
                   <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-100 text-yellow-600 dark:bg-yellow-500/10 dark:text-yellow-500">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-500">
                       <motion.div
                         animate={{ opacity: [1, 0.6, 1], scale: [1, 1.05, 1] }}
                         transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY }}
@@ -132,8 +132,8 @@ export default function EternalCombatPage() {
                   <div className="w-full max-w-lg transform-gpu rounded-xl border border-gray-700/50 bg-gray-900/90 p-6 shadow-2xl backdrop-blur-sm transition-transform duration-500 will-change-transform hover:scale-[1.02]">
                     <div className="mb-4 flex items-center gap-2 border-gray-700/50 border-b pb-2">
                       <div className="h-3 w-3 rounded-full bg-red-500" />
-                      <div className="h-3 w-3 rounded-full bg-yellow-500" />
-                      <div className="h-3 w-3 rounded-full bg-green-500" />
+                      <div className="h-3 w-3 rounded-full bg-indigo-500" />
+                      <div className="h-3 w-3 rounded-full bg-blue-500" />
                       <div className="ml-2 font-mono text-gray-400 text-xs">latest.txt</div>
                     </div>
                     <div className="font-mono text-gray-400 text-sm leading-relaxed">
@@ -145,7 +145,7 @@ export default function EternalCombatPage() {
                       </div>
                       <div>
                         <span className="text-gray-500">[19:23:01]</span>{" "}
-                        <span className="bg-gradient-to-r from-red-500 to-yellow-500 bg-clip-text font-bold text-transparent">
+                        <span className="bg-gradient-to-r from-red-500 to-indigo-500 bg-clip-text font-bold text-transparent">
                           ⚠ You are in combat!
                         </span>{" "}
                         <span className="text-white underline decoration-1 decoration-white/30 underline-offset-2">
@@ -153,7 +153,7 @@ export default function EternalCombatPage() {
                         </span>
                       </div>
                       <div className="my-2 text-gray-500">...</div>
-                      <div className="text-yellow-400">
+                      <div className="text-indigo-400">
                         <span className="text-gray-500">[19:23:45]</span> vLucky tried to
                         disconnect.
                       </div>
diff --git a/app/projects/eternalcore/page.tsx b/app/projects/eternalcore/page.tsx
index ec290222..8f95c8b7 100644
--- a/app/projects/eternalcore/page.tsx
+++ b/app/projects/eternalcore/page.tsx
@@ -1,317 +1,239 @@
 "use client";
 
-import { m, motion, useScroll, useTransform } from "framer-motion";
-import { Book, Check, ChevronRight, Download, Layers, Settings, Zap } from "lucide-react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import {
+  ArrowDownRight,
+  ArrowRight,
+  BookOpen,
+  Box,
+  Check,
+  Download,
+  Github,
+  Layers3,
+  MessagesSquare,
+  Settings2,
+  ShieldCheck,
+  Zap,
+} from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 import { useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { FacadePattern } from "@/components/ui/facade-pattern";
-import { FadeIn, MotionSection, ScaleIn, SlideIn } from "@/components/ui/motion/motion-components";
-import { slideUp } from "@/lib/animations/variants";
-import netlifyImageLoader from "@/lib/netlify-image-loader";
-
 import { ConfigPreview } from "./config-preview";
-import { EternalShowcase } from "./eternal-showcase";
+
+const capabilities = [
+  { icon: Box, value: "80+", label: "commands without legacy baggage" },
+  { icon: Zap, value: "Paper", label: "built for the modern server stack" },
+  { icon: Layers3, value: "Folia", label: "region-aware from the beginning" },
+  { icon: ShieldCheck, value: "OSS", label: "inspect it, change it, ship it" },
+];
+
+const showcases = [
+  {
+    eyebrow: "Homes",
+    title: "Teleportation that feels predictable.",
+    description:
+      "Named homes, permission-based limits and clear feedback for players. Useful defaults first; configuration when you need it.",
+    image: "/docs/eternalcore/homes/sethome.gif",
+    accent: "blue",
+  },
+  {
+    eyebrow: "Communication",
+    title: "Messages people can actually read.",
+    description:
+      "Private messages, broadcasts and admin channels with modern formatting—without assembling a small novel of nested builders.",
+    image: "/docs/eternalcore/adminchat-channel.gif",
+    accent: "sky",
+  },
+];
 
 export default function EternalCorePage() {
-  const targetRef = useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: targetRef,
+  const heroRef = useRef<HTMLElement>(null);
+  const configRef = useRef<HTMLElement>(null);
+  const { scrollYProgress: heroProgress } = useScroll({
+    target: heroRef,
     offset: ["start start", "end start"],
   });
-
-  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
-  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.95]);
+  const { scrollYProgress: configProgress } = useScroll({
+    target: configRef,
+    offset: ["start end", "end start"],
+  });
+  const heroY = useTransform(heroProgress, [0, 1], [0, 120]);
+  const heroScale = useTransform(heroProgress, [0, 0.8], [1, 0.94]);
+  const configY = useTransform(configProgress, [0, 1], [70, -70]);
 
   return (
-    <div className="relative min-h-screen bg-gray-50 text-gray-900 selection:bg-[#9d6eef]/30 dark:bg-gray-950 dark:text-white">
-      {/* Background Decor */}
-      <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
-        <div className="absolute top-0 right-0 h-[600px] w-[600px] translate-x-1/3 -translate-y-1/4 rounded-full bg-[#9d6eef]/20 blur-3xl filter dark:bg-[#9d6eef]/10" />
-        <div className="absolute top-[40%] left-0 h-[600px] w-[600px] -translate-x-1/3 rounded-full bg-[#d946ef]/20 mix-blend-multiply blur-3xl filter dark:bg-[#d946ef]/10 dark:mix-blend-screen" />
-        <div className="absolute right-0 bottom-20 h-[600px] w-[600px] translate-x-1/3 rounded-full bg-[#8b5cf6]/20 mix-blend-multiply blur-3xl filter dark:bg-[#8b5cf6]/10 dark:mix-blend-screen" />
-        <FacadePattern className="absolute inset-0 h-full opacity-30 dark:opacity-10" />
-      </div>
-
-      <div className="relative z-10 mx-auto max-w-[90rem] px-4 sm:px-6 lg:px-8" ref={targetRef}>
-        {/* Hero Section */}
-        <section className="pt-32 pb-20 md:pt-48 md:pb-32">
-          <motion.div
-            className="relative flex flex-col items-center gap-12 lg:flex-row lg:gap-16"
-            style={{ opacity, scale }}
-          >
-            {/* Text Content */}
-            <div className="flex-1 text-center lg:text-left">
-              <MotionSection className="flex flex-col items-center lg:items-start">
-                <m.div variants={slideUp}>
-                  <div className="mb-6 inline-flex items-center gap-2 rounded-full bg-[#9d6eef]/5 px-3 py-1 font-bold text-[#9d6eef] text-[10px] uppercase tracking-widest">
-                    <Zap className="h-3 w-3" />
-                    Next-Gen Essentials
-                  </div>
-                </m.div>
-
-                <m.div variants={slideUp}>
-                  <h1 className="mb-6 font-extrabold text-4xl text-gray-900 tracking-tight md:text-5xl lg:text-6xl dark:text-white">
-                    Essential commands.
-                    <br />
-                    <span className="bg-gradient-to-r from-[#9d6eef] via-[#A1AAFF] to-[#9d6eef] bg-clip-text text-transparent">
-                      Uncompromised performance.
-                    </span>
-                  </h1>
-                </m.div>
-
-                <m.div variants={slideUp}>
-                  <p className="mx-auto mb-8 max-w-2xl text-gray-600 text-lg leading-relaxed lg:mx-0 dark:text-gray-400">
-                    EternalCore is a modern, open-source replacement for EssentialsX. Built for
-                    Paper & Folia to deliver maximum performance without the legacy bloat.
-                  </p>
-                </m.div>
-
-                <m.div
-                  className="flex flex-col justify-center gap-4 sm:flex-row lg:justify-start"
-                  variants={slideUp}
-                >
-                  <Button
-                    className="bg-[#9d6eef] text-white shadow-purple-500/25 hover:bg-[#854ce6] dark:bg-[#9d6eef] dark:hover:bg-[#854ce6]"
-                    href="/builds?project=eternalcore"
-                    leftIcon={<Download className="h-4 w-4" />}
-                    shine
-                    variant="primary"
-                  >
-                    Download
-                  </Button>
-
-                  <Button
-                    href="https://eternalcode.pl/docs"
-                    leftIcon={<Book className="h-4 w-4" />}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    variant="outline"
-                  >
-                    Documentation
-                  </Button>
-                </m.div>
-              </MotionSection>
+    <div className="ec-project-page">
+      <section className="ec-project-hero" ref={heroRef}>
+        <div className="hero-grid" />
+        <div className="section-shell ec-project-hero-layout">
+          <motion.div className="ec-project-copy" style={{ y: heroY }}>
+            <div className="eyebrow">EternalCore · Open source Minecraft plugin</div>
+            <h1>
+              Everything your server needs.
+              <span> Nothing it does not.</span>
+            </h1>
+            <p>
+              A modern essentials plugin for Paper and Folia. Commands, homes, moderation, chat and
+              everyday server tools—designed as one coherent experience.
+            </p>
+            <div className="ec-project-actions">
+              <Link className="primary-action" href="/builds?project=eternalcore">
+                <Download className="h-4 w-4" /> Download EternalCore
+              </Link>
+              <Link className="secondary-action" href="/docs/eternalcore">
+                <BookOpen className="h-4 w-4" /> Read documentation
+              </Link>
             </div>
-
-            {/* Project Banner Placeholder */}
-            <div className="w-full max-w-xl flex-1 lg:max-w-none">
-              <ScaleIn delay={0.2}>
-                <div className="group relative aspect-video overflow-hidden rounded-2xl border border-gray-200 bg-gray-100 shadow-2xl dark:border-gray-800 dark:bg-gray-900">
-                  <Image
-                    alt="EternalCore Project Banner"
-                    className="transform-gpu object-cover transition-transform duration-700 will-change-transform group-hover:scale-105"
-                    fetchPriority="high"
-                    fill
-                    loader={netlifyImageLoader}
-                    priority
-                    sizes="(max-width: 1024px) 100vw, 50vw"
-                    src="/eternalcore/readme-banner.png"
-                  />
-                  <div className="pointer-events-none absolute inset-0 bg-linear-to-tr from-blue-500/10 via-transparent to-purple-500/10 mix-blend-overlay" />
-                </div>
-              </ScaleIn>
+            <div className="ec-project-note">
+              <Check className="h-4 w-4" /> Free, open source and not followed by an enterprise
+              pricing call.
             </div>
           </motion.div>
-        </section>
 
-        {/* Features Section */}
-        <section className="border-gray-100 border-t py-24 dark:border-gray-800/50">
-          <div className="mx-auto mb-16 max-w-3xl text-center">
-            <FadeIn>
-              <h2 className="mb-4 font-bold text-3xl tracking-tight md:text-4xl">
-                The core of your network.
-              </h2>
-              <p className="text-gray-600 text-lg dark:text-gray-400">
-                Everything you need to run a professional server, available for free.
-              </p>
-            </FadeIn>
+          <motion.div className="ec-project-visual" style={{ scale: heroScale }}>
+            <div className="ec-project-banner-frame">
+              <Image
+                alt="EternalCore project banner"
+                className="object-cover"
+                fill
+                priority
+                sizes="(max-width: 1024px) 100vw, 48vw"
+                src="/eternalcore/readme-banner.png"
+              />
+              <div className="ec-project-banner-overlay" />
+            </div>
+          </motion.div>
+        </div>
+        <a className="ec-project-scroll" href="#capabilities">
+          See it in action <ArrowDownRight className="h-4 w-4" />
+        </a>
+      </section>
+
+      <section className="section-shell ec-capabilities" id="capabilities">
+        <div className="ec-section-intro">
+          <div className="section-kicker">
+            <span>01</span> One plugin, one consistent system
+          </div>
+          <h2>Essentials rebuilt for how servers run today.</h2>
+          <p>
+            EternalCore replaces a patchwork of utilities with a focused foundation that is easier
+            to operate, easier to configure and easier to extend.
+          </p>
+        </div>
+        <div className="ec-capability-grid">
+          {capabilities.map((item) => {
+            const Icon = item.icon;
+            return (
+              <div className="ec-capability" key={item.value}>
+                <Icon className="h-5 w-5" />
+                <strong>{item.value}</strong>
+                <span>{item.label}</span>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="ec-showcase-section">
+        <div className="section-shell">
+          <div className="ec-section-intro ec-section-intro-wide">
+            <div className="section-kicker">
+              <span>02</span> Real features, not mockups
+            </div>
+            <h2>Watch the plugin work.</h2>
+            <p>Two everyday workflows, shown exactly as players and administrators use them.</p>
           </div>
 
-          <MotionSection className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-            {[
-              {
-                title: "80+ Commands",
-                description:
-                  "From essential administration to fun mechanics, we have covered every use case you can imagine.",
-                icon: Layers,
-                iconColor: "text-purple-500",
-                gradient: "from-purple-500/20 to-indigo-500/20",
-              },
-              {
-                title: "Open Source & Free",
-                description:
-                  "EternalCore is and will always be free. Inspect the code, contribute, and build with confidence.",
-                icon: Download,
-                iconColor: "text-green-500",
-                gradient: "from-green-500/20 to-emerald-500/20",
-              },
-              {
-                title: "Paper & Folia",
-                description:
-                  "Built specifically for modern server software. 100% async and optimized for high-performance.",
-                icon: Zap,
-                iconColor: "text-yellow-500",
-                gradient: "from-yellow-500/20 to-orange-500/20",
-              },
-              {
-                title: "Rich Formatting",
-                description:
-                  "Full support for modern MiniMessage <gradients> and legacy &c&lcolor codes simultaneously.",
-                icon: Check,
-                iconColor: "text-blue-500",
-                gradient: "from-blue-500/20 to-cyan-500/20",
-              },
-            ].map((feature) => (
-              <m.div className="h-full" key={feature.title} variants={slideUp}>
-                <Card className="group relative flex h-full transform-gpu flex-col p-6 transition-all will-change-transform hover:-translate-y-1 hover:bg-gray-50 hover:shadow-lg dark:hover:bg-gray-800/60">
-                  <div
-                    className={`absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${feature.gradient} pointer-events-none`}
+          <div className="ec-showcase-list">
+            {showcases.map((showcase, index) => (
+              <article
+                className={`ec-showcase-row ${index % 2 ? "ec-showcase-reverse" : ""}`}
+                key={showcase.title}
+              >
+                <div className="ec-showcase-copy">
+                  <span>{showcase.eyebrow}</span>
+                  <h3>{showcase.title}</h3>
+                  <p>{showcase.description}</p>
+                  <Link href="/docs/eternalcore">
+                    Explore this feature <ArrowRight className="h-4 w-4" />
+                  </Link>
+                </div>
+                <motion.div
+                  className={`ec-gif-frame ec-gif-${showcase.accent}`}
+                  initial={{ opacity: 0, y: 30 }}
+                  transition={{ duration: 0.55 }}
+                  viewport={{ once: true, margin: "-80px" }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                >
+                  <Image
+                    alt={`${showcase.eyebrow} feature demonstration`}
+                    className="object-cover"
+                    fill
+                    sizes="(max-width: 1024px) 100vw, 58vw"
+                    src={showcase.image}
+                    unoptimized
                   />
-
-                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gray-50 shadow-inner ring-1 ring-gray-200 transition-colors group-hover:bg-white dark:bg-gray-800 dark:ring-gray-700 dark:group-hover:bg-gray-700">
-                    <feature.icon
-                      className={`h-6 w-6 transform-gpu transition-transform duration-300 will-change-transform group-hover:scale-110 ${feature.iconColor}`}
-                    />
-                  </div>
-                  <h3 className="mb-2 font-bold text-gray-900 text-lg dark:text-white">
-                    {feature.title}
-                  </h3>
-                  <p className="text-gray-600 text-sm leading-relaxed dark:text-gray-400">
-                    {feature.description}
-                  </p>
-                </Card>
-              </m.div>
+                </motion.div>
+              </article>
             ))}
-          </MotionSection>
-        </section>
-      </div>
-
-      <EternalShowcase />
-
-      <div className="relative z-10 mx-auto max-w-[90rem] px-4 sm:px-6 lg:px-8">
-        {/* Configuration Section */}
-        <section className="border-gray-100 border-t py-24 dark:border-gray-800/50">
-          <div className="grid items-center gap-16 lg:grid-cols-2">
-            <SlideIn direction="left">
-              <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-[#9d6eef]/5 px-3 py-1 font-bold text-[#9d6eef] text-[10px] uppercase tracking-widest">
-                <Settings className="h-3 w-3" />
-                Configuration
-              </div>
-              <h2 className="mb-6 font-bold text-3xl tracking-tight md:text-4xl">
-                Configuration <br />
-                <span className="text-[#9d6eef]">Done Right.</span>
-              </h2>
-              <p className="mb-8 text-gray-600 text-lg leading-relaxed dark:text-gray-400">
-                Forget about guessing property names. EternalCore uses a strongly-typed
-                configuration system that ensures your settings are always valid and automatically
-                up-to-date.
-              </p>
-              <ul className="mb-8 space-y-4">
-                {[
-                  "Automatic config updates",
-                  "Detailed comments generated automatically",
-                  "Reload-safe architecture",
-                ].map((item) => (
-                  <li className="flex items-center gap-3" key={item}>
-                    <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-[#9d6eef]/10 text-[#9d6eef]">
-                      <Check className="h-3 w-3" />
-                    </div>
-                    <span className="font-medium text-gray-700 dark:text-gray-300">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </SlideIn>
-
-            <SlideIn delay={0.2} direction="right">
-              <div className="group relative">
-                {/* The "Long Screenshot" Container */}
-                <div className="relative h-[600px] w-full transform-gpu select-none overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl transition-transform duration-700 will-change-transform hover:scale-[1.02] dark:border-gray-800 dark:bg-[#0d1117]">
-                  {/* Window Controls */}
-                  <div className="absolute top-0 right-0 left-0 z-20 flex items-center gap-2 border-gray-100 border-b bg-white/80 px-4 py-3 backdrop-blur-md dark:border-white/5 dark:bg-gray-900/80">
-                    <div className="flex gap-1.5">
-                      <div className="h-3 w-3 rounded-full border border-red-400/40 bg-red-400/20" />
-                      <div className="h-3 w-3 rounded-full border border-yellow-400/40 bg-yellow-400/20" />
-                      <div className="h-3 w-3 rounded-full border border-green-400/40 bg-green-400/20" />
-                    </div>
-                    <div className="ml-4 flex items-center gap-2 font-mono text-[10px] text-gray-400 uppercase tracking-widest">
-                      <span>eternalcore</span>
-                      <ChevronRight className="h-3 w-3 opacity-50" />
-                      <span className="text-[#9d6eef]">config.yml</span>
-                    </div>
-                  </div>
-
-                  {/* Tilted Content */}
-                  {/* Content Container (Standard, non-tilted) */}
-                  <div className="absolute inset-0 h-full w-full overflow-hidden pt-12">
-                    {/* Inner blur container */}
-                    <div className="h-full opacity-90 blur-[0.5px] filter transition-all duration-700 group-hover:opacity-100 group-hover:blur-0">
-                      {/* Auto-scrolling animation container */}
-                      <div className="animate-scroll-y">
-                        <ConfigPreview />
-                        {/* Duplicate content for seamless loop */}
-                        <ConfigPreview />
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Gradient overlay to fade bottom */}
-                  <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-40 bg-gradient-to-t from-white to-transparent dark:from-[#0d1117]" />
+          </div>
+        </div>
+      </section>
 
-                  {/* Animation Styles */}
-                  <style jsx>{`
-                    @keyframes scroll-y {
-                        0% { transform: translateY(0); }
-                        100% { transform: translateY(-50%); }
-                    }
-                    .animate-scroll-y {
-                        animation: scroll-y 60s linear infinite;
-                    }
-                    .animate-scroll-y:hover {
-                        animation-play-state: paused;
-                    }
-                  `}</style>
-                </div>
-              </div>
-            </SlideIn>
+      <section className="section-shell ec-config-section" ref={configRef}>
+        <div className="ec-config-copy">
+          <div className="section-kicker">
+            <span>03</span> Configuration without archaeology
           </div>
-        </section>
+          <h2>Detailed when you need it. Sensible before you touch it.</h2>
+          <p>
+            Start with useful defaults, then tune homes, chat, databases, cooldowns and server
+            behavior from one readable configuration.
+          </p>
+          <ul>
+            <li>
+              <Settings2 className="h-4 w-4" /> Human-readable YAML
+            </li>
+            <li>
+              <MessagesSquare className="h-4 w-4" /> English and Polish messages
+            </li>
+            <li>
+              <ShieldCheck className="h-4 w-4" /> SQLite, MySQL, MariaDB and PostgreSQL
+            </li>
+          </ul>
+        </div>
+        <motion.div className="ec-config-preview" style={{ y: configY }}>
+          <div className="ec-config-window-bar">
+            <span>config.yml</span>
+            <span>EternalCore / main</span>
+          </div>
+          <div className="ec-config-code">
+            <ConfigPreview />
+          </div>
+        </motion.div>
+      </section>
 
-        {/* Footer CTA */}
-        <section className="border-gray-100 border-t py-32 text-center dark:border-gray-800/50">
-          <FadeIn>
-            <h2 className="mb-6 font-bold text-3xl tracking-tight md:text-4xl">
-              Ready to upgrade your server?
-            </h2>
-            <p className="mx-auto mb-10 max-w-2xl text-gray-600 text-lg dark:text-gray-400">
-              Join hundreds of servers already using EternalCore for a more stable and efficient
-              experience.
-            </p>
-            <div className="flex flex-wrap justify-center gap-4">
-              <Button
-                className="min-w-[160px] bg-[#9d6eef] text-white hover:bg-[#854ce6] dark:bg-[#9d6eef] dark:hover:bg-[#854ce6]"
-                href="/projects/eternalcore/downloads"
-                shine
-                size="lg"
-                variant="primary"
-              >
-                Get Started
-              </Button>
-              <Button
-                className="min-w-[160px]"
-                href="https://github.com/EternalCodeTeam/EternalCore"
-                rel="noopener noreferrer"
-                size="lg"
-                target="_blank"
-                variant="outline"
-              >
-                View Source
-              </Button>
-            </div>
-          </FadeIn>
-        </section>
-      </div>
+      <section className="section-shell ec-project-cta">
+        <div>
+          <div className="section-kicker">
+            <span>04</span> Ready when your server is
+          </div>
+          <h2>Replace the essentials pile with one modern core.</h2>
+        </div>
+        <div className="ec-project-cta-actions">
+          <Link className="primary-action" href="/builds?project=eternalcore">
+            Download latest build <Download className="h-4 w-4" />
+          </Link>
+          <a
+            className="secondary-action"
+            href="https://github.com/EternalCodeTeam/EternalCore"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Github className="h-4 w-4" /> View source
+          </a>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/components/builds/build-header.tsx b/components/builds/build-header.tsx
index b9668752..1fd40371 100644
--- a/components/builds/build-header.tsx
+++ b/components/builds/build-header.tsx
@@ -4,12 +4,18 @@ export function BuildHeader() {
   return (
     <div className="mb-12 text-center">
       <FadeIn>
-        <h1 className="mb-4 text-balance bg-gradient-to-r from-gray-900 via-blue-800 to-indigo-900 bg-clip-text font-extrabold text-4xl text-transparent dark:from-white dark:via-blue-100 dark:to-indigo-200">
+        <div className="section-kicker mb-6 justify-center">
+          <span>Releases</span> Distribution center
+        </div>
+        <h1 className="mb-4 text-balance font-semibold text-5xl text-[var(--ec-text)] tracking-[-.06em] sm:text-6xl">
           Build Explorer
         </h1>
         <p className="mx-auto mb-8 max-w-lg text-gray-600 dark:text-gray-400">
           Access stable releases and development builds for all our projects.
         </p>
+        <p className="font-mono text-[11px] text-[var(--ec-faint)]">
+          Stable means tested. Dev means you enjoy surprises.
+        </p>
       </FadeIn>
     </div>
   );
diff --git a/components/builds/build-row.tsx b/components/builds/build-row.tsx
index e4102435..045e3412 100644
--- a/components/builds/build-row.tsx
+++ b/components/builds/build-row.tsx
@@ -26,8 +26,8 @@ function BuildStatusBadge({ type }: { type: "STABLE" | "DEV" }) {
     <div
       className={`hidden shrink-0 rounded-lg p-2 sm:flex ${
         type === "STABLE"
-          ? "bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400"
-          : "bg-orange-100 text-orange-600 dark:bg-orange-900/20 dark:text-orange-400"
+          ? "bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
+          : "bg-sky-100 text-sky-600 dark:bg-sky-900/20 dark:text-sky-400"
       }`}
     >
       {type === "STABLE" ? <Package className="h-4 w-4" /> : <GitBranch className="h-4 w-4" />}
diff --git a/components/contribute/contribute-hero.tsx b/components/contribute/contribute-hero.tsx
index b52ed2dc..7f26b793 100644
--- a/components/contribute/contribute-hero.tsx
+++ b/components/contribute/contribute-hero.tsx
@@ -4,17 +4,15 @@ import { MotionSection, SlideIn } from "@/components/ui/motion/motion-components
 
 export function ContributeHero() {
   return (
-    <section className="relative pt-32 pb-8 lg:pt-48 lg:pb-12">
+    <section className="relative pt-32 pb-12 lg:pt-44 lg:pb-16">
       <MotionSection className="relative z-10 mx-auto max-w-360 px-4 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-4xl text-center">
           <SlideIn delay={0.1} direction="up">
-            <h1 className="mb-6 font-bold text-4xl text-gray-900 leading-[1.1] tracking-tight sm:text-6xl dark:text-white">
-              Become an Open Source{" "}
-              <span className="relative inline-block">
-                <span className="bg-linear-to-r from-green-400 via-green-500 to-green-600 bg-clip-text pb-2 font-extrabold text-5xl text-transparent sm:text-7xl">
-                  Volunteer
-                </span>
-              </span>{" "}
+            <div className="section-kicker mb-7 justify-center">
+              <span>Contribute</span> Build in public
+            </div>
+            <h1 className="mb-6 font-semibold text-5xl text-[var(--ec-text)] leading-[.95] tracking-[-.065em] sm:text-7xl">
+              Make open source <span className="text-[var(--ec-accent-text)]">better with us.</span>
             </h1>
           </SlideIn>
 
diff --git a/components/contribute/contribution-card.tsx b/components/contribute/contribution-card.tsx
index ca1d4198..5f4cb017 100644
--- a/components/contribute/contribution-card.tsx
+++ b/components/contribute/contribution-card.tsx
@@ -38,7 +38,7 @@ export function ContributionCard({
 
   return (
     <m.div className="h-full" variants={itemVariants}>
-      <Card className="group flex h-full flex-col p-6 transition-colors duration-300 hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-800/60">
+      <Card className="group flex h-full flex-col p-6 transition-colors duration-300">
         <div
           className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100"
           style={{
diff --git a/components/docs/content/docs-header.tsx b/components/docs/content/docs-header.tsx
index 5d8dc661..e3720e0e 100644
--- a/components/docs/content/docs-header.tsx
+++ b/components/docs/content/docs-header.tsx
@@ -80,7 +80,7 @@ export function DocsHeader({ category, title, description, icon, actions }: DocH
         <div className="flex-1">
           <motion.h1
             animate={{ opacity: 1, y: 0 }}
-            className="mb-2 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text font-extrabold text-4xl text-transparent tracking-tight dark:from-white dark:via-gray-100 dark:to-white"
+            className="mb-2 font-semibold text-4xl text-[var(--ec-text)] tracking-[-0.045em]"
             initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 10 }}
             transition={{ delay: prefersReducedMotion ? 0 : 0.2 }}
           >
diff --git a/components/docs/eternalcore/placeholder/placeholder-table.tsx b/components/docs/eternalcore/placeholder/placeholder-table.tsx
index 1ae385af..ab71a5b5 100644
--- a/components/docs/eternalcore/placeholder/placeholder-table.tsx
+++ b/components/docs/eternalcore/placeholder/placeholder-table.tsx
@@ -57,7 +57,7 @@ export function PlaceholderTable({ placeholders }: PlaceholderTableProps) {
                     className={cn(
                       "rounded px-2 py-0.5 font-medium text-xs",
                       p.requiresPlayer
-                        ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300"
+                        ? "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300"
                         : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                     )}
                   >
diff --git a/components/docs/search/search-modal.tsx b/components/docs/search/search-modal.tsx
index c0958049..07a1ece9 100644
--- a/components/docs/search/search-modal.tsx
+++ b/components/docs/search/search-modal.tsx
@@ -45,7 +45,7 @@ const CATEGORY_BADGE_STYLES: Record<string, string> = {
   Multification:
     "bg-blue-100 text-blue-700 ring-blue-200 dark:bg-blue-500/20 dark:text-blue-200 dark:ring-blue-500/40",
   Contribute:
-    "bg-emerald-100 text-emerald-700 ring-emerald-200 dark:bg-emerald-500/20 dark:text-emerald-200 dark:ring-emerald-500/40",
+    "bg-sky-100 text-sky-700 ring-sky-200 dark:bg-sky-500/20 dark:text-sky-200 dark:ring-sky-500/40",
 };
 
 const DOCS_PREFIX_REGEX = /^\/docs\//;
diff --git a/components/docs/sidebar/doc-sidebar.tsx b/components/docs/sidebar/doc-sidebar.tsx
index 8bc3c609..71bdae48 100644
--- a/components/docs/sidebar/doc-sidebar.tsx
+++ b/components/docs/sidebar/doc-sidebar.tsx
@@ -75,7 +75,7 @@ const DocSidebar: FC<DocSidebarProps> = ({ className = "", onItemClick, sidebarS
               rotate: prefersReducedMotion ? 0 : 5,
             }}
           >
-            <BookOpen className="h-5 w-5 text-white" />
+            <BookOpen className="h-5 w-5 text-[var(--ec-accent-ink)]" />
           </motion.div>
           <div className="flex flex-col">
             <h2 className="font-bold text-gray-900 text-sm dark:text-white">Documentation</h2>
diff --git a/components/docs/view/docs-card.tsx b/components/docs/view/docs-card.tsx
index ad237b75..cc3a4c2c 100644
--- a/components/docs/view/docs-card.tsx
+++ b/components/docs/view/docs-card.tsx
@@ -17,7 +17,7 @@ export function DocsCard({ project }: DocsCardProps) {
 
   return (
     <m.div className="h-full" variants={itemVariants}>
-      <Card className="group relative flex h-full flex-col p-6 transition-colors duration-300 hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-800/60">
+      <Card className="group relative flex h-full flex-col p-6 transition-colors duration-300">
         <div
           className={`pointer-events-none absolute inset-0 bg-linear-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${project.gradientColor}`}
         />
diff --git a/components/docs/view/docs-header.tsx b/components/docs/view/docs-header.tsx
index 472e3e95..1f0381b7 100644
--- a/components/docs/view/docs-header.tsx
+++ b/components/docs/view/docs-header.tsx
@@ -4,16 +4,22 @@ export function DocsHeader() {
   const { title, description } = DOCS_PAGE_CONFIG;
 
   return (
-    <section className="relative pt-32 pb-8 lg:pt-48 lg:pb-12">
+    <section className="relative pt-32 pb-12 lg:pt-44 lg:pb-16">
       <div className="relative z-10 mx-auto max-w-360 px-4 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-3xl text-center">
           <div className="mb-6 flex flex-col items-center">
-            <h1 className="mb-6 bg-linear-to-br from-gray-900 via-gray-800 to-gray-600 bg-clip-text font-bold text-4xl text-transparent tracking-tight sm:text-5xl dark:from-white dark:via-gray-100 dark:to-gray-400">
+            <div className="section-kicker mb-7">
+              <span>Library</span> Product documentation
+            </div>
+            <h1 className="mb-6 max-w-3xl font-semibold text-5xl text-[var(--ec-text)] leading-[.95] tracking-[-.06em] sm:text-7xl">
               {title}
             </h1>
             <p className="max-w-2xl whitespace-pre-line text-gray-600 text-lg dark:text-gray-400">
               {description}
             </p>
+            <p className="mt-4 font-mono text-[11px] text-[var(--ec-faint)]">
+              Written by humans. Tested by humans. Typos also provided by humans.
+            </p>
           </div>
         </div>
       </div>
diff --git a/components/footer/footer.tsx b/components/footer/footer.tsx
index a2a19c95..0e8b8f01 100644
--- a/components/footer/footer.tsx
+++ b/components/footer/footer.tsx
@@ -1,214 +1,74 @@
-"use client";
-
-import { Icon } from "@iconify/react";
-import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-
-import DiscordIcon from "@/components/icons/discord";
-import GitHubIcon from "@/components/icons/github";
-import TikTokIcon from "@/components/icons/round-tiktok";
-import YouTubeIcon from "@/components/icons/youtube";
 import logo from "@/public/logo.svg";
 
-interface FooterLink {
-  href: string;
-  label: string;
-  isExternal?: boolean;
-}
-
-interface FooterSection {
-  title: string;
-  links: FooterLink[];
-}
-
-const footerSections: FooterSection[] = [
+const groups = [
   {
-    title: "Product",
+    title: "Explore",
     links: [
-      { href: "/builds", label: "Build Explorer" },
-      { href: "https://docs.eternalcode.pl/", label: "Documentation", isExternal: true },
-      { href: "https://repo.eternalcode.pl/#/", label: "Repository", isExternal: true },
-      { href: "https://status.eternalcode.pl/", label: "Status", isExternal: true },
+      ["Documentation", "/docs"],
+      ["Team", "/team"],
+      ["Contribute", "/contribute"],
+      ["Builds", "/builds"],
     ],
   },
   {
     title: "Projects",
     links: [
-      { href: "/projects/eternalcore", label: "EternalCore" },
-      { href: "/projects/eternalcombat", label: "EternalCombat" },
-    ],
-  },
-  {
-    title: "Community",
-    links: [
-      { href: "https://discord.com/invite/FQ7jmGBd6c", label: "Discord", isExternal: true },
-      { href: "https://github.com/EternalCodeTeam", label: "GitHub", isExternal: true },
-      {
-        href: "https://www.youtube.com/channel/UC2BEaMJWxxUscN50AD0oY_Q",
-        label: "YouTube",
-        isExternal: true,
-      },
-      { href: "https://www.tiktok.com/@eternalcode.pl", label: "TikTok", isExternal: true },
+      ["EternalCore", "/projects/eternalcore"],
+      ["EternalCombat", "/projects/eternalcombat"],
+      ["Multification", "/docs/multification"],
     ],
   },
-  {
-    title: "Resource",
-    links: [
-      {
-        href: "https://spigotmc.org/resources/authors/eternalcodeteam.1570200/",
-        label: "SpigotMC",
-        isExternal: true,
-      },
-      {
-        href: "https://modrinth.com/organization/eternalcodeteam",
-        label: "Modrinth",
-        isExternal: true,
-      },
-      { href: "https://bstats.org/author/vLucky", label: "bStats", isExternal: true },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { href: "/#about", label: "About" },
-      { href: "/team", label: "Team" },
-      { href: "/contribute", label: "Contribute" },
-    ],
-  },
-];
-
-const socialLinks = [
-  {
-    href: "https://github.com/EternalCodeTeam",
-    label: "GitHub",
-    icon: <GitHubIcon />,
-  },
-  {
-    href: "https://discord.com/invite/FQ7jmGBd6c",
-    label: "Discord",
-    icon: <DiscordIcon />,
-  },
-  {
-    href: "https://www.youtube.com/channel/UC2BEaMJWxxUscN50AD0oY_Q",
-    label: "YouTube",
-    icon: <YouTubeIcon />,
-  },
-  {
-    href: "https://www.tiktok.com/@eternalcode.pl",
-    label: "TikTok",
-    icon: <TikTokIcon />,
-  },
 ];
 
 export default function Footer() {
-  const currentYear = new Date().getFullYear();
-
   return (
-    <footer className="border-gray-200 border-t bg-gray-50/50 py-12 lg:pt-16 lg:pb-8 dark:border-white/5 dark:bg-[#0a0a0a]">
-      <div className="mx-auto max-w-[90rem] px-4 md:px-6">
-        <div className="grid gap-8 lg:gap-12 xl:grid-cols-4 xl:gap-8">
-          <div className="space-y-6">
-            <Link aria-label="Go to homepage" className="flex items-center gap-2" href="/">
-              <Image
-                alt="EternalCode Logo"
-                className="h-9 w-auto dark:invert"
-                height={36}
-                src={logo}
-                width={36}
-              />
-              <span className="font-bold text-gray-900 text-xl tracking-tight dark:text-white">
-                EternalCode
-              </span>
-            </Link>
-            <p className="max-w-xs text-gray-600 text-sm leading-6 dark:text-gray-400">
-              Building high-quality, open-source Minecraft solutions. Empowering communities with
-              reliable software since 2021.
-            </p>
-            <div className="flex gap-4">
-              {socialLinks.map((item) => (
-                <motion.a
-                  aria-label={item.label}
-                  className="text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-                  href={item.href}
-                  key={item.label}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.95 }}
+    <footer className="border-[var(--ec-line)] border-t bg-[var(--ec-footer)] text-[var(--ec-text)]">
+      <div className="section-shell grid gap-14 py-14 lg:grid-cols-[1.4fr_.6fr_.6fr] lg:py-20">
+        <div>
+          <Link className="inline-flex items-center gap-3" href="/">
+            <span className="grid h-10 w-10 place-items-center rounded-xl bg-[var(--ec-accent)]">
+              <Image alt="" height={25} src={logo} width={25} />
+            </span>
+            <span className="font-semibold tracking-[-.03em]">EternalCode.</span>
+          </Link>
+          <p className="mt-6 max-w-sm text-[var(--ec-muted)] text-sm leading-6">
+            Open-source infrastructure for ambitious Minecraft communities, designed and maintained
+            in Poland.
+          </p>
+          <a
+            className="mt-7 inline-flex items-center gap-2 text-[var(--ec-accent-text)] text-sm"
+            href="https://github.com/EternalCodeTeam"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Follow development <ArrowUpRight className="h-4 w-4" />
+          </a>
+        </div>
+        {groups.map((group) => (
+          <div key={group.title}>
+            <h2 className="font-mono text-[10px] text-[var(--ec-faint)] uppercase tracking-[.18em]">
+              {group.title}
+            </h2>
+            <div className="mt-5 space-y-3">
+              {group.links.map(([label, href]) => (
+                <Link
+                  className="block text-[var(--ec-muted)] text-sm transition hover:text-[var(--ec-text)]"
+                  href={href}
+                  key={href}
                 >
-                  <span className="h-5 w-5">{item.icon}</span>
-                </motion.a>
+                  {label}
+                </Link>
               ))}
             </div>
           </div>
-
-          <div className="grid grid-cols-2 gap-8 md:grid-cols-5 xl:col-span-3">
-            {footerSections.map((section) => (
-              <div key={section.title}>
-                <h3 className="font-semibold text-gray-900 text-sm leading-6 dark:text-white">
-                  {section.title}
-                </h3>
-                <ul className="mt-4 space-y-3">
-                  {section.links.map((link) => (
-                    <li key={link.label}>
-                      {link.isExternal ? (
-                        <a
-                          className="text-gray-600 text-sm leading-6 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-                          href={link.href}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          {link.label}
-                        </a>
-                      ) : (
-                        <Link
-                          className="text-gray-600 text-sm leading-6 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-                          href={link.href}
-                        >
-                          {link.label}
-                        </Link>
-                      )}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="mt-12 border-gray-200 border-t pt-8 lg:mt-16 dark:border-white/5">
-          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
-            <p className="text-gray-500 text-xs leading-5 dark:text-gray-500">
-              &copy; {currentYear} EternalCodeTeam. All rights reserved.
-            </p>
-            <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-6">
-              <motion.a
-                className="group inline-flex items-center gap-2 rounded-lg border border-gray-200/80 bg-gradient-to-br from-white to-gray-50/50 px-3.5 py-1.5 font-medium text-gray-700 text-xs shadow-sm transition-all hover:border-emerald-200 hover:shadow-md dark:border-white/[0.08] dark:from-neutral-900 dark:to-neutral-900/50 dark:text-gray-300 dark:hover:border-emerald-500/30"
-                href="https://www.netlify.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-                whileTap={{ scale: 0.98 }}
-              >
-                <span className="relative flex h-2 w-2">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75 group-hover:opacity-100" />
-                  <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]" />
-                </span>
-                <Icon
-                  aria-hidden
-                  className="h-4 w-4 text-emerald-500 transition-colors group-hover:text-emerald-600 dark:text-emerald-400 dark:group-hover:text-emerald-300"
-                  icon="simple-icons:netlify"
-                />
-                <span className="bg-gradient-to-r from-gray-700 to-gray-900 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-100">
-                  Powered by Netlify
-                </span>
-              </motion.a>
-              <span className="text-gray-500 text-xs dark:text-gray-500">
-                Designed with <span className="text-red-500">❤</span> by the EternalCodeTeam.
-              </span>
-            </div>
-          </div>
-        </div>
+        ))}
+      </div>
+      <div className="section-shell flex flex-col gap-3 border-[var(--ec-line)] border-t py-5 text-[11px] text-[var(--ec-faint)] sm:flex-row sm:items-center sm:justify-between">
+        <span>© {new Date().getFullYear()} EternalCodeTeam</span>
+        <span>Open source. Built with care. Occasionally fixed after midnight.</span>
       </div>
     </footer>
   );
diff --git a/components/hero/hero.tsx b/components/hero/hero.tsx
index d5ea9902..1d046a35 100644
--- a/components/hero/hero.tsx
+++ b/components/hero/hero.tsx
@@ -1,106 +1,66 @@
 "use client";
 
-import { m } from "framer-motion";
-import { Github } from "lucide-react";
-import ArrowForwardHeroIcon from "@/components/icons/arrow-forward-hero";
-import { Button } from "@/components/ui/button";
-import { FadeIn, MotionSection, SlideIn } from "@/components/ui/motion/motion-components";
-import Terminal from "./terminal/terminal-window";
+import { motion } from "framer-motion";
+import { ArrowDownRight, ArrowRight, Github } from "lucide-react";
+import Link from "next/link";
 
 export default function Hero() {
   return (
-    <div className="relative overflow-hidden">
-      {/* Background Blob - using CSS animation for better performance */}
-      <div className="absolute -top-20 -right-20 h-56 w-56 animate-[float_20s_ease-in-out_infinite] rounded-full bg-linear-to-br from-blue-400/20 to-blue-600/15 blur-2xl motion-reduce:animate-none sm:h-64 sm:w-64 dark:blur-3xl" />
+    <section className="hero-minimal">
+      <div className="hero-grid" />
+      <div className="section-shell hero-minimal-inner">
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="eyebrow justify-center"
+          initial={{ opacity: 0, y: 10 }}
+        >
+          <span className="status-dot" /> Open source, built by friends
+        </motion.div>
 
-      <MotionSection className="relative mx-auto max-w-[90rem] px-4 pt-48 pb-12 sm:pt-40 sm:pb-16 md:pt-48 lg:flex lg:items-center lg:justify-between lg:gap-16">
-        {/* Text Content */}
-        <div className="flex flex-col items-center text-center lg:flex-1 lg:items-start lg:text-left">
-          {/* Title */}
-          <SlideIn delay={0.1}>
-            <h1
-              className="wrap-break-word max-w-3xl font-extrabold text-4xl leading-tight tracking-tight sm:text-5xl md:text-6xl lg:text-7xl"
-              id="hero-heading"
-            >
-              <span className="bg-linear-to-r from-blue-700 via-blue-500 to-blue-800 bg-clip-text text-transparent dark:from-blue-200 dark:via-blue-400 dark:to-blue-500">
-                EternalCode.pl
-              </span>
-            </h1>
-          </SlideIn>
+        <motion.h1
+          animate={{ opacity: 1, y: 0 }}
+          className="hero-minimal-title"
+          initial={{ opacity: 0, y: 24 }}
+          transition={{ delay: 0.08 }}
+        >
+          Minecraft plugins
+          <br />
+          <span>made for real servers.</span>
+        </motion.h1>
 
-          {/* Subtitle */}
-          <SlideIn delay={0.2}>
-            <p className="mt-6 max-w-2xl text-base text-gray-600 leading-relaxed sm:text-lg md:text-xl dark:text-gray-400">
-              Building the future with{" "}
-              <span className="relative whitespace-nowrap">
-                <span className="relative z-10 font-medium text-blue-600 dark:text-blue-400">
-                  open source
-                </span>
-                <svg
-                  aria-hidden="true"
-                  className="absolute -bottom-1 left-0 -z-10 h-3 w-full text-blue-600/80 dark:text-blue-400/80"
-                  fill="none"
-                  preserveAspectRatio="none"
-                  shapeRendering="geometricPrecision"
-                  viewBox="0 0 300 25"
-                >
-                  <m.path
-                    d="M10 18C44 24 99 9 143 14C179 18 211 25 244 21C266 18 288 12 290 10"
-                    initial={{ pathLength: 0, opacity: 0 }}
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="3"
-                    transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
-                    viewport={{ once: true, margin: "-100px" }}
-                    whileInView={{ pathLength: 1, opacity: 1 }}
-                  />
-                </svg>
-              </span>
-              . Join a community of passionate developers crafting the next generation of software
-              tools.
-            </p>
-          </SlideIn>
+        <motion.p
+          animate={{ opacity: 1, y: 0 }}
+          className="hero-minimal-lead"
+          initial={{ opacity: 0, y: 18 }}
+          transition={{ delay: 0.16 }}
+        >
+          We are a group of friends building open-source tools we enjoy using ourselves. Useful
+          defaults, readable docs and no corporate nonsense.
+        </motion.p>
 
-          {/* Buttons */}
-          <FadeIn
-            className="mt-10 flex w-full flex-col gap-4 sm:flex-row sm:justify-center lg:justify-start"
-            delay={0.3}
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="hero-minimal-actions"
+          initial={{ opacity: 0, y: 14 }}
+          transition={{ delay: 0.22 }}
+        >
+          <Link className="primary-action" href="/docs">
+            Explore plugins <ArrowRight className="h-4 w-4" />
+          </Link>
+          <a
+            className="secondary-action"
+            href="https://github.com/EternalCodeTeam"
+            rel="noreferrer"
+            target="_blank"
           >
-            <Button
-              className="group flex w-full min-w-[160px] items-center justify-center gap-2 sm:w-auto"
-              href="#about"
-              rightIcon={
-                <ArrowForwardHeroIcon className="h-4 w-4 transform-gpu transition-transform will-change-transform group-hover:translate-x-1" />
-              }
-              shine
-              size="lg"
-              variant="primary"
-            >
-              About us
-            </Button>
+            <Github className="h-4 w-4" /> GitHub
+          </a>
+        </motion.div>
+      </div>
 
-            <Button
-              className="flex w-full min-w-[160px] items-center justify-center gap-2 sm:w-auto"
-              href="https://github.com/EternalCodeTeam"
-              leftIcon={<Github className="h-5 w-5" />}
-              rel="noopener noreferrer"
-              size="lg"
-              target="_blank"
-              variant="outline"
-            >
-              GitHub
-            </Button>
-          </FadeIn>
-        </div>
-
-        {/* Terminal - Right Side */}
-        <SlideIn className="mt-16 w-full lg:mt-0 lg:w-[55%]" delay={0.4}>
-          <div className="perspective-1000 relative mx-auto">
-            <Terminal />
-          </div>
-        </SlideIn>
-      </MotionSection>
-    </div>
+      <a className="hero-minimal-scroll" href="#about">
+        More about us <ArrowDownRight className="h-4 w-4" />
+      </a>
+    </section>
   );
 }
diff --git a/components/hero/navbar.tsx b/components/hero/navbar.tsx
index 63fa258e..c0cdc1ca 100644
--- a/components/hero/navbar.tsx
+++ b/components/hero/navbar.tsx
@@ -1,446 +1,96 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import { ChevronDown, ExternalLink, Menu, Wrench, X } from "lucide-react";
+import { ArrowUpRight, Menu, X } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-import AnnouncementBanner from "@/components/hero/announcement-banner";
-import { slideDown } from "@/lib/animations/variants";
-import { cn } from "@/lib/utils";
+import { useState } from "react";
 import logo from "@/public/logo.svg";
 import ThemeSwitchButton from "./theme-switch-button";
-import { TOOLS_OPTIONS } from "./tools-dropdown";
-
-interface NavLink {
-  href: string;
-  label: string;
-  isExternal?: boolean;
-}
 
-const NAV_LINKS: NavLink[] = [
+const links = [
   { href: "/", label: "Home" },
-  { href: "/team", label: "Team" },
   { href: "/docs", label: "Docs" },
+  { href: "/team", label: "Team" },
   { href: "/contribute", label: "Contribute" },
+  { href: "/builds", label: "Builds" },
 ];
 
-const EXTERNAL_LINKS: NavLink[] = [
-  {
-    href: "https://repo.eternalcode.pl/#/",
-    label: "Repository",
-    isExternal: true,
-  },
-  {
-    href: "https://status.eternalcode.pl/",
-    label: "Status",
-    isExternal: true,
-  },
-];
-
-const TOOLS_LINKS = TOOLS_OPTIONS.map((opt) => ({
-  label: opt.label,
-  href: opt.value,
-}));
+export default function Navbar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
 
-function NavItem({ href, label, isActive, isExternal }: NavLink & { isActive: boolean }) {
   return (
-    <Link
-      className={cn(
-        "relative rounded-lg px-3 py-1.5 font-medium text-sm transition-colors",
-        isActive
-          ? "text-gray-900 dark:text-white"
-          : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-      )}
-      href={href}
-      {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-    >
-      <span className="flex items-center gap-1.5">
-        {label}
-        {!!isExternal && <ExternalLink className="h-3 w-3 opacity-50" />}
-      </span>
-      {!!isActive && (
-        <motion.span
-          className="absolute inset-x-1 -bottom-2.5 h-0.5 rounded-full bg-blue-600 dark:bg-blue-400"
-          layoutId="navbar-active"
-          transition={{ type: "spring", stiffness: 380, damping: 30 }}
-        />
-      )}
-    </Link>
-  );
-}
-
-function ToolsMenu() {
-  const [isOpen, setIsOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClick = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClick);
-    }
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [isOpen]);
+    <nav className="fixed inset-x-0 top-0 z-50 px-3 pt-3 sm:px-6">
+      <div className="site-nav mx-auto flex h-16 max-w-[92rem] items-center justify-between px-4 sm:px-5">
+        <Link aria-label="EternalCode home" className="group flex items-center gap-3" href="/">
+          <span className="grid h-9 w-9 place-items-center rounded-xl bg-[var(--ec-accent)] shadow-[0_0_24px_rgb(59_130_246_/_0.2)]">
+            <Image alt="" className="h-6 w-6" height={24} priority src={logo} width={24} />
+          </span>
+          <span className="font-semibold text-[15px] text-[var(--ec-text)] tracking-[-0.02em]">
+            EternalCode<span className="text-[var(--ec-accent-text)]">.</span>
+          </span>
+        </Link>
+
+        <div className="hidden items-center gap-1 md:flex">
+          {links.map((link) => {
+            const active = link.href === "/" ? pathname === "/" : pathname.startsWith(link.href);
+            return (
+              <Link
+                className={`nav-link ${active ? "nav-link-active" : ""}`}
+                href={link.href}
+                key={link.href}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+        </div>
 
-  return (
-    <div className="relative" ref={menuRef}>
-      <button
-        className={cn(
-          "flex items-center gap-1 rounded-lg px-3 py-1.5 font-medium text-sm transition-colors",
-          isOpen
-            ? "text-gray-900 dark:text-white"
-            : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-        )}
-        onClick={() => setIsOpen((v) => !v)}
-        type="button"
-      >
-        <Wrench className="h-3.5 w-3.5" />
-        Tools
-        <ChevronDown
-          className={cn("h-3.5 w-3.5 transition-transform duration-200", isOpen && "rotate-180")}
-        />
-      </button>
+        <div className="flex items-center gap-2">
+          <ThemeSwitchButton />
+          <a
+            className="hidden items-center gap-2 rounded-full bg-[var(--ec-text)] px-4 py-2 font-semibold text-[var(--ec-bg)] text-sm transition hover:bg-[var(--ec-accent)] hover:text-[var(--ec-accent-ink)] sm:inline-flex"
+            href="https://github.com/EternalCodeTeam"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            GitHub <ArrowUpRight className="h-4 w-4" />
+          </a>
+          <button
+            aria-expanded={open}
+            aria-label={open ? "Close menu" : "Open menu"}
+            className="grid h-10 w-10 place-items-center rounded-full border border-[var(--ec-line)] text-[var(--ec-text)] md:hidden"
+            onClick={() => setOpen((value) => !value)}
+            type="button"
+          >
+            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
 
       <AnimatePresence>
-        {!!isOpen && (
+        {open ? (
           <motion.div
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            className="absolute top-full right-0 z-50 mt-2 w-52 origin-top-right overflow-hidden rounded-xl border border-gray-200 bg-white p-1 shadow-xl dark:border-gray-800 dark:bg-gray-900"
-            exit={{ opacity: 0, y: -4, scale: 0.95 }}
-            initial={{ opacity: 0, y: -4, scale: 0.95 }}
-            transition={{ duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
+            animate={{ opacity: 1, y: 0 }}
+            className="site-nav mx-auto mt-2 max-w-[92rem] p-3 md:hidden"
+            exit={{ opacity: 0, y: -8 }}
+            initial={{ opacity: 0, y: -8 }}
           >
-            {TOOLS_LINKS.map((tool) => (
+            {links.map((link) => (
               <Link
-                className="flex items-center gap-2 rounded-lg px-3 py-2 text-gray-600 text-sm transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
-                href={tool.href}
-                key={tool.href}
-                onClick={() => setIsOpen(false)}
+                className="block rounded-xl px-4 py-3 font-medium text-[var(--ec-muted)] hover:bg-[var(--ec-soft)] hover:text-[var(--ec-text)]"
+                href={link.href}
+                key={link.href}
+                onClick={() => setOpen(false)}
               >
-                {tool.label}
+                {link.label}
               </Link>
             ))}
           </motion.div>
-        )}
+        ) : null}
       </AnimatePresence>
-    </div>
-  );
-}
-
-function MobileNav({
-  isOpen,
-  onClose,
-  pathname,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  pathname: string;
-}) {
-  const [toolsOpen, setToolsOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-    }
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose]);
-
-  return (
-    <AnimatePresence>
-      {!!isOpen && (
-        <>
-          <motion.div
-            animate={{ opacity: 1 }}
-            className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
-            exit={{ opacity: 0 }}
-            initial={{ opacity: 0 }}
-            onClick={onClose}
-          />
-          <motion.div
-            animate={{ x: 0 }}
-            className="fixed inset-y-0 right-0 z-50 flex w-full max-w-sm flex-col bg-white shadow-2xl dark:bg-gray-950"
-            exit={{ x: "100%" }}
-            initial={{ x: "100%" }}
-            ref={menuRef}
-            transition={{ type: "spring", stiffness: 400, damping: 40 }}
-          >
-            {/* Header */}
-            <div className="flex items-center justify-between border-gray-100 border-b px-5 py-4 dark:border-gray-800">
-              <Link className="flex items-center gap-2.5" href="/" onClick={onClose}>
-                <Image
-                  alt="EternalCode"
-                  className="h-8 w-auto dark:invert"
-                  height={32}
-                  src={logo}
-                  width={32}
-                />
-                <span className="font-bold text-gray-900 text-lg dark:text-white">EternalCode</span>
-              </Link>
-              <button
-                aria-label="Close menu"
-                className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-                onClick={onClose}
-                type="button"
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-
-            {/* Navigation */}
-            <nav className="flex-1 overflow-y-auto px-4 py-5">
-              <ul className="space-y-1">
-                {NAV_LINKS.map((link, i) => {
-                  const active = pathname === link.href;
-                  return (
-                    <motion.li
-                      animate={{ opacity: 1, x: 0 }}
-                      initial={{ opacity: 0, x: 16 }}
-                      key={link.href}
-                      transition={{ delay: i * 0.04, duration: 0.2 }}
-                    >
-                      <Link
-                        className={cn(
-                          "flex items-center rounded-xl px-4 py-3 font-medium text-[15px] transition-colors",
-                          active
-                            ? "bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
-                            : "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800/60"
-                        )}
-                        href={link.href}
-                        onClick={onClose}
-                      >
-                        {link.label}
-                      </Link>
-                    </motion.li>
-                  );
-                })}
-              </ul>
-
-              {/* Tools accordion */}
-              <motion.div
-                animate={{ opacity: 1, x: 0 }}
-                className="mt-3"
-                initial={{ opacity: 0, x: 16 }}
-                transition={{ delay: NAV_LINKS.length * 0.04, duration: 0.2 }}
-              >
-                <button
-                  className="flex w-full items-center justify-between rounded-xl px-4 py-3 font-medium text-[15px] text-gray-700 transition-colors hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800/60"
-                  onClick={() => setToolsOpen((v) => !v)}
-                  type="button"
-                >
-                  <span className="flex items-center gap-2">
-                    <Wrench className="h-4 w-4 opacity-60" />
-                    Tools
-                  </span>
-                  <ChevronDown
-                    className={cn(
-                      "h-4 w-4 transition-transform duration-200",
-                      toolsOpen && "rotate-180"
-                    )}
-                  />
-                </button>
-                <AnimatePresence>
-                  {!!toolsOpen && (
-                    <motion.ul
-                      animate={{ height: "auto", opacity: 1 }}
-                      className="overflow-hidden"
-                      exit={{ height: 0, opacity: 0 }}
-                      initial={{ height: 0, opacity: 0 }}
-                      transition={{ duration: 0.2 }}
-                    >
-                      {TOOLS_LINKS.map((tool) => (
-                        <li key={tool.href}>
-                          <Link
-                            className="flex items-center rounded-lg px-4 py-2.5 pl-11 text-gray-600 text-sm transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800/60 dark:hover:text-white"
-                            href={tool.href}
-                            onClick={onClose}
-                          >
-                            {tool.label}
-                          </Link>
-                        </li>
-                      ))}
-                    </motion.ul>
-                  )}
-                </AnimatePresence>
-              </motion.div>
-
-              {/* External links */}
-              <div className="mt-5 border-gray-100 border-t pt-5 dark:border-gray-800">
-                <p className="mb-2 px-4 font-semibold text-gray-400 text-xs uppercase tracking-wider dark:text-gray-500">
-                  External
-                </p>
-                <ul className="space-y-1">
-                  {EXTERNAL_LINKS.map((link, i) => (
-                    <motion.li
-                      animate={{ opacity: 1, x: 0 }}
-                      initial={{ opacity: 0, x: 16 }}
-                      key={link.href}
-                      transition={{
-                        delay: (NAV_LINKS.length + 1 + i) * 0.04,
-                        duration: 0.2,
-                      }}
-                    >
-                      <a
-                        className="flex items-center justify-between rounded-xl px-4 py-3 font-medium text-[15px] text-gray-700 transition-colors hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800/60"
-                        href={link.href}
-                        onClick={onClose}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        {link.label}
-                        <ExternalLink className="h-4 w-4 opacity-40" />
-                      </a>
-                    </motion.li>
-                  ))}
-                </ul>
-              </div>
-            </nav>
-
-            {/* Footer */}
-            <div className="border-gray-100 border-t px-5 py-4 dark:border-gray-800">
-              <div className="flex items-center justify-between">
-                <p className="text-gray-400 text-xs">
-                  &copy; {new Date().getFullYear()} EternalCode
-                </p>
-                <ThemeSwitchButton />
-              </div>
-            </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}
-
-export default function Navbar() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const pathname = usePathname();
-
-  const closeMenu = useCallback(() => setIsMenuOpen(false), []);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally close menu on pathname change
-  useEffect(() => {
-    setIsMenuOpen(false);
-  }, [pathname]);
-
-  useEffect(() => {
-    let ticking = false;
-    const handleScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          setScrolled(window.scrollY > 10);
-          ticking = false;
-        });
-        ticking = true;
-      }
-    };
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  return (
-    <>
-      <motion.nav
-        animate="visible"
-        aria-label="Main navigation"
-        className={cn(
-          "fixed inset-x-0 top-0 z-50 transition-[background-color,border-color,box-shadow] duration-300",
-          scrolled
-            ? "border-gray-200/60 border-b bg-white/80 shadow-sm backdrop-blur-xl dark:border-gray-800/60 dark:bg-gray-950/80"
-            : "border-transparent border-b bg-light-gray-100 dark:bg-gray-900"
-        )}
-        initial="hidden"
-        variants={slideDown}
-      >
-        <AnnouncementBanner />
-
-        <div className="mx-auto flex max-w-[90rem] items-center justify-between px-4 py-3 sm:px-6">
-          {/* Logo */}
-          <Link aria-label="Go to homepage" className="flex shrink-0 items-center gap-2.5" href="/">
-            <Image
-              alt="EternalCode Logo"
-              className="h-8 w-auto dark:invert"
-              height={32}
-              priority
-              src={logo}
-              width={32}
-            />
-            <span className="hidden font-bold text-gray-900 text-lg tracking-tight sm:block dark:text-white">
-              EternalCode
-            </span>
-          </Link>
-
-          {/* Desktop nav */}
-          <div className="hidden items-center gap-1 md:flex">
-            {NAV_LINKS.map((link) => (
-              <NavItem
-                isActive={link.href === "/" ? pathname === "/" : pathname.startsWith(link.href)}
-                key={link.href}
-                {...link}
-              />
-            ))}
-            <ToolsMenu />
-            <div className="mx-2 h-5 w-px bg-gray-200 dark:bg-gray-700" />
-            {EXTERNAL_LINKS.map((link) => (
-              <NavItem isActive={false} key={link.href} {...link} />
-            ))}
-          </div>
-
-          {/* Right side */}
-          <div className="flex items-center gap-2">
-            <div className="hidden md:block">
-              <ThemeSwitchButton />
-            </div>
-
-            {/* Mobile hamburger */}
-            <button
-              aria-controls="mobile-menu"
-              aria-expanded={isMenuOpen}
-              aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-              className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-100 md:hidden dark:text-gray-300 dark:hover:bg-gray-800"
-              onClick={() => setIsMenuOpen((v) => !v)}
-              type="button"
-            >
-              <Menu className="h-5 w-5" />
-            </button>
-          </div>
-        </div>
-      </motion.nav>
-
-      {isMounted &&
-        createPortal(
-          <MobileNav isOpen={isMenuOpen} onClose={closeMenu} pathname={pathname} />,
-          document.body
-        )}
-    </>
+    </nav>
   );
 }
diff --git a/components/home/animated-home.tsx b/components/home/animated-home.tsx
index 634771fa..3370738f 100644
--- a/components/home/animated-home.tsx
+++ b/components/home/animated-home.tsx
@@ -1,77 +1,237 @@
 "use client";
 
-import { m } from "framer-motion";
-import dynamic from "next/dynamic";
+import { motion } from "framer-motion";
+import {
+  ArrowRight,
+  Blocks,
+  BookOpen,
+  Box,
+  Check,
+  Code2,
+  Github,
+  PackageCheck,
+  Sparkles,
+  Users,
+} from "lucide-react";
+import Link from "next/link";
 import Hero from "@/components/hero/hero";
-import { FacadePattern } from "@/components/ui/facade-pattern";
-import VisibleSection from "@/components/ui/visible-section";
+import Cta from "@/components/shared/cta-section";
+import { CursorGlow } from "@/components/ui/cursor-glow";
 
-const About = dynamic(() => import("@/components/home/about/about-section"), {
-  loading: () => <div className="min-h-[500px]" />,
-});
-const Cta = dynamic(() => import("@/components/shared/cta-section"), {
-  loading: () => <div className="min-h-[300px]" />,
-});
-const Faq = dynamic(() => import("@/components/home/faq/faq-section"), {
-  loading: () => <div className="min-h-[600px]" />,
-});
-const Features = dynamic(() => import("@/components/home/features/features"), {
-  loading: () => <div className="min-h-[400px]" />,
-});
-const Sponsors = dynamic(() => import("@/components/home/sponsors/sponsors-section"), {
-  loading: () => <div className="min-h-[120px]" />,
-});
+const projects = [
+  {
+    name: "EternalCore",
+    description: "A complete, production-ready foundation for modern Minecraft servers.",
+    href: "/projects/eternalcore",
+    tag: "Server toolkit",
+    icon: Box,
+    tone: "blue",
+  },
+  {
+    name: "EternalCombat",
+    description: "Precise combat control designed for competitive communities.",
+    href: "/projects/eternalcombat",
+    tag: "Combat engine",
+    icon: Sparkles,
+    tone: "violet",
+  },
+  {
+    name: "Multification",
+    description: "A flexible text format that makes rich messages effortless.",
+    href: "/docs/multification",
+    tag: "Developer library",
+    icon: Code2,
+    tone: "cyan",
+  },
+];
+
+const principles = [
+  {
+    icon: PackageCheck,
+    title: "Production first",
+    text: "Tools shaped by real servers, strict reviews and measurable performance.",
+  },
+  {
+    icon: BookOpen,
+    title: "Documented deeply",
+    text: "Clear guides, practical examples and APIs that respect your time.",
+  },
+  {
+    icon: Users,
+    title: "Built in public",
+    text: "Open roadmaps, transparent decisions and a community that can contribute.",
+  },
+  {
+    icon: Blocks,
+    title: "Designed to compose",
+    text: "Focused projects that work brilliantly alone and even better together.",
+  },
+];
 
 export default function AnimatedHome() {
   return (
-    <m.div className="relative bg-gray-50 dark:bg-gray-950" id="main-content" tabIndex={-1}>
-      <div className="pointer-events-none absolute inset-0 z-0 select-none overflow-hidden">
-        <div className="absolute top-0 -left-[10%] h-[300px] w-[300px] rounded-full bg-blue-500/10 blur-2xl filter md:h-[600px] md:w-[600px] dark:bg-blue-500/5 dark:blur-3xl" />
-
-        <div className="absolute top-[30%] left-[-10%] h-[250px] w-[250px] rounded-full bg-purple-500/10 blur-2xl filter md:h-[500px] md:w-[500px] dark:bg-purple-500/5 dark:blur-3xl" />
+    <div className="site-shell" id="main-content" tabIndex={-1}>
+      <Hero />
 
-        <div className="absolute top-[55%] right-[-10%] h-[300px] w-[300px] rounded-full bg-indigo-500/10 blur-2xl filter md:h-[600px] md:w-[600px] dark:bg-indigo-500/5 dark:blur-3xl" />
+      <section className="section-shell pt-8 sm:pt-16">
+        <div className="section-kicker">
+          <span>01</span> Selected projects
+        </div>
+        <p className="mt-4 max-w-xl text-[var(--ec-faint)] text-sm">
+          Things we built because apparently playing Minecraft was not enough.
+        </p>
+        <CursorGlow className="mt-8 grid gap-4 lg:grid-cols-3">
+          {projects.map((project, index) => {
+            const Icon = project.icon;
+            return (
+              <motion.div
+                initial={{ opacity: 0, y: 24 }}
+                key={project.name}
+                transition={{ delay: index * 0.08 }}
+                viewport={{ once: true, margin: "-80px" }}
+                whileInView={{ opacity: 1, y: 0 }}
+              >
+                <Link
+                  className={`project-card project-${project.tone}`}
+                  data-glow-card
+                  href={project.href}
+                >
+                  <div className="flex items-start justify-between">
+                    <span className="project-icon">
+                      <Icon className="h-6 w-6" />
+                    </span>
+                    <span className="font-mono text-[10px] text-[var(--ec-faint)] uppercase tracking-[0.18em]">
+                      0{index + 1} / 03
+                    </span>
+                  </div>
+                  <div className="mt-24">
+                    <span className="font-mono text-[11px] text-[var(--ec-faint)] uppercase tracking-[0.16em]">
+                      {project.tag}
+                    </span>
+                    <h2 className="mt-3 font-semibold text-3xl text-[var(--ec-text)] tracking-[-0.04em]">
+                      {project.name}
+                    </h2>
+                    <p className="mt-3 max-w-sm text-[var(--ec-muted)] text-sm leading-6">
+                      {project.description}
+                    </p>
+                  </div>
+                  <div className="mt-8 flex items-center justify-between border-[var(--ec-line)] border-t pt-5 text-[var(--ec-muted)] text-sm">
+                    Explore project{" "}
+                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                  </div>
+                </Link>
+              </motion.div>
+            );
+          })}
+        </CursorGlow>
+      </section>
 
-        <div className="absolute top-[75%] left-[-10%] h-[250px] w-[250px] rounded-full bg-cyan-500/10 blur-2xl filter md:h-[500px] md:w-[500px] dark:bg-cyan-500/5 dark:blur-3xl" />
+      <section className="section-shell py-24 sm:py-32" id="about">
+        <div className="grid gap-12 lg:grid-cols-[.85fr_1.15fr] lg:gap-24">
+          <div>
+            <div className="section-kicker">
+              <span>02</span> Our standard
+            </div>
+            <h2 className="display-title mt-8">Software people trust at 3 AM.</h2>
+            <p className="mt-6 max-w-xl text-[var(--ec-muted)] text-base leading-7 sm:text-lg">
+              We are an open-source engineering team from Poland. We build dependable tools for
+              server owners and developers who care about quality, clarity and control.
+            </p>
+            <Link className="mt-8 text-link" href="/team">
+              Meet the team <ArrowRight className="h-4 w-4" />
+            </Link>
+          </div>
+          <CursorGlow className="grid gap-px overflow-hidden rounded-[1.75rem] border border-[var(--ec-line)] bg-[var(--ec-line)] sm:grid-cols-2">
+            {principles.map((item) => {
+              const Icon = item.icon;
+              return (
+                <div
+                  className="glow-surface bg-[var(--ec-panel)] p-7 sm:p-9"
+                  data-glow-card
+                  key={item.title}
+                >
+                  <Icon className="h-6 w-6 text-[var(--ec-accent-text)]" />
+                  <h3 className="mt-12 font-semibold text-[var(--ec-text)] text-xl tracking-[-0.025em]">
+                    {item.title}
+                  </h3>
+                  <p className="mt-3 text-[var(--ec-muted)] text-sm leading-6">{item.text}</p>
+                </div>
+              );
+            })}
+          </CursorGlow>
+        </div>
+      </section>
 
-        <div className="absolute bottom-[-10%] left-1/2 h-[300px] w-[300px] -translate-x-1/2 rounded-full bg-blue-500/10 blur-2xl filter md:h-[600px] md:w-[600px] dark:bg-blue-500/5 dark:blur-3xl" />
+      <section className="border-[var(--ec-line)] border-y bg-[var(--ec-accent)] text-[var(--ec-accent-ink)]">
+        <div className="section-shell grid gap-10 py-16 md:grid-cols-3 md:py-20">
+          {[
+            ["10+", "open-source projects"],
+            ["100k+", "monthly downloads"],
+            ["24/7", "community-driven development"],
+          ].map(([value, label]) => (
+            <div
+              className="border-black/15 first:border-0 first:pl-0 md:border-l md:pl-8"
+              key={label}
+            >
+              <strong className="block font-mono text-5xl tracking-[-0.06em] sm:text-6xl">
+                {value}
+              </strong>
+              <span className="mt-3 block text-black/60 text-sm">{label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
 
-        <FacadePattern className="absolute inset-0 h-full opacity-30 dark:opacity-10" />
-      </div>
+      <section className="section-shell py-24 sm:py-32">
+        <div className="grid items-center gap-12 rounded-[2rem] border border-[var(--ec-line)] bg-[var(--ec-panel)] p-6 sm:p-10 lg:grid-cols-2 lg:p-14">
+          <div className="code-panel">
+            <div className="flex items-center gap-2 border-white/10 border-b px-5 py-4">
+              <span className="status-dot" />
+              <span className="font-mono text-[11px] text-white/40">eternalcode / main</span>
+            </div>
+            <div className="space-y-4 p-5 font-mono text-xs leading-6 sm:p-7 sm:text-sm">
+              <p>
+                <span className="text-[var(--ec-accent-text)]">$</span> ./gradlew build
+              </p>
+              <p className="text-white/45">Resolving production modules...</p>
+              <p className="text-white/45">Running quality gates...</p>
+              <p className="text-[var(--ec-accent-text)]">
+                <Check className="mr-2 inline h-4 w-4" />
+                Build successful in 2.4s
+              </p>
+              <p>
+                <span className="text-[var(--ec-accent-text)]">$</span> deploy --with-confidence{" "}
+                <span className="terminal-caret" />
+              </p>
+            </div>
+          </div>
+          <div className="lg:pl-8">
+            <div className="section-kicker">
+              <span>03</span> Developer experience
+            </div>
+            <h2 className="display-title mt-8">Complex under the hood. Calm on the surface.</h2>
+            <p className="mt-6 text-[var(--ec-muted)] leading-7">
+              Predictable configuration, useful defaults and documentation written for shipping—not
+              guessing.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <Link className="pill-link" href="/docs">
+                <BookOpen className="h-4 w-4" /> Read docs
+              </Link>
+              <a
+                className="pill-link"
+                href="https://github.com/EternalCodeTeam"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <Github className="h-4 w-4" /> View source
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
 
-      <div className="relative z-10">
-        <Hero />
-        <VisibleSection
-          className="optimize-visibility"
-          fallback={<div aria-hidden="true" className="min-h-[120px]" />}
-        >
-          <Sponsors />
-        </VisibleSection>
-        <VisibleSection
-          className="optimize-visibility"
-          fallback={<div aria-hidden="true" className="min-h-[500px]" />}
-        >
-          <About />
-        </VisibleSection>
-        <VisibleSection
-          className="optimize-visibility"
-          fallback={<div aria-hidden="true" className="min-h-[400px]" />}
-        >
-          <Features />
-        </VisibleSection>
-        <VisibleSection
-          className="optimize-visibility"
-          fallback={<div aria-hidden="true" className="min-h-[600px]" />}
-        >
-          <Faq />
-        </VisibleSection>
-        <VisibleSection
-          className="optimize-visibility"
-          fallback={<div aria-hidden="true" className="min-h-[300px]" />}
-        >
-          <Cta />
-        </VisibleSection>
-      </div>
-    </m.div>
+      <Cta />
+    </div>
   );
 }
diff --git a/components/home/features/features.tsx b/components/home/features/features.tsx
index c1ae8b0c..fbf6decb 100644
--- a/components/home/features/features.tsx
+++ b/components/home/features/features.tsx
@@ -7,6 +7,7 @@ import JavaIcon from "@/components/icons/java";
 import TabNew from "@/components/icons/tab-new";
 import SectionTitle from "@/components/section-title";
 import { Card } from "@/components/ui/card";
+import { CursorGlow } from "@/components/ui/cursor-glow";
 import { MotionSection, SlideIn } from "@/components/ui/motion/motion-components";
 import { slideUp } from "@/lib/animations/variants";
 
@@ -24,14 +25,14 @@ const features: Feature[] = [
     title: "Java Ecosystem",
     description:
       "We harness the full power of the Java ecosystem to build scalable, high-performance server-side applications and plugins that you can rely on.",
-    color: "from-orange-500/20 to-red-500/20",
+    color: "from-blue-500/20 to-indigo-500/20",
   },
   {
     icon: <GitBranchIcon aria-hidden="true" className="h-8 w-8" />,
     title: "Open Source",
     description:
       "We believe in the power of open source. Transparency, collaboration, and community are the core values that drive every line of code we write.",
-    color: "from-green-500/20 to-emerald-500/20",
+    color: "from-sky-500/20 to-blue-500/20",
   },
   {
     icon: <TabNew aria-hidden="true" className="h-8 w-8" />,
@@ -54,31 +55,33 @@ export default function Features() {
           />
         </SlideIn>
 
-        <MotionSection className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
-          {features.map((feature) => (
-            <m.div className="h-full" key={feature.title} variants={slideUp}>
-              <Card className="group flex h-full flex-col p-8 transition-colors duration-300 hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-800/60">
-                <div
-                  className={`absolute inset-0 bg-linear-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${feature.color} pointer-events-none`}
-                />
+        <CursorGlow className="mt-16">
+          <MotionSection className="grid grid-cols-1 gap-8 md:grid-cols-3">
+            {features.map((feature) => (
+              <m.div className="h-full" key={feature.title} variants={slideUp}>
+                <Card className="group flex h-full flex-col p-8 transition-colors duration-300">
+                  <div
+                    className={`absolute inset-0 bg-linear-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${feature.color} pointer-events-none`}
+                  />
 
-                <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-gray-50 shadow-inner ring-1 ring-gray-200 transition-colors group-hover:bg-white dark:bg-gray-800 dark:ring-gray-700 dark:group-hover:bg-gray-700">
-                  <div className="transform-gpu text-gray-900 transition-transform duration-300 will-change-transform group-hover:scale-110 dark:text-white">
-                    {feature.icon}
+                  <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-gray-50 shadow-inner ring-1 ring-gray-200 transition-colors group-hover:bg-white dark:bg-gray-800 dark:ring-gray-700 dark:group-hover:bg-gray-700">
+                    <div className="transform-gpu text-gray-900 transition-transform duration-300 will-change-transform group-hover:scale-110 dark:text-white">
+                      {feature.icon}
+                    </div>
                   </div>
-                </div>
 
-                <h3 className="font-bold text-gray-900 text-xl leading-7 dark:text-gray-100">
-                  {feature.title}
-                </h3>
+                  <h3 className="font-bold text-gray-900 text-xl leading-7 dark:text-gray-100">
+                    {feature.title}
+                  </h3>
 
-                <p className="mt-4 flex-auto text-base text-gray-600 leading-7 dark:text-gray-400">
-                  {feature.description}
-                </p>
-              </Card>
-            </m.div>
-          ))}
-        </MotionSection>
+                  <p className="mt-4 flex-auto text-base text-gray-600 leading-7 dark:text-gray-400">
+                    {feature.description}
+                  </p>
+                </Card>
+              </m.div>
+            ))}
+          </MotionSection>
+        </CursorGlow>
       </div>
     </section>
   );
diff --git a/components/notification-generator/tabs/sound/sound-table.tsx b/components/notification-generator/tabs/sound/sound-table.tsx
index c7a4c1a4..4ba49756 100644
--- a/components/notification-generator/tabs/sound/sound-table.tsx
+++ b/components/notification-generator/tabs/sound/sound-table.tsx
@@ -267,7 +267,7 @@ function SoundRow({
       className={`border-gray-100 border-b hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 ${
         selectedSound?.id === sound.id ? "bg-blue-50 dark:bg-blue-900/20" : ""
       } ${
-        currentlyPlayingId === sound.id ? "bg-green-50 dark:bg-green-900/20" : ""
+        currentlyPlayingId === sound.id ? "bg-blue-50 dark:bg-blue-900/20" : ""
       } cursor-pointer transition-colors duration-150`}
       onClick={() => onSelectSound(sound.id)}
     >
diff --git a/components/shared/cta-section.tsx b/components/shared/cta-section.tsx
index c75850ce..9a80a933 100644
--- a/components/shared/cta-section.tsx
+++ b/components/shared/cta-section.tsx
@@ -1,39 +1,56 @@
 "use client";
 
 import { Icon } from "@iconify/react";
-
-import { Button } from "@/components/ui/button";
-import { SlideIn } from "@/components/ui/motion/motion-components";
+import { ArrowUpRight, MessageCircle, Users } from "lucide-react";
+import Image from "next/image";
 
 export default function Cta() {
   return (
-    <section className="relative overflow-hidden py-12 lg:py-20">
-      <div className="mx-auto max-w-[90rem] px-6 lg:px-8">
-        <SlideIn direction="up">
-          <div className="text-center">
-            <h2 className="mx-auto max-w-2xl font-bold text-3xl text-gray-900 tracking-tight sm:text-4xl dark:text-white">
-              Join our Community
-            </h2>
-            <p className="mx-auto mt-6 max-w-xl text-gray-600 text-lg leading-8 dark:text-gray-400">
-              Connect with other developers, showcase your projects, and get help with EternalCode
-              libraries. The best discussions happen on our Discord.
-            </p>
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-              <Button
-                className="gap-2 border-[#5865F2]/50 bg-[#5865F2] hover:bg-[#5865F2]/90"
-                href="https://discord.com/invite/FQ7jmGBd6c"
-                leftIcon={<Icon className="h-5 w-5" icon="simple-icons:discord" />}
-                rel="noopener noreferrer"
-                shine
-                size="lg"
-                target="_blank"
-                variant="primary"
-              >
-                Join Discord
-              </Button>
-            </div>
+    <section className="section-shell pb-24 sm:pb-32">
+      <div className="cta-panel cta-panel-clean">
+        <div className="cta-copy">
+          <span className="font-mono text-[11px] uppercase tracking-[0.18em] opacity-60">
+            Build with us
+          </span>
+          <h2 className="mt-4 max-w-3xl font-semibold text-4xl tracking-[-0.055em] sm:text-6xl">
+            Good software gets better in good company.
+          </h2>
+          <p className="mt-6 max-w-2xl text-base leading-7 opacity-70">
+            Ask questions, share feedback or just hang out with people who also spend too much time
+            thinking about Minecraft server plugins.
+          </p>
+          <div className="mt-7 flex flex-wrap gap-5 text-sm opacity-65">
+            <span className="inline-flex items-center gap-2">
+              <Users className="h-4 w-4" /> Developers & server owners
+            </span>
+            <span className="inline-flex items-center gap-2">
+              <MessageCircle className="h-4 w-4" /> Help, feedback & releases
+            </span>
+          </div>
+        </div>
+
+        <div className="cta-wumpus-column">
+          <div className="cta-wumpus">
+            <div aria-hidden="true" className="cta-wumpus-glow" />
+            <Image
+              alt="Wumpus Discord mascot"
+              className="cta-wumpus-image"
+              height={1020}
+              sizes="(max-width: 767px) 184px, 212px"
+              src="/community/wumpus.png"
+              width={823}
+            />
           </div>
-        </SlideIn>
+          <a
+            className="cta-button cta-button-clean"
+            href="https://discord.com/invite/FQ7jmGBd6c"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Icon className="h-5 w-5" icon="simple-icons:discord" /> Join Discord
+            <ArrowUpRight className="h-4 w-4" />
+          </a>
+        </div>
       </div>
     </section>
   );
diff --git a/components/team/team-hero.tsx b/components/team/team-hero.tsx
index cccf57c0..d825af5c 100644
--- a/components/team/team-hero.tsx
+++ b/components/team/team-hero.tsx
@@ -4,22 +4,23 @@ import { MotionSection, SlideIn } from "@/components/ui/motion/motion-components
 
 export default function TeamHero() {
   return (
-    <section className="relative pt-32 pb-8 lg:pt-48 lg:pb-12">
+    <section className="relative pt-32 pb-12 lg:pt-44 lg:pb-16">
       <MotionSection className="mx-auto max-w-[90rem] px-5 sm:px-8">
         <div className="flex flex-col items-center text-center">
           <SlideIn delay={0.2} direction="up">
-            <h1 className="mb-6 font-extrabold text-4xl text-gray-900 leading-tight tracking-tight sm:text-5xl md:text-6xl dark:text-white">
-              The Architects of{" "}
-              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent dark:from-blue-400 dark:to-purple-400">
-                Innovation
-              </span>
+            <div className="section-kicker mb-7 justify-center">
+              <span>People</span> EternalCode team
+            </div>
+            <h1 className="mb-6 max-w-5xl font-semibold text-5xl text-[var(--ec-text)] leading-[.95] tracking-[-.065em] sm:text-7xl">
+              Friends who happen to build{" "}
+              <span className="text-[var(--ec-accent-text)]">dependable software.</span>
             </h1>
           </SlideIn>
 
           <SlideIn delay={0.3} direction="up">
             <p className="mb-8 max-w-3xl text-gray-600 text-lg sm:text-xl dark:text-gray-300">
-              Meet the developers, designers, and creators who build powerful open-source tools.
-              Driven by curiosity and united by code.
+              No office, no matching hoodies, no quarterly targets. Just people who enjoy making
+              useful open-source things together.
             </p>
           </SlideIn>
         </div>
diff --git a/components/team/team-member.tsx b/components/team/team-member.tsx
index ab9171e5..5742f8ad 100644
--- a/components/team/team-member.tsx
+++ b/components/team/team-member.tsx
@@ -19,9 +19,9 @@ export default function TeamMember({ member, index }: TeamMemberProps) {
 
   return (
     <m.div className="h-full" variants={slideUp}>
-      <Card className="group relative flex h-full items-center gap-4 bg-white/50 p-4 ring-gray-200/60 backdrop-blur-sm transition-all duration-300 hover:bg-white hover:shadow-xl hover:ring-blue-500/30 dark:bg-gray-900/40 dark:ring-gray-800/60 dark:hover:bg-gray-900/80 dark:hover:shadow-blue-900/20 dark:hover:ring-blue-400/30">
+      <Card className="group relative flex h-full items-center gap-4 p-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1">
         {/* Background Gradient */}
-        <div className="absolute inset-0 -z-10 bg-linear-to-br from-blue-50/0 via-transparent to-purple-50/0 opacity-0 transition-opacity duration-500 group-hover:from-blue-50/50 group-hover:to-purple-50/50 group-hover:opacity-100 dark:group-hover:from-blue-900/10 dark:group-hover:to-purple-900/10" />
+        <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,var(--ec-glow),transparent_62%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
 
         {/* Avatar */}
         <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
diff --git a/components/team/team.tsx b/components/team/team.tsx
index 731bc082..dd43de0e 100644
--- a/components/team/team.tsx
+++ b/components/team/team.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { CursorGlow } from "@/components/ui/cursor-glow";
 import { MotionSection, SlideIn } from "@/components/ui/motion/motion-components";
 import { getTeamData } from "@/lib/team";
 import TeamMember from "./team-member";
@@ -52,17 +53,19 @@ export default async function Team() {
                   ))}
                 </MotionSection>
               ) : (
-                <MotionSection className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                  {section.members.map((member, index) => (
-                    <SlideIn
-                      delay={index * 0.05}
-                      direction="up"
-                      key={`${section.name}-${member.documentId || index}`}
-                    >
-                      <TeamMember index={index} member={member} />
-                    </SlideIn>
-                  ))}
-                </MotionSection>
+                <CursorGlow>
+                  <MotionSection className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                    {section.members.map((member, index) => (
+                      <SlideIn
+                        delay={index * 0.05}
+                        direction="up"
+                        key={`${section.name}-${member.documentId || index}`}
+                      >
+                        <TeamMember index={index} member={member} />
+                      </SlideIn>
+                    ))}
+                  </MotionSection>
+                </CursorGlow>
               )}
             </div>
           ))}
diff --git a/components/ui/alert-box.tsx b/components/ui/alert-box.tsx
index 3b6798dc..717551ee 100644
--- a/components/ui/alert-box.tsx
+++ b/components/ui/alert-box.tsx
@@ -23,11 +23,10 @@ const alertContainerVariants = cva(
       type: {
         info: "border border-blue-500/20 bg-blue-500/10 dark:border-blue-500/20 dark:bg-blue-500/10",
         warning:
-          "border border-yellow-500/20 bg-yellow-500/10 dark:border-yellow-500/20 dark:bg-yellow-500/10",
+          "border border-indigo-500/20 bg-indigo-500/10 dark:border-indigo-500/20 dark:bg-indigo-500/10",
         danger: "border border-red-500/20 bg-red-500/10 dark:border-red-500/20 dark:bg-red-500/10",
-        tip: "border border-green-500/20 bg-green-500/10 dark:border-green-500/20 dark:bg-green-500/10",
-        success:
-          "border border-emerald-500/20 bg-emerald-500/10 dark:border-emerald-500/20 dark:bg-emerald-500/10",
+        tip: "border border-blue-500/20 bg-blue-500/10 dark:border-blue-500/20 dark:bg-blue-500/10",
+        success: "border border-sky-500/20 bg-sky-500/10 dark:border-sky-500/20 dark:bg-sky-500/10",
         note: "border border-purple-500/20 bg-purple-500/10 dark:border-purple-500/20 dark:bg-purple-500/10",
         question:
           "border border-indigo-500/20 bg-indigo-500/10 dark:border-indigo-500/20 dark:bg-indigo-500/10",
@@ -47,10 +46,10 @@ const alertIconVariants = cva("h-5 w-5", {
   variants: {
     type: {
       info: "text-blue-500 dark:text-blue-400",
-      warning: "text-yellow-500 dark:text-yellow-400",
+      warning: "text-indigo-500 dark:text-indigo-400",
       danger: "text-red-500 dark:text-red-400",
-      tip: "text-green-500 dark:text-green-400",
-      success: "text-emerald-500 dark:text-emerald-400",
+      tip: "text-blue-500 dark:text-blue-400",
+      success: "text-sky-500 dark:text-sky-400",
       note: "text-purple-500 dark:text-purple-400",
       question: "text-indigo-500 dark:text-indigo-400",
       important: "text-amber-500 dark:text-amber-400",
@@ -66,10 +65,10 @@ const alertTextVariants = cva("prose-sm wrap-break-word md:prose-base max-w-full
   variants: {
     type: {
       info: "text-blue-800 dark:text-blue-200",
-      warning: "text-yellow-800 dark:text-yellow-200",
+      warning: "text-indigo-800 dark:text-indigo-200",
       danger: "text-red-800 dark:text-red-200",
-      tip: "text-green-800 dark:text-green-200",
-      success: "text-emerald-800 dark:text-emerald-200",
+      tip: "text-blue-800 dark:text-blue-200",
+      success: "text-sky-800 dark:text-sky-200",
       note: "text-purple-800 dark:text-purple-200",
       question: "text-indigo-800 dark:text-indigo-200",
       important: "text-amber-800 dark:text-amber-200",
@@ -85,10 +84,10 @@ const alertTitleVariants = cva("mb-1 font-semibold text-sm md:text-base", {
   variants: {
     type: {
       info: "text-blue-900 dark:text-blue-100",
-      warning: "text-yellow-900 dark:text-yellow-100",
+      warning: "text-indigo-900 dark:text-indigo-100",
       danger: "text-red-900 dark:text-red-100",
-      tip: "text-green-900 dark:text-green-100",
-      success: "text-emerald-900 dark:text-emerald-100",
+      tip: "text-blue-900 dark:text-blue-100",
+      success: "text-sky-900 dark:text-sky-100",
       note: "text-purple-900 dark:text-purple-100",
       question: "text-indigo-900 dark:text-indigo-100",
       important: "text-amber-900 dark:text-amber-100",
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 1e266c40..c08381bb 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -9,29 +9,30 @@ import { interactionSpring } from "@/lib/animations/variants";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "group relative inline-flex cursor-pointer select-none items-center justify-center overflow-visible font-medium transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "group relative inline-flex cursor-pointer select-none items-center justify-center overflow-visible font-semibold transition-all focus:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--ec-accent)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         primary:
-          "border border-transparent bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600",
+          "border border-transparent bg-[var(--ec-accent)] text-[var(--ec-accent-ink)] shadow-sm hover:shadow-md hover:brightness-105",
         secondary:
-          "border border-transparent bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+          "border border-[var(--ec-line)] bg-[var(--ec-soft)] text-[var(--ec-text)] hover:brightness-95 dark:hover:brightness-125",
         outline:
-          "border border-gray-200 bg-transparent hover:bg-gray-50 hover:text-gray-900 dark:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-white",
-        ghost: "border border-transparent bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800",
-        link: "h-auto border-transparent bg-transparent p-0 text-blue-600 underline-offset-4 hover:underline dark:text-blue-400",
+          "border border-[var(--ec-line)] bg-transparent text-[var(--ec-muted)] hover:bg-[var(--ec-soft)] hover:text-[var(--ec-text)]",
+        ghost:
+          "border border-transparent bg-transparent text-[var(--ec-muted)] hover:bg-[var(--ec-soft)] hover:text-[var(--ec-text)]",
+        link: "h-auto border-transparent bg-transparent p-0 text-[var(--ec-accent)] underline-offset-4 hover:underline",
         danger:
           "border border-transparent bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-red-500/20 dark:bg-red-700 dark:hover:bg-red-800",
         contrast:
-          "border border-transparent bg-gray-900 text-white shadow-sm hover:bg-gray-800 hover:shadow-lg dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100 dark:hover:shadow-blue-500/20",
+          "border border-transparent bg-[var(--ec-text)] text-[var(--ec-bg)] shadow-sm hover:bg-[var(--ec-accent)] hover:text-[var(--ec-accent-ink)] hover:shadow-lg",
       },
       size: {
         xs: "h-7 rounded-md px-3 text-xs",
         sm: "h-9 rounded-lg px-4 text-sm",
-        md: "h-11 rounded-lg px-6 py-2 text-sm",
-        lg: "h-12 rounded-xl px-8 py-3 text-base",
-        xl: "h-14 rounded-xl px-10 py-4 text-lg",
+        md: "h-11 rounded-full px-6 py-2 text-sm",
+        lg: "h-12 rounded-full px-8 py-3 text-sm",
+        xl: "h-14 rounded-full px-10 py-4 text-base",
       },
       fullWidth: {
         true: "w-full",
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 3acbd7bc..e2b2d9d1 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -8,9 +8,10 @@ const Card = ({
 }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) => (
   <div
     className={cn(
-      "relative overflow-hidden rounded-2xl bg-white text-gray-950 shadow-sm ring-1 ring-gray-200 transition-all dark:bg-gray-900/40 dark:text-gray-50 dark:ring-gray-800",
+      "ec-card relative overflow-hidden rounded-[1.4rem] border text-[var(--ec-text)] shadow-none transition-all",
       className
     )}
+    data-glow-card
     ref={ref}
     {...props}
   />
diff --git a/components/ui/copy-to-clipboard.tsx b/components/ui/copy-to-clipboard.tsx
index 2c870a53..79bfccf0 100644
--- a/components/ui/copy-to-clipboard.tsx
+++ b/components/ui/copy-to-clipboard.tsx
@@ -39,7 +39,7 @@ export function CopyToClipboard({
               t.visible ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0"
             )}
           >
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-green-500/20 text-green-500 dark:bg-green-400/15 dark:text-green-400">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-500/20 text-blue-500 dark:bg-blue-400/15 dark:text-blue-400">
               <Check size={18} />
             </div>
 
@@ -74,7 +74,7 @@ export function CopyToClipboard({
       {showIcon ? (
         <span className="opacity-0 transition-opacity duration-200 group-hover:opacity-100">
           {copied ? (
-            <Check className="text-green-500" size={14} />
+            <Check className="text-blue-500" size={14} />
           ) : (
             <Copy className="text-gray-400 group-hover:text-blue-500" size={14} />
           )}
diff --git a/components/ui/cursor-glow.tsx b/components/ui/cursor-glow.tsx
new file mode 100644
index 00000000..6a5f3bab
--- /dev/null
+++ b/components/ui/cursor-glow.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import type { PointerEvent, ReactNode } from "react";
+import { useCallback, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface CursorGlowProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const GLOW_REACH = 180;
+
+export function CursorGlow({ children, className }: CursorGlowProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const updateCards = useCallback((clientX: number, clientY: number, active: boolean) => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const cards = Array.from(container.querySelectorAll<HTMLElement>("[data-glow-card]"));
+
+    for (const card of cards) {
+      if (!active) {
+        card.style.setProperty("--card-glow-opacity", "0");
+        continue;
+      }
+
+      const bounds = card.getBoundingClientRect();
+      const distanceX = Math.max(bounds.left - clientX, 0, clientX - bounds.right);
+      const distanceY = Math.max(bounds.top - clientY, 0, clientY - bounds.bottom);
+      const distance = Math.hypot(distanceX, distanceY);
+      const opacity = Math.max(0, 1 - distance / GLOW_REACH);
+
+      card.style.setProperty("--card-glow-x", `${clientX - bounds.left}px`);
+      card.style.setProperty("--card-glow-y", `${clientY - bounds.top}px`);
+      card.style.setProperty("--card-glow-opacity", opacity.toFixed(3));
+    }
+  }, []);
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+      }
+
+      const { clientX, clientY } = event;
+      frameRef.current = requestAnimationFrame(() => updateCards(clientX, clientY, true));
+    },
+    [updateCards]
+  );
+
+  const clearGlow = useCallback(() => {
+    if (frameRef.current !== null) {
+      cancelAnimationFrame(frameRef.current);
+    }
+    updateCards(0, 0, false);
+  }, [updateCards]);
+
+  return (
+    <div
+      className={cn("cursor-glow", className)}
+      onPointerLeave={clearGlow}
+      onPointerMove={handlePointerMove}
+      ref={containerRef}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/components/ui/mdx/badge.tsx b/components/ui/mdx/badge.tsx
index a4b669b9..659bc92a 100644
--- a/components/ui/mdx/badge.tsx
+++ b/components/ui/mdx/badge.tsx
@@ -12,9 +12,9 @@ const badgeVariants = cva(
         default:
           "border-gray-200 bg-gray-100 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100",
         success:
-          "border-green-200 bg-green-100 text-green-800 dark:border-green-800 dark:bg-green-900/30 dark:text-green-300",
+          "border-blue-200 bg-blue-100 text-blue-800 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
         warning:
-          "border-yellow-200 bg-yellow-100 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+          "border-indigo-200 bg-indigo-100 text-indigo-800 dark:border-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
         danger:
           "border-red-200 bg-red-100 text-red-800 dark:border-red-800 dark:bg-red-900/30 dark:text-red-300",
         info: "border-blue-200 bg-blue-100 text-blue-800 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
diff --git a/components/ui/mdx/before-after.tsx b/components/ui/mdx/before-after.tsx
index b3157e36..e173f93a 100644
--- a/components/ui/mdx/before-after.tsx
+++ b/components/ui/mdx/before-after.tsx
@@ -164,14 +164,14 @@ export function BeforeAfterItem({ type, title, label, children }: BeforeAfterIte
           "flex items-center justify-between border-b px-4 py-3",
           isBefore
             ? "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-900"
-            : "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-900"
+            : "border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-900"
         )}
       >
         <div className="flex items-center gap-2">
           {isBefore ? (
             <X className="h-4 w-4 text-red-600 dark:text-red-400" />
           ) : (
-            <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
+            <Check className="h-4 w-4 text-blue-600 dark:text-blue-400" />
           )}
           <span className="font-semibold text-sm">{title ?? (isBefore ? "Before" : "After")}</span>
         </div>
@@ -182,7 +182,7 @@ export function BeforeAfterItem({ type, title, label, children }: BeforeAfterIte
               "rounded-full px-2 py-0.5 font-medium text-xs",
               isBefore
                 ? "bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-100"
-                : "bg-green-100 text-green-700 dark:bg-green-800 dark:text-green-100"
+                : "bg-blue-100 text-blue-700 dark:bg-blue-800 dark:text-blue-100"
             )}
           >
             {label}
diff --git a/components/ui/mdx/code-block.tsx b/components/ui/mdx/code-block.tsx
index 8145f7a9..0cb8c6a7 100644
--- a/components/ui/mdx/code-block.tsx
+++ b/components/ui/mdx/code-block.tsx
@@ -44,7 +44,7 @@ export const CodeBlock = memo(({ children, language: _language, className }: Cod
           text={textToCopy}
         >
           {({ copied }) =>
-            copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />
+            copied ? <Check className="h-4 w-4 text-blue-500" /> : <Copy className="h-4 w-4" />
           }
         </CopyToClipboard>
       </div>
diff --git a/components/ui/mdx/command.tsx b/components/ui/mdx/command.tsx
index b07cd57c..74d31e24 100644
--- a/components/ui/mdx/command.tsx
+++ b/components/ui/mdx/command.tsx
@@ -19,12 +19,12 @@ const variantStyles: Record<string, { dark: string; light: string }> = {
     light: "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100",
   },
   gradle: {
-    dark: "bg-gray-900 text-green-400 dark:bg-gray-900 dark:text-green-400",
-    light: "bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+    dark: "bg-gray-900 text-blue-400 dark:bg-gray-900 dark:text-blue-400",
+    light: "bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
   },
   maven: {
-    dark: "bg-gray-900 text-yellow-400 dark:bg-gray-900 dark:text-yellow-400",
-    light: "bg-yellow-50 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300",
+    dark: "bg-gray-900 text-indigo-400 dark:bg-gray-900 dark:text-indigo-400",
+    light: "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300",
   },
   npm: {
     dark: "bg-gray-900 text-red-400 dark:bg-gray-900 dark:text-red-400",
@@ -100,7 +100,7 @@ export function Command({
       >
         {({ copied }) =>
           copied ? (
-            <Check className="h-4 w-4 text-green-400" />
+            <Check className="h-4 w-4 text-blue-400" />
           ) : (
             <Copy className={cn("h-4 w-4 cursor-pointer", copyIconColor)} />
           )
diff --git a/components/ui/mdx/heading.tsx b/components/ui/mdx/heading.tsx
index b9b10c15..ec83260c 100644
--- a/components/ui/mdx/heading.tsx
+++ b/components/ui/mdx/heading.tsx
@@ -39,7 +39,7 @@ export const Heading = ({ children, id, tag, className, ...props }: HeadingProps
           {({ copied }) => (
             <div className="inline-flex items-center justify-center rounded-md p-1 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300">
               {copied ? (
-                <Check className="h-4 w-4 text-green-500" />
+                <Check className="h-4 w-4 text-blue-500" />
               ) : (
                 <LinkIcon className="h-4 w-4" />
               )}
diff --git a/public/community/wumpus.png b/public/community/wumpus.png
new file mode 100644
index 00000000..3dc30da0
Binary files /dev/null and b/public/community/wumpus.png differ