<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <img class="hero_photo" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-dark-glow-ecommerce-30-1-12.webp" alt="Flagship wireless headphones in dark studio light" />
  <div class="hero_scrim"></div>
  <div class="hero_glow"></div>
  <div class="hero_inner">
    <div class="hero_eyebrow">New Drop · Aura X1 Series</div>
    <h1 class="hero_title">
      <span class="hero_title_accent">stays.</span>
    </h1>
    <p class="hero_subtitle">Adaptive noise cancellation, 40-hour battery, and studio-tuned drivers — engineered for the way you actually listen.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#shop">Shop Aura X1 — $249</a>
      <a class="hero_button_ghost" href="#film">Watch the film</a>
    </div>
    <ul class="hero_meta">
      <li class="hero_meta_item">Free 2-day shipping</li>
      <li class="hero_meta_item">30-night home trial</li>
      <li class="hero_meta_item">Rated 4.9 / 5 · 12k reviews</li>
    </ul>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:92vh;
  overflow:hidden;
  background:#05060a;
  display:flex;
  align-items:flex-end;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.hero_photo {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero_scrim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  background:linear-gradient(180deg,rgba(5,6,10,0.55) 0%,rgba(5,6,10,0.35) 40%,rgba(5,6,10,0.92) 100%);
}

.hero_glow {
  position:absolute;
  left:8%;
  bottom:18%;
  width:560px;
  height:560px;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(circle,rgba(0,229,192,0.28) 0%,rgba(0,229,192,0.08) 45%,rgba(0,229,192,0) 70%);
  filter:blur(20px);
}

.hero_inner {
  position:relative;
  z-index:3;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px 96px 32px;
}

.hero_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(0,229,192,0.35);
  background:rgba(0,229,192,0.06);
  color:#00e5c0;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
}

.hero_title {
  color:#ffffff;
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.02em;
  font-size:clamp(2.75rem,7vw,5.5rem);
  max-width:16ch;
  margin:0;
}

.hero_title_accent {
  color:#00e5c0;
}

.hero_subtitle {
  margin-top:24px;
  color:#a2a8b4;
  font-size:18px;
  line-height:1.6;
  max-width:46ch;
}

.hero_actions {
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:999px;
  background:#00e5c0;
  color:#05060a;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  box-shadow:0 0 32px rgba(0,229,192,0.45);
  transition:transform 0.2s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.04);
  color:#ffffff;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  transition:background 0.2s ease;
}

.hero_meta {
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:32px;
  row-gap:12px;
  list-style:none;
  padding:0;
  color:#7f8593;
  font-size:14px;
}

.hero_meta_item {
  display:flex;
  align-items:center;
  gap:8px;
}
</style>