/* ============================================
   BLACKSTAR VIRTUAL MINT - UNIFIED THEME
   ISO 20022 Universal Finance Messaging Platform
   Applies to ALL pages: index, accounts, access,
   standard, green, professional, babyx, worldaid,
   register, dashboard
   ============================================ */

:root {
    /* ===== BRAND COLORS ===== */
    --bsvm-navy: #0f1b4d;
    --bsvm-navy-dark: #0a0a2e;
    --bsvm-navy-light: #1a2a6c;
    --bsvm-navy-pale: #e8eaf6;
    
    /* ===== GOLD ACCENT ===== */
    --bsvm-gold: #d4a853;
    --bsvm-gold-dark: #b8860b;
    --bsvm-gold-light: #f0d78c;
    --bsvm-gold-pale: #fff9e6;
    --bsvm-gold-bg: #fffde7;
    
    /* ===== ACCOUNT TYPE COLORS ===== */
    /* Access - Blue/Purple */
    --acct-access: #667eea;
    --acct-access-dark: #5a67d8;
    --acct-access-light: #a5b4fc;
    --acct-access-bg: #eef0ff;
    --acct-access-gradient: linear-gradient(135deg, #667eea, #764ba2);
    
    /* Standard - Green */
    --acct-standard: #11998e;
    --acct-standard-dark: #0d7a72;
    --acct-standard-light: #38ef7d;
    --acct-standard-bg: #e6faf7;
    --acct-standard-gradient: linear-gradient(135deg, #11998e, #38ef7d);
    
    /* Green - Dark Green */
    --acct-green: #2e7d32;
    --acct-green-dark: #1b5e20;
    --acct-green-light: #66bb6a;
    --acct-green-bg: #e8f5e9;
    --acct-green-gradient: linear-gradient(135deg, #1b5e20, #4caf50);
    
    /* Professional - Blue */
    --acct-professional: #1565c0;
    --acct-professional-dark: #0d47a1;
    --acct-professional-light: #42a5f5;
    --acct-professional-bg: #e3f2fd;
    --acct-professional-gradient: linear-gradient(135deg, #1565c0, #42a5f5);
    
    /* Baby X - Purple */
    --acct-babyx: #9b59b6;
    --acct-babyx-dark: #6a1b9a;
    --acct-babyx-light: #ce93d8;
    --acct-babyx-bg: #f3e5f5;
    --acct-babyx-gradient: linear-gradient(135deg, #6a1b9a, #ab47bc);
    
    /* World Aid - Orange */
    --acct-worldaid: #e65100;
    --acct-worldaid-dark: #bf360c;
    --acct-worldaid-light: #ff9800;
    --acct-worldaid-bg: #fff3e0;
    --acct-worldaid-gradient: linear-gradient(135deg, #bf360c, #ff9800);
    
    /* Agada Executive - Gold */
    --acct-agada: #d4a853;
    --acct-agada-dark: #b8860b;
    --acct-agada-light: #ffd700;
    --acct-agada-bg: #fffde7;
    --acct-agada-gradient: linear-gradient(135deg, #b8860b, #ffd700);
    
    /* ===== NEUTRAL COLORS ===== */
    --bsvm-white: #ffffff;
    --bsvm-off-white: #fafafa;
    --bsvm-light-gray: #f5f5f5;
    --bsvm-border: #e0e0e0;
    --bsvm-mid-gray: #9e9e9e;
    --bsvm-dark-gray: #616161;
    --bsvm-charcoal: #424242;
    --bsvm-near-black: #212121;
    --bsvm-text: #2d3748;
    --bsvm-text-light: #718096;
    --bsvm-text-muted: #a0aec0;
    
    /* ===== SEMANTIC COLORS ===== */
    --bsvm-success: #48bb78;
    --bsvm-success-dark: #2f855a;
    --bsvm-success-light: #c6f6d5;
    --bsvm-success-bg: #f0fff4;
    --bsvm-warning: #ed8936;
    --bsvm-warning-dark: #c05621;
    --bsvm-warning-light: #feebc8;
    --bsvm-warning-bg: #fffaf0;
    --bsvm-danger: #f56565;
    --bsvm-danger-dark: #c53030;
    --bsvm-danger-light: #fed7d7;
    --bsvm-danger-bg: #fff5f5;
    --bsvm-info: #4299e1;
    --bsvm-info-dark: #2b6cb0;
    --bsvm-info-light: #bee3f8;
    --bsvm-info-bg: #ebf8ff;
    
    /* ===== DASHBOARD COLORS ===== */
    --dash-bg: #f7f8fc;
    --dash-sidebar: #0f1b4d;
    --dash-sidebar-hover: #1a2a6c;
    --dash-card: #ffffff;
    --dash-card-border: #e2e8f0;
    --dash-stat-blue: linear-gradient(135deg, #667eea, #764ba2);
    --dash-stat-green: linear-gradient(135deg, #11998e, #38ef7d);
    --dash-stat-purple: linear-gradient(135deg, #9b59b6, #ce93d8);
    --dash-stat-orange: linear-gradient(135deg, #e65100, #ff9800);
    
    /* ===== REGISTER PAGE COLORS ===== */
    --reg-bg: #f7f8fc;
    --reg-card: #ffffff;
    --reg-step-active: #667eea;
    --reg-step-completed: #48bb78;
    --reg-step-pending: #e0e0e0;
    --reg-input-bg: #f8f9ff;
    --reg-input-border: #e0e0e0;
    --reg-input-focus: #667eea;
    
    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    
    /* ===== FONT SIZES ===== */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 0.95rem;
    --text-md: 1.1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --text-hero: 3rem;
    
    /* ===== FONT WEIGHTS ===== */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    
    /* ===== SPACING ===== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-hero: 5rem;
    
    /* ===== BORDER RADIUS ===== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50px;
    --radius-circle: 50%;
    
    /* ===== SHADOWS ===== */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 15px 50px rgba(0,0,0,0.15);
    --shadow-gold: 0 8px 25px rgba(212,168,83,0.25);
    --shadow-blue: 0 8px 25px rgba(102,126,234,0.25);
    --shadow-green: 0 8px 25px rgba(17,153,142,0.25);
    --shadow-orange: 0 8px 25px rgba(230,81,0,0.25);
    --shadow-purple: 0 8px 25px rgba(155,89,182,0.25);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 800;
    --z-modal: 1000;
    --z-toast: 2000;
}

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background: var(--bsvm-off-white);
    color: var(--bsvm-text);
    line-height: 1.7;
    min-height: 100vh;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    color: var(--bsvm-near-black);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
    margin-bottom: var(--space-md);
    color: var(--bsvm-text-light);
    line-height: 1.8;
}

a {
    color: var(--bsvm-navy-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--bsvm-navy);
}

strong {
    color: var(--bsvm-near-black);
    font-weight: var(--weight-semibold);
}

.text-gold { color: var(--bsvm-gold); }
.text-navy { color: var(--bsvm-navy); }
.text-success { color: var(--bsvm-success); }
.text-warning { color: var(--bsvm-warning); }
.text-danger { color: var(--bsvm-danger); }
.text-muted { color: var(--bsvm-text-muted); }

/* ============================================
   NAVIGATION - ALL PAGES
   ============================================ */

.navbar {
    background: var(--bsvm-white);
    padding: 0 var(--space-xl);
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: 1px solid var(--bsvm-border);
}

.navbar .logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: var(--weight-bold);
    color: var(--bsvm-navy);
}

.navbar .logo-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--bsvm-white);
}

/* Logo icon colors per page */
.logo-icon-default { background: linear-gradient(135deg, var(--bsvm-navy), var(--bsvm-navy-light)); }
.logo-icon-access { background: var(--acct-access-gradient); }
.logo-icon-standard { background: var(--acct-standard-gradient); }
.logo-icon-green { background: var(--acct-green-gradient); }
.logo-icon-professional { background: var(--acct-professional-gradient); }
.logo-icon-babyx { background: var(--acct-babyx-gradient); }
.logo-icon-worldaid { background: var(--acct-worldaid-gradient); }
.logo-icon-agada { background: var(--acct-agada-gradient); }

.navbar .logo span {
    color: var(--bsvm-gold);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-xs);
    align-items: center;
}

.nav-menu a {
    color: var(--bsvm-text-light);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: all var(--transition-fast);
}

.nav-menu a:hover {
    color: var(--bsvm-navy);
    background: var(--bsvm-navy-pale);
}

.nav-menu a.active {
    color: var(--bsvm-navy);
    font-weight: var(--weight-semibold);
    background: var(--bsvm-navy-pale);
}

/* Register button in nav */
.nav-menu .btn-register {
    background: var(--bsvm-navy);
    color: var(--bsvm-white) !important;
    padding: 0.6rem 1.5rem !important;
    border-radius: var(--radius-full) !important;
    font-weight: var(--weight-bold) !important;
}

.nav-menu .btn-register:hover {
    background: var(--bsvm-navy-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue);
    color: var(--bsvm-white) !important;
}

/* Mobile toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--bsvm-navy);
}

/* ============================================
   HERO SECTION - ALL PAGES
   ============================================ */

.hero {
    color: var(--bsvm-white);
    padding: var(--space-hero) var(--space-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 30% 60%, rgba(255,255,255,0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(0,0,0,0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero backgrounds per page */
.hero-default { background: linear-gradient(135deg, var(--bsvm-navy-dark), var(--bsvm-navy), var(--bsvm-navy-light)); }
.hero-access { background: var(--acct-access-gradient); }
.hero-standard { background: var(--acct-standard-gradient); }
.hero-green { background: var(--acct-green-gradient); }
.hero-professional { background: var(--acct-professional-gradient); }
.hero-babyx { background: var(--acct-babyx-gradient); }
.hero-worldaid { background: var(--acct-worldaid-gradient); }
.hero-agada { background: var(--acct-agada-gradient); color: var(--bsvm-navy); }

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: var(--text-hero);
    font-weight: var(--weight-extrabold);
    color: var(--bsvm-white);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.hero p {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.9);
    max-width: 700px;
    margin: 0 auto var(--space-xl);
}

.hero .account-icon {
    font-size: 5rem;
    margin-bottom: var(--space-md);
    animation: heroFloat 3s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Hero Badges */
.hero-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.hero-badge {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl);
    text-align: center;
    min-width: 180px;
    transition: all var(--transition-medium);
}

.hero-badge:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-5px);
}

.hero-badge .badge-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

.hero-badge .badge-label {
    font-size: var(--text-xs);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: var(--space-xs);
}

/* ============================================
   CONTAINER & SECTIONS
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.section {
    background: var(--bsvm-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--bsvm-border);
    transition: all var(--transition-medium);
}

.section:hover {
    box-shadow: var(--shadow-lg);
}

.section h2 {
    color: var(--bsvm-navy);
    font-size: 1.8rem;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 3px solid var(--bsvm-navy-pale);
}

.section h3 {
    color: var(--bsvm-near-black);
    font-size: var(--text-xl);
    margin: var(--space-xl) 0 var(--space-md);
}

.section p {
    color: var(--bsvm-text-light);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

/* Account-specific section h2 colors */
.section-access h2 { color: var(--acct-access); border-bottom-color: var(--acct-access-bg); }
.section-standard h2 { color: var(--acct-standard); border-bottom-color: var(--acct-standard-bg); }
.section-green h2 { color: var(--acct-green-dark); border-bottom-color: var(--acct-green-bg); }
.section-professional h2 { color: var(--acct-professional); border-bottom-color: var(--acct-professional-bg); }
.section-babyx h2 { color: var(--acct-babyx); border-bottom-color: var(--acct-babyx-bg); }
.section-worldaid h2 { color: var(--acct-worldaid); border-bottom-color: var(--acct-worldaid-bg); }

/* ============================================
   FEATURE CARDS - ALL PAGES
   ============================================ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.feature-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--bsvm-navy);
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transform: translate(30%, -30%);
    opacity: 0.5;
}

/* Feature card colors per account type */
.feature-card-default {
    background: var(--bsvm-navy-pale);
    border-left-color: var(--bsvm-navy);
}
.feature-card-default::after { background: radial-gradient(circle, rgba(15,27,77,0.05) 0%, transparent 70%); }

.feature-card-access {
    background: var(--acct-access-bg);
    border-left-color: var(--acct-access);
}
.feature-card-access::after { background: radial-gradient(circle, rgba(102,126,234,0.05) 0%, transparent 70%); }

.feature-card-standard {
    background: var(--acct-standard-bg);
    border-left-color: var(--acct-standard);
}
.feature-card-standard::after { background: radial-gradient(circle, rgba(17,153,142,0.05) 0%, transparent 70%); }

.feature-card-green {
    background: var(--acct-green-bg);
    border-left-color: var(--acct-green);
}
.feature-card-green::after { background: radial-gradient(circle, rgba(46,125,50,0.05) 0%, transparent 70%); }

.feature-card-professional {
    background: var(--acct-professional-bg);
    border-left-color: var(--acct-professional);
}
.feature-card-professional::after { background: radial-gradient(circle, rgba(21,101,192,0.05) 0%, transparent 70%); }

.feature-card-babyx {
    background: var(--acct-babyx-bg);
    border-left-color: var(--acct-babyx);
}
.feature-card-babyx::after { background: radial-gradient(circle, rgba(155,89,182,0.05) 0%, transparent 70%); }

.feature-card-worldaid {
    background: var(--acct-worldaid-bg);
    border-left-color: var(--acct-worldaid);
}
.feature-card-worldaid::after { background: radial-gradient(circle, rgba(230,81,0,0.05) 0%, transparent 70%); }

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.feature-card .feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    display: inline-block;
}

.feature-card h4 {
    font-size: var(--text-md);
    margin-bottom: var(--space-sm);
}

.feature-card-default h4 { color: var(--bsvm-navy); }
.feature-card-access h4 { color: var(--acct-access-dark); }
.feature-card-standard h4 { color: var(--acct-standard-dark); }
.feature-card-green h4 { color: var(--acct-green-dark); }
.feature-card-professional h4 { color: var(--acct-professional-dark); }
.feature-card-babyx h4 { color: var(--acct-babyx-dark); }
.feature-card-worldaid h4 { color: var(--acct-worldaid-dark); }

.feature-card p {
    color: var(--bsvm-charcoal);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ============================================
   BENEFITS LIST - ALL PAGES
   ============================================ */

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    padding: var(--space-md) 0;
    padding-left: 2.25rem;
    position: relative;
    border-bottom: 1px solid var(--bsvm-border);
    color: var(--bsvm-charcoal);
    transition: all var(--transition-fast);
}

.benefits-list li:hover {
    background: var(--bsvm-navy-pale);
    padding-left: 2.5rem;
}

.benefits-list li::before {
    content: '✅';
    position: absolute;
    left: 0;
    top: var(--space-md);
}

.benefits-list li:last-child {
    border-bottom: none;
}

.benefits-list li strong {
    color: var(--bsvm-navy);
}

/* ============================================
   POVERTY RELIEF BOX - ALL PAGES
   ============================================ */

.relief-box {
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.relief-box::before {
    content: '🎗️';
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: 3rem;
    opacity: 0.2;
}

/* Relief box colors per account */
.relief-box-default {
    background: linear-gradient(135deg, var(--bsvm-navy-pale), var(--bsvm-off-white));
    border: 2px solid var(--bsvm-navy);
}
.relief-box-access {
    background: linear-gradient(135deg, var(--acct-access-bg), var(--bsvm-white));
    border: 2px solid var(--acct-access);
}
.relief-box-standard {
    background: linear-gradient(135deg, var(--acct-standard-bg), var(--bsvm-white));
    border: 2px solid var(--acct-standard);
}
.relief-box-green {
    background: linear-gradient(135deg, var(--acct-green-bg), var(--bsvm-white));
    border: 2px solid var(--acct-green);
}
.relief-box-professional {
    background: linear-gradient(135deg, var(--acct-professional-bg), var(--bsvm-white));
    border: 2px solid var(--acct-professional);
}
.relief-box-babyx {
    background: linear-gradient(135deg, var(--acct-babyx-bg), var(--bsvm-white));
    border: 2px solid var(--acct-babyx);
}
.relief-box-worldaid {
    background: linear-gradient(135deg, var(--acct-worldaid-bg), var(--bsvm-white));
    border: 2px solid var(--acct-worldaid);
}

.relief-box h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.relief-box p {
    line-height: 1.7;
}

.relief-box ul {
    list-style: none;
    margin-top: var(--space-md);
}

.relief-box ul li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-lg);
    position: relative;
}

.relief-box ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    font-size: 0.7rem;
    top: 0.65rem;
}

/* ============================================
   STATS - ALL PAGES
   ============================================ */

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.stat-item {
    text-align: center;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    transition: all var(--transition-medium);
    border-top: 4px solid var(--bsvm-navy);
}

.stat-item-default { background: var(--bsvm-navy-pale); }
.stat-item-access { background: var(--acct-access-bg); border-top-color: var(--acct-access); }
.stat-item-standard { background: var(--acct-standard-bg); border-top-color: var(--acct-standard); }
.stat-item-green { background: var(--acct-green-bg); border-top-color: var(--acct-green); }
.stat-item-professional { background: var(--acct-professional-bg); border-top-color: var(--acct-professional); }
.stat-item-babyx { background: var(--acct-babyx-bg); border-top-color: var(--acct-babyx); }
.stat-item-worldaid { background: var(--acct-worldaid-bg); border-top-color: var(--acct-worldaid); }

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-item .stat-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}

.stat-item .stat-value {
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
}

.stat-item-default .stat-value { color: var(--bsvm-navy); }
.stat-item-access .stat-value { color: var(--acct-access-dark); }
.stat-item-standard .stat-value { color: var(--acct-standard-dark); }
.stat-item-green .stat-value { color: var(--acct-green-dark); }
.stat-item-professional .stat-value { color: var(--acct-professional-dark); }
.stat-item-babyx .stat-value { color: var(--acct-babyx-dark); }
.stat-item-worldaid .stat-value { color: var(--acct-worldaid-dark); }

.stat-item .stat-label {
    font-size: var(--text-xs);
    color: var(--bsvm-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   BUTTONS - ALL PAGES
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-medium);
    text-decoration: none;
    font-family: inherit;
    line-height: 1.5;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

/* Button variants */
.btn-primary {
    background: var(--bsvm-navy);
    color: var(--bsvm-white);
}
.btn-primary:hover { background: var(--bsvm-navy-light); box-shadow: var(--shadow-blue); }

.btn-gold {
    background: linear-gradient(135deg, var(--bsvm-gold), var(--bsvm-gold-dark));
    color: var(--bsvm-near-black);
}
.btn-gold:hover { box-shadow: var(--shadow-gold); }

.btn-outline {
    background: transparent;
    border: 2px solid var(--bsvm-navy);
    color: var(--bsvm-navy);
}
.btn-outline:hover { background: var(--bsvm-navy); color: var(--bsvm-white); }

.btn-outline-white {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: var(--bsvm-white);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: var(--bsvm-white); }

.btn-success { background: var(--bsvm-success); color: var(--bsvm-white); }
.btn-success:hover { background: var(--bsvm-success-dark); }

.btn-danger { background: var(--bsvm-danger); color: var(--bsvm-white); }
.btn-danger:hover { background: var(--bsvm-danger-dark); }

.btn-sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }
.btn-lg { padding: 1rem 2.5rem; font-size: var(--text-md); border-radius: var(--radius-full); }
.btn-block { width: 100%; justify-content: center; }

/* ============================================
   IMAGE PLACEHOLDER - ALL PAGES
   ============================================ */

.image-placeholder {
    border-radius: var(--radius-lg);
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    margin: var(--space-lg) 0;
    position: relative;
    overflow: hidden;
}

.image-placeholder::after {
    position: absolute;
    bottom: 1rem;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
}

.image-placeholder-default {
    background: linear-gradient(135deg, var(--bsvm-navy-pale), #d0d5f0);
    border: 2px dashed var(--bsvm-navy-light);
}
.image-placeholder-default::after { content: 'BlackStar Virtual Mint'; color: var(--bsvm-navy); }

.image-placeholder-access {
    background: linear-gradient(135deg, var(--acct-access-bg), #d0d5f0);
    border: 2px dashed var(--acct-access);
}
.image-placeholder-access::after { content: 'Access Account Gateway'; color: var(--acct-access-dark); }

.image-placeholder-standard {
    background: linear-gradient(135deg, var(--acct-standard-bg), #c8f7f0);
    border: 2px dashed var(--acct-standard);
}
.image-placeholder-standard::after { content: 'Standard Account Power'; color: var(--acct-standard-dark); }

.image-placeholder-green {
    background: linear-gradient(135deg, var(--acct-green-bg), #b9f6ca);
    border: 2px dashed var(--acct-green);
}
.image-placeholder-green::after { content: 'Green Account Sustainability'; color: var(--acct-green-dark); }

.image-placeholder-professional {
    background: linear-gradient(135deg, var(--acct-professional-bg), #90caf9);
    border: 2px dashed var(--acct-professional);
}
.image-placeholder-professional::after { content: 'Professional Account Skills'; color: var(--acct-professional-dark); }

.image-placeholder-babyx {
    background: linear-gradient(135deg, var(--acct-babyx-bg), #e1bee7);
    border: 2px dashed var(--acct-babyx);
}
.image-placeholder-babyx::after { content: 'Baby X Trust Fund'; color: var(--acct-babyx-dark); }

.image-placeholder-worldaid {
    background: linear-gradient(135deg, var(--acct-worldaid-bg), #ffe0b2);
    border: 2px dashed var(--acct-worldaid);
}
.image-placeholder-worldaid::after { content: 'World Aid Distribution Network'; color: var(--acct-worldaid-dark); }

/* ============================================
   CTA SECTION - ALL PAGES
   ============================================ */

.cta-section {
    text-align: center;
    padding: var(--space-3xl) var(--space-2xl);
    color: var(--bsvm-white);
    border-radius: var(--radius-2xl);
    margin: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255,215,0,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.cta-section h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    border: none;
    padding: 0;
}

.cta-section p {
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
    font-size: var(--text-md);
}

/* CTA backgrounds per page */
.cta-default { background: linear-gradient(135deg, var(--bsvm-navy-dark), var(--bsvm-navy), var(--bsvm-navy-light)); }
.cta-access { background: var(--acct-access-gradient); }
.cta-standard { background: var(--acct-standard-gradient); }
.cta-green { background: var(--acct-green-gradient); }
.cta-professional { background: var(--acct-professional-gradient); }
.cta-babyx { background: var(--acct-babyx-gradient); }
.cta-worldaid { background: var(--acct-worldaid-gradient); }

.cta-section h2,
.cta-default h2,
.cta-access h2,
.cta-standard h2,
.cta-green h2,
.cta-professional h2,
.cta-babyx h2,
.cta-worldaid h2 { color: var(--bsvm-white); }

.btn-cta {
    display: inline-block;
    background: var(--bsvm-gold);
    color: var(--bsvm-navy-dark);
    padding: 1rem 2.5rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    transition: all var(--transition-medium);
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
    background: var(--bsvm-gold-light);
}

/* ============================================
   TABLES - ALL PAGES
   ============================================ */

.card {
    background: var(--bsvm-white);
    border: 1px solid var(--bsvm-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: var(--space-lg) var(--space-xl);
    background: var(--bsvm-navy-pale);
    border-bottom: 1px solid var(--bsvm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    color: var(--bsvm-navy);
    margin: 0;
}

.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--bsvm-navy-pale);
}

th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-size: var(--text-xs);
    color: var(--bsvm-navy);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--weight-bold);
    border-bottom: 2px solid var(--bsvm-navy);
}

td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--bsvm-border);
    font-size: var(--text-sm);
    color: var(--bsvm-charcoal);
}

tbody tr:hover {
    background: var(--bsvm-navy-pale);
}

tbody tr:nth-child(even) {
    background: var(--bsvm-off-white);
}

tbody tr:nth-child(even):hover {
    background: var(--bsvm-navy-pale);
}

/* ============================================
   STATUS BADGES - ALL PAGES
   ============================================ */

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active,
.status-completed {
    background: var(--bsvm-success-light);
    color: var(--bsvm-success-dark);
}

.status-pending {
    background: var(--bsvm-warning-light);
    color: var(--bsvm-warning-dark);
}

.status-rejected,
.status-failed {
    background: var(--bsvm-danger-light);
    color: var(--bsvm-danger-dark);
}

.status-processing {
    background: var(--bsvm-info-light);
    color: var(--bsvm-info-dark);
}

/* ============================================
   REGISTER PAGE SPECIFIC
   ============================================ */

.register-container {
    background: var(--reg-bg);
    min-height: 100vh;
    padding: var(--space-xl);
}

.register-card {
    background: var(--reg-card);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
}

.register-header {
    background: var(--bsvm-navy);
    color: var(--bsvm-white);
    padding: var(--space-2xl);
    text-align: center;
}

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-lg);
}

.step {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    background: var(--reg-step-pending);
    color: var(--bsvm-text-muted);
}

.step.active {
    background: var(--reg-step-active);
    color: var(--bsvm-white);
}

.step.completed {
    background: var(--reg-step-completed);
    color: var(--bsvm-white);
}

.step-line {
    width: 60px;
    height: 2px;
    background: var(--reg-step-pending);
}

.step-line.completed {
    background: var(--reg-step-completed);
}

.form-step {
    display: none;
    padding: var(--space-2xl);
}

.form-step.active {
    display: block;
    animation: waFadeIn 0.4s ease;
}

.form-group label {
    display: block;
    color: var(--bsvm-charcoal);
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--reg-input-bg);
    border: 2px solid var(--reg-input-border);
    border-radius: var(--radius-md);
    color: var(--bsvm-near-black);
    font-size: var(--text-base);
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--reg-input-focus);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
    background: var(--bsvm-white);
}

/* ============================================
   DASHBOARD SPECIFIC
   ============================================ */

.dashboard-body {
    background: var(--dash-bg);
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: var(--dash-sidebar);
    padding: var(--space-lg);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: var(--space-lg);
    color: var(--bsvm-white);
    font-weight: var(--weight-bold);
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md);
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: var(--dash-sidebar-hover);
    color: var(--bsvm-white);
}

.sidebar-menu a.active {
    color: var(--bsvm-gold-light);
    font-weight: var(--weight-semibold);
}

.main-content {
    margin-left: 260px;
    flex: 1;
    padding: var(--space-xl);
}

/* Dashboard stat cards */
.dash-stat-card {
    background: var(--dash-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--dash-card-border);
    transition: all var(--transition-medium);
}

.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.dash-stat-card .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.dash-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--bsvm-white);
}

