/* ═══════════════════════════════════════════  
 CAPITAL EQUITY — MASTER STYLESHEET  
 Author: Capital Equity Design System  
 Version: 1.0.0  
═══════════════════════════════════════════ */

/* ── 1. CSS VARIABLES (Design Tokens) ── */  
:root {  
 /* Colors */  
 --clr-bg: #080c14;  
 --clr-bg-2: #0d1422;  
 --clr-bg-3: #111827;  
 --clr-surface: #141d2e;  
 --clr-surface-2: #1a2540;  
 --clr-border: rgba(255,255,255,0.07);  
 --clr-border-2: rgba(255,255,255,0.12);

 --clr-gold: #c9a84c;  
 --clr-gold-light: #e0c06a;  
 --clr-gold-dark: #a07830;  
 --clr-gold-glow: rgba(201,168,76,0.18);

 --clr-green: #22c55e;  
 --clr-green-dim: rgba(34,197,94,0.12);  
 --clr-red: #ef4444;  
 --clr-red-dim: rgba(239,68,68,0.12);

 --clr-blue: #3b82f6;  
 --clr-blue-dim: rgba(59,130,246,0.12);  
 --clr-purple: #8b5cf6;

 --clr-text: #f1f5f9;  
 --clr-text-2: #94a3b8;  
 --clr-text-3: #64748b;  
 --clr-white: #ffffff;

 /* Typography */  
 --font-body: 'Inter', sans-serif;  
 --font-heading: 'Manrope', sans-serif;  
 --font-mono: 'DM Mono', monospace;

 --text-xs: 0.75rem;  
 --text-sm: 0.875rem;  
 --text-base: 1rem;  
 --text-lg: 1.125rem;  
 --text-xl: 1.25rem;  
 --text-2xl: 1.5rem;  
 --text-3xl: 1.875rem;  
 --text-4xl: 2.25rem;  
 --text-5xl: 3rem;  
 --text-6xl: 3.75rem;

 /* Spacing */  
 --space-1: 0.25rem;  
 --space-2: 0.5rem;  
 --space-3: 0.75rem;  
 --space-4: 1rem;  
 --space-5: 1.25rem;  
 --space-6: 1.5rem;  
 --space-8: 2rem;  
 --space-10: 2.5rem;  
 --space-12: 3rem;  
 --space-16: 4rem;  
 --space-20: 5rem;  
 --space-24: 6rem;

 /* Borders */  
 --radius-sm: 6px;  
 --radius-md: 10px;  
 --radius-lg: 16px;  
 --radius-xl: 24px;

 /* Shadows */  
 --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);  
 --shadow-md: 0 4px 16px rgba(0,0,0,0.5);  
 --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);  
 --shadow-gold: 0 0 24px rgba(201,168,76,0.25);

 /* Transitions */  
 --transition-fast: 150ms ease;  
 --transition-base: 250ms ease;  
 --transition-slow: 400ms ease;

 /* Nav */  
 --nav-height: 72px;  
 --ticker-height: 36px;  
}

/* ── 2. RESET & BASE ── */  
*, *::before, *::after {  
 box-sizing: border-box;  
 margin: 0;  
 padding: 0;  
}

html {  
 scroll-behavior: smooth;  
 -webkit-text-size-adjust: 100%;  
 font-size: 16px;  
}

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

body {  
 font-family: var(--font-body);  
 background-color: var(--clr-bg);  
 color: var(--clr-text);  
 line-height: 1.65;  
 overflow-x: hidden;  
 -webkit-font-smoothing: antialiased;  
 -moz-osx-font-smoothing: grayscale;  
}

img, video { max-width: 100%; height: auto; display: block; }  
a { color: inherit; text-decoration: none; }  
ul, ol { list-style: none; }  
button { cursor: pointer; border: none; background: none; font-family: inherit; }  
input, textarea, select {  
 font-family: inherit;  
 font-size: inherit;  
 color: inherit;  
}  
.sr-only {  
 position: absolute;  
 width: 1px; height: 1px;  
 padding: 0; margin: -1px;  
 overflow: hidden;  
 clip: rect(0,0,0,0);  
 white-space: nowrap;  
 border: 0;  
}

/* ── 3. TYPOGRAPHY ── */  
h1, h2, h3, h4, h5, h6 {  
 font-family: var(--font-heading);  
 font-weight: 700;  
 line-height: 1.2;  
 color: var(--clr-white);  
}  
h1 { font-size: clamp(2.2rem, 5vw, var(--text-6xl)); }  
h2 { font-size: clamp(1.75rem, 3.5vw, var(--text-4xl)); }  
h3 { font-size: clamp(1.1rem, 2vw, var(--text-2xl)); }  
p { color: var(--clr-text-2); }  
.text-gold { color: var(--clr-gold); }  
.text-green { color: var(--clr-green); }  
.text-red { color: var(--clr-red); }  
.text-muted { color: var(--clr-text-3); }  
.text-muted-sm { color: var(--clr-text-3); font-size: var(--text-sm); }

/* ── 4. LAYOUT ── */  
.container {  
 width: 100%;  
 max-width: 1280px;  
 margin: 0 auto;  
 padding: 0 var(--space-6);  
}  
.section-pad {  
 padding: var(--space-24) 0;  
}

/* ── 5. SECTION HEADERS ── */  
.section-header {  
 text-align: center;  
 margin-bottom: var(--space-12);  
}  
.section-tag {  
 display: inline-block;  
 font-size: var(--text-xs);  
 font-weight: 600;  
 letter-spacing: 0.12em;  
 text-transform: uppercase;  
 color: var(--clr-gold);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.3);  
 padding: var(--space-1) var(--space-4);  
 border-radius: 100px;  
 margin-bottom: var(--space-4);  
}  
.section-title {  
 font-size: clamp(1.75rem, 3.5vw, var(--text-4xl));  
 font-family: var(--font-heading);  
 color: var(--clr-white);  
 margin-bottom: var(--space-4);  
}  
.section-desc {  
 font-size: var(--text-lg);  
 color: var(--clr-text-2);  
 max-width: 600px;  
 margin: 0 auto;  
}  
.demo-badge {  
 display: inline-block;  
 margin-top: var(--space-3);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-gold);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.25);  
 border-radius: 6px;  
 padding: 3px 10px;  
}

/* ── 6. BUTTONS ── */  
.btn {  
 display: inline-flex;  
 align-items: center;  
 justify-content: center;  
 gap: var(--space-2);  
 padding: 0.65rem 1.5rem;  
 border-radius: var(--radius-md);  
 font-family: var(--font-body);  
 font-weight: 600;  
 font-size: var(--text-sm);  
 transition: all var(--transition-base);  
 position: relative;  
 overflow: hidden;  
 cursor: pointer;  
 white-space: nowrap;  
 letter-spacing: 0.02em;  
}  
.btn::after {  
 content: '';  
 position: absolute;  
 inset: 0;  
 background: rgba(255,255,255,0);  
 transition: background var(--transition-fast);  
}  
.btn:hover::after { background: rgba(255,255,255,0.06); }  
.btn:focus-visible {  
 outline: 2px solid var(--clr-gold);  
 outline-offset: 3px;  
}

/* Gold button */  
.btn-gold {  
 background: linear-gradient(135deg, var(--clr-gold) 0%, var(--clr-gold-dark) 100%);  
 color: #0a0a0a;  
 box-shadow: 0 4px 14px rgba(201,168,76,0.35);  
}  
.btn-gold:hover {  
 background: linear-gradient(135deg, var(--clr-gold-light) 0%, var(--clr-gold) 100%);  
 box-shadow: 0 6px 20px rgba(201,168,76,0.5);  
 transform: translateY(-1px);  
}

