/* =========================================================
   VELOCITY COMMUNITY
   MIDNIGHT TACTICAL UI
   visual-only layer
   ========================================================= */

:root {
    --vc-bg-0:#060807;
    --vc-bg-1:#080b09;
    --vc-bg-2:#0b0f0c;

    --vc-surface:#0d120e;
    --vc-surface-2:#101611;
    --vc-surface-hover:#121a14;

    --vc-line:rgba(255,255,255,.065);
    --vc-line-hi:rgba(255,255,255,.11);

    --vc-green:34,214,181;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

html {
    background:var(--vc-bg-0);
}

body {
    min-height:100vh;

    background:
        radial-gradient(
            900px 520px at 15% -10%,
            rgba(var(--vc-green),.095),
            transparent 68%
        ),

        radial-gradient(
            720px 420px at 92% 14%,
            rgba(58,112,91,.055),
            transparent 72%
        ),

        radial-gradient(
            1000px 600px at 50% 95%,
            rgba(var(--vc-green),.025),
            transparent 70%
        ),

        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 84px,
            rgba(255,255,255,.006) 85px,
            transparent 86px
        ),

        linear-gradient(
            180deg,
            #0a0e0b 0%,
            #080b09 38%,
            #070a08 72%,
            #060807 100%
        ) !important;

    background-attachment:scroll !important;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    position:relative;
}

.section + .section {
    border-top:
        1px solid
        rgba(255,255,255,.018);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position:relative;
    isolation:isolate;
}

.hero::after {
    content:"";

    position:absolute;
    left:50%;
    bottom:0;

    width:min(900px,82%);
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--vc-green),.20),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   EYEBROWS / SMALL LABELS
   ========================================================= */

.eyebrow {
    color:rgba(120,240,214,.82);
}


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.server-card,
.staff-card,
.skin-login-card,
.vc-loadout-card,
.p-table {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            transparent 45%
        ),
        var(--vc-surface) !important;

    border-color:
        var(--vc-line) !important;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.17) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}


/* =========================================================
   CARD TOP HIGHLIGHT
   ========================================================= */

.panel,
.server-card,
.staff-card,
.vc-loadout-card {
    position:relative;
}

.panel::before,
.server-card::before,
.staff-card::before,
.vc-loadout-card::before {
    content:"";

    position:absolute;
    top:0;
    left:14%;
    right:14%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.065),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   WEAPON / SKIN CARDS
   ========================================================= */

.weapon-card,
.skin-opt {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.020),
            transparent 50%
        ),
        var(--vc-surface) !important;

    border-color:
        var(--vc-line) !important;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.11) !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease !important;
}


.weapon-card:hover,
.skin-opt:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(var(--vc-green),.24) !important;

    background:
        linear-gradient(
            145deg,
            rgba(var(--vc-green),.028),
            transparent 52%
        ),
        var(--vc-surface-hover) !important;
}


/* selected */

.weapon-card.equipped {
    border-color:
        rgba(var(--vc-green),.42) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(var(--vc-green),.035) !important;
}


.skin-opt.sel {
    background:
        linear-gradient(
            145deg,
            rgba(var(--vc-green),.055),
            transparent
        ),
        var(--vc-surface) !important;

    border-color:
        rgba(var(--vc-green),.48) !important;
}


/* =========================================================
   ITEM IMAGES
   ========================================================= */

.weapon-card img,
.skin-opt img {
    filter:
        drop-shadow(
            0 7px 8px
            rgba(0,0,0,.24)
        );
}


/* =========================================================
   INPUTS
   ========================================================= */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background:
        #0a0f0b !important;

    border-color:
        var(--vc-line) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.012) !important;

    transition:
        border-color .15s ease,
        background .15s ease !important;
}


input:hover,
textarea:hover,
select:hover {
    border-color:
        var(--vc-line-hi) !important;
}


input:focus,
textarea:focus,
select:focus {
    outline:none !important;

    border-color:
        rgba(var(--vc-green),.40) !important;

    box-shadow:
        0 0 0 3px
        rgba(var(--vc-green),.045) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    box-shadow:none !important;

    transition:
        transform .14s ease,
        background .14s ease,
        border-color .14s ease !important;
}


