:root {
    --color-primary-main: #FF4D2E;
    --color-primary-light: #FF7A60;
    --color-primary-dark: #CC3214;
    --color-primary-contrast: #FFFFFF;
    --color-secondary-main: #7928CA;
    --color-secondary-light: #9F55FF;
    --color-secondary-dark: #531396;
    --color-secondary-contrast: #FFFFFF;
    --color-accent-cyan: #00F2FE;
    --color-accent-amber: #FFB300;
    --color-accent-flame: #FF3366;
    --color-bg-base: #090A0F;
    --color-bg-surface-raised: #12141E;
    --color-bg-surface-card: #171A26;
    --color-bg-surface-card-glow: rgba(255, 77, 46, 0.06);
    --color-bg-surface-overlay: rgba(9, 10, 15, 0.82);
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-ambient-glow: rgba(255, 77, 46, 0.35);
    --border-active: rgba(0, 242, 254, 0.5);
    --gradient-hero-ambient: radial-gradient(circle at 50% 20%, rgba(255, 77, 46, 0.18) 0%, rgba(121, 40, 202, 0.12) 40%, rgba(9, 10, 15, 0) 75%);
    --gradient-accent-burn: linear-gradient(135deg, #FF4D2E 0%, #FF3366 50%, #7928CA 100%);
    --gradient-card-surface: linear-gradient(180deg, rgba(23, 26, 38, 0.85) 0%, rgba(18, 20, 30, 0.95) 100%);
    --gradient-glow-border: linear-gradient(135deg, rgba(255, 77, 46, 0.6), rgba(121, 40, 202, 0.2), rgba(0, 242, 254, 0.4));
    --shadow-ambient-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --shadow-card-glow: 0 0 25px rgba(255, 77, 46, 0.15), 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-button-glow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

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

html {
    scroll-behavior: smooth;
    background-color: var(--color-bg-base);
}

body.msi-app-body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: var(--color-primary-main);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: var(--color-primary-light);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono);
}

/* ===== header ===== */
.site-header-block {
    background-color: #090A0F;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1050;
    width: 100%;
}

.site-header-block .navbar {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #090A0F;
}

.site-header-block .navbar-brand {
    padding: 0;
    margin-right: 1.5rem;
    text-decoration: none;
}

.site-header-block .brand-logo-img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

.site-header-block .brand-title-text {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-header-block .custom-toggler {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #12141E;
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1;
    box-shadow: none;
}

.site-header-block .custom-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.4);
    outline: none;
}

.site-header-block .toggler-icon {
    width: 24px;
    height: 24px;
    color: #F8FAFC;
    display: block;
}

.site-header-block .nav-link-custom {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #94A3B8;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header-block .nav-link-custom:hover,
.site-header-block .nav-link-custom:focus {
    color: #FF7A60;
    background-color: rgba(255, 255, 255, 0.03);
}

.site-header-block .nav-link-custom.active {
    color: #F8FAFC;
    font-weight: 600;
}

.site-header-block .btn-header-cta {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header-block .btn-header-cta:hover,
.site-header-block .btn-header-cta:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 24px rgba(255, 77, 46, 0.55);
}

@media (max-width: 991.98px) {
    .site-header-block .navbar-collapse {
        background-color: #12141E;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-top: 12px;
    }

    .site-header-block .nav-link-custom {
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .site-header-block .btn-header-cta {
        width: 100%;
    }
}

/* ===== hero_section ===== */
.hero-msli-section {
    background-color: #090A0F;
    min-height: 85vh;
    position: relative;
    display: flex;
    align-items: center;
    color: #F8FAFC;
}

.hero-msli-section .hero-video-wrapper {
    z-index: 1;
    pointer-events: none;
}

.hero-msli-section .hero-bg-video {
    object-fit: cover;
    background-position: center;
    background-size: cover;
    opacity: 0.28;
}

.hero-msli-section .hero-video-overlay {
    background: radial-gradient(circle at 60% 30%, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.1) 40%, rgba(9, 10, 15, 0.95) 85%);
}

.hero-msli-section .container {
    z-index: 2;
}

.hero-msli-section .min-vh-hero {
    min-height: calc(85vh - 40px);
}

.hero-msli-section .hero-badge {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-msli-section .badge-dot {
    width: 8px;
    height: 8px;
    background-color: #00F2FE;
    border-radius: 50%;
    box-shadow: 0 0 8px #00F2FE;
    flex-shrink: 0;
    margin-right: 8px;
}

.hero-msli-section .hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #F8FAFC;
}

.hero-msli-section .hero-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 540px;
}

.hero-msli-section .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.hero-msli-section .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.hero-msli-section .btn-secondary-custom {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 28px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-msli-section .btn-secondary-custom:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(0, 242, 254, 0.4);
}

.hero-msli-section .hero-btn-icon {
    width: 18px;
    height: 18px;
}

.hero-msli-section .hero-stat-card {
    background: rgba(23, 26, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.hero-msli-section .hero-stat-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #FF4D2E;
}

.hero-msli-section .hero-stat-label {
    font-size: 0.75rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-msli-section .hero-visual-stage {
    min-height: 460px;
    position: relative;
}

.hero-msli-section .ambient-glow-circle {
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

.hero-msli-section .ambient-glow-primary {
    width: 300px;
    height: 300px;
    background: rgba(255, 77, 46, 0.22);
    top: 10%;
    right: 15%;
}

.hero-msli-section .ambient-glow-secondary {
    width: 250px;
    height: 250px;
    background: rgba(121, 40, 202, 0.25);
    bottom: 5%;
    left: 10%;
}

.hero-msli-section .geometric-ring {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 2;
}

.hero-msli-section .ring-outer {
    width: 440px;
    height: 440px;
}

.hero-msli-section .ring-middle {
    width: 340px;
    height: 340px;
    border-style: solid;
    border-color: rgba(0, 242, 254, 0.12);
}

.hero-msli-section .ring-inner {
    width: 240px;
    height: 240px;
    border-color: rgba(255, 77, 46, 0.12);
}

.hero-msli-section .hero-main-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.94) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.3);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.15), 0 16px 40px rgba(0, 0, 0, 0.6);
    max-width: 480px;
    z-index: 3;
}

.hero-msli-section .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-msli-section .border-top-subtle {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-msli-section .status-indicator-light {
    width: 8px;
    height: 8px;
    background-color: #00F2FE;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px #00F2FE;
}

.hero-msli-section .rack-title-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #F8FAFC;
}

.hero-msli-section .dsp-mode-selector {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-msli-section .dsp-tab-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hero-msli-section .dsp-tab-btn.active,
.hero-msli-section .dsp-tab-btn:hover {
    background: #FF4D2E;
    color: #FFFFFF;
}

.hero-msli-section .frequency-rack-screen {
    background: #0E1017;
    border: 1px solid rgba(0, 242, 254, 0.25);
}

.hero-msli-section .screen-metric-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748B;
}

.hero-msli-section .screen-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #00F2FE;
}

.hero-msli-section .spectrum-bars-wrapper {
    height: 70px;
}

.hero-msli-section .spectrum-bar {
    width: 6.5%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    transition: height 0.2s ease, background 0.2s ease;
}

.hero-msli-section .spectrum-bar.active {
    background: linear-gradient(180deg, #FF4D2E 0%, #7928CA 100%);
    box-shadow: 0 0 8px rgba(255, 77, 46, 0.4);
}

.hero-msli-section .dsp-telemetry-box {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-msli-section .telemetry-title {
    font-size: 0.625rem;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: 0.04em;
}

.hero-msli-section .telemetry-digit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    font-weight: 700;
}

.hero-msli-section .text-cyan {
    color: #00F2FE;
}

.hero-msli-section .text-orange {
    color: #FFB300;
}

.hero-msli-section .preset-badge {
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.hero-msli-section .text-link-tech {
    color: #FF7A60;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
}

.hero-msli-section .text-link-tech:hover {
    color: #FFFFFF;
}

.hero-msli-section .hero-small-icon {
    width: 14px;
    height: 14px;
}

.hero-msli-section .floating-widget-chip {
    background: rgba(18, 20, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 4;
}

.hero-msli-section .widget-chip-top {
    top: -10px;
    right: -10px;
}

.hero-msli-section .widget-chip-bottom {
    bottom: -15px;
    left: -10px;
}

.hero-msli-section .chip-icon-box {
    width: 36px;
    height: 36px;
}

.hero-msli-section .chip-icon-orange {
    background: rgba(255, 77, 46, 0.15);
    color: #FF4D2E;
}

.hero-msli-section .chip-icon-cyan {
    background: rgba(0, 242, 254, 0.15);
    color: #00F2FE;
}

.hero-msli-section .chip-svg {
    width: 20px;
    height: 20px;
}

.hero-msli-section .chip-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #F8FAFC;
    line-height: 1.2;
}

.hero-msli-section .chip-sub {
    font-size: 0.6875rem;
    color: #94A3B8;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .hero-msli-section .hero-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .hero-msli-section .hero-description {
        font-size: 0.9375rem;
    }

    .hero-msli-section .floating-widget-chip {
        position: static !important;
        margin-top: 12px;
    }

    .hero-msli-section .geometric-ring {
        display: none;
    }

    .hero-msli-section .hero-visual-stage {
        min-height: auto;
        margin-top: 24px;
        flex-direction: column;
    }
}

/* ===== who_its_for_and_who_its_not ===== */
.msli-qualification-section {
    background-color: #090A0F;
    color: #F8FAFC;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}

.msli-qualification-section .msli-qual-ambient-glow {
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    width: 680px;
    height: 380px;
    max-width: 90vw;
    background: radial-gradient(circle, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.08) 45%, rgba(9, 10, 15, 0) 75%);
    filter: blur(50px);
    pointer-events: none;
}

.msli-qualification-section .msli-qual-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.msli-qualification-section .msli-qual-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #FFFFFF;
    letter-spacing: -0.02em;
}

.msli-qualification-section .msli-qual-subtitle {
    color: #94A3B8;
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.msli-qualification-section .msli-qual-filter-group {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 6px;
}

.msli-qualification-section .msli-filter-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 9999px;
    transition: color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.msli-qualification-section .msli-filter-btn:hover {
    color: #FFFFFF;
}

.msli-qualification-section .msli-filter-btn.active {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.35);
}

.msli-qualification-section .msli-qual-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.msli-qualification-section .msli-card-fit {
    border-top: 3px solid #00F2FE;
}

.msli-qualification-section .msli-card-fit:hover {
    border-color: rgba(0, 242, 254, 0.45);
    box-shadow: 0 0 28px rgba(0, 242, 254, 0.12), 0 12px 28px rgba(0, 0, 0, 0.6);
}

.msli-qualification-section .msli-card-unfit {
    border-top: 3px solid #64748B;
}

.msli-qualification-section .msli-card-unfit:hover {
    border-color: rgba(255, 77, 46, 0.35);
    box-shadow: 0 0 28px rgba(255, 77, 46, 0.12), 0 12px 28px rgba(0, 0, 0, 0.6);
}

.msli-qualification-section .msli-qual-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msli-qualification-section .msli-icon-fit {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #00F2FE;
}

.msli-qualification-section .msli-icon-unfit {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
}

.msli-qualification-section .msli-heroicon {
    width: 24px;
    height: 24px;
}

.msli-qualification-section .msli-heroicon-sm {
    width: 14px;
    height: 14px;
}

.msli-qualification-section .msli-arrow-icon {
    width: 16px;
    height: 16px;
}

.msli-qualification-section .msli-icon-inline {
    display: inline-block;
    vertical-align: middle;
}

.msli-qualification-section .msli-icon-space {
    margin-left: 0.5rem;
}

.msli-qualification-section .msli-qual-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 2px;
}

.msli-qualification-section .msli-tag-fit {
    color: #00F2FE;
}

.msli-qualification-section .msli-tag-unfit {
    color: #94A3B8;
}

.msli-qualification-section .msli-qual-card-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #FFFFFF;
}

.msli-qualification-section .msli-qual-lead-text {
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1.55;
}

.msli-qualification-section .msli-bullet-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

.msli-qualification-section .msli-bullet-fit {
    background: rgba(0, 242, 254, 0.15);
    color: #00F2FE;
}

.msli-qualification-section .msli-bullet-unfit {
    background: rgba(255, 77, 46, 0.15);
    color: #FF7A60;
}

.msli-qualification-section .msli-qual-item-title {
    color: #F8FAFC;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.msli-qualification-section .msli-qual-item-desc {
    color: #94A3B8;
    font-size: 0.875rem;
    line-height: 1.45;
    display: block;
}