/* Ghost / outline */  
.btn-ghost {  
 background: rgba(255,255,255,0.06);  
 color: var(--clr-text);  
 border: 1px solid var(--clr-border-2);  
}  
.btn-ghost:hover {  
 background: rgba(255,255,255,0.1);  
 border-color: rgba(255,255,255,0.2);  
 transform: translateY(-1px);  
}  
.btn-outline {  
 background: transparent;  
 color: var(--clr-gold);  
 border: 1px solid var(--clr-gold);  
}  
.btn-outline:hover {  
 background: var(--clr-gold-glow);  
 transform: translateY(-1px);  
}

/* Sizes */  
.btn-sm { padding: 0.45rem 1rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }  
.btn-lg { padding: 0.85rem 2rem; font-size: var(--text-base); }  
.btn-full { width: 100%; }

/* ── 7. TICKER BAR ── */  
.ticker-bar {  
 height: var(--ticker-height);  
 background: var(--clr-surface);  
 border-bottom: 1px solid var(--clr-border);  
 display: flex;  
 align-items: center;  
 overflow: hidden;  
 position: sticky;  
 top: 0;  
 z-index: 1000;  
 gap: 0;  
}  
.ticker-label {  
 flex-shrink: 0;  
 padding: 0 var(--space-4);  
 font-size: 10px;  
 font-weight: 700;  
 letter-spacing: 0.14em;  
 color: var(--clr-gold);  
 text-transform: uppercase;  
 border-right: 1px solid var(--clr-border);  
 white-space: nowrap;  
 height: 100%;  
 display: flex;  
 align-items: center;  
}  
.ticker-scroll-wrapper {  
 flex: 1;  
 overflow: hidden;  
 position: relative;  
}  
.ticker-track {  
 display: flex;  
 align-items: center;  
 gap: 0;  
 animation: tickerScroll 40s linear infinite;  
 will-change: transform;  
 white-space: nowrap;  
}  
.ticker-track:hover { animation-play-state: paused; }  
@keyframes tickerScroll {  
 0% { transform: translateX(0); }  
 100% { transform: translateX(-50%); }  
}  
.ticker-item {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 padding: 0 var(--space-6);  
 font-size: var(--text-xs);  
 font-family: var(--font-mono);  
 border-right: 1px solid var(--clr-border);  
 white-space: nowrap;  
 height: var(--ticker-height);  
}  
.ticker-pair { font-weight: 600; color: var(--clr-text); }  
.ticker-price { color: var(--clr-text-2); }  
.ticker-change.up { color: var(--clr-green); }  
.ticker-change.down { color: var(--clr-red); }

/* ── 8. NAVIGATION ── */  
.nav-header {  
 position: sticky;  
 top: var(--ticker-height);  
 z-index: 999;  
 background: rgba(8,12,20,0.92);  
 backdrop-filter: blur(16px);  
 -webkit-backdrop-filter: blur(16px);  
 border-bottom: 1px solid var(--clr-border);  
 transition: background var(--transition-base);  
}  
.nav-header.scrolled {  
 background: rgba(8,12,20,0.98);  
 box-shadow: 0 4px 24px rgba(0,0,0,0.5);  
}  
.nav-container {  
 max-width: 1280px;  
 margin: 0 auto;  
 padding: 0 var(--space-6);  
 height: var(--nav-height);  
 display: flex;  
 align-items: center;  
 gap: var(--space-8);  
}  
.nav-logo { flex-shrink: 0; }  
.nav-logo img { height: 40px; width: auto; }

.nav-links {  
 display: flex;  
 align-items: center;  
 gap: var(--space-1);  
 flex: 1;  
}  
.nav-link {  
 font-size: var(--text-sm);  
 font-weight: 500;  
 color: var(--clr-text-2);  
 padding: var(--space-2) var(--space-3);  
 border-radius: var(--radius-sm);  
 transition: all var(--transition-fast);  
 position: relative;  
}  
.nav-link::after {  
 content: '';  
 position: absolute;  
 bottom: -2px;  
 left: 50%;  
 transform: translateX(-50%) scaleX(0);  
 width: 70%;  
 height: 2px;  
 background: var(--clr-gold);  
 border-radius: 2px;  
 transition: transform var(--transition-base);  
}  
.nav-link:hover,  
.nav-link.active {  
 color: var(--clr-white);  
 background: rgba(255,255,255,0.05);  
}  
.nav-link.active::after,  
.nav-link:hover::after {  
 transform: translateX(-50%) scaleX(1);  
}

.nav-actions {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 flex-shrink: 0;  
}  
.hamburger {  
 display: none;  
 flex-direction: column;  
 justify-content: center;  
 align-items: center;  
 gap: 5px;  
 width: 40px;  
 height: 40px;  
 border-radius: var(--radius-sm);  
 background: rgba(255,255,255,0.05);  
 border: 1px solid var(--clr-border);  
 flex-shrink: 0;  
}  
.hamburger span {  
 display: block;  
 width: 20px;  
 height: 2px;  
 background: var(--clr-text);  
 border-radius: 2px;  
 transition: all var(--transition-base);  
}  
.hamburger[aria-expanded="true"] span:nth-child(1) {  
 transform: translateY(7px) rotate(45deg);  
}  
.hamburger[aria-expanded="true"] span:nth-child(2) {  
 opacity: 0;  
}  
.hamburger[aria-expanded="true"] span:nth-child(3) {  
 transform: translateY(-7px) rotate(-45deg);  
}

/* Mobile menu */  
.mobile-menu {  
 position: fixed;  
 top: 0;  
 right: 0;  
 height: 100dvh;  
 width: min(340px, 85vw);  
 background: var(--clr-bg-2);  
 border-left: 1px solid var(--clr-border);  
 z-index: 2000;  
 transform: translateX(100%);  
 transition: transform var(--transition-slow) cubic-bezier(0.25,0.46,0.45,0.94);  
 overflow-y: auto;  
}  
.mobile-menu.open {  
 transform: translateX(0);  
}  
.mobile-menu-inner {  
 padding: var(--space-6);  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-6);  
 min-height: 100%;  
}  
.mobile-menu-logo {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
}  
.mobile-close {  
 width: 36px;  
 height: 36px;  
 border-radius: var(--radius-sm);  
 background: rgba(255,255,255,0.05);  
 border: 1px solid var(--clr-border);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 color: var(--clr-text);  
 font-size: var(--text-lg);  
 transition: all var(--transition-fast);  
}  
.mobile-close:hover { background: rgba(255,255,255,0.1); }  
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-1); }  
.mobile-nav-link {  
 display: block;  
 padding: var(--space-3) var(--space-4);  
 font-size: var(--text-base);  
 font-weight: 500;  
 color: var(--clr-text-2);  
 border-radius: var(--radius-md);  
 border: 1px solid transparent;  
 transition: all var(--transition-fast);  
}  
.mobile-nav-link:hover {  
 color: var(--clr-white);  
 background: rgba(255,255,255,0.06);  
 border-color: var(--clr-border);  
}  
.mobile-menu-actions {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 margin-top: auto;  
 padding-top: var(--space-6);  
 border-top: 1px solid var(--clr-border);  
}  
.mobile-overlay {  
 position: fixed;  
 inset: 0;  
 background: rgba(0,0,0,0.6);  
 z-index: 1999;  
 opacity: 0;  
 pointer-events: none;  
 transition: opacity var(--transition-slow);  
}  
.mobile-overlay.visible {  
 opacity: 1;  
 pointer-events: all;  
}

