/*
 * Red / black unified theme
 * Visual language aligned with the Bozi AI project:
 * near-black canvas, warm-white copy, crimson accents and glass surfaces.
 */
:root {
    color-scheme: dark;
    --rb-canvas: #050507;
    --rb-canvas-deep: #030305;
    --rb-surface: rgba(14, 14, 18, .84);
    --rb-surface-strong: rgba(20, 19, 24, .94);
    --rb-surface-modal: rgba(9, 9, 12, .97);
    --rb-surface-soft: rgba(255, 255, 255, .045);
    --rb-surface-hover: rgba(226, 18, 48, .11);
    --rb-surface-active: rgba(226, 18, 48, .18);
    --rb-red: #ff304d;
    --rb-red-strong: #ee2340;
    --rb-red-deep: #8d0b1d;
    --rb-red-soft: rgba(226, 18, 48, .16);
    --rb-text: #f4efe5;
    --rb-text-muted: #bbb5ae;
    --rb-text-dim: #7d7880;
    --rb-border: rgba(255, 255, 255, .14);
    --rb-border-soft: rgba(255, 255, 255, .08);
    --rb-border-strong: rgba(255, 255, 255, .24);
    --rb-border-red: rgba(255, 48, 77, .36);
    --rb-shadow-sm: 0 4px 18px rgba(0, 0, 0, .34);
    --rb-shadow-md: 0 12px 32px rgba(0, 0, 0, .48);
    --rb-shadow-lg: 0 24px 64px rgba(0, 0, 0, .64);
    --rb-radius-sm: 10px;
    --rb-radius: 16px;
    --rb-radius-lg: 22px;

    /* Bootstrap / OneUI variables */
    --bs-body-color: var(--rb-text);
    --bs-body-bg: var(--rb-canvas);
    --bs-primary: var(--rb-red-strong);
    --bs-primary-rgb: 238, 35, 64;
    --bs-link-color: #ff6077;
    --bs-link-hover-color: #ff8a9b;
    --bs-border-color: var(--rb-border);
    --bs-border-color-translucent: var(--rb-border-soft);
    --bs-secondary-color: var(--rb-text-muted);
    --bs-tertiary-bg: var(--rb-surface-soft);
    --bs-emphasis-color: #fffaf3;
}

html {
    background: var(--rb-canvas-deep);
}

body {
    min-height: 100vh;
    color: var(--rb-text) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(190, 10, 37, .2), transparent 28%),
        radial-gradient(circle at 10% 76%, rgba(124, 7, 25, .13), transparent 30%),
        var(--rb-canvas) !important;
    background-attachment: fixed !important;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .72) 70%, transparent 100%);
}

::selection {
    color: #fff;
    background: rgba(238, 35, 64, .72);
}

* {
    scrollbar-color: rgba(255, 48, 77, .48) rgba(255, 255, 255, .035);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .035);
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(255, 48, 77, .42);
    background-clip: padding-box;
}

a {
    color: #ff6077;
}

a:hover {
    color: #ff8a9b;
}

p,
label,
.form-label,
.text-muted,
.fs-sm,
.help-block,
.form-text {
    color: var(--rb-text-muted) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.block-title,
.content-heading {
    color: var(--rb-text) !important;
}

.text-dark,
.text-body,
.text-body-color,
.text-gray-dark,
.text-black {
    color: var(--rb-text) !important;
}

.text-primary,
.link-primary {
    color: var(--rb-red) !important;
}

.bg-primary,
.bg-primary-dark,
.bg-primary-darker,
.bg-nav-primary-dark,
.bg-nav-primary-darker,
.badge.bg-primary,
.bg-primary-light {
    color: #fff !important;
    background-color: var(--rb-red-strong) !important;
}

.bg-body,
.bg-body-light,
.bg-body-extra-light,
.bg-white,
.bg-light {
    color: var(--rb-text) !important;
    background-color: var(--rb-surface-strong) !important;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: var(--rb-border) !important;
}

#page-container,
#main-container,
.content,
.content-full,
.hero-static,
.hero-bubbles,
.page-content {
    background-color: transparent !important;
}

/* Global navigation */
#page-header,
.page-header,
.glass-nav {
    border-bottom: 1px solid var(--rb-border-red) !important;
    background: rgba(5, 5, 8, .88) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .42) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
}

#sidebar {
    border-right: 1px solid rgba(255, 48, 77, .18) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(190, 10, 37, .16), transparent 30%),
        rgba(5, 5, 8, .96) !important;
    box-shadow: 12px 0 34px rgba(0, 0, 0, .34) !important;
}

