/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
    /* ═══════════════════════════════════════════
       PRIMARY --mbx-* DESIGN TOKENS
       All colour values are defined here once.
    ═══════════════════════════════════════════ */

    /* — Brand — */
    --mbx-brand:                    rgba(255, 198, 54, 1);
    --mbx-brand-hover:              rgba(255, 215, 90, 1);
    --mbx-brand-dim:                rgba(255, 198, 54, 0.15);
    --mbx-brand-light:              rgba(255, 230, 130, 1);
    --mbx-brand-glow-start:         rgba(255, 198, 54, 0.10);
    --mbx-brand-glow-end:           rgba(255, 198, 54, 0.03);
    --mbx-brand-focus:              rgba(255, 198, 54, 0.12);
    --mbx-brand-border-soft:        rgba(255, 198, 54, 0.20);
    --mbx-brand-border:             rgba(255, 198, 54, 0.25);
    --mbx-brand-shadow:             rgba(255, 198, 54, 0.28);
    --mbx-brand-ring:               rgba(255, 198, 54, 0.30);
    --mbx-brand-shadow-hover:       rgba(255, 198, 54, 0.40);
    --mbx-brand-accent:             rgba(255, 198, 54, 0.60);

    /* — Backgrounds — */
    --mbx-bg-root:                  #131B27;
    --mbx-bg-surface:               #111111;
    --mbx-bg-elevated:              #1a1a1a;
    --mbx-bg-overlay:               rgba(255, 255, 255, 0.04);
    --mbx-bg-nav:                   rgba(10, 10, 10, 0.82);

    /* — Text — */
    --mbx-text-primary:             #ffffff;
    --mbx-text-body:                rgba(255, 255, 255, 0.70);
    --mbx-text-secondary:           rgba(255, 255, 255, 0.55);
    --mbx-text-dim:                 rgba(255, 255, 255, 0.45);
    --mbx-text-tertiary:            rgba(255, 255, 255, 0.30);
    --mbx-text-faint:               rgba(255, 255, 255, 0.20);
    --mbx-text-inverted:            #0a0a0a;

    /* — Borders — */
    --mbx-border-subtle:            rgba(255, 255, 255, 0.08);
    --mbx-border-mid:               rgba(255, 255, 255, 0.14);
    --mbx-border-strong:            rgba(255, 255, 255, 0.28);
    --mbx-border-accent:            var(--mbx-brand-accent);

    /* — Success — */
    --mbx-success:                  rgba(0, 200, 150, 1);
    --mbx-success-dim:              rgba(0, 200, 150, 0.12);
    --mbx-success-bg:               rgba(0, 200, 150, 0.08);
    --mbx-success-border:           rgba(0, 200, 150, 0.22);
    --mbx-success-border-mid:       rgba(0, 200, 150, 0.25);
    --mbx-success-border-strong:    rgba(0, 200, 150, 0.28);
    --mbx-success-hover:            rgba(0, 220, 165, 1);

    /* — Danger — */
    --mbx-danger:                   rgba(255, 100, 68, 1);
    --mbx-danger-dim:               rgba(255, 100, 68, 0.12);
    --mbx-danger-bg:                rgba(255, 100, 68, 0.08);
    --mbx-danger-80:                rgba(255, 100, 68, 0.80);

    /* — Info — */
    --mbx-info:                     rgba(90, 200, 230, 1);
    --mbx-info-dim:                 rgba(90, 200, 230, 0.12);
    --mbx-info-border:              rgba(90, 200, 230, 0.28);
    --mbx-info-hover:               rgba(120, 220, 240, 1);

    /* — Crisp red (btn-danger/warning) — */
    --mbx-red:                      rgba(220, 38, 38, 1);
    --mbx-red-hover:                rgba(239, 68, 68, 1);
    --mbx-red-shadow:               rgba(220, 38, 38, 0.30);
    --mbx-red-shadow-hover:         rgba(220, 38, 38, 0.45);

    /* — Neutrals — */
    --mbx-pure-black:               #000000;
    --mbx-black-disabled:           rgba(10, 10, 10, 0.40);

    /* — Radius — */
    --mbx-radius-sm:                8px;
    --mbx-radius-md:                14px;
    --mbx-radius-lg:                20px;
    --mbx-radius-xl:                28px;
    --mbx-radius-pill:              999px;

    /* — Shadows — */
    --mbx-shadow-card:              0 1px 3px rgba(0,0,0,0.60), 0 8px 32px rgba(0,0,0,0.40);
    --mbx-shadow-elevated:          0 2px 8px rgba(0,0,0,0.80), 0 20px 60px rgba(0,0,0,0.50);
    /* — Code syntax — */
    --mbx-code-bg:                  #0d0d0d;
    --mbx-code-comment:             #5a7a5a;
    --mbx-code-key:                 #7dc8f0;
    --mbx-code-str:                 #ce9178;
    --mbx-code-punc:                #c8c8c8;

    /* — Light-mode UI tokens (badge-live, example-q, trust-bar) — */
    --mbx-ui-badge-bg:              #E6F1FB;
    --mbx-ui-badge-color:           #185FA5;
    --mbx-ui-badge-dot:             #1D9E75;
    --mbx-ui-eq-color:              #5F5E5A;
    --mbx-ui-eq-bg:                 #F1EFE8;
    --mbx-ui-eq-arrow:              #B4B2A9;
    --mbx-ui-trust-border:          #D3D1C7;
    --mbx-ui-trust-desc:            #888780;
    --mbx-ui-trust-icon-green:      #E1F5EE;
    --mbx-ui-trust-icon-blue:       #E6F1FB;
    --mbx-ui-trust-icon-gray:       #F1EFE8;
    --mbx-ui-trust-icon-amber:      #FAEEDA;

    /* — Typography — */
    --mbx-font-sans:                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif;
    --mbx-font-mono:                'DM Mono', 'Fira Code', SFMono-Regular, Menlo, monospace;

    /* — Transitions — */
    --mbx-ease:                     cubic-bezier(0.16, 1, 0.3, 1);
    --mbx-duration-fast:            150ms;
    --mbx-duration-base:            250ms;

    /* ═══════════════════════════════════════════
       --rv-* ALIASES  →  point to --mbx-* above
       CSS rules in this file use --rv-* names.
    ═══════════════════════════════════════════ */
    --rv-yellow:                var(--mbx-brand);
    --rv-yellow-dim:            var(--mbx-brand-dim);
    --rv-yellow-hover:          var(--mbx-brand-hover);
    --rv-yellow-light:          var(--mbx-brand-light);
    --rv-yellow-glow-start:     var(--mbx-brand-glow-start);
    --rv-yellow-glow-end:       var(--mbx-brand-glow-end);
    --rv-yellow-focus:          var(--mbx-brand-focus);
    --rv-yellow-border-soft:    var(--mbx-brand-border-soft);
    --rv-yellow-border:         var(--mbx-brand-border);
    --rv-yellow-shadow:         var(--mbx-brand-shadow);
    --rv-yellow-ring:           var(--mbx-brand-ring);
    --rv-yellow-shadow-hover:   var(--mbx-brand-shadow-hover);
    --rv-bg-root:               var(--mbx-bg-root);
    --rv-bg-surface:            var(--mbx-bg-surface);
    --rv-bg-elevated:           var(--mbx-bg-elevated);
    --rv-bg-overlay:            var(--mbx-bg-overlay);
    --rv-bg-nav:                var(--mbx-bg-nav);
    --rv-text-primary:          var(--mbx-text-primary);
    --rv-text-body:             var(--mbx-text-body);
    --rv-text-secondary:        var(--mbx-text-secondary);
    --rv-text-dim:              var(--mbx-text-dim);
    --rv-text-tertiary:         var(--mbx-text-tertiary);
    --rv-text-faint:            var(--mbx-text-faint);
    --rv-text-inverted:         var(--mbx-text-inverted);
    --rv-border-subtle:         var(--mbx-border-subtle);
    --rv-border-mid:            var(--mbx-border-mid);
    --rv-border-strong:         var(--mbx-border-strong);
    --rv-border-accent:         var(--mbx-border-accent);
    --rv-success:               var(--mbx-success);
    --rv-success-dim:           var(--mbx-success-dim);
    --rv-success-bg:            var(--mbx-success-bg);
    --rv-success-border:        var(--mbx-success-border);
    --rv-success-border-mid:    var(--mbx-success-border-mid);
    --rv-success-border-strong: var(--mbx-success-border-strong);
    --rv-success-hover:         var(--mbx-success-hover);
    --rv-danger:                var(--mbx-danger);
    --rv-danger-dim:            var(--mbx-danger-dim);
    --rv-danger-bg:             var(--mbx-danger-bg);
    --rv-danger-80:             var(--mbx-danger-80);
    --rv-info:                  var(--mbx-info);
    --rv-info-dim:              var(--mbx-info-dim);
    --rv-info-border:           var(--mbx-info-border);
    --rv-info-hover:            var(--mbx-info-hover);
    --rv-red:                   var(--mbx-red);
    --rv-red-hover:             var(--mbx-red-hover);
    --rv-red-shadow:            var(--mbx-red-shadow);
    --rv-red-shadow-hover:      var(--mbx-red-shadow-hover);
    --rv-pure-black:            var(--mbx-pure-black);
    --rv-black-disabled:        var(--mbx-black-disabled);
    --rv-radius-sm:             var(--mbx-radius-sm);
    --rv-radius-md:             var(--mbx-radius-md);
    --rv-radius-lg:             var(--mbx-radius-lg);
    --rv-radius-xl:             var(--mbx-radius-xl);
    --rv-radius-pill:           var(--mbx-radius-pill);
    --rv-shadow-card:           var(--mbx-shadow-card);
    --rv-shadow-elevated:       var(--mbx-shadow-elevated);
    --rv-code-bg:               var(--mbx-code-bg);
    --rv-code-comment:          var(--mbx-code-comment);
    --rv-code-key:              var(--mbx-code-key);
    --rv-code-str:              var(--mbx-code-str);
    --rv-code-punc:             var(--mbx-code-punc);
    --rv-ui-badge-bg:           var(--mbx-ui-badge-bg);
    --rv-ui-badge-color:        var(--mbx-ui-badge-color);
    --rv-ui-badge-dot:          var(--mbx-ui-badge-dot);
    --rv-ui-eq-color:           var(--mbx-ui-eq-color);
    --rv-ui-eq-bg:              var(--mbx-ui-eq-bg);
    --rv-ui-eq-arrow:           var(--mbx-ui-eq-arrow);
    --rv-ui-trust-border:       var(--mbx-ui-trust-border);
    --rv-ui-trust-desc:         var(--mbx-ui-trust-desc);
    --rv-ui-trust-icon-green:   var(--mbx-ui-trust-icon-green);
    --rv-ui-trust-icon-blue:    var(--mbx-ui-trust-icon-blue);
    --rv-ui-trust-icon-gray:    var(--mbx-ui-trust-icon-gray);
    --rv-ui-trust-icon-amber:   var(--mbx-ui-trust-icon-amber);
    --rv-font-sans:             var(--mbx-font-sans);
    --rv-font-mono:             var(--mbx-font-mono);
    --rv-ease:                  var(--mbx-ease);
    --rv-duration-fast:         var(--mbx-duration-fast);
    --rv-duration-base:         var(--mbx-duration-base);

    /* ═══════════════════════════════════════════
       Legacy --mbx-color-* aliases used in .cshtml
    ═══════════════════════════════════════════ */
    --mbx-color-text:           var(--mbx-text-primary);
    --mbx-color-text-secondary: var(--mbx-text-secondary);
    --mbx-color-text-tertiary:  var(--mbx-text-tertiary);
}


