Skincare Ritual Quiz Hero Section

<section class="text-emerald-50 bg-[#0b0f0e] w-full border-emerald-900/60 border-t">
<link id="all-fonts-link-font-playfair" rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap">
<style id="all-fonts-style-font-playfair">
  .font-playfair {
    font-family: 'Playfair Display', serif !important;
  }
</style>
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
    <div class="flex flex-col lg:flex-row items-center lg:items-stretch gap-10">
      <!-- Left: Headline & copy -->
      <div class="w-full lg:w-1/2 flex flex-col justify-center">
        <p class="text-xs sm:text-sm font-medium tracking-[0.18em] uppercase text-emerald-300 mb-3">
          START TONIGHT
        </p>
        <h2 class="font-playfair text-3xl sm:text-4xl lg:text-[2.6rem] leading-tight tracking-tight">
          Ready to give your skin
          <span class="italic text-emerald-300">the quiet it’s asking for?</span>
        </h2>
        <p class="mt-4 text-sm sm:text-base text-emerald-100/85 max-w-lg">
          Answer a few questions and we’ll build a gentle, step-by-step ritual that fits your skin, your time,
          and your budget—no 10-step overwhelm required.
        </p>

        <!-- CTA buttons -->
        <div class="mt-7 flex flex-wrap items-center gap-3 sm:gap-4">
          <button class="inline-flex items-center gap-2 rounded-full bg-emerald-400 text-emerald-950 px-5 py-2.5 text-xs sm:text-sm font-medium hover:bg-emerald-300 hover:shadow-sm transition-colors">
            Start my ritual quiz
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M13.293 5.293a1 1 0 0 1 1.414 0l4 4a.997.997 0 0 1 .083.094l.007.01l.007.01a.997.997 0 0 1 .083.148l.003.01l.005.01A1 1 0 0 1 19.999 11v.003a1 1 0 0 1-.293.704l-4 4a1 1 0 0 1-1.414-1.414L16.586 12H6a1 1 0 1 1 0-2h10.586l-3.293-3.293a1 1 0 0 1 0-1.414Z" class=""></path>
            </svg>
          </button>
          <button class="inline-flex items-center gap-2 rounded-full border border-emerald-700/80 bg-[#111715] px-4 py-2 text-xs sm:text-sm font-medium text-emerald-100 hover:border-emerald-400 hover:bg-[#151d19] transition-colors">
            Browse all products
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-300" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M5 4a1 1 0 0 1 1-1h4.5a1 1 0 1 1 0 2H7v14h10V9.5a1 1 0 1 1 2 0V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" class=""></path>
              <path fill="currentColor" d="M14.5 3a1 1 0 0 0 0 2h1.793l-5.147 5.146a1 1 0 1 0 1.414 1.415L17.707 6.5V8.3a1 1 0 0 0 2 0V3.999A1 1 0 0 0 18.999 3z" class=""></path>
            </svg>
          </button>
        </div>

        <!-- Micro reassurance -->
        <div class="mt-5 flex flex-wrap gap-4 text-[0.7rem] sm:text-xs text-emerald-300/80">
          <div class="flex items-center gap-2">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500/10 border border-emerald-500/40 text-[0.65rem] text-emerald-200">
              ✓
            </span>
            <span>Dermatologist reviewed routines</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500/10 border border-emerald-500/40 text-[0.65rem] text-emerald-200">
              ✓
            </span>
            <span>No subscription required</span>
          </div>
        </div>
      </div>

      <!-- Right: visual card -->
      <div class="w-full lg:w-1/2">
        <div
          class="relative rounded-3xl border border-emerald-900/70 bg-gradient-to-br from-[#111715] via-[#0c1411] to-[#102019] overflow-hidden shadow-sm">
          <div class="absolute -top-20 right-[-40px] w-56 h-56 bg-emerald-500/20 blur-3xl"></div>
          <div class="absolute -bottom-16 left-[-40px] w-52 h-52 bg-emerald-600/20 blur-3xl"></div>

          <div class="relative px-6 py-7 sm:px-8 sm:py-9 flex flex-col gap-6">
            <div class="flex items-center justify-between gap-4">
              <div>
                <p class="text-xs font-medium tracking-[0.18em] uppercase text-emerald-300/90 mb-2">
                  SAMPLE RITUAL
                </p>
                <p class="text-sm text-emerald-100/80">
                  For reactive, city-stressed skin
                </p>
              </div>
              <div class="flex items-center gap-2 text-xs text-emerald-100/80">
                <span class="inline-flex h-7 px-3 items-center justify-center rounded-full bg-emerald-500/15 border border-emerald-400/50">
                  ~5 min
                </span>
                <span class="inline-flex h-7 px-3 items-center justify-center rounded-full bg-emerald-500/10 border border-emerald-400/40">
                  3 steps
                </span>
              </div>
            </div>

            <div class="space-y-3">
              <div class="flex items-start gap-3">
                <div
                  class="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/20 text-[0.75rem] font-medium text-emerald-200">
                  01
                </div>
                <div class="">
                  <p class="text-xs font-medium tracking-[0.18em] uppercase text-emerald-300">
                    Cleanse
                  </p>
                  <p class="text-sm text-emerald-50 mt-1">
                    Cloud Melt Cleansing Gel
                  </p>
                  <p class="text-xs text-emerald-200/80 mt-0.5">
                    Rinse away SPF and buildup without the post-wash tightness.
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <div
                  class="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/20 text-[0.75rem] font-medium text-emerald-200">
                  02
                </div>
                <div class="">
                  <p class="text-xs font-medium tracking-[0.18em] uppercase text-emerald-300">
                    Treat
                  </p>
                  <p class="text-sm text-emerald-50 mt-1">
                    Lumina Barrier Serum
                  </p>
                  <p class="text-xs text-emerald-200/80 mt-0.5">
                    Target visible redness and restore suppleness with barrier-supporting actives.
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-3">
                <div
                  class="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/20 text-[0.75rem] font-medium text-emerald-200">
                  03
                </div>
                <div class="">
                  <p class="text-xs font-medium tracking-[0.18em] uppercase text-emerald-300">
                    Seal
                  </p>
                  <p class="text-sm text-emerald-50 mt-1">
                    Velvet Lock Moisture Cream
                  </p>
                  <p class="text-xs text-emerald-200/80 mt-0.5">
                    Lock in hydration overnight without clogging pores or heaviness.
                  </p>
                </div>
              </div>
            </div>

            <div
              class="pt-3 border-t border-emerald-900/70 flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[0.75rem] sm:text-xs text-emerald-200/80">
              <div class="flex items-center gap-2">
                <div class="flex -space-x-2">
                  <img class="w-7 h-7 rounded-full border border-[#0b0f0e] object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4cd168c2-063d-4fc6-9a8b-e7dc29079fbb_320w.webp" alt="Customer">
                  <img class="w-7 h-7 rounded-full border border-[#0b0f0e] object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e54a682e-0572-4963-acad-3fef8c475181_320w.webp" alt="Customer">
                  <img class="w-7 h-7 rounded-full border border-[#0b0f0e] object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a99bb2ef-7049-4322-b3d5-5c763f91718f_320w.webp" alt="Customer">
                </div>
                <p>
                  <span class="font-medium text-emerald-50">2,304</span> people built their ritual in the last 30 days.
                </p>
              </div>
              <p class="text-emerald-400/80">
                You can adjust or skip any step—your skin, your pace.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>