:root {
    --bg-dark: #0a0b10;
    --card-bg: #161b22;
    --primary-gold: #ffcc00;
    --primary-green: #00ff88;
    --text-white: #ffffff;
    --text-gray: #8b949e;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-white);
    overflow-x: hidden;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* HERO */
.hero {
    padding: 100px 0;
    text-align: center;
    background: radial-gradient(circle at top, #1e2a3a 0%, var(--bg-dark) 70%);
}

.badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 255, 136, 0.1);
    color: var(--primary-green);
    border: 1px solid var(--primary-green);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 20px;
}

h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.highlight { color: var(--primary-green); text-shadow: 0 0 20px rgba(0,255,136,0.3); }

.subtitle { font-size: 1.2rem; color: var(--text-gray); margin-bottom: 40px; }

/* BUTTON */
.cta-button {
    display: inline-block;
    padding: 22px 45px;
    background: linear-gradient(90deg, #00ff88, #00bd65);
    color: #000;
    text-decoration: none;
    font-weight: 800;
    border-radius: 12px;
    font-size: 1.3rem;
    transition: 0.3s;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 255, 136, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}
.pulse { animation: pulse 2s infinite; }

.sub-cta { margin-top: 15px; font-size: 0.9rem; color: #ff4444; font-weight: bold; }

/* STATS */
.stats { display: flex; justify-content: center; gap: 40px; margin-top: 60px; }
.stat-item span { display: block; font-size: 1.5rem; font-weight: bold; color: var(--primary-gold); }

/* TABLE */
.live-section { padding: 80px 0; }
.table-wrapper { background: var(--card-bg); border-radius: 15px; padding: 20px; border: 1px solid #30363d; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 15px; color: var(--text-gray); border-bottom: 1px solid #30363d; }
td { padding: 15px; border-bottom: 1px solid #21262d; }
.status-ok { color: var(--primary-green); font-size: 0.8rem; font-weight: bold; border: 1px solid var(--primary-green); padding: 4px 8px; border-radius: 4px; }

/* REVIEWS */
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.review-card { background: #1c2128; padding: 30px; border-radius: 15px; font-style: italic; border-left: 4px solid var(--primary-gold); }
.author { margin-top: 15px; font-weight: bold; font-style: normal; color: var(--primary-gold); }

/* POPUP NOTIFICATION */
.payout-popup {
    position: fixed;
    bottom: -100px;
    left: 20px;
    background: #fff;
    color: #000;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: 0.5s ease-in-out;
    z-index: 9999;
}
.payout-popup.active { bottom: 20px; }
.popup-icon { font-size: 1.5rem; background: #e6fffa; border-radius: 50%; padding: 5px; }
.popup-info p { font-weight: bold; font-size: 0.9rem; }
.popup-info span { font-size: 0.8rem; color: #555; }

@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    .reviews-grid { grid-template-columns: 1fr; }
    .stats { flex-direction: column; gap: 20px; }
}