feat(ui): add catppuccin gradient and glow effects

- Hero: soft radial glow blobs in background, title gradient shimmer,
  terminal mockup glow on hover
- Navbar: gradient underline (green->sky->mauve) when scrolled
- Hero install button: gradient background + glow
- Feature cards: per-color glow on hover (via :has)

Author: nhktmdzhg

src/assets/shared.css

@@ -387,6 +387,27 @@ section {
       var(--ctp-surface0));
 }
 
+.features-grid .custom-card:has(.color-green):hover,
+.features-grid .custom-card:has(.icon-primary):hover {
+  box-shadow: 0 10px 40px color-mix(in srgb, var(--ctp-green) 22%, transparent);
+}
+
+.features-grid .custom-card:has(.color-mauve):hover {
+  box-shadow: 0 10px 40px color-mix(in srgb, var(--ctp-mauve) 22%, transparent);
+}
+
+.features-grid .custom-card:has(.color-peach):hover {
+  box-shadow: 0 10px 40px color-mix(in srgb, var(--ctp-peach) 22%, transparent);
+}
+
+.features-grid .custom-card:has(.color-pink):hover {
+  box-shadow: 0 10px 40px color-mix(in srgb, var(--ctp-pink) 22%, transparent);
+}
+
+.features-grid .custom-card:has(.color-sky):hover {
+  box-shadow: 0 10px 40px color-mix(in srgb, var(--ctp-sky) 22%, transparent);
+}
+
 .special-features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -496,6 +517,20 @@ section {
   color: var(--ctp-green) !important;
 }
 
+:root .el-button.btn-install {
+  background: linear-gradient(120deg,
+      var(--ctp-green),
+      color-mix(in srgb, var(--ctp-sky) 60%, var(--ctp-green))) !important;
+  border-color: transparent !important;
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--ctp-green) 30%, transparent);
+  transition: all 0.3s ease;
+}
+
+:root .el-button.btn-install:hover {
+  box-shadow: 0 6px 28px color-mix(in srgb, var(--ctp-green) 45%, transparent);
+  filter: brightness(1.05);
+}
+
 .copy-float {
   position: absolute;
   top: 0.75rem;

src/components/HeroSection.vue

@@ -134,13 +134,45 @@ onUnmounted(() => {
 <style scoped>
 /* Hero Section */
 .hero {
+  position: relative;
   padding: 160px 0 100px;
   background-color: var(--ctp-mantle);
   overflow: hidden;
   transition: background 0.3s;
 }
 
+.hero::before,
+.hero::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hero::before {
+  width: 480px;
+  height: 480px;
+  top: -140px;
+  left: -140px;
+  background: radial-gradient(circle,
+      color-mix(in srgb, var(--ctp-green) 26%, transparent),
+      transparent 70%);
+}
+
+.hero::after {
+  width: 560px;
+  height: 560px;
+  bottom: -180px;
+  right: -160px;
+  background: radial-gradient(circle,
+      color-mix(in srgb, var(--ctp-mauve) 22%, transparent),
+      transparent 70%);
+}
+
 .hero-container {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -203,9 +235,23 @@ onUnmounted(() => {
       var(--ctp-green),
       var(--ctp-sky) 50%,
       var(--ctp-mauve));
+  background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
+  animation: text-shift 8s ease-in-out infinite;
+}
+
+@keyframes text-shift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
 }
 
 .hero-description {
@@ -264,16 +310,22 @@ onUnmounted(() => {
   background-color: var(--ctp-crust);
   border-radius: 12px;
   border: 1px solid var(--ctp-surface1);
-  box-shadow: var(--el-box-shadow-light);
+  box-shadow:
+    var(--el-box-shadow-light),
+    0 0 40px color-mix(in srgb, var(--ctp-green) 18%, transparent);
   transform: rotateY(-5deg) rotateX(5deg);
   transition:
     transform 0.3s,
-    background-color 0.3s;
+    background-color 0.3s,
+    box-shadow 0.3s;
   overflow: hidden;
 }
 
 .terminal-mockup:hover {
   transform: rotateY(0) rotateX(0);
+  box-shadow:
+    var(--el-box-shadow-light),
+    0 0 60px color-mix(in srgb, var(--ctp-green) 30%, transparent);
 }
 
 .term-header {

src/components/NavBar.vue

@@ -104,7 +104,24 @@ onUnmounted(() => {
 }
 
 .navbar.scrolled {
-  border-bottom: 1px solid var(--ctp-surface1);
+  border-bottom-color: transparent;
+}
+
+.navbar.scrolled::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 1px;
+  background: linear-gradient(90deg,
+      transparent,
+      var(--ctp-green),
+      var(--ctp-sky),
+      var(--ctp-mauve),
+      transparent);
+  opacity: 0.6;
+  pointer-events: none;
 }
 
 .nav-content {