From aa3750d50d0238c9914357dc55a4ca68041fc3f4 Mon Sep 17 00:00:00 2001
From: Ryan Milly <rdmilly@gmail.com>
Date: Sat, 6 Dec 2025 15:00:51 -0800
Subject: [PATCH] FAQ section updates - border styling and animation attempts

---
 index.html |  92 ++++++++--------
 styles.css | 300 +++++++++++++++++++++++------------------------------
 2 files changed, 176 insertions(+), 216 deletions(-)

diff --git a/index.html b/index.html
index 1744730..6ed9d53 100644
--- a/index.html
+++ b/index.html
@@ -296,36 +296,36 @@
                         <circle cx="-2" cy="50" r="4" class="light-red"/>
                         <circle cx="10" cy="36" r="4" class="light-green"/>
                         <circle cx="22" cy="22" r="4" class="light-yellow"/>
-                        <circle cx="34" cy="8" r="4" class="light-red"/>
-                        <circle cx="46" cy="-6" r="4" class="light-green"/>
-                        <circle cx="58" cy="-20" r="4" class="light-yellow"/>
+                        <circle cx="34" cy="8" r="4" class="light-blue"/>
+                        <circle cx="46" cy="-6" r="4" class="light-purple"/>
+                        <circle cx="58" cy="-20" r="4" class="light-red"/>
                         <circle cx="65" cy="-28" r="5" class="light-star"/>
                     </g>
                     <!-- Roof peak lights - right slope (follows roof from 65,-30 to 138,55) -->
                     <!-- Slope: rise=85, run=73, so for each 12px horizontal, rise ~14px -->
                     <g class="christmas-lights roof-lights">
-                        <circle cx="72" cy="-20" r="4" class="light-yellow"/>
-                        <circle cx="84" cy="-6" r="4" class="light-green"/>
-                        <circle cx="96" cy="8" r="4" class="light-red"/>
-                        <circle cx="108" cy="22" r="4" class="light-yellow"/>
-                        <circle cx="120" cy="36" r="4" class="light-green"/>
-                        <circle cx="132" cy="50" r="4" class="light-red"/>
+                        <circle cx="72" cy="-20" r="4" class="light-green"/>
+                        <circle cx="84" cy="-6" r="4" class="light-yellow"/>
+                        <circle cx="96" cy="8" r="4" class="light-blue"/>
+                        <circle cx="108" cy="22" r="4" class="light-purple"/>
+                        <circle cx="120" cy="36" r="4" class="light-red"/>
+                        <circle cx="132" cy="50" r="4" class="light-green"/>
                     </g>
 
                     <!-- Roofline bottom edge lights -->
                     <g class="christmas-lights eave-lights">
-                        <circle cx="-5" cy="55" r="3" class="light-blue"/>
-                        <circle cx="8" cy="55" r="3" class="light-red"/>
-                        <circle cx="21" cy="55" r="3" class="light-green"/>
-                        <circle cx="34" cy="55" r="3" class="light-yellow"/>
-                        <circle cx="47" cy="55" r="3" class="light-blue"/>
+                        <circle cx="-5" cy="55" r="3" class="light-red"/>
+                        <circle cx="8" cy="55" r="3" class="light-green"/>
+                        <circle cx="21" cy="55" r="3" class="light-yellow"/>
+                        <circle cx="34" cy="55" r="3" class="light-blue"/>
+                        <circle cx="47" cy="55" r="3" class="light-purple"/>
                         <circle cx="60" cy="55" r="3" class="light-red"/>
                         <circle cx="73" cy="55" r="3" class="light-green"/>
                         <circle cx="86" cy="55" r="3" class="light-yellow"/>
                         <circle cx="99" cy="55" r="3" class="light-blue"/>
-                        <circle cx="112" cy="55" r="3" class="light-red"/>
-                        <circle cx="125" cy="55" r="3" class="light-green"/>
-                        <circle cx="135" cy="55" r="3" class="light-yellow"/>
+                        <circle cx="112" cy="55" r="3" class="light-purple"/>
+                        <circle cx="125" cy="55" r="3" class="light-red"/>
+                        <circle cx="135" cy="55" r="3" class="light-green"/>
                     </g>
 
                     <!-- Window frame lights -->
