:root {
           --primary: #EFBF04;
           --primary-dark: #5a67d8;
           --secondary: #615f63;
           --accent: #6c757d;
           --success: #10b981;
           --warning: #f59e0b;
           --danger: #ef4444;
           --dark: #0f172a;
           --darker: #020617;
           --light: #f8fafc;
           --gray: #94a3b8;
           --border: #334155;
       }

       body {
           font-family: 'Poppins', sans-serif;
           background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
           color: var(--light);
           min-height: 100vh;
       }

       .plan-features li {
           color: #cbd5e1 !important;
       }

       .accordion-body{
        color: var(--light);
       }

       .gradient-bg {
           background: linear-gradient(135deg, var(--primary), var(--secondary));
       }

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

       .nav-shadow {
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       }

       .card-gradient {
           background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
           border: 1px solid var(--border);
           backdrop-filter: blur(10px);
       }

       .btn-platinum {
           background: linear-gradient(135deg, var(--primary), var(--secondary));
           color: white;
           border: none;
           transition: all 0.3s;
       }

       .btn-platinum:hover {
           transform: translateY(-2px);
           box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
           color: white;
       }

       .feature-icon {
           width: 60px;
           height: 60px;
           border-radius: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.5rem;
       }

       .stat-card {
           background: rgba(30, 41, 59, 0.8);
           border: 1px solid var(--border);
           border-radius: 15px;
           padding: 25px;
           transition: all 0.3s;
       }

       .stat-card:hover {
           transform: translateY(-5px);
           border-color: var(--primary);
       }

       .prestige-badge {
           background: linear-gradient(135deg, #FFD700, #FFA500);
           color: #000;
           font-weight: 600;
           padding: 5px 15px;
           border-radius: 20px;
           font-size: 0.9rem;
       }

       .chat-button {
           position: fixed;
           bottom: 30px;
           right: 30px;
           width: 60px;
           height: 60px;
           background: linear-gradient(135deg, var(--primary), var(--secondary));
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
           font-size: 1.5rem;
           cursor: pointer;
           box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
           z-index: 1000;
           transition: all 0.3s;
       }

       .chat-button:hover {
           transform: scale(1.1);
       }

       .chat-window {
           position: fixed;
           bottom: 100px;
           right: 30px;
           width: 350px;
           background: var(--dark);
           border: 1px solid var(--border);
           border-radius: 15px;
           display: none;
           z-index: 1000;
           box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
       }

       .converter-card {
           background: rgba(0, 209, 178, 0.1);
           border: 2px solid rgba(0, 209, 178, 0.3);
           border-radius: 15px;
           padding: 30px;
           transition: all 0.3s;
       }

       .converter-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 30px rgba(0, 209, 178, 0.2);
       }

       .unilevel-structure {
           background: rgba(102, 126, 234, 0.1);
           border-radius: 15px;
           padding: 30px;
       }

       .unilevel-level {
           text-align: center;
           padding: 15px;
           background: rgba(255, 255, 255, 0.05);
           border-radius: 10px;
       }

       .calculator-input {
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid var(--border);
           color: white;
           padding: 12px;
           border-radius: 8px;
           width: 100%;
       }

       .calculator-input:focus {
           background: rgba(255, 255, 255, 0.1);
           border-color: var(--primary);
           color: white;
           outline: none;
       }

       @media (max-width: 768px) {
           .chat-window {
               width: calc(100% - 40px);
               right: 20px;
               left: 20px;
           }

           .hero-title {
               font-size: 2.2rem !important;
           }
       }

       .modal-content {
           background: var(--dark);
           color: var(--light);
           border: 1px solid var(--border);
       }

       .modal-header {
           border-bottom: 1px solid var(--border);
       }

       .modal-footer {
           border-top: 1px solid var(--border);
       }

       .form-control {
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid var(--border);
           color: white;
       }

       .form-control:focus {
           background: rgba(255, 255, 255, 0.1);
           border-color: var(--primary);
           color: white;
           box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
       }

       .form-label {
           color: var(--gray);
       }

       .input-group-text {
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid var(--border);
           color: var(--light);
       }

       .risk-warning {
           background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
           border-left: 4px solid var(--danger);
           padding: 15px;
           border-radius: 0 8px 8px 0;
       }

       .dashboard-preview {
           background: rgba(30, 41, 59, 0.8);
           border: 1px solid var(--border);
           border-radius: 15px;
           padding: 30px;
           margin-top: 30px;
       }

       .currency-flag {
           width: 30px;
           height: 20px;
           border-radius: 3px;
           overflow: hidden;
           margin-right: 10px;
       }

       .conversion-history {
           max-height: 200px;
           overflow-y: auto;
       }

       .conversion-item {
           padding: 10px;
           border-bottom: 1px solid var(--border);
       }

       .conversion-item:last-child {
           border-bottom: none;
       }

       /* Crypto colors */
       .btc-color {
           color: #f7931a;
       }

       .eth-color {
           color: #627eea;
       }

       .usdt-color {
           color: #26a17b;
       }

       .bnb-color {
           color: #f0b90b;
       }

       .sol-color {
           color: #00ffa3;
       }

       .zar-color {
           color: #007749;
       }

       /* Countries Grid */
       .countries-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
           gap: 15px;
           margin-top: 20px;
       }

       .country-card {
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid var(--border);
           border-radius: 10px;
           padding: 20px;
           text-align: center;
           transition: all 0.3s;
       }

       .country-card:hover {
           transform: translateY(-3px);
           border-color: var(--primary);
       }

       .country-flag {
           width: 50px;
           height: 30px;
           margin: 0 auto 10px;
           border-radius: 5px;
           overflow: hidden;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       }

       /* Chat Styles */
       .chat-message {
           margin-bottom: 10px;
           padding: 12px;
           border-radius: 10px;
           max-width: 80%;
       }

       .chat-message.user {
           background: var(--primary);
           color: white;
           margin-left: auto;
       }

       .chat-message.bot {
           background: rgba(255, 255, 255, 0.1);
           color: var(--light);
       }

       .chat-typing {
           display: flex;
           align-items: center;
           gap: 5px;
           padding: 10px;
           background: rgba(255, 255, 255, 0.05);
           border-radius: 10px;
           margin-bottom: 10px;
       }

       .typing-dot {
           width: 8px;
           height: 8px;
           background: var(--primary);
           border-radius: 50%;
           animation: typing 1.4s infinite;
       }

       .typing-dot:nth-child(2) {
           animation-delay: 0.2s;
       }

       .typing-dot:nth-child(3) {
           animation-delay: 0.4s;
       }

       @keyframes typing {

           0%,
           60%,
           100% {
               transform: translateY(0);
           }

           30% {
               transform: translateY(-10px);
           }
       }