/* ── 9. HERO ── */  
.hero-section {  
 position: relative;  
 min-height: 100svh;  
 display: flex;  
 align-items: center;  
 overflow: hidden;  
 background: var(--clr-bg);  
 padding: var(--space-20) 0 var(--space-16);  
}  
.hero-canvas {  
 position: absolute;  
 inset: 0;  
 width: 100%;  
 height: 100%;  
 pointer-events: none;  
 opacity: 0.4;  
}  
.hero-grid-overlay {  
 position: absolute;  
 inset: 0;  
 background-image:  
 linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),  
 linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);  
 background-size: 60px 60px;  
 pointer-events: none;  
}  
.hero-wrapper {  
 position: relative;  
 z-index: 2;  
 width: 100%;  
 max-width: 1280px;  
 margin: 0 auto;  
 padding: 0 var(--space-6);  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-16);  
 align-items: center;  
}  
.hero-badge {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 padding: var(--space-2) var(--space-4);  
 background: rgba(201,168,76,0.08);  
 border: 1px solid rgba(201,168,76,0.25);  
 border-radius: 100px;  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 margin-bottom: var(--space-5);  
}  
.badge-dot {  
 width: 8px;  
 height: 8px;  
 border-radius: 50%;  
 background: var(--clr-gold);  
 animation: pulse 2s infinite;  
 flex-shrink: 0;  
}  
@keyframes pulse {  
 0%, 100% { opacity: 1; transform: scale(1); }  
 50% { opacity: 0.5; transform: scale(0.85); }  
}  
.hero-headline {  
 font-size: clamp(2.4rem, 5vw, 4rem);  
 font-family: var(--font-heading);  
 font-weight: 800;  
 line-height: 1.1;  
 margin-bottom: var(--space-5);  
 letter-spacing: -0.02em;  
}  
.hero-sub {  
 font-size: var(--text-lg);  
 color: var(--clr-text-2);  
 line-height: 1.7;  
 max-width: 520px;  
 margin-bottom: var(--space-8);  
}  
.hero-cta-group {  
 display: flex;  
 gap: var(--space-4);  
 flex-wrap: wrap;  
 margin-bottom: var(--space-6);  
}  
.hero-auth-row {  
 display: flex;  
 align-items: center;  
 gap: var(--space-4);  
 flex-wrap: wrap;  
}  
.auth-chip {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 transition: color var(--transition-fast);  
}  
.auth-chip:hover { color: var(--clr-gold); }

/* Hero Market Panel */  
.hero-market-panel {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-4);  
}  
.hero-chart-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 padding: var(--space-5);  
 box-shadow: var(--shadow-lg);  
}  
.hero-chart-header {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 margin-bottom: var(--space-3);  
}  
.hch-pair {  
 font-family: var(--font-heading);  
 font-weight: 700;  
 font-size: var(--text-lg);  
 color: var(--clr-white);  
}  
.hch-label {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 margin-left: var(--space-2);  
}  
.hch-price {  
 font-family: var(--font-mono);  
 font-size: var(--text-xl);  
 font-weight: 500;  
 color: var(--clr-white);  
}  
.hch-change.positive { color: var(--clr-green); font-size: var(--text-sm); font-weight: 600; }  
.hch-change.negative { color: var(--clr-red); font-size: var(--text-sm); font-weight: 600; }

.hero-pair-cards {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-3);  
}  
.pair-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 padding: var(--space-4);  
 transition: all var(--transition-base);  
 cursor: default;  
}  
.pair-card:hover {  
 border-color: rgba(201,168,76,0.3);  
 transform: translateY(-2px);  
 box-shadow: var(--shadow-gold);  
}  
.pair-card-top {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 margin-bottom: var(--space-2);  
}  
.pair-name {  
 font-size: var(--text-xs);  
 font-weight: 700;  
 color: var(--clr-text-2);  
 letter-spacing: 0.05em;  
}  
.pair-status {  
 width: 6px;  
 height: 6px;  
 border-radius: 50%;  
 background: var(--clr-green);  
}  
.pair-price {  
 font-family: var(--font-mono);  
 font-size: var(--text-base);  
 font-weight: 600;  
 color: var(--clr-white);  
}  
.pair-change {  
 font-size: var(--text-xs);  
 font-weight: 600;  
}  
.pair-change.up { color: var(--clr-green); }  
.pair-change.down { color: var(--clr-red); }

.hero-stats-row {  
 display: grid;  
 grid-template-columns: repeat(3, 1fr);  
 gap: var(--space-3);  
}  
.hero-stat {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 padding: var(--space-4);  
 text-align: center;  
}  
.hs-val {  
 font-family: var(--font-heading);  
 font-size: var(--text-2xl);  
 font-weight: 800;  
 color: var(--clr-gold);  
}  
.hs-suffix {  
 font-size: var(--text-lg);  
 color: var(--clr-gold);  
 font-weight: 700;  
}  
.hs-label {  
 display: block;  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 margin-top: 2px;  
}

.hero-scroll-cue {  
 position: absolute;  
 bottom: var(--space-8);  
 left: 50%;  
 transform: translateX(-50%);  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 gap: var(--space-2);  
 color: var(--clr-text-3);  
 font-size: var(--text-xs);  
 letter-spacing: 0.06em;  
}  
.scroll-pill {  
 width: 24px;  
 height: 40px;  
 border: 2px solid var(--clr-border-2);  
 border-radius: 100px;  
 display: flex;  
 align-items: flex-start;  
 justify-content: center;  
 padding: 5px;  
}  
.scroll-pip {  
 width: 4px;  
 height: 8px;  
 background: var(--clr-gold);  
 border-radius: 100px;  
 animation: scrollPip 2s ease-in-out infinite;  
}  
@keyframes scrollPip {  
 0% { transform: translateY(0); opacity: 1; }  
 100% { transform: translateY(12px); opacity: 0; }  
}

/* ── 10. SLIDER ── */  
.slider-section {  
 position: relative;  
 height: 520px;  
 overflow: hidden;  
}  
.premiumSwiper,  
.premiumSwiper .swiper-wrapper,  
.swiper-slide { height: 100%; }  
.slide-bg {  
 position: absolute;  
 inset: 0;  
 background-size: cover;  
 background-position: center;  
 transition: transform 8s ease;  
}  
.swiper-slide-active .slide-bg {  
 transform: scale(1.04);  
}  
.slide-overlay {  
 position: absolute;  
 inset: 0;  
 background: linear-gradient(  
 90deg,  
 rgba(8,12,20,0.92) 0%,  
 rgba(8,12,20,0.6) 50%,  
 rgba(8,12,20,0.2) 100%  
 );  
}  
.slide-content {  
 position: relative;  
 z-index: 2;  
 height: 100%;  
 display: flex;  
 flex-direction: column;  
 justify-content: center;  
 padding: 0 var(--space-16) 0 clamp(var(--space-8), 8vw, 100px);  
 max-width: 660px;  
}  
.slide-tag {  
 display: inline-block;  
 font-size: var(--text-xs);  
 font-weight: 700;  
 letter-spacing: 0.14em;  
 text-transform: uppercase;  
 color: var(--clr-gold);  
 margin-bottom: var(--space-4);  
}  
.slide-headline {  
 font-size: clamp(1.75rem, 3.5vw, 3rem);  
 font-family: var(--font-heading);  
 font-weight: 800;  
 line-height: 1.15;  
 color: var(--clr-white);  
 margin-bottom: var(--space-4);  
}  
.slide-desc {  
 font-size: var(--text-base);  
 color: rgba(241,245,249,0.8);  
 line-height: 1.7;  
 margin-bottom: var(--space-6);  
 max-width: 460px;  
}  
/* Swiper nav overrides */  
.premiumSwiper .swiper-button-next,  
.premiumSwiper .swiper-button-prev {  
 color: var(--clr-gold);  
 background: rgba(8,12,20,0.6);  
 width: 44px;  
 height: 44px;  
 border-radius: 50%;  
 border: 1px solid rgba(201,168,76,0.3);  
}  
.premiumSwiper .swiper-button-next::after,  
.premiumSwiper .swiper-button-prev::after {  
 font-size: 14px;  
}  
.premiumSwiper .swiper-pagination-bullet {  
 background: rgba(255,255,255,0.4);  
 opacity: 1;  
}  
.premiumSwiper .swiper-pagination-bullet-active {  
 background: var(--clr-gold);  
 width: 24px;  
 border-radius: 4px;  
}

