:root {
  --blog-primary: #0c4a73;
  --blog-dark: #0b1f2a;
  --blog-muted: #657681;
  --blog-light: #f4f8fa;
  --blog-border: #dce6eb;
}

.blog-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(rgba(5, 28, 42, 0.74), rgba(5, 28, 42, 0.74)), url('../images/product_bg_image.jpg') center/cover no-repeat;
  padding: 70px 20px;
}
.blog-hero h1 { margin: 0 0 10px; font-size: clamp(34px, 5vw, 54px); line-height: 1.1; }
.blog-hero p { margin: 0 auto; max-width: 700px; font-size: 17px; opacity: .94; }

.blog-section { padding: 72px 20px; background: #fff; }
.blog-wrap { max-width: 1180px; margin: 0 auto; }
.blog-intro { text-align: center; max-width: 800px; margin: 0 auto 38px; }
.blog-intro h2 { color: var(--blog-dark); font-size: 32px; margin: 0 0 12px; }
.blog-intro p { color: var(--blog-muted); line-height: 1.75; margin: 0; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.blog-card {
  background: #fff;
  border: 1px solid var(--blog-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 45, 61, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 16px 35px rgba(15, 45, 61, .13); }
.blog-card img { width: 100%; height: 220px; object-fit: cover; }
.blog-card-body { padding: 24px; }
.blog-meta { color: var(--blog-muted); font-size: 13px; margin-bottom: 10px; }
.blog-card h2, .blog-card h3 { font-size: 21px; line-height: 1.35; margin: 0 0 12px; color: var(--blog-dark); }
.blog-card p { color: var(--blog-muted); line-height: 1.7; margin: 0 0 18px; }
.blog-read-more { color: var(--blog-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.blog-read-more:hover { text-decoration: underline; }

.article-shell { background: var(--blog-light); padding: 60px 20px 80px; }
.article-layout { max-width: 950px; margin: 0 auto; }
.article-card { background: #fff; border-radius: 12px; box-shadow: 0 10px 35px rgba(20, 52, 68, .08); overflow: hidden; }
.article-cover { width: 100%; height: min(430px, 45vw); min-height: 260px; object-fit: cover; }
.article-content { padding: 46px 54px; }
.article-content .blog-meta { margin-bottom: 14px; }
.article-content h1 { color: var(--blog-dark); font-size: clamp(30px, 5vw, 46px); line-height: 1.18; margin: 0 0 18px; }
.article-content h2 { color: var(--blog-dark); font-size: 26px; margin: 34px 0 12px; }
.article-content h3 { color: var(--blog-dark); font-size: 21px; margin: 28px 0 10px; }
.article-content p, .article-content li { color: #465963; line-height: 1.82; font-size: 16px; }
.article-content ul { padding-left: 22px; }
.article-content a { color: var(--blog-primary); }
.article-note { background: #eef6fa; border-left: 4px solid var(--blog-primary); padding: 18px 20px; margin: 28px 0; border-radius: 4px; }
.article-cta { margin-top: 42px; padding: 28px; background: #0b2d42; color: #fff; border-radius: 8px; }
.article-cta h2 { color: #fff; margin: 0 0 10px; }
.article-cta p { color: rgba(255,255,255,.85); margin: 0 0 18px; }
.article-cta a { display: inline-block; background: #fff; color: #0b2d42; padding: 11px 20px; border-radius: 5px; font-weight: 600; text-decoration: none; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .blog-section { padding: 52px 16px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card img { height: 205px; }
  .article-shell { padding: 35px 14px 55px; }
  .article-content { padding: 30px 22px; }
  .article-cover { min-height: 220px; height: 260px; }
  .blog-hero { min-height: 245px; }
}