:root{
    --blog-bg:#06101a;
    --blog-bg-soft:#0b1726;
    --blog-card:#0d1b2b;
    --blog-card-2:#102238;
    --blog-line:rgba(145,186,255,.18);
    --blog-line-soft:rgba(255,255,255,.08);
    --blog-text:#edf4ff;
    --blog-muted:#9eb2ca;
    --blog-blue:#2491ff;
    --blog-blue-2:#5ec5ff;
    --blog-shadow:0 24px 58px rgba(0,0,0,.34);
}

*{box-sizing:border-box}

html,body{
    margin:0;
    padding:0;
    background:var(--blog-bg);
    color:var(--blog-text);
    font-family:"Plus Jakarta Sans","Geist","Poppins",Arial,sans-serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(circle at 14% 10%, rgba(36,145,255,.19), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(94,197,255,.15), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(28,72,118,.27), transparent 36%);
}

.blog-shell{
    position:relative;
    z-index:1;
    width:min(1200px, calc(100% - 32px));
    margin:20px auto 56px;
}

.blog-nav{
    position:sticky;
    top:14px;
    z-index:20;
    border:1px solid var(--blog-line-soft);
    border-radius:18px;
    backdrop-filter:blur(12px);
    background:linear-gradient(180deg, rgba(8,16,28,.9), rgba(8,16,28,.78));
    box-shadow:0 16px 42px rgba(0,0,0,.35);
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.blog-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--blog-text);
}

.blog-brand img{
    height:34px;
    width:auto;
    display:block;
}

.blog-nav-links{
    display:flex;
    align-items:center;
    gap:8px;
}

.blog-nav-links a{
    text-decoration:none;
    color:#d8e8fd;
    font-size:13px;
    font-weight:600;
    padding:8px 12px;
    border-radius:10px;
    transition:all .18s ease;
}

.blog-nav-links a:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.blog-nav-links a.active{
    color:#fff;
    background:linear-gradient(135deg, rgba(36,145,255,.28), rgba(94,197,255,.14));
    border:1px solid rgba(94,197,255,.32);
}

.blog-hero{
    margin-top:18px;
    border-radius:24px;
    border:1px solid var(--blog-line-soft);
    background:linear-gradient(135deg, rgba(12,25,40,.94), rgba(7,15,25,.94));
    box-shadow:var(--blog-shadow);
    padding:30px;
}

.blog-badge{
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(94,197,255,.34);
    background:rgba(37,122,194,.17);
    color:#cfe9ff;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:11px;
    font-weight:700;
}

.blog-hero h1{
    margin:12px 0 10px;
    font-size:clamp(28px, 4vw, 46px);
    line-height:1.06;
    letter-spacing:-.02em;
}

.blog-hero p{
    margin:0;
    max-width:820px;
    color:var(--blog-muted);
    font-size:15px;
    line-height:1.72;
}

.blog-latest{
    margin-top:18px;
    border-radius:22px;
    border:1px solid var(--blog-line-soft);
    background:linear-gradient(180deg, rgba(10,20,33,.94), rgba(8,17,29,.92));
    box-shadow:var(--blog-shadow);
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:18px;
    padding:18px;
}

.blog-feature{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    min-height:318px;
}

.blog-feature img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.blog-feature::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 30%, rgba(3,8,15,.92) 100%);
}

.blog-feature-body{
    position:absolute;
    inset:auto 16px 16px 16px;
    z-index:2;
}

.blog-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    color:#bfd4ed;
    font-size:11px;
    font-weight:600;
}

.blog-pill{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid rgba(94,197,255,.3);
    background:rgba(36,145,255,.18);
}

.blog-feature-title{
    margin:10px 0 8px;
    font-size:clamp(20px, 3vw, 30px);
    line-height:1.2;
}

.blog-feature-title a{
    color:#fff;
    text-decoration:none;
}

.blog-feature-title a:hover{
    color:#d5ecff;
}

.blog-feature-excerpt{
    margin:0;
    color:#c0d2e9;
    font-size:14px;
    line-height:1.62;
}

