:root {
    --public-bg: #080216;
    --public-surface: #11081f;
    --public-surface-raised: #170d27;
    --public-border: rgba(206, 159, 255, 0.2);
    --public-border-strong: rgba(206, 159, 255, 0.38);
    --public-text: #f5f0fb;
    --public-muted: #c4b8cd;
    --public-accent: #ca62ff;
    --public-action: #8f3bb6;
}

html,
body {
    background: var(--public-bg) !important;
    color: var(--public-text) !important;
}


body,
button,
input,
select,
textarea {
    font-family: Inter, Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.navbar {
    min-height: 64px;
    border-bottom: 1px solid var(--public-border) !important;
    background: #0b0417 !important;
    box-shadow: none !important;
}

.navbar-brand,
.navbar-brand:hover {
    color: var(--public-text) !important;
}

.brand-mark {
    display: inline-flex;
    width: 40px;
    height: 37px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--public-accent);
    border-radius: 8px;
    background: var(--public-surface-raised) !important;
    color: var(--public-accent) !important;
    font-size: 13px !important;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.brand-mark::before {
    content: "HL";
}

.navbar-brand span:not(.brand-mark) {
    margin-left: 10px;
    background: none !important;
    background-image: none !important;
    color: var(--public-text) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

.nav-link {
    color: var(--public-muted) !important;
    font-weight: 650;
}

.nav-link:hover,
.nav-link:focus-visible,
.breadcrumb a,
main a:not([class]) {
    color: var(--public-accent) !important;
}

main {
    width: min(1140px, calc(100% - 32px)) !important;
    margin-inline: auto !important;
    padding-top: 92px !important;
}

main section {
    background: transparent !important;
    background-image: none !important;
}

main section + section,
main section + div,
main div + section {
    border-top-color: var(--public-border) !important;
}

h1,
h2,
h3,
h4,
.section-name,
.text-gradient {
    background: none !important;
    background-image: none !important;
    color: var(--public-text) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

h2 {
    letter-spacing: -0.02em;
}

p,
.text-muted,
.feature-content p,
.feature-content li,
.fcx-intro,
.fcx-hint {
    color: var(--public-muted) !important;
}

.hub-hero-glow {
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.hub-controls,
.hub-table,
.srv-hero,
.sidebar-card,
.related-card,
.stat-badge,
.dl-stat,
.dl-step,
.dl-feature,
.dl-req,
.card,
.news-item,
.accordion-item,
.hero {
    border: 1px solid var(--public-border) !important;
    background: var(--public-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.hub-controls {
    border-radius: 10px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hub-row,
.fcx-item,
.sidebar-link,
.accordion-button {
    background: transparent !important;
    background-image: none !important;
}

.hub-row:hover,
.fcx-item:hover,
.sidebar-link:hover,
.sidebar-link.active,
.accordion-button:not(.collapsed) {
    background: var(--public-surface-raised) !important;
}

.hub-ico,
.fcx-addon {
    background: var(--public-surface-raised) !important;
    background-image: none !important;
}

.hub-chip,
.hub-clear,
.srv-hero-cta,
.btn,
.btn-primary,
.btn-join,
.cta-btn,
.dl-btn {
    border: 1px solid var(--public-border-strong) !important;
    border-radius: 8px !important;
    background: var(--public-action) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.hub-chip:not(.is-active),
.hub-clear {
    background: var(--public-surface-raised) !important;
    color: var(--public-text) !important;
}

.hub-chip:hover,
.hub-clear:hover,
.srv-hero-cta:hover,
.btn:hover,
.btn-primary:hover,
.btn-join:hover,
.cta-btn:hover,
.dl-btn:hover {
    border-color: var(--public-accent) !important;
    background: #a24ccc !important;
    color: #fff !important;
    opacity: 1 !important;
}

.hub-eyebrow,
.fcx-cat,
.sidebar-card__title,
.stat-badge .val,
.dl-stat .val {
    color: var(--public-accent) !important;
}

.breadcrumb {
    color: var(--public-muted) !important;
}

.dropdown-menu {
    border: 1px solid var(--public-border) !important;
    background: var(--public-surface) !important;
}

.dropdown-item {
    color: var(--public-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--public-surface-raised) !important;
}

.feature-hero,
.dl-hero,
.hub-hero {
    padding-top: 30px !important;
    padding-bottom: 38px !important;
    text-align: left !important;
}

.feature-hero .subtitle,
.dl-hero .subtitle {
    margin-left: 0 !important;
    text-align: left !important;
}

.feature-hero .stats-row,
.dl-stats {
    justify-content: flex-start !important;
}

.cta-section {
    border-top: 1px solid var(--public-border) !important;
}

.site-footer {
    margin-top: 56px;
}

.dl-feature:last-child:nth-child(3n + 1) {
    grid-column: 2;
}

@media (max-width: 991px) {
    .navbar-collapse {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid var(--public-border);
        border-radius: 10px;
        background: var(--public-surface);
    }
}

@media (max-width: 767px) {
    main {
        width: min(100% - 24px, 1140px) !important;
        padding-top: 82px !important;
    }

    .feature-hero,
    .dl-hero,
    .hub-hero {
        padding-top: 18px !important;
        padding-bottom: 28px !important;
    }

    .dl-feature:last-child:nth-child(3n + 1) {
        grid-column: auto;
    }
}

/* Preserve the original HLBot background texture across all public pages. */
html {
    background-color: #060112 !important;
}

body,
main {
    background-color: transparent !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("https://hlbot.b-cdn.net/landing/bg-sub.webp") center / cover no-repeat !important;
    opacity: 0.19 !important;
}