/*==================================================
                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;

    align-items:center;

    gap:6px;

    margin-left:40px;

    flex:1;

}
.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;

}

/*==================================
        KONIEC NAGŁÓWKA I GŁÓWNEJ BUDOWY
==================================*/
/*==================================================
                    HERO
==================================================*/

.rules-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:520px;

    padding:170px 0 110px;

    text-align:center;

    background:

        linear-gradient(
            180deg,
            #07111b 0%,
            #0d1d30 45%,
            #15436d 100%
        );

}

.rules-hero::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(67,186,255,.22),
            transparent 70%
        );

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

}

.rules-hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

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

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

    color:#5FC8FF;

    font-weight:700;

}

.rules-hero h1{

    margin:28px 0 20px;

    color:white;

    font-size:4.4rem;

    font-weight:900;

}

.rules-hero p{

    max-width:720px;

    margin:auto;

    color:#d5e6f5;

    line-height:2;

    font-size:1.1rem;

}

.rules-info{

    margin-top:55px;

    display:flex;

    justify-content:center;

    gap:40px;

}

.rules-info div{

    padding:20px 30px;

    min-width:180px;

    border-radius:18px;

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

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

}

.rules-info span{

    display:block;

    color:#8eb9d8;

    font-size:.9rem;

    margin-bottom:8px;

}

.rules-info strong{

    color:white;

    font-size:1.2rem;

}

@keyframes heroGlow{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

}

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

.rules-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:560px;

    padding:180px 0 120px;

    background:
        linear-gradient(
            180deg,
            #07111b 0%,
            #0d1d30 45%,
            #15436d 100%
        );

}

.rules-hero::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(65,190,255,.20),
            transparent 70%
        );

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

}

.rules-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-180px;

    height:380px;

    background:

        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.15),
            transparent 70%
        );

}

.rules-hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

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

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

    color:#59C8FF;

    font-weight:700;

    backdrop-filter:blur(18px);

}

.rules-hero h1{

    margin:30px 0 20px;

    font-size:4.5rem;

    font-weight:900;

    color:#fff;

    letter-spacing:-2px;

}

.rules-hero p{

    max-width:760px;

    margin:auto;

    color:#d7e8f6;

    font-size:1.12rem;

    line-height:2;

}

@keyframes heroGlow{

    0%,100%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
                OVERVIEW
==================================================*/

.rules-overview{

    position:relative;

    margin-top:-70px;

    z-index:10;

}

.overview-grid{

    display:grid;

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

    gap:28px;

}

.overview-card{

    padding:38px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid #e8eef6;

    text-align:center;

    box-shadow:

        0 20px 45px rgba(17,62,105,.08);

    transition:.35s;

}

.overview-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 60px rgba(17,140,255,.14);

}

.overview-card i{

    font-size:2.7rem;

    color:#2DA8FF;

    margin-bottom:18px;

    display:block;

}

.overview-card h3{

    font-size:2.2rem;

    color:#163549;

    margin-bottom:10px;

    font-weight:800;

}

.overview-card span{

    color:#6f8498;

}

/*==================================================
                SEARCH
==================================================*/

.rules-search{

    padding:80px 0;

    background:#f7fbff;

}

.search-box{

    position:relative;

    max-width:760px;

    margin:auto;

}

.search-box i{

    position:absolute;

    left:28px;

    top:50%;

    transform:translateY(-50%);

    color:#2DA8FF;

    font-size:1.3rem;

}

.search-box input{

    width:100%;

    height:72px;

    border:none;

    outline:none;

    border-radius:20px;

    background:white;

    border:1px solid #dfeaf4;

    padding:0 30px 0 72px;

    font-size:1rem;

    transition:.35s;

    box-shadow:

        0 15px 40px rgba(20,70,120,.05);

}

.search-box input:focus{

    border-color:#2DA8FF;

    box-shadow:

        0 20px 55px rgba(45,168,255,.15);

}

/*==================================================
                LAYOUT
==================================================*/

.rules-layout{

    background:#f7fbff;

    padding:0 0 120px;

}

.rules-wrapper{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:45px;

    align-items:start;

}

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

@media(max-width:1100px){

    .overview-grid{

        grid-template-columns:1fr;

    }

    .rules-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .rules-hero{

        min-height:480px;

        padding:150px 20px 90px;

    }

    .rules-hero h1{

        font-size:3rem;

    }

    .rules-hero p{

        font-size:1rem;

    }

    .overview-card{

        padding:28px;

    }

    .search-box input{

        height:64px;

    }

}
/*==================================================
                RULES LAYOUT
==================================================*/

.rules-layout{

    position:relative;

    background:#f7fbff;

    padding:20px 0 120px;

}

.rules-wrapper{

    display:grid;

    grid-template-columns:290px 1fr;

    gap:45px;

    align-items:start;

}

