/* =========================================================
   24x7ServerSupport — Redesigned Native PHP Blog
   ========================================================= */

.blog-page {
    --blog-bg: #f3f7fc;
    --blog-card: #ffffff;
    --blog-border: #d8e5f2;
    --blog-heading: #0b2b52;
    --blog-text: #56657a;
    --blog-muted: #788ba0;
    --blog-blue: #0d6efd;
    --blog-cyan: #22c7f2;
    --blog-dark: #071a33;
    background: var(--blog-bg);
    color: var(--blog-text);
}

.blog-page a {
    text-decoration: none;
}

.blog-hero,
.blog-post-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 18%, rgba(34,199,242,.15), transparent 28%),
        radial-gradient(circle at 12% 88%, rgba(120,98,232,.12), transparent 28%),
        linear-gradient(135deg, #071a33 0%, #0a2c57 100%);
}

.blog-hero {
    padding: 78px 0 72px;
}

.blog-post-hero {
    padding: 62px 0 70px;
}

.blog-hero::before,
.blog-post-hero::before {
    content: "";
    position: absolute;
    right: -145px;
    bottom: -250px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(118,191,244,.13);
    border-radius: 50%;
}

.blog-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(290px,.55fr);
    gap: 55px;
    align-items: center;
}

.blog-kicker,
.blog-side-eyebrow {
    display: inline-flex;
    color: #55d8ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.blog-hero h1,
.blog-post-hero h1 {
    margin: 10px 0 0;
    color: #fff;
    font-size: clamp(2.2rem,4vw,4.25rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.blog-post-hero h1 {
    max-width: 1020px;
}

.blog-hero p,
.blog-post-hero__excerpt {
    max-width: 760px;
    margin: 20px 0 0;
    color: rgba(226,239,251,.8);
    font-size: .98rem;
    line-height: 1.75;
}

.blog-topic-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.blog-topic-links a,
.blog-taxonomy--hero a {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(91,188,244,.25);
    border-radius: 999px;
    background: rgba(13,110,253,.11);
    color: #d5f2ff !important;
    font-size: .66rem;
    font-weight: 750;
}

.blog-hero__spotlight {
    padding: 28px;
    border: 1px solid rgba(102,178,231,.22);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(2, 12, 28, .18);
    backdrop-filter: blur(4px);
}

.blog-hero__spotlight-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(95, 194, 248, .28);
    border-radius: 999px;
    background: rgba(13,110,253,.12);
    color: #a9ebff;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-hero__spotlight h2 {
    margin: 16px 0 10px;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.03em;
}

.blog-hero__spotlight p {
    margin: 0;
    color: rgba(226,239,251,.78);
    font-size: .86rem;
    line-height: 1.7;
}

.blog-highlight-grid {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.blog-highlight-item {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 12px;
    align-items: start;
    padding: 11px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.blog-highlight-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.blog-highlight-item i {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(13,110,253,.14);
    color: #56ddff;
}

.blog-highlight-item strong {
    display: block;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.35;
}

.blog-highlight-item span {
    display: block;
    margin-top: 3px;
    color: rgba(226,239,251,.68);
    font-size: .72rem;
    line-height: 1.6;
}

.blog-hero__spotlight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.blog-hero__ghost-btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: #fff !important;
    font-size: .71rem;
    font-weight: 800;
}

.blog-main-section,
.blog-single-section {
    padding: 54px 0 76px;
}

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 326px;
    gap: 28px;
    align-items: start;
}

.blog-content {
    min-width: 0;
}

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

.blog-card {
    overflow: hidden;
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    background: var(--blog-card);
    box-shadow: 0 14px 38px rgba(11,43,82,.045);
    transition: transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(11,43,82,.08);
}

.blog-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
}

.blog-card__media {
    display: block;
    min-height: 215px;
    overflow: hidden;
    background: #eaf3fb;
}

.blog-card--featured .blog-card__media {
    min-height: 330px;
}

.blog-card__image,
.blog-card__media > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 215px;
    object-fit: cover;
    transition: transform .35s ease;
}

.blog-card:hover .blog-card__image {
    transform: scale(1.025);
}

.blog-image-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 215px;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 70% 25%, rgba(34,199,242,.18), transparent 26%),
        linear-gradient(135deg,#0b2b52,#0d4f91);
    color: #55d8ff;
    font-size: 2rem;
}

.blog-card__body {
    padding: 22px;
}

.blog-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.blog-taxonomy:not(.blog-taxonomy--hero) a,
.blog-post-tags a {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #dce7f2;
    border-radius: 999px;
    background: #f5f9fd;
    color: #456684 !important;
    font-size: .63rem;
    font-weight: 750;
}

