/* ===== BLOG PAGE (listing + article) ===== */

  .page-hero.blog-hero{
    background:
      radial-gradient(ellipse 1000px 600px at 70% 0%, rgba(109,92,255,0.32), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 30%, rgba(0,212,255,0.12), transparent 60%),
      var(--bg-deep);
  }

  /* ---------- Blog listing grid ---------- */
  .blog-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1200px;margin:44px auto 0;
  }
  .blog-card{
    display:flex;flex-direction:column;
    background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
    overflow:hidden;transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .blog-card:hover{border-color:var(--purple-2);transform:translateY(-6px);box-shadow:0 25px 50px rgba(0,0,0,0.4);}
  .blog-card-img{height:220px;background-size:cover;background-position:center;position:relative;}
  .blog-card-img::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,10,10,0) 50%,rgba(10,10,10,0.55) 100%);
  }
  .blog-card-tag{
    position:absolute;top:16px;left:16px;z-index:2;
    background:rgba(10,10,10,0.55);backdrop-filter:blur(6px);
    color:var(--text-light);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    padding:6px 12px;border-radius:50px;border:1px solid rgba(255,255,255,0.15);
  }
  .blog-card-body{padding:24px;display:flex;flex-direction:column;flex:1;}
  .blog-card-meta{font-size:12px;color:var(--text-dim);margin-bottom:10px;display:flex;gap:8px;align-items:center;}
  .blog-card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-dim);}
  .blog-card-body h3{font-size:19px;margin-bottom:10px;line-height:1.3;}
  .blog-card-body p{color:var(--text-dim);font-size:13.5px;line-height:1.65;margin-bottom:18px;flex:1;}
  .blog-card-link{font-size:13.5px;font-weight:700;color:var(--purple-2);display:inline-flex;align-items:center;gap:6px;}
  .blog-card-link .arrow{transition:transform .25s ease;}
  .blog-card:hover .blog-card-link .arrow{transform:translateX(4px);}

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

  /* ---------- Blog article page ---------- */
  .blog-article-head{max-width:760px;margin:0 auto;text-align:center;}
  .blog-article-meta{
    display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
    color:var(--text-dim);font-size:13px;margin-top:14px;
  }
  .blog-article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-dim);}
  .blog-article-cover{
    max-width:980px;margin:38px auto 0;border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--card-border);aspect-ratio:16/8;
  }
  .blog-article-cover img{width:100%;height:100%;object-fit:cover;}

  .blog-article{
    max-width:740px;margin:48px auto 0;color:var(--text-dim);font-size:16.5px;line-height:1.85;
  }
  .blog-article p{margin-bottom:22px;}
  .blog-article h2{
    color:var(--text-light);font-size:26px;margin:44px 0 18px;line-height:1.3;
  }
  .blog-article h3{
    color:var(--text-light);font-size:20px;margin:32px 0 14px;
  }
  .blog-article ul, .blog-article ol{margin:0 0 22px 22px;}
  .blog-article li{margin-bottom:10px;}
  .blog-article li::marker{color:var(--purple-2);}
  .blog-article strong{color:var(--text-light);}
  .blog-article a{color:var(--purple-2);text-decoration:underline;text-underline-offset:3px;}
  .blog-article a:hover{color:var(--text-light);}
  .blog-article blockquote{
    margin:28px 0;padding:20px 26px;border-left:3px solid var(--purple-1);
    background:var(--card-bg);border-radius:0 12px 12px 0;font-style:italic;color:var(--text-light);
  }

  .blog-share{
    max-width:740px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  }
  .blog-share-label{font-size:13px;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
  .blog-share-links{display:flex;gap:10px;}
  .blog-share-links a{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--card-bg);border:1px solid var(--card-border);font-size:15px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .blog-share-links a:hover{border-color:var(--purple-2);transform:translateY(-3px);}

  .blog-back-link{
    max-width:740px;margin:0 auto 30px;display:block;font-size:14px;color:var(--text-dim);font-weight:600;
  }
  .blog-back-link:hover{color:var(--purple-2);}

  @media (max-width:640px){
    .blog-article{font-size:15.5px;}
    .blog-article h2{font-size:22px;}
    .blog-article-cover{aspect-ratio:16/11;}
  }