.article-hero {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff; text-align: center; padding: 4rem 1.5rem;
}
.article-hero .date { font-size: .85rem; opacity: .8; margin-bottom: .8rem; }
.article-hero h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; line-height: 1.3; }

.article-body {
  max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem;
  color: #333; line-height: 1.9; font-size: 1rem;
}
.article-body h2 {
  font-size: 1.3rem; font-weight: 800;
  margin: 2.5rem 0 1rem;
  padding-left: .8rem;
  border-left: 4px solid #f5576c;
}
.article-body h3 { font-size: 1.1rem; font-weight: 700; margin: 1.8rem 0 .6rem; color: #444; }
.article-body p  { margin-bottom: 1.2rem; }
.article-body ul { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.article-body li { margin-bottom: .4rem; }

.article-footer {
  max-width: 760px; margin: 0 auto; padding: 0 1.5rem 3rem;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.btn-back-articles {
  display: inline-block; text-decoration: none;
  background: #f0f0f0; color: #555; font-weight: 600;
  padding: .6rem 1.5rem; border-radius: 50px; font-size: .9rem;
  transition: background .2s;
}
.btn-back-articles:hover { background: #e0e0e0; color: #333; }
.btn-start {
  display: inline-block; text-decoration: none;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: #fff; font-weight: 700;
  padding: .6rem 1.5rem; border-radius: 50px; font-size: .9rem;
  box-shadow: 0 4px 14px rgba(245,87,108,.35);
  transition: opacity .2s;
}
.btn-start:hover { opacity: .85; color: #fff; }