:root {
            --bg-body: #f8fafc;
            --bg-surface: #ffffff;
            --bg-subtle: #f1f5f9;
            --text-heading: #0f172a;
            --text-body: #475569;
            --text-muted: #64748b;
            --primary-blue:#049b6d;
            --primary-hover: #1d4ed8;
            --primary-light: #eff6ff;
            --emerald-buy: #10b981;
            --emerald-light: #ecfdf5;
            --ruby-sell: #ef4444;
            --ruby-light: #fef2f2;
            --border-color: #e2e8f0;
            --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
            --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 20px 30px -10px rgba(15, 23, 42, 0.12);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-body);
            overflow-x: hidden;
        }

        /* Modern Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-blue);
        }
           .container{
               max-width: 1202px;
           }
        /* UI Cards & Surfaces */
        .surface-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .surface-card:hover {
            box-shadow: var(--shadow-md);
            border-color: #cbd5e1;
        }

        /* Navbar Styling */
        .navbar {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
            padding: 16px 0;
            transition: all 0.3s ease;
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            color: var(--text-heading) !important;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .brand-icon {
            width: 38px;
            height: 38px;
            background: #049b6d;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.1rem;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
        }

        .nav-link {
            color: var(--text-body) !important;
            font-weight: 600;
            font-size: 0.95rem;
            margin: 0 8px;
            transition: color 0.2s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary-blue) !important;
        }

        /* Custom Button Styling */
        .btn-brand-primary {
            background-color: var(--primary-blue);
            color: #ffffff;
            font-weight: 600;
            border-radius: 10px;
            padding: 10px 22px;
            border: none;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
            transition: all 0.25s ease;
        }

        .btn-brand-primary:hover {
            background-color: var(--primary-hover);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
        }

        .btn-brand-outline {
            background-color: var(--bg-surface);
            color: var(--text-heading);
            font-weight: 600;
            border-radius: 10px;
            padding: 10px 22px;
            border: 1px solid var(--border-color);
            transition: all 0.25s ease;
        }

        .btn-brand-outline:hover {
            background-color: var(--bg-subtle);
            border-color: #cbd5e1;
            color: var(--primary-blue);
        }

        /* Hero Section */
        .hero-section {
            padding: 140px 0 70px;
            background: radial-gradient(circle at 10% 20%, rgba(239, 246, 255, 0.8) 0%, rgba(248, 250, 252, 1) 90%);
        }

        .hero-badge {
            background: var(--primary-light);
            border: 1px solid rgba(37, 99, 235, 0.2);
            color: var(--primary-blue);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 24px;
        }

        .hero-title {
            color: var(--text-heading);
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-blue), #049b6d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Live Price Ticker Strip */
        .ticker-bar {
            background: var(--bg-surface);
            border-y: 1px solid var(--border-color);
            padding: 12px 0;
            overflow: hidden;
            white-space: nowrap;
        }

        .ticker-track {
            display: inline-flex;
            animation: marquee 30s linear infinite;
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 28px;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-heading);
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Live Market Tabs & Tables */
        .market-tab-btn {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            color: var(--text-body);
            padding: 10px 22px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .market-tab-btn:hover {
            border-color: var(--primary-blue);
            color: var(--primary-blue);
        }

        .market-tab-btn.active {
            background: var(--primary-blue);
            color: #ffffff;
            border-color: var(--primary-blue);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
        }

        .table-custom {
            color: var(--text-heading);
            vertical-align: middle;
        }

        .table-custom tr {
            border-bottom: 1px solid var(--border-color);
        }

        .table-custom tbody tr {
            transition: background 0.2s ease;
        }

        .table-custom tbody tr:hover {
            background: var(--bg-subtle);
        }

        /* Account Cards */
        .account-card {
            position: relative;
            background: var(--bg-surface);
            border-radius: 20px;
            padding: 32px;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .account-card.popular {
            border: 2px solid var(--primary-blue);
            box-shadow: var(--shadow-lg);
        }

        .popular-badge {
            position: absolute;
            top: -14px;
            right: 24px;
            background: var(--primary-blue);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            padding: 4px 14px;
            border-radius: 20px;
            text-transform: uppercase;
        }

        /* Form Customization */
        .form-control-custom, .form-select-custom {
            background-color: var(--bg-subtle);
            border: 1px solid var(--border-color);
            color: var(--text-heading);
            padding: 12px 16px;
            border-radius: 10px;
            font-weight: 500;
        }

        .form-control-custom:focus, .form-select-custom:focus {
            background-color: var(--bg-surface);
            border-color: var(--primary-blue);
            color: var(--text-heading);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        /* Accordion Light Styling */
        .accordion-item {
            border: 1px solid var(--border-color);
            border-radius: 12px !important;
            margin-bottom: 12px;
            overflow: hidden;
            background: var(--bg-surface);
        }

        .accordion-button {
            background: var(--bg-surface);
            color: var(--text-heading);
            font-weight: 700;
            padding: 20px;
            box-shadow: none !important;
        }

        .accordion-button:not(.collapsed) {
            background: var(--primary-light);
            color: var(--primary-blue);
        }

        .accordion-body {
            color: var(--text-body);
            line-height: 1.6;
        }

        /* Flashing price animation styles */
        .flash-up {
            background-color: rgba(16, 185, 129, 0.2) !important;
            transition: background-color 0.4s ease;
        }
        .flash-down {
            background-color: rgba(239, 68, 68, 0.2) !important;
            transition: background-color 0.4s ease;
        }

        /* Responsiveness */
        @media (max-width: 991px) {
            .hero-title {
                font-size: 2.5rem;
            }
        }