/*==================================================
                CLOUDMC STYLES
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/*==================================================
                ROOT
==================================================*/
html{

    scroll-behavior:smooth;

}
:root{

    --primary:#3BAEFF;
    --primary-dark:#1C8FFF;
    --primary-light:#79D0FF;

    --text:#16354A;
    --text-light:#6D8598;

    --white:#ffffff;

    --background:#F5FBFF;

    --glass:rgba(255,255,255,.72);

    --border:rgba(255,255,255,.60);

    --radius:24px;

    --transition:.35s ease;

}

/*==================================================
                RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Outfit",sans-serif;

    background:#F7FBFF;

    color:var(--text);

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:min(1450px,95%);

    margin:auto;

}

/*==================================================
                HEADER
==================================================*/

.header{

    position:fixed;

    top:18px;

    left:0;

    width:100%;

    z-index:9999;

    transition:var(--transition);

}

.header.scrolled{

    top:10px;

}

/*==================================================
                NAVBAR
==================================================*/

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;


    justify-content:space-between;

    min-height:78px;

    padding:10px 30px;

    border-radius:24px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(20px);

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

    box-shadow:

        0 15px 40px rgba(25,145,255,.08);

    transition:var(--transition);

}

.header.scrolled .navbar{

    min-height:72px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

}

/*==================================================
                    LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo img{

    width:92px;

    transition:var(--transition);

}

.logo:hover img{

    transform:scale(1.05);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h2{

    font-size:2rem;

    font-weight:800;

    line-height:1;

    color:#19384E;

}

.logo-text span{

    color:var(--primary);

}

.logo-text small{

    margin-top:4px;

    color:var(--text-light);

    font-size:.85rem;

}

/*==================================================
                MENU
==================================================*/
.mobile-menu{

    user-select:none;

}
.nav-menu{

    display:flex;
    width: 100%;
    align-items:center;

    gap:6px;

}

.nav-menu>li{

    position:relative;

}

.nav-menu>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border-radius:14px;

    color:#27475E;

    font-size:.98rem;

    font-weight:600;

    transition:var(--transition);

}

.nav-menu>li>a:hover{

    background:#EDF8FF;

    color:var(--primary);

}

.nav-menu>li>a i{

    font-size:.95rem;

}

/*==================================================
                DROPDOWN
==================================================*/

.dropdown-menu{

    position:absolute;

    top:115%;

    left:0;

    width:240px;

    padding:12px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(20px);

    border-radius:18px;

    border:1px solid #EDF7FF;

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:var(--transition);

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:none;

}

.dropdown-menu li a{

    display:block;

    padding:12px 15px;

    border-radius:12px;

    color:#35556C;

    transition:.25s;

}

.dropdown-menu li a:hover{

    background:#EEF8FF;

    color:var(--primary);

    padding-left:22px;

}

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

.nav-buttons{

    display:flex;

    align-items:center;

    gap:14px;

}

.discord-btn,

.shop-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 24px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

}

.discord-btn{

    background:white;

    color:#5865F2;

    border:1px solid #E4ECFF;

}

.discord-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 12px 30px rgba(88,101,242,.15);

}

.shop-btn{

    color:white;

    background:

    linear-gradient(

    135deg,

    #65CAFF,

    #249CFF

    );

    box-shadow:

        0 15px 35px rgba(36,156,255,.25);

}

.shop-btn:hover{

    transform:translateY(-4px);

}

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

