Fix responsiveness issues: improved mobile layout, better text scaling, and optimized background shapes

Author: D3-crypto

src/App.css

@@ -382,26 +382,32 @@ body::before {
 }
 
 .shape-1 {
-  width: 500px;
-  height: 500px;
-  top: -250px;
-  right: -250px;
+  width: 40vw;
+  height: 40vw;
+  max-width: 500px;
+  max-height: 500px;
+  top: -20vw;
+  right: -20vw;
   animation: float1 20s ease-in-out infinite;
   background: linear-gradient(45deg, rgba(59, 130, 246, 0.4), rgba(6, 182, 212, 0.4));
 }
 
 .shape-2 {
-  width: 400px;
-  height: 400px;
-  bottom: -200px;
-  left: -200px;
+  width: 32vw;
+  height: 32vw;
+  max-width: 400px;
+  max-height: 400px;
+  bottom: -16vw;
+  left: -16vw;
   animation: float2 25s ease-in-out infinite;
   background: linear-gradient(45deg, rgba(16, 185, 129, 0.4), rgba(6, 214, 160, 0.4));
 }
 
 .shape-3 {
-  width: 300px;
-  height: 300px;
+  width: 24vw;
+  height: 24vw;
+  max-width: 300px;
+  max-height: 300px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -438,12 +444,14 @@ body::before {
 
 /* Spectacular title animation */
 .hero-title {
-  font-size: 3.5rem;
+  font-size: clamp(2rem, 8vw, 3.5rem);
   font-weight: 800;
   line-height: 1.2;
   margin-bottom: 1.5rem;
   perspective: 1000px;
   color: white;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .hero-title-word {
@@ -471,18 +479,19 @@ body::before {
 }
 
 .hero-subtitle {
-  font-size: 1.25rem;
+  font-size: clamp(1rem, 3vw, 1.25rem);
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 2rem;
   line-height: 1.6;
-  min-height: 3rem;
+  min-height: auto;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 1rem;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   border-left: 3px solid rgba(59, 130, 246, 0.8);
+  word-wrap: break-word;
 }
 
 .hero-features {
@@ -2742,10 +2751,6 @@ section {
     padding: 0 2rem;
   }
 
-  .hero-title {
-    font-size: 3rem;
-  }
-  
   .hero-content {
     gap: 3rem;
   }
@@ -2763,6 +2768,22 @@ section {
     padding: 0.8rem 1.2rem;
     font-size: 0.9rem;
   }
+  
+  /* Reduce background shapes */
+  .shape-1 {
+    width: 35vw;
+    height: 35vw;
+  }
+  
+  .shape-2 {
+    width: 28vw;
+    height: 28vw;
+  }
+  
+  .shape-3 {
+    width: 20vw;
+    height: 20vw;
+  }
 }
 
 /* Tablets */
@@ -2795,35 +2816,37 @@ section {
     gap: 2rem;
   }
 
-  .hero-title {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
+  .hero-text {
+    order: 1;
   }
 
-  .hero-subtitle {
-    font-size: 1.1rem;
-    margin-bottom: 1.5rem;
+  .hero-image {
+    order: 2;
   }
 
   .hero-features {
     justify-content: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
+    flex-wrap: wrap;
   }
 
   .feature {
     padding: 0.7rem 1rem;
     font-size: 0.85rem;
+    min-width: 120px;
   }
 
   .hero-buttons {
     justify-content: center;
     gap: 0.8rem;
+    flex-wrap: wrap;
   }
 
   .cta-button {
     padding: 0.8rem 1.5rem;
     font-size: 0.9rem;
+    min-width: 150px;
   }
 
   .phone-mockup {
@@ -2835,6 +2858,7 @@ section {
   .social-buttons {
     justify-content: center;
     gap: 1rem;
+    flex-wrap: wrap;
   }
 
   .social-btn {
@@ -2913,18 +2937,19 @@ section {
   }
 
   .hero-title {
-    font-size: 2.2rem;
-    line-height: 1.1;
+    margin-bottom: 0.8rem;
   }
 
   .hero-title-word {
+    display: inline-block;
+    margin-bottom: 0.3rem;
     margin-right: 0.3rem;
     font-size: 0.95em;
   }
 
   .hero-subtitle {
-    font-size: 1rem;
     padding: 0.8rem;
+    margin-bottom: 1rem;
   }
 
   .hero-features {
@@ -2987,19 +3012,18 @@ section {
   }
 
   .hero-title {
-    font-size: 1.8rem;
     margin-bottom: 0.8rem;
   }
 
   .hero-title-word {
-    display: block;
+    display: inline-block;
     margin-bottom: 0.2rem;
-    margin-right: 0;
+    margin-right: 0.2rem;
     text-align: center;
+    width: auto;
   }
 
   .hero-subtitle {
-    font-size: 0.9rem;
     padding: 0.6rem;
     margin-bottom: 1rem;
   }
@@ -3089,28 +3113,38 @@ section {
     padding: 0 0.5rem;
   }
 
-  .hero-title {
-    font-size: 1.5rem;
+  .hero {
+    padding: 3rem 0 1rem;
   }
 
-  .hero-subtitle {
-    font-size: 0.85rem;
+  .hero-features {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.6rem;
   }
 
   .feature {
     padding: 0.5rem 0.6rem;
     font-size: 0.75rem;
+    width: 90%;
+    max-width: 200px;
   }
 
   .cta-button {
     padding: 0.7rem 0.8rem;
     font-size: 0.8rem;
+    width: 90%;
+    max-width: 200px;
   }
 
   .phone-mockup {
     width: 150px;
     height: 300px;
   }
+  
+  .hero-content {
+    gap: 1rem;
+  }
 }
 
 /* Smooth scrolling */