Features Skill Bars

<section class="ws-features ws-skill-bars bg-[var(--ws-features-bg)] py-16">
  <div class="mx-auto grid max-w-6xl gap-12 px-6 lg:grid-cols-2 lg:items-center">
    <!-- Left: Intro -->
    <div>
      <p class="mb-3 text-sm font-semibold uppercase tracking-wider text-blue-600">Our Expertise</p>
      <h2 class="text-3xl font-bold text-[var(--ws-features-text)]">Technical capabilities that drive results</h2>
      <p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">Our team brings deep expertise across multiple domains, continuously pushing the boundaries of what's possible.</p>
      <div class="mt-8 grid grid-cols-2 gap-4">
        <div class="flex items-start gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-100">
            <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
          </div>
          <div>
            <h3 class="text-sm font-semibold text-[var(--ws-features-text)]">Innovation</h3>
            <p class="text-xs text-[var(--ws-features-text-muted)]">Cutting-edge solutions</p>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-100">
            <svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
          </div>
          <div>
            <h3 class="text-sm font-semibold text-[var(--ws-features-text)]">Security</h3>
            <p class="text-xs text-[var(--ws-features-text-muted)]">Enterprise-grade protection</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Right: Skill bars -->
    <div class="space-y-6">
      <div>
        <div class="mb-2 flex items-center justify-between">
          <span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Frontend Development</span>
          <span class="text-sm font-bold text-[var(--ws-features-text)]">92%</span>
        </div>
        <div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
          <div class="h-2.5 w-[92%] rounded-full bg-blue-500 transition-all duration-1000 ease-out"></div>
        </div>
      </div>
      <div>
        <div class="mb-2 flex items-center justify-between">
          <span class="text-sm font-medium text-[var(--ws-features-text-soft)]">UI/UX Design</span>
          <span class="text-sm font-bold text-[var(--ws-features-text)]">87%</span>
        </div>
        <div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
          <div class="h-2.5 w-[87%] rounded-full bg-emerald-500 transition-all duration-1000 ease-out"></div>
        </div>
      </div>
      <div>
        <div class="mb-2 flex items-center justify-between">
          <span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Backend Architecture</span>
          <span class="text-sm font-bold text-[var(--ws-features-text)]">78%</span>
        </div>
        <div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
          <div class="h-2.5 w-[78%] rounded-full bg-amber-500 transition-all duration-1000 ease-out"></div>
        </div>
      </div>
      <div>
        <div class="mb-2 flex items-center justify-between">
          <span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Cloud & DevOps</span>
          <span class="text-sm font-bold text-[var(--ws-features-text)]">85%</span>
        </div>
        <div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
          <div class="h-2.5 w-[85%] rounded-full bg-purple-500 transition-all duration-1000 ease-out"></div>
        </div>
      </div>
      <div>
        <div class="mb-2 flex items-center justify-between">
          <span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Machine Learning</span>
          <span class="text-sm font-bold text-[var(--ws-features-text)]">71%</span>
        </div>
        <div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
          <div class="h-2.5 w-[71%] rounded-full bg-rose-500 transition-all duration-1000 ease-out"></div>
        </div>
      </div>
    </div>
  </div>
</section>