diff --git a/website/app/assets/css/main.css b/website/app/assets/css/main.css
index 7688ac1..e9f6912 100644
--- a/website/app/assets/css/main.css
+++ b/website/app/assets/css/main.css
@@ -1,4 +1,8 @@
 :root {
+  --accent: #69c350;
+  --accent-dark: #2f7f24;
+  --accent-soft: rgba(105, 195, 80, 0.18);
+  --ink: #17211f;
   color: #17211f;
   background: #f6f2ea;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -12,8 +16,8 @@
 body {
   margin: 0;
   background:
-    radial-gradient(circle at 15% 15%, rgba(26, 139, 112, 0.16), transparent 28rem),
-    linear-gradient(180deg, #f7f3ec 0%, #ffffff 45%, #edf5f1 100%);
+    radial-gradient(circle at 15% 15%, var(--accent-soft), transparent 28rem),
+    linear-gradient(180deg, #f7f3ec 0%, #ffffff 45%, #eef8eb 100%);
 }
 
 a {
@@ -62,13 +66,13 @@ nav a {
 }
 
 nav a:hover {
-  color: #0f6d59;
+  color: var(--accent-dark);
 }
 
 .login-link {
-  border: 1px solid rgba(15, 109, 89, 0.22);
+  border: 1px solid rgba(105, 195, 80, 0.38);
   border-radius: 999px;
-  color: #0f6d59;
+  color: var(--accent-dark);
   padding: 0.55rem 0.9rem;
 }
 
@@ -82,7 +86,7 @@ nav a:hover {
 }
 
 .eyebrow {
-  color: #0f8067;
+  color: var(--accent-dark);
   font-size: 0.82rem;
   font-weight: 800;
   letter-spacing: 0;
@@ -155,9 +159,9 @@ h3 {
 }
 
 .primary-action {
-  background: #0f6d59;
-  color: #ffffff;
-  box-shadow: 0 1rem 2rem rgba(15, 109, 89, 0.24);
+  background: var(--accent);
+  color: #10210d;
+  box-shadow: 0 1rem 2rem rgba(105, 195, 80, 0.28);
 }
 
 .secondary-action {
@@ -209,7 +213,7 @@ h3 {
 }
 
 .preview-grid aside strong {
-  color: #80d8bd;
+  color: var(--accent);
   margin-bottom: 1rem;
 }
 
@@ -261,7 +265,7 @@ h3 {
 }
 
 .timeline span {
-  background: linear-gradient(90deg, #80d8bd, #f4c86b);
+  background: linear-gradient(90deg, var(--accent), #d9ef72);
   border-radius: 999px;
   display: block;
   height: 1.15rem;
@@ -307,7 +311,7 @@ footer {
 
 .highlights span,
 .feature-grid span {
-  color: #0f8067;
+  color: var(--accent-dark);
   display: inline-block;
   font-size: 0.82rem;
   font-weight: 800;
@@ -376,9 +380,9 @@ footer {
 
 .workflow-section li::before {
   align-items: center;
-  background: #0f6d59;
+  background: var(--accent);
   border-radius: 50%;
-  color: #ffffff;
+  color: #10210d;
   content: counter(workflow);
   counter-increment: workflow;
   display: flex;