.msli-qualification-section .msli-qual-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.msli-qualification-section .msli-qual-link {
    color: #FF7A60;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.msli-qualification-section .msli-qual-link:hover {
    color: #FF4D2E;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .msli-qualification-section .msli-qual-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .msli-qualification-section .msli-qual-card-heading {
        font-size: 0.875rem;
    }

    .msli-qualification-section .msli-qual-filter-group {
        flex-wrap: wrap;
        width: 100%;
        border-radius: 12px;
    }

    .msli-qualification-section .msli-filter-btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== how_it_works_inside ===== */
.how-it-works-section {
    background-color: #090A0F;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif
}

.how-it-works-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.08) 40%, rgba(9, 10, 15, 0) 70%);
    pointer-events: none
}

.how-it-works-section .how-it-works-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase
}

.how-it-works-section .how-it-works-badge-icon {
    width: 16px;
    height: 16px;
    stroke: #FF7A60
}

.how-it-works-section .how-it-works-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    color: #F8FAFC;
    font-size: 2.25rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em
}

.how-it-works-section .how-it-works-subtitle {
    color: #94A3B8;
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
}

.how-it-works-section .how-it-works-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease
}

.how-it-works-section .how-it-works-card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.15), 0 12px 28px rgba(0, 0, 0, 0.6)
}

.how-it-works-section .how-it-works-card-media {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background-color: #12141E
}

.how-it-works-section .how-it-works-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.how-it-works-section .how-it-works-step-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(9, 10, 15, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #00F2FE;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.05em
}

.how-it-works-section .how-it-works-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.how-it-works-section .how-it-works-card-heading {
    font-family: 'Space Grotesk', sans-serif;
    color: #F8FAFC;
    font-size: 1.375rem;
    line-height: 1.35;
    font-weight: 600;
    margin-bottom: 12px
}

.how-it-works-section .how-it-works-card-text {
    color: #94A3B8;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1
}

.how-it-works-section .how-it-works-meta-box {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.how-it-works-section .how-it-works-meta-label {
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em
}

.how-it-works-section .how-it-works-meta-value {
    color: #FF7A60;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600
}

.how-it-works-section .how-it-works-footer-bar {
    background: linear-gradient(135deg, rgba(23, 26, 38, 0.95) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(255, 77, 46, 0.08), 0 12px 24px rgba(0, 0, 0, 0.5)
}

.how-it-works-section .how-it-works-footer-title {
    font-family: 'Space Grotesk', sans-serif;
    color: #F8FAFC;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35
}

.how-it-works-section .how-it-works-footer-desc {
    color: #94A3B8;
    font-size: 0.9375rem;
    line-height: 1.5
}

.how-it-works-section .how-it-works-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.35);
    transition: border-color .2s ease, box-shadow .2s ease
}

.how-it-works-section .how-it-works-cta-btn:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6)
}

@media(max-width:767.98px) {
    .how-it-works-section {
        padding: 64px 0
    }

    .how-it-works-section .how-it-works-title {
        font-size: 16px;
        hyphens: auto
    }

    .how-it-works-section .how-it-works-card-heading {
        font-size: 14px;
        hyphens: auto
    }

    .how-it-works-section .how-it-works-footer-title {
        font-size: 14px;
        hyphens: auto
    }

    .how-it-works-section .how-it-works-card-media {
        height: 200px
    }

    .how-it-works-section .how-it-works-cta-btn {
        width: 100%
    }
}

/* ===== key_benefits ===== */
.msli-benefits-section {
    background-color: #090A0F;
    position: relative;
    overflow: hidden;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.msli-benefits-section::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.08) 40%, rgba(9, 10, 15, 0) 70%);
    pointer-events: none;
}

.msli-benefits-section .msli-benefits-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    border-radius: 9999px;
    padding: 6px 16px;
}

.msli-benefits-section .msli-badge-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FF7A60;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.msli-benefits-section .msli-benefits-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #F8FAFC;
    letter-spacing: -0.02em;
}

.msli-benefits-section .msli-benefits-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 680px;
    margin: 0 auto;
}

.msli-benefits-section .msli-benefit-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.msli-benefits-section .msli-benefit-card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.18), 0 16px 36px rgba(0, 0, 0, 0.6);
}

.msli-benefits-section .msli-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.msli-benefits-section .msli-svg-icon {
    width: 24px;
    height: 24px;
    stroke: #FF4D2E;
}

.msli-benefits-section .msli-metric-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.msli-benefits-section .msli-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #00F2FE;
}

.msli-benefits-section .msli-metric-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.msli-benefits-section .msli-card-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: #F8FAFC;
}

.msli-benefits-section .msli-card-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #94A3B8;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .msli-benefits-section .msli-benefits-title {
        font-size: 1.5rem;
    }

    .msli-benefits-section .msli-card-heading {
        font-size: 1.125rem;
    }

    .msli-benefits-section .msli-benefit-card {
        padding: 20px 18px;
    }
}

/* ===== work_formats ===== */
.work-formats-section {
    background-color: #090A0F;
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.work-formats-section .format-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.work-formats-section .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #FF4D2E;
    box-shadow: 0 0 8px #FF4D2E;
}

.work-formats-section .format-main-heading {
    color: #F8FAFC;
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.work-formats-section .format-lead-text {
    color: #94A3B8;
    font-size: 1.05rem;
    line-height: 1.6;
}

.work-formats-section .format-nav-container {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    gap: 6px;
}

.work-formats-section .format-tab-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.work-formats-section .format-tab-btn:hover {
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.04);
}

.work-formats-section .format-tab-btn.active {
    color: #FFFFFF;
    background: #171A26;
    border: 1px solid rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 15px rgba(255, 77, 46, 0.2);
}

.work-formats-section .format-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.work-formats-section .format-card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.15), 0 16px 36px rgba(0, 0, 0, 0.6);
}

.work-formats-section .format-card-featured {
    border-color: rgba(255, 77, 46, 0.25);
    box-shadow: 0 0 25px rgba(255, 77, 46, 0.12), 0 12px 28px rgba(0, 0, 0, 0.6);
}

.work-formats-section .format-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-formats-section .format-icon-primary {
    background: rgba(255, 77, 46, 0.12);
    color: #FF4D2E;
    border: 1px solid rgba(255, 77, 46, 0.3);
}

.work-formats-section .format-icon-accent {
    background: rgba(0, 242, 254, 0.12);
    color: #00F2FE;
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.work-formats-section .format-icon-purple {
    background: rgba(121, 40, 202, 0.15);
    color: #9F55FF;
    border: 1px solid rgba(121, 40, 202, 0.3);
}

.work-formats-section .format-svg-icon {
    width: 22px;
    height: 22px;
}

.work-formats-section .format-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748B;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
}

.work-formats-section .format-tag-accent {
    color: #00F2FE;
    border-color: rgba(0, 242, 254, 0.3);
    background: rgba(0, 242, 254, 0.08);
}

.work-formats-section .format-card-title {
    color: #F8FAFC;
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.work-formats-section .format-card-desc {
    color: #94A3B8;
    font-size: 0.925rem;
    line-height: 1.55;
}

.work-formats-section .format-spec-box {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
}

.work-formats-section .spec-label {
    color: #64748B;
    font-size: 0.8125rem;
    font-weight: 500;
}

.work-formats-section .spec-value {
    color: #F8FAFC;
    font-size: 0.8125rem;
    font-weight: 600;
}

.work-formats-section .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.work-formats-section .list-check-icon {
    width: 18px;
    height: 18px;
    color: #FF7A60;
    margin-top: 2px;
}

.work-formats-section .list-text {
    color: #94A3B8;
    font-size: 0.875rem;
    line-height: 1.45;
}

.work-formats-section .format-action-btn {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.925rem;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.35);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease;
}

.work-formats-section .format-action-btn:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6);
}

@media (max-width: 767.98px) {
    .work-formats-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .work-formats-section .format-main-heading {
        font-size: 16px;
        hyphens: auto;
    }

    .work-formats-section .format-card-title {
        font-size: 14px;
    }

    .work-formats-section .format-tab-btn {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        padding: 8px 10px;
        font-size: 0.8125rem;
    }

    .work-formats-section .format-card {
        padding: 20px 16px;
    }
}

/* ===== press_mentions ===== */
.press-mentions-section {
    background-color: #090A0F;
    background-image: radial-gradient(circle at 50% 10%, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.06) 40%, rgba(9, 10, 15, 0) 70%);
    color: #F8FAFC;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
}

.press-mentions-section .press-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    border-radius: 9999px;
    padding: 6px 16px
}

.press-mentions-section .press-badge-icon {
    color: #FF7A60
}

.press-mentions-section .press-badge-text {
    color: #FF7A60;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase
}

.press-mentions-section .press-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    color: #F8FAFC;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em
}

.press-mentions-section .press-subtitle {
    color: #94A3B8;
    font-size: 1.125rem;
    line-height: 1.6
}

.press-mentions-section .press-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    padding: 24px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.press-mentions-section .press-card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 35px rgba(255, 77, 46, 0.2), 0 16px 36px rgba(0, 0, 0, 0.6)
}

.press-mentions-section .press-outlet-tag {
    color: #00F2FE;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: block
}

.press-mentions-section .press-pub-date {
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 500
}

.press-mentions-section .press-rating {
    background: rgba(255, 179, 0, 0.1);
    border: 1px solid rgba(255, 179, 0, 0.25);
    border-radius: 6px;
    padding: 4px 10px
}

.press-mentions-section .press-star-icon {
    color: #FFB300
}

.press-mentions-section .press-rating-text {
    color: #FFB300;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em
}

.press-mentions-section .press-media-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06)
}

.press-mentions-section .press-thumbnail {
    object-fit: cover;
    width: 100%;
    height: 180px;
    display: block;
    transition: opacity 0.2s ease
}

.press-mentions-section .press-image-link:hover .press-thumbnail {
    opacity: 0.9
}

.press-mentions-section .press-quote {
    border-left: 3px solid #FF4D2E;
    padding-left: 14px;
    margin: 0
}

.press-mentions-section .press-quote-text {
    color: #CBD5E1;
    font-size: 0.9375rem;
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 0
}

.press-mentions-section .press-card-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0
}

.press-mentions-section .press-article-link {
    color: #F8FAFC;
    text-decoration: none;
    transition: color 0.2s ease
}

.press-mentions-section .press-article-link:hover {
    color: #FF7A60;
    text-decoration: none
}

.press-mentions-section .press-action-btn {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.press-mentions-section .press-action-btn:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
    text-decoration: none
}

.press-mentions-section .press-arrow-icon {
    transition: none
}

@media (max-width:767.98px) {
    .press-mentions-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important
    }

    .press-mentions-section .press-title {
        font-size: 16px !important;
        hyphens: auto
    }

    .press-mentions-section .press-card-heading {
        font-size: 14px !important;
        hyphens: auto
    }

    .press-mentions-section .press-subtitle {
        font-size: 0.875rem;
        line-height: 1.4
    }

    .press-mentions-section .press-card {
        padding: 16px
    }

    .press-mentions-section .press-thumbnail {
        height: 150px
    }
}

/* ===== latest_plugins_and_effects ===== */
.plugins-grid-section {
    background-color: #090A0F;
    color: #F8FAFC;
    position: relative;
}

.plugins-grid-section .plugins-grid-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.02em;
}

.plugins-grid-section .plugins-grid-badge-icon {
    color: #FF4D2E;
}

.plugins-grid-section .plugins-grid-heading {
    color: #F8FAFC;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.plugins-grid-section .plugins-grid-subheading {
    color: #94A3B8;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 640px;
}

.plugins-grid-section .plugins-grid-all-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.plugins-grid-section .plugins-grid-all-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 242, 254, 0.5);
    color: #00F2FE;
}

.plugins-grid-section .plugins-grid-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plugins-grid-section .plugins-grid-card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 25px rgba(255, 77, 46, 0.15), 0 12px 28px rgba(0, 0, 0, 0.6);
}

.plugins-grid-section .plugins-grid-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #12141E;
}

.plugins-grid-section .plugins-grid-img-link {
    width: 100%;
    height: 100%;
}

.plugins-grid-section .plugins-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.plugins-grid-section .plugins-grid-card:hover .plugins-grid-img {
    transform: scale(1.03);
}

.plugins-grid-section .plugins-grid-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(9, 10, 15, 0.85);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #00F2FE;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plugins-grid-section .plugins-grid-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #64748B;
}

.plugins-grid-section .plugins-grid-date {
    color: #94A3B8;
}

.plugins-grid-section .plugins-grid-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FF4D2E;
    display: inline-block;
}

.plugins-grid-section .plugins-grid-author {
    color: #94A3B8;
}

