/* ── Blog-specific styles ── */
    .blog-page { max-width: 1280px; margin: 0 auto; padding: 64px 40px 100px; }

    /* ── Page header ── */
    .blog-page-header { margin-bottom: 56px; }
    .blog-page-header .section-label { margin-bottom: 10px; }
    .blog-page-header h1 {
      font-size: 40px;
      font-weight: 800;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 14px;
    }
    .blog-page-header p { font-size: 16px; color: var(--muted); max-width: 520px; }

    /* ── Filter tags ── */
    .blog-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 48px;
    }
    .blog-filter-tag {
      padding: 7px 16px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: border-color .2s, color .2s, background .2s;
      text-decoration: none;
    }
    .blog-filter-tag:hover { border-color: rgba(112,73,243,.5); color: var(--white); }
    .blog-filter-tag.active {
      background: rgba(112,73,243,.15);
      border-color: var(--purple);
      color: var(--white);
    }

    /* ── Featured article (top hero card) ── */
    .blog-featured {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 40px;
      text-decoration: none;
      transition: border-color .2s, transform .2s;
    }
    .blog-featured:hover { border-color: rgba(112,73,243,.4); transform: translateY(-3px); }

    .blog-featured-img {
      min-height: 340px;
      max-height: 340px;
      background: linear-gradient(135deg, #1a0f35 0%, #0d0a20 60%, #120d2a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .blog-featured-img::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 40% 60%, rgba(112,73,243,.35) 0%, transparent 65%);
    }
    .blog-featured-img .article-emoji {
      font-size: 72px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 30px rgba(112,73,243,.6));
    }

    .blog-featured-body {
      padding: 44px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .blog-featured-body .article-category {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--purple-bright);
      margin-bottom: 14px;
    }
    .blog-featured-body h2 {
      font-size: 26px;
      font-weight: 800;
      color: var(--white);
      line-height: 1.3;
      margin-bottom: 14px;
    }
    .blog-featured-body p {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 28px;
    }
    .blog-featured-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 13px;
      color: var(--muted);
    }
    .blog-featured-meta .dot { opacity: .4; }

    /* ── Articles grid ── */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 48px;
    }

    .article-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      transition: border-color .2s, transform .2s;
    }
    .article-card:hover { border-color: rgba(112,73,243,.4); transform: translateY(-3px); }

    .article-card-thumb {
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    /* Уникальный градиент для каждой категории */
    .thumb-guide    { background: linear-gradient(135deg, #0f1a30 0%, #0a1220 100%); }
    .thumb-case     { background: linear-gradient(135deg, #1a0f2e 0%, #0f0a1e 100%); }
    .thumb-news     { background: linear-gradient(135deg, #0f1e1a 0%, #0a1510 100%); }
    .thumb-tips     { background: linear-gradient(135deg, #1e180f 0%, #150e0a 100%); }
    .thumb-featured { background: linear-gradient(135deg, #1a0f35 0%, #0d0a20 100%); }

    .article-card-thumb::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 70%, rgba(112,73,243,.2) 0%, transparent 65%);
    }
    .article-card-thumb .article-emoji {
      font-size: 44px;
      position: relative;
      z-index: 1;
    }

    .article-card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
    .article-category {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--purple-bright);
      margin-bottom: 10px;
    }
    .article-card-body h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.4;
      margin-bottom: 10px;
    }
    .article-card-body p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
      flex: 1;
      margin-bottom: 18px;
    }
    .article-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
    }
    .article-meta .dot { opacity: .35; }
    .read-time {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .read-time svg { opacity: .5; }

    /* ── Load more ── */
    .blog-load-more {
      text-align: center;
      padding-top: 8px;
    }
    .btn-load-more {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: border-color .2s, color .2s;
    }
    .btn-load-more:hover { border-color: rgba(112,73,243,.4); color: var(--white); }

    /* ── Newsletter block ── */
    .blog-newsletter {
      background: linear-gradient(135deg, var(--card), #180d35);
      border: 1px solid rgba(112,73,243,.2);
      border-radius: 20px;
      padding: 52px 48px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: center;
      margin-top: 64px;
      position: relative;
      overflow: hidden;
    }
    .blog-newsletter::before {
      content: '';
      position: absolute;
      right: -80px;
      top: -80px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(112,73,243,.18), transparent 70%);
      pointer-events: none;
    }
    .blog-newsletter h3 { font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
    .blog-newsletter p { font-size: 15px; color: var(--muted); }
    .newsletter-form { display: flex; gap: 10px; position: relative; z-index: 1; }
    .newsletter-input {
      padding: 12px 18px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255,255,255,.04);
      color: var(--white);
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      outline: none;
      width: 260px;
      transition: border-color .2s;
    }
    .newsletter-input::placeholder { color: var(--muted); }
    .newsletter-input:focus { border-color: var(--purple); }

    /* ── Responsive ── */
    @media (max-width: 960px) {
      .blog-featured { grid-template-columns: 1fr; }
      .blog-featured-img { min-height: 220px;max-height: 220px; }
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
      .blog-newsletter { grid-template-columns: 1fr; }
      .newsletter-form { flex-direction: column; }
      .newsletter-input { width: 100%; }
    }
    @media (max-width: 640px) {
      .blog-page { padding: 48px 20px 80px; }
      .blog-page-header h1 { font-size: 28px; }
      .blog-grid { grid-template-columns: 1fr; }
      .blog-newsletter { padding: 36px 24px; }
      .blog-newsletter h3 { font-size: 20px; }
    }