/* Blog Bundle CSS - Combined for performance */
/* Generated: Tue Jan 13 03:56:25 +07 2026 */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
}

main {
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

b, strong {
    font-weight: bolder;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
}

button, select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: vertical;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

[hidden] {
    display: none;
}
:root {
    /* Background Colors */
    --color-bg-primary: #090909;
    --color-bg-secondary: #090909;
    --color-bg-tertiary: #0F0F10;
    --color-bg-card: #0F0F10;
    --color-bg-card-alt: #191919;
    --color-bg-card-gradient: linear-gradient(156.82deg, #191919 -35.47%, #121212 112.86%);

    /* Border Colors */
    --color-border-primary: #2F2F32;
    --color-border-secondary: #202020;
    --color-border-tertiary: #424550;
    --color-border-muted: #4D4F45;
    --color-border-dashed: #3F3F3F;

    /* Accent Colors */
    --color-accent-primary: #CDF850;
    --color-accent-secondary: #D7FF1F;
    --color-accent-text: #3B3D36;

    /* Text Colors */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #FEFFFC;
    --color-text-tertiary: #FBFCF7;
    --color-text-muted: #9B9F8E;
    --color-text-muted-alt: #777A6C;
    --color-text-disabled: #4D4F45;
    --color-text-dark: #171816;
    --color-text-dark-alt: #3B3D36;
    --color-text-light: #DBE0CC;
    --color-text-light-alt: #ADB29D;

    /* Logo Gradient Colors */
    --color-logo-1: #0000FF;
    --color-logo-2: #004CFF;
    --color-logo-3: #008CFF;
    --color-logo-4: #00D4FF;
    --color-logo-5: #16FFE1;
    --color-logo-6: #3CFFBA;
    --color-logo-7: #60FF97;
    --color-logo-8: #8DFF6A;
    --color-logo-9: #94FF63;
    --color-logo-10: #CAFF2C;
    --color-logo-11: #FFE200;
    --color-logo-12: #FFA300;
    --color-logo-13: #FF6C00;
    --color-logo-14: #FF3000;
    --color-logo-15: #DF0000;
    --color-logo-16: #AD0000;

    /* Gradients */
    --gradient-headline: linear-gradient(244.79deg, #FCFDFB 31.54%, #777A6F 178.83%);
    --gradient-section-bg: linear-gradient(180deg, rgba(155, 159, 142, 0.08) 0%, rgba(0, 0, 0, 0) 100%);

    /* Typography - Font Families */
    --font-primary: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Roobert', 'Rubik', sans-serif;

    /* Typography - Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 52px;

    /* Typography - Line Heights */
    --leading-xs: 12px;
    --leading-sm: 18px;
    --leading-base: 20px;
    --leading-lg: 24px;
    --leading-xl: 28px;
    --leading-2xl: 36px;
    --leading-3xl: 60px;
    --leading-relaxed: 22px;

    /* Typography - Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;

    /* Typography - Letter Spacing */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.03em;

    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 10px;
    --spacing-4: 12px;
    --spacing-5: 14px;
    --spacing-6: 16px;
    --spacing-7: 18px;
    --spacing-8: 20px;
    --spacing-10: 26px;
    --spacing-12: 28px;
    --spacing-14: 30px;
    --spacing-16: 32px;
    --spacing-20: 40px;
    --spacing-24: 48px;
    --spacing-32: 64px;
    --spacing-40: 80px;
    --spacing-64: 128px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-base: 12px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-2xl: 20px;
    --radius-3xl: 30px;
    --radius-full: 100px;

    /* Shadows */
    --shadow-card: 0px 4px 24px rgba(0, 0, 0, 0.25);

    /* Backdrop Blur */
    --blur-sm: blur(6.7px);
    --blur-md: blur(15px);
    --blur-lg: blur(30.8px);
    --blur-xl: blur(50px);

    /* Layout */
    --page-width: 1366px;
    --content-width: 1044px;
    --header-height: 80px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-Index */
    --z-dropdown: 100;
    --z-header: 1000;
    --z-modal: 2000;
    --z-toast: 3000;

    /* Mobile Responsive */
    --mobile-width: 375px;
    --mobile-breakpoint: 640px;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: var(--color-accent-primary);
    color: var(--color-text-dark);
}

a {
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-primary);
}

img {
    user-select: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-gradient {
    background: var(--gradient-headline);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-accent {
    color: var(--color-accent-primary);
}

.text-muted {
    color: var(--color-text-muted);
}

.heading-1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-3xl);
}

.heading-2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-light);
    font-style: italic;
    line-height: var(--leading-3xl);
}

.heading-3 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-xl);
}

.heading-4 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-base);
}

.body-large {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
}

.body-base {
    font-size: var(--text-base);
    line-height: var(--leading-base);
}

.body-small {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.body-xs {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    letter-spacing: var(--tracking-wider);
}
html {
    overflow-x: hidden;
}

body {
    position: relative;
    min-width: var(--page-width);
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: clip;
}

.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-10);
}

.section__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-8);
}

main {
    padding-top: var(--header-height);
}

section {
    position: relative;
    padding: var(--spacing-24) 0;
}

.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-light);
    font-style: italic;
    line-height: var(--leading-3xl);
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.section-title--display {
    font-family: var(--font-primary);
    font-size: 52px;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
}

.section-title--display-bold {
    font-weight: 700;
    font-style: normal;
}

.section-title--display-italic {
    font-weight: 300;
    font-style: italic;
}