@@ -333,37 +333,37 @@
                         <!-- Left window frame -->
                         <circle cx="15" cy="77" r="2.5" class="light-red"/>
                         <circle cx="15" cy="90" r="2.5" class="light-green"/>
-                        <circle cx="15" cy="103" r="2.5" class="light-red"/>
-                        <circle cx="15" cy="116" r="2.5" class="light-green"/>
-                        <circle cx="27" cy="128" r="2.5" class="light-yellow"/>
+                        <circle cx="15" cy="103" r="2.5" class="light-yellow"/>
+                        <circle cx="15" cy="116" r="2.5" class="light-blue"/>
+                        <circle cx="27" cy="128" r="2.5" class="light-purple"/>
                         <circle cx="42" cy="128" r="2.5" class="light-red"/>
                         <circle cx="59" cy="116" r="2.5" class="light-green"/>
                         <circle cx="59" cy="103" r="2.5" class="light-yellow"/>
-                        <circle cx="59" cy="90" r="2.5" class="light-red"/>
-                        <circle cx="59" cy="77" r="2.5" class="light-green"/>
+                        <circle cx="59" cy="90" r="2.5" class="light-blue"/>
+                        <circle cx="59" cy="77" r="2.5" class="light-purple"/>
                         <!-- Right window frame -->
-                        <circle cx="71" cy="77" r="2.5" class="light-yellow"/>
-                        <circle cx="71" cy="90" r="2.5" class="light-red"/>
-                        <circle cx="71" cy="103" r="2.5" class="light-green"/>
-                        <circle cx="71" cy="116" r="2.5" class="light-yellow"/>
-                        <circle cx="83" cy="128" r="2.5" class="light-red"/>
-                        <circle cx="98" cy="128" r="2.5" class="light-green"/>
-                        <circle cx="115" cy="116" r="2.5" class="light-yellow"/>
-                        <circle cx="115" cy="103" r="2.5" class="light-red"/>
-                        <circle cx="115" cy="90" r="2.5" class="light-green"/>
-                        <circle cx="115" cy="77" r="2.5" class="light-yellow"/>
+                        <circle cx="71" cy="77" r="2.5" class="light-red"/>
+                        <circle cx="71" cy="90" r="2.5" class="light-green"/>
+                        <circle cx="71" cy="103" r="2.5" class="light-yellow"/>
+                        <circle cx="71" cy="116" r="2.5" class="light-blue"/>
+                        <circle cx="83" cy="128" r="2.5" class="light-purple"/>
+                        <circle cx="98" cy="128" r="2.5" class="light-red"/>
+                        <circle cx="115" cy="116" r="2.5" class="light-green"/>
+                        <circle cx="115" cy="103" r="2.5" class="light-yellow"/>
+                        <circle cx="115" cy="90" r="2.5" class="light-blue"/>
+                        <circle cx="115" cy="77" r="2.5" class="light-purple"/>
                     </g>
 
                     <!-- Door frame lights -->
                     <g class="christmas-lights door-lights">
                         <circle cx="47" cy="128" r="2.5" class="light-red"/>
                         <circle cx="47" cy="140" r="2.5" class="light-green"/>
-                        <circle cx="47" cy="152" r="2.5" class="light-red"/>
-                        <circle cx="47" cy="164" r="2.5" class="light-green"/>
-                        <circle cx="83" cy="128" r="2.5" class="light-green"/>
+                        <circle cx="47" cy="152" r="2.5" class="light-yellow"/>
+                        <circle cx="47" cy="164" r="2.5" class="light-blue"/>
+                        <circle cx="83" cy="128" r="2.5" class="light-purple"/>
                         <circle cx="83" cy="140" r="2.5" class="light-red"/>
                         <circle cx="83" cy="152" r="2.5" class="light-green"/>
-                        <circle cx="83" cy="164" r="2.5" class="light-red"/>
+                        <circle cx="83" cy="164" r="2.5" class="light-yellow"/>
                     </g>
                 </g>
 
@@ -374,13 +374,13 @@
                     <circle cx="-10" cy="180" r="3.5" class="light-green"/>
                     <circle cx="8" cy="183" r="3.5" class="light-yellow"/>
                     <circle cx="28" cy="185" r="3.5" class="light-blue"/>