.btn:hover {
    transform:
        translateY(-1px);
}


.btn-ghost {
    background:
        rgba(255,255,255,.015) !important;

    border-color:
        var(--vc-line) !important;
}


.btn-ghost:hover {
    background:
        rgba(var(--vc-green),.035) !important;

    border-color:
        rgba(var(--vc-green),.18) !important;
}


/* =========================================================
   FILTER CHIPS
   ========================================================= */

.chip {
    background:
        rgba(255,255,255,.012) !important;

    border-color:
        var(--vc-line) !important;
}


.chip:hover {
    border-color:
        rgba(var(--vc-green),.18) !important;

    background:
        rgba(var(--vc-green),.025) !important;
}


/*
   NE diramo navbar .active.
   Samo filter/category chip active.
*/

.filter-bar .chip.active,
.cat-tabs .chip.active {
    border-color:
        rgba(var(--vc-green),.36) !important;
}


/* =========================================================
   TEAM CARDS
   ========================================================= */

.team-tab {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.020),
            transparent
        ),
        var(--vc-surface) !important;

    border-color:
        var(--vc-line) !important;

    box-shadow:none !important;
}


.team-tab:hover {
    border-color:
        var(--vc-line-hi) !important;
}


/* =========================================================
   LOADOUT
   ========================================================= */

.vc-loadout-card {
    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255,255,255,.035),
            transparent 42%
        ),
        var(--vc-surface) !important;
}


/* =========================================================
   PUNISHMENTS / TABLES
   ========================================================= */

.p-row {
    border-bottom-color:
        rgba(255,255,255,.042) !important;

    transition:
        background .12s ease !important;
}


.p-row.head {
    background:
        rgba(255,255,255,.012) !important;
}


.p-row:not(.head):hover {
    background:
        rgba(var(--vc-green),.018) !important;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            transparent 45%
        ),
        #0c110d !important;

    border-color:
        rgba(255,255,255,.085) !important;

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.50) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}


.modal-veil {
    background:
        rgba(2,4,3,.76) !important;

    backdrop-filter:
        blur(3px) !important;

    -webkit-backdrop-filter:
        blur(3px) !important;
}


/* =========================================================
   SCROLL PERFORMANCE
   ========================================================= */

.weapon-grid,
.skin-grid,
.p-table,
.vc-loadout-preview {
    contain:
        layout paint;
}


/*
   Ne renderuj section daleko ispod viewporta.
*/

.section {
    content-visibility:auto;
    contain-intrinsic-size:auto 650px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.footer {
    background:
        linear-gradient(
            180deg,
            rgba(8,11,9,.55),
            rgba(5,7,6,.92)
        ) !important;

    border-top:
        1px solid
        rgba(255,255,255,.038) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html {
    scrollbar-width:thin;

    scrollbar-color:
        rgba(var(--vc-green),.20)
        #060807;
}


body::-webkit-scrollbar {
    width:7px;
}


body::-webkit-scrollbar-track {
    background:#060807;
}


body::-webkit-scrollbar-thumb {
    background:
        rgba(var(--vc-green),.18);

    border-radius:20px;
}


body::-webkit-scrollbar-thumb:hover {
    background:
        rgba(var(--vc-green),.30);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

    body {
        background:
            radial-gradient(
                650px 400px at 40% -5%,
                rgba(var(--vc-green),.075),
                transparent 70%
            ),

            linear-gradient(
                180deg,
                #090d0a,
                #060807
            ) !important;
    }


    .modal-veil {
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }


    .panel,
    .server-card,
    .staff-card,
    .weapon-card,
    .skin-opt,
    .vc-loadout-card {
        box-shadow:
            0 7px 18px
            rgba(0,0,0,.14) !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

}


/* =========================================================
   FINAL FIX — RANKING NAV VERTICAL ALIGNMENT
   ========================================================= */

/*
 * Ranking ima potpuno isti vertikalni položaj
 * u normalnom i active stanju.
 */
.nav-links > a[href="/ranking.php"],
.nav-links > a[href="/ranking.php"].active {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding-top:9px !important;
    padding-bottom:9px !important;

    line-height:normal !important;
    vertical-align:middle !important;

    top:auto !important;
    bottom:auto !important;

    transform:none !important;
    translate:none !important;
    scale:none !important;
}

/*
 * Desktop horizontalni spacing ostaje isti
 * kao što ga navbar trenutno koristi.
 */
@media (min-width:901px) {
    .nav-links > a[href="/ranking.php"],
    .nav-links > a[href="/ranking.php"].active {
        padding-left:8px !important;
        padding-right:8px !important;
    }
}

.nav-links > a[href="/ranking.php"] svg,
.nav-links > a[href="/ranking.php"].active svg {
    position:static !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    vertical-align:middle !important;
}


/* =========================================================
   FINAL FIX — PUNISHMENTS ACTIVE FILTERS
   ========================================================= */

/*
 * SVE / BAN / MUTE / GAG / SILENCE / WARN
 * ostaju sivi kao ostali tekst,
 * ali active filter je jasno označen.
 */
#typeChips .chip {
    color:var(--ink-dim) !important;
}

#typeChips .chip svg {
    color:var(--ink-dim) !important;
}

#typeChips .chip.active {
    color:var(--ink-dim) !important;

    background:
        rgba(34,214,181,.075) !important;

    border-color:
        rgba(34,214,181,.34) !important;

    box-shadow:
        inset 0 0 0 1px rgba(34,214,181,.025),
        0 0 12px rgba(34,214,181,.045) !important;
}