/* ── 11. MARKETS ── */  
.markets-section { background: var(--clr-bg-2); padding: var(--space-24) 0; }

.market-tabs {  
 display: flex;  
 gap: var(--space-2);  
 justify-content: center;  
 margin-bottom: var(--space-8);  
 flex-wrap: wrap;  
}  
.market-tab {  
 padding: var(--space-2) var(--space-5);  
 border-radius: 100px;  
 font-size: var(--text-sm);  
 font-weight: 600;  
 color: var(--clr-text-3);  
 border: 1px solid var(--clr-border);  
 background: transparent;  
 transition: all var(--transition-base);  
}  
.market-tab.active,  
.market-tab:hover {  
 background: var(--clr-gold-glow);  
 color: var(--clr-gold);  
 border-color: rgba(201,168,76,0.3);  
}

.market-table-wrapper {  
 overflow-x: auto;  
 border-radius: var(--radius-lg);  
 border: 1px solid var(--clr-border);  
 background: var(--clr-surface);  
}  
.market-table {  
 width: 100%;  
 border-collapse: collapse;  
 font-size: var(--text-sm);  
}  
.market-table thead {  
 background: var(--clr-surface-2);  
}  
.market-table th {  
 padding: var(--space-4) var(--space-5);  
 text-align: left;  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-3);  
 letter-spacing: 0.08em;  
 text-transform: uppercase;  
 border-bottom: 1px solid var(--clr-border);  
 white-space: nowrap;  
}  
.market-table td {  
 padding: var(--space-4) var(--space-5);  
 border-bottom: 1px solid var(--clr-border);  
 white-space: nowrap;  
 transition: background var(--transition-fast);  
}  
.market-table tbody tr:hover td { background: rgba(255,255,255,0.02); }  
.market-table tbody tr:last-child td { border-bottom: none; }

.td-pair {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
}  
.pair-flag {  
 width: 32px;  
 height: 32px;  
 border-radius: 50%;  
 background: var(--clr-surface-2);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-xs);  
 font-weight: 700;  
 color: var(--clr-gold);  
 flex-shrink: 0;  
 border: 1px solid var(--clr-border);  
}  
.pair-label { font-weight: 700; color: var(--clr-white); }  
.pair-type { font-size: var(--text-xs); color: var(--clr-text-3); }  
.td-price {  
 font-family: var(--font-mono);  
 font-weight: 500;  
 color: var(--clr-text);  
}  
.td-change {  
 font-weight: 600;  
 font-size: var(--text-sm);  
}  
.td-change.up { color: var(--clr-green); }  
.td-change.down { color: var(--clr-red); }  
.td-status .status-dot {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 font-size: var(--text-xs);  
 color: var(--clr-green);  
}  
.status-dot::before {  
 content: '';  
 display: inline-block;  
 width: 6px;  
 height: 6px;  
 border-radius: 50%;  
 background: var(--clr-green);  
}  
.btn-trade {  
 padding: 4px 14px;  
 border-radius: var(--radius-sm);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 background: var(--clr-gold-glow);  
 color: var(--clr-gold);  
 border: 1px solid rgba(201,168,76,0.3);  
 transition: all var(--transition-fast);  
}  
.btn-trade:hover {  
 background: var(--clr-gold);  
 color: #000;  
}  
.price-flash-up { animation: flashGreen 0.5s ease; }  
.price-flash-down { animation: flashRed 0.5s ease; }  
@keyframes flashGreen {  
 0%,100% { background: transparent; }  
 50% { background: rgba(34,197,94,0.15); }  
}  
@keyframes flashRed {  
 0%,100% { background: transparent; }  
 50% { background: rgba(239,68,68,0.15); }  
}

/* Mobile market cards */  
.market-cards-grid {  
 display: none;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-4);  
 margin-top: var(--space-6);  
}  
.mkt-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 padding: var(--space-4);  
 transition: all var(--transition-base);  
}  
.mkt-card:hover { border-color: rgba(201,168,76,0.25); }  
.mkt-card-top {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 margin-bottom: var(--space-3);  
}  
.mkt-card-pair { font-weight: 700; font-size: var(--text-sm); color: var(--clr-white); }  
.mkt-card-price {  
 font-family: var(--font-mono);  
 font-size: var(--text-base);  
 font-weight: 600;  
 color: var(--clr-white);  
 margin-bottom: var(--space-2);  
}  
.mkt-card-row {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
}

/* ── 12. WHY SECTION ── */  
.why-section { background: var(--clr-bg); padding: var(--space-24) 0; }  
.why-grid {  
 display: grid;  
 grid-template-columns: repeat(3, 1fr);  
 gap: var(--space-6);  
}  
.why-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 padding: var(--space-8);  
 transition: all var(--transition-base);  
 position: relative;  
 overflow: hidden;  
}  
.why-card::before {  
 content: '';  
 position: absolute;  
 top: 0;  
 left: 0;  
 right: 0;  
 height: 2px;  
 background: linear-gradient(90deg, var(--clr-gold), transparent);  
 transform: scaleX(0);  
 transform-origin: left;  
 transition: transform var(--transition-base);  
}  
.why-card:hover::before { transform: scaleX(1); }  
.why-card:hover {  
 border-color: rgba(201,168,76,0.2);  
 transform: translateY(-4px);  
 box-shadow: var(--shadow-lg);  
}  
.why-icon {  
 width: 52px;  
 height: 52px;  
 border-radius: var(--radius-md);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.25);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-xl);  
 color: var(--clr-gold);  
 margin-bottom: var(--space-5);  
}  
.why-card h3 {  
 font-size: var(--text-lg);  
 margin-bottom: var(--space-3);  
}  
.why-card p { font-size: var(--text-sm); line-height: 1.7; }

/* ── 13. TRADING SECTION ── */  
.trading-section { background: var(--clr-bg-2); padding: var(--space-24) 0; }  
.trading-layout {  
 display: grid;  
 grid-template-columns: 1fr 360px;  
 gap: var(--space-6);  
 margin-bottom: var(--space-10);  
}  
.trading-chart-panel {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 overflow: hidden;  
}  
.trading-panel-header {  
 padding: var(--space-4) var(--space-5);  
 border-bottom: 1px solid var(--clr-border);  
 background: var(--clr-surface-2);  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 flex-wrap: wrap;  
 gap: var(--space-4);  
}  
.pair-selector {  
 display: flex;  
 gap: var(--space-2);  
 flex-wrap: wrap;  
}  
.pair-btn {  
 padding: 4px 12px;  
 border-radius: var(--radius-sm);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-3);  
 border: 1px solid transparent;  
 transition: all var(--transition-fast);  
}  
.pair-btn.active,  
.pair-btn:hover {  
 color: var(--clr-gold);  
 background: var(--clr-gold-glow);  
 border-color: rgba(201,168,76,0.25);  
}  
.panel-price-row {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
}  
.panel-price {  
 font-family: var(--font-mono);  
 font-size: var(--text-2xl);  
 font-weight: 600;  
 color: var(--clr-white);  
}  
.panel-change { font-size: var(--text-sm); font-weight: 600; }  
.panel-change.positive { color: var(--clr-green); }  
.panel-change.negative { color: var(--clr-red); }

