.elementor-1431 .elementor-element.elementor-element-ce3015a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1431 .elementor-element.elementor-element-ce3015a:not(.elementor-motion-effects-element-type-background), .elementor-1431 .elementor-element.elementor-element-ce3015a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000029;}.elementor-1431 .elementor-element.elementor-element-8e14446{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1431 .elementor-element.elementor-element-8e14446:not(.elementor-motion-effects-element-type-background), .elementor-1431 .elementor-element.elementor-element-8e14446 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#4A00FF00;}body.elementor-page-1431:not(.elementor-motion-effects-element-type-background), body.elementor-page-1431 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}/* Start custom CSS for container, class: .elementor-element-8e14446 */<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MMZ | Professional Design Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- Fonts: Outfit (main) and Space Grotesk (display) -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Space+Grotesk:wght{100..900}&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Outfit', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            dark: '#050508',
                            card: '#0A0A12',
                            primary: '#4F46E5', // Indigo
                            secondary: '#9333EA', // Purple
                            accent: '#22D3EE', // Cyan
                            pink: '#F472B6'
                        }
                    },
                    backgroundImage: {
                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                        'hero-mesh': 'radial-gradient(at 40% 20%, rgba(79, 70, 229, 0.15) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(147, 51, 234, 0.15) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(34, 211, 238, 0.1) 0px, transparent 50%)',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'float-delayed': 'float 6s ease-in-out 3s infinite',
                        'spin-slow': 'spin 12s linear infinite',
                        'shine': 'shine 3s linear infinite', 
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        shine: {
                            '0%': { 'background-position': '200% 0' },
                            '100%': { 'background-position': '-200% 0' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            font-family: 'Outfit', sans-serif;
            background-color: #050508;
            color: #E2E8F0;
            cursor: none;
        }

        /* Custom Cursor */
        .cursor-dot,
        .cursor-outline {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
            mix-blend-mode: difference;
        }

        .cursor-dot {
            width: 8px;
            height: 8px;
            background-color: #22D3EE;
        }

        .cursor-outline {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(34, 211, 238, 0.8);
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        a:hover ~ .cursor-outline, button:hover ~ .cursor-outline, .group:hover ~ .cursor-outline {
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 0.8;
            border-color: #fff;
        }


        /* Spotlight Effect */
        .spotlight {
            background: radial-gradient(
                600px circle at var(--mouse-x) var(--mouse-y),
                rgba(79, 70, 229, 0.15),
                transparent 40%
            );
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Text Gradient */
        .text-gradient {
            background: linear-gradient(135deg, #22D3EE 0%, #818CF8 50%, #C084FC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Marquee Animation */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
        }
        .marquee-content {
            display: inline-block;
            animation: marquee 20s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Grid Pattern */
        .bg-grid-pattern {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

        .stroke-text {
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
        }

        /* Intersection Observer styles for initial hidden state (Scroll Reveal) */
        .anim-item {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth ease-out */
        }
        .anim-item.animated {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- TILT CARD STYLES --- */
        .tilt-card {
            transition: transform 0.3s ease-out;
            transform-style: preserve-3d;
            will-change: transform;
            perspective: 1000px; 
        }

        /* Hero Element Transition Override for Parallax */
        #hero-center-card {
            transition: none !important; 
        }
    </style>
</head>
<body class="antialiased overflow-x-hidden">

    <!-- Custom Cursor Elements -->
    <div class="cursor-dot hidden md:block"></div>
    <div class="cursor-outline hidden md:block"></div>
    
    <!-- Spotlight Background -->
    <div class="spotlight" id="spotlight"></div>

    <!-- Hero Section with Advanced Animations (Starts higher since header is removed) -->
    <section class="relative min-h-screen flex items-center pt-20 pb-20 overflow-hidden">
        <div class="absolute inset-0 bg-grid-pattern z-[-2]"></div>
        
        <!-- Animated Abstract Shapes (Parallax Layer 3) -->
        <div data-parallax-speed="-20" class="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-primary/30 rounded-full mix-blend-screen filter blur-[100px] animate-float z-[-1] opacity-70"></div>
        <div data-parallax-speed="10" class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-secondary/20 rounded-full mix-blend-screen filter blur-[100px] animate-float-delayed z-[-1] opacity-70"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            
            <div class="relative z-10">
                <div class="inline-block px-4 py-2 rounded-full border border-brand-accent/30 bg-brand-accent/10 backdrop-blur-md mb-8 anim-item animate-float">
                    <!-- Updated text here: -->
                    <span class="text-brand-accent text-sm font-bold tracking-widest uppercase">MMZ | PROFESSIONAL DESIGN STUDIO</span>
                </div>
                
                <h1 class="text-6xl md:text-8xl font-display font-bold leading-[0.9] mb-8 anim-item" style="transition-delay: 0.1s;">
                    We Craft <br />
                    <span class="text-gradient relative">
                        Reality
                        <!-- Highlight SVG -->
                        <svg class="absolute w-full h-3 -bottom-1 left-0 text-brand-secondary" viewBox="0 0 100 10" preserveAspectRatio="none">
                            <path d="M0 5 Q 50 10 100 5" stroke="currentColor" stroke-width="2" fill="none" />
                        </svg>
                    </span>
                </h1>
                
                <p class="text-xl text-gray-400 mb-10 max-w-lg leading-relaxed anim-item" style="transition-delay: 0.2s;">
                    Transforming abstract ideas into pixel-perfect digital experiences for Website, App, Brand Visuals, and Advertising. We engineer visual dominance.
                </p>
                
                <div class="flex flex-wrap gap-6 anim-item" style="transition-delay: 0.3s;">
                    <!-- Call to Action Button 1 -->
                    <button class="group relative px-8 py-4 bg-brand-primary text-white font-bold rounded-lg overflow-hidden transition-all hover:scale-105 shadow-lg shadow-brand-primary/20">
                        <div class="absolute inset-0 w-full h-full bg-gradient-to-r from-brand-secondary to-brand-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <span class="relative flex items-center gap-2">
                            Start a Project <i data-lucide="send" class="w-5 h-5"></i>
                        </span>
                    </button>
                    <!-- Call to Action Button 2 -->
                    <button onclick="window.location.href='#services'" class="px-8 py-4 border border-white/20 rounded-lg hover:bg-white/5 transition-all font-medium flex items-center gap-2">
                        View Deep Dive
                    </button>
                </div>
            </div>

            <!-- Interactive 3D Hero Element with Parallax (Layer 2) -->
            <div class="relative h-[500px] w-full perspective-1000 hidden lg:block" id="hero-visual">
                <div data-parallax-speed="50" class="absolute inset-0 flex items-center justify-center" id="hero-parallax-group">
                    <!-- Spinning Rings -->
                    <div data-parallax-speed="50" class="relative w-80 h-80 border-2 border-brand-accent/30 rounded-full animate-spin-slow">
                        <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-brand-accent rounded-full shadow-[0_0_20px_#22D3EE]"></div>
                    </div>
                    <div data-parallax-speed="40" class="absolute w-60 h-60 border border-brand-secondary/40 rounded-full animate-spin-slow" style="animation-direction: reverse; animation-duration: 15s;"></div>
                    
                    <!-- Center Card (Parallax Layer 1 - closest to user) -->
                    <div id="hero-center-card" data-parallax-speed="70" class="glass p-6 rounded-2xl absolute transform rotate-6 hover:rotate-0 transition-all duration-500 hover:scale-110 shadow-2xl shadow-brand-primary/20 border-t border-l border-white/20 w-64">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        </div>
                        <div class="space-y-3">
                            <div class="h-2 bg-white/20 rounded w-3/4"></div>
                            <div class="h-20 bg-gradient-to-br from-brand-primary to-brand-secondary rounded-lg"></div>
                            <div class="flex gap-2">
                                <div class="h-2 bg-white/20 rounded w-1/2"></div>
                                <div class="h-2 bg-white/10 rounded w-1/4"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Floating Elements (Parallax Layer 1) -->
                    <div data-parallax-speed="80" class="absolute top-20 right-20 glass p-3 rounded-xl animate-float">
                        <i data-lucide="figma" class="w-8 h-8 text-pink-500"></i>
                    </div>
                    <div data-parallax-speed="60" class="absolute bottom-20 left-20 glass p-3 rounded-xl animate-float-delayed">
                        <i data-lucide="image" class="w-8 h-8 text-brand-accent"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Infinite Marquee -->
    <div class="py-10 border-y border-white/5 bg-black/50 backdrop-blur-sm relative z-20">
        <div class="marquee-container">
            <div class="marquee-content">
                <span class="text-4xl font-display font-bold text-transparent stroke-text px-8 opacity-50">UI/UX DESIGN</span>
                <span class="text-4xl font-display font-bold text-white px-8">BRAND IDENTITY</span>
                <span class="text-4xl font-display font-bold text-transparent stroke-text px-8 opacity-50">MOTION GRAPHICS</span>
                <span class="text-4xl font-display font-bold text-white px-8">SOCIAL MEDIA</span>
                <span class="text-4xl font-display font-bold text-transparent stroke-text px-8 opacity-50">3D VISUALS</span>
                <span class="text-4xl font-display font-bold text-white px-8">PACKAGING</span>
                <!-- Duplicate for seamless loop -->
                <span class="text-4xl font-display font-bold text-transparent stroke-text px-8 opacity-50">UI/UX DESIGN</span>
                <span class="text-4xl font-display font-bold text-white px-8">BRAND IDENTITY</span>
                <span class="text-4xl font-display font-bold text-transparent stroke-text px-8 opacity-50">MOTION GRAPHICS</span>
                <span class="text-4xl font-display font-bold text-white px-8">SOCIAL MEDIA</span>
            </div>
        </div>
    </div>

    <!-- Services Grid (Tilt Effect + Scroll Reveal) -->
    <section id="services" class="py-32 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-20">
                <h2 class="text-5xl font-display font-bold mb-6 anim-item">Our Core Capabilities: Brand, Web, App & Advertising</h2>
                <div class="h-1 w-20 bg-brand-accent anim-item" style="transition-delay: 0.2s;"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="services-grid">
                
                <!-- Card 1: Branding -->
                <div class="anim-item" data-delay="0.1">
                    <div class="tilt-card glass p-1 rounded-3xl group cursor-pointer hover:shadow-2xl hover:shadow-brand-secondary/30">
                        <div class="bg-brand-card h-full rounded-[22px] p-8 relative overflow-hidden">
                            <div class="absolute top-0 right-0 p-8 opacity-20 group-hover:opacity-100 transition-opacity duration-500 transform translate-x-10 group-hover:translate-x-0">
                                <i data-lucide="palette" class="w-24 h-24 text-brand-secondary"></i>
                            </div>
                            <div class="tilt-content relative z-10">
                                <div class="w-12 h-12 bg-brand-secondary/20 rounded-full flex items-center justify-center mb-6 text-brand-secondary">
                                    <i data-lucide="layers" class="w-6 h-6"></i>
                                </div>
                                <h3 class="text-2xl font-bold mb-4 group-hover:text-brand-secondary transition-colors">Brand Identity & Visuals</h3>
                                <p class="text-gray-400 text-sm leading-relaxed mb-6">
                                    The foundational visual language of your business. Logos, typography, and color systems for lasting impact.
                                </p>
                                <ul class="space-y-2">
                                    <li class="flex items-center gap-2 text-xs text-gray-500"><div class="w-1 h-1 bg-brand-secondary rounded-full"></div> Core Logo Package</li>
                                    <li class="flex items-center gap-2 text-xs text-gray-500"><div class="w-1 h-1 bg-brand-secondary rounded-full"></div> Detailed Brand Guidelines</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card 2: Web / App -->
                <div class="anim-item" data-delay="0.2">
                    <div class="tilt-card glass p-1 rounded-3xl group cursor-pointer hover:shadow-2xl hover:shadow-brand-primary/30">
                        <div class="bg-brand-card h-full rounded-[22px] p-8 relative overflow-hidden">
                            <div class="absolute top-0 right-0 p-8 opacity-20 group-hover:opacity-100 transition-opacity duration-500 transform translate-x-10 group-hover:translate-x-0">
                                <i data-lucide="monitor" class="w-24 h-24 text-brand-primary"></i>
                            </div>
                            <div class="tilt-content relative z-10">
                                <div class="w-12 h-12 bg-brand-primary/20 rounded-full flex items-center justify-center mb-6 text-brand-primary">
                                    <i data-lucide="layout" class="w-6 h-6"></i>
                                </div>
                                <h3 class="text-2xl font-bold mb-4 group-hover:text-brand-primary transition-colors">Website & App UI/UX</h3>
                                <p class="text-gray-400 text-sm leading-relaxed mb-6">
                                    Designing high-conversion landing pages, intuitive e-commerce sites, and seamless mobile application interfaces.
                                </p>
                                <ul class="space-y-2">
                                    <li class="flex items-center gap-2 text-xs text-gray-500"><div class="w-1 h-1 bg-brand-primary rounded-full"></div> Custom Web Design (Figma/Sketch)</li>
                                    <li class="flex items-center gap-2 text-xs text-gray-500"><div class="w-1 h-1 bg-brand-primary rounded-full"></div> Mobile App Prototyping</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card 3: Social & Advertising -->
                <div class="anim-item" data-delay="0.3">
                    <div class="tilt-card glass p-1 rounded-3xl group cursor-pointer hover:shadow-2xl hover:shadow-pink-500/30">
                        <div class="bg-brand-card h-full rounded-[22px] p-8 relative overflow-hidden">
                            <div class="absolute top-0 right-0 p-8 opacity: 20 group-hover:opacity-100 transition-opacity duration-500 transform translate-x-10 group-hover:translate-x-0">
                                <i data-lucide="instagram" class="w-24 h-24 text-pink-500"></i>
                            </div>
                            <div class="tilt-content relative z-10">
                                <div class="w-12 h-12 bg-pink-500/20 rounded-full flex items-center justify-center mb-6 text-pink-500">
                                    <i data-lucide="zap" class="w-6 h-6"></i>
                                </div>
                                <h3 class="text-2xl font-bold mb-4 group-hover:text-pink-500 transition-colors">Advertising & Social Creatives</h3>
                                <p class="text-gray-400 text-sm leading-relaxed mb-6">
                                    Scroll-stopping visuals for paid campaigns (Google, Facebook) and organic social media content (Reels, Carousels).
                                </p>
                                <ul class="space-y-2">
                                    <li class="flex items-center gap-2 text-xs text-gray-500"><div class="w-1 h-1 bg-pink-500 rounded-full"></div> Performance Ad Creatives</li>
                                    <li class="flex items-center gap-2 text-xs text-gray-500"><div class="w-1 h-1 bg-pink-500 rounded-full"></div> Motion Graphics for Video Ads</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Design Process Section -->
    <section id="process" class="py-24 relative bg-black/50 border-t border-white/5">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-20 text-center">
                <span class="text-brand-primary font-mono text-sm mb-2 block anim-item">OUR METHODOLOGY</span>
                <h2 class="text-5xl font-display font-bold anim-item" style="transition-delay: 0.1s;">The Elevate Design Flow</h2>
                <p class="text-gray-400 mt-4 max-w-2xl mx-auto anim-item" style="transition-delay: 0.2s;">
                    We follow a focused, iterative process to ensure every project delivers maximum visual and strategic impact.
                </p>
            </div>

            <!-- Process Steps Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
                <!-- Vertical Divider Line (Desktop only) -->
                <div class="hidden lg:block absolute left-1/2 transform -translate-x-1/2 top-20 bottom-20 border-l border-dashed border-brand-accent/30"></div>

                <!-- Step 1: Discover -->
                <div class="anim-item text-center relative z-10" data-delay="0.3">
                    <div class="w-20 h-20 mx-auto rounded-full glass flex items-center justify-center mb-6 border-brand-primary border-4 text-brand-primary shadow-xl shadow-brand-primary/20">
                        <i data-lucide="search" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">1. Discovery & Strategy</h3>
                    <p class="text-gray-500 text-sm">Deep dive into your market, audience, and goals. Define project scope and visual direction.</p>
                </div>

                <!-- Step 2: Ideate -->
                <div class="anim-item text-center relative z-10" data-delay="0.4">
                    <div class="w-20 h-20 mx-auto rounded-full glass flex items-center justify-center mb-6 border-brand-secondary border-4 text-brand-secondary shadow-xl shadow-brand-secondary/20">
                        <i data-lucide="lightbulb" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">2. Ideation & Concept</h3>
                    <p class="text-gray-500 text-sm">Sketching, wireframing, and mood-boarding to generate initial concepts and user flows.</p>
                </div>

                <!-- Step 3: Design -->
                <div class="anim-item text-center relative z-10" data-delay="0.5">
                    <div class="w-20 h-20 mx-auto rounded-full glass flex items-center justify-center mb-6 border-brand-accent border-4 text-brand-accent shadow-xl shadow-brand-accent/20">
                        <i data-lucide="figma" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">3. High-Fidelity Design</h3>
                    <p class="text-gray-500 text-sm">Pixel-perfect execution in Figma/Sketch, prototyping, iteration, and visual refinement.</p>
                </div>

                <!-- Step 4: Deliver -->
                <div class="anim-item text-center relative z-10" data-delay="0.6">
                    <div class="w-20 h-20 mx-auto rounded-full glass flex items-center justify-center mb-6 border-green-500 border-4 text-green-500 shadow-xl shadow-green-500/20">
                        <i data-lucide="send" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">4. Final Delivery & Handoff</h3>
                    <p class="text-gray-500 text-sm">Organized asset delivery, documentation, and support for developer implementation.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Design Fundamentals Section (Expanded "Raws" of Info) -->
    <section id="fundamentals" class="py-32 relative bg-brand-card/50 border-y border-white/5">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Introduction -->
            <div class="mb-20 text-center">
                <span class="text-brand-accent font-mono text-sm mb-2 block anim-item">THE EXPANDED IMPACT</span>
                <h2 class="text-5xl font-display font-bold anim-item" style="transition-delay: 0.1s;">The Deep Dive: Design Psychology & Modern Visuals</h2>
                <p class="text-gray-400 mt-4 max-w-3xl mx-auto anim-item" style="transition-delay: 0.2s;">
                    We leverage foundational principles and cutting-edge techniques to ensure visuals are not only beautiful but cognitively efficient and dynamic.
                </p>
            </div>

            <!-- Grid of Fundamentals -->
            <div class="space-y-20">

                <!-- 1. Typography (Existing Raw) -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="anim-item" data-delay="0.3">
                        <span class="text-brand-primary font-mono text-sm mb-2 block">01 / TYPOGRAPHY</span>
                        <h3 class="text-3xl font-display font-bold mb-4">How Fonts Shape Perception and Hierarchy</h3>
                        <p class="text-gray-400 mb-6">
                            The choice of typeface dictates the mood—is your brand serious (Serif), modern (Sans-Serif), or playful (Display)? More critically, font size, weight, and line height establish the *visual hierarchy*, guiding the user's eye instantly to the most important information. 
                        </p>
                        <ul class="space-y-2">
                            <li class="flex items-start gap-3"><i data-lucide="eye" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Readability: Ensuring type is effortless to consume across all devices.</li>
                            <li class="flex items-start gap-3"><i data-lucide="layout-grid" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Grid Systems: Aligning text to a foundational rhythm for consistency.</li>
                            <li class="flex items-start gap-3"><i data-lucide="zap" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Brand Voice: Matching the font personality to the company's ethos.</li>
                        </ul>
                    </div>

                    <div class="anim-item glass p-8 rounded-3xl shadow-xl border border-white/10" data-delay="0.4">
                        <p class="text-xs font-mono uppercase text-gray-500 mb-4">Visual System: Type Scale Example</p>
                        <h1 class="text-4xl font-display font-bold mb-2">H1. The Primary Display Title (Space Grotesk)</h1>
                        <h3 class="text-xl font-sans font-bold mb-2 text-brand-primary">H3. Supporting Section Header (Outfit Bold)</h3>
                        <p class="text-base text-gray-300">P. Body copy is clean, accessible, and sets a professional tone. This is the bulk of the content users will read. We optimize for high contrast and comfortable line length.</p>
                    </div>
                </div>
                
                <div class="h-px bg-white/5 mx-auto max-w-5xl"></div>

                <!-- 2. Color Theory (Existing Raw) -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="anim-item glass p-8 rounded-3xl shadow-xl border border-white/10 order-2 lg:order-1" data-delay="0.6">
                        <p class="text-xs font-mono uppercase text-gray-500 mb-4">Visual System: Brand Color Palette</p>
                        <div class="grid grid-cols-3 gap-4">
                            <div class="h-20 rounded-xl bg-brand-primary flex flex-col justify-end p-2 text-xs font-bold">Primary #4F46E5</div>
                            <div class="h-20 rounded-xl bg-brand-secondary flex flex-col justify-end p-2 text-xs font-bold">Secondary #9333EA</div>
                            <div class="h-20 rounded-xl bg-brand-accent flex flex-col justify-end p-2 text-xs font-bold text-brand-dark">Accent #22D3EE</div>
                            <div class="h-20 rounded-xl bg-brand-card flex flex-col justify-end p-2 text-xs font-bold">Surface #0A0A12</div>
                            <div class="h-20 rounded-xl bg-gray-200 text-brand-dark flex flex-col justify-end p-2 text-xs font-bold">Text Light</div>
                            <div class="h-20 rounded-xl bg-gray-700 flex flex-col justify-end p-2 text-xs font-bold">Text Dark</div>
                        </div>
                    </div>

                    <div class="anim-item order-1 lg:order-2" data-delay="0.5">
                        <span class="text-brand-primary font-mono text-sm mb-2 block">02 / COLOR THEORY</span>
                        <h3 class="text-3xl font-display font-bold mb-4">Driving Emotion and Recognition with Color</h3>
                        <p class="text-gray-400 mb-6">
                            Color is the fastest way to communicate brand values. Purple might signal luxury or creativity, while a strong blue implies trust and stability. Our palettes are chosen not for aesthetics alone, but for their psychological impact and functional contrast on a screen. [Image of color wheel and complementary colors]
                        </p>
                        <ul class="space-y-2">
                            <li class="flex items-start gap-3"><i data-lucide="droplet" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Psychology: Using specific hues to influence user behavior (e.g., green for success).</li>
                            <li class="flex items-start gap-3"><i data-lucide="contrast" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Accessibility: Ensuring WCAG standards are met for high contrast ratios.</li>
                            <li class="flex items-start gap-3"><i data-lucide="gem" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Brand Equity: Creating an instantly recognizable color signature.</li>
                        </ul>
                    </div>
                </div>
                
                <div class="h-px bg-white/5 mx-auto max-w-5xl"></div>

                <!-- 3. Composition (Existing Raw) -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="anim-item" data-delay="0.7">
                        <span class="text-brand-primary font-mono text-sm mb-2 block">03 / COMPOSITION</span>
                        <h3 class="text-3xl font-display font-bold mb-4">The Structure That Guides the User's Journey</h3>
                        <p class="text-gray-400 mb-6">
                            Composition is the blueprint—how elements are arranged in space. We use principles like proximity, alignment, and white space to create a clean, predictable flow. Good composition makes an interface feel intuitive, while poor composition leads to user frustration and high bounce rates. 
                        </p>
                        <ul class="space-y-2">
                            <li class="flex items-start gap-3"><i data-lucide="ruler" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Grids: Utilizing 8-point grid systems for consistent spacing.</li>
                            <li class="flex items-start gap-3"><i data-lucide="maximize-2" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> White Space: Using negative space strategically to draw focus to key actions (CTAs).</li>
                            <li class="flex items-start gap-3"><i data-lucide="wand-2" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Flow: Guiding the user through the interface from problem to solution.</li>
                        </ul>
                    </div>

                    <div class="anim-item glass p-8 rounded-3xl shadow-xl border border-white/10 space-y-4" data-delay="0.8">
                        <p class="text-xs font-mono uppercase text-gray-500 mb-4">Visual System: Action Component</p>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <!-- Card Example -->
                            <div class="flex-1 bg-brand-dark rounded-xl p-4 border border-brand-primary/20 hover:border-brand-primary transition-colors">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-full bg-brand-primary/50 flex items-center justify-center text-white">
                                        <i data-lucide="trending-up" class="w-5 h-5"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold">New Leads Generated</p>
                                        <p class="text-2xl font-display font-extrabold text-brand-accent">2,450</p>
                                    </div>
                                </div>
                            </div>
                            <!-- Button Example -->
                            <button class="flex-1 py-3 px-6 rounded-xl bg-brand-accent text-brand-dark font-bold hover:bg-brand-accent/80 transition-all shadow-lg shadow-brand-accent/30 self-center">
                                Primary CTA Button
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-4">Composition organizes complex data into digestible chunks, reducing cognitive load.</p>
                    </div>
                </div>

                <div class="h-px bg-white/5 mx-auto max-w-5xl"></div>

                <!-- 4. NEW RAW: Gestalt Principles -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="anim-item glass p-8 rounded-3xl shadow-xl border border-white/10 order-2 lg:order-1" data-delay="1.0">
                        <p class="text-xs font-mono uppercase text-gray-500 mb-4">Visual System: Gestalt Law of Proximity</p>
                        <!-- Gestalt Proximity Example -->
                        <div class="flex flex-col gap-6">
                            <div class="flex gap-1">
                                <div class="w-5 h-5 rounded-full bg-brand-secondary"></div>
                                <div class="w-5 h-5 rounded-full bg-brand-secondary"></div>
                                <div class="w-5 h-5 rounded-full bg-brand-secondary"></div>
                            </div>
                            <div class="flex gap-4">
                                <div class="w-5 h-5 rounded-full bg-brand-primary"></div>
                                <div class="w-5 h-5 rounded-full bg-brand-primary"></div>
                                <div class="w-5 h-5 rounded-full bg-brand-primary"></div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-500 mt-4">The elements closer together (top row) are perceived as a single group, demonstrating Proximity and Common Region.</p>
                    </div>
                    
                    <div class="anim-item order-1 lg:order-2" data-delay="0.9">
                        <span class="text-brand-primary font-mono text-sm mb-2 block">04 / GESTALT PSYCHOLOGY</span>
                        <h3 class="text-3xl font-display font-bold mb-4">The Science of Visual Grouping and Perception</h3>
                        <p class="text-gray-400 mb-6">
                            Gestalt principles describe how the human brain automatically organizes visual data into a coherent whole. By mastering laws like **Proximity**, **Similarity**, and **Closure**, we engineer interfaces that are instantly digestible, reducing the effort required for users to understand complex layouts. 
                        </p>
                        <ul class="space-y-2">
                            <li class="flex items-start gap-3"><i data-lucide="infinity" class="w-5 h-5 text-pink-500 mt-1 flex-shrink-0"></i> Continuity: Creating flow and direction through strategic alignment.</li>
                            <li class="flex items-start gap-3"><i data-lucide="circle-dot" class="w-5 h-5 text-pink-500 mt-1 flex-shrink-0"></i> Closure: Allowing the brain to fill in gaps, leading to cleaner, more minimalist designs.</li>
                            <li class="flex items-start gap-3"><i data-lucide="layers-3" class="w-5 h-5 text-pink-500 mt-1 flex-shrink-0"></i> Common Region: Using boundaries (like cards or boxes) to explicitly group related elements.</li>
                        </ul>
                    </div>
                </div>

                <div class="h-px bg-white/5 mx-auto max-w-5xl"></div>

                <!-- 5. NEW RAW: Motion and 3D -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="anim-item" data-delay="1.1">
                        <span class="text-brand-primary font-mono text-sm mb-2 block">05 / KINETIC & 3D VISUALS</span>
                        <h3 class="text-3xl font-display font-bold mb-4">Using Motion to Delight and Direct Focus</h3>
                        <p class="text-gray-400 mb-6">
                            Modern digital design demands movement. Motion graphics provide essential feedback, enhance narrative storytelling, and create delightful micro-interactions. Similarly, realistic 3D renderings and spatial depth are key to product visualization and brand immersion, moving beyond flat 2D designs. 
                        </p>
                        <ul class="space-y-2">
                            <li class="flex items-start gap-3"><i data-lucide="move" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Feedback: Subtle animations confirming user actions (e.g., button clicks).</li>
                            <li class="flex items-start gap-3"><i data-lucide="cube" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Depth: Utilizing shadows, light, and perspective to give digital elements a physical presence.</li>
                            <li class="flex items-start gap-3"><i data-lucide="dices" class="w-5 h-5 text-brand-accent mt-1 flex-shrink-0"></i> Storytelling: Animated sequences that communicate complex processes or brand history effectively.</li>
                        </ul>
                    </div>

                    <div class="anim-item glass p-8 rounded-3xl shadow-xl border border-white/10 space-y-4" data-delay="1.2">
                        <p class="text-xs font-mono uppercase text-gray-500 mb-4">Visual System: Motion & Hierarchy</p>
                        <!-- Simple Card with Hover Motion -->
                        <div class="bg-brand-dark p-6 rounded-xl hover:shadow-xl hover:shadow-brand-secondary/40 transition duration-300 transform hover:-translate-y-1 border border-white/10 flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <i data-lucide="loader" class="w-8 h-8 text-brand-accent animate-spin-slow"></i>
                                <div>
                                    <p class="font-bold">Kinetic Element</p>
                                    <p class="text-sm text-gray-500">Subtle movement grabs attention.</p>
                                </div>
                            </div>
                            <button class="bg-brand-primary text-white px-4 py-2 rounded-lg text-sm transition-all duration-200 hover:scale-105">View</button>
                        </div>
                        <p class="text-xs text-gray-500 mt-4">Motion guides the eye and clearly indicates interactivity or a loading state.</p>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Call to Action Section (New) -->
    <section class="py-24 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="glass p-12 rounded-3xl shadow-2xl shadow-brand-primary/20 border border-white/10 bg-gradient-to-br from-brand-card/50 to-brand-dark/50">
                <h2 class="text-5xl font-display font-bold mb-4 text-gradient anim-item">Ready to Elevate Your Visual Strategy?</h2>
                <p class="text-xl text-gray-400 mb-8 max-w-3xl mx-auto anim-item" style="transition-delay: 0.1s;">
                    Don't just design—engineer visual dominance. Let's start the conversation about your next project.
                </p>
                <!-- CTA Button -->
                <button class="group relative px-10 py-4 bg-brand-accent text-brand-dark font-extrabold rounded-full overflow-hidden transition-all hover:scale-105 shadow-xl shadow-brand-accent/30 anim-item" style="transition-delay: 0.2s;">
                    <span class="relative flex items-center justify-center gap-2">
                        Start a Project <i data-lucide="send" class="w-5 h-5"></i>
                    </span>
                </button>
            </div>
        </div>
    </section>


    <script>
        // Initialize Icons
        lucide.createIcons();

        // Global state for requestAnimationFrame
        let scrollY = 0;
        let lastScrollY = 0;
        let ticking = false;
        
        // --- INTERACTIVE CURSOR & SPOTLIGHT ---
        const cursorDot = document.querySelector('.cursor-dot');
        const cursorOutline = document.querySelector('.cursor-outline');
        const spotlight = document.getElementById('spotlight');

        window.addEventListener('mousemove', (e) => {
            const posX = e.clientX;
            const posY = e.clientY;

            // Move cursor dot
            cursorDot.style.left = `${posX}px`;
            cursorDot.style.top = `${posY}px`;

            // Delayed effect for outline (better tracking with keyframes/WAAPI)
            cursorOutline.animate({
                transform: [`translate(-50%, -50%) translate3d(${posX}px, ${posY}px, 0)`]
            }, { duration: 500, fill: "forwards" });

            // Move Spotlight
            spotlight.style.setProperty('--mouse-x', `${posX}px`);
            spotlight.style.setProperty('--mouse-y', `${posY}px`);
        });
        
        // --- 3D TILT EFFECT FOR CARDS ---
        document.querySelectorAll('.tilt-card').forEach(card => {
            const tiltCard = card.closest('.tilt-card');
            if (!tiltCard) return;

            card.addEventListener('mousemove', (e) => {
                const rect = tiltCard.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                
                // Calculate rotation values (limited to +/- 5 deg for subtle effect)
                const rotateX = ((y - centerY) / centerY) * -5;
                const rotateY = ((x - centerX) / centerX) * 5;

                // Apply stronger transform on the card
                tiltCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
            });

            card.addEventListener('mouseleave', () => {
                tiltCard.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)`;
            });
        });

        // --- SCROLL PARALLAX EFFECT (Hero) ---
        const parallaxItems = document.querySelectorAll('[data-parallax-speed]');

        function handleScrollEffects() {
            const scrollDistance = window.scrollY;
            
            parallaxItems.forEach(item => {
                const speed = parseFloat(item.getAttribute('data-parallax-speed'));
                
                const translateY = scrollDistance * (speed / 1000); 
                
                item.style.transform = `translateY(${translateY}px)`;

                if (item.id === 'hero-center-card') {
                    const scaleFactor = Math.max(0.7, 1 - (scrollDistance * 0.0005));
                    item.style.transform = `translateY(${translateY}px) scale(${scaleFactor})`;
                }
            });
            
            ticking = false;
        }

        window.addEventListener('scroll', () => {
            lastScrollY = window.scrollY;
            if (!ticking) {
                window.requestAnimationFrame(() => {
                    handleScrollEffects();
                });
                ticking = true;
            }
        });


        // --- SCROLL REVEAL (Intersection Observer) ---
        function initScrollAnimations() {
            const animItems = document.querySelectorAll('.anim-item');

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const target = entry.target;
                        const delay = parseFloat(target.getAttribute('data-delay') || 0);

                        setTimeout(() => {
                            target.classList.add('animated');
                        }, delay * 1000);

                        observer.unobserve(target);
                    }
                });
            }, {
                rootMargin: '0px',
                threshold: 0.2
            });

            animItems.forEach(item => {
                observer.observe(item);
            });
        }
        
        // --- Run initialization on load ---
        document.addEventListener('DOMContentLoaded', () => {
            initScrollAnimations();
            handleScrollEffects();
        });

    </script>
</body>
</html>/* End custom CSS */