diff --git a/style.css b/style.css
index fd85e20..8eb4674 100644
--- a/style.css
+++ b/style.css
@@ -268,6 +268,7 @@ body {
   text-align: center;
   max-width: 800px;
   padding: var(--space-xl) var(--space-md);
+  color: #ffffff;
 }
 
 .hero-badge {
@@ -280,6 +281,7 @@ body {
   font-weight: 500;
   margin-block-end: var(--space-md);
   border: 1px solid rgba(14, 165, 233, 0.3);
+  opacity: 1;
 }
 
 .hero-title {
@@ -288,6 +290,8 @@ body {
   line-height: 1.2;
   margin-block-end: var(--space-md);
   letter-spacing: -0.02em;
+  color: #ffffff;
+  opacity: 1;
 }
 
 .hero-title .highlight {
@@ -296,11 +300,12 @@ body {
 
 .hero-subtitle {
   font-size: 1.125rem;
-  color: var(--color-text-muted);
+  color: rgba(255, 255, 255, 0.85);
   max-width: var(--max-line-length);
   margin-inline: auto;
   margin-block-end: var(--space-lg);
   line-height: 1.8;
+  opacity: 1;
 }
 
 .hero-actions {
@@ -333,7 +338,7 @@ body {
 
 .stat-label {
   font-size: 0.9375rem;
-  color: var(--color-text-muted);
+  color: rgba(255, 255, 255, 0.7);
   margin-block-start: var(--space-xs);
 }
 
@@ -357,7 +362,7 @@ body {
 .scroll-indicator svg {
   width: 24px;
   height: 24px;
-  color: var(--color-text-muted);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 @keyframes bounce {
@@ -1486,6 +1491,55 @@ a.contact-card:focus-visible {
   transform: translateY(0);
 }
 
+/* Hero-specific reveal overrides - ensure text is always visible */
+.hero-content .reveal-fade,
+.hero-content .reveal-slide {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.hero-content .reveal-fade.revealed,
+.hero-content .reveal-slide.revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Fallback: if JS fails to add .revealed, show content after animation */
+@supports (animation-fill-mode: forwards) {
+  .hero-content .reveal-fade,
+  .hero-content .reveal-slide {
+    animation: heroReveal 0.8s ease forwards;
+    animation-delay: 0.2s;
+  }
+  
+  .hero-content .reveal-fade:nth-child(2) {
+    animation-delay: 0.4s;
+  }
+  
+  .hero-content .reveal-fade:nth-child(3) {
+    animation-delay: 0.6s;
+  }
+  
+  .hero-content .reveal-fade:nth-child(4) {
+    animation-delay: 0.8s;
+  }
+  
+  .hero-content .reveal-fade:nth-child(5) {
+    animation-delay: 1s;
+  }
+}
+
+@keyframes heroReveal {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Responsive */
 @media (max-width: 1024px) {
   .tech-grid,