/*==================================================
                SIDEBAR
==================================================*/

.rules-sidebar{

    position:sticky;

    top:120px;

    align-self:start;

}

.sidebar-card{

    background:#ffffff;

    border-radius:22px;

    border:1px solid #e7eef7;

    padding:30px;

    box-shadow:

        0 20px 45px rgba(20,70,120,.06);

}

.sidebar-card h3{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    font-size:1.35rem;

    color:#173549;

    font-weight:800;

}

.sidebar-card h3 i{

    color:#2DA8FF;

}

.sidebar-card nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sidebar-card nav a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    border-radius:14px;

    text-decoration:none;

    color:#71869a;

    font-weight:600;

    transition:.25s;

}

.sidebar-card nav a i{

    width:20px;

    text-align:center;

    color:#2DA8FF;

}

.sidebar-card nav a:hover{

    background:#eef8ff;

    color:#173549;

    transform:translateX(5px);

}



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

.rules-content{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*==================================================
            PLACEHOLDER SEKCJI
==================================================*/

.rules-content section{

    min-height:120px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid #e7eef7;

    box-shadow:

        0 15px 35px rgba(20,70,120,.05);

}

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

@media(max-width:1100px){

    .rules-wrapper{

        grid-template-columns:1fr;

    }

    .rules-sidebar{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .sidebar-card{

        padding:22px;

    }

    .sidebar-card nav a{

        padding:12px 14px;

    }

}
/*==================================================
                RULE CARD
==================================================*/

.rule-card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-radius:22px;

    border:1px solid #e8eef6;

    margin-bottom:22px;

    box-shadow:

        0 15px 40px rgba(20,70,120,.05);

    transition:.35s;

}

.rule-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 22px 55px rgba(20,70,120,.10);

}

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

.rule-header{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 35px;

    background:transparent;

    border:none;

    cursor:pointer;

}

.rule-header div{

    display:flex;

    align-items:center;

    gap:22px;

}

.rule-number{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:800;

    font-size:1.25rem;

    color:white;

    background:

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

    box-shadow:

        0 15px 30px rgba(17,140,255,.20);

}

.rule-header h2{

    color:#173549;

    font-size:1.45rem;

    font-weight:800;

}

.rule-header i{

    font-size:1.4rem;

    color:#2DA8FF;

    transition:.35s;

}

/*==================================================
                BODY
==================================================*/

.rule-body{

    max-height:0;

    overflow:hidden;

    transition:

        max-height .45s ease,

        padding .35s ease;

    padding:0 35px;

}

.rule-card.active .rule-body{

    max-height:2500px;

    padding:0 35px 35px;

}

.rule-card.active .rule-header i{

    transform:rotate(180deg);

}

.rule-body ol{

    margin:0;

    padding-left:22px;

}

.rule-body li{

    margin-bottom:16px;

    color:#647C92;

    line-height:1.9;

}

.rule-body li::marker{

    color:#2DA8FF;

    font-weight:700;

}

/*==================================================
            LEWY PASEK
==================================================*/

.rule-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:

        linear-gradient(
            180deg,
            #46BEFF,
            #118CFF
        );

}

/*==================================================
                HOVER
==================================================*/

.rule-card:hover .rule-number{

    transform:scale(1.06);

}

.rule-number{

    transition:.35s;

}

/*==================================================
                ACTIVE
==================================================*/

.rule-card.active{

    border-color:#46BEFF;

    box-shadow:

        0 25px 60px rgba(45,168,255,.15);

}
/*==================================================
            PROGRESS BAR
==================================================*/

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;

    z-index:999999;

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

}

/*==================================================
            BACK TO TOP
==================================================*/

.back-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:58px;

    height:58px;

    border:none;

    border-radius:18px;

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

    color:white;

    font-size:1.3rem;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:.35s;

    box-shadow:

        0 15px 35px rgba(17,140,255,.25);

}

.back-top.show{

    opacity:1;

    pointer-events:auto;

}

.back-top:hover{

    transform:translateY(-5px);

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

.footer{

    margin-top:120px;

    background:#08121f;

    color:#fff;

}

.footer .container{

    padding:70px 0 25px;

}

.footer-grid{

    display:grid;

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

    gap:70px;

}

.footer-logo{

    width:190px;

    display:block;

    margin-bottom:25px;

}

.footer-brand p{

    color:#98a9bb;

    line-height:1.9;

    max-width:420px;

}

.footer-links h3{

    margin-bottom:22px;

    font-size:1.2rem;

    color:white;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    text-decoration:none;

    color:#98a9bb;

    margin-bottom:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:#46BEFF;

    padding-left:6px;

}

.footer-bottom{

    margin-top:55px;

    padding-top:25px;

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

    text-align:center;

    color:#7f93a7;

}