<section class="hero-app-wrap">
  <div class="hero-app-text">
    <div class="hero-eyebrow">Launching soon</div>
    <h1 class="hero-title" style="text-align:left">Your product,<br/>shipped faster.</h1>
    <p class="hero-sub" style="text-align:left">Stop spending weeks on UI foundations. Use proven patterns and focus on what makes your product unique.</p>
    <div class="hero-actions" style="justify-content:flex-start">
      <a href="#" class="btn btn-primary">Request access →</a>
    </div>
  </div>
  <div class="hero-app-mockup">
    <div class="mockup-browser">
      <div class="mockup-bar">
        <span class="dot red"></span>
        <span class="dot yellow"></span>
        <span class="dot green"></span>
        <div class="mockup-url">motiff-alpha.vercel.app</div>
      </div>
      <div class="mockup-screen"></div>
    </div>
  </div>
</section>

<style>
.hero-app-wrap {
  display: grid; grid-template-columns: 1fr 1.2fr;
  align-items: center; gap: 4rem;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem);
  max-width: 1200px; margin: 0 auto;
}
.hero-app-text { display: flex; flex-direction: column; gap: 1.5rem; }
.mockup-browser { border: 1px solid var(--border); border-radius: 0.875rem; overflow: hidden; background: var(--surface); box-shadow: 0 24px 64px rgba(0,0,0,0.08); }
.mockup-bar { display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.dot.red { background: #EF4444; }
.dot.yellow { background: #F59E0B; }
.dot.green { background: #22C55E; }
.mockup-url { flex: 1; text-align: center; font-size: 0.75rem; color: var(--muted); background: var(--border); padding: 0.2rem 0.75rem; border-radius: 9999px; }
.mockup-screen { height: 300px; background: var(--bg); }
@media (max-width: 768px) { .hero-app-wrap { grid-template-columns: 1fr; } }
</style>