:root {
    --primary: #00f2fe;
    --accent: #8b25cb;
    --glass: rgba(255, 255, 255, 0.04);
    --border: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    background: #020204;
    color: #fff;
    font-family: 'Montserrat', 'Noto Kufi Arabic', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

/* Background */
.zenith-universe { position: fixed; inset: 0; z-index: -1; background: #010103; }
.nebula-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.3; }
.orb-1 { width: 600px; height: 600px; background: var(--primary); top: -200px; left: -200px; }
.orb-2 { width: 500px; height: 500px; background: var(--accent); bottom: -150px; right: -150px; }

.master-container {
    width: 100%;
    max-width: 900px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Navigation Dock */
.zenith-dock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 15, 22, 0.7);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    padding: 12px 25px;
    border-radius: 50px;
    border: 1px solid var(--border);
    box-shadow: 0 15px 45px rgba(0,0,0,0.6);
    
    /* ڕێگریکردن لە کەوتنە ژێرەوەی لیستەکان */
    position: relative;
    z-index: 9999;
}

.hologram-frame img { width: 42px; filter: drop-shadow(0 0 10px var(--primary)); }

.actions-area { display: flex; gap: 12px; }
.nav-item { position: relative; }

.glass-circle-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--glass); color: #fff; font-size: 18px; cursor: pointer; transition: 0.3s;
}
.glass-circle-btn:hover { background: var(--primary); color: #000; transform: scale(1.1); }

/* Dropdown Menus */
.glass-dropdown {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px);
    background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(20px);
    border: 1px solid var(--border); border-radius: 20px; padding: 12px;
    display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transition: 0.3s ease; z-index: 2000;
    min-width: 130px; box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}
.glass-dropdown.active { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Vertical Contact Style */
.glass-dropdown.vertical { min-width: 55px; border-radius: 30px; padding: 10px; }
.drop-icon {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; font-size: 20px; transition: 0.3s; background: rgba(255,255,255,0.03);
}
.drop-icon:hover { transform: scale(1.15); background: rgba(255,255,255,0.1); }
.wa:hover { color: #25d366; } .ig:hover { color: #E1306C; } .fb:hover { color: #1877F2; } .snap:hover { color: #FFFC00; } .tg:hover { color: #0088cc; }

/* نیشانەی هەورە تریشقەی ستاتیک (بێ ئیفێکت) */
.static-bolt {
    position: absolute; top: -3px; right: -3px; font-size: 12px; color: #ffcc00;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
html[dir="ltr"] .static-bolt { right: auto; left: -3px; }

.glass-dropdown a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; display: flex; align-items: center; gap: 8px;}
.glass-dropdown a:hover { background: rgba(255,255,255,0.05); color: var(--primary); }

/* Arena Layout */
.zenith-arena { flex: 1; display: flex; flex-direction: column; gap: 30px; padding-bottom: 50px;}

/* ------------------------------------- */
/* SPONSORS BUTTON (GLASS CAPSULE SHAPE) */
/* ------------------------------------- */
.priority-stack { display: flex; flex-direction: column; gap: 15px; width: 100%; align-items: center; margin-bottom: 5px; }

.super-sponsor-capsule {
    width: 100%; 
    max-width: 600px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px; 
    padding: 15px 25px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 2px 10px rgba(255,255,255,0.02);
}

.capsule-icon-wrap {
    width: 48px; height: 48px; 
    background: rgba(0, 242, 254, 0.08); 
    border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    border: 1px solid rgba(0,242,254,0.2); 
    flex-shrink: 0; 
}

.capsule-icon-wrap i { 
    font-size: 22px; color: var(--primary); 
    filter: drop-shadow(0 0 8px var(--primary)); 
}

.capsule-text { 
    font-size: 16.5px; font-weight: 900; color: #fff; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); 
    letter-spacing: 0.5px;
}

.super-sponsor-capsule:hover { 
    transform: translateY(-5px) scale(1.02); 
    background: rgba(255, 255, 255, 0.06); 
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 20px 45px rgba(0,0,0,0.5), 0 0 25px rgba(0, 242, 254, 0.15); 
}

/* Spatial Grid */
.spatial-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%;
}

.glass-tile {
    background: var(--glass); border: 1px solid var(--border); border-radius: 25px;
    padding: 30px 10px; text-decoration: none; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tile-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.glass-tile i { font-size: 32px; color: rgba(255,255,255,0.8); }
.glass-tile span { font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.5); }

.glass-tile:hover {
    transform: translateY(-8px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3);
}

/* Cyber Divider */
.cyber-divider {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 15px 0 5px; opacity: 0.9;
}
.glow-dot {
    width: 8px; height: 8px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary);
}
.cyber-divider span { font-size: 14px; font-weight: 900; color: var(--primary); white-space: nowrap; }
.glow-line { flex: 1; height: 1px; background: linear-gradient(to left, var(--primary), transparent); opacity: 0.4; }
html[dir="ltr"] .glow-line { background: linear-gradient(to right, var(--primary), transparent); }

/* Tools Grid */
.tools-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%;
}

.cyber-tool-btn {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px; padding: 20px; display: flex; align-items: center; gap: 15px;
    text-align: right; cursor: pointer; transition: 0.4s; color: #fff;
    position: relative; overflow: hidden;
}
.tool-icon {
    width: 45px; height: 45px; border-radius: 14px; background: rgba(255,255,255,0.05);
    display: flex; justify-content: center; align-items: center; font-size: 20px; color: rgba(255,255,255,0.8);
    flex-shrink: 0;
}
.tool-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tool-info h3 { font-size: 14px; font-weight: 800; margin: 0; }
.tool-info p { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); margin: 0; }
.arrow-indicator { font-size: 14px; opacity: 0.5; color: #fff; transition: 0.3s; }

.cyber-tool-btn:hover { background: rgba(255,255,255,0.05); transform: translateY(-4px); border-color: rgba(255,255,255,0.15); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.cyber-tool-btn:hover .arrow-indicator { transform: translateX(-5px); opacity: 1; }
html[dir="ltr"] .cyber-tool-btn:hover .arrow-indicator { transform: translateX(5px); }

/* VIP Special Styling */
.vip-tool { border-color: rgba(0, 242, 254, 0.3); background: linear-gradient(135deg, rgba(0,242,254,0.05), transparent); }
.vip-tool .tool-icon { background: rgba(0, 242, 254, 0.15); color: var(--primary); box-shadow: inset 0 0 10px rgba(0,242,254,0.2); }
.vip-tool:hover { border-color: var(--primary); background: linear-gradient(135deg, rgba(0,242,254,0.1), transparent); }
.vip-tool:hover .arrow-indicator { color: var(--primary); }

.dummy-tool { opacity: 0.7; cursor: not-allowed; }
.dummy-tool:hover { transform: none; background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); box-shadow: none; }

/* Responsive adjustments */
@media (max-width: 650px) {
    .spatial-grid { grid-template-columns: repeat(2, 1fr); }
    .tools-grid { grid-template-columns: 1fr; }
    
    /* ڕێکخستنی کەپسولەکە بۆ مۆبایل */
    .super-sponsor-capsule { padding: 12px 15px; gap: 12px; border-radius: 50px; max-width: 95%; }
    .capsule-icon-wrap { width: 40px; height: 40px; }
    .capsule-icon-wrap i { font-size: 18px; }
    .capsule-text { font-size: 10px; }
}