.articles-hero {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff; text-align: center; padding: 4rem 1rem;
}
.articles-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; }
.articles-hero p  { font-size: 1rem; opacity: .9; margin-top: .6rem; }

.articles-list { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; }

.article-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  padding: 1.8rem 2rem; margin-bottom: 1.4rem;
  transition: transform .2s, box-shadow .2s;
  border-left: 5px solid #f5576c;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.12); color: inherit; }
.article-card .date { font-size: .8rem; color: #aaa; margin-bottom: .4rem; }
.article-card h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .5rem; color: #222; }
.article-card p  { font-size: .9rem; color: #666; margin: 0; line-height: 1.6; }