.blog-page-hero,
.blog-detail-hero{
    position:relative;
    min-height:330px;
    overflow:hidden;
    color:#ffffff;
    background:#080808;
}

.blog-page-hero-background,
.blog-detail-hero-background{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.58),rgba(0,0,0,.68)),
        url("https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=2200&q=85") center/cover;
    transform:scale(1.02);
}

.blog-page-hero-overlay,
.blog-detail-hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.2);
}

.blog-page-hero-container,
.blog-detail-hero-container,
.blog-list-container{
    max-width:1500px;
}

.blog-page-hero-container,
.blog-detail-hero-container{
    position:relative;
    z-index:2;
    min-height:330px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:28px;
}

.blog-page-hero-content,
.blog-detail-title{
    max-width:760px;
}

.blog-page-eyebrow,
.blog-detail-title span,
.blog-card-kicker{
    display:block;
    color:#aeb6c3;
    font-size:11px;
    font-weight:900;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.blog-page-eyebrow,
.blog-detail-title span{
    margin-bottom:12px;
}

.blog-page-hero h1,
.blog-detail-title h1{
    margin:0;
    color:#ffffff;
    font-size:clamp(42px,4.2vw,68px);
    line-height:1.02;
    font-weight:600;
    letter-spacing:0;
}

.blog-page-hero p,
.blog-detail-title p{
    max-width:650px;
    margin:18px 0 0;
    color:#d7dce5;
    font-size:16px;
    line-height:1.72;
}

.blog-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    color:#d7dce5;
    font-size:12px;
    font-weight:850;
}

.blog-breadcrumb a{
    color:#ffffff;
    text-decoration:none;
}

.blog-breadcrumb span{
    color:#d7dce5;
}

.blog-breadcrumb svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.blog-list-section{
    padding:42px 0 76px;
    background:#f4f4f2;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

.blog-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #deded8;
    box-shadow:0 16px 42px rgba(17,24,39,.055);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.blog-card:hover{
    transform:translateY(-4px);
    border-color:#c8c8c1;
    box-shadow:0 22px 52px rgba(17,24,39,.10);
}

.blog-card-image{
    position:relative;
    width:100%;
    aspect-ratio:1.45;
    display:block;
    overflow:hidden;
    background:#111111;
}

.blog-card-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.2));
    pointer-events:none;
}

.blog-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease,filter .35s ease;
}

.blog-card:hover .blog-card-image img{
    transform:scale(1.045);
    filter:saturate(1.05);
}

.blog-card-content{
    min-height:224px;
    display:flex;
    flex-direction:column;
    padding:22px 22px 20px;
}

.blog-card-kicker{
    margin-bottom:11px;
    color:#8d96a6;
    font-size:10px;
}

.blog-card h3{
    margin:0;
    color:#111111;
    font-size:20px;
    line-height:1.22;
    font-weight:680;
    letter-spacing:0;
}

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

.blog-card p{
    margin:13px 0 20px;
    color:#5f6773;
    font-size:14px;
    line-height:1.68;
}

.blog-card-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:auto;
    color:#111111;
    text-decoration:none;
    font-size:11.5px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.blog-card-link svg,
.blog-detail-side-card a svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.blog-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:34px;
    color:#4b5563;
    font-size:14px;
    font-weight:800;
}

.blog-loading[hidden]{
    display:none;
}

.blog-loading span{
    width:20px;
    height:20px;
    border:2px solid #d1d5db;
    border-top-color:#111111;
    border-radius:50%;
    animation:blogSpin .8s linear infinite;
}

@keyframes blogSpin{
    to{
        transform:rotate(360deg);
    }
}

.blog-empty{
    min-height:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:48px 22px;
    color:#111111;
    background:#ffffff;
    border:1px solid #deded8;
    text-align:center;
}

.blog-empty span{
    width:58px;
    height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    color:#111111;
    border:1px solid #deded8;
    background:#ffffff;
}

.blog-empty svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.blog-empty h3{
    margin:0 0 9px;
    color:#111111;
    font-size:25px;
    line-height:1.25;
    font-weight:600;
}

.blog-empty p{
    max-width:420px;
    margin:0;
    color:#6b7280;
    font-size:14.5px;
    line-height:1.6;
}

.blog-detail-content-section{
    padding:58px 0 78px;
    background:#f4f4f2;
}

.blog-detail-layout{
    max-width:1460px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:34px;
    align-items:start;
}

.blog-detail-main{
    min-width:0;
}

.blog-detail-cover{
    width:100%;
    margin:0 0 26px;
    overflow:hidden;
    background:#111111;
    border:1px solid #deded8;
    box-shadow:0 20px 55px rgba(17,24,39,.08);
}

.blog-detail-cover img{
    width:100%;
    max-height:560px;
    display:block;
    object-fit:cover;
}

