diff --git a/landing-page/src/app/not-found.tsx b/landing-page/src/app/not-found.tsx
index ff503d1b..c67b883b 100644
--- a/landing-page/src/app/not-found.tsx
+++ b/landing-page/src/app/not-found.tsx
@@ -22,7 +22,7 @@ export default function NotFound() {
       <SiteNavbar />
       <main className="flex-1 flex flex-col items-center justify-center text-center px-4 pt-16">
         <h1 className="text-5xl sm:text-6xl font-serif font-bold mb-4">404</h1>
-        <p className="text-lg text-neutral-500 mb-8">
+        <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8">
           {notFoundCopy.message}
         </p>
         <div className="flex flex-wrap gap-4 justify-center">
diff --git a/landing-page/src/components/CodeShowcase.tsx b/landing-page/src/components/CodeShowcase.tsx
index 61ed9a26..b7235338 100644
--- a/landing-page/src/components/CodeShowcase.tsx
+++ b/landing-page/src/components/CodeShowcase.tsx
@@ -14,7 +14,7 @@ export function CodeShowcase() {
             <h2 className="text-4xl md:text-5xl font-serif font-bold tracking-tight text-balance mb-6">
               30-second<br />setup.<br />Any framework.
             </h2>
-            <p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg font-medium">
+            <p className="text-neutral-700 dark:text-neutral-300 mb-8 max-w-lg font-medium">
               Fully typed, tree-shakable, and designed to match your application's design system out of the box.
             </p>
             
@@ -60,7 +60,7 @@ export function CodeShowcase() {
                   {"\n  "}
                   <code className="text-[#00C853]">return</code> <code className="text-white">(</code>
                   {"\n    "}
-                  <code className="text-neutral-500 font-medium">{"// Just drop it wherever you need it"}</code>
+                  <code className="text-neutral-300 font-medium">{"// Just drop it wherever you need it"}</code>
                   {"\n    "}
                   <code className="text-white">{"<"}</code>
                   <code className="text-[#FFCC00]">SocialShare</code>
diff --git a/landing-page/src/components/EverywhereFeatures.tsx b/landing-page/src/components/EverywhereFeatures.tsx
index 4bc6c8c0..61181ee4 100644
--- a/landing-page/src/components/EverywhereFeatures.tsx
+++ b/landing-page/src/components/EverywhereFeatures.tsx
@@ -92,7 +92,7 @@ export function EverywhereFeatures() {
                 <div className={`absolute top-0 left-0 w-full h-full bg-linear-to-r from-transparent via-white/20 to-transparent ${hoveredCard === i ? 'animate-shine' : ''}`} />
               </div>
               
-              <span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
+              <span aria-hidden="true" className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-60 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
                 {card.num}
               </span>
               
@@ -104,7 +104,7 @@ export function EverywhereFeatures() {
 
                 <div>
                   <Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer hover:scale-105 hover:shadow-lg transform focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
-                    Learn more
+                    Learn more<span className="sr-only"> about {card.title}</span>
                   </Link>
                 </div>
               </div>
diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index 2e0c9d63..eed39517 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -9,9 +9,10 @@ interface FeatureCardProps {
   index: number;
   rotatedCard: number | null;
   handleCardClick: (index: number) => void;
+  tabIndex?: number;
 }
 
-function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardProps) {
+function FeatureCard({ card, index, rotatedCard, handleCardClick, tabIndex }: FeatureCardProps) {
   return (
     <div
       onClick={() => handleCardClick(index)}
@@ -24,7 +25,7 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
         perspective: '1000px',
       }}
     >
-      <span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
+      <span aria-hidden="true" className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-60 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
         {card.num}
       </span>
 
@@ -35,8 +36,8 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
         </p>
 
         <div>
-          <Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
-            Learn more
+          <Link href="/docs" tabIndex={tabIndex} className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
+            Learn more<span className="sr-only"> about {card.title}</span>
           </Link>
         </div>
       </div>
@@ -117,9 +118,9 @@ export function Features() {
               <FeatureCard key={i} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
             ))}
           </div>
-          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true">
+          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert={true}>
             {cards.map((card, i) => (
-              <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
+              <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} tabIndex={-1} />
             ))}
           </div>
         </div>
diff --git a/landing-page/src/components/Footer.tsx b/landing-page/src/components/Footer.tsx
index 148c583c..7bc6de7e 100644
--- a/landing-page/src/components/Footer.tsx
+++ b/landing-page/src/components/Footer.tsx
@@ -33,7 +33,7 @@ export function Footer() {
               <br />
               Right <span className="text-[#00C853]">now.</span>
             </h2>
-            <p className="text-neutral-500 max-w-sm text-sm font-medium leading-relaxed mt-6">
+            <p className="text-neutral-400 max-w-sm text-sm font-medium leading-relaxed mt-6">
               Two CDN tags, one function call. No account, no API key, no
               <br className="hidden sm:block" />
               build step. Your users will be sharing in under 30
@@ -174,7 +174,7 @@ export function Footer() {
       {/* Bottom bar */}
       <div className="border-t border-neutral-900 py-8">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center">
-          <div className="text-sm text-neutral-500 text-center">
+          <div className="text-sm text-neutral-400 text-center">
             Open Source under MIT License &middot; &copy; 2016-
             {new Date().getFullYear()} AOSSIE. All rights reserved.
           </div>
diff --git a/landing-page/src/components/Hero.tsx b/landing-page/src/components/Hero.tsx
index 77a68814..d889ad30 100644
--- a/landing-page/src/components/Hero.tsx
+++ b/landing-page/src/components/Hero.tsx
@@ -54,7 +54,7 @@ export function Hero() {
                 whileTap={{ scale: 0.9 }}
                 href="/docs/manual"
                 onClick={(e) => handleNavigate(e, '/docs/manual')}
-                className="bg-[#00C853] text-white px-6 py-3 rounded-full font-bold hover:brightness-110 transition-all border-2 border-transparent dark:border-none flex items-center gap-2 cursor-pointer group"
+                className="bg-[#00C853] text-black px-6 py-3 rounded-full font-bold hover:brightness-110 transition-all border-2 border-transparent dark:border-none flex items-center gap-2 cursor-pointer group"
               >
                 Add Manually <span className="group-hover:translate-x-1 transition-transform">→</span>
               </motion.a>
@@ -79,11 +79,11 @@ export function Hero() {
           <div className="relative mx-auto w-full max-w-md lg:max-w-none lg:ml-auto perspective-1000">
             <div className="rounded-xl border-2 border-[#FFCC00] bg-card p-6 shadow-[0_0_30px_rgba(255,204,0,0.15)] transform-gpu hover:-translate-y-2 transition-transform duration-500">
               <div className="flex items-center justify-between mb-8 cursor-move">
-                <h3 className="font-serif text-2xl font-bold text-center w-full text-[#00C853]">Share this Page</h3>
+                <h2 className="font-serif text-2xl font-bold text-center w-full text-[#00C853]">Share this Page</h2>
                 <button className="absolute right-4 top-4 text-neutral-400 hover:text-foreground">✕</button>
               </div>
 
-              <p className="text-center text-sm text-neutral-500 mb-6">Where do you want to share this link?</p>
+              <p className="text-center text-sm text-card-foreground/70 mb-6">Where do you want to share this link?</p>
 
               <div className="grid grid-cols-5 gap-4 mb-8">
                 {/* Mock Icons */}
@@ -98,13 +98,13 @@ export function Hero() {
                     <div className={`w-10 h-10 md:w-12 md:h-12 rounded-full ${network.bg} flex items-center justify-center text-white shadow-lg transition-transform group-hover:-translate-y-1`}>
                       {network.name[0]}
                     </div>
-                    <span className="text-[10px] md:text-xs text-neutral-500">{network.name}</span>
+                    <span className="text-[10px] md:text-xs text-card-foreground/70">{network.name}</span>
                   </div>
                 ))}
               </div>
 
               <div className="flex items-center gap-2 bg-background rounded-full p-1 pl-4 border-2 border-[#FFCC00]">
-                <span className="text-xs md:text-sm text-neutral-500 truncate flex-1 hidden sm:block">social-share-button.aossie.org</span>
+                <span className="text-xs md:text-sm text-foreground/70 truncate flex-1 hidden sm:block">social-share-button.aossie.org</span>
                 <button className="bg-[#FFCC00] text-black px-4 py-2 rounded-full text-sm font-bold">
                   Copy Link
                 </button>
diff --git a/landing-page/src/components/Playground.tsx b/landing-page/src/components/Playground.tsx
index d7708be8..d0744088 100644
--- a/landing-page/src/components/Playground.tsx
+++ b/landing-page/src/components/Playground.tsx
@@ -114,14 +114,14 @@ export function Playground() {
               </div>
 
               {!isIconOnly && (
-                <p className={`text-center text-sm mb-8 font-medium ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
+                <p className={`text-center text-sm mb-8 font-medium ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
                   Share this page to your social networks:
                 </p>
               )}
 
               <div className={`gap-4 mb-10 justify-center ${isCompact || isIconOnly ? "flex flex-wrap" : "grid grid-cols-5"}`}>
                 {activePlatforms.length === 0 && (
-                  <p className="text-xs text-neutral-500">No platforms selected — turn one on in the panel →</p>
+                  <p className={`text-xs ${isDark ? 'text-neutral-300' : 'text-neutral-700'}`}>No platforms selected — turn one on in the panel →</p>
                 )}
                 {activePlatforms.map((network, i) => (
                   <div key={i} className="flex flex-col items-center gap-3">
@@ -132,7 +132,7 @@ export function Playground() {
                       {network.icon}
                     </div>
                     {!isIconOnly && (
-                      <span className={`text-[11px] font-medium ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
+                      <span className={`text-[11px] font-medium ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
                         {network.name}
                       </span>
                     )}
@@ -146,7 +146,7 @@ export function Playground() {
                     isDark ? "border-neutral-600" : "border-neutral-300"
                   }`}
                 >
-                  <span className={`text-sm truncate flex-1 ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
+                  <span className={`text-sm truncate flex-1 ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
                     https://socialsharebutton.com
                   </span>
                   <button
@@ -207,7 +207,7 @@ export function Playground() {
 
                 {/* Theme Config */}
                 <div>
-                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Theme</h4>
+                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Theme</h4>
                    <div className="flex rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-[#0a0a0a] p-1">
                      <button
                        onClick={() => setTheme("light")}
@@ -234,7 +234,7 @@ export function Playground() {
 
                 {/* Button Style Config */}
                 <div>
-                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Button Style</h4>
+                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Button Style</h4>
                    <div className="grid grid-cols-2 gap-2">
                      {BUTTON_STYLES.map((s) => (
                        <button
@@ -243,7 +243,7 @@ export function Playground() {
                          className={`py-2 text-sm rounded-md transition-colors ${
                            style === s.key
                              ? "font-bold text-black bg-[#FFCC00] shadow-xs"
-                             : "font-medium text-neutral-500 dark:text-neutral-400 border border-neutral-200 dark:border-neutral-800"
+                             : "font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-neutral-800"
                          }`}
                        >
                          {s.label}
@@ -254,7 +254,7 @@ export function Playground() {
 
                 {/* Platforms Config */}
                 <div>
-                  <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Platforms</h4>
+                  <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Platforms</h4>
                   <div className="space-y-2">
                     {platforms.map((platform, i) => (
                       <button
@@ -273,7 +273,7 @@ export function Playground() {
                           >
                             {platform.icon}
                           </div>
-                          <span className={`text-xs font-medium ${platform.active ? "text-foreground" : "text-neutral-500"}`}>
+                          <span className={`text-xs font-medium ${platform.active ? "text-foreground" : "text-neutral-700 dark:text-neutral-300"}`}>
                             {platform.name}
                           </span>
                         </div>
@@ -299,7 +299,7 @@ export function Playground() {
 
                 {/* Button Color Config */}
                 <div>
-                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Button Color</h4>
+                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Button Color</h4>
                    <div className="flex gap-2">
                      {COLORS.map((c) => (
                        <button