<section class="w-full max-w-[90%] mx-auto pt-36 md:pt-40 lg:pt-44 pb-5 md:pb-24 lg:pb-32 relative overflow-hidden" data-component-type="Content" data-component-slug="portfolio-template-hero">
  <!-- ===========================================
     BACKGROUND IMAGE (NOW DYNAMIC)
=========================================== -->
  <div class="absolute inset-0 top-40 m-auto pointer-events-none z-[1]">
    <img src="{{hero_bg_image}}" class="w-full h-auto block" alt="Background Grid" data-node="hero_bg_image" data-node-type="file" data-node-label="Hero Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879867/seltrix/templates/portfolio-template/Frame%20115.png">
  </div>

  <!-- ===========================================
     TEXT SECTION
=========================================== -->
  <div class="max-w-[1100px] mx-auto px-4 md:px-16 lg:px-24 text-center relative z-[5]">
    <div class="inline-block font-['Cabin'] text-lg md:text-xl lg:text-2xl font-normal text-white py-2 px-4 md:px-5 bg-white/[0.09] rounded-xl backdrop-blur-[10px] mb-6" data-node="hero_tag" data-node-type="text" data-node-label="Hero Tagline" data-node-default="Marketing that works">
      {{hero_tag}}
    </div>

    <h1 class="font-['Cabin'] text-[28px] md:text-[40px] lg:text-[52px] xl:text-[64px] font-medium leading-[95%] md:leading-[105%] text-white mb-6 md:mb-8" data-node="hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="Strategy-led growth for brands that want measurable outcomes.">
      {{hero_title}}
    </h1>

    <p class="font-['Cabin'] text-lg md:text-xl lg:text-2xl font-normal text-[#7e7e7e] mb-8 md:mb-10" data-node="hero_subtext" data-node-type="textarea" data-node-label="Hero Description" data-node-default="We help businesses attract the right audience, convert intent into action, and scale sustainably using data-backed marketing systems; not guesswork.">
      {{hero_subtext}}
    </p>

    <!-- CTA BUTTON -->
    <a href="{{hero_cta_link}}" class="w-fit h-12 h-fit rounded-xl bg-[#d3ff5b] p-[7.5px_13.5px] md:p-[8.5px_14.5px] flex justify-center items-center gap-3 mx-auto font-['Cabin'] text-[15px] md:text-xl lg:text-[22px] xl:text-2xl text-black transition-opacity duration-300 hover:opacity-85" data-node="hero_cta_link" data-node-type="page_links" data-node-label="Hero CTA Link" data-node-default="#">
      <span data-node="hero_cta_text" data-node-type="text" data-node-label="Hero CTA Text" data-node-default="Let's Build Your Growth Engine">
        {{hero_cta_text}}
      </span>

      <img src="{{hero_cta_icon}}" class="h-auto " data-node="hero_cta_icon" data-node-type="file" data-node-label="Hero CTA Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362090/seltrix/templates/portfolio-template/Hero%20btn%20arrw.svg">
    </a>
  </div>

  <!-- ===========================================
     VIDEO SECTION
=========================================== -->
  <div class="w-full px-4 md:px-16 lg:px-24 mt-16 md:mt-20 relative z-[5]">
    <div class="video-thumb relative w-full rounded-[22px] md:rounded-[28px] lg:rounded-[30px] xl:rounded-[36px] overflow-hidden cursor-pointer" id="videoThumbnail">
      <img src="{{hero_video_thumb}}" class="w-full block rounded-[22px] md:rounded-[28px] lg:rounded-[30px] xl:rounded-[36px]" data-node="hero_video_thumb" data-node-type="file" data-node-label="Video Thumbnail" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879875/seltrix/templates/portfolio-template/Hero-video-banner.webp">

      <!-- PLAY BUTTON -->
      <button class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[140px] sm:w-[160px] md:w-[180px] lg:w-[200px] xl:w-[226px] h-auto rounded-[13px] border-none flex justify-center items-center cursor-pointer" id="playVideoBtn">
        <img src="{{hero_play_icon}}" class="w-full" data-node="hero_play_icon" data-node-type="file" data-node-label="Play Button Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362154/seltrix/templates/portfolio-template/play%20icon.svg">
      </button>
    </div>

    <!-- VIDEO PLAYER -->
    <video id="heroVideo" class="w-full rounded-[22px] md:rounded-[28px] lg:rounded-[30px] xl:rounded-[36px] hidden" controls>
      <source src="{{hero_video_url}}" type="video/mp4" data-node="hero_video_url" data-node-type="url" data-node-label="Hero Video URL" data-node-default="https://www.w3schools.com/html/mov_bbb.mp4">
    </video>
  </div>

  <!-- ===========================================
     VIDEO PLAY SCRIPT
=========================================== -->
  
</section>