.blog-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bgrid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.08), transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(16,185,129,0.08), transparent 44%),
              radial-gradient(circle at 40% 80%, rgba(59,130,246,0.08), transparent 40%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.6), rgba(0,0,0,0.2));
}
.bshape { position:absolute; border-radius:50%; filter: blur(40px); opacity: .35; animation: bfloat 20s ease-in-out infinite alternate; }
.bshape.s1 { width: 320px; height: 320px; background:#a7f3d0; left:-80px; top:120px; animation-duration: 24s; }
.bshape.s2 { width: 300px; height: 300px; background:#c7d2fe; right:-60px; top:260px; animation-duration: 26s; }
.bshape.s3 { width: 280px; height: 280px; background:#fde68a; left:40%; bottom:-80px; animation-duration: 28s; }
@keyframes bfloat { to { transform: translateY(-30px) translateX(20px) scale(1.05); } }

.blog-page { position: relative; z-index:1; }
.blog-hero { padding: 96px 0 24px; }
.blog-hero .lead { color:#6b7280; max-width: 820px; }
.blog-tags { margin-top: 16px; display:flex; flex-wrap:wrap; gap:10px; }
.blog-tags .tag { padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; background:rgba(255,255,255,0.7); cursor:pointer; font-size:14px; }
.blog-tags .tag.active { background:#111827; color:#fff; border-color:#111827; }

.blog-list { padding: 24px 0 72px; }
.posts { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.post-card { display:block; border:1px solid rgba(17,17,17,0.08); border-radius:16px; overflow:hidden; background:#fff; transition: transform .2s ease, box-shadow .2s ease; height:100%; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(17,17,17,0.12); }
.post-media { height: 160px; }
.gradient { background: linear-gradient(120deg, rgba(99,102,241,.18), rgba(59,130,246,.18)); }
.gradient.g2 { background: linear-gradient(120deg, rgba(16,185,129,.18), rgba(59,130,246,.18)); }
.gradient.g3 { background: linear-gradient(120deg, rgba(245,158,11,.2), rgba(99,102,241,.18)); }
.gradient.g4 { background: linear-gradient(120deg, rgba(6,182,212,.18), rgba(139,92,246,.18)); }
.gradient.g5 { background: linear-gradient(120deg, rgba(239,68,68,.18), rgba(99,102,241,.18)); }
.gradient.g6 { background: linear-gradient(120deg, rgba(59,130,246,.18), rgba(16,185,129,.18)); }
.post-content { padding:16px; }
.post-cat { color:#4f46e5; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.post-title { font-size:18px; line-height:1.35; margin:6px 0 6px; color:#111827; }
.post-excerpt { color:#4b5563; font-size:14px; }
.post-meta { margin-top:10px; font-size:12px; color:#6b7280; display:flex; gap:8px; align-items:center; }

.blog-cta { padding: 24px 0 80px; text-align:center; }
.blog-cta .btn { margin-top: 8px; }

/* Blog CTA enhanced card */
.blog-cta .cta-card { position: relative; max-width: 900px; margin: 0 auto; padding: 28px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75)); border: 1px solid rgba(17,17,17,0.08); box-shadow: 0 12px 28px rgba(17,17,17,0.08); overflow: hidden; }
.blog-cta .cta-header { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:8px; }
.blog-cta .pulse { width:10px; height:10px; border-radius:50%; background:#10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.blog-cta .cta-sub { color:#4b5563; max-width:700px; margin: 0 auto 14px; }
.blog-cta .cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.blog-cta .cta-actions .btn { margin:0; }
.button-card { position: relative; display:inline-block; padding: 16px 22px; border-radius: 14px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.18); box-shadow: 0 12px 28px rgba(99,102,241,0.16), inset 0 0 0 1px rgba(255,255,255,0.5); overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.button-card:before { content:""; position:absolute; inset:-40%; background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.25), transparent 40%), radial-gradient(circle at 70% 70%, rgba(59,130,246,.25), transparent 40%); filter: blur(20px); opacity:.6; animation: glow 8s ease-in-out infinite alternate; pointer-events:none; }
.button-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(99,102,241,0.2), inset 0 0 0 1px rgba(255,255,255,0.6); }
.button-card .btn { position: relative; z-index: 1; }
@keyframes glow { to { transform: translateY(-10px) translateX(6px) scale(1.05); } }
.cta-spark { position:absolute; width:160px; height:160px; border-radius:50%; filter: blur(30px); opacity:.25; animation: spark 14s ease-in-out infinite alternate; }
.cta-s1 { background:#c7d2fe; left:-40px; top:-20px; }
.cta-s2 { background:#a7f3d0; right:-30px; bottom:-30px; animation-duration: 16s; }
@keyframes spark { to { transform: translateY(-20px) translateX(10px) scale(1.05); } }


/* Subtle scroll reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Floating decorative dots */
.blog-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.blog-dot { position:absolute; width:8px; height:8px; border-radius:50%; background: rgba(79,70,229,.25); animation: dot-float 10s ease-in-out infinite; }
.blog-dot.d2 { background: rgba(16,185,129,.25); animation-duration: 12s; }
.blog-dot.d3 { background: rgba(59,130,246,.25); animation-duration: 14s; }
@keyframes dot-float { 50% { transform: translateY(-12px) translateX(6px); } }

@media (max-width: 1024px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .posts { grid-template-columns: 1fr; }
  .blog-hero { padding-top: 72px; }
}