.blog-card__title {
    margin: 0 0 11px;
    font-size: 1.14rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.35;
}

.blog-card--featured .blog-card__title {
    font-size: 1.55rem;
}

.blog-card__title a {
    color: var(--blog-heading);
}

.blog-card__meta {
    display: flex;
    gap: 12px;
    margin-bottom: 11px;
    color: var(--blog-muted);
    font-size: .67rem;
    font-weight: 650;
}

.blog-card__meta i {
    margin-right: 5px;
    color: var(--blog-blue);
}

.blog-card__body p {
    margin: 0 0 15px;
    color: var(--blog-text);
    font-size: .81rem;
    line-height: 1.66;
}

.blog-card__read {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blog-blue) !important;
    font-size: .73rem;
    font-weight: 800;
}

.blog-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--blog-border);
    border-radius: 13px;
    background: var(--blog-card);
}

.blog-filter-banner strong {
    display: block;
    color: var(--blog-heading);
    font-size: .78rem;
}

.blog-filter-banner span {
    display: block;
    margin-top: 2px;
    color: var(--blog-muted);
    font-size: .68rem;
}

.blog-filter-banner a {
    color: var(--blog-blue);
    font-size: .7rem;
    font-weight: 750;
}

.blog-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 17px;
}

.blog-side-card {
    padding: 20px;
    border: 1px solid var(--blog-border);
    border-radius: 18px;
    background: var(--blog-card);
    box-shadow: 0 12px 30px rgba(11,43,82,.035);
}

.blog-side-card h3 {
    margin: 0 0 15px;
    color: var(--blog-heading);
    font-size: .94rem;
    font-weight: 800;
}

.blog-side-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.blog-side-card__heading h3 {
    margin-top: 3px;
}

.blog-side-card__heading small {
    color: var(--blog-muted);
    font-size: .63rem;
    font-weight: 700;
}

.blog-side-eyebrow {
    color: var(--blog-blue);
    font-size: .58rem;
}

.blog-search {
    position: relative;
}

.blog-search input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 13px;
    border: 1px solid #d6e3ef;
    border-radius: 11px;
    background: #f8fbfe;
    color: #23405f;
    outline: 0;
}

.blog-search input:focus {
    border-color: #6caafd;
    box-shadow: 0 0 0 4px rgba(13,110,253,.08);
}

.blog-search button {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: var(--blog-blue);
    color: #fff;
    transform: translateY(-50%);
}

.blog-side-links {
    display: grid;
}

.blog-side-links a {
    display: grid;
    grid-template-columns: minmax(0,1fr) 16px;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #edf2f7;
    color: #49637d;
    font-size: .7rem;
    font-weight: 680;
    line-height: 1.4;
}

.blog-side-links a:last-child {
    border-bottom: 0;
}

.blog-side-links i {
    color: #8aa0b7;
    font-size: .62rem;
}


.blog-side-intro {
    margin: 0 0 14px;
    color: var(--blog-muted);
    font-size: .71rem;
    line-height: 1.6;
}

.blog-topic-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.blog-topic-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dce7f2;
    border-radius: 11px;
    background: #f8fbfe;
    color: #48657f !important;
    font-size: .68rem;
    font-weight: 750;
}

.blog-topic-pill small {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(13,110,253,.1);
    color: var(--blog-blue);
    font-size: .61rem;
    font-weight: 800;
}

.blog-side-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--blog-blue) !important;
    font-size: .7rem;
    font-weight: 800;
}

.blog-page-number-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 7px;
}

.blog-page-number-grid a {
    display: inline-flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e5f0;
    border-radius: 9px;
    background: #f8fbfe;
    color: #526c85;
    font-size: .68rem;
    font-weight: 750;
}

.blog-page-number-grid a:hover,
.blog-page-number-grid a.is-active {
    border-color: var(--blog-blue);
    background: var(--blog-blue);
    color: #fff;
}

.blog-side-card--cta {
    border-color: #193f69;
    background:
        radial-gradient(circle at 100% 0,rgba(34,199,242,.13),transparent 35%),
        #0b2b52;
}

.blog-side-card--cta > span {
    color: #55d8ff;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blog-side-card--cta h3 {
    margin-top: 7px;
    color: #fff;
    font-size: 1.05rem;
}

.blog-side-card--cta p {
    color: rgba(225,237,250,.72);
    font-size: .74rem;
    line-height: 1.58;
}

.blog-btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 10px;
    background: linear-gradient(90deg,#0d6efd,#7862e8);
    color: #fff !important;
    font-size: .71rem;
    font-weight: 800;
}

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-top: 30px;
}

