body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f8f9fa;
  color: #333;
}

.showcase-page {
  padding: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.showcase-hero {
  background: linear-gradient(135deg, #008c95, #2474b8);
  color: white;
  padding: 38px;
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.showcase-hero h1 {
  margin: 0 0 10px;
  font-size: 2.4rem;
}

.showcase-hero p {
  margin: 0;
  font-size: 1.15rem;
}

.showcase-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.showcase-card h2 {
  color: #17465c;
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 3px solid #e3fbfb;
  font-size: 1.7rem;
}

.info-card,
.outline-card,
.prototype-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 22px;
  margin: 18px 0;
  box-shadow: 0 6px 16px rgba(0, 80, 110, 0.08);
}

.info-card {
  border-left: 6px solid #008c95;
}

.outline-card {
  border-left: 6px solid #2474b8;
}

.prototype-card {
  background: #eef6fb;
  border-left: 6px solid #16a085;
}

.info-card h3,
.outline-card h3,
.prototype-card h3 {
  color: #17465c;
  margin-top: 0;
}

p {
  line-height: 1.65;
}

ul {
  line-height: 1.7;
  padding-left: 24px;
}

li {
  margin-bottom: 8px;
}

a {
  color: #2474b8;
  font-weight: bold;
  word-break: break-word;
}

a:hover {
  color: #008c95;
}

strong {
  color: #17465c;
}

@media (max-width: 700px) {
  .showcase-page {
    padding: 20px;
  }

  .showcase-hero {
    padding: 26px;
  }

  .showcase-hero h1 {
    font-size: 1.9rem;
  }

  .showcase-card,
  .info-card,
  .outline-card,
  .prototype-card {
    padding: 18px;
  }
}