
<div class="unlocks-slide">
    <div class="kicker">
        The code and tools allow attendees to experiment with:
    </div>
<br/>

  <div class="grid">
    <div class="card">
      <div class="card-num">01</div>
      <div class="card-title">Reviews</div>
      <div class="card-body">Each one is a human with a reputation to lose.<br>A five-star rating means something again.</div>
    </div>
    <div class="card">
      <div class="card-num">02</div>
      <div class="card-title">Feeds</div>
      <div class="card-body">Humans only  or humans plus labeled agents.<br>You choose. Instead of guessing.</div>
    </div>
    <div class="card">
      <div class="card-num">03</div>
      <div class="card-title">Votes</div>
      <div class="card-body">One human, one vote.<br>Without handing anyone your passport.</div>
    </div>
    <div class="card">
      <div class="card-num">04</div>
      <div class="card-title">Money</div>
      <div class="card-body">Grants. Aid. Basic income.<br>Distributed to people  not to whoever spun up the most accounts.</div>
    </div>
    <div class="card pink-card">
      <div class="card-num">05</div>
      <div class="card-title">Agents</div>
      <div class="card-body">Software that books, pays, negotiates on your behalf.<br>Tethered to one verified human.</div>
    </div>
  </div>

  <div v-click class="kicker">
    None of these say "Web3" to the person using them.<br>
    They just feel like the internet working how you always assumed it did.
  </div>
</div>

<style scoped>
.unlocks-slide {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 3.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.unlocks-slide .eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
}
.unlocks-slide .headline {
  font-family: 'DM Serif Display', serif;
  font-size: 2.4rem;
  line-height: 1.1;
  color: #ffffff;
}
.unlocks-slide .rule {
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.5rem 0 1.75rem;
}
.unlocks-slide .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  width: 100%;
  max-width: 56rem;
}
.unlocks-slide .card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 1rem 0.85rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 9rem;
}
.unlocks-slide .card.pink-card {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
.unlocks-slide .card-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.4);
}
.unlocks-slide .card.pink-card .card-num { color: rgba(255, 255, 255, 0.85); }
.unlocks-slide .card-title {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: #ffffff;
}
.unlocks-slide .card-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.unlocks-slide .kicker {
  margin-top: 1.75rem;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  max-width: 38rem;
}
</style>

<!--
Using Trinity, the Polkadot Platform, coupled with the authentication primitives provided by Humanity, a lot of things can become possible.

At the summitnet, we're seeing a lot of applications being built, i've put a few on the slide. 

(CLICK)

None of these say Web3, they are just things people want to build because now it is possible to do it. 

Which brings me to what we can actually call this next phase.
-->