/* ═══════════════════════════════════════════════
   2. BASE RESET & TYPOGRAPHY
═══════════════════════════════════════════════ */
html {
    position: relative;
    min-height: 100%;
    font-size: 15px;
    font-family: var(--rv-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    background-color: var(--rv-bg-root);
    color: var(--rv-text-primary);
    font-family: var(--rv-font-sans);
    font-weight: 400;
    line-height: 1.6;
}

main { min-height: 80vh; }

/* Headings — tight, bold, high-credibility */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rv-font-sans);
    color: var(--rv-text-primary);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.8rem);  font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem);  font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem);  font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem;  font-weight: 600; }
h6 { font-size: 0.95rem; font-weight: 600; }

p {
    color: var(--rv-text-body);   /* easier on long-form reads than --rv-text-secondary */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    margin-bottom: 1rem;
}

strong, b { color: var(--rv-text-primary); font-weight: 700; }

a {
    color: var(--rv-yellow);
    text-decoration: none;
    transition: opacity var(--rv-duration-fast) var(--rv-ease);
}
a:hover, a:focus  { color: var(--rv-yellow-hover); opacity: 0.9; }
a:visited         { color: var(--rv-yellow); }

code, pre {
    font-family: var(--rv-font-mono);
    font-size: 0.88em;
}

