Upload 65 files

app/globals.css

@@ -1491,4 +1491,836 @@
 
 .underline-animate:hover::after {
   width: 100%;
+}
+
+/* ───────────────────────────────────────────────
+   EXTREME ANIMATIONS - Next Level UI
+   ─────────────────────────────────────────────── */
+
+/* Electric pulse effect */
+@keyframes electric-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 2px hsl(var(--primary)));
+  }
+  25% {
+    filter: drop-shadow(0 0 8px hsl(var(--primary))) drop-shadow(0 0 20px hsl(var(--primary)));
+  }
+  50% {
+    filter: drop-shadow(0 0 15px hsl(var(--primary))) drop-shadow(0 0 40px hsl(var(--primary)));
+  }
+  75% {
+    filter: drop-shadow(0 0 8px hsl(var(--primary))) drop-shadow(0 0 20px hsl(var(--primary)));
+  }
+}
+
+.electric-glow {
+  animation: electric-pulse 2s ease-in-out infinite;
+}
+
+/* Matrix rain effect */
+@keyframes matrix-fall {
+  0% {
+    transform: translateY(-100vh);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh);
+    opacity: 0;
+  }
+}
+
+.matrix-char {
+  position: absolute;
+  font-family: monospace;
+  font-size: 14px;
+  color: hsl(var(--primary));
+  text-shadow: 0 0 10px hsl(var(--primary));
+  animation: matrix-fall linear infinite;
+  pointer-events: none;
+}
+
+/* Holographic shimmer */
+@keyframes holo-shimmer {
+  0% {
+    background-position: 0% 50%;
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    background-position: 100% 50%;
+    filter: hue-rotate(180deg);
+  }
+  100% {
+    background-position: 0% 50%;
+    filter: hue-rotate(360deg);
+  }
+}
+
+.holographic {
+  background: linear-gradient(
+    90deg,
+    hsl(280, 100%, 70%),
+    hsl(320, 100%, 60%),
+    hsl(360, 100%, 70%),
+    hsl(40, 100%, 60%),
+    hsl(80, 100%, 70%),
+    hsl(120, 100%, 60%),
+    hsl(160, 100%, 70%),
+    hsl(200, 100%, 60%),
+    hsl(240, 100%, 70%),
+    hsl(280, 100%, 70%)
+  );
+  background-size: 400% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: holo-shimmer 4s linear infinite;
+}
+
+/* Cyberpunk glitch border */
+@keyframes glitch-border {
+  0%, 100% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  5% {
+    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
+  }
+  10% {
+    clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);
+  }
+  15% {
+    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
+  }
+  20% {
+    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
+  }
+  25% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+}
+
+.glitch-border {
+  animation: glitch-border 3s ease-in-out infinite;
+}
+
+/* Extreme 3D flip card */
+.flip-card {
+  perspective: 2000px;
+  transform-style: preserve-3d;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform-style: preserve-3d;
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front,
+.flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: inherit;
+}
+
+.flip-card-back {
+  transform: rotateY(180deg);
+}
+
+/* Liquid morphing animation */
+@keyframes liquid-morph {
+  0%, 100% {
+    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    transform: rotate(90deg) scale(1.1);
+  }
+  50% {
+    border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
+    transform: rotate(180deg) scale(1);
+  }
+  75% {
+    border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
+    transform: rotate(270deg) scale(1.1);
+  }
+}
+
+.liquid-blob {
+  animation: liquid-morph 20s ease-in-out infinite;
+}
+
+/* Plasma effect */
+@keyframes plasma {
+  0%, 100% {
+    filter: hue-rotate(0deg) saturate(1.5);
+    transform: scale(1);
+  }
+  33% {
+    filter: hue-rotate(120deg) saturate(2);
+    transform: scale(1.05);
+  }
+  66% {
+    filter: hue-rotate(240deg) saturate(1.8);
+    transform: scale(0.95);
+  }
+}
+
+.plasma-effect {
+  animation: plasma 10s ease-in-out infinite;
+}
+
+/* Explosion particles */
+@keyframes explode {
+  0% {
+    transform: scale(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(3) rotate(180deg);
+    opacity: 0;
+  }
+}
+
+.explode-particle {
+  animation: explode 1s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
+}
+
+/* Vortex spin */
+@keyframes vortex {
+  0% {
+    transform: rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: rotate(180deg) scale(0.5);
+    opacity: 0.5;
+  }
+  100% {
+    transform: rotate(360deg) scale(0);
+    opacity: 0;
+  }
+}
+
+.vortex-spin {
+  animation: vortex 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+}
+
+/* Breathing glow */
+@keyframes breathe-glow {
+  0%, 100% {
+    box-shadow:
+      0 0 5px hsl(var(--primary) / 0.3),
+      0 0 10px hsl(var(--primary) / 0.2),
+      0 0 20px hsl(var(--primary) / 0.1),
+      inset 0 0 10px hsl(var(--primary) / 0.1);
+  }
+  50% {
+    box-shadow:
+      0 0 20px hsl(var(--primary) / 0.6),
+      0 0 40px hsl(var(--primary) / 0.4),
+      0 0 60px hsl(var(--primary) / 0.2),
+      inset 0 0 20px hsl(var(--primary) / 0.2);
+  }
+}
+
+.breathing-glow {
+  animation: breathe-glow 4s ease-in-out infinite;
+}
+
+/* Cyber scan line */
+@keyframes scan-line {
+  0% {
+    top: 0%;
+  }
+  100% {
+    top: 100%;
+  }
+}
+
+.scan-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
+  box-shadow: 0 0 10px hsl(var(--primary));
+  animation: scan-line 3s linear infinite;
+  pointer-events: none;
+  z-index: 100;
+}
+
+/* Floating island effect */
+@keyframes floating-island {
+  0%, 100% {
+    transform: translateY(0) rotateX(0deg) rotateY(0deg);
+  }
+  25% {
+    transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
+  }
+  50% {
+    transform: translateY(-5px) rotateX(0deg) rotateY(2deg);
+  }
+  75% {
+    transform: translateY(-15px) rotateX(-2deg) rotateY(0deg);
+  }
+}
+
+.floating-island {
+  animation: floating-island 8s ease-in-out infinite;
+  transform-style: preserve-3d;
+}
+
+/* Extreme parallax depth */
+.parallax-extreme {
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+.parallax-layer-1 {
+  transform: translateZ(-100px) scale(1.5);
+}
+
+.parallax-layer-2 {
+  transform: translateZ(-50px) scale(1.25);
+}
+
+.parallax-layer-3 {
+  transform: translateZ(0px) scale(1);
+}
+
+/* Energy wave */
+@keyframes energy-wave {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.energy-wave {
+  position: absolute;
+  border: 2px solid hsl(var(--primary));
+  border-radius: 50%;
+  animation: energy-wave 2s ease-out infinite;
+}
+
+.energy-wave:nth-child(2) {
+  animation-delay: 0.5s;
+}
+
+.energy-wave:nth-child(3) {
+  animation-delay: 1s;
+}
+
+/* Text reveal mask */
+@keyframes text-reveal {
+  0% {
+    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+}
+
+.text-reveal {
+  animation: text-reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
+}
+
+/* Stagger shake */
+@keyframes stagger-shake {
+  0%, 100% { transform: translateX(0); }
+  10% { transform: translateX(-5px) rotate(-1deg); }
+  20% { transform: translateX(5px) rotate(1deg); }
+  30% { transform: translateX(-5px) rotate(0deg); }
+  40% { transform: translateX(5px) rotate(1deg); }
+  50% { transform: translateX(-3px) rotate(-1deg); }
+  60% { transform: translateX(3px) rotate(0deg); }
+  70% { transform: translateX(-2px) rotate(-1deg); }
+  80% { transform: translateX(2px) rotate(1deg); }
+  90% { transform: translateX(-1px) rotate(0deg); }
+}
+
+.shake-hover:hover {
+  animation: stagger-shake 0.5s ease-in-out;
+}
+
+/* Rainbow border animation */
+@keyframes rainbow-border {
+  0% { border-color: hsl(0, 100%, 60%); }
+  17% { border-color: hsl(60, 100%, 60%); }
+  33% { border-color: hsl(120, 100%, 60%); }
+  50% { border-color: hsl(180, 100%, 60%); }
+  67% { border-color: hsl(240, 100%, 60%); }
+  83% { border-color: hsl(300, 100%, 60%); }
+  100% { border-color: hsl(360, 100%, 60%); }
+}
+
+.rainbow-border {
+  border-width: 3px;
+  border-style: solid;
+  animation: rainbow-border 5s linear infinite;
+}
+
+/* Morphing background */
+@keyframes morph-bg {
+  0%, 100% {
+    background-position: 0% 50%;
+    background-size: 200% 200%;
+  }
+  50% {
+    background-position: 100% 50%;
+    background-size: 300% 300%;
+  }
+}
+
+.morphing-bg {
+  background: linear-gradient(135deg,
+    hsl(var(--primary)),
+    hsl(280, 65%, 60%),
+    hsl(320, 75%, 55%),
+    hsl(199, 89%, 48%),
+    hsl(var(--primary))
+  );
+  background-size: 400% 400%;
+  animation: morph-bg 15s ease infinite;
+}
+
+/* Typing cursor */
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+.typing-cursor::after {
+  content: '|';
+  animation: blink 1s step-end infinite;
+  color: hsl(var(--primary));
+}
+
+/* Hyperdrive lines */
+@keyframes hyperdrive {
+  0% {
+    transform: scale(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(50) rotate(180deg);
+    opacity: 0;
+  }
+}
+
+.hyperdrive-line {
+  position: absolute;
+  width: 2px;
+  height: 100px;
+  background: linear-gradient(to bottom, transparent, hsl(var(--primary)), transparent);
+  transform-origin: center bottom;
+  animation: hyperdrive 1s linear infinite;
+}
+
+/* Cosmic dust */
+@keyframes cosmic-dust {
+  0% {
+    transform: translateY(0) rotate(0deg) scale(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(-10px) rotate(36deg) scale(1);
+  }
+  100% {
+    transform: translateY(-200px) rotate(360deg) scale(0);
+    opacity: 0;
+  }
+}
+
+.cosmic-dust {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: hsl(var(--primary));
+  box-shadow: 0 0 6px hsl(var(--primary));
+  animation: cosmic-dust 3s ease-out infinite;
+}
+
+/* Spotlight follow */
+.spotlight-follow {
+  position: relative;
+  overflow: hidden;
+}
+
+.spotlight-follow::before {
+  content: '';
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, hsl(var(--primary) / 0.15) 0%, transparent 70%);
+  border-radius: 50%;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+
+.spotlight-follow:hover::before {
+  opacity: 1;
+}
+
+/* Elastic bounce */
+@keyframes elastic-bounce {
+  0% { transform: scale(1); }
+  30% { transform: scale(1.25); }
+  40% { transform: scale(0.9); }
+  50% { transform: scale(1.15); }
+  65% { transform: scale(0.95); }
+  75% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.elastic-bounce {
+  animation: elastic-bounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* Tilt 3D effect */
+.tilt-3d {
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease;
+}
+
+.tilt-3d:hover {
+  transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale(1.05);
+}
+
+/* Magnetic attraction */
+.magnetic {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* Quantum particle */
+@keyframes quantum {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.8;
+  }
+  25% {
+    transform: translate(20px, -20px) scale(0.8);
+    opacity: 0.4;
+  }
+  50% {
+    transform: translate(-10px, 10px) scale(1.2);
+    opacity: 1;
+  }
+  75% {
+    transform: translate(-20px, -10px) scale(0.9);
+    opacity: 0.6;
+  }
+}
+
+.quantum-particle {
+  animation: quantum 5s ease-in-out infinite;
+}
+
+/* Inverted perspective */
+.inverted-perspective {
+  transform: perspective(500px) rotateX(5deg);
+  transition: transform 0.5s ease;
+}
+
+.inverted-perspective:hover {
+  transform: perspective(500px) rotateX(-5deg) translateY(-10px);
+}
+
+/* Trail effect */
+.trail-effect {
+  position: relative;
+}
+
+.trail-effect::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  opacity: 0;
+  transform: scale(1.1);
+  transition: all 0.3s ease;
+  z-index: -1;
+}
+
+.trail-effect:hover::after {
+  opacity: 0.3;
+  transform: scale(1.2) translateY(10px);
+}
+
+/*霓虹 Noir */
+.neon-noir {
+  color: hsl(var(--foreground));
+  text-shadow:
+    0 0 5px hsl(var(--primary)),
+    0 0 10px hsl(var(--primary)),
+    0 0 20px hsl(var(--primary)),
+    0 0 40px hsl(var(--primary)),
+    0 0 80px hsl(var(--primary));
+  animation: neon-flicker 0.15s infinite;
+}
+
+@keyframes neon-flicker {
+  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+    text-shadow:
+      0 0 5px hsl(var(--primary)),
+      0 0 10px hsl(var(--primary)),
+      0 0 20px hsl(var(--primary)),
+      0 0 40px hsl(var(--primary)),
+      0 0 80px hsl(var(--primary));
+  }
+  20%, 24%, 55% {
+    text-shadow: none;
+  }
+}
+
+/* Glass morphism extreme */
+.glass-extreme {
+  background: linear-gradient(
+    135deg,
+    hsl(var(--background) / 0.1) 0%,
+    hsl(var(--background) / 0.05) 50%,
+    hsl(var(--background) / 0.1) 100%
+  );
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid hsl(var(--border) / 0.2);
+  box-shadow:
+    0 8px 32px hsl(var(--background) / 0.3),
+    inset 0 1px 0 hsl(var(--foreground) / 0.1),
+    inset 0 -1px 0 hsl(var(--background) / 0.1);
+}
+
+/* Cyber grid */
+.cyber-grid {
+  background-image:
+    linear-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(var(--primary) / 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: grid-move 20s linear infinite;
+}
+
+@keyframes grid-move {
+  0% { background-position: 0 0; }
+  100% { background-position: 50px 50px; }
+}
+
+/* Morphing card */
+.morph-card {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.morph-card:hover {
+  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+}
+
+/* Glitch image */
+@keyframes glitch-image {
+  0% {
+    filter: hue-rotate(0deg);
+    transform: translate(0);
+  }
+  10% {
+    filter: hue-rotate(90deg);
+    transform: translate(-5px, 5px);
+  }
+  20% {
+    filter: hue-rotate(180deg);
+    transform: translate(5px, -5px);
+  }
+  30% {
+    filter: hue-rotate(270deg);
+    transform: translate(-5px, -5px);
+  }
+  40% {
+    filter: hue-rotate(360deg);
+    transform: translate(5px, 5px);
+  }
+  50%, 100% {
+    filter: hue-rotate(0deg);
+    transform: translate(0);
+  }
+}
+
+.glitch-image:hover {
+  animation: glitch-image 0.5s ease-in-out;
+}
+
+/* Infinite rotate */
+@keyframes infinite-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.infinite-rotate {
+  animation: infinite-rotate 30s linear infinite;
+}
+
+/* Scale pulse */
+@keyframes scale-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+.scale-pulse {
+  animation: scale-pulse 2s ease-in-out infinite;
+}
+
+/* Text scramble effect placeholder */
+.scramble-text {
+  font-family: monospace;
+}
+
+/* Bounce in */
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.bounce-in {
+  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* Slide up fade */
+@keyframes slide-up-fade {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-up-fade {
+  animation: slide-up-fade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Glow text */
+.glow-text {
+  text-shadow:
+    0 0 10px hsl(var(--primary)),
+    0 0 20px hsl(var(--primary)),
+    0 0 30px hsl(var(--primary)),
+    0 0 40px hsl(var(--primary));
+}
+
+/* Extrude 3D */
+.extrude-3d {
+  text-shadow:
+    1px 1px 0 hsl(var(--primary) / 0.3),
+    2px 2px 0 hsl(var(--primary) / 0.25),
+    3px 3px 0 hsl(var(--primary) / 0.2),
+    4px 4px 0 hsl(var(--primary) / 0.15),
+    5px 5px 0 hsl(var(--primary) / 0.1);
+  transition: all 0.3s ease;
+}
+
+.extrude-3d:hover {
+  text-shadow:
+    1px 1px 0 hsl(var(--primary) / 0.3),
+    2px 2px 0 hsl(var(--primary) / 0.25),
+    3px 3px 0 hsl(var(--primary) / 0.2),
+    4px 4px 0 hsl(var(--primary) / 0.15),
+    5px 5px 0 hsl(var(--primary) / 0.1),
+    6px 6px 10px hsl(var(--background));
+  transform: translate(-3px, -3px);
+}
+
+/* Suspended animation */
+@keyframes suspended {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-8px) rotate(1deg);
+  }
+  50% {
+    transform: translateY(-4px) rotate(-1deg);
+  }
+  75% {
+    transform: translateY(-12px) rotate(0.5deg);
+  }
+}
+
+.suspended {
+  animation: suspended 6s ease-in-out infinite;
+}
+
+/* Dynamic underline */
+.dynamic-underline {
+  position: relative;
+  display: inline-block;
+}
+
+.dynamic-underline::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, hsl(var(--primary)), hsl(280, 65%, 60%));
+  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateX(-50%);
+  border-radius: 2px;
+}
+
+.dynamic-underline:hover::after {
+  width: 120%;
+}
+
+/* Particle burst on click */
+@keyframes particle-burst {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--x, 0), var(--y, 0)) scale(0);
+    opacity: 0;
+  }
+}
+
+.particle-burst {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: hsl(var(--primary));
+  pointer-events: none;
+  animation: particle-burst 0.6s ease-out forwards;
 }

components/home/CTASection.tsx

@@ -2,46 +2,32 @@
 
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { ArrowRight, Sparkles, Zap, Rocket, MessageCircle } from "lucide-react"
+import { ArrowRight, Sparkles, Zap, Rocket, MessageCircle, Star } from "lucide-react"
 import { useRef, useState, useEffect } from "react"
 
-// Pre-computed particle data to avoid hydration mismatch
+// Pre-computed extreme particle data
 const CTA_PARTICLES = [
-    // Left side particles
-    { left: 3.5, top: 15.2, delay: 2.1, duration: 19.4 },
-    { left: 8.7, top: 45.8, delay: 7.6, duration: 21.8 },
-    { left: 5.2, top: 78.3, delay: 11.2, duration: 18.2 },
-    { left: 12.4, top: 32.5, delay: 4.8, duration: 22.6 },
-    { left: 6.8, top: 62.9, delay: 9.3, duration: 17.5 },
-
-    // Right side particles
-    { left: 91.3, top: 18.6, delay: 5.4, duration: 20.3 },
-    { left: 86.5, top: 52.4, delay: 10.1, duration: 18.9 },
-    { left: 94.7, top: 85.2, delay: 3.7, duration: 22.1 },
-    { left: 88.2, top: 38.7, delay: 8.4, duration: 19.6 },
-    { left: 92.8, top: 68.4, delay: 12.9, duration: 21.2 },
-
-    // Top edge
-    { left: 25.4, top: 5.8, delay: 6.2, duration: 18.4 },
-    { left: 55.7, top: 3.2, delay: 1.5, duration: 22.8 },
-    { left: 72.1, top: 8.4, delay: 9.8, duration: 17.9 },
-
-    // Bottom edge
-    { left: 18.9, top: 92.6, delay: 4.3, duration: 20.7 },
-    { left: 48.3, top: 95.1, delay: 11.7, duration: 19.2 },
-    { left: 68.5, top: 89.3, delay: 7.1, duration: 21.5 },
-
-    // Corners
-    { left: 2.1, top: 2.4, delay: 13.5, duration: 18.6 },
-    { left: 97.8, top: 4.7, delay: 0.8, duration: 22.4 },
-    { left: 1.5, top: 96.2, delay: 5.6, duration: 19.8 },
-    { left: 98.4, top: 94.5, delay: 10.4, duration: 17.3 },
+    // Cosmic particles
+    { left: 5, top: 10, delay: 0, duration: 20, size: 4, type: 'cosmic' },
+    { left: 15, top: 25, delay: 3, duration: 25, size: 3, type: 'cosmic' },
+    { left: 88, top: 15, delay: 5, duration: 22, size: 5, type: 'cosmic' },
+    { left: 95, top: 40, delay: 8, duration: 28, size: 4, type: 'cosmic' },
+    { left: 10, top: 70, delay: 12, duration: 24, size: 3, type: 'cosmic' },
+    { left: 85, top: 85, delay: 15, duration: 26, size: 5, type: 'cosmic' },
+    // Energy rings
+    { left: 50, top: 50, delay: 0, duration: 12, size: 150, type: 'ring' },
+    { left: 50, top: 50, delay: 4, duration: 12, size: 150, type: 'ring' },
+    { left: 50, top: 50, delay: 8, duration: 12, size: 150, type: 'ring' },
+    // Quantum particles
+    { left: 25, top: 80, delay: 2, duration: 10, size: 8, type: 'quantum' },
+    { left: 75, top: 20, delay: 6, duration: 12, size: 6, type: 'quantum' },
+    { left: 40, top: 60, delay: 10, duration: 8, size: 10, type: 'quantum' },
 ]
 
 export function CTASection() {
     const sectionRef = useRef<HTMLElement>(null)
     const [isVisible, setIsVisible] = useState(false)
-    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+    const [mousePosition, setMousePosition] = useState({ x: 0.5, y: 0.5 })
 
     useEffect(() => {
         const observer = new IntersectionObserver(
@@ -76,115 +62,193 @@ export function CTASection() {
     }, [])
 
     return (
-        <section ref={sectionRef} className="relative py-24 overflow-hidden bg-background" aria-label="Call to action">
-            {/* Dynamic gradient mesh */}
-            <div className="absolute inset-0 gradient-mesh opacity-30" />
-
-            {/* Animated orbs */}
-            <div
-                className="absolute w-[600px] h-[600px] rounded-full opacity-20 blur-3xl pointer-events-none transition-transform duration-1000"
-                style={{
-                    background: 'radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)',
-                    top: '-20%',
-                    right: '-10%',
-                    transform: `translate(${mousePosition.x * 50}px, ${mousePosition.y * 50}px)`,
-                }}
-            />
-            <div
-                className="absolute w-[500px] h-[500px] rounded-full opacity-15 blur-3xl pointer-events-none transition-transform duration-1000"
-                style={{
-                    background: 'radial-gradient(circle, hsl(280, 65%, 60%) 0%, transparent 70%)',
-                    bottom: '-20%',
-                    left: '-10%',
-                    transform: `translate(${-mousePosition.x * 30}px, ${-mousePosition.y * 30}px)`,
-                }}
-            />
-
-            {/* Animated particles */}
-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
-                {CTA_PARTICLES.map((particle, i) => (
-                    <div
-                        key={i}
-                        className="particle"
-                        style={{
-                            left: `${particle.left}%`,
-                            top: `${particle.top}%`,
-                            animationDelay: `${particle.delay}s`,
-                            animationDuration: `${particle.duration}s`,
-                        }}
-                    />
-                ))}
+        <section ref={sectionRef} className="relative py-32 overflow-hidden bg-background" aria-label="Call to action">
+            {/* Extreme background effects */}
+            <div className="absolute inset-0">
+                {/* Morphing gradient */}
+                <div className="absolute inset-0 morphing-bg opacity-25" />
+
+                {/* Cyber grid */}
+                <div className="absolute inset-0 cyber-grid opacity-15" />
+
+                {/* Plasma orbs with mouse tracking */}
+                <div
+                    className="absolute w-[700px] h-[700px] rounded-full liquid-blob opacity-35 blur-3xl pointer-events-none"
+                    style={{
+                        background: 'radial-gradient(circle, hsl(var(--primary)) 0%, hsl(280, 65%, 60%) 50%, transparent 70%)',
+                        top: '-30%',
+                        right: '-15%',
+                        transform: `translate(${mousePosition.x * 60}px, ${mousePosition.y * 60}px)`,
+                        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
+                    }}
+                />
+                <div
+                    className="absolute w-[600px] h-[600px] rounded-full liquid-blob opacity-25 blur-3xl pointer-events-none"
+                    style={{
+                        background: 'radial-gradient(circle, hsl(280, 65%, 60%) 0%, hsl(320, 75%, 55%) 50%, transparent 70%)',
+                        bottom: '-30%',
+                        left: '-15%',
+                        transform: `translate(${-mousePosition.x * 40}px, ${-mousePosition.y * 40}px)`,
+                        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
+                        animationDelay: '-12s',
+                    }}
+                />
+                <div
+                    className="absolute w-[400px] h-[400px] rounded-full liquid-blob opacity-20 blur-3xl pointer-events-none"
+                    style={{
+                        background: 'radial-gradient(circle, hsl(199, 89%, 48%) 0%, hsl(var(--primary)) 50%, transparent 70%)',
+                        top: '50%',
+                        left: '50%',
+                        transform: `translate(-50%, -50%) translate(${mousePosition.x * 30}px, ${mousePosition.y * 30}px)`,
+                        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
+                        animationDelay: '-6s',
+                    }}
+                />
             </div>
 
-            {/* Grid pattern */}
-            <div className="absolute inset-0 opacity-5">
-                <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,hsl(var(--primary))_1px,transparent_1px)] bg-size-[48px_48px]" />
+            {/* Extreme particles */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                {CTA_PARTICLES.map((particle, i) => {
+                    if (particle.type === 'cosmic') {
+                        return (
+                            <div
+                                key={i}
+                                className="cosmic-dust"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    animationDelay: `${particle.delay}s`,
+                                    animationDuration: `${particle.duration}s`,
+                                }}
+                            />
+                        )
+                    } else if (particle.type === 'ring') {
+                        return (
+                            <div
+                                key={i}
+                                className="energy-wave"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    marginLeft: `-${particle.size / 2}px`,
+                                    marginTop: `-${particle.size / 2}px`,
+                                    animationDelay: `${particle.delay}s`,
+                                }}
+                            />
+                        )
+                    } else {
+                        return (
+                            <div
+                                key={i}
+                                className="absolute rounded-full quantum-particle"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    background: `linear-gradient(135deg, hsl(var(--primary)), hsl(280, 65%, 60%))`,
+                                    boxShadow: `0 0 ${particle.size * 2}px hsl(var(--primary) / 0.5)`,
+                                    animationDelay: `${particle.delay}s`,
+                                    animationDuration: `${particle.duration}s`,
+                                }}
+                            />
+                        )
+                    }
+                })}
             </div>
 