.plugins-grid-section .plugins-grid-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.plugins-grid-section .plugins-grid-title-link {
    color: #F8FAFC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.plugins-grid-section .plugins-grid-title-link:hover {
    color: #FF7A60;
}

.plugins-grid-section .plugins-grid-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    color: #94A3B8;
    line-height: 1.6;
}

.plugins-grid-section .plugins-grid-action-btn {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.plugins-grid-section .plugins-grid-action-btn:hover {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}

@media (max-width: 767.98px) {
    .plugins-grid-section .plugins-grid-heading {
        font-size: 16px;
    }

    .plugins-grid-section .plugins-grid-title {
        font-size: 14px;
    }
}

/* ===== tutorials ===== */
.tutorials-grid-section {
    background-color: #090A0F;
    padding: 96px 0;
    position: relative;
    overflow: hidden
}

.tutorials-grid-section .tutorials-header-block {
    max-width: 720px;
    margin-bottom: 56px
}

.tutorials-grid-section .tutorials-badge {
    display: inline-block;
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px
}

.tutorials-grid-section .tutorials-main-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    color: #F8FAFC;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 16px
}

.tutorials-grid-section .tutorials-subtext {
    color: #94A3B8;
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0
}

.tutorials-grid-section .tutorial-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.tutorials-grid-section .tutorial-card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 35px rgba(255, 77, 46, 0.2), 0 16px 36px rgba(0, 0, 0, 0.6)
}

.tutorials-grid-section .tutorial-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #12141E
}

.tutorials-grid-section .tutorial-media-link {
    display: block;
    width: 100%;
    height: 100%
}

.tutorials-grid-section .tutorial-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease
}

.tutorials-grid-section .tutorial-card:hover .tutorial-thumb-img {
    transform: scale(1.03)
}

.tutorials-grid-section .tutorial-meta-pill {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(9, 10, 15, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #F8FAFC
}

.tutorials-grid-section .tutorial-meta-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #F8FAFC
}

.tutorials-grid-section .tutorial-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.tutorials-grid-section .tutorial-author-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: #FF7A60
}

.tutorials-grid-section .tutorial-author-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #FF7A60
}

.tutorials-grid-section .tutorial-card-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 12px
}

.tutorials-grid-section .tutorial-title-link {
    color: #F8FAFC;
    text-decoration: none;
    transition: color 0.2s ease
}

.tutorials-grid-section .tutorial-title-link:hover {
    color: #FF7A60;
    text-decoration: none
}

.tutorials-grid-section .tutorial-card-excerpt {
    color: #94A3B8;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 20px;
    flex-grow: 1
}

.tutorials-grid-section .tutorial-card-footer {
    margin-top: auto
}

.tutorials-grid-section .tutorial-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease, border-color 0.2s ease
}

.tutorials-grid-section .tutorial-action-btn:hover {
    color: #FFFFFF;
    text-decoration: none;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4)
}

.tutorials-grid-section .tutorials-view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease
}

.tutorials-grid-section .tutorials-view-all-btn:hover {
    color: #FFFFFF;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.2)
}

@media (max-width:767.98px) {
    .tutorials-grid-section {
        padding: 64px 0
    }

    .tutorials-grid-section .tutorials-header-block {
        margin-bottom: 36px
    }

    .tutorials-grid-section .tutorials-main-heading {
        font-size: 1rem;
        line-height: 1.3;
        hyphens: auto
    }

    .tutorials-grid-section .tutorial-card-title {
        font-size: 0.875rem;
        line-height: 1.3;
        hyphens: auto
    }

    .tutorials-grid-section .tutorials-subtext {
        font-size: 0.875rem;
        line-height: 1.5
    }

    .tutorials-grid-section .tutorial-card-body {
        padding: 18px
    }
}

/* ===== reviews_and_cases ===== */
.reviews-section-block {
    background-color: #090A0F;
    color: #F8FAFC;
    position: relative;
    overflow: hidden;
}

.reviews-section-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 100%;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.05) 45%, rgba(9, 10, 15, 0) 70%);
    pointer-events: none;
}

.reviews-section-block__badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reviews-section-block__title {
    color: #F8FAFC;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.reviews-section-block__subtitle {
    color: #94A3B8;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.reviews-section-block__card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.reviews-section-block__card:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 25px rgba(255, 77, 46, 0.15), 0 12px 28px rgba(0, 0, 0, 0.6);
}

.reviews-section-block__img-link {
    aspect-ratio: 16 / 10;
    background-color: #12141E;
}

.reviews-section-block__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.reviews-section-block__card:hover .reviews-section-block__img {
    transform: scale(1.03);
}

.reviews-section-block__date {
    color: #64748B;
    font-size: 0.8125rem;
    font-weight: 500;
}

.reviews-section-block__tag {
    color: #00F2FE;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.reviews-section-block__card-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.reviews-section-block__card-link {
    color: #F8FAFC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.reviews-section-block__card-link:hover {
    color: #FF7A60;
    text-decoration: none;
}

.reviews-section-block__excerpt {
    color: #94A3B8;
    font-size: 0.875rem;
    line-height: 1.6;
}

.reviews-section-block__footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.reviews-section-block__btn {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.reviews-section-block__btn:hover {
    background: rgba(255, 77, 46, 0.15);
    border-color: #FF4D2E;
    color: #FFFFFF;
}

.reviews-section-block__main-cta {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.reviews-section-block__main-cta:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767.98px) {
    .reviews-section-block__title {
        font-size: 1rem;
        hyphens: auto;
    }

    .reviews-section-block__card-title {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .reviews-section-block__subtitle {
        font-size: 0.875rem;
    }

    .reviews-section-block__body {
        padding: 1rem !important;
    }
}

/* ===== newsletter_subscribe ===== */
.msli-newsletter-section {
    background-color: #090A0F;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.msli-newsletter-card {
    position: relative;
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.95) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 20px;
    padding: 48px 32px;
    box-shadow: 0 0 35px rgba(255, 77, 46, 0.12), 0 16px 36px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
}

.msli-ambient-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 360px;
    height: 360px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 77, 46, 0.18) 0%, rgba(121, 40, 202, 0.1) 50%, rgba(9, 10, 15, 0) 80%);
    pointer-events: none;
    border-radius: 50%;
}

.msli-newsletter-content {
    position: relative;
    z-index: 2;
}

.msli-feature-pill {
    display: inline-block;
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}

.msli-newsletter-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    line-height: 1.25;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.02em;
}

.msli-newsletter-subtitle {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.msli-input-wrapper {
    position: relative;
    width: 100%;
}

.msli-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.msli-icon {
    width: 18px;
    height: 18px;
}

.msli-form-control {
    width: 100%;
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    border-radius: 10px;
    padding: 14px 16px 14px 46px;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.msli-form-control::placeholder {
    color: #64748B;
    opacity: 1;
}

.msli-form-control:focus {
    border-color: rgba(0, 242, 254, 0.6);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.25);
    background: #12141E;
}

.msli-btn-subscribe {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 14px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.msli-btn-subscribe:hover,
.msli-btn-subscribe:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
    filter: brightness(1.08);
}

.msli-icon-arrow {
    width: 16px;
    height: 16px;
}

.msli-form-meta {
    gap: 12px;
    font-size: 0.8125rem;
    color: #64748B;
}

.msli-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msli-meta-icon {
    width: 14px;
    height: 14px;
    color: #00F2FE;
}

.msli-meta-separator {
    color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767.98px) {
    .msli-newsletter-section {
        padding: 48px 0;
    }

    .msli-newsletter-card {
        padding: 32px 20px;
    }

    .msli-newsletter-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .msli-newsletter-subtitle {
        font-size: 0.9375rem;
    }

    .msli-form-meta {
        flex-direction: column;
        gap: 6px;
    }

    .msli-meta-separator {
        display: none;
    }
}

/* ===== footer ===== */
.site-footer-section {
    position: relative;
    background-color: #090a0f;
    color: #94a3b8;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-footer-section .site-footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 250px;
    background: radial-gradient(ellipse at top, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.06) 45%, rgba(9, 10, 15, 0) 80%);
    pointer-events: none;
}

.site-footer-section .site-footer-logo {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 77, 46, 0.4));
}

.site-footer-section .site-footer-brand-name {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.site-footer-section .site-footer-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.site-footer-section .site-footer-status {
    background: rgba(23, 26, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 6px 14px;
}

.site-footer-section .status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00f2fe;
    box-shadow: 0 0 10px #00f2fe;
}

.site-footer-section .status-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.site-footer-section .site-footer-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.site-footer-section .site-footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.site-footer-section .site-footer-link:hover,
.site-footer-section .site-footer-link:focus {
    color: #ff7a60;
    text-decoration: none;
}

.site-footer-section .site-footer-contact-text {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

.site-footer-section .site-footer-icon {
    width: 18px;
    height: 18px;
    color: #ff4d2e;
}

.site-footer-section .site-footer-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.site-footer-section .site-footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.site-footer-section .site-footer-badge {
    background: rgba(255, 77, 46, 0.06);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
}

.site-footer-section .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff4d2e;
}

.site-footer-section .badge-label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.6875rem;
    color: #ff7a60;
}

@media (max-width: 767.98px) {
    .site-footer-section {
        padding-top: 56px;
        padding-bottom: 32px;
    }

    .site-footer-section .site-footer-heading {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .site-footer-section .site-footer-link,
    .site-footer-section .site-footer-desc,
    .site-footer-section .site-footer-contact-text {
        font-size: 0.875rem;
    }
}

body.bg-base-dark {
    background-color: #090A0F;
    color: #F8FAFC;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
}

.site-header-block {
    background-color: #090A0F;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1050;
    width: 100%;
}

.site-header-block .navbar {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #090A0F;
}

.site-header-block .navbar-brand {
    padding: 0;
    margin-right: 1.5rem;
    text-decoration: none;
}

.site-header-block .brand-logo-img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

.site-header-block .brand-title-text {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-header-block .custom-toggler {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #12141E;
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1;
    box-shadow: none;
}

.site-header-block .custom-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.4);
    outline: none;
}

.site-header-block .toggler-icon {
    width: 24px;
    height: 24px;
    color: #F8FAFC;
    display: block;
}

.site-header-block .nav-link-custom {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #94A3B8;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header-block .nav-link-custom:hover,
.site-header-block .nav-link-custom:focus {
    color: #FF7A60;
    background-color: rgba(255, 255, 255, 0.03);
}

.site-header-block .nav-link-custom.active {
    color: #F8FAFC;
    font-weight: 600;
}

.site-header-block .btn-header-cta {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header-block .btn-header-cta:hover,
.site-header-block .btn-header-cta:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 24px rgba(255, 77, 46, 0.55);
}

.category-hero-section {
    background-color: #090A0F;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.category-hero-section .hero-video-wrapper {
    z-index: 1;
    pointer-events: none;
}

.category-hero-section .hero-bg-video {
    object-fit: cover;
    background-position: center;
    background-size: cover;
    opacity: 0.28;
}

.category-hero-section .hero-video-overlay {
    background: radial-gradient(circle at 60% 30%, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.1) 40%, rgba(9, 10, 15, 0.95) 85%);
}

.category-hero-section .container {
    z-index: 2;
}

.category-hero-section .ambient-glow-circle {
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.category-hero-section .ambient-glow-primary {
    width: 380px;
    height: 380px;
    background: rgba(255, 77, 46, 0.16);
    top: -40px;
    right: 10%;
}

.category-hero-section .ambient-glow-secondary {
    width: 320px;
    height: 320px;
    background: rgba(121, 40, 202, 0.18);
    bottom: -60px;
    left: 5%;
}

.category-hero-section .category-pill-badge {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
}

.category-hero-section .category-badge-dot {
    width: 8px;
    height: 8px;
    background-color: #00F2FE;
    border-radius: 50%;
    box-shadow: 0 0 8px #00F2FE;
}

.category-hero-section .category-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #F8FAFC;
    letter-spacing: -0.02em;
}

.category-hero-section .category-hero-subtitle {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 640px;
}

.category-hero-section .meta-badge-item {
    background: rgba(23, 26, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #F8FAFC;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 10px;
    border-radius: 6px;
}

.category-hero-section .category-summary-box {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.95) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.category-hero-section .summary-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.05em;
}

.category-hero-section .summary-val-highlight {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #FF4D2E;
    font-weight: 700;
}

.category-hero-section .metric-name {
    font-size: 0.8125rem;
    color: #94A3B8;
}

.category-hero-section .metric-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F8FAFC;
}

.category-hero-section .text-cyan {
    color: #00F2FE;
}

.reviews-list-block {
    background-color: #090A0F;
}

