.blog-page{background:linear-gradient(135deg,#fef9f9 0%,#fff 50%,#fff5f5 100%);min-height:100vh;padding:100px 0 80px}.container{max-width:1200px;margin:0 auto;padding:0 20px}.blog-page h1{color:#0000;text-align:center;background:linear-gradient(135deg,#ff3b3b,red);-webkit-background-clip:text;background-clip:text;width:100%;margin-bottom:20px;font-size:48px;font-weight:800;display:inline-block}.blog-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;margin-top:40px;display:grid}.blog-card{background:#fff;border:1px solid #0000000d;border-radius:20px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 4px 6px -1px #0000000d}.blog-card:hover{border-color:#ff3b3b33;transform:translateY(-8px);box-shadow:0 20px 40px #0000001a}.blog-card img{object-fit:cover;width:100%;height:200px;transition:transform .5s}.blog-card:hover img{transform:scale(1.05)}.blog-card h3{color:#1f2937;margin:20px 20px 12px;font-size:20px;font-weight:700;line-height:1.4;transition:color .3s}.blog-card:hover h3{color:#ff3b3b}.blog-card p{color:#6b7280;margin:0 20px 20px;font-size:14px;line-height:1.6}.blog-card a{color:#ff3b3b;margin:0 20px 20px;padding:8px 0;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block;position:relative}.blog-card a:after{content:"";background:linear-gradient(135deg,#ff3b3b,red);width:0;height:2px;transition:width .3s;position:absolute;bottom:4px;left:0}.blog-card a:hover{color:red}.blog-card a:hover:after{width:100%}.blog-loading{background:linear-gradient(135deg,#fef9f9 0%,#fff5f5 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.blog-loading p{color:#6b7280;padding-left:30px;font-size:18px;position:relative}.blog-loading p:before{content:"";border:2px solid #ff3b3b;border-top-color:#0000;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin;position:absolute;top:50%;left:0;transform:translateY(-50%)}.blog-page .container>p{text-align:center;color:#6b7280;background:#fff;border:1px solid #f0f0f0;border-radius:20px;margin-top:40px;padding:60px 20px;font-size:18px}@media (max-width:1024px){.blog-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}}@media (max-width:768px){.blog-page{padding:80px 0 60px}.blog-page h1{font-size:36px}.blog-grid{grid-template-columns:1fr;gap:20px}.blog-card h3{margin:16px 16px 10px;font-size:18px}.blog-card p{margin:0 16px 16px;font-size:13px}.blog-card a{margin:0 16px 20px}.blog-page .container>p{padding:40px 20px;font-size:16px}}@media (prefers-color-scheme:dark){.blog-page{background:linear-gradient(135deg,#0a0a0a 0%,#000 100%)}.blog-page h1{color:#fff;background:linear-gradient(135deg,#f55,#ff3b3b);-webkit-background-clip:text;background-clip:text}.blog-card{background:#1a1a1a;border-color:#2a2a2a}.blog-card:hover{border-color:#ff3b3b4d;box-shadow:0 20px 40px #0000004d}.blog-card h3{color:#fff}.blog-card:hover h3{color:#f55}.blog-card p{color:#9ca3af}.blog-page .container>p{color:#9ca3af;background:#1a1a1a;border-color:#2a2a2a}.blog-loading{background:linear-gradient(135deg,#0a0a0a 0%,#000 100%)}.blog-loading p{color:#9ca3af}}@keyframes spin{to{transform:rotate(360deg)}}.blog-card{position:relative}.blog-card:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#0000,#0000);border-radius:20px;padding:1px;transition:all .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.blog-card:hover:before{background:linear-gradient(135deg,#ff3b3b,red)}@media (prefers-reduced-motion:reduce){.blog-card,.blog-card img,.blog-card a:after,.blog-card:before{transition:none}.blog-card:hover,.blog-card:hover img{transform:none}.blog-loading p:before{animation:none}}