/* ─── Tables ─────────────────────────────────── */
/* Tabular nums: critical for accountants — columns stay aligned */
table {
    font-variant-numeric: tabular-nums;
    width: 100%;
    border-collapse: collapse;
}

th {
    color: var(--rv-text-secondary);
    font-family: var(--rv-font-sans);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rv-border-subtle);
    padding: 10px 12px;
    white-space: nowrap;
}

td {
    color: var(--rv-text-primary);
    font-size: 0.92rem;
    padding: 12px 12px;
    border-bottom: 1px solid var(--rv-border-subtle);
    vertical-align: middle;
}

/* Amount/monetary columns — always right-aligned, monospaced */
td.amount, td.currency, th.amount, th.currency,
.col-amount, .col-currency, .col-iban, .col-ref {
    font-family: var(--rv-font-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

tr:hover td { background: var(--rv-bg-overlay); }

.table-dark th, .table-dark td {
    background: transparent;
    color: var(--rv-text-primary);
    border-color: var(--rv-border-subtle);
}


/* ═══════════════════════════════════════════════
   3. NAVIGATION
═══════════════════════════════════════════════ */
.navbar,
.rv-nav {
    background: var(--rv-bg-nav) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--rv-border-subtle);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand, .rv-nav-brand {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--rv-text-primary) !important;
}

.navbar-brand span,
.rv-nav-brand .accent { color: var(--rv-yellow); }

.navbar-nav .nav-link,
.rv-nav .nav-link {
    color: var(--rv-text-secondary) !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem !important;
    border-radius: var(--rv-radius-pill);
    transition: color     var(--rv-duration-fast) var(--rv-ease),
    background var(--rv-duration-fast) var(--rv-ease);
    letter-spacing: 0;
}

.navbar-nav .nav-link:hover,
.rv-nav .nav-link:hover {
    color: var(--rv-text-primary) !important;
    background: var(--rv-bg-overlay);
}

.navbar-nav .nav-link.active,
.rv-nav .nav-link.active {
    color: var(--rv-text-primary) !important;
    background: var(--rv-bg-overlay);
}

.nav-bg-exthand {
    background: var(--rv-bg-nav) !important;
    backdrop-filter: blur(20px) !important;
}

.navbar-toggler {
    border: 1px solid var(--rv-border-mid);
    border-radius: var(--rv-radius-sm);
    padding: 6px 10px;
}

.navbar-toggler-icon { filter: invert(1); }

.dropdown-menu {
    background: var(--rv-bg-elevated);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    box-shadow: var(--rv-shadow-elevated);
    padding: 6px;
}

.dropdown-item {
    color: var(--rv-text-secondary);
    border-radius: var(--rv-radius-sm);
    font-size: 0.92rem;
    padding: 8px 12px;
    transition: background var(--rv-duration-fast) var(--rv-ease),
    color      var(--rv-duration-fast) var(--rv-ease);
}

.dropdown-item:hover {
    color: var(--rv-text-primary);
    background: var(--rv-bg-overlay);
}

.dropdown-divider {
    border-color: var(--rv-border-subtle);
    margin: 4px 0;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.nav-link {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--rv-text-secondary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--rv-text-inverted);
    background: var(--rv-yellow);
}


/* ═══════════════════════════════════════════════
   4. BUTTONS
═══════════════════════════════════════════════ */

.btn {
    border-radius: var(--rv-radius-pill) !important;
    font-family: var(--rv-font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    padding: 10px 24px;
    margin: 2px;
    border: none;
    transition: transform   var(--rv-duration-fast) var(--rv-ease),
    opacity     var(--rv-duration-fast) var(--rv-ease),
    box-shadow  var(--rv-duration-fast) var(--rv-ease),
    background  var(--rv-duration-fast) var(--rv-ease);
    cursor: pointer;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: 0.88; }

.btn-sm {
    padding: 5px 14px !important;
    font-size: 0.80rem !important;
    line-height: 1.4 !important;
}

.btn-lg {
    padding: 14px 32px !important;
    font-size: 1.05rem !important;
}

.btn-group {
    border-radius: var(--rv-radius-pill);
    gap: 2px;
    margin: 0 !important;
}

/* Primary — yellow accent, dark text */
.btn-primary {
    background: var(--rv-yellow) !important;
    color: var(--rv-text-inverted) !important;
    border: none !important;
    box-shadow: 0 4px 20px var(--rv-yellow-shadow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--rv-yellow-hover) !important;
    color: var(--rv-text-inverted) !important;
    box-shadow: 0 6px 28px var(--rv-yellow-shadow-hover) !important;
    border: none !important;
}
.btn-primary:visited {
    background: var(--rv-yellow) !important;
    color: var(--rv-text-inverted) !important;
    border: none !important;
}
.btn-primary:disabled {
    background: var(--rv-yellow-border) !important;
    color: var(--rv-black-disabled) !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
}

/* Ghost / outline */
.btn-outline-primary {
    background: transparent !important;
    color: var(--rv-text-primary) !important;
    border: 1px solid var(--rv-border-mid) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:visited {
    background: var(--rv-bg-overlay) !important;
    color: var(--rv-text-primary) !important;
    border-color: var(--rv-border-strong) !important;
}

.btn-outline-primary-bordered {
    background: transparent;
    color: var(--rv-text-secondary);
    border: 1px solid var(--rv-border-mid);
    border-radius: var(--rv-radius-pill);
}
.btn-outline-primary-bordered:hover,
.btn-outline-primary-bordered:focus,
.btn-outline-primary-bordered:active,
.btn-outline-primary-bordered:visited {
    background: var(--rv-bg-overlay);
    color: var(--rv-text-primary);
    border-color: var(--rv-border-strong);
}

/* Success */
.btn-success {
    background: var(--rv-success) !important;
    color: var(--rv-pure-black) !important;
    border: none !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:visited {
    background: var(--rv-success-hover) !important;
    color: var(--rv-pure-black) !important;
    border: none !important;
}

/* Danger / Warning — distinct red, clearly ≠ yellow primary */
.btn-danger,
.btn-warning {
    background: var(--rv-red) !important;
    color: var(--rv-text-primary) !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--rv-red-shadow);
}
.btn-danger:hover,
.btn-warning:hover {
    background: var(--rv-red-hover) !important;
    box-shadow: 0 6px 20px var(--rv-red-shadow-hover) !important;
    border: none !important;
}

/* Info */
.btn-info {
    background: var(--rv-info) !important;
    color: var(--rv-pure-black) !important;
    border: none !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:visited {
    background: var(--rv-info-hover) !important;
    color: var(--rv-pure-black) !important;
    border: none !important;
}

button { -webkit-appearance: none !important; }
button.accept-policy { font-size: 1rem; line-height: inherit; }


/* ═══════════════════════════════════════════════
   5. CARDS & PANELS
═══════════════════════════════════════════════ */

.panel {
    padding: 24px 28px;
    color: var(--rv-text-secondary);
    border-radius: var(--rv-radius-xl);
    background: var(--rv-bg-elevated);
    border: 1px solid var(--rv-border-mid);
    box-shadow: var(--rv-shadow-elevated);
    transition: border-color var(--rv-duration-base) var(--rv-ease),
    box-shadow   var(--rv-duration-base) var(--rv-ease);
}
.panel:hover {
    border-color: var(--rv-border-strong);
    box-shadow: var(--rv-shadow-elevated);
}

/* Yellow top-accent variant — use on standalone form/contact panels */
.panel-accent {
    border-top: 3px solid var(--rv-yellow) !important;
}

.panel-focus {
    border-color: var(--rv-border-accent) !important;
    box-shadow: 0 0 0 3px var(--rv-yellow-focus), var(--rv-shadow-elevated) !important;
}

.panel-light {
    border-radius: var(--rv-radius-md);
    box-shadow: var(--rv-shadow-card);
}

.panel-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rv-text-primary);
}

/* Muted subtitle inside a panel (e.g. form instructions) */
.panel-subtitle {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--rv-text-secondary);
    margin-bottom: 2rem;
}

/* Glass card variant */
.rv-glass-card {
    background: var(--rv-bg-overlay);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-lg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: var(--rv-shadow-card);
    padding: 24px 28px;
}

/* Stat blocks */
.statBlock,
.statBlock:hover,
.statBlock:active,
.statBlock:visited {
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    margin: 0 8px 10px;
    padding: 20px 24px;
    text-decoration: none !important;
    color: var(--rv-text-primary);
    transition: border-color var(--rv-duration-base) var(--rv-ease),
    transform    var(--rv-duration-base) var(--rv-ease);
}
.statBlock:hover { border-color: var(--rv-border-mid); transform: translateY(-2px); }


/* ═══════════════════════════════════════════════
   6. BACKGROUNDS & SECTIONS
═══════════════════════════════════════════════ */

.bg-dark    { background: var(--rv-bg-surface) !important; }
.bg-success {
    background: var(--rv-success-bg) !important;
    border-left: 3px solid var(--rv-success) !important;
}
.bg-success .fw-bold.fs-5 { color: var(--rv-success); }

.bg-danger {
    background: var(--rv-danger-bg) !important;
    border-left: 3px solid var(--rv-danger) !important;
}
.bg-danger .fw-bold.fs-5 { color: var(--rv-danger); }
/* Incoming (amount > 0): green left stripe + tinted bg */
.bg-hardGreen {
    background: var(--rv-success-bg);
    border-left: 3px solid var(--rv-success) !important;
}
.bg-hardGreen .fw-bold.fs-5 { color: var(--rv-success); }

/* Outgoing (amount <= 0): red-orange left stripe + tinted bg */
.bg-hardBlue {
    background: var(--rv-danger-bg);
    border-left: 3px solid var(--rv-danger) !important;
}
.bg-hardBlue .fw-bold.fs-5 { color: var(--rv-danger); }

.principal { background: var(--rv-bg-surface) !important; }
.menuBar   { background: var(--rv-bg-overlay); border-radius: var(--rv-radius-md); }

/* Hero glow backdrop */
.rv-hero-glow {
    position: relative;
    overflow: hidden;
}
.rv-hero-glow::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center,
    var(--rv-yellow-glow-start) 0%,
    var(--rv-yellow-glow-end) 45%,
    transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.rv-section { padding: 80px 0; position: relative; }
@media (min-width: 992px) { .rv-section { padding: 120px 0; } }

.rv-divider { border: none; border-top: 1px solid var(--rv-border-subtle); margin: 0; }


/* ═══════════════════════════════════════════════
   7. FORMS
═══════════════════════════════════════════════ */

.form-control {
    background: var(--rv-bg-root) !important;
    color: var(--rv-text-primary) !important;
    border: 1px solid var(--rv-border-mid) !important;
    border-radius: var(--rv-radius-md) !important;
    font-family: var(--rv-font-sans);
    font-size: 0.95rem;
    padding: 12px 16px;
    transition: border-color var(--rv-duration-fast) var(--rv-ease),
    box-shadow   var(--rv-duration-fast) var(--rv-ease);
}
.form-control:focus {
    border-color: var(--rv-border-accent) !important;
    box-shadow: 0 0 0 3px var(--rv-yellow-focus) !important;
    color: var(--rv-text-primary) !important;
    background: var(--rv-bg-root) !important;
    outline: none;
}
.form-control::placeholder { color: var(--rv-text-tertiary); }

.form-select {
    background-color: var(--rv-bg-elevated);
    color: var(--rv-text-primary);
    border: 1px solid var(--rv-border-mid);
    border-radius: var(--rv-radius-md);
    font-size: 0.95rem;
    padding: 12px 16px;
}
.form-select:focus {
    border-color: var(--rv-border-accent);
    box-shadow: 0 0 0 3px var(--rv-yellow-focus) !important;
    color: var(--rv-text-primary);
}
.form-select:active { color: var(--rv-text-primary); }

.form-label {
    color: var(--mbx-text-primary) !important;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}

/* ── Floating labels ── */
/* Requires: <input id="x" placeholder="…"> + <label for="x"> after the input */
.form-floating { border: 0; margin-bottom: 6px; }

.form-floating > label {
    color: var(--rv-text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    padding-left: 16px;
    transition: color var(--rv-duration-fast) var(--rv-ease),
    font-size var(--rv-duration-fast) var(--rv-ease);
}

/* Label floated up (field focused or has a value) */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--rv-yellow);
    font-weight: 600;
}

