<!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>Naturalis Köln | Naturopathy & Holistic Health</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        natural: {
                            50: '#F5F7F5',
                            100: '#E6EBE7',
                            200: '#CAD6CD',
                            300: '#AEC1B4',
                            400: '#92AC9A',
                            500: '#769781',
                            600: '#5A7D66', // Primary Brand
                            700: '#435D4C',
                            800: '#2D3E33',
                            900: '#161F19',
                        },
                        sand: {
                            50: '#FAFAF9',
                            100: '#F5F5F4',
                            200: '#E7E5E4',
                            300: '#D6D3D1',
                            900: '#44403C'
                        }
                    },
                    fontFamily: {
                        serif: ['"Playfair Display"', 'serif'],
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    boxShadow: {
                        'soft': '0 20px 40px -15px rgba(90, 125, 102, 0.15)',
                        'glow': '0 0 20px rgba(90, 125, 102, 0.2)',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'float-delayed': 'float 6s ease-in-out 3s infinite',
                        'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
                        'spin-slow': 'spin 12s linear infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        /* Custom Styles & Reset */
        body {
            background-color: #FAFAF9; /* sand-50 */
            color: #2D3E33; /* natural-800 */
        }
        
        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .hero-image-mask {
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            transition: border-radius 0.5s ease;
        }
        
        .hero-image-mask:hover {
            border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
        }

        .blob-bg {
            position: absolute;
            filter: blur(80px);
            z-index: -1;
            opacity: 0.6;
        }

        /* Smooth reveal classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Stagger delays */
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }
        
        /* Mobile Menu Transition */
        #mobile-menu {
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
        
        .menu-closed {
            transform: translateY(-20px);
            opacity: 0;
            pointer-events: none;
        }
        
        .menu-open {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
    </style>
</head>
<body class="antialiased overflow-x-hidden selection:bg-natural-200 selection:text-natural-900">

    <!-- Background Blobs -->
    <div class="blob-bg bg-natural-200 w-96 h-96 rounded-full top-0 left-[-100px] animate-float"></div>
    <div class="blob-bg bg-orange-100 w-80 h-80 rounded-full bottom-0 right-[-50px] animate-float-delayed"></div>

    <!-- Navigation -->
    <nav class="fixed w-full z-50 transition-all duration-300 top-0" id="navbar">
        <div class="glass-panel mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4 rounded-2xl shadow-sm border border-white/40">
            <div class="flex justify-between items-center h-20">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center gap-2 cursor-pointer group">
                    <div class="w-10 h-10 bg-natural-600 rounded-full flex items-center justify-center text-white group-hover:bg-natural-700 transition-colors">
                        <i class="ph ph-plant text-2xl"></i>
                    </div>
                    <span class="font-serif text-2xl font-semibold text-natural-800 tracking-tight">Naturalis<span class="text-natural-500">.Köln</span></span>
                </div>

                <!-- Desktop Menu -->
                <div class="hidden md:flex space-x-8 items-center">
                    <a href="#" class="text-natural-700 hover:text-natural-900 font-medium transition-colors text-sm uppercase tracking-wider">Therapies</a>
                    <a href="#" class="text-natural-700 hover:text-natural-900 font-medium transition-colors text-sm uppercase tracking-wider">About Us</a>
                    <a href="#" class="text-natural-700 hover:text-natural-900 font-medium transition-colors text-sm uppercase tracking-wider">Workshops</a>
                    <a href="#" class="text-natural-700 hover:text-natural-900 font-medium transition-colors text-sm uppercase tracking-wider">Blog</a>
                </div>

                <!-- CTA & Language -->
                <div class="hidden md:flex items-center space-x-4">
                    <button class="text-natural-600 font-semibold hover:text-natural-800 text-sm">DE / EN</button>
                    <a href="#consultation" class="bg-natural-600 hover:bg-natural-700 text-white px-6 py-2.5 rounded-full font-medium transition-all transform hover:scale-105 shadow-lg shadow-natural-600/30 flex items-center gap-2">
                        <span>Book Consultation</span>
                        <i class="ph-bold ph-arrow-right"></i>
                    </a>
                </div>

                <!-- Mobile Menu Button -->
                <div class="md:hidden flex items-center">
                    <button id="menu-btn" class="text-natural-800 focus:outline-none p-2 rounded-md hover:bg-natural-100">
                        <i class="ph ph-list text-2xl" id="menu-icon"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu Dropdown -->
        <div id="mobile-menu" class="absolute top-24 left-4 right-4 glass-panel rounded-2xl p-6 menu-closed shadow-xl md:hidden">
            <div class="flex flex-col space-y-4">
                <a href="#" class="text-lg font-serif text-natural-800">Therapies</a>
                <a href="#" class="text-lg font-serif text-natural-800">About Us</a>
                <a href="#" class="text-lg font-serif text-natural-800">Workshops</a>
                <a href="#" class="text-lg font-serif text-natural-800">Blog</a>
                <hr class="border-natural-200">
                <a href="#" class="bg-natural-600 text-white text-center py-3 rounded-xl font-medium shadow-md">Book Consultation</a>
            </div>
        </div>
    </nav>

    <!-- Main Hero Section -->
    <main class="relative pt-32 pb-16 lg:pt-48 lg:pb-32 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
                
                <!-- Left Column: Copy -->
                <div class="max-w-2xl">
                    <!-- Badge -->
                    <div class="reveal inline-flex items-center gap-2 px-3 py-1 rounded-full bg-natural-100 border border-natural-200 text-natural-600 text-xs font-bold uppercase tracking-widest mb-6">
                        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                        Accepting New Patients in Cologne
                    </div>

                    <!-- Headline -->
                    <h1 class="reveal delay-100 font-serif text-5xl lg:text-7xl font-medium text-natural-900 leading-[1.1] mb-6">
                        Restore balance naturally.
                    </h1>

                    <!-- Subheadline -->
                    <p class="reveal delay-200 text-lg lg:text-xl text-natural-700 leading-relaxed mb-8 max-w-lg">
                        Specializing in holistic gut health, hormonal balance, and stress relief. Experience modern naturopathy in the heart of the Belgian Quarter.
                    </p>

                    <!-- CTAs -->
                    <div class="reveal delay-300 flex flex-col sm:flex-row gap-4 mb-12">
                        <a href="#" class="group relative px-8 py-4 bg-natural-800 text-white rounded-full overflow-hidden shadow-soft hover:shadow-lg transition-all">
                            <div class="absolute inset-0 w-full h-full bg-natural-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
                            <span class="relative flex items-center gap-3 font-medium text-lg">
                                Schedule Visit
                                <i class="ph-bold ph-calendar-check"></i>
                            </span>
                        </a>
                        <a href="#" class="px-8 py-4 bg-white text-natural-800 border border-natural-200 rounded-full font-medium text-lg hover:bg-natural-50 hover:border-natural-300 transition-colors flex items-center justify-center gap-2">
                            <i class="ph-fill ph-play-circle text-natural-600 text-xl"></i>
                            How we work
                        </a>
                    </div>

                    <!-- Social Proof -->
                    <div class="reveal delay-300 flex items-center gap-4 pt-4 border-t border-natural-200/60">
                        <div class="flex -space-x-3">
                            <img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80" alt="Patient">
                            <img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=100&q=80" alt="Patient">
                            <img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80" alt="Patient">
                            <div class="w-10 h-10 rounded-full border-2 border-white bg-natural-100 flex items-center justify-center text-xs font-bold text-natural-600">+500</div>
                        </div>
                        <div class="flex flex-col">
                            <div class="flex text-yellow-500 text-sm">
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                            </div>
                            <span class="text-sm text-natural-600 font-medium">Trusted by Köln locals</span>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Imagery -->
                <div class="relative lg:h-[600px] flex items-center justify-center reveal delay-200">
                    
                    <!-- Decorative Circle Behind -->
                    <div class="absolute w-[500px] h-[500px] border border-natural-200 rounded-full animate-spin-slow opacity-50 hidden lg:block"></div>
                    <div class="absolute w-[450px] h-[450px] border border-natural-200/60 rounded-full animate-spin-slow opacity-30 hidden lg:block" style="animation-direction: reverse;"></div>

                    <!-- Main Image -->
                    <div class="relative z-10 w-full max-w-md mx-auto">
                        <div class="hero-image-mask overflow-hidden shadow-2xl shadow-natural-900/10 relative bg-natural-200">
                            <!-- Overlay gradient -->
                            <div class="absolute inset-0 bg-gradient-to-t from-natural-900/20 to-transparent z-10 mix-blend-multiply"></div>
                            <img src="https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=800&auto=format&fit=crop" 
                                 alt="Naturopathy Session" 
                                 class="w-full h-[500px] object-cover hover:scale-105 transition-transform duration-700">
                        </div>

                        <!-- Floating Card 1: Benefit -->
                        <div class="absolute top-10 -right-4 lg:-right-12 glass-panel p-4 rounded-xl shadow-lg animate-float z-20 max-w-[160px]">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
                                    <i class="ph-fill ph-sun"></i>
                                </div>
                                <span class="font-bold text-natural-800 text-sm">Vitality</span>
                            </div>
                            <div class="h-1.5 w-full bg-natural-100 rounded-full overflow-hidden">
                                <div class="h-full bg-orange-400 w-[85%] rounded-full"></div>
                            </div>
                            <p class="text-xs text-natural-500 mt-1">+85% Energy levels</p>
                        </div>

                        <!-- Floating Card 2: Plant -->
                        <div class="absolute bottom-20 -left-4 lg:-left-12 glass-panel p-3 rounded-xl shadow-lg animate-float-delayed z-20 flex items-center gap-3">
                            <img src="https://images.unsplash.com/photo-1615485925763-8678613d2062?w=100&auto=format&fit=crop&q=60" class="w-12 h-12 rounded-lg object-cover" alt="Herbs">
                            <div class="flex flex-col">
                                <span class="text-sm font-bold text-natural-800">Organic Herbs</span>
                                <span class="text-xs text-natural-500">Locally sourced</span>
                            </div>
                        </div>

                        <!-- Floating Card 3: Location -->
                        <div class="absolute -bottom-6 right-8 bg-natural-800 text-white p-4 rounded-xl shadow-xl z-20 flex items-center gap-3 transform rotate-2 hover:rotate-0 transition-transform cursor-pointer">
                            <i class="ph-fill ph-map-pin text-green-400 text-xl"></i>
                            <div class="flex flex-col">
                                <span class="text-xs text-gray-300 uppercase tracking-wider">Located in</span>
                                <span class="font-serif font-medium">Belgisches Viertel</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Decorative Leaves SVG (Bottom Right) -->
        <svg class="absolute bottom-0 right-0 w-64 h-64 text-natural-200/50 pointer-events-none transform translate-y-1/3 translate-x-1/3" viewBox="0 0 200 200" fill="currentColor">
            <path d="M45.7,149.9c-7.9,0-15.8-3-21.9-9.1c-12.1-12.1-12.1-31.7,0-43.8l77.4-77.4c12.1-12.1,31.7-12.1,43.8,0 c12.1,12.1,12.1,31.7,0,43.8L67.6,140.8C61.5,146.9,53.6,149.9,45.7,149.9z"/>
        </svg>
    </main>

    <!-- Features Strip (Transition to next section) -->
    <section class="bg-white border-y border-natural-200 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="flex flex-col items-center text-center gap-2 group cursor-pointer">
                    <div class="w-12 h-12 rounded-full bg-natural-50 flex items-center justify-center text-natural-600 group-hover:bg-natural-600 group-hover:text-white transition-colors duration-300">
                        <i class="ph ph-plant text-2xl"></i>
                    </div>
                    <h3 class="font-serif font-semibold text-natural-900">Herbal Medicine</h3>
                </div>
                <div class="flex flex-col items-center text-center gap-2 group cursor-pointer">
                    <div class="w-12 h-12 rounded-full bg-natural-50 flex items-center justify-center text-natural-600 group-hover:bg-natural-600 group-hover:text-white transition-colors duration-300">
                        <i class="ph ph-drop text-2xl"></i>
                    </div>
                    <h3 class="font-serif font-semibold text-natural-900">Acupuncture</h3>
                </div>
                <div class="flex flex-col items-center text-center gap-2 group cursor-pointer">
                    <div class="w-12 h-12 rounded-full bg-natural-50 flex items-center justify-center text-natural-600 group-hover:bg-natural-600 group-hover:text-white transition-colors duration-300">
                        <i class="ph ph-heart-beat text-2xl"></i>
                    </div>
                    <h3 class="font-serif font-semibold text-natural-900">Nutritional Therapy</h3>
                </div>
                <div class="flex flex-col items-center text-center gap-2 group cursor-pointer">
                    <div class="w-12 h-12 rounded-full bg-natural-50 flex items-center justify-center text-natural-600 group-hover:bg-natural-600 group-hover:text-white transition-colors duration-300">
                        <i class="ph ph-brain text-2xl"></i>
                    </div>
                    <h3 class="font-serif font-semibold text-natural-900">Mindfulness</h3>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Interaction Logic
        document.addEventListener('DOMContentLoaded', () => {
            
            // Intersection Observer for Reveal Animations
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            const revealElements = document.querySelectorAll('.reveal');
            revealElements.forEach(el => observer.observe(el));

            // Mobile Menu Toggle
            const menuBtn = document.getElementById('menu-btn');
            const menuIcon = document.getElementById('menu-icon');
            const mobileMenu = document.getElementById('mobile-menu');
            let isMenuOpen = false;

            menuBtn.addEventListener('click', () => {
                isMenuOpen = !isMenuOpen;
                if (isMenuOpen) {
                    mobileMenu.classList.remove('menu-closed');
                    mobileMenu.classList.add('menu-open');
                    menuIcon.classList.remove('ph-list');
                    menuIcon.classList.add('ph-x');
                    menuBtn.classList.add('bg-natural-100');
                } else {
                    mobileMenu.classList.remove('menu-open');
                    mobileMenu.classList.add('menu-closed');
                    menuIcon.classList.remove('ph-x');
                    menuIcon.classList.add('ph-list');
                    menuBtn.classList.remove('bg-natural-100');
                }
            });

            // Navbar Blur Effect on Scroll
            const navbar = document.getElementById('navbar');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 20) {
                    navbar.classList.add('py-0');
                } else {
                    navbar.classList.remove('py-0');
                }
            });
        });
    </script>
</body>
</html>