<section data-component-type="Hero" class="bg-white py-16 lg:py-24" data-component-slug="ss-dental-team-hero">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <div class="flex flex-col items-center text-center max-w-2xl mx-auto">
      <!-- Badge -->
      <span data-node="team_hero_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Team" class="inline-block px-4 py-1.5 mb-6 text-sm font-medium text-gray-600 bg-gray-100 rounded-full border border-gray-200">{{team_hero_badge}}</span>

      <!-- Title -->
      <h1 data-node="team_hero_title" data-node-type="textarea" data-node-label="Title" data-node-default="Meet the Experts Behind Trusted Medical Care" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-6">
        {{team_hero_title}}
      </h1>

      <!-- Description -->
      <p data-node="team_hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="Our team brings together experienced doctors, specialists, and clinical leaders dedicated to patient-first healthcare. Each professional combines medical excellence with compassion." class="text-[#617280] text-base lg:text-lg leading-relaxed mb-8 max-w-xl">
        {{team_hero_description}}
      </p>

      <!-- CTA Button -->
      <a data-node="team_hero_cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#team-grid" href="{{team_hero_cta_url}}" class="inline-flex items-center px-6 py-3 bg-[#007C8A] text-white font-semibold rounded-lg hover:bg-[#006670] transition-all text-sm shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
        <span data-node="team_hero_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="View Our Specialists">{{team_hero_cta_text}}</span>
      </a>
    </div>
  </div>
</section>