<section class="w-full bg-black max-w-[90%] mx-auto relative overflow-hidden py-32 md:py-48 lg:py-52" data-component-type="Content" data-component-slug="portfolio-template-pricing">
  <!-- BACKGROUND IMAGE -->
  <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1765879870/seltrix/templates/portfolio-template/Frame%202147225398.png" class="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] max-w-[90%] pointer-events-none opacity-90">

  <!-- LABEL -->
  <div class="w-full flex justify-center mb-10">
    <div class="inline-block py-3 px-7 font-['Cabin'] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-normal text-white rounded-xl text-center relative bg-[rgba(20,20,20,0.55)] backdrop-blur-[18px] saturate-[120%] border border-white/[0.12] shadow-[0_0_25px_rgba(0,0,0,0.4),inset_0_0_10px_rgba(255,255,255,0.05)]" data-node="pricing_label" data-node-type="text" data-node-default="Pricing">
      {{pricing_label}}
    </div>
  </div>

  <!-- TITLE -->
  <h2 class="font-['Cabin'] text-[28px] sm:text-[36px] md:text-[44px] lg:text-[56px] font-medium leading-[105%] text-white text-center mt-6" data-node="pricing_title" data-node-type="text" data-node-default="Simple Plans. Clear Outcomes.">
    {{pricing_title}}
  </h2>

  <!-- DESCRIPTION -->
  <p class="font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-normal text-center text-[#7e7e7e] leading-[140%] max-w-[780px] mx-auto my-6 mb-20" data-node="pricing_description" data-node-type="text" data-node-default="Choose based on ambition, not confusion. Flexible plans designed for startups, scaling brands, and established businesses.">
    {{pricing_description}}
  </p>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-9">
    <!-- BASIC PLAN -->
    <div class="p-8 md:p-10 bg-white/[0.03] rounded-[20px] border border-white/[0.15] backdrop-blur-[12px]">
      <div class="font-['Cabin'] text-[16px] sm:text-[18px] lg:text-[20px] text-white" data-node="basic_title" data-node-type="text" data-node-default="Basic Plan">
        {{basic_title}}
      </div>

      <div class="font-['Cabin'] text-[28px] sm:text-[32px] md:text-[36px] lg:text-[40px] font-medium text-white mt-3.5" data-node="basic_price" data-node-type="text" data-node-default="$120/m">
        {{basic_price}}
      </div>

      <div class="text-[16px] font-medium mt-1.5 text-[#7e7e7e]" data-node="basic_sub" data-node-type="text" data-node-default="Best for early-stage brands.">
        {{basic_sub}}
      </div>

      <a class="w-full block py-4 px-6 bg-[#d3ff5b] text-black text-center text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] rounded-xl mt-7" data-node="basic_cta" data-node-type="text" data-node-default="Get Started">
        {{basic_cta}}
      </a>

      <div class="mt-7 text-[20px] font-medium text-white" data-node="basic_includes_title" data-node-type="text" data-node-default="What's included:">
        {{basic_includes_title}}
      </div>

      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-white" data-node="basic_includes_1" data-node-type="text" data-node-default="Brand Audit.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg">
        {{basic_includes_1}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-white" data-node="basic_includes_2" data-node-type="text" data-node-default="Core Messaging Framework.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg">
        {{basic_includes_2}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-white" data-node="basic_includes_3" data-node-type="text" data-node-default="A Website or Landing Page.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg">
        {{basic_includes_3}}
      </div>

      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="basic_not_includes_1" data-node-type="text" data-node-default="Basic SEO setup.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg">
        {{basic_not_includes_1}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="basic_not_includes_2" data-node-type="text" data-node-default="Content outline strategy.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg">
        {{basic_not_includes_2}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="basic_not_includes_3" data-node-type="text" data-node-default="Monthly performance report.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg">
        {{basic_not_includes_3}}
      </div>
    </div>

    <!-- STANDARD PLAN -->
    <div class="p-8 md:p-10 bg-white text-black rounded-[20px] border border-white/[0.15] backdrop-blur-[12px] relative mt-14 lg:mt-0">
      <div class="w-full bg-[#D3FF5B] text-black text-[20px] font-medium h-14 flex items-center justify-center absolute -top-[42px] left-0 rounded-t-[20px] z-[-10]" data-node="popular_label" data-node-type="text" data-node-default="Most Popular">
        {{popular_label}}
      </div>

      <div class="font-['Cabin'] text-[20px] text-black" data-node="standard_title" data-node-type="text" data-node-default="Standard Plan">
        {{standard_title}}
      </div>

      <div class="font-['Cabin'] text-[40px] font-medium text-black mt-3.5" data-node="standard_price" data-node-type="text" data-node-default="$250/m">
        {{standard_price}}
      </div>

      <div class="text-[16px] font-medium mt-1.5 text-[#7e7e7e]" data-node="standard_sub" data-node-type="text" data-node-default="Best for growing businesses.">
        {{standard_sub}}
      </div>

      <a class="w-full block py-4 px-6 bg-[#d3ff5b] text-black text-center text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] rounded-xl mt-7" data-node="standard_cta" data-node-type="text" data-node-default="Get Started">
        {{standard_cta}}
      </a>

      <div class="mt-7 text-[20px] font-medium text-black" data-node="standard_includes_title" data-node-type="text" data-node-default="What's included:">
        {{standard_includes_title}}
      </div>

      <div class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-black" data-node="standard_includes_1" data-node-type="text" data-node-default="Brand strategy & positioning.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg">
        {{standard_includes_1}}
      </div>
      <div class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-black" data-node="standard_includes_2" data-node-type="text" data-node-default="Optimised Sales funnels.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg">
        {{standard_includes_2}}
      </div>
      <div class="flex items-center gap-3 text-[20px] font-medium mt-2.5 text-black" data-node="standard_includes_3" data-node-type="text" data-node-default="SEO & content execution.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg">
        {{standard_includes_3}}
      </div>

      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="standard_not_includes_1" data-node-type="text" data-node-default="Paid campaign setup.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg">
        {{standard_not_includes_1}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="standard_not_includes_2" data-node-type="text" data-node-default="Conversion optimization.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg">
        {{standard_not_includes_2}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="standard_not_includes_3" data-node-type="text" data-node-default="Bi-weekly performance reviews.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg">
        {{standard_not_includes_3}}
      </div>
    </div>

    <!-- PRO PLAN -->
    <div class="p-8 md:p-10 pt-16 bg-white/[0.03] rounded-[20px] border border-white/[0.15] backdrop-blur-[12px]">
      <div class="font-['Cabin'] text-[16px] sm:text-[18px] lg:text-[20px] text-white" data-node="pro_title" data-node-type="text" data-node-default="Pro Plan">
        {{pro_title}}
      </div>

      <div class="font-['Cabin'] text-[28px] sm:text-[32px] md:text-[36px] lg:text-[40px] font-medium text-white mt-3.5" data-node="pro_price" data-node-type="text" data-node-default="$550/m">
        {{pro_price}}
      </div>

      <div class="text-[16px] font-medium mt-1.5 text-[#7e7e7e]" data-node="pro_sub" data-node-type="text" data-node-default="Best for scale-focused brands.">
        {{pro_sub}}
      </div>

      <a class="w-full block py-4 px-6 bg-[#d3ff5b] text-black text-center text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] rounded-xl mt-7" data-node="pro_cta" data-node-type="text" data-node-default="Get Started">
        {{pro_cta}}
      </a>

      <div class="mt-7 text-[20px] font-medium text-white" data-node="pro_includes_title" data-node-type="text" data-node-default="What's included:">
        {{pro_includes_title}}
      </div>

      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-white" data-node="pro_includes_1" data-node-type="text" data-node-default="Full growth strategy.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg"> {{pro_includes_1}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-white" data-node="pro_includes_2" data-node-type="text" data-node-default="Multi-channel execution.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg"> {{pro_includes_2}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-white" data-node="pro_includes_3" data-node-type="text" data-node-default="Advanced analytics tracking.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362094/seltrix/templates/portfolio-template/Included.svg"> {{pro_includes_3}}
      </div>

      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="pro_not_includes_1" data-node-type="text" data-node-default="Funnel optimization.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg"> {{pro_not_includes_1}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="pro_not_includes_2" data-node-type="text" data-node-default="Ongoing experimentation.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg"> {{pro_not_includes_2}}
      </div>
      <div class="flex items-center gap-3 text-[16px] sm:text-[18px] lg:text-[20px] font-medium mt-2.5 text-[#7e7e7e]" data-node="pro_not_includes_3" data-node-type="text" data-node-default="Dedicated growth partner support.">
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362150/seltrix/templates/portfolio-template/not%20included.svg"> {{pro_not_includes_3}}
      </div>
    </div>
  </div>
</section>