+            {/* Scan line */}
+            <div className="absolute inset-0 scan-line pointer-events-none opacity-50" />
+
+            {/* Noise overlay */}
+            <div className="absolute inset-0 noise-overlay opacity-40" />
+
             <div className="container relative z-10 flex flex-col items-center text-center">
                 <div
-                    className={`max-w-4xl transition-all duration-1000 ${
-                        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'
+                    className={`max-w-5xl transition-all duration-1000 ${
+                        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-20 scale-95'
                     }`}
                 >
-                    {/* Main CTA card with animated border */}
-                    <div className="relative">
-                        {/* Animated gradient border */}
-                        <div className="absolute -inset-1 rounded-[2rem] animated-border opacity-50" />
+                    {/* Main CTA card with extreme effects */}
+                    <div className="relative bounce-in">
+                        {/* Extreme animated border */}
+                        <div className="absolute -inset-2 rounded-[2.5rem] animated-border opacity-60" />
+
+                        {/* Glow ring */}
+                        <div className="absolute -inset-4 rounded-[3rem] opacity-30 breathing-glow">
+                            <div className="absolute inset-0 rounded-[3rem] bg-gradient-to-r from-primary via-purple-500 to-pink-500 opacity-20 blur-2xl" />
+                        </div>
 
-                        <div className="relative glass-card rounded-[2rem] p-12 md:p-16 overflow-hidden">
+                        <div className="relative glass-extreme rounded-[2.5rem] p-14 md:p-20 overflow-hidden">
                             {/* Inner glow */}
-                            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-accent/10 opacity-50" />
+                            <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-transparent to-purple-500/15 opacity-60" />
 
-                            {/* Floating icons */}
-                            <div className="absolute top-8 left-8 animate-float opacity-20" style={{ animationDelay: '0s' }}>
-                                <Rocket className="w-8 h-8 text-primary" suppressHydrationWarning />
+                            {/* Plasma effect overlay */}
+                            <div className="absolute inset-0 plasma-effect opacity-10" />
+
+                            {/* Floating extreme icons */}
+                            <div className="absolute top-10 left-10 animate-float" style={{ animationDelay: '0s' }}>
+                                <div className="glass-extreme p-4 rounded-2xl breathing-glow">
+                                    <Rocket className="w-8 h-8 text-primary" suppressHydrationWarning />
+                                </div>
+                            </div>
+                            <div className="absolute top-16 right-16 animate-float" style={{ animationDelay: '1.5s' }}>
+                                <div className="glass-extreme p-3 rounded-xl breathing-glow">
+                                    <Zap className="w-7 h-7 text-amber-500" suppressHydrationWarning />
+                                </div>
                             </div>
-                            <div className="absolute top-12 right-12 animate-float opacity-20" style={{ animationDelay: '1s' }}>
-                                <Zap className="w-6 h-6 text-amber-500" suppressHydrationWarning />
+                            <div className="absolute bottom-12 left-20 animate-float" style={{ animationDelay: '3s' }}>
+                                <div className="glass-extreme p-3 rounded-xl breathing-glow">
+                                    <MessageCircle className="w-7 h-7 text-cyan-500" suppressHydrationWarning />
+                                </div>
                             </div>
-                            <div className="absolute bottom-8 left-16 animate-float opacity-20" style={{ animationDelay: '2s' }}>
-                                <MessageCircle className="w-7 h-7 text-cyan-500" suppressHydrationWarning />
+                            <div className="absolute bottom-20 right-24 animate-float" style={{ animationDelay: '4.5s' }}>
+                                <div className="glass-extreme p-3 rounded-xl breathing-glow">
+                                    <Star className="w-6 h-6 text-pink-500" suppressHydrationWarning />
+                                </div>
                             </div>
 
                             <div className="relative z-10">
                                 {/* Badge */}
-                                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8">
-                                    <Sparkles className="w-4 h-4 text-primary animate-pulse" suppressHydrationWarning />
-                                    <span className="text-sm font-medium">Let&apos;s Create Together</span>
+                                <div className="bounce-in mb-10">
+                                    <div className="relative inline-flex items-center gap-3 px-6 py-3 rounded-full glass-extreme shake-hover">
+                                        <div className="relative">
+                                            <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-75" />
+                                            <Sparkles className="relative h-5 w-5 text-primary" suppressHydrationWarning />
+                                        </div>
+                                        <span className="text-sm font-bold dynamic-underline">Let&apos;s Create Together</span>
+                                        <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
+                                    </div>
                                 </div>
 
-                                <h2 className="text-4xl md:text-5xl lg:text-6xl mb-8 text-foreground font-bold tracking-tight">
+                                {/* Heading */}
+                                <h2 className="text-5xl md:text-6xl lg:text-7xl mb-10 text-foreground font-black tracking-tight leading-tight">
                                     Ready to Start Your{" "}
-                                    <span className="gradient-text relative">
-                                        Project
-                                        <svg className="absolute -bottom-2 left-0 w-full" viewBox="0 0 200 12" fill="none">
-                                            <path d="M2 10C50 4 150 2 198 10" stroke="hsl(var(--primary))" strokeWidth="3" strokeLinecap="round" style={{
-                                                strokeDasharray: '200',
-                                                strokeDashoffset: isVisible ? '0' : '200',
-                                                transition: 'stroke-dashoffset 1s ease 0.5s'
-                                            }} />
-                                        </svg>
-                                    </span>
+                                    <span className="holographic">Project</span>
                                     ?
                                 </h2>
 
-                                <p className="text-lg md:text-xl mb-12 max-w-2xl text-muted-foreground leading-relaxed mx-auto">
+                                <p className="text-xl md:text-2xl mb-14 max-w-3xl text-muted-foreground leading-relaxed mx-auto">
                                     Let&apos;s build something{" "}
-                                    <span className="text-primary font-medium">amazing</span> together.
-                                    Contact us today for a free consultation and a detailed project quote.
+                                    <span className="text-primary font-bold glow-text">extraordinary</span>{" "}
+                                    together. Get a free consultation and detailed project quote today.
                                 </p>
 
-                                <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                                {/* Extreme CTAs */}
+                                <div className="flex flex-col sm:flex-row gap-6 justify-center">
                                     <Button
                                         asChild
                                         size="xl"
-                                        className="group h-14 px-10 text-lg rounded-2xl shine-effect relative overflow-hidden"
+                                        className="group h-16 px-12 text-xl font-bold rounded-2xl morphing-bg text-primary-foreground breathing-glow ripple-button shake-hover relative overflow-hidden"
                                     >
                                         <Link href="/quote">
-                                            <span className="relative z-10 flex items-center">
+                                            <span className="relative z-10 flex items-center gap-3">
                                                 Get a Free Quote
-                                                <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1 group-hover:scale-110" suppressHydrationWarning />
+                                                <Rocket className="w-6 h-6 transition-transform group-hover:translate-x-2 group-hover:-translate-y-1 group-hover:scale-125" suppressHydrationWarning />
                                             </span>
                                         </Link>
                                     </Button>
@@ -192,40 +256,44 @@ export function CTASection() {
                                         asChild
                                         size="xl"
                                         variant="outline"
-                                        className="group h-14 px-10 text-lg rounded-2xl glass-card hover:bg-primary/10"
+                                        className="group h-16 px-12 text-xl font-bold rounded-2xl glass-extreme border-2 border-primary/30 hover:border-primary breathing-glow"
                                     >
                                         <Link href="/contact">
-                                            <MessageCircle className="mr-2 h-5 w-5 group-hover:rotate-12 transition-transform" suppressHydrationWarning />
+                                            <MessageCircle className="mr-3 h-6 w-6 group-hover:rotate-12 transition-transform" suppressHydrationWarning />
                                             Contact Us
                                         </Link>
                                     </Button>
                                 </div>
 
-                                {/* Trust badges */}
-                                <div className="flex items-center justify-center gap-6 mt-10 text-sm text-muted-foreground">
-                                    <div className="flex items-center gap-2">
-                                        <Zap className="w-4 h-4 text-amber-500" suppressHydrationWarning />
-                                        <span>Fast Response</span>
-                                    </div>
-                                    <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
-                                    <div className="flex items-center gap-2">
-                                        <Rocket className="w-4 h-4 text-primary" suppressHydrationWarning />
-                                        <span>Free Consultation</span>
-                                    </div>
-                                    <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
-                                    <div className="flex items-center gap-2">
-                                        <Sparkles className="w-4 h-4 text-cyan-500" suppressHydrationWarning />
-                                        <span>Custom Solutions</span>
-                                    </div>
+                                {/* Trust badges with extreme styling */}
+                                <div className="flex items-center justify-center gap-8 mt-14">
+                                    {[
+                                        { icon: Zap, text: "Fast Response", color: "text-amber-500" },
+                                        { icon: Rocket, text: "Free Consultation", color: "text-primary" },
+                                        { icon: Sparkles, text: "Custom Solutions", color: "text-cyan-500" },
+                                    ].map((badge, i) => (
+                                        <div
+                                            key={badge.text}
+                                            className="flex items-center gap-2 glass-extreme px-4 py-2 rounded-full slide-up-fade"
+                                            style={{ animationDelay: `${1 + i * 0.15}s` }}
+                                        >
+                                            <badge.icon className={`w-5 h-5 ${badge.color}`} suppressHydrationWarning />
+                                            <span className="text-sm font-semibold">{badge.text}</span>
+                                        </div>
+                                    ))}
                                 </div>
                             </div>
 
                             {/* Shine effect */}
-                            <div className="absolute inset-0 shine-effect pointer-events-none" />
+                            <div className="absolute inset-0 shine-effect pointer-events-none rounded-[2.5rem]" />
                         </div>
                     </div>
                 </div>
             </div>
+
+            {/* Gradient overlays */}
+            <div className="absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-background to-transparent pointer-events-none" />
+            <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-background to-transparent pointer-events-none" />
         </section>
     )
 }

components/home/HeroSection.tsx

@@ -2,55 +2,40 @@
 
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { ArrowRight, Sparkles, Code2, Rocket, Zap } from "lucide-react"
+import { ArrowRight, Sparkles, Code2, Rocket, Zap, Star, Layers, Globe } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
 
-// Pre-computed particle data to avoid hydration mismatch
-// These values are static and will be the same on server and client
-const PARTICLES = [
-    // Top-left quadrant
-    { left: 5.2, top: 8.7, delay: 2.4, duration: 18.6, width: 5.8, height: 5.2, opacity: 0.32 },
-    { left: 12.8, top: 15.3, delay: 7.1, duration: 21.2, width: 4.5, height: 6.8, opacity: 0.28 },
-    { left: 8.4, top: 28.9, delay: 11.5, duration: 19.8, width: 6.2, height: 4.9, opacity: 0.35 },
-    { left: 18.6, top: 6.2, delay: 4.8, duration: 22.4, width: 5.1, height: 5.7, opacity: 0.30 },
-    { left: 3.9, top: 42.5, delay: 9.3, duration: 17.5, width: 4.8, height: 6.3, opacity: 0.26 },
-    { left: 15.3, top: 35.8, delay: 14.7, duration: 20.1, width: 6.5, height: 5.4, opacity: 0.33 },
-
-    // Top-right quadrant
-    { left: 82.4, top: 5.8, delay: 5.2, duration: 19.4, width: 5.6, height: 6.1, opacity: 0.31 },
-    { left: 91.7, top: 18.4, delay: 10.8, duration: 22.8, width: 4.2, height: 5.5, opacity: 0.27 },
-    { left: 76.3, top: 12.6, delay: 3.1, duration: 18.2, width: 6.8, height: 4.6, opacity: 0.34 },
-    { left: 88.5, top: 32.9, delay: 8.9, duration: 21.6, width: 5.3, height: 6.7, opacity: 0.29 },
-    { left: 94.2, top: 8.3, delay: 13.4, duration: 17.9, width: 4.9, height: 5.8, opacity: 0.32 },
-
-    // Bottom-left quadrant
-    { left: 6.8, top: 72.4, delay: 6.5, duration: 20.3, width: 5.9, height: 5.1, opacity: 0.28 },
-    { left: 14.2, top: 85.6, delay: 12.1, duration: 18.7, width: 4.6, height: 6.4, opacity: 0.33 },
-    { left: 9.7, top: 58.3, delay: 1.8, duration: 22.1, width: 6.1, height: 4.8, opacity: 0.30 },
-    { left: 22.5, top: 91.8, delay: 9.6, duration: 19.5, width: 5.4, height: 5.9, opacity: 0.26 },
-
-    // Bottom-right quadrant
-    { left: 85.3, top: 78.2, delay: 4.3, duration: 21.8, width: 4.7, height: 6.2, opacity: 0.31 },
-    { left: 92.8, top: 65.4, delay: 11.2, duration: 18.4, width: 5.2, height: 5.6, opacity: 0.29 },
-    { left: 78.6, top: 88.9, delay: 7.8, duration: 20.7, width: 6.4, height: 4.5, opacity: 0.34 },
-    { left: 96.1, top: 82.5, delay: 2.9, duration: 22.6, width: 5.8, height: 6.1, opacity: 0.27 },
-
-    // Center spread (top area only to avoid stat cards)
-    { left: 35.4, top: 12.8, delay: 8.4, duration: 19.1, width: 5.5, height: 5.3, opacity: 0.30 },
-    { left: 48.7, top: 8.2, delay: 3.6, duration: 21.4, width: 4.4, height: 6.6, opacity: 0.28 },
-    { left: 62.3, top: 15.9, delay: 10.2, duration: 18.9, width: 6.3, height: 5.0, opacity: 0.32 },
-    { left: 55.8, top: 5.4, delay: 6.1, duration: 22.2, width: 5.1, height: 5.8, opacity: 0.29 },
-    { left: 41.2, top: 22.6, delay: 12.8, duration: 17.8, width: 5.7, height: 4.7, opacity: 0.31 },
-    { left: 68.9, top: 10.3, delay: 5.4, duration: 20.5, width: 4.9, height: 6.0, opacity: 0.33 },
-    { left: 29.6, top: 3.8, delay: 9.7, duration: 21.9, width: 6.0, height: 5.2, opacity: 0.27 },
-    { left: 72.4, top: 18.5, delay: 2.2, duration: 19.3, width: 5.3, height: 5.5, opacity: 0.30 },
-    { left: 45.1, top: 25.7, delay: 7.5, duration: 18.1, width: 4.6, height: 6.3, opacity: 0.28 },
-    { left: 58.6, top: 2.9, delay: 11.8, duration: 22.7, width: 6.2, height: 4.8, opacity: 0.32 },
+// Pre-computed extreme particle data
+const EXTREME_PARTICLES = [
+    // Cosmic dust particles
+    { left: 10, top: 15, delay: 0, duration: 25, size: 4, type: 'cosmic' },
+    { left: 25, top: 8, delay: 3, duration: 22, size: 3, type: 'cosmic' },
+    { left: 40, top: 22, delay: 6, duration: 28, size: 5, type: 'cosmic' },
+    { left: 55, top: 5, delay: 9, duration: 24, size: 4, type: 'cosmic' },
+    { left: 70, top: 18, delay: 12, duration: 26, size: 3, type: 'cosmic' },
+    { left: 85, top: 10, delay: 15, duration: 23, size: 4, type: 'cosmic' },
+    { left: 15, top: 45, delay: 2, duration: 27, size: 3, type: 'cosmic' },
+    { left: 88, top: 35, delay: 8, duration: 25, size: 5, type: 'cosmic' },
+    // Floating orbs
+    { left: 5, top: 25, delay: 4, duration: 30, size: 80, type: 'orb' },
+    { left: 92, top: 55, delay: 10, duration: 35, size: 60, type: 'orb' },
+    { left: 20, top: 70, delay: 7, duration: 28, size: 50, type: 'orb' },
+    { left: 75, top: 80, delay: 14, duration: 32, size: 70, type: 'orb' },
+    // Energy rings
+    { left: 50, top: 50, delay: 0, duration: 15, size: 200, type: 'ring' },
+    { left: 50, top: 50, delay: 5, duration: 15, size: 200, type: 'ring' },
+    { left: 50, top: 50, delay: 10, duration: 15, size: 200, type: 'ring' },
+    // Quantum particles
+    { left: 30, top: 30, delay: 1, duration: 8, size: 6, type: 'quantum' },
+    { left: 60, top: 20, delay: 3, duration: 10, size: 8, type: 'quantum' },
+    { left: 80, top: 40, delay: 5, duration: 9, size: 5, type: 'quantum' },
+    { left: 20, top: 60, delay: 7, duration: 11, size: 7, type: 'quantum' },
+    { left: 70, top: 70, delay: 9, duration: 8, size: 6, type: 'quantum' },
 ]
 
 export function HeroSection() {
     const heroRef = useRef<HTMLDivElement>(null)
-    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+    const [mousePosition, setMousePosition] = useState({ x: 0.5, y: 0.5 })
 
     useEffect(() => {
         const handleMouseMove = (e: MouseEvent) => {
@@ -68,196 +53,296 @@ export function HeroSection() {
     }, [])
 
     return (
-        <section ref={heroRef} className="relative overflow-hidden pt-20 pb-32 md:pt-28 lg:pt-36 xl:pt-44 bg-background min-h-screen flex items-center">
-            {/* Animated gradient mesh background */}
-            <div className="absolute inset-0 gradient-mesh opacity-40" />
-
-            {/* Noise overlay for depth */}
-            <div className="absolute inset-0 noise-overlay" />
+        <section ref={heroRef} className="relative overflow-hidden min-h-screen flex items-center bg-background">
+            {/* Extreme animated background layers */}
+            <div className="absolute inset-0">
+                {/* Morphing gradient mesh */}
+                <div className="absolute inset-0 morphing-bg opacity-30" />
 
-            {/* Morphing blob 1 */}
-            <div
-                className="absolute w-[500px] h-[500px] morphing-blob opacity-30 blur-3xl pointer-events-none"
-                style={{
-                    background: `linear-gradient(135deg, hsl(var(--primary)), hsl(280, 65%, 60%))`,
-                    top: '10%',
-                    right: '5%',
-                    transform: `translate(${mousePosition.x * 30}px, ${mousePosition.y * 30}px)`,
-                    transition: 'transform 0.3s ease-out',
-                }}
-            />
+                {/* Cyber grid */}
+                <div className="absolute inset-0 cyber-grid opacity-20" />
 
-            {/* Morphing blob 2 */}
-            <div
-                className="absolute w-[400px] h-[400px] morphing-blob opacity-20 blur-3xl pointer-events-none"
-                style={{
-                    background: `linear-gradient(135deg, hsl(280, 65%, 60%), hsl(199, 89%, 48%))`,
-                    bottom: '10%',
-                    left: '5%',
-                    transform: `translate(${-mousePosition.x * 20}px, ${-mousePosition.y * 20}px)`,
-                    transition: 'transform 0.3s ease-out',
-                    animationDelay: '-5s',
-                }}
-            />
+                {/* Plasma orbs */}
+                <div
+                    className="absolute w-[600px] h-[600px] rounded-full liquid-blob opacity-40 blur-3xl pointer-events-none"
+                    style={{
+                        background: `radial-gradient(circle, hsl(var(--primary)) 0%, hsl(280, 65%, 60%) 50%, transparent 70%)`,
+                        top: '10%',
+                        right: '10%',
+                        transform: `translate(${mousePosition.x * 50}px, ${mousePosition.y * 50}px)`,
+                        transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
+                    }}
+                />
+                <div
+                    className="absolute w-[500px] h-[500px] rounded-full liquid-blob opacity-30 blur-3xl pointer-events-none"
+                    style={{
+                        background: `radial-gradient(circle, hsl(280, 65%, 60%) 0%, hsl(320, 75%, 55%) 50%, transparent 70%)`,
+                        bottom: '10%',
+                        left: '5%',
+                        transform: `translate(${-mousePosition.x * 40}px, ${-mousePosition.y * 40}px)`,
+                        transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
+                        animationDelay: '-10s',
+                    }}
+                />
+                <div
+                    className="absolute w-[400px] h-[400px] rounded-full liquid-blob opacity-25 blur-3xl pointer-events-none"
+                    style={{
+                        background: `radial-gradient(circle, hsl(199, 89%, 48%) 0%, hsl(var(--primary)) 50%, transparent 70%)`,
+                        top: '50%',
+                        left: '50%',
+                        transform: `translate(-50%, -50%) translate(${mousePosition.x * 30}px, ${mousePosition.y * 30}px)`,
+                        transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
+                        animationDelay: '-5s',
+                    }}
+                />
+            </div>
 
-            {/* Floating particles - behind all content */}
-            <div className="absolute inset-0 pointer-events-none overflow-hidden -z-10">
-                {PARTICLES.map((particle, i) => (
-                    <div
-                        key={i}
-                        className="particle"
-                        style={{
-                            left: `${particle.left}%`,
-                            top: `${particle.top}%`,
-                            animationDelay: `${particle.delay}s`,
-                            animationDuration: `${particle.duration}s`,
-                            width: `${particle.width}px`,
-                            height: `${particle.height}px`,
-                            opacity: particle.opacity,
-                        }}
-                    />
-                ))}
+            {/* Extreme particles */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                {EXTREME_PARTICLES.map((particle, i) => {
+                    if (particle.type === 'cosmic') {
+                        return (
+                            <div
+                                key={i}
+                                className="cosmic-dust"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    animationDelay: `${particle.delay}s`,
+                                    animationDuration: `${particle.duration}s`,
+                                }}
+                            />
+                        )
+                    } else if (particle.type === 'orb') {
+                        return (
+                            <div
+                                key={i}
+                                className="absolute rounded-full quantum-particle"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    background: `radial-gradient(circle, hsl(var(--primary) / 0.3), transparent)`,
+                                    filter: 'blur(1px)',
+                                    animationDelay: `${particle.delay}s`,
+                                    animationDuration: `${particle.duration}s`,
+                                }}
+                            />
+                        )
+                    } else if (particle.type === 'ring') {
+                        return (
+                            <div
+                                key={i}
+                                className="energy-wave"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    marginLeft: `-${particle.size / 2}px`,
+                                    marginTop: `-${particle.size / 2}px`,
+                                    animationDelay: `${particle.delay}s`,
+                                }}
+                            />
+                        )
+                    } else {
+                        return (
+                            <div
+                                key={i}
+                                className="absolute rounded-full"
+                                style={{
+                                    left: `${particle.left}%`,
+                                    top: `${particle.top}%`,
+                                    width: `${particle.size}px`,
+                                    height: `${particle.size}px`,
+                                    background: `linear-gradient(135deg, hsl(var(--primary)), hsl(280, 65%, 60%))`,
+                                    boxShadow: `0 0 ${particle.size * 2}px hsl(var(--primary) / 0.5)`,
+                                    animation: `quantum ${particle.duration}s ease-in-out infinite`,
+                                    animationDelay: `${particle.delay}s`,
+                                }}
+                            />
+                        )
+                    }
+                })}
             </div>
 
-            {/* Aurora effect */}
-            <div className="absolute inset-0 aurora-bg opacity-30" />
+            {/* Scan line effect */}
+            <div className="absolute inset-0 scan-line pointer-events-none" />
+
+            {/* Noise overlay */}
+            <div className="absolute inset-0 noise-overlay opacity-50" />
 
-            {/* Subtle grid pattern */}
-            <div className="absolute inset-0 -z-10 opacity-10">
-                <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,hsl(var(--muted))_1px,transparent_1px)] bg-size-[32px_32px]" />
+            {/* Floating tech icons */}
+            <div className="absolute inset-0 pointer-events-none">
+                <div
+                    className="absolute top-1/4 left-[5%] animate-float"
+                    style={{ animationDelay: '0s' }}
+                >
+                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
+                        <Code2 className="h-8 w-8 text-primary" suppressHydrationWarning />
+                    </div>
+                </div>
+                <div
+                    className="absolute top-1/3 right-[5%] animate-float"
+                    style={{ animationDelay: '1s' }}
+                >
+                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
+                        <Zap className="h-8 w-8 text-amber-500" suppressHydrationWarning />
+                    </div>
+                </div>
+                <div
+                    className="absolute bottom-1/3 left-[8%] animate-float"
+                    style={{ animationDelay: '2s' }}
+                >
+                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
+                        <Rocket className="h-8 w-8 text-cyan-500" suppressHydrationWarning />
+                    </div>
+                </div>
+                <div
+                    className="absolute top-[60%] right-[8%] animate-float"
+                    style={{ animationDelay: '3s' }}
+                >
+                    <div className="glass-extreme p-4 rounded-2xl breathing-glow">
+                        <Globe className="h-8 w-8 text-emerald-500" suppressHydrationWarning />
+                    </div>
+                </div>
+                <div
+                    className="absolute top-[20%] left-[45%] animate-float"
+                    style={{ animationDelay: '4s' }}
+                >
+                    <div className="glass-extreme p-3 rounded-xl breathing-glow">
+                        <Layers className="h-6 w-6 text-purple-500" suppressHydrationWarning />
+                    </div>
+                </div>
             </div>
 
-            <div className="container relative z-10 flex flex-col items-center text-center">
-                {/* Animated badge */}
-                <div className="animate-fade-in-up mb-8 inline-flex items-center gap-2 rounded-full glass-card px-6 py-3 text-sm font-medium transition-all duration-500 hover:scale-105 hover:shadow-lg group cursor-default">
-                    <span className="relative flex h-2 w-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
-                    </span>
-                    <Sparkles className="h-4 w-4 text-primary animate-pulse" suppressHydrationWarning />
-                    <span className="interactive-underline cursor-pointer">Your Vision, Our Craft</span>
+            <div className="container relative z-10 flex flex-col items-center text-center pt-32 pb-20">
+                {/* Extreme badge */}
+                <div className="bounce-in mb-10">
+                    <div className="relative group">
+                        {/* Animated border */}
+                        <div className="absolute -inset-1 rounded-full animated-border opacity-50 group-hover:opacity-100 transition-opacity" />
+
+                        <div className="relative glass-extreme px-8 py-4 rounded-full flex items-center gap-3 cursor-default shake-hover">
+                            <div className="relative">
+                                <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-75" />
+                                <span className="relative flex h-3 w-3">
+                                    <Star className="h-3 w-3 text-primary-foreground" suppressHydrationWarning />
+                                </span>
+                            </div>
+                            <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
+                            <span className="font-semibold text-sm dynamic-underline">Your Vision, Our Craft</span>
+                            <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
+                        </div>
+                    </div>
                 </div>
 
-                {/* H1 with creative styling */}
-                <h1 className="animate-fade-in-up animate-delay-1 mb-8 text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold tracking-tight leading-tight">
-                    <span className="block">We Design &amp; Build</span>
-                    <span className="relative inline-block mt-2">
-                        <span className="gradient-text">Digital Products</span>
-                        <svg className="absolute -bottom-2 left-0 w-full" viewBox="0 0 300 12" fill="none">
-                            <path d="M2 10C50 4 150 2 298 10" stroke="hsl(var(--primary))" strokeWidth="3" strokeLinecap="round" className="animate-dash" style={{
-                                strokeDasharray: '300',
-                                strokeDashoffset: '300',
-                                animation: 'dash 2s ease forwards 0.5s'
-                            }} />
-                        </svg>
+                {/* Extreme H1 */}
+                <h1 className="mb-10 text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tighter leading-none">
+                    <span className="block slide-up-fade" style={{ animationDelay: '0.1s' }}>
+                        We Create
+                    </span>
+                    <span className="block mt-2 slide-up-fade" style={{ animationDelay: '0.2s' }}>
+                        <span className="holographic">Digital</span>
                     </span>
-                    <span className="block mt-2 wave-text">
-                        <span>T</span><span>h</span><span>a</span><span>t</span>
-                        <span className="mx-2"> </span>
-                        <span className="text-primary neon-glow">GROW</span>
+                    <span className="block mt-2 slide-up-fade" style={{ animationDelay: '0.3s' }}>
+                        <span className="extrude-3d cursor-default">Masterpieces</span>
                     </span>
                 </h1>
 
                 {/* Subheadline */}
-                <p className="animate-fade-in-up animate-delay-2 mb-12 max-w-2xl text-lg sm:text-xl text-muted-foreground leading-relaxed">
-                    From stunning websites to powerful mobile apps — we turn ambitious ideas
-                    into high-performance digital experiences that your users will{" "}
-                    <span className="text-primary font-medium">love</span>.
+                <p className="slide-up-fade mb-14 max-w-3xl text-lg sm:text-xl md:text-2xl text-muted-foreground leading-relaxed" style={{ animationDelay: '0.4s' }}>
+                    Transforming bold ideas into{" "}
+                    <span className="text-primary font-bold glow-text">extraordinary</span>{" "}
+                    digital experiences that captivate, engage, and{" "}
+                    <span className="holographic font-bold">inspire</span>.
                 </p>
 
-                {/* Enhanced CTAs */}
-                <div className="animate-fade-in-up animate-delay-3 flex flex-col gap-4 sm:flex-row">
-                    <Button asChild size="xl" className="group relative overflow-hidden shine-effect ripple-button">
+                {/* Extreme CTAs */}
+                <div className="flex flex-col gap-5 sm:flex-row slide-up-fade" style={{ animationDelay: '0.5s' }}>
+                    <Button
+                        asChild
+                        size="xl"
+                        className="group relative overflow-hidden morphing-bg text-primary-foreground font-bold text-lg px-10 py-7 rounded-2xl breathing-glow ripple-button shake-hover"
+                    >
                         <Link href="/quote">
-                            <span className="relative z-10 flex items-center">
-                                Get Started
-                                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" suppressHydrationWarning />
+                            <span className="relative z-10 flex items-center gap-2">
+                                Launch Your Project
+                                <Rocket className="h-5 w-5 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:scale-125" suppressHydrationWarning />
                             </span>
                         </Link>
                     </Button>
-                    <Button asChild variant="outline" size="xl" className="group glass-card hover:bg-primary/10">
+                    <Button
+                        asChild
+                        variant="outline"
+                        size="xl"
+                        className="group glass-extreme font-bold text-lg px-10 py-7 rounded-2xl border-2 border-primary/30 hover:border-primary breathing-glow"
+                    >
                         <Link href="/portfolio">
-                            <span className="flex items-center">
-                                View Portfolio
-                                <Rocket className="ml-2 h-4 w-4 transition-transform group-hover:rotate-12" suppressHydrationWarning />
+                            <span className="flex items-center gap-2">
+                                Explore Our Work
+                                <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-2" suppressHydrationWarning />
                             </span>
                         </Link>
                     </Button>
                 </div>
 
-                {/* Floating tech icons */}
-                <div className="absolute top-1/4 left-10 hidden xl:block animate-float" style={{ animationDelay: '0s' }}>
-                    <div className="glass-card p-3 rounded-xl">
-                        <Code2 className="h-6 w-6 text-primary" suppressHydrationWarning />
-                    </div>
-                </div>
-                <div className="absolute top-1/3 right-10 hidden xl:block animate-float" style={{ animationDelay: '1s' }}>
-                    <div className="glass-card p-3 rounded-xl">
-                        <Zap className="h-6 w-6 text-amber-500" suppressHydrationWarning />
-                    </div>
-                </div>
-                <div className="absolute bottom-1/3 left-20 hidden xl:block animate-float" style={{ animationDelay: '2s' }}>
-                    <div className="glass-card p-3 rounded-xl">
-                        <Rocket className="h-6 w-6 text-cyan-500" suppressHydrationWarning />
-                    </div>
-                </div>
-
-                {/* Key Statistics with enhanced styling */}
-                <div className="animate-fade-in-up animate-delay-5 mt-24 relative">
-                    {/* Background overlay to hide particles behind cards */}
-                    <div className="absolute inset-0 bg-gradient-to-t from-background via-background/95 to-background/80 -z-10 rounded-3xl" />
-
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 md:gap-8 w-full max-w-4xl">
+                {/* Extreme Statistics */}
+                <div className="mt-28 grid grid-cols-1 sm:grid-cols-3 gap-8 w-full max-w-5xl">
                     {[
-                        { value: "50+", label: "Projects Shipped", icon: Rocket },
-                        { value: "98%", label: "Client Satisfaction", icon: Sparkles },
-                        { value: "5+", label: "Years of Expertise", icon: Zap },
+                        { value: "50+", label: "Projects Delivered", icon: Rocket, color: "from-blue-500 to-cyan-400" },
+                        { value: "98%", label: "Client Satisfaction", icon: Sparkles, color: "from-purple-500 to-pink-400" },
+                        { value: "5+", label: "Years of Excellence", icon: Zap, color: "from-amber-500 to-orange-400" },
                     ].map((stat, i) => (
                         <div
                             key={stat.label}
-                            className="group relative text-center cursor-default"
+                            className="group slide-up-fade"
+                            style={{ animationDelay: `${0.6 + i * 0.1}s` }}
                         >
-                            {/* Animated border */}
-                            <div className="absolute inset-0 rounded-3xl animated-border opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-                            <div className="relative glass-card rounded-3xl p-8 transition-all duration-500 hover:scale-105 hover:-translate-y-2">
-                                {/* Icon */}
-                                <stat.icon className="h-6 w-6 text-primary mx-auto mb-3 opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" suppressHydrationWarning />
-
-                                {/* Value with counter animation */}
-                                <div className="text-4xl md:text-5xl font-bold gradient-text mb-2 transition-all duration-300 group-hover:scale-110 counter-animate">
-                                    {stat.value}
+                            <div className="relative">
+                                {/* Glow ring on hover */}
+                                <div className="absolute -inset-2 rounded-[2rem] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                                    <div className={`absolute inset-0 rounded-[2rem] bg-gradient-to-r ${stat.color} opacity-20 blur-xl`} />
                                 </div>
 
-                                {/* Label */}
-                                <p className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
-                                    {stat.label}
-                                </p>
+                                <div className="relative glass-extreme rounded-[2rem] p-10 transition-all duration-500 group-hover:scale-105 group-hover:-translate-y-2 floating-island spotlight-follow">
+                                    {/* Icon */}
+                                    <div className={`inline-flex p-4 rounded-2xl bg-gradient-to-br ${stat.color} mb-6 breathing-glow`}>
+                                        <stat.icon className="h-8 w-8 text-white" suppressHydrationWarning />
+                                    </div>
+
+                                    {/* Value */}
+                                    <div className="text-5xl md:text-6xl font-black mb-3">
+                                        <span className="holographic">{stat.value}</span>
+                                    </div>
 
-                                {/* Shine effect on hover */}
-                                <div className="absolute inset-0 rounded-3xl shine-effect pointer-events-none" />
+                                    {/* Label */}
+                                    <p className="text-base text-muted-foreground font-medium dynamic-underline">
+                                        {stat.label}
+                                    </p>
+                                </div>
                             </div>
                         </div>
                     ))}
-                    </div>
                 </div>
 
                 {/* Scroll indicator */}
-                <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-fade-in animate-delay-7">
-                    <div className="scroll-indicator cursor-pointer hover:scale-110 transition-transform" onClick={() => {
-                        window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })
-                    }} />
+                <div className="absolute bottom-10 left-1/2 -translate-x-1/2 bounce-in" style={{ animationDelay: '1s' }}>
+                    <div
+                        className="scroll-indicator cursor-pointer hover:scale-125 transition-transform breathing-glow"
+                        onClick={() => {
+                            window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })
+                        }}
+                    />
                 </div>
             </div>
 
-            {/* CSS for dash animation */}
-            <style jsx>{`
-                @keyframes dash {
-                    to {
-                        stroke-dashoffset: 0;
-                    }
-                }
-            `}</style>
+            {/* Gradient overlays */}
+            <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+            <div className="absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-background/80 to-transparent pointer-events-none" />
         </section>
     )
 }

components/home/ServicesOverview.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
-import { Code, Palette, Smartphone, LineChart, ArrowUpRight, Sparkles } from "lucide-react"
+import { Code, Palette, Smartphone, LineChart, ArrowUpRight, Sparkles, Zap } from "lucide-react"
 import Link from "next/link"
 import { useRef, useState, useEffect } from "react"
 
@@ -45,6 +45,7 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
     const [rotateX, setRotateX] = useState(0)
     const [rotateY, setRotateY] = useState(0)
     const [isHovered, setIsHovered] = useState(false)
+    const [mousePos, setMousePos] = useState({ x: 50, y: 50 })
 
     const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
         if (!cardRef.current) return
@@ -54,8 +55,12 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
         const mouseX = e.clientX - centerX
         const mouseY = e.clientY - centerY
 
-        setRotateX(-mouseY / 10)
-        setRotateY(mouseX / 10)
+        setRotateX(-mouseY / 8)
+        setRotateY(mouseX / 8)
+        setMousePos({
+            x: ((e.clientX - rect.left) / rect.width) * 100,
+            y: ((e.clientY - rect.top) / rect.height) * 100,
+        })
     }
 
     const handleMouseLeave = () => {
@@ -67,38 +72,54 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
     return (
         <div
             ref={cardRef}
-            className="group relative h-full"
+            className="group relative h-full slide-up-fade"
             style={{
-                perspective: '1000px',
-                animationDelay: `${index * 0.1}s`,
+                perspective: '1500px',
+                animationDelay: `${index * 0.15}s`,
             }}
         >
             <Link href="/services" aria-label={`Learn more about ${service.title}`} className="block h-full">
                 <div
-                    className="relative h-full cursor-pointer transition-all duration-300"
+                    className="relative h-full cursor-pointer transition-all duration-500"
                     style={{
-                        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
+                        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`,
                         transformStyle: 'preserve-3d',
                     }}
                     onMouseMove={handleMouseMove}
                     onMouseEnter={() => setIsHovered(true)}
                     onMouseLeave={handleMouseLeave}
                 >