.reviews-list-block .filter-action-btn {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94A3B8;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.reviews-list-block .filter-action-btn:hover,
.reviews-list-block .filter-action-btn.active {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.4);
}

.reviews-list-block .search-control-wrapper {
    width: 100%;
}

.reviews-list-block .reviews-search-input {
    background-color: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    padding: 10px 16px 10px 42px;
    border-radius: 8px;
    font-size: 0.875rem;
}

.reviews-list-block .reviews-search-input:focus {
    background-color: #171A26;
    border-color: #FF4D2E;
    color: #F8FAFC;
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.25);
    outline: none;
}

.reviews-list-block .reviews-search-input::placeholder {
    color: #64748B;
    opacity: 1;
}

.reviews-list-block .search-field-icon {
    width: 18px;
    height: 18px;
    color: #94A3B8;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.reviews-list-block .review-card-panel {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reviews-list-block .review-card-panel:hover {
    border-color: rgba(255, 77, 46, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.18), 0 16px 36px rgba(0, 0, 0, 0.6);
}

.reviews-list-block .card-img-wrapper {
    max-height: 200px;
    background-color: #0E1017;
}

.reviews-list-block .review-img {
    height: 200px;
    object-fit: cover;
    display: block;
}

.reviews-list-block .card-img-link {
    display: block;
    text-decoration: none;
    line-height: 0;
}

.reviews-list-block .card-img-link .review-img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.reviews-list-block .card-img-link:hover .review-img {
    transform: scale(1.04);
    filter: brightness(1.1);
}

.reviews-list-block .card-category-tag {
    top: 10px;
    right: 10px;
    background: rgba(9, 10, 15, 0.85);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    font-size: 0.6875rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.reviews-list-block .card-meta-row {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.reviews-list-block .meta-date-text {
    color: #00F2FE;
}

.reviews-list-block .meta-author-text {
    color: #94A3B8;
}

.reviews-list-block .review-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: #F8FAFC;
}

.reviews-list-block .review-title-link {
    color: #F8FAFC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.reviews-list-block .review-title-link:hover {
    color: #FF7A60;
    text-decoration: none;
}

.reviews-list-block .review-excerpt-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #94A3B8;
}

.reviews-list-block .border-top-subtle {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reviews-list-block .status-dot-mini {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F2FE;
    box-shadow: 0 0 6px #00F2FE;
}

.reviews-list-block .status-caption {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748B;
}

.reviews-list-block .btn-primary-action {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(255, 77, 46, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.reviews-list-block .btn-primary-action:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 22px rgba(255, 77, 46, 0.55);
}

.reviews-list-block .btn-arrow-icon {
    width: 14px;
    height: 14px;
}

.reviews-list-block .no-results-panel {
    background: #12141E;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.reviews-list-block .no-results-icon-box {
    width: 52px;
    height: 52px;
    background: rgba(255, 77, 46, 0.12);
    color: #FF4D2E;
}

.reviews-list-block .no-results-svg {
    width: 26px;
    height: 26px;
}

.reviews-list-block .no-results-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #F8FAFC;
}

.reviews-list-block .no-results-desc {
    font-size: 0.875rem;
    color: #94A3B8;
}

.site-footer-section {
    position: relative;
    background-color: #090a0f;
    color: #94a3b8;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-footer-section .site-footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 250px;
    background: radial-gradient(ellipse at top, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.06) 45%, rgba(9, 10, 15, 0) 80%);
    pointer-events: none;
}

.site-footer-section .site-footer-logo {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 77, 46, 0.4));
}

.site-footer-section .site-footer-brand-name {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.site-footer-section .site-footer-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.site-footer-section .site-footer-status {
    background: rgba(23, 26, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 6px 14px;
}

.site-footer-section .status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00f2fe;
    box-shadow: 0 0 10px #00f2fe;
}

.site-footer-section .status-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.site-footer-section .site-footer-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.site-footer-section .site-footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.site-footer-section .site-footer-link:hover,
.site-footer-section .site-footer-link:focus {
    color: #ff7a60;
    text-decoration: none;
}

.site-footer-section .site-footer-contact-text {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

.site-footer-section .site-footer-icon {
    width: 18px;
    height: 18px;
    color: #ff4d2e;
}

.site-footer-section .site-footer-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.site-footer-section .site-footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.site-footer-section .site-footer-badge {
    background: rgba(255, 77, 46, 0.06);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
}

.site-footer-section .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff4d2e;
}

.site-footer-section .badge-label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.6875rem;
    color: #ff7a60;
}

@media (max-width: 991.98px) {
    .site-header-block .navbar-collapse {
        background-color: #12141E;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-top: 12px;
    }

    .site-header-block .nav-link-custom {
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .site-header-block .btn-header-cta {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .category-hero-section .category-hero-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .category-hero-section .category-hero-subtitle {
        font-size: 0.875rem;
    }

    .reviews-list-block .review-card-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .site-footer-section {
        padding-top: 56px;
        padding-bottom: 32px;
    }

    .site-footer-section .site-footer-heading {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .site-footer-section .site-footer-link,
    .site-footer-section .site-footer-desc,
    .site-footer-section .site-footer-contact-text {
        font-size: 0.875rem;
    }
}


/* ===== PAGE: about ===== */
.msli-about-page { background-color: #090A0F; color: #94A3B8; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; } .msli-about-page .msli-history-section, .msli-about-page .msli-contact-section { position: relative; } .msli-about-page .msli-badge { background: rgba(255, 77, 46, 0.1); border: 1px solid rgba(255, 77, 46, 0.3); color: #FF7A60; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .msli-about-page .msli-badge-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #FF4D2E; } .msli-about-page .msli-main-heading { font-family: 'Space Grotesk', sans-serif; font-size: 2.25rem; line-height: 1.25; } .msli-about-page .msli-lead-text { font-size: 1.125rem; line-height: 1.6; color: #F8FAFC; } .msli-about-page .msli-body-text { font-size: 0.95rem; line-height: 1.6; color: #94A3B8; } .msli-about-page .msli-stat-card { background: linear-gradient(180deg, rgba(23, 26, 38, 0.85) 0%, rgba(18, 20, 30, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.08); } .msli-about-page .msli-stat-number { font-family: 'JetBrains Mono', monospace; font-size: 1.75rem; color: #FF7A60 !important; } .msli-about-page .msli-stat-label { font-size: 0.85rem; } .msli-about-page .msli-core-panel { background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%); border: 1px solid rgba(255, 77, 46, 0.25); box-shadow: 0 0 25px rgba(255, 77, 46, 0.12), 0 12px 28px rgba(0, 0, 0, 0.6); } .msli-about-page .msli-timeline { border-left: 2px solid rgba(255, 77, 46, 0.3); padding-left: 18px; margin-left: 6px; } .msli-about-page .msli-timeline-item { position: relative; } .msli-about-page .msli-timeline-item::before { content: ''; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background-color: #FF4D2E; box-shadow: 0 0 10px rgba(255, 77, 46, 0.8); } .msli-about-page .msli-timeline-year { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #00F2FE; } .msli-about-page .msli-timeline-text { font-size: 0.85rem; line-height: 1.45; } .msli-about-page .msli-feature-box { background: linear-gradient(180deg, rgba(23, 26, 38, 0.85) 0%, rgba(18, 20, 30, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .msli-about-page .msli-feature-box:hover { border-color: rgba(255, 77, 46, 0.4); box-shadow: 0 0 25px rgba(255, 77, 46, 0.15), 0 12px 24px rgba(0, 0, 0, 0.5); } .msli-about-page .msli-icon-wrapper { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 77, 46, 0.1); border: 1px solid rgba(255, 77, 46, 0.3); color: #FF4D2E; } .msli-about-page .msli-svg-icon { width: 22px; height: 22px; } .msli-about-page .msli-box-text { font-size: 0.875rem; line-height: 1.5; } .msli-about-page .msli-contact-card { background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45); } .msli-about-page .msli-contact-subtitle { font-size: 0.95rem; } .msli-about-page .msli-form-label { font-size: 0.875rem; } .msli-about-page .msli-form-input { background-color: #0E1017 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #F8FAFC !important; border-radius: 8px; font-size: 0.9375rem; padding: 12px 16px; } .msli-about-page .msli-form-input::placeholder { color: #64748B !important; opacity: 1; } .msli-about-page .msli-form-input:focus { background-color: #0E1017 !important; border-color: rgba(0, 242, 254, 0.5) !important; box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important; color: #F8FAFC !important; } .msli-about-page .msli-textarea { resize: vertical; min-height: 110px; } .msli-about-page .msli-submit-btn { background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; font-size: 1rem; box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .msli-about-page .msli-submit-btn:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4); } @media (max-width: 767.98px) { .msli-about-page .msli-main-heading { font-size: 1.125rem; hyphens: auto; } .msli-about-page h2 { font-size: 1rem; hyphens: auto; } .msli-about-page h3 { font-size: 0.875rem; hyphens: auto; } .msli-about-page .msli-lead-text { font-size: 0.95rem; } .msli-about-page .msli-contact-card { padding: 20px 16px !important; } }

/* ===== PAGE: privacy ===== */
.privacy-content-section{background-color:#090A0F;color:#94A3B8;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif}.privacy-content-section .privacy-sidebar{position:sticky;top:90px}.privacy-content-section .privacy-sidebar-card{background:linear-gradient(180deg,rgba(23,26,38,0.9) 0%,rgba(18,20,30,0.95) 100%);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.45)}.privacy-content-section .privacy-badge{background:rgba(255,77,46,0.1);border:1px solid rgba(255,77,46,0.3);color:#FF7A60;border-radius:9999px;padding:4px 12px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}.privacy-content-section .privacy-sidebar-title{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#F8FAFC}.privacy-content-section .privacy-nav-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;color:#94A3B8;text-decoration:none;font-size:0.875rem;font-weight:500;border:1px solid transparent}.privacy-content-section .privacy-nav-link:hover{background:rgba(255,255,255,0.04);color:#F8FAFC;border-color:rgba(255,255,255,0.08)}.privacy-content-section .privacy-nav-link.active{background:rgba(255,77,46,0.12);color:#FF7A60;border-color:rgba(255,77,46,0.35)}.privacy-content-section .privacy-nav-num{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#00F2FE}.privacy-content-section .privacy-card{background:linear-gradient(180deg,rgba(23,26,38,0.9) 0%,rgba(18,20,30,0.95) 100%);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.45)}.privacy-content-section .privacy-card-icon{width:44px;height:44px;border-radius:10px;background:rgba(255,77,46,0.1);border:1px solid rgba(255,77,46,0.3);color:#FF4D2E;display:flex;align-items:center;justify-content:center;flex-shrink:0}.privacy-content-section .privacy-section-indicator{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#00F2FE;text-transform:uppercase;letter-spacing:0.08em;display:block}.privacy-content-section .privacy-section-heading{font-family:'Space Grotesk',sans-serif;color:#F8FAFC;font-weight:700}.privacy-content-section .privacy-body-text{color:#94A3B8;font-size:0.975rem;line-height:1.7}.privacy-content-section .privacy-body-text p{margin-bottom:1rem}.privacy-content-section .privacy-body-text p:last-child{margin-bottom:0}.privacy-content-section .privacy-list{padding-left:1.25rem;margin-bottom:1rem}.privacy-content-section .privacy-list li{margin-bottom:0.5rem;color:#CBD5E1}.privacy-content-section .privacy-spec-box{background:#12141E;border:1px solid rgba(0,242,254,0.2);border-radius:10px}.privacy-content-section .privacy-contact-box{background:#12141E;border:1px solid rgba(255,77,46,0.25);border-radius:10px}.privacy-content-section .privacy-inline-link{color:#FF7A60;text-decoration:none;font-weight:600}.privacy-content-section .privacy-inline-link:hover{color:#00F2FE;text-decoration:underline}@media (max-width:767.98px){.privacy-content-section .privacy-section-heading.h2{font-size:1.25rem}.privacy-content-section .privacy-section-heading.h3{font-size:1.125rem}.privacy-content-section .privacy-sidebar{position:static}.privacy-content-section .privacy-card{padding:1.25rem!important}}

/* ===== PAGE: terms ===== */
.msli-terms-page {
  background-color: #090a0f;
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}

.msli-terms-page .msli-terms-sidebar {
  background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  top: 32px;
}

.msli-terms-page .msli-sidebar-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #f8fafc;
}

.msli-terms-page .msli-sidebar-subtitle {
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.5;
}

.msli-terms-page .msli-icon-glow {
  stroke: #ff4d2e;
}

.msli-terms-page .msli-search-box input {
  background: #0e1017;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 0.875rem;
  border-radius: 8px;
  padding: 10px 14px;
}

.msli-terms-page .msli-search-box input:focus {
  background: #12141e;
  border-color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.25);
  color: #ffffff;
}

.msli-terms-page .msli-search-box input::placeholder {
  color: #64748b;
  opacity: 1;
}

.msli-terms-page .msli-nav-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: none;
}

.msli-terms-page .msli-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 77, 46, 0.3);
}