.blog-detail-content-card{
    background:#ffffff;
    border:1px solid #deded8;
    box-shadow:0 20px 55px rgba(17,24,39,.06);
}

.blog-detail-content{
    max-width:920px;
    padding:44px;
    color:#1f2937;
    font-size:17px;
    line-height:1.9;
}

.blog-detail-content p{
    margin:0 0 1.15em;
}

.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4{
    margin:1.7em 0 .75em;
    color:#111111;
    line-height:1.22;
    font-weight:700;
    letter-spacing:0;
}

.blog-detail-content h2{
    font-size:30px;
}

.blog-detail-content h3{
    font-size:24px;
}

.blog-detail-content ul,
.blog-detail-content ol{
    margin:0 0 1.25em;
    padding-left:22px;
}

.blog-detail-content li{
    margin-bottom:8px;
}

.blog-detail-content img{
    max-width:100%;
    height:auto;
}

.blog-detail-sidebar{
    position:sticky;
    top:110px;
    display:grid;
    gap:18px;
}

.blog-detail-help-card,
.blog-detail-side-card,
.blog-detail-side-contact{
    background:#ffffff;
    border:1px solid #deded8;
    box-shadow:0 18px 45px rgba(17,24,39,.055);
}

.blog-detail-help-card{
    display:flex;
    gap:15px;
    padding:22px;
}

.blog-detail-help-card.is-whatsapp{
    color:#ffffff;
    background:linear-gradient(135deg,#111111,#1f2937);
    border-color:#111111;
}

.blog-detail-help-icon{
    width:44px;
    min-width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111111;
    background:#f4f4f2;
    border:1px solid #deded8;
}

.blog-detail-help-card.is-whatsapp .blog-detail-help-icon{
    color:#ffffff;
    background:#22c55e;
    border-color:#22c55e;
}

.blog-detail-help-icon svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.blog-detail-help-card.is-whatsapp .blog-detail-help-icon svg{
    fill:currentColor;
    stroke:none;
}

.blog-detail-help-card small,
.blog-detail-side-card span,
.blog-detail-side-contact small{
    display:block;
    margin-bottom:8px;
    color:#6b7280;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.blog-detail-help-card.is-whatsapp small{
    color:#bbf7d0;
}

.blog-detail-help-card strong{
    display:block;
    margin-top:4px;
    margin-bottom:10px;
    color:#111111;
    font-size:21px;
    line-height:1.22;
    font-weight:800;
}

.blog-detail-help-card.is-whatsapp strong{
    color:#ffffff;
}

.blog-detail-help-card p{
    margin:12px 0 18px;
    color:#6b7280;
    font-size:14px;
    line-height:1.65;
}

.blog-detail-help-card.is-whatsapp p{
    color:#d1d5db;
}

.blog-detail-help-card a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 15px;
    color:#111111;
    background:#ffffff;
    border:1px solid #111111;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.blog-detail-help-card.is-whatsapp a{
    color:#ffffff;
    background:#22c55e;
    border-color:#22c55e;
}

.blog-detail-side-card{
    padding:26px;
}

.blog-detail-side-card.is-dark{
    color:#ffffff;
    background:#101010;
    border-color:#101010;
}

.blog-detail-side-card span{
    color:#6b7280;
}

.blog-detail-side-card.is-dark span{
    color:#a1a1aa;
}

.blog-detail-side-card strong{
    display:block;
    color:inherit;
    font-size:23px;
    line-height:1.22;
    font-weight:700;
}

.blog-detail-side-card p{
    margin:14px 0 22px;
    color:#6b7280;
    font-size:14.5px;
    line-height:1.72;
}

.blog-detail-side-card.is-dark p{
    color:#d1d5db;
}

.blog-detail-side-card a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:inherit;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.blog-detail-side-contact{
    padding:22px 24px;
}

.blog-detail-side-contact a{
    color:#111111;
    text-decoration:none;
    font-size:20px;
    font-weight:800;
}

@media(max-width:1300px){
    .blog-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:1100px){
    .blog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .blog-detail-layout{
        grid-template-columns:1fr;
    }

    .blog-detail-sidebar{
        position:static;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:768px){
    .blog-page-hero,
    .blog-detail-hero{
        min-height:280px;
    }

    .blog-page-hero-container,
    .blog-detail-hero-container{
        min-height:280px;
    }

    .blog-list-section{
        padding:42px 0 56px;
    }

    .blog-grid{
        grid-template-columns:1fr;
    }

    .blog-card-content{
        min-height:0;
    }

    .blog-detail-content-section{
        padding:44px 0 56px;
    }

    .blog-detail-title h1{
        font-size:34px;
    }

    .blog-detail-content{
        max-width:100%;
        padding:24px;
        font-size:16px;
    }

    .blog-detail-sidebar{
        grid-template-columns:1fr;
    }

    .blog-detail-help-card{
        flex-direction:column;
    }
}