add

dist/output.css

@@ -1276,6 +1276,11 @@ body:is(.dark *) {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
@@ -1524,9 +1529,9 @@ body:is(.dark *) {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.ring-indigo-500 {
+.ring-gray-400 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
 }
 
 .ring-white\/10 {
@@ -1625,9 +1630,9 @@ body:is(.dark *) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:bg-indigo-400:hover {
+.hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
 }
 
 .hover\:bg-white\/20:hover {
@@ -1652,8 +1657,8 @@ body:is(.dark *) {
   outline-offset: 2px;
 }
 
-.focus-visible\:outline-indigo-500:focus-visible {
+.focus-visible\:outline-gray-500:focus-visible {
-  outline-color: #6366f1;
+  outline-color: #6b7280;
 }
 
 .focus-visible\:outline-white:focus-visible {

src/index.html

@@ -220,7 +220,7 @@
                 </div>
             </section>
 
-             <!-- Home Section 8 -->
+             <!-- Home Section 9 -->
              <div class="bg-BLACK py-24 sm:py-32">
                 <div class="mx-auto max-w-7xl px-6 lg:px-8">
                   <div class="mx-auto max-w-5xl text-center">
@@ -290,10 +290,10 @@
                           </li>
                       </ul>
                     </div>
-                    <div class="rounded-3xl bg-white/5 p-8 ring-2 ring-indigo-500 xl:p-10">
+                    <div class="rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
                       <div class="flex items-center justify-between gap-x-4">
                         <h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
-                        <p class="rounded-full bg-indigo-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
+                        <p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
                       </div>
                       <p class="mt-4 text-sm/6 text-gray-300">A plan that scales with your rapidly growing business.</p>
                       <p class="mt-6 flex items-baseline gap-x-1">
@@ -302,7 +302,7 @@
                         <!-- Payment frequency, update based on frequency toggle state -->
                         <span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
                       </p>
-                      <a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Buy plan</a>
+                      <a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-gray-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">Buy plan</a>
                       <ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
                         <li class="flex gap-x-3">
                           <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">