.section-subtitle {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: var(--spacing-16);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-6 {
    gap: var(--spacing-6);
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-12 {
    gap: var(--spacing-12);
}

.gap-20 {
    gap: var(--spacing-8);
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.text-center {
    text-align: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt-8 {
    margin-top: var(--spacing-8);
}

.mt-16 {
    margin-top: var(--spacing-16);
}

.mb-8 {
    margin-bottom: var(--spacing-8);
}

.mb-16 {
    margin-bottom: var(--spacing-16);
}
/* Dark spots layer - below background images */
.page-background-spots {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--page-width);
    margin-left: calc(var(--page-width) / -2);
    pointer-events: none;
    z-index: -1;
}

.page-background-spot {
    position: absolute;
    background: #000000;
    filter: blur(40px);
    border-radius: 161px;
}

/* Spot 1: Below explore section */
.page-background-spot--explore {
    width: 323px;
    height: 1278px;
    left: 89px;
    top: 1268px;
}

/* Spot 2: Under metalayer slide icons */
.page-background-spot--metalayer {
    width: 537px;
    height: 440px;
    left: 199px;
    top: 3229px;
}

/* Background images layer */
.page-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--page-width);
    margin-left: calc(var(--page-width) / -2);
    pointer-events: none;
    z-index: 0;
}

.page-background__image {
    position: absolute;
    pointer-events: none;
    max-width: none;
}

/* 1hero: 1469 x 1036 */
.page-background__image--hero {
    width: 741px;
    height: auto;
    top: 1px;
    left: 44%;
    margin-left: -837px;
    opacity: 5%;
}

/* 2stats: 1922 x 1816 */
.page-background__image--stats {
    width: 820px;
    height: auto;
    top: 297px;
    left: 100%;
    margin-left: -961px;
}

/* 3explore: 1896 x 1711 */
.page-background__image--explore {
    width: 748px;
    height: auto;
    top: 1111px;
    left: 37%;
    margin-left: -948px;
}

/* 4whitelabel: 3397 x 3025 */
.page-background__image--whitelabel {
    width: 1563px;
    height: auto;
    top: 2109px;
    left: 157%;
    margin-left: -1698px;
}

/* 5investors: 2271 x 2141 */
.page-background__image--investors {
    width: 1212px;
    height: auto;
    top: 3600px;
    left: 49%;
    margin-left: -1135px;
}

/* 6footer: 2971 x 2578 */
.page-background__image--footer {
    width: 1170px;
    height: auto;
    top: 5213px;
    left: 80%;
    margin-left: -698px;
    opacity: 3%;
}

/* Blog pages background images */

/* Top background for blog main page */
.page-background__image--blog-main-top {
    width: 748px;
    height: 339px;
    top: 597px;
    left: 89%;
    margin-left: -1698px;
}

/* Middle background for blog main page */
.page-background__image--blog-main-middle {
    width: 1236px;
    height: 1015px;
    top: 273px;
    left: 156%;
    margin-left: -1703px;
    transform: rotate(-10deg);
}

/* Middle 2 background for blog main page */
.page-background__image--blog-main-middle2 {
    width: 1498px;
    height: 677px;
    top: 1057px;
    left: 167%;
    margin-left: -1698px;
}

/* Bottom background for blog main page */
.page-background__image--blog-main-bottom {
    width: 1117px;
    height: 529px;
    bottom: 207px;
    left: 98%;
    margin-left: -1698px;
}

/* Top background for blog category page */
.page-background__image--blog-category-top {
    width: 748px;
    height: 339px;
    top: 597px;
    left: 89%;
    margin-left: -1698px;
}

/* Middle background for blog category page */
.page-background__image--blog-category-middle {
    width: 1236px;
    height: 1015px;
    top: 273px;
    left: 156%;
    margin-left: -1703px;
    transform: rotate(-10deg);
}

/* Middle 2 background for blog category page */
.page-background__image--blog-category-middle2 {
    width: 1498px;
    height: 677px;
    top: 1057px;
    left: 167%;
    margin-left: -1698px;
}

/* Bottom background for blog category page */
.page-background__image--blog-category-bottom {
    width: 1117px;
    height: 529px;
    bottom: 207px;
    left: 98%;
    margin-left: -1698px;
}

/* Top background for blog article page (copied from blog-main-top) */
.page-background__image--blog-article-top {
    width: 748px;
    height: 339px;
    top: 597px;
    left: 89%;
    margin-left: -1698px;
    opacity: 0.5;
}

/* Middle background for blog article page (copied from blog-main-middle) */
.page-background__image--blog-article-middle {
    width: 1236px;
    height: 1015px;
    top: 273px;
    left: 156%;
    margin-left: -1703px;
    transform: rotate(-10deg);
    opacity: 0.6;
}

/* Middle 2 background for blog article page */
.page-background__image--blog-article-middle2 {
    width: 1498px;
    height: 924px;
    top: 763px;
    left: 64%;
    margin-left: -1698px;
    opacity: 0.9;
}

/* Middle 3 background for blog article page */
.page-background__image--blog-article-middle3 {
    width: 1236px;
    height: 1015px;
    top: 1120px;
    left: 110%;
    margin-left: -1698px;
    transform: rotate(-10deg);
}

/* Bottom background for blog article page */
.page-background__image--blog-article-bottom {
    width: 935px;
    height: 448px;
    top: 1820px;
    left: 101%;
    margin-left: -1698px;
    opacity: 1;
}

/* Footer background for blog pages - positioned dynamically via JS */
.page-background__image--blog-footer {
    width: 1170px;
    height: auto;
    left: 80%;
    margin-left: -698px;
    opacity: 3%;
}

/* ==========================================================================
   Mobile Background Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    /* Hide all desktop background elements on mobile */
    .page-background,
    .page-background-spots {
        display: none;
    }

    /* Black background for mobile */
    body {
        background: #000000;
    }

    /* Mobile hero background image
       Adjust top/left/width values to position precisely */
    .hero::before {
        content: '';
        position: absolute;
        top: -437px;
        left: -330px;
        width: 228%;
        height: 403%;
        background-image: url('../assets/images/background/bg-mobile.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
        opacity: 1;         /* Adjust opacity if needed */
    }
}
.btn {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: var(--spacing-2);
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    border-radius: 8px;
    border: none;
    transition: all 300ms ease;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.btn--primary {
    background: #CDF850;
    color: #171816;
}

.btn--primary:hover {
    background: #F2F2F2;
    color: #171816;
}

.btn--secondary {
    background: transparent;
    color: #CDF850;
    border: 1px solid #CDF850;
}

.btn--secondary:hover {
    background: #CDF850;
    color: #171816;
    border-color: #CDF850;
}

.btn--large {
    width: 260px;
    height: 56px;
}

.btn--header {
    width: 150px;
    height: 48px;
}

.btn--small {
    padding: 10px 16px;
    font-size: 16px;
    height: 40px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: inherit;
    color: inherit;
}

.btn--loading {
    position: relative;
    color: transparent !important;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.btn--outline {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 150px;
    height: 40px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #CDF850;
    background: transparent;
    border: 1px solid #CDF850;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn--outline:hover {
    background: #CDF850;
    color: #3B3D36;
}

.btn--sm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
    width: 109px;
    height: 40px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    border-radius: 10px;
}

.btn--sm.btn--primary {
    background: #CDF850;
    color: #3B3D36;
}

.btn--sm.btn--primary:hover {
    background: #F2F2F2;
}

.btn--ghost {
    background: #252622;
    color: #DBE0CC;
    border: none;
    border-radius: 8px;
}

.btn--ghost:hover {
    background: #353732;
}
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--header-height);
    background: transparent;
    z-index: var(--z-header);
}

.header.header--sticky {
    position: fixed;
    background: rgba(9, 9, 9, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 1 !important;
    animation: headerSlideIn 0.4s ease-out both !important;
}

@keyframes headerSlideIn {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Mobile sticky header - scale applied via JS */
@media (max-width: 640px) {
    @keyframes headerSlideIn {
        from {
            transform: translateY(-100%) scale(var(--mobile-scale, 1));
        }
        to {
            transform: translateY(0) scale(var(--mobile-scale, 1));
        }
    }
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--page-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-16);
}

.header__logo {
    display: flex;
    align-items: center;
    width: 144px;
    height: 30px;
}

.header__logo-image {
    width: 100%;
    height: auto;
}

.header__nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 var(--spacing-4);
    gap: 0;
}

.nav-item {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-14) var(--spacing-4);
    cursor: pointer;
}

.nav-item__label {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-base);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.nav-item:hover .nav-item__label {
    color: var(--color-text-primary);
}

.nav-item__arrow {
    width: 16px;
    height: 16px;
    margin-left: var(--spacing-1);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23777A6C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
    transition: transform var(--transition-fast);
}

.nav-item:hover .nav-item__arrow {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
}

