3D Isometric Tech Landing

Create a 3D/isometric tech landing page with depth, perspective, and layered visual effects. The design should feel like you're looking at a 3D scene.

Design Requirements

3D Transforms: Use CSS perspective (1000px) and rotateX/rotateY to create isometric card views

Depth Layers: Multiple z-index layers with parallax-like scroll effects

Background: Dark (#0f172a) with subtle dot grid pattern

Color: Primary accent (#6366f1), with lighter/darker variations for depth shading

Cards: Isometric tilt (12deg) with visible side faces showing depth

Sections to Include

Hero — Large 3D-tilted product mockup floating with shadow beneath, isometric text

Features — 3 isometric cards that tilt on hover (CSS perspective + transform), each showing different depth

How It Works — Stacked layers animation — layers fan out on scroll to show architecture

Integrations — Floating 3D cubes/blocks arranged in isometric grid

Pricing — Cards with 3D flip effect on hover (front: summary, back: details)

CTA — Elevated platform effect — the CTA section appears to float above the page

Technical Details

CSS perspective on parent, transform: rotateX() rotateY() on children

transform-style: preserve-3d for nested 3D effects

Shadow beneath floating elements to enhance 3D illusion

Scroll-triggered animations using Intersection Observer

Responsive: reduce 3D effects on mobile for performance