.blog-list-container{max-width:1200px;margin:0 auto;padding:20px}.blog-list-header{text-align:center;margin-bottom:40px}.blog-list-title{font-size:2.5rem;color:white;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.blog-list-subtitle{font-size:1.2rem;color:rgba(255,255,255,.9)}.blog-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:32px;margin-bottom:40px}.blog-card{background:linear-gradient(135deg,#ffffff,#fafbfc);border-radius:20px;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;border:1px solid rgba(102,126,234,.1)}.blog-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.05),transparent);transition:left .5s ease}.blog-card:hover:before{left:100%}.blog-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 40px rgba(102,126,234,.2),0 4px 16px rgba(0,0,0,.1);border-color:rgba(102,126,234,.3)}.blog-card-featured{border:2px solid #667eea;background:linear-gradient(135deg,#f8f9ff,#ffffff)}.blog-card-link{text-decoration:none;color:inherit;display:block}.blog-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}.blog-card-category{background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-size:.85rem;font-weight:700;padding:6px 16px;border-radius:20px;box-shadow:0 2px 8px rgba(102,126,234,.3);letter-spacing:.3px;text-transform:uppercase}.blog-card-date{color:#666;font-size:.85rem}.blog-card-title{font-size:1.5rem;font-weight:800;color:#1a1a1a;margin:0 0 16px;line-height:1.4;transition:all .3s ease;letter-spacing:-.3px}.blog-card:hover .blog-card-title{color:#667eea;transform:translateX(4px)}.blog-card-excerpt{color:#666;font-size:.95rem;line-height:1.6;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.blog-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.blog-card-tag{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#667eea;font-size:.8rem;padding:6px 14px;border-radius:16px;font-weight:600;border:1px solid rgba(102,126,234,.2);transition:all .3s ease}.blog-post-container{max-width:900px;margin:0 auto;padding:20px;position:relative}.blog-post-progress-bar{position:fixed;top:56px;left:0;width:100%;height:4px;background:rgba(255,255,255,.1);z-index:999;backdrop-filter:blur(10px)}.blog-post-progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2 50%,#f093fb);background-size:200% 100%;animation:blogProgressGradient 3s ease infinite;transition:width .1s ease-out;box-shadow:0 0 10px rgba(102,126,234,.5)}@keyframes blogProgressGradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.blog-post-back-link{display:inline-block;margin-bottom:20px;color:white;text-decoration:none;font-size:.95rem;transition:opacity .3s ease}.blog-post-back-link:hover{opacity:.8}.blog-post{background:linear-gradient(135deg,#ffffff,#fafbfc);border-radius:20px;padding:3rem 2.5rem;box-shadow:0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);margin-bottom:40px;border:1px solid rgba(102,126,234,.1);position:relative;overflow:hidden}.blog-post:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2 50%,#f093fb);background-size:200% 100%;animation:blogGradientShift 3s ease infinite}@keyframes blogGradientShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.blog-post-header{margin-bottom:2rem;padding-bottom:1.75rem;border-bottom:2px solid rgba(102,126,234,.15);position:relative}.blog-post-header:after{content:"";position:absolute;bottom:-2px;left:0;width:60px;height:2px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.blog-post-category{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-size:.85rem;font-weight:700;padding:8px 18px;border-radius:20px;margin-bottom:20px;box-shadow:0 4px 12px rgba(102,126,234,.3);letter-spacing:.5px;text-transform:uppercase}.blog-post-title{font-size:2.75rem;font-weight:800;color:#1a1a1a;margin:0 0 25px;line-height:1.2;letter-spacing:-.5px;background:linear-gradient(135deg,#1a1a1a,#4a4a4a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.blog-post-meta{gap:24px;flex-wrap:wrap;margin-bottom:20px}.blog-post-date,.blog-post-meta{display:flex;color:#666;font-size:.95rem;align-items:center}.blog-post-date{gap:6px}.blog-post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.blog-post-tag{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#667eea;font-size:.85rem;padding:8px 16px;border-radius:20px;font-weight:600;border:1px solid rgba(102,126,234,.2);transition:all .3s ease}.blog-post-content{line-height:1.85;color:#1f2937;font-size:1.125rem;font-weight:400;max-width:70ch;letter-spacing:.01em}.blog-post-content h1,.blog-post-content h2,.blog-post-content h3,.blog-post-content h4{margin-top:2.25rem;margin-bottom:.75rem;color:#111827;font-weight:700;letter-spacing:-.02em;line-height:1.35}.blog-post-content h1{font-size:2rem;border-bottom:3px solid rgba(102,126,234,.2);padding-bottom:.5rem;margin-top:2.5rem}.blog-post-content h2{font-size:1.5rem;position:relative;padding-left:1rem;margin-top:2.25rem}.blog-post-content h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.25rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.blog-post-content h3{font-size:1.25rem;color:#4f46e5;margin-top:1.75rem}.blog-post-content p{margin-bottom:1.25rem}.blog-post-content p:last-child{margin-bottom:0}.blog-post-content strong{color:#111827;font-weight:600}.blog-post-content ol,.blog-post-content ul{margin-bottom:1.25rem;padding-left:1.5rem}.blog-post-content li{margin-bottom:.5rem;line-height:1.75}.blog-post-content table{width:100%;max-width:100%;border-collapse:collapse;margin:1.5rem 0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);font-size:1rem}.blog-post-content table td,.blog-post-content table th{border:1px solid rgba(102,126,234,.15);padding:.75rem 1rem;text-align:left}.blog-post-content table th{background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-weight:600;text-transform:uppercase;font-size:.8125rem;letter-spacing:.05em}.blog-post-content table tr:nth-child(2n){background:rgba(102,126,234,.04)}.blog-post-content table td{color:#374151}.blog-post-content .blog-post-section{margin-bottom:2rem}.blog-post-content .blog-post-section:first-child{margin-top:0}.blog-post-content .blog-post-tip,.blog-post-content blockquote{margin-top:.75rem;margin-bottom:1.25rem;padding:.75rem 1rem;background:rgba(102,126,234,.06);border-left:3px solid #667eea;border-radius:0 8px 8px 0}.blog-post-content blockquote p:last-child{margin-bottom:0}.blog-post-content .blog-post-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.08)}.blog-post-content .blog-post-footer p{margin:0;font-size:.9375rem;color:#6b7280}.blog-post-related{margin-top:40px}.blog-post-related-title{color:white;font-size:1.5rem;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.blog-post-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}@media (max-width:768px){.blog-list-container{padding:15px}.blog-list-title{font-size:2rem}.blog-list-subtitle{font-size:1rem}.blog-list-grid{grid-template-columns:1fr;gap:24px}.blog-card{padding:24px 20px;border-radius:16px}.blog-card-title{font-size:1.3rem}.blog-card-excerpt{-webkit-line-clamp:2}.blog-card:hover{transform:translateY(-4px) scale(1.01)}.blog-post-container{padding:15px}.blog-post{padding:1.75rem 1.25rem;border-radius:16px}.blog-post-title{font-size:1.75rem;line-height:1.3}.blog-post-content{font-size:1.0625rem;line-height:1.8;max-width:none}.blog-post-content h1{font-size:1.5rem;margin-top:2rem}.blog-post-content h2{font-size:1.25rem;margin-top:1.75rem}.blog-post-content h3{font-size:1.125rem;margin-top:1.5rem}.blog-post-content p{margin-bottom:1rem}.blog-post-related-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.blog-card:before{transition:none}.blog-post-progress-fill,.blog-post:before{animation:none}}