:root { 
    --background: #05060a; 
    --panel: #11131b; 
    --panel-light: #171a24; 
    --text: #f5f5f7; 
    --muted: #9aa0b4; 
    --line: rgba(255,255,255,.09); 
    --purple: #8b5cf6; 
    --purple-dark: #6338d8; 
    --blue: #4fc3f7; 
    --blue-dark: #2d7fd6; 
    --green: #37d98a; 
} 
 
* { 
    box-sizing: border-box; 
} 
 
html { 
    scroll-behavior: smooth; 
} 
 
body { 
    margin: 0; 
    min-height: 100vh; 
    background-color: var(--background); 
    background-image: 
        radial-gradient(circle at 80% -5%, rgba(139, 92, 246, .28), transparent 40rem), 
        radial-gradient(circle at 5% 15%, rgba(79, 195, 247, .16), transparent 34rem), 
        linear-gradient(180deg, rgba(5,6,10,.55) 0%, rgba(5,6,10,.85) 55%, var(--background) 100%), 
        url('background-blur.jpg'); 
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; 
    background-position: top, top, top, top center; 
    background-size: auto, auto, auto, cover; 
    background-attachment: fixed, fixed, fixed, fixed; 
    color: var(--text); 
    font-family: 'Inter', Arial, Helvetica, sans-serif; 
    -webkit-font-smoothing: antialiased; 
} 
 
a { 
    text-decoration: none; 
    color: inherit; 
} 
 
button { 
    font: inherit; 
} 
 
::selection { 
    background: rgba(139, 92, 246, .35); 
} 
 
/* ===== NAVBAR ===== */ 
.navbar { 
    height: 76px; 
    padding: 0 6vw; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    border-bottom: 1px solid var(--line); 
    background: rgba(5,6,10,.65); 
    backdrop-filter: blur(20px); 
    position: sticky; 
    top: 0; 
    z-index: 10; 
} 
 
.logo { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-weight: 800; 
    letter-spacing: -.03em; 
    font-size: 15px; 
} 
 
.logo-mark { 
    width: 34px; 
    height: 34px; 
    border-radius: 10px; 
    object-fit: cover; 
    box-shadow: 0 0 0 1px var(--line), 0 4px 16px rgba(79, 195, 247, .25); 
} 
 
.nav-actions, 
.user-area { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
} 
 
.nav-link, 
.nav-button { 
    color: var(--muted); 
    background: none; 
    border: 0; 
    cursor: pointer; 
    font-weight: 600; 
    transition: color .15s ease; 
} 
 
.nav-link:hover, 
.nav-button:hover { 
    color: white; 
} 
 
main { 
    max-width: 1180px; 
    margin: auto; 
    padding: 0 28px; 
} 
 
/* ===== HERO ===== */ 
.hero { 
    min-height: 650px; 
    display: grid; 
    grid-template-columns: 1.3fr .7fr; 
    align-items: center; 
    gap: 70px; 
    animation: fade-up .7s ease both; 
} 
 
.badge { 
    display: inline-block; 
    color: #a9c8ff; 
    font-size: 12px; 
    font-weight: 800; 
    letter-spacing: .16em; 
    padding: 6px 14px; 
    border-radius: 999px; 
    border: 1px solid rgba(139, 92, 246, .35); 
    background: rgba(139, 92, 246, .08); 
} 
 
.hero h1 { 
    margin: 20px 0 25px; 
    font-size: clamp(54px, 8vw, 94px); 
    line-height: .92; 
    letter-spacing: -.07em; 
} 
 
.hero h1 span { 
    display: block; 
    background: linear-gradient(120deg, #9b7cff 10%, var(--blue) 90%); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
} 
 
.hero p { 
    color: var(--muted); 
    max-width: 620px; 
    font-size: 18px; 
    line-height: 1.7; 
} 
 
.hero-buttons { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    margin-top: 30px; 
} 
 
.primary-button, 
.secondary-button { 
    min-height: 46px; 
    padding: 0 22px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; 
    font-weight: 700; 
    border: 1px solid var(--line); 
    cursor: pointer; 
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; 
} 
 
.primary-button { 
    color: white; 
    background: linear-gradient(135deg, var(--purple), var(--blue-dark)); 
    border: 0; 
    box-shadow: 0 10px 30px rgba(139, 92, 246, .3); 
} 
 
.secondary-button { 
    background: rgba(255,255,255,.05); 
} 
 
.primary-button:hover { 
    transform: translateY(-2px); 
    filter: brightness(1.08); 
    box-shadow: 0 14px 36px rgba(139, 92, 246, .4); 
} 
 
.secondary-button:hover { 
    transform: translateY(-2px); 
    background: rgba(255,255,255,.09); 
} 
 
/* ===== CARDS ===== */ 
.bot-card, 
.server-card, 
.empty-card { 
    border: 1px solid var(--line); 
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); 
    border-radius: 24px; 
    box-shadow: 0 30px 90px rgba(0,0,0,.35); 
    backdrop-filter: blur(6px); 
} 
 