.msli-terms-page .msli-nav-item.active {
  color: #ffffff;
  background: rgba(255, 77, 46, 0.12);
  border-color: #ff4d2e;
  font-weight: 600;
}

.msli-terms-page .msli-legal-notice {
  background: #12141e;
  border: 1px solid rgba(0, 242, 254, 0.2);
}

.msli-terms-page .msli-badge-pill {
  background: rgba(255, 77, 46, 0.1);
  border: 1px solid rgba(255, 77, 46, 0.3);
  color: #ff7a60;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.msli-terms-page .msli-notice-text {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
}

.msli-terms-page .msli-terms-body {
  background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.msli-terms-page .msli-header-tag {
  color: #ff4d2e;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.msli-terms-page .msli-main-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #f8fafc;
}

.msli-terms-page .msli-lead-paragraph {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #94a3b8;
}

.msli-terms-page .msli-legal-section {
  scroll-margin-top: 32px;
}

.msli-terms-page .msli-section-num {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ff4d2e;
  background: rgba(255, 77, 46, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 77, 46, 0.25);
}

.msli-terms-page .msli-section-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #f8fafc;
}

.msli-terms-page .msli-subheading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #f8fafc;
}

.msli-terms-page .msli-text-block {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #94a3b8;
  margin-bottom: 1rem;
}

.msli-terms-page .msli-card-accent {
  background: #12141e;
  border: 1px solid rgba(255, 77, 46, 0.2);
  border-radius: 10px;
}

.msli-terms-page .msli-warning-box {
  background: rgba(255, 179, 0, 0.05);
  border: 1px solid rgba(255, 179, 0, 0.25);
  border-radius: 10px;
}

.msli-terms-page .msli-contact-card {
  background: #12141e;
  border: 1px solid rgba(0, 242, 254, 0.2);
}

.msli-terms-page .msli-legal-list {
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.6;
}

.msli-terms-page .msli-legal-list li {
  margin-bottom: 6px;
}

.msli-terms-page .msli-btn-outline {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.msli-terms-page .msli-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 242, 254, 0.4);
  color: #ffffff;
}

@media (max-width: 767.98px) {
  .msli-terms-page .msli-main-heading {
    font-size: 1.125rem;
  }
  .msli-terms-page .msli-section-title {
    font-size: 1rem;
  }
  .msli-terms-page .msli-subheading {
    font-size: 0.875rem;
  }
  .msli-terms-page .msli-lead-paragraph {
    font-size: 0.9375rem;
  }
  .msli-terms-page .msli-terms-sidebar {
    position: static;
  }
}

/* ===== PAGE: disclaimer ===== */
.disclaimer-section {
  background-color: #090A0F;
  color: #F8FAFC;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  overflow: hidden;
}

.disclaimer-section__sidebar {
  top: 96px;
  z-index: 10;
}

.disclaimer-section__nav-card {
  background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.disclaimer-section__badge {
  background: rgba(255, 77, 46, 0.12);
  border: 1px solid rgba(255, 77, 46, 0.35);
  color: #FF7A60;
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.disclaimer-section__version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: #64748B;
}

.disclaimer-section__sidebar-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}

.disclaimer-section__nav-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.disclaimer-section__nav-link:hover {
  color: #FF7A60;
  background: rgba(255, 77, 46, 0.06);
  border-color: rgba(255, 77, 46, 0.2);
}

.disclaimer-section__nav-link.active {
  color: #F8FAFC;
  background: rgba(255, 77, 46, 0.12);
  border-color: rgba(255, 77, 46, 0.4);
}

.disclaimer-section__nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #64748B;
  margin-right: 8px;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.disclaimer-section__nav-link.active .disclaimer-section__nav-dot,
.disclaimer-section__nav-link:hover .disclaimer-section__nav-dot {
  background-color: #FF4D2E;
}

.disclaimer-section__sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.disclaimer-section__support-text {
  font-size: 0.8125rem;
  color: #64748B;
  line-height: 1.4;
}

.disclaimer-section__quick-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00F2FE;
  text-decoration: none;
  transition: color 0.15s ease;
}

.disclaimer-section__quick-link:hover {
  color: #FF7A60;
  text-decoration: underline;
}

.disclaimer-section__content-card {
  background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.disclaimer-section__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.disclaimer-section__status-indicator {
  width: 8px;
  height: 8px;
  background-color: #00F2FE;
  border-radius: 50%;
  box-shadow: 0 0 8px #00F2FE;
}

.disclaimer-section__date-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.disclaimer-section__main-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #F8FAFC;
}

.disclaimer-section__lead-text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #94A3B8;
}

.disclaimer-section__section-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #F8FAFC;
}

.disclaimer-section__sub-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #FF7A60;
}

.disclaimer-section__body-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #94A3B8;
}

.disclaimer-section__notice-box {
  background: #12141E;
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 12px;
}

.disclaimer-section__notice-icon {
  color: #00F2FE;
}

.disclaimer-section__notice-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #F8FAFC;
}

.disclaimer-section__list {
  list-style-type: square;
  color: #FF4D2E;
}

.disclaimer-section__list-item {
  color: #94A3B8;
  font-size: 0.95rem;
  line-height: 1.5;
}

.disclaimer-section__inline-link {
  color: #FF7A60;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.disclaimer-section__inline-link:hover {
  color: #00F2FE;
}

.disclaimer-section__btn-primary {
  background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  display: inline-block;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.disclaimer-section__btn-primary:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.disclaimer-section__btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.disclaimer-section__btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 242, 254, 0.4);
  color: #F8FAFC;
}

@media (max-width: 767.98px) {
  .disclaimer-section__main-title {
    font-size: 1.125rem;
    hyphens: auto;
  }
  .disclaimer-section__section-heading {
    font-size: 1rem;
    hyphens: auto;
  }
  .disclaimer-section__sub-heading {
    font-size: 0.875rem;
    hyphens: auto;
  }
  .disclaimer-section__lead-text {
    font-size: 0.9375rem;
  }
  .disclaimer-section__sidebar {
    position: static;
  }
}

.ambient-comment {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.88) 0%, rgba(18, 20, 30, 0.96) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-comment-card:hover {
    border-color: rgba(255, 77, 46, 0.35);
    box-shadow: 0 0 25px rgba(255, 77, 46, 0.12), 0 12px 28px rgba(0, 0, 0, 0.6);
}

.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #FF4D2E 0%, #7928CA 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 77, 46, 0.3);
    flex-shrink: 0;
    user-select: none;
}

.avatar-lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1rem;
}

.avatar-sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.8125rem;
}

.comment-author-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #F8FAFC;
    letter-spacing: -0.01em;
}

.comment-role-badge {
    background: rgba(255, 77, 46, 0.12);
    color: #FF7A60;
    border: 1px solid rgba(255, 77, 46, 0.3);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 4px 10px;
}

.comment-timestamp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: #94A3B8;
}

.dsp-readout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0E1017;
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 6px;
    padding: 4px 8px;
}

.readout-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F2FE;
    box-shadow: 0 0 8px #00F2FE;
}

.readout-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #00F2FE;
}

.comment-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #F8FAFC;
}

.border-top-subtle {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.comment-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #F8FAFC;
    border-color: rgba(0, 242, 254, 0.4);
}

.comment-meta-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748B;
    letter-spacing: 0.05em;
}

.heroicon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.reply-thread-wrapper {
    border-left: 2px solid rgba(255, 77, 46, 0.2);
    padding-left: 18px;
    margin-top: 14px;
}

.thread-line-guide {
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 77, 46, 0.6) 0%, rgba(121, 40, 202, 0.2) 100%);
}

.reply-comment-card {
    background: linear-gradient(180deg, rgba(18, 20, 30, 0.9) 0%, rgba(14, 16, 23, 0.95) 100%);
    border: 1px solid rgba(0, 242, 254, 0.15);
    padding: 18px 20px;
    border-radius: 12px;
}

.reply-comment-card:hover {
    border-color: rgba(0, 242, 254, 0.35);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.08), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.reply-official-badge {
    background: rgba(0, 242, 254, 0.1);
    color: #00F2FE;
    border: 1px solid rgba(0, 242, 254, 0.3);
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 2px 8px;
}

.reply-mention {
    color: #FF7A60;
    font-weight: 600;
    margin-right: 4px;
}

.pulse-amber {
    background-color: #FFB300 !important;
    box-shadow: 0 0 8px #FFB300 !important;
}

.text-amber {
    color: #FFB300 !important;
}


/* ===== PAGE TEMPLATE: plugins ===== */
.site-header-block {
    background-color: #090A0F;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1050;
    width: 100%;
}

.site-header-block .navbar {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #090A0F;
}

.site-header-block .navbar-brand {
    padding: 0;
    margin-right: 1.5rem;
    text-decoration: none;
}

.site-header-block .brand-logo-img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

.site-header-block .brand-title-text {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-header-block .custom-toggler {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #12141E;
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1;
    box-shadow: none;
}

.site-header-block .custom-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.4);
    outline: none;
}

.site-header-block .toggler-icon {
    width: 24px;
    height: 24px;
    color: #F8FAFC;
    display: block;
}

.site-header-block .nav-link-custom {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #94A3B8;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header-block .nav-link-custom:hover,
.site-header-block .nav-link-custom:focus {
    color: #FF7A60;
    background-color: rgba(255, 255, 255, 0.03);
}

.site-header-block .nav-link-custom.active {
    color: #F8FAFC;
    font-weight: 600;
}

.site-header-block .btn-header-cta {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header-block .btn-header-cta:hover,
.site-header-block .btn-header-cta:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 24px rgba(255, 77, 46, 0.55);
}

@media (max-width: 991.98px) {
    .site-header-block .navbar-collapse {
        background-color: #12141E;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-top: 12px;
    }

    .site-header-block .nav-link-custom {
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .site-header-block .btn-header-cta {
        width: 100%;
    }
}

.hero-msli-section {
    background-color: #090A0F;
    min-height: 50vh;
    position: relative;
    display: flex;
    align-items: center;
    color: #F8FAFC;
}

.hero-msli-section .hero-video-wrapper {
    z-index: 1;
    pointer-events: none;
}

.hero-msli-section .hero-bg-video {
    object-fit: cover;
    background-position: center;
    background-size: cover;
    opacity: 0.22;
}

.hero-msli-section .hero-video-overlay {
    background: radial-gradient(circle at 60% 30%, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.1) 40%, rgba(9, 10, 15, 0.95) 85%);
}

.hero-msli-section .container {
    z-index: 2;
}

.hero-msli-section .min-vh-hero {
    min-height: auto;
}

.hero-msli-section .hero-badge {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-msli-section .badge-dot {
    width: 8px;
    height: 8px;
    background-color: #00F2FE;
    border-radius: 50%;
    box-shadow: 0 0 8px #00F2FE;
    flex-shrink: 0;
    margin-right: 8px;
}

.hero-msli-section .hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #F8FAFC;
}

.hero-msli-section .hero-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 650px;
}

.hero-msli-section .text-muted-meta {
    font-size: 0.875rem;
    color: #94A3B8;
}

.hero-msli-section .meta-chip {
    background: rgba(23, 26, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
}

.hero-msli-section .meta-icon {
    width: 16px;
    height: 16px;
    color: #FF7A60;
}

.hero-msli-section .detail-hero-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.94) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.3);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.15), 0 16px 40px rgba(0, 0, 0, 0.6);
}

.hero-msli-section .rack-title-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #F8FAFC;
}

.hero-msli-section .preset-badge {
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.hero-msli-section .text-muted-label {
    font-size: 0.8125rem;
    color: #94A3B8;
}

.hero-msli-section .text-cyan-val {
    font-family: 'JetBrains Mono', monospace;
    color: #00F2FE;
    font-size: 0.875rem;
    font-weight: 700;
}

.hero-msli-section .text-orange-val {
    font-family: 'JetBrains Mono', monospace;
    color: #FFB300;
    font-size: 0.875rem;
    font-weight: 700;
}

.hero-msli-section .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.hero-msli-section .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.hero-msli-section .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .hero-msli-section .hero-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .hero-msli-section .hero-description {
        font-size: 0.9375rem;
    }
}

