get-shit-pretty 0.7.0 → 0.7.3

package/gsp/skills/gsp-style/styles/web3.md

@@ -1,373 +1,337 @@
-<role>
-You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
-
-Before proposing or writing any code, first build a clear mental model of the current system:
-
-- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
-- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
-- Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
-- Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).
-
-Ask the user focused questions to understand the user's goals. Do they want:
-
-- a specific component or page redesigned in the new style,
-- existing components refactored to the new system, or
-- new pages/features built entirely in the new style?
-
-Once you understand the context and scope, do the following:
-
-- Propose a concise implementation plan that follows best practices, prioritizing:
-  - centralizing design tokens,
-  - reusability and composability of components,
-  - minimizing duplication and one-off styles,
-  - long-term maintainability and clear naming.
-- When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).
-- Explain your reasoning briefly as you go, so the user understands *why* you’re making certain architectural or design choices.
-
-Always aim to:
-
-- Preserve or improve accessibility.
-- Maintain visual consistency with the provided design system.
-- Leave the codebase in a cleaner, more coherent state than you found it.
-- Ensure layouts are responsive and usable across devices.
-- Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.
-
-</role>
-
-<design-system>
-# Design Philosophy: The "Bitcoin DeFi" Aesthetic
-
-This style embodies the visual DNA of Bitcoin and decentralized finance—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. It is **not generic dark mode**; it is a deep cosmic void where data structures glow with the warmth of Bitcoin orange and the brilliance of digital gold.
-
-## Core Design Principles
-
-1. **Luminescent Energy**: Light emanates from interactive elements themselves. Bitcoin orange glows, golden highlights shimmer, and data points pulse with life against the true void background. Shadows are colored (orange/gold tints), not just black.
-2. **Mathematical Precision**: Everything follows strict geometric rules. Ultra-thin 1px borders define boundaries, monospace fonts display data with technical accuracy, and grids provide the underlying structure of the blockchain aesthetic.
-3. **Layered Depth**: Create three-dimensional space through transparency stacking (glass morphism), colored glow shadows, and backdrop blur effects. Elements float in Z-space without heavy skeuomorphism—it's digital depth, not physical.
-4. **Textured Void**: Backgrounds are never flat. Subtle grid patterns (representing blockchain networks), radial gradient blurs (representing energy fields), and noise textures bring the void to life. The darkness breathes.
-5. **Trust Through Design**: High contrast, clear hierarchy, and technical precision communicate security and reliability. The aesthetic says "your assets are safe here."
-
-The vibe is **Secure, Technical, and Valuable**. This is digital gold—it should feel premium, cutting-edge, and engineered to perfection. Think Bitcoin mining rigs humming in the darkness, glowing with orange heat.
-
-# Design Token System
-
-## Colors (Dark Mode Only)
-
-This palette uses a "True Void" foundation with "Bitcoin Fire" energy—the warmth of Bitcoin orange and the brilliance of digital gold.
-
-* **Background**: `#030304` (True Void) - The deepest space where all begins
-* **Surface**: `#0F1115` (Dark Matter) - Elevated surfaces, cards, and panels
-* **Foreground**: `#FFFFFF` (Pure Light) - Primary text, maximum contrast
-* **Muted**: `#94A3B8` (Stardust) - Secondary text, descriptions, metadata
-* **Border**: `#1E293B` (Dim Boundary) - Subtle borders at rest (often at 10-20% opacity when using white)
-* **Primary Accent**: `#F7931A` (Bitcoin Orange) - The iconic color of decentralization. Primary CTAs, links, active states, and trust indicators
-* **Secondary Accent**: `#EA580C` (Burnt Orange) - A deeper, warmer orange for gradients, secondary elements, and visual depth
-* **Tertiary Accent**: `#FFD600` (Digital Gold) - The color of value. Used in gradients with Bitcoin Orange, highlights, and success states
-
-**Gradient Formula**: The signature look is `linear-gradient(to right, #EA580C, #F7931A)` or `linear-gradient(to right, #F7931A, #FFD600)` for text and buttons.
-
-## Typography
-
-The type system balances technical precision with modern geometric forms.
-
-* **Headings**: `Space Grotesk` (Google Font) - A geometric grotesque with quirky technical character
-
-  * Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
-  * Usage: All headings (h1-h6), section titles, card titles
-  * Apply `font-heading` class
-* **Body**: `Inter` (Google Font) - Highly legible sans-serif optimized for screens
-
-  * Weights: 400 (Regular), 500 (Medium), 600 (Semibold)
-  * Usage: Body copy, descriptions, buttons
-  * Apply `font-body` class
-* **Mono/Data**: `JetBrains Mono` (Google Font) - Technical monospace for precision
-
-  * Weights: 400 (Regular), 500 (Medium)
-  * Usage: Stats, prices, badges, technical labels, navigation links
-  * Apply `font-mono` class
-* **Scale Philosophy**: Dramatic contrast between display and body. Heroes are massive (`text-4xl` → `md:text-7xl`), body is comfortable (`text-base` or `text-lg`). Mobile-first scaling prevents overwhelming small screens.
-* **Leading & Tracking**: Tight leading on headings (`leading-tight`), relaxed on body (`leading-relaxed`). Uppercase mono text gets generous tracking (`tracking-wider`, `tracking-widest`).
-
-## Radius & Borders
-
-Geometric precision with soft curves for approachability.
-
-* **Radius Tokens**:
-
-  * Cards/Containers: `rounded-2xl` (16px) or `rounded-xl` (12px)
-  * Buttons: `rounded-full` (pill shape)
-  * Inputs: `rounded-lg` (8px) or bottom-border only for minimalism
-  * Small elements (badges, icons): `rounded-lg` or `rounded-full`
-* **Border Philosophy**: Ultra-thin `1px` borders create delicate boundaries without visual weight
-
-  * Default state: `border border-white/10` (barely visible structure)
-  * Hover state: `border-[#F7931A]/50` (orange accent, 50% opacity)
-  * Active/Focus: `border-[#F7931A]` (full intensity)
-* **Special Border Techniques**:
-
-  * Corner accents: Small decorative border segments at corners (see How It Works cards)
-  * Gradient borders: Simulate with inner pseudo-elements or subtle box-shadow gradients
-
-## Shadows & Effects (The Glow)
-
-The signature of this style is **colored luminescence**—shadows and glows in Bitcoin orange and gold tints.
-
-* **Orange Glow** (Primary): `shadow-[0_0_20px_-5px_rgba(234,88,12,0.5)]` or `shadow-[0_0_30px_-5px_rgba(247,147,26,0.6)]`
-
-  * Used on buttons, cards on hover, primary CTAs, and interactive elements
-* **Gold Glow** (Accent): `shadow-[0_0_20px_rgba(255,214,0,0.3)]`
-
-  * Used on special highlights, success states, value indicators
-* **Subtle Card Elevation**: `shadow-[0_0_50px_-10px_rgba(247,147,26,0.1)]`
-
-  * Used on product mockups, major sections
-* **Glass Morphism**:
-
-  * Formula: `backdrop-blur-lg` + `bg-white/5` or `bg-black/40`
-  * Creates floating, translucent panels that reveal background blur
-  * Used on floating cards (hero), testimonials, "How It Works" cards
-* **Radial Blur Backgrounds**: Large, soft radial gradients with heavy blur for ambient background glow
-
-  * Example: `bg-[#F7931A] opacity-10 blur-[120px]` positioned absolutely
-
-## Textures & Patterns
-
-Backgrounds breathe with subtle, non-distracting patterns that reinforce the blockchain/network theme.
-
-* **Grid Pattern** (Signature):
-
-  ```css
-  background-size: 50px 50px;
-  background-image:
-    linear-gradient(to right, rgba(30, 41, 59, 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
-  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
-  ```
-
-  * Creates a fading grid that disappears toward edges (vignette effect)
-  * Used on hero section
-* **External Texture Overlays**:
-
-  * Example: `bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5`
-  * Very subtle, barely visible patterns for visual interest
-* **Radial Gradient Blurs**: Massive, soft color blobs for ambient lighting
-
-  * Position absolutely, use low opacity (5-10%), apply blur-[120px] or blur-[150px]
-  * Creates depth and guides eye to focal points
-
-# Component Stylings
-
-## Buttons
-
-Buttons are bold, pill-shaped, and emit colored light. All use `rounded-full` for the signature crypto pill shape.
-
-* **Primary (Default)**:
-
-  * Background: `bg-gradient-to-r from-[#EA580C] to-[#F7931A]`
-  * Text: White, bold, uppercase with `tracking-wider`
-  * Shadow: `shadow-[0_0_20px_-5px_rgba(234,88,12,0.5)]`
-  * Hover: `scale-105` + intensified shadow `shadow-[0_0_30px_-5px_rgba(247,147,26,0.6)]`
-  * Min height: 44px (touch-friendly)
-* **Outline**:
-
-  * Background: Transparent
-  * Border: `border-2 border-white/20`
-  * Text: White
-  * Hover: `border-white` + `bg-white/10`
-* **Ghost**:
-
-  * Background: Transparent, no border
-  * Text: White
-  * Hover: `bg-white/10` + `text-[#F7931A]`
-* **Link**:
-
-  * Text: `text-[#F7931A]`
-  * Hover: Underline
-
-All buttons include smooth `transition-all` for responsive micro-interactions.
-
-## Cards (The "Block" Concept)
-
-Cards are elevated surfaces that float above the void, representing blocks in the chain.
-
-* **Standard Card**:
-
-  * Background: `bg-[#0F1115]` (Dark Matter surface)
-  * Border: `border border-white/10` (subtle boundary)
-  * Radius: `rounded-2xl` (16px)
-  * Padding: `p-8` (generous spacing)
-  * Hover: `hover:-translate-y-1` (lift) + `hover:border-[#F7931A]/50` + `hover:shadow-[0_0_30px_-10px_rgba(247,147,26,0.2)]`
-  * Transition: `transition-all duration-300`
-* **Glass Cards** (Floating/Special):
-
-  * Background: `bg-black/40` or `bg-white/5`
-  * Backdrop: `backdrop-blur-sm` or `backdrop-blur-lg`
-  * Border: `border border-white/10`
-  * Creates translucent, floating effect
-* **Pricing Cards**:
-
-  * Highlighted tier: `scale-105`, `border-[#F7931A]`, elevated z-index, `shadow-[0_0_40px_-10px_rgba(247,147,26,0.15)]`
-  * Others: Lower opacity (`opacity-80`), scale up on hover
-* **Card Hierarchy**:
-
-  * Header: `p-8 pb-4`
-  * Title: `font-heading font-semibold text-2xl`
-  * Description: `text-[#94A3B8] text-sm`
-  * Content: `p-8 pt-0`
-  * Footer: `p-8 pt-0`
-
-## Inputs
-
-Minimalist, precise input fields with bottom-border styling for a technical aesthetic.
-
-* **Background**: `bg-black/50` (semi-transparent dark)
-* **Border**: Bottom border only - `border-b-2 border-white/20`
-* **Height**: `h-12` (48px for touch targets)
-* **Padding**: `px-4 py-2`
-* **Text**: `text-white text-sm`
-* **Placeholder**: `placeholder:text-white/30`
-* **Focus State**:
-  * Border: `focus-visible:border-[#F7931A]`
-  * Glow: `focus-visible:shadow-[0_10px_20px_-10px_rgba(247,147,26,0.3)]`
-  * No outline: `focus-visible:outline-none`
-* **Disabled**: `disabled:opacity-50 disabled:cursor-not-allowed`
-
-Inputs feel like data entry terminals—clean, precise, and purposeful.
-
-## Icons
-
-Icons from `lucide-react` reinforce the technical, precise aesthetic.
-
-* **Stroke Width**: Default (1.5-2px for clean, technical lines)
-* **Colors**: Use accent colors to create hierarchy
-
-  * Orange: `text-[#F7931A]` or `text-[#EA580C]`
-  * Gold: `text-[#FFD600]`
-  * Muted: `text-[#94A3B8]`
-  * White: `text-white`
-* **Icon Containers**: Wrap in colored, glowing containers
-
-  * Example: `bg-[#EA580C]/20 border border-[#EA580C]/50 rounded-lg p-3`
-  * Creates a "holographic node" effect
-  * Hover: Add glow shadow `hover:shadow-[0_0_20px_rgba(234,88,12,0.4)]`
-* **Decorative Icons**: Large, watermark-style icons in card backgrounds
-
-  * High opacity on hover for subtle reveal effect
-  * Example: `opacity-20 group-hover:opacity-100`
-
-# Non-Generic "Bold" Choices
-
-This design MUST NOT look like default Tailwind. These bold choices create unmistakable personality:
-
-1. **Gradient Text on Headlines**: Apply `bg-gradient-to-r from-[#F7931A] to-[#FFD600] bg-clip-text text-transparent` to final 1-2 words of hero headlines. Creates instant visual hierarchy and Bitcoin brand association.
-2. **Spinning Orbital Rings**: Hero section features animated 3D-style orb with CSS rotating rings (`animate-[spin_10s_linear_infinite]` and reverse). Floating stat cards bounce around it with staggered delays.
-3. **Corner Border Accents**: "How It Works" cards use decorative corner borders (`border-t border-l` on top-left, `border-r border-b` on bottom-right) in Bitcoin orange, creating a "selected node" effect.
-4. **Glowing Animated Badges**: Pulsing dot badges (`animate-ping`) on trust indicators and status markers. Suggests live network activity.
-5. **Background Icon Watermarks**: Large, rotated, low-opacity icons in feature card backgrounds that reveal on hover (`opacity-20 group-hover:opacity-100`).
-6. **Timeline as Blockchain**: "How It Works" uses a vertical gradient line (orange to transparent) with numbered circular nodes, mimicking a blockchain ledger.
-7. **Asymmetric Pricing Scale**: The popular pricing tier is `scale-105` and elevated, while others are `opacity-80`, creating intentional hierarchy through scale manipulation.
-8. **Glass Morphism with Grid Patterns**: Combine `backdrop-blur` with background grid patterns visible through transparency, creating layered depth.
-9. **Colored Shadows Replace Black**: ALL shadows use orange/gold tints. No pure black shadows exist in this design system.
-
-# Layout & Spacing
-
-* **Container Width**: `max-w-7xl` (1280px) - Wide and expansive to showcase data and content without cramping
-* **Section Padding**: Generous vertical `py-24` (96px) creates breathing room between major sections
-* **Density**: Spacious approach with `gap-8` (32px) or `gap-12` (48px) between grid items
-* **Section Dividers**: NO hard lines or `<hr>` elements. Sections separate through:
-
-  * Vertical spacing (`py-24`)
-  * Alternating backgrounds (`bg-[#030304]` → `bg-[#0F1115]` → `bg-[#030304]`)
-  * Subtle top/bottom borders on specific sections (e.g., stats ticker has `border-y`)
-* **Responsive Grids**:
-
-  * Mobile-first: Single column by default
-  * Tablet: `md:grid-cols-2` or `md:grid-cols-3`
-  * Desktop: Keep `md:grid-cols-3` or `lg:grid-cols-4` for features
-  * Pricing: Always `md:grid-cols-3` for tier comparison
-
-# Animation & Motion
-
-Motion should feel **precise, snappy, and purposeful**—like a high-performance trading terminal.
-
-* **Custom Float Animation**:
-
-  ```css
-  @keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-20px); }
-  }
-  .animate-float {
-    animation: float 8s ease-in-out infinite;
-  }
-  ```
-
-  * Applied to hero 3D orb graphic
-  * Slow, smooth, endless float creates ethereal quality
-* **Spinning Orbitals**:
-
-  * `animate-[spin_10s_linear_infinite]` for outer ring
-  * `animate-[spin_15s_linear_infinite_reverse]` for inner ring (reverse direction)
-  * Creates mesmerizing 3D depth illusion
-* **Bouncing Cards**: Floating stat cards use `animate-bounce` with custom durations (`3s`, `4s`) and delays (`delay-1s`) for staggered motion
-* **Pulsing Indicators**: Status badges use `animate-ping` for "live" feel
-* **Interaction Speed**: Fast and responsive (`duration-200` or `duration-300`)
-
-  * Button hover: `transition-all duration-300`
-  * Card lift: `transition-all duration-300`
-  * Input focus: Instant (`duration-200`)
-* **Hover Effects**:
-
-  * Cards: Lift (`-translate-y-1`), border color shift, glow intensification
-  * Buttons: Scale (`scale-105`), glow spread
-  * Images: Scale (`scale-110`), contrast boost (`contrast-125`)
-
-The motion design communicates **speed, precision, and responsiveness**—critical values in crypto/finance.
-
-# Responsive Strategy
-
-The design must maintain its bold personality across all screen sizes while adapting gracefully.
-
-* **Mobile-First Philosophy**: Start with single-column layouts, scale up for larger screens
-* **Breakpoints**:
-
-  * `sm`: 640px - Minor adjustments
-  * `md`: 768px - Major layout shifts (2-3 columns activate)
-  * `lg`: 1024px - Full desktop experience
-  * `xl`: 1280px - Maximum width container (`max-w-7xl`)
-* **Typography Scaling**: All headings use responsive classes
-
-  * Hero: `text-4xl sm:text-5xl md:text-7xl`
-  * Section Titles: `text-2xl md:text-4xl` or `md:text-5xl`
-  * Body: `text-base md:text-lg`
-  * Keep mobile readable, don't overwhelm small screens
-* **Touch Targets**: All interactive elements minimum 44px (`min-w-[44px]`, `h-10+`)
-* **Mobile Adaptations**:
-
-  * Navigation: Show only essential CTA on mobile, hide secondary nav
-  * Hero 3D graphic: Smaller size on mobile (`h-[300px] md:h-[450px]`)
-  * Grids: Single column → 2-3 columns at `md`
-  * Pricing cards: Stack vertically, remove scale effect on mobile
-  * How It Works timeline: Left-aligned on mobile with simpler layout
-* **Maintain Core Aesthetic**: Grid patterns, glows, and gradients persist on mobile—don't strip personality for smaller screens
-
-# Accessibility & Best Practices
-
-* **Color Contrast**: White text on `#030304` exceeds WCAG AAA (21:1 ratio). Orange `#F7931A` on dark backgrounds meets AA for large text.
-* **Focus States**: All interactive elements have visible focus rings using `focus-visible:ring-2 focus-visible:ring-[#F7931A]`
-* **Semantic HTML**: Proper heading hierarchy (h1 → h2 → h3), `<nav>`, `<section>`, `<button>` elements
-* **Alt Text**: All images require descriptive alt attributes
-* **Keyboard Navigation**: All interactive elements accessible via Tab, buttons activate on Enter/Space
-* **Motion Preferences**: Consider `prefers-reduced-motion` for users sensitive to animation (disable float/spin animations)
-
-# Implementation Notes
-
-* **Font Loading**: Use `fontImport()` helper to load Google Fonts
-* **Custom Classes**: Define `.font-heading`, `.font-body`, `.font-mono` in style block
-* **Grid Pattern**: Define `.bg-grid-pattern` with CSS-in-JS in style block
-* **Glass Morphism**: Define `.holographic-gradient` helper class
-* **Components**: Build Button, Card, and Input components using `cva` (class-variance-authority) following Shadcn patterns but with Crypto-specific styling
-* **Icons**: Import specific icons from `lucide-react` as needed (Zap, Lock, Layers, Globe, Check, etc.)
-
-This is not a generic dark theme. This is the **Bitcoin DeFi aesthetic**—engineered for precision, security, and digital value.
-`</design-system>`
+<design-system>
+# Design Philosophy: The "Bitcoin DeFi" Aesthetic
+
+This style embodies the visual DNA of Bitcoin and decentralized finance—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. It is **not generic dark mode**; it is a deep cosmic void where data structures glow with the warmth of Bitcoin orange and the brilliance of digital gold.
+
+## Core Design Principles
+
+1. **Luminescent Energy**: Light emanates from interactive elements themselves. Bitcoin orange glows, golden highlights shimmer, and data points pulse with life against the true void background. Shadows are colored (orange/gold tints), not just black.
+2. **Mathematical Precision**: Everything follows strict geometric rules. Ultra-thin 1px borders define boundaries, monospace fonts display data with technical accuracy, and grids provide the underlying structure of the blockchain aesthetic.
+3. **Layered Depth**: Create three-dimensional space through transparency stacking (glass morphism), colored glow shadows, and backdrop blur effects. Elements float in Z-space without heavy skeuomorphism—it's digital depth, not physical.
+4. **Textured Void**: Backgrounds are never flat. Subtle grid patterns (representing blockchain networks), radial gradient blurs (representing energy fields), and noise textures bring the void to life. The darkness breathes.
+5. **Trust Through Design**: High contrast, clear hierarchy, and technical precision communicate security and reliability. The aesthetic says "your assets are safe here."
+
+The vibe is **Secure, Technical, and Valuable**. This is digital gold—it should feel premium, cutting-edge, and engineered to perfection. Think Bitcoin mining rigs humming in the darkness, glowing with orange heat.
+
+# Design Token System
+
+## Colors (Dark Mode Only)
+
+This palette uses a "True Void" foundation with "Bitcoin Fire" energy—the warmth of Bitcoin orange and the brilliance of digital gold.
+
+* **Background**: `#030304` (True Void) - The deepest space where all begins
+* **Surface**: `#0F1115` (Dark Matter) - Elevated surfaces, cards, and panels
+* **Foreground**: `#FFFFFF` (Pure Light) - Primary text, maximum contrast
+* **Muted**: `#94A3B8` (Stardust) - Secondary text, descriptions, metadata
+* **Border**: `#1E293B` (Dim Boundary) - Subtle borders at rest (often at 10-20% opacity when using white)
+* **Primary Accent**: `#F7931A` (Bitcoin Orange) - The iconic color of decentralization. Primary CTAs, links, active states, and trust indicators
+* **Secondary Accent**: `#EA580C` (Burnt Orange) - A deeper, warmer orange for gradients, secondary elements, and visual depth
+* **Tertiary Accent**: `#FFD600` (Digital Gold) - The color of value. Used in gradients with Bitcoin Orange, highlights, and success states
+
+**Gradient Formula**: The signature look is `linear-gradient(to right, #EA580C, #F7931A)` or `linear-gradient(to right, #F7931A, #FFD600)` for text and buttons.
+
+## Typography
+
+The type system balances technical precision with modern geometric forms.
+
+* **Headings**: `Space Grotesk` (Google Font) - A geometric grotesque with quirky technical character
+
+  * Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
+  * Usage: All headings (h1-h6), section titles, card titles
+  * Apply `font-heading` class
+* **Body**: `Inter` (Google Font) - Highly legible sans-serif optimized for screens
+
+  * Weights: 400 (Regular), 500 (Medium), 600 (Semibold)
+  * Usage: Body copy, descriptions, buttons
+  * Apply `font-body` class
+* **Mono/Data**: `JetBrains Mono` (Google Font) - Technical monospace for precision
+
+  * Weights: 400 (Regular), 500 (Medium)
+  * Usage: Stats, prices, badges, technical labels, navigation links
+  * Apply `font-mono` class
+* **Scale Philosophy**: Dramatic contrast between display and body. Heroes are massive (`text-4xl` → `md:text-7xl`), body is comfortable (`text-base` or `text-lg`). Mobile-first scaling prevents overwhelming small screens.
+* **Leading & Tracking**: Tight leading on headings (`leading-tight`), relaxed on body (`leading-relaxed`). Uppercase mono text gets generous tracking (`tracking-wider`, `tracking-widest`).
+
+## Radius & Borders
+
+Geometric precision with soft curves for approachability.
+
+* **Radius Tokens**:
+
+  * Cards/Containers: `rounded-2xl` (16px) or `rounded-xl` (12px)
+  * Buttons: `rounded-full` (pill shape)
+  * Inputs: `rounded-lg` (8px) or bottom-border only for minimalism
+  * Small elements (badges, icons): `rounded-lg` or `rounded-full`
+* **Border Philosophy**: Ultra-thin `1px` borders create delicate boundaries without visual weight
+
+  * Default state: `border border-white/10` (barely visible structure)
+  * Hover state: `border-[#F7931A]/50` (orange accent, 50% opacity)
+  * Active/Focus: `border-[#F7931A]` (full intensity)
+* **Special Border Techniques**:
+
+  * Corner accents: Small decorative border segments at corners (see How It Works cards)
+  * Gradient borders: Simulate with inner pseudo-elements or subtle box-shadow gradients
+
+## Shadows & Effects (The Glow)
+
+The signature of this style is **colored luminescence**—shadows and glows in Bitcoin orange and gold tints.
+
+* **Orange Glow** (Primary): `shadow-[0_0_20px_-5px_rgba(234,88,12,0.5)]` or `shadow-[0_0_30px_-5px_rgba(247,147,26,0.6)]`
+
+  * Used on buttons, cards on hover, primary CTAs, and interactive elements
+* **Gold Glow** (Accent): `shadow-[0_0_20px_rgba(255,214,0,0.3)]`
+
+  * Used on special highlights, success states, value indicators
+* **Subtle Card Elevation**: `shadow-[0_0_50px_-10px_rgba(247,147,26,0.1)]`
+
+  * Used on product mockups, major sections
+* **Glass Morphism**:
+
+  * Formula: `backdrop-blur-lg` + `bg-white/5` or `bg-black/40`
+  * Creates floating, translucent panels that reveal background blur
+  * Used on floating cards (hero), testimonials, "How It Works" cards
+* **Radial Blur Backgrounds**: Large, soft radial gradients with heavy blur for ambient background glow
+
+  * Example: `bg-[#F7931A] opacity-10 blur-[120px]` positioned absolutely
+
+## Textures & Patterns
+
+Backgrounds breathe with subtle, non-distracting patterns that reinforce the blockchain/network theme.
+
+* **Grid Pattern** (Signature):
+
+  ```css
+  background-size: 50px 50px;
+  background-image:
+    linear-gradient(to right, rgba(30, 41, 59, 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
+  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
+  ```
+
+  * Creates a fading grid that disappears toward edges (vignette effect)
+  * Used on hero section
+* **External Texture Overlays**:
+
+  * Example: `bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5`
+  * Very subtle, barely visible patterns for visual interest
+* **Radial Gradient Blurs**: Massive, soft color blobs for ambient lighting
+
+  * Position absolutely, use low opacity (5-10%), apply blur-[120px] or blur-[150px]
+  * Creates depth and guides eye to focal points
+
+# Component Stylings
+
+## Buttons
+
+Buttons are bold, pill-shaped, and emit colored light. All use `rounded-full` for the signature crypto pill shape.
+
+* **Primary (Default)**:
+
+  * Background: `bg-gradient-to-r from-[#EA580C] to-[#F7931A]`
+  * Text: White, bold, uppercase with `tracking-wider`
+  * Shadow: `shadow-[0_0_20px_-5px_rgba(234,88,12,0.5)]`
+  * Hover: `scale-105` + intensified shadow `shadow-[0_0_30px_-5px_rgba(247,147,26,0.6)]`
+  * Min height: 44px (touch-friendly)
+* **Outline**:
+
+  * Background: Transparent
+  * Border: `border-2 border-white/20`
+  * Text: White
+  * Hover: `border-white` + `bg-white/10`
+* **Ghost**:
+
+  * Background: Transparent, no border
+  * Text: White
+  * Hover: `bg-white/10` + `text-[#F7931A]`
+* **Link**:
+
+  * Text: `text-[#F7931A]`
+  * Hover: Underline
+
+All buttons include smooth `transition-all` for responsive micro-interactions.
+
+## Cards (The "Block" Concept)
+
+Cards are elevated surfaces that float above the void, representing blocks in the chain.
+
+* **Standard Card**:
+
+  * Background: `bg-[#0F1115]` (Dark Matter surface)
+  * Border: `border border-white/10` (subtle boundary)
+  * Radius: `rounded-2xl` (16px)
+  * Padding: `p-8` (generous spacing)
+  * Hover: `hover:-translate-y-1` (lift) + `hover:border-[#F7931A]/50` + `hover:shadow-[0_0_30px_-10px_rgba(247,147,26,0.2)]`
+  * Transition: `transition-all duration-300`
+* **Glass Cards** (Floating/Special):
+
+  * Background: `bg-black/40` or `bg-white/5`
+  * Backdrop: `backdrop-blur-sm` or `backdrop-blur-lg`
+  * Border: `border border-white/10`
+  * Creates translucent, floating effect
+* **Pricing Cards**:
+
+  * Highlighted tier: `scale-105`, `border-[#F7931A]`, elevated z-index, `shadow-[0_0_40px_-10px_rgba(247,147,26,0.15)]`
+  * Others: Lower opacity (`opacity-80`), scale up on hover
+* **Card Hierarchy**:
+
+  * Header: `p-8 pb-4`
+  * Title: `font-heading font-semibold text-2xl`
+  * Description: `text-[#94A3B8] text-sm`
+  * Content: `p-8 pt-0`
+  * Footer: `p-8 pt-0`
+
+## Inputs
+
+Minimalist, precise input fields with bottom-border styling for a technical aesthetic.
+
+* **Background**: `bg-black/50` (semi-transparent dark)
+* **Border**: Bottom border only - `border-b-2 border-white/20`
+* **Height**: `h-12` (48px for touch targets)
+* **Padding**: `px-4 py-2`
+* **Text**: `text-white text-sm`
+* **Placeholder**: `placeholder:text-white/30`
+* **Focus State**:
+  * Border: `focus-visible:border-[#F7931A]`
+  * Glow: `focus-visible:shadow-[0_10px_20px_-10px_rgba(247,147,26,0.3)]`
+  * No outline: `focus-visible:outline-none`
+* **Disabled**: `disabled:opacity-50 disabled:cursor-not-allowed`
+
+Inputs feel like data entry terminals—clean, precise, and purposeful.
+
+## Icons
+
+Icons from `lucide-react` reinforce the technical, precise aesthetic.
+
+* **Stroke Width**: Default (1.5-2px for clean, technical lines)
+* **Colors**: Use accent colors to create hierarchy
+
+  * Orange: `text-[#F7931A]` or `text-[#EA580C]`
+  * Gold: `text-[#FFD600]`
+  * Muted: `text-[#94A3B8]`
+  * White: `text-white`
+* **Icon Containers**: Wrap in colored, glowing containers
+
+  * Example: `bg-[#EA580C]/20 border border-[#EA580C]/50 rounded-lg p-3`
+  * Creates a "holographic node" effect
+  * Hover: Add glow shadow `hover:shadow-[0_0_20px_rgba(234,88,12,0.4)]`
+* **Decorative Icons**: Large, watermark-style icons in card backgrounds
+
+  * High opacity on hover for subtle reveal effect
+  * Example: `opacity-20 group-hover:opacity-100`
+
+# Non-Generic "Bold" Choices
+
+This design MUST NOT look like default Tailwind. These bold choices create unmistakable personality:
+
+1. **Gradient Text on Headlines**: Apply `bg-gradient-to-r from-[#F7931A] to-[#FFD600] bg-clip-text text-transparent` to final 1-2 words of hero headlines. Creates instant visual hierarchy and Bitcoin brand association.
+2. **Spinning Orbital Rings**: Hero section features animated 3D-style orb with CSS rotating rings (`animate-[spin_10s_linear_infinite]` and reverse). Floating stat cards bounce around it with staggered delays.
+3. **Corner Border Accents**: "How It Works" cards use decorative corner borders (`border-t border-l` on top-left, `border-r border-b` on bottom-right) in Bitcoin orange, creating a "selected node" effect.
+4. **Glowing Animated Badges**: Pulsing dot badges (`animate-ping`) on trust indicators and status markers. Suggests live network activity.
+5. **Background Icon Watermarks**: Large, rotated, low-opacity icons in feature card backgrounds that reveal on hover (`opacity-20 group-hover:opacity-100`).
+6. **Timeline as Blockchain**: "How It Works" uses a vertical gradient line (orange to transparent) with numbered circular nodes, mimicking a blockchain ledger.
+7. **Asymmetric Pricing Scale**: The popular pricing tier is `scale-105` and elevated, while others are `opacity-80`, creating intentional hierarchy through scale manipulation.
+8. **Glass Morphism with Grid Patterns**: Combine `backdrop-blur` with background grid patterns visible through transparency, creating layered depth.
+9. **Colored Shadows Replace Black**: ALL shadows use orange/gold tints. No pure black shadows exist in this design system.
+
+# Layout & Spacing
+
+* **Container Width**: `max-w-7xl` (1280px) - Wide and expansive to showcase data and content without cramping
+* **Section Padding**: Generous vertical `py-24` (96px) creates breathing room between major sections
+* **Density**: Spacious approach with `gap-8` (32px) or `gap-12` (48px) between grid items
+* **Section Dividers**: NO hard lines or `<hr>` elements. Sections separate through:
+
+  * Vertical spacing (`py-24`)
+  * Alternating backgrounds (`bg-[#030304]` → `bg-[#0F1115]` → `bg-[#030304]`)
+  * Subtle top/bottom borders on specific sections (e.g., stats ticker has `border-y`)
+* **Responsive Grids**:
+
+  * Mobile-first: Single column by default
+  * Tablet: `md:grid-cols-2` or `md:grid-cols-3`
+  * Desktop: Keep `md:grid-cols-3` or `lg:grid-cols-4` for features
+  * Pricing: Always `md:grid-cols-3` for tier comparison
+
+# Animation & Motion
+
+Motion should feel **precise, snappy, and purposeful**—like a high-performance trading terminal.
+
+* **Custom Float Animation**:
+
+  ```css
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+  .animate-float {
+    animation: float 8s ease-in-out infinite;
+  }
+  ```
+
+  * Applied to hero 3D orb graphic
+  * Slow, smooth, endless float creates ethereal quality
+* **Spinning Orbitals**:
+
+  * `animate-[spin_10s_linear_infinite]` for outer ring
+  * `animate-[spin_15s_linear_infinite_reverse]` for inner ring (reverse direction)
+  * Creates mesmerizing 3D depth illusion
+* **Bouncing Cards**: Floating stat cards use `animate-bounce` with custom durations (`3s`, `4s`) and delays (`delay-1s`) for staggered motion
+* **Pulsing Indicators**: Status badges use `animate-ping` for "live" feel
+* **Interaction Speed**: Fast and responsive (`duration-200` or `duration-300`)
+
+  * Button hover: `transition-all duration-300`
+  * Card lift: `transition-all duration-300`
+  * Input focus: Instant (`duration-200`)
+* **Hover Effects**:
+
+  * Cards: Lift (`-translate-y-1`), border color shift, glow intensification
+  * Buttons: Scale (`scale-105`), glow spread
+  * Images: Scale (`scale-110`), contrast boost (`contrast-125`)
+
+The motion design communicates **speed, precision, and responsiveness**—critical values in crypto/finance.
+
+# Responsive Strategy
+
+The design must maintain its bold personality across all screen sizes while adapting gracefully.
+
+* **Mobile-First Philosophy**: Start with single-column layouts, scale up for larger screens
+* **Breakpoints**:
+
+  * `sm`: 640px - Minor adjustments
+  * `md`: 768px - Major layout shifts (2-3 columns activate)
+  * `lg`: 1024px - Full desktop experience
+  * `xl`: 1280px - Maximum width container (`max-w-7xl`)
+* **Typography Scaling**: All headings use responsive classes
+
+  * Hero: `text-4xl sm:text-5xl md:text-7xl`
+  * Section Titles: `text-2xl md:text-4xl` or `md:text-5xl`
+  * Body: `text-base md:text-lg`
+  * Keep mobile readable, don't overwhelm small screens
+* **Touch Targets**: All interactive elements minimum 44px (`min-w-[44px]`, `h-10+`)
+* **Mobile Adaptations**:
+
+  * Navigation: Show only essential CTA on mobile, hide secondary nav
+  * Hero 3D graphic: Smaller size on mobile (`h-[300px] md:h-[450px]`)
+  * Grids: Single column → 2-3 columns at `md`
+  * Pricing cards: Stack vertically, remove scale effect on mobile
+  * How It Works timeline: Left-aligned on mobile with simpler layout
+* **Maintain Core Aesthetic**: Grid patterns, glows, and gradients persist on mobile—don't strip personality for smaller screens
+
+# Accessibility & Best Practices
+
+* **Color Contrast**: White text on `#030304` exceeds WCAG AAA (21:1 ratio). Orange `#F7931A` on dark backgrounds meets AA for large text.
+* **Focus States**: All interactive elements have visible focus rings using `focus-visible:ring-2 focus-visible:ring-[#F7931A]`
+* **Semantic HTML**: Proper heading hierarchy (h1 → h2 → h3), `<nav>`, `<section>`, `<button>` elements
+* **Alt Text**: All images require descriptive alt attributes
+* **Keyboard Navigation**: All interactive elements accessible via Tab, buttons activate on Enter/Space
+* **Motion Preferences**: Consider `prefers-reduced-motion` for users sensitive to animation (disable float/spin animations)
+
+# Implementation Notes
+
+* **Font Loading**: Use `fontImport()` helper to load Google Fonts
+* **Custom Classes**: Define `.font-heading`, `.font-body`, `.font-mono` in style block
+* **Grid Pattern**: Define `.bg-grid-pattern` with CSS-in-JS in style block
+* **Glass Morphism**: Define `.holographic-gradient` helper class
+* **Components**: Build Button, Card, and Input components using `cva` (class-variance-authority) following Shadcn patterns but with Crypto-specific styling
+* **Icons**: Import specific icons from `lucide-react` as needed (Zap, Lock, Layers, Globe, Check, etc.)
+
+This is not a generic dark theme. This is the **Bitcoin DeFi aesthetic**—engineered for precision, security, and digital value.
+`</design-system>`