<!-- 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_visual"></div>
  <div class="hero_scrim"></div>
  <div class="hero_content">
    <nav class="hero_meta">
      <div class="hero_metadot"></div>
      <p class="hero_eyebrow">New · Spring drop 2026 — free shipping over $60</p>
    </nav>
    <h1 class="hero_title">
      <span class="hero_titleaccent">Everyday </span>
      <span class="hero_titleplain">essentials, shipped in hours not days.</span>
    </h1>
    <p class="hero_subline">A curated storefront built for speed — smart search, one-tap checkout, and delivery you can actually plan your day around.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#shop">Shop the collection</a>
      <a class="hero_button_ghost" href="#how">How delivery works</a>
    </div>
    <ul class="hero_proof">
      <li class="hero_proofitem">★ 4.9 from 12,400 reviews</li>
      <li class="hero_proofitem">2-hour local delivery in 40+ cities</li>
      <li class="hero_proofitem">30-day free returns</li>
    </ul>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#f7f8fa;
  padding:96px 64px;
  box-sizing:border-box;
  font-family:'Helvetica Neue',Arial,system-ui,sans-serif;
}

.hero_visual {
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(135deg,#0f4c3a 0%,#12362b 48%,#05100c 100%);
  background-size:cover;
}

.hero_scrim {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,rgba(3,17,12,0.85) 0%,rgba(3,17,12,0.30) 45%,rgba(3,17,12,0) 100%);
}

.hero_content {
  position:relative;
  z-index:2;
  width:100%;
  max-width:820px;
}

.hero_meta {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}

.hero_metadot {
  height:8px;
  width:8px;
  border-radius:9999px;
  background:#7fe3b8;
  box-shadow:0 0 12px rgba(127,227,184,0.9);
}

.hero_eyebrow {
  margin:0;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:#cdece0;
}

.hero_title {
  margin:0;
  font-size:clamp(3rem,7vw,5.75rem);
  font-weight:600;
  line-height:0.98;
  letter-spacing:-0.03em;
  color:#ffffff;
}

.hero_titleaccent {
  color:#7fe3b8;
}

.hero_titleplain {
  color:#ffffff;
}

.hero_subline {
  margin:24px 0 0;
  max-width:540px;
  font-size:18px;
  line-height:1.6;
  color:#dbe9e2;
}

.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;
  border-radius:9999px;
  background:#7fe3b8;
  padding:16px 32px;
  font-size:15px;
  font-weight:600;
  color:#05231a;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(127,227,184,0.28);
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.06);
  padding:16px 32px;
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  text-decoration:none;
  backdrop-filter:blur(8px);
}

.hero_proof {
  margin:40px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  column-gap:32px;
  row-gap:12px;
}

.hero_proofitem {
  font-size:14px;
  color:#bcd7cc;
}
</style>