.blog-page-link {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid #d5e2ee;
    border-radius: 9px;
    background: var(--blog-card);
    color: #506980 !important;
    font-size: .69rem;
    font-weight: 750;
}

.blog-page-link.is-active {
    border-color: var(--blog-blue);
    background: var(--blog-blue);
    color: #fff !important;
}

.blog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 23px;
    color: rgba(218,235,250,.55);
    font-size: .65rem;
}

.blog-breadcrumb a {
    color: rgba(235,245,255,.8);
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    color: rgba(220,236,249,.69);
    font-size: .7rem;
    font-weight: 650;
}

.blog-post-meta i {
    margin-right: 6px;
    color: #55d8ff;
}

.blog-featured-wrap {
    position: relative;
    z-index: 2;
    margin-top: -36px;
}

.blog-featured-image {
    display: block;
    width: 100%;
    max-height: 570px;
    object-fit: cover;
    border: 5px solid #fff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(9,35,66,.14);
}

.blog-article-card {
    padding: 32px;
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    background: var(--blog-card);
}

.blog-article-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e5edf5;
}

.blog-article-tools button,
.blog-article-tools a {
    display: inline-flex;
    min-height: 35px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dbe6f1;
    border-radius: 9px;
    background: #f7fafd;
    color: #536d87;
    font-size: .67rem;
    font-weight: 700;
    cursor: pointer;
}

.blog-article-tools button {
    font-family: inherit;
}

.blog-article-content {
    color: #445b73;
    font-size: .94rem;
    line-height: 1.82;
}

.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
    margin-top: 1.8em;
    margin-bottom: .7em;
    color: var(--blog-heading);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.blog-article-content h2 {
    padding-bottom: 8px;
    border-bottom: 1px solid #e6eef6;
    font-size: 1.55rem;
}

.blog-article-content h3 {
    font-size: 1.27rem;
}

.blog-article-content a {
    color: var(--blog-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: 12px;
}

.blog-article-content pre {
    overflow-x: auto;
    margin: 20px 0;
    padding: 18px;
    border-radius: 13px;
    background: #071a33;
    color: #dcecff;
    font-size: .8rem;
    line-height: 1.62;
}

.blog-article-content code {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

.blog-article-content :not(pre) > code {
    padding: 2px 5px;
    border-radius: 5px;
    background: #edf4fa;
    color: #ad285e;
}

.blog-article-content blockquote {
    margin: 22px 0;
    padding: 17px 20px;
    border-left: 4px solid var(--blog-blue);
    border-radius: 0 12px 12px 0;
    background: #f2f7fc;
    color: #466079;
}

.blog-article-content table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

.blog-article-content th,
.blog-article-content td {
    padding: 10px;
    border: 1px solid #dbe6f1;
    text-align: left;
}

.blog-article-content th {
    background: #edf5fb;
    color: var(--blog-heading);
}

.blog-post-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5edf5;
}

.blog-post-tags > strong {
    display: block;
    margin-bottom: 9px;
    color: var(--blog-heading);
    font-size: .74rem;
}

.blog-post-tags > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

.blog-post-nav__item {
    display: block;
    padding: 17px;
    border: 1px solid var(--blog-border);
    border-radius: 14px;
    background: var(--blog-card);
}

.blog-post-nav__item--next {
    text-align: right;
}

.blog-post-nav__item span {
    display: block;
    margin-bottom: 5px;
    color: var(--blog-blue);
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blog-post-nav__item strong {
    display: block;
    color: var(--blog-heading);
    font-size: .78rem;
    line-height: 1.42;
}

.blog-related-section {
    margin-top: 38px;
}

.blog-section-heading {
    margin-bottom: 17px;
}

.blog-section-heading h2 {
    margin: 5px 0;
    color: var(--blog-heading);
    font-size: 1.48rem;
    font-weight: 800;
}

.blog-section-heading p {
    margin: 0;
    color: var(--blog-muted);
    font-size: .75rem;
}

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

.blog-related-card {
    overflow: hidden;
    border: 1px solid var(--blog-border);
    border-radius: 15px;
    background: var(--blog-card);
}

.blog-related-card__media {
    display: block;
    height: 130px;
    overflow: hidden;
}

.blog-related-image,
.blog-related-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-related-card__media .blog-image-placeholder {
    min-height: 130px;
}

.blog-related-card__body {
    padding: 13px;
}

.blog-related-card small {
    color: var(--blog-muted);
    font-size: .59rem;
}

.blog-related-card h3 {
    margin: 5px 0 8px;
    font-size: .76rem;
    line-height: 1.38;
}

.blog-related-card h3 a {
    color: var(--blog-heading);
}

.blog-author-box {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--blog-border);
    border-radius: 16px;
    background: var(--blog-card);
}

.blog-author-box__icon {
    display: flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf4ff;
    color: var(--blog-blue);
}

.blog-author-box small {
    color: var(--blog-muted);
    font-size: .62rem;
    text-transform: uppercase;
}

.blog-author-box h3 {
    margin: 2px 0 5px;
    color: var(--blog-heading);
    font-size: .91rem;
}

.blog-author-box p {
    margin: 0;
    color: var(--blog-text);
    font-size: .74rem;
}

html[data-theme="dark"] .blog-page {
    --blog-bg: #0b1220;
    --blog-card: #111827;
    --blog-border: #334155;
    --blog-heading: #f1f5f9;
    --blog-text: #cbd5e1;
    --blog-muted: #94a3b8;
}

html[data-theme="dark"] .blog-search input,
html[data-theme="dark"] .blog-page-number-grid a,
html[data-theme="dark"] .blog-taxonomy:not(.blog-taxonomy--hero) a,
html[data-theme="dark"] .blog-post-tags a,
html[data-theme="dark"] .blog-article-tools button,
html[data-theme="dark"] .blog-article-tools a {
    border-color: #334155;
    background: #162033;
    color: #cbd5e1;
}

html[data-theme="dark"] .blog-article-content {
    color: #cbd5e1;
}

html[data-theme="dark"] .blog-article-content h2,
html[data-theme="dark"] .blog-article-tools,
html[data-theme="dark"] .blog-post-tags,
html[data-theme="dark"] .blog-side-links a {
    border-color: #27364b;
}

html[data-theme="dark"] .blog-article-content :not(pre) > code {
    background: #1c2a3d;
    color: #f4a2c4;
}

html[data-theme="dark"] .blog-article-content blockquote {
    background: #111d2e;
    color: #cbd5e1;
}

html[data-theme="dark"] .blog-article-content th {
    background: #162033;
}

html[data-theme="dark"] .blog-featured-image {
    border-color: #111827;
}

@media (max-width:1199.98px) {
    .blog-layout {
        grid-template-columns: minmax(0,1fr) 292px;
    }

    
.blog-side-intro {
    margin: 0 0 14px;
    color: var(--blog-muted);
    font-size: .71rem;
    line-height: 1.6;
}

.blog-topic-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.blog-topic-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dce7f2;
    border-radius: 11px;
    background: #f8fbfe;
    color: #48657f !important;
    font-size: .68rem;
    font-weight: 750;
}

.blog-topic-pill small {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(13,110,253,.1);
    color: var(--blog-blue);
    font-size: .61rem;
    font-weight: 800;
}

.blog-side-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--blog-blue) !important;
    font-size: .7rem;
    font-weight: 800;
}

