Features Grid 02

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="features_component">
  <div class="features_inner">
    <div class="features_head">
      <div class="features_chip">Why teams love it</div>
      <h2 class="features_title">Everything you need to ship faster, minus the busywork.</h2>
      <p class="features_sub">Six thoughtful building blocks that keep your workflow calm, fast, and genuinely fun to use every single day.</p>
    </div>
    <div class="features_grid">
      <div class="feature_card">
        <div class="feature_icon">
          <img class="feature_glyph" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-features-grid-playful-tokens-2-1-12.webp" alt="Speed icon" />
        </div>
        <h3 class="feature_name">Lightning setup</h3>
        <p class="feature_text">Go from empty page to live project in under two minutes. No config files, no headaches, no manual required.</p>
      </div>
      <div class="feature_card">
        <div class="feature_icon">
          <img class="feature_glyph" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-features-grid-playful-tokens-2-2-13.webp" alt="Collaboration icon" />
        </div>
        <h3 class="feature_name">Real-time teamwork</h3>
        <p class="feature_text">Comment, react, and edit together live. Everyone stays in sync without a single "latest-final-v3" file in sight.</p>
      </div>
      <div class="feature_card">
        <div class="feature_icon">
          <img class="feature_glyph" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-features-grid-playful-tokens-2-3-14.webp" alt="Security icon" />
        </div>
        <h3 class="feature_name">Locked-down safe</h3>
        <p class="feature_text">Bank-grade encryption and granular permissions keep your data yours. Sleep easy knowing everything is buttoned up.</p>
      </div>
      <div class="feature_card">
        <div class="feature_icon">
          <img class="feature_glyph" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-features-grid-playful-tokens-2-4-15.webp" alt="Analytics icon" />
        </div>
        <h3 class="feature_name">Insights that click</h3>
        <p class="feature_text">Beautiful dashboards turn raw numbers into obvious next moves. Spot what's working and double down with confidence.</p>
      </div>
      <div class="feature_card">
        <div class="feature_icon">
          <img class="feature_glyph" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-features-grid-playful-tokens-2-5-16.webp" alt="Integrations icon" />
        </div>
        <h3 class="feature_name">Plays with everything</h3>
        <p class="feature_text">Connect the tools you already love in a couple of clicks. Over 120 native integrations and a friendly open API.</p>
      </div>
      <div class="feature_card">
        <div class="feature_icon">
          <img class="feature_glyph" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-features-grid-playful-tokens-2-6-17.webp" alt="Support icon" />
        </div>
        <h3 class="feature_name">Humans on standby</h3>
        <p class="feature_text">Real people answer in minutes, not days. No scripted bots, no ticket black holes, just helpful humans who care.</p>
      </div>
    </div>
  </div>
</section>

<style>
.features_component {
  width:100%;
  background:#fdf7ec;
  padding:96px 24px;
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;
  box-sizing:border-box;
}

.features_inner {
  max-width:1160px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

.features_head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:64px;
  gap:20px;
}

.features_chip {
  display:inline-flex;
  align-items:center;
  background:#b5e848;
  color:#141410;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:8px 16px;
  border-radius:999px;
}

.features_title {
  color:#141410;
  font-size:46px;
  line-height:1.05;
  font-weight:800;
  max-width:620px;
  margin:0;
}

.features_sub {
  color:#5b5b52;
  font-size:18px;
  line-height:1.55;
  max-width:500px;
  margin:0;
}

.features_grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.feature_card {
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border-radius:28px;
  padding:32px;
  border:2px solid #141410;
  box-shadow:6px 6px 0 #141410;
}

.feature_icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:18px;
  background:#b5e848;
  border:2px solid #141410;
  margin-bottom:24px;
}

.feature_glyph {
  width:30px;
  height:30px;
  object-fit:contain;
}

.feature_name {
  color:#141410;
  font-size:21px;
  font-weight:700;
  margin:0 0 10px 0;
}

.feature_text {
  color:#5b5b52;
  font-size:15px;
  line-height:1.6;
  margin:0;
}
</style>