.form-check-label { color: var(--rv-text-secondary); font-size: 0.92rem; }

.form-check-input:checked {
    background-color: var(--rv-yellow) !important;
    border-color: var(--rv-yellow) !important;
}

.form-hidden {
    background: transparent !important;
    border: none;
    border-bottom: 1px solid var(--rv-border-mid);
    color: var(--rv-text-primary);
    border-radius: 0;
    padding: 8px 0;
}
.form-hidden:focus {
    background: transparent !important;
    border-bottom: 1px solid var(--rv-border-accent);
    color: var(--rv-text-primary) !important;
    box-shadow: none !important;
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}

input[type="password"],
input[type="email"] {
    background: transparent !important;
    color: var(--rv-text-primary) !important;
    border: 1px solid var(--rv-border-mid) !important;
    border-radius: var(--rv-radius-md);
}

.field-validation-error { color: var(--rv-danger) !important; font-size: 0.82rem; }

.validation-summary-errors ul li {
    list-style-type: none;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--rv-danger);
}

.smallForm {
    margin-top: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 480px;
    padding: 32px;
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-xl);
    box-shadow: var(--rv-shadow-elevated);
}

.chatForm {
    margin-top: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 96%;
    padding: 16px;
}

.wideForm { padding: 16px; }


/* ═══════════════════════════════════════════════
   8. HERO / LANDING COMPONENTS
═══════════════════════════════════════════════ */

