<!-- 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>
  <div class="hero_inner">
    <div class="hero_eyebrow">
      <div class="hero_dot"></div>
      <p class="hero_eyebrow_text">Regenerative Brand Studio</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_title_accent">Growth</span>
      <span class="hero_title_rest"> that leaves the world greener than we found it.</span>
    </h1>
    <p class="hero_subtitle">We craft brands, digital products, and campaigns for companies building a more sustainable future — strategy, design, and story rooted in purpose.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start a Project</a>
      <a class="hero_button_secondary" href="#work">View Our Work</a>
    </div>
    <div class="hero_visual"></div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-color:#07221d;
  padding:9rem 1.5rem;
  text-align:center;
  font-family:Georgia,'Times New Roman',serif;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:-14rem;
  width:36rem;
  height:36rem;
  transform:translateX(-50%);
  border-radius:9999px;
  background:radial-gradient(circle,#8fe388 0%,rgba(143,227,136,0) 70%);
  opacity:0.22;
  filter:blur(120px);
}

.hero_inner {
  position:relative;
  z-index:10;
  margin:0 auto;
  display:flex;
  width:100%;
  max-width:52rem;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}

.hero_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  border:1px solid rgba(143,227,136,0.3);
  background-color:#0d2f27;
  border-radius:9999px;
  padding:0.5rem 1.1rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:#8fe388;
}

.hero_dot {
  width:0.45rem;
  height:0.45rem;
  border-radius:9999px;
  background-color:#8fe388;
  box-shadow:0 0 0 4px rgba(143,227,136,0.18);
}

.hero_eyebrow_text {
  margin:0;
  letter-spacing:0.24em;
}

.hero_title {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(2.75rem,6vw,5rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#f4f9f0;
}

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

.hero_title_rest {
  color:#f4f9f0;
}

.hero_subtitle {
  margin:0;
  max-width:38rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:1.12rem;
  line-height:1.7;
  color:#b8ccc2;
}

.hero_actions {
  margin-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background-color:#8fe388;
  padding:0.95rem 1.9rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.95rem;
  font-weight:600;
  color:#07221d;
  text-decoration:none;
  box-shadow:0 12px 30px -10px rgba(143,227,136,0.5);
}

.hero_button_secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(143,227,136,0.35);
  background-color:transparent;
  padding:0.95rem 1.9rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.95rem;
  font-weight:600;
  color:#f4f9f0;
  text-decoration:none;
}

.hero_visual {
  margin-top:1.5rem;
  width:100%;
  max-width:30rem;
  height:3rem;
  border-radius:9999px;
  background:linear-gradient(90deg,rgba(143,227,136,0.05),rgba(143,227,136,0.22),rgba(143,227,136,0.05));
  border:1px solid rgba(143,227,136,0.15);
}
</style>