-                    <circle cx="48" cy="186" r="3.5" class="light-red"/>
-                    <circle cx="68" cy="186" r="3.5" class="light-green"/>
-                    <circle cx="88" cy="185" r="3.5" class="light-yellow"/>
-                    <circle cx="108" cy="183" r="3.5" class="light-blue"/>
-                    <circle cx="128" cy="180" r="3.5" class="light-red"/>
-                    <circle cx="145" cy="175" r="3.5" class="light-green"/>
-                    <circle cx="160" cy="170" r="3.5" class="light-yellow"/>
+                    <circle cx="48" cy="186" r="3.5" class="light-purple"/>
+                    <circle cx="68" cy="186" r="3.5" class="light-red"/>
+                    <circle cx="88" cy="185" r="3.5" class="light-green"/>
+                    <circle cx="108" cy="183" r="3.5" class="light-yellow"/>
+                    <circle cx="128" cy="180" r="3.5" class="light-blue"/>
+                    <circle cx="145" cy="175" r="3.5" class="light-purple"/>
+                    <circle cx="160" cy="170" r="3.5" class="light-red"/>
                 </g>
 
                 <!-- House 5 - Plain cottage (jealous) -->
@@ -436,10 +436,10 @@
                     <polygon points="18,15 6,46 30,46" fill="#2d5a2d"/>
                     <!-- Tree lights -->
                     <circle cx="8" cy="45" r="2.5" class="light-red tree-light"/>
-                    <circle cx="28" cy="42" r="2.5" class="light-yellow tree-light"/>
-                    <circle cx="12" cy="32" r="2.5" class="light-green tree-light"/>
+                    <circle cx="28" cy="42" r="2.5" class="light-green tree-light"/>
+                    <circle cx="12" cy="32" r="2.5" class="light-yellow tree-light"/>
                     <circle cx="24" cy="28" r="2.5" class="light-blue tree-light"/>
-                    <circle cx="18" cy="18" r="2.5" class="light-red tree-light"/>
+                    <circle cx="18" cy="18" r="2.5" class="light-purple tree-light"/>
                     <circle cx="18" cy="5" r="4" class="light-star tree-light"/>
                 </g>
                 <g class="tree" transform="translate(770, 268)">
