<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <div class="hero_blob"></div>
  <div class="hero_blob_two"></div>
  <div class="hero_inner">
    <div class="hero_meta">
      <div class="hero_meta_dot"></div>
      <p class="hero_meta_text">Free shipping over $50 · New drop live</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_title_accent">Everyday goods</span>
      <span class="hero_title_rest"> that actually spark joy.</span>
    </h1>
    <p class="hero_subtitle">Small-batch homeware, snacks, and desk buddies picked by real humans. Order today, obsess over it by Friday.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#shop">Shop the drop</a>
      <a class="hero_button_secondary" href="#bestsellers">Browse bestsellers</a>
    </div>
    <div class="hero_visual"></div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  background-color:#fbf7f0;
  padding:120px 24px;
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

.hero_blob {
  pointer-events:none;
  position:absolute;
  top:-96px;
  right:8%;
  width:288px;
  height:288px;
  border-radius:9999px;
  background-color:#ff5a5f;
  opacity:0.10;
}

.hero_blob_two {
  pointer-events:none;
  position:absolute;
  bottom:-64px;
  left:6%;
  width:224px;
  height:224px;
  border-radius:42%;
  background-color:#ff5a5f;
  opacity:0.07;
}

.hero_inner {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:768px;
}

.hero_meta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  border:1.5px solid #ffd0d1;
  background-color:#ffffff;
  border-radius:9999px;
  padding:8px 16px;
  box-shadow:0 2px 0 rgba(255,90,95,0.12);
}

.hero_meta_dot {
  width:10px;
  height:10px;
  border-radius:9999px;
  background-color:#ff5a5f;
}

.hero_meta_text {
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.04em;
  color:#5a5147;
}

.hero_title {
  margin:0;
  font-size:clamp(2.75rem,7vw,4.75rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.03em;
  color:#1f1a15;
}

.hero_title_accent {
  color:#ff5a5f;
}

.hero_title_rest {
  color:#1f1a15;
}

.hero_subtitle {
  margin:24px auto 0;
  max-width:560px;
  font-size:19px;
  line-height:1.6;
  color:#5a5147;
}

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

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background-color:#ff5a5f;
  padding:16px 32px;
  font-size:16px;
  font-weight:700;
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 6px 0 #d6383d;
  transition:transform 0.15s ease;
}

.hero_button_secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:2px solid #1f1a15;
  background-color:transparent;
  padding:14px 30px;
  font-size:16px;
  font-weight:700;
  color:#1f1a15;
  text-decoration:none;
}

.hero_visual {
  margin-top:64px;
  width:100%;
  max-width:672px;
  min-height:320px;
  border-radius:32px;
  border:1.5px solid #efe6d8;
  background:linear-gradient(135deg,#fff5f5 0%,#ffe3e4 45%,#ffd0d1 100%);
  box-shadow:0 24px 60px -24px rgba(255,90,95,0.35);
}
</style>