<section class="hero-split">
  <div class="hero-split-text">
    <span class="hero-eyebrow">Design system</span>
    <h1 class="hero-title" style="text-align:left">Build interfaces<br/>that hold up.</h1>
    <p class="hero-sub" style="text-align:left">Stop rebuilding the same components. Start from patterns that are already tested, accessible, and production-ready.</p>
    <div class="hero-actions" style="justify-content:flex-start">
      <a href="#" class="btn btn-primary">Get started →</a>
      <a href="#" class="btn btn-secondary">See examples</a>
    </div>
    <div class="hero-social-proof">
      <div class="avatar-group">
        <div class="avatar avatar-fallback" style="width:2rem;height:2rem;font-size:0.625rem">A</div>
        <div class="avatar avatar-fallback" style="width:2rem;height:2rem;font-size:0.625rem">B</div>
        <div class="avatar avatar-fallback" style="width:2rem;height:2rem;font-size:0.625rem">C</div>
      </div>
      <span class="proof-text">Trusted by 2,400+ developers</span>
    </div>
  </div>
  <div class="hero-split-visual"></div>
</section>

<style>
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 80vh; align-items: center;
  gap: 4rem; padding: 4rem clamp(1rem, 5vw, 3rem);
  max-width: 1200px; margin: 0 auto;
}
.hero-split-text { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-split-visual {
  height: 480px; border-radius: 1.25rem;
  background: linear-gradient(135deg, #1A3A6A22, #3A8AAA22);
  border: 1px solid var(--border);
}
.hero-social-proof { display: flex; align-items: center; gap: 0.75rem; }
.proof-text { font-size: 0.875rem; color: var(--muted); }
@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-visual { height: 240px; }
}
</style>