.mobile-menu{

    display:none;

    font-size:2rem;

    color:var(--primary);

    cursor:pointer;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media (max-width:1200px){

    .mobile-menu{
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        font-size:2rem;
        z-index:10001;
    }

    .nav-buttons{
        display:none;
    }

    .nav-menu{

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

        display:none;

        flex-direction:column;

        background:white;

        border-radius:20px;

        padding:20px;

        margin-top:15px;

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

        z-index:10000;

    }

    .nav-menu.active{
        display:flex;
    }

    .dropdown-menu{

        display:none;

        position:static;

        opacity:1;

        visibility:visible;

        transform:none;

        width:100%;

        box-shadow:none;

        background:transparent;

        border:none;

        margin-left:20px;

    }

    .dropdown.open .dropdown-menu{

        display:block;

    }

}


@media(max-width:768px){

    .navbar{

        padding:12px 18px;

        min-height:72px;

    }

    .logo img{

        width:72px;

    }

    .logo-text h2{

        font-size:1.5rem;

    }

    .logo-text small{

        display:none;

    }

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding-top:180px;

background:
linear-gradient(
    to bottom,

    #ffffff 0%,
    #f4fbff 5%,
    #d8efff 10%,
    #8ec7ee 15%,
    #2d4d69 22%,

    #0d1720 30%,

    #071018 45%,

    #050505 60%,

    #050505 82%,

    #141414 92%,

    #ffffff 100%
);

}

/*==================================
        Gradient z navbara
==================================*/

.hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:220px;

    background:

        linear-gradient(

            to bottom,

            transparent 0%,

            rgba(255,255,255,.04) 35%,

            rgba(255,255,255,.10) 55%,

            rgba(255,255,255,.35) 75%,

            rgba(255,255,255,.75) 90%,

            white 100%

        );

}
.hero-mask{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            ellipse at center,

            transparent 40%,

            rgba(0,0,0,.18) 100%

        );

}
/*==================================
        Chmury
==================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("images/chmura.png");

    background-size:340px;

    opacity:.05;

    animation:cloudMove 120s linear infinite;

}

/*==================================
        Gwiazdy
==================================*/

.hero-stars{

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:120px 120px;

    opacity:.12;

    animation:starsMove 180s linear infinite;

}

/*==================================
        Światło
==================================*/

.hero-light{

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(62,183,255,.25),

        transparent 70%);

    filter:blur(90px);

    animation:pulse 5s ease-in-out infinite;

}

/*==================================
        CONTENT
==================================*/

.hero-content{

    position:relative;

    z-index:5;

    text-align:center;

    width:min(900px,92%);

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 28px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

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

    color:#63C8FF;

    letter-spacing:2px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:50px;

}

.hero h1{

    color:white;

    font-size:7rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-4px;

    margin-bottom:60px;

}

/*==================================================
                ABOUT OWNER
==================================================*/
/*==================================
        HERO → WHITE TRANSITION
==================================*/

.hero-transition{

    position:relative;

    height:260px;

    margin-top:-2px;

    overflow:hidden;

    background:
        linear-gradient(
            to bottom,
            #050505 0%,
            #0b1015 15%,
            #1d3345 30%,
            #4d89b6 55%,
            #a9dfff 78%,
            #eef9ff 92%,
            #ffffff 100%
        );

}

.hero-transition::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 60%,
            rgba(60,180,255,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(60,180,255,.15),
            transparent 35%
        );

    animation:transitionGlow 8s ease-in-out infinite;

}

@keyframes transitionGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.1);

        opacity:1;

    }

}
.about-owner{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:140px 0;

    background:#ffffff;

}

/*==================================
        TŁO
==================================*/

.about-owner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(54,175,255,.18),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(85,200,255,.14),
            transparent 32%
        ),

        radial-gradient(
            circle at 50% 10%,
            rgba(190,235,255,.45),
            transparent 45%
        );

    pointer-events:none;

}

/*==================================
        GRID
==================================*/

.about-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:center;

}

/*==================================
        RENDER
==================================*/

.about-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.about-image::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(48,170,255,.28),

        transparent 70%);

    filter:blur(60px);

    animation:pulseOwner 6s ease-in-out infinite;

}

.owner-render{

    position:relative;

    z-index:3;

    width:100%;

    max-width:420px;

    animation:floatingOwner 6s ease-in-out infinite;

    filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

    transition:.4s;

}

.owner-render:hover{

    transform:

        perspective(1200px)

        rotateY(10deg)

        scale(1.04);

}

/*==================================
        TEXT
==================================*/

.about-text{

    color:#183549;

}

.about-text h2{

    font-size:4rem;

    font-weight:900;

    line-height:1.1;

    margin:25px 0;

}

.about-text p{

    font-size:1.12rem;

    line-height:2;

    color:#5D7388;

    margin-bottom:28px;

}

/*==================================
        FEATURES
==================================*/

.owner-features{

    display:grid;

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

    gap:20px;

    margin-top:45px;

}

.owner-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    border-radius:20px;

    background:white;

    border:1px solid #E6F5FF;

    box-shadow:

        0 20px 40px rgba(40,170,255,.08);

    transition:.35s;

}

.owner-card:hover{

    transform:translateY(-8px);

    border-color:#43B6FF;

    box-shadow:

        0 30px 60px rgba(50,175,255,.18);

}

.owner-card i{

    color:#31AFFF;

    font-size:1.5rem;

}

