<!-- 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_glow"></div>
  <nav class="hero_meta">
    <p class="hero_eyebrow">Botanical Skincare · Est. 2019</p>
    <p class="hero_metaright">Carbon-neutral · Refillable</p>
  </nav>
  <div class="hero_wordmark">
    <h1 class="hero_title">
      <span class="hero_titleaccent">Verdé</span>
    </h1>
    <p class="hero_sub">Cold-pressed serums and slow-made balms, formulated from wild-harvested forest botanicals for skin that feels genuinely alive.</p>
  </div>
  <div class="hero_footer">
    <a class="hero_ctaprimary" href="#shop">Shop the collection</a>
    <a class="hero_ctaghost" href="#ritual">Find your ritual</a>
    <img class="hero_avatar" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-forest-organic-ecommerce-18-1-12.webp" alt="Verdé botanical serum bottle" />
    <p class="hero_proof">Loved by 40,000+ / 4.9★ average review</p>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  overflow:hidden;
  background-color:#07221d;
  padding:6rem 1.5rem;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-family:Georgia,'Times New Roman',serif;
  box-sizing:border-box;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  top:-10rem;
  right:-10%;
  width:520px;
  height:520px;
  border-radius:9999px;
  background-color:#8fe388;
  opacity:0.14;
  filter:blur(120px);
}

.hero_meta {
  position:relative;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid #1c3b34;
  padding-bottom:1.5rem;
}

.hero_eyebrow {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.34em;
  color:#8fe388;
}

.hero_metaright {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.28em;
  color:#7c968e;
}

.hero_wordmark {
  position:relative;
  z-index:10;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:center;
  padding:3rem 0;
}

.hero_title {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:300;
  line-height:0.86;
  letter-spacing:-0.02em;
  color:#f3f7ef;
  font-size:clamp(4rem,20vw,17rem);
}

.hero_titleaccent {
  font-style:italic;
  color:#8fe388;
}

.hero_sub {
  margin:2rem 0 0 0;
  max-width:34rem;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.15rem;
  line-height:1.65;
  color:#c6d4cb;
}

.hero_footer {
  position:relative;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  border-top:1px solid #1c3b34;
  padding-top:2rem;
}

.hero_ctaprimary {
  display:inline-flex;
  align-items:center;
  background-color:#8fe388;
  color:#07221d;
  padding:1rem 2rem;
  border-radius:9999px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.16em;
  text-decoration:none;
  transition:transform 0.25s ease;
}

.hero_ctaghost {
  display:inline-flex;
  align-items:center;
  background-color:transparent;
  color:#f3f7ef;
  padding:1rem 2rem;
  border-radius:9999px;
  border:1px solid #3a5a52;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.16em;
  text-decoration:none;
  transition:border-color 0.25s ease;
}

.hero_avatar {
  margin-left:0.5rem;
  width:56px;
  height:56px;
  border-radius:9999px;
  object-fit:cover;
  border:2px solid #1c3b34;
}

.hero_proof {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.8rem;
  line-height:1.4;
  color:#7c968e;
}
</style>