.universal-detail-wrapper {
    background-color: #090A0F;
    color: #94A3B8;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.universal-detail-wrapper .detail-main-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.universal-detail-wrapper .detail-featured-img {
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.universal-detail-wrapper .image-caption-pill {
    background: rgba(9, 10, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .detail-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #F8FAFC;
}

.universal-detail-wrapper .detail-sub-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .detail-paragraph {
    font-size: 1rem;
    line-height: 1.7;
    color: #94A3B8;
}

.universal-detail-wrapper .quote-callout {
    background: rgba(255, 77, 46, 0.06);
    border-left: 4px solid #FF4D2E;
    color: #F8FAFC;
    font-style: italic;
}

.universal-detail-wrapper .quote-author {
    font-size: 0.8125rem;
    color: #FF7A60;
    font-style: normal;
    font-weight: 600;
}

.universal-detail-wrapper .key-takeaways-list li {
    font-size: 0.9375rem;
    color: #F8FAFC;
}

.universal-detail-wrapper .check-icon {
    width: 18px;
    height: 18px;
    color: #00F2FE;
}

.universal-detail-wrapper .interactive-tabs-container {
    background: #12141E;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.universal-detail-wrapper .detail-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .detail-tab-btn.active,
.universal-detail-wrapper .detail-tab-btn:hover {
    background: #FF4D2E;
    color: #FFFFFF;
    border-color: #FF4D2E;
}

.universal-detail-wrapper .custom-spec-table {
    --mdb-table-bg: transparent;
    --mdb-table-striped-bg: rgba(255, 255, 255, 0.03);
    font-size: 0.875rem;
}

.universal-detail-wrapper .custom-spec-table td {
    border-color: rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
}

.universal-detail-wrapper .spec-name {
    color: #94A3B8;
    width: 45%;
}

.universal-detail-wrapper .spec-val {
    color: #F8FAFC;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .bg-dark-surface {
    background: #0E1017;
}

.universal-detail-wrapper .bg-cyan {
    background-color: #00F2FE;
}

.universal-detail-wrapper .share-title {
    font-size: 0.875rem;
    color: #F8FAFC;
    font-weight: 600;
}

.universal-detail-wrapper .btn-share {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-share:hover {
    background: rgba(255, 77, 46, 0.2);
    color: #FFFFFF;
    border-color: #FF4D2E;
}

.universal-detail-wrapper .sidebar-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .sidebar-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .sidebar-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94A3B8;
}

.universal-detail-wrapper .telemetry-status-box {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.universal-detail-wrapper .recent-post-link {
    color: #F8FAFC;
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.universal-detail-wrapper .recent-post-link:hover {
    color: #FF7A60;
}

.universal-detail-wrapper .post-date-tag {
    font-size: 0.75rem;
}

.universal-detail-wrapper .btn-secondary-custom {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-secondary-custom:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(0, 242, 254, 0.4);
}

.universal-detail-wrapper .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.universal-detail-wrapper .comments-section-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .section-block-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .badge-count {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .ambient-comment {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.universal-detail-wrapper .avatar-initials {
    background: #171A26;
    border: 1px solid rgba(255, 77, 46, 0.4);
    color: #FF7A60;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.universal-detail-wrapper .avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
}

.universal-detail-wrapper .avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
}

.universal-detail-wrapper .comment-author-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .comment-role-badge {
    background: rgba(0, 242, 254, 0.12);
    color: #00F2FE;
    border: 1px solid rgba(0, 242, 254, 0.3);
    font-size: 0.6875rem;
}

.universal-detail-wrapper .reply-official-badge {
    background: rgba(255, 179, 0, 0.12);
    color: #FFB300;
    border: 1px solid rgba(255, 179, 0, 0.3);
    font-size: 0.6875rem;
}

.universal-detail-wrapper .comment-timestamp {
    font-size: 0.75rem;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.universal-detail-wrapper .heroicon {
    width: 14px;
    height: 14px;
}

.universal-detail-wrapper .dsp-readout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #00F2FE;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.universal-detail-wrapper .readout-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F2FE;
}

.universal-detail-wrapper .pulse-amber {
    background-color: #FFB300;
}

.universal-detail-wrapper .text-amber {
    color: #FFB300;
}

.universal-detail-wrapper .comment-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94A3B8;
}

.universal-detail-wrapper .reply-mention {
    color: #FF7A60;
    font-weight: 600;
}

.universal-detail-wrapper .comment-action-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .comment-action-btn:hover,
.universal-detail-wrapper .comment-action-btn.active {
    color: #FF4D2E;
    background: rgba(255, 77, 46, 0.1);
}

.universal-detail-wrapper .comment-meta-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748B;
}

.universal-detail-wrapper .reply-thread-wrapper {
    margin-top: 12px;
}

.universal-detail-wrapper .thread-line-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .comment-form-box {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .form-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .form-label-custom {
    font-size: 0.8125rem;
    color: #94A3B8;
    margin-bottom: 4px;
    font-weight: 500;
}

.universal-detail-wrapper .form-input-custom {
    background: #171A26;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 10px 14px;
}

.universal-detail-wrapper .form-input-custom:focus {
    background: #171A26;
    border-color: #FF4D2E;
    color: #F8FAFC;
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.25);
}

.universal-detail-wrapper .form-input-custom::placeholder {
    color: #64748B;
    opacity: 1;
}

.universal-detail-wrapper .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .border-top-subtle {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .universal-detail-wrapper .detail-section-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .universal-detail-wrapper .detail-sub-title {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .universal-detail-wrapper .section-block-title {
        font-size: 0.875rem;
    }
}

.site-footer-section {
    position: relative;
    background-color: #090a0f;
    color: #94a3b8;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-footer-section .site-footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 250px;
    background: radial-gradient(ellipse at top, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.06) 45%, rgba(9, 10, 15, 0) 80%);
    pointer-events: none;
}

.site-footer-section .site-footer-logo {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 77, 46, 0.4));
}

.site-footer-section .site-footer-brand-name {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.site-footer-section .site-footer-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.site-footer-section .site-footer-status {
    background: rgba(23, 26, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 6px 14px;
}

.site-footer-section .status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00f2fe;
    box-shadow: 0 0 10px #00f2fe;
}

.site-footer-section .status-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.site-footer-section .site-footer-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.site-footer-section .site-footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.site-footer-section .site-footer-link:hover,
.site-footer-section .site-footer-link:focus {
    color: #ff7a60;
    text-decoration: none;
}

.site-footer-section .site-footer-contact-text {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

.site-footer-section .site-footer-icon {
    width: 18px;
    height: 18px;
    color: #ff4d2e;
}

.site-footer-section .site-footer-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.site-footer-section .site-footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.site-footer-section .site-footer-badge {
    background: rgba(255, 77, 46, 0.06);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
}

.site-footer-section .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff4d2e;
}

.site-footer-section .badge-label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.6875rem;
    color: #ff7a60;
}

@media (max-width: 767.98px) {
    .site-footer-section {
        padding-top: 56px;
        padding-bottom: 32px;
    }

    .site-footer-section .site-footer-heading {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .site-footer-section .site-footer-link,
    .site-footer-section .site-footer-desc,
    .site-footer-section .site-footer-contact-text {
        font-size: 0.875rem;
    }
}

/* ===== PAGE TEMPLATE: tutorials ===== */
.site-header-block {
    background-color: #090A0F;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1050;
    width: 100%;
}

.site-header-block .navbar {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #090A0F;
}

.site-header-block .navbar-brand {
    padding: 0;
    margin-right: 1.5rem;
    text-decoration: none;
}

.site-header-block .brand-logo-img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

.site-header-block .brand-title-text {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-header-block .custom-toggler {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #12141E;
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1;
    box-shadow: none;
}

.site-header-block .custom-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.4);
    outline: none;
}

.site-header-block .toggler-icon {
    width: 24px;
    height: 24px;
    color: #F8FAFC;
    display: block;
}

.site-header-block .nav-link-custom {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #94A3B8;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header-block .nav-link-custom:hover,
.site-header-block .nav-link-custom:focus {
    color: #FF7A60;
    background-color: rgba(255, 255, 255, 0.03);
}

.site-header-block .nav-link-custom.active {
    color: #F8FAFC;
    font-weight: 600;
}

.site-header-block .btn-header-cta {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header-block .btn-header-cta:hover,
.site-header-block .btn-header-cta:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 24px rgba(255, 77, 46, 0.55);
}

@media (max-width: 991.98px) {
    .site-header-block .navbar-collapse {
        background-color: #12141E;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-top: 12px;
    }

    .site-header-block .nav-link-custom {
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .site-header-block .btn-header-cta {
        width: 100%;
    }
}

.hero-msli-section {
    background-color: #090A0F;
    min-height: 50vh;
    position: relative;
    display: flex;
    align-items: center;
    color: #F8FAFC;
}

.hero-msli-section .hero-video-wrapper {
    z-index: 1;
    pointer-events: none;
}

.hero-msli-section .hero-bg-video {
    object-fit: cover;
    background-position: center;
    background-size: cover;
    opacity: 0.22;
}

.hero-msli-section .hero-video-overlay {
    background: radial-gradient(circle at 60% 30%, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.1) 40%, rgba(9, 10, 15, 0.95) 85%);
}

.hero-msli-section .container {
    z-index: 2;
}

.hero-msli-section .min-vh-hero {
    min-height: auto;
}

.hero-msli-section .hero-badge {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-msli-section .badge-dot {
    width: 8px;
    height: 8px;
    background-color: #00F2FE;
    border-radius: 50%;
    box-shadow: 0 0 8px #00F2FE;
    flex-shrink: 0;
    margin-right: 8px;
}

.hero-msli-section .hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #F8FAFC;
}

.hero-msli-section .hero-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 650px;
}

.hero-msli-section .text-muted-meta {
    font-size: 0.875rem;
    color: #94A3B8;
}

.hero-msli-section .meta-chip {
    background: rgba(23, 26, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
}

.hero-msli-section .meta-icon {
    width: 16px;
    height: 16px;
    color: #FF7A60;
}

.hero-msli-section .detail-hero-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.94) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.3);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.15), 0 16px 40px rgba(0, 0, 0, 0.6);
}

.hero-msli-section .rack-title-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #F8FAFC;
}

.hero-msli-section .preset-badge {
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.hero-msli-section .text-muted-label {
    font-size: 0.8125rem;
    color: #94A3B8;
}

.hero-msli-section .text-cyan-val {
    font-family: 'JetBrains Mono', monospace;
    color: #00F2FE;
    font-size: 0.875rem;
    font-weight: 700;
}

.hero-msli-section .text-orange-val {
    font-family: 'JetBrains Mono', monospace;
    color: #FFB300;
    font-size: 0.875rem;
    font-weight: 700;
}

.hero-msli-section .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.hero-msli-section .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.hero-msli-section .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .hero-msli-section .hero-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .hero-msli-section .hero-description {
        font-size: 0.9375rem;
    }
}

