.blog-hero{position:relative;padding-top:calc(72px + var(--space-16));padding-bottom:var(--space-16);overflow:hidden}.blog-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(124,58,237,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(6,182,212,.06) 0%,transparent 50%);pointer-events:none}.blog-hero .container{position:relative;z-index:2}.blog-hero-label{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);border:1px solid rgba(124,58,237,.3);background:#7c3aed14;color:var(--color-accent-violet-light);font-size:var(--text-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-6)}.blog-hero h1{font-size:var(--text-4xl);margin-bottom:var(--space-4)}@media(min-width:768px){.blog-hero h1{font-size:var(--text-5xl)}}.blog-hero-description{font-size:var(--text-lg);color:var(--color-text-muted);max-width:640px}.blog-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8)}@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}}.blog-card{background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0;transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);overflow:hidden;display:flex;flex-direction:column}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#7c3aed4d}.blog-card-content{padding:var(--space-6);flex:1;display:flex;flex-direction:column}.blog-card-meta{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted)}.blog-card-date,.blog-card-reading{display:flex;align-items:center;gap:var(--space-1)}.blog-card-meta svg{width:14px;height:14px;opacity:.6}.blog-card h2{font-size:var(--text-xl);margin-bottom:var(--space-3);color:#fff;line-height:1.3;transition:color var(--transition-fast)}.blog-card:hover h2{color:var(--color-accent-violet-light)}.blog-card-description{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-6);flex:1}.blog-card-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.blog-tag{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-weight-medium);background:#7c3aed1a;color:var(--color-accent-violet-light);border:1px solid rgba(124,58,237,.15);transition:all var(--transition-fast)}.blog-card:hover .blog-tag{background:#7c3aed26;border-color:#7c3aed40}.blog-card-link{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-accent-cyan);transition:gap var(--transition-normal),color var(--transition-normal)}.blog-card:hover .blog-card-link{gap:var(--space-3);color:var(--color-accent-violet-light)}.blog-card-link svg{width:16px;height:16px;transition:transform var(--transition-normal)}.blog-card:hover .blog-card-link svg{transform:translate(2px)}.blog-card.featured{grid-column:1 / -1;display:grid;grid-template-columns:1fr}@media(min-width:768px){.blog-card.featured .blog-card-content{padding:var(--space-8)}.blog-card.featured h2{font-size:var(--text-2xl)}.blog-card.featured .blog-card-description{font-size:var(--text-base)}}.blog-post-hero{position:relative;padding-top:calc(72px + var(--space-16));padding-bottom:var(--space-12);overflow:hidden}.blog-post-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(124,58,237,.1) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(6,182,212,.06) 0%,transparent 50%);pointer-events:none}.blog-post-hero .container{position:relative;z-index:2;max-width:800px}.blog-post-back{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8);transition:color var(--transition-fast)}.blog-post-back:hover{color:var(--color-accent-violet-light)}.blog-post-back svg{width:16px;height:16px}.blog-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}.blog-post-meta-item{display:flex;align-items:center;gap:var(--space-2)}.blog-post-meta svg{width:16px;height:16px;opacity:.6}.blog-post-meta .separator{width:4px;height:4px;border-radius:50%;background:var(--color-text-muted);opacity:.4}.blog-post-hero h1{font-size:var(--text-3xl);line-height:1.25;margin-bottom:var(--space-6)}@media(min-width:768px){.blog-post-hero h1{font-size:var(--text-4xl)}}.blog-post-hero-description{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.7}.blog-post-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}.blog-post-content{padding-bottom:var(--space-24)}.blog-post-content .container{max-width:800px}.prose{color:var(--color-text-muted);font-size:var(--text-base);line-height:1.85}@media(min-width:768px){.prose{font-size:var(--text-lg);line-height:1.8}}.prose h2{font-size:var(--text-2xl);margin-top:var(--space-12);margin-bottom:var(--space-6);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);color:#fff}@media(min-width:768px){.prose h2{font-size:var(--text-3xl)}}.prose h3{font-size:var(--text-xl);margin-top:var(--space-8);margin-bottom:var(--space-4);color:var(--color-accent-violet-light)}.prose p{margin-bottom:var(--space-6)}.prose strong{color:var(--color-text-main);font-weight:var(--font-weight-semibold)}.prose ul,.prose ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}.prose li{margin-bottom:var(--space-2);position:relative}.prose ul li::marker{color:var(--color-accent-violet-light)}.prose ol li::marker{color:var(--color-accent-cyan);font-weight:var(--font-weight-semibold)}.prose a{color:var(--color-accent-cyan);text-decoration:underline;text-underline-offset:3px;transition:color var(--transition-fast)}.prose a:hover{color:var(--color-accent-violet-light)}.prose blockquote{border-left:3px solid var(--color-accent-violet);padding-left:var(--space-6);margin:var(--space-8) 0;font-style:italic;color:var(--color-text-main);background:#7c3aed0d;padding-top:var(--space-4);padding-bottom:var(--space-4);padding-right:var(--space-4);border-radius:0 var(--radius-md) var(--radius-md) 0}.prose blockquote p{margin-bottom:0}.prose code{font-family:var(--font-family-mono);font-size:.9em;background:#7c3aed1f;padding:.15em .4em;border-radius:var(--radius-sm);color:var(--color-accent-violet-light)}.prose pre{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);overflow-x:auto;margin-bottom:var(--space-6)}.prose pre code{background:none;padding:0;color:var(--color-text-main);font-size:var(--text-sm)}.prose hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-12) 0}.prose img{border-radius:var(--radius-lg);margin:var(--space-8) 0}.blog-empty{text-align:center;padding:var(--space-24) 0}.blog-empty-icon{width:64px;height:64px;margin:0 auto var(--space-6);color:var(--color-text-muted);opacity:.3}.blog-empty h2{font-size:var(--text-2xl);margin-bottom:var(--space-4)}.blog-empty p{color:var(--color-text-muted)}.blog-divider{width:60px;height:3px;background:linear-gradient(to right,var(--color-accent-violet),var(--color-accent-cyan));border-radius:var(--radius-full);border:none;margin:var(--space-8) 0}.blog-post-cta{margin-top:var(--space-16);padding:var(--space-8);background:linear-gradient(180deg,var(--color-bg-elevated) 0%,rgba(124,58,237,.08) 100%);border:1px solid rgba(124,58,237,.2);border-radius:var(--radius-lg);text-align:center}.blog-post-cta h3{font-size:var(--text-xl);color:#fff;margin-bottom:var(--space-3)}.blog-post-cta p{color:var(--color-text-muted);margin-bottom:var(--space-6);font-size:var(--text-base)}.blog-post-cta .btn{margin:0 var(--space-2)}@keyframes blogFadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.blog-animate{opacity:0;animation:blogFadeInUp .6s ease-out forwards}.blog-animate-delay-1{animation-delay:.1s}.blog-animate-delay-2{animation-delay:.2s}.blog-animate-delay-3{animation-delay:.3s}.blog-animate-delay-4{animation-delay:.4s}@media(prefers-reduced-motion:reduce){.blog-animate{animation:none;opacity:1}}