.

src/styles/index.css

@@ -1,5 +1,20 @@
 /* index.css */
+body {
+    background-image: url("/images/pattern-randomized.svg");
+    background-attachment: fixed;
+    background-size: cover;
+}
 
+.intro.module {
+    width: 70%;
+    max-width: 900px;
+    min-width: 300px;
+    line-height: 1.6em;
+}
+
+.module h2 {
+    font-size: 1.8rem;
+}
 /*? ↓  Start Intro  ↓ */
 
 .intro {
@@ -8,10 +23,16 @@
 
 .intro h1 {
     color: #495057;
+    margin-bottom: 20px;
 }
 
 .intro h1 .accent-name {
-    color: #2e97be;
+    color: #ea7e0b;
+}
+
+.intro p {
+    font-size: 1.1em;
+    font-weight: 600;
 }
 
 /*? ↓  Start Benefits Section  ↓ */
@@ -32,42 +53,83 @@
     margin-bottom: 20px;
 }
 
+.benefits-container p, .transition p {
+    font-size: 1.2em;
+    font-weight: 600;
+}
+
 .benefits-visual {
     position: relative;
     display: grid;
     gap: 20px;
     width: 100%;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    min-height: 150px;
 }
 
 .benefits-card {
-    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 150px;
+    background-color: rgba(234, 126, 11, .4);
     border: 1px solid #dee2e6;
     border-radius: 10px;
     padding: 15px 10px 15px 10px;
     text-align: center;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
 }
 
 .benefits-card:hover {
     transform: translateY(-5px);
+    background: linear-gradient(to right, #DDF0FF 0%, #fff 40%, #fff 60%, #DDF0FF 100%);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
 
-.benefits-card ul {
-    list-style: none;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.5s ease-in-out;
-    padding: 0;
+.benefits-card h3 {
+    font-size: 1.8em;
+    color: #495057;
+    transition: font-size 0.4s ease-in-out;
 }
 
-.benefits-card:hover ul {
-    max-height: var(--ul-height);
-    margin-top: 10px;
+.benefits-card ul {
+    list-style: inside;
+    padding-top: 10px;
 }
 
+.hover-list {
+    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+}
+
+.benefits-card:hover .hover-list {
+    max-height: 300px;
+    opacity: 1;
+}
+
+.benefits-card:hover h3 {
+    font-size: 1.2em;
+    text-decoration: underline;
+}
+
+.transition {
+    margin-top: 30px;
+    font-weight: 600;
+}
+
+.transition p:first-child {
+    font-size: 1.3em;
+}
+
+.transition p:last-child {
+    font-size: 1.4rem;
+}
+
+
 
 /*? ↓  Start Services Container  ↓ */
 
@@ -75,7 +137,7 @@
     position: relative;
     width: 100%;
     max-width: 800px;
-    margin: 50px auto;
+    margin: 10px auto;
     overflow: hidden;
     min-height: 400px;
 }
@@ -144,7 +206,7 @@
 }
 
 .carousel-button:hover {
-    background-color: rgba(46, 151, 190, 1);
+    background-color: #ea7e0b;
 }
 
 .prev-button {
@@ -156,6 +218,9 @@
 }
 
 /*? ↓  Start CTA Section  ↓ */
+.inspiration {
+    padding-top: 20px;
+}
 
 .cta-section {
     max-width: 1200px;
@@ -173,9 +238,9 @@
 .demos-link,
 .cta-button {
     display: inline-block;
-    padding: 12px 25px;
-    margin-top: 20px;
-    background-color: #2e97be;
+    padding: 8px 25px;
+    margin: 20px 0px 20px 0px;
+    background-color: #ea7e0b;
     color: #fff;
     text-decoration: none;
     font-weight: 600;
@@ -185,7 +250,12 @@
 
 .demos-link:hover,
 .cta-button:hover {
-    background-color: #2781a5;
+    background-color: #2e97be;
+    box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
+}
+
+.demos-link:active, .cta-button:active {
+    background-color: #ea7e0b;
     box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
 }