Responsive Service Pricing Cards Section

<section class="max-w-7xl sm:px-6 scroll-reveal visible mr-auto ml-auto pt-20 pr-4 pb-20 pl-4">
            <div class="text-center mb-16 slide-up visible">
                <p class="text-sm text-slate-500 uppercase tracking-wider mb-4">Our Services</p>
                <h2 class="text-5xl sm:text-7xl font-light font-playfair tracking-tight text-gradient mb-6">Tailored to You</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Personal Styling -->
    <div class="group hover-lift slide-up stagger-1 visible transition-all duration-500 hover:scale-105 rounded-3xl mt-0 mb-20 scale-hover">
        <div class="relative glass overflow-hidden bg-white/80 border-slate-200/60 border rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-lg hover:shadow-2xl hover:bg-slate-900 transition-all duration-500">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wider group-hover:text-white/70 transition-colors duration-500">Popular</span>
                </div>
                <h3 class="text-2xl font-semibold mb-4 text-slate-800 group-hover:text-white transition-colors duration-500">Personal Styling</h3>
                <p class="mb-6 leading-relaxed text-slate-600 group-hover:text-white/80 transition-colors duration-500">Transform your wardrobe with our person selections.</p>
                
                <div class="mb-6 space-y-3">
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Wardrobe audit &amp; assessment</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Personalized style guide</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Shopping recommendations</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Color palette analysis</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Follow-up styling tips</span>
                    </div>
                </div>

                <div class="mb-8">
                    <span class="text-4xl font-light tracking-tight text-slate-900 group-hover:text-white transition-colors duration-500">$399</span>
                    <span class="text-slate-500 ml-2 group-hover:text-white/70 transition-colors duration-500">/ 2 hour session</span>
                    <p class="text-xs text-slate-500 mt-1 group-hover:text-white/60 transition-colors duration-500">Perfect for style refreshes</p>
                </div>
                <button class="w-full glass transition-all duration-500 hover:shadow-xl font-medium text-white bg-slate-900 rounded-2xl pt-4 pb-4 group-hover:bg-white group-hover:text-slate-900 hover:scale-105 transform">
                    Book Session
                </button>
            </div>
        </div>
    </div>

    <!-- Ready-to-Wear -->
    <div class="group hover-lift slide-up stagger-2 visible rounded-3xl mb-12 scale-hover transition-all duration-500 hover:scale-105">
        <div class="relative glass overflow-hidden bg-slate-900/90 border-slate-300/60 border rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-lg hover:shadow-2xl hover:bg-white/90 transition-all duration-500">
            <div class="absolute -top-8 left-1/2 -translate-x-1/2">
                <span class="glass text-sm font-medium rounded-full pt-2 pr-4 pb-2 pl-4 text-white bg-slate-800 group-hover:bg-slate-200 group-hover:text-slate-800 transition-colors duration-500">Most Popular</span>
            </div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    
                    <span class="text-xs font-medium text-white/60 uppercase tracking-wider group-hover:text-slate-600 transition-colors duration-500">Premium</span>
                </div>
                <h3 class="text-2xl font-semibold text-white mb-4 group-hover:text-slate-900 transition-colors duration-500">Ready-to-Wear</h3>
                <p class="leading-relaxed text-white/60 mb-6 group-hover:text-slate-600 transition-colors duration-500">Curated fashion pieces from our latest collections, tailored to fit your personal style perfectly.</p>
                
                <div class="mb-6 space-y-3">
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin-slate-500="" transition-colors="" duration-500"="" class=""><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-white/80 group-hover:text-slate-600 transition-colors duration-500">Complete styling session (3 hours)</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 group-hover:text-slate-500 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-white/80 group-hover:text-slate-600 transition-colors duration-500">5-7 curated pieces selection</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 group-hover:text-slate-500 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-white/80 group-hover:text-slate-600 transition-colors duration-500">Professional alterations included</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 group-hover:text-slate-500 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-white/80 group-hover:text-slate-600 transition-colors duration-500">Seasonal wardrobe planning</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 group-hover:text-slate-500 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-white/80 group-hover:text-slate-600 transition-colors duration-500">6-month styling support</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/60 group-hover:text-slate-500 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-white/80 group-hover:text-slate-600 transition-colors duration-500">Exclusive collection access</span>
                    </div>
                </div>

                <div class="mb-8">
                    <span class="text-4xl font-light text-white tracking-tight group-hover:text-slate-900 transition-colors duration-500">$899</span>
                    <span class="text-white/60 ml-2 group-hover:text-slate-500 transition-colors duration-500">/ full service</span>
                    <p class="text-xs text-white/50 mt-1 group-hover:text-slate-500 transition-colors duration-500">Complete wardrobe transformation</p>
                </div>
                <button class="w-full glass transition-all duration-500 hover:shadow-xl font-medium text-slate-900 bg-white rounded-2xl pt-4 pb-4 group-hover:bg-slate-900 group-hover:text-white hover:scale-105 transform">
                    Explore Collection
                </button>
            </div>
        </div>
    </div>

    <!-- Couture -->
    <div class="group hover-lift slide-up stagger-3 visible rounded-3xl mb-12 scale-hover transition-all duration-500 hover:scale-105">
        <div class="relative glass overflow-hidden bg-white/80 border-slate-200/60 border rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-lg hover:shadow-2xl hover:bg-slate-900 transition-all duration-500">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    
                    <span class="text-xs font-medium text-slate-500 uppercase tracking-wider group-hover:text-white/70 transition-colors duration-500">Luxury</span>
                </div>
                <h3 class="text-2xl font-semibold mb-4 text-slate-800 group-hover:text-white transition-colors duration-500">Bespoke Couture</h3>
                <p class="mb-6 leading-relaxed text-slate-600 group-hover:text-white/80 transition-colors duration-500">Exclusively designed pieces crafted with the finest materials and unparalleled attention to detail.</p>
                
                <div class="mb-6 space-y-3">
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">One-on-one design consultation</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Custom pattern creation</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Luxury fabric selection</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Multiple fittings (4-5 sessions)</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Hand-finished details</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-white/70 transition-colors duration-500"><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
                        <span class="text-sm text-slate-600 group-hover:text-white/80 transition-colors duration-500">Lifetime garment care service</span>
                    </div>
                </div>

                <div class="mb-8">
                    <span class="text-4xl font-light tracking-tight text-slate-900 group-hover:text-white transition-colors duration-500">$2,999</span>
                    <span class="text-slate-500 ml-2 group-hover:text-white/70 transition-colors duration-500">/ 8 weeks</span>
                    <p class="text-xs text-slate-500 mt-1 group-hover:text-white/60 transition-colors duration-500">Truly one-of-a-kind creation</p>
                </div>
                <button class="w-full glass rounded-2xl py-4 font-medium transition-all duration-500 hover:shadow-xl bg-slate-900 text-white group-hover:bg-white group-hover:text-slate-900 hover:scale-105 transform">
                    Schedule Consultation
                </button>
            </div>
        </div>
    </div>
</div>
        </section>