.hero-eyebrow,
.rv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--rv-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rv-yellow);
    background: var(--rv-yellow-dim);
    border: 1px solid var(--rv-yellow-ring);
    border-radius: var(--rv-radius-pill);
    padding: 5px 14px;
    margin-bottom: 1.5rem;
}

.section-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rv-yellow);
    margin-bottom: 10px;
}

.section-title {
    font-family: var(--rv-font-sans);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--rv-text-primary);
    margin-bottom: 12px;
}

.section-sub {
    font-size: 1.05rem;
    color: var(--rv-text-secondary);
    line-height: 1.75;
    font-weight: 400;
    max-width: 540px;
    margin-bottom: 3rem;
}

.compatible-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.compatible-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rv-text-tertiary);
}

.compat-pill {
    font-size: 0.80rem;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: var(--rv-radius-pill);
    border: 1px solid var(--rv-border-mid);
    color: var(--rv-text-secondary);
    background: var(--rv-bg-overlay);
    transition: border-color var(--rv-duration-fast) var(--rv-ease);
}
.compat-pill:hover { border-color: var(--rv-border-strong); }

/* Stat number chip (CEO dashboard) */
.rv-stat-chip { display: inline-flex; align-items: baseline; gap: 6px; }
.rv-stat-chip .rv-stat-number {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--rv-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--rv-font-mono);
}
.rv-stat-chip .rv-stat-unit {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rv-yellow);
}
.rv-stat-chip .rv-stat-label {
    font-size: 0.85rem;
    color: var(--rv-text-secondary);
    display: block;
    margin-top: 4px;
}

/* Live pulse dot */
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rv-yellow);
    animation: rv-pulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes rv-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.85); }
}


/* ═══════════════════════════════════════════════
   9. STEP / FEATURE BLOCKS
═══════════════════════════════════════════════ */

/* ── Hero title ──────────────────────────────── */
.hero-title {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--rv-text-primary);
    margin-bottom: 1.25rem;
}

/* ── Hero description ────────────────────────── */
.hero-desc {
    font-size: 1.15rem;
    color: var(--rv-text-body);
    line-height: 1.75;
    font-weight: 400;
    max-width: 520px;
    margin-bottom: 2rem;
}

/* ── Trust bar (below CTAs) ──────────────────── */
.trust-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1.5rem;
    font-size: 0.80rem;
    color: var(--rv-text-dim);
    font-weight: 400;
}

.trust-sep {
    color: var(--rv-text-faint);
}

/* ── Feature cards (4-up grid below hero) ────── */
.feat-card {
    padding: 4px 0;
}

.feat-card .feat-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--rv-text-primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.feat-card .feat-desc {
    font-size: 0.88rem;
    color: var(--rv-text-body);
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
}

/* ── Step number variants ────────────────────── */
.num-1 {
    background: var(--rv-yellow-dim);
    color: var(--rv-yellow);
    border-color: var(--rv-yellow-shadow);
}