#sidebar .content-header {
    border-bottom: 1px solid var(--rb-border-soft);
    background: rgba(255, 255, 255, .018) !important;
}

.shop-name {
    border: 1px solid var(--rb-border-soft);
    background: rgba(255, 255, 255, .035);
}

.shop-name:hover {
    border-color: var(--rb-border-red);
    background: var(--rb-surface-hover);
}

.shop-title {
    color: var(--rb-text) !important;
}

.shop-logo {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(238, 35, 64, .24);
}

.nav-main-heading {
    color: var(--rb-text-dim) !important;
    letter-spacing: .12em;
}

.nav-main-link {
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--rb-text-muted) !important;
}

.nav-main-link:hover,
.nav-main-link:focus {
    border-color: rgba(255, 48, 77, .18);
    color: var(--rb-text) !important;
    background: var(--rb-surface-hover) !important;
}

.nav-main-link.active,
.nav-main-item.open > .nav-main-link,
.nav-main-item.active > .nav-main-link {
    border-color: rgba(255, 48, 77, .3);
    color: #fff !important;
    background: linear-gradient(100deg, rgba(141, 11, 29, .56), rgba(238, 35, 64, .18)) !important;
    box-shadow: inset 3px 0 0 var(--rb-red), 0 8px 22px rgba(0, 0, 0, .18);
}

.nav-main-link .nav-main-link-icon,
.nav-main-link svg,
.nav-main-link i {
    color: var(--rb-red) !important;
}

.nav-main-submenu {
    border-left-color: rgba(255, 48, 77, .18) !important;
}

/* Cards, panels and blocks */
.block,
.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.popover,
.toast,
.recharge-view,
.recharge-view .layout-box,
.withdraw-info,
.header-message,
.pay-container,
.config-block,
.item-block,
.block-notice {
    color: var(--rb-text) !important;
    border: 1px solid var(--rb-border) !important;
    background: linear-gradient(145deg, rgba(20, 19, 24, .94), rgba(10, 10, 13, .88)) !important;
    box-shadow: var(--rb-shadow-md) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
}

.block,
.card,
.modal-content,
.offcanvas,
.popover,
.recharge-view,
.withdraw-info,
.header-message,
.pay-container {
    border-radius: var(--rb-radius) !important;
}

.block:hover,
.card:hover,
.item-block:hover,
.config-block:hover {
    border-color: var(--rb-border-red) !important;
}

.block-header,
.card-header,
.modal-header,
.modal-footer,
.offcanvas-header,
.block-table-header {
    color: var(--rb-text) !important;
    border-color: var(--rb-border) !important;
    background: rgba(255, 255, 255, .025) !important;
}

.block-header-default,
.card-header:first-child {
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}

.block-content,
.card-body,
.modal-body,
.dropdown-menu,
.list-group,
.list-group-item {
    color: var(--rb-text) !important;
    background-color: transparent !important;
}

.dropdown-menu {
    padding: .45rem;
    border-radius: 14px !important;
    background: var(--rb-surface-modal) !important;
    box-shadow: var(--rb-shadow-lg) !important;
}

.dropdown-divider,
hr,
.separator {
    border-color: var(--rb-border) !important;
    opacity: 1;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--rb-text-muted) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    color: #fff !important;
    background: var(--rb-surface-hover) !important;
}

.item-block,
.config-block,
.block-notice {
    overflow: hidden;
    border-radius: var(--rb-radius-lg) !important;
}

.item-block::after,
.config-block::after,
.block-notice::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 48, 77, .1), transparent 38%);
}

.item-background::before,
.notice-background::before {
    background-color: rgba(0, 0, 0, .46) !important;
}

.item-card-icon {
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(238, 35, 64, .1) !important;
}

.ribbon-item-price {
    background: linear-gradient(90deg, var(--rb-red-deep), var(--rb-red-strong)) !important;
    box-shadow: -8px 8px 22px rgba(0, 0, 0, .32);
}

.ribbon-item-stock {
    border-top: 1px solid var(--rb-border-soft);
    background: rgba(5, 5, 8, .78) !important;
}

.ribbon-item-stock .item-number {
    color: #ff8a9b !important;
}

.category-btn {
    border: 1px solid var(--rb-border) !important;
    color: var(--rb-text) !important;
    background: rgba(18, 17, 22, .86) !important;
    box-shadow: var(--rb-shadow-sm) !important;
}

.category-btn:hover,
.category-btn.active {
    border-color: var(--rb-red) !important;
    background: var(--rb-surface-active) !important;
    box-shadow: 0 0 0 3px rgba(255, 48, 77, .08), var(--rb-shadow-sm) !important;
}