.dash-stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    color: var(--bsvm-navy);
}

.dash-stat-card .stat-change {
    font-size: var(--text-xs);
    margin-top: var(--space-xs);
}

.dash-stat-card .stat-change.positive { color: var(--bsvm-success); }
.dash-stat-card .stat-change.negative { color: var(--bsvm-danger); }

/* ============================================
   FOOTER - ALL PAGES
   ============================================ */

.footer {
    background: var(--bsvm-navy-dark);
    color: var(--bsvm-white);
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    margin-top: var(--space-2xl);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--bsvm-gold-light);
}

.footer p {
    color: rgba(255,255,255,0.6);
    font-size: var(--text-xs);
    margin-bottom: var(--space-xs);
}

/* ============================================
   ANIMATIONS - ALL PAGES
   ============================================ */

@keyframes waFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes waFadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes waFadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes waScaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: waFadeIn 0.6s ease forwards; }
.animate-left { animation: waFadeInLeft 0.6s ease forwards; }
.animate-right { animation: waFadeInRight 0.6s ease forwards; }
.animate-scale { animation: waScaleIn 0.5s ease forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ============================================
   MOBILE RESPONSIVE - ALL PAGES
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --text-hero: 2.5rem;
    }
    .section { padding: var(--space-xl); }
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
}

@media (max-width: 768px) {
    html { font-size: 14px; }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bsvm-white);
        flex-direction: column;
        padding: var(--space-md);
        box-shadow: var(--shadow-lg);
        border-bottom: 2px solid var(--bsvm-navy);
        z-index: var(--z-dropdown);
    }
    
    .nav-menu.mobile-open { display: flex; }
    .mobile-toggle { display: block; }
    
    .hero { padding: var(--space-2xl) var(--space-md); }
    .hero h1 { font-size: 2rem; }
    
    .hero-badges { flex-direction: column; align-items: center; }
    .hero-badge { width: 100%; max-width: 300px; }
    
    .feature-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .dashboard-body { flex-direction: column; }
    
    .container { padding: var(--space-md); }
    .section { padding: var(--space-lg); }
}

@media (max-width: 480px) {
    .stats-row { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}