.chart-area {  
 position: relative;  
 height: 320px;  
 padding: var(--space-4);  
}  
.chart-area canvas { width: 100%; height: 100%; }  
.chart-api-note {  
 position: absolute;  
 inset: 0;  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 justify-content: center;  
 gap: var(--space-3);  
 background: rgba(13,20,34,0.85);  
 backdrop-filter: blur(4px);  
 text-align: center;  
 padding: var(--space-8);  
}  
.chart-api-note i {  
 font-size: var(--text-4xl);  
 color: var(--clr-gold);  
 opacity: 0.5;  
}  
.chart-api-note span {  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 max-width: 340px;  
 line-height: 1.6;  
}  
.timeframe-bar {  
 display: flex;  
 gap: 2px;  
 padding: var(--space-3) var(--space-5);  
 border-top: 1px solid var(--clr-border);  
 background: var(--clr-surface-2);  
}  
.tf-btn {  
 padding: 4px 12px;  
 border-radius: var(--radius-sm);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-3);  
 border: 1px solid transparent;  
 transition: all var(--transition-fast);  
}  
.tf-btn.active,  
.tf-btn:hover {  
 color: var(--clr-gold);  
 background: var(--clr-gold-glow);  
 border-color: rgba(201,168,76,0.2);  
}

/* Sidebar */  
.trading-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }  
.sidebar-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 padding: var(--space-5);  
}  
.sidebar-title {  
 font-size: var(--text-sm);  
 font-weight: 700;  
 color: var(--clr-text-2);  
 text-transform: uppercase;  
 letter-spacing: 0.08em;  
 margin-bottom: var(--space-4);  
 display: flex;  
 align-items: center;  
 gap: var(--space-2);  
}  
.sidebar-title i { color: var(--clr-gold); }

/* Watchlist */  
.watchlist-item {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 padding: var(--space-3) 0;  
 border-bottom: 1px solid var(--clr-border);  
 cursor: pointer;  
 transition: all var(--transition-fast);  
}  
.watchlist-item:last-child { border-bottom: none; }  
.watchlist-item:hover { padding-left: var(--space-2); }  
.wl-pair { font-size: var(--text-sm); font-weight: 700; color: var(--clr-white); }  
.wl-price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--clr-text); }  
.wl-change { font-size: var(--text-xs); font-weight: 600; }  
.wl-change.up { color: var(--clr-green); }  
.wl-change.down { color: var(--clr-red); }

/* Economic calendar */  
.eco-placeholder { }  
.placeholder-note { font-size: var(--text-xs); color: var(--clr-text-3); margin-bottom: var(--space-3); font-style: italic; }  
.eco-list { display: flex; flex-direction: column; gap: var(--space-2); }  
.eco-list li {  
 display: flex;  
 align-items: center;  
 gap: var(--space-2);  
 padding: var(--space-2) var(--space-3);  
 border-radius: var(--radius-sm);  
 background: var(--clr-surface-2);  
 font-size: var(--text-xs);  
}  
.eco-time { font-family: var(--font-mono); color: var(--clr-text-3); flex-shrink: 0; }  
.eco-event { flex: 1; color: var(--clr-text-2); }  
.eco-impact {  
 flex-shrink: 0;  
 padding: 1px 6px;  
 border-radius: 4px;  
 font-size: 10px;  
 font-weight: 700;  
}  
.eco-impact.high { background: rgba(239,68,68,0.15); color: var(--clr-red); }  
.eco-impact.med { background: rgba(234,179,8,0.15); color: #eab308; }  
.eco-impact.low { background: rgba(34,197,94,0.15); color: var(--clr-green); }

/* Feature pills */  
.feature-pills-grid {  
 display: flex;  
 flex-wrap: wrap;  
 gap: var(--space-3);  
 justify-content: center;  
}  
.feature-pill {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 padding: var(--space-2) var(--space-5);  
 border-radius: 100px;  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 transition: all var(--transition-base);  
}  
.feature-pill i { color: var(--clr-gold); }  
.feature-pill:hover {  
 border-color: rgba(201,168,76,0.3);  
 color: var(--clr-white);  
 transform: translateY(-2px);  
}

/* ── 14. INSTRUMENTS ── */  
.instruments-section { background: var(--clr-bg); padding: var(--space-24) 0; }  
.instruments-grid {  
 display: grid;  
 grid-template-columns: repeat(4, 1fr);  
 gap: var(--space-6);  
}  
.instrument-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 padding: var(--space-8);  
 text-align: center;  
 transition: all var(--transition-base);  
}  
.instrument-card:hover {  
 border-color: rgba(201,168,76,0.2);  
 transform: translateY(-4px);  
 box-shadow: var(--shadow-gold);  
}  
.inst-icon {  
 width: 60px;  
 height: 60px;  
 border-radius: var(--radius-md);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.2);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-2xl);  
 color: var(--clr-gold);  
 margin: 0 auto var(--space-5);  
}  
.inst-icon.gold { background: rgba(201,168,76,0.12); color: var(--clr-gold); }  
.inst-icon.blue { background: var(--clr-blue-dim); color: var(--clr-blue); }  
.inst-icon.purple { background: rgba(139,92,246,0.12); color: var(--clr-purple); }  
.instrument-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }  
.instrument-card p { font-size: var(--text-sm); color: var(--clr-text-2); margin-bottom: var(--space-4); }  
.inst-examples {  
 font-size: var(--text-xs);  
 color: var(--clr-gold);  
 font-family: var(--font-mono);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.2);  
 padding: var(--space-2) var(--space-4);  
 border-radius: 100px;  
 display: inline-block;  
}

/* ── 15. PARTNER ── */  
.partner-section { background: var(--clr-bg-2); padding: var(--space-24) 0; }  
.partner-layout {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-16);  
 align-items: center;  
}  
.partner-list {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 margin: var(--space-6) 0;  
}  
.partner-list li {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
}  
.partner-list i { color: var(--clr-green); flex-shrink: 0; }  
.reg-note {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 padding: var(--space-4);  
 display: flex;  
 gap: var(--space-2);  
 align-items: flex-start;  
 line-height: 1.6;  
}  
.reg-note i { color: var(--clr-blue); flex-shrink: 0; margin-top: 2px; }  
.partner-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-xl);  
 padding: var(--space-8);  
 margin-bottom: var(--space-5);  
}  
.partner-card-brand {  
 display: flex;  
 align-items: center;  
 gap: var(--space-4);  
 margin-bottom: var(--space-6);  
 padding-bottom: var(--space-6);  
 border-bottom: 1px solid var(--clr-border);  
}  
.pcb-icon {  
 width: 52px;  
 height: 52px;  
 border-radius: var(--radius-md);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.25);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-xl);  
 color: var(--clr-gold);  
 flex-shrink: 0;  
}  
.partner-card-brand strong {  
 display: block;  
 color: var(--clr-white);  
 font-size: var(--text-lg);  
 font-family: var(--font-heading);  
}  
.partner-card-brand span { font-size: var(--text-xs); color: var(--clr-text-3); }  
.partner-card-stats { display: flex; flex-direction: column; gap: var(--space-3); }  
.pcs-item {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 padding: var(--space-3) 0;  
 border-bottom: 1px solid var(--clr-border);  
 font-size: var(--text-sm);  
}  
.pcs-item:last-child { border-bottom: none; }  
.pcs-label { color: var(--clr-text-3); }  
.pcs-val { color: var(--clr-text-2); font-weight: 600; }  
.partner-badges {  
 display: flex;  
 gap: var(--space-3);  
}  
.pb-badge {  
 flex: 1;  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 gap: var(--space-2);  
 padding: var(--space-3);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-2);  
}  
.pb-badge i { color: var(--clr-gold); }