.item-image-main,
.item-image-list {
    border: 1px solid var(--rb-border) !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow: var(--rb-shadow-sm) !important;
}

.item-image-sku-mini.image-active {
    border-color: var(--rb-red) !important;
    box-shadow: 0 0 0 2px rgba(255, 48, 77, .18) !important;
}

/* Forms */
.form-control,
.form-select,
.form-control-alt,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.bootstrap-select > .dropdown-toggle,
textarea,
input,
select {
    color: var(--rb-text) !important;
    border-color: var(--rb-border) !important;
    background-color: rgba(255, 255, 255, .055) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--rb-text-dim) !important;
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection,
textarea:focus,
input:focus,
select:focus {
    color: #fff !important;
    border-color: rgba(255, 48, 77, .78) !important;
    background-color: rgba(255, 255, 255, .075) !important;
    box-shadow: 0 0 0 .22rem rgba(255, 38, 67, .14) !important;
}

.form-check-input {
    border-color: var(--rb-border-strong) !important;
    background-color: rgba(255, 255, 255, .07) !important;
}

.form-check-input:checked {
    border-color: var(--rb-red-strong) !important;
    background-color: var(--rb-red-strong) !important;
}

.form-floating > label {
    color: var(--rb-text-muted) !important;
}

.select2-dropdown,
.select2-results,
.select2-results__option,
.layui-form-select dl,
.layui-form-select dl dd,
.layui-form-select dl dt {
    color: var(--rb-text) !important;
    border-color: var(--rb-border) !important;
    background: var(--rb-surface-modal) !important;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"],
.layui-form-select dl dd:hover,
.layui-form-select dl dd.layui-this {
    color: #fff !important;
    background: var(--rb-surface-active) !important;
}

/* Buttons */
.btn {
    border-radius: 9px;
}

.btn-primary,
.btn-alt-primary,
.btn-danger,
.btn-alt-danger,
.store-button,
.btn-recharge,
.pay-container button:not([disabled]) {
    color: #fff !important;
    border-color: rgba(255, 96, 119, .56) !important;
    background: linear-gradient(135deg, var(--rb-red-strong), var(--rb-red-deep)) !important;
    box-shadow: 0 8px 22px rgba(157, 10, 34, .25) !important;
}

.btn-primary:hover,
.btn-alt-primary:hover,
.btn-danger:hover,
.btn-alt-danger:hover,
.store-button:hover,
.btn-recharge:hover,
.pay-container button:not([disabled]):hover {
    border-color: #ff8a9b !important;
    background: linear-gradient(135deg, #ff405b, #a90d26) !important;
    box-shadow: 0 10px 28px rgba(238, 35, 64, .34) !important;
    transform: translateY(-1px);
}

.btn-secondary,
.btn-alt-secondary,
.btn-light,
.btn-alt-light,
.btn-outline-secondary,
.sms-test-btn,
.smtp-test-btn {
    color: var(--rb-text) !important;
    border-color: var(--rb-border) !important;
    background: rgba(255, 255, 255, .065) !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-alt-secondary:hover,
.btn-light:hover,
.btn-alt-light:hover,
.btn-outline-secondary:hover,
.sms-test-btn:hover,
.smtp-test-btn:hover {
    color: #fff !important;
    border-color: var(--rb-border-red) !important;
    background: var(--rb-surface-hover) !important;
}

.btn:focus-visible {
    box-shadow: 0 0 0 .22rem rgba(255, 38, 67, .2) !important;
}

.btn:disabled,
.btn.disabled,
button[disabled] {
    color: var(--rb-text-dim) !important;
    border-color: var(--rb-border-soft) !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Tables and lists */
.table,
.bootstrap-table,
.fixed-table-container,
.fixed-table-body,
.fixed-table-header {
    --bs-table-color: var(--rb-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--rb-border-soft);
    --bs-table-striped-color: var(--rb-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .022);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(226, 18, 48, .075);
    color: var(--rb-text) !important;
    border-color: var(--rb-border-soft) !important;
    background: transparent !important;
}

.table > :not(caption) > * > *,
.bootstrap-table .fixed-table-container .table thead th,
.bootstrap-table .fixed-table-container .table tbody td {
    color: inherit !important;
    border-color: var(--rb-border-soft) !important;
    background: transparent !important;
}

.table thead th,
.bootstrap-table thead th {
    color: var(--rb-text-muted) !important;
    background: rgba(255, 255, 255, .035) !important;
}

.list-group-item {
    border-color: var(--rb-border-soft) !important;
}

.pagination .page-link {
    color: var(--rb-text-muted) !important;
    border-color: var(--rb-border) !important;
    background: rgba(255, 255, 255, .045) !important;
}

.pagination .page-link:hover,
.pagination .active .page-link {
    color: #fff !important;
    border-color: var(--rb-red) !important;
    background: var(--rb-red-strong) !important;
}

/* Tabs, pills, progress and alerts */
.nav-tabs,
.nav-tabs-block,
.nav-tabs-alt {
    border-color: var(--rb-border) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--rb-text-muted) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: #fff !important;
    border-color: var(--rb-border-red) !important;
    background: var(--rb-surface-active) !important;
}

.progress {
    border: 1px solid var(--rb-border-soft);
    background: rgba(255, 255, 255, .05) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--rb-red-deep), var(--rb-red)) !important;
}

.alert {
    color: var(--rb-text) !important;
    border: 1px solid var(--rb-border) !important;
    background: var(--rb-surface-strong) !important;
    box-shadow: var(--rb-shadow-sm);
}

.alert-primary,
.alert-info {
    border-color: rgba(255, 48, 77, .34) !important;
    background: rgba(226, 18, 48, .12) !important;
}

/* Third-party overlays */
.layui-layer,
.layui-layer-page,
.layui-layer-dialog,
.layui-layer-content,
.layui-layer-title,
.layui-layer-btn,
.layui-card,
.layui-panel {
    color: var(--rb-text) !important;
    border-color: var(--rb-border) !important;
    background: var(--rb-surface-modal) !important;
}

.layui-layer {
    border: 1px solid var(--rb-border-red) !important;
    border-radius: var(--rb-radius) !important;
    box-shadow: var(--rb-shadow-lg) !important;
    overflow: hidden;
}

.layui-layer-title {
    border-bottom: 1px solid var(--rb-border) !important;
}

.layui-layer-btn a,
.layui-btn,
.layui-form-checked[lay-skin="primary"] i {
    color: #fff !important;
    border-color: var(--rb-red-strong) !important;
    background: var(--rb-red-strong) !important;
}

.layui-layer-setwin .layui-layer-close {
    filter: grayscale(1) brightness(2);
}

.toast-success {
    border-color: rgba(16, 185, 129, .38) !important;
}

.toast-error {
    border-color: rgba(255, 48, 77, .46) !important;
}

/* Login, registration and install surfaces */
#login-form .block,
#register-form .block,
#reset-form .block,
.hero-static .block,
body > .container > .row > [class*="col-"] > .card {
    position: relative;
    overflow: hidden;
    border-color: var(--rb-border-red) !important;
    box-shadow: var(--rb-shadow-lg), 0 0 42px rgba(188, 13, 36, .1) !important;
}

#login-form .block::before,
#register-form .block::before,
#reset-form .block::before,
.hero-static .block::before,
body > .container > .row > [class*="col-"] > .card::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--rb-red), rgba(255, 255, 255, .9), transparent);
}