.blog-page-number-grid {
        grid-template-columns: repeat(4,1fr);
    }
}

@media (max-width:991.98px) {
    .blog-hero {
        padding: 58px 0;
    }

    .blog-hero__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .blog-hero__panel {
        max-width: 480px;
    }

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

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

    .blog-side-card--cta,
    .blog-sidebar .blog-side-card:nth-last-child(1) {
        grid-column: 1 / -1;
    }

    
.blog-side-intro {
    margin: 0 0 14px;
    color: var(--blog-muted);
    font-size: .71rem;
    line-height: 1.6;
}

.blog-topic-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.blog-topic-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dce7f2;
    border-radius: 11px;
    background: #f8fbfe;
    color: #48657f !important;
    font-size: .68rem;
    font-weight: 750;
}

.blog-topic-pill small {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(13,110,253,.1);
    color: var(--blog-blue);
    font-size: .61rem;
    font-weight: 800;
}

.blog-side-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--blog-blue) !important;
    font-size: .7rem;
    font-weight: 800;
}

.blog-page-number-grid {
        grid-template-columns: repeat(8,1fr);
    }
}

@media (max-width:767.98px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card--featured {
        display: block;
    }

    .blog-card--featured .blog-card__media {
        min-height: 230px;
    }

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

    .blog-related-card {
        display: grid;
        grid-template-columns: 120px minmax(0,1fr);
    }

    .blog-related-card__media {
        height: 100%;
        min-height: 125px;
    }

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

    .blog-post-nav__item--next {
        text-align: left;
    }
}

@media (max-width:575.98px) {
    .blog-hero,
    .blog-post-hero {
        padding: 46px 0;
    }

    .blog-main-section,
    .blog-single-section {
        padding: 35px 0 54px;
    }

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

    .blog-side-card--cta,
    .blog-sidebar .blog-side-card:nth-last-child(1) {
        grid-column: auto;
    }

    
.blog-side-intro {
    margin: 0 0 14px;
    color: var(--blog-muted);
    font-size: .71rem;
    line-height: 1.6;
}

.blog-topic-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.blog-topic-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dce7f2;
    border-radius: 11px;
    background: #f8fbfe;
    color: #48657f !important;
    font-size: .68rem;
    font-weight: 750;
}

