.hero {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  padding: clamp(2.4rem, 4.5vw, 3.3rem) clamp(1rem, 5vw, 5%) 2.2rem;
}
.hero-inner { max-width: 1160px; margin: 0 auto; }
.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 0.55rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  max-width: 22ch;
}
.hero p { max-width: 64ch; opacity: 0.9; }
.blog-page { padding: 2rem clamp(1rem, 5vw, 5%) 3.2rem; }
.blog-wrap { max-width: 1160px; margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  position: relative;
}
.blog-card > * { position: relative; z-index: 2; }
.blog-card .card-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.blog-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-subtle); }
.blog-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body { padding: 1rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.blog-card h2 { font-size: 1rem; line-height: 1.35; color: var(--color-heading); letter-spacing: -0.01em; }
.blog-card p { font-size: 0.84rem; color: var(--color-muted); line-height: 1.65; }
.blog-read { margin-top: auto; font-size: 0.83rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.blog-read:hover { text-decoration: underline; }
.blog-cta {
  margin-top: 1.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  border-radius: 14px;
  padding: 1rem;
}
.blog-cta h3 { font-size: 1rem; color: var(--color-heading); margin-bottom: 0.35rem; }
.blog-cta p { color: var(--color-muted); font-size: 0.86rem; margin-bottom: 0.6rem; }
.blog-cta a {
  text-decoration: none;
  display: inline-flex;
  background: var(--color-primary);
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}
.blog-empty {
  margin: 0 0 1.4rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

@media (max-width: 992px) {
  .blog-grid { grid-template-columns: 1fr; }
}