.owner-card span{

    font-weight:700;

}

/*==================================
        ANIMATIONS
==================================*/

@keyframes floatingOwner{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes pulseOwner{

    0%,100%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.15);

        opacity:.8;

    }

}

/*==================================
        RESPONSIVE
==================================*/

@media(max-width:1100px){

.about-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.owner-features{

grid-template-columns:1fr;

}

.about-text h2{

font-size:3rem;

}

.owner-render{

max-width:330px;

}

}

@media(max-width:700px){

.about-owner{

padding:90px 0;

}

.about-text h2{

font-size:2.4rem;

}

.about-text p{

font-size:1rem;

}

.owner-card{

padding:18px;

}

}
/*==================================================
                CONTACT MODAL
==================================================*/

.contact-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(4,12,20,.75);

    backdrop-filter:blur(15px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:999999;

}

.contact-modal.active{

    opacity:1;

    visibility:visible;

}

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

.contact-box{

    position:relative;

    display:grid;

    grid-template-columns:360px 1fr;

    width:min(1100px,94%);

    min-height:650px;

    background:white;

    border-radius:30px;

    overflow:hidden;

    box-shadow:

        0 45px 120px rgba(0,0,0,.30);

    transform:translateY(40px) scale(.96);

    transition:.4s;

}

.contact-modal.active .contact-box{

    transform:none;

}

/*==================================================
                CLOSE
==================================================*/

.contact-close{

    position:absolute;

    top:20px;

    right:20px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#EEF7FF;

    cursor:pointer;

    font-size:1rem;

    transition:.3s;

    z-index:5;

}

.contact-close:hover{

    background:#2EA9FF;

    color:white;

    transform:rotate(90deg);

}

/*==================================================
                LEFT
==================================================*/

.contact-left{

    position:relative;

    background:

        linear-gradient(
            180deg,
            #1AA9FF,
            #0078FF
        );

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:50px;

    text-align:center;

    overflow:hidden;

}

.contact-left::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.22),

            transparent 70%

        );

    animation:pulseMail 6s infinite;

}

.mail-circle{

    position:relative;

    width:160px;

    height:160px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(20px);

    margin-bottom:35px;

    animation:floatingMail 6s ease-in-out infinite;

}

.mail-circle i{

    font-size:4.5rem;

}

.contact-left h2{

    font-size:2.3rem;

    margin-bottom:15px;

}

.contact-left p{

    opacity:.9;

    line-height:1.8;

    margin-bottom:40px;

}

/*==================================================
                LINKS
==================================================*/

.contact-links{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.contact-link{

    border:none;

    display:flex;

    align-items:center;

    gap:15px;

    width:100%;

    padding:16px 18px;

    background:rgba(255,255,255,.10);

    color:white;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

    font-size:1rem;

}

.contact-link:hover{

    background:white;

    color:#199BFF;

    transform:translateX(8px);

}

.contact-link i{

    font-size:1.2rem;

}

/*==================================================
                RIGHT
==================================================*/

.contact-right{

    padding:55px;

    display:flex;

    align-items:center;

}

.contact-form{

    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.contact-form input{

    height:56px;

    border-radius:15px;

    border:1px solid #DDEAF7;

    padding:0 18px;

    font-size:1rem;

    font-family:inherit;

    outline:none;

    transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#2EA9FF;

    box-shadow:0 0 0 4px rgba(46,169,255,.12);

}

.contact-form input[name="subject"]{

    grid-column:1/3;

}

.contact-form textarea{

    grid-column:1/3;

    min-height:180px;

    resize:none;

    border-radius:18px;

    border:1px solid #DDEAF7;

    padding:18px;

    font-family:inherit;

    outline:none;

}

.send-button{

    grid-column:1/3;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#46BEFF,#118CFF);

    color:white;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.send-button:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(17,140,255,.30);

}

/*==================================================
                TOAST
==================================================*/

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    background:#1F2937;

    color:white;

    padding:18px 22px;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:15px;

    opacity:0;

    transform:translateY(30px);

    transition:.35s;

    z-index:1000000;

}

.toast.show{

    opacity:1;

    transform:none;

}

.toast i{

    color:#2ECC71;

    font-size:1.4rem;

}

/*==================================================
                ANIMATIONS
==================================================*/

@keyframes floatingMail{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes pulseMail{

    0%,100%{

        transform:scale(1);

        opacity:.45;

    }

    50%{

        transform:scale(1.15);

        opacity:.8;

    }

}

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

@media(max-width:900px){

.contact-box{

grid-template-columns:1fr;

width:95%;

max-height:95vh;

overflow:auto;

}

.contact-left{

padding:40px;

}

.contact-right{

padding:30px;

}

.contact-form{

grid-template-columns:1fr;

}

.contact-form input[name="subject"],

.contact-form textarea,

.send-button{

grid-column:auto;

}

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

.staff-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:550px;

    padding:180px 0 120px;

    background:

        linear-gradient(
            180deg,
            #08131d 0%,
            #0b1826 35%,
            #10263d 70%,
            #14395c 100%
        );

}

.staff-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 50% 15%,
            rgba(72,188,255,.22),
            transparent 55%
        );

    animation:heroGlow 8s ease-in-out infinite;

}

