.blog{padding:var(--spacing-3xl) 0;background:#030106;position:relative}.blog-grid-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(176,36,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(176,36,255,.025) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;opacity:.6;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 15%,rgba(0,0,0,.5) 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 15%,rgba(0,0,0,.5) 85%,transparent 100%)}.blog:before{content:"";position:absolute;top:4px;left:50%;transform:translate(-50%);width:100%;max-width:1200px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(176,36,255,.15) 15%,rgba(176,36,255,.5) 35%,#B024FF 50%,rgba(176,36,255,.5) 65%,rgba(176,36,255,.15) 85%,transparent 100%);z-index:5}.blog:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:9px;height:9px;background:#b024ff;border-radius:50%;box-shadow:0 0 12px #b024ffcc,0 0 30px #b024ff66;z-index:5}.blog-header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.25rem;padding:0 4rem var(--spacing-2xl);margin-bottom:var(--spacing-xl);position:relative;z-index:1}.blog-header-left{display:flex;flex-direction:column;align-items:center}.blog-header-left .section-tag{text-align:center;margin-bottom:.4rem}.blog-header .section-title{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:900;margin:0;text-align:left;letter-spacing:-.04em;text-transform:uppercase;line-height:1}.blog-header .section-subtitle{display:none}.blog-header-button{background:#b024ff;color:#fff;padding:.75rem 2rem;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:2px solid #B024FF;cursor:pointer;transition:all var(--transition-base);text-decoration:none;display:inline-block;box-shadow:0 0 20px #b024ff66;text-shadow:0 0 5px rgba(255,255,255,.3)}.blog-header-button:hover{background:#030106;color:#fff;border-color:#b024ff;transform:translateY(-2px);box-shadow:0 0 30px #b024ff99}.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:0 4rem;max-width:1800px;margin:0 auto}.blog-card{background:#0009;border:2px solid rgba(255,255,255,.2);border-radius:1.25rem;overflow:hidden;transition:all var(--transition-base);cursor:pointer;will-change:transform;display:flex;flex-direction:column;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.blog-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #000c;border-width:3px;z-index:10}.blog-card:nth-child(1):hover{box-shadow:0 20px 60px #000c,0 0 40px #b024ff99;border-color:#b024ff}.blog-card:nth-child(2):hover{box-shadow:0 20px 60px #000c,0 0 40px #00c8c899;border-color:#00c8c8}.blog-card:nth-child(3):hover{box-shadow:0 20px 60px #000c,0 0 40px #00b47899;border-color:#00b478}.blog-card:nth-child(4):hover{box-shadow:0 20px 60px #000c,0 0 40px #d4a57499;border-color:#d4a574}.blog-card:nth-child(1){background:linear-gradient(135deg,#4a1942f2,#3a1434e6);border-color:#b024ff99}.blog-card:nth-child(2){background:linear-gradient(135deg,#0a3d4af2,#08303ce6);border-color:#00c8c880}.blog-card:nth-child(3){background:linear-gradient(135deg,#1a3a2ef2,#142d24e6);border-color:#00b47880}.blog-card:nth-child(4){background:linear-gradient(135deg,#3d2817f2,#302012e6);border-color:#8b5a2b80}.blog-card .blog-category{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.3)}.blog-card:nth-child(1) .blog-arrow{border-color:#b024ff;box-shadow:0 0 20px #b024ff99}.blog-card:nth-child(1) .blog-arrow svg{fill:#b024ff;filter:drop-shadow(0 0 5px rgba(176,36,255,.8))}.blog-card:nth-child(2) .blog-arrow{border-color:#00c8c8;box-shadow:0 0 20px #00c8c899}.blog-card:nth-child(2) .blog-arrow svg{fill:#00c8c8;filter:drop-shadow(0 0 5px rgba(0,200,200,.8))}.blog-card:nth-child(3) .blog-arrow{border-color:#00b478;box-shadow:0 0 20px #00b47899}.blog-card:nth-child(3) .blog-arrow svg{fill:#00b478;filter:drop-shadow(0 0 5px rgba(0,180,120,.8))}.blog-card:nth-child(4) .blog-arrow{border-color:#d4a574;box-shadow:0 0 20px #d4a57499}.blog-card:nth-child(4) .blog-arrow svg{fill:#d4a574;filter:drop-shadow(0 0 5px rgba(212,165,116,.8))}.blog-image-wrapper{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}.blog-image{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.19,1,.22,1)}.blog-card:hover .blog-image{transform:scale(1.1)}.blog-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%);pointer-events:none}.blog-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;background:#ffffff08}.placeholder-icon{position:relative;z-index:1;opacity:.3}.blog-arrow{position:absolute;bottom:1.5rem;right:1.5rem;z-index:10;width:50px;height:50px;background:#030106e6;border:2px solid #B024FF;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);box-shadow:0 0 20px #b024ff66}.blog-card:hover .blog-arrow{transform:scale(1.15) rotate(45deg);box-shadow:0 8px 20px #00000080}.blog-card:nth-child(1):hover .blog-arrow{box-shadow:0 0 30px #b024ffcc,0 8px 20px #00000080;background:#b024ff4d}.blog-card:nth-child(2):hover .blog-arrow{box-shadow:0 0 30px #00c8c8cc,0 8px 20px #00000080;background:#00c8c84d}.blog-card:nth-child(3):hover .blog-arrow{box-shadow:0 0 30px #00b478cc,0 8px 20px #00000080;background:#00b4784d}.blog-card:nth-child(4):hover .blog-arrow{box-shadow:0 0 30px #d4a574cc,0 8px 20px #00000080;background:#d4a5744d}.blog-arrow svg{width:24px;height:24px}.blog-content{padding:1.75rem;display:flex;flex-direction:column;gap:.75rem;flex:1;position:relative}.blog-meta{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.blog-category{display:inline-block;font-size:.75rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;padding:.4rem 1rem;border-radius:2rem;width:fit-content}.blog-date{font-size:.9rem;color:#ffffffb3;font-weight:500}.blog-title{font-size:1.3rem;font-weight:800;color:#fff;margin:0;line-height:1.3;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-excerpt{font-size:.9rem;color:#ffffffb3;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}.blog-card:hover .blog-excerpt{color:#ffffffd9}.blog-cta{display:none}.skeleton{pointer-events:none;animation:pulse 1.5s ease-in-out infinite}.skeleton-image{background:linear-gradient(90deg,#ffffff08,#ffffff14,#ffffff08);background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton-text{height:1rem;background:#ffffff1a;border-radius:.5rem;margin:.5rem 0}.skeleton-category{width:40%;height:.8rem}.skeleton-title{width:90%;height:1.5rem}.skeleton-excerpt{width:100%;height:3rem}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.blog-error{text-align:center;padding:4rem 2rem;color:#ffffffb3}.blog-error a{color:#b024ff;text-decoration:none;margin-top:1rem;display:inline-block;padding:.75rem 2rem;border:2px solid #B024FF;border-radius:.5rem;transition:all .3s ease}.blog-error a:hover{background:#b024ff;color:#fff;transform:translateY(-2px)}@media (max-width: 1400px){.blog-grid{gap:1.5rem;padding:0 3rem}}@media (max-width: 1200px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:2rem;padding:0 2rem}}@media (max-width: 768px){.blog-header{padding:0 2rem var(--spacing-lg)}.blog-grid{grid-template-columns:1fr;gap:2rem;padding:0 1.5rem}}@media (max-width: 768px){.blog{padding:var(--spacing-2xl) 0}.blog-header{flex-direction:column;align-items:flex-start;gap:1rem;padding:0 1.5rem var(--spacing-md)}.blog-content{padding:1.5rem}.blog-title{font-size:1.2rem}.blog-excerpt{font-size:.85rem;-webkit-line-clamp:2}.blog-arrow{width:45px;height:45px;bottom:1.25rem;right:1.25rem}.blog-header .section-title{font-size:clamp(2.5rem,5vw,3.5rem)}.blog-grid{padding:0 1.5rem}.blog-content{padding:2rem 1.5rem}.blog-arrow{width:50px;height:50px;bottom:1.5rem;right:1.5rem}.blog-arrow svg{width:20px;height:20px}}@media (max-width: 480px){.blog-header{padding:0 1rem var(--spacing-md)}.blog-grid{padding:0 1rem;gap:1rem}.blog-content{padding:1.5rem 1rem}.blog-title{font-size:1.25rem}}