/* ── 16. HOW IT WORKS ── */  
.how-section { background: var(--clr-bg); padding: var(--space-24) 0; }  
.steps-row {  
 display: flex;  
 align-items: flex-start;  
 gap: 0;  
 margin-bottom: var(--space-12);  
}  
.step-item {  
 flex: 1;  
 position: relative;  
 padding: var(--space-8);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 transition: all var(--transition-base);  
}  
.step-item:hover {  
 border-color: rgba(201,168,76,0.2);  
 transform: translateY(-4px);  
}  
.step-num {  
 font-size: var(--text-4xl);  
 font-family: var(--font-heading);  
 font-weight: 800;  
 color: rgba(201,168,76,0.12);  
 line-height: 1;  
 margin-bottom: var(--space-2);  
}  
.step-icon {  
 width: 48px;  
 height: 48px;  
 border-radius: var(--radius-md);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.2);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-xl);  
 color: var(--clr-gold);  
 margin-bottom: var(--space-4);  
}  
.step-item h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }  
.step-item p { font-size: var(--text-sm); color: var(--clr-text-2); line-height: 1.6; }  
.step-connector {  
 width: var(--space-6);  
 height: 2px;  
 background: linear-gradient(90deg, var(--clr-border), rgba(201,168,76,0.3), var(--clr-border));  
 align-self: center;  
 flex-shrink: 0;  
 margin: 0 -1px;  
}  
.how-cta {  
 display: flex;  
 justify-content: center;  
 gap: var(--space-4);  
 flex-wrap: wrap;  
}

/* ── 17. WEB3 INTRO ── */  
.web3-intro { background: var(--clr-bg-2); padding: var(--space-24) 0; }  
.web3-layout {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-16);  
 align-items: center;  
}  
.web3-visual {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 gap: var(--space-6);  
}  
.web3-orb-wrap {  
 position: relative;  
 width: 180px;  
 height: 180px;  
 display: flex;  
 align-items: center;  
 justify-content: center;  
}  
.web3-orb {  
 width: 100px;  
 height: 100px;  
 border-radius: 50%;  
 background: linear-gradient(135deg, rgba(201,168,76,0.3), rgba(201,168,76,0.05));  
 border: 2px solid rgba(201,168,76,0.4);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: 2.5rem;  
 color: var(--clr-gold);  
 position: relative;  
 z-index: 2;  
}  
.web3-ring {  
 position: absolute;  
 border-radius: 50%;  
 border: 1px solid rgba(201,168,76,0.15);  
 animation: orbRing 4s linear infinite;  
}  
.ring-1 { width: 130px; height: 130px; animation-delay: 0s; }  
.ring-2 { width: 160px; height: 160px; animation-delay: 0.5s; animation-duration: 5s; }  
.ring-3 { width: 190px; height: 190px; animation-delay: 1s; animation-duration: 6s; }  
@keyframes orbRing {  
 from { transform: rotate(0deg) scale(1); opacity: 0.6; }  
 to { transform: rotate(360deg) scale(1.02); opacity: 0.2; }  
}  
.wallet-preview-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 padding: var(--space-5) var(--space-6);  
 width: 100%;  
 max-width: 300px;  
}  
.wpc-header {  
 display: flex;  
 align-items: center;  
 gap: var(--space-2);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-green);  
 margin-bottom: var(--space-3);  
}  
.wpc-dot {  
 width: 8px;  
 height: 8px;  
 border-radius: 50%;  
 background: var(--clr-green);  
 animation: pulse 2s infinite;  
}  
.wpc-address {  
 font-family: var(--font-mono);  
 font-size: var(--text-sm);  
 color: var(--clr-text);  
 margin-bottom: var(--space-2);  
}  
.wpc-network {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
}  
.wallet-badges-row {  
 display: flex;  
 flex-wrap: wrap;  
 gap: var(--space-3);  
 margin: var(--space-6) 0;  
}  

/* continuing from wallet-badge... */  
.wallet-badge {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 padding: var(--space-2) var(--space-4);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: 100px;  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-2);  
}  
.wallet-badge img { border-radius: 50%; }  
.wallet-badge i { color: var(--clr-gold); }

/* ── 18. ACCOUNTS ── */  
.accounts-section { background: var(--clr-bg); padding: var(--space-24) 0; }  
.accounts-grid {  
 display: grid;  
 grid-template-columns: repeat(3, 1fr);  
 gap: var(--space-6);  
 align-items: start;  
}  
.account-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-xl);  
 padding: var(--space-8);  
 position: relative;  
 transition: all var(--transition-base);  
}  
.account-card:hover {  
 transform: translateY(-4px);  
 box-shadow: var(--shadow-lg);  
}  
.account-card.featured {  
 background: var(--clr-surface-2);  
 border-color: rgba(201,168,76,0.35);  
 box-shadow: var(--shadow-gold);  
}  
.account-badge-top {  
 position: absolute;  
 top: -14px;  
 left: 50%;  
 transform: translateX(-50%);  
 background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dark));  
 color: #000;  
 font-size: var(--text-xs);  
 font-weight: 700;  
 padding: 4px 16px;  
 border-radius: 100px;  
 white-space: nowrap;  
}  
.account-tier {  
 font-family: var(--font-heading);  
 font-size: var(--text-xl);  
 font-weight: 800;  
 color: var(--clr-white);  
 margin-bottom: var(--space-3);  
}  
.account-details {  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 font-style: italic;  
 margin-bottom: var(--space-6);  
 padding-bottom: var(--space-6);  
 border-bottom: 1px solid var(--clr-border);  
}  
.account-features {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 margin-bottom: var(--space-8);  
}  
.account-features li {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
}  
.account-features i { color: var(--clr-green); flex-shrink: 0; }

/* ── 19. STATS ── */  
.stats-section {  
 background: linear-gradient(135deg, var(--clr-bg-2) 0%, var(--clr-bg) 100%);  
 padding: var(--space-20) 0;  
 border-top: 1px solid var(--clr-border);  
 border-bottom: 1px solid var(--clr-border);  
}  
.stats-grid {  
 display: grid;  
 grid-template-columns: repeat(4, 1fr);  
 gap: var(--space-6);  
}  
.stat-card {  
 text-align: center;  
 padding: var(--space-8);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 transition: all var(--transition-base);  
}  
.stat-card:hover {  
 border-color: rgba(201,168,76,0.25);  
 transform: translateY(-3px);  
}  
.stat-icon {  
 width: 52px;  
 height: 52px;  
 border-radius: var(--radius-md);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.2);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-xl);  
 color: var(--clr-gold);  
 margin: 0 auto var(--space-4);  
}  
.stat-number {  
 font-family: var(--font-heading);  
 font-size: clamp(1.75rem, 3vw, var(--text-4xl));  
 font-weight: 800;  
 color: var(--clr-white);  
 margin-bottom: var(--space-2);  
 line-height: 1;  
}  
.stat-number span:last-child {  
 font-size: var(--text-2xl);  
 color: var(--clr-gold);  
}  
.stat-label {  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
}