.universal-detail-wrapper {
    background-color: #090A0F;
    color: #94A3B8;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.universal-detail-wrapper .detail-main-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.universal-detail-wrapper .detail-featured-img {
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.universal-detail-wrapper .image-caption-pill {
    background: rgba(9, 10, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .detail-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #F8FAFC;
}

.universal-detail-wrapper .detail-sub-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .detail-paragraph {
    font-size: 1rem;
    line-height: 1.7;
    color: #94A3B8;
}

.universal-detail-wrapper .quote-callout {
    background: rgba(255, 77, 46, 0.06);
    border-left: 4px solid #FF4D2E;
    color: #F8FAFC;
    font-style: italic;
}

.universal-detail-wrapper .quote-author {
    font-size: 0.8125rem;
    color: #FF7A60;
    font-style: normal;
    font-weight: 600;
}

.universal-detail-wrapper .key-takeaways-list li {
    font-size: 0.9375rem;
    color: #F8FAFC;
}

.universal-detail-wrapper .check-icon {
    width: 18px;
    height: 18px;
    color: #00F2FE;
}

.universal-detail-wrapper .interactive-tabs-container {
    background: #12141E;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.universal-detail-wrapper .detail-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .detail-tab-btn.active,
.universal-detail-wrapper .detail-tab-btn:hover {
    background: #FF4D2E;
    color: #FFFFFF;
    border-color: #FF4D2E;
}

.universal-detail-wrapper .custom-spec-table {
    --mdb-table-bg: transparent;
    --mdb-table-striped-bg: rgba(255, 255, 255, 0.03);
    font-size: 0.875rem;
}

.universal-detail-wrapper .custom-spec-table td {
    border-color: rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
}

.universal-detail-wrapper .spec-name {
    color: #94A3B8;
    width: 45%;
}

.universal-detail-wrapper .spec-val {
    color: #F8FAFC;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .bg-dark-surface {
    background: #0E1017;
}

.universal-detail-wrapper .bg-cyan {
    background-color: #00F2FE;
}

.universal-detail-wrapper .share-title {
    font-size: 0.875rem;
    color: #F8FAFC;
    font-weight: 600;
}

.universal-detail-wrapper .btn-share {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-share:hover {
    background: rgba(255, 77, 46, 0.2);
    color: #FFFFFF;
    border-color: #FF4D2E;
}

.universal-detail-wrapper .sidebar-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .sidebar-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .sidebar-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94A3B8;
}

.universal-detail-wrapper .telemetry-status-box {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.universal-detail-wrapper .recent-post-link {
    color: #F8FAFC;
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.universal-detail-wrapper .recent-post-link:hover {
    color: #FF7A60;
}

.universal-detail-wrapper .post-date-tag {
    font-size: 0.75rem;
}

.universal-detail-wrapper .btn-secondary-custom {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-secondary-custom:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(0, 242, 254, 0.4);
}

.universal-detail-wrapper .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.universal-detail-wrapper .comments-section-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .section-block-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .badge-count {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .ambient-comment {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.universal-detail-wrapper .avatar-initials {
    background: #171A26;
    border: 1px solid rgba(255, 77, 46, 0.4);
    color: #FF7A60;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.universal-detail-wrapper .avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
}

.universal-detail-wrapper .avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
}

.universal-detail-wrapper .comment-author-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .comment-role-badge {
    background: rgba(0, 242, 254, 0.12);
    color: #00F2FE;
    border: 1px solid rgba(0, 242, 254, 0.3);
    font-size: 0.6875rem;
}

.universal-detail-wrapper .reply-official-badge {
    background: rgba(255, 179, 0, 0.12);
    color: #FFB300;
    border: 1px solid rgba(255, 179, 0, 0.3);
    font-size: 0.6875rem;
}

.universal-detail-wrapper .comment-timestamp {
    font-size: 0.75rem;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.universal-detail-wrapper .heroicon {
    width: 14px;
    height: 14px;
}

.universal-detail-wrapper .dsp-readout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #00F2FE;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.universal-detail-wrapper .readout-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F2FE;
}

.universal-detail-wrapper .pulse-amber {
    background-color: #FFB300;
}

.universal-detail-wrapper .text-amber {
    color: #FFB300;
}

.universal-detail-wrapper .comment-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94A3B8;
}

.universal-detail-wrapper .reply-mention {
    color: #FF7A60;
    font-weight: 600;
}

.universal-detail-wrapper .comment-action-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .comment-action-btn:hover,
.universal-detail-wrapper .comment-action-btn.active {
    color: #FF4D2E;
    background: rgba(255, 77, 46, 0.1);
}

.universal-detail-wrapper .comment-meta-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748B;
}

.universal-detail-wrapper .reply-thread-wrapper {
    margin-top: 12px;
}

.universal-detail-wrapper .thread-line-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .comment-form-box {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .form-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .form-label-custom {
    font-size: 0.8125rem;
    color: #94A3B8;
    margin-bottom: 4px;
    font-weight: 500;
}

.universal-detail-wrapper .form-input-custom {
    background: #171A26;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 10px 14px;
}

.universal-detail-wrapper .form-input-custom:focus {
    background: #171A26;
    border-color: #FF4D2E;
    color: #F8FAFC;
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.25);
}

.universal-detail-wrapper .form-input-custom::placeholder {
    color: #64748B;
    opacity: 1;
}

.universal-detail-wrapper .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .border-top-subtle {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .universal-detail-wrapper .detail-section-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .universal-detail-wrapper .detail-sub-title {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .universal-detail-wrapper .section-block-title {
        font-size: 0.875rem;
    }
}

.site-footer-section {
    position: relative;
    background-color: #090a0f;
    color: #94a3b8;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-footer-section .site-footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 250px;
    background: radial-gradient(ellipse at top, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.06) 45%, rgba(9, 10, 15, 0) 80%);
    pointer-events: none;
}

.site-footer-section .site-footer-logo {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 77, 46, 0.4));
}

.site-footer-section .site-footer-brand-name {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.site-footer-section .site-footer-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.site-footer-section .site-footer-status {
    background: rgba(23, 26, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 6px 14px;
}

.site-footer-section .status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00f2fe;
    box-shadow: 0 0 10px #00f2fe;
}

.site-footer-section .status-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.site-footer-section .site-footer-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.site-footer-section .site-footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.site-footer-section .site-footer-link:hover,
.site-footer-section .site-footer-link:focus {
    color: #ff7a60;
    text-decoration: none;
}

.site-footer-section .site-footer-contact-text {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

.site-footer-section .site-footer-icon {
    width: 18px;
    height: 18px;
    color: #ff4d2e;
}

.site-footer-section .site-footer-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.site-footer-section .site-footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.site-footer-section .site-footer-badge {
    background: rgba(255, 77, 46, 0.06);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
}

.site-footer-section .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff4d2e;
}

.site-footer-section .badge-label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.6875rem;
    color: #ff7a60;
}

@media (max-width: 767.98px) {
    .site-footer-section {
        padding-top: 56px;
        padding-bottom: 32px;
    }

    .site-footer-section .site-footer-heading {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .site-footer-section .site-footer-link,
    .site-footer-section .site-footer-desc,
    .site-footer-section .site-footer-contact-text {
        font-size: 0.875rem;
    }
}

/* ===== PAGE TEMPLATE: reviews ===== */
.site-header-block {
    background-color: #090A0F;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1050;
    width: 100%;
}

.site-header-block .navbar {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #090A0F;
}

.site-header-block .navbar-brand {
    padding: 0;
    margin-right: 1.5rem;
    text-decoration: none;
}

.site-header-block .brand-logo-img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    display: block;
}

.site-header-block .brand-title-text {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.site-header-block .custom-toggler {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #12141E;
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1;
    box-shadow: none;
}

.site-header-block .custom-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.4);
    outline: none;
}

.site-header-block .toggler-icon {
    width: 24px;
    height: 24px;
    color: #F8FAFC;
    display: block;
}

.site-header-block .nav-link-custom {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #94A3B8;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header-block .nav-link-custom:hover,
.site-header-block .nav-link-custom:focus {
    color: #FF7A60;
    background-color: rgba(255, 255, 255, 0.03);
}

.site-header-block .nav-link-custom.active {
    color: #F8FAFC;
    font-weight: 600;
}

.site-header-block .btn-header-cta {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 77, 46, 0.35);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header-block .btn-header-cta:hover,
.site-header-block .btn-header-cta:focus {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 24px rgba(255, 77, 46, 0.55);
}

@media (max-width: 991.98px) {
    .site-header-block .navbar-collapse {
        background-color: #12141E;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-top: 12px;
    }

    .site-header-block .nav-link-custom {
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .site-header-block .btn-header-cta {
        width: 100%;
    }
}

.hero-msli-section {
    background-color: #090A0F;
    min-height: 50vh;
    position: relative;
    display: flex;
    align-items: center;
    color: #F8FAFC;
}

.hero-msli-section .hero-video-wrapper {
    z-index: 1;
    pointer-events: none;
}

.hero-msli-section .hero-bg-video {
    object-fit: cover;
    background-position: center;
    background-size: cover;
    opacity: 0.22;
}

.hero-msli-section .hero-video-overlay {
    background: radial-gradient(circle at 60% 30%, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.1) 40%, rgba(9, 10, 15, 0.95) 85%);
}

.hero-msli-section .container {
    z-index: 2;
}

.hero-msli-section .min-vh-hero {
    min-height: auto;
}

.hero-msli-section .hero-badge {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-msli-section .badge-dot {
    width: 8px;
    height: 8px;
    background-color: #00F2FE;
    border-radius: 50%;
    box-shadow: 0 0 8px #00F2FE;
    flex-shrink: 0;
    margin-right: 8px;
}

.hero-msli-section .hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #F8FAFC;
}

.hero-msli-section .hero-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 650px;
}

.hero-msli-section .text-muted-meta {
    font-size: 0.875rem;
    color: #94A3B8;
}

.hero-msli-section .meta-chip {
    background: rgba(23, 26, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
}

.hero-msli-section .meta-icon {
    width: 16px;
    height: 16px;
    color: #FF7A60;
}

.hero-msli-section .detail-hero-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.94) 0%, rgba(18, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 77, 46, 0.3);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.15), 0 16px 40px rgba(0, 0, 0, 0.6);
}

.hero-msli-section .rack-title-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #F8FAFC;
}

.hero-msli-section .preset-badge {
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.hero-msli-section .text-muted-label {
    font-size: 0.8125rem;
    color: #94A3B8;
}

.hero-msli-section .text-cyan-val {
    font-family: 'JetBrains Mono', monospace;
    color: #00F2FE;
    font-size: 0.875rem;
    font-weight: 700;
}

.hero-msli-section .text-orange-val {
    font-family: 'JetBrains Mono', monospace;
    color: #FFB300;
    font-size: 0.875rem;
    font-weight: 700;
}

.hero-msli-section .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.hero-msli-section .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.hero-msli-section .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .hero-msli-section .hero-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .hero-msli-section .hero-description {
        font-size: 0.9375rem;
    }
}

