:root {
    
    --mainBackground: #1F1F1F;
    --navbarBorder: rgba(112, 112, 112, 0.29);
    --navbarStatic: rgba(203, 203, 203, 0.55);
    --activeColor: #a3cc41;
    --indicatorShadow: linear-gradient(180deg, rgba(163, 204, 65, 0.3) 0%, rgba(229, 45, 39, 0) 145.68%);
    --navbarOnline: rgba(255, 255, 255, 0.77);
    --navbarActive: #121111;
    --eula: #acacac;
    --footerBtn: #2a2a2a;
    --footerBtnHover: rgba(42, 42, 42, 0.75);

    
    --white: white;
    --headerBtn: #9ece47;
    --headerBtnColor: #1d1d1d;
    --headerDefaultBorder: #707070;
    --infoCardColor: #c8c8c8;

    --borderContainer: rgba(112, 112, 112, 0.36);
    --administrationCard: #2A2A2A;
    --administrationCardHover: rgba(42, 42, 42, 0.65);
    --administrationHref: #c4c4c4;

    
    --shopCard: #2A2A2A;
    --shopCardColor: rgba(203, 203, 203, 0.55);
    --shopCardHover: rgba(42, 42, 42, 0.62);
    --shopCardPrice: rgba(94, 94, 94, 0.41);

    
    --termsHeaderDescription: #acacac;
    --termsParagraph: #acacac;
}

300;400;500;600;700;800&display=swap');

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);
    border-radius: 0px;
}

.row-center{
    display: flex;
    align-items: center;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
}

@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1580px;
    }
}

.container-fluid--full{
    max-width: 100%;
}

@media (min-width: 1600px) {
    .container-fluid--full {
        max-width: 1920px;
    }
}

@media (min-width: 1920px) {
    body {
        min-height: 1080px;
    }

    .site-shell,
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    main {
        max-width: 1920px;
        margin: 0 auto;
        width: 100%;
    }
}

