:root { --bx-bg-primary: #191A1E; --bx-bg-surface:#313447; --bx-accent-purple:#A183E0; --bx-violet-primary:   #4E1FA3; --bx-violet-electric:  #661EB9; --bx-highlight-yellow: #F5D255; --bx-accent-cyan:  #36E7C4; --bx-white: #FFFFFF; --bx-text-body: rgba(210, 218, 235, 0.82); --bx-text-secondary:   rgba(214, 220, 235, 0.72); --bx-text-muted:rgba(161, 131, 224, 0.5); --bx-border-card:  rgba(161, 131, 224, 0.18); --bx-border-row:rgba(161, 131, 224, 0.07); --bx-grad-text: linear-gradient(90deg, #36E7C4 0%, #A183E0 50%, #661EB9 100%); --bx-grad-primary: linear-gradient(135deg, #4E1FA3 0%, #661EB9 100%); --bx-grad-brand:linear-gradient(135deg, #36E7C4 0%, #661EB9 100%); --bx-grad-secondary:   linear-gradient(135deg, #F5D255 0%, #36E7C4 100%); --bx-font-primary: 'Exo 2', sans-serif; --bx-font-secondary:   'Epilogue', sans-serif; }
.bx-table-wrap { background: rgba(49, 52, 71, 0.32); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--bx-border-card); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 48px rgba(102, 30, 185, 0.13), 0 1px 4px rgba(0,0,0,0.45); }
/* Gradient top accent line */
.bx-table-wrap::before { content: ''; display: block; height: 2px; background: var(--bx-grad-secondary); }
.bx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ================================================================ TABLE BASE — shared ================================================================ */
.bx-table { width: 100%; border-collapse: collapse; font-family: var(--bx-font-secondary); font-size: 0.875rem; table-layout: auto; }
/* THEAD */
.bx-table thead tr { background: linear-gradient(135deg, rgba(78,31,163,0.55) 0%, rgba(102,30,185,0.45) 100%); border-bottom: 1px solid rgba(54, 231, 196, 0.22); }
.bx-table thead th { font-family: var(--bx-font-primary); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bx-white); padding: 18px 20px; text-align: center; border: none; width: 1%; }
.bx-table thead th:first-child { color: var(--bx-accent-cyan); text-align: left; width: auto; }
/* TBODY */
.bx-table tbody tr { border-bottom: 1px solid var(--bx-border-row); transition: background 0.18s ease; }
.bx-table tbody tr:last-child { border-bottom: none; }
.bx-table tbody tr:hover { background: rgba(161, 131, 224, 0.055); }
.bx-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.016); }
.bx-table tbody tr:nth-child(even):hover { background: rgba(161, 131, 224, 0.065); }
.bx-table tbody td { padding: 16px 20px; color: var(--bx-text-body); vertical-align: middle; border: none; line-height: 1.55; text-align: center; width: 1%; }
.bx-table tbody td:first-child { font-family: var(--bx-font-primary); font-size: 0.82rem; font-weight: 700; color: var(--bx-white); letter-spacing: 0.03em; text-align: left; width: auto; border-right: 1px solid rgba(161, 131, 224, 0.09); }
.bx-table tbody td + td { border-left: 1px solid rgba(161, 131, 224, 0.05); }
/* ================================================================ BADGES ================================================================ */
.bx-badge { display: inline-block; font-family: var(--bx-font-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 100px; padding: 3px 11px; white-space: nowrap; }
.bx-badge--high { background: rgba(54, 231, 196, 0.1); color: var(--bx-accent-cyan); border: 1px solid rgba(54, 231, 196, 0.22); }
.bx-badge--low { background: rgba(245, 210, 85, 0.08); color: var(--bx-highlight-yellow); border: 1px solid rgba(245, 210, 85, 0.2); }
.bx-badge--med { background: rgba(161, 131, 224, 0.1); color: var(--bx-accent-purple); border: 1px solid rgba(161, 131, 224, 0.22); }
.bx-badge--vhigh { background: rgba(102, 30, 185, 0.18); color: #c8a8f5; border: 1px solid rgba(102, 30, 185, 0.35); }
/* ================================================================ SECTION 1 — EXCHANGE (full width table, v1 style) ================================================================ */
.bx-section--exchange { background-color: var(--bx-bg-primary); }
.bx-glow--exc-cyan { width: 520px; height: 520px; background: radial-gradient(circle, rgba(54,231,196,0.065) 0%, transparent 68%); top: -80px; right: -100px; }
.bx-glow--exc-purple { width: 420px; height: 420px; background: radial-gradient(circle, rgba(161,131,224,0.08) 0%, transparent 68%); bottom: -60px; left: -80px; }
/* Section 1 table — full width, left-aligned data cells */
.bx-table--exchange { min-width: 680px; }
.bx-table--exchange tbody td { text-align: left; width: auto; }
.bx-table--exchange thead th { text-align: left; width: auto; }
/* ================================================================ SECTION 2 — COST (content-width table, v2 style) ================================================================ */
.bx-section--cost { background: linear-gradient(160deg, #13102b 0%, #1c1430 45%, #191A1E 100%); }
.bx-glow--cost-violet { width: 600px; height: 600px; background: radial-gradient(circle, rgba(78,31,163,0.2) 0%, transparent 62%); bottom: -100px; left: -120px; }
.bx-glow--cost-cyan { width: 360px; height: 360px; background: radial-gradient(circle, rgba(54,231,196,0.065) 0%, transparent 65%); top: 40px; right: -60px; }
/* Dot-grid */
.bx-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(161, 131, 224, 0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(161, 131, 224, 0.032) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); }
/* Content-width centering wrapper */
.bx-table-wrap--cost-outer { display: flex; justify-content: start; width:100%; }
.bx-table-wrap--cost { display: inline-block; width: 100%; }
/* Cost table specific overrides */
.bx-table--cost { width: auto; }
.bx-table--cost thead th:first-child, .bx-table--cost tbody td:first-child { padding-right: 60px; }
.bx-table--cost thead th:last-child, .bx-table--cost tbody td:last-child { padding-left: 60px; padding-right: 60px; }
/* Cost range gradient text */
.bx-cost-range { font-family: var(--bx-font-primary); font-weight: 800; font-size: 0.9rem; background: var(--bx-grad-secondary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; }
/* Progress bar */
.bx-cost-bar-wrap { display: flex; align-items: center; gap: 16px; justify-content: center; }
.bx-cost-bar { width: 88px; height: 4px; background: rgba(161,131,224,0.1); border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.bx-cost-bar__fill { height: 100%; border-radius: 100px; background: var(--bx-grad-secondary); }
/* ================================================================ RESPONSIVE ================================================================ */
@media (max-width: 767.98px) {
  .bx-section { padding-left: 20px; padding-right: 20px; }
  .bx-table { font-size: 0.8rem; }
  .bx-table thead th, .bx-table tbody td { padding: 12px 14px; }
  .bx-table--cost thead th:first-child,
  .bx-table--cost tbody td:first-child,
  .bx-table--cost thead th:last-child,
  .bx-table--cost tbody td:last-child { padding-left: 14px; padding-right: 14px; }
  .bx-cost-bar { display: none; }
}
:focus-visible { outline: 2px solid var(--bx-accent-cyan); outline-offset: 3px; }
.cta-card { background: #111111; border: 0.5px solid #1e1e1e; border-radius: 16px; padding: 2.5rem 2rem; text-align: center; position: relative; overflow: hidden; }
.cta-card::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 480px; height: 200px; background: radial-gradient(ellipse, rgba(78,31,163,0.45) 0%, transparent 70%); pointer-events: none; }
.cta-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(54,231,196,0.08); border: 0.5px solid rgba(54,231,196,0.4); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 500; color: #36e7c4; margin-bottom: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; position: relative; }
.cta-heading { font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 800; color: #d9d9d9; margin: 0 0 0.75rem; line-height: 1.25; position: relative; }
.cta-heading span { color: #f5d255; }
.cta-sub { font-size: 15px; color: #888; line-height: 1.65; position: relative; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; position: relative; }
.btn-primary { background: #36e7c4; color: #0d0d0d; border: none; padding: 12px 28px; border-radius: 8px; font-family: 'Exo 2', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: opacity 0.15s; }
.btn-primary:hover { opacity: 0.88; }
.btn-ghost { background: transparent; color: #f5d255; border: 0.5px solid rgba(245,210,85,0.5); padding: 12px 28px; border-radius: 8px; font-family: 'Exo 2', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s; }
.btn-ghost:hover { background: rgba(245,210,85,0.08); }
.divider { border: none; border-top: 0.5px solid #222; margin: 0 0 1.5rem; position: relative; }
.trust-row { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; position: relative; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trust-num { font-family: 'Exo 2', sans-serif; font-size: 20px; font-weight: 800; color: #f5d255; }
.trust-label { font-size: 12px; color: #555; text-align: center; }
.trust-dot { width: 1px; height: 32px; background: #222; align-self: center; }
.features-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 1.75rem; position: relative; }
.feature-chip { background: rgba(78,31,163,0.2); border: 0.5px solid rgba(78,31,163,0.5); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d9d9d9; font-weight: 400; }
.feature-chip i { color: #36e7c4; font-size: 16px; }