/* ═══ Blog Index Styles ═══ */
/* See the note in blog-post.css -- same pattern, same guarantee. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Figtree",sans-serif;background:var(--color-surface);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Sora",sans-serif}

/* ═══ Navigation override ═══ */
.nav-links a.active{color:var(--color-brand)}

/* ═══ Blog Index ═══ */
.blog-header{max-width:760px;margin:0 auto;padding:48px 1.5rem 40px}
.blog-header h1{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:700;color:var(--color-text);margin-bottom:8px}
.blog-header p{font-size:1rem;color:var(--color-muted);line-height:1.7}
.blog-list{max-width:760px;margin:0 auto;padding:0 1.5rem 64px}
.blog-card{display:block;background:var(--color-card);border:1px solid var(--color-neutral-200);border-radius:14px;padding:28px;margin-bottom:20px;text-decoration:none;transition:all .25s}
.blog-card:hover{border-color:var(--color-brand);transform:translateY(-2px);box-shadow:0 8px 24px rgba(44,124,115,0.12)}
.blog-card .card-cat{font-family:"Sora",sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--color-brand);margin-bottom:10px}
.blog-card h2{font-size:1.2rem;font-weight:700;color:var(--color-text);margin-bottom:8px;line-height:1.3}
.blog-card p{font-size:.95rem;color:var(--color-muted);line-height:1.7;margin-bottom:12px}
.blog-card .card-meta{font-size:13px;color:var(--color-neutral-400);display:flex;align-items:center;gap:12px}
.blog-card .card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--color-neutral-300)}

/* ═══ Sticky Mobile CTA ═══ */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:var(--color-brand);padding:.75rem 1.5rem;text-align:center;box-shadow:0 -2px 12px rgba(0,0,0,.15)}
.sticky-cta a{color:var(--color-white);font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;text-decoration:none}

/* ═══ Responsive ═══ */
@media(max-width:640px){
  .sticky-cta{display:block}
  .blog-header{padding:36px 20px 28px}
  .blog-list{padding:0 20px 48px}
  .blog-card{padding:22px}
}