.bot-card { 
    padding: 38px 35px; 
    text-align: center; 
    position: relative; 
    overflow: hidden; 
} 
 
.bot-card::before { 
    content: ""; 
    position: absolute; 
    inset: -40% -40% auto -40%; 
    height: 60%; 
    background: radial-gradient(circle, rgba(79,195,247,.25), transparent 70%); 
    pointer-events: none; 
} 
 
.bot-icon { 
    width: 140px; 
    height: 140px; 
    margin: auto; 
    display: block; 
    border-radius: 32px; 
    object-fit: cover; 
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, .35), 
        0 20px 50px rgba(79, 195, 247, .25); 
    position: relative; 
} 
 
/* ===== ONLINE STATUS ===== */ 
.online { 
    margin-top: 22px; 
    color: var(--green); 
    font-size: 11px; 
    font-weight: 800; 
    letter-spacing: .05em; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
 
.online > span:first-child { 
    display: inline-block; 
    flex: 0 0 7px; 
    width: 7px; 
    height: 7px; 
    background: var(--green); 
    border-radius: 50%; 
    margin-right: 6px; 
    box-shadow: 0 0 8px var(--green); 
    animation: pulse 1.6s ease-in-out infinite; 
} 
 
.online > span:last-child { 
    display: inline; 
    width: auto; 
    height: auto; 
    background: none; 
    border-radius: 0; 
    margin: 0; 
    box-shadow: none; 
    animation: none; 
} 
 
.bot-card h2 { 
    margin: 12px 0 5px; 
    letter-spacing: -.02em; 
} 
 
.bot-card p { 
    margin: 0; 
    color: var(--muted); 
    font-size: 13px; 
} 
 
/* ===== FEATURES ===== */ 
.features { 
    padding: 50px 0 110px; 
} 
 
.section-heading { 
    display: flex; 
    align-items: baseline; 
    gap: 16px; 
    border-bottom: 1px solid var(--line); 
    margin-bottom: 28px; 
    padding-bottom: 14px; 
} 
 
.section-heading span { 
    color: var(--blue); 
    font-size: 12px; 
    font-weight: 800; 
    letter-spacing: .08em; 
} 
 
.section-heading h2 { 
    font-size: 34px; 
    letter-spacing: -.03em; 
} 
 
.feature-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 16px; 
} 
 
.feature-grid article { 
    padding: 26px; 
    border: 1px solid var(--line); 
    border-radius: 18px; 
    background: rgba(255,255,255,.03); 
    transition: transform .2s ease, border-color .2s ease, background .2s ease; 
} 
 
.feature-grid article:hover { 
    transform: translateY(-4px); 
    border-color: rgba(139, 92, 246, .4); 
    background: rgba(255,255,255,.05); 
} 
 
.feature-icon { 
    font-size: 26px; 
    width: 46px; 
    height: 46px; 
    display: grid; 
    place-items: center; 
    border-radius: 12px; 
    background: linear-gradient(145deg, rgba(139,92,246,.25), rgba(79,195,247,.15)); 
    margin-bottom: 14px; 
} 
 
.feature-grid h3 { 
    margin-bottom: 8px; 
    letter-spacing: -.01em; 
} 
 
.feature-grid p { 
    color: var(--muted); 
    line-height: 1.6; 
    font-size: 14px; 
} 
 
/* ===== DASHBOARD ===== */ 
.dashboard { 
    padding-top: 55px; 
    padding-bottom: 100px; 
    animation: fade-up .6s ease both; 
} 
 