-                    {/* Glow effect */}
+                    {/* Extreme glow effect */}
                     <div
-                        className="absolute -inset-1 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl"
+                        className={`absolute -inset-2 rounded-3xl transition-all duration-500 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
                         style={{
-                            background: `linear-gradient(135deg, ${service.accentColor}, transparent)`,
+                            background: `linear-gradient(135deg, ${service.accentColor}40, ${service.accentColor}20)`,
+                            filter: 'blur(20px)',
+                            transform: 'translateZ(-20px)',
                         }}
                     />
 
+                    {/* Energy rings */}
+                    {isHovered && (
+                        <>
+                            <div
+                                className="absolute -inset-4 rounded-3xl border-2 border-primary/20 energy-wave"
+                                style={{ animationDelay: '0s' }}
+                            />
+                            <div
+                                className="absolute -inset-4 rounded-3xl border-2 border-primary/10 energy-wave"
+                                style={{ animationDelay: '0.5s' }}
+                            />
+                        </>
+                    )}
+
                     {/* Card */}
-                    <Card className="relative h-full overflow-hidden glass-card rounded-3xl border-0 transition-all duration-300 group-hover:shadow-2xl">
-                        {/* Animated gradient border */}
+                    <Card className="relative h-full overflow-hidden glass-extreme rounded-3xl border-0 transition-all duration-500">
+                        {/* Animated gradient overlay */}
                         <div
-                            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"
                             style={{
-                                background: `linear-gradient(135deg, ${service.accentColor}20, transparent, ${service.accentColor}20)`,
+                                background: `linear-gradient(135deg, ${service.accentColor}15 0%, transparent 50%, ${service.accentColor}10 100%)`,
                             }}
                         />
 
@@ -106,56 +127,82 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
                         <div
                             className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
                             style={{
-                                background: `radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), ${service.accentColor}15, transparent 40%)`,
+                                background: `radial-gradient(400px circle at ${mousePos.x}% ${mousePos.y}%, ${service.accentColor}25, transparent 50%)`,
                             }}
                         />
 
+                        {/* Scan line effect on hover */}
+                        {isHovered && (
+                            <div className="absolute inset-0 scan-line pointer-events-none opacity-50" />
+                        )}
+
                         <CardHeader className="relative z-10 pb-4">
-                            {/* Icon container */}
+                            {/* Icon container with extreme effects */}
                             <div
-                                className={`relative w-16 h-16 rounded-2xl flex items-center justify-center mb-5 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3`}
+                                className={`relative w-20 h-20 rounded-2xl flex items-center justify-center mb-6 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6`}
                                 style={{
-                                    background: `linear-gradient(135deg, ${service.accentColor}20, ${service.accentColor}10)`,
-                                    boxShadow: isHovered ? `0 10px 40px ${service.accentColor}30` : 'none',
+                                    background: `linear-gradient(135deg, ${service.accentColor}30, ${service.accentColor}10)`,
+                                    boxShadow: isHovered ? `0 15px 50px ${service.accentColor}40, inset 0 1px 0 ${service.accentColor}20` : 'none',
+                                    transform: `translateZ(30px)`,
                                 }}
                             >
+                                {/* Glow ring behind icon */}
+                                <div
+                                    className={`absolute inset-0 rounded-2xl transition-all duration-500 ${isHovered ? 'scale-125 opacity-100' : 'scale-100 opacity-0'}`}
+                                    style={{
+                                        background: `radial-gradient(circle, ${service.accentColor}30, transparent 70%)`,
+                                        filter: 'blur(10px)',
+                                    }}
+                                />
+
                                 <service.icon
-                                    className="w-8 h-8 transition-all duration-300"
-                                    style={{ color: service.accentColor }}
+                                    className="w-10 h-10 transition-all duration-500"
+                                    style={{
+                                        color: service.accentColor,
+                                        filter: isHovered ? `drop-shadow(0 0 10px ${service.accentColor})` : 'none',
+                                    }}
                                     suppressHydrationWarning
                                 />
 
                                 {/* Sparkle effect on hover */}
                                 <Sparkles
-                                    className="absolute -top-1 -right-1 w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:scale-110"
+                                    className="absolute -top-2 -right-2 w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:scale-125 electric-glow"
                                     suppressHydrationWarning
                                 />
+
+                                {/* Corner accents */}
+                                <div
+                                    className={`absolute -top-1 -left-1 w-3 h-3 rounded-full transition-all duration-500 ${isHovered ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+                                    style={{ background: service.accentColor, boxShadow: `0 0 10px ${service.accentColor}` }}
+                                />
                             </div>
 
-                            {/* Title with arrow */}
+                            {/* Title with animated arrow */}
                             <h3 className="text-xl font-bold leading-tight flex items-center gap-2 group-hover:text-primary transition-colors duration-300">
-                                {service.title}
+                                <span className="dynamic-underline">{service.title}</span>
                                 <ArrowUpRight
-                                    className="h-4 w-4 opacity-0 -translate-x-2 -translate-y-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-300 text-primary"
+                                    className="h-5 w-5 opacity-0 -translate-x-3 -translate-y-3 group-hover:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500 text-primary"
                                     suppressHydrationWarning
                                 />
                             </h3>
                         </CardHeader>
 
                         <CardContent className="relative z-10">
-                            <p className="text-base text-muted-foreground group-hover:text-foreground transition-colors duration-300 leading-relaxed mb-4">
+                            <p className="text-base text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 leading-relaxed mb-5">
                                 {service.description}
                             </p>
 
-                            {/* Feature tags */}
+                            {/* Feature tags with extreme hover effects */}
                             <div className="flex flex-wrap gap-2">
-                                {service.features.map((feature) => (
+                                {service.features.map((feature, i) => (
                                     <span
                                         key={feature}
-                                        className="px-3 py-1 rounded-full text-xs font-medium transition-all duration-300 group-hover:scale-105"
+                                        className="px-4 py-1.5 rounded-full text-xs font-semibold transition-all duration-500 group-hover:scale-105"
                                         style={{
-                                            background: `${service.accentColor}15`,
+                                            background: `${service.accentColor}20`,
                                             color: service.accentColor,
+                                            animationDelay: `${i * 0.1}s`,
+                                            boxShadow: isHovered ? `0 4px 15px ${service.accentColor}20` : 'none',
                                         }}
                                     >
                                         {feature}
@@ -166,7 +213,7 @@ function ServiceCard({ service, index }: { service: typeof services[0]; index: n
 
                         {/* Bottom gradient line */}
                         <div
-                            className="absolute bottom-0 left-0 right-0 h-1 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                            className={`absolute bottom-0 left-0 right-0 h-1 transition-all duration-500 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
                             style={{
                                 background: `linear-gradient(90deg, transparent, ${service.accentColor}, transparent)`,
                             }}
@@ -203,52 +250,65 @@ export function ServicesOverview() {
     }, [])
 
     return (
-        <section ref={sectionRef} className="py-24 bg-background relative overflow-hidden" id="services">
-            {/* Background elements */}
-            <div className="absolute inset-0 gradient-mesh opacity-20" />
-            <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
-            <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
+        <section ref={sectionRef} className="py-32 bg-background relative overflow-hidden" id="services">
+            {/* Extreme background effects */}
+            <div className="absolute inset-0">
+                <div className="absolute inset-0 morphing-bg opacity-20" />
+                <div className="absolute inset-0 cyber-grid opacity-10" />
+
+                {/* Floating orbs */}
+                <div className="absolute top-20 left-20 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl liquid-blob" />
+                <div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl liquid-blob" style={{ animationDelay: '-10s' }} />
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl plasma-effect" />
+            </div>
+
+            {/* Noise overlay */}
+            <div className="absolute inset-0 noise-overlay opacity-30" />
 
             <div className="container relative z-10">
-                {/* Section header with reveal animation */}
-                <div className={`text-center mb-16 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-6">
-                        <Sparkles className="h-4 w-4 text-primary animate-pulse" suppressHydrationWarning />
-                        <span className="text-sm font-medium text-primary">What We Do</span>
+                {/* Section header with extreme animations */}
+                <div className={`text-center mb-20 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'}`}>
+                    <div className="bounce-in mb-8">
+                        <div className="relative inline-flex items-center gap-3 px-6 py-3 rounded-full glass-extreme shake-hover">
+                            <div className="relative">
+                                <span className="absolute inset-0 rounded-full bg-primary animate-ping opacity-75" />
+                                <Zap className="relative h-5 w-5 text-primary" suppressHydrationWarning />
+                            </div>
+                            <span className="text-sm font-bold dynamic-underline">What We Do</span>
+                            <Sparkles className="h-5 w-5 text-primary electric-glow" suppressHydrationWarning />
+                        </div>
                     </div>
 
-                    <h2 className="text-4xl md:text-5xl mb-6 font-bold tracking-tight">
-                        Our <span className="gradient-text">Expertise</span>
+                    <h2 className="text-5xl md:text-6xl lg:text-7xl font-black mb-8 tracking-tight">
+                        Our <span className="holographic">Expertise</span>
                     </h2>
 
-                    <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-                        We offer a comprehensive range of digital services to help your business{" "}
-                        <span className="text-primary font-medium">grow</span> and{" "}
-                        <span className="text-primary font-medium">succeed</span>.
+                    <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+                        We offer a comprehensive range of{" "}
+                        <span className="text-primary font-bold glow-text">digital services</span>{" "}
+                        to help your business{" "}
+                        <span className="holographic font-bold">grow</span> and{" "}
+                        <span className="holographic font-bold">succeed</span>.
                     </p>
                 </div>
 
-                {/* Services grid */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                {/* Services grid with extreme cards */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                     {services.map((service, i) => (
-                        <div
-                            key={service.title}
-                            className={`transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
-                            style={{ transitionDelay: `${i * 100}ms` }}
-                        >
-                            <ServiceCard service={service} index={i} />
-                        </div>
+                        <ServiceCard key={service.title} service={service} index={i} />
                     ))}
                 </div>
 
-                {/* Bottom CTA */}
-                <div className={`text-center mt-12 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-                    <p className="text-muted-foreground">
-                        Need something custom?{" "}
-                        <Link href="/contact" className="text-primary hover:underline underline-offset-4 font-medium interactive-underline">
-                            Let&apos;s discuss your project
-                        </Link>
-                    </p>
+                {/* Bottom CTA with extreme effects */}
+                <div className={`text-center mt-20 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-20'}`}>
+                    <div className="glass-extreme inline-block px-10 py-5 rounded-2xl breathing-glow">
+                        <p className="text-lg text-muted-foreground">
+                            Need something custom?{" "}
+                            <Link href="/contact" className="text-primary font-bold dynamic-underline">
+                                Let&apos;s discuss your project
+                            </Link>
+                        </p>
+                    </div>
                 </div>
             </div>
         </section>