/* ── 20. INSIGHTS ── */  
.insights-section { background: var(--clr-bg); padding: var(--space-24) 0; }  
.insights-grid {  
 display: grid;  
 grid-template-columns: repeat(3, 1fr);  
 gap: var(--space-6);  
}  
.insight-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 overflow: hidden;  
 transition: all var(--transition-base);  
}  
.insight-card:hover {  
 transform: translateY(-4px);  
 box-shadow: var(--shadow-lg);  
 border-color: rgba(201,168,76,0.15);  
}  
.insight-img-wrap {  
 position: relative;  
 height: 200px;  
 overflow: hidden;  
}  
.insight-img-wrap img {  
 width: 100%;  
 height: 100%;  
 object-fit: cover;  
 transition: transform var(--transition-slow);  
}  
.insight-card:hover .insight-img-wrap img {  
 transform: scale(1.04);  
}  
.insight-cat {  
 position: absolute;  
 top: var(--space-3);  
 left: var(--space-3);  
 background: rgba(8,12,20,0.8);  
 backdrop-filter: blur(4px);  
 color: var(--clr-gold);  
 font-size: var(--text-xs);  
 font-weight: 700;  
 padding: 3px 10px;  
 border-radius: 100px;  
 border: 1px solid rgba(201,168,76,0.25);  
}  
.insight-body {  
 padding: var(--space-6);  
}  
.insight-body h3 {  
 font-size: var(--text-base);  
 font-family: var(--font-heading);  
 margin-bottom: var(--space-3);  
 line-height: 1.4;  
}  
.insight-body h3 a { transition: color var(--transition-fast); }  
.insight-body h3 a:hover { color: var(--clr-gold); }  
.insight-body p {  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 line-height: 1.7;  
 margin-bottom: var(--space-4);  
}  
.insight-footer {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 border-top: 1px solid var(--clr-border);  
 padding-top: var(--space-4);  
}  
.read-more-link {  
 color: var(--clr-gold);  
 font-weight: 600;  
 font-size: var(--text-xs);  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-1);  
 transition: gap var(--transition-fast);  
}  
.read-more-link:hover { gap: var(--space-2); }

/* ── 21. SECURITY ── */  
.security-section { background: var(--clr-bg-2); padding: var(--space-24) 0; }  
.security-layout {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-16);  
 align-items: center;  
}  
.security-items {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-5);  
 margin-top: var(--space-6);  
}  
.sec-item {  
 display: flex;  
 align-items: flex-start;  
 gap: var(--space-4);  
 padding: var(--space-5);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 transition: all var(--transition-base);  
}  
.sec-item:hover { border-color: rgba(201,168,76,0.2); }  
.sec-item > i {  
 font-size: var(--text-xl);  
 color: var(--clr-gold);  
 flex-shrink: 0;  
 margin-top: 2px;  
 width: 24px;  
}  
.sec-item strong { display: block; color: var(--clr-white); margin-bottom: var(--space-1); }  
.sec-item p { font-size: var(--text-sm); color: var(--clr-text-2); margin: 0; }  
.shield-card {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-xl);  
 padding: var(--space-10);  
 text-align: center;  
}  
.shield-icon-wrap {  
 font-size: 5rem;  
 color: var(--clr-gold);  
 opacity: 0.8;  
 margin-bottom: var(--space-6);  
 display: block;  
}  
.shield-chip-grid {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-3);  
}  
.shield-chip {  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 gap: var(--space-2);  
 padding: var(--space-3);  
 background: var(--clr-surface-2);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-2);  
}  
.shield-chip i { color: var(--clr-green); }

/* ── 22. FAQ ── */  
.faq-section { background: var(--clr-bg); padding: var(--space-24) 0; }  
.faq-list {  
 max-width: 800px;  
 margin: 0 auto;  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
}  
.faq-item {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 overflow: hidden;  
 transition: border-color var(--transition-base);  
}  
.faq-item:hover { border-color: rgba(201,168,76,0.2); }  
.faq-q {  
 width: 100%;  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 gap: var(--space-4);  
 padding: var(--space-5) var(--space-6);  
 font-size: var(--text-base);  
 font-weight: 600;  
 color: var(--clr-white);  
 text-align: left;  
 transition: color var(--transition-fast);  
}  
.faq-q:hover { color: var(--clr-gold); }  
.faq-arrow {  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 transition: transform var(--transition-base);  
 flex-shrink: 0;  
}  
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--clr-gold); }  
.faq-a {  
 max-height: 0;  
 overflow: hidden;  
 transition: max-height var(--transition-slow) ease, padding var(--transition-base);  
}  
.faq-a.open {  
 max-height: 400px;  
}  
.faq-a p {  
 padding: 0 var(--space-6) var(--space-5);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 line-height: 1.7;  
}  
.faq-a a { color: var(--clr-gold); }

/* ── 23. CONTACT ── */  
.contact-section { background: var(--clr-bg-2); padding: var(--space-24) 0; }  
.contact-layout {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-16);  
 align-items: start;  
}  
.contact-details {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-5);  
 margin-top: var(--space-8);  
}  
.contact-item {  
 display: flex;  
 align-items: flex-start;  
 gap: var(--space-4);  
}  
.ci-icon {  
 width: 44px;  
 height: 44px;  
 border-radius: var(--radius-md);  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.2);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-lg);  
 color: var(--clr-gold);  
 flex-shrink: 0;  
}  
.contact-item strong { display: block; color: var(--clr-white); margin-bottom: 2px; font-size: var(--text-sm); }  
.contact-item a { font-size: var(--text-sm); color: var(--clr-text-2); transition: color var(--transition-fast); }  
.contact-item a:hover { color: var(--clr-gold); }  
.contact-form-box {  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-xl);  
 padding: var(--space-8);  
}  
.form-msg {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 padding: var(--space-4);  
 border-radius: var(--radius-md);  
 font-size: var(--text-sm);  
 font-weight: 500;  
 margin-bottom: var(--space-5);  
}  
.form-msg.success {  
 background: rgba(34,197,94,0.1);  
 border: 1px solid rgba(34,197,94,0.25);  
 color: var(--clr-green);  
}  
.form-msg.error {  
 background: rgba(239,68,68,0.1);  
 border: 1px solid rgba(239,68,68,0.25);  
 color: var(--clr-red);  
}

/* Forms */  
.form-row-2 {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-4);  
 margin-bottom: var(--space-4);  
}  
.form-group {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-2);  
 margin-bottom: var(--space-4);  
}  
.form-group label {  
 font-size: var(--text-sm);  
 font-weight: 600;  
 color: var(--clr-text-2);  
}  
.req { color: var(--clr-gold); }  
.form-group input,  
.form-group textarea,  
.form-group select {  
 background: var(--clr-bg);  
 border: 1px solid var(--clr-border-2);  
 border-radius: var(--radius-md);  
 padding: 0.7rem var(--space-4);  
 color: var(--clr-text);  
 font-size: var(--text-sm);  
 transition: all var(--transition-fast);  
 outline: none;  
 width: 100%;  
}  
.form-group input::placeholder,  
.form-group textarea::placeholder {  
 color: var(--clr-text-3);  
}  
.form-group input:focus,  
.form-group textarea:focus,  
.form-group select:focus {  
 border-color: var(--clr-gold);  
 box-shadow: 0 0 0 3px rgba(201,168,76,0.12);  
 background: var(--clr-surface);  
}  
.form-group input.invalid,  
.form-group textarea.invalid {  
 border-color: var(--clr-red);  
 box-shadow: 0 0 0 3px rgba(239,68,68,0.1);  
}  
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }  
.form-group select { appearance: none; cursor: pointer; }  
.field-error { font-size: var(--text-xs); color: var(--clr-red); min-height: 16px; }  
.form-check {  
 display: flex;  
 align-items: flex-start;  
 gap: var(--space-3);  
 cursor: pointer;  
 margin-bottom: var(--space-4);  
}  
.form-check input[type="checkbox"] {  
 width: 18px;  
 height: 18px;  
 min-width: 18px;  
 accent-color: var(--clr-gold);  
 margin-top: 2px;  
 cursor: pointer;  
}  
.form-check span {  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 line-height: 1.5;  
}  
.form-check a { color: var(--clr-gold); }

