<template>
  <section class="marketing-page">
    <div class="hero">
      <p class="eyebrow">Browser-Minispiele</p>
      <h1>Kurze Spielrunden, klare Ziele und direkte Action mit Match 3 und Taxi.</h1>
      <p class="lead">
        Die Minispiele auf YourPart liefern schnelle Abwechslung direkt im Browser und erweitern die Plattform um
        spielbare Casual-Formate.
      </p>
      <router-link class="cta" to="/">Zur Startseite</router-link>
    </div>

    <div class="cards">
      <article>
        <h2>Match 3</h2>
        <p>Das klassische Puzzle-Prinzip mit Kampagnenstruktur für Spielerinnen und Spieler, die kurze Sessions lieben.</p>
      </article>
      <article>
        <h2>Taxi</h2>
        <p>Fahre Passagiere effizient ans Ziel und verbessere deine Kontrolle, Streckenwahl und Reaktionsfähigkeit.</p>
      </article>
    </div>
  </section>
</template>

<style scoped>
.marketing-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px 72px;
  color: #17323a;
}

.hero {
  padding: 32px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 35%),
    linear-gradient(135deg, #d4f0e6 0%, #7dd0be 40%, #2e8b83 100%);
  box-shadow: 0 20px 60px rgba(13, 84, 93, 0.18);
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
}

.lead {
  max-width: 760px;
  margin: 20px 0 0;
  font-size: 1.1rem;
  line-height: 1.65;
}

.cta {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #17323a;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.cards article {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: #effaf6;
  border: 1px solid rgba(23, 50, 58, 0.08);
}

.cards h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.cards p {
  margin: 0;
  line-height: 1.65;
}
</style>