* {
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    height: 100%;
    overflow-x: hidden;
    background-color: var(--mainBackground);

    background-image: url("/assets/img/bgMain.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.navbar{
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar__link{
    display: flex;
    align-items: center;
}

.navbar__extras{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.navbar__status-container{
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar__status-details{
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.navbar__status-label{
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--navbarStatic);
}

.navbar__status-pill{
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.85rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
}

.navbar__status-pill--online{
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
}

.navbar__status-pill--warning{
    background: rgba(255, 215, 0, 0.35);
    color: #ffd700;
}

.navbar__status-pill--offline{
    background: rgba(255, 0, 0, 0.2);
    color: #ff6d6d;
}


.navbar__brand{
    position: relative;
    padding-right: 60px;
    margin-right: 0px;
}

.navbar__brand img{
    width: 55px;
}


.navbar__nav{
    position: relative;
    margin-top: 12px;
    display: flex;
    gap: 0px;
}

.navbar__nav li{
    list-style: none;
    padding: 0 30px;
    position: relative;
}

.navbar__nav a{
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
    color: var(--navbarStatic);
    transition: .3s;
}

.nav__active{
    font-weight: 600!important;
    color: var(--activeColor)!important;
}

.navbar__nav li:hover a{
    font-weight: 500!important;
    transition: .3s;
    color: var(--activeColor)!important;
}

.indicator{
    transition: transform 0.3s ease;
    position: absolute;
    display: none;
}

.indicator__active{
    display: flex;
}

.nav__active::before, .indicator::before{
    content: "";
    position: absolute;
    display: block;
    background: var(--indicatorShadow);
    filter: blur(12.5px);
    height: 60px;
    width: calc(100% + 30px);
    top: -63px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.nav__active::after, .indicator::after{
    content: "";
    z-index: 1;   display: block;
    position: absolute;
    background: var(--activeColor);
    height: 2px;
    width: calc(100% - 24px);
    top: -63px;
    left: 50%;
    transform: translateX(-50%);
}

.navbar__online{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-weight: normal;
    font-size: 13px;
    color: var(--navbarOnline);
}

.navbar__online b{
    font-weight: bold;
    font-size: 13px;
    color: var(--activeColor);
}

.online__blob{
    scale: 0.8;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    background-color: rgba(110, 255, 115, 0);
    border: 2px solid rgb(173, 200, 53);
    border-radius: 50px;
    margin-right: 8px;
    animation: animate 3s linear infinite;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.online__circle{
    position: absolute;
    border: 2px solid rgb(173, 200, 53);
    width: 18px;
    height: 18px;
    border-radius: 50px;
    animation: animate 3s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.online__circle--circle{
    background-color: rgb(173, 200, 53);
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    animation: animate 3s linear infinite;
}

@keyframes animate{
    0%{
        box-shadow:0 0 0 0 #20332C,0 0 0 0 #20332C;
        transform:scale(.7)
    }
    40%{
        box-shadow:0 0 0 15px #ff6d4a00,0 0 0 0 rgba(101, 148, 86, 0.54);
        transform:scale(.9)
    }
    80%{
        box-shadow:0 0 0 15px #ff6d4a00,0 0 0 15px #ff6d4a00;
        transform:scale(.8)
    }
    100%{
        box-shadow:0 0 0 0 #ff6d4a00,0 0 0 10px #ff6d4a00;
        transform:scale(.7)
    }
}

.navbar__menu{
    filter: brightness(0) invert(1);
    display: none;
    opacity: .7;
}

@media only screen and (max-width: 1100px) {
    .navbar{
        flex-direction: column;
        gap: 20px;
        padding: 40px 6%;
    }

    .navbar__menu{
        display: block;
    }

    .navbar__brand::after{
        content: "";
        background: transparent;
    }

    .navbar__nav{
        display: none;
    }

    .navbar__nav--active{
        display: block;
        position: absolute;
        top: 110px;
        background: var(--navbarActive);
        width: 89%;
        padding: 40px;
        border-radius: 18px;
    }

    .navbar__nav li{
        list-style: none;
        padding: 8px 0px;
    }

    .navbar__nav a{
        text-decoration: none;
        font-weight: normal;
        font-size: 14px;
        transition: .3s;
    }

    .indicator{
        transition: transform 0.3s ease;
        position: absolute;
        display: none;
    }

    .indicator__active{
        display: flex;
    }

    .nav__active::before, .indicator::before{
        display: none;
    }

    .nav__active::after, .indicator::after{
        display: none;
    }

    .nav__active::after{
        margin-left: -54px;
    }

    .nav__active::before{
        margin-left: -20px;
    }

    .navbar__online{
        display: none;
    }
}

.footer{
    margin-top: 100px;
}

.copyright{
    font-weight: 500;
    font-size: 14px;
    color: var(--activeColor);
    padding-bottom: 10px;
}

.footer__up{
    padding-top: 40px;
    border-top: 1px solid var(--navbarBorder);
    margin-bottom: 90px;
}

.footer__navbar{
    display: flex;
    justify-content: right;
}

.footer__nav{
    display: flex;
    gap: 50px;
}

.footer__nav li, .footer__nav a{
    list-style: none;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
    color: rgba(203, 203, 203, 0.55);
    transition: .3s;
}

.footer__nav a:hover{
    font-weight: 400!important;
    color: var(--activeColor);
}

.footer__nav a.active{
    transition: .3s;
    font-weight: 600!important;
    color: var(--activeColor);
}

.eula{
    font-weight: normal;
    font-size: 14px;
    color: var(--eula);
    margin-bottom: 50px;
}

.footer__btnSection{
    display: flex;
    gap: 17px;
}

.footer__btnSection--wrap{
    flex-wrap: wrap;
}

.footer__btn{
    border-radius: 8px;
    background: var(--footerBtn);
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    padding: 12px 30px;
    color: var(--navbarStatic);
    transition: .3s;
}

.footer__btn:hover{
    transition: .3s;
    background: var(--footerBtnHover);
}

.footer__center{
    margin-bottom: 50px;
}

.footer__social{
    margin-top: 20px;
}

.footer__social-label{
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--navbarStatic);
    margin-bottom: 12px;
}

.copy--second{
    font-weight: normal;
    font-size: 14px;
    color: var(--eula);
    opacity: 0.6;
}

.footer__down{
    padding-bottom: 70px;
}

@media only screen and (max-width: 900px) {
    .footer{
        margin-top: 80px;
        padding: 0 5%;
    }

    .footer__up{
        margin-bottom: 90px;
    }

    .footer__navbar{
        display: flex;
        justify-content: left;
        margin-bottom: 50px;
    }

    .footer__nav li:nth-child(1){
        margin-left: -30px;
    }

    }

@media only screen and (max-width: 1100px) {
    .footer{
        margin-top: 80px;
        padding: 0 5%;
    }
}

.header{
    padding: 80px 0 0;
    position: relative;
    overflow: visible;
}

.header__infoSection{
    padding-bottom: 80px;
}

.header__title{
    font-weight: 600;
    font-size: 50px;
    color: var(--white);
    width: 80%;
    margin-bottom: 30px;
}

.header__title span{
    color: var(--activeColor);
}

.header__description{
    font-weight: normal;
    font-size: 14px;
    color: var(--eula);
    margin-bottom: 70px;
}

.header__btnSection{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.header__btn{
    text-decoration: none;
    color: var(--white);
    font-weight: normal;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 25px 50px;
    border-radius: 12px;
    background: var(--footerBtn);
    border: 1px solid rgba(112, 112, 112, 0.36);
    transition: .3s;
}

.header__btn:hover{
    transition: .3s;
    transform: rotate(-2deg);
}

.header__btn--color{
    background: var(--headerBtn);
    border: 1px solid var(--headerBtn);
    color: var(--headerBtnColor);
    font-weight: 500;
}

.header__imgSection{
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.header__img{
    width: 440px;
    margin-top: -40px;
}

.header__infoCard{
    display: flex;
    gap: 20px;
    max-width: 320px;
    position: absolute;
    justify-content: center;
    align-items: center;
    border-radius: 21px;
    background: var(--footerBtn);
    border: 1px solid #707070;
    padding: 20px 30px;
    transform: rotate(-9deg);
    color: var(--white);
    transition: .3s;
    z-index: 2;
}

.header__infoCard:hover{
    transition: .3s;
    transform: scale(1.02) rotate(-9deg);;
}

.header__infoCard--first{
    right: clamp(80px, 10vw, 360px);
    top: 50px;
}

.header__infoCard--second{
    right: clamp(120px, 14vw, 440px);
    top: 160px;
    padding: 21px 27px;
}

.header__infoCard--info{
    font-weight: 500;
    font-size: 15px!important;
    margin-top: 4px;
}

.header__infoCard--second .header__infoCard--info{
    font-weight: normal;
    font-size: 13px!important;
    line-height: 15px!important;
    text-align: left;
    color: var(--infoCardColor);

}

.header__infoCard img{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.header__infoCard--info b{
    font-weight: bold;
    color: var(--activeColor);
}

.header__infoCard--second .header__infoCard--info{
    font-weight: normal;
    font-size: 13px!important;
    line-height: 15px!important;
    text-align: left;
    color: var(--infoCardColor);

}

.header__infoCard img{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.header__infoCard--info b{
    font-weight: bold;
    color: var(--activeColor);
}

@media only screen and (max-width: 1100px) {
    .header{
        padding: 50px 5% 0;
    }

    .header__infoSection{
        padding-bottom: 100px;
    }

    .header__title{
        font-size: 40px;
    }

    .header__imgSection{
        display: none;
    }

}

@media only screen and (max-width: 1200px) {
    .header__imgSection{
        display: none;
    }

}

@media only screen and (max-height: 900px) {
    .header{
        padding: 20px 0 0;
    }
}

.administration{
    margin-top: 60px;
    margin-bottom: 40px;
}

.administration__title{
    font-weight: 500;
    font-size: 20px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.administration__title::after{
    content: "";
    width: 60px;
    height: 2px;
    background-color: var(--activeColor);
}

.administration__container{
    border-radius: 41px;
    background: transparent;
    border: 1px solid var(--borderContainer);
    padding: 30px 30px 5px 30px;
}

.administration__card{
    margin-bottom: 25px;
    padding: 40px;
    background-color: var(--administrationCard);
    border-radius: 28px;
    transition: .3s;
}

.administration__card:hover{
    background-color: var(--administrationCardHover);
    transition: .3s;
    opacity: 1;
}

.administration__head{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
}

.administration__head img{
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.administration__info h5{
    margin-top: 5px;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
    color: var(--white);
}

.administration__info h6{
    font-weight: normal;
    font-size: 13px;
    color: var(--activeColor);
    margin-top: -8px;
}

.trailer{
    margin-top: 40px;
    margin-bottom: 50px;
}

.trailer__wrapper{
    position: relative;
    padding-top: 56.25%;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--borderContainer);
    background: #000;
}

.trailer__wrapper iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 1100px) {
    .navbar {
        flex-direction: column;
        gap: 20px;
        padding: 40px 0;
    }

    .navbar__nav{
        width: 100%;
        justify-content: center;
    }

    .navbar__nav li{
        padding: 0 18px;
    }

    .navbar__link{
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .navbar__extras{
        width: 100%;
        justify-content: space-between;
    }

    .administration__card{
        padding: 30px;
    }

    .administration__href{
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .navbar{
        padding: 30px 10px;
    }

    .mode-cards{
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .mode-card{
        padding: 18px;
    }

    .administration__card{
        padding: 25px;
    }

    .administration__header,
    .mode-section__header,
    .mode-preview__header{
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .administration__title{
        font-size: 18px;
    }

    .footer__navbar{
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__btnSection{
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .navbar__nav{
        flex-wrap: wrap;
        gap: 8px;
    }

    .navbar__nav li{
        padding: 0 12px;
    }

    .mode-card{
        padding: 16px;
        border-radius: 18px;
    }

    .header__title{
        font-size: 2rem;
    }

    .administration__card{
        padding: 18px;
    }

    .administration__href{
        padding:14px;
    }

    .trailer,
    .mode-section{
        padding: 20px;
    }
}

.administration__contact{
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
}

.administration__href{
    margin-top: 30px;
    border-radius: 12px;
    background: #141414;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 19px 25px;
    font-weight: normal;
    font-size: 13px;
    text-align: left;
    color: var(--administrationHref);
    text-decoration: none;
    transition: .3s;
}

.administration__href:hover{
    transition: .3s;
    color: var(--white);
    background: rgba(20, 20, 20, 0.45);
}

@media only screen and (max-width: 1100px) {
    .administration__container{
        margin: 0 5%;
        padding: 20px 20px 5px;
    }

    .administration__title{
        padding-left: 5%;
    }

    .administration__card{
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 600px) {
    .administration__container{
        margin: 0;
    }
}

.shop{
    border-radius: 41px;
    background: transparent;
    border: 1px solid var(--borderContainer);
    padding: 30px 30px 5px 30px;
}

.shop__card{
    filter: grayscale(1);
    margin-bottom: 25px;
    width: 100%;
    padding: 40px;
    background-color: var(--shopCard);
    border-radius: 28px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: right 0 top 10%;
    background-size: contain;
    background-repeat: no-repeat;
    transition: .3s;
}

.shop__card:hover{
    transition: .3s;
    filter: grayscale(0);
}

.shop__card--title{
    font-weight: 600;
    font-size: 24px;
    color: var(--white);
}

.shop__card--description{
    font-weight: normal;
    font-size: 12px;
    color: var(--eula);
    margin-bottom: 40px;
}

.shop__card--href{
    display: flex;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    color: var(--activeColor);
    transition: .3s;
}

.shop__card:hover .shop__card--href{
    gap: 25px;
    transition: .3s;
}

.shop__card--context{
    width: 50%;
}

.shop__card--icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.shop__card--icon img{
    width: 22px;
    height: 22px;
}

.shop__header{
    padding: 100px 0 90px;
    width: 500px;
}

.shop__header--title{
    font-weight: 600;
    font-size: 40px;
    color: var(--white);
}

.shop__header--title span{
    color: var(--activeColor);
}

.shop__header__btn{
    display: flex;
    justify-content: space-between;
    width: 270px;
    gap: 30px;
    padding: 14px 30px 14px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    background: #2a2a2a;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    color: var(--shopCardColor);
    text-decoration: none;
    transition: .3s;
}

.shop__header__btn:hover{
    transition: .3s;
    background: var(--shopCardHover);
}

.shop__card--price{
    border: 1px solid var(--shopCardPrice);
    border-radius: 10px;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
    color: var(--white);
    padding: 12px;
    margin-top: -15px;
    margin-bottom: 30px;
}

.shop__card--product{
    background-position: right -30px top 40%;
}

@media only screen and (max-width: 1100px) {
    .shop{
        padding: 20px 20px 7px 20px;
        margin: 0 5%;
    }

    .shop__card{
        padding: 40px 30px;
        margin-bottom: 15px;
        background-position: right -60px top 40% !important;
    }

    .shop__card:hover{
        transition: .3s;
        filter: grayscale(0);
    }

    .shop__card--context{
        width: 80%;
    }

    .shop__header{
        padding: 80px 5% 90px;
        width: auto;
    }

    .shop__header--title{
        font-size: 33px;
    }

    .shop__header__btn{
        font-size: 13px;
        padding: 17px 30px 17px 25px;
        gap: 10px;
        width: 250px;
    }

    .shop__card--price{
        width: 80%;
        padding: 12px;
    }

    .shop__card--product{
        background-position: right -30px top 40%;
    }
}

@media only screen and (max-width: 600px) {
    .shop{
        margin: 0;
    }
}

.mode-preview{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.mode-preview__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.mode-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.mode-card{
    padding: 24px;
    border-radius: 24px;
    background-color: #1f1f1f;
    border: 1px solid var(--borderContainer);
    text-decoration: none;
    color: inherit;
    transition: .3s;
}

.mode-card__icon{
    margin-bottom: 12px;
    width: 48px;
    height: 48px;
}

.mode-card__icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.mode-card:hover{
    transform: translateY(-4px);
    border-color: var(--activeColor);
}

.mode-card__title{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.mode-card__description{
    font-size: 0.9rem;
    color: var(--eula);
}

.mode-section{
    border-radius: 32px;
    border: 1px solid var(--borderContainer);
    padding: 32px;
    margin-bottom: 60px;
    background-color: var(--panel);
}

.mode-section__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 32px;
}

.mode-section__categories{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mode-category{
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--white);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 8px 18px;
    cursor: pointer;
    transition: .3s;
}

.mode-category:hover{
    border-color: var(--activeColor);
    color: var(--activeColor);
}

.mode-section__group{
    margin-top: 40px;
}

.mode-section__group-header h3{
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eula);
    margin-bottom: 24px;
}

.mode-section__products{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.mode-product-card{
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media only screen and (max-width: 900px) {
    .mode-section{
        padding: 24px;
        margin: 40px 0;
    }

    .mode-preview__header{
        flex-direction: column;
        align-items: flex-start;
    }
}

.last{
    margin-top: 70px;
}

.last__title{
    font-weight: 500;
    font-size: 20px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.last__title::after{
    content: "";
    width: 60px;
    height: 2px;
    background-color: var(--activeColor);
}

.last__container{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.last__box{
    border-radius: 12px;
    background: var(--shopCard);
    padding: 16px;
}

.last__box img{
    width: 30px;
    border-radius: 8px;
}

@media only screen and (max-width: 1100px) {
    .last{
        padding: 0 5%;
    }

    .last__box{
        padding: 12px;
    }

    .last__box img{
        width: 37px;
        border-radius: 8px;
    }
}

.terms__header{
    padding: 100px 0 90px;
    width: 50%;
}

.terms__header--title{
    font-weight: 600;
    font-size: 43px;
    color: var(--white);
}

.terms__header--description{
    font-weight: normal;
    font-size: 14px;
    color: var(--termsHeaderDescription);
}

.terms__container{
    border-radius: 41px;
    padding: 60px 60px 0;
    border: 1px solid var(--borderContainer);
}

.terms__section{
    padding-bottom: 60px;
}

.terms__title{
    font-weight: 600;
    font-size: 19px;
    color: var(--activeColor);
    margin-bottom: 15px;
}

.terms__subtitle{
    font-weight: normal;
    font-size: 14px;
    color: var(--white);
    margin-bottom: 35px;
}

.terms__paragraph{
    font-weight: normal;
    font-size: 13px;
    color: var(--termsParagraph);
}

@media only screen and (max-width: 1100px) {
    .terms__header{
        padding: 60px 0 90px;
        width: 80%;
    }

    .terms{
        padding: 0 5%;
    }

    .terms__container{
        border-radius: 41px;
        padding: 50px 30px 0;
    }

    .terms__section{
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 600px) {
    .terms__header{
        width: 100%;
        padding: 100px 5% 90px;
    }

    .terms{
        padding: 0;
    }
}

:root {
    color-scheme: dark;
}

body {
    color: #e6e6e6;
}

.font-display,
.font-body {
    font-family: "Poppins", sans-serif;
}

.text-neon {
    color: var(--activeColor, #a3cc41);
}

.bg-neon {
    background-color: var(--headerBtn, #9ece47);
    color: var(--headerBtnColor, #1d1d1d);
}

.border-neon {
    border-color: var(--activeColor, #a3cc41);
}

.shadow-glow {
    box-shadow: 0 0 40px rgba(163, 204, 65, 0.18);
}

.card-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hero-orbit {
    position: relative;
}

.hero-orbit::after {
    content: "";
    position: absolute;
    inset: -36px;
    border: 1px solid rgba(163, 204, 65, 0.25);
    border-radius: 999px;
    filter: blur(0.6px);
}

.glass-panel {
    background: var(--footerBtn, #2a2a2a);
    border: 1px solid var(--borderContainer, rgba(112, 112, 112, 0.36));
    border-radius: 28px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--borderContainer, rgba(112, 112, 112, 0.36));
    background: rgba(20, 20, 20, 0.75);
    color: var(--activeColor, #a3cc41);
    font-size: 0.75rem;
}

.price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--white, #ffffff);
}

.section-title {
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white, #ffffff);
}

.table-grid {
    width: 100%;
    border-collapse: collapse;
}

.table-grid th,
.table-grid td {
    border-bottom: 1px solid var(--navbarBorder, rgba(112, 112, 112, 0.29));
    padding: 12px 16px;
    text-align: left;
}

.table-grid thead {
    background: #1b1b1b;
    color: var(--navbarStatic, rgba(203, 203, 203, 0.55));
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table-grid tbody tr {
    transition: background-color 0.2s ease;
}

.table-grid tbody tr:hover {
    background: #1b1b1b;
}

.form-input {
    background: #2a2a2a;
    border: 1px solid var(--navbarBorder, rgba(112, 112, 112, 0.29));
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--white, #ffffff);
    width: 100%;
}

.form-input:focus {
    border-color: var(--activeColor, #a3cc41);
    box-shadow: 0 0 0 2px rgba(163, 204, 65, 0.15);
    outline: none;
}

.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.button-primary {
    background: var(--headerBtn, #9ece47);
    border: 1px solid var(--headerBtn, #9ece47);
    color: var(--headerBtnColor, #1d1d1d);
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

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

.button-secondary {
    border: 1px solid var(--borderContainer, rgba(112, 112, 112, 0.36));
    color: var(--navbarStatic, rgba(203, 203, 203, 0.55));
    padding: 12px 26px;
    border-radius: 8px;
    background: var(--footerBtn, #2a2a2a);
}

.button-secondary:hover {
    color: var(--activeColor, #a3cc41);
}

.shadow-card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.rounded-3xl {
    border-radius: 28px !important;
}

.rounded-2xl {
    border-radius: 18px !important;
}

.rounded-xl {
    border-radius: 12px !important;
}

.admin-layout {
    margin-top: 40px;
    margin-bottom: 60px;
}

.admin-sidebar {
    background: #2a2a2a;
    border: 1px solid var(--navbarBorder, rgba(112, 112, 112, 0.29));
    border-radius: 18px;
    padding: 20px;
    position: sticky;
    top: 30px;
}

.admin-sidebar__heading {
    margin-bottom: 18px;
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-sidebar__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.admin-sidebar__eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    color: var(--navbarStatic, rgba(203, 203, 203, 0.55));
    letter-spacing: 0.08em;
}

.admin-sidebar__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white, #ffffff);
}

.admin-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-sidebar__section-title {
    text-transform: uppercase;
    font-size: 11px;
    color: var(--navbarStatic, rgba(203, 203, 203, 0.55));
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.admin-sidebar__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.admin-sidebar__section-toggle {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.admin-sidebar__section + .admin-sidebar__section {
    border-top: 1px solid var(--navbarBorder, rgba(112, 112, 112, 0.29));
    padding-top: 16px;
}

.admin-sidebar__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-sidebar__section.collapsed .admin-sidebar__links {
     display: none;
}

.admin-sidebar__section-toggle {
     font-size: 0.8em;
     transition: transform 0.2s ease;
}

.admin-sidebar__section.collapsed .admin-sidebar__section-toggle {
     transform: rotate(-90deg);
}

.admin-sidebar__link {
    color: var(--navbarStatic, rgba(203, 203, 203, 0.55));
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 12px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.admin-sidebar__link:hover {
    color: var(--activeColor, #a3cc41);
    background: rgba(18, 17, 17, 0.85);
}

.admin-sidebar__link--active {
    color: var(--activeColor, #a3cc41);
    background: #121111;
    font-weight: 600;
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-up {
    animation: revealUp 0.7s ease forwards;
}

.reveal-delay-1 {
    animation-delay: 0.12s;
}

.reveal-delay-2 {
    animation-delay: 0.24s;
}

.reveal-delay-3 {
    animation-delay: 0.36s;
}