/* ====== ROOT & BACKGROUND ====== */
:root{
    --bg-main:#12081f;
    --bg-card:#1f1036;
    --bg-card-2:#241244;
    --accent:#8b5cf6;
    --accent-2:#a78bfa;
    --text-muted:#c7bddf;
}

body{
    margin:0;
    font-family:'Inter', Arial, sans-serif;
    background:
        radial-gradient(1200px 600px at 50% -200px, #2a1458 0%, transparent 60%),
        var(--bg-main);
    color:#fff;
    line-height:1.7;
}

/* ====== LAYOUT ====== */
.page{
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

/* ====== HEADER ====== */
header{
    position:fixed;
    top:0;
    width:100%;
    background:rgba(24,11,41,.9);
    backdrop-filter: blur(8px);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.logo img{
    height:45px;
}

/* ====== HERO / BANNER ====== */
.banner{
    margin-top:100px;
    position:relative;
    border-radius:18px;
    overflow:hidden;
}

.banner img{
    width:100%;
    display:block;
    filter:brightness(60%);
}

.banner-content{
    position:absolute;
    top:20%;
    left:8%;
    max-width:420px;
    text-align:left;
}

.banner-content p:first-child{
    font-size:26px;
    font-weight:800;
    line-height:1.2;
}

.banner-content a{
    margin-top:14px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    padding:14px 26px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 8px 30px rgba(139,92,246,.45);
}

/* ====== SLOTS GRID ====== */
.slots{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    padding:20px 0;
}

.slot{
    background:linear-gradient(180deg,#1f1036,#241244);
    border-radius:14px;
    padding:10px;
    text-align:center;
    width:140px;
    transition:.25s ease;
}

.slot:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.slot img{
    width:100%;
    border-radius:10px;
    display:block;
}

.slot a{
    display:block;
    margin:10px auto 0;
    background:#9770ff;
    padding:8px 0;
    border-radius:999px;
    font-size:14px;
    width:100%;
}

/* ====== CONTENT ====== */
.content{
    max-width:1200px;
    margin:0 auto;
    padding:20px 0;
}

h1{
    font-size:34px;
    margin-bottom:20px;
}

h2{
    margin-top:40px;
    font-size:26px;
}

h3{
    margin-top:30px;
    font-size:20px;
}

p, li{
    color:var(--text-muted);
}

ul li{
    margin-bottom:8px;
}

/* ===== PREMIUM TABLE ===== */
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:24px 0;
    background:linear-gradient(180deg,#241244,#1a0d33);
    border-radius:16px;
    overflow:hidden;
    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);
}

thead th{
    background:linear-gradient(135deg,#8b5cf6,#a78bfa);
    color:#12081f;
    font-weight:800;
    padding:16px;
    font-size:15px;
    text-align:left;
}

tbody td{
    padding:16px;
    color:#e8e2ff;
    font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

tbody tr:last-child td{
    border-bottom:none;
}

tbody tr{
    transition:background .25s ease;
}

tbody tr:hover{
    background:rgba(139,92,246,.08);
}

/* ====== FOOTER ====== */
footer{
    margin-top:60px;
    background:#180b29;
    border-top:1px solid rgba(255,255,255,.06);
}


.banner-content a,
.slot a{
    text-decoration:none;
    color:#fff;
    font-weight:700;
}
.slot:hover a{
    box-shadow:0 0 12px rgba(134,65,255,.6);
}



@keyframes softGlow{
    0%{ box-shadow:0 0 0 rgba(139,92,246,0); }
    50%{ box-shadow:0 0 14px rgba(139,92,246,.6); }
    100%{ box-shadow:0 0 0 rgba(139,92,246,0); }
}

.bonus-fix{
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 10px;
        background-color: rgba(0, 0, 0, .85);
        width: 100%;
        z-index: 10;
        display: flex;
        justify-content: center;
}
.bonus-fixx{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
}
.offer-p{
    background:#9770ff !important;
    border:0 !important;
    text-rendering: optimizeLegibility !important; 
    font-size: 14px !important; 
    -webkit-font-smoothing: antialiased !important; 
    border-radius: 40px !important; 
    /*width: calc(50% - 10px) !important; */
    overflow: hidden !important; 
    display: inline-block !important; 
    vertical-align: middle !important; 
    padding: 10px 20px !important; 
    margin: 10px !important; 
    max-width: 300px !important; 
    box-sizing: border-box !important; 
    line-height: 180% !important; color: #ffffff !important; 
    text-decoration: none !important; 
    text-align: center !important; 
    transition: 0.4s !important; 
    font-weight: 700 !important; 
    outline: 0 !important;
}
.offer-w{
    background:#fff !important;
    border:0 !important;
    text-rendering: optimizeLegibility !important; 
    font-size: 14px !important; 
    -webkit-font-smoothing: antialiased !important; 
    border-radius: 40px !important; 
    /*width: calc(50% - 10px) !important; */
    overflow: hidden !important; 
    display: inline-block !important; 
    vertical-align: middle !important; 
    padding: 10px 20px !important; 
    margin: 10px !important; 
    max-width: 300px !important; 
    box-sizing: border-box !important; 
    line-height: 180% !important; 
    color: #000 !important; 
    text-decoration: none !important; 
    text-align: center !important; 
    transition: 0.4s !important; 
    font-weight: 700 !important; 
    outline: 0 !important;
}