.staff-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to bottom,

            transparent,

            rgba(0,0,0,.25)

        );

}

.staff-hero-content{

    position:relative;

    z-index:5;

}

.staff-hero h1{

    color:#fff;

    font-size:4.6rem;

    font-weight:900;

    letter-spacing:-2px;

    margin:25px 0;

}

.staff-hero p{

    max-width:760px;

    margin:auto;

    color:#D5E6F5;

    font-size:1.15rem;

    line-height:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

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

    color:#61C9FF;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

@keyframes heroGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
                SEKCJE
==================================================*/

.staff-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:#F7FBFF;

}

.staff-section:nth-child(even){

    background:#FFFFFF;

}

.staff-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(61,178,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,178,255,.025) 1px, transparent 1px);

    background-size:60px 60px;

    pointer-events:none;

}

.section-title{

    position:relative;

    z-index:5;

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:2.8rem;

    font-weight:800;

    color:#17384B;

    margin-bottom:16px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:#70879B;

    line-height:1.9;

    font-size:1.05rem;

}

/*==================================================
                    GRID
==================================================*/

.staff-grid{

    display:grid;

    gap:40px;

    justify-content:center;

}

.staff-grid-one{

    grid-template-columns:420px;

}

.staff-grid-two{

    grid-template-columns:repeat(2,420px);

}

.staff-grid-three{

    grid-template-columns:repeat(3,370px);

}
/*==================================================
            ODSTĘPY MIĘDZY GRUPAMI
==================================================*/

.staff-grid{

    margin-bottom:80px;

}

.staff-grid:last-child{

    margin-bottom:0;

}
/*==================================================
                    KARTA
==================================================*/

.staff-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:40px 35px;

    border-radius:26px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #111827 0%,
            #0C1420 100%
        );

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

    transition:.35s ease;

}

.staff-card:hover{

    transform:translateY(-10px);

}

/*==================================================
                GÓRNA POŚWIATA
==================================================*/

.staff-card::before{

    content:"";

    position:absolute;

    top:-120px;

    left:50%;

    transform:translateX(-50%);

    width:260px;

    height:260px;

    border-radius:50%;

    background:var(--glow);

    filter:blur(70px);

    opacity:.18;

    transition:.35s;

}

.staff-card:hover::before{

    opacity:.45;

}

/*==================================================
                DELIKATNY SHINE
==================================================*/

.staff-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:40%;

    height:320%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    transform:rotate(20deg);

    transition:1s;

}

.staff-card:hover::after{

    left:150%;

}
/*==================================================
                    RENDER
==================================================*/

.staff-render{

    width:190px;

    margin-bottom:18px;

    z-index:2;

    transition:.35s;

    filter:

        drop-shadow(
            0 20px 30px rgba(0,0,0,.35)
        );

}

.staff-card:hover .staff-render{

    transform:

        translateY(-8px)

        scale(1.05);

    filter:

        drop-shadow(
            0 0 25px var(--rank)
        )

        drop-shadow(
            0 22px 35px rgba(0,0,0,.45)
        );

}
/*==================================================
                    NICK
==================================================*/

.staff-card h3{

    color:white;

    font-size:2rem;

    font-weight:800;

    margin-bottom:18px;

    z-index:2;

}

/*==================================================
                    RANGA
==================================================*/

.rank-tag{

    width:130px;

    margin-bottom:22px;

    transition:.35s;

}

.staff-card:hover .rank-tag{

    transform:scale(1.05);

}

/*==================================================
                    OPIS
==================================================*/

