Hub
FUSION // KINETIC x BRUTAL FUN MEETS RAW
<DIV.HERO>

RAW
POP
ENERGY.

LOUD PROUD
<DIV.SIDE>
BREAK
THE
GRID
NO RULES // JUST IMPACT // LOUD & PROUD // BROKEN GRID // RAW ENERGY // PUNK STRUCTURE // POP CHAOS // NO RULES // JUST IMPACT // LOUD & PROUD // BROKEN GRID // RAW ENERGY // PUNK STRUCTURE // POP CHAOS // 
<DIV.MANIFEST>

MANIFEST

01BORDERS ARE 5PX MINIMUM. NO EXCEPTIONS. THICK IS THE LAW.
02TYPOGRAPHY SCREAMS. IF IT DOESN'T FILL THE SCREEN, IT'S TOO SMALL.
03POP COLORS ONLY. YELLOW, RED, BLUE. RAW PRIMARY ENERGY.
04STRUCTURE IS EXPOSED. GRIDS ARE VISIBLE. NOTHING IS HIDDEN.
05MOTION IS COMIC ENERGY. BOUNCE, ROTATE, SLAM. NEVER SUBTLE.
<DIV.SHAPES>
<DIV.OVERLAP>
STRUCTURE
CHAOS
FUSION
<DIV.PALETTE>
#FFFF00
#FF0000
#0000FF
#000000

AI REQUEST PROMPT

Design a landing page in Kinetic Brutal fusion style — combining Kinetic Pop bold rhythms with Brutalist Grid raw structural power.

COLOR TOKENS:
--bg: #fff
--text: #000
--accent-yellow: #FFFF00
--accent-blue: #0000FF
--accent-red: #FF0000
--card-bg: #fff
--card-hover-1: #FFFF00 (yellow)
--card-hover-2: #0000FF (blue, white text)
--prompt-bg: #eee
--pre-bg: #000
--pre-text: #0f0
No other colors.

TYPOGRAPHY:
- Headings: 'Space Grotesk', sans-serif — font-weight: 700 | 900
- Mono elements: 'JetBrains Mono', monospace — font-weight: 800
- Hero h1: clamp(4rem, 8vw, 7rem), line-height: 0.9, letter-spacing: -0.05em, text-shadow: 4px 4px 0 var(--accent-blue)
- ALL text: text-transform: uppercase — no exceptions
- Marquee text: 'JetBrains Mono', font-size: 1.5rem

UI:
- Every container and button: border: 4px solid #000 — no thinner borders allowed
- Cards: background: #fff, box-shadow: 12px 12px 0 #000, padding: 40px
- Header bar: background: var(--accent-yellow), border: 4px solid #000, box-shadow: 8px 8px 0 #000
- Buttons: background: #000, color: #fff, font-size: 1.5rem, font-weight: 900, box-shadow: 8px 8px 0 var(--accent-blue)
- Prompt section: background: #eee, box-shadow: 15px 15px 0 var(--accent-red)

LAYOUT:
- Wrapper: max-width: 1200px, margin: 0 auto, padding: 40px 20px
- Card grid: display: grid, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)), gap: 20px
- Marquee: full viewport width (100vw), transform: rotate(-2deg), overflow: hidden, white-space: nowrap

MOTION:
- Card hover: transform: translate(-5px, -5px), box-shadow expands to 17px 17px 0 #000, transition: all 0.2s
- Button hover: transform: translate(4px, 4px), box-shadow shrinks to 4px 4px 0, transition: 0.15s
- Marquee scroll: animation: scroll 15s linear infinite, translateX(0) to translateX(-50%)

RESPONSIVE:
- Desktop (>768px): max-width 1200px, multi-column auto-fit grid, full marquee speed 15s, shadow offsets 12px
- Mobile (<=768px): single-column stack, marquee animation 25s, shadow offsets halved to 6px 6px 0 #000

FORBIDDEN:
- border-radius on any element — strictly 0, all shapes square/rectangular
- Pastel, muted, or gradient colors — pure flat black/white + primary RGB only
- Subtle or soft hover effects — all interactions must be abrupt and high-contrast
- Thin borders below 4px — brutalist weight is mandatory
- Lowercase text — uppercase is the only option

OUTPUT:
1) Hard shadow + translate hover system CSS
2) Marquee ticker animation + full-width layout
3) Full HTML/CSS with responsive breakpoints