<section class="hero-video">
  <video class="hero-video-bg" autoplay muted loop playsinline>
    <source src="your-video.mp4" type="video/mp4" />
  </video>
  <div class="hero-video-overlay"></div>
  <div class="hero-video-content">
    <h1 class="hero-title" style="color:#fff">Bold ideas.<br/>Clean execution.</h1>
    <p class="hero-sub" style="color:rgba(255,255,255,0.7)">Interface patterns built for teams who care about the craft.</p>
    <a href="#" class="btn" style="background:#fff;color:#1C1A17">Explore →</a>
  </div>
</section>

<style>
.hero-video {
  position: relative; min-height: 90vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.75));
  z-index: 1;
}
.hero-video-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1.5rem; padding: 2rem;
  max-width: 680px;
}
</style>