/* Responsive refinements */
@media (max-width: 991.98px) {
    #sidebar {
        box-shadow: 18px 0 42px rgba(0, 0, 0, .62) !important;
    }

    .item-block,
    .config-block,
    .block-notice {
        border-radius: var(--rb-radius) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Xinrui Dimension storefront */
.xr-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    min-height: 420px;
    margin: 26px 0 20px;
    padding: clamp(34px, 6vw, 72px);
    overflow: hidden;
    border: 1px solid rgba(255, 48, 77, .3);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 48, 77, .22), transparent 33%),
        linear-gradient(120deg, rgba(22, 20, 25, .98), rgba(4, 4, 7, .96));
    box-shadow: var(--rb-shadow-lg);
}

.xr-hero::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .25;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.xr-hero::after {
    position: absolute;
    top: -140px;
    right: -80px;
    width: 380px;
    height: 380px;
    content: "";
    border: 70px solid rgba(255, 48, 77, .08);
    border-radius: 50%;
}

.xr-hero-copy,
.xr-hero-panel {
    position: relative;
    z-index: 1;
}

.xr-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ff8395;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.xr-eyebrow > span {
    width: 28px;
    height: 2px;
    background: var(--rb-red);
    box-shadow: 0 0 12px rgba(255, 48, 77, .8);
}

.xr-hero h1 {
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.xr-hero-copy > p {
    max-width: 670px;
    margin: 0 0 28px;
    color: var(--rb-text-muted);
    font-size: 16px;
    line-height: 1.9;
}

.xr-hero-actions,
.xr-service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.xr-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 28px;
    color: #d8d0d2;
    font-size: 13px;
}

.xr-trust-line i {
    margin-right: 7px;
    color: var(--rb-red);
}

.xr-hero-panel {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(8, 8, 11, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .35);
    backdrop-filter: blur(16px);
}

