Night Race Ticket Pricing & Admission Section

<div class="max-w-[1600px] mr-auto ml-auto">
  <div
    class="flex flex-col md:flex-row md:items-end gap-6 border-white/10 border-b mb-16 pb-8 gap-x-6 gap-y-6 justify-between">
    <div class="flex flex-col items-start gap-2">
      <div class="flex items-center gap-3 mb-2">
        <span class="w-8 h-[2px] bg-blue-600"></span>
        <span class="uppercase text-lg font-bold text-blue-500 tracking-widest font-mono">06</span>
        <span class="text-xs font-bold uppercase tracking-[0.2em] text-white/50">
                    ADMISSION
                  </span>
      </div>
      <h2 class="md:text-8xl uppercase leading-[0.9] text-6xl font-bold text-white tracking-tighter font-oswald">
        <span style="display:inline-block;overflow:hidden;vertical-align:top;margin-right:0.25em"><span class="reveal-word" style="display: inline-block; transform: translate(0px, 0px); translate: none; rotate: none; scale: none;">SECUREACCESS</span></span>
      </h2>
    </div>
    <div class="flex flex-col items-start md:items-end gap-6">
      <p class="text-neutral-400 max-w-md md:text-right text-sm leading-relaxed"
        style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
        Limited availability for Sprint, Beast, and Ultra categories.
      </p>
      <button class="group flex items-center gap-2 px-6 py-3 rounded-full border border-white/20 hover:bg-white hover:text-black transition-all text-xs font-bold uppercase tracking-widest" style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
                  TICKET OPTIONS
                  <span class="group-hover:translate-x-1 transition-transform">
                    →
                  </span>
                </button>
    </div>
  </div>

  <!-- Row 1 -->
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-stretch">
    <div class="lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-8"
      style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
      <div class="relative bg-black border border-white/20"
        style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
        <div class="absolute left-0 right-0 -top-[10px] h-5"
          style="background: radial-gradient(circle, transparent 10px, rgba(0,0,0,1) 10px) repeat-x; background-size: 26px 20px;">
        </div>
        <div class="absolute left-0 right-0 -bottom-[10px] h-5"
          style="background: radial-gradient(circle, transparent 10px, rgba(0,0,0,1) 10px) repeat-x; background-size: 26px 20px;">
        </div>
        <div class="relative p-8 pt-14 min-h-[560px] flex flex-col text-center">
          <h3 class="uppercase leading-none text-6xl font-bold italic text-white tracking-tight font-oswald">SPRINT</h3>
          <p class="mt-4 text-xs text-white/55 leading-relaxed max-w-[240px] mx-auto"
            style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
            Buying SPRINT pass for the night race you gain access to:</p>
          <div class="mt-10 h-px bg-white/15"></div>
          <ul class="mt-10 space-y-5 text-sm text-white/75 text-left">
            <li class="flex items-center gap-4"
              style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
              <span class="inline-flex justify-center text-white w-5">✦</span> 5K Course Access</li>
            <li class="flex items-center gap-4"
              style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
              <span class="inline-flex w-5 justify-center text-white">✦</span> 20 Obstacles</li>
            <li class="flex items-center gap-4"
              style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
              <span class="inline-flex w-5 justify-center text-white">✦</span> “Flash” Start Wave</li>
          </ul>
          <div class="mt-auto pt-12">
            <div class="h-px bg-white/15 mb-8"></div>
            <div class="text-5xl font-black tracking-tight">$89</div>
          </div>
        </div>
      </div>

      <div class="relative bg-black border border-white/20"
        style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
        <div class="absolute left-0 right-0 -top-[10px] h-5"
          style="background: radial-gradient(circle, transparent 10px, rgba(0,0,0,1) 10px) repeat-x; background-size: 26px 20px;">
        </div>
        <div class="absolute left-0 right-0 -bottom-[10px] h-5"
          style="background: radial-gradient(circle, transparent 10px, rgba(0,0,0,1) 10px) repeat-x; background-size: 26px 20px;">
        </div>
        <div class="relative p-8 pt-14 min-h-[560px] flex flex-col text-center">
          <h3 class="uppercase leading-none text-6xl font-bold italic text-white tracking-tight font-oswald">BEAST</h3>
          <p class="mt-4 text-xs text-white/55 leading-relaxed max-w-[240px] mx-auto"
            style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
            Buying BEAST pass for the night race you gain access to:</p>
          <div class="mt-10 h-px bg-white/15"></div>
          <ul class="mt-10 space-y-5 text-sm text-white/75 text-left">
            <li class="flex items-center gap-4"
              style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
              <span class="inline-flex justify-center text-white w-5">✦</span> 21K Half Marathon</li>
            <li class="flex items-center gap-4"
              style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
              <span class="inline-flex justify-center text-white w-5">✦</span> 30 Obstacles</li>
            <li class="flex items-center gap-4"
              style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
              <span class="inline-flex justify-center text-white w-5">✦</span> Elite Timing Chip</li>
          </ul>
          <div class="mt-auto pt-12">
            <div class="h-px bg-white/15 mb-8"></div>
            <div class="text-5xl font-black tracking-tight">$129</div>
          </div>
        </div>
      </div>
    </div>

    <div class="lg:col-span-5 h-full"
      style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
      <div class="border border-white/15 h-full flex flex-col">
        <div class="relative aspect-[2.2/1] overflow-hidden shrink-0">
          <img src="https://cdn.midjourney.com/0e245ffa-8c07-4437-8d7a-abbd1a012617/0_0.png?w=800&amp;q=80" class="opacity-70 w-full h-full object-cover grayscale" alt="" style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
          <div class="absolute inset-0 bg-black/35"></div>
          <div class="opacity-30 absolute top-0 right-0 bottom-0 left-0"
            style="background-image:url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E')">
          </div>
        </div>

        <div class="flex flex-col flex-1 pt-8 pr-8 pb-8 pl-8">
          <h2 class="text-4xl font-black tracking-tight uppercase leading-[0.9]">
            <span style="display:inline-block;overflow:hidden;vertical-align:top;margin-right:0.25em"><span class="reveal-word" style="display: inline-block; transform: translate(0px, 0px); translate: none; rotate: none; scale: none;">BOOKYOURTICKETS</span></span>
          </h2>

          <p class="mt-4 text-xs text-white/50"
            style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
            Select your quantity and secure your wave time.</p>

          <div class="flex-1"></div>





          <button class="uppercase hover:invert transition-all text-sm font-black text-black tracking-widest bg-white w-full mt-8 pt-5 pb-5" style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">Buy Tickets</button>

          <p class="mt-6 text-[10px] text-white/30 text-center leading-relaxed"
            style="filter: blur(0px); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
            Prices include all taxes and event insurance.
            <br>By clicking "Buy" you agree to our terms of service.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Row 2 -->


  <!-- Row 3 -->

</div>