.blog-topic-pill small {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(13,110,253,.1);
    color: var(--blog-blue);
    font-size: .61rem;
    font-weight: 800;
}

.blog-side-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--blog-blue) !important;
    font-size: .7rem;
    font-weight: 800;
}

.blog-page-number-grid {
        grid-template-columns: repeat(6,1fr);
    }

    .blog-article-card {
        padding: 20px 17px;
        border-radius: 16px;
    }

    .blog-article-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .blog-related-card {
        grid-template-columns: 105px minmax(0,1fr);
    }

    .blog-filter-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}


html[data-theme="dark"] .blog-topic-pill {
    border-color: #334155;
    background: #162033;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .blog-topic-pill small {
    background: rgba(13,110,253,.16);
    color: #8fd6ff;
}


/* =========================================================
   BLOG HOME V4 — MAIN WEBSITE / PREMIUM LUXURY DIRECTION
   Scoped to .blog-home-v4 so article layouts remain unchanged.
   ========================================================= */

.blog-home-v4 {
    background:
        linear-gradient(180deg, #f7faff 0, #f3f7fc 38%, #f8fbff 100%);
}

.blog-home-v4-hero {
    position: relative;
    overflow: hidden;
    padding: 82px 0 74px;
    background:
        radial-gradient(circle at 83% 12%, rgba(34,199,242,.16), transparent 26%),
        radial-gradient(circle at 8% 95%, rgba(120,98,232,.14), transparent 30%),
        linear-gradient(135deg, #061a32 0%, #0a2a51 48%, #0a3765 100%);
}

.blog-home-v4-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -180px;
    width: 630px;
    height: 630px;
    border: 1px solid rgba(131,203,247,.12);
    border-radius: 50%;
}

.blog-home-v4-hero::after {
    content: "";
    position: absolute;
    left: 48%;
    bottom: -270px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(91,181,241,.08);
    border-radius: 50%;
}

.blog-home-v4-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(390px,.88fr);
    gap: 62px;
    align-items: center;
}

.blog-home-v4-eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    color: #77dfff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-home-v4-eyebrow i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6888ff;
    box-shadow: 0 0 0 4px rgba(104,136,255,.09);
}

.blog-home-v4-hero__copy h1 {
    max-width: 850px;
    margin: 16px 0 0;
    color: #fff;
    font-size: clamp(2.55rem,4.45vw,5rem);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1.01;
}

.blog-home-v4-hero__copy > p {
    max-width: 720px;
    margin: 22px 0 0;
    color: rgba(225,238,250,.8);
    font-size: 1rem;
    line-height: 1.8;
}

.blog-home-v4-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 29px;
}

.blog-home-v4-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-home-v4-btn:hover {
    transform: translateY(-1px);
}

.blog-home-v4-btn--primary {
    border: 1px solid #0d6efd;
    background: linear-gradient(90deg,#0d6efd,#496cff 58%,#7862e8);
    color: #fff !important;
    box-shadow: 0 13px 30px rgba(13,110,253,.22);
}

.blog-home-v4-btn--primary:hover {
    box-shadow: 0 17px 36px rgba(13,110,253,.3);
}

.blog-home-v4-btn--ghost,
.blog-home-v4-btn--dark-ghost {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.055);
    color: #eff8ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.blog-home-v4-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 17px 23px;
    margin-top: 26px;
    color: rgba(218,234,248,.68);
    font-size: .68rem;
    font-weight: 650;
}

.blog-home-v4-proof span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.blog-home-v4-proof i {
    color: #39d5af;
}

.blog-home-v4-desk {
    padding: 24px;
    border: 1px solid rgba(105,181,234,.22);
    border-radius: 24px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 24px 60px rgba(2,14,30,.2);
    backdrop-filter: blur(8px);
}

.blog-home-v4-desk__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.blog-home-v4-desk__kicker {
    display: block;
    margin-bottom: 5px;
    color: #73dfff;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.blog-home-v4-desk__top strong {
    display: block;
    max-width: 270px;
    color: #fff;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.42;
}

.blog-home-v4-live {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(54,220,173,.17);
    border-radius: 999px;
    background: rgba(29,194,146,.08);
    color: #7ce2bf;
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blog-home-v4-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #39d5a7;
    box-shadow: 0 0 0 5px rgba(57,213,167,.08);
}