.universal-detail-wrapper {
    background-color: #090A0F;
    color: #94A3B8;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.universal-detail-wrapper .detail-main-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.universal-detail-wrapper .detail-featured-img {
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.universal-detail-wrapper .image-caption-pill {
    background: rgba(9, 10, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    color: #94A3B8;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .detail-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #F8FAFC;
}

.universal-detail-wrapper .detail-sub-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .detail-paragraph {
    font-size: 1rem;
    line-height: 1.7;
    color: #94A3B8;
}

.universal-detail-wrapper .quote-callout {
    background: rgba(255, 77, 46, 0.06);
    border-left: 4px solid #FF4D2E;
    color: #F8FAFC;
    font-style: italic;
}

.universal-detail-wrapper .quote-author {
    font-size: 0.8125rem;
    color: #FF7A60;
    font-style: normal;
    font-weight: 600;
}

.universal-detail-wrapper .key-takeaways-list li {
    font-size: 0.9375rem;
    color: #F8FAFC;
}

.universal-detail-wrapper .check-icon {
    width: 18px;
    height: 18px;
    color: #00F2FE;
}

.universal-detail-wrapper .interactive-tabs-container {
    background: #12141E;
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.universal-detail-wrapper .detail-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .detail-tab-btn.active,
.universal-detail-wrapper .detail-tab-btn:hover {
    background: #FF4D2E;
    color: #FFFFFF;
    border-color: #FF4D2E;
}

.universal-detail-wrapper .custom-spec-table {
    --mdb-table-bg: transparent;
    --mdb-table-striped-bg: rgba(255, 255, 255, 0.03);
    font-size: 0.875rem;
}

.universal-detail-wrapper .custom-spec-table td {
    border-color: rgba(255, 255, 255, 0.06);
    padding: 10px 14px;
}

.universal-detail-wrapper .spec-name {
    color: #94A3B8;
    width: 45%;
}

.universal-detail-wrapper .spec-val {
    color: #F8FAFC;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .bg-dark-surface {
    background: #0E1017;
}

.universal-detail-wrapper .bg-cyan {
    background-color: #00F2FE;
}

.universal-detail-wrapper .share-title {
    font-size: 0.875rem;
    color: #F8FAFC;
    font-weight: 600;
}

.universal-detail-wrapper .btn-share {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-share:hover {
    background: rgba(255, 77, 46, 0.2);
    color: #FFFFFF;
    border-color: #FF4D2E;
}

.universal-detail-wrapper .sidebar-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .sidebar-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .sidebar-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94A3B8;
}

.universal-detail-wrapper .telemetry-status-box {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.universal-detail-wrapper .recent-post-link {
    color: #F8FAFC;
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.universal-detail-wrapper .recent-post-link:hover {
    color: #FF7A60;
}

.universal-detail-wrapper .post-date-tag {
    font-size: 0.75rem;
}

.universal-detail-wrapper .btn-secondary-custom {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-secondary-custom:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(0, 242, 254, 0.4);
}

.universal-detail-wrapper .btn-primary-custom {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.universal-detail-wrapper .btn-primary-custom:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.universal-detail-wrapper .comments-section-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .section-block-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .badge-count {
    background: rgba(255, 77, 46, 0.12);
    border: 1px solid rgba(255, 77, 46, 0.35);
    color: #FF7A60;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
}

.universal-detail-wrapper .ambient-comment {
    background: #12141E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.universal-detail-wrapper .avatar-initials {
    background: #171A26;
    border: 1px solid rgba(255, 77, 46, 0.4);
    color: #FF7A60;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.universal-detail-wrapper .avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
}

.universal-detail-wrapper .avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
}

.universal-detail-wrapper .comment-author-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .comment-role-badge {
    background: rgba(0, 242, 254, 0.12);
    color: #00F2FE;
    border: 1px solid rgba(0, 242, 254, 0.3);
    font-size: 0.6875rem;
}

.universal-detail-wrapper .reply-official-badge {
    background: rgba(255, 179, 0, 0.12);
    color: #FFB300;
    border: 1px solid rgba(255, 179, 0, 0.3);
    font-size: 0.6875rem;
}

.universal-detail-wrapper .comment-timestamp {
    font-size: 0.75rem;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.universal-detail-wrapper .heroicon {
    width: 14px;
    height: 14px;
}

.universal-detail-wrapper .dsp-readout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #00F2FE;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.universal-detail-wrapper .readout-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F2FE;
}

.universal-detail-wrapper .pulse-amber {
    background-color: #FFB300;
}

.universal-detail-wrapper .text-amber {
    color: #FFB300;
}

.universal-detail-wrapper .comment-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94A3B8;
}

.universal-detail-wrapper .reply-mention {
    color: #FF7A60;
    font-weight: 600;
}

.universal-detail-wrapper .comment-action-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.universal-detail-wrapper .comment-action-btn:hover,
.universal-detail-wrapper .comment-action-btn.active {
    color: #FF4D2E;
    background: rgba(255, 77, 46, 0.1);
}

.universal-detail-wrapper .comment-meta-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748B;
}

.universal-detail-wrapper .reply-thread-wrapper {
    margin-top: 12px;
}

.universal-detail-wrapper .thread-line-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .comment-form-box {
    background: #0E1017;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .form-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #F8FAFC;
}

.universal-detail-wrapper .form-label-custom {
    font-size: 0.8125rem;
    color: #94A3B8;
    margin-bottom: 4px;
    font-weight: 500;
}

.universal-detail-wrapper .form-input-custom {
    background: #171A26;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #F8FAFC;
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 10px 14px;
}

.universal-detail-wrapper .form-input-custom:focus {
    background: #171A26;
    border-color: #FF4D2E;
    color: #F8FAFC;
    box-shadow: 0 0 0 2px rgba(255, 77, 46, 0.25);
}

.universal-detail-wrapper .form-input-custom::placeholder {
    color: #64748B;
    opacity: 1;
}

.universal-detail-wrapper .border-bottom-subtle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.universal-detail-wrapper .border-top-subtle {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .universal-detail-wrapper .detail-section-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .universal-detail-wrapper .detail-sub-title {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .universal-detail-wrapper .section-block-title {
        font-size: 0.875rem;
    }
}

.site-footer-section {
    position: relative;
    background-color: #090a0f;
    color: #94a3b8;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-footer-section .site-footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 250px;
    background: radial-gradient(ellipse at top, rgba(255, 77, 46, 0.12) 0%, rgba(121, 40, 202, 0.06) 45%, rgba(9, 10, 15, 0) 80%);
    pointer-events: none;
}

.site-footer-section .site-footer-logo {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 77, 46, 0.4));
}

.site-footer-section .site-footer-brand-name {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.site-footer-section .site-footer-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.site-footer-section .site-footer-status {
    background: rgba(23, 26, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 6px 14px;
}

.site-footer-section .status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00f2fe;
    box-shadow: 0 0 10px #00f2fe;
}

.site-footer-section .status-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.site-footer-section .site-footer-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.site-footer-section .site-footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.site-footer-section .site-footer-link:hover,
.site-footer-section .site-footer-link:focus {
    color: #ff7a60;
    text-decoration: none;
}

.site-footer-section .site-footer-contact-text {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

.site-footer-section .site-footer-icon {
    width: 18px;
    height: 18px;
    color: #ff4d2e;
}

.site-footer-section .site-footer-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.site-footer-section .site-footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.site-footer-section .site-footer-badge {
    background: rgba(255, 77, 46, 0.06);
    border: 1px solid rgba(255, 77, 46, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
}

.site-footer-section .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff4d2e;
}

.site-footer-section .badge-label {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.6875rem;
    color: #ff7a60;
}

@media (max-width: 767.98px) {
    .site-footer-section {
        padding-top: 56px;
        padding-bottom: 32px;
    }

    .site-footer-section .site-footer-heading {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .site-footer-section .site-footer-link,
    .site-footer-section .site-footer-desc,
    .site-footer-section .site-footer-contact-text {
        font-size: 0.875rem;
    }
}
/* === Share icons (Task 9) === */
.universal-detail-wrapper .btn-share .share-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
}

.universal-detail-wrapper .btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    line-height: 1;
}

.universal-detail-wrapper .btn-share:hover .share-icon-svg {
    color: #FFFFFF;
}

/* === Card image links (Task 8) === */
.card-img-link {
    display: block;
    text-decoration: none;
    line-height: 0;
}

/* === Tutorials tab variant (Task 11) === */
.universal-detail-wrapper .interactive-tabs-container--tutorial {
    background: #0A1A1E;
    border: 1px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.08);
}

.universal-detail-wrapper .interactive-tabs-container--tutorial .detail-tab-btn {
    background: transparent;
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: #7DD3FC;
    border-radius: 20px;
    padding: 7px 18px;
}

.universal-detail-wrapper .interactive-tabs-container--tutorial .detail-tab-btn:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #E0F7FA;
    border-color: rgba(0, 229, 255, 0.5);
}

.universal-detail-wrapper .interactive-tabs-container--tutorial .detail-tab-btn.active {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 100%);
    color: #0A1A1E;
    border-color: #00E5FF;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    font-weight: 700;
}

/* ===== Task 6: Unify policy pages to match /terms/ style ===== */

/* --- Privacy page: match terms styles --- */
.privacy-content-section .privacy-section-heading,
.privacy-content-section .privacy-section-heading.h2,
.privacy-content-section .privacy-section-heading.h3 {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.3;
}

.privacy-content-section .privacy-body-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94a3b8;
}

.privacy-content-section .privacy-list {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.privacy-content-section .privacy-list li {
    margin-bottom: 6px;
    color: #94a3b8;
}

.privacy-content-section .privacy-section-indicator {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ff4d2e;
    background: rgba(255, 77, 46, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 77, 46, 0.25);
    text-transform: none;
    letter-spacing: 0;
    display: inline-block;
}

.privacy-content-section .privacy-sidebar-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc;
}

.privacy-content-section .privacy-nav-link.active {
    background: rgba(255, 77, 46, 0.12);
    color: #ffffff;
    border-color: #ff4d2e;
    font-weight: 600;
}

.privacy-content-section .privacy-nav-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #ff4d2e;
}

/* --- Disclaimer page: match terms styles --- */
.disclaimer-section__section-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.3;
}

.disclaimer-section__sub-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.disclaimer-section__body-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94a3b8;
}

.disclaimer-section__lead-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #94a3b8;
}

.disclaimer-section__list {
    list-style-type: disc;
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.disclaimer-section__list-item {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 6px;
}

.disclaimer-section__main-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

.disclaimer-section__sidebar-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc;
}

.disclaimer-section__nav-link.active {
    color: #ffffff;
    background: rgba(255, 77, 46, 0.12);
    border-color: #ff4d2e;
    font-weight: 600;
}

.disclaimer-section__nav-dot {
    background-color: #64748b;
}

.disclaimer-section__nav-link.active .disclaimer-section__nav-dot,
.disclaimer-section__nav-link:hover .disclaimer-section__nav-dot {
    background-color: #ff4d2e;
}

/* Ensure content containers are centered with max-width */
.privacy-content-section .container,
.disclaimer-section .container,
.msli-terms-page .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 767.98px) {
    .privacy-content-section .privacy-section-heading,
    .privacy-content-section .privacy-section-heading.h2,
    .privacy-content-section .privacy-section-heading.h3,
    .disclaimer-section__section-heading {
        font-size: 1rem;
    }
    .disclaimer-section__sub-heading {
        font-size: 0.875rem;
    }
    .disclaimer-section__main-title {
        font-size: 1.125rem;
    }
}

/* === Fix badge-dot overlapping text in hero === */
.hero-msli-section .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
}

/* === Contact page styles === */
.msli-contact-section .msli-contact-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.msli-contact-section .msli-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.msli-contact-section .msli-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #FF4D2E;
}

.msli-contact-section .msli-contact-subtitle {
    font-size: 0.95rem;
}

.msli-contact-section .msli-form-label {
    font-size: 0.875rem;
}

.msli-contact-section .msli-form-input {
    background-color: #0E1017 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #F8FAFC !important;
    border-radius: 8px;
    font-size: 0.9375rem;
    padding: 12px 16px;
}

.msli-contact-section .msli-form-input::placeholder {
    color: #64748B !important;
    opacity: 1;
}

.msli-contact-section .msli-form-input:focus {
    background-color: #0E1017 !important;
    border-color: rgba(0, 242, 254, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
    color: #F8FAFC !important;
}

.msli-contact-section .msli-textarea {
    resize: vertical;
    min-height: 110px;
}

.msli-contact-section .msli-submit-btn {
    background: linear-gradient(135deg, #FF4D2E 0%, #FF3366 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 0 20px rgba(255, 77, 46, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.msli-contact-section .msli-submit-btn:hover {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 77, 46, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Contact info sidebar */
.msli-contact-info-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.msli-contact-info-title {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #F8FAFC;
}

.msli-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.msli-contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF4D2E;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msli-contact-info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    font-weight: 600;
}

.msli-contact-info-value {
    font-size: 0.9375rem;
    color: #F8FAFC;
    line-height: 1.5;
}

.msli-contact-info-value a {
    color: #F8FAFC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.msli-contact-info-value a:hover {
    color: #FF7A60;
}

/* === About Program section (main page) === */
.msli-about-program-section {
    position: relative;
    background-color: #090A0F;
}

.msli-about-program-section .msli-about-program-card {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.9) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.msli-about-program-section .msli-about-program-badge {
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF7A60;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
}

.msli-about-program-section .msli-about-program-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #F8FAFC;
}

.msli-about-program-section .msli-about-program-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #94A3B8;
}

.msli-about-program-section .msli-about-program-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94A3B8;
    margin-bottom: 1rem;
}

.msli-about-program-section .msli-about-program-stat {
    background: linear-gradient(180deg, rgba(23, 26, 38, 0.85) 0%, rgba(18, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.msli-about-program-section .msli-about-program-stat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    color: #FF7A60;
    font-weight: 700;
}

.msli-about-program-section .msli-about-program-stat-label {
    font-size: 0.85rem;
    color: #94A3B8;
}

.msli-about-program-section .msli-about-program-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 77, 46, 0.1);
    border: 1px solid rgba(255, 77, 46, 0.3);
    color: #FF4D2E;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msli-about-program-section .msli-about-program-feature-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #F8FAFC;
}

.msli-about-program-section .msli-about-program-feature-desc {
    font-size: 0.875rem;
    color: #94A3B8;
    line-height: 1.5;
}

/* === Fix category-badge-dot overlapping text === */
.category-pill-badge {
    gap: 0.5rem;
}
.category-pill-badge .category-badge-dot {
    flex-shrink: 0;
}

/* === FINAL FIX: badge-dot overlapping text === */
.hero-msli-section .badge-dot,
.category-pill-badge .category-badge-dot {
    box-shadow: none !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
}
.hero-msli-section .hero-badge > span:last-child,
.category-pill-badge > span:last-child {
    padding-left: 0 !important;
}

/* === Reviews tab variant (purple) === */
.universal-detail-wrapper .interactive-tabs-container--review {
    background: #1A0A1E;
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.08);
}

.universal-detail-wrapper .interactive-tabs-container--review .detail-tab-btn {
    background: transparent;
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #C4B5FD;
    border-radius: 20px;
    padding: 7px 18px;
}

.universal-detail-wrapper .interactive-tabs-container--review .detail-tab-btn:hover {
    background: rgba(168, 85, 247, 0.1);
    color: #EDE9FE;
    border-color: rgba(168, 85, 247, 0.5);
}

.universal-detail-wrapper .interactive-tabs-container--review .detail-tab-btn.active {
    background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
    color: #FFFFFF;
    border-color: #A855F7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    font-weight: 700;
}

/* === Mobile menu fix === */
@media (max-width: 991.98px) {
    .site-header-block .navbar-collapse {
        display: none;
    }
    .site-header-block .navbar-collapse.show {
        display: block;
    }
    .site-header-block .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}