.blog-side-list{
    display:grid;
    gap:10px;
}

.blog-side-item{
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    padding:12px;
}

.blog-side-item a{
    text-decoration:none;
    color:#eff6ff;
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}

.blog-side-item a:hover{color:#7bc9ff}

.blog-side-item p{
    margin:7px 0 0;
    color:#99afc9;
    font-size:12.5px;
    line-height:1.55;
}

.blog-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.blog-card{
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(13,27,43,.9), rgba(10,21,35,.9));
    overflow:hidden;
    box-shadow:0 14px 32px rgba(0,0,0,.25);
}

.blog-card-cover{
    display:block;
    aspect-ratio:16/9;
    width:100%;
    object-fit:cover;
}

.blog-card-body{
    padding:13px;
}

.blog-card h3{
    margin:8px 0 7px;
    font-size:17px;
    line-height:1.3;
}

.blog-card h3 a{
    color:#f0f7ff;
    text-decoration:none;
}

.blog-card h3 a:hover{color:#8ed0ff}

.blog-card p{
    margin:0;
    color:var(--blog-muted);
    font-size:13px;
    line-height:1.62;
}

.blog-pagination{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.blog-pagination a,
.blog-pagination span{
    min-width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.03);
    color:#d4e8ff;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.blog-pagination a:hover{
    background:rgba(255,255,255,.08);
}

.blog-pagination .active{
    color:#fff;
    border-color:rgba(81,170,255,.52);
    background:linear-gradient(135deg, rgba(36,145,255,.36), rgba(94,197,255,.22));
}

.blog-empty{
    margin-top:18px;
    border-radius:16px;
    padding:24px;
    border:1px dashed rgba(173,206,243,.26);
    background:rgba(255,255,255,.02);
    color:#b7cae1;
    text-align:center;
}

.blog-footer{
    margin:30px 0 8px;
    text-align:center;
    color:#8ca3bf;
    font-size:12px;
}

.blog-article{
    margin-top:18px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:18px;
}

.blog-article-main{
    border-radius:20px;
    border:1px solid var(--blog-line-soft);
    background:linear-gradient(180deg, rgba(10,21,33,.95), rgba(8,17,28,.95));
    box-shadow:var(--blog-shadow);
    overflow:hidden;
}

.blog-article-cover{
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:16/8;
    object-fit:cover;
}

.blog-article-inner{
    padding:24px;
}

.blog-article h1{
    margin:12px 0;
    font-size:clamp(26px, 3.5vw, 42px);
    line-height:1.16;
}

.blog-content{
    margin-top:12px;
    color:#cedef1;
    line-height:1.82;
    font-size:15px;
}

.blog-content h2,.blog-content h3{
    color:#f3f9ff;
    margin:20px 0 10px;
}

.blog-content a{color:#84ceff}

.blog-aside{
    border-radius:18px;
    border:1px solid var(--blog-line-soft);
    background:linear-gradient(180deg, rgba(10,20,33,.94), rgba(8,17,29,.92));
    box-shadow:var(--blog-shadow);
    padding:14px;
    align-self:start;
    position:sticky;
    top:92px;
}

.blog-aside h3{
    margin:4px 0 10px;
    font-size:16px;
}

@media (max-width: 1080px){
    .blog-shell{width:min(1200px, calc(100% - 20px))}
    .blog-latest{grid-template-columns:1fr; gap:14px}
    .blog-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .blog-article{grid-template-columns:1fr}
    .blog-aside{position:static}
}

@media (max-width: 700px){
    .blog-nav{
        top:10px;
        padding:10px 12px;
        gap:10px;
    }
    .blog-brand img{height:30px}
    .blog-nav-links{gap:4px; flex-wrap:wrap; justify-content:flex-end}
    .blog-nav-links a{
        padding:7px 9px;
        font-size:11.5px;
    }
    .blog-hero{padding:18px}
    .blog-hero p{font-size:13px}
    .blog-grid{grid-template-columns:1fr}
    .blog-feature{min-height:260px}
    .blog-article-inner{padding:16px}
    .blog-content{font-size:14px}
}