#typeChips .chip.active svg {
    color:var(--ink-dim) !important;
}

/*
 * Hover active filtera također ne postaje crven.
 */
#typeChips .chip.active:hover {
    color:var(--ink) !important;

    background:
        rgba(34,214,181,.095) !important;

    border-color:
        rgba(34,214,181,.42) !important;
}


/* ========================================================= */


/* =========================================================
   VELOCITY HOMEPAGE V4
   NO NAVBAR OVERRIDES
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.vc-home-hero {
    min-height:640px !important;
    height:min(76vh,760px);

    position:relative;
    display:flex;
    align-items:center;

    overflow:hidden;

    background:#070a08 !important;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


/* stari animated orange glow nam više ne treba */
.vc-home-hero .hero-bg-loop {
    display:none !important;
}


.vc-home-hero .hero-video-wrap {
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    opacity:.52;

    z-index:0;
}


.vc-home-hero .hero-video-wrap video {
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 45%;

    display:block;
}


/* gasimo originalni video overlay */
.vc-home-hero .hero-video-wrap::after {
    display:none !important;
}


/* clean dark cinematic overlay */
.vc-home-hero-overlay {
    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            rgba(5,8,6,.98) 0%,
            rgba(5,8,6,.93) 30%,
            rgba(5,8,6,.68) 57%,
            rgba(5,8,6,.42) 100%
        ),

        linear-gradient(
            0deg,
            rgba(6,8,7,.96) 0%,
            transparent 35%
        ),

        radial-gradient(
            700px 440px at 24% 42%,
            rgba(34,214,181,.10),
            transparent 70%
        );
}


/* subtle tactical grid */
.vc-home-hero::after {
    content:"";

    position:absolute;
    inset:0;

    z-index:2;
    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.016) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.70),
            transparent 72%
        );

    opacity:.42;
}


/* ---------------------------------------------------------
   LOGO WATERMARK
   --------------------------------------------------------- */

.vc-home-watermark {
    position:absolute;

    z-index:2;

    width:min(440px,34vw);

    right:7%;
    top:50%;

    transform:
        translateY(-50%)
        rotate(-5deg);

    opacity:.055;

    pointer-events:none;
    user-select:none;
}


/* ---------------------------------------------------------
   HERO CONTENT
   --------------------------------------------------------- */

.vc-home-hero-inner {
    position:relative;
    z-index:4;

    width:100%;

    display:flex;
    flex-direction:column;

    justify-content:center;

    padding-top:54px;
    padding-bottom:34px;
}


.vc-home-copy {
    max-width:720px;
}


