Responsive Contact Section with Support Form

<section class="w-full mr-auto mb-8 ml-auto">
      <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
        <div class="relative overflow-hidden bg-white/5 ring-white/10 ring-1 rounded-3xl backdrop-blur">
          <div class="relative z-10 md:p-12 lg:p-16 pt-8 pr-8 pb-8 pl-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
              <!-- Form card -->
              <div class="lg:col-span-5">
                <div id="contact" class="rounded-2xl bg-white/95 backdrop-blur ring-1 ring-white/20 shadow-lg p-6">
                  <div class="flex items-center justify-between">
                    <div class="">
                      <p class="text-[11px] text-neutral-500 font-geist uppercase tracking-wider">ModaIQ Support</p>
                      <h3 class="mt-1 text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 font-geist">
                        Need styling help?
                      </h3>
                    </div>
                    <div class="h-9 w-9 rounded-lg bg-neutral-900 text-white flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-square" class="lucide lucide-message-square h-4 w-4"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" class=""></path></svg>
                    </div>
                  </div>

                  <form action="#" method="POST" class="mt-6 space-y-4">
                    <div class="">
                      <label for="ct-name" class="block text-xs text-neutral-600 font-geist">Your name<span class="text-neutral-400"> *</span></label>
                      <input id="ct-name" name="name" type="text" required="" placeholder="Jane Doe" class="mt-1 w-full pl-3 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist">
                    </div>
                    <div class="">
                      <label for="ct-email" class="block text-xs text-neutral-600 font-geist">Email<span class="text-neutral-400"> *</span></label>
                      <div class="relative mt-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-4 w-4 text-neutral-400 absolute left-3 top-1/2 -translate-y-1/2"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
                        <input id="ct-email" name="email" type="email" required="" placeholder="you@example.com" class="w-full pl-9 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist">
                      </div>
                    </div>
                    <div class="">
                      <label for="ct-msg" class="block text-xs text-neutral-600 font-geist">Message</label>
                      <textarea id="ct-msg" name="message" rows="4" placeholder="Tell us what you’re looking for—sizes, occasions, or vibe." class="mt-1 w-full resize-y pl-3 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist"></textarea>
                    </div>
                    <button type="submit" class="w-full inline-flex items-center justify-center rounded-xl bg-neutral-900 text-white px-4 py-3 text-sm font-semibold hover:bg-neutral-800 transition-colors font-geist">
                      Send message
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 ml-2"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                    </button>
                    <p class="text-[11px] text-neutral-500 font-geist">By submitting, you agree to our Terms and Privacy Policy.</p>
                  </form>
                </div>
              </div>

              <!-- Copy + highlights -->
              <div class="lg:col-span-7">
                <h2 class="text-4xl sm:text-5xl lg:text-6xl leading-[1.05] font-semibold text-white tracking-tight font-geist">Let’s style it.</h2>
                <p class="text-base sm:text-lg max-w-2xl text-white/80 mt-4 font-geist">
                  Personal styling, wholesale, or partnerships—tell us what you need. We reply within one business day.
                </p>

                <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div class="flex items-start gap-3">
                    <div class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-white/90">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock-3" class="lucide lucide-clock-3 h-4 w-4"><path d="M12 6v6h4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                    </div>
                    <div>
                      <p class="text-white font-semibold text-sm font-geist">Quick response</p>
                      <p class="text-white/70 text-xs font-geist">Most messages receive a reply in under 24h.</p>
                    </div>
                  </div>
                  <div class="flex items-start gap-3">
                    <div class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-white/90">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag h-4 w-4"><path d="M16 10a4 4 0 0 1-8 0" class=""></path><path d="M3.103 6.034h17.794" class=""></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" class=""></path></svg>
                    </div>
                    <div class="">
                      <p class="text-white font-semibold text-sm font-geist">Clear next steps</p>
                      <p class="text-white/70 text-xs font-geist">We’ll follow up with a concise plan and timeline.</p>
                    </div>
                  </div>
                </div>

                <!-- Direct contact card -->
                <div class="mt-8">
                  <div class="inline-flex items-center gap-3 rounded-2xl bg-white/95 backdrop-blur ring-1 ring-white/20 shadow-lg p-3">
                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9e675575-668c-4087-8408-fa06dd33c5f0_800w.jpg" alt="Styling lead" class="h-12 w-12 rounded-xl object-cover" style="">
                    <div class="min-w-0">
                      <p class="text-[11px] text-neutral-500 leading-none font-geist uppercase tracking-wider">Styling Lead</p>
                      <p class="text-neutral-900 font-semibold tracking-tight truncate font-geist">Ava Kim</p>
                    </div>
                    <a href="mailto:hello@modaiq.com" class="ml-1 inline-flex items-center gap-2 rounded-xl bg-neutral-900 text-white px-3 py-2 text-xs font-semibold hover:bg-neutral-800 transition-colors font-geist">
                      Ask directly
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-circle" class="lucide lucide-message-circle h-3.5 w-3.5"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>  
    </section>