.nav-item--dropdown:hover .nav-item__arrow {
    transform: rotate(180deg);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* ==========================================================================
   Hamburger Menu (Desktop: hidden)
   ========================================================================== */

.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 40px;
    height: 40px;
    padding: 8px;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.hamburger-line {
    display: block;
    height: 2px;
    background: #9B9F8E;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.hamburger-line:nth-child(1) {
    width: 15.39px;
}

.hamburger-line:nth-child(2) {
    width: 18.66px;
}

.hamburger-line:nth-child(3) {
    width: 12.91px;
}

/* ==========================================================================
   Mobile Header Styles
   Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    .header {
        width: 375px;
        transform-origin: top left;
    }


    .header.header--sticky {
        height: 65px;
        padding-top: 5px;
        background: #000000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .header__container {
        padding: 0 16px;
        justify-content: flex-start;
    }

    /* Hide desktop navigation */
    .header__nav {
        display: none;
    }

    /* Push actions and hamburger to the right */
    .header__actions {
        margin-left: auto;
        margin-right: 8px;
    }

    /* Show hamburger menu */
    .header__hamburger {
        display: flex;
        position: relative;
        z-index: 1003;
    }

    /* Hamburger to X animation */
    .header__hamburger.is-open .hamburger-line:nth-child(1) {
        width: 18px;
        transform: rotate(45deg) translate(5px, 5px);
    }

    .header__hamburger.is-open .hamburger-line:nth-child(2) {
        opacity: 0;
        width: 0;
    }

    .header__hamburger.is-open .hamburger-line:nth-child(3) {
        width: 18px;
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Mobile button size */
    .btn--header {
        width: 120px;
        height: 36px;
        font-size: 16px;
        line-height: 20px;
    }
}

.dropdown {
    box-sizing: border-box;
    position: absolute;

    /* POSITION CONTROLS - adjust these values */
    top: 80%;      /* position right below the nav-item */
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
    min-width: 220px;

    /* BACKGROUND - solid color, no transparency */
    background: #0F1012;
    border: 1px solid #161616;
    border-radius: 8px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 1001;
}

.nav-item--dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown__item {
    display: flex;
    align-items: center;
    width: 100%;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: var(--font-regular);
    font-size: var(--text-base);
    line-height: 1.15;
    color: #939886;
    transition: color var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

.dropdown__item:hover {
    color: #FBFCF7;
}

.dropdown__divider {
    height: 1px;
    background: var(--color-border-primary);
    margin: var(--spacing-2) 0;
}
.card {
    box-sizing: border-box;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--blur-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card:hover {
    border-color: var(--color-border-tertiary);
    transform: translateY(-4px);
}

.blog-card {
    box-sizing: border-box;
    width: 327px;
    height: 495px;
    display: flex;
    flex-direction: column;
    border: 1px solid #202020;
    backdrop-filter: blur(15px);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 4px 12px rgba(205, 248, 80, 0.08);
}

.blog-card__image {
    width: 100%;
    height: 181px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.blog-card__image-placeholder {
    box-sizing: border-box;
    width: 100%;
    height: 181px;
    border: 1px dashed #3F3F3F;
    backdrop-filter: blur(15px);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.blog-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 26px 16px 26px;
    flex: 1;
    background: linear-gradient(156.82deg, #191919 -35.47%, #121212 112.86%);
    overflow: hidden;
}

.blog-card__category {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-accent-primary);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 -7px 0;
}

.blog-card__title {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-align: left;
    margin: 0;
}

.blog-card__excerpt {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FBFCF7;
    text-align: left;
    margin: 0;
    overflow: hidden;
}

.blog-card__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
}

.blog-card__date,
.blog-card__reading-time {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.3;
}

.feature-card {
    box-sizing: border-box;
    width: 327px;
    height: 199px;
    padding: var(--spacing-14);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-3xl);
    backdrop-filter: var(--blur-lg);
}

.feature-card__icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--spacing-4);
}

.feature-card__icon img {
    width: 100%;
    height: 100%;
}

.feature-card__title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-3);
}

.feature-card__desc {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    line-height: var(--leading-base);
    color: var(--color-text-light);
}

/* ==========================================================================
   Mobile Blog Card Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    .blog-card {
        width: 338px;
        height: 414px;
    }

    .blog-card:hover {
        transform: none;
    }

    .blog-card__image {
        height: 186px;
    }

    .blog-card__image-placeholder {
        height: 186px;
    }

    .blog-card__content {
        gap: 8px;
        padding: 8px 15px 6px 15px;
    }

    .blog-card__title {
        font-size: 18px;
        line-height: 28px;
    }

    .blog-card__excerpt {
        font-size: 12px;
        line-height: 20px;
    }

    .blog-card__meta {
        gap: 12px;
        padding-top: 8px;
    }

    .blog-card__reading-time {
        order: -1;
    }

    .blog-card__date,
    .blog-card__reading-time {
        font-size: 10px;
        line-height: 18px;
    }
}
/* ==========================================================================
   Mobile Menu Sidebar
   Slides in from right, accordion categories, overlay backdrop
   ========================================================================== */

/* Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 1001;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Container */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: #0F1012;
    transform: translateX(100%);
    transition: transform 300ms ease;
    z-index: 1002;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
    transform: translateX(0);
}

/* Close button */
.mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu__close::before,
.mobile-menu__close::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background: #9B9F8E;
    border-radius: 4px;
}

.mobile-menu__close::before {
    transform: rotate(45deg);
}

.mobile-menu__close::after {
    transform: rotate(-45deg);
}

/* Content wrapper with padding */
.mobile-menu__content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 80px 24px 24px;
}

/* ==========================================================================
   Category Accordion
   ========================================================================== */

.mobile-menu__category {
    border-bottom: 1px solid #161616;
}

.mobile-menu__category:last-child {
    border-bottom: none;
}

/* Category Header Button */
.mobile-menu__category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Category Label */
.mobile-menu__category-label {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #9B9F8E;
    transition: color 150ms ease;
}

.mobile-menu__category-header:active .mobile-menu__category-label,
.mobile-menu__category.is-expanded .mobile-menu__category-label {
    color: #FFFFFF;
}

/* Arrow Icon */
.mobile-menu__category-arrow {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23777A6C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
    transition: transform 150ms ease, background 150ms ease;
}

.mobile-menu__category.is-expanded .mobile-menu__category-arrow {
    transform: rotate(180deg);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
}

/* ==========================================================================
   Category Items (Collapsed by default)
   ========================================================================== */

.mobile-menu__category-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.mobile-menu__category.is-expanded .mobile-menu__category-items {
    max-height: 400px;
}