.vc-home-kicker {
    display:inline-flex;
    align-items:center;

    gap:9px;

    margin-bottom:22px;

    color:rgba(206,224,216,.72);

    font-family:var(--font-mono);
    font-size:11px;
    font-weight:700;

    letter-spacing:.14em;
}


.vc-live-dot {
    width:7px;
    height:7px;

    flex:0 0 auto;

    border-radius:50%;

    background:var(--tactical);

    box-shadow:
        0 0 0 4px rgba(34,214,181,.09);
}


.vc-home-copy h1 {
    max-width:720px;

    margin:0;

    font-size:
        clamp(46px,6.4vw,86px);

    line-height:.94;

    letter-spacing:-.045em;

    text-transform:none;
}


.vc-home-copy h1 span {
    display:block;

    color:
        rgba(229,236,231,.47);
}


.vc-home-copy > p {
    max-width:620px;

    margin:
        26px 0 0;

    color:
        rgba(221,230,224,.67);

    font-size:
        clamp(15px,1.4vw,18px);

    line-height:1.65;
}


/* ---------------------------------------------------------
   HERO ACTIONS
   --------------------------------------------------------- */

.vc-home-actions {
    display:flex;
    flex-wrap:wrap;

    gap:11px;

    margin-top:30px;
}


.vc-home-actions .btn {
    min-height:46px;

    padding:
        0 21px;
}


.vc-home-mini-features {
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:22px;

    color:
        rgba(204,216,208,.44);

    font-family:
        var(--font-mono);

    font-size:10.5px;

    letter-spacing:.04em;
}


/* ---------------------------------------------------------
   HERO STATS
   --------------------------------------------------------- */

.vc-home-stats {
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    margin-top:58px;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius:16px;

    background:
        rgba(9,13,10,.83);

    overflow:hidden;
}


.vc-home-stat {
    min-height:82px;

    padding:
        17px 22px;

    display:flex;
    flex-direction:column;

    justify-content:center;

    border-right:
        1px solid rgba(255,255,255,.055);
}


.vc-home-stat:last-child {
    border-right:0;
}


.vc-home-stat strong {
    color:
        rgba(235,241,237,.94);

    font-family:
        var(--font-mono);

    font-size:
        clamp(18px,2vw,26px);

    line-height:1;
}


.vc-home-stat span {
    margin-top:7px;

    color:
        rgba(196,210,201,.42);

    font-family:
        var(--font-mono);

    font-size:9.5px;

    letter-spacing:.10em;

    text-transform:uppercase;
}


/* ---------------------------------------------------------
   LIVE SERVER SECTION
   --------------------------------------------------------- */

.vc-home-servers {
    padding:
        72px 0 28px;
}


.vc-home-section-head {
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:40px;

    margin-bottom:28px;
}


.vc-home-section-head h2 {
    margin:
        10px 0 0;

    font-size:
        clamp(27px,3vw,40px);

    letter-spacing:-.025em;
}


.vc-home-section-head > p {
    max-width:470px;

    margin:0;

    color:
        var(--ink-dim);

    font-size:13.5px;
    line-height:1.65;
}


.vc-home-server-grid {
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;
}


/* actual server cards */
.vc-home-server-grid .server-card {
    position:relative;

    min-height:190px;

    border:
        1px solid rgba(255,255,255,.07) !important;

    background:
        radial-gradient(
            500px 180px at 0% 0%,
            rgba(34,214,181,.045),
            transparent 60%
        ),
        #0d120e !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.14)
        !important;
}


.vc-home-server-grid .server-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(34,214,181,.30)
        !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.20)
        !important;
}


.vc-home-server-grid .server-card-name {
    font-size:
        clamp(16px,1.6vw,20px);
}


.vc-home-server-grid .server-status-dot.online {
    box-shadow:
        0 0 0 4px rgba(34,214,181,.08),
        0 0 16px rgba(34,214,181,.30);
}


/* ---------------------------------------------------------
   FEATURE CARDS
   --------------------------------------------------------- */

.vc-home-features {
    padding-top:74px;
}


.vc-home-features .feature-card {
    min-height:220px;

    padding:30px;

    background:
        radial-gradient(
            400px 200px at 0% 0%,
            rgba(34,214,181,.035),
            transparent 70%
        ),
        #0d120e !important;
}


