:root {
    --main-color: #FCBF49;
    --main-rgb: 252,191,73;
    --main-a12: rgba(252,191,73, 0.12);
    --main-a20: rgba(252,191,73, 0.2);
    --main-a30: rgba(252,191,73, 0.3);
    --main-a35: rgba(252,191,73, 0.35);
    --accent-light: rgb(253,218,149);
    --accent-mid: rgb(253,205,113);
    --accent-a04: rgba(253,218,149, 0.04);
    --accent-a08: rgba(253,218,149, 0.08);
    --accent-a35: rgba(253,218,149, 0.35);
    --accent-a40: rgba(253,218,149, 0.4);
    --accent-a60: rgba(253,218,149, 0.6);
    --accent-a90: rgba(253,218,149, 0.9);

    /* ── BrickX design tokens (harmonious scale — dark UI) ── */
    --bx-radius-xs: 10px;
    --bx-radius-sm: 12px;
    --bx-radius-md: 14px;
    --bx-radius-lg: 16px;
    --bx-radius-xl: 18px;
    --bx-radius-2xl: 20px;
    --bx-radius-pill: 999px;
    --bx-blur: 14px;
    --bx-transition: 0.2s ease;
    --bx-transition-fast: 0.15s ease;
    --bx-surface-deep: rgba(13, 27, 42, 0.99);
    --bx-surface-dropdown: linear-gradient(160deg, rgba(18, 32, 48, 0.98) 0%, rgba(13, 27, 42, 0.99) 100%);
    --bx-surface-glass: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    --bx-surface-glass-soft: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --bx-surface-input: rgba(255, 255, 255, 0.06);
    --bx-surface-input-focus: rgba(255, 255, 255, 0.09);
    --bx-border-strong: rgba(255, 255, 255, 0.14);
    --bx-border-default: rgba(255, 255, 255, 0.12);
    --bx-border-muted: rgba(255, 255, 255, 0.1);
    --bx-border-faint: rgba(255, 255, 255, 0.08);
    --bx-border-hairline: rgba(255, 255, 255, 0.06);
    --bx-text-on-dark: #ffffff;
    --bx-text-body: rgba(241, 245, 249, 0.92);
    --bx-text-muted: rgba(226, 232, 240, 0.75);
    --bx-text-subtle: rgba(226, 232, 240, 0.65);
    --bx-text-label: rgba(226, 232, 240, 0.88);
    --bx-shadow-card: 0 12px 40px rgba(0, 0, 0, 0.18);
    --bx-shadow-card-hover: 0 18px 48px rgba(0, 0, 0, 0.26);
    --bx-shadow-dropdown: 0 20px 48px rgba(0, 0, 0, 0.4);
    --bx-shadow-auth: 0 24px 64px rgba(0, 0, 0, 0.35);
    --bx-shadow-cta: 0 8px 24px var(--main-a35);
    --bx-inset-highlight: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    --bx-focus-ring: 0 0 0 3px var(--main-a20);
    --bx-hover-surface: rgba(255, 255, 255, 0.08);
    --bx-hover-surface-strong: rgba(255, 255, 255, 0.09);
}

.brickx-text-primary {
    color: var(--main-color) !important;
}

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

.btn-brickx-outline {
    color: var(--main-color);
    border-color: var(--main-color);
    background: transparent;
}

.btn-brickx-outline:hover {
    color: #fff;
    background: var(--main-color);
    border-color: var(--main-color);
}

.feature-box .content {
    box-shadow: inset 0 0px 66px #FCBF4947;
}

.invest-plan-top::before {
    box-shadow: inset 0 0px 66px #FCBF49d4;
}

.invest-plan::before {
    box-shadow: inset 0 0px 66px #FCBF493b;
}

.invest-plan-shape::after {
    background-color: #FCBF4933;
}

.invest-plan:hover .invest-plan-shape::after {
    background-color: #FCBF49;
}

.work-box {
    box-shadow: inset 0 0px 20px #FCBF49c4;
}

.work-box .icon {
    box-shadow: inset 0 0px 20px #FCBF49c4;
}

.cmn-table.style-separate tbody tr {
    box-shadow: inset 0 0px 8px #FCBF494d;
}

.testimonial-box .content {
    box-shadow: inset 0 0px 20px #FCBF49c4;
}

.referral-box::before {
    box-shadow: inset 0 0px 20px #FCBF49c4;
}

.referral-box-step {
    box-shadow: inset 0 0px 6px #FCBF499e;
}