.num-2 {
    background: var(--rv-info-dim);
    color: var(--rv-info);
    border-color: var(--rv-info-border);
}

.num-3 {
    background: var(--rv-success-dim);
    color: var(--rv-success);
    border-color: var(--rv-success-border-strong);
}

/* ── Feature bullet list ─────────────────────── */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--rv-text-body);
    line-height: 1.6;
}

.feature-list li .fi {
    color: var(--rv-yellow);
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.9rem;
}

.feature-list li .fi-check {
    color: var(--rv-success);
}

/* ── Section divider with label ──────────────── */
.section-rule {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 3rem 0 2rem;
}

.section-rule::before,
.section-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rv-border-subtle);
}

.section-rule-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rv-text-tertiary);
    white-space: nowrap;
}

.step-block {
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
    position: relative;
}

.step-block:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 44px;
    bottom: 0;
    width: 1px;
    background: var(--rv-border-subtle);
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rv-font-sans);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: var(--rv-yellow-dim);
    color: var(--rv-yellow);
    border: 1px solid var(--rv-yellow-shadow);
}

.step-content { padding-top: 6px; }

.step-title {
    font-family: var(--rv-font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--rv-text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.step-desc {
    font-size: 0.92rem;
    color: var(--rv-text-secondary);
    line-height: 1.75;
    font-weight: 400;
    margin-bottom: 12px;
}

.step-link {
    font-size: 0.85rem;
    color: var(--rv-yellow);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity var(--rv-duration-fast) var(--rv-ease);
}
.step-link:hover { opacity: 0.8; color: var(--rv-yellow); text-decoration: none; }


/* ═══════════════════════════════════════════════
   10. CHAT DEMO CARD
═══════════════════════════════════════════════ */

.chat-demo-card {
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-lg);
    padding: 1.5rem;
    position: relative;
}

.chat-demo-label {
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rv-text-tertiary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
}

.chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.avatar-user {
    background: var(--rv-yellow-dim);
    color: var(--rv-yellow);
    border: 1px solid var(--rv-yellow-border);
}
.avatar-ai {
    background: var(--rv-success-dim);
    color: var(--rv-success);
    border: 1px solid var(--rv-success-border-mid);
}

.chat-bubble {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--rv-text-primary);
    background: var(--rv-bg-elevated);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    padding: 10px 14px;
    max-width: 440px;
}

