diff --git a/index.html b/index.html
index 769407b..d69854f 100644
--- a/index.html
+++ b/index.html
@@ -71,11 +71,12 @@
       }
 
       .badge {
-        background: rgba(255, 255, 255, 0.2);
+        background: #A9A9A980;
         padding: 6px 12px;
         border-radius: 20px;
         font-size: 14px;
         font-weight: 500;
+        border: 1px solid #F8FAFC80;
       }
 
       .demo-section {
@@ -109,14 +110,16 @@
       }
 
       .demo-item {
-        background: rgba(0, 0, 0, 0.2);
+        background: rgba(169, 169, 169, 0.5);
         padding: 20px;
         border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
         text-align: center;
+        border: 1px solid rgba(248, 250, 252, 0.5);
       }
 
       .demo-item h3 {
-        color: #fff;
+        color: #ffffff;
         margin-bottom: 15px;
         font-size: 16px;
       }
@@ -124,7 +127,7 @@
       .demo-item p {
         font-size: 13px;
         margin-bottom: 15px;
-        color: rgba(255, 255, 255, 0.8);
+        color: #fafafa;
       }
 
       .feature-grid {
@@ -135,10 +138,12 @@
       }
 
       .feature-card {
-        background: rgba(0, 0, 0, 0.2);
+        background: #A9A9A980;
         padding: 20px;
         border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
         text-align: center;
+        border: 1px solid #F8FAFC80;
       }
 
       .feature-icon {
@@ -147,14 +152,14 @@
       }
 
       .feature-card h3 {
-        color: #fff;
+        color: #ffffff;
         font-size: 16px;
         margin-bottom: 10px;
       }
 
       .feature-card p {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.8);
+        color: #fafafa;
         margin: 0;
       }