.dashboard-header { 
    display: flex; 
    align-items: end; 
    justify-content: space-between; 
    gap: 25px; 
    margin-bottom: 40px; 
} 
 
.dashboard-header h1 { 
    margin: 8px 0; 
    font-size: 54px; 
    letter-spacing: -.06em; 
} 
 
.dashboard-header p { 
    color: var(--muted); 
} 
 
.server-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 18px; 
} 
 
.server-card { 
    padding: 24px; 
    transition: transform .2s ease, border-color .2s ease; 
} 
 
.server-card:hover { 
    transform: translateY(-3px); 
    border-color: rgba(79, 195, 247, .35); 
} 
 
.server-info { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 24px; 
} 
 
.server-icon { 
    width: 62px; 
    height: 62px; 
    border-radius: 18px; 
    object-fit: cover; 
} 
 
.server-fallback { 
    display: grid; 
    place-items: center; 
    background: #252837; 
} 
 
.server-card h3 { 
    margin: 0 0 7px; 
} 
 
.server-role { 
    color: var(--green); 
    font-size: 10px; 
    font-weight: 800; 
    letter-spacing: .08em; 
} 
 
.full { 
    width: 100%; 
} 
 
.invite-status { 
    min-height: 20px; 
    margin-top: 10px; 
    text-align: center; 
    color: var(--muted); 
    font-size: 13px; 
} 
 
.empty-card { 
    padding: 55px; 
    text-align: center; 
} 
 
.empty-card p { 
    color: var(--muted); 
} 
 
.avatar { 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    box-shadow: 0 0 0 2px rgba(139, 92, 246, .35); 
} 
 
/* ===== ANIMATIONS ===== */ 
@keyframes fade-up { 
    from { 
        opacity: 0; 
        transform: translateY(16px); 
    } 
 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
 
@keyframes pulse { 
    0%, 100% { 
        opacity: 1; 
    } 
 
    50% { 
        opacity: .4; 
    } 
} 
 
/* ===== LANGUAGE SELECTOR ===== */ 
 
.language-selector { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
} 
 
.language-button { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 8px 10px; 
    color: var(--muted); 
    background: none; 
    border: 0; 
    cursor: pointer; 
    font-weight: 600; 
    font-family: inherit; 
    white-space: nowrap; 
    transition: color .15s ease; 
} 
 
.language-button:hover { 
    color: white; 
} 
 
#current-language-flag { 
    font-family: 
        "Segoe UI Emoji", 
        "Apple Color Emoji", 
        "Noto Color Emoji", 
        sans-serif; 
    font-size: 17px; 
    line-height: 1; 
} 
 
#current-language { 
    font-size: 14px; 
} 
 
.language-menu { 
    display: none; 
    position: absolute; 
    top: calc(100% + 8px); 
    right: 0; 
    min-width: 170px; 
    padding: 6px; 
    background: #11131b; 
    border: 1px solid var(--line); 
    border-radius: 12px; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, .45); 
    z-index: 1000; 
} 
 
.language-menu.show { 
    display: block; 
} 
 
.language-menu button { 
    width: 100%; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 10px 12px; 
    color: var(--text); 
    background: transparent; 
    border: 0; 
    border-radius: 8px; 
    cursor: pointer; 
    text-align: left; 
    font-family: inherit; 
    font-size: 14px; 
} 
 
.language-menu button:hover { 
    background: rgba(255,255,255,.08); 
} 
 
.language-menu button::first-letter { 
    font-size: 17px; 
} 
 
/* ===== RESPONSIVE ===== */ 
 
@media (max-width: 800px) { 
 
    .navbar { 
        padding: 0 20px; 
    } 
 
    .hero { 
        grid-template-columns: 1fr; 
        padding: 75px 0; 
    } 
 
    .hero h1 { 
        font-size: 60px; 
    } 
 
    .feature-grid, 
    .server-grid { 
        grid-template-columns: 1fr; 
    } 
 
    .dashboard-header { 
        align-items: flex-start; 
        flex-direction: column; 
    } 
 
    .dashboard-header h1 { 
        font-size: 44px; 
    } 
 
    .user-area > span { 
        display: none; 
    } 
 
    .language-button { 
        padding: 8px 6px; 
    } 
 
    #current-language { 
        display: none; 
    } 
 
    .language-menu { 
        right: -10px; 
    } 
}