.staff-card p{

    color:#C8D7E6;

    line-height:1.8;

    text-align:center;

    font-size:.96rem;

    margin-bottom:30px;

}
/*==================================================
                    SOCIAL
==================================================*/

.staff-socials{

    display:flex;

    gap:14px;

}

.staff-socials a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

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

    color:white;

    font-size:1.15rem;

    transition:.3s;

}

.staff-socials a:hover{

    background:var(--rank);

    transform:translateY(-4px);

    box-shadow:

        0 0 20px var(--glow);

}
/*==================================================
                KOLORY RANG
==================================================*/

.owner{

    --rank:#52C8FF;
    --glow:rgba(82,200,255,.45);

}

.admin{

    --rank:#FF4B55;
    --glow:rgba(255,75,85,.45);

}

.community{

    --rank:#B46CFF;
    --glow:rgba(180,108,255,.45);

}

.headmod{

    --rank:#2ECC71;
    --glow:rgba(46,204,113,.45);

}

.moderator{

    --rank:#58E587;
    --glow:rgba(88,229,135,.45);

}

.builder{

    --rank:#FFC933;
    --glow:rgba(255,201,51,.45);

}
/*==================================================
                PREMIUM EFFECTS
==================================================*/

.staff-card{

    isolation:isolate;

    cursor:default;

}

.staff-card:hover{

    transform:
        translateY(-10px)
        scale(1.015);

}

/*==========================================
            BORDER GLOW
==========================================*/

.staff-card{

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

}

.staff-card:hover{

    border-color:var(--rank);

    box-shadow:

        0 20px 60px rgba(0,0,0,.20),

        0 0 35px var(--glow);

}

/*==========================================
            SHINE
==========================================*/

.staff-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.staff-card .shine::before{

    content:"";

    position:absolute;

    top:-50%;

    left:-120%;

    width:55%;

    height:220%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:rotate(20deg);

    transition:1s;

}

.staff-card:hover .shine::before{

    left:170%;

}
/*==================================================
            SCROLL ANIMATION
==================================================*/

.staff-card{

    opacity:1;

    transition:.35s;

}
/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1300px){

    .staff-grid-three{

        grid-template-columns:repeat(2,370px);

    }

}

@media(max-width:950px){

    .staff-grid-two,

    .staff-grid-three{

        grid-template-columns:380px;

    }

}

@media(max-width:600px){

    .staff-grid-one,

    .staff-grid-two,

    .staff-grid-three{

        grid-template-columns:100%;

    }

    .staff-card{

        width:100%;

    }

    .staff-render{

        width:160px;

    }

    .staff-hero h1{

        font-size:2.8rem;

    }

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

.footer{

    background:
        linear-gradient(
            180deg,
            #08111c 0%,
            #0c1828 100%
        );

    padding:70px 0 25px;

    margin-top:120px;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:70px;

}

.footer-brand img{

    width:190px;

    margin-bottom:20px;

}

.footer-brand p{

    color:#93A7BB;

    line-height:1.9;

    max-width:420px;

}

.footer-links h3{

    color:#fff;

    margin-bottom:22px;

    font-size:1.15rem;

    font-weight:700;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:#93A7BB;

    text-decoration:none;

    margin-bottom:14px;

    transition:.25s;

    width:fit-content;

}

.footer-links a:hover{

    color:#4FC3FF;

    transform:translateX(6px);

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#6E8498;

    font-size:.95rem;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:950px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

}

@media(max-width:600px){

    .footer{

        padding:55px 0 20px;

    }

    .footer-brand img{

        width:160px;

    }

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

.footer{

    background:
        linear-gradient(
            180deg,
            #08111c 0%,
            #0c1828 100%
        );

    padding:70px 0 25px;

    margin-top:120px;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:70px;

}

.footer-brand img{

    width:190px;

    margin-bottom:20px;

}

.footer-brand p{

    color:#93A7BB;

    line-height:1.9;

    max-width:420px;

}

.footer-links h3{

    color:#fff;

    margin-bottom:22px;

    font-size:1.15rem;

    font-weight:700;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:#93A7BB;

    text-decoration:none;

    margin-bottom:14px;

    transition:.25s;

    width:fit-content;

}

.footer-links a:hover{

    color:#4FC3FF;

    transform:translateX(6px);

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#6E8498;

    font-size:.95rem;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:950px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

}

@media(max-width:600px){

    .footer{

        padding:55px 0 20px;

    }

    .footer-brand img{

        width:160px;

    }

}