fix: Safari halo effect rendering (#423)

* fix: replace blur filter with radial gradient for Safari compatibility

The blur filter has rendering issues in Safari, creating sharp rectangular edges instead of smooth glows. Use a CSS radial gradient instead for consistent cross-browser rendering. Also fixed typo (transitiona-all → transition-all) and removed undefined animate-tilt class.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Haiku 4.5 <[email protected]>

* fix: apply Safari halo fix to ci_cd and about pages

Apply the same radial gradient fix to remaining button halo effects on ci_cd.astro (4 instances) and about.astro (1 instance).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

---------

Co-authored-by: Claude Haiku 4.5 <[email protected]>

Author: riderx

src/components/Hero.astro

@@ -172,7 +172,8 @@ const ctaSubtext = `${m.days_free_trial({}, { locale: Astro.locals.locale })}. $
         <div class="flex flex-col items-center gap-3 mt-10">
           <div class="relative inline-flex group">
             <div
-              class="absolute -inset-px rounded-xl opacity-70 duration-1000 group-hover:-inset-1 group-hover:opacity-100 group-hover:duration-200 transitiona-all animate-tilt bg-[#44BCFF] blur-lg"
+              class="absolute -inset-4 rounded-xl opacity-70 duration-1000 group-hover:-inset-5 group-hover:opacity-100 group-hover:duration-200 transition-all"
+              style="background: radial-gradient(ellipse at center, rgba(68, 188, 255, 0.6) 0%, rgba(68, 188, 255, 0.3) 40%, rgba(68, 188, 255, 0) 70%);"
             >
             </div>
             <a

src/pages/about.astro

@@ -449,7 +449,11 @@ content.ldJSON['@graph'].push(organization.founder)
 
         <div class="mt-6 text-center">
           <div class="inline-flex relative group">
-            <div class="absolute -inset-px rounded-xl opacity-60 transition-opacity duration-300 group-hover:opacity-80 bg-gray-800/40 blur-lg" aria-hidden="true"></div>
+            <div
+              class="absolute -inset-4 rounded-xl opacity-60 transition-opacity duration-300 group-hover:opacity-80"
+              style="background: radial-gradient(ellipse at center, rgba(31, 41, 55, 0.4) 0%, rgba(31, 41, 55, 0.2) 40%, rgba(31, 41, 55, 0) 70%);"
+              aria-hidden="true"
+            ></div>
             <a
               href={getRelativeLocaleUrl(Astro.locals.locale, 'register')}
               aria-label={m.get_quote_now({}, { locale: Astro.locals.locale })}

src/pages/ci_cd.astro

@@ -62,7 +62,10 @@ const ldJSON = createLdJsonGraph(Astro.locals.runtimeConfig.public, serviceLdJso
           <!-- CTA Buttons -->
           <div class="flex flex-col gap-4 justify-center mt-10 sm:flex-row">
             <div class="inline-flex relative group" role="presentation">
-              <div class="absolute -inset-px rounded-xl transition-opacity duration-300 pointer-events-none group-hover:opacity-90 bg-white/20 opacity-65 blur-lg"></div>
+              <div
+                class="absolute -inset-4 rounded-xl transition-opacity duration-300 pointer-events-none group-hover:opacity-90 opacity-65"
+                style="background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 70%);"
+              ></div>
               <a
                 href="https://cal.com/team/capgo/mobile-ci-cd-done-for-you"
                 class="inline-flex relative justify-center items-center py-4 px-8 text-lg font-bold text-white bg-gray-900 rounded-xl border border-red-500 transition-all duration-200 hover:bg-red-600 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none"
@@ -339,7 +342,10 @@ const ldJSON = createLdJsonGraph(Astro.locals.runtimeConfig.public, serviceLdJso
               <span class="font-semibold text-gray-100">Your team's productivity is suffering.</span>
             </p>
             <div class="inline-flex relative group">
-              <div class="absolute -inset-px rounded-xl opacity-60 transition-all duration-300 pointer-events-none group-hover:-inset-1 bg-white/20 blur-lg group-hover:opacity-85">
+              <div
+                class="absolute -inset-4 rounded-xl opacity-60 transition-all duration-300 pointer-events-none group-hover:-inset-5 group-hover:opacity-85"
+                style="background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 70%);"
+              >
               </div>
               <a
                 href="https://cal.com/team/capgo/mobile-ci-cd-done-for-you"
@@ -906,7 +912,10 @@ const ldJSON = createLdJsonGraph(Astro.locals.runtimeConfig.public, serviceLdJso
 
               <!-- CTA Button -->
               <div class="inline-flex relative group">
-                <div class="absolute -inset-px rounded-2xl opacity-60 transition-opacity duration-300 pointer-events-none bg-white/20 blur-lg group-hover:opacity-85"></div>
+                <div
+                  class="absolute -inset-4 rounded-2xl opacity-60 transition-opacity duration-300 pointer-events-none group-hover:opacity-85"
+                  style="background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 70%);"
+                ></div>
                 <a
                   href="https://cal.com/team/capgo/mobile-ci-cd-done-for-you"
                   class="inline-flex relative justify-center items-center py-4 px-8 text-lg font-bold text-white bg-gray-900 rounded-2xl border border-blue-500 transition-all duration-200 hover:bg-gray-900 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none"
@@ -932,7 +941,10 @@ const ldJSON = createLdJsonGraph(Astro.locals.runtimeConfig.public, serviceLdJso
 
           <div class="flex flex-col gap-4 justify-center mt-10 sm:flex-row">
             <div class="inline-flex relative group" role="presentation">
-              <div class="absolute -inset-px rounded-xl opacity-60 transition-opacity duration-300 pointer-events-none group-hover:opacity-90 bg-white/20 blur-lg"></div>
+              <div
+                class="absolute -inset-4 rounded-xl opacity-60 transition-opacity duration-300 pointer-events-none group-hover:opacity-90"
+                style="background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 70%);"
+              ></div>
               <a
                 href="https://cal.com/team/capgo/mobile-ci-cd-done-for-you"
                 class="inline-flex relative justify-center items-center py-4 px-8 text-lg font-bold text-white bg-gray-900 rounded-xl border border-red-500 transition-all duration-200 hover:bg-red-600 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none"

src/pages/enterprise.astro

@@ -897,7 +897,8 @@ content.ldJSON['@graph'].push(enterpriseService)
         <div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
           <div class="relative inline-flex group" role="presentation">
             <div
-              class="absolute -inset-px rounded-xl opacity-70 duration-1000 group-hover:-inset-1 group-hover:opacity-100 group-hover:duration-200 transitiona-all animate-tilt bg-[#44BCFF] blur-lg"
+              class="absolute -inset-4 rounded-xl opacity-70 duration-1000 group-hover:-inset-5 group-hover:opacity-100 group-hover:duration-200 transition-all"
+              style="background: radial-gradient(ellipse at center, rgba(68, 188, 255, 0.6) 0%, rgba(68, 188, 255, 0.3) 40%, rgba(68, 188, 255, 0) 70%);"
             >
             </div>
             <a