Features Grid 04

<!-- 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">
      <p class="features_pill">Built for scale</p>
      <h2 class="features_title">Everything your store needs to sell more</h2>
      <p class="features_sub">One platform for inventory, checkout, and fulfillment — engineered to keep pace with your busiest sales days without a single dropped order.</p>
    </div>
    <div class="features_grid">
      <div class="features_card">
        <div class="features_icon">⚡</div>
        <h3 class="features_card_title">Instant checkout</h3>
        <p class="features_card_desc">A one-tap payment flow that clears carts in under two seconds and recovers the shoppers most stores lose at the final step.</p>
      </div>
      <div class="features_card">
        <div class="features_icon">◪</div>
        <h3 class="features_card_title">Live inventory</h3>
        <p class="features_card_desc">Stock counts sync across every channel the moment an order lands, so you never oversell a hero product on launch day again.</p>
      </div>
      <div class="features_card">
        <div class="features_icon">➤</div>
        <h3 class="features_card_title">Smart fulfillment</h3>
        <p class="features_card_desc">Orders route to the closest warehouse automatically, cutting delivery windows and shipping spend without any manual triage.</p>
      </div>
      <div class="features_card">
        <div class="features_icon">◲</div>
        <h3 class="features_card_title">Revenue insights</h3>
        <p class="features_card_desc">A dashboard that surfaces your best sellers, margin leaks, and repeat-buyer trends in plain numbers you can act on today.</p>
      </div>
      <div class="features_card">
        <div class="features_icon">✦</div>
        <h3 class="features_card_title">Loyalty engine</h3>
        <p class="features_card_desc">Automated rewards and tiered perks that turn one-time buyers into regulars, all configured without writing a line of code.</p>
      </div>
      <div class="features_card">
        <div class="features_icon">⛨</div>
        <h3 class="features_card_title">Fraud shield</h3>
        <p class="features_card_desc">Risky transactions are flagged and held before they cost you a chargeback, with every decision logged for your records.</p>
      </div>
    </div>
  </div>
</section>

<style>
.features_component {
  background-color:#7a1420;
  width:100%;
  padding:120px 24px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

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

.features_head {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  margin-bottom:72px;
  max-width:720px;
}

.features_pill {
  display:inline-block;
  background-color:#ffd400;
  color:#7a1420;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:8px 16px;
  border-radius:999px;
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.features_title {
  color:#ffffff;
  font-size:64px;
  line-height:0.95;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-stretch:condensed;
}

.features_sub {
  color:#f2c9ce;
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

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

.features_card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  background-color:#8f1c2a;
  border:1px solid #a5303d;
  border-radius:18px;
  padding:36px;
  transition:transform 0.25s ease,border-color 0.25s ease;
}

.features_icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background-color:#ffd400;
  border-radius:14px;
  color:#7a1420;
  font-size:26px;
  font-weight:800;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.features_card_title {
  color:#ffffff;
  font-size:24px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.features_card_desc {
  color:#e6b7bd;
  font-size:15px;
  line-height:1.6;
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
}
</style>