.vc-home-features .feature-card:hover {
    border-color:
        rgba(34,214,181,.25)
        !important;

    transform:
        translateY(-2px);
}


.vc-home-features .feature-icon {
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:22px;

    border:
        1px solid rgba(34,214,181,.15);

    border-radius:12px;

    background:
        rgba(34,214,181,.045);
}


/* ---------------------------------------------------------
   DISCORD CTA
   --------------------------------------------------------- */

.vc-home-discord-section {
    padding:
        34px 0 72px;
}


.vc-home-discord-card {
    position:relative;

    overflow:hidden;

    min-height:190px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:38px;

    padding:
        38px 42px;

    border:
        1px solid rgba(34,214,181,.15);

    border-radius:
        var(--r-lg);

    background:
        linear-gradient(
            115deg,
            rgba(34,214,181,.06),
            rgba(13,18,14,.98) 42%,
            rgba(13,18,14,.98)
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);
}


.vc-home-discord-glow {
    position:absolute;

    width:320px;
    height:320px;

    right:-100px;
    top:-160px;

    border-radius:50%;

    background:
        rgba(34,214,181,.065);

    filter:
        blur(1px);

    pointer-events:none;
}


.vc-home-discord-content {
    position:relative;

    z-index:1;

    display:flex;
    align-items:center;

    gap:24px;
}


.vc-home-discord-icon {
    width:64px;
    height:64px;

    flex:0 0 64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    color:var(--tactical);

    background:
        rgba(34,214,181,.07);

    border:
        1px solid rgba(34,214,181,.16);
}


.vc-home-discord-content h2 {
    margin:
        8px 0 8px;

    font-size:
        clamp(24px,3vw,36px);

    letter-spacing:-.025em;
}


.vc-home-discord-content p {
    max-width:580px;

    margin:0;

    color:
        var(--ink-dim);

    line-height:1.6;
}


.vc-home-discord-button {
    position:relative;

    z-index:1;

    flex:none;

    white-space:nowrap;
}


/* ---------------------------------------------------------
   PERFORMANCE
   --------------------------------------------------------- */

/*
 * Video više ne koristi filtere niti blur.
 */

.vc-home-hero video {
    filter:none !important;
}


/*
 * Sections daleko od viewporta browser može preskočiti.
 */

.vc-home-features,
.vc-home-discord-section,
#vip {
    content-visibility:auto;

    contain-intrinsic-size:
        auto 650px;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width:900px) {

    .vc-home-hero {
        min-height:620px !important;
        height:auto;
    }


    .vc-home-watermark {
        width:420px;

        right:-130px;

        opacity:.035;
    }


    .vc-home-stats {
        grid-template-columns:
            repeat(2,1fr);
    }


    .vc-home-stat:nth-child(2) {
        border-right:0;
    }


    .vc-home-stat:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(255,255,255,.055);
    }


    .vc-home-section-head {
        flex-direction:column;
        align-items:flex-start;

        gap:15px;
    }


    .vc-home-server-grid {
        grid-template-columns:1fr;
    }


    .vc-home-discord-card {
        align-items:flex-start;

        flex-direction:column;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:600px) {

    .vc-home-hero {
        min-height:680px !important;
    }


    .vc-home-hero .hero-video-wrap {
        opacity:.30;
    }


    .vc-home-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5,8,6,.77),
                rgba(5,8,6,.94) 65%,
                #060807
            ),
            radial-gradient(
                500px 400px at 25% 30%,
                rgba(34,214,181,.08),
                transparent 70%
            );
    }


    .vc-home-hero-inner {
        padding-top:60px;
    }


    .vc-home-copy h1 {
        font-size:
            clamp(42px,13vw,60px);
    }


    .vc-home-copy > p {
        font-size:15px;
    }


    .vc-home-mini-features {
        gap:9px 14px;
    }


    .vc-home-stats {
        margin-top:42px;
    }


    .vc-home-stat {
        padding:
            15px 16px;
    }


    .vc-home-servers {
        padding-top:54px;
    }


    .vc-home-discord-card {
        padding:
            28px 24px;
    }


    .vc-home-discord-content {
        align-items:flex-start;
    }


    .vc-home-discord-icon {
        display:none;
    }


    .vc-home-discord-button {
        width:100%;

        justify-content:center;
    }

}