/* Individual Menu Items */
.mobile-menu__item {
    display: block;
    padding: 14px 20px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    color: #939886;
    text-decoration: none;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu__item:active {
    color: #FBFCF7;
}

/* ==========================================================================
   Mobile Menu Footer Section
   ========================================================================== */

.mobile-menu__footer {
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid #161616;
}

/* Social Buttons - 4 in a row */
.mobile-menu__social {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

/* Individual Social Button */
.mobile-menu__social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid #1E1E1E;
    border-radius: 8px;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu__social-button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.mobile-menu__social-button:active {
    background: rgba(255, 255, 255, 0.02);
    border-color: #2A2A2A;
}

/* Copyright Section */
.mobile-menu__copyright {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.mobile-menu__copyright-text {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: #777A6C;
    line-height: 1.5;
    margin: 0;
}

.mobile-menu__legal-text {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 400;
    color: #5A5D51;
    line-height: 1.6;
    margin: 0;
}

.mobile-menu__legal-link {
    color: #777A6C;
    text-decoration: underline;
    transition: color 150ms ease;
}

.mobile-menu__legal-link:active {
    color: #9B9F8E;
}

/* ==========================================================================
   Mobile Breakpoint - Show only on mobile
   ========================================================================== */

@media (max-width: 640px) {
    .mobile-menu-overlay {
        display: block;
    }

    .mobile-menu {
        display: block;
    }
}
/* Enhanced Blog Card Component Styles */
/* Blog-specific card variant - does NOT affect landing page cards */

.blog-card-enhanced {
    box-sizing: border-box;
    width: 329px;
    height: 486px;
    display: flex;
    flex-direction: column;
    border: 1px solid #202020;
    backdrop-filter: blur(15px);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-card-enhanced:hover {
    transform: translateY(-4px);
}

/* Image Container with Tags Overlay */
.blog-card-enhanced__image-container {
    position: relative;
    width: 100%;
    height: 178px;
    overflow: visible;
}

.blog-card-enhanced__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.blog-card-enhanced__image-placeholder {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px dashed #3F3F3F;
    backdrop-filter: blur(15px);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* Tags Overlay and Tag styles moved to blog-tags.css */

/* Content Area */
.blog-card-enhanced__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 24px 17px;
    width: 328px;
    height: 308px;
    background: #1E1F28;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    transition: background 0.3s ease;
}

.blog-card-enhanced:hover .blog-card-enhanced__content {
    background: #272834;
}

.blog-card-enhanced__category {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent-primary);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 -4px 0;
}

.blog-card-enhanced__title {
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-align: left;
    margin: 0;
}

.blog-card-enhanced__excerpt {
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #FBFCF7;
    text-align: left;
    margin: 0;
    overflow: hidden;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.blog-card-enhanced__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    margin-top: auto;
    padding-top: 10px;
}

.blog-card-enhanced__date,
.blog-card-enhanced__reading-time {
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Link Icon */
.blog-card-enhanced__link-icon {
    position: absolute;
    right: 24px;
    bottom: 20px;
    width: 12px;
    height: 12px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.blog-card-enhanced:hover .blog-card-enhanced__link-icon {
    opacity: 0.8;
}

/* ==========================================================================
   Mobile Enhanced Card Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    .blog-card-enhanced {
        width: 338px;
        height: 419px;
    }

    .blog-card-enhanced:hover {
        transform: none;
    }

    .blog-card-enhanced__image-container {
        height: 186px;
    }

    /* Tag mobile styles in blog-tags.css */

    .blog-card-enhanced__content {
        width: 337px;
        height: 233px;
        display: flex;
        flex-direction: column;
        gap: 0px;
        padding: 15px 15px 3px 15px;
        background: linear-gradient(156.82deg, #191919 -35.47%, #121212 112.86%);
    }

    .blog-card-enhanced__category {
        font-size: 12px;
        margin-bottom: -2px;
    }

    .blog-card-enhanced__title {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: -0.01em;
        color: #FFFFFF;
        margin: 0 0 8px 0;
    }

    .blog-card-enhanced__excerpt {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #FBFCF7;
        margin: 0;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blog-card-enhanced__meta {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 18px;
        margin-top: 12px;
    }

    .blog-card-enhanced__date,
    .blog-card-enhanced__reading-time {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 18px;
        text-transform: uppercase;
        color: #FFFFFF;
        opacity: 0.3;
    }

    .blog-card-enhanced__link-icon {
        display: none;
    }
}
/* Blog Tags Component - Shared styles */

/* Tags container */
.blog-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0px;
    gap: 8px;
    position: relative;
}

/* Individual tag */
.blog-tag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 10px;
    height: 20px;
    border-radius: 16px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    color: #343538;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: transform 0.2s ease;
    flex: none;
}

.blog-tag:hover {
    transform: translateY(-2px);
    color: #343538 !important;
}

/* Tags overlay on blog cards */
.blog-card-enhanced__tags {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    max-width: calc(100% - 24px);
    overflow: visible;
    padding-top: 4px;
}

.blog-card-enhanced__tags .blog-tag {
    flex-shrink: 0;
}

/* Mobile styles */
@media (max-width: 640px) {
    .blog-tags {
        gap: 8px;
    }

    .blog-tag {
        padding: 4px 14px;
        height: 22px;
        font-size: 12px;
        line-height: 18px;
    }

    .blog-card-enhanced__tags {
        bottom: 12px;
        right: 12px;
        gap: 8px;
        max-width: calc(100% - 24px);
    }
}
/* Blog Filter Bar Component Styles */
/* Horizontal category filter with sort toggle */

.blog-filter-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
}

/* Categories Container */
.blog-filter-bar__categories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Category Button */
.blog-filter-bar__category {
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #DAD9F7;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.blog-filter-bar__category:hover {
    color: #FFFFFF;
}

.blog-filter-bar__category--active {
    color: #D9F471;
}

.blog-filter-bar__category--active:hover {
    color: #D9F471;
}

/* Sort Toggle Container */
.blog-filter-bar__sort {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Sort Button */
.blog-filter-bar__sort-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.blog-filter-bar__sort-button:hover {
    opacity: 0.8;
}

.blog-filter-bar__sort-button:active {
    opacity: 0.6;
}

/* Sort Icon */
.blog-filter-bar__sort-icon {
    display: block;
    width: 14px;
    height: 16px;
}

/* ==========================================================================
   Mobile Filter Bar Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    .blog-filter-bar {
        flex-direction: row;
        align-items: center;
        gap: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .blog-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .blog-filter-bar__categories {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        padding-left: 27px;
        padding-right: 27px;
    }

    .blog-filter-bar__category {
        font-size: 12px;
        line-height: 18px;
        flex-shrink: 0;
    }

    .blog-filter-bar__sort {
        display: none;
    }
}
/* Blog Pagination Component Styles */
/* Reusable pagination for blog pages */

.blog-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 60px;
    padding: 0 var(--spacing-5);
}

/* Pagination Button */
.blog-pagination__button {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #DAD9F7;
    background: none;
    border: 1px solid #3F3F3F;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-pagination__button:hover {
    border-color: #D9F471;
    color: #D9F471;
}

.blog-pagination__button:active {
    opacity: 0.6;
}

/* Active Page */
.blog-pagination__button--active {
    background: #D9F471;
    border-color: #D9F471;
    color: #343538;
    font-weight: 500;
}

.blog-pagination__button--active:hover {
    background: #D9F471;
    border-color: #D9F471;
    color: #343538;
}

/* Previous/Next Buttons */
.blog-pagination__button--prev,
.blog-pagination__button--next {
    padding: 0 16px;
}

/* Ellipsis */
.blog-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: #DAD9F7;
}

/* ==========================================================================
   Mobile Pagination Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    .blog-pagination {
        gap: 4px;
        margin-top: 40px;
    }

    .blog-pagination__button {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
        padding: 0 8px;
    }

    .blog-pagination__button--prev,
    .blog-pagination__button--next {
        padding: 0 12px;
    }

    .blog-pagination__ellipsis {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
}
.footer {
    position: relative;
    padding: 80px 0 40px;
    background: transparent;
}

.footer__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-8);
}

.footer__title {
    font-family: var(--font-primary);
    font-size: 52px;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 48px;
}

.footer__title--bold {
    font-weight: 700;
    font-style: normal;
}

.footer__title--italic {
    font-weight: 300;
    font-style: italic;
}

.footer__social {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 44px;
    max-width: 1044px;
    margin-left: auto;
    margin-right: auto;
}

.footer__social-link {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 14px;
    gap: 12px;
    width: 334.67px;
    height: 72px;
    border: 1px solid #4D4F45;
    border-radius: 12px;
    transition: all var(--transition-fast);
    text-decoration: none;
    flex: 1;
}

.footer__social-link:hover {
    border-color: #CDF850;
}

.footer__social-link img {
    width: 32px;
    height: 32px;
}

.footer__social-link span {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    color: #FFFFFF;
}

.footer__nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left;
    gap: 124px;
    margin-bottom: 78px;
    margin-left: 20px;
}

.footer__nav-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 142px;
    overflow: visible;
}

.footer__link {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #9B9F8E;
    transition: color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.footer__link:hover {
    color: #CDF850;
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.footer__copyright,
.footer__legal {
    font-family: var(--font-secondary);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.03em;
    color: #4D4F45;
    white-space: nowrap;
}

.footer__legal-link {
    color: #4D4F45;
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.footer__legal-link:hover {
    color: #9B9F8E;
}

/* ==========================================================================
   Mobile Footer Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    .footer {
        padding: 40px 0 30px;
    }

    .footer__container {
        max-width: 375px;
        padding: 0 40px;
    }

    .footer__title {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 24px;
    }

    .footer__social {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
    }

    .footer__social-link {
        width: 295px;
        height: 72px;
        justify-content: center;
        padding: 20px 14px;
    }

    .footer__social-link span {
        font-size: 16px;
        line-height: 20px;
    }

    .footer__nav {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-left: 0;
        margin-bottom: 40px;
    }

    .footer__nav-column {
        align-items: center;
        width: auto;
        gap: 20px;
    }

    .footer__link {
        font-size: 16px;
        line-height: 20px;
        text-align: center;
    }

    .footer__bottom {
        gap: 4px;
    }

    .footer__copyright,
    .footer__legal {
        font-size: 12px;
        line-height: 12px;
        text-align: center;
    }
}
/* Blog Page Styles */

/* Text smoothing for all blog pages */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Hero Section */
.blog-hero {
    padding: 0px 0 60px;
}

.blog-hero__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
    text-align: left;
}

.blog-hero__title {
    font-family: 'Rubik';
    font-size: 52px;
    line-height: 60px;
    color: var(--color-text-primary);
    margin-bottom: 0;
    max-width: 707px;
    background: linear-gradient(244.79deg, #FCFDFB 31.54%, #777A6F 178.83%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero__title-italic {
    font-style: italic;
    font-weight: 300;
}

.blog-hero__title-bold {
    font-style: normal;
    font-weight: 700;
}

.blog-hero__desc {
    display: none;
}

/* Filter Section */
.blog-filter {
    padding: 0;
}

.blog-filter__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

/* Categories Section (legacy - can be removed in future) */
.blog-categories {
    padding: 40px 0 60px;
}

.blog-categories__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

.blog-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
}

/* Category Card */
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-8) var(--spacing-6);
    background: linear-gradient(156.82deg, #1a1a1a -35.47%, #0f0f0f 112.86%);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: conic-gradient(
        from 0deg,
        rgba(205, 248, 80, 0.6) 0deg,
        rgba(205, 248, 80, 0.1) 90deg,
        rgba(205, 248, 80, 0.6) 180deg,
        rgba(205, 248, 80, 0.1) 270deg,
        rgba(205, 248, 80, 0.6) 360deg
    );
    transform: translate(-50%, -50%);
    z-index: 0;
}

