Refine color palette for professional-yet-irreverent look

- Swap neon green (#39FF14) for refined emerald (#34D399)
- Add warm amber accent (#FBBF24) for badges, highlights, fun-facts
- Darken background to charcoal-brown (#141210) for more depth
- Soften glow effects (less rave, more premium)
- Reduce floating emoji count and opacity
- Green-to-gold gradient on hero text
- Subtler card hover effects with border transitions
- Tone down animations (slower, less travel distance)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/globals.css

@@ -1,16 +1,18 @@
 @import "tailwindcss";
 
 @theme {
-  --color-bg-primary: #1A0E0A;
+  --color-bg-primary: #141210;
-  --color-bg-card: #2A1A12;
+  --color-bg-card: #1E1C18;
-  --color-bg-card-hover: #3A2A1A;
+  --color-bg-card-hover: #2A2822;
-  --color-neon: #39FF14;
+  --color-neon: #34D399;
-  --color-neon-dim: #2ECC10;
+  --color-neon-dim: #2AB880;
-  --color-cream: #FFF8E1;
+  --color-cream: #F5F1EA;
-  --color-cream-dim: #E8DFC8;
+  --color-cream-dim: #B8B0A0;
-  --color-brown-light: #5C3D2E;
+  --color-brown-light: #4A4038;
-  --color-brown-medium: #3E2518;
+  --color-brown-medium: #302820;
-  --color-brown-dark: #2A1A12;
+  --color-brown-dark: #1E1C18;
+  --color-accent: #FBBF24;
+  --color-accent-dim: #D99F1A;
 
   --font-space: "Space Grotesk", sans-serif;
 }
@@ -49,17 +51,17 @@
 }
 
 @keyframes float-slow {
-  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
+  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
-  50% { transform: translateY(-30px) rotate(10deg); opacity: 1; }
+  50% { transform: translateY(-25px) rotate(8deg); opacity: 0.8; }
 }
 
 @keyframes pulse-glow {
-  0%, 100% { opacity: 0.4; transform: scale(1); }
+  0%, 100% { opacity: 0.2; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.1); }
+  50% { opacity: 0.5; transform: scale(1.05); }
 }
 
 @keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(30px); }
