Modern Gradient

# Visual style: Modern Gradient

Vibrant modern gradient style with colorful gradient backgrounds, glass-textured cards, and dynamic lighting effects. Ideal for startups, digital products, and event pages.

## Philosophy
Modern Gradient style creates visual impact and vitality through rich gradient colors and lighting effects.

Core principles:
- Visual vitality: Gradient colors bring dynamism and energy
- Depth and layers: Create depth through gradients and transparency
- Modern tech: Convey an innovative and cutting-edge brand image
- Emotional resonance: Colors evoke positive emotional responses

## Do
- Use bg-gradient-to-r from-violet-500 via-purple-500 to-fuchsia-500 and similar gradients
- Cards use backdrop-blur-xl bg-white/10 glass effect
- Buttons use gradient + hover gradient shift effect
- Dark backgrounds bg-slate-950 or bg-[#1e1b4b]
- Text uses bg-gradient-to-r bg-clip-text text-transparent gradient effect
- Use rounded-2xl or rounded-3xl corners
- Add glow orb effects blur-3xl opacity-30 as decoration

## Don't
- Do not use solid color backgrounds (main areas)
- Do not use monotone gray schemes
- Do not use sharp corners rounded-none
- Do not use old-style gradients (e.g. vertical button gradients)
- Do not overuse gradients causing visual clutter
- Do not use dark text on dark gradients

## Rules for the AI
STYLE: Modern Gradient
TYPE: Vibrant, energetic gradient design

MUST USE:
- Gradient backgrounds: bg-gradient-to-r from-violet-500 to-fuchsia-500
- Glass morphism cards: backdrop-blur-xl bg-white/10 border-white/20
- Dark base background: bg-slate-950 or bg-[#1e1b4b]
- Gradient text: bg-gradient-to-r bg-clip-text text-transparent
- Colored shadows: shadow-violet-500/25
- Large rounded corners: rounded-2xl, rounded-3xl
- Glow orbs for decoration: blur-3xl opacity-30

MUST AVOID:
- Solid color backgrounds (main areas)
- Monotone gray schemes
- Sharp corners (rounded-none)
- Old-style gradients (vertical button gradients)
- Visual clutter from too many gradients
- Dark text on dark gradients

COLOR COMBOS:
- Violet to Fuchsia: from-violet-500 to-fuchsia-500
- Cyan to Blue: from-cyan-500 to-blue-500
- Pink to Orange: from-pink-500 to-orange-500
- Multi-color: from-violet-500 via-fuchsia-500 to-cyan-500

TYPOGRAPHY:
- Headings: White or gradient text
- Body: text-white/70 or text-white/80
- Font weight: font-medium to font-semibold

## Animation & Interaction Rules

- Gradient Flow: Gradient interactions should include color band shifting (e.g. bg-[length:200%_auto] + hover:bg-right), avoid static brightening/darkening.
- Neon Dispersion: On hover, colored shadow spread radius increases significantly, reinforcing futuristic glow halo.
- Zero-Gravity Float: Cards and buttons can slightly lift and micro-scale, recommend duration-500 + ease-out.
- Luminous Borders: Semi-transparent borders brighten to brand color opacity on hover, creating edges lit by internal light.