fix: improve homepage dark mode contrast

docs/.vitepress/theme/components/HomeFeatures.vue

@@ -3039,6 +3039,15 @@ a {
     sans-serif;
 }
 
+.dark .section-category,
+.dark .section-headline {
+  color: var(--vp-c-text-1);
+}
+
+.dark .section-sub {
+  color: var(--vp-c-text-2);
+}
+
 /* Bento Grid */
 .bento-grid {
   display: grid;
@@ -3131,6 +3140,11 @@ a {
   scroll-snap-align: start;
 }
 
+.dark .comm-card {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
+}
+
 .comm-card:hover {
   transform: scale(1.015);
 }
@@ -3178,6 +3192,14 @@ a {
   letter-spacing: -0.01em;
 }
 
+.dark .comm-title {
+  color: var(--vp-c-text-1);
+}
+
+.dark .comm-desc {
+  color: var(--vp-c-text-2);
+}
+
 /* Productivity Scroll (Now used for Stage 3) */
 .scroll-container {
   overflow-x: auto;
@@ -3218,6 +3240,11 @@ a {
   box-shadow: none;
 }
 
+.dark .prod-card {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
+}
+
 .prod-card:hover {
   transform: scale(1.015);
 }
@@ -3247,6 +3274,15 @@ a {
   line-height: 1.5;
 }
 
+.dark .prod-tag,
+.dark .prod-card p {
+  color: var(--vp-c-text-2);
+}
+
+.dark .prod-card h4 {
+  color: var(--vp-c-text-1);
+}
+
 .prod-visual {
   margin-top: auto;
   height: 150px;
@@ -3329,6 +3365,10 @@ a {
   white-space: normal;
 }
 
+.dark .appendix-title {
+  color: var(--vp-c-text-1);
+}
+
 .appendix-scroll-hint {
   position: relative;
   display: flex;
@@ -3412,6 +3452,10 @@ a {
   border-radius: 40px;
 }
 
+.dark .footer-callout {
+  background: var(--vp-c-bg-soft);
+}
+
 .footer-callout h2 {
   font-size: 62px;
   font-weight: 700;
@@ -3430,6 +3474,14 @@ a {
   margin-bottom: 18px;
 }
 
+.dark .footer-callout h2 {
+  color: var(--vp-c-text-1);
+}
+
+.dark .footer-callout p {
+  color: var(--vp-c-text-2);
+}
+
 .apple-site-footer {
   max-width: 1060px;
   margin: 0 auto 56px;
@@ -3743,7 +3795,7 @@ a {
 
 .dark .feature-card {
   border: 1px solid rgba(255, 255, 255, 0.06);
-  background: var(--vp-c-bg-mute);
+  background: var(--vp-c-bg-soft);
 }
 
 .feature-card:hover {
@@ -3788,6 +3840,14 @@ a {
   margin-bottom: 0;
 }
 
+.dark .feature-content h4 {
+  color: var(--vp-c-text-1);
+}
+
+.dark .feature-content p {
+  color: var(--vp-c-text-2);
+}
+
 @media (max-width: 960px) {
   .feature-grid {
     grid-template-columns: repeat(2, 1fr);