/* ========================================================= */


/* =========================================================
   VC OBSIDIAN BACKGROUND FINAL
   ========================================================= */

html {
    background:#050706 !important;
}

body {
    background:
        radial-gradient(
            1100px 720px at -8% -8%,
            rgba(34,214,181,.095),
            transparent 62%
        ),

        radial-gradient(
            900px 650px at 108% 18%,
            rgba(75,105,190,.055),
            transparent 64%
        ),

        radial-gradient(
            850px 650px at 55% 105%,
            rgba(34,214,181,.025),
            transparent 68%
        ),

        linear-gradient(
            180deg,
            #090c0a 0%,
            #070a08 38%,
            #060806 72%,
            #050706 100%
        ) !important;

    background-attachment:scroll !important;
}


/* makni bilo kakvu staru grid teksturu */
body::before {
    display:none !important;
}


/* sekcije više nisu različite "trake" */
.section,
.section-alt {
    background:
        transparent !important;
}


/* paneli malo više plutaju iznad nove pozadine */
.panel,
.server-card,
.staff-card,
.skin-login-card,
.weapon-card,
.skin-opt,
.vc-loadout-card,
.p-table {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            transparent 55%
        ),
        rgba(12,17,13,.96)
        !important;

    border-color:
        rgba(255,255,255,.065)
        !important;
}


/* ---------------------------------------------------------
   HERO TYPOGRAPHY
   --------------------------------------------------------- */

.vc-home-copy h1 {
    line-height:.98 !important;

    letter-spacing:
        -.042em !important;
}

.vc-home-copy h1 span {
    margin-top:8px;

    color:
        rgba(223,233,226,.46)
        !important;
}


.vc-home-copy > p {
    max-width:660px;

    margin-top:25px !important;
}


/* buttons malo uredniji */

.vc-home-actions {
    gap:12px !important;
}

.vc-home-actions .btn {
    min-height:47px;

    padding-left:22px;
    padding-right:22px;
}


/* mini info više se ne lijepi */

.vc-home-mini-features {
    gap:22px !important;

    margin-top:23px !important;
}

.vc-home-mini-features span {
    display:inline-flex;

    align-items:center;

    white-space:nowrap;
}


/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.vc-home-stats {
    margin-top:48px !important;

    background:
        rgba(8,12,9,.90)
        !important;

    border-color:
        rgba(255,255,255,.07)
        !important;
}


.vc-home-stat {
    padding:
        18px 24px !important;
}


.vc-home-stat strong {
    display:block;

    margin-bottom:1px;
}


.vc-home-stat span {
    display:block;

    line-height:1.3;
}


.vc-stat-live {
    color:
        var(--tactical) !important;

    font-size:
        19px !important;

    letter-spacing:
        .08em !important;
}


/* vrlo blag glow iza početnog hero sadržaja */
.vc-home-hero-overlay {
    background:

        linear-gradient(
            90deg,
            rgba(5,8,6,.985) 0%,
            rgba(5,8,6,.92) 31%,
            rgba(5,8,6,.62) 58%,
            rgba(5,8,6,.35) 100%
        ),

        linear-gradient(
            0deg,
            #060806 0%,
            transparent 38%
        ),

        radial-gradient(
            680px 430px at 22% 43%,
            rgba(34,214,181,.085),
            transparent 69%
        )

        !important;
}


/* hero grid također gasimo */
.vc-home-hero::after {
    display:none !important;
}


/* mobile */
@media (max-width:600px) {

    .vc-home-mini-features {
        gap:10px 16px !important;
    }

    .vc-home-stat {
        padding:
            15px 16px !important;
    }

    body {
        background:
            radial-gradient(
                700px 500px at 15% -5%,
                rgba(34,214,181,.07),
                transparent 65%
            ),

            linear-gradient(
                180deg,
                #080b09,
                #050706
            )

            !important;
    }

}


/* ========================================================= */