.blog-home-v4-featured {
    position: relative;
    display: grid;
    grid-template-columns: 47px minmax(0,1fr) 20px;
    gap: 13px;
    align-items: start;
    margin-top: 18px;
    padding: 17px;
    border: 1px solid rgba(104,187,240,.16);
    border-radius: 16px;
    background: rgba(7,31,57,.38);
    color: #fff !important;
}

.blog-home-v4-featured__icon {
    display: inline-flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg,rgba(13,110,253,.25),rgba(34,199,242,.11));
    color: #5ee1ff;
}

.blog-home-v4-featured small {
    display: block;
    margin-bottom: 5px;
    color: #83dfff;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blog-home-v4-featured h2 {
    margin: 0;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.45;
}

.blog-home-v4-featured__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 7px;
    color: rgba(226,239,251,.58);
    font-size: .61rem;
}

.blog-home-v4-featured__meta i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(214,236,250,.36);
}

.blog-home-v4-featured__arrow {
    margin-top: 3px;
    color: rgba(215,237,251,.45);
    font-size: .66rem;
}

.blog-home-v4-desk__lines {
    display: grid;
    margin-top: 10px;
}

.blog-home-v4-desk__lines > a {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 12px;
    gap: 11px;
    align-items: center;
    padding: 11px 3px;
    border-bottom: 1px solid rgba(255,255,255,.075);
    color: #fff !important;
}

.blog-home-v4-desk__lines > a:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.blog-home-v4-desk__line-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,.055);
    color: #56d9ff;
}

.blog-home-v4-desk__lines strong {
    display: block;
    color: #eef8ff;
    font-size: .72rem;
    font-weight: 800;
}

.blog-home-v4-desk__lines small {
    display: block;
    margin-top: 2px;
    color: rgba(220,236,249,.55);
    font-size: .61rem;
    line-height: 1.45;
}

.blog-home-v4-desk__lines > a > i {
    color: rgba(217,237,251,.35);
    font-size: .58rem;
}

.blog-home-v4-trust {
    position: relative;
    z-index: 3;
    margin-top: -1px;
    padding: 0;
    border-bottom: 1px solid #dbe6f1;
    background: rgba(255,255,255,.95);
    box-shadow: 0 10px 30px rgba(8,40,75,.035);
}

.blog-home-v4-trust__grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.blog-home-v4-trust__item {
    padding: 22px 26px;
    border-left: 1px solid #e2ebf4;
}

.blog-home-v4-trust__item:first-child {
    border-left: 0;
}

.blog-home-v4-trust__item span {
    display: block;
    color: #0d6efd;
    font-size: .77rem;
    font-weight: 850;
}

.blog-home-v4-trust__item strong {
    display: block;
    margin-top: 3px;
    color: #476078;
    font-size: .68rem;
    font-weight: 700;
}

.blog-home-v4-expertise {
    padding: 72px 0 70px;
}

.blog-home-v4-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}

.blog-home-v4-section-heading > div {
    max-width: 790px;
}

.blog-home-v4-section-kicker {
    display: block;
    margin-bottom: 7px;
    color: #0d6efd;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.blog-home-v4-section-heading h2 {
    margin: 0;
    color: #0b2b52;
    font-size: clamp(1.8rem,3vw,2.7rem);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.blog-home-v4-section-heading p {
    margin: 10px 0 0;
    color: #667a91;
    font-size: .84rem;
    line-height: 1.7;
}

.blog-home-v4-section-heading > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: #0d6efd !important;
    font-size: .72rem;
    font-weight: 800;
}

.blog-home-v4-expertise__grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
}

.blog-home-v4-expertise-card {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0,1fr) 18px;
    gap: 14px;
    align-items: start;
    min-height: 177px;
    padding: 21px;
    overflow: hidden;
    border: 1px solid #d9e5f0;
    border-radius: 18px;
    background:
        linear-gradient(145deg,#fff 0%,#f9fbfe 100%);
    box-shadow: 0 14px 36px rgba(10,43,80,.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-home-v4-expertise-card::before {
    content: "";
    position: absolute;
    top: -48px;
    right: -48px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(13,110,253,.08),transparent 67%);
}

.blog-home-v4-expertise-card:hover {
    border-color: #bed6ee;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(10,43,80,.075);
}

.blog-home-v4-expertise-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe9f7;
    border-radius: 14px;
    background: linear-gradient(145deg,#eaf5ff,#f2efff);
    color: #0d6efd;
    font-size: 1rem;
}

.blog-home-v4-expertise-card small {
    display: block;
    margin-bottom: 4px;
    color: #6d83a0;
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.blog-home-v4-expertise-card h3 {
    margin: 0;
    color: #0b2b52;
    font-size: .92rem;
    font-weight: 850;
    line-height: 1.35;
}

.blog-home-v4-expertise-card p {
    margin: 8px 0 0;
    color: #65778b;
    font-size: .7rem;
    line-height: 1.62;
}

.blog-home-v4-expertise-card__arrow {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    color: #9aabc0;
    font-size: .66rem;
}

.blog-home-v4-articles {
    padding: 72px 0 78px;
    border-top: 1px solid #e1eaf3;
    background:
        linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%);
}

.blog-home-v4-section-heading--articles {
    margin-bottom: 27px;
}

.blog-home-v4-cta {
    padding: 0 0 76px;
    background: #f3f7fc;
}

.blog-home-v4-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(330px,.7fr);
    gap: 48px;
    align-items: center;
    overflow: hidden;
    padding: 37px 40px;
    border: 1px solid #153d68;
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 10%,rgba(34,199,242,.12),transparent 28%),
        linear-gradient(135deg,#071a33,#0a315e);
    box-shadow: 0 20px 50px rgba(7,26,51,.12);
}