+  from { opacity: 0; transform: translateY(24px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
@@ -69,19 +71,19 @@
 }
 
 @keyframes slide-in-left {
-  from { opacity: 0; transform: translateX(-40px); }
+  from { opacity: 0; transform: translateX(-30px); }
   to { opacity: 1; transform: translateX(0); }
 }
 
 @keyframes slide-in-right {
-  from { opacity: 0; transform: translateX(40px); }
+  from { opacity: 0; transform: translateX(30px); }
   to { opacity: 1; transform: translateX(0); }
 }
 
 @keyframes wiggle {
   0%, 100% { transform: rotate(0deg); }
-  25% { transform: rotate(-5deg); }
+  25% { transform: rotate(-3deg); }
-  75% { transform: rotate(5deg); }
+  75% { transform: rotate(3deg); }
 }
 
 @keyframes dash-flow {
@@ -98,34 +100,34 @@
 }
 
 .animate-pulse-glow {
-  animation: pulse-glow 3s ease-in-out infinite;
+  animation: pulse-glow 4s ease-in-out infinite;
 }
 
 .animate-fade-in-up {
-  animation: fade-in-up 0.6s ease-out forwards;
+  animation: fade-in-up 0.7s ease-out forwards;
 }
 
 .animate-fade-in {
-  animation: fade-in 0.6s ease-out forwards;
+  animation: fade-in 0.7s ease-out forwards;
 }
 
 .animate-slide-in-left {
-  animation: slide-in-left 0.6s ease-out forwards;
+  animation: slide-in-left 0.7s ease-out forwards;
 }
 
 .animate-slide-in-right {
-  animation: slide-in-right 0.6s ease-out forwards;
+  animation: slide-in-right 0.7s ease-out forwards;
 }
 
 .animate-wiggle {
-  animation: wiggle 2s ease-in-out infinite;
+  animation: wiggle 2.5s ease-in-out infinite;
 }
 
 /* Scroll-triggered animation base state */
 .reveal {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(24px);
-  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
 }
 
 .reveal.visible {
@@ -133,23 +135,23 @@
   transform: translateY(0);
 }
 
-/* Neon glow effect */
+/* Glow effects — subtle, not rave */
 .neon-text {
-  text-shadow: 0 0 10px var(--color-neon), 0 0 40px var(--color-neon), 0 0 80px rgba(57, 255, 20, 0.3);
+  text-shadow: 0 0 20px rgba(52, 211, 153, 0.4), 0 0 60px rgba(52, 211, 153, 0.15);
 }
 
 .neon-border {
-  box-shadow: 0 0 10px rgba(57, 255, 20, 0.3), inset 0 0 10px rgba(57, 255, 20, 0.1);
+  box-shadow: 0 0 8px rgba(52, 211, 153, 0.15), inset 0 0 8px rgba(52, 211, 153, 0.05);
 }
 
 .neon-glow-orb {
-  background: radial-gradient(circle, rgba(57, 255, 20, 0.3) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, transparent 70%);
-  filter: blur(40px);
+  filter: blur(60px);
 }
 
 /* Gradient text */
 .gradient-text {
-  background: linear-gradient(135deg, var(--color-neon) 0%, #7CFF5B 50%, var(--color-cream) 100%);
+  background: linear-gradient(135deg, var(--color-neon) 0%, var(--color-accent) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -157,17 +159,18 @@
 
 /* Card hover effect */
 .card-hover {
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
 .card-hover:hover {
-  transform: translateY(-4px);
+  transform: translateY(-3px);
-  box-shadow: 0 0 20px rgba(57, 255, 20, 0.15), 0 10px 40px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(52, 211, 153, 0.08);
+  border-color: rgba(52, 211, 153, 0.3);
 }
 
 /* Scrollbar styling */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -176,9 +179,9 @@
 
 ::-webkit-scrollbar-thumb {
   background: var(--color-brown-light);
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neon-dim);
+  background: var(--color-cream-dim);
 }

components/contact-section.tsx

@@ -190,8 +190,8 @@ export function ContactSection() {
               </div>
             </div>
 
-            <div className="rounded-xl border border-neon/20 bg-neon/5 p-5">
+            <div className="rounded-xl border border-accent/20 bg-accent/5 p-5">
-              <p className="text-sm text-neon font-medium mb-1">
+              <p className="text-sm text-accent font-medium mb-1">
                 Fun fact 💩⚡
               </p>
               <p className="text-sm text-cream-dim">

components/hero-section.tsx

@@ -4,14 +4,12 @@ import { Button } from "@/components/ui/button";
 import { Zap, ArrowDown } from "lucide-react";
 
 const floatingEmojis = [
-  { emoji: "💩", top: "15%", left: "8%", delay: "0s", duration: "6s" },
+  { emoji: "💩", top: "20%", left: "8%", delay: "0s", duration: "8s" },
-  { emoji: "⚡", top: "25%", right: "12%", delay: "1s", duration: "7s" },
+  { emoji: "⚡", top: "30%", right: "10%", delay: "1.5s", duration: "9s" },
-  { emoji: "💩", top: "60%", left: "5%", delay: "2s", duration: "8s" },
+  { emoji: "🌿", top: "65%", left: "6%", delay: "3s", duration: "10s" },
-  { emoji: "🔋", top: "70%", right: "8%", delay: "0.5s", duration: "6.5s" },
+  { emoji: "🔋", top: "75%", right: "8%", delay: "0.5s", duration: "8.5s" },
-  { emoji: "💩", top: "40%", right: "5%", delay: "3s", duration: "7s" },
+  { emoji: "💩", top: "45%", right: "4%", delay: "4s", duration: "9s" },
-  { emoji: "🌿", top: "80%", left: "15%", delay: "1.5s", duration: "9s" },
+  { emoji: "⚡", top: "12%", left: "80%", delay: "2s", duration: "10s" },
-  { emoji: "⚡", top: "10%", left: "75%", delay: "2.5s", duration: "6s" },
-  { emoji: "💩", top: "50%", left: "90%", delay: "0.8s", duration: "7.5s" },
 ];
 
 export function HeroSection() {
@@ -28,7 +26,7 @@ export function HeroSection() {
       {floatingEmojis.map((item, i) => (
         <span
           key={i}
-          className="absolute text-3xl sm:text-4xl animate-float-slow pointer-events-none select-none opacity-60"
+          className="absolute text-2xl sm:text-3xl animate-float-slow pointer-events-none select-none opacity-30"
           style={{
             top: item.top,
             left: item.left,
@@ -45,7 +43,7 @@ export function HeroSection() {
       {/* Content */}
       <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
         <div className="animate-fade-in-up">
-          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-neon/30 bg-neon/10 px-4 py-2 text-sm text-neon">
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/10 px-4 py-2 text-sm text-accent">
             <Zap className="h-4 w-4" />
             <span>Your #2 Is Our #1 Priority</span>
           </div>

components/impact-section.tsx

@@ -54,7 +54,7 @@ function StatCard({
       <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
         <stat.icon className="h-7 w-7 text-neon" />
       </div>
-      <div className="text-4xl sm:text-5xl font-bold text-neon neon-text mb-2">
+      <div className="text-4xl sm:text-5xl font-bold text-cream neon-text mb-2">
         {count}
         {stat.suffix}
       </div>

components/packages-section.tsx

@@ -93,7 +93,7 @@ export function PackagesSection() {
               style={{ animationDelay: `${0.2 + index * 0.1}s` }}
             >
               {pkg.featured && (
-                <div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-neon px-4 py-1 text-xs font-bold text-bg-primary">
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-accent px-4 py-1 text-xs font-bold text-bg-primary">
                   <Star className="h-3 w-3" />
                   Most Popular
                 </div>

components/ui/button.tsx

@@ -8,9 +8,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-neon text-bg-primary hover:bg-neon-dim hover:shadow-[0_0_20px_rgba(57,255,20,0.4)]",
+          "bg-neon text-bg-primary hover:bg-neon-dim hover:shadow-[0_0_20px_rgba(52,211,153,0.25)]",
         outline:
-          "border-2 border-neon text-neon hover:bg-neon/10 hover:shadow-[0_0_15px_rgba(57,255,20,0.2)]",
+          "border-2 border-neon/60 text-neon hover:bg-neon/10 hover:border-neon",
         ghost: "text-cream hover:bg-cream/10",
       },
       size: {

components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-2xl border border-brown-light/30 bg-bg-card p-6 shadow-lg",
+      "rounded-2xl border border-brown-light/20 bg-bg-card p-6 shadow-lg backdrop-blur-sm",
       className
     )}
     {...props}