Section 4: All buttons are not sequenced; do sequence

index.html

@@ -287,27 +287,30 @@
       <h2 class="text-3xl font-bold text-center text-[var(--vlc-navy)] mb-12">And There's So Much More</h2>
       
       <div class="grid md:grid-cols-3 gap-8">
-        <!-- Regulatory Compliance -->
+        <!-- Step 1: Regulatory Compliance -->
         <div class="bg-[var(--vlc-tint)] p-8 rounded-xl">
+          <div class="chip inline-flex items-center px-3 py-1 rounded-full text-xs font-bold mb-4">Step 1</div>
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Regulatory Compliance</h3>
           <p class="text-gray-700 mb-6">Partnering with us ensures that we understand and comply with the legal frameworks and regulatory standards concerning data security. We handle compliance and diligence, so you don't have to worry about it.</p>
-          <a href="https://www.vlcsolutions.com/compliance.html" class="btn-primary inline-block px-4 py-2 rounded-md text-sm font-medium">Learn More</a>
-</div>
+          <a href="https://www.vlcsolutions.com/compliance.html" class="btn-primary inline-block px-4 py-2 rounded-md text-sm font-medium">Start with Compliance</a>
+        </div>
 
-        <!-- Information Security -->
+        <!-- Step 2: Information Security -->
         <div class="bg-[var(--vlc-tint)] p-8 rounded-xl">
+          <div class="chip inline-flex items-center px-3 py-1 rounded-full text-xs font-bold mb-4">Step 2</div>
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Information Security and Confidentiality</h3>
           <p class="text-gray-700 mb-6">We maintain the utmost respect for the confidentiality of your information. Our team consistently undertakes tests, revamps, and streamlines our data protection measures to ensure your information is secure and intact at every level, from storage to access.</p>
-          <a href="https://www.vlcsolutions.com/data-defence.html" class="btn-primary inline-block px-4 py-2 rounded-md text-sm font-medium">Learn More</a>
-</div>
+          <a href="https://www.vlcsolutions.com/data-defence.html" class="btn-primary inline-block px-4 py-2 rounded-md text-sm font-medium">Next: Security Measures</a>
+        </div>
 
-        <!-- People & Technology -->
+        <!-- Step 3: People & Technology -->
         <div class="bg-[var(--vlc-tint)] p-8 rounded-xl">
+          <div class="chip inline-flex items-center px-3 py-1 rounded-full text-xs font-bold mb-4">Step 3</div>
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Our People and Technology: The Foundation of Security</h3>
           <p class="text-gray-700 mb-6">Security is part of our culture, and our personnel are key to our success. All members of the VLC team go through intensive training, which ensures they can protect your information and guarantee the integrity of our security ecosystem.</p>
-          <a href="https://www.vlcsolutions.com/procedures-and-people.html" class="btn-primary inline-block px-4 py-2 rounded-md text-sm font-medium">Learn More</a>
+          <a href="https://www.vlcsolutions.com/procedures-and-people.html" class="btn-primary inline-block px-4 py-2 rounded-md text-sm font-medium">Finalize Security Setup</a>
+        </div>
 </div>
-      </div>
     </div>
   </section>
 

style.css

@@ -27,11 +27,23 @@ p {
 .card p:last-child {
     margin-bottom: 0;
 }
+/* Section 4 Steps and buttons */
+.chip {
+  background: linear-gradient(135deg, var(--vlc-navy), #0b3b8f);
+  color: #fff;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
 
-/* Section 4 Learn More buttons alignment */
 section.py-16.bg-white .btn-primary {
-    display: block;
-    width: 100%;
-    text-align: center;
+  display: block;
+  width: 100%;
+  text-align: center;
+  margin-top: auto;
 }
 
+section.py-16.bg-white .bg-\[\-\-vlc-tint\] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}