.result-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.result-chip {
    font-size: 0.78rem;
    background: var(--rv-success-dim);
    color: var(--rv-success);
    border: 1px solid var(--rv-success-border);
    border-radius: var(--rv-radius-sm);
    padding: 3px 10px;
    font-family: var(--rv-font-mono);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════
   11. QUERY / EXAMPLE CARDS
═══════════════════════════════════════════════ */

.query-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.query-card {
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    padding: 12px 16px;
    font-size: 0.88rem;
    color: var(--rv-text-secondary);
    line-height: 1.55;
    font-style: italic;
    font-weight: 300;
    position: relative;
    transition: border-color var(--rv-duration-base) var(--rv-ease),
    transform    var(--rv-duration-base) var(--rv-ease);
}
.query-card:hover { border-color: var(--rv-border-mid); transform: translateY(-2px); }

.query-card::before {
    content: '"';
    font-family: var(--rv-font-sans);
    font-size: 1.5rem;
    font-weight: 800;
    font-style: normal;
    color: var(--rv-yellow);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════
   12. CODE SNIPPETS
═══════════════════════════════════════════════ */

.code-snippet {
    background: var(--rv-code-bg);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    padding: 1rem 1.25rem;
    font-family: var(--rv-font-mono);
    font-size: 0.80rem;
    line-height: 1.85;
    margin-bottom: 10px;
    overflow-x: auto;
}

.code-comment { color: var(--rv-code-comment); }
.code-key     { color: var(--rv-code-key); }
.code-str     { color: var(--rv-code-str); }
.code-punc    { color: var(--rv-code-punc); }


/* ═══════════════════════════════════════════════
   13. IBAN BLOCKS
═══════════════════════════════════════════════ */

.ibanBlock,
.ibanBlock:hover,
.ibanBlock:active,
.ibanBlock:visited {
    text-decoration: none !important;
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    padding: 12px 16px;
    transition: border-color var(--rv-duration-base) var(--rv-ease);
    /* IBANs are technical strings — always monospaced */
    font-family: var(--rv-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}
.ibanBlock:hover { border-color: var(--rv-border-mid); }

.ibanBlockSelected { border-color: var(--rv-border-accent) !important; }

.ibanBlockContent h5 {
    color: var(--rv-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-family: var(--rv-font-sans);
}
.ibanBlockContent p {
    color: var(--rv-text-body);
    font-size: 0.88rem;
    font-family: var(--rv-font-mono);
    font-variant-numeric: tabular-nums;
}

.IbanBlockLight { background: var(--rv-bg-overlay) !important; }

@media (min-width: 768px) {
    .ibanBlock,
    .ibanBlock:hover,
    .ibanBlock:active,
    .ibanBlock:visited {
        border-radius: var(--rv-radius-lg);
        margin: 8px;
        padding: 16px 20px;
    }
}


/* ═══════════════════════════════════════════════
   14. STATEMENT BLOCKS
═══════════════════════════════════════════════ */

.statementBlockLink { text-decoration: none !important; }

.statementBlock {
    padding: 12px 16px;
    margin: 0 8px 10px;
    border-radius: var(--rv-radius-sm);
    color: var(--rv-text-primary);
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    transition: border-color var(--rv-duration-base) var(--rv-ease);
    font-variant-numeric: tabular-nums;
}
.statementBlock:hover { border-color: var(--rv-border-mid); }

.statementBlockSelected { border-color: var(--rv-border-accent) !important; }

.parentStatementBlock { background: var(--rv-bg-elevated); }


/* ═══════════════════════════════════════════════
   15. TYPOGRAPHY UTILITIES
═══════════════════════════════════════════════ */

.text-yellow    { color: var(--rv-yellow) !important; }
.text-orange    { color: var(--rv-danger) !important; }
.text-black     { color: var(--rv-pure-black) !important; }
.text-light     { color: var(--rv-text-primary) !important; }
.text-lgreen    { color: var(--rv-info) !important; }
.text-green     { color: var(--rv-success) !important; }
.text-red       { color: var(--rv-danger) !important; }
.text-white     { color: var(--rv-text-primary) !important; }
.text-white-low { color: var(--rv-text-secondary) !important; }

/* Monospace text — for IBANs, amounts, refs inline */
.text-mono {
    font-family: var(--rv-font-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.BigText {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--rv-text-primary);
}

.NotThatBigText {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rv-text-primary);
}


/* ═══════════════════════════════════════════════
   16. SPACING UTILITIES
═══════════════════════════════════════════════ */

.Zone90  { min-height: 90vh; }
.Zone75  { min-height: 75vh; }
.Zone30  { min-height: 30vh; }
.Zone10  { min-height: 10vh; }

.AddAir            { margin-top: 6vh; }
.AddBigAir         { margin-top: 15vh; }
.AddLittleAir      { margin-top: 5vh; }
.AddVeryLittleAir  { margin-top: 10px; }
.AddAirBelow       { margin-bottom: 5vh; }
.AddLittleAirBelow { margin-bottom: 2vh; }

@media (min-width: 768px) {
    .Zone90  { height: 90vh; }
    .Zone75  { height: 75vh; }
    .Zone30  { height: 30vh; }
    .AddAir            { margin-top: 10vh; }
    .AddBigAir         { margin-top: 33vh; }
    .AddLittleAir      { margin-top: 1vh; }
    .AddAirBelow       { margin-bottom: 5vh; }
    .AddLittleAirBelow { margin-bottom: 2vh; }
}

@media (min-width: 1500px) {
    .Zone90  { height: 90vh; }
    .Zone75  { height: 75vh; }
    .Zone30  { height: 30vh; }
    .BigText        { font-size: 4.8rem; }
    .NotThatBigText { font-size: 2.4rem; }
    .AddAir         { margin-top: 10vh; }
    .AddBigAir      { margin-top: 33vh; }
    .AddLittleAir   { margin-top: 1vh; }
}


/* ═══════════════════════════════════════════════
   17. BORDERS, SHADOWS & MISC
═══════════════════════════════════════════════ */

.border-top    { border-top:    1px solid var(--rv-border-subtle) !important; }
.border-bottom { border-bottom: 1px solid var(--rv-border-subtle) !important; }
.box-shadow    { box-shadow: var(--rv-shadow-card); }


/* ═══════════════════════════════════════════════
   18. FOOTER
═══════════════════════════════════════════════ */

.footer, footer {
    border-top: 1px solid var(--rv-border-subtle);
    background: var(--rv-bg-root);
    color: var(--rv-text-tertiary);
    font-size: 0.85rem;
}
.footer a, footer a {
    color: var(--rv-text-secondary);
    transition: color var(--rv-duration-fast) var(--rv-ease);
}
.footer a:hover, footer a:hover { color: var(--rv-text-primary); }

@media (min-width: 768px) { .footer { margin-top: 20vh; } }


/* ═══════════════════════════════════════════════
   19. ACCORDION (FAQ)
═══════════════════════════════════════════════ */

.accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-item {
    background: var(--rv-bg-elevated);
    border: 1px solid var(--rv-border-mid) !important;
    border-radius: var(--rv-radius-md) !important;
    overflow: hidden;
    transition: border-color var(--rv-duration-base) var(--rv-ease);
}

.accordion-item:hover {
    border-color: var(--rv-border-strong) !important;
}

/* Open item — yellow left accent */
.accordion-item:has(.accordion-collapse.show) {
    border-color: var(--rv-border-accent) !important;
    border-left: 3px solid var(--rv-yellow) !important;
}

.accordion-button {
    background: var(--rv-bg-elevated) !important;
    color: var(--rv-text-primary) !important;
    font-family: var(--rv-font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 20px 24px;
    border: none !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: var(--rv-bg-elevated) !important;
    color: var(--rv-yellow) !important;
    box-shadow: none !important;
}

/* Replace Bootstrap's default dark chevron with a light one */
.accordion-button::after {
    filter: invert(1) brightness(0.6);
}

.accordion-button:not(.collapsed)::after {
    filter: invert(1) brightness(1) sepia(1) saturate(4) hue-rotate(5deg);
}

.accordion-button:focus {
    box-shadow: none !important;
    outline: none;
}

.accordion-body {
    background: var(--rv-bg-elevated);
    color: var(--rv-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 0 24px 24px;
    border-top: 1px solid var(--rv-border-subtle);
}

.accordion-body a {
    color: var(--rv-yellow);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* FAQ category heading */
.faq-category {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
}

.faq-category:first-of-type {
    margin-top: 0;
}

.faq-category-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--rv-yellow);
    margin: 0;
    line-height: 1;
}

.faq-category-line {
    flex: 1;
    height: 1px;
    background: var(--rv-border-subtle);
}

/* ═══════════════════════════════════════════════
   20. BADGES & UTILITY COMPONENTS
═══════════════════════════════════════════════ */

.rv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: var(--rv-radius-pill);
}
.rv-badge-yellow  { background: var(--rv-yellow-dim);   color: var(--rv-yellow);  border: 1px solid var(--rv-yellow-border); }
.rv-badge-green   { background: var(--rv-success-dim);  color: var(--rv-success); border: 1px solid var(--rv-success-border-mid); }
.rv-badge-red     { background: var(--rv-danger-dim);   color: var(--rv-danger);  border: 1px solid var(--rv-danger-dim); }
.rv-badge-neutral { background: var(--rv-bg-overlay);   color: var(--rv-text-secondary); border: 1px solid var(--rv-border-mid); }

/* Card hover lift */
.rv-lift {
    transition: transform   var(--rv-duration-base) var(--rv-ease),
    box-shadow  var(--rv-duration-base) var(--rv-ease);
}
.rv-lift:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-elevated); }

/* Gradient text — hero accent words */
.rv-gradient-text {
    background: linear-gradient(90deg, var(--rv-yellow) 0%, var(--rv-yellow-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--rv-bg-root); }
::-webkit-scrollbar-thumb  { background: var(--rv-border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rv-border-strong); }


/* ═══════════════════════════════════════════════
   21. COUNTRY LIST COMPONENTS
═══════════════════════════════════════════════ */


.rv-country-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    border-radius: var(--rv-radius-md);
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    color: var(--rv-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--rv-duration-fast) var(--rv-ease),
    color        var(--rv-duration-fast) var(--rv-ease),
    transform    var(--rv-duration-fast) var(--rv-ease);
    min-height: 44px;
}
.rv-country-pill:hover {
    border-color: var(--rv-border-accent);
    color: var(--rv-yellow);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════
   BANK DIRECTORY — breadcrumb, bank cards, detail
═══════════════════════════════════════════════ */

/* Breadcrumb */
.rv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--rv-text-secondary);
    flex-wrap: wrap;
}
.rv-breadcrumb a {
    color: var(--rv-text-secondary);
    text-decoration: none;
    transition: color var(--rv-duration-fast) var(--rv-ease);
}
.rv-breadcrumb a:hover { color: var(--rv-yellow); }
.rv-breadcrumb span:last-child { color: var(--rv-text-primary); }
.rv-breadcrumb-sep { color: var(--rv-text-tertiary); }

/* Bank card (bank list view) */
.rv-bank-card {
    background: var(--rv-bg-surface);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--rv-text-primary);
    transition: border-color var(--rv-duration-base) var(--rv-ease),
    transform    var(--rv-duration-base) var(--rv-ease),
    box-shadow   var(--rv-duration-base) var(--rv-ease);
}
.rv-bank-card:hover {
    border-color: var(--rv-border-accent);
    color: var(--rv-text-primary);
}
.rv-bank-card-logo {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rv-bank-card-logo img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
}
.rv-bank-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    color: var(--rv-text-secondary);
    line-height: 1.3;
}