.category-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(156.82deg, #1a1a1a -35.47%, #0f0f0f 112.86%);
    border-radius: calc(var(--radius-lg) - 2px);
    z-index: 0;
}

.category-card > * {
    position: relative;
    z-index: 1;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(205, 248, 80, 0.12);
}

.category-card:hover::before {
    background: conic-gradient(
        from 0deg,
        rgba(205, 248, 80, 0.85) 0deg,
        rgba(205, 248, 80, 0.15) 90deg,
        rgba(205, 248, 80, 0.85) 180deg,
        rgba(205, 248, 80, 0.15) 270deg,
        rgba(205, 248, 80, 0.85) 360deg
    );
}

.category-card__name {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    opacity: 0.9;
    margin-bottom: var(--spacing-4);
    text-align: center;
}

.category-card__desc {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-secondary);
    opacity: 0.6;
    text-align: center;
    line-height: 1.5;
}


/* Latest Articles Section */
.blog-latest {
    padding: 32px 0 10px;
}

.blog-latest__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

.blog-latest__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-8);
}

.blog-latest__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 40px;
}

/* Breadcrumb */
.breadcrumb {
    padding: 60px 0 10px;
}

.breadcrumb__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.breadcrumb__link {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-accent-primary);
}

.breadcrumb__separator {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.breadcrumb__current {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

/* Empty and Error States */
.empty,
.error {
    text-align: center;
    padding: var(--spacing-10);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.error {
    color: #ff6b6b;
}

/* ==========================================================================
   Mobile Blog Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    /* Hide breadcrumb on mobile */
    .breadcrumb {
        display: none;
    }

    /* Hero */
    .blog-hero {
        position: relative;
        padding: 0;
        height: 206px;
    }

    /* Mobile background image for blog hero */
    .blog-hero::before {
        content: '';
        position: absolute;
        top: -437px;
        left: -330px;
        width: 228%;
        height: 403%;
        background-image: url('../../assets/images/background/bg-mobile.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
        opacity: 1;
    }

    .blog-hero__container {
        max-width: 375px;
        padding: 0;
    }

    .blog-hero__title {
        position: absolute;
        width: 120px;
        height: 110px;
        left: 21px;
        top: 20px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 60px;
        line-height: 110px;
        letter-spacing: -0.03em;
        color: #FFFFFF;
        background: none;
        -webkit-text-fill-color: initial;
        -webkit-background-clip: initial;
        background-clip: initial;
    }

    .blog-hero__title-italic,
    .blog-hero__title-bold {
        display: none;
    }

    .blog-hero__title::after {
        content: 'Blog';
    }

    .blog-hero__desc {
        display: block;
        position: absolute;
        width: auto;
        max-width: 300px;
        height: auto;
        left: 21px;
        top: 130px;
        padding: 0;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: left;
        color: #FFFFFF;
    }

    /* Filter - mobile adjustments handled by blog-filter-bar.css */
    .blog-filter {
        padding: 0 0 24px;
        position: relative;
    }

    .blog-filter__container {
        max-width: 100vw;
        width: 100%;
        padding: 0;
        overflow: visible;
    }

    /* Categories - single column (legacy) */
    .blog-categories {
        padding: 20px 0 40px;
    }

    .blog-categories__container {
        max-width: 375px;
        padding: 0 18px;
    }

    .blog-categories__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-card {
        padding: 20px 16px;
    }

    .category-card__name {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .category-card__desc {
        font-size: 13px;
    }

    /* Latest Articles - single column */
    .blog-latest {
        padding: 0px 0 60px;
    }

    .blog-latest__container {
        max-width: 375px;
        padding: 0 24px;
    }

    .blog-latest__title {
        font-size: 20px;
        margin-bottom: 16px;
        display: none;
    }

    .blog-latest__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Breadcrumb */
    .breadcrumb {
        padding: 30px 0 16px;
    }

    .breadcrumb__container {
        max-width: 375px;
        padding: 0 18px;
    }

    .breadcrumb__link,
    .breadcrumb__separator,
    .breadcrumb__current {
        font-size: 12px;
    }

    /* Compact Blog Card for Mobile Blog Pages - No Excerpt */
    .blog-latest__grid .blog-card-enhanced {
        width: 328px;
        height: 324px;
        margin: 0 auto;
    }

    .blog-latest__grid .blog-card-enhanced__image-container {
        height: 178px;
        border-radius: 16px 16px 0 0;
    }

    .blog-latest__grid .blog-card-enhanced__content {
        height: 146px;
        padding: 17px 24px 13px;
        background: #1E1F28;
        border-radius: 0 0 16px 16px;
        gap: 6px;
    }

    .blog-latest__grid .blog-card-enhanced__title {
        font-family: 'Rubik';
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.01em;
        color: #FFFFFF;
        -webkit-line-clamp: 2;
        margin-bottom: 0;
    }

    .blog-latest__grid .blog-card-enhanced__excerpt {
        display: none;
    }

    .blog-latest__grid .blog-card-enhanced__meta {
        gap: 25px;
        margin-top: auto;
    }

    .blog-latest__grid .blog-card-enhanced__date,
    .blog-latest__grid .blog-card-enhanced__reading-time {
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        text-transform: uppercase;
        color: #FFFFFF;
        opacity: 1;
    }

    .blog-latest__grid .blog-card-enhanced__link-icon {
        display: block;
        width: 12px;
        height: 12px;
        margin-left: auto;
        margin-right: 7px;
        margin-bottom: -2px;
    }

    .blog-latest__grid .blog-card-enhanced__link-icon svg {
        width: 12px;
        height: 12px;
    }
}
/* Blog Category Page Styles */

/* Text smoothing */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Category Hero */
.category-hero {
    padding: 62px 0 40px;
}

.category-hero__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

.category-hero__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-14);
}

.category-hero__desc {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
    max-width: 790px;
    background: linear-gradient(316.07deg, #FFFFFF 24.36%, #CFCFCF 48.45%, #FFFFFF 99.41%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.9;
}

/* Controls Section */
.category-controls {
    padding: 20px 0 0;
}

.category-controls__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-6);
}

/* Sort Dropdown */
.category-sort {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.category-sort label {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Custom dropdown - Desktop */
.category-sort__dropdown {
    position: relative;
}

.category-sort__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--spacing-3) var(--spacing-5);
    padding-right: 10px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.category-sort__button:hover {
    border-color: var(--color-accent-primary);
    background-color: var(--color-bg-tertiary);
}

.category-sort__button:focus {
    border-color: var(--color-accent-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(205, 248, 80, 0.15);
}

.category-sort__selected {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.category-sort__arrow {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23777A6C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
    background-size: contain;
    flex-shrink: 0;
    transition: transform 150ms ease;
}

.category-sort__button:hover .category-sort__arrow {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.category-sort__dropdown.is-open .category-sort__arrow {
    transform: rotate(180deg);
}

/* Dropdown list - Desktop */
.category-sort__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.category-sort__dropdown.is-open .category-sort__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown options - Desktop */
.category-sort__option {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 150ms ease;
}

.category-sort__option:hover {
    background: var(--color-bg-tertiary);
}

.category-sort__option.is-selected {
    color: var(--color-accent-primary);
    background: rgba(205, 248, 80, 0.1);
}

/* Tags Filter */
.category-tags {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.tag-btn {
    padding: var(--spacing-2) var(--spacing-4);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
}

.tag-btn:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.tag-btn--active,
.tag-btn--active:hover {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: var(--color-text-dark);
}

/* Articles Grid */
.category-articles {
    padding: 40px 0 80px;
}

.category-articles__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

.category-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 14px;
    row-gap: 14px;
    margin-bottom: var(--spacing-10);
}

/* Pagination */
.category-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-3);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination-btn:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.pagination-btn--active {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: var(--color-text-dark);
}

.pagination-btn--prev,
.pagination-btn--next {
    padding: 0 var(--spacing-4);
}

.pagination-ellipsis {
    color: var(--color-text-muted);
    padding: 0 var(--spacing-2);
}

/* ==========================================================================
   Mobile Category Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    /* Hide breadcrumb on mobile */
    .breadcrumb {
        display: none;
    }

    /* Category Hero */
    .category-hero {
        position: relative;
        padding: 0;
        height: 204px;
    }

    /* Mobile background image - same as landing and blog main */
    .category-hero::before {
        content: '';
        position: absolute;
        top: -437px;
        left: -330px;
        width: 228%;
        height: 403%;
        background-image: url('../../assets/images/background/bg-mobile.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
        opacity: 1;
    }

    .category-hero__container {
        max-width: 375px;
        padding: 0;
        text-align: center;
    }

    .category-hero__title {
        position: absolute;
        width: 262px;
        height: 60px;
        left: calc(50% - 262px/2 + 0.5px);
        top: 14px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 32px;
        line-height: 60px;
        color: #FFFFFF;
        margin-bottom: 0;
    }

    .category-hero__desc {
        position: absolute;
        width: 248px;
        height: 56px;
        left: calc(50% - 248px/2 + 0.5px);
        top: 60px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        color: #FFFFFF;
        background: none;
        -webkit-text-fill-color: initial;
        -webkit-background-clip: initial;
        background-clip: initial;
        opacity: 1;
    }

    /* Controls - stack vertically */
    .category-controls {
        padding: 0 0 24px;
        position: relative;
        margin-top: -41px;
    }

    .category-controls__container {
        max-width: 375px;
        padding: 0;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .category-tags {
        width: 284px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 0;
        margin: 0 auto;
        order: 1;
    }

    .tag-btn {
        box-sizing: border-box;
        height: 24px;
        padding: 0 10px;
        background: #0F0F10;
        border: 1px solid #1E1E24;
        backdrop-filter: blur(30.8px);
        border-radius: 18px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0.02em;
        color: #969696;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    .tag-btn--active {
        background: #CDF850;
        border-color: #CDF850;
        color: #000000;
    }

    .category-sort {
        display: flex;
        align-items: center;
        gap: 8px;
        order: 2;
    }

    .category-sort label {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        text-transform: capitalize;
        color: #939393;
    }

    /* Custom dropdown container */
    .category-sort__dropdown {
        position: relative;
    }

    /* Dropdown button */
    .category-sort__button {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 3px 10px;
        height: 24px;
        background: #0F0F10;
        border: 1px solid #1E1E24;
        backdrop-filter: blur(30.8px);
        border-radius: 7px;
        cursor: pointer;
        transition: border-color 150ms ease;
    }

    .category-sort__button:hover {
        border-color: #2A2A2A;
    }

    /* Selected text */
    .category-sort__selected {
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.02em;
        color: #DEDEDE;
    }

    /* Arrow icon */
    .category-sort__arrow {
        width: 4px;
        height: 7px;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="7" viewBox="0 0 4 7" fill="none"><path d="M2 0L4 3.5L2 7L0 3.5L2 0Z" fill="%233F3F43"/></svg>') center no-repeat;
        background-size: contain;
        flex-shrink: 0;
        transition: transform 150ms ease;
    }

    .category-sort__dropdown.is-open .category-sort__arrow {
        transform: rotate(180deg);
    }

    /* Dropdown list */
    .category-sort__list {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 100px;
        background: #0F0F10;
        border: 1px solid #1E1E24;
        border-radius: 7px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
        z-index: 100;
    }

    .category-sort__dropdown.is-open .category-sort__list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Dropdown options */
    .category-sort__option {
        padding: 6px 10px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.02em;
        color: #DEDEDE;
        cursor: pointer;
        transition: background 150ms ease;
    }

    .category-sort__option:hover {
        background: #1A1A1C;
    }

    .category-sort__option.is-selected {
        color: #CDF850;
    }

    /* Articles - single column */
    .category-articles {
        padding: 2px 0 0px;
    }

    .category-articles__container {
        max-width: 375px;
        padding: 0 24px;
    }

    .category-articles__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 0;
    }

    /* Compact Blog Card for Mobile Category Page - No Excerpt */
    .category-articles__grid .blog-card-enhanced {
        width: 328px;
        height: 324px;
        margin: 0 auto;
    }

    .category-articles__grid .blog-card-enhanced__image-container {
        height: 178px;
        border-radius: 16px 16px 0 0;
    }

    .category-articles__grid .blog-card-enhanced__content {
        height: 146px;
        padding: 17px 24px 13px;
        background: #1E1F28;
        border-radius: 0 0 16px 16px;
        gap: 6px;
    }

    .category-articles__grid .blog-card-enhanced__title {
        font-family: 'Rubik';
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.01em;
        color: #FFFFFF;
        -webkit-line-clamp: 2;
        margin-bottom: 0;
    }

    .category-articles__grid .blog-card-enhanced__excerpt {
        display: none;
    }

    .category-articles__grid .blog-card-enhanced__meta {
        gap: 25px;
        margin-top: auto;
    }

    .category-articles__grid .blog-card-enhanced__date,
    .category-articles__grid .blog-card-enhanced__reading-time {
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        text-transform: uppercase;
        color: #FFFFFF;
        opacity: 1;
    }

    .category-articles__grid .blog-card-enhanced__link-icon {
        display: block;
        width: 12px;
        height: 12px;
        margin-left: auto;
        margin-right: 7px;
        margin-bottom: -2px;
    }

    .category-articles__grid .blog-card-enhanced__link-icon svg {
        width: 12px;
        height: 12px;
    }

    /* Pagination */
    .category-pagination {
        margin-top: 40px;
        min-height: 36px;
        gap: 4px;
    }

    .pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
        padding: 0 8px;
    }

    .pagination-btn--prev,
    .pagination-btn--next {
        padding: 0 12px;
    }
}
/* Blog Article Page Styles */

/* Text smoothing */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Mobile breadcrumb - hidden on desktop, shown on mobile */
.article__mobile-breadcrumb {
    display: none;
}

/* Breadcrumb override for article page */
.breadcrumb__container {
    max-width: 1023px;
}

/* Article Container */
.article {
    padding: 20px 0 10px;
}

.article__container {
    max-width: 1023px;
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

/* Banner */
.article__banner {
    margin-bottom: 50px;
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
}

.article__banner-image {
    width: 1023px;
    height: 562px;
    object-fit: cover;
}

/* Header */
.article__header {
    margin-bottom: 43px;
}

.article__category {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #E6E6E6;
    margin-bottom: var(--spacing-3);
}

.article__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    line-height: 1.2;
    margin-bottom: var(--spacing-5);
}

.article__meta {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

/* Author section - commented out */
/* .article__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.article__author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.article__author-name {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-medium);
} */

.article__date,
.article__reading-time {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #696C60;
    opacity: 1.0;
}

/* Tag styles moved to blog-tags.css */
.article__tags {
    margin-bottom: 20px;
}

/* Content */
.article__content {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #FBFCF7;
}

.article__content h1,
.article__content h2,
.article__content h3,
.article__content h4,
.article__content h5,
.article__content h6 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
    font-weight: var(--font-medium);
}

.article__content h2 {
    font-size: var(--text-2xl);
}

.article__content h3 {
    font-size: var(--text-xl);
}

.article__content p {
    margin-bottom: var(--spacing-5);
}

.article__content a {
    color: var(--color-accent-primary);
    text-decoration: underline;
}

.article__content a:hover {
    color: var(--color-accent-secondary);
}

.article__content ul {
    margin-bottom: var(--spacing-5);
    padding-left: 40px;
    list-style: none;
}

.article__content ul li {
    position: relative;
    margin-bottom: 0;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #FBFCF7;
}

.article__content ul li::before {
    content: '•';
    position: absolute;
    left: -20px;
    font-size: 16px;
    line-height: 24px;
    color: #FBFCF7;
}

.article__content ol {
    margin-bottom: var(--spacing-5);
    padding-left: 40px;
    list-style: decimal;
}

.article__content ol li {
    margin-bottom: 0;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #FBFCF7;
}

.article__content blockquote {
    border-left: 4px solid var(--color-accent-primary);
    padding-left: var(--spacing-5);
    margin: var(--spacing-6) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.article__content pre {
    background: var(--color-bg-tertiary);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--spacing-5);
}

.article__content code {
    font-family: monospace;
    font-size: var(--text-sm);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.article__content pre code {
    background: transparent;
    padding: 0;
}

.article__content img,
.article__content iframe,
.article__content video {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--spacing-5) 0;
}

/* Image/Video alignment from Quill editor (data-align attribute + inline styles) */
.article__content img[data-align="left"],
.article__content iframe[data-align="left"],
.article__content video[data-align="left"],
.article__content img[style*="float: left"],
.article__content iframe[style*="float: left"],
.article__content video[style*="float: left"] {
    float: left;
    margin-right: var(--spacing-5);
    margin-bottom: var(--spacing-3);
}

.article__content img[data-align="right"],
.article__content iframe[data-align="right"],
.article__content video[data-align="right"],
.article__content img[style*="float: right"],
.article__content iframe[style*="float: right"],
.article__content video[style*="float: right"] {
    float: right;
    margin-left: var(--spacing-5);
    margin-bottom: var(--spacing-3);
}

.article__content img[data-align="center"],
.article__content iframe[data-align="center"],
.article__content video[data-align="center"],
.article__content img[style*="margin: 0px auto"],
.article__content iframe[style*="margin: 0px auto"],
.article__content video[style*="margin: 0px auto"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

/* Clear floats */
.article__content p::after {
    content: "";
    display: table;
    clear: both;
}

.article__content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-5);
}

.article__content th,
.article__content td {
    border: 1px solid var(--color-border-primary);
    padding: var(--spacing-3);
    text-align: left;
}

.article__content th {
    background: var(--color-bg-tertiary);
    font-weight: var(--font-medium);
}

/* Footer / Share Section */
.article__footer {
    margin-top: 50px;
}

.article__share {
    display: flex;
    align-items: center;
    gap: 11px;
}

.article__share span {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: capitalize;
    color: #696C60;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    transition: transform var(--transition-fast);
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn img {
    width: 24px;
    height: 24px;
}

/* Divider before related articles */
.article__divider {
    width: 1016px;
    height: 1px;
    border: none;
    background: linear-gradient(90deg, transparent 0%, var(--color-border-primary) 30%, var(--color-border-primary) 70%, transparent 100%);
    opacity: 0.7;
    margin: 80px auto 60px;
}

/* Related Articles */
.related-articles {
    padding: 0 0 20px;
}

.related-articles__container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-5);
}

.related-articles__title {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    text-transform: none;
    color: #DFFF80;
    opacity: 0.4;
    text-align: center;
    margin-bottom: 30px;
}

.related-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 14px;
}