.xr-panel-label,
.xr-section-heading span {
    color: #ff778a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.xr-hero-panel h2 {
    margin: 6px 0 18px;
    color: #fff;
    font-size: 24px;
}

.xr-quick-search {
    display: flex;
    gap: 8px;
}

.xr-quick-search .form-control {
    min-width: 0;
    height: 48px;
}

.xr-quick-search .btn {
    width: 50px;
    flex: 0 0 50px;
}

.xr-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    color: var(--rb-text-dim);
    font-size: 12px;
}

.xr-hot-tags a {
    color: #e7dfe1;
}

.xr-hot-tags a:hover {
    color: var(--rb-red);
}

.xr-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}

.xr-feature-card {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 18px;
    color: var(--rb-text);
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    background: var(--rb-surface);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.xr-feature-card:hover {
    color: #fff;
    border-color: var(--rb-border-red);
    background: var(--rb-surface-active);
    transform: translateY(-3px);
}

.xr-feature-card > i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--rb-red), var(--rb-red-deep));
    box-shadow: 0 8px 20px rgba(238, 35, 64, .2);
}

.xr-feature-card div {
    min-width: 0;
}

.xr-feature-card strong,
.xr-feature-card span {
    display: block;
}

.xr-feature-card strong {
    margin-bottom: 4px;
}

.xr-feature-card span {
    overflow: hidden;
    color: var(--rb-text-dim);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xr-feature-card b {
    margin-left: auto;
    color: #ff6d82;
    font-size: 11px;
    white-space: nowrap;
}

.xr-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 42px 0 18px;
}

.xr-section-heading h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
}

.xr-heading-link {
    color: #ff6d82;
    font-weight: 700;
}

.xr-process {
    margin-top: 28px;
}

.xr-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--rb-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--rb-surface);
}

.xr-process-step {
    position: relative;
    padding: 28px;
    border-right: 1px solid var(--rb-border);
}

.xr-process-step:last-child {
    border-right: 0;
}

.xr-process-step > b {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(255, 255, 255, .08);
    font-size: 36px;
}

.xr-process-step > i {
    margin-bottom: 24px;
    color: var(--rb-red);
    font-size: 26px;
}

.xr-process-step h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 17px;
}

.xr-process-step p {
    margin: 0;
    color: var(--rb-text-dim);
    font-size: 13px;
    line-height: 1.75;
}

.xr-service-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin: 42px 0;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid var(--rb-border-red);
    border-radius: 20px;
    background:
        linear-gradient(110deg, rgba(255, 48, 77, .14), transparent 45%),
        var(--rb-surface-strong);
}

.xr-service-banner h2 {
    margin: 12px 0 8px;
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
}

.xr-service-banner p {
    max-width: 680px;
    margin: 0;
    color: var(--rb-text-muted);
}

.xr-service-actions {
    flex: 0 0 auto;
}

.xr-faq {
    margin: 0 0 44px;
}

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

.xr-faq details {
    border: 1px solid var(--rb-border);
    border-radius: 13px;
    background: var(--rb-surface);
}

.xr-faq details[open] {
    border-color: var(--rb-border-red);
}

.xr-faq summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.xr-faq summary::-webkit-details-marker {
    display: none;
}

.xr-faq summary i {
    color: var(--rb-red);
    transition: transform .2s ease;
}

.xr-faq details[open] summary i {
    transform: rotate(45deg);
}

.xr-faq details p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--rb-text-muted);
    line-height: 1.75;
}

.xr-footer-tagline {
    margin-left: 10px;
    color: var(--rb-text-dim);
}

@media (max-width: 991.98px) {
    .xr-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .xr-feature-grid,
    .xr-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xr-process-step:nth-child(2) {
        border-right: 0;
    }

    .xr-process-step:nth-child(-n+2) {
        border-bottom: 1px solid var(--rb-border);
    }

    .xr-service-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .xr-hero {
        margin-top: 16px;
        padding: 28px 20px;
        border-radius: 18px;
    }

    .xr-hero h1 {
        font-size: 40px;
    }

    .xr-hero-panel {
        padding: 20px;
    }

    .xr-hero-actions .btn,
    .xr-service-actions .btn {
        width: 100%;
    }

    .xr-feature-grid,
    .xr-process-grid,
    .xr-faq-grid {
        grid-template-columns: 1fr;
    }

    .xr-process-step,
    .xr-process-step:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--rb-border);
    }

    .xr-process-step:last-child {
        border-bottom: 0;
    }

    .xr-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .xr-footer-tagline {
        display: block;
        margin: 4px 0 0;
    }
}