.wb-container{max-width:1200px;margin:0 auto;padding:0 40px;font-family:DM Sans,sans-serif}.wb-hero{position:relative;min-height:68vh;display:flex;align-items:center;background:#0a1020;overflow:hidden}.wb-hero-video-wrap{position:absolute;inset:0;overflow:hidden}.wb-hero-video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover}.wb-hero-veil{position:absolute;inset:0;background:#0810289e;z-index:2}.wb-hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(0,196,180,.12),transparent 65%);z-index:3;pointer-events:none}.wb-hero-content{position:relative;z-index:10;text-align:center;max-width:820px;margin:0 auto;padding:200px 24px 30px}.wb-hero-eyebrow{display:inline-block;font-family:Sora,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ffffff8c;margin-bottom:20px}.wb-hero-title{font-family:Sora,sans-serif;font-size:3.2rem;font-weight:900;line-height:1.05;color:#fff;margin:0 0 20px}.wb-hero-gradient{background:linear-gradient(90deg,var(--primary, #007BFF),var(--secondary, #00C4B4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.wb-hero-sub{font-size:1.05rem;color:#ffffffb8;line-height:1.75;margin:0}.wb-grid-section{background:linear-gradient(180deg,#fff,#f0f6ff);padding:40px 0}.wb-grid{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;justify-content:space-evenly;gap:28px 16px;margin-top:0}.wb-card{width:30%;background:#fff;border:1px solid #2c82ef;border-radius:20px;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;cursor:pointer;box-shadow:0 4px 16px #00000094}.wb-card:hover{transform:translateY(-10px);box-shadow:0 24px 64px #007bff1f;border-color:#007bff4d}.wb-card-thumb{height:210px;position:relative;overflow:hidden;background:#eef4ff}.wb-thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.wb-card:hover .wb-thumb-img{transform:scale(1.06)}.wb-thumb-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e6f0ff,#d0e4ff);display:flex;align-items:center;justify-content:center;font-family:Sora,sans-serif;font-size:3.5rem;font-weight:900;color:#007bff;opacity:.4}.wb-card-thumb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.22),transparent 60%)}.wb-card-body{padding:16px 20px 22px}.wb-card-meta{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#7a90a8;font-weight:500;margin-bottom:12px}.wb-card-title{font-family:Sora,sans-serif;font-size:1.15rem;font-weight:700;color:#0e1b2e;line-height:1.3;margin:0 0 12px}.wb-card-excerpt{font-size:.92rem;color:#5a6a80;line-height:1.3;margin:0 0 16px}.wb-read-link{display:inline-flex;align-items:center;gap:8px;font-family:Sora,sans-serif;font-size:.88rem;font-weight:700;color:var(--primary, #007BFF);text-decoration:none;transition:gap .3s}.wb-read-link:hover{gap:14px}.wb-read-arrow{transition:transform .3s}.wb-read-link:hover .wb-read-arrow{transform:translate(4px)}.wb-state-box{text-align:center;padding:100px 20px;color:#7a90a8}.wb-state-box p{font-size:1.2rem;margin-top:20px}.wb-spinner{width:56px;height:56px;border:4px solid rgba(0,123,255,.15);border-top:4px solid var(--primary, #007BFF);border-radius:50%;animation:wb-spin 1s linear infinite;margin:0 auto}@keyframes wb-spin{to{transform:rotate(360deg)}}@media(max-width:1024px){.wb-card{width:47%}}@media(max-width:768px){.wb-grid{flex-direction:column}.wb-card{width:100%}.wb-container{padding:0 20px}.wb-grid{grid-template-columns:1fr}.wb-hero-title{font-size:clamp(2.4rem,8vw,3.5rem)}}.blog-detail-hero{background:linear-gradient(135deg,#0f172a,#1e293b 60%,#0f172a);padding:20px 0 80px;position:relative;overflow:hidden}.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(76,201,240,.15),transparent 70%);pointer-events:none}.blog-hero-content{text-align:center;max-width:900px;margin:0 auto;padding:15rem 0px 4rem;color:var(--white)}.detail-title{font-size:4.5rem;font-weight:900;line-height:1.05;margin-bottom:24px;color:var(--primary)}.post-meta{display:flex;justify-content:center;gap:32px;color:#ffffffb3;font-size:1.1rem}.post-meta span{display:flex;align-items:center;gap:8px}.blog-detail-main{background:linear-gradient(to bottom,#ffffff,var(--primary));padding:20px 16px}.detail-grid{display:grid;grid-template-columns:1fr 380px;gap:80px}.main-article{color:var(--white)}.featured-image{margin:30px 0;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px #0009}.featured-image img{width:100%;height:auto;display:block}.image-placeholder{height:500px;background:#1e1e3299;border-radius:28px;display:grid;place-items:center;font-size:8rem;color:#4cc9f04d;margin:60px 0}.article-body h2{font-size:2.4rem;font-weight:800;line-height:1.3;margin:30px 0 16px;color:var(--white)}.article-body p{font-size:1.1rem;line-height:1.4;color:#ffffffd9;margin-bottom:0}.comments-area{margin-top:10px;padding:20px;border-top:1px solid rgba(255,255,255,.1);background:#000;color:#fff;border-radius:15px}.comments-toggle{background:transparent;border:none;color:var(--second-primary);font-size:1.4rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:12px;padding:0}.comments-toggle:hover{color:var(--white)}.arrow{transition:transform .4s ease}.arrow.open{transform:rotate(180deg)}.comments-container{margin-top:20px}.main-comment-form{background:#1e1e3299;border-radius:24px;padding:25px;margin-bottom:12px;border:1px solid rgba(255,255,255,.08)}.main-comment-form h3{font-size:2rem;color:var(--white);margin-bottom:32px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:12px}.main-comment-form input,.main-comment-form textarea{width:100%;padding:18px 24px;background:#141428cc;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:var(--white);font-size:1.1rem}.main-comment-form input:focus,.main-comment-form textarea:focus{outline:none;border-color:var(--second-primary)}.main-comment-form textarea{min-height:160px;resize:vertical}.comment-item{display:flex;gap:24px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.08)}.comment-item.reply{margin-left:80px;padding-top:24px}.comment-avatar{width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--second-primary));border-radius:50%;display:grid;place-items:center;color:var(--white);font-weight:900;font-size:1.8rem;flex-shrink:0;border:2px solid}.comment-body{flex:1}.comment-header{display:flex;align-items:center;gap:16px;margin-bottom:12px}.comment-header h4{font-size:1.3rem;color:var(--white);font-weight:600}.comment-date{color:#fff9;font-size:.95rem;display:flex;align-items:center;gap:6px}.comment-text{color:#ffffffe6;line-height:1.8;margin-bottom:16px;font-size:1.1rem;border:2px solid;border-radius:16px;padding:8px}.reply-btn{background:transparent;border:none;color:var(--second-primary);font-weight:600;cursor:pointer;padding:0}.reply-form{background:#14142899;border-radius:20px;padding:32px;margin-top:24px;border:1px solid rgba(255,255,255,.08)}.reply-form input,.reply-form textarea{width:100%;padding:16px 20px;background:#0a0a19cc;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--white);margin-bottom:16px}.reply-actions{display:flex;gap:16px}.cancel-btn{background:transparent;border:none;color:#fff9;cursor:pointer;font-weight:600}.replies{margin-top:32px;padding-left:40px;border-left:2px solid rgba(76,201,240,.3)}.blog-sidebar{position:sticky;top:120px;height:fit-content}.sidebar-card{background:#1e1e3299;border-radius:24px;padding:40px;border:1px solid rgba(255,255,255,.08)}.sidebar-card h3{font-size:2rem;color:var(--white);margin-bottom:32px;font-weight:700}.sidebar-card ul{list-style:none}.sidebar-card li{margin-bottom:20px}.recent-link{color:#fffc;font-size:1.1rem;line-height:1.6;transition:color .3s ease}.recent-link:hover{color:var(--second-primary)}.loading-blog,.blog-not-found{text-align:center;padding:200px 20px;color:var(--white);font-size:2rem}.no-comments{color:#fff9;font-style:italic;text-align:center;padding:60px 0}@media(max-width:992px){.detail-grid{grid-template-columns:1fr}.blog-sidebar{position:static;margin-top:80px}}@media(max-width:768px){.detail-title{font-size:3.8rem}.comment-item.reply{margin-left:0;padding-left:20px}.replies{padding-left:20px}}