/* Bank detail — hero block */
.rv-bank-detail-hero {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.rv-bank-detail-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: var(--rv-bg-elevated);
    border: 1px solid var(--rv-border-subtle);
    border-radius: var(--rv-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.rv-bank-detail-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.rv-bank-detail-name {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--rv-text-primary);
    margin: 0 0 4px;
}
.rv-bank-detail-country {
    font-size: 0.9rem;
    color: var(--rv-text-secondary);
    margin: 0 0 10px;
}
.rv-bank-detail-bics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* MCP callout */
.rv-mcp-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--rv-yellow-dim);
    border: 1px solid var(--rv-yellow-border-soft);
    border-radius: var(--rv-radius-md);
    padding: 16px 20px;
}
.rv-mcp-icon {
    font-size: 1.4rem;
    color: var(--rv-yellow);
    flex-shrink: 0;
    margin-top: 2px;
}
.rv-mcp-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rv-yellow);
    margin-bottom: 4px;
}
.rv-mcp-desc {
    font-size: 0.875rem;
    color: var(--rv-text-secondary);
    line-height: 1.5;
}
.rv-mcp-desc code {
    background: var(--rv-yellow-focus);
    color: var(--rv-yellow);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* Capability rows (inside rv-glass-card) */
.rv-cap-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rv-text-tertiary);
    margin-bottom: 14px;
}
.rv-cap-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rv-border-subtle);
}
.rv-cap-row:last-child { border-bottom: none; }
.rv-cap-key {
    font-size: 0.82rem;
    color: var(--rv-text-secondary);
    flex-shrink: 0;
    width: 130px;
}
.rv-cap-val {
    font-size: 0.875rem;
    color: var(--rv-text-primary);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.rv-cap-badges { gap: 6px; }

/* ── Hero: badge, example questions, trust bar ── */
.badge-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500;
    background: var(--rv-ui-badge-bg); color: var(--rv-ui-badge-color);
    padding: 4px 12px; border-radius: 99px; margin-bottom: 1.5rem;
}
.badge-live .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--rv-ui-badge-dot); display: inline-block;
}
.example-questions { margin-bottom: 1.5rem; }
.example-q {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--rv-ui-eq-color);
    background: var(--rv-ui-eq-bg); border-radius: 8px;
    padding: 6px 12px; margin: 0 6px 6px 0;
}
.example-q .arrow { color: var(--rv-ui-eq-arrow); font-size: 11px; }
.trust-bar {
    display: flex; flex-wrap: wrap;
    border: 0.5px solid var(--rv-ui-trust-border); border-radius: 12px;
    overflow: hidden; margin: 1.5rem 0;
}
.trust-item {
    flex: 1 1 160px; display: flex; align-items: flex-start;
    gap: 10px; padding: 14px 16px;
    border-right: 0.5px solid var(--rv-ui-trust-border);
}
.trust-item:last-child { border-right: none; }
.trust-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-icon--green { background: var(--rv-ui-trust-icon-green); }
.trust-icon--blue  { background: var(--rv-ui-trust-icon-blue); }
.trust-icon--teal  { background: var(--rv-ui-trust-icon-green); }
.trust-icon--gray  { background: var(--rv-ui-trust-icon-gray); }
.trust-icon--amber { background: var(--rv-ui-trust-icon-amber); }
.trust-label { font-size: 13px; font-weight: 500; margin: 0 0 2px; }
.trust-desc  { font-size: 12px; color: var(--rv-ui-trust-desc); line-height: 1.5; margin: 0; }
@media (max-width: 640px) {
    .trust-item { flex-basis: 100%; border-right: none; border-bottom: 0.5px solid var(--rv-ui-trust-border); }
    .trust-item:last-child { border-bottom: none; }
}