/* ── 24. RISK SECTION ── */  
.risk-section {  
 background: var(--clr-bg);  
 padding: var(--space-12) 0;  
 border-top: 1px solid var(--clr-border);  
}  
.risk-box {  
 display: flex;  
 align-items: flex-start;  
 gap: var(--space-6);  
 background: rgba(239,68,68,0.05);  
 border: 1px solid rgba(239,68,68,0.15);  
 border-radius: var(--radius-lg);  
 padding: var(--space-8);  
}  
.risk-icon {  
 font-size: var(--text-3xl);  
 color: rgba(239,68,68,0.7);  
 flex-shrink: 0;  
}  
.risk-content h2 {  
 font-size: var(--text-lg);  
 color: var(--clr-red);  
 margin-bottom: var(--space-4);  
}  
.risk-content p {  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 line-height: 1.7;  
 margin-bottom: var(--space-3);  
}  
.risk-content p:last-child { margin-bottom: 0; }  
.risk-link { color: var(--clr-gold); }

/* ── 25. FOOTER ── */  
.site-footer { background: var(--clr-bg-2); }  
.footer-top { padding: var(--space-16) 0; border-bottom: 1px solid var(--clr-border); }  
.footer-grid {  
 display: grid;  
 grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;  
 gap: var(--space-10);  
}  
.footer-brand img { margin-bottom: var(--space-4); }  
.footer-brand p {  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 line-height: 1.7;  
 margin-bottom: var(--space-5);  
}  
.footer-socials {  
 display: flex;  
 gap: var(--space-3);  
}  
.social-link {  
 width: 36px;  
 height: 36px;  
 border-radius: var(--radius-sm);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 transition: all var(--transition-fast);  
}  
.social-link:hover {  
 background: var(--clr-gold-glow);  
 border-color: rgba(201,168,76,0.3);  
 color: var(--clr-gold);  
}  
.footer-col-title {  
 font-size: var(--text-xs);  
 font-weight: 700;  
 letter-spacing: 0.1em;  
 text-transform: uppercase;  
 color: var(--clr-text-2);  
 margin-bottom: var(--space-5);  
}  
.footer-links {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
}  
.footer-links a {  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 transition: color var(--transition-fast);  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
}  
.footer-links a:hover { color: var(--clr-gold); }  
.footer-links i { font-size: var(--text-xs); }  
.footer-partner-badge {  
 display: flex;  
 align-items: center;  
 gap: var(--space-2);  
 margin-top: var(--space-5);  
 padding: var(--space-3) var(--space-4);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
}  
.footer-partner-badge i { color: var(--clr-gold); }  
.footer-partner-badge strong { color: var(--clr-text-2); }  
.footer-bottom { padding: var(--space-6) 0; }  
.footer-bottom-inner {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 gap: var(--space-6);  
 flex-wrap: wrap;  
}  
.footer-bottom-inner p { font-size: var(--text-xs); color: var(--clr-text-3); margin: 0; }  
.footer-risk-note { max-width: 500px; text-align: right; }

/* ── 26. TOAST NOTIFICATIONS ── */  
.toast-container {  
 position: fixed;  
 bottom: var(--space-6);  
 right: var(--space-6);  
 z-index: 9999;  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 pointer-events: none;  
}  
.toast {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 padding: var(--space-4) var(--space-5);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 box-shadow: var(--shadow-lg);  
 min-width: 280px;  
 max-width: 380px;  
 font-size: var(--text-sm);  
 pointer-events: all;  
 animation: toastIn 0.35s ease forwards;  
}  
@keyframes toastIn {  
 from { opacity: 0; transform: translateX(20px); }  
 to { opacity: 1; transform: translateX(0); }  
}  
.toast.removing { animation: toastOut 0.3s ease forwards; }  
@keyframes toastOut {  
 to { opacity: 0; transform: translateX(20px); }  
}  
.toast-success { border-left: 3px solid var(--clr-green); }  
.toast-error { border-left: 3px solid var(--clr-red); }  
.toast-info { border-left: 3px solid var(--clr-blue); }  
.toast-success i { color: var(--clr-green); }  
.toast-error i { color: var(--clr-red); }  
.toast-info i { color: var(--clr-blue); }  
.toast-text { flex: 1; color: var(--clr-text); }  
.toast-close {  
 color: var(--clr-text-3);  
 font-size: var(--text-xs);  
 transition: color var(--transition-fast);  
 flex-shrink: 0;  
}  
.toast-close:hover { color: var(--clr-white); }

/* ── 27. BACK TO TOP ── */  
.back-to-top {  
 position: fixed;  
 bottom: var(--space-6);  
 left: var(--space-6);  
 width: 44px;  
 height: 44px;  
 border-radius: var(--radius-md);  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 color: var(--clr-gold);  
 font-size: var(--text-base);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 opacity: 0;  
 pointer-events: none;  
 transition: all var(--transition-base);  
 z-index: 998;  
}  
.back-to-top.visible {  
 opacity: 1;  
 pointer-events: all;  
}  
.back-to-top:hover {  
 background: var(--clr-gold-glow);  
 border-color: rgba(201,168,76,0.35);  
 transform: translateY(-2px);  
}

/* ── 28. LOADING SPINNER ── */  
.spinner {  
 width: 20px; height: 20px;  
 border: 2px solid rgba(201,168,76,0.2);  
 border-top-color: var(--clr-gold);  
 border-radius: 50%;  
 animation: spin 0.7s linear infinite;  
}  
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 29. PAGE TRANSITIONS ── */  
.page-loader {  
 position: fixed;  
 inset: 0;  
 background: var(--clr-bg);  
 z-index: 9999;  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 transition: opacity 0.5s ease;  
}  
.page-loader.hidden { opacity: 0; pointer-events: none; }  
.loader-inner {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 gap: var(--space-5);  
}  
.loader-inner img { width: 120px; opacity: 0.9; }  
.loader-bar {  
 width: 160px; height: 2px;  
 background: var(--clr-border);  
 border-radius: 2px;  
 overflow: hidden;  
}  
.loader-bar-fill {  
 height: 100%;  
 background: linear-gradient(90deg, var(--clr-gold), var(--clr-gold-light));  
 border-radius: 2px;  
 animation: loadBar 1.5s ease forwards;  
}  
@keyframes loadBar {  
 from { width: 0; }  
 to { width: 100%; }  
}

/* ── 30. UTILITY CLASSES ── */  
.hidden { display: none !important; }  
.visible { display: block !important; }  
.flex { display: flex; }  
.items-center { align-items: center; }  
.justify-between { justify-content: space-between; }  
.gap-2 { gap: var(--space-2); }  
.gap-4 { gap: var(--space-4); }  
.mt-4 { margin-top: var(--space-4); }  
.mb-4 { margin-bottom: var(--space-4); }  
.text-center { text-align: center; }  
.w-full { width: 100%; }  
.count-up { display: inline; }  
.positive { color: var(--clr-green); }  
.negative { color: var(--clr-red); }