diff --git a/styles.css b/styles.css
index 38be689..9198b36 100644
--- a/styles.css
+++ b/styles.css
@@ -526,6 +526,17 @@ button {
     50% { opacity: 0.65; filter: drop-shadow(0 0 3px #33ccff) drop-shadow(0 0 5px #00aaff); }
 }
 
+.light-purple {
+    fill: #cc33ff;
+    filter: drop-shadow(0 0 6px #cc33ff) drop-shadow(0 0 10px #aa00ff);
+    animation: light-twinkle-purple 1.9s infinite ease-in-out;
+}
+
+@keyframes light-twinkle-purple {
+    0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #cc33ff) drop-shadow(0 0 10px #aa00ff); }
+    50% { opacity: 0.65; filter: drop-shadow(0 0 3px #cc33ff) drop-shadow(0 0 5px #aa00ff); }
+}
+
 /* Star light - extra bright */
 .light-star {
     fill: #ffffcc;
@@ -732,7 +743,7 @@ button {
         transparent 60%,
         transparent 100%
     );
-    background-size: 200% 100%;
+    background-size: 300% 100%;
     animation: guide-shimmer 4s ease-in-out infinite;
 }
 
@@ -874,7 +885,7 @@ button {
         #ffd700 60%,
         #ffd700 100%
     );
-    background-size: 200% 100%;
+    background-size: 300% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -897,7 +908,7 @@ button {
         #ffd700 60%,
         #ffd700 100%
     );
-    background-size: 200% 100%;
+    background-size: 300% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -1397,16 +1408,13 @@ section {
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8));
-    background-size: 200% 100%;
-    animation: light-chase 2s linear infinite;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
+    animation: light-chase 4s linear infinite;
     margin: 0 10px;
     border-radius: 2px;
     box-shadow: 0 0 10px rgba(255, 200, 100, 0.5);
@@ -1566,20 +1574,16 @@ section {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -1;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .value-proposition::after {
@@ -2973,10 +2977,13 @@ body.modal-open {
 
 /* === ANIMATED LIGHT BORDER EFFECT === */
 @keyframes light-chase {
-    0% { background-position: 0% 50%; }
-    100% { background-position: 200% 50%; }
+    0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
+    50% { background-position: 150% 50%; filter: hue-rotate(180deg); }
+    100% { background-position: 300% 50%; filter: hue-rotate(360deg); }
 }
 
+/* Match FAQ timing - 4s for smooth, slower chase effect */
+
 @keyframes light-chase-reverse {
     0% { background-position: 200% 50%; }
     100% { background-position: 0% 50%; }
@@ -3003,10 +3010,10 @@ body.modal-open {
         #ff3333, #33ff33, #ffff33, #33ccff,
         #ff3333, #33ff33, #ffff33, #33ccff,
         #ff3333);
-    background-size: 200% 100%;
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -1;
-    animation: light-chase 3s linear infinite;
+    animation: light-chase 4s linear infinite;
     filter: blur(1px);
 }
 
@@ -3026,20 +3033,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -1;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .gallery-item::after {
@@ -3084,20 +3087,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 18px;
     z-index: -1;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .service-column::after {
@@ -3155,12 +3154,13 @@ body.modal-open {
 
 .timeline-line {
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8));
-    background-size: 200% 100%;
-    animation: light-chase 2s linear infinite;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
+    animation: light-chase 4s linear infinite;
     height: 4px;
     border-radius: 2px;
     box-shadow: 0 0 10px rgba(255, 200, 100, 0.5);
@@ -3183,20 +3183,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -1;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .comparison-column::after {
@@ -3242,20 +3238,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -1;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .testimonial-card::after {
@@ -3300,20 +3292,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 18px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .google-review-banner::after {
@@ -3345,20 +3333,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .value-proposition::after {
@@ -3392,10 +3376,10 @@ body.modal-open {
         rgba(255, 215, 0, 0.8),
         rgba(255, 107, 53, 0.6),
         rgba(255, 215, 0, 0.8));
-    background-size: 200% 100%;
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -1;
-    animation: light-chase 3s linear infinite;
+    animation: light-chase 4s linear infinite;
 }
 
 /* === FAQ SECTION === */
@@ -3431,20 +3415,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .social-proof-stats::after {
@@ -3561,20 +3541,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .credentials::after {
@@ -3606,21 +3582,17 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
     animation-delay: 0.5s;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .service-area::after {
@@ -3663,7 +3635,7 @@ body.modal-open {
         rgba(255, 255, 51, 0.8),
         rgba(51, 204, 255, 0.8),
         rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+    background-size: 300% 100%;
     border-radius: 10px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
@@ -3708,20 +3680,16 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 10px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .availability-notice::after {
@@ -3753,21 +3721,17 @@ body.modal-open {
     right: -3px;
     bottom: -3px;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     border-radius: 14px;
     z-index: -2;
     animation: light-chase 4s linear infinite;
     animation-delay: 0.5s;
-    opacity: 0.7;
+    opacity: 0.8;
 }
 
 .urgency-benefit::after {
@@ -3786,16 +3750,12 @@ body.modal-open {
 .jobber-form-container {
     position: relative;
     background: linear-gradient(90deg,
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8),
-        rgba(51, 255, 51, 0.8),
-        rgba(255, 255, 51, 0.8),
-        rgba(51, 204, 255, 0.8),
-        rgba(255, 51, 51, 0.8));
-    background-size: 200% 100%;
+        #ff3333 0%,
+        #33ff33 25%,
+        #ffff33 50%,
+        #33ccff 75%,
+        #ff3333 100%);
+    background-size: 300% 100%;
     animation: light-chase 4s linear infinite;
     padding: 3px;
     border-radius: 14px;
@@ -3833,7 +3793,7 @@ body.modal-open {
         rgba(255, 255, 51, 0.8),
         rgba(51, 204, 255, 0.8),
         rgba(255, 51, 51, 0.8)) !important;
-    background-size: 200% 100% !important;
+    background-size: 300% 100% !important;
     border-radius: 10px !important;
     z-index: -2 !important;
     animation: light-chase 4s linear infinite !important;
@@ -3927,7 +3887,7 @@ body.modal-open {
     background-size: 300% 100% !important;
     border-radius: 11px !important;
     z-index: 1 !important;
-    animation: faq-chase 2s linear infinite !important;
+    animation: light-chase 4s linear infinite !important;
     pointer-events: none !important;
 }