/* ==========================================================================
   Mobile Article Styles
   Base: 375px | Breakpoint: 640px
   ========================================================================== */

@media (max-width: 640px) {
    /* Hide desktop breadcrumb on mobile */
    .breadcrumb {
        display: none;
    }

    /* Article Container */
    .article {
        position: relative;
        padding: 30px 0 40px;
    }

    /* Mobile background image for article page */
    .article::before {
        content: '';
        position: absolute;
        top: -437px;
        left: -330px;
        width: 228%;
        height: 403%;
        background-image: url('../../assets/images/background/bg-mobile.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top;
        pointer-events: none;
        z-index: -1;
        opacity: 1;
    }

    .article__container {
        position: relative;
        max-width: 375px;
        padding: 0 18px;
    }

    /* Mobile Breadcrumb - positioned above banner */
    .article__mobile-breadcrumb {
        display: block;
        position: absolute;
        width: 333px;
        height: 18px;
        left: 22px;
        top: -27px;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 400;
        font-size: 8px;
        line-height: 18px;
        letter-spacing: -0.02em;
        text-transform: capitalize;
        color: #939886;
        z-index: 10;
    }

    /* Banner */
    .article__banner {
        margin-bottom: 20px;
    }

    .article__banner-image {
        max-height: 200px;
    }

    /* Header */
    .article__header {
        margin-bottom: 24px;
    }

    .article__category {
        font-size: 12px;
        margin-bottom: 8px;
        padding-top: 2px;
    }

    .article__title {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .article__meta {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 25px;
        margin-bottom: 12px;
    }

    /* .article__author-avatar {
        width: 32px;
        height: 32px;
    }

    .article__author-name {
        font-size: 13px;
    } */

    .article__date,
    .article__reading-time {
        font-size: 12px;
        line-height: 18px;
        color: #696C60;
    }

    .article__tags {
        margin-bottom: 17px;
    }

    /* Content - full width images, no floats */
    .article__content {
        font-size: 15px;
        line-height: 1.7;
    }

    .article__content h2 {
        font-size: 20px;
        margin-top: 24px;
        margin-bottom: 12px;
    }

    .article__content h3 {
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .article__content p {
        margin-bottom: 16px;
    }

    .article__content ul,
    .article__content ol {
        margin-bottom: 16px;
        padding-left: 30px;
    }

    .article__content ul li::before {
        left: -15px;
    }

    .article__content blockquote {
        padding-left: 16px;
        margin: 20px 0;
    }

    .article__content pre {
        padding: 16px;
        margin-bottom: 16px;
    }

    .article__content img,
    .article__content iframe,
    .article__content video {
        float: none !important;
        display: block;
        width: 100%;
        margin: 16px 0;
    }

    .article__content img[data-align="left"],
    .article__content img[data-align="right"],
    .article__content img[style*="float"],
    .article__content iframe[data-align="left"],
    .article__content iframe[data-align="right"],
    .article__content video[data-align="left"],
    .article__content video[data-align="right"] {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .article__content table {
        font-size: 13px;
    }

    .article__content th,
    .article__content td {
        padding: 8px;
    }

    /* Footer / Share */
    .article__footer {
        margin-top: 32px;
    }

    .article__share {
        gap: 10px;
    }

    .article__share span {
        font-size: 12px;
        line-height: 16px;
    }

    .share-btn {
        width: 28px;
        height: 28px;
    }

    .share-btn img {
        width: 28px;
        height: 28px;
    }

    .article__divider {
        display: none;
    }

    /* Related Articles - single column */
    .related-articles {
        padding: 40px 0 60px;
    }

    .related-articles__container {
        max-width: 375px;
        padding: 0 24px;
    }

    .related-articles__title {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 30px;
        text-align: left;
    }

    .related-articles__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Compact Blog Card for Mobile Related Articles - No Excerpt */
    .related-articles__grid .blog-card-enhanced {
        width: 328px;
        height: 324px;
        margin: 0 auto;
    }

    .related-articles__grid .blog-card-enhanced__image-container {
        height: 178px;
        border-radius: 16px 16px 0 0;
    }

    .related-articles__grid .blog-card-enhanced__content {
        height: 146px;
        padding: 17px 24px 13px;
        background: #1E1F28;
        border-radius: 0 0 16px 16px;
        gap: 6px;
    }

    .related-articles__grid .blog-card-enhanced__title {
        font-family: 'Rubik';
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.01em;
        color: #FFFFFF;
        -webkit-line-clamp: 2;
        margin-bottom: 0;
    }

    .related-articles__grid .blog-card-enhanced__excerpt {
        display: none;
    }

    .related-articles__grid .blog-card-enhanced__meta {
        gap: 25px;
        margin-top: auto;
    }

    .related-articles__grid .blog-card-enhanced__date,
    .related-articles__grid .blog-card-enhanced__reading-time {
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        text-transform: uppercase;
        color: #FFFFFF;
        opacity: 1;
    }

    .related-articles__grid .blog-card-enhanced__link-icon {
        display: block;
        width: 12px;
        height: 12px;
        margin-left: auto;
        margin-right: 7px;
        margin-bottom: -2px;
    }

    .related-articles__grid .blog-card-enhanced__link-icon svg {
        width: 12px;
        height: 12px;
    }
}
/* ==========================================================================
   Mobile Responsive Styles
   Base width: 375px
   Breakpoint: 640px
   Scaling: Transform scale for proportional sizing on wider mobiles
   ========================================================================== */

/* Desktop: wrapper is transparent (no effect) */
.mobile-scale-wrapper {
    width: 100%;
}

/* Mobile styles */
@media (max-width: 640px) {
    body {
        min-width: 100%;
        overflow-x: hidden;
    }

    /* Mobile scale wrapper - contains hero, stats, chains
       Width fixed at 375px, JS scales it up on wider screens */
    .mobile-scale-wrapper {
        width: 375px;
        margin: 0 auto;
        transform-origin: top center;
        /* Prevent horizontal overflow when scaled */
        overflow: visible;
    }
}