.blog-home-v4-cta__inner::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -220px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(116,194,244,.12);
    border-radius: 50%;
}

.blog-home-v4-cta h2 {
    margin: 6px 0 0;
    color: #fff;
    font-size: clamp(1.7rem,2.8vw,2.5rem);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.blog-home-v4-cta p {
    max-width: 760px;
    margin: 12px 0 0;
    color: rgba(224,237,249,.72);
    font-size: .79rem;
    line-height: 1.7;
}

.blog-home-v4-cta .blog-home-v4-section-kicker {
    color: #63dcff;
}

.blog-home-v4-cta__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

html[data-theme="dark"] .blog-home-v4 {
    background: #0b1220;
}

html[data-theme="dark"] .blog-home-v4-trust {
    border-color: #24354a;
    background: #101827;
}

html[data-theme="dark"] .blog-home-v4-trust__item {
    border-color: #26384d;
}

html[data-theme="dark"] .blog-home-v4-trust__item strong,
html[data-theme="dark"] .blog-home-v4-section-heading p,
html[data-theme="dark"] .blog-home-v4-expertise-card p {
    color: #aab9c9;
}

html[data-theme="dark"] .blog-home-v4-section-heading h2,
html[data-theme="dark"] .blog-home-v4-expertise-card h3 {
    color: #f1f5f9;
}

html[data-theme="dark"] .blog-home-v4-expertise-card {
    border-color: #334155;
    background: linear-gradient(145deg,#111827,#111c2c);
}

html[data-theme="dark"] .blog-home-v4-expertise-card__icon {
    border-color: #334155;
    background: linear-gradient(145deg,#17263a,#201e3b);
    color: #68cfff;
}

html[data-theme="dark"] .blog-home-v4-articles {
    border-color: #23344a;
    background: #0b1220;
}

@media (max-width:1199.98px) {
    .blog-home-v4-hero__grid {
        grid-template-columns: minmax(0,1fr) 380px;
        gap: 42px;
    }

    .blog-home-v4-expertise__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:991.98px) {
    .blog-home-v4-hero {
        padding: 62px 0 58px;
    }

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

    .blog-home-v4-desk {
        max-width: 680px;
    }

    .blog-home-v4-trust__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .blog-home-v4-trust__item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e2ebf4;
    }

    .blog-home-v4-trust__item:nth-child(4) {
        border-top: 1px solid #e2ebf4;
    }

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

    .blog-home-v4-cta__actions {
        justify-content: flex-start;
    }
}

@media (max-width:767.98px) {
    .blog-home-v4-hero__copy {
        min-width: 0;
    }

    .blog-home-v4-hero__copy h1 {
        max-width: 100%;
        font-size: clamp(2rem,8.4vw,3rem);
        letter-spacing: -.04em;
        line-height: 1.12;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .blog-home-v4-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .blog-home-v4-cta__inner {
        padding: 29px 24px;
    }
}

@media (max-width:575.98px) {
    .blog-home-v4-hero {
        padding: 48px 0 44px;
    }

    .blog-home-v4-eyebrow {
        gap: 7px;
        font-size: .62rem;
        line-height: 1.6;
    }

    .blog-home-v4-actions,
    .blog-home-v4-cta__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .blog-home-v4-btn {
        width: 100%;
    }

    .blog-home-v4-proof {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .blog-home-v4-desk {
        padding: 18px;
        border-radius: 19px;
    }

    .blog-home-v4-featured {
        grid-template-columns: 42px minmax(0,1fr);
    }

    .blog-home-v4-featured__arrow {
        display: none;
    }

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

    .blog-home-v4-trust__item,
    .blog-home-v4-trust__item:nth-child(3),
    .blog-home-v4-trust__item:nth-child(4) {
        border-top: 1px solid #e2ebf4;
        border-left: 0;
    }

    .blog-home-v4-trust__item:first-child {
        border-top: 0;
    }

    .blog-home-v4-expertise,
    .blog-home-v4-articles {
        padding: 50px 0;
    }

    .blog-home-v4-expertise-card {
        grid-template-columns: 45px minmax(0,1fr) 15px;
        min-height: 0;
        padding: 18px;
    }

    .blog-home-v4-expertise-card__icon {
        width: 45px;
        height: 45px;
    }
}


/* =========================================================
   FONT-INDEPENDENT SVG ICONS + FLOATING SOCIAL RAIL
   Prevents blank-square icons when Font Awesome webfonts fail.
   ========================================================= */

.blog-svg-icon-host {
    display: inline-flex !important;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    font-style: normal !important;
    line-height: 1 !important;
    vertical-align: -.08em;
}

.blog-svg-icon-host::before {
    content: none !important;
    display: none !important;
}

.blog-svg-icon-host > svg,
.blog-scroll-svg > svg,
.blog-floating-social svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-svg-icon-host .blog-brand-svg,
.blog-floating-social .blog-brand-svg {
    stroke-width: 1.75;
}

/* Shared footer social icons rendered by inline SVG on blog pages. */
.modern-footer__socials a .blog-svg-icon-host,
.footer-social a .blog-svg-icon-host {
    width: 17px;
    height: 17px;
}

/* Replace the Font Awesome glyph inside the shared scroll-to-top button. */
.blog-scroll-svg-fixed > [class*="fa-"] {
    display: none !important;
}

.blog-scroll-svg {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.blog-floating-social {
    position: fixed;
    z-index: 1090;
    top: 50%;
    left: 14px;
    right: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(123, 178, 232, .22);
    border-radius: 17px;
    background: rgba(7, 26, 51, .88);
    box-shadow: 0 16px 42px rgba(5, 24, 48, .22);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
}

.blog-floating-social__link {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(140, 198, 238, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: #d9efff !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.blog-floating-social__link:hover,
.blog-floating-social__link:focus-visible {
    border-color: rgba(91, 216, 255, .42);
    background: linear-gradient(145deg, rgba(13, 110, 253, .36), rgba(34, 199, 242, .14));
    color: #ffffff !important;
    transform: translateX(3px);
}

.blog-floating-social__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.blog-floating-social__link::before {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    right: auto;
    padding: 7px 10px;
    border: 1px solid rgba(123, 178, 232, .20);
    border-radius: 8px;
    background: #071a33;
    color: #ffffff;
    font-size: .67rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 9px 24px rgba(2, 12, 28, .22);
    opacity: 0;
    pointer-events: none;
    transform: translate(-6px, -50%);
    transition: opacity .16s ease, transform .16s ease;
}

.blog-floating-social__link:hover::before,
.blog-floating-social__link:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%);
}

.blog-floating-social__link--whatsapp:hover {
    background: rgba(37, 211, 102, .22);
    border-color: rgba(37, 211, 102, .46);
}

.blog-floating-social__link--youtube:hover {
    background: rgba(255, 0, 0, .18);
    border-color: rgba(255, 94, 94, .42);
}

.blog-floating-social__link--instagram:hover {
    background: linear-gradient(145deg, rgba(225, 48, 108, .25), rgba(88, 81, 219, .22));
    border-color: rgba(225, 85, 143, .42);
}

html[data-theme="light"] .blog-floating-social {
    border-color: rgba(36, 90, 143, .14);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 36px rgba(20, 62, 102, .15);
}

html[data-theme="light"] .blog-floating-social__link {
    border-color: #d8e5f2;
    background: #f5f9fd;
    color: #28577f !important;
}

html[data-theme="light"] .blog-floating-social__link:hover,
html[data-theme="light"] .blog-floating-social__link:focus-visible {
    color: #ffffff !important;
}

@media (max-width: 991.98px) {
    .blog-floating-social {
        left: 8px;
        right: auto;
        gap: 6px;
        padding: 6px;
        border-radius: 14px;
    }

    .blog-floating-social__link {
        width: 39px;
        height: 39px;
        border-radius: 10px;
    }

    .blog-floating-social__icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 575.98px) {
    .blog-floating-social {
        left: 5px;
        right: auto;
        padding: 5px;
        gap: 5px;
        background: rgba(7, 26, 51, .92);
    }

    .blog-floating-social__link {
        width: 36px;
        height: 36px;
    }

    .blog-floating-social__link::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